/* swiper-bundle.min.css */ /** * Swiper 11.0.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2024 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 27, 2024 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /* animate.css */ /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /* base.css */ *, *:before, *:after { box-sizing: border-box; outline: 0; } *, :focus, :focus-visible, :hover { outline: 0; scrollbar-width: thin; scrollbar-color: #ddd transparent; -webkit-tap-highlight-color: transparent; } *::-webkit-scrollbar { background: #eee; width: 5px; height: 5px; } *::-webkit-scrollbar-thumb { background: var(--text_color); } html * { touch-action: manipulation; /* Prevents double-tap zoom but allows scrolling */ } html.js noscript, html.no-js .no-js-hidden { display: none !important; } html.no-js .is-slider { display: flex; flex-wrap: nowrap; overflow: hidden; } html.no-js .layout_1 .is-slider, html.no-js .layout_3 .is-slider { gap: 2px; } html.no-js swiper-nav { display: none; } html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; box-sizing: border-box; font-size: var(--text); scrollbar-gutter: stable; } body { background: var(--body_background); color: var(--text_color); font-size: var(--text); font-family: var(--body_font_family); font-weight: var(--body_font_weight); line-height: var(--body_font_line_height); letter-spacing: var(--body_letter_spacing); font-style: var(--body_font_style); margin: 0; padding: 0; word-break: break-word; scroll-behavior: smooth; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-kerning: normal; } .body-main { min-height: 100vh; display: flex; flex-direction: column; scroll-behavior: smooth; background: var(--body_background); } .content-for-layout { display: flex; flex: 1; backface-visibility: hidden; min-height: 70vh; flex-direction: column; background: var(--body_background); } .page-banner .page--title { /* color: var(--header_color); */ color: var(--heading_color); } ul, ol { margin: 0; list-style: none; padding: 0px; } a { text-decoration: none; color: var(--link_color); cursor: pointer; transition: 0.2s ease; } .rte a { text-decoration: underline; color: inherit; } .rte ul { list-style-type: disc; padding-left: 1.5rem; } .rte ol { list-style-type: decimal; padding-left: 1.5rem; } blockquote { border-left: 1px solid; padding-left: 1rem; color: var(--text_color); } small, sub, sup { font-size: 95%; } iframe, img { max-width: 100%; } button, input[type='submit'] { cursor: pointer; } input[type='email'], input[type='number'], input[type='password'], input[type='search'], input[type='text'], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input:focus-visible { outline: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; } input[type='search']::-webkit-search-cancel-button { display: none; } details>summary { cursor: pointer; list-style: none; } details>summary::-webkit-details-marker { display: none; } button { border: 0; padding: 0; color: var(--text_color); font-family: var(--body_font_family); font-weight: var(--body_font_weight); font-style: var(--body_font_style); font-size: var(--text); } button[disabled] { opacity: 0.5; } .form-group { margin-bottom: 18px; } label { margin-bottom: 5px; display: inline-block; } .form-control, input, textarea, select { display: block; width: 100%; background-color: var(--form_background); border: 1px solid var(--form_border); padding: 9px 20px; min-height: 50px; color: var(--form_text); font-family: var(--body_font_family); line-height: 1.3; font-size: var(--text); border-radius: var(--form_radius); } .form-input-small .form-control, .form-input-small textarea, .form-input-small select { min-height: 42px; } .form-input-medium .form-control, .form-input-medium textarea, .form-input-medium select { min-height: 52px; } .input-sm { min-height: 42px !important; } textarea { resize: none; overflow: auto; } textarea.form-control { border-radius: calc(var(--form_radius) / 2); min-height: 120px; } .form-control::placeholder, input::placeholder { opacity: 0.7; position: relative; color: var(--form_text); } .form-control:focus-visible, select:focus-visible { border-color: var(--text_color) !important; } body select { -webkit-appearance: none; text-overflow: ellipsis; } .table--responsive { width: 100%; max-width: 100%; overflow-x: auto; } table { border-spacing: 0; border-collapse: collapse; width: 100%; border: 1px solid var(--border_color); font-size: var(--small_text); } table.no-border, table.no-border td, table.no-border th { border: 0; } tr th, tr td { vertical-align: middle; white-space: nowrap; border: 1px solid var(--border_color); color: var(--text_color); font-size: var(--text); padding: 16px 20px; text-wrap: wrap; } h1, h2, h3, h4, h5, h6 { color: var(--heading_color); font-family: var(--heading_font_family); font-style: var(--heading_font_style); font-weight: var(--heading_font_weight); line-height: var(--heading_font_line_height); letter-spacing: var(--heading_letter_spacing); margin: 0; } h1, .h1 { font-size: var(--h1); } h2, .h2 { font-size: var(--h2); } h3, .h3 { font-size: var(--h3); } h4, .h4 { font-size: var(--h4); } h5, .h5 { font-size: var(--h5); } h6, .h6 { font-size: var(--h6); } p { margin: 0; color: var(--text_color); font-size: var(--text); } p:empty { display: none; } .text-xsmall { font-size: var(--xsmall_text); } .text-small { font-size: var(--small_text); } .text { font-size: var(--text); } .text-medium { font-size: var(--medium_text); } .text-large { font-size: var(--large_text); } .text-xlarge { font-size: var(--xlarge_text); } .container, .container-fluid, .container-sm, .container-md,.container-xs, .container-fullwidth, .container-narrow, .shopify-policy__container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters>.col, .no-gutters>[class*='col-'] { padding-right: 0; padding-left: 0; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; max-width: 100%; padding-right: 15px; padding-left: 15px; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } @media (min-width: 576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .d-h1 { font-size: var(--h1); } .d-h2 { font-size: var(--h2); } .d-h3 { font-size: var(--h3); } .d-h4 { font-size: var(--h4); } .d-h5 { font-size: var(--h5); } .d-h6 { font-size: var(--h6); } .container, .container-fluid, .container-sm, .container-md, .container-fullwidth, .container-narrow, .shopify-policy__container { padding-right: 15px; padding-left: 15px; } } @media (min-width: 992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .form-control, input, textarea, select { min-height: 62px; } } @media (min-width: 1025px) { *:focus-visible { outline: 2px solid #595959; outline-offset: 1px; transition: unset !important; z-index: 1; } .focus-inside:focus-visible { outline-offset: -2px; } .container-fullwidth { padding-left: 2rem; padding-right: 2rem; } .container-narrow{ padding-left: 24px; padding-right: 24px; } } @media (min-width: 1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .container { max-width: 1370px; } .container-fullwidth { padding-right: 4rem; padding-left: 4rem; } .container-xs{ max-width: 1160px; } .container-sm { max-width: 1260px; } .container-md { max-width: 1270px; } } @media (min-width: 1441px) { .container { max-width: 1740px; } .container-sm { max-width: 1300px; } .container-md { max-width: 1440px; } .container-fullwidth { padding-right: 7rem; padding-left: 7rem; } } @media (max-width: 767px) { *::-webkit-scrollbar { display: block; } input, select, textarea, .form-control { font-size: 16px !important; padding: 8px 15px; min-height: 48px; } .m-h1 { font-size: var(--h1); } .m-h2 { font-size: var(--h2); } .m-h3 { font-size: var(--h3); } .m-h4 { font-size: var(--h4); } .m-h5 { font-size: var(--h5); } .m-h6 { font-size: var(--h6); } } /* component.css */ /* *:not(h1, h2, h3, h4, h5, h6).heading-font { font-family: var(--heading_font_family); font-style: var(--heading_font_style); font-weight: var(--heading_font_weight); line-height: var(--heading_font_line_height); color: var(--heading_color); } */ .heading-font { font-family: var(--heading_font_family); font-style: var(--heading_font_style); font-weight: var(--heading_font_weight); line-height: var(--heading_font_line_height); color: var(--heading_color); } .body-font { font-family: var(--body_font_family); font-style: var(--body_font_style); font-weight: var(--body_font_weight); } .accent-font { font-family: var(--accent_font_family); font-style: var(--accent_font_style); font-weight: var(--accent_font_weight); line-height: var(--accent_font_line_height); } span.section--heading.heading-font { display: inline-block; } .outline-font { -webkit-text-stroke: var(--outline_thickness) var(--outline_text_color); text-stroke: var(--outline_thickness) var(--outline_text_color); -webkit-text-fill-color: transparent; text-fill-color: transparent; } .list-inline { display: inline-flex; flex-wrap: wrap; } .cursor-pointer { cursor: pointer; } .text-underline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .line-through { text-decoration: line-through; } .overflow-hidden { overflow: hidden; } .width-100 { width: 100%; } .height-100 { height: 100%; } .height-fullpage { height: 100vh; } .font-bold { font-weight: 600; } .font-regular { font-weight: normal; } .font-medium { font-weight: 500; } .font-normal { font-style: normal; } .font-italic { font-style: italic; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .lowercase { text-transform: lowercase; } .lowercase::first-letter { text-transform: uppercase; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .pos-static { position: static; } .pos-relative { position: relative; } .pos-absolute { position: absolute; } .pos-fixed { position: fixed; } .pos-sticky { position: sticky; } .pr-0 { padding-right: 0; } .pl-0 { padding-left: 0; } .pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; } .gap-0 { gap: 0 !important; } .gap-5 { gap: 5px; } .gap-10 { gap: 10px; } .gap-15 { gap: 15px; } .left-0 { left: 0; } .right-0 { right: 0; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } .border { border: 1px solid var(--border_color); } .border-top { border-top: 1px solid var(--border_color); } .border-bottom { border-bottom: 1px solid var(--border_color); } .border-right { border-right: 1px solid var(--border_color); } .border-left { border-left: 1px solid var(--border_color); } .border-width-2 { border-width: 2px; } .border-width-3 { border-width: 3px; } .border-width-4 { border-width: 4px; } .border-width-5 { border-width: 5px; } .border-none { border: 0; } .border-top-none { border-top: 0; } .border-bottom-none { border-bottom: 0; } .border-right-none { border-right: 0; } .border-left-none { border-left: 0; } .rounded { border-radius: 100%; } .border-radius-none { border-radius: 0 !important; } .border-radius-top-left-none { border-top-left-radius: 0px !important; } .border-radius-top-right-none { border-top-right-radius: 0px !important; } .border-radius-bottom-left-none { border-bottom-left-radius: 0px !important; } .border-radius-bottom-right-none { border-bottom-right-radius: 0px !important; } .border-radius-8 { border-radius: 8px; } .border-radius-10 { border-radius: 10px; } .border-radius-18 { border-radius: 18px; } /* desktop border-radius */ .top-left { top: 15px; left: 15px; } .top-center { top: 15px; left: 50%; transform: translateX(-50%); } .top-right { top: 15px; right: 15px; } .center-left { top: 50%; left: 15px; transform: translateY(-50%); } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .center-right { top: 50%; right: 15px; transform: translateY(-50%); } .bottom-left { bottom: 15px; left: 15px; } .bottom-center { bottom: 15px; left: 50%; transform: translateX(-50%); } .bottom-right { bottom: 15px; right: 15px; } .hidden, .js-hidden { display: none !important; } .visually-hidden { visibility: hidden; } .d-none { display: none; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; } .d-inline-flex { display: inline-flex; } .align-items-start { align-items: flex-start; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } .p-0 { padding: 0 !important; } .pl-0 { padding-left: 0px !important; } .pr-0 { padding-right: 0px !important; } .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } /* button primary secondary */ /* end */ @media (min-width: 320px) { .d-sm-none { display: none; } .d-sm-inline { display: inline; } .d-sm-inline-block { display: inline-block; } .d-sm-block { display: block; } .d-sm-flex { display: flex; } .d-sm-inline-flex { display: inline-flex; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-inline { display: inline; } .d-md-inline-block { display: inline-block; } .d-md-block { display: block !important; } .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex; } .d-md-grid { display: grid !important; } .d-text-left { text-align: left; } .d-text-center { text-align: center; } .d-text-right { text-align: right; } .d-pos-static { position: static; } .d-pos-relative { position: relative; } .d-pos-absolute { position: absolute; } .d-pos-fixed { position: fixed; } .d-pos-sticky { position: sticky; } .d-top-left { top: 20px; left: 20px; } .d-top-center { top: 20px; left: 50%; transform: translateX(-50%); } .d-top-right { top: 20px; right: 20px; } .d-center-left { top: 50%; left: 20px; transform: translateY(-50%); } .d-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .d-center-right { top: 50%; right: 20px; transform: translateY(-50%); } .d-bottom-left { bottom: 20px; left: 20px; } .d-bottom-center { bottom: 20px; left: 50%; transform: translateX(-50%); } .d-bottom-right { bottom: 20px; right: 20px; } .d-pos-static { position: static; } .d-pos-relative { position: relative; } .d-pos-absolute { position: absolute; } .d-pos-fixed { position: fixed; } .d-media-fixed.media { height: var(--media_height); padding-bottom: 0px; } .d-media-adapt.media { padding-bottom: var(--image_ratio); } .d-border-radius-all { border-radius: var(--card_radius); overflow: hidden; } .d-border-radius-none { border-radius: 0px; } .d-border-radius-bottom { border-bottom-left-radius: var(--card_radius); border-bottom-right-radius: var(--card_radius); overflow: hidden; } .d-border-radius-top { border-top-left-radius: var(--card_radius); border-top-right-radius: var(--card_radius); overflow: hidden; } .d-pr-0 { padding-right: 0; } .d-pl-0 { padding-left: 0; } .d-pt-0 { padding-top: 0; } .d-pb-0 { padding-bottom: 0; } } @media (min-width: 992px) { .d-lg-none { display: none; } .d-lg-inline { display: inline; } .d-lg-inline-block { display: inline-block; } .d-lg-block { display: block; } .d-lg-flex { display: flex; } .d-lg-inline-flex { display: inline-flex; } } @media (min-width: 1025px) { .image-hover:hover img { transform: scale(1.1); } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } } @media (max-width: 767px) { .m-text-left { text-align: left; } .m-text-center { text-align: center; } .m-text-right { text-align: right; } .m-pos-static { position: static; } .m-pos-relative { position: relative; } .m-pos-absolute { position: absolute; } .m-pos-fixed { position: fixed; } .m-pos-sticky { position: sticky; } .m-top-left { top: 15px; left: 15px; } .m-top-center { top: 15px; left: 50%; transform: translateX(-50%); } .m-top-right { top: 15px; right: 15px; } .m-center-left { top: 50%; left: 15px; transform: translateY(-50%); } .m-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .m-center-right { top: 50%; right: 15px; transform: translateY(-50%); } .m-bottom-left { bottom: 15px; left: 15px; } .m-bottom-center { bottom: 15px; left: 50%; transform: translateX(-50%); } .m-bottom-right { bottom: 15px; right: 15px; } .m-pos-static { position: static; } .m-pos-relative { position: relative; } .m-pos-absolute { position: absolute; } .m-pos-fixed { position: fixed; } .m-media-fixed.media { height: var(--media_height); padding-bottom: 0px; } .m-media-adapt.media { padding-bottom: var(--image_ratio); } .m-border-radius-all { border-radius: var(--card_radius); overflow: hidden; } .m-border-radius-none { border-radius: 0px; } .m-border-radius-bottom { border-bottom-left-radius: var(--card_radius); border-bottom-right-radius: var(--card_radius); overflow: hidden; } .m-border-radius-top { border-top-left-radius: var(--card_radius); border-top-right-radius: var(--card_radius); overflow: hidden; } .m-pr-0 { padding-right: 0; } .m-pl-0 { padding-left: 0; } .m-pt-0 { padding-top: 0; } .m-pb-0 { padding-bottom: 0; } } /* theme.css */ .skip-to-content-link { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); word-wrap: normal !important; } .skip-to-content-link:focus-visible { z-index: 99 !important; width: auto; height: auto; clip: auto; } .shopify-challenge__container { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; align-items: center; padding: 30px; } .shopify-challenge__container .shopify-challenge__button { margin-top: 20px; } .shopify-challenge__container .shopify-challenge__message, .shopify-challenge__container .shopify-challenge__errors { text-align: center; padding-bottom: 10px; } .shopify-policy__container { max-width: 1000px; padding-top: 50px; padding-bottom: 50px; } .shopify-policy__title { padding-bottom: 20px; } .tooltip { position: absolute; inset-block-end: calc(100% + 15px); background: var(--text_color); color: var(--body_background); width: max-content; padding: 4px 10px; border-radius: 4px; transform: translate(-50%) scale(0.8); left: 50%; opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(0.3, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.3, 1, 0.3, 1); } .tooltip:after { content: ''; position: absolute; inset-inline-start: 50%; transform: translateX(-50%); border-color: var(--text_color) transparent; border-style: solid; border-width: 10px 10px 0; inset-block-end: -7px; display: block; width: 0; } swiper-nav, [is='hover-icons'], [is='hover-link'], [is='hover-li'], [is='store-locator-context'], [is='localization-context'] { /* transition: transform 0.1s linear, color 0.1s linear, background 0.15s linear; */ will-change: transform; transition: transform 0.2s ease-out; } [data-saos], [data-card-animate] { will-change: transform, opacity; /* Optimizes for animations */ } .king_cursor { display: none; } .payment-icons-item svg { width: 30px; height: auto; } /* common animation frames start */ @keyframes cross_animate { 0%, 100% { clip-path: inset(0 0 0 0); } 42% { clip-path: inset(0 0 0 100%); } 43% { clip-path: inset(0 100% 0 0); } } @keyframes icon_bounce { 0% {} 100% { transform: translateY(-50%); } } /* common animation frames end */ /* form error css start */ .form--message { padding: 10px 15px; border-radius: 6px; margin-bottom: 20px; font-size: var(--small_text); } .form--message.error { background: rgba(255, 0, 0, 0.05); color: var(--color_error_text); } .form--message.error * { color: var(--color_error_text); } .form--message.error.no-bg, .form--message.success.no-bg { background: transparent; } .form--message.success { background: rgba(0, 128, 0, 0.05); color: var(--color_success_text); } .form--message.success * { color: var(--color_success_text); } .form--message ul li { margin-bottom: 2px; } /* form error css end */ /* social icon css start */ .social--icons-link { display: flex; width: 30px; height: 30px; justify-content: center; align-items: center; overflow: hidden; } .social--icons-link svg { width: 20px; height: auto; display: block; } /* social icon css end */ /* empty card css start */ .not-found-box { min-height: 80vh; display: flex; justify-content: center; align-items: center; width: 100%; } .empty--card { width: 100%; text-align: center; padding: 20px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--heading_color); } .empty--card.with-background { background: var(--body_alternate_background); border-radius: var(--card_radius); } .empty--card svg { width: 50px; height: auto; margin-bottom: 15px; } .empty--card-heading { margin-bottom: 15px; } .empty--card-desc { font-size: var(--medium_text); margin-bottom: 20px; } /* empty card css end */ /* page banner css start */ .page--banner { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--banner_height); overflow: hidden; border-radius: var(--card_radius); } .no-container .page--banner { border-radius: 0; } .page--banner.overlay-content .page--banner-content { position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 20px 0; overflow: auto; display: flex; justify-content: center; align-items: center; z-index: 1; } .page--banner.overlay-content .page--banner-content>div { margin-top: auto; margin-bottom: auto; } .page--title+.page--desc { margin-top: 20px; } .page--content { padding: 20px 0; } .page--banner-content .page--title { color: var(--image_overlay_heading); } .page--banner-content .page--desc, .page--banner-content .page--desc * { color: var(--image_overlay_text); } /* page banner css end */ /* common media css start */ .placeholder-svg { display: block; fill: var(--text_color); width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .media-wrapper { position: relative; overflow: hidden; } .media { position: relative; width: 100%; overflow: hidden; padding-bottom: var(--image_ratio); background: var(--image_bg); } .media-fixed { padding-bottom: 0; height: 100%; } .media img, .media .placeholder-svg, .media video, .media iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center; } .media-overlay:after { content: ''; background: rgba(var(--image_overlay_background), var(--image_overlay_opacity)); width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; } .animate-hover img { transition: 0.6s ease; } deferred-media, deferred-media-video { display: block; width: 100%; height: 100%; } /* common media css end */ /* section common css start */ .section-wrapper { width: 100%; background: var(--body_background); color: var(--text_color); } .section-gradient { background: var(--body_background_gradient); } .section-spacing { padding-top: var(--top_spacing); padding-bottom: var(--bottom_spacing); } .section--header { padding-bottom: 20px; display: block; position: relative; } .section--header.with--arrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; } .section--header.with-button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; } .section--header.with--arrow.with-button { grid-template-columns: 1fr auto auto; } .section--header.with-button .section--btn { padding-bottom: 0; text-align: center; } .section--btn { padding-bottom: 20px; } .section--description { padding-top: 6px; } .highlight-color { color: var(--highlight_color); --image_overlay_heading: var(--highlight_color); } .highlight-gradient { background-image: var(--highlight_gradient, linear-gradient(to right, #ff0000, #0000ff)); background-clip: text; -webkit-background-clip: text; color: transparent; --image_overlay_heading: transparent; } .outline--text, .outline--filled { position: relative; display: inline-block; text-decoration: none; -webkit-text-stroke: 1px var(--highlight_color); background: linear-gradient(var(--highlight_color) 0 100%) left / 0 no-repeat; color: transparent !important; background-clip: text; transition: 0.8s ease; } .outline-animate { background-size: 100%; } .text-background-cover { background-repeat: no-repeat; color: var(--highlight_color); background-image: linear-gradient(45deg, var(--highlight_background), transparent); transition: background-size 0.7s cubic-bezier(0.7, 0, 0.3, 1); background-size: 0 100%; --image_overlay_heading: var(--highlight_color); } .section-in-view .text-background-cover { background-size: 100% 100%; } .background--overlay-image, .background--overlay-image img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; object-position: center; height: 100%; width: 100%; pointer-events: none; } .background--overlay-image:after { content: ''; background: rgba(var(--image_overlay_background), var(--image_overlay_opacity)); width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } .image-overlay-heading, .image-overlay-heading * { color: var(--image_overlay_heading); } .image-overlay-description { color: var(--image_overlay_text); } .block-gradient { background: var(--body_background_gradient); } /* section common css end */ /* button css start */ .product-checkout-buttons .shopify-payment-button__button--branded { height: auto; } .button, button.shopify-payment-button__button, button.shopify-payment-button__button--hidden, .shopify-challenge__button { text-decoration: none; text-align: center; position: relative; display: inline-flex; justify-content: center; align-items: center; font-size: 16px; min-width: 120px; min-height: 46px; padding: 12px 25px 12px 25px; line-height: 1; cursor: pointer; border-radius: var(--button_radius); background: var(--button_background); border: 1px solid var(--button_border); color: var(--button_text); font-family: var(--button_font_family); font-weight: var(--button_font_weight); font-style: var(--button_font_style); text-transform: var(--button_text_transform); overflow: hidden; transition: 0.2s ease-out; z-index: 0; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 46px; --shopify-accelerated-checkout-button-border-radius: var(--button_radius); --shopify-accelerated-checkout-button-box-shadow: none; } .button.animated { padding-left: 43px; justify-content: flex-start; } .btn-icon { width: 18px; height: 18px; background: transparent; border: 1px solid var(--button_text); color: var(--button_text); border-radius: 40px; display: flex; align-items: center; justify-content: center; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); transition: all 0.25s ease-out; opacity: 0; visibility: hidden; } .button.animated .btn-icon { opacity: 1; visibility: visible; } .btn-icon svg { width: 8px; height: auto; display: block; transition: all 0.25s ease-out; position: absolute; } .button--hover-text { position: absolute; left: 15px; overflow: hidden; color: var(--button_text_hover); opacity: 0; display: flex; top: 50%; transform: translateY(-50%); } .button.secondary--button, button.shopify-payment-button__button, button.shopify-payment-button__button--hidden { background: var(--secondary_button_background); border: 1px solid var(--secondary_button_border); color: var(--secondary_button_text); } .button.secondary--button .btn-icon { border: 1px solid var(--secondary_button_text); color: var(--secondary_button_text); } .button.secondary--button .button--hover-text { color: var(--secondary_button_text_hover); } .button.small-button .button--hover-text { left: 12px; } .button.large-button .button--hover-text, .button.medium-button .button--hover-text { left: 20px; } .button--hover-text span { transform: translateY(18px); display: inline-flex; } .outline-button { background: transparent; border-color: var(--button_border); color: var(--button_border); } .shopify-challenge__button { height: 46px; } .shopify-cleanslate button, .shopify-cleanslate div[role='button'] { min-height: 64px !important; height: auto !important; border-radius: var(--button_radius) !important; } .cart__dynamic-checkout-buttons .shopify-cleanslate li, .cart__dynamic-checkout-buttons .shopify-cleanslate li { flex-basis: 100% !important; height: auto !important; } .shopify-cleanslate button span, .shopify-cleanslate div[role='button'] span { color: inherit !important; } button.shopify-payment-button__button--hidden { display: none !important; } .button.button-block { width: 100%; min-width: auto !important; justify-content: center; } .button.small-button { min-width: 80px; min-height: 34px; font-size: 10px; padding: 10px 15px; } .button.animated.small-button { padding-left: 36px; } .button.animated.large-button { padding-left: 65px; } .small-button .btn-icon { left: 10px; } .small-button .btn-icon:before { left: calc(100% - 28px); } .button.medium-button, button.shopify-payment-button__button { min-height: 56px; font-size: 16px; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 62px; } .button.medium-button.animated { padding-left: 55px; padding-right: 34px; } .button.medium-button .btn-icon { width: 24px; height: 24px; left: 20px; } .button.large-button { /* min-width: 240px; */ min-height: 66px; font-size: 18px; } .button.large-button .btn-icon { width: 30px; height: 30px; left: 20px; } .button-group { display: grid; grid-template-columns: 1fr; gap: 15px; } .btn-loader, .loading>span:first-child { display: none; } .loading .btn-loader { display: inline; } .btn-loader svg { width: 100%; height: 100%; } .arrow--btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 44px; height: 44px; background: var(--button_background); color: var(--button_text); border: 1px solid var(--button_border); border-radius: 50%; overflow: hidden; } .arrow--btn.outline--btn { background: transparent; border-color: var(--button_text); } .arrow--btn .arrow--icon { transition: 0.3s ease; width: 14px; height: auto; } .arrow--btn.large-width { width: 65px; height: 65px; } .arrow--btn.large-width .arrow--icon { width: 24px; } .arrow--btn.medium-width { width: 60px; height: 60px; } .arrow--btn.medium-width .arrow--icon { width: 16px; } .arrow--btn.small-width { width: 34px; height: 34px; } .arrow--btn.small-width .arrow--icon { width: 12px; } .arrow--circle { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .link-arrow { display: flex; align-items: center; gap: 10px; } .link-arrow svg { width: 16px; height: auto; display: block; transition: 0.5s ease; } .link-button { background: transparent; border: none; text-decoration: underline; min-height: auto; } .medium-button.link-button, .large-button.link-button, .small-button.link-button { min-height: auto; padding: 0; } /* button css end */ /* swiper button css */ .swiper-button:after { display: none; } .swiper-button { background: var(--slider_icon_background); width: var(--slider_arrow_width); height: var(--slider_arrow_width); color: var(--slider_icon_color); border-radius: var(--slider_navigation_radius); margin: 0; z-index: 1; border: 1px solid var(--slider_arrow_border); } .swiper-button-prev { transform: rotate(180deg); } .swiper-button svg { width: var(--slider_icon_width); height: 14px; margin: 0 auto; display: flex; position: absolute; top: auto; left: 7px; transform: translateX(0); } .swiper-button svg .draw-arrow, .swiper-button svg .tail { stroke-width: 1; fill: none; stroke-dasharray: 22; stroke-dashoffset: 0; transform: matrix(1, 0, 0, 1, 0, 0); transition: 1s all ease; } .swiper--button-wrapper .swiper-button { bottom: 22px; top: auto; } .swiper--button-wrapper .swiper-button-prev { left: 15px; } .swiper--button-wrapper .swiper-button-next { left: calc(15px + var(--slider_arrow_width) + 10px); } .swiper--button-wrapper.right-position .swiper-button-next { left: unset; right: 15px; } .swiper--button-wrapper.right-position .swiper-button-prev { left: unset; right: calc(15px + var(--slider_arrow_width) + 10px); } .swiper--button-wrapper.right-position.no-gap .swiper-button-next { left: unset !important; right: 22px !important; } .swiper--button-wrapper.right-position.no-gap .swiper-button-prev { left: unset !important; right: calc(22px + var(--slider_arrow_width) + 10px) !important; } .swiper--custom-buttons { position: relative; gap: 12px; } .swiper--custom-buttons .swiper-button { position: relative; top: auto; right: 0; left: 0; } .swiper-pagination.swiper-pagination-bullets { display: flex; align-items: center; justify-content: center; top: unset; bottom: 20px; z-index: 1; width: auto; left: 50%; transform: translateX(-50%); } .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet { background: transparent; opacity: 1; transition: 0.5s ease; border: 2px solid transparent; vertical-align: middle; margin: 0 2px; padding: 10px; position: relative; } .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet:after { content: ''; background: #fff; width: 10px; height: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50px; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 12px; height: 12px; background: transparent; border: 2px solid var(--slider_arrow_border); } .swiper-button.button-circle { border-radius: 50px; } .swiper-button.button-circle svg { left: 50%; width: auto; transform: translateX(-50%); } .swiper--custom-buttons:has(.swiper-button.button-rounded+.swiper-button.button-rounded):not(:has(.swiper-button-disabled+.swiper-button-disabled)) { background: var(--slider_arrow_border); gap: 4px; border-radius: 20px; overflow: hidden; padding: 4px; width: max-content; } .swiper-button.button-rounded { border-radius: 20px; height: calc(var(--slider_arrow_width) / 1.7); border: 4px solid var(--slider_arrow_border); } .swiper--custom-buttons .swiper-button.button-rounded { border-radius: 2px 20px 20px 2px; border: 0; } .swiper-button.button-rounded svg { left: unset; --slider_icon_width: var(--swiper-navigation-size); } /* swiper button css end */ /* quantity button css start */ .quantity--inner { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--text_color); border-radius: var(--form_radius); } .form-input-small .quantity--inner { height: 42px; } .form-input-small .quantity-button { min-width: 40px; max-width: 40px; } .quantity-button { background: transparent; min-width: 50px; max-width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; } .quantity-input { padding: 4px; max-width: 40px; min-height: 100%; text-align: center; border: 0; color: var(--text_color); font-size: var(--text); background: transparent; border-radius: 0; } .quantity-input:focus-visible { outline: 0; } .quantity-button svg { width: 10px; height: auto; } .small-quantity .quantity--inner { height: 46px; } .small-quantity .quantity-button { min-width: 40px; max-width: 40px; } .xsmall-quantity .quantity--inner { height: 38px; } .xsmall-quantity .quantity-input { padding: 0; max-width: 30px; } .xsmall-quantity .quantity-button { min-width: 28px; max-width: 28px; } /* quantity button css end */ /* custom checkbox/radio css start */ .custom-checkbox, .radio-box { position: relative; padding-left: 30px; } .checkmark-input { border: 0; padding: 0; min-height: auto; position: absolute; opacity: 1; left: 0; top: 1px; margin: 0; appearance: none; -webkit-appearance: none; background: 0; width: 20px; height: 20px; cursor: pointer; border: 1px solid var(--text_color); border-radius: 2px; } .checkmark { position: absolute; left: 0; top: 1px; height: 20px; width: 20px; transform: scale(0); transform-origin: center center; transition: transform 0.2s ease-in 25ms; pointer-events: none; } .radio-box .checkmark { border-radius: 100%; } .checkmark-input:checked~.checkmark { background-color: var(--text_color); transform: scale(0.7); } .checkmark-input:checked~.checkmark:after { display: block; } .radio-box .checkmark-input:checked~.checkmark { background: var(--text_color); } .radio-box .checkmark-input { border-radius: 100%; } .custom-checkbox label { margin-bottom: 0; } /* custom checkbox/radio css end */ /* pagination css start */ .pagination { display: flex; justify-content: center; align-items: center; padding: 40px 0; padding-bottom: 20px !important; } .pagination-item { padding: 5px; } .pagination-link, .pagination-text { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--body_background); border: 1px solid var(--border_color); color: var(--text_color); font-size: 14px; transition: 0.2s ease; border-radius: 50px; } .pagination-item.active .pagination-text { background: var(--text_color); color: var(--body_background); border-color: var(--text_color); } .pagination-icon { font-size: 12px; color: var(--text_color); } .pagination-item.disabled .pagination-icon { opacity: 0.8; } /* pagination css end */ /* Product Filter CSS */ .collection-products--count { font-size: var(--h6); font-weight: normal; } .collection-products--text { font-size: var(--medium_text); font-weight: normal; } /* Product Filter CSS */ /* custom select / localization form */ .select-box { position: relative; } .select-box:after { border-bottom-style: solid; border-bottom-width: 2px; border-right-style: solid; border-right-width: 2px; content: ''; display: inline-block; height: 8px; right: 20px; position: absolute; top: calc(50% - 4px); width: 8px; border-color: var(--form_border); filter: none; transform: rotate(45deg); border-radius: 2px; } .custom-select { display: inline-flex; position: relative; padding: 10px 0; } .custom-select.fullwidth { display: block; padding: 0; } .custom-select-content { display: none; position: absolute; top: calc(100% + 4px); right: 0; max-width: 250px; width: max-content; background: var(--form_background); box-shadow: 0 4px 6px #00000014; max-height: 350px; height: max-content; border-radius: 6px; text-align: start; transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); overflow: auto; z-index: 3; } .custom-select.fullwidth .custom-select-content { width: 100%; max-width: 100%; } .custom-select-content.right-position { left: unset; right: 0; } .custom-select-content.top-position { bottom: 100%; top: unset; } .custom-select-item button { background-color: transparent; display: flex; justify-content: flex-start; align-items: center; width: 100%; font-size: 14px; color: var(--form_text); text-align: left; padding: 10px; border-radius: 8px; transition: background-color 0.3s ease; } .custom-select-list { padding: 10px 0; } .custom-select-item { position: relative; padding: 3px 20px; } .custom-select-item label { width: 100%; height: 100%; cursor: pointer; } .custom-select-button { display: inline-flex; align-items: center; line-height: 1; user-select: none; cursor: pointer; } .custom-select.fullwidth .custom-select-button { display: flex; justify-content: space-between; } .custom-select-text { display: flex; align-items: center; } .custom-select-arrow { line-height: 0; margin-left: 8px; display: flex; color: inherit; width: 12px; } .custom-select-arrow svg { width: 100%; height: auto; } .custom-select-top .custom-select-list { top: auto; bottom: 100%; } .custom-select-active .custom-select-list { opacity: 1; visibility: visible; } .localization--current-locale { display: flex; align-items: center; gap: 8px; } .localization--current-locale svg { width: 14px; height: auto; display: block; } .localization-form-wrapper { padding: 10px 20px; padding-bottom: 60px !important; max-width: 100%; margin: 0 auto; } .localization-form-box+.localization-form-box { margin-top: 20px; } .localization--heading-box { padding-bottom: 20px; } .localization-form-heading { padding-bottom: 6px; } .localization-form-popup .popup-content, .localization-form-popup .popup-content-body { overflow: visible; } .localization-form-popup .popup-dialog { overflow: auto; } /* custom select / localization form end */ /* variants css start */ option.disabled { color: #0000003b; } .product--variants-title { padding-bottom: 10px; } .product--variants-title [data-selected-variant] { opacity: 0.7; } .product--variants-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .variant--item { display: flex; align-items: center; position: relative; height: 48px; min-width: 60px; } .product--variants-list.options-style-pills .variant--item { height: 30px; } .product--variants-list.color-option .variant--item { width: 32px; height: 33px; min-width: 32px; border-radius: 4px; border: 1px solid transparent; } .product--variants-list.color-circle .variant--item, .product--variants-list.color-circle .variant-item-name { border-radius: 100%; } .product--variants-list input { position: absolute; cursor: pointer; z-index: 1; width: 100%; height: 100%; left: 0; padding: 0; border: 0; appearance: none; -webkit-appearance: none; min-height: auto; margin: 0; background: transparent; } .variant-item-name { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; border: 1px solid var(--text_color); color: var(--text_color); background: var(--product_card_background); transition: 0.2s ease-out; margin: 0; border-radius: 4px; padding: 4px 16px; font-size: var(--small_text); } .product--variants-list.options-style-pills .variant-item-name { border-radius: 20px; } .product--variants-list.color-option .variant-item-name { border: 0; padding: 0; background-color: var(--swatch_color); box-shadow: 0px 1px 0px 0px #a8a3a336; } .product--variants-list.variants-image .variant-item-name { background-size: cover; background-repeat: no-repeat; background-position: center; /* background-color: var(--image_bg); */ } .variant--item .disabled+.variant-item-name { opacity: 0.8; pointer-events: none; } .variant--item .disabled+.variant-item-name:before { content: ''; text-decoration: line-through; position: absolute; width: 100%; height: 100%; background: var(--text_color); top: 0; left: 0; z-index: 1; clip-path: polygon(3% 0, 100% 100%, 99% 100%, 2% 0); } .product--variants-list input:checked+.variant-item-name { background-color: var(--text_color); color: var(--product_card_background); } .product--variants-list.color-option .variant--item.active, .product--variants-list.color-option .variant--item:hover, .product--variants-list.color-option .variant--item:has(.productOption:checked) { border-color: var(--text_color); padding: 4px; } .product--variants-list.color-option .variant--item:has(.productOption:checked) .variant-item-name { background-color: var(--swatch_color); } .product--variants-list.color-option.color-square .variant--item.active, .product--variants-list.color-option.color-square .variant--item:hover { padding: 2px; } .product-size-variant-list { position: absolute; bottom: 0; padding: 4px 8px; width: 100%; transition: opacity .35s, transform .35s, -webkit-transform .35s; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: rgba(var(--image_overlay_background), 10%); -webkit-backdrop-filter: blur(100px); backdrop-filter: blur(100px); opacity: 0; } .product-size-variant-list .product-variant-item { color: var(--image_overlay_text); font-size: var(--small_text); } /* variants css end */ /* product card css start */ .product--card.swiper-slide { padding: 0 5px; } .product--card-inner.product-background-enabled { background: var(--product_card_background); border-radius: var(--product_card_radius); overflow: hidden; } .product--card-inner.product-border-enabled { border: 1px solid var(--product_card_border); border-radius: var(--product_card_radius); overflow: hidden; } .product--card-image { overflow: hidden; border-radius: var(--product_card_radius); background-color: var(--image_bg); transition: 0.3s; } .product--card-inner.product-background-enabled .product--card-image, .product--card-inner.product-border-enabled .product--card-image { border-radius: 0; } .product--card-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: absolute; top: 15px; left: 15px; } .product--badge { text-transform: uppercase; padding: 6px 8px; line-height: 1; border-radius: 4px; font-size: var(--small_text); } .horizontal--product-card .product--badge { padding: 3px 7px; line-height: 1.3; font-size: 10px !important; } .product--badge.sale { color: var(--sale_badge_text_color); background: var(--sale_badge_bg); } .product--badge.custom { color: var(--custom_badge_text_color); background: var(--custom_badge_bg); } .product--badge.preorder { color: var(--preorder_badge_text_color); background: var(--preorder_badge_bg); } .product--badge.sold-out { color: var(--soldout_badge_text_color); background: var(--soldout_badge_bg); } .product--badge.discount { color: var(--discount_price_text); background: var(--discount_price_background); } .product-quickview-button { position: absolute; top: 15px; right: 15px; transition: 0.3s ease-in-out; } .product--icon { width: 32px; height: 32px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background: var(--heading_color); color: var(--product_card_background); } .product--icon .quick--view-icon { width: 16px; height: auto; } .product--icon span { display: flex; align-items: center; justify-content: center; } .product--icon span .cart--icon { width: 15px; } .product--card-detail { overflow: hidden; position: relative; padding: 10px 0; } .product-background-enabled .product--card-detail, .product-border-enabled .product--card-detail { padding: 10px 15px; } .product--card-detail-inner { display: grid; grid-template-columns: 1fr; align-items: center; position: relative; z-index: 1; } .product--card-detail-content { display: grid; gap: 4px; } .product--title { display: block; } .product--pricing { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; } .product--pricing.vertical-view { flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 4px; } .product--pricing span { display: inline-block; vertical-align: middle; font-family: var(--body_font_family); } .product--cut-price { opacity: 0.8; } .product-discount-item span, .total-discount-item span:last-child { display: inline-block; background: var(--discount_price_background); color: var(--discount_price_text); padding: 4px 8px; font-size: 11px; line-height: 1.2; border-radius: 4px; } .product--card-detail-button { display: none; } .product--card .product-checkout-buttons { padding-bottom: 0; grid-template-columns: 1fr; } .product--variant-picker-list { position: absolute; bottom: 0; left: 7px; right: 7px; background: #fffffff2; /* backdrop-filter: blur(10px); */ transition: 0.3s ease-in-out; transform: translateY(110%); padding: 25px 25px 5px; border-radius: var(--product_card_radius); max-height: 83%; overflow: auto; } .product--variant-picker-list .product--options { padding-bottom: 15px; } .product--variant-picker-list .variant--item { height: 35px; min-width: 45px; } .product--variant-picker-list .product--variants-list.color-option .variant--item { width: 26px; min-width: 26px; height: 26px; } .product--card-detail-button.product-addtocart-btn { position: absolute; right: 20px; bottom: 30px; } .product--variant-picker-list .product--variants-title { color: #000000; } /* product card css end */ /* horizontal product css start */ .horizontal--product-card { background: var(--body_alternate_background); border-radius: var(--product_card_radius); padding: 8px; padding-right: 20px; display: grid; grid-template-columns: auto 1fr; gap: 25px; align-items: center; border: 1px solid transparent; } .horizontal--product-card+.horizontal--product-card { margin-top: 15px; } .horizontal--product-card.swiper-slide { margin-top: 0 !important; } .horizontal--product-image { display: block; border-radius: calc(var(--product_card_radius) / 1.5); width: 90px; } .horizontal--product-card .product--pricing { margin-top: 3px; } .product--view-detail { padding-top: 5px; } /* horizontal product css end */ /* card style css start */ .card--image { border-radius: var(--card_radius); } .card--title { padding-top: 10px; } /* card style css end */ /* product detail css start */ .product--variants-wrapper, .product--description, .product--active-users, .size-chart, .product--pickup-availability[available], .quantity-main-product, .product-checkout-buttons, .product--social-share, .custom-icons-box, .product-inventory, .product-payment-icons, .product--options, .product--custom-content, .product--custom-liquid, .product-query-form, .product--recommendations, .shopify-app-block, .recipient-form--wrapper .custom-checkbox, .product-block-divider { padding-bottom: 24px; } .price-wrapper+.product-block-divider { padding-top: 14px; } .product-title-heading { padding-bottom: 5px; } .price-wrapper { padding-bottom: 10px; } .product--custom-content-heading, .size-chart-heading { padding-bottom: 10px; } .product--installment-form shopify-payment-terms { padding-bottom: 10px; display: block; } .product-block-divider span { display: block; height: 1px; background: var(--border_color); } /* form.installment { padding-bottom: 20px; } */ .size-chart-block { display: inline-flex; align-items: center; gap: 8px; } .social--share-with-help { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 30px; } .product-checkout-buttons { display: grid; grid-template-columns: 1fr; align-items: flex-start; gap: 10px; } .product-checkout-buttons.dynamic-button-enable { grid-template-columns: 1fr 1fr; } .product-grid--right .product-checkout-buttons.dynamic-button-enable .button { min-height: 55px !important; } .product--submit-btn-loader { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .sticky--add-to-cart-wrapper .sticky--product-buttons .product-checkout-buttons-outer { width: 100%; } .product--submit-btn-loader svg { width: 30px; height: 20px; transform: scale(1.5); } .recipient-checkbox { margin-top: 2px; } /* custom icon css start */ .custom-icons-list { row-gap: 12px; background: var(--card_background); padding: 20px; border-radius: 10px; width: 100%; } .custom-icons-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-right: 40px; } .custom-icons-icon { width: 20px; height: 20px; } .custom-icons-icon svg { width: 100%; height: auto; } .custom-icons-icon img { width: 100%; height: 100%; object-fit: contain; } /* custom icon css end */ /* product inventory css start */ .product-inventory-text { display: inline-block; /* border: 1px solid transparent; */ line-height: initial; padding: 0 8px 1px 16px; border-radius: 30px; position: relative; } .product-inventory-text.in-stock, .product-inventory-text.in-stock+.progress-bar { border-color: var(--color_success_text); color: var(--color_success_text); } .product-inventory-text.sold-out, .product-inventory-text.sold-out+.progress-bar { border-color: var(--color_error_text); color: var(--color_error_text); } .product-inventory-text.low-stock, .product-inventory-text.low-stock+.progress-bar { border-color: var(--color_warning_text); color: var(--color_warning_text); } .product-inventory-text.in-stock:after { background-color: var(--color_success_text); } .product-inventory-text.sold-out:after { background-color: var(--color_error_text); } .product-inventory-text.low-stock:after { background-color: var(--color_warning_text); } .product-inventory-text:after { content: ''; background: transparent; width: 6px; height: 6px; position: absolute; left: 4px; border-radius: 50%; top: 52%; transform: translateY(-50%); } .product-inventory-text+.progress-bar { margin-top: 10px; } /* product inventory css end */ /* pickup availability css start */ .pickup--availability-content { position: relative; display: flex; align-items: flex-end; justify-content: space-between; background: var(--card_background); padding: 15px 20px; border-radius: 6px; } .pickup--availability-inner p { padding-left: 26px; } .pickup--availability-inner .pickup--availability-heading { padding-bottom: 5px; } .pickup-icon { position: absolute; left: 20px; top: 18px; width: 16px; height: 16px; background: var(--text_color); color: var(--body_alternate_background); border-radius: 50px; display: flex; align-items: center; justify-content: center; } .pickup-icon svg { width: 8px; } .pickup-availability-button { display: block; background: transparent; padding-top: 10px; text-align: right; } /* pickup availability css end */ /* complimentory product css start */ .product--recommendation-wrapper.swiper-wrapper { padding: 0; } .product--recommendation-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-bottom: 12px; } .swiper-pagination.swiper-pagination-product--recommendations { position: static; transform: unset; } .product--recommendation-outer { z-index: 0; } /* complimentory product css end */ /* product accordion css start */ .product-accordion--icon { width: 24px; height: 24px; transition: 0.3s ease; } .product-accordion--item[open] .product-accordion--icon { transform: rotate(45deg); } .product-accordion--heading { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 20px 20px 20px 0; } .product-accordion--heading-text { padding-right: 15px; } .product-accordion--content * { /* font-size: var(--medium_text); */ margin-bottom: 10px; } .product-accordion--content { padding-bottom: 30px; } /* product accordion css end */ /* product image css start */ .product--wrapper.layout_2 .main--product-image-wrapper.thumbnail-enable { display: flex; flex-wrap: wrap; align-items: flex-start; } .product--wrapper.layout_2 .main--product-media, .main--product-thumbnails { flex: 0 0 100%; max-width: 100%; } .product--wrapper.layout_2 media-gallery { position: sticky; /* top: var(--dynamic_header_height); */ top: calc(var(--dynamic_header_height, 10px) + var(--header_top_spacing, 0px) + var(--header_bottom_spacing, 0px));; transition: 0.4s ease; } .main--product-thumbnails { overflow: hidden; display: none; } .main--product-thumbnail-list { display: flex; flex-direction: column; height: var(--thumb_height, 800px); } .main--product-thumbnail-item { overflow: hidden; flex: 0 0 33.333%; padding-bottom: 10px; } .product--wrapper.layout_2 .border-square .main--product-thumbnail-item { padding-bottom: 2px; } .main--product-thumbnail-img { height: 100%; overflow: hidden; opacity: 0.5; } .product--wrapper.layout_2 .border-rounded .main--product-thumbnail-img { border-radius: 8px; } .main--product-thumbnail-item.swiper-slide-thumb-active .main--product-thumbnail-img { opacity: 1; } /* product image css end */ /*product detail css end */ /* blog css start */ .blog--image { display: block; border-radius: var(--card_radius); } .blog--content { padding-top: 20px; } .blog--info { padding-bottom: 15px; display: flex; flex-wrap: wrap; width: 100%; gap: 10px; } .blog--data.comment { display: flex; align-items: center; } .blog--data.comment svg { flex: 0 0 14px; margin-right: 5px; } .blog--desc { padding-top: 15px; } .blog--content .blog--tags { margin-top: 15px; } .blog--tags-link { display: inline-block; background: var(--body_alternate_background); color: var(--text_color); padding: 2px 10px; border-radius: 20px; } .blog--button { padding-top: 15px; } /* blog css end */ /* popup css start */ .popup { position: fixed; top: 0; left: 0; z-index: 99; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; opacity: 0; transition: opacity 0.15s; } .popup.show { opacity: 1; } .popup-dialog { position: relative; width: 100%; max-width: 900px; padding: 20px; pointer-events: none; display: flex; flex-direction: column; justify-content: center; height: 100%; transition: 0.4s ease-out; transform: translateY(100px); opacity: 0; transition-delay: 0.2s; } .popup.show .popup-dialog { -webkit-transform: none; transform: none; opacity: 1; } .popup-dialog.small, .popup-dialog.medium, .popup-dialog.large { max-width: 95%; } .popup-dialog.fullwidth { max-width: 100%; padding: 0; } .position-top-left .popup-dialog, .position-top-center .popup-dialog, .position-top-right .popup-dialog { justify-content: flex-start; } .position-bottom-left .popup-dialog, .position-bottom-center .popup-dialog, .position-bottom-right .popup-dialog { justify-content: flex-end; } .position-top-right .popup-dialog, .position-center-right .popup-dialog, .position-bottom-right .popup-dialog { margin-left: auto; } .position-top-center .popup-dialog, .position-center .popup-dialog, .position-bottom-center .popup-dialog { margin-left: auto; margin-right: auto; } .popup-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: var(--body_background); color: var(--text_color); overflow: hidden; padding: 6px; border-radius: var(--card_radius); } .popup-content-body { overflow: auto; } .popup-close { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; z-index: 2; color: var(--text_color); background: transparent; margin-left: auto; border: 1px solid var(--text_color); border-radius: 100%; position: relative; } .popup-close svg { width: 12px; height: 12px; z-index: 1; } .product-media-popup .popup-close { width: 44px; height: 44px; } .product-media-popup .popup-close svg { width: 16px; height: 16px; } /* .popup-close:hover svg line { animation: cross_animate .5s ease-in-out forwards; } .popup-close:hover svg path { animation: cross_animate 0.5s ease-in-out forwards; animation-delay: 0.1s; } */ /* popup css end */ /* side drawer css start */ .side-drawer { position: fixed; bottom: 0; left: 0; z-index: 3; width: 100%; height: 100%; overflow: hidden; outline: 999; justify-content: flex-end; pointer-events: none; display: none; } .side-drawer.show { pointer-events: all; } .close-fullwidth { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(var(--page_overlay_background), var(--page_overlay_opacity)); transition: 0.8s cubic-bezier(0.7, 0, 0.2, 1); } .side-drawer.show .close-fullwidth { opacity: 1; visibility: visible; pointer-events: all; } .side--drawer-panel { width: 100%; max-height: 100%; padding: 20px; max-width: 767px; transition: 0.5s ease; transform: translateX(100%); } .side-drawer.show .side--drawer-panel { transform: unset; } .side--drawer-inner { height: 100%; background: var(--body_background); color: var(--text_color); overflow: hidden; position: relative; border-radius: var(--card_radius); display: grid; grid-template-rows: auto 1fr; height: 100%; } .side--drawer-header { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 25px 25px; } .side--drawer-body { padding: 0 25px 15px; height: 100%; overflow-y: auto; } close-drawer { margin-left: auto; } .drawer-close { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--text_color); color: var(--text_color); border-radius: 100%; position: relative; transition: 0.5s ease; } .drawer-close svg { width: 12px; height: auto; position: relative; } .drawer-close:before, .popup-close:before { content: ''; position: absolute; width: 100%; height: 100%; background-color: var(--text_color); transition: all 0.3s ease-in-out; border-radius: 80px; transform: scale(0); z-index: 0; } /* side drawer css end */ /* store locator drawer css start */ .store--locator-location-list-item { padding: 15px; border-radius: var(--card_radius); overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; background: var(--body_alternate_background); gap: 25px; border: 1px solid transparent; transition: all 0.4s linear; } .store--locator-location-list-item:hover { border-color: var(--border_color); } .store--locator-store-image { border-radius: var(--card_radius); max-width: 170px; min-width: 170px; } .store--locator-location-list-item+.store--locator-location-list-item { margin-top: 20px; } .store--locator-store-title { padding-bottom: 10px; } .store--locator-store-address * { margin-top: 0; } /* store locator drawer css end */ /* pickup availability drawer css start */ .pickup--availability-info { padding-bottom: 30px; } .pickup--availability-variant { padding-top: 5px; } .pickup--availability-list-item { padding: 25px; background: var(--body_alternate_background); border-radius: var(--card_radius); border: 1px solid transparent; transition: all 0.4s linear; } .pickup--availability-list-item+.pickup--availability-list-item { margin-top: 18px; } .pickup--availability-title { padding-bottom: 12px; } .pickup--availability-address .strore--phone { padding-top: 10px; display: block; } .pickup--availability-preview { padding-bottom: 10px; display: flex; align-items: center; gap: 6px; } .pickup--availability-preview.pickup--available { color: var(--color_success_text); } .pickup--availability-preview.pickup--unavailable { color: var(--color_error_text); } .pickup--availability-preview svg { width: 16px; height: auto; } /* pickup availability drawer css end */ /* quick view drawer css start */ .quickview--side-drawer .side--drawer-body { padding: 0; } .quickview--side-drawer .drawer-close { position: absolute; top: 30px; right: 30px; z-index: 2; } .quickview--drawer-main { height: 100%; display: flex; flex-direction: column; } .quickview--drawer-content { padding: 20px; padding-bottom: 10px; } /* newsletter popup css start */ .newsletter-popup--content.image-position-left, .newsletter-popup--content.image-position-right { align-items: center; flex-wrap: wrap; } .newsletter-popup .popup-close { position: absolute; right: 5px; top: 5px; } .newsletter-popup:has(.mewsletter-popup--image) .popup-close { right: 15px; top: 15px; } .mewsletter-popup--image { border-radius: var(--card_radius); flex: 0 0 100%; } .newsletter-popup--text { padding: 20px; flex-grow: 1; } .newsletter-popup--heading { padding-bottom: 10px; } .newsletter-popup--desc { padding-bottom: 25px; } /* newsletter popup css end */ /* size chart popup css start */ .size-chart-popup .size-chart-content { padding: 30px; padding-top: 0; } /* size chart popup css end */ /* scroll to top start */ .scroll-to-top { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 100%; position: fixed; bottom: var(--scroll-top-vertical-position, 20px); cursor: pointer; color: var(--scroll-top-color, #000); background: transparent; opacity: 0; z-index: 2; visibility: hidden; pointer-events: none; transform: translateX(40%); transition: 0.3s ease; } .scroll-to-top.position-right { right: 20px; } .scroll-to-top.position-center { left: 0; right: 0; margin: 0 auto; } .scroll-to-top.position-left { left: 20px; } .scroll-to-top.show { opacity: 1; visibility: visible; pointer-events: all; transform: none; } .scroll-to-top-inner { width: 89%; height: 89%; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: var(--scroll-top-background, #fff); border: 1px solid var(--scroll-top-border, #eee); z-index: 1; color: var(--scroll-top-color); } .scroll-to-top-inner svg { animation: icon_bounce 1s ease infinite alternate; } /* scroll to top end */ button.store--details, button.localization-form { background: transparent; } .product--wrapper.layout_2 .main--product-img .shopify-model-viewer-ui__controls-overlay .shopify-model-viewer-ui__controls-area { right: auto; left: 10px; } .product--wrapper .main--product-img .shopify-model-viewer-ui__controls-overlay .shopify-model-viewer-ui__controls-area { opacity: 1; } #MainContent>section:last-child .section-wrapper { box-shadow: 0 20px var(--body_background); } .product--card-inner.product-background-none .product--card-detail { padding: 6px 4px 16px; } /* .pin-spacer .pinned-content { overflow: hidden; } */ @media (min-width: 415px) { .popup-dialog.small, .popup-dialog.medium, .popup-dialog.large { max-width: 500px; } } @media (min-width: 576px) { .popup-dialog.medium { max-width: 440px; } .popup-dialog.large { max-width: 540px; } } @media (min-width: 768px) { #MainContent>section:last-child .section-wrapper { box-shadow: 0 50px var(--body_background); } .popup-dialog.medium { max-width: 540px; } .popup-dialog.large { max-width: 740px; } .newsletter-popup--content.image-position-left, .newsletter-popup--content.image-position-right { flex-wrap: nowrap; } .newsletter-popup--content.image-position-left .mewsletter-popup--image, .newsletter-popup--content.image-position-right .mewsletter-popup--image { flex: 0 0 50%; } .page--content { padding: 40px 0; } .button-group { grid-template-columns: 1fr 1fr; } .newsletter-popup--text { padding: 30px; } .localization-form-wrapper { padding: 20px 30px; max-width: 90%; } .side--drawer-panel { padding: 20px; max-width: 600px; } .side--drawer-body { padding: 0 45px 30px; } .side--drawer-header { padding-left: 45px; } .pagination-link, .pagination-text { width: 44px; height: 44px; font-size: 16px; } /* product card css start */ .product--card.swiper-slide { padding: 0 calc(var(--product_card_column_gap) / 2); } .product--icon { width: 42px; height: 42px; } .product--icon .quick--view-icon { width: 22px; } .product-background-enabled .product--card-detail, .product-border-enabled .product--card-detail { padding: 12px 20px; } .product--card-detail { padding: 16px 0; } /* product card css end */ /* product detail css start */ .product--wrapper.layout_2 .border-rounded .main--product-img { border-radius: 8px; } .product-info-details { padding-left: 35px; } .product--wrapper.layout_2 .product-info-details { padding-top: 45px; } .product--wrapper.layout_2 .main--product-image-wrapper.thumbnail-enable .main--product-media { flex: 0 0 70%; max-width: 70%; } .main--product-thumbnails { max-width: 30%; flex: 0 0 30%; padding-left: 10px; display: block; } .product--wrapper.layout_2 .border-square .main--product-thumbnails { padding-left: 2px; } .product-info-details .product-accordion--heading { padding: 15px 15px 15px 0; } .product-accordion--heading-text { font-size: var(--h5); } .product-info-details .product-accordion--heading-text { font-size: var(--xlarge_text); } .product-info-details .product-accordion--icon { width: 19px; height: 19px; transition: 0.3s ease; } /* product detail css end */ .blog-items-column .blog--button { padding-top: 0; } .quickview--drawer-content { padding: 30px 40px; padding-bottom: 10px; } .product--wrapper.layout_3.product-grid-3 .main--product-item { flex: 0 0 33%; } .product--wrapper.layout_3.product-grid-2 .main--product-item { flex: 0 0 50%; } .product--wrapper.layout_1.product-grid-3 .main--product-item { flex: 0 0 33%; } .product--wrapper.layout_1.product-grid-2 .main--product-item { flex: 0 0 50%; } .section--header.with-button .section--btn { max-width: 200px; margin-left: auto; } .shopify-section:has(.section-wrapper[class*="d-border-radius-"]) { position: relative; } .section-wrapper.d-border-radius-bottom:before, .section-wrapper.d-border-radius-top:before, .section-wrapper.d-border-radius-all:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-bottom-left-radius: var(--corner_radius, 40px); border-bottom-right-radius: var(--corner_radius, 40px); background: var(--body_background); } .section-wrapper.d-border-radius-top:before { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: var(--corner_radius, 40px); border-top-right-radius: var(--corner_radius, 40px); } .section-wrapper.d-border-radius-all:before { border-bottom-left-radius: var(--corner_radius, 40px); border-bottom-right-radius: var(--corner_radius, 40px); border-top-left-radius: var(--corner_radius, 40px); border-top-right-radius: var(--corner_radius, 40px); } .section-wrapper.d-border-radius-bottom { background: var(--edge_background); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .section-wrapper.d-border-radius-top { background: var(--edge_background); border-top-left-radius: 0; border-top-right-radius: 0; } .section-wrapper.d-border-radius-all { background: var(--edge_background); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .section-gradient.section-wrapper.d-border-radius-bottom:before, .section-gradient.section-wrapper.d-border-radius-top:before, .section-gradient.section-wrapper.d-border-radius-all:before { background: var(--body_background_gradient); } } @media (min-width: 992px) { .section--header { padding-bottom: 30px; } .input-form--fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; } .popup-dialog.medium { max-width: 640px; } .popup-dialog.large { max-width: 840px; } } @media (min-width: 1025px) { .king_cursor { display: block; position: fixed; cursor: none; transform-origin: center; z-index: 1; left: -75px; top: -75px; width: 150px; height: 150px; } .swiper--button-wrapper .swiper-button-prev { left: 2rem; } .swiper--button-wrapper .swiper-button-next { left: calc(2rem + var(--slider_arrow_width) + 10px); } .swiper--button-wrapper.right-position .swiper-button-next { left: unset; right: 2rem; } .swiper--button-wrapper.right-position .swiper-button-prev { left: unset; right: calc(2rem + var(--slider_arrow_width) + 10px); } .animate-hover:hover img { transform: scale(1.1); } .pagination-item:hover .pagination-link { background: var(--text_color); color: var(--body_background); border-color: var(--text_color); } .button:hover, .shopify-challenge__button:hover { border-color: var(--button_border_hover); background: var(--button_background_hover); color: var(--button_text_hover); } .button.secondary--button:hover, button.shopify-payment-button__button:hover:not([disabled]), button.shopify-payment-button__button--hidden:hover:not([disabled]) { background: var(--secondary_button_background_hover); border: 1px solid var(--secondary_button_border_hover); color: var(--secondary_button_text_hover); } .button.animated:hover .btn-icon { width: 100%; height: 100%; left: 0; color: var(--button_text_hover); border: 0; } .button.animated.secondary--button:hover .btn-icon { color: var(---secondary_button_text_hover); } .button.secondary--button .btn-icon:before { border-color: var(--secondary_button_text_hover); } .button.animated:hover .button--text { opacity: 0; } .button.secondary--button:hover .btn-icon { width: 100%; height: 100%; left: 0; transition: all 0.25s ease-out; } .button:hover .btn-icon svg { left: calc(100% - 28px); } .small-button.button:hover .btn-icon svg { left: calc(100% - 23px); } .medium-button.button:hover .btn-icon svg { left: calc(100% - 31px); } .large-button.button:hover .btn-icon svg { left: calc(100% - 40px); } .button:hover .button--hover-text span { transform: translateY(0); transition: transform 0.25s ease-out; } .button:hover .button--hover-text { opacity: 1; } .button.button-block:hover .button--hover-text { left: 50%; transform: translate(-50%, -50%); } .btn-icon:before { content: ''; width: 18px; height: 18px; background: transparent; border: 1px solid var(--button_text_hover); position: absolute; left: calc(100% - 33px); border-radius: 50px; opacity: 0; visibility: hidden; transition: all 0.25s ease-out; } .button.medium-button .btn-icon:before { width: 24px; height: 24px; left: calc(100% - 39px); } .button.large-button .btn-icon:before { width: 30px; height: 30px; left: calc(100% - 50px); } .button:hover .btn-icon:before { opacity: 1; visibility: visible; } .arrow--btn:hover .arrow--icon { transform: rotate(-45deg); } .swiper-button:hover { background: var(--slider_icon_color); color: var(--slider_icon_background); border-color: var(--slider_icon_color); } .swiper-button:hover svg .draw-arrow { stroke-dashoffset: 10px; transform: matrix(2.7, 0, 0, 1, 0, 0); transition: 1s stroke-dashoffset ease, 0.7s 0.3s transform ease; fill: none; stroke-dasharray: 22; stroke-width: 1; } .swiper-button:hover svg .tail { transform: translateX(30px); transition: 0.72s 0.3s all ease; } .blog--item.horizontal-view { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; } .blog--item:hover .blog--title { text-decoration: underline; } .blog--content { padding-top: 30px; } .blog--item.horizontal-view .blog--content { padding: 0; } .blog--desc { font-size: var(--medium_text); } .link-arrow:hover svg { transform: translateX(5px); } .drawer-close:hover:before, .popup-close:hover:before { transform: scale(1); } .drawer-close:hover { color: var(--body_background); border-color: var(--body_background); } .popup-close:hover { color: var(--body_background); } .horizontal--product-card:hover, .pickup--availability-list-item:hover { border-color: var(--border_color); } /* product card css start */ .product--card-detail-inner { grid-template-columns: 1fr auto; column-gap: 30px; } .product-second-img { display: block; transform: scale(1.02); opacity: 0; background: var(--image_bg); backface-visibility: hidden; pointer-events: none; transition: 0.6s ease; } .product--card-inner.image-hover:hover .product-second-img { transform: scale(1); opacity: 1; visibility: visible; transition-property: transform, opacity; pointer-events: all; } .product-quickview-button { top: 20px; right: 20px; } .product--card-detail-button { display: block; transition: 0.4s ease; } .quickview-on-hover .product-quickview-button { transform: translateX(200%); } .product--card-detail-button { transform: translateX(200%); } .product--card-detail-button.product-addtocart-btn { transform: translate(0) scale(0); } .product--card:hover .product-quickview-button, .product--card:hover .product--card-detail-button, .product--card:hover .product--variant-picker-list { transform: unset !important; } /* product card css end */ .product--variants-list.color-option .variant--item:hover .tooltip, .tooltip-parent:hover .tooltip { opacity: 1; transform: translateX(-50%) scale(1); transform-origin: center; } .product-loop-variants .custom-select-item:hover { background: var(--body_alternate_background); } .custom-select-item:hover button { background-color: var(--body_alternate_background); } /* product detail css start */ .main--product-content-wrapper { position: absolute; top: calc(var(--desktop_transparent_header_height, 0px) + 3rem); right: 2rem; z-index: 1; width: 100%; max-width: 40vw; max-height: calc(100vh - calc(var(--header_height, 0px) + 8rem)); /* overflow: hidden; */ height: 100vh; display: flex; justify-content: flex-end; } .main--product-content-wrapper.content--height-section { max-height: calc(100% - calc(var(--header_height, 0px) + 8rem)); height: 100%; } .main--product-content { display: flex; flex-direction: column; width: 100%; /* box-shadow: 0 0 3px #0000000d, 0 12px 24px #0000001a; */ } .main--product-content-inner { background: var(--body_alternate_background); border-radius: var(--card_radius); padding: 30px 30px 10px; overflow: auto; box-shadow: #0000001a 0 0px 12px, #0000000f 0 0px 12px; } .product--detail-bottom-content { padding-top: 3rem; width: 100%; max-width: 65%; } .product--detail-bottom-content.product-content-fullwidth { max-width: 100%; } .product--card-image:hover .product-size-variant-list { opacity: 1; pointer-events: all; } /* product detail css end */ } @media (min-width: 1200px) { .swiper--button-wrapper .swiper-button-next { left: calc(4rem + var(--slider_arrow_width) + 10px); } .swiper--button-wrapper .swiper-button-prev { left: 4rem; } .swiper--button-wrapper.right-position .swiper-button-next { left: unset; right: 4rem; } .swiper--button-wrapper.right-position .swiper-button-prev { left: unset; right: calc(4rem + var(--slider_arrow_width) + 10px); } .store--locator-drawer-header { padding: 34px 30px 20px; } .blog--info { padding-bottom: 20px; } .blog--desc { padding-top: 20px; } .popup-dialog.large { max-width: 940px; } .newsletter-popup--text { padding: 40px 50px; } .localization-form-wrapper { padding-bottom: 80px !important; } .side--drawer-panel { padding: 30px; max-width: 660px; } .main--product-content-wrapper { right: 4rem; } .product--detail-bottom-content { padding-top: 4rem; max-width: 55%; } .product--detail-bottom-content.product-content-fullwidth { max-width: 100%; } } @media (min-width: 1441px) { .main--product-content-wrapper { top: calc(var(--desktop_transparent_header_height, 0px) + 5rem); } .swiper--button-wrapper .swiper-button-next { left: calc(7rem + var(--slider_arrow_width) + 10px); } .swiper--button-wrapper .swiper-button-prev { left: 7rem; } .swiper--button-wrapper.right-position .swiper-button-next { left: unset; right: 7rem; } .swiper--button-wrapper.right-position .swiper-button-prev { left: unset; right: calc(7rem + var(--slider_arrow_width) + 10px); } .pagination { padding: 50px 0; } .main--product-content-inner { padding: 25px; padding-bottom: 8px; } .blog--item.horizontal-view { grid-template-columns: 1.5fr 1fr; gap: 40px; } .product-background-enabled .product--card-detail, .product-border-enabled .product--card-detail { padding: 16px 20px; } /* product detail css start */ .product-info-details { padding-left: 45px; } .main--product-content-wrapper { right: 7rem; max-width: 36vw; } .main--product-content-inner { padding: 40px; padding-bottom: 15px; } .product--detail-bottom-content { padding-top: 6rem; } /* product detail css end */ } @media (min-width: 1600px) { .main--product-content-wrapper { max-width: 32vw; } } @media (max-width: 1024px) { .tooltip { display: none; } .arrow--btn.medium-width { width: 50px; height: 50px; } .payment-icons-item svg { width: 28px; } .main--product-content-inner { padding: 30px 20px 0; } } @media (max-width: 767px) { .section--header.with--arrow { gap: 5px; } .section--header.with-button, .section--header.with--arrow.with-button { grid-template-columns: 1fr; } .swiper-wrapper { padding-bottom: 20px; } .store--locator-store-image { flex: 0 0 80px; margin-right: 16px; } .pickup--availability-content { flex-wrap: wrap; } .btn-loader { width: 22px; height: 22px; } .product--submit-btn-loader svg { width: 24px; } .button, .shopify-challenge__button { font-size: 12px; min-height: 40px; } .shopify-cleanslate button, .shopify-cleanslate div[role='button'] { min-height: 64px !important; } .btn-icon { width: 16px; height: 16px; left: 10px; } .button.animated { padding-left: 35px; } .button.medium-button, button.shopify-payment-button__button { min-height: 52px; font-size: 14px; } shopify-accelerated-checkout, shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: 52px; } .button.medium-button.animated { padding-left: 50px; padding-right: 25px; } .button.medium-button .btn-icon { left: 16px; } .button.large-button { min-height: 56px; font-size: 16px; min-width: auto; } .arrow--btn { width: 36px; height: 36px; } .small-quantity .quantity--inner { height: 36px; } .small-quantity .quantity-button { min-width: 28px; max-width: 28px; } .xsmall-quantity .quantity--inner { height: 34px; } .xsmall-quantity .quantity-button { min-width: 26px; max-width: 26px; } .side-drawer { max-height: 85%; } .side--drawer-panel { padding: 0; transform: translate(0, 100%); } .side--drawer-inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .drawer-close { width: 30px; height: 30px; } .popup-close svg { width: 16px; height: 16px; } .quickview--side-drawer .drawer-close { top: 15px; right: 15px; } /* product card css start */ .product--card-badges { gap: 5px; top: 10px; left: 10px; } .product--badge { padding: 4px 9px; } .horizontal--product-card+.horizontal--product-card { margin-top: 10px; } /* product card css end */ /* product detail css start */ .product--variants-wrapper, .product--description, .product--active-users, .size-chart, .product--pickup-availability[available], .quantity-main-product, .product-checkout-buttons, .product--social-share, .custom-icons-box, .product-inventory, .product-payment-icons, .product--options, .product--custom-content, .product--custom-liquid, .product-query-form, .product--recommendations, .shopify-app-block, .product-block-divider { padding-bottom: 20px; } .price-wrapper+.product-block-divider { padding-top: 10px; } .product-info-details, .main--product-content-inner { padding: 30px 15px 0; } .product-title-heading { padding-bottom: 10px; } .price-wrapper { padding-bottom: 10px; } /* product detail css end */ .arrow--btn.medium-width { width: 40px; height: 40px; } .arrow--btn.medium-width .arrow--icon { width: 14px; } .swiper--button-wrapper { display: none; } .product-second-img { display: none; } .container-fullwidth.m-pr-0 .section--header { padding-right: 15px; } .container-fluid.m-pr-0 .section--header { padding-right: 15px; } .shopify-section:has(.section-wrapper[class*="m-border-radius-"]) { position: relative; } .section-wrapper.m-border-radius-bottom:before, .section-wrapper.m-border-radius-top:before, .section-wrapper.m-border-radius-all:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-bottom-left-radius: var(--corner_radius, 40px); border-bottom-right-radius: var(--corner_radius, 40px); background: var(--body_background); } .section-wrapper.m-border-radius-top:before { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: var(--corner_radius, 40px); border-top-right-radius: var(--corner_radius, 40px); } .section-wrapper.m-border-radius-all:before { border-bottom-left-radius: var(--corner_radius, 40px); border-bottom-right-radius: var(--corner_radius, 40px); border-top-left-radius: var(--corner_radius, 40px); border-top-right-radius: var(--corner_radius, 40px); } .section-wrapper.m-border-radius-bottom { background: var(--edge_background); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .section-wrapper.m-border-radius-top { background: var(--edge_background); border-top-left-radius: 0; border-top-right-radius: 0; } .section-wrapper.m-border-radius-all { background: var(--edge_background); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .section-gradient.section-wrapper.m-border-radius-bottom:before, .section-gradient.section-wrapper.m-border-radius-top:before, .section-gradient.section-wrapper.m-border-radius-all:before { background: var(--body_background_gradient); } .product-accordion--content { padding-bottom: 20px; } } @media (max-width: 575px) { .arrow--btn { width: 24px; height: 24px; } .arrow--btn .arrow--icon { width: 8px; } .button, .shopify-challenge__button { min-width: 98px; } } @media (max-width: 360px) { .button, .shopify-challenge__button { font-size: 12px; min-height: 38px; padding: 7px 10px; } .shopify-cleanslate button, .shopify-cleanslate div[role='button'] { min-height: 38px !important; } } .product-highlights--actions .quick--view-icon { width: 18px; margin-left: 5px; } /* simar css start 3d model */ .product__xr-button { background: rgba(var(--color-foreground), 0.08); color: rgb(var(--color-foreground)); margin: 1rem auto; box-shadow: none; display: flex; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: max-content; } .button.product__xr-button:hover { box-shadow: none; } .product__xr-button[data-shopify-xr-hidden] { visibility: hidden; } .shopify-design-mode .product__xr-button[data-shopify-xr-hidden] { display: none; } @media screen and (max-width: 749px) { slider-component .product__xr-button { display: none; } .active .product__xr-button:not([data-shopify-xr-hidden]) { display: block; } } @media (max-width: 575px) { .pickup-availability-button { padding-left: 26px; } } @media screen and (min-width: 750px) { slider-component+.button.product__xr-button { display: none; } .product__xr-button[data-shopify-xr-hidden] { display: none; } } .product__xr-button .icon { width: 1.4rem; margin-right: 1rem; } .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area { background: rgb(var(--color-background)); border-color: rgba(var(--color-foreground), 0.04); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button { color: rgba(var(--color-foreground), 0.75); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover { color: rgba(var(--color-foreground), 0.55); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus { color: rgba(var(--color-foreground), 0.55); background: rgba(var(--color-foreground), 0.04); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after { border-color: rgba(var(--color-foreground), 0.04); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster { border-radius: 50%; color: rgb(var(--color-foreground)); background: rgb(var(--color-background)); border-color: rgba(var(--color-foreground), 0.1); transform: translate(-50%, -50%) scale(1); transition: transform var(--duration-short) ease, color var(--duration-short) ease; } .shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon { width: 4.8rem; height: 4.8rem; margin-top: 0.3rem; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus { transform: translate(-50%, -50%) scale(1.1); } product-model { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } product-model .shopify-model-viewer-ui { width: 100%; height: 100%; } product-model model-viewer { width: 100%; height: 100%; } button.close-product-model { position: absolute; top: 0; right: 0; z-index: 1; width: 60px; height: 60px; } /* simar css end 3d model */ /* simar css start product zoom */ .product-media-popup .main--product-media-item { position: relative; width: 100%; height: calc(100vh - 90px); margin: 0 auto; } .product-media-popup .popup-content { height: 100vh; border-radius: 0; } .product-media-popup .main--product-media-item img, .product-media-popup .main--product-media-item video, .product-media-popup .main--product-media-item iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; /* transform: translate(-50%,-50%); */ object-fit: contain; cursor: zoom-in; } .product-media-popup .swiper--button-wrapper .swiper-button { top: 50%; transform: translateY(-50%); } .product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-prev { transform: translateY(-50%) rotate(180deg); left: 1rem; } .product-media-popup .swiper--button-wrapper .swiper-button.swiper-button-next { right: 1rem; left: unset; } media-zoom-button { position: absolute; width: 100%; height: 100%; top: 0; left: 0; cursor: zoom-in; z-index: 1; } /* Your footer rounding is coming from the page wrapper, not the footer */ .pinned-content, .body-main, #king-body-main, #king-body { border-radius: 0 !important; clip-path: none !important; -webkit-clip-path: none !important; mask: none !important; -webkit-mask: none !important; overflow: visible !important; } /* If the theme draws rounded corners using pseudo elements */ .pinned-content::before, .pinned-content::after, .body-main::before, .body-main::after { border-radius: 0 !important; clip-path: none !important; -webkit-clip-path: none !important; mask: none !important; -webkit-mask: none !important; } /* simar css end product zoom */ /* account.css */ .account--card-box { margin: 0 auto; position: relative; display: flex; justify-content: center; box-shadow: 0 4px 34px #0000001f; border-radius: var(--card_radius); overflow: hidden; flex-direction: column-reverse; max-width: 80%; width: 100%; } .account--left-content { background: var(--card_background); padding: 30px 25px; } .account--right-content { padding: 50px 40px; flex: 0 0 100%; max-width: 100%; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .account--right-content:after { content: ""; background: var(--body_alternate_background); position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; opacity: 0.5; } .account--right-content .icon--quote { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; opacity: 0.2; margin-left: -20px; } .account--right-content .icon--quote.right-quote { margin-left: auto; margin-right: -10px; } .account--text-info { padding-top: 20px; } div#recover, #recover:target+#login { display: none; } /* Account inner pages css start here */ .account-page .section--header.with--arrow { grid-template-columns: 1fr; gap: 20px; } .main-account--content { padding-top: 10px; } .order--history { background: var(--body_alternate_background); border-radius: var(--card_radius); padding: 6px; padding-bottom: 0!important; } .order--history tr th, .order--history tr td { text-align: center; } .order--history thead tr th:first-child, .order--history tbody tr td:first-child { text-align: left; } .order--history thead tr th:last-child, .order--history tbody tr td:last-child { text-align: right; } .order--history thead tr th { background: var(--body_background); padding: 20px; font-size: var(--medium_text); } .order--history thead tr th:first-child { border-radius: calc(var(--card_radius) / 1.5) 0 0 calc(var(--card_radius) / 1.5); } .order--history thead tr th:last-child { border-radius: 0 calc(var(--card_radius) / 1.5) calc(var(--card_radius) / 1.5) 0; } .order--history tr td { padding: 25px 20px; } .order--history tbody tr+tr { border-top: 1px dashed var(--border_color); } .account--detail { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .account--detail+.account--detail { margin-top: 30px; padding-top: 30px; border-top: 1px dashed var(--text_color); } .payment--status { background: var(--text_color); color: var(--body_background); padding: 4px 12px; display: inline-block; border-radius: 20px; font-size: 12px; line-height: 1.2; } .order--detail-info { padding-bottom: 20px; } .order--product-item { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: center; width: 300px; white-space: normal; } .order--product-img { width: 70px; border-radius: calc(var(--product_card_radius) / 2); } .order--product-options { margin-top: 5px; } .order--summary-item { display: flex; justify-content: space-between; flex-wrap: wrap; } .order--summary-item+.order--summary-item { margin-top: 10px; } .main-address--header { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .address--list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; align-items: flex-start; } .address--card { background: var(--body_alternate_background); border-radius: var(--card_radius); padding: 6px; box-shadow: 0px 12px 14px 0px #0000000D; } .address--card-item { display: flex; flex-direction: column; } .address--head { padding: 15px 30px; background: var(--body_background); border-radius: calc( var(--card_radius) / 2); } .address--body { padding: 20px 30px; } .address--body address p { margin: 15px 0; display: flex; } .address--body address p span { margin-left: auto; } .address--footer { padding: 20px 30px; border-top: 1px solid var(--border_color); margin-top: auto; } @media (min-width:768px) { .account--right-content { flex: 0 0 45%; padding: 80px 40px; } .account--right-content+.account--left-content { flex: 0 0 55%; } .account--card-box { flex-direction: row-reverse; width: max-content; max-width: 90%; } .logout-text { font-size: var(--large_text); } } @media (min-width:992px) { .account--card-box { max-width: 850px; } .account--left-content { padding: 30px 45px; } } @media (min-width:1200px) { .account--card-box { max-width: 1040px; } .account--left-content { padding: 60px; min-width: 500px; } .account--right-content { padding: 100px 60px; } .account--detail { max-width: 90%; margin-left: auto; } } @media (min-width:1441px) { .account--detail { max-width: 83%; } } @media (max-width:991px) { .account--detail { margin-top: 30px; } } @media (max-width:767px) { .address--list { grid-template-columns: 1fr; } .address--head, .address--body, .address--footer { padding: 15px 20px; } .main-address--header { justify-content: flex-end; flex-wrap: wrap; } } @media (max-width:480px) { .account--card-box { max-width: 95%; } } /* lettertypen.css */ /* * Lettertypen van de eigen site (sinds 15 november 2026, SEO-check). * Tot dan kwamen ze van Google Fonts: twee extra domeinen vóór de eerste * weergave, en het IP-adres van elke bezoeker ging naar Google. * * Instrument Sans (broodtekst): variabel lettertype, 400 t/m 700 in één * bestand, rechtop en cursief. Poppins (koppen en knoppen): 400 t/m 800. * Alleen het latijnse schrift (genoeg voor Nederlands, inclusief é, ë en €). * Bron: Fontsource 5.3.0, licentie SIL Open Font License 1.1. */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700; src: url(instrument-sans-latin-wght-normal.woff2) format("woff2-variations"), url(instrument-sans-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Instrument Sans"; font-style: italic; font-display: swap; font-weight: 400 700; src: url(instrument-sans-latin-wght-italic.woff2) format("woff2-variations"), url(instrument-sans-latin-wght-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url(poppins-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url(poppins-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url(poppins-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 700; src: url(poppins-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 800; src: url(poppins-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* lokale-informatie.css */ /* Lokale informatie per plaats. Leunt op de bestaande themavariabelen (--heading_font_family, --card_radius) zodat het niet als vreemde eend tussen de andere secties staat. */ .lokaal--wrapper { padding: 70px 0; background: #232323; } .lokaal--wrapper .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .lokaal--intro { max-width: 780px; margin-bottom: 48px; } .lokaal--haak { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 20px; color: #ffffff; } .lokaal--tekst { font-size: 16px; line-height: 1.7; color: #b6bbc2; margin: 0; } .lokaal--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; } .lokaal--kaart { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 30px; } .lokaal--kaart-feiten { background: linear-gradient(120deg, rgba(15, 148, 93, 0.12), rgba(15, 148, 93, 0.02) 65%), #1c1c1c; border-color: rgba(15, 148, 93, 0.45); } .lokaal--kaart-feiten .lokaal--kop, .lokaal--kaart-feiten .lokaal--feiten li { color: #ffffff; } .lokaal--kop { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; color: #ffffff; } .lokaal--scholen, .lokaal--feiten { list-style: none; margin: 0; padding: 0; } .lokaal--school { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; } /* Lange lijsten: alles voorbij de vijfde school klapt in. */ .lokaal--school-extra { display: none; } .lokaal--kaart.is-open .lokaal--school-extra { display: flex; } .lokaal--meer { display: inline-block; margin: 6px 0 0; padding: 8px 18px; background: transparent; border: 1px solid rgba(15, 148, 93, 0.5); border-radius: 999px; color: #0f945d; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .lokaal--meer:hover { border-color: #0f945d; color: #12b371; } .lokaal--school-naam { font-weight: 600; font-size: 15px; color: #ffffff; } .lokaal--school-niveaus { font-size: 13px; color: #9aa0a8; } .lokaal--feiten li { position: relative; padding: 0 0 14px 22px; font-size: 15px; line-height: 1.5; color: #d5d8dd; } .lokaal--feiten li:before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #0f945d; } .lokaal--noot, .lokaal--bron { margin: 16px 0 0; font-size: 13px; color: #808791; } .lokaal--kaart-feiten .lokaal--bron { color: #7d848e; } .lokaal--vestiging { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 30px; margin-bottom: 40px; } .lokaal--adres { font-style: normal; font-size: 16px; line-height: 1.7; color: #b6bbc2; margin: 0 0 18px; } .lokaal--tijden { color: #9aa0a8; font-size: 14px; } .lokaal--route { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #0f945d; color: #ffffff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s ease; } .lokaal--route:hover { background: #0c7c4e; } /* Vaste lesplekken zonder eigen pand (Amersfoort, november 2026). */ .lokaal--plekken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 22px; } .lokaal--plek { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 22px; } .lokaal--plek .lokaal--adres strong { color: #ffffff; } /* Met foto: foto links (staand, 150 px breed, de foto is 300 px: scherp op retina), adres en routeknop rechts. Niet groter tonen: dan wordt hij wazig. */ .lokaal--plek-met-foto { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; } .lokaal--plek-foto { margin: 0; } .lokaal--plek-foto img { display: block; width: 150px; height: 210px; object-fit: cover; border-radius: 10px; } .lokaal--plek-foto figcaption { font-size: 11px; color: #7d848e; margin-top: 6px; } @media (max-width: 420px) { .lokaal--plek-met-foto { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } .lokaal--plek-foto img { width: 110px; height: 154px; } .lokaal--plek-met-foto .lokaal--route { white-space: nowrap; padding: 10px 16px; } } .lokaal--lesplekken > .lokaal--tekst { margin: 0; } @media (max-width: 749px) { .lokaal--plekken { grid-template-columns: 1fr; gap: 14px; } } .lokaal--faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 0; } .lokaal--faq-vraag { cursor: pointer; font-weight: 600; font-size: 16px; color: #ffffff; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .lokaal--faq-vraag::-webkit-details-marker { display: none; } .lokaal--faq-vraag:after { content: "+"; font-size: 22px; font-weight: 400; color: #6c727c; flex-shrink: 0; } .lokaal--faq-item[open] .lokaal--faq-vraag:after { content: "\2013"; } .lokaal--faq-antwoord { padding-top: 12px; font-size: 15px; line-height: 1.65; color: #b6bbc2; max-width: 760px; } @media (max-width: 749px) { .lokaal--wrapper { padding: 44px 0; } .lokaal--kaart, .lokaal--vestiging { padding: 24px 20px; } } /* Aanmelden en betalen voor een examentraining. */ .aanmelding--wrapper { padding: 60px 0; background: #f7f8f7; } .aanmelding--wrapper .container { max-width: 720px; margin: 0 auto; padding: 0 20px; } .aanmelding--kaart { background: #ffffff; border: 1px solid #e6e9e6; border-radius: var(--card_radius, 30px); padding: 36px; } .aanmelding--kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; } .aanmelding--titel { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -0.025em; margin: 0; color: #14161a; } .aanmelding--prijs { font-size: 26px; font-weight: 700; color: #14161a; white-space: nowrap; } .aanmelding--vanaf { display: block; font-size: 15px; font-weight: 400; color: #9aa0a8; text-decoration: line-through; } .aanmelding--belofte { font-size: 15px; line-height: 1.65; color: #4a4f57; margin: 0 0 28px; } .aanmelding--rij { margin-bottom: 18px; } .aanmelding--rij-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .aanmelding--label { display: block; font-size: 13px; font-weight: 600; color: #4a4f57; margin-bottom: 6px; } .aanmelding--veld { width: 100%; padding: 13px 16px; font-size: 15px; color: #14161a; background: #ffffff; border: 1px solid #d8dcd8; border-radius: var(--form_radius, 8px); box-sizing: border-box; } .aanmelding--veld:focus { outline: 2px solid #2fbf71; outline-offset: 1px; border-color: #2fbf71; } .aanmelding--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .aanmelding--knop { width: 100%; margin-top: 10px; padding: 16px 28px; background: #2fbf71; color: #ffffff; font-size: 16px; font-weight: 600; border: 0; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .aanmelding--knop:hover { background: #26a660; } .aanmelding--knop[disabled] { background: #9aa0a8; cursor: default; } .aanmelding--klein { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: #6c727c; } @media (max-width: 599px) { .aanmelding--kaart { padding: 24px 20px; } .aanmelding--rij-duo { grid-template-columns: 1fr; } } /* Geplande examentrainingen als boekingskaarten. */ .trainingen--wrapper { padding: clamp(56px, 8vw, 96px) 0; background: #232323; } .trainingen--container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .trainingen--kop { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.035em; color: #ffffff; margin: 0 0 14px; } .trainingen--kop-accent { color: #0f945d; } .trainingen--intro { font-size: 16px; line-height: 1.6; color: #8f959d; margin: 0 0 40px; max-width: 52ch; } /* Op desktop past de hele zin op een regel; niet afbreken. */ @media (min-width: 990px) { .trainingen--intro { max-width: none; white-space: nowrap; } } .trainingen--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .trainingen--kaart { display: flex; flex-direction: column; align-items: flex-start; background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 26px 24px; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; } .trainingen--kaart:hover { border-color: rgba(15, 148, 93, 0.6); transform: translateY(-3px); } .trainingen--badge { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0f945d; border: 1px solid rgba(15, 148, 93, 0.45); border-radius: 999px; padding: 3px 10px; margin-bottom: 14px; } .trainingen--vak { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: #ffffff; margin-bottom: 10px; } .trainingen--detail { font-size: 13px; color: #9aa0a8; margin-bottom: 3px; } .trainingen--garantie { font-size: 13px; font-weight: 600; color: #0f945d; margin-bottom: 3px; } .trainingen--prijs-regel { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; } .trainingen--prijs { font-size: 20px; font-weight: 700; color: #ffffff; } .trainingen--oude-prijs { font-size: 12px; color: #6c727c; text-decoration: line-through; } .trainingen--knop { margin-top: 16px; width: 100%; box-sizing: border-box; background: #0f945d; color: #ffffff; text-align: center; border-radius: 999px; padding: 11px; font-size: 14px; font-weight: 600; transition: background 0.2s ease; } .trainingen--kaart:hover .trainingen--knop { background: #0c7c4e; } /* missie.css */ /* Missiepagina. Alles direct zichtbaar, geen slider, geen scroll-animaties. */ .missie--container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .missie--label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #0f945d; margin: 0 0 20px; font-weight: 600; } .missie--kop { font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(38px, 6.5vw, 82px); line-height: 1.02; letter-spacing: -0.04em; color: #ffffff; margin: 0 0 24px; max-width: 15ch; } .missie--onderkop { font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: #b6bbc2; max-width: 64ch; margin: 0; } .missie--hero { padding: clamp(70px, 11vw, 140px) 0 clamp(50px, 7vw, 90px); background: #232323; border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; } /* Teamfoto als fluistering achter de missiekop; het verloop houdt de tekstkant rustig. */ .missie--hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #232323 0%, rgba(35, 35, 35, 0.55) 55%, rgba(35, 35, 35, 0.2) 100%), url("/assets/media/img/web/Hurkshot_3aeee360-0e69-415e-b000-371dabef7a31-1600.webp") center / cover no-repeat; opacity: 0.34; pointer-events: none; } .missie--hero .missie--container { position: relative; z-index: 1; } .missie--cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; margin-top: clamp(48px, 7vw, 84px); padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .missie--cijfer-getal { display: block; font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(34px, 4.5vw, 52px); line-height: 1; letter-spacing: -0.035em; color: #ffffff; margin-bottom: 10px; } .missie--cijfer-label { display: block; font-size: 14px; line-height: 1.5; color: #8f959d; max-width: 24ch; } .missie--h2 { font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(28px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.035em; color: #ffffff; margin: 0 0 18px; } .missie--intro { font-size: 17px; line-height: 1.6; color: #8f959d; margin: 0 0 48px; max-width: 64ch; } .missie--p { font-size: 15px; line-height: 1.7; color: #b6bbc2; margin: 0 0 18px; max-width: 62ch; } .missie--p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------- verhaal -- */ .missie--verhaal { padding: clamp(56px, 8vw, 100px) 0; background: #1c1c1c; } .missie--verhaal-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .missie--verhaal-beeld { margin: 0; position: relative; border-radius: 26px; overflow: hidden; background: #2a2a2a; } .missie--verhaal-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .missie--verhaal-beeld figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 24px 22px; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent); color: #ffffff; } .missie--verhaal-beeld figcaption strong { display: block; font-size: 15px; margin-bottom: 3px; } .missie--verhaal-beeld figcaption span { font-size: 13px; color: #d3d6da; } /* --------------------------------------------------------------- fases -- */ .missie--fases { padding: clamp(56px, 8vw, 100px) 0; background: #232323; position: relative; overflow: hidden; } .missie--fases::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #232323 0%, rgba(35, 35, 35, 0.72) 45%, rgba(35, 35, 35, 0.55) 100%), url("/assets/media/img/web/PXL_20250326_200107356.RAW-01.COVER-1600.webp") center / cover no-repeat; opacity: 0.3; pointer-events: none; } .missie--fases .missie--container { position: relative; z-index: 1; } .missie--fase-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .missie--fase { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; background: #1c1c1c; } .missie--fase-komt { background: transparent; border-style: dashed; } .missie--fase-nummer { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 42px; line-height: 1; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.16); } .missie--fase-loopt .missie--fase-nummer { color: #0f945d; } .missie--fase-periode { font-size: 13px; color: #8f959d; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .missie--badge { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0f945d; border: 1px solid rgba(15, 148, 93, 0.45); border-radius: 999px; padding: 3px 10px; } .missie--fase-titel { font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 22px; letter-spacing: -0.02em; color: #ffffff; margin: 0 0 10px; } /* ---------------------------------------------------------------- team -- */ .missie--team { padding: clamp(56px, 8vw, 100px) 0; background: #232323; } .missie--team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px 24px; } .missie--lid-beeld { border-radius: 20px; overflow: hidden; background: #2a2a2a; margin-bottom: 16px; } .missie--lid-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .missie--lid-naam { font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 18px; letter-spacing: -0.02em; color: #ffffff; margin: 0 0 3px; } .missie--lid-rol { font-size: 13px; color: #0f945d; margin: 0 0 10px; font-weight: 500; } .missie--werving { margin: 36px 0 0; font-size: 15px; color: #9aa0a8; } .missie--werving a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } .missie--werving a:hover { color: #0f945d; } .missie--lid-tekst { font-size: 14px; line-height: 1.65; color: #9aa0a8; margin: 0; } /* ----------------------------------------------------------------- cta -- */ .missie--cta { padding: clamp(56px, 8vw, 100px) 0; background: #232323; text-align: center; } .missie--cta-kop { font-weight: 700; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.035em; color: #ffffff; margin: 0 0 16px; } .missie--cta .missie--p { margin: 0 auto 32px; text-align: center; } .missie--cta-knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .missie--knop { display: inline-block; padding: 15px 32px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; } .missie--knop:hover { opacity: 0.86; } .missie--knop-primair { background: #0f945d; color: #ffffff; } .missie--knop-secundair { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.24); } /* --------------------------------------------------------------- klein -- */ @media (max-width: 860px) { .missie--verhaal-grid { grid-template-columns: 1fr; } .missie--fase { grid-template-columns: 1fr; gap: 12px; padding: 24px 20px; } .missie--fase-nummer { font-size: 30px; } } @media (max-width: 480px) { .missie--cta-knoppen { flex-wrap: nowrap; } .missie--knop { flex: 1; padding: 15px 12px; white-space: nowrap; } } /* De teamsectie staat nu bovenaan de pagina en mag daarom wat groter opendraaien. */ .missie--h2-groot { font-size: clamp(34px, 5.5vw, 62px); } .missie--team:first-of-type { padding-top: clamp(64px, 9vw, 110px); } /* De nuance bij de gratis-bijlesbelofte: rustiger dan de onderkop, maar wel duidelijk als aparte gedachte gemarkeerd. */ .missie--nuance { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid #0f945d; font-size: 15px; line-height: 1.7; color: #8f959d; max-width: 66ch; } /* static-overrides.css */ /* --------------------------------------------------------------------------- Aanpassingen bovenop het thema. Staat los van theme/ zodat een nieuwe thema-export deze wijzigingen niet overschrijft. Wordt als laatste ingeladen, dus wint van de themastijlen. --------------------------------------------------------------------------- */ /* Menu: geen pijltjes achter de items met een submenu. Het thema zet daar een caret-svg neer die er op desktop rommelig uitziet. De selector mikt op de svg die direct in de menulink staat, niet op de icoontjes rechtsboven (account, telefoon) die wel moeten blijven. */ .header--navigation-list .header--menu-link > svg, .header--menu-item.has-children > header-menu > a > svg, .header--navigation-list a.header--menu-link svg { display: none !important; } /* De ruimte die het pijltje innam mag weg, anders blijft er een gat staan. */ .header--navigation-list .header--menu-link { gap: 0 !important; } /* Sinds "Voor scholen" in het menu staat (oktober 2026) past het menu op smallere laptopschermen net niet meer op één regel: "Contact" viel naar een tweede regel. Tussen de telefoonweergave en 1200px iets minder ruimte tussen de items en een fractie kleinere letters. */ @media (min-width: 1025px) and (max-width: 1199px) { .header--navigation-list .header--menu-link { padding-left: 6px !important; padding-right: 6px !important; margin-left: 4px !important; margin-right: 4px !important; font-size: 15px !important; } } /* De drie dienstenkaarten op de homepage (desktop). Hoeken blijven zoals het thema ze had; alleen de verhouding is aangepast. De sectie rekte zichzelf op tot de volledige schermhoogte, waardoor de kaarten extreem hoge rechthoeken werden. Dit haalt die oprekking eraf en geeft de media een 4:5-verhouding, dus compacter en dichter bij vierkant. `html` voor de id-selector geeft net genoeg gewicht om te winnen van de sectie-eigen stijlen, die ook !important gebruiken. */ @media (min-width: 990px) { html #shopify-section-dienstverlening_pc_studiehub_TYCUEc, html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-section { min-height: 0 !important; height: auto !important; } html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-item { height: auto !important; } html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-pc-image { aspect-ratio: 4 / 5 !important; flex: none !important; } } /* --------------------------------------------------------------- bedankt -- De bedankpagina's kwamen uit het thema als een kale tekstregel. Dit maakt er een volwaardige pagina van die past bij de rest van de site. -------------------------------------------------------------------------- */ .bedankt--wrapper { min-height: 62vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px; background: var(--body_background, #232323); } .bedankt--kaart { max-width: 620px; width: 100%; text-align: center; } .bedankt--vink { width: 68px; height: 68px; margin: 0 auto 28px; border-radius: 50%; background: #0f945d; display: flex; align-items: center; justify-content: center; } .bedankt--vink svg { width: 32px; height: 32px; stroke: #ffffff; stroke-width: 3; fill: none; } .bedankt--titel { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 18px; color: #ffffff; } .bedankt--tekst { font-size: 17px; line-height: 1.7; color: #b6bbc2; margin: 0 auto 32px; max-width: 480px; } .bedankt--referentie { display: inline-block; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; letter-spacing: 0.4px; color: #9aa0a8; margin-bottom: 32px; } .bedankt--knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .bedankt--knop { display: inline-block; padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity 0.2s ease; } .bedankt--knop:hover { opacity: 0.85; } .bedankt--knop-primair { background: #0f945d; color: #ffffff; } .bedankt--knop-secundair { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.22); } .bedankt--klein { margin: 28px 0 0; font-size: 14px; color: #9aa0a8; } .bedankt--klein a { color: #ffffff; font-weight: 600; text-decoration: none; } /* Op mobiel de knoppen naast elkaar houden, zoals in de rest van de huisstijl. */ @media (max-width: 480px) { .bedankt--knoppen { flex-wrap: nowrap; } .bedankt--knop { flex: 1; padding: 15px 12px; font-size: 14px; white-space: nowrap; } } /* ------------------------------------------------------------ ripple-fix -- Het thema voegt bij een klik op de CTA-knoppen een .button-ripple span toe ter grootte van de knop, maar de bijbehorende CSS ontbreekt volledig. Een ongestileerde span van die maat rekt de knop 600ms op: de "knop wordt supergroot"-glitch. Dit is de CSS die erbij had moeten zitten. -------------------------------------------------------------------------- */ a.button:has(.button-ripple), button:has(.button-ripple), .cta-button, .desktop-cta-button { position: relative; overflow: hidden; } .button-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: sh-ripple 0.6s ease-out forwards; pointer-events: none; } @keyframes sh-ripple { to { transform: scale(2.6); opacity: 0; } } /* -------------------------------------------------------------- icon-flash -- De header rendert eerst de originele iconenset (zoeken/account/winkelwagen) en verruilt die pas ná DOMContentLoaded voor de eigen iconenrij. Die fractie van een seconde zie je de verkeerde iconen staan. De originele set dient alleen als donor voor het winkelwagen-element en hoeft dus nooit zichtbaar te zijn; verplaatsen uit een verborgen ouder werkt gewoon. -------------------------------------------------------------------------- */ .header-icons-original { display: none !important; } /* ------------------------------------------------- kaartteksten homepage -- De koppen op de drie dienstenkaarten waren op desktop nauwelijks groter dan de lopende tekst. */ @media (min-width: 990px) { html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay { padding: 28px !important; } html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay h2, html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay h3, html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay [class*="heading"] { font-size: clamp(24px, 1.9vw, 30px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay p, html #shopify-section-dienstverlening_pc_studiehub_TYCUEc .dienstverlening-content-overlay [class*="description"] { font-size: 16px !important; } } /* ------------------------------------------------------------ designbrief -- Wijzigingen uit de designbrief van 3 augustus. -------------------------------------------------------------------------- */ /* Reviews: teamfoto met zware donkere laag, dezelfde behandeling als de contact/FAQ-sectie en over ons. De randen lopen dicht naar het omliggende donkergrijs, zodat de foto zacht uit het donker opkomt. */ .section-google-reviews .google-reviews-modern { background: linear-gradient(180deg, rgba(35, 35, 35, 1) 0%, rgba(35, 35, 35, 0.93) 110px, rgba(35, 35, 35, 0.95) calc(100% - 110px), rgba(35, 35, 35, 1) 100%), url("/assets/media/img/web/Hurkshot_3aeee360-0e69-415e-b000-371dabef7a31-1600.webp") center / cover no-repeat !important; } /* De reviewkaarten zelf volledig ondoorzichtig, donkere kaartstijl. */ .section-google-reviews .review-card { background: #1c1c1c !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; } .section-google-reviews .review-card *, .section-google-reviews .rating-number, .section-google-reviews .rating-subtitle, .section-google-reviews .reviews-header { color: #ffffff !important; } .section-google-reviews .review-card p, .section-google-reviews .review-date, .section-google-reviews .rating-subtitle { color: #b6bbc2 !important; } /* Tekstverzorging en knoppen die nooit mogen afbreken. */ body { text-wrap: pretty; } .button, .missie--knop, .bedankt--knop, .trainingen--knop { white-space: nowrap; flex-shrink: 0; } /* ------------------------------------------------------------- garantie -- */ .garantie--wrapper { padding: clamp(48px, 7vw, 88px) 0; background: #232323; } .garantie--container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .garantie--blok { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: 56px; border: 1px solid rgba(15, 148, 93, 0.45); border-radius: 30px; background: linear-gradient(120deg, rgba(15, 148, 93, 0.10), rgba(15, 148, 93, 0) 60%); } .garantie--kop { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.035em; color: #ffffff; margin: 0 0 16px; } .garantie--kop-accent { color: #0f945d; } .garantie--body { font-size: 16px; line-height: 1.7; color: #b6bbc2; margin: 0; max-width: 46ch; } .garantie--punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .garantie--punten li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: #ffffff; } /* Groene cirkel met het vinkje als SVG erin: altijd exact gecentreerd, zonder handmatig gepixel met losse randjes. */ .garantie--punten li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background-color: #0f945d; background-image: url('data:image/svg+xml;utf8,'); background-size: 18px 18px; background-position: center; background-repeat: no-repeat; } .garantie--punten li::after { content: none; } @media (max-width: 1000px) { .garantie--blok { grid-template-columns: 1fr; padding: 36px 28px; } } /* =========================================================================== Porsche-geïnspireerde verfijning (augustus 2026). Zes losse blokken; een blok verwijderen draait dat ene onderdeel terug. ========================================================================== */ /* -- 1. haarlijn + lucht ----------------------------------------------------- Twee donkere secties na elkaar krijgen een dunne scheidingslijn met extra witruimte. De klasse `sectie-lijn` komt uit de build. */ .sectie-lijn { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: clamp(20px, 3vw, 44px); } /* Bij secties met een fotoachtergrond geen haarlijn en geen extra padding: de randen lopen daar al zacht over in de buursecties, en een scherpe lijn bovenop die overgang vloekt. Gewone donkere secties (zoals op over ons) houden hun lijn gewoon. */ .sectie-lijn.section-contact-form, .sectie-lijn.section-google-reviews, .sectie-lijn.section-bijles-tarieven { border-top: none; padding-top: 0; } /* De teamkaarten van de statistieken hangen over de sectie eronder heen; een haarlijn op die volgende sectie loopt dan dwars door de kaarten. Daar dus geen lijn. */ .section-statistieken + .shopify-section.sectie-lijn { border-top: none; } /* -- videopopup: kruisje netjes binnen de hoek van het venster -------------- */ html .pb-video-modal__close { top: 14px !important; right: 14px !important; width: 40px; height: 40px; padding: 0 !important; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; } /* Tarieven: op desktop de foto op ware breedte, nooit ingezoomd (dat maakte hem korrelig). Valt de sectie hoger uit dan de foto, dan vullen de randen donker aan; de randzwemen hierboven maskeren dat. */ @media (min-width: 990px) { html .section-bijles-tarieven .section-wrapper { background-size: 100% auto !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #232323 !important; } } /* Tarieven: de foto blijft licht, maar de boven- en onderrand smelten met een subtiele donkere zweem in de omliggende secties. */ .section-bijles-tarieven .section-wrapper { position: relative; } .section-bijles-tarieven .section-wrapper::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(35, 35, 35, 0.6) 0, rgba(35, 35, 35, 0) 110px), linear-gradient(0deg, rgba(35, 35, 35, 0.6) 0, rgba(35, 35, 35, 0) 110px); } .section-bijles-tarieven .section-wrapper > * { position: relative; z-index: 1; } /* -- 2. eyebrow-labels ------------------------------------------------------- Klein groen kapitaallabel boven sectiekoppen. */ .sh-eyebrow { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #0f945d; margin: 0 0 14px; } /* Het bestaande teamlabel ("Ons team") in dezelfde stijl. */ .tsp__kicker { color: #0f945d !important; letter-spacing: 0.22em !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; } /* -- 3. pijl-links ----------------------------------------------------------- Secundaire acties als tekstlink met groene pijl in plaats van een tweede knop; de primaire knop ernaast krijgt zo meer gewicht. */ .missie--knop-secundair, .bedankt--knop-secundair { background: transparent; border: none; padding-left: 6px; padding-right: 6px; display: inline-flex; align-items: center; gap: 10px; } .missie--knop-secundair::after, .bedankt--knop-secundair::after { content: ""; width: 19px; height: 13px; flex: none; background: #0f945d; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; transition: transform 0.2s ease; } .missie--knop-secundair:hover, .bedankt--knop-secundair:hover { opacity: 1; } .missie--knop-secundair:hover::after, .bedankt--knop-secundair:hover::after { transform: translateX(5px); } /* -- 4. statistieken --------------------------------------------------------- Grote dunne cijfers met verticale haarlijnen; de krabbel-onderstreping weg. */ .tsp__underline { display: none !important; } .tsp__statValue { font-weight: 700 !important; font-size: clamp(48px, 4.6vw, 68px) !important; letter-spacing: -0.03em !important; } .tsp__statUnit { font-weight: 700 !important; } .tsp__statLabel { font-weight: 400 !important; color: #9aa0a8 !important; } /* -- 5. hover-zoom op kaarten ------------------------------------------------ Beeld zoomt heel licht in bij hover; de kaart zelf blijft stil. */ .dienstverlening-pc-image { overflow: hidden; } .dienstverlening-pc-image img, .dienstverlening-pc-image video, .article--card img, .blog--card img { transition: transform 0.45s ease; } .dienstverlening-pc-item:hover .dienstverlening-pc-image img, .dienstverlening-pc-item:hover .dienstverlening-pc-image video, .article--card:hover img, .blog--card:hover img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .dienstverlening-pc-image img, .dienstverlening-pc-image video, .article--card img, .blog--card img { transition: none; } .dienstverlening-pc-item:hover .dienstverlening-pc-image img, .dienstverlening-pc-item:hover .dienstverlening-pc-image video, .article--card:hover img, .blog--card:hover img { transform: none; } } /* -- 6. swipe-rail op mobiel ------------------------------------------------- Trainingskaarten horizontaal scrollbaar met snap, in plaats van gestapeld. */ @media (max-width: 767px) { .trainingen--grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; margin-left: -20px; margin-right: -20px; padding: 4px 20px 18px; scrollbar-width: none; } .trainingen--grid::-webkit-scrollbar { display: none; } .trainingen--kaart { flex: 0 0 82%; scroll-snap-align: center; } } /* =========================================================================== Feedbackronde live site (15 augustus). ========================================================================== */ /* -- actieblok "Niet over? Geld terug!" -------------------------------------- Zelfde taal als het garantieblok (donker, groene rand, zacht groen verloop), zodat de actie opvalt zonder uit de huisstijl te stappen. De klasse `sectie-actie` komt uit de build (rich-text met "Geld terug!" erin). */ .sectie-actie .section-wrapper { background: #232323 !important; } .sectie-actie .richtext--content { max-width: 880px !important; margin: 0 auto; padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 64px) !important; border: 1px solid rgba(15, 148, 93, 0.45); border-radius: 30px; background: linear-gradient(120deg, rgba(15, 148, 93, 0.10), rgba(15, 148, 93, 0) 60%); } .sectie-actie .richtext--content::before { content: "actie: aanmelden vóór 1 december"; display: block; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #0f945d; margin-bottom: 14px; } .sectie-actie .richtext--heading { font-size: clamp(30px, 4.4vw, 50px) !important; letter-spacing: -0.03em; color: #ffffff !important; margin-bottom: 12px; } .sectie-actie .richtext--description, .sectie-actie .richtext--description p { font-size: 16px; line-height: 1.7; color: #b6bbc2 !important; max-width: 56ch; margin-left: auto; margin-right: auto; } .sectie-actie .richtext--description strong { color: #ffffff; } /* -- trainingskaarten: nog niet boekbaar ------------------------------------ */ .trainingen--kaart-wacht { cursor: default; } .trainingen--kaart-wacht:hover { border-color: rgba(255, 255, 255, 0.1); transform: none; } .trainingen--knop-wacht { background: transparent !important; color: #9aa0a8 !important; border: 1px dashed rgba(255, 255, 255, 0.28); } /* -- sticky CTA-balk (mobiel) ------------------------------------------------ Verschijnt na het eerste scherm; knoppen naast elkaar, veilig boven de iPhone-balk via safe-area-inset. */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(28, 28, 28, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, 0.1); transform: translateY(110%); transition: transform 0.3s ease; } .sticky-cta--zichtbaar { transform: translateY(0); } .sticky-cta--knop { flex: 1; text-align: center; padding: 14px 10px; border-radius: 999px; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .sticky-cta--primair { background: #0f945d; color: #ffffff; } .sticky-cta--secundair { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); } @media (max-width: 767px) { .sticky-cta { display: flex; } } /* -- statistieken op mobiel -------------------------------------------------- Geen metershoge stapel meer: drie dunne cijfers naast elkaar, zoals op desktop, alleen compacter. */ @media (max-width: 767px) { .tsp__stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; align-items: start; } .tsp__stat { padding-left: 0; text-align: left !important; } .tsp__statValue { font-size: clamp(30px, 9vw, 42px) !important; } .tsp__statLabel { font-size: 12px !important; line-height: 1.4 !important; } } /* =========================================================================== Feedbackronde 2 (15 augustus). ========================================================================== */ /* -- teamkop en fasenummers vetter, tarieventitels minder vet -------------- */ .tsp__heading { font-family: var(--heading_font_family, Poppins), sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em; } .missie--fase-nummer { font-weight: 800; } .product--title { font-weight: 600 !important; } /* -- FAQ: lucht onder de laatste antwoordregel ------------------------------ */ .faq-item.is-open .faq-answer { padding-bottom: 32px !important; } /* -- contactformulier: breed genoeg om niet de hoogte in te schieten -------- */ @media (min-width: 990px) { /* De sectie zet zijn eigen breedte met !important; deze selector is specifieker en wint daardoor alsnog. */ html [class*="section-contact_form"] .modern-contact-container, html .modern-contact-container { /* De marge in de breedte zit hierin verwerkt: op een scherm van 1280 is de ouder precies zo breed als het venster, en zonder die aftrek plakt de kaart tegen beide randen. */ max-width: min(1400px, calc(100% - 48px)) !important; margin-left: auto !important; margin-right: auto !important; } /* Losstaand formulier (zonder locaties of FAQ ernaast) nog compacter. Let op de :not() erachter. Staat de FAQ ernaast, dan telt dit niet: die twee kolommen moeten juist de volle 1400px hebben. Zonder die uitzondering bleef de hele blok op 820px staan, werd elke kolom 368px breed, en liep elke vraag over twee regels terwijl er rechts van het blok honderden pixels ongebruikt bleven. */ html [class*="section-contact_form"] .modern-contact-container:has(.contact-grid.one-column):not(:has(.faq-container)), html .modern-contact-container:has(.contact-grid.one-column):not(:has(.faq-container)) { max-width: 820px !important; } } /* Een lege kop laat alleen zijn groene streepje achter, dat dan als los liggend randje boven het formulier staat. Geen titel ingevuld: niets tonen. */ .form-title:empty, .locations-title:empty { display: none !important; } /* Losstaand formulier: de buitenrand weg, anders zit er een kader om een kader. De binnenkaart is het formulier zelf. */ .modern-contact-container:has(.contact-grid.one-column) { border: none !important; box-shadow: none !important; background: transparent !important; padding-top: 0 !important; } /* -- inschrijfformulier ------------------------------------------------------ */ .inschrijf--wrapper { padding: clamp(48px, 7vw, 88px) 20px; background: #232323; } .inschrijf--container { max-width: 720px; margin: 0 auto; } .inschrijf--kop { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 48px); letter-spacing: -0.03em; color: #ffffff; margin: 0 0 12px; } .inschrijf--intro { font-size: 16px; line-height: 1.7; color: #b6bbc2; margin: 0 0 32px; max-width: 52ch; } .inschrijf--formulier { background: #ffffff; border-radius: 18px; padding: clamp(22px, 3.5vw, 36px); display: grid; gap: 16px; } .inschrijf--rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .inschrijf--rij { grid-template-columns: 1fr; } } .inschrijf--veld { display: grid; gap: 6px; } .inschrijf--veld span { font-size: 13px; font-weight: 600; color: #232323; } .inschrijf--veld input, .inschrijf--veld select, .inschrijf--veld textarea { width: 100%; padding: 13px 14px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fafafa; color: #232323; font-size: 15px; font-family: inherit; } .inschrijf--veld input:focus, .inschrijf--veld select:focus, .inschrijf--veld textarea:focus { outline: none; border-color: #0f945d; box-shadow: 0 0 0 3px rgba(15, 148, 93, 0.15); } .inschrijf--knop { background: #0f945d; color: #ffffff; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 16px; font-weight: 600; padding: 16px 24px; border: none; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .inschrijf--knop:hover { background: #0c7c4e; } .inschrijf--klein { margin: 4px 0 0; font-size: 13px; color: #6c727c; text-align: center; } .inschrijf--klein a { color: #0f945d; font-weight: 600; text-decoration: none; } /* -- inschrijfformulier: kopjes en vinkgroepen ------------------------------ */ .inschrijf--kopje { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 15px; font-weight: 700; color: #232323; margin: 14px 0 0; padding-bottom: 6px; border-bottom: 2px solid #0f945d; width: fit-content; } .inschrijf--vinkgroep { border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; margin: 0; } .inschrijf--vinkgroep legend { font-size: 13px; font-weight: 600; color: #232323; padding: 0 6px; } .inschrijf--vinkgroep label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #4a4f57; } .inschrijf--vinkgroep input, .inschrijf--akkoord input { width: 17px; height: 17px; accent-color: #0f945d; } .inschrijf--akkoord { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4a4f57; } .inschrijf--akkoord a { color: #0f945d; font-weight: 600; } .inschrijf--rij-straat { grid-template-columns: 2fr 1fr; } @media (max-width: 640px) { .inschrijf--rij-straat { grid-template-columns: 1fr; } } /* -- beleidspagina's --------------------------------------------------------- */ .beleid--wrapper { background: #fafbfa; padding: clamp(48px, 7vw, 96px) 20px; } .beleid--document { max-width: 720px; margin: 0 auto; background: #ffffff; border: 1px solid #e6e9e6; border-radius: 18px; padding: clamp(28px, 5vw, 56px); } .beleid--titel { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: clamp(30px, 4.5vw, 44px); letter-spacing: -0.03em; color: #232323; margin: 0 0 6px; } .beleid--datum { font-size: 13px; color: #6c727c; margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid #e6e9e6; } .beleid--inhoud { font-size: 15.5px; line-height: 1.75; color: #4a4f57; } .beleid--inhoud h2 { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: 19px !important; letter-spacing: -0.01em; color: #232323 !important; margin: 30px 0 10px; } .beleid--inhoud p { margin: 0 0 14px; color: #4a4f57 !important; font-size: 15.5px !important; line-height: 1.75 !important; } .beleid--inhoud ul { margin: 0 0 14px; padding-left: 20px; } .beleid--inhoud li { margin-bottom: 8px; color: #4a4f57 !important; font-size: 15.5px !important; } .beleid--inhoud a, .beleid--inhoud a:visited, .beleid--inhoud a:active { color: #0f945d !important; font-weight: 600; text-decoration: none; } .beleid--inhoud strong { color: #232323; } /* Visueel verborgen, wel leesbaar voor zoekmachines en schermlezers. */ .sr-alleen { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* -- blogartikelen in de huisstijl ------------------------------------------- De rte-tekststijl van het thema pakt eigen fonts en kleuren; hier wordt hij gelijkgetrokken met de rest van de site. */ .main-article--body h1, .main-article--body h2, .main-article--body h3 { font-family: var(--heading_font_family, Poppins), sans-serif !important; font-weight: 700 !important; letter-spacing: -0.03em !important; color: #ffffff !important; line-height: 1.1 !important; } .main-article--body h1, .main-article--body h2 { font-size: clamp(30px, 4.4vw, 46px) !important; margin: 0 0 22px !important; } .main-article--body h3 { font-size: 22px !important; margin: 28px 0 10px !important; } .main-article--body p { font-family: var(--body_font_family, 'Instrument Sans'), sans-serif !important; font-size: 16px !important; line-height: 1.75 !important; color: #b6bbc2 !important; max-width: 66ch; margin: 0 0 16px !important; } .main-article--body a { color: #0f945d !important; font-weight: 600; text-decoration: none; } .main-article--body a:hover { text-decoration: underline; } /* -- artikelpagina: meta-kolom rechts (alleen desktop) ---------------------- */ @media (min-width: 990px) { .section-main-article .container-sm { max-width: 1120px !important; } .main-article--content { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; } /* Lege kop met social-share-lijst; duwt anders de tekst omlaag. */ .main-article--content > .main-article--content-header { display: none; } .main-article--content > .main-article--body { grid-column: 1; grid-row: 1; } .artikel--meta { grid-column: 2; grid-row: 1; align-self: start; /* optisch gelijk met de bovenkant van de artikelkop (de tekstkolom heeft 56px eigen padding) */ padding-top: 60px; border-left: 1px solid rgba(255, 255, 255, 0.1); padding-left: 28px; display: grid; gap: 20px; } } @media (max-width: 989px) { .artikel--meta { display: none; } } .artikel--meta-label { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #0f945d; margin: 0 0 4px; } .artikel--meta-waarde { font-size: 15px; color: #ffffff; margin: 0; } .artikel--meta-knop { display: inline-block; margin-top: 6px; padding: 12px 22px; border-radius: 999px; background: #0f945d; color: #ffffff; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; } .artikel--meta-knop:hover { background: #0c7c4e; } /* -- artikelpagina: video en tekst dichter op elkaar, play-knop ------------- */ .section-video-solooo, .section-video-solo { --bottom_spacing: 18px !important; } .section-main-article { --top_spacing: 14px !important; } .main-article--body { padding-top: 8px !important; } @media (min-width: 990px) { .artikel--meta { padding-top: 12px !important; } } /* "Bekijk de video" met een play-knop erboven. */ .video-overlay-center .video-heading-below { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; } .video-overlay-center .video-heading-below::before { content: ""; width: 56px; height: 56px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } /* =========================================================================== Feedbackronde 3. ========================================================================== */ /* -- statistieken: nooit mid-woord afbreken, mobiel gecentreerd ------------- */ .tsp__statLabel { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; max-width: none !important; } @media (max-width: 767px) { .tsp__stats { gap: 10px !important; } .tsp__stat { text-align: center !important; } .tsp__statTop { justify-content: center !important; } .tsp__statLabel { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } /* -- koppen overal consequent vet ------------------------------------------- */ .section--heading, .section--heading strong, .section--heading b, .section--heading span { font-family: var(--heading_font_family, Poppins), sans-serif !important; font-weight: 700 !important; } h1.heading-font, h2.heading-font, h3.heading-font, .dienstverlening-overlay__heading, .dienstverlening-content-overlay h2, .dienstverlening-content-overlay h3 { font-weight: 700 !important; } .dienstverlening-button, .dienstverlening-button span { font-family: var(--heading_font_family, Poppins), sans-serif !important; font-weight: 600 !important; } /* -- garantie: vinkjes strak gecentreerd ------------------------------------ */ .garantie--punten li::before { top: 2px; } .garantie--punten li::after { left: 5px; top: 7px; width: 8px; height: 4px; } /* -- trainingskaarten: niets afkappen ---------------------------------------- */ .trainingen--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; } .trainingen--kaart { overflow: visible; } .trainingen--vak { white-space: normal; overflow-wrap: normal; } .trainingen--badge { white-space: nowrap; } /* -- hero dienstpagina's: rustiger rechterkolom ----------------------------- De foto-achtergrond zelf staat in video-pc.liquid (ID-regel, wint van alles); hier alleen de opmaak van de rechterkolom. */ /* Meer lucht tussen de hero en de sectie erna ("onze aanpak") — alleen op desktop; op mobiel werd de afstand juist te groot. */ @media (min-width: 990px) { .section-video-pc .section-spacing { padding-bottom: calc(var(--bottom_spacing, 30px) + 48px) !important; } } /* Mobiel: de agenda (trainingen) dichter op de hero. */ @media (max-width: 989px) { .trainingen--wrapper { padding-top: 28px !important; } } /* Sterren overal in huisstijlgroen; lege sterren blijven gedimd. */ .section-video-pc .gr-stars, .section-google-reviews .stars, .section-google-reviews .review-stars, .section-google-reviews .star-full, .section-google-reviews .star-half { color: #0f945d !important; } .section-video-pc .gr-stars .star-empty, .section-google-reviews .star-empty { color: rgba(255, 255, 255, 0.15) !important; } /* Blogartikelen: het eerste woord van de kop in het groen (build zet de span). */ .artikel-groen { color: #0f945d; } /* Statistieken mobiel: getal en eenheid ("2000" en "+") als één geheel gecentreerd. De cijfers een fractie kleiner zodat "2000+" ruim in zijn kolom past en de drie statistieken netjes op één regel staan. */ @media (max-width: 989px) { .tsp__statUnit { display: inline; white-space: nowrap; } .tsp__statTop { justify-content: center !important; } .tsp__stat { text-align: center !important; } .tsp__statLabel { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 767px) { .tsp__statValue { font-size: clamp(26px, 8vw, 38px) !important; } .tsp__statUnit { font-size: 1.05rem !important; } } /* -- transparante header boven de hero-foto --------------------------------- Alleen op pagina's met de video-pc-hero (de dienst- en locatiepagina's): de header zweeft over de foto, de hero schuift eronder door en krijgt extra ruimte bovenin zodat de inhoud vrij blijft van het menu. Op alle schermformaten. */ body:has(#MainContent .section-video-pc) .shopify-section.section-header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; } body:has(#MainContent .section-video-pc) .shopify-section.section-header .header { background: transparent !important; } body:has(#MainContent .section-video-pc) .section-video-pc .section-spacing { padding-top: calc(var(--top_spacing, 40px) + 72px) !important; } @media (min-width: 990px) { body:has(#MainContent .section-video-pc) .section-video-pc .section-spacing { padding-top: calc(var(--top_spacing, 40px) + 92px) !important; } } /* Beoordelingsblok en mini-kaartjes: geen losse dozen maar rustige regels. */ .section-video-pc .pb-rating-block, .section-video-pc .pb-features-block, .section-video-pc .promotional-bar--reviews-summary { background: transparent !important; border: none !important; box-shadow: none !important; } .section-video-pc .promotional-bar--reviews-summary { border-bottom: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .section-video-pc .trust-item { background: transparent !important; border: none !important; border-left: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important; box-shadow: none !important; padding: 4px 0 4px 16px !important; } .section-video-pc .trust-item:first-child { border-left: none !important; padding-left: 0 !important; } /* De gloed onder de CTA-knop weg; strak groen is genoeg. */ .section-video-pc .cta-button, .section-video-pc .desktop-cta-button { box-shadow: none !important; } /* -- contact/FAQ-sectie: donker met foto i.p.v. hard wit -------------------- De sectie forceert zelf wit met een ID-regel; deze is specifieker. De witte kaarten (locaties, formulier, FAQ-items) blijven licht, alleen het vlak eromheen wordt donker met een subtiele lesfoto. */ html [id^="shopify-section-contact_form"] .section-wrapper, html .section-contact-form .section-wrapper { background: linear-gradient(180deg, rgba(35, 35, 35, 0.93) 0%, rgba(35, 35, 35, 0.97) 100%), url("/assets/media/img/web/PXL_20250326_200107356.RAW-01.COVER-1600.webp") center / cover no-repeat !important; } /* De grote witte omdoos wordt doorzichtig; de kaarten erin blijven wit. */ html [id^="shopify-section-contact_form"] .modern-contact-container { background: transparent !important; border: none !important; box-shadow: none !important; } /* De FAQ-kaart krijgt dezelfde witte kaartstijl als locaties en formulier. */ html [id^="shopify-section-contact_form"] .faq-container { background: #ffffff !important; border: 1px solid #f0f0f0 !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Alle kaarten in deze sectie volledig ondoorzichtig wit. Het thema geeft het formulier een gradient die naar bijna-transparant loopt; op de donkere sectie loopt de kaart dan naar donker. Hier hard dichtzetten. */ html [id^="shopify-section-contact_form"] .contact-form-container, html [id^="shopify-section-contact_form"] .locations-container { background: #ffffff !important; border: 1px solid #f0f0f0 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important; } html [id^="shopify-section-contact_form"] .faq-container { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important; } /* -- missie-cta: rustige afsluiting zonder knoppen -------------------------- */ .missie--cta-regel { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 0; } .missie--cta-link { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 17px; font-weight: 600; text-decoration: none; } .missie--cta-link::after { content: ""; width: 19px; height: 13px; background: #0f945d; -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; mask: url('data:image/svg+xml;utf8,') no-repeat center / contain; transition: transform 0.2s ease; } .missie--cta-link:hover::after { transform: translateX(5px); } .missie--cta-of { color: #9aa0a8; font-size: 14px; } .missie--cta-of a { color: #ffffff; font-weight: 600; text-decoration: none; } /* -- mobiele homepage: kaarten mogen nooit tot 0 hoogte klappen ------------- */ @media (max-width: 989px) { .section-dienstverlening-studiehub .multiboxes--image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; } .section-dienstverlening-studiehub .multiboxes--image .media { position: absolute !important; inset: 0 !important; height: 100% !important; padding: 0 !important; } .section-dienstverlening-studiehub .multiboxes--image video, .section-dienstverlening-studiehub .multiboxes--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* -- minder lucht tussen laatste sectie en footer --------------------------- */ main .shopify-section:last-of-type { --bottom_spacing: 28px; } main .shopify-section:last-of-type .garantie--wrapper, main .shopify-section:last-of-type .trainingen--wrapper, main .shopify-section:last-of-type .inschrijf--wrapper, main .shopify-section:last-of-type .lokaal--wrapper { padding-bottom: 36px; } /* -- header: Shopify-restanten weg ------------------------------------------ Zoek- en winkelwagen-iconen en het account-icoon horen niet bij een statische site; de telefoonlink rechts blijft staan. */ .header--icon-item.search, .header--icon-item.cart, .header--right-link.js-dashboard-redirect { display: none !important; } /* -- teamfoto's in de statistieken ------------------------------------------- Het fotovenster was een lage strook van 240px die met cover vrijwel de hele (vierkante) afbeelding wegsneed: geen gezichten te zien. Vierkant venster toont het ontwerp (bijna) volledig. */ html .trainer-image { height: auto !important; aspect-ratio: 1 / 1; } /* -- mobiel: telefoonicoon rechtsboven even groot als de hamburger ---------- */ @media (max-width: 989px) { .header--right-link .header--right-link-icon, .header--right-link .header--right-link-icon svg { width: 24px !important; height: 24px !important; } } /* -- contactpagina: transparante header boven de donkere contactsectie ------ Zelfde recept als de dienstpagina's. De pagina begint met een lege main-sectie (nul hoogte) en dan de contactsectie met fotoachtergrond; de header zweeft eroverheen en de sectie krijgt bovenin ruimte voor het menu. */ body:has(#MainContent > .shopify-section.section-main-page:first-child + .shopify-section.section-contact-form) .shopify-section.section-header { position: absolute; top: 0; left: 0; right: 0; z-index: 200; } body:has(#MainContent > .shopify-section.section-main-page:first-child + .shopify-section.section-contact-form) .shopify-section.section-header .header { background: transparent !important; } body:has(#MainContent > .shopify-section.section-main-page:first-child + .shopify-section.section-contact-form) .section-contact-form .section-wrapper { padding-top: 96px !important; } @media (min-width: 990px) { body:has(#MainContent > .shopify-section.section-main-page:first-child + .shopify-section.section-contact-form) .section-contact-form .section-wrapper { padding-top: 120px !important; } } /* -- inschrijfformulier: uitleg onder de pakketkeuze ------------------------- */ .inschrijf--pakketuitleg { background: rgba(15, 148, 93, 0.06); border: 1px solid rgba(15, 148, 93, 0.25); border-radius: 10px; padding: 14px 16px; } .inschrijf--pakketuitleg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .inschrijf--pakketuitleg li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: #232323; } .inschrijf--pakketuitleg li::before { content: '\2713'; position: absolute; left: 0; color: #0f945d; font-weight: 700; } /* hidden-attribuut verliest van display:grid; expliciet dichthouden. */ .inschrijf--rij[hidden] { display: none; } /* -- pakketkeuze als aanvinkbare kaartjes ------------------------------------ */ .inschrijf--pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 640px) { .inschrijf--pakketten { grid-template-columns: 1fr; } } .inschrijf--pakket { position: relative; display: grid; gap: 2px; text-align: center; padding: 14px 10px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fafafa; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .inschrijf--pakket input { position: absolute; opacity: 0; pointer-events: none; } .inschrijf--pakket:has(input:checked) { border-color: #0f945d; background: rgba(15, 148, 93, 0.06); box-shadow: 0 0 0 3px rgba(15, 148, 93, 0.15); } .inschrijf--pakket-naam { font-family: var(--heading_font_family, Poppins), sans-serif; font-weight: 700; font-size: 16px; color: #0f945d; } .inschrijf--pakket-prijs { font-size: 13px; color: #555555; } .inschrijf--pakketinfo-knop { justify-self: start; display: inline-flex; align-items: center; gap: 9px; background: none; border: none; padding: 2px 0; font-family: inherit; font-size: 14px; font-weight: 600; color: #0f945d; cursor: pointer; } /* Subtiel pijltje dat omklapt zodra de uitleg open staat. */ .inschrijf--pakketinfo-knop::after { content: ''; width: 7px; height: 7px; border-right: 2px solid #0f945d; border-bottom: 2px solid #0f945d; transform: rotate(45deg); margin-top: -4px; transition: transform 0.25s ease, margin-top 0.25s ease; } .inschrijf--pakketinfo-knop.open::after { transform: rotate(225deg); margin-top: 3px; } .inschrijf--pakketuitleg[hidden] { display: none; } .inschrijf--pakketinfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 640px) { .inschrijf--pakketinfo-grid { grid-template-columns: 1fr; } } .inschrijf--pakketinfo-grid h4 { font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 15px; font-weight: 700; color: #0f945d; margin: 0 0 8px; } /* Uitleg klapt open met een zachte schuifbeweging; dicht neemt hij geen ruimte in (alleen maximale hoogte en padding animeren). */ .inschrijf--pakketuitleg { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease, border-color 0.3s ease; } .inschrijf--pakketuitleg.open { opacity: 1; padding-top: 16px; padding-bottom: 16px; border-color: rgba(15, 148, 93, 0.25); } /* Inschrijfpagina's: teamfoto heel subtiel achter de donkere sectie, met dezelfde randvervaging als de reviews- en contactsecties. */ .inschrijf--wrapper { background: linear-gradient(180deg, rgba(35, 35, 35, 1) 0%, rgba(35, 35, 35, 0.94) 130px, rgba(35, 35, 35, 0.94) calc(100% - 130px), rgba(35, 35, 35, 1) 100%), url("/assets/media/img/web/Hurkshot_3aeee360-0e69-415e-b000-371dabef7a31-1600.webp") center / cover no-repeat; } /* IBAN-velden klappen met dezelfde zachte schuifbeweging open als de pakketuitleg. De negatieve marge vangt in dichte stand de grid-gap op, zodat er geen dubbel gat in het formulier valt. */ .inschrijf--klap { max-height: 0; overflow: hidden; opacity: 0; margin-top: -16px; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease; } .inschrijf--klap.open { opacity: 1; margin-top: 0; } /* =========================================================================== Examentrainingen 2027: afrekenstap als webshop-checkout. ========================================================================== */ .afreken--wrapper { padding: clamp(56px, 7vw, 88px) 0; background: #1c1c1c; color: #ffffff; } .afreken--container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .afreken--kop { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; letter-spacing: -0.03em; color: #ffffff; margin: 0 0 28px; } .afreken--kop span { color: #0f945d; } .afreken--grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; } .afreken--overzicht { background: #232323; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 28px 30px; } .afreken--overzicht-label { font-size: 12px; color: #9aa0a8; margin: 0 0 8px; } .afreken--titel { font-size: 24px; font-weight: 700; color: #ffffff; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .afreken--niveau { font-family: inherit; font-size: 15px; font-weight: 500; color: #9aa0a8; } .afreken--regels { margin: 0; display: grid; gap: 12px; padding: 0 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Alleen de directe regels: anders pakt dit ook blokjes binnen een dd. */ .afreken--regels > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; } .afreken--regels dt { font-size: 13px; color: #9aa0a8; } .afreken--regels dd { margin: 0; font-size: 14px; font-weight: 600; color: #ffffff; line-height: 1.5; } /* Locatie kies je in het besteloverzicht zelf; tekstknoppen, geen pills. Deze regel krijgt de volle kaartbreedte, zodat de plaatsnamen op één regel passen in plaats van in een rommelig blokje van twee bij twee. */ .afreken--regels > div.afreken--locatierij { grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start; } .afreken--locatiekeuze { display: flex; flex-wrap: wrap; gap: 4px 20px; } .afreken--locatieknop { appearance: none; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 2px 0; font-family: inherit; font-size: 14px; font-weight: 600; color: #b6bbc2; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .afreken--locatieknop:hover { color: #ffffff; } .afreken--locatieknop.is-gekozen { color: #ffffff; border-bottom-color: #0f945d; } .afreken--locatieknop:focus-visible { outline: 2px solid rgba(46, 194, 126, 0.6); outline-offset: 3px; border-radius: 3px; } /* Gekozen plek en adres, onder de keuzerij. */ .afreken--locatieplek { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #ffffff; line-height: 1.5; } .afreken--locatieplek[hidden] { display: none; } /* Afrekenen zonder locatie: de keuze wordt aangewezen. */ .afreken--locatiekeuze.is-ontbrekend { animation: afrekenWijs 0.5s ease; } .afreken--locatiekeuze.is-ontbrekend .afreken--locatieknop { color: #ffffff; } .afreken--locatiekeuze.is-ontbrekend::after { content: "kies eerst een locatie"; display: block; flex-basis: 100%; font-size: 13px; font-weight: 600; color: #ff8f6b; } @keyframes afrekenWijs { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .afreken--locatiekeuze.is-ontbrekend { animation: none; } } .afreken--totaal { padding-top: 16px; } .afreken--totaalregel { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #b6bbc2; padding: 4px 0; } .afreken--doorgestreept { text-decoration: line-through; color: #9aa0a8; white-space: nowrap; } .afreken--korting { color: #0f945d; font-weight: 600; white-space: nowrap; } .afreken--totaalregel-som { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 22px; font-weight: 700; color: #ffffff; } .afreken--garantie { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: #0f945d; } .afreken--formulier { background: #ffffff; border-radius: 16px; padding: 28px 30px; display: grid; gap: 16px; } .afreken--veld { display: grid; gap: 6px; } .afreken--veld label { font-size: 13px; font-weight: 600; color: #232323; } .afreken--veld input, .afreken--veld select { width: 100%; padding: 13px 14px; border: 1px solid #e0e0e0; border-radius: 10px; background: #fafafa; color: #232323; font-size: 15px; font-family: inherit; box-sizing: border-box; } .afreken--veld input:focus, .afreken--veld select:focus { outline: none; border-color: #0f945d; box-shadow: 0 0 0 3px rgba(15, 148, 93, 0.15); } .afreken--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .afreken--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .afreken--knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 4px; padding: 16px 28px; background: #0f945d; color: #ffffff; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 16px; font-weight: 600; border: 0; border-radius: 999px; cursor: pointer; transition: background 0.2s ease; } .afreken--knop:hover { background: #0c7c4e; } .afreken--knop[disabled] { background: #9aa0a8; cursor: default; } .afreken--klein { margin: 0; font-size: 13px; line-height: 1.6; color: #6c727c; } @media (max-width: 900px) { .afreken--grid { grid-template-columns: 1fr; } .afreken--overzicht, .afreken--formulier { padding: 22px 20px; } .afreken--regels > div { grid-template-columns: 1fr; gap: 2px; } .afreken--locatiekeuze { gap: 4px 16px; margin-top: 4px; } } @media (max-width: 599px) { .afreken--duo { grid-template-columns: 1fr; } } /* -- agenda examentrainingen: filter op locatie, kaarten met data ------------ */ .trainingen--filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px; } .trainingen--filter { gap: 4px 22px; } .trainingen--filterknop { padding: 6px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #b6bbc2; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .trainingen--filterknop:hover { color: #ffffff; } .trainingen--filterknop.is-actief { color: #ffffff; border-bottom-color: #0f945d; } /* Niveau en locaties als gewone tekst, geen pillen. */ .trainingen--badge { border: 0 !important; padding: 0 !important; margin-bottom: 8px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #0f945d !important; } .trainingen--kaart[hidden] { display: none; } .trainingen--detail-datum { color: #ffffff !important; font-weight: 600; } .trainingen--locaties { display: block; margin: 8px 0 6px; font-size: 13px; color: #b6bbc2; } .trainingen--prijs-regel { flex-wrap: wrap; } .trainingen--leeg { margin: 24px 0 0; font-size: 15px; color: #9aa0a8; } /* Verwijzing naar /scholen onder de agenda op /examentrainingen. */ .trainingen--scholen { margin: 22px 0 0; font-size: 15px; color: #9aa0a8; } .trainingen--scholen a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; } .trainingen--scholen a:hover { color: #0f945d; } /* Vroegboekprijs of standaardprijs, zie examentraining-product.liquid. */ .vb-voorbij { display: none; } html.vroegboek-voorbij .vb-actief { display: none !important; } html.vroegboek-voorbij .vb-voorbij { display: inline; } /* -- agenda: sfeerfoto licht achter de kaart, trainer met foto --------------- */ .trainingen--kaart { position: relative; overflow: hidden; background-image: var(--kaart-foto, none) !important; background-size: cover !important; background-position: var(--kaart-focus, center) !important; /* De foto stopt bij de rand; anders schijnt hij door de halfdoorzichtige rand heen en blijft er een lichte lijn over. */ background-clip: padding-box !important; } .trainingen--kaart::before { content: ""; position: absolute; inset: 0; background: rgba(28, 28, 28, 0.84); pointer-events: none; } .trainingen--kaart > * { position: relative; } .trainingen--trainer { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 12px; color: #9aa0a8; } .trainingen--trainer strong { color: #ffffff; font-weight: 600; } .trainingen--trainer img, .trainingen--trainer-initialen { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; flex: none; } .trainingen--trainer img + .trainingen--trainer-initialen { display: none; } .trainingen--trainer-initialen { display: inline-flex; align-items: center; justify-content: center; background: #2a2a2a; color: #b6bbc2; font-size: 10px; font-weight: 700; } /* Agendakaarten: per rij even hoog, met prijs en knop onderaan uitgelijnd. */ .trainingen--grid { align-items: stretch; } .trainingen--kaart .trainingen--prijs-regel { margin-top: auto !important; padding-top: 14px; } .trainingen--kaart .trainingen--knop { width: 100%; } /* -- agenda: niveau-tabs en een carrousel met pijlen ------------------------ */ .trainingen--niveaus { display: flex; gap: 6px; margin: -16px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .trainingen--niveauknop { padding: 10px 18px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #b6bbc2; font-family: var(--heading_font_family, Poppins), sans-serif; font-size: 17px; font-weight: 700; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .trainingen--niveauknop:hover { color: #ffffff; } .trainingen--niveauknop.is-actief { color: #ffffff; border-bottom-color: #0f945d; } .trainingen--filter { align-items: center; margin: 0 0 22px; } .trainingen--filterlabel { font-size: 13px; color: #9aa0a8; margin-right: 4px; } .trainingen--rail { position: relative; } /* De kaarten staan op elke schermbreedte in één rij die horizontaal scrolt; op desktop passen er drie in beeld, met pijlen ernaast. */ .trainingen--grid { display: flex !important; grid-template-columns: none !important; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; align-items: stretch; } .trainingen--grid::-webkit-scrollbar { display: none; } .trainingen--grid .trainingen--kaart { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; } .trainingen--pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: #232323; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: border-color 0.2s ease, opacity 0.2s ease; } .trainingen--pijl:hover { border-color: #0f945d; } .trainingen--pijl[disabled] { opacity: 0.3; cursor: default; } .trainingen--pijl[hidden] { display: none; } .trainingen--pijl-links { left: -22px; } .trainingen--pijl-rechts { right: -22px; } @media (max-width: 1240px) { .trainingen--pijl-links { left: -8px; } .trainingen--pijl-rechts { right: -8px; } } @media (max-width: 989px) { .trainingen--grid .trainingen--kaart { flex-basis: calc((100% - 18px) / 2); } } @media (max-width: 767px) { .trainingen--pijl { display: none !important; } .trainingen--niveauknop { font-size: 15px; padding: 8px 12px 10px; } .trainingen--grid { margin-left: -20px; margin-right: -20px; padding: 4px 20px 18px; gap: 14px; } .trainingen--grid .trainingen--kaart { flex-basis: 82%; scroll-snap-align: center; } } /* -- agenda op mobiel: filters op één regel, tekstregels heel houden ------- */ .trainingen--filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .trainingen--filter::-webkit-scrollbar { display: none; } .trainingen--niveaus { overflow-x: auto; scrollbar-width: none; } .trainingen--niveaus::-webkit-scrollbar { display: none; } .trainingen--niveauknop { white-space: nowrap; } @media (max-width: 767px) { .trainingen--filterlabel { display: none; } .trainingen--filter { gap: 4px 16px; margin: -4px -20px 18px; padding: 0 20px; } .trainingen--filterknop { font-size: 13px; } .trainingen--detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Locaties mogen wel over twee regels, maar breken alleen tussen de plaatsen. */ .trainingen--locaties { line-height: 1.5; } } /* Adres onder de naam van de locatie in het besteloverzicht. */ .afreken--adres { display: block; font-weight: 400; color: #b6bbc2; } /* -- agenda: niveaukeuze duidelijk als filter -------------------------------- De tabs waren te subtiel: bezoekers dachten dat we alleen het getoonde niveau aanbieden. Nu een label erboven, knoppen met een rand, en het aantal trainingen per niveau (meebewegend met de locatiekeuze). */ .trainingen--kieslabel { margin: -14px 0 10px; font-size: 13px; color: #9aa0a8; } .trainingen--niveaus { gap: 8px; border-bottom: 0; margin: 0 0 18px; } .trainingen--niveauknop { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; margin-bottom: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 16px; } .trainingen--niveauknop:hover { border-color: rgba(15, 148, 93, 0.7); } .trainingen--niveauknop.is-actief { background: #0f945d; border-color: #0f945d; color: #ffffff; } .trainingen--aantal { font-family: inherit; font-size: 12px; font-weight: 600; color: #b6bbc2; background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 1px 7px; min-width: 18px; text-align: center; } .trainingen--niveauknop.is-actief .trainingen--aantal { background: rgba(0, 0, 0, 0.22); color: #ffffff; } .trainingen--niveauknop.is-leeg { opacity: 0.45; } @media (max-width: 767px) { .trainingen--niveauknop { font-size: 14px; padding: 8px 13px; } .trainingen--kieslabel { margin-top: 0; } } /* =========================================================================== Geldteruggarantie online bijles: tekst per periode (28 oktober 2026). komt uit build.js en wordt bij elk bezoek bijgewerkt door static-site.js. Een element met data-garantie-toon="voor optie" is alleen zichtbaar in die periodes. Zie garantie.js voor de datums en de teksten. ========================================================================== */ html[data-garantie="voor"] [data-garantie-toon]:not([data-garantie-toon~="voor"]), html[data-garantie="optie"] [data-garantie-toon]:not([data-garantie-toon~="optie"]), html[data-garantie="na"] [data-garantie-toon]:not([data-garantie-toon~="na"]) { display: none !important; } /* Keuze voor de geldteruggarantie in het inschrijfformulier (online bijles, alleen in de periode "optie", zie garantie.js). Klapt open zoals de IBAN-velden; dunne rand, geen vlak. */ .inschrijf--rij[data-ins-garantie] { grid-template-columns: 1fr; } .inschrijf--garantie { border: 1px solid rgba(15, 148, 93, 0.45); border-radius: 14px; padding: 14px 16px; } .inschrijf--garantie-titel { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #232323; } .inschrijf--garantie .inschrijf--akkoord { align-items: flex-start; } .inschrijf--garantie .inschrijf--akkoord input { flex: 0 0 auto; margin-top: 2px; min-height: 0; /* base.css geeft elke input min-height: 62px */ } .inschrijf--garantie-uitleg { margin: 8px 0 0; font-size: 13px; color: #6c727c; } /* Lokale actie: vervangende tekst na de einddatum (zie static-site.js). */ [data-actie-na] { display: none !important; }