/* Start:/local/templates/yarkima/css/swiper-bundle.min.css?172744001118459*/ /** * Swiper 11.1.14 * 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: September 12, 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.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.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.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/yarkima/css/style.css?1730896254336352*/ @charset "UTF-8"; .text-gray { color: #8b8e9a !important; } .text-center { text-align: center; } @media (min-width: 1440px) { .mt-0 { margin-top: 0px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-0 { margin-top: 0vw !important; } } @media (max-width: 766px) { .mt-0 { margin-top: 0vw !important; } } @media (min-width: 1440px) { .mb-0 { margin-bottom: 0px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-0 { margin-bottom: 0vw !important; } } @media (max-width: 766px) { .mb-0 { margin-bottom: 0vw !important; } } @media (min-width: 1440px) { .mt-1 { margin-top: 8px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-1 { margin-top: 0.5555555556vw !important; } } @media (max-width: 766px) { .mt-1 { margin-top: 2.1333333333vw !important; } } @media (min-width: 1440px) { .mb-1 { margin-bottom: 8px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-1 { margin-bottom: 0.5555555556vw !important; } } @media (max-width: 766px) { .mb-1 { margin-bottom: 2.1333333333vw !important; } } @media (min-width: 1440px) { .mt-2 { margin-top: 16px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-2 { margin-top: 1.1111111111vw !important; } } @media (max-width: 766px) { .mt-2 { margin-top: 4.2666666667vw !important; } } @media (min-width: 1440px) { .mb-2 { margin-bottom: 16px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-2 { margin-bottom: 1.1111111111vw !important; } } @media (max-width: 766px) { .mb-2 { margin-bottom: 4.2666666667vw !important; } } @media (min-width: 1440px) { .mt-3 { margin-top: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-3 { margin-top: 1.6666666667vw !important; } } @media (max-width: 766px) { .mt-3 { margin-top: 6.4vw !important; } } @media (min-width: 1440px) { .mb-3 { margin-bottom: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-3 { margin-bottom: 1.6666666667vw !important; } } @media (max-width: 766px) { .mb-3 { margin-bottom: 6.4vw !important; } } @media (min-width: 1440px) { .mt-4 { margin-top: 32px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-4 { margin-top: 2.2222222222vw !important; } } @media (max-width: 766px) { .mt-4 { margin-top: 8.5333333333vw !important; } } @media (min-width: 1440px) { .mb-4 { margin-bottom: 32px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-4 { margin-bottom: 2.2222222222vw !important; } } @media (max-width: 766px) { .mb-4 { margin-bottom: 8.5333333333vw !important; } } @media (min-width: 1440px) { .mt-5 { margin-top: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-5 { margin-top: 2.7777777778vw !important; } } @media (max-width: 766px) { .mt-5 { margin-top: 10.6666666667vw !important; } } @media (min-width: 1440px) { .mb-5 { margin-bottom: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-5 { margin-bottom: 2.7777777778vw !important; } } @media (max-width: 766px) { .mb-5 { margin-bottom: 10.6666666667vw !important; } } @media (min-width: 1440px) { .mt-6 { margin-top: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-6 { margin-top: 3.3333333333vw !important; } } @media (max-width: 766px) { .mt-6 { margin-top: 12.8vw !important; } } @media (min-width: 1440px) { .mb-6 { margin-bottom: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-6 { margin-bottom: 3.3333333333vw !important; } } @media (max-width: 766px) { .mb-6 { margin-bottom: 12.8vw !important; } } @media (min-width: 1440px) { .mt-7 { margin-top: 56px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-7 { margin-top: 3.8888888889vw !important; } } @media (max-width: 766px) { .mt-7 { margin-top: 14.9333333333vw !important; } } @media (min-width: 1440px) { .mb-7 { margin-bottom: 56px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-7 { margin-bottom: 3.8888888889vw !important; } } @media (max-width: 766px) { .mb-7 { margin-bottom: 14.9333333333vw !important; } } @media (min-width: 1440px) { .mt-8 { margin-top: 64px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-8 { margin-top: 4.4444444444vw !important; } } @media (max-width: 766px) { .mt-8 { margin-top: 17.0666666667vw !important; } } @media (min-width: 1440px) { .mb-8 { margin-bottom: 64px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-8 { margin-bottom: 4.4444444444vw !important; } } @media (max-width: 766px) { .mb-8 { margin-bottom: 17.0666666667vw !important; } } @media (min-width: 1440px) { .mt-9 { margin-top: 72px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-9 { margin-top: 5vw !important; } } @media (max-width: 766px) { .mt-9 { margin-top: 19.2vw !important; } } @media (min-width: 1440px) { .mb-9 { margin-bottom: 72px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-9 { margin-bottom: 5vw !important; } } @media (max-width: 766px) { .mb-9 { margin-bottom: 19.2vw !important; } } @media (min-width: 1440px) { .mt-10 { margin-top: 80px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-10 { margin-top: 5.5555555556vw !important; } } @media (max-width: 766px) { .mt-10 { margin-top: 21.3333333333vw !important; } } @media (min-width: 1440px) { .mb-10 { margin-bottom: 80px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-10 { margin-bottom: 5.5555555556vw !important; } } @media (max-width: 766px) { .mb-10 { margin-bottom: 21.3333333333vw !important; } } @media (min-width: 1440px) { .mt-15 { margin-top: 120px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-15 { margin-top: 8.3333333333vw !important; } } @media (max-width: 766px) { .mt-15 { margin-top: 32vw !important; } } @media (min-width: 1440px) { .mb-15 { margin-bottom: 120px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-15 { margin-bottom: 8.3333333333vw !important; } } @media (max-width: 766px) { .mb-15 { margin-bottom: 32vw !important; } } @media (min-width: 1440px) { .mt-md-0 { margin-top: 0px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-0 { margin-top: 0vw !important; } } @media (min-width: 1440px) { .mb-md-0 { margin-bottom: 0px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-0 { margin-bottom: 0vw !important; } } @media (min-width: 1440px) { .mt-md-1 { margin-top: 8px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-1 { margin-top: 0.5555555556vw !important; } } @media (min-width: 1440px) { .mb-md-1 { margin-bottom: 8px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-1 { margin-bottom: 0.5555555556vw !important; } } @media (min-width: 1440px) { .mt-md-2 { margin-top: 16px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-2 { margin-top: 1.1111111111vw !important; } } @media (min-width: 1440px) { .mb-md-2 { margin-bottom: 16px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-2 { margin-bottom: 1.1111111111vw !important; } } @media (min-width: 1440px) { .mt-md-3 { margin-top: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-3 { margin-top: 1.6666666667vw !important; } } @media (min-width: 1440px) { .mb-md-3 { margin-bottom: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-3 { margin-bottom: 1.6666666667vw !important; } } @media (min-width: 1440px) { .mt-md-4 { margin-top: 32px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-4 { margin-top: 2.2222222222vw !important; } } @media (min-width: 1440px) { .mb-md-4 { margin-bottom: 32px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-4 { margin-bottom: 2.2222222222vw !important; } } @media (min-width: 1440px) { .mt-md-5 { margin-top: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-5 { margin-top: 2.7777777778vw !important; } } @media (min-width: 1440px) { .mb-md-5 { margin-bottom: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-5 { margin-bottom: 2.7777777778vw !important; } } @media (min-width: 1440px) { .mt-md-6 { margin-top: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-6 { margin-top: 3.3333333333vw !important; } } @media (min-width: 1440px) { .mb-md-6 { margin-bottom: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-6 { margin-bottom: 3.3333333333vw !important; } } @media (min-width: 1440px) { .mt-md-7 { margin-top: 56px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-7 { margin-top: 3.8888888889vw !important; } } @media (min-width: 1440px) { .mb-md-7 { margin-bottom: 56px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-7 { margin-bottom: 3.8888888889vw !important; } } @media (min-width: 1440px) { .mt-md-8 { margin-top: 64px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-8 { margin-top: 4.4444444444vw !important; } } @media (min-width: 1440px) { .mb-md-8 { margin-bottom: 64px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-8 { margin-bottom: 4.4444444444vw !important; } } @media (min-width: 1440px) { .mt-md-9 { margin-top: 72px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-9 { margin-top: 5vw !important; } } @media (min-width: 1440px) { .mb-md-9 { margin-bottom: 72px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-9 { margin-bottom: 5vw !important; } } @media (min-width: 1440px) { .mt-md-10 { margin-top: 80px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-10 { margin-top: 5.5555555556vw !important; } } @media (min-width: 1440px) { .mb-md-10 { margin-bottom: 80px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-10 { margin-bottom: 5.5555555556vw !important; } } @media (min-width: 1440px) { .mt-md-15 { margin-top: 120px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-md-15 { margin-top: 8.3333333333vw !important; } } @media (min-width: 1440px) { .mb-md-15 { margin-bottom: 120px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mb-md-15 { margin-bottom: 8.3333333333vw !important; } } .d-none { display: none !important; } .d-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .d-block { display: block !important; } .d-grid { display: -ms-grid !important; display: grid !important; } @media (min-width: 767px) { .d-md-none { display: none !important; } } @media (min-width: 1440px) { .d-lg-none { display: none !important; } } @media (min-width: 767px) { .d-md-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } @media (min-width: 1440px) { .d-lg-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } } @media (min-width: 767px) { .d-md-block { display: block !important; } } @media (min-width: 1440px) { .d-lg-block { display: block !important; } } @media (min-width: 767px) { .d-md-grid { display: -ms-grid !important; display: grid !important; } } @media (min-width: 1440px) { .d-lg-grid { display: -ms-grid !important; display: grid !important; } } .grid-2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 16px 1fr; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; } .grid-3 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 16px 1fr 16px 1fr; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; } .grid-4 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; } .grid-5 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr; grid-template-columns: repeat(5, 1fr); grid-gap: 16px; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-ExtraBold.ttf") format("truetype"); font-style: normal; font-weight: 800; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-Black.ttf") format("truetype"); font-style: normal; font-weight: 900; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-ExtraBold.ttf") format("truetype"); font-style: normal; font-weight: 800; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; } @font-face { font-family: "Inter Display"; src: url("/local/templates/yarkima/css/../fonts/InterDisplay-Light.ttf") format("truetype"); font-style: normal; font-weight: 300; } @font-face { font-family: "icomoon"; src: url("/local/templates/yarkima/css/../fonts/icons/icomoon.eot?k45kit"); src: url("/local/templates/yarkima/css/../fonts/icons/icomoon.eot?k45kit#iefix") format("embedded-opentype"), url("/local/templates/yarkima/css/../fonts/icons/icomoon.ttf?k45kit") format("truetype"), url("/local/templates/yarkima/css/../fonts/icons/icomoon.woff?k45kit") format("woff"), url("/local/templates/yarkima/css/../fonts/icons/icomoon.svg?k45kit#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-chat:before { content: "🌧"; color: #b9bdcc; } [class^=icon-], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-pen:before { content: ""; color: #8b8e9a; } .icon-full:before { content: ""; color: #8b8e9a; } .icon-mute-volume:before { content: ""; color: #8b8e9a; } .icon-pause:before { content: ""; color: #8b8e9a; } .icon-play:before { content: ""; color: #8b8e9a; } .icon-facebook:before { content: ""; color: #8b8e9a; } .icon-instagram:before { content: ""; color: #8b8e9a; } .icon-vk:before { content: ""; color: #8b8e9a; } .icon-Chat:before { content: ""; color: #8b8e9a; } .icon-group:before { content: ""; color: #8b8e9a; } .icon-More:before { content: ""; color: #8b8e9a; } .icon-correct:before { content: ""; color: #8b8e9a; } .icon-profile:before { content: ""; } .icon-tinder:before { content: ""; color: #8b8e9a; } .icon-bussiness:before { content: ""; color: #8b8e9a; } .icon-cooking:before { content: ""; color: #8b8e9a; } .icon-esotericism:before { content: ""; color: #8b8e9a; } .icon-finance:before { content: ""; color: #8b8e9a; } .icon-heart:before { content: ""; color: #8b8e9a; } .icon-hobby:before { content: ""; color: #8b8e9a; } .icon-investment:before { content: ""; color: #8b8e9a; } .icon-language:before { content: ""; color: #8b8e9a; } .icon-personal-growth:before { content: ""; color: #8b8e9a; } .icon-professions:before { content: ""; color: #8b8e9a; } .icon-relationships:before { content: ""; color: #8b8e9a; } .icon-school:before { content: ""; color: #8b8e9a; } .icon-science:before { content: ""; color: #8b8e9a; } .icon-spiritual-growth:before { content: ""; color: #8b8e9a; } .icon-sport:before { content: ""; color: #8b8e9a; } .icon-technolodgy:before { content: ""; color: #8b8e9a; } .icon-university:before { content: ""; color: #8b8e9a; } .icon-chat:before { content: ""; color: #8b8e9a; } .icon-flame:before { content: ""; color: #8b8e9a; } .icon-icon-stack-white:before { content: ""; color: #8b8e9a; } .icon-double-check-green:before { content: ""; color: #8b8e9a; } .icon-eye-off:before { content: ""; color: #8b8e9a; } .icon-more:before { content: ""; } .icon-border-bg:before { content: ""; color: #8b8e9a; } .icon-grid:before { content: ""; color: #8b8e9a; } .icon-arrow-left:before { content: ""; } .icon-icon-down:before { content: ""; } .icon-filter:before { content: ""; color: #8b8e9a; } .icon-notification:before { content: ""; color: #8b8e9a; } .icon-question:before { content: ""; color: #8b8e9a; } .icon-close:before { content: ""; } .icon-sort:before { content: ""; color: #8b8e9a; } .icon-icon-star-gray:before { content: ""; } .icon-volume:before { content: ""; } .icon-hexagon:before { content: ""; color: #8b8e9a; } .icon-filled-star:before { content: ""; color: #8b8e9a; } .icon-plus:before { content: ""; color: #8b8e9a; } .icon-eye:before { content: ""; color: #8b8e9a; } .icon-icon-search:before { content: ""; } .icon-stack:before { content: ""; color: #8b8e9a; } .icon { font-family: "icomoon"; font-style: normal; width: 20px; height: 20px; font-size: 20px; line-height: 1em; position: relative; color: #8b8e9a; display: inline-block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -ms-flex-negative: 0; flex-shrink: 0; font-weight: 400; } .icon svg { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; fill: #8b8e9a; } .icon::before { content: " "; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-position: center; background-repeat: no-repeat; background-size: contain; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .icon.profile::before { content: ""; } .icon.star::before { content: ""; } .icon.gray-star::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-star-gray.svg); } .icon.stack::before { content: ""; } .icon.link::before { content: ""; } .icon.filled-arrow::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-filled-arrow.svg); } .icon.close::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-remove.svg); } .icon.search::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-search.svg); } .icon.white-plus::before { color: #fff; background-image: url(/local/templates/yarkima/css/../images/icons/white-icon-plus.svg); } .icon.notification::before { content: ""; } .icon.arrow-down::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-down.svg); } .icon.sort::before { content: ""; } .icon.filter::before { content: ""; } .icon.language::before { content: ""; } .icon.purple-language::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-language.svg); } .icon.purple-school::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-school.svg); } .icon.eye::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-eye.svg); } .icon.volume::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-volume.svg); } .icon.volume-filled::before { content: ""; } .icon.pause::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-pause.svg); } .icon.pause_white::before { background-image: url(/local/templates/yarkima/css/../images/icons/player/icon-pause_white.svg); } .icon.full_white::before { background-image: url(/local/templates/yarkima/css/../images/icons/player/icon-full_white.svg); } .icon.play_mute::before { background-image: url(/local/templates/yarkima/css/../images/icons/player/icon-play_white.svg); } .icon.mute_white::before { background-image: url(/local/templates/yarkima/css/../images/icons/player/icon-mute_white.svg); } .icon.volume_white::before { background-image: url(/local/templates/yarkima/css/../images/icons/player/icon-volume_white.svg); } .icon.double-check-green::before { background-image: url(/local/templates/yarkima/css/../images/icons/double-check-green.svg); } .icon.more::before { background-image: url(/local/templates/yarkima/css/../images/icons/more.svg); } .icon.like::before { content: ""; } .icon.icon-chat::before { content: ""; } .icon.case::before { content: ""; } .icon.flame::before { content: ""; } .icon.menu::before { content: ""; } .icon.plus::before { content: ""; } .icon.purple { color: #8e35ff; } .icon.purple svg { fill: #8e35ff; } .icon.instagram::before { content: ""; } .icon.facebook::before { content: ""; } .icon.vk::before { content: ""; } .icon.setting::before { background-image: url(/local/templates/yarkima/css/../images/icons/settings.svg); } .icon.smile::before { content: ""; } .icon.percent::before { content: ""; } .icon.money::before { content: ""; } .icon.correct-blank::before { content: ""; } .icon.two-persons::before { content: ""; } .icon.more::before { content: ""; } .icon.group::before { content: ""; } .icon.copy::before { content: ""; } .icon.send::before { content: ""; } .icon.arrow-left::before { content: ""; } .icon.delete::before { content: ""; } .icon.kid::before { content: ""; } .icon.light-gray { color: #b9bdcc; } .icon.red { color: #fc3a20; } .icon.purple { color: #8e35ff !important; } .icon.black { color: #191a26; } .icon.black svg { fill: #191a26; } .icon.sm { width: 16px; height: 16px; font-size: 16px; } .icon.md { width: 24px; font-size: 24px; height: 24px; } .icon.gray { color: #b9bdcc !important; } .icon.yellow { color: #fac602 !important; } @media (min-width: 767px) and (max-width: 1440px) { .icon { width: 1.3888888889vw; height: 1.3888888889vw; font-size: 1.3888888889vw; } .icon.sm { width: 1.1111111111vw; height: 1.1111111111vw; font-size: 1.1111111111vw; } .icon.md { width: 1.6666666667vw; height: 1.6666666667vw; font-size: 1.6666666667vw; } } @media (max-width: 766px) { .icon { width: 5.3333333333vw; height: 5.3333333333vw; font-size: 5.3333333333vw; } .icon.sm { width: 4.2666666667vw; height: 4.2666666667vw; font-size: 4.2666666667vw; } .icon.md { width: 6.4vw; height: 6.4vw; font-size: 6.4vw; } } .roboto { font-family: "Roboto", sans-serif; } .inter { font-family: "Inter", sans-serif; } .roboto-flex { font-family: "Roboto Flex", sans-serif; } h1, h2, h3, h4 { margin: 0; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } @media (max-width: 766px) { .text-mob-14 { font-size: 3.7333333333vw !important; } } .grid-col-1 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } @media (max-width: 766px) { .grid-сol-mob-1 { -ms-grid-columns: 1fr !important; grid-template-columns: 1fr !important; } } @media (max-width: 766px) { .grid-сol-mob-2 { -ms-grid-columns: 1fr 1fr !important; grid-template-columns: 1fr 1fr !important; } } @media (min-width: 767px) { .grid-сol-md-3 { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 767px) { .grid-сol-md-4 { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width: 1440px) { .min-width-3 { min-width: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-width-3 { min-width: 1.6666666667vw; } } @media (max-width: 766px) { .min-width-3 { min-width: 6.4vw; } } @media (min-width: 1440px) { .min-height-3 { min-height: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-height-3 { min-height: 3.3333333333vw; } } @media (max-width: 766px) { .min-height-3 { min-height: 12.8vw; } } @media (min-width: 1440px) { .min-width-6 { min-width: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-width-6 { min-width: 3.3333333333vw; } } @media (max-width: 766px) { .min-width-6 { min-width: 12.8vw; } } @media (min-width: 1440px) { .min-height-6 { min-height: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-height-6 { min-height: 3.3333333333vw; } } @media (max-width: 766px) { .min-height-6 { min-height: 12.8vw; } } @media (min-width: 1440px) { .min-width-5 { min-width: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-width-5 { min-width: 2.7777777778vw; } } @media (max-width: 766px) { .min-width-5 { min-width: 10.6666666667vw; } } @media (min-width: 1440px) { .min-height-5 { min-height: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-height-5 { min-height: 2.7777777778vw; } } @media (max-width: 766px) { .min-height-5 { min-height: 10.6666666667vw; } } @media (min-width: 1440px) { .min-width-7_5 { min-width: 60px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-width-7_5 { min-width: 4.1666666667vw; } } @media (max-width: 766px) { .min-width-7_5 { min-width: 16vw; } } @media (min-width: 1440px) { .min-height-7_5 { min-height: 60px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-height-7_5 { min-height: 4.1666666667vw; } } @media (max-width: 766px) { .min-height-7_5 { min-height: 16vw; } } @media (min-width: 1440px) { .min-width-md-6 { min-width: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-width-md-6 { min-width: 3.3333333333vw; } } @media (min-width: 1440px) { .min-height-md-6 { min-height: 48px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .min-height-md-6 { min-height: 3.3333333333vw; } } @media (min-width: 1440px) { .ml-5 { margin-left: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .ml-5 { margin-left: 2.7777777778vw; } } @media (max-width: 766px) { .ml-5 { margin-left: 10.6666666667vw; } } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .p-0 { padding: 0; } @media (min-width: 1440px) { .p-1 { padding: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .p-1 { padding: 0.5555555556vw; } } @media (max-width: 766px) { .p-1 { padding: 2.1333333333vw; } } @media (min-width: 1440px) { .p-2 { padding: 16px; } } @media (min-width: 767px) and (max-width: 1440px) { .p-2 { padding: 1.1111111111vw; } } @media (max-width: 766px) { .p-2 { padding: 4.2666666667vw; } } @media (min-width: 1440px) { .p-3 { padding: 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .p-3 { padding: 1.6666666667vw; } } @media (max-width: 766px) { .p-3 { padding: 6.4vw; } } @media (min-width: 1440px) { .px-1 { padding-left: 8px; padding-right: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .px-1 { padding-left: 0.5555555556vw; padding-right: 0.5555555556vw; } } @media (max-width: 766px) { .px-1 { padding-left: 2.1333333333vw; padding-right: 2.1333333333vw; } } @media (min-width: 1440px) { .px-2 { padding-left: 16px; padding-right: 16px; } } @media (min-width: 767px) and (max-width: 1440px) { .px-2 { padding-left: 1.1111111111vw; padding-right: 1.1111111111vw; } } @media (max-width: 766px) { .px-2 { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } @media (min-width: 1440px) { .py-2 { padding-top: 16px; padding-bottom: 16px; } } @media (min-width: 767px) and (max-width: 1440px) { .py-2 { padding-top: 1.1111111111vw; padding-bottom: 1.1111111111vw; } } @media (max-width: 766px) { .py-2 { padding-top: 4.2666666667vw; padding-bottom: 4.2666666667vw; } } @media (min-width: 1440px) { .px-3 { padding-left: 24px !important; padding-right: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .px-3 { padding-left: 1.6666666667vw !important; padding-right: 1.6666666667vw !important; } } @media (max-width: 766px) { .px-3 { padding-left: 6.4vw !important; padding-right: 6.4vw !important; } } @media (min-width: 1440px) { .pt-1 { padding-top: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-1 { padding-top: 0.5555555556vw; } } @media (max-width: 766px) { .pt-1 { padding-top: 2.1333333333vw; } } @media (min-width: 1440px) { .pt-2 { padding-top: 16px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-2 { padding-top: 1.1111111111vw; } } @media (max-width: 766px) { .pt-2 { padding-top: 4.2666666667vw; } } @media (min-width: 1440px) { .pt-4 { padding-top: 32px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-4 { padding-top: 2.2222222222vw; } } @media (max-width: 766px) { .pt-4 { padding-top: 8.5333333333vw; } } @media (min-width: 1440px) { .pt-7 { padding-top: 56px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-7 { padding-top: 3.8888888889vw; } } @media (max-width: 766px) { .pt-7 { padding-top: 14.9333333333vw; } } @media (min-width: 1440px) { .pt-5 { padding-top: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-5 { padding-top: 2.7777777778vw; } } @media (max-width: 766px) { .pt-5 { padding-top: 10.6666666667vw; } } @media (min-width: 1440px) { .pt-md-3 { padding-top: 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-md-3 { padding-top: 1.6666666667vw; } } @media (min-width: 1440px) { .pt-md-5 { padding-top: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-md-5 { padding-top: 2.7777777778vw; } } @media (min-width: 1440px) { .pt-6 { padding-top: 48px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-6 { padding-top: 3.3333333333vw; } } @media (max-width: 766px) { .pt-6 { padding-top: 12.8vw; } } @media (min-width: 1440px) { .pt-md-6 { padding-top: 56px; } } @media (min-width: 767px) and (max-width: 1440px) { .pt-md-6 { padding-top: 3.8888888889vw; } } @media (min-width: 1440px) { .pb-1 { padding-bottom: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .pb-1 { padding-bottom: 0.5555555556vw; } } @media (max-width: 766px) { .pb-1 { padding-bottom: 2.1333333333vw; } } @media (min-width: 1440px) { .pb-2 { padding-bottom: 16px; } } @media (min-width: 767px) and (max-width: 1440px) { .pb-2 { padding-bottom: 1.1111111111vw; } } @media (max-width: 766px) { .pb-2 { padding-bottom: 4.2666666667vw; } } @media (min-width: 1440px) { .pb-5 { padding-bottom: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .pb-5 { padding-bottom: 2.7777777778vw; } } @media (max-width: 766px) { .pb-5 { padding-bottom: 10.6666666667vw; } } @media (min-width: 1440px) { .pb-15 { padding-bottom: 120px; } } @media (min-width: 767px) and (max-width: 1440px) { .pb-15 { padding-bottom: 8.3333333333vw; } } @media (max-width: 766px) { .pb-15 { padding-bottom: 32vw; } } @media (max-width: 766px) { .px-mob-0 { padding-left: 0 !important; padding-right: 0 !important; } } @media (min-width: 1440px) { .px-md-3 { padding-left: 24px; padding-right: 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .px-md-3 { padding-left: 1.6666666667vw; padding-right: 1.6666666667vw; } } .show-disabled.show { display: none !important; } .p-0 { padding: 0 !important; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } @media (min-width: 1440px) { .mt-0_5 { margin-top: 4px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-0_5 { margin-top: 0.2777777778vw !important; } } @media (max-width: 766px) { .mt-0_5 { margin-top: 1.0666666667vw !important; } } @media (min-width: 1440px) { .mt-1_5 { margin-top: 12px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-1_5 { margin-top: 0.8333333333vw !important; } } @media (max-width: 766px) { .mt-1_5 { margin-top: 3.2vw !important; } } @media (min-width: 1440px) { .mt-2_5 { margin-top: 20px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .mt-2_5 { margin-top: 1.3888888889vw !important; } } @media (max-width: 766px) { .mt-2_5 { margin-top: 5.3333333333vw !important; } } @media (min-width: 1440px) { .gap-1_5 { gap: 12px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .gap-1_5 { gap: 0.8333333333vw !important; } } @media (max-width: 766px) { .gap-1_5 { gap: 3.2vw !important; } } @media (min-width: 1440px) { .gap-2 { gap: 16px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .gap-2 { gap: 1.1111111111vw !important; } } @media (max-width: 766px) { .gap-2 { gap: 4.2666666667vw !important; } } @media (min-width: 1440px) { .gap-3 { gap: 24px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .gap-3 { gap: 1.6666666667vw !important; } } @media (max-width: 766px) { .gap-3 { gap: 6.4vw !important; } } .gap-1 { gap: 8px; } @media (min-width: 1440px) { .gap-md-5 { gap: 40px !important; } } @media (min-width: 767px) and (max-width: 1440px) { .gap-md-5 { gap: 2.7777777778vw !important; } } .flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .bg-grayLight { background-color: #f5f8fa; } .border-light { border: 1px solid #dee3e8; border-radius: 20px; } @media (min-width: 767px) and (max-width: 1440px) { .border-light { border-radius: 1.3888888889vw; } } @media (max-width: 766px) { .border-light { border-radius: 5.3333333333vw; } } .hover-gradient-border { position: relative; } .hover-gradient-border::before { content: " "; border-radius: 20px; border: 2px solid transparent; /*2*/ background: radial-gradient(127.34% 17697.86% at -11.84% 50%, #f36dff 0%, #8745fe 49.35%, #17bae5 100%) border-box; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; pointer-events: none; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 767px) and (max-width: 1440px) { .hover-gradient-border::before { border-radius: 1.3888888889vw; } } @media (max-width: 766px) { .hover-gradient-border::before { border-radius: 5.3333333333vw; } } .hover-gradient-border .on-parent-hover { position: relative; } .hover-gradient-border .on-parent-hover img { position: relative; z-index: 12; } .hover-gradient-border .on-parent-hover::before { content: " "; background: radial-gradient(127.34% 17697.86% at -11.84% 50%, #f36dff 0%, #8745fe 49.35%, #17bae5 100%) border-box; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: all 0.3s ease; } .hover-gradient-border .on-parent-hover::after { content: " "; background: #fff; -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; pointer-events: none; z-index: 0; transition: all 0.3s ease; } .hover-gradient-border .on-parent-hover.hexagon img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .hover-gradient-border:hover .on-parent-hover.hexagon img { -webkit-transform: scale(0.85); transform: scale(0.85); } .hover-gradient-border:hover::before { opacity: 1; } .gap-0 { gap: 0; } .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .justify-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-space-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .bg-white { background-color: #fff !important; } .text-green { color: #10c38d !important; } .text-red { color: #fc3a20 !important; } .text-black { color: #191a26 !important; } .text-white { color: #fff !important; } .border-radius-50 { border-radius: 50% !important; } .text-purple { color: #8e35ff !important; } .text-white { color: #fff !important; } .flex-column { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } .flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .border-radius-50 { border-radius: 50% !important; } .border-radius-50.button::before { border-radius: 50% !important; } .text-decoration-unset { display: inline-block; text-decoration: unset; color: inherit; } @media (min-width: 767px) { .flex-md-row { -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -ms-flex-direction: row !important; flex-direction: row !important; } } @media (min-width: 767px) { .justify-md-space-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } } @media (min-width: 767px) { .justify-md-start { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } } .font-medium { font-weight: 500; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } @media (max-width: 766px) { .text-mob-center { text-align: center; } } @media (max-width: 766px) { .align-mob-center { -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } } @media (max-width: 766px) { .align-mob-unset { -webkit-box-align: unset !important; -ms-flex-align: unset !important; align-items: unset !important; } } @media (max-width: 766px) { .justify-mob-center { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } } @media (max-width: 766px) { .justify-mob-space-between { -webkit-box-pack: justify !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } } @media (max-width: 766px) { .text-mob-16 { font-size: 4.2666666667vw !important; } } @media (max-width: 766px) { .text-mob-20 { font-size: 5.3333333333vw !important; } } .text-left { text-align: left !important; } .text-semibold { font-weight: 600; } .text-bold { font-weight: 700 !important; } .text-semibold { font-weight: 600 !important; } .text-regular { font-weight: 400 !important; } @media (min-width: 767px) { .text-md-unset { text-align: unset; } } .nowrap { white-space: nowrap; } .w-100 { width: 100%; } @media (max-width: 766px) { .w-mob-100 { width: 100%; } } .vertical-divider { width: 0; height: 24px; border-left: 1px solid #dee3e8; } @media (min-width: 767px) and (max-width: 1440px) { .vertical-divider { border-width: 1.6666666667vw; height: 0.0694444444vw; } } @media (max-width: 766px) { .vertical-divider { border-width: 6.4vw; height: 0.2666666667vw; } } html { scroll-behavior: smooth; } form { margin: 0; } .divider { height: 1px; width: 100%; } .divider.white { border-top: 1px solid rgba(255, 255, 255, 0.16); } .divider.light-gray { border-top: 1px solid #dee3e8; } .border-unset { border: unset !important; } .progress-bar { background-color: #f5f8fa; height: 6px; border-radius: 4px; position: relative; } .progress-bar__inner { position: absolute; left: 0; height: 100%; border-radius: 4px; background-color: #10c38d; } @media (min-width: 767px) and (max-width: 1440px) { .progress-bar { height: 0.4166666667vw; border-radius: 0.2777777778vw; } .progress-bar__inner { border-radius: 0.2777777778vw; } } @media (max-width: 766px) { .progress-bar { height: 1.6vw; border-radius: 1.0666666667vw; } .progress-bar__inner { border-radius: 1.0666666667vw; } } .progress-circle-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .progress-circle-bar__quantity { font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8e35ff; } .progress-circle-bar__svg { --size: 250px; --half-size: calc(var(--size) / 2); --stroke-width: 20px; --radius: calc((var(--size) - var(--stroke-width)) / 2); --circumference: calc(var(--radius) * pi * 2); --dash: calc((var(--progress) * var(--circumference)) / 100); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .progress-circle-bar__svg circle { cx: var(--half-size); cy: var(--half-size); r: var(--radius); stroke-width: var(--stroke-width); fill: none; stroke-linecap: round; } .progress-circle-bar__svg circle.fg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: var(--half-size) var(--half-size); transform-origin: var(--half-size) var(--half-size); stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash)); -webkit-transition: stroke-dasharray 0.3s linear 0s; transition: stroke-dasharray 0.3s linear 0s; stroke: #8e35ff; } .progress-circle-bar__svg circle.bg { stroke: #dee3e8; } .progress-circle-bar__svg { width: 20px; height: 20px; } .progress-circle-bar.md .progress-circle-bar__svg { width: 24px; height: 24px; } @media (min-width: 767px) and (max-width: 1440px) { .progress-circle-bar { gap: 0.5555555556vw; } .progress-circle-bar__quantity { font-size: 1.1111111111vw; } .progress-circle-bar__svg { width: 1.3888888889vw; height: 1.3888888889vw; } .progress-circle-bar.md .progress-circle-bar__svg { width: 1.6666666667vw; height: 1.6666666667vw; } } @media (max-width: 766px) { .progress-circle-bar { gap: 2.1333333333vw; } .progress-circle-bar__quantity { font-size: 4.2666666667vw; } .progress-circle-bar__svg { width: 5.3333333333vw; height: 5.3333333333vw; } .progress-circle-bar.md .progress-circle-bar__svg { width: 6.4vw; height: 6.4vw; } } .gradient-text { background: radial-gradient(127.34% 17697.86% at -11.84% 50%, #f36dff 0%, #8745fe 49.35%, #17bae5 100%); display: inline-block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .disabled-scroll { height: 100dvh; overflow: hidden !important; } .overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1234; background: -webkit-gradient(linear, left bottom, left top, from(rgba(25, 26, 38, 0.4)), to(rgba(25, 26, 38, 0.4))), rgba(142, 53, 255, 0.3); background: linear-gradient(0deg, rgba(25, 26, 38, 0.4), rgba(25, 26, 38, 0.4)), rgba(142, 53, 255, 0.3); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .overlay.show { pointer-events: all; opacity: 1; visibility: visible; } .gradient-hexagon { position: relative; } .gradient-hexagon > div { position: relative; z-index: 12; } .gradient-hexagon.md { width: 120px; height: 120px; } .gradient-hexagon.md::before { content: " "; position: absolute; content: " "; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: all 0.3s ease; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); z-index: 1; } @media (min-width: 767px) and (max-width: 1440px) { .gradient-hexagon.md { width: 8.3333333333vw; height: 8.3333333333vw; } } @media (max-width: 766px) { .gradient-hexagon.md { width: 17.0666666667vw; height: 17.0666666667vw; } } .hexagon { -ms-flex-negative: 0; flex-shrink: 0; position: relative; } .hexagon.grey-border::before { content: " "; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #dee3e8; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .hexagon img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .hexagon.xxs { width: 24px; height: 24px; } .hexagon.s-32 { width: 32px; height: 32px; } .hexagon.s-32 img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .hexagon.xs { width: 40px; height: 40px; } .hexagon.xs img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .hexagon.s-120 { width: 120px; height: 120px; } .hexagon.s-120 img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .hexagon.sm { width: 64px; height: 64px; } .hexagon.sm img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .hexagon.md { width: 80px; height: 80px; } .hexagon.xl { width: 180px; height: 180px; } .hexagon.xxl { width: 280px; height: 280px; } .hexagon.with-border { background-size: contain; background-repeat: no-repeat; background-position: center; } .hexagon.with-border.sm { position: relative; background-image: url(/local/templates/yarkima/css/../images/icons/bg-hexagon-64-64.svg); } .hexagon.s-48 { width: 48px; height: 48px; } .hexagon.s-48 img { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } @media (min-width: 767px) and (max-width: 1440px) { .hexagon.xxs { width: 2.2222222222vw; height: 2.2222222222vw; } .hexagon.xs { width: 2.7777777778vw; height: 2.7777777778vw; } .hexagon.sm { width: 4.4444444444vw; height: 4.4444444444vw; } .hexagon.md { width: 5.5555555556vw; height: 5.5555555556vw; } .hexagon.xl { width: 12.5vw; height: 12.5vw; } .hexagon.xxl { width: 19.4444444444vw; height: 19.4444444444vw; } .hexagon.s-48 { width: 3.3333333333vw; height: 3.3333333333vw; } .hexagon.s-32 { width: 2.2222222222vw; height: 2.2222222222vw; } .hexagon.s-120 { width: 8.3333333333vw; height: 8.3333333333vw; } } @media (max-width: 766px) { .hexagon.xxs { width: 8.5333333333vw; height: 8.5333333333vw; } .hexagon.xs { width: 10.6666666667vw; height: 10.6666666667vw; } .hexagon.sm { width: 17.0666666667vw; height: 17.0666666667vw; } .hexagon.md { width: 21.3333333333vw; height: 21.3333333333vw; } .hexagon.xl { width: 48vw; height: 48vw; } .hexagon.xxl { width: 74.6666666667vw; height: 74.6666666667vw; } .hexagon.s-48 { width: 12.8vw; height: 12.8vw; } .hexagon.s-32 { width: 8.5333333333vw; height: 8.5333333333vw; } .hexagon.s-120 { width: 32vw; height: 32vw; } } .collapse { display: block; max-height: 0px; overflow: hidden; -webkit-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); } .collapse.preview-text { max-height: 98px; } .collapse.preview-text .text { -webkit-box-orient: vertical; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; } .collapse.show { max-height: 99em; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .collapse.show.preview-text .text { -webkit-line-clamp: unset; } @media (min-width: 767px) and (max-width: 1440px) { .collapse.preview-text { height: 6.8055555556vw; } } @media (max-width: 766px) { .collapse.preview-text { height: 26.1333333333vw; } } body { padding: 0; margin: 0; /*width: 100vw;*/ overflow-x: hidden; font-family: "Inter Display", sans-serif; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } @-webkit-keyframes svgAnimation { 0%, 15% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20%, 35% { -webkit-transform: translate(calc(100% + 8px), 0) rotate(180deg); transform: translate(calc(100% + 8px), 0) rotate(180deg); } 40%, 55% { -webkit-transform: translate(calc(100% + 8px), calc(100% + 16px)) rotate(360deg); transform: translate(calc(100% + 8px), calc(100% + 16px)) rotate(360deg); } 60%, 75% { -webkit-transform: translate(0, calc(100% + 16px)) rotate(180deg); transform: translate(0, calc(100% + 16px)) rotate(180deg); } 80%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes svgAnimation { 0%, 15% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20%, 35% { -webkit-transform: translate(calc(100% + 8px), 0) rotate(180deg); transform: translate(calc(100% + 8px), 0) rotate(180deg); } 40%, 55% { -webkit-transform: translate(calc(100% + 8px), calc(100% + 16px)) rotate(360deg); transform: translate(calc(100% + 8px), calc(100% + 16px)) rotate(360deg); } 60%, 75% { -webkit-transform: translate(0, calc(100% + 16px)) rotate(180deg); transform: translate(0, calc(100% + 16px)) rotate(180deg); } 80%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @-webkit-keyframes svgColorAnimation { 0%, 15% { fill: #8e35ff; } 20%, 35% { fill: #1abae4; } 40%, 55% { fill: #f26dff; } 60%, 75% { fill: #fac602; } 80%, 100% { fill: #8e35ff; } } @keyframes svgColorAnimation { 0%, 15% { fill: #8e35ff; } 20%, 35% { fill: #1abae4; } 40%, 55% { fill: #f26dff; } 60%, 75% { fill: #fac602; } 80%, 100% { fill: #8e35ff; } } @-webkit-keyframes svgAnimationBgTile1 { 0%, 16% { opacity: 0; } 20%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } } @keyframes svgAnimationBgTile1 { 0%, 16% { opacity: 0; } 20%, 74% { opacity: 1; } 80%, 100% { opacity: 0; } } @-webkit-keyframes svgAnimationBgTile2 { 0%, 15% { opacity: 1; } 18%, 35% { opacity: 0; } 44%, 100% { opacity: 1; } } @keyframes svgAnimationBgTile2 { 0%, 15% { opacity: 1; } 18%, 35% { opacity: 0; } 44%, 100% { opacity: 1; } } @-webkit-keyframes svgAnimationBgTile4 { 0%, 35% { opacity: 1; } 39%, 55% { opacity: 0; } 64%, 100% { opacity: 1; } } @keyframes svgAnimationBgTile4 { 0%, 35% { opacity: 1; } 39%, 55% { opacity: 0; } 64%, 100% { opacity: 1; } } @-webkit-keyframes svgAnimationBgTile3 { 0%, 55% { opacity: 1; } 58%, 75% { opacity: 0; } 84%, 100% { opacity: 1; } } @keyframes svgAnimationBgTile3 { 0%, 55% { opacity: 1; } 58%, 75% { opacity: 0; } 84%, 100% { opacity: 1; } } .animation-tiles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .animation-tiles .items { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 8px 1fr; grid-template-columns: 1fr 1fr; gap: 8px; } .animation-tiles .item { height: 180px; width: 180px; background-color: #20212f; border-radius: 20px; } .animation-tiles .item-1 { -webkit-animation: svgAnimationBgTile1 8s ease infinite; animation: svgAnimationBgTile1 8s ease infinite; } .animation-tiles .item-2 { -webkit-animation: svgAnimationBgTile2 8s ease infinite; animation: svgAnimationBgTile2 8s ease infinite; } .animation-tiles .item-3 { -webkit-animation: svgAnimationBgTile3 8s ease infinite; animation: svgAnimationBgTile3 8s ease infinite; } .animation-tiles .item-4 { -webkit-animation: svgAnimationBgTile4 8s ease infinite; animation: svgAnimationBgTile4 8s ease infinite; } .animation-tiles .animated-item { position: absolute; width: 180px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-animation: svgAnimation 8s ease infinite; animation: svgAnimation 8s ease infinite; } .animation-tiles .animated-item svg path { -webkit-animation: svgColorAnimation 8s ease infinite; animation: svgColorAnimation 8s ease infinite; } @media (max-width: 766px) { .animation-tiles .items { display: none; } } .auth-page { min-height: 100dvh; } .auth-page .bg { background: #191a26; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .auth-page .content { min-height: 100dvh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .auth-page .auth-form { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 592px; margin-left: auto; margin-right: auto; width: 100%; gap: 24px; } .auth-page .auth-form__result-icon { width: 64px; height: 64px; } .auth-page .auth-form__result-icon svg { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } @media (min-width: 767px) { .auth-page { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } } .subscription-page .bg { background: -webkit-gradient(linear, left bottom, left top, from(rgba(25, 26, 38, 0.8)), to(rgba(25, 26, 38, 0.8))), radial-gradient(114.53% 167.34% at 50% -51.72%, #f36dff 0%, #8745fe 60.5%, #17bae5 100%); background: linear-gradient(0deg, rgba(25, 26, 38, 0.8), rgba(25, 26, 38, 0.8)), radial-gradient(114.53% 167.34% at 50% -51.72%, #f36dff 0%, #8745fe 60.5%, #17bae5 100%); } .subscription-page .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .subscription-page .subscription-result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .subscription-page .subscription-result__image { width: 64px; margin: auto; height: 64px; } .subscription-page .subscription-result__image img { height: 100%; width: 100%; } .subscription-page .subscription-balance { gap: 12px; -ms-grid-columns: 1fr 12px 1fr; grid-template-columns: 1fr 1fr; display: none; -ms-grid-rows: auto 12px auto; grid-template-areas: "subtitle subtitle" "money button"; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; visibility: hidden; opacity: 0; } .subscription-page .subscription-balance__subtitle { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: subtitle; font-size: 16px; font-style: normal; font-weight: 700; line-height: 1.5em; letter-spacing: -0.16px; } .subscription-page .subscription-balance__money { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: money; font-size: 40px; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.4px; text-transform: uppercase; } .subscription-page .subscription-balance__button { -ms-grid-row: 3; -ms-grid-column: 3; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; grid-area: button; } .subscription-page .subscription-balance.show { opacity: 1; visibility: visible; display: -ms-grid; display: grid; } .subscription-page .subscription-form { min-height: 396px; width: 100%; gap: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 560px; } .subscription-page .subscription-form__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 80px; } .subscription-page .subscription__info { padding: 80px 80px 106px; } .subscription-page .subscription__info-title { font-family: "Roboto Flex", sans-serif; font-size: 24px; font-style: normal; font-weight: 800; line-height: 100%; letter-spacing: -0.24px; } .subscription-page .subscription__info-label { font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: #ffffff; } .subscription-page .subscription__info-price { font-weight: 600; font-size: 40px; line-height: 120%; letter-spacing: -0.01em; } .subscription-page .subscription__info-price span { font-size: 18px; font-style: normal; font-weight: 600; line-height: 24px; /* 133.333% */ letter-spacing: -0.18px; } .subscription-page .subscription__info-text { font-size: 14px; font-style: normal; font-weight: 600; line-height: 1.25em; letter-spacing: -0.14px; } .subscription-page .subscription__info-label { font-size: 18px; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: -0.18px; } .subscription-page .subscription__info-add-text { font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.25em; /* 142.857% */ letter-spacing: -0.14px; opacity: 0.4; } @media (min-width: 767px) { .subscription-page main { display: -ms-grid; display: grid; min-height: 100dvh; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .subscription-page .content { min-height: 100dvh; } } @media (min-width: 767px) and (max-width: 1440px) { .subscription-page .subscription-result__image { width: 4.4444444444vw; height: 4.4444444444vw; } .subscription-page .subscription-balance { gap: 0.8333333333vw; } .subscription-page .subscription-balance__subtitle { font-size: 1.1111111111vw; line-height: 1.5em; } .subscription-page .subscription-balance__money { font-size: 2.7777777778vw; line-height: 120%; } .subscription-page .subscription-form { min-height: 27.5vw; gap: 2.7777777778vw; max-width: 38.8888888889vw; } .subscription-page .subscription-form__container { padding-bottom: 12.5vw; } .subscription-page .subscription__info { padding: 5.5555555556vw 5.5555555556vw 11.5277777778vw; } .subscription-page .subscription__info-title { font-size: 1.6666666667vw; } .subscription-page .subscription__info-label { font-size: 1.25vw; line-height: 1.5em; } .subscription-page .subscription__info-price { font-size: 2.7777777778vw; line-height: 120%; } .subscription-page .subscription__info-price span { font-size: 1.25vw; } .subscription-page .subscription__info-text { font-size: 0.9722222222vw; } .subscription-page .subscription__info-label { font-size: 1.25vw; line-height: 1.5em; } .subscription-page .subscription__info-add-text { font-size: 0.9722222222vw; font-style: normal; font-weight: 500; line-height: 1.25em; opacity: 0.4; } } @media (max-width: 766px) { .subscription-page main { margin-top: 4.2666666667vw; } .subscription-page .subscription-result { margin-top: 18.6666666667vw; } .subscription-page .subscription-result__image { width: 17.0666666667vw; height: 17.0666666667vw; } .subscription-page .subscription-balance { gap: 3.2vw; } .subscription-page .subscription-balance__subtitle { font-size: 4.2666666667vw; line-height: 1.5rem; } .subscription-page .subscription-balance__money { font-size: 10.6666666667vw; } .subscription-page .subscription-form { margin-top: 6.4vw; margin-left: 4.2666666667vw; margin-right: 4.2666666667vw; gap: 6.4vw; } .subscription-page .subscription-form__container { padding-bottom: 21.3333333333vw; } .subscription-page .subscription__info { margin-left: 4.2666666667vw; margin-right: 4.2666666667vw; border-radius: 5.3333333333vw; padding: 6.4vw 4.2666666667vw; } .subscription-page .subscription__info-image { width: 12.8vw; height: 12.8vw; } .subscription-page .subscription__info-title { font-size: 5.3333333333vw; } .subscription-page .subscription__info-label { font-size: 4.2666666667vw; line-height: 6.4vw; } .subscription-page .subscription__info-value { gap: 2.1333333333vw; } .subscription-page .subscription__info-price { font-size: 6.4vw; } .subscription-page .subscription__info-price span { font-size: 3.7333333333vw; } .subscription-page .subscription__info-text { font-size: 3.2vw; line-height: 1.5em; /* 150% */ } .subscription-page .subscription__info-label { font-size: 4.8vw; line-height: 6.4vw; letter-spacing: -0.0112em; } .subscription-page .subscription__info-add-text { font-size: 3.2vw; line-height: 4.8vw; letter-spacing: -0.0075em; } } .breadcrumbs { margin: 0 4px; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 21px; } .breadcrumbs li { font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; text-transform: uppercase; position: relative; color: #8b8e9a; padding-top: 2px; padding-bottom: 2px; } .breadcrumbs li::after { content: "/"; position: absolute; right: -13px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .breadcrumbs li:last-child::after { display: none; } .breadcrumbs li a { color: inherit; text-decoration: none; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 766px) { .breadcrumbs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (min-width: 767px) and (max-width: 1440px) { .breadcrumbs { margin: 0 0.2777777778vw; gap: 1.4583333333vw; } .breadcrumbs li { font-size: 0.9722222222vw; padding-top: 0.1388888889vw; padding-bottom: 0.1388888889vw; } .breadcrumbs li::after { right: -0.9027777778vw; } } @media (max-width: 766px) { .breadcrumbs { margin: 0 1.0666666667vw; gap: 5.6vw; } .breadcrumbs li { font-size: 3.7333333333vw; padding-top: 0.5333333333vw; padding-bottom: 0.5333333333vw; } .breadcrumbs li::after { right: -3.4666666667vw; } } .title.big { font-family: "Roboto Flex", sans-serif; font-weight: 800; line-height: 120%; letter-spacing: -0.01em; color: #191a26; } .title.medium { font-family: "Roboto Flex", sans-serif; font-weight: 800; line-height: 100%; letter-spacing: -0.01em; color: #191a26; } .title.small { font-family: "Roboto Flex", sans-serif; font-style: normal; font-weight: 800; line-height: 100%; letter-spacing: -0.01em; color: #191a26; } .title.xl { font-weight: 800; font-size: 60px; line-height: 120%; letter-spacing: -0.01em; color: #191a26; } .title.center { text-align: center; } @media (min-width: 1440px) { .title.big { font-size: 40px; } .title.medium { font-size: 24px; } .title.small { font-size: 20px; } } @media (min-width: 767px) and (max-width: 1440px) { .title.big { font-size: 2.7777777778vw; } .title.medium { font-size: 1.6666666667vw; } .title.small { font-size: 1.3888888889vw; } .title.xl { font-size: 4.1666666667vw; } } @media (max-width: 766px) { .title.big { font-size: 8vw; line-height: 120%; } .title.medium { font-size: 6.4vw; } .title.small { font-size: 5.3333333333vw; } .title.xl { font-size: 8vw; line-height: 120%; } } .subtitle { color: #191a26; } .subtitle.sm { font-style: normal; font-weight: 700; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; } .subtitle.md { font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.25em; letter-spacing: -0.01em; } .subtitle.lg { font-weight: 600; font-size: 18px; line-height: 1.5em; letter-spacing: -0.01em; } .subtitle.xxl { font-weight: 600; font-size: 20px; line-height: 1.5em; letter-spacing: -0.01em; } @media (min-width: 767px) and (max-width: 1440px) { .subtitle.sm { font-size: 0.9722222222vw; } .subtitle.md { font-size: 1.1111111111vw; } .subtitle.lg { font-size: 1.25vw; } .subtitle.xxl { font-weight: 600; font-size: 20px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; } } @media (max-width: 766px) { .subtitle.sm { font-size: 3.7333333333vw; } .subtitle.md { font-size: 4.2666666667vw; } .subtitle.lg { font-size: 4.8vw; } .subtitle.xxl { font-size: 5.3333333333vw; } } .text { letter-spacing: -0.01em; font-family: "Inter", sans-serif; } .text.xs { font-size: 12px; line-height: 1.125em; } .text.sm { font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; } @media (min-width: 767px) and (max-width: 1440px) { .text.sm { font-size: 0.9722222222vw; } .text.xs { font-size: 0.8333333333vw; } } @media (max-width: 766px) { .text.xs { font-size: 3.2vw; } .text.sm { font-size: 3.7333333333vw; } } .button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; border: unset; cursor: pointer; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: unset; padding-left: 0; padding-right: 0; font-family: "Inter Display", sans-serif; z-index: 1; } .button.simple { font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.25em; color: #8e35ff; } .button.outlined { background: #ffffff; border: 1px solid #dee3e8; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; text-transform: uppercase; color: #191a26; font-family: "Inter", sans-serif; border-radius: 24px; position: relative; } .button.outlined .icon { color: #191a26; } .button.outlined::before { -webkit-box-sizing: border-box; box-sizing: border-box; content: " "; position: absolute; left: -1px; top: -1px; bottom: -1px; right: -1px; border-radius: 24px; pointer-events: none; border: 2px solid #8e35ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .button.outlined:hover { border-color: #8e35ff; } .button.outlined:hover::before { opacity: 1; } .button.basic { background: #ffffff; border: 1px solid transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; text-transform: uppercase; color: #191a26; font-family: "Inter", sans-serif; border-radius: 24px; position: relative; } .button.basic:hover { background: #f5f8fa; } .button.default { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 99999px; font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; text-transform: uppercase; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; color: #ffffff; position: relative; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: unset; padding: 8px 16px; } .button.default svg { --icon-color: #fff; } .button.default .icon { color: #fff; } .button.default::before { content: " "; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: radial-gradient(114.53% 167.34% at 50% -51.72%, #f36dff 0%, #8745fe 60.5%, #17bae5 100%); z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .button.default::after { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; content: " "; border-radius: 35px; border: 2px solid #fff; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .button.default:hover { background: unset; background-color: #8e35ff; } .button.default:hover:after { opacity: 1; } .button.lg { min-width: 60px; font-size: 16px; border-radius: 60px; min-height: 60px; } .button.lg::before { border-radius: 60px; } .button.xl { border-radius: 66px; min-height: 66px; min-width: 66px; } .button.xl::before { border-radius: 66px; } .button.md { font-size: 16px; min-height: 40px; padding: 8px 16px; } .button.disabled { background: #f5f8fa; border-radius: 99999px; color: #b9bdcc; pointer-events: none; border-color: #f5f8fa; } .button.disabled::before { background: #f5f8fa; } .button__set-active { width: 48px; height: 48px; position: relative; border-radius: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .button__set-active::before, .button__set-active::after { content: ""; position: absolute; width: 24px; height: 24px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-position: center; background-repeat: no-repeat; background-size: contain; } .button__set-active::before { opacity: 0; background-image: url(/local/templates/yarkima/css/../images/icons/icon-eye_dark.svg); } .button__set-active::after { opacity: 1; background-image: url(/local/templates/yarkima/css/../images/icons/icon-eye-off.svg); } .button__set-active.show::before { opacity: 1; } .button__set-active.show::after { opacity: 0; } .button__set-active:hover { background-color: #f5f8fa; } .button.button-favourite { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; } .button.button-favourite::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.58737 8.23597L11.1849 3.00376C11.5183 2.33208 12.4817 2.33208 12.8151 3.00376L15.4126 8.23597L21.2215 9.08017C21.9668 9.18848 22.2638 10.0994 21.7243 10.6219L17.5217 14.6918L18.5135 20.4414C18.6409 21.1798 17.8614 21.7428 17.1945 21.3941L12 18.678L6.80547 21.3941C6.1386 21.7428 5.35909 21.1798 5.48645 20.4414L6.47825 14.6918L2.27575 10.6219C1.73617 10.0994 2.03322 9.18848 2.77852 9.08017L8.58737 8.23597Z' stroke='%23B9BDCC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 100%; height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .button.button-favourite .icon { color: #fff; opacity: 0; } .button.button-favourite:hover::before { opacity: 0; } .button.button-favourite:hover .icon { opacity: 1; color: #8e35ff; } .button.button-favourite.active::before { opacity: 0; } .button.button-favourite.active .icon { color: #8e35ff; opacity: 1; } .button.button-favourite:hover::before { opacity: 0; } @media (min-width: 1440px) { .button.md { min-height: 48px; padding: 10px 24px; } .button.xl { min-height: 66px; padding: 12px 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .button.simple { font-size: 0.9722222222vw; line-height: 1.25em; } .button.outlined { border-width: 0.0694444444vw; gap: 0.8333333333vw; font-size: 1.1111111111vw; line-height: 1.5em; border-radius: 1.6666666667vw; } .button.outlined::before { left: -0.0694444444vw; top: -0.0694444444vw; bottom: -0.0694444444vw; right: -0.0694444444vw; border-radius: 1.6666666667vw; border-width: 0.1388888889vw; } .button.basic { gap: 0.8333333333vw; font-size: 1.1111111111vw; line-height: 1.5em; border-radius: 1.6666666667vw; } .button.default { font-size: 1.25vw; line-height: 1.4em; gap: 0.8333333333vw; padding: 0.5555555556vw 1.1111111111vw; } .button.default::after { border-radius: 1.8055555556vw; border-width: 0.1388888889vw; } .button__set-active { width: 3.3333333333vw; height: 3.3333333333vw; } .button__set-active::before, .button__set-active::after { width: 1.6666666667vw; height: 1.6666666667vw; } .button.md { font-size: 1.1111111111vw; min-height: 3.3333333333vw; padding: 0.6944444444vw 1.6666666667vw; } .button.xl { border-radius: 4.5833333333vw; min-height: 4.5833333333vw; padding: 0.8333333333vw 1.6666666667vw; } .button.xl::before { border-radius: 4.5833333333vw; } .button.lg { font-size: 1.1111111111vw; min-width: 4.1666666667vw; min-height: 4.1666666667vw; border-radius: 4.1666666667vw; } .button.lg::before { border-radius: 4.1666666667vw; } .button.xl { min-height: 4.5833333333vw; min-width: 4.5833333333vw; } } @media (max-width: 766px) { .button.simple { font-size: 3.7333333333vw; line-height: 1.25em; } .button.outlined { border-width: 0.2666666667vw; gap: 3.2vw; font-size: 4.2666666667vw; line-height: 1.5em; border-radius: 6.4vw; } .button.outlined::before { left: -0.2666666667vw; top: -0.2666666667vw; bottom: -0.2666666667vw; right: -0.2666666667vw; border-radius: 6.4vw; border-width: 0.5333333333vw; } .button.basic { gap: 3.2vw; font-size: 4.2666666667vw; line-height: 1.5em; border-radius: 6.4vw; } .button.default { font-size: 4.8vw; line-height: 1.4em; gap: 3.2vw; padding: 2.1333333333vw 4.2666666667vw; } .button.default::after { border-radius: 6.9333333333vw; border-width: 0.5333333333vw; } .button.md { font-size: 4.2666666667vw; min-height: 12.8vw; min-width: 12.8vw; padding: 2.6666666667vw 6.4vw; } .button.xl { min-height: 17.6vw; min-width: 17.6vw; padding: 3.2vw 6.4vw; border-radius: 9.6vw; } .button.lg { font-size: 4.2666666667vw; min-height: 16vw; min-width: 16vw; border-radius: 9.0666666667vw; } .button.lg::before { border-radius: 9.0666666667vw; } .button.xs { min-height: 10.6666666667vw; min-width: 10.6666666667vw; padding: 2.1333333333vw 6.4vw; font-size: 4.2666666667vw; } .button.xl { min-height: 17.6vw; min-width: 17.6vw; } .button.xl::before { border-radius: 17.6vw; } .button.mob-sm { min-height: 12.8vw; padding: 2.6666666667vw 6.4vw; font-size: 4.2666666667vw; } .button__set-active { width: 8.5333333333vw; height: 8.5333333333vw; } .button__set-active::before, .button__set-active::after { width: 6.4vw; height: 6.4vw; } } .form__status { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; border-radius: 99px; -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; text-align: center; font-family: "Inter Display", sans-serif; font-size: 14px; font-style: normal; font-weight: 600; line-height: 1.25em; letter-spacing: -0.14px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form__status.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .form__status.success { background: rgba(16, 195, 141, 0.12); color: #10c38d; background: rgba(16, 195, 141, 0.12); } .form__status.error { background: rgba(252, 58, 32, 0.12); color: #fc3a20; } .form-input__status { min-width: 146px; right: 0; top: 0; bottom: 0; position: absolute; } .form-variant { min-height: 48px; padding: 6px 20px; background: #ffffff; border: 2px solid transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 40px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; } .form-variant::before { content: " "; border-radius: 40px; z-index: 0; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 1px solid #dee3e8; } .form-variant__title { font-weight: 600; font-size: 16px; line-height: 1.5em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; letter-spacing: -0.01em; color: #191a26; } .form-variant__number { font-weight: 600; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; padding: 1px; position: relative; } .form-variant__number span { width: 30px; height: 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background-color: #fff; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; position: relative; z-index: 12; padding-right: 1px; } .form-variant__number::before { content: ""; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #dee3e8; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .form-variant.active { border-color: #8e35ff; } .form-variant.active::before { border-color: #8e35ff; } .form-variant.active .form-variant__number span { color: #fff; background-color: #8e35ff; } .form-variant.active .form-variant__number::before { background-color: #8e35ff; } @media (min-width: 767px) and (max-width: 1440px) { .form-variant { min-height: 3.3333333333vw; padding: 0.4166666667vw 1.3888888889vw; border-width: 0.1388888889vw; border-radius: 2.7777777778vw; } .form-variant::before { border-radius: 2.7777777778vw; position: absolute; top: -0.1388888889vw; right: -0.1388888889vw; bottom: -0.1388888889vw; left: -0.1388888889vw; border-width: 0.0694444444vw; } .form-variant__title { font-size: 1.1111111111vw; } .form-variant__number { font-size: 1.1111111111vw; padding: 0.0694444444vw; } .form-variant__number span { width: 2.0833333333vw; height: 2.0833333333vw; padding-right: 0.0694444444vw; } } @media (max-width: 766px) { .form-variant { min-height: 12.8vw; padding: 1.6vw 5.3333333333vw; border-width: 0.5333333333vw; border-radius: 10.6666666667vw; } .form-variant::before { border-radius: 10.6666666667vw; position: absolute; top: -0.5333333333vw; right: -0.5333333333vw; bottom: -0.5333333333vw; left: -0.5333333333vw; border-width: 0.2666666667vw; } .form-variant__title { font-size: 4.2666666667vw; } .form-variant__number { font-size: 4.2666666667vw; padding: 0.2666666667vw; } .form-variant__number span { width: 8vw; height: 8vw; padding-right: 0.2666666667vw; } } .form-radios { display: -ms-grid; display: grid; } @media (min-width: 1440px) { .form-radios { gap: 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .form-radios { gap: 1.6666666667vw; } } @media (max-width: 766px) { .form-radios { gap: 4.2666666667vw; } } .form-radio__input { text-align: right; padding-left: 24px; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; width: 100%; cursor: pointer; position: relative; } .form-radio__input svg { --icon-color: #b9bdcc; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-radio__input-icon { width: 24px; height: 24px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .form-radio__input-icon path { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-radio__input-icon .inner { fill: #fff; } .form-radio__input-icon .border { stroke: #dee3e8; } .form-radio__input-icon::before, .form-radio__input-icon::after { content: ""; width: 24px; height: 24px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-radio__input-icon::before { background-image: url(/local/templates/yarkima/css/../images/icons/form/checkbox.svg); opacity: 0; } .form-radio__input-icon::after { background-image: url(/local/templates/yarkima/css/../images/icons/form/checkbox-border.svg); } .form-radio__input input { opacity: 0; position: absolute; margin: 0; } .form-radio__input input:checked + .form-radio__input-icon::before { opacity: 1; } .form-radio__input input:checked + .form-radio__input-icon::after { opacity: 0; } .form-radio__input input:checked + .form-radio__input-icon .border { stroke: unset; } .form-radio__input input:checked + .form-radio__input-icon .inner { fill: #8e35ff; } .form-radio__input.with-box { min-height: 60px; border: 1px solid #dee3e8; border-radius: 20px; padding: 10px 24px 10px 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .form-radio__input.with-box .form-radio__input-icon::before, .form-radio__input.with-box .form-radio__input-icon::after { left: 24px; } @media (min-width: 767px) and (max-width: 1440px) { .form-radio__input { padding-left: 1.6666666667vw; font-size: 1.1111111111vw; } .form-radio__input-icon { width: 1.6666666667vw; height: 1.6666666667vw; } .form-radio__input-icon::before, .form-radio__input-icon::after { width: 1.6666666667vw; height: 1.6666666667vw; } .form-radio__input.with-box { min-height: 4.1666666667vw; border-width: 0.0694444444vw; border-radius: 1.3888888889vw; padding: 0.6944444444vw 1.6666666667vw 0.6944444444vw 4.1666666667vw; } .form-radio__input.with-box .form-radio__input-icon::before, .form-radio__input.with-box .form-radio__input-icon::after { left: 1.6666666667vw; } } @media (max-width: 766px) { .form-radio__input { padding-left: 6.4vw; font-size: 4.2666666667vw; } .form-radio__input-icon { width: 6.4vw; height: 6.4vw; } .form-radio__input-icon::before, .form-radio__input-icon::after { width: 6.4vw; height: 6.4vw; } .form-radio__input.with-box { min-height: 16vw; border-width: 0.2666666667vw; border-radius: 5.3333333333vw; padding: 2.6666666667vw 6.4vw 2.6666666667vw 16vw; } .form-radio__input.with-box .form-radio__input-icon::before, .form-radio__input.with-box .form-radio__input-icon::after { left: 6.4vw; } } .form-checkbox-toggler { font-weight: 500; font-size: 18px; line-height: 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; letter-spacing: -0.01em; color: #191a26; } .form-checkbox-toggler input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; } .form-checkbox-toggler__el { width: 72px; height: 40px; border-radius: 30px; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #f5f8fa; position: relative; } .form-checkbox-toggler__el::before { content: " "; position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; background-color: #b9bdcc; border-radius: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-checkbox-toggler input[type=checkbox]:checked + .form-checkbox-toggler__el { background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(60.5%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 60.5%, #17bae5); } .form-checkbox-toggler input[type=checkbox]:checked + .form-checkbox-toggler__el::before { background-color: #fff; -webkit-transform: translateX(32px); transform: translateX(32px); } @media (min-width: 767px) and (max-width: 1440px) { .form-checkbox-toggler { font-size: 1.25vw; } .form-checkbox-toggler__el { width: 5vw; height: 2.7777777778vw; border-radius: 2.0833333333vw; } .form-checkbox-toggler__el::before { left: 0.2777777778vw; top: 0.2777777778vw; width: 2.2222222222vw; height: 2.2222222222vw; } .form-checkbox-toggler input[type=checkbox]:checked + .form-checkbox-toggler__el::before { -webkit-transform: translateX(2.2222222222vw); transform: translateX(2.2222222222vw); } } @media (max-width: 766px) { .form-checkbox-toggler { font-size: 4.8vw; } .form-checkbox-toggler__el { width: 19.2vw; height: 10.6666666667vw; border-radius: 8vw; } .form-checkbox-toggler__el::before { left: 1.0666666667vw; top: 1.0666666667vw; width: 8.5333333333vw; height: 8.5333333333vw; } .form-checkbox-toggler input[type=checkbox]:checked + .form-checkbox-toggler__el::before { -webkit-transform: translateX(2.2222222222vw); transform: translateX(2.2222222222vw); } } .form-toggler { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; padding: 4px; background: #ffffff; border: 1px solid #dee3e8; border-radius: 99999px; } .form-toggler svg { width: 24px; height: 24px; } .form-toggler__input { cursor: pointer; width: 40px; min-height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form-toggler__input svg { --icon-color: #b9bdcc; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-toggler__input input { opacity: 0; position: absolute; margin: 0; } .form-toggler__input input:checked + svg { --icon-color: #191a26; } .form-toggler__input.active svg { --icon-color: #191a26; } @media (min-width: 767px) and (max-width: 1440px) { .form-toggler { gap: 0.2777777778vw; padding: 0.2777777778vw; border-width: 0.0694444444vw; } .form-toggler svg { width: 1.6666666667vw; height: 1.6666666667vw; } .form-toggler__input { width: 2.7777777778vw; min-height: 2.7777777778vw; } } @media (max-width: 766px) { .form-toggler { gap: 1.0666666667vw; padding: 1.0666666667vw; border-width: 0.2666666667vw; } .form-toggler svg { width: 6.4vw; height: 6.4vw; } .form-toggler__input { width: 10.6666666667vw; min-height: 10.6666666667vw; } } .form-checkbox { padding-left: 32px; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; width: 100%; cursor: pointer; position: relative; font-family: "Inter Display", sans-serif; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .form-checkbox svg { --icon-color: #b9bdcc; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-checkbox__input { opacity: 0; position: absolute; margin: 0; } .form-checkbox__input-icon { width: 24px; height: 24px; position: absolute; left: 0; top: 2px; } .form-checkbox__input-icon path { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-checkbox__input-icon .inner { fill: #fff; } .form-checkbox__input-icon .border { stroke: #dee3e8; } .form-checkbox__input-icon::before, .form-checkbox__input-icon::after { content: ""; width: 24px; height: 24px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-checkbox__input-icon::before { background-image: url(/local/templates/yarkima/css/../images/icons/form/checkbox.svg); opacity: 0; } .form-checkbox__input-icon::after { background-image: url(/local/templates/yarkima/css/../images/icons/form/checkbox-border.svg); } .form-checkbox__input:checked + .form-checkbox__input-icon::before { opacity: 1; } .form-checkbox__input:checked + .form-checkbox__input-icon::after { opacity: 0; } .form-checkbox__input:checked + .form-checkbox__input-icon .border { stroke: unset; } .form-checkbox__input:checked + .form-checkbox__input-icon .inner { fill: #8e35ff; } @media (min-width: 767px) and (max-width: 1440px) { .form-checkbox { padding-left: 2.2222222222vw; font-size: 1.1111111111vw; font-size: 0.9722222222vw; } .form-checkbox__input-icon { width: 1.6666666667vw; height: 1.6666666667vw; top: 0.1388888889vw; } .form-checkbox__input-icon::before, .form-checkbox__input-icon::after { width: 1.6666666667vw; height: 1.6666666667vw; } } @media (max-width: 766px) { .form-checkbox { padding-left: 8.5333333333vw; font-size: 4.2666666667vw; font-size: 3.7333333333vw; } .form-checkbox__input-icon { width: 6.4vw; height: 6.4vw; top: 0.5333333333vw; } .form-checkbox__input-icon::before, .form-checkbox__input-icon::after { width: 6.4vw; height: 6.4vw; } } .form-dropdown { position: relative; display: inline-block; } .form-dropdown .button.outlined { padding-left: 20px; padding-right: 20px; } .form-dropdown__item { color: black; padding: 12px 24px; text-decoration: none; display: block; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-dropdown__item + .form-dropdown__item { margin-top: 8px; } .form-dropdown__item:hover { background-color: #8e35ff; color: #fff; } .form-dropdown__content { display: none; position: absolute; top: calc(100% + 16px); z-index: 12; width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: #f1f1f1; min-width: 160px; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; max-height: 288px; background: #ffffff; border: 1px solid #dee3e8; border-radius: 20px; pointer-events: none; } .form-dropdown.show .button.outlined { border-color: #8e35ff; } .form-dropdown.show .button.outlined .icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form-dropdown.show .button.outlined::before { opacity: 1; } .form-dropdown.show .form-dropdown__content { display: block; pointer-events: all; } @media (min-width: 767px) and (max-width: 1440px) { .form-dropdown .button.outlined { padding-left: 1.3888888889vw; padding-right: 1.3888888889vw; } .form-dropdown__item { padding: 0.8333333333vw 1.6666666667vw; font-size: 1.1111111111vw; } .form-dropdown__item + .form-dropdown__item { margin-top: 0.5555555556vw; } .form-dropdown__content { top: calc(100% + 1.1111111111vw); padding-top: 0.5555555556vw; padding-bottom: 0.5555555556vw; min-width: 11.1111111111vw; max-height: 20vw; border-radius: 1.3888888889vw; } } @media (max-width: 766px) { .form-dropdown .button.outlined { padding-left: 5.3333333333vw; padding-right: 5.3333333333vw; } .form-dropdown__item { padding: 3.2vw 6.4vw; font-size: 4.2666666667vw; } .form-dropdown__item + .form-dropdown__item { margin-top: 2.1333333333vw; } .form-dropdown__content { top: calc(100% + 1.1111111111vw); padding-top: 0.5555555556vw; padding-bottom: 2.1333333333vw; min-width: 42.6666666667vw; max-height: 76.8vw; border-radius: 5.3333333333vw; } } .form-code-inputs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; gap: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form-code-inputs input { cursor: pointer; outline: none; cursor: default; border: 2px solid transparent; width: 86.67px; height: 96px; background: #f7f7f7; border-radius: 20px; font-family: "Inter", sans-serif; font-weight: 500; font-size: 20px; line-height: 28px; text-align: center; letter-spacing: -0.01em; color: #000000; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-code-inputs input:focus { border-color: #8e35ff; } @media (min-width: 767px) { .form-code-inputs input { max-width: 110px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } @media (max-width: 766px) { .form-code-inputs { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form-code-inputs input { height: 72px; width: 100%; max-width: 51px; } } .form-input { position: relative; } .form-input__password-btn { right: 32px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .form-input__label input { border: none; border-bottom: 2px solid #ccc; outline: none; font-size: 18px; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; padding: 10px 0; background: transparent; } .form-input__label input:focus ~ label, .form-input__label input:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 14px; color: #555; pointer-events: none; } .form-input__label input:focus { border-color: #555; } .form-input__label { position: absolute; top: 18px; left: 34px; font-family: "Inter Display", sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; pointer-events: none; -webkit-transition: font-size 0.3s, color 0.3s, -webkit-transform 0.3s; transition: font-size 0.3s, color 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, font-size 0.3s, color 0.3s; transition: transform 0.3s, font-size 0.3s, color 0.3s, -webkit-transform 0.3s; } .form-input__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 12px; line-height: 18px; } .form-input input { outline: none; cursor: default; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; padding-left: 32px; padding-right: 32px; background: #f5f8fa; border-radius: 34px; border: unset; border: 2px solid transparent; min-height: 60px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; color: #191a26; font-family: "Inter Display", sans-serif; } .form-input input:focus { border-color: #8e35ff; background-color: #fff; } .form-input input:focus + .form-input__label { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 12px; } .form-input.with-label input { /*padding-top: 14px;*/ padding-bottom: 0; } .form-input.with-icon { position: relative; } .form-input.with-icon .icon { position: absolute; top: 50%; left: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .form-input.with-icon input { padding-left: 64px; } .form-input.md input { min-height: 48px; } .form-input.lg input { min-height: 66px; } .form-input__value { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 32px; position: absolute; font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 18px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; } @media (min-width: 767px) and (max-width: 1440px) { .form-input__password-btn { right: 25vw 32px; } .form-input__label input { border-width: 0.1388888889vw; font-size: 1.25vw; padding: 0.6944444444vw 0; } .form-input__label input:focus ~ label, .form-input__label input:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 0.9722222222vw; } .form-input__label label { top: 0.6944444444vw; font-size: 1.25vw; } .form-input__label { top: 1.25vw; left: 2.3611111111vw; font-size: 1.1111111111vw; } .form-input__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 0.8333333333vw; line-height: 1.25vw; } .form-input input { font-size: 1.1111111111vw; padding-left: 2.2222222222vw; padding-right: 2.2222222222vw; border-radius: 2.3611111111vw; border-width: 0.1388888889vw; min-height: 4.1666666667vw; font-size: 1.1111111111vw; letter-spacing: -0.01em; } .form-input input:focus + .form-input__label { -webkit-transform: translateY(-0.8333333333vw); transform: translateY(-0.8333333333vw); font-size: 0.8333333333vw; } .form-input.with-label input { padding-top: 0.9722222222vw; } .form-input.with-icon .icon { left: 1.6666666667vw; } .form-input.with-icon input { padding-left: 4.4444444444vw; } .form-input.md input { min-height: 3.3333333333vw; } .form-input.lg input { min-height: 4.5833333333vw; } .form-input__value { right: 2.2222222222vw; font-size: 1.25vw; } } @media (max-width: 766px) { .form-input__password-btn { right: 96vw 32px; } .form-input__label input { border-width: 0.5333333333vw; font-size: 4.8vw; padding: 2.6666666667vw 0; } .form-input__label input:focus ~ label, .form-input__label input:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 3.7333333333vw; } .form-input__label label { top: 2.6666666667vw; font-size: 4.8vw; } .form-input__label { top: 4.8vw; left: 9.0666666667vw; font-size: 4.2666666667vw; } .form-input__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 3.2vw; line-height: 4.8vw; } .form-input input { font-size: 4.2666666667vw; padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; border-radius: 9.0666666667vw; border-width: 0.5333333333vw; min-height: 16vw; font-size: 4.2666666667vw; letter-spacing: -0.01em; } .form-input input:focus + .form-input__label { -webkit-transform: translateY(-3.2vw); transform: translateY(-3.2vw); font-size: 3.2vw; } .form-input.with-label input { /*padding-top: 3.7333333333vw;*/ } .form-input.with-icon .icon { left: 6.4vw; } .form-input.with-icon input { padding-left: 17.0666666667vw; } .form-input.md input { min-height: 12.8vw; } .form-input.lg input { min-height: 17.6vw; } .form-input.mob-sm input { min-height: 10.6666666667vw; } .form-input__value { right: 8.5333333333vw; font-size: 4.8vw; } } .form-select { position: relative; width: 100%; display: inline-block; } .form-select select { width: 100%; min-width: 160px; overflow: auto; max-height: 288px; border: 1px solid #dee3e8; min-height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 36px; position: relative; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; padding-left: 32px; padding-right: 32px; background: #f5f8fa; border: unset; border: 2px solid transparent; min-height: 60px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #191a26; font-family: "Inter Display", sans-serif; } .form-select select::before { content: " "; position: absolute; right: 32px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-image: url(/local/templates/yarkima/css/../images/icons/icon-down.svg); } .form-selected { outline: none; cursor: default; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; background: #f5f8fa; border-radius: 34px; border: unset; min-height: 60px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #8b8e9a; border: 2px solid transparent; font-family: "Inter Display", sans-serif; } .form-selected input { padding-right: 56px; min-height: 56px; pointer-events: none; } .form-selected::before { content: " "; position: absolute; right: 32px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-image: url(/local/templates/yarkima/css/../images/icons/icon-down.svg); } .form-select__options { display: none; position: absolute; top: calc(100% + 16px); z-index: 12345; width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: #f1f1f1; min-width: 100px; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; max-height: 288px; background: #ffffff; border: 1px solid #dee3e8; border-radius: 20px; } .form-select__container { display: inline-block; } .form-select__container.show .form-selected { border-color: #8e35ff; } .form-select__container.show .form-selected::before { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .form-select__container.show .form-select__options { display: block; pointer-events: all; } .form-select__option { color: black; padding: 12px 24px; text-decoration: none; display: block; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .form-select__option + .form-dropdown__item { margin-top: 8px; } .form-select__option:hover { background-color: #8e35ff; color: #fff; } .form-select .form-option { padding: 10px; cursor: pointer; } .form-select .form-option:hover { background-color: #f0f0f0; } .form-select.simple .form-selected { color: #191a26; background-color: #fff; border: 1px solid #dee3e8; } .form-select.simple .form-selected input { background-color: #fff; } .form-select.sm .form-selected { min-width: 73px; width: 73px; min-height: 48px; } .form-select.sm .form-selected input { min-width: 68px; width: 68px; min-height: 46px; text-align: center; padding-left: 10px; padding-top: 2px; font-size: 14px; padding-right: 15px; } .form-select.sm .form-selected::before { right: 8px; } @media (min-width: 767px) and (max-width: 1440px) { .form-select select { min-width: 11.1111111111vw; max-height: 20vw; border-radius: 1.3888888889vw; min-height: 4.1666666667vw; border-radius: 2.5vw; font-size: 1.1111111111vw; padding-left: 2.2222222222vw; padding-right: 2.2222222222vw; border-width: 0.1388888889vw; min-height: 4.1666666667vw; } .form-select select::before { right: 2.2222222222vw; width: 1.1111111111vw; height: 1.1111111111vw; } .form-selected { font-size: 1.1111111111vw; border-radius: 2.3611111111vw; min-height: 4.1666666667vw; border-width: 0.1388888889vw; } .form-selected input { padding-right: 3.8888888889vw; min-height: 3.8888888889vw; } .form-selected::before { right: 2.2222222222vw; width: 1.1111111111vw; height: 1.1111111111vw; } .form-select__options { top: calc(100% + px-to-vw(16px)); padding-top: 0.5555555556vw; padding-bottom: 0.5555555556vw; min-width: 11.1111111111vw; max-height: 20vw; border-width: 0.0694444444vw; border-radius: 1.3888888889vw; } .form-select__option { padding: 0.8333333333vw 1.6666666667vw; font-size: 1.1111111111vw; line-height: 1.5em; } .form-select__option + .form-dropdown__item { margin-top: 0.5555555556vw; } .form-select .form-option { padding: 0.6944444444vw; } .form-select.sm .form-selected { min-width: 5.0694444444vw; width: 5.0694444444vw; min-height: 3.3333333333vw; } .form-select.sm .form-selected input { min-width: 4.7222222222vw; width: 4.7222222222vw; min-height: 3.1944444444vw; padding-left: 0.6944444444vw; padding-top: 0.1388888889vw; font-size: 0.9722222222vw; padding-right: 1.0416666667vw; } .form-select.sm .form-selected::before { right: 0.5555555556vw; } } @media (max-width: 766px) { .form-select select { min-width: 42.6666666667vw; max-height: 76.8vw; border-radius: 5.3333333333vw; min-height: 16vw; border-radius: 9.6vw; font-size: 4.2666666667vw; padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; border-width: 0.5333333333vw; min-height: 16vw; } .form-select select::before { right: 8.5333333333vw; width: 4.2666666667vw; height: 4.2666666667vw; } .form-selected { font-size: 4.2666666667vw; border-radius: 9.0666666667vw; min-height: 16vw; border-width: 0.5333333333vw; } .form-selected input { padding-right: 14.9333333333vw; min-height: 14.9333333333vw; } .form-selected::before { right: 8.5333333333vw; width: 4.2666666667vw; height: 4.2666666667vw; } .form-select__options { top: calc(100% + px-to-vw-mob(16px)); padding-top: 2.1333333333vw; padding-bottom: 2.1333333333vw; min-width: 42.6666666667vw; max-height: 76.8vw; border-width: 0.2666666667vw; border-radius: 5.3333333333vw; } .form-select__option { padding: 3.2vw 6.4vw; font-size: 4.2666666667vw; line-height: 1.5em; } .form-select__option + .form-dropdown__item { margin-top: 2.1333333333vw; } .form-select .form-option { padding: 2.6666666667vw; } .form-select.sm .form-selected { min-width: 19.4666666667vw; width: 19.4666666667vw; min-height: 12.8vw; } .form-select.sm .form-selected input { min-width: 18.1333333333vw; width: 18.1333333333vw; min-height: 12.8vw; padding-left: 2.6666666667vw; padding-top: 0.5333333333vw; font-size: 3.7333333333vw; padding-right: 4vw; } .form-select.sm .form-selected::before { right: 2.1333333333vw; } } @media (min-width: 767px) and (max-width: 1440px) { .form-radio__input { padding-left: 1.6666666667vw; font-size: 1.1111111111vw; line-height: 1.5em; } .form-radio__input-icon { width: 1.6666666667vw; height: 1.6666666667vw; } .form-radio__input-icon::before, .form-radio__input-icon::after { width: 1.6666666667vw; height: 1.6666666667vw; } .form-radio__input.with-box { min-height: 4.1666666667vw; border-width: 0.0694444444vw; border-radius: 1.3888888889vw; padding: 0.6944444444vw 1.6666666667vw 0.6944444444vw 4.1666666667vw; } .form-radio__input.with-box .form-radio__input-icon::before, .form-radio__input.with-box .form-radio__input-icon::after { left: 1.6666666667vw; } } .form__cover-image { height: 480px; width: 480px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #f5f8fa; position: relative; } .form__cover-image-info { padding: 12px 50px; } .form__cover-image input { opacity: 0; position: absolute; } .form__cover-image.md { height: 160px; width: 160px; } @media (min-width: 767px) and (max-width: 1440px) { .form__cover-image { height: 33.3333333333vw; width: 33.3333333333vw; } .form__cover-image-info { padding: 0.8333333333vw 3.4722222222vw; } .form__cover-image.md { height: 11.1111111111vw; width: 11.1111111111vw; } } @media (max-width: 766px) { .form__cover-image { height: 91.4666666667vw; width: 91.4666666667vw; } .form__cover-image-info { padding: 3.2vw 13.3333333333vw; } .form__cover-image.md { height: 32vw; width: 32vw; } } .form__sm-image { height: 92px; width: 100%; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; border-radius: 8px; overflow: hidden; display: block; background: #ffffff; border: 1px dashed #dee3e8; border-radius: 8px; } .form__sm-image.filled { border: unset; } .form__sm-image-preview { height: 100%; width: 100%; } .form__sm-image-preview img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .form__sm-image input { opacity: 0; position: absolute; } .form__sm-image-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form-textarea { position: relative; } .form-textarea__password-btn { right: 32px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .form-textarea__label textarea { border: none; border-bottom: 2px solid #ccc; outline: none; font-size: 18px; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; padding: 10px 0; background: transparent; resize: none; } .form-textarea__label textarea:focus ~ label, .form-textarea__label textarea:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 14px; color: #555; pointer-events: none; } .form-textarea__label textarea:focus { border-color: #555; } .form-textarea__label { position: absolute; top: 18px; left: 34px; font-family: "Inter Display", sans-serif; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; pointer-events: none; -webkit-transition: font-size 0.3s, color 0.3s, -webkit-transform 0.3s; transition: font-size 0.3s, color 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, font-size 0.3s, color 0.3s; transition: transform 0.3s, font-size 0.3s, color 0.3s, -webkit-transform 0.3s; } .form-textarea__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 12px; line-height: 18px; } .form-textarea textarea { outline: none; cursor: default; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; padding-left: 32px; padding-right: 32px; background: #f5f8fa; border-radius: 34px; border: unset; border: 2px solid transparent; min-height: 160px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; color: #191a26; resize: none; font-family: "Inter Display", sans-serif; } .form-textarea textarea:focus { border-color: #8e35ff; background-color: #fff; } .form-textarea textarea:focus + .form-input__label { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 12px; } .form-textarea.with-label textarea { padding-top: 30px; padding-bottom: 0; resize: none; } .form-textarea.with-icon { position: relative; } .form-textarea.with-icon .icon { position: absolute; top: 50%; left: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .form-textarea.with-icon input { padding-left: 64px; } .form-textarea.md input { min-height: 48px; } @media (min-width: 767px) and (max-width: 1440px) { .form-textarea__password-btn { right: 25vw 32px; } .form-textarea__label textarea { border-width: 0.1388888889vw; font-size: 1.25vw; padding: 0.6944444444vw 0; } .form-textarea__label textarea:focus ~ label, .form-textarea__label textarea:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 0.9722222222vw; } .form-textarea__label label { top: 0.6944444444vw; font-size: 1.25vw; } .form-textarea__label { top: 1.25vw; left: 2.3611111111vw; font-size: 1.1111111111vw; } .form-textarea__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 0.8333333333vw; line-height: 1.25vw; } .form-textarea textarea { font-size: 1.1111111111vw; padding-left: 2.2222222222vw; padding-right: 2.2222222222vw; border-radius: 2.3611111111vw; border-width: 0.1388888889vw; min-height: 4.1666666667vw; font-size: 1.1111111111vw; letter-spacing: -0.01em; } .form-textarea textarea:focus + .form-input__label { -webkit-transform: translateY(-0.8333333333vw); transform: translateY(-0.8333333333vw); font-size: 0.8333333333vw; } .form-textarea.with-label input { padding-top: 0.9722222222vw; } .form-textarea.with-icon .icon { left: 1.6666666667vw; } .form-textarea.with-icon input { padding-left: 4.4444444444vw; } .form-textarea.md input { min-height: 3.3333333333vw; } } @media (max-width: 766px) { .form-textarea__password-btn { right: 96vw 32px; } .form-textarea__label textarea { border-width: 0.5333333333vw; font-size: 4.8vw; padding: 2.6666666667vw 0; } .form-textarea__label textarea:focus ~ label, .form-textarea__label textarea:valid ~ label { -webkit-transform: translateY(-20px); transform: translateY(-20px); font-size: 3.7333333333vw; } .form-textarea__label label { top: 2.6666666667vw; font-size: 4.8vw; } .form-textarea__label { top: 4.8vw; left: 9.0666666667vw; font-size: 4.2666666667vw; } .form-textarea__label.active { -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 3.2vw; line-height: 4.8vw; } .form-textarea textarea { font-size: 4.2666666667vw; padding-left: 8.5333333333vw; padding-right: 8.5333333333vw; border-radius: 9.0666666667vw; border-width: 0.5333333333vw; min-height: 16vw; font-size: 4.2666666667vw; letter-spacing: -0.01em; } .form-textarea textarea:focus + .form-input__label { -webkit-transform: translateY(-3.2vw); transform: translateY(-3.2vw); font-size: 3.2vw; } .form-textarea.with-label input { padding-top: 3.7333333333vw; } .form-textarea.with-icon .icon { left: 6.4vw; } .form-textarea.with-icon input { padding-left: 17.0666666667vw; } .form-textarea.md input { min-height: 12.8vw; } .form-textarea.mob-sm input { min-height: 10.6666666667vw; } } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase !important; } .text-transform-unset { text-transform: unset !important; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tabs__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; } .tabs__button { font-weight: 600; font-size: 16px; line-height: 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; letter-spacing: -0.01em; text-transform: uppercase; color: #191a26; padding: 10px 16px; border-radius: 40px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 2px solid transparent; } .tabs__button:hover { border-color: #8e35ff; } .tabs__button.active { color: #8e35ff; background-color: #f1e6ff; border-color: #f1e6ff; } .tabs__content { display: none; } .tabs__content.active { display: block; -webkit-animation: fadeIn 0.5s ease; animation: fadeIn 0.5s ease; } @media (min-width: 767px) and (max-width: 1440px) { .tabs__header { gap: 0.8333333333vw; } .tabs__button { font-size: 1.1111111111vw; padding: 0.6944444444vw 1.1111111111vw; border-radius: 2.7777777778vw; border-width: 0.1388888889vw; } } @media (max-width: 766px) { .tabs__header { overflow-x: auto; -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; gap: 3.2vw; margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; width: 100vw; } .tabs__header::-webkit-scrollbar { display: none; } .tabs__header::-webkit-scrollbar-track { display: none; } .tabs__header::-webkit-scrollbar-thumb { display: none; } .tabs__header-actions { -webkit-box-pack: row-reverse; -ms-flex-pack: row-reverse; justify-content: row-reverse; } .tabs__button { font-size: 4.2666666667vw; padding: 2.6666666667vw 4.2666666667vw; border-radius: 10.6666666667vw; border-width: 0.5333333333vw; } } .dots-4 { width: 42px; height: 6px; display: inline-block; background: no-repeat center/contain url(/local/templates/yarkima/css/../images/icons/dots-4.svg); } @media (min-width: 767px) and (max-width: 1440px) { .dots-4 { width: 2.9166666667vw; height: 0.4166666667vw; } } @media (max-width: 766px) { .dots-4 { width: 11.2vw; height: 1.6vw; } } .socials { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 14px; } .socials .social-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; position: relative; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .socials .social-link.sm { background-color: #f5f8fa; width: 28px; height: 32px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .socials .social-link.lg { background-color: #f5f8fa; width: 64px; height: 64px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .socials .social-link::before { content: " "; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); } .socials .social-link:hover::before { opacity: 1; } .socials .social-link:hover .icon { color: #fff; } @media (min-width: 767px) and (max-width: 1440px) { .socials { gap: 0.9722222222vw; } .socials .social-link { gap: 0.5555555556vw; } .socials .social-link.sm { width: 1.9444444444vw; height: 2.2222222222vw; } .socials .social-link.lg { width: 4.4444444444vw; height: 4.4444444444vw; } } @media (max-width: 766px) { .socials { gap: 3.7333333333vw; } .socials .social-link { gap: 2.1333333333vw; } .socials .social-link.sm { width: 7.4666666667vw; height: 8.5333333333vw; } .socials .social-link.lg { width: 12.8vw; height: 12.8vw; } .socials .social-link.lg .icon { font-size: 5.3333333333vw; } } .audio-player { padding: 16px 20px; gap: 5px; max-width: 301px; min-height: 59px; background: #f5f8fa; border-radius: 99px; } .audio-player__controls { display: -ms-grid; display: grid; -ms-grid-columns: 20px 16px 1fr 16px 20px; grid-template-columns: 20px 1fr 20px; -ms-grid-rows: auto 5px auto; grid-template-areas: "pause time volume" "progress progress progress"; gap: 5px 16px; } .audio-player.without-time { min-height: 32px; padding: 6px 16px; } .audio-player.without-time .audio-player__controls { -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-template-areas: "pause progress volume"; } .audio-player__button { padding: 0; } .audio-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: pause; } .audio-player.without-time .audio-player__controls > .audio-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .video-player__controls > .audio-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .audio-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: volume; } .audio-player.without-time .audio-player__controls > .audio-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 3; } .video-player__controls > .audio-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 7; } .audio-player__time { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: time; font-weight: 400; font-size: 12px; line-height: 1.125em; letter-spacing: -0.01em; text-align: center; color: #191a26; } .video-player__controls > .audio-player__time { -ms-grid-row: 1; -ms-grid-column: 3; } .audio-player__progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-area: progress; background-color: rgba(0, 0, 0, 0.12); height: 2px; border-radius: 4px; position: relative; } .audio-player.without-time .audio-player__controls > .audio-player__progress { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .video-player__controls > .audio-player__progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 7; } .audio-player__progress__inner { position: absolute; left: 0; height: 100%; border-radius: 4px; background-color: #8e35ff; } @media (min-width: 767px) and (max-width: 1440px) { .audio-player { padding: 1.1111111111vw 1.3888888889vw; gap: 0.3472222222vw; max-width: 20.9027777778vw; min-height: 4.0972222222vw; border-radius: 6.875vw; } .audio-player__controls { -ms-grid-columns: 1.3888888889vw 1.1111111111vw 1fr 1.1111111111vw 1.3888888889vw; grid-template-columns: 1.3888888889vw 1fr 1.3888888889vw; gap: 0.3472222222vw 1.1111111111vw; } .audio-player__time { font-size: 0.8333333333vw; } .audio-player__progress { height: 0.1388888889vw; border-radius: 0.2777777778vw; } .audio-player__progress__inner { border-radius: 0.2777777778vw; } } @media (max-width: 766px) { .audio-player { padding: 4.2666666667vw 5.3333333333vw; gap: 1.3333333333vw; max-width: 80.2666666667vw; min-height: 15.7333333333vw; border-radius: 26.4vw; } .audio-player__controls { -ms-grid-columns: 5.3333333333vw 4.2666666667vw 1fr 4.2666666667vw 5.3333333333vw; grid-template-columns: 5.3333333333vw 1fr 5.3333333333vw; gap: 1.3333333333vw 4.2666666667vw; } .audio-player__time { font-size: 3.2vw; } .audio-player__progress { height: 0.5333333333vw; border-radius: 1.0666666667vw; } .audio-player__progress__inner { border-radius: 1.0666666667vw; } } .video-player { gap: 5px; width: 305px; min-height: 176px; border-radius: 8px; position: relative; } .video-player__preview { height: 100%; width: 100%; } .video-player__preview img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .video-player__controls { position: absolute; left: 16px; right: 16px; bottom: 16px; display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 20px 6px 1fr 6px 20px 6px 20px; grid-template-columns: 20px 1fr 20px 20px; -ms-grid-rows: auto 5px auto; grid-template-areas: "pause time full volume" "progress progress progress progress"; gap: 5px 6px; } .video-player__button { padding: 0; } .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: pause; } .audio-player.without-time .audio-player__controls > .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .video-player__controls > .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .video-player__button-full { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: full; } .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: pause; } .audio-player.without-time .audio-player__controls > .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .video-player__controls > .video-player__button-pause { -ms-grid-row: 1; -ms-grid-column: 1; } .video-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 5; grid-area: volume; } .audio-player.without-time .audio-player__controls > .video-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 3; } .video-player__controls > .video-player__button-volume { -ms-grid-row: 1; -ms-grid-column: 7; } .video-player__time { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: time; font-weight: 400; font-size: 12px; line-height: 1.125em; letter-spacing: -0.01em; color: #fff; } .video-player__controls > .video-player__time { -ms-grid-row: 1; -ms-grid-column: 3; } .video-player__progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 5; grid-area: progress; background-color: rgba(0, 0, 0, 0.12); height: 2px; border-radius: 4px; position: relative; } .audio-player.without-time .audio-player__controls > .video-player__progress { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .video-player__controls > .video-player__progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 7; } .video-player__progress__inner { position: absolute; left: 0; height: 100%; border-radius: 4px; background-color: #8e35ff; } @media (min-width: 767px) and (max-width: 1440px) { .video-player { gap: 0.3472222222vw; width: 21.1805555556vw; min-height: 12.2222222222vw; border-radius: 0.5555555556vw; } .video-player__controls { -ms-grid-columns: 1.3888888889vw 0.4166666667vw 1fr 0.4166666667vw 1.3888888889vw; grid-template-columns: 1.3888888889vw 1fr 1.3888888889vw; gap: 0.3472222222vw 0.4166666667vw; left: 1.1111111111vw; right: 1.1111111111vw; bottom: 1.1111111111vw; } .video-player__time { font-size: 0.8333333333vw; } .video-player__progress { height: 0.1388888889vw; border-radius: 0.2777777778vw; } .video-player__progress__inner { border-radius: 0.2777777778vw; } } @media (max-width: 766px) { .video-player { gap: 1.3333333333vw; max-width: 80.2666666667vw; min-height: 32vw; border-radius: 2.1333333333vw; width: 58.4vw; } .video-player__controls { -ms-grid-columns: 5.3333333333vw 1.6vw 1fr 1.6vw 5.3333333333vw; grid-template-columns: 5.3333333333vw 1fr 5.3333333333vw; gap: 1.3333333333vw 1.6vw; left: 4.2666666667vw; right: 4.2666666667vw; bottom: 4.2666666667vw; } .video-player__time { font-size: 3.2vw; } .video-player__progress { height: 0.5333333333vw; border-radius: 1.0666666667vw; } .video-player__progress__inner { border-radius: 1.0666666667vw; } } .container { width: 100%; max-width: 1312px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } @media (min-width: 767px) and (max-width: 1440px) { .container { max-width: 91.1111111111vw; padding-left: 1.1111111111vw; padding-right: 1.1111111111vw; } } @media (max-width: 766px) { .container { max-width: 349.8666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } } .slider-pagination { margin-top: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .slider-pagination-bullet { width: 6px; height: 6px; border-radius: 50%; background: #dee3e8; } .slider-pagination-bullet__active { background: #8e35ff; } .slider-pagination.white .slider-pagination-bullet { background: #fff; } .slider-pagination.white .slider-pagination-bullet__active { background: rgba(255, 255, 255, 0.6); } @media (min-width: 767px) and (max-width: 1440px) { .slider-pagination { margin-top: 1.6666666667vw; gap: 0.4166666667vw; } .slider-pagination-bullet { width: 0.4166666667vw; height: 0.4166666667vw; } } @media (max-width: 766px) { .slider-pagination { margin-top: 6.4vw; gap: 1.6vw; } .slider-pagination-bullet { width: 1.6vw; height: 1.6vw; } } .image-64 { width: 64px; height: 64px; border-radius: 8px; } .image-64 img { height: 100%; border-radius: 8px; width: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 767px) and (max-width: 1440px) { .image-64 { width: 4.4444444444vw; height: 4.4444444444vw; border-radius: 0.5555555556vw; } } @media (max-width: 766px) { .image-64 { width: 17.0666666667vw; height: 17.0666666667vw; border-radius: 2.1333333333vw; } } .info-table__row { display: -webkit-box; display: -ms-flexbox; display: flex; } .info-table__th, .info-table__td { letter-spacing: -0.01em; font-family: "Inter", sans-serif; } .info-table__th { font-weight: 600; font-size: 14px; line-height: 1.25em; color: #8b8e9a; } .info-table__th + .info-table__td { margin-top: 12px; } .info-table__td { font-family: "Inter Dislay", sans-serif; font-weight: 600; font-size: 18px; line-height: 24px; letter-spacing: -0.01em; color: #191a26; } @media (min-width: 767px) { .info-table__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .info-table__th { font-size: 0.9722222222vw; line-height: 1.3em; } .info-table__th + .info-table__td { margin-top: 0.8333333333vw; } .info-table__td { font-size: 1.25vw; line-height: 1.5em; } .info-table__row { gap: 0.5555555556vw; } } @media (max-width: 766px) { .info-table__th { font-size: 3.7333333333vw; line-height: 1.3em; } .info-table__th + .info-table__td { margin-top: 3.2vw; } .info-table__td { font-size: 4.8vw; line-height: 1.5em; } .info-table__row { gap: 6.4vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .mob-modal { position: fixed; z-index: 12345; left: 0; right: 0; bottom: 0; max-height: 100dvh; overflow-y: scroll; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(100vh); transform: translateY(100vh); } .mob-modal.show { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translateY(0); transform: translateY(0); } .mob-modal__header { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 8px 40px; grid-template-columns: 1fr 40px; gap: 8px; position: sticky; z-index: 12; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; background: #fff; padding: 12px 16px; } .mob-modal__divider { border-bottom: 1px solid #dee3e8; height: 1px; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; } .mob-modal.border-radius { border-radius: 20px 20px 0px 0px; } @media (min-width: 767px) and (max-width: 1440px) { .mob-modal__header { -ms-grid-columns: 1fr 0.5555555556vw 2.7777777778vw; grid-template-columns: 1fr 2.7777777778vw; gap: 0.5555555556vw; padding: 0.8333333333vw 1.1111111111vw; } .mob-modal__divider { border-width: 0.0694444444vw; height: 0.0694444444vw; width: calc(100% + 2.2222222222vw); margin-left: -1.1111111111vw; margin-right: -1.1111111111vw; } .mob-modal.border-radius { border-radius: 1.3888888889vw 1.3888888889vw 0px 0px; } } @media (max-width: 766px) { .mob-modal__header { -ms-grid-columns: 1fr 2.1333333333vw 10.6666666667vw; grid-template-columns: 1fr 10.6666666667vw; gap: 2.1333333333vw; padding: 3.2vw 4.2666666667vw; } .mob-modal__divider { border-width: 0.0694444444vw; height: 0.2666666667vw; width: calc(100% + 8.5333333333vw); margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; } .mob-modal.border-radius { border-radius: 5.3333333333vw 5.3333333333vw 0px 0px; } } .course-modal { position: fixed; z-index: 123458; left: 50%; top: 50%; overflow-y: scroll; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 573px; height: 660px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 22px 16px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .course-modal.show { pointer-events: all; opacity: 1; visibility: visible; } .course-modal__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .course-modal__image { width: 232px; height: 232px; } .course-modal__title { font-weight: 800; font-size: 24px; line-height: 100%; letter-spacing: -0.01em; } .course-modal__header { margin-top: 27px; } @media (min-width: 767px) { .course-modal { -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); background-color: #fff; } } @media (min-width: 767px) and (max-width: 1440px) { .course-modal { width: 39.7916666667vw; height: 45.8333333333vw; padding: 1.5277777778vw 1.1111111111vw 1.1111111111vw; } .course-modal__image { width: 16.1111111111vw; height: 16.1111111111vw; } .course-modal__title { font-size: 1.6666666667vw; } .course-modal__header { margin-top: 1.875vw; } } @media (max-width: 766px) { .course-modal { width: 91.4666666667vw; height: 148.2666666667vw; background-image: url(/local/templates/yarkima/css/../images/pages/home/mob-modal-bg.svg); padding: 5.8666666667vw 4.2666666667vw 4.2666666667vw; } .course-modal__image { width: 32vw; height: 32vw; } .course-modal__title { font-size: 6.4vw; line-height: 1.35em; } .course-modal__header { margin-top: 9.6vw; } } .toggle-list__header { min-height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; padding-right: 16px; } .toggle-list__header .icon.arrow-down { pointer-events: none; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .toggle-list__header.show .icon.arrow-down { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media (min-width: 767px) and (max-width: 1440px) { .toggle-list__header { font-size: 1.1111111111vw; padding-right: 1.1111111111vw; min-height: 3.3333333333vw; } } @media (max-width: 766px) { .toggle-list__header { font-size: 4.8vw; padding-right: 4.2666666667vw; min-height: 12.8vw; line-height: 6.4vw; } } .toggle-list__list { list-style: none; margin: 0; padding: 0; display: -ms-grid; display: grid; gap: 12px; } .toggle-list__body { margin-top: 12px; } .toggle-list__link { font-weight: 500; font-size: 16px; text-decoration: none; line-height: 1.5em; display: block; letter-spacing: -0.01em; color: #8b8e9a; padding: 12px 24px; } @media (min-width: 767px) and (max-width: 1440px) { .toggle-list__list { gap: 0.8333333333vw; } .toggle-list__body { margin-top: 0.8333333333vw; } .toggle-list__link { font-size: 1.1111111111vw; padding: 0.8333333333vw 1.6666666667vw; } } @media (max-width: 766px) { .toggle-list__list { gap: 3.2vw; } .toggle-list__body { margin-top: 3.2vw; } .toggle-list__link { font-size: 4.2666666667vw; padding: 3.2vw 6.4vw; } } .header { position: sticky; top: 0; left: 0; right: 0; background-color: #fff; z-index: 123; } .header__logo { display: block; width: 147px; } .header__logo img { width: 100%; } .header__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header__burger { width: 48px; height: 48px; position: relative; } .header__burger::before, .header__burger::after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 2px; border-radius: 4px; background-color: #191a26; width: 32px; } .header__burger::before { top: 16px; } .header__burger::after { bottom: 17px; } .header__dropdown .dropdown-content { min-width: 300px; } @media (min-width: 767px) { .header__left { gap: 24px; } .header.full .header__container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 8px 1fr 8px 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } } @media (min-width: 767px) and (max-width: 1440px) { .header__logo { width: 10.2083333333vw; } .header__burger { width: 3.3333333333vw; height: 3.3333333333vw; } .header__burger::before, .header__burger::after { height: 0.1388888889vw; border-radius: 0.2777777778vw; width: 2.2222222222vw; } .header__burger::before { top: 1.1111111111vw; } .header__burger::after { bottom: 1.1805555556vw; } .header__dropdown .dropdown-content { min-width: 20.8333333333vw; } .header.full .header__container { gap: 0.5555555556vw; } } @media (max-width: 766px) { .header.full .header__container { gap: 8px; -ms-grid-columns: 1fr 8px 1fr; grid-template-columns: 1fr 1fr; display: -ms-grid; display: grid; -ms-grid-rows: auto 8px auto; grid-template-areas: "left actions" "search search"; } .header.full .header__left { grid-area: left; } .header.full .header__search { grid-area: search; } .header.full .header__actions { grid-area: actions; } .header__dropdown { width: 20.8333333333vw; } .header__left { gap: 3.2vw; } .header__container { display: -ms-grid; display: grid; -ms-grid-columns: 10.6666666667vw 3.2vw 10.6666666667vw 3.2vw 1fr; grid-template-columns: 10.6666666667vw 10.6666666667vw 1fr; gap: 3.2vw; padding-bottom: 3.2vw; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header__logo { width: 10.6666666667vw; } .header__notification { -webkit-box-ordinal-group: -1; -ms-flex-order: -2; order: -2; } .header__burger { width: 10.6666666667vw; height: 10.6666666667vw; position: relative; } .header__burger::before, .header__burger::after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 0.5333333333vw; border-radius: 1.0666666667vw; background-color: #191a26; width: 6.4vw; } .header__burger::before { top: 3.4666666667vw; } .header__burger::after { bottom: 3.4666666667vw; } } .footer { padding-top: 64px; border-top: 1px solid; -o-border-image: radial-gradient(114.53% 167.34% at 50% -51.72%, #f36dff 0%, #8745fe 60.5%, #17bae5 100%); border-image: radial-gradient(114.53% 167.34% at 50% -51.72%, #f36dff 0%, #8745fe 60.5%, #17bae5 100%); border-image-slice: 1; padding-bottom: 28px; } .footer__support-link { min-height: 48px; min-width: 190px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; text-transform: uppercase; font-family: "Inter Display", sans-serif; color: #8e35ff; text-decoration: none; } .footer__support-link span { padding-left: 36px; position: relative; } .footer__support-link span::before { content: " "; position: absolute; left: 0; width: 24px; height: 24px; background: no-repeat center/contain url(/local/templates/yarkima/css/../images/icons/icon-question.svg); } .footer__top { margin-bottom: 64px; } .footer__top-left { width: 233px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__socials { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .footer__menu { list-style: none; padding: 0; margin: 0; display: -ms-grid; display: grid; gap: 12px; } .footer__menu-link { font-style: normal; font-weight: 600; font-size: 20px; line-height: 1.625em; letter-spacing: -0.01em; color: #191a26; display: inline-block; text-decoration: none; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .footer__menu-link::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-bottom: 2px solid #191a26; } .footer__menu-link:hover { color: #8e35ff; } .footer__menu-link:hover::before { width: 0%; } .footer__menu-title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 1.625em; letter-spacing: -0.01em; color: #191a26; display: inline-block; text-decoration: none; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-bottom: 17px; font-weight: 700; } .footer__copyrights { font-weight: 500; font-size: 16px; line-height: 24px; font-family: "Inter Display", sans-serif; letter-spacing: -0.01em; color: #8b8e9a; } .footer__bottom { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer__bottom-links { gap: 38px; } .footer__bottom-links > * { position: relative; } .footer__bottom-links > *::after { content: " "; width: 6px; height: 6px; pointer-events: none; position: absolute; right: -23px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: no-repeat center/contain url(/local/templates/yarkima/css/../images/icons/icon-small-hexagon.svg); } .footer__bottom-links > *:last-child::after { display: none; } .footer__bottom-link { font-family: "Inter Display", sans-serif; font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.01em; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: #8b8e9a; } .footer__logo { width: 100%; max-width: 233px; } .footer__logo img { width: 100%; } @media (min-width: 767px) { .footer__top, .footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__top { margin-bottom: 64px; } .footer__top-left { min-height: 100%; } .footer__top-right { display: -ms-grid; display: grid; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: -7px; padding-left: 15.5%; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 767px) and (max-width: 1440px) { .footer { border-width: 0.0694444444vw; padding-top: 4.4444444444vw; padding-bottom: 1.9444444444vw; } .footer__support-link { min-height: 3.3333333333vw; min-width: 13.1944444444vw; font-size: 1.1111111111vw; line-height: 1.5em; } .footer__support-link span { padding-left: 2.5vw; } .footer__support-link span::before { width: 1.6666666667vw; height: 1.6666666667vw; } .footer__top { margin-bottom: 4.4444444444vw; } .footer__top-left { width: 16.1805555556vw; } .footer__top-right { margin-top: -0.4861111111vw; } .footer__socials { gap: 0.6944444444vw; } .footer__menu { gap: 0.8333333333vw; } .footer__menu-link { font-size: 1.3888888889vw; line-height: 1.62em; } .footer__menu-link::before { border-width: 0.1388888889vw; } .footer__menu-title { margin-bottom: 1.1805555556vw; } .footer__copyrights { font-size: 1.1111111111vw; line-height: 1.5em; } .footer__bottom-links { gap: 2.6388888889vw; } .footer__bottom-links > *::after { width: 0.4166666667vw; height: 0.4166666667vw; right: -1.5972222222vw; } .footer__bottom-link { font-size: 1.1111111111vw; line-height: 1.6666666667vw; } .footer__logo { max-width: 16.1805555556vw; } } @media (max-width: 766px) { .footer { padding-top: 10.6666666667vw; padding-bottom: 10.6666666667vw; } .footer__socials { gap: 2.1333333333vw; } .footer__logo { max-width: 34.4vw; } .footer__menu-link { font-size: 4.2666666667vw; } .footer__menu-title { margin-bottom: 4.5333333333vw; } .footer__support-link { min-width: 46.4vw; height: 12.8vw; border-width: 0.2666666667vw; border: 1px solid #dee3e8; border-radius: 6.4vw; min-height: 12.8vw; padding-right: 4.2666666667vw; padding-left: 4.2666666667vw; } .footer__top { gap: 10.6666666667vw; } .footer__top-right { margin-top: 10.6666666667vw; } .footer__copyrights { font-size: 3.2vw; line-height: 1.125em; -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10.6666666667vw; } .footer__bottom-link { font-size: 3.2vw; } .footer__bottom-links { gap: 4.2666666667vw; } .footer__top-right { display: -ms-grid; display: grid; gap: 10.6666666667vw; } .footer__top-left { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; } } .menu-header { position: fixed; z-index: 1234; left: 0; top: 0; right: 0; overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transform: translateY(-100vw); transform: translateY(-100vw); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .menu-header.show { opacity: 1; pointer-events: all; -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; } .menu-header__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 16px 0; background-color: #fff; } .menu-header__top-logo { width: 147px; } .menu-header__top-logo img { display: block; height: 100%; width: auto; } .menu-header__body { padding: 40px 80px; } .menu-header__menu { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .menu-header__menu-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .menu-header__menu-link { font-style: normal; font-weight: 600; font-size: 20px; line-height: 1.6em; letter-spacing: -0.01em; color: #191a26; text-decoration: none; position: relative; min-height: 63px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 26px; padding-left: 16px; padding-right: 16px; } .menu-header__menu-link span { position: relative; } .menu-header__menu-link span::before { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-bottom: 2px solid #191a26; } .menu-header__menu-link:not(.active):hover { color: #8e35ff; background-color: #f5f8fa; } .menu-header__menu-link:not(.active):hover span::before { width: 0; } .menu-header__menu-link.active { background-color: #f5f8fa; } @media (min-width: 767px) and (max-width: 1440px) { .menu-header__top { padding: 0.8333333333vw 1.1111111111vw 0; } .menu-header__top-logo { width: 10.2083333333vw; } .menu-header__body { padding: 2.7777777778vw 5.5555555556vw; } .menu-header__menu { gap: 1.1111111111vw; } .menu-header__menu-link { font-size: 1.3888888889vw; min-height: 4.375vw; border-radius: 1.8055555556vw; padding-left: 1.1111111111vw; padding-right: 1.1111111111vw; } .menu-header__menu-link span::before { bottom: 0.1388888889vw; border-bottom-width: 0.1388888889vw; } } @media (max-width: 766px) { .menu-header { display: none; } } .mob-header { position: fixed; z-index: 1234; left: 0; top: 0; bottom: 0; right: 0; overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transform: translateX(-100vw); transform: translateX(-100vw); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .mob-header.show { opacity: 1; pointer-events: all; -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; } .mob-header__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 16px; position: fixed; left: 0; right: 0; top: 0; z-index: 12; background-color: #fff; } .mob-header__top-logo { height: 40px; width: 40px; } .mob-header__top-logo img { height: 100%; width: 100%; } .mob-header__body { padding-top: 88px; padding-left: 16px; padding-right: 16px; } .mob-header__menu { list-style: none; padding: 0 0; margin: 0; } .mob-header__menu-link { font-style: normal; font-weight: 600; font-size: 20px; line-height: 1.625em; letter-spacing: -0.01em; color: #191a26; text-decoration: none; position: relative; min-height: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 26px; padding-left: 16px; padding-right: 16px; } .mob-header__menu-link span { position: relative; } .mob-header__menu-link span::before { content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-bottom: 2px solid #191a26; } .mob-header__menu-link.active { background-color: #f5f8fa; } .mob-header__menu-link:hover { color: #8e35ff; background-color: #f5f8fa; } .mob-header__menu-link:hover span::before { width: 0; } .mob-header__link { padding: 16px 12px; gap: 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-weight: 500; font-size: 16px; line-height: 1.5em; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; letter-spacing: -0.01em; border-radius: 26px; color: #8b8e9a; } .mob-header__link.active { background-color: #f5f8fa; color: #191a26; } .mob-header__links { display: -ms-grid; display: grid; gap: 12px; } .mob-header__divider { border-bottom: 1px solid #dee3e8; height: 1px; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; } @media (max-width: 766px) { .mob-header__top { padding: 3.2vw 4.2666666667vw; } .mob-header__top-logo { height: 10.6666666667vw; width: 10.6666666667vw; } .mob-header__body { padding-top: 23.4666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } .mob-header__menu-link { font-size: 5.3333333333vw; min-height: 16vw; border-radius: 6.9333333333vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } .mob-header__menu-link span::before { bottom: 0.5333333333vw; border-width: 0.5333333333vw; } .mob-header__link { padding: 16px 12px; gap: 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-weight: 500; font-size: 16px; line-height: 24px; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; letter-spacing: -0.01em; border-radius: 26px; color: #8b8e9a; } .mob-header__link.active { background-color: #f5f8fa; color: #191a26; } .mob-header__links { display: -ms-grid; display: grid; gap: 12px; } .mob-header__divider { border-bottom: 1px solid #dee3e8; height: 1px; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; } } .profile-menu__link { padding: 12px 24px; gap: 12px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-weight: 500; font-size: 16px; line-height: 1.5em; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; letter-spacing: -0.01em; border-radius: 26px; color: #8b8e9a; } .profile-menu__links { display: -ms-grid; display: grid; gap: 8px; } .profile-menu__link .icon { color: #8b8e9a; } .profile-menu__link:hover { background-color: #f5f8fa; } .profile-menu__link.active { background-color: #f5f8fa; color: #191a26; } .profile-menu__link.active .icon { color: #191a26; } @media (min-width: 767px) and (max-width: 1440px) { .profile-menu__link { padding: 0.8333333333vw 1.6666666667vw; gap: 0.8333333333vw; font-size: 1.1111111111vw; border-radius: 1.8055555556vw; } } @media (max-width: 766px) { .profile-menu__link { padding: 3.2vw 6.4vw; gap: 3.2vw; font-size: 4.2666666667vw; border-radius: 6.9333333333vw; } .profile-menu__links { gap: 2.1333333333vw; } } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 50% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 75% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes shake { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 50% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } 75% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes rotate-right { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotate-right { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes rotate-left { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotate-left { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .partners-list__grid { gap: 42px; } .partners-list .partner-item { padding: 1px; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .partners-list .partner-item:first-child { -webkit-animation: rotate-right 2s ease-in-out forwards; animation: rotate-right 2s ease-in-out forwards; } .partners-list .partner-item:nth-child(2) { -webkit-animation: rotate-left 2s ease-in-out forwards; animation: rotate-left 2s ease-in-out forwards; -webkit-animation-delay: 2s; animation-delay: 2s; } .partners-list .partner-item:nth-child(3) { -webkit-animation: rotate-right 2s ease-in-out forwards; animation: rotate-right 2s ease-in-out forwards; -webkit-animation-delay: 4s; animation-delay: 4s; } .partners-list .partner-item:nth-child(4) { -webkit-animation: rotate-left 2s ease-in-out forwards; animation: rotate-left 2s ease-in-out forwards; -webkit-animation-delay: 6s; animation-delay: 6s; } .partners-list .partner-item__inner { background-color: var(--color); position: relative; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 280px; height: 320px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; transition: all 0.3s ease; position: relative; z-index: 12; } .partners-list .partner-item::before { content: " "; left: 0; top: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background-color: var(--color); -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .partners-list .partner-item svg { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .partners-list .partner-item svg path { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .partners-list .partner-item:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .partners-list .partner-item:hover .partner-item__inner { background-color: #fff; } .partners-list .partner-item:hover svg { -webkit-transform: scale(1.12); transform: scale(1.12); } .partners-list .partner-item:hover svg path { fill: #191a26; } @media (min-width: 767px) and (max-width: 1440px) { .partners-list__grid { gap: 2.9166666667vw; } .partners-list .partner-item { padding: 0.0694444444vw; } .partners-list .partner-item__inner { width: 19.4444444444vw; height: 22.2222222222vw; } .partners-list .partner-item__inner svg { max-width: 15.625vw; max-height: 3.1944444444vw; } } @media (max-width: 766px) { .partners-list__grid { gap: 4.2666666667vw; } .partners-list .partner-item { padding: 0.2666666667vw; } .partners-list .partner-item__inner { width: 43.7333333333vw; height: 49.0666666667vw; } .partners-list .partner-item__inner svg { max-width: 35.4666666667vw; max-height: 8.8vw; } } .falling-element { position: absolute; width: 20px; height: 20px; -webkit-animation: fall 3s infinite linear; animation: fall 3s infinite linear; } @-webkit-keyframes fall { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(200vh); transform: translateY(200vh); } } @keyframes fall { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(200vh); transform: translateY(200vh); } } @-webkit-keyframes blue-fall { 0% { -webkit-transform: translateY(-100%) rotate(-30deg); transform: translateY(-100%) rotate(-30deg); } 50% { -webkit-transform: translateY(50vh) rotate(-60deg); transform: translateY(50vh) rotate(-60deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(-90deg); transform: translateY(calc(100vh + 100%)) rotate(-90deg); } } @keyframes blue-fall { 0% { -webkit-transform: translateY(-100%) rotate(-30deg); transform: translateY(-100%) rotate(-30deg); } 50% { -webkit-transform: translateY(50vh) rotate(-60deg); transform: translateY(50vh) rotate(-60deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(-90deg); transform: translateY(calc(100vh + 100%)) rotate(-90deg); } } @-webkit-keyframes green-fall { 0% { -webkit-transform: translateY(-100%) rotate(-12deg); transform: translateY(-100%) rotate(-12deg); } 50% { -webkit-transform: translateY(50vh) rotate(-10deg); transform: translateY(50vh) rotate(-10deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(-10deg); transform: translateY(calc(100vh + 100%)) rotate(-10deg); } } @keyframes green-fall { 0% { -webkit-transform: translateY(-100%) rotate(-12deg); transform: translateY(-100%) rotate(-12deg); } 50% { -webkit-transform: translateY(50vh) rotate(-10deg); transform: translateY(50vh) rotate(-10deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(-10deg); transform: translateY(calc(100vh + 100%)) rotate(-10deg); } } @-webkit-keyframes yellow-fall { 0% { -webkit-transform: translateY(-100%) rotate(0deg); transform: translateY(-100%) rotate(0deg); } 50% { -webkit-transform: translateY(50vh) rotate(45deg); transform: translateY(50vh) rotate(45deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(90deg); transform: translateY(calc(100vh + 100%)) rotate(90deg); } } @keyframes yellow-fall { 0% { -webkit-transform: translateY(-100%) rotate(0deg); transform: translateY(-100%) rotate(0deg); } 50% { -webkit-transform: translateY(50vh) rotate(45deg); transform: translateY(50vh) rotate(45deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(90deg); transform: translateY(calc(100vh + 100%)) rotate(90deg); } } @-webkit-keyframes pink-fall { 0% { -webkit-transform: translateY(-100%) rotate(30deg); transform: translateY(-100%) rotate(30deg); } 50% { -webkit-transform: translateY(50vh) rotate(60deg); transform: translateY(50vh) rotate(60deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(90deg); transform: translateY(calc(100vh + 100%)) rotate(90deg); } } @keyframes pink-fall { 0% { -webkit-transform: translateY(-100%) rotate(30deg); transform: translateY(-100%) rotate(30deg); } 50% { -webkit-transform: translateY(50vh) rotate(60deg); transform: translateY(50vh) rotate(60deg); } 100% { -webkit-transform: translateY(calc(100vh + 100%)) rotate(90deg); transform: translateY(calc(100vh + 100%)) rotate(90deg); } } .intro-block__container { position: relative; overflow: hidden; } .intro-block__animation { position: absolute; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .intro-block__animations { pointer-events: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .intro-block__animation.purple { left: 50%; -webkit-animation: fall 6s infinite linear; animation: fall 6s infinite linear; -webkit-animation-delay: 5s; animation-delay: 5s; } .intro-block__animation.blue { left: 83%; -webkit-animation: blue-fall 6s infinite linear; animation: blue-fall 6s infinite linear; -webkit-animation-delay: 3s; animation-delay: 3s; } .intro-block__animation.green { left: 14%; -webkit-animation: green-fall 6s infinite linear; animation: green-fall 6s infinite linear; -webkit-animation-delay: 4s; animation-delay: 4s; } .intro-block__animation.pink { left: 55%; -webkit-animation: pink-fall 6s infinite linear; animation: pink-fall 6s infinite linear; -webkit-animation-delay: 1s; animation-delay: 1s; } .intro-block__animation.yellow { left: 24%; -webkit-animation: yellow-fall 6s infinite linear; animation: yellow-fall 6s infinite linear; } .intro-block__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 40px; color: #fff; max-width: 930px; margin-left: auto; margin-right: auto; } .intro-block__title { font-weight: 800; font-size: 60px; line-height: 120%; text-align: center; letter-spacing: -0.01em; text-transform: uppercase; color: #ffffff; font-family: "Roboto Flex", sans-serif; } .intro-block__text { font-family: "Inter Display", sans-serif; font-style: normal; font-weight: 800; font-size: 18px; line-height: 1.4em; letter-spacing: -0.01em; color: #ffffff; max-width: 660px; } .intro-block__button { position: relative; z-index: 12; } @media (min-width: 767px) { .intro-block__content { min-height: 720px; } .intro-block__bg { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: 0; border-radius: 32px; } .intro-block__bg img { height: 100%; width: 100%; } } @media (min-width: 767px) { .intro-block__container { border-radius: 32px; } .intro-block__container::before { content: " "; position: absolute; left: 0; bottom: 0; right: 0; height: 80px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 22, 30, 0)), to(#14161e)); background: linear-gradient(180deg, rgba(20, 22, 30, 0) 0%, #14161e 100%); -webkit-filter: blur(5px); filter: blur(5px); z-index: 1; border-radius: 32px; } } @media (min-width: 767px) and (max-width: 1440px) { .intro-block__content { min-height: 50vw; } .intro-block__animation img { width: 100%; } .intro-block__animation.purple { width: 10.9027777778vw; } .intro-block__animation.blue { width: 10.2083333333vw; } .intro-block__animation.green { width: 12.2222222222vw; } .intro-block__animation.pink { width: 13.8888888889vw; } .intro-block__animation.yellow { width: 13.8888888889vw; } .intro-block__container { border-radius: 2.2222222222vw; } .intro-block__container::before { height: 5.5555555556vw; border-radius: 2.2222222222vw; } .intro-block__content { gap: 2.7777777778vw; max-width: 64.5833333333vw; } .intro-block__title { font-size: 4.1666666667vw; } .intro-block__text { font-size: 1.25vw; } } @media (max-width: 766px) { .intro-block__container { margin: 0 -4.2666666667vw; padding: 0; } .intro-block__content { min-height: 192vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; background: #191a26; } .intro-block__title { font-weight: 800; font-size: 8vw; line-height: 120%; } .intro-block__text { font-weight: 700; font-size: 4.2666666667vw; line-height: 1.4em; } } @-webkit-keyframes run-across { 0% { -webkit-transform: translate(-120px, 0); transform: translate(-120px, 0); } 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @keyframes run-across { 0% { -webkit-transform: translate(-120px, 0); transform: translate(-120px, 0); } 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } .previews-courses__rows { width: 100vw; overflow: hidden; } .preview-courses { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; min-width: 1680px; } .preview-courses__rows { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .preview-courses__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: run-across 30s linear infinite; animation: run-across 30s linear infinite; } .preview-courses__row:nth-child(odd) .preview-course { left: -120px; } @media (min-width: 767px) and (max-width: 1440px) { .preview-courses__row:nth-child(odd) .preview-course { left: -8.3333333333vw; } } @media (max-width: 766px) { .preview-courses__row:nth-child(odd) .preview-course { left: -32vw; } } .preview-course { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; position: relative; } .preview-course__inner { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; } .preview-course__inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #8e35ff; z-index: 1; pointer-events: none; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .preview-course::before, .preview-course::after { content: " "; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; transition: all 0.3s ease; z-index: -2; pointer-events: none; } .preview-course::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #8e35ff; } .preview-course::after { position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; background: #fff; } .preview-course:hover .preview-course__inner { -webkit-transform: scale(0.94); transform: scale(0.94); } .preview-course:hover .preview-course__inner::before { opacity: 0.4; } .card-tag { background: #f5f8fa; border-radius: 48px; min-height: 32px; padding: 6px 12px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #191a26; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 767px) and (max-width: 1440px) { .card-tag { border-radius: 3.3333333333vw; min-height: 2.2222222222vw; padding: 0.4166666667vw 0.8333333333vw; font-size: 0.9722222222vw; } } @media (max-width: 766px) { .card-tag { border-radius: 12.8vw; min-height: 8.5333333333vw; padding: 1.6vw 3.2vw; font-size: 3.7333333333vw; } .card-tag.mob { border-radius: 12.8vw; min-height: 6.4vw; padding: 0.8vw 3.2vw; font-size: 3.2vw; } } .card-tag:hover { background-color: #8e35ff; color: #fff; } .courses-list.bg .container { position: relative; } .courses-list.bg .container > * { position: relative; z-index: 12; } @media (min-width: 767px) { .courses-list.bg .container { position: relative; padding-bottom: 24px; } .courses-list.bg .container::before { content: " "; position: absolute; left: -8px; right: -8px; top: -24px; bottom: 0; pointer-events: none; z-index: -1; background: no-repeat bottom/contain url(/local/templates/yarkima/css/../images/pages/categories/courses-bg.svg); border-radius: 15px; /* Это значение берется из SVG */ } } @media (max-width: 766px) { .courses-list.bg .container { padding-bottom: 4.2666666667vw; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.6))); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); } .courses-list.bg .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; /* Это значение берется из SVG */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.6))); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)); background: radial-gradient(circle, #f36dff, #8745fe, #17bae5); opacity: 0.4; /* Цвета и прозрачность берутся из SVG */ } .courses-list.bg .container::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 53.3333333333vw; border-radius: 4vw; background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(white)); background: linear-gradient(0deg, rgba(255, 255, 255, 0), white); } } .courses-list .course-item__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .courses-list .course-item__header-name { font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #191a26; } .courses-list .course-item__rating { font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #191a26; } .courses-list .course-item__name { font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; font-size: 20px; line-height: 1.75em; letter-spacing: -0.01em; color: #191a26; } .courses-list .course-item__text { font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; -webkit-box-orient: vertical; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .courses-list .course-item__image::before { content: " "; position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); opacity: 0; transition: all 0.3s ease; } .courses-list .course-item__image svg { width: 24px; height: 24px; --icon-color: #8e35ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .courses-list .course-item__image .icon { color: #8e35ff; } .courses-list .course-item.hexagon { width: 320px; height: 320px; position: relative; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; padding: 2px; } .courses-list .course-item.hexagon::after, .courses-list .course-item.hexagon::before { content: " "; z-index: -1; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .courses-list .course-item.hexagon::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; position: absolute; opacity: 0; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); } .courses-list .course-item.hexagon::before { position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; background-color: #dee3e8; } .courses-list .course-item.hexagon:hover::after { opacity: 1; } .courses-list .course-item.hexagon .course-item__inner { background: #fff; height: 100%; width: 100%; position: relative; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; padding: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .courses-list .course-item.hexagon .course-item__content { text-align: center; max-width: 240px; max-height: 240px; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .courses-list .course-item:hover .course-item__image::before { opacity: 1; } .courses-list .course-item:hover .course-item__image svg, .courses-list .course-item:hover .course-item__image .icon { color: #fff; --icon-color: #fff; -webkit-transform: scale(1.1); transform: scale(1.1); } @media (min-width: 767px) and (max-width: 1440px) { .courses-list .course-item__header { gap: 0.8333333333vw; } .courses-list .course-item__header-name { font-size: 0.9722222222vw; } .courses-list .course-item__rating { font-size: 0.9722222222vw; } .courses-list .course-item__name { font-size: 1.3888888889vw; } .courses-list .course-item__text { font-size: 0.9722222222vw; } .courses-list .course-item.hexagon { width: 22.2222222222vw; height: 22.2222222222vw; } .courses-list .course-item.hexagon .course-item__content { max-width: 16.6666666667vw; max-height: 16.6666666667vw; } } @media (max-width: 766px) { .courses-list__slider { overflow: visible; padding-left: 6.4vw; padding-right: 6.4vw; } .courses-list__slider .swiper-slide { width: 80vw; } .courses-list .course-item__header { gap: 3.2vw; } .courses-list .course-item__header-name { font-size: 3.7333333333vw; } .courses-list .course-item__rating { font-size: 3.7333333333vw; } .courses-list .course-item__name { font-size: 5.3333333333vw; } .courses-list .course-item__text { font-size: 3.7333333333vw; } .courses-list .course-item.hexagon { width: 80vw; height: 80vw; } .courses-list .course-item.hexagon .course-item__content { max-width: 53.3333333333vw; max-height: 64vw; } } .author-item__name { color: #191a26; font-size: 20px; font-style: normal; font-weight: 700; line-height: 1.75em; letter-spacing: -0.2px; } @media (min-width: 767px) and (max-width: 1440px) { .author-item__name { font-size: 1.3888888889vw; } } @media (max-width: 766px) { .author-item__name { font-size: 3.7333333333vw; line-height: 1.25em; } } .reviews { overflow: hidden; } .reviews .reviews-slider { overflow: visible; } .review-item { height: 480px; width: 480px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .review-item::after { content: " "; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; pointer-events: none; transition: all 0.3s ease; background-color: #fff; z-index: -1; } .review-item::before { content: " "; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; pointer-events: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #dee3e8; z-index: -1; transition: all 0.3s ease; } .review-item__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 360px; width: 352px; text-align: center; padding-bottom: 40px; } .review-item__content::before { content: " "; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; pointer-events: none; transition: all 0.3s ease; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); opacity: 1; z-index: -1; opacity: 0; pointer-events: none; } .review-item__author-name { font-weight: 600; font-size: 18px; line-height: 1.33em; letter-spacing: -0.01em; color: #8e35ff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .review-item__author-add { font-weight: 600; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .review-item__text { font-weight: 600; font-size: 18px; line-height: 1.42em; letter-spacing: -0.01em; color: #191a26; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .review-item:hover .review-item__author-name { color: #fff; } .review-item:hover .review-item__author-add { color: #fff; } .review-item:hover .review-item__text { color: #fff; } .review-item:hover .review-item__image img { -webkit-transform: scale(0.83); transform: scale(0.83); } .review-item:hover .review-item__content::before { opacity: 1; } .review-item:hover::before, .review-item:hover::after { opacity: 0; } @media (min-width: 767px) and (max-width: 1440px) { .review-item { height: 33.3333333333vw; width: 33.3333333333vw; } .review-item__content { height: 25vw; width: 24.4444444444vw; padding-bottom: 2.7777777778vw; } .review-item__author-name { font-size: 1.25vw; } .review-item__author-add { font-size: 0.9722222222vw; } .review-item__text { font-size: 1.25vw; } } @media (max-width: 766px) { .review-item { width: 96vw; height: 96vw; margin: auto; } .review-item__content { height: 74.6666666667vw; width: 74.6666666667vw; padding-bottom: 10.6666666667vw; } .review-item__author-name { font-size: 3.7333333333vw; line-height: 1.3em; } .review-item__author-add { font-size: 3.2vw; line-height: 1.2em; } .review-item__image { height: 17.0666666667vw !important; width: 17.0666666667vw !important; } .review-item__text { font-size: 3.7333333333vw; line-height: 1.2em; } } .list-reviews-slider .reviews-slider .swiper-wrapper { overflow: visible; } .list-review-item { position: relative; } .list-review-item__rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .list-review-item__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .list-review-item__text { font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; font-family: "Inter", sans-serif; min-height: 120px; display: block; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; } @media (min-width: 767px) and (max-width: 1440px) { .list-review-item__rating { gap: 0.2777777778vw; } .list-review-item__header { gap: 1.1111111111vw; } .list-review-item__text { font-size: 1.1111111111vw; min-height: 8.3333333333vw; } } @media (max-width: 766px) { .list-review-item__rating { gap: 0.2777777778vw; } .list-review-item__header { gap: 4.2666666667vw; } .list-review-item__text { font-size: 4.2666666667vw; min-height: 32vw; } } .home-page .reviews .container { max-width: 1408px; } @media (min-width: 767px) and (max-width: 1440px) { .home-page .reviews .container { font-size: 97.7777777778vw; } } @media (max-width: 766px) { .home-page .reviews .container { font-size: 375.4666666667vw; } } .courses-list { overflow: hidden; } .courses-list.hexagons { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } @media (min-width: 767px) { .courses-list.hexagons { margin-top: -1px; padding-top: 1px; } .courses-list.hexagons .course:nth-child(3n) { -ms-grid-column: 1; grid-column-start: 1; margin: auto; -ms-grid-column-span: 2; grid-column-end: 3; } .courses-list.hexagons .catalog__bottom { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 2; grid-column-end: 3; } } @media (max-width: 766px) { .courses-list.hexagons { display: -ms-grid; display: grid; overflow-x: scroll; margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .courses-list.hexagons::-webkit-scrollbar { display: none; } .courses-list.hexagons::-webkit-scrollbar-track { display: none; } .courses-list.hexagons::-webkit-scrollbar-thumb { display: none; } .courses-list.hexagons-actions { -webkit-box-pack: row-reverse; -ms-flex-pack: row-reverse; justify-content: row-reverse; } .courses-list.hexagons .course:nth-child(3n-2) { -ms-grid-column: 1; grid-column-start: 1; margin: auto; -ms-grid-column-span: 2; grid-column-end: 3; } .courses-list.hexagons .catalog__bottom { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 2; grid-column-end: 3; } } .categories-list.hexagons { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } .categories-list.hexagons .col:nth-child(7n+7) { -ms-grid-column-span: 2; grid-column: span 2; } .categories-list.hexagons .col:nth-child(7n+7), .categories-list.hexagons .col:nth-child(7n+6), .categories-list.hexagons .col:nth-child(7n+5) { -webkit-transform: translateX(50%); transform: translateX(50%); /* Ваш стиль для этих элементов */ } @media (min-width: 767px) { .categories-list .courses-list__slider .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .categories-list .courses-list__slider .swiper-wrapper .swiper-slide { width: 25%; } } @media (max-width: 766px) { .categories-list.hexagons { display: -ms-grid; display: grid; overflow-x: scroll; margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .categories-list.hexagons .course-item:nth-child(3n-2) { -ms-grid-column: 1; grid-column-start: 1; margin: auto; -ms-grid-column-span: 2; grid-column-end: 3; } .categories-list.hexagons .catalog__bottom { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 2; grid-column-end: 3; } } .course.hexagon { width: 477px; height: 478px; position: relative; } .course.hexagon::after, .course.hexagon::before { content: " "; z-index: -1; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .course.hexagon::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; position: absolute; opacity: 0; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(61%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 61%, #17bae5); } .course.hexagon::before { position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #dee3e8; } .course.hexagon:hover::after { opacity: 1; } .course.hexagon .course__header { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .course.hexagon .course__inner { width: 100%; height: 100%; padding-top: 16px; padding-left: 40px; padding-right: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 22px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; position: relative; background-color: #fff; text-align: center; } .course.hexagon .course__description { -webkit-box-orient: vertical; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; font-weight: 500; font-size: 12px; line-height: 1.24em; letter-spacing: -0.01em; } .course.hexagon .course__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (min-width: 767px) and (max-width: 1440px) { .course.hexagon { width: 33.125vw; height: 33.125vw; } .course.hexagon .course__inner { gap: 1.3888888889vw; } .course.hexagon .course__body { gap: 1.3888888889vw; } } @media (max-width: 766px) { .course.hexagon { width: 91.4666666667vw; height: 91.4666666667vw; } .course.hexagon .course-header__image { width: 12.8vw; height: 12.8vw; } .course.hexagon .course__description { font-size: 3.2vw; } .course.hexagon .course__title { font-size: 4.2666666667vw; } .course.hexagon .course__inner { gap: 4.2666666667vw; } .course.hexagon .course__body { gap: 4.2666666667vw; } .course.hexagon .course__tag { font-size: 3.2vw; padding: 0.8vw 2.1333333333vw; min-height: 6.4vw; } .course.hexagon .course__author-image { width: 8.5333333333vw; height: 8.5333333333vw; } } @media (max-width: 766px) { .course:not(.hexagon) .course__header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .achievement { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .achievement__icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .achievement__icon img { max-width: 100%; } .achievement.xxs .achievement__icon { width: 32px; height: 32px; } .achievement.md { gap: 10px; } .achievement.md .achievement__icon { width: 100px; height: 100px; } .achievement.sm .achievement__icon { width: 32px; height: 32px; } @media (min-width: 767px) and (max-width: 1440px) { .achievement.xxs .achievement__icon { width: 8.5333333333vw; height: 8.5333333333vw; } .achievement.md { gap: 0.6944444444vw; } .achievement.md .achievement__icon { width: 6.9444444444vw; height: 6.9444444444vw; } .achievement.sm .achievement__icon { width: 2.2222222222vw; height: 2.2222222222vw; } } @media (max-width: 766px) { .achievement.xxs .achievement__icon { width: 8.5333333333vw; height: 8.5333333333vw; } .achievement.md { gap: 2.6666666667vw; } .achievement.md .achievement__icon { width: 21.3333333333vw; height: 21.3333333333vw; } .achievement.sm .achievement__icon { width: 8.5333333333vw; height: 8.5333333333vw; } } .courses-page.with-bg main, .course-page.with-bg main { position: relative; } .courses-page.with-bg main::before, .course-page.with-bg main::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: no-repeat top/contain url(/local/templates/yarkima/css/../images/pages/languages/bg.svg); } .language-page .language-header { display: -webkit-box; display: -ms-flexbox; display: flex; } .language-page .language-header__info { min-height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .language-page .language-header__buttons { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .language-page .language-header__author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 767px) and (max-width: 1440px) { .language-page .language__author { gap: 12px; } } @media (min-width: 767px) and (max-width: 1440px) { .language-page .language-header { display: -ms-grid; display: grid; -ms-grid-columns: 12.5vw 1fr -webkit-max-content; -ms-grid-columns: 12.5vw 1fr max-content; grid-template-columns: 12.5vw 1fr -webkit-max-content; grid-template-columns: 12.5vw 1fr max-content; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media (min-width: 1440px) { .language-page .language__author { gap: 0.8333333333vw; } } @media (max-width: 766px) { .language-page .language-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6.4vw; } .language-page .language-header__info { gap: 6.4vw; } .language-page .language-header__author { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .language-page .language-header__buttons { width: 100%; } .language-page .language-header__buttons .button.default { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .language-page .adv-tile-info { width: 100%; height: 344px; font-style: normal; font-weight: 800; line-height: 120%; font-family: "Roboto Flex", sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: -0.01em; text-transform: uppercase; color: #ffffff; background: no-repeat center/cover url(/local/templates/yarkima/css/../images/pages/language/adv-bg.svg); } @media (min-width: 767px) and (max-width: 1440px) { .language-page .adv-tile-info { border-radius: 1.3888888889vw; font-size: 2.7777777778vw; height: 23.8888888889vw; } } @media (min-width: 1440px) { .language-page .adv-tile-info { border-radius: 20px; font-size: 40px; height: 344px; } } @media (max-width: 766px) { .language-page .adv-tile-info { background-image: url(/local/templates/yarkima/css/../images/pages/language/adv-bg_mob.svg); font-size: 8vw; width: 100%; height: 62.9333333333vw; } } .language-page .adv-tile-plan { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; background: #ffffff; border: solid #8e35ff; } .language-page .adv-tile-plan__price { font-weight: 600; line-height: 120%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: -0.01em; color: #191a26; } .language-page .adv-tile-plan__price span { font-weight: 800; line-height: 100%; letter-spacing: -0.01em; color: #191a26; } @media (min-width: 767px) { .language-page .adv-tile-plan { border-width: 2px; border-radius: 20px; height: 344px; padding: 40px 24px 24px; gap: 40px; } .language-page .adv-tile-plan__price { font-size: 60px; } .language-page .adv-tile-plan__price span { font-size: 20px; } } @media (min-width: 767px) and (max-width: 1440px) { .language-page .adv-tile-plan { border-width: 0.1388888889vw; border-radius: 1.3888888889vw; height: 23.8888888889vw; padding: 2.7777777778vw 1.6666666667vw 1.6666666667vw; gap: 2.7777777778vw; } .language-page .adv-tile-plan__price { font-size: 4.1666666667vw; } .language-page .adv-tile-plan__price span { font-size: 1.3888888889vw; } } @media (max-width: 766px) { .language-page .adv-tile-plan { border-width: 0.5333333333vw; border-radius: 5.3333333333vw; height: 84.2666666667vw; gap: 10.6666666667vw; padding: 10.6666666667vw 6.4vw 6.4vw; } .language-page .adv-tile-plan .title.medium { font-size: 5.3333333333vw; } .language-page .adv-tile-plan__price { font-size: 10.6666666667vw; } .language-page .adv-tile-plan__price span { font-size: 5.3333333333vw; } } @media (min-width: 767px) and (max-width: 1440px) { body { font-size: 1.1111111111vw; } } @media (min-width: 1440px) { body { font-size: 16px; } } @media (max-width: 766px) { body { font-size: 3.7333333333vw; } } .detail-course__card-title { font-family: "Roboto Flex"; font-style: normal; font-weight: 700; font-size: 34px; line-height: 100%; letter-spacing: -0.01em; color: #191a26; } .detail-course__card-label { font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; } .detail-course__card-add { font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; } .detail-course__variants { width: 100%; margin-left: auto; margin-right: auto; max-width: 412px; } .detail-course-table { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .detail-course__header { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 520px 1fr; grid-template-columns: 1fr 520px 1fr; } .detail-course__header-progress { max-width: 400px; margin-left: auto; margin-right: auto; } .detail-course__header-progress-title { font-family: "Roboto Flex", sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 100%; letter-spacing: -0.01em; color: #10c38d; } .detail-course__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .detail-course__footer { max-width: 1282px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } @media (min-width: 767px) { .detail-course-page { min-height: 100dvh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .detail-course-page main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .detail-course-page::after { content: ""; position: absolute; right: 0; top: 26%; right: 0; width: 360px; height: 596px; z-index: -1; background: no-repeat center/contain url(/local/templates/yarkima/css/../images/pages/detail-course/bg.svg); } .detail-course__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .detail-course__card { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; width: 588px; height: 631px; background-repeat: no-repeat; background-position: center; background-size: contain; padding: 120px 54px; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(60.5%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 60.5%, #17bae5); position: relative; } .detail-course__card-inner > div { position: relative; z-index: 1; } .detail-course__card-inner::before { content: " "; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #fff; } } @media (min-width: 767px) and (max-width: 1440px) { .detail-course-page::after { width: 25vw; height: 41.3888888889vw; } .detail-course__card { width: 40.8333333333vw; height: 43.8194444444vw; padding: 8.3333333333vw 3.75vw; } .detail-course__card-inner::before { position: absolute; top: 0.1388888889vw; right: 0.1388888889vw; bottom: 0.1388888889vw; left: 0.1388888889vw; } .detail-course__card-title { font-size: 2.3611111111vw; } .detail-course__card-label { font-size: 1.1111111111vw; } .detail-course__card-add { font-size: 1.1111111111vw; } .detail-course__header { -ms-grid-columns: 1fr 36.1111111111vw 1fr; grid-template-columns: 1fr 36.1111111111vw 1fr; } .detail-course__header-progress { max-width: 27.7777777778vw; } .detail-course__header-progress-title { font-size: 1.1111111111vw; } .detail-course__footer { max-width: 89.0277777778vw; } .detail-course__variants { max-width: 28.6111111111vw; } } @media (max-width: 766px) { .detail-course__variants { max-width: 109.8666666667vw; } .detail-course__footer { margin-top: 6.4vw; gap: 4.2666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .detail-course__footer > button { width: 100%; } .detail-course__variants { padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; } .detail-course__audio { width: 100%; } .detail-course__card-info { margin-left: auto; margin-right: auto; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; width: 91.4666666667vw; height: 103.7333333333vw; background-repeat: no-repeat; background-position: center; background-size: contain; padding: 32vw 11.2vw; background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(60.5%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 60.5%, #17bae5); position: relative; } .detail-course__card-label { font-size: 3.7333333333vw; } .detail-course__card-title { font-size: 6.4vw; } .detail-course__card-add { font-size: 4.2666666667vw; } .detail-course__card-info { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; display: -webkit-box; display: -ms-flexbox; display: flex; } .detail-course__card-info > div { position: relative; z-index: 1; } .detail-course__card-info::before { content: " "; position: absolute; top: 0.5333333333vw; right: 0.5333333333vw; bottom: 0.5333333333vw; left: 0.5333333333vw; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #fff; } .detail-course__header { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 4.2666666667vw 12.8vw; grid-template-columns: 1fr 12.8vw; -ms-grid-rows: auto 4.2666666667vw auto; grid-template-areas: "progress close" "title title"; gap: 4.2666666667vw; } .detail-course__header-title { grid-area: title; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .detail-course__header-progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 5; text-align: left; grid-area: progress; margin-left: 0; margin-right: 0; } .audio-player.without-time .audio-player__controls > .detail-course__header-progress { -ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; } .video-player__controls > .detail-course__header-progress { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 7; } .detail-course__header-close { grid-area: close; } .detail-course__header > .audio-player__progress { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .detail-course__header > .video-player__progress { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } } .catalog__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 767px) { .catalog__with-sidebar { display: -ms-grid; display: grid; -ms-grid-columns: 290px 40px calc(100% - 330px); grid-template-columns: 290px calc(100% - 330px); gap: 40px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (min-width: 767px) and (max-width: 1440px) { .catalog__with-sidebar { -ms-grid-columns: 20.1388888889vw 1fr; grid-template-columns: 20.1388888889vw 1fr; } } @media (min-width: 767px) { .info-page main { padding-top: 80px; } .info-page__content { max-width: 720px; margin-left: auto; margin-right: auto; width: 100%; } } @media (min-width: 767px) { .info-page.with-bg main { position: relative; } .info-page.with-bg main::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: no-repeat top/cover url(/local/templates/yarkima/css/../images/pages/languages/bg.svg); } } @media (min-width: 767px) and (max-width: 1440px) { .info-page main { padding-top: 5.5555555556vw; padding-bottom: 8.3333333333vw; } .info-page__content { max-width: 50vw; } } @media (max-width: 766px) { .info-page main { padding-top: 6.4vw; } } .accordion { cursor: default; background: #f5f8fa; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 32px; overflow: hidden; position: relative; overflow: hidden; } .accordion__list { display: -ms-grid; display: grid; gap: 16px; } .accordion-header { font-weight: 800; font-size: 20px; line-height: 100%; letter-spacing: -0.01em; text-transform: uppercase; color: #191a26; padding: 30px 72px 30px 32px; position: relative; list-style-type: none; font-family: "Roboto Flex", sans-serif; } .accordion-header::webkit-details-marker { display: none; } .accordion-header::after, .accordion-header::before { content: " "; position: absolute; right: 40px; height: 20px; width: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform-origin: top; transform-origin: top; } .accordion-header::after { background-image: url(/local/templates/yarkima/css/../images/icons/icon-plus.svg); } .accordion-header::before { background-image: url(/local/templates/yarkima/css/../images/icons/icon-plus_white.svg); opacity: 0; } .accordion::webkit-details-marker { display: none; } .accordion-body { margin-top: -5px; padding: 0px 32px 23px; font-size: 18px; line-height: 1.4em; letter-spacing: -0.01em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .accordion-body p { margin: 0; } .accordion[open] { background: #8e35ff; margin-bottom: 10px; } .accordion[open] .accordion-header { color: #fff; } .accordion[open] .accordion-header::after { opacity: 0; -webkit-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%); } .accordion[open] .accordion-header::before { opacity: 1; -webkit-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%); } .accordion[open] .accordion-body { color: #fff; } @media (min-width: 767px) and (max-width: 1440px) { .accordion { border-radius: 2.2222222222vw; } .accordion__list { display: -ms-grid; display: grid; gap: 1.1111111111vw 16px; } .accordion-header { font-size: 1.3888888889vw; padding: 2.0833333333vw 5vw 2.0833333333vw 2.2222222222vw; } .accordion-header::after, .accordion-header::before { content: " "; position: absolute; right: 2.7777777778vw; height: 1.3888888889vw; width: 1.3888888889vw; } .accordion-body { margin-top: -0.3472222222vw; padding: 0px 2.2222222222vw 1.5972222222vw; font-size: 1.25vw; } .accordion[open] { margin-bottom: 0.6944444444vw; } } @media (max-width: 766px) { .accordion-header { font-size: 3.7333333333vw; line-height: 140%; padding: 5.3333333333vw 16vw 5.3333333333vw 6.4vw; } .accordion-body { margin-top: -1.3333333333vw; padding: 0px 6.4vw 6.4vw; font-size: 4.2666666667vw; line-height: 1.4em; } } @media (min-width: 1440px) { .with-sidebar { display: -ms-grid; display: grid; -ms-grid-columns: 290px 40px 1fr; grid-template-columns: 290px 1fr; gap: 40px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media (min-width: 767px) and (max-width: 1440px) { .with-sidebar { display: -ms-grid; display: grid; gap: 2.7777777778vw; -ms-grid-columns: 20.1388888889vw 2.7777777778vw calc(100% - ${px-to-vw(290px)}); grid-template-columns: 20.1388888889vw calc(100% - ${px-to-vw(290px)}); } } .page main { padding-bottom: 120px; } .page.with-bg main { position: relative; } .page.with-bg main::before { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-image: url(/local/templates/yarkima/css/../images/pages/bg.svg); background-repeat: no-repeat; background-position: top; background-size: 100% auto; } .page.fixed-bg::before { background-attachment: fixed; } .page.bg-repeat main::before { background-repeat: repeat-y; } .page .with-sidebar__sidebar { display: -ms-grid; display: grid; gap: 12px; } @media (min-width: 1440px) { .page .with-sidebar { -ms-grid-columns: 290px 40px calc(100% - 330px); grid-template-columns: 290px calc(100% - 330px); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .page .with-sidebar { -ms-grid-columns: 20.1388888889vw 2.7777777778vw calc(100% - 22.9166666667vw); grid-template-columns: 20.1388888889vw calc(100% - 22.9166666667vw); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 2.7777777778vw; } } @media (max-width: 766px) { .page main { padding-bottom: 8.3333333333vw; } } @media (max-width: 766px) { .page main { padding-bottom: 32vw; } } .personal-account { padding-bottom: 120px; margin-top: 40px; } .personal-account .breadcrumbs li { font-weight: 500; } @media (min-width: 1440px) { .personal-account__container { -ms-grid-columns: 1fr 40px 290px; grid-template-columns: 1fr 290px; display: -ms-grid; display: grid; gap: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__container { -ms-grid-columns: 1fr 2.7777777778vw 20.1388888889vw; grid-template-columns: 1fr 20.1388888889vw; display: -ms-grid; display: grid; gap: 2.7777777778vw; } } .personal-account__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; } .personal-account__main-login { font-family: "Roboto Flex", sans-serif; font-size: 24px; font-style: normal; font-weight: 800; line-height: 100%; letter-spacing: -0.015em; text-transform: uppercase; } .personal-account__main-name { margin-top: 8px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5em; /* 150% */ letter-spacing: -0.01em; color: #8b8e9a; } .personal-account__main-image { width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 120px; position: relative; } .personal-account__main-image svg { width: 100%; max-height: 100%; height: auto; } .personal-account__main-image-btn { width: 30px; height: 30px; position: absolute; right: 5%; top: 8%; background: no-repeat center/contain url(/local/templates/yarkima/css/../images/icons/personal-account/edit-btn.svg); } .personal-account__form { display: -ms-grid; display: grid; gap: 40px; } .personal-account__input { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; -ms-grid-columns: 180px 24px 1fr 24px 48px; grid-template-columns: 180px 1fr 48px; } .personal-account__input-label { font-size: 14px; font-weight: 600; line-height: 1.25em; letter-spacing: -0.0088em; } .personal-account__menu { list-style: none; padding: 0; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .personal-account__menu-link { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 16px; font-style: normal; font-weight: 500; letter-spacing: -0.01em; line-height: 1.5em; /* 150% */ padding: 12px 24px; border-radius: 45px; color: #8b8e9a; display: block; text-decoration: none; } .personal-account__menu-link:hover { background: #f5f8fa; } .personal-account__menu-link.active { color: #191a26; background: #f5f8fa; } @media (min-width: 767px) and (max-width: 1440px) { .personal-account { padding-bottom: 8.3333333333vw; margin-top: 2.7777777778vw; } .personal-account__main { gap: 1.6666666667vw; } .personal-account__main-login { font-size: 1.6666666667vw; } .personal-account__main-name { margin-top: 0.5555555556vw; font-size: 1.1111111111vw; } .personal-account__main-image { width: 8.3333333333vw; height: 8.3333333333vw; } .personal-account__main-image-btn { width: 2.0833333333vw; height: 2.0833333333vw; } .personal-account__form { gap: 2.7777777778vw; } .personal-account__input { gap: 1.6666666667vw; -ms-grid-columns: 12.5vw 1.6666666667vw 1fr 1.6666666667vw 3.3333333333vw; grid-template-columns: 12.5vw 1fr 3.3333333333vw; } .personal-account__input-label { font-size: 0.9722222222vw; } .personal-account__menu { gap: 0.8333333333vw; } .personal-account__menu-link { font-size: 1.1111111111vw; padding: 0.8333333333vw 1.6666666667vw; border-radius: 3.125vw; } } @media (max-width: 766px) { .personal-account { padding-bottom: 26.6666666667vw; margin-top: 6.4vw; } .personal-account__form { gap: 6.4vw; } .personal-account__form-save { width: 100%; } .personal-account__main { gap: 6.4vw; } .personal-account__main-login { font-size: 5.3333333333vw; } .personal-account__main-name { font-size: 4.2666666667vw; } .personal-account__main-image { width: 21.3333333333vw; height: 21.3333333333vw; } .personal-account__main-image-btn { width: 8vw; height: 9.0666666667vw; right: -11%; top: -1%; } .personal-account__input { gap: 4.2666666667vw; -ms-grid-columns: 1fr 4.2666666667vw 8.5333333333vw; grid-template-columns: 1fr 8.5333333333vw; } .personal-account__input-label { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 2; grid-column-end: 3; font-size: 3.7333333333vw; } } .personal-account__operation-history-row { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-grid-columns: minmax(140px, 1.4fr) 24px minmax(80px, 1fr) 24px minmax(80px, 1fr) 24px minmax(100px, 1fr) 24px 48px; grid-template-columns: minmax(140px, 1.4fr) minmax(80px, 1fr) minmax(80px, 1fr) minmax(100px, 1fr) 48px; gap: 24px; } .personal-account__operation-history-th { color: #8b8e9a; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.25em; letter-spacing: -0.009em; } .personal-account__operation-history-td { color: #191a26; font-family: "Inter Display", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5em; /* 150% */ letter-spacing: -0.01em; } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__operation-history-row { -ms-grid-columns: minmax(9.7222222222vw, 1.4fr) 1.6666666667vw minmax(5.5555555556vw, 1fr) 1.6666666667vw minmax(5.5555555556vw, 1fr) 1.6666666667vw minmax(6.9444444444vw, 1fr) 1.6666666667vw 3.3333333333vw; grid-template-columns: minmax(9.7222222222vw, 1.4fr) minmax(5.5555555556vw, 1fr) minmax(5.5555555556vw, 1fr) minmax(6.9444444444vw, 1fr) 3.3333333333vw; gap: 1.6666666667vw; } .personal-account__operation-history-th { font-size: 0.9722222222vw; } .personal-account__operation-history-td { font-size: 1.1111111111vw; } } @media (max-width: 766px) { .personal-account__operation-history-row { -ms-grid-columns: minmax(37.3333333333vw, 1fr) 2.1333333333vw 32vw 2.1333333333vw 8.5333333333vw; grid-template-columns: minmax(37.3333333333vw, 1fr) 32vw 8.5333333333vw; gap: 2.1333333333vw; -ms-grid-rows: auto 2.1333333333vw auto; grid-template-areas: "title price actions" "card date date"; } .personal-account__operation-history-row:first-child { display: none; } .personal-account__operation-history-th { font-size: 3.7333333333vw; } .personal-account__operation-history-td { font-size: 4.2666666667vw; } .personal-account__operation-history-td.price { text-align: right; grid-area: price; } .personal-account__operation-history-td.actions { grid-area: actions; } .personal-account__operation-history-td.date { text-align: right; grid-area: date; } .personal-account__operation-history-td.title { grid-area: title; } .personal-account__operation-history-td.card { grid-area: card; } .personal-account__operation-history-row > .header__actions { -ms-grid-row: 1; -ms-grid-column: 5; } } .preview-message > .personal-account__operation-history-td.date { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; } .profile-header > .personal-account__operation-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-row { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-grid-columns: 240px 24px 160px 24px 83px 24px 104px 24px 80px 24px 48px; grid-template-columns: 240px 160px 83px 104px 80px 48px; gap: 24px; } .personal-account__order-history-th { color: #8b8e9a; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.25em; letter-spacing: -0.009em; } .personal-account__order-history-td { color: #191a26; font-family: "Inter Display", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.2em; /* 150% */ letter-spacing: -0.01em; } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__order-history-row { -ms-grid-columns: 16.6666666667vw 1.6666666667vw 11.1111111111vw 1.6666666667vw 5.7638888889vw 1.6666666667vw 7.2222222222vw 1.6666666667vw 5.5555555556vw 1.6666666667vw 3.3333333333vw; grid-template-columns: 16.6666666667vw 11.1111111111vw 5.7638888889vw 7.2222222222vw 5.5555555556vw 3.3333333333vw; gap: 1.6666666667vw; } .personal-account__order-history-th { font-size: 0.9722222222vw; } .personal-account__order-history-td { font-size: 1.1111111111vw; } } @media (max-width: 766px) { .personal-account__order-history-row { -ms-grid-columns: minmax(37.3333333333vw, 1fr) 2.1333333333vw 32vw 2.1333333333vw 8.5333333333vw; grid-template-columns: minmax(37.3333333333vw, 1fr) 32vw 8.5333333333vw; gap: 2.1333333333vw; -ms-grid-rows: auto 2.1333333333vw auto 2.1333333333vw auto; grid-template-areas: "title price actions" "author card card" "date date date"; } .personal-account__order-history-row:first-child { display: none; } .personal-account__order-history-th { font-size: 3.7333333333vw; } .personal-account__order-history-td { font-size: 3.2vw; } .personal-account__order-history-td.price { text-align: right; grid-area: price; } .personal-account__order-history-td.actions { grid-area: actions; } .personal-account__order-history-td.date { color: #8b8e9a; text-align: right; grid-area: date; } .personal-account__order-history-td.title { grid-area: title; } .personal-account__order-history-td.title .hexagon { width: 12.8vw; height: 12.8vw; } .personal-account__order-history-td.card { grid-area: card; text-align: right; } .personal-account__order-history-td.author { grid-area: author; /* 08.03.2024 */ } .personal-account__order-history-row > .header__actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-row > .personal-account__operation-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__order-history-row > .personal-account__operation-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-row > .personal-account__operation-history-td.date { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; } .personal-account__order-history-row > .personal-account__operation-history-td.card { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } } .preview-message > .personal-account__order-history-td.date { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; } .profile-header > .personal-account__order-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__refferal-row { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-grid-columns: 1fr 24px 1fr 24px 0.5fr 24px 0.5fr; grid-template-columns: 1fr 1fr 0.5fr 0.5fr; gap: 24px; } .personal-account__refferal-th { color: #8b8e9a; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.25em; letter-spacing: -0.009em; } .personal-account__refferal-td { color: #191a26; font-family: "Inter Display", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.2em; /* 150% */ letter-spacing: -0.01em; } .personal-account__refferal-td.title .hexagon { width: 48px; height: 48px; } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__order-history-row { -ms-grid-columns: 16.6666666667vw 1.6666666667vw 11.1111111111vw 1.6666666667vw 5.7638888889vw 1.6666666667vw 7.2222222222vw 1.6666666667vw 5.5555555556vw 1.6666666667vw 3.3333333333vw; grid-template-columns: 16.6666666667vw 11.1111111111vw 5.7638888889vw 7.2222222222vw 5.5555555556vw 3.3333333333vw; gap: 1.6666666667vw; } .personal-account__order-history-th { font-size: 0.9722222222vw; } .personal-account__order-history-td { font-size: 1.1111111111vw; } .personal-account__order-history-td.title .hexagon { width: 3.3333333333vw; height: 3.3333333333vw; } } @media (max-width: 766px) { .personal-account__refferal-row { -ms-grid-columns: 1fr 6.4vw 0.5fr; grid-template-columns: 1fr 0.5fr; gap: 6.4vw; -ms-grid-rows: auto 6.4vw auto; grid-template-areas: "title price " " card date"; } .personal-account__refferal-th { font-size: 3.7333333333vw; } .personal-account__refferal-td { font-size: 3.7333333333vw; } .personal-account__refferal-td.price { text-align: right; grid-area: price; } .personal-account__refferal-td.date { color: #8b8e9a; text-align: right; grid-area: date; } .personal-account__refferal-td.title { grid-area: title; } .personal-account__refferal-td.title .hexagon { width: 12.8vw; height: 12.8vw; } .personal-account__refferal-td.card { grid-area: card; text-align: left; } .personal-account__refferal-row > .personal-account__operation-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__refferal-row > .personal-account__operation-history-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 1; } .personal-account__refferal-row > .personal-account__operation-history-td.card { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .personal-account__refferal-row > .personal-account__order-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__refferal-row > .personal-account__order-history-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 1; } .personal-account__refferal-row > .personal-account__order-history-td.card { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } } .preview-message > .personal-account__refferal-td.date { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; } .personal-account__history-row { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-grid-columns: 240px 160px 83px 104px 44px 48px; grid-template-columns: 240px 160px 83px 104px 44px 48px; } .personal-account__history-th { color: #8b8e9a; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.25em; letter-spacing: -0.009em; } .personal-account__history-td { color: #191a26; font-family: "Inter Display", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5em; /* 150% */ letter-spacing: -0.01em; } .personal-account__sm-balance-row { margin-top: 12px; } .personal-account__sm-balance-title { font-family: "Roboto Flex", sans-serif; font-size: 40px; font-style: normal; font-weight: 600; line-height: 120%; /* 48px */ letter-spacing: 0.025em; text-transform: uppercase; } .personal-account__sm-price { display: -ms-grid; display: grid; } .personal-account__sm-price-td { color: #8b8e9a; font-family: "Inter Display", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5em; /* 150% */ letter-spacing: -0.01em; } .personal-account__user-id-text { font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; } @media (min-width: 1440px) { .personal-account__user-id { -ms-grid-columns: 1fr 24px 178px; grid-template-columns: 1fr 178px; gap: 8px 24px; } } @media (min-width: 767px) { .personal-account__user-id { display: -ms-grid; display: grid; } } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__user-id { -ms-grid-columns: 1fr 1.6666666667vw 12.3611111111vw; grid-template-columns: 1fr 12.3611111111vw; gap: 0.5555555556vw 1.6666666667vw; } } @media (min-width: 767px) { .personal-account__container { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .personal-account__menu { position: sticky; top: 100px; } .personal-account__sm-price { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: minmax(100px, 1fr) minmax(100px, 1fr) 160px; grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) 160px; } } @media (min-width: 767px) and (max-width: 1440px) { .personal-account__sm-balance-row { margin-top: 0.8333333333vw; } .personal-account__sm-balance-title { font-size: 2.7777777778vw; } .personal-account__sm-price-td { font-size: 1.1111111111vw; line-height: 1.6666666667vw; /* 150% */ } .personal-account__user-id-text { font-size: 1.1111111111vw; } .personal-account__menu { top: 6.9444444444vw; } } @media (max-width: 766px) { .personal-account__sm-balance-row { margin-top: 3.2vw; } .personal-account__sm-balance-title { font-size: 10.6666666667vw; } .personal-account__sm-price-td { font-size: 6.4vw 16px; line-height: 6.4vw; /* 150% */ } .personal-account__user-id-text { font-size: 4.2666666667vw; } .personal-account__sm-price { gap: 6.4vw; } .personal-account__sm-balance-row { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .personal-account__sm-balance .button { width: 100%; } } .tooltip { width: 600px; margin: 120px auto; } .unactive { display: none; } .tippy-box, .tippy-tooltip { padding: 12px 12px; background-color: #191a26; border-radius: 12px; width: 217px; min-height: 60px; } .tippy-box .tippy-content, .tippy-tooltip .tippy-content { font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.5em; letter-spacing: -0.0075em; padding: 0; } .tippy-box .tippy-arrow, .tippy-tooltip .tippy-arrow { margin-left: -30px; color: #191a26; } .tippy-box.light-theme, .tippy-tooltip.light-theme { border: 1px solid #dee3e8; border-radius: 20px; padding: 8px; pointer-events: all; background-color: #fff; } .tippy-box.light-theme .tippy-arrow, .tippy-tooltip.light-theme .tippy-arrow { color: #fff; display: none; } @media (min-width: 767px) and (max-width: 1440px) { .tippy-box, .tippy-tooltip { padding: 0.8333333333vw 0.8333333333vw; border-radius: 0.8333333333vw; width: 15.0694444444vw; min-height: 4.1666666667vw; } .tippy-box .tippy-content, .tippy-tooltip .tippy-content { font-size: 0.8333333333vw; letter-spacing: -0.12px; } .tippy-box .tippy-arrow, .tippy-tooltip .tippy-arrow { margin-left: -2.0833333333vw; } .tippy-box.light-theme, .tippy-tooltip.light-theme { border-radius: 1.3888888889vw; border-width: 0.0694444444vw; padding: 0.5555555556vw; } } @media (max-width: 766px) { .tippy-box, .tippy-tooltip { padding: 3.2vw 3.2vw; border-radius: 3.2vw; width: 57.8666666667vw; min-height: 16vw; } .tippy-box .tippy-content, .tippy-tooltip .tippy-content { font-size: 3.2vw; letter-spacing: -0.12px; } .tippy-box .tippy-arrow, .tippy-tooltip .tippy-arrow { margin-left: -8vw; } .tippy-box.light-theme, .tippy-tooltip.light-theme { border-radius: 5.3333333333vw; border-width: 0.2666666667vw; padding: 2.1333333333vw; } } .profile__container { display: -ms-grid; display: grid; gap: 40px; } .profile__sidebar { display: -ms-grid; display: grid; gap: 12px; } .profile-header { display: -ms-grid; display: grid; -ms-grid-columns: 120px 24px 1fr 24px 384px; grid-template-columns: 120px 1fr 384px; gap: 24px; border-radius: 20px; border-image-slice: 1; -ms-grid-rows: auto 24px auto; grid-template-areas: "image info actions " "image achievements socials"; position: relative; } .profile-header > div { position: relative; z-index: 12; } .profile-header::before { content: " "; border-radius: 20px; border: 2px solid transparent; /*2*/ background: radial-gradient(127.34% 17697.86% at -11.84% 50%, #f36dff 0%, #8745fe 49.35%, #17bae5 100%) border-box; /*3*/ -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) padding-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; /*5'*/ mask-composite: exclude; /*5*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .profile-header__actions { grid-area: actions; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 16px; } .profile-header > .profile-header__actions { -ms-grid-row: 1; -ms-grid-column: 5; } .profile-header__socials { -ms-grid-row: 3; -ms-grid-column: 5; grid-area: socials; } .profile-header__socials .socials { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .profile-header__achievements { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: achievements; } .profile-header__subtitle { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: subtitle; } .profile-header__info { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: info; } .profile-header__info { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: info; } .profile-header__login { font-family: Roboto Flex; font-size: 24px; font-weight: 800; line-height: 1.5em; letter-spacing: -0.01em; font-family: "Roboto Flex", sans-serif; } .profile-header__name { font-size: 16px; font-weight: 500; line-height: 1.5em; letter-spacing: -0.01em; } .profile-header__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: image; width: 120px; height: 120px; } .preview-message > .profile-header__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } @media (min-width: 1440px) { .profile-header__actions { padding-top: 8px; } } .profile-gallery { margin-left: -24px; margin-right: -24px; } .profile-gallery::before, .profile-gallery::after { content: " "; position: absolute; top: 0; bottom: 0; width: 135px; height: 150px; z-index: 3; pointer-events: none; } .profile-gallery::before { left: 0; background: -webkit-gradient(linear, left top, right top, from(white), to(transparent)); background: linear-gradient(to right, white 0%, transparent 100%); } .profile-gallery::after { right: 0; background: -webkit-gradient(linear, right top, left top, from(white), to(transparent)); background: linear-gradient(to left, white 0%, transparent 100%); } .profile-gallery .swiper-slide { width: 150px; } .profile-gallery__image { width: 150px; height: 150px; padding: 1px; position: relative; } .profile-gallery__image::before { content: " "; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #dee3e8; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .profile-gallery__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } @media (min-width: 767px) and (max-width: 1440px) { .profile__container { gap: 2.7777777778vw; } .profile__sidebar { display: -ms-grid; display: grid; gap: 0.8333333333vw; } .profile-header { -ms-grid-columns: 8.3333333333vw 1.6666666667vw 1fr 1.6666666667vw 26.6666666667vw; grid-template-columns: 8.3333333333vw 1fr 26.6666666667vw; gap: 1.6666666667vw; border-radius: 1.3888888889vw; } .profile-header::before { border-radius: 1.3888888889vw; border-width: 0.1388888889vw; } .profile-header__actions { gap: 1.1111111111vw; } .profile-header__login { font-size: 1.6666666667vw; } .profile-header__name { font-size: 1.1111111111vw; } .profile-header__image { width: 8.3333333333vw; height: 8.3333333333vw; } .profile-gallery { margin-left: -1.6666666667vw; margin-right: -1.6666666667vw; } .profile-gallery::before, .profile-gallery::after { width: 9.375vw; height: 10.4166666667vw; } .profile-gallery .swiper-slide { width: 10.4166666667vw; } .profile-gallery__image { width: 10.4166666667vw; height: 10.4166666667vw; padding: 0.0694444444vw; position: relative; } .profile-gallery__image::before { position: absolute; top: -0.0694444444vw; right: -0.0694444444vw; bottom: -0.0694444444vw; left: -0.0694444444vw; } } @media (max-width: 766px) { .profile__sidebar { display: none; } .profile__container { gap: 10.6666666667vw; } .profile-header { -ms-grid-columns: 32vw 6.4vw 1fr 6.4vw 102.4vw; grid-template-columns: 32vw 1fr 102.4vw; gap: 6.4vw; border-radius: 5.3333333333vw; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto 6.4vw auto 6.4vw auto 6.4vw auto 6.4vw auto; grid-template-areas: "image " "info" "actions" " achievements " "socials"; text-align: center; } .profile-header::before { border-radius: 5.3333333333vw; border-width: 0.5333333333vw; } .profile-header__actions { gap: 4.2666666667vw; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .profile-header__actions .button.full-mob { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .profile-header__achievements > div { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .profile-header__socials .socials { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .profile-header__login { font-size: 6.4vw; } .profile-header__name { font-size: 4.2666666667vw; } .profile-header__image { margin-left: auto; margin-right: auto; width: 32vw; height: 32vw; } .profile-gallery { margin-left: -6.4vw; margin-right: -6.4vw; } .profile-gallery::before, .profile-gallery::after { width: 36vw; height: 40vw; } .profile-gallery .swiper-slide { width: 40vw; } .profile-gallery__image { width: 40vw; height: 40vw; padding: 0.2666666667vw; position: relative; } .profile-gallery__image::before { position: absolute; top: -0.2666666667vw; right: -0.2666666667vw; bottom: -0.2666666667vw; left: -0.2666666667vw; } .profile-gallery { width: calc(100vw - 21.3333333333vw); margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; } .profile-gallery .swiper-slide { width: 21.3333333333vw; } .profile-gallery__image { width: 21.3333333333vw; height: 21.3333333333vw; } .profile-header > .header__actions { -ms-grid-row: 5; -ms-grid-column: 1; } .profile-header > .personal-account__operation-history-td.actions { -ms-grid-row: 5; -ms-grid-column: 1; } .profile-header > .personal-account__order-history-td.actions { -ms-grid-row: 5; -ms-grid-column: 1; } .profile-header > .profile-header__actions { -ms-grid-row: 5; -ms-grid-column: 1; } .profile-header__socials { -ms-grid-row: 9; -ms-grid-column: 1; } .profile-header__achievements { -ms-grid-row: 7; -ms-grid-column: 1; } .profile-header__info { -ms-grid-row: 3; -ms-grid-column: 1; } .profile-header__info { -ms-grid-row: 3; -ms-grid-column: 1; } .profile-header__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } } @media (min-width: 1440px) { .messages-opened { -ms-grid-columns: 300px 24px 1fr; grid-template-columns: 300px 1fr; gap: 24px; } } @media (min-width: 767px) { .messages-opened { display: -ms-grid; display: grid; -ms-grid-columns: 300px 24px 1fr; grid-template-columns: 300px 1fr; gap: 24px; } } @media (min-width: 767px) and (max-width: 1440px) { .messages-opened { -ms-grid-columns: 20.8333333333vw 1.6666666667vw 1fr; grid-template-columns: 20.8333333333vw 1fr; gap: 1.6666666667vw; } } .chat__more-menu { position: absolute; z-index: 12; text-align: center; width: 180px; } .chat__more-menu-created { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 1.125em; letter-spacing: -0.01em; color: #8b8e9a; } .chat__more-menu-date { font-weight: 600; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #191a26; } .chat__more-menu-images { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .chat__more-menu-images .hexagon { width: 32px; height: 32px; } .chat__more-menu-images .hexagon + .hexagon { margin-left: -6px; } @media (min-width: 767px) and (max-width: 1440px) { .chat__more-menu { width: 12.5vw; } .chat__more-menu-created { font-size: 0.8333333333vw; } .chat__more-menu-date { font-size: 0.9722222222vw; } .chat__more-menu-images .hexagon { width: 2.2222222222vw; height: 2.2222222222vw; } .chat__more-menu-images .hexagon + .hexagon { margin-left: -0.4166666667vw; } } @media (max-width: 766px) { .chat__more-menu { width: 48vw; } .chat__more-menu-created { font-size: 3.2vw; } .chat__more-menu-date { font-size: 3.7333333333vw; } .chat__more-menu-images .hexagon { width: 8.5333333333vw; height: 8.5333333333vw; } .chat__more-menu-images .hexagon + .hexagon { margin-left: -1.6vw; } } .chat-page .chat { background-color: #fff; border: 1px solid #dee3e8; border-radius: 20px; position: relative; overflow: hidden; padding-bottom: 64px; height: 560px; overflow: hidden; } .chat-page .chat__send { background-color: #fff; position: absolute; bottom: 0; left: 0; right: 0; min-height: 64px; border-top: 1px solid #dee3e8; padding-top: 18px; padding-right: 64px; } .chat-page .chat__send textarea { width: 100%; resize: none; padding-left: 24px; font-family: "Inter Display"; height: 100%; border: unset; width: 100%; outline: none; } .chat-page .chat__send textarea::-webkit-input-placeholder { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat__send textarea::-moz-placeholder { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat__send textarea:-ms-input-placeholder { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat__send textarea::-ms-input-placeholder { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat__send textarea::placeholder { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat__send-button { position: absolute; right: 16px; top: 6px; } .chat-page .chat-body { max-height: 440px; display: -ms-grid; display: grid; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; gap: 8px; padding: 16px; } .chat-page .chat-header { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 32px; grid-template-columns: 1fr 32px; padding: 4px 16px; } .chat-page .chat-header__name { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; } .chat-page .chat-header__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .chat-page .chat__date { text-align: center; font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: -0.01em; color: #8b8e9a; } .chat-page .chat-message { background-color: #f5f8fa; max-width: 508px; padding: 6px 12px; display: -ms-inline-grid; display: inline-grid; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-grid-columns: minmax(0, 1fr) 18px 32px; grid-template-columns: minmax(0, 1fr) 32px; gap: 18px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-right: auto; } .chat-page .chat-message__date { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 18px; /* identical to box height, or 150% */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: right; letter-spacing: -0.01em; text-align: right; color: #8b8e9a; /* Inside auto layout */ -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex-positive: 0; flex-grow: 0; } .chat-page .chat-message__content { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.25em; /* identical to box height, or 143% */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; color: #191a26; /* Inside auto layout */ -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-positive: 0; flex-grow: 0; } .chat-page .chat-message.from { margin-right: 0; margin-left: auto; color: #fff; background-color: #8e35ff; border-bottom-left-radius: 20px; border-bottom-right-radius: 0; } .chat-page .chat-message.from .chat-message__content { color: #fff; } .chat-page .chat-message.from .chat-message__date { color: rgba(255, 255, 255, 0.5); } @media (min-width: 767px) and (max-width: 1440px) { .chat-page .chat { border-width: 0.0694444444vw; border-radius: 1.3888888889vw; padding-bottom: 4.4444444444vw; height: 38.8888888889vw; } .chat-page .chat__send { min-height: 4.4444444444vw; border-width: 0.0694444444vw; padding-top: 1.25vw; padding-right: 4.4444444444vw; } .chat-page .chat__send textarea { padding-left: 1.6666666667vw; } .chat-page .chat__send textarea::-webkit-input-placeholder { font-size: 0.9722222222vw; } .chat-page .chat__send textarea::-moz-placeholder { font-size: 0.9722222222vw; } .chat-page .chat__send textarea:-ms-input-placeholder { font-size: 0.9722222222vw; } .chat-page .chat__send textarea::-ms-input-placeholder { font-size: 0.9722222222vw; } .chat-page .chat__send textarea::placeholder { font-size: 0.9722222222vw; } .chat-page .chat__send-button { right: 1.1111111111vw; top: 0.4166666667vw; } .chat-page .chat-body { max-height: 30.5555555556vw; gap: 0.5555555556vw; padding: 1.1111111111vw; } .chat-page .chat-header { -ms-grid-columns: 1fr 3.8888888889vw; grid-template-columns: 1fr 3.8888888889vw; padding: 0.2777777778vw 1.1111111111vw; } .chat-page .chat-header__name { font-size: 1.1111111111vw; } .chat-page .chat__date { font-size: 0.8333333333vw; } .chat-page .chat-message { max-width: 35.2777777778vw; padding: 0.4166666667vw 0.8333333333vw; -ms-grid-columns: minmax(0, 1fr) 1.25vw 2.2222222222vw; grid-template-columns: minmax(0, 1fr) 2.2222222222vw; gap: 1.25vw; border-top-left-radius: 1.3888888889vw; border-top-right-radius: 1.3888888889vw; border-bottom-right-radius: 1.3888888889vw; } .chat-page .chat-message__date { font-size: 0.8333333333vw; } .chat-page .chat-message__content { font-size: 0.9722222222vw; } .chat-page .chat-message.from { border-bottom-left-radius: 1.3888888889vw; } } @media (max-width: 766px) { .chat-page .chat { padding: 0; margin: 0; border: unset; height: 149.3333333333vw; margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; padding-left: 4.2666666667vw; padding-right: 4.2666666667vw; position: fixed; top: 21.3333333333vw; bottom: 0; right: 0; min-height: calc(100dvh - 23.4666666667vw); } .chat-page .chat__send { min-height: 17.0666666667vw; border-width: 0.2666666667vw; padding-top: 4.8vw; padding-right: 17.0666666667vw; position: sticky; bottom: 0; } .chat-page .chat__send textarea { padding-left: 6.4vw; } .chat-page .chat__send textarea::-webkit-input-placeholder { font-size: 3.7333333333vw; } .chat-page .chat__send textarea::-moz-placeholder { font-size: 3.7333333333vw; } .chat-page .chat__send textarea:-ms-input-placeholder { font-size: 3.7333333333vw; } .chat-page .chat__send textarea::-ms-input-placeholder { font-size: 3.7333333333vw; } .chat-page .chat__send textarea::placeholder { font-size: 3.7333333333vw; } .chat-page .chat__send-button { right: 4.2666666667vw; top: 1.6vw; } .chat-page .chat-body { max-height: calc(100dvh - 48vw); gap: 2.1333333333vw; padding: 4.2666666667vw 4.2666666667vw 8vw; } .chat-page .chat-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1.0666666667vw 4.2666666667vw; position: sticky; top: -20px; } .chat-page .chat-header__name { font-size: 4.2666666667vw; } .chat-page .chat__date { font-size: 3.2vw; } .chat-page .chat-message { max-width: 135.4666666667vw; padding: 1.6vw 3.2vw; -ms-grid-columns: minmax(0, 1fr) 4.8vw 8.5333333333vw; grid-template-columns: minmax(0, 1fr) 8.5333333333vw; gap: 4.8vw; border-top-left-radius: 5.3333333333vw; border-top-right-radius: 5.3333333333vw; border-bottom-right-radius: 5.3333333333vw; } .chat-page .chat-message__date { font-size: 3.2vw; } .chat-page .chat-message__content { font-size: 3.7333333333vw; } .chat-page .chat-message.from { border-bottom-left-radius: 5.3333333333vw; } } .preview-message { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 8px 12px; -ms-grid-columns: 64px 16px 1fr 16px 60px; grid-template-columns: 64px 1fr 60px; display: -ms-grid; display: grid; -ms-grid-rows: auto 4px auto; grid-template-areas: "image name date" "image content content"; gap: 4px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: unset; border-radius: 20px; } .preview-messages { display: -ms-grid; display: grid; gap: 8px; } .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: image; } .preview-message > .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .preview-message__name { -ms-grid-row: 1; -ms-grid-column: 3; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; align-self: flex-end; grid-area: name; } .preview-message__content { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; grid-area: content; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.25em; letter-spacing: -0.01em; color: #8b8e9a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .preview-message__date { text-align: right; font-weight: 500; font-size: 12px; line-height: 1.1em; text-align: right; letter-spacing: -0.01em; color: #8b8e9a; align-self: flex-end; grid-area: date; margin-bottom: 4px; } .preview-message > .preview-message__date { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-column-span: 1; } .preview-message:hover { background: #f5f8fa; } .preview-message.active { background-color: #f1e6ff; } .preview-message.active .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: image; } .preview-message.active .preview-message__name { color: #191a26; } .preview-message.active .preview-message__content { color: #191a26; } .preview-message.active .preview-message__date { color: #191a26; } @media (min-width: 767px) and (max-width: 1440px) { .preview-message { padding: 0.2777777778vw 8px 0.8333333333vw; -ms-grid-columns: 4.4444444444vw 1.1111111111vw 1fr 1.1111111111vw 4.1666666667vw; grid-template-columns: 4.4444444444vw 1fr 4.1666666667vw; gap: 0.2777777778vw 1.1111111111vw; border-radius: 1.3888888889vw; } .preview-messages { gap: 0.5555555556vw; } .preview-message__name { font-size: 1.1111111111vw; } .preview-message__content { font-size: 0.9722222222vw; } .preview-message__date { font-size: 0.8333333333vw; margin-bottom: 0.2777777778vw; } } @media (max-width: 766px) { .preview-message { padding: 0.2666666667vw 8px 3.2vw; -ms-grid-columns: 17.0666666667vw 4.2666666667vw 1fr 4.2666666667vw 16vw; grid-template-columns: 17.0666666667vw 1fr 16vw; gap: 1.0666666667vw 4.2666666667vw; border-radius: 5.3333333333vw; } .preview-messages { gap: 2.1333333333vw; } .preview-message__name { font-size: 4.2666666667vw; } .preview-message__content { font-size: 3.7333333333vw; } .preview-message__date { font-size: 3.2vw; margin-bottom: 1.0666666667vw; } } .course-form__main { display: -ms-grid; display: grid; gap: 24px; } .course-form__modal-form { display: -ms-grid; display: grid; gap: 24px; } .course-form__card-header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1440px) { .course-form__card-header { display: -ms-grid; display: grid; -ms-grid-columns: 104px 1fr 104px; grid-template-columns: 104px 1fr 104px; } } @media (min-width: 767px) and (max-width: 1440px) { .course-form__card-header { display: -ms-grid; display: grid; -ms-grid-columns: 7.2222222222vw 1fr 7.2222222222vw; grid-template-columns: 7.2222222222vw 1fr 7.2222222222vw; } } @media (max-width: 766px) { .course-form__card-header { display: -webkit-box; display: -ms-flexbox; display: flex; } } .course-form__card-number { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; } .course-form__card-player { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; min-width: 300px; } .course-form__card-player .audio-player { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .course-form__header-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .course-form__header-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .course-form__actions { position: sticky; background-color: #fff; z-index: 123; padding-top: 12px; bottom: 0; } @media (min-width: 767px) { .course-form__covers .swiper { width: 100%; } .course-form__covers .swiper-wrapper { width: 100%; height: auto !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 32px; } .course-form__covers .swiper-slide { width: unset !important; } } @media (min-width: 1440px) { .course-form__covers .swiper-wrapper { gap: 32px; } } @media (min-width: 767px) and (max-width: 1440px) { .course-form__covers .swiper-wrapper { gap: 2.2222222222vw; } } .course-form__card-body { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 24px 1fr 24px 169px; grid-template-columns: 1fr 1fr 169px; gap: 24px; } .course-form__variants { display: -ms-grid; display: grid; -ms-grid-columns: 231px 16px 1fr; grid-template-columns: 231px 1fr; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .course-form__variants-list { -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; display: -ms-grid !important; display: grid !important; gap: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 767px) { .course-form__modal { position: fixed; z-index: 123458; left: 50%; top: 50%; overflow-y: scroll; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; width: 720px; height: 524px; border-radius: 20px !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 22px 16px 16px; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .course-form__modal.show { pointer-events: all; opacity: 1; visibility: visible; } .course-form__modal-form { gap: 40px; } } @media (min-width: 767px) and (max-width: 1440px) { .course-form__main { gap: 1.6666666667vw; } .course-form__modal { border-radius: 1.3888888889vw !important; } .course-form__modal-form { gap: 2.7777777778vw; } .course-form__card-number { font-size: 1.25vw; } .course-form__card-player { min-width: 20.8333333333vw; } .course-form__header-actions { gap: 1.1111111111vw; } .course-form__actions { padding-top: 0.8333333333vw; } .course-form__card-body { -ms-grid-columns: 1fr 1.6666666667vw 1fr 1.6666666667vw 11.7361111111vw; grid-template-columns: 1fr 1fr 11.7361111111vw; gap: 1.6666666667vw; } .course-form__variants { -ms-grid-columns: 16.0416666667vw 1.1111111111vw 1fr; grid-template-columns: 16.0416666667vw 1fr; gap: 1.1111111111vw; } .course-form__variants-list { gap: 1.1111111111vw; } .course-form__modal { width: 50vw; max-height: 36.3888888889vw; padding: 1.5277777778vw 1.1111111111vw 1.1111111111vw; } } @media (max-width: 766px) { .course-form__main { gap: 4.2666666667vw; } .course-form__modal-form { gap: 6.4vw; } .course-form__card-number { font-size: 4.8vw; } .course-form__card-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .course-form__card-image .form__sm-image { width: 32vw; height: 18.6666666667vw; } .course-form__card-player { min-width: 80vw; } .course-form__audio { -ms-flex-wrap: wrap; flex-wrap: wrap; } .course-form__card-header { -ms-flex-wrap: wrap; flex-wrap: wrap; } .course-form__card-header > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .course-form__card-player { margin-top: 4.2666666667vw; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 100%; } .course-form__header-actions { gap: 4.2666666667vw; } .course-form__actions { padding-top: 3.2vw; } .course-form__card-body { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 6.4vw; } .course-form__variants { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 4.2666666667vw; } .course-form__variants-list { gap: 4.2666666667vw; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .course-form__covers { margin-left: -4.2666666667vw; margin-right: -4.2666666667vw; height: 91.4666666667vw; overflow: visible; } .course-form__covers .swiper-slide { width: 91.4666666667vw !important; } } .meeting-main__top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 24px; } .meeting__image { width: 480px; height: 480px; } .meeting__title { font-weight: 500; font-size: 20px; line-height: 1.75em; letter-spacing: -0.01em; color: #191a26; } .meeting__subtitle { font-weight: 400; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; } .meeting-add-info { text-align: center; } .meeting-add-info__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 12px; } .meeting-add-info__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; gap: 12px; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.25em; color: #191a26; } .meeting-add-info__subtitle { margin-top: 8px; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; text-align: center; color: #8e35ff; } .meeting__buttons { max-width: 204px; width: 100%; display: -ms-grid; display: grid; } .meeting__result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .meeting__result-icon { width: 64px; position: relative; z-index: 12; margin-left: -24px; margin-right: -24px; } .meeting__result-icon img { width: 100%; } @media (min-width: 767px) and (max-width: 1440px) { .meeting-main__top { gap: 1.6666666667vw; } .meeting__image { width: 33.3333333333vw; height: 33.3333333333vw; } .meeting__title { font-size: 1.3888888889vw; } .meeting__subtitle { font-size: 1.1111111111vw; } .meeting-add-info__list { gap: 0.8333333333vw; } .meeting-add-info__title { gap: 0.8333333333vw; font-size: 0.9722222222vw; } .meeting-add-info__subtitle { margin-top: 0.5555555556vw; font-size: 1.1111111111vw; } .meeting__buttons { max-width: 14.1666666667vw; } .meeting__result-icon { width: 4.4444444444vw; margin-left: -1.6666666667vw; margin-right: -1.6666666667vw; } } @media (max-width: 766px) { .meeting-main__top { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 6.4vw 1fr; grid-template-columns: 1fr 1fr; gap: 6.4vw; -ms-grid-rows: auto 6.4vw auto; grid-template-areas: "image image " "dislike like"; } .meeting-main__like { grid-area: like; margin-left: auto; } .meeting-main__dislike { margin-right: auto; grid-area: dislike; } .meeting__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; grid-area: image; width: 93.3333333333vw; height: 93.3333333333vw; margin-bottom: -12.8vw; } .preview-message > .meeting__image { -ms-grid-row: 1; -ms-grid-row-span: 3; -ms-grid-column: 1; } .meeting__title { font-size: 5.3333333333vw; } .meeting__subtitle { font-size: 4.2666666667vw; } .meeting-add-info__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.2vw; } .meeting-add-info__title { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; gap: 3.2vw; font-size: 3.7333333333vw; } .meeting-add-info__subtitle { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; margin-top: 2.1333333333vw; font-size: 4.2666666667vw; } .meeting__buttons { max-width: 54.4vw; } .meeting__result-icon { width: 17.0666666667vw; margin-left: -6.4vw; margin-right: -6.4vw; } .meeting-main__top > .profile-header__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .meeting-main__top > .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .meeting-main__top > .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } } @media (max-width: 766px) { .partner-page .course__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .partner-page .course__body-list { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .partner-page .course__body-divider { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .partner-page .course__body-buttons { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } } @media (max-width: 766px) { .partner-page .refferal-link-box { display: -ms-grid; display: grid; grid-template-areas: "title " "benefits " "form"; } .partner-page .refferal-link-box .refferal-title { grid-area: title; } .partner-page .refferal-link-box .refferal-form { grid-area: form; } .partner-page .refferal-link-box .refferal-benefits { grid-area: benefits; } .partner-page .refferal-link-box .gradient-hexagon .title.big { font-size: 6.4vw; } } @media (max-width: 766px){ .header.full .header__left { -ms-grid-row: 1; -ms-grid-column: 1; } .header.full .header__search { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .header.full .header__actions { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-row > .personal-account__operation-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__operation-history-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__operation-history-td.card { -ms-grid-row: 3; -ms-grid-column: 1; } .personal-account__order-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__order-history-row > .personal-account__order-history-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__order-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-row > .personal-account__order-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-row > .personal-account__order-history-td.actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__order-history-row > .personal-account__order-history-td.date { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; } .personal-account__order-history-td.card { -ms-grid-row: 3; -ms-grid-column: 1; } .personal-account__order-history-row > .personal-account__order-history-td.card { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__order-history-td.author { -ms-grid-row: 3; -ms-grid-column: 1; } .personal-account__refferal-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__order-history-row > .personal-account__refferal-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__refferal-row > .personal-account__refferal-td.price { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__refferal-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__order-history-row > .personal-account__refferal-td.date { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; } .personal-account__refferal-row > .personal-account__refferal-td.date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 1; } .personal-account__refferal-td.card { -ms-grid-row: 3; -ms-grid-column: 1; } .personal-account__order-history-row > .personal-account__refferal-td.card { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__refferal-row > .personal-account__refferal-td.card { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 1; } .profile-header__actions { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-row > .profile-header__actions { -ms-grid-row: 1; -ms-grid-column: 5; } .personal-account__order-history-row > .profile-header__actions { -ms-grid-row: 1; -ms-grid-column: 5; } .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .preview-message__date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .personal-account__order-history-row > .preview-message__date { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; } .personal-account__refferal-row > .preview-message__date { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 1; } .preview-message.active .preview-message__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .meeting-main__like { -ms-grid-row: 3; -ms-grid-column: 3; } .meeting-main__dislike { -ms-grid-row: 3; -ms-grid-column: 1; } .meeting__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; } .meeting-main__top > .meeting__image { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .partner-page .refferal-link-box .refferal-form { -ms-grid-row: 3; -ms-grid-column: 1; } .partner-page .refferal-link-box .refferal-benefits { -ms-grid-row: 2; -ms-grid-column: 1; } } @media (max-width: 766px){ .detail-course__header-title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .detail-course__header > .detail-course__header-progress { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .detail-course__header-close { -ms-grid-row: 1; -ms-grid-column: 3; } .personal-account__operation-history-td.title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .personal-account__order-history-td.title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .personal-account__refferal-td.title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .partner-page .refferal-link-box .refferal-title { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } } .tippy-menu { padding: 8px; display: -ms-grid; display: grid; gap: 8px; } .tippy-menu__link { padding: 12px 16px; font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.5em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; min-height: 48px; color: #191a26; text-decoration: unset; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .tippy-menu__link:hover { background-color: #f5f8fa; } @media (min-width: 767px) and (max-width: 1440px) { .tippy-menu { padding: 0.5555555556vw; gap: 0.5555555556vw; } .tippy-menu__link { padding: 0.8333333333vw 1.1111111111vw; font-size: 1.1111111111vw; min-height: 3.3333333333vw; } } .group-edit-modal { position: fixed; z-index: 123458; left: 50%; top: 50%; overflow-y: scroll; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 573px; height: 660px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 22px 16px 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0; pointer-events: none; visibility: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .group-edit-modal.show { pointer-events: all; opacity: 1; visibility: visible; } .group-edit-modal__form { gap: 16px; padding-bottom: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100%; width: 100%; max-width: 500px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .group-edit-modal__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 767px) { .group-edit-modal { -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); background-color: #fff; } } @media (min-width: 767px) and (max-width: 1440px) { .group-edit-modal { width: 39.7916666667vw; height: 45.8333333333vw; padding: 1.5277777778vw 1.1111111111vw 1.1111111111vw; } .group-edit-modal__form { gap: 1.1111111111vw; padding-bottom: 5.5555555556vw; max-width: 34.7222222222vw; } } @media (max-width: 766px) { .group-edit-modal { width: 91.4666666667vw; height: 148.2666666667vw; background-image: url(/local/templates/yarkima/css/../images/pages/home/mob-modal-bg.svg); padding: 5.8666666667vw 4.2666666667vw 4.2666666667vw; } .group-edit-modal__form { gap: 4.2666666667vw; padding-bottom: 21.3333333333vw; max-width: 133.3333333333vw; } } .ctweb-smsauth-form{ display: flex; flex-direction: column; height: 100%; justify-content: center; } /* Скрываем все элементы с атрибутом id, содержащим '_timer' */ [id*="_timer"] { display: none; } /* End */ /* Start:/local/templates/yarkima/css/add.css?175182798730512*/ #auth2{ display:none; } #auth1 .phone{ margin-bottom:50px; } #auth2 .sms-code{ margin-bottom:50px; } .bxmaker-authuserphone-login-msg { display: none; border: 1px solid; padding: 15px; margin-bottom: 40px; border-radius: 3px; word-break: break-word; display: block; border-color: rgba(0, 221, 98, 0.2); background: rgba(0, 221, 98, 0.07); } .img-loaded{ background-size:cover; } .img-loaded .form__cover-image-info{ background-color:rgba(255,255,255,0.8); } .card-form{ display:none; } input.error,select.error{ border-color:#ff0000; } .form__sm-image-info img{ max-height:30px; max-width:30px; } .toggle-list__body{ display:none; } .toggle-list__body.show{ display:grid; } .toggle-list__header.haschild{ cursor:pointer; } .toggle-list__header svg{ display:inline-block; vertical-align:middle; fill:#8E35FF; } .toggle-list__header svg path{ fill:#8E35FF; } .toggle-list__header a{ text-decoration:none; color:rgba(25, 26, 38, 1); } .toggle-list a{ text-decoration:none; } .toggle-list ul a.current{ color:rgba(25, 26, 38, 1); } #pagination-container{ display:none; } .courses-list .course-item__text{ min-height:35px; } .course-item__image.hexagon svg, .course-item__image.hexagon svg path{ fill:#8E35FF; } .course-item:hover svg, .course-item:hover svg path{ fill:#FFFFFF; } .courses-list__slider a{ text-decoration:none; } #button-enter{ display:none; } .captchaCode{ display:inline-block; vertical-align:middle; } .bxmaker-authuserphone-login-captcha img{ display:inline-block; vertical-align:middle; } .bxmaker-authuserphone-login-captcha__reload{ display:inline-block; vertical-align:middle; position:relative; margin-top:-25px; margin-right:15px; } .bxmaker-authuserphone-login__show-password{ margin-top:10px; } input.captchaCode{ outline: none; cursor: default; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #8b8e9a; padding-left: 32px; padding-right: 32px; background: #f5f8fa; border-radius: 34px; border: unset; border: 2px solid transparent; min-height: 60px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; color: #191a26; font-family: "Inter Display", sans-serif; } .bxmaker-authuserphone-login-row.bxmaker-authuserphone-login__onlyauth.sms-code{ display:none; } .language-page .language-header { display: -webkit-box; display: -ms-flexbox; display: flex; } .catalog__list .achievement__icon{ max-width:37px; } .form-variant__title{ z-index:1; position:relative; } .form-variant__title input,.form-variant__title input:focus,.form-variant__title input:focus-visible{ border:0; outline:0; } .photo-list .profile-gallery__image{ display:inline-block; position:relative; } .photo-list{ margin-bottom:20px; } .image-del{ display:none; } .profile-gallery__image:hover .image-del{ display:inline-block; width:40px; height:40px; background:url(/local/templates/yarkima/images/icons/icom-delete.svg) no-repeat; background-position:center; background-color:#fff; border-radius:20px; z-index:100; position:absolute; bottom:10px; left:50%; margin-left:-20px; transition:ease all 0.3s; cursor:pointer; } .ilink{ display:inline-block; position:absolute; margin-left:20px; margin-top:20px; right:-20px; cursor:pointer; } #message-tabs{ min-height:700px; } .group-info{ margin-bottom:40px; } .group-text{ flex:0 0 calc(100% - 180px); padding-left:20px; } @media (min-width: 767px){ #pay-modal{ width:auto; left:10px; right:10px; } .intro-block{ background:none!important; } } @media (max-width: 766px){ .detail-course__card-info{ flex-direction:row; } .detail-course__card-title{ max-width:100%; word-break: break-all; } .preview-courses__container{ display:none; } .previews-courses__rows{ display:none; } .intro-block__content{ min-height:100px; } .intro-block{ background-size:cover; background-position:center; } .intro-block__container{ margin:0!important; } .banner-wrap{ width:100%; flex:0 0 100%; display:block!important; } .px-2{ padding:0!important; } .banner-wrap{ flex-wrap:wrap; } .banner-block{ flex:0 0 100%; padding:20px; margin-bottom:20px; } .banner-block.right{ text-align:center; } .mob-modal{ padding-bottom:20px; } .modal-body{ padding:0 10px; } .collapse.preview-text.show{ height:auto; } .photo-section.tag-section .tag-select-wrap{ text-align:center; padding-left:0; padding-right:0; } .tag-select-wrap .form-select__container{ width:70%; } .tag-section .title{ padding-top:80px; text-align:center; } .photo-section.tag-section .tag-select-wrap .button span{ display:none; } .photo-section.tag-section .tag-select-wrap .button .mobspan{ display:inline-block; } .left-menu{ display:none; } .courses-list.hexagons .course:nth-child(3n-2) { margin: 0; } .sortblock{ display:none!important; } } .hidden{ display:none; } .photo-result img{ height:80px; margin:10px; } .modal-body .form-input{ margin-bottom:20px; } .image-title{ position:absolute; display:block; height:30px; line-height:30px; border-radius:15px; text-align:center; background-color:#fff; z-index:10; bottom:0; left:10px; right:10px; overflow:hidden; box-shadow:0 0 6px rgba(0,0,0,.2); } .photo-section{ background: #f5f8fa; padding: 32px; margin:30px 0; border-radius: 34px; } .photo-section .title{ font-size:20px; margin-bottom:20px; } .photo-section .photo-list{ margin-bottom:20px; } .photo-del{ display:none; } .profile-gallery__image:hover .photo-del,.photo-result:hover .photo-del, .video-result:hover .photo-del{ display:inline-block; width:40px; height:40px; background:url(/local/templates/yarkima/images/icons/icom-delete.svg) no-repeat; background-position:center; background-color:#fff; border-radius:20px; z-index:100; position:absolute; bottom:10px; left:50%; margin-left:-20px; transition:ease all 0.3s; cursor:pointer; } .photo-result:hover .photo-del,.video-result:hover .photo-del{ left:20%; bottom:0; margin-top:0; top:40px; } .tag-list{ margin:30px 0; } .tag{ display:inline-block; position:relative; height:48px; line-height:48px; display:inline-block; border: 1px solid #dee3e8; border-radius:24px; padding:0 24px; margin:0 10px 10px 0; cursor:pointer; } .tag-del{ display:none; } .tag:hover .tag-del{ display:inline-block; width:40px; height:40px; background:url(/local/templates/yarkima/images/icons/icom-delete.svg) no-repeat; background-position:center; background-color:#fff; border-radius:20px; z-index:100; position:absolute; bottom:10px; left:50%; margin-left:-20px; transition:ease all 0.3s; cursor:pointer; } .tag-select-wrap{ background-color:#fff; padding:5px 40px; border-radius:35px; float:right; margin-right:20px; } .tag-select-wrap .button{ margin-top:0!important; } .photo-section.error{ border:2px solid #ff0000; } .var-dop{ display:none; } .form-variant:hover .var-dop{ display:inline-flex; z-index:100; position:absolute; bottom:0px; left:0; top:100%; transition:ease all 0.3s; padding:10px 20px; height:80px; background-color:#fff; box-shadow:0 0 6px rgba(0,0,0,0.3); border-radius:20px; } .var-del{ margin-left:30px; display:inline-block; margin-top:0px; width:30px; height:30px; background:url(/local/templates/yarkima/images/icons/icom-delete.svg) no-repeat; background-position:center; cursor:pointer; } .form-variant__number span{ cursor:grab; user-select:none; } .course-form__card-setup{ cursor:grab; user-select:none; } .card-image-del{ display:none; } .course-form__card-image{ position:relative; } .course-form__card-image:hover .card-image-del{ display:inline-block; width:40px; height:40px; background:url(/local/templates/yarkima/images/icons/icom-delete.svg) no-repeat; background-position:center; background-color:#fff; border-radius:20px; z-index:100; position:absolute; bottom:0px; right:0%; transition:ease all 0.3s; cursor:pointer; } .more-items{ display:none!important; } .loading{ margin:30px 0; text-align:center; } .loading img{ width:40px; height:40px; display:inline-block; } .navigation{ display:none; } .select2{ border:0; color:rgba(142, 53, 255, 1); font-size:14px; text-transform:uppercase; font-weight:600; cursor:pointer; height:30px; line-height:30px; padding:0 10px; appearance:none; } .form-input__label.active{ -webkit-transform: translateY(-12px); transform: translateY(-12px); font-size: 12px; } .form-textarea textarea.error{ border:1px solid #ff0000; } .audio-frame{ border:0; background-color:#fff; height:48px; overflow:hidden; } .icon.play::before { background-image: url(/local/templates/yarkima/images/icons/icon-play.svg); } .detail-course__variant.form-variant:hover{ border-color:#8e35ff; cursor:pointer; } .detail-course__variant.form-variant.active{ border-color:#8e35ff; } .selected-variant{ margin-top:40px; text-align:center; font-size:16px; } .selected-variant span{ font-size:20px; font-weight:600; } .step-error{ text-align:center; margin:20px 0; color:#8e35ff; } .finished{ text-align:center; display:flex; align-items:center; margin-bottom:40px; } .get-dost{ text-align:center; } .get-dost .achievement__icon{ display:inline-block; vertical-align:middle; } .get-dost .achievement__icon img{ display:inline-block; vertical-align:middle; } .var-dop .form-checkbox-toggler span{ font-size:13px; white-space:nowrap; } .res-tg{ margin:50px 0; } .rating .star{ cursor:pointer; } .res-tg h3{ margin-bottom:10px; } .form-checkbox-toggler.useranswer{ display:inline-block; float:right; } .useranswer .form-checkbox-toggler__el{ display:inline-block; vertical-align:middle; } .active .form-checkbox-toggler__el { background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(60.5%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 60.5%, #17bae5); } .active .form-checkbox-toggler__el::before { background-color: #fff; -webkit-transform: translateX(32px); transform: translateX(32px); } .avatar.hexagon.xs{ width:120px; height:120px; } .modal{ display:none; position:fixed; left:50%; top:50%; margin-left:-170px; margin-top:-150px; background-color:#fff; padding:30px; width:340px; height:300px; box-shadow:0 0 20px rgba(0,0,0,0.3); border-radius:20px; } .modal.active{ display:block; z-index:1000; } .modal a.button{ display:inline-block; } .avatar-image{ text-align:center; margin-bottom:20px; } .avatar-image img{ height:80px; } .language-header__author-name a{ color:#000; text-decoration:none; } .detail-course-page.finished:after{ display:none; } .meeting-success{ display:none; } .meeting-success.active{ display:block; position:absolute; left:0; right:0; top:0; bottom:0; z-index:100; background-color:#fff; } .profile__content.meeting{ position:relative; } .meeting .user{ display:none; } .meeting .user.active{ display:block; } #pay-modal{ width:50%; margin-left:-25%; left:50%; top:25%; bottom:25%; margin-top:0; z-index:10000; } #pay-modal .modal-close{ position:absolute; right:0; } #pay-modal .modal-content{ position:relative; } #pay-modal iframe{ border:0; width:100%; } .detail-course__card{ left:100%; position:absolute; transform:rotate(-180deg); padding-top:100px; } .detail-course__card.noactive{ position:relative; animation-name: card-to-noactive; animation-duration: 0.5s; animation-timing-function:linear; } .detail-course__card.active{ position:relative; left:0; transform:rotate(-360deg); animation-name: card-to-active; animation-duration: 0.5s; animation-timing-function:linear; } .detail-course__card.completed{ animation-name: card-to-completed; animation-duration: 0.5s; animation-timing-function:linear; } @keyframes card-to-active { from { left:100%; transform:rotate(0deg); } to { left:0; position:relative; transform:rotate(-360deg) ; } } @keyframes card-to-noactive { from { left:0; } to { left:100%; transform:rotate(360deg) ; } } @keyframes card-to-completed { from { left:0; } 50%{ position:absolute; left:-50%; transform:rotate(-180deg); } to { left:-100%; transform:rotate(-359deg); position:relative; } } .chat { background-color: #fff; border: 1px solid #dee3e8; border-radius: 20px; position: relative; overflow: hidden; padding-bottom: 64px; height: 560px; overflow: hidden; } .chat-body { max-height: 440px; display: -ms-grid; display: grid; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; gap: 8px; padding: 16px; } .chat__send { background-color: #fff; position: absolute; bottom: 0; left: 0; right: 0; min-height: 64px; border-top: 1px solid #dee3e8; padding-top: 18px; padding-right: 64px; } .chat-header { display: -ms-grid; display: grid; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-grid-columns: 1fr 32px; grid-template-columns: 1fr 32px; padding: 4px 16px; } .chat-header__name { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; color: #191a26; } .chat-header__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .chat__date { text-align: center; font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 18px; letter-spacing: -0.01em; color: #8b8e9a; } .chat-message { background-color: #f5f8fa; max-width: 508px; padding: 6px 12px; display: -ms-inline-grid; display: inline-grid; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-grid-columns: minmax(0, 1fr) 18px 86px; grid-template-columns: minmax(0, 1fr) 86px; gap: 18px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; margin-right: auto; } .chat-page .chat-message__content { font-family: "Inter Display"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 1.25em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: -0.01em; color: #191a26; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-positive: 0; flex-grow: 0; } .chat-message__date { font-family: "Inter Display"; font-style: normal; font-weight: 500; font-size: 12px; line-height: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: right; letter-spacing: -0.01em; text-align: right; color: #8b8e9a; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex-positive: 0; flex-grow: 0; } .chat-page .chat-message.from { margin-right: 0; margin-left: auto; color: #fff; background-color: #8e35ff; border-bottom-left-radius: 20px; border-bottom-right-radius: 0; } .chat-message.from .chat-message__content { color: #fff; } .chat-message.from .chat-message__date { color: rgba(255, 255, 255, 0.5); white-space:nowrap; } .chat__send { background-color: #fff; position: absolute; bottom: 0; left: 0; right: 0; min-height: 64px; border-top: 1px solid #dee3e8; padding-top: 18px; padding-right: 64px; } .chat__send textarea { width: 100%; resize: none; padding-left: 24px; font-family: "Inter Display"; height: 100%; border: unset; width: 100%; outline: none; } .chat__send-button { position: absolute; right: 16px; top: 6px; } .preview-message{ max-height:109px; } .preview-messages{ align-items:start; grid-auto-rows: 109px; position:relative; } .chat-message.from { margin-right: 0; margin-left: auto; color: #fff; background-color: #8e35ff; border-bottom-left-radius: 20px; border-bottom-right-radius: 0; } .form__sm-image-preview video{ width:170px; height:92px; } .chat-page .chat-header{ width:calc(100% - 32px); } .chat-page .chat-message{ grid-template-columns: minmax(0, 1fr) 86px; } .chat-page .chat-message__date{ white-space:nowrap; } #card-modal { overflow-y: auto; height:600px; } #card-modal .flex{ margin-top:30px; } .flex{ display:flex; justify-content:space-between; } .flex-col{ flex:0 0 calc(50% - 20px); } .input-title{ font-style: normal; font-weight: 700; font-size: 15px; line-height: 1.25em; letter-spacing: -0.01em; } .video-result video{ height:100px; } .user-card-image img{ width:100%; margin-bottom:30px; } .user-card-video video{ width:100%; margin-bottom:30px; } .user-card-buttons{ margin-top:20px; } .user-card-buttons button{ display:inline-block!important; padding:0 20px; } .user-card-title{ font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.25em; letter-spacing: -0.01em; margin:20px 0; } .user-card{ margin-bottom:30px; } .sale-paysystem-wrapper{ text-align:center; } .subtitle a{ color:#000; text-decoration:none; } .course__title a{ color:#000; text-decoration:none; } .form-dropdown__item.selected { background-color: #8e35ff; color: #fff; } .vizitka .detail-course__card-inner{ width:100%; height:100%; flex:0 0 100%; align-items:center; text-align:center; } .vizitka .user-card-image{ position:absolute; top:-210px; } .selectdiv{ min-width:200px; overflow: hidden; max-height: 288px; border: 1px solid #dee3e8; min-height: 60px; height: 60px; line-height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 36px; position: relative; font-weight: 500; font-size: 16px; line-height: 1.5em; letter-spacing: -0.01em; padding-left: 32px; padding-right: 32px; background: #f5f8fa; border: unset; border: 2px solid transparent; min-height: 60px; width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; color: #191a26; font-family: "Inter Display", sans-serif; cursor:pointer; position:absolute; z-index:100; } .selectdiv .option{ display:block; height: 60px; line-height: 60px; display:none; } .selectdiv .option.active{ display:block; font-weight:700; } .selectdiv .option:hover:not(.selectdiv .option.active:hover){ font-weight:700; } .selectdiv::before { content: " "; position: absolute; right: 32px; top: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background-image: url(/local/templates/yarkima/css/../images/icons/icon-down.svg); } .selectdiv.active{ height:auto; overflow:auto; } .selectdiv.active .option{ display:block; } .course-attach{ position:relative; } .course-attach .course-form__card-image{ margin-top:80px; display:none; } .course-attach .course-form__card-image.active{ display:block; } .form__sm-image-info video{ width:100%; height:100%; } .form__sm-image-info audio{ width:100%; height:100%; } .video-result .loading{ width:40px; height:40px; } .detail-course__variants{ height:168px; overflow-y:auto; grid-template-rows: 48px; } .form-variant{ height:48px; } .detail-course__card-inner .music{ position:absolute; left:50%; margin-left:-20px; margin-top:-60px; } .detail-course__card-add .video video{ max-width:100%; max-height:100px; } .detail-course__card-add .hexagon{ margin-top:0px; } .detail-course__card-add .hexagon img{ max-height:200px; } .form-checkbox-toggler.transcription{ max-width:200px; } a.transcript{ margin-left:10px; margin-top:5px; } .detail-course__footer{ margin-top:50px; } .meeting-finish{ width:50%; display:flex; align-items:center; background:url(/local/templates/yarkima/images/pages/home/modal-bg.svg) no-repeat; background-size:contain; min-height:500px; font-size:20px; text-align:center; } .meeting-finish div{ flex:0 0 100%; display:inline-block; } .course-date{ color:#aaa; text-align:right; position:absolute; right:20px; } .num{ display:inline-block; position:absolute; color: #fff; width:20px; height:20px; line-height:20px; border-radius:10px; text-align:center; background-color: #8e35ff; font-size:10px; right:8px; top:20px; } .achievement__icon{ position:relative; } .form-variant__title{ order:2; } .form-variant__number{ order:1; } .detail-course-page.cover::after{ display:none!important; } .course-cover{ position:absolute; top:100px; right:-200px; width:471px; height:471px; } .hexagon.cover{ border: 0px solid ; border-image-source: radial-gradient(114.53% 167.34% at 50% -51.72%, #F36DFF 0%, #8745FE 60.5%, #17BAE5 100%); outline:4px solid #fff; box-shadow: -2px 2px 4px 0px rgba(25, 26, 38, 0.06); background-size:cover; background-position:center; background-repeat:no-repeat; } .hexagon.cover::before { content: " "; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; -o-object-fit: cover; object-fit: cover; -webkit-mask-image: url(data:image/svg+xml;utf8,); mask-image: url(data:image/svg+xml;utf8,); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: #fff; } .hexagon.cover.cover1{ transform:rotate(-30deg); position:absolute; z-index:100; } .hexagon.cover.cover2{ transform:rotate(-15deg); position:absolute; z-index:200; } .hexagon.cover.cover3{ transform:rotate(15deg); position:absolute; z-index:300; } .beta{ max-height:54px; } .plink{ float:right; } .author-item.over{ display:none; } .open .author-item.over{ display:inline-block; } .table{ } .tr{ display:flex; border-bottom:1px solid #eee; margin-bottom:16px; } .th{ padding:10px; font-weight:600; } .td{ padding:10px; } .th.numc{ flex:0 0 10%; } .th.name{ flex:0 0 50%; } .th.reg{ flex:0 0 15%; } .th.comp{ flex:0 0 15%; } .th.butt{ flex:0 0 10%; } .td.numc{ flex:0 0 10%; } .td.name{ flex:0 0 50%; } .td.reg{ flex:0 0 15%; } .td.comp{ flex:0 0 15%; } .td.butt{ flex:0 0 10%; } .table a{ color:#000; } .table{ margin:30px 0; } .itogo{ margin:30px; } .audio-google{ display:none; } .audio-google.active{ display:flex; } .dost{ margin-right:30px; } .dost input{ vertical-align:middle; display:inline-block; width:16px; height:16px; } .dost img{ vertical-align:middle; } .intro-block__text ul{ padding:0; } .intro-block__text ul li{ text-align:left; } .banner-block.right img{ width:100%; } .banner-block{ flex:0 0 calc(50% - 80px); } .view-more{ display:inline-block; width:30px; height:25px; vertical-align:middle; background:url(/local/templates/yarkima/images/icons/arrow-left.svg) no-repeat; transform:rotate(-90deg); } .view-more.active{ transform:rotate(90deg); } .pol-content{ display:none; } .pol-content.active{ display:block; } .icon.tg:before{ content:"\ea95"; background-image: url(/local/templates/yarkima/images/icons/socials/telegram.svg); } .icon.twitter:before{content:"\ea96"; background-image: url(/local/templates/yarkima/images/icons/socials/twitter.svg); } .sm.www{ font-size:10px; text-decoration:none; } .sm.www:hover{ color:#fff; } .sm.www:before{ z-index:-1; } body{ font-family:'Inter'; } .msgerror{ margin:30px 0; background: #f5f8fa; padding:20px; color:#ff0000; font-size:20px; font-weight:700; } .radio-box{ width: 72px; height: 40px; border-radius: 30px; display: inline-block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; background: #f5f8fa; position: relative; } .radio-box::before { content: " "; position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; background-color: #b9bdcc; border-radius: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .radio-box.active { background: -webkit-gradient(linear, left top, left bottom, from(#f36dff), color-stop(60.5%, #8745fe), to(#17bae5)); background: linear-gradient(#f36dff, #8745fe 60.5%, #17bae5); } .radio-box.active:before { background-color:#fff; transform: translateX(32px); } .right-answer input[type="checkbox"]{ position:absolute; left:-9999px; } .detail-course__card-inner .form-textarea textarea{ min-height:50px; } .detail-course__variants{ height:auto!important; min-height:120px; } .course-modal{ display:none; } .course-form__cards.d-md-flex.hide{ display:none!important; } .d-md-flex.hide{ display:none!important; } .detail-course__card-inner{ display:flex; align-items:center; justify-content:center; height:100%; flex-wrap:wrap; } .detail-course__card-top{ flex:0 0 100%; flex-wrap:wrap; display:flex; width:100%; } .detail-course__card-info{ display:flex; flex-wrap:wrap; width:100%; } .detail-course__card-label{ flex:0 0 100%; margin-bottom:10px; } .detail-course__card-title{ flex:0 0 100%; margin-bottom:10px; } .detail-course__card-add{ flex:0 0 100%; } .detail-course__variants{ flex:0 0 100%; } @media (max-width: 767px){ #completion .course-cover{ display:none; } .detail-course__card.active{ padding-top:20px; } .course.hexagon{ } .courses-list.hexagons{ display:block; } .courses-list.hexagons{ margin-bottom:10px!important; } .course.hexagon{ margin-bottom:10px!important; } .swiper-home.swiper-horizontal{ overflow-x:hidden; } .course.hexagon.bilet{ width:50px!important; height:50px!important; display:inline-block; cursor:pointer; } .review button.d-none{ display:inline-block!important; } } @media (max-width: 450px){ .detail-course__variants.grid-2{ grid-template-columns: repeat(1, 1fr); min-height:178px; margin-top:10px; padding-top:2px; max-height:100%; } } .useranswer.hidden{ display:none!important; } .add-variant.hidden{ display:none!important; } .course.hexagon.bilet{ width:150px; height:150px; display:inline-block; cursor:pointer; } .bilet-card{ display:none; } .bilet-card.active{ display:block; } .bilet-card-title{ font-size:24px; font-weight:600; margin:20px 0 40px 0; } .bilet-card-quest{ margin:40px 0; padding:30px; background-color:#f6f6f6; border-radius:20px; } .bilet-card.completed,.bilet.completed{ display:none!important; } .bilet-list{ margin:50px 0; } .bilet-instr{ margin:20px 0; } .bilet-card .form-textarea{ margin-bottom:30px; } .course-modal.show{ display:block; } .sc header{ display:none; } .sc main{ margin-top:100px; } .sc #telegram-login-yarkima_bot { display:none; } .hexagon.sc-cover{ max-width:300px; } #payment.modal{ margin-left:-200px; width:400px; } .hexagon .course__title a{ display:block; height:30px; overflow:hidden; } .collapse.show{ max-height:100%; } .detail-course__card-title{ word-break:break-all; } /* End */ /* Start:/local/templates/yarkima/css/jquery.fancybox.css?172962862917412*/ body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden; } .fancybox-container { -webkit-backface-visibility: hidden; height: 100%; left: 0; outline: none; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -ms-touch-action: manipulation; touch-action: manipulation; transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { box-sizing: border-box; } .fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: rgb(30, 30, 30); opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(.47, 0, .74, .71); } .fancybox-is-open .fancybox-bg { opacity: .9; transition-timing-function: cubic-bezier(.22, .61, .36, 1); } .fancybox-infobar, .fancybox-toolbar, .fancybox-caption, .fancybox-navigation .fancybox-button { direction: ltr; opacity: 0; position: absolute; transition: opacity .25s ease, visibility 0s ease .25s; visibility: hidden; z-index: 99997; } .fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar, .fancybox-show-caption .fancybox-caption, .fancybox-show-nav .fancybox-navigation .fancybox-button { opacity: 1; transition: opacity .25s ease 0s, visibility 0s ease 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; transform: translateZ(0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { -webkit-backface-visibility: hidden; /* Using without prefix would break IE11 */ display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: transform, opacity; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide::before { content: ''; display: inline-block; font-size: 0; height: 100%; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--previous, .fancybox-slide--current, .fancybox-slide--next { display: block; } .fancybox-slide--image { overflow: hidden; padding: 44px 0; } .fancybox-slide--image::before { display: none; } .fancybox-slide--html { padding: 6px; } .fancybox-content { background: #fff; display: inline-block; margin: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { animation-timing-function: cubic-bezier(.5, 0, .14, 1); -webkit-backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; -ms-transform-origin: top left; transform-origin: top left; transition-property: transform, opacity; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: zoom-in; } .fancybox-can-swipe .fancybox-content, .fancybox-can-pan .fancybox-content { cursor: -webkit-grab; cursor: grab; } .fancybox-is-grabbing .fancybox-content { cursor: -webkit-grabbing; cursor: grabbing; } .fancybox-container [data-selectable='true'] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--video .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content, .fancybox-slide--iframe .fancybox-content { height: 100%; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background: #fff; } .fancybox-video, .fancybox-iframe { background: transparent; border: 0; display: block; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } /* Fix iOS */ .fancybox-iframe { left: 0; position: absolute; top: 0; } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } /* Buttons */ .fancybox-button { background: rgba(30, 30, 30, .6); border: 0; border-radius: 0; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: relative; transition: color .2s; vertical-align: top; visibility: inherit; width: 44px; } .fancybox-button, .fancybox-button:visited, .fancybox-button:link { color: #ccc; } .fancybox-button:hover { color: #fff; } .fancybox-button:focus { outline: none; } .fancybox-button.fancybox-focus { outline: 1px dotted; } .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; outline: none; } /* Fix IE11 */ .fancybox-button div { height: 100%; } .fancybox-button svg { display: block; height: 100%; overflow: visible; position: relative; width: 100%; } .fancybox-button svg path { fill: currentColor; stroke-width: 0; } .fancybox-button--play svg:nth-child(2), .fancybox-button--fsenter svg:nth-child(2) { display: none; } .fancybox-button--pause svg:nth-child(1), .fancybox-button--fsexit svg:nth-child(1) { display: none; } .fancybox-progress { background: #ff5268; height: 2px; left: 0; position: absolute; right: 0; top: 0; -ms-transform: scaleX(0); transform: scaleX(0); -ms-transform-origin: 0; transform-origin: 0; transition-property: transform; transition-timing-function: linear; z-index: 99998; } /* Close button on the top right corner of html content */ .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #ccc; cursor: pointer; opacity: .8; padding: 8px; position: absolute; right: -12px; top: -44px; z-index: 401; } .fancybox-close-small:hover { color: #fff; opacity: 1; } .fancybox-slide--html .fancybox-close-small { color: currentColor; padding: 10px; right: 0; top: 0; } .fancybox-slide--image.fancybox-is-scaling .fancybox-content { overflow: hidden; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small { display: none; } /* Navigation arrows */ .fancybox-navigation .fancybox-button { background-clip: content-box; height: 100px; opacity: 0; position: absolute; top: calc(50% - 50px); width: 70px; } .fancybox-navigation .fancybox-button div { padding: 7px; } .fancybox-navigation .fancybox-button--arrow_left { left: 0; left: env(safe-area-inset-left); padding: 31px 26px 31px 6px; } .fancybox-navigation .fancybox-button--arrow_right { padding: 31px 6px 31px 26px; right: 0; right: env(safe-area-inset-right); } /* Caption */ .fancybox-caption { background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .15) 65%, rgba(0, 0, 0, .075) 75.5%, rgba(0, 0, 0, .037) 82.85%, rgba(0, 0, 0, .019) 88%, rgba(0, 0, 0, 0) 100%); bottom: 0; color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 75px 44px 25px 44px; pointer-events: none; right: 0; text-align: center; z-index: 99996; } @supports (padding: max(0px)) { .fancybox-caption { padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)); } } .fancybox-caption--separate { margin-top: -50px; } .fancybox-caption__body { max-height: 50vh; overflow: auto; pointer-events: all; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } /* Loading indicator */ .fancybox-loading { animation: fancybox-rotate 1s linear infinite; background: transparent; border: 4px solid #888; border-bottom-color: #fff; border-radius: 50%; height: 50px; left: 50%; margin: -25px 0 0 -25px; opacity: .7; padding: 0; position: absolute; top: 50%; width: 50px; z-index: 99999; } @keyframes fancybox-rotate { 100% { transform: rotate(360deg); } } /* Transition effects */ .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, .25, 1); } /* transitionEffect: slide */ .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; transform: translate3d(0, 0, 0); } /* transitionEffect: fade */ .fancybox-fx-fade.fancybox-slide--previous, .fancybox-fx-fade.fancybox-slide--next { opacity: 0; transition-timing-function: cubic-bezier(.19, 1, .22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } /* transitionEffect: zoom-in-out */ .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; transform: scale3d(.5, .5, .5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; transform: scale3d(1, 1, 1); } /* transitionEffect: rotate */ .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; -ms-transform: rotate(-360deg); transform: rotate(-360deg); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; -ms-transform: rotate(360deg); transform: rotate(360deg); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; -ms-transform: rotate(0deg); transform: rotate(0deg); } /* transitionEffect: circular */ .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } /* transitionEffect: tube */ .fancybox-fx-tube.fancybox-slide--previous { transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { transform: translate3d(100%, 0, 0) scale(.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { transform: translate3d(0, 0, 0) scale(1); } /* Styling for Small-Screen Devices */ @media all and (max-height: 576px) { .fancybox-slide { padding-left: 6px; padding-right: 6px; } .fancybox-slide--image { padding: 6px 0; } .fancybox-close-small { right: -6px; } .fancybox-slide--image .fancybox-close-small { background: #4e4e4e; color: #f2f4f6; height: 36px; opacity: 1; padding: 6px; right: 0; top: 0; width: 36px; } .fancybox-caption { padding-left: 12px; padding-right: 12px; } @supports (padding: max(0px)) { .fancybox-caption { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } } } /* Share */ .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px 0; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px 5px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all .2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:visited, .fancybox-share__button:link { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0 0; outline: none; padding: 10px 15px; width: 100%; } /* Thumbs */ .fancybox-thumbs { background: #ddd; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px 2px; position: absolute; right: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs__list { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x .fancybox-thumbs__list { overflow: hidden; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track { background: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs__list a { -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: rgba(0, 0, 0, .1); background-position: center center; background-repeat: no-repeat; background-size: cover; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs__list a::before { border: 6px solid #ff5268; bottom: 0; content: ''; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all .2s cubic-bezier(.25, .46, .45, .94); z-index: 99991; } .fancybox-thumbs__list a:focus::before { opacity: .5; } .fancybox-thumbs__list a.fancybox-thumbs-active::before { opacity: 1; } /* Styling for Small-Screen Devices */ @media all and (max-width: 576px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs__list a { max-width: calc(100% - 10px); } } /* End */ /* Start:/local/templates/yarkima/components/bitrix/catalog.section.list/template/style.min.css?17274400346236*/ .bx_catalog_line{margin-bottom:30px}.bx_catalog_line .bx_catalog_line_category_title{padding-bottom:14px;border-bottom:1px solid #e5e5e5;font-size:24px}.bx_catalog_line .bx_catalog_line_category_title a{color:#000;text-decoration:none}.bx_catalog_line .bx_catalog_line_ul{padding:0}.bx_catalog_line .bx_catalog_line_ul li{margin-bottom:20px;list-style:none}.bx_catalog_line .bx_catalog_line_ul li:before{content:''!important}.bx_catalog_line .bx_catalog_line_img{position:relative;display:block;float:left;overflow:hidden;margin-right:40px;width:125px;height:125px;border:1px solid #ccc;border-radius:2px;background-position:center;background-size:contain;background-repeat:no-repeat;-webkit-background-size:contain}.bx_catalog_line .bx_catalog_line_title{margin-bottom:10px;padding:0;vertical-align:top;line-height:18px}.bx_catalog_line .bx_catalog_line_title a{color:#4c7da6;font-size:18px}.bx_catalog_line .bx_catalog_line_title a:hover{text-decoration:none}.bx_catalog_line .bx_catalog_line_title span{font-size:16px}.bx_catalog_line .bx_catalog_line_description{color:#3f3f3f;font-size:13px;line-height:16px}@media(max-width:639px){.bx-touch .bx_catalog_line .bx_catalog_line_img{margin-right:10px;width:50px;height:50px}.bx-touch .bx_catalog_line .bx_catalog_line_title{margin-bottom:5px;line-height:14px}.bx-touch .bx_catalog_line .bx_catalog_line_title a{font-size:14px}.bx-touch .bx_catalog_line .bx_catalog_line_description{font-size:11px}}.bx_catalog_line .bx_catalog_line_img,.bx_catalog_line .bx_catalog_line_title,.bx_catalog_line .bx_catalog_line_title a,.bx_catalog_line .bx_catalog_line_description{transition:all .3s ease}.bx_catalog_text{margin-bottom:30px}.bx_catalog_text .bx_catalog_text_category_title{padding-bottom:14px;border-bottom:1px solid #e5e5e5;font-size:24px}.bx_catalog_text .bx_catalog_text_category_title a{color:#000;text-decoration:none}.bx_catalog_text .bx_catalog_text_ul{padding:0}.bx_catalog_text .bx_catalog_text_ul li{float:left;margin:0 10px 10px;list-style:none}.bx_catalog_text .bx_catalog_text_ul li:before{content:''!important}.bx_catalog_text .bx_catalog_text_title{margin:0;padding:0;vertical-align:top;font-size:14px;line-height:14px}.bx_catalog_tile .bx_catalog_tile_title a{display:inline-block;overflow:hidden;max-width:100%;color:#4c7da6;-ms-text-overflow:ellipsis;text-overflow:ellipsis;font-size:14px}.bx_catalog_text .bx_catalog_text_title a:hover{text-decoration:none}.bx_catalog_text .bx_catalog_text_title span{font-size:12px}@media(max-width:639px){.bx-touch .bx_catalog_text .bx_catalog_line_title{margin-bottom:5px;line-height:12px}.bx-touch .bx_catalog_text .bx_catalog_line_title a{font-size:12px}}.bx_catalog_text .bx_catalog_line_title,.bx_catalog_text .bx_catalog_line_title a{transition:all .3s ease}.bx_catalog_tile{margin-bottom:30px}.bx_catalog_tile .bx_catalog_tile_category_title{padding-bottom:14px;border-bottom:1px solid #e5e5e5;font-size:24px}.bx_catalog_tile .bx_catalog_tile_category_title a{color:#000;text-decoration:none}.bx_catalog_tile .bx_catalog_tile_ul{padding:0}.bx_catalog_tile .bx_catalog_tile_ul li{float:left;box-sizing:border-box;margin-bottom:20px;padding:0 10px;width:12.5%;list-style:none;text-align:center}.bx_catalog_tile .bx_catalog_tile_ul li:before{content:''!important}.bx_catalog_tile .bx_catalog_tile_ul li:nth-child(8n+1){clear:both}.bx_catalog_tile .bx_catalog_tile_img{position:relative;display:block;overflow:hidden;margin:0 auto;width:78px;height:78px;border:1px solid #ccc;border-radius:2px;background-color:#fff;background-position:center;background-size:contain;background-repeat:no-repeat;-webkit-background-size:contain}.bx_catalog_tile .bx_catalog_tile_title{margin-top:5px;margin-bottom:10px;padding:0;vertical-align:top;line-height:14px}.bx_catalog_tile .bx_catalog_tile_title a{color:#4c7da6;font-size:14px}.bx_catalog_tile .bx_catalog_tile_title a:hover{text-decoration:none}.bx_catalog_tile .bx_catalog_tile_title span{font-size:12px}@media(max-width:980px){.bx_catalog_tile .bx_catalog_tile_ul li{width:20%}.bx_catalog_tile .bx_catalog_tile_ul li:nth-child(8n+1){clear:none}.bx_catalog_tile .bx_catalog_tile_ul li:nth-child(5n+1){clear:both}}@media(max-width:639px){.bx-touch .bx_catalog_tile .bx_catalog_tile_title{margin-bottom:5px;line-height:14px}.bx-touch .bx_catalog_tile .bx_catalog_tile_title{line-height:10px}.bx-touch .bx_catalog_tile .bx_catalog_tile_title a{font-size:11px}}@media(min-width:480px) and (max-width:639px){.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li{width:25%}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(8n+1){clear:none}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(5n+1){clear:none}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(4n+1){clear:both}}@media(max-width:479px){.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li{width:33.3%}.bx-touch .bx_catalog_tile .bx_catalog_tile_img{width:100%;height:80px}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(8n+1){clear:none}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(5n+1){clear:none}.bx-touch .bx_catalog_tile .bx_catalog_tile_ul li:nth-child(3n+1){clear:both}}.bx_catalog_tile .bx_catalog_tile_title,.bx_catalog_tile .bx_catalog_tile_title a,.bx_catalog_tile .bx_catalog_tile_ul li,.bx_catalog_tile .bx_catalog_tile_img{transition:all .3s ease}.bx_sitemap{margin-bottom:30px}.bx_sitemap .bx_sitemap_title{padding-bottom:14px;border-bottom:1px solid #e5e5e5;font-size:24px}.bx_sitemap .bx_sitemap_title a{color:#000;text-decoration:none}.bx_sitemap .bx_sitemap_ul li{padding:0;line-height:14px}.bx_sitemap .bx_sitemap_ul li:before{content:''!important}.bx_sitemap .bx_sitemap_li_title{display:inline-block;margin:0;margin-bottom:10px;padding:0;vertical-align:top;font-weight:normal;line-height:13px}.bx_sitemap .bx_sitemap_li_title a{color:#4c7da6;white-space:nowrap;font-size:13px}.bx_sitemap .bx_sitemap_li_title a:hover{text-decoration:none}.bx_sitemap .bx_sitemap_li_title span{font-size:11px}@media(max-width:639px){.bx-touch .bx_sitemap .bx_catalog_line_title{margin-bottom:5px;line-height:12px}.bx-touch .bx_sitemap .bx_catalog_line_title a{font-size:12px}}.bx_sitemap .bx_catalog_line_title,.bx_sitemap .bx_catalog_line_title a{transition:all .3s ease} /* End */ /* /local/templates/yarkima/css/swiper-bundle.min.css?172744001118459 */ /* /local/templates/yarkima/css/style.css?1730896254336352 */ /* /local/templates/yarkima/css/add.css?175182798730512 */ /* /local/templates/yarkima/css/jquery.fancybox.css?172962862917412 */ /* /local/templates/yarkima/components/bitrix/catalog.section.list/template/style.min.css?17274400346236 */