/*==== Grid ===*/ /*==== Colors ===*/ /*==== Typestyles ====*/ /*==== Spacing ====*/ /*==== Transitions ====*/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style-position: inside; } ul { list-style-type: disc; list-style-position: inside; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input { padding: 0; outline: none; } img { display: block; } /*==== Grid ===*/ /*==== Colors ===*/ /*==== Typestyles ====*/ /*==== Spacing ====*/ /*==== Transitions ====*/ /* -------------------------------------- RESPONSIVE -------------------------------------- */ /** * USAGE EXAMPLE: * * .main { * @include respond-to(xs) {} * @include respond-to(sm) {} * @include respond-to(md) {} * @include respond-to(lg) {} * } */ /*==== Grid ===*/ /*==== Colors ===*/ /*==== Transitions ====*/ html { font-size: 10px; } @media screen and (min-width: 768px) { html { font-size: 1.303vw !important; } } @media screen and (min-width: 1024px) { html { font-size: 0.695vw !important; } } body { font-size: 1.6rem !important; } a { color: inherit; } h1, h2, h3, h4, h5, h6 { font-family: "Neue Haas Grotesk Display Pro", sans-serif; } h1, .h1 { font-size: 4rem; line-height: 1.3; } @media screen and (min-width: 1024px) { h1, .h1 { font-size: 6rem; line-height: 1.13; letter-spacing: 0.02em; } } h2, .h2 { font-size: 4rem; line-height: 1.3; } h3, .h3 { font-size: 2.4rem; line-height: 1.25; letter-spacing: 0.02em; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: touch; font-family: "TheSansPlain"; height: 100%; width: 100%; font-family: "Neue Haas Grotesk Display Pro", sans-serif; color: #040474; scroll-behavior: smooth; } img { width: 100%; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } .slideout-panel-right main { margin-top: 0; } main { margin-top: 8rem; } @media screen and (min-width: 1024px) { main { margin-top: 7rem; } } main.removed-bar { margin-top: 5.5rem; } @media screen and (min-width: 1024px) { main.removed-bar { margin-top: 7rem; } } button { cursor: pointer; } .shopify-challenge__container { margin-top: 20rem !important; margin-bottom: 10rem !important; } .container { padding: 0 2rem; margin: 0 auto; width: unset; max-width: 100%; } @media screen and (min-width: 1024px) { .container { padding: 0 12rem; } } .hidden { display: none; } .no-scroll { overflow: hidden; } .b-sustainability-benefits { padding: 8rem 0 6rem 0; } @media screen and (min-width: 768px) { .b-sustainability-benefits { padding: 8rem 0 10rem 0; } } .b-sustainability-benefits .centered-text { margin-bottom: 6rem; } @media screen and (min-width: 768px) { .b-sustainability-benefits .centered-text { margin-bottom: 7rem; } } .b-sustainability-benefits .centered-text__content { max-width: 87.8rem !important; } .b-sustainability-benefits__card-wrapper { display: grid; grid-gap: 2rem; } @media screen and (min-width: 1024px) { .b-sustainability-benefits__card-wrapper { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-gap: 4rem; } } .b-sustainability-goals { padding: 6rem 2rem 6rem 2rem; background-color: #F2F7FD; } @media screen and (min-width: 1024px) { .b-sustainability-goals { padding: 9rem 0; } } .b-sustainability-goals__card-wrapper { display: grid; grid-gap: 4rem; gap: 4rem; } @media screen and (min-width: 1024px) { .b-sustainability-goals__card-wrapper { grid-template-columns: repeat(3, 1fr); } } .b-sustainability-goals .centered-text { margin-bottom: 5rem; } @media screen and (min-width: 1024px) { .b-sustainability-goals .centered-text { margin-bottom: 7rem; } } @media screen and (min-width: 1024px) { .b-sustainability-goals .centered-text__content { max-width: 87.8rem !important; } } .b-sustainability-goals .container { padding: 0; } @media screen and (min-width: 768px) { .b-sustainability-goals .container { padding: 0 12rem; } } .b-subscription-products__body { display: -webkit-box; display: -ms-flexbox; display: flex; } .b-subscription-products__content { padding: 6rem 0 8rem; } @media screen and (min-width: 1024px) { .b-subscription-products__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 7rem 10% 4rem 0; } } .b-subscription-products__title { margin-bottom: 4rem; text-align: center; } @media screen and (min-width: 1024px) { .b-subscription-products__title { text-align: left; } } .b-subscription-products__media { display: none; width: 72rem; margin-right: -12rem; } @media screen and (min-width: 1024px) { .b-subscription-products__media { display: block; } } .b-subscription-products__media img { display: none; height: 100%; -o-object-fit: cover; object-fit: cover; } .b-subscription-products__media img.active { display: block; } .b-subscription-products__select { margin-bottom: 3.5rem; } .b-subscription-products__select label { display: block; margin-bottom: 1.2rem; } .b-subscription-products__select select { width: 100%; height: 5.2rem; -moz-appearance: none; -webkit-appearance: none; appearance: none; outline: none; border-radius: 5px; border: 1px solid #040474; color: #040474; background-color: transparent; cursor: pointer; padding: 0 2.2rem; font-size: 1.6rem; letter-spacing: 0.05em; background-repeat: no-repeat; background-size: 1.25rem; background-position: 95% center; } .b-subscription-products-frequency { display: none; } .b-subscription-products-frequency.active { display: block; } .b-subscription-products-frequency__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 2.2rem; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency__item { margin-bottom: 1.2rem; } } .b-subscription-products-frequency__label { font-size: 1.4rem; line-height: 2.2rem; text-align: center; padding: 0 1rem; width: 100%; letter-spacing: 0.05em; color: #FFFFFF; background-color: #A1A9FC; border-radius: 5px 5px 0 0; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency__label { width: auto; margin-left: auto; } } .b-subscription-products-frequency__title { margin-bottom: 1.2rem; } .b-subscription-products-frequency .c-radio-custom { overflow: hidden; } .b-subscription-products-frequency .c-radio-custom.active { background-color: #FEF8F5; } .b-subscription-products-frequency .c-radio-custom.active .c-radio-custom-list { display: block; } .b-subscription-products-frequency .c-radio-custom.active .c-radio-custom__trigger { border: 1px solid #FEF8F5; cursor: default; } .b-subscription-products-frequency .c-radio-custom.active .b-subscription-products-frequency__discount { background-color: #040474; color: #FEF8F5; } .b-subscription-products-frequency .c-radio-custom-list { display: none; position: relative; max-width: none; margin-top: 1.5rem; padding: 0 2rem 0 2.5rem; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency .c-radio-custom-list { margin-top: 0; } } .b-subscription-products-frequency .c-radio-custom-list svg { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .b-subscription-products-frequency .c-radio-custom__trigger { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; padding: 1.8rem 2rem; border: 1px solid #D6D9FC; border-radius: .5rem; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency .c-radio-custom__trigger { -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2.5rem 3rem; } } .b-subscription-products-frequency .c-radio-custom__text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: 1.2rem; margin-top: -.6rem; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency .c-radio-custom__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 0; } } .b-subscription-products-frequency__price { text-align: left; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency__price { font-size: 2rem; line-height: 3.6rem; text-align: right; } } .b-subscription-products-frequency__discount { 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; font-size: 1.2rem; line-height: 1.4rem; color: #040474; border: 1px solid #040474; margin-left: auto; border-radius: 5.5rem; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); height: 2rem; min-width: 8.8rem; padding: 0 .5rem; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency__discount { font-size: 1.4rem; line-height: 2.2rem; } } .b-subscription-products-frequency .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 1024px) { .b-subscription-products-frequency .button { margin: 0; } } .b-subscription-products .b-subscription-products-frequency__label + .c-radio-custom .c-radio-custom__trigger { border-top-left-radius: 0; border-top-right-radius: 0; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .button { min-height: 4.9rem; min-width: 19.9rem; border-radius: 7.5rem; padding: 1.5rem 2.5rem; font-size: 1.5rem; line-height: 1.9rem; font-weight: 600; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; text-align: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin: 0 auto; } .button--primary { color: white; background-color: #7D20F3; border: 1px solid #7D20F3; } .button--primary:hover { background-color: #040474; border: 1px solid #040474; } .button--cart { background-color: #A1A9FC; border: 1px solid #A1A9FC; color: #FEF8F5; text-transform: none; font-size: 1.4rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif; min-height: 2.8rem; min-width: 8.9rem; height: 2.9rem; width: 8.9rem; padding: 0; } .button--outline { border: 2px solid #A1A9FC; color: #A1A9FC; background-color: transparent; } .button--outline:hover { border-color: #040474; color: #040474; } .button--outline:active { border-color: #7D20F3; color: #7D20F3; } .shopify-challenge__button { min-height: 4.9rem; min-width: 19.9rem; border-radius: 7.5rem; padding: 1.5rem 4rem; font-size: 1.6rem; line-height: 1.9rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; color: white; background-color: #7D20F3; border: 1px solid #7D20F3; margin-top: 3rem !important; } .shopify-challenge__button:hover { background-color: #040474; border: 1px solid #040474; } @media screen and (min-width: 768px) { .shopify-challenge__button { padding: 1.5rem 5rem; } } .product-card { position: relative; height: 100%; text-align: center; border-radius: 0.5rem; overflow: hidden; } @media screen and (min-width: 1024px) { .product-card:hover .product-card__blur-wrapper { -webkit-filter: blur(3px); filter: blur(3px); } .product-card:hover .product-card__hover { opacity: 1; z-index: 3; } } .product-card--hovered .product-card__blur-wrapper { -webkit-filter: blur(3px); filter: blur(3px); } .product-card--hovered .product-card__hover { opacity: 1; z-index: 3; } .product-card__bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .product-card__bg-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .product-card__blur-wrapper { height: 100%; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .product-card__content { height: 100%; position: relative; z-index: 2; 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: end; -ms-flex-pack: end; justify-content: flex-end; padding-bottom: 1.7rem; } @media screen and (min-width: 1024px) { .product-card__content { padding-bottom: 2rem; } } .product-card__title { margin-bottom: 1rem; } .product-card__price { font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; } .product-card__hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; color: white; background-color: rgba(31, 9, 49, 0.8); padding: 4.7rem 1rem 4rem; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; text-decoration: none; } @media screen and (min-width: 1024px) { .product-card__hover { padding-top: 9.4rem; } } .product-card__hover-title { font-size: 2.4rem; line-height: 1.25; font-family: "Neue Haas Grotesk Display Pro", sans-serif; margin-bottom: 2.5rem; letter-spacing: 0.02em; } .product-card__hover-content { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; margin-bottom: 3.3rem; padding: 0 0.8rem; } .product-card__link { display: block; margin-top: 1.5rem; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.05em; text-decoration: underline; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; color: #D6D9FC; } .product-card__link:hover { color: #A1A9FC; } .thread { -webkit-transform: translateX(-100rem); -ms-transform: translateX(-100rem); transform: translateX(-100rem); } @media screen and (min-width: 768px) { .thread { -webkit-transform: translateX(-65rem); -ms-transform: translateX(-65rem); transform: translateX(-65rem); } } @media screen and (min-width: 1024px) { .thread { -webkit-transform: translateX(0rem); -ms-transform: translateX(0rem); transform: translateX(0rem); padding-top: 2.3rem; padding-bottom: 3.5rem; } } .thread--reverse { -webkit-transform: translateX(100.6rem) rotateZ(180deg); -ms-transform: translateX(100.6rem) rotate(180deg); transform: translateX(100.6rem) rotateZ(180deg); } @media screen and (min-width: 768px) { .thread--reverse { -webkit-transform: translateX(65rem) rotateZ(180deg); -ms-transform: translateX(65rem) rotate(180deg); transform: translateX(65rem) rotateZ(180deg); } } @media screen and (min-width: 1024px) { .thread--reverse { -webkit-transform: translateX(22.5rem) rotateZ(180deg); -ms-transform: translateX(22.5rem) rotate(180deg); transform: translateX(22.5rem) rotateZ(180deg); padding-top: 2.3rem; padding-bottom: 3.5rem; } } .centered-text { text-align: center; } .centered-text--clean { margin-top: 1.7rem; } .centered-text__title { margin-bottom: 1.4rem; } @media screen and (min-width: 1024px) { .centered-text__title { text-transform: none; margin-bottom: 0.4rem; } } .centered-text__content { font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; max-width: 73.5rem; margin: 0 auto; } .product-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; padding: 0 1rem; } @media screen and (min-width: 1024px) { .product-item:hover .product-item__picture--hover { opacity: 1; z-index: 1; } } .product-item--small { text-align: center; } .product-item--small .product-item__title { font-size: 1.6rem; margin-bottom: .7rem; margin-top: 1rem; } @media screen and (min-width: 1024px) { .product-item--small .product-item__title { font-size: 2.2rem; margin-top: 2.5rem; margin-bottom: 1.5rem; } } .product-item--small .product-item__picture { width: 11.6rem; height: auto; } @media screen and (min-width: 1024px) { .product-item--small .product-item__picture { width: 26rem; height: 100%; } } .product-item--small .product-item__price-wrapper { 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; } .product-item--small .product-item__price-wrapper > *, .product-item--small .product-item__price-wrapper .product-item__small-price, .product-item--small .product-item__price-wrapper .product-item__big-price { margin: 0; } .product-item--small .product-item__price-wrapper > .product-item__big-price { margin-left: 1rem; } .product-item--small .product-item__big-price { font-size: 1.4rem; display: inline-block; margin-bottom: 0.7rem; } @media screen and (min-width: 1024px) { .product-item--small .product-item__big-price { font-size: 2rem; } } .product-item--small .product-item__small-price { display: inline-block; font-size: 1.2rem; color: #FD7923; text-decoration: line-through; margin-right: 0.3rem; margin-bottom: 1.3rem; } @media screen and (min-width: 1024px) { .product-item--small .product-item__small-price { font-size: 1.6rem; margin-bottom: 2rem; } } .product-item--small .button { margin-top: auto; } @media only screen and (max-width: 1023px) { .product-item--small .button { padding: .5rem 2.7rem; font-size: 1.2rem; min-width: auto; min-height: auto; } } .product-item__picture { width: 19rem; height: 19rem; display: block; margin: 0 auto; } @media screen and (min-width: 768px) { .product-item__picture { width: 29rem; height: 29rem; } } .product-item__picture--small { width: 9.5rem; height: 9.5rem; } .product-item__picture--hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } @media screen and (min-width: 1024px) { .product-item__picture--hover { padding: 2rem; } } .product-item__picture-wrapper { position: relative; display: block; } .product-item__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } .product-item__title { text-decoration: none; margin-top: 0.7rem; display: block; font-family: "Neue Haas Grotesk Display Pro", sans-serif; } @media screen and (min-width: 1024px) { .product-item__title { margin-top: -.3rem; } } .product-item__big-price { display: block; font-weight: 500; font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; } @media screen and (min-width: 768px) { .product-item__big-price { margin-top: 1rem; } } .product-item__small-price { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; color: #A1A9FC; display: block; margin-bottom: 2.3rem; } .product-item__quick-add { font-size: 1.6rem; line-height: 1.9rem; letter-spacing: 0.05em; display: block; margin: 1.75rem auto 0; text-transform: uppercase; border: none; color: #7D20F3; background-color: transparent; font-weight: 300; font-family: "Neue Haas Grotesk Display Pro", sans-serif; } @media screen and (min-width: 1024px) { .product-item__quick-add { margin-top: 1.2rem; } } .product-item__quick-add--small { font-size: 1.2rem; margin-top: 1.25rem; } .icon-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; } @media screen and (min-width: 768px) { .icon-header { padding-bottom: 1.5rem; } } .icon-header__icon { width: 5.4rem; height: 9.8rem; } .icon-header__line { position: absolute; height: 5.8rem; width: 62.8rem; top: 4.8rem; } .icon-header__line--left { right: 25.4rem; } @media screen and (min-width: 768px) { .icon-header__line--left { right: 44rem; } } @media screen and (min-width: 1024px) { .icon-header__line--left { right: 81rem; } } .icon-header__line--right { left: 25.4rem; } @media screen and (min-width: 768px) { .icon-header__line--right { left: 44rem; } } @media screen and (min-width: 1024px) { .icon-header__line--right { left: 81rem; } } .review-card { background-color: white; padding: 2.7rem 2.5rem; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 1024px) { .review-card { padding: 2.2rem 3.5rem; } } .review-card__title { margin-top: 2rem; } .review-card__copy { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; font-weight: 500; margin-top: 1.35rem; } .review-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .review-card__stars { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.2rem; grid-gap: 0.2rem; gap: 0.2rem; } .review-card__name { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; font-weight: 500; margin-top: 1rem; } .review-card__image { width: 9.3rem; height: 9.3rem; -o-object-fit: cover; object-fit: cover; background-color: #FEF8F5; border-radius: 50%; padding: 0.5rem; margin-right: -1.5rem; -o-object-position: center; object-position: center; } @media screen and (min-width: 1024px) { .review-card__image { margin-right: -1.4rem; } } .review-card__quotes { width: 3.2rem; height: 2.5rem; -o-object-fit: contain; object-fit: contain; } .review-card__star { width: 2rem; height: 2rem; -o-object-fit: contain; object-fit: contain; } /* The container must be positioned relative: */ .custom-select { position: relative; border-radius: 0.5rem; } .custom-select select { display: none; /*hide original SELECT element: */ } .select-selected { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; padding: 1.2rem 1.6rem; border: 1px solid #040474 !important; border-radius: 0.5rem; } /* Style the arrow inside the select element: */ .select-selected:after { position: absolute; content: ""; top: 1.6rem; right: 1.6rem; width: .7rem; height: .7rem; border: 2px solid #040474; border-left: none; border-top: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } @media screen and (min-width: 1024px) { .select-selected:after { width: .9rem; height: .9rem; right: 2rem; } } /* Point the arrow upwards when the select box is open (active): */ .select-selected.select-arrow-active:after { top: 2rem; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .select-arrow-active { background-color: #FEF8F5; border-radius: 0.5rem; border: 2px solid #A1A9FC !important; } /* style the items (options), including the selected item: */ .select-items div, .select-selected { padding: .8rem 1.6rem; border: 1px solid transparent; cursor: pointer; } @media screen and (min-width: 1024px) { .select-items div, .select-selected { padding: 1.2rem 1.6rem; } } /* Style items (options): */ .select-items { position: absolute; background-color: #FEF8F5; top: 95%; left: 0; right: 0; z-index: 99; border: 2px solid #A1A9FC; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } /* Hide the items when the select box is closed: */ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); } .subs-opt { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; border: 1px solid #D6D9FC; border-radius: 0.5rem; } .subs-opt.gift-opt { border: none; grid-gap: 3rem; gap: 3rem; margin-top: 3.7rem; } @media screen and (min-width: 1024px) { .subs-opt.gift-opt { margin-top: 0rem; } } @media screen and (min-width: 1024px) { .subs-opt { border: 2px solid #D6D9FC; } } .subs-opt__list-item { -webkit-box-flex: 0; -ms-flex: 1 0 30%; flex: 1 0 30%; min-height: 5rem; text-align: center; position: relative; } .subs-opt__list-item.gift-item { -webkit-box-flex: 0; -ms-flex: 0 0 28%; flex: 0 0 28%; border: 2px solid #D6D9FC; border-radius: 5px; width: 9.1rem; max-width: 9.1rem; } @media screen and (min-width: 1024px) { .subs-opt__list-item { height: auto; } } .subs-opt__label { 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%; grid-gap: 0.3rem; gap: 0.3rem; padding: 1rem 0.5rem; font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.05em; cursor: pointer; } @media screen and (min-width: 1024px) { .subs-opt__label { padding: 0.8rem; } } @media screen and (min-width: 1024px) { .subs-opt__label--has-discount { padding-top: 1rem; } } .subs-opt__info { width: 1.2rem; height: 1.2rem; -o-object-fit: contain; object-fit: contain; cursor: pointer; } .subs-opt__save { position: absolute; top: -1rem; border-radius: 2rem; padding: 0 1rem; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #040474; color: #FEF8F5; font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.05em; height: 2rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .subs-opt__save.hidden { display: none; } .subs-opt input { display: none; } .subs-opt input:disabled + label { opacity: 0.5; cursor: not-allowed; } .subs-opt input:checked + label { background-color: #D6D9FC; font-weight: 600; } .graph__products { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2rem; } @media screen and (min-width: 1024px) { .graph__products { padding: 0 6rem; margin-bottom: 4.5rem; } } .graph__button { background-color: transparent; border: none; padding: 0; text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; 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; margin-right: 0.5rem; } .graph__button--active .graph__img { opacity: 1; } .graph__button--active .graph__title::after { -webkit-animation: pulsing 2s ease-out 0s infinite; animation: pulsing 2s ease-out 0s infinite; } .graph__img { opacity: 0.5; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; width: 9rem; height: 9rem; -o-object-fit: contain; object-fit: contain; margin-bottom: 1rem; } @media screen and (min-width: 1024px) { .graph__img { width: 11rem; height: 11rem; margin-bottom: 1.5rem; } } .graph__title { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; position: relative; padding-left: 2.5rem; } .graph__title::before, .graph__title::after { content: ''; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: block; position: absolute; top: calc(50% - .7rem); left: 0; z-index: 2; } .graph__title::after { z-index: 1; } .graph__title--orange:before, .graph__title--orange::after { background-color: rgba(253, 121, 35, 0.3); } .graph__title--violet:before, .graph__title--violet::after { background-color: #A1A9FC; } .graph__list { list-style: none; display: none; } .graph__list--orange .graph__value--violet { opacity: 0.3; } .graph__list.violet-active .graph__value--orange { opacity: 0.3; } .graph__list--active { display: block; } .graph__list--active .graph__value::before { width: 100%; } .graph__list-item { margin-bottom: 2rem; } @media screen and (min-width: 1024px) { .graph__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0.7rem; margin-bottom: 2.4rem; } } .graph__list-title { margin-bottom: 1rem; font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .graph__list-title { -webkit-box-flex: 0; -ms-flex: 0 0 16rem; flex: 0 0 16rem; padding-right: 2rem; margin-bottom: 0; } } @media screen and (min-width: 1024px) { .graph__list-values { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .graph__value { height: 0.5rem; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; position: relative; } .graph__value::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; -webkit-animation: grow .5s ease-out 1 forwards; animation: grow .5s ease-out 1 forwards; } .graph__value--violet { margin-bottom: 0.5rem; } .graph__value--violet::before { background-color: #A1A9FC; } .graph__value--orange::before { background-color: #fd7923; } @-webkit-keyframes pulsing { from { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes pulsing { from { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } to { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-webkit-keyframes grow { from { width: 0; } to { width: 100%; } } @keyframes grow { from { width: 0; } to { width: 100%; } } .faq-side { position: -webkit-sticky; position: sticky; top: 2rem; width: 100%; background-color: #A1A9FC; color: #FEF8F5; font-family: "Neue Haas Grotesk Display Pro", sans-serif; border-radius: 0.5rem; font-size: 2.4rem; line-height: 1.25; z-index: 10; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } @media screen and (min-width: 1024px) { .faq-side { -webkit-box-flex: 0; -ms-flex: 0 0 28rem; flex: 0 0 28rem; margin-top: 7rem; letter-spacing: 0.02em; } } .faq-side.with-header { top: 4.1rem; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } @media screen and (min-width: 1024px) { .faq-side.with-header { top: 7rem; } } .faq-side__list { list-style: none; position: absolute; top: calc(100% - 0.7rem); left: 0; width: 100%; z-index: 10; background-color: inherit; border-radius: 0.5rem; line-height: 1.5; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; max-height: 0; overflow: hidden; padding: 0 2rem; } .faq-side__list--open { max-height: 20rem; padding: 1rem 2rem; } @media screen and (min-width: 1024px) { .faq-side__list { position: static; max-height: -webkit-max-content; max-height: -moz-max-content; max-height: max-content; padding: 2rem 3rem; } .faq-side__list > * + * { margin-top: 1.5rem; } } .faq-side__button { background-color: transparent; padding: 0; border: none; color: inherit; text-decoration: none; opacity: 0.5; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .faq-side__button:hover { opacity: 0.8; } .faq-side__button--active { opacity: 1; padding-left: 1rem; } .faq-side__button--category { padding: 1.2rem 2.8rem; position: relative; width: 100%; text-align: left; opacity: 1; } @media screen and (min-width: 1024px) { .faq-side__button--category { display: none; } } .faq-side__button--category::before { content: ''; display: block; position: absolute; border: solid #FEF8F5; border-width: 0 0.25rem 0.25rem 0; display: inline-block; padding: 0.4rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 39%; right: 3.5rem; } .quick-add { background-color: #FEF8F5; position: absolute; width: 100%; bottom: 0; padding: 0 3.5rem; width: 28.9rem; left: calc(50% - 28.9rem/2); max-height: 0; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; overflow: hidden; } .quick-add--open { max-height: 37rem; padding-top: 2rem; padding-bottom: 3.2rem; z-index: 303; } .quick-add__content { display: none; } .quick-add__content--show { display: block; } .quick-add__close { position: absolute; top: 2.1rem; right: 1.7rem; cursor: pointer; background-color: transparent; border: none; width: 2.3rem; height: 2.3rem; } .quick-add__close img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .quick-add__title { margin-bottom: 2rem; line-height: 1.5; } .quick-add__radio-wrapper { 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; position: relative; min-height: 2rem; } .quick-add__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 1rem; gap: 1rem; } .quick-add__radio input:checked + .quick-add__custom-radio::after { left: calc(100% - 2rem + 0.2rem); } .quick-add__radio input:checked + .quick-add__custom-radio::before { left: calc(100% - 1.2rem - 0.2rem); } .quick-add__radio input:checked ~ label { font-weight: bold; } .quick-add__radio input { display: none; } .quick-add__radio label { cursor: pointer; } .quick-add__custom-radio { border: 0.2rem solid #040474; width: 4rem; height: 2rem; display: inline-block; border-radius: 5rem; position: absolute; top: 0; left: calc(50% - 2rem); } .quick-add__custom-radio::before, .quick-add__custom-radio::after { content: ''; position: absolute; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .quick-add__custom-radio::after { top: -0.2rem; left: -0.2rem; width: 2rem; height: 2rem; border: 0.2rem solid #040474; } .quick-add__custom-radio::before { top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; background-color: #040474; } .quick-add__list { list-style: none; margin-top: 2.46rem; text-align: left; padding-left: 2rem; } .quick-add__list > * + * { margin-top: 1.5rem; } .quick-add__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .quick-add__list-item > * + * { margin-left: 1rem; } .quick-add__icon { height: 1rem; width: auto; } .quick-add__icon--x { display: none; } .quick-add__icon--check { display: block; } .quick-add__price { font-size: 2rem; font-weight: bold; margin-top: 2.8rem; margin-bottom: 2.4rem; } .quick-add__overlay { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: none; z-index: 300; } .quick-add__overlay--open { display: block; } .freq { margin-top: 2rem; } .freq__row { background-color: #D6D9FC; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #FEF8F5; } .freq__row--header { font-weight: bold; } .freq__row--header .freq__cell { font-size: 1.6rem !important; } .freq__row--footer { border-bottom: none; background-color: #A1A9FC; } .freq__cell { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; text-align: center; 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: 1rem; } .header { background-color: #FEF8F5; border-bottom: none !important; position: absolute; width: 100%; top: 0; left: 0; z-index: 1049; } .header--open { position: relative; background-color: #D6D9FC; } .header--open .header__hamburger::before { -webkit-transform: rotate(45deg) translate(0.3rem, 0.4rem); -ms-transform: rotate(45deg) translate(0.3rem, 0.4rem); transform: rotate(45deg) translate(0.3rem, 0.4rem); } .header--open .header__hamburger::after { -webkit-transform: rotate(-45deg) translate(0.3rem, -0.4rem); -ms-transform: rotate(-45deg) translate(0.3rem, -0.4rem); transform: rotate(-45deg) translate(0.3rem, -0.4rem); } .header--open .header__nav-wrapper { height: 100vh !important; z-index: 10; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: auto; } .header--has-promo .promo-bar { display: block; } .header--has-promo .header__nav-wrapper { top: 8rem; height: calc(100vh - 8rem); } @media screen and (min-width: 1024px) { .header--has-promo .header__nav-wrapper { height: auto; } } .promo-bar__close-bar { display: none; } .promo-bar-content { display: flex; justify-content: space-between; } .promo-bar-content p { width: auto; } .promo-bar-desktop .trustpilot-widget { width: 21%; margin: auto; margin-left: 0; margin-right: 0; } .promo-bar-mobile .trustpilot-widget { margin: 2.5px 0px; } @-webkit-keyframes sticky { from { top: -100%; } to { top: 0; } } @keyframes sticky { from { top: -100%; } to { top: 0; } } .header--sticky { position: fixed; -webkit-animation: sticky 0.3s forwards; animation: sticky 0.3s forwards; } .header--sticky .promo-bar { display: none; } @media screen and (min-width: 1024px) { .header--sticky .header__logo-icon { width: 9.5rem; } } .header--sticky .header__container { min-height: 5rem; } @media screen and (min-width: 1024px) { .header--sticky .header__container { min-height: 5rem; } } .header--sticky .header__nav-wrapper { top: 7rem; height: calc(100vh - 4rem); } @media screen and (min-width: 1024px) { .header--sticky .header__nav-wrapper { height: auto; } } .header__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 5.5rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 1024px) { .header__container { min-height: 7rem; padding-top: 0.5rem; } } .header__hamburger { border: none; padding: 0; background-color: transparent; position: relative; width: 2.6rem; height: 1.2rem; margin-top: -0.2rem; } .header__hamburger::before, .header__hamburger::after { content: ''; height: 0.2rem; width: 100%; background-color: #040474; display: block; border-radius: 15rem; position: absolute; left: 0; } .header__hamburger::before { top: 0; } .header__hamburger::after { bottom: 0; } @media screen and (min-width: 1024px) { .header__hamburger { display: none; } } .header__logo { margin: 0 auto; -webkit-transform: translateX(2.21rem); -ms-transform: translateX(2.21rem); transform: translateX(2.21rem); } @media screen and (min-width: 1024px) { .header__logo { -webkit-transform: none; -ms-transform: none; transform: none; } } .header__logo-icon { width: 8.5rem; height: 2.41rem; } @media screen and (min-width: 1024px) { .header__logo-icon { width: 12.7rem; height: 3.7rem; } } .header__account-wrapper { margin-right: 2.35rem; margin-bottom: 0.1rem; padding-bottom: 0.5rem; margin-top: 0.5rem; position: relative; z-index: 101; } @media screen and (min-width: 1024px) { .header__account-wrapper { margin-right: 2.7rem; margin-bottom: 0.5rem; } } .header__account-wrapper:hover .header__acc-dropdown { display:block; z-index: 1; } .header__account-wrapper:hover svg circle, .header__account-wrapper:hover svg path { stroke: #7D20F3; } .header__acc-dropdown { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding-top: 1rem; display:none; z-index: -1; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .header__acc-dropdown--active { display: block; z-index: 1019; opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-transform: none; -ms-transform: none; transform: none; } @media screen and (min-width: 1024px) { .header__acc-dropdown--active { width: auto; height: auto; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } .header__acc-dropdown--active .header__acc-list { border-radius: 0; 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; grid-gap: 4rem; gap: 4rem; } @media screen and (min-width: 1024px) { .header__acc-dropdown--active .header__acc-list { border-radius: 0.5rem; display: block; } } .header__acc-list { background-color: #040474; color: #FEF8F5; list-style: none; padding: 2rem; border-radius: 0.5rem; min-width: 19rem; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; } @media screen and (min-width: 1024px) { .header__acc-list { position: static; display: block; width: auto; height: auto; } } .header__acc-list::after { content: ''; background-color: #040474; width: 2rem; height: 2rem; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .header__acc-close { position: absolute; top: 2rem; right: 2rem; padding: 0; cursor: pointer; border: none; background-color: transparent; } @media screen and (min-width: 1024px) { .header__acc-close { display: none; } } .header__acc-link { text-decoration: none; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; } .header__cart-wrapper { margin-right: 1rem; position: relative; z-index: 0; } @media screen and (min-width: 1024px) { .header__cart-wrapper { margin-right: 1.2rem; margin-bottom: 0.5rem; } } .header__cart-wrapper:hover svg path { fill: #7D20F3; } .header__cart-amount { position: absolute; top: 0rem; right: 0.4rem; font-size: 1rem; background-color: #FD7923; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: white; 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; z-index: 3; } @media screen and (min-width: 1024px) { .header__cart-amount { width: 2rem; height: 2rem; top: 0rem; right: 0.6rem; } } .header__cart-amount.hidden { display: none; } .header__icon { width: 2rem; height: 2rem; cursor: pointer; } @media screen and (min-width: 1024px) { .header__icon { width: 2.3rem; height: 2.3rem; } } .header__icon--cart { width: 1.67rem; height: 1.66rem; } @media screen and (min-width: 1024px) { .header__icon--cart { width: 2rem; height: 2rem; } } .header__nav-wrapper { position: absolute; top: 5.5rem; left: 0; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: #D6D9FC; height: 0 !important; overflow: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media screen and (min-width: 1024px) { .header__nav-wrapper { height: auto !important; display: -webkit-box; display: -ms-flexbox; display: flex; position: static; height: auto; background-color: transparent; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 1024px) { .header__currency-wrapper { margin-left: auto; } } .nav { margin-bottom: 5rem; } @media screen and (min-width: 1024px) { .nav { margin-bottom: 0; margin-left: auto; } } .nav__list { list-style: none; text-align: center; margin-top: 7rem; font-weight: 500; } @media screen and (min-width: 1024px) { .nav__list { margin-top: 0; } } .nav__list > * + * { margin-top: 2.76rem; } @media screen and (min-width: 1024px) { .nav__list > * + * { margin-top: 0; } } @media screen and (min-width: 1024px) { .nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1024px) { .nav__list-item { margin-right: 3.45rem; margin-bottom: 0.5rem; } } @media screen and (min-width: 1024px) { .nav__list-item--has-children { position: relative; } .nav__list-item--has-children:hover > a::before { left: calc(100% + 1.5rem); top: 30%; -webkit-transform: rotate(-135deg) translateY(-50%); -ms-transform: rotate(-135deg) translateY(-50%); transform: rotate(-135deg) translateY(-50%); } .nav__list-item--has-children:hover .nav__nested-list { display: block; } } .nav__list-item--has-children > button { position: relative; } .nav__list-item--has-children > button::before { content: ''; position: absolute; border: solid #040474; border-width: 0 0.2rem 0.2rem 0; display: block; padding: 0.3rem; left: calc(100% + 1rem); top: 42%; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .nav__list-item--has-children[aria-expanded="true"] .nav__nested-list { max-height: 30rem; margin-top: 2.7rem; } .nav__list-item--has-children[aria-expanded="true"] > button { position: relative; font-weight: bold; } .nav__list-item--has-children[aria-expanded="true"] > button::before { left: calc(100% + 1.5rem); top: 30%; -webkit-transform: rotate(-135deg) translateY(-50%); -ms-transform: rotate(-135deg) translateY(-50%); transform: rotate(-135deg) translateY(-50%); } .nav__nested-list { list-style: none; overflow: hidden; max-height: 0; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } @media screen and (min-width: 1024px) { .nav__nested-list { position: absolute; top: 100%; left: 0; background-color: #040474; color: #FEF8F5; padding: 1.6rem 2rem; max-height: 50rem; min-width: 13.6rem; margin-top: 0; text-align: left; display: none; border-radius: 0.5rem; } } .nav__nested-list > * + * { margin-top: 3rem; } @media screen and (min-width: 1024px) { .nav__nested-list > * + * { margin-top: 2rem; } } .nav__link { font-size: 2rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.07rem; color: #040474; text-decoration: none; border: none; background-color: transparent; } .nav__link:hover { color: #7D20F3; } @media screen and (min-width: 1024px) { .nav__link { font-size: 1.6rem; line-height: 1.62; font-weight: normal; } } .nav__link--nested { font-weight: bold; font-size: 1.6rem; line-height: 1.2; } @media screen and (min-width: 1024px) { .nav__link--nested { font-weight: normal; font-size: 1.4rem; color: #FEF8F5; } .nav__link--nested:hover { color: #FEF8F5; opacity: 0.8; } } .promo-bar { font-family: "Neue Haas Grotesk Display Pro", sans-serif; height: 2.5rem; width: 100%; background-color: #D6D9FC; color: #040474; text-align: center; font-size: 1.4rem; font-weight: 500; line-height: 2.5rem; letter-spacing: 0.05em; position: relative; display: none; } @media screen and (min-width: 1024px) { .promo-bar { height: 3.4rem; line-height: 3.4rem; } } .promo-bar__close-bar { border: none; padding: 0; background-color: transparent; position: absolute; width: 1.1rem; height: 1.1rem; top: 0.8rem; right: 2rem; } @media screen and (min-width: 1024px) { .promo-bar__close-bar { right: 12rem; top: 1.2rem; } } .promo-bar__promo-svg { width: 100%; height: 100%; display: block; } .currency { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .currency__button { border: none; background-color: white; font-size: 1.6rem; line-height: 1.62; font-weight: 500; width: 8.7rem; height: 3.2rem; border-radius: 5rem; cursor: pointer; letter-spacing: 0.07rem; text-align: center; } .currency__button:hover { background-color: #D6D9FC; color: #040474; } @media screen and (min-width: 1024px) { .currency__button { width: 6.6rem; height: 2.1rem; font-size: 1.4rem; line-height: 1.57; margin-right: 3rem; margin-bottom: .8rem; } } .footer { background-color: #040474; color: #FEF8F5; padding-top: 40px; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .footer__upper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } } @media screen and (min-width: 1024px) { .footer__subs { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 33.5rem; margin-top: 1rem; } } .footer__subs .footer-contact__follow-us { display: none; } @media screen and (min-width: 1024px) { .footer__subs .footer-contact__follow-us { display: -webkit-box; display: -ms-flexbox; display: flex; } } .footer__bottom { position: relative; margin-top: 3.8rem; padding-bottom: 2rem; } @media screen and (min-width: 768px) { .footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .footer__logo { width: 13.4rem; height: 3.8rem; display: block; } .footer__line { position: absolute; width: 17rem; height: 1.6rem; right: 0; top: 0.5rem; } @media screen and (min-width: 768px) { .footer__line { position: static; -webkit-transform: translateX(4rem); -ms-transform: translateX(4rem); transform: translateX(4rem); } } @media screen and (min-width: 1024px) { .footer__line { height: auto; width: 24rem; margin-top: 1.4rem; -webkit-transform: translateX(4.9rem); -ms-transform: translateX(4.9rem); transform: translateX(4.9rem); } } .footer__wollson-wrapper { position: relative; 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-top: 3.5rem; } @media screen and (min-width: 768px) { .footer__wollson-wrapper { margin-top: 0; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media screen and (min-width: 1024px) { .footer__wollson-wrapper { margin-top: 1rem; } } .footer__wollson { display: block; text-decoration: none; color: #FEF8F5; font-size: 1.4rem; letter-spacing: 0.05em; } @media screen and (min-width: 768px) { .footer__wollson { margin-top: 1.5rem; } } .footer__lang-selector { position: relative; } .footer__lang-selector.open .footer__lang-list { max-height: 15rem; } .footer__lang-selector.open .footer__en::before { top: 31%; right: 0.7rem; -webkit-transform: rotate(-135deg) translateY(-50%); -ms-transform: rotate(-135deg) translateY(-50%); transform: rotate(-135deg) translateY(-50%); } .footer__en { background-color: transparent; padding: 0.3rem 3rem 0.3rem 1.2rem; margin-top: 0.5rem; color: #FEF8F5; border: 1px solid #FEF8F5; font-size: 1.4rem; border-radius: 5rem; position: relative; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer__en::before { content: ''; position: absolute; border: solid #FEF8F5; border-width: 0 0.2rem 0.2rem 0; display: block; padding: 0.3rem; right: 1.3rem; top: 38%; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer__en:hover { color: #D6D9FC; border-color: #D6D9FC; } .footer__en:hover::before { border: solid #D6D9FC; border-width: 0 0.2rem 0.2rem 0; } .footer__lang-list { position: absolute; bottom: 100%; right: 0; list-style: none; text-align: right; max-height: 0; overflow: hidden; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer__lang-list-item { margin-bottom: 1rem; } .footer__lang-list-item a { text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer__lang-list-item a:hover { text-decoration: underline; color: #D6D9FC; } .locale-selectors__container { display: none; } .footer-form { position: relative; margin-top: 1.4rem; } .footer-form__input { background-color: transparent; border: none; width: 100%; color: #FEF8F5; border-bottom: 2px solid #FEF8F5; font-size: inherit; line-height: inherit; letter-spacing: inherit; padding-bottom: 0.2rem; border-radius: 0; } .footer-form__input:focus { border-bottom-color: #D6D9FC; color: #d6d9fc; } .footer-form__input--error { border-bottom-color: #FD7923; } .footer-form__input--error ~ #error-msg { display: block; } .footer-form__input--error + button { top: 25%; } .footer-form__submit { padding: 0; background-color: #FEF8F5; border-radius: 5.5rem; border: none; position: absolute; bottom: -0.5rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; z-index: 5; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer-form__submit:hover { background-color: #D6D9FC; } .footer-form__submit:active { background-color: #A1A9FC; } .footer-form__submit svg, .footer-form__submit rect { width: 3.1rem; height: 2.2rem; } #error-msg { display: none; color: #FD7923; font-size: 1.4rem; } .footer-nav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 6rem; } @media screen and (min-width: 1024px) { .footer-nav { margin-top: 1rem; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 37rem; margin-left: 13rem; } } .footer-nav__list { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; list-style: none; } .footer-nav__list:last-child { padding-left: 2rem; } .footer-nav__list-item { margin-bottom: 2rem; } .footer-nav__link { text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer-nav__link:hover { color: #D6D9FC; } .footer-nav__link:active { color: #A1A9FC; } @media screen and (min-width: 768px) { .footer-contact { 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; margin-top: 3rem; } } @media screen and (min-width: 1024px) { .footer-contact { display: block; padding-left: 3px; margin-top: 0; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .trustpilot-desktop, .promo-bar-desktop { display: block !important; } .footer .trustpilot-widget { margin-bottom: 30px; } .trustpilot-mobile, .promo-bar-mobile { display: none !important; } } @media screen and (max-width: 1024px) { .trustpilot-mobile { width: 200px; } .trustpilot-mobile, .promo-bar-mobile { display: block !important; } .trustpilot-desktop, .promo-bar-desktop { display: none !important; } } .footer-contact__title { margin-top: 0.8rem; margin-bottom: 0.3rem; color: #D6D9FC; } .footer-contact__link { display: block; margin-bottom: 3.2rem; color: #a1a9fc; text-decoration: none; } @media screen and (min-width: 1024px) { .footer-contact__link { margin-bottom: 4.5rem; } } .footer-contact__follow-us { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4.7rem; } @media screen and (min-width: 768px) { .footer-contact__follow-us { width: 18rem; margin-top: 0; } } @media screen and (min-width: 1024px) { .footer-contact__follow-us { margin-top: 3rem; } } .footer-contact__follow-us-title { text-transform: uppercase; color: #a1a9fc; margin-right: 2.5rem; font-size: 1.6rem; letter-spacing: 0.1em; } .footer-contact__social { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0.1rem; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .footer-contact__social > * + * { margin-left: 2.4rem; } .footer-contact__social li:hover { opacity: 0.8; } @media screen and (min-width: 1024px) { .footer-contact .footer-contact__follow-us { display: none; } } .hero { position: relative; padding-bottom: 28.8rem; } @media screen and (min-width: 768px) { .hero { padding-bottom: 50rem; } } @media screen and (min-width: 1024px) { .hero { padding-bottom: 12rem; } } .hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero__bg-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center 80%; object-position: center 80%; } .hero__title { font-family: "Neue Haas Grotesk Display Pro", sans-serif; } .hero__title span { display: none; } .hero__title span:first-child { display: inline; } @media screen and (min-width: 1024px) { .hero__title { text-transform: none; letter-spacing: 0.02em; width: 63.7rem; } } .hero__copy { font-size: 1.6rem; line-height: 1.62; font-weight: 500; letter-spacing: 0.08rem; margin-top: 1.7rem; margin-bottom: 3.3rem; } @media screen and (min-width: 1024px) { .hero__copy { padding-right: 2rem; padding-left: 0.5rem; margin-bottom: 5.1rem; margin-top: 1.2rem; } } @media screen and (min-width: 1024px) { .hero__copy p { width: 48.4rem; } } .hero__content { text-align: center; padding-top: 4.4rem; } @media screen and (min-width: 1024px) { .hero__content { padding-top: 10rem; max-width: 50rem; text-align: left; } } .science-hero { padding: 0; width: 100%; height: 48.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media screen and (min-width: 1024px) { .science-hero { height: 55rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .science-hero__content { padding-top: 0 !important; } .science-hero .container { margin: 7rem auto; } @media screen and (min-width: 1024px) { .science-hero .container { margin: 0; } } .global-cart { position: fixed; transform: translateX(9999px); top: 0; right: 0; z-index: 99999; width: 100%; height: 100%; pointer-events: none; visibility: hidden; -webkit-transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart .button--cart { margin-right: 2rem !important; } .global-cart .close { position: absolute; top: 1.6rem; right: 1.6rem; } .global-cart.active { pointer-events: all; visibility: visible; z-index: 999999999; transform: translateX(9999px) } .global-cart.active .global-cart__overlay { cursor: pointer; opacity: 1; visibility: visible; background-color: rgba(0, 0, 0, 0.7); } .global-cart.active .global-cart__drawer { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .global-cart.active .global-cart__drawer h3 { margin-top: 1rem; text-align: center; font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-size: 2.4rem; letter-spacing: 0.02em; } .global-cart__overlay { position: absolute; top: 0rem; right: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer { position: absolute; top: 0; right: 0; width: 100%; height: 100%; max-width: 100%; -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: #fff; z-index: 99999999909999999999999; } @media screen and (min-width: 768px) { .global-cart__drawer { max-width: 45rem; min-width: 37.5rem; } } .global-cart__drawer__header { padding: 6px 8px 6px 20px; } .global-cart__drawer__header .heading { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .global-cart__drawer__error-bar { height: 0; text-align: center; border-bottom: solid 0 rgba(0, 0, 0, 0.1); -webkit-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__error-bar.active { height: 61px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); } @media screen and (min-width: 768px) { .global-cart__drawer__error-bar.active { height: 91px; } } .global-cart__drawer__item-list { position: relative; padding-top: 2rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; overflow-y: scroll; list-style: none; max-height: 100vh; /* Fallback for browsers that do not support Custom Properties */ max-height: calc((1vh * 100) - 16rem); max-height: calc((var(--vh, 1vh) * 100) - 16rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .global-cart__drawer__item-list.has-items { max-height: calc((1vh * 100) - 20rem); max-height: calc((var(--vh, 1vh) * 100) - 20rem); } .global-cart__drawer__item-list .item { position: relative; -ms-flex-negative: 0; flex-shrink: 0; padding: 1rem; border-bottom: solid 1px rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__item-list .item::after { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; background-color: rgba(255, 255, 255, 0.5); content: ""; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__item-list .item.loading::after { pointer-events: all; opacity: 1; visibility: visible; } .global-cart__drawer__item-list .item.hidden { opacity: 0; } .global-cart__drawer__item-list .item__image-wrap { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 6rem; height: 6rem; -o-object-fit: contain; object-fit: contain; margin-right: 1rem; } .global-cart__drawer__item-list .item__image-wrap img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .global-cart__drawer__item-list .item__info-wrap { width: 100%; } .global-cart__drawer__item-list .item__info-wrap .title { margin: 15px 0 5px; } .global-cart__drawer__item-list .item__info-wrap .option { margin: 0 0 5px; } .global-cart__drawer__item-list .item__info-wrap .bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: auto; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px; border: solid 1px rgba(0, 0, 0, 0.2); } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec, .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .inc { 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: 18px; height: 18px; padding: 0; cursor: pointer; background: transparent; border: 0; display: flex; align-items: center; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec svg, .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .inc svg { width: 18px; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec { padding-bottom: 0.5rem; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .qty { text-align: center; } .global-cart__drawer__item-list .item__info-wrap .bottom .price-wrap .orig-price { text-decoration: line-through; } .global-cart__drawer__item-list .empty-msg { padding: 20px; text-align: center; margin-top: 8rem; margin-bottom: 7rem; font-size: 2rem; } @media screen and (min-width: 768px) { .global-cart__drawer__item-list .empty-msg { padding: 35px 20px; } } .global-cart__drawer__footer { position: relative; padding: 0; text-align: center; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 0; width: 100%; } .global-cart__drawer__footer .shipping-msg { font-size: 1.4rem; margin: 1.1rem 0 1.1rem; } .global-cart__drawer__footer .checkout-link { margin: 0 auto; } .global-cart .subtotal-wrapper { background-color: #D6D9FC; padding: 2rem; } .global-cart .subtotal-title { font-weight: bold; font-family: "Neue Haas Grotesk Display Pro", sans-serif; margin-bottom: 2rem; } .global-cart .cart-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.2rem 2rem 2.8rem; } @media screen and (min-width: 1024px) { .global-cart .cart-list-item { padding-top: 1.8rem; padding-bottom: 1.6rem; } } .wl-item-info { width: 70%; } .wl-item-info .item-title { text-decoration: none; font-weight: bold; margin-bottom: 2rem; display: inline-block; } .wl-item-info .item-price { font-weight: bold; position: absolute; bottom: 2.8rem; right: 2rem; } .wl-item-info span { margin-right: 1rem; } .wl-item-info .empty { right: 2rem; top: 2rem; position: absolute; cursor: pointer; } .wl-item-info .empty img { width: 1.5rem; height: 1.5rem; -o-object-fit: contain; object-fit: contain; } .wl-item-info .qty { margin-right: 0; } .wl-item-info .quantity { -ms-flex-item-align: start; align-self: flex-start; margin-top: auto; border: 1px solid #000; margin-top: .5rem; 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; width: 6.3rem; height: 2.6rem; border-radius: 0.5rem; padding-right: 0.3rem; padding-left: 0.5rem; } .wl-item-info .quantity button { position: relative; display: inline-block; padding: 0; text-decoration: none; cursor: pointer; background-color: rgba(6, 34, 51, 0); border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: .8rem; vertical-align: middle; /* height: 25px; */ width: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .continue-shopping-link { display: block; margin-top: 1rem; color: #7D20F3; } .cart-counter { background: transparent; position: absolute; font-size: 0.6rem; display: block; position: absolute; top: .34rem; left: 0px; font-size: .5rem; letter-spacing: -0.2px; width: 100%; } .might-like { font-size: 1.4rem; width: 100%; text-align: left; padding: 2rem; margin-top: auto; } .might-like__list { margin-top: 0.5rem; } @media screen and (min-width: 1024px) { .might-like__list { margin-top: 1rem; } } .might-like__list-item { background-color: #FEF8F5; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .might-like__image { width: 6rem; height: 6rem; -o-object-fit: contain; object-fit: contain; margin-right: 2rem; } .might-like__details { font-size: 1.6rem; margin-right: auto; } .might-like__details > * + * { margin-top: 1.5rem; } .cart-subscribe-to-save { color: #FEF8F5; background-color: #040474; font-size: 1.4rem; letter-spacing: 0.05em; border-radius: 0.5rem; display: block; margin-top: -1rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.2rem 0.5rem; margin-bottom: 1rem; } .every-month { position: relative; display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: 1rem; font-size: 1.4rem; letter-spacing: 0.05em; color: #A1A9FC; padding-left: 1.5rem; } .every-month::before { content: ''; background-image: url("https://cdn.shopify.com/s/files/1/0533/9509/5750/files/recycle.svg?v=1636981027"); position: absolute; top: 0.3rem; left: 0; width: 1.1rem; height: 1.1rem; background-size: contain; background-repeat: no-repeat; background-position: center; } .as-seen { padding-bottom: 2.9rem; overflow-x: hidden; } @media screen and (min-width: 1024px) { .as-seen { padding-bottom: 0; } } .as-seen--violet { background-color: #D6D9FC; } @media screen and (min-width: 1024px) { .as-seen__container { display: -webkit-box; display: -ms-flexbox; display: flex; } } .as-seen__title { font-size: 1.6rem; line-height: 1.9rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: "Neue Haas Grotesk Display Pro", sans-serif; text-align: center; margin-top: 2.55rem; margin-bottom: 2.3rem; } @media screen and (min-width: 1024px) { .as-seen__title { -ms-flex-negative: 0; flex-shrink: 0; } } .as-seen__slider-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .as-seen__slider { min-width: 43rem; } .as-seen__slide { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .as-seen__img { max-width: 100%; max-height: 2.5rem; -o-object-fit: contain; object-fit: contain; width: auto; height: auto; } .our-products { background-color: #FEF8F5; overflow-x: hidden; } .our-products__container { padding-top: 6.6rem; padding-bottom: 4.4rem; } @media screen and (min-width: 1024px) { .our-products__container { display: -webkit-box; display: -ms-flexbox; display: flex; } } .our-products__title { text-align: center; margin-bottom: 4.4rem; } @media screen and (min-width: 1024px) { .our-products__title { -webkit-box-flex: 0; -ms-flex: 0 0 26.1%; flex: 0 0 26.1%; text-align: left; padding-top: 16rem; } } .our-products__slider { width: calc(100vw + 10.5rem); } @media screen and (min-width: 768px) { .our-products__slider { width: 100%; -webkit-box-flex: 0 !important; -ms-flex: 0 0 74% !important; flex: 0 0 74% !important; } } @media screen and (min-width: 1024px) { .our-products__slider { margin-top: 1.5rem; } } @media screen and (min-width: 768px) { .our-products__slider-wrapper { grid-gap: 0; gap: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .our-products__slide { min-width: 24rem; height: 35.7rem; padding-right: 2rem; } @media screen and (min-width: 768px) { .our-products__slide { width: 32%; height: 40rem; } } @media screen and (min-width: 1024px) { .our-products__slide { width: 28.2rem; height: 42rem; } } @media screen and (min-width: 768px) { .our-products__slide--empty { display: none; } } .our-products__pagination { width: 100%; position: static; margin-top: 2.8rem; text-align: left; padding-right: 20.3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .our-products__pagination .swiper-pagination-bullet { background-color: #FEF8F5; margin: 0 !important; } .our-products__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { position: relative; } .our-products__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { content: ''; width: 20.3rem; height: 0.6rem; background-color: #ECE1DC; position: absolute; top: 0; left: 0; border-radius: 1rem; z-index: 19; } .clean { overflow: hidden; } .clean--beige { background-color: #FEF8F5; } .clean__container { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 4rem; padding-bottom: 1.7rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 1024px) { .clean__container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding-top: 10rem; padding-bottom: 9rem; } .clean__container > * + * { margin-left: 6rem; } } .clean__picture { display: block; margin-bottom: 4rem; } @media screen and (min-width: 1024px) { .clean__picture { -webkit-box-flex: 0; -ms-flex: 0 0 60rem; flex: 0 0 60rem; margin-bottom: 0; } } .clean__image { border-radius: 0.5rem; } @media screen and (min-width: 1024px) { .clean__content { padding-top: 0rem; } } .clean__content h3 { margin-bottom: 0.3rem; } .clean__content.why__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .clean__content-inner { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 4rem; } @media screen and (min-width: 768px) { .clean__content-inner { margin-bottom: 2.5rem; } } .clean__content-inner__icon { max-width: 5rem; margin-top: 1rem; margin-right: 1.4rem; } @media screen and (min-width: 768px) { .clean__content-inner__icon { max-width: 7rem; } } .clean__richtext { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; margin-bottom: 4rem; } .clean__buttons { list-style: none; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 1.7rem; gap: 1.7rem; max-width: 23.7rem; margin: 5.5rem auto 0; } @media screen and (min-width: 768px) { .clean__buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 100%; } } @media screen and (min-width: 1024px) { .clean__buttons { margin-top: 5rem; grid-gap: 3rem; gap: 3rem; } } .clean__buttons .button { width: 100%; } .clean__title { font-size: 4rem; line-height: 1.3; 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; margin-bottom: 3.5rem; } @media screen and (min-width: 768px) { .clean__title { margin-bottom: 4.5rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .feature-bar { background-color: #D6D9FC; overflow-x: hidden; padding: 1.4rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (min-width: 1024px) { .feature-bar { padding: 1.9rem 0; } } .feature-bar.slow .feature-bar__slider { -webkit-animation-duration: 80s; animation-duration: 80s; } .feature-bar__slider { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: ticker; animation-name: ticker; -webkit-animation-duration: 45s; animation-duration: 45s; } .feature-bar__list { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: -webkit-box; display: -ms-flexbox; display: flex; } .feature-bar__list-item { text-transform: uppercase; font-size: 1.6rem; line-height: 1.9rem; letter-spacing: 0.1em; font-family: "Neue Haas Grotesk Display Pro", sans-serif; list-style: none; position: relative; display: block; text-align: center; padding-left: 2.2rem; margin-left: 1.8rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .feature-bar__list-item::before { content: ''; width: 5px; height: 5px; background-color: #040474; border-radius: 50%; display: block; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .three-icons { padding: 9.3rem 0 7.6rem; overflow: hidden; } @media screen and (min-width: 1024px) { .three-icons { padding: 8.3rem 0 9.2rem; } } .three-icons__list { list-style: none; text-align: center; margin-top: 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; grid-gap: 5.3rem; gap: 5.3rem; position: relative; } @media screen and (min-width: 1024px) { .three-icons__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 94rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 6rem auto 0; grid-gap: 6rem; gap: 6rem; } } @media screen and (min-width: 1024px) { .three-icons__list-item { max-width: 27.8rem; width: 100%; } } .three-icons__list-item:nth-child(1) .three-icons__icon { margin-top: -2.7rem; } @media screen and (min-width: 1024px) { .three-icons__list-item:nth-child(1) .three-icons__icon { margin-top: 0; -webkit-transform: translate(1.5rem, 0.2rem); -ms-transform: translate(1.5rem, 0.2rem); transform: translate(1.5rem, 0.2rem); } } .three-icons__list-item:nth-child(3) .three-icons__icon { margin-top: -0.5rem; margin-bottom: 1rem; } @media screen and (min-width: 1024px) { .three-icons__list-item:nth-child(3) .three-icons__icon { margin: 0 auto 2rem; } } .three-icons__icon { position: relative; margin: 0 auto 2rem; width: 10rem; } .three-icons__svg { width: 100%; } .three-icons__svg--leaf-ext { position: absolute; top: 82%; right: 109%; width: 14.7rem; } .three-icons__svg--pills { width: 5.4rem; height: 9.8rem; } @media screen and (min-width: 1024px) { .three-icons__svg--pills { margin-top: -2.5rem; } } .three-icons__svg--earth { width: 23.8rem; height: 9.1rem; -webkit-transform: translateX(6.85rem); -ms-transform: translateX(6.85rem); transform: translateX(6.85rem); margin-bottom: -.8rem; } @media screen and (min-width: 1024px) { .three-icons__svg--earth { margin-bottom: 0; margin-top: -1.3rem; -webkit-transform: translateX(7.3rem); -ms-transform: translateX(7.3rem); transform: translateX(7.3rem); } } .three-icons__title { font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-size: 2.4rem; line-height: 1.25; letter-spacing: 0.02em; margin-bottom: 1.3rem; } .three-icons__copy { max-width: 22.8rem; line-height: 1.62; margin: 0 auto; letter-spacing: 0.05em; } .three-icons__leaf-extension { position: absolute; top: 86%; width: 37.7rem; right: 90%; } .three-icons__world-extension { position: absolute; left: 106%; top: 4%; width: 33.6rem; } .layout--index .three-icons .centered-text__content { margin-top: 4rem; } @media screen and (min-width: 1024px) { .layout--index .three-icons .centered-text__content { margin-top: 0; } } .img-and-content { background-color: #FEF8F5; } .img-and-content__container { text-align: center; } @media screen and (min-width: 1024px) { .img-and-content__container { display: -webkit-box; display: -ms-flexbox; display: flex; padding-bottom: 0; } } .img-and-content__picture { display: block; width: 100%; } @media screen and (min-width: 1024px) { .img-and-content__picture { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .img-and-content__content { padding: 4.2rem 2rem 5.5rem; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 1024px) { .img-and-content__content { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .img-and-content__title { margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .img-and-content__title { font-size: 6rem; line-height: 1.13; letter-spacing: 0.02em; padding: 0 4rem; text-transform: none; margin-bottom: 2rem; } } .img-and-content__copy { font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; } .img-and-content { background-color: #FAFAFA !important; } .better { padding: 6.5rem 0 8rem 0; background-color: white; } @media screen and (min-width: 1024px) { .better { padding: 8rem 0 8rem 0; } } .better__container { display: -webkit-box; display: -ms-flexbox; display: flex; grid-gap: 6.6rem; gap: 6.6rem; margin-top: 1.7rem; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @media screen and (min-width: 1024px) { .better__container { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 5rem; grid-gap: 0; gap: 0; flex-direction: row; } } .better__container--about { margin-top: 0; } @media screen and (min-width: 1024px) { .better__container--about { margin-top: -2.5rem; } .better__container--about .better__content--richtext { font-weight: 500; letter-spacing: 0.05em; } } @media screen and (min-width: 1024px) and (min-width: 768px) { .better__container--about .better__content--richtext { padding-top: 10rem; } } .better__content { text-align: center; } @media screen and (min-width: 1024px) { .better__content { text-align: left; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; text-align: left; padding-top: 2rem; } } .better__content h3 { margin-bottom: 1.5rem; font-size: 3rem; line-height: 5.2rem; font-weight: 600; } @media screen and (min-width: 1024px) { .better__content h3 { margin-bottom: 2.5rem; line-height: 1; } } .better__content p { font-size: 2rem; letter-spacing: 0.05em; line-height: 3.6rem; } @media screen and (min-width: 1024px) { .better__content p { font-size: 1.6rem; padding-right: 5%; line-height: 2.4rem; } } .better__list { list-style: none; text-align: left; margin-bottom: 5rem; } @media screen and (min-width: 1024px) { .better__list-item { margin-left: -2.8rem; } } .better__num { margin-right: 0.6rem; } @media screen and (min-width: 1024px) { .better__num { margin-right: 1.5rem; } } .better__item-text { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; margin-top: .6rem; margin-bottom: 3.4rem; } @media screen and (min-width: 1024px) { .better__item-text { margin-left: 3rem; margin-bottom: 4.5rem; margin-top: 1rem; } } .better__pictures { position: relative; } @media screen and (min-width: 768px) { .better__pictures { margin-left: 6.5rem; } } .better__main-picture { margin-top: 0; max-width: 26.7rem; display: block; } @media screen and (min-width: 1024px) { .better__main-picture { width: 39.2rem; height: 39.2rem; max-width: 100%; -o-object-fit: cover; object-fit: cover; margin-top: 3rem; } } .better__small-picture { position: absolute; top: -21px; right: 15px; width: 11.1rem; height: 11.1rem; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 768px) { .better__small-picture { right: -4rem; } } @media screen and (min-width: 1024px) { .better__small-picture { width: 16.3rem; height: 16.3rem; right: -7.5rem; top: 0; } } .better__stamp { width: 9.9rem; height: 11rem; position: absolute; right: 0; bottom: 2.7rem; /* -webkit-animation: rotate 30s linear infinite; animation: rotate 30s linear infinite; */ } @media screen and (min-width: 768px) { .better__stamp { right: -4rem; } } @media screen and (min-width: 1024px) { .better__stamp { width: 13.5rem; height: 14.4rem; bottom: 4.6rem; right: -9.8rem; } } .better__image { width: 100%; border-radius: 0.5rem; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 1024px) { .template--index .better { padding-bottom: 6.2rem; } .template--index .better__content { padding-top: 1.5rem; } .template--index .better__pictures { margin-left: 0; } .template--index .better__stamp { bottom: -6.4rem; } } .three-products { padding-top: 3rem; padding-bottom: 8rem; text-align: center; } @media screen and (min-width: 768px) { .three-products { padding-top: 1.5rem; padding-bottom: 10rem; } } .three-products__title { margin-top: 5rem; } .three-products__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 4.4rem; grid-gap: 3.7rem; gap: 3.7rem; } @media screen and (min-width: 768px) { .three-products__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-gap: 4rem; gap: 4rem; padding-top: 2.6rem; } } @media screen and (min-width: 1024px) { .three-products__list { grid-gap: 5rem; gap: 5rem; padding-top: 3rem; } } .three-products__list-item { position: relative; } @media screen and (min-width: 768px) and (max-width: 1023px) { .three-products .product-item__picture { width: 19rem; height: 19rem; } } .home-reviews { background-color: #FEF8F5; padding-top: 8.7rem; padding-bottom: 5rem; } @media screen and (min-width: 1024px) { .home-reviews { padding-top: 8.5rem; } } .home-reviews__slider { margin-top: 4.5rem; } @media screen and (min-width: 1024px) { .home-reviews__slider { margin-top: 8rem; } } .home-reviews__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-gap: .4rem; gap: .4rem; margin-top: 4rem; } @media screen and (min-width: 1024px) { .home-reviews__pagination { margin-top: 5.5rem; } } .home-reviews__pagination .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; border: 1px solid #040474; background-color: transparent; opacity: 1; margin: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .home-reviews__pagination .swiper-pagination-bullet-active { background-color: #040474; } .home-reviews .centered-text__content { margin-top: 3rem; } .home-reviews .swiper-slide { height: auto; } .home-ig { background-color: #FEF8F5; padding-top: 3.4rem; } .home-ig__title { text-align: center; text-transform: capitalize; font-weight: 600; line-height: 1.2; } .home-ig__title a { text-decoration: none; } .home-ig__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 4.8rem; } @media screen and (min-width: 1024px) { .home-ig__list { margin-bottom: -0.2rem; } } .home-ig__list-item { -webkit-box-flex: 0; -ms-flex: 0 0 33.3%; flex: 0 0 33.3%; } @media screen and (min-width: 768px) { .home-ig__list-item { -webkit-box-flex: 0; -ms-flex: 0 0 14.28%; flex: 0 0 14.28%; } } .home-ig__list-item:nth-child(7) { display: none; } @media screen and (min-width: 768px) { .home-ig__list-item:nth-child(7) { display: block; } } .contact { padding-top: 3rem; padding-bottom: 5.5rem; } @media screen and (min-width: 1024px) { .contact { padding-top: 5rem; padding-bottom: 7.2rem; } } .contact__form { padding-top: 3.7rem; max-width: 56rem; margin: 0 auto; } @media screen and (min-width: 1024px) { .contact__form { padding-top: 4.5rem; } } .contact__form-item { margin-bottom: 1.3rem; } @media screen and (min-width: 1024px) { .contact__form-item { margin-bottom: 2.4rem; } } .contact__form-item .error { border: 2px solid #FD7923; } .contact__form-item .error-message { font-size: 1.4rem; color: #FD7923; } .contact__label { display: block; font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.01em; margin-bottom: 1rem; } .contact__input, .contact__textarea { display: block; width: 100%; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; padding: 1.2rem 1.6rem; border: 1px solid #040474; border-radius: 0.5rem; outline: none; color: #040474; } .contact__input::-webkit-input-placeholder, .contact__textarea::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .contact__input::-moz-placeholder, .contact__textarea::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .contact__input::-ms-input-placeholder, .contact__textarea::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .contact__input:-ms-input-placeholder, .contact__textarea:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .contact__input::placeholder, .contact__textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .contact__input:-ms-input-placeholder, .contact__textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #040474; } .contact__input::-ms-input-placeholder, .contact__textarea::-ms-input-placeholder { /* Microsoft Edge */ color: #040474; } .contact__input:focus, .contact__textarea:focus { background-color: #FEF8F5; border-color: #A1A9FC; border-width: 2px; } .contact__textarea { display: block; width: 100%; min-height: 32rem; resize: none; } .contact__button { text-align: center; margin-top: 4rem; } .contact__checkbox-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 1rem; gap: 1rem; } .contact__checkbox { display: none; } .contact__checkbox:checked + .contact__custom-checkbox::after { opacity: 1; } .contact__custom-checkbox { width: 1.6rem; height: 1.6rem; display: block; border: 1px solid #040474; margin-bottom: 0.2rem; position: relative; cursor: pointer; } .contact__custom-checkbox::after { content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; height: 1rem; background-color: #040474; opacity: 0; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .contact__checkbox-label { cursor: pointer; } .four-products { padding-top: 5rem; } .four-products .product-item__picture--hover { padding: 0; } .four-products .centered-text__title { margin-bottom: 1.4rem; } .four-products--beige { background-color: #FEF8F5; padding-top: 6.3rem; } @media screen and (min-width: 768px) { .four-products--beige { padding-top: 8.3rem; } } .four-products--beige .four-products__grid { margin-top: 5rem; } .four-products--beige .product-item__title { margin-top: 2.4rem; } .four-products--beige .product-item__big-price { display: block; margin-bottom: 1.5rem; } .four-products__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .four-products__grid { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .four-products__grid > * + * { margin-left: 3.5rem; } } @media screen and (min-width: 1024px) { .four-products__grid { padding: 3rem 2rem 0; } } .four-products__grid-item { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; margin-bottom: 6rem; } @media screen and (min-width: 768px) { .four-products__grid-item { -ms-flex-preferred-size: 21%; flex-basis: 21%; max-width: 22%; } } .product-details__container.gift-container { margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .product-details__container { display: -webkit-box; display: -ms-flexbox; display: flex; } } .product-details__slider { margin-top: 7%; margin-bottom: 2.3rem; } @media screen and (min-width: 768px) { .product-details__slider { padding: 0 5rem; margin-bottom: 4rem; } } @media screen and (min-width: 1024px) { .product-details__slider { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4rem; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding: 0; } } .product-details__content { font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.03em; padding-bottom: 6rem; width: 100%; } @media screen and (min-width: 1024px) { .product-details__content { padding-left: 5rem; padding-top: 5rem; padding-right: 8.5rem; } } .product-details__content--sticky { border-top: 1px solid white; position: fixed; width: 100%; bottom: 0; left: 0; background-color: #D6D9FC; padding: 1rem 2rem; z-index: 1001; } @media screen and (min-width: 768px) { .product-details__content--sticky { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 1024px) { .product-details__content--sticky { padding: 1rem 20.5rem; } } .product-details__content--sticky .product-details__title-wrapper, .product-details__content--sticky .product-details__desc, .product-details__content--sticky .product-details__radio-wrapper, .product-details__content--sticky .product-details__deliver-every, .product-details__content--sticky .product-details__icons, .product-details__content--sticky .product-details__info { display: none; } @media screen and (min-width: 768px) { .product-details__content--sticky .product-details__title-wrapper { display: block; } } @media screen and (min-width: 768px) { .product-details__content--sticky .product-details__title { text-align: left; font-size: 2.4rem; } } .product-details__content--sticky .product-details__button-wrapper { margin-top: 0; } @media screen and (min-width: 1024px) { .product-details__content--sticky .product-details__button-wrapper { width: 46.5rem; } } .product-details__content--sticky .product-details__button-wrapper p { display: none; } .product-details__content--sticky .product-details__button-wrapper .button { margin-bottom: 0; } .product-details__content--sticky .c-radio-custom-wrapper, .product-details__content--sticky .c-counter { display: none; } .product-details__title { text-align: center; } @media screen and (min-width: 1024px) { .product-details__title { text-align: left; font-size: 3.65rem; line-height: 1.3; } } .product-details__stars-wrapper { 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; grid-gap: 0.2rem; gap: 0.2rem; margin-top: 0.5rem; } @media screen and (min-width: 1024px) { .product-details__stars-wrapper { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-top: 0; } } .product-details__stars { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 0.5rem; } .product-details__star { width: 2rem; height: 2rem; -o-object-fit: contain; object-fit: contain; margin-right: 0.2rem; } .product-details__reviews { margin-top: 0.2rem; } .product-details__desc { margin-top: 2rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.02em; margin-bottom: 2rem; } .product-details__desc.gift__desc { margin-top: 1.7rem; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .product-details__desc.gift__desc { margin-top: 1rem; } } .product-details__desc.gift__desc span { display: block; font-size: 1.4rem; margin-top: 2rem; line-height: 1.5; } @media screen and (min-width: 1024px) { .product-details__desc.gift__desc span { margin-top: 2.6rem; } } @media screen and (min-width: 1024px) { .product-details__desc { margin-bottom: 3.2rem; } } .product-details__desc strong { font-weight: bold; } .product-details .c-radio-custom-wrapper { margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .product-details .c-radio-custom-wrapper { margin-bottom: 5rem; } } @media screen and (min-width: 1024px) { .product-details .c-radio-custom-wrapper .c-radio-custom__trigger { max-width: 52.5%; } } @media screen and (min-width: 1024px) { .product-details .c-radio-custom-wrapper .c-radio-custom-list { max-width: 50%; padding-left: 2.5%; } } @media screen and (min-width: 1024px) { .product-details__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .product-details__action .product-details__button-wrapper { margin-top: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .product-details__action .c-counter { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .product-details__action .c-counter { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: .75rem 3rem 0 0; } } .product-details__radio-wrapper { margin-bottom: 2.3rem; } @media screen and (min-width: 1024px) { .product-details__radio-wrapper { margin-bottom: 1.8rem; } } .product-details__deliver-every { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; grid-gap: 0.3rem; gap: 0.3rem; margin-bottom: 2rem; } @media screen and (min-width: 1024px) { .product-details__deliver-every { margin-bottom: 1.5rem; } } .product-details__icons { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 2rem; grid-gap: 5rem; gap: 5rem; margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .product-details__icons { margin-top: 2.5rem; grid-gap: 1.5rem; gap: 1.5rem; } } .product-details__icon-item { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 11.8rem; font-weight: 400; } @media screen and (min-width: 1024px) { .product-details__icon-item { max-width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; grid-gap: 0.5rem; gap: 0.5rem; } } .product-details__icon { width: 2.5rem; height: 2.5rem; -o-object-fit: contain; object-fit: contain; } .product-details__info { background: #FEF8F5; border-radius: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1.5rem 0.7rem; grid-gap: 1rem; gap: 1rem; } @media screen and (min-width: 1024px) { .product-details__info { padding-left: 1.2rem; } } .product-details__info-svg { width: 2.5rem; height: 2.5rem; -o-object-fit: contain; object-fit: contain; } .product-details__button-wrapper { text-align: center; font-weight: 600; } .product-details__button-wrapper.gift-details { text-align: center; } @media screen and (min-width: 1024px) { .product-details__button-wrapper.gift-details { margin-top: left; } } .product-details__button-wrapper.gift-details .button { max-width: 22rem; margin-top: 1.6rem; } @media screen and (min-width: 1024px) { .product-details__button-wrapper.gift-details .button { max-width: 47rem; } } @media screen and (min-width: 1024px) { .product-details__button-wrapper { margin-top: 2.5rem; } } .product-details__button-wrapper .button { margin-bottom: .7rem; font-weight: 600; width: 100%; } .product-details .main-slider { padding: 0 1.8rem; } @media screen and (min-width: 1024px) { .product-details .main-slider .swiper-slide { padding: 2rem 0 0 1rem; } } .product-details .main-slider.gift-slider img { width: 30rem; height: 30rem; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } @media screen and (min-width: 768px) { .product-details .main-slider.gift-slider img { width: 60rem; height: 60rem; } } @media screen and (min-width: 1024px) { .product-details .main-slider.gift-slider img { width: 51rem; height: 50rem; } } .product-details .main-slider img { width: 30rem; height: 30rem; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } @media screen and (min-width: 768px) { .product-details .main-slider img { width: 60rem; height: 60rem; } } @media screen and (min-width: 1024px) { .product-details .main-slider img { width: 55rem; height: 55rem; max-width: 100%; } } .product-details .nav-slider { margin: 2rem 1.8rem 0; position: relative; } @media screen and (min-width: 1024px) { .product-details .nav-slider { padding: 0; margin: 0; margin-top: 2rem; -webkit-box-flex: 0; -ms-flex: 0 0 7.4rem; flex: 0 0 7.4rem; } .product-details .nav-slider .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .product-details .nav-slider .swiper-slide { width: 4rem; margin-right: 2.5rem; } @media screen and (min-width: 768px) { .product-details .nav-slider .swiper-slide { width: 10rem; } } @media screen and (min-width: 1024px) { .product-details .nav-slider .swiper-slide { width: 7.4rem; height: 7.4rem; margin-bottom: 3rem; } } .product-details .nav-slider__button { position: absolute; height: 100%; width: 4rem; z-index: 10; 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; } @media screen and (min-width: 768px) { .product-details .nav-slider__button { width: 10rem; } } @media screen and (min-width: 1024px) { .product-details .nav-slider__button { height: 7.4rem; width: 100%; display: none; } } .product-details .nav-slider__button--prev { left: 0; top: 0; background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(255, 255, 255, 0.5))); background-image: -o-linear-gradient(left, #fff, rgba(255, 255, 255, 0.5)); background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.5)); } @media screen and (min-width: 1024px) { .product-details .nav-slider__button--prev { background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(rgba(255, 255, 255, 0.5))); background-image: -o-linear-gradient(bottom, #fff, rgba(255, 255, 255, 0.5)); background-image: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5)); } } .product-details .nav-slider__button--prev img { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } @media screen and (min-width: 1024px) { .product-details .nav-slider__button--prev img { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } } .product-details .nav-slider__button--next { top: 0; right: 0; background-image: -webkit-gradient(linear, right top, left top, from(#fff), to(rgba(255, 255, 255, 0.5))); background-image: -o-linear-gradient(right, #fff, rgba(255, 255, 255, 0.5)); background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0.5)); } @media screen and (min-width: 1024px) { .product-details .nav-slider__button--next { top: auto; bottom: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(255, 255, 255, 0.5))); background-image: -o-linear-gradient(top, #fff, rgba(255, 255, 255, 0.5)); background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.5)); } } .product-details .nav-slider__button--next img { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } @media screen and (min-width: 1024px) { .product-details .nav-slider__button--next img { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } } .product-details .nav-slider__button img { width: 2rem !important; height: 2rem !important; -o-object-fit: contain; object-fit: contain; } .product-details .nav-slider__button.swiper-button-disabled { display: none; } .product-details .nav-slider .swiper-slide-thumb-active img { border: 2px solid #A1A9FC; } .product-details .nav-slider img { cursor: pointer; width: 4rem; height: 4rem; -o-object-fit: cover; object-fit: cover; border-radius: 0.5rem; } @media screen and (min-width: 768px) { .product-details .nav-slider img { width: 10rem; height: 10rem; } } @media screen and (min-width: 1024px) { .product-details .nav-slider img { width: 7.4rem; height: 7.4rem; } } .reviews { margin: 0 2rem; margin-bottom: 2rem; } @media screen and (min-width: 1024px) { .reviews { margin: 0 10rem; margin-bottom: 2rem;} } body.main .wrapper-company-stars { -webkit-box-pack: left !important; -ms-flex-pack: left !important; justify-content: left !important; } #trustpilot-widget-trustbox-1-wrapper { max-width: 13rem; } .health__container { margin-top: 6.7rem; } @media screen and (min-width: 1024px) { .health__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-top: 10rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 1024px) { .health__image-wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .health__title { display: none; text-align: center; margin-bottom: 4.5rem; } @media screen and (min-width: 1024px) { .health__title { display: block; text-align: left; margin-bottom: 2rem; } } .health__title--mob { display: block; } @media screen and (min-width: 1024px) { .health__title--mob { display: none; } } .health__image { border-radius: 0.5rem; } @media screen and (min-width: 1024px) { .health__image { width: 60rem; height: 60rem; -o-object-fit: cover; object-fit: cover; } } @media screen and (min-width: 1024px) { .health__content { margin-right: auto; padding-top: 2rem; padding-right: 5rem; } } .health__list { list-style: none; margin-top: 3.5rem; } @media screen and (min-width: 1024px) { .health__list { margin-top: 2.5rem; } } .health__list-item { margin-bottom: 2.5rem; } @media screen and (min-width: 1024px) { .health__list-item { margin-bottom: 2rem; } } .health__eyebrow { font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.05em; color: #7D20F3; } .health__list-title { padding-left: 1rem; position: relative; font-size: 2.4rem; line-height: 1.25; letter-spacing: 0.02em; margin-top: -0.3rem; } .health__list-title::before { content: ''; width: 4px; height: 4px; background-color: #A1A9FC; position: absolute; top: 1.2rem; left: 0; border-radius: 50%; } .health__list-content { padding-left: 1rem; margin-top: 0.5rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .health__list-content { margin-top: 1.5rem; } } .three-steps { padding-top: 5.5rem; padding-bottom: 4.5rem; } @media screen and (min-width: 1024px) { .three-steps { padding-top: 11rem; padding-bottom: 6rem; padding-left: 1rem; position: relative; } } .three-steps__list { list-style: none; } @media screen and (min-width: 1024px) { .three-steps__list { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; grid-gap: 7.6rem; gap: 7.6rem; } } .three-steps__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .three-steps__list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 30.4rem; } } .three-steps__list-item:first-child .three-steps__icon, .three-steps__list-item:nth-child(2) .three-steps__icon { position: relative; } .three-steps__list-item:first-child .three-steps__icon:after, .three-steps__list-item:nth-child(2) .three-steps__icon:after { content: ''; position: absolute; top: 5.5rem; left: 50%; width: 0.2rem; height: calc(100% - 4rem); background-color: #FD7923; } @media screen and (min-width: 1024px) { .three-steps__list-item:first-child .three-steps__icon:after, .three-steps__list-item:nth-child(2) .three-steps__icon:after { display: none; } } .three-steps__icon { -webkit-box-flex: 0; -ms-flex: 0 0 4rem; flex: 0 0 4rem; margin-right: 1rem; } @media screen and (min-width: 1024px) { .three-steps__icon { width: 9rem; height: 9rem; margin: 0 auto 2rem; } } .three-steps__content { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.03em; } .three-steps__title { font-size: 2.4rem; line-height: 1.25; letter-spacing: 0.02em; margin-top: 0.2rem; } .three-steps__month { font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.05em; text-transform: lowercase; display: inline-block; padding: 0 1.2rem; margin-top: 1rem; margin-bottom: 1.3rem; border-radius: 5rem; background-color: #D6D9FC; } @media screen and (min-width: 1024px) { .three-steps__month { margin-top: 0; margin-bottom: 2rem; } } .three-steps__line { position: absolute; display: none; } @media screen and (min-width: 1024px) { .three-steps__line { display: block; } } .three-steps__line--first { top: 15.1rem; width: 22.2rem; left: 41rem; } .three-steps__line--second { top: 12.7rem; left: 80.2rem; width: 22.8rem; } .ingredients { padding-top: 4.7rem; } @media screen and (min-width: 1024px) { .ingredients { padding-top: 7rem; padding-bottom: 6rem; } } .ingredients__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: center; margin-top: 5rem; } @media screen and (min-width: 1024px) { .ingredients__list { margin-top: 7rem; padding: 0 4rem; } } .ingredients__list-item { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; margin-bottom: 6rem; } @media screen and (min-width: 768px) { .ingredients__list-item { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; } } .ingredients__picture { width: 100%; cursor: pointer; } .ingredients__image { width: 13rem; height: 13rem; border-radius: 50%; -o-object-fit: contain; object-fit: contain; margin: 0 auto; } @media screen and (min-width: 1024px) { .ingredients__image { width: 20rem; height: 20rem; border-radius: 50% } } .ingredients__title { margin-top: 2rem; font-size: 2.2rem; line-height: 1.25; letter-spacing: 0.02em; margin-bottom: 1rem; cursor: pointer; } @media screen and (min-width: 1024px) { .ingredients__title { margin-top: 3rem; } } .ingredients__desc { display: none; } .ingredients__button { padding: 0; border: none; background-color: transparent; text-transform: lowercase; text-decoration: underline; color: #040474; } .ingredients__button-wrapper { text-align: center; width: 100%; max-width: 47rem; margin: 2rem auto 7.5rem; } @media screen and (min-width: 1024px) { .ingredients__button-wrapper { margin-top: 4rem; margin-bottom: 4rem; } } .ingredients__button-wrapper button { width: 100%; } @media screen and (min-width: 1024px) { .ingredients__button-wrapper button { width: auto; } } .ingredients .centered-text__title { margin-bottom: 3.5rem; } @media screen and (min-width: 1024px) { .ingredients .centered-text__title { margin-bottom: 1rem; } } .fam { padding-bottom: 4rem; padding-top: 5rem; } @media screen and (min-width: 768px) { .fam { padding: 0 10rem 4rem; } } @media screen and (min-width: 1024px) { .fam { padding: 7.5rem 5.5rem 4rem; } } .fam--science { background-color: #FEF8F5; padding: 5rem 0 6rem; } @media screen and (min-width: 1024px) { .fam--science { padding: 7rem 0 10rem; } } .fam__container { border: 1px solid transparent; position: relative; height: 60rem; } @media screen and (min-width: 1024px) { .fam__container { height: 61rem; } } .fam__container picture { position: absolute; -o-object-fit: contain; object-fit: contain; left: 100%; top: 100%; } .fam__container picture:nth-child(1) { width: 17.5rem; height: 17.5rem; top: 6.5rem; left: 0; } @media screen and (min-width: 768px) { .fam__container picture:nth-child(1) { width: 22rem; height: 22rem; } } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(1) { width: 30rem; height: 30rem; top: 7.2rem; } } .fam__container picture:nth-child(2) { width: 12.245rem; height: 12.245rem; top: 32.5rem; left: auto; right: 0; } @media screen and (min-width: 768px) { .fam__container picture:nth-child(2) { width: 18rem; height: 18rem; } } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(2) { width: 21rem; height: 21rem; top: 11.5rem; right: 30.9rem; } } .fam__container picture:nth-child(3) { width: 12.8rem; height: 12.8rem; top: auto; left: 11rem; bottom: 4.1rem; } @media screen and (min-width: 768px) { .fam__container picture:nth-child(3) { width: 18rem; height: 18rem; left: 13rem; } } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(3) { width: 22rem; height: 22rem; top: auto; bottom: 0.2rem; right: 21.5rem; left: auto; } } .fam__container picture:nth-child(4) { width: 9.33rem; height: 9.33rem; top: 4.8rem; left: 14.5rem; } @media screen and (min-width: 768px) { .fam__container picture:nth-child(4) { width: 14rem; height: 14rem; left: 20rem; } } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(4) { width: 16rem; height: 16rem; left: 25rem; top: 4rem; } } .fam__container picture:nth-child(5) { width: 13.412rem; height: 13.412rem; top: 34.8rem; left: 0; } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(5) { width: 23rem; height: 23rem; left: auto; right: 3rem; top: 7rem; } } .fam__container picture:nth-child(6) { width: 16.327rem; height: 16.327rem; top: 17.8rem; right: 3rem; left: auto; } @media screen and (min-width: 768px) { .fam__container picture:nth-child(6) { top: 18.5rem; right: 10rem; } } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(6) { width: 28rem; height: 28rem; right: 46.5rem; top: 26.6rem; } } .fam__container picture:nth-child(7) { width: 9.913rem; height: 9.913rem; top: 26.2rem; left: 5.3rem; } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(7) { width: 17rem; height: 17rem; top: auto; left: 9.5rem; bottom: 2.8rem; } } .fam__container picture:nth-child(8) { width: 9.913rem; height: 9.913rem; top: 10.3rem; right: 0; left: auto; } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(8) { width: 17rem; height: 17rem; top: 27.4rem; right: -0.2rem; } } .fam__container picture:nth-child(9) { width: 11.164rem; height: 11.604rem; top: auto; bottom: 0; right: 0; left: auto; -webkit-animation: rotate 30s linear infinite; animation: rotate 30s linear infinite; } @media screen and (min-width: 1024px) { .fam__container picture:nth-child(9) { width: 13.716rem; height: 14.109rem; top: 4.5rem; right: auto; left: 37.3rem; } } .fam .centered-text__title { margin-bottom: 3.3rem; } .science-benefits { padding: 8rem 0 7.5rem 0; } @media screen and (min-width: 1024px) { .science-benefits { padding: 6rem 0 8.8rem 0; } } .science-benefits .centered-text { margin-bottom: 6rem; } @media screen and (min-width: 1024px) { .science-benefits .centered-text { margin-bottom: 7rem; } } .science-benefits__content-container { width: 1300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 1024px) { .science-benefits__content-container { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media screen and (min-width: 1599px) { .science-benefits__content-container { -ms-flex-pack: distribute; justify-content: space-around; width: 100%; } } .science-benefits__image-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0; grid-row-gap: 3rem; margin-bottom: 4.5rem; } @media screen and (min-width: 1024px) { .science-benefits__image-wrapper { grid-column-gap: 6rem; grid-row-gap: 8rem; margin-bottom: 0; } } .science-benefits__image-wrapper figure { 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; } .science-benefits__image-wrapper figure:nth-child(1) { -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); } @media screen and (min-width: 1024px) { .science-benefits__image-wrapper figure:nth-child(1) { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); } } .science-benefits__image-wrapper figure:nth-child(2) { -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); } @media screen and (min-width: 1024px) { .science-benefits__image-wrapper figure:nth-child(2) { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @media screen and (min-width: 1024px) { .science-benefits__image-wrapper figure:nth-child(3) { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); } } .science-benefits__image { width: 6.5rem; margin-bottom: 1.4rem; } @media screen and (min-width: 1024px) { .science-benefits__image { width: 7rem; } } .science-benefits__image-text { color: #040474; font-size: 1.6rem; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .science-benefits__image-text { font-size: 2rem; } } @media screen and (min-width: 1024px) { .science-benefits__text-wrapper { width: 48.1rem; } } .science-benefits__text-wrapper p { color: #040474; font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; } .pdp-table__container { padding-top: 6rem; padding-bottom: 8rem; } @media screen and (min-width: 1024px) { .pdp-table__container { padding-bottom: 10rem; } } .pdp-table__header { text-align: center; margin-bottom: 4.6rem; } @media screen and (min-width: 1024px) { .pdp-table__header { margin-top: 2rem; margin-bottom: 6rem; } } .pdp-table__list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 3.7rem; display: none; } @media screen and (min-width: 768px) { .pdp-table__list { display: none; } } .pdp-table__list-item { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .pdp-table__button { background-color: transparent; border: none; padding: 0; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; padding: .2rem 1.2rem; border-radius: 2rem; cursor: pointer; text-align: center; } .pdp-table__button--active { background-color: #040474; color: #FEF8F5; padding: .2rem 1.2rem; border-radius: 2rem; } .pdp-table__table { display: -webkit-box; display: -ms-flexbox; display: flex; } @media screen and (min-width: 768px) { .pdp-table__table { padding: 0 5rem; } } @media screen and (min-width: 1024px) { .pdp-table__table { padding: 0 12rem; } } .pdp-table__logo { width: 7.2rem; margin: 0 auto; } @media screen and (min-width: 1024px) { .pdp-table__logo { width: 13.4rem; } } .pdp-table__column { width: 9.4rem; -ms-flex-negative: 0; flex-shrink: 0; font-size: 1.4rem; line-height: 1.57; text-align: center; } @media screen and (min-width: 768px) { .pdp-table__column { width: 25%; } } @media screen and (min-width: 1024px) { .pdp-table__column { width: 30.4rem; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; } } .pdp-table__column--orange { background-color: #FEF8F5; } .pdp-table__column--other { display: none; } @media screen and (min-width: 768px) { .pdp-table__column--other { display: block; } } @media screen and (min-width: 1024px) { .pdp-table__column--other { -webkit-box-flex: 0; -ms-flex: 0 0 26rem; flex: 0 0 26rem; } .pdp-table__column--other:nth-child(4) { -webkit-box-flex: 0; -ms-flex: 0 0 19rem; flex: 0 0 19rem; } } .pdp-table__column--other.active { display: block; } .pdp-table__column--main { width: 14.7rem; } @media screen and (min-width: 768px) { .pdp-table__column--main { width: 50%; } } @media screen and (min-width: 1024px) { .pdp-table__column--main { width: 38.2rem; } .pdp-table__column--main .pdp-table__cell { padding-left: 2.2rem; } } .pdp-table__column--main .pdp-table__cell { text-align: left; } .pdp-table__cell { height: 5.1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid #040474; } @media screen and (min-width: 1024px) { .pdp-table__cell { height: 7.1rem; } } .pdp-table__cell--head { border-top: none; font-size: 1rem; padding: 0 0.5rem; height: 4.6rem; } @media screen and (min-width: 768px) { .pdp-table__cell--head { font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.02em; font-family: "Neue Haas Grotesk Display Pro", sans-serif; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (min-width: 1024px) { .pdp-table__cell--head { height: 8.2rem; font-size: 2.4rem; padding-top: 0.7rem; } } .pdp-table__check { width: 3rem; height: 3rem; -o-object-fit: contain; object-fit: contain; display: block; margin: 0 auto; } .science-product-info { padding: 6rem 0 8rem 0; } @media screen and (min-width: 1024px) { .science-product-info { padding: 10rem 0; } } @media screen and (min-width: 1024px) { .science-product-info__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-gap: 6rem; gap: 6rem; margin-bottom: 2rem; } } .science-product-info__content-wrapper:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .science-product-info__content-wrapper:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .science-product-info__text-wrapper { margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .science-product-info__text-wrapper { 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-flex: 2; -ms-flex: 2 0 21%; flex: 2 0 21%; margin-bottom: 9rem; } } .science-product-info__title { font-size: 4rem; line-height: 5.2rem; color: #040474; margin-bottom: 1rem; } @media screen and (min-width: 1024px) { .science-product-info__title { margin-bottom: 4rem; } } .science-product-info__text { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; color: #040474; } .science-product-info__image { margin-bottom: 7rem; } @media screen and (min-width: 1024px) { .science-product-info__image { width: 60rem; } } .faq { padding-top: 6.5rem; padding-bottom: 8rem; } @media screen and (min-width: 1024px) { .faq { padding-top: 8rem; padding-bottom: 10rem; } } .faq--with-sidebar { padding-top: 3rem; } .faq--with-sidebar .faq__title { padding-top: 7.8rem; margin-top: -2rem; } @media screen and (min-width: 1024px) { .faq--with-sidebar .faq__title { padding-top: 6.5rem; margin-bottom: 3rem; } } @media screen and (min-width: 1024px) { .faq--with-sidebar .faq__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (min-width: 1024px) { .faq--with-sidebar .faq__wrapper { margin-left: 8rem; margin-top: 1rem; } } .faq--violet { background-color: #D6D9FC; } .faq__title { text-align: center; margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .faq__title { margin-bottom: 4.5rem; } } .faq__list { list-style: none; max-width: 74rem; margin: 0 auto; } .faq__list-item { border-bottom: 1px solid #040474; } @media screen and (min-width: 1024px) { .faq__list-item { padding: 0 2rem; } } .faq__list-item--active .faq__expand--plus { display: none; } .faq__list-item--active .faq__expand--minus { display: block; } .faq__list-item--active .faq__button { margin-bottom: 1rem; } .faq__list-item--active .faq__button span { color: #040474 !important; } .faq__list-item--active .faq__content { max-height: 100rem; padding-bottom: 2rem; font-weight: 500; } @media screen and (min-width: 1024px) { .faq__list-item--active .faq__content { padding-top: 1.2rem; padding-bottom: 3rem; } } .faq__button { background-color: transparent; border: none; padding: 0; text-align: left; position: relative; font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; margin-bottom: 2rem; margin-top: 2rem; width: 100%; padding-right: 4rem; } .faq__button span { color: #040474 !important; } .faq__expand { width: 3rem; height: 3rem; -o-object-fit: contain; object-fit: contain; position: absolute; right: 0; top: calc(50% - 1.5rem); } .faq__expand--minus { display: none; } .faq__content { max-height: 0; overflow: hidden; padding-bottom: 0; -webkit-transition: max-height .2s; -o-transition: max-height .2s; transition: max-height .2s; -webkit-transition: padding .2s; -o-transition: padding .2s; transition: padding .2s; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.01em; } @media screen and (min-width: 1024px) { .faq__content { padding-right: 3rem; } } .results__container { padding-top: 10.2rem; padding-bottom: 2.5rem; text-align: center; } @media screen and (min-width: 1024px) { .results__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; text-align: left; padding-bottom: 1.7rem; } } .results__container--pb { padding-bottom: 10rem; } @media screen and (min-width: 1024px) { .results__content { padding-left: 10rem; padding-top: 5.5rem; } } .results__title { margin-bottom: 4rem; } @media screen and (min-width: 1024px) { .results__title { margin-bottom: 1.5rem; } } .results__desc { font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; } @media screen and (min-width: 1024px) { .results__desc { letter-spacing: 0.02em; } } .results__slider-container { margin-top: 4rem; } @media screen and (min-width: 1024px) { .results__slider-container { margin-top: -2rem; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } .results__image-wrapper { position: relative; width: 27rem; height: 27rem; margin: 0 auto; } @media screen and (min-width: 1024px) { .results__image-wrapper { width: 20rem; height: 20rem; opacity: 0.4; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin: 0; } } .results__picture { height: 100%; width: 100%; position: absolute; top: 0; right: 0; } .results__picture--after { width: 50%; height: 100%; overflow: hidden; } .results__divider { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 3; } .results__divider::before { content: ''; position: absolute; display: block; height: 100%; width: 0.1rem; background-color: #FEF8F5; top: 0; left: 0; z-index: 5; } .results__divider:after { content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 5.8rem; height: 5.8rem; background-size: contain; z-index: 5; } .results__range { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; } .results__image { position: absolute; top: 0; right: 0; height: 27rem; width: 27rem; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media screen and (min-width: 1024px) { .results__image { width: 20rem; height: 20rem; } } .results__arrow { border: none; background-color: transparent; margin-top: 3rem; padding: 0 2rem; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .results__arrow.swiper-button-disabled { opacity: 0.5; } @media screen and (min-width: 1024px) { .results__arrow { display: none; } } .results__pagination { margin-top: 1.5rem; display: none; } @media screen and (min-width: 1024px) { .results__pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .results__pagination .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; border: 1px solid #040474; background-color: transparent; opacity: 1; margin: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; cursor: pointer; } .results__pagination .swiper-pagination-bullet-active { background-color: #040474; } @media screen and (min-width: 1024px) { .results .swiper-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 37.2rem; } } @media screen and (min-width: 1024px) { .results .swiper-slide-active .results__image-wrapper, .results .swiper-slide-active .results__image { width: 33rem; height: 33rem; opacity: 1; z-index: 2; margin-top: 0; } } @media screen and (min-width: 1024px) { .results .swiper-slide-active .results__image-wrapper { margin:auto } } .diff { padding-top: 0; padding-bottom: 7rem; background-color: #FEF8F5; overflow: hidden; } @media screen and (min-width: 1024px) { .diff { padding-top: 0; padding-bottom: 10rem; } } .diff__title { display: none; } @media screen and (min-width: 1024px) { .diff__title { display: block; max-width: 40rem; margin-bottom: 4rem; letter-spacing: 0; } } .diff__title--mob { text-align: center; margin-bottom: 7rem; display: block; } @media screen and (min-width: 1024px) { .diff__title--mob { display: none; } } .diff__container { padding-top: 7rem; } @media screen and (min-width: 1024px) { .diff__container { padding-top: 5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 1024px) { .diff__graph { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .diff__content { font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; text-align: center; } @media screen and (min-width: 1024px) { .diff__content { text-align: left; padding-top: 1rem; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } } .diff__copy { text-align: left; margin-bottom: 5rem; max-width: 48rem; } .diff .hidden { display: none; } .login { padding-top: 4.5rem; padding-bottom: 5.5rem; } .login .hidden { display: none; } @media screen and (min-width: 1024px) { .login { padding-top: 6.5rem; padding-bottom: 7.5rem; } } .login__title { text-align: center; margin-bottom: -2rem; } @media screen and (min-width: 1024px) { .login__title { font-size: 4rem; line-height: 1.3; margin-bottom: -0.5rem; } } .login__content { text-align: center; margin-top: 2.5rem; } .login__forgot { display: block; margin-bottom: 1.5rem; } .login__message { text-align: center; margin-top: 3rem; margin-bottom: 3rem; font-size: 2rem; } .login__message--no-mb { margin-bottom: 0; } .login__button { text-align: center; } .login .contact__form { max-width: 46rem; } .forgot-pass--show { display: block; } .forgot-pass > * { width: 100%; margin: 0 auto; } @media screen and (min-width: 768px) { .forgot-pass > * { max-width: 45rem; } } @media screen and (min-width: 1024px) { .forgot-pass > * { max-width: 56.2rem; } } .forgot-pass__cancel { cursor: pointer; font-size: 1.8rem; text-decoration: underline; background: transparent; border: none; padding: 0; margin-top: 4rem; } @media screen and (min-width: 1024px) { .forgot-pass__cancel { margin-top: 5rem; } } .c-radio-custom { position: relative; } .c-radio-custom:not(:last-child) { margin-bottom: 1rem; } .c-radio-custom.active .c-radio-custom__circle:after { visibility: visible; opacity: 1; } .c-radio-custom.active .c-radio-custom__text { font-weight: bold; } .c-radio-custom.active .c-radio-custom-list { display: block; } .c-radio-custom-wrapper { margin-bottom: 3rem; } .c-radio-custom__trigger { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; background-color: transparent; border: none; outline: none; padding: 0; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .c-radio-custom__circle { position: relative; 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: 14px; height: 14px; border: 2px solid #040474; border-radius: 50%; margin-right: 1rem; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .c-radio-custom__circle:after { content: ''; width: 6px; height: 6px; background-color: #040474; border-radius: 50%; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); visibility: hidden; opacity: 0; } .c-radio-custom__text { font-size: 1.6rem; line-height: 2.6rem; text-align: left; letter-spacing: 0.05em; color: #040474; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .c-radio-custom-list { display: none; padding-left: 2.5rem; } @media screen and (min-width: 1024px) { .c-radio-custom-list { position: absolute; top: 0; right: 0; max-width: 25rem; } } .c-list__item { display: grid; grid-template-columns: 1.3rem 100%; grid-gap: 1rem; text-align: left; font-size: 1.4rem; line-height: 2.2rem; letter-spacing: 0.05em; color: #040474; } .c-list__item:not(:last-child) { margin-bottom: .5rem; } .c-list svg { width: 1.3rem; height: 1.3rem; margin-right: 1rem; margin-top: .5rem; } .c-counter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .c-counter__trigger { background-color: transparent; border: none; outline: none; padding: 0; width: 3.4rem; height: 3.4rem; -webkit-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .c-counter__trigger:disabled { opacity: .5; cursor: not-allowed; } .c-counter__value { font-size: 2rem; line-height: 3.6rem; font-weight: bold; letter-spacing: 0.05em; 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: 5rem; color: #040474; } .static { padding-top: 4.5rem; padding-bottom: 5rem; overflow: hidden; } @media screen and (min-width: 1024px) { .static { padding-top: 7rem; padding-bottom: 10rem; } } .static__title { text-align: center; margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .static__title { font-size: 4rem; } } .static__subtitle { text-align: center; font-size: 2rem; line-height: 1.8; letter-spacing: 0.05em; } .static__richtext { max-width: 70rem; margin: 5rem auto 0; font-size: 1.6rem; line-height: 1.62; } @media screen and (min-width: 1024px) { .static__richtext { margin-top: 9rem; } } .static__richtext > * + * { margin-top: 3rem; } .static__richtext h1 { font-size: 3.6rem; } @media screen and (min-width: 1024px) { .static__richtext h1 { font-size: 4rem; } } .static__richtext h2 { font-size: 3.2rem; } @media screen and (min-width: 1024px) { .static__richtext h2 { font-size: 3.6rem; } } .static__richtext h3 { font-size: 2.8rem; } @media screen and (min-width: 1024px) { .static__richtext h3 { font-size: 3.2rem; } } .static__richtext h4 { font-size: 2.4rem; } @media screen and (min-width: 1024px) { .static__richtext h4 { font-size: 2.8rem; } } .static__richtext h5 { font-size: 2rem; } @media screen and (min-width: 1024px) { .static__richtext h5 { font-size: 2.4rem; } } .static__richtext h6 { font-size: 1.6rem; } @media screen and (min-width: 1024px) { .static__richtext h6 { font-size: 2rem; } } .static__richtext strong { font-weight: bold; } .static__richtext em { color: #FD7923; } .static__richtext a { color: #7D20F3; text-decoration: underline; } .static__richtext table { max-width: 100%; } .static__richtext ol { padding-left: 2rem; } .static__richtext ol li { list-style-type: none; counter-increment: item; text-indent: -2rem; } .static__richtext ol li::before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } .static__richtext ol li ol li { list-style-type: lower-alpha; } .static__richtext ol li ol li::before { display: none; } .static__richtext ul li { list-style-type: none; position: relative; padding-left: 1.5rem; } .static__richtext ul li::before { content: ''; width: 0.5rem; height: 0.5rem; position: absolute; top: 1rem; left: 0; border-radius: 50%; background-color: #A1A9FC; } .static__richtext ul li ul li::before { opacity: 0.6; } .science-tabs { padding: 6rem 0 6rem 0; } @media screen and (min-width: 1024px) { .science-tabs { padding: 9.5rem 0 8rem 0; } } .science-tabs .centered-text { margin-bottom: 4.5rem !important; } .science-tabs__slider { margin: 0 -2rem; } @media screen and (min-width: 1024px) { .science-tabs__slider { margin: 0; } } @media screen and (min-width: 1024px) { .science-tabs .swiper-slide { -ms-flex-negative: 1; flex-shrink: 1; } } .science-tabs__tabs { margin-bottom: 6rem; } @media screen and (min-width: 1024px) { .science-tabs__tabs { width: 81%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; margin: 0 auto 5rem auto; } } .science-tabs__tab-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; } .science-tabs__tab-container.active { color: #7D20F3; } .science-tabs__tab-container:hover { color: #7D20F3; } .science-tabs__tab-container::after { content: ''; position: absolute; width: 22.5rem; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); height: 5px; bottom: -2rem; border-radius: 2.3rem; background-color: #7D20F3; -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; transition: -webkit-transform 0.25s ease-out; -webkit-transition: -webkit-transform 0.25s ease-out; -o-transition: transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; } .science-tabs__tab-container:hover::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; } .science-tabs__tab-container.active::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); width: 13.8rem; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } @media screen and (min-width: 768px) { .science-tabs__tab-container.active::after { width: 22.5rem; } } .science-tabs__tab-title { font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-size: 2rem; line-height: 3.6rem; letter-spacing: 0.05em; } .science-tabs__tab-text { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; } .science-tabs__tabs-body { background-color: #FEF8F5; margin: 0 auto; padding: 2.5rem 3rem 2.5rem; } @media screen and (min-width: 1024px) { .science-tabs__tabs-body { width: 102.6rem; } } .science-tabs__panel { display: none; grid-column-gap: 3.3rem; grid-template-columns: repeat(1, 1fr); } @media screen and (min-width: 768px) { .science-tabs__panel { grid-template-columns: repeat(3, 1fr); grid-row-gap: 3rem; } } .science-tabs__panel.active { display: grid; } .science-tabs__tab-text { font-size: 1.6rem; line-height: 2.4rem; color: #040474; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; text-decoration: none; letter-spacing: 0; margin-bottom: 2rem; } @media screen and (min-width: 768px) { .science-tabs__tab-text { margin-bottom: 0; } } .science-tabs__tab-text:last-child { margin-bottom: 0; } .science-tabs__tab-text a:hover { text-decoration: underline; color: #7D20F3; } .science-tabs__tab-text a { text-decoration: none; } .the-cart__row--header { display: none; } .the-cart__product-image { width: 6rem; height: 6rem; -o-object-fit: contain; object-fit: contain; } .the-cart__product-name { font-size: 1.6rem; font-weight: bold; } .the-cart__subs { font-size: 1.4rem; color: #FEF8F5; background-color: #040474; padding: 0.4rem 1rem; border-radius: 0.5rem; display: inline-block; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -20; opacity: 0; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; visibility: hidden; } .modal--open { visibility: visible; opacity: 1; z-index: 99999999999999999999; } @media screen and (min-width: 768px) { .modal { 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; background-color: rgba(51, 47, 83, 0.4); } } .modal__modal { position: relative; 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: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; background-color: #fff; padding: 2rem; width: 100%; max-width: 60rem; font-size: 1.6rem; line-height: 2.6rem; } @media screen and (min-width: 768px) { .modal__modal { height: auto; padding: 6rem; border-radius: 0.5rem; } } .modal__modal--info { background-color: #FFF; max-width: 52.9rem; } .modal__modal--info p { margin-top: 2rem; } .modal__modal--info .modal__list--checked > * + * { margin-top: 1rem; } .modal__modal--info .modal__list { margin-bottom: 0; } @media screen and (min-width: 768px) { .modal__modal--info { padding: 2.5rem 4rem; } .modal__modal--info h3 { text-align: left; width: 100%; margin-top: 0; } } .modal__modal--info > * + * { margin-top: 2.6rem; } .modal__modal--info.delivery { padding-top: 2.5rem; } .modal__modal--info.delivery p { margin-top: 1rem; } .modal__modal--info.delivery h3 { padding-right: 3rem; } .modal__modal--info.delivery .freq__cell { padding: 1rem 0.5rem; font-size: 1.4rem; letter-spacing: 0.05em; } .modal__modal--table { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; font-size: 1.4rem; line-height: 1.57; overflow-y: scroll; max-height: 100vh; } .modal__modal--with-img { text-align: center; } @media screen and (min-width: 768px) { .modal__modal--with-img { padding: 15rem 6.8rem 6rem; } } .modal__modal--narrow { max-width: 43.7rem; } @media screen and (min-width: 768px) { .modal__modal--narrow { padding: 4rem; } } .modal__dropdown { width: 100%; margin-bottom: 5rem; } @media screen and (min-width: 768px) { .modal__dropdown { margin-bottom: 4rem; } } .modal__close { position: absolute; top: 1.8rem; right: 2.2rem; width: 1.5rem; background-color: transparent; padding: 0; cursor: pointer; border: none; } .modal__title { font-size: 2.4rem; line-height: 1.25; letter-spacing: 0.02em; font-family: "Neue Haas Grotesk Display Pro", sans-serif; margin-bottom: 4rem; font-weight: 300; } @media screen and (min-width: 768px) { .modal__title { margin-bottom: 3rem; } } .modal__underlined { margin-top: 3rem; color: #7D20F3; } @media screen and (min-width: 768px) { .modal__underlined { margin-top: 2rem; } } .modal__list { margin-bottom: 3rem; } .modal__list--checked { margin-right: auto; } .modal__list--checked > * + * { margin-top: 1.5rem; } .modal__list-item { list-style-type: none; position: relative; padding-left: 1.5rem; font-size: 1.6rem; line-height: 1.62; } .modal__list-item::before { content: ''; width: 0.5rem; height: 0.5rem; position: absolute; top: 1rem; left: 0; border-radius: 50%; background-color: #A1A9FC; } .modal__list-item--check { padding-left: 2rem; } .modal__list-item--check::before { width: 1.3rem; height: 0.9rem; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: transparent; border-radius: none; } .modal__country-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .modal__country-item { -webkit-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; margin-top: 3rem; text-align: center; } .modal__country-item:nth-child(1), .modal__country-item:nth-child(2), .modal__country-item:nth-child(3) { margin-top: 0; } .modal__country-button { background-color: transparent; padding: 0.5rem 1rem; border-radius: 5rem; cursor: pointer; border: none; font-size: 1.6rem; line-height: 1.9rem; letter-spacing: 0.1em; } .modal__country-button--active { background-color: #D6D9FC; } .modal__floating-img-wrapper { display: block; } @media screen and (min-width: 768px) { .modal__floating-img-wrapper { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 22rem; height: 22rem; display: block; } } .modal__floating-img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .modal__subtitle { font-size: 1.4rem; color: #7D20F3; } .modal__table { width: 100%; font-size: 1.6rem; } .modal__table--bb { border-bottom: 1px solid #A1A9FC; margin-bottom: 1.5rem; } .modal__row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.5rem; line-height: 1; } .modal__row--header { font-size: 1.4rem; line-height: 1.57; border-bottom: 1px solid #A1A9FC; padding-bottom: 1.5rem; } .modal__row--header .modal__cell--serving { font-weight: normal; } .modal__row--footer { border-top: 1px solid #A1A9FC; padding-top: 1.5rem; } .modal__cell--serving { font-weight: bold; -webkit-box-flex: 0; -ms-flex: 0 0 15.3rem; flex: 0 0 15.3rem; } @media screen and (min-width: 768px) { .modal__cell--serving { -webkit-box-flex: 0; -ms-flex: 0 0 17.7rem; flex: 0 0 17.7rem; } } .modal__cell--amount { -webkit-box-flex: 0; -ms-flex: 0 0 7.7rem; flex: 0 0 7.7rem; margin-left: 3.1rem; margin-right: auto; text-align: right; } @media screen and (min-width: 768px) { .modal__cell--amount { text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 14.2rem; flex: 0 0 14.2rem; } } .modal__cell--percent { text-align: right; } .modal__table-disclaimer { margin-bottom: 2rem; } .global-cart { position: fixed; top: 0; right: 0; z-index: 99999; width: 100%; height: 100%; pointer-events: none; visibility: hidden; -webkit-transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart .button--cart { margin-right: 2rem !important; } .global-cart .close { position: absolute; top: 1.6rem; right: 1.6rem; } .global-cart.active { pointer-events: all; visibility: visible; z-index: 999999999; } .global-cart.active .global-cart__overlay { cursor: pointer; opacity: 1; visibility: visible; background-color: rgba(0, 0, 0, 0.7); } .global-cart.active .global-cart__drawer { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .global-cart.active .global-cart__drawer h3 { margin-top: 1rem; text-align: center; font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-size: 2.4rem; letter-spacing: 0.02em; } .global-cart__overlay { position: absolute; top: 0rem; right: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1) visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer { position: absolute; top: 0; right: 0; width: 100%; height: 100%; max-width: 100%; -webkit-transform: translateX(110%); -ms-transform: translateX(110%); transform: translateX(110%); transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: #fff; z-index: 99999999909999999999999; } @media screen and (min-width: 768px) { .global-cart__drawer { max-width: 45rem; min-width: 37.5rem; } } .global-cart__drawer__header { padding: 6px 8px 6px 20px; } .global-cart__drawer__header .heading { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .global-cart__drawer__error-bar { height: 0; text-align: center; border-bottom: solid 0 rgba(0, 0, 0, 0.1); -webkit-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__error-bar.active { height: 61px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); } @media screen and (min-width: 768px) { .global-cart__drawer__error-bar.active { height: 91px; } } .global-cart__drawer__item-list { position: relative; padding-top: 2rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 0; overflow-y: scroll; list-style: none; max-height: 100vh; /* Fallback for browsers that do not support Custom Properties */ max-height: calc((1vh * 100) - 16rem); max-height: calc((var(--vh, 1vh) * 100) - 16rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .global-cart__drawer__item-list.has-items { max-height: calc((1vh * 100) - 20rem); max-height: calc((var(--vh, 1vh) * 100) - 20rem); } .global-cart__drawer__item-list .item { position: relative; -ms-flex-negative: 0; flex-shrink: 0; padding: 1rem; border-bottom: solid 1px rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__item-list .item::after { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; background-color: rgba(255, 255, 255, 0.5); content: ""; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); -o-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .global-cart__drawer__item-list .item.loading::after { pointer-events: all; opacity: 1; visibility: visible; } .global-cart__drawer__item-list .item.hidden { opacity: 0; } .global-cart__drawer__item-list .item__image-wrap { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 6rem; height: 6rem; -o-object-fit: contain; object-fit: contain; margin-right: 1rem; } .global-cart__drawer__item-list .item__image-wrap img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .global-cart__drawer__item-list .item__info-wrap { width: 100%; } .global-cart__drawer__item-list .item__info-wrap .title { margin: 15px 0 5px; } .global-cart__drawer__item-list .item__info-wrap .option { margin: 0 0 5px; } .global-cart__drawer__item-list .item__info-wrap .bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: auto; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px; border: solid 1px rgba(0, 0, 0, 0.2); } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec, .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .inc { 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: 18px; height: 18px; padding: 0; cursor: pointer; background: transparent; border: 0; display: flex; align-items: center; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec svg, .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .inc svg { width: 18px; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .dec { padding-bottom: 0.5rem; } .global-cart__drawer__item-list .item__info-wrap .bottom .qty-adjust-wrap .qty { text-align: center; } .global-cart__drawer__item-list .item__info-wrap .bottom .price-wrap .orig-price { text-decoration: line-through; } .global-cart__drawer__item-list .empty-msg { padding: 20px; text-align: center; margin-top: 8rem; margin-bottom: 7rem; font-size: 2rem; } @media screen and (min-width: 768px) { .global-cart__drawer__item-list .empty-msg { padding: 35px 20px; } } .global-cart__drawer__footer { position: relative; padding: 0; text-align: center; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 0; width: 100%; } .global-cart__drawer__footer .shipping-msg { font-size: 1.4rem; margin: 1.1rem 0 1.1rem; } .global-cart__drawer__footer .checkout-link { margin: 0 auto; } .global-cart .subtotal-wrapper { background-color: #D6D9FC; padding: 2rem; } .global-cart .subtotal-title { font-weight: bold; font-family: "Neue Haas Grotesk Display Pro", sans-serif; margin-bottom: 2rem; } .global-cart .cart-list-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.2rem 2rem 2.8rem; } @media screen and (min-width: 1024px) { .global-cart .cart-list-item { padding-top: 1.8rem; padding-bottom: 1.6rem; } } .wl-item-info { width: 70%; } .wl-item-info .item-title { text-decoration: none; font-weight: bold; margin-bottom: 2rem; display: inline-block; } .wl-item-info .item-price { font-weight: bold; position: absolute; bottom: 2.8rem; right: 2rem; } .wl-item-info span { margin-right: 1rem; } .wl-item-info .empty { right: 2rem; top: 2rem; position: absolute; cursor: pointer; } .wl-item-info .empty img { width: 1.5rem; height: 1.5rem; -o-object-fit: contain; object-fit: contain; } .wl-item-info .qty { margin-right: 0; } .wl-item-info .quantity { -ms-flex-item-align: start; align-self: flex-start; margin-top: auto; border: 1px solid #000; margin-top: .5rem; 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; width: 6.3rem; height: 2.6rem; border-radius: 0.5rem; padding-right: 0.3rem; padding-left: 0.5rem; } .wl-item-info .quantity button { position: relative; display: inline-block; padding: 0; text-decoration: none; cursor: pointer; background-color: rgba(6, 34, 51, 0); border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: .8rem; vertical-align: middle; /* height: 25px; */ width: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .continue-shopping-link { display: block; margin-top: 1rem; color: #7D20F3; } .cart-counter { background: transparent; position: absolute; font-size: 0.6rem; display: block; position: absolute; top: .34rem; left: 0px; font-size: .5rem; letter-spacing: -0.2px; width: 100%; } .might-like { font-size: 1.4rem; width: 100%; text-align: left; padding: 2rem; margin-top: auto; } .might-like__list { margin-top: 0.5rem; } @media screen and (min-width: 1024px) { .might-like__list { margin-top: 1rem; } } .might-like__list-item { background-color: #FEF8F5; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .might-like__image { width: 6rem; height: 6rem; -o-object-fit: contain; object-fit: contain; margin-right: 2rem; } .might-like__details { font-size: 1.6rem; margin-right: auto; } .might-like__details > * + * { margin-top: 1.5rem; } .cart-subscribe-to-save { color: #FEF8F5; background-color: #040474; font-size: 1.4rem; letter-spacing: 0.05em; border-radius: 0.5rem; display: block; margin-top: -1rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 0.2rem 0.5rem; margin-bottom: 1rem; } .every-month { position: relative; display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: 1rem; font-size: 1.4rem; letter-spacing: 0.05em; color: #A1A9FC; padding-left: 1.5rem; } .every-month::before { content: ''; background-image: url("https://cdn.shopify.com/s/files/1/0533/9509/5750/files/recycle.svg?v=1636981027"); position: absolute; top: 0.3rem; left: 0; width: 1.1rem; height: 1.1rem; background-size: contain; background-repeat: no-repeat; background-position: center; } .c-benefit-card { width: 33.5rem; padding: 1.2rem 2rem 1rem 2rem; background-color: #FEF8F5; border-radius: 0.5rem; } @media screen and (min-width: 768px) { .c-benefit-card { width: 58rem; padding: 3rem 2.5rem 4rem 5rem; background-color: #FEF8F5; border-radius: 0.5rem; } } .c-benefit-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: none !important; } .c-benefit-card__title { font-size: 2.4rem; line-height: 3rem; } .c-benefit-card__image { display: none; } @media screen and (min-width: 768px) { .c-benefit-card__image { width: 6rem; display: block; margin-left: auto; } } .c-benefit-card__button { border: 1px solid black; width: 3rem; height: 3rem; border-radius: 50%; position: relative; } @media screen and (min-width: 768px) { .c-benefit-card__button { display: none; } } .c-benefit-card__button-line { width: 17px; height: 2px; color: black; background-color: black; border: 1px solid black; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } .c-benefit-card__button-line.active { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-benefit-card__button-line-2 { width: 17px; height: 2px; color: black; background-color: black; border: 1px solid black; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .c-benefit-card__body { display: none; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } @media screen and (min-width: 768px) { .c-benefit-card__body { display: block; padding: 0; width: 41.4rem; } } .c-benefit-card__body.active { display: block; padding: 2rem 0 1rem 0; } @media screen and (min-width: 768px) { .c-benefit-card__body.active { width: 41.4rem; padding: 0; } } .c-benefit-card__text { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; } .more { background-color: #FEF8F5; text-align: center; position: relative; padding: 6rem 0 8rem; overflow: hidden; } .more__title { font-size: 4rem; margin-bottom: 3.5rem; letter-spacing: 0.02em; } @media screen and (min-width: 1024px) { .more__title { font-size: 6rem; } } .more__thread-left { position: absolute; top: 29%; right: 81%; } @media screen and (min-width: 1024px) { .more__thread-left { top: 18rem; left: 0rem; right: auto; width: auto; } } .more__thread-right { position: absolute; top: 29%; left: 80%; } @media screen and (min-width: 1024px) { .more__thread-right { top: 18rem; left: auto; right: 0; width: auto; } } .slideout-panel { overflow-x: hidden; } .recharge-te { padding-top: 10rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif; background-color: white !important; padding-bottom: 5rem; color: #040474; --theme-prima-text-color: $dark; --theme-prima-color-middle-grey: $violet; } @media screen and (min-width: 1024px) { .recharge-te { min-height: calc(100vh - 36rem - 7rem); } } .recharge-te * { font-family: "Neue Haas Grotesk Display Pro", sans-serif !important; } .recharge-te h1, .recharge-te h2, .recharge-te h4, .recharge-te h5, .recharge-te h6 { font-family: "Neue Haas Grotesk Display Pro", sans-serif !important; } .recharge-te h3 strong { font-family: "Neue Haas Grotesk Display Pro", sans-serif !important; } .recharge-te .rct_card { -webkit-box-shadow: none; box-shadow: none; background-color: #FEF8F5; margin-bottom: 3rem; } .recharge-te .rct_billing-info__title { color: #A1A9FC; } .recharge-te section.rct_content { padding-top: 3rem; } .recharge-te div.rct_navigation__mobile { background-color: #FEF8F5; -webkit-box-shadow: none; box-shadow: none; font-family: "Neue Haas Grotesk Display Pro", sans-serif; } .recharge-te div.rct_choices { background-color: #FEF8F5; } .recharge-te div.rct_choices__inner { background-color: #FEF8F5; } .recharge-te div.rct_choices__list { background-color: #FEF8F5; } .recharge-te div.rct_choices__list .rct_choices__item { background-color: #FEF8F5; } .recharge-te .rct_content-header__title { margin-top: 2rem; margin-bottom: 1rem; } .recharge-te .rct_card--charge-summary { margin-top: 2rem; } .recharge-te .rct_card .rct_choices { font-size: 1.6rem; letter-spacing: 0.05em; border-radius: 0.5rem; outline: none; color: #040474; background-color: #fff; } .recharge-te .rct_card .rct_choices__item { font-size: 1.6rem; letter-spacing: 0.05em; } .recharge-te .rct_card .rct_choices .rct_choices__inner { background-color: #fff; } .recharge-te .rct_card .rct_choices .rct_choices__list { background-color: #fff; } .recharge-te .rct_card .rct_choices .rct_choices__list .rct_choices__item { background-color: #fff; } .recharge-te .rct_card .rct_choices.is-focused { background-color: #FEF8F5; } .recharge-te .rct_card .rct_choices.is-focused .rct_choices__inner { border: 1px solid #A1A9FC; background-color: #FEF8F5; } .recharge-te .rct_card .rct_choices.is-focused .rct_choices__inner { background-color: #FEF8F5; } .recharge-te .rct_card .rct_choices.is-focused .rct_choices__list { background-color: #FEF8F5; } .recharge-te .rct_card .rct_choices.is-focused .rct_choices__list .rct_choices__item { background-color: #FEF8F5; } .recharge-te .rct_card .rct_choices__inner { background-color: white; border: 1px solid #040474; } .recharge-te .rct_order__total, .recharge-te .rct_card__label, .recharge-te .rct_return-link { color: #A1A9FC !important; } .recharge-te .rct_product__info { letter-spacing: 0.05em; } .recharge-te .rct_product__info strong { font-size: 1.6rem; line-height: 2.2rem; } .recharge-te .rct_product__image__container img { width: 6rem; height: 6rem; } .recharge-te .rct_home__section + .rct_home__section { margin-top: 5rem; } .recharge-te .rct_delivery-schedule__address-group__title { color: #A1A9FC; } .recharge-te .rct_delivery-schedule__date-group { margin-top: 1rem; } .recharge-te .rct_text--small, .recharge-te .rct_order__number { font-size: 1.4rem; color: #040474; line-height: 2rem; } .recharge-te .recharge-te div.rct_choices__list .rct_choices__item { color: #040474; } .recharge-te input, .recharge-te textarea { display: block; width: 100%; font-size: 1.6rem; line-height: 1.62; letter-spacing: 0.05em; padding: 1.2rem 1.6rem; border: 1px solid #040474; border-radius: 0.5rem; outline: none; color: #040474; } .recharge-te input::-webkit-input-placeholder, .recharge-te textarea::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .recharge-te input::-moz-placeholder, .recharge-te textarea::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .recharge-te input::-ms-input-placeholder, .recharge-te textarea::-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .recharge-te input:-ms-input-placeholder, .recharge-te textarea:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .recharge-te input::placeholder, .recharge-te textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #040474; opacity: 1; /* Firefox */ } .recharge-te input:-ms-input-placeholder, .recharge-te textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #040474; } .recharge-te input::-ms-input-placeholder, .recharge-te textarea::-ms-input-placeholder { /* Microsoft Edge */ color: #040474; } .recharge-te input:focus, .recharge-te textarea:focus { background-color: #FEF8F5; border-color: #A1A9FC; border-width: 2px; } @media screen and (min-width: 1024px) { .recharge-te .rct_navigation { position: absolute; top: 17rem; left: 12rem; height: 26.3rem; background-color: #FEF8F5; border: none; padding: 3rem; } .recharge-te .rct_navigation__desktop { -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; } .recharge-te .rct_navigation__desktop > * + * { margin-top: 2rem; } .recharge-te .rct_navigation .rct_navigation__item__link { padding: 0; font-size: 1.6rem; line-height: 1; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .recharge-te .rct_navigation .rct_navigation__item__link:hover { color: #A1A9FC; } .recharge-te .rct_navigation .rct_navigation__item__link--active { color: #7D20F3; } } .recharge-te .rct_form__radio { width: auto; } .recharge-te .rct_form__group--radio { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .recharge-te .rct_notice { background-color: #fff !important; line-height: 1.4 !important; border: 1px solid #A1A9FC; } .rct_sidebar { --theme-prima-font-family: $ff-copy; --theme-prima-text-color: $dark; --theme-prima-color-middle-grey: $violet; } .rct_sidebar * { color: #040474; } .rct_sidebar .rct_datepicker .is-selected .pika-button { background-color: #040474; } .rct_sidebar .pika-button.pika-day { color: #040474; } a.rct_button--primary, button.rct_button--primary { min-height: 4.9rem; min-width: 19.9rem; border-radius: 7.5rem; padding: 1.5rem 4rem; font-size: 1.6rem; line-height: 1.9rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif !important; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; color: white !important; background-color: #7D20F3 !important; border: 1px solid #7D20F3 !important; } @media screen and (min-width: 768px) { a.rct_button--primary, button.rct_button--primary { padding: 1.5rem 5rem; } } a.rct_button--primary:hover, a.rct_button--primary:active, button.rct_button--primary:hover, button.rct_button--primary:active { color: white !important; background-color: #040474 !important; border: 1px solid #040474 !important; } a.rct_button--secondary, button.rct_button--secondary { min-height: 4.9rem; min-width: 19.9rem; border-radius: 7.5rem; padding: 1.5rem 4rem; font-size: 1.6rem !important; line-height: 1.9rem !important; font-family: "Neue Haas Grotesk Display Pro", sans-serif !important; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transition: .2s; -o-transition: .2s; transition: .2s; border: 2px solid #A1A9FC !important; color: #A1A9FC !important; background-color: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a.rct_button--secondary:hover, button.rct_button--secondary:hover { border-color: #040474 !important; color: #040474 !important; background-color: transparent !important; } a.rct_button--secondary:active, button.rct_button--secondary:active { background-color: transparent !important; border-color: #7D20F3 !important; color: #7D20F3 !important; } button.rct_button--link { font-weight: 500; letter-spacing: 0.05em; cursor: pointer; color: #040474; } .subscription-info { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1rem; max-width: 135rem; padding-top: 3rem; padding-bottom: 2.5rem; } @media screen and (min-width: 1024px) { .subscription-info { grid-template-columns: repeat(4, 1fr); padding-top: 2rem; padding-bottom: 2rem; } } .subscription-info__column { text-align: center; } .subscription-info__icon { width: 5rem; margin: 0 auto; } .subscription-info__text { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; margin-top: -.5rem; } .subscription-banner { padding: 4.5rem 0 6rem; 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; } @media screen and (min-width: 1024px) { .subscription-banner { padding: 7.5rem 0 8.5rem; } } .subscription-banner__content-title { text-align: center; } .subscription-banner__content-title h3 { color: white; font-size: 4rem; line-height: 5.2rem; margin-bottom: 2.5rem; letter-spacing: normal; letter-spacing: initial; } .subscription-banner__content .button { min-width: 26rem; } .c-goal-card { background-color: #fff; margin: 0 auto; width: 33.5rem; padding: 3.8rem 2.1rem 2.8rem; border-radius: .5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .c-goal-card { width: 100%; padding: 3.8rem 4rem 2.8rem; } } .c-goal-card__text { font-size: 2rem; line-height: 3.6rem; text-align: center; letter-spacing: 0.05em; color: #040474; } @media screen and (max-width: 768px) { .c-goal-card, .c-benefit-card { width: 100%; } } /*** BOOTSTRAP COMMONN CLASSES .position-absolute .position-relative .d-flex .d-block .align-items-center (centrira sve elemente unutar flexa po centralnoj liniji) .justif-content-between (pravi razmak izmedju svih elemenata unutar flexa. Ako stavis sirinu u removima, margine ce se same namestiti) .text-center (centrira text) .text-left .text-left .text-md-center //mix za mobile i desktop media query setup je mobile first tako da pises u okviru svake klase i desk i mobile kao na primeru dole ***/ .lifo-cart { padding: 2.2rem 0 0; } @media screen and (min-width: 1024px) { .lifo-cart { padding: 7rem 19rem; min-height: 63vh; } } .lifo-cart .lifo-list { padding: 2rem; list-style: none; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-list { padding-top: 0; padding-right: 5rem; padding-left: 4rem; } } .lifo-cart .lifo-list li { margin-bottom: 1.5rem; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-list li { margin-bottom: 0; } } .lifo-cart .lifo-img { width: 6rem; height: 6rem; margin-right: 2rem; -o-object-fit: contain; object-fit: contain; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-img { width: 8rem; height: 8rem; } } .lifo-cart .lifo-basket { position: absolute; top: 2rem; right: 0; cursor: pointer; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-basket { top: 5rem; right: -2rem; } } .lifo-cart .lifo-basket img { width: 1.5rem; height: 1.5rem; -o-object-fit: contain; object-fit: contain; } .lifo-cart .product-title { width: 90%; padding: 0; line-height: 1.2; font-weight: bold; text-decoration: none; display: inline-block; } @media screen and (min-width: 768px) { .lifo-cart .product-title { width: 50rem; max-width: 35.5rem; margin-right: 4.5rem; padding-top: 1rem; padding-bottom: 1rem; line-height: 1.2; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } } .lifo-cart .mobile-price { font-weight: bold; margin-bottom: 0.5rem; } .lifo-cart .lifo-option-name { text-align: left; } @media screen and (min-width: 768px) { .lifo-cart .lifo-option-name { text-transform: uppercase; color: #a8a795; padding-bottom: 1.4rem; } } .lifo-cart .pr-title { margin-bottom: 2.6rem; } .lifo-cart .item-price { position: absolute; bottom: 2rem; right: 0; } @media screen and (min-width: 1024px) { .lifo-cart .item-price { position: static; margin-left: 17rem; } } .lifo-cart .lifo-option-value { text-align: left; } .lifo-cart .lifo-qty { padding: 0 0.2rem; } @media screen and (min-width: 768px) { .lifo-cart .lifo-list .wl-list-options { width: 100%; } } .lifo-cart .lifo-list-item { padding: 2rem 0; border-bottom: 1px solid #F2F2F2; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-list-item { padding: 3rem 0; } .lifo-cart .lifo-list-item .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (min-width: 768px) { .lifo-cart .lifo-cart-wrap { width: 100%; } } .lifo-cart .lifo-summary { padding: 2rem; padding-bottom: 6rem; padding-top: 0; text-align: center; } @media screen and (min-width: 768px) { .lifo-cart .lifo-summary { color: #171717; width: 100%; max-width: 37.8rem; margin-left: auto; -ms-flex-item-align: end; align-self: flex-end; padding-bottom: 0; padding-top: 1.5rem; } } .lifo-cart .details-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 2.5rem; font-size: 1.6rem; display: none; } .lifo-cart .subtotal-wrapper { font-size: 1.6rem; font-weight: 500; text-align: center; padding-bottom: 2rem; padding-top: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .lifo-cart .cart-page-heading { font-size: 3rem; text-align: center; padding-bottom: 0; } @media screen and (min-width: 768px) { .lifo-cart .cart-page-heading { display: none; } } .lifo-cart .summary-heading { text-align: center; margin-bottom: 1.4rem; font-size: 2rem; font-weight: bold; } .lifo-cart .summary-msg { margin-bottom: 1.4rem; } .lifo-cart .lifo-line { padding-right: 1.2rem; } .lifo-cart .button-lifo { width: 100%; height: 2.1rem; letter-spacing: 0.4rem; border: none; margin-top: 0.5rem; } @media screen and (min-width: 768px) { .lifo-cart .button-lifo { width: 100%; height: 2.4rem; } } .lifo-cart .quantity { -ms-flex-item-align: start; align-self: flex-start; margin-top: auto; border: 1px solid #000; margin-top: 0.5rem; 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; width: 6.3rem; height: 2.6rem; border-radius: 0.5rem; padding-right: 0.3rem; padding-left: 0.5rem; font-weight: normal; } @media screen and (min-width: 1024px) { .lifo-cart .quantity { width: 5.3rem; margin-top: 0; margin-bottom: 1rem; height: 2rem; } } .lifo-cart .quantity button { position: relative; display: inline-block; padding: 0; text-decoration: none; cursor: pointer; background-color: rgba(6, 34, 51, 0); border: 0; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 0.8rem; vertical-align: middle; /* height: 25px; */ width: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .lifo-cart .quantity .dec { padding-bottom: 0.5rem; } .lifo-cart .lifo-list-heading-desk { display: none; } @media screen and (min-width: 1024px) { .lifo-cart .lifo-list-heading-desk { padding-left: 10rem; padding-bottom: 2rem; padding-top: 1rem; display: block; color: #818181; font-size: 1.4rem; border-bottom: 1px solid #F2F2F2; } } .lifo-cart .lifo-list-heading-product { width: 40rem; display: inline-block; } .lifo-cart .lifo-list-heading-qty { width: 22rem; display: inline-block; } .lifo-cart .empty-cart-message { text-align: center; margin: 8rem auto 10rem; width: 100%; } .lifo-cart .empty-msg { margin-bottom: 4rem; } .pc { min-width: 2.6rem; font-weight: bold; } .discount-price { text-decoration: line-through; } .social a { margin-right: 0.5rem; } #cart.hide { opacity: 0; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } #cart.hide.loaded { opacity: 1; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .page-about .better { padding-top: 4.5rem; padding-bottom: 2.4rem; } @media screen and (min-width: 1024px) { .page-about .better { padding-top: 8rem; padding-bottom: 3.4rem; } } .page-about .better__stamp { right: 0.3rem; bottom: 4.3rem; width: 9.7rem; height: 9.7rem; } @media screen and (min-width: 1024px) { .page-about .better__stamp { right: -9rem; bottom: 6rem; width: 12.7rem; height: 12.7rem; } } .page-about .better__small-picture { top: -0.2rem; right: -0.1rem; } @media screen and (min-width: 1024px) { .page-about .better__small-picture { right: -7.4rem; } } @media screen and (min-width: 1024px) { .page-about .better__pictures { margin: 6.5rem; margin-left: 3.7rem; } } @media screen and (min-width: 1024px) { .page-about .clean { margin-top: -7rem; } } @media screen and (min-width: 1024px) { .page-about .thread { margin-bottom: 5rem; } } .page-collections .three-products { padding-bottom: 5rem; } @media screen and (min-width: 1024px) { .page-collections .three-products { padding-top: 6.5rem; padding-bottom: 6rem; } } .page-collections .three-products__title { margin-top: 1.5rem; } .page-collections .three-products__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 1024px) { .page-collections .three-products__list { padding-top: 2rem; } } .page-collections .three-products .product-item__big-price { margin-bottom: 1rem; } .page-collections .four-products__grid { padding-bottom: 3.4rem; } .page-collections .four-products__grid .product-item__title { margin-top: 3.5rem; min-height: 4.4rem; } .page-collections .four-products__grid .product-item__picture--hover { padding: 0; } .four-products__grid-item .product-item--small .product-item__price-wrapper { margin-bottom: 3rem; } .four-products__grid-item .product-item__title { min-height: 4.4rem; margin-top: 3.5rem; } .fof { text-align: center; padding-top: 4.5rem; font-size: 1.6rem; letter-spacing: 0.05em; line-height: 2.6rem; overflow: hidden; position: relative; } @media screen and (min-width: 1024px) { .fof__container { text-align: left; max-width: 54rem; padding-top: 8rem; margin-bottom: 13.5rem; } } .fof__title { margin-bottom: 1.7rem; letter-spacing: 0; } @media screen and (min-width: 1024px) { .fof__title { letter-spacing: 0.02em; margin-left: 0.4rem; margin-bottom: 4.7rem; } } .fof__content { margin-bottom: 3rem; } @media screen and (min-width: 1024px) { .fof__content { padding-right: 3rem; margin-bottom: 4rem; } } .fof__img-desk { display: none; } @media screen and (min-width: 1024px) { .fof__img-desk { display: block; position: absolute; top: 6.5rem; right: -0.5rem; width: 82rem; } } .fof__img-mob { margin-top: 4rem; margin-left: 1rem; margin-bottom: 5rem; } @media screen and (min-width: 1024px) { .fof__img-mob { display: none; } } .fof .button { min-width: 23rem; } .b-article { padding: 0 2rem; margin: 10.5rem 0 6rem; } @media screen and (min-width: 768px) { .b-article { padding: 0; max-width: 70rem; margin: 15.5rem auto 5rem; } } .b-article .c-title { font-size: 2.4rem; margin-bottom: 1.5rem; line-height: 1.3; text-align: center; } @media screen and (min-width: 768px) { .b-article .c-title { font-size: 4rem; max-width: 80rem; margin-bottom: 2rem; text-align: center; } } .b-article__date { font-size: 2rem; margin-bottom: 6rem; display: block; text-align: center; line-height: 1.3; letter-spacing: 0.05em; } .b-article__media { max-width: 100%; margin: 0 auto 2.5rem; display: block; } @media screen and (min-width: 768px) { .b-article__media { max-width: 61rem; } } .b-article__media img { margin: 0 auto; border-radius: 5px; } .b-article p { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; } .b-blog-cards { background: #FAFAFA; padding-top: 4.25rem; padding-bottom: 10rem; } @media screen and (min-width: 768px) { .b-blog-cards { padding-bottom: 9rem; } } .b-blog-cards .l-container { max-width: 124rem; margin: 0 auto; padding: 0 2rem; } .b-blog-cards .related-title { font-size: 4rem; line-height: 1.3; margin-bottom: 4.5rem; text-align: center; } @media screen and (min-width: 768px) { .b-blog-cards .related-title { margin-bottom: 2.5rem; text-align: left; } } .b-blog-cards__wrapper { display: grid; grid-gap: 8rem; } @media screen and (min-width: 768px) { .b-blog-cards__wrapper { grid-template-columns: repeat(2, 1fr); grid-gap: 4rem; } } @media screen and (min-width: 1024px) { .b-blog-cards__wrapper { grid-template-columns: repeat(3, 1fr); grid-gap: 6rem; } } .b-blog-cards .c-blog-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .b-blog-cards .c-blog-card__media { width: 100%; max-height: 22.3rem; height: 100%; overflow: hidden; } .b-blog-cards .c-blog-card__media:hover .c-title { opacity: .8; } @media screen and (min-width: 768px) { .b-blog-cards .c-blog-card__media { max-height: 24rem; } } .b-blog-cards .c-blog-card__media img { -o-object-fit: cover; object-fit: cover; height: 100%; border-top-right-radius: 5px; border-top-left-radius: 5px; } .b-blog-cards .c-blog-card__body { background: #fff; padding: 1.5rem 2rem 2.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .b-blog-cards .c-blog-card__body .c-text-xs { font-family: "Neue Haas Grotesk Display Pro", sans-serif; } .b-blog-cards .c-blog-card__excerpt { font-size: 1.6rem; line-height: 2.6rem; letter-spacing: 0.05em; margin: 0 0 2rem; } @media screen and (min-width: 768px) { .b-blog-cards .c-blog-card__excerpt { margin: 0 0 3.2rem; } } .b-blog-cards .c-blog-card__title { margin-bottom: 1.5rem; } .b-blog-cards .c-blog-card__title .c-title { letter-spacing: 0.05em; font-size: 2rem; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; font-family: "Neue Haas Grotesk Display Pro", sans-serif; font-weight: 600; } .b-blog-cards .c-blog-card__title .c-title:hover { color: #7D20F3; } .b-blog-cards .c-blog-card__title a { text-decoration: none; } .b-blog-cards .c-blog-card__date { margin-top: auto; letter-spacing: 0.05em; } .b-blog-cards .c-blog-card__date .c-text-xs { font-size: 1.4rem; } .b-blog-cards__landing { padding-top: 6rem; } @media screen and (min-width: 768px) { .b-blog-cards__landing { padding-top: 8rem; } } .b-blog-cards__landing .c-blog-card:hover .c-blog-card__body { background: #F2F7FD; } .b-blog-cards__landing .custom-select { width: 100%; margin-bottom: 5.7rem; } @media screen and (min-width: 768px) { .b-blog-cards__landing .custom-select { width: 20rem; } } .b-blog-hero .c-blog-hero { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; grid-gap: 2rem; gap: 2rem; margin-top: 4rem; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .b-blog-hero .c-blog-hero { margin: 8rem 0 0rem; grid-gap: 6rem; gap: 6rem; } } @media screen and (min-width: 1024px) { .b-blog-hero .c-blog-hero { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .b-blog-hero .c-blog-hero__media { width: 100%; } @media screen and (min-width: 1024px) { .b-blog-hero .c-blog-hero__media { width: 50%; } } .b-blog-hero .c-blog-hero__content { width: 100%; } @media screen and (min-width: 1024px) { .b-blog-hero .c-blog-hero__content { width: 50%; } } .b-blog-hero .c-blog-hero__excerpt { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: 3rem; letter-spacing: 0.05em; } @media screen and (min-width: 768px) { .b-blog-hero .c-blog-hero__excerpt { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: 4rem; letter-spacing: 0.05em; } } .b-blog-hero .c-blog-hero__excerpt p { letter-spacing: 0.05em; } .b-blog-hero .c-blog-hero__excerpt p a { text-decoration: none; } .b-blog-hero .c-blog-hero__date { letter-spacing: 0.05em; } @media screen and (min-width: 768px) { .b-blog-hero .c-blog-hero__date { font-size: 1.4rem; line-height: 2.4rem; letter-spacing: 0.05em; } } .b-blog-hero .l-container { max-width: 124rem; margin: 0 auto; padding: 0 2rem; } .b-blog-hero .c-title { letter-spacing: 0.02em; font-size: 2.4rem; line-height: 3rem; margin-bottom: 3rem; } .b-blog-hero .c-title:hover { opacity: .8; } @media screen and (min-width: 768px) { .b-blog-hero .c-title { font-size: 4rem; line-height: 5.2rem; margin-bottom: 4rem; } } .b-blog-hero .c-title a { text-decoration: none; } .blog-holder-title { font-size: 4rem; line-height: 5.2rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif; text-align: center; margin-top: 14rem; padding: 0 1rem; } @media screen and (min-width: 768px) { .blog-holder-title { font-size: 6rem; line-height: 6.8rem; margin-top: 17rem; } } .b-blog-cards { margin-top: 6rem; } @media screen and (min-width: 768px) { .b-blog-cards { margin-top: 8rem; } } .b-blog-cards a { text-decoration: none; } .b-blog-cards__pagination { text-align: center; margin-top: 6rem; } @media screen and (min-width: 768px) { .b-blog-cards__pagination { margin-top: 7rem; } } .b-blog-cards__pagination .page { border: 0.5px solid #040474; border-radius: 50%; width: 2.4rem; height: 2.4rem; display: inline-block; text-align: center; padding-top: 0.3rem; margin-left: 1.4rem; } @media screen and (min-width: 768px) { .b-blog-cards__pagination .page { margin-left: 1rem; } } .b-blog-cards__pagination .page.current { border: 0.5px solid #D6D9FC; background: #D6D9FC; } .b-blog-cards__pagination .next, .b-blog-cards__pagination .prev { border: 0.5px solid #040474; border-radius: 50%; width: 2.4rem; height: 2.4rem; display: inline-block; text-align: center; padding-top: 0.3rem; margin-left: 1.4rem; } .b-blog-cards__pagination .next a, .b-blog-cards__pagination .prev a { text-decoration: none; } @media screen and (min-width: 768px) { .b-blog-cards__pagination .next, .b-blog-cards__pagination .prev { margin-left: 1rem; } } .filter-text { font-size: 1.4rem; line-height: 2.2rem; margin-bottom: 1.6rem; } a { text-decoration: none; } div.recommendation-modal__container { z-index: 9999991; font-size: 1.6rem; line-height: 2.6rem; padding: 2rem; } @media only screen and (max-width: 1024px) { div.recommendation-modal__container { max-width: 100%; left: 0; top: 0; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 1024px) { div.recommendation-modal__close-button-container { position: absolute; top: 2rem; right: 1rem; } } button.recommendation-modal__button { min-height: 4.9rem; min-width: 19.9rem; border-radius: 7.5rem; padding: 1.5rem 4rem; font-size: 1.6rem; line-height: 1.9rem; font-family: "Neue Haas Grotesk Display Pro", sans-serif; cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; color: white; background-color: #7D20F3 !important; border: 1px solid #7D20F3 !important; } button.recommendation-modal__button:hover { background-color: #040474 !important; border: 1px solid #040474 !important; } button.recommendation-modal__button--minimal { margin-top: 3rem; color: #7D20F3 !important; } @media screen and (min-width: 768px) { button.recommendation-modal__button--minimal { margin-top: 2rem; } } div.recommendation-modal__benefits li { list-style: none !important; list-style-type: none !important; position: relative; padding-left: 1.5rem; font-size: 1.6rem; line-height: 1.62; } div.recommendation-modal__benefits li::before { content: ""; width: 0.5rem; height: 0.5rem; position: absolute; top: 1rem; left: 0; border-radius: 50%; background-color: #A1A9FC; } h2.recommendation-modal__message--align-start { text-align: center; width: 100%; display: block; } select.recommendation-modal__selector--flag { background-color: white !important; padding-left: 1rem !important; border: 1px solid #040474; } form.recommendation-modal__form button:last-of-type { margin-top: 4rem; } .hero_dark { color: #ffffff !important; } @media screen and (max-width: 768px){ .main-nav__link-icon { left: auto !important; } } .as-seen__container { padding: 0.6rem 0; } b { font-weight: 800; } i { font-style: italic; }