/* Start:/local/templates/new_magic/layout/dist/swiper-bundle.min.css?172743990418435*/ /** * Swiper 11.1.10 * 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: August 21, 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} /* End */ /* Start:/local/templates/new_magic/layout/dist/styles.css?1762003460197846*/ @font-face { font-family: 'Montserrat'; src: url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-SemiBold.woff2') format('woff2'), url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Regular.woff2') format('woff2'), url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Medium.woff2') format('woff2'), url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Bold.woff2') format('woff2'), url('/local/templates/new_magic/layout/dist/../public/fonts/Montserrat-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } /* ! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: 'Montserrat', sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: 'Montserrat', sans-serif; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { border-radius: 0; -webkit-appearance: none; font-family: 'Montserrat', sans-serif; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } body { font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 20px; padding-left: 20px; } @media (min-width: 100%) { .container { max-width: 100%; } } @media (min-width: 1240px) { .container { max-width: 1240px; } } @media (min-width: 1760px) { .container { max-width: 1760px; } } .context-menu-item { position: relative; height: 100%; width: 100%; cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 1rem; --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition-timing-function: linear; } .context-menu-item:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } @media (prefers-color-scheme: dark) { .context-menu-item { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } .context-menu-item:hover { background-color: rgb(31 41 55 / 0.5); } } .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } .invisible { visibility: hidden; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .-left-\[13px\] { left: -13px; } .-left-\[30px\] { left: -30px; } .-right-\[13px\] { right: -13px; } .-top-\[27px\] { top: -27px; } .bottom-0 { bottom: 0px; } .bottom-\[17px\] { bottom: 17px; } .bottom-\[calc\(100\%\+12px\)\] { bottom: calc(100% + 12px); } .left-0 { left: 0px; } .left-1\/2 { left: 50%; } .left-2\/4 { left: 50%; } .left-\[-16px\] { left: -16px; } .left-\[145px\] { left: 145px; } .left-\[16px\] { left: 16px; } .left-\[20px\] { left: 20px; } .right-0 { right: 0px; } .right-\[12px\] { right: 12px; } .right-\[19px\] { right: 19px; } .right-\[20px\] { right: 20px; } .right-\[23px\] { right: 23px; } .right-\[9\.14px\] { right: 9.14px; } .top-0 { top: 0px; } .top-1\/2 { top: 50%; } .top-2\/4 { top: 50%; } .top-\[10px\] { top: 10px; } .top-\[16px\] { top: 16px; } .top-\[20px\] { top: 20px; } .top-\[30px\] { top: 30px; } .top-\[32px\] { top: 32px; } .top-\[40px\] { top: 40px; } .top-\[7px\] { top: 7px; } .top-\[9\.14px\] { top: 9.14px; } .top-\[9px\] { top: 9px; } .top-\[calc\(100\%-1px\)\] { top: calc(100% - 1px); } .top-full { top: 100%; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-\[-1\] { z-index: -1; } .z-\[100\] { z-index: 100; } .z-\[10\] { z-index: 10; } .z-\[200\] { z-index: 200; } .order-1 { order: 1; } .order-2 { order: 2; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-start-1 { grid-column-start: 1; } .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-5 { grid-column-start: 5; } .col-start-8 { grid-column-start: 8; } .col-end-12 { grid-column-end: 12; } .col-end-3 { grid-column-end: 3; } .col-end-5 { grid-column-end: 5; } .col-end-8 { grid-column-end: 8; } .row-span-1 { grid-row: span 1 / span 1; } .-mx-\[20px\] { margin-left: -20px; margin-right: -20px; } .mx-0 { margin-left: 0px; margin-right: 0px; } .mx-auto { margin-left: auto; margin-right: auto; } .my-\[16px\] { margin-top: 16px; margin-bottom: 16px; } .my-\[28px\] { margin-top: 28px; margin-bottom: 28px; } .\!mt-0 { margin-top: 0px !important; } .-mt-\[calc\(115px\/2\)\] { margin-top: calc(calc(115px / 2) * -1); } .mb-\[12px\] { margin-bottom: 12px; } .mb-\[16px\] { margin-bottom: 16px; } .mb-\[20px\] { margin-bottom: 20px; } .mb-\[25px\] { margin-bottom: 25px; } .mb-\[2px\] { margin-bottom: 2px; } .mb-\[30px\] { margin-bottom: 30px; } .mb-\[40px\] { margin-bottom: 40px; } .mb-\[9px\] { margin-bottom: 9px; } .mr-\[20px\] { margin-right: 20px; } .mr-\[70px\] { margin-right: 70px; } .mt-\[12px\] { margin-top: 12px; } .mt-\[16px\] { margin-top: 16px; } .mt-\[20px\] { margin-top: 20px; } .mt-\[24px\] { margin-top: 24px; } .mt-\[2px\] { margin-top: 2px; } .mt-\[32px\] { margin-top: 32px; } .mt-\[60px\] { margin-top: 60px; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block { display: block; } .inline-block { display: inline-block; } .\!flex { display: flex !important; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .\!hidden { display: none !important; } .hidden { display: none; } .\!h-\[14px\] { height: 14px !important; } .\!h-\[357px\] { height: 357px !important; } .\!h-\[380px\] { height: 380px !important; } .\!h-\[76px\] { height: 76px !important; } .\!h-full { height: 100% !important; } .h-14 { height: 3.5rem; } .h-\[100px\] { height: 100px; } .h-\[115px\] { height: 115px; } .h-\[12px\] { height: 12px; } .h-\[16px\] { height: 16px; } .h-\[17\.5px\] { height: 17.5px; } .h-\[183px\] { height: 183px; } .h-\[18px\] { height: 18px; } .h-\[1px\] { height: 1px; } .h-\[20px\] { height: 20px; } .h-\[220px\] { height: 220px; } .h-\[22px\] { height: 22px; } .h-\[23px\] { height: 23px; } .h-\[24px\] { height: 24px; } .h-\[260px\] { height: 260px; } .h-\[28px\] { height: 28px; } .h-\[29px\] { height: 29px; } .h-\[2px\] { height: 2px; } .h-\[30px\] { height: 30px; } .h-\[32px\] { height: 32px; } .h-\[36px\] { height: 36px; } .h-\[380px\] { height: 380px; } .h-\[39px\] { height: 39px; } .h-\[40px\] { height: 40px; } .h-\[44px\] { height: 44px; } .h-\[49px\] { height: 49px; } .h-\[4px\] { height: 4px; } .h-\[60px\] { height: 60px; } .h-\[61px\] { height: 61px; } .h-\[64px\] { height: 64px; } .h-\[75px\] { height: 75px; } .h-\[88px\] { height: 88px; } .h-auto { height: auto; } .h-fit { height: -moz-fit-content; height: fit-content; } .h-full { height: 100%; } .h-screen { height: 100vh; } .max-h-\[49px\] { max-height: 49px; } .min-h-0 { min-height: 0px; } .min-h-\[230px\] { min-height: 230px; } .min-h-\[24px\] { min-height: 24px; } .min-h-\[415px\] { min-height: 415px; } .min-h-\[429px\] { min-height: 429px; } .min-h-screen { min-height: 100vh; } .\!w-\[123px\] { width: 123px !important; } .\!w-\[14px\] { width: 14px !important; } .\!w-\[313px\] { width: 313px !important; } .\!w-\[60px\] { width: 60px !important; } .\!w-full { width: 100% !important; } .\!w-screen { width: 100vw !important; } .w-1\/2 { width: 50%; } .w-2\/3 { width: 66.666667%; } .w-\[10\%\] { width: 10%; } .w-\[100\%\] { width: 100%; } .w-\[107px\] { width: 107px; } .w-\[12px\] { width: 12px; } .w-\[14px\] { width: 14px; } .w-\[16px\] { width: 16px; } .w-\[17\.5px\] { width: 17.5px; } .w-\[18px\] { width: 18px; } .w-\[20px\] { width: 20px; } .w-\[24px\] { width: 24px; } .w-\[29px\] { width: 29px; } .w-\[30px\] { width: 30px; } .w-\[32px\] { width: 32px; } .w-\[36px\] { width: 36px; } .w-\[39px\] { width: 39px; } .w-\[40px\] { width: 40px; } .w-\[42px\] { width: 42px; } .w-\[44px\] { width: 44px; } .w-\[48px\] { width: 48px; } .w-\[4px\] { width: 4px; } .w-\[60px\] { width: 60px; } .w-\[69px\] { width: 69px; } .w-\[85px\] { width: 85px; } .w-\[calc\(100vw-40px\)\] { width: calc(100vw - 40px); } .w-\[calc\(100vw\/2\)\] { width: calc(100vw / 2); } .w-auto { width: auto; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-min { width: -moz-min-content; width: min-content; } .w-screen { width: 100vw; } .min-w-\[134px\] { min-width: 134px; } .min-w-\[171px\] { min-width: 171px; } .min-w-\[24px\] { min-width: 24px; } .min-w-full { min-width: 100%; } .max-w-\[100vw\] { max-width: 100vw; } .max-w-\[171px\] { max-width: 171px; } .max-w-\[233px\] { max-width: 233px; } .flex-1 { flex: 1 1 0%; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-2\/4 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-\[12px\] { --tw-translate-x: -12px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-full { --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-2\/4 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-1\/2 { --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[18px\] { --tw-translate-x: 18px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-1\/4 { --tw-translate-y: 25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-rotate-90 { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } .cursor-pointer { cursor: pointer; } .touch-pan-x { --tw-pan-x: pan-x; touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .scroll-p-\[20px\] { scroll-padding: 20px; } .list-decimal { list-style-type: decimal; } .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-\[1fr\] { grid-template-columns: 1fr; } .grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr 1fr; } .grid-cols-\[1fr_1fr_1fr_auto\] { grid-template-columns: 1fr 1fr 1fr auto; } .grid-cols-\[3fr_2fr_auto\] { grid-template-columns: 3fr 2fr auto; } .grid-cols-\[69px_1fr_1fr\] { grid-template-columns: 69px 1fr 1fr; } .grid-cols-\[repeat\(2\2c minmax\(0\2c 270px\)\)_minmax\(0\2c 349px\)\] { grid-template-columns: repeat(2, minmax(0, 270px)) minmax(0, 349px); } .grid-rows-\[0fr\] { grid-template-rows: 0fr; } .grid-rows-\[1fr\] { grid-template-rows: 1fr; } .grid-rows-\[1fr_auto\] { grid-template-rows: 1fr auto; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .content-center { align-content: center; } .\!items-start { align-items: flex-start !important; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .\!items-center { align-items: center !important; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .\!gap-\[12px\] { gap: 12px !important; } .gap-0 { gap: 0px; } .gap-\[100px\] { gap: 100px; } .gap-\[10px\] { gap: 10px; } .gap-\[11px\] { gap: 11px; } .gap-\[120px\] { gap: 120px; } .gap-\[12px\] { gap: 12px; } .gap-\[130px\] { gap: 130px; } .gap-\[13px\] { gap: 13px; } .gap-\[15px\] { gap: 15px; } .gap-\[16px\] { gap: 16px; } .gap-\[17px\] { gap: 17px; } .gap-\[20px\] { gap: 20px; } .gap-\[21px\] { gap: 21px; } .gap-\[22px\] { gap: 22px; } .gap-\[24px\] { gap: 24px; } .gap-\[26px\] { gap: 26px; } .gap-\[28px\] { gap: 28px; } .gap-\[29px\] { gap: 29px; } .gap-\[2px\] { gap: 2px; } .gap-\[300px\] { gap: 300px; } .gap-\[30px\] { gap: 30px; } .gap-\[34px\] { gap: 34px; } .gap-\[35px\] { gap: 35px; } .gap-\[38px\] { gap: 38px; } .gap-\[39px\] { gap: 39px; } .gap-\[40px\] { gap: 40px; } .gap-\[42px\] { gap: 42px; } .gap-\[47px\] { gap: 47px; } .gap-\[4px\] { gap: 4px; } .gap-\[54px\] { gap: 54px; } .gap-\[55px\] { gap: 55px; } .gap-\[60px\] { gap: 60px; } .gap-\[6px\] { gap: 6px; } .gap-\[71px\] { gap: 71px; } .gap-\[75px\] { gap: 75px; } .gap-\[7px\] { gap: 7px; } .gap-\[8px\] { gap: 8px; } .gap-\[9px\] { gap: 9px; } .gap-x-\[20px\] { -moz-column-gap: 20px; column-gap: 20px; } .gap-x-\[24px\] { -moz-column-gap: 24px; column-gap: 24px; } .gap-x-\[47px\] { -moz-column-gap: 47px; column-gap: 47px; } .gap-y-\[12\.46px\] { row-gap: 12.46px; } .gap-y-\[12px\] { row-gap: 12px; } .gap-y-\[18px\] { row-gap: 18px; } .gap-y-\[20px\] { row-gap: 20px; } .gap-y-\[30px\] { row-gap: 30px; } .gap-y-\[40px\] { row-gap: 40px; } .gap-y-\[60px\] { row-gap: 60px; } .gap-y-\[70px\] { row-gap: 70px; } .gap-y-\[8px\] { row-gap: 8px; } .self-end { align-self: flex-end; } .\!overflow-hidden { overflow: hidden !important; } .overflow-hidden { overflow: hidden; } .overflow-clip { overflow: clip; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-scroll { overflow-x: scroll; } .scroll-smooth { scroll-behavior: smooth; } .whitespace-nowrap { white-space: nowrap; } .text-wrap { text-wrap: wrap; } .text-nowrap { text-wrap: nowrap; } .rounded-full { border-radius: 9999px; } .border { border-width: 1px; } .border-\[0\.5px\] { border-width: 0.5px; } .border-\[1px\] { border-width: 1px; } .border-t-\[1px\] { border-top-width: 1px; } .\!border-\[\#D5D5C9\] { --tw-border-opacity: 1 !important; border-color: rgb(213 213 201 / var(--tw-border-opacity)) !important; } .\!border-grey { --tw-border-opacity: 1 !important; border-color: rgb(81 81 81 / var(--tw-border-opacity)) !important; } .\!border-soft-grey { --tw-border-opacity: 1 !important; border-color: rgb(217 217 217 / var(--tw-border-opacity)) !important; } .\!border-text { --tw-border-opacity: 1 !important; border-color: rgb(30 30 30 / var(--tw-border-opacity)) !important; } .border-\[\#000000\] { --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-grey { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .border-grey-light { --tw-border-opacity: 1; border-color: rgb(243 243 243 / var(--tw-border-opacity)); } .border-soft-grey { --tw-border-opacity: 1; border-color: rgb(217 217 217 / var(--tw-border-opacity)); } .border-text { --tw-border-opacity: 1; border-color: rgb(30 30 30 / var(--tw-border-opacity)); } .border-transparent { border-color: transparent; } .border-warning { --tw-border-opacity: 1; border-color: rgb(229 46 46 / var(--tw-border-opacity)); } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .border-opacity-50 { --tw-border-opacity: 0.5; } .\!bg-\[\#D5D5C9\] { --tw-bg-opacity: 1 !important; background-color: rgb(213 213 201 / var(--tw-bg-opacity)) !important; } .\!bg-grey { --tw-bg-opacity: 1 !important; background-color: rgb(81 81 81 / var(--tw-bg-opacity)) !important; } .\!bg-grey-sale { --tw-bg-opacity: 1 !important; background-color: rgb(213 213 201 / var(--tw-bg-opacity)) !important; } .\!bg-soft-grey { --tw-bg-opacity: 1 !important; background-color: rgb(217 217 217 / var(--tw-bg-opacity)) !important; } .\!bg-transparent { background-color: transparent !important; } .\!bg-white { --tw-bg-opacity: 1 !important; background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; } .bg-\[\#D5D5C9\] { --tw-bg-opacity: 1; background-color: rgb(213 213 201 / var(--tw-bg-opacity)); } .bg-grey { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .bg-grey-light { --tw-bg-opacity: 1; background-color: rgb(243 243 243 / var(--tw-bg-opacity)); } .bg-grey\/50 { background-color: rgb(81 81 81 / 0.5); } .bg-soft-grey { --tw-bg-opacity: 1; background-color: rgb(217 217 217 / var(--tw-bg-opacity)); } .bg-text { --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } .bg-text\/30 { background-color: rgb(30 30 30 / 0.3); } .bg-transparent { background-color: transparent; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-white\/30 { background-color: rgb(255 255 255 / 0.3); } .bg-\[url\(\'\.\.\/public\/images\/catalog-header-bg\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/catalog-header-bg.png'); } .bg-\[url\(\'\.\.\/public\/images\/certificates-banner\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/certificates-banner.png'); } .bg-\[url\(\'\.\.\/public\/images\/exclusive-bg\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/exclusive-bg.png'); } .bg-\[url\(\'\.\.\/public\/images\/faq-banner\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/faq-banner.png'); } .bg-\[url\(\'\.\.\/public\/images\/interactive-bg-item\.jpg\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/interactive-bg-item.jpg'); } .bg-\[url\(\'\.\.\/public\/images\/job-banner\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/job-banner.png'); } .bg-\[url\(\'\.\.\/public\/images\/main-intro-bg\.jpg\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/main-intro-bg.jpg'); } .bg-\[url\(\'\.\.\/public\/images\/return-banner\.png\'\)\] { background-image: url('/local/templates/new_magic/layout/dist/../public/images/return-banner.png'); } .bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .from-transparent { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-grey { --tw-gradient-to: #515151 var(--tw-gradient-to-position); } .to-white { --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position); } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .bg-no-repeat { background-repeat: no-repeat; } .fill-transparent { fill: transparent; } .stroke-inherit { stroke: inherit; } .stroke-text { stroke: #1E1E1E; } .stroke-1 { stroke-width: 1; } .stroke-2 { stroke-width: 2; } .stroke-\[1\] { stroke-width: 1; } .object-cover { -o-object-fit: cover; object-fit: cover; } .object-center { -o-object-position: center; object-position: center; } .p-4 { padding: 1rem; } .p-\[120px\] { padding: 120px; } .p-\[20px\] { padding: 20px; } .p-\[24px\] { padding: 24px; } .\!px-\[74px\] { padding-left: 74px !important; padding-right: 74px !important; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-\[10px\] { padding-left: 10px; padding-right: 10px; } .px-\[12px\] { padding-left: 12px; padding-right: 12px; } .px-\[14px\] { padding-left: 14px; padding-right: 14px; } .px-\[16px\] { padding-left: 16px; padding-right: 16px; } .px-\[20px\] { padding-left: 20px; padding-right: 20px; } .px-\[22px\] { padding-left: 22px; padding-right: 22px; } .px-\[24px\] { padding-left: 24px; padding-right: 24px; } .px-\[25px\] { padding-left: 25px; padding-right: 25px; } .px-\[28px\] { padding-left: 28px; padding-right: 28px; } .px-\[30px\] { padding-left: 30px; padding-right: 30px; } .px-\[32px\] { padding-left: 32px; padding-right: 32px; } .px-\[35px\] { padding-left: 35px; padding-right: 35px; } .px-\[3px\] { padding-left: 3px; padding-right: 3px; } .px-\[4px\] { padding-left: 4px; padding-right: 4px; } .px-\[6px\] { padding-left: 6px; padding-right: 6px; } .py-\[11px\] { padding-top: 11px; padding-bottom: 11px; } .py-\[12px\] { padding-top: 12px; padding-bottom: 12px; } .py-\[16px\] { padding-top: 16px; padding-bottom: 16px; } .py-\[2\.25px\] { padding-top: 2.25px; padding-bottom: 2.25px; } .py-\[20px\] { padding-top: 20px; padding-bottom: 20px; } .py-\[22px\] { padding-top: 22px; padding-bottom: 22px; } .py-\[24px\] { padding-top: 24px; padding-bottom: 24px; } .py-\[27px\] { padding-top: 27px; padding-bottom: 27px; } .py-\[2px\] { padding-top: 2px; padding-bottom: 2px; } .py-\[30px\] { padding-top: 30px; padding-bottom: 30px; } .py-\[39px\] { padding-top: 39px; padding-bottom: 39px; } .py-\[5px\] { padding-top: 5px; padding-bottom: 5px; } .py-\[6px\] { padding-top: 6px; padding-bottom: 6px; } .py-\[8px\] { padding-top: 8px; padding-bottom: 8px; } .pb-\[20px\] { padding-bottom: 20px; } .pb-\[24px\] { padding-bottom: 24px; } .pb-\[28px\] { padding-bottom: 28px; } .pb-\[40px\] { padding-bottom: 40px; } .pb-\[4px\] { padding-bottom: 4px; } .pb-\[63px\] { padding-bottom: 63px; } .pl-0 { padding-left: 0px; } .pl-\[10px\] { padding-left: 10px; } .pl-\[12px\] { padding-left: 12px; } .pl-\[20px\] { padding-left: 20px; } .pl-\[24px\] { padding-left: 24px; } .pl-\[30px\] { padding-left: 30px; } .pr-\[40px\] { padding-right: 40px; } .pr-\[50px\] { padding-right: 50px; } .pr-\[60px\] { padding-right: 60px; } .pr-\[8px\] { padding-right: 8px; } .pt-\[10px\] { padding-top: 10px; } .pt-\[27px\] { padding-top: 27px; } .pt-\[30px\] { padding-top: 30px; } .pt-\[6px\] { padding-top: 6px; } .pt-\[79px\] { padding-top: 79px; } .pt-\[80px\] { padding-top: 80px; } .pt-\[86px\] { padding-top: 86px; } .text-center { text-align: center; } .text-start { text-align: start; } .font-montserrat { font-family: 'Montserrat', sans-serif; } .\!text-14 { font-size: 14px !important; } .\!text-20 { font-size: 20px !important; } .text-10 { font-size: 10px; } .text-12 { font-size: 12px; } .text-14 { font-size: 14px; } .text-16 { font-size: 16px; } .text-20 { font-size: 20px; } .text-26 { font-size: 26px; } .text-\[10px\] { font-size: 10px; } .text-\[12px\] { font-size: 12px; } .text-\[18px\] { font-size: 18px; } .text-\[20px\] { font-size: 20px; } .text-\[24px\] { font-size: 24px; } .\!font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .normal-case { text-transform: none; } .italic { font-style: italic; } .\!leading-\[17\.07px\] { line-height: 17.07px !important; } .\!leading-\[24px\] { line-height: 24px !important; } .\!leading-\[36px\] { line-height: 36px !important; } .\!leading-\[41px\] { line-height: 41px !important; } .leading-\[14\.63px\] { line-height: 14.63px; } .leading-\[14px\] { line-height: 14px; } .leading-\[16px\] { line-height: 16px; } .leading-\[17\.07px\] { line-height: 17.07px; } .leading-\[18px\] { line-height: 18px; } .leading-\[21\.94px\] { line-height: 21.94px; } .leading-\[21px\] { line-height: 21px; } .leading-\[24\.38px\] { line-height: 24.38px; } .leading-\[24px\] { line-height: 24px; } .leading-\[29\.26px\] { line-height: 29.26px; } .leading-\[31\.69px\] { line-height: 31.69px; } .tracking-\[0\.05em\] { letter-spacing: 0.05em; } .tracking-\[0\.1em\] { letter-spacing: 0.1em; } .\!text-grey { --tw-text-opacity: 1 !important; color: rgb(81 81 81 / var(--tw-text-opacity)) !important; } .\!text-text { --tw-text-opacity: 1 !important; color: rgb(30 30 30 / var(--tw-text-opacity)) !important; } .\!text-white { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } .text-\[\#000000\] { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } .text-grey { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .text-grey-sale { --tw-text-opacity: 1; color: rgb(213 213 201 / var(--tw-text-opacity)); } .text-relative { color: relative; } .text-soft-grey { --tw-text-opacity: 1; color: rgb(217 217 217 / var(--tw-text-opacity)); } .text-text { --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .text-transparent { color: transparent; } .text-warning { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .underline { text-decoration-line: underline; } .line-through { text-decoration-line: line-through; } .decoration-dashed { text-decoration-style: dashed; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .opacity-50 { opacity: 0.5; } .opacity-80 { opacity: 0.8; } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline-0 { outline-width: 0px; } .\!saturate-0 { --tw-saturate: saturate(0) !important; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .\!transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-75 { transition-duration: 75ms; } .ease-linear { transition-timing-function: linear; } a { color: inherit; text-decoration: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Headings */ .heading-1 { font-size: 24px; font-weight: 700; text-transform: uppercase; line-height: 29.26px; } @media (min-width: 1024px) { .heading-1 { font-size: 28px; line-height: 34.52px; } } @media (min-width: 1280px) { .heading-1 { font-size: 32px; line-height: 39.01px; } } @media (min-width: 1536px) { .heading-1 { font-size: 40px; line-height: 48.76px; } } .heading-2 { font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 24px; letter-spacing: 0.05em; } @media (min-width: 768px) { .heading-2 { font-size: 24px; line-height: 32px; } } @media (min-width: 1024px) { .heading-2 { font-size: 26px; line-height: 39.01px; } } @media (min-width: 1280px) { .heading-2 { font-size: 28px; line-height: 44.76px; } } @media (min-width: 1536px) { .heading-2 { font-size: 32px; line-height: 48.76px; } } .heading-3 { font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 24px; } @media (min-width: 768px) { .heading-3 { font-size: 18px; line-height: 24px; } } @media (min-width: 1024px) { .heading-3 { font-size: 20px; line-height: 32px; } } @media (min-width: 1280px) { .heading-3 { font-size: 20px; line-height: 32px; } } @media (min-width: 1536px) { .heading-3 { font-size: 26px; line-height: 32px; } } .heading-4 { font-size: 14px; font-weight: 600; line-height: 17.07px; } @media (min-width: 768px) { .heading-4 { font-size: 16px; line-height: 18.07px; } } @media (min-width: 1024px) { .heading-4 { font-size: 16px; line-height: 21.07px; } } @media (min-width: 1280px) { .heading-4 { font-size: 16px; line-height: 21.07px; } } @media (min-width: 1536px) { .heading-4 { font-size: 20px; line-height: 24.38px; } } .heading-body { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.1em; } .s-volume-col { display: none; } /* .catalog-item .heading-body { min-height: 35px; } */ @media (min-width: 1024px) { .heading-body { font-size: 16px; line-height: 21px; } /* .catalog-item .heading-body { min-height: 42px; } */ } .heading-button { font-size: 14px; font-weight: 400; line-height: 24.38px; } @media (min-width: 1024px) { .heading-button { font-size: 15px; line-height: 24.38px; } } @media (min-width: 1280px) { .heading-button { font-size: 16px; line-height: 28.38px; } } @media (min-width: 1536px) { .heading-button { font-size: 20px; line-height: 31.69px; } } .heading-sale { text-align: start; font-size: 12px; font-weight: 600; line-height: 14.63px; --tw-text-opacity: 1; color: rgb(213 213 201 / var(--tw-text-opacity)); text-decoration-line: line-through; } @media (min-width: 1024px) { .heading-sale { font-size: 14px; line-height: 17.07px; } } .heading-small { font-size: 12px; font-weight: 400; line-height: 14px; } @media (min-width: 1024px) { .heading-small { font-size: 14px; line-height: 18px; } } .heading-tooltip { font-size: 10px; font-weight: 400; line-height: 14.63px; } @media (min-width: 1024px) { .heading-tooltip { font-size: 12px; } } /* Breadcrumbs */ .breadcrumbs { display: flex; align-items: center; gap: 28px; color: currentColor; } .breadcrumbs li.breadcrumbs__item { position: relative; font-size: 10px; line-height: 18px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .breadcrumbs li.breadcrumbs__item:hover { font-weight: 600; } @media (min-width: 1024px) { .breadcrumbs li.breadcrumbs__item { font-size: 14px; } } .breadcrumbs li.breadcrumbs__item:not(:first-child)::before { position: absolute; left: -16px; top: 50%; height: 4px; width: 4px; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-color: currentColor; content: ''; } /* Input */ .text-input { height: 44px; width: 100%; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); background-color: transparent; padding-left: 20px; padding-right: 20px; padding-top: 11px; padding-bottom: 11px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); outline: 2px solid transparent; outline-offset: 2px; } .text-input::-moz-placeholder { font-size: 16px; font-weight: 400; line-height: 21px; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .text-input::placeholder { font-size: 16px; font-weight: 400; line-height: 21px; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } @media (min-width: 768px) { .text-input { height: 60px; padding-top: 19px; padding-bottom: 19px; font-size: 18px; letter-spacing: 0.05em; } .text-input::-moz-placeholder { font-size: 18px; } .text-input::placeholder { font-size: 18px; } } .text-input.invalid { --tw-border-opacity: 1; border-color: rgb(229 46 46 / var(--tw-border-opacity)); --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .text-input.invalid::-moz-placeholder { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .text-input.invalid::placeholder { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .button-outline { display: flex; height: 49px; flex-wrap: nowrap; align-items: center; justify-content: center; text-wrap: nowrap; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); background-color: transparent; padding-left: 25px; padding-right: 25px; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .button-outline { height: 56px; padding-left: 32px; padding-right: 32px; } } /* Button Outline 2 */ .button-outline-2 { display: flex; height: 49px; flex-wrap: nowrap; align-items: center; justify-content: center; text-wrap: nowrap; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); background-color: transparent; padding-left: 25px; padding-right: 25px; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .button-outline-2:hover { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .s-btn-buy-one-click { display: none; } @media (min-width: 1024px) { .button-outline-2 { height: 56px; padding-left: 32px; padding-right: 32px; } } .button-outline-fill { display: flex; height: 49px; flex-wrap: nowrap; align-items: center; justify-content: center; text-wrap: nowrap; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); padding-left: 25px; padding-right: 25px; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .button-outline-fill:active { --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } @media (min-width: 1024px) { .button-outline-fill { height: 56px; padding-left: 32px; padding-right: 32px; } } /* Switch */ .switch { display: inline-flex; } .switch__input { display: none; } .switch__control { display: flex; height: 22px; width: 42px; cursor: pointer; align-items: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(217 217 217 / var(--tw-bg-opacity)); padding-left: 3px; padding-right: 3px; padding-top: 2.25px; padding-bottom: 2.25px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .switch__puck { height: 17.5px; width: 17.5px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .switch__input:checked~.switch__control { --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } .switch__input:checked~.switch__control .switch__puck { --tw-translate-x: 18px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } /* Checkbox */ .checkbox { display: inline-flex; align-items: center; } .checkbox__label { position: relative; display: flex; cursor: pointer; align-items: flex-start; gap: 16px; } .checkbox__label a { text-decoration: underline; } .checkbox__label a:hover { text-decoration: none; } .checkbox__input { position: relative; height: 20px; width: 20px; min-width: 20px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .checkbox__label--sm .checkbox__input { margin-top: -1px; width: 14px; min-width: 14px; height: 14px; } .checkbox__input::before { position: absolute; left: 50%; top: 50%; display: block; height: 14px; width: 14px; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); content: var(--tw-content); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .checkbox__input:checked::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .checkbox__text { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 18px; font-weight: 400; line-height: 21.94px; } .checkbox__input.invalid { --tw-border-opacity: 1; border-color: rgb(229 46 46 / var(--tw-border-opacity)); } .checkbox__input.invalid~div { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .checkbox__label { gap: 22px; } .checkbox__label--sm { gap: 12px; } .checkbox__label--sm .checkbox__input { margin-top: 1px; } } /* Accordion */ .accordion { position: relative; } .accordion__header { display: flex; height: 3.5rem; cursor: pointer; align-items: center; justify-content: space-between; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .filters-modal .accordion__header { height: 35px; } @media (min-width: 1024px) { .accordion__header { height: 4rem; } } .accordion__title { -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .accordion__title { gap: 16px; font-size: 16px; line-height: 21px; } } .accordion__trigger { position: relative; display: flex; height: 24px; width: 24px; align-items: center; } @media (min-width: 1024px) { .accordion__trigger { height: 30px; width: 30px; } } .accordion__trigger span { position: absolute; left: 50%; top: 50%; height: 1px; width: 14px; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 1024px) { .accordion__trigger span { width: 17.5px; } } .accordion__trigger span:first-child { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .accordion__input { display: none; } .accordion__content { display: grid; grid-template-rows: 0fr; overflow: hidden; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .accordion__header:has(+ .accordion__input:checked) .accordion__trigger span:last-child { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .accordion__header:has(+ .accordion__input:checked) .accordion__trigger span:first-child { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .accordion__input:checked+.accordion__content { grid-template-rows: 1fr; } @media (min-width: 768px) { .accordion__input:checked+.accordion__content { padding-top: 0px; } } /* rotate sticks on trigger */ /* BurgerMenu */ .burger-menu { left: 0px; z-index: 100; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; } @media (min-width: 1024px) { .burger-menu { position: absolute; top: 50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .burger-menu__control { display: flex; height: 24px; width: 24px; cursor: pointer; flex-direction: column; align-items: center; justify-content: space-between; padding-left: 4px; padding-right: 4px; padding-top: 6px; padding-bottom: 6px; transition-property: all; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 768px) { .burger-menu__control { height: 30px; width: 30px; } } @media (min-width: 1024px) { .burger-menu__control { height: 32px; width: 32px; --tw-translate-x: 20px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); padding-left: 6px; padding-right: 6px; padding-top: 9px; padding-bottom: 9px; } } @media (min-width: 1280px) { .burger-menu__control { height: 48px; width: 48px; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; } } @media (min-width: 1780px) { .burger-menu__control { height: 60px; width: 60px; } } @media not all and (min-width: 1024px) { .header:not(.sticky) .header__wrapper .burger-menu .burger-menu__control { height: 24px !important; width: 24px !important; } } .burger-menu__control span { height: 1px; width: 100%; border-radius: 9999px; background-color: #1E1E1E; } .home-page.sticky-top .burger-menu__control span { background-color: #fff; } .catalog-menu { pointer-events: none; position: fixed; left: 0px; right: 0px; z-index: 100; display: grid; height: 100%; width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); -moz-column-gap: 20px; column-gap: 20px; } .catalog-menu__substrate { position: fixed; bottom: 0px; left: 0px; right: 0px; top: 0px; display: none; background-color: transparent; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 1024px) { .catalog-menu__substrate { display: block; } } .catalog-menu.open .catalog-menu__substrate { pointer-events: auto; } .catalog-menu__content { grid-column: span 2 / span 2; grid-column-start: 1; width: 100vw; --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); overflow-y: auto; overflow-x: hidden; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-right: 0px; padding-bottom: 20px; padding-left: 0px; padding-top: 79px; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); opacity: 0; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .catalog-menu .heading-body { padding-left: 20px; padding-right: 20px; } @media not all and (min-width: 1024px) { .catalog-menu__content { padding-right: 70px; } .catalog-menu.open .catalog-menu__content { transform: none !important; } } @media (min-width: 1024px) { .catalog-menu__content { width: 100%; min-width: 400px; padding-bottom: 24px; padding-left: 65px; padding-top: 118px; } .catalog-menu .heading-body { padding-left: 0; padding-right: 0; } } @media not all and (min-width: 1024px) { .catalog-menu__content.no-overflow { overflow: hidden !important; } } .catalog-menu.open .catalog-menu__content { pointer-events: auto; --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 1; } .catalog-menu__close { pointer-events: none; position: fixed; left: 20px; top: 7px; z-index: 20; display: none; height: 30px; width: 30px; cursor: pointer; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 1024px) { .catalog-menu__close { top: 20px; height: 40; width: 40px; } } @media (min-width: 1280px) { .catalog-menu__close { height: 50px; width: 50px; } } @media (min-width: 1536px) { .catalog-menu__close { height: 60px; width: 60px; } } @media not all and (min-width: 1024px) { .catalog-menu__close.mobile-hidden { display: none !important; } } .catalog-menu.open .catalog-menu__close { pointer-events: auto; display: flex; } .catalog-menu__close span { position: absolute; left: 50%; top: 50%; height: 2px; width: 66.666667%; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .catalog-menu__close span:first-child { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .catalog-menu__close span:last-child { --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .catalog-links { display: flex; flex-direction: column; gap: 28px; padding-left: 20px; } @media (min-width: 1024px) { .catalog-links { padding-left: 0px; padding-right: 80px; } } .catalog-links__inner { margin-top: 16px; margin-bottom: 16px; display: flex; width: 100%; min-width: 235px; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-direction: column; gap: 28px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 12px 24px; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media not all and (min-width: 1024px) { .catalog-links__inner { position: fixed; bottom: 0px; left: 0px; right: 0px; top: 0px; margin-top: 0px; min-height: 100vh; width: 100vw; --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); padding-bottom: 0px; padding-top: 21px; } } @media (min-width: 1024px) { .catalog-links__inner { background-color: rgb(213 213 201 / 0.2); font-size: 20px; } } .catalog-links__inner>li>a:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .catalog-links__inner-list { display: flex; flex-direction: column; gap: 24px; font-weight: 400; text-transform: none; } .catalog-links__item, .select-language__item { -webkit-user-select: none; -moz-user-select: none; user-select: none; padding-left: 20px; font-size: 20px; font-weight: 600; text-transform: uppercase; line-height: 24.38px; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .catalog-links__item.open { z-index: 2; } @media (min-width: 1024px) { .catalog-links__item, .select-language__item { padding-left: 0px; font-size: 26px; font-weight: 400; text-transform: none; line-height: 31.69px; } } .catalog-links__item__link:hover, .catalog-links__item.open .catalog-links__item__link { font-weight: 600; } .catalog-links__item.accent { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .catalog-links__item__header { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 10px; } /* @media (min-width: 1024px) { .catalog-links__item__header { justify-content: flex-start; } } */ .catalog-links__item__chevron { height: 24px; width: 24px; min-width: 24px; --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media not all and (min-width: 1024px) { .catalog-links__item__chevron { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } @media (min-width: 1024px) { .catalog-links__item__chevron { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .catalog-links__item.open .catalog-links__item__chevron { --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .catalog-links__accordion { display: grid; grid-template-rows: 0fr; overflow: hidden; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .catalog-links__item.open .catalog-links__accordion { grid-template-rows: 1fr; } @media not all and (min-width: 1024px) { .catalog-links__item.open .catalog-links__accordion { position: fixed; bottom: 0px; left: 0px; top: 0px; height: 100vh; width: 100vw; overflow-y: auto; } .catalog-links__item.open .catalog-links__accordion .catalog-links__inner { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .burger-menu__select.active { font-weight: 600; } .catalog-menu.active { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .select-language { display: flex; flex-direction: column; gap: 24px; } @media not all and (min-width: 1024px) { .select-language { padding-left: 20px; } } .select-language__item { width: -moz-fit-content; width: fit-content; } .select-language__item.active { font-weight: 700; } /* Menu */ .menu { position: relative; display: flex; width: -moz-fit-content; width: fit-content; flex-direction: column; gap: 24px; } .menu__trigger { display: flex; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; gap: 22px; } .menu__content { position: absolute; left: -30px; top: -27px; z-index: 10; width: -moz-fit-content; width: fit-content; flex-direction: column; gap: 24px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-bottom: 24px; padding-left: 30px; padding-right: 40px; padding-top: 27px; --tw-shadow: 0px 4px 18px 0px #0000001F; --tw-shadow-colored: 0px 4px 18px 0px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .menu__list { display: flex; flex-direction: column; gap: 12px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.1em; } @media (min-width: 1024px) { .menu__list { font-size: 16px; line-height: 21px; } } .menu__item { cursor: pointer; text-wrap: nowrap; } .menu__item:hover { text-decoration-line: underline; } .menu__item.active { font-weight: 700; text-decoration-line: none; } /* Header */ .header { position: fixed; left: 0px; right: 0px; top: 0px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 20px; background-color: rgb(255 255 255 / 0.8); padding-top: 6px; padding-bottom: 6px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 768px) { .header { gap: 30px; padding-top: 7px; padding-bottom: 7px; } } @media (min-width: 1024px) { .header { padding-top: 10px; padding-bottom: 10px; } } @media (min-width: 1280px) { .header { padding-top: 20px; padding-bottom: 20px; } } @media (min-width: 1780px) { .header { padding-top: 30px; padding-bottom: 30px; } } .header__wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: visible; } @media (min-width: 768px) { .header__wrapper { gap: 30px; } } .header.sticky-top { background-color: transparent; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .header.sticky-top.white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .header__menu-item { display: flex; height: 24px; width: 24px; min-width: 24px; cursor: pointer; align-items: center; justify-content: center; stroke-width: 1; color: relative; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .header__menu-item:hover { stroke-width: 2; } .header__menu-item svg path { stroke: #1E1E1E; } .home-page.sticky-top .header__menu-item svg path { stroke: #fff; } @media (min-width: 768px) { .header__menu-item { height: 30px; width: 30px; } } @media (min-width: 1280px) { .header__menu-item { height: 32px; width: 32px; } } @media (min-width: 1780px) { .header__menu-item { height: 40px; width: 40px; } } @media not all and (min-width: 1024px) { .header__controls { display: flex; justify-content: flex-end; min-width: 98px; } .header__controls li { min-width: 24px; } .header:not(.sticky-top) .header__wrapper .header__controls .header__menu-item { height: 24px !important; min-width: 24px !important; } } .header__menu-item a svg { display: inline-block; height: 100%; width: 100%; stroke: inherit; } .header__logo { height: 28px; width: 29px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .header__logo svg path { fill: #1E1E1E; } .home-page.sticky-top .header__logo svg path { fill: #fff; } @media (min-width: 768px) { .header__logo { position: absolute; left: 50%; top: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } @media (min-width: 1024px) { .header__logo { height: 32px; width: 32px; } } @media (min-width: 1280px) { .header__logo { height: 40px; width: 40px; } } @media (min-width: 1780px) { .header__logo { height: 67px; width: 67px; } } .header__logo { display: inline-block; } /* Footer */ .footer {} .footer__nav-link { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .footer__nav-link:hover { font-weight: 600; } .developer-logo a { white-space: nowrap; } /* Catalog */ .catalog-items__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 20px; column-gap: 20px; row-gap: 18px; } @media (min-width: 768px) { .catalog-items__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .catalog-items__grid { row-gap: 71px; } } .catalog-item { position: relative; grid-column: span 1 / span 1; grid-row: span 1 / span 1; display: flex; flex-direction: column; row-gap: 12.46px; } @media (min-width: 1024px) { .catalog-item { row-gap: 22px; } } .catalog-item.big { grid-column: span 2 / span 2; grid-row: span 2 / span 2; } .catalog-item__image-wrapper { position: relative; display: flex; width: 100%; } .catalog-item__image-wrapper .block { width: 100%; } .catalog-item__favorite-button { position: absolute; right: 9.14px; top: 9.14px; height: 16px; width: 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; stroke: #1E1E1E; stroke-width: 1; color: transparent; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .catalog-item__favorite-button:hover { --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .catalog-item__favorite-button { height: 40px; width: 40px; stroke-width: 0.5 !important; } } .catalog-item:hover .catalog-item__button { opacity: 1; } .catalog-item__button { position: absolute; bottom: 0px; right: 12px; display: flex; height: 39px; width: 39px; --tw-translate-y: 25%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; align-items: center; justify-content: center; --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); opacity: 1; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @media (min-width: 1024px) { .catalog-item__button { bottom: 24px; right: 24px; height: 72px; width: 72px; --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 0; } } .catalog-item__button svg { display: inline-block; height: 18px; width: 18px; stroke-width: 2; color: relative; } @media (min-width: 1024px) { .catalog-item__button svg { height: 32px; width: 32px; stroke-width: 1; } } .catalog-item__tags { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; row-gap: 8px; } @media (min-width: 1024px) { .catalog-item__tags { left: 20px; top: 20px; row-gap: 10px; } } .catalog-item__tags div { font-size: 12px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .catalog-item__tags div { font-size: 18px; line-height: 18px; } } .catalog-item__content { display: flex; flex-direction: column; row-gap: 8px; } @media (min-width: 1024px) { .catalog-item__content { flex-direction: column; row-gap: 14px; } } .catalog-item__price { font-size: 14px; font-weight: 600; line-height: 17.07px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .catalog-item__price { font-size: 20px; line-height: 24.38px; } } /* catalog pagination */ .catalog-items__pagination { display: flex; align-items: center; font-size: 14px; } @media (min-width: 768px) { .catalog-items__pagination { -moz-column-gap: 5px; column-gap: 5px; } } @media (min-width: 1024px) { .catalog-items__pagination { font-size: 16px; } } .catalog-items__pagination__item { display: flex; align-items: center; justify-content: center; height: 44px; width: 44px; cursor: pointer; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .catalog-items__pagination__item:not(.active):hover { font-weight: 600; } .catalog-items__pagination__item.active { -webkit-user-select: none; -moz-user-select: none; user-select: none; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(30 30 30 / var(--tw-border-opacity)); cursor: default; } @media (min-width: 1024px) { .catalog-items__pagination__item { height: 72px; width: 72px; } } /* catalog item gallery carousel */ .catalog-item-gallery-carousel { position: relative; width: 100vw !important; overflow: hidden !important; } .catalog-item-gallery-carousel .swiper-wrapper { width: 100vw !important; } .catalog-item-gallery-carousel>>>.swiper-slide { width: 100vw !important; } .categories-carousel { z-index: 2; } .categories-carousel__next[aria-disabled="true"], .categories-carousel__prev[aria-disabled="true"] { display: none; } @media (max-width: 768px) { .catalog-item-gallery-carousel .swiper-slide { height: calc(100vh - 240px); } .catalog-item-gallery-carousel .swiper-slide-active { z-index: 2; } .catalog-item-gallery-carousel .swiper-slide img { position: relative; left: 50%; width: auto !important; height: 100%; min-width: 100%; min-height: 100%; max-width: none; transform: translate(-50%, 0); object-fit: cover; } } /* search-bar */ .search-bar { position: relative; display: flex; min-height: 24px; min-width: 24px; align-items: center; justify-content: center; overflow: visible; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) } .search-bar form { width: 100%; } @media (min-width: 768px) { .search-bar { min-height: 30px; min-width: 30px; } } @media (min-width: 1024px) { .search-bar { height: 40px; width: 40px; } } .search-bar__input { display: none; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 50px; font-weight: 600; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); opacity: 0; outline: 2px solid transparent; outline-offset: 2px; outline-width: 0px; transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) } .search-bar__input::-moz-placeholder { font-weight: 400; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .search-bar__input::placeholder { font-weight: 400; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .search-bar__input { height: 40px; } } .search-bar__input { animation: fade-out 0.2s ease-in-out; } .search-bar__trigger { position: absolute; right: 0px; top: 50%; height: 24px; width: 24px; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .search-bar__trigger:hover { stroke-width: 2; } @media (min-width: 768px) { .search-bar__trigger { height: 30px; width: 30px; } } @media (min-width: 1024px) { .search-bar__trigger { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } } @media (min-width: 1280px) { .search-bar__trigger { height: 32px; width: 32px; } } @media (min-width: 1780px) { .search-bar__trigger { height: 40px; width: 40px; } } @media not all and (min-width: 1024px) { .header:not(.sticky) .header__wrapper .header__controls li .search-bar .search-bar__trigger { height: 24px !important; min-height: 24px !important; width: 24px !important; min-width: 24px !important; } } .search-bar__icon { pointer-events: none; display: inline-block; height: 100%; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; stroke: inherit; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .search-bar__icon path { stroke: #1E1E1E; } .home-page.sticky-top .search-bar__icon path { stroke: #fff; } .home-page.sticky-top .active .search-bar__icon path { stroke: #1E1E1E; } .search-bar__results { z-index: 1; position: absolute; top: 100%; display: none; height: -moz-fit-content; height: fit-content; width: 100%; flex-direction: column; gap: 11px; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(243 243 243 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 20px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .search-bar__results div { cursor: pointer; font-size: 14px; font-weight: 400; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .search-bar__results div:hover { font-weight: 600; } .search-bar.active { position: absolute; left: 0px; top: 0px; z-index: 200; width: 100vw; } @media (min-width: 1024px) { .search-bar.active { position: relative; width: 100%; min-width: 420px; } } .search-bar.active .search-bar__trigger { right: 0px; --tw-translate-x: -12px; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } @media (min-width: 1024px) { .search-bar.active .search-bar__trigger { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } } .search-bar.active .search-bar__icon { height: 24px; width: 24px; } .search-bar.active .search-bar__input { display: flex; width: 100%; opacity: 1; animation: fade-in 0.2s ease-in-out; } .search-bar.active.fade-out .search-bar__input { animation: fade-out 0.2s ease-in-out; } .search-bar.active .search-bar__results { display: flex; animation: fade-in 0.2s ease-in-out; } .search-bar.active.fade-out .search-bar__results { animation: fade-out 0.2s ease-in-out; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } /* divider */ .divider { height: 1px; width: 100%; --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } .interactive-bg__banner { position: absolute; display: flex; height: 61px; align-items: center; } @media (min-width: 1024px) { .interactive-bg__banner { height: 100px; } } .interactive-bg__banner__dot { cursor: pointer; align-items: center; justify-content: center; padding-left: 12px; padding-right: 12px; } @media (min-width: 1024px) { .interactive-bg__banner__dot { display: flex; padding: 20px; } } .interactive-bg__banner__dot div { height: 12px; width: 12px; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .interactive-bg__banner__preview { display: none; } @media (min-width: 768px) { .interactive-bg__banner__preview { display: flex; } } @media (min-width: 1024px) { .interactive-bg__banner__preview { display: none; } } .interactive-bg__banner__content { display: none; --tw-backdrop-blur: blur(2px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; align-items: center; background-color: rgb(81 81 81 / 0.7); transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .tippy-box { padding: 0 !important; background-color: transparent !important; border-radius: 0 !important; } .tippy-content { padding: 0 !important; min-width: 393px; } .tippy-box .text-nowrap { text-wrap: wrap; } .tippy-box .interactive-bg__banner__content { display: flex; width: 100%; } .main { padding-bottom: 60px; } @media (max-width: 900px) { .tippy-content { min-width: 300px; } } @media (max-width: 600px) { .interactive-bg__items [data-tippy-root] { margin-bottom: -30px !important; } } @media (min-width: 1024px) { .interactive-bg__banner__content { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } } .interactive-bg__banner__image { background-position: center; background-size: 100% auto; height: 65.65px; width: 59.74px; } @media (min-width: 1024px) { .interactive-bg__banner__image { height: 100px; width: 91px; } } /* .interactive-bg__banner__dot:hover ~ .interactive-bg__banner__content, .interactive-bg__banner__preview:hover ~ .interactive-bg__banner__content, .interactive-bg__banner__content:hover{ visibility: visible; opacity: 1; --tw-backdrop-blur: blur(2px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } */ .interactive-bg__banner:hover .interactive-bg__banner__dot div { animation: none; } /* tabs */ .tabs { display: flex; flex-direction: column; gap: 40px; } @media (min-width: 1024px) { .tabs { gap: 80px; } } .tabs__controls { display: flex; height: -moz-fit-content; height: fit-content; width: calc(100vw - 40px); scroll-snap-type: x var(--tw-scroll-snap-strictness); --tw-scroll-snap-strictness: mandatory; scroll-padding: 20px; align-items: center; gap: 12px; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); font-size: 14px; font-weight: 600; line-height: 17.07px; } @media (min-width: 768px) { .tabs__controls { font-size: 16px; line-height: 18.07px; } } @media (min-width: 1024px) { .tabs__controls { font-size: 16px; line-height: 21.07px; } } @media (min-width: 1280px) { .tabs__controls { font-size: 16px; line-height: 21.07px; } } @media (min-width: 1536px) { .tabs__controls { font-size: 20px; line-height: 24.38px; } } @media (min-width: 1024px) { .tabs__controls { gap: 30px; } } .tabs__controls { -webkit-overflow-scrolling: touch; } .tabs__controls a { display: inline-block; scroll-snap-align: start; } .tabs__controls a.active { display: inline-block; font-size: 20px; text-transform: uppercase; line-height: 24px; --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); text-decoration-line: underline; } @media (min-width: 1024px) { .tabs__controls a.active { font-size: 26px; } } .tabs__content { display: flex; width: 100%; flex-direction: column-reverse; gap: 40px; } @media (min-width: 1024px) { .tabs__content { flex-direction: row; gap: 165px; } } .tabs__controls::-webkit-scrollbar { display: none; } /* sizes carousel */ .sizes-carousel { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } @media (min-width: 768px) { .sizes-carousel { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; } } @media (min-width: 1024px) { .sizes-carousel { max-width: 85.18%; } } .sizes-carousel__navigation { position: absolute; bottom: 0px; top: 0px; z-index: 10; display: flex; height: 100%; width: 48px; cursor: pointer; align-items: center; justify-content: center; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .sizes-carousel__navigation.swiper-button-disabled { opacity: 0; } .sizes-carousel__navigation.prev { left: -13px; background-image: linear-gradient(to left, var(--tw-gradient-stops)); --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position); } .sizes-carousel__navigation.prev:hover { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FFFFFF var(--tw-gradient-via-position), var(--tw-gradient-to); --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position); } .sizes-carousel__navigation.next { right: -13px; background-image: linear-gradient(to right, var(--tw-gradient-stops)); --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position); } .sizes-carousel__navigation.next:hover { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FFFFFF var(--tw-gradient-via-position), var(--tw-gradient-to); --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position); } .sizes-carousel__navigation svg { height: 24px; width: 24px; } @media (min-width: 1024px) { .sizes-carousel__navigation svg { height: 40px; width: 40px; } } .sizes-carousel__navigation.prev svg { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cookies { position: absolute; bottom: 0px; left: 0px; z-index: 10; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-left: 20px; padding-right: 20px; padding-top: 30px; padding-bottom: 30px; } @media (min-width: 1024px) { .cookies { bottom: 50px; max-width: 371px; padding-left: 12px; padding-right: 12px; padding-top: 18px; padding-bottom: 18px; } } .cookies__close { position: absolute; right: 20px; top: 30px; height: 24px; width: 24px; } @media (min-width: 1024px) { .cookies__close { right: 12px; top: 12px; } } .cookies__title { padding-right: 60px; font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 24.38px; } @media (min-width: 1024px) { .cookies__title { padding-right: 0px; font-size: 12px; text-transform: none; line-height: 18px; } } .cookies__text { margin-top: 24px; font-size: 12px; line-height: 16px; letter-spacing: 0.1em; } @media (min-width: 1024px) { .cookies__text { line-height: 18px; letter-spacing: 0.05em; } } .cookies__button { margin-top: 20px; max-height: 49px; width: 100%; max-width: 171px; padding-left: 0px; padding-right: 0px; } @media (min-width: 1024px) { .cookies__button { margin-top: 12px; max-height: 28px; max-width: 61px; } } .cookies__button-text { text-transform: uppercase; } @media (min-width: 1024px) { .cookies__button-text { font-size: 12px; text-transform: none; line-height: 18px; } } .placeholder\:text-10::-moz-placeholder { font-size: 10px; } .placeholder\:text-10::placeholder { font-size: 10px; } .placeholder\:text-16::-moz-placeholder { font-size: 16px; } .placeholder\:text-16::placeholder { font-size: 16px; } .placeholder\:font-normal::-moz-placeholder { font-weight: 400; } .placeholder\:font-normal::placeholder { font-weight: 400; } .placeholder\:leading-\[21px\]::-moz-placeholder { line-height: 21px; } .placeholder\:leading-\[21px\]::placeholder { line-height: 21px; } .placeholder\:\!text-soft-grey::-moz-placeholder { --tw-text-opacity: 1 !important; color: rgb(217 217 217 / var(--tw-text-opacity)) !important; } .placeholder\:\!text-soft-grey::placeholder { --tw-text-opacity: 1 !important; color: rgb(217 217 217 / var(--tw-text-opacity)) !important; } .placeholder\:text-grey::-moz-placeholder { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .placeholder\:text-grey::placeholder { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .placeholder\:text-soft-grey::-moz-placeholder { --tw-text-opacity: 1; color: rgb(217 217 217 / var(--tw-text-opacity)); } .placeholder\:text-soft-grey::placeholder { --tw-text-opacity: 1; color: rgb(217 217 217 / var(--tw-text-opacity)); } .placeholder\:text-text::-moz-placeholder { --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .placeholder\:text-text::placeholder { --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .placeholder\:text-white::-moz-placeholder { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .placeholder\:text-white::placeholder { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .before\:absolute::before { content: var(--tw-content); position: absolute; } .before\:left-0::before { content: var(--tw-content); left: 0px; } .before\:left-2\/4::before { content: var(--tw-content); left: 50%; } .before\:top-1\/2::before { content: var(--tw-content); top: 50%; } .before\:top-2\/4::before { content: var(--tw-content); top: 50%; } .before\:block::before { content: var(--tw-content); display: block; } .before\:\!h-\[10px\]::before { content: var(--tw-content); height: 10px !important; } .before\:h-\[14px\]::before { content: var(--tw-content); height: 14px; } .before\:h-\[3px\]::before { content: var(--tw-content); height: 3px; } .before\:\!w-\[10px\]::before { content: var(--tw-content); width: 10px !important; } .before\:w-\[14px\]::before { content: var(--tw-content); width: 14px; } .before\:w-\[3px\]::before { content: var(--tw-content); width: 3px; } .before\:-translate-x-2\/4::before { content: var(--tw-content); --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .before\:-translate-y-2\/4::before { content: var(--tw-content); --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .before\:translate-y-\[-50\%\]::before { content: var(--tw-content); --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .before\:rounded-full::before { content: var(--tw-content); border-radius: 9999px; } .before\:bg-current::before { content: var(--tw-content); background-color: currentColor; } .before\:transition-colors::before { content: var(--tw-content); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .before\:content-\[\'\'\]::before { --tw-content: ''; content: var(--tw-content); } .after\:absolute::after { content: var(--tw-content); position: absolute; } .after\:left-0::after { content: var(--tw-content); left: 0px; } .after\:top-\[calc\(100\%\+7px\)\]::after { content: var(--tw-content); top: calc(100% + 7px); } .after\:h-\[1px\]::after { content: var(--tw-content); height: 1px; } .after\:w-full::after { content: var(--tw-content); width: 100%; } .after\:bg-grey::after { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .after\:bg-white::after { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .hover\:border-grey:hover { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } .hover\:bg-grey:hover { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .hover\:from-transparent:hover { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:via-white:hover { --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FFFFFF var(--tw-gradient-via-position), var(--tw-gradient-to); } .hover\:fill-grey:hover { fill: #515151; } .hover\:stroke-2:hover { stroke-width: 2; } .hover\:font-semibold:hover { font-weight: 600; } .hover\:text-\[\#D5D5C9\]:hover { --tw-text-opacity: 1; color: rgb(213 213 201 / var(--tw-text-opacity)); } .hover\:text-grey:hover { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .hover\:text-text:hover { --tw-text-opacity: 1; color: rgb(30 30 30 / var(--tw-text-opacity)); } .hover\:text-warning:hover { --tw-text-opacity: 1; color: rgb(229 46 46 / var(--tw-text-opacity)); } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-100:hover { opacity: 1; } .active\:border-grey:active { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .active\:bg-grey:active { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .active\:bg-text:active { --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); } .active\:text-white:active { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .peer:checked~.peer-checked\:visible { visibility: visible; } .peer\/code:checked~.peer-checked\/code\:flex { display: flex; } .peer\/door:checked~.peer-checked\/door\:flex { display: flex; } .peer\/point-selected:checked~.peer-checked\/point-selected\:flex { display: flex; } .peer\/point:checked~.peer-checked\/point\:flex { display: flex; } .peer\/point-selected:checked~.peer-checked\/point-selected\:hidden { display: none; } .peer:checked~.peer-checked\:opacity-100 { opacity: 1; } .peer\/address:focus~.peer-focus\/address\:flex { display: flex; } .peer\/city:focus~.peer-focus\/city\:flex { display: flex; } @media not all and (min-width: 1024px) { .max-lg\:fixed { position: fixed; } .max-lg\:bottom-0 { bottom: 0px; } .max-lg\:left-0 { left: 0px; } .max-lg\:right-0 { right: 0px; } .max-lg\:top-0 { top: 0px; } .max-lg\:\!mx-\[20px\] { margin-left: 20px !important; margin-right: 20px !important; } .max-lg\:mt-0 { margin-top: 0px; } .max-lg\:\!hidden { display: none !important; } .max-lg\:\!h-\[24px\] { height: 24px !important; } .max-lg\:h-screen { height: 100vh; } .max-lg\:\!min-h-\[24px\] { min-height: 24px !important; } .max-lg\:min-h-screen { min-height: 100vh; } .max-lg\:\!w-\[24px\] { width: 24px !important; } .max-lg\:w-\[calc\(100vw-40px\)\] { width: calc(100vw - 40px); } .max-lg\:w-screen { width: 100vw; } .max-lg\:\!min-w-\[24px\] { min-width: 24px !important; } .max-lg\:translate-x-full { --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .max-lg\:rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .max-lg\:items-center { align-items: center; } .max-lg\:\!border-grey { --tw-border-opacity: 1 !important; border-color: rgb(81 81 81 / var(--tw-border-opacity)) !important; } .max-lg\:\!bg-grey { --tw-bg-opacity: 1 !important; background-color: rgb(81 81 81 / var(--tw-bg-opacity)) !important; } .max-lg\:py-0 { padding-top: 0px; padding-bottom: 0px; } .max-lg\:pl-\[20px\] { padding-left: 20px; } .max-lg\:pr-\[70px\] { padding-right: 70px; } .max-lg\:pt-\[21px\] { padding-top: 21px; } .max-lg\:\!text-white { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } } @media not all and (min-width: 768px) { .max-md\:hidden { display: none; } .max-md\:h-\[36px\] { height: 36px; } .max-md\:h-\[44px\] { height: 44px; } .max-md\:items-stretch { align-items: stretch; } .max-md\:border-grey { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .max-md\:bg-transparent { background-color: transparent; } .max-md\:text-start { text-align: start; } .max-md\:text-\[24px\] { font-size: 24px; } .max-md\:text-grey { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .max-md\:active\:bg-grey:active { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .max-md\:active\:text-white:active { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } } @media not all and (min-width: 640px) { .max-sm\:flex { display: flex; } .max-sm\:hidden { display: none; } .max-sm\:\!h-\[36px\] { height: 36px !important; } .max-sm\:w-\[134px\] { width: 134px; } .max-sm\:text-start { text-align: start; } } @media (min-width: 768px) { .md\:visible { visibility: visible; } .md\:absolute { position: absolute; } .md\:relative { position: relative; } .md\:bottom-auto { bottom: auto; } .md\:left-1\/2 { left: 50%; } .md\:left-\[100px\] { left: 100px; } .md\:left-\[20px\] { left: 20px; } .md\:left-\[50\%\] { left: 50%; } .md\:left-auto { left: auto; } .md\:left-full { left: 100%; } .md\:right-auto { right: auto; } .md\:top-0 { top: 0px; } .md\:top-1\/2 { top: 50%; } .md\:top-\[50\%\] { top: 50%; } .md\:top-\[79px\] { top: 79px; } .md\:top-\[86px\] { top: 86px; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:col-start-2 { grid-column-start: 2; } .md\:col-start-4 { grid-column-start: 4; } .md\:mx-0 { margin-left: 0px; margin-right: 0px; } .md\:-mt-\[calc\(107px\/2\)\] { margin-top: calc(calc(107px / 2) * -1); } .md\:mb-\[31px\] { margin-bottom: 31px; } .md\:block { display: block; } .md\:inline-block { display: inline-block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:\!h-\[60vh\] { height: 60vh !important; } .md\:\!h-\[90vh\] { height: 90vh !important; } .md\:\!h-full { height: 100% !important; } .md\:h-\[107px\] { height: 107px; } .md\:h-\[220px\] { height: 220px; } .md\:h-\[30px\] { height: 30px; } .md\:h-\[40px\] { height: 40px; } .md\:h-\[60px\] { height: 60px; } .md\:h-\[65\.65px\] { height: 65.65px; } .md\:h-\[88px\] { height: 88px; } .md\:h-screen { height: 100vh; } .md\:min-h-\[30px\] { min-height: 30px; } .md\:\!w-\[calc\(50vw-10\%\)\] { width: calc(50vw - 10%) !important; } .md\:\!w-full { width: 100% !important; } .md\:w-1\/2 { width: 50%; } .md\:w-\[100px\] { width: 100px; } .md\:w-\[30px\] { width: 30px; } .md\:w-\[40px\] { width: 40px; } .md\:w-\[59\.74px\] { width: 59.74px; } .md\:w-\[85px\] { width: 85px; } .md\:w-fit { width: -moz-fit-content; width: fit-content; } .md\:min-w-\[30px\] { min-width: 30px; } .md\:max-w-\[200px\] { max-width: 200px; } .md\:max-w-\[342px\] { max-width: 342px; } .md\:max-w-\[353px\] { max-width: 353px; } .md\:max-w-\[541px\] { max-width: 541px; } .md\:max-w-\[700px\] { max-width: 700px; } .md\:-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .md\:-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .md\:translate-x-\[-50\%\] { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .md\:translate-y-\[-50\%\] { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .md\:grid-cols-\[2fr_1fr_auto\] { grid-template-columns: 2fr 1fr auto; } .md\:grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:justify-around { justify-content: space-around; } .md\:gap-\[12px\] { gap: 12px; } .md\:gap-\[16px\] { gap: 16px; } .md\:gap-\[20px\] { gap: 20px; } .md\:gap-\[30px\] { gap: 30px; } .md\:gap-\[38px\] { gap: 38px; } .md\:gap-\[52px\] { gap: 52px; } .md\:gap-\[58px\] { gap: 58px; } .md\:gap-\[60px\] { gap: 60px; } .md\:gap-y-\[125px\] { row-gap: 125px; } .md\:gap-y-\[20px\] { row-gap: 20px; } .md\:gap-y-\[40px\] { row-gap: 40px; } .md\:gap-y-\[60px\] { row-gap: 60px; } .md\:gap-y-\[75px\] { row-gap: 75px; } .md\:p-\[30px\] { padding: 30px; } .md\:px-0 { padding-left: 0px; padding-right: 0px; } .md\:px-\[20px\] { padding-left: 20px; padding-right: 20px; } .md\:py-\[19px\] { padding-top: 19px; padding-bottom: 19px; } .md\:py-\[42px\] { padding-top: 42px; padding-bottom: 42px; } .md\:py-\[7px\] { padding-top: 7px; padding-bottom: 7px; } .md\:\!pl-0 { padding-left: 0px !important; } .md\:pl-\[50px\] { padding-left: 50px; } .md\:pl-\[70px\] { padding-left: 70px; } .md\:pr-\[20px\] { padding-right: 20px; } .md\:pr-\[50px\] { padding-right: 50px; } .md\:pt-\[160px\] { padding-top: 160px; } .md\:pt-\[50px\] { padding-top: 50px; } .md\:pt-\[86px\] { padding-top: 86px; } .md\:text-center { text-align: center; } .md\:text-14 { font-size: 14px; } .md\:text-16 { font-size: 16px; } .md\:text-26 { font-size: 26px; } .md\:text-\[18px\] { font-size: 18px; } .md\:text-\[24px\] { font-size: 24px; } .md\:leading-\[16px\] { line-height: 16px; } .md\:leading-\[18\.07px\] { line-height: 18.07px; } .md\:leading-\[24px\] { line-height: 24px; } .md\:leading-\[31\.69px\] { line-height: 31.69px; } .md\:leading-\[32px\] { line-height: 32px; } .md\:tracking-\[0\.05em\] { letter-spacing: 0.05em; } .md\:opacity-100 { opacity: 1; } .md\:backdrop-blur-\[2px\] { --tw-backdrop-blur: blur(2px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .md\:placeholder\:text-14::-moz-placeholder { font-size: 14px; } .md\:placeholder\:text-14::placeholder { font-size: 14px; } .md\:placeholder\:text-\[18px\]::-moz-placeholder { font-size: 18px; } .md\:placeholder\:text-\[18px\]::placeholder { font-size: 18px; } } @media (min-width: 1024px) { .lg\:absolute { position: absolute; } .lg\:relative { position: relative; } .lg\:bottom-\[24px\] { bottom: 24px; } .lg\:bottom-\[50px\] { bottom: 50px; } .lg\:bottom-auto { bottom: auto; } .lg\:left-0 { left: 0px; } .lg\:left-\[100px\] { left: 100px; } .lg\:left-\[19px\] { left: 19px; } .lg\:left-\[24px\] { left: 24px; } .lg\:left-auto { left: auto; } .lg\:right-\[100px\] { right: 100px; } .lg\:right-\[12px\] { right: 12px; } .lg\:right-\[18px\] { right: 18px; } .lg\:right-\[24px\] { right: 24px; } .lg\:right-\[30px\] { right: 30px; } .lg\:top-1\/2 { top: 50%; } .lg\:top-\[100px\] { top: 100px; } .lg\:top-\[12px\] { top: 12px; } .lg\:top-\[193px\] { top: 193px; } .lg\:top-\[200px\] { top: 200px; } .lg\:top-\[20px\] { top: 20px; } .lg\:top-\[24px\] { top: 24px; } .lg\:top-\[40px\] { top: 40px; } .lg\:top-\[42px\] { top: 42px; } .lg\:order-1 { order: 1; } .lg\:order-2 { order: 2; } .lg\:col-span-12 { grid-column: span 12 / span 12; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-start-1 { grid-column-start: 1; } .lg\:col-start-3 { grid-column-start: 3; } .lg\:col-start-6 { grid-column-start: 6; } .lg\:mx-0 { margin-left: 0px; margin-right: 0px; } .lg\:mx-auto { margin-left: auto; margin-right: auto; } .lg\:mb-\[195px\] { margin-bottom: 195px; } .lg\:mb-\[21px\] { margin-bottom: 21px; } .lg\:mb-\[288px\] { margin-bottom: 288px; } .lg\:mb-\[36px\] { margin-bottom: 36px; } .lg\:mb-\[38px\] { margin-bottom: 38px; } .lg\:mb-\[40px\] { margin-bottom: 40px; } .lg\:mb-\[42px\] { margin-bottom: 42px; } .lg\:mb-\[66px\] { margin-bottom: 66px; } .lg\:mb-\[72px\] { margin-bottom: 72px; } .lg\:mr-\[20px\] { margin-right: 20px; } .lg\:mt-\[12px\] { margin-top: 12px; } .lg\:block { display: block; } .lg\:inline-block { display: inline-block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:\!h-\[100px\] { height: 100px !important; } .lg\:h-\[100px\] { height: 100px; } .lg\:h-\[1024px\] { height: 1024px; } .lg\:h-\[125px\] { height: 125px; } .lg\:h-\[127px\] { height: 127px; } .lg\:h-\[28px\] { height: 28px; } .lg\:h-\[30px\] { height: 30px; } .lg\:h-\[32px\] { height: 32px; } .lg\:h-\[360px\] { height: 360px; } .lg\:h-\[40\] { height: 40; } .lg\:h-\[40px\] { height: 40px; } .lg\:h-\[48px\] { height: 48px; } .lg\:h-\[50px\] { height: 50px; } .lg\:h-\[56px\] { height: 56px; } .lg\:h-\[60px\] { height: 60px; } .lg\:h-\[68px\] { height: 68px; } .lg\:h-\[72px\] { height: 72px; } .lg\:h-\[85\] { height: 85; } .lg\:h-fit { height: -moz-fit-content; height: fit-content; } .lg\:h-screen { height: 100vh; } .lg\:max-h-\[28px\] { max-height: 28px; } .lg\:min-h-\[540px\] { min-height: 540px; } .lg\:min-h-\[614px\] { min-height: 614px; } .lg\:\!w-\[100px\] { width: 100px !important; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-\[122px\] { width: 122px; } .lg\:w-\[125px\] { width: 125px; } .lg\:w-\[17\.5px\] { width: 17.5px; } .lg\:w-\[270px\] { width: 270px; } .lg\:w-\[28px\] { width: 28px; } .lg\:w-\[30px\] { width: 30px; } .lg\:w-\[32px\] { width: 32px; } .lg\:w-\[40px\] { width: 40px; } .lg\:w-\[560px\] { width: 560px; } .lg\:w-\[60px\] { width: 60px; } .lg\:w-\[68px\] { width: 68px; } .lg\:w-\[72px\] { width: 72px; } .lg\:w-\[850px\] { width: 850px; } .lg\:w-\[90px\] { width: 90px; } .lg\:w-\[91px\] { width: 91px; } .lg\:w-auto { width: auto; } .lg\:w-full { width: 100%; } .lg\:min-w-\[177px\] { min-width: 177px; } .lg\:min-w-\[370px\] { min-width: 370px; } .lg\:min-w-\[420px\] { min-width: 420px; } .lg\:min-w-\[500px\] { min-width: 500px; } .lg\:min-w-\[660px\] { min-width: 660px; } .lg\:min-w-\[705px\] { min-width: 705px; } .lg\:max-w-\[1480px\] { max-width: 1480px; } .lg\:max-w-\[371px\] { max-width: 371px; } .lg\:max-w-\[405px\] { max-width: 405px; } .lg\:max-w-\[61px\] { max-width: 61px; } .lg\:max-w-\[630px\] { max-width: 630px; } .lg\:max-w-\[700px\] { max-width: 700px; } .lg\:max-w-\[85\.18\%\] { max-width: 85.18%; } .lg\:max-w-\[91px\] { max-width: 91px; } .lg\:flex-1 { flex: 1 1 0%; } .lg\:flex-auto { flex: 1 1 auto; } .lg\:translate-x-\[20px\] { --tw-translate-x: 20px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .lg\:translate-x-\[52px\] { --tw-translate-x: 52px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .lg\:translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:grid-cols-\[125px_1fr_1fr_1fr_1fr_1fr_1fr\] { grid-template-columns: 125px 1fr 1fr 1fr 1fr 1fr 1fr; } .lg\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .lg\:grid-cols-\[2fr_1fr\] { grid-template-columns: 2fr 1fr; } .lg\:grid-cols-\[3fr_1fr_auto\] { grid-template-columns: 3fr 1fr auto; } .lg\:grid-cols-\[74\.7095\%_auto\] { grid-template-columns: 74.7095% auto; } .lg\:grid-cols-\[auto_minmax\(0\2c 372px\)_auto\] { grid-template-columns: auto minmax(0, 372px) auto; } .lg\:flex-row { flex-direction: row; } .lg\:flex-col { flex-direction: column; } .lg\:items-start { align-items: flex-start; } .lg\:items-center { align-items: center; } .lg\:items-stretch { align-items: stretch; } .lg\:gap-0 { gap: 0px; } .lg\:gap-\[100px\] { gap: 100px; } .lg\:gap-\[11px\] { gap: 11px; } .lg\:gap-\[12px\] { gap: 12px; } .lg\:gap-\[14px\] { gap: 14px; } .lg\:gap-\[165px\] { gap: 165px; } .lg\:gap-\[16px\] { gap: 16px; } .lg\:gap-\[19px\] { gap: 19px; } .lg\:gap-\[20px\] { gap: 20px; } .lg\:gap-\[21px\] { gap: 21px; } .lg\:gap-\[22px\] { gap: 22px; } .lg\:gap-\[23px\] { gap: 23px; } .lg\:gap-\[24px\] { gap: 24px; } .lg\:gap-\[30px\] { gap: 30px; } .lg\:gap-\[38px\] { gap: 38px; } .lg\:gap-\[40px\] { gap: 40px; } .lg\:gap-\[42px\] { gap: 42px; } .lg\:gap-\[50px\] { gap: 50px; } .lg\:gap-\[53px\] { gap: 53px; } .lg\:gap-\[56px\] { gap: 56px; } .lg\:gap-\[57px\] { gap: 57px; } .lg\:gap-\[60px\] { gap: 60px; } .lg\:gap-\[64px\] { gap: 64px; } .lg\:gap-\[70px\] { gap: 70px; } .lg\:gap-\[71px\] { gap: 71px; } .lg\:gap-\[72px\] { gap: 72px; } .lg\:gap-\[80px\] { gap: 80px; } .lg\:gap-x-\[32px\] { -moz-column-gap: 32px; column-gap: 32px; } .lg\:gap-x-\[38px\] { -moz-column-gap: 38px; column-gap: 38px; } .lg\:gap-y-\[10px\] { row-gap: 10px; } .lg\:gap-y-\[127px\] { row-gap: 127px; } .lg\:gap-y-\[14px\] { row-gap: 14px; } .lg\:gap-y-\[22px\] { row-gap: 22px; } .lg\:gap-y-\[56px\] { row-gap: 56px; } .lg\:gap-y-\[60px\] { row-gap: 60px; } .lg\:gap-y-\[69px\] { row-gap: 69px; } .lg\:gap-y-\[71px\] { row-gap: 71px; } .lg\:\!border-grey { --tw-border-opacity: 1 !important; border-color: rgb(81 81 81 / var(--tw-border-opacity)) !important; } .lg\:border-soft-grey { --tw-border-opacity: 1; border-color: rgb(217 217 217 / var(--tw-border-opacity)); } .lg\:\!bg-grey { --tw-bg-opacity: 1 !important; background-color: rgb(81 81 81 / var(--tw-bg-opacity)) !important; } .lg\:\!bg-transparent { background-color: transparent !important; } .lg\:bg-grey-sale\/20 { background-color: rgb(213 213 201 / 0.2); } .lg\:bg-transparent { background-color: transparent; } .lg\:\!stroke-\[0\.5\] { stroke-width: 0.5 !important; } .lg\:p-0 { padding: 0px; } .lg\:p-\[20px\] { padding: 20px; } .lg\:p-\[30px\] { padding: 30px; } .lg\:p-\[60px\] { padding: 60px; } .lg\:px-\[100px\] { padding-left: 100px; padding-right: 100px; } .lg\:px-\[10px\] { padding-left: 10px; padding-right: 10px; } .lg\:px-\[12px\] { padding-left: 12px; padding-right: 12px; } .lg\:px-\[24px\] { padding-left: 24px; padding-right: 24px; } .lg\:px-\[27px\] { padding-left: 27px; padding-right: 27px; } .lg\:px-\[28px\] { padding-left: 28px; padding-right: 28px; } .lg\:px-\[30px\] { padding-left: 30px; padding-right: 30px; } .lg\:px-\[31px\] { padding-left: 31px; padding-right: 31px; } .lg\:px-\[32px\] { padding-left: 32px; padding-right: 32px; } .lg\:px-\[34px\] { padding-left: 34px; padding-right: 34px; } .lg\:px-\[44px\] { padding-left: 44px; padding-right: 44px; } .lg\:px-\[51px\] { padding-left: 51px; padding-right: 51px; } .lg\:px-\[52px\] { padding-left: 52px; padding-right: 52px; } .lg\:px-\[59px\] { padding-left: 59px; padding-right: 59px; } .lg\:px-\[6px\] { padding-left: 6px; padding-right: 6px; } .lg\:px-\[78px\] { padding-left: 78px; padding-right: 78px; } .lg\:py-\[10px\] { padding-top: 10px; padding-bottom: 10px; } .lg\:py-\[18px\] { padding-top: 18px; padding-bottom: 18px; } .lg\:py-\[24px\] { padding-top: 24px; padding-bottom: 24px; } .lg\:py-\[27px\] { padding-top: 27px; padding-bottom: 27px; } .lg\:py-\[34px\] { padding-top: 34px; padding-bottom: 34px; } .lg\:py-\[35px\] { padding-top: 35px; padding-bottom: 35px; } .lg\:py-\[40px\] { padding-top: 40px; padding-bottom: 40px; } .lg\:py-\[5px\] { padding-top: 5px; padding-bottom: 5px; } .lg\:py-\[68px\] { padding-top: 68px; padding-bottom: 68px; } .lg\:py-\[9px\] { padding-top: 9px; padding-bottom: 9px; } .lg\:pb-\[100px\] { padding-bottom: 100px; } .lg\:pb-\[120px\] { padding-bottom: 120px; } .lg\:pb-\[200px\] { padding-bottom: 200px; } .lg\:pb-\[24px\] { padding-bottom: 24px; } .lg\:pb-\[53px\] { padding-bottom: 53px; } .lg\:pb-\[72px\] { padding-bottom: 72px; } .lg\:pl-0 { padding-left: 0px; } .lg\:pl-\[100px\] { padding-left: 100px; } .lg\:pl-\[145px\] { padding-left: 145px; } .lg\:pl-\[50px\] { padding-left: 50px; } .lg\:pl-\[65px\] { padding-left: 65px; } .lg\:pr-0 { padding-right: 0px; } .lg\:pr-\[100px\] { padding-right: 100px; } .lg\:pr-\[50px\] { padding-right: 50px; } .lg\:pr-\[70px\] { padding-right: 70px; } .lg\:pr-\[80px\] { padding-right: 80px; } .lg\:pr-\[90px\] { padding-right: 90px; } .lg\:pr-\[93px\] { padding-right: 93px; } .lg\:pt-\[100px\] { padding-top: 100px; } .lg\:pt-\[118px\] { padding-top: 118px; } .lg\:pt-\[150px\] { padding-top: 150px; } .lg\:pt-\[63px\] { padding-top: 63px; } .lg\:\!text-20 { font-size: 20px !important; } .lg\:\!text-26 { font-size: 26px !important; } .lg\:\!text-\[18px\] { font-size: 18px !important; } .lg\:text-14 { font-size: 14px; } .lg\:text-16 { font-size: 16px; } .lg\:text-20 { font-size: 20px; } .lg\:text-26 { font-size: 26px; } .lg\:text-40 { font-size: 40px; } .lg\:text-\[12px\] { font-size: 12px; } .lg\:text-\[15px\] { font-size: 15px; } .lg\:text-\[28px\] { font-size: 28px; } .lg\:text-\[32px\] { font-size: 32px; } .lg\:font-normal { font-weight: 400; } .lg\:normal-case { text-transform: none; } .lg\:\!leading-\[24\.38px\] { line-height: 24.38px !important; } .lg\:\!leading-\[31\.69px\] { line-height: 31.69px !important; } .lg\:leading-\[17\.07px\] { line-height: 17.07px; } .lg\:leading-\[18px\] { line-height: 18px; } .lg\:leading-\[21\.07px\] { line-height: 21.07px; } .lg\:leading-\[21px\] { line-height: 21px; } .lg\:leading-\[24\.38px\] { line-height: 24.38px; } .lg\:leading-\[31\.69px\] { line-height: 31.69px; } .lg\:leading-\[32px\] { line-height: 32px; } .lg\:leading-\[34\.52px\] { line-height: 34.52px; } .lg\:leading-\[36px\] { line-height: 36px; } .lg\:leading-\[39\.01px\] { line-height: 39.01px; } .lg\:leading-\[48\.76px\] { line-height: 48.76px; } .lg\:tracking-\[0\.05em\] { letter-spacing: 0.05em; } .lg\:\!text-grey { --tw-text-opacity: 1 !important; color: rgb(81 81 81 / var(--tw-text-opacity)) !important; } .lg\:\!text-white { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } .lg\:text-grey { --tw-text-opacity: 1; color: rgb(81 81 81 / var(--tw-text-opacity)); } .lg\:transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .lg\:placeholder\:text-16::-moz-placeholder { font-size: 16px; } .lg\:placeholder\:text-16::placeholder { font-size: 16px; } .lg\:hover\:\!bg-grey:hover { --tw-bg-opacity: 1 !important; background-color: rgb(81 81 81 / var(--tw-bg-opacity)) !important; } .lg\:hover\:\!text-white:hover { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } .lg\:active\:\!bg-text:active { --tw-bg-opacity: 1 !important; background-color: rgb(30 30 30 / var(--tw-bg-opacity)) !important; } } @media (min-width: 1280px) { .xl\:h-\[105px\] { height: 105px; } .xl\:h-\[32px\] { height: 32px; } .xl\:h-\[40px\] { height: 40px; } .xl\:h-\[48px\] { height: 48px; } .xl\:h-\[50px\] { height: 50px; } .xl\:w-\[110px\] { width: 110px; } .xl\:w-\[32px\] { width: 32px; } .xl\:w-\[40px\] { width: 40px; } .xl\:w-\[48px\] { width: 48px; } .xl\:w-\[50px\] { width: 50px; } .xl\:max-w-\[605px\] { max-width: 605px; } .xl\:gap-\[100px\] { gap: 100px; } .xl\:gap-\[124px\] { gap: 124px; } .xl\:px-\[10px\] { padding-left: 10px; padding-right: 10px; } .xl\:py-\[15px\] { padding-top: 15px; padding-bottom: 15px; } .xl\:py-\[20px\] { padding-top: 20px; padding-bottom: 20px; } .xl\:pr-\[100px\] { padding-right: 100px; } .xl\:pt-\[200px\] { padding-top: 200px; } .xl\:text-16 { font-size: 16px; } .xl\:text-20 { font-size: 20px; } .xl\:text-32 { font-size: 32px; } .xl\:text-\[28px\] { font-size: 28px; } .xl\:leading-\[21\.07px\] { line-height: 21.07px; } .xl\:leading-\[28\.38px\] { line-height: 28.38px; } .xl\:leading-\[32px\] { line-height: 32px; } .xl\:leading-\[39\.01px\] { line-height: 39.01px; } .xl\:leading-\[44\.76px\] { line-height: 44.76px; } } @media (min-width: 1536px) { .\32xl\:h-\[127px\] { height: 127px; } .\32xl\:h-\[40px\] { height: 40px; } .\32xl\:h-\[60px\] { height: 60px; } .\32xl\:h-\[76px\] { height: 76px; } .\32xl\:w-\[122px\] { width: 122px; } .\32xl\:w-\[40px\] { width: 40px; } .\32xl\:w-\[60px\] { width: 60px; } .\32xl\:max-w-\[805px\] { max-width: 805px; } .\32xl\:gap-\[150px\] { gap: 150px; } .\32xl\:gap-\[165px\] { gap: 165px; } .\32xl\:gap-\[30px\] { gap: 30px; } .\32xl\:text-20 { font-size: 20px; } .\32xl\:text-26 { font-size: 26px; } .\32xl\:text-32 { font-size: 32px; } .\32xl\:text-40 { font-size: 40px; } .\32xl\:leading-\[24\.38px\] { line-height: 24.38px; } .\32xl\:leading-\[31\.69px\] { line-height: 31.69px; } .\32xl\:leading-\[32px\] { line-height: 32px; } .\32xl\:leading-\[48\.76px\] { line-height: 48.76px; } } @media (min-width: 1780px) { .\33xl\:-mt-\[calc\(290px\/2\)\] { margin-top: calc(calc(290px / 2) * -1); } .\33xl\:h-\[290px\] { height: 290px; } .\33xl\:h-\[40px\] { height: 40px; } .\33xl\:h-\[60px\] { height: 60px; } .\33xl\:h-\[67px\] { height: 67px; } .\33xl\:w-\[270px\] { width: 270px; } .\33xl\:w-\[40px\] { width: 40px; } .\33xl\:w-\[60px\] { width: 60px; } .\33xl\:w-\[67px\] { width: 67px; } .\33xl\:py-\[30px\] { padding-top: 30px; padding-bottom: 30px; } } @media (prefers-color-scheme: dark) { .dark\:bg-gray-800 { --tw-bg-opacity: 1; background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } .dark\:text-gray-200 { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); } } .peer:checked~.peer-checked\:\[\&\>div\:first-child\]\:animate-none>div:first-child { animation: none; } .peer\/point:checked~.peer-checked\/point\:\[\&\>label\:first-child\]\:border-grey>label:first-child { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .peer\/point:checked~.peer-checked\/point\:\[\&\>label\:first-child\]\:bg-grey>label:first-child { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .peer\/point:checked~.peer-checked\/point\:\[\&\>label\:nth-child\(1\)\]\:text-white>label:nth-child(1) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .peer\/door:checked~.peer-checked\/door\:\[\&\>label\:nth-child\(2\)\]\:border-grey>label:nth-child(2) { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .peer\/door:checked~.peer-checked\/door\:\[\&\>label\:nth-child\(2\)\]\:bg-grey>label:nth-child(2) { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .peer\/door:checked~.peer-checked\/door\:\[\&\>label\:nth-child\(2\)\]\:text-white>label:nth-child(2) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .peer\/pickup:checked~.peer-checked\/pickup\:\[\&\>label\:nth-child\(3\)\]\:border-grey>label:nth-child(3) { --tw-border-opacity: 1; border-color: rgb(81 81 81 / var(--tw-border-opacity)); } .peer\/pickup:checked~.peer-checked\/pickup\:\[\&\>label\:nth-child\(3\)\]\:bg-grey>label:nth-child(3) { --tw-bg-opacity: 1; background-color: rgb(81 81 81 / var(--tw-bg-opacity)); } .peer\/pickup:checked~.peer-checked\/pickup\:\[\&\>label\:nth-child\(3\)\]\:text-white>label:nth-child(3) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .swiper-pagination-intro { position: absolute; left: 0; bottom: 30px !important; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-align: center; z-index: 10; } .intro-carousel { position: relative; } .intro-carousel .swiper-slide { position: relative; overflow: hidden; } .intro-carousel video { position: absolute; top: 50%; left: 50%; display: block; max-width: none; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } .swiper-pagination-intro .swiper-pagination-bullet { pointer-events: auto; margin-left: 0px !important; margin-right: 0px !important; height: 8px; width: 8px; border-radius: 9999px; background-color: #000; transition: all .3s ease-in-out; } .swiper-pagination-intro .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 28px; } .filters-modal .lg\:top-\[100px\] { top: 80px; height: calc(100% - 80px); overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .filters-modal .lg\:top-\[100px\]::-webkit-scrollbar { display: none; } .filters-modal .heading-2 { padding-right: 50px; } .filters-modal .modal-close svg { fill: #1E1E1E; } .filters-modal .py-\[16px\] { padding-top: 10px; padding-bottom: 10px; } #register-form { overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } #register-form::-webkit-scrollbar { display: none; } /* #added-to-basket .h-\[100px\] { height: 200px; justify-content: center; } #added-to-basket.added-to-basket .h-\[100px\] { height: 100px; } */ #added-to-basket { width: 393px; white-space: nowrap; } .order-prof-entry { height: 100%; } .order-prof-btns { flex-wrap: nowrap; margin-top: auto; flex: 0; column-gap: 0; justify-content: space-between; } .order-prof-btns .heading-button { height: 56px; } .basket-page { grid-template-columns: 1fr 270px; gap: 165px; } .cart__list-item { grid-template-columns: 125px 1fr 125px 1fr 125px; gap: 10px 20px; } .cart__list-item__price-numb { gap: 20px; } .cart__list-item__image { height: 100px; } .cart__list-item__image img { height: 100%; } .map:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: #D5D5C9; content: ''; z-index: 1; } .map iframe { opacity: .7; z-index: 2; } .map .bg-white { z-index: 3; } .description-prev { height: 50px; } .description-prev { position: relative; margin-bottom: 20px; height: 63px; overflow: hidden; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .is-open .description-prev { height: auto; } .cart__list-item__content .info { order: 3; } .cart__list-item__content .info:last-child { order: 2; } .cart__list-item__content .info__item { display: inline-block; text-transform: lowercase; } .cart__actions { display: flex; } .cart__actions a.flex { width: 34.2% !important; } .cart__actions a.flex:last-child { width: calc(100% - 34.2% - 20px) !important; } @media (max-width: 1700px) { .basket-page { gap: 40px; } .cart__list-item__amount { gap: 5px; } .cart__list-item__amount input { width: 100%; } .amount-btn.w-\[24px\] { min-width: 24px; } } @media (max-width: 1280px) { .order-prof { padding: 40px 30px; } .basket-page { gap: 30px; } .cart__list-item { grid-template-columns: 100px 1fr 65px 1fr 80px; } .cart__list-item__image { height: 100px; } } @media (max-width: 1024px) { .filters-modal .md\:left-auto { left: 0; } .filters-modal .lg\:top-\[40px\] { top: 45px; } .filters-modal .md\:pl-\[70px\] { padding-left: 30px; } .product-slider__arrows { display: flex; } .product-slider__arrows button { width: 40px; height: 40px; } .order-prof-btns { column-gap: 20px; justify-content: start; } .basket-page { gap: 20px; } .cart__list-item { grid-template-columns: repeat(8, 1fr); } .cart__list-item__image { grid-column: span 2; } .cart__list-item__content { grid-column: span 6; grid-row: span 2; } .cart__list-item__actions { grid-column: span 2; grid-row: span 2; padding-left: 12px; padding-right: 12px; } .cart__list-item__price-numb { grid-column: span 6; padding-top: 15px; } } @media (max-width: 768px) { .filters-modal .lg\:top-\[100px\] { top: 0; height: 100%; padding-bottom: 50px; } .filters-modal .lg\:top-\[40px\] { top: 20px; } .filters-modal .gap-\[42px\] { gap: 0; } .filters-modal__btns.md\:left-auto { left: 20px; right: 20px; } .filters-modal__btns.absolute { position: fixed; } .product-slider__arrows button { width: 30px; height: 30px; } .basket-page { grid-template-columns: 1fr; gap: 40px; } .cart__content .divider { display: none; } .cart__results { padding-top: 25px; } .cart__list-item { padding-bottom: 20px; border-bottom: 1px solid #d9d9d9 } .cart__list-item__image { height: calc(100vw / 5); } .cart__list-item__actions svg { width: 16px; height: 16px; } .cart-like__title { padding-right: 40px; } } @media (max-width: 600px) { .intro-carousel video { height: 100%; } } .profile-menu { display: flex; flex-direction: column; gap: 27px; padding: 32px 27px; background-color: #f7f7f4; font-size: 20px; font-weight: 300; line-height: 24px; color: #515151; } .checkout-content .profile-menu { margin-top: 82px; } .profile-menu a { color: #515151; text-decoration: none; } .profile-menu a:hover { color: #000; } .profile-menu .active { font-weight: 500; } .personal-order { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .personal-order__list { grid-column: span 4; } .personal-order__menu { grid-column: span 2; } .s-head-order .heading-1 { padding-top: 5px; } .s-head-order .s-btn-back { margin-right: 10px; } .s-btn-back { display: flex; align-items: center; justify-content: center; width: 88px; height: 48px; border: 1px solid #515151; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .s-btn-back svg { display: block; width: 24px; height: 24px; } .s-btn-back path { stroke: #515151; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); } .s-btn-back:hover { background-color: #515151; } .s-btn-back:hover path { stroke: #f7f7f4; } .s-info-pay { align-items: flex-end; } .s-btns-pay { display: flex; flex-wrap: nowrap; gap: 20px; } .checkout-content { gap: 40px; } .checkout-results { width: 560px; } .bx-soa-section-content .md\:grid-cols-3 { grid-template-columns: repeat(2, 1fr); } #bx-soa-basket .heading-body { gap: 7px 20px; } #bx-soa-basket .heading-body>div:last-child { text-wrap: nowrap; } .sale_order_full_table a { color: #000; text-decoration: underline; } .sale_order_full_table a:hover { color: #333; text-decoration: none; } .tabs__content .lg\:min-w-\[705px\] { min-width: 100px; } .gift-modal-btn { display: flex; justify-content: center; margin-bottom: 30px; } .modal-close { margin-top: 2px; } .filters-modal .bg-white.md\:w-fit { max-width: 443px; } .catalog-element-main-grid .heading-body { padding-bottom: 10px; } .bx-soa-section .heading-body>*, #bx-soa-total .heading-4>*, .bx-soa-cart-total .heading-body>* { width: calc(100% - 150px - 30px); } .bx-soa-section .heading-body>*:last-child, #bx-soa-total .heading-4>*:last-child, .bx-soa-cart-total .heading-body>*:last-child { width: 150px; } .bx-soa-coupon { gap: 0; } .bx-soa-coupon-label { padding-bottom: 40px; } .bx-soa-coupon-block { height: 26px; } .bx-soa-coupon-block:after { top: auto; bottom: -1px; } .checkout-content__left, .profile-page .checkout-form { max-width: 995px; gap: 0; } .checkout-content__left>*:not(#bx-soa-main-notifications), #bx-soa-main-notifications .alert, .profile-page .checkout-form>* { margin-bottom: 64px; } .checkout-content .text-input { font-weight: 400; } .tabs__content:not(.contact-page)>*:first-child:not(.w-full) { max-width: 850px; min-width: 49.45%; } .tabs__content:not(.contact-page)>*:last-child:not(.w-full) { min-width: 41%; } .tabs__content>.lg\:h-\[1024px\] { height: calc(1720px / 1.65) !important; max-height: 1043px !important; } .tabs__content svg.w-\[60px\] { margin-left: 32px; } .page-job__img { height: calc(1720px / 2.1) !important; max-height: 819px !important; } #SDEK_pvz, #SDEK_map { width: 100% !important; } .page-404 { height: 569px; background-position: center center; background-size: cover; } .tabs__content .lg\:h-\[1024px\] { height: auto; } .modile-section { display: none; } .catalog-element-main-grid { grid-template-columns: 805px 850px; } .catalog-element-main-grid__img { max-width: none; } .catalog-element-main-grid img.h-full { width: 100%; max-height: 822px; } .profile-img { padding-right: 120px; min-height: 393px; } .catalog-items__grid { row-gap: 30px; } .catalog-item:not(.big) { height: calc(((1720px / 4) * 1.4) + 30px); } .catalog-item__image { display: flex; flex: 1 1 0%; height: calc((((1720px / 4) * 1.4) + 25px) / 1.24); } /* .product-slider .catalog-item:not(.big) { height: calc(((1720px / 2) * 1.4) + 30px); } .product-slider .catalog-item__image { height: calc((((1720px / 2) * 1.4) + 25px) / 1.24); } */ .catalog-item__image img { display: block; width: 100%; max-width: 100%; min-height: 100%; object-fit: cover; } .big .catalog-item__image { height: calc(((1720px / 2) * 1.4) - 35px); } .cart__banner .flex { background: linear-gradient(to bottom, rgba(69, 70, 67, 1) 0%, rgba(69, 70, 67, 0) 100%); } .delivery-massage-order { display: flex; gap: 20px; padding: 20px; background: #e8e8e8; font-size: 16px; line-height: 21px; color: #1e1e1e1; } .delivery-massage-order svg { display: block; width: 60px; min-width: 60px; height: 60px; } @media (max-width: 1780px) { .tabs__content>.lg\:h-\[1024px\] { height: calc(1200px / 1.65) !important; } .page-job__img { height: calc(1200px / 2.1) !important; } .catalog-element-main-grid { grid-template-columns: 805px 1fr; } .catalog-item:not(.big) { height: calc(((1200px / 4) * 1.4) + 71px); } .big .catalog-item__image { height: calc(((1200px / 2) * 1.4) + 34px); } .catalog-item__image { height: calc((((1200px / 4) * 1.4) + 18px) / 1.24); } } @media (max-width: 1700px) { .tabs__content.lg\:gap-\[165px\] { gap: 50px; } .tabs__content .lg\:py-\[68px\] { padding-left: 30px; padding-right: 30px; } .catalog-element-main-grid { grid-template-columns: 42% 1fr; } /* .big .catalog-item__image { height: calc((1200px / 2) + 32px); } */ } @media (max-width: 1320px) { .checkout-results { width: 460px; } .s-info-pay { flex-direction: column; align-items: flex-start; gap: 20px; } .img-text-slider.md\:left-\[100px\] { left: 30px; } } @media (max-width: 1280px) { .checkout-content { gap: 30px; } .checkout-results { width: 400px; } .profile-img { padding-right: 27px; } } @media (max-width: 1239px) { .tabs__content>.lg\:h-\[1024px\] { height: calc(100vw / 1.65) !important; } .page-job__img { height: calc(100vw / 2.1) !important; } .catalog-item:not(.big) { height: calc(((100vw / 4) * 1.4) + 50px); } .big .catalog-item__image { height: calc((((100vw - 40px) / 2) * 1.4) + 32px); } .catalog-item__image { height: calc((((100vw - 40px) / 4) * 1.4) - 62px); } } @media (max-width: 1023px) { .personal-order { grid-template-columns: repeat(2, 1fr); padding-top: 110px; position: relative; margin-top: 80px; } .personal-order__list { grid-column: span 2; } .checkout-content { position: relative; padding-top: 0; } .profile-menu { position: absolute; top: -80px; left: 20px; right: 20px; padding: 17px 20px; font-size: 16px; letter-spacing: 2px; border: 1px solid #515151; cursor: pointer; } .personal-order--detail .profile-menu { left: 0; right: 0; } .profile-menu:after { position: absolute; top: 20px; right: 20px; display: block; width: 10px; height: 10px; border-left: 1px solid #515151; border-bottom: 1px solid #515151; transform: rotate(-45deg); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); content: ''; } .profile-menu .active { order: 1; } .profile-menu li:not(.active) { display: none; order: 2; } .profile-menu__title { font-weight: 300; } .profile-menu.is-open:after { top: 23px; transform: rotate(135deg); } .profile-menu.is-open li:not(.active) { display: block; } .s-head-order { display: grid; grid-template-columns: 60px 1fr; gap: 4px 25px; } .s-head-order .heading-1 { padding-top: 0; } .s-btn-back { margin-top: 3px; margin-right: 0; width: 60px; grid-row: span 2; } .checkout-results { width: calc(100% + 40px); } .bx-soa-pp-company { height: 100%; } .modal-close { margin-top: 1px; } .checkbox__label { gap: 12px; } .checkbox__input { width: 14px; min-width: 14px; height: 14px; } .checkout-content__left>*:not(#bx-soa-main-notifications), #bx-soa-main-notifications .alert, .profile-page .checkout-form>* { margin-bottom: 20px; } .checkout-content__left .gap-\[20px\] { gap: 12px; } .bx-soa-section-content .heading-4 { font-weight: 400; } .bx-soa-pp-company.py-\[20px\] { padding-top: 19px; padding-bottom: 18px; } #auth-modal .modal-close .text-small { padding-top: 1px; font-size: 10px; line-height: 25px; } .profile-page { padding-top: 230px; } .personal-order { padding-top: 140px; } .profile-page.is-open { padding-top: 80px; } .personal-order.is-open { padding-top: 10px; } .order-prof-btns .heading-button { height: 36px; } .catalog-items .gap-\[120px\] { gap: 40px; } .tabs__content svg.w-\[60px\] { margin-left: 0; } .tabs__content .gap-\[12px\] { gap: 6px; } .tabs__content .gap-\[20px\]:has(.button-outline-2) { gap: 12px; } .button-outline-2 { height: 44px; } .main:has(.contact-page) { padding-bottom: 10px; } .catalog-item:not(.big) { height: calc(((100vw / 4) * 1.4) + 40px); } .catalog-item__image { height: calc((((100vw - 40px) / 4) * 1.4) - 52px); } } @media (max-width: 767px) { .min-h-screen { min-height: 100px; } .profile-menu { padding-top: 11px; padding-bottom: 11px; } .profile-menu:after { top: 15px; } .profile-menu.is-open:after { top: 18px; } .catalog-item.big .catalog-item__button { bottom: -10px; right: 30px; width: 59px; height: 59px; } .catalog-item.big .catalog-item__button svg { width: 28px; height: 28px; } .catalog-item .heading-body { min-height: 10px; } .accordion__input:checked+.accordion__content { padding-bottom: 15px; } #added-to-basket { width: 323px; } .bx-soa-section .heading-body>*, #bx-soa-total .heading-4>*, .bx-soa-cart-total .heading-body>* { width: calc(100% - 110px - 20px); } .bx-soa-section .heading-body>*:last-child, #bx-soa-total .heading-4>*:last-child, .bx-soa-cart-total .heading-body>*:last-child { width: 110px; } .bx-soa-coupon-label { padding-bottom: 30px; } .page-404 { padding: 30px; height: calc(100vw / 1.2); } .page-404__title { max-width: 185px; } .page-404__txt { font-size: 20px; line-height: 24px; } .modile-section { display: flex; } .desktop-section { display: none; } .catalog-item__content .heading-body { order: 3; } .catalog-item:not(.big) { height: auto; } .catalog-item.big .catalog-item__image { height: calc(100vw * 1.23); } .catalog-element-main-grid { grid-template-columns: 1fr; } .catalog-element-main-grid img.h-full { max-height: none; } .profile-img { padding-right: 100px; min-height: 296px; } .tabs__content>.lg\:h-\[1024px\] { height: calc(100vw * 1.11) !important; } .page-job__img { height: calc(100vw * 1.11) !important; } .categories-carousel .button-outline { top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transform: none; } .categories-carousel .button-outline .heading-button { display: none; } .main-home { gap: 30px; } .catalog-item__image { height: calc(((100vw / 2) - 10px) * 1.4); } } @media (max-width: 400px) { .bx-soa-section-content .md\:grid-cols-3 { grid-template-columns: 1fr; } .page-404 { align-items: flex-start; } } .smart-filter-form>.flex { text-transform: lowercase; } .categories-carousel__prev:hover, .categories-carousel__next:hover { opacity: .5; } #bx-soa-orderSave.grid-cols-3 { grid-template-columns: 240px 1fr; } .s-btn-order .button-outline-2 { margin-bottom: 15px; } .s-btn-order .button-outline-2:hover { background-color: #515151 !important; color: #fff !important; } @media (max-width: 767px) { #bx-soa-orderSave.grid-cols-3 { grid-template-columns: 69px 1fr; } } @media (max-width: 600px) { #bx-soa-orderSave.grid-cols-3 { grid-template-columns: 69px 1fr; } } /* input[type="date"] { position: relative; } input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; } */ .s-date-order { display: flex; flex-direction: column; position: relative; } .s-date-order .text-input { position: relative; z-index: 1; } /* .s-date-order .text-input:focus ~ .s-date-order__txt { display: none; } */ .s-date-order__txt { position: absolute; top: 50%; right: 20px; font-size: 16px; line-height: 21px; color: #515151; letter-spacing: 2px; opacity: .5; transform: translate(0, -50%); z-index: 2; } .s-date-order .soa-property-container { display: none; } @media (max-width: 1759px) { .s-date-order { gap: 6px; } .s-date-order .text-input { order: 2; } .s-date-order__txt { position: relative; top: 0; right: auto; transform: translate(0, 0); font-size: 14px; line-height: 18px; order: 1; } } @media (max-width: 1023px) { .s-date-order__txt { position: absolute; top: 50%; right: 20px; transform: translate(0, -50%); } } @media (max-width: 767px) { .s-date-order__txt { position: relative; top: 0; right: auto; transform: translate(0, 0); font-size: 10px; } } /* #SDEK_map:has([style="width: 580px; height: 500px;"]) { position: relative; left: 190px !important; } #SDEK_map:has([style="width: 580px; height: 500px;"]) .ymaps-2-1-79-controls__control { left: calc(100% - 220px) !important; } #SDEK_map:has([style="width: 580px; height: 500px;"]) .ymaps-2-1-79-copyrights-pane { display: none; } */ #SDEK_map { padding-top: 10px; } .ymaps-2-1-79-controls__toolbar { right: 0 !important; } #SDEK_head { position: relative; } #SDEK_info { height: auto; } .SDEK_all-items { display: none; } #SDEK_PvzList_button { display: block; background: url("/bitrix/images/ipol.sdek/widjet/pvzListButton.png") 0 0 no-repeat; position: absolute; width: 24px; height: 23px; top: 15px; right: 75px; cursor: pointer; } .ymaps-2-1-79-controls__toolbar { top: 0 !important; } .ymaps-2-1-79-searchbox__normal-layout { width: 300px !important; } @media screen and (max-width: 699px) { #SDEK_map { padding-top: 35px !important; } } /* about */ .s-about-page { position: relative; background: center bottom url('/local/templates/new_magic/layout/dist/../public/images/about/about-main.jpg') no-repeat; background-size: cover; overflow: hidden; } .s-about-page-nav.container{ margin-bottom: 80px; } .s-about-page .container { position: relative; display: flex; flex-direction: column; padding-top: 99px; padding-bottom: 171px; height: 3449px; z-index: 2; } .s-about-entry { display: flex; flex-direction: column; gap: 80px; max-width: 705px; font-size: 16px; line-height: 21px; letter-spacing: 2px; color: #515151; } .s-about-entry__tit { position: relative; width: 100%; } .s-about-entry__tit img, .s-about-entry__tit svg { display: block; width: 100%; height: auto; } .s-about-entry p {} .s-about-logo { position: relative; height: 544px; } .s-about-logo__logo { position: absolute; top: 50%; left: calc((50% + 50vw) - 71%); display: block; width: 71%; height: 1617px; background-image: url('/local/templates/new_magic/layout/dist/../public/images/about/about-logo.svg'); background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; transform: translate(0, -43%); } .s-about-logo__logo:before, .s-about-logo__logo:after { position: absolute; right: 0; top: 0; display: block; background-position: right top; background-repeat: no-repeat; background-size: 100% auto; content: ''; z-index: 2; } .s-about-logo__logo:before { width: 100%; height: 1617px; background-image: url('/local/templates/new_magic/layout/dist/../public/images/about/about-logo-line.svg'); } .s-about-logo__logo:after { top: 17%; width: 50%; height: 865px; background-image: url('/local/templates/new_magic/layout/dist/../public/images/about/about01.png'); z-index: 1; } .s-about-share { margin-top: auto; max-width: 705px; color: #fff; } .s-about-share__tit { position: relative; margin-bottom: 59px; width: 100%; } .s-about-share__tit img, .s-about-share__tit svg { display: block; width: 100%; height: auto; } .s-about-share__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .s-about-share__btn { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 48px; height: 82px; border: 1px solid #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; color: #fff; text-decoration: none; } .s-about-share__btn:after { display: block; width: 56px; height: 16px; background: 0 center url('data:image/svg+xml,') no-repeat; background-size: 100% auto; content: ''; } .s-about-share p { font-size: 12px; line-height: 18px; } @media (max-width: 1759px) { .s-about-logo__logo { transform: translate(0, -30%); } .s-about-logo__logo:after { top: 12%; } } @media (max-width: 1240px) { .s-about-entry, .s-about-share { width: calc(50% - 26px); } .s-about-logo { height: 344px; } .s-about-logo__logo { transform: translate(0, -26%); } .s-about-logo__logo:after { top: 10%; } } @media (max-width: 1024px) { .s-about-logo__logo { transform: translate(0, -23%); } .s-about-logo__logo:after { top: 9%; } } @media (max-width: 810px) { .s-about-page { background: center top url('/local/templates/new_magic/layout/dist/../public/images/about/about-sky.jpg') no-repeat; background-size: 100% 1310px; } .s-about-page:before { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 100%; background: center bottom url('/local/templates/new_magic/layout/dist/../public/images/about/about-main-table.png') no-repeat; background-size: 100% auto; content: ''; z-index: 1; } .s-about-page .container { padding-top: 40px; padding-bottom: 35px; height: auto; min-height: 1617px; } .s-about-entry { gap: 40px; font-size: 12px; line-height: 18px; } .s-about-logo { height: 225px; } .s-about-logo__logo { transform: translate(0, -20%); } .s-about-logo__logo:after { top: 7%; } .s-about-share__tit { margin-bottom: 18px; } .s-about-share__btn { gap: 16px; height: 46px; font-size: 14px; } .s-about-share__btn:after { width: 40px; } .s-about-share p { font-size: 10px; line-height: 14px; } } @media (max-width: 767px) { .s-about-page { padding-bottom: 320px; } .s-about-page:before { bottom: 320px; } .s-about-entry { width: 65%; } .s-about-logo { height: 260px; } .s-about-logo__logo { transform: translate(0, -16%); } .s-about-logo__logo:after { top: 4%; } .s-about-share { position: absolute; top: 100%; left: 0; padding: 40px 20px; width: 100%; color: #515151; } .s-about-share__tit svg path { fill: #515151; } .s-about-share__btn { color: #515151; border-color: #515151; } .s-about-share__btn:after { background: 0 center url('data:image/svg+xml,') no-repeat; background-size: 100% auto; } } @media (max-width: 640px) { .s-about-logo__logo { transform: translate(0, -13%); } } @media (max-width: 500px) { .s-about-entry { width: 100%; } .s-about-entry--sm { padding-right: 80px; } .s-about-logo__logo { transform: translate(0, -10%); } .s-about-logo__logo:after { top: 4%; } } @media (max-width: 450px) { .s-about-page:before { background: center bottom url('/local/templates/new_magic/layout/dist/../public/images/about/about-main-mob.png') no-repeat; background-size: 100% auto; } .s-about-logo__logo { top: 0; left: auto; right: -20px; width: 80%; transform: translate(0, 0); } .s-about-logo__logo:after { top: 4%; } } .s-info-table { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px; } .s-info-table__volume, .s-info-table__length, .s-info-table__height, .s-info-table__width, .s-info-table__color { width: 90px; min-width: 90px; } .s-info-table__article { width: 100%; } @media (max-width: 1350px) { .s-info-table { gap: 10px; font-size: 14px; line-height: 16px; } .s-info-table__volume, .s-info-table__length, .s-info-table__height, .s-info-table__width, .s-info-table__color { width: 80px; min-width: 80px; } } @media (max-width: 950px) { .s-info-table { min-width: 500px; } } .grecaptcha-badge { visibility: hidden; } /* sertificat buy */ .s-sertifbuy-page { display: grid; grid-template-columns: 350px 1fr; gap: 20px; } .s-sertifbuy-page__btn { position: relative; grid-column: span 2; } .s-sertifbuy-page__btn .s-sertifbuy-btn-next { position: absolute; bottom: 20px; right: 0; text-align: center; } .s-sertifbuy-steps { display: flex; flex-direction: column; gap: 32px; font-size: 20px; font-weight: 600; color: #D9D9D9; counter-reset: item; text-wrap: nowrap; } .s-sertifbuy-steps__item { display: flex; flex-wrap: nowrap; gap: 10px; } .s-sertifbuy-steps__item.is-active { font-size: 26px; font-weight: 700; text-transform: uppercase; color: #1E1E1E; } .s-sertifbuy-steps__item:before { display: block; content: counter(item) '.'; counter-increment: item; } .s-sertifbuy-sliders { display: grid; grid-template-columns: 1fr; } .s-sertifbuy-slider { position: relative; padding: 0 86px; width: 100%; min-height: 715px; z-index: 2; } .s-sertifbuy-slider .swiper-wrapper { align-items: center; } .s-sertifbuy-slider__item { padding: 0 24px 24px; height: auto; transform: translate(0, -44px); transition: .4s; } .s-sertifbuy-slider__item:before { position: absolute; top: 87px; bottom: 0; left: 0; display: block; width: 100%; content: ''; border: 1px solid #000; z-index: 1; transition: .4s; } .s-sertifbuy-slider__item.swiper-slide-active { padding: 0; transform: translate(0, 0) scale(1.6); } .s-sertifbuy-slider__item.swiper-slide-active:before { opacity: 0; } .s-sertifbuy-slider__img { position: relative; z-index: 2; } .s-sertifbuy-slider__btn-prev, .s-sertifbuy-slider__btn-next { position: absolute; top: 50%; left: 0; width: 40px; height: 40px; transform: translate(0, -50%) rotate(90deg); cursor: pointer; z-index: 10; } .s-sertifbuy-slider__btn-next { left: auto; right: 0; transform: translate(0, -50%) rotate(-90deg); } .s-sertifbuy-slider__btn-prev.swiper-button-disabled, .s-sertifbuy-slider__btn-next.swiper-button-disabled { opacity: 0; } .s-sertifbuy-btn-next { padding: 50px 24px; background-color: #515151; font-size: 20px; line-height: 25px; text-transform: uppercase; color: #fff; cursor: pointer; z-index: 10; } .s-sertifbuy-entry { display: grid; grid-template-columns: 37% 1fr; gap: 100px; } .s-sertifbuy-entry--full { grid-column: span 2; grid-template-columns: 477px 1fr; gap: 100px; } .s-sertifbuy-entry__form { display: flex; flex-direction: column; gap: 20px; padding-right: 145px; } .s-sertifbuy-entry__txt { display: flex; flex-direction: column; gap: 40px; padding-top: 116px; } .s-sertifbuy-entry__tit { margin: 0; padding: 0; font-size: 26px; font-weight: 700; line-height: 30px; text-transform: uppercase; color: #000000; } .s-sertifbuy-entry__desc { margin: 0; padding: 0; font-size: 16px; line-height: 21px; color: #515151; } .s-sertifbuy-entry__btns { display: flex; gap: 20px; } .s-sertifbuy-entry .error-message { font-size: 14px; color: #CC3435; } .s-sertifbuy-entry .error-input { border: 1px solid red; color:#CC3435; font-weight: 400; outline: none; } .s-sertifbuy-entry .disabled-input{ pointer-events: none; opacity: 0.5; background-color: #ccc; } .s-btn { display: block; padding: 17px 10px; min-width: 177px; font-size: 14px; line-height: 15px; color: #515151; border: 1px solid #515151; } .s-btn:hover { background-color: #515151; color: #fff; } .s-btn--bg { background-color: #515151; color: #fff; } .s-btn--bg:hover { background-color: transparent; color: #515151; } .s-sertifbuy-entry__form .text-input { font-weight: 400; color: #515151; } .s-sertifbuy-form-label { font-size: 20px; font-weight: 600; line-height: 24px; color: #515151; } .s-sertifbuy-tabs { display: flex; flex-direction: column; gap: 80px; } .s-sertifbuy-tabs__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .s-sertifbuy-tabs__nav-item { grid-column: span 2; padding: 26px 30px; border: 1px solid #515151; font-size: 20px; font-weight: 600; line-height: 24px; text-transform: uppercase; color: #515151; text-align: center; cursor: pointer; } .s-sertifbuy-tabs__nav-item.is-active { background-color: #515151; color: #fff; } .s-sertifbuy-tabs__content { position: relative; display: none; flex-direction: column; gap: 20px; } .s-sertifbuy-tabs__content.is-active { display: flex; } .jq-selectbox, .jq-select-multiple { position: relative; display: inline-block; padding: 0; } .jq-selectbox select, .jq-select-multiple select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; z-index: 1; } .jq-selectbox { z-index: 15; } .jq-selectbox__select { position: relative; padding: 19px 20px; z-index: 2; } .jq-selectbox__select-text { overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; text-overflow: ellipsis; width: calc(100% - 48px); font-size: 18px; font-weight: 400; line-height: 20px; cursor: pointer; } .jq-selectbox__trigger { position: absolute; top: 0; right: 0; display: block; width: 48px; height: 100%; background: center center url('data:image/svg+xml,') no-repeat; background-size: 24px 24px; cursor: pointer; transition: .4s; } .opened .jq-selectbox__trigger { transform: rotate(180deg); } .jq-selectbox__dropdown { position: absolute; top: 100% !important; left: -1px !important; right: -1px; padding: 20px; width: calc(100% + 2px) !important; background-color: #fff; font-size: 16px; font-weight: 400; line-height: 1; color: #1E1E1E; border: 1px solid #515151; z-index: 5; } .dropup .jq-selectbox__dropdown { top: auto !important; bottom: 100% !important; } .jq-selectbox__search input { -webkit-appearance: textfield; } .jq-selectbox__search input::-webkit-search-cancel-button, .jq-selectbox__search input::-webkit-search-decoration { -webkit-appearance: none; } .jq-selectbox__dropdown ul { position: relative; display: flex; flex-direction: column; gap: 18px; list-style: none; -webkit-overflow-scrolling: touch; } .jq-selectbox li { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; cursor: pointer; } .jq-selectbox li:hover { opacity: .8; } .jq-selectbox li.sel{ font-weight: 600; } /* .s-select { display: block; padding-right: 40px; width: 100%; max-width: 100%; background-color: transparent; border-radius: 0; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml,'), linear-gradient(to bottom, #ffffff 0%,#ffffff 100%); background-repeat: no-repeat, repeat; background-position: right 12px top 50%, 0 0; background-size: 24px 24px, 100%; font-weight: 400; line-height: 20px; outline: none; } .s-select::-ms-expand { display: none; } .s-select option { font-weight:normal; } *[dir="rtl"] .s-select, :root:lang(ar) .s-select, :root:lang(iw) .s-select { background-position: left .7em top 50%, 0 0; padding: .6em .8em .5em 1.4em; } */ .s-sertifbuy-form-radio { position: relative; display: block; padding: 39px 60px; font-size: 16px; line-height: 20px; border: 1px solid #515151; cursor: pointer; transition: .4s; } .s-sertifbuy-form-radio:has(input[type=radio]:checked) { background: #515151; color: #fff; } .s-sertifbuy-form-radio__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .s-sertifbuy-slider-nav { display: none; } @media (max-width: 1759px) { .s-sertifbuy-slider { min-height: 515px; } .s-sertifbuy-slider__item { padding: 0 14px 14px; transform: translate(0, -24px); } .s-sertifbuy-slider__item.swiper-slide-active { padding: 0; transform: translate(0, 0) scale(2.8); } } @media (max-width: 1720px) { .s-sertifbuy-page { grid-template-columns: 280px 1fr; } .s-sertifbuy-steps { gap: 22px; font-size: 16px; } .s-sertifbuy-steps__item.is-active { font-size: 20px; } .s-sertifbuy-entry { gap: 30px; } .s-sertifbuy-entry__form { padding-right: 115px; } .s-sertifbuy-tabs { gap: 40px; } .s-sertifbuy-btn-next { padding: 30px 20px; font-size: 16px; line-height: 20px; } .s-sertifbuy-form-label { font-size: 16px; line-height: 20px; } .s-sertifbuy-tabs__nav-item { padding: 18px 16px; font-size: 16px; line-height: 20px; } } @media (max-width: 1200px) { .s-sertifbuy-steps { flex-direction: row; gap: 24px; font-size: 14px; font-weight: 400; } .s-sertifbuy-steps__item.is-active { font-size: 14px; font-weight: 600; } .s-sertifbuy-page { grid-template-columns: 1fr; gap: 79px; } .s-sertifbuy-page__btn { grid-column: span 1; } .s-sertifbuy-page__btn .s-sertifbuy-btn-next { bottom: 79px; padding-top: 27px; padding-bottom: 27px; font-size: 14px; } body:has(.s-sertifbuy-entry) .s-sertifbuy-page__btn .s-sertifbuy-btn-next { bottom: -10px; } .s-sertifbuy-slider { min-height: 500px; padding: 0 64px; } .s-sertifbuy-slider__item.swiper-slide-active { padding: 0; transform: translate(0, 0) scale(1.5); height: 333px; overflow: hidden; } .s-sertifbuy-slider__item.swiper-slide-active .s-sertifbuy-slider__img { max-width: none; min-width: 100%; height: 100%; object-fit: cover; } .s-sertifbuy-entry { grid-template-columns: repeat(2, 1fr); } .s-sertifbuy-entry__form { padding-right: 0; } .s-sertifbuy-tabs { height: 100%; justify-content: space-between; } .s-sertifbuy-entry__img-img { max-width: none; width: 100%; } } @media (max-width: 950px) { .s-sertifbuy-slider { min-height: 450px; } .s-sertifbuy-slider__item.swiper-slide-active { transform: translate(0, 0) scale(1.7); height: 264px; } .s-sertifbuy-tabs__nav { grid-template-columns: repeat(2, 1fr); gap: 8px; } .s-sertifbuy-tabs__nav-item { padding: 30px 16px; font-size: 14px; line-height: 18px; } .s-sertifbuy-entry__form { gap: 10px; } .s-sertifbuy-tabs__content { gap: 10px; } .s-sertifbuy-form-label { padding-bottom: 10px; font-size: 14px; } .s-sertifbuy-tabs .text-input, .jq-selectbox__select { padding-top: 11px; padding-bottom: 11px; height: 44px; font-size: 12px; } .jq-selectbox { padding-top: 0 !important; padding-bottom: 0 !important; } .jq-selectbox__select-text, .jq-selectbox__dropdown { font-size: 12px; } .s-sertifbuy-form-radio { padding-top: 29px; padding-bottom: 29px; font-size: 14px; text-align: center; } .s-sertifbuy-entry__txt { padding: 0; } } @media (max-width: 810px) { .s-sertifbuy-slider { min-height: 400px; } .s-sertifbuy-slider__item.swiper-slide-active { transform: translate(0, 0) scale(1.8); height: 222px; } } @media (max-width: 767px) { .s-sertifbuy-page { gap: 25px; } .s-sertifbuy-steps { overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; } .s-sertifbuy-steps::-webkit-scrollbar { display: none; } .s-sertifbuy-page__btn .s-sertifbuy-btn-next { position: relative; bottom: 0; display: block; width: 100%; padding-top: 15px; padding-bottom: 15px; } .s-sertifbuy-sliders { position: relative; padding: 0 0 0 69px; gap: 20px; } .s-sertifbuy-sliders .swiper-wrapper { display: flex; } .s-sertifbuy-slider { display: block; margin: 0 0 0 20px; padding: 0; width: calc(100% - 20px); min-height: 370px; } .s-sertifbuy-slider__item { padding: 0; max-width: none; width: 100%; transform: translate(0, 0); } .s-sertifbuy-slider__img { max-width: none; width: 100%; } .s-sertifbuy-slider__item:before { display: none; } .s-sertifbuy-slider__item.swiper-slide-active { transform: translate(0, 0) scale(1); width: 100%; height: auto; } .s-sertifbuy-slider__item.swiper-slide-active .s-sertifbuy-slider__img { height: auto; } .s-sertifbuy-slider__btn-prev, .s-sertifbuy-slider__btn-next { display: none; } .s-sertifbuy-slider-nav { position: absolute; top: 0; left: 0; display: block; width: 69px; height: 100%; padding: 44px 0; } .s-sertifbuy-slider-nav__btn-prev, .s-sertifbuy-slider-nav__btn-next { position: absolute; top: 0; left: 50%; width: 100%; height: 44px; background-color: #fff; transform: translate( -50%, 0) rotate(180deg); cursor: pointer; z-index: 10; } .s-sertifbuy-slider-nav__btn-next { top: auto; bottom: 0; transform: translate(-50%, 0) rotate(0deg); } .s-sertifbuy-slider-nav__btn-prev.swiper-button-disabled, .s-sertifbuy-slider-nav__btn-next.swiper-button-disabled { opacity: 0; } .s-sertifbuy-entry { grid-template-columns: 1fr; padding-bottom: 6px; } .s-sertifbuy-entry__img { padding-bottom: 10px; width: 50%; } .s-sertifbuy-entry--full .s-sertifbuy-entry__img { order: 3; width: 100%; } .s-sertifbuy-entry__txt { gap: 32px; padding-bottom: 10px; } .s-sertifbuy-entry__btns { flex-direction: column; gap: 12px; } .jq-selectbox__dropdown { position: fixed; top: 0 !important; left: 0 !important; right: auto !important; padding: 0; width: 100% !important; height: 100% !important; background-color: rgba(30,30,30,.3); border: none; } .jq-selectbox__dropdown ul { position: absolute; top: auto; bottom: 0; left: 0; padding: 23px 20px 32px; width: 100% !important; height: auto !important; background-color: #fff; overflow: inherit; } .jq-selectbox__dropdown ul:before { position: absolute; top: 23px; left: 20px; display: block; font-size: 20px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #1E1E1E; content: 'часовой пояс'; } .jq-selectbox__dropdown ul:after { position: absolute; top: 23px; right: 20px; display: block; width: 24px; height: 24px; background: 0 0 url('data:image/svg+xml,') no-repeat; background-size: 100% 100%; content: ' '; cursor: pointer; } .jq-selectbox__dropdown ul li:first-child { padding-top: 45px; z-index: 10; } } @media (max-width: 1022px) { .edited-certificate path { fill: #fff; } } .s-catalog-txt { max-width: 847px; font-size: 16px; line-height: 24px; letter-spacing: 10%; } .s-catalog-txt__tit { margin-bottom: 32px; font-size: 26px; font-weight: 700; line-height: 30px; letter-spacing: 5%; text-transform: uppercase; color: #1E1E1E; } .s-catalog-txt__full-description { display: none; } .s-catalog-txt__entry { position: relative; overflow: hidden; transition: .4s; } .s-catalog-txt__full { position: relative; display: flex; flex-direction: column; gap: 32px; height: 0; overflow: hidden; transition: .4s; } .s-catalog-txt.is-open .s-catalog-txt__full { height: auto; } .s-catalog-txt.is-open .s-catalog-txt__entry { height: 0; } .s-catalog-txt__link { color: #1E1E1E; text-decoration: underline; } .s-catalog-txt p { padding: 0; margin: 0; } .s-catalog-txt a { display: inline-block; margin-top: 32px; color: #1E1E1E; text-decoration: underline; } .s-catalog-txt a:hover { color: #1E1E1E; text-decoration: none; } .s-cart-link { position: relative; display: block; } .s-cart-link svg { position: relative; z-index: 1; } .s-cart-link__numb { position: absolute; font-weight: bold; top: 53%; left: 52%; font-size: 12px; line-height: 14px; letter-spacing: 5%; transform: translate(-50%, calc(-50% + 2px)); } .heading-body--icon { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; } .heading-body__btn { display: block; width: 24px; height: 24px; background-position: 0 0; background-repeat: no-repeat; background-image: url('data:image/svg+xml,'); background-size: 100% 100%; cursor: pointer; } .s-article-prod { display: flex; flex-wrap: nowrap; gap: 24px; width: 100%; font-size: 16px; line-height: 24px; letter-spacing: 10%; } .s-article-prod__tit--mob { display: none; } @media (max-width: 767px) { .s-catalog-txt { font-size: 12px; line-height: 18px; } .s-catalog-txt__tit { margin-bottom: 24px; font-size: 20px; line-height: 24px; } .s-catalog-txt__entry { gap: 24px; } .s-catalog-txt a { margin-top: 24px; } .s-cart-link__numb { font-size: 10px; line-height: 12px; } .s-article-prod { width: auto; gap: 12px; font-size: 12px; line-height: 18px; } .s-article-prod__tit { display: none; } .s-article-prod__tit--mob { display: block; } } /* btn top scrolling page */ .s-btn-top { position: fixed; bottom: 20px; right: 112px; display: flex; align-items: center; justify-content: center; gap: 16px; width: 120px; height: 118px; background: #515151; opacity: 0; cursor: pointer; transition: .4s; z-index: 2; } .s-btn-top.is-show { opacity: 1; } .s-btn-top svg { display: block; width: 60px; height: 60px; } .s-btn-top path { stroke: #fff; } .s-btn-top__txt { display: none; } @media (max-width: 767px) { .footer.mt-\[60px\]:has(.s-btn-top) { margin-top: 0; } .s-btn-top { position: relative; bottom: 0; right: 0; margin: 0 20px; width: calc(100% - 40px); height: 52px; background-color: transparent; border: 1px solid #515151; font-size: 14px; letter-spacing: 5%; line-height: 14px; color: #515151; } .s-btn-top__txt { display: block; } .s-btn-top svg { width: 32px; height: 32px; } .s-btn-top path { stroke: #515151; } } /* end btn top scrolling page */ /* add arrow for promo slider on home page */ .flex:has(.promo-carousel), .flex:has(.categories-carousel) { position: relative; } .s-carousel__prev, .s-carousel__next { position: absolute; top: 50%; display: block; width: 60px; height: 60px; background: 0 0 url('data:image/svg+xml,') no-repeat; background-size: 100% 100%; transform: translate(0, -50%); z-index: 2; } .s-carousel__prev.swiper-button-disabled, .s-carousel__next.swiper-button-disabled { display: none; } .s-carousel__prev { left: 7px; transform: rotate(180deg); } .s-carousel__next { right: 7px; } .s-carousel__prev svg, .s-carousel__next svg { display: none; } @media (max-width: 767px) { .flex:has(.promo-carousel), .flex:has(.categories-carousel) { margin-bottom: 30px; } .s-carousel__prev, .s-carousel__next, .s-carousel__prev svg, .s-carousel__next svg { width: 24px; height: 24px; } .s-carousel__prev, .s-carousel__next { top: calc(100% + 6px); background: none; transform: translate(0, 0); } .s-carousel__prev { left: auto; right: 44px; } .s-carousel__next { right: 20px; } .s-carousel__prev svg, .s-carousel__next svg { display: block; } .s-carousel__prev path, .s-carousel__next path { stroke: #000; } } /* end add arrow for promo slider on home page */ .footer-address{ gap: 40px; margin-top: 32px; padding-top: 25px; border-top: 1px solid #D9D9D9; } @media screen and (max-width: 1024px){ .footer-address { gap: 5px; } } @media screen and (max-width: 768px){ .footer-address { margin-top: 22px; padding-top: 24px; } } /* End */ /* Start:/local/templates/new_magic/layout/dist/loader.css?17337496849530*/ body, html { margin: 0; padding: 0; } .s-loader { position: fixed; width: 100%; height: 100vh; overflow: hidden; z-index: 10000; background: #fff; transition: opacity 0.3s ease-in-out 0s; } .s-loader__shown{ opacity: 0; } .s-loader__body { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100vh + 200px); font-size: 10px; transform: translate(0, -200px); overflow: hidden; } .s-loader svg { display: block; width: 100%; } .s-loader__logo01 { transform: scale(0, 1); animation: logo01-cadr01 .5s ease-in-out forwards; } .s-loader__logo01 svg { display: block; width: 32.7em; height: 34.0em; } .s-loader__logo02 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0, 1); animation: logo02-cadr02 .5s ease-in-out; animation-delay: .5s; } .s-loader__logo02 svg { display: block; width: 34.9em; height: 34.9em; } .s-loader__line01 { position: absolute; top: 50%; left: 50%; background-color: #444543; transform: translate(-50%, -50%); animation: line01-cadr03 3.5s ease-in-out forwards; animation-delay: 1s; z-index: 3; } .s-loader__white { position: absolute; top: 50%; left: 50%; width: 150.0em; height: 12.0em; background-color: #fff; opacity: 0; animation: white-cadr05 2s ease-in-out forwards; animation-delay: 2.5s; z-index: 2; } .s-loader__txt01 { position: absolute; top: 50%; left: 50%; width: 148.7em; transform: translate(-50%, -50%); animation: txt-cadr06 .2s ease-in-out forwards; animation-delay: 8.6s; } .s-loader__txt01 svg { display: block; width: 148.7em; height: 11.2em; } .s-loader__line { opacity: 0; } .s-loader__v { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 1.8s; } .s-loader__b { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 1.85s; } .s-loader__l { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 1.9s; } .s-loader__u { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 1.9s; } .s-loader__e { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 1.95s; } .s-loader__oo { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2.05s; } .s-loader__sh { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2s; } .s-loader__t { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2s; } .s-loader__tt { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2s; } .s-loader__n { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2s; } .s-loader__o { opacity: 0; animation: txt-cadr04 .1s ease-in-out forwards; animation-delay: 2s; } .s-loader__logo03 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 7; animation: logo03-cadr10 .9s ease-in-out forwards; animation-delay: 8.1s; } .s-loader__logo03-logo { opacity: 0; animation: logo03-cadr07 .8s ease-in-out forwards; animation-delay: 4s; } .s-loader__logo03-logo svg { display: block; width: 33.2em; height: 35.6em; } .s-loader__logo03-dot { position: absolute; bottom: 0; left: calc(100% - 11.5em); width: 3.5em; height: 3.5em; background-color: #515151; opacity: 0; animation: dot-cadr08 2.9s ease-in-out forwards; animation-delay: 4.2s; } .s-loader__logo03-dot-top { position: absolute; top: -50vh; left: calc(100% - 4.4em); width: 3.5em; height: 3.5em; background-color: #515151; opacity: 0; animation: dot-cadr11 .7s ease-in-out forwards; animation-delay: 7s; } .s-loader__txt-slog-01 { position: absolute; top: 50%; left: 50%; transform: translate(16.6em, 20.0em); z-index: 7; opacity: 0; animation: txt-cadr09 .8s ease-in-out forwards; animation-delay: 4.5s; } .s-loader__txt-slog-01 svg { display: block; width: 48.2em; height: 5.0em; } .s-loader__txt-slog-02 { position: absolute; top: 50%; right: 50%; transform: translate(12.0em, 34.0em); z-index: 7; opacity: 0; animation: txt-cadr09 .8s ease-in-out forwards; animation-delay: 5.1s; } .s-loader__txt-slog-02 svg { display: block; width: 26.0em; height: 4.0em; } .s-loader__txt-slog-03 { position: absolute; top: 50%; left: 50%; transform: translate(16.6em, 48.0em); z-index: 7; opacity: 0; animation: txt-cadr09 .8s ease-in-out forwards; animation-delay: 5.3s; } .s-loader__txt-slog-03 svg { display: block; width: 40.6em; height: 4.0em; } .s-loader__txt02 { position: absolute; top: 50%; left: 50%; display: flex; justify-content: end; height: 9.0em; opacity: 0; overflow: hidden; transform: translate(-50%, -50%); animation: txt-cadr12 .9s ease-in-out forwards; animation-delay: 8.1s; z-index: 5; } .s-loader__txt02-txt { position: absolute; top: 0; right: 0; width: 137.6em; } .s-loader__txt02-txt svg { display: block; width: 137.6em; height: 9.0em; } @keyframes logo01-cadr01 { 0% { transform: scale(0, 1); } 50% { transform: scale(1, 1); } 100% { transform: scale(0, 1); } } @keyframes logo02-cadr02 { 0% { transform: translate(-50%, -50%) scale(0, 1); } 50% { transform: translate(-50%, -50%) scale(1, 1); } 100% { transform: translate(-50%, -50%) scale(.1, 1); } } @keyframes line01-cadr03 { 0% { width: 5.5em; height: 34.9em; } 7% { width: 4.3em; height: 28.7em; } 15% { width: 1.6em; height: 13.8em; transform: translate(calc(-50% - 24.8em), calc(-50% + 4.7em)) rotate(-270deg); } 38% { width: 1.6em; height: 13.8em; transform: translate(calc(-50% - 24.8em), calc(-50% + 4.7em)) rotate(-270deg); } 43% { width: 1.6em; height: 13.8em; transform: translate(calc(-50% - 76.0em), calc(-50% - 4.0em)) rotate(-180deg); } 54% { width: 1.6em; height: 13.8em; } 70% { width: 1.6em; height: 13.8em; } 84% { width: 1.6em; height: 13.8em; opacity: 1; } 100% { width: 1.6em; height: 13.8em; transform: translate(calc(-50% + 76.0em), -50%) rotate(-180deg); opacity: 0; } } @keyframes txt-cadr04 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes white-cadr05 { 0% { opacity: 1; transform: translate(calc(-50% - 150.4em), calc(-50% - .2em)); } 100% { opacity: 1; transform: translate(calc(-50% + .2em), calc(-50% - .2em)); } } @keyframes txt-cadr06 { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes logo03-cadr07 { 0% { opacity: 0; transform: rotate(-45deg); } 23.8% { opacity: 1; transform: rotate(0deg); } 47.6% { opacity: 1; transform: rotate(0deg); } 71.4% { opacity: 1; transform: rotate(0deg); } 95.2% { opacity: 1; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(0deg); } } @keyframes dot-cadr08 { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 15% { opacity: 1; transform: translate(8.1em, 0) rotate(90deg); } 20% { opacity: 1; transform: translate(12.1em, 2.0em) rotate(180deg); } 40% { opacity: 1; transform: translate(3.1em, 14.0em) rotate(45deg); } 60% { opacity: 1; transform: translate(12.1em, 27.0em) rotate(180deg); } 80% { opacity: 1; transform: translate(8.1em, 25vh) rotate(45deg); } 99.99% { opacity: 1; transform: translate(8.1em, 50vh) rotate(180deg); } 100% { opacity: 0; transform: translate(81em, 50vh) rotate(45deg); } } @keyframes dot-cadr11 { 0% { opacity: 0; transform: translate(0, 0) rotate(180deg); } 1% { opacity: 1; } 100% { opacity: 1; top: calc(100% - 3.5em); transform: translate(0, 0) rotate(0); } } @keyframes txt-cadr09 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes txt-cadr12 { 0% { width: 0; opacity: 0; } 5% { opacity: 1; } 50% { width: 137.6em; opacity: 1; transform: translate(calc(-50% + 21.0em), -50%); } 60% { width: 137.6em; transform: translate(calc(-50% + 11.0em), -50%); } 80% { width: 137.6em; opacity: 1; transform: translate(-50% , calc(-50% + 15.0em)); } 100% { width: 137.6em; opacity: 1; transform: translate(-50% , calc(-50% + 15.0em)); } } @keyframes logo03-cadr10 { 0% { background-color: #fff; transform: translate(-50%, -50%); } 5% { transform: translate(-50%, -50%) scale(1, .8); } 7% { background-color: #fff; } 50% { background-color: #fff; transform: translate(calc(-50% - 70.0em), -50%) scale(.6, .6); } 59% { background-color: #fff; } 60% { background-color: transparent; transform: translate(calc(-50% - 70.0em), -50%) scale(.5, .5); } 80% { transform: translate(calc(-50% - 5.0em), calc(-50% - 18.0em)) scale(.7, .7) rotate(360deg); } 90% { transform: translate(calc(-50% - 2.0em), calc(-50% - 8.0em)) scale(.7, .6) rotate(360deg); } 100% { transform: translate(calc(-50% - 2.0em), calc(-50% - 8.0em)) scale(.7, .7) rotate(360deg); } } @media (max-width: 1900px) { .s-loader__body { font-size: 8px; } } @media (max-width: 1800px) { .s-loader__body { font-size: 7px; } } @media (max-width: 1700px) { .s-loader__body { font-size: 6px; } } @media (max-width: 1600px) { .s-loader__body { font-size: 5px; } } @media (max-width: 1024px) { .s-loader__body { font-size: 4px; } } @media (max-width: 900px) { .s-loader__body { height: calc(100vh + 50px); transform: translate(0, -50px); } } @media (max-width: 767px) { .s-loader__body { font-size: 3px; } } @media (max-width: 500px) { .s-loader__body { font-size: 2px; } } /* End */ /* Start:/local/templates/new_magic/components/makeitmagic/auth/.default/style.css?172925161137*/ #resend_link { cursor: pointer; } /* End */ /* Start:/local/templates/new_magic/template_styles.css?1728567383270*/ /*фиксы для включенной панели битрикса*/ @media screen and (min-width: 1024px) { #bx-panel ~ header{ padding-top: 70px; } #bx-panel ~ .burger-menu__content.active .burger-menu__close-trigger{ top: 40px; } } /* End */ /* /local/templates/new_magic/layout/dist/swiper-bundle.min.css?172743990418435 */ /* /local/templates/new_magic/layout/dist/styles.css?1762003460197846 */ /* /local/templates/new_magic/layout/dist/loader.css?17337496849530 */ /* /local/templates/new_magic/components/makeitmagic/auth/.default/style.css?172925161137 */ /* /local/templates/new_magic/template_styles.css?1728567383270 */