/** * Swiper 6.8.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: August 3, 2021 */ @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') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top: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:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.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-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;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:8px;height:8px;display:inline-block;border-radius:50%;background:#000;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:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background: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-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);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}.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%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-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-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} /*** RESET STYLES (NORMALIZE) ***/ .eager-loaded { position: relative; display: block; } .lazy-parent { position: relative; display: block; } .lazy { opacity: 0; transition: opacity 0.3s ease; } .lazy.loaded { opacity: 1; } .lazy-parent:before { content: ""; position: absolute; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 125px; height: 100px; z-index: 1; opacity: 1; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("../img/lazy-holder.svg"); transition: opacity 0.3s ease; } .lazy-parent.white:before { background-image: url("../img/lazy-holder-white.svg"); } .lazy-parent.small:before { width: 20px; height: 15px; } .lazy-parent.loaded:before { opacity: 0 !important; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } body.no-scroll { overflow: hidden; pointer-events: none; height: 100%; } body.hidden { overflow: hidden; } /* NEW 404 page START*/ .not-found { padding: 100px 0; } .not-found__holder { display: flex; align-items: center; } .not-found__img { position: relative; padding-bottom: 54%; flex-shrink: 1; flex-grow: 1; } .not-found__img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .not-found__info { padding-left: 60px; max-width: 610px; width: 100%; flex-shrink: 0; flex-grow: 0; } .not-found__info .expert__subtitle { justify-content: flex-start; } .not-found__title { color: #ffa51e; font-weight: 700; font-size: 76px; line-height: 1.2; } .not-found__subtitle { color: #0dcb5b; font-weight: 700; font-size: 46px; line-height: 1.2; margin-bottom: 20px; } .not-found__txt { font-weight: 700; font-size: 22px; line-height: 48px; margin-bottom: 20px; } .not-found__box { display: flex; align-items: center; justify-content: space-between; } .not-found__back { display: flex; align-items: center; font-weight: 500; font-size: 15px; line-height: 18px; color: #767676; } .not-found__back span { display: inline-flex; background-color: rgba(176, 176, 176, 0.4); width: 20px; height: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-right: 12px; flex-shrink: 0; flex-grow: 0; transition: all 0.3s ease-in-out; } .not-found__back span:before { transition: all 0.3s ease-in-out; content: ""; width: 100%; height: 100%; background-size: 10px 10px; background-repeat: no-repeat; background-position: center; background-image: url(../img/icons/arrow-link.svg); transform: rotateY(180deg); filter: invert(52%) sepia(12%) saturate(393%) hue-rotate(190deg) brightness(91%) contrast(84%); } .not-found .btn-premium { font-size: 18px; height: 60px; padding: 8px 70px; } /* NEW 404 page END*/ /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div, input, textarea, select, button { display: block; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } [role="button"], input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-box-sizing: content-box; box-sizing: content-box; } /* Reset `button` and button-style `input` default styles */ input[type="submit"], input[type="reset"], input[type="button"], button { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; /* for input */ -webkit-user-select: none; /* for button */ -moz-user-select: none; -ms-user-select: none; } .loupe-widget { position: relative; display: inline-block; will-change: transform; } .loupe-widget__loupe { position: absolute; z-index: 100; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; background-repeat: no-repeat; border: 2px solid #222; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2); background-color: white; display: none; } .section-not-found { min-height: 300px; height: calc(100vh - 360px); padding: 50px 0; } .section-not-found .flex { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100%; } .section-not-found .container { height: 100%; } .section-not-found .title { font-size: 120px; line-height: 100px; font-weight: 700; margin-bottom: 10px; } .section-not-found p { font-size: 26px; text-transform: uppercase; } button, input[type="submit"] { padding: 0; margin: 0; border: none; cursor: pointer; } a { text-decoration: none; color: #1b1d25; transition: all 0.2s ease-in-out; } html { position: relative; min-height: 100%; } body { /*font: 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/ font: 14px/1.2 Roboto, sans-serif; font-weight: 400; background: #fff; color: #1b1d25; min-width: 320px; position: relative; } html, body { height: 100% !important; } img { display: block; max-width: 100%; } .wrapper { width: 100%; height: 100%; display: table; table-layout: fixed; overflow: hidden; } .wrapper.no-hidden { overflow: visible; } .wrapper.no-hidden .articles { overflow: hidden; } .container { max-width: 1340px; margin: 0 auto; padding: 0 30px; } .svg-icon { width: 1em; height: 1em; display: block; fill: currentColor; } .icon_holder { display: inline-block; vertical-align: middle; } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } input[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .btn, input[type="submit"] { 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; padding: 8px 28px; border: 2px solid #f6f6f6; color: #06151d; border-radius: 10px; -webkit-transition: 0.3s; transition: 0.3s; outline: none; font-size: 13px; font-weight: 400; line-height: 40px; text-transform: uppercase; } .btn-login { color: #09d166; border-color: transparent; margin-right: 5px; } .btn-big { width: 300px; font-size: 30px; padding: 20px 30px; } .btn-green { color: #fff; background-color: #09d166; border-color: transparent; -webkit-transition: 0.3s; transition: 0.3s; } .btn-shaded { background-color: #fff; border-color: transparent; -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s; transition: color 0.3s, border-color 0.3s, background-color 0.3s; } .btn.green-border { border-color: #0dd166; font-size: 14px; line-height: 19px; padding: 8px 16px; flex-shrink: 0; } .table-wrap { width: 100%; overflow-y: auto; } .table-wrap table { min-width: 1000px; } .table-wrap table .img-wrap { display: flex; justify-content: center; width: 100%; } .product-compare-wrap table .img-wrap .inner { padding-bottom: 100%; position: relative; width: 100%; } .product-compare-wrap table .img-wrap .inner:before { background-image: url(../img/icons/all-supplement.svg); width: 73px; height: 100px; } .table-wrap table .img-wrap img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; transition: transform 0.3s; } .table-wrap .rate-action { margin-left: 10px; display: inline-block; position: relative; padding-left: 13px; } .table-wrap .rate-action:before { content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-size: contain; background-position: center; background-repeat: no-repeat; height: 13px; width: 14px; } .table-wrap .rate-action.up { color: #00f341; } .table-wrap .rate-action.down { color: #f30000; } .table-wrap .rate-action.down:before { background: url(../img/icons/down-arrow.svg); } .table-wrap .rate-action.up:before { background: url(../img/icons/up-arrow.svg); } /*styles for prices arrows*/ .table-wrap .price-action { margin-left: 10px; display: inline-block; position: relative; padding-left: 13px; } .table-wrap .price-action:before { content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-size: contain; background-position: center; background-repeat: no-repeat; height: 13px; width: 14px; } .table-wrap .price-action.up { color: #f30000; } .table-wrap .price-action.down { color: #00f341; } .table-wrap .price-action.down:before { background: url(../img/icons/down-arrow-price.svg); } .table-wrap .price-action.up:before { background: url(../img/icons/up-arrow-price.svg); } /*styles for prices arrows*/ .tags-list__img span { font-size: 17px; } .products-list__img img { max-width: 200px; border-radius: 6px; } .btn-dn { display: none !important; } .error_email { border-color: red !important; } .msg_subscribe { color: white; font-size: 20px; } .headline__title .sup-wrap { display: flex; align-items: center; margin-bottom: 65px; } .list-item_dn { display: none; } .breadcrumbs-list__link.active { margin-right: 4px; font-size: 12px; color: #949494; text-transform: uppercase; } .product-block .icon_brand { width: 45px; height: 30px; } .input, .textarea { width: 100%; height: 100%; outline: none; color: #767676; font-size: 15px; font-weight: 300; padding: 0 10px 0 20px; height: 60px; border: 1px solid transparent; border-radius: 10px; background-color: #fff; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .input:focus, .textarea:focus { border-color: #00d66a; } .input_error { color: #fff; border: 1px solid #d94646; background-color: #fac5c5; } .input_error:focus { border-color: #d94646; } .textarea { resize: vertical; overflow: hidden; } input, textarea, select, button { font-weight: 300; } /*header style*/ .header { z-index: 10000; padding: 23px 30px; 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; position: relative; margin: 0 auto; pointer-events: all; } .header .mobile-search { display: none; } .header #category-wrap { display: none; } .header .btn-search { display: none; } .logo { display: block; max-width: 220px; } .header .logo { margin-right: 20px; } .header .logo img { max-height: 100%; } .menu, .header-actions { display: -webkit-box; display: -ms-flexbox; display: flex; } .header .menu { will-change: transform; } .header .menu .menu__ico.icon-svg_home, .header .menu .menu__ico.icon-svg_health-topics, .header .menu .menu__ico.icon-svg_all-brands, .header .menu .menu__ico.icon-svg_all-supplement { height: 26px; width: 26px; margin-right: 5px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; } .header .menu .menu__ico.icon-svg_home { background-image: url("../img/icons/home.svg"); } .header .menu .menu__ico.icon-svg_health-topics { background-image: url("../img/icons/health-topics.svg"); } .header .menu .menu__ico.icon-svg_all-brands { background-image: url("../img/icons/all-brands.svg"); } .header .menu .menu__ico.icon-svg_all-supplement { background-image: url("../img/icons/all-supplement.svg"); } .menu__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-weight: 600; padding: 13px 10px 10px; outline: none; text-transform: capitalize; position: relative; } .menu__item:not(:first-child) { margin-left: 30px; } .menu__item:after, .menu__item:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transform-origin: center left; transform-origin: center left; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); } .menu__item:before { background: #09d166; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .menu__item-active { font-weight: 700; } .menu__item-active:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } .menu__ico { margin-right: 10px; width: 26px; height: 26px; display: block; } .menu__ico span { font-size: 24px; color: #292b35; } .menu__title { display: block; font-size: 13px; text-transform: uppercase; margin-top: 7px; } .socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .socials__link { 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; width: 32px; height: 32px; border-radius: 16px; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; } .socials__link span { font-size: 14px; } .socials__link_twitter span { font-size: 16px; } .user-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; margin-left: 40px; padding-left: 22px; } .user-actions:before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 32px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #c8c8c8; } .user-actions .btn { line-height: 20px; } .burger-menu { position: relative; width: 35px; height: 30px; padding: 0; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-shadow: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; display: none; } .burger-menu span { display: block; position: absolute; top: 50%; left: 5px; right: 5px; transform: translateY(-50%); height: 3px; margin-top: 1px; background: #26d361; } .burger-menu span::before, .burger-menu span::after { position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #22c45d; content: ""; } .burger-menu span::before { top: -9px; } .burger-menu span::after { bottom: -9px; } .burger-menu span, .burger-menu span::before, .burger-menu span::after { -webkit-transition: background 0.3s; transition: background 0.3s; will-change: transform; } .burger-menu span::before { -webkit-transition-property: top, -webkit-transform, background; -webkit-transition-property: top, background, -webkit-transform; transition-property: top, background, -webkit-transform; transition-property: top, transform, background; transition-property: top, transform, background, -webkit-transform; } .burger-menu span::after { -webkit-transition-property: bottom, -webkit-transform, background; -webkit-transition-property: bottom, background, -webkit-transform; transition-property: bottom, background, -webkit-transform; transition-property: bottom, transform, background; transition-property: bottom, transform, background, -webkit-transform; } .burger-menu.active span::before, .burger-menu.active span::after { background: #22c45d; } .burger-menu.active span { background: none; } .burger-menu.active span::before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .burger-menu.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .footer { display: table-row; height: 1px; background-color: #fff; position: relative; } .footer:before { content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); height: 2px; width: 100%; max-width: 1280px; top: 0; background: #f9f9f9; } .footer .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } .footer .block { padding: 50px 10px; } .footer-sub { } .footer .logo { /* padding-top: 35px; */ margin-bottom: 10px; } .footer-logo-mobile { display: none; } .copyright { font-size: 11px; text-transform: uppercase; } .footer-box__title { padding: 0 10px; font-size: 13px; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; } .footer-box .menu { 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: start; -ms-flex-align: start; align-items: flex-start; } .footer-box .menu__item, .footer__item { font-size: 13px; font-weight: 400; padding: 13px 10px 5px; margin: 0 !important; } .footer-box .socials { margin-top: 10px; } .footer-box_menu, .footer-box_tools { margin: 0; } .footer-box_menu .menu__title { margin-top: 0; } /* Footer Socials */ .footer-socials { margin-top: 20px; } .footer-socials__title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #292b35; text-transform: uppercase; } .footer-socials__links { display: flex; align-items: center; gap: 12px; } .footer-socials__link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f5f5f5; color: #5a5a5a; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .footer-socials__link:hover { background: #09d166; color: #fff; box-shadow: 0 6px 16px rgba(9, 209, 102, 0.3); } .footer-socials__link:active { box-shadow: 0 3px 8px rgba(9, 209, 102, 0.25); } .footer-socials__link svg { width: 20px; height: 20px; transition: transform 0.3s ease; } .footer-socials__link:hover svg { transform: scale(1.15); } /* AI Assistant Fixed Button */ .ai-assistant-btn { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; /* background: linear-gradient(135deg, #0be070 0%, #09d166 50%, #07b858 100%); */ background-size: 200% 200%; color: #fff; text-decoration: none; border-radius: 12px 0 0 12px; /* box-shadow: -4px 0 20px rgba(9, 209, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); */ box-shadow: 1px 2px 27px rgba(0, 0, 0, 0.25) !important; /* animation: aiGlow 3s ease-in-out infinite, aiGradient 4s ease infinite; */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background-image: linear-gradient( to right, #119c51 0%, #06b868 54%, #09d166 100% ); } .ai-assistant-btn::before { content: ""; position: absolute; top: -50%; left: -100%; width: 60%; height: 200%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transform: skewX(-20deg); animation: aiShimmer 3s ease-in-out infinite; } .ai-assistant-btn:hover { padding-right: 20px; box-shadow: -8px 0 40px rgba(9, 209, 102, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); animation: aiGlow 1.5s ease-in-out infinite, aiGradient 2s ease infinite; } .ai-assistant-btn:hover::before { animation: aiShimmer 1.5s ease-in-out infinite; } .ai-assistant-btn__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .ai-assistant-btn__title { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); animation: aiTextPulse 2s ease-in-out infinite; } .ai-assistant-btn__subtitle { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; opacity: 0.9; } .ai-assistant-btn__pulse { /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: transparent; border: 2px solid #09d166; border-right: none; border-radius: 12px 0 0 12px; */ /* animation: aiPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; */ } /* .ai-assistant-btn__pulse--delay { animation-delay: 1.25s; } */ @keyframes aiPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { opacity: 0.4; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } @keyframes aiGlow { 0%, 100% { box-shadow: -4px 0 20px rgba(9, 209, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: -6px 0 35px rgba(9, 209, 102, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); } } @keyframes aiGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes aiShimmer { 0% { left: -100%; } 50%, 100% { left: 150%; } } @keyframes aiTextPulse { 0%, 100% { transform: scale(1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } 50% { transform: scale(1.08); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } } @media (max-width: 767px) { .ai-assistant-btn { padding: 12px 10px; border-radius: 10px 0 0 10px; } .ai-assistant-btn__title { font-size: 18px; } .ai-assistant-btn__subtitle { font-size: 8px; } /* .ai-assistant-btn__pulse { border-radius: 10px 0 0 10px; } */ } .headline { 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; margin-bottom: 40px; } .headline.f-start { align-items: flex-start; } .headline .headline-btn .icon-arrow { display: block; width: 10px; height: 10px; margin-left: 8px; transform: rotate(45deg); transition: all 0.3s; border: 2px solid #0dd166; border-width: 2px 2px 0 0; } .headline-wrap { flex-direction: column; justify-content: flex-start; align-items: flex-start; } .headline-wrap .subheadline { font-size: 18px; margin-right: 10px; font-weight: 300; } .headline__title { font-size: 28px; margin-right: 10px; font-weight: 300; /* text-transform: uppercase; */ color: #000; } .search-page .headline__title { font-size: 20px; } .headline__title--flex { display: inline-flex; align-items: center; } .product-compare-wrap .headline__title { align-items: flex-start; } .headline__title_bold { font-weight: 700; display: inline; } .product-vitamin .headline__title_bold { display: inline-flex; align-items: center; } .headline__title_bold.block { display: block; } .headline__actions { width: 25%; 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; } .headline__actions .input-box { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .headline__actions .input { height: 40px; background-color: #f6f6f6; } .headline__actions .input-box .input { padding: 0 20px 0 50px; height: 40px; } .featured-section { padding: 100px 0; } .featured-section .headline { align-items: center; } .featured-section .headline { margin-bottom: 45px; } .featured-section .headline__title { margin: 0; } .input-box__btn { position: absolute; top: 0; right: 0; height: 100%; } .filter-box { 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; width: 40px; height: 40px; border-radius: 10px; margin-left: 20px; background-color: #f6f6f6; } .filter-box__btn { width: 100%; height: 100%; outline: none; } .filter-box__btn span { font-size: 20px; color: #1f212b; margin: 0 auto; -webkit-transition: color 0.3s; transition: color 0.3s; } .top-search { padding: 50px 0 0; will-change: transform; z-index: 13; position: relative; background: #11a155; } .top-search .bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .top-search .bg { background-size: cover; width: calc(100% + 40px); height: calc(100% + 40px); position: absolute; left: -20px; top: -20px; will-change: transform; animation: bgBreathe 8s ease-in-out infinite; } @keyframes bgBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .top-search .headline { padding: 0 10px; position: relative; z-index: 1; } .top-search .headline__title { margin: 0; color: #fff; text-align: center; font-weight: 500; margin: 0 auto; max-width: 1200px; } /* Type Effect */ .type-effect { display: inline; white-space: nowrap; } .type-effect::after { content: "|"; display: inline-block; margin-left: 2px; animation: typeEffectCursor 0.7s step-end infinite; } .type-effect.type-effect--done::after { opacity: 0 !important; visibility: hidden; } @keyframes typeEffectCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .input-box { position: relative; } .top-search .input-box { width: 653px; -webkit-box-shadow: 1px 2px 27px rgba(0, 0, 0, 0.4); box-shadow: 1px 2px 27px rgba(0, 0, 0, 0.4); border-radius: 14px; border: 2px solid #fff; margin: 0 auto; position: relative; z-index: 3; -webkit-transition: box-shadow 0.4s ease; transition: box-shadow 0.4s ease; } .top-search .input-box::before { content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 15px; padding: 3px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; pointer-events: none; } .top-search .input-box:hover::before, .top-search .input-box:focus-within::before { opacity: 1; -webkit-animation: rotate-btn-border 2s linear infinite; animation: rotate-btn-border 2s linear infinite; } .top-search .input-box:focus-within { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7); } .top-search .input-box .input { border: none; border-radius: 12px; } .top-search .input-box .input:focus { border: none; } .top-search .input-box .input-box__ico { width: 20px; height: 20px; filter: brightness(0); } /* Search icon animation */ .top-search .input-box .input-box__ico img { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; object-fit: contain; transition: opacity 0.3s ease, transform 0.3s ease; } .top-search .input-box .input-box__ico .ico-search { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } .top-search .input-box .input-box__ico .ico-arrow { transform: translate(-50%, -50%) scale(0.5) rotate(-90deg); opacity: 0; } .top-search .input-box:focus-within .input-box__ico .ico-search { transform: translate(-50%, -50%) scale(0.5) rotate(90deg); opacity: 0; } .top-search .input-box:focus-within .input-box__ico .ico-arrow { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } /* ========== Option 2: CSS Morphing Icon (Search → Arrow) ========== */ .ico-morph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; } /* Circle/Lens - will morph into arrow shaft */ .ico-morph__lens { position: absolute; width: 11px; height: 11px; border: 2px solid #333; border-radius: 50%; top: 1px; left: 1px; background: transparent; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Handle of magnifying glass */ .ico-morph__handle { position: absolute; width: 7px; height: 2px; background: #333; transform: rotate(45deg); bottom: 2px; right: 0; border-radius: 1px; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Arrow head parts (hidden initially) */ .ico-morph__lens::before, .ico-morph__lens::after { content: ""; position: absolute; width: 7px; height: 2px; background: #333; right: -2px; border-radius: 1px; opacity: 0; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .ico-morph__lens::before { top: 50%; transform: rotate(45deg); transform-origin: right center; } .ico-morph__lens::after { top: 50%; transform: rotate(-45deg); transform-origin: right center; } /* ===== FOCUS STATE - Morph to Arrow ===== */ /* Lens becomes arrow shaft */ .top-search .input-box:focus-within .ico-morph__lens { width: 14px; height: 2px; border-radius: 1px; border-color: transparent; background: #333; top: 9px; left: 2px; } /* Handle fades out */ .top-search .input-box:focus-within .ico-morph__handle { opacity: 0; transform: rotate(45deg) scale(0); right: 3px; bottom: 5px; } /* Arrowhead appears */ .top-search .input-box:focus-within .ico-morph__lens::before, .top-search .input-box:focus-within .ico-morph__lens::after { opacity: 1; } .top-search .input-box:focus-within .ico-morph__lens::before { top: -2px; right: -1px; } .top-search .input-box:focus-within .ico-morph__lens::after { top: auto; bottom: -2px; right: -1px; } /* ========== End Morphing Icon ========== */ /* AI Consult Hint */ .ai-consult-hint { text-align: center; margin-top: 15px; position: relative; z-index: 2; } .ai-consult-hint__text { color: rgba(255, 255, 255, 0.85); font-size: 16px; font-weight: 400; } .ai-consult-hint__link { font-size: 16px; font-weight: 700; text-decoration: none; position: relative; padding-bottom: 2px; background: linear-gradient( 90deg, #fff 0%, #fff 67%, #0be070 75%, #fff 83%, #fff 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: waveColor 4s linear infinite; animation: waveColor 4s linear infinite 3s; } @-webkit-keyframes waveColor { 0% { background-position: 200% center; } 100% { background-position: 0% center; } } @keyframes waveColor { 0% { background-position: 200% center; } 100% { background-position: 0% center; } } .ai-consult-hint__link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #0be070, #09d166); -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } .ai-consult-hint__link:hover { -webkit-animation-play-state: paused; animation-play-state: paused; background: #0be070; -webkit-background-clip: text; background-clip: text; } .ai-consult-hint__link:hover::after { width: 100%; } /* End AI Consult Hint */ .block-form { max-width: 500px; margin-bottom: 50px; } .block-form .alert { font-size: 14px; display: block; margin-bottom: 10px; } .block-form .alert.alert-success { color: #00cf42; } .block-form .alert.alert-danger { color: red; } .block-form .g-recaptcha { margin-bottom: 10px; } .form .label { font-size: 14px; display: block; color: #2b2727; margin-bottom: 6px; } .form .input { margin-bottom: 12px; position: relative; z-index: 1; padding: 0; height: auto; } .form .btn { line-height: normal; } .form .input input, .input textarea { padding: 12px 15px; width: 100%; border: none; text-align: left; background: #fff; border: 1px solid #15c458; border-radius: 15px; color: #575757; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: 0em; box-shadow: none; } .form .input input::-webkit-input-placeholder, .input textarea::-webkit-input-placeholder { color: #7b7b7b !important; } .form .input input::-moz-placeholder, .input textarea::-moz-placeholder { color: #7b7b7b !important; } .form .input input:-ms-input-placeholder, .input textarea:-ms-input-placeholder { color: #7b7b7b !important; } .form .input input:-moz-placeholder, .input textarea:-moz-placeholder { color: #7b7b7b !important; } .form .input input { height: 36px; } .form .input textarea { min-height: 65px; max-height: 280px; resize: vertical; padding: 12px 15px; } .input-box .input { height: 55px; padding: 0 55px 0 60px; overflow: hidden; text-overflow: ellipsis; } .input-box__ico { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .input-box__ico { left: 20px; } .input-box__ico span { font-size: 20px; color: #1f212b; } /*.input-box__btn {*/ /*position: absolute;*/ /*top: 0;*/ /*right: 0;*/ /*height: 100%;*/ /*}*/ .input-box__loader { width: 24px; height: 24px; border-radius: 50%; background: #09d166; background: -moz-linear-gradient( left, #09d166 10%, rgba(255, 255, 255, 0) 42% ); background: -webkit-linear-gradient( left, #09d166 10%, rgba(255, 255, 255, 0) 42% ); background: -o-linear-gradient( left, #09d166 10%, rgba(255, 255, 255, 0) 42% ); background: -ms-linear-gradient( left, #09d166 10%, rgba(255, 255, 255, 0) 42% ); background: linear-gradient( to right, #09d166 10%, rgba(255, 255, 255, 0) 42% ); position: absolute; top: calc(50% - 12px); right: 15px; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .input-box__loader:before { width: 50%; height: 50%; background: #09d166; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ""; } .input-box__loader:after { background: #fff; width: 76%; height: 76%; border-radius: 50%; content: ""; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .input-box__btn .btn_subscribe { 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: 100%; font-size: 13px; outline: none; text-transform: uppercase; color: #fff; background-color: #09d166; padding: 0 34px; border-radius: 0 10px 10px 0; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .input-box form { position: relative; } .input-box__result { position: absolute; top: 61px; left: 0; width: 100%; background-color: #fff; border-radius: 5px; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4); } .input-box__result h6 { margin: 0 14px; font-size: 12px; letter-spacing: 0.45px; text-transform: uppercase; font-weight: 700; color: #1a1a1a; line-height: 36px; border-bottom: 1px solid #e5e5e5; } .input-box__result a { font-size: 12px; color: #1a1a1a; display: flex; align-items: center; padding: 5px 14px; } .input-box__result .img-wrap { position: relative; width: 30px; height: 30px; display: block; margin-right: 5px; } .input-box__result .img-wrap.collect-item { position: relative; height: 30px; width: 30px; background: #1dd166; border-radius: 100%; transition: all 0.2s ease-in-out; border: 1px solid transparent; } .input-box__result .img-wrap.collect-item .result-img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: calc(100% - 10px); max-height: calc(100% - 10px); transform: initial; } .input-box__result .result-img { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); max-width: 100%; max-height: 100%; } .filters { padding: 50px 0 25px; position: relative; z-index: 1; } .tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; } .tags__item { font-size: 13px; text-transform: uppercase; color: #fff; border-radius: 10px; border: 2px solid #fff; padding: 13px 20px; margin: 0 0 5px 1.2%; -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s, -webkit-box-shadow 0.3s; transition: color 0.3s, background-color 0.3s, border-color 0.3s, -webkit-box-shadow 0.3s; transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s; transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; } .tags__selection { width: calc(20% - 20px); margin: 0 10px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; border-radius: 10px; transition: all 0.2s ease-in-out; } .mobile-btn { display: none; } .tags__selection:nth-child(5n) .mini-drop { left: inherit; right: 0; } .tags__selection_wrap { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 13px 15px; background-color: #fff; border-radius: 10px; transition: all 0.2s ease, transform 0.2s ease; } .tags__selection_wrap.open { background-color: #1dd166; } .tags__selection_wrap.open .tags__title { color: #fff; } .tags__selection_wrap.open .tags__ico { transform: rotate(180deg); border-color: #fff; /* background: #fff; */ } /* .tags__selection_wrap.open .tags__ico:before { filter: brightness(1) invert(0); } */ .tags__selection_wrap .icon-prev { position: relative; height: 30px; width: 30px; background: #1dd166; border-radius: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; } .tags__selection_wrap .icon-prev::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: rgba(255, 255, 255, 0.4); opacity: 0; -webkit-transition: opacity 0.3s ease, transform 0.4s ease; transition: opacity 0.3s ease, transform 0.4s ease; pointer-events: none; transform: rotate(0deg); } .tags__selection_wrap:hover .icon-prev::after { opacity: 1; animation: spin-border 1.2s linear infinite; } @keyframes spin-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .tags__selection_wrap.open .icon-prev { border: 1px solid #fff; } .tags__selection_wrap .icon-prev img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: calc(100% - 10px); max-height: calc(100% - 10px); } .tags__title { font-size: 13px; text-transform: uppercase; overflow: hidden; max-height: 30px; margin-right: 5px; width: calc(100% - 60px); padding-left: 9px; text-align: left; color: #324038; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tags__ico { position: relative; width: 20px; height: 20px; border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0; border: 1px solid #09d166; background-color: #09d166; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tags__ico:before { content: ""; width: 10px; height: 5px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("../img/icons/arrow-slider.svg"); filter: brightness(0) invert(1); } /* ======================================== Reusable Hover Fill Effect Usage: Add class "hover-fill-effect" to any element CSS Variables for customization: --hover-fill-color: gradient or color (default: green gradient) --hover-fill-shadow: box-shadow on hover (default: green glow) --hover-fill-scale: transform scale on hover (default: 1.01) --hover-fill-initial-width: starting width % (default: 92%) --hover-fill-initial-height: starting height % (default: 70%) ======================================== */ @media (min-width: 1025px) { .hover-fill-effect { position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .hover-fill-effect::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--hover-fill-initial-width, 92%); height: var(--hover-fill-initial-height, 70%); background: var( --hover-fill-color, linear-gradient(135deg, #0be070 0%, #09d166 100%) ); border-radius: 10px; opacity: 0; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; z-index: 0; pointer-events: none; } .hover-fill-effect:hover::before { width: 100%; height: 100%; opacity: 1; border-radius: inherit; } .hover-fill-effect:hover { box-shadow: var( --hover-fill-shadow, 0 6px 20px rgba(9, 209, 102, 0.25) ); transform: scale(var(--hover-fill-scale, 1.01)); } .hover-fill-effect > * { position: relative; z-index: 1; } /* Make text white on hover (optional - add .hover-fill-effect--light-text) */ .hover-fill-effect.hover-fill-effect--light-text:hover { color: #fff; } } /* Tags Selection - applies hover-fill-effect */ @media (min-width: 1025px) { .tags__selection_wrap:hover .icon-prev { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .tags__selection_wrap:hover .icon-prev img { filter: brightness(1) invert(0); } .tags__selection_wrap:hover .tags__title { color: #fff; } .tags__selection_wrap:hover .tags__ico { border-color: #fff; } /* Dropdown items hover */ .tags-list__item { position: relative; overflow: hidden; } .tags-list__item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(9, 209, 102, 0.12) 0%, rgba(9, 209, 102, 0.03) 100% ); transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 0; } .tags-list__item:hover::after { transform: scaleX(1); } .tags-list__item > * { position: relative; z-index: 1; } .tags-list__item:hover .tags-list__main { transform: none; } .tags-list__main { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tags-list__item:hover .tags-list__img { border-color: #09d166; } .tags-list__item:hover .tags-list__title { color: #09d166; } .tags-list__img { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .tags-list__title { transition: color 0.25s ease; } .tags-list__item:hover .tags-list__bage { transform: scale(1.1); } .tags-list__bage { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } } .tags-list { max-height: 370px; overflow-y: auto; scrollbar-color: #cbcbcb transparent; scrollbar-width: thin; } .tags-list::-webkit-scrollbar { width: 6px; } .tags-list::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .tags-list::-webkit-scrollbar-thumb { background-color: #cbcbcb; border-radius: 3px; } .tags-list__item { 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: 10px 20px 10px 15px; position: relative; -webkit-transition: border-color 0.3s, background-color 0.3s; transition: border-color 0.3s, background-color 0.3s; } .tags-list__item:before { content: ""; display: block; position: absolute; left: 50%; bottom: 0; height: 1px; background: #e5e5e5; transform: translateX(-50%); width: calc(100% - 30px); } .tags-list__img { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; margin-right: 10px; -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); background: #14e87c; display: flex; justify-content: center; align-items: center; position: relative; flex-shrink: 0; } .tags-list__img::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #09d166; border-right-color: rgba(9, 209, 102, 0.4); opacity: 0; -webkit-transition: opacity 0.3s ease, transform 0.4s ease; transition: opacity 0.3s ease, transform 0.4s ease; pointer-events: none; transform: rotate(0deg); } .tags-list__item:hover .tags-list__img::after { opacity: 1; animation: spin-border 1.2s linear infinite; } .mini-drop .icon_collection { margin-right: 0; } .tags-list__img > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: calc(100% - 8px); height: calc(100% - 8px); margin: 4px; } .tags-list__title { max-width: 140px; color: #292b35; font-size: 13px; -webkit-transition: color 0.25s ease; transition: color 0.25s ease; } .tags-list__main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tags-list__bage { 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: 20px; padding: 3px 5px; margin: 0 5px 0 10px; border-radius: 10px; font-size: 10px; text-transform: uppercase; color: #fff; background-color: #09d166; -webkit-transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tags-list__bage.tags-list__count { color: #292b35; border: 1px solid rgba(0, 0, 0, 0.2); background-color: transparent; } .tags-list__ico { 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; width: 30px; color: #c1bdbd; font-size: 20px; font-weight: 700; text-transform: uppercase; margin-right: 15px; } .mini-drop { width: 100%; position: absolute; top: 100%; margin-top: 5px; left: 0; right: 0; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #fff; z-index: 200; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transform: translateY(-12px) scale(0.96); transform: translateY(-12px) scale(0.96); -webkit-transform-origin: top center; transform-origin: top center; -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.25s cubic-bezier(0.4, 0, 1, 1), visibility 0.25s, box-shadow 0.2s ease; transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1), transform 0.25s cubic-bezier(0.4, 0, 1, 1), visibility 0.25s, box-shadow 0.2s ease; pointer-events: none; } .tags__selection_wrap.open + .mini-drop { opacity: 1; visibility: visible; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); pointer-events: all; -webkit-transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s, box-shadow 0.3s ease; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s, box-shadow 0.3s ease; } .mini-drop .tags-list li { -webkit-transition: opacity 0.15s ease, transform 0.15s ease; transition: opacity 0.15s ease, transform 0.15s ease; } .tags__selection_wrap.open + .mini-drop .tags-list li { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation: miniDropItemIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation: miniDropItemIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(1) { animation-delay: 0.04s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(2) { animation-delay: 0.07s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(3) { animation-delay: 0.1s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(4) { animation-delay: 0.13s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(5) { animation-delay: 0.16s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(6) { animation-delay: 0.19s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(7) { animation-delay: 0.22s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(8) { animation-delay: 0.25s; } .tags__selection_wrap.open + .mini-drop .tags-list li:nth-child(n + 9) { animation-delay: 0.28s; } @-webkit-keyframes miniDropItemIn { from { opacity: 0; -webkit-transform: translateY(-8px); transform: translateY(-8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes line-wave-center { 0%, 100% { background-size: 0% 100%, 100% 100%; } 50% { background-size: 250% 100%, 100% 100%; } } @keyframes rotate-btn-border { to { --btn-border-angle: 360deg; } } @keyframes spin-ring { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes miniDropItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .mini-drop__list.nano { height: 370px; } .mini-drop__headline { padding: 0 20px; } .mini-drop__headline .input-box { width: auto; } .mini-drop__headline .input { height: 40px; padding: 0 20px 0 44px; background-color: #f6f6f6; } .mini-drop__headline .input-box__ico { left: 13px; } .mini-drop__headline .input-box__ico span { font-size: 16px; } .mini-drop__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.65px; margin-bottom: 30px; } .mini-drop__bottom { margin-top: 20px; } .mini-drop__bottom .btn { margin: 0 auto; padding: 8px 8px; border-radius: 10px; border: 1px solid #292b35; color: #292b35; font-size: 13px; font-weight: 400; line-height: 22px; width: 120px; text-transform: uppercase; } .populars { padding: 50px 0 70px; /*overflow: hidden;*/ } .populars .cont-bg { overflow: hidden; max-width: 100%; max-height: 100%; display: block; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .populars__searched_mob.populars { display: none; } .populars__footer-description { font-size: 16px; margin-bottom: 20px; } .populars__footer-description a { font-weight: 500; } .populars_border { padding: 50px 0 0; } .populars_border .container { /*border-bottom: 1px solid #e5e5e5;*/ padding-bottom: 50px; } .populars_supplements { background: linear-gradient(135deg, #07a34f 0%, #09d166 40%, #068c45 100%); position: relative; z-index: 1; padding-top: 140px; padding-bottom: 140px; margin-bottom: 80px; } .populars_supplements-wave { position: absolute; left: 0; width: 100%; z-index: 2; line-height: 0; pointer-events: none; } .populars_supplements-wave--top { top: -1px; } .populars_supplements-wave--bottom { bottom: -1px; transform: scaleX(-1); } .populars_supplements-wave svg { display: block; width: 100%; height: 55px; } .populars_supplements-deco { position: absolute; top: 0; height: 100%; width: 200px; z-index: 0; pointer-events: none; } .populars_supplements-deco--left { left: 0; } .populars_supplements-deco--right { right: 0; } .populars_supplements-deco svg { width: 100%; height: 100%; } .populars_supplements .container { position: relative; z-index: 1; } @keyframes deco-float-1 { 0% { transform: translate(0, 0); } 25% { transform: translate(15px, -25px); } 50% { transform: translate(-10px, -15px); } 75% { transform: translate(20px, 10px); } 100% { transform: translate(0, 0); } } @keyframes deco-float-2 { 0% { transform: translate(0, 0); } 20% { transform: translate(-20px, 15px); } 40% { transform: translate(10px, 25px); } 60% { transform: translate(-15px, -10px); } 80% { transform: translate(12px, -20px); } 100% { transform: translate(0, 0); } } @keyframes deco-float-3 { 0% { transform: translate(0, 0); } 33% { transform: translate(25px, 15px); } 66% { transform: translate(-12px, -25px); } 100% { transform: translate(0, 0); } } @keyframes deco-float-4 { 0% { transform: translate(0, 0); } 25% { transform: translate(-18px, -12px); } 50% { transform: translate(8px, 22px); } 75% { transform: translate(-25px, 8px); } 100% { transform: translate(0, 0); } } @keyframes deco-float-5 { 0% { transform: translate(0, 0); } 20% { transform: translate(12px, 18px); } 40% { transform: translate(-8px, -15px); } 60% { transform: translate(20px, -8px); } 80% { transform: translate(-15px, 12px); } 100% { transform: translate(0, 0); } } .populars_supplements-deco svg circle:nth-child(1) { -webkit-animation: deco-float-1 8s ease-in-out infinite; animation: deco-float-1 8s ease-in-out infinite; } .populars_supplements-deco svg circle:nth-child(2) { -webkit-animation: deco-float-2 11s ease-in-out infinite; animation: deco-float-2 11s ease-in-out infinite; } .populars_supplements-deco svg circle:nth-child(3) { -webkit-animation: deco-float-3 9s ease-in-out infinite; animation: deco-float-3 9s ease-in-out infinite; } .populars_supplements-deco svg circle:nth-child(4) { -webkit-animation: deco-float-4 7s ease-in-out infinite; animation: deco-float-4 7s ease-in-out infinite; } .populars_supplements-deco svg circle:nth-child(5) { -webkit-animation: deco-float-5 10s ease-in-out infinite; animation: deco-float-5 10s ease-in-out infinite; } .populars_supplements.bg { background-size: cover; background-position: top center; background-repeat: no-repeat; } .populars_supplements.bg:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #167d47; z-index: -1; opacity: 0.85; } .populars_supplements .bg-slider { background-size: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } .populars_supplements .bg { width: 21vw; height: auto; position: absolute; right: 0; bottom: -10px; z-index: -1; overflow: hidden; } .populars_supplements .bg svg { width: 100%; } .magnify { border-radius: 50%; border: 2px solid black; position: absolute; z-index: 20; z-index: 10; background-repeat: no-repeat; background-color: white; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important; display: none; cursor: none; z-index: 10 !important; border: 2px solid #696969; } .gallery-brands { opacity: 0; transition: opacity 0.3s; } .brands-slider.secondary .gallery-brands-items { display: flex; flex-wrap: wrap; margin-left: -5px; width: calc(100% + 10px); } .brands-slider.secondary .gallery-brands-items .product-slider-card { margin: 0 5px 10px; width: calc(20% - 10px); background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s; } .swiper-container-horizontal { opacity: 1; } .populars_supplements .headline { margin-bottom: 25px; } .populars_supplements .headline__title { color: #fff; } .populars__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; } @media (min-width: 1025px) { .populars__health .populars__box { width: 50%; } .populars__health .populars__box:last-child { width: 39%; margin-left: 20px; } } .populars-text { color: #fff; font-size: 16px; font-weight: 300; line-height: 27px; } .populars-text strong { font-weight: 700; } .populars-text__row { margin-bottom: 30px; } .populars-text__row:last-child { margin: 60px 0 0; } .populars-text__row a { color: #09f978; } .populars-text__supplements .populars-text__row:last-child { margin: 0; } .populars-text__collections a { color: #06592c; } .show-more-block { margin-bottom: 30px; margin-top: 10px; } .popular-list__item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 1; -webkit-box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 10px 40px 10px 15px; margin-bottom: 10px; background-color: #fff; -webkit-transition: -webkit-box-shadow 0.3s, background-color 0.3s; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: box-shadow 0.3s, background-color 0.3s; transition: box-shadow 0.3s, background-color 0.3s, -webkit-box-shadow 0.3s; } .popular-list .popular-list__item { overflow: visible; } .popular-list .popular-list__item::before { content: ""; display: block; width: 12px; height: 12px; position: absolute; right: 19px; top: 50%; pointer-events: none; transform: translateY(-50%) rotate(-90deg); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../img/icons/arrow-up.svg); filter: brightness(0); opacity: 0.4; transition: filter 0.3s, opacity 0.3s; z-index: 3; } .popular-list .popular-list__item::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; height: 70%; background: linear-gradient(135deg, #0be070 0%, #09d166 100%); border-radius: 6px; opacity: 0; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease; z-index: 0; pointer-events: none; } .popular-list .popular-list__item .popular-list__box { position: relative; z-index: 2; } .popular-list .popular-list__item .popular-list__box.box-name { z-index: 5; } .popular-list .popular-list__item .popular-list__item-link { z-index: 4; } .popular-list__item .popular-list__item-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .populars-tooltip__item a { font-size: inherit; display: inline-block; color: inherit; padding: 5px 10px; } .populars-tooltip__item:hover { opacity: 0.7; } .populars-tooltip .populars-tooltip__item { padding: 0; transition: opacity 0.3s; } .populars-item.open .populars-tooltip, .popular-list__item.open .populars-tooltip { pointer-events: all; } .populars_supplements .popular-list__item .popular-list__box.icon-prev, .populars .popular-list__item .popular-list__box.icon-prev { width: 30px; height: 30px; background: #18d166; padding: 5px; border-radius: 100%; margin-right: 15px; position: relative; } .populars_supplements .popular-list__item .popular-list__box.icon-prev img, .populars .popular-list__item .popular-list__box.icon-prev img { position: absolute; margin: 5px; top: 0; bottom: 0; right: 0; left: 0; width: calc(100% - 10px); height: calc(100% - 10px); } .populars_supplements .popular-list__item .popular-list__box.box-name, .populars .popular-list__item .popular-list__box.box-name { width: calc(100% - 150px); justify-content: flex-start; } .populars_supplements .popular-list__item .popular-list__box.rate-col, .populars .popular-list__item .popular-list__box.rate-col { width: 100px; margin-left: 5px; } .populars_supplements .popular-list__item .popular-list__title, .populars .popular-list__item .popular-list__title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .populars_supplements .popular-list__item .popular-list__box, .populars .popular-list__item .popular-list__box { margin: 0; } .populat-list-block { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; margin-bottom: 20px; } .populat-list-block .popular-list__item { padding: 8px 10px; margin: 0; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } .populat-list-block .popular-list__item::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 92%; height: 70%; background: linear-gradient(135deg, #0be070 0%, #09d166 100%); border-radius: 6px; opacity: 0; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease; z-index: 0; pointer-events: none; } .populat-list-block .popular-list__item:hover { background-color: transparent; box-shadow: 0 6px 20px rgba(9, 209, 102, 0.25); transform: scale(1.01); } .populat-list-block .popular-list__item:hover::before { width: 100%; height: 100%; opacity: 1; border-radius: inherit; } .populat-list-block .popular-list__item .popular-list__box { position: relative; z-index: 1; width: 100%; justify-content: center; gap: 8px; } .populat-list-block .icon-prev { position: relative; height: 26px; width: 26px; min-width: 26px; background: transparent; border-radius: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; } .populat-list-block .icon-prev::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: rgba(255, 255, 255, 0.4); opacity: 0; transition: opacity 0.3s ease, transform 0.4s ease; pointer-events: none; transform: rotate(0deg); } .populat-list-block .popular-list__item:hover .icon-prev::after { opacity: 1; animation: spin-border 1.2s linear infinite; } .populat-list-block .popular-list__item:hover .icon-prev { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .populat-list-block .icon-prev img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; max-width: 70%; max-height: 70%; } .populat-list-block .popular-list__item:hover .popular-list__title { color: #fff; } .popular-list__item:last-child { margin-bottom: 0; } /*.popular-list__item .populars-item__info.open .populars-tooltip {*/ /*top: 42px;*/ /*left: 25%;*/ /*}*/ /*.popular-list__item.open .populars-tooltip {*/ /*top: 42px;*/ /*left: 25%;*/ /*}*/ .populars__bottom .btn { width: 120px; padding: 5px 10px; line-height: 26px; margin: 0 auto; background-color: #fff; -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s; transition: color 0.3s, background-color 0.3s, border-color 0.3s; } .populars__bottom .btn_show_more { margin: 30px auto 0; border: 1px solid #e5e5e5; } .populars__bottom_dark .btn { background-color: #f6f6f6; } .popular-list__box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; } .popular-list__box:last-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .popular-list__title { color: #292b35; font-size: 15px; font-weight: 700; -webkit-transition: color 0.3s; transition: color 0.3s; } .popular-list__ico { margin-left: 10px; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; position: relative; z-index: 5; } .popular-list__ico span { font-size: 16px; color: #bbb; } .populars-items { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 -2%; } .populars-item { width: 31.33%; 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; */ margin: 0 0 30px 2%; border: 1.5px solid rgba(9, 209, 102, 0.4); -webkit-box-shadow: 0 3px 12px rgba(9, 209, 102, 0.12); box-shadow: 0 3px 12px rgba(9, 209, 102, 0.12); border-radius: 10px; position: relative; opacity: 1; -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @media (min-width: 1025px) { .populars-item:hover { border-color: rgba(9, 209, 102, 0.65); box-shadow: 0 5px 20px rgba(9, 209, 102, 0.2); } } .populars-item__headline { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; padding: 20px 20px 20px 10px; border-radius: 10px 10px 0 0; border-bottom: 1px solid rgba(9, 209, 102, 0.3); background-color: rgba(9, 209, 102, 0.08); -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .populars-item__title { color: #000; font-size: 16px; font-weight: 700; margin-right: 12px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; position: relative; z-index: 2; -webkit-transition: color 0.3s; transition: color 0.3s; width: calc(100% - 112px); max-width: fit-content; cursor: pointer; } @media (min-width: 1025px) { .populars-item__title:hover { color: #09d166; } } .populars-item__info { opacity: 1; cursor: pointer; position: static; } @media (min-width: 1025px) { .populars-item__info .populars-item__info_btn { display: inline-block; transition: transform 0.3s ease !important; } .populars-item__info:hover .populars-item__info_btn { transform: scale(1.3); } } .populars-item__info .populars-item__info_btn { content: ""; display: block; width: 30px; height: 24px; background-repeat: no-repeat; background-position: center; position: relative; z-index: 2; background-size: 16px 16px; transition: transform 0.3s ease; background-image: url(../img/icons/info.svg); filter: brightness(0); opacity: 0.5; -webkit-transition: filter 0.3s ease, opacity 0.3s ease; transition: filter 0.3s ease, opacity 0.3s ease; } .populars-item__ico { z-index: 11; width: 60px; height: 60px; border-radius: 50%; position: absolute; right: 20px; top: 20px; background-color: #ffffff; -webkit-box-shadow: 0 3px 6px 1px rgba(174, 174, 174, 0.5); box-shadow: 0 3px 6px 1px rgba(174, 174, 174, 0.5); background-image: -webkit-gradient( linear, left top, right top, from(#119c51), color-stop(54%, #06b868), to(#09d166) ); background-image: linear-gradient( to right, #119c51 0%, #06b868 54%, #09d166 100% ); -webkit-transition: box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .populars-item__ico::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #09d166; border-right-color: rgba(9, 209, 102, 0.4); opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: none; } .populars-item__ico img { width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .populars-item__ico_border { position: absolute; width: 55px; height: 55px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; -webkit-box-shadow: 0 0 0 5px #fff; box-shadow: 0 0 0 5px #fff; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .populars-item__ico span { font-size: 30px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; } .populars-item__list { /* max-height: 285px; */ flex: 1 0 auto; overflow: hidden; border-bottom: 1px solid rgba(9, 209, 102, 0.3); padding: 40px 20px 20px; } .populars-item__row { align-items: center; -webkit-box-pack: justify; display: flex; position: relative; justify-content: space-between; width: calc(100% + 40px); margin-left: -20px; cursor: pointer; } .populars-item__row > a { position: relative; z-index: 1; border-radius: 3px; -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .populars-item__row > a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: radial-gradient( ellipse at center, #00e5ff 0%, #76ff03 40%, transparent 70% ), linear-gradient(90deg, #09d166, #09d166); background-size: 0% 100%, 100% 100%; background-repeat: no-repeat; background-position: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 2px; -webkit-transition: width 0.35s ease-out; transition: width 0.35s ease-out; z-index: 1; pointer-events: none; -webkit-animation: line-wave-center 1.8s ease-in-out infinite; animation: line-wave-center 1.8s ease-in-out infinite; } .populars-item__row:before { content: ""; display: block; width: 12px; height: 12px; position: absolute; right: 19px; top: 50%; pointer-events: none; transform: translateY(-50%) rotate(-90deg); background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); background-image: url(../img/icons/arrow-up.svg); filter: brightness(0); opacity: 0.4; } .populars-item__row:last-child { margin-bottom: 0; } .populars-item__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; } @property --btn-border-angle { syntax: ""; inherits: false; initial-value: 0deg; } .btn-animated-border, .populars-item__bottom .btn, .product-card__bottom .btn { position: relative; border: 2px solid rgba(9, 209, 102, 0.4); -webkit-transition: background-color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease; } .btn-animated-border::before, .populars-item__bottom .btn::before, .product-card__bottom .btn::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 10px; padding: 2px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; pointer-events: none; } .search-list__item::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; pointer-events: none; } .populars-item__bottom .btn { width: 120px; padding: 5px; line-height: 28px; white-space: nowrap; display: block; text-align: center; } .populars-item__info_btn { outline: none; position: relative; z-index: 2; /*opacity: 0;*/ -webkit-transition: opacity 0.3s, transform 0.3s ease; transition: opacity 0.3s, transform 0.3s ease; } @media (min-width: 1025px) { .populars-item__info_btn img { filter: brightness(0) invert(1); } } .populars-tooltip { display: none; position: absolute; /* top: calc(100% - 1px); */ top: -2px; left: calc(50% - 1px); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: calc(100% + 5px); } /* Home page tooltip — inside .populars-item */ .populars-item .populars-tooltip { top: 0; left: 50%; transform: translateX(-50%); width: calc(100% + 5px); max-width: 480px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0 2px 12px rgba(14, 26, 53, 0.1); box-shadow: 0 2px 12px rgba(14, 26, 53, 0.1); background-color: #fff; z-index: 10; pointer-events: none; flex-direction: column; } .populars_supplements .popular-list .populars-tooltip { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: calc(100% + 5px); max-width: 480px; border-radius: 10px; overflow: hidden; -webkit-box-shadow: 0 2px 12px rgba(14, 26, 53, 0.1); box-shadow: 0 2px 12px rgba(14, 26, 53, 0.1); background-color: #fff; z-index: 10; pointer-events: none; flex-direction: column; } .populars-item.open .populars-tooltip, .popular-list__item.open .populars-tooltip { display: flex; } .populars-tooltip:before { display: none; } .populars-tooltip__arrow { position: absolute; bottom: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 7.5px 9px 7.5px; border-color: transparent transparent #fff transparent; z-index: 1; } .populars-tooltip:after { content: ""; position: absolute; bottom: 100%; left: 0; width: 100%; height: 30px; } /*.populars-item__info.open .populars-tooltip {*/ /*display: block;*/ /*}*/ .popular-list__item.open .populars-tooltip, .populars-item.open .populars-tooltip { display: flex; } .populars-tooltip__close { position: absolute; top: 10px; left: 10px; cursor: pointer; z-index: 10; padding: 10px; width: 30px; height: 30px; border-radius: 100%; overflow: hidden; background: #ffffffe6; transition: color 0.3s; transition: background 0.3s; } .populars-tooltip__close:before, .populars-tooltip__close:after { position: absolute; left: 15px; top: 7.5px; content: " "; height: 14px; width: 1px; background-color: #a7a7a7; transition: background 0.3s; } .populars-tooltip__close:before { transform: rotate(45deg); } .populars-tooltip__close:after { transform: rotate(-45deg); } .populars-tooltip__body { padding: 10px 25px 20px; background-color: #fff; border-radius: 0 0 20px 20px; overflow-y: auto; flex: 1; min-height: 0; } .populars-item__info .populars-tooltip span { display: block; color: #1f212b; } .populars-item__info .populars-tooltip .populars-tooltip__ico { width: 30px; height: 30px; background: #18d166; padding: 5px; border-radius: 100%; margin-right: 15px; position: relative; overflow: hidden; } .populars-item__info .populars-tooltip .populars-tooltip__ico img { position: absolute; margin: 5px; top: 0; bottom: 0; right: 0; left: 0; width: calc(100% - 10px); height: calc(100% - 10px); } .populars-item__info .populars-tooltip .populars-tooltip-wrap { background-color: #09d166; border-radius: 50%; padding: 7px; } .populars-item__info .populars-tooltip .icon_collection { margin-right: 0; } .populars-item__info .populars-tooltip .populars-tooltip__ico span { font-size: 30px; } .populars-tooltip__headline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid #dadee7; } .populars-tooltip__headline:hover span { color: #14d166; } .populars-tooltip__ico { margin-right: 10px; } .populars-tooltip__title { color: #1b1b1b; font-size: 16px; text-transform: uppercase; letter-spacing: 0.4px; transition: color 0.3s; } .populars-tooltip__img { transition: opacity.3s; padding-bottom: 43%; width: 100%; display: inline-block; border-radius: 0; overflow: hidden; } .populars-tooltip__img img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; max-height: 100%; max-width: 100%; width: 100%; } .populars-tooltip__row { line-height: 20px; } .populars-tooltip__row:first-child { margin-bottom: 20px; } .populars-tooltip__main { /* height: 130px; */ overflow: hidden; overflow-y: auto; scrollbar-color: #cbcbcb transparent; scrollbar-width: thin; } .populars-tooltip__main::-webkit-scrollbar { width: 6px; } .populars-tooltip__main::-webkit-scrollbar-track { background-color: transparent; } .populars-tooltip__main::-webkit-scrollbar-thumb { background-color: #cbcbcb; border-radius: 3px; } .populars-tooltip__collections { display: flex; flex-wrap: wrap; } .populars-tooltip__item { padding: 5px 10px; background-color: #18d166; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 10px; } .populars-tooltip__item:not(:last-child) { margin-right: 5px; } .product-block_other { padding: 0 0 70px; } .product-block .headline { margin-bottom: 65px; } .product-block .headline.no-indent { margin-bottom: 0; } .product { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; min-width: 0; } .product > * { min-width: 0; } .product-slider { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .product-slider .gallery-thumbs { width: 120px; } .product-slider .gallery-top { width: calc(100% - 120px); } .product-slider .swiper-slide { display: flex; justify-content: center; } .product-info { } /*.product-slider .swiper-container {*/ /* height: 400px;*/ /*}*/ .swiper-container { height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-repeat: no-repeat; background-position: center; background-size: contain; padding: 10px 0 5px 0; } .gallery-top { width: 360px; } .gallery-top .swiper-slide img { height: 100%; width: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; object-fit: contain; } .gallery-thumbs .swiper-slide { width: 120px; height: 90px !important; border-radius: 10px; padding: 10px; border: 1px solid #f6f6f6; cursor: pointer; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; flex-shrink: 0; flex-grow: 0; min-width: 74px; } .gallery-thumbs .swiper-slide:before { background-image: url(../img/icons/all-supplement.svg); width: 36px; height: 45px; } .gallery-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: contain; } .gallery-thumbs .swiper-slide-thumb-active { border-color: #09d166 !important; } .product-info__top { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; padding-bottom: 30px; justify-content: center; border-bottom: 1px solid #c8c8c8; } .product-info__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; position: relative; padding: 20px 70px 50px; border-left: 1px solid #c7c7c7; } .product-info__achiev .circle-achiev .number { overflow: hidden; width: 86px; height: 86px; background: #0dd166; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 46px; font-weight: 700; border-radius: 100%; position: relative; z-index: 2; } .product-info__achiev .circle-achiev { position: relative; } .product-info__achiev .circle-achiev .number:before { content: ""; background: #17c358; display: block; position: absolute; right: 0; top: 0; width: 50%; height: 100%; z-index: -1; } .product-info__achiev .product-info__title_top { padding: 25px 8px 50px; } .product-info__achiev .circle-achiev:before, .product-info__achiev .circle-achiev:after { content: ""; display: block; width: 28px; height: 36px; position: absolute; bottom: -16px; background-repeat: no-repeat; background-size: cover; background-image: url(../img/icons/rank-flag.svg); } .product-info__achiev .circle-achiev:before { left: 0; transform: rotate(35deg) translateX(-2px); } .product-info__achiev .circle-achiev:after { right: 0; transform: rotate(-35deg) translateX(2px); } .product-info__box { margin-top: 60px; padding: 0; border-left: none; margin-right: 40px; } .product-info__box:last-child { margin-right: 0; } .product-info__title { width: 75%; text-align: center; font-size: 14px; font-weight: 400; margin-bottom: 5px; text-transform: uppercase; } .product-info__value { color: #09d166; font-size: 28px; font-weight: 300; margin-bottom: 10px; text-transform: uppercase; } .product-info__sum { color: #a9aaae; font-size: 14px; } .product-info__title_bg { position: absolute; top: -65px; left: calc(50% - 42px); width: 84px; height: 120px; border-radius: 15px 15px 0 0; } .product-info__title_top { border-radius: 15px 15px 0 0; padding: 25px 5px 45px; font-size: 12px; text-transform: uppercase; text-align: center; color: #ffffff; background-color: #a9aaae; } .product-info__title_bottom { width: 100%; height: 30px; } .product-info .number-achiev { width: 89px; height: 89px; margin: 0 auto; position: relative; } .product-info .number-achiev:before, .product-info .number-achiev:after { content: ""; display: block; width: 24px; height: 30px; position: absolute; bottom: -10px; background-repeat: no-repeat; background-size: cover; background-image: url(../img/icons/rank-flag.svg); } .product-info .number-achiev:before { left: 0; transform: rotate(35deg) translateX(-2px); } .product-info .number-achiev:after { right: 0; transform: rotate(-35deg) translateX(2px); } .product-info .number-achiev .number { overflow: hidden; width: 89px; height: 89px; background: #0dd166; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; margin: 0; font-weight: 700; border-radius: 100%; position: relative; z-index: 2; } .product-info .number-achiev .number:before { content: ""; background: #17c358; display: block; position: absolute; right: 0; top: 0; width: 50%; height: 100%; z-index: -1; } .product-info .circle { border-radius: 50%; background-color: #fff; } .product-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; } .product-buttons .btn { line-height: 22px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; border: 1px solid #e5e5e5; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .product-buttons .btn.active { border-color: #00d66a; } .product-buttons .btn.active .product-buttons__ico { margin-right: 17px; } .product-buttons__ico { position: relative; margin-right: 8px; } .product-buttons__ico > span { font-size: 20px; } .product-buttons__bage { position: absolute; top: -5px; right: -8px; border-radius: 50%; background-color: #fff; } .product-buttons__bage span { font-size: 16px; color: #09d166; } .product-info__rank { margin-bottom: 10px; font-size: 18px; text-align: center; } .product-vitamin .product-info__rank { font-size: 18px; display: flex; flex-wrap: wrap; align-items: center; } .product-info__rank .bold { font-weight: 700; } .product-vitamin .product-info__rank .bold { margin: 0 6px; } .product-block__sellers { margin: 50px 0 20px; } .product-block__sellers .headline { margin-bottom: 15px; justify-content: flex-start; background: #f9f9f9; padding: 15px; border-radius: 10px; /* border: 1px solid #c8c8c8; */ } .product-vitamin .product-block__sellers .headline { background: #f6f5f5; padding: 12px 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .product-block__sellers .headline__title { font-size: 18px; margin: 0; text-align: left; } .product-block__sellers .headline__title span { font-weight: 600; font-size: 22px; } .product-vitamin .product-block__sellers .headline__title { font-size: 14px; font-weight: 400; } .list-platform .item-platform { display: flex; align-items: center; /* border-bottom: 1px solid #c8c8c8; padding-bottom: 15px; */ margin-bottom: 15px; } .unavailable-block { margin-bottom: 20px; border: 1px solid #c8c8c8; border-radius: 10px; padding: 15px; background: #f9f9f9; } .unavailable-block__title { display: flex; gap: 10px; margin-bottom: 10px; } .unavailable-block__title-icon { font-size: 1.25rem; } .unavailable-block__title-text { font-size: 1.25rem; font-weight: 500; } .unavailable-block__text { margin-bottom: 10px; color: #292b35; font-size: 14px; font-weight: 300; } .unavailable-block__text:last-child { margin-bottom: 0; } .unavailable-block__form { display: flex; flex-direction: column; } .unavailable-block__form label { } .unavailable-block__form .input { background-color: transparent; } .unavailable-block__form button { } .unavailable-block__alert { display: none; padding: 12px 15px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 12px; align-items: center; gap: 8px; } .unavailable-block__alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; margin-right: 6px; } .unavailable-block__alert--success { background-color: rgba(11, 224, 112, 0.12); color: #059642; border: 1px solid rgba(11, 224, 112, 0.3); } .unavailable-block__alert--success .unavailable-block__alert-icon { background-color: #0be070; color: #fff; } .unavailable-block__alert--error { background-color: rgba(220, 53, 69, 0.1); color: #c82333; border: 1px solid rgba(220, 53, 69, 0.25); } .unavailable-block__alert--error .unavailable-block__alert-icon { background-color: #dc3545; color: #fff; } .recommended-cards { margin-bottom: 16px; overflow: visible; } .recommended-pagination { display: none; } .recommended-cards .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } @media (max-width: 992px) { .recommended-cards .swiper-wrapper { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .recommended-cards.swiper-container { overflow: hidden; height: auto !important; } .recommended-cards .swiper-wrapper { display: flex; grid-gap: 0; gap: 0; } .recommended-cards .swiper-slide { height: auto !important; padding: 0; margin: 0; background: none; background-size: initial; background-repeat: initial; background-position: initial; box-shadow: none; border-radius: 0; overflow: visible; } .recommended-cards .swiper-slide .recommended-card { height: 100%; } .recommended-pagination { display: flex; justify-content: center; gap: 4px; padding: 16px 0 0; } .recommended-pagination .swiper-pagination-bullet { width: 7px; height: 7px; border-radius: 50%; background: #ccc; opacity: 1; cursor: pointer; transition: background 0.2s; } .recommended-pagination .swiper-pagination-bullet-active { background: #09d166; } } .recommended-cards__title { margin-bottom: 15px; font-size: 22px; font-weight: 700; } .recommended-card { display: block; padding: 10px; border-radius: 10px; box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.08); transition: all 0.2s ease; overflow: hidden; background: #fff; } @media (min-width: 1025px) { .recommended-card:hover { box-shadow: 0 12px 8px -1px rgba(0, 0, 0, 0.25); } .recommended-card:hover .recommended-card__image img { transform: scale(1.05); } } .recommended-card__image { position: relative; margin-bottom: 10px; height: 200px; width: 100%; } .recommended-card__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: all 0.2s ease; } .recommended-card__body { } .recommended-card__body-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; line-height: 1.4; min-height: calc(2 * 1.4em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .recommended-card__body-price { display: flex; align-items: center; justify-content: space-between; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .recommended-card__price { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; } .recommended-card__price-text { font-size: 14px; font-weight: 400; line-height: 1; } .recommended-card__price-amount { font-size: 20px; font-weight: 600; line-height: 1; color: #09d166; } .recommended-card__chip { background: #efefef; display: inline-block; border-radius: 4px; color: #292b35; font-size: 12px; padding: 5px 10px; transition: all 0.3s ease; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; } .recommended-card__body-button { padding: 6px; height: 32px; } .item-platform__link { width: 100%; margin: 0 !important; display: flex; gap: 20px; justify-content: flex-start; align-items: center; height: 50px; } .item-platform__link.item-platform__link--show-all { justify-content: center; cursor: pointer; } @media (max-width: 540px) { .item-platform__link { width: 100% !important; height: 50px !important; margin-left: 0 !important; padding: 10px 10px !important; } } .item-platform__link .price-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .item-platform__link .price-logo { margin-left: auto; } .item-platform__link .price-wrapper span { text-transform: none; } .product-vitamin .list-platform .item-platform { border-bottom: 1px solid #e5e5e5; padding: 0 0 15px 15px; } .list-platform .item-platform:last-child { margin-bottom: 0; } .list-platform .item-platform .img { max-height: 25px; max-width: 70px; } .list-platform .item-platform img { max-width: 100%; position: static; } .featured-list { display: flex; flex-wrap: wrap; width: calc(100% + 90px); margin-left: -45px; justify-content: center; } .featured-list .featured-item { width: calc(16.6% - 90px); margin: 0 45px; } .featured-list .featured-item .img { position: relative; display: block; padding-bottom: 27%; width: 100%; } .featured-list .featured-item .img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; height: 100%; margin: auto; } .price-info { border: 1px solid #c8c8c8; border-radius: 10px; padding: 15px; background: #f9f9f9; } .price-info__text { margin-bottom: 20px; text-align: center; font-size: 12px; } .recommended-cards__title + .price-info__text { text-align: left; font-size: 14px; margin-bottom: 12px; } @media (max-width: 1024px) { .price-info__text { margin-top: 20px; } } .price-info__title { margin-bottom: 20px; font-size: 16px; font-weight: 600; } .price-info__grid { display: flex; flex-direction: column; gap: 20px; } .price-info__item { display: flex; align-items: center; gap: 15px; } .price-info__item-icon { } .price-info__item-group { display: flex; flex-direction: column; gap: 3px; } .price-info__item-title { font-size: 14px; font-weight: 600; } .price-info__item-text { font-size: 14px; font-weight: 400; } .list-platform .item-platform .btn { border: 2px solid #0dd166; line-height: 1; padding: 12px 12px; font-size: 13px; margin-left: 10px; flex-shrink: 0; } .list-platform .item-platform .price { flex-grow: 1; font-size: 18px; font-weight: 600; text-align: right; text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap; } .list-platform .item-platform .price .grey-value { color: #a9aaae; font-weight: inherit; font-size: inherit; max-width: 100%; display: inline-block; } .product-block__sellers .product-buttons .btn-green { position: relative; width: 300px; margin-right: 20px; line-height: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; color: #292b35; border: 2px solid #09d166; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; text-align: center; } .product-block__sellers .product-buttons .btn { width: calc(50% - 20px); margin: 0 10px; } .product-block__sellers .product-buttons { width: calc(100% + 20px); margin-left: -10px; } .product-block__sellers .product-buttons .btn-green img.second { display: none; } .product-block__sellers .product-buttons__ico { width: 20px; height: 20px; } .product-block__sellers .product-buttons__ico img { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; } .product-block__facts .headline { margin-bottom: 15px; } .product-facts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product-text { width: 37%; } .product-table-holder { width: 52%; } .product-table { font-size: 14px; background-color: #fff; -webkit-box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); border-radius: 10px; } .product-table__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 22px 30px; } .product-table__row .product-table__box.product-table__value { color: #000; } .product-table__row:first-child { border-radius: 10px 10px 0 0; } .product-table__row:last-child { border-radius: 0 0 10px 10px; } .product-table__row:nth-child(2n) { background-color: #f9f9f9; } .product-table__box { width: 50%; } .product-table__title { font-weight: 700; margin-right: 10px; } .product-text__block { margin-bottom: 30px; line-height: 1.5; font-size: 15px; } .product-text__row { margin-bottom: 35px; } .product-text__row:last-child { margin-bottom: 0; } .product-text__row strong { font-weight: 700; } .product-buttons__name { -webkit-transition: color 0.3s; transition: color 0.3s; } .rating { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .populars-item__row .rating { width: 125px; } .populars-item__row > a { display: flex; align-items: center; padding-right: 5px; justify-content: space-between; width: 100%; padding: 10px 40px 10px 20px; } .populars-item__row > a .default-icon { background-color: #ffe377; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #4ba641; font-weight: 700; font-size: 12px; line-height: 20px; color: #46821c; flex-shrink: 0; flex-grow: 0; display: flex; align-items: center; justify-content: center; margin-right: 7px; } .populars-item__row > a .populars-item__name { width: calc(100% - 27px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .populars-item__row > a .img { position: relative; width: 20px; height: 20px; margin-right: 7px; flex-shrink: 0; } .populars-item__row > a .img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; } .rating__count { font-size: 11px; margin-right: 5px; -webkit-transition: color 0.3s; transition: color 0.3s; white-space: nowrap; line-height: 10px; } .rating__line { width: 200px; height: 10px; border-radius: 4px; background-color: #efefef; position: relative; overflow: hidden; } .rating__indicator { background: #09d166; height: 10px; left: 0; position: absolute; top: 0; border-radius: 4px 0 0 4px; } .rating-circle { position: relative; border-radius: 50%; width: 106px; height: 106px; border: 10px solid #f5f5f5; } .products-list__box .rating-circle { margin-right: 40px; } .circle { width: 106px; height: 106px; position: relative; } .product-vitamin .circle { width: 89px; height: 89px; } .circle__value { 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; width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #000000; font-size: 16px; font-weight: 700; } .populars-item .rating__line { width: 100px; } .editor { font-size: 16px; font-weight: 300; line-height: 24px; letter-spacing: 0.8px; } .editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 { color: #000; font-weight: 700; margin-bottom: 20px; line-height: normal; } .editor h1, .editor h2 { font-size: 36px; } .editor h3, .editor h4 { font-size: 34px; } .editor h5, .editor h6 { font-size: 32px; } .editor p { color: #4f4f4f; font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: normal; margin-bottom: 21px; } .editor p:last-child { margin-bottom: 0; } .editor strong, .editor b { font-size: inherit; color: #000; font-weight: 700; } .editor a { font-size: inherit; font-weight: inherit; color: #15c458; } .editor a:hover { text-decoration: underline; } .editor em, .editor i { font-style: italic; color: inherit; } .editor ol, .editor ul { margin-bottom: 30px; } .editor ol li, .editor ul li { padding-left: 20px; color: #262a49; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0.8px; margin-bottom: 5px; } .editor ul li { position: relative; padding-left: 15px; } .editor blockquote { border-left: 3px solid #03d166; padding: 5px 15px 5px; } .editor ul li::after { content: ""; position: absolute; top: 8px; left: 0; display: block; width: 6px; height: 6px; background: #03d166; border-radius: 100%; } .editor ol { counter-reset: item; } .editor ol li { counter-increment: item; position: relative; } .editor ol li:after { content: counter(item) "."; font-size: 14px; font-weight: 500; flex-shrink: 0; flex-grow: 0; color: #03d166; min-width: 20px; position: absolute; left: 0; top: 0; } .options { padding: 70px 0; background-repeat: no-repeat; background-size: cover; background-position: center center; } .options-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .options-list__item { width: calc(25% - 15px); 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; } .options__ico { 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; width: 134px; height: 133px; border: 2px solid #07a852; border-radius: 50%; margin-bottom: 30px; position: relative; -webkit-transition: border-color 0.3s, background-color 0.3s, transform 0.3s ease; transition: border-color 0.3s, background-color 0.3s, transform 0.3s ease; } .options__ico::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: rgba(255, 255, 255, 0.4); opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; pointer-events: none; } .options__ico img { position: absolute; transition: 0.3s; left: 0; right: 0; top: 0; bottom: 0; max-height: 100%; max-width: 100%; margin: auto; filter: brightness(0) invert(1); } .options__ico .img { width: 70px; height: 70px; } .options__ico span { font-size: 70px; color: #fff; -webkit-transition: color 0.3s; transition: color 0.3s; } .options__ico .icon-collections { font-size: 58px; } .options__title { color: #fff; font-size: 20px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; text-align: center; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-transition: letter-spacing 0.3s ease; transition: letter-spacing 0.3s ease; } .options__subtitle { max-width: 300px; text-align: center; color: #9c9fa0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 32px; } .options__main { height: 76px; max-width: 100%; overflow: hidden; margin-bottom: 30px; } .options__bottom .btn { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-transition: opacity 0.3s, transform 0.3s ease, color 0.3s, border-color 0.3s, background-color 0.3s; transition: opacity 0.3s, transform 0.3s ease, color 0.3s, border-color 0.3s, background-color 0.3s; background-color: #09d166; border-color: #09d166; color: #fff; line-height: 20px; padding: 8px 25px; } .subscribe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px; width: 100%; } .subscribe__title { color: #1b1d25; font-size: 28px; font-weight: 500; text-transform: uppercase; margin-bottom: 7px; } .subscribe__subtitle { color: #9c9fa0; text-transform: uppercase; } .subscribe .input { height: 50px; border-radius: 10px; border: 2px solid #03d166; background-color: #ffffff; padding: 0 145px 0 60px; } .subscribe .input { color: #1d1d1d; } .subscribe .input::-webkit-input-placeholder { color: #b0b0b0 !important; } .subscribe .input::-moz-placeholder { color: #b0b0b0 !important; } .subscribe .input:-ms-input-placeholder { color: #b0b0b0 !important; } .subscribe .input:-moz-placeholder { color: #b0b0b0 !important; } .subscribe .input:focus { border-color: #09d166; } .subscribe__box { width: 50%; } .subscribe__box:first-child { margin-right: 20px; } .subscribe .input-box__ico span { color: #fff; font-size: 21px; } .breadcrumbs { padding: 9px 0; background-color: #f9f9f9; margin-bottom: 15px; } .breadcrumbs-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap; } .breadcrumbs-list__item { margin-right: 4px; font-size: 12px; color: #727171; text-transform: uppercase; } .breadcrumbs-list__link { position: relative; display: block; color: #09d166; padding-right: 10px; } .breadcrumbs-list__ico { position: absolute; right: 0; top: calc(50% - 0px); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .breadcrumbs-list__ico:before { transition: 0.3s; content: ""; display: block; width: 5px; height: 5px; margin: -1px 1px 0 0; border: 1px solid #727171; border-width: 1px 1px 0 0; transform: rotate(45deg); } .breadcrumbs-list__ico span { font-size: 7px; } .products { padding: 50px 0 100px; } .products-top { margin-bottom: 65px; } .products_collections { padding: 50px 0; } .products-list { counter-reset: number; } .products-list__item { padding: 15px 20px 24px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .products-list__item:last-child { margin-bottom: 0; } .products-list__item.cards-into-card { display: flex; max-width: 100%; width: 100%; padding: 0; box-shadow: none; border-bottom: 1px solid rgba(9, 209, 102, 0.3); padding-bottom: 8px; margin-bottom: 8px; } .products-list__item.cards-into-card:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 20px; } .products-list__item.cards-into-card .products-list__box { width: 100%; align-items: flex-start; } .products-list__item.cards-into-card .products-number { width: 20px; height: 20px; border-radius: 50%; background-color: #f0f0f0; color: #2b2b35; margin-right: 10px; flex-shrink: 0; line-height: 20px; text-align: center; font-size: 10px; font-weight: 600; margin-top: 25px; } .products-list__item.cards-into-card .products-list__content { flex: 1; min-width: 0; } .products-list__item.cards-into-card .products-list__link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #1b1d25; font-size: 14px; font-weight: 600; padding: 4px 6px 4px 4px; border-radius: 8px; border: 1.5px solid transparent; position: relative; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .products-list__item.cards-into-card .products-list__link::after { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 10px; padding: 2px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; pointer-events: none; } .products-list__item.cards-into-card .products-list__link:hover { color: #09d166; background-color: rgba(9, 209, 102, 0.03); border-color: transparent; } .products-list__item.cards-into-card .products-list__link:hover::after { opacity: 1; -webkit-animation: rotate-btn-border 2s linear infinite; animation: rotate-btn-border 2s linear infinite; } .products-list__item.cards-into-card .products-list__link .products-list__img { flex-shrink: 0; } .products-list__item.cards-into-card .products-list__link .products-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; font-size: 14px; line-height: 1.3; } .products-list__item.cards-into-card .products-list__subtitle { margin-top: 2px; padding-left: 0; } .products-list__item.cards-into-card .product-card__info { margin-right: 0; } .products-list__number { margin-right: 15px; } .products-list__title { font-size: 16px; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 5px; } .products-list__box { flex-shrink: 0; flex-grow: 0; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: flex-start; position: relative; margin-bottom: 10px; } .products-list__box:first-child { margin-right: 10px; flex-shrink: 1; flex-grow: 1; min-width: 1px; } .products-list__box + .products-list__box { border-left: 1px solid rgba(0, 0, 0, 0.06); padding-left: 10px; } .all-products .products-list__text { width: 100%; text-align: center; } .all-products .products-list__text .products-list__title { min-height: 40px; margin-bottom: 10px; } .all-products .products-list__text .products-list__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 38px; } .all-products .circle { width: 60px; height: 60px; position: absolute; right: 15px; top: 15px; margin-right: 0; } .all-products .circle__value { font-size: 14px; width: 45px; } .all-products .products-list__btn { width: 100%; } .products-list__number { position: relative; width: 30px; height: 30px; border-radius: 50%; background-color: #f6f6f6; color: #2b2b35; } .all-products .products-list__number { position: absolute; top: 0; left: 0; margin: 0; } .all-products .products-list__number:before { position: absolute; left: 50%; top: 50%; width: 20px; height: 15px; text-align: center; font-size: 13px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); counter-increment: number; content: counter(number) ""; } .all-products .products-list__img { width: 100%; height: auto; } .all-products .products-list__img a { position: relative; height: 90px; width: 90px; margin: 30px auto 15px; overflow: hidden; } .all-products .products-list__img .lazy-parent:before { width: 50px; height: 60px; } .all-products .products-list__img a img { position: absolute; margin: auto; top: 0px; left: 0px; right: 0; bottom: 0; vertical-align: middle; max-width: 100%; max-height: 100%; } .products-list__img a { display: block; width: 50px; height: 48px; flex-shrink: 0; } .products-list__img .lazy-parent:before { background-image: url(../img/icons/all-supplement.svg); width: 29px; height: 40px; } .products-list__img .lazy-parent { overflow: hidden; } .loader-bg { position: absolute; z-index: 999999; width: 100px; height: 100px; pointer-events: none; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .loader-bg.show { opacity: 1; } .loader-p { border: 0 solid transparent; border-radius: 50%; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader-p:before, .loader-p:after { content: ""; border: 1em solid #15e38a; border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; animation: loader 2s linear infinite; opacity: 0; } .loader-p:before { animation-delay: 0.5s; } @keyframes loader { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .products-list__img a img { display: block; } .products-list__title { font-size: 16px; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 5px; } .products-list__subtitle { font-size: 12px; color: #9e9e9e; line-height: 1.4; } .products-list__subtitle a { color: #888; font-weight: 600; } .search-block .search-groups .swiper-pagination { display: none; } .products-list__btn { -ms-flex-negative: 0; flex-shrink: 0; } .products-list__btn .btn { padding: 5px 30px; line-height: 26px; color: #332f2f; background-color: #fff; border-color: #09d166; } .products-tags { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .products-tags__item { font-size: 12px; max-height: 22px; border-radius: 4px; padding: 4px 5px; margin-right: 5px; background-color: #efefef; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; } .products-top__buttons { 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; } .products-top__buttons .btn { width: 300px; height: 50px; background-color: #f6f6f6; border-color: #f6f6f6; } .products-top__buttons .btn:first-child { border-radius: 10px 0 0 10px; } .products-top__buttons .btn:last-child { border-radius: 0 10px 10px 0; } .products-top__buttons .btn.active { color: #fff; background-color: #09d166; border-color: #09d166; } .nano { position: relative; width: 100%; height: 100%; overflow: hidden; } .nano > .nano-content { position: absolute; overflow: scroll; overflow-x: hidden; top: 0; right: 0; bottom: 0; left: 0; } .nano > .nano-content:focus { outline: thin dotted; } .nano > .nano-content::-webkit-scrollbar { display: none; } .has-scrollbar > .nano-content::-webkit-scrollbar { display: block; } .nano > .nano-pane { background: transparent; position: absolute; width: 7px; right: 0; top: 0; bottom: 0; visibility: hidden\9; opacity: 0.01; -webkit-transition: 0.2s; transition: 0.2s; border-radius: 5px; } .nano > .nano-pane > .nano-slider { background: #cbcbcb; position: relative; margin: 0 1px; border-radius: 3px; } .nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { visibility: visible\9; opacity: 0.99; } .brands-slider { position: relative; margin-top: 40px; } .brands-slider .gallery-brands { padding: 0 7px; } .related-slider.swiper-container { overflow: visible; } .brands-slider .swiper-container { padding-bottom: 40px; height: 200px; } .brands-slider .swiper-container-horizontal > .swiper-pagination-bullets, .brands-slider .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } .brands-slider .swiper-slide { padding: 0; } .brands-slider.secondary .swiper-container { height: auto; opacity: 0; transition: 0.3s; max-height: 0; min-height: 375px; } .brands-slider.secondary .swiper-container.swiper-container-horizontal { opacity: 1; max-height: 9999px; } .brands-slider.secondary .swiper-container .swiper-wrapper { display: none; } .brands-slider.secondary .swiper-container.swiper-container-initialized .swiper-wrapper { display: flex; } .brands-slider.secondary .swiper-slide img { margin: 0 auto; width: auto; } .brands-slider.secondary .img-box { padding-top: 10px; background: #fff; position: relative; padding-bottom: 56%; } .brands-slider.secondary .img-box:before { background-image: url(../img/icons/all-supplement.svg); width: 44px; height: 60px; } .brands-slider.secondary .product-card__brand:before { background-image: url(../img/icons/all-supplement.svg); width: 30px; height: 40px; } .brands-slider.secondary .img-box img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; max-width: 100%; max-height: 100%; margin: 0 auto; width: auto; } .brands-slider.secondary .product-slider-card { width: 100%; position: relative; padding: 10px 0; } .brands-slider.secondary .product-slider-card .link-product { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; } .brands-slider.secondary .product-slider-card .product-tags { position: relative; z-index: 2; } .brands-slider.secondary .product-card__title { height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .brands-slider.secondary .product-card__headline { margin: 0; } .brands-slider.secondary .product-tags { margin-bottom: -13px; } .brands-slider.secondary .product-tags .value { margin: 0 2.5px 0; } .brands-slider.secondary .product-slider-card .product-card__info { height: auto; } .brands-slider .product-card__info { border-top: none; } .brands-slider.secondary .product-card__brand { height: 65px; width: 80px; overflow: hidden; margin-right: 15px; display: flex; align-items: center; } .swiper-container.gallery-brands-row { padding: 15px 5px 25px; } .swiper-container.gallery-brands-row .card-rating { width: 100%; } .brands-slider .swiper-slide { 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; background: #fff; -webkit-box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.08); -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; overflow: hidden; border-radius: 10px; position: relative; } .brands-slider .swiper-pagination .brands-slider .swiper-pagination { bottom: -40px !important; left: 50%; transform: translateX(-50%); } .brands-slider .swiper-pagination .brands-slider .swiper-pagination .swiper-pagination-bullet { margin: 0 4px; } .brands-slider .swiper-button-prev, .brands-slider .swiper-button-next { position: absolute; border: none; outline: none; background-image: none; top: 50%; transform: translateY(-50%); 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; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .brands-slider.secondary .swiper-button-prev, .brands-slider.secondary .swiper-button-next { top: 200px; } .swiper-button-next:after, .swiper-button-prev:after { display: none; } .swiper-button-next:before, .swiper-button-prev:before { color: #1b1d25; font-size: 8px !important; } .swiper-button-next:before { transform: rotate(-90deg); margin-right: -2px; } .swiper-button-prev:before { transform: rotate(90deg); margin-left: -2px; } .brands-slider .swiper-button-prev::before, .brands-slider .swiper-button-next::before { display: none; } .brands-slider .swiper-button-prev, .brands-slider .swiper-button-next { overflow: hidden; } .brands-slider .swiper-button-prev::after, .brands-slider .swiper-button-next::after { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid #1b1d25; border-bottom: 2px solid #1b1d25; transition: border-color 0.3s; } .brands-slider .swiper-button-next::after { transform: rotate(-45deg); margin-left: -3px; } .brands-slider .swiper-button-prev::after { transform: rotate(135deg); margin-right: -3px; } .brands-slider .swiper-button-prev:hover, .brands-slider .swiper-button-next:hover { background-color: #09d166; } .brands-slider .swiper-button-prev:hover::after, .brands-slider .swiper-button-next:hover::after { border-color: #fff; } .brands-slider .swiper-button-prev { left: -65px; } .brands-slider .swiper-button-next { right: -65px; } .brands-slider .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; background: rgba(0, 0, 0, 0.8); } .brands-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: #ffffff; } .brands-slider .swiper-slide img { width: 100%; height: 100%; overflow: hidden; object-fit: contain; transition: transform 0.4s ease; transform: scale(1.01); } .brands-slider .swiper-slide::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%, transparent 80% ); z-index: 2; pointer-events: none; transition: none; } .brands-slider .swiper-slide:hover::after { animation: shine-glare 0.7s ease-out forwards; } .brands-slider .swiper-slide:hover img { transform: scale(1.05); } .search-page { /*-webkit-box-shadow: 0 3px 0 #f9f9f9;*/ /*box-shadow: 0 3px 0 #f9f9f9;*/ } .search-page .headline__actions { max-width: 250px; } .alphabet { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .alphabet__item { width: 40px; height: 40px; font-size: 13px; border-radius: 10px; background-color: #f6f6f6; color: #292b35; text-transform: uppercase; 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; padding: 10px 2px; cursor: pointer; -webkit-transition: color 0.3s, background-color 0.3s; transition: color 0.3s, background-color 0.3s; } .alphabet__item:last-child { margin-right: 0; } /* Hover fill effect for alphabet items */ @media (min-width: 1025px) { .alphabet__item { position: relative; overflow: hidden; } .alphabet__item::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; background: linear-gradient(135deg, #0be070 0%, #09d166 100%); border-radius: 8px; opacity: 0; transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease; z-index: -1; pointer-events: none; } .alphabet__item:hover::before { width: 100%; height: 100%; opacity: 1; border-radius: inherit; } .alphabet__item:hover { color: #fff; background-color: transparent; box-shadow: 0 4px 12px rgba(9, 209, 102, 0.3); } } .search-block { opacity: 1; transition: opacity 0.3s ease; } .search-block__headline { height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #e5e5e5; margin-bottom: 45px; position: relative; } .search-block__row { margin-bottom: 35px; } .search-block__row:last-child { margin-bottom: 0; } .search-block__item { position: absolute; top: 18px; left: 0; text-transform: uppercase; padding: 0 25px; 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; height: 100%; border-radius: 10px; border: 1px solid #e5e5e5; background-color: #ffffff; } .search-groups { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 0 -2%; } .search-list { width: 23%; margin: 0 0 30px 2%; box-shadow: none; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; } .search-list__item { display: flex; align-items: center; padding: 12px 16px; position: relative; box-shadow: inset 0 0 0 2px rgba(9, 209, 102, 0.4); border-radius: 10px; transition: background-color 0.3s ease, box-shadow 0.4s ease, transform 0.3s ease; } .search-list__item.lazy-parent:before { left: 34px; top: 50%; transform: translate(0%, -50%); } .search-list__logo-wrap { display: flex; align-items: center; justify-content: center; width: 50px; height: 36px; background: #bbffd7; border: 2px solid #fff; border-radius: 8px; flex-shrink: 0; margin-right: 12px; padding: 4px; } .search-list__logo-wrap .new_icon_brand { display: block; width: 100%; max-height: 100%; object-fit: contain; } .search-list__item .new_icon_brand { display: inline-block; vertical-align: middle; width: 45px; max-height: 30px; margin-right: 12px; } .headline__title .sup-wrap .img { position: relative; width: 80px; height: 65px; margin-right: 15px; flex-grow: 0; flex-shrink: 0; } .headline__title .sup-wrap .img.mobile { display: none; } .headline__title .sup-wrap .img img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .headline__title .sup-wrap .new_logo_brand { display: inline-block; vertical-align: middle; width: 80px; max-height: 65px; background-repeat: no-repeat; } .search-list__item:last-child { border-bottom: none; } .search-list__item .icon_cat { margin-right: 5px; } .search-list__text { /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ padding-right: 15px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; -webkit-transition: color 0.3s; transition: color 0.3s; } .search-list__ico { color: #fff; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } @property --rating-progress { syntax: ""; initial-value: 0; inherits: false; } .rating-circle { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; --rating-progress: var(--rating); background: conic-gradient( #09d166 calc(var(--rating-progress) * 3.6deg), rgba(0, 0, 0, 0.08) 0 ); animation: fill-rating 1.2s ease forwards; animation-delay: 0.3s; } @keyframes fill-rating { from { --rating-progress: 0; } } .rating-circle::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; } .rating-circle__value { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: #1b1d25; line-height: 1; } .product-cards { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 13px; position: relative; } .product-cards.brands { padding-bottom: 70px; } .product-cards .no-result { margin: 0 0 0 2%; } .product-cards.loading .preload-wrap { opacity: 1; visibility: visible; display: block; } .preload-wrap { margin: -5px -5px -5px 10px; opacity: 0; visibility: hidden; display: none; background: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; } .cssload-dots { width: 0; height: 0; position: absolute; top: 250px; left: 50%; transform: translate3d(-50%, 0, 0); margin: auto; outline: 1px solid red; filter: url(#goo); -o-filter: url(#goo); -ms-filter: url(#goo); -webkit-filter: url(#goo); -moz-filter: url(#goo); } .cssload-dot { width: 0; height: 0; position: absolute; left: 0; top: 0; } .cssload-dot:before { content: ""; width: 34px; height: 34px; border-radius: 49px; background: rgb(0, 214, 106); position: absolute; left: 50%; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); margin-left: -17.5px; margin-top: -17.5px; } .cssload-dot:nth-child(5):before { z-index: 100; width: 44.5px; height: 44.5px; margin-left: -21.75px; margin-top: -21.75px; animation: cssload-dot-colors 4s ease infinite; -o-animation: cssload-dot-colors 4s ease infinite; -ms-animation: cssload-dot-colors 4s ease infinite; -webkit-animation: cssload-dot-colors 4s ease infinite; -moz-animation: cssload-dot-colors 4s ease infinite; } .cssload-dot:nth-child(1) { animation: cssload-dot-rotate-1 4s 0s linear infinite; -o-animation: cssload-dot-rotate-1 4s 0s linear infinite; -ms-animation: cssload-dot-rotate-1 4s 0s linear infinite; -webkit-animation: cssload-dot-rotate-1 4s 0s linear infinite; -moz-animation: cssload-dot-rotate-1 4s 0s linear infinite; } .cssload-dot:nth-child(1):before { background-color: rgb(0, 214, 106); animation: cssload-dot-move 4s 0s ease infinite; -o-animation: cssload-dot-move 4s 0s ease infinite; -ms-animation: cssload-dot-move 4s 0s ease infinite; -webkit-animation: cssload-dot-move 4s 0s ease infinite; -moz-animation: cssload-dot-move 4s 0s ease infinite; } .cssload-dot:nth-child(2) { animation: cssload-dot-rotate-2 4s 1s linear infinite; -o-animation: cssload-dot-rotate-2 4s 1s linear infinite; -ms-animation: cssload-dot-rotate-2 4s 1s linear infinite; -webkit-animation: cssload-dot-rotate-2 4s 1s linear infinite; -moz-animation: cssload-dot-rotate-2 4s 1s linear infinite; } .cssload-dot:nth-child(2):before { background-color: rgb(0, 214, 106); animation: cssload-dot-move 4s 1s ease infinite; -o-animation: cssload-dot-move 4s 1s ease infinite; -ms-animation: cssload-dot-move 4s 1s ease infinite; -webkit-animation: cssload-dot-move 4s 1s ease infinite; -moz-animation: cssload-dot-move 4s 1s ease infinite; } .cssload-dot:nth-child(3) { animation: cssload-dot-rotate-3 4s 2s linear infinite; -o-animation: cssload-dot-rotate-3 4s 2s linear infinite; -ms-animation: cssload-dot-rotate-3 4s 2s linear infinite; -webkit-animation: cssload-dot-rotate-3 4s 2s linear infinite; -moz-animation: cssload-dot-rotate-3 4s 2s linear infinite; } .cssload-dot:nth-child(3):before { background-color: rgb(175, 225, 2); animation: cssload-dot-move 4s 2s ease infinite; -o-animation: cssload-dot-move 4s 2s ease infinite; -ms-animation: cssload-dot-move 4s 2s ease infinite; -webkit-animation: cssload-dot-move 4s 2s ease infinite; -moz-animation: cssload-dot-move 4s 2s ease infinite; } .cssload-dot:nth-child(4) { animation: cssload-dot-rotate-4 4s 3s linear infinite; -o-animation: cssload-dot-rotate-4 4s 3s linear infinite; -ms-animation: cssload-dot-rotate-4 4s 3s linear infinite; -webkit-animation: cssload-dot-rotate-4 4s 3s linear infinite; -moz-animation: cssload-dot-rotate-4 4s 3s linear infinite; } .cssload-dot:nth-child(4):before { background-color: rgb(251, 211, 1); animation: cssload-dot-move 4s 3s ease infinite; -o-animation: cssload-dot-move 4s 3s ease infinite; -ms-animation: cssload-dot-move 4s 3s ease infinite; -webkit-animation: cssload-dot-move 4s 3s ease infinite; -moz-animation: cssload-dot-move 4s 3s ease infinite; } @keyframes cssload-dot-move { 0% { transform: translateY(0); } 18%, 22% { transform: translateY(-68px); } 40%, 100% { transform: translateY(0); } } @-o-keyframes cssload-dot-move { 0% { -o-transform: translateY(0); } 18%, 22% { -o-transform: translateY(-68px); } 40%, 100% { -o-transform: translateY(0); } } @-ms-keyframes cssload-dot-move { 0% { -ms-transform: translateY(0); } 18%, 22% { -ms-transform: translateY(-68px); } 40%, 100% { -ms-transform: translateY(0); } } @-webkit-keyframes cssload-dot-move { 0% { -webkit-transform: translateY(0); } 18%, 22% { -webkit-transform: translateY(-68px); } 40%, 100% { -webkit-transform: translateY(0); } } @-moz-keyframes cssload-dot-move { 0% { -moz-transform: translateY(0); } 18%, 22% { -moz-transform: translateY(-68px); } 40%, 100% { -moz-transform: translateY(0); } } @keyframes cssload-dot-colors { 0% { background-color: rgb(0, 214, 106); } 25% { background-color: rgb(0, 214, 106); } 50% { background-color: rgb(0, 214, 106); } 75% { background-color: rgb(175, 225, 2); } 100% { background-color: rgb(251, 211, 1); } } @-o-keyframes cssload-dot-colors { 0% { background-color: rgb(0, 214, 106); } 25% { background-color: rgb(0, 214, 106); } 50% { background-color: rgb(0, 214, 106); } 75% { background-color: rgb(175, 225, 2); } 100% { background-color: rgb(251, 211, 1); } } @-ms-keyframes cssload-dot-colors { 0% { background-color: rgb(0, 214, 106); } 25% { background-color: rgb(0, 214, 106); } 50% { background-color: rgb(0, 214, 106); } 75% { background-color: rgb(175, 225, 2); } 100% { background-color: rgb(251, 211, 1); } } @-webkit-keyframes cssload-dot-colors { 0% { background-color: rgb(0, 214, 106); } 25% { background-color: rgb(0, 214, 106); } 50% { background-color: rgb(0, 214, 106); } 75% { background-color: rgb(175, 225, 2); } 100% { background-color: rgb(251, 211, 1); } } @-moz-keyframes cssload-dot-colors { 0% { background-color: rgb(0, 214, 106); } 25% { background-color: rgb(0, 214, 106); } 50% { background-color: rgb(0, 214, 106); } 75% { background-color: rgb(175, 225, 2); } 100% { background-color: rgb(251, 211, 1); } } @keyframes cssload-dot-rotate-1 { 0% { transform: rotate(-105deg); } 100% { transform: rotate(270deg); } } @-o-keyframes cssload-dot-rotate-1 { 0% { -o-transform: rotate(-105deg); } 100% { -o-transform: rotate(270deg); } } @-ms-keyframes cssload-dot-rotate-1 { 0% { -ms-transform: rotate(-105deg); } 100% { -ms-transform: rotate(270deg); } } @-webkit-keyframes cssload-dot-rotate-1 { 0% { -webkit-transform: rotate(-105deg); } 100% { -webkit-transform: rotate(270deg); } } @-moz-keyframes cssload-dot-rotate-1 { 0% { -moz-transform: rotate(-105deg); } 100% { -moz-transform: rotate(270deg); } } @keyframes cssload-dot-rotate-2 { 0% { transform: rotate(165deg); } 100% { transform: rotate(540deg); } } @-o-keyframes cssload-dot-rotate-2 { 0% { -o-transform: rotate(165deg); } 100% { -o-transform: rotate(540deg); } } @-ms-keyframes cssload-dot-rotate-2 { 0% { -ms-transform: rotate(165deg); } 100% { -ms-transform: rotate(540deg); } } @-webkit-keyframes cssload-dot-rotate-2 { 0% { -webkit-transform: rotate(165deg); } 100% { -webkit-transform: rotate(540deg); } } @-moz-keyframes cssload-dot-rotate-2 { 0% { -moz-transform: rotate(165deg); } 100% { -moz-transform: rotate(540deg); } } @keyframes cssload-dot-rotate-3 { 0% { transform: rotate(435deg); } 100% { transform: rotate(810deg); } } @-o-keyframes cssload-dot-rotate-3 { 0% { -o-transform: rotate(435deg); } 100% { -o-transform: rotate(810deg); } } @-ms-keyframes cssload-dot-rotate-3 { 0% { -ms-transform: rotate(435deg); } 100% { -ms-transform: rotate(810deg); } } @-webkit-keyframes cssload-dot-rotate-3 { 0% { -webkit-transform: rotate(435deg); } 100% { -webkit-transform: rotate(810deg); } } @-moz-keyframes cssload-dot-rotate-3 { 0% { -moz-transform: rotate(435deg); } 100% { -moz-transform: rotate(810deg); } } @keyframes cssload-dot-rotate-4 { 0% { transform: rotate(705deg); } 100% { transform: rotate(1080deg); } } @-o-keyframes cssload-dot-rotate-4 { 0% { -o-transform: rotate(705deg); } 100% { -o-transform: rotate(1080deg); } } @-ms-keyframes cssload-dot-rotate-4 { 0% { -ms-transform: rotate(705deg); } 100% { -ms-transform: rotate(1080deg); } } @-webkit-keyframes cssload-dot-rotate-4 { 0% { -webkit-transform: rotate(705deg); } 100% { -webkit-transform: rotate(1080deg); } } @-moz-keyframes cssload-dot-rotate-4 { 0% { -moz-transform: rotate(705deg); } 100% { -moz-transform: rotate(1080deg); } } .product-card { width: calc(33.333% - 9px); border: 1.5px solid rgba(9, 209, 102, 0.4); box-shadow: 0 3px 12px rgba(9, 209, 102, 0.12); border-radius: 10px; background-color: #fff; -webkit-transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; position: relative; padding-bottom: 76px; overflow: hidden; } .product-card.highlight-bounce { border-color: #09d166; box-shadow: 0 6px 24px rgba(9, 209, 102, 0.35); animation: cardBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes cardBounce { 0% { transform: scale(1); } 30% { transform: scale(1.02); } 50% { transform: scale(0.99); } 70% { transform: scale(1.01); } 100% { transform: scale(1); } } @media (min-width: 1025px) { .product-card:hover { border-color: rgba(9, 209, 102, 0.65); box-shadow: 0 5px 20px rgba(9, 209, 102, 0.2); } } .product-card .gallery-card-slider .swiper-pagination { bottom: 4px; } .product-card .gallery-card-slider { background: #fff; } .product-card .gallery-card-slider .swiper-container { padding-bottom: 20px; height: 220px; } .product-card__head { padding: 20px; font-size: 25px; border-radius: 10px 10px 0 0; text-transform: uppercase; text-align: center; background-color: #18d166; color: #fff; } .products-4col .product-card { width: calc(25% - 10px); } .product-card__img { position: relative; border-radius: 10px 10px 0 0; background-color: #f6f6f6; } .product-card__img .sup_img { display: block; position: relative; padding-bottom: 66.4%; overflow: hidden; } .product-card__img .sup_img::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%, transparent 80% ); z-index: 2; pointer-events: none; transition: none; } .product-card__img .sup_img:hover::after { animation: shine-glare 0.7s ease-out forwards; } @keyframes shine-glare { 0% { left: -100%; } 100% { left: 150%; } } .product-card__img .sup_img img { -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform: scale(1.001); transform: scale(1.01); } .product-card__img .sup_img:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .product-card__img img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; } .product-card__head { padding: 10px; font-size: 18px; } .product-card__info { padding: 18px 12px 0; display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 220px); border-top: 1.5px solid rgba(9, 209, 102, 0.4); } .product-card__headline { color: #292b35; margin-bottom: 8px; } .product-tags { flex-wrap: wrap; width: calc(100% + 5px); margin-left: -2.5px; margin-bottom: -5px; position: relative; z-index: 2; display: flex; } .product-tags .value { background: #efefef; display: inline-block; border-radius: 4px; margin: 0 2.5px 3px; color: #292b35; font-size: 12px; padding: 5px 10px; transition: all 0.3s ease-in-out; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .product-card__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .product-card__subtitle { font-size: 13px; } .product-card__bottom { 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; position: absolute; left: 12px; right: 12px; bottom: 20px; border-top: 1px dashed rgba(9, 209, 102, 0.3); padding-top: 20px; } .brands-slider.secondary .product-card__bottom { position: static; } .brands-slider.secondary .product-card__bottom .card-rating { width: 100%; } .product-card__bottom .btn { font-size: 12px; padding: 3px 15px; color: #767676; line-height: 28px; } .product-card__bottom .btn svg { transition: 0.3s; display: inline-flex; width: 16px; height: 16px; margin-left: 10px; transform: rotate(-90deg); fill: #747373; transition: all 0.3s; } .gallery-card-slider .swiper-container .swiper-wrapper { display: none; } .gallery-card-slider .swiper-container-initialized .swiper-wrapper { display: flex; } .gallery-card-slider .swiper-container { height: 200px; } .gallery-card-slider .gallery-card.general-health { margin-top: 0; } .gallery-card-slider .swiper-slide { padding: 0; } .gallery-card-slider .swiper-slide { 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; background-color: #fff; } .gallery-card-slider .gallery-card.brand-slider .swiper-slide { padding: 10px 0 0; } .brands-slider.secondary .product-card__img .product-card__brand { display: none; } .gallery-card-slider .gallery-card.brand-slider .swiper-slide:before { background-image: url(../img/icons/all-supplement.svg); width: 29px; height: 40px; } .gallery-card-slider .swiper-slide img { height: 100%; position: static; width: auto; } .gallery-card-slider .swiper-button-prev, .gallery-card-slider .swiper-button-next { border: none; outline: none; background-image: none; 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; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; -webkit-transition: background-color 0.3s, color 0.3s, opacity 0.3s, visibility 0.3s; transition: background-color 0.3s, color 0.3s, opacity 0.3s, visibility 0.3s; } .swiper-button-prev:before, .swiper-button-next:before { content: ""; display: block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-slider.svg); transition: all 0.3s ease-in-out; } .gallery-card-slider .swiper-button-prev, .gallery-card-slider .swiper-button-next, .gallery-card-slider .swiper-pagination { opacity: 0; visibility: hidden; transition: 0.3s; } .gallery-card-slider .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 2px !important; background-color: #ccc; opacity: 1; } .gallery-card-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: #09d166; } .rating-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rating-list__item { width: 11px; height: 11px; border: 1px solid #ced0da; background-color: #f0f0f0; background-image: linear-gradient(to top, #f1f3f7 0%, #ffffff 100%); margin-right: 2px; border-radius: 50%; } .rating-list__item_full { background-color: #55cd6d; border-color: #55cd6d; background-image: none; } .card-rating__top { margin-bottom: 6px; } input::-webkit-input-placeholder { color: #767676 !important; } input::-moz-placeholder { color: #767676 !important; } input:-ms-input-placeholder { color: #767676 !important; } input:-moz-placeholder { color: #767676 !important; } input, textarea { font-family: inherit !important; } .card-rating__title { color: #767676; font-size: 12px; display: inline-block; } .card-rating__count { font-size: 10px; margin-left: 5px; color: #494950; font-weight: 700; } .card-rating__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-between; } .compare { padding: 40px 0 0; } .compare .headline { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .headline__clear-compare { color: #959595; text-decoration: underline; text-transform: lowercase; } .headline__actions { position: relative; } .compare-block { display: -webkit-box; display: -ms-flexbox; display: flex; } .compare-block .product-table__row { padding: 22px 10px 22px 30px; } .compare-table { display: -webkit-box; display: -ms-flexbox; display: flex; border-collapse: collapse; border-spacing: 0; overflow: hidden; -webkit-box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); border-radius: 0 0 10px 10px; } .compare-table tbody { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 320px; width: auto; position: relative; overflow-y: hidden; overflow-x: auto; white-space: nowrap; } .compare-table thead { width: 100%; max-width: 320px; -ms-flex-negative: 0; flex-shrink: 0; } .compare-table thead tr th:nth-child(2n - 1), .compare-table tbody tr td:nth-child(2n - 1) { background-color: #f9f9f9; } .compare-table thead tr th:last-child, .compare-table tbody tr td:last-child { background-color: #fff; } .compare-table tbody tr td { display: block; border-left: 1px solid #c8c8c8; text-align: center; } .compare-table thead tr th:first-child, .compare-table tbody tr td:first-child { background-color: #fff; border-bottom: 1px solid #c8c8c8; } .compare-table thead tr, .compare-table tbody tr { display: block; } .compare-table thead tr th, .compare-table tbody tr td { display: block; padding: 25px 30px; } .compare-table tbody tr { min-width: 320px; } .compare-table thead tr th { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; } .compare-table__rating { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .compare-table__rating .circle { width: 81px; height: 81px; margin-right: 0; } .compare-table__score { height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .compare-table__img { height: 170px; position: relative; } .compare-table__close { position: absolute; top: 0; right: 28px; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; background-color: #b7b7b7; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } .compare-table__close .icon-close { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 10px; color: #fff; } .compare-table__ranks { height: 85px; } .compare-table tbody tr td.compare-table__ranks { padding: 10px 30px; } .compare-table__rank { color: #09d166; font-size: 28px; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 5px; } .compare-table__rank-sum { color: #919295; font-size: 14px; letter-spacing: 0.7px; } .compare-table__tags { -ms-flex-wrap: wrap; flex-wrap: wrap; } .compare-table__tags .products-tags__item { margin-bottom: 15px; } .compare-table__photo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 16px; } .compare-table__photo img { padding: 5px; border-radius: 10px; border: 1px solid #f6f6f6; background-color: #ffffff; } .compare-table__name { text-align: center; text-transform: uppercase; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .compare-table .product-buttons .btn { width: 100%; margin-right: 0; } .compare-table .product-block__sellers { margin: 0; } .compare-table .product-block__sellers .product-buttons__ico { left: 50px; } .compare-table .populars-item__ico { position: relative; right: auto; } .compare-table .add-new { 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; } .compare-table .icon-plus { top: 25px; font-size: 40px; font-weight: 900; text-transform: uppercase; } .compare-table .add-new__text { margin-top: 20px; color: #09d166; font-size: 14px; text-transform: uppercase; } .btn-load-more { display: none; margin: 20px auto 0; } .btn-back { padding: 20px 0; } .btn-back .container { display: flex; } .btn-back .btn { line-height: 1; padding: 8px 15px; } .product-vitamin .btn-back .btn { line-height: 1.2; padding: 10px 20px; border: 2px solid #0dcb5b; } .headline__title a { font-size: 14px; margin-left: 5px; color: #292b35; transition: all 0.3s ease-in-out; } .products_collections-inner { display: grid; grid-template-columns: 300px 1fr; gap: 0 40px; } .products_collections-inner .sidebar { min-width: 0; } .products_collections-inner .content-bar { position: relative; } .products_collections-inner .content { min-width: 0; height: fit-content; } .aside-bar { font-size: 14px; width: 100%; } .aside-bar input { outline: none; -webkit-appearance: none; border-radius: 0; display: inline-block; } .aside-bar .section { margin: 0 14px 20px 14px; } .search-box .title { color: #000; font-size: 16px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; } .search-box .input-block { position: relative; } .search-box .input-block:before { content: ""; width: 18px; height: 18px; display: block; position: absolute; left: 15px; top: 50%; filter: brightness(0); transform: translateY(-50%); background: url(../img/icons/search.svg); background-repeat: no-repeat; background-size: contain; background-position: center; } @media screen and (min-width: 651px) { .populars-brands.swiper-container { height: auto; overflow: initial; margin: 0; } .populars-brands .swiper-wrapper { width: auto; height: auto; flex-wrap: wrap; margin: 0 0 0 -2%; } .populars-brands .search-list { height: auto; padding: 0; } } .search-box form { display: -ms-flexbox; display: flex; margin-bottom: 10px; } .search-box .search-feild { width: 100%; height: 100%; outline: none; color: #767676; font-size: 15px; font-weight: 300; height: 40px; padding: 0 5px 0 40px; border: none; border-radius: 10px; background-color: #f6f6f6; transition: border-color 0.3s; margin-right: 4px; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; min-width: 1px; transition: border-color 0.3s; } .search-box button { border: none; border: 1px solid #b0b0b0; font-size: 13px; outline: none; color: #000; background-color: transparent; padding: 2px 5px; border-radius: 10px; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; transition: border-color 0.3s, color 0.3s, background-color 0.3s; cursor: pointer; } .sidebar .supl_count { color: #747474; font-size: 12px; padding: 0 4px; } .sidebar .collection_count { color: #747474; font-size: 12px; padding: 0 4px; max-width: 38px; } .sidebar .raiting_count { color: #747474; font-size: 12px; padding: 0 4px; } .category-box .title { color: #000; font-size: 16px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .category-box form { display: -ms-flexbox; display: flex; margin-bottom: 10px; } .category-box .search-feild, .health-topics-box .search-feild { width: 100%; outline: none; color: #767676; font-size: 14px; font-weight: 300; height: 40px; padding: 0 65px 0 40px; border: none; border-radius: 8px; background-color: #f6f6f6; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; min-width: 1px; position: relative; z-index: 2; } .category-box .input-block, .health-topics-box .input-block { position: relative; margin-bottom: 10px; border-radius: 10px; border: 2px solid transparent; transition: border-color 0.3s ease; } .category-box .input-block::before, .health-topics-box .input-block::before { content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 12px; padding: 3px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } .category-box .input-block:hover::before, .category-box .input-block:focus-within::before, .health-topics-box .input-block:hover::before, .health-topics-box .input-block:focus-within::before { opacity: 1; animation: rotate-btn-border 2s linear infinite; } /* Sidebar filter — icon animation (search ↔ arrow) */ .input-block .input-block__ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; filter: brightness(0); opacity: 0.4; pointer-events: none; transition: opacity 0.3s; z-index: 3; } .input-block:focus-within .input-block__ico { opacity: 0.7; } .input-block .input-block__ico img { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; object-fit: contain; transition: opacity 0.3s ease, transform 0.3s ease; } .input-block .input-block__ico .ico-search { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } .input-block .input-block__ico .ico-arrow { transform: translate(-50%, -50%) scale(0.5) rotate(-90deg); opacity: 0; } .input-block:focus-within .input-block__ico .ico-search { transform: translate(-50%, -50%) scale(0.5) rotate(90deg); opacity: 0; } .input-block:focus-within .input-block__ico .ico-arrow { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } /* Sidebar filter — actions (loader + clear) */ .input-block__actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; z-index: 3; } .input-block__loader { width: 18px; height: 18px; border: 2px solid #e0e0e0; border-top-color: #09d166; border-radius: 50%; animation: offers-spin 0.7s linear infinite; display: none; } .input-block__loader.visible { display: block; } .input-block__clear { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #ccc; border-radius: 50%; transition: color 0.2s, background-color 0.2s; opacity: 0; pointer-events: none; } .input-block__clear.visible { opacity: 1; pointer-events: auto; } .input-block__clear:hover { color: #666; background-color: #e8e8e8; } .aside-bar button.input-block__clear { border: none; color: #ccc; background: none; padding: 0; border-radius: 50%; width: 28px; height: 28px; } .aside-bar button { border: none; font-size: 13px; border: 1px solid #b0b0b0; outline: none; color: #000; background-color: transparent; padding: 2px 5px; border-radius: 10px; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; transition: border-color 0.3s, color 0.3s, background-color 0.3s; cursor: pointer; } .aside-bar button.filter-apply-btn { color: #fff; background: linear-gradient(135deg, #09d166 0%, #07b858 100%); background-size: 200% 200%; background-position: 0% 50%; border: none; border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; } .aside-bar button.filter-reset-btn { background: #8bb8a0; color: #fff; text-shadow: 0 1px 2px rgba(40, 80, 60, 0.35); border: none; border-radius: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; } .category-box .checkbox-filter { width: 13px; height: 13px; padding: 0; margin: 0 4px 1px 0; cursor: pointer; vertical-align: text-bottom; opacity: 0; position: absolute; } .category-box .checkbox-filter:checked + .filter { color: #1b1d25; font-weight: 600; } .category-box .checkbox-filter:checked + .filter::after { opacity: 1; } .category-box .checkbox-filter:checked + .filter::before { background: #00d66a; border: solid 1px #00d66a; } .category-box .filter { cursor: pointer; padding-left: 20px; position: relative; line-height: 16px; display: block; width: 100%; } .category-box .filter::before { content: ""; width: 16px; height: 16px; position: absolute; top: 0; left: 0; background: #fcfcfc; border-radius: 4px; border: solid 1px #ddd; } .category-box .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 5px; left: 4px; border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transform: rotate(-45deg); } .aside-bar .apply { position: absolute; left: calc(100% + 10px); z-index: 11; background-color: #fff; border-radius: 10px; border: 1px solid #e5e5e5; padding: 10px 20px; display: flex; flex-direction: column; align-items: center; top: 50%; transform: translateY(-50%); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); cursor: default; } .aside-bar .apply:before { content: ""; position: absolute; top: calc(50% - 8px); left: -8px; width: 16px; height: 16px; transform: rotate(45deg); background-color: #fff; border: 1px solid #e5e5e5; border-width: 0 0 1px 1px; } .aside-bar .apply__info { display: flex; align-items: center; margin-bottom: 5px; } .aside-bar .apply__info span { font-weight: 700; } .aside-bar .apply__btn { width: 100%; padding: 10px 16px; cursor: pointer; color: #fff; white-space: nowrap; background: linear-gradient(135deg, #09d166 0%, #07b858 100%); background-size: 200% 200%; background-position: 0% 50%; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; position: relative; overflow: hidden; transition: background-position 0.4s ease; } .aside-bar .apply__btn:hover { background-position: 100% 50%; } .bold { font-weight: 700; } /* .category-box .show-more-container { color: #09d166; cursor: pointer; margin-left: 5px; */ .category-box .show-more-container { display: none; } .category-list .list-item { margin-bottom: 3px; padding: 5px 0; max-width: 250px; line-height: 1.4; display: flex; align-items: center; cursor: pointer; position: relative; width: calc(100% + 28px); margin-left: -14px; padding: 5px 14px; transition: background 0.3s; } .raiting-box .title { color: #000; font-size: 16px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .raiting-box .checkbox-filter { width: 13px; height: 13px; padding: 0; margin: 0 4px 1px 0; cursor: pointer; vertical-align: text-bottom; opacity: 0; display: none; } .raiting-box .checkbox-filter:checked + .filter { font-weight: 900; } .raiting-box .checkbox-filter:checked + .filter::before { background: #0dd166; border: solid 1px #0dd166; } .raiting-box .checkbox-filter:checked + .filter::after { opacity: 1; } .raiting-box .raiting-name { display: flex; align-items: center; position: relative; } .raiting-box .filter { cursor: pointer; padding-left: 20px; position: relative; line-height: 16px; display: block; width: 100%; } .raiting-box .filter::before { content: ""; width: 16px; height: 16px; position: absolute; top: 0; left: 0; background: #fcfcfc; border-radius: 4px; border: solid 1px #ddd; transition: background 0.3s, border 0.3s; } .raiting-box .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 5px; left: 4px; border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transform: rotate(-45deg); transition: border 0.3s; } .raiting-box .filter.selected-filter::after { opacity: 1; } .raiting-box .filter img { display: inline-block; width: 16px; height: 15px; vertical-align: text-bottom; margin-bottom: 1px; } .raiting-box .show-more-container { color: #09d166; cursor: pointer; margin-left: 5px; } .raiting-box .raiting-list .raiting-item { margin-bottom: 3px; padding: 5px 0; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; } .raiting-box .raiting-list .raiting-item:last-child { margin-bottom: 0; } .health-topics-box .title { color: #000; font-size: 16px; font-weight: 700; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .health-topics-box form { display: -ms-flexbox; display: flex; margin-bottom: 10px; } .health-topics-box .checkbox-filter { width: 13px; height: 13px; padding: 0; margin: 0 4px 1px 0; cursor: pointer; vertical-align: text-bottom; opacity: 0; display: none; } .health-topics-box .checkbox-filter:checked + .filter { color: #09d166; font-weight: 500; } .health-topics-box .checkbox-filter:checked + .filter::after { opacity: 1; } .health-topics-box .checkbox-filter:checked + .filter::before { background: #09d166; border-color: #09d166; box-shadow: 0 2px 8px rgba(9, 209, 102, 0.3); } .health-topics-box .checkbox-filter:checked + .filter .val { background: rgba(9, 209, 102, 0.15); color: #09d166; } .health-topics-box .filter { cursor: pointer; padding: 8px 12px 8px 40px; position: relative; display: flex; align-items: center; width: 100%; font-size: 14px; color: #4a4a4a; transition: color 0.2s ease, background-size 0.3s ease; border-radius: 8px; background: linear-gradient( 90deg, rgba(9, 209, 102, 0.1) 0%, rgba(9, 209, 102, 0.1) 100% ) no-repeat left; background-size: 0% 100%; } .health-topics-box .filter:hover { color: #292b35; background-size: 100% 100%; } .health-topics-box .raiting-name .filter { align-items: center; } .health-topics-box .filter::before { content: ""; width: 18px; height: 18px; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #fff; transition: all 0.2s ease; border-radius: 5px; border: 1.5px solid #d4d4d6; } .health-topics-box .filter:hover::before { border-color: #09d166; } .health-topics-box .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 50%; left: 17px; transform: translateY(-60%) rotate(-45deg); border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transition: opacity 0.2s ease; } .health-topics-box .filter-inner { display: flex; align-items: center; flex-shrink: 1; flex-grow: 1; gap: 8px; } .health-topics-box .filter .icon { width: 20px; height: 20px; flex-shrink: 0; flex-grow: 0; display: flex; align-items: center; justify-content: center; } .health-topics-box .filter .icon img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(56%) sepia(89%) saturate(487%) hue-rotate(106deg) brightness(96%) contrast(93%); transition: transform 0.2s ease; } .health-topics-box .filter:hover .icon img { transform: scale(1.1); } .health-topics-box .filter .val { flex-shrink: 0; flex-grow: 0; padding: 4px 8px; font-size: 11px; line-height: 1; color: #888; background: #f4f4f4; border-radius: 12px; font-weight: 500; transition: all 0.2s ease; } .list-item-text { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 1.3; -webkit-user-select: none; user-select: none; font-size: 13px; } .health-topics-box .filter.selected-filter { color: #09d166; } .health-topics-box .filter.selected-filter::after { opacity: 1; } .health-topics-box .health-topics-list .health-topics-item, .health-topics-box .health-topics-list .list-item, .health-topics-box .raiting-item { margin-bottom: 2px; display: flex; align-items: center; line-height: 1.4; transition: all 0.2s ease; cursor: pointer; position: relative; border-radius: 8px; } .health-topics-box .raiting-item .raiting-name { width: 100%; } .health-topics-list-wrap { position: relative; max-height: 430px; margin: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .health-topics-list-wrap.v-scroll:after, .health-topics-list-wrap.v-scroll:before, .health-topics-list-wrap.bottom-shadow:after, .health-topics-list-wrap.top-shadow:before { display: none; } .health-topics-list { max-height: inherit; overflow: hidden; overflow-y: auto; scrollbar-color: rgba(9, 209, 102, 0.3) transparent; scrollbar-width: thin; padding: 10px 5px 10px 0; } .health-topics-list::-webkit-scrollbar { width: 5px; } .health-topics-list::-webkit-scrollbar-track { background-color: transparent; border-radius: 3px; } .health-topics-list::-webkit-scrollbar-thumb { background-color: rgba(9, 209, 102, 0.3); border-radius: 3px; transition: background-color 0.2s ease; } .health-topics-list::-webkit-scrollbar-thumb:hover { background-color: rgba(9, 209, 102, 0.5); } .health-topics-list.active { max-height: 100%; } .health-topics-box .health-topics-list .health-topics-item { margin-bottom: 2px; display: flex; align-items: center; max-width: 100%; width: 100%; line-height: 1.4; cursor: pointer; position: relative; } .health-topics-box .health-topics-list .health-topics-item:last-child { margin-bottom: 0; } .health-topics-box .no-results { padding: 20px 14px; font-size: 13px; color: #999; text-align: center; margin: 0; background: rgba(9, 209, 102, 0.04); border-radius: 8px; border: 1px dashed rgba(9, 209, 102, 0.2); } .list-empty, .health-topics-box .health-topics-list .list-empty, .health-topics-box .collections-sidebar .list-empty, .supplements-sidebar .list-empty, .categories-sidebar .list-empty { padding: 14px 12px; font-size: 13px; color: #999; text-align: left; list-style: none; cursor: default; pointer-events: none; background: none !important; background-size: 0 !important; } .no-results-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 20px; } .no-results-wrap .no-results { font-size: 18px; font-weight: 600; color: #888; margin: 0; } .no-results-wrap .filter-apply-btn { font-size: 14px; padding: 10px 24px; } /* Supplements sidebar — match health-topics-box style */ .supplements-sidebar { min-height: 220px; max-height: 220px; overflow-y: auto; scrollbar-color: rgba(9, 209, 102, 0.3) transparent; scrollbar-width: thin; padding: 10px 5px 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 12px; } .supplements-sidebar::-webkit-scrollbar { width: 5px; } .supplements-sidebar::-webkit-scrollbar-track { background-color: transparent; border-radius: 3px; } .supplements-sidebar::-webkit-scrollbar-thumb { background-color: rgba(9, 209, 102, 0.3); border-radius: 3px; } .supplements-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(9, 209, 102, 0.5); } .supplements-sidebar .list-item { margin: 0 0 2px 0; padding: 0; max-width: 100%; width: 100%; border-radius: 8px; } .supplements-sidebar .filter { cursor: pointer; padding: 8px 12px 8px 40px; position: relative; display: flex; align-items: center; width: 100%; font-size: 14px; color: #4a4a4a; line-height: 1.4; transition: color 0.2s ease, background-size 0.3s ease; border-radius: 8px; background: linear-gradient(90deg, rgba(9, 209, 102, 0.1) 0%, rgba(9, 209, 102, 0.1) 100%) no-repeat left; background-size: 0% 100%; } .supplements-sidebar .filter:hover { color: #292b35; background-size: 100% 100%; } .supplements-sidebar .filter::before { content: ""; width: 18px; height: 18px; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #fff; transition: all 0.2s ease; border-radius: 5px; border: 1.5px solid #d4d4d6; } .supplements-sidebar .filter:hover::before { border-color: #09d166; } .supplements-sidebar .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 50%; left: 17px; transform: translateY(-60%) rotate(-45deg); border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transition: opacity 0.2s ease; } .supplements-sidebar .checkbox-filter:checked + .filter { color: #09d166; font-weight: 500; } .supplements-sidebar .checkbox-filter:checked + .filter::before { background: #09d166; border-color: #09d166; box-shadow: 0 2px 8px rgba(9, 209, 102, 0.3); } .supplements-sidebar .checkbox-filter:checked + .filter::after { opacity: 1; } .supplements-sidebar .list-item-text { max-width: 100%; font-size: 14px; } /* Collections sidebar */ .collections-sidebar { min-height: 220px; max-height: 220px; overflow-y: auto; scrollbar-color: rgba(9, 209, 102, 0.3) transparent; scrollbar-width: thin; padding: 10px 5px 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 12px; display: flex; flex-direction: column; } .collections-sidebar::-webkit-scrollbar { width: 5px; } .collections-sidebar::-webkit-scrollbar-track { background-color: transparent; border-radius: 3px; } .collections-sidebar::-webkit-scrollbar-thumb { background-color: rgba(9, 209, 102, 0.3); border-radius: 3px; } .collections-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(9, 209, 102, 0.5); } .health-topics-box .collections-sidebar .health-topics-item, .collections-sidebar .health-topics-item { margin: 0 0 2px 0; padding: 0; min-height: auto; max-width: 100%; width: 100%; border-radius: 8px; } .health-topics-box .collections-sidebar .filter, .collections-sidebar .filter { cursor: pointer; padding: 8px 12px 8px 40px; position: relative; display: flex; align-items: center; width: 100%; font-size: 14px; color: #4a4a4a; line-height: 1.4; transition: color 0.2s ease, background-size 0.3s ease; border-radius: 8px; background: linear-gradient(90deg, rgba(9, 209, 102, 0.1) 0%, rgba(9, 209, 102, 0.1) 100%) no-repeat left; background-size: 0% 100%; } .health-topics-box .collections-sidebar .filter:hover, .collections-sidebar .filter:hover { color: #292b35; background-size: 100% 100%; } .health-topics-box .collections-sidebar .filter::before, .collections-sidebar .filter::before { content: ""; width: 18px; height: 18px; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #fff; transition: all 0.2s ease; border-radius: 5px; border: 1.5px solid #d4d4d6; } .health-topics-box .collections-sidebar .filter:hover::before, .collections-sidebar .filter:hover::before { border-color: #09d166; } .health-topics-box .collections-sidebar .filter::after, .collections-sidebar .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 50%; left: 17px; transform: translateY(-60%) rotate(-45deg); border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transition: opacity 0.2s ease; } .health-topics-box .collections-sidebar .checkbox-filter:checked + .filter, .collections-sidebar .checkbox-filter:checked + .filter { color: #09d166; font-weight: 500; } .collections-sidebar .checkbox-filter:checked + .filter::before { background: #09d166; border-color: #09d166; box-shadow: 0 2px 8px rgba(9, 209, 102, 0.3); } .collections-sidebar .checkbox-filter:checked + .filter::after { opacity: 1; } .collections-sidebar .list-item-text { max-width: 100%; font-size: 14px; } /* Categories sidebar — same style as supplements-sidebar */ .categories-sidebar { min-height: 220px; max-height: 220px; overflow-y: auto; scrollbar-color: rgba(9, 209, 102, 0.3) transparent; scrollbar-width: thin; padding: 10px 5px 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 12px; } .categories-sidebar::-webkit-scrollbar { width: 5px; } .categories-sidebar::-webkit-scrollbar-track { background-color: transparent; border-radius: 3px; } .categories-sidebar::-webkit-scrollbar-thumb { background-color: rgba(9, 209, 102, 0.3); border-radius: 3px; } .categories-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(9, 209, 102, 0.5); } .categories-sidebar .list-item { margin: 0 0 2px 0; padding: 0; max-width: 100%; width: 100%; border-radius: 8px; } .categories-sidebar .filter { cursor: pointer; padding: 8px 12px 8px 40px; position: relative; display: flex; align-items: center; width: 100%; font-size: 14px; color: #4a4a4a; line-height: 1.4; transition: color 0.2s ease, background-size 0.3s ease; border-radius: 8px; background: linear-gradient(90deg, rgba(9, 209, 102, 0.1) 0%, rgba(9, 209, 102, 0.1) 100%) no-repeat left; background-size: 0% 100%; } .categories-sidebar .filter:hover { color: #292b35; background-size: 100% 100%; } .categories-sidebar .filter::before { content: ""; width: 18px; height: 18px; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: #fff; transition: all 0.2s ease; border-radius: 5px; border: 1.5px solid #d4d4d6; } .categories-sidebar .filter:hover::before { border-color: #09d166; } .categories-sidebar .filter::after { content: ""; width: 9px; height: 5px; position: absolute; top: 50%; left: 17px; transform: translateY(-60%) rotate(-45deg); border: 2px solid #fff; border-top: none; border-right: none; background: 0 0; opacity: 0; transition: opacity 0.2s ease; } .categories-sidebar .checkbox-filter:checked + .filter { color: #09d166; font-weight: 500; } .categories-sidebar .checkbox-filter:checked + .filter::before { background: #09d166; border-color: #09d166; box-shadow: 0 2px 8px rgba(9, 209, 102, 0.3); } .categories-sidebar .checkbox-filter:checked + .filter::after { opacity: 1; } .categories-sidebar .list-item-text { max-width: 100%; font-size: 14px; } /* Filter apply button */ .filter-apply-wrap { margin-top: 10px; } .filter-apply-wrap { padding-left: 14px; padding-right: 14px; } .filter-apply-btn { width: stretch; padding: 10px 16px; cursor: pointer; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; background: linear-gradient(135deg, #09d166 0%, #07b858 100%); background-size: 200% 200%; background-position: 0% 50%; position: relative; overflow: hidden; transition: background-position 0.4s ease; } .filter-apply-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; } .filter-apply-btn:hover { background-position: 100% 50%; } .filter-apply-btn:hover::before { left: 100%; } .filter-reset-wrap { margin-top: 8px; padding-left: 14px; padding-right: 14px; } .filter-reset-btn { width: stretch; padding: 10px 16px; cursor: pointer; border: none; border-radius: 8px; background: #8bb8a0; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; transition: background 0.25s ease; } .filter-reset-btn:hover { background: #72a589; } /* Brands search box */ .brands-search-box { position: relative; display: flex; align-items: center; height: 48px; background: #f6f6f6; border-radius: 12px; border: 2px solid transparent; margin-bottom: 24px; transition: border-color 0.3s ease; z-index: 2; } .brands-search-box::before { content: ""; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 14px; padding: 3px; background: conic-gradient( from var(--btn-border-angle), #09d166, #00e5ff, #76ff03, #09d166 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .brands-search-box:hover::before, .brands-search-box:focus-within::before { opacity: 1; animation: rotate-btn-border 2s linear infinite; } .brands-search-box:focus-within { border-color: transparent; } /* Brands search — icon animation (search ↔ arrow) */ .brands-search-box .input-box__ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; filter: brightness(0); opacity: 0.5; pointer-events: none; transition: opacity 0.3s; } .brands-search-box:focus-within .input-box__ico { opacity: 0.8; } .brands-search-box .input-box__ico img { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; object-fit: contain; transition: opacity 0.3s ease, transform 0.3s ease; } .brands-search-box .input-box__ico .ico-search { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } .brands-search-box .input-box__ico .ico-arrow { transform: translate(-50%, -50%) scale(0.5) rotate(-90deg); opacity: 0; } .brands-search-box:focus-within .input-box__ico .ico-search { transform: translate(-50%, -50%) scale(0.5) rotate(90deg); opacity: 0; } .brands-search-box:focus-within .input-box__ico .ico-arrow { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } .brands-search-box__input { flex: 1; height: 100%; padding: 0 96px 0 48px; border: none; background: transparent; font-size: 15px; color: #1b1d25; outline: none; } .brands-search-box__input::placeholder { color: #888; } .brands-search-box__actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; } .brands-search-box__clear { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #999; border-radius: 50%; transition: color 0.2s, background-color 0.2s; opacity: 0; pointer-events: none; } .brands-search-box__clear.visible { opacity: 1; pointer-events: auto; } .brands-search-box__clear:hover { color: #333; background-color: #e8e8e8; } .brands-search-box__submit { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #09d166; border: none; border-radius: 8px; cursor: pointer; color: #fff; transition: background-color 0.2s; } .brands-search-box__submit:hover { background-color: #07b858; } .brands-search-box__submit--disabled { background: #e0e0e0; color: #aaa; cursor: default; pointer-events: none; } .search-page .search-list__item { box-shadow: inset 0 0 0 1px rgba(9, 209, 102, 0.4); } .filter-name { display: inline-block; float: left; padding-left: 2px; } .section-drawer { display: none; } .drawer-btn-holder { display: flex; justify-content: center; align-items: center; } .drawer-btn { display: flex; align-items: center; padding: 15px; color: #949494; font-weight: 400; } .drawer-btn img { width: 22px; height: 24px; } .drawer-btn .lazy-parent { margin-right: 5px; } .drawer-btn:focus { outline: none; } .drawer-btn svg { fill: #00d66a; } .icon-drawer { width: 20px; height: 20px; } .cut-text { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .headline__title .product-sup { font-size: 14px; margin-left: 5px; font-weight: bold; padding-top: 3px; } .headline__title .sup-text { text-transform: none; display: flex; flex-wrap: wrap; flex-shrink: 0; padding-top: 4px; } .row-sup { display: flex; flex-direction: column; } @media (min-width: 320px) { .row-sup .product-tags { width: auto; margin: 0 0 5px 5px; } } .row-sup .product-tags { padding: 0; } .headline__title .sup-wrap { display: flex; } .headline__title .sup-wrap .icon_cat { margin-top: 4px; } .headline__title .company-title { font-size: 13px; } .brand-productsContainer { flex-grow: 1; flex-shrink: 1; min-width: 1px; } .icon_cat { flex-shrink: 0; flex-grow: 0; } .btn_show_more_supp { color: #09d166; background: #fff; border-color: #fff; font-size: 13px; line-height: 1; height: 40px; padding: 0 25px; transition: 0.3s; } .block-sources { color: #fff; } .block-sources .list-sources { /* max-height: 100px; */ overflow: hidden; max-height: 0; transition: max-height 0.75s ease-in-out; scrollbar-color: #cbcbcb transparent; scrollbar-width: thin; } .block-sources .list-sources::-webkit-scrollbar { width: 6px; } .block-sources .list-sources::-webkit-scrollbar-thumb { background-color: #cbcbcb; border-radius: 3px; } .block-sources .block-list-sources { background: #fff; padding: 20px; border-radius: 20px; margin-bottom: 20px; } .block-sources .block-list-sources.height .btn { display: none; } .block-sources .block-list-sources.height .list-sources { max-height: initial; } .block-sources .block-list-sources .btn { line-height: 20px; border-color: #09d166; color: #09d166; cursor: pointer; } .block-sources .block-list-sources .btn:hover { background: #09d166; color: #fff; } .block-sources .list-sources .item p { color: #000; font-size: 13px; font-weight: 400; letter-spacing: 0.65px; margin-bottom: 12px; } .block-sources .list-sources .item a { display: inline-flex; color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing: 0.65px; } .block-sources .list-sources .item a .icon:before { transition: 0.3s; content: ""; display: block; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); } .block-sources .list-sources .item a:hover, .block-sources .list-sources .item a:hover .icon:before { color: #000000 !important; } .block-sources .list-sources .item a .icon { display: inline-block; margin-left: 8px; font-size: 8px; width: auto; line-height: 7px; height: 12px; } .block-sources .list-sources .item .row { display: flex; justify-content: space-between; border-bottom: 1px solid #e9e9e9; padding-bottom: 15px; } .block-sources .list-sources .item:last-child .row { border-bottom: none; } .block-sources .list-sources .item { padding-bottom: 15px; } .block-sources .list-sources .date-block { display: flex; } .block-sources .list-sources .date-block .icon { background: url(../img/icons/calendar.svg); background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; display: block; flex-shrink: 0; margin-right: 7px; } .block-sources .list-sources .date-block span { color: #b7b8b7; font-size: 13px; } .block-sources .list-sources .date-block strong { color: #000; font-size: 13px; } .block-sources .list-sources .item a .text { transition: 0.3s; color: #09d166; text-transform: uppercase; font-size: 13px; max-width: 215px; overflow: hidden; text-overflow: ellipsis; display: block; } .block-sources .source-title { color: inherit; font-size: 22px; font-weight: 700; letter-spacing: 0.75px; display: flex; align-items: center; margin-bottom: 15px; } .btn_show_more_coll, .btn_show_tags { color: #09d166; background: #fff; font-size: 18px; line-height: 1; height: 42px; padding: 0 25px; } .populars .btn_show_more_coll { background-color: #fff; color: #000; border: none; } .populars .btn_show_tags { color: #fff; background: #09d166; } .btn_show_more_coll, .btn_show_tags { color: #ffffff; background: #09d166; } .btn_show_tags { display: none; } .rating-list-inner { display: flex; align-items: center; } table.table-related { width: 100%; border-collapse: collapse; border: 2px solid #f9f9f9; } .table-related .box-img { max-width: 120px; width: 100%; } .table-related strong { font-weight: 600; } .table-related td { padding: 22px 30px; } .table-related tr:nth-child(2n + 1) td { background: #f9f9f9; } .table-related th { padding: 22px 30px; } .table-related th div { padding-bottom: 12px; } .table-related .title { font-weight: 300; } .table-related .positive { color: #00d66a; padding-left: 30px; position: relative; font-weight: 300; } .table-related .positive::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translate3d(0, -50%, 0) rotate(-135deg); border: solid #00d66a; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .table-related .negative { color: #d94646; padding-left: 30px; position: relative; font-weight: 300; } .table-related .negative::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translate3d(0, -50%, 0) rotate(45deg); border: solid #d94646; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .table-wrapper { overflow-x: scroll; } .product-compare-wrap { margin-top: 50px; } .product-compare-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; box-shadow: 0 3px 5px 1px #f1f1f1; height: 100%; } .product-compare-wrap table tbody { height: 100%; } .product-compare-wrap .block-btn { margin-top: 30px; } .product-compare-wrap .block-btn .btn { width: max-content; max-width: 200px; margin: 0 auto; padding: 15px 28px; line-height: normal; cursor: pointer; } .product-compare-wrap table .other-fildes { display: none; } .product-compare-wrap table .price-block.hide { display: none; } .product-compare-wrap table strong { font-weight: bold; } .product-compare-wrap table th { padding: 0 20px; display: table-cell; height: 100%; } .product-compare-wrap table th .number { width: 50px; height: 50px; border-radius: 100%; font-size: 24px; background: #f6f6f6; display: flex; margin: 0 auto 20px; align-items: center; justify-content: center; } .product-compare-wrap table th .number-achiev .number { overflow: hidden; width: 50px; height: 50px; background: #0dd166; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; margin: 0; font-weight: 700; border-radius: 100%; position: relative; z-index: 2; } .product-compare-wrap table th .number-achiev { position: relative; width: 50px; margin: 0 auto 20px; height: 50px; } .product-compare-wrap table th .number-achiev .number:before { content: ""; background: #17c358; display: block; position: absolute; right: 0; top: 0; width: 50%; height: 100%; z-index: -1; } .product-compare-wrap table th .number-achiev:before, .product-compare-wrap table th .number-achiev:after { content: ""; display: block; width: 16px; height: 20px; position: absolute; bottom: -10px; background-repeat: no-repeat; background-size: cover; background-image: url(../img/icons/rank-flag.svg); } .product-compare-wrap table th .number-achiev:before { left: 0; transform: rotate(35deg) translateX(-2px); } .product-compare-wrap table th .number-achiev:after { right: 0; transform: rotate(-35deg) translateX(2px); } .product-compare-wrap table th a { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .product-compare-wrap table th a .head-info { display: block; flex-shrink: 1; flex-grow: 1; min-height: 1px; } .product-compare-wrap table th .name { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .product-compare-wrap table th .by { font-size: 14px; margin-bottom: 10px; display: block; } .product-compare-wrap table td { padding: 16px 46px; text-align: center; position: relative; } .product-compare-wrap table td .better { color: #09d166; white-space: nowrap; right: 14px; top: 50%; transform: translate3d(0, -50%, 0); } .product-compare-wrap table td .worse { color: red; white-space: nowrap; right: 14px; top: 50%; transform: translate3d(0, -50%, 0); } .product-compare-wrap table td i { border: solid #09d166; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; margin-right: 5px; } .product-compare-wrap table td .better i.arrow-up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .product-compare-wrap table td i.arrow-down { transform: rotate(45deg) translate3d(0, -3px, 0); -webkit-transform: rotate(45deg) translate3d(0, -3px, 0); border-color: red; } .product-compare-wrap table td span.gray { font-style: italic; color: #c9c9c9; } .product-compare-wrap table tr td:first-child { text-align: left; } .product-compare-wrap table tr:nth-child(2n + 1) td { background: #f9f9f9; } .product-compare-wrap table tr:nth-child(2n + 1) td:nth-child(2) { background: #efefef; } .product-compare-wrap table tr:nth-child(2n + 2) td:nth-child(2) { background: #f3f3f3; } .product-compare-wrap table .img-wrap { display: flex; justify-content: center; flex-shrink: 0; flex-grow: 0; min-height: 1px; align-items: center; height: 250px; max-width: 210px; width: 100%; margin: 0 auto; position: relative; } .product-compare-wrap table .img-wrap .product-info__box { position: absolute; right: -12px; top: 61%; transform: translateY(-50%); z-index: 2; padding: 0; } .product-compare-wrap table .img-wrap .product-info__title_top { font-size: 7px; padding: 16px 2px 20px; border-radius: 10px 10px 0 0; } .product-compare-wrap table .img-wrap .circle { width: 60px; height: 60px; background: #fff; overflow: hidden; border-radius: 100%; } .product-compare-wrap table .img-wrap .product-info__box { margin: 0; } .product-compare-wrap table .img-wrap .circle__value { font-size: 14px; } .product-compare-wrap table .img-wrap .product-info__title_bg { left: 50%; top: -40px; transform: translateX(-50%); width: 50px; } .product-compare-wrap .footnote { margin-top: 30px; font-style: italic; font-size: 12px; line-height: 1.3; } .product-vitamin .product-compare-wrap .footnote { margin-top: 20px; line-height: 14px; color: #767676; width: 50%; margin-left: auto; } .img-placeholder-sm { width: 150px; height: 150px; } .product-slider .swiper-container.swiper-container-vertical, .product-slider .swiper-container.swiper-container-horizontal { display: flex; opacity: 1; visibility: visible; } .product-slider .gallery-top .swiper-slide { /*max-height: 400px;*/ transition: 0.3s; } .product-slider .swiper-container { opacity: 0; transition: 0.3s; } .product-slider .swiper-container.swiper-container-vertical { opacity: 1; } .product-slider .swiper-container .wrap-img { width: 100%; } .product-slider .swiper-container .wrap-img:before { background-image: url(../img/icons/all-supplement.svg); width: 168px; height: 230px; } .all-product-supplements { padding: 45px 0 0; } .all-product-supplements .populars-text p { color: inherit; } .all-product-supplements .populars-text { margin-bottom: 15px; color: inherit; } .all-product-supplements .headline__title { letter-spacing: 1.4px; color: inherit; } .all-product-supplements .flex { display: flex; } .all-product-supplements.no-aside .products-list__item { width: calc(25% - 20px); } .all-product-supplements.no-aside .sidebar-products { display: none; } /*.sidebar-products .popular-list__item .populars-item__info.open .populars-tooltip {*/ /*top: 42px;*/ /*left: 50%;*/ /*max-width: 100%;*/ /*}*/ .sidebar-products .popular-list__item.open .populars-tooltip { top: 42px; left: 50%; max-width: 100%; } .sidebar-products .populars_supplements .popular-list__item .popular-list__box.box-name, .sidebar-products .populars .popular-list__item .popular-list__box.box-name { justify-content: space-between; width: calc(100% - 45px); } .sidebar-products .populars-tooltip:before { left: 53.5%; } .all-product-supplements.no-aside .content { width: 100%; } .all-product-supplements .content { width: calc(100% - 430px); } .all-product-supplements .sidebar-products { margin-left: 30px; width: 400px; } .all-product-supplements .sidebar-products .block-more { margin-top: 20px; } .all-product-supplements .sidebar-products .block-btn { margin-bottom: 40px; } .all-product-supplements .sidebar-products .block-btn .btn { display: flex; align-items: center; } .all-product-supplements .sidebar-products .block-btn .btn .icon { line-height: 12px; margin-left: 8px; font-size: 12px; } .all-product-supplements .sidebar-products .populars { color: #ffffff; padding: 30px; position: relative; } .all-product-supplements .sidebar-products .headline { position: relative; z-index: 2; } .all-product-supplements .sidebar-products .populars .block-background { background: #09d166; border-radius: 10px; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .all-product-supplements .sidebar-products .populars .bg { background-repeat: no-repeat; background-size: cover; background-position: center; width: 400px; height: 482px; position: absolute; right: 0; bottom: 0; z-index: 1; } .all-product-supplements .sidebar-products .populars .bg svg { width: 100%; height: 100%; } .all-product-supplements .sidebar-products .side-wrap { position: relative; z-index: 2; } .all-product-supplements .sidebar-products .side-wrap .popular-list { margin-bottom: 20px; } .btn.white { background: #fff; border-color: #fff; height: 40px; } .btn.white:hover { background: #09d166; color: #fff; } .all-product-supplements .products-list { display: flex; flex-wrap: wrap; margin: 0 -10px; } .all-product-supplements .products-list__item { margin: 0 10px 35px; width: calc(33.33% - 20px); } .all-product-supplements .products-list__item .products-list__box:first-child { margin-right: 0; flex-shrink: initial; flex-grow: initial; flex-direction: column; position: static; } .all-product-supplements .products-list__item .products-list__box { width: 100%; } .wrap-chart { background: #fff; border-radius: 10px; padding: 6px 10px 10px; } .wrap-chart #myChart { margin-top: -25px; } .wrap-chart-txt { color: #000; padding: 5px 0 0; font-weight: 700; display: block; text-align: right; } .all-products .products-list__text .products-list__subtitle { line-height: 14px; letter-spacing: 0.65px; } .all-products .products-list__number { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } .brands-slider .brads-list { display: none; } .d-none { display: none !important; } .back-to-top { position: fixed; bottom: 40px; right: -100px; z-index: 1000; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2); cursor: pointer; border: 2px solid #09d166; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #09d166; transition: all 0.2s linear; } .back-to-top:before { content: ""; display: block; width: 20px; height: 11px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("../img/icons/arrow-up.svg"); } .back-to-top.show { right: 15px; } .back-to-top:before { transform: rotate(180deg); margin-top: -3px; } /*Products slider for supplements single page START*/ .products-slider { position: relative; margin: 0 -25px; } .products-slider .swiper-container { height: auto; padding: 0 25px 40px; opacity: 0; transition: 0.3s; max-height: 0; min-height: 600px; } .products-slider .swiper-container.swiper-container-initialized { opacity: 1; max-height: 9999px; } .products-slider .swiper-container + .icon-arrow { display: none; } .products-slider .swiper-container + .icon-arrow + .icon-arrow { display: none; } .products-slider .swiper-container.swiper-container-initialized + .icon-arrow { display: flex; } .products-slider .swiper-container.swiper-container-initialized + .icon-arrow + .icon-arrow { display: flex; } .products-slider .swiper-container .swiper-wrapper { display: none; } .products-slider .swiper-container.swiper-container-initialized .swiper-wrapper { display: flex; } .products-slider .swiper-slide { height: auto; } .products-slider .product-card { width: 100%; margin: 0; height: 100%; } .products-slider .product-card:hover { border-color: rgba(9, 209, 102, 0.65); box-shadow: 0 5px 20px rgba(9, 209, 102, 0.2); } .products-slider .swiper-button-prev, .products-slider .swiper-button-next { position: absolute; border: none; outline: none; 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; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .products-slider .swiper-button-prev { left: -40px; } .products-slider .swiper-button-next { right: -40px; } .products-slider .swiper-button-prev:hover, .products-slider .swiper-button-next:hover { background-color: rgba(0, 0, 0, 0.14); color: #fff; } .products-slider .swiper-pagination { position: relative; margin-top: -10px; } .products-slider .swiper-pagination-bullet { margin: 0 4px; width: 10px; height: 10px; opacity: 1; background-color: transparent; border: 1px solid #ced0da; } .products-slider .swiper-pagination-bullet-active { background-color: #09d166; border-color: #09d166; } /*Products slider for supplements single page END*/ @supports (-webkit-touch-callout: none) { .header .menu { padding-bottom: 110px !important; } } .author-block .social { display: flex; align-items: center; margin-top: 17px; } .author-block .social-link { display: block; } .author-block .social-link:not(:last-child) { margin-right: 20px; } .author-block .social-link .img { width: 20px; height: 20px; margin: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .author-block .social-link img { transition: all 0.3s ease-in-out; filter: brightness(0) invert(0); } .share-wrap { position: relative; } .share-drop { position: absolute; top: 100%; left: 10px; width: 418px; background-color: #fff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 20px; z-index: -1; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; transform: translateY(-10px); } .share-drop.open { transform: translateY(0); opacity: 1; visibility: visible; z-index: 5; } .share-drop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .share-drop__title { font-size: 12px; line-height: 14px; text-align: center; text-transform: uppercase; color: #747373; } .share-drop__close { position: relative; width: 12px; height: 12px; cursor: pointer; } .share-drop__close:before, .share-drop__close:after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #000; transition: all 0.3s ease-in-out; } .share-drop__close:before { transform: translateY(-50%) rotate(45deg); } .share-drop__close:after { transform: translateY(-50%) rotate(-45deg); } .share-drop__body { display: flex; align-items: center; margin-bottom: 20px; } .share-drop__list { display: flex; align-items: center; margin-left: 25px; } .share-drop__item { display: block; text-align: center; color: #767676; } .share-drop__item:not(:last-child) { margin-right: 25px; } .share-drop__item-icon { width: 50px; height: 50px; position: relative; margin: 0 auto 10px; } .share-drop__item-name { font-size: 12px; line-height: 14px; white-space: nowrap; } .share-drop__box { position: relative; } .share-drop__box .input { height: 46px; padding: 0 85px 0 15px; color: #000; border-color: #d4d4d6; font-weight: 500; text-overflow: ellipsis; } .share-drop__btn { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); line-height: 22.5px; padding: 4px 18px; color: #747373; text-transform: capitalize; background: #f0f6f3; border-color: #0dcb5b; border-width: 1px; } .disclaimer { background: rgb(255, 246, 246); border-radius: 10px; padding: 20px 20px 20px 54px; } .block-aside .disclaimer.show .row p { display: block; } .block-aside .disclaimer.show .link::after { transform: rotate(270deg); } .disclaimer-title { font-weight: 700; font-size: 18px; position: relative; margin-bottom: 10px; } .disclaimer-title::before { content: ""; position: absolute; top: 0; left: -30px; background-image: url(../img/icons/warning.svg); width: 20px; height: 20px; } .disclaimer .row { margin: 0 0 10px; } .disclaimer .row p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .disclaimer.show .row p { display: block; } .block-aside .disclaimer .row p { font-size: 13px; line-height: 20px; color: #4f4f4f; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .disclaimer .link { font-size: 14px; line-height: 16px; color: rgb(225, 98, 98); position: relative; display: inline-flex; align-items: center; } .disclaimer .link::after { content: ""; display: inline-flex; width: 16px; height: 16px; background-size: cover; background-image: url(../img/icons/arrow-link.svg); filter: invert(61%) sepia(100%) saturate(1874%) hue-rotate(318deg) brightness(92%) contrast(90%); margin-left: 10px; transition: all 0.3s ease 0s; background-repeat: no-repeat; background-position: center center; } .disclaimer .link-more::after { margin-left: 5px; width: 14px; height: 14px; transform: rotate(90deg); } .block-aside.block-text .subtitle { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; margin-bottom: 10px; } .block-aside.block-text .caption { font-weight: 700; font-size: 24px; line-height: 36px; margin-bottom: 10px; } .block-aside.block-text p { font-size: 14px; line-height: 21px; color: #4f4f4f; } .block-aside__search { position: relative; } .v-scroll:before { content: ""; left: 0; top: 0; width: calc(100% - 1px); height: 40px; position: absolute; pointer-events: none; opacity: 0; z-index: -1; will-change: transform; transition: all 0.3s; background: linear-gradient( to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .v-scroll:after { content: ""; left: 0; bottom: 0; width: calc(100% - 1px); height: 40px; position: absolute; pointer-events: none; opacity: 0; z-index: -1; will-change: transform; transition: all 0.3s; background: linear-gradient( to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .bottom-shadow:after, .right-shadow:after { opacity: 1; z-index: 5; } .left-shadow:before, .top-shadow:before { opacity: 1; z-index: 5; } .product-head { display: flex; justify-content: space-between; align-items: flex-start; margin: 30px 0 50px; } .product-head-left { max-width: 550px; margin-right: 20px; } .product-head .subtitle { font-weight: 700; text-transform: uppercase; color: #0dcb5b; line-height: 1; font-size: 13px; margin-bottom: 10px; } .product-head .title { font-size: 24px; font-weight: 700; line-height: 36px; margin-bottom: 10px; color: #000; text-transform: inherit; } .product-head p { font-size: 14px; line-height: 21px; color: #4f4f4f; } .product-head p a { color: #0dcb5b; } .product-head-info { max-width: 500px; width: 100%; margin-left: auto; background: #f0f6f3; border-radius: 10px; padding: 20px 20px 20px 52px; } .product-head-info.mobile { max-width: 100%; margin: 0; display: none; } .product-head-info.light { background: #fdfdfd; } .product-head-info-title { font-weight: 700; font-size: 18px; position: relative; margin-bottom: 10px; } .product-head-info-title svg { fill: #0bcb5b; stroke: #0bcb5b; position: absolute; width: 18px; height: 20px; top: 0; left: -28px; } .daily .product-head-info-title svg { width: 20px; } .product-head-info-text { font-weight: 400; font-size: 14px; color: #4f4f4f; margin-bottom: 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .product-head-info-link { font-size: 14px; line-height: 16px; color: #0dcb5b; display: inline-flex; align-items: center; } .product-head-info-link:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); margin-left: 10px; } .app-method { position: absolute; top: 10px; right: 0; z-index: 3; } .app-method.top { top: 0; } .app-method.left { left: -10px; right: auto; } .app-method.small .app-method-btn { width: 40px; height: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .app-method.small .app-method-btn:not(:last-child) { margin-bottom: 5px; } .app-method.small .app-method-tooltip { width: 180px; left: calc(100% + 10px); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .app-method.small .app-method-title:before { width: 16px; height: 16px; left: -21px; } .app-method.small .app-method-descr { margin-bottom: 10px; display: block; } .app-method.small .app-method-text { display: block; } .app-method-btn { width: 50px; height: 50px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .app-method-btn:not(:last-child) { margin-bottom: 10px; } .app-method-btn--blue { background-color: #dff2ff; } .app-method-btn--yellow { background-color: #fff6d5; } .app-method-tooltip { position: absolute; top: 0; left: calc(100% + 20px); width: 280px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding: 10px 10px 10px 14px; transition: all 0.3s ease-in-out; transform: translateX(-10px); opacity: 0; visibility: hidden; text-align: left; } .app-method-tooltip:before { content: ""; position: absolute; top: 20px; left: -13px; border: 6px solid transparent; } .app-method-btn--blue .app-method-tooltip { background-color: #dff2ff; } .app-method-btn--blue .app-method-tooltip:before { border-right: 10px solid #dff2ff; } .app-method-btn--yellow .app-method-tooltip { background-color: #fff6d5; } .app-method-btn--yellow .app-method-tooltip:before { border-right: 10px solid #fff6d5; } .app-method-headbox { display: flex; align-items: center; margin-bottom: 5px; } .app-method-headbox svg { flex-shrink: 0; flex-grow: 0; margin-right: 10px; } .app-method-title { font-size: 16px; font-weight: 800; line-height: 1; display: block; flex-shrink: 1; flex-grow: 1; } .app-method-btn--blue .app-method-headbox svg { stroke: #6285b5; } .app-method-btn--yellow .app-method-headbox svg { stroke: #cbab34; } .app-method-btn--blue .app-method-title { color: #6285b5; } .app-method-btn--yellow .app-method-title { color: #cbab34; } .product-slider-outer { position: relative; } .product-advantages { display: flex; /*justify-content: space-between;*/ justify-content: center; width: calc(100% - 120px); margin-left: auto; } .product-advantages-item { padding: 0 5px; text-align: center; max-width: 84px; } .product-advantages-icon { width: 69px; height: 69px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #f0f6f3; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .product-advantages-name { font-size: 12px; line-height: 1.2; text-transform: uppercase; color: #a9aaae; } .app-method-descr { font-size: 12px; font-weight: 600; color: #5a6b61; margin-bottom: 20px; display: block; padding-left: 30px; } .app-method-text { font-size: 12px; font-weight: 700; color: #5a6b61; padding-left: 30px; } .arrow-link { width: 20px; height: 20px; position: relative; display: inline-flex; margin-left: 10px; } .arrow-link:before { content: ""; height: 2px; background-color: #09d166; position: absolute; left: 0; width: 100%; top: calc(50% - 1px); } .arrow-link:after { content: ""; width: 8px; height: 8px; border: 2px solid #09d166; transform: rotate(45deg); position: absolute; top: 6px; right: 0; border-width: 2px 2px 0 0; } .anchor-title { display: flex; align-items: center; margin-bottom: 20px; } .anchor-icon { width: 50px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: rgba(13, 203, 91, 0.1); margin-right: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; fill: #09d166; } .anchor-icon svg { fill: #09d166; stroke: #09d166; } .anchor-name { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; } .share-btn { display: none !important; flex-shrink: 0; flex-grow: 0; width: 36px; height: 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color: #f0f6f3; cursor: pointer; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: center; } .share-btn svg { transition: all 0.3s ease-in-out; fill: #000; } .alternatives__box { display: flex; margin: 0 -6px 30px; } .alternatives__box-col { width: 25%; padding: 0 6px; } .alternatives__item { border: 2px solid #f7f7f7; border-radius: 10px; height: 100%; } .alternatives__item-top { padding: 15px 10px; } .alternatives__item-number-achive { position: relative; width: 50px; /*margin: 0 auto 20px;*/ margin: 0 auto 25px; height: 50px; } .alternatives__item-number-achive:before, .alternatives__item-number-achive:after { content: ""; display: block; width: 16px; height: 20px; position: absolute; bottom: -10px; background-repeat: no-repeat; background-size: cover; background-image: url(../img/icons/rank-flag.svg); } .alternatives__item-number-achive:before { left: 0; transform: rotate(35deg) translateX(-2px); } .alternatives__item-number-achive:after { right: 0; transform: rotate(-35deg) translateX(2px); } .alternatives__item-number { width: 50px; height: 50px; border-radius: 100%; font-size: 13px; background: #f6f5f5; display: flex; margin: 0 auto 25px; align-items: center; justify-content: center; overflow: hidden; } .alternatives__item-number-achive .alternatives__item-number { background: #0dd166; color: #fff; font-weight: 900; font-size: 28px; position: relative; z-index: 2; } .alternatives__item-number-achive .alternatives__item-number:before { content: ""; background: #17c358; display: block; position: absolute; right: 0; top: 0; width: 50%; height: 100%; z-index: -1; } .alternatives__item-head { margin-bottom: 15px; text-align: center; } .alternatives__item-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 40px; margin-bottom: 5px; } .alternatives__item-name a { font-weight: 800; font-size: 16px; line-height: 19px; } .alternatives__item-by { font-size: 14px; line-height: 24px; color: #000000; } .alternatives__item-img { position: relative; width: 190px; height: 190px; margin: 0 auto; } .alternatives__item-img .inner { position: relative; padding-bottom: 100%; } .alternatives__item-img .inner:before { background-image: url(../img/icons/all-supplement.svg); width: 74px; height: 102px; } .alternatives__item-img .inner img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; transition: transform 0.3s; } .alternatives__item-rate { position: absolute; bottom: 30px; right: 15px; z-index: 2; } .alternatives__item-rate-title { position: absolute; left: 50%; top: -40px; transform: translateX(-50%); font-size: 7px; padding: 12px 2px 30px; border-radius: 10px 10px 0 0; text-align: center; color: #fff; background-color: #a9aaae; text-transform: uppercase; } .alternatives__item-rate .circle { background-color: #fff; width: 60px; height: 60px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .alternatives__item-rate .value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 12px; } .alternatives__item-sellers-title { background: #f6f5f5; padding: 0 15px; font-weight: 600; font-size: 12px; line-height: 24px; letter-spacing: 0.05em; text-transform: uppercase; color: #848d95; } .alternatives__item .list-platform .item-platform { padding: 10px; margin-bottom: 10px; } .alternatives__item .list-platform .item-platform:last-child { border: none; } .alternatives__item .list-platform .item-platform .price div { overflow: hidden; display: block; text-overflow: ellipsis; } .alternatives__item .list-platform .item-platform .grey-value { font-size: 12px; line-height: 41px; text-align: right; color: #a9aaae; flex-grow: 1; display: block; margin-left: 15px; } .alternatives__item .list-platform .item-platform .img { max-width: 64px; } .alternatives__info { padding-bottom: 20px; border-bottom: 2px solid #f1f1f3; } .alternatives__info-title { background: #f7f7f7; border-radius: 5px; padding: 0 10px; font-weight: 600; font-size: 12px; line-height: 24px; letter-spacing: 0.05em; text-transform: uppercase; color: #848d95; margin-bottom: 20px; } .alternatives__info-row { display: flex; margin-bottom: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all 0.3s ease-in-out; } .alternatives__info-col { width: 25%; } .alternatives__info-col:not(:last-child) { position: relative; } .alternatives__info-col:not(:last-child):after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: #f1f1f3; } .alternatives__info-col .val { font-size: 15px; line-height: 24px; display: flex; align-items: center; justify-content: center; padding: 0 5px; } .alternatives__info-col .val.bold { font-weight: 700; } .alternatives__info-col .rate-action, .alternatives__info-col .price-action { margin-left: 10px; padding-left: 13px; font-weight: 400; position: relative; } .alternatives__info-col .rate-action.down, .alternatives__info-col .price-action.up { color: #f30000; } .alternatives__info-col .price-action.down, .alternatives__info-col .rate-action.up { color: #0dcb5b; } .alternatives__info-col .rate-action:before, .alternatives__info-col .price-action:before { content: ""; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-size: contain; background-position: center; background-repeat: no-repeat; height: 13px; width: 14px; } .alternatives__info-col .rate-action.up:before { background: url(../img/icons/up-arrow.svg); } .alternatives__info-col .rate-action.down:before { background: url(../img/icons/down-arrow.svg); } .alternatives__info-col .price-action.up:before { background: url(../img/icons/up-arrow-price.svg); } .alternatives__info-col .price-action.down:before { background: url(../img/icons/down-arrow-price.svg); } /* Hidden items animation */ .alternatives__info-box.more-attr { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-15px); transition: opacity 0.4s ease-out, transform 0.4s ease-out, max-height 0.5s ease-out, margin-bottom 0.4s ease-out; margin-bottom: 0; } .alternatives__info-box.more-attr.show { opacity: 1; transform: translateY(0); margin-bottom: 20px; overflow: visible; } .articles { margin-bottom: 50px; } .articles-webinars { background: #f0f6f3; padding: 100px 0 35px; position: relative; overflow: hidden; } .articles-webinars:after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 16px; background-image: url(/assets/img/icons/decor-dot-white.svg); } .articles .headline { align-items: flex-start; } .articles .product-head { display: block; margin: 0; } .articles .product-head p { max-width: 540px; font-weight: 400; font-size: 14px; line-height: 1.5; color: #000; } .articles-webinars .product-head { display: flex; margin: 30px 0 50px; } .articles-webinars .product-head-info { background: #fff; } .articles-slider { position: relative; overflow: visible; } .articles-slider .swiper-wrapper { margin-left: -30.6rem; } .articles-slider .swiper-slide { width: 300px; } .articles__card { display: block; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-radius: 10px; } .articles__card-img { display: block; position: relative; padding-bottom: 56.25%; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .articles__card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .articles__card-play { background: rgba(0, 0, 0, 0.6); border-radius: 20px; width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.3s ease-in-out; opacity: 0; } .articles__card-play svg { width: 22px; height: 20px; fill: #fff; } .articles__card-body { display: block; padding: 20px; } .articles__card-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; height: 22px; } .articles__card-info.intent { margin-right: 50px; } .articles__card-date { display: flex; align-items: center; font-size: 13px; color: #767676; } .articles__card-date svg { flex-shrink: 0; flex-grow: 0; margin-right: 5px; } .articles__card-tag { display: block; background: #efeeef; border-radius: 3px; padding: 4px 10px; font-size: 12px; line-height: 14px; } .articles__card-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 61px; font-weight: 700; font-size: 16px; line-height: 20px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } .articles__card-txt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; height: 80px; font-size: 14px; line-height: 20px; color: #767676; margin-bottom: 15px; } .articles__card-bottom { display: flex; align-items: center; justify-content: space-between; } .articles__card-author { display: flex; align-items: center; } .articles__card-author-icon { display: block; width: 30px; height: 30px; border-radius: 15px; overflow: hidden; } .articles__card-author-icon img { width: 100%; height: 100%; object-fit: cover; } .articles__card-author-name { display: block; font-size: 13px; line-height: 15px; margin-left: 10px; } .articles__card-link { width: 32px; height: 28px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #0dcb5b; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; opacity: 0; } .articles__card-link svg { fill: #fff; transform: rotate(-90deg); } .articles__card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .articles__card-overlay-icon { background: rgba(0, 0, 0, 0.6); border-radius: 20px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .articles__card-overlay-icon svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; } .articles__card-overlay .btn { background: #0dcb5b; border: none; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; padding: 0 28px; } .articles .slider-arrows { display: flex; justify-content: space-between; width: 90px; margin: 15px 0 0 auto; } .articles .swiper-button-prev, .articles .swiper-button-next { width: 40px; height: 40px; background: #d9f2e4; border-radius: 10px; position: static; margin: 0; transition: all 0.3s ease-in-out; } .articles .swiper-button-prev:before, .articles .swiper-button-next:before { transition: all 0.3s ease-in-out; } .page-nav { position: absolute; top: 146px; left: 30px; background: linear-gradient(0deg, #f0f6f3, #f0f6f3), #ffffff; box-shadow: 0 20px 50px rgba(158, 158, 158, 0.12); border-radius: 20px; padding: 30px 10px; width: 100px; z-index: 12; } .page-nav.fixed { position: fixed; top: 20px; } .page-nav .item { display: block; text-align: center; } .page-nav .item.active .item-icon { background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); border-color: #0dcb5b; } .page-nav .item.active .item-name { color: #000; } .page-nav .item.active .item-icon svg { fill: #fff; stroke: #fff; } .page-nav .item:not(:last-child) { margin-bottom: 10px; } .page-nav .item-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #fafcff; border: 1px solid #d4d7dd; border-radius: 10px; margin: 0 auto 10px; transition: all 0.3s ease-in-out; } .page-nav .item-icon svg { transition: all 0.3s ease-in-out; } .page-nav .item-name { text-transform: uppercase; font-size: 12px; line-height: 14px; color: #747373; transition: all 0.3s ease-in-out; } .blog-overlay { position: fixed; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #808d76; opacity: 0; transition: all 0.2s ease-in-out; } .blog-overlay.active { z-index: 12; opacity: 0.5; } .blog-sidebar { position: fixed; right: -100%; top: 20px; bottom: 20px; width: 400px; background: #f0f6f3; border-radius: 20px; z-index: 12; padding: 20px; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; } .blog-sidebar.active { opacity: 1; visibility: visible; right: 20px; } .blog-sidebar-head { padding-bottom: 20px; } .blog-sidebar-head-box { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .blog-sidebar-title { font-weight: 700; font-size: 20px; padding-right: 10px; } .blog-sidebar-close { width: 14px; height: 14px; cursor: pointer; } .blog-sidebar-close svg { transition: all 0.3s ease-in-out; } .blog-sidebar-row { display: flex; } .blog-sidebar-inputbox { position: relative; flex-shrink: 1; flex-grow: 1; min-width: 1px; } .blog-sidebar-inputbox .input { height: 50px; padding: 0 45px 0 20px; } .blog-sidebar-inputbox button { position: absolute; top: calc(50% - 10px); right: 15px; width: 20px; height: 20px; } .blog-sidebar-inputbox button svg { transition: all 0.3s ease-in-out; } .blog-sidebar-sort { flex-shrink: 0; flex-grow: 0; width: 110px; position: relative; margin-left: 10px; } .blog-sidebar-sort-btn { height: 50px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: #a9aaae; background: #ffffff; border-radius: 10px; cursor: pointer; transition: all 0.3s ease-in-out; text-transform: capitalize; } .blog-sidebar-sort-btn.active { background-color: #0dcb5b; color: #fff; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .blog-sidebar-sort-btn.active:after { transform: rotate(315deg); top: 2px; border-color: #fff; } .blog-sidebar-sort-btn:after { transition: 0.3s; content: ""; display: inline-flex; width: 10px; height: 10px; position: relative; top: -2px; border: 2px solid #000; border-width: 2px 2px 0 0; transform: rotate(135deg); } .blog-sidebar-sort-drop { position: absolute; top: calc(100% + 10px); width: 100%; left: 0; background: #ffffff; border-radius: 10px; padding: 10px 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); overflow: hidden; display: none; z-index: 3; } .blog-sidebar-sort-drop ul { max-height: 220px; overflow-y: auto; scrollbar-color: #cbcbcb transparent; scrollbar-width: thin; } .blog-sidebar-sort-drop ul::-webkit-scrollbar { width: 3px; } .blog-sidebar-sort-drop ul::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .blog-sidebar-sort-drop ul::-webkit-scrollbar-thumb { background-color: #cbcbcb; border-radius: 3px; } .blog-sidebar-sort-drop li { padding: 10px 15px; font-size: 13px; line-height: 1; color: #767676; transition: all 0.3s ease-in-out; cursor: pointer; } .blog-sidebar-content { overflow: hidden; height: calc(100vh - 114px - 80px); overflow-y: auto; margin: 0 -10px; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; } .blog-sidebar-content::-webkit-scrollbar { width: 4px; } .blog-sidebar-content::-webkit-scrollbar-track { opacity: 0; } .blog-sidebar-content::-webkit-scrollbar-thumb { background-color: #9ebeae; border-radius: 3px; opacity: 0.5; } .blog-sidebar-content .inner { margin: 0 10px; } .blog-sidebar .item { padding: 10px; background: #fdfdfd; border-radius: 10px; } .blog-sidebar .item:not(:last-child) { margin-bottom: 10px; } .blog-sidebar .item-img { display: block; padding-bottom: 46.25%; position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; margin-bottom: 15px; } .blog-sidebar .item-img img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; object-position: top; } .blog-sidebar .item-list { display: flex; align-items: center; padding-right: 20px; position: relative; margin-bottom: 10px; } .blog-sidebar .item-date { display: flex; align-items: center; font-size: 13px; line-height: 1; color: #767676; } .blog-sidebar .item-date svg { margin-right: 5px; } .blog-sidebar .item-tag { margin-left: 20px; background-color: #efeeef; padding: 4px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 12px; line-height: 1.3; } .blog-sidebar .share { width: 16px; height: 16px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; } .blog-sidebar .share svg { width: 100%; height: 100%; transition: all 0.3s ease-in-out; } .blog-sidebar .item-title { font-weight: 700; font-size: 16px; line-height: 20px; } .blog-sidebar .item-text { font-size: 14px; line-height: 20px; color: #767676; margin: 10px 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .blog-sidebar .item-bottom { display: flex; align-items: center; justify-content: space-between; } .blog-sidebar .item-user { display: flex; align-items: center; font-size: 13px; line-height: 15px; transition: all 0.3s ease-in-out; } .blog-sidebar .item-user-img { display: block; width: 30px; height: 30px; flex-shrink: 0; flex-grow: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; margin-right: 10px; } .blog-sidebar .item-user-img img { width: 100%; height: 100%; object-fit: cover; } .price-btn { display: none; } .short-description { margin-top: 30px; background: #f8f8f8; border-radius: 10px; padding: 12px 12px 12px 36px; position: relative; font-size: 12px; line-height: 1.4; color: #767676; } .product .short-description { background: #fff6f6; } .product .short-description-btn { color: #e16262; } .product .short-description:before { filter: invert(49%) sepia(77%) saturate(2933%) hue-rotate(329deg) brightness(100%) contrast(77%); } .product .short-description-btn:before { background: #e16262; } .short-description:before { content: ""; position: absolute; width: 16px; height: 16px; top: 12px; left: 10px; background-image: url(../img/icons/info.svg); } .short-description p { margin-bottom: 5px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .short-description.show p { display: block; } .short-description-btn { color: #0dcb5b; font-size: 12px; display: inline-flex; position: relative; } .short-description-btn:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #0dcb5b; transition: all 0.3s ease-in-out; } .product-mix { margin-bottom: 10px; } .product-mix .slider-outer { position: relative; } .product-mix .slider-wrapper { margin: 0 -10px; overflow: hidden; padding-bottom: 20px; } .product-mix .swiper-container { height: 500px; opacity: 0; overflow: visible; padding: 15px 10px 0; } .product-mix .swiper-container.swiper-container-initialized { opacity: 1; height: auto; } .product-mix .item { background: #ffffff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 20px 25px; position: relative; } .product-mix .item-head { margin-bottom: 10px; position: relative; } .product-mix .item-head.show .item-tooltip { opacity: 1; visibility: visible; } .product-mix .item-head-inner { height: 75px; display: flex; flex-direction: column; justify-content: space-between; } .product-mix .item-name { text-align: center; font-weight: 800; font-size: 16px; line-height: 19px; margin-bottom: 5px; position: relative; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-mix .item-toggle { display: inline-flex; position: absolute; cursor: pointer; right: -6px; bottom: -30px; z-index: 1; padding: 10px; } .product-mix .item-series { display: block; text-align: center; font-size: 14px; line-height: 24px; color: #767676; } .product-mix .item-img { margin-bottom: 10px; position: relative; } .product-mix .item-img .inner { padding-bottom: 100%; position: relative; width: 100%; } .product-mix .item-img .inner:before { background-image: url(../img/icons/all-supplement.svg); width: 73px; height: 100px; } .product-mix .item-img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; transition: transform 0.3s; } .product-mix .item-row { display: flex; align-items: center; justify-content: space-between; min-height: 39px; } .product-mix .item-brand { height: 65px; width: 80px; overflow: hidden; margin-right: 15px; display: flex; align-items: center; } .product-mix .item-brand:before { background-image: url(../img/icons/all-supplement.svg); width: 30px; height: 40px; } .product-mix .item-price { font-size: 18px; font-weight: 700; line-height: 21px; text-transform: uppercase; margin-right: 5px; } .product-mix .item-price.unavailable { font-size: 12px; line-height: 17px; text-transform: inherit; color: #a9aaae; display: block; } .product-mix .product-info__box { position: absolute; z-index: 2; top: 50%; right: -20px; transform: translateY(-50%); margin: 0; } .product-mix .product-info__box .circle { border-radius: 50%; background-color: #fff; width: 63px; height: 63px; } .product-mix .product-info__title_bg { width: 52px; top: -42px; height: 70px; left: calc(50% - 26px); } .product-mix .product-info__title_top { font-size: 11px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; padding: 11px 5px 45px; } .product-mix .item-tooltip { position: absolute; top: calc(100% + 25px); left: 50%; transform: translateX(-50%); width: 280px; background: #f0f6f3; border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); text-align: left; transition: all 0.3s ease-in-out; opacity: 0; z-index: 5; visibility: hidden; } .product-mix .item-tooltip-head { display: flex; align-items: center; margin-bottom: 10px; } .product-mix .item-tooltip-img { width: 50px; height: 50px; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #fff; flex-grow: 0; flex-shrink: 0; padding: 5px; } .product-mix .item-tooltip-img img { object-fit: contain; height: 100%; width: 100%; } .product-mix .item-tooltip-title { flex-grow: 1; flex-shrink: 1; min-width: 1px; padding-left: 18px; font-size: 18px; font-weight: 700; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-mix .item-tooltip p { font-weight: 400; font-size: 14px; line-height: 21px; color: #4f4f4f; margin-bottom: 10px; } .product-mix .item-tooltip-link { font-weight: 400; font-size: 14px; line-height: 16px; color: #0dcb5b; position: relative; display: inline-flex; align-items: center; } .product-mix .item-tooltip-link:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); margin-left: 10px; } .product-mix .item-add { flex-grow: 0; flex-shrink: 0; width: 60px; height: 60px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: rgba(9, 209, 102, 0.2); position: absolute; right: -43px; top: 50%; transform: translateY(-50%); z-index: 4; box-shadow: 0 17px 15px rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; } .product-mix .item-add:before, .product-mix .item-add:after { content: ""; position: absolute; left: calc(50% - 10px); top: calc(50% - 1px); width: 20px; height: 2px; background-color: #fff; } .product-mix .item-add:after { transform: rotate(90deg); } .product-mix .item-add-circle { width: 40px; height: 40px; background-color: #53d286; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .product-mix .swiper-slide:last-child .item-add { display: none; } .product-mix .swiper-slide-prev .item-add { display: none; } .product-mix .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide .item-add { display: none; } .product-mix .swiper-button-next { right: -30px; } .product-mix .swiper-button-prev { left: -30px; } .product-mix .swiper-button-next.swiper-button-disabled, .product-mix .swiper-button-prev.swiper-button-disabled { opacity: 0; } .title.lowercase { text-transform: inherit; } .popular-section { padding-bottom: 30px; } .products.products_collections + .popular-section { padding-bottom: 90px; } .popular-section-premium { display: none; } .popular-section .row { display: flex; flex-wrap: wrap; margin: 0 -7px; } .popular-section .row.open .card--hide { display: block; } .popular-section .row.open .card__premium-hidden { display: none; } .popular-section .col { width: 25%; padding: 0 7px; margin-bottom: 10px; } .popular-section .row:not(.row-scroll) .card { height: auto; margin-bottom: 10px; } .popular-section__more { display: none; } .faq { padding-bottom: 100px; overflow: hidden; } .faq__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; } .faq__head-left { padding-right: 20px; max-width: 605px; } .faq__head-left p { font-weight: 400; font-size: 14px; line-height: 1.5; color: #000; } .faq__head-right { flex-shrink: 0; flex-grow: 0; } .faq__head-subtitle { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; margin-bottom: 10px; } .faq__head-txt { max-width: 540px; font-weight: 400; font-size: 14px; line-height: 1.5; color: #000; } .faq__nav { display: flex; align-items: center; } .faq__nav-item:not(:last-child) { margin-right: 5px; } .faq__nav-link { display: block; background: #ffffff; border: 1px solid #d4d4d6; border-radius: 10px; padding: 13px 20px; font-weight: 500; font-size: 14px; line-height: 16px; color: #747373; } .faq__nav-link.active { background: #f0f6f3; border-color: #0dcb5b; color: #0dcb5b; } .faq__content { display: none; } .faq__content.active { display: block; } .faq__question { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 -15px; } .faq__question-col { width: 50%; padding: 0 15px; } .faq__question-col:last-child .faq__question-item { margin-left: auto; } .faq__question-item { max-width: 585px; } .faq__question-item:not(:last-child) { margin-bottom: 10px; } .faq__question-title { padding: 20px; display: flex; align-items: center; font-weight: 700; font-size: 18px; line-height: 1.2; position: relative; border: 1px solid #deeaf5; border-radius: 10px; cursor: pointer; transition: all 0.3s ease-in-out; } .faq__question-title.active { background: #f8f8f8; border-color: #f8f8f8; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; } .faq__question-title.active .faq__question-btn { background-color: #0dcb5b !important; } .faq__question-title.active .faq__question-btn:before { transform: translate(-50%, -50%) rotate(180deg); } .faq__question-title.active + .faq__question-content { background: #f8f8f8; } .faq__question-title svg { margin-right: 15px; flex-shrink: 0; flex-grow: 0; } .faq__question-title span { display: block; padding-right: 10px; } .faq__question-btn { width: 22px; height: 22px; border-radius: 5px; background-color: #deeaf5; transition: all 0.3s ease-in-out; position: relative; flex-shrink: 0; flex-grow: 0; margin-left: auto; } .faq__question-btn:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-image: url(../img/icons/arrow-down.svg); background-size: 100%; filter: invert(1); transition: all 0.3s ease-in-out; } .faq__question-content { padding: 0 20px 20px 55px; position: relative; display: none; -webkit-border-radius: 0 0 10px; -moz-border-radius: 0 0 10px; border-radius: 0 0 10px 10px; } .faq__question-content svg { position: absolute; top: 0; left: 22px; fill: #0bcb5b; } .faq__question-content p { font-size: 14px; line-height: 21px; color: #4f4f4f; } .faq__question-content p:not(:last-child) { margin-bottom: 21px; } .top-block { padding: 30px 0 50px; } .top-block__info { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 13px; } .top-block__subtitle { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; margin-bottom: 10px; } .top-block__title { font-weight: 700; font-size: 24px; line-height: 1.5; color: #000000; margin-bottom: 10px; } .top-block__txt { padding-right: 20px; max-width: 725px; font-size: 16px; line-height: 24px; } .top-block__txt strong { font-weight: 700; } .top-block__txt p:not(:last-child) { margin-bottom: 24px; } .top-block__row { display: flex; flex-wrap: wrap; margin: 20px -6px 0; } .top-block__row .col { width: 25%; padding: 0 6px; margin-bottom: 20px; } .product-item { border: 2px solid #f7f7f7; border-radius: 10px; padding: 15px 20px; transition: all 0.3s ease-in-out; text-align: center; } .product-item--best { background: linear-gradient(180deg, #ffffff 65.74%, #ecfff4 100%); border-color: #0dcb5b; } .product-item__img { display: block; width: 200px; height: 200px; margin: 0 auto 15px; position: relative; } .product-item__img:before { background-image: url(../img/icons/all-supplement.svg); width: 73px; height: 100px; } .product-item__img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; transition: transform 0.3s; } .product-item .product-info__box { position: absolute; bottom: 0; right: 0; z-index: 2; margin-right: 0; } .product-item .product-info__title_bg { width: 52px; top: -42px; height: 70px; left: calc(50% - 26px); } .product-item .product-info__title_top { font-size: 10px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; padding: 11px 5px 45px; display: block; } .product-item .circle { border-radius: 50%; background-color: #fff; width: 63px; height: 63px; } .product-item .circle__value { font-size: 12px; } .product-item__title { font-weight: 700; font-size: 16px; line-height: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 40px; min-height: 40px; margin-bottom: 5px; transition: all 0.3s ease-in-out; } .product-item__subtitle { font-size: 14px; line-height: 16px; transition: all 0.3s ease-in-out; } .product-item__info { margin-top: 15px; border-top: 1px dashed #dedede; } .product-item__row { display: flex; align-items: center; justify-content: space-between; text-align: left; margin-top: 15px; } .product-item .product-tags { margin: 0; width: auto; } .product-item .product-tags .value { margin: 0; } .product-item .price { font-size: 12px; line-height: 18px; color: #747373; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .product-item .price .val { color: #000; font-size: 18px; font-weight: 700; } .product-item .price .val.unavailable { font-size: 12px; line-height: 17px; text-transform: inherit; color: #a9aaae; font-weight: 500; padding-left: 10px; } .product-item .brand { height: 40px; width: 60px; overflow: hidden; margin-right: 10px; display: flex; align-items: center; } .product-item .card-rating__title { margin-bottom: 5px; } .product-item .btn { padding: 5px 30px; line-height: 26px; color: #332f2f; background-color: #fff; border-color: #09d166; margin-top: 15px; } .product-block-daily { background-color: #f0f6f3; padding: 50px 0; position: relative; z-index: 3; } .product-prem { height: 100%; background: linear-gradient(335.46deg, #e7f1eb 0%, #cbfade 100%); border-radius: 10px; padding: 20px 30px; position: relative; overflow: hidden; } .product-prem-head { display: flex; align-items: center; margin-bottom: 16px; } .product-prem-icon { background: rgba(13, 203, 91, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; flex-grow: 0; } .product-prem-icon svg { stroke: #0dcb5b; } .product-prem-head-txt { padding-left: 10px; font-weight: 700; font-size: 18px; line-height: 21px; text-transform: uppercase; } .product-prem-head-txt span { font-weight: 400; } .product-prem__body { display: flex; align-items: center; justify-content: space-between; } .product-prem-title { font-weight: 700; font-size: 18px; line-height: 21px; text-transform: uppercase; color: #257441; margin-bottom: 5px; max-width: 80%; } .product-prem-title strong { font-weight: 900; } .product-prem-btn { background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; font-weight: 600; font-size: 22px; border: none; line-height: 39px; z-index: 2; position: relative; padding: 8px 10px; } .product-prem-img { position: relative; padding-bottom: 94%; margin-bottom: 15px; } .product-prem-img img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; transition: transform 0.3s; } .product-prem-decor { position: absolute; bottom: 0; right: 0; width: 155px; z-index: 1; } .daily .share-btn { background-color: #fff; } .daily-holder { display: flex; align-items: center; position: relative; } .daily-left, .daily-right { width: 50%; position: relative; z-index: 1; } .daily-list { max-width: 250px; position: relative; z-index: 2; } .daily-list .item { display: flex; align-items: center; justify-content: space-between; min-height: 48px; background: #ffffff; box-shadow: 0 5px 15px #d5eddf; border-radius: 10px; padding: 10px 15px; transition: all 0.2s ease-in-out; } .daily-list .item:not(:last-child) { margin-bottom: 10px; } .daily-list .item.show { -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; background-color: #e6f8ed; } .daily-list .item.show .percent { background-color: #fff; } .daily-list .item.show .item-drop { opacity: 1; visibility: visible; } .daily-list .item.more { flex-direction: column; align-items: flex-start; position: relative; z-index: 1; cursor: pointer; } .daily-list .item.more:before, .daily-list .item.more:after { content: ""; position: absolute; border-radius: 0 0 10px 10px; height: 10px; z-index: -1; background-color: #fff; box-shadow: 0 5px 15px #d5eddf; transition: all 0.3s ease-in-out; } .daily-list .item.more:before { left: 10px; right: 10px; bottom: -10px; } .daily-list .item.more:after { left: 20px; right: 20px; bottom: -20px; } .daily-list .item .item-row { display: flex; width: 100%; align-items: center; justify-content: space-between; } .daily-list .item-drop, .daily-advantages .daily-drop { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; box-shadow: 0 5px 15px #d5eddf; overflow: hidden; border-top: 1px solid #e5e5e5; opacity: 0; visibility: hidden; z-index: 2; transition: all 0.3s ease-in-out; } .daily-list .item .more { text-transform: uppercase; color: #0dcb5b; font-size: 13px; line-height: 1; display: flex; align-items: center; } .daily-list .item .more:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0); margin-left: 10px; } .daily-list .item .name { font-size: 14px; padding-right: 10px; } .daily-list .item .percent { background: #f8f8f8; border-radius: 10px; padding: 7px 10px; font-size: 13px; line-height: 1; letter-spacing: 0.05em; transition: all 0.3s ease-in-out; } .daily-decor { position: absolute; top: 50%; transform: translateY(-50%); left: 245px; width: 47%; height: 100%; background-image: url(../img/product/wawes-desctop.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .daily-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } .daily-center .intake { width: 200px; height: 200px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; box-shadow: 0 25px 25px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; } .daily-center .intake-inner { background-color: #fff; width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .daily-center .intake:after { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient( 135deg, #efefef 0%, rgba(249, 249, 249, 0) 100% ); filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.1)); width: calc(100% + 20px); height: calc(100% + 20px); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .daily-center .intake-icon { width: 30px; height: 30px; margin-bottom: 10px; } .daily-center .intake-icon svg { width: 100%; height: 100%; } .daily-center .intake-subtitle { text-transform: uppercase; font-size: 12px; line-height: 18px; color: #767676; margin-bottom: 10px; } .daily-center .intake-title { font-size: 30px; font-weight: 300; line-height: 18px; margin-bottom: 15px; } .daily-center .intake-title span { font-weight: 500; padding-right: 5px; } .daily-center .intake-txt { font-size: 14px; line-height: 18px; color: #767676; } .daily-right { padding: 40px 20px 40px 125px; position: relative; z-index: 1; } .daily-right:before { content: ""; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(335.46deg, #e7f1eb 0%, #cbfade 100%); border-radius: 160px 20px 20px 160px; } .daily-right .inner { max-width: 520px; margin-left: auto; display: flex; } .daily-img { background: #ffffff; border-radius: 10px; max-width: 230px; width: 100%; margin-right: 20px; padding: 15px 25px; } .daily-img .img-box { padding-bottom: 155%; position: relative; width: 100%; } .daily-img .img-box:before { background-image: url(../img/icons/all-supplement.svg); width: 73px; height: 100px; } .daily-img .img-box img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; width: auto; } .daily-advantages-item { display: flex; background: #ffffff; box-shadow: 0 5px 15px #d5eddf; border-radius: 10px; padding: 17px; } .daily-advantages-item:not(:last-child) { margin-bottom: 10px; } .daily-advantages-item .check { width: 20px; height: 20px; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: rgba(24, 196, 89, 0.4); margin-right: 12px; flex-grow: 0; flex-shrink: 0; } .daily-advantages-item .check:before { content: ""; width: 9px; height: 6px; position: absolute; top: 6px; left: 6px; border: 2px solid #18c459; border-top: none; border-right: none; transform: rotate(-45deg); } .daily-advantages-item .check + .txt { margin-top: 3px; } .daily-advantages-item .txt { font-size: 14px; line-height: 16px; } .daily-advantages-item.more { flex-direction: column; position: relative; cursor: pointer; } .daily-advantages-item.more:before, .daily-advantages-item.more:after { content: ""; position: absolute; border-radius: 0 0 10px 10px; height: 10px; background-color: #fff; box-shadow: 0 5px 15px #d5eddf; transition: all 0.3s ease-in-out; } .daily-advantages-item.more:before { left: 10px; right: 10px; bottom: -10px; } .daily-advantages-item.more:after { left: 20px; right: 20px; bottom: -20px; } .daily-advantages-item .more { display: flex; align-items: center; text-transform: uppercase; color: #0dcb5b; line-height: 1; } .daily-advantages-item .more:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0); margin-left: 10px; } .daily-advantages-item.more.show { border-radius: 10px 10px 0 0; background-color: #e6f8ed; } .daily-advantages-item.more.show .daily-drop { opacity: 1; visibility: visible; } .daily-list .item-drop .item, .daily-drop .daily-advantages-item { border-radius: 0; box-shadow: none; margin: 0; cursor: default; } .daily-list .item-drop .item:not(:last-child), .daily-drop .daily-advantages-item:not(:last-child) { border-bottom: 1px solid #e5e5e5; } .all-product-supplements .wrap { position: relative; padding-bottom: 40px; flex-wrap: wrap; } .all-product-supplements .wrap .content { width: 75%; } .all-product-supplements .content .row { display: flex; flex-wrap: wrap; margin: 0 -6px; } .all-product-supplements .content .col { width: 33.333%; padding: 0 6px; margin-bottom: 25px; } .all-product-supplements .btn-more { background: #f0f6f3; line-height: 24px; border: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .all-product-supplements .btn-more:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0); transform: rotate(90deg); margin-left: 10px; } .all-product-supplements .wrap .sidebar-products { margin-left: 12px; width: calc(25% - 12px); } .all-product-supplements-more { display: none; width: 100%; } .all-product-supplements .wrap .sidebar-products .populars { padding: 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .all-product-supplements .wrap .sidebar-products .populars:not(:last-child) { margin-bottom: 25px; } .wrap .block-sources .source-title { font-size: 16px; line-height: 19px; margin-bottom: 15px; letter-spacing: normal; font-weight: inherit; } .wrap .block-sources .source-title strong { font-weight: 700; padding-right: 6px; } .wrap .block-sources .source-title svg, .wrap .wrap-chart-txt svg { margin-right: 10px; flex-shrink: 0; flex-grow: 0; } .wrap .block-sources .block-list-sources { background: #fff; padding: 10px; border-radius: 10px; margin: 0; } .wrap .block-sources .list-sources .item p { font-size: 13px; line-height: 20px; font-weight: 400; margin-bottom: 7px; letter-spacing: normal; } .wrap .block-sources .list-sources .item .row { border-bottom: 1px dashed #dedede; padding-bottom: 12px; } .wrap .block-sources .list-sources .item a .text { text-transform: inherit; } .wrap .block-sources .block-list-sources .btn { color: #000; } .wrap .wrap-chart #myChart { margin-top: -20px; } .wrap .wrap-chart-txt { padding: 0; display: flex; align-items: center; font-weight: inherit; font-size: 16px; line-height: 19px; margin-bottom: 15px; } .all-product-supplements .row-mod { display: flex; flex-wrap: wrap; margin: 0 -5px; } .all-product-supplements .row-mod .col { width: 25%; padding: 0 6px; margin-bottom: 25px; } /* Single Protocol page START*/ .protocol-hero { padding: 30px 0; margin-bottom: 60px; position: relative; z-index: 1; background: #f0f7f3; } .protocol-hero:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 475px; background-image: url(/assets/img/background/protocol-hero-desktop.png); z-index: -1; } .protocol-hero:after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 16px; background-image: url(/assets/img/icons/decor-dot-white.svg); } .headline__caption { font-size: 44px; line-height: 1.5; margin-top: 35px; text-transform: uppercase; } .protocol-hero .anchor-icon { background: #3d7b54; } .protocol-hero .headline__title, .protocol-hero .product-head-info-title { color: #a9d9bb; } .protocol-hero .headline__caption, .protocol-hero .product-head-info-text { color: #cef9e0; } .protocol-hero .headline__caption strong { color: #fff; } .protocol-hero .product-head-info { background: #3d7b54; } .protocol-hero .disclaimer .row { margin: 0 0 10px; } .protocol-hero .row { display: flex; flex-wrap: wrap; margin: 0 -3px 10px; } .protocol-hero .col { width: 25%; padding: 0 3px; margin-bottom: 10px; } /*.protocol-hero .card {*/ /* padding: 20px 12px 71px;*/ /*}*/ .protocol-hero .card__body-nav-link { font-size: 12px; line-height: 14px; padding: 8px 6px; } .protocol-hero .card__overlay { top: 47px; } .protocol-hero .product-prem-img { /*padding-bottom: 100%;*/ padding-bottom: 76%; } .protocol-hero .product-prem.mobile, .protocol-hero .product-head-info.mobile { display: none; } /*protocols card*/ .card { background: #ffffff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 20px 12px 15px; /* margin-bottom: 10px; */ height: 100%; transition: all 0.3s; position: relative; z-index: 1; will-change: transform; } .card.active .card__tooltip { transform: translateY(0); opacity: 1; visibility: visible; z-index: 11; } .card.card--mod { background-color: #ecfff4; border: 3px solid #0dcb5b; } .card.card--mod .card__bottom { border-color: #0dcb5b; } .card:before { content: ""; position: absolute; border-radius: 10px; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(335.46deg, #e7f1eb 0%, #cbfade 100%); transition: all 0.3s; opacity: 0; z-index: -1; } .card__head { background: rgba(13, 203, 91, 0.1); border-radius: 10px; padding: 12px 10px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; position: relative; } .card__day { font-weight: 700; font-size: 40px; line-height: 47px; color: #0dcb5b; display: flex; align-items: baseline; } .card__day span { font-size: 15px; line-height: 18px; padding-left: 5px; } .card__head-icon { background: #0dcb5b; border-radius: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; } .card__head-btn { width: 16px; height: 16px; position: absolute; left: 72px; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; z-index: 2; background-size: 16px 16px; background-image: url(../img/icons/info.svg); cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .card__head-btn.hide { display: none; } .card__tooltip { position: absolute; top: 12px; left: 12px; right: 10px; background-color: #fff; padding: 10px 0 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; z-index: -1; transform: translateY(15px); } .card__tooltip-head { padding: 0 30px 10px 10px; display: flex; align-items: center; } .card__tooltip-close { width: 15px; height: 15px; position: absolute; top: 10px; right: 10px; cursor: pointer; } .card__tooltip-close:before, .card__tooltip-close:after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background-color: #0dcb5b; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; transition: all 0.3s ease-in-out; } .card__tooltip-close:before { transform: translateY(-50%) rotate(45deg); } .card__tooltip-close:after { transform: translateY(-50%) rotate(-45deg); } .card__tooltip-icon { width: 50px; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; margin-right: 15px; background: #0dcb5b; } .card__tooltip-name { text-transform: uppercase; font-weight: 700; font-size: 16px; line-height: 18px; } .card__tooltip-img { height: 122px; display: block; margin-bottom: 12px; position: relative; } .card__tooltip-img img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; } .card__tooltip-body { padding: 0 6px 0 12px; font-size: 14px; line-height: 21px; margin-right: 6px; position: relative; overflow: hidden; overflow-y: auto; max-height: 201px; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; } .card__tooltip-body::-webkit-scrollbar { width: 4px; } .card__tooltip-body::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .card__tooltip-body::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, 0.5); border-radius: 2px; } .card__tooltip-body p { margin-bottom: 17px; } .card__tooltip-body a { color: #0dcb5b; border-bottom: 1px solid transparent; } .card__period { background: rgba(13, 203, 91, 0.1); border-radius: 10px; padding: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .card__period-icon { flex-shrink: 0; flex-grow: 0; width: 34px; height: 34px; margin-right: 10px; } .card__period-icon svg { width: 100%; height: 100%; fill: #0dcb5b; } .card__period-txt { font-weight: 600; font-size: 14px; line-height: 16px; color: #6cb48a; } .card__subtitle { font-size: 12px; line-height: 14px; text-transform: uppercase; color: #747373; margin-bottom: 5px; } .card__title { text-transform: uppercase; margin-bottom: 15px; } .card__title a { font-weight: 700; font-size: 18px; line-height: 21px; } .card__body { position: relative; } .card__body-nav { display: flex; margin-bottom: 10px; padding-bottom: 5px; overflow-x: auto; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; } .card__body-nav::-webkit-scrollbar, .card__bottom-inner::-webkit-scrollbar { height: 4px; } .card__body-nav::-webkit-scrollbar-track, .card__bottom-inner::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .card__body-nav::-webkit-scrollbar-thumb, .card__bottom-inner::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, 0.5); border-radius: 2px; } .card__body-nav-item:not(:last-child) { margin-right: 5px; } .card__body-nav-link { padding: 8px 10px 10px; background-color: #fff; border: 1px solid #d4d4d6; border-radius: 10px; display: block; font-weight: 500; font-size: 13px; line-height: 15px; color: #747373; } .card__body-nav-link.active { border-color: #0dcb5b; background-color: #f0f6f3; color: #0dcb5b; } .card__body-content { display: none; margin: 0 -12px; position: relative; /*height: 224px;*/ max-height: 224px; min-height: 200px; } .card__body-content.active { display: block; } .card__bottom { position: absolute; bottom: 15px; left: 12px; right: 12px; border-top: 1px dashed #dedede; padding-top: 15px; } .card__bottom-inner { display: flex; overflow-x: auto; transition: all 0.3s; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; } .card__bottom-item { margin-bottom: 5px; } .card__bottom-item.active .card__bottom-link { color: #fff; border-color: #0dcb5b; background-color: #0dcb5b; } .card__bottom-item.active .card__bottom-link svg { stroke: #fff; } .card__bottom-item.active .card__info { z-index: 11; opacity: 1; visibility: visible; transform: translateY(0); } .card__bottom-item:not(:last-child) { margin-right: 5px; } .card__bottom-link { padding: 6px 10px; background: #ffffff; border: 1px solid #e1e1e1; border-radius: 5px; position: relative; font-size: 12px; line-height: 14px; color: #767676; display: flex; align-items: center; white-space: nowrap; } .card__bottom-link svg { display: inline-flex; width: 16px; height: 16px; margin-right: 5px; transition: 0.3s; stroke: #767676; } .card__info { position: absolute; bottom: calc(100% - 10px); left: 0; right: 0; background: #f0f6f3; border-radius: 10px; padding: 20px; transition: all 0.3s ease-in-out; transform: translateY(20px); opacity: 0; visibility: hidden; z-index: 0; } .card__info-head { display: flex; align-items: center; margin-bottom: 10px; } .card__info-icon { display: flex; align-items: center; justify-content: center; padding: 5px; width: 50px; height: 50px; flex-shrink: 0; flex-grow: 0; background-color: #fff; border-radius: 10px; } .card__info-icon img { width: 100%; height: 100%; object-fit: contain; } .card__info-name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 700; font-size: 18px; line-height: 1.2; color: #000000; padding-left: 15px; } .card__info-txt { font-size: 14px; line-height: 1.5; color: #4f4f4f; overflow: hidden; overflow-y: auto; max-height: 140px; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; } .card__info-link { margin-top: 10px; font-size: 14px; line-height: 16px; color: #0dcb5b; display: inline-flex; align-items: center; } .card__info-link:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); margin-left: 10px; } .card__body-list { position: relative; overflow: hidden; overflow-y: auto; /*height: inherit;*/ max-height: inherit; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; padding: 0 6px 0 12px; margin-right: 6px; } .card__body-list::-webkit-scrollbar, .card__info-txt::-webkit-scrollbar { width: 4px; } .card__body-list::-webkit-scrollbar-track, .card__info-txt::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .card__body-list::-webkit-scrollbar-thumb, .card__info-txt::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, 0.5); border-radius: 2px; } .card__body-item { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); background: #fff; margin-bottom: 15px; } .card__body-item-inner { display: flex; align-items: center; } .card__body-item-inner:not(:last-child) { margin-bottom: 20px; } .card__body-item-left { flex-shrink: 1; flex-grow: 1; min-width: 1px; display: flex; align-items: flex-start; } .card__body-item-right { flex-shrink: 0; flex-grow: 0; margin-left: 10px; } .card__body-item-img { width: 30px; height: 30px; flex-shrink: 0; flex-grow: 0; display: block; } .card__body-item-img:before { background-image: url(../img/icons/all-supplement.svg); width: 30px !important; height: 30px !important; } .card__body-item-img img { width: 100%; height: 100%; object-fit: contain; } .card__body-item-info { flex-shrink: 1; flex-grow: 1; min-width: 1px; padding-left: 10px; } .card__body-item-name { font-weight: 600; font-size: 14px; line-height: 16px; margin-bottom: 5px; } .card__body-item-txt { font-size: 12px; line-height: 14px; color: #767676; } .card__body-item-pills { padding: 6px 10px; background: #f0f6f3; border-radius: 10px; display: flex; align-items: center; font-size: 12px; line-height: 14px; color: #767676; } .card__body-item-icon { width: 20px; height: 20px; margin-right: 10px; } .card__body-item-btn { padding: 7px 5px; border: 1px solid #e1e1e1; border-radius: 10px; display: flex; align-items: center; font-size: 12px; line-height: 14px; color: #767676; } .card__body-item-manual { width: 20px; height: 20px; margin-right: 5px; transition: all 0.3s; } .v-scroll:before { content: ""; left: 0; top: 0; width: calc(100% - 1px); height: 40px; position: absolute; pointer-events: none; opacity: 0; z-index: -1; will-change: transform; transition: all 0.3s; background: linear-gradient( to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .v-scroll:after { content: ""; left: 0; bottom: 0; width: calc(100% - 1px); height: 40px; position: absolute; pointer-events: none; opacity: 0; z-index: -1; will-change: transform; transition: all 0.3s; background: linear-gradient( to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .left-shadow:before, .top-shadow:before { opacity: 1; z-index: 2; } .bottom-shadow:after, .right-shadow:after { opacity: 1; z-index: 2; } .card__overlay { background: rgba(204, 250, 223, 0.7); backdrop-filter: blur(2px); padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: absolute; top: 50px; left: 0; bottom: 10px; width: 100%; z-index: -1; opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; } .card__overlay.show { opacity: 1; visibility: visible; z-index: 10; } .card__overlay-inner { text-align: center; } .card__overlay-icon { margin: 0 auto 10px; } .card__overlay-icon svg { fill: #4f6558; } .card__overlay-title { font-size: 18px; line-height: 21px; text-transform: uppercase; color: #257441; margin-bottom: 10px; font-weight: 700; } .card__overlay-subtitle { font-size: 12px; line-height: 14px; text-transform: uppercase; color: #257441; margin-bottom: 10px; } .card__overlay-btn { background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); padding: 15px 25px; font-size: 13px; line-height: 16px; border: none; color: #fff; max-width: 156px; margin: 0 auto; } .card__premium { background: linear-gradient(335.46deg, #e7f1eb 0%, #d9ffc2 100%); padding: 20px 30px; } .card__premium-hidden { display: none; } .card__premium:before { display: none; } .card__premium-icon { width: 40px; height: 40px; background: rgba(13, 203, 91, 0.1); border-radius: 10px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; } .card__premium-icon svg { fill: #0bcb5b; stroke: #0bcb5b; } .card__premium-title { font-weight: 700; font-size: 22px; line-height: 26px; text-align: center; text-transform: uppercase; color: #257441; margin: 0 -20px 10px; height: 52px; } .card__premium-title span { display: block; } .card__premium-price { color: #257441; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 20px; } .card__premium-price-txt { display: block; font-size: 14px; line-height: 1; } .card__premium-price-val { display: block; font-size: 38px; line-height: 0.9; } .card__premium-img { height: 186px; display: flex; align-items: center; justify-content: center; } .card__premium-img img { height: 100%; } .card__premium-btn { background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); border: none; font-weight: 600; color: #fff; padding: 15px; font-size: 22px; line-height: 25px; } .protocol-single { margin-bottom: 100px; } .protocol-single .webinar__head { margin-bottom: 50px; } .headline__subtitle { padding-left: 65px; font-weight: 700; font-size: 22px; line-height: 1.5; } .protocol-single__group { margin-bottom: 50px; position: relative; } .protocol-single__group.hidden { margin-bottom: 20px; } .protocol-single__group.hidden:after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(0deg, #ffffff 0%, rgba(217, 217, 217, 0) 100%); } .protocol-single__group.hidden:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: #fff; z-index: 1; } .protocol-single__group.hidden .protocol-single__group-head { margin: 0; } .protocol-single__group-head { margin-bottom: 90px; position: relative; } .protocol-single__group-holder { max-width: 1000px; margin: 0 auto; } .protocol-single__item { display: flex; flex-wrap: wrap; margin: 0 -35px 50px; } .protocol-single__item-box { width: 50%; padding: 0 35px; position: relative; } .protocol-single__item .app-method { right: 35px; } .protocol-single__item-img { max-width: 380px; padding-bottom: 81.8%; margin-bottom: 30px; } .protocol-single__item-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s; } .protocol-single__item .product-advantages { width: auto; margin: 0; justify-content: flex-start; } .protocol-single__item .product-advantages-item { max-width: 90px; width: 100%; } .protocol-single__item-head { display: flex; align-items: center; margin-bottom: 20px; } .protocol-single__item-num { background: rgba(13, 203, 91, 0.1); border-radius: 10px; padding: 10px; font-weight: 700; font-size: 40px; line-height: 47px; color: #0dcb5b; margin-right: 15px; } .protocol-single__item-title { font-weight: 700; font-size: 28px; line-height: 33px; text-transform: uppercase; } .protocol-single__item-txt { font-size: 16px; line-height: 1.5; } .protocol-single__item-txt p { margin-bottom: 24px; } .protocol-single__tags { margin-bottom: 40px; } .protocol-single__tags-title { font-weight: 700; font-size: 28px; line-height: 33px; margin-bottom: 20px; } .protocol-single__tags-list { display: flex; flex-wrap: wrap; } .protocol-single__tags-item { cursor: pointer; transition: all 0.2s; background: #f0f3f6; border-radius: 10px; display: flex; align-items: center; padding: 20px; font-weight: 500; font-size: 15px; line-height: 1.2; position: relative; margin-bottom: 10px; } .protocol-single__tags-item.active { background-color: #f0f6f3; } .protocol-single__tags-item.active .protocol-single__tags-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .protocol-single__tags-item:not(:last-child) { margin-right: 10px; } .protocol-single__tags-icon { width: 20px; height: 20px; margin-right: 10px; flex-shrink: 0; flex-grow: 0; } .protocol-single__tags-name { flex-shrink: 1; flex-grow: 1; } .protocol-single__tags-tooltip { position: absolute; z-index: 1; width: 250px; top: 100%; left: 0; background: #ffffff; box-shadow: 0 4px 23px rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 15px 15px 15px 45px; font-weight: 400; font-size: 14px; line-height: 1.5; color: #4f4f4f; transition: all 0.2s ease-in-out; transform: translateY(15px); opacity: 0; visibility: hidden; } .protocol-single__tags-tooltip svg { position: absolute; left: 17px; top: 15px; stroke: #0bcb5b; } .protocol-single__tags-tooltip:after { content: ""; position: absolute; top: -6px; left: 22px; width: 14px; height: 14px; transform: rotate(45deg); background: #fff; } .protocol-single__more { background: #f8f8f8; border-radius: 10px; padding: 12px 60px 12px 36px; position: relative; } .protocol-single__more:before { content: ""; position: absolute; top: 12px; left: 10px; width: 16px; height: 16px; background-image: url(../img/icons/info.svg); } .protocol-single__more p { font-size: 12px; line-height: 1.5; color: #767676; margin-bottom: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .protocol-single__more.show p { display: block; } .protocol-single__more a { color: #0dcb5b; font-size: 12px; line-height: 14px; } .protocol-single__line { margin: 50px 0; height: 10px; background: #f8f8f8; border-radius: 5px; } .protocol-single .list-platform .item-platform:last-child { border-bottom: none; } .protocol-single__list { margin-bottom: 30px; } .protocol-single__list p { font-size: 16px; line-height: 1.5; margin-bottom: 30px; } .protocol-single__list ul { column-count: 2; } .protocol-single__list ul li { font-size: 16px; line-height: 1.5; margin-bottom: 20px; display: flex; } .protocol-single__list ul li svg { display: inline-flex; flex-shrink: 0; flex-grow: 0; margin-right: 10px; stroke: #0bcb5b; } .protocol-single__disclaimer { margin-bottom: 50px; } .protocol-single__disclaimer.disclaimer .row p { display: block; } .protocol-single__disclaimer.disclaimer .link:after { transform: none; } .protocol-single__experts { margin-bottom: 50px; } .protocol-single__group-head .product-head-info { max-width: 630px; } .get-access { border-radius: 0 0 15px 15px; padding: 30px; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1000px; } .get-access:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: -2; border-radius: 0 0 15px 15px; } .get-access:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: linear-gradient( 180deg, rgba(13, 203, 91, 0) 0%, rgba(13, 203, 91, 0.26) 100% ); border-radius: 0 0 15px 15px; } .get-access__logo { padding-right: 10px; margin-right: 15px; border-right: 1px solid #3d7b54; } .get-access__box { display: flex; align-items: center; font-size: 20px; line-height: 23px; text-transform: uppercase; color: #3d7b54; } .get-access__icon { margin-right: 10px; flex-shrink: 0; flex-grow: 0; width: 34px; height: 34px; } .get-access__icon svg { width: 100%; height: 100%; fill: #0bcb5b; } .get-access__txt span { padding: 0 5px; } .get-access__decor { position: absolute; bottom: -30px; left: calc(50% - 11px); border: 12px solid transparent; border-top: 22px solid #c8f3d9; } .protocol-references { padding: 30px 0 50px; } .protocol-references__holder ol { counter-reset: item; column-count: 2; } .protocol-references__holder ol li { font-weight: 500; font-size: 13px; line-height: 20px; counter-increment: item; max-width: 580px; padding: 0 0 0 30px; position: relative; display: none; } .protocol-references__holder ol li:before { content: counter(item) "."; position: absolute; top: 0; left: 0; width: 20px; font-weight: 700; font-size: 12px; line-height: 20px; color: #b4b4b4; text-align: right; } .protocol-references__holder ol li:not(:last-child) { padding-bottom: 10px; margin-bottom: 10px; } .protocol-references__holder ol li:not(:last-child):after { content: ""; position: absolute; bottom: 0; left: 30px; right: 0; height: 1px; background: #e5e5e5; } .protocol-references__holder ol li:nth-child(1), .protocol-references__holder ol li:nth-child(2), .protocol-references__holder ol li:nth-child(3), .protocol-references__holder ol li:nth-child(4), .protocol-references__holder ol li:nth-child(5), .protocol-references__holder ol li:nth-child(6), .protocol-references__holder ol li:nth-child(7), .protocol-references__holder ol li:nth-child(8), .protocol-references__holder ol li:nth-child(9), .protocol-references__holder ol li:nth-child(10) { display: block; } .protocol-references__holder ol li a { color: #0dcb5b; border-bottom: 1px solid transparent; } .protocol-references__more { width: calc(50% - 36px); margin-left: auto; margin-top: 30px; } .protocol-references__holder.list-drop .references-more { display: inline-flex; } .protocol-references__holder.list-drop.show ol li { display: block; } .protocol-references__holder.list-drop.show .references-more:after { transform: rotate(270deg); } /* Single Protocol page END*/ /*Webinar page START*/ .webinar-head { display: flex; align-items: center; margin-bottom: 15px; } .webinar-head-title { font-weight: 700; font-size: 60px; line-height: 1; display: flex; align-items: center; flex-shrink: 1; flex-grow: 1; } .webinar-head-title:after { content: ""; display: block; margin: 0 20px; flex-shrink: 1; flex-grow: 1; height: 12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 100%; background-color: #f8f8f8; } .webinar-head-title span { padding-right: 5px; } .webinar-head-title i { padding: 0 10px 0 5px; font-weight: 400; } .webinar__head { margin-bottom: 80px; } .webinar__head-holder { display: flex; margin-bottom: 50px; } .webinar__head-title { font-weight: 700; font-size: 60px; line-height: 1; flex-grow: 0; flex-shrink: 0; } .webinar__head-title span { display: block; color: #0dcb5b; } .webinar__head-box { position: relative; flex-shrink: 1; flex-grow: 1; padding-left: 30px; margin-top: 17px; } .webinar__head-box:before { content: ""; position: absolute; top: 12px; left: 30px; right: 56px; height: 10px; background: #f8f8f8; border-radius: 5px; } .webinar__head-box .share-btn { margin-left: auto; margin-bottom: 30px; } .webinar__head-info { background: #f0f6f3; border-radius: 10px; padding: 20px 20px 20px 52px; max-width: 640px; width: 100%; margin-left: auto; } .webinar__head-info-text { position: relative; font-weight: 500; font-size: 16px; line-height: 19px; } .webinar__head-info-text svg { position: absolute; width: 18px; height: 20px; top: 0; left: -28px; fill: #0bcb5b; stroke: #0bcb5b; } .webinar__head-info-text p:not(:last-child) { margin-bottom: 19px; } .webinar__head-info-text p span { color: #e9686a; } .webinar__head-inner { max-width: 1000px; margin: 0 auto; text-align: center; } .webinar__head-inner:after { content: ""; margin-top: 30px; display: block; height: 10px; width: 100%; background-color: #f8f8f8; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .webinar__head-descr { font-weight: 700; font-size: 36px; line-height: 48px; text-align: center; max-width: 1000px; margin: 0 auto; } .webinar__head-descr.small { font-size: 22px; margin-top: 10px; } .webinar__head-descr span { color: #0dcb5b; } .webinar__head-img { margin: 30px 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #e7faef; padding-bottom: 50%; } .webinar__head-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .btn-border { height: 40px; border-color: #0dcb5b; padding: 8px 20px; } .btn-premium { height: 40px; border: none; background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; padding: 8px 20px; white-space: nowrap; } .btn-premium svg { opacity: 0.6; fill: #fff; width: 20px; height: 20px; margin-right: 10px; flex-shrink: 0; flex-grow: 0; } /*Webinar page END*/ /*Supplements combo START*/ .supplements-combo { margin: 50px 0 30px; } .supplements-combo .webinar-head { margin-bottom: 23px; } .products_collections-inner .product-head-left { margin-right: 40px; } .products_collections-inner .product-head-info { max-width: 455px; } .products_collections-inner .product-head .text:nth-child(even) { margin-top: 21px; } .products_collections-inner .product-head { margin: 30px 0; } .protocol-search { position: relative; margin-bottom: 10px; } .protocol-search__icon { content: ""; position: absolute; left: 20px; top: calc(50% - 10px); width: 20px; height: 20px; } .protocol-search__icon svg { stroke: #676d7c; } .protocol-search .input { padding: 0 14px; height: 44px; width: 100%; background: #f8f9fa; border: 1.5px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 400; color: #292b35; transition: all 0.2s ease; } .protocol-search .input:hover { background: #f0f1f2; } .protocol-search .input:focus { background: #fff; border-color: #09d166; box-shadow: 0 0 0 3px rgba(9, 209, 102, 0.1); outline: none; } .protocol-search .input::placeholder { color: #999; font-weight: 400; } .populars .input::-webkit-input-placeholder { color: #a0a6b1 !important; } .populars .input::-moz-placeholder { color: #a0a6b1 !important; } .populars .input:-ms-input-placeholder { color: #a0a6b1 !important; } .populars .input:-moz-placeholder { color: #a0a6b1 !important; } .products_collections-inner .row { display: flex; flex-wrap: wrap; margin: 0 -7px; } .products_collections-inner .col { width: 33.333%; padding: 0 7px; margin-bottom: 10px; } .products-prem { margin: 22px 0 30px; } .sidebar-title { display: flex; align-items: center; margin-bottom: 10px; } .sidebar-title__icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; background: rgba(13, 203, 91, 0.1); border-radius: 10px; } .sidebar-title__icon.lazy-parent:before { display: none; } .sidebar-title__icon img, .sidebar-title__icon img.lazy { opacity: 1 !important; visibility: visible !important; } .sidebar-title__icon svg { fill: #0dcb5b; stroke: #0dcb5b; } .sidebar-title__name { font-weight: 700; font-size: 20px; line-height: 21px; padding-left: 15px; } .sidebar-combos { display: flex; flex-wrap: wrap; margin: 0 -5px 30px; } .sidebar-combos__col { width: 50%; padding: 0 5px; margin-bottom: 10px; } .sidebar-combos__item { background: #f0f3f6; border-radius: 10px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 94px; transition: all 0.3s ease-in-out; cursor: pointer; border: 2px solid #f0f3f6; } .sidebar-combos__item.active, .sidebar-combos__item.active:hover { background: linear-gradient(117.6deg, #f0f6f3 0%, #ffffff 100%); border-color: #0dcb5b; box-shadow: 0 5px 15px #d5eddf; } .sidebar-combos__item-img .img { width: 100%; height: 100%; object-fit: contain; max-height: 78px; } .sidebar-combos__item-icon { margin-bottom: 10px; } .sidebar-combos__item-icon img { filter: invert(1); } .sidebar-combos__item-name { font-weight: 500; font-size: 14px; line-height: 17px; } .sidebar-combos__item-name span { font-weight: 400; } .sidebar-supplements, .sidebar-rating { margin-bottom: 50px; } .sidebar-supplements .input { height: 44px; width: 100%; background: #f8f9fa; border: 1.5px solid transparent; border-radius: 10px; padding: 0 14px; margin: 0; font-weight: 400; font-size: 14px; color: #292b35; transition: all 0.2s ease; } .sidebar-supplements .input:hover { background: #f0f1f2; } .sidebar-supplements .input:focus { background: #fff; border-color: #09d166; box-shadow: 0 0 0 3px rgba(9, 209, 102, 0.1); outline: none; } .sidebar-supplements .input::placeholder { color: #999; font-weight: 400; } .buttons__ctrl { display: flex; flex-wrap: wrap; margin-bottom: 7px; } .buttons__ctrl .btn { padding: 9px 13px; background: #ffffff; border: 1px solid #d4d4d6; border-radius: 10px; font-weight: 500; font-size: 12px; line-height: 14px; color: #747373; text-transform: inherit; margin-bottom: 5px; } .buttons__ctrl .btn.active { background: #f0f6f3; border-color: #0dcb5b; color: #0dcb5b; } .buttons__ctrl .btn:not(:last-child) { margin-right: 5px; } .sidebar-supplements__more { border-top: 1px solid #dee1e6; padding: 10px 0 0; display: flex; justify-content: center; width: 100%; } .sidebar-supplements__more .link { text-transform: uppercase; color: #0dcb5b; font-size: 14px; line-height: 16px; display: flex; align-items: center; } .sidebar-supplements__more .link:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); transform: rotate(90deg); margin-left: 10px; } .sidebar-supplements__more .link.active:after { transform: rotate(-90deg); } .sidebar-webinar, .sidebar-bestseller__slider { overflow: hidden; padding: 0 15px 15px; margin: 0 -15px 15px; position: relative; } .sidebar-protocols__slider { overflow: hidden; position: relative; padding: 0 10px 15px; margin: 0 -15px 15px; } .sidebar-bestseller, .sidebar-webinar { margin-top: 15px; } .sidebar-bestseller__slider { margin-bottom: 35px; display: none; } .sidebar-bestseller__slider.active { display: block; } .sidebar-webinar .popular-webinars__item { padding: 15px; border: 2px solid #f7f7f7; border-radius: 10px; } .sidebar-webinar .popular-webinars__item-body { padding: 15px 0 0; } .sidebar-webinar .popular-webinars__item-img img.preview, .sidebar-webinar .popular-webinars__item-img { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .sidebar-webinar .popular-webinars__item-txt { padding: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; font-weight: 400; margin-bottom: 10px; } .sidebar-webinar .popular-webinars__item-txt:after { display: none; } .sidebar-webinar .popular-webinars__item-play { width: 56px; height: 56px; } .sidebar-webinar .popular-webinars__item-offer { width: 80px; height: 80px; font-size: 12px; line-height: 1; bottom: -40px; } .sidebar-webinar .popular-webinars__item-offer span { font-size: 12px; } .sidebar-webinar .popular-webinars__item-title { font-size: 14px; line-height: 16px; margin-bottom: 10px; } .sidebar-webinar .popular-webinars__item-price { font-size: 18px; line-height: 21px; } .popular-webinars__item-btn { background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); border: none; font-size: 22px; line-height: 1; color: #fff; font-weight: 500; padding: 17px 40px; } .popular-webinars__item-btn.disabled { background-color: #cbcbcb; box-shadow: none; } .sidebar-webinar .popular-webinars__item-btn, .bestseller__item .popular-webinars__item-btn { font-size: 13px; line-height: 15px; padding: 10px 18px; } .sidebar-webinar .popular-webinars__item-btn svg, .bestseller__item .popular-webinars__item-btn svg { fill: #fff; margin-right: 10px; } .sidebar-webinar .popular-webinars__item-bottom { position: static; padding-top: 15px; border-top: 1px dashed #dedede; } .sidebar-slider .swiper-pagination, .sidebar-slider .swiper-button-next, .sidebar-slider .swiper-button-prev { position: static; } .sidebar-slider__ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; } .sidebar-slider__ctrl .swiper-pagination { position: static; display: flex; } .sidebar-slider .swiper-button-next, .sidebar-slider .swiper-button-prev { width: 30px; height: 30px; margin: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: all 0.3s ease-in-out; } .sidebar-slider .swiper-pagination { display: flex; align-items: center; width: auto; } .sidebar-slider .swiper-pagination-bullet { width: 4px; height: 4px; background: #d9d9d9; display: block; margin: 0 4px; opacity: 1; } .sidebar-slider .swiper-pagination-bullet-active { width: 8px; height: 8px; background: #0dcb5b; } .sidebar-slider .swiper-slide { padding: 0; } .bestseller__item { display: block; background: #ffffff; border: 2px solid #f7f7f7; border-radius: 10px; padding: 15px 15px 20px; } .bestseller__item-head { display: flex; align-items: flex-start; margin-bottom: 30px; } .bestseller__item-img { display: block; width: 80px; height: 80px; flex-shrink: 0; flex-grow: 0; } .bestseller__item-img img { width: 100%; height: 100%; object-fit: contain; } .bestseller__item-box { display: block; flex-shrink: 1; flex-grow: 1; padding-left: 20px; } .bestseller__item-tag { display: inline-flex; background: #f0f6f3; border-radius: 3px; padding: 4px 10px; font-size: 12px; line-height: 14px; color: #9cc3ac; margin-bottom: 10px; } .bestseller__item-name { display: block; font-weight: 700; font-size: 14px; line-height: 16px; margin-bottom: 10px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 32px; } .bestseller__item-category { font-size: 12px; line-height: 14px; color: #9d9d9d; } .bestseller__item-body { display: block; border-top: 1px dashed #dedede; padding-top: 15px; } .bestseller__item-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .bestseller__item-price { display: flex; align-items: flex-end; } .bestseller__item-price .txt { font-size: 12px; line-height: 14px; color: #747373; padding-right: 4px; } .bestseller__item-price .val { font-size: 18px; line-height: 1; font-weight: 700; } .bestseller__item-price .val.unavailable { font-size: 12px; line-height: 17px; text-transform: inherit; color: #a9aaae; font-weight: 500; padding-left: 10px; } .bestseller__item-bottom { display: flex; align-items: center; justify-content: space-between; } .bestseller__item-score { display: flex; align-items: center; width: 98px; z-index: 1; position: relative; } .bestseller__item-score .circle { display: block; width: 50px; height: 50px; flex-shrink: 0; flex-grow: 0; margin-left: auto; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .bestseller__item-score .circle__value { width: auto; height: auto; font-size: 11px; line-height: 13px; } .bestseller__item-score-txt { background: #a9aaae; padding: 9px 27px 9px 6px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #fff; font-weight: 500; font-size: 9px; line-height: 11px; text-transform: uppercase; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 80%; } .health-topics__ctrl { display: flex; gap: 10px; margin-top: 10px; width: 100%; opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transition: opacity 0.2s ease, visibility 0.2s ease, max-height 0.2s ease; } .health-topics__ctrl.visible { opacity: 1; visibility: visible; max-height: 200px; } .health-topics__ctrl-box { display: flex; align-items: center; width: 100%; gap: 8px; } .health-topics__ctrl-clear { width: calc(30% - 5px); font-weight: 500; font-size: 13px; line-height: 15px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; color: #666; background: #f0f0f0; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .health-topics__ctrl-clear:hover { background: #e5e5e5; color: #333; } .health-topics__ctrl-btn { width: calc(70% - 5px); background: #09d166; font-weight: 500; font-size: 13px; line-height: 15px; padding: 10px 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border: none; border-radius: 8px; box-shadow: 0 3px 8px rgba(9, 209, 102, 0.35); cursor: pointer; transition: all 0.2s ease; } .health-topics__ctrl-btn:hover { background: #07b85a; box-shadow: 0 4px 12px rgba(9, 209, 102, 0.45); } .health-topics__ctrl-btn:after { content: ""; display: inline-flex; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-slider.svg); transform: rotate(-90deg); margin-left: 8px; filter: brightness(0) invert(1); } .health-topics__ctrl-btn .val { font-weight: 700; padding: 0 3px; } .protocols-section { margin-bottom: 100px; } .protocols-section__more { max-width: 33.333%; margin: 0 auto; padding: 0 2px; } .protocols-section__more .btn { background: #f0f6f3; border: none; padding: 0 10px; line-height: 40px; } .protocols-section__more .btn:after { transition: 0.3s; content: ""; display: inline-flex; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-link.svg); transform: rotate(90deg); margin-left: 10px; filter: brightness(0) invert(0); } /*Supplements combo END*/ /*Experts page START*/ .expert__subtitle { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .expert__subtitle-icon { width: 50px; height: 50px; background: rgba(13, 203, 91, 0.1); border-radius: 10px; margin-right: 20px; display: flex; align-items: center; justify-content: center; } .expert__subtitle-icon svg { fill: #0dcb5b; } .expert__subtitle-name { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; } .static-content-holder { margin: 0 auto; } .static-content-holder.holder-930 { max-width: 930px; } .static-content h2 { font-weight: 700; font-size: 36px; line-height: 48px; margin-bottom: 48px; } .static-content h3 { font-weight: 700; font-size: 28px; line-height: 33px; margin-bottom: 20px; } .static-content h6 { font-weight: 700; font-size: 16px; line-height: 19px; margin-bottom: 20px; } .static-content .description { font-weight: 700; font-size: 22px; line-height: 33px; margin-bottom: 100px; } .static-content p { font-size: 16px; line-height: 24px; margin-bottom: 24px; } .static-content a { border-bottom: 1px solid transparent; color: #0dcb5b; } .static-content strong { font-weight: 700; } .static-content ul { margin-bottom: 24px; } .static-content ul > li { color: #000; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: normal; margin-bottom: 12px; position: relative; padding-left: 24px; } .static-content ul > li:before { content: ""; position: absolute; top: 4px; left: 0; background-color: transparent; width: 16px; height: 16px; background-size: cover; background-image: url(../img/icons/blog-list-dot.svg); background-repeat: no-repeat; background-position: center center; } .expert { padding: 50px 0; background: #14161e; position: relative; margin-bottom: 100px; z-index: 1; } .expert .experts-slider__title { margin-bottom: 95px; } .expert .experts-slider__social { opacity: 1; margin-top: 10px; } .expert__item { display: flex; align-items: center; margin-bottom: 50px; } .expert__item:nth-child(even) { flex-direction: row-reverse; } .expert__item-img { flex-shrink: 0; flex-grow: 0; width: 400px; padding-bottom: 47%; position: relative; } .expert__item-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .expert__item-content { flex-shrink: 1; flex-grow: 1; padding-left: 50px; } .expert__item:nth-child(even) .expert__item-content { padding: 0 50px 0 0; } .expert__item-name { display: flex; align-items: center; margin-bottom: 40px; } .expert__item-name div { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-grow: 0; background: rgba(13, 203, 91, 0.1); border-radius: 10px; margin-right: 20px; } .expert__item-name svg { fill: #0dcb5b; } .expert__item-name span { font-weight: 700; font-size: 34px; line-height: 40px; color: #fff; } .expert__item-box { display: flex; border-bottom: 1px solid #303341; padding-bottom: 20px; margin-bottom: 20px; } .expert__item-experience { width: 100px; flex-shrink: 0; flex-grow: 0; border-top: 1px solid #303341; padding-top: 20px; text-align: center; margin-right: 50px; } .expert__item-experience .val { font-weight: 700; font-size: 34px; line-height: 40px; color: #ffffff; margin-bottom: 5px; } .expert__item-experience .val span { font-weight: 300; } .expert__item-experience .txt { font-size: 12px; line-height: 1.5; text-transform: uppercase; color: #767676; } .expert__item-descr { flex-shrink: 1; flex-grow: 1; font-size: 18px; line-height: 1.5; color: #767676; } .expert__item-prof { font-size: 16px; line-height: 2; color: #7b7f8e; } .expert__item-work { font-size: 14px; line-height: 2; color: #5c6174; } .expert-hero { position: relative; z-index: 1; padding: 20px 0 0; overflow: hidden; } .expert-hero__bg { display: flex; flex-wrap: nowrap; position: absolute; top: 0; left: 0; width: 100%; z-index: -1; animation: carousel 80s linear infinite; } .expert-hero__bg-item { width: 100%; flex-shrink: 0; flex-grow: 0; } .expert-hero__bg-item img { width: 100%; } .expert-hero__holder { position: relative; z-index: 1; max-width: 770px; margin: 0 auto 10px; } .expert-hero__holder:after { content: ""; position: absolute; z-index: -2; top: 50%; width: 150%; height: 100%; left: 50%; transform: translateX(-50%); background-image: url(../img/experts/radial-shadow.svg); background-size: cover; background-position: center; } .expert-hero__decor { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; } .expert-hero__title { font-weight: 700; font-size: 106px; line-height: 1.2; text-align: center; color: #ffffff; margin-bottom: 20px; } .expert-hero__txt { font-size: 18px; line-height: 1.5; text-align: center; color: #ffffff; } @keyframes carousel { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .expert-hero__brands { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; padding: 82px 75px 25px; border-bottom: 1px solid #e5e5e5; } .expert-hero__brands-shadow:before, .expert-hero__brands-shadow:after { content: ""; position: absolute; top: 35px; /*height: 82px;*/ height: 194px; width: 100px; } .expert-hero__brands-shadow:before { left: -100px; background: linear-gradient( to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .expert-hero__brands-shadow:after { right: -100px; background: linear-gradient( to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .expert-hero__brands-item { display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; margin: 0 10px; filter: grayscale(100%); opacity: 0.5; } .expert-hero__brands:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/experts/experts-brands-bg.svg) no-repeat top center / cover; } .expert-hero__brands:after { content: ""; position: absolute; top: 82px; left: 0; right: 0; bottom: 0; z-index: -1; background: #fff; } /*Experts page END*/ /*Contact us page START*/ .faq.faq--contacts { padding: 50px 0 0; } .faq.faq--contacts h2 { line-height: 1; } .faq.faq--contacts sub { font-size: 12px; font-weight: 700; } .section-text { padding: 50px 0 100px; } .section-text__holder { display: flex; } .section-text__aside { width: 270px; flex-shrink: 0; flex-grow: 0; } .section-text__aside-holder { height: 100%; } .section-text__aside-item:not(:first-child) { margin-top: 50px; } .section-text__nav { position: sticky; top: 10px; z-index: 15; backdrop-filter: blur(16px); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .section-text__prem .product-prem-img { padding-bottom: 100%; } .section-text__prem .product-prem-img img { width: 100%; height: 100%; } .section-text__content { flex-shrink: 1; flex-grow: 1; padding-left: 50px; } .section-text__nav-link { padding: 15px; display: flex; align-items: center; background: #f0f3f6; border-radius: 10px; font-size: 14px; font-weight: 500; } .section-text__nav-link:not(:last-child) { margin-bottom: 10px; } .section-text__nav-link.active { background: linear-gradient(117.6deg, #f0f6f3 0%, #ffffff 100%); border: 2px solid #0dcb5b; box-shadow: 0 5px 15px #d5eddf; } .section-text__nav-link svg { flex-shrink: 0; flex-grow: 0; margin-right: 15px; fill: #000; stroke: #000; } .section-text__head { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #e6e7ec; } .section-text__head-title { display: flex; align-items: center; margin-bottom: 50px; color: #000; } .section-text__head-title .join-advantages__head-icon { margin: 0 30px 0 0; flex-shrink: 0; flex-grow: 0; } .section-text__head-title h1 { font-weight: 700; font-size: 60px; line-height: 1; } .section-text__head-subtitle { display: flex; color: #000; } .section-text__head-subtitle h2 { font-size: 28px; line-height: 48px; } .section-text__head-subtitle strong { font-weight: 700; } .section-text__head-icon { width: 50px; height: 50px; flex-shrink: 0; flex-grow: 0; margin-right: 15px; background: rgba(13, 203, 91, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .section-text__head-icon svg { fill: #0dcb5b; } .join-advantages__head-icon { width: 139px; height: 139px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2) 32.81%, rgba(0, 0, 0, 0.02) 100% ), linear-gradient(180deg, #ffffff 0%, #d2ffe6 100%); box-shadow: inset -1.08479px -1.08479px 1.08479px rgba(0, 0, 0, 0.05), inset 1.08479px 1.08479px 1.08479px rgba(255, 255, 255, 0.2); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin: 0 auto 20px; } .section-text__head-title .join-advantages__head-icon { margin: 0 30px 0 0; flex-shrink: 0; flex-grow: 0; } .contacts .webinar-head-title span { padding: 0 0 0 10px; } .contacts__list { display: flex; flex-wrap: wrap; margin: 0 -10px 50px; } .contacts__list-item { width: 33.333%; padding: 0 10px; } .contacts__list-item:nth-child(2) .contacts__list-link { background: linear-gradient(0deg, #ebf5ff, #ebf5ff), #f0f6f3; } .contacts__list-item:nth-child(3) .contacts__list-link { background: linear-gradient(0deg, #f4f1f5, #f4f1f5), #f0f6f3; } .contacts__list-link { display: flex; align-items: center; padding: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: linear-gradient(0deg, #eafff2, #eafff2), #f0f6f3; color: #202027; } .contacts__list-link svg { flex-shrink: 0; flex-grow: 0; } .contacts__list-link span { padding-left: 20px; font-weight: 700; font-size: 16px; line-height: 1.5; } .contacts__holder { display: flex; align-items: center; flex-wrap: wrap; margin: 0 -40px; padding-bottom: 50px; } .contacts__inner { width: 50%; padding: 0 40px; } .contacts__img { position: relative; } .contacts__info-title { font-weight: 700; font-size: 40px; line-height: 1.1; margin-bottom: 20px; } .contacts__info-head { display: flex; align-items: center; margin-bottom: 20px; } .contacts__info-txt { flex-shrink: 1; flex-grow: 1; padding-right: 10px; font-weight: 700; font-size: 16px; line-height: 1.5; color: #202027; } .social { flex-shrink: 0; flex-grow: 0; display: flex; align-items: center; } .social-item { display: flex; } .social-item:not(:last-child) { margin-right: 20px; } .social-item svg { fill: #000; transition: all 0.3s; } .contact-form__row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .contacts__form-col { width: 100%; padding: 0 10px; margin-bottom: 20px; } .contacts__form-col--50 { width: 50%; } .contacts__form .input { border: 1px solid #e5e5e5; height: 50px; font-weight: 500; } .contacts__form .textarea { border: 1px solid #e5e5e5; height: 100px; font-weight: 500; resize: none; padding: 16px 20px; } .contacts__form .label { font-weight: 600; font-size: 16px; line-height: 19px; color: #000000; display: inline-flex; margin-bottom: 15px; } .contacts__form .btn { width: 100%; display: flex; align-items: center; justify-content: center; height: 50px; border: none; background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; padding: 8px 20px; white-space: nowrap; font-weight: 500; font-size: 15px; box-sizing: border-box; } .contacts__form .btn span { padding-right: 10px; } /*Custom Select Styles*/ .select2-container * { outline: none; } .select2-container { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; z-index: 10; } .select2-container .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding: 1px 40px 0 20px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 10px; border-radius: 10px; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { overflow: hidden; min-height: 36px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; height: 36px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; overflow: hidden; -webkit-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15); } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 12px 10px; display: block; -webkit-transition: color 0.3s, background 0.3s; -o-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; background: #fff; -webkit-user-select: none; font-weight: 500; } .select2-results__option span { display: flex; align-items: center; } .select2-results__option img { width: 20px; height: 20px; margin-right: 10px; } @media screen and (min-width: 1025px) { .select2-results__options .select2-results__option:hover { background-color: #0dcb5b !important; color: #fff !important; } } .select2-results__option--highlighted { background-color: #252525; color: #fff; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-results__option:not([id]) { display: none; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open.select2-container--default .select2-selection--single { background-color: #0dcb5b; } .select2-container--open.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; } .select2-container--open .select2-selection--multiple .select2-selection__rendered:after { -webkit-transform: rotate(224deg); -ms-transform: rotate(224deg); transform: rotate(224deg); } .select2-container--open .select2-dropdown--above { border-bottom: none; border-radius: 10px 10px 0 0; } .select2-container--open .select2-dropdown--below { border-top: none; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: none; padding: 10px; background-color: #fff; } .select2-search--dropdown .select2-search__field { width: 100%; height: 40px; line-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #a18da3; -webkit-transition: border-color 0.3s; -o-transition: border-color 0.3s; transition: border-color 0.3s; } .select2-search--dropdown .select2-search__field:focus { border-color: #fd9727; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .select2-container--default .select2-selection--single { outline: none; height: 50px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; } .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 14px; line-height: 47px; font-weight: 500; -webkit-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; border: 1px solid #ff8c04; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #9cb1a6; } .select2-container--default .select2-selection--single .select2-selection__rendered:not([title="Select.."]) { border-color: #e5e5e5; } .select2-container--default .select2-selection--single .select2-selection__rendered span { display: flex; align-items: center; line-height: inherit; } .select2-container--default .select2-selection--single .select2-selection__rendered span img { margin-right: 5px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { font-size: 14px; font-weight: 500; } .select2-container--open .select2-selection--single .select2-selection__placeholder { color: #fff; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; position: absolute; top: 0; right: 0; width: 39px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: solid #09d166; border-width: 0 2px 2px 0; display: inline-block; padding: 4px; -webkit-transform: translate3d(0, -50%, 0) rotate(45deg); transform: translate3d(0, -50%, 0) rotate(45deg); left: 5px; position: absolute; -webkit-transition: border-color 0.3s, -webkit-transform 0.3s; transition: border-color 0.3s, -webkit-transform 0.3s; -o-transition: transform 0.3s, border-color 0.3s; transition: transform 0.3s, border-color 0.3s; transition: transform 0.3s, border-color 0.3s, -webkit-transform 0.3s; top: 50%; margin-top: -1px; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #e3dde3; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { -webkit-transform: rotate(224deg); -ms-transform: rotate(224deg); transform: rotate(224deg); border-color: #fff; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #a18da3; -webkit-border-radius: 10px; border-radius: 10px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0 36px 0 5px; position: relative; width: 100%; } .select2-selection--multiple .select2-selection__rendered:after { content: ""; position: absolute; top: 50%; right: 18px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform: translate3d(0, -50%, 0) rotate(45deg); transform: translate3d(0, -50%, 0) rotate(45deg); border: solid #a18da3; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { margin-top: 5px; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e3dde3; -webkit-border-radius: 20px; border-radius: 20px; position: relative; cursor: pointer; text-transform: capitalize; float: left; font-size: 12px; margin-right: 5px; margin: 3px 3px 3px 0; -webkit-transition: color 0.3s, background 0.3s, border-color 0.3s; -o-transition: color 0.3s, background 0.3s, border-color 0.3s; transition: color 0.3s, background 0.3s, border-color 0.3s; padding: 8px 38px 8px 18px; } @media screen and (min-width: 1025px) { .select2-container--default .select2-selection--multiple .select2-selection__choice:hover { background-color: #fd9727; color: #fff; } .select2-container--default .select2-selection--multiple .select2-selection__choice:hover .select2-selection__choice__remove { color: #fff; } } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { cursor: pointer; font-size: 26px; line-height: 1; position: absolute; top: 0; right: 18px; height: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #a18da3; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #e3dde3; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single .select2-selection__rendered, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single .select2-selection__rendered, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple .select2-selection__rendered { border-color: #0dcb5b; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 320px; overflow-y: auto; } .select2-container--default .select2-results__option[role="group"] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled="true"] { color: #fff; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0dcb5b; color: #fff; font-weight: 500; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; -webkit-border-radius: 4px; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, white 50%, #E3DDE3eee 100%); background-image: -o-linear-gradient(top, white 50%, #E3DDE3eee 100%); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(50%, white), to(#E3DDE3eee) ); background-image: linear-gradient(to bottom, white 50%, #E3DDE3eee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient( top, #E3DDE3eee 50%, #cccccc 100% ); background-image: -o-linear-gradient(top, #E3DDE3eee 50%, #cccccc 100%); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(50%, #E3DDE3eee), to(#cccccc) ); background-image: linear-gradient(to bottom, #E3DDE3eee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; -webkit-border-radius: 0; border-radius: 0; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, white 0%, #E3DDE3eee 50%); background-image: -o-linear-gradient(top, white 0%, #E3DDE3eee 50%); background-image: -webkit-gradient( linear, left top, left bottom, from(white), color-stop(50%, #E3DDE3eee) ); background-image: linear-gradient(to bottom, white 0%, #E3DDE3eee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #E3DDE3eee 50%, white 100%); background-image: -o-linear-gradient(top, #E3DDE3eee 50%, white 100%); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(50%, #E3DDE3eee), to(white) ); background-image: linear-gradient(to bottom, #E3DDE3eee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; -webkit-border-radius: 4px; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; -webkit-border-radius: 4px; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: white; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role="group"] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled="true"] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .popup-login__form .input::-webkit-input-placeholder, .checkout .input::-webkit-input-placeholder, .contacts__form .input::-webkit-input-placeholder { color: #9cb1a6 !important; font-weight: 500; } .popup-login__form .input::-moz-placeholder, .checkout .input::-moz-placeholder, .contacts__form .input::-moz-placeholder { color: #9cb1a6 !important; font-weight: 500; } .popup-login__form .input:-ms-input-placeholder, .checkout .input:-ms-input-placeholder, .contacts__form .input:-ms-input-placeholder { color: #9cb1a6 !important; font-weight: 500; } .popup-login__form .input:-moz-placeholder, .checkout .input:-moz-placeholder, .contacts__form .input:-moz-placeholder { color: #9cb1a6 !important; font-weight: 500; } /*Contact us page END*/ /*Disclaimer / Privacy / Terms pages START*/ .section-text .editor { font-weight: 400; line-height: 1.2; letter-spacing: normal; } .static-text p { font-size: 14px; line-height: 1.5; margin-bottom: 30px; color: #4f4f4f; } .section-text .editor h1, .section-text .editor h2, .section-text .editor h3 { line-height: 1.5; letter-spacing: normal; color: #000; } .section-text .editor h2 { font-size: 22px; margin-bottom: 30px; } .section-text .editor h3 { font-size: 18px; margin-bottom: 18px; } .section-text .editor ol li, .section-text .editor ul li { letter-spacing: normal; font-weight: 400; color: #000; font-size: 14px; line-height: 1.5; } /*Disclaimer / Privacy / Terms pages END*/ /*Join page START*/ .join-section { background: #f0f6f3; padding: 30px 0 140px; position: relative; } .join-section:after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 16px; background-image: url(/assets/img/home/decor-dot-white.svg); } .join-section__head { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; margin-bottom: 60px; } .join-section__decor { position: absolute; filter: drop-shadow(0px 100px 80px rgba(0, 0, 0, 0.07)) drop-shadow(0px 42px 33px rgba(0, 0, 0, 0.05)) drop-shadow(0px 22px 18px rgba(0, 0, 0, 0.04)) drop-shadow(0px 13px 10px rgba(0, 0, 0, 0.035)) drop-shadow(0px 7px 5px rgba(0, 0, 0, 0.03)) drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.02)); } .join-section__decor.first { top: 50%; transform: translateY(-50%); left: 0; } .join-section__decor.second { top: 0; right: 0; } .join-section__title { font-weight: 700; font-size: 46px; line-height: 1.2; text-align: center; color: #0dcb5b; max-width: 800px; margin: 0 auto 20px; position: relative; z-index: 1; } .join-section__subtitle { font-weight: 700; font-size: 22px; line-height: 48px; text-align: center; } .join-section__row { display: flex; margin: 0 -40px; } .join-section__col { width: 50%; padding: 0 40px; } .join-section__item { color: #000; background: #f5f4ed; box-shadow: 0 42px 33px rgba(0, 0, 0, 0.05), 0 22px 18px rgba(0, 0, 0, 0.04), 0 13px 10px rgba(0, 0, 0, 0.04), 0 7px 5px rgba(0, 0, 0, 0.03); border-radius: 20px; padding: 30px 20px 30px 40px; height: 100%; } .join-section__item-box { position: relative; margin-bottom: 20px; } .join-section__item-box:before { content: ""; position: absolute; top: 0; left: -20px; bottom: 20px; width: 8px; background: #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .join-section__item-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .join-section__item-tag { display: flex; align-items: center; background: #fffef5; border-radius: 10px; padding: 7px 10px; } .join-section__item-tag-icon { width: 20px; height: 20px; margin-right: 5px; flex-shrink: 0; flex-grow: 0; } .join-section__item-tag-name { font-weight: 500; font-size: 13px; line-height: 15px; letter-spacing: 0.04em; color: #0dcb5b; } .join-section__item-status-icon { width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: rgba(13, 203, 91, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; } .join-section__item-status-icon:before { content: ""; width: 2px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; height: 7px; background-color: #0dcb5b; margin-bottom: 2px; } .join-section__item-status-icon:after { content: ""; width: 2px; height: 2px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #0dcb5b; } .join-section__item-head { display: flex; align-items: center; justify-content: space-between; } .join-section__item-title { font-weight: 700; font-size: 30px; line-height: 35px; } .join-section__item-price { font-weight: 700; font-size: 46px; line-height: 54px; position: relative; display: flex; align-items: baseline; } .join-section__item-price .sup { font-size: 26px; line-height: 30px; } .join-section__item-price .time { font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 0.04em; color: #0dcb5b; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; white-space: nowrap; } .join-section__item-price .time:before { content: ""; display: block; width: 18px; height: 18px; flex-shrink: 0; flex-grow: 0; background: url(../img/webinar/time.svg) no-repeat center; margin-right: 5px; filter: invert(56%) sepia(82%) saturate(1332%) hue-rotate(98deg) brightness(97%) contrast(90%); } .join-section__item-descr { font-weight: 500; font-size: 14px; line-height: 150%; letter-spacing: 0.03em; color: #676d7c; display: flex; align-items: center; width: calc(100% - 190px); margin-bottom: 20px; } .join-section__item-descr:before { content: ""; display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; flex-grow: 0; background-size: contain; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0); margin-right: 10px; transition: all 0.3s ease 0s; background-repeat: no-repeat; background-position: center center; transform: rotate(90deg); } .join-section__item-subtitle { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; margin-bottom: 20px; } .join-section__item-inner { display: flex; flex-wrap: wrap; margin: 0 -5px; } .join-section__item-list { width: 50%; padding: 0 5px; } .join-section__item-list-elem { margin-bottom: 20px; font-weight: 500; font-size: 14px; line-height: 16px; display: flex; align-items: center; } .join-section__item-list-icon { width: 30px; height: 30px; flex-shrink: 0; flex-grow: 0; background: #ffffff; border-radius: 10px; margin-right: 15px; display: flex; align-items: center; justify-content: center; } .join-section__item-list-icon svg { fill: #0dcb5b; width: 20px; height: 20px; } .join-section__item-list:nth-child(even) .join-section__item-list-elem { color: #828282; } .join-section__item-list:nth-child(even) .join-section__item-list-icon { background: #ebeae3; } .join-section__item-img { position: relative; max-width: 436px; margin: 0 auto 20px; padding-bottom: 33%; } .join-section__item-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .join-section__item-btn { max-width: 460px; background: #918e7f; border: none; box-shadow: 0 4px 9px rgba(111, 111, 111, 0.5); color: #fff; font-weight: 600; font-size: 18px; margin: 0 auto 20px; } .join-section__item-btn .btn-arrow { display: block; width: 20px; height: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: rgba(255, 255, 255, 0.4); margin-left: 12px; position: relative; } .join-section__item-btn .btn-arrow:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; width: 12px; height: 12px; background-size: contain; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0) invert(1); margin-right: 10px; transition: all 0.3s ease 0s; background-repeat: no-repeat; background-position: center center; } .join-section__item-txt { text-align: center; font-size: 12px; line-height: 14px; color: #767676; } .join-section__item.prem { background: #0dcb5b; } .join-section__item.prem .join-section__item-title { color: #fff; } .join-section__item.prem .join-section__item-tag { background: #1c7541; color: #0dcb5b; } .join-section__item.prem .join-section__item-descr { color: #9bf4c0; } .join-section__item.prem .join-section__item-descr:before { filter: brightness(0) invert(1); } .join-section__item.prem .join-section__item-price .time { color: #fff; } .join-section__item.prem .join-section__item-price .time:before { filter: brightness(0) invert(1); } .join-section__item.prem .join-section__item-subtitle { color: #53fe99; } .join-section__item.prem .join-section__item-status-icon { background: rgba(196, 255, 221, 0.4); } .join-section__item.prem .join-section__item-status-icon:before, .join-section__item.prem .join-section__item-status-icon:after { background: #fff; } .join-section__item.prem .join-section__item-list-elem { color: #134527; } .join-section__item.prem .join-section__item-btn { background: #000; } .join-section__item.prem .join-section__item-btn .btn-arrow { background-color: rgba(13, 203, 91, 0.4); } .join-section__item.prem .join-section__item-btn .btn-arrow:after { filter: none; } .join-section__item.prem .join-section__item-box:before { background: #09b44f; } .join-section__item.prem .join-section__item-txt { color: #6dfca8; } .join-advantages { position: relative; padding: 50px 0 70px; } .join-advantages__item { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -15px 100px; padding-bottom: 100px; position: relative; } .join-advantages__item:not(:last-child):after { content: ""; position: absolute; display: block; bottom: 0; left: 15px; right: 15px; height: 1px; background: #e5e5e5; } .join-advantages__item:last-child { margin-bottom: 0; } .join-advantages__item-box { width: 50%; padding: 0 15px; } .join-advantages__item-info { max-width: 570px; } .join-advantages__item-img { margin-left: auto; position: relative; max-width: 570px; padding-bottom: 72%; } .join-advantages__item-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } .join-advantages__item-title { font-weight: 700; font-size: 34px; line-height: 40px; margin-bottom: 20px; } .join-advantages__item-txt { font-size: 16px; line-height: 1.5; color: #767676; } .join-advantages__item.revert { flex-direction: row-reverse; } .join-advantages__item.revert .join-advantages__item-img { margin: 0; } .join-advantages__item.revert .join-advantages__item-info { margin-left: auto; } .join-advantages__head { max-width: 690px; margin: 0 auto 100px; text-align: center; } .join-advantages__head-icon { width: 139px; height: 139px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.2) 32.81%, rgba(0, 0, 0, 0.02) 100% ), linear-gradient(180deg, #ffffff 0%, #d2ffe6 100%); box-shadow: inset -1.08479px -1.08479px 1.08479px rgba(0, 0, 0, 0.05), inset 1.08479px 1.08479px 1.08479px rgba(255, 255, 255, 0.2); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin: 0 auto 20px; } .join-advantages__item-list { counter-reset: item; } .join-advantages__item-list li { counter-increment: item; position: relative; padding-left: 88px; } .join-advantages__item-list li:not(:last-child) { margin-bottom: 50px; } .join-advantages__item-list li:before { content: counter(item) "."; position: absolute; top: -7px; left: 0; width: 46px; height: 46px; font-weight: 700; font-size: 15px; line-height: 46px; background: #0dcb5b; color: #fff; display: flex; align-items: center; justify-content: center; text-align: right; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .join-advantages__item-list li:after { content: ""; position: absolute; top: -13px; left: 0; width: 58px; height: 58px; background-size: contain; background-image: url(../img/join/circle-100.svg); background-repeat: no-repeat; } .join-advantages__item-list li:first-child:after { background-image: url(../img/join/circle-33.svg); background-size: auto; width: 29px; left: 23px; } .join-advantages__item-list li:nth-child(2):after { background-image: url(../img/join/circle-66.svg); left: -1px; } .join-advantages__item-list li:last-child:after { left: -6px; } .join-advantages__item-list li span { display: block; font-weight: 700; font-size: 24px; line-height: 28px; margin-bottom: 20px; } .join-advantages__item-list li p { font-size: 16px; line-height: 1.5; color: #767676; } .join-advantages__decor { position: absolute; top: 0; z-index: -1; } .join-advantages__decor.left { left: 0; top: 50%; transform: translateY(-50%); } .join-advantages__decor.right { right: 0; top: 10%; } .expert__subtitle { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .expert__subtitle-icon { width: 50px; height: 50px; background: rgba(13, 203, 91, 0.1); border-radius: 10px; margin-right: 20px; display: flex; align-items: center; justify-content: center; } .expert__subtitle-icon svg { fill: #0dcb5b; } .expert__subtitle-name { font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; } .experts-slider { background-color: #14161e; padding: 100px 0 50px; margin-bottom: 130px; } .experts-slider__wrap { position: relative; } .experts-slider__holder { overflow: hidden; padding: 0 45px; margin: 0 -20px; transition: opacity 0.3s; opacity: 0; } .experts-slider__holder.swiper-container-horizontal { opacity: 1; } .experts-slider__title { max-width: 670px; margin: 0 auto 30px; font-weight: 700; font-size: 34px; line-height: 40px; text-align: center; color: #ffffff; } .experts-slider__item-img { position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding-bottom: 84%; transition: all 0.3s ease-in-out; } .experts-slider__item-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; z-index: 1; } .experts-slider__item-decor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.3s ease-in-out; transform: scale(0); opacity: 0; } .experts-slider__item-decor:before, .experts-slider__item-decor:after { content: ""; position: absolute; width: 200px; height: 200px; background-color: #0dcb5b; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; transform: rotate(45deg); } .experts-slider__item-decor:before { top: 10px; left: 10px; } .experts-slider__item-decor:after { bottom: 10px; right: 10px; } .experts-slider__item-body { padding: 20px 10px 0; } .experts-slider__item-name { font-weight: 700; font-size: 24px; line-height: 28px; color: #ffffff; margin-bottom: 20px; } .experts-slider__item-descr { font-size: 16px; line-height: 1.2; color: #7b7f8e; margin-bottom: 10px; } .experts-slider__item-specialty { font-size: 14px; line-height: 1.2; color: #5c6174; margin-bottom: 10px; } .experts-slider__social { display: flex; align-items: center; opacity: 0; transition: all 0.3s; } .experts-slider__social a { display: block; } .experts-slider__social a svg { fill: #4a4f62; transition: all 0.3s; } .experts-slider__social a:not(:last-child) { margin-right: 20px; } .experts-slider .swiper-slide { padding: 30px 0 44px; } .experts-slider__ctrl { display: flex; align-items: center; justify-content: center; } .experts-slider__ctrl .swiper-pagination { position: static; display: flex; } .experts-slider .swiper-button-prev, .experts-slider .swiper-button-next { margin: 0; top: 160px; } .experts-slider .swiper-button-prev { left: 50px; } .experts-slider .swiper-button-next { right: 50px; } .experts-slider .swiper-button-next.swiper-button-disabled, .experts-slider .swiper-button-prev.swiper-button-disabled { opacity: 0; } /*Join page END*/ /*Brands All page START*/ .supplements-brand { padding: 40px 0; position: relative; z-index: 1; overflow: hidden; } .supplements-brand__bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left; z-index: 0; pointer-events: none; } .supplements-brand .container { position: relative; z-index: 1; } .supplements-brand:before, .supplements-brand:after { content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 16px; background-image: url(/assets/img/icons/decor-dot-white.svg); background-repeat: repeat-x; } .supplements-brand:before { bottom: -8px; } .supplements-brand:after { top: -8px; transform: rotate(180deg); } .supplements-brand__holder { display: flex; align-items: center; margin-bottom: 40px; } .supplements-brand .product-head-info { max-width: 315px; } .supplements-brand__box { max-width: 810px; padding-right: 20px; display: flex; align-items: center; } .supplements-brand__img { flex-shrink: 0; flex-grow: 0; width: 220px; height: 160px; margin-right: 20px; background: #f0f3f6; box-shadow: 0 57px 80px rgba(52, 66, 55, 0.08), 0 13px 18px rgba(52, 66, 55, 0.05), 0 4px 5px rgba(52, 66, 55, 0.03); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 15px; } .supplements-brand__img img { width: 100%; height: 100%; object-fit: contain; } .supplements-brand__content { flex-shrink: 1; flex-grow: 1; } .supplements-brand__content-head, .brand-single__head { display: flex; align-items: center; margin-bottom: 10px; } .supplements-brand__content-title { font-weight: 700; font-size: 18px; line-height: 1.2; padding-right: 15px; } .supplements-brand__content-rate { background: #fbe5e8; border-radius: 10px; padding: 5px 10px; font-size: 14px; line-height: 20px; color: #e65e66; display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; } .supplements-brand__content-rate svg { margin-left: 10px; display: inline-flex; fill: #e65e66; } .supplements-brand__content-txt { font-size: 14px; line-height: 1.5; color: #4f4f4f; margin-bottom: 10px; } .supplements-brand__content-link { font-size: 12px; line-height: 15px; color: #9d9d9d; display: inline-flex; align-items: center; } .supplements-brand__content-link svg { margin-right: 5px; display: inline-flex; stroke: #9d9d9d; flex-shrink: 0; flex-grow: 0; transition: all 0.2s; } .supplements-brand__slider { overflow: hidden; padding: 0 6px; margin: 0 -6px; transition: opacity 0.3s; opacity: 0; } .supplements-brand__slider.swiper-container-horizontal { opacity: 1; } .supplements-brand__slider-outer { position: relative; } .supplements-top__slider-outer { position: relative; } .supplements-top__slider { transition: opacity 0.3s; opacity: 0; } .supplements-top__slider.swiper-container-initialized { opacity: 1; } /* Hide swiper-wrapper before initialization to prevent layout shift */ .supplements-top__slider .swiper-wrapper, .sidebar-protocols__slider .swiper-wrapper, .sidebar-bestseller__slider .swiper-wrapper { display: none; } .supplements-top__slider.swiper-container-initialized .swiper-wrapper, .sidebar-protocols__slider.swiper-container-initialized .swiper-wrapper, .sidebar-bestseller__slider.swiper-container-initialized .swiper-wrapper { display: flex; } /* Set min-height to prevent layout shift before swiper init */ .supplements-top__slider-outer { min-height: 200px; } .sidebar-protocols__slider { min-height: 240px; } .sidebar-bestseller__slider { min-height: 120px; } .supplements-top__slider .swiper-slide { width: 250px !important; height: 170px !important; } .supplements-top__slider .product-card { width: 100%; height: 100%; margin: 0; padding-bottom: 0; } .supplements-top__slider .product-card__info { display: none; } .supplements-brand .webinar-head-title { color: #fff; justify-content: center; font-size: 32px; font-weight: 600; text-shadow: 0 0 15px #1a1a1a; } .supplements-brand .webinar-head-title span { font-weight: 400; } .supplements-brand .webinar-head-title:after { display: none; } .supplements-brand .product-card, .supplements-top__slider .product-card { box-shadow: 0 0 20px #1a1a1a; position: relative; overflow: visible; transition: box-shadow 0.4s ease; border-radius: 10px; } /* Animated border fill effect - background element */ .supplements-brand .product-card:before, .supplements-top__slider .product-card:before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 14px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #09d166, #0ef5a0); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .supplements-brand .product-card:hover:before, .supplements-top__slider .product-card:hover:before { transform: scaleX(1); } /* Rounded corners for product card image */ .supplements-brand .product-card__img, .supplements-top__slider .product-card__img { border-radius: 10px; overflow: hidden; } /* Image size for top slider */ .supplements-top__slider .product-card__img { height: 100%; } .supplements-top__slider .product-card__img .sup_img { padding-bottom: 0; height: 100%; } .supplements-top__slider .product-card__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .supplements-brand .product-card__img img, .supplements-top__slider .product-card__img img { transition: transform 0.3s ease; } .supplements-brand .product-card:hover .product-card__img img, .supplements-top__slider .product-card:hover .product-card__img img { transform: scale(1.025); } /* Text letter-spacing animation on hover */ .supplements-brand .product-card__title, .supplements-brand .product-card__headline, .supplements-top__slider .product-card__title, .supplements-top__slider .product-card__headline { transition: letter-spacing 0.4s ease-out; } .supplements-brand .product-card:hover .product-card__title, .supplements-brand .product-card:hover .product-card__headline, .supplements-top__slider .product-card:hover .product-card__title, .supplements-top__slider .product-card:hover .product-card__headline { letter-spacing: 0.5px; } .supplements-brand .product-card:hover, .supplements-top__slider .product-card:hover { border-color: rgba(9, 209, 102, 0.65); box-shadow: 0 5px 20px rgba(9, 209, 102, 0.2); } .supplements-brand__slider .sidebar-slider__ctrl, .supplements-top__slider .sidebar-slider__ctrl { justify-content: center; } .supplements-brand__slider .swiper-pagination-bullet, .supplements-top__slider .swiper-pagination-bullet, .experts-slider .swiper-pagination-bullet { display: block; width: 6px; height: 6px; margin: 0 4px; background: #fff; border-radius: 2px; opacity: 1; transition: all 0.3s; } .experts-slider .swiper-pagination-bullet { background: #4a4f62; } .supplements-brand__slider .swiper-pagination-bullet-active, .supplements-top__slider .swiper-pagination-bullet-active, .experts-slider .swiper-pagination-bullet-active { width: 18px; background: #09d166; } .supplements-brand__slider .swiper-button-next, .supplements-brand__slider .swiper-button-prev, .supplements-top__slider .swiper-button-next, .supplements-top__slider .swiper-button-prev, .experts-slider .swiper-button-next, .experts-slider .swiper-button-prev { width: 40px; height: 40px; margin-top: -30px; background: #d9f2e4; border-radius: 10px; transition: all 0.3s ease-in-out; } .experts-slider .swiper-button-next, .experts-slider .swiper-button-prev { background: #4a4f62; } .supplements-brand__slider .swiper-button-next, .supplements-top__slider .swiper-button-next { right: -60px; } .experts-slider .swiper-button-next:before, .experts-slider .swiper-button-prev:before { filter: brightness(0) invert(1); opacity: 0.3; } .supplements-brand__slider .swiper-button-prev, .supplements-top__slider .swiper-button-prev { left: -60px; } .supplements-brand__slider .swiper-button-next.swiper-button-disabled, .supplements-brand__slider .swiper-button-prev.swiper-button-disabled, .supplements-top__slider .swiper-button-next.swiper-button-disabled, .supplements-top__slider .swiper-button-prev.swiper-button-disabled { opacity: 0; } .sidebar-protocols .card { margin: 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.14); } .brands .search-block__row, .supplements-block .search-block__row { display: flex; flex-direction: column; } .brands .search-block__item, .supplements-block .search-block__item { position: relative; text-transform: uppercase; margin-bottom: 25px; display: flex; align-items: center; width: 100%; background: none; height: auto; border-radius: 0; padding: 0; border: none; } .brands .search-block__item:before, .supplements-block .search-block__item:before, .brands .search-block__item:after, .supplements-block .search-block__item:after { display: none; } .brands .search-block__letter, .supplements-block .search-block__letter { font-size: 20px; line-height: 1; font-weight: 600; color: #09d166; /* border: 2px solid #09d166; */ border-radius: 8px; padding: 8px 20px; flex-shrink: 0; /* margin: 0 15px; */ } .brands .search-block__line, .supplements-block .search-block__line { flex: 1; height: 2px; } .brands .search-block__line:first-child, .supplements-block .search-block__line:first-child { background: linear-gradient(to right, transparent 0%, #09d166 60%); } .brands .search-block__line:last-child, .supplements-block .search-block__line:last-child { background: linear-gradient(to left, transparent 0%, #09d166 60%); } .brands .search-groups, .supplements-block .search-groups { display: block; margin: 0; } .brands .search-list, .supplements-block .search-list { display: flex; flex-direction: column; gap: 8px; margin: 0; width: auto; box-shadow: none; overflow: inherit; transition: none; border-radius: 0; } .brands .search-list__col, .supplements-block .search-list__col { width: 33.333%; padding: 0 2.5px; margin-bottom: 20px; } .brands .search-list__item, .supplements-block .search-list__item { display: block; padding: 12px 16px; background: #ffffff; /* border: 2px solid #f7f7f7; */ border-radius: 10px; transition: all 0.2s ease-in-out; } .search-list--all-supplements { display: flex; flex-wrap: wrap; gap: 10px; padding: 15px; border-radius: 10px !important; background: #f7f8f9; margin: 0; } .search-list--all-supplements:hover { box-shadow: none !important; } .search-list--all-supplements .search-list__col { width: calc(33.333% - 7px); padding: 0; margin: 0; } /* Responsive styles for search-list__col */ @media (max-width: 1300px) { .brands .search-list__col, .supplements-block .search-list__col, .search-list--all-supplements .search-list__col { width: calc(50% - 5px); } .brands .search-list__item-head { flex-direction: column; align-items: center; } .brands .search-list__item-img { margin: 0; margin-bottom: 10px; width: 100%; height: 50px; } .brands .search-list__item-box { width: 100%; text-align: center; } .brands .search-list__text, .supplements-block .search-list__text { white-space: normal; word-break: break-word; padding: 0; } } @media (max-width: 768px) { .brands .search-list__col, .supplements-block .search-list__col, .search-list--all-supplements .search-list__col { width: 100%; } .brands .search-list__item-head, .supplements-block .search-list__item-head { flex-direction: row; align-items: center; } .brands .search-list__item-img, .supplements-block .search-list__item-img { width: 70px; height: 45px; margin-right: 15px; margin-bottom: 0; } .brands .search-list__item-box, .supplements-block .search-list__item-box { width: calc(100% - 85px); text-align: left; } } .brands .search-list__item-head, .supplements-block .search-list__item-head { display: flex; align-items: center; position: relative; z-index: 1; /* margin-bottom: 15px; */ } .brands .search-list__item-img, .supplements-block .search-list__item-img { background: #f7f8f9; border-radius: 10px; width: 100px; height: 64px; flex-shrink: 0; flex-grow: 0; margin-right: 20px; display: flex; align-items: center; padding: 7px 12px; } .brands .search-list__item-img img, .supplements-block .search-list__item-img img { width: 100%; height: 100%; object-fit: contain; } .brands .search-list__item-box, .supplements-block .search-list__item-box { display: block; width: calc(100% - 120px); position: relative; z-index: 1; } .brands .search-list__item-site { font-size: 12px; line-height: 15px; color: #9d9d9d; display: inline-flex; align-items: center; transition: all 0.2s; } .brands .search-list__item-site svg { margin-right: 5px; display: inline-flex; stroke: #9d9d9d; flex-shrink: 0; flex-grow: 0; transition: all 0.2s; } .brands .search-list__item-row { display: flex; margin: 0 0 6px; position: relative; } .brands .search-list__item-elem { background: #f3f3f3; border-radius: 5px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 5px; margin-bottom: 9px; border: 1px solid #f3f3f3; transition: all 0.3s; } .brands .search-list__item-elem:not(:last-child) { margin-right: 8px; } .brands .search-list__item-icon { display: block; width: 100%; height: 100%; position: relative; } .brands .search-list__item-icon:after { content: ""; position: absolute; bottom: -26px; left: 7px; width: 12px; height: 12px; transform: rotate(45deg); background: #fff; z-index: 3; opacity: 0; visibility: hidden; } .brands .search-list__item-elem img { width: 100%; height: 100%; object-fit: contain; } .brands .search-list__item-tooltip { position: absolute; left: 50%; top: calc(100% - 10px); transform: translate(-50%, 0); z-index: 2; width: 100%; padding-top: 15px; opacity: 0; visibility: hidden; transition: all 0.2s; } .brands .search-list__item-tooltip .bestseller__item { background-color: #fff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); border: none; } .brands .search-list__item-tooltip .bestseller__item-head { margin-bottom: 20px; } .brands .search-list__item-elem .val { font-weight: 500; font-size: 12px; line-height: 40px; color: #747373; white-space: nowrap; } .brands .search-list__item-tooltip .val { color: #000; } .brands .search-list__item-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px dashed #dedede; min-height: 60px; } .brands .search-list__item-price { font-size: 16px; font-weight: 700; display: flex; align-items: center; } .brands .search-list__item-price.unavailable { font-size: 12px; line-height: 17px; text-transform: inherit; color: #a9aaae; font-weight: 500; } .brands .search-list__item-price:before { content: attr(data-price); font-size: 12px; line-height: 14px; font-weight: 400; color: #747373; padding-right: 3px; } .brands .search-list__item-btn { padding: 0 20px; line-height: 40px; border: 2px solid #0dcb5b; } .brands .search-list__item-btn:after { content: ""; display: inline-flex; width: 11px; height: 11px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-slider.svg); transform: rotate(-90deg); margin-left: 10px; filter: brightness(0) invert(0); transition: all 0.2s; } .brands .search-list__text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 14px; line-height: 16px; margin-bottom: 6px; } .brands .bestseller__item-price .val { font-size: 18px; line-height: 1; font-weight: 700; } .brands .bestseller__item-price .val.unavailable { font-weight: 500; font-size: 12px; line-height: 40px; color: #747373; } /*Brands All page END*/ /*Brand single page START*/ .brand-single { display: flex; align-items: center; margin-bottom: 60px; } .brand-single__left { flex-grow: 1; flex-shrink: 1; padding-right: 20px; display: flex; align-items: flex-start; } .brand-single__right { width: 350px; flex-shrink: 0; flex-grow: 0; } .brand-single__head.mobile { display: none; } .brand-single__name { font-weight: 700; font-size: 28px; line-height: 48px; text-transform: uppercase; padding-right: 15px; } .brand-single__subtitle { font-weight: 700; font-size: 18px; line-height: 1.2; margin-bottom: 10px; } .brand-single__txt { font-size: 14px; line-height: 1.5; color: #4f4f4f; margin-bottom: 10px; } .brand-single__txt p:not(:last-child) { margin-bottom: 21px; } .brand-single__rating { background: #f5f4ed; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; padding: 10px; } .brand-single__title { font-weight: 500; font-size: 13px; line-height: 1.2; color: #7c9c8c; text-transform: uppercase; display: flex; align-items: center; justify-content: flex-start; } .brand-single__title svg { display: inline-flex; margin-right: 10px; flex-shrink: 0; flex-grow: 0; fill: #0bcb5b; } .brand-single__rating-box { display: flex; align-items: center; } .brand-single__rating-box ul { display: flex; align-items: center; } .brand-single__rating-box ul li { width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; background-color: #fff; } .brand-single__rating-box ul li:not(:last-child) { margin-right: 2px; } .brand-single__rating-box ul li.filled { background-color: #55cd6d; } .brand-single__rating-val { font-weight: 500; font-size: 22px; line-height: 26px; margin-left: 5px; } .brand-single__rating-votes { font-size: 12px; line-height: 14px; color: #9d9d9d; margin-left: 5px; } .brand-single__row { display: flex; filter: drop-shadow(0px 57px 80px rgba(52, 66, 55, 0.08)) drop-shadow(0px 12.7317px 17.869px rgba(52, 66, 55, 0.0476886)) drop-shadow(0px 3.79056px 5.32008px rgba(52, 66, 55, 0.0323114)); } .brand-single__box { background: #f0f6f3; border-radius: 10px; padding: 10px; flex-shrink: 1; flex-grow: 1; } .brand-single__box:not(:last-child) { margin-right: 10px; } .brand-single__box-info { padding-left: 30px; font-size: 22px; line-height: 45px; color: #658374; } .brand-single__box-info strong { font-weight: 700; } .products-head { margin-bottom: 30px; } .sort-ctrl { display: flex; align-items: flex-start; justify-content: space-between; position: relative; } .sort-ctrl .buttons__ctrl, .sort-ctrl .buttons__ctrl .btn { margin-bottom: 0; } .sort-ctrl__list-btn { display: none; } .sort-ctrl__list { display: flex; align-items: center; } .sort-ctrl__list-item { font-weight: 500; font-size: 15px; line-height: 1.5; color: #a0a6b1; height: 100%; border-bottom: 2px solid transparent; transition: all 0.2s; cursor: pointer; padding: 7px 0 20px; } .sort-ctrl__list-item:not(:last-child) { margin-right: 30px; } .sort-ctrl__list-item.active { border-color: #0dcb5b; color: #000; } .product-cards .product-item { width: calc(33.333% - 9px); } /*Brand single page END*/ /*bestsellers pages START*/ .best-hero { padding: 30px 0 20px; } .best-hero__holder { display: flex; align-items: flex-start; } .best-hero__content { flex-shrink: 1; flex-grow: 1; margin-right: 20px; max-width: 710px; } .best-hero__img { width: 500px; height: 500px; position: relative; flex-shrink: 0; flex-grow: 0; } .best-hero__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .best-hero .headline__title { margin-bottom: 20px; } .best-hero__txt { font-size: 14px; line-height: 1.5; color: #4f4f4f; margin-bottom: 30px; } .best-hero__txt p:not(:last-child) { margin-bottom: 20px; } .best-hero .webinar-head-title span { white-space: nowrap; } .best-hero .product-head-info { max-width: 100%; padding: 20px 20px 20px 30px; margin-bottom: 30px; background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .best-hero + .popular-section-protocols { padding: 40px 0; } .best-hero + .popular-section-protocols .row:not(.row-scroll) .card { margin: 0; height: 100%; } .join-advantages__head.mod { max-width: 930px; } .join-advantages__head.mod p { font-size: 16px; line-height: 1.5; color: #767676; } .join-advantages__head.mod p:not(:last-child) { margin-bottom: 24px; } .get-premium { padding-bottom: 95px; } .get-premium__holder { display: flex; align-items: flex-end; flex-wrap: wrap; } .get-premium__block, .get-premium__img { width: 50%; } .get-premium__block { padding-right: 30px; } .get-premium__img { position: relative; padding-bottom: 40.7%; } .get-premium__img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; } .get-premium__inner { max-width: 510px; } .get-premium__title { font-size: 60px; line-height: 1; font-weight: 700; margin-bottom: 40px; } .get-premium__title.hidden { display: none; } .get-premium__title strong { display: block; } .get-premium__title .green { color: #0dcb5b; } .get-premium__title .light { font-weight: 300; } .get-premium__title .regular { font-weight: 400; } .get-premium .product-head-info { margin: 0 0 40px; position: relative; } .get-premium__rating { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); background-color: #fff; padding: 7px 15px; position: absolute; right: 0; bottom: -30px; display: flex; align-items: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; } .get-premium__rating-icon { width: 32px; height: 32px; margin-right: 5px; } .get-premium__rating-value, .get-premium__rating-votes { font-weight: 700; font-size: 16px; line-height: 20px; } .get-premium__rating-stars { display: flex; align-items: center; margin: 0 3px 0 5px; } .get-premium__rating-stars li { width: 16px; height: 16px; margin-right: 2px; } .get-premium__rating-stars svg { fill: #fdc040; } .get-premium__btn { background: #0dcb5b; font-weight: 600; font-size: 22px; line-height: 25px; padding: 15px 55px; display: inline-flex; color: #fff; border: none; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .reward { margin-top: 152px; background: linear-gradient(335.46deg, #e7f1eb 0%, #cbfade 100%); } .reward.mod { margin-top: 100px; } .reward__holder { position: relative; z-index: 1; } .reward__left { position: relative; padding: 20px 0 25px; overflow: hidden; } .reward__left-top { margin-bottom: 30px; display: flex; align-items: flex-end; } .reward__logo { width: 165px; } .reward__logo-txt { font-size: 21px; line-height: 25px; text-transform: uppercase; color: #3d7b54; padding-left: 10px; margin-left: 10px; border-left: 1px solid #3d7b54; } .reward__info { display: flex; align-items: center; position: relative; z-index: 3; } .reward__info-txt { font-weight: 700; font-size: 30px; line-height: 36px; color: #085327; padding-right: 30px; } .reward__info-txt span { font-weight: 400; } .btn-border { height: 40px; border-color: #0dcb5b; padding: 8px 20px; } .btn-premium { height: 40px; border: none; background: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; padding: 8px 20px; white-space: nowrap; } .btn-premium-icon { filter: brightness(0) invert(1); opacity: 0.6; margin-right: 10px; flex-shrink: 0; flex-grow: 0; } .reward-leaves { position: absolute; left: 50%; top: 0; transform: translate(-50%, -60%); width: 590px; height: 474px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../img/lazy-holder.svg); opacity: 0.15; z-index: -1; } .reward__man { width: 262px; height: 255px; position: absolute; bottom: 0; right: 0; z-index: 0; } .reward__fluency { width: 178px; height: 178px; position: absolute; top: 50%; right: 178px; z-index: -1; transform: translateY(-50%); } .reward__fluency img { width: 100%; height: 100%; } .reward__mix { width: 214px; height: 118px; position: absolute; top: 50%; right: 270px; z-index: 0; transform: translateY(-50%); } /*bestsellers pages END*/ .offers { position: fixed; top: 0; right: -560px; width: 560px; height: 100vh; background-color: white; z-index: 10001; opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out; } .offers--active { right: 0; opacity: 1; visibility: visible; } .offers-loader { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #666; } .offers-error { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #e74c3c; } .offers-background { position: fixed; top: 0; left: 100%; width: 100vw; height: 100vh; background-color: #00000094; z-index: 10001; backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: all 0.5s ease-in-out; } .offers-background--active { left: 0; opacity: 1; visibility: visible; } @media (max-width: 600px) { .offers { width: 100%; } } .offers-wrapper { height: 100%; } .offers-head { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; padding: 20px; border-bottom: 1px solid #c8c8c8; } @media (max-width: 600px) { .offers-head { gap: 10px; padding: 10px; } } .offers-head__title { margin-bottom: 5px; font-size: 22px; font-weight: 600; } @media (max-width: 600px) { .offers-head__title { font-size: 20px; } } .offers-head__text { font-size: 14px; font-weight: 400; color: #292b35; } .offers-head__close { display: flex; transition: all 0.2s ease; cursor: pointer; } @media (min-width: 1025px) { .offers-head__close:hover { opacity: 0.5; transform: rotate(90deg); } } .offers-list { padding: 20px; height: calc(100% - 90px); overflow-y: auto; } @media (max-width: 600px) { .offers-list { padding: 10px; height: calc(100% - 70px); } } .offers-list li { margin-bottom: 10px; } .offers-list li:last-child { margin-bottom: 0; } .offers-item { display: flex; justify-content: space-between; gap: 20px; padding: 10px; border: 2px solid #f7f7f7; border-radius: 10px; cursor: pointer; box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s ease; } @media (min-width: 1025px) { .offers-item:hover { box-shadow: 0 12px 8px -1px rgba(0, 0, 0, 0.25); } } @media (max-width: 600px) { .offers-item { gap: 10px; padding: 10px; } } .offers-item__group { display: flex; gap: 10px; } .offers-item__group--column { flex-direction: column; align-items: flex-end; gap: 8px; } .offers-item__flag { width: 30px; height: 30px; flex: 0 0 auto; } @media (max-width: 600px) { .offers-item__flag { width: 20px; height: 20px; } } .offers-item__group-column { } .offers-item__country { margin-bottom: 2px; font-size: 18px; font-weight: 500; } @media (max-width: 600px) { .offers-item__country { font-size: 16px; } } .offers-item__domen { margin-bottom: 6px; font-size: 14px; color: #767676; } .offers-item__status { display: inline-block; border-radius: 4px; font-size: 12px; padding: 5px 10px; white-space: nowrap; } .offers-item__status--green { background-color: #09d166; color: white; } .offers-item__status--red { background-color: #efefef; color: #292b35; } .offers-item__price { font-size: 20px; font-weight: 600; line-height: 1; color: black; } @media (max-width: 600px) { .offers-item__price { font-size: 18px; } } .offers-item__currency { font-size: 14px; font-weight: 400; line-height: 1; color: #767676; } .offers-item__button { padding: 10px; height: 32px; } @media (max-width: 600px) { .offers-item__button { font-size: 14px; padding: 4px 10px; text-align: center; height: auto; line-height: 1.2; max-width: fit-content; width: fit-content; } } /*** TOAST NOTIFICATIONS ***/ #nts-toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .nts-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-width: 420px; min-width: 300px; opacity: 0; transform: translateY(-12px) translateX(12px); transition: opacity 0.3s ease, transform 0.3s ease; } .nts-toast--visible { opacity: 1; transform: translateY(0) translateX(0); } .nts-toast--error { border-left: 4px solid #e74c3c; } .nts-toast--success { border-left: 4px solid #09d166; } .nts-toast__icon { flex-shrink: 0; width: 22px; height: 22px; } .nts-toast__icon svg { width: 22px; height: 22px; } .nts-toast--error .nts-toast__icon svg { color: #e74c3c; } .nts-toast--success .nts-toast__icon svg { color: #09d166; } .nts-toast__body { flex: 1; } .nts-toast__title { font-size: 15px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; } .nts-toast--error .nts-toast__title { color: #e74c3c; } .nts-toast--success .nts-toast__title { color: #09d166; } .nts-toast__message { font-size: 13px; line-height: 1.4; color: #555; } .nts-toast__close { flex-shrink: 0; background: none; border: none; font-size: 20px; color: #999; cursor: pointer; padding: 0 0 0 8px; line-height: 1; transition: color 0.2s; } .nts-toast__close:hover { color: #333; } .icon-github { width: 18px; height: 16px; } .icon-facebook { width: 9px; height: 16px; } .icon-linkedin { width: 17px; height: 16px; } .icon-arrow-square, .icon-star-filled { width: 16px; height: 16px; } .icon-twitter { width: 20px; height: 16px; } .icon-arrow-small-square { width: 10px; height: 10px; } .icon-arrow-small-left { width: 10px; height: 14px; } .icon-support, .icon-gmail, .icon-outlook, .icon-profile, .icon-bag, .icon-wallet, .icon-clock, .icon-star, .icon-check-border { width: 24px; height: 24px; } .icon-question-mark { width: 14px; height: 14px; } .icon-google, .icon-check-square, .icon-tiles, .icon-calendar-big, .icon-camera-filled, .icon-document-filled, .icon-discount, .icon-info-warning, .icon-share, .icon-mix, .icon-search, .icon-faq, .icon-answer, .icon-protocols, .icon-terms, .icon-contract, .icon-quality-assurance, .icon-rating, .icon-science, .icon-tested { width: 20px; height: 20px; } .icon-jar, .icon-soluble, .icon-webinar, .icon-daily, .icon-chart, .icon-info-square, .icon-calendar-big, .icon-breakfast, .icon-product, .icon-fire, .icon-privacy-notice, .icon-info-disclaimer, .icon-expert-man, .icon-best-seller, .icon-tablets, .icon-ratings, .icon-calendar-pills { width: 22px; height: 22px; } .icon-address, .icon-open-email, .icon-skype { width: 40px; height: 40px; } .icon-source { width: 18px; height: 20px; } .icon-calendar { width: 14px; height: 15px; } .icon-close { width: 14px; height: 14px; } .icon-lock-big { width: 40px; height: 46px; } .icon-video { width: 20px; height: 15px; } .icon-bag-stroke { width: 17px; height: 18px; } .icon-solid { width: 26px; height: 27px; } .icon-contacts-message { width: 21px; height: 20px; } .icon-ticket-star { width: 25px; height: 24px; } .icon-expert-woman { width: 22px; height: 23px; } .icon-discovery { width: 15px; height: 15px; } .icon-partnership, .icon-health-protocols, .icon-play { width: 22px; height: 20px; } .icon-lock { width: 16px; height: 20px; } @media (max-width: 1740px) { .nav-articles .list-nav-wrap { display: none; } .nav-articles .title-block { cursor: pointer; transition: all 0.3s ease-in-out; } .nav-articles .title-block .icon { display: block !important; filter: brightness(0); transition: all 0.3s ease-in-out; } .nav-articles .title-block.show .icon { transform: rotate(180deg); } .expert-hero__bg { width: 1920px; } } @media (max-width: 1600px) { .page-nav { position: static; left: 0; width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 10px 30px; } .page-nav.fixed { top: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.13); } .page-nav .inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; } .page-nav .item { min-width: 80px; display: flex; align-items: center; } .page-nav .item:not(:last-child) { margin: 0; } .page-nav .item-icon { width: 45px; height: 45px; margin: 0 10px 0 0; } } @media (max-width: 1500px) { .menu__item { padding: 13px 5px 10px; } .menu__item:not(:first-child) { margin-left: 15px; } .user-actions { margin-left: 10px; } .brands-slider .swiper-button-prev, .brands-slider .swiper-button-next, .products-slider .swiper-button-prev, .products-slider .swiper-button-next { display: none; } .join-advantages__decor { display: none; } .expert-hero__title { font-size: 98px; } } @media (max-width: 1400px) { .menu__item:not(:first-child) { margin-left: 5px; } .header .logo { margin-right: 5px; } .header .logo { margin-right: 5px; } } @media (max-width: 1360px) { .articles-slider { padding: 0 30px; } .articles-slider .swiper-wrapper { margin: 0; } .webinar-hero__left { width: 100%; max-width: 460px; } .webinar-hero__title { font-size: 60px; } .webinar-hero-circle { bottom: 15px; right: 130px; } .popular-webinars__col .popular-webinars__item-btn i { display: none; } } @media (max-width: 1300px) { .featured-list { display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin-left: -15px; } .featured-list .featured-item { width: calc(16.6% - 30px); margin: 0 15px; } .sidebar-products .popular-list__item.open .populars-tooltip { left: auto; right: 0; transform: translateX(0%); } .sidebar-products .populars-tooltip:before { left: 54.5%; } .all-product-supplements.no-aside .products-list__item { width: calc(33.33% - 20px); } .all-product-supplements .flex { flex-wrap: wrap; } .all-product-supplements .content { width: 100%; } .all-product-supplements .sidebar-products { margin-left: 0; width: 100%; } .all-product-supplements .sidebar-products .populars { display: flex; align-items: flex-start; flex-wrap: wrap; } .all-product-supplements .sidebar-products .side-wrap { width: 100%; justify-content: space-between; display: flex; } .all-product-supplements .sidebar-products .headline { width: 100%; } .all-product-supplements .sidebar-products .side-wrap .col-1 { width: calc(50% - 20px); } .all-product-supplements .sidebar-products .side-wrap .col-2 { width: 50%; } .preload-wrap { margin: -5px -5px -5px 8px; } .gallery-card-slider .swiper-container.general-health { height: 15.2vw; } .product-card__info { height: calc(100% - 15.2vw); } .product-cards.brands .product-card__info { height: calc(100% - 200px); } .burger-menu { display: block; } .header .menu { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 0; top: 100%; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 320px; overflow-y: auto; background-color: #fff; color: #000; border-top: none; border-radius: 0 0 15px 15px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-box-shadow: 2px 5px 7px rgba(0, 0, 0, 0.35); box-shadow: 2px 5px 7px rgba(0, 0, 0, 0.35); padding: 15px; z-index: 100; } .open-menu .menu { z-index: 99; -webkit-transform: translateX(0); transform: translateX(0); } .menu__item:not(:first-child) { margin-left: 0; } .header .logo { margin: 0; } .header { padding: 15px 10px; } .brands-slider .swiper-container { height: 14.8vw; } .product { grid-template-columns: 1fr 1fr; } .products-slider .product-card__info { height: calc(100% - 21.2vw); } .container { padding: 0 10px; } .articles-slider { padding: 0 10px; } .product-mix .swiper-slide { width: 300px !important; } .product-mix .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide .item-add, .product-mix .swiper-slide-prev .item-add { display: flex; } .all-product-supplements .wrap .sidebar-products .populars, .all-product-supplements .wrap .sidebar-products .side-wrap { display: block; } .protocol-references__holder ol li { max-width: 100%; } .products_collections-inner .sidebar { margin-right: 20px; } .expert__item-img { width: 320px; } .expert-hero__brands { padding: 82px 0 25px; } .expert-hero__holder { max-width: 670px; } .expert-hero__title { font-size: 92px; } .contacts__holder { margin: 0 -10px; } .contacts__inner { padding: 0 10px; } } @media (max-width: 1200px) { .brands-slider.secondary .gallery-brands-items .product-slider-card { width: calc(25% - 10px); } .tags__selection:nth-child(5n) .mini-drop { left: 0; right: inherit; } .tags__selection:nth-child(6n) .mini-drop { left: inherit; right: 0; } .tags__selection { width: calc(20% - 10px); margin: 0 5px 10px; } .tags { width: calc(100% + 10px); margin-left: -5px; } .filters { padding: 40px 0 0; } .rating__line { width: 100%; } .populars-item { width: 48%; } .product { grid-template-columns: 3fr 2fr; } .alternatives { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; scrollbar-color: #9ebeae transparent; scrollbar-width: thin; margin-bottom: 20px; } .alternatives::-webkit-scrollbar { height: 4px; } .alternatives::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, 0.5); border-radius: 2px; } .alternatives__holder { width: 1400px; padding-bottom: 20px; } .alternatives__box-col, .alternatives__info-col { width: 350px; flex-shrink: 0; } .product-vitamin .product-compare-wrap .footnote { margin-top: 0; } .daily-decor { left: 220px; width: 50%; height: 97%; background-image: url(../img/product/wawes-desctop-medium.svg); } .all-product-supplements .wrap .content { width: 100%; order: 1; } .all-product-supplements .wrap .sidebar-products { margin-left: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; order: 3; } .all-product-supplements-more { order: 2; } .all-product-supplements .btn-more { position: static; transform: none; max-width: 300px; margin: 0 auto 30px; } .all-product-supplements .wrap .sidebar-products .populars { display: flex; align-items: flex-start; flex-wrap: wrap; width: calc(50% - 6px); } .all-product-supplements .wrap .sidebar-products .populars:not(:last-child) { margin: 0; } .all-product-supplements .row-mod .col { width: 33.333%; } .all-product-supplements .wrap { padding: 0; } .protocol-hero .row { margin: 0 -3px 20px; } .protocol-hero .col, .popular-section .col { width: 33.333%; } .protocol-hero .col-hidden { display: none; } .protocol-hero .product-prem { height: auto; padding: 20px; overflow: visible; margin-bottom: 20px; } .protocol-hero .product-prem.mobile { display: block; } .protocol-hero .product-prem__body { padding-right: 30px; } .protocol-hero .product-prem-title { flex-shrink: 1; flex-grow: 1; padding-right: 10px; } .protocol-hero .product-prem-img { padding: 0; width: 130px; height: 120px; flex-shrink: 0; flex-grow: 0; } .product-prem-decor { width: 120px; } .product-prem-decor img { border-radius: 0 0 10px 0; } .protocols-section .col, .products_collections-inner .col { width: 50%; } .not-found__txt { line-height: 1.5; } .supplements-brand__slider .swiper-button-next, .supplements-brand__slider .swiper-button-prev { display: none; } .supplements-brand__slider .swiper-slide { width: 315px; } .brands .search-list__col { width: 50%; } .brands .product-cards .product-item { width: calc(50% - 7px); } .get-premium { padding-bottom: 75px; } .get-premium__title { font-size: 50px; } } @media (max-width: 1100px) { .brands-slider.secondary .gallery-brands-items .product-slider-card { width: calc(33.33% - 10px); } .gallery-card-slider .swiper-container.general-health { height: 20.5vw; } .product-card__info { height: calc(100% - 20.5vw); } .product-block .headline { margin-bottom: 10px; } .products-4col .product-card { width: calc(33.333% - 9px); } .brands-slider .swiper-container { height: 19vw; max-height: 211px; } .product-card { width: calc(50% - 7px); } } @media (max-width: 1024px) { .product { grid-template-columns: 1fr; } .headline__title .sup-wrap { display: flex; flex-direction: column; gap: 15px; align-items: center; } .options__bottom .btn { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .featured-section { padding: 30px 0; } .featured-section .headline { margin-bottom: 10px; } .list-platform .item-platform .price { margin-left: 10px; font-size: 16px; } .list-platform .item-platform .btn { padding: 10px 10px; margin-left: 10px; } .tags__selection { width: calc(25% - 10px); cursor: default; } .product-slider { flex-direction: column; justify-content: center; } .product-slider .swiper-container .wrap-img:before { width: 75px; height: 80px; } .product-slider .gallery-thumbs { height: auto; } .populars-item__info .populars-item__info_btn { filter: brightness(1) invert(0); } .product-card { width: 100%; } .preload-wrap { margin: -5px -10px -5px -2px; } .table-related td { padding: 6px 5px; } .product-compare-wrap table td { padding: 16px 20px; } .product-compare-wrap table th { padding: 0 10px; } .gallery-card-slider .gallery-card.brand-slider .swiper-slide { padding: 0; } .product-info__rank { text-align: center; } .product-block__sellers .product-buttons__ico { display: none; } .product-block__sellers { margin: 20px 0 0; } .product-block.main-section-product { padding: 0; } .product-block__sellers .headline { margin-bottom: 10px; } .product-buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container { margin-top: 20px; min-height: 100px; height: 100px; } .gallery-top { width: 100%; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .product-cont { margin-bottom: 30px; } .product-vitamin .product-cont { display: flex; flex-direction: column; } .product-slider { flex-wrap: wrap; } .product-block .headline { margin-bottom: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-vitamin .product-block .headline { justify-content: space-between; order: 1; } .product-block .headline.no-indent { margin-bottom: 10px; } .product-block_other { padding: 0 0 20px; } .popular-list { margin-bottom: 20px; } .populars-text__row:last-child { margin: 0; } .populars__box:last-child { width: 100%; margin: 10px 0 0; } .populars__box { width: 100%; } .populars__body { -ms-flex-wrap: wrap; flex-wrap: wrap; } .populars_border { padding: 30px 0; } .populars_supplements { margin-bottom: 30px; } .tags__selection:nth-child(6n) .mini-drop { left: 0; right: inherit; } .tags__selection:nth-child(4n) .mini-drop { left: inherit; right: 0; } .top-search .input-box .input { height: 40px; } .top-search { padding: 30px 0 0; } .headline__actions { width: 33%; } .headline { margin-bottom: 10px; } .headline__title { font-size: 23px; margin: 0; } .headline__title--mod { order: 3; } .product-slider-outer { order: 2; } .footer .container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .footer-logo-mobile { display: block; grid-column: 1 / -1; text-align: center; } .footer-box_logo .logo { display: none; } .footer-box_logo { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; order: 1; } .footer-box_logo .footer-socials { display: flex; align-items: center; gap: 14px; order: -1; margin-top: 0; margin-bottom: 20px; } .footer-box_logo .footer-socials__title { margin: 0; } .footer-box_logo .copyright { order: 1; } .options { padding: 30px 0; background-size: cover; } .footer .container { /* grid is set above */ } .footer .block { padding: 20px 10px; } .table-wrap table { min-width: 900px; } .brands-slider { margin-top: 10px; } .alphabet { margin-bottom: 10px; } .search-list { width: 31.333%; margin: 0 0 15px 2%; } .products-top__buttons .btn { width: 150px; height: 40px; padding: 5px; } .products-list__box .circle { margin: 0 0 10px; } .products-list__box:last-child { width: 190px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .products-list__box:last-child .products-list__btn { width: 100%; } .products-list__item.cards-into-card { display: flex; flex-direction: row; flex-wrap: nowrap; } .products-list__item.cards-into-card .products-list__box { display: flex; flex-direction: row; flex-wrap: nowrap; max-width: 100%; width: 100%; margin: 0; justify-content: flex-start; } .products-list__item.cards-into-card .products-list__subtitle { padding-left: 0; } .products_collections { padding: 30px 0; } .products-top { margin-bottom: 20px; } .products { padding: 30px 0; } .compare-table thead { max-width: 240px; } .compare-table tbody tr { min-width: 240px; } .btn_show_more_supp { font-size: 13px; } .btn_show_more_coll { font-size: 13px; } .options-list { padding: 0; } .populars.populars_border .container { padding-bottom: 0; } .product-slider .swiper-container.swiper-container-horizontal .swiper-slide .wrap-img { height: 100%; } .product-block { padding: 20px 0; } .headline__title .company-title { font-size: 16px; } .headline__title .sup-wrap { background: #f9f9f9; border-radius: 10px; padding: 20px 10px; justify-content: center; margin-top: 15px; } .product-vitamin .headline__title .sup-wrap { margin: 0; padding: 0; border-radius: 0; background: none; } .headline__title .sup-wrap .img.desktop { display: none; } .headline__title .sup-wrap .img.mobile { display: block; } .product-block .headline.no-indent { margin-bottom: 10px; } .company-title-wrap { display: flex; align-items: center; } .product-vitamin .headline__title .product-sup { margin-left: 0; } .product-article .item { flex-direction: column; } .product-article .item-left { max-width: 100%; margin: 0; } .product-article .swiper-slide { width: 340px !important; } .product-article .item-img { height: 140px; } .product-article .item-list { margin: 10px 0 20px; } .product-block-article { padding: 20px 0 0; } .product-article .swiper-container { margin: 0; padding: 0 20px; } .product-mix .product-info__box { width: auto; padding: 0; } .product-mix .product-info__title_bg { transform: none; } .product-head { margin: 30px 0; } .product-mix .swiper-container { margin-top: 0; padding: 0 10px; } .product-head-info { display: none; } .product-head-left { max-width: 100%; margin: 0 0 20px; } .product-mix { margin-bottom: 10px; } .back-to-top { bottom: 120px; } .headline__title .sup-wrap .sup-content { font-size: 16px; text-align: left; } .related-block { padding: 10px 0 0; } .gallery-thumbs .swiper-slide { height: 85px !important; border: 2px solid #f6f6f6; } .gallery-top { height: 310px; } .product-vitamin .gallery-top { height: 380px; } .product-slider .gallery-top .swiper-slide { justify-content: center; display: flex; } .btn-big { width: 200px; font-size: 25px; padding: 15px; } .product-info__top { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100% + 30px); margin-left: -15px; padding: 0 15px 30px; } .product-info__box { width: 50%; padding: 60px 20px 0; margin: 0; } .product-info__box { border-right: 1px solid #c7c7c7; } .product-info__box:last-child { border-right: none; } .product-info__title_bg { left: 50%; transform: translateX(-50%); top: -5px; } .product-info .circle { margin: 0; } .input-box__result { top: 40px; } .product-cards.brands .product-card__info { height: calc(100% - 220px); } .populars-item__info { opacity: 1; cursor: pointer; } .icon-info:before { color: #09d166; } .popular-list__item.open { z-index: 2; } .popular-list__item.open .populars-tooltip { pointer-events: all; } .loupe-widget__loupe { opacity: 0; } .subscribe .input { padding: 0 145px 0 45px; } .input-box__ico { left: 15px; } .product-slider .gallery-thumbs, .product-slider .gallery-top { width: auto; } .product-slider .swiper-container { width: 100%; margin: 0; } .products-slider .product-card__info { height: calc(100% - 32.2vw); } .populars_supplements .bg { display: none; } .share-wrap { position: static; } .row-post-info { position: relative; } .share-drop { max-width: 500px; width: 100%; left: 50%; transform: translate(-50%, -10px); } .share-drop.open { transform: translate(-50%, 0); } .product-advantages { display: block; width: auto; margin: 0; position: absolute; top: calc(50% - 74px); transform: translateY(-50%); left: 0; z-index: 2; } .product-advantages-item { padding: 0; line-height: 0.7; max-width: 70px; } .product-advantages-item:not(:last-child) { margin-bottom: 5px; } .product-advantages-icon { width: 50px; height: 50px; margin-bottom: 5px; } .product-advantages-icon img { width: 36px; height: 36px; } .product-advantages-name { font-size: 10px; line-height: 1; } .app-method { top: calc(50% - 74px); transform: translateY(-50%); } .app-method-tooltip { left: auto; right: calc(100% + 20px); transform: translateX(10px); } .app-method-tooltip:before { left: auto; right: -7px; } .app-method-btn--blue .app-method-tooltip:before { border-right: none; border-left: 10px solid #dff2ff; } .app-method-btn--yellow .app-method-tooltip:before { border-right: none; border-left: 10px solid #fff6d5; } .app-method-btn.active .app-method-tooltip { opacity: 1; visibility: visible; transform: translateX(0); } .back-to-top { bottom: 120px; } .page-nav { position: fixed; width: 100%; top: auto !important; bottom: 0; left: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 10px 25px; overflow: hidden; overflow-x: auto; box-shadow: none; } .page-nav .inner { display: flex; justify-content: space-between; } .page-nav .item { white-space: nowrap; display: block; } .page-nav .item-icon { margin: 0 auto 10px; } .page-nav .item:not(:last-child) { margin: 0 25px 0 0; } .page-nav .item:last-child { padding-right: 25px; max-width: 90px; } .product-vitamin .product-info__box { border: none; } .product-compare-wrap { margin-top: 0; } .faq { padding-bottom: 60px; } .faq__question { margin: 0 -5px; } .faq__question-col { padding: 0 5px; } .faq__question-item { max-width: 100%; } .top-block { padding: 30px 0 20px; } .top-block__row .col { width: 50%; } .app-method.small { transform: none; } .product-item .product-info__box { padding: 0; border: none; } .product-item .product-info__title_bg { transform: none; } .product-head-info.mobile { display: block; } .product-block .daily .headline { justify-content: flex-start; } .daily { position: relative; } .daily .share-btn { position: absolute; top: 65px; right: 0; } .daily-holder { display: block; padding: 0 30px; max-width: 748px; margin: 0 auto; } .daily-left, .daily-right { width: 100%; } .daily-left { padding-bottom: 200px; } .daily-list { max-width: 100%; } .daily-list .item { max-width: 250px; } .daily-list .item:nth-child(2) { margin-left: calc((100% - 250px) / (6 - 1) * (2 - 1)); } .daily-list .item:nth-child(3) { margin-left: calc((100% - 250px) / (6 - 1) * (3 - 1)); } .daily-list .item:nth-child(4) { margin-left: calc((100% - 250px) / (6 - 1) * (4 - 1)); } .daily-list .item:nth-child(5) { margin-left: calc((100% - 250px) / (6 - 1) * (5 - 1)); } .daily-list .item:last-child { margin-left: auto; } .daily-decor { background-image: url(../img/product/waves-tablet.svg); background-position: left; transform: none; left: 5%; top: 2%; width: 100%; height: 76%; } .daily-right { padding: 140px 50px 50px; } .daily-right:before { -webkit-border-radius: 160px 160px 20px 20px; -moz-border-radius: 160px 160px 20px 20px; border-radius: 160px 160px 20px 20px; } .daily-right .inner { max-width: 560px; justify-content: center; } .daily-img, .daily-advantages { width: 50%; } .daily .product-head-info.mobile { margin-top: 30px; } .daily .product-head { padding-right: 46px; } .all-product-supplements .content .col, .all-product-supplements .row-mod .col { width: 50%; margin-bottom: 20px; } .articles-webinars { padding: 50px 0 40px; } .protocol-hero { margin-bottom: 40px; } .protocol-hero:before { height: calc(100% - 165px); } .headline__caption { font-size: 34px; margin-top: 12px; } .protocol-hero .row { margin: 0 -13px 10px; padding: 0 10px; flex-wrap: nowrap; overflow-x: auto; } .protocol-hero .col { width: 370px; margin-bottom: 20px; } .protocol-hero .card { width: 100%; } .protocol-hero .product-head-info.mobile { display: block; margin-bottom: 40px; } .webinar__head, .webinar__head-holder { margin-bottom: 30px; } .webinar__head-title { font-size: 40px; } .webinar__head-box { margin-top: 5px; } .webinar__head-descr { font-size: 26px; line-height: 39px; } .webinar__head-descr.small { font-size: 20px; } .protocol-single { margin-bottom: 50px; } .protocol-single__item { margin: 0 -10px 50px; } .protocol-single__item-box { padding: 0 10px; } .protocol-single__item .app-method { top: 0; transform: none; } .protocol-single__item .product-advantages { position: static; display: flex; transform: none; } .popular-section-protocols { padding-bottom: 10px; } .popular-section .row.row-scroll { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .popular-section .col { width: 50%; } .popular-section .row.row-scroll .card { width: 370px; margin-bottom: 20px; } .popular-section__more { display: flex; justify-content: center; width: 100%; margin-top: 10px; } .popular-section .row.row-scroll + .popular-section__more { margin-bottom: 20px; } .popular-section__more .btn { padding: 11px 50px; border: 2px solid #0dcb5b; font-size: 13px; line-height: 14px; } .articles { margin-bottom: 30px; } .articles .headline { display: block; } .articles-webinars .headline { display: flex; align-items: center; margin-bottom: 10px; } .articles .slider-arrows { display: none; } .articles .headline__title { margin-bottom: 0; } .articles-webinars .headline__title { margin: 0; } .articles-webinars .product-head { display: block; margin: 0 0 30px; } .articles-webinars .product-head-info { display: block; margin: 0; } .card__head-btn { opacity: 1; visibility: visible; } .get-access__logo { display: none; } .protocol-hero .card__body-nav-link { font-size: 13px; line-height: 15px; padding: 8px 10px 10px; } /* .products_collections-inner { flex-direction: column-reverse; } */ .products_collections-inner { grid-template-columns: 1fr; gap: 0; } .products_collections-inner .content-bar { width: 100%; } .protocol-search .input { height: 60px; } .sidebar-slider__ctrl { justify-content: center; } .sidebar-slider .swiper-button-next, .sidebar-slider .swiper-button-prev { display: none; } .sidebar-slider .swiper-slide { width: 350px !important; } /* Responsive min-height adjustments for sliders */ .supplements-top__slider-outer { min-height: 250px; } .sidebar-protocols__slider { min-height: 280px; } .sidebar-bestseller__slider { min-height: 180px; } .webinar-head-title { font-size: 50px; } .product-cards.scroll { overflow: hidden; overflow-x: auto; flex-wrap: nowrap; margin: 0 -13px; padding-top: 10px; } .product-cards.scroll .product-card { width: 310px; flex-shrink: 0; flex-grow: 0; } .product-cards.scroll .product-card:last-child { margin-right: 13px; } .not-found { padding: 30px 0 70px; } .not-found__holder { display: block; } .not-found__img, .not-found__info { width: 100%; } .not-found__info { padding: 0; text-align: center; margin: 10px 0 0; max-width: 100%; } .not-found__info .expert__subtitle { justify-content: center; } .not-found__box { flex-direction: column-reverse; } .not-found__title { font-size: 61px; } .not-found__subtitle { font-size: 30px; } .not-found .btn-premium { margin-bottom: 45px; } .section-text { padding: 93px 0 30px; } .section-text__holder { flex-direction: column-reverse; } .section-text__aside { width: 100%; } .section-text__aside-holder { position: static; height: auto; } .section-text__content { padding: 0 0 30px; } .section-text__head-title h1 { font-size: 44px; } .section-text__aside-item:not(:first-child) { margin-top: 30px; } .section-text__prem { max-width: 500px; margin: auto; } .section-text__nav { display: flex; padding: 0 10px 17px; overflow: hidden; overflow-x: auto; position: absolute; left: 0; top: 116px; width: 100%; background: #fff; z-index: 1; margin: 0 !important; border-bottom: 1px solid #dee1e6; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; backdrop-filter: none; } .section-text__nav-link { color: #a0a6b1; padding: 5px 0 3px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; position: relative; background: none; letter-spacing: 0.05em; white-space: nowrap; } .section-text__nav-link:not(:last-child) { margin: 0 30px 0 0; } .section-text__nav-link svg { display: none; } .section-text__nav-link.active { background: none; border: none; color: #000; box-shadow: none; } .section-text__nav-link.active:after { content: ""; position: absolute; bottom: -17px; left: 0; right: 0; height: 2px; background: #0dcb5b; } .join-advantages { padding: 50px 0 0; } .join-advantages__item { flex-direction: column; padding-bottom: 50px; margin-bottom: 50px; } .join-advantages__item-box { width: 100%; text-align: center; } .join-advantages__item .anchor-title { justify-content: center; } .join-advantages__item-info, .join-advantages__item-img { max-width: 100%; } .join-advantages__item-info { margin-bottom: 30px; } .join-advantages__item.mod { flex-direction: column-reverse; } .join-advantages__item.mod .join-advantages__item-info { margin: 50px 0 0; } .join-advantages__item-list li { text-align: left; } .join-advantages__head-icon { width: 100px; height: 100px; } .join-advantages__head-icon img { width: 65px; height: 52px; } .join-advantages__head { margin-bottom: 30px; } .static-content h2 { font-size: 29px; line-height: 1.5; margin-bottom: 40px; } .static-content h3 { font-size: 24px; line-height: 28px; } .static-content .description { font-size: 20px; line-height: 1.5; margin-bottom: 50px; } .expert { margin-bottom: 50px; } .expert .experts-slider__title { font-size: 26px; line-height: 30px; margin-bottom: 55px; } .expert__item { display: block; } .expert__item:last-child { margin-bottom: 0; } .expert__item-content { position: relative; margin-top: -25px; padding: 0; z-index: 2; } .expert__item:nth-child(even) .expert__item-content { padding: 0; } .expert__item-img { width: 100%; padding-bottom: 0; max-width: 400px; height: 600px; margin: 0 auto; } .expert__item-name { flex-direction: column; margin-bottom: 10px; } .expert__item-name div { margin: 0 auto 20px; } .expert__item-name span { font-size: 26px; line-height: 30px; } .expert__item-box { display: block; } .expert__item-experience { width: 100%; margin: 0 auto 20px; position: relative; border: none; padding: 0; display: flex; justify-content: center; z-index: 1; } .expert__item-experience:after { content: ""; position: absolute; z-index: -1; top: 50%; left: 0; width: 100%; height: 1px; background: #303341; } .expert__item-experience .box { padding: 0 20px; background: #14161e; } .expert__item-descr, .expert__item-prof, .expert__item-work { text-align: center; } .expert .experts-slider__social { justify-content: center; } .expert-hero__title { font-size: 58px; } .expert-hero__bg { width: 1200px; animation: none; } .expert-hero__bg-item:last-child { display: none; } .expert-hero__holder { max-width: 420px; } .expert-hero__holder:after { width: 200%; } .expert-hero__txt { font-size: 14px; } .expert-hero__brands { padding: 64px 0 5px; flex-wrap: wrap; } .expert-hero__brands:before { width: auto; left: -22px; right: -10px; } .expert-hero__brands-item { height: 80px; margin: 0 5px; } .contacts__list { margin-bottom: 20px; } .contacts__list-item { width: 100%; margin-bottom: 10px; } .contacts__inner { width: 100%; } .contacts__img img { margin: auto; } .supplements-brand__holder { display: block; margin-bottom: 10px; } .supplements-brand__box { max-width: 100%; padding: 0; margin-bottom: 20px; } .supplements-brand .product-head-info { max-width: 100%; display: block; } .brands .search-list__item-tooltip { display: none; } .brand-single { display: block; } .brand-single__left { padding-right: 0; margin-bottom: 20px; } .brand-single__right { width: 100%; } .best-hero__img { width: 300px; height: 300px; } .get-premium__title { font-size: 40px; } .get-premium .product-head-info { display: block; } .reward, .reward.mod { margin: 0; overflow: hidden; } .reward__info { display: block; } .reward__left-top { margin-bottom: 20px; } .reward__info-txt { padding: 0 0 35px; } .reward .btn-premium { display: inline-flex; } .reward__left { padding: 25px 0 70px; overflow: visible; width: calc(100% - 285px); } .reward-leaves { transform: none; left: 35%; } .reward__man { bottom: -10px; right: -50px; } .reward__fluency { top: auto; transform: none; bottom: -8px; right: 131px; } .reward__mix { top: auto; right: 61px; bottom: -34px; transform: none; } } @media (max-width: 992px) { .brands-slider.secondary .gallery-brands-items .product-slider-card { width: calc(33.33% - 10px); } .featured-list .featured-item { width: calc(16% - 30px); margin: 0 15px 20px; } .featured-section { padding: 30px 0; } } @media (max-width: 850px) { .brands-slider .swiper-container { height: 25vw; max-height: initial; } .subscribe { -ms-flex-wrap: wrap; flex-wrap: wrap; } .subscribe__box:first-child { margin: 0 0 10px 0; } .subscribe__box { width: 100%; } .subscribe__box .input-box__btn .btn-search { padding: 0 10px; } .subscribe .input { height: 45px; } .subscribe__subtitle { text-align: center; } .subscribe__title { text-align: center; } } @media (max-width: 825px) { .gallery-card-slider .swiper-container.general-health { height: 31.1vw; } .product-card__info { height: calc(100% - 31.1vw); } .products-4col .product-card { width: calc(50% - 7px); } } @media (max-width: 768px) { .populars_supplements-deco { width: 120px; } .populars_supplements-deco--left { left: -10px; } .populars_supplements-deco--right { right: -10px; } .populars_supplements { padding-top: 65px; padding-bottom: 65px; } .populars_supplements-wave svg { height: 35px; } .populars-item { width: 100%; } .populars-item:last-child { margin-bottom: 0; } /* Mobile min-height adjustments to prevent CLS */ .supplements-brand { min-height: 325px; } .supplements-top__slider-outer { min-height: 190px; } .sidebar-protocols__slider { min-height: 250px; } .sidebar-bestseller__slider { min-height: 160px; } /* Prevent layout shift for search section */ .populars.search-page { min-height: 400px; } .brands-slider.secondary .gallery-brands-items .product-slider-card { width: calc(50% - 10px); position: relative; } .brands-slider.secondary .product-card__img .product-card__brand { display: block; } .brands-slider.secondary .gallery-brands-items .product-card__bottom .product-card__brand { display: none; } .product-facts { -ms-flex-wrap: wrap; flex-wrap: wrap; } .product-text { width: 100%; margin-bottom: 20px; } .popular-list__box { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .popular-list__box:last-child { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 10px; } .popular-list__item { -ms-flex-wrap: wrap; flex-wrap: wrap; } .populars-text__row { margin-bottom: 15px; } .populars__body { margin-top: 10px; } .populars_supplements .headline { margin-bottom: 10px; } .tags__selection_wrap { padding: 13px 15px 13px 10px; } .tags__selection_wrap .icon-prev { height: 25px; width: 25px; } .tags__title { width: calc(100% - 55px); } .tags__selection:nth-child(4n) .mini-drop { left: 0; right: inherit; } .tags__selection:nth-child(3n) .mini-drop { left: inherit; right: 0; } .tags__selection { width: calc(33.33% - 10px); } .tags__item { padding: 5px 10px; } .filters { padding: 20px 0 0; margin: 0 -10px; } /*.top-search .input-box__btn .btn-search {*/ /*padding: 0 20px;*/ /*}*/ /*.input-box .input {*/ /*padding: 0 100px 0 60px;*/ /*}*/ .top-search .input-box { width: 100%; } .top-search { padding: 20px 10px 0; } .filter-box { margin-left: 5px; } .headline__actions { width: 73%; } .footer-box_menu, .footer-box_tools { width: auto; margin: 0; } .footer .logo { padding-top: 0; } .footer .block { padding: 20px 5px; } .product-text__row { margin-bottom: 15px; } .user-actions .btn { line-height: 17px; padding: 5px 15px; } .user-actions:before { display: none; } .product-compare-wrap .block-btn { padding-bottom: 20px; } .search-list__text { padding-right: 0; } .search-list__item { justify-content: center; } .search-list { width: calc(50% - 15px); margin-bottom: 10px; } .search-list__item .search-list__ico { display: none; } .search-block .search-groups { justify-content: center; } .products-list__btn .btn { padding: 5px; } .products-list__box .circle { display: none; } .products-list__item.cards-into-card .products-list__box { width: 100%; } .input, .textarea { height: 40px; } .btn-big { width: 200px; font-size: 16px; padding: 10px; } .table-related { min-width: 1024px; } .product-compare-wrap table th { padding: 0 6px; } .product-compare-wrap table th .name { font-size: 13px; margin-bottom: 6px; } .product-compare-wrap table th .by { font-size: 12px; margin-bottom: 6px; } .product-compare-wrap table .img-wrap { height: 150px; max-width: 140px; } .product-compare-wrap table th .number, .product-compare-wrap table th .number-achiev .number { width: 36px; height: 36px; font-size: 18px; } .product-compare-wrap table th .number-achiev { width: 36px; height: 36px; margin: 0 auto 12px; } .options__bottom .btn { opacity: 1; padding: 5px 10px; } .options__main { margin-bottom: 17px; height: auto; } .options__ico { margin-bottom: 17px; } .options__title { margin-bottom: 10px; } .options-list__item { width: calc(50% - 25px); } .options-list { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; padding: 0; } .product-table-holder { width: 100%; } .product-compare-wrap table td { padding: 10px 8px; font-size: 13px; line-height: 1.4; } .brands-slider .brads-list .product-card__img { background-color: transparent; } .brands-slider .brads-list .product-card__brand { height: 40px; width: 54px; position: relative; margin: 20px; } .brands-slider .brads-list .product-card__brand img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 100%; max-height: 100%; } .brands-slider .brads-list .product-slider-card .img-box { padding-bottom: 125px; margin: 20px 0; } .brands-slider .brads-list .product-slider-card .img-box img { top: 0; } .brands-slider .brads-list .product-card__info { padding: 0; height: auto; } .brands-slider .brads-list .product-slider-card .product-card__headline { /*border-bottom: 1px solid #e5e5e5;*/ padding: 5px 20px; margin-top: 15px; margin-bottom: 0; } .brands-slider.secondary .product-slider-card .product-tags { padding: 10px 20px 0; } .brands-slider .brads-list .product-card__bottom { padding: 25px 20px 15px; margin-top: 0; } .brands-slider .brads-list .product-slider-card { width: calc(50% - 20px); margin: 0 10px 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 9.9px 0.1px rgba(0, 0, 0, 0.08); } .product-vitamin .product-compare-wrap .footnote { width: 100%; } .protocol-references__holder ol li:nth-child(6), .protocol-references__holder ol li:nth-child(7), .protocol-references__holder ol li:nth-child(8), .protocol-references__holder ol li:nth-child(9), .protocol-references__holder ol li:nth-child(10) { display: none; } .protocol-references__more { width: 100%; margin-left: 30px; } } @media (max-width: 767px) { .brands-slider .swiper-slide { margin-bottom: 10px; } .all-product-supplements .products-list__item { width: calc(50% - 20px); } .all-product-supplements.no-aside .products-list__item { width: calc(50% - 20px); } .all-products .products-list__number { top: 15px; } .all-product-supplements .sidebar-products .side-wrap { flex-wrap: wrap; } .all-product-supplements .sidebar-products .side-wrap .col-1 { width: 100%; } .all-product-supplements .sidebar-products .side-wrap .col-2 { width: 100%; } .btn { line-height: 20px; } .brads-list .block-btn { padding: 0 10px; display: flex; align-items: center; width: 100%; justify-content: center; } .brads-list .block-btn .btn { line-height: 20px; width: 100%; background: #f6f6f6; } .gallery-brands-row { display: none; } .brands-slider .brads-list { display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; border-bottom: 1px solid #e5e5e5; padding-bottom: 30px; margin-bottom: 5px; } .block-sources .list-sources { max-height: 500px; } .alphabet { justify-content: center; } .brands .alphabet { justify-content: flex-start; } .back-to-top.show { right: 10px; } .products-slider .product-card__info { height: calc(100% - 65vw); } .price-btn { display: block; position: fixed; bottom: 102px; left: 50%; transform: translateX(-50%); width: 160px; border: none; background-color: #0dcb5b; z-index: 12; color: #fff; text-transform: uppercase; text-align: center; font-size: 13px; line-height: 1; padding: 12px 20px 15px; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .price-btn.hide { opacity: 0; visibility: hidden; z-index: -1; } .faq__head { display: block; margin-bottom: 25px; } .faq__head-left { padding: 0; margin-bottom: 20px; } .faq__nav { flex-wrap: wrap; } .faq__nav-item { margin-bottom: 5px; } .faq__question { display: block; } .faq__question-col { width: 100%; } .faq__question-col:not(:last-child) { margin-bottom: 10px; } .daily-holder { padding: 0 25px; max-width: 630px; } .daily-decor { left: 1%; top: 8%; width: 100%; height: 70%; } .daily-right { padding: 140px 35px 50px; } .all-product-supplements.mod { padding: 20px 0 30px; } .all-product-supplements .wrap .sidebar-products { display: block; } .all-product-supplements .wrap .sidebar-products .populars { width: 100%; } .all-product-supplements .wrap .sidebar-products .populars:not(:last-child) { margin-bottom: 20px; } .product-prem-btn { line-height: 40px; } .webinar__head { margin-bottom: 20px; } .webinar__head-title span { display: inline; } .webinar__head-holder { display: block; } .webinar__head-box { padding: 0; margin-top: 20px; } .webinar__head-box:before { left: 0; } .webinar__head-box .share-btn { margin-bottom: 20px; } .webinar__head-info { max-width: 100%; } .webinar__head-descr.small { line-height: 30px; margin-top: 30px; } .protocol-single__group.hidden { margin-bottom: 35px; } .protocol-single__item { display: block; margin-bottom: 26px; } .protocol-single__item-box { width: 100%; } .protocol-single__item-box:nth-child(2) { display: flex; flex-direction: column; } .protocol-single__item-img { margin: 0 auto; } .protocol-single__item-box:nth-child(2) .protocol-single__item-head { order: 2; } .protocol-single__item-title { font-size: 26px; line-height: 30px; } .protocol-single__item-box:nth-child(2) .protocol-single__item-txt { order: 3; } .protocol-single__item-box:nth-child(2) .item-shop__sellers { order: 1; } .protocol-single__tags { margin-bottom: 30px; } .protocol-single__tags-list { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .protocol-single__tags-item { white-space: nowrap; } .protocol-single__line { margin: 30px 0; } .protocol-single__list ul { column-count: inherit; } .protocol-single__group-head .product-head-info { display: block; max-width: 100%; margin-top: 20px; } .get-access { padding: 25px 20px; } .get-access__box:before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 150px; background: linear-gradient( 0deg, #ffffff 0%, rgba(217, 217, 217, 0) 100% ); } .get-access__txt span { padding: 0; } .popular-section .col, .popular-section .col.col--mod-row { width: 100%; } .protocol-references__holder ol { column-count: auto; } .protocol-single__group.hidden:before, .protocol-single__group.hidden:after { content: none; } .supplements-combo { margin: 20px 0; } .webinar-head { display: block; margin-bottom: 10px; padding-bottom: 12px; position: relative; } .webinar-head-title { display: block; font-size: 40px; white-space: normal !important; } .webinar-head-title:after { margin: 20px 0 0; width: calc(100% - 56px); } .webinar-head .share-btn { position: absolute; right: 0; bottom: 0; } .supplements-combo .disclaimer { display: none; } .protocols-section__more { max-width: 100%; padding: 0; } .sidebar-combos { flex-wrap: nowrap; overflow: hidden; overflow-x: auto; } .sidebar-combos__col { width: 140px; flex-shrink: 0; flex-grow: 0; } .protocols-section { margin-bottom: 30px; } .not-found__img { padding-bottom: 100%; } .section-text__head-title { flex-direction: column; margin-bottom: 30px; } .section-text__head-title .join-advantages__head-icon { margin: 0 0 30px; } .section-text__head-title h1 { font-size: 24px; } .section-text__head-subtitle h2 { line-height: 42px; padding-top: 4px; } .faq.faq--contacts sub { display: block; } .contacts__info-title { font-size: 30px; margin-bottom: 15px; } .join-advantages__item-title { font-size: 24px; line-height: 28px; } .join-advantages__item-txt, .join-advantages__item-list li p { font-size: 14px; } .join-advantages__item-list li { padding-left: 78px; } .join-advantages__item-list li:not(:last-child) { margin-bottom: 30px; } .join-advantages__item:nth-child(2) { margin-bottom: 30px; padding-bottom: 30px; } .experts-slider { margin-bottom: 10px; } .experts-slider__title { max-width: 100%; font-size: 26px; line-height: 30px; margin-bottom: 20px; } .experts-slider__item-body { padding: 30px 10px 0; text-align: center; } .experts-slider__social { justify-content: center; } .not-found__img { padding-bottom: 100%; } .supplements-brand__box { display: block; } .supplements-brand__img { width: 100%; height: 285px; margin: 0 0 20px; } .brand-single { margin-bottom: 20px; } .brand-single__left { display: block; } .brand-single__head.desktop { display: none; } .brand-single__head.mobile { display: flex; margin-bottom: 20px; } .brand-single__name { line-height: 1; } .sort-ctrl { align-items: center; margin-bottom: 15px; } .sort-ctrl .buttons__ctrl .btn { margin-bottom: 5px; } .sort-ctrl__box.active .sort-ctrl__list-btn:after { transform: rotate(180deg); filter: none; } .sort-ctrl__box.active .sort-ctrl__list { opacity: 1; visibility: visible; transform: translateY(0); } .sort-ctrl__list-btn { display: flex; align-items: center; font-weight: 500; font-size: 15px; line-height: 1.5; flex-shrink: 0; flex-grow: 0; white-space: nowrap; } .sort-ctrl__list-btn:after { content: ""; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-up.svg); filter: brightness(0); transition: all 0.3s; margin-left: 10px; } .sort-ctrl__list { display: block; background: #ffffff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); border-radius: 10px; padding: 20px 20px 5px; position: absolute; right: 0; top: calc(100% + 5px); width: 200px; z-index: 3; transform: translateY(15px); opacity: 0; visibility: hidden; transition: all 0.3s; } .sort-ctrl__list-item:not(:last-child) { margin: 0; } .sort-ctrl__list-item { padding: 0 0 15px; border-width: 1px; display: flex; align-items: center; justify-content: space-between; } .sort-ctrl__list-item:after { content: ""; width: 10px; height: 10px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../img/icons/arrow-up.svg); filter: brightness(0); transition: all 0.3s; margin-left: 10px; transform: rotate(-90deg); opacity: 0; } .sort-ctrl__list-item.active { margin-bottom: 15px; border-color: #e5e5e5; } .sort-ctrl__list-item.active:after { opacity: 1; } .best-hero__content { margin: 0; max-width: 100%; } .best-hero__img { display: none; } .get-premium__holder { flex-direction: column-reverse; align-items: flex-start; } .get-premium__block, .get-premium__img { width: 100%; } .get-premium__block { padding: 0; } .get-premium__inner { max-width: 100%; } .get-premium__title { display: none; font-size: 40px; } .get-premium__title.hidden { display: block; } .get-premium .product-head-info { margin-bottom: 50px; max-width: 100%; } .get-premium__img { margin: 0 auto 30px; padding-bottom: 81.4%; } .get-premium__btn { line-height: 25px; display: flex; } .reward__left { min-width: 300px; } .product-head .title { font-size: 20px; } } @media (max-width: 650px) { .product-card { width: calc(50% - 7px); } .featured-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 75px; row-gap: 35px; width: 100%; margin-left: 0; } .featured-list .featured-item { width: calc(50% - 0px); margin: 0 auto; } .search-block .search-groups .swiper-pagination { display: block; } .populars-brands.search-groups { height: 180px; margin-left: 10px; overflow: initial; padding-bottom: 30px; } .populars-brands.search-groups .swiper-pagination { bottom: 0; } .populars-brands.search-groups .swiper-pagination .swiper-pagination-bullet { height: 10px; width: 10px; background: #e7e7e7; opacity: 1; } .populars-brands.search-groups .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #09d166; } .populars-brands.search-groups .swiper-slide { width: 220px; margin: 0; padding: 0; } .populars-brands.search-groups .search-list__item { justify-content: center; flex-direction: column; height: 100%; padding: 12px; } .populars-brands.search-groups .search-list__text { font-size: 14px; text-align: center; } .populars-brands.search-groups .search-list__logo-wrap { margin-right: 0; margin-bottom: 10px; } .populars-brands.search-groups .search-list__item .new_icon_brand { width: 100px; margin-right: 0; height: 31px; max-height: 65px; margin-bottom: 0; } .product-block__sellers .product-buttons .btn-green { width: calc(100% - 20px); margin: 0 10px 10px; } .mini-drop { width: auto; left: -2px !important; right: -2px !important; } .tags__selection:nth-child(3n) .mini-drop { left: 0; right: inherit; } .tags__selection { width: calc(50% - 10px); } .filters { padding: 15px 0 8px; } .search-list { width: calc(100% - 30px); } .product-compare-wrap table td { padding: 8px 6px; font-size: 12px; } .product-compare-wrap table th { padding: 0 4px; } .product-compare-wrap table th .name { font-size: 12px; margin-bottom: 4px; } .product-compare-wrap table th .by { font-size: 11px; } .product-compare-wrap table .img-wrap { height: 120px; max-width: 110px; } .daily-holder { padding: 0; } .daily-left { max-width: 380px; margin: 0 auto; } .daily-decor { background-image: url(../img/product/waves-mobile.svg); left: 5%; top: 0; width: 100%; height: 106%; } .daily-center { top: calc(50% - 110px); } .daily-right { padding: 140px 60px 50px; } .daily-right:before { left: 30px; right: 30px; width: auto; } .daily-right .inner { display: block; max-width: 100%; } .daily-img, .daily-advantages { width: 100%; } .daily-img { margin: 0 auto 20px; } .brands .search-list__col { width: 100%; } .brands .product-cards { margin: 0; } .brands .product-cards .product-item { width: calc(50% - 7px); } } @media (max-width: 600px) { .header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; border-bottom: 1px solid rgba(9, 209, 102, 0.3); box-shadow: 0 2px 8px rgba(9, 209, 102, 0.1); } .products-list__box:first-child { padding-top: 0; padding-left: 0; } .product-card__img .sup_img { padding-bottom: 50%; } .product-card__img .sup_img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .products-list__item.cards-into-card .products-list__link { padding: 8px 6px 8px 6px; } .product-card__info { padding: 12px 15px 12px; } .products-list__item.cards-into-card:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .populars-item__headline { padding: 12px 12px 12px 8px; } .populars-item__title { font-size: 13px; margin-right: 8px; width: calc(100% - 80px); } .populars-item__ico { width: 45px; height: 45px; right: 12px; top: 12px; } .populars-item__ico img { width: 22px; height: 22px; } .populars-item__ico span { font-size: 22px; } .populars-item__ico_border { width: 40px; height: 40px; } .populars-item__info .populars-item__info_btn { width: 24px; height: 20px; background-size: 14px 14px; } .populars-item__list { padding: 25px 12px 10px; } .populars-item__row { width: calc(100% + 24px); margin-left: -12px; } .populars-item__row:before { right: 10px; width: 10px; height: 10px; } .populars-item__bottom { padding: 10px 12px; } .populars-item__bottom .btn { width: 100px; line-height: 24px; font-size: 12px; } .populars-item { margin-bottom: 15px; } .populars-items { margin: 0; } .options__ico { width: 80px; height: 80px; margin-bottom: 15px; } .options__ico img { max-width: 55%; max-height: 55%; } .options__ico .img { width: 40px; height: 40px; } .options__ico span { font-size: 40px; } .options__ico .icon-collections { font-size: 34px; } .list-platform .item-platform .img { max-width: 60px; } .tags-list__img > img { width: calc(90% - 5px); height: calc(90% - 5px); margin: auto; } .tags-list__item { padding: 13px 15px 13px 10px; } .tags-list__img { width: 25px; height: 25px; } .tags-list__img { margin-right: 7px; } .headline .headline-btn { margin: 15px auto 0; } .populars-readMore .populars-text { margin-bottom: 10px; overflow: hidden; } .populars-readMore .btn { background: #fff; padding: 3px 8px; font-size: 12px; display: block; margin: 0 auto; text-align: center; } .header .menu .mini-drop { position: static; width: 100%; left: 0px !important; right: 0px !important; max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease, opacity 0.3s ease; transition: max-height 0.35s ease, opacity 0.3s ease; visibility: visible; -webkit-transform: none; transform: none; pointer-events: none; box-shadow: none; margin-top: 0; } .header .menu .tags__selection_wrap.open + .mini-drop { max-height: 500px; opacity: 1; pointer-events: auto; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); } .header .tags__selection_wrap { border: 2px solid #03d166; height: auto; } .header .menu .tags__selection { flex-direction: column; } .brands-slider .swiper-container { height: 35vw; } #category-wrap, .top-search .filters { display: none; } .top-search .headline { margin-bottom: 0; } .header .menu { width: 100%; height: calc(100vh - 51px); overflow-y: auto; top: 51px; border-radius: 0; display: block; } .header #category-wrap { display: block; margin-top: 15px; } .header .tags-list__title { max-width: 100%; } .header .input-box__result { top: 50px; } .header .mobile-search { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; top: 0; width: 100%; position: absolute; left: 0; will-change: transform; } .header .mobile-search .input-box__loader { z-index: 22; background: #fff; right: 8px; } .header .mobile-search .input-box__ico { filter: brightness(0); } .header .input-box .input { height: 50px; border-radius: 0; } .header.active-search .mobile-search { opacity: 1; pointer-events: all; } .header.active-search .btn-search .icon-close { opacity: 1; pointer-events: all; } .header.active-search .btn-search img { opacity: 0; pointer-events: none; } .header .btn-search { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; position: relative; padding-top: 1px; } .header .btn-search img { max-width: 18px; } .header .btn-search .icon { font-size: 18px; position: absolute; left: 50%; transition: 0.3s; top: 50%; transform: translate(-50%, -50%); } .header .btn-search .icon-close { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 10; padding: 10px; width: 32px; height: 32px; transition: color 0.3s; opacity: 0; pointer-events: none; } .header .btn-search .icon-close:before, .header .btn-search .icon-close:after { position: absolute; left: 15px; top: 4.5px; content: " "; height: 20px; width: 1px; background-color: #000; } .header .btn-search .icon-close:before { transform: rotate(45deg); } .header .btn-search .icon-close:after { transform: rotate(-45deg); } .top-search .search-desk { display: none; } .header { position: fixed; left: 0; top: 0; width: 100%; background: #fff; } .header .logo { font-size: 27px; height: 27px; } .wrapper { padding-top: 50px; } .gallery-card-slider .gallery-card.general-health .swiper-slide { padding: 0; } .gallery-card-slider .gallery-card.general-health { height: 31vw; } .product-card__info { height: calc(100% - 31vw); } .populars-item { margin: 0 0 15px 0; } .populars-items { margin: 0; } .filters { margin: 0 -5px; } .top-search { padding: 70px 0; } .headline__actions { width: 100%; margin: 10px 0 0 0; } .headline { -ms-flex-wrap: wrap; flex-wrap: wrap; } .products-list__box:first-child { margin: 0 0 10px; padding-top: 35px; padding-left: 20px; } .img-placeholder-sm { width: 120px; height: 120px; } .products-list__box { width: 100%; } .header { padding: 10px 5px; } .container { padding: 0 10px; } .block-more { margin-top: 20px; } .populars-item__list { padding: 25px 12px 10px; } .rating__indicator { height: 10px; } .rating__line { height: 10px; } .card-rating__title { margin-bottom: 0; } .populars__box:last-child .popular-list { margin-bottom: 10px; } .populars .btn_show_more_coll, .populars .btn_show_tags { } .populat-list-block .popular-list__item { box-shadow: none; } .action-mobile-wrap .populat-list-block { margin-bottom: 10px; } .btn_show_tags { display: flex; font-size: 13px; } .action-mobile-wrap { margin-bottom: 20px; } .popular-list__title { color: #000; font-size: 13px; } .mini-drop__headline .input { padding: 0 20px 0 44px; } .filters { padding: 20px 0 12px; } .product-card__bottom { margin-top: 10px; } .products-list__box:first-child { padding-top: 0; padding-left: 0; } .product-card__info { padding: 12px 15px 15px; } .gallery-card-slider .swiper-container { margin-top: 0px !important; height: 250px; } .product-cards.brands .product-card__info { height: calc(100% - 250px); } .products.products_collections { border-bottom: 1px solid #e5e5e5; } .populars.populars_border .container { padding-bottom: 0; } .populars-text__row { font-size: 13px; } .options-list__item { width: calc(50% - 25px); } .options__subtitle { font-size: 12px; } .options__title { font-size: 22px; } .options__ico .icon-collections { font-size: 34px; } .options__ico span { font-size: 40px; } .options__ico { width: 80px; height: 80px; margin-bottom: 15px; } .img-placeholder-sm { width: 110px; height: 110px; } .populars-item__headline { padding: 12px 12px 12px 8px; } .populars-item__headline { background-color: #f8f8f8; } .wrap-chart { min-height: 200px; } .headline__title { width: 100%; margin: 0; text-align: center; font-size: 22px; } .product-vitamin .product-block .headline__title { text-align: left; } .products-list { display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; align-items: flex-start; } .products-list__title { font-size: 16px; } .products-list__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .all-products .products-list__box:first-child { padding-top: 0; flex-direction: column; text-align: center; justify-content: center; position: static; } .products-list__subtitle { margin-bottom: 0; } .all-products.products { padding-bottom: 0; border-bottom: 1px solid #e5e5e5; } .populars-item__row { width: calc(50% - 16px); margin: 0 8px 12px; } .populars-item__list { display: flex; flex-wrap: wrap; align-items: flex-start; width: calc(100% + 16px); margin-left: -8px; } .populars-item__row .rating { width: 100%; margin-top: 7px; } .populars-item__row > a .populars-item__name { padding-top: 2px; } .populars-item .rating__line { width: calc(100% - 17px); } .populars-item__row:before { right: 0; } .populars-item__row a { width: 100%; flex-wrap: wrap; align-items: flex-start; padding: 5px 20px 5px 10px; } .action-mobile-wrap .populat-list-block { justify-content: center; } .headline--share { flex-wrap: nowrap; } .top-block__row .col, .all-product-supplements .content .col, .all-product-supplements .row-mod .col { width: 100%; } .all-product-supplements .btn-more { max-width: 100%; } .headline.f-start .headline__title { text-align: inherit; } .app-method-tooltip { width: 250px; } .protocols-section .col, .products_collections-inner .col { width: 100%; } .health-topics-list-wrap { max-height: 320px; } #nts-toast-container { left: 12px; right: 12px; } .nts-toast { max-width: 100%; min-width: 0; } } @media (max-width: 576px) { /* Prevent CLS on small mobile */ .supplements-brand { min-height: 325px; } .supplements-top__slider-outer { min-height: 180px; } .input-box__ico { left: 10px; } .subscribe .input { padding: 0 120px 0 35px; } .input-box__btn .btn_subscribe { font-size: 12px; padding: 0 20px; } .row-sup .sup-text { flex-wrap: wrap; } .product-tags { padding: 10px 20px 0; } .brands-slider.secondary .product-slider-card .product-tags { padding: 10px 20px 0; } .subscribe__title { font-size: 24px; } .populars__searched_mob.populars { display: block; overflow: initial; } .populars__searched_mob.populars .populars-tooltip { top: auto; bottom: 48px; } .populars__searched_mob.populars .populars-tooltip:before { transform: translate(-50%, 50%) rotate(180deg); top: 100%; bottom: auto; } .populars__box.populars__box_desk { display: none; } .wrap-chart { padding: 0 10px 10px 0; min-height: 180px; } .all-product-supplements .sidebar-products .headline { margin-bottom: 10px; } .all-product-supplements .sidebar-products .populars { padding: 20px 10px; } .all-product-supplements .sidebar-products .block-btn { margin-bottom: 20px; } .product-card .gallery-card-slider .swiper-container { padding: 10px 0 20px; } .gallery-card-slider.brand-slider .swiper-slide img { max-height: calc(100% - 30px); max-width: calc(100% - 30px); margin: 20px auto 10px; } .gallery-card-slider .swiper-container { height: 300px; } .product-cards.brands .product-card__info { height: calc(100% - 300px); } .product-cards .product-card__info { padding: 0; } .products-list__item.cards-into-card { margin-left: 0; margin-top: 0; } .product-card__img .sup_img { padding-bottom: 55%; } .product-cards .product_card_top-product { padding: 0 12px; } .product-card__bottom { position: static; } .product-cards .product-card__bottom { padding: 12px; } .product-cards .product-card__headline { margin-bottom: 0; min-height: 40px; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; } .product-cards .product-card__title { margin-bottom: 0; width: 100%; padding: 12px 12px; } .gallery-card-slider .gallery-card.general-health { height: 64vw; } .product-card { padding-bottom: 0; } .products-4col .product-card { width: 100%; } .product-cards .product-card__info { height: calc(100% - 65vw); } .share-drop { padding: 10px; } .share-drop__body { display: block; margin-bottom: 10px; } .share-drop__item { display: inline-block; margin-bottom: 10px; } .share-drop__item:not(:last-child) { margin-right: 10px; } .share-drop__list { flex-wrap: wrap; margin: 0; } .share-drop__item-icon { width: 42px; height: 42px; } .product-mix .item .product-tags { padding: 10px 0 0; } .all-product-supplements .wrap .sidebar-products .populars { padding: 20px 10px; } .wrap .wrap-chart #myChart { margin-top: 0; } .wrap .wrap-chart { padding: 0; } .contacts__form-col--50 { width: 100%; } .reward-leaves { left: 0; } } @media (max-width: 540px) { .list-platform .item-platform .btn .text { display: none; } .list-platform .item-platform .btn { position: relative; width: 40px; height: 40px; margin-left: 10px; padding: 0; } .list-platform .item-platform .btn:before { content: ""; width: 20px; height: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../img/icons/cart.svg); } .hide-m-540 { display: none; } .search-page { position: relative; } .products_collections-inner.open .sidebar { transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; display: block; } .populars.m-populars { padding: 0; } .sidebar .category-list .list-item { max-width: 100%; } .sidebar .raiting-box .raiting-list .raiting-item { max-width: 100%; } .sidebar .health-topics-box .health-topics-list .health-topics-item { max-width: 100%; } .sidebar .aside-bar .section { margin: 0 5px 20px 10px; } .compare-table thead tr th { padding: 25px 0px; } .products_collections-inner .content-bar { width: 100%; } .products_collections-inner .content-bar .populars .container { padding: 0; } .gallery-card-slider .swiper-container { height: 95vw; } .product-cards.brands .product-card__info { height: calc(100% - 95vw); } .tags { margin: 0; width: 100%; } .tags__selection { width: 100%; margin: 0 0 10px 0; } .item-shop .list-platform .item-platform .btn:before { display: none; } .item-shop .list-platform .item-platform .btn { width: auto; height: auto; } .blog-sidebar { top: 10px; bottom: 10px; left: 10px; right: 10px; width: calc(100% - 20px); padding: 20px 10px; } .blog-sidebar-content { height: calc(100vh - 94px - 80px); margin: 0 -5px; } .blog-sidebar-content .inner { margin: 0 5px; } .product-vitamin .list-platform .item-platform .btn { width: auto; height: auto; padding: 10px; } .product-vitamin .list-platform .item-platform .btn:before { content: none; } .product-vitamin .list-platform .item-platform .btn .text { display: block; } .alternatives__item .list-platform .item-platform .grey-value { line-height: 37px; } .protocol-single .list-platform .item-platform .btn { position: relative; height: 40px; margin-left: 10px; width: auto; padding: 11px 20px; } .protocol-single .list-platform .item-platform .btn:before { display: none; } .protocol-single .list-platform .item-platform .btn .text { display: block; } } @media (max-width: 500px) { .product-info__title_top { padding: 15px 8px 30px; } .product-info__box { border: none; padding: 50px 30px 15px; } .product-info__top { -ms-flex-wrap: wrap; flex-wrap: wrap; } .user-actions { width: 100%; margin: 10px 0 0; padding-left: 10px; } .search-list { width: 100%; } .input, .textarea { padding: 0 10px 0 10px; } .compare-table thead { max-width: 140px; } .product-table__row { padding: 15px 10px; } .options__ico { width: 70px; height: 70px; margin-bottom: 10px; } .options__ico img { max-width: 50%; max-height: 50%; } .options__ico span { font-size: 35px; } .options__ico .icon-collections { font-size: 30px; } .options__title { font-size: 19px; margin-bottom: 2px; } .product-compare-wrap table { font-size: 11px; } .product-compare-wrap table th:first-child, .product-compare-wrap table td:first-child { width: 17%; } .all-product-supplements .products-list__item, .all-product-supplements.no-aside .products-list__item { width: calc(100% - 20px); } .brands-slider .brads-list .product-slider-card .product-card__headline { padding: 0 10px; } .brands-slider:not(.secondary) .brads-list .product-card__bottom { padding: 10px; } .brands-slider .brads-list { width: calc(100% + 10px); margin-left: -5px; } .brands-slider .brads-list .product-slider-card { width: calc(50% - 10px); margin: 0 5px 20px; } .brands-slider.secondary .brads-list .product-slider-card { width: 100%; } .product-compare-wrap table td { padding: 6px 4px; } .product-compare-wrap table th { padding: 0 3px; } .product-compare-wrap table th .name { font-size: 11px; } .product-compare-wrap table th .by { font-size: 10px; } .product-compare-wrap table .img-wrap { height: 100px; max-width: 90px; } .product-compare-wrap table th .number, .product-compare-wrap table th .number-achiev .number { width: 28px; height: 28px; font-size: 14px; } .product-compare-wrap table th .number-achiev { width: 28px; height: 28px; margin: 0 auto 8px; } .gallery-top { margin: 0 10px; } .user-actions .btn { line-height: 14px; padding: 5px 3px; font-size: 10px; } .tags { margin: 0; } .product-vitamin .product-info__top { flex-wrap: nowrap; } .product-vitamin .product-info__box { padding: 50px 10px 15px; } .product-vitamin .product-info__title_top { padding: 15px 8px 45px; font-size: 11px; } .product-mix .product-info__box { padding: 0; } .product-mix .product-info__title_top { padding: 11px 5px 45px; } .brands-slider .brads-list .product-slider-card { width: 100%; } } @media (max-width: 450px) { .brands-slider .swiper-container { height: 44vw; } .populars-item__list { padding: 20px 8px 8px; } .populars-item__row { margin: 0 8px 12px; } .populars-item__bottom { padding: 8px 10px; } .webinar-hero-circle { right: 10%; } .expert__item-img { max-width: 100%; padding-bottom: 150%; height: auto; } } @media (max-width: 374px) { .protocols-list .card, .popular-webinars__col { width: 300px; } .header .menu { width: 100%; } .daily-right { padding: 140px 20px 50px; } .daily-right:before { left: 0; right: 0; } .compability .result .item .name { font-size: 14px; line-height: 17px; } .compability .result .item .descr { font-size: 12px; line-height: 16px; } .top-categories__col { width: 280px; } .get-premium__title { font-size: 34px; } .footer__promo { padding: 20px 10px; } .footer__promo-form .btn { padding: 5px 15px; } .app-method-tooltip { width: 230px; } .app-method-descr { margin-bottom: 10px; } .popular-section .row.row-scroll .card { width: 300px; } .webinar-info__board-inner { display: block; } .webinar-info__board-txt { padding: 10px 0 0; } .webinar-info__board .btn, .webinar__col .webinar-info__board .btn { padding: 17px 20px 17px 70px; } .editor.editor-blog .webinar-info__board, .webinar__col .webinar-info__board, .webinar-info-box { padding: 10px; } .sidebar-slider .swiper-slide, .supplements-brand__slider .swiper-slide { width: 300px !important; } .supplements-brand__img { height: 200px; } .board.board--img { height: auto; } .board-protocol__content-name { font-size: 34px; } .join-advantages__item-list li { padding-left: 65px; } .checkout__item .join-section__item-inner { display: block; margin: 0; } .checkout__item .join-section__item-list { padding: 0; width: 100%; } .checkout__item-plan-title { font-size: 21px; } .checkout__item-plan-time svg { width: 18px; height: 18px; } .checkout__payment-label span { display: none; } .expert-hero__title { font-size: 42px; } .brand-single__title { font-size: 12px; } .brand-single__box-info { font-size: 14px; line-height: 1.2; } } @media (min-width: 1025px) { .featured-list .featured-item .img { filter: grayscale(0); opacity: 1; } .populars-item__row:hover > a { background-color: rgba(9, 209, 102, 0.08); } .populars-item__row:hover > a::after { width: 90%; } .btn.green-border:hover { background: #0dd166; color: #fff; } .btn.green-border:hover .icon-arrow { filter: brightness(0) invert(1); } .table-wrap table th:hover .img-wrap img { transform: scale(1.1); } .products-list__btn .btn:hover { color: #fff !important; background-color: #09d166; } .btn.green-border:hover .icon-arrow { filter: brightness(0) invert(1); } .btn.green-border:hover { background: #0dd166; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; } .table-wrap table th:hover .img-wrap img { transform: scale(1.1); } .product-tags a.value:hover { background: #0dd166; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; } .list-platform .item-platform .btn:hover { background: #0dd166; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); color: #fff; } .tags__selection:hover { box-shadow: 0 10px 15px 1px rgba(7, 90, 45, 0.5); } .loupe-widget:hover .loupe-widget__loupe { display: block; pointer-events: none; } .populars-tooltip__close:hover { background: #0dd166; } .populars-tooltip__close:hover:before, .populars-tooltip__close:hover:after { background-color: #fff; } .health-topics-box .health-topics-list .health-topics-item:hover { background-color: #f7f7f7; } .raiting-box .raiting-list .raiting-item:hover { background-color: #f7f7f7; } .category-list .list-item:hover { background-color: #f7f7f7; } .aside-bar button:hover { background-color: #09d166; color: #fff; border-color: #09d166; } .aside-bar button:active { border-color: #09d166; } .category-box .search-feild:focus { border-color: #09d166; } .category-box .search-feild:focus::-webkit-input-placeholder { color: #09d166; } .category-box .search-feild:focus:-ms-input-placeholder { color: #09d166; } .category-box .search-feild:focus::-ms-input-placeholder { color: #09d166; } .category-box .search-feild:focus:-ms-input-placeholder { color: #09d166; } .category-box .search-feild:focus::placeholder { color: #09d166; } .search-box button:hover { background-color: #09d166; color: #fff; border-color: #09d166; } .search-box button:active { border-color: #09d166; } .search-box .search-feild:focus { border-color: #09d166; } .search-box .search-feild:focus::-webkit-input-placeholder { color: #09d166; } .search-box .search-feild:focus:-ms-input-placeholder { color: #09d166; } .search-box .search-feild:focus::-ms-input-placeholder { color: #09d166; } .search-box .search-feild:focus:-ms-input-placeholder { color: #09d166; } .search-box .search-feild:focus::placeholder { color: #09d166; } .btn_show_more_supp:hover { color: #fff; background: #09d166; } .btn_show_more_coll:hover, .btn_show_tags:hover { color: #fff; background: #09d166; } .populars .btn_show_more_coll:hover { background: #06592c; } .populars-item:hover { -webkit-box-shadow: 0 10px 40px rgba(9, 209, 102, 0.2); box-shadow: 0 10px 40px rgba(9, 209, 102, 0.2); -webkit-transform: scale(1.015); transform: scale(1.015); } .populars-item:hover .populars-item__ico { -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-box-shadow: 0 4px 20px rgba(9, 209, 102, 0.4); box-shadow: 0 4px 20px rgba(9, 209, 102, 0.4); } .populars-item:hover .populars-item__ico::after { opacity: 1; -webkit-animation: spin-ring 1.2s linear infinite; animation: spin-ring 1.2s linear infinite; } /* .populars-item:hover .populars-item__headline { background-color: #09d166; } .populars-item:hover .populars-item__headline { background-color: transparent; } .populars-item:hover .populars-item__title { color: #fff; } .populars-item:hover .populars-item__ico_border { opacity: 0; } .populars-item:hover .populars-item__info_btn { filter: brightness(0) invert(1); opacity: 1; } */ .populars-tooltip__close:hover span { color: #000 !important; } .popular-list__item:hover { -webkit-box-shadow: 0 15px 30px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 15px 30px 1px rgba(0, 0, 0, 0.25); background-color: transparent; } .popular-list__item:hover::before { filter: brightness(0) invert(1); opacity: 1; } .popular-list__item:hover::after { width: 100%; height: 100%; opacity: 1; border-radius: inherit; } .popular-list .popular-list__item:hover .popular-list__box.icon-prev::after { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: rgba(255, 255, 255, 0.4); opacity: 1; animation: spin-border 1.2s linear infinite; pointer-events: none; } .popular-list .popular-list__item:hover .popular-list__box.icon-prev { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .populat-list-block .popular-list__item:hover::before { filter: none; } .popular-list__item:hover .popular-list__ico { opacity: 1; } .popular-list__item:hover .popular-list__title, .popular-list__item:hover .rating__count { color: #fff; } .popular-list__item.open:hover { z-index: 2; } .popular-list__item.open:hover .populars-tooltip { pointer-events: all; } .back-to-top:hover { background-color: #09d166; color: #fff; border-color: #fff; } .input-box__result a:hover { background-color: #ececec; } .headline__title a:hover, .products-list__subtitle a:hover { color: #09d166; } .tags__selection_wrap:hover .tags__ico { border-color: #fff; } .tags__selection_wrap:hover .icon-prev { border: 1px solid #fff; } .tags__selection_wrap:hover .tags__title { color: #fff; } .back-to-top:hover:before { filter: brightness(0) invert(1); } .options-list__item:hover .options__bottom .btn { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .options-list__item:hover .options__ico { -webkit-transform: scale(1.025); transform: scale(1.025); border-color: #fff; } .options-list__item:hover .options__ico::after { opacity: 1; -webkit-animation: spin-ring 1.2s linear infinite; animation: spin-ring 1.2s linear infinite; } .options-list__item:hover .options__ico span { color: #09d166; } .options-list__item:hover .options__title { letter-spacing: 3px; } .btn-animated-border:hover, .populars-item__bottom .btn:hover, .product-card__bottom .btn:hover { background-color: #e6f7ec; border-color: transparent; } .search-list__item:hover { background-color: #e6f7ec; box-shadow: inset 0 0 0 2px transparent; transform: scale(1.005); } .search-list__item:hover::after { opacity: 1; -webkit-animation: rotate-btn-border 2s linear infinite; animation: rotate-btn-border 2s linear infinite; } .btn-animated-border:hover::before, .populars-item__bottom .btn:hover::before, .product-card__bottom .btn:hover::before { opacity: 1; -webkit-animation: rotate-btn-border 2s linear infinite; animation: rotate-btn-border 2s linear infinite; } .btn-login:hover { background-color: transparent; border-color: #09d166; color: #09d166; } .btn-green:hover { background-color: transparent; border-color: #09d166; color: #09d166; } .btn-shaded:hover { border-color: #00d66a; color: #00d66a; background-color: transparent; } .products-tags__item:hover { background-color: #09d166; color: #fff; } .search-list:hover { box-shadow: none; } .product-card:hover { border-color: rgba(9, 209, 102, 0.65); box-shadow: 0 5px 20px rgba(9, 209, 102, 0.2); } .product-card:hover .gallery-card-slider .swiper-button-prev, .product-card:hover .gallery-card-slider .swiper-button-next, .product-card:hover .gallery-card-slider .swiper-pagination { opacity: 1; visibility: visible; } /* .search-list__item:hover { background-color: #09d166; } */ .search-list__item:hover .search-list__ico { opacity: 1; visibility: visible; } .alphabet__item:hover { /* background-color: #09d166; */ color: #fff; } .brands-slider .swiper-slide:hover, .brands-slider.secondary .gallery-brands-items .product-slider-card:hover { -webkit-box-shadow: 0 12px 8px -1px rgba(0, 0, 0, 0.25); box-shadow: 0 12px 8px -1px rgba(0, 0, 0, 0.25); } .products-top__buttons .btn:hover { border-color: #09d166; } .menu__item:hover:before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-delay: 0s; transition-delay: 0s; } .socials__link:hover { -webkit-box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); } .filter-box__btn:hover span { color: #00d66a; } .input-box__btn .btn-search:hover { background-color: #0dab57; } .tags__item:hover { border-color: #fff; color: #324038; background-color: #fff; -webkit-box-shadow: 0 10px 15px 1px rgba(7, 90, 45, 0.5); box-shadow: 0 10px 15px 1px rgba(7, 90, 45, 0.5); } .tags-list__item:hover { background-color: #f6f6f6; border-color: #f6f6f6; } .tags-list__item:hover .tags-list__img { border-color: #14e87c; } .mini-drop__bottom .btn:hover { color: #09d166; border-color: #09d166; } .populars-text__row a:hover { text-decoration: underline; } .populars__bottom .btn:hover { background-color: transparent; border-color: #fff; color: #fff; } .populars__bottom .btn_show_more:hover { color: #fff; border-color: #09d166; background-color: #09d166; } .populars__bottom_dark .btn:hover { background-color: transparent; border-color: #09f978; color: #09f978; } .product-buttons .btn:hover { border-color: #00d66a; } .product-block__sellers .product-buttons .btn-green:hover { background-color: #09d166; } .product-block__sellers .product-buttons .btn-green:hover img.second { display: block; } .product-block__sellers .product-buttons .btn-green:hover img.first { display: none; } .product-block__sellers .product-buttons .btn-green:hover .product-buttons__ico img:first-child { opacity: 0; } .product-block__sellers .product-buttons .btn-green:hover .product-buttons__ico img:last-child { opacity: 1; } .product-block__sellers .product-buttons .btn-green:hover .product-buttons__name { color: #fff; } .compare-table__close:hover { background-color: #09d166; } .compare-bage:hover { width: 177px; background-color: #09d166; color: #fff; } .compare-bage:hover .compare-bage__count { background-color: #fff; color: #09d166; } .compare-bage:hover .compare-bage .icon-compare, .compare-bage:hover .compare-bage__text { color: #fff; } .headline__clear-compare:hover { text-decoration: none; } .gallery-card-slider .swiper-button-prev:hover, .gallery-card-slider .swiper-button-next:hover { background-color: #07a852; color: #fff; } .product-card__bottom .btn:hover svg { fill: #09d166; } .breadcrumbs-list__link:hover { text-decoration: underline; } .author-block .social-link:hover img { filter: brightness(1) invert(0); } .share-drop__close:hover:before, .share-drop__close:hover:after { background-color: #0dcb5b; } .share-drop__item:hover { color: #0dcb5b; } .share-drop__btn:hover { color: #fff; background-color: #09d166; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .shop-list .item-shop .btn:hover { box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .disclaimer .link:hover { text-decoration: underline; } .editor.editor-blog .references a:hover { color: #0dcb5b; text-decoration: none; } .item-shop .list-platform .item-platform .btn:hover { background: #0dab57; border-color: #0dab57; } .app-method-btn:hover .app-method-tooltip { opacity: 1; visibility: visible; transform: translateX(0); } .share-btn:hover { background-color: #09d166; } .share-btn:hover svg { fill: #fff; } .blog-sidebar-close:hover svg { stroke: #0dcb5b; } .blog-sidebar-inputbox button:hover svg { stroke: #0dcb5b; } .blog-sidebar-sort-btn:hover { background-color: #0dcb5b; color: #fff; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .blog-sidebar-sort-btn:hover:after { border-color: #fff; } .blog-sidebar-sort-drop li:hover { color: #fff; background-color: #0dcb5b; } .blog-sidebar .share:hover svg { fill: #0dcb5b; } .blog-sidebar .item-title:hover { color: #0dcb5b; } .blog-sidebar .item-tag:hover, .compability .result .item .btn:hover { background-color: #0dcb5b; color: #fff; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .page-nav .item:hover svg { fill: #0dcb5b; stroke: #0dcb5b; } .page-nav .item:hover .item-icon { border-color: #0dcb5b; } .page-nav .item:hover .item-name { color: #0dcb5b; } .product-vitamin .btn-back .btn:hover { color: #fff; background-color: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .product-mix .item-name a:hover { color: #09d166; } .product-article .swiper-button-prev:hover:before, .product-article .swiper-button-next:hover:before, .product-mix .swiper-button-prev:hover:before, .product-mix .swiper-button-next:hover:before { filter: brightness(0); } .brands-slider.secondary .swiper-button-prev:hover, .brands-slider.secondary .swiper-button-next:hover { filter: none; background-color: #09d166; } .brands-slider.secondary .swiper-button-prev:hover:before, .brands-slider.secondary .swiper-button-next:hover:before { filter: brightness(0) invert(1); } .faq__nav-link:hover { background-color: #fff; color: #000; border-color: #0dcb5b; } .faq__question-title:hover { background: #f8f8f8; border-color: #f8f8f8; color: #0dcb5b; } .faq__question-title:hover .faq__question-btn { background-color: #a4bacd; } .product-item__title:hover, .product-item__subtitle:hover { color: #0dcb5b; } .product-item .btn:hover, .wrap .block-sources .block-list-sources .btn:hover, .all-product-supplements .btn-more:hover { color: #fff; background-color: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .all-product-supplements .btn-more:hover:after { filter: brightness(0) invert(1); } .card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .card:hover:before { opacity: 1; } .card:hover .card__period { background: rgba(255, 255, 255, 0.8); } .card:hover .card__bottom { border-color: #0dcb5b; } .card__title a:hover, a.card__body-item-name:hover { color: #0dcb5b; } .card__body-nav-link:hover { border-color: #0dcb5b; color: #000; } .card:hover .card__body-content.v-scroll:before { background: linear-gradient( to bottom, rgba(217, 245, 228, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .card:hover .card__body-content.v-scroll:after { background: linear-gradient( to top, rgba(227, 242, 233, 1) 0%, rgba(255, 255, 255, 0) 100% ); } .card__bottom-link:hover { color: #fff; border-color: #0dcb5b; background-color: #0dcb5b; } .card__bottom-link:hover svg { stroke: #fff; } .card__overlay-btn:hover, .get-premium__btn:hover { background-color: #0ca94c; } .protocol-single__tags-item:hover { background-color: #f0f6f3; } .card:hover .card__head-btn { opacity: 1; visibility: visible; } .articles__card:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); } .articles__card:hover .articles__card-title { color: #0dcb5b; } .articles__card:hover .articles__card-play, .articles__card:hover .articles__card-link { opacity: 1; } .product-item:hover { box-shadow: 0 4px 30px #c7c7c7; } .protocols-section__more .btn:hover { box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); background-color: #0dcb5b; color: #fff; } .protocols-section__more .btn:hover:after { filter: brightness(0) invert(1); } .popular-webinars__item:hover, .bestseller__item:hover { border-color: transparent; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); } .sidebar-slider .swiper-button-next:hover, .sidebar-slider .swiper-button-prev:hover { background: rgba(13, 203, 91, 0.1); } .buttons__ctrl .btn:not(.active):hover { border-color: #0dcb5b; color: #0dcb5b; } .health-topics__ctrl-clear:hover { color: #0dcb5b; } .health-topics__ctrl-btn:hover { background-color: #0ca94c; } .health-topics-box .health-topics-list .health-topics-item:hover, .health-topics-box .health-topics-list .list-item:hover, .health-topics-box .raiting-item:hover { background-color: #f0f6f3; } .sidebar-combos__item:hover { background-color: #f0f6f3; border-color: #f0f6f3; } .not-found__back:hover { color: #0dcb5b; } .not-found__back:hover span { background-color: #0dcb5b; } .not-found__back:hover span:before { filter: brightness(0) invert(1); } .select2-results__options .select2-results__option:hover { background-color: #0dcb5b !important; color: #fff !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice:hover { background-color: #0dcb5b; color: #fff; } .select2-container--default .select2-selection--multiple .select2-selection__choice:hover .select2-selection__choice__remove { color: #fff; } .section-text__nav-link:not(.active):hover { background: #f0f6f3; } a.contacts__list-link:hover { color: #0dcb5b; } .btn-premium:hover, .footer__promo-form .btn:hover, .contacts__form .btn:hover { background: #0ca94c; } .experts-slider__social a:hover svg, .social a:hover svg { fill: #0dcb5b; } .brands .search-list:hover { box-shadow: none; } .brands .search-list__item:hover { background-color: #fff; border-color: #fff; box-shadow: 0 4px 13px rgba(0, 0, 0, 0.14); } .brands .search-list__item:hover .search-list__text { color: #000; } .brands .search-list__item:hover .search-list__item-btn { color: #fff; background-color: #0dcb5b; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .brands .search-list__item:hover .search-list__item-btn:after { filter: brightness(0) invert(1); } .brands .search-list__item-elem:hover { background-color: #fff; border-color: #0dcb5b; } .brands .search-list__item-elem:hover .search-list__item-tooltip { opacity: 1; visibility: visible; } .product-head-info-link:hover { text-decoration: underline; } .product-prem-btn:hover, .card__premium-btn:hover { background-color: #0ca94c; } } @media (min-width: 1025px) and (max-width: 1740px) { .nav-articles .title-block:hover { color: #0dcb5b; } } .head-info-post { background: #f8f8f8; padding: 10px 0; } .head-info-post .flex { display: flex; align-items: center; } .head-info-post .title { margin-right: 30px; align-items: center; margin-bottom: 0; } .head-info-post .tag-info { display: flex; margin: 0 -5px; } .head-info-post .tag-info .swiper-wrapper { display: flex; } .head-info-post .tag-info .tag-btn { background: #fff; border: 2px solid #0dcb5b; border-radius: 10px; font-weight: 400; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #000; margin: 0 5px; padding: 5px 10px; display: flex; align-items: center; } @media (min-width: 1025px) { .head-info-post .tag-info .tag-btn:hover { background: #0dcb5b; color: #fff; } } .head-info-post .tag-info .tag-btn .img { border: 1px solid #fff; border-radius: 15px; width: 26px; height: 26px; margin-right: 8px; } .img { position: relative; display: block; flex-shrink: 0; z-index: 1; } .img img { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; width: 100%; max-height: 100%; height: 100%; z-index: 2 !important; } .section { padding: 30px 0; } .section.pd-0 { padding-bottom: 0; } .blog-main-info { display: flex; flex-wrap: wrap; align-items: flex-start; } .blog-main-info .content { width: calc(35% - 20px); margin-right: 20px; } .blog-main-info .img { width: 65%; border-radius: 10px; padding-bottom: 38.1%; overflow: hidden; } .blog-main-info .title { margin-bottom: 20px; text-transform: inherit; } .blog-main-info .desc { margin-top: 25px; font-weight: 400; font-size: 16px; line-height: 24px; margin-bottom: 30px; } .blog-main-info .desc * { font-weight: 400; font-size: 16px; line-height: 24px; } .label-new { display: block; margin-bottom: 7px; font-weight: 700; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; } .block-btn { display: flex; justify-content: center; } .basic-btn { background: #fff; border: 1px solid #e1e1e1; border-radius: 10px; font-weight: 400; font-size: 13px; line-height: 14px; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05em; text-transform: uppercase; color: #000; transition: 0.3s; padding: 11.5px 20px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .basic-btn.prev .icon { transform: rotate(180deg); } .basic-btn.next .icon { margin-right: 0; margin-left: 10px; } .basic-btn .icon { width: 20px; height: 20px; margin-right: 10px; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .basic-btn.pointer-none { pointer-events: none; } .basic-btn.view-all { min-width: 270px; } @media (min-width: 1025px) { .basic-btn:hover { background: #0dcb5b; border-color: #0dcb5b; color: #fff; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .basic-btn:hover .icon { filter: invert(1); } .blog-main-info .title:hover { color: #0dcb5b; } } .date { font-weight: 400; font-size: 13px; line-height: 15px; color: #767676; display: flex; align-items: center; } .date .icon { margin-right: 8px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; } .date .icon img { max-height: 15px; max-width: 15px; } .border-bottom { border-bottom: 3px solid #f8f8f8; } .article-blogs:not(.swiper) { display: flex; flex-wrap: wrap; margin: 0 -10px; } .article-blogs .item-blog { margin: 0 10px 30px; padding: 0; width: calc(25% - 20px); } .article-blogs.mod .item-blog { width: calc(33.333% - 20px); } .article-blogs.swiper .item-blog { margin: 0; } @media (min-width: 1025px) { .article-blogs.swiper .item-blog { box-shadow: none; transition: all .2s; } .article-blogs.swiper .item-blog.swiper-slide-visible { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .article-blogs.swiper .item-blog.swiper-slide-visible:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); } } .article-blogs-wrap { margin: 0 -15px; position: relative; } .article-blogs-arrow { width: 30px; height: 30px; transition: all .3s; } .article-blogs-arrow.swiper-button-next { right: -15px; } .article-blogs-arrow.swiper-button-prev { left: -15px; } .article-blogs-arrow.swiper-button-disabled { opacity: 0; } @media (max-width: 1300px) { .article-blogs-arrow { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); } .article-blogs-arrow.swiper-button-prev:before, .article-blogs-arrow.swiper-button-next:before { width: 14px; height: 14px; } .article-blogs-arrow.swiper-button-next { right: 10px; } .article-blogs-arrow.swiper-button-prev { left: 10px; } } @media (max-width: 1024px) { .article-blogs-arrow { display: none; } } .article-blogs.swiper { padding: 20px 15px; overflow: hidden; } /*@media (min-width: 1025px) {*/ /* .article-blogs .swiper-wrapper {*/ /* display: flex;*/ /* flex-wrap: wrap;*/ /* width: calc(100% + 20px);*/ /* margin-left: -10px;*/ /* }*/ /*}*/ .item-blog { background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-radius: 10px; overflow: hidden; } @media (min-width: 1025px) { .item-blog:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); } .article-blogs-arrow:hover { background-color: #F6F5F5; } } .item-blog > .img { border-radius: 10px; width: 100%; padding-bottom: 58.6%; } .item-blog .blog-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .item-blog .name { font-weight: 700; font-size: 16px; line-height: 20px; margin-bottom: 9px; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .item-blog p { font-weight: 400; font-size: 14px; line-height: 20px; color: #767676; margin-bottom: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .item-blog .inner-cont { padding: 20px; } .author { display: flex; align-items: center; font-weight: 400; font-size: 13px; line-height: 15px; } .author .img { border-radius: 100%; width: 30px; height: 30px; margin-right: 10px; overflow: hidden; } .columns-content { display: flex; } .columns-content .main-content { padding-right: 80px; flex-shrink: 1; flex-grow: 1; min-width: 1px; } .columns-content .main-content.width { padding: 0; } .columns-content .aside-content { width: 350px; flex-shrink: 0; flex-grow: 0; } .columns-content .title-aside { font-weight: 700; font-size: 16px; line-height: 19px; margin-bottom: 16px; display: block; } .protocols-list { counter-reset: section; } .item-protocols { background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border-radius: 10px; display: flex; align-items: center; padding: 10px; transition: 0.3s; position: relative; } .item-protocols:not(:last-child) { margin-bottom: 10px; } .item-protocols:before { content: counter(section); counter-increment: section; background: #fff; border-radius: 5px; width: 20px; height: 20px; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 13px; line-height: 15px; color: #000; text-transform: uppercase; position: absolute; left: 5px; top: 5px; z-index: 2; } @media (min-width: 1025px) { .item-protocols:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); } .item-protocols:hover .basic-btn { background: #0dcb5b; border-color: #0dcb5b; color: #fff; } } .item-protocols .img { width: 61px; height: 40px; margin-right: 10px; } .item-protocols .cont { margin-right: 10px; flex-grow: 1; } .item-protocols .name { font-weight: 400; font-size: 16px; line-height: 19px; margin-bottom: 4px; display: block; } .item-protocols p { font-weight: 400; font-size: 12px; line-height: 14px; color: #767676; } .block-aside { margin-bottom: 30px; } .block-aside.block-shop { position: sticky; top: 10px; } .block-aside.block-shop .title-aside { margin-bottom: 6px; } .block-aside.block-shop .shop-list-wrap { position: relative; margin: 0 -10px; } .block-aside.block-shop .shop-list { overflow: hidden; overflow-y: auto; max-height: calc(100vh - 35px); height: inherit; padding: 10px 5px 10px 10px; margin-right: 5px; } .block-aside.block-shop .shop-list::-webkit-scrollbar { width: 4px; } .block-aside.block-shop .shop-list::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .block-aside.block-shop .shop-list::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, .5); border-radius: 2px; } .block-cat .item-cat, .block-search .item-cat, .protocols-list .item-cat { width: calc(33.33% - 10px); margin: 0 5px; } .label-blog { background: #efeeef; border-radius: 3px; font-weight: 400; font-size: 12px; line-height: 14px; color: #000; padding: 4px 10px; display: inline-block; } .block-cat { display: flex; flex-wrap: wrap; margin: 0 -5px; } .block-cat .item-cat { margin-bottom: 10px; } .item-cat { background: #fff; border: 2px solid #0dcb5b; border-radius: 10px; padding: 20px 13px 13px; } @media (min-width: 1025px) { .item-cat:hover { background: #0dcb5b; } .item-cat:hover .name { color: #fff; } } .item-cat .img { background: #0dcb5b; width: 50px; height: 50px; border-radius: 100%; margin: 0 auto 12px; border: 1px solid #fff; } .item-cat .img img { max-width: 30px; max-height: 30px; } .item-cat .name { font-weight: 400; font-size: 13px; line-height: 15px; display: block; text-align: center; text-transform: uppercase; transition: 0.3s; } .mb-100 { margin-bottom: 100px; } .block-search form { position: relative; } .block-search .input { background: #f6f5f5; font-size: 13px; } .block-search input { height: 40px; padding-right: 45px; } .block-search .input-box__ico { filter: brightness(0); right: 20px; left: auto; } .editor.editor-blog { font-size: 16px; font-weight: 300; line-height: 24px; letter-spacing: 0.8px; } .editor.editor-blog h1, .editor.editor-blog h2, .editor.editor-blog h3, .editor.editor-blog h4, .editor.editor-blog h5, .editor.editor-blog h6 { font-weight: 700; font-size: 28px; line-height: 33px; display: block; color: #000; letter-spacing: normal; margin: 40px 0 20px; } .editor.editor-blog h1, .editor.editor-blog h2, .editor.editor-blog h3, .editor.editor-blog h4 { font-size: 28px; } .editor.editor-blog h5, .editor.editor-blog h6 { font-size: 26px; } .editor.editor-blog p { color: #000; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: normal; margin-bottom: 15px; } .editor.editor-blog p:last-child { margin-bottom: 0; } .editor.editor-blog b { font-size: inherit; color: #000; font-weight: 700; } .editor.editor-blog strong { font-size: inherit; color: #000; font-weight: 700; } .editor.editor-blog a { font-size: inherit; font-weight: inherit; color: #15c458; } @media (min-width: 1025px) { .editor.editor-blog a:hover { text-decoration: underline; } } .editor.editor-blog em { font-style: italic; color: inherit; } .editor.editor-blog i { font-style: italic; color: inherit; } .editor.editor-blog ol { margin-bottom: 0; counter-reset: item; } .editor.editor-blog ol li { padding-left: 30px; color: #000; font-size: 12px; font-weight: 400; line-height: 24px; counter-increment: item; position: relative; margin-bottom: 15px; letter-spacing: normal; } .editor.editor-blog ol li:after { content: counter(item); flex-shrink: 0; flex-grow: 0; width: 20px; height: 20px; background: #f8f8f8; position: absolute; left: 0; top: 2px; font-weight: 400; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #000; display: flex; align-items: center; justify-content: center; border-radius: 100%; } .editor.editor-blog ul { margin-bottom: 0; } .editor.editor-blog ul li { color: #000; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: normal; margin-bottom: 12px; position: relative; padding-left: 24px; } .editor.editor-blog ul li::after { content: ""; position: absolute; top: 4px; left: 0; background-color: transparent; width: 16px; height: 16px; background-size: cover; background-image: url(../img/icons/blog-list-dot.svg); background-repeat: no-repeat; background-position: center center; } .articles-cont { position: relative; } .nav-articles { background: #f8f8f8; border-radius: 10px; padding: 20px; } @media (max-width: 1740px) { .nav-articles { margin-bottom: 20px; } } @media (min-width: 1740px) { .nav-articles { position: absolute; left: 0; top: 0; z-index: 1; width: 200px; } } .nav-articles .title-block { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 16px; line-height: 19px; } .nav-articles .title-block .icon { display: none; } .nav-articles .list-nav-wrap { position: relative; margin: 0 -10px; } .nav-articles .list-nav-wrap:before { background: linear-gradient(to bottom, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); } .nav-articles .list-nav-wrap:after { background: linear-gradient(to top, rgba(248,248,248,1) 0%,rgba(248,248,248,0) 100%); } .nav-articles .list-nav { margin-top: 15px; overflow: hidden; overflow-y: auto; max-height: 350px; height: inherit; scrollbar-color: #9EBEAE transparent; scrollbar-width: thin; padding: 0 5px 0 10px; } .nav-articles .list-nav::-webkit-scrollbar { width: 4px; } .nav-articles .list-nav::-webkit-scrollbar-track { background-color: #fff0 !important; opacity: 0; } .nav-articles .list-nav::-webkit-scrollbar-thumb { background-color: rgba(158, 190, 174, .5); border-radius: 2px; } .nav-articles .item-nav { font-weight: 400; font-size: 12px; line-height: 16px; display: block; color: #767676; border-bottom: 2px solid transparent; padding: 5px 0 5px 20px; position: relative; } .nav-articles .item-nav a { color: #767676; } .nav-articles .item-nav:before { content: ""; display: block; border-radius: 100%; width: 3px; height: 3px; background: #767676; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); } .nav-articles .item-nav.active-nav { color: #000; border-color: #0bcb5b; } .nav-articles .item-nav.active-nav a { color: #000; } .nav-articles .item-nav.active-nav:before { background: #000; } .title-post { font-weight: 700; font-size: 36px; line-height: 48px; display: block; margin-bottom: 20px; } .row-post-info { display: flex; align-items: center; flex-wrap: wrap; margin: 0 -5px 20px; } .row-post-info .author, .row-post-info .date, .row-post-info .label-blog, .row-post-info .link-share { margin: 0 10px 5px; } .row-post-info .link-share { display: flex; align-items: center; } .row-post-info .link-share .icon { width: 14px; height: 14px; display: inline-block; margin-right: 6px; } .row-post-info .link-share .icon img { max-width: 100%; max-height: 100%; } .divider { background: #f8f8f8; width: 100%; height: 3px; margin: 30px 0 50px; } .action-article { margin: 0 -10px 50px; } .action-article .basic-btn { margin: 0 10px; } .title { font-weight: 400; font-size: 28px; line-height: 33px; text-transform: uppercase; margin-bottom: 23px; display: flex; } .title strong { font-weight: 700; } .img-post { width: 100%; padding-bottom: 58.6%; margin-bottom: 20px; } .author-block { display: flex; align-items: flex-start; background: #f8f8f8; border-radius: 10px; padding: 30px; margin-bottom: 30px; margin-top: 50px; } .author-block .img { border-radius: 100%; width: 120px; height: 120px; margin-right: 20px; flex-shrink: 0; overflow: hidden; } .author-block .name { font-weight: 700; font-size: 28px; line-height: 33px; display: block; margin-bottom: 10px; } .author-block .desc { font-weight: 400; font-size: 14px; line-height: 24px; color: #767676; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; margin-bottom: 10px; } .author-block .cont.show .desc { display: block; } .author-block .cont.show .link-more:after { transform: rotate(270deg); } .author-block .link-more { font-size: 14px; line-height: 16px; color: #0DCB5B; position: relative; display: inline-flex; align-items: center; } .author-block .link-more:after { content: ""; display: inline-flex; width: 14px; height: 14px; background-size: cover; background-image: url(../img/icons/arrow-link.svg); margin-left: 5px; transition: all 0.3s ease 0s; background-repeat: no-repeat; background-position: center center; transform: rotate(90deg); } .link-share { font-weight: 600; font-size: 13px; line-height: 15px; text-transform: uppercase; color: #0dcb5b; } .info-mess { background: #f8f8f8; border-radius: 10px; padding: 12px; margin-bottom: 20px; display: flex; align-items: center; } .info-mess .icon { margin-right: 10px; width: 16px; height: 16px; } .info-mess p { font-weight: 400; font-size: 12px; line-height: 14px; color: #767676; letter-spacing: -0.3px; } .info-mess p a { font-weight: inherit; font-size: inherit; line-height: inherit; color: #0dcb5b; } .shop-list .item-shop { padding: 20px 10px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08); border-radius: 10px; transition: 0.3s; } .shop-list .item-shop__product { display: flex; align-items: center; } @media (min-width: 1025px) { .shop-list .item-shop:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.28); } .shop-list .item-shop:hover .basic-btn { background: #0dcb5b; border-color: #0dcb5b; color: #fff; } } .shop-list .item-shop:not(.shop-list.item-shop:last-child) { margin-bottom: 10px; } .shop-list .item-shop .img { width: 110px; height: 110px; margin-right: 10px; } .shop-list .item-shop .name { font-weight: 700; font-size: 14px; line-height: 16px; display: block; margin-bottom: 10px; } .shop-list .item-shop .by { font-weight: 400; font-size: 13px; line-height: 15px; margin-bottom: 13px; display: block; } .shop-list .item-shop .btn { display: inline-flex; } .item-shop__sellers { margin-top: 13px; } .item-shop__sellers-title { background: #F6F5F5; padding: 0 10px ; font-weight: 600; font-size: 12px; line-height: 25px; letter-spacing: 0.05em; text-transform: uppercase; color: #848D95; margin-bottom: 10px; } .item-shop .list-platform .item-platform .price { font-weight: 700; } .item-shop .list-platform .item-platform { border-bottom: none; padding: 0 0 0 10px; margin: 0; } .item-shop .list-platform .item-platform:not(:last-child) { border-bottom: 1px solid #E5E5E5; padding-bottom: 10px; margin-bottom: 10px; } .item-shop .list-platform .item-platform .img { max-width: 64px; height: 100%; } .item-shop .list-platform .item-platform .price .grey-value { font-size: 12px; line-height: 14px; font-weight: 400; } .item-shop .list-platform .item-platform .btn { padding: 11px 20px 12px; background: #0DCB5B; border-color: #0DCB5B; color: #fff; box-shadow: 0 4px 9px rgba(13, 203, 91, 0.5); } .block-disclaimer.mobile { display: none; } .references.list-drop .references-more { display: inline-flex; } .references.show .references-more:after { transform: rotate(270deg); } .references.show ul li, .references.show ol li { display: block; } .references ul li, .references ol li { display: none; } .references ul li:first-child, .references ol li:first-child, .references ul li:nth-child(2), .references ol li:nth-child(2) { display: block; } .references-more { font-weight: 600 !important; font-size: 13px !important; line-height: 15px; text-transform: uppercase; color: #0DCB5B !important; position: relative; display: none; align-items: center; } .references-more:after { content: ""; display: inline-flex; width: 14px; height: 14px; background-size: cover; background-image: url(../img/icons/arrow-link.svg); filter: brightness(0); margin-left: 5px; transition: all 0.3s ease 0s; background-repeat: no-repeat; background-position: center center; transform: rotate(90deg); } .editor.editor-blog .references a { text-decoration: underline; color: #000; } .blog-main-info .img.mobile { display: none; } .editor.editor-blog img { width: auto !important; height: auto !important; } .related-articles .title strong { padding-left: 8px; } @media (max-width: 1360px) { .columns-content:not(.revers) .main-content { margin-bottom: 30px; } .columns-content .main-content { padding-right: 50px; } .article-blogs.mod .item-blog { width: calc(50% - 20px); } } @media (max-width: 1200px) { .article-blogs .item-blog { width: calc(33.333% - 20px); } } @media (max-width: 1024px) { .section.related-articles { padding-top: 0; } .head-info-post .flex { flex-wrap: wrap; } .head-info-post .title { width: 100%; margin-bottom: 10px; } .nav-articles { padding: 0; } .nav-articles .list-nav { padding: 0 20px 20px; margin-top: 0; } .nav-articles .title-block { cursor: pointer; padding: 20px; } .nav-articles .title-block.show .icon { transform: rotate(180deg); } .nav-articles .title-block .icon { display: flex; align-items: center; justify-content: center; filter: brightness(0); transition: 0.3s; } .block-search { display: none; } .article-blogs.swiper { width: 100%; margin: 0; } .article-blogs.swiper .swiper-slide { margin: 0; width: 350px; } .row-post-info { margin-bottom: 15px; } .mb-100 { margin-bottom: 70px; } .blog-main-info .content { width: 100%; border: none; margin: 0; } .blog-main-info .img { width: 100%; margin-top: 20px; padding-bottom: 58.1%; } .blog-main-info .desc { margin-top: 20px; } .blog-main-info .title { margin-bottom: 10px; } .columns-content { display: block; } .columns-content.revers { display: flex; flex-direction: column-reverse; } .columns-content .main-content { width: 100%; margin: 0; padding: 0; border: none; } .columns-content .aside-content { width: 100%; display: flex; flex-direction: column-reverse; } .columns-content .aside-content.not-revers { flex-direction: column; } .block-disclaimer.mobile { display: block; } .block-disclaimer.desktop { display: none; } .block-aside.block-shop { position: static; } .block-aside.block-shop .shop-list { max-height: inherit; } .wrapper.no-hidden { overflow: hidden; } .blog-main-info .img.mobile { display: block; } .blog-main-info .img.desktop { display: none; } } @media (max-width: 767px) { .editor.editor-blog h1, .editor.editor-blog h2, .editor.editor-blog h3, .editor.editor-blog h4, .editor.editor-blog h5, .editor.editor-blog h6 { font-size: 22px; line-height: 40px; margin: 30px 0 13px; } .editor.editor-blog p { font-size: 14px; line-height: 24px; margin-bottom: 0; } .action-article { margin-bottom: 20px; } .divider { margin: 30px 0; } .author-block { padding: 30px 10px; margin-bottom: 20px; } .author-block .img { margin-right: 10px; width: 80px; height: 80px; } .author-block .label-new { margin-bottom: 0; } .author-block .name { font-size: 22px; line-height: 40px; margin-bottom: 4px; } .author-block .desc { font-size: 14px; } .mb-100 { margin-bottom: 50px; } .article-blogs { padding-bottom: 10px; } .article-blogs .item-blog { width: calc(50% - 20px); margin-bottom: 20px; } } @media (max-width: 576px) { .action-article { margin: 0 -7.5px; } .action-article .basic-btn { margin: 0 7.5px; } .article-blogs.swiper .swiper-slide { width: 270px; } .info-mess { margin-bottom: 10px; } .info-mess p { line-height: 15px; } .row-post-info { margin-bottom: 10px; } .title-post { font-size: 28px; line-height: 40px; margin-bottom: 10px; } .blog-main-info .title { margin-bottom: 10px; } .blog-main-info .desc { font-size: 14px; } .blog-main-info .desc * { font-size: 14px; } .article-blogs .item-blog, .article-blogs.mod .item-blog { width: calc(100% - 20px); } .title { font-size: 24px; line-height: 40px; margin-bottom: 10px; } .related-articles .title strong { padding-left: 5px; } } @media (max-width: 379px) { .action-article .basic-btn { padding: 11.5px 11px; letter-spacing: 0; font-size: 12px; } } .headline--custom-mb { margin-bottom: 5px; justify-content: center; } .headline__text { font-size: 18px; font-weight: 300; color: #292b35; } .headline__text--custom-mb { margin-bottom: 30px; text-align: center; } .assistant-title { /* text-transform: uppercase; */ margin-bottom: 10px; font-size: 18px; font-weight: 500; color: #292b35; } .assistant-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 50px; } .assistant-templates li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.08); border-radius: 10px; cursor: pointer; position: relative; background: #fff; border: 1px solid #09d1664d; } @media (max-width: 767px) { .assistant-templates { gap: 8px; margin-bottom: 20px; } .assistant-templates li { gap: 5px; padding: 10px; } } .assistant-templates li:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(9, 209, 102, 0.25), 0 4px 10px rgba(0, 0, 0, 0.08); border-color: #09d166; background: linear-gradient( 135deg, rgba(9, 209, 102, 0.03) 0%, rgba(255, 255, 255, 1) 100% ); } .assistant-templates li:active { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(9, 209, 102, 0.2); } /* Chat Container */ .assistant-chat { border: 2px solid #09d166; border-radius: 18px; /* overflow: hidden; */ margin-bottom: 20px; box-shadow: 0 6px 22px rgba(9, 209, 102, 0.18), 0 2px 6px rgba(9, 209, 102, 0.1); } /* Chat Header */ .assistant-chat__header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; justify-content: center; background: #fff; border-bottom: 1px solid #09d1664d; font-size: 15px; color: #292b35; border-radius: 18px 0 0 18px; } .assistant-chat__header svg { width: 20px; height: 20px; flex-shrink: 0; color: #09d166; } .assistant-chat__header span { font-weight: 400; } .assistant-chat__header strong { font-weight: 600; color: #09d166; } /* Chat Body */ .assistant-chat__body { background: #fff; } .assistant-chat__body .assistant-messages { border: none; border-radius: 0; box-shadow: none; margin-bottom: 0; } /* Chat Footer */ .assistant-chat__footer { display: flex; align-items: center; /* gap: 12px; */ /* padding: 8px 15px 6px 15px; background: #09d166; */ border-radius: 0 0 18px 18px; border-top: 1px solid #09d1664d; } .assistant-chat__input-wrapper { flex: 1; background: #fff; border-radius: 18px; overflow: hidden; } .assistant-chat__input-wrapper textarea { width: 100%; min-height: 50px; height: 44px; padding: 12px 16px; font-size: 15px; font-weight: 300; line-height: 1.8; color: #292b35; background: transparent; border: none; outline: none; resize: none; overflow-y: hidden; font-family: inherit; } .assistant-chat__input-wrapper textarea::placeholder { color: #a0a0a0; } .assistant-chat__footer button { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; background-color: #fff; border: none; border-radius: 18px; color: #09d166; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; position: relative; overflow: hidden; flex-shrink: 0; } /* .assistant-chat__footer button:hover { background-color: #07a752; color: #fff; } */ .assistant-chat__footer button .icon-send, .assistant-chat__footer button .icon-sending { position: absolute; width: 20px; height: 20px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .assistant-chat__footer button .icon-send { transform: translate(0, 0); } .assistant-chat__footer button .icon-sending { transform: translate(-40px, 40px); } .assistant-chat__footer button:hover .icon-send { transform: translate(40px, -40px); } .assistant-chat__footer button:hover .icon-sending { transform: translate(0, 0); } @media (max-width: 767px) { .assistant-chat { border-radius: 14px; } .assistant-chat__header { padding: 14px 16px; font-size: 14px; gap: 10px; } .assistant-chat__header svg { width: 20px; height: 20px; } .assistant-chat__footer { padding: 10px 12px; gap: 10px; } .assistant-chat__input-wrapper textarea { min-height: 40px; height: 40px; padding: 10px 14px; font-size: 14px; } .assistant-chat__footer button { width: 40px; height: 40px; } .assistant-chat__footer button .icon-send, .assistant-chat__footer button .icon-sending { width: 24px; height: 24px; } } .assistant-messages { max-height: 36vw; overflow: auto; margin-bottom: 12px; padding: 30px 15px; border-radius: 18px; border: 2px solid #0dd166; box-shadow: 0 6px 22px rgba(9, 209, 102, 0.18), 0 2px 6px rgba(9, 209, 102, 0.1); } @media (max-width: 1024px) { .assistant-messages { max-height: 60vh; overflow-y: auto; position: relative; } } /* Chat message bubble */ .assistant-message { position: relative; margin-bottom: 10px; padding: 16px 20px; max-width: 90%; border: 1px solid #c8c8c8; background: #fff; border-radius: 18px 18px 18px 0; box-shadow: 0 3px 10px rgba(9, 209, 102, 0.1), 0 1px 3px rgba(9, 209, 102, 0.08); } .assistant-message .recommended-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .assistant-message--text-message { max-width: 50%; } .assistant-message--recommended-cards { max-width: 60%; } @media (max-width: 1300px) { .assistant-message--recommended-cards { max-width: 90%; } } .assistant-message .recommended-card { padding: 10px; border: 1px solid #09d166; box-shadow: 0 3px 12px rgba(9, 209, 102, 0.2), 0 1px 4px rgba(9, 209, 102, 0.12); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .assistant-message .recommended-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(9, 209, 102, 0.28), 0 3px 8px rgba(9, 209, 102, 0.15); } @media (max-width: 767px) { .assistant-message--text-message { max-width: 90%; } .assistant-message .recommended-cards { grid-template-columns: repeat(1, 1fr); } } /* Supplement Card */ .supplement-card { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(9, 209, 102, 0.15); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(9, 209, 102, 0.15); /* background: #fff; border: 1px solid #09d166; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 12px rgba(9, 209, 102, 0.15), 0 1px 4px rgba(9, 209, 102, 0.1); */ } .supplement-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* padding: 14px 18px; */ margin-bottom: 14px; /* padding-bottom: 14px; border-bottom: 1px solid rgba(9, 209, 102, 0.15); */ } .supplement-card__title { margin: 0; font-size: 16px; font-weight: 600; color: #292b35; } .supplement-card__badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 500; color: #fff; background-color: #09d166; border-radius: 6px; white-space: nowrap; } .supplement-card__content { /* padding: 14px 18px; */ /* margin-bottom: 14px; */ } .supplement-card__description { margin: 0 0 8px; font-size: 14px; font-weight: 400; line-height: 1.5; color: #5a5a5a; } /* Explanation Items */ .assistant-message__explanations { margin-top: 12px; } .explanation-item { padding: 12px 0; border-bottom: 1px solid rgba(9, 209, 102, 0.15); } .explanation-item:last-child { border-bottom: none; padding-bottom: 0; } .explanation-item:first-child { padding-top: 0; } .explanation-item__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #292b35; line-height: 1.4; } .explanation-item__text { margin: 0; font-size: 14px; font-weight: 300; color: #5a5a5a; line-height: 1.5; } .supplement-card__dosage { margin: 0; font-size: 14px; font-weight: 500; color: #292b35; } .assistant-message:last-child { margin-bottom: 0; } .assistant-message__text { margin-bottom: 14px; color: #292b35; font-size: 15px; line-height: 1.5; } .assistant-message__text:last-child { margin-bottom: 0; } .assistant-message__title { margin-bottom: 14px; font-size: 16px; font-weight: 600; color: #292b35; } /* Answer message - right side */ .assistant-message--answer { margin-left: auto; border-radius: 18px 18px 0 18px; background: #f9f9f9; border: 1px solid #c8c8c8; } /* Typing indicator animation - pure CSS */ .assistant-message--typing { max-width: 52px !important; } .assistant-message--typing .assistant-message__text::after { content: "..."; display: inline-block; animation: typingDots 1.5s steps(4, end) infinite; width: 0; overflow: hidden; vertical-align: bottom; } @keyframes typingDots { 0% { width: 0; } 33% { width: 8px; } 66% { width: 16px; } 100% { width: 24px; } } @media (max-width: 767px) { .assistant-message--typing { max-width: 40px !important; } } /* Chat message animations */ .assistant-message--animated { animation: messageSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; } .assistant-message--answer.assistant-message--animated { animation: messageSlideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes messageSlideIn { 0% { opacity: 0; transform: translateY(30px) scale(0.9); } 60% { opacity: 1; transform: translateY(-5px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes messageSlideInRight { 0% { opacity: 0; transform: translateY(30px) translateX(30px) scale(0.9); } 60% { opacity: 1; transform: translateY(-5px) translateX(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) translateX(0) scale(1); } } /* Animated content inside messages */ .assistant-message--animated .supplement-card { animation: contentFadeIn 0.4s ease-out 0.2s forwards; opacity: 0; } .assistant-message--animated .recommended-cards { animation: contentFadeIn 0.4s ease-out 0.3s forwards; opacity: 0; } .assistant-message--animated .recommended-card { animation: cardSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; } .assistant-message--animated .recommended-card:nth-child(1) { animation-delay: 0.35s; } .assistant-message--animated .recommended-card:nth-child(2) { animation-delay: 0.45s; } .assistant-message--animated .recommended-card:nth-child(3) { animation-delay: 0.55s; } @keyframes contentFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes cardSlideUp { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Typing indicator enhanced */ .assistant-message--typing.assistant-message--animated { animation: typingAppear 0.3s ease-out forwards; } @keyframes typingAppear { 0% { opacity: 0; transform: translateY(15px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Loading state for form */ .assistant-form--loading button, .assistant-chat__footer--loading button { pointer-events: none; opacity: 0.7; } .assistant-form--loading textarea, .assistant-chat__footer--loading textarea { pointer-events: none; opacity: 0.7; } /* Separator */ .assistant-separator { width: 60%; height: 1px; margin: 20px auto; background: linear-gradient( 90deg, transparent 0%, #e0e0e0 20%, #09d166 50%, #e0e0e0 80%, transparent 100% ); } /* Assistant Form */ .assistant-form { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; } /* Input wrapper with animated border */ .assistant-form__input-wrapper { flex: 1; position: relative; display: flex; align-items: center; border-radius: 14px; background: #09d166; padding: 2px; transition: all 0.3s ease; } .assistant-form__input-wrapper::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient( 90deg, #09d166, #07a752, #09d166, #07a752, #09d166 ); background-size: 200% 100%; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .assistant-form__input-wrapper:hover, .assistant-form__input-wrapper:focus-within { box-shadow: 0 6px 22px rgba(9, 209, 102, 0.18), 0 2px 6px rgba(9, 209, 102, 0.1); } .assistant-form__input-wrapper:hover::before, .assistant-form__input-wrapper:focus-within::before { opacity: 1; animation: borderGradient 10s linear infinite; } @keyframes borderGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Message Icon */ .assistant-form__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 3px; flex-shrink: 0; color: #fff; position: relative; z-index: 1; } .assistant-form__icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } /* Inner container for textarea */ .assistant-form__inner { flex: 1; display: flex; background: #fff; border-radius: 12px; overflow: hidden; position: relative; z-index: 1; } .assistant-form textarea { flex: 1; min-height: 52px; height: 52px; padding: 14px 16px; font-size: 15px; font-weight: 300; line-height: 1.5; color: #292b35; background: transparent; border: none; outline: none; resize: none; overflow-y: hidden; font-family: inherit; } .assistant-form textarea::placeholder { color: #a0a0a0; transition: all 0.2s ease; opacity: 0.8; } .assistant-form textarea:hover::placeholder { opacity: 1; } .assistant-form button { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; background-color: #09d166; border: none; border-radius: 14px; color: #fff; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 15px rgba(9, 209, 102, 0.3); position: relative; overflow: hidden; } .assistant-form button:hover { box-shadow: 0 6px 20px rgba(9, 209, 102, 0.4); background-color: #07a752; } .assistant-form button:active { box-shadow: 0 2px 10px rgba(9, 209, 102, 0.3); } /* Button icons */ .assistant-form button .icon-send, .assistant-form button .icon-sending { position: absolute; width: 22px; height: 22px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .assistant-form button .icon-send { transform: translate(0, 0); } .assistant-form button .icon-sending { transform: translate(-40px, 40px); } .assistant-form button:hover .icon-send { transform: translate(40px, -40px); } .assistant-form button:hover .icon-sending { transform: translate(0, 0); } /* Assistant Alert */ .assistant-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; background: linear-gradient( 135deg, rgba(9, 209, 102, 0.06) 0%, rgba(9, 209, 102, 0.02) 100% ); border: 1px solid rgba(9, 209, 102, 0.2); border-radius: 12px; border-left: 4px solid #09d166; box-shadow: 0 3px 12px rgba(9, 209, 102, 0.14), 0 1px 4px rgba(9, 209, 102, 0.1); } .assistant-alert::before { content: "ℹ️"; flex-shrink: 0; font-size: 16px; line-height: 1.4; } .assistant-alert__text { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.3; color: #5a5a5a; } /* ===== Mobile Responsive ===== */ @media (max-width: 767px) { /* Headlines */ .headline__text { font-size: 15px; } .headline__text--custom-mb { margin-bottom: 20px; } .assistant-title { font-size: 14px; margin-bottom: 8px; } /* Messages container */ .assistant-messages { padding: 14px 12px; border-radius: 14px; border: 1px solid #0dd166; } /* Chat messages */ .assistant-message { padding: 12px 14px; border-radius: 14px 14px 14px 0; max-width: 90%; } .assistant-message--answer { border-radius: 14px 14px 0 14px; } .assistant-message__text { font-size: 14px; line-height: 1.45; } /* Separator */ .assistant-separator { width: 80%; margin: 16px auto; } /* Form */ .assistant-form { gap: 8px; margin-bottom: 16px; } .assistant-form__input-wrapper { border-radius: 12px; } .assistant-form__inner { border-radius: 10px; } .assistant-form__icon { width: 32px; height: 32px; margin-right: 6px; } .assistant-form__icon svg { width: 18px; height: 18px; } .assistant-form textarea { min-height: 44px; height: 44px; padding: 10px 12px; font-size: 14px; } .assistant-form textarea::placeholder { font-size: 13px; } .assistant-form button { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; } .assistant-form button svg { width: 18px; height: 18px; } /* Alert */ .assistant-alert { gap: 8px; padding: 12px; border-radius: 10px; border-left-width: 3px; } .assistant-alert::before { font-size: 14px; } } /* Extra small devices */ @media (max-width: 480px) { .assistant-templates li { padding: 8px; font-size: 13px; border-radius: 8px; } .assistant-message { padding: 10px 12px; } .assistant-message__text { font-size: 13px; } .assistant-form__icon { width: 28px; height: 28px; margin-left: 4px; } .assistant-form__icon svg { width: 18px; height: 18px; } .assistant-form textarea { min-height: 40px; height: 40px; padding: 8px 10px; font-size: 13px; } .assistant-form button { width: 44px; height: 44px; } .assistant-form button svg { width: 16px; height: 16px; } } @media (max-width: 360px) { .assistant-form__icon { display: none; } .assistant-form textarea { min-height: 48px; height: 48px; padding: 12px; } .assistant-form { align-items: center; } }