/*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; display: block; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /*********easy debug layout**********/ /* * { outline: 1px solid red; } */ /*********global********/ :root { --accent: #7ac142; --size: 0.6rem; } html{ scroll-behavior: smooth; } body{ color: #383735; background-color: #ffffff; /* font-family: "Noto Sans JP","游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳゴシック",sans-serif; */ font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* opacity: 0; overflow: hidden; */ } h1{ max-width: 60ch; line-height: 1.8; margin: auto; /* padding: 0 0 1rem 0; */ text-align: left; white-space: pre-line; margin-top: -0.5rem; margin-bottom: 3rem; } h1 br{ content: ''; display: block; margin-bottom: -1rem; width: 100%; } h2{ display: inline-block; margin: auto; max-width: 760px; font-weight: bold; font-size: 1.2rem; } h2::after{ margin-left: 10%; content: ""; float: left; background: #fec252; width: 80%; height: 0.25rem; border-radius: 0.25rem; margin-top: 0.1rem; } h2 span{ display: inline-block; } h3{ display: inline-block; color: cornflowerblue; font-weight: bold; font-size: 1.2rem; margin-bottom: 1.5rem; /* text-decoration: underline 0.2rem var(--accent); text-decoration-style: dotted; */ text-underline-offset: 0.3rem; text-underline-position: from-font; } h3::after{ content: ""; float: left; border-bottom-color: var(--accent); width: 100%; height: 0.25rem; margin-top: 0.1rem; border-bottom-style: dotted; } h4{ text-align: left; font-size: 1.2rem; font-weight: bold; margin-bottom: 0.4rem; } strong{ font-weight: bold; word-break: keep-all; color: cornflowerblue; } p { max-width: 60ch; line-height: 1.8; margin: auto; padding: 0 0 1rem 0; text-align: left; } .about-wrapper p:first-of-type, .profile p:first-of-type, .access > p:first-of-type, .contact p:first-of-type{ padding-top: 1.2rem; } nav a::after, .more a::after{ border-radius: 0.15rem; height: 0.15rem; display: block; content: ""; background-color: #fec252; width: 0%; transition: width .3s; margin: auto; } nav a:hover::after, .more a:hover::after{ width: 80%; transition: width .3s; } .nounderline:hover::after{ width: 0%; } nav{ grid-auto-flow: row; display: grid; align-content: stretch; align-items: center; max-width: fit-content; margin: auto; } .online{ position: relative; } .online::before{ border-radius: 0.5rem; height: calc(100% + 1rem); display: block; width: calc(100% + 3rem); position: absolute; background: #ffffff; content: ''; left: -0.5rem; top: -0.5rem; filter: drop-shadow(2px 2px 4px gray); } .online::after{ right: calc(0% - 1.8rem); top: 0; position: absolute; content: url(images/cart.svg); width: 1.7rem; height: auto; } .logo{ max-width: 65vw; margin-top: 1rem; margin-bottom: 0; width: 17rem; margin-left: -1.5rem; } nav ul{ font-weight: 500; color: #474547; grid-gap: 1.5rem; display: grid; grid-auto-flow: column; } nav a{ position: relative; } /* .menu{ display: none; filter: drop-shadow(2px 2px 4px gray); } */ .mininav-wrapper{ display: none; } .mininav{ color: black; padding: 0.4rem 0 0.2rem 0; grid-auto-flow: column; width: 100%; background: white; display: grid; position: fixed; bottom: 0rem; justify-content: space-evenly; box-shadow: rgb(0 0 0 / 10%) 0px 0px 6px -1px, rgb(0 0 0 / 6%) 0px 0px 4px -1px; z-index: 150; } .mininav a{ align-items: center; text-align: center; flex-direction: column; display: flex; font-size: 0.8rem; } .mininav a svg{ width: 1.4rem; height: 1.4rem; fill: var(--accent); } .mininav{ box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px !important; border-radius: 0.5rem; right: 0; margin-right: calc((100vw/5)); width: 4.5rem !important; color: rgb(87, 87, 87); padding: 0.6rem 0 0.5rem 0; grid-auto-flow: column; background: white; display: grid; position: fixed; bottom: 0rem; justify-content: space-evenly; z-index: 150; margin-bottom: 4rem; } .section{ padding: 0 2rem; max-width: 760px; margin: auto; text-align: center; } .hero{ /* display: grid; justify-content: center; align-content: stretch; align-items: center; */ margin-top: 2rem; margin-bottom: 2rem; } .hero-wrapper{ width: 70%; margin: auto; transform: translatey(0px); -webkit-animation: float 5s ease-in-out infinite; animation: float 5s ease-in-out infinite; } .hero-wrapper .slick-dots{ bottom: 0.5rem !important; padding: 0 1.5rem 0 0 !important; text-align: right !important; } .hero-wrapper .slick-dots li button:before { font-size: 0.6rem !important; opacity: .4 ; color: #fff ; } .hero-wrapper .slick-dots li.slick-active button:before { opacity: .85 ; color:#fff; } .intro{ padding: 0rem 2rem 2rem 2rem; text-align: left; } .intro p span { display: inline-grid; padding: 0.3rem; transform: scale(1.2); } .intro .button-wrapper { margin-top : -1.5rem; margin-bottom: 1rem; display: inline; } .flag{ display: inline-grid; padding: 0 0.2rem; } .about-wrapper .img-wrapper{ display: grid; justify-content: center; margin-left: -1rem; -webkit-animation: float2 5s ease-in-out infinite; animation: float2 5s ease-in-out infinite; padding-bottom: 1rem; margin-top: 1rem; margin-bottom: 1rem; } .about-wrapper{ padding: 1rem 0 1rem 0 ; background: white; } .section-wrapper:nth-of-type(3){ background-color: aliceblue; } .course{ padding: 2rem 0; } .course > p:first-of-type{ padding-bottom: 0; } .course > p { padding: 1rem 2rem; } .course-wrapper{ max-width: 60ch; margin: auto; } .course .slick-dots li button:before { font-size: 0.6rem !important; opacity: .4 ; color: var(--accent) ; } .course .slick-dots li.slick-active button:before { opacity: .85 ; color:var(--accent) } .card .button-wrapper{ margin: auto; justify-content: center; padding-left: 0; } .course .slick-track{ display: flex; align-items: center; } .profile{ padding: 2rem; } .profile-pic{ margin: auto; max-width: 18rem; margin-top: 1.2rem; border-radius: 0.8rem; } .section-wrapper:nth-of-type(4){ background-color: #fff6e8; } /* .video-wrapper{ margin-top: 1rem; margin-bottom: 3rem; border-radius: 0.8rem; height: 0px; overflow: hidden; padding-top: 56.25%; position: relative; width: 100%; } */ .video-wrapper { margin: auto; aspect-ratio: 16 / 9; max-width: calc(60ch + -4rem); margin-top: 1rem; margin-bottom: 3rem; border-radius: 0.8rem; overflow: hidden; position: relative; width: 100%; } .name{ display: grid; margin-top: 0.5rem; } .name strong{ font-size: 1.3rem; font-weight: normal; color: #5b5b5b; } .iframe-wrapper{ position: relative; margin-bottom: 2rem; background-color: white; line-height: 0; border-radius: 0.8rem; } iframe.gmap { width: 100%; aspect-ratio: 14 / 9; height: auto; /* box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px; */ position: relative; border-radius: 0.8rem; } .notice{ font-size: 0.8rem; } #access{ max-width: 60ch; margin: auto; padding: 2rem; text-align: center; } #access a, #sendmail > p a{ text-decoration: underline; } #access ul{ list-style: inside; text-align: left; font-size: 0.8rem; margin-left: 1rem; margin-bottom: 2rem; } .access-wrapper{ padding: 0 1rem; } .access-wrapper p{ } .access-wrapper p:last-of-type{ padding-bottom: 1.5rem; } .access-wrapper h5{ display: table; font-size: 1rem; margin-bottom: 0.5rem; text-underline-offset: 0.3rem; text-underline-position: from-font; text-align: left; } .access-wrapper h5::after{ content: ""; float: left; border-bottom-color: var(--accent); width: 100%; height: 0.25rem; margin-top: 0.1rem; border-bottom-style: dotted; } .section-wrapper:nth-of-type(6), .section-wrapper:nth-of-type(7){ background-color: #EFEFEF; } .contact{ padding: 2rem; max-width: 60ch; } .section-wrapper:nth-of-type(8){ background-color: #EFEFEF; padding: 1rem 2rem 2rem 2rem; } #news { text-align: center; padding-bottom: 4rem; } .news-wrapper{ /* padding: 2rem 0; background: white; */ } .news-wrapper{ max-width: calc(40ch + 2rem); margin: auto; } .news-wrapper .slick-prev{ left: 1rem; z-index: 1; } .news-wrapper .slick-next{ right: 1rem; } .news-wrapper .slick-prev, .news-wrapper .slick-next { width: 2rem; height: 2rem; } .news-wrapper .slick-next:before { content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2056%2056%22%3E%3Cpath%20fill%3D%22cornflowerblue%22%20d%3D%22M%2026.6055%2047.3945%20L%2032.8867%2031.4101%20C%2033.3086%2030.3320%2033.8242%2029.0195%2033.8242%2027.9883%20C%2033.8242%2026.9570%2033.3086%2025.6445%2032.8867%2024.5664%20L%2026.6055%208.5820%20C%2026.2539%207.6679%2025.4570%207.1055%2024.5898%207.1055%20C%2023.2070%207.1055%2022.1758%208.1133%2022.1758%209.4726%20C%2022.1758%2010.1523%2022.5742%2011.0898%2022.7851%2011.6992%20L%2029.2070%2027.9883%20L%2022.7851%2044.2773%20C%2022.5742%2044.8867%2022.1758%2045.8008%2022.1758%2046.5039%20C%2022.1758%2047.8867%2023.2070%2048.8945%2024.5898%2048.8945%20C%2025.4570%2048.8945%2026.2539%2048.3086%2026.6055%2047.3945%20Z%22%2F%3E%3C%2Fsvg%3E); } .news-wrapper .slick-prev:before{ content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCA1NiA1NiIgdmVyc2lvbj0iMS4xIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdHJhbnNmb3JtPSJtYXRyaXgoLTEsMCwwLDEsMCwwKSI+PHBhdGggZmlsbD0iY29ybmZsb3dlcmJsdWUiIGQ9Ik0gMjYuNjA1NSA0Ny4zOTQ1IEwgMzIuODg2NyAzMS40MTAxIEMgMzMuMzA4NiAzMC4zMzIwIDMzLjgyNDIgMjkuMDE5NSAzMy44MjQyIDI3Ljk4ODMgQyAzMy44MjQyIDI2Ljk1NzAgMzMuMzA4NiAyNS42NDQ1IDMyLjg4NjcgMjQuNTY2NCBMIDI2LjYwNTUgOC41ODIwIEMgMjYuMjUzOSA3LjY2NzkgMjUuNDU3MCA3LjEwNTUgMjQuNTg5OCA3LjEwNTUgQyAyMy4yMDcwIDcuMTA1NSAyMi4xNzU4IDguMTEzMyAyMi4xNzU4IDkuNDcyNiBDIDIyLjE3NTggMTAuMTUyMyAyMi41NzQyIDExLjA4OTggMjIuNzg1MSAxMS42OTkyIEwgMjkuMjA3MCAyNy45ODgzIEwgMjIuNzg1MSA0NC4yNzczIEMgMjIuNTc0MiA0NC44ODY3IDIyLjE3NTggNDUuODAwOCAyMi4xNzU4IDQ2LjUwMzkgQyAyMi4xNzU4IDQ3Ljg4NjcgMjMuMjA3MCA0OC44OTQ1IDI0LjU4OTggNDguODk0NSBDIDI1LjQ1NzAgNDguODk0NSAyNi4yNTM5IDQ4LjMwODYgMjYuNjA1NSA0Ny4zOTQ1IFoiPjwvcGF0aD4KPC9zdmc+); } .news-wrapper .slick-prev:before, .news-wrapper .slick-next:before{ font-size: 2rem; } .news-wrapper .slick-dots li button:before{ transform: scale(1.2); line-height: 20px; position: absolute; top: 0; left: 0; content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2036%2036%22%20version%3D%221.1%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%3Ctitle%3Emusic-note-solid%3C%2Ftitle%3E%3Cpath%20fill%3D%22currentColor%22%20class%3D%22clr-i-solid%20clr-i-solid-path-1%22%20d%3D%22M31.68%2C6.16c-1.92-3.3-10.6-4-11.58-4.09L19%2C2V22.29a5.88%2C5.88%2C0%2C0%2C0-.81-.55%2C8.33%2C8.33%2C0%2C0%2C0-6.53-.41c-4.12%2C1.33-6.77%2C5.13-5.91%2C8.47a5.33%2C5.33%2C0%2C0%2C0%2C2.66%2C3.32%2C7.48%2C7.48%2C0%2C0%2C0%2C3.61.88A9.54%2C9.54%2C0%2C0%2C0%2C15%2C33.52c3.7-1.19%2C6.2-4.37%2C6.06-7.42%2C0%2C0%2C0%2C0%2C0%2C0V8.49c1%2C.12%2C2.37.33%2C3.82.64a11.17%2C11.17%2C0%2C0%2C1%2C4.06%2C1.46c1%2C.66.38%2C1.9.33%2C2a11.8%2C11.8%2C0%2C0%2C1-1.66%2C2%2C1%2C1%2C0%2C0%2C0%2C1.33%2C1.49C29.15%2C15.85%2C34.5%2C11%2C31.68%2C6.16Z%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2236%22%20height%3D%2236%22%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E); text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .news-wrapper .slick-dots { bottom: unset; } .news-wrapper .slick-dots li.slick-active button:before { opacity: .85 ; color:#000000; } .news-archive{ max-width: calc(40ch + 2rem); margin: auto; padding-top: 2rem; display: inline-block; } .news-archive h4{ padding-left: 1rem; } .archive a{ max-width: calc(40ch - 2rem); border-bottom: dotted 1px darkgray; padding: 0.35rem 0; font-weight: bold; line-height: 1.8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: left; text-overflow: ellipsis; } .archive a > span:first-of-type{ margin-right: 0.3rem; background: white; font-weight: normal; padding: 0.1rem 0.4rem; font-size: 0.8rem; border-radius: 0.2rem; } summary{ margin: auto; width: calc(100% - 2rem); padding: 0.5rem 0; border-bottom: 1px dotted #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } details[open] summary ~ * { animation: open 0.3s ease-in-out both ; } @keyframes open { 0% { opacity: 0; } 100% { opacity: 1; } } .news-wrapper .img-wrapper{ /* border-radius: 0.6rem; overflow: hidden; margin: 1rem 0; */ } .separation{ background-image: url(images/waves.svg); aspect-ratio: 900/140; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .separation-footer{ background-image: url(images/waves-footer-choco.svg); aspect-ratio: 900/140; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .reverse{ transform: rotate(180deg); } .container{ grid-gap: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .container-about .card{ grid-gap: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } .card{ padding: 2rem; border-radius: 0.8rem; background: white; margin: 1.5rem 1rem 0.5rem 1rem; } .card img{ object-fit: cover; border-radius: 0.5rem; } .card-short-paragraph { padding: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: left; text-overflow: ellipsis; /* white-space: pre-line; */ } .card-short-paragraph p{ padding: 0; } .card-short-paragraph p strong{ color: rgb(49, 49, 49); } .card-short-paragraph p a{ font-weight: bold; text-decoration: revert; } .info > span{ display: block; width: 100%; text-align: left; font-size: 1.1rem; margin-top: 0.2rem; } .info h4{ margin-bottom: 0.8rem; padding: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; text-overflow: ellipsis; margin-top: 0.6rem; } .info a{ text-decoration: underline; } .info strong{ color: inherit; } .info ol, .info ul{ list-style: auto; padding-left: 2.5rem; margin-bottom: 1rem; } .info ul{ list-style: disc; } .cta-container{ margin-top: 1.2rem; display: grid ; grid-auto-flow: column; align-items: center; justify-content: end; align-content: center; gap: 0.2rem; } .cta-container a{ display: grid; grid-auto-flow: column; align-content: center; align-items: center; gap: 0.3rem; font-weight: bold; border-bottom: 1px solid black; text-decoration: none; } .container-about .card img{ aspect-ratio: unset; object-fit: unset; border-radius: unset; width: 100%; } .description{ justify-items: center; margin: auto; margin-top: 1rem; max-width: 500px; grid-gap: 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr); } .description span{ display: block; font-weight: bold; margin-bottom: 0.5rem; } .description p{ word-break: auto-phrase; text-wrap: balance; } .description p:first-child{ font-weight: bold; } .classes-wrapper{ padding: 0 1.5rem; justify-items: center; display: grid; margin: auto; max-width: 45ch; } .classes-wrapper img{ border-radius: 0.5rem; margin-bottom: 2rem; } .button-wrapper{ max-width: 60ch; margin: auto; display: flex; align-items: center; justify-content: center; } .button{ display: inline-grid; grid-auto-flow: column; background: var(--accent); color: white; padding: 0.8rem 1.5rem; border-radius: 100vw; margin-bottom: 1.5rem; align-content: center; align-items: center; } .button:hover{ cursor: pointer; transform: scale(1.06); box-shadow: 3px 3px 8px rgba(0, 0, 0, .3); } .button span{ font-size: small; margin: unset; margin-left: 0.3rem; } .widget{ max-width: calc(100% - 4rem); margin: auto; } .insta > .widget{ max-width: 100%; } #access > div > div.container-about > div > a img{ border-radius: 0.5rem; } .widget-wrapper{ grid-auto-flow: column; display: grid; margin-bottom: 2rem; } .news-page-wrapper{ padding: 1rem 2rem 3rem 2rem; max-width: 60ch; margin: auto; } .news-page-wrapper > div > img{ border-radius: 0.8rem; } form{ margin: auto; max-width: 600px; border-radius: 0.5rem; text-align: left; } .form input[type=date], .form input[type=datetime], .form input[type=number], .form input[type=search], .form input[type=time], .form input[type=url], .form input[type=email], .form input[type=mail], .form input[type=tel], .form input[type=text], .form textarea, .form select { background: white; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 0.4em 0.8rem; border-radius: 0.5rem; margin: 0.5rem 0; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; /* outline: none; */ line-height: 1.8; box-shadow: rgb(17 17 26 / 10%) -1px -1px 0px 0px; } /* .form input:invalid { border: solid 5px red; } */ .form select:required:invalid { color: #a5a5a5; } .form option[value=""][disabled] { display: none; } .form option { color: black; } .field { width: 100%; /* margin-bottom: 0.6em !important; */ } .form .card-cta{ background: var(--h-accent); margin-top: 1rem; margin-right: 1rem; margin-left: auto; display: flex; width: fit-content; text-align: revert; } .form ::placeholder{ color: #a5a5a5; } .form textarea{ margin-bottom: 0; } #message{ margin-bottom: 1rem; } .footer{ /* background-color: #fa9d00; */ background-color: #292929; } .footer-wrapper{ font-size: small; max-width: 760px; text-align: center; padding-bottom: 3rem; margin: auto; padding-top: 5rem; display: grid; color: white; justify-items: center; } /* .sns{ display: grid; grid-auto-flow: column; grid-gap: 1rem; margin: 1rem 1rem 2rem 1rem; } */ .footer-logo{ margin-left: -0.8rem; } .sns{ margin: 2rem 0; display: grid; justify-content: center; justify-items: center; grid-auto-flow: column; grid-gap: 1rem; } .bold{ font-weight: bold; } .bold::after{ border-radius: 100vw; height: 2px; display: block; content: ""; background-color: white; width: 0%; transition: width .3s; } .bold:hover::after{ width: 100%; transition: width .3s; } /* spinner and thanks */ .checkmarktext, .spinner-wrapper{ height: 10rem; display: none !important; } .checkmark_wrapper { display: flex; justify-content: center; align-items: center; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #7ac142; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards } .checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 1.8rem 0 0.2rem 0; box-shadow: inset 0px 0px 0px #7ac142; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards } .thanks{ word-break: keep-all; text-align: center; padding-bottom: 1rem; } @keyframes stroke { 100% { stroke-dashoffset: 0 } } @keyframes scale { 0%, 100% { transform: none } 50% { transform: scale3d(1.1, 1.1, 1) } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #7ac142 } } .spinner-wrapper{ display: flex; justify-items: center; justify-content: center; align-items: center; padding: 2rem; margin-bottom: 2rem; } .lds-spinner { transform: scale(0.8); color: gray; display: inline-block; position: relative; width: 80px; height: 80px; } .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: gray; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } } #sendmessage{ text-align: end; width: 100%; display: block; } @-webkit-keyframes float { 0% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } 50% { /*filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1.025); } 100% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } } @keyframes float { 0% { /* filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } 50% { /*filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1.025); } 100% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } } @-webkit-keyframes float2 { 0% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } 50% { /*filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1.1); } 100% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } } @keyframes float2 { 0% { /* filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } 50% { /*filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1.1); } 100% { /*filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.25));*/ transform: translatey(0px) scale(1); } } .logo-menu{ margin-bottom: 2.5rem; margin-left: -1.5rem; } .menu-wrap{ border-radius: 70px; /* box-shadow: 3px 3px 8px rgba(0, 0, 0, .3); */ height: 70px; background: white; position: fixed; /* bottom: 0; */ right: 0; z-index: 4; width: 70px; margin: 1rem; display: none; } .menu-wrap .toggler{ /*border-radius: 70px; box-shadow: 3px 3px 8px rgba(0, 0, 0, .5); height: 70px; background: white; position: fixed; bottom: 0; right: 0; z-index: 1; width: 70px; margin: 1.6em;*/ position: absolute; z-index: 4; width: 70px; cursor: pointer; opacity: 0; height: 70px; } .menu-wrap .hamburger{ flex-direction: column; position: absolute; top: 0; z-index: 3; width: 70px; height: 70px; display: flex; align-items: center; transition: all 0.8s ease; justify-content: center; } .menu-wrap .hamburger > div{ background-image: url(images/menu.svg); width: 50px; height: 50px; transition: all .2s ease-out; } .menu-wrap .hamburger > div:before, .menu-wrap .hamburger > div:after{ content: ''; position: absolute; z-index: 1; top: -7px; width: 100%; height: 2px; background: inherit; transition: all .2s ease-out; } .menu-wrap .hamburger > div:after{ top: 7px; } .menu-wrap .hamburger span{ font-size: small; margin-top: 0.6rem; } .menu-wrap .toggler:checked + .hamburger > div{ background-image: url(images/menu-close.svg); /* transform: rotate(135deg); */ transition: all .2s ease-out; opacity: 0.85; } .menu-wrap .toggler:checked + .hamburger > div:before, .menu-wrap .toggler:checked + .hamburger > div:after { /* top: 0; transform: rotate(90deg); */ } .menu-wrap .toggler:checked:hover + .hamburger > div{ /* transform: rotate(225deg); */ } .menu-wrap .toggler:checked ~ .menu { visibility: visible; } .menu-wrap .toggler:checked ~ .menu > div{ transform: scale(1); transition-duration: 0.3s; } .menu-wrap .toggler:checked ~ .menu > div > div { opacity: 1; transition: opacity 0.4s ease; } .menu-wrap .menu { position: fixed; top: 0; right: 0; width: 100%; height: 100%; visibility: hidden; overflow: hidden; display: flex; align-items: center; justify-content: center; } .menu-wrap .menu > div{ background: white; border-radius: 50%; width: 250vh; height: 250vh; display: flex; flex: none; align-items: center; justify-content: center; transform: scale(0); transition: all 0.4s ease; } .menu-wrap .menu > div > div{ text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; } .menu-wrap .menu > div > div > ul { grid-gap: 0.3rem; display: grid; justify-content: center; justify-items: center; } .menu-wrap .menu > div > div > ul > li { list-style: none; color: #383735; font-size: 1.2rem; padding-bottom: 0.5rem; } .menu-wrap .menu > div > div > ul > li:last-of-type { padding: 0; } .menu-wrap .menu > div > div > ul > li > a { color: inherit; text-decoration: none; transition: color 0.4s ease; align-items: center; } .menu-wrap .menu > div > div > ul > li > a::after{ border-radius: 100vw; height: 2px; display: block; content: ""; background-color: #383735; width: 0%; transition: width .3s; } .menu-wrap .menu > div > div > ul > li > a:hover::after{ width: 100%; transition: width .3s; } .menu-wrap .menu > div > div > ul > li > a > img { height: 1.5em; } .menu > div > div > .sns{ filter: invert(1); } .hidden{ position: relative; left: -1rem; top: 1.5rem; padding-bottom: 0; } .hidden::before{ z-index: -1; background-color: #fec252; } .scrolled{ opacity: 1 !important; visibility: visible !important; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ; box-shadow: 3px 3px 8px rgba(0, 0, 0, .3); } /* body > div.menu-wrap.scrolled > div.menu > div > div > div.sns{ margin-top: 3rem; display: grid; justify-content: center; justify-items: center; opacity: 0.7; filter: invert(1); } */ .gallery{ display: grid; grid-gap: 1rem; grid-auto-flow: column; margin-bottom: 4rem; } .gallery img{ aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.5rem; } @media (max-width: 760px) { .logo{ width: 15rem; margin-left: 0.7rem; } .widget{ max-width: calc(100%); margin: auto; } .widget-wrapper{ grid-gap: 2rem; grid-auto-flow: row; } nav{ max-width: unset; } .mininav{ display: none; } .menu-wrap{ display:block; } /* nav{ grid-auto-flow: column; justify-content: space-between; } .logo{ margin-left: 1rem; width: 20rem; } */ nav ul{ display: none; } /* .menu{ display: block; margin-right: 1.5rem; background-color: white; border-radius: 100vw; width: 3.5rem; height: 3.5rem; display: grid; justify-content: center; align-content: center; } */ .hero{ margin-top: 1rem; } .hero-wrapper{ left: -0.5rem; width: calc(100% + 1rem); } .container, .container-about .card{ grid-template-columns: unset; } .classes-wrapper { max-width: unset; } .news-page-wrapper{ } } .course-wrapper{ padding: 0 2rem; } .course-wrapper .button-wrapper{ text-align: center; max-width: 60ch; margin: auto; display: flex; justify-content: center; margin-bottom: 3rem; } .table-wrapper{ margin: auto; display: grid; justify-content: center; margin-top: 0.5rem; } table{ /* margin: 0.0 auto 0 0; */ margin: auto; border-collapse: collapse; border-radius: 0.5rem 0.5rem 0 0; overflow: hidden; font-weight: bold; font-size: 0.73rem; margin-bottom: 1.5rem; width: calc(100%); max-width: 60ch; } thead > tr{ border-bottom: none; } thead > tr > td:nth-of-type(2) > p, thead > tr > td:nth-of-type(3) > p, thead > tr > td:nth-of-type(4) > p{ color: white; } td > p{ padding: 0 0.4rem; } td:nth-of-type(2) > p, td:nth-of-type(3) > p, td:nth-of-type(4) > p{ text-align: center; padding: 0.4rem 0.4rem; color: rgb(95, 95, 95); } tbody > tr:last-of-type{ border-bottom: unset; } tbody > tr > td:first-of-type { padding: 0 0.3rem; } tbody > tr > td { background: white; } tr{ border-bottom: 2px #d9d9d9 solid; } tbody > tr > td:first-of-type{ /* padding-left: 0.3rem; */ /* padding-right: 1rem; */ } tbody > tr > td{ border-right: 1px #d9d9d9 solid; border-left: 1px #d9d9d9 solid; } tbody > tr > td:last-of-type{ /* border-right: none; */ } .styled-table-1{ box-shadow: 0 0.2rem 0 cornflowerblue; } .styled-table-1 thead, #kids .button-wrapper a .button{ background: cornflowerblue; color: white; } .styled-table-1 thead > tr > td{ border-right: #b1d5f5 solid 1px; } .styled-table-1 tbody > tr > td:first-of-type{ background: aliceblue; color: cornflowerblue; } .styled-h3-2{ color: darkorange; } .styled-table-2{ box-shadow: 0 0.2rem 0 darkorange; } .styled-table-2 thead, #students .button-wrapper a .button{ background: darkorange; color: white; } .styled-table-2 thead > tr > td{ border-right: #ffebd2 solid 1px; } .styled-table-2 tbody > tr > td:first-of-type{ background: #ffebd2; color: darkorange; } .styled-h3-3{ color: var(--accent); } .styled-table-3{ box-shadow: 0 0.2rem 0 var(--accent); } .styled-table-3 thead, #regular .button-wrapper a .button{ background: var(--accent); color: white; } .styled-table-3 thead > tr > td{ border-right: #eeffe0 solid 1px; } .styled-table-3 tbody > tr > td:first-of-type{ background: #eeffe0; color: var(--accent); } .styled-h3-4{ color: #6b6b6b; } .styled-table-4{ box-shadow: 0 0.2rem 0 #6b6b6b; } .styled-table-4 thead, #advanced .button-wrapper a .button{ background: #6b6b6b; color: white; } .styled-table-4 thead > tr > td{ border-right: #efefef solid 1px; } .styled-table-4 tbody > tr > td:first-of-type{ background: #efefef; color: #6b6b6b; } .course-wrapper > h4:first-of-type{ margin-top: 1.5rem; } .course-info:first-of-type{ margin-top: 2rem; } .trial-wrapper { text-align: center; margin: auto; padding: 2rem; max-width: 40ch; border-radius: 0.8rem; background: white; margin-bottom: 3rem; } .trial-wrapper .img-wrapper img{ aspect-ratio: 3/2; object-fit: cover; margin: 1.5rem 0; border-radius: 0.5rem; } .trial-wrapper a{ text-decoration: underline; } .table-wrapper{ display: none; }