.header { display: block; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } body.no-scroll { overflow: hidden; } .header-logo-fixed { position: absolute; top: 0; left: 0; right: 0; width: 100%; padding-top: 16px; z-index: 999; display: none; transition: all 0.6s ease, color 0.3s ease; color: #171717; opacity: 0 } .header-logo-fixed__nav-close { width: 24px; height: 24px; display: block; margin-left: 0; margin-bottom: 25px; cursor: pointer; } .header-logo-fixed__nav-close img { width: 24px; height: 24px; } .header-logo-fixed.content-loaded { opacity: 1; } .header-logo-fixed__global-accordion { position: absolute; right: -8px; top: 58px; width: auto; padding: 9px 37px 9px 10px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: opacity 0.3s ease; opacity: 0; pointer-events: none; } .header-logo-fixed__global-accordion::before { content: ""; position: absolute; left: 0; width: 100%; background: white; top: -4px; height: 4px; } @media (min-width: 1025px) { .header-logo-fixed { display: block; } .header-logo-fixed.\--alternative { color: #ffffff; } .header-logo-fixed.\--alternative a { color: #ffffff; } } .header-logo-fixed__nav { display: none; } .header-logo-fixed__head-wrap { } .header-logo-fixed__head-wrap.\--second { } .header-logo-fixed__head-wrap.\--second li { } @media (max-width: 1171px) { .header-logo-fixed__head-wrap.\--second li { margin-right: 19px; } } .header-logo-fixed__head-wrap:first-child { width: calc(50% - 85px); } .header-logo-fixed__head-wrap:last-child { width: calc(50% - 85px); } .header-logo-fixed__head-wrap:last-child .header-logo-fixed__nav { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .header-logo-fixed__inner-wrapper { } .header-logo-fixed__inner-wrapper.\--open { top: 0; left: 0; right: 0; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; position: fixed; height: 80px; background: #ffffff; transition: all 0.6s ease; } .header-logo-fixed__inner-wrapper.\--open .header-logo-fixed__global-accordion { top: 50.49px; } .header-logo-fixed__inner-wrapper.\--hide { top: -100px; width: 100%; left: 0; right: 0; transition: top 0.6s ease; } .header-logo-fixed__inner { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo-fixed__logo-wrap { margin: 0 auto; width: 128px; height: 40px; border-radius: 29px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo-fixed__logo { height: 24px; width: 93px; } .header-logo-fixed__logo.\--white { display: none; } .header-logo-fixed__left-logo { position: fixed; top: 20px; left: 16px; width: 32px; height: 32px; border-radius: 50%; background-color: #777777; background-image: url("/img/logo-invert.svg"); background-size: contain; background-position: center; } .header-logo-fixed__global-accordion-link { color: #595a5e; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-decoration: none; } .header-logo-fixed__nav-list-item { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; } .header-logo-fixed__nav-list-item .header-logo-fixed__nav-link { color: #171717; transition: color 0.3s ease; } .header-logo-fixed__nav-list-item.\--global { position: relative; } .header-logo-fixed__nav-list-item.\--global a { display: -webkit-flex; display: -ms-flexbox; display: flex; color: #595a5e; font-family: "Minion Pro"; } .header-logo-fixed__nav-list-item.\--global svg { } .header-logo-fixed__nav-list-item.\--global svg path { fill: #171717; transition: color 0.6s ease; } .header-logo-fixed__nav-list-item.\--global::before { content: ""; display: block; position: absolute; background-image: url("/img/icon-arrow-down.svg"); background-size: cover; width: 12px; right: 5px; height: 8px; bottom: -22px; z-index: 2; transition: opacity 0.3s ease; opacity: 0; } .header-logo-fixed__nav-list-item.\--global::after { content: ""; display: block; position: absolute; bottom: -37px; left: -30px; width: 70px; height: 40px; background: white; opacity: 0; } .header-logo-fixed__nav-list-item.\--global:hover { } .header-logo-fixed__nav-list-item.\--global:hover::before { opacity: 1; } .header-logo-fixed__nav-list-item.\--global:hover .header-logo-fixed__global-accordion { opacity: 1; pointer-events: all; z-index: 999; } .header-logo-fixed.\--alternative .\--global svg path { fill: #ffffff; } .header-logo-fixed .nav-featured { -ms-grid-column-span: 3; -ms-grid-column: 2; grid-column: 2 / span 3; position: relative; outline: none; padding-top: 80px; margin: 0 auto; overflow: hidden; width: 100%; height: auto; min-height: 700px; padding-bottom: 25px; } .header-logo-fixed .nav-featured__subtitle { font-family: "Chiswick Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; padding-bottom: 14px; text-transform: uppercase; } .header-logo-fixed .nav-featured__title { font-family: "Chiswick Sans" !important; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; padding-bottom: 30px; } @media (max-width: 640px) { .header-logo-fixed .nav-featured__title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; } } @media (min-width: 1025px) { .header-logo-fixed { padding-top: 11px; height: 88px; font-family: "Minion Pro" } .header-logo-fixed.content-loaded { opacity: 1; } .header-logo-fixed__inner { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .header-logo-fixed__inner.container { } .header-logo-fixed__nav { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo-fixed__accordion-wrap { display: none; background-color: #ffffff; } .header-logo-fixed__accordion { left: 0; right: 0; padding-top: 0; padding-bottom: 24px; background: #ffffff; position: absolute; cursor: default; top: calc(100% - 1px); z-index: 200; box-shadow: 0 3px 4px rgba(0, 0, 0, .25); transition: 0.3s all ease; } .header-logo-fixed__accordion li { padding: 0; } .header-logo-fixed__accordion > li a { display: block; font-style: normal; font-weight: 300; font-size: 1.2rem; line-height: 100%; text-transform: capitalize; } .header-logo-fixed__accordion .log-in { padding: 11px 0 8px 0; margin-top: 4px; } .header-logo-fixed__accordion .log-in a { font-style: normal; font-weight: 300; font-size: 1.2rem; line-height: 100%; text-transform: capitalize; } .header-logo-fixed__accordion .sing-up { } .header-logo-fixed__accordion .sing-up a { font-style: normal; font-weight: 300; font-size: 1.2rem; line-height: 100%; text-transform: capitalize; padding-top: 0; } .header-logo-fixed__accordion-inner { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-gap: 32px; } .header-logo-fixed__accordion-inner.large { padding-top: 103px; max-height: 87vh; max-width: 100%; overflow-y: scroll; padding-right: 64px; padding-left: 64px; } .header-logo-fixed__accordion-inner.large .scrollable-section { overflow-y: scroll; height: 100%; padding: 0 32px; } .header-logo-fixed__nav-list { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo-fixed__nav-list li { margin-right: 24px; display: block; } .header-logo-fixed__nav-list li:last-child { margin-right: 0; } .header-logo-fixed .\--sub-menu-open { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; transition: color 0.3s ease; cursor: pointer; } .header-logo-fixed .\--sub-menu-open li { margin: 0; } .header-logo-fixed .\--sub-menu-open a { position: relative; } .header-logo-fixed .\--sub-menu-open .header-logo-fixed__global-accordion-link { color: #595a5e; font-size: 1.4rem; line-height: 100%; text-decoration: none; } .header-logo-fixed .\--sub-menu-open .sing-up, .header-logo-fixed .\--sub-menu-open .log-in { padding: 0; } .header-logo-fixed .\--sub-menu-open .sing-up a, .header-logo-fixed .\--sub-menu-open .log-in a { font-style: normal; font-weight: bold; font-size: 1.6rem; line-height: 24px; font-family: "Sofia Pro"; text-transform: capitalize; cursor: pointer; } .header-logo-fixed .\--sub-menu-open .sing-up a::before, .header-logo-fixed .\--sub-menu-open .log-in a::before { width: 0; height: 1px; position: absolute; content: ""; background-color: #000000; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease; } .header-logo-fixed .\--sub-menu-open .sing-up a:hover::before, .header-logo-fixed .\--sub-menu-open .log-in a:hover::before { width: 100%; } .header-logo-fixed .\--sub-menu-open .log-in { margin-bottom: 8px; } .header-logo-fixed .\--sub-menu-open .\--event-notification-icon { position: absolute; border-radius: 100%; background-color: #eb5757; color: white; font-family: "Sofia Pro"; line-height: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .header-logo-fixed .\--sub-menu-open .\--event-notification-icon.hide { display: none; } .header-logo-fixed .\--sub-menu-open .\--event-notification-icon.\--small-note { top: -31px; left: 38px; width: 12px; height: 12px; font-size: 11px; } .header-logo-fixed .\--sub-menu-open .\--event-notification-icon.\--large-note { bottom: 22px; left: calc(50% - 12px); width: 24px; height: 24px; font-size: 14px; } .header-logo-fixed__accordion-account-lists-wrap { min-width: 99px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-top: 13px; } .header-logo-fixed__list-img { height: 252px; margin-bottom: 8px; overflow: hidden; position: relative; } .header-logo-fixed__list-img img { display: block; object-fit: cover; object-position: center; width: 100%; height: 100%; transition: all 0.5s ease; } .header-logo-fixed__list-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)); opacity: 0; transition: all 0.3s ease; } .header-logo-fixed__list-hover p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 124.5%; color: #595a5e; text-align: center; letter-spacing: 0.02em; } .header-logo-fixed__list-login { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 26px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)); opacity: 0; transition: all 0.3s ease; cursor: default; } .header-logo-fixed__list-login-lock { width: 24px; height: 24px; margin-bottom: 11px; background-size: contain; background-image: url(/img/lock.svg); } .header-logo-fixed__list-login p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 124.5%; color: #595a5e; text-align: center; text-transform: none; } .header-logo-fixed__list-login .list-login-link { display: inline; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 124.5%; color: #595a5e; text-decoration: underline; cursor: pointer; } .header-logo-fixed__accordion li:hover .header-logo-fixed__list-login { opacity: 1; } .header-logo-fixed__list-title { padding: 0; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 24px; text-transform: capitalize; text-align: center; } .header-logo-fixed__list-title span { position: relative; } .header-logo-fixed__list-title span::before { background: #000000; height: 1px; width: 0; position: absolute; content: ""; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease; } .header-logo-fixed__accordion li:hover .header-logo-fixed__list-title span::before { width: 100%; } .header-logo-fixed__accordion li:hover .header-logo-fixed__list-hover { opacity: 1; } .header-logo-fixed__accordion li:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .header-logo-fixed__nav-link { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; } .header-logo-fixed__nav-link:not(.\--no-hover) { position: relative; } .header-logo-fixed__nav-link:not(.\--no-hover)::before { content: ""; display: block; width: 0; height: 1px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease; background: #171717; } .header-logo-fixed__nav-link:not(.\--no-hover):hover { } .header-logo-fixed__nav-link:not(.\--no-hover):hover::before { width: 100%; } .header-logo-fixed__nav-icon { display: block; width: 16px; height: 16px; background-image: url("/img/instagram.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; margin-right: 8px; } .header-logo-fixed__nav-icon.\--search { background-image: url("/img/search.svg"); cursor: pointer; } .header-logo-fixed__logo-wrap { width: 170px; height: 55px; } .header-logo-fixed__logo { height: 100%; width: 100%; object-fit: contain; } .header-logo-fixed.\--dark-color { position: relative; left: unset; right: unset; bottom: unset; z-index: 999; transition: top 0.6s ease; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--global { } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--global a svg { fill: black; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--global a svg path { fill: black; } .header-logo-fixed.\--dark-color .header-logo-fixed__inner { top: 0; left: 0; right: 0; width: 100%; background: transparent; } .header-logo-fixed.\--dark-color .header-logo-fixed__inner.\--hide { top: -100px; } .header-logo-fixed.\--dark-color .header-logo-fixed__logo { } .header-logo-fixed.\--dark-color .header-logo-fixed__logo.\--dark { display: block; } .header-logo-fixed.\--dark-color .header-logo-fixed__logo.\--white { display: none; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-icon { background-image: url("/img/instagram.svg"); } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-icon.\--search { background-image: url("/img/search.svg"); } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-link { color: #000000; position: relative; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-link::before { background: #000000; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-link:hover { } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-link:hover::before { width: 100%; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--sub-menu-open { color: #000000; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--sub-menu-open .header-logo-fixed__accordion { background: #ffffff; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--sub-menu-open .header-logo-fixed__accordion li { margin-right: 0; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--sub-menu-open .header-logo-fixed__accordion a { color: #000000; } .header-logo-fixed.\--dark-color .header-logo-fixed__nav-list-item.\--sub-menu-open::before { background: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); z-index: 21; } } @media (min-width: 1025px) and (min-width: 1025px) { .header-logo-fixed__inner.container { max-width: 100%; } } @media (min-width: 1025px) and (min-width: 1441px) { .header-logo-fixed .\--sub-menu-open { font-size: 18px; } } @media (min-width: 1025px) and (min-width: 1441px) { .header-logo-fixed .\--sub-menu-open a { font-size: 18px; } } @media (min-width: 1025px) and (min-width: 1441px) { .header-logo-fixed__nav-link { font-size: 18px; } } .header-logo-fixed.\--alternative { } .header-logo-fixed.\--alternative .header-logo-fixed__logo.\--dark { display: none; } .header-logo-fixed.\--alternative .header-logo-fixed__logo.\--white { display: block; width: 107px; height: 55px; } .header-logo-fixed.\--alternative .header-logo-fixed__nav-icon { background-image: url("/img/instagram--white.svg"); } .header-logo-fixed.\--alternative .header-logo-fixed__nav-icon.\--search { background-image: url("/img/search-white.svg"); } .header-logo-fixed.\--alternative.\--dark-color .header-logo-fixed__nav-icon { background-image: url("/img/instagram.svg"); } .header-logo-fixed.\--alternative.\--dark-color .header-logo-fixed__nav-icon.\--search { background-image: url("/img/search.svg"); } .header-logo-fixed.\--alternative .header-logo-fixed__nav-link::before { background-color: #ffffff; } .header-logo-fixed.\--alternative.\--dark-color { } .header-logo-fixed.\--alternative.\--dark-color .header-logo-fixed__logo.\--dark { display: block; } .header-logo-fixed.\--alternative.\--dark-color .header-logo-fixed__logo.\--white { display: none; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .menu-row { background: #ffffff; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; padding: 0 8px } @media (min-width: 1025px) { .menu-row { display: none } } .menu-row ul { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-grid-columns: (1fr)[5]; grid-template-columns: repeat(5, 1fr); grid-column-gap: 8px; text-transform: uppercase; text-align: center } .menu-row li { width: 20%; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-weight: 500; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 12.8px; font-size: 0.8rem; line-height: 100%; cursor: pointer } .menu-row li.\--active { background-color: #f3f2f4 } .menu-row li a { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 12.8px; font-size: 0.8rem; line-height: 100%; cursor: pointer } .menu-row__icon { height: 28px; width: 28px; background-position: center; background-size: cover; background-repeat: no-repeat; margin-top: 8px; margin-bottom: 8px } .menu-row .\--products { background-image: url('/img/products.svg') } .menu-row .\--search { background-image: url('/img/search-menu.svg') } .menu-row .\--menu { background-image: url('/img/menu-icon.svg') } .menu-row .\--instagram { background-image: url('/img/instagram-icon.svg') } .menu-row .\--quiz { background-image: url('/img/hairquiz.svg') } .menu-row .\--pro { background-image: url('/img/profile-icon.svg') } .menu-row .\--active .\--products { background-image: url('/img/products.svg') } .menu-row .\--active .\--search { background-image: url('/img/search-menu.svg') } .menu-row .\--active .\--menu { background-image: url('/img/menu-icon.svg') } .menu-row .\--active .\--instagram { background-image: url('/img/instagram-icon.svg') } .menu-row .\--active .\--pro { background-image: url('/img/profile-icon.svg') } .menu-row__icon + span { margin-bottom: 8px } .menu-row .\--event-notification-icon { position: absolute; top: 2px; right: 27%; width: 8px; height: 8px; border-radius: 100%; background-color: #eb5757; color: white; font-family: "Sofia Pro"; line-height: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .menu-row .\--event-notification-icon.hide { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .products-listing-nav { overflow-y: auto !important; margin-top: -45px } .products-listing-nav__wrapper { margin-top: 0 !important } .products-listing-nav__wrapper.container { overflow-y: auto } .products-listing-nav .filter-component { } @media (min-width: 641px) { .products-listing-nav .filter-component { -ms-grid-columns: 1fr; grid-template-columns: 1fr } .products-listing-nav .filter-component .filter-component__heading { max-width: 142px } } .products-listing-nav a.small-cards-product__card { } @media (min-width: 1025px) { .products-listing-nav a.small-cards-product__card { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .products-listing-nav a.small-cards-product__card .mobile_products_slider { outline: none !important } .products-listing-nav a.small-cards-product__card .mobile_products_slider picture { position: relative; left: auto; top: auto; height: 200px; width: 100% } .products-listing-nav .\--double-img { width: 100%; padding-top: 24px } @media (max-width: 374px) { .products-listing-nav .\--double-img { padding-top: 0; width: 100% } } @media (min-width: 375px) { .products-listing-nav .\--double-img { padding-top: 0 } } @media (min-width: 641px) { .products-listing-nav .\--double-img { padding-top: 24px } } .products-listing-nav .small-cards-product__inner.container.\--small { } @media (min-width: 1025px) { .products-listing-nav .small-cards-product__inner.container.\--small { padding-left: 0; padding-right: 8px } } .products-listing-nav .seo-content { width: 100%; padding: 0 32px; margin: 64px auto 0; text-align: center; max-width: 1024px } @media (max-width: 1024px) { .products-listing-nav .seo-content { padding: 0 16px; max-width: 720px } } @media (max-width: 640px) { .products-listing-nav .seo-content { margin: 32px auto } } .products-listing-nav .seo-content h1 { font-size: 57.6px; font-size: 3.6rem; font-weight: 300; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px } @media (max-width: 1024px) { .products-listing-nav .seo-content h1 { font-size: 1.8rem } } .products-listing-nav .seo-content h2 { font-size: 25.6px; font-size: 1.6rem; font-weight: 300; line-height: 24px; letter-spacing: 0.2px } .products-listing-nav .seo-content h2 a { text-decoration: underline } .filter-component-nav__btn-wrapper { cursor: pointer; } .products-listing-filters { } @media (min-width: 641px) { .products-listing-filters { position: -webkit-sticky; position: sticky; top: 80px; max-height: calc(100vh - 308px); overflow-y: scroll } } @media (min-width: 641px) { .products-listing-filters { top: 112px } } @media (min-width: 1025px) { .products-listing-filters { max-height: calc(100vh - 225px) } } .products-listing-filters::-webkit-scrollbar { width: 0 } .products-listing-filters__wrap { display: none } @media (min-width: 641px) { .products-listing-filters__wrap { display: block; padding-top: 23px } } @media (min-width: 1025px) { .products-listing-filters__wrap { padding-top: 0 } } .products-listing-filters .filter-component__inner { margin-bottom: 23px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .footer { padding-top: 24px } @media (min-width: 641px) { .footer { display: none } } .footer__inner { border-top: 1px solid #777777; padding-top: 22px; padding-left: 8px; padding-right: 8px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-template-areas: "title" "txt" "btn-transparent" "input" "list" "subtitle" "icons" "bottom-txt"; margin-bottom: 64px } .footer__title { grid-area: title; margin-bottom: 40px } .footer h3.h2 { font-style: normal; font-weight: 300; font-size: 18px; line-height: 120%; text-align: center; text-transform: uppercase; color: #000000; margin-bottom: 24px; padding-bottom: 24px; padding-top: 24px } .footer__subtitle { grid-area: subtitle; padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-size: 22.4px; font-size: 1.4rem; font-weight: 300; line-height: 100% } .footer__txt { grid-area: txt; margin-bottom: 48px; text-align: center; max-width: 90%; margin-left: auto; margin-right: auto } .footer__btn-transparent { grid-area: btn-transparent; line-height: 40px; text-align: center; font-size: 19.2px; font-size: 1.2rem; padding-bottom: 40px; border-bottom: 1px solid #d3d3d3; margin-bottom: 40px } .footer__links-item { } .footer__links-item a { padding: 8px; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: none; text-transform: initial; display: inline-block } .footer__list { grid-area: list; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase; margin-bottom: 26px } .footer__list a:not(:last-child) { margin-bottom: 18px } .footer__list p { padding: 8px 8px 8px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 120px; line-height: 100%; font-size: 22.4px; font-size: 1.4rem } .footer__list p ~ ul { display: none } .footer__list button { background: transparent; outline: none; border: none; width: 16px; height: 16px; display: block; position: relative; margin-bottom: 3px; cursor: pointer } .footer__list button:active, .footer__list button:focus { outline: none } .footer__list button.\--active { } .footer__list button.\--active::after { -webkit-transform: translate(-50%, -50%) rotate(-90deg); -ms-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg) } .footer__list button::before { content: ""; width: 10px; display: block; position: absolute; height: 1px; border-radius: 0.5px; background-color: #000000; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .footer__list button::after { content: ""; display: block; position: absolute; width: 1px; height: 10px; border-radius: 0.5px; background-color: #000000; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: all 0.3s ease } .footer__input-wrap { grid-area: input; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .footer__input-wrap input { width: 100%; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding-left: 10px; padding-right: 80px; border: 1px solid #171717; background: #ffffff; min-height: 33px } .footer__input-wrap input:focus { outline: none } .footer__input-wrap input.\--success { padding-right: 10px; border-color: transparent } .footer__input-wrap .k-form__checkbox-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; margin-bottom: 22px } .footer__input-wrap .k-form__checkbox-wrapper label { width: auto !important; font-family: 'Sofia Pro', sans-serif !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; color: inherit; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; border: 1px solid currentColor; display: block; position: relative; cursor: pointer; margin-right: 11px; padding: 0 !important } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox]::before { content: url(https://d8ua7bnpmn6n9.cloudfront.net/Checkmark.png); width: 16px; height: 16px; position: absolute; top: 0; left: 0; bottom: 0; visibility: hidden; line-height: 0 } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox]:checked::before { visibility: visible } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse { } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse::before { visibility: visible } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse:checked::before { visibility: hidden } .footer__input-wrap .k-form__checkbox-wrapper input[type=checkbox].\--error { border-color: #eb5757 } .footer__input-wrap .email-subscription-btn-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px } .footer__input-wrap .email-subscription-btn { outline: none; background-color: transparent; width: 160px; height: 43px } .footer__input-wrap .email-subscription-btn:focus { outline: none; border: none } .footer__subscription-success { display: none; text-align: center; font-size: 25.6px; font-size: 1.6rem; letter-spacing: 0.02em; font-family: "Sofia Pro"; color: #171717; margin-bottom: auto } .footer__input-wrapper { margin-bottom: 15px; position: relative } .footer__private-policy { margin-bottom: 33px } .footer__private-policy-input { display: none } .footer__private-policy-label { display: -webkit-flex; display: -ms-flexbox; display: flex } .footer__private-policy-checkbox { width: 16px; height: 16px; border: 1px solid #000000; margin-right: 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; transition: all 0.3s ease } .footer__private-policy-checkbox.\--error { border-color: #eb5757 } .footer__private-policy-input:checked + label .footer__private-policy-checkbox { border-color: #2e1a47; background-color: #2e1a47 } .footer__private-policy-label p { font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-align: center; text-transform: none; text-transform: initial; color: #000000 } .footer__private-policy-link { text-decoration: underline } .footer__icons { grid-area: icons; margin-bottom: 40px; display: -webkit-flex; display: -ms-flexbox; display: flex } .footer__icon { width: 22px; height: 22px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .footer__icon img { width: auto; height: 100% } .footer__icon:not(:last-child) { margin-right: 64px } .footer__bottom-txt { grid-area: bottom-txt; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase } .footer__bottom-txt span:first-child { color: rgba(23, 23, 23, .3) } .footer__bottom-txt span:first-child a { color: rgba(23, 23, 23, .3) } .footer-email-subscription { transition: all 0.3s ease; } .footer-email-subscription.\--success { border-bottom-color: transparent; } .footer-email-subscription.\--success::-webkit-input-placeholder { color: #4caf50; opacity: 1; } .footer-email-subscription.\--success:-ms-input-placeholder { color: #4caf50; opacity: 1; } .footer-email-subscription.\--success::placeholder { color: #4caf50; opacity: 1; } .email-subscription-error { padding-top: 7px; font-size: 19.2px; font-size: 1.2rem; font-weight: 250; line-height: 100%; color: #eb5757; text-transform: uppercase; display: none; } .footer-email-subscription.\--error + .email-subscription-error { display: block; } .fixed-form { } .fixed-form__mob-wrapper { display: none; background: rgba(156, 156, 156, .2); position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; padding: 92px 8px 8px } @media (min-width: 641px) { .fixed-form__mob-wrapper { padding-top: 257px } } @media (min-width: 1025px) { .fixed-form__mob-wrapper { padding-top: 153px } } .fixed-form__mob-inner { max-width: 280px; min-height: 392px; margin: 0 auto; position: relative; width: 100%; background: #ffffff; padding: 40px 30px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .fixed-form__mob-inner { max-width: 552px } } .fixed-form__mob-cross-close { padding: 16px; border: none; background: transparent; position: absolute; top: 0; right: 0 } .fixed-form__mob-cross-close:focus, .fixed-form__mob-cross-close:active { outline: none } .fixed-form__mob-cross-close::before { content: ''; background: url('/img/close-popup.svg') center; background-repeat: no-repeat; display: block; width: 16px; height: 16px } .fixed-form__mob-gratitude { display: block } .fixed-form__mob-gratitude-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .fixed-form__mob-gratitude-subtitle { margin-bottom: 24px; text-align: center } .fixed-form__mob-gratitude-title { } @media (min-width: 641px) { .fixed-form__mob-gratitude-title { margin-bottom: 16px } } .fixed-form__mob-button { width: 160px } .disclaimer-text { font-family: "Sofia Pro" !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important; letter-spacing: 0.02em; text-align: center; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .footer-txt-list-input-icons { } .footer-txt-list-input-icons__inner { padding-left: 8px; padding-right: 8px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-template-areas: "title" "txt" "btn-transparent" "list" "input" "icons" "bottom-txt"; margin-bottom: 160px } .footer-txt-list-input-icons__title { grid-area: title; margin-bottom: 40px; text-align: center; font-size: 38.4px; font-size: 2.4rem } .footer-txt-list-input-icons__txt { grid-area: txt; margin-bottom: 48px; text-align: center; max-width: 90%; margin-left: auto; margin-right: auto } .footer-txt-list-input-icons__btn-transparent { grid-area: btn-transparent; line-height: 40px; text-align: center; font-size: 19.2px; font-size: 1.2rem; padding-bottom: 40px; border-bottom: 1px solid #d3d3d3; margin-bottom: 40px } .footer-txt-list-input-icons__list { grid-area: list; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase; margin-bottom: 26px; margin-left: 8px } .footer-txt-list-input-icons__list a:not(:last-child) { margin-bottom: 18px } .footer-txt-list-input-icons__input-wrap { grid-area: input; position: relative; margin-bottom: 40px } .footer-txt-list-input-icons__input-wrap input { width: 100%; line-height: 38.4px; line-height: 2.4rem; padding-left: 16px; border: 1px solid transparent; border-bottom-color: #171717; background-color: #f3f2f4 } .footer-txt-list-input-icons__input-wrap input::-webkit-input-placeholder { color: rgba(46, 26, 71, .4) } .footer-txt-list-input-icons__input-wrap input:-ms-input-placeholder { color: rgba(46, 26, 71, .4) } .footer-txt-list-input-icons__input-wrap input::placeholder { color: rgba(46, 26, 71, .4) } .footer-txt-list-input-icons__input-wrap input:focus { outline: none } .footer-txt-list-input-icons__input-wrap::after { position: absolute; display: block; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-image: url(/compiled/d731b5117aaee3a5bdbd3ba375dad9ba.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .footer-txt-list-input-icons__icons { grid-area: icons; margin-bottom: 40px; display: -webkit-flex; display: -ms-flexbox; display: flex } .footer-txt-list-input-icons__icon { width: 24px; height: 24px; background-color: #d3d3d3 } .footer-txt-list-input-icons__icon:not(:last-child) { margin-right: 64px } .footer-txt-list-input-icons__bottom-txt { grid-area: bottom-txt; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase } .footer-txt-list-input-icons__bottom-txt span:first-child { color: rgba(23, 23, 23, .3) } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .footer-tablet { padding-top: 50px; padding-bottom: 112px; display: none } @media (min-width: 641px) { .footer-tablet { display: block } } @media (min-width: 1025px) { .footer-tablet { padding-bottom: 40px } } .footer-tablet__inner { padding-top: 32px } .footer-tablet__inner h3.h2 { text-align: center; padding: 16px 8px; width: 100%; max-width: 592px; margin: 0 auto 32px; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; display: none } @media (min-width: 641px) { .footer-tablet__inner h3.h2 { display: block; font-size: 1.8rem; line-height: 120%; font-weight: 400 } } @media (min-width: 1025px) { .footer-tablet__inner h3.h2 { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .footer-tablet__input-wrapper { max-width: 368px; margin: 0 auto 10px; padding: 16px 0 0; position: relative } @media (min-width: 1025px) { .footer-tablet__input-wrapper { max-width: 432px; margin-bottom: 13px } } .footer-tablet__input-wrapper label { width: 100% } .footer-tablet__input-wrapper label input { border-bottom: 1px solid #2e1a47; font-family: "Sofia Pro"; width: 100%; background: transparent; padding: 0 99px 0 0; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; min-height: 150%; letter-spacing: 0.02em } .footer-tablet__input-wrapper label button { background-image: url("/img/arrow-long.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; padding: 0; width: 95px; height: 16px; position: absolute; top: 26px; right: 0; background-color: transparent; border: 0; outline: 0; cursor: pointer } .footer-tablet__input-wrapper label button:hover, .footer-tablet__input-wrapper label button:active, .footer-tablet__input-wrapper label button:focus { outline: 0 } .footer-tablet__input-wrapper .k-form__checkbox-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; margin-bottom: 22px } .footer-tablet__input-wrapper .k-form__checkbox-wrapper label { width: auto !important; font-family: 'Sofia Pro', sans-serif !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; color: inherit; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; border: 1px solid currentColor; display: block; position: relative; cursor: pointer; margin-right: 11px } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox]::before { content: url(https://d8ua7bnpmn6n9.cloudfront.net/Checkmark.png); width: 16px; height: 16px; position: absolute; top: 0; left: 0; bottom: 0; visibility: hidden; line-height: 0 } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox]:checked::before { visibility: visible } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse {} .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse::before { visibility: visible } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse:checked::before { visibility: hidden } .footer-tablet__input-wrapper .k-form__checkbox-wrapper input[type=checkbox].\--error { border-color: #eb5757 } .footer-tablet__wrap { margin-bottom: 34px } @media (min-width: 1025px) { .footer-tablet__wrap { margin-bottom: 84px } } .footer-tablet .footer__private-policy-checkbox { margin-right: 5px } @media (min-width: 1025px) { .footer-tablet .footer__private-policy-checkbox { cursor: pointer; margin-right: 8px } } .footer-tablet .email-subscription-btn-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .footer-tablet .email-subscription-btn { width: 160px; height: 45px; background-color: transparent } .footer-tablet__subscription-success { display: none; text-align: center; font-size: 25.6px; font-size: 1.6rem; letter-spacing: 0.02em; font-family: "Sofia Pro"; color: #171717; padding-top: 20px } .footer-tablet .footer__private-policy-label { -webkit-align-items: center; -ms-flex-align: center; align-items: center } .footer-tablet__bottom { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 176px; grid-template-columns: 1fr 176px; grid-column-gap: 140px } @media (min-width: 1025px) { .footer-tablet__bottom { -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; grid-column-gap: 16px } } @media (min-width: 641px) { .footer-tablet__bottom { -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; grid-column-gap: none } } @media (max-width: 640px) { .footer-tablet__bottom { -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; grid-column-gap: none } } .footer-tablet__links-list-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 16px } .footer-tablet__links-card { width: 100% } .footer-tablet__links-card h6 { font-size: 22.4px; font-size: 1.4rem; padding: 16px 8px; line-height: 100%; text-transform: uppercase; font-weight: 300 } .footer-tablet__links-card ul { width: 100% } .footer-tablet__links-item { margin-bottom: 16px; width: 100% } .footer-tablet__links-item a { display: inline-block; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; padding: 8px; position: relative } @media (min-width: 1025px) { .footer-tablet__links-item a {} .footer-tablet__links-item a::before { content: ""; display: block; width: 0; height: 1px; position: absolute; bottom: 8px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease; background: #171717 } .footer-tablet__links-item a:hover {} .footer-tablet__links-item a:hover::before { width: calc(100% - 16px) } } .footer-tablet__copyrights-wrapper { font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase } @media (min-width: 1025px) { .footer-tablet__copyrights-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 16px } } .footer-tablet__copyrights-wrapper span { display: inline-block; padding: 8px; margin-bottom: 16px } @media (min-width: 1025px) { .footer-tablet__copyrights-wrapper span { margin: 0; width: 100% } } .footer-tablet__copyrights-wrapper span:last-child { color: rgba(23, 23, 23, .3) } .footer-tablet__copyrights-wrapper span:last-child a { color: rgba(23, 23, 23, .3) } .footer-tablet__copyrights-wrapper span:first-child { margin-top: 8px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .mob-nav { padding: 10px 16px; position: relative; z-index: 999 !important } @media (min-width: 641px) { .mob-nav { padding: 11px 10px 12px } } @media (min-width: 1025px) { .mob-nav { display: none } } .mob-nav__circle-logo { display: none } .mob-nav__logo-link { display: block; height: auto } .mob-nav__logo-link picture { display: -webkit-flex; display: -ms-flexbox; display: flex; height: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative } .mob-nav__logo-link img { position: static; object-position: center; object-fit: contain; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-filter: unset; filter: unset; top: unset; left: unset; width: 117px; height: 20px } .mob-nav__inner { } .mob-nav__inner.\--tablet { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 } @media (min-width: 1025px) { .mob-nav__inner.\--tablet { display: none } } .mob-nav__inner.\--tablet .mob-nav__logo-link { display: block; width: auto; height: 100% } .mob-nav__inner.\--tablet .mob-nav__logo-link img { width: 100px; height: 52px; object-position: center; object-fit: contain } @media (min-width: 641px) { .mob-nav__inner.\--tablet .mob-nav__logo-link img { width: 95px; height: 49px } } .mob-nav__inner.\--tablet .\--white { display: none } .mob-nav__inner.\--tablet .mob-nav__hamburger-column { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 6px 6px; background: transparent; border: none; justify-self: flex-end; margin-top: 2px; outline: none } @media (min-width: 641px) { .mob-nav__inner.\--tablet .mob-nav__hamburger-column { display: -webkit-flex; display: -ms-flexbox; display: flex } } .mob-nav__inner.\--tablet .mob-nav__hamburger-column span { width: 18px; height: 2px; border-radius: 1px; background: #000000; display: inline-block } .mob-nav__inner.\--tablet .mob-nav__hamburger-column span:nth-child(1) { margin-bottom: 6px } .mob-nav__inner.\--tablet .mob-nav__hamburger-column .\--active-burger { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 6px 6px; background: transparent; border: none; justify-self: flex-end; margin-top: 2px; outline: none } .mob-nav__inner.\--tablet .mob-nav__hamburger-column-close { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8px; width: 24px; height: 24px; border: none; margin-top: 2px; outline: none; background-color: transparent; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-search.svg); background-size: contain; background-position: center; background-repeat: no-repeat } @media (min-width: 641px) { .mob-nav__inner.\--tablet .mob-nav__hamburger-column-close { right: 16px } } .mob-nav__inner.\--tablet .mob-nav__hamburger-column-close.\--close { display: block; z-index: 5 } .mob-nav__popup-list { margin-bottom: 100px } .mob-nav__popup-list-accordion { padding: 16px 0 16px 28px } .mob-nav__popup-list-accordion .header-logo-fixed__nav-link { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; text-transform: capitalize } .mob-nav__popup-list-accordion .header-logo-fixed__nav-link.before { position: relative } .mob-nav__popup-list-accordion.\--search-nav { display: none } @media (min-width: 641px) { .mob-nav__popup-list-accordion.\--search-nav { display: block } } @media (min-width: 641px) { .mob-nav__popup-list-accordion { padding: 32px 0 32px 40px } .mob-nav__popup-list-accordion a { font-size: 24px } } .mob-nav__popup-list-accordion a { height: 100%; width: 100%; display: block; padding: 0; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; text-transform: uppercase; font-family: "Sofia Pro"; margin-right: 12px } .mob-nav .wrapper-list { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-y: scroll } @media (min-width: 641px) { .mob-nav .wrapper-list { -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start } } .mob-nav__popup-container { margin-bottom: 16px } @media (min-width: 641px) { .mob-nav__popup-container { margin-bottom: 0 } } .mob-nav__inner-wrapper-popup { position: absolute; background: #ffffff; top: 0; left: 0; right: 0; width: 100%; height: 0; z-index: 101; -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); transition: all 0.3s ease; overflow: hidden } .mob-nav__inner-wrapper-popup.\--active { height: 100vh; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); overflow: scroll } .mob-nav__inner-wrapper-popup .mob-nav__popup-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0; padding-top: 16px; padding-bottom: 30px } .mob-nav__inner-wrapper-popup .mob-nav__popup-inner .mob-nav__hamburger-column-close.\--close { top: 32px } .mob-nav__inner-wrapper-popup .mob-nav__popup-inner .mob-nav__logo-link.\--mob-logo { display: block; height: auto } @media (min-width: 641px) { .mob-nav__inner-wrapper-popup .mob-nav__popup-inner .mob-nav__logo-link.\--mob-logo { height: 49px } } .mob-nav__img-arrows { position: absolute; display: none; width: 12px; height: 12px; object-fit: contain; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2) } .mob-nav__img-arrows.plus-sign { opacity: 1; transition: opacity 0.5s ease } .mob-nav__img-arrows.minus-sign { opacity: 0; transition: opacity 0.5s ease } .mob-nav__wrapper { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .mob-nav__wrapper picture { height: 12px } .mob-nav__wrapper a { font-weight: normal } .mob-nav__wrapper .picture { margin-right: 16px } .mob-nav__wrapper .picture.arrow-left { height: 16px; width: 16px } .mob-nav__wrapper .picture.arrow-left img { height: 16px; width: 16px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .mob-nav__accordion { margin-top: 16px; display: none } @media (min-width: 641px) { .mob-nav__accordion { margin-top: 24px } } .mob-nav__accordion.\--active { display: block } .mob-nav__accordion li { padding: 12px 0 12px 22px; font-family: "Sofia Pro" } @media (min-width: 641px) { .mob-nav__accordion li { padding: 8px 0 8px 26px; font-family: "Sofia Pro" } } .mob-nav__accordion a { font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; font-family: "Sofia Pro"; text-transform: capitalize } .mob-nav__accordion .filter-component-nav_filter-item { padding: 12px 26px 12px 24px !important } .mob-nav__accordion .filter-component-nav_filter-item a::before { background-color: #000000; height: 1px; width: 0; position: absolute; content: ""; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease } .mob-nav__accordion .filter-component-nav_filter-item:hover { } .mob-nav__accordion .filter-component-nav_filter-item:hover a::before { width: 100% } .mob-nav__data { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: end; -ms-flex-align: end; align-items: end; width: 100%; padding-bottom: 230px } @media (min-width: 641px) { .mob-nav__data { padding-bottom: 100px; margin-bottom: 0 } } .mob-nav__log-in, .mob-nav__sign-up { width: calc(50% - 4px); text-align: center; box-shadow: 0 4px 4px rgba(0, 0, 0, .1); border-radius: 5px } .mob-nav__log-in:hover, .mob-nav__sign-up:hover { box-shadow: inset 0 -4px 4px rgba(0, 0, 0, .1); background: rgba(234, 232, 232, 0.25882) } @media (min-width: 641px) { .mob-nav__log-in, .mob-nav__sign-up { height: 86px; width: calc(50% - 8px) } .mob-nav__log-in:hover, .mob-nav__sign-up:hover { box-shadow: 0 4px 4px rgba(0, 0, 0, .1); background: unset } } .mob-nav__log-in a, .mob-nav__sign-up a { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-style: normal; font-family: "Sofia Pro"; font-weight: normal; font-size: 25.6px; font-size: 1.6rem; line-height: 120%; text-transform: uppercase; padding: 16px 0 } @media (min-width: 641px) { .mob-nav__log-in, .mob-nav__sign-up { } .mob-nav__log-in a, .mob-nav__sign-up a { font-weight: normal; font-size: 1.8rem; line-height: 120%; text-transform: capitalize; font-family: "Sofia Pro" } } .mob-nav .\--products-nav { display: block; cursor: pointer } .mob-nav .\--products-nav .mob-nav__img-arrows { display: block; transition: all 0.3s ease } .mob-nav .\--sub-menu { display: block; cursor: pointer } .mob-nav .\--sub-menu a { width: auto } @media (min-width: 1025px) { .mob-nav .\--sub-menu { display: none } } .mob-nav .\--sub-menu .mob-nav__img-arrows { display: block; transition: all 0.3s ease } .mob-nav .\--sub-menu.\--active { } .mob-nav .\--sub-menu.\--active .mob-nav__img-arrows { } .mob-nav .\--sub-menu.\--active .mob-nav__img-arrows.plus-sign { opacity: 0 } .mob-nav .\--sub-menu.\--active .mob-nav__img-arrows.minus-sign { opacity: 1 } .mob-nav .\--event-notification-icon { border-radius: 100%; background-color: #eb5757; color: white; font-family: "Sofia Pro"; line-height: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .mob-nav .\--event-notification-icon.hide { display: none !important } .mob-nav .\--event-notification-icon.\--with-text { width: 18px; height: 18px; font-size: 12px; margin-right: 12px } @media (min-width: 641px) { .mob-nav .\--event-notification-icon.\--with-text { width: 24px; height: 24px; font-size: 14px } } .mob-nav .\--event-notification-icon.\--menu.\--without-text { width: 6px; height: 6px; position: absolute; top: 9px; left: 88px } @media (min-width: 641px) { .mob-nav .\--event-notification-icon.\--menu.\--without-text { width: 8px; height: 8px; top: 8px } } .mob-nav .\--event-notification-icon.\--burger.\--without-text { display: none } @media (min-width: 641px) { .mob-nav .\--event-notification-icon.\--burger.\--without-text { display: block; position: absolute; width: 8px; height: 8px; top: calc(50% - 16px); right: 18px } } @-webkit-keyframes go-left-right { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes go-left-right { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } .mob-nav.\--alternative { } .mob-nav.\--alternative .mob-nav__logo-link.\--dark { display: none } .mob-nav.\--alternative .mob-nav__logo-link.\--white { display: block } .mob-nav.\--alternative .mob-nav__inner.\--tablet .mob-nav__hamburger-column span { background-color: #ffffff } .mob-nav.\--mobile-circle-logo { } .mob-nav.\--mobile-circle-logo .mob-nav__inner.\--tablet { display: none } @media (min-width: 641px) { .mob-nav.\--mobile-circle-logo .mob-nav__inner.\--tablet { display: -webkit-flex; display: -ms-flexbox; display: flex } } .mob-nav.\--mobile-circle-logo .mob-nav__circle-logo { display: block; width: 52px } @media (min-width: 641px) { .mob-nav.\--mobile-circle-logo .mob-nav__circle-logo { display: none } } .mob-nav.\--mobile-circle-logo .mob-nav__circle-logo .mob-nav__circle-logo-link { display: block; width: 32px; height: 32px } .mob-nav.\--mobile-circle-logo .mob-nav__circle-logo .mob-nav__circle-logo-link img { width: 100%; height: 100%; object-fit: contain } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .products-mob-nav { padding: 10px 16px; position: absolute; width: 100%; top: 0; z-index: 999 } @media (min-width: 641px) { .products-mob-nav { padding: 0 } } @media (min-width: 1025px) { .products-mob-nav { display: none } } .products-mob-nav__circle-logo { display: none } .products-mob-nav__logo-link { display: block; height: auto } .products-mob-nav__logo-link picture { display: -webkit-flex; display: -ms-flexbox; display: flex; height: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative } .products-mob-nav__logo-link img { position: static; object-position: center; object-fit: contain; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-filter: unset; filter: unset; top: unset; left: unset; width: 117px; height: 20px } .products-mob-nav__logo-link img.logo { height: 50px } .products-mob-nav__inner { } .products-mob-nav__inner.\--tablet { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 } @media (min-width: 1025px) { .products-mob-nav__inner.\--tablet { display: none } } .products-mob-nav__inner.\--tablet .mob-nav__logo-link { display: block; width: auto; height: 100% } .products-mob-nav__inner.\--tablet .mob-nav__logo-link img { width: 100px; height: 52px; object-position: center; object-fit: contain } @media (min-width: 641px) { .products-mob-nav__inner.\--tablet .mob-nav__logo-link img { width: 95px; height: 49px } } .products-mob-nav__inner.\--tablet .\--white { display: none } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 6px 6px; background: transparent; border: none; justify-self: flex-end; margin-top: 2px; outline: none } @media (min-width: 641px) { .products-mob-nav__inner.\--tablet .products-mob-nav__products-column { display: -webkit-flex; display: -ms-flexbox; display: flex } } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column span { width: 18px; height: 2px; border-radius: 1px; background: #000000; display: inline-block } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column span:nth-child(1) { margin-bottom: 6px } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column .\--active-burger { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 6px 6px; background: transparent; border: none; justify-self: flex-end; margin-top: 2px; outline: none } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column-close { display: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8px; width: 24px; height: 24px; border: none; margin-top: 2px; outline: none; background-color: transparent; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-search.svg); background-size: contain; background-position: center; background-repeat: no-repeat } @media (min-width: 641px) { .products-mob-nav__inner.\--tablet .products-mob-nav__products-column-close { right: 16px } } .products-mob-nav__inner.\--tablet .products-mob-nav__products-column-close.\--close { display: block; z-index: 5 } .products-mob-nav__popup-list-accordion { padding: 16px 0 16px 28px } .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link { } .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; text-transform: capitalize } .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-sub-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; text-transform: uppercase } .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.before { position: relative } .products-mob-nav__popup-list-accordion.\--search-nav { display: none } @media (min-width: 641px) { .products-mob-nav__popup-list-accordion.\--search-nav { display: block } } @media (min-width: 641px) { .products-mob-nav__popup-list-accordion { padding: 32px 0 32px 40px } .products-mob-nav__popup-list-accordion a { font-size: 24px } } .products-mob-nav__popup-list-accordion a { height: 100%; width: auto; display: block; padding: 0; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; text-transform: capitalize; font-family: "Sofia Pro"; margin-right: 12px } .products-mob-nav__accordion { margin-top: 16px; display: none } @media (min-width: 641px) { .products-mob-nav__accordion { margin-top: 24px } } .products-mob-nav__accordion.\--active { display: block } .products-mob-nav__accordion li { padding: 12px 0 12px 22px; font-family: "Sofia Pro" } @media (min-width: 641px) { .products-mob-nav__accordion li { padding: 8px 0 8px 26px; font-family: "Sofia Pro" } } .products-mob-nav__accordion .filter-component-nav_filter-item { padding: 12px 26px 12px 24px !important } .products-mob-nav__accordion .filter-component-nav_filter-item a { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 20px } .products-mob-nav__accordion .filter-component-nav_filter-item a::before { background-color: #000000; height: 1px; width: 0; position: absolute; content: ""; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease } .products-mob-nav__accordion .filter-component-nav_filter-item:hover { } .products-mob-nav__accordion .filter-component-nav_filter-item:hover a::before { width: 100% } .products-mob-nav__popup-list { margin-bottom: 38px } .products-mob-nav__popup-list.\--products-menu { display: block; position: relative; top: 0; left: 0; right: 0; background: white; height: auto; overflow-y: scroll } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion { margin-bottom: 0; padding: 14px 0 14px 16px } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion a { font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; font-family: "Sofia Pro" } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link { } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-sub-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; text-transform: uppercase } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion .header-logo-fixed__nav-link.before { position: relative } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion.\--search-nav { display: none } @media (min-width: 641px) { .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion.\--search-nav { display: block } } @media (min-width: 641px) { .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion { padding: 32px 0 32px 40px } .products-mob-nav__popup-list.\--products-menu .products-mob-nav__popup-list-accordion a { font-size: 24px } } .products-mob-nav__popup-list.\--products-menu .mob-nav__popup__img-arrows { display: none; width: 12px; height: 12px; object-fit: contain; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2) } .products-mob-nav .wrapper-list { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; padding-left: 8px; padding-right: 8px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; overflow-y: scroll } @media (min-width: 641px) { .products-mob-nav .wrapper-list { -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start } } .products-mob-nav__popup-container { margin-bottom: 16px } @media (min-width: 641px) { .products-mob-nav__popup-container { margin-bottom: 0 } } .products-mob-nav__popup-container .mob-nav-featured { padding: 0 16px; margin-bottom: 100px } .products-mob-nav__popup-container .mob-nav-featured__subtitle { font-family: "Chiswick Sans" !important; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; padding-bottom: 36px } .products-mob-nav__popup-container .mob-nav-featured__title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; padding-top: 24px } .products-mob-nav__inner-wrapper-popup { position: absolute; background: #ffffff; top: 0; left: 0; right: 0; width: 100%; height: 0; z-index: 101; -webkit-transform: translateY(100vh); -ms-transform: translateY(100vh); transform: translateY(100vh); transition: all 0.3s ease; overflow: hidden } .products-mob-nav__inner-wrapper-popup.\--active { height: 100vh; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); overflow: scroll } .products-mob-nav__inner-wrapper-popup .products-mob-nav__popup-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0; padding-top: 16px; padding-bottom: 30px } .products-mob-nav__inner-wrapper-popup .products-mob-nav__popup-inner .products-mob-nav__products-column-close.\--close { top: 32px } .products-mob-nav__inner-wrapper-popup .products-mob-nav__popup-inner .products-mob-nav__logo-link.\--mob-logo { display: block; height: auto } @media (min-width: 641px) { .products-mob-nav__inner-wrapper-popup .products-mob-nav__popup-inner .products-mob-nav__logo-link.\--mob-logo { height: 49px } } .products-mob-nav__img-arrows { position: absolute; width: 12px; height: 12px; object-fit: contain; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2) } .products-mob-nav__wrapper { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .products-mob-nav__wrapper picture { height: 12px } .products-mob-nav__data { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: end; -ms-flex-align: end; align-items: end; width: 100%; padding-bottom: 230px } @media (min-width: 641px) { .products-mob-nav__data { padding-bottom: 100px; margin-bottom: 0 } } .products-mob-nav .\--products-nav { display: block; cursor: pointer } .products-mob-nav .\--products-nav .mob-nav__img-arrows { display: block; transition: all 0.3s ease } .products-mob-nav .\--sub-menu { display: block; cursor: pointer } .products-mob-nav .\--sub-menu .products-mob-nav__img-arrows { } .products-mob-nav .\--sub-menu .products-mob-nav__img-arrows.plus-sign { opacity: 1; transition: opacity 0.5s ease } .products-mob-nav .\--sub-menu .products-mob-nav__img-arrows.minus-sign { opacity: 0; transition: opacity 0.5s ease } @media (min-width: 1025px) { .products-mob-nav .\--sub-menu { display: none } } .products-mob-nav .\--sub-menu .mob-nav__img-arrows { display: block; transition: all 0.3s ease } .products-mob-nav .\--sub-menu.\--active { } .products-mob-nav .\--sub-menu.\--active .products-mob-nav__img-arrows { } .products-mob-nav .\--sub-menu.\--active .products-mob-nav__img-arrows.plus-sign { opacity: 0 } .products-mob-nav .\--sub-menu.\--active .products-mob-nav__img-arrows.minus-sign { opacity: 1 } .products-mob-nav .\--event-notification-icon { border-radius: 100%; background-color: #eb5757; color: white; font-family: "Sofia Pro"; line-height: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .products-mob-nav .\--event-notification-icon.hide { display: none !important } .products-mob-nav .\--event-notification-icon.\--with-text { width: 18px; height: 18px; font-size: 12px; margin-right: 12px } @media (min-width: 641px) { .products-mob-nav .\--event-notification-icon.\--with-text { width: 24px; height: 24px; font-size: 14px } } .products-mob-nav .\--event-notification-icon.\--menu.\--without-text { width: 6px; height: 6px; position: absolute; top: 9px; left: 88px } @media (min-width: 641px) { .products-mob-nav .\--event-notification-icon.\--menu.\--without-text { width: 8px; height: 8px; top: 8px } } .products-mob-nav .\--event-notification-icon.\--burger.\--without-text { display: none } @media (min-width: 641px) { .products-mob-nav .\--event-notification-icon.\--burger.\--without-text { display: block; position: absolute; width: 8px; height: 8px; top: calc(50% - 16px); right: 18px } } .products-mob-nav .nav-featured { padding: 0 40px; overflow: hidden } .products-mob-nav .nav-featured__subtitle { padding-bottom: 16px } .products-mob-nav .nav-featured h2.nav-featured__title { } @media (max-width: 640px) { .products-mob-nav .nav-featured h2.nav-featured__title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px } } @media (max-width: 640px) { .products-mob-nav .nav-featured { padding: 0 16px } } @-webkit-keyframes go-left-right { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes go-left-right { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacity { 0% { opacity: 0; } 100% { opacity: 1; } } .products-mob-nav.\--alternative { } .products-mob-nav.\--alternative .products-mob-nav__logo-link.\--dark { display: none } .products-mob-nav.\--alternative .products-mob-nav__logo-link.\--white { display: block } .products-mob-nav.\--alternative .products-mob-nav__inner.\--tablet .products-mob-nav__products-column span { background-color: #ffffff } .products-mob-nav.\--mobile-circle-logo { } .products-mob-nav.\--mobile-circle-logo .products-mob-nav__inner.\--tablet { display: none } @media (min-width: 641px) { .products-mob-nav.\--mobile-circle-logo .products-mob-nav__inner.\--tablet { display: -webkit-flex; display: -ms-flexbox; display: flex } } .products-mob-nav.\--mobile-circle-logo .products-mob-nav__circle-logo { display: block; width: 52px } @media (min-width: 641px) { .products-mob-nav.\--mobile-circle-logo .products-mob-nav__circle-logo { display: none } } .products-mob-nav.\--mobile-circle-logo .products-mob-nav__circle-logo .products-mob-nav__circle-logo-link { display: block; width: 32px; height: 32px } .products-mob-nav.\--mobile-circle-logo .products-mob-nav__circle-logo .products-mob-nav__circle-logo-link img { width: 100%; height: 100%; object-fit: contain } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .search-modal { position: fixed; top: 0; right: -100%; width: 100%; height: calc(100vh - 55px); max-height: calc(100vh - 55px); background-color: rgba(255, 255, 255, 1); z-index: 998; overflow: scroll; transition: right 0.3s ease; will-change: right; padding-bottom: 120px } @media (min-width: 641px) { .search-modal { height: 100vh; max-height: 100vh } } @media (min-width: 1025px) { .search-modal { margin-top: 79px; height: calc(100vh - 80px); max-height: calc(100vh - 80px) } } .search-modal .loading { display: none } .search-modal .loading .giff { width: 125px } .search-modal__inner { padding: 0 16px 20px } @media (min-width: 641px) { .search-modal__inner { padding: 25px 40px 0 } } @media (min-width: 1025px) { .search-modal__inner { padding-top: 34px; padding-bottom: 80px } } .search-modal.\--active { right: 0 } .search-modal__top { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 82px } @media (min-width: 641px) { .search-modal__top { margin-bottom: 40px } } @media (min-width: 1025px) { .search-modal__top { margin-bottom: 25px } } .search-modal__btn-close { display: block; width: 24px; height: 24px; cursor: pointer; background: transparent; border: none; padding: 0 } .search-modal__btn-close:focus { outline: none } @media (min-width: 641px) { .search-modal__btn-close { width: 40px; height: 40px; -webkit-transform: translateX(29px); -ms-transform: translateX(29px); transform: translateX(29px) } } @media (min-width: 1025px) { .search-modal__btn-close { -webkit-transform: translateX(8px); -ms-transform: translateX(8px); transform: translateX(8px) } } .search-modal__btn-close img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center } .search-modal__input-wrap { position: relative; margin-bottom: 131px } @media (min-width: 641px) { .search-modal__input-wrap { max-width: 565px; margin-bottom: 131px } } @media (min-width: 1025px) { .search-modal__input-wrap { max-width: calc(50% - 24px); margin-bottom: 131px } } .search-modal__input-wrap.\--active-load { margin-bottom: 0 } .search-modal__input { background: transparent; font-family: "Sofia Pro"; font-style: normal; padding: 0 24px 0 0; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .search-modal__input::-webkit-input-placeholder { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; color: rgba(46, 26, 71, .4) } .search-modal__input:-ms-input-placeholder { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; color: rgba(46, 26, 71, .4) } .search-modal__input::placeholder { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; color: rgba(46, 26, 71, .4) } .search-modal__search-btn, .search-modal__clear-btn { position: absolute; background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; border: none; cursor: pointer } .search-modal__search-btn { top: 0; right: 3px; width: 16px; height: 16px; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/search.svg) } .search-modal__search-btn:focus { outline: none } .search-modal__clear-btn { display: none; bottom: 0; right: 0; width: 32px; height: 32px; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-search.svg) } .search-modal__clear-btn:focus { outline: none } .search-modal__result-qty { margin-bottom: 24px } .search-modal__results { margin-bottom: 40px } @media (min-width: 1025px) { .search-modal__results { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 48px; grid-row-gap: 48px } } .search-modal__result-block { display: block; margin-bottom: 32px; padding-bottom: 47px; border-bottom: 1px solid #777777 } @media (min-width: 1025px) { .search-modal__result-block { margin-bottom: 0 } } .search-modal__result-block.\--not-found {} .search-modal__result-block.\--not-found h2 { margin-bottom: 33px } .search-modal__result-block.\--not-found p { margin-bottom: 24px } .search-modal__result-block.\--not-found p:last-child { margin-bottom: 0 } .search-modal__result-type { font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } .search-modal__result-title-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .search-modal__result-title { font-size: 38.4px; font-size: 2.4rem; line-height: 110%; min-height: 64px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .search-modal__result-view { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-left: 24px; width: 24px; height: 24px; background-image: url(/img/arrow-to-right-black.svg); background-size: contain; background-position: center; cursor: pointer } .search-modal .pagination-new { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .search-modal .pagination-new { max-width: 389px } } @media (min-width: 1025px) { .search-modal .pagination-new { max-width: 344px } } .search-modal .pagination-new li { cursor: pointer } .search-modal .pagination-new__btn { display: block; padding-left: 4px; padding-right: 4px; padding-bottom: 4px; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; transition: all 0.3s ease } .search-modal .pagination-new__btn:hover { font-weight: 800; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .search-modal .pagination-new__btn.\--active { font-weight: 800; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); border-bottom: 1px solid #171717 } .search-modal .pagination-new__prev-btn, .search-modal .pagination-new__next-btn { display: block; width: 24px; height: 24px; background-size: contain; background-position: center; background-image: url(/img/arrow-to-right-black.svg) } .search-modal .pagination-new__prev-btn { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .search-modal .pagination-new__prev-btn.\--disabled, .search-modal .pagination-new__next-btn.\--disabled { opacity: 0.4; cursor: default } .search-modal h3 { font-family: "Sofia Pro" } .search-modal .bottom-offset { width: 100%; height: 1px; display: block } /* @import '../../styleguide/assets/scss/settings'; .authorization-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); visibility: hidden; opacity: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity .3s ease, visibility .3s ease; &.--open { visibility: visible; opacity: 1; } &__close-btn { position: absolute; top: 16px; right: 16px; opacity: .4; cursor: pointer; } &__content { width: 100%; height: 100%; max-width: 80vw; max-height: 90vh; display: flex; background-size: cover; background-position: center; position: relative; &::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, white 90%); } @include breakpoint(small only) { max-width: 90vw; max-height: 80vh; } } &__form-wrap { width: 60%; padding: 40px; display: flex; align-items: center; z-index: 1; position: relative; @include breakpoint(small only) { width: 100%; padding: 20px; } } &__img-bg { width: 40%; background-size: cover; background-position: center; z-index: 1; position: relative; @include breakpoint(small only) { display: none; } } &__title { color: inherit; margin-bottom: 24px; } &__description { color: inherit; margin-bottom: 20px; } &__width-wrap { width: 100%; max-width: 450px; } &__form { display: flex; flex-direction: column; input { border: none; border-bottom: 1px solid #4a4a4a; box-shadow: none; background: transparent; margin-bottom: 14px; padding: 6px 0; color: inherit; } } &__form-btns-wrap { display: flex; align-items: center; button { color: inherit; cursor: pointer; text-decoration: none; text-transform: uppercase; padding-bottom: 0; &:hover { text-decoration: underline; } } span { margin-left: 10px; margin-right: 6px; @include breakpoint(small only) { margin-left: auto; } } a { color: inherit; text-decoration: underline; &:hover { text-decoration: none; } } } } */ /* @import '../../styleguide/assets/scss/settings'; .old-b { display: none; padding: 41px; color: #4a4a4a; background: #fafafa; top: 0; left: 0; width: 100%; height: 100vh; z-index: 8888; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; overflow: scroll; &.--show { display: flex; position: fixed; } &__logo { max-width: 170px; margin: 0; margin-bottom: 2rem; } &__copy { margin-top: 40px; h3 { margin-bottom: 32px; } } &__social.menu-social { margin-top: 2rem; margin-bottom: 40px; position: static; display: flex !important; li { margin: 0 16px; } i { color: #4a4a4a; } } &__links-list { margin-top: 2.4rem; } &__links-item { margin-bottom: 1.8rem; } &__links-link { padding-bottom: 4px; color: #4a4a4a; text-decoration: none; position: relative; &::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #4a4a4a; transition: opacity 0.3s ease; } &:hover { &::after { opacity: 0; } } } } */ :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .landscape-txt-mob { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 200; background: #ffffff; display: none } @media (max-width: 896px) and (min-aspect-ratio: 13/9) { .landscape-txt-mob { display: block } } .landscape-txt-mob__inner { padding: 32px } .landscape-txt-mob__title { text-align: center; margin-bottom: 49px } .landscape-txt-mob__title img { width: 83px; height: 43px; object-fit: contain } .landscape-txt-mob__img-txt { text-align: center } .landscape-txt-mob__img-txt img { width: 40px; object-fit: contain; margin-bottom: 24px } .landscape-txt-mob__img-txt p { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 216px; margin: 0 auto } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .scroll-to-top { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: fixed; bottom: 32px; right: 32px; padding: 16px; font-size: 19.2px; font-size: 1.2rem; line-height: 0; background: #ffffff; border: 1px solid #f3f2f4; box-sizing: border-box; box-shadow: 0 4px 4px rgba(0, 0, 0, .1); border-radius: 5px; z-index: 5000; cursor: pointer } .scroll-to-top picture { margin-left: 10px } @media (max-width: 1024px) { .scroll-to-top { bottom: 70px; right: 8px } } @media (max-width: 640px) { .scroll-to-top { width: 40px; height: 40px; bottom: auto; top: calc(85% + 30px); right: 10px; padding: 0; border-radius: 40px } .scroll-to-top span { display: none } .scroll-to-top picture { margin-left: 0; margin-top: -4px } } .scroll-to-top.hide { display: none } .scroll-to-top.upper {} @media (max-width: 640px) { .scroll-to-top.upper { top: calc(50% + 80px) } } /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { 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 ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { 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 ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * 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 style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * 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 ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 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; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * 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; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 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 { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { 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 and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [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 IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /** RESET FILE Portions Adapted from Bootstrap 4 Alpha */ /** * Reset Box Sizing */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /** * Make Viewport Responsive */ @at-root { @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-webkit-viewport { width: device-width; } @viewport { width: device-width; } } /** * RESET HTML AND MORE */ html { /* As a side-effect of setting the @viewport above, IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, thus making it hard to click on stuff near the right edge of the page. So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. */ /* Changes the default tap highlight to be completely transparent in iOS. */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Suppress the focus outline on elements that cannot be accessed via keyboard. This prevents an unwanted focus outline from appearing around elements that might still respond to pointer events. Credit: https://github.com/suitcss/base */ [tabindex="-1"]:focus { outline: none !important; } /* iOS "clickable elements" fix for role="button" Fixes "clickability" issue (and more generally, the firing of events such as focus as well) for traditionally non-focusable elements with role="button" see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile */ [role="button"] { cursor: pointer; } /* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 DON'T remove the click delay when `` is present. However, they DO support removing the click delay via `touch-action: manipulation`. See: * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch * http://caniuse.com/#feat=css-touch-action * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay */ a, area, button, [role="button"], input, label, select, summary, textarea { -ms-touch-action: manipulation; touch-action: manipulation; -webkit-appearance: none; } label { /* Allow labels to use `margin` for spacing. */ display: inline-block; } /* Work around a Firefox/IE bug where the transparent `button` background results in a loss of the default `button` focus styles. Credit: https://github.com/suitcss/base/ */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, textarea { /* Remove all `margin`s so our classes don't have to do it themselves. */ margin: 0; /* Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are properly inherited. However, `line-height` isn't addressed there. Using this ensures we don't need to unnecessarily redeclare the global font stack. */ line-height: inherit; /* iOS adds rounded borders by default */ border-radius: 0; } textarea { /* Textareas should really only resize vertically so they don't break their (horizontal) containers. */ resize: vertical; } fieldset { /* Chrome and Firefox set a `min-width: min-content;` on fieldsets, so we reset that to ensure it behaves more like a standard block element. See https://github.com/twbs/bootstrap/issues/12359. */ min-width: 0; /* Reset the default outline behavior of fieldsets so they don't affect page layout. */ padding: 0; margin: 0; border: 0; } legend { /* Reset the entire legend element to match the `fieldset` */ display: block; width: 100%; padding: 0; margin-bottom: 8px; margin-bottom: 0.5rem; font-size: 24px; font-size: 1.5rem; line-height: inherit; /* border: 0; */ } input[type="search"] { /* Undo Normalize's default here to match our global overrides. */ box-sizing: inherit; /* This overrides the extra rounded corners on search inputs in iOS so that our `.form-control` class can properly style them. Note that this cannot simply be added to `.form-control` as it's not specific enough. For details, see https://github.com/twbs/bootstrap/issues/11586. */ -webkit-appearance: none; } /* Always hide an element with the `hidden` HTML attribute (from PureCSS). */ [hidden] { display: none !important; } /** * RESET ALL BASIC STYLING */ /* 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-family: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } img { max-width: 100%; } @font-face { font-family: 'Helvetica Neue'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/HelveticaNeueCyr-Light.eot'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/HelveticaNeueCyr-Light.eot?iefix') format('eot'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/HelveticaNeueCyr-Light.woff') format('woff'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/HelveticaNeueCyr-Light.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Minion Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/MinionPro-Regular.eot'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/MinionPro-Regular.eot?iefix') format('eot'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/MinionPro-Regular.woff') format('woff'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/MinionPro-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Minion Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/MinionPro-Bold.otf'); font-weight: 600; font-display: swap; } @font-face { font-family: 'HelveticaNeue-All'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/HelveticaNeue.ttc'); font-display: swap; } @font-face { font-family: 'Didot'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/TheanoDidot-Regular.eot'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/TheanoDidot-Regular.eot?iefix') format('eot'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/TheanoDidot-Regular.woff') format('woff'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/TheanoDidot-Regular.ttf') format('truetype'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/TheanoDidot-Regular.svg#webfont') format('svg'); font-style: normal; font-display: swap; } @font-face { font-family: 'Didot'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Didot-Italic-02.ttf') format('truetype'); font-style: italic; font-display: swap; } @font-face { font-family: 'Cera Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/CeraPROFamily/Cera-Pro-Light.woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Cera Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/CeraPROFamily/Cera-Pro-Regular.woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Cera Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/CeraPROFamily/Cera-Pro-Medium.woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Cera Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/CeraPROFamily/Cera-Pro-Bold.woff'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Chiswick Sans'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Light.otf'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Light.otf') format('opentype'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Light-Web.woff') format('woff'); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: 'Chiswick Sans'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Regular.otf'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Regular.otf') format('opentype'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-Regular-Web.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Chiswick Sans'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-RegularItalic.otf'); src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-RegularItalic.otf') format('opentype'), url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/Chiswick/ChiswickSans-RegularItalic-Web.woff') format('woff'); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Regular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Regular italic.otf') format('opentype'); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Light.otf') format('opentype'); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Light italic.otf') format('opentype'); font-style: italic; font-weight: 300; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Bold.otf') format('opentype'); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: 'Sofia Pro'; src: url('https://d8ua7bnpmn6n9.cloudfront.net/resources/fonts/SofiaProFamily/Mostardesign - Sofia Pro Bold italic.otf') format('opentype'); font-style: italic; font-weight: 700; font-display: swap; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /* To calc the VW: 100 / (breakpoint * pixel-to-rem-unit ) */ } html { position: relative; min-height: 100%; font-size: 62.5%; font-size: 10px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased } @media (min-width: 1700px) { html { font-size: 0.588vw } } body { /* background: var(--colorBackground); */ background: #ffffff; color: #171717; position: relative; height: 100% } body.\--no-scroll { overflow: hidden; height: 100% } @media (max-width: 896px) and (min-aspect-ratio: 13/9) { body { overflow: hidden } } #main-content { min-height: 100vh; } #main-content.\--no-scroll { overflow: hidden; width: 100%; position: fixed } @media (min-width: 1025px) { #main-content.\--no-scroll { position: relative } } #main-content.\--search-active { position: relative; } .homepage.\--mobile { } .homepage.\--mobile p, .homepage.\--mobile h2, .homepage.\--mobile h3, .homepage.\--mobile h4, .homepage.\--mobile h5 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .container { margin-right: 8px; margin-left: 8px } @media (min-width: 641px) { .container { padding-right: 32px; padding-left: 32px; max-width: 1440px; margin: 0 auto } } .container.\--small { padding-right: 8px; padding-left: 8px; margin: 0 } @media (min-width: 1025px) { .container.\--small { padding-right: 32px; padding-left: 32px; max-width: 1440px; margin: 0 auto } } .container.\--big-container { padding-right: 16px; padding-left: 16px; margin: 0 } @media (min-width: 1025px) { .container.\--big-container { padding-right: 40px; padding-left: 40px; max-width: 1440px; margin: 0 auto } } a { color: #171717; text-decoration: none; } input { width: 100%; line-height: 24px; line-height: 2.4rem; color: #2e1a47; padding-left: 16px; padding-right: 16px; background-color: #f3f2f4; border: none; border-bottom: 1px solid #2e1a47 } input:focus { outline: none } input::-webkit-input-placeholder { color: #2e1a47; opacity: 0.4 } input:-ms-input-placeholder { color: #2e1a47; opacity: 0.4 } input::placeholder { color: #2e1a47; opacity: 0.4 } img { width: 100%; height: 100%; object-fit: cover; object-position: center; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } html { } html body { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } @media (min-width: 641px) { html body { font-size: 1.8rem; line-height: 2.8rem } } html p, html .p { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } @media (min-width: 641px) { html p, html .p { font-size: 1.8rem; line-height: 2.8rem } } html h1, html .h1 { font-family: "Sofia Pro"; font-size: 51.2px; font-size: 3.2rem; line-height: 51.2px; line-height: 3.2rem; font-weight: 300 } @media (min-width: 641px) { html h1, html .h1 { font-size: 4rem; line-height: 100% } } html h2, html .h2 { font-family: "Sofia Pro"; font-size: 51.2px; font-size: 3.2rem; line-height: 51.2px; line-height: 3.2rem; font-weight: 300 } @media (min-width: 641px) { html h2, html .h2 { font-size: 4rem; line-height: 100% } } html h3, html .h3 { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300 } @media (min-width: 641px) { html h3, html .h3 { font-size: 4rem; line-height: 110% } } html h4, html .h4, html .\--text-large { font-family: "Sofia Pro"; font-size: 18px; line-height: 120% } @media (min-width: 641px) { html h4, html .h4, html .\--text-large { font-weight: 300; font-size: 2.4rem; line-height: 110% } } html h5, html .h5 { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } @media (min-width: 641px) { html h5, html .h5 { font-size: 1.8rem; line-height: 2.8rem } } html .\--text-small { font-family: "Sofia Pro"; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem } @media (min-width: 641px) { html .\--text-small { font-size: 1.4rem; line-height: 1.4rem } } html .\--bold-heading { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .btn-primary { display: block; position: relative; padding-left: 24px; padding-right: 24px; background-color: #2e1a47; color: #f3f2f4; box-shadow: 0 0 10px rgba(0, 0, 0, .16); font-size: 22.4px; font-size: 1.4rem; line-height: 64px; text-align: center; border: none; cursor: pointer; font-family: "Minion Pro" } .btn-primary:focus { outline: none } @media (min-width: 1025px) { .btn-primary { max-width: 264px } } .btn-wide { } @media (min-width: 1025px) { .btn-wide { max-width: 352px } } .btn-medium { line-height: 56px; } .btn-small { text-align: left; line-height: 32px; } .\--btn-arrow { padding-right: 48px; position: relative } .\--btn-arrow::before { opacity: 0; position: absolute; display: block; content: ''; width: 24px; height: 24px; right: 18px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg) scale(0.5); -ms-transform: translateY(-50%) rotate(45deg) scale(0.5); transform: translateY(-50%) rotate(45deg) scale(0.5); background-image: url(/img/arrow-to-right.svg); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; transition: all 0.3s ease } .\--btn-arrow::after { position: absolute; display: block; content: ''; width: 24px; height: 24px; right: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: url(/img/arrow-to-bottom.svg); background-size: contain; background-position: center; background-repeat: no-repeat; transition: all 0.3s ease } .\--btn-arrow:hover::before { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; transition: all 0.3s ease } .\--btn-arrow:hover::after { -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); opacity: 0; transition: all 0.3s ease } .btn-white { position: relative; width: 100%; height: 64px; padding-left: 24px; padding-right: 24px; background-color: #ffffff; color: #2e1a47; box-shadow: 0 0 10px rgba(0, 0, 0, .16); font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: none; cursor: pointer } .btn-white::before { opacity: 0; position: absolute; display: block; content: ''; width: 24px; height: 24px; right: 18px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg) scale(0.5); -ms-transform: translateY(-50%) rotate(45deg) scale(0.5); transform: translateY(-50%) rotate(45deg) scale(0.5); background-image: url(/img/arrow-to-right-black.svg); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1; transition: all 0.3s ease } .btn-white::after { position: absolute; display: block; content: ''; width: 24px; height: 24px; right: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/arrow-to-bottom_black.svg); background-size: contain; background-position: center; background-repeat: no-repeat; transition: all 0.3s ease } .btn-white:hover::before { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; transition: all 0.3s ease } .btn-white:hover::after { -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); opacity: 0; transition: all 0.3s ease } @media (min-width: 1025px) { .btn-white { max-width: 264px; height: 48px } } .btn-secondary { display: block; width: 120px; font-family: "Minion Pro"; text-align: center; border-radius: 16px; border: 1px solid #171717; color: #171717; font-size: 22.4px; font-size: 1.4rem; line-height: 32px; cursor: pointer; } .\--btn-icon { background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; } .btn-outline { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; display: inline-block; background-color: transparent; padding: 12px 24px; text-align: center; border: 1px solid #ffffff; font-weight: 400; transition: all 0.3s ease; cursor: pointer } .btn-outline.\--white { color: #ffffff } .btn-outline.\--white:hover { color: #171717; background: #ffffff } .btn-outline.\--gray { color: #171717; border: 1px solid #171717 } .btn-outline.\--gray:hover { color: #ffffff; background: #171717 } .btn-outline.\--black { color: #ffffff; border: 1px solid #171717; background: #171717 } .btn-outline.\--black:hover { color: #171717; background: #ffffff } .\--btn-hover-black-txt-white-bg { transition: all 0.3s ease } .\--btn-hover-black-txt-white-bg:hover { background: #ffffff !important; border: 1px solid #ffffff !important; color: #171717 !important } .\--btn-hover-white-txt-black-bg { transition: all 0.3s ease } .\--btn-hover-white-txt-black-bg:hover { background: #171717 !important; border: 1px solid #171717 !important; color: #ffffff !important } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } /* slideUpAnimation is used in the bond with the viewport-check function in order to make a slide-up effect for necessary sections/elements when a section/element area is in a window screen area */ @-webkit-keyframes slideUpAnimation { to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes slideUpAnimation { to { -webkit-transform: none; transform: none; opacity: 1; } } .\--slideUp { -webkit-animation-name: slideUpAnimation; animation-name: slideUpAnimation; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* add a needed section/element selector beneath */ .small-cards-product__card, .img-title-copy-grid__inner, .title-card-grid__grid, .title-txt-slider, .press-banner__card, .moisture-capsule-anim, .block-fade-up { } @media (min-width: 1025px) { .small-cards-product__card, .img-title-copy-grid__inner, .title-card-grid__grid, .title-txt-slider, .press-banner__card, .moisture-capsule-anim, .block-fade-up { -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); opacity: 0; } } @-webkit-keyframes slideRightAnimation { to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes slideRightAnimation { to { -webkit-transform: none; transform: none; opacity: 1; } } .\--slideRight { -webkit-animation-name: slideRightAnimation; animation-name: slideRightAnimation; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* add a needed section/element selector beneath */ .block-fade-right { } @media (min-width: 1025px) { .block-fade-right { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .wys { } .wys h1, .wys h2, .wys h3, .wys h4, .wys h5, .wys h6 { font-family: "Sofia Pro"; padding: 8px; display: inline-block; margin-bottom: 0 } .wys h3 { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 1025px) { .wys h3 { font-size: 2.4rem; line-height: 110% } } .wys h4 { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; text-transform: uppercase } .wys p { padding: 16px 8px; display: inline-block; margin-bottom: 24px } .wys a { color: #171717; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; padding: 8px } .wys iframe { width: 100%; height: 381px !important; } .wys figure { width: 100%; padding: 24px 8px; display: block } .wys figure p{ width: 100%; } .wys figure iframe { width: calc(100vw - 32px) !important; height: 50vw !important } @media (min-width: 641px) { .wys figure iframe { width: 100% !important; height: 381px !important } } .wys img { width: 100%; height: auto; object-fit: contain } .wys ol { padding: 8px; counter-reset: decimal } .wys ol li { margin-bottom: 24px } .wys ol li::before { counter-increment: decimal; content: counter(decimal) ") "; display: inline-block } .wys ul { padding: 8px } .wys ul li { } .wys ul li::before { content: "\2022"; display: inline-block; padding-right: 3px } .wys small { font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100% } .wys blockquote { font-size: 38.4px; font-size: 2.4rem; line-height: 151.5%; color: #000000; font-style: italic; margin-bottom: 16px } .wys em { font-style: italic } .wys strong { font-weight: 800 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .lazyload-bg { background-color: #ffffff; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/alterna-logo--black.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 300ms; } .acsb-trigger.acsb-trigger-size-small { width: 40px !important; height: 40px !important; } .acsb-trigger.acsb-trigger-position-y-center { top: 65% !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .nav-full-height { padding-left: 8px; padding-right: 8px } .nav-full-height .container { min-height: 100vh; padding-top: 16px; padding-bottom: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .nav-full-height__top { margin-bottom: 40px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .nav-full-height__logo { width: 32px; height: 32px; border-radius: 50%; background-color: #777777; background-image: url(/img/logo-invert.svg); background-size: contain; background-position: center } .nav-full-height__top-icons { display: -webkit-flex; display: -ms-flexbox; display: flex } .nav-full-height__top-icons a { position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #d3d3d3; margin-left: 24px } .nav-full-height__top-icons a::after { position: absolute; display: block; content: ''; width: 20px; height: 20px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: contain; background-position: center; background-repeat: no-repeat } .nav-full-height .\--location::after { background-image: url(/img/location.svg) } .nav-full-height .\--instagram::after { background-image: url(/img/instagram.svg) } .nav-full-height .\--search::after { background-image: url(/img/search.svg) } .nav-full-height__navigation { display: -ms-grid; display: grid; grid-row-gap: 16px; grid-column-gap: 8px; -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "products products" "caviar canvas" "lifestyle lifestyle" "hair hair" "professional professional"; margin-bottom: 16px } .nav-full-height .\--products { grid-area: products } .nav-full-height .\--caviar { grid-area: caviar } .nav-full-height .\--canvas { grid-area: canvas } .nav-full-height .\--lifestyle { grid-area: lifestyle } .nav-full-height .\--hair { grid-area: hair } .nav-full-height .\--professional { grid-area: professional } .nav-full-height nav a { background-color: #c4c4c4; font-size: 22.4px; font-size: 1.4rem; line-height: 80px; text-align: center; font-family: "Minion Pro" } .nav-full-height .btn-primary { margin-top: auto } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .nav-full-height-professional { padding-left: 8px; padding-right: 8px } .nav-full-height-professional .container { min-height: 100vh; padding-top: 16px; padding-bottom: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .nav-full-height-professional__top { margin-bottom: 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .nav-full-height-professional__logo { width: 32px; height: 32px; border-radius: 50%; background-color: #777777; background-image: url(/img/logo-invert.svg); background-size: contain; background-position: center } .nav-full-height-professional__top-icons { display: -webkit-flex; display: -ms-flexbox; display: flex } .nav-full-height-professional__top-icons a { position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #d3d3d3; margin-left: 24px } .nav-full-height-professional__top-icons a::after { position: absolute; display: block; content: ''; width: 20px; height: 20px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: contain; background-position: center; background-repeat: no-repeat } .nav-full-height-professional .\--location::after { background-image: url(/img/location.svg) } .nav-full-height-professional .\--instagram::after { background-image: url(/img/instagram.svg) } .nav-full-height-professional .\--search::after { background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/search.svg) } .nav-full-height-professional__heading { text-align: center; text-transform: uppercase; margin-bottom: 8px } .nav-full-height-professional__btns-transparent { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 30px } .nav-full-height-professional__btns-transparent a { width: 152px; font-size: 19.2px; font-size: 1.2rem; line-height: 38.4px; line-height: 2.4rem; text-align: center } .nav-full-height-professional__navigation { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .nav-full-height-professional__link { background-color: #c4c4c4; font-size: 22.4px; font-size: 1.4rem; line-height: 153.6px; line-height: 9.6rem; text-align: center; font-family: "Minion Pro"; margin-bottom: 8px } .nav-full-height-professional__btn { position: relative } .nav-full-height-professional__btn::after { display: block; position: absolute; content: ''; width: 16px; height: 16px; left: 16px; top: 50%; -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); border: 1px solid #f3f2f4; background-image: url(/img/arrow-to-right.svg); background-size: contain; background-position: center; background-repeat: no-repeat } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .circle-h1-txt { min-height: 100vh; padding-top: 24px; padding-bottom: 24px; color: #f3f2f4 } .circle-h1-txt__inner { position: relative; height: calc(100vh - 48px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .circle-h1-txt__bg-img { position: absolute; display: block; content: ''; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; overflow: hidden; z-index: -1 } .circle-h1-txt__bg-img img { object-fit: cover; object-position: center; width: 100%; height: 100% } .circle-h1-txt__bg-img::after { position: absolute; display: block; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(102, 102, 102, .5) 0%, rgba(102, 102, 102, .3) 50%, rgba(102, 102, 102, .5) 100%) } .circle-h1-txt__circle-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-left: 10px; padding-right: 10px; margin-top: 2px; margin-bottom: 16px } .circle-h1-txt__circle { width: 16px; height: 16px; border-radius: 50%; background-color: #ff0000 } .circle-h1-txt__title { padding-left: 8px; padding-right: 8px; min-height: 96px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 40px; text-transform: uppercase } .circle-h1-txt__txt { padding-left: 8px; padding-right: 8px; margin-bottom: 136px } .circle-h1-txt .btn-primary { display: none; margin-bottom: 46px; margin-left: 8px; margin-right: 8px } .circle-h1-txt-btn { } .circle-h1-txt-btn .circle-h1-txt__inner { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .circle-h1-txt-btn .circle-h1-txt__bg-img { border-radius: 0 } .circle-h1-txt-btn .circle-h1-txt__circle-wrap { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .circle-h1-txt-btn .circle-h1-txt-btn__bg { background: #f3f2f4; color: #171717; padding-top: 24px } .circle-h1-txt-btn .circle-h1-txt__txt { margin-bottom: 26px } .circle-h1-txt-btn .btn-primary { display: block } .bg-h1-btn { } .bg-h1-btn .circle-h1-txt__inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .bg-h1-btn .circle-h1-txt__bg-img { border-radius: 0 } .bg-h1-btn .circle-h1-txt__circle-wrap { display: none } .bg-h1-btn .circle-h1-txt-btn__bg { background: #f3f2f4; color: #171717; padding-top: 48px } .bg-h1-btn .circle-h1-txt__title { min-height: 72px; margin-bottom: 32px; text-align: center } .bg-h1-btn .circle-h1-txt__txt { display: none } .bg-h1-btn .btn-primary { display: block } @media (min-width: 1025px) { .circle-h1-txt { min-height: 100vh; padding-top: 88px; padding-bottom: 48px } .circle-h1-txt__inner::after { position: absolute; display: block; content: ''; left: 8px; right: 8px; bottom: 0; height: 1px; background-color: #777777 } .circle-h1-txt__circle-wrap { padding: 0; margin-top: 0; margin-bottom: 8px } .circle-h1-txt .circle-h1-txt-btn__bg { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; background-color: transparent; background-image: linear-gradient(306.47deg, rgba(119, 119, 119, .7) 43.21%, rgba(176, 176, 176, .2) 78.11%); position: relative; margin-left: 8px; margin-right: 8px; margin-bottom: 64px; padding-left: 96px } .circle-h1-txt__txt { max-width: 472px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .small-cards-with-description { } .small-cards-with-description__inner { padding-left: 8px; padding-right: 8px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 24px } .small-cards-with-description__card { text-align: center } .small-cards-with-description__card-img-wrap { display: block; border-radius: 8px; height: 192px; overflow: hidden; margin-bottom: 40px } .small-cards-with-description__card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center } .small-cards-with-description__card-title { font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase; margin-bottom: 16px } .small-cards-with-description__btn { font-size: 19.2px; font-size: 1.2rem; line-height: 19.2px; line-height: 1.2rem } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .small-img-grid { } .small-img-grid__inner { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 48px 16px } .small-img-grid__img-wrap { overflow: hidden } .small-img-grid picture { display: block; height: 132px; width: 100% } .small-img-grid picture img { width: 100%; height: 100%; object-fit: cover; object-position: center } .small-img-grid__img-title { display: none } .small-img-grid__img-subtitle { display: none } @media (min-width: 1025px) { .small-img-grid { } .small-img-grid__inner { -ms-grid-columns: (minmax(368px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(368px, 1fr)); grid-gap: 48px 32px; padding-left: 8px; padding-right: 8px } .small-img-grid picture { height: 296px; margin-bottom: 32px } .small-img-grid__img-title { display: block; margin-bottom: 16px } .small-img-grid__img-subtitle { display: block; text-transform: uppercase } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .circle-loading { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 100vh } .circle-loading__circle { width: 160px; height: 160px; border-radius: 50%; background-color: #2e1a47; opacity: 0.5; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 72px; margin-bottom: 32px } .circle-loading__logo { width: 59%; height: 15%; background-image: url(/img/logo.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .circle-loading__title { font-size: 22.4px; font-size: 1.4rem; text-transform: uppercase; line-height: 40px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .small-cards-product { padding-top: 15px; padding-bottom: 24px; background: #ffffff } @media (min-width: 641px) { .small-cards-product { padding-top: 50px; padding-bottom: 50px } } .small-cards-product__inner h4 { text-transform: uppercase } .small-cards-product__grid { padding-top: 48px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 40px } @media (min-width: 641px) { .small-cards-product__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 32px; grid-row-gap: 56px } } @media (min-width: 1025px) { .small-cards-product__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 48px; grid-row-gap: 64px } } .small-cards-product h2 { padding: 24px 8px } .small-cards-product__card { overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } .small-cards-product__card-img-wrap { height: 200px; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .small-cards-product__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .small-cards-product__card-img-wrap { height: 365px } } .small-cards-product__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .small-cards-product__card-img { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .small-cards-product__card-img { height: 212px } } @media (min-width: 1025px) { .small-cards-product__card-img { height: 365px } } .small-cards-product__card-img img { width: 100%; height: 100%; object-fit: contain; object-position: center } .small-cards-product .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .small-cards-product .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } @media (min-width: 1025px) { .small-cards-product {} .small-cards-product__card:hover {} .small-cards-product__card:hover .\--first { opacity: 0 } .small-cards-product__card:hover .\--second { opacity: 1 } } .small-cards-product__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product__card-title { text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .small-cards-product .bv-main-wrap { margin-bottom: 8px } .small-cards-product__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .small-cards-product__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .small-cards-product__star { width: 16px; height: 16px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .small-cards-product__star.\--black-star { background-image: url(/img/black-star.svg) } .small-cards-product__star.\--half-star { background-image: url(/img/half-star.svg) } .small-cards-product__btn { position: fixed; z-index: 100; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; height: 40px; text-align: center; border-radius: 20px; border: 1px solid #171717; background: #f3f2f4; cursor: pointer } .small-cards-product.\--double-img {} .small-cards-product.\--double-img .small-cards-product__grid {} @media (min-width: 641px) { .small-cards-product.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1025px) { .small-cards-product.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn { display: none } @media (max-width: 640px) { .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; cursor: pointer; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); left: auto; right: 10px; bottom: auto; top: calc(50% + 30px); background: #ffffff; border: 1px solid #f3f2f4; border-radius: 40px; box-sizing: border-box; box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn .filter-icon { width: 16px; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex } .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn .filter-icon.filter-filled { position: relative } .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn .filter-icon.filter-filled::after { content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #eb5757; position: absolute; top: -4px; right: -4px } .small-cards-product.\--double-img .small-cards-product__btn.mobile-filter-btn .filter-icon.hide { display: none } } .small-cards-product.\--double-img h4 { padding: 22px 8px; font-size: 32px } @media (min-width: 641px) { .small-cards-product.\--double-img h4 { display: none } } .small-cards-product.\--double-img .small-cards-product__card { position: relative; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } .small-cards-product.\--double-img .small-cards-product__card-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s ease } .small-cards-product.\--results-page {} .small-cards-product.\--results-page h4 { text-align: center } .small-cards-product.\--results-page .small-cards-product__grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 641px) { .small-cards-product.\--results-page .small-cards-product__grid { max-width: 288px; margin: 0 auto } } @media (min-width: 1025px) { .small-cards-product.\--results-page .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); max-width: 784px; grid-column-gap: 248px } } .small-cards-product.\--results-page .small-cards-product__card-img-wrap { width: 100%; height: 460px } @media (min-width: 641px) { .small-cards-product.\--results-page .small-cards-product__card-img-wrap { height: 400px } } @media (min-width: 1025px) { .small-cards-product.\--results-page .small-cards-product__card-img-wrap { height: 365px } } @media (min-width: 1025px) { .small-cards-product { padding-top: 128px } .small-cards-product__grid { border-top: none; padding-top: 0; grid-column-gap: 48px } } .rating_summary .bv_main_container { padding: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important } .rating_summary .bv_main_container svg { width: 16px !important; height: 16px !important } .first-img { opacity: 1; transition: opacity 0.3s ease; } .second-img { opacity: 0; transition: opacity 0.3s ease; } @media (min-width: 1025px) { .small-cards-product__card:hover .first-img { opacity: 0; } .small-cards-product__card:hover .second-img { opacity: 1; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .cards-form { position: relative } .cards-form__inner { padding: 32px 8px 22px 8px; font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase } .cards-form__cards-title { margin-bottom: 24px } .cards-form__cards-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 40px 24px; margin-bottom: 16px } .cards-form__card { height: 152px; border-radius: 8px; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #2e1a47; background: linear-gradient(to top, rgba(102, 102, 102, .5) 0%, rgba(102, 102, 102, .3) 50%, rgba(102, 102, 102, .5) 100%); position: relative } .cards-form__card-img-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 } .cards-form__card-img-wrap img { width: 100%; height: 100%; object-position: center; object-fit: cover } .cards-form__form-legend { margin-bottom: 20px } .cards-form__form-fieldset { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-row-gap: 32px; margin-bottom: 6px } .cards-form__input { position: relative } .cards-form input { width: 100%; padding-left: 24px; padding-right: 66px; background-color: #2e1a47; color: #f3f2f4; border: none; transition: all 0.3s ease } .cards-form input::-webkit-input-placeholder { color: #f3f2f4 } .cards-form input:-ms-input-placeholder { color: #f3f2f4 } .cards-form input::placeholder { color: #f3f2f4 } .cards-form__form-fieldset input { line-height: 32px } .cards-form__form-fieldset input:focus { color: #2e1a47; background: #ffffff; outline: none; box-shadow: 0 0 10px 0 rgba(119, 119, 119, 1) } .cards-form__form-fieldset input:focus::-webkit-input-placeholder { color: #2e1a47 } .cards-form__form-fieldset input:focus:-ms-input-placeholder { color: #2e1a47 } .cards-form__form-fieldset input:focus::placeholder { color: #2e1a47 } .cards-form__form label { position: absolute; top: 50%; right: 18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px; height: 24px; background-image: url(/img/focus.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .cards-form__form label::after { position: absolute; display: block; content: ''; top: -5px; right: -6px; bottom: -5px; left: -5px; background-image: url(/img/arrow-to-bottom.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .cards-form__form input:focus + label { background-image: url(/img/focus-purple.svg) } .cards-form__form input:focus + label::after { display: none } .cards-form__form .cards-form__form-submit { color: #f3f2f4 } .cards-form .\--btn-arrow { width: 100%; padding: 0 } .cards-form .\--btn-arrow input { width: 100% } .cards-form .\--close { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; background-image: url(/img/close.svg); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-grid-txt-btn { padding-top: 80px } .img-grid-txt-btn__inner { border-top: 1px solid #777777; position: relative; padding-top: 40px } .img-grid-txt-btn__heading { display: none } .img-grid-txt-btn__txt { text-align: center; padding-left: 8px; padding-right: 8px } .img-grid-txt-btn__txt p:first-child { margin-bottom: 32px } .img-grid-txt-btn__txt p:last-child { text-transform: uppercase; margin-bottom: 24px } .img-grid-txt-btn__img-wrap { width: 100%; height: 464px; margin-bottom: 24px; overflow: hidden } .img-grid-txt-btn__btn-wrap { position: absolute; bottom: 78px; left: 8px; right: 8px } @media (min-width: 1025px) { .img-grid-txt-btn { padding-top: 40px; padding-bottom: 48px } .img-grid-txt-btn__inner { padding-top: 0; border: none; display: -ms-grid; display: grid; -ms-grid-columns: (minmax(264px, 1fr))[auto-fit]; grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); -ms-grid-rows: (auto)[3]; grid-template-rows: repeat(3, auto); grid-column-gap: 48px; grid-row-gap: 32px } .img-grid-txt-btn__heading { grid-area: 1 / 1 / 2 / -1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .img-grid-txt-btn__btn-close { width: 16px; height: 16px; background-image: url(/img/close.svg); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer } .img-grid-txt-btn__img-wrap { height: 304px; margin-bottom: 0 } .img-grid-txt-btn__txt { grid-area: 3 / 1 / 3 / -2; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; text-align: left; padding: 0 } .img-grid-txt-btn__txt p:last-child { width: 680px } .img-grid-txt-btn__btn-wrap { grid-area: 3 / 4 / -2 / -1; position: static; padding: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .form-one-input { position: fixed; top: 0; left: 0; right: 0; min-height: 100vh; padding: 80px 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #eeefef; z-index: 9 } .form-one-input__inner { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; border-top: 1px solid #777777; display: -ms-grid; display: grid; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .form-one-input__top { display: none } .form-one-input__form { position: relative } .form-one-input__text-input { padding-right: 48px } .form-one-input__submit-input { display: none } .form-one-input__submit-label { position: absolute; right: 0; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background-color: #d3d3d3; transition: all 0.3s ease } .form-one-input__submit-label::after { position: absolute; display: block; content: ''; width: 16px; height: 16px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/search.svg); background-size: cover; background-position: center; background-repeat: no-repeat } .form-one-input__close-btn { position: absolute; right: 0; bottom: 1px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; background-image: url(/img/close.svg); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: all 0.3s ease; pointer-events: none } .form-one-input h3 { display: none } .form-one-input__list-item { display: none } .\--search-active { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .\--search-active .form-one-input__inner { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; padding-top: 40px; -ms-grid-columns: 1fr; grid-template-columns: 1fr } .\--search-active .form-one-input__form { margin-bottom: 63px } .\--search-active .form-one-input__submit-label { opacity: 0; pointer-events: none } .\--search-active .form-one-input__close-btn { opacity: 1; pointer-events: auto } .\--search-active h3 { display: block; margin-bottom: 56px } .\--search-active .form-one-input__list-item { display: block; border-bottom: 1px solid #777777; margin-bottom: 32px } .\--search-active .form-one-input__list-item-title { margin-bottom: 56px } .\--search-active .form-one-input__list-item-subtitle { position: relative; padding-right: 40px; margin-bottom: 56px } .\--search-active .form-one-input__list-item-subtitle-label { display: block; position: absolute; width: 24px; height: 24px; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; background-image: url(/img/arrow-to-right-black.svg); background-size: contain; background-position: center; background-repeat: no-repeat } @media (min-width: 1025px) { .form-one-input { padding-top: 96px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .form-one-input__inner { border: none; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 40px; grid-template-areas: "top top" "search search" "h3 h3" } .form-one-input__top { grid-area: top; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 48px } .form-one-input__title { text-transform: uppercase } .form-one-input__btn-close { width: 16px; height: 16px; background-image: url(/img/close.svg); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer } .\--search-active { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch } .\--search-active .form-one-input__inner { padding-top: 0; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr } .\--search-active .form-one-input__form { grid-area: search; width: calc(50% - 20px); margin-bottom: 63px } .\--search-active h3 { grid-area: h3 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-form-btn { position: relative; padding-top: 80px; margin-bottom: 160px } .title-txt-form-btn__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-top: 1px solid #777777; padding-top: 56px; padding-left: 8px; padding-right: 8px } .title-txt-form-btn__title { text-align: center; margin-bottom: 40px } .title-txt-form-btn__description { margin-bottom: 48px } .title-txt-form-btn__form { position: relative; margin-bottom: 31px } .title-txt-form-btn__fieldset-top { border-top: 1px solid #777777; border-bottom: 1px solid #777777; padding-top: 48px; padding-bottom: 47px; margin-bottom: 48px } .title-txt-form-btn__input:not(:last-child) { margin-bottom: 31px } .title-txt-form-btn__fieldset-bottom {} .title-txt-form-btn__fieldset-bottom span { display: inline-block; text-transform: uppercase; margin-bottom: 20px } .title-txt-form-btn .\--error { position: absolute; left: 0; bottom: -15px; font-size: 12px; line-height: 100%; opacity: 0.5 } .title-txt-form-btn__form-txt { text-transform: uppercase; margin-bottom: 31px } .title-txt-form-btn__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background-image: url(/img/close.svg); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .big-card { padding: 72px 8px } .big-card__inner { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: (auto)[7]; grid-template-rows: repeat(7, auto); grid-template-areas: "img-slider img-slider" "txt price" "title title" "subtitle subtitle" "rating rating" "container-info container-info" "btn btn" } .big-card__img-slider { grid-area: img-slider; height: 360px; border-radius: 8px; overflow: hidden; position: relative; margin-bottom: 24px } .big-card picture { width: 100%; height: 100% } .big-card picture img { width: 100%; height: 100%; object-fit: cover; object-position: center } .big-card__img-title { position: absolute; top: 200px; left: 0; right: 0; text-align: center; text-transform: uppercase; color: #f3f2f4 } .big-card__img-slider-indicators { position: absolute; bottom: 18px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex } .big-card__indicator { width: 5px; height: 5px; border-radius: 50%; background-color: #171717 } .big-card__indicator.\--active { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2) } .big-card__indicator:not(:last-child) { margin-right: 4px } .big-card__txt { grid-area: txt; text-transform: uppercase; margin-bottom: 16px } .big-card__price { grid-area: price; text-transform: uppercase; text-align: right; margin-bottom: 16px } .big-card__title { grid-area: title; margin-bottom: 16px } .big-card__subtitle { grid-area: subtitle; margin-bottom: 12px } .big-card__rating { grid-area: rating; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px } .big-card__rating-stars { display: -webkit-flex; display: -ms-flexbox; display: flex } .big-card__rating-star { width: 24px; height: 24px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .big-card__rating-star.\--black-star { background-image: url(/img/black-star.svg) } .big-card__rating-star.\--half-star { position: relative } .big-card__rating-star.\--half-star::after { position: absolute; display: block; content: ''; left: 0; top: 0; right: 50%; bottom: 0; background-image: url(/img/half-star.svg); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 1 } .big-card__rating-number { margin-left: 16px } .big-card__container-info { grid-area: container-info; line-height: 28px; margin-bottom: 24px; font-size: 19.2px; font-size: 1.2rem } .big-card__btn { grid-area: btn } @media (min-width: 1025px) { .big-card { padding-top: 128px } .big-card__inner { -ms-grid-columns: 2fr 1fr 1fr; grid-template-columns: 2fr 1fr 1fr; -ms-grid-rows: (auto)[7]; grid-template-rows: repeat(7, auto); grid-column-gap: 32px; grid-template-areas: "img-slider txt ." "img-slider title ." "img-slider subtitle ." "img-slider rating ." "img-slider price ." "img-slider container-info ." "img-slider btn ." } .big-card__inner > *:not(:first-child) { padding-left: 10px; padding-right: 10px } .big-card__img-slider { justify-self: center; width: 368px; height: 480px; margin-bottom: 0 } .big-card__txt { margin-top: 80px } .big-card__subtitle { margin-bottom: 40px } .big-card__rating { margin-bottom: 40px } .big-card__price { text-align: left; margin-bottom: 40px } .big-card__container-info { line-height: 16px; margin-bottom: 32px } .big-card__container-info a { display: block; width: 120px; position: relative } .big-card__container-info a::after { display: block; content: ''; position: absolute; right: 0; top: 0; width: 16px; height: 16px; background-image: url(/img/arrow-to-right-black.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .part-of-the-screen { padding-top: 48px } .part-of-the-screen .big-card__inner { -ms-grid-columns: 1fr; grid-template-columns: 1fr; max-width: 296px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; grid-template-areas: "img-slider" "txt" "title" "subtitle" "rating" "price" "container-info" "btn" } .part-of-the-screen .big-card__inner > * { padding: 0 } .part-of-the-screen .big-card__txt { margin-top: 0 } .part-of-the-screen .big-card__img-slider { justify-self: left; width: 56px; height: 64px; margin-bottom: 24px } .part-of-the-screen .big-card__container-info {} .part-of-the-screen .big-card__container-info a { padding-left: 24px } .part-of-the-screen .big-card__container-info a::after { left: 0; background-image: url(/img/arrow-to-right-black.svg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .counter-interactive-element-btn { height: 100vh; padding: 80px 8px 78px; border: 1px solid red } .counter-interactive-element-btn__inner { border-top: 1px solid #777777; padding-top: 24px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .counter-interactive-element-btn__heading { display: none } .counter-interactive-element-btn__counter { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 24px } .counter-interactive-element-btn li { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .counter-interactive-element-btn li span:last-child { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 1px; background-color: #171717 } .counter-interactive-element-btn li span:first-child { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #171717 } .counter-interactive-element-btn li.\--active span:first-child { background-color: #171717 } .counter-interactive-element-btn li:last-child { -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0 } .counter-interactive-element-btn li:last-child span:last-child { display: none } .counter-interactive-element-btn__interactive-element-wrap { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; overflow-y: scroll; position: relative; text-align: center } .counter-interactive-element-btn__h4-carousel-txt {} .counter-interactive-element-btn__h4-carousel-txt h4 { margin-bottom: 88px } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel { margin-bottom: 48px; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100% } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel-item { min-width: 152px; height: 128px; border-radius: 180px; background-color: #d3d3d3; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel-item:not(:last-child) { margin-right: 56px } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__txt { position: absolute; left: 50%; bottom: -64px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .counter-interactive-element-btn__h4-carousel-txt .\--active { position: relative } .counter-interactive-element-btn__h4-carousel-txt .\--active::before { position: absolute; display: block; content: ''; width: 40px; height: 40px; border-radius: 50%; right: -5px; top: -24px; background-color: #777777 } .counter-interactive-element-btn__h4-carousel-txt .\--active::after { position: absolute; display: block; content: ''; width: 32px; height: 32px; right: -1px; top: -20px; background-image: url(/img/checkmark.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .counter-interactive-element-btn__h4-list-btn {} .counter-interactive-element-btn__h4-list-btn h4 { margin-bottom: 64px } .counter-interactive-element-btn__h4-list-btn .counter-interactive-element-btn__list-btn-wide { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-gap: 8px; font-size: 22.4px; font-size: 1.4rem; line-height: 64px; margin-bottom: 64px } .counter-interactive-element-btn__h4-list-btn .\--narrow-btn { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr } .counter-interactive-element-btn__h4-list-btn a { background-color: #c4c4c4 } .counter-interactive-element-btn__h4-subtitle-list-btn {} .counter-interactive-element-btn__h4-subtitle-list-btn h4 { margin-bottom: 32px } .counter-interactive-element-btn__h4-subtitle-list-btn p { font-size: 22.4px; font-size: 1.4rem; line-height: 22.4px; line-height: 1.4rem; text-transform: uppercase; margin-bottom: 32px } .counter-interactive-element-btn__h4-subtitle-list-btn .counter-interactive-element-btn__list-btn { padding-top: 16px; padding-bottom: 16px; background-color: #d3d3d3; display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-row-gap: 32px; -ms-grid-column-align: center; justify-items: center } .counter-interactive-element-btn__h4-subtitle-list-btn .counter-interactive-element-btn__list-btn a { width: 152px; background-color: #f3f2f4; font-size: 22.4px; font-size: 1.4rem; line-height: 32px; border-radius: 56px; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; justify-self: center } .counter-interactive-element-btn__btn-to-bottom { width: 40px; height: 40px; position: -webkit-sticky; position: sticky; bottom: 0; margin-left: auto; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/arrow-to-bottom_black.svg); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer } .counter-interactive-element-btn__btns { padding-top: 8px } .counter-interactive-element-btn__btn { display: block; background-color: #f3f2f4; border: none; font-size: 19.2px; font-size: 1.2rem; line-height: 32px; margin-bottom: 17px; padding-left: 16px; padding-right: 16px; text-align: center; cursor: pointer } @media (min-width: 1025px) { .counter-interactive-element-btn { padding: 96px 0 46px } .counter-interactive-element-btn__inner { padding: 0 8px; border: none } .counter-interactive-element-btn__heading { display: block; margin-bottom: 56px } .counter-interactive-element-btn__counter { margin-left: auto; margin-right: auto; width: 312px } .counter-interactive-element-btn__btn-to-bottom { display: none } .counter-interactive-element-btn__h4-carousel-txt {} .counter-interactive-element-btn__h4-carousel-txt h4 { margin-bottom: 72px } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel > * { width: 160px; height: 120px; border-radius: 8px } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__carousel > *:not(:last-child) { margin-right: 48px } .counter-interactive-element-btn__h4-carousel-txt .counter-interactive-element-btn__txt { position: static } .counter-interactive-element-btn__h4-list-btn {} .counter-interactive-element-btn__h4-list-btn h4 { margin-bottom: 72px } .counter-interactive-element-btn__h4-list-btn .counter-interactive-element-btn__list-btn-wide { -ms-grid-columns: (160px)[4]; grid-template-columns: repeat(4, 160px); grid-column-gap: 48px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .counter-interactive-element-btn__h4-list-btn .counter-interactive-element-btn__list-btn-wide a { line-height: 120px; border-radius: 8px } .counter-interactive-element-btn__btns { width: 328px; margin-left: auto; margin-right: auto } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .video-player { } .video-player.wistia-wrap-video { margin-bottom: 47px } @media (min-width: 641px) { .video-player.wistia-wrap-video { margin-bottom: 56px } } @media (min-width: 1025px) { .video-player.wistia-wrap-video { margin-bottom: 79px } } .video-player__video-wrap { position: relative; width: 100%; height: 100%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; background-color: #777777; max-height: 100vh } .video-player.youtube-wrapper { width: 100%; height: 264px; margin-bottom: 47px } @media (min-width: 641px) { .video-player.youtube-wrapper { height: 344px; margin-bottom: 56px } } @media (min-width: 1025px) { .video-player.youtube-wrapper { height: 489px; margin-bottom: 79px } } .video-player .youtube-wrap { width: 100%; height: 100% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-btn-banner { overflow: hidden; width: 100%; padding: 80px 8px 38px 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; margin-bottom: 24px } @media (min-width: 641px) { .img-title-btn-banner { padding: 158px 0 48px; min-height: 768px; margin-bottom: 50px } } @media (min-width: 1025px) { .img-title-btn-banner { min-height: 100vh; padding: 8px 40px; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .img-title-btn-banner picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .img-title-btn-banner picture:first-child { display: none } .img-title-btn-banner__logo { position: absolute; display: none; top: 16px; left: 16px; height: 32px; width: auto; z-index: 1 } @media (min-width: 1025px) { .img-title-btn-banner__logo { display: none } } .img-title-btn-banner__logo img { object-fit: contain; height: 100%; width: auto } .img-title-btn-banner__inner { color: #171717; padding: 16px 0; position: relative; z-index: 1 } .img-title-btn-banner__inner a { margin: 24px 8px; color: #171717 } @media (min-width: 641px) { .img-title-btn-banner__inner { padding: 0 32px } } .img-title-btn-banner h1 { font-family: "Chiswick Sans"; font-weight: 300; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; padding: 8px } @media (min-width: 641px) { .img-title-btn-banner h1 { width: 100%; font-size: 4rem; font-style: italic; letter-spacing: 0.02em } } @media (min-width: 1025px) { .img-title-btn-banner h1 { max-width: 609px } } .img-title-btn-banner h2 { padding: 8px; line-height: 100%; letter-spacing: 0 } @media (min-width: 641px) { .img-title-btn-banner h2 { width: 100% } } .img-title-btn-banner.\--canvas {} .img-title-btn-banner.\--canvas h1 { font-family: "Cera Pro"; font-weight: bold; font-size: 51.2px; font-size: 3.2rem; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--canvas h1 { font-size: 4rem } } .img-title-btn-banner.\--canvas h2 { font-family: "Cera Pro"; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; font-style: normal } .img-title-btn-banner.\--canvas.btn-outline.\--gray:hover { color: #ffffff } .img-title-btn-banner.\--caviar {} .img-title-btn-banner.\--caviar h1 { font-family: "Didot"; font-size: 51.2px; font-size: 3.2rem; font-style: italic; font-weight: normal } @media (min-width: 641px) { .img-title-btn-banner.\--caviar h1 { font-size: 4rem } } .img-title-btn-banner.\--caviar h2 { font-family: "Sofia Pro"; font-size: 38.4px; font-size: 2.4rem; font-weight: 400; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--caviar h2 { font-size: 2.4rem; font-family: "Sofia Pro" } } .img-title-btn-banner.\--alterna {} .img-title-btn-banner.\--alterna h1 { font-family: "Chiswick Sans"; font-weight: 400; font-size: 51.2px; font-size: 3.2rem; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--alterna h1 { font-size: 4rem } } .img-title-btn-banner.\--alterna h2 { font-family: "Sofia Pro"; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; font-style: normal } .img-title-btn-banner__txt-btn {} .img-title-btn-banner__txt-btn.\--mob { z-index: 2; display: block } .img-title-btn-banner__video-mob { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2 } @media (min-width: 641px) { .img-title-btn-banner__video-mob { display: none } } .img-title-btn-banner__video-mob .wistia_responsive_padding { padding: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; pointer-events: none } .img-title-btn-banner__video-mob video { height: 100vh !important; object-fit: cover !important } .img-title-btn-banner__txt-btn, .img-title-btn-banner__txt-btn-mob { position: absolute; z-index: 2; bottom: 160px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media (min-width: 641px) { .img-title-btn-banner__txt-btn, .img-title-btn-banner__txt-btn-mob { display: block; bottom: 0; padding-bottom: 130px } } .img-title-btn-banner__txt-btn-mob {} @media (min-width: 641px) { .img-title-btn-banner__txt-btn-mob { display: none } } .img-title-btn-banner.\--video {} @media (min-width: 641px) { .img-title-btn-banner.\--video { display: block } .img-title-btn-banner.\--video .wistia_responsive_padding { padding: 0; width: 179%; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: 0; pointer-events: none } .img-title-btn-banner.\--video .img-title-btn-banner__video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .img-title-btn-banner.\--video picture { display: none } .img-title-btn-banner.\--video video { min-height: 100vh !important; object-fit: cover !important } } @media (min-width: 1025px) { .img-title-btn-banner.\--video {} .img-title-btn-banner.\--video .wistia_responsive_padding { width: 100% } } @media (min-width: 1024px) and (max-width: 1300px) { .img-title-btn-banner.\--video {} .img-title-btn-banner.\--video .wistia_responsive_padding { width: 119% } } @media (min-width: 1025px) { .img-title-btn-banner {} .img-title-btn-banner .wistia_responsive_wrapper { min-height: 100vh !important } .img-title-btn-banner .wistia_embed { min-height: 100vh } .img-title-btn-banner .wistia_embed > * { min-height: 100vh } .img-title-btn-banner .wistia_embed > * > * { min-height: 100vh } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } section.slider { position: relative; min-height: calc(100vh - 56px - 60px); max-height: calc(100vh - 56px - 60px); background-color: #ffffff; overflow: hidden; outline: none } @media (min-width: 641px) { section.slider { min-height: calc(100vh - 32px); height: calc(100vh - 32px); max-height: calc(100vh - 32px) } } @media (min-width: 1025px) { section.slider { min-height: 100vh; height: 100vh; max-height: 100vh } } section.slider:active, section.slider:focus, section.slider:focus-visible { outline: none } section.slider.\--iphone { min-height: calc(100vh - 56px - 80px); max-height: calc(100vh - 56px - 80px); margin-bottom: 15px } section.slider .img-title-btn-banner__inner {} @media (min-width: 641px) { section.slider .img-title-btn-banner__inner { margin-left: 40px; margin-right: 40px } } @media (min-width: 1025px) { section.slider .img-title-btn-banner__inner { margin: 0; padding: 0 } section.slider .img-title-btn-banner__inner h1, section.slider .img-title-btn-banner__inner h2 { padding-left: 0 } section.slider .img-title-btn-banner__inner a { margin-left: 0 } } section.slider .flickity-slider { outline: none } section.slider .flickity-slider:active, section.slider .flickity-slider:focus, section.slider .flickity-slider:focus-visible { outline: none } section.slider .w-chrome, section.slider .w-chrome > *, section.slider .wistia_embed_initialized { height: 100% !important } section.slider .img-title-btn-banner { position: relative; height: calc(100vh - 56px - 60px) } @media (min-width: 641px) { section.slider .img-title-btn-banner { height: 100vh } } section.slider.\--iphone .img-title-btn-banner { height: calc(100vh - 56px - 80px) } @media (min-width: 641px) { section.slider.\--iphone .img-title-btn-banner { height: 100vh } } section.slider .img-title-btn-banner__banner { position: absolute; left: 0; right: 0; top: 0; width: 100vw; height: 100% } section.slider picture:first-child { display: block } section.slider .flickity-viewport { overflow: hidden; outline: none } section.slider .flickity-page-dots { position: absolute; display: -webkit-flex; display: -ms-flexbox; display: flex; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 18px; z-index: 8 } @media (min-width: 641px) { section.slider .flickity-page-dots { bottom: 28px } } @media (min-width: 1025px) { section.slider .flickity-page-dots { bottom: 42px; cursor: pointer } } section.slider .dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #171717 } @media (min-width: 641px) { section.slider .dot { width: 14px; height: 14px } } @media (min-width: 1025px) { section.slider .dot { width: 8px; height: 8px } } section.slider.\--alternative .dot { border-color: #ffffff } section.slider .dot:not(:last-child) { margin-right: 8px } section.slider .dot.is-selected { background-color: #171717 } section.slider.\--alternative .dot.is-selected { background-color: #ffffff } section.slider .flickity-button, section.slider .flickity-button:focus-visible, section.slider .flickity-button:hover, section.slider .flickity-button:focus { border-color: transparent !important } section.slider .flickity-button.flickity-prev-next-button { position: absolute; width: 20px; height: 20px; left: 50%; bottom: 12px; border: none; background-color: transparent; background-image: url(/img/sliderarrow-black.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 8; outline: none } section.slider .flickity-button.flickity-prev-next-button:focus, section.slider .flickity-button.flickity-prev-next-button:active, section.slider .flickity-button.flickity-prev-next-button:visited { outline: none; border: unset } @media (min-width: 641px) { section.slider .flickity-button.flickity-prev-next-button { width: 25px; height: 25px; bottom: 22px } } @media (min-width: 1025px) { section.slider .flickity-button.flickity-prev-next-button { background-image: url(/img/sliderarrow-black-desktop.svg); width: 12px; height: 12px; bottom: 40px; cursor: pointer } } section.slider .flickity-button.flickity-prev-next-button svg { display: none } section.slider.\--alternative .flickity-button.flickity-prev-next-button { background-image: url(/img/arrow-slider-white.svg) } section.slider .previous { -webkit-transform: translateX(-84px) rotate(180deg); -ms-transform: translateX(-84px) rotate(180deg); transform: translateX(-84px) rotate(180deg); outline: none } section.slider .previous:focus, section.slider .previous:active, section.slider .previous:visited { outline: none; border: unset } @media (min-width: 1025px) { section.slider .previous { -webkit-transform: translateX(-38px) rotate(180deg); -ms-transform: translateX(-38px) rotate(180deg); transform: translateX(-38px) rotate(180deg) } } section.slider .next { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px); outline: none } section.slider .next:focus, section.slider .next:active, section.slider .next:visited { outline: none; border: unset } @media (min-width: 1025px) { section.slider .next { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px) } } section.slider .btn-outline { white-space: nowrap } section.slider .\--alterna {} section.slider .\--alterna .img-title-btn-banner__txt-btn { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-btn-img-bg { margin-bottom: 24px; position: relative } .title-txt-btn-img-bg__copy-wrapper { padding: 0 8px } @media (min-width: 641px) { .title-txt-btn-img-bg { margin-bottom: 50px } } .title-txt-btn-img-bg a { padding: 12px 32px } .title-txt-btn-img-bg picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .title-txt-btn-img-bg picture img { object-fit: cover; object-position: right } @media (min-width: 1025px) { .title-txt-btn-img-bg picture img { object-position: center } } .title-txt-btn-img-bg__inner { height: calc(100vh - 60px); padding-top: 12px; padding-bottom: 68px; position: relative; z-index: 1 } @media (min-width: 641px) { .title-txt-btn-img-bg__inner { padding-top: 12px; padding-bottom: 12px } } @media (min-width: 1025px) { .title-txt-btn-img-bg__inner { height: calc(100vh - 80px) } } .title-txt-btn-img-bg__inner-content { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center } .title-txt-btn-img-bg__title { font-style: italic; font-weight: normal; line-height: 100%; font-family: "Didot"; color: #ffffff; margin-bottom: 30px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center } @media (min-width: 641px) { .title-txt-btn-img-bg__title { padding: 36px 8px; margin-bottom: 10px } } .title-txt-btn-img-bg__title .\--small { font-size: 57.6px; font-size: 3.6rem; text-transform: capitalize; margin-bottom: 20px; font-style: italic; font-weight: normal; line-height: 100%; display: inline-block; text-align: center } @media (min-width: 641px) { .title-txt-btn-img-bg__title .\--small { margin-bottom: 30px } } .title-txt-btn-img-bg__title .\--small:last-child { margin-bottom: 0 } .title-txt-btn-img-bg__title .\--big { margin-bottom: 20px; font-style: italic; font-weight: normal; line-height: 100%; font-size: 102.4px; font-size: 6.4rem; display: inline-block; text-align: center } @media (min-width: 641px) { .title-txt-btn-img-bg__title .\--big { font-size: 14.4rem } } .title-txt-btn-img-bg p { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; color: #ffffff } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 640px; margin: 0 auto } } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 480px; margin: 0 auto } } .title-txt-btn-img-bg .btn-outline { margin: 32px 8px 0; color: #ffffff; border-color: #ffffff } .title-txt-btn-img-bg .btn-outline:hover { background-color: #ffffff; color: #171717 } .title-txt-btn-img-bg.\--banner { margin: 0 auto } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { min-height: 515px; height: auto; padding: 20px 16px } @media (min-width: 641px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { min-height: 768px; padding-top: 62px } } @media (min-width: 1025px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { padding-top: 90px } } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner-content { display: -webkit-flex; display: -ms-flexbox; display: flex } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-copy-btn { padding-top: 24px; padding-bottom: 24px; overflow: hidden } @media (min-width: 641px) { .img-title-copy-btn { padding-top: 50px; padding-bottom: 50px } } .img-title-copy-btn__inner { } @media (min-width: 1025px) { .img-title-copy-btn__inner { display: -webkit-flex; display: -ms-flexbox; display: flex } } .img-title-copy-btn picture { height: 240px; width: 100%; display: block; margin: 0; overflow: hidden } @media (min-width: 641px) { .img-title-copy-btn picture { height: 66.6667vw; margin: 0 0 30px } } @media (min-width: 1025px) { .img-title-copy-btn picture { height: 100%; width: 56.875%; margin: 0; -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .img-title-copy-btn picture img { display: block; object-fit: cover } .img-title-copy-btn__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 0 8px 16px; border: 1px solid #326b6c; border-top: none; color: #326b6c } @media (min-width: 641px) { .img-title-copy-btn__content { padding: 0 40px 52px } } @media (min-width: 1025px) { .img-title-copy-btn__content { width: 43.125%; padding-right: 32px; padding-top: 64px; padding-bottom: 64px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; border: 1px solid #326b6c; border-right: none } } .img-title-copy-btn__content h2 { font-style: normal; font-weight: bold; /* font-size: 6.4rem; */ font-size: 97.6px; font-size: 6.1rem; line-height: 105%; padding: 27px 8px } @media (min-width: 641px) { .img-title-copy-btn__content h2 { padding: 22px 8px; font-size: 6.4rem } } .img-title-copy-btn__content p { font-style: normal; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } .img-title-copy-btn__copy { padding: 16px 8px } .img-title-copy-btn__copy p:first-child { padding-bottom: 4px; font-weight: 300 } .img-title-copy-btn__copy + a { box-sizing: border-box; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 16px 8px; min-width: 160px; min-height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100% } @media (min-width: 641px) { .img-title-copy-btn__copy + a { margin: 16px 8px 0 } } @media (min-width: 1025px) { .img-title-copy-btn__copy + a { margin: 7px 8px 0 } } .img-title-copy-btn__modified { } .img-title-copy-btn__modified .img-title-copy-btn__content { color: #171717; border-color: #000000 } .img-title-copy-btn__modified h2.\--bold-heading { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 76.8px; font-size: 4.8rem; line-height: 125%; text-transform: uppercase } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-copy-grid { overflow: hidden; /* padding-top: 24px; padding-bottom: 24px; */ } @media (min-width: 641px) { .img-title-copy-grid { /* padding-top: 50px; padding-bottom: 50px */ } } .img-title-copy-grid__inner {} @media (min-width: 641px) { .img-title-copy-grid__inner { padding-left: 40px; padding-right: 40px; position: relative } } @media (min-width: 1025px) { .img-title-copy-grid__inner { padding: 0; max-width: 785px; margin: 0 auto } } .img-title-copy-grid__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 8px; grid-row-gap: 24px; padding: 24px 0 } @media (min-width: 641px) { .img-title-copy-grid__grid { grid-row-gap: 8px } } @media (min-width: 1025px) { .img-title-copy-grid__grid { grid-row-gap: 48px; grid-column-gap: 48px } } .img-title-copy-grid__copy { padding: 16px 8px } @media (min-width: 641px) { .img-title-copy-grid__copy { font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .img-title-copy-grid__copy p { font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } } .img-title-copy-grid__copy p { font-family: "Sofia Pro"; text-align: center } .img-title-copy-grid__copy p:first-child { margin-bottom: 4px; font-weight: bold } .img-title-copy-grid__card { padding: 0 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative } .img-title-copy-grid__card h4 { display: none; font-family: "Sofia Pro" } @media (min-width: 641px) { .img-title-copy-grid__card { padding: 0; background-color: #f7f7f7; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .img-title-copy-grid__card:first-child, .img-title-copy-grid__card:last-child {} .img-title-copy-grid__card:first-child::before, .img-title-copy-grid__card:last-child::before { content: ''; width: 100%; height: 100%; display: block; position: absolute; background-color: #f7f7f7 } .img-title-copy-grid__card:first-child {} .img-title-copy-grid__card:first-child::before { top: -24px; left: -24px } .img-title-copy-grid__card:last-child {} .img-title-copy-grid__card:last-child::before { bottom: -24px; right: -24px } .img-title-copy-grid__card h4 { font-weight: 300; font-family: "Chiswick Sans"; font-size: 4rem; line-height: 100%; padding: 24px 36px 11px; text-transform: capitalize; display: block } } .img-title-copy-grid__card .img-title-copy-grid__copy { display: none; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 16px 8px } @media (min-width: 641px) { .img-title-copy-grid__card .img-title-copy-grid__copy { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 16px 40px } } .img-title-copy-grid__card picture { width: 100%; height: 100% } @media (min-width: 641px) { .img-title-copy-grid__card picture { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; z-index: 1 } } .img-title-copy-grid__card picture img { object-fit: cover } .img-title-copy-grid__card:nth-child(3) {} @media (min-width: 641px) { .img-title-copy-grid__card:nth-child(3) {} .img-title-copy-grid__card:nth-child(3) picture { display: none } } .img-title-copy-grid__card.\--copy { display: none; z-index: 2 } @media (min-width: 641px) { .img-title-copy-grid__card.\--copy { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: calc(50% + 3px); left: 40px; width: calc(50% - 48px + 4px); height: calc(50% - 4px - 22px) } } @media (min-width: 1025px) { .img-title-copy-grid__card.\--copy { left: -1px; top: calc(50% + 23px); width: calc(50% - 22px); height: calc(50% - 46px) } } .img-title-copy-grid__card-big { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .img-title-copy-grid__card-big { display: none } } .img-title-copy-grid__card-big h4 { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; text-transform: uppercase; text-align: center; padding: 16px 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120% } .img-title-copy-grid .btn-outline { margin: 16px 8px } .eapps-instagram-feed-posts-view.eui-slider-slide { display: -ms-grid !important; display: grid !important; -ms-grid-columns: (1fr)[2] !important; grid-template-columns: repeat(2, 1fr) !important; grid-column-gap: 8px !important; grid-row-gap: 24px !important; padding: 24px 0 !important; -webkit-flex-grow: unset !important; -ms-flex-positive: unset !important; flex-grow: unset !important; -webkit-flex-shrink: unset !important; -ms-flex-negative: unset !important; flex-shrink: unset !important; overflow: visible !important } @media (min-width: 641px) { .eapps-instagram-feed-posts-view.eui-slider-slide { grid-row-gap: 8px !important } } @media (min-width: 1025px) { .eapps-instagram-feed-posts-view.eui-slider-slide { grid-row-gap: 48px !important; grid-column-gap: 48px !important } } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item { padding: 0 8px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item h4 { display: none } @media (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item { padding: 0 !important; background-color: #f7f7f7 !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child, .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child::before, .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child::before { content: '' !important; width: 100% !important; height: 100% !important; display: block !important; position: absolute !important; background-color: #f7f7f7 !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child::before { top: -24px !important; left: -24px !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child::before { bottom: -24px !important; right: -24px !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item h4 { font-weight: 500 !important; font-size: 4rem !important; line-height: 100% !important; padding: 24px 36px 11px !important; text-transform: capitalize !important; display: block !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) {} } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item .img-title-copy-grid__copy { font-family: "Helvetica Neue"; display: none !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; padding: 16px 8px !important } @media (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item .img-title-copy-grid__copy { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; padding: 16px 40px !important } } @media (min-width: 641px) and (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) .eapps-instagram-feed-posts-item-link { display: none !important } } .eapps-instagram-feed#eapps-instagram-feed-1, .eui-slider, .eapps-instagram-feed-container { overflow: visible !important; } .eapps-instagram-feed-posts-item-red-like-container { display: none !important; opacity: 0 !important; visibility: hidden !important; } .eapps-instagram-feed-posts-item-counters { display: none !important; } .eapps-instagram-feed-posts-item-text { margin: 0 !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-card-grid { padding-top: 24px; padding-bottom: 16px } @media (min-width: 641px) { .title-card-grid { padding-top: 67px; padding-bottom: 65px } } @media (min-width: 1025px) { .title-card-grid { padding-bottom: 114px } } .title-card-grid__title-wrapper { padding: 16px 8px 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 8px } .title-card-grid__title-wrapper h2 { padding-right: 24px; font-style: normal; font-weight: normal; font-size: 32px; line-height: 100%; text-transform: uppercase } @media (min-width: 641px) { .title-card-grid__title-wrapper h2 { max-width: 50% } } @media (min-width: 1025px) { .title-card-grid__title-wrapper h2 { font-size: 40px; letter-spacing: 0.02em; font-weight: 300 } } .title-card-grid__link { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; position: relative; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: right; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } .title-card-grid__link::after { content: ""; display: block; height: 1px; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #171717; transition: all 0.3s ease } .title-card-grid__link:hover {} .title-card-grid__link:hover::before { width: 100% } .title-card-grid__grid { display: -ms-grid; display: grid; padding-left: 8px; padding-right: 8px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-row-gap: 24px } @media (min-width: 641px) { .title-card-grid__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-card-grid__grid { grid-column-gap: 48px } } .title-card-grid__card { cursor: pointer } .title-card-grid__link-wrapper { position: relative; height: 459px } @media (min-width: 641px) { .title-card-grid__link-wrapper { height: 306px } } @media (min-width: 1025px) { .title-card-grid__link-wrapper { height: 518px } } .title-card-grid__link-wrapper::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } .title-card-grid__link-wrapper:hover {} .title-card-grid__link-wrapper:hover::after { opacity: 1 } .title-card-grid__card-img-wrap { margin-bottom: 24px; height: 459px } @media (min-width: 641px) { .title-card-grid__card-img-wrap { height: 306px } } @media (min-width: 1025px) { .title-card-grid__card-img-wrap { height: 518px; position: relative } .title-card-grid__card-img-wrap::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } } .title-card-grid__card-img-wrap img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block } .title-card-grid__card:hover .title-card-grid__card-img-wrap::after {} @media (min-width: 1025px) { .title-card-grid__card:hover .title-card-grid__card-img-wrap::after { opacity: 1 } } .title-card-grid__card-img { height: 459px } @media (min-width: 641px) { .title-card-grid__card-img { height: 495px } } @media (min-width: 1025px) { .title-card-grid__card-img { height: 365px } } .title-card-grid__card-img img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block } .title-card-grid__card-title.h5 { padding-top: 8px; padding-bottom: 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 1025px) { .title-card-grid__card-title.h5 { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .title-card-grid__card-date { padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-weight: 300; font-size: 22.4px; font-size: 1.4rem } .title-card-grid.\--big { width: 100% } .title-card-grid.\--big .title-card-grid__grid {} @media (min-width: 641px) { .title-card-grid.\--big .title-card-grid__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } .title-card-grid.\--big .title-card-grid__link-wrapper { height: 459px } @media (min-width: 641px) { .title-card-grid.\--big .title-card-grid__link-wrapper { height: 495px } } @media (min-width: 1025px) { .title-card-grid.\--big .title-card-grid__link-wrapper { height: 825px } } .title-card-grid .proffesional-tips-sample__title { padding-bottom: 2px; margin-bottom: 38px } @media (min-width: 1025px) { .title-card-grid .proffesional-tips-sample__title { padding-top: 8px; padding-bottom: 2px } } .title-card-grid .proffesional-tips-sample__title h2 {} @media (min-width: 641px) { .title-card-grid .proffesional-tips-sample__title h2 { padding-bottom: 8px } } @media (min-width: 1025px) { .title-card-grid .proffesional-tips-sample__title h2 { padding-bottom: 0; font-weight: 300 } } .title-card-grid .proffesional-tips-sample__title .title-card-grid__link { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 32px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .txt-imgs { padding-bottom: 24px } @media (min-width: 641px) { .txt-imgs { padding-top: 47px; padding-bottom: 47px } } .txt-imgs__inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } .txt-imgs__text-wrapper {} @media (min-width: 641px) { .txt-imgs__text-wrapper { padding-left: 80px; padding-right: 80px } } @media (min-width: 1025px) { .txt-imgs__text-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; padding-left: 40px; padding-right: 0 } } .txt-imgs__text-wrapper h2 { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em; padding: 24px 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: 400 } @media (min-width: 641px) { .txt-imgs__text-wrapper h2 { font-size: 1.8rem; line-height: 2.8rem } } @media (min-width: 641px) { .txt-imgs__text-wrapper h2 { font-weight: 300; font-size: 4rem; line-height: 100% } } .txt-imgs__text-wrapper p { padding: 16px 8px; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .txt-imgs__text-wrapper img { object-fit: cover; min-height: 814.533px; min-height: 50.9083333rem } .txt-imgs__text-img { display: none; position: relative } .txt-imgs__text-img picture { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .txt-imgs__text-img img { object-fit: contain; width: 100%; height: 100% } @media (min-width: 1025px) { .txt-imgs__text-img { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-txt-chess { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-row-gap: 56px; padding-top: 16px; padding-bottom: 16px } @media (min-width: 641px) { .img-txt-chess { grid-row-gap: 50px; padding: 47px 2px } } @media (min-width: 1025px) { .img-txt-chess { padding: 47px 40px; grid-row-gap: 0 } } .img-txt-chess__img-filter { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(90deg, #ffffff 0, rgba(196, 196, 196, 0) 100%); z-index: 1 } .img-txt-chess__text-wrapper { padding: 16px 0 0 } @media (min-width: 641px) { .img-txt-chess__text-wrapper { padding: 16px 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .img-txt-chess__text-wrapper { padding-left: 32px } } .img-txt-chess__text-wrapper h3 { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; padding: 8px; font-style: italic; font-weight: normal; font-size: 48px; line-height: 125%; text-transform: none; margin-bottom: 0 } @media (min-width: 641px) { .img-txt-chess__text-wrapper h3 { padding: 16px 8px } } @media (min-width: 1025px) { .img-txt-chess__text-wrapper h3 { max-width: 488px } } .img-txt-chess__text-wrapper p { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; padding: 8px } @media (min-width: 641px) { .img-txt-chess__text-wrapper p { padding: 16px 8px } } @media (min-width: 1025px) { .img-txt-chess__text-wrapper p { max-width: 488px } } .img-txt-chess__card { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 641px) { .img-txt-chess__card { min-height: 296px; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto; grid-column-gap: 24px; grid-row-gap: 24px } } @media (min-width: 1025px) { .img-txt-chess__card { min-height: 372px; grid-row-gap: 0; grid-column-gap: 0 } } .img-txt-chess__card picture { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100% } .img-txt-chess__card img { object-fit: cover; object-position: center; width: 100%; height: 100% } .img-txt-chess__card:nth-child(2n + 1) {} .img-txt-chess__card:nth-child(2n + 1) .img-txt-chess__img-filter { background: linear-gradient(90deg, rgba(196, 196, 196, 0) 0, #ffffff 100%) } .img-txt-chess__card:nth-child(2n) {} .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper {} @media (min-width: 641px) { .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper { -webkit-order: -1; -ms-flex-order: -1; order: -1 } } .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper p, .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper h3 { width: 100%; margin-left: auto } .img-txt-chess__img-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 216px; margin-bottom: 24px; position: relative; overflow: hidden } @media (min-width: 641px) { .img-txt-chess__img-wrapper { height: 100%; margin-bottom: 0 } } @media (min-width: 1025px) { .img-txt-chess__img-wrapper { min-height: 393px; height: 30.703125vw } } .img-txt-chess.\--no-gradient {} @media (min-width: 641px) { .img-txt-chess.\--no-gradient { grid-row-gap: 49px } } @media (min-width: 1025px) { .img-txt-chess.\--no-gradient { grid-row-gap: 48px } } .img-txt-chess.\--no-gradient .img-txt-chess__img-filter { display: none } .img-txt-chess.\--no-gradient .img-txt-chess__card {} .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper { border: 1px solid transparent } @media (min-width: 641px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper { border-top-color: #000000; border-bottom-color: #000000; border-right-color: #000000; padding-top: 24px; padding-bottom: 24px } } @media (min-width: 1025px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper { padding: 40px } } .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper h3 { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; padding-left: 0; padding-right: 0; text-transform: lowercase; font-style: normal; font-weight: bold; font-size: 38.4px; font-size: 2.4rem; line-height: 100% } @media (min-width: 641px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper h3 { padding-top: 0; font-style: normal; font-weight: bold; font-size: 4rem; line-height: 100%; letter-spacing: 0.02em; margin-bottom: 16px } } @media (min-width: 1025px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper h3 { max-width: 472px } } .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper p { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; font-weight: 300; letter-spacing: 0.02em } @media (min-width: 641px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper p { font-size: 1.6rem; line-height: 150% } } @media (min-width: 1025px) { .img-txt-chess.\--no-gradient .img-txt-chess__card .img-txt-chess__text-wrapper p { max-width: 472px } } .img-txt-chess.\--no-gradient .img-txt-chess__card:nth-child(2n) {} .img-txt-chess.\--no-gradient .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper { border: 1px solid transparent } @media (min-width: 641px) { .img-txt-chess.\--no-gradient .img-txt-chess__card:nth-child(2n) .img-txt-chess__text-wrapper { border-top-color: #000000; border-bottom-color: #000000; border-left-color: #000000 } } @media (min-width: 641px) { .img-txt-chess.\--no-gradient .img-txt-chess__card { grid-column-gap: 0 } } .img-txt-chess.\--no-gradient .img-txt-chess__img-wrapper { margin: 0 } @media (min-width: 1025px) { .img-txt-chess.\--no-gradient .img-txt-chess__img-wrapper { min-height: 372px; height: 29.0625vw } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-slider { padding-top: 24px; padding-bottom: 24px; overflow: hidden } @media (min-width: 641px) { .title-txt-slider { display: -ms-grid; display: grid; -ms-grid-columns: 42% 1fr; grid-template-columns: 42% 1fr; grid-column-gap: 32px; padding-top: 47px; padding-bottom: 47px } } @media (min-width: 1025px) { .title-txt-slider { -ms-grid-columns: 362px 1fr; grid-template-columns: 362px 1fr; grid-column-gap: 52px } } .title-txt-slider__text-wrapper {} .title-txt-slider__text-wrapper p { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; padding: 16px 8px } .title-txt-slider__title { font-family: "Didot"; font-style: italic; padding: 24px 8px; font-weight: 500; font-size: 45px !important; line-height: 125%; text-transform: none; color: #000000 } @media screen and (min-width: 2051px) { .title-txt-slider__title { font-size: 45px !important } } @media (min-width: 641px) { .title-txt-slider__title { font-size: 45px !important; line-height: 120% } } .title-txt-slider__subtitle { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em; text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; padding: 24px 8px; color: #2e1a47; margin: 0; font-weight: 300 } @media (min-width: 641px) { .title-txt-slider__subtitle { font-size: 1.8rem; line-height: 2.8rem } } @media (min-width: 641px) { .title-txt-slider__subtitle { font-style: normal; font-weight: 300; font-size: 2.4rem; line-height: 110%; color: #000000; border-bottom: 1px solid #9fa6d9 } } .title-txt-slider h4 { font-style: normal; font-weight: 400; text-transform: uppercase; padding: 24px 8px } .title-txt-slider__slider-wrapper { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; outline: none } @media (min-width: 641px) { .title-txt-slider__slider-wrapper { overflow: hidden } } @media (min-width: 1025px) { .title-txt-slider__slider-wrapper {} .title-txt-slider__slider-wrapper:hover {} .title-txt-slider__slider-wrapper:hover .flickity-button.flickity-prev-next-button { opacity: 1 } } .title-txt-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; width: calc(50% - 12px); -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .title-txt-slider__card { width: 176px } } @media (min-width: 1025px) { .title-txt-slider__card { width: 264px } } .title-txt-slider__card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .title-txt-slider__card:not(:last-of-type) { margin-right: 48px } } @media (orientation: landscape) { .title-txt-slider__card:not(:last-of-type) { margin-right: 70px } } .title-txt-slider__card-img-wrap { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .title-txt-slider__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .title-txt-slider__card-img-wrap { height: 365px } } .title-txt-slider__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .title-txt-slider__card-img-wrap .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .title-txt-slider__card-img-wrap .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } .title-txt-slider__card:hover {} .title-txt-slider__card:hover .\--first {} @media (min-width: 1025px) { .title-txt-slider__card:hover .\--first { opacity: 0 } } .title-txt-slider__card:hover .\--second {} @media (min-width: 1025px) { .title-txt-slider__card:hover .\--second { opacity: 1 } } .title-txt-slider__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .title-txt-slider__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .title-txt-slider__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .title-txt-slider .bv-main-wrap { margin-bottom: 8px } .title-txt-slider__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .title-txt-slider__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .title-txt-slider__star { width: 16px; height: 16px; background-image: url('/img/star.svg'); background-size: contain; background-position: center; background-repeat: no-repeat } .title-txt-slider .\--black-star { background-image: url(/img/black-star.svg) } .title-txt-slider__btn { position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; border: 1px solid #171717; background: #f3f2f4; cursor: pointer } .title-txt-slider .flickity-button.flickity-prev-next-button { position: absolute; top: 88px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px; height: 24px; border: none; background: transparent } @media (min-width: 641px) { .title-txt-slider .flickity-button.flickity-prev-next-button { top: 100px } } @media (min-width: 1025px) { .title-txt-slider .flickity-button.flickity-prev-next-button { top: 150px; width: 44px; height: 64px; opacity: 0; cursor: pointer; transition: opacity 0.3s ease } } .title-txt-slider .flickity-button.flickity-prev-next-button svg { display: none } .title-txt-slider .flickity-button.flickity-prev-next-button::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("/img/sliderarrow-purple.svg"); background-position: center; background-size: contain; background-repeat: no-repeat } @media (min-width: 1025px) { .title-txt-slider .flickity-button.flickity-prev-next-button::after { background-image: url("/img/arrow-for-button.svg"); width: 72px; height: 144px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8px; left: unset } } .title-txt-slider .flickity-button.flickity-prev-next-button.previous { left: 0 } .title-txt-slider .flickity-button.flickity-prev-next-button.previous::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } @media (min-width: 1025px) { .title-txt-slider .flickity-button.flickity-prev-next-button.previous::after { left: 8px; right: unset; -webkit-transform: rotate(-180deg) translateY(50%); -ms-transform: rotate(-180deg) translateY(50%); transform: rotate(-180deg) translateY(50%) } } .title-txt-slider .flickity-button.flickity-prev-next-button.next { right: 0 } .title-txt-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-copy-border-banner { padding-bottom: 44px } @media (min-width: 641px) { .img-copy-border-banner { padding-top: 64px; padding-bottom: 53px } } @media (min-width: 1025px) { .img-copy-border-banner { padding-top: 0 } } .img-copy-border-banner__banner { height: 282px; overflow: hidden } @media (min-width: 641px) { .img-copy-border-banner__banner { height: 284px } } @media (min-width: 1025px) { .img-copy-border-banner__banner { height: 37.96875vw; min-height: 486px; width: 56.875vw } } .img-copy-border-banner__banner picture { display: block; width: 100%; height: 100% } .img-copy-border-banner__banner img { display: block; object-fit: cover; object-position: center; width: 100%; height: 100% } .img-copy-border-banner__copy-container {} @media (min-width: 641px) { .img-copy-border-banner__copy-container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 100px } } @media (min-width: 1025px) { .img-copy-border-banner__copy-container { display: -webkit-flex; display: -ms-flexbox; display: flex } } .img-copy-border-banner__copy-container h1 { font-style: normal; font-weight: bold; font-size: 102.4px; font-size: 6.4rem; line-height: 105% } .img-copy-border-banner__copy-container h3 { padding: 8px; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.32px; letter-spacing: 0.02rem; margin-bottom: 24px } @media (min-width: 641px) { .img-copy-border-banner__copy-container h3 { margin-bottom: 0 } } @media (min-width: 1025px) { .img-copy-border-banner__copy-container h3 { margin-bottom: 24px; color: #000000 } } .img-copy-border-banner__copy-container .btn-outline { padding: 15px 19px 16px; font-weight: 300; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; text-transform: capitalize; margin-left: 8px; margin-top: 8px; color: #171717; border: 1px solid #171717 } .img-copy-border-banner__copy-container .btn-outline:hover { background: #171717; color: #ffffff } .img-copy-border-banner h1 { font-style: normal; font-weight: bold; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; padding: 24px 0 24px 8px; text-transform: capitalize } .img-copy-border-banner h3 { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } @media (min-width: 641px) { .img-copy-border-banner h3 { font-size: 1.8rem; line-height: 2.8rem } } @media (min-width: 641px) { .img-copy-border-banner h3 { font-size: 1.6rem; line-height: 150% } } @media (min-width: 1025px) { .img-copy-border-banner h3 { padding-right: 0; max-width: 394px } } .img-copy-border-banner__cruelty-free-logos { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 8px; margin-top: -8px; margin-bottom: 12px } @media (min-width: 641px) { .img-copy-border-banner__cruelty-free-logos { margin-top: 8px; margin-bottom: 4px } } @media (min-width: 1025px) { .img-copy-border-banner__cruelty-free-logos { margin-top: -8px; margin-bottom: 12px } } .img-copy-border-banner__cruelty-free-logos img { height: 64px; height: 4rem; width: auto; margin-right: 48px; margin-right: 3rem } .img-copy-border-banner__copy-text { padding: 12px 8px 28px } @media (min-width: 641px) { .img-copy-border-banner__copy-text { padding: 0 16px } } @media (min-width: 1025px) { .img-copy-border-banner__copy-text { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-left: 32px; padding-right: 0; max-width: 552px } } .img-copy-border-banner__text-container { padding: 12px 0 } @media (min-width: 641px) { .img-copy-border-banner__text-container { max-width: 624px; padding: 36px 56px; outline: 1px solid #000000 } } @media (min-width: 1025px) { .img-copy-border-banner__text-container { max-width: 800px; padding: 44px 104px } } .img-copy-border-banner h2 { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; padding: 24px 8px; font-style: normal; font-weight: bold; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-transform: lowercase } @media (min-width: 641px) { .img-copy-border-banner h2 { font-style: normal; font-weight: bold; font-size: 4rem; line-height: 100%; letter-spacing: 0.02em } } .img-copy-border-banner p { padding: 16px 8px; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .img-copy-border-banner p * { padding: 0; margin: 0; display: inline-block; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .products-grid { padding-top: 0; padding-bottom: 24px; background: #ffffff; box-sizing: border-box } @media (min-width: 641px) { .products-grid { position: -webkit-sticky; position: sticky; top: 24px } } .products-grid h4 { font-style: normal; font-weight: 400; text-transform: uppercase; padding: 8px 0; margin: 0 8px; border-top: 1px solid #d3d3d3; width: calc(100% - 16px) } .products-grid__grid { margin-top: 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100%; outline: none } @media (min-width: 641px) { .products-grid__grid { overflow: hidden } } @media (min-width: 1025px) { .products-grid__grid {} .products-grid__grid:hover {} .products-grid__grid:hover .flickity-button.flickity-prev-next-button { opacity: 1 } } .products-grid__grid.row-direction { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .products-grid__card { width: calc(50% - 12px); -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease; overflow: hidden } @media (min-width: 641px) { .products-grid__card { width: calc(50% - 16px) } } @media (min-width: 1025px) { .products-grid__card { width: calc(50% - 35px) } } .products-grid__card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .products-grid__card:not(:last-of-type) { margin-right: 48px } } @media (orientation: landscape) { .products-grid__card:not(:last-of-type) { margin-right: 70px } } .products-grid__card-img-wrap { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .products-grid__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .products-grid__card-img-wrap { height: 365px } } .products-grid__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .products-grid__card-img-wrap .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .products-grid__card-img-wrap .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } .products-grid__card:hover {} .products-grid__card:hover .\--first {} @media (min-width: 1025px) { .products-grid__card:hover .\--first { opacity: 0 } } .products-grid__card:hover .\--second {} @media (min-width: 1025px) { .products-grid__card:hover .\--second { opacity: 1 } } .products-grid__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .products-grid__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .products-grid__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .products-grid .bv-main-wrap { margin-bottom: 8px } .products-grid__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .products-grid__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .products-grid__star { width: 16px; height: 16px; background-image: url('/img/star.svg'); background-size: contain; background-position: center; background-repeat: no-repeat } .products-grid .\--black-star { background-image: url('/img/black-star.svg') } .products-grid__btn { position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; border: 1px solid #171717; background: #f3f2f4; cursor: pointer } .products-grid__messege-no-products-wrap { height: auto; position: relative; width: calc(200% + 24px); min-height: 35px } @media (min-width: 641px) { .products-grid__messege-no-products-wrap { min-height: 80vh } } @media (min-width: 1025px) { .products-grid__messege-no-products-wrap { width: calc(300% + 96px) } } .products-grid__messege-no-products { position: absolute; width: 100%; top: -48px } @media (min-width: 641px) { .products-grid__messege-no-products { width: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: calc(50% - 30px); left: 50% } } .products-grid__messege-no-products p { font-size: 25.6px; font-size: 1.6rem } .products-grid__messege-no-products p:first-child { margin-bottom: 10px } .products-grid .flickity-viewport { overflow: hidden } .products-grid .flickity-button.flickity-prev-next-button { position: absolute; top: 88px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px; height: 24px; border: none; background: transparent } @media (min-width: 641px) { .products-grid .flickity-button.flickity-prev-next-button { top: 100px } } @media (min-width: 1025px) { .products-grid .flickity-button.flickity-prev-next-button { top: 150px; width: 44px; height: 64px; opacity: 0; cursor: pointer; transition: opacity 0.3s ease } } .products-grid .flickity-button.flickity-prev-next-button svg { display: none } .products-grid .flickity-button.flickity-prev-next-button::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("/img/sliderarrow-purple.svg"); background-position: center; background-size: contain; background-repeat: no-repeat } @media (min-width: 1025px) { .products-grid .flickity-button.flickity-prev-next-button::after { background-image: url("/img/arrow-for-button.svg"); width: 72px; height: 144px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8px; left: unset } } .products-grid .flickity-button.flickity-prev-next-button.previous { left: 0 } .products-grid .flickity-button.flickity-prev-next-button.previous::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } @media (min-width: 1025px) { .products-grid .flickity-button.flickity-prev-next-button.previous::after { left: 8px; right: unset; -webkit-transform: rotate(-180deg) translateY(50%); -ms-transform: rotate(-180deg) translateY(50%); transform: rotate(-180deg) translateY(50%) } } .products-grid .flickity-button.flickity-prev-next-button.next { right: 0 } .products-grid .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } @media (min-width: 1025px) { .small-cards-product { padding-top: 128px } .small-cards-product__grid { border-top: none; padding-top: 0; grid-column-gap: 48px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .\--products-menu { display: block; position: absolute; top: 88px; left: 0; right: 0; background: white; height: 82vh; overflow-y: scroll; z-index: 999 } .\--products-menu .mob-nav__popup-list-accordion { margin-bottom: 0; padding: 14px 0 14px 16px } .\--products-menu .mob-nav__popup-list-accordion .header-logo-fixed__nav-link {} .\--products-menu .mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px } .\--products-menu .mob-nav__popup-list-accordion .header-logo-fixed__nav-link.section-sub-header { font-family: 'Chiswick Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; text-transform: uppercase } .\--products-menu .mob-nav__popup-list-accordion .header-logo-fixed__nav-link.before { position: relative } .\--products-menu .mob-nav__popup-list-accordion.\--search-nav { display: none } @media (min-width: 641px) { .\--products-menu .mob-nav__popup-list-accordion.\--search-nav { display: block } } @media (min-width: 641px) { .\--products-menu .mob-nav__popup-list-accordion { padding: 32px 0 32px 40px } .\--products-menu .mob-nav__popup-list-accordion a { font-size: 24px } } .\--products-menu .mob-nav__popup-list-accordion a { height: 100%; width: auto; display: block; padding: 0 0 0 24px; font-size: 18px; line-height: 120%; font-weight: 300; text-transform: uppercase; font-family: "Sofia Pro"; margin-right: 12px } .\--products-menu .mob-nav__popup__img-arrows { display: none; width: 12px; height: 12px; object-fit: contain; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2) } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .article-component { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 641px) { .article-component { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-column-gap: 16px } } @media (min-width: 1025px) { .article-component { padding-top: 32px; grid-column-gap: 32px } } .article-component__grid-img { -webkit-order: 1; -ms-flex-order: 1; order: 1 } @media (min-width: 641px) { .article-component__grid-img { -webkit-order: 0; -ms-flex-order: 0; order: 0; height: 100% } } .article-component__picture { display: none } @media (min-width: 641px) { .article-component__picture { display: block; height: calc(64.45vw + 48px); width: 100%; padding: 24px 8px; margin-bottom: 24px } .article-component__picture img { object-fit: cover; object-position: center; width: 100%; height: 100% } } .article-component__article-wrapper {} .article-component__article-wrapper picture { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 24px 8px; height: 140.833333vw } @media (min-width: 641px) { .article-component__article-wrapper picture { display: none } } .article-component__article-wrapper picture img { object-fit: cover; object-position: center; width: 100%; height: 100% } .article-component__article-wrapper .wys {} .article-component__article-wrapper .wys .instagram-media.instagram-media-rendered { max-width: 100% !important; margin: 0 auto 12px !important; width: calc(100% - 16px) !important } .article-component__title { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; padding: 24px 8px; font-style: normal; font-weight: normal; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: unset } @media (min-width: 641px) { .article-component__title { font-size: 4rem; line-height: 110% } } @media (min-width: 641px) { .article-component__title { font-weight: 300; font-size: 6.4rem; line-height: 105%; margin-bottom: 24px } } .article-component__date { font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; padding: 8px } .article-component__subtitle p { padding: 16px 8px 0; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; text-transform: unset; margin-bottom: 56px } @media (min-width: 641px) { .article-component__subtitle p { margin-bottom: 48px } } .article-component .wys { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .article-component .wys p, .article-component .wys a { font-size: 25.6px; font-size: 1.6rem; line-height: 150% } @media (min-width: 1025px) { .article-component .wys p, .article-component .wys a { font-size: 1.6rem; line-height: 150% } } .article-component .wys ul li { display: block } .article-component .wys ul li p { display: inline } .article-component .wys a { font-style: normal; font-weight: 300; text-decoration: underline; padding: 0 } @media (min-width: 1025px) { .article-component .wys a { font-size: 1.6rem; line-height: 150% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-copy-btn-img { padding: 24px 16px 8px; overflow: hidden } @media (min-width: 641px) { .title-copy-btn-img { padding: 50px 72px 42px } } @media (min-width: 1025px) { .title-copy-btn-img { padding: 50px 180px 67px } } .title-copy-btn-img__inner { border: 1px solid #aedad6; padding: 48px 16px } @media (min-width: 641px) { .title-copy-btn-img__inner { padding: 40px 48px } } @media (min-width: 1025px) { .title-copy-btn-img__inner { padding: 64px 48px 72px } } .title-copy-btn-img__content-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .title-copy-btn-img h2 { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 36px; line-height: 100%; text-align: center; text-transform: unset; color: #000000; margin-bottom: 24px } @media (min-width: 641px) { .title-copy-btn-img h2 { font-size: 64px; line-height: 110%; margin-bottom: 16px } } @media (min-width: 1025px) { .title-copy-btn-img h2 { font-size: 7.2rem } } .title-copy-btn-img p { font-style: normal; font-weight: 300; font-size: 18px; line-height: 120%; text-align: center; text-transform: uppercase; color: #000000; padding-bottom: 24px; margin-bottom: 24px } @media (min-width: 641px) { .title-copy-btn-img p { max-width: 576px; margin: 0 auto 16px; font-size: 2.4rem; line-height: 110% } } .title-copy-btn-img .btn-outline { font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; width: auto; height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #000000; border-color: #000000 } .title-copy-btn-img.\--where-to-buy { padding: 32px 8px 40px } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy { padding: 40px 72px 10px } } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy { padding: 64px 72px 10px } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 25.6px; font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0; letter-spacing: 0.32px; letter-spacing: 0.02rem } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0 } } @media (min-width: 1025px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0 } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner { border: 1px solid #000000; padding-top: 49px; padding-bottom: 60px } @media (min-width: 1025px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner { max-width: 900px; margin: 0 auto } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner h2 { font-size: 38.4px; font-size: 2.4rem } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner h2 { margin-bottom: 24px; font-size: 4rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .filter-component { padding-left: 8px; padding-right: 8px; width: 100% } @media (min-width: 641px) { .filter-component { display: -ms-grid; display: grid; -ms-grid-columns: 280px 1fr; grid-template-columns: 280px 1fr; grid-column-gap: 45px } } @media (min-width: 1025px) { .filter-component { grid-column-gap: 41px } } .filter-component__filter-wrap { border-top: 1px solid #777777 } @media (min-width: 641px) { .filter-component__filter-wrap { position: -webkit-sticky; position: sticky; top: 84px } } @media (min-width: 1025px) { .filter-component__filter-wrap { top: 112px } } .filter-component__btn-wrapper { min-height: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .filter-component__btn-wrapper .\--close { display: none; height: 24px; width: 24px; padding: 0; margin-top: 4px; cursor: pointer } .filter-component__heading { line-height: 100%; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; text-transform: uppercase; padding: 8px 8px 8px 0 } .filter-component img { display: none } .filter-component img.\--active { display: block } .filter-component__open-list-btn { width: 24px; height: 24px; padding: 0; margin-top: 5px; cursor: pointer } .filter-component__btn { background: transparent; width: 64px; border: 0; outline: none; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 8px; min-height: 32px; display: none; color: #d3d3d3; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; transition: all 0.3s ease; text-transform: capitalize } .filter-component__btn.\--active { display: -webkit-flex; display: -ms-flexbox; display: flex } .filter-component__btn.\--select { color: #171717; cursor: pointer } .filter-component__btn:active, .filter-component__btn:focus { outline: none } .filter-component__filled { width: 16px; height: 16px; transition: all 0.3s ease; background: #000000; opacity: 0 } .filter-component__filter-list { display: none } .filter-component__filter-list.\--active { display: none } .filter-component__checkbox { width: 24px; height: 24px; border: 1px solid #000000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .filter-component__filter-item { padding: 20px 26px 20px 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer } .filter-component__filter-item p { font-size: 22.4px; font-size: 1.4rem; line-height: 100%; font-family: "Minion Pro" } .filter-component__filter-item.\--selected { } .filter-component__filter-item.\--selected .filter-component__filled { width: 100%; height: 100%; opacity: 1 } .filter-component__filter-item.\--filter-children { padding-left: 52px; margin-right: 4px } .filter-component__filter-item.\--filter-children .filter-component__checkbox { width: 16px !important; height: 16px !important; min-width: 16px !important } @media (min-width: 1025px) { .filter-component__filter-item { } .filter-component__filter-item:hover { } .filter-component__filter-item:hover .filter-component__filled { opacity: 1 } } .filter-component.\--mob-filter { width: 100%; height: calc(100vh - 50px); background: #ffffff; position: absolute; top: 0; left: 0; padding-top: 0; padding-bottom: 60px; z-index: 100; overflow-y: scroll; display: none } .filter-component.\--mob-filter .filter-component__inner { margin-bottom: 24px } .filter-component.\--mob-filter .filter-component__filter-list { display: block } .filter-component.\--mob-filter .filter-component__btn-filter { width: 152px; height: 43px; line-height: 40px; text-align: center; border-radius: 0; border: 1px solid #171717; background: #ffffff; cursor: pointer; font-family: "Sofia Pro"; font-weight: 400; position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .filter-component.\--mob-filter .filter-component__top { height: 40px; padding: 11px 7px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 15px; position: -webkit-sticky; position: sticky; top: 0; background-color: #ffffff } .filter-component.\--mob-filter .filter-component__btn-close { width: 24px; height: 24px } .filter-component.\--mob-filter .btn-close { display: block; width: 24px; height: 24px } .filter-component .title-card-grid { padding: 0 } @media (min-width: 641px) { .filter-component .title-card-grid { padding: 0 } } @media (min-width: 1025px) { .filter-component .title-card-grid { padding: 0 } } .filter-component .title-card-grid__grid { padding: 0; display: block } @media (min-width: 641px) { .filter-component .title-card-grid__grid { display: block; padding: 0 } } @media (min-width: 1025px) { .filter-component .title-card-grid__grid { padding: 0; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 48px; grid-row-gap: 72px; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .filter-component .title-card-grid__card picture { height: 459px } @media (min-width: 641px) { .filter-component .title-card-grid__card picture { height: 495px } } @media (min-width: 1025px) { .filter-component .title-card-grid__card picture { height: 365px } } .filter-component .title-card-grid__card { padding: 0 } @media (min-width: 641px) { .filter-component .title-card-grid__card { padding: 0 } } @media (min-width: 1025px) { .filter-component .title-card-grid__card { padding: 0 } } .filter-component .title-card-grid__card img { display: block } .\--mob-filter { } .\--mob-filter .filter-component__btn-wrapper img.\--active { display: none } .\--mob-filter .filter-component__btn { display: block } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .filter-component-nav { width: 100% } .filter-component-nav.padding-top { padding-top: 27px } .filter-component-nav__btn-container { position: relative; width: 24px; height: 24px; margin: auto 0 } .filter-component-nav__filter-wrap { border: none; padding: 0 } .filter-component-nav__filter-wrap .filter-component-nav__open-list-btn { position: absolute; width: 24px; height: 24px; padding: 0; margin: auto 0; cursor: pointer; opacity: 1; transition: opacity 0.5s ease } .filter-component-nav__filter-wrap .filter-component-nav__close-list-btn { position: absolute; width: 24px; height: 24px; padding: 0; margin: auto 0; cursor: pointer; opacity: 0; transition: opacity 0.5s ease } .filter-component-nav__filter-wrap.\--active {} .filter-component-nav__filter-wrap.\--active .filter-component-nav__open-list-btn { opacity: 0; transition: opacity 0.5s ease } .filter-component-nav__filter-wrap.\--active .filter-component-nav__close-list-btn { opacity: 1; transition: opacity 0.5s ease } .filter-component-nav__btn-wrapper { min-height: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left } .filter-component-nav__main-heading { font-family: "Chiswick Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 29px; padding-top: 15px; padding-bottom: 34px; color: #000000; letter-spacing: 0 } .filter-component-nav__main-heading a { color: #000000 !important } .filter-component-nav__heading { padding: 10px 10px 10px 0; font-family: "Chiswick Sans"; text-transform: uppercase; font-style: normal; font-weight: 400; font-size: 12px; line-height: 14px; letter-spacing: 0 } .filter-component-nav img { display: block } .filter-component-nav__btn { background: transparent; width: 64px; border: 0; outline: none; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 8px; min-height: 32px; display: none; color: #d3d3d3; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; transition: all 0.3s ease; text-transform: capitalize } .filter-component-nav__btn.\--active { display: -webkit-flex; display: -ms-flexbox; display: flex } .filter-component-nav__btn.\--select { color: #171717; cursor: pointer } .filter-component-nav__btn:active, .filter-component-nav__btn:focus { outline: none } .filter-component-nav__filled { width: 16px; height: 16px; transition: all 0.3s ease; background: #000000; opacity: 0 } .filter-component-nav__filter-list { display: none } .filter-component-nav__filter-list.\--active { display: none } .filter-component-nav__checkbox { width: 24px; height: 24px; border: 1px solid #000000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .filter-component-nav__filter-item { padding: 12px 26px 12px 24px !important; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer } .filter-component-nav__filter-item a { font-family: 'Sofia Pro', sans-serif; font-weight: 300; font-size: 16px; line-height: 20px } .filter-component-nav__filter-item a::before { background-color: #000000; height: 1px; width: 0; position: absolute; content: ""; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease } .filter-component-nav__filter-item:hover {} .filter-component-nav__filter-item:hover a::before { width: 100% } .filter-component-nav__filter-item.\--selected {} .filter-component-nav__filter-item.\--selected .filter-component__filled { width: 100%; height: 100%; opacity: 1 } .filter-component-nav__filter-item.\--filter-children { padding-left: 52px; margin-right: 4px } .filter-component-nav__filter-item.\--filter-children .filter-component__checkbox { width: 16px !important; height: 16px !important; min-width: 16px !important } @media (min-width: 1025px) { .filter-component-nav__filter-item {} .filter-component-nav__filter-item:hover {} .filter-component-nav__filter-item:hover .filter-component__filled { opacity: 1 } } .filter-component-nav.\--mob-filter { width: 100%; height: calc(100vh - 50px); background: #ffffff; position: absolute; top: 0; left: 0; padding-top: 0; padding-bottom: 60px; z-index: 100; overflow-y: scroll; display: none } .filter-component-nav.\--mob-filter .filter-component__inner { margin-bottom: 24px } .filter-component-nav.\--mob-filter .filter-component__filter-list { display: block } .filter-component-nav.\--mob-filter .filter-component__btn-filter { width: 152px; height: 43px; line-height: 40px; text-align: center; border-radius: 0; border: 1px solid #171717; background: #ffffff; cursor: pointer; font-family: "Sofia Pro"; font-weight: 400; position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .filter-component-nav.\--mob-filter .filter-component__top { height: 40px; padding: 11px 7px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 15px; position: -webkit-sticky; position: sticky; top: 0; background-color: #ffffff } .filter-component-nav.\--mob-filter .filter-component__btn-close { width: 24px; height: 24px } .filter-component-nav.\--mob-filter .btn-close { display: block; width: 24px; height: 24px } .filter-component-nav .title-card-grid { padding: 0 } @media (min-width: 641px) { .filter-component-nav .title-card-grid { padding: 0 } } @media (min-width: 1025px) { .filter-component-nav .title-card-grid { padding: 0 } } .filter-component-nav .title-card-grid__grid { padding: 0; display: block } @media (min-width: 641px) { .filter-component-nav .title-card-grid__grid { display: block; padding: 0 } } @media (min-width: 1025px) { .filter-component-nav .title-card-grid__grid { padding: 0; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 48px; grid-row-gap: 72px; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .nav-product-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; padding: 0 32px } .nav-product-grid__description { font-family: "Chiswick Sans"; display: block; font-style: normal; font-weight: 400; font-size: 12px !important; line-height: 14px !important; color: #000000; text-transform: uppercase; margin-bottom: 8px } .nav-product-grid__title { font-family: "Chiswick Sans"; display: block; font-weight: 400; font-size: 24px !important; line-height: 32px !important; color: #000000; padding-bottom: 34px; letter-spacing: 0 } .nav-product-grid__img-container { width: auto; padding-top: 62.95%; position: relative; overflow: hidden } .nav-product-grid__img-link { position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; min-width: 100% !important; min-height: 100% !important; transition: all 0.5s ease } .nav-product-grid__img-link img { min-width: 100% !important; min-height: 100% !important } .nav-product-grid__img-link:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } .nav-product-grid__links { padding: 0; margin: 0; padding-top: 50px; list-style: none } .nav-product-grid__links li { padding: 12px 0; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 20px; color: #000000 !important } .nav-product-grid__links li a { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 20px } .nav-product-grid__links li a::before { background-color: #000000; height: 1px; width: 0; position: absolute; content: ""; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease } .nav-product-grid__links li:hover { } .nav-product-grid__links li:hover a::before { width: 100% } .products-listing-nav { overflow: auto; height: auto; height: initial; -ms-grid-row-span: 2; -ms-grid-row: 1; grid-row: 1 / span 2 } .products-listing-nav__wrapper { margin-top: 0; padding: 0 } .products-listing-nav .filter-component { } @media (min-width: 641px) { .products-listing-nav .filter-component { -ms-grid-columns: 1fr; grid-template-columns: 1fr } .products-listing-nav .filter-component .filter-component__heading { max-width: 142px } } .products-listing-nav a.small-cards-product__card { } @media (min-width: 1025px) { .products-listing-nav a.small-cards-product__card { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .products-listing-nav a.small-cards-product__card .mobile_products_slider { outline: none !important } .products-listing-nav a.small-cards-product__card .mobile_products_slider picture { position: relative; left: auto; top: auto; height: 200px; width: 100% } .products-listing-nav .\--double-img { width: 100%; padding-top: 24px } @media (max-width: 374px) { .products-listing-nav .\--double-img { padding-top: 0; width: 100% } } @media (min-width: 375px) { .products-listing-nav .\--double-img { padding-top: 0 } } @media (min-width: 641px) { .products-listing-nav .\--double-img { padding-top: 24px } } .products-listing-nav .small-cards-product__inner.container.\--small { } @media (min-width: 1025px) { .products-listing-nav .small-cards-product__inner.container.\--small { padding-left: 0; padding-right: 8px } } .products-listing-nav .seo-content { width: 100%; padding: 0 32px; margin: 64px auto 0; text-align: center; max-width: 1024px } @media (max-width: 1024px) { .products-listing-nav .seo-content { padding: 0 16px; max-width: 720px } } @media (max-width: 640px) { .products-listing-nav .seo-content { margin: 32px auto } } .products-listing-nav .seo-content h1 { font-size: 57.6px; font-size: 3.6rem; font-weight: 300; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px } @media (max-width: 1024px) { .products-listing-nav .seo-content h1 { font-size: 1.8rem } } .products-listing-nav .seo-content h2 { font-size: 25.6px; font-size: 1.6rem; font-weight: 300; line-height: 24px; letter-spacing: 0.2px } .products-listing-nav .seo-content h2 a { text-decoration: underline } .products-listing-filters { } @media (min-width: 641px) { .products-listing-filters { position: -webkit-sticky; position: sticky; top: 80px; max-height: calc(100vh - 308px); overflow-y: scroll } } @media (min-width: 641px) { .products-listing-filters { top: 112px } } @media (min-width: 1025px) { .products-listing-filters { max-height: calc(100vh - 225px) } } .products-listing-filters::-webkit-scrollbar { width: 0 } .products-listing-filters__wrap { display: none } @media (min-width: 641px) { .products-listing-filters__wrap { display: block; padding-top: 23px } } @media (min-width: 1025px) { .products-listing-filters__wrap { padding-top: 0 } } .products-listing-filters .filter-component__inner { margin-bottom: 23px } .\--mob-filter { } .\--mob-filter .filter-component__btn-wrapper img.\--active { display: none } .\--mob-filter .filter-component__btn { display: block } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .card-slider { padding: 24px 16px 36px; margin-bottom: 24px !important; position: relative } @media (min-width: 641px) { .card-slider { padding-top: 50px; padding-bottom: 50px; margin-bottom: 0 !important } } @media (min-width: 1025px) { .card-slider { padding-left: 40px; padding-right: 40px } } .card-slider__title-wrapper { padding: 16px 8px 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 28px } .card-slider__title-wrapper h2 { padding-right: 24px; padding-bottom: 4px; font-style: normal; font-weight: normal; font-size: 32px; line-height: 100% } @media (min-width: 641px) { .card-slider__title-wrapper h2 { font-size: 3.2rem; line-height: 100% } } @media (min-width: 1025px) { .card-slider__title-wrapper h2 { font-style: normal; font-weight: 300; font-size: 36px; line-height: 100%; letter-spacing: 0.02em } } .card-slider__link { position: relative; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; text-align: right; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 32px; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .card-slider__link::after { content: ""; display: block; height: 1px; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #171717; transition: all 0.3s ease } .card-slider__link:hover {} .card-slider__link:hover::before { width: 100% } .card-slider__grid { padding-left: 8px; padding-right: 8px; width: 100%; outline: none } @media (min-width: 641px) { .card-slider__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .card-slider__grid { grid-column-gap: 48px } } .card-slider__card { cursor: pointer; width: calc(50% - 12px); display: block } .card-slider__card:not(:last-child) { margin-right: 24px } @media (min-width: 641px) { .card-slider__card:not(:last-child) { margin-right: 0 } } @media (min-width: 641px) { .card-slider__card { width: 100% } } @media (min-width: 1025px) { .card-slider__card { transition: all 0.3s ease } } .card-slider__card:nth-child(n + 5) { display: none } .card-slider__card-img-wrap { margin-bottom: 24px; height: 200px; position: relative } @media (min-width: 641px) { .card-slider__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .card-slider__card-img-wrap { height: 365px } .card-slider__card-img-wrap::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } } .card-slider__card-img-wrap img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block } .card-slider__card:hover .card-slider__card-img-wrap::after {} @media (min-width: 1025px) { .card-slider__card:hover .card-slider__card-img-wrap::after { opacity: 1 } } .card-slider__card-title { padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-weight: 300 } .card-slider__card-date { padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-weight: 300; font-size: 22.4px; font-size: 1.4rem } .card-slider .flickity-viewport { overflow: hidden; position: relative } .card-slider .flickity-page-dots { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .card-slider .flickity-page-dots .dot { border: 1px solid #777777; height: 8px; width: 8px; background-color: transparent; transition: background-color 0.3s ease; cursor: pointer; border-radius: 50% } .card-slider .flickity-page-dots .dot:not(:last-of-type) { margin-right: 8px } .card-slider .flickity-page-dots .dot.is-selected { background-color: #171717; border: 1px solid #171717 } .card-slider .flickity-button { width: 7px; height: 12px; padding: 0; background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; background-color: transparent; border: none; cursor: pointer; bottom: -2px } .card-slider .flickity-button svg { display: none } .card-slider .flickity-button.previous { background-image: url("/img/btn-prev-black.svg"); left: calc(50% - 33px); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .card-slider .flickity-button.next { background-image: url("/img/btn-next-black.svg"); right: calc(50% - 33px); -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%) } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-img { background-color: #eeefef } @media (min-width: 1025px) { .title-txt-img { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr } } .title-txt-img__title-txt { padding: 40px 16px 48px } @media (min-width: 641px) { .title-txt-img__title-txt { padding: 59px 72px 67px } } @media (min-width: 1025px) { .title-txt-img__title-txt { min-width: 478px; padding: 0 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } .title-txt-img__title { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; margin-bottom: 12px; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; color: #000000 } @media (min-width: 641px) { .title-txt-img__title { font-size: 4rem; line-height: 110% } } @media (min-width: 641px) { .title-txt-img__title { font-size: 6.4rem; line-height: 105%; margin-bottom: 25px } } .title-txt-img__txt {} @media (min-width: 641px) { .title-txt-img__txt { padding-right: 8px; padding-left: 0 } } @media (min-width: 1025px) { .title-txt-img__txt { padding-right: 48px; padding-bottom: 8px } } .title-txt-img__txt p { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .title-txt-img__img { height: 173px } @media (min-width: 641px) { .title-txt-img__img { height: 369px } } @media (min-width: 1025px) { .title-txt-img__img { height: 416px } } .title-txt-img__img img { display: block; object-fit: cover; object-position: center; width: 100%; height: 100% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-list-links { padding: 33px 8px 48px } @media (min-width: 641px) { .title-list-links { padding: 65px 16px 60px; max-width: 45%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline } } @media (min-width: 1025px) { .title-list-links { display: block; padding: 32px; min-width: 478px; max-width: none } } .title-list-links__title { text-align: center; text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 32px } @media (min-width: 641px) { .title-list-links__title { font-size: 2.4rem; line-height: 110%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 24px } } @media (min-width: 1025px) { .title-list-links__title { display: block; margin-bottom: 32px; text-align: left } } .title-list-links__list-links { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; text-transform: uppercase } @media (min-width: 641px) { .title-list-links__list-links { text-align: left } } .title-list-links__list-links-left { margin-right: 8px } @media (min-width: 641px) { .title-list-links__list-links-left { margin-right: 32px } } @media (min-width: 1025px) { .title-list-links__list-links-left { margin-right: auto } } .title-list-links__list-links-right {} @media (min-width: 1025px) { .title-list-links__list-links-right { margin-right: auto } } .title-list-links li a { font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-decoration: underline; color: #000000 } @media (min-width: 1025px) { .title-list-links li a { font-size: 1.35rem } } .title-list-links li:not(:last-child) { margin-bottom: 24px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .txt-img-title { } .txt-img-title__wrapper { } @media (min-width: 1025px) { .txt-img-title__wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr } } .txt-img-title__txt-bg { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 40px 16px; color: #ffffff; background: #2c2b6c } @media (min-width: 641px) { .txt-img-title__txt-bg { padding: 60px 72px 68px } } @media (min-width: 1025px) { .txt-img-title__txt-bg { min-width: 478px; padding: 0 72px 0 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } .txt-img-title__txt-bg h4 { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-style: normal; font-weight: 300; margin-bottom: 12px } @media (min-width: 641px) { .txt-img-title__txt-bg h4 { font-size: 4rem; line-height: 110% } } @media (min-width: 641px) { .txt-img-title__txt-bg h4 { font-size: 6.4rem; line-height: 105%; margin-bottom: 25px } } .txt-img-title__txt-bg p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.32px; letter-spacing: 0.02rem } @media (min-width: 641px) { .txt-img-title__txt-bg p { padding-left: 0; padding-right: 8px; margin-bottom: 33px; max-width: 472px } } @media (min-width: 1025px) { .txt-img-title__txt-bg p { margin-bottom: 33px; max-width: 296px } } .txt-img-title__txt-bg a { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; color: #ffffff; text-decoration: underline; display: none } @media (min-width: 641px) { .txt-img-title__txt-bg a { display: block } } @media (min-width: 1025px) { .txt-img-title__txt-bg a { padding-bottom: 8px } } .txt-img-title__img { height: 174px } @media (min-width: 641px) { .txt-img-title__img { height: 369px } } @media (min-width: 1025px) { .txt-img-title__img { height: 416px } } .txt-img-title__img img { display: block; object-fit: cover; object-position: center; width: 100%; height: 100% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-slider-product-card { padding-bottom: 24px; position: relative; z-index: 3 } @media (min-width: 641px) { .img-slider-product-card { padding-left: 8px; padding-right: 8px; padding-top: 24px } } @media (min-width: 1025px) { .img-slider-product-card { padding-bottom: 0 } } .img-slider-product-card.container.\--small { padding-left: 0; padding-right: 0 } @media (min-width: 641px) { .img-slider-product-card.container.\--small { padding-left: 8px; padding-right: 8px } } .img-slider-product-card__inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 641px) { .img-slider-product-card__inner { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px } } @media (min-width: 1025px) { .img-slider-product-card__inner { -ms-grid-columns: 1fr; grid-template-columns: 1fr } } .img-slider-product-card__cruelty-free-logos { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 8px; margin: 0 0 16px; margin: 0 0 1rem } @media (min-width: 1025px) { .img-slider-product-card__cruelty-free-logos { margin: 1rem 0 } } .img-slider-product-card__cruelty-free-logos img { height: 64px; height: 4rem; width: auto; margin-right: 48px; margin-right: 3rem } .img-slider-product-card__slider-wrapper { position: relative } .img-slider-product-card__slider { outline: none; position: relative; margin-bottom: 18px } @media (min-width: 641px) { .img-slider-product-card__slider { margin-left: 64px; margin-bottom: 12px } } @media (min-width: 1025px) { .img-slider-product-card__slider { display: none; margin-left: 104px } } .img-slider-product-card__slider .flickity-viewport { overflow-x: hidden; overflow-y: visible } .img-slider-product-card__slider picture { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 0 24px; height: 459px; width: 100%; overflow: hidden } @media (min-width: 641px) { .img-slider-product-card__slider picture { height: 400px; padding: 0 } } .img-slider-product-card__slider img { object-fit: contain; object-position: center; width: 100%; height: 100% } .img-slider-product-card__slider .flickity-page-dots { position: absolute; bottom: -18px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .img-slider-product-card__slider .flickity-page-dots .dot { border: 1px solid #777777; height: 8px; width: 8px; background-color: transparent; transition: background-color 0.3s ease; cursor: pointer; border-radius: 50% } @media (min-width: 641px) { .img-slider-product-card__slider .flickity-page-dots .dot { height: 12px; width: 12px } } .img-slider-product-card__slider .flickity-page-dots .dot:not(:last-child) { margin-right: 8px } .img-slider-product-card__slider .flickity-page-dots .dot.is-selected { background-color: #171717; border: 1px solid #171717 } .img-slider-product-card__slider-nav-inner { width: 68px; overflow-x: hidden } .img-slider-product-card__slider-nav-inner::-webkit-scrollbar { width: 0 } .img-slider-product-card__slider-nav { outline: none; display: none; position: absolute; height: 400px; width: 48px; overflow-y: scroll; overflow-x: hidden; max-width: 48px; top: 0; left: 0 } @media (min-width: 641px) { .img-slider-product-card__slider-nav { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .img-slider-product-card__slider-nav { max-width: 72px; display: none } } .img-slider-product-card__slider-nav::-webkit-scrollbar { width: 0 } .img-slider-product-card__slider-nav .img-slider-product-card__slider-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0; width: 48px; height: 68px; min-height: 68px; cursor: pointer; overflow: hidden; border: 1px solid transparent; transition: all 0.3s ease } .img-slider-product-card__slider-nav .img-slider-product-card__slider-item.\--active { border-color: #2e1a47 } .img-slider-product-card__slider-nav .img-slider-product-card__slider-item:not(:last-of-type) { margin-bottom: 9px } .img-slider-product-card__slider-nav picture img { display: block; object-fit: contain; object-position: center; width: 100%; height: 100% } .img-slider-product-card__slider-nav .before-after__wrapper { padding: 0; pointer-events: none } .img-slider-product-card__slider-nav .before-after__wrapper span { display: none } .img-slider-product-card__information-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .img-slider-product-card__information-wrapper .\--coming-soon:hover { color: #171717; background: #ffffff } .img-slider-product-card__description { padding-top: 18px; padding-left: 8px; padding-right: 8px; margin-bottom: 10px } @media (min-width: 641px) { .img-slider-product-card__description { margin-bottom: 14px } } @media (min-width: 1025px) { .img-slider-product-card__description { padding-top: 2px; margin-bottom: 6px } } .img-slider-product-card__type { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .img-slider-product-card__type.\--tolowercase { text-transform: unset } .img-slider-product-card .img-slider-product-card__title.\--text-large { font-style: normal; font-weight: normal; font-size: 18px; line-height: 120%; text-transform: uppercase; margin-bottom: 16px } @media (min-width: 641px) { .img-slider-product-card .img-slider-product-card__title.\--text-large { font-style: normal; font-weight: normal; font-size: 24px; line-height: 110% } .img-slider-product-card .img-slider-product-card__title.\--text-large.\--bordered { margin-bottom: 16px; position: relative; padding-top: 8px } .img-slider-product-card .img-slider-product-card__title.\--text-large.\--bordered::before { content: " "; display: block; position: absolute; width: 100%; height: 1px; background: #d3d3d3; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } } @media (min-width: 641px) and (min-width: 1025px) { .img-slider-product-card .img-slider-product-card__title.\--text-large.\--bordered { padding-top: 32px } } .img-slider-product-card__category { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 36px } @media (min-width: 641px) { .img-slider-product-card__category { margin-bottom: 40px } } @media (min-width: 1025px) { .img-slider-product-card__category { margin-bottom: 58px } } .img-slider-product-card__category.\--tolowercase { text-transform: unset } .img-slider-product-card__rate-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; grid-column-gap: 8px; margin-bottom: 18px } @media (min-width: 1025px) { .img-slider-product-card__rate-wrapper { width: 100% } } .img-slider-product-card__ratio { padding: 8px } .img-slider-product-card__button-wrapper { width: 100%; position: fixed; left: 0; bottom: 64px; padding: 8px; z-index: 99 } @media (min-width: 641px) { .img-slider-product-card__button-wrapper { position: static; padding-top: 0; padding-bottom: 0 } } @media (min-width: 1025px) { .img-slider-product-card__button-wrapper { padding-left: 8px } } .img-slider-product-card__button { width: 100%; background: #ffffff } @media (min-width: 641px) { .img-slider-product-card__button { position: static; min-width: 160px; max-width: 160px; width: 160px; height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px } } @media (min-width: 1025px) { .img-slider-product-card__button { min-width: 200px; width: 200px; margin-bottom: 0 } } .img-slider-product-card__button.\--coming-soon { cursor: default !important; pointer-events: none } .img-slider-product-card__button.\--have-link { cursor: pointer; pointer-events: unset } .img-slider-product-card__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 8px } .img-slider-product-card__arrow { display: none; width: auto; height: 8px } @media (min-width: 1025px) { .img-slider-product-card__arrow { display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } } .img-slider-product-card__copy { position: relative; padding: 8px; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } @media (min-width: 641px) { .img-slider-product-card__copy { margin-bottom: 16px; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } } @media (min-width: 1025px) { .img-slider-product-card__copy { margin-bottom: 32px; font-style: normal; font-weight: 300; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } } .img-slider-product-card__copy.wys * { padding-left: 0; padding-right: 0; padding-top: 0; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin: 0 } .img-slider-product-card__copy.wys *:not(:last-child) { padding-bottom: 16px; margin-bottom: 0 } .img-slider-product-card__copy.wys *:last-child { padding-bottom: 0 } .img-slider-product-card__copy.wys ul li { padding-left: 10px; position: relative } .img-slider-product-card__copy.wys ul li::before { position: absolute; top: 0; left: 0 } .img-slider-product-card__footer-txt { font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; margin-bottom: 16px } .img-slider-product-card .before-after__wrapper { padding: 0; height: 459px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media (min-width: 641px) { .img-slider-product-card .before-after__wrapper { height: 400px } } @media (min-width: 1025px) { .img-slider-product-card .before-after__wrapper { height: 518px } } .img-slider-product-card .before-after__info-title { display: none } .img-slider-product-card .before-after__info-list { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .product-text-block { padding-top: 12px; padding-bottom: 24px; position: relative } @media (min-width: 641px) { .product-text-block { margin: 0 auto !important; max-width: 624px; width: 100%; padding-bottom: 12px } } @media (min-width: 1025px) { .product-text-block { padding-top: 0; padding-bottom: 94px } } .product-text-block__title { font-style: normal; font-weight: normal; font-size: 18px; line-height: 120%; text-transform: uppercase; margin: 0 0 16px } @media (min-width: 641px) { .product-text-block__title { font-weight: 300; font-size: 24px; line-height: 110% } } @media (min-width: 1025px) { .product-text-block__title { font-weight: 300; font-size: 24px; line-height: 110% } } .product-text-block__content {} .product-text-block__content * { padding-left: 0 !important; padding-right: 0 !important } .product-text-block__content li { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; position: relative } .product-text-block__content li::before { content: '\2022 '; display: inline } .product-text-block img { display: none; width: auto; height: 8px } @media (min-width: 1025px) { .product-text-block img { display: block; position: absolute; bottom: 52px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .accordion { padding-top: 24px; padding-bottom: 24px; overflow: hidden } @media (min-width: 641px) { .accordion { padding-top: 12px } } @media (min-width: 641px) { .accordion { padding-top: 45px } } .accordion__inner {} @media (min-width: 641px) { .accordion__inner { width: 100%; margin: 0 auto } } @media (min-width: 1025px) { .accordion__inner { padding-left: 8px; padding-right: 8px } } .accordion__tab { position: relative; outline: none } .accordion__tab span, .accordion__hidden-content span{ background-color: initial !important; color: #000000 !important; } .accordion__fixed-tab { position: relative; outline: none; display: -ms-grid; display: grid; grid-column-gap: 50px; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr } .accordion__tab:not(:last-child) { margin-bottom: 48px } .accordion__title { padding: 8px; width: 100%; text-transform: uppercase; position: relative; outline: none } .accordion__title::before { content: ''; display: block; width: 100%; height: 1px; background-color: #d3d3d3; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .accordion__static-title { padding: 8px; width: 100%; text-transform: uppercase; position: relative; outline: none } .accordion__button-hidden { background: transparent; text-align: left; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; padding: 0; outline: none; width: 100%; position: relative; border: none; text-transform: uppercase } .accordion__button { background: transparent; text-align: left; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; padding: 0; outline: none; width: 100%; position: relative; border: none; text-transform: uppercase; cursor: pointer } .accordion__button:hover, .accordion__button:active, .accordion__button:focus { outline: none } .accordion__button::before, .accordion__button::after { content: ""; display: block; background-color: #000000; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.3s ease } .accordion__button::before { width: 1px; height: 14px; right: 10.5px } .accordion__button::after { width: 14px; height: 1px; right: 4px } .accordion__button.\--active {} .accordion__button.\--active::before { -webkit-transform: rotate(-90deg) translateY(0) translateX(7px); -ms-transform: rotate(-90deg) translateY(0) translateX(7px); transform: rotate(-90deg) translateY(0) translateX(7px) } .accordion__button-open { background: transparent; text-align: left; padding: 0; outline: none; width: 100%; position: relative; border: none; text-transform: uppercase; cursor: pointer; font-family: "Sofia Pro"; line-height: 100%; font-weight: 300; font-size: 22.4px; font-size: 1.4rem } .accordion__button-open:focus { outline: none } .accordion__hidden-content { position: absolute; width: 100%; top: 0; z-index: -1; opacity: 0; margin-bottom: 103px } .accordion__hidden-content.\--active { opacity: 1; z-index: 1; position: relative } .accordion__hidden-content .before-after__wrapper {} @media (min-width: 1025px) { .accordion__hidden-content .before-after__wrapper { display: none } } .accordion__hidden-content h2 { padding: 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120% } .accordion__hidden-content p:not(.two-card-slider__card-category), .accordion__hidden-content p:not(.two-card-slider__card-title), .accordion__hidden-content p:not(.two-card-slider__card-subtitle), .accordion__hidden-content li { font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .accordion__hidden-content p.two-card-slider__card-category, .accordion__hidden-content p.two-card-slider__card-title, .accordion__hidden-content p.two-card-slider__card-subtitle { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .accordion__hidden-content p.two-card-slider__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .accordion__static-content { position: relative; width: 100%; top: 0; z-index: 1; margin-bottom: 0 } .accordion__grid-title { position: relative; width: 100%; top: 0; z-index: 1; margin-bottom: 0; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr !important; grid-template-columns: 1fr 1fr 1fr !important; grid-column-gap: 50px } .accordion__grid-title::before { content: ''; display: block; width: 100%; height: 1px; background-color: #d3d3d3; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } .accordion .wys {} .accordion .wys h3, .accordion .wys h2, .accordion .wys h4, .accordion .wys p { width: 100%; margin-bottom: 8px } .accordion .\--hidden-on-desktop {} @media (min-width: 1025px) { .accordion .\--hidden-on-desktop { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .before-after { width: 100%; height: 100% } .before-after img { object-position: unset; object-fit: unset; width: unset; height: 100% } .before-after__wrapper { width: 100%; height: auto; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; padding: 8px } .before-after__wrapper span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: 300; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; text-shadow: 0 4px 12px rgba(0, 0, 0, .25); color: #ffffff; z-index: 5; pointer-events: none } .before-after__before { left: 17px } .before-after__after { right: 17px } .before-after__info-title { padding: 8px; text-transform: uppercase; font-size: 38.4px; font-size: 2.4rem; line-height: 120%; font-family: "Sofia Pro"; margin: 0 } .before-after__info-list { padding: 8px } .before-after__info-list li { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; position: relative; padding-left: 15px } .before-after__info-list li::before { content: "\2022"; display: inline-block; position: absolute; left: 0 } .before-after .wys {} .before-after .wys h3, .before-after .wys h2, .before-after .wys h4, .before-after .wys p { width: 100% } /* overriding default styles of a juxtapose before-after widget */ .jx-knightlab { display: none !important; } .jx-control { background-color: transparent !important; } .jx-controller { height: 42px !important; width: 3px !important; position: absolute !important; left: 50% !important; top: 50% !important; margin-top: -22px !important; border-radius: 0 !important; z-index: 8 !important } .jx-controller::before { content: " "; display: block; width: 3px; background: white; height: 9999px; position: absolute; left: 50%; margin-left: -1.5px; z-index: 8; top: 50%; margin-top: 21px; } .jx-controller::after { content: " "; display: block; width: 3px; background: white; height: 9999px; position: absolute; left: 50%; margin-left: -1.5px; z-index: 8; bottom: 50%; margin-bottom: 21px; } .jx-arrow.jx-right { right: 50% !important; margin-right: -27px !important; width: 0 !important; height: 0 !important; position: absolute !important; top: 50% !important; margin-top: -7px !important; border-width: 6px 0 6px 6px !important; -webkit-transform: translateX(-9px) !important; -ms-transform: translateX(-9px) !important; transform: translateX(-9px) !important; } .jx-arrow.jx-left { left: 50% !important; margin-left: -28px !important; width: 0 !important; height: 0 !important; position: absolute !important; top: 50% !important; margin-top: -7px !important; border-width: 6px 6px 6px 0 !important; -webkit-transform: translateX(8px) !important; -ms-transform: translateX(8px) !important; transform: translateX(8px) !important; } .jx-handle { z-index: 8 !important; } /* juxtapose - v1.1.6 - 2015-09-09 * Copyright (c) 2015 Alex Duner and Northwestern University Knight Lab */ div.juxtapose { width: 100%; font-family: Helvetica, Arial, sans-serif; } div.jx-slider { width: 100%; height: 100%; position: relative; overflow: hidden; cursor: pointer; } div.jx-handle { position: absolute; height: 100%; width: 40px; cursor: col-resize; z-index: 15; margin-left: -20px; } .vertical div.jx-handle { height: 40px; width: 100%; cursor: row-resize; margin-top: -20px; margin-left: 0; } div.jx-control { height: 100%; margin-right: auto; margin-left: auto; width: 3px; background-color: white; } .vertical div.jx-control { height: 3px; width: 100%; background-color: white; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } div.jx-controller { position: absolute; margin: auto; top: 0; bottom: 0; height: 60px; width: 9px; margin-left: -3px; background-color: white; } .vertical div.jx-controller { height: 9px; width: 100px; margin-left: auto; margin-right: auto; top: -3px; position: relative; } div.jx-arrow { position: absolute; margin: auto; top: 0; bottom: 0; width: 0; height: 0; transition: all .2s ease; } .vertical div.jx-arrow { position: absolute; margin: 0 auto; left: 0; right: 0; width: 0; height: 0; transition: all .2s ease; } div.jx-arrow.jx-left { left: 2px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #FFF transparent transparent; } div.jx-arrow.jx-right { right: 2px; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #FFF; } .vertical div.jx-arrow.jx-left { left: 0px; top: 2px; border-style: solid; border-width: 0px 8px 8px 8px; border-color: transparent transparent #FFF transparent; } .vertical div.jx-arrow.jx-right { right: 0px; top: auto; top: initial; bottom: 2px; border-style: solid; border-width: 8px 8px 0 8px; border-color: #FFF transparent transparent transparent; } div.jx-handle:hover div.jx-arrow.jx-left, div.jx-handle:active div.jx-arrow.jx-left { left: -1px; } div.jx-handle:hover div.jx-arrow.jx-right, div.jx-handle:active div.jx-arrow.jx-right { right: -1px; } .vertical div.jx-handle:hover div.jx-arrow.jx-left, .vertical div.jx-handle:active div.jx-arrow.jx-left { left: 0px; top: 0px; } .vertical div.jx-handle:hover div.jx-arrow.jx-right, .vertical div.jx-handle:active div.jx-arrow.jx-right { right: 0px; bottom: 0px; } div.jx-image { position: absolute; height: 100%; display: inline-block; top: 0; overflow: hidden; -webkit-backface-visibility: hidden; } .vertical div.jx-image { width: 100%; left: 0; top: auto; top: initial; } div.jx-image img { height: 100%; z-index: 5; position: absolute; max-height: none; max-width: none; max-height: initial; max-width: initial; } .vertical div.jx-image img { height: auto; height: initial; width: 100%; } div.jx-image.jx-left { left: 0; background-position: left; } div.jx-image.jx-left img { left: 0; } div.jx-image.jx-right { right: 0; background-position: right; } div.jx-image.jx-right img { right: 0; bottom: 0; } .veritcal div.jx-image.jx-left { top: 0; background-position: top; } .veritcal div.jx-image.jx-left img { top: 0; } .vertical div.jx-image.jx-right { bottom: 0; background-position: bottom; } .veritcal div.jx-image.jx-right img { bottom: 0; } div.jx-image div.jx-label { font-size: 1em; padding: .25em .75em; position: relative; display: inline-block; top: 0; background-color: #000; /* IE 8 */ background-color: rgba(0, 0, 0, .7); color: white; z-index: 10; white-space: nowrap; line-height: 18px; vertical-align: middle; } div.jx-image.jx-left div.jx-label { float: left; left: 0; } div.jx-image.jx-right div.jx-label { float: right; right: 0; } .vertical div.jx-image div.jx-label { display: table; position: absolute; } .vertical div.jx-image.jx-right div.jx-label { left: 0; bottom: 0; top: auto; top: initial; } div.jx-credit { line-height: 1.1; font-size: 0.75em; } div.jx-credit em { font-weight: bold; font-style: normal; } /* Animation */ div.jx-image.transition { transition: width .5s ease; } div.jx-handle.transition { transition: left .5s ease; } .vertical div.jx-image.transition { transition: height .5s ease; } .vertical div.jx-handle.transition { transition: top .5s ease; } /* Knight Lab Credit */ a.jx-knightlab { background-color: #000; /* IE 8 */ background-color: rgba(0, 0, 0, .25); bottom: 0; display: table; height: 14px; line-height: 14px; padding: 1px 4px 1px 5px; position: absolute; right: 0; text-decoration: none; z-index: 10; } a.jx-knightlab div.knightlab-logo { display: inline-block; vertical-align: middle; height: 8px; width: 8px; background-color: #c34528; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); top: -1.25px; position: relative; cursor: pointer; } a.jx-knightlab:hover { background-color: #000; /* IE 8 */ background-color: rgba(0, 0, 0, .35); } a.jx-knightlab:hover div.knightlab-logo { background-color: #ce4d28; } a.jx-knightlab span.juxtapose-name { display: table-cell; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; font-weight: 300; color: white; font-size: 10px; padding-left: 0.375em; vertical-align: middle; line-height: normal; } /* keyboard accessibility */ div.jx-controller:focus, div.jx-image.jx-left div.jx-label:focus, div.jx-image.jx-right div.jx-label:focus, a.jx-knightlab:focus { background: #eae34a; color: #000; } a.jx-knightlab:focus span.juxtapose-name{ color: #000; border: none; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .where-to-buy { } .where-to-buy__grid.\--component { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 1025px) { .where-to-buy__grid.\--component { -ms-grid-columns: 1fr; grid-template-columns: 1fr } } .where-to-buy__grid-item { display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 25px; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .where-to-buy__grid-item--image { width: 136px; height: 100%; padding: 8px } @media (max-width: 640px) { .where-to-buy__grid-item--image { width: 100px } } .where-to-buy__grid-item--image img { width: auto; height: 50px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(100%); filter: grayscale(100%) } @media (max-width: 640px) { .where-to-buy__grid-item--image img { height: 100% } } @media (max-width: 640px) { .where-to-buy__grid-item { gap: 5px !important } } @media (min-width: 641px) { .where-to-buy__grid-item { gap: 15px !important } } @media (min-width: 1025px) { .where-to-buy__grid-item { gap: 10px !important } } .where-to-buy__grid-item .\--heading { color: #777777 } .where-to-buy__grid-item p, .where-to-buy__grid-item a { padding: 8px; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } .where-to-buy__grid-item .\--small-bottle, .where-to-buy__grid-item .\--big-bottle { font-family: "Minion Pro", serif !important; padding-left: 5px; padding-right: 5px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; border: 1px solid #000000; transition: all 0.3s ease; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; width: 23% } .where-to-buy__grid-item .\--small-bottle:hover, .where-to-buy__grid-item .\--big-bottle:hover { color: #ffffff; background: #171717 } .where-to-buy__grid-item .\--small-bottle.\--clear, .where-to-buy__grid-item .\--big-bottle.\--clear { background: transparent !important; border: none !important } .where-to-buy__grid-item .\--unavailable { padding-left: 0; padding-right: 0 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .two-card-slider { width: 100%; &__card-category, p&__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px; } &__card-title, p&__card-title { text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px; } &__card-subtitle, p&__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px; } } .two-card-slider__slider { outline: none; position: relative; width: 100%; } @media (min-width: 1025px) { .two-card-slider {} .two-card-slider:hover {} .two-card-slider:hover .flickity-button.flickity-prev-next-button { opacity: 1; } } .two-card-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; width: calc(50% - 12px); -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease; } @media (min-width: 641px) { .two-card-slider__card { width: 264px; } } .two-card-slider__card:not(:last-of-type) { margin-right: 24px; } @media (min-width: 641px) { .two-card-slider__card:not(:last-of-type) { margin-right: 48px; } } .two-card-slider__card-img-wrap { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative; } @media (min-width: 641px) { .two-card-slider__card-img-wrap { height: 212px; } } @media (min-width: 1025px) { .two-card-slider__card-img-wrap { height: 365px; } .two-card-slider__card-img-wrap .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease; } .two-card-slider__card-img-wrap .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; } } .two-card-slider__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .two-card-slider__card:hover {} .two-card-slider__card:hover .\--first {} @media (min-width: 1025px) { .two-card-slider__card:hover .\--first { opacity: 0; } } .two-card-slider__card:hover .\--second {} @media (min-width: 1025px) { .two-card-slider__card:hover .\--second { opacity: 1; } } .two-card-slider .bv-main-wrap { margin-bottom: 8px; } .two-card-slider__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; } .two-card-slider__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px; } .two-card-slider__star { width: 16px; height: 16px; background-image: url('/img/star.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; } .two-card-slider__star.\--black-star { background-image: url(/img/black-star.svg); } .two-card-slider__star.\--half-star { background-image: url(/img/half-star.svg); } .two-card-slider .flickity-button.flickity-prev-next-button { position: absolute; top: 88px; width: 24px; height: 24px; border: none; padding: 0; background: transparent; } @media (min-width: 641px) { .two-card-slider .flickity-button.flickity-prev-next-button { top: 150px; width: 44px; height: 64px; cursor: pointer; transition: opacity 0.3s ease; } } @media (min-width: 1025px) { .two-card-slider .flickity-button.flickity-prev-next-button { opacity: 0; } } .two-card-slider .flickity-button.flickity-prev-next-button svg { display: none; } .two-card-slider .flickity-button.flickity-prev-next-button::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("/img/sliderarrow.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; } @media (min-width: 641px) { .two-card-slider .flickity-button.flickity-prev-next-button::after { background-image: url("/img/arrow-for-button.svg"); width: 72px; height: 144px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -8px; left: unset; } } .two-card-slider .flickity-button.flickity-prev-next-button.previous { left: 0; } .two-card-slider .flickity-button.flickity-prev-next-button.previous::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } @media (min-width: 641px) { .two-card-slider .flickity-button.flickity-prev-next-button.previous::after { left: -8px; right: unset; -webkit-transform: rotate(-180deg) translateY(50%); -ms-transform: rotate(-180deg) translateY(50%); transform: rotate(-180deg) translateY(50%); } } .two-card-slider .flickity-button.flickity-prev-next-button.next { right: 0; } .two-card-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .two-card-product-slider { width: 100% } .two-card-product-slider.container {} .two-card-product-slider.container.\--small { padding-right: 0; padding-left: 0; max-width: 100% } .two-card-product-slider__slider { outline: none; position: relative; width: 100% } @media (min-width: 1025px) { .two-card-product-slider {} .two-card-product-slider:hover {} .two-card-product-slider:hover .flickity-button.flickity-prev-next-button { opacity: 1 } } .two-card-product-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 304px; padding-right: 24px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; text-transform: uppercase; text-align: left; transition: all 0.3s ease } .two-card-product-slider__card-category-wrap { width: 100% } @media (min-width: 641px) { .two-card-product-slider__card { width: 212px; padding-right: 12px } } @media (max-width: 640px) { .two-card-product-slider__card { width: 90%; padding-right: 0 } } .two-card-product-slider__card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .two-card-product-slider__card:not(:last-of-type) { margin-right: 48px } } .two-card-product-slider__card-img-wrap { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .two-card-product-slider__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .two-card-product-slider__card-img-wrap { height: 365px } .two-card-product-slider__card-img-wrap .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .two-card-product-slider__card-img-wrap .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } } .two-card-product-slider__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .two-card-product-slider__card:hover {} .two-card-product-slider__card:hover .\--first {} @media (min-width: 1025px) { .two-card-product-slider__card:hover .\--first { opacity: 0 } } .two-card-product-slider__card:hover .\--second {} @media (min-width: 1025px) { .two-card-product-slider__card:hover .\--second { opacity: 1 } } .two-card-product-slider__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .two-card-product-slider__card-title { text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .two-card-product-slider__card-subtitle { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .two-card-product-slider .bv-main-wrap { margin-bottom: 8px } .two-card-product-slider__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .two-card-product-slider__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .two-card-product-slider__star { width: 16px; height: 16px; background-image: url('/img/star.svg'); background-size: contain; background-position: center; background-repeat: no-repeat } .two-card-product-slider__star.\--black-star { background-image: url(/img/black-star.svg) } .two-card-product-slider__star.\--half-star { background-image: url(/img/half-star.svg) } .two-card-product-slider .flickity-button.flickity-prev-next-button { position: absolute; top: 88px; width: 24px; height: 24px; border: none; padding: 0; background: transparent } @media (min-width: 641px) { .two-card-product-slider .flickity-button.flickity-prev-next-button { top: 150px; width: 44px; height: 64px; cursor: pointer; transition: opacity 0.3s ease } } @media (min-width: 1025px) { .two-card-product-slider .flickity-button.flickity-prev-next-button { opacity: 0 } } .two-card-product-slider .flickity-button.flickity-prev-next-button svg { display: none } .two-card-product-slider .flickity-button.flickity-prev-next-button::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url("/img/sliderarrow.svg"); background-position: center; background-size: contain; background-repeat: no-repeat } @media (min-width: 641px) { .two-card-product-slider .flickity-button.flickity-prev-next-button::after { width: 24px; height: 24px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -8px; left: unset } } .two-card-product-slider .flickity-button.flickity-prev-next-button.previous { left: 10px; -webkit-transform: translateX(0) rotate(0) !important; -ms-transform: translateX(0) rotate(0) !important; transform: translateX(0) rotate(0) !important } .two-card-product-slider .flickity-button.flickity-prev-next-button.previous::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } @media (min-width: 641px) { .two-card-product-slider .flickity-button.flickity-prev-next-button.previous::after { left: -8px; right: unset; -webkit-transform: rotate(-180deg) translateY(50%); -ms-transform: rotate(-180deg) translateY(50%); transform: rotate(-180deg) translateY(50%) } } .two-card-product-slider .flickity-button.flickity-prev-next-button.next { right: 10px; -webkit-transform: translateX(0) rotate(0) !important; -ms-transform: translateX(0) rotate(0) !important; transform: translateX(0) rotate(0) !important } .two-card-product-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .input-modal-search { background-color: #2c2b6c; padding: 24px 0 0; color: #ffffff; width: 100%; overflow-x: hidden; .mob-nav { background-color: #ffffff; } } @media (min-width: 641px) { .input-modal-search { padding: 40px 0 0; } } .input-modal-search__title { text-transform: uppercase; text-align: center; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; padding-left: 16px; padding-right: 16px; margin-bottom: 40px; } @media (min-width: 641px) { .input-modal-search__title { text-align: left; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 2.4rem; line-height: 110%; padding-left: 80px; padding-right: 80px; margin-bottom: 24px; } } @media (min-width: 1025px) { .input-modal-search__title { padding-left: 40px; padding-right: 40px; } } .input-modal-search__input-wrap { position: relative; } .input-modal-search__input-wrap::after { content: ''; display: block; position: absolute; width: 16px; height: 16px; top: 0; right: 8px; background-image: url(/img/search-white.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } @media (min-width: 641px) { .input-modal-search__input-wrap { max-width: 352px; } } @media (min-width: 1025px) { .input-modal-search__input-wrap { max-width: 402px; } } .input-modal-search__input { background-color: #2c2b6c; color: #ffffff; padding-left: 16px; padding-right: 32px; line-height: 32px; font-size: 25.6px; font-size: 1.6rem; letter-spacing: 0.02em; border-bottom: 1px solid #ffffff; cursor: pointer; } .input-modal-search__input::-webkit-input-placeholder { color: #ffffff; opacity: 1; } .input-modal-search__input:-ms-input-placeholder { color: #ffffff; opacity: 1; } .input-modal-search__input::placeholder { color: #ffffff; opacity: 1; } .input-modal-search__modal-search { display: none; position: fixed; top: 0; right: 0; bottom: 56px; left: 0; padding: 0 16px 40px; background-color: #ffffff; z-index: 9; } @media (min-width: 641px) { .input-modal-search__modal-search { top: 0; padding-left: 40px; bottom: 0; } } @media (min-width: 1025px) { .input-modal-search__modal-search { top: 80px; } } .input-modal-search__close-modal { position: absolute; top: 106px; right: 20px; width: 40px; height: 40px; cursor: pointer; } @media (min-width: 641px) { .input-modal-search__close-modal { top: 120px; right: 8px; } } @media (min-width: 1025px) { .input-modal-search__close-modal { top: 40px; right: 32px; } } .input-modal-search__modal-input-wrap { position: relative; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.32px; letter-spacing: 0.02rem; opacity: 0; transition: all 0.6s ease; margin-top: 106px; } @media (min-width: 641px) { .input-modal-search__modal-input-wrap { width: 565px; font-size: 1.6rem; line-height: 2.4rem; margin-top: 96px; } } @media (min-width: 1025px) { .input-modal-search__modal-input-wrap { width: 576px; } } .input-modal-search__modal-input-wrap input { background-color: #ffffff; color: #171717; border-bottom: 1px solid #171717; line-height: 38.4px; line-height: 2.4rem; } .input-modal-search__modal-input-wrap input::-webkit-input-placeholder { color: #171717; opacity: 0.5; } .input-modal-search__modal-input-wrap input:-ms-input-placeholder { color: #171717; opacity: 0.5; } .input-modal-search__modal-input-wrap input::placeholder { color: #171717; opacity: 0.5; } .input-modal-search__modal-input-wrap.\--active { opacity: 1; } .input-modal-search__modal-input-search-btn, .input-modal-search__modal-input-clear-btn { display: block; position: absolute; width: 16px; height: 16px; top: 0; right: 16px; cursor: pointer; } .input-modal-search__modal-input-clear-btn { display: none; width: 20px; height: 20px; } .input-modal-search #storemapper { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .input-modal-search #storemapper-left { position: relative; padding-left: 16px; padding-right: 36px; width: calc(100% + 20px); height: auto; max-height: 500px; overflow-y: scroll; color: #ffffff; } @media (min-width: 641px) { .input-modal-search #storemapper-left { padding-left: 80px; padding-right: 100px; height: auto !important; } } @media (min-width: 1025px) { .input-modal-search #storemapper-left { padding-left: 40px; padding-right: 60px; height: auto !important; } } .input-modal-search #storemapper-right { width: 100%; height: calc(100vh - 56px); } @media (min-width: 641px) { .input-modal-search #storemapper-right { height: 768px; } } @media (min-width: 1025px) { .input-modal-search #storemapper-right { height: 864px; } } .input-modal-search .storemapper-categories { display: none; } .input-modal-search .storemapper-categories + label { display: none; } .input-modal-search input#storemapper-zip { background-color: #2c2b6c; color: #ffffff; font-family: "Sofia Pro"; font-weight: 300; padding-left: 0; padding-right: 32px; line-height: 150%; font-size: 25.6px; font-size: 1.6rem; letter-spacing: 0.02em; border: 1px solid transparent !important; border-bottom-color: #ffffff !important; margin-bottom: 31px; } .input-modal-search input#storemapper-zip::-webkit-input-placeholder { color: #ffffff; opacity: 1; } .input-modal-search input#storemapper-zip:-ms-input-placeholder { color: #ffffff; opacity: 1; } .input-modal-search input#storemapper-zip::placeholder { color: #ffffff; opacity: 1; } @media (min-width: 641px) { .input-modal-search input#storemapper-zip { margin-bottom: 47px; max-width: 352px; } } @media (min-width: 1025px) { .input-modal-search input#storemapper-zip { max-width: 402px; } } .input-modal-search button#storemapper-go { cursor: pointer; width: 24px; height: 24px; position: absolute; top: 0; right: 36px; background-color: transparent; background-image: url(/img/search-white.svg); background-size: contain; background-repeat: no-repeat; background-position: center; border: none; color: transparent; } @media (min-width: 641px) { .input-modal-search button#storemapper-go { left: 400px; } } @media (min-width: 1025px) { .input-modal-search button#storemapper-go { left: 420px; } } .input-modal-search button#storemapper-go:focus { outline: none; } .input-modal-search .storemapper-reset { display: none !important; } .input-modal-search ul#storemapper-list {} @media (min-width: 1025px) { .input-modal-search ul#storemapper-list { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 24px; margin-bottom: 24px; } } .input-modal-search ul#storemapper-list li { padding-bottom: 24px; border-bottom: 1px solid #777777; margin-bottom: 24px; } @media (min-width: 1025px) { .input-modal-search ul#storemapper-list li { margin-bottom: 0; } } .input-modal-search ul#storemapper-list li * { color: #ffffff; } .input-modal-search div#storemapper .storemapper-iw-container p, .input-modal-search div#storemapper .storemapper-iw-container h4, .input-modal-search div#storemapper .storemapper-iw-container a, .input-modal-search div#storemapper .storemapper-iw-container ul, .input-modal-search div#storemapper .storemapper-iw-container li, .input-modal-search div#storemapper .storemapper-iw-container span { color: #171717; } div#storemapper .storemapper-logo img{ display: none; } div#storemapper #storemapper-autocomplete{ color: #171717; top: 30px; } div#storemapper #storemapper-left{ overflow: unset !important; } .title-txt-form__select-after .select::after{ display: none; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-link-img { background-color: #eeefef; position: relative } @media (min-width: 641px) { .title-link-img { display: -webkit-flex; display: -ms-flexbox; display: flex } } .title-link-img::after { display: block; content: ''; position: absolute; top: 90px; right: 0; bottom: 50%; width: 100%; background: linear-gradient(180deg, #eeefef 63.68%, rgba(238, 239, 239, 0) 96.68%) } @media (min-width: 641px) { .title-link-img::after { top: 0; bottom: 0; right: 44px; width: 176px; background: linear-gradient(90deg, #eeefef 63.68%, rgba(238, 239, 239, 0) 96.68%) } } @media (min-width: 1025px) { .title-link-img::after { width: 50%; right: 25% } } .title-link-img__title-link-wrap {} @media (min-width: 641px) { .title-link-img__title-link-wrap { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } } .title-link-img__title-link-wrap h2 { padding: 48px 16px 26px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; color: #000000; cursor: pointer; position: relative; z-index: 1 } @media (min-width: 641px) { .title-link-img__title-link-wrap h2 { padding: 68px 0 68px 80px; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; font-size: 2.4rem; line-height: 120%; text-align: left } .title-link-img__title-link-wrap h2 span:first-of-type { max-width: 400px } } @media (min-width: 1025px) { .title-link-img__title-link-wrap h2 { padding: 68px 0 68px 40px } } .title-link-img__title-link-wrap h2 .arrow-to-right { display: inline-block; width: 95px; height: 16px; background-image: url(/img/arrow-long.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .title-link-img__img-wrap {} @media (min-width: 641px) { .title-link-img__img-wrap { height: 200px } } .title-link-img__img-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } @media (min-width: 641px) { .title-link-img__img-wrap { width: 192px } } @media (min-width: 1025px) { .title-link-img__img-wrap { width: 50% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .sticky-scroll-slider { display: none } @media (min-width: 1025px) { .sticky-scroll-slider { display: block } .sticky-scroll-slider__inner { position: relative; height: 100%; top: 0 } .sticky-scroll-slider__sticky-content { display: block; width: 100%; position: -webkit-sticky; position: sticky; top: 0; min-height: 545px } .sticky-scroll-slider__bounded-item { position: absolute; width: 100%; opacity: 0; z-index: -1; transition: opacity 0.3s ease } .sticky-scroll-slider__bounded-item.\--active { opacity: 1; z-index: 1; transition: opacity 0.3s 0.3s ease } .sticky-scroll-slider__bounded-item picture { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 0 24px; height: 542px; width: 100%; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .sticky-scroll-slider__bounded-itemimg { object-fit: contain; object-position: center; width: auto; height: 100% } .sticky-scroll-slider .img-slider-product-card__inner { -ms-grid-columns: 1fr; grid-template-columns: 1fr } .sticky-scroll-slider .img-slider-product-card__inner .flickity-page-dots { left: 0; height: 12px; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg) } .sticky-scroll-slider .img-slider-product-card__information-wrapper { display: none } .sticky-scroll-slider .img-slider-product-card__slider { display: block } .sticky-scroll-slider .img-slider-product-card__slider picture { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 0 24px; height: 542px; width: 100% } .sticky-scroll-slider__slider .before-after { height: 542px; width: 100% } .sticky-scroll-slider .img-slider-product-card__slider-nav-inner { width: 92px; overflow-x: hidden } .sticky-scroll-slider .img-slider-product-card__slider-nav { outline: none; display: none; position: absolute; height: 518px; width: 72px; overflow-y: scroll; top: 0; left: 0 } .sticky-scroll-slider .img-slider-product-card__slider-nav .img-slider-product-card__slider-item { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; width: 72px; height: 101px; min-height: 101px; overflow: hidden } .sticky-scroll-slider .img-slider-product-card__slider-nav .img-slider-product-card__slider-item .before-after__wrapper { width: 100%; height: 100% } .sticky-scroll-slider .img-slider-product-card__slider-nav .img-slider-product-card__slider-item:not(:last-child) { margin-bottom: 8px } } .sticky-scroll-slider__img-magnifier { display: none; position: fixed; top: -1000px; left: 0; width: 100px; height: 100px; background: rgba(255, 255, 255, .5); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); z-index: 99; pointer-events: none } .sticky-scroll-slider__zoom { display: none; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -1000px; width: 400px; height: 400px; background-color: white; background-position: 0 0; background-repeat: no-repeat; background-size: 300%; border-radius: 3px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5); z-index: 99 } @media (min-width: 1025px) and (min-width: 1025px) { .sticky-scroll-slider .img-slider-product-card__slider-nav { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt { padding: 48px 16px 0; margin-bottom: 40px } @media (min-width: 641px) { .title-txt { padding: 88px 80px 0 } } @media (min-width: 1025px) { .title-txt { padding: 88px 248px 0 144px; margin-bottom: 106px } } .title-txt__title { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; text-align: center; text-transform: none } @media (min-width: 641px) { .title-txt__title { text-align: left } } .title-txt__txt {} @media (min-width: 641px) { .title-txt__txt { margin-left: 64px } } @media (min-width: 1025px) { .title-txt__txt { margin-left: 104px } } .title-txt.wys {} .title-txt.wys .no-content { margin-bottom: 0 } .title-txt.wys h1 { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; margin-bottom: 40px; padding: 0 } @media (min-width: 641px) { .title-txt.wys h1 { font-size: 7.2rem; line-height: 110%; margin-right: 47px } } @media (min-width: 1025px) { .title-txt.wys h1 { margin-bottom: 93px } } .title-txt.wys h2, .title-txt.wys h3, .title-txt.wys h4, .title-txt.wys h5, .title-txt.wys h6 { display: block; padding: 0; margin-bottom: 16px; font-weight: 300; text-transform: uppercase } .title-txt.wys h3 { font-size: 28.8px; font-size: 1.8rem; line-height: 120% } @media (min-width: 641px) { .title-txt.wys h3 { font-size: 2.4rem; line-height: 110% } } @media (min-width: 1025px) { .title-txt.wys h3 { font-size: 2.4rem; line-height: 110% } } .title-txt.wys p, .title-txt.wys h6 { padding: 0; margin-bottom: 16px } @media (min-width: 641px) { .title-txt.wys p, .title-txt.wys h6 { font-size: 1.6rem; line-height: 2.4rem } } @media (min-width: 1025px) { .title-txt.wys p, .title-txt.wys h6 { font-size: 1.6rem; line-height: 2.4rem } } .title-txt.wys a { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding: 0; text-decoration: underline } @media (min-width: 641px) { .title-txt.wys a { font-size: 1.6rem; line-height: 2.4rem } } .title-txt.wys ol { padding: 0; list-style: none; counter-reset: counter } .title-txt.wys ol li { margin-bottom: 16px; counter-increment: counter } .title-txt.wys ol li::before { content: counter(counter) ". "; display: inline } .title-txt.wys ol.upper-latin { list-style-type: upper-latin; list-style-position: inside } .title-txt.wys ol.upper-latin li::before { display: none } .title-txt.wys ol.lower-roman { list-style-type: lower-roman; list-style-position: inside } .title-txt.wys ol.lower-roman li::before { display: none } .title-txt.wys ol.lower-alpha { list-style-type: lower-alpha; list-style-position: inside } .title-txt.wys ol.lower-alpha li::before { display: none } .title-txt.wys ul { padding: 0 } .title-txt.wys ul li { margin-bottom: 16px } .title-txt.wys figure { padding: 0 } .video-wistia { width: 100%; max-width: 454px; padding: 0 16px } @media (min-width: 641px) { .video-wistia { margin: 0 auto 0 80px; padding: 0 } } @media (min-width: 1025px) { .video-wistia { margin: 0 auto 0 144px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-copy { } .title-txt-copy__inner { width: 100%; text-align: left; padding: 68px 8px 40px 8px } @media (min-width: 641px) { .title-txt-copy__inner { text-align: center; padding: 184px 0 119px } } @media (min-width: 1025px) { .title-txt-copy__inner { padding: 176px 0 92px 0 } } .title-txt-copy__inner h2 { font-size: 32px; font-weight: normal; line-height: 100%; text-transform: uppercase; max-width: 576px; margin: 0 auto 24px auto; text-align: center } @media (min-width: 641px) { .title-txt-copy__inner h2 { font-size: 36px; font-weight: 300; line-height: 110%; margin-bottom: 40px } } .title-txt-copy__inner p { font-size: 16px; line-height: 24px; font-weight: 300; letter-spacing: 0.02em; max-width: 576px; margin: 0 auto; text-align: center } .title-txt-copy__inner a { margin: 56px auto 0 auto; text-align: center; display: block; max-width: 160px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-img-quote-txt { padding: 32px 8px 80px } .title-img-quote-txt:not(:nth-child(2)) { padding-top: 0 } @media (min-width: 641px) { .title-img-quote-txt { padding: 64px 16px 80px } } @media (min-width: 1025px) { .title-img-quote-txt { padding: 96px 144px 80px } } .title-img-quote-txt__header { text-transform: uppercase; margin-bottom: 0 } @media (min-width: 641px) { .title-img-quote-txt__header { margin-bottom: 0 } } @media (min-width: 1025px) { .title-img-quote-txt__header { margin-bottom: 0 } } .title-img-quote-txt__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; margin-bottom: 16px } @media (min-width: 641px) { .title-img-quote-txt__title { font-size: 3.6rem; line-height: 110% } } .title-img-quote-txt__sub-title { font-size: 28.8px; font-size: 1.8rem; line-height: 120% } @media (min-width: 641px) { .title-img-quote-txt__sub-title { font-size: 2.4rem; line-height: 120% } } .title-img-quote-txt .\--mobile-grid { display: block } @media (min-width: 641px) { .title-img-quote-txt .\--mobile-grid { display: inline } } .title-img-quote-txt .\--tablet-grid {} @media (min-width: 641px) { .title-img-quote-txt .\--tablet-grid { display: block } } @media (min-width: 1025px) { .title-img-quote-txt .\--tablet-grid { display: inline } } .title-img-quote-txt .\--desktop-grid {} @media (min-width: 1025px) { .title-img-quote-txt .\--desktop-grid { display: block } } .title-img-quote-txt__inner { width: 100%; margin-left: auto; margin-right: auto } @media (min-width: 641px) { .title-img-quote-txt__inner { display: -webkit-flex; display: -ms-flexbox; display: flex } } @media (min-width: 1025px) { .title-img-quote-txt__inner { max-width: 888px } } .title-img-quote-txt__img-wrap { width: 100% } @media (min-width: 641px) { .title-img-quote-txt__img-wrap { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: calc(50% - 16px); margin-right: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } @media (min-width: 1025px) { .title-img-quote-txt__img-wrap { width: 368px; margin-right: 48px } } .title-img-quote-txt__img-wrap img { display: block; width: 100%; object-position: center; object-fit: cover } .title-img-quote-txt__img { margin-bottom: 48px; height: 459px } @media (min-width: 641px) { .title-img-quote-txt__img { margin-bottom: 35px; height: 494px } } @media (min-width: 1025px) { .title-img-quote-txt__img { height: 518px } } .title-img-quote-txt__icons-wrap { display: none; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .title-img-quote-txt__icons-wrap span { text-transform: uppercase; font-size: 14px } @media (min-width: 641px) { .title-img-quote-txt__icons-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex } } .title-img-quote-txt__icons { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: auto } .title-img-quote-txt__icons img { object-fit: contain; width: 21px; height: 21px; display: block } .title-img-quote-txt__icons-wrap.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .title-img-quote-txt__icons-wrap.\--mobile img { object-fit: contain; width: 24px; height: 24px } @media (min-width: 641px) { .title-img-quote-txt__icons-wrap.\--mobile { display: none } } .title-img-quote-txt__icon:not(:last-of-type) { margin-right: 35px } .title-img-quote-txt__icon:first-of-type { margin-left: auto } @media (max-width: 640px) { .title-img-quote-txt__icon:first-of-type { margin-left: auto } } .title-img-quote-txt__txt-wrap { width: 100% } @media (min-width: 641px) { .title-img-quote-txt__txt-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; max-width: calc(50% - 16px) } } @media (min-width: 1025px) { .title-img-quote-txt__txt-wrap { padding-bottom: 94px; width: 100%; max-width: 472px } } .title-img-quote-txt__quote { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; margin-bottom: 32px } @media (min-width: 641px) { .title-img-quote-txt__quote { font-weight: 300; font-size: 40px; line-height: 110%; text-align: right } } .title-img-quote-txt__hr { display: none; width: 100%; height: 1px; background-color: #777777; margin-bottom: 32px } @media (min-width: 641px) { .title-img-quote-txt__hr { display: block } } .title-img-quote-txt__txt-title { font-size: 28.8px; font-size: 1.8rem; line-height: 110%; font-weight: 500; text-transform: uppercase; margin-bottom: 16px } @media (min-width: 641px) { .title-img-quote-txt__txt-title { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .title-img-quote-txt__txt-description { font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .title-img-quote-txt__txt-description { margin-bottom: 24px } } .title-img-quote-txt__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; margin-bottom: 24px } @media (min-width: 641px) { .title-img-quote-txt__txt { margin-bottom: 24px } } .title-img-quote-txt__link { height: 43px; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; margin-bottom: 35px; text-transform: capitalize } @media (min-width: 641px) { .title-img-quote-txt { margin-bottom: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-card-grid { padding: 0 8px 56px } @media (min-width: 641px) { .img-card-grid { padding: 0 16px 64px } } @media (min-width: 1025px) { .img-card-grid { padding: 0 32px 124px } } .img-card-grid__inner-wrapper { display: none } .img-card-grid__inner-wrapper:first-child { display: block } .img-card-grid__inner { display: -ms-grid; display: grid; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 56px } @media (min-width: 641px) { .img-card-grid__inner { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .img-card-grid__inner { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 48px; grid-row-gap: 70px } } .img-card-grid__card { position: relative } .img-card-grid__card-img { height: 200px; margin-bottom: 32px } @media (min-width: 641px) { .img-card-grid__card-img { height: 306px } } @media (min-width: 1025px) { .img-card-grid__card-img { height: 365px; margin-bottom: 0 } } .img-card-grid__card-title { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-align: center; text-transform: uppercase } .img-card-grid__card-title p { font-weight: 500 } @media (min-width: 1025px) { .img-card-grid__card-title p { font-weight: 300 } } @media (min-width: 1025px) { .img-card-grid__card-title p { font-size: 3.6rem; line-height: 110% } } @media (min-width: 1025px) { .img-card-grid__card-title { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 3.6rem; line-height: 110%; background: linear-gradient(0deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)); opacity: 0; transition: all 0.3s ease } } .img-card-grid__card:hover .img-card-grid__card-title {} @media (min-width: 1025px) { .img-card-grid__card:hover .img-card-grid__card-title { opacity: 1 } } .img-card-grid__button { margin: 104px auto 0; display: block } .img-card-grid-tab-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-left: 8px; padding-right: 8px } @media (min-width: 641px) { .img-card-grid-tab-wrapper { padding-left: 16px; padding-right: 16px } } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative } @media (min-width: 641px) { .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper { display: none } } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper p { margin-bottom: 24px } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 8px; padding-right: 32px; position: absolute; top: -4px; left: 66px; min-width: 134px; z-index: 1 } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns::after { content: ""; background: #ffffff; box-shadow: 0 4px 4px rgba(0, 0, 0, .1); border-radius: 5px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 0.3s ease } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns::before { content: ""; width: 16px; height: 8px; background-image: url("/img/arrow-vector-for-carry.svg"); background-repeat: no-repeat; background-size: contain; position: absolute; right: 8px; top: 14px; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns.\--active {} .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns.\--active::after { opacity: 1 } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btns.\--active::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btn { margin: 0; opacity: 1; transition: all 0.3s ease opacity 0 ease; padding: 0; margin-bottom: 8px; text-align: left } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btn::after { display: none } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btn.\--active { text-decoration: underline; -webkit-order: -999; -ms-flex-order: -999; order: -999; position: relative; bottom: -4px } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btn.\--active::after { display: none } .img-card-grid-tab-wrapper .title-txt-grid-cards__dropdown-wrapper .title-txt-grid-cards__btn:not(.\--active) { display: none } .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop { display: none } @media (min-width: 641px) { .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 0; position: relative; margin-bottom: 42px } .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop::after { content: ""; position: absolute; bottom: 0; left: 32px; height: 1px; width: calc(100% - 64px); background: #a8a8a8; z-index: -1 } } @media (min-width: 1025px) { .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop { padding-left: 16px; padding-right: 16px } } .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop .title-txt-grid-cards__btn {} @media (min-width: 641px) { .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop .title-txt-grid-cards__btn { min-width: 112px } } @media (min-width: 1025px) { .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop .title-txt-grid-cards__btn { min-width: 176px } } .img-card-grid-tab-wrapper .title-txt-grid-cards__btns.\--desktop .title-txt-grid-cards__btn::after { height: 1px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-bg-txt { padding-bottom: 7px } @media (min-width: 641px) { .title-bg-txt { padding-bottom: 26px } } .title-bg-txt__title-bg { position: relative; margin-bottom: 48px } @media (min-width: 1025px) { .title-bg-txt__title-bg { margin-bottom: 80px } } .title-bg-txt__bg { height: 128px } @media (min-width: 641px) { .title-bg-txt__bg { height: 272px } } @media (min-width: 1025px) { .title-bg-txt__bg { height: 454px } } .title-bg-txt__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } .title-bg-txt__title { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-left: 16px; padding-right: 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: radial-gradient(100% 483.7% at 0% 100%, #2e1a47 0%, rgba(46, 26, 71, 0) 100%); color: #ffffff } @media (min-width: 1025px) { .title-bg-txt__title { padding: 88px 144px; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } } .title-bg-txt__title p { font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-style: normal; font-weight: 300; font-family: "Chiswick Sans" } @media (min-width: 641px) { .title-bg-txt__title p { font-size: 7.2rem; line-height: 110% } } .title-bg-txt__txt, .title-bg-txt__blockquote { padding-left: 16px; padding-right: 16px; color: #000000 } @media (min-width: 641px) { .title-bg-txt__txt, .title-bg-txt__blockquote { padding-left: 80px; padding-right: 80px } } @media (min-width: 1025px) { .title-bg-txt__txt, .title-bg-txt__blockquote { padding-left: 0; padding-right: 0; max-width: 784px; margin-right: auto; margin-left: auto } } .title-bg-txt__txt { padding-left: 16px; padding-right: 16px } @media (min-width: 641px) { .title-bg-txt__txt { padding-left: 80px; padding-right: 80px } } @media (min-width: 1025px) { .title-bg-txt__txt { padding-left: 0; padding-right: 0; max-width: 784px; margin-right: auto; margin-left: auto } } .title-bg-txt__txt.wys h3 { padding-bottom: 16px } .title-bg-txt__txt.wys p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; display: block; padding-top: 0; margin-bottom: 0 } .title-bg-txt__txt.wys blockquote { font-weight: normal; padding: 46px 8px 16px; font-family: "Chiswick Sans"; font-style: normal } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-txt-video-slider { padding: 28px 8px 8px } @media (min-width: 641px) { .img-txt-video-slider { padding: 54px 16px 38px } } @media (min-width: 1025px) { .img-txt-video-slider { padding: 63px 0 82px 144px } } .img-txt-video-slider__inner { -ms-overflow-style: none } .img-txt-video-slider__inner::-webkit-scrollbar { display: none } @media (min-width: 641px) { .img-txt-video-slider__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; max-height: 100vh; overflow-y: auto; overflow-x: hidden } } @media (min-width: 1025px) { .img-txt-video-slider__inner { padding-right: 40px } } .img-txt-video-slider__img-wrap { width: 100% } @media (min-width: 641px) { .img-txt-video-slider__img-wrap { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding-top: 16px; width: 288px; margin-right: 32px; position: -webkit-sticky; position: sticky; top: 0; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start } } @media (min-width: 1025px) { .img-txt-video-slider__img-wrap { width: 368px; margin-right: 152px } } .img-txt-video-slider__img { width: 100%; margin-bottom: 33px; height: 459px } @media (min-width: 641px) { .img-txt-video-slider__img { height: 400px; margin-bottom: 34px } } @media (min-width: 1025px) { .img-txt-video-slider__img { height: 418px; max-width: 368px; margin-bottom: 35px } } .img-txt-video-slider__img img { display: block; width: 100%; object-position: center; object-fit: cover } .img-txt-video-slider__icons-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 48px } .img-txt-video-slider__icons-wrap span { text-transform: uppercase; font-size: 22.4px; font-size: 1.4rem; line-height: 100% } .img-txt-video-slider__icons { display: -webkit-flex; display: -ms-flexbox; display: flex } .img-txt-video-slider__icons a { width: 20px; height: 20px } @media (min-width: 641px) { .img-txt-video-slider__icons a { width: 30px; height: 30px } } .img-txt-video-slider__icons img { object-fit: contain } .img-txt-video-slider__icon:not(:last-of-type) { margin-right: 35px } .img-txt-video-slider .\--from-tablet { display: none } @media (min-width: 641px) { .img-txt-video-slider .\--from-tablet { display: block } } .img-txt-video-slider .\--not-tablet {} @media (min-width: 641px) { .img-txt-video-slider .\--not-tablet { display: none } } .img-txt-video-slider__txt-video-slider-wrap {} @media (min-width: 641px) { .img-txt-video-slider__txt-video-slider-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .img-txt-video-slider__quote { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-align: right; padding-left: 20%; margin-bottom: 16px } @media (min-width: 641px) { .img-txt-video-slider__quote { font-size: 4rem; line-height: 110%; margin-bottom: 50px } } @media (min-width: 1025px) { .img-txt-video-slider__quote { margin-bottom: 64px } } .img-txt-video-slider__quote-text { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100% } @media (min-width: 641px) { .img-txt-video-slider__quote-text { font-size: 4rem; line-height: 110% } } .img-txt-video-slider__txt-title { font-size: 51.2px; font-size: 3.2rem; line-height: 110%; font-weight: 300; text-transform: uppercase; margin-bottom: 16px } @media (min-width: 641px) { .img-txt-video-slider__txt-title { font-size: 3.6rem; line-height: 110% } } .img-txt-video-slider__txt-description { font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .img-txt-video-slider__txt-description { margin-bottom: 20px } } @media (min-width: 1025px) { .img-txt-video-slider__txt-description { margin-bottom: 24px } } .img-txt-video-slider__txt { margin-bottom: 64px } .img-txt-video-slider__txt p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .img-txt-video-slider__txt p:not(:last-of-type) { margin-bottom: 16px } .img-txt-video-slider__video-wrap { position: relative; height: 264px; margin-bottom: 47px } @media (min-width: 641px) { .img-txt-video-slider__video-wrap { height: 344px; margin-bottom: 56px } } @media (min-width: 1025px) { .img-txt-video-slider__video-wrap { height: 489px; margin-bottom: 79px } } .img-txt-video-slider__video-poster { width: 100%; height: 100% } .img-txt-video-slider__video-poster img { display: block; width: 100%; height: 100%; object-position: center; object-fit: cover } .img-txt-video-slider__video-shadow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 1 } .img-txt-video-slider__video-play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 2 } .img-txt-video-slider__video-play-btn img { display: block; width: 24px; height: 24px; object-position: center; object-fit: contain; cursor: pointer } .img-txt-video-slider__video-description { position: absolute; left: 8px; bottom: 16px; right: 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; color: #ffffff; z-index: 2 } .img-txt-video-slider__hr { height: 1px; background-color: #777777; margin-bottom: 32px } @media (min-width: 641px) { .img-txt-video-slider__hr { display: none } } .img-txt-video-slider__slider-wrap h4 { text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 56px; font-weight: normal } @media (min-width: 641px) { .img-txt-video-slider__slider-wrap h4 { margin-bottom: 32px; line-height: 110%; font-weight: 300 } } @media (min-width: 1025px) { .img-txt-video-slider__slider-wrap h4 { font-size: 2.4rem } } .img-txt-video-slider__slider { position: relative; outline: none } .img-txt-video-slider .flickity-prev-next-button { position: absolute; top: 50%; -webkit-transform: translateY(-43px); -ms-transform: translateY(-43px); transform: translateY(-43px); right: -12px; width: 12px; height: 12px; cursor: pointer; background-image: url(/img/btn-next-black.svg); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; border: none } @media (min-width: 641px) { .img-txt-video-slider .flickity-prev-next-button { right: -10px; top: calc(50% - 5px) } } @media (min-width: 1025px) { .img-txt-video-slider .flickity-prev-next-button { right: -37px; top: calc(50% + 8px) } } .img-txt-video-slider .flickity-prev-next-button.previous { left: -12px; -webkit-transform: translateY(-43px) rotate(180deg); -ms-transform: translateY(-43px) rotate(180deg); transform: translateY(-43px) rotate(180deg) } @media (min-width: 641px) { .img-txt-video-slider .flickity-prev-next-button.previous { left: -10px } } @media (min-width: 1025px) { .img-txt-video-slider .flickity-prev-next-button.previous { left: -37px } } .img-txt-video-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } .img-txt-video-slider .flickity-viewport { overflow: hidden } .img-txt-video-slider__slider-card { opacity: 0; width: calc(50% - 12px); margin-right: 24px; transition: opacity 0.3s ease-in } @media (min-width: 641px) { .img-txt-video-slider__slider-card { width: calc(50% - 16px); margin-right: 32px; max-width: 160px } } @media (min-width: 1025px) { .img-txt-video-slider__slider-card { width: calc(50% - 24px); margin-right: 48px; max-width: unset } } .img-txt-video-slider__slider-card.is-selected { opacity: 1; transition: opacity 0.3s ease-in } .img-txt-video-slider__card-img { width: 100%; height: 200px; margin-bottom: 32px } @media (min-width: 641px) { .img-txt-video-slider__card-img { height: 211px } } @media (min-width: 1025px) { .img-txt-video-slider__card-img { height: 365px } } .img-txt-video-slider__card-title span { display: block; text-transform: uppercase; text-align: center; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-style: normal } @media (min-width: 641px) { .img-txt-video-slider__card-title span { font-size: 2.4rem; line-height: 110% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-img-txt-btn { padding: 8px 8px 64px } @media (min-width: 641px) { .title-img-txt-btn { padding: 48px 16px 104px } } @media (min-width: 1025px) { .title-img-txt-btn { padding: 80px 40px 148px } } .title-img-txt-btn__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .title-img-txt-btn__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 48px } } .title-img-txt-btn__img-txt-btn-wrap {} @media (min-width: 641px) { .title-img-txt-btn__img-txt-btn-wrap { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-img-txt-btn__img-txt-btn-wrap { grid-column-gap: 48px } } .title-img-txt-btn__img { margin-bottom: 32px } .title-img-txt-btn__img img { display: block; height: 100%; width: 100%; object-fit: cover } .title-img-txt-btn__txt-btn-container {} @media (min-width: 1025px) { .title-img-txt-btn__txt-btn-container { padding-top: 24px; padding-right: 104px } } .title-img-txt-btn__txt-small { text-transform: uppercase; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; margin-bottom: 16px } @media (min-width: 641px) { .title-img-txt-btn__txt-small { margin-bottom: 32px } } .title-img-txt-btn__txt-title { text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 16px } @media (min-width: 641px) { .title-img-txt-btn__txt-title { font-size: 3.6rem; line-height: 110%; margin-bottom: 32px } } .title-img-txt-btn__txt-description { text-transform: uppercase; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; margin-bottom: 16px } @media (min-width: 1025px) { .title-img-txt-btn__txt-description { margin-bottom: 32px } } .title-img-txt-btn__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; margin-bottom: 24px; letter-spacing: 0.02em } @media (min-width: 1025px) { .title-img-txt-btn__txt { margin-bottom: 40px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-input-grid-cards { padding: 0 8px 40px } @media (min-width: 641px) { .title-input-grid-cards { padding-left: 16px; padding-right: 16px; padding-bottom: 0 } } @media (min-width: 1025px) { .title-input-grid-cards { padding-left: 40px; padding-right: 40px; padding-bottom: 0 } } .title-input-grid-cards__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 24px } @media (min-width: 641px) { .title-input-grid-cards__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 40px } } .title-input-grid-cards__description { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 32px } .title-input-grid-cards__input-wrap { width: 100%; position: relative; margin-bottom: 64px } @media (min-width: 641px) { .title-input-grid-cards__input-wrap { max-width: 480px } } @media (min-width: 1025px) { .title-input-grid-cards__input-wrap { margin-bottom: 87px } } .title-input-grid-cards__input { width: 100%; background-color: transparent; padding-left: 0; padding-right: 48px; font-size: 25.6px; font-size: 1.6rem; line-height: 32px; font-weight: 300; color: #2e1a47; border-bottom: 1px solid #2e1a47 } .title-input-grid-cards__input::-webkit-input-placeholder { color: #2e1a47; opacity: 1 } .title-input-grid-cards__input:-ms-input-placeholder { color: #2e1a47; opacity: 1 } .title-input-grid-cards__input::placeholder { color: #2e1a47; opacity: 1 } .title-input-grid-cards__input-btn { position: absolute; top: 0; right: 0; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer } .title-input-grid-cards__input-btn:focus, .title-input-grid-cards__input-btn:active { outline: 1px solid lightblue } .title-input-grid-cards__input-btn img { display: block; width: 100%; height: 100%; object-fit: contain } .title-input-grid-cards__input-btn.\--search-btn { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7) } .title-input-grid-cards__input-btn.\--clear-btn { display: none } .title-input-grid-cards__grid-cards { margin-bottom: 32px } @media (min-width: 641px) { .title-input-grid-cards__grid-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 88px 32px; margin-bottom: 60px } } @media (min-width: 1025px) { .title-input-grid-cards__grid-cards { -ms-grid-columns: (minmax(368px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(368px, 1fr)); grid-gap: 112px 48px; margin-bottom: 112px } } .title-input-grid-cards .title-img-txt-btn__img-txt-btn-wrap { margin-bottom: 88px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .title-input-grid-cards .title-img-txt-btn__img-txt-btn-wrap { margin-bottom: 0 } } .title-input-grid-cards .title-img-txt-btn__img { height: 280px } @media (min-width: 641px) { .title-input-grid-cards .title-img-txt-btn__img { height: 286px } } @media (min-width: 1025px) { .title-input-grid-cards .title-img-txt-btn__img { height: 300px } } .title-input-grid-cards .title-img-txt-btn__txt-btn-wrap { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .title-input-grid-cards .title-img-txt-btn__txt-title {} @media (min-width: 641px) { .title-input-grid-cards .title-img-txt-btn__txt-title { font-size: 2.4rem; line-height: 110%; margin-bottom: 16px } } .title-input-grid-cards .title-img-txt-btn__txt-description {} @media (min-width: 1025px) { .title-input-grid-cards .title-img-txt-btn__txt-description { margin-bottom: 16px } } .title-input-grid-cards .title-img-txt-btn__txt {} @media (min-width: 1025px) { .title-input-grid-cards .title-img-txt-btn__txt { margin-bottom: 24px } } .title-input-grid-cards__paginator { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 22.4px; font-size: 1.4rem; line-height: 100% } .title-input-grid-cards__paginator * { cursor: pointer } .title-input-grid-cards__paginator *:not(:last-child) { margin-right: 24px } .title-input-grid-cards__paginator *.\--active { font-weight: 800 } @media (min-width: 1025px) { .title-input-grid-cards__paginator { margin-bottom: 156px } } .title-input-grid-cards__paginator-btn { width: 24px; height: 24px } .title-input-grid-cards__paginator-btn.\--prev { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .title-input-grid-cards__text { height: 176px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 15%; padding-right: 15%; text-transform: uppercase; text-align: center; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: 500 } @media (min-width: 641px) { .title-input-grid-cards__text { padding-left: 25%; padding-right: 25%; font-size: 2.4rem; line-height: 110% } } @media (min-width: 1025px) { .title-input-grid-cards__text { height: 300px } } .title-input-grid-cards__container { position: relative } .title-input-grid-cards #no-result { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-img-txt-form { padding: 48px 8px 56px } @media (min-width: 641px) { .title-img-txt-form { padding-top: 24px; padding-bottom: 44px } } @media (min-width: 1025px) { .title-img-txt-form { padding: 58px 40px 44px } } .title-img-txt-form__grid {} @media (min-width: 641px) { .title-img-txt-form__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: (min-content)[5]; grid-template-rows: repeat(5, min-content); grid-column-gap: 32px } } .title-img-txt-form__grid::-webkit-scrollbar { width: 0 } @media (min-width: 1025px) { .title-img-txt-form__grid { position: relative; max-height: 100vh; overflow-y: auto; overflow-x: hidden } } @media (min-width: 641px) { .title-img-txt-form__grid { padding-left: 0; padding-right: 0 } } @media (min-width: 1025px) { .title-img-txt-form__grid { padding-left: 40px; padding-right: 40px; grid-column-gap: 48px } } .title-img-txt-form__right-col {} @media (min-width: 641px) { .title-img-txt-form__right-col { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3; height: unset } } @media (min-width: 1025px) { .title-img-txt-form__right-col { -ms-grid-column: 3; grid-column-start: 3; grid-column-end: 2; height: 600px } } @media (min-width: 1890px) { .title-img-txt-form__right-col { height: 660px } } .title-img-txt-form .\--from-tablet-grid-left-col {} @media (min-width: 641px) { .title-img-txt-form .\--from-tablet-grid-left-col { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2; position: static } } @media (min-width: 1025px) { .title-img-txt-form .\--from-tablet-grid-left-col { position: -webkit-sticky; position: sticky; top: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2 } } .title-img-txt-form__tablet-title {} @media (min-width: 641px) { .title-img-txt-form__tablet-title { display: block } } @media (min-width: 1025px) { .title-img-txt-form__tablet-title { display: none } } .title-img-txt-form__tablet-title.\--hide { display: none } @media (min-width: 641px) { .title-img-txt-form__tablet-title.\--hide { display: none } } @media (min-width: 1025px) { .title-img-txt-form__tablet-title.\--hide { display: block } } .title-img-txt-form .\--from-tablet-grid-right-col {} @media (min-width: 641px) { .title-img-txt-form .\--from-tablet-grid-right-col { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3 } } .title-img-txt-form .\--from-desktop-grid-right-col {} @media (min-width: 641px) { .title-img-txt-form .\--from-desktop-grid-right-col { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } } @media (min-width: 1025px) { .title-img-txt-form .\--from-desktop-grid-right-col { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3 } } .title-img-txt-form .\--tablet-padding {} @media (min-width: 641px) { .title-img-txt-form .\--tablet-padding { padding-left: 72px; padding-right: 72px } } @media (min-width: 1025px) { .title-img-txt-form .\--tablet-padding { padding-left: 0; padding-right: 0 } } .title-img-txt-form__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .title-img-txt-form__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 40px } } @media (min-width: 1025px) { .title-img-txt-form__title { padding-bottom: 47px; border-bottom: 1px solid #777777 } } .title-img-txt-form__img { margin-bottom: 40px; height: 264px } @media (min-width: 641px) { .title-img-txt-form__img { height: 286px; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 24px } } @media (min-width: 1025px) { .title-img-txt-form__img { height: 489px; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 6 } } .title-img-txt-form__img picture { height: 100% } .title-img-txt-form__img img { display: block; width: 100%; height: 100%; object-fit: cover } .title-img-txt-form__description { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 56px } @media (min-width: 641px) { .title-img-txt-form__description { -ms-grid-row: 5; grid-row-start: 5; grid-row-end: 6; margin-bottom: 44px } } @media (min-width: 1025px) { .title-img-txt-form__description { margin-bottom: 64px } } .title-img-txt-form__table { margin-bottom: 47px; font-family: "Sofia Pro" } @media (min-width: 641px) { .title-img-txt-form__table { -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3; margin-bottom: 24px } } .title-img-txt-form__table-row { display: -webkit-flex; display: -ms-flexbox; display: flex } .title-img-txt-form__table-row p:first-child { padding-right: 24px; margin-right: 24px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; letter-spacing: 0.02em; text-transform: uppercase } @media (min-width: 641px) { .title-img-txt-form__table-row p:first-child { width: 88px; padding-right: 0; margin-right: 16px; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: 0.02em; text-transform: none } } .title-img-txt-form__table-row p:last-child { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-right: 16px; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .title-img-txt-form__table-row:not(:last-child) { margin-bottom: 27px } @media (min-width: 641px) { .title-img-txt-form__table-row:not(:last-child) { margin-bottom: 30px } } .title-img-txt-form__table-row:last-child { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .title-img-txt-form__table-row:last-child p:first-child { margin-bottom: 30px } @media (min-width: 641px) { .title-img-txt-form__table-row:last-child { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .title-img-txt-form__table-row:last-child p:first-child { margin-bottom: 0 } } .title-img-txt-form__form .freeform-row .freeform-column { padding: 0 } .title-img-txt-form__form-title {} @media (min-width: 641px) { .title-img-txt-form__form-title { padding-left: 72px } } @media (min-width: 1025px) { .title-img-txt-form__form-title { padding-left: 104px } } .title-img-txt-form__form-title h3 { font-family: "Sofia Pro" } .title-img-txt-form h3 { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .title-img-txt-form h3 { font-size: 2.4rem; line-height: 110%; margin-bottom: 24px } } .title-img-txt-form__form { font-family: "Sofia Pro"; margin-bottom: 80px } @media (min-width: 641px) { .title-img-txt-form__form { margin-bottom: 48px } } @media (min-width: 1025px) { .title-img-txt-form__form { margin-left: 104px; margin-bottom: 56px } } .title-img-txt-form__form .ff-form-errors, .title-img-txt-form__form .ff-errors, .title-img-txt-form__form .ff-form-success { padding: 8px 16px; margin-bottom: 32px; transition: all 0.3s ease } .title-img-txt-form__form .ff-form-errors > *, .title-img-txt-form__form .ff-errors > *, .title-img-txt-form__form .ff-form-success > * { padding-top: 7px; font-family: "Sofia Pro"; font-style: normal; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; letter-spacing: 0.02em; text-transform: uppercase; color: #eb5757 } .title-img-txt-form__form .ff-form-success { border-radius: 5px; background-color: rgba(76, 175, 80, .1); color: #4caf50 } .title-img-txt-form__form .ff-form-success ~ .freeform-row { display: none } .title-img-txt-form__form .freeform-input.title-img-txt-form__input.ff-has-errors { margin-bottom: 0 } .title-img-txt-form__form .freeform-row .freeform-column .freeform-label.freeform-required::after { display: none } .title-img-txt-form__form .freeform-row .freeform-column .ff-errors { margin-top: 0; margin-bottom: 13px; transition: all 0.3s ease } .title-img-txt-form__form .freeform-row .freeform-column .ff-errors > p { font-style: normal; font-weight: 300; font-size: 12px; line-height: 120%; letter-spacing: 0.02em } .title-img-txt-form__input { font-family: "Sofia Pro"; background: transparent; margin-bottom: 32px; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; padding-left: 0; padding-right: 0 } .title-img-txt-form__submit { background: transparent; min-width: 160px; min-height: 43px } .title-img-txt-form__submit.\--gray { margin-bottom: 32px } @media (min-width: 641px) and (max-width: 730px) { .title-img-txt-form__submit { display: block; max-width: 160px; margin-left: 53.7% } } @media (min-width: 741px) and (max-width: 939px) { .title-img-txt-form__submit { display: block; max-width: 160px; margin-left: 52.8% } } @media (min-width: 940px) and (max-width: 1024px) { .title-img-txt-form__submit { display: block; max-width: 160px; margin-left: 52% } } @media (min-width: 1025px) { .title-img-txt-form__submit { display: inline-block; min-width: 160px; margin-left: unset; margin-right: unset } } .title-img-txt-form__thanks { padding-top: 48px; margin-bottom: 72px; display: none } @media (min-width: 641px) { .title-img-txt-form__thanks { padding-left: 72px; padding-right: 72px; padding-top: 41px; margin-bottom: 65px } } @media (min-width: 1025px) { .title-img-txt-form__thanks { padding-left: 104px; padding-right: 0; padding-top: 48px; margin-bottom: 72px } } .title-img-txt-form__thanks-title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; padding: 0; margin-bottom: 16px } @media (min-width: 641px) { .title-img-txt-form__thanks-title { font-size: 4rem; line-height: 110%; margin-bottom: 40px } } .title-img-txt-form__thanks-body { font-family: "Sofia Pro"; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; padding: 0 } .title-img-txt-form__txt-set { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 37px } @media (min-width: 641px) { .title-img-txt-form__txt-set { margin-bottom: 39px } } @media (min-width: 1025px) { .title-img-txt-form__txt-set { margin-bottom: 44px } } .title-img-txt-form .wys .title-img-txt-form__txt-set { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .title-img-txt-form .wys .title-img-txt-form__txt-set * { padding: 0; margin: 0 } .title-img-txt-form .wys .title-img-txt-form__txt-set h1, .title-img-txt-form .wys .title-img-txt-form__txt-set h2, .title-img-txt-form .wys .title-img-txt-form__txt-set h3, .title-img-txt-form .wys .title-img-txt-form__txt-set h4, .title-img-txt-form .wys .title-img-txt-form__txt-set h5, .title-img-txt-form .wys .title-img-txt-form__txt-set h6 { margin-bottom: 32px; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 641px) { .title-img-txt-form .wys .title-img-txt-form__txt-set h1, .title-img-txt-form .wys .title-img-txt-form__txt-set h2, .title-img-txt-form .wys .title-img-txt-form__txt-set h3, .title-img-txt-form .wys .title-img-txt-form__txt-set h4, .title-img-txt-form .wys .title-img-txt-form__txt-set h5, .title-img-txt-form .wys .title-img-txt-form__txt-set h6 { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 24px } } .title-img-txt-form .wys .title-img-txt-form__txt-set h3 { margin-top: 50px } @media (min-width: 641px) { .title-img-txt-form .wys .title-img-txt-form__txt-set h3 { margin-top: 44px } } .title-img-txt-form .title-img-txt-form__txt.wys .title-img-txt-form__txt-set > p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .title-img-txt-form .title-map, .title-img-txt-form .title-cards-slider { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-map { margin-bottom: 64px } @media (min-width: 641px) { .title-map { margin-bottom: 52px } } .title-map__title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; font-style: normal; font-weight: normal; margin-bottom: 40px } @media (min-width: 641px) { .title-map__title { margin-bottom: 32px; font-size: 2.4rem; line-height: 110%; font-weight: 300 } } @media (min-width: 1025px) { .title-map__title { font-size: 2.4rem; line-height: 110%; font-weight: 300 } } .title-map__map { height: 264px } @media (min-width: 641px) { .title-map__map { height: 518px } } @media (min-width: 1025px) { .title-map__map { height: 489px } } .title-map__map img { display: block; width: 100%; height: 100%; object-fit: cover } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-cards-slider { margin-bottom: 46px; font-family: "Sofia Pro" } @media (min-width: 641px) { .title-cards-slider { margin-bottom: 90px } } @media (min-width: 1025px) { .title-cards-slider { margin-bottom: 112px } } @media (min-width: 1890px) { .title-cards-slider { margin-bottom: 171px } } .title-cards-slider__title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-style: normal; font-weight: normal; text-transform: uppercase; margin-bottom: 64px } @media (min-width: 641px) { .title-cards-slider__title { margin-bottom: 32px; font-size: 2.4rem; line-height: 110%; font-weight: 300 } } .title-cards-slider__slider-container { position: relative; outline: none; display: -ms-grid; display: grid; -ms-grid-columns: 1fr min-content 1fr; grid-template-columns: 1fr min-content 1fr; grid-column-gap: 8px } @media (min-width: 641px) { .title-cards-slider__slider-container { display: block } } .title-cards-slider .flickity-viewport { overflow: hidden; margin-bottom: 60px; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 4 } @media (min-width: 641px) { .title-cards-slider .flickity-viewport { margin-bottom: 0 } } .title-cards-slider__slider-card { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .title-cards-slider__slider-card { width: calc(50% - 16px) } } @media (min-width: 641px) { .title-cards-slider__slider-card { width: calc(50% - 24px) } } .title-cards-slider__slider-card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .title-cards-slider__slider-card:not(:last-of-type) { margin-right: 32px } } @media (min-width: 641px) { .title-cards-slider__slider-card:not(:last-of-type) { margin-right: 48px } } .title-cards-slider__card-img { height: 279px; margin-bottom: 32px } @media (min-width: 641px) { .title-cards-slider__card-img { height: 229px } } @media (min-width: 1025px) { .title-cards-slider__card-img { height: 207px } } .title-cards-slider__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } .title-cards-slider .\--small-txt { font-family: "Sofia Pro"; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .title-cards-slider__card-title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-style: normal; font-weight: normal; text-transform: uppercase; margin-bottom: 16px } @media (min-width: 641px) { .title-cards-slider__card-title { font-size: 2.4rem; line-height: 110%; font-weight: 300 } } .title-cards-slider__card-description.\--small-txt { margin-bottom: 24px } .title-cards-slider__card-txt { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 32px } .title-cards-slider__card-btn-wrap {} @media (min-width: 641px) { .title-cards-slider__card-btn-wrap { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } } .title-cards-slider__card-btn { width: 160px; height: 43px } .title-cards-slider .flickity-prev-next-button { width: 12px; height: 12px; cursor: pointer; background-image: url(/img/btn-next-black.svg); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; border: none } @media (min-width: 641px) { .title-cards-slider .flickity-prev-next-button { position: absolute } } .title-cards-slider .flickity-slider { height: 100% } .title-cards-slider .flickity-prev-next-button.previous { -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); margin-left: auto } @media (min-width: 641px) { .title-cards-slider .flickity-prev-next-button.previous { left: -31px; top: 109px } } @media (min-width: 1025px) { .title-cards-slider .flickity-prev-next-button.previous { left: -20px; top: 98px } } .title-cards-slider .flickity-prev-next-button.next { -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3; -ms-grid-column: 3; grid-column-start: 3; grid-column-end: 4 } @media (min-width: 641px) { .title-cards-slider .flickity-prev-next-button.next { right: -31px; top: 109px } } @media (min-width: 1025px) { .title-cards-slider .flickity-prev-next-button.next { right: -20px; top: 98px } } .title-cards-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } .title-cards-slider .flickity-page-dots { -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3; -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .title-cards-slider .flickity-page-dots { display: none } } .title-cards-slider .flickity-page-dots li { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #777777; cursor: pointer } .title-cards-slider .flickity-page-dots li:not(:last-of-type) { margin-right: 8px } .title-cards-slider .flickity-page-dots li.is-selected { border: 1px solid #171717; background-color: #171717 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .banner-cards { padding-bottom: 24px } @media (min-width: 641px) { .banner-cards { padding-bottom: 38px } } @media (min-width: 1025px) { .banner-cards { padding-bottom: 106px } } .banner-cards__banner { height: 128px; position: relative; margin-bottom: 24px; img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } } @media (min-width: 641px) { .banner-cards__banner { height: 272px; margin-bottom: 40px } } @media (min-width: 1025px) { .banner-cards__banner { height: 454px; margin-bottom: 72px } } .banner-cards__banner-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .1); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 16px } @media (min-width: 1025px) { .banner-cards__banner-inner { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding: 88px 144px } } .banner-cards__banner-title { font-family: "Chiswick Sans"; font-style: normal; font-weight: normal; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-transform: none; color: #ffffff } @media (min-width: 641px) { .banner-cards__banner-title { font-size: 7.2rem; line-height: 110% } } .banner-cards__title-wrap { padding: 0 16px; max-width: 1440px; margin: 0 auto 48px } @media (min-width: 641px) { .banner-cards__title-wrap { margin-bottom: 56px } } @media (min-width: 1025px) { .banner-cards__title-wrap { margin-bottom: 72px; padding: 0 32px } } .banner-cards__title { margin-bottom: 20px } .banner-cards__title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .banner-cards__title h2 { font-size: 3.6rem; line-height: 110% } } @media (min-width: 641px) { .banner-cards__title { margin-bottom: 32px } } @media (min-width: 1025px) { .banner-cards__title { margin-bottom: 25px } } .banner-cards__text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000 } .banner-cards__cards-grid { padding-left: 8px; padding-right: 8px } @media (min-width: 641px) { .banner-cards__cards-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px; padding-left: 16px; padding-right: 16px; grid-row-gap: 50px } } @media (min-width: 1025px) { .banner-cards__cards-grid { padding-left: 40px; padding-right: 40px; grid-column-gap: 48px } } .banner-cards__card { display: block } .banner-cards__card:not(:last-child) { margin-bottom: 70px } @media (min-width: 641px) { .banner-cards__card:not(:last-child) { margin-bottom: 0 } } .banner-cards__card-img { position: relative; height: 459px; margin-bottom: 32px } @media (min-width: 641px) { .banner-cards__card-img { height: 306px } } @media (min-width: 1025px) { .banner-cards__card-img { height: 518px } } .banner-cards__card-img-hover {} @media (min-width: 1025px) { .banner-cards__card-img-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } } .banner-cards__card:hover .banner-cards__card-img-hover {} @media (min-width: 1025px) { .banner-cards__card:hover .banner-cards__card-img-hover { opacity: 1 } } .banner-cards__card-title { display: block; font-family: "Sofia Pro"; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; padding-top: 26px; padding-bottom: 25px; margin-bottom: 16px } @media (min-width: 641px) { .banner-cards__card-title { padding-top: 14px; padding-bottom: 14px } } .banner-cards__card-text { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } @media (min-width: 641px) { .banner-cards__card-text { margin-bottom: 39px } } @media (min-width: 1025px) { .banner-cards__card-text { margin-bottom: 16px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .big-card-cards-grid { padding: 24px 16px 48px } @media (min-width: 641px) { .big-card-cards-grid { padding: 64px 16px 16px } } @media (min-width: 1025px) { .big-card-cards-grid { padding: 84px 40px 82px } } .big-card-cards-grid__big-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 72px } @media (min-width: 641px) { .big-card-cards-grid__big-card { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-bottom: 81px } } @media (min-width: 1025px) { .big-card-cards-grid__big-card { margin-bottom: 96px } } .big-card-cards-grid__big-card-img { height: 459px; margin-bottom: 32px } @media (min-width: 641px) { .big-card-cards-grid__big-card-img { height: 400px; width: 288px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 0; margin-right: 32px } } @media (min-width: 1025px) { .big-card-cards-grid__big-card-img { height: 671px; width: 472px; margin-right: 48px } } .big-card-cards-grid__big-card-img img { display: block; width: 100%; height: 100%; object-fit: cover } .big-card-cards-grid__big-card-body {} @media (min-width: 641px) { .big-card-cards-grid__big-card-body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .big-card-cards-grid__big-card-body { padding-right: 104px } } .big-card-cards-grid__big-card-body p { font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .big-card-cards-grid__big-card-title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; margin-bottom: 24px; text-transform: uppercase } @media (min-width: 641px) { .big-card-cards-grid__big-card-title { font-size: 6.4rem; line-height: 105%; margin-bottom: 72px } } @media (min-width: 1025px) { .big-card-cards-grid__big-card-title { margin-bottom: 40px } } .big-card-cards-grid__big-card-description { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 16px; text-transform: uppercase } @media (min-width: 641px) { .big-card-cards-grid__big-card-description { font-size: 3.6rem; line-height: 110% } } .big-card-cards-grid__big-card-text { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } @media (min-width: 1025px) { .big-card-cards-grid__big-card-text { margin-bottom: 96px } } .big-card-cards-grid__big-card-link-wrap { display: none } @media (min-width: 1025px) { .big-card-cards-grid__big-card-link-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } .big-card-cards-grid__big-card-link {} @media (min-width: 1025px) { .big-card-cards-grid__big-card-link { width: 16px; height: 16px; cursor: pointer; transition: all 0.3s ease } .big-card-cards-grid__big-card-link:hover { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5) } .big-card-cards-grid__big-card-link img { display: block; width: 100%; height: 100%; object-fit: contain } } .big-card-cards-grid__cards-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 32px } @media (min-width: 641px) { .big-card-cards-grid__cards-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px; grid-row-gap: 82px } } @media (min-width: 1025px) { .big-card-cards-grid__cards-grid { grid-column-gap: 48px; grid-row-gap: 80px } } .big-card-cards-grid__card-img { position: relative; height: 200px; margin-bottom: 32px } @media (min-width: 641px) { .big-card-cards-grid__card-img { height: 306px } } @media (min-width: 1025px) { .big-card-cards-grid__card-img { height: 518px } } .big-card-cards-grid__card-img img { display: block; width: 100%; height: 100%; object-fit: cover } .big-card-cards-grid__card-img-hover {} @media (min-width: 1025px) { .big-card-cards-grid__card-img-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } } .big-card-cards-grid__card:hover .big-card-cards-grid__card-img-hover {} @media (min-width: 1025px) { .big-card-cards-grid__card:hover .big-card-cards-grid__card-img-hover { opacity: 1 } } .big-card-cards-grid__card-title { padding-top: 26px; padding-bottom: 25px; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; font-style: normal; font-weight: 300; text-align: center; text-transform: uppercase } @media (min-width: 1025px) { .big-card-cards-grid__card-title { text-align: left } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-txt-slider { padding: 24px 16px 48px } @media (min-width: 641px) { .img-title-txt-slider { padding: 64px 16px 0; display: -ms-grid; display: grid; -ms-grid-columns: 289px 1fr; grid-template-columns: 289px 1fr; grid-column-gap: 32px } } @media (min-width: 1025px) { .img-title-txt-slider { padding: 56px 40px 81px; -ms-grid-columns: 472px 1fr; grid-template-columns: 472px 1fr; grid-column-gap: 48px } } .img-title-txt-slider__img { height: 459px; margin-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__img { height: 400px; margin: 0 auto 40px 0; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2 } } @media (min-width: 1025px) { .img-title-txt-slider__img { height: 100%; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 4 } } .img-title-txt-slider__img img { display: block; width: 100%; height: 100%; object-fit: cover } @media (min-width: 641px) { .img-title-txt-slider__img img { object-fit: cover } } @media (min-width: 1025px) { .img-title-txt-slider__img img { height: 537px; position: -webkit-sticky; position: sticky; top: 136px } } .img-title-txt-slider__title-wrap { position: relative } @media (min-width: 641px) { .img-title-txt-slider__title-wrap { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .img-title-txt-slider__title-wrap { margin-right: 104px } } .img-title-txt-slider__title { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 16px; padding-right: 20px } @media (min-width: 641px) { .img-title-txt-slider__title { font-size: 3.6rem; line-height: 110%; padding-right: 0 } } @media (min-width: 1025px) { .img-title-txt-slider__title { padding-right: 20px } } .img-title-txt-slider__title-icon-wrap { position: absolute; right: 0; top: 0; height: 18px; width: 14px } @media (min-width: 641px) { .img-title-txt-slider__title-icon-wrap { position: static; margin-top: 16px } } @media (min-width: 1025px) { .img-title-txt-slider__title-icon-wrap { position: absolute; margin-top: 0; top: 8px; cursor: pointer } } .img-title-txt-slider__title-icon { height: 18px; width: 14px } .img-title-txt-slider__title-icon img { width: 100%; height: 100%; object-fit: contain; object-position: center } .img-title-txt-slider .\--saved { display: none } .img-title-txt-slider.\--saved .\--saved { display: block } .img-title-txt-slider.\--saved .\--not-saved { display: none } .img-title-txt-slider__description { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; margin-bottom: 48px } @media (min-width: 641px) { .img-title-txt-slider__description { margin-bottom: 0 } } @media (min-width: 1025px) { .img-title-txt-slider__description { margin-bottom: 24px } } .img-title-txt-slider__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__txt { padding-left: 64px; padding-right: 64px; padding-bottom: 79px; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } } @media (min-width: 1025px) { .img-title-txt-slider__txt { padding-left: 0; padding-bottom: 56px; -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; padding-right: 104px } } .img-title-txt-slider__txt b { font-weight: 800 } .img-title-txt-slider__txt a { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; font-weight: 400; text-decoration: underline; padding: 0 } .img-title-txt-slider__txt p { display: block; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding: 0 } .img-title-txt-slider__txt h1, .img-title-txt-slider__txt h2, .img-title-txt-slider__txt h3, .img-title-txt-slider__txt h4, .img-title-txt-slider__txt h5, .img-title-txt-slider__txt h6 { display: block; padding-left: 0; padding-right: 0 } .img-title-txt-slider__txt h3 { font-weight: 400 } .img-title-txt-slider__slider-wrap {} @media (min-width: 641px) { .img-title-txt-slider__slider-wrap { padding-left: 64px; padding-right: 64px; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } } @media (min-width: 1025px) { .img-title-txt-slider__slider-wrap { padding-left: 0; padding-right: 104px; -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3 } } .img-title-txt-slider__slider { position: relative; outline: none } .img-title-txt-slider__slider-title { border-top: 1px solid #d3d3d3; padding-top: 8px; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 56px; font-weight: 300 } @media (min-width: 641px) { .img-title-txt-slider__slider-title { margin-bottom: 64px } } @media (min-width: 1025px) { .img-title-txt-slider__slider-title { margin-bottom: 56px } } .img-title-txt-slider__card { width: calc(50% - 16px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .img-title-txt-slider__card { width: calc(50% - 24px) } } .img-title-txt-slider__card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .img-title-txt-slider__card:not(:last-of-type) { margin-right: 48px } } @media (min-width: 1025px) { .img-title-txt-slider__card:not(:last-of-type) { margin-bottom: 56px } } .img-title-txt-slider__card-img-wrap { display: block; position: relative; border-radius: 8px; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .img-title-txt-slider__card-img-wrap { height: 365px } } .img-title-txt-slider__card-img-wrap img { width: 100%; height: 100%; object-fit: contain } .img-title-txt-slider .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .img-title-txt-slider .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } .img-title-txt-slider__card:hover {} .img-title-txt-slider__card:hover .\--first {} @media (min-width: 1025px) { .img-title-txt-slider__card:hover .\--first { opacity: 0 } } .img-title-txt-slider__card:hover .\--second {} @media (min-width: 1025px) { .img-title-txt-slider__card:hover .\--second { opacity: 1 } } .img-title-txt-slider__card-category { font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-title { font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-subtitle { font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .img-title-txt-slider__star { width: 16px; height: 16px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .img-title-txt-slider .\--black-star { background-image: url(/img/black-star.svg) } .img-title-txt-slider .flickity-viewport { overflow: hidden } .img-title-txt-slider .flickity-button.flickity-prev-next-button { position: absolute; top: 100px; right: 0; width: 12px; height: 12px; cursor: pointer; background-image: url(/img/btn-next-black.svg); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; border: none } @media (min-width: 641px) { .img-title-txt-slider .flickity-button.flickity-prev-next-button { top: 176px; right: -37px } } .img-title-txt-slider .flickity-button.flickity-prev-next-button.previous { left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } @media (min-width: 641px) { .img-title-txt-slider .flickity-button.flickity-prev-next-button.previous { left: -37px } } .img-title-txt-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } .change-profile-info-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: none } .change-profile-info-popup__background { background-color: rgba(0, 0, 0, .5); padding: 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100% } .change-profile-info-popup__inner { background-color: #ffffff; padding: 52px 38px } @media (min-width: 641px) { .change-profile-info-popup__inner { width: 592px; margin: 0 auto; padding: 88px } } .change-profile-info-popup__message { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; margin-bottom: 43px } @media (min-width: 641px) { .change-profile-info-popup__message { margin-bottom: 48px } } .change-profile-info-popup__button-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .change-profile-info-popup__accept-btn, .change-profile-info-popup__close-btn { width: 118px; height: 43px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .change-profile-info-popup__accept-btn, .change-profile-info-popup__close-btn { width: 160px } } .change-profile-info-popup__accept-btn { margin-right: 32px } @media (min-width: 641px) { .change-profile-info-popup__accept-btn { margin-right: 48px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .card-img-txt-icons-btn { padding-top: 34px; padding-bottom: 34px; max-width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .card-img-txt-icons-btn { padding-top: 43px; padding-bottom: 43px; margin-bottom: 0; max-width: 352px } } @media (min-width: 1025px) { .card-img-txt-icons-btn { padding-top: 51px; padding-bottom: 51px; max-width: 522px } } .card-img-txt-icons-btn::after { display: block; content: ''; z-index: 1; border-bottom: 1px solid #000000; background: #ffffff; position: absolute; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 100px; height: 100px; top: -14px; right: -48px } @media (min-width: 641px) { .card-img-txt-icons-btn::after { width: 150px; height: 150px; top: -30px; right: -73px } } @media (min-width: 1025px) { .card-img-txt-icons-btn::after { width: 216px; height: 216px; top: -55px; right: -106px } } .card-img-txt-icons-btn__img-wrap { max-width: 100%; position: relative; overflow: hidden; border: 1px solid #000000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 1px 1px 48px 1px } @media (min-width: 641px) { .card-img-txt-icons-btn__img-wrap { min-height: 286px; max-height: 286px; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } } @media (min-width: 1025px) { .card-img-txt-icons-btn__img-wrap { min-height: 443px; max-height: 443px } } .card-img-txt-icons-btn__img-wrap.\--modificated-class { height: auto; border: none } .card-img-txt-icons-btn__img { max-width: 100%; height: auto; overflow: hidden; margin: auto } @media (min-width: 641px) { .card-img-txt-icons-btn__img { max-width: 260px; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } } @media (min-width: 1025px) { .card-img-txt-icons-btn__img { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 369px } } .card-img-txt-icons-btn__img.\--modificated-class { max-width: 100% } .card-img-txt-icons-btn .\--modificated-class .card-img-txt-icons-btn__img { margin: 0 } .card-img-txt-icons-btn__img img { display: block; object-fit: cover; object-position: center } .card-img-txt-icons-btn__title { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 16px; text-transform: uppercase; font-weight: 400 } @media (min-width: 641px) { .card-img-txt-icons-btn__title { margin-bottom: 20px } } @media (min-width: 1025px) { .card-img-txt-icons-btn__title { font-weight: 300; margin-bottom: 34px; font-size: 2.4rem } } .card-img-txt-icons-btn__txt-wrap { margin-top: auto } .card-img-txt-icons-btn__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 24px } .card-img-txt-icons-btn__icons-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 1025px) { .card-img-txt-icons-btn__icons-wrap { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .card-img-txt-icons-btn__icons-wrap span { margin-bottom: 23px } @media (min-width: 1025px) { .card-img-txt-icons-btn__icons-wrap span { margin-bottom: 0; margin-right: 46px } } .card-img-txt-icons-btn__icons { display: -webkit-flex; display: -ms-flexbox; display: flex } .card-img-txt-icons-btn__icon { display: block; width: 18px; height: 18px } .card-img-txt-icons-btn__icon img { display: block; width: 100%; height: 100%; object-fit: contain } .card-img-txt-icons-btn__icon:not(:last-of-type) { margin-right: 46px } .card-img-txt-icons-btn__btn { width: 100%; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; font-style: normal; font-weight: normal; height: 56px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .card-img-txt-icons-btn__btn { height: 62px; margin-bottom: 0 } } @media (min-width: 1025px) { .card-img-txt-icons-btn__btn { width: 328px; height: 56px } } .card-img-txt-icons-btn.\--closed {} .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__title { margin-bottom: 16px } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__img { position: relative } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed { opacity: 1; position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) } @media (min-width: 1025px) { .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed { opacity: 0; transition: all 0.6s ease } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed:hover { opacity: 1 } } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed-lock { width: 21px; height: 21px; background-image: url(/img/lock.svg); background-position: center; background-size: contain; margin-bottom: 13px } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed p { padding: 0 90px; text-align: center; font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } .card-img-txt-icons-btn.\--closed .card-img-txt-icons-btn__closed a { text-decoration: underline } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-icons-btn { padding: 34px 16px 34px } @media (min-width: 641px) { .title-txt-icons-btn { padding: 43px 16px 43px } } @media (min-width: 1025px) { .title-txt-icons-btn { padding: 51px 40px 51px } } .title-txt-icons-btn__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 24px } @media (min-width: 641px) { .title-txt-icons-btn__title { font-size: 3.6rem } } .title-txt-icons-btn__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 24px } @media (min-width: 641px) { .title-txt-icons-btn__txt { max-width: 608px } } @media (min-width: 1025px) { .title-txt-icons-btn__txt { max-width: 50% } } .title-txt-icons-btn__icons-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .title-txt-icons-btn__icons-wrap { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .title-txt-icons-btn__icons-wrap span { margin-bottom: 23px } @media (min-width: 641px) { .title-txt-icons-btn__icons-wrap span { margin-bottom: 0; margin-right: 46px } } .title-txt-icons-btn__icons { display: -webkit-flex; display: -ms-flexbox; display: flex } .title-txt-icons-btn__icon { display: block; width: 18px; height: 18px; cursor: pointer } .title-txt-icons-btn__icon img { display: block; width: 100%; height: 100%; object-fit: contain } .title-txt-icons-btn__icon:not(:last-of-type) { margin-right: 46px } .title-txt-icons-btn__btn { width: 100%; line-height: 51.2px; line-height: 3.2rem } @media (min-width: 641px) { .title-txt-icons-btn__btn { line-height: 2.4rem; width: 264px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-grid-files { padding: 34px 16px } @media (min-width: 641px) { .title-grid-files { padding-top: 43px; padding-bottom: 43px } } @media (min-width: 1025px) { .title-grid-files { padding: 51px 40px } } .title-grid-files__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px } .title-grid-files__title img { display: block; width: 18px; height: 18px; object-fit: contain; margin-right: 31px } .title-grid-files__title h4 { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 641px) { .title-grid-files__title h4 { font-size: 2.4rem; line-height: 110% } } .title-grid-files__description { font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .title-grid-files__btn-transparent { display: block; max-width: 328px; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; margin-bottom: 48px } @media (min-width: 641px) { .title-grid-files__btn-transparent { margin-bottom: 64px } } .title-grid-files__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 42px; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase } @media (min-width: 641px) { .title-grid-files__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-grid-files__grid { -ms-grid-columns: (minmax(160px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-column-gap: 48px } } .title-grid-files__file-img { height: 168px; margin-bottom: 24px } @media (min-width: 641px) { .title-grid-files__file-img { height: 178px } } .title-grid-files__file-img img { display: block; width: 100%; height: 100%; object-fit: cover } .title-grid-files__file-title { margin-bottom: 10px } .title-grid-files__file-download-icon { display: block; width: 12px; height: 12px; margin-left: 3px } .title-grid-files__file-download-icon img { display: block; width: 100%; height: 100%; object-fit: contain } .title-grid-files .files-container__download-icon { color: #eb5757; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; text-transform: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-form { padding: 56px 8px 40px; display: -ms-grid; display: grid; overflow: hidden } @media (min-width: 641px) { .title-txt-form { padding: 120px 144px 0 80px; margin-bottom: -27px; overflow: visible } } @media (min-width: 1025px) { .title-txt-form { padding: 144px 40px 88px; margin-bottom: 0; -ms-grid-columns: 472px 1fr; grid-template-columns: 472px 1fr; -ms-grid-rows: min-content 1fr; grid-template-rows: min-content 1fr; grid-column-gap: 152px; grid-row-gap: 40px; overflow: hidden } } .title-txt-form p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem } .title-txt-form__fieldset-first { margin-bottom: 17px } @media (min-width: 1025px) { .title-txt-form__fieldset-first { margin-bottom: 60px } } .title-txt-form__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px; font-weight: 400 } @media (min-width: 641px) { .title-txt-form__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 40px; font-weight: 300 } } @media (min-width: 1025px) { .title-txt-form__title { margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2 } } .title-txt-form__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 64px } @media (min-width: 641px) { .title-txt-form__txt { margin-bottom: 64px } } @media (min-width: 1025px) { .title-txt-form__txt { margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2; -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3 } } .title-txt-form__form { } @media (min-width: 1025px) { .title-txt-form__form { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 3; overflow: hidden } } .title-txt-form__fieldset-legend { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 32px; font-weight: 400 } @media (min-width: 641px) { .title-txt-form__fieldset-legend { font-size: 2.4rem; line-height: 110%; font-weight: 300; margin-bottom: 40px !important } } .title-txt-form__input { background-color: transparent; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; font-family: "Sofia Pro"; font-weight: 300; margin-left: 0; min-width: 100%; text-align: left; padding-left: 0; height: 25px } .title-txt-form__input.\--with-border { border: 1px solid #000000; text-align: center; padding-left: 16px; height: 43px } @media (min-width: 1025px) { .title-txt-form__input.\--with-border { padding-left: 27px } } .title-txt-form__input::-webkit-textfield-decoration-container { opacity: 1; position: relative; z-index: 10 } .title-txt-form__input::-webkit-inner-spin-button { opacity: 0 } .title-txt-form__input::-webkit-outer-spin-button { opacity: 0 } @media (min-width: 641px) { .title-txt-form__input { width: 160px } } .title-txt-form__input.\--city { height: 25px; min-width: unset; width: 100% } @media (min-width: 641px) { .title-txt-form__input.\--city { height: 25px } } .title-txt-form__input.\--postal { width: calc(50% - 12px); min-width: 152px } @media (min-width: 641px) { .title-txt-form__input.\--postal { width: unset; min-width: 224px } } @media (min-width: 1025px) { .title-txt-form__input.\--postal { width: calc(50% - 24px); min-width: 264px } } .title-txt-form__input.\--postal::-webkit-inner-spin-button { display: none } .title-txt-form__input.\--postal::-webkit-outer-spin-button { display: none } .title-txt-form__input.\--country { width: calc(50% - 24px); min-width: unset } .title-txt-form__input.\--phone { } .title-txt-form__input.\--phone::-webkit-inner-spin-button { display: none } .title-txt-form__input.\--phone::-webkit-outer-spin-button { display: none } .title-txt-form__input-select-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .title-txt-form__select { margin-left: 38px; height: 39px; background-color: transparent; border: 1px solid #000000; text-align-last: center; position: relative; font-family: "Sofia Pro"; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100% } .title-txt-form__select::-webkit-textfield-decoration-container { opacity: 1; position: relative; z-index: 11 } @media (min-width: 641px) { .title-txt-form__select { min-width: 160px; height: 43px } } @media (min-width: 1025px) { .title-txt-form__select { min-width: 162px; height: 43px; cursor: pointer } } .title-txt-form__select-input-after { position: relative } .title-txt-form__select-input-after::before { content: ''; display: block; background-image: url("/img/arrow-vector-for-carry.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 50%; right: 21px; -webkit-transform: translateY(-6px) rotate(180deg); -ms-transform: translateY(-6px) rotate(180deg); transform: translateY(-6px) rotate(180deg); width: 9px; height: 5px; z-index: 9 } .title-txt-form__select-input-after::after { content: ''; display: block; background-image: url("/img/arrow-vector-for-carry.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 50%; right: 21px; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); width: 9px; height: 5px; z-index: 9 } .title-txt-form__txt-select-wrap { } @media (min-width: 641px) { .title-txt-form__txt-select-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .title-txt-form__txt-input-wrap { } @media (min-width: 641px) { .title-txt-form__txt-input-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .title-txt-form__txt-input-wrap p { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 32px } @media (min-width: 641px) { .title-txt-form__txt-input-wrap p { margin-bottom: 0 } } .title-txt-form__txt-select-wrap p { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 31px } @media (min-width: 641px) { .title-txt-form__txt-select-wrap p { margin-bottom: 0 } } .title-txt-form fieldset > * { margin-bottom: 31px } .title-txt-form__inputs-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 39px !important } .title-txt-form__wrap-text-state { width: calc(50% - 12px); min-width: 152px; cursor: default; height: 25px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #000000 } @media (min-width: 641px) { .title-txt-form__wrap-text-state { height: 25px; width: unset; min-width: 288px } } @media (min-width: 1025px) { .title-txt-form__wrap-text-state { width: calc(50% - 24px); min-width: 264px } } .title-txt-form__wrap-text-state p { font-size: 25.6px; font-size: 1.6rem; color: #000000; font-style: normal; font-weight: 300; line-height: 24px } .title-txt-form__submit { background-color: transparent; width: 160px; height: 43px; font-size: 28.8px; font-size: 1.8rem; border-color: #000000 } .title-txt-form__thanks { display: none; padding-left: 8px; padding-right: 8px } @media (min-width: 641px) { .title-txt-form__thanks { padding-left: 0; padding-right: 0; margin-top: -16px; margin-bottom: -7px } } @media (min-width: 1025px) { .title-txt-form__thanks { padding: 0; margin: 0; max-height: 30px } } .title-txt-form__thanks-title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; padding: 0; margin-bottom: 16px } @media (min-width: 641px) { .title-txt-form__thanks-title { font-size: 4rem; line-height: 110%; margin-bottom: 40px } } .title-txt-form__thanks-body { font-family: "Sofia Pro"; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; padding: 0 } .carry-page-wrap { } .carry-page-wrap .s-hidden { visibility: hidden; position: absolute } .carry-page-wrap .select { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 38px; height: 39px; min-width: 190px } @media (min-width: 641px) { .carry-page-wrap .select { height: 43px; min-width: 200px } } .carry-page-wrap .styledSelect { position: absolute; padding-right: 20px; top: 0; right: 0; bottom: 0; left: 0; min-width: 190px; height: 39px; font-size: 25.6px; font-size: 1.6rem; background-color: transparent; border: 1px solid #000000; font-family: "Sofia Pro"; font-weight: 300; line-height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .carry-page-wrap .styledSelect { height: 43px; min-width: 190px; padding-left: 10px } } .carry-page-wrap .styledSelect::after { content: ''; display: block; background-image: url("/img/arrow-vector-for-carry.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 50%; right: 9px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); width: 12px; height: 7px; z-index: -1 } .carry-page-wrap .styledSelect:active, .carry-page-wrap .styledSelect.active { background-color: transparent } .carry-page-wrap .options { display: none; position: absolute; top: calc(100% - 1px); right: 0; left: 0; height: 130px; z-index: 999; margin: 0 0; padding: 0 0; list-style: none; border: 1px solid #000000; background-color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); max-height: 133px; overflow: scroll } .carry-page-wrap .options::-webkit-scrollbar { height: 0; width: 6px } .carry-page-wrap .options::-webkit-scrollbar-track { background-color: transparent; height: 26px; border: 1px solid #000000 } .carry-page-wrap .options::-webkit-scrollbar-thumb { background-color: #000000; width: 26px } .carry-page-wrap .options li { padding: 10px 0; text-align-last: center; font-family: "Sofia Pro"; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 100% } .carry-page-wrap .options li:hover { background-color: rgba(168, 168, 168, .2) } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-grid-cards-btn { padding: 44px 16px 16px } @media (min-width: 641px) { .title-grid-cards-btn { padding: 80px 16px 6px } } @media (min-width: 1025px) { .title-grid-cards-btn { padding: 80px 40px 90px } } .title-grid-cards-btn__title { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: normal; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .title-grid-cards-btn__title { font-size: 3.6rem; font-weight: 300; line-height: 110%; margin-bottom: 64px } } @media (min-width: 1025px) { .title-grid-cards-btn__title { margin-bottom: 80px } } .title-grid-cards-btn__grid-big-cards {} @media (min-width: 641px) { .title-grid-cards-btn__grid-big-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; margin-bottom: 80px } } @media (min-width: 1025px) { .title-grid-cards-btn__grid-big-cards { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-gap: 48px; margin-bottom: 103px } } .title-grid-cards-btn__grid-big-cards-link { transition: all 0.3s ease } .title-grid-cards-btn__grid-big-cards-link:hover { text-decoration: underline } .title-grid-cards-btn__big-card { margin-bottom: 64px } @media (min-width: 641px) { .title-grid-cards-btn__big-card { margin-bottom: 0 } } .title-grid-cards-btn__card-img { height: 459px; margin-bottom: 32px } @media (min-width: 641px) { .title-grid-cards-btn__card-img { height: 306px } } @media (min-width: 1025px) { .title-grid-cards-btn__card-img { height: 365px } } .title-grid-cards-btn__card-img img { display: block; width: 100%; height: 100%; object-fit: cover } .title-grid-cards-btn__card-title { font-family: "Sofia Pro"; font-size: 18px; line-height: 120%; font-weight: normal; text-transform: uppercase; margin-bottom: 24px; overflow: hidden } @media (min-width: 1025px) { .title-grid-cards-btn__card-title { font-size: 24px; line-height: 110%; font-weight: 300 } } .title-grid-cards-btn__card-description { font-family: "Sofia Pro"; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; overflow: hidden } .title-grid-cards-btn__card-description p { font-size: 16px; line-height: 24px; letter-spacing: 0.02em; overflow: hidden } .title-grid-cards-btn__grid-small-card-link { transition: all 0.3s ease; display: block; margin-bottom: 64px } .title-grid-cards-btn__grid-small-card-link:hover { text-decoration: underline } .title-grid-cards-btn__grid-small-cards {} @media (min-width: 641px) { .title-grid-cards-btn__grid-small-cards { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-gap: 32px } } @media (min-width: 1025px) { .title-grid-cards-btn__grid-small-cards { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-gap: 49px; margin-bottom: 80px } } .title-grid-cards-btn__grid-small-cards .title-grid-cards-btn__small-card { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .title-grid-cards-btn__grid-small-cards .title-grid-cards-btn__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .title-grid-cards-btn__grid-small-cards .title-grid-cards-btn__card-img {} @media (min-width: 641px) { .title-grid-cards-btn__grid-small-cards .title-grid-cards-btn__card-img { height: 306px } } @media (min-width: 1025px) { .title-grid-cards-btn__grid-small-cards .title-grid-cards-btn__card-img { height: 365px } } .title-grid-cards-btn__btn-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ingredients { padding: 36px 0 81px } @media (min-width: 641px) { .ingredients { padding: 60px 0 38px } } @media (min-width: 1025px) { .ingredients { padding: 85px 0 127px } } .ingredients__inner {} @media (min-width: 641px) { .ingredients__inner { padding-left: 16px; padding-right: 16px } } @media (min-width: 1025px) { .ingredients__inner { padding-left: 32px; padding-right: 32px } } .ingredients__inner-title { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; font-style: normal; font-weight: bold; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-transform: lowercase } @media (min-width: 641px) { .ingredients__inner-title { margin-bottom: 48px; font-style: normal; font-weight: bold; font-size: 4rem; line-height: 100%; letter-spacing: 0.02em; padding-left: 0; padding-right: 0 } } .ingredients__inner-text-wrap { margin-bottom: 48px } @media (min-width: 641px) { .ingredients__inner-text-wrap { padding: 0 64px; margin-bottom: 56px } } @media (min-width: 1025px) { .ingredients__inner-text-wrap { max-width: 800px; padding: 0 8px; margin-bottom: 40px } } .ingredients__inner-text { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .ingredients__inner-text:not(:last-child) { margin-bottom: 32px } .ingredients__card:last-child:not(:nth-child(3n+3)) { grid-column: 3 / -3 } .ingredients__card-img { width: 100%; height: 100%; object-fit: contain } .ingredients__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-row-gap: 32px; padding-left: 8px; padding-right: 8px } @media (min-width: 641px) { .ingredients__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px; padding: 0; margin: 0 } } @media (min-width: 1025px) { .ingredients__grid { grid-column-gap: 48px; margin: 0; padding: 0 8px } } .ingredients__card-img-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; cursor: pointer } .ingredients__card-picture-wrap { height: 328px; margin-bottom: 8px } @media (min-width: 641px) { .ingredients__card-picture-wrap { height: 224px } } @media (min-width: 1025px) { .ingredients__card-picture-wrap { height: 368px } } .ingredients__card-picture-wrap picture { display: block; width: 100%; height: 100% } .ingredients__card-picture-wrap img { display: block } .ingredients__card-title { font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 8px } .ingredients__card-text { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 20px } .ingredients__card-link { font-style: normal; font-weight: 300; font-size: 12px; line-height: 100%; text-transform: uppercase; cursor: pointer } .ingredients__pop-up-image { object-fit: cover; height: 103px; width: 100%; margin-bottom: 30px } @media (min-width: 641px) { .ingredients__pop-up-image { height: 221px; margin-bottom: 48px } } @media (min-width: 1025px) { .ingredients__pop-up-image { height: 291px } } .ingredients__pop-up-text-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 595px; margin: 0 auto; padding: 0 16px 35px } @media (min-width: 641px) { .ingredients__pop-up-text-wrapper { padding: 0 0 60px } } .ingredients__pop-up-wrapper { display: none; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; z-index: 999 } .ingredients__pop-up-wrapper::after { display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #ffffff; opacity: 0.8 } .ingredients__pop-up-text-wrapper-link { font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; padding-left: 15px; text-transform: uppercase; position: relative; margin-bottom: 24px } @media (min-width: 641px) { .ingredients__pop-up-text-wrapper-link { margin-bottom: 32px } } .ingredients__pop-up-text-wrapper-link::before { display: block; content: ''; width: 12px; height: 7px; position: absolute; left: 0; top: 50%; background-image: url("/img/scroll-down.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-transform: rotate(90deg) translateX(-3px); -ms-transform: rotate(90deg) translateX(-3px); transform: rotate(90deg) translateX(-3px) } .ingredients__pop-up-text-wrapper-title { font-family: "Cera Pro"; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 24px } @media (min-width: 641px) { .ingredients__pop-up-text-wrapper-title { font-size: 4rem; margin-bottom: 32px } } @media (min-width: 1025px) { .ingredients__pop-up-text-wrapper-title { margin-bottom: 42px } } .ingredients__close-cross-image-wrap { height: 0; position: relative; cursor: pointer } .ingredients__close-cross-image { width: 25px; height: 25px; border-right: 3px solid #171717; top: 0; right: 15px; position: absolute; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) } .ingredients__close-cross-image.\--second { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 16px } .ingredients__pop-up-text-wrapper-text { font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .ingredients__pop-up-text-wrapper-text * { font-size: 25.6px; font-size: 1.6rem } .ingredients__pop-up-text-wrapper-text a { text-decoration: underline } .ingredients__pop-up { cursor: default; width: 100%; min-height: 444px; background: #ffffff; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 4px 4px rgba(0, 0, 0, .1); border-radius: 5px } .ingredients__pop-up picture { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 641px) { .ingredients__pop-up { width: 100%; min-height: 544px; max-height: 80vh; overflow: auto } } @media (min-width: 1025px) { .ingredients__pop-up { width: 1008px; min-height: 618px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .small-cards-product-three { padding-top: 24px; padding-bottom: 48px; background: #ffffff } @media (min-width: 641px) { .small-cards-product-three { padding-top: 50px; padding-bottom: 14px } } @media (min-width: 1025px) { .small-cards-product-three { padding-bottom: 74px } } .small-cards-product-three__inner h4 { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; text-transform: uppercase; font-size: 38.4px; font-size: 2.4rem; line-height: 100% } @media (min-width: 641px) { .small-cards-product-three__inner h4 { font-weight: 500 } } @media (min-width: 1025px) { .small-cards-product-three__inner h4 { font-size: 4rem } } .small-cards-product-three__inner {} @media (min-width: 641px) { .small-cards-product-three__inner { padding-left: 16px; padding-right: 16px } } @media (min-width: 1025px) { .small-cards-product-three__inner { padding-left: 40px; padding-right: 40px } } .small-cards-product-three__grid { padding: 24px 0 0; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 40px } @media (min-width: 641px) { .small-cards-product-three__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .small-cards-product-three__grid { grid-column-gap: 48px } } .small-cards-product-three h2 { padding: 24px 8px } .small-cards-product-three__card { overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } .small-cards-product-three__card-img-wrap { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .small-cards-product-three__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .small-cards-product-three__card-img-wrap { height: 365px } } .small-cards-product-three__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .small-cards-product-three__card-img-wrap .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .small-cards-product-three__card-img-wrap .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } .small-cards-product-three__card:hover {} .small-cards-product-three__card:hover .\--first {} @media (min-width: 1025px) { .small-cards-product-three__card:hover .\--first { opacity: 0 } } .small-cards-product-three__card:hover .\--second {} @media (min-width: 1025px) { .small-cards-product-three__card:hover .\--second { opacity: 1 } } .small-cards-product-three__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product-three__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product-three__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .small-cards-product-three .bv-main-wrap { margin-bottom: 8px } .small-cards-product-three__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .small-cards-product-three__star { width: 16px; height: 16px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .small-cards-product-three__star.\--black-star { background-image: url(/img/black-star.svg) } .small-cards-product-three__star.\--half-star { background-image: url(/img/half-star.svg) } .small-cards-product-three__link-all-prod-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: 32px } @media (min-width: 641px) { .small-cards-product-three__link-all-prod-wrap { padding-top: 40px } } .small-cards-product-three__link-all-prod { padding: 15px 22px; border: 1px solid #000000; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; text-transform: capitalize; font-size: 28.8px; font-size: 1.8rem; line-height: 100% } .small-cards-product-three__btn { position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; border: 1px solid #171717; background: #f3f2f4; cursor: pointer } .small-cards-product-three.\--double-img {} .small-cards-product-three.\--double-img .small-cards-product__grid {} @media (min-width: 641px) { .small-cards-product-three.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1025px) { .small-cards-product-three.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } .small-cards-product-three.\--double-img .small-cards-product__btn { display: none } @media (max-width: 374px) { .small-cards-product-three.\--double-img .small-cards-product__btn { display: block; border-radius: 0; background: #ffffff; font-family: "Sofia Pro" } } @media (min-width: 375px) { .small-cards-product-three.\--double-img .small-cards-product__btn { display: block; border-radius: 0; background: #ffffff; font-family: "Sofia Pro" } } @media (min-width: 641px) { .small-cards-product-three.\--double-img .small-cards-product__btn { display: none } } .small-cards-product-three.\--double-img h4 { padding: 22px 8px; font-size: 32px } @media (min-width: 641px) { .small-cards-product-three.\--double-img h4 { display: none } } .small-cards-product-three.\--double-img .small-cards-product__card { position: relative; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } .small-cards-product-three.\--double-img .small-cards-product__card-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s ease } .small-cards-product-three.\--results-page {} .small-cards-product-three.\--results-page h4 { text-align: center; font-weight: 400 } @media (min-width: 1025px) { .small-cards-product-three.\--results-page h4 { font-weight: 300 } } .small-cards-product-three.\--results-page .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } @media (min-width: 641px) { .small-cards-product-three.\--results-page .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); max-width: 688px; margin: 0 auto } } @media (min-width: 1025px) { .small-cards-product-three.\--results-page .small-cards-product__grid { max-width: 688px; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1025px) { .small-cards-product { padding-top: 128px } .small-cards-product__grid { border-top: none; padding-top: 0; grid-column-gap: 48px } .small-cards-product__card-img-wrap {} .small-cards-product__card-img-wrap img { object-fit: contain } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-bg-copy { padding-top: 24px; margin-bottom: 56px } @media (min-width: 641px) { .title-bg-copy { margin-bottom: 53px } } @media (min-width: 1025px) { .title-bg-copy { margin-bottom: 43px; padding-left: 23px; padding-right: 23px; display: -ms-grid; display: grid; -ms-grid-columns: 2fr 1fr; grid-template-columns: 2fr 1fr; grid-column-gap: 60px } } .title-bg-copy__title { display: table-caption; text-transform: uppercase; font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 36px; line-height: 125%; padding: 30px 8px 0; margin-bottom: 0; position: relative; z-index: 1 } @media (min-width: 641px) { .title-bg-copy__title { padding-left: 61px; padding-right: 61px; font-size: 64px; line-height: 120% } } @media (min-width: 1025px) { .title-bg-copy__title { padding-left: 121px; padding-right: 0 } } .title-bg-copy__bg { height: 175px; margin-top: -8px; margin-bottom: 24px } @media (min-width: 641px) { .title-bg-copy__bg { height: 392px; margin: -32px -32px 0 } } @media (min-width: 1025px) { .title-bg-copy__bg { height: 318px; margin: -32px 0 0 } } .title-bg-copy__txt { margin-left: 24px; margin-right: 24px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid #000000; border-bottom: 1px solid #000000 } @media (min-width: 641px) { .title-bg-copy__txt { max-width: 480px; margin-right: auto; margin-left: auto } } @media (min-width: 1025px) { .title-bg-copy__txt { max-width: 368px; margin: 40px 0 auto } } .title-bg-copy__txt p { padding: 0; margin: 0; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .email-popup { width: 100vw; height: 100vh; position: fixed; top: 0; background: rgba(156, 156, 156, .2); padding: 92px 44px 44px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; z-index: 600 } @media (min-width: 641px) { .email-popup { padding-top: 257px } } @media (min-width: 1025px) { .email-popup { padding-top: 153px } } .email-popup__inner { background-color: #ffffff; max-width: 552px; margin: 0 auto; padding: 50px 24px 34px; position: relative } @media (min-width: 641px) { .email-popup__inner { padding: 65px 76px 48px } } @media (min-width: 1025px) { .email-popup__inner { padding: 60px 76px 40px } } .email-popup__inner .k-form__checkbox-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; margin-bottom: 22px } .email-popup__inner .k-form__checkbox-wrapper label { width: auto !important; font-family: 'Sofia Pro', sans-serif !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important } .email-popup__inner .k-form__checkbox-wrapper input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; color: inherit; width: 16px !important; height: 16px !important; min-height: 16px !important; border: 1px solid currentColor; display: block; position: relative; cursor: pointer; margin-right: 11px } .email-popup__inner .k-form__checkbox-wrapper input[type=checkbox]::before { content: url(https://d8ua7bnpmn6n9.cloudfront.net/Checkmark.png); width: 16px; height: 16px; position: absolute; top: 0; left: 0; bottom: 0; visibility: hidden; -webkit-transform: translateY(-4px) translateX(-1px); -ms-transform: translateY(-4px) translateX(-1px); transform: translateY(-4px) translateX(-1px) } .email-popup__inner .k-form__checkbox-wrapper input[type=checkbox]:checked::before { visibility: visible } .email-popup__close { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-old.svg); background-size: cover; background-repeat: no-repeat } @media (min-width: 1025px) { .email-popup__close { cursor: pointer } } .email-popup__title { font-family: "Cera Pro"; color: #000000; font-style: normal; font-weight: bold; font-size: 51.2px; font-size: 3.2rem; line-height: 64px; line-height: 4rem; text-align: center; text-transform: uppercase; margin-bottom: 24px } @media (min-width: 641px) { .email-popup__title { padding-left: 26px; padding-right: 26px; margin-bottom: 30px } } @media (min-width: 1025px) { .email-popup__title { padding-left: 30px; padding-right: 30px; margin-bottom: 30px } } .email-popup__txt { font-family: "Sofia Pro"; color: #000000; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 120%; text-align: center; margin-bottom: 24px } @media (min-width: 641px) { .email-popup__txt { font-size: 1.8rem; margin-bottom: 25px } } .email-popup form { position: relative } .email-popup .input__wrapper { max-width: 376px; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto 16px } .email-popup .input__wrapper > * { height: 28px; background-color: #ffffff; border: 1px solid #4a4a4a } @media (min-width: 641px) { .email-popup .input__wrapper > * { height: 40px } } .email-popup .input__wrapper > input { width: 60%; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-align: center; padding: 0 23px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right-color: transparent } @media (min-width: 641px) { .email-popup .input__wrapper > input { font-size: 1.4rem } } .email-popup .input__wrapper > input::-webkit-input-placeholder { color: #9c9c9c } .email-popup .input__wrapper > input:-ms-input-placeholder { color: #9c9c9c } .email-popup .input__wrapper > input::placeholder { color: #9c9c9c } .email-popup .input__wrapper > button { width: 40%; font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .email-popup .input__wrapper > button { font-size: 1.8rem } } @media (min-width: 1025px) { .email-popup .input__wrapper > button { cursor: pointer } } .email-popup .input__wrapper > button:hover { background-color: #171717; color: #ffffff } .email-popup .input__wrapper.\--error { margin-bottom: 7px } .email-popup__error-message { padding-bottom: 7px; font-family: "Sofia Pro"; font-style: normal; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; max-width: 376px; margin: 0 auto } .email-popup input.\--error { margin-bottom: 0 } .email-popup__error { display: none; color: #eb5757; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 30.4px; line-height: 1.9rem; padding: 0 16px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0 } .email-popup__policy { display: none } .email-popup__policy-label { padding-left: 2px; padding-right: 2px; margin-bottom: 12px; font-family: "Sofia Pro"; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; text-align: center; color: #000000 } .email-popup__policy-label a { margin-left: 2px; font-family: "Sofia Pro"; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; color: #000000; text-decoration: underline } .email-popup__policy-checkbox { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 12px; height: 12px; margin-right: 8px; border: 1px solid #4a4a4a; position: relative; transition: all 0.3s ease } @media (min-width: 1025px) { .email-popup__policy-checkbox { cursor: pointer } } .email-popup .\--error .email-popup__policy-checkbox { border-color: #eb5757 } .email-popup .email-popup__policy:checked + label .email-popup__policy-checkbox { border-color: #2e1a47 } .email-popup .email-popup__policy:checked + label .email-popup__policy-checkbox::after { content: ''; position: absolute; width: 12px; height: 12px; background-color: #2e1a47; background-size: cover } .email-popup__no-span { font-family: "Sofia Pro"; font-style: italic; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; text-align: center; color: #000000 } @media (min-width: 1025px) { .email-popup__no-span { cursor: pointer } } .email-popup-wrap { display: none; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-horizontal-cards { padding-top: 48px } @media (min-width: 641px) { .title-horizontal-cards { padding-left: 8px; padding-right: 8px; padding-top: 80px } } @media (min-width: 1025px) { .title-horizontal-cards { padding-right: 32px; padding-left: 32px } } .title-horizontal-cards__header { padding-left: 8px; padding-right: 8px } .title-horizontal-cards__title { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 23px } @media (min-width: 641px) { .title-horizontal-cards__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 48px } } .title-horizontal-cards__subtitle { font-family: "Sofia Pro"; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 12px } @media (min-width: 641px) { .title-horizontal-cards__subtitle { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .title-horizontal-cards__description { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 32px } @media (min-width: 641px) { .title-horizontal-cards__description { margin-bottom: 40px } } @media (min-width: 1025px) { .title-horizontal-cards__description { margin-bottom: 51px } } .title-horizontal-cards__grid { padding-left: 8px; padding-right: 8px; margin-bottom: 40px } @media (min-width: 641px) { .title-horizontal-cards__grid { margin-bottom: 48px } } @media (min-width: 1025px) { .title-horizontal-cards__grid { padding-left: 0; padding-right: 0; margin-bottom: 72px } } .title-horizontal-cards__card { font-family: "Sofia Pro"; padding-top: 24px; padding-bottom: 21px; border-bottom: 1px solid #d3d3d3 } @media (min-width: 641px) { .title-horizontal-cards__card { height: 100%; padding-bottom: 24px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } } @media (min-width: 1025px) { .title-horizontal-cards__card { padding-left: 8px; padding-right: 8px } } .title-horizontal-cards__card:first-of-type { border-top: 1px solid #d3d3d3 } .title-horizontal-cards__card-img { position: relative; height: 100%; margin-bottom: 8px } @media (min-width: 641px) { .title-horizontal-cards__card-img { width: 360px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 0; margin-right: 32px } } @media (min-width: 1025px) { .title-horizontal-cards__card-img { width: 410px; margin-right: 64px } } .title-horizontal-cards__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } .title-horizontal-cards__wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .title-horizontal-cards__wrap img { position: absolute; top: 50%; left: 50%; width: 136px; height: 23px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media (min-width: 641px) { .title-horizontal-cards__wrap img { width: 132px } } @media (min-width: 641px) { .title-horizontal-cards__wrap img { width: 170px; height: 29px } } .title-horizontal-cards__wrap-shadow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #2c2b6c; opacity: 0.35 } .title-horizontal-cards__card-body {} @media (min-width: 641px) { .title-horizontal-cards__card-body { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-height: 100% } } .title-horizontal-cards__card-title { font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 8px } @media (min-width: 641px) { .title-horizontal-cards__card-title { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 16px } } .title-horizontal-cards__card-date { font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 10px } .title-horizontal-cards__card-place { font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 16px; position: relative; padding-left: 20px } .title-horizontal-cards__card-place::after { content: ''; position: absolute; top: 0; left: 0; background-image: url("/img/map-location-pin.svg"); background-size: contain; background-repeat: no-repeat; width: 13px; height: 13px } @media (min-width: 641px) { .title-horizontal-cards__card-place { margin-bottom: 8px } } .title-horizontal-cards__card-txt { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 24px } @media (min-width: 641px) { .title-horizontal-cards__card-txt { margin-bottom: 32px } } @media (min-width: 1025px) { .title-horizontal-cards__card-txt { margin-bottom: 26px } } .title-horizontal-cards__btn-wrap {} @media (min-width: 641px) { .title-horizontal-cards__btn-wrap { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } } .title-horizontal-cards__btn { height: 43px; min-width: 182px } @media (min-width: 1025px) { .title-horizontal-cards__btn { min-width: 252px } } .title-horizontal-cards__message { padding: 16px; margin-bottom: 40px; margin-top: 24px; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; border: 1px solid #2c2b6c } @media (min-width: 641px) { .title-horizontal-cards__message { margin: 24px 8px 77px 8px; padding: 24px 30px } } @media (min-width: 1025px) { .title-horizontal-cards__message { max-width: 792px; margin-top: 52px; margin-bottom: 122px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .workshop { padding: 0 0 32px; width: 100% } @media (min-width: 1025px) { .workshop { margin-bottom: 88px } } .workshop-title { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1360px; margin: 0 32px 32px } @media (max-width: 640px) { .workshop-title { padding: 0; margin: 0 16px } } @media (min-width: 641px) { .workshop-title { padding: 0; margin: 0 16px } } @media (min-width: 1025px) { .workshop-title { margin: 0 32px } } @media (min-width: 1440px) { .workshop-title { margin: 0 auto 32px } } .workshop-title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .workshop-title h2 { font-size: 3.6rem; line-height: 110% } } @media (max-width: 640px) { .workshop-title h2 { padding: 0 } } .workshop-title a { font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; display: none } @media (min-width: 641px) { .workshop-title a { display: block } } .workshop-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 1360px; margin: 0 32px 32px; margin-bottom: 80px } @media (min-width: 641px) { .workshop-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1025px) { .workshop-text { margin: 0 32px; margin-bottom: 80px } } @media (max-width: 640px) { .workshop-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1440px) { .workshop-text { margin: 0 auto 32px; margin-bottom: 80px } } .workshop-wrap { width: 100%; position: relative; overflow: hidden; margin: 0 !important; padding-bottom: 50px; margin-bottom: 30px; outline: none } @media (min-width: 641px) { .workshop-wrap { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 72px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } } @media (min-width: 1025px) { .workshop-wrap { margin-bottom: 88px } } .workshop-wrap .flickity-viewport { overflow: visible; position: relative; height: 100% } .workshop-wrap .flickity-slider { position: absolute; width: 100%; height: 100% } .workshop-wrap .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1; display: none } @media (max-width: 640px) { .workshop-wrap .flickity-page-dots { display: block } } .workshop-wrap .flickity-rtl .flickity-page-dots { direction: rtl } .workshop-wrap .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ffffff; border-radius: 50%; cursor: pointer; border: 1px solid #171717 } .workshop-wrap .flickity-page-dots .dot.is-selected { background: #171717 } .workshop-wrap .buttons-a.btn-outline.\--gray { width: 152px; margin: 48px auto 0; font-size: 22.4px; font-size: 1.4rem } @media (min-width: 641px) { .workshop-wrap .buttons-a.btn-outline.\--gray { display: none } } .workshop-wrap .button-container-right { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); right: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .workshop-wrap .button-container-right:hover { opacity: 1 } @media (max-width: 640px) { .workshop-wrap .button-container-right { display: none } } .workshop-wrap .button-container-left { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); left: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .workshop-wrap .button-container-left:hover { opacity: 1 } @media (max-width: 640px) { .workshop-wrap .button-container-left { display: none } } .workshop-wrap .flickity-button { position: absolute; height: 66px; width: 66px; top: 16%; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } @media (max-width: 640px) { .workshop-wrap .flickity-button { box-shadow: none; right: 35px; bottom: 0; top: auto } } @media (max-width: 1024px) { .workshop-wrap .flickity-button { top: 16% } } @media (min-width: 1025px) { .workshop-wrap .flickity-button { top: 25% } } @media (min-width: 1440px) { .workshop-wrap .flickity-button { top: 24% } } .workshop-wrap .flickity-button .flickity-button-icon { width: 18px; height: 18px; position: relative } .workshop-wrap .flickity-button.next { right: 35px } .workshop-wrap .flickity-button.previous { left: 35px } .workshop .flickity-button[disabled] { display: none } .workshop-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 40%; padding: 0 2%; padding-top: 2px; height: -webkit-max-content !important; height: -moz-max-content !important; height: max-content !important } @media (max-width: 1024px) { .workshop-card { width: 42%; padding: 2px 3% 0 } } @media (max-width: 640px) { .workshop-card { width: 80%; padding: 2px 6% 0; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } } .workshop-card .live-workshops__watermark-wrap { width: 90% !important; height: auto } @media (max-width: 1024px) { .workshop-card .live-workshops__watermark-wrap { width: 86% !important } } @media (max-width: 640px) { .workshop-card .live-workshops__watermark-wrap { width: 85% !important } } .workshop-card .wistia_responsive_padding { width: 100%; height: auto } .workshop-card:first-child { margin-bottom: 41px } @media (min-width: 641px) { .workshop-card:first-child { margin-bottom: 0 } } .workshop-card img { height: 185px; object-fit: cover; margin-bottom: 8px } @media (min-width: 641px) { .workshop-card img { height: 197px } } @media (min-width: 1025px) { .workshop-card img { height: 333px } } .workshop-card h3 { margin-top: 8px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; color: #171717 } .workshop-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .workshop-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .workshop-card-text span:first-child { margin-right: 16px } .workshop-events { padding: 32px 58px 28px; max-width: 592px; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 1px solid #2c2b6c } .workshop-events p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; text-align: center; letter-spacing: 0.02em; margin-bottom: 24px; color: #000000 } .workshop-events a { text-align: center; font-size: 28.8px; font-size: 1.8rem; max-width: 370px; margin: 0 auto; color: #171717 } .workshop__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .workshop__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .workshop .\--saved.workshop__card-icon { display: none } .workshop .\--saved .\--saved.workshop__card-icon { display: block } .workshop .\--saved .\--not-saved.workshop__card-icon { display: none } .workshop .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .workshop .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .workshop .wistia_click_to_play { height: 333px !important } } .workshop .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .workshop .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .workshop .wistia_responsive_padding { height: 333px !important } } .workshop .live-workshops__watermark-wrap { position: absolute; width: 100%; height: 185px } @media (min-width: 641px) { .workshop .live-workshops__watermark-wrap { height: 197px } } @media (min-width: 1025px) { .workshop .live-workshops__watermark-wrap { height: 333px } } .workshop .live-workshops__watermark-block-off { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; padding: 26px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .7); opacity: 1; transition: all 0.3s ease; cursor: default; z-index: 2; display: none } .workshop .live-workshops__watermark-block-off .live-workshops__watermark-block-off-lock { width: 42px; height: 42px; margin-bottom: 28px; background-size: contain; background-image: url(/img/lock.svg) } .workshop .live-workshops__watermark-block-off p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: #595a5e; text-align: center; text-transform: none; max-width: 152px } .workshop .live-workshops__watermark-block-off a { color: #595a5e; cursor: pointer; text-decoration: underline } .workshop.\--looks-login-lock { } .workshop.\--looks-login-lock .wistia_responsive_wrapper span div div div { display: none !important } .workshop.\--looks-login-lock .live-workshops__watermark-block-off { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 1025px) { .workshop.\--looks-login-lock .live-workshops__watermark-block-off { opacity: 0; transition: opacity 0.3s ease } .workshop.\--looks-login-lock .live-workshops__watermark-block-off:hover { opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .product-knowledge { padding: 0; width: 100% } @media (min-width: 1025px) { .product-knowledge { margin-bottom: 88px } } .product-knowledge-title { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1360px; margin: 0 32px 32px } @media (max-width: 640px) { .product-knowledge-title { padding: 0; margin: 0 16px } } @media (min-width: 641px) { .product-knowledge-title { padding: 0; margin: 0 16px } } @media (min-width: 1025px) { .product-knowledge-title { margin: 0 32px } } @media (min-width: 1440px) { .product-knowledge-title { margin: 0 auto 32px } } .product-knowledge-title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .product-knowledge-title h2 { font-size: 3.6rem; line-height: 110% } } @media (max-width: 640px) { .product-knowledge-title h2 { padding: 0 } } .product-knowledge-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 1360px; margin: 0 32px 32px; margin-bottom: 80px } @media (min-width: 641px) { .product-knowledge-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1025px) { .product-knowledge-text { margin: 0 32px; margin-bottom: 80px } } @media (max-width: 640px) { .product-knowledge-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1440px) { .product-knowledge-text { margin: 0 auto 32px; margin-bottom: 80px } } .product-knowledge-wrap { width: 100%; position: relative; overflow: hidden; padding-bottom: 50px; outline: none; margin: 0 !important; margin-bottom: 30px } @media (min-width: 641px) { .product-knowledge-wrap { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 47px } } @media (min-width: 1025px) { .product-knowledge-wrap { margin-bottom: 40px } } .product-knowledge-wrap .flickity-viewport { overflow: visible; position: relative; height: 100% } .product-knowledge-wrap .flickity-slider { position: absolute; width: 100%; height: 100% } .product-knowledge-wrap .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1; display: none } @media (max-width: 640px) { .product-knowledge-wrap .flickity-page-dots { display: block } } .product-knowledge-wrap .flickity-rtl .flickity-page-dots { direction: rtl } .product-knowledge-wrap .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ffffff; border-radius: 50%; cursor: pointer; border: 1px solid #171717 } .product-knowledge-wrap .flickity-page-dots .dot.is-selected { background: #171717 } .product-knowledge-wrap .buttons-a.btn-outline.\--gray { width: 152px; margin: 48px auto 0; font-size: 22.4px; font-size: 1.4rem } @media (min-width: 641px) { .product-knowledge-wrap .buttons-a.btn-outline.\--gray { display: none } } .product-knowledge-wrap .button-container-right { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); right: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .product-knowledge-wrap .button-container-right:hover { opacity: 1 } @media (max-width: 640px) { .product-knowledge-wrap .button-container-right { display: none } } .product-knowledge-wrap .button-container-left { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); left: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .product-knowledge-wrap .button-container-left:hover { opacity: 1 } @media (max-width: 640px) { .product-knowledge-wrap .button-container-left { display: none } } .product-knowledge-wrap .flickity-button { position: absolute; height: 66px; width: 66px; top: 16%; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } @media (max-width: 640px) { .product-knowledge-wrap .flickity-button { box-shadow: none; right: 35px; bottom: 0; top: auto } } @media (max-width: 1024px) { .product-knowledge-wrap .flickity-button { top: 16% } } @media (min-width: 1025px) { .product-knowledge-wrap .flickity-button { top: 25% } } @media (min-width: 1440px) { .product-knowledge-wrap .flickity-button { top: 25% } } .product-knowledge-wrap .flickity-button .flickity-button-icon { width: 18px; height: 18px; position: relative } .product-knowledge-wrap .flickity-button.next { right: 35px } .product-knowledge-wrap .flickity-button.previous { left: 35px } .product-knowledge .flickity-button[disabled] { display: none } .product-knowledge-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 40%; padding: 0 2%; padding-top: 2px; height: -webkit-max-content !important; height: -moz-max-content !important; height: max-content !important } @media (max-width: 1024px) { .product-knowledge-card { width: 42%; padding: 2px 3% 0 } } @media (max-width: 640px) { .product-knowledge-card { width: 80%; padding: 2px 6% 0; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } } .product-knowledge-card .live-workshops__watermark-wrap { width: 90% !important; height: auto } @media (max-width: 1024px) { .product-knowledge-card .live-workshops__watermark-wrap { width: 86% !important } } @media (max-width: 640px) { .product-knowledge-card .live-workshops__watermark-wrap { width: 85% !important } } .product-knowledge-card .wistia_responsive_padding { width: 100%; height: auto } .product-knowledge-card:first-child { margin-bottom: 41px } @media (min-width: 641px) { .product-knowledge-card:first-child { margin-bottom: 0 } } .product-knowledge-card img { height: 185px; object-fit: cover; margin-bottom: 8px } @media (min-width: 641px) { .product-knowledge-card img { height: 197px } } @media (min-width: 1025px) { .product-knowledge-card img { height: 333px } } .product-knowledge-card h3 { margin-top: 8px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; color: #171717 } .product-knowledge-card-img { margin-bottom: 8px; position: relative } .product-knowledge-card-stub { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .9) } .product-knowledge-card-stub-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 148px } .product-knowledge-card-stub-wrap img { width: 32px; height: 42px; margin: 0 auto 28px } .product-knowledge-card-stub-wrap p { font-style: normal; text-align: center; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .product-knowledge-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .product-knowledge-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .product-knowledge-card-text span:first-child { margin-right: 16px } .product-knowledge .workshop__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .product-knowledge .workshop__card-icon img { display: block; width: 100%; height: 100% !important; object-position: center; object-fit: contain; padding: 0; margin: 0 } .product-knowledge .\--saved.workshop__card-icon { display: none } .product-knowledge .\--saved .\--saved.workshop__card-icon { display: block } .product-knowledge .\--saved .\--not-saved.workshop__card-icon { display: none } .product-knowledge .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .product-knowledge .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .product-knowledge .wistia_click_to_play { height: 333px !important } } .product-knowledge .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .product-knowledge .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .product-knowledge .wistia_responsive_padding { height: 333px !important } } .product-knowledge .live-workshops__watermark-wrap { position: absolute; width: 100%; height: 185px } @media (min-width: 641px) { .product-knowledge .live-workshops__watermark-wrap { height: 197px } } @media (min-width: 1025px) { .product-knowledge .live-workshops__watermark-wrap { height: 333px } } .product-knowledge .live-workshops__watermark-block-off { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; padding: 26px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .7); opacity: 1; transition: all 0.3s ease; cursor: default; z-index: 2; display: none } .product-knowledge .live-workshops__watermark-block-off .live-workshops__watermark-block-off-lock { width: 42px; height: 42px; margin-bottom: 28px; background-size: contain; background-image: url(/img/lock.svg) } .product-knowledge .live-workshops__watermark-block-off p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: #595a5e; text-align: center; text-transform: none; max-width: 152px } .product-knowledge .live-workshops__watermark-block-off a { color: #595a5e; cursor: pointer; text-decoration: underline } .workshop.\--looks-login-lock { } .workshop.\--looks-login-lock .wistia_responsive_wrapper span div div div { display: none !important } .workshop.\--looks-login-lock .live-workshops__watermark-block-off { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 1025px) { .workshop.\--looks-login-lock .live-workshops__watermark-block-off { opacity: 0; transition: opacity 0.3s ease } .workshop.\--looks-login-lock .live-workshops__watermark-block-off:hover { opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .education { padding: 0; width: 100% } @media (min-width: 1025px) { .education { margin-bottom: 88px } } .education-title { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1360px; margin: 0 32px 32px } @media (max-width: 640px) { .education-title { padding: 0; margin: 0 16px } } @media (min-width: 641px) { .education-title { padding: 0; margin: 0 16px } } @media (min-width: 1025px) { .education-title { margin: 0 32px } } @media (min-width: 1440px) { .education-title { margin: 0 auto 32px } } .education-title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .education-title h2 { font-size: 3.6rem; line-height: 110% } } @media (max-width: 640px) { .education-title h2 { padding: 0 } } .education-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 1360px; margin: 0 32px 32px; margin-bottom: 80px } @media (min-width: 641px) { .education-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1025px) { .education-text { margin: 0 32px; margin-bottom: 80px } } @media (max-width: 640px) { .education-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1440px) { .education-text { margin: 0 auto 32px; margin-bottom: 80px } } .education-wrap { width: 100%; position: relative; overflow: hidden; margin: 0 !important; padding-bottom: 50px; margin-bottom: 30px; outline: none } @media (min-width: 641px) { .education-wrap { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 47px } } @media (min-width: 1025px) { .education-wrap { margin-bottom: 40px } } @media (max-width: 640px) { .education-wrap { margin: 0 !important } } .education-wrap .buttons-a.btn-outline.\--gray { width: 152px; margin: 16px auto 0; font-size: 22.4px; font-size: 1.4rem } @media (min-width: 641px) { .education-wrap .buttons-a.btn-outline.\--gray { display: none } } .education-wrap .flickity-viewport { overflow: visible; position: relative; height: 100% } .education-wrap .flickity-slider { position: absolute; width: 100%; height: 100% } .education-wrap .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1; display: none } @media (max-width: 640px) { .education-wrap .flickity-page-dots { display: block } } .education-wrap .flickity-rtl .flickity-page-dots { direction: rtl } .education-wrap .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ffffff; border-radius: 50%; cursor: pointer; border: 1px solid #171717 } .education-wrap .flickity-page-dots .dot.is-selected { background: #171717 } .education-wrap .button-container-right { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); right: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .education-wrap .button-container-right:hover { opacity: 1 } @media (max-width: 640px) { .education-wrap .button-container-right { display: none } } .education-wrap .button-container-left { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); left: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .education-wrap .button-container-left:hover { opacity: 1 } @media (max-width: 640px) { .education-wrap .button-container-left { display: none } } .education-wrap .flickity-button { position: absolute; height: 66px; width: 66px; top: 16%; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } @media (max-width: 640px) { .education-wrap .flickity-button { box-shadow: none; right: 35px; bottom: 0; top: auto } } @media (max-width: 1024px) { .education-wrap .flickity-button { top: 16% } } @media (min-width: 1025px) { .education-wrap .flickity-button { top: 20% } } @media (min-width: 1440px) { .education-wrap .flickity-button { top: 28% } } .education-wrap .flickity-button .flickity-button-icon { width: 18px; height: 18px; position: relative } .education-wrap .flickity-button.next { right: 35px } .education-wrap .flickity-button.previous { left: 35px } .education .flickity-button[disabled] { display: none } .education-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 40%; padding: 0 2%; padding-top: 2px; height: -webkit-max-content !important; height: -moz-max-content !important; height: max-content !important } @media (max-width: 1024px) { .education-card { width: 42%; padding: 2px 3% 0 } } @media (max-width: 640px) { .education-card { width: 80%; padding: 2px 6% 0; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } } .education-card .live-workshops__watermark-wrap { width: 100%; height: auto } .education-card h3 { margin-top: 8px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; color: #171717 } .education-card-img { margin-bottom: 8px; position: relative } .education-card-stub { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .9) } .education-card-stub-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 148px } .education-card-stub-wrap img { width: 32px; height: 42px; margin: 0 auto 28px } .education-card-stub-wrap p { font-style: normal; text-align: center; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .education-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .education-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .education-card-text span:first-child { margin-right: 16px } .education__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .education__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .education .\--saved.education__card-icon { display: none } .education .\--saved .\--saved.education__card-icon { display: block } .education .\--saved .\--not-saved.education__card-icon { display: none } .education .live-workshops__watermark-block-off { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; padding: 26px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .7); opacity: 1; transition: all 0.3s ease; cursor: default; z-index: 2; display: none } .education .live-workshops__watermark-block-off .live-workshops__watermark-block-off-lock { width: 42px; height: 42px; margin-bottom: 28px; background-size: contain; background-image: url(/img/lock.svg) } .education .live-workshops__watermark-block-off p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: #595a5e; text-align: center; text-transform: none; max-width: 152px } .education .live-workshops__watermark-block-off a { color: #595a5e; cursor: pointer; text-decoration: underline } .education.\--looks-login-lock { } .education.\--looks-login-lock .wistia_responsive_wrapper span div div div { display: none !important } .education.\--looks-login-lock .live-workshops__watermark-block-off { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 1025px) { .education.\--looks-login-lock .live-workshops__watermark-block-off { opacity: 0; transition: opacity 0.3s ease } .education.\--looks-login-lock .live-workshops__watermark-block-off:hover { opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .live-workshops { margin-bottom: 24px } @media (min-width: 641px) { .live-workshops { margin-bottom: 77px } } @media (min-width: 1025px) { .live-workshops { margin-bottom: 122px } } .live-workshops-title { margin-bottom: 32px; font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .live-workshops-title { font-size: 3.6rem; line-height: 110%; margin-bottom: 56px } } @media (min-width: 1025px) { .live-workshops-title { margin-bottom: 48px } } .live-workshops-wrap { margin-bottom: 48px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-column-gap: 56px; grid-row-gap: 32px } @media (min-width: 641px) { .live-workshops-wrap { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); margin-bottom: 96px } } @media (min-width: 1025px) { .live-workshops-wrap { margin-bottom: 72px } } .live-workshops-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; cursor: pointer } .live-workshops-card h3 { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; margin-top: 8px; color: #171717 } .live-workshops__card-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: auto } .live-workshops-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex } .live-workshops-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .live-workshops-card-text span:first-child { margin-right: 16px } .live-workshops .buttons-a.btn-outline.\--gray { text-align: center; font-size: 28.8px; font-size: 1.8rem; max-width: 160px; margin: 0 auto; display: block } .live-workshops__pop-up-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); display: none; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 999 } .live-workshops__pop-up { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); left: 50% } @media (min-width: 641px) { .live-workshops__pop-up { width: 100% } } @media (min-width: 1025px) { .live-workshops__pop-up { max-width: 1440px } } .live-workshops .\--saved.live-workshops__card-icon { display: none } .live-workshops .\--saved .\--saved.live-workshops__card-icon { display: block } .live-workshops .\--saved .\--not-saved.live-workshops__card-icon { display: none } .live-workshops .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshops .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .live-workshops .wistia_click_to_play { height: 333px !important } } .live-workshops .wistia_responsive_padding { height: 185px !important; padding: 0 !important } @media (min-width: 641px) { .live-workshops .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .live-workshops .wistia_responsive_padding { height: 333px !important } } .live-workshops__watermark-wrap { position: relative } .live-workshops__watermark-wrap::before { display: block; content: ''; width: 100%; height: 100%; background: #2c2b6c; opacity: 0.35; position: absolute; pointer-events: none; top: 0; left: 0; z-index: 1 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-grid-cards { margin-left: 16px; margin-right: 16px } @media (min-width: 641px) { .title-grid-cards { margin-left: 144px; margin-right: 80px } } @media (min-width: 1025px) { .title-grid-cards { margin-left: 248px; margin-right: 144px } } .title-grid-cards__title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: normal; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .title-grid-cards__title { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 48px } } .title-grid-cards__cards-grid { margin-bottom: 56px } @media (min-width: 641px) { .title-grid-cards__cards-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 32px; grid-row-gap: 32px; margin-bottom: 40px } } @media (min-width: 1025px) { .title-grid-cards__cards-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 48px; grid-row-gap: 48px; margin-bottom: 64px } } .title-grid-cards__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .title-grid-cards__card:not(:last-of-type) { margin-bottom: 32px } @media (min-width: 641px) { .title-grid-cards__card:not(:last-of-type) { margin-bottom: 0 } } .title-grid-cards__card-img { height: 184px; margin-bottom: 16px; overflow: hidden } @media (min-width: 641px) { .title-grid-cards__card-img { height: 143px; margin-bottom: 8px } } @media (min-width: 1025px) { .title-grid-cards__card-img { height: 148px } } .title-grid-cards__card-img img { width: 100%; height: 100%; display: block; object-position: center; object-fit: cover } .title-grid-cards__card-title { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } .title-grid-cards__card-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .title-grid-cards__card-info span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-right: 16px } .title-grid-cards__card-icon { display: block; height: 17px; width: 14px; cursor: pointer } .title-grid-cards__card-icon img { width: 100%; height: 100%; display: block; object-position: center; object-fit: contain } .title-grid-cards .\--not-saved { display: none } .title-grid-cards .wistia_click_to_play { height: 184px !important } @media (min-width: 641px) { .title-grid-cards .wistia_click_to_play { height: 143px !important } } @media (min-width: 1025px) { .title-grid-cards .wistia_click_to_play { height: 148px !important } } .wistia_placebo_close_button { width: 34px !important; height: 34px !important; opacity: 1 !important; -webkit-transform: translate(-45px, 10px); -ms-transform: translate(-45px, 10px); transform: translate(-45px, 10px); transition: opacity 0.3s !important; outline: none !important } @media (min-width: 641px) { .wistia_placebo_close_button { -webkit-transform: translate(-50px, 10px); -ms-transform: translate(-50px, 10px); transform: translate(-50px, 10px) } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .frame-title-btn { margin-bottom: 48px } @media (min-width: 641px) { .frame-title-btn { margin-bottom: 56px } } @media (min-width: 1025px) { .frame-title-btn { margin-bottom: 100px } } .frame-title-btn__frame { border: 1px solid #000000; padding: 29px 24px 27px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .frame-title-btn__frame { padding: 61px 24px 68px; max-width: 624px; margin: 0 auto } } @media (min-width: 1025px) { .frame-title-btn__frame { padding: 57px 24px 64px; max-width: 800px } } .frame-title-btn p { max-width: 496px; text-align: center; font-size: 25.6px; font-size: 1.6rem; font-style: normal; line-height: 24px; letter-spacing: 0.02em; margin-bottom: 39px } @media (min-width: 641px) { .frame-title-btn p { max-width: 496px; margin-bottom: 29px; text-align: center; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em } } @media (min-width: 1025px) { .frame-title-btn p { max-width: 592px; text-align: center; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; margin-bottom: 36px } } .frame-title-btn__title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 57.6px; font-size: 3.6rem; line-height: 100%; text-align: center; color: #000000; margin-bottom: 24px; text-transform: capitalize } @media (min-width: 641px) { .frame-title-btn__title { font-weight: 300; font-size: 4.8rem; line-height: 110%; margin-bottom: 20px } } @media (min-width: 1025px) { .frame-title-btn__title { margin-bottom: 28px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-copy-form { padding: 56px 8px 40px } @media (min-width: 641px) { .title-copy-form { padding: 120px 48px 0; margin-bottom: -27px } } @media (min-width: 1025px) { .title-copy-form { padding: 144px 8px 88px; margin-bottom: 0 } } .title-copy-form__grid {} @media (min-width: 1025px) { .title-copy-form__grid { display: -webkit-flex; display: -ms-flexbox; display: flex } } .title-copy-form__copy-wrap {} @media (min-width: 1025px) { .title-copy-form__copy-wrap { min-width: 472px; width: 472px; margin-right: 152px } } .title-copy-form__title { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .title-copy-form__title { font-size: 3.6rem; line-height: 110%; margin-bottom: 40px } } .title-copy-form__txt { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 104px } .title-copy-form__input-wrap { padding-bottom: 32px } .title-copy-form__input { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; background-color: #ffffff; padding: 0 } .title-copy-form__user-info { margin-bottom: 31px } .title-copy-form__salon-info > .title-copy-form__input-wrap { margin-bottom: 15px } .title-copy-form__input-select-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 48px } .title-copy-form__select { margin-left: 24px; height: 43px; width: 152px; background-color: transparent; border: 1px solid #000000; text-align-last: center; position: relative; font-family: "Sofia Pro"; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100% } .title-copy-form__select::-webkit-textfield-decoration-container { opacity: 1; position: relative; z-index: 11 } @media (min-width: 641px) { .title-copy-form__select { margin-left: 78px; min-width: 162px } } @media (min-width: 1025px) { .title-copy-form__select { margin-left: 46px; cursor: pointer } } .title-copy-form__select-after { position: relative } .title-copy-form__input-select-wrap.\--mobile { display: block } .title-copy-form__input-select-wrap.\--mobile p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 32px } .title-copy-form__input-select-wrap.\--mobile .title-copy-form__select-after { display: inline-block } .title-copy-form__input-select-wrap.\--mobile .title-copy-form__select { margin-left: 0 } @media (min-width: 641px) { .title-copy-form__input-select-wrap.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex } .title-copy-form__input-select-wrap.\--mobile p { margin-bottom: 0 } .title-copy-form__input-select-wrap.\--mobile .title-copy-form__select { margin-left: 78px } } @media (min-width: 1025px) { .title-copy-form__input-select-wrap.\--mobile {} .title-copy-form__input-select-wrap.\--mobile .title-copy-form__select { margin-left: 46px } } .title-copy-form__another-info { margin-bottom: 31px } @media (min-width: 641px) { .title-copy-form__another-info { margin-bottom: 23px } } @media (min-width: 1025px) { .title-copy-form__another-info { margin-bottom: 32px } } .title-copy-form__form-row { margin-bottom: 16px } @media (min-width: 641px) { .title-copy-form__form-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } } @media (min-width: 1025px) { .title-copy-form__form-row { margin-bottom: 59px } } .title-copy-form__form-col {} @media (min-width: 641px) { .title-copy-form__form-col { width: calc(50% - 16px) } } @media (min-width: 1025px) { .title-copy-form__form-col { width: calc(50% - 24px) } } .title-copy-form__form-col-txt { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 20px } @media (min-width: 641px) { .title-copy-form__form-col-txt { margin-bottom: 17px } } @media (min-width: 1025px) { .title-copy-form__form-col-txt { margin-bottom: 23px } } .title-copy-form__file-info-wrap { display: none } .title-copy-form__file-info { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px } .title-copy-form__file-name { margin-right: 34px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; color: #000000 } .title-copy-form__file-remove { width: 8px; height: 8px; background-image: url(/img/remove-file.svg); background-image: url(/img/remove-file.svg); background-size: contain; background-repeat: no-repeat; cursor: pointer; border-color: transparent; background-color: transparent } .title-copy-form__file-input { display: none } .title-copy-form__file-label { width: 160px; height: 43px; margin-bottom: 40px } @media (min-width: 641px) { .title-copy-form__file-label { margin-bottom: 32px } } .title-copy-form__checkbox { display: none } .title-copy-form__checkbox-label { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px } @media (min-width: 641px) { .title-copy-form__checkbox-label { margin-bottom: 23px } } .title-copy-form__checkbox-marker { width: 16px; height: 16px; border: 1px solid #171717; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 8px; transition: all 0.3s ease } .title-copy-form__checkbox-marker.\--error { border: 2px solid #eb5757 } .title-copy-form__checkbox:checked + label .title-copy-form__checkbox-marker { background-color: #2e1a47 } .title-copy-form__checkbox-txt { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; color: #000000 } .title-copy-form__checkbox-txt a { text-decoration: underline } .title-copy-form .s-hidden { visibility: hidden; position: absolute } .title-copy-form .select { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 24px; height: 39px; min-width: 190px } @media (min-width: 641px) { .title-copy-form .select { margin-left: 78px; height: 43px; min-width: 200px } } @media (min-width: 1025px) { .title-copy-form .select { margin-left: 46px } } .title-copy-form .\--mobile .select { margin-left: 0 } @media (min-width: 641px) { .title-copy-form .\--mobile .select { margin-left: 78px } } @media (min-width: 1025px) { .title-copy-form .\--mobile .select { margin-left: 46px } } .title-copy-form .styledSelect { position: absolute; padding-right: 20px; top: 0; right: 0; bottom: 0; left: 0; min-width: 190px; height: 39px; font-size: 25.6px; font-size: 1.6rem; background-color: transparent; border: 1px solid #000000; font-family: "Sofia Pro"; font-weight: 300; line-height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .title-copy-form .styledSelect { height: 43px; min-width: 190px; padding-left: 10px } } .title-copy-form .styledSelect::after { content: ''; display: block; background-image: url("/img/arrow-vector-for-carry.svg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 50%; right: 9px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); width: 12px; height: 7px; z-index: -1 } .title-copy-form .styledSelect:active, .title-copy-form .styledSelect.active { background-color: transparent } .title-copy-form .options { display: none; position: absolute; top: calc(100% - 1px); right: 0; left: 0; z-index: 999; margin: 0 0; padding: 0 0; list-style: none; border: 1px solid #000000; background-color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); max-height: 133px; overflow: scroll } .title-copy-form .options::-webkit-scrollbar { height: 0; width: 6px } .title-copy-form .options::-webkit-scrollbar-track { background-color: transparent; height: 26px; border: 1px solid #000000 } .title-copy-form .options::-webkit-scrollbar-thumb { background-color: #000000; width: 26px } .title-copy-form .options li { padding: 10px 0; text-align-last: center; font-family: "Sofia Pro"; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 100% } .title-copy-form .options li:hover { background-color: rgba(168, 168, 168, .2) } .title-copy-form .ff-form-errors, .title-copy-form .ff-form-success { display: none } .title-copy-form .ff-errors { color: #eb5757; padding-top: 7px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase } .title-copy-form .title-txt-form__submit ~ .ff-errors { display: none } .title-copy-form ul.options li:first-child { display: none } .title-copy-form .\--no-scroll ul.options { overflow: hidden !important } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .cookie-popup { position: fixed; bottom: 56px; width: 100vw; z-index: 500 } @media (min-width: 641px) { .cookie-popup { bottom: 0 } } .cookie-popup__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background-color: #ffffff; padding: 24px; margin: 50px auto; width: calc(100% - 16px); box-shadow: rgba(21, 31, 109, .2) 0 16px 64px } @media (min-width: 641px) { .cookie-popup__inner { padding: 24px; margin: 96px auto } } @media (min-width: 1025px) { .cookie-popup__inner { padding: 24px 32px; margin: 64px auto; max-width: 90vw; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100% } } .cookie-popup__inner.\--initial { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } @media (max-width: 1024px) { .cookie-popup__inner.\--initial { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .cookie-popup__inner.\--selection { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: none } .cookie-popup__text { margin-bottom: 16px } @media (min-width: 1025px) { .cookie-popup__text { margin-bottom: 20px } } .cookie-popup__text p { font-family: "Sofia Pro"; color: #000000; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 125%; text-align: left } @media (min-width: 1025px) { .cookie-popup__text p { margin-right: 2.5rem } } .cookie-popup__text p a { text-decoration: revert } .cookie-popup__title { font-family: "Sofia Pro"; color: #000000; font-style: normal; font-weight: 500; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: left; text-transform: uppercase; margin-bottom: 12.8px; margin-bottom: 0.8rem } .cookie-popup__txt { font-family: "Sofia Pro"; color: #000000; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 125%; text-align: left } .cookie-popup__form { position: relative } .cookie-popup__form__inputs { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .cookie-popup__form__inputs { margin-bottom: 16px } } @media (min-width: 1025px) { .cookie-popup__form__inputs { margin-bottom: 20px } } .cookie-popup__form__inputs .consent-group-text__desc-mobile { font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 125%; margin-bottom: 32px; margin-bottom: 2rem } @media (min-width: 641px) { .cookie-popup__form__inputs .consent-group-text__desc-mobile { display: none } } .cookie-popup__form__buttons { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .cookie-popup__form__consent-group { display: -ms-grid; display: grid; -ms-grid-columns: 1em auto; grid-template-columns: 1em auto; gap: 12px; gap: 0.75rem; margin-bottom: 8px; margin-bottom: 0.5rem; -webkit-align-items: inherit; -ms-flex-align: inherit; align-items: inherit; color: #000000 } .cookie-popup__form__consent-group.\--disabled { opacity: 0.5 } .cookie-popup__form__consent-group.\--disabled + .consent-group-text__desc-mobile { opacity: 0.5 } @media (min-width: 641px) { .cookie-popup__form__consent-group { margin-bottom: 1rem } } .cookie-popup__form__consent-group input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; color: inherit; width: 24px; width: 1.5rem; height: 24px; height: 1.5rem; border: 1px solid currentColor; display: -ms-grid; display: grid; place-content: center } .cookie-popup__form__consent-group input[type="checkbox"]::before { content: "x"; width: 0.5em; height: 0.5em; visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%) } .cookie-popup__form__consent-group input[type="checkbox"]:checked::before { visibility: visible } .cookie-popup__form__consent-group .consent-group-text { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .cookie-popup__form__consent-group .consent-group-text__name { text-transform: uppercase; font-family: "Sofia Pro"; font-weight: 500; font-size: 19.2px; font-size: 1.2rem; line-height: 125%; white-space: nowrap; color: inherit } .cookie-popup__form__consent-group .consent-group-text__desc { font-family: "Sofia Pro"; margin-left: 16px; margin-left: 1rem; font-size: 19.2px; font-size: 1.2rem; line-height: 125%; color: inherit } @media (max-width: 640px) { .cookie-popup__form__consent-group .consent-group-text__desc { display: none } } .cookie-popup__form__btn { width: 240px; width: 15rem; padding: 12px 24px; font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .cookie-popup__form__btn { font-size: 1.8rem } } @media (min-width: 1025px) { .cookie-popup__form__btn { cursor: pointer } } .cookie-popup__form__btn:hover { background-color: unset; color: unset } .cookie-popup__form__btn.\--cookie-select { margin-left: 32px; margin-left: 2rem } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-txt-slider { padding: 24px 16px 48px } @media (min-width: 641px) { .img-title-txt-slider { padding: 64px 16px 0; display: -ms-grid; display: grid; -ms-grid-columns: 289px 1fr; grid-template-columns: 289px 1fr; grid-column-gap: 32px } } @media (min-width: 1025px) { .img-title-txt-slider { padding: 56px 40px 81px; -ms-grid-columns: 472px 1fr; grid-template-columns: 472px 1fr; grid-column-gap: 48px } } .img-title-txt-slider__img { height: 459px; margin-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__img { height: 400px; margin: 0 auto 40px 0; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2 } } @media (min-width: 1025px) { .img-title-txt-slider__img { height: 100%; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 4 } } .img-title-txt-slider__img img { display: block; width: 100%; height: 100%; object-fit: cover } @media (min-width: 641px) { .img-title-txt-slider__img img { object-fit: cover } } @media (min-width: 1025px) { .img-title-txt-slider__img img { height: 537px; position: -webkit-sticky; position: sticky; top: 136px } } .img-title-txt-slider__title-wrap { position: relative } @media (min-width: 641px) { .img-title-txt-slider__title-wrap { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .img-title-txt-slider__title-wrap { margin-right: 104px } } .img-title-txt-slider__title { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 16px; padding-right: 20px } @media (min-width: 641px) { .img-title-txt-slider__title { font-size: 3.6rem; line-height: 110%; padding-right: 0 } } @media (min-width: 1025px) { .img-title-txt-slider__title { padding-right: 20px } } .img-title-txt-slider__title-icon-wrap { position: absolute; right: 0; top: 0; height: 18px; width: 14px } @media (min-width: 641px) { .img-title-txt-slider__title-icon-wrap { position: static; margin-top: 16px } } @media (min-width: 1025px) { .img-title-txt-slider__title-icon-wrap { position: absolute; margin-top: 0; top: 8px; cursor: pointer } } .img-title-txt-slider__title-icon { height: 18px; width: 14px } .img-title-txt-slider__title-icon img { width: 100%; height: 100%; object-fit: contain; object-position: center } .img-title-txt-slider .\--saved { display: none } .img-title-txt-slider.\--saved .\--saved { display: block } .img-title-txt-slider.\--saved .\--not-saved { display: none } .img-title-txt-slider__description { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; margin-bottom: 48px } @media (min-width: 641px) { .img-title-txt-slider__description { margin-bottom: 0 } } @media (min-width: 1025px) { .img-title-txt-slider__description { margin-bottom: 24px } } .img-title-txt-slider__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__txt { padding-left: 64px; padding-right: 64px; padding-bottom: 79px; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } } @media (min-width: 1025px) { .img-title-txt-slider__txt { padding-left: 0; padding-bottom: 56px; -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; padding-right: 104px } } .img-title-txt-slider__txt b { font-weight: 800 } .img-title-txt-slider__txt a { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; font-weight: 400; text-decoration: underline; padding: 0 } .img-title-txt-slider__txt p { display: block; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding: 0 } .img-title-txt-slider__txt h1, .img-title-txt-slider__txt h2, .img-title-txt-slider__txt h3, .img-title-txt-slider__txt h4, .img-title-txt-slider__txt h5, .img-title-txt-slider__txt h6 { display: block; padding-left: 0; padding-right: 0 } .img-title-txt-slider__txt h3 { font-weight: 400 } .img-title-txt-slider__slider-wrap {} @media (min-width: 641px) { .img-title-txt-slider__slider-wrap { padding-left: 64px; padding-right: 64px; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } } @media (min-width: 1025px) { .img-title-txt-slider__slider-wrap { padding-left: 0; padding-right: 104px; -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3 } } .img-title-txt-slider__slider { position: relative; outline: none } .img-title-txt-slider__slider-title { border-top: 1px solid #d3d3d3; padding-top: 8px; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; margin-bottom: 56px; font-weight: 300 } @media (min-width: 641px) { .img-title-txt-slider__slider-title { margin-bottom: 64px } } @media (min-width: 1025px) { .img-title-txt-slider__slider-title { margin-bottom: 56px } } .img-title-txt-slider__card { width: calc(50% - 16px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .img-title-txt-slider__card { width: calc(50% - 24px) } } .img-title-txt-slider__card:not(:last-of-type) { margin-right: 24px } @media (min-width: 641px) { .img-title-txt-slider__card:not(:last-of-type) { margin-right: 48px } } @media (min-width: 1025px) { .img-title-txt-slider__card:not(:last-of-type) { margin-bottom: 56px } } .img-title-txt-slider__card-img-wrap { display: block; position: relative; border-radius: 8px; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px } @media (min-width: 641px) { .img-title-txt-slider__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .img-title-txt-slider__card-img-wrap { height: 365px } } .img-title-txt-slider__card-img-wrap img { width: 100%; height: 100%; object-fit: contain } .img-title-txt-slider .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .img-title-txt-slider .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } .img-title-txt-slider__card:hover {} .img-title-txt-slider__card:hover .\--first {} @media (min-width: 1025px) { .img-title-txt-slider__card:hover .\--first { opacity: 0 } } .img-title-txt-slider__card:hover .\--second {} @media (min-width: 1025px) { .img-title-txt-slider__card:hover .\--second { opacity: 1 } } .img-title-txt-slider__card-category { font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-title { font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-subtitle { font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: center; text-transform: uppercase; margin-bottom: 16px } .img-title-txt-slider__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .img-title-txt-slider__star { width: 16px; height: 16px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .img-title-txt-slider .\--black-star { background-image: url(/img/black-star.svg) } .img-title-txt-slider .flickity-viewport { overflow: hidden } .img-title-txt-slider .flickity-button.flickity-prev-next-button { position: absolute; top: 100px; right: 0; width: 12px; height: 12px; cursor: pointer; background-image: url(/img/btn-next-black.svg); background-position: center; background-repeat: no-repeat; background-size: contain; background-color: transparent; border: none } @media (min-width: 641px) { .img-title-txt-slider .flickity-button.flickity-prev-next-button { top: 176px; right: -37px } } .img-title-txt-slider .flickity-button.flickity-prev-next-button.previous { left: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } @media (min-width: 641px) { .img-title-txt-slider .flickity-button.flickity-prev-next-button.previous { left: -37px } } .img-title-txt-slider .flickity-button.flickity-prev-next-button[disabled] { opacity: 0; pointer-events: none } .change-profile-info-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: none } .change-profile-info-popup__background { background-color: rgba(0, 0, 0, .5); padding: 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100% } .change-profile-info-popup__inner { background-color: #ffffff; padding: 52px 38px } @media (min-width: 641px) { .change-profile-info-popup__inner { width: 592px; margin: 0 auto; padding: 88px } } .change-profile-info-popup__message { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; margin-bottom: 43px } @media (min-width: 641px) { .change-profile-info-popup__message { margin-bottom: 48px } } .change-profile-info-popup__button-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .change-profile-info-popup__accept-btn, .change-profile-info-popup__close-btn { width: 118px; height: 43px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .change-profile-info-popup__accept-btn, .change-profile-info-popup__close-btn { width: 160px } } .change-profile-info-popup__accept-btn { margin-right: 32px } @media (min-width: 641px) { .change-profile-info-popup__accept-btn { margin-right: 48px } } .download-section { margin: auto; width: 100%; text-align: center; background-color: #f7f7f7; margin-bottom: 50px; padding-top: 30px; padding-bottom: 30px } .download-section__header { font-weight: 300; font-family: "Chiswick Sans"; font-size: 64px; font-size: 4rem; line-height: 100%; padding: 24px 36px 11px; text-transform: capitalize; display: block; margin-bottom: 16px } .download-section__subheader { font-style: normal; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; font-weight: 700; letter-spacing: 0.02em } .download-section__description { font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .download-section__button { padding: 12px 24px !important; text-decoration: none !important; font-size: 28.8px !important; font-size: 1.8rem !important; font-weight: 400 !important; margin-top: 20px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .styling { padding: 0 0 32px; width: 100% } @media (min-width: 1025px) { .styling { margin-bottom: 88px } } .styling-title { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1360px; margin: 0 32px 32px } @media (max-width: 640px) { .styling-title { padding: 0; margin: 0 16px } } @media (min-width: 641px) { .styling-title { padding: 0; margin: 0 16px } } @media (min-width: 1025px) { .styling-title { margin: 0 32px } } @media (min-width: 1440px) { .styling-title { margin: 0 auto 32px } } .styling-title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .styling-title h2 { font-size: 3.6rem; line-height: 110% } } @media (max-width: 640px) { .styling-title h2 { padding: 0 } } .styling-title a { font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; display: none } @media (min-width: 641px) { .styling-title a { display: block } } .styling-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 1360px; margin: 0 32px 32px; margin-bottom: 80px } @media (min-width: 641px) { .styling-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1025px) { .styling-text { margin: 0 32px; margin-bottom: 80px } } @media (max-width: 640px) { .styling-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1440px) { .styling-text { margin: 0 auto 32px; margin-bottom: 80px } } .styling-wrap { width: 100%; position: relative; overflow: hidden; margin: 0 !important; padding-bottom: 50px; margin-bottom: 30px; outline: none } @media (min-width: 641px) { .styling-wrap { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 72px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } } @media (min-width: 1025px) { .styling-wrap { margin-bottom: 88px } } .styling-wrap .flickity-viewport { overflow: visible; position: relative; height: 100% } .styling-wrap .flickity-slider { position: absolute; width: 100%; height: 100% } .styling-wrap .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1; display: none } @media (max-width: 640px) { .styling-wrap .flickity-page-dots { display: block } } .styling-wrap .flickity-rtl .flickity-page-dots { direction: rtl } .styling-wrap .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ffffff; border-radius: 50%; cursor: pointer; border: 1px solid #171717 } .styling-wrap .flickity-page-dots .dot.is-selected { background: #171717 } .styling-wrap .buttons-a.btn-outline.\--gray { width: 152px; margin: 48px auto 0; font-size: 22.4px; font-size: 1.4rem } @media (min-width: 641px) { .styling-wrap .buttons-a.btn-outline.\--gray { display: none } } .styling-wrap .button-container-right { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); right: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .styling-wrap .button-container-right:hover { opacity: 1 } @media (max-width: 640px) { .styling-wrap .button-container-right { display: none } } .styling-wrap .button-container-left { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); left: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .styling-wrap .button-container-left:hover { opacity: 1 } @media (max-width: 640px) { .styling-wrap .button-container-left { display: none } } .styling-wrap .flickity-button { position: absolute; height: 66px; width: 66px; top: 16%; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } @media (max-width: 640px) { .styling-wrap .flickity-button { box-shadow: none; right: 35px; bottom: 0; top: auto } } @media (max-width: 1024px) { .styling-wrap .flickity-button { top: 16% } } @media (min-width: 1025px) { .styling-wrap .flickity-button { top: 25% } } @media (min-width: 1440px) { .styling-wrap .flickity-button { top: 24% } } .styling-wrap .flickity-button .flickity-button-icon { width: 18px; height: 18px; position: relative } .styling-wrap .flickity-button.next { right: 35px } .styling-wrap .flickity-button.previous { left: 35px } .styling .flickity-button[disabled] { display: none } .styling-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 40%; padding: 0 2%; padding-top: 2px; height: -webkit-max-content !important; height: -moz-max-content !important; height: max-content !important } @media (max-width: 1024px) { .styling-card { width: 42%; padding: 2px 3% 0 } } @media (max-width: 640px) { .styling-card { width: 80%; padding: 2px 6% 0; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } } .styling-card .live-stylings__watermark-wrap { width: 90% !important; height: auto } @media (max-width: 1024px) { .styling-card .live-stylings__watermark-wrap { width: 86% !important } } @media (max-width: 640px) { .styling-card .live-stylings__watermark-wrap { width: 85% !important } } .styling-card .wistia_responsive_padding { width: 100%; height: auto } .styling-card:first-child { margin-bottom: 41px } @media (min-width: 641px) { .styling-card:first-child { margin-bottom: 0 } } .styling-card img { height: 185px; object-fit: cover; margin-bottom: 8px } @media (min-width: 641px) { .styling-card img { height: 197px } } @media (min-width: 1025px) { .styling-card img { height: 333px } } .styling-card h3 { margin-top: 8px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; color: #171717 } .styling-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .styling-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .styling-card-text span:first-child { margin-right: 16px } .styling-events { padding: 32px 58px 28px; max-width: 592px; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 1px solid #2c2b6c } .styling-events p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; text-align: center; letter-spacing: 0.02em; margin-bottom: 24px; color: #000000 } .styling-events a { text-align: center; font-size: 28.8px; font-size: 1.8rem; max-width: 370px; margin: 0 auto; color: #171717 } .styling__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .styling__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .styling .\--saved.styling__card-icon { display: none } .styling .\--saved .\--saved.styling__card-icon { display: block } .styling .\--saved .\--not-saved.styling__card-icon { display: none } .styling .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .styling .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .styling .wistia_click_to_play { height: 333px !important } } .styling .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .styling .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .styling .wistia_responsive_padding { height: 333px !important } } .styling .live-stylings__watermark-wrap { position: absolute; width: 100%; height: 185px } @media (min-width: 641px) { .styling .live-stylings__watermark-wrap { height: 197px } } @media (min-width: 1025px) { .styling .live-stylings__watermark-wrap { height: 333px } } .styling .live-stylings__watermark-block-off { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; padding: 26px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .7); opacity: 1; transition: all 0.3s ease; cursor: default; z-index: 2; display: none } .styling .live-stylings__watermark-block-off .live-stylings__watermark-block-off-lock { width: 42px; height: 42px; margin-bottom: 28px; background-size: contain; background-image: url(/img/lock.svg) } .styling .live-stylings__watermark-block-off p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: #595a5e; text-align: center; text-transform: none; max-width: 152px } .styling .live-stylings__watermark-block-off a { color: #595a5e; cursor: pointer; text-decoration: underline } .styling.\--looks-login-lock { } .styling.\--looks-login-lock .wistia_responsive_wrapper span div div div { display: none !important } .styling.\--looks-login-lock .live-stylings__watermark-block-off { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 1025px) { .styling.\--looks-login-lock .live-stylings__watermark-block-off { opacity: 0; transition: opacity 0.3s ease } .styling.\--looks-login-lock .live-stylings__watermark-block-off:hover { opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .homepage { display: block } .homepage .small-cards-product {} .homepage .small-cards-product .small-cards-product__grid { padding-top: 48px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-column-gap: 0; grid-row-gap: 0 } .homepage .small-cards-product .small-cards-product__card { width: calc(50% - 16px); margin-bottom: 20px; margin-top: 20px; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .homepage .small-cards-product .small-cards-product__card { width: calc(25% - 24px); margin-bottom: 0; margin-top: 0 } } @media (min-width: 1025px) { .homepage .small-cards-product .small-cards-product__card { width: calc(25% - 36px) } } .homepage .\--logo-white { position: absolute; z-index: 9; top: 0; left: 0; right: 0; width: 100% } .homepage section.small-cards-product { padding-top: 4px; padding-bottom: 4px } @media (min-width: 641px) { .homepage section.small-cards-product { padding-top: 50px; padding-bottom: 50px } } @media (min-width: 1025px) { .homepage section.small-cards-product { padding-top: 78px; padding-bottom: 78px } } .homepage section.small-cards-product .small-cards-product__grid { padding-top: 0; padding-bottom: 0 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .homepage { display: block } .homepage a, .homepage a:visited, .homepage span { outline: none } .homepage * { -webkit-appearance: none !important; -webkit-focus-ring-color: none !important; -webkit-tap-highlight-color: transparent !important; outline: none !important } .homepage .small-cards-product {} .homepage .small-cards-product .small-cards-product__grid { padding-top: 48px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; grid-column-gap: 0; grid-row-gap: 0 } .homepage .small-cards-product .small-cards-product__card { width: calc(50% - 16px); margin-bottom: 20px; margin-top: 20px; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .homepage .small-cards-product .small-cards-product__card { width: calc(25% - 24px); margin-bottom: 0; margin-top: 0 } } @media (min-width: 1025px) { .homepage .small-cards-product .small-cards-product__card { width: calc(25% - 36px) } } .homepage .\--logo-white { position: absolute; z-index: 9; top: 0; left: 0; right: 0; width: 100% } .homepage section.small-cards-product { padding-top: 4px; padding-bottom: 4px } @media (min-width: 641px) { .homepage section.small-cards-product { padding-top: 50px; padding-bottom: 50px } } @media (min-width: 1025px) { .homepage section.small-cards-product { padding-top: 78px; padding-bottom: 78px } } .homepage section.small-cards-product .small-cards-product__grid { padding-top: 0; padding-bottom: 0 } .homepage.homepage-new { overflow-x: hidden } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .email-popup { width: 100vw; height: 100vh; position: fixed; top: 0; background: rgba(21, 31, 109, .2); padding: 92px 44px 44px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; z-index: 600 } @media (min-width: 641px) { .email-popup { padding-top: 257px } } @media (min-width: 1025px) { .email-popup { padding-top: 100px } } .email-popup__inner { background-color: #ffffff; max-width: 552px; margin: 0 auto; padding: 50px 24px 34px; position: relative } @media (min-width: 641px) { .email-popup__inner { padding: 65px 76px 48px } } @media (min-width: 1025px) { .email-popup__inner { padding: 60px 76px 40px } } .email-popup__close { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-old.svg); background-size: cover; background-repeat: no-repeat } @media (min-width: 1025px) { .email-popup__close { cursor: pointer } } .email-popup__title { font-family: "Cera Pro"; color: #000000; font-style: normal; font-weight: bold; font-size: 51.2px; font-size: 3.2rem; line-height: 64px; line-height: 4rem; text-align: center; text-transform: uppercase; margin-bottom: 24px } @media (min-width: 641px) { .email-popup__title { padding-left: 26px; padding-right: 26px; margin-bottom: 30px } } @media (min-width: 1025px) { .email-popup__title { padding-left: 30px; padding-right: 30px; margin-bottom: 30px } } .email-popup__txt { font-family: "Sofia Pro"; color: #000000; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 120%; text-align: center; margin-bottom: 24px } @media (min-width: 641px) { .email-popup__txt { font-size: 1.8rem; margin-bottom: 25px } } .email-popup form { position: relative } .email-popup .k-form__checkbox-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; margin-bottom: 22px } .email-popup .k-form__checkbox-wrapper label { width: auto !important; font-family: 'Sofia Pro', sans-serif !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important } .email-popup .k-form__checkbox-wrapper input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; color: inherit; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; border: 1px solid currentColor; display: block; position: relative; cursor: pointer; margin-right: 11px } .email-popup .k-form__checkbox-wrapper input[type=checkbox]::before { content: url(https://d8ua7bnpmn6n9.cloudfront.net/Checkmark.png); width: 16px; height: 16px; position: absolute; top: 0; left: 0; bottom: 0; visibility: hidden; -webkit-transform: translateY(-4px) translateX(-1px); -ms-transform: translateY(-4px) translateX(-1px); transform: translateY(-4px) translateX(-1px) } .email-popup .k-form__checkbox-wrapper input[type=checkbox]:checked::before { visibility: visible } .email-popup .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse {} .email-popup .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse::before { visibility: visible } .email-popup .k-form__checkbox-wrapper input[type=checkbox].checkbox-reverse:checked::before { visibility: hidden } .email-popup .k-form__checkbox-wrapper input[type=checkbox].\--error { border-color: #eb5757 } .email-popup .input__wrapper { max-width: 376px; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto 16px } .email-popup .input__wrapper > * { height: 28px; background-color: #ffffff; border: 1px solid #4a4a4a } @media (min-width: 641px) { .email-popup .input__wrapper > * { height: 40px } } .email-popup .input__wrapper > input { width: 60%; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-align: center; padding: 0 23px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right-color: transparent } @media (min-width: 641px) { .email-popup .input__wrapper > input { font-size: 1.4rem } } .email-popup .input__wrapper > input::-webkit-input-placeholder { color: #9c9c9c } .email-popup .input__wrapper > input:-ms-input-placeholder { color: #9c9c9c } .email-popup .input__wrapper > input::placeholder { color: #9c9c9c } .email-popup .input__wrapper > button { width: 40%; font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; transition: all 0.3s ease } @media (min-width: 641px) { .email-popup .input__wrapper > button { font-size: 1.8rem } } @media (min-width: 1025px) { .email-popup .input__wrapper > button { cursor: pointer } } .email-popup .input__wrapper > button:hover { background-color: #171717; color: #ffffff } .email-popup .input__wrapper.\--error { margin-bottom: 7px } .email-popup__error-message { padding-bottom: 7px; font-family: "Sofia Pro"; font-style: normal; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; max-width: 376px; margin: 0 auto } .email-popup input.\--error { margin-bottom: 0 } .email-popup__error { display: none; color: #eb5757; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 30.4px; line-height: 1.9rem; padding: 0 16px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0 } .email-popup__policy { display: none } .email-popup__policy-label { padding-left: 2px; padding-right: 2px; margin-bottom: 12px; font-family: "Sofia Pro"; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; text-align: center; color: #000000 } .email-popup__policy-label a { margin-left: 2px; font-family: "Sofia Pro"; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; color: #000000; text-decoration: underline } .email-popup__policy-checkbox { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 12px; height: 12px; margin-right: 8px; border: 1px solid #4a4a4a; position: relative; transition: all 0.3s ease } @media (min-width: 1025px) { .email-popup__policy-checkbox { cursor: pointer } } .email-popup .\--error .email-popup__policy-checkbox { border-color: #eb5757 } .email-popup .email-popup__policy:checked + label .email-popup__policy-checkbox { border-color: #2e1a47 } .email-popup .email-popup__policy:checked + label .email-popup__policy-checkbox::after { content: ''; position: absolute; width: 12px; height: 12px; background-color: #2e1a47; background-size: cover } .email-popup__no-span { font-family: "Sofia Pro"; font-style: italic; font-weight: 300; font-size: 16px; font-size: 1rem; line-height: 100%; text-align: center; color: #000000 } @media (min-width: 1025px) { .email-popup__no-span { cursor: pointer } } .email-popup-wrap { display: none; } .disclaimer-text { font-family: "Sofia Pro" !important; font-weight: 300 !important; font-size: 12px !important; line-height: 18px !important; letter-spacing: 0.02em; text-align: center; margin-bottom: 22px; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-btn-banner { overflow: hidden; width: 100%; padding: 80px 8px 38px 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; margin-bottom: 24px } @media (min-width: 641px) { .img-title-btn-banner { padding: 158px 0 48px; min-height: 768px; margin-bottom: 50px } } @media (min-width: 1025px) { .img-title-btn-banner { min-height: 100vh; padding: 8px 40px; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .img-title-btn-banner__banner {} .img-title-btn-banner__banner .hp-disclaimer { position: absolute; color: #ffffff; left: 24px; font-size: 16px; line-height: 105px } @media (max-width: 640px) { .img-title-btn-banner__banner .hp-disclaimer { top: 70%; bottom: auto } } @media (min-width: 641px) { .img-title-btn-banner__banner .hp-disclaimer { top: 82.5% } } @media (min-width: 1025px) { .img-title-btn-banner__banner .hp-disclaimer { bottom: 24px; top: auto } } .img-title-btn-banner picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .img-title-btn-banner picture:first-child { display: none } @media (min-width: 641px) { .img-title-btn-banner picture { display: none } .img-title-btn-banner picture:first-child { display: block } } .img-title-btn-banner__logo { position: absolute; display: none; top: 16px; left: 16px; height: 32px; width: auto; z-index: 1 } @media (min-width: 1025px) { .img-title-btn-banner__logo { display: none } } .img-title-btn-banner__logo img { object-fit: contain; height: 100%; width: auto } .img-title-btn-banner__inner { color: #171717; padding: 16px 0; position: relative; z-index: 2 } .img-title-btn-banner__inner a { margin: 24px 8px; color: #171717 } @media (min-width: 641px) { .img-title-btn-banner__inner { padding: 0 32px } } .img-title-btn-banner h1 { font-family: "Chiswick Sans"; font-weight: 300; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; padding: 8px } @media (min-width: 641px) { .img-title-btn-banner h1 { width: 100%; font-size: 4rem; font-style: italic; letter-spacing: 0.02em } } @media (min-width: 1025px) { .img-title-btn-banner h1 { max-width: 609px } } .img-title-btn-banner h2 { padding: 8px; line-height: 100%; letter-spacing: 0 } @media (min-width: 641px) { .img-title-btn-banner h2 { width: 100% } } .img-title-btn-banner__video-mob, .img-title-btn-banner__video-tab.portrait { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2 } .img-title-btn-banner__video-mob .wistia_responsive_padding, .img-title-btn-banner__video-tab.portrait .wistia_responsive_padding { padding: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; pointer-events: none } .img-title-btn-banner__video-mob video, .img-title-btn-banner__video-tab.portrait video { height: calc(100vh - 56px) !important; object-fit: cover !important; object-position: top } .img-title-btn-banner__txt-btn, .img-title-btn-banner__txt-btn-mob { position: absolute; bottom: 160px; left: 50%; display: block; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 3 } @media (min-width: 1025px) { .img-title-btn-banner__txt-btn, .img-title-btn-banner__txt-btn-mob { z-index: 2; display: block; bottom: 0; padding-bottom: 130px } } .img-title-btn-banner__txt-btn-mob {} @media (min-width: 641px) { .img-title-btn-banner__txt-btn-mob { display: none } } .img-title-btn-banner.\--video {} @media (min-width: 641px) { .img-title-btn-banner.\--video { display: block } .img-title-btn-banner.\--video .wistia_responsive_padding { padding: 0; width: 179%; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: 0; pointer-events: none } .img-title-btn-banner.\--video .img-title-btn-banner__video-desktop, .img-title-btn-banner.\--video .img-title-btn-banner__video-tab.landscape { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .img-title-btn-banner.\--video picture { display: none } .img-title-btn-banner.\--video video { min-height: 100vh !important; object-fit: cover !important; object-position: bottom } } @media (min-width: 1025px) { .img-title-btn-banner.\--video {} .img-title-btn-banner.\--video .wistia_responsive_padding { width: 100% } } @media (min-width: 1024px) and (max-width: 1300px) { .img-title-btn-banner.\--video {} .img-title-btn-banner.\--video .wistia_responsive_padding { width: 119% } } @media (min-width: 1025px) { .img-title-btn-banner {} .img-title-btn-banner .wistia_responsive_wrapper { min-height: 100vh !important } .img-title-btn-banner .wistia_embed { min-height: 100vh } .img-title-btn-banner .wistia_embed > * { min-height: 100vh } .img-title-btn-banner .wistia_embed > * > * { min-height: 100vh } } .img-title-btn-banner.\--canvas {} .img-title-btn-banner.\--canvas h1 { font-family: "Cera Pro"; font-weight: bold; font-size: 51.2px; font-size: 3.2rem; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--canvas h1 { font-size: 4rem } } .img-title-btn-banner.\--canvas h2 { font-family: "Cera Pro"; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; font-style: normal } .img-title-btn-banner.\--canvas.btn-outline.\--gray:hover { color: #ffffff } .img-title-btn-banner.\--caviar {} .img-title-btn-banner.\--caviar h1 { font-family: "Didot"; font-size: 64px; font-size: 4rem; font-style: italic; font-weight: normal } @media (min-width: 641px) { .img-title-btn-banner.\--caviar h1 { font-size: 5rem } } .img-title-btn-banner.\--caviar h2 { font-family: "Sofia Pro"; font-size: 32px; font-size: 2rem; font-weight: 300; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--caviar h2 { font-size: 2.4rem; font-family: "Sofia Pro" } } .img-title-btn-banner.\--alterna {} .img-title-btn-banner.\--alterna h1 { font-family: "Chiswick Sans"; font-weight: 400; font-size: 51.2px; font-size: 3.2rem; font-style: normal } @media (min-width: 641px) { .img-title-btn-banner.\--alterna h1 { font-size: 4rem } } .img-title-btn-banner.\--alterna h2 { font-family: "Sofia Pro"; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; font-style: normal } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } section.slider { position: relative; min-height: calc(100vh - 56px - 60px); max-height: calc(100vh - 56px - 60px); background-color: #ffffff; overflow: hidden; outline: none } @media (min-width: 641px) { section.slider { min-height: calc(100vh - 32px); height: calc(100vh - 32px); max-height: calc(100vh - 32px) } } @media (min-width: 1025px) { section.slider { min-height: 100vh; height: 100vh; max-height: 100vh } } section.slider:active, section.slider:focus, section.slider:focus-visible { outline: none } section.slider.\--iphone { min-height: calc(100vh - 56px - 80px); max-height: calc(100vh - 56px - 80px); margin-bottom: 15px } section.slider .img-title-btn-banner__inner {} section.slider .img-title-btn-banner__inner sup { font-size: 50% !important; top: -18px } @media (min-width: 641px) { section.slider .img-title-btn-banner__inner { margin-left: 40px; margin-right: 40px } } @media (min-width: 1025px) { section.slider .img-title-btn-banner__inner { margin: 0; padding: 0 } section.slider .img-title-btn-banner__inner h1, section.slider .img-title-btn-banner__inner h2 { padding-left: 0 } section.slider .img-title-btn-banner__inner a { margin-left: 0 } } section.slider .flickity-slider { outline: none } section.slider .flickity-slider:active, section.slider .flickity-slider:focus, section.slider .flickity-slider:focus-visible { outline: none } section.slider .w-chrome, section.slider .w-chrome > *, section.slider .wistia_embed_initialized { height: 100% !important } section.slider .img-title-btn-banner { position: relative; height: calc(100vh - 56px - 60px) } @media (min-width: 641px) { section.slider .img-title-btn-banner { height: 100vh } } section.slider.\--iphone .img-title-btn-banner { height: calc(100vh - 56px - 80px) } @media (min-width: 641px) { section.slider.\--iphone .img-title-btn-banner { height: 100vh } } section.slider .img-title-btn-banner__banner { position: absolute; left: 0; right: 0; top: 0; width: 100vw; height: 100% } section.slider .img-title-btn-banner__banner .hp-disclaimer { position: absolute; color: #ffffff; bottom: 24px; right: 24px; font-size: 16px; line-height: 105px } section.slider picture:first-child { display: block } section.slider .flickity-viewport { overflow: hidden; outline: none } section.slider .flickity-page-dots { position: absolute; display: -webkit-flex; display: -ms-flexbox; display: flex; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 18px; z-index: 8 } @media (min-width: 641px) { section.slider .flickity-page-dots { bottom: 28px } } @media (min-width: 1025px) { section.slider .flickity-page-dots { bottom: 42px; cursor: pointer } } section.slider .dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #171717 } @media (min-width: 641px) { section.slider .dot { width: 14px; height: 14px } } @media (min-width: 1025px) { section.slider .dot { width: 8px; height: 8px } } section.slider.\--alternative .dot { border-color: #ffffff } section.slider .dot:not(:last-child) { margin-right: 8px } section.slider .dot.is-selected { background-color: #171717 } section.slider.\--alternative .dot.is-selected { background-color: #ffffff } section.slider .flickity-button, section.slider .flickity-button:focus-visible, section.slider .flickity-button:hover, section.slider .flickity-button:focus { border-color: transparent !important } section.slider .flickity-button.flickity-prev-next-button { position: absolute; width: 20px; height: 20px; left: 50%; bottom: 12px; border: none; background-color: transparent; background-image: url(/img/sliderarrow-black.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 8 } @media (min-width: 641px) { section.slider .flickity-button.flickity-prev-next-button { width: 25px; height: 25px; bottom: 22px } } @media (min-width: 1025px) { section.slider .flickity-button.flickity-prev-next-button { background-image: url(/img/sliderarrow-black-desktop.svg); width: 12px; height: 12px; bottom: 40px; cursor: pointer } } section.slider .flickity-button.flickity-prev-next-button svg { display: none } section.slider.\--alternative .flickity-button.flickity-prev-next-button { background-image: url(/img/arrow-slider-white.svg) } section.slider .previous { -webkit-transform: translateX(-84px) rotate(180deg); -ms-transform: translateX(-84px) rotate(180deg); transform: translateX(-84px) rotate(180deg) } @media (min-width: 1025px) { section.slider .previous { -webkit-transform: translateX(-38px) rotate(180deg); -ms-transform: translateX(-38px) rotate(180deg); transform: translateX(-38px) rotate(180deg) } } section.slider .next { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px) } @media (min-width: 1025px) { section.slider .next { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px) } } section.slider .btn-outline { white-space: nowrap } section.slider.hide-indicator {} section.slider.hide-indicator .flickity-button, section.slider.hide-indicator .flickity-page-dots { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-copy-btn { padding-top: 24px; padding-bottom: 24px; overflow: hidden } @media (min-width: 641px) { .img-title-copy-btn { padding-top: 50px; padding-bottom: 50px } } .img-title-copy-btn__inner { } @media (min-width: 1025px) { .img-title-copy-btn__inner { display: -webkit-flex; display: -ms-flexbox; display: flex } } .img-title-copy-btn picture { height: 240px; width: 100%; display: block; margin: 0; overflow: hidden } @media (min-width: 641px) { .img-title-copy-btn picture { height: 66.6667vw; margin: 0 0 30px } } @media (min-width: 1025px) { .img-title-copy-btn picture { height: 100%; width: 56.875%; margin: 0; -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .img-title-copy-btn picture img { display: block; object-fit: cover } .img-title-copy-btn__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 0 8px 16px; border: 1px solid #326b6c; border-top: none; color: #326b6c } @media (min-width: 641px) { .img-title-copy-btn__content { padding: 0 40px 52px } } @media (min-width: 1025px) { .img-title-copy-btn__content { width: 43.125%; padding-right: 32px; padding-top: 64px; padding-bottom: 64px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; border: 1px solid #326b6c; border-right: none } } .img-title-copy-btn__content h2 { font-style: normal; font-weight: bold; /* font-size: 6.4rem; */ font-size: 97.6px; font-size: 6.1rem; line-height: 105%; padding: 27px 8px } @media (min-width: 641px) { .img-title-copy-btn__content h2 { padding: 22px 8px; font-size: 6.4rem } } .img-title-copy-btn__content p { font-style: normal; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } .img-title-copy-btn__copy { padding: 16px 8px } .img-title-copy-btn__copy p:first-child { padding-bottom: 4px; font-weight: 300 } .img-title-copy-btn__copy + a { box-sizing: border-box; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 16px 8px; min-width: 160px; min-height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100% } @media (min-width: 641px) { .img-title-copy-btn__copy + a { margin: 16px 8px 0 } } @media (min-width: 1025px) { .img-title-copy-btn__copy + a { margin: 7px 8px 0 } } .img-title-copy-btn a, .img-title-copy-btn a:visited, .img-title-copy-btn span { outline: none } .img-title-copy-btn__modified { } .img-title-copy-btn__modified .img-title-copy-btn__content { color: #171717; border-color: #000000 } .img-title-copy-btn__modified h2.\--bold-heading { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 76.8px; font-size: 4.8rem; line-height: 125%; text-transform: uppercase } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img-title-copy-grid { overflow: hidden; /* padding-top: 24px; padding-bottom: 24px; */ margin: auto !important } .img-title-copy-grid a, .img-title-copy-grid a:visited, .img-title-copy-grid span { outline: none } @media (min-width: 641px) { .img-title-copy-grid { /* padding-top: 50px; padding-bottom: 50px */ } } .img-title-copy-grid__inner {} @media (min-width: 641px) { .img-title-copy-grid__inner { padding-left: 40px; padding-right: 40px; position: relative } } @media (min-width: 1025px) { .img-title-copy-grid__inner { padding: 0; max-width: 785px; margin: 0 auto } } .img-title-copy-grid__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 8px; grid-row-gap: 24px; padding: 24px 0 } @media (min-width: 641px) { .img-title-copy-grid__grid { grid-row-gap: 8px } } @media (min-width: 1025px) { .img-title-copy-grid__grid { grid-row-gap: 48px; grid-column-gap: 48px } } .img-title-copy-grid__copy { padding: 16px 8px } @media (min-width: 641px) { .img-title-copy-grid__copy { font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .img-title-copy-grid__copy p { font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } } .img-title-copy-grid__copy p { font-family: "Sofia Pro"; text-align: center } .img-title-copy-grid__copy p:first-child { margin-bottom: 4px; font-weight: bold } .img-title-copy-grid__card { padding: 0 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative } .img-title-copy-grid__card h4 { display: none; font-family: "Sofia Pro" } @media (min-width: 641px) { .img-title-copy-grid__card { padding: 0; background-color: #f7f7f7; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .img-title-copy-grid__card:first-child, .img-title-copy-grid__card:last-child {} .img-title-copy-grid__card:first-child::before, .img-title-copy-grid__card:last-child::before { content: ''; width: 100%; height: 100%; display: block; position: absolute; background-color: #f7f7f7 } .img-title-copy-grid__card:first-child {} .img-title-copy-grid__card:first-child::before { top: -24px; left: -24px } .img-title-copy-grid__card:last-child {} .img-title-copy-grid__card:last-child::before { bottom: -24px; right: -24px } .img-title-copy-grid__card h4 { font-weight: 300; font-family: "Chiswick Sans"; font-size: 4rem; line-height: 100%; padding: 24px 36px 11px; text-transform: capitalize; display: block } } .img-title-copy-grid__card .img-title-copy-grid__copy { display: none; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 16px 8px } @media (min-width: 641px) { .img-title-copy-grid__card .img-title-copy-grid__copy { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 16px 40px } } .img-title-copy-grid__card picture { width: 100%; height: 100% } @media (min-width: 641px) { .img-title-copy-grid__card picture { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; z-index: 1 } } .img-title-copy-grid__card picture img { object-fit: cover } .img-title-copy-grid__card:nth-child(3) {} @media (min-width: 641px) { .img-title-copy-grid__card:nth-child(3) {} .img-title-copy-grid__card:nth-child(3) picture { display: none } } .img-title-copy-grid__card.\--copy { display: none; z-index: 2 } @media (min-width: 641px) { .img-title-copy-grid__card.\--copy { display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: calc(50% + 3px); left: 40px; width: calc(50% - 48px + 4px); height: calc(50% - 4px - 22px) } } @media (min-width: 1025px) { .img-title-copy-grid__card.\--copy { left: -1px; top: calc(50% + 23px); width: calc(50% - 22px); height: calc(50% - 46px) } } .img-title-copy-grid__card-big { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .img-title-copy-grid__card-big { display: none } } .img-title-copy-grid__card-big h4 { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; text-transform: uppercase; text-align: center; padding: 16px 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120% } .img-title-copy-grid .btn-outline { margin: 16px 8px } .eapps-instagram-feed-posts-view.eui-slider-slide { display: -ms-grid !important; display: grid !important; -ms-grid-columns: (1fr)[2] !important; grid-template-columns: repeat(2, 1fr) !important; grid-column-gap: 8px !important; grid-row-gap: 24px !important; padding: 24px 0 !important; -webkit-flex-grow: unset !important; -ms-flex-positive: unset !important; flex-grow: unset !important; -webkit-flex-shrink: unset !important; -ms-flex-negative: unset !important; flex-shrink: unset !important; overflow: visible !important } @media (min-width: 641px) { .eapps-instagram-feed-posts-view.eui-slider-slide { grid-row-gap: 8px !important } } @media (min-width: 1025px) { .eapps-instagram-feed-posts-view.eui-slider-slide { grid-row-gap: 48px !important; grid-column-gap: 48px !important } } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item { padding: 0 8px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; position: relative !important; width: 100% !important; height: 100% !important; overflow: visible !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item h4 { display: none } @media (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item { padding: 0 !important; background-color: #f7f7f7 !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child, .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child::before, .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child::before { content: '' !important; width: 100% !important; height: 100% !important; display: block !important; position: absolute !important; background-color: #f7f7f7 !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:first-child::before { top: -24px !important; left: -24px !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:last-child::before { bottom: -24px !important; right: -24px !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item h4 { font-weight: 500 !important; font-size: 4rem !important; line-height: 100% !important; padding: 24px 36px 11px !important; text-transform: capitalize !important; display: block !important } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) {} } .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item .img-title-copy-grid__copy { font-family: "Helvetica Neue"; display: none !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; padding: 16px 8px !important } @media (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item .img-title-copy-grid__copy { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; padding: 16px 40px !important } } @media (min-width: 641px) and (min-width: 641px) { .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) {} .eapps-instagram-feed-posts-item-template-tile.eapps-instagram-feed-posts-item:nth-child(3) .eapps-instagram-feed-posts-item-link { display: none !important } } .eapps-instagram-feed#eapps-instagram-feed-1, .eui-slider, .eapps-instagram-feed-container { overflow: visible !important; } .eapps-instagram-feed-posts-item-red-like-container { display: none !important; opacity: 0 !important; visibility: hidden !important; } .eapps-instagram-feed-posts-item-counters { display: none !important; } .eapps-instagram-feed-posts-item-text { margin: 0 !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .new-home-img-txt-btn-color { } .new-home-img-txt-btn-color a, .new-home-img-txt-btn-color a:visited, .new-home-img-txt-btn-color span { outline: none } .new-home-img-txt-btn-color__wrap { display: -ms-grid; display: grid; padding-top: 24px; padding-bottom: 24px } @media (min-width: 641px) { .new-home-img-txt-btn-color__wrap { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 34px; height: 360px; box-sizing: content-box } } @media (min-width: 1025px) { .new-home-img-txt-btn-color__wrap { margin-bottom: 56px; height: 608px; padding-top: 50px; padding-bottom: 50px } } .new-home-img-txt-btn-color__wrap-left { position: relative; height: 344px; overflow: hidden } @media (min-width: 641px) { .new-home-img-txt-btn-color__wrap-left { height: 100%; background-color: #f7f7f7; overflow: hidden } } .new-home-img-txt-btn-color__wrap-left picture { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100% } .new-home-img-txt-btn-color__wrap-left picture img { width: 100%; height: 100%; object-fit: cover } @media (min-width: 1025px) { .new-home-img-txt-btn-color__wrap-left picture img { min-height: 608px } } .new-home-img-txt-btn-color__wrap-left .new-home-img-title-btn-banner__video { } @media (min-width: 641px) { .new-home-img-txt-btn-color__wrap-left .new-home-img-title-btn-banner__video { position: relative; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 100% } } .new-home-img-txt-btn-color__wrap.\--video-right { } .new-home-img-txt-btn-color__wrap.\--video-right .new-home-img-txt-btn-color__wrap-left { } @media (min-width: 641px) { .new-home-img-txt-btn-color__wrap.\--video-right .new-home-img-txt-btn-color__wrap-left { -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .new-home-img-txt-btn-color__wrap-right { min-height: 320px; padding: 24px 16px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-size: cover; background-position: center; background-repeat: no-repeat } @media (min-width: 641px) { .new-home-img-txt-btn-color__wrap-right { min-height: none; padding: 45px 28px } } @media (min-width: 1025px) { .new-home-img-txt-btn-color__wrap-right { padding: 90px 79px 90px 53px } } .new-home-img-txt-btn-color__wrap-right h2 { font-family: "Chiswick Sans"; font-size: 24px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0.02em; margin-bottom: 12px } @media (min-width: 1025px) { .new-home-img-txt-btn-color__wrap-right h2 { font-size: 40px; line-height: 40px; margin-bottom: 30px } } .new-home-img-txt-btn-color__wrap-right p { font-family: "Sofia Pro"; font-size: 16px; font-style: normal; font-weight: 300; line-height: 18px; letter-spacing: 0 } .new-home-img-txt-btn-color__wrap-right.\--canvas { } .new-home-img-txt-btn-color__wrap-right.\--canvas h2 { font-family: "Cera Pro"; font-weight: bold; font-style: normal } .new-home-img-txt-btn-color__wrap-right.\--canvas p { font-family: "Cera Pro"; font-weight: 300; font-style: normal } .new-home-img-txt-btn-color__wrap-right.\--caviar { } .new-home-img-txt-btn-color__wrap-right.\--caviar h2 { font-family: "Didot"; font-style: italic; font-weight: normal } .new-home-img-txt-btn-color__wrap-right.\--caviar p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .new-home-img-txt-btn-color__wrap-right.\--alterna { } .new-home-img-txt-btn-color__wrap-right.\--alterna h2 { font-family: "Chiswick Sans"; font-weight: 300; font-style: normal } .new-home-img-txt-btn-color__wrap-right.\--alterna p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .new-home-img-txt-btn-color__wrap-right a:hover { color: #171717 !important; background-color: #ffffff !important; border-color: #171717 !important } .new-home-img-txt-btn-color__wrap-right a.\--black-hover:hover { color: #ffffff !important; background-color: #171717 !important; border-color: #171717 !important } .new-home-img-txt-btn-color__wrap-right-button { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; margin-top: 24px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .img1-txt-product-slider { } .img1-txt-product-slider a, .img1-txt-product-slider a:visited, .img1-txt-product-slider span { outline: none } .img1-txt-product-slider__wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; padding-top: 24px; padding-bottom: 24px; box-sizing: content-box; overflow: hidden } @media (min-width: 641px) { .img1-txt-product-slider__wrap { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; margin-bottom: 34px; height: 400px; padding-top: 50px; padding-bottom: 50px } } @media (min-width: 1025px) { .img1-txt-product-slider__wrap { height: 608px } } .img1-txt-product-slider__wrap.\--card-left { } .img1-txt-product-slider__wrap.\--card-left .\--order { } @media (min-width: 641px) { .img1-txt-product-slider__wrap.\--card-left .\--order { -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .img1-txt-product-slider__left { position: relative; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 250px; padding: 24px 18px 40px 12px; -webkit-order: 2; -ms-flex-order: 2; order: 2 } @media (min-width: 641px) { .img1-txt-product-slider__left { height: auto; padding: 45px 18px 40px 28px } } @media (min-width: 1025px) { .img1-txt-product-slider__left { padding: 90px 18px 40px 56px } } .img1-txt-product-slider__left picture { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1 } .img1-txt-product-slider__left picture img { object-fit: cover; height: 100% } .img1-txt-product-slider__left a:hover { color: #171717 !important; background-color: #ffffff !important; border-color: #171717 !important } .img1-txt-product-slider__left a.\--black-hover:hover { color: #ffffff !important; background-color: #171717 !important; border-color: #171717 !important } .img1-txt-product-slider__left.\--canvas { } .img1-txt-product-slider__left.\--canvas h2 { font-family: "Cera Pro"; font-weight: bold; font-style: normal } .img1-txt-product-slider__left.\--canvas p { font-family: "Cera Pro"; font-weight: 300; font-style: normal } .img1-txt-product-slider__left.\--caviar { } .img1-txt-product-slider__left.\--caviar h2 { font-family: "Didot"; font-style: italic; font-weight: normal } .img1-txt-product-slider__left.\--caviar p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .img1-txt-product-slider__left.\--alterna { } .img1-txt-product-slider__left.\--alterna h2 { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .img1-txt-product-slider__left.\--alterna p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal; max-width: 250px } @media (min-width: 1025px) { .img1-txt-product-slider__left.\--alterna p { max-width: 360px } } .img1-txt-product-slider__left.\--white { } .img1-txt-product-slider__left.\--white a { color: #ffffff; border-color: #ffffff } .img1-txt-product-slider__left.\--white a:hover { border-color: #171717 !important } .img1-txt-product-slider__left-title { font-family: "Cera Pro"; font-size: 32px; font-style: normal; font-weight: 700; line-height: 32px; letter-spacing: 0; margin-bottom: 8px } @media (min-width: 1025px) { .img1-txt-product-slider__left-title { font-size: 40px; margin-bottom: 30px } } .img1-txt-product-slider__left-subtitle { font-family: "Cera Pro"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 18px; letter-spacing: 0; margin-bottom: 24px } @media (min-width: 1025px) { .img1-txt-product-slider__left-subtitle { font-size: 24px; line-height: 24px } } .img1-txt-product-slider__left-button { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start } .img1-txt-product-slider__right { position: relative; height: 384px; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-order: 2; -ms-flex-order: 2; order: 2; outline: none !important } @media (min-width: 641px) { .img1-txt-product-slider__right { height: 400px } } @media (min-width: 1025px) { .img1-txt-product-slider__right { height: 100% } } .img1-txt-product-slider__right .bv_stars_component_container { } .img1-txt-product-slider__right .bv_stars_component_container svg > path { stroke: #171717; stroke-width: 2px; stroke-linejoin: miter; -webkit-transform: scale(0.8) !important; -ms-transform: scale(0.8) !important; transform: scale(0.8) !important } .img1-txt-product-slider__right.\--white { } .img1-txt-product-slider__right.\--white .bv_stars_component_container { } .img1-txt-product-slider__right.\--white .bv_stars_component_container svg > path { stroke: #ffffff; stroke-width: 2px; stroke-linejoin: miter } .img1-txt-product-slider__right:active, .img1-txt-product-slider__right:focus, .img1-txt-product-slider__right:focus-visible { outline: none } .img1-txt-product-slider__right.\--white p { color: #ffffff } .img1-txt-product-slider__right .flickity-slider { outline: none } .img1-txt-product-slider__right .flickity-slider:active, .img1-txt-product-slider__right .flickity-slider:focus, .img1-txt-product-slider__right .flickity-slider:focus-visible { outline: none } .img1-txt-product-slider__right .flickity-viewport { outline: none; height: 100% !important; position: relative; z-index: 1 } @media (min-width: 641px) { .img1-txt-product-slider__right .flickity-viewport { overflow: hidden } } .img1-txt-product-slider__right .flickity-page-dots { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 44px; z-index: 8 } @media (min-width: 1025px) { .img1-txt-product-slider__right .flickity-page-dots { cursor: pointer; margin: 0 13px } } .img1-txt-product-slider__right .dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #171717 } @media (min-width: 1025px) { .img1-txt-product-slider__right .dot { width: 8px; height: 8px } } .img1-txt-product-slider__right.\--white .dot { border-color: #ffffff } .img1-txt-product-slider__right .dot:not(:last-child) { margin-right: 8px } .img1-txt-product-slider__right .dot.is-selected { background-color: #171717 } .img1-txt-product-slider__right.\--white .dot.is-selected { background-color: #ffffff } .img1-txt-product-slider__right .flickity-button, .img1-txt-product-slider__right .flickity-button:focus-visible, .img1-txt-product-slider__right .flickity-button:hover, .img1-txt-product-slider__right .flickity-button:focus { border-color: transparent !important } .img1-txt-product-slider__right .flickity-button.flickity-prev-next-button { width: 11px; height: 20px; bottom: 12px; left: 50%; border: none; background-color: transparent; background-image: url(/img/sliderarrow-black.svg); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 8; padding: 0 } @media (min-width: 1025px) { .img1-txt-product-slider__right .flickity-button.flickity-prev-next-button { background-image: url(/img/sliderarrow-black-desktop.svg); width: 7px; height: 12px; bottom: 40px; cursor: pointer } } .img1-txt-product-slider__right .flickity-button.flickity-prev-next-button svg { display: none } .img1-txt-product-slider__right.\--white .flickity-button.flickity-prev-next-button { background-image: url(/img/arrow-slider-white.svg) } .img1-txt-product-slider__right .previous { -webkit-transform: translateX(0) rotate(180deg); -ms-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg) } @media (min-width: 1025px) { .img1-txt-product-slider__right .previous { -webkit-transform: translateX(0) rotate(180deg); -ms-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg) } } .img1-txt-product-slider__right .next { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } @media (min-width: 1025px) { .img1-txt-product-slider__right .next { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .img1-txt-product-slider__right .btn-outline { white-space: nowrap } .img1-txt-product-slider__right-slider-link { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 384px } @media (min-width: 641px) { .img1-txt-product-slider__right-slider-link { padding-top: 32px; height: 400px } } @media (min-width: 1025px) { .img1-txt-product-slider__right-slider-link { height: 608px; padding-top: 48px } } .img1-txt-product-slider__right-slider-link-href { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .img1-txt-product-slider__right-slider-link picture { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 160px; height: 226px; margin-bottom: -17px } @media (min-width: 641px) { .img1-txt-product-slider__right-slider-link picture { width: 120px; height: 169px; margin-bottom: 24px } } @media (min-width: 1025px) { .img1-txt-product-slider__right-slider-link picture { width: 237px; height: 333px; margin-bottom: 40px } } .img1-txt-product-slider__right-slider-link picture img { position: relative; top: -40px; object-fit: contain; background-color: #ffffff } @media (min-width: 641px) { .img1-txt-product-slider__right-slider-link picture img { position: static } } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container .bv_stars_component_container { padding: 0 !important } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container .bv_main_container_row_flex { padding: 0 !important } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container .bv_avgRating_component_container { display: none !important } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container .bv_numReviews_component_container { display: none !important } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container { padding: 0 !important } .img1-txt-product-slider__right-slider-link [data-bv-show=rating_summary] .bv_main_container .bv_stars_component_container svg { width: 16px !important; height: 16px !important } .img1-txt-product-slider__right-slider-title { font-family: "Sofia Pro"; font-size: 14px; font-style: normal; font-weight: 300; line-height: 24px; text-transform: uppercase; letter-spacing: 0; margin-bottom: 8px } .img1-txt-product-slider__right-slider-subtitle { font-family: "Sofia Pro"; font-size: 14px; text-transform: uppercase; font-style: normal; font-weight: 400; line-height: 14px; letter-spacing: 0; margin-bottom: 16px } .img1-txt-product-slider__right-slider-category { font-family: "Sofia Pro"; font-size: 14px; text-transform: uppercase; font-style: normal; font-weight: 300; line-height: 14px; letter-spacing: 0; margin-bottom: 17px } .img1-txt-product-slider__right-slider-bottom { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: auto; position: absolute; bottom: 24px; z-index: 2; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media (min-width: 1025px) { .img1-txt-product-slider__right-slider-bottom { bottom: 30px } } .img1-txt-product-slider__right-overlay { display: block; width: 100px; max-width: 33%; height: auto; position: absolute; right: 0; bottom: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 1 } @media (min-width: 641px) { .img1-txt-product-slider__right-overlay { width: 150px; bottom: 50px } } @media (min-width: 1025px) { .img1-txt-product-slider__right-overlay { width: 250px; bottom: 50px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .interactive-banner { width: 100%; padding: 160px 0 208px; padding: 10rem 0 13rem; margin: 50px 0; background-size: cover; background-position: center } .interactive-banner a, .interactive-banner a:visited, .interactive-banner span { outline: none } @media (max-width: 1024px) { .interactive-banner { padding: 5rem 0 7rem } } @media (max-width: 640px) { .interactive-banner { margin: 24px 0; padding: 5rem 0.8rem 7rem } } .interactive-banner__content { max-width: 1152px; max-width: 72rem; margin: 0 auto } @media (max-width: 1024px) { .interactive-banner__content { max-width: 56rem } } .interactive-banner__content-title { margin-bottom: 88px; margin-bottom: 5.5rem; color: #472E5F; font-family: "Cera Pro"; font-weight: bold; font-size: 64px; font-size: 4rem; line-height: 105%; text-align: center } @media (max-width: 1024px) { .interactive-banner__content-title { margin-bottom: 2rem } } @media (max-width: 640px) { .interactive-banner__content-title { font-size: 2.4rem } } .interactive-banner__content-icons { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 70%; position: relative; margin: 0 auto 80px; margin: 0 auto 5rem } @media (max-width: 1024px) { .interactive-banner__content-icons { width: 75%; margin: 0 auto 4rem } } @media (max-width: 640px) { .interactive-banner__content-icons { width: 85% } } .interactive-banner__content-icons img { max-width: 64px; max-width: 4rem; opacity: 0.5; cursor: pointer; will-change: opacity; transition: opacity 0.6s ease-in-out } .interactive-banner__content-icons img.active { opacity: 1 } .interactive-banner__content-icons img:hover { opacity: 1; transition: opacity 0.2s ease-in-out } .interactive-banner__content-indicator { width: 0; height: 0; position: absolute; bottom: -80px; bottom: -5rem; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid white; will-change: left; transition: left 1s } .interactive-banner__wrapper { height: 112px; height: 7rem } @media (max-width: 1024px) { .interactive-banner__wrapper { height: 10rem } } @media (max-width: 640px) { .interactive-banner__wrapper { height: 14rem } } .interactive-banner__text { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 90%; min-width: 1136px; min-width: 71rem; width: 100%; margin: 0 auto; padding: 38.4px; padding: 2.4rem; background-color: white; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); will-change: width; transition: width 1s; overflow: hidden } @media (max-width: 1024px) { .interactive-banner__text { padding: 1.6rem } } @media (max-width: 640px) { .interactive-banner__text { max-width: auto !important; min-width: auto !important; width: 100% !important } } .interactive-banner__text-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; font-family: "Cera Pro"; font-size: 18px; text-align: center; opacity: 1; will-change: opacity; transition: opacity 1s ease-in-out } @media (max-width: 1024px) { .interactive-banner__text-wrapper { font-size: 14px } } .interactive-banner__text-wrapper.hide { height: 0; opacity: 0 } .interactive-banner__text-wrapper-key { font-weight: 500; margin-right: 25.6px; margin-right: 1.6rem; white-space: nowrap; overflow: hidden } @media (max-width: 640px) { .interactive-banner__text-wrapper-key { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 30%; overflow: auto; white-space: unset; text-align: left } } .interactive-banner__text-wrapper-sentence { text-align: left; white-space: nowrap; overflow: hidden } @media (max-width: 1024px) { .interactive-banner__text-wrapper-sentence { white-space: unset } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .press-banner { margin: 80px 0; margin: 5rem 0; padding: 0 51.2px; padding: 0 3.2rem } .press-banner a, .press-banner a:visited, .press-banner span { outline: none } @media (max-width: 1024px) { .press-banner { padding: 0 2.4rem } } @media (max-width: 640px) { .press-banner { padding: 0 0.8rem } } .press-banner * { outline: none !important } .press-banner h2 { margin-bottom: 102.4px; margin-bottom: 6.4rem; font-family: "Chiswick Sans", sans-serif; font-size: 64px; font-size: 4rem; font-style: normal; font-weight: 400; line-height: 40px; letter-spacing: 0.02em; text-align: center } @media (max-width: 640px) { .press-banner h2 { font-size: 2.4rem; margin-bottom: 3.2rem } } .press-banner__presses { width: 100%; position: relative; padding-bottom: 112px; padding-bottom: 7rem } @media (max-width: 640px) { .press-banner__presses { padding-bottom: 5rem } } .press-banner__presses .flickity-viewport { overflow: visible; position: relative; height: 100% } .press-banner__presses .flickity-slider { position: absolute; width: 100%; height: 100% } .press-banner__presses .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1 } .press-banner__presses .flickity-rtl .flickity-page-dots { direction: rtl } .press-banner__presses .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333333; border-radius: 50%; opacity: 0.25; cursor: pointer } .press-banner__presses .flickity-page-dots .dot.is-selected { opacity: 1 } .press-banner__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 33.333%; padding: 0 2%; padding-top: 2px } @media (max-width: 1024px) { .press-banner__card { width: 48%; padding: 2px 3% 0 } } @media (max-width: 640px) { .press-banner__card { width: 95%; padding: 2px 6% 0 } } .press-banner__card-text { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; padding: 25.6px; padding: 1.6rem; font-size: 16px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } .press-banner__card-text::after { content: ""; width: 0; height: 0; position: absolute; bottom: -14px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; -webkit-filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .25)); filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .25)); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .press-banner__card-logo { padding-top: 112px; padding-top: 7rem } .press-banner__card-logo img { height: 64px; height: 4rem; width: auto } @media (max-width: 640px) { .press-banner__card-logo img { height: auto; max-height: 4rem; width: auto; max-width: 90%; display: block; margin: 0 auto } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .small-cards-product { padding-top: 24px; padding-bottom: 24px; background: #ffffff } .small-cards-product a, .small-cards-product a:visited, .small-cards-product span { outline: none } @media (min-width: 641px) { .small-cards-product { padding-top: 50px; padding-bottom: 50px } } .small-cards-product__inner h4 { text-transform: uppercase } .small-cards-product__grid { padding-top: 48px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 24px; grid-row-gap: 40px } @media (min-width: 641px) { .small-cards-product__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 32px; grid-row-gap: 56px } } @media (min-width: 1025px) { .small-cards-product__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-column-gap: 48px; grid-row-gap: 64px } } .small-cards-product h2 { padding: 24px 8px } .small-cards-product__card { overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; text-align: center; transition: all 0.3s ease } .small-cards-product__card-img-wrap { height: 200px; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .small-cards-product__card-img-wrap { height: 212px } } @media (min-width: 1025px) { .small-cards-product__card-img-wrap { height: 365px } } .small-cards-product__card-img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center } .small-cards-product__card-img { display: block; width: 100%; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .small-cards-product__card-img { height: 212px } } @media (min-width: 1025px) { .small-cards-product__card-img { height: 365px } } .small-cards-product__card-img img { width: 100%; height: 100%; object-fit: contain; object-position: center } .small-cards-product .\--first { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.3s ease } .small-cards-product .\--second { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease } @media (min-width: 1025px) { .small-cards-product {} .small-cards-product__card:hover {} .small-cards-product__card:hover .\--first { opacity: 0 } .small-cards-product__card:hover .\--second { opacity: 1 } } .small-cards-product__card-category { text-align: center; font-style: normal; text-transform: uppercase; font-weight: 300; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product__card-title { text-align: center; font-style: normal; text-transform: uppercase; font-weight: normal; font-size: 14px; line-height: 100%; margin-bottom: 16px } .small-cards-product__card-subtitle { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; text-transform: uppercase; margin-bottom: 16px } .small-cards-product .bv-main-wrap { margin-bottom: 8px } .small-cards-product__card-price { font-style: normal; font-weight: 300; font-size: 14px; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: uppercase } .small-cards-product__card-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 8px } .small-cards-product__star { width: 16px; height: 16px; background-image: url(/img/star.svg); background-size: contain; background-position: center; background-repeat: no-repeat } .small-cards-product__star.\--black-star { background-image: url(/img/black-star.svg) } .small-cards-product__star.\--half-star { background-image: url(/img/half-star.svg) } .small-cards-product__btn { position: fixed; z-index: 100; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 80px; height: 40px; text-align: center; border-radius: 20px; border: 1px solid #171717; background: #f3f2f4; cursor: pointer } .small-cards-product.\--double-img {} .small-cards-product.\--double-img .small-cards-product__grid {} @media (min-width: 641px) { .small-cards-product.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1025px) { .small-cards-product.\--double-img .small-cards-product__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } .small-cards-product.\--double-img .small-cards-product__btn { display: none } @media (max-width: 374px) { .small-cards-product.\--double-img .small-cards-product__btn { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 0; background: #ffffff; font-family: "Sofia Pro"; width: 152px; height: 43px; line-height: 40px; text-align: center; cursor: pointer } } @media (min-width: 375px) { .small-cards-product.\--double-img .small-cards-product__btn { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 0; width: 152px; height: 43px; line-height: 40px; background: #ffffff; font-family: "Sofia Pro" } } @media (min-width: 641px) { .small-cards-product.\--double-img .small-cards-product__btn { display: none } } .small-cards-product.\--double-img h4 { padding: 22px 8px; font-size: 32px } @media (min-width: 641px) { .small-cards-product.\--double-img h4 { display: none } } .small-cards-product.\--double-img .small-cards-product__card { position: relative; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } .small-cards-product.\--double-img .small-cards-product__card-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.3s ease } .small-cards-product.\--results-page {} .small-cards-product.\--results-page h4 { text-align: center } .small-cards-product.\--results-page .small-cards-product__grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr } @media (min-width: 641px) { .small-cards-product.\--results-page .small-cards-product__grid { max-width: 288px; margin: 0 auto } } @media (min-width: 1025px) { .small-cards-product.\--results-page .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); max-width: 784px; grid-column-gap: 248px } } .small-cards-product.\--results-page .small-cards-product__card-img-wrap { width: 100%; height: 460px } @media (min-width: 641px) { .small-cards-product.\--results-page .small-cards-product__card-img-wrap { height: 400px } } @media (min-width: 1025px) { .small-cards-product.\--results-page .small-cards-product__card-img-wrap { height: 365px } } @media (min-width: 1025px) { .small-cards-product { padding-top: 128px } .small-cards-product__grid { border-top: none; padding-top: 0; grid-column-gap: 48px } } .rating_summary .bv_main_container { padding: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important } .rating_summary .bv_main_container svg { width: 16px !important; height: 16px !important } .first-img { opacity: 1; transition: opacity 0.3s ease; } .second-img { opacity: 0; transition: opacity 0.3s ease; } @media (min-width: 1025px) { .small-cards-product__card:hover .first-img { opacity: 0; } .small-cards-product__card:hover .second-img { opacity: 1; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .testimonial-banner { width: 100%; min-height: 606px; height: 80vh; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 641px) { .testimonial-banner { min-height: unset; height: unset } } .testimonial-banner .background { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column-reverse; -ms-flex-flow: column-reverse; flex-flow: column-reverse; position: absolute } @media (min-width: 641px) { .testimonial-banner .background { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap } } .testimonial-banner .background .background-image { height: 50%; width: 100vw; background-size: contain; background-repeat: no-repeat } @media (min-width: 641px) { .testimonial-banner .background .background-image { height: 100%; width: 50vw } } .testimonial-banner .background .background-image__left { background-position: right bottom; background-size: contain } @media (max-width: 640px) { .testimonial-banner .background .background-image__left { height: 55% } } @media (min-width: 641px) { .testimonial-banner .background .background-image__left { background-size: 75%; width: 55vw } } @media (min-width: 1025px) { .testimonial-banner .background .background-image__left { background-size: 65%; width: 50vw } } .testimonial-banner .background .background-image__right { background-position: center right } @media (max-width: 640px) { .testimonial-banner .background .background-image__right { height: 45% } } @media (min-width: 641px) { .testimonial-banner .background .background-image__right { width: 45vw } } @media (min-width: 1025px) { .testimonial-banner .background .background-image__right { width: 50vw } } .testimonial-banner .content { position: relative; z-index: 99; width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 4%; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end } @media (min-width: 641px) { .testimonial-banner .content { padding: 0; padding-top: 7vw; padding-bottom: 6vw; margin-left: 7%; width: 45% } } @media (min-width: 1025px) { .testimonial-banner .content { padding-top: 11vw; width: 40% } } .testimonial-banner .content .header { font-family: "Sofia Pro"; font-weight: 300; margin-bottom: 17px; font-size: 51.2px; font-size: 3.2rem; letter-spacing: 0.02em; text-transform: uppercase } @media (min-width: 1025px) { .testimonial-banner .content .header { font-size: 4rem; margin-bottom: 21px } } .testimonial-banner .content .svg-stars { margin-bottom: 25px } @media (min-width: 641px) { .testimonial-banner .content .svg-stars { margin-bottom: 30px } } @media (min-width: 1025px) { .testimonial-banner .content .svg-stars { margin-bottom: 49px } } .testimonial-banner .content .svg-stars img.star { width: 28px } @media (min-width: 1025px) { .testimonial-banner .content .svg-stars img.star { width: 41px; margin-right: 5px } } .testimonial-banner .content .star-rating { margin-bottom: 25px } @media (min-width: 641px) { .testimonial-banner .content .star-rating { margin-bottom: 30px } } @media (min-width: 1025px) { .testimonial-banner .content .star-rating { margin-bottom: 49px } } .testimonial-banner .content .star-rating span { margin-right: 22px } @media (min-width: 641px) { .testimonial-banner .content .star-rating span { margin-right: 2.4rem } } .testimonial-banner .content .star-rating span::before { content: "\2605"; position: absolute; font-size: 60.8px; font-size: 3.8rem } @media (min-width: 641px) { .testimonial-banner .content .star-rating span::before { font-size: 50px } } .testimonial-banner .content .testimonials-wrapper { background: white; /* stylelint-disable */ box-shadow: 0px 1px 5px rgba(0, 0, 0, .25); /* stylelint-enable */ min-width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden } .testimonial-banner .content .testimonials-wrapper .carousel-wrapper { width: 100% } .testimonial-banner .content .testimonials-wrapper .carousel { width: 100% } .testimonial-banner .content .testimonials-wrapper .cell-wrapper { width: 100% } .testimonial-banner .content .testimonials-wrapper .testimonial-text { padding: 24px 3vw; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } @media (min-width: 641px) { .testimonial-banner .content .testimonials-wrapper .testimonial-text { padding: 32px 2.5vw } } .testimonial-banner .content .testimonials-wrapper .testimonial-text a { color: #5f5f5f; font-weight: bold } .testimonial-banner .content .testimonials-wrapper .testimonial-text a:hover { color: black } .testimonial-banner .content .btn { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 24px; margin-bottom: 24px } @media (min-width: 641px) { .testimonial-banner .content .btn { margin-bottom: 0 } } @media (min-width: 1025px) { .testimonial-banner .content .btn { margin-top: 44px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-card-grid { padding-top: 24px; padding-bottom: 24px } .title-card-grid a, .title-card-grid a:visited, .title-card-grid span { outline: none } @media (min-width: 641px) { .title-card-grid { padding-top: 50px; padding-bottom: 50px } } .title-card-grid__title-wrapper { padding: 16px 0 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 8px } .title-card-grid__title-wrapper h2 { padding-right: 24px; font-style: normal; font-weight: normal; font-size: 32px; line-height: 100%; text-transform: uppercase } @media (min-width: 641px) { .title-card-grid__title-wrapper h2 { max-width: 50% } } @media (min-width: 1025px) { .title-card-grid__title-wrapper h2 { font-size: 40px; letter-spacing: 0.02em; font-weight: 300 } } .title-card-grid__link { font-family: "Minion Pro"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 16px; position: relative; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-align: right; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } @media (min-width: 1025px) { .title-card-grid__link {} .title-card-grid__link::before { content: ""; display: block; width: 0; height: 1px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: all 0.3s ease; background: #171717 } .title-card-grid__link:hover {} .title-card-grid__link:hover::before { width: 100% } } .title-card-grid__grid { display: -ms-grid; display: grid; padding: 0; -ms-grid-columns: 1fr; grid-template-columns: 1fr; grid-row-gap: 24px } @media (min-width: 641px) { .title-card-grid__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-card-grid__grid { grid-column-gap: 48px } } .title-card-grid__card { cursor: pointer } .title-card-grid__link-wrapper { position: relative; height: 459px } @media (min-width: 641px) { .title-card-grid__link-wrapper { height: 306px } } @media (min-width: 1025px) { .title-card-grid__link-wrapper { height: 518px } } .title-card-grid__link-wrapper::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } .title-card-grid__link-wrapper:hover {} .title-card-grid__link-wrapper:hover::after { opacity: 1 } .title-card-grid__card-img-wrap { margin-bottom: 24px; height: 459px } @media (min-width: 641px) { .title-card-grid__card-img-wrap { height: 306px } } @media (min-width: 1025px) { .title-card-grid__card-img-wrap { height: 518px; position: relative } .title-card-grid__card-img-wrap::after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(88.04% 68.73% at 0% 100%, #ffffff 23.77%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: all 0.3s ease } } .title-card-grid__card-img-wrap img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block } .title-card-grid__card:hover .title-card-grid__card-img-wrap::after {} @media (min-width: 1025px) { .title-card-grid__card:hover .title-card-grid__card-img-wrap::after { opacity: 1 } } .title-card-grid__card-img { height: 459px } @media (min-width: 641px) { .title-card-grid__card-img { height: 495px } } @media (min-width: 1025px) { .title-card-grid__card-img { height: 365px } } .title-card-grid__card-img img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block } .title-card-grid__card-title.h5 { padding-top: 8px; padding-bottom: 8px; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 1025px) { .title-card-grid__card-title.h5 { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .title-card-grid__card-date { padding-top: 8px; padding-bottom: 8px; text-transform: uppercase; font-weight: 300; font-size: 22.4px; font-size: 1.4rem } .title-card-grid.\--big { width: 100% } .title-card-grid.\--big .title-card-grid__grid {} @media (min-width: 641px) { .title-card-grid.\--big .title-card-grid__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } .title-card-grid.\--big .title-card-grid__link-wrapper { height: 459px } @media (min-width: 641px) { .title-card-grid.\--big .title-card-grid__link-wrapper { height: 495px } } @media (min-width: 1025px) { .title-card-grid.\--big .title-card-grid__link-wrapper { height: 825px } } .title-card-grid .proffesional-tips-sample__title { padding-bottom: 2px; margin-bottom: 38px } @media (min-width: 1025px) { .title-card-grid .proffesional-tips-sample__title { padding-top: 8px; padding-bottom: 2px } } .title-card-grid .proffesional-tips-sample__title h2 {} @media (min-width: 641px) { .title-card-grid .proffesional-tips-sample__title h2 { padding-bottom: 8px } } @media (min-width: 1025px) { .title-card-grid .proffesional-tips-sample__title h2 { padding-bottom: 0; font-weight: 300 } } .title-card-grid .proffesional-tips-sample__title .title-card-grid__link { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 32px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-copy-btn-img { padding: 24px 16px; overflow: hidden } .title-copy-btn-img a, .title-copy-btn-img a:visited, .title-copy-btn-img span { outline: none } @media (min-width: 641px) { .title-copy-btn-img { padding: 50px 72px } } @media (min-width: 1025px) { .title-copy-btn-img { padding: 50px 180px } } .title-copy-btn-img__inner { border: 1px solid #aedad6; padding: 48px 16px } @media (min-width: 641px) { .title-copy-btn-img__inner { padding: 40px 48px } } @media (min-width: 1025px) { .title-copy-btn-img__inner { padding: 64px 48px 72px } } .title-copy-btn-img__content-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .title-copy-btn-img h2 { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 36px; line-height: 100%; text-align: center; text-transform: unset; color: #000000; margin-bottom: 24px } @media (min-width: 641px) { .title-copy-btn-img h2 { font-size: 64px; line-height: 110%; margin-bottom: 16px } } @media (min-width: 1025px) { .title-copy-btn-img h2 { font-size: 7.2rem } } .title-copy-btn-img p { font-style: normal; font-weight: 300; font-size: 18px; line-height: 120%; text-align: center; text-transform: uppercase; color: #000000; padding-bottom: 24px; margin-bottom: 24px } @media (min-width: 641px) { .title-copy-btn-img p { max-width: 576px; margin: 0 auto 16px; font-size: 2.4rem; line-height: 110% } } .title-copy-btn-img .btn-outline { font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; width: auto; height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #000000; border-color: #000000 } .title-copy-btn-img.\--where-to-buy { padding: 32px 8px 40px } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy { padding: 40px 72px 10px } } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy { padding: 64px 72px 10px } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 25.6px; font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0; letter-spacing: 0.32px; letter-spacing: 0.02rem } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0 } } @media (min-width: 1025px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__content-wrapper p { font-size: 1.6rem; text-transform: none; text-transform: initial; line-height: 150%; margin-bottom: 0 } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner { border: 1px solid #000000; padding-top: 49px; padding-bottom: 60px } @media (min-width: 1025px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner { max-width: 900px; margin: 0 auto } } .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner h2 { font-size: 38.4px; font-size: 2.4rem } @media (min-width: 641px) { .title-copy-btn-img.\--where-to-buy .title-copy-btn-img__inner h2 { margin-bottom: 24px; font-size: 4rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .new-home-video-img-banner { margin-bottom: 53px } .new-home-video-img-banner a, .new-home-video-img-banner a:visited, .new-home-video-img-banner span { outline: none } @media (min-width: 641px) { .new-home-video-img-banner { margin-bottom: 40px } } @media (min-width: 1025px) { .new-home-video-img-banner { margin-bottom: 56px } } .new-home-video-img-banner__wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .new-home-video-img-banner__wrap { height: 251px; position: relative; overflow: hidden } } @media (min-width: 1025px) { .new-home-video-img-banner__wrap { height: 405px } } .new-home-video-img-banner__background, .new-home-video-img-banner__side {} .new-home-video-img-banner__background.\--image, .new-home-video-img-banner__side.\--image { background-position: center; background-size: cover; background-repeat: no-repeat; height: 240px } @media (min-width: 641px) { .new-home-video-img-banner__background.\--image, .new-home-video-img-banner__side.\--image { background-position: left; position: relative; height: 100% } } .new-home-video-img-banner__background.\--video, .new-home-video-img-banner__side.\--video { height: 240px } @media (min-width: 641px) { .new-home-video-img-banner__background.\--video, .new-home-video-img-banner__side.\--video { position: relative; height: 100% } } .new-home-video-img-banner__side { width: 100%; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; height: 0; padding-bottom: 100% } .new-home-video-img-banner__side.\--image { background-position: center } @media (min-width: 641px) { .new-home-video-img-banner__side { width: 251px; padding-bottom: 0 } } @media (min-width: 1025px) { .new-home-video-img-banner__side { width: 405px } } .new-home-video-img-banner__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 16px 12px } @media (min-width: 641px) { .new-home-video-img-banner__content { position: absolute; top: 45px; left: 28px; max-width: 300px; padding: 0 } .new-home-video-img-banner__content.\--narrow { max-width: 196px } } @media (min-width: 1025px) { .new-home-video-img-banner__content { top: 90px; left: 56px; max-width: 500px } .new-home-video-img-banner__content.\--narrow { max-width: 300px } } @media (min-width: 1150px) { .new-home-video-img-banner__content { max-width: 600px } .new-home-video-img-banner__content.\--narrow { max-width: 300px } } .new-home-video-img-banner__content h2 { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 24px; line-height: 100%; color: #000000; margin-bottom: 8px; letter-spacing: 0.02em } @media (min-width: 1025px) { .new-home-video-img-banner__content h2 { font-size: 40px; line-height: 40px; margin-bottom: 30px } } .new-home-video-img-banner__content p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 120%; color: #000000; margin-bottom: 24px } @media (min-width: 641px) { .new-home-video-img-banner__content p { line-height: 16px; font-weight: 400; letter-spacing: 0 } } @media (min-width: 1025px) { .new-home-video-img-banner__content p { font-size: 24px; line-height: 24px } } .new-home-video-img-banner__content a:hover { color: #171717 !important; background-color: #ffffff !important; border-color: #171717 !important } .new-home-video-img-banner__content a.\--black-hover:hover { color: #ffffff !important; background-color: #171717 !important; border-color: #171717 !important } .new-home-video-img-banner__content.\--canvas {} .new-home-video-img-banner__content.\--canvas h2 { font-family: "Cera Pro"; font-weight: 300; font-style: normal } .new-home-video-img-banner__content.\--canvas p { font-family: "Cera Pro"; font-weight: 300; font-style: normal } .new-home-video-img-banner__content.\--caviar {} .new-home-video-img-banner__content.\--caviar h2 { font-family: "Didot"; font-style: italic; font-weight: normal } .new-home-video-img-banner__content.\--caviar p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .new-home-video-img-banner__content.\--alterna {} .new-home-video-img-banner__content.\--alterna h2 { font-family: "Chiswick Sans"; font-weight: 400; font-style: normal } .new-home-video-img-banner__content.\--alterna p { font-family: "Sofia Pro"; font-weight: 300; font-style: normal } .new-home-video-img-banner__buttons { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .new-home-video-img-banner__buttons img { margin-left: 32px; margin-left: 2rem; height: 48px; height: 3rem; width: auto; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } @media (min-width: 1025px) { .new-home-video-img-banner__buttons img { margin-left: 3rem; height: 4rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .style-guide { padding: 48px 0 0 } @media (min-width: 641px) { .style-guide { padding-top: 64px } } @media (min-width: 1025px) { .style-guide { padding-top: 80px } } .style-guide .container { padding-right: 16px; padding-left: 16px; margin: 0 auto } @media (min-width: 1025px) { .style-guide .container { padding-right: 32px; padding-left: 32px; max-width: 1440px } } .style-guide__subtitle { margin-bottom: 60px } .style-guide__subtitle a { text-decoration: underline } .style-guide__title { font-size: 51.2px; font-size: 3.2rem; margin-bottom: 48px } @media (min-width: 641px) { .style-guide__title { font-size: 4rem; margin-bottom: 40px } } @media (min-width: 1025px) { .style-guide__title { margin-bottom: 0; padding-bottom: 35px } } .style-guide .title-txt-grid-cards__btn { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; width: auto } .style-guide .title-txt-grid-cards__btn:last-of-type { margin-right: 0 } .style-guide .title-txt-grid-cards__btn:not(:last-of-type) { margin-right: 15px } @media (min-width: 641px) { .style-guide .title-txt-grid-cards__btn:not(:last-of-type) { margin-right: 16px } } .style-guide__pages { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 48px; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative } @media (min-width: 641px) { .style-guide__pages { margin-bottom: 43px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } } @media (min-width: 1025px) { .style-guide__pages { margin-bottom: 51px } } .style-guide__pages::after { display: none; content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: #a8a8a8 } .style-guide__pages-name { width: 176px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; cursor: pointer; color: #a8a8a8; font-size: 25.6px; font-size: 1.6rem; transition: color 0.3s; line-height: 38.4px; line-height: 2.4rem } .style-guide__pages-name::after { display: block; content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; transition: background-color 0.3s; background-color: #a8a8a8 } .style-guide__pages-name.\--active { color: #000000 } .style-guide__pages-name.\--active::after { background-color: #000000; z-index: 10 } .style-guide__pages-name:not(:last-child) { margin-right: 32px } .style-guide__color-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); margin-bottom: 24px } @media (min-width: 641px) { .style-guide__color-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } .style-guide__color-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 24px } @media (min-width: 641px) { .style-guide__color-wrap { margin-bottom: 48px } } .style-guide__color-circle { width: 72px; height: 72px; margin-right: 32px; border-radius: 50% } .style-guide__color-text { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 1025px) { .style-guide__color-text { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset } } .style-guide__color-text .\--span-first { display: block; font-size: 14px; line-height: 167.5%; text-transform: uppercase; width: 107px } .style-guide__color-text.\--opacity { width: 69% } @media (min-width: 1025px) { .style-guide__color-text.\--opacity { width: 100% } } .style-guide__color-text .\--span-second { display: block; font-size: 14px; line-height: 167.5%; text-transform: uppercase; width: 128px } .style-guide__font-info { padding-top: 24px; padding-bottom: 24px; display: inline-block; width: 100% } @media (min-width: 641px) { .style-guide__font-info { max-width: 300px } } .style-guide__font-title { min-width: 104px; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; margin-bottom: 24px; font-weight: 300; text-transform: uppercase } @media (min-width: 641px) { .style-guide__font-title { margin-bottom: 0; font-weight: 400; min-width: 100px; width: 100px } } .style-guide__font-card {} .style-guide__font-card:not(:nth-child(2n)) {} @media (min-width: 641px) { .style-guide__font-card:not(:nth-child(2n)) { padding-right: 10px } } @media (min-width: 1025px) { .style-guide__font-card:not(:nth-child(2n)) { padding-right: 65px } } @media (min-width: 641px) { .style-guide__font-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } } .style-guide__font-card:not(.\--has-flag) {} @media (min-width: 641px) { .style-guide__font-card:not(.\--has-flag) { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: 275px; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .style-guide__font-card:not(.\--has-flag).\--big-text-card {} .style-guide__font-card:not(.\--has-flag) .\--big-text.\--mobile {} } .style-guide__font-card:not(.\--has-flag) .style-guide__font-title { -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } @media (min-width: 641px) and (min-width: 641px) { .style-guide__font-card:not(.\--has-flag).\--big-text-card { min-width: 235px } } @media (min-width: 641px) and (min-width: 641px) { .style-guide__font-card:not(.\--has-flag) .\--big-text.\--mobile { max-width: 220px } } @media (min-width: 641px) and (min-width: 1025px) { .style-guide__font-card:not(.\--has-flag) .\--big-text.\--mobile { max-width: 100% } } .style-guide__font-card.\--has-flag {} @media (min-width: 641px) { .style-guide__font-card.\--has-flag { min-width: 250px; max-width: 470px } } @media (min-width: 1025px) { .style-guide__font-card.\--has-flag { min-width: 350px; max-width: 515px } } .style-guide__font-card.\--has-flag .style-guide__font-info {} @media (min-width: 641px) { .style-guide__font-card.\--has-flag .style-guide__font-info { padding-left: 100px } } .style-guide__font-card.\--has-flag.\--big-text-card { max-width: 500px } @media (min-width: 641px) { .style-guide__font-card.\--has-flag.\--big-text-card { max-width: 461px } } @media (min-width: 1025px) { .style-guide__font-card.\--has-flag.\--big-text-card { max-width: 832px } } .style-guide__font-card.\--has-flag.\--big-text-card .style-guide__font-title {} @media (min-width: 641px) { .style-guide__font-card.\--has-flag.\--big-text-card .style-guide__font-title { width: 100px } } .style-guide__font-card.\--has-flag.\--big-text-card .style-guide__font-info {} @media (min-width: 641px) { .style-guide__font-card.\--has-flag.\--big-text-card .style-guide__font-info { padding-left: 100px } } .style-guide__font-card.\--half-width { width: 50% } @media (min-width: 641px) { .style-guide__font-card.\--half-width { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; max-width: 361px } .style-guide__font-card.\--half-width .style-guide__font-title { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; width: 100px } .style-guide__font-card.\--half-width .style-guide__font-info { padding-left: 100px } } @media (min-width: 1025px) { .style-guide__font-card.\--half-width { max-width: 416px } } .style-guide__wrap-title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px } @media (min-width: 641px) { .style-guide__wrap-title { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 48px } } .style-guide__wrap-title.\--flexible-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .style-guide__wrap-title h2 {} .style-guide__wrap-title h2.\--desktop { font-style: normal; font-weight: 300; font-size: 40px; line-height: 100% } .style-guide__wrap-title h2.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title h2.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } } @media (min-width: 1025px) { .style-guide__wrap-title h2.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } } .style-guide__wrap-title h2.\--didot {} .style-guide__wrap-title h2.\--didot.\--desktop { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 64px; line-height: 120%; width: 299px } @media (min-width: 641px) { .style-guide__wrap-title h2.\--didot.\--desktop { width: 220px } } @media (min-width: 641px) { .style-guide__wrap-title h2.\--didot.\--desktop { width: auto } } .style-guide__wrap-title h2.\--didot.\--mobile { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 48px; line-height: 125% } @media (min-width: 641px) { .style-guide__wrap-title h2.\--didot.\--mobile { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 48px; line-height: 125%; width: 302px } } .style-guide__wrap-title h2.\--cera {} .style-guide__wrap-title h2.\--cera.\--desktop { font-family: "Cera Pro"; font-weight: bold; font-size: 64px; line-height: 105% } @media (min-width: 641px) { .style-guide__wrap-title h2.\--cera.\--desktop { max-width: 320px } } @media (min-width: 1025px) { .style-guide__wrap-title h2.\--cera.\--desktop { max-width: 450px } } .style-guide__wrap-title h2.\--cera.\--mobile { font-family: "Cera Pro"; font-weight: bold; font-size: 32px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title h2.\--cera.\--mobile { font-weight: bold; font-size: 32px; line-height: 100% } } .style-guide__wrap-title h3 {} .style-guide__wrap-title h3.\--desktop { font-style: normal; font-weight: 300; font-size: 40px; line-height: 110% } .style-guide__wrap-title h3.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title h3.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } } @media (min-width: 1025px) { .style-guide__wrap-title h3.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 100% } } .style-guide__wrap-title h3.\--didot-small {} .style-guide__wrap-title h3.\--didot-small.\--desktop { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 40px; line-height: 100%; letter-spacing: 0.02em } .style-guide__wrap-title h3.\--didot-small.\--mobile { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 24px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title h3.\--didot-small.\--mobile { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 24px; line-height: 100% } } .style-guide__wrap-title h3.\--cera-small {} .style-guide__wrap-title h3.\--cera-small.\--desktop { font-family: "Cera Pro"; font-weight: bold; font-size: 40px; line-height: 100%; letter-spacing: 0.02em } .style-guide__wrap-title h3.\--cera-small.\--mobile { font-family: "Cera Pro"; font-weight: bold; font-size: 24px; line-height: 100% } @media (min-width: 1025px) { .style-guide__wrap-title h3.\--cera-small.\--mobile { font-weight: bold; font-size: 24px; line-height: 100% } } .style-guide__wrap-title h4 {} .style-guide__wrap-title h4.\--desktop { text-transform: uppercase; font-weight: 300; font-size: 24px; line-height: 110% } .style-guide__wrap-title h4.\--mobile { font-weight: 300; font-size: 18px; line-height: 110%; text-transform: uppercase } @media (min-width: 641px) { .style-guide__wrap-title h4.\--mobile { font-weight: 300; font-size: 18px; line-height: 110% } } @media (min-width: 1025px) { .style-guide__wrap-title h4.\--mobile { font-weight: 300; font-size: 18px; line-height: 110% } } .style-guide__wrap-title p {} .style-guide__wrap-title p.\--desktop { font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } @media (min-width: 641px) { .style-guide__wrap-title p.\--desktop { font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } } .style-guide__wrap-title a {} .style-guide__wrap-title a.\--demostrative-link-1 { font-family: "Minion Pro"; font-weight: normal; font-size: 14px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title a.\--demostrative-link-1 { font-family: "Minion Pro"; font-weight: normal; font-size: 14px; line-height: 100% } } .style-guide__wrap-title a.\--demostrative-link-2 { font-weight: normal; font-size: 12px; line-height: 100% } @media (min-width: 641px) { .style-guide__wrap-title a.\--demostrative-link-2 { font-weight: normal; font-size: 12px; line-height: 100% } } .style-guide__wrap-title .\--big-text {} .style-guide__wrap-title .\--big-text.\--desktop { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 72px; line-height: 111% } @media (min-width: 641px) { .style-guide__wrap-title .\--big-text.\--desktop { max-width: 332px } } @media (min-width: 1025px) { .style-guide__wrap-title .\--big-text.\--desktop { max-width: 450px } } .style-guide__wrap-title .\--big-text.\--mobile { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 32px; line-height: 111% } @media (min-width: 641px) { .style-guide__wrap-title .\--big-text.\--mobile { font-style: normal; font-weight: 300; font-size: 32px; line-height: 111% } } .style-guide__wrap-title.\--quadro {} .style-guide__wrap-title.\--quadro .style-guide__font-card:not(.\--has-flag) {} @media (min-width: 641px) { .style-guide__wrap-title.\--quadro .style-guide__font-card:not(.\--has-flag) { min-width: 302px } } .style-guide__wrap-title.\--quadro .style-guide__font-card.\--has-flag {} @media (min-width: 1025px) { .style-guide__wrap-title.\--quadro .style-guide__font-card.\--has-flag { max-width: 612px } } .style-guide .alterna {} .style-guide .alterna .style-guide__color-circle.\--first { background-color: #2e1a47 } .style-guide .alterna .style-guide__color-circle.\--second { background-color: #000000 } .style-guide .alterna .style-guide__color-circle.\--third { background-color: #ffffff; border: 1px solid #000000 } .style-guide .anti-aging { display: none } .style-guide .anti-aging .style-guide__color-circle.\--first { background-color: #9569be } .style-guide .anti-aging .style-guide__color-circle.\--second { background-color: #2e1a47 } .style-guide .anti-aging .style-guide__color-circle.\--third { background-color: #8c4799 } .style-guide .anti-aging .style-guide__color-circle.\--fourth { background-color: #838dc8 } .style-guide .anti-aging .style-guide__color-circle.\--fifth { background-color: #d48bc8 } .style-guide .anti-aging .style-guide__color-circle.\--sixth { background-color: #512a44 } .style-guide .canvas { display: none } .style-guide .canvas .style-guide__color-circle.\--first { background-color: #43797b } .style-guide .canvas .style-guide__color-circle.\--second { background-color: #b7dfdc } .style-guide .canvas .style-guide__color-circle.\--third { background-color: #d9eeec } .style-guide .canvas .style-guide__color-circle.\--fourth { background-color: #f7a9a1 } .style-guide .canvas .style-guide__color-circle.\--fifth { background-color: #9b4755 } .style-guide .canvas .style-guide__color-circle.\--sixth { background-color: #fbd4db } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .lifestyle { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr } .lifestyle .title-card-grid .title-card-grid__title-wrapper h2 { font-style: normal; font-weight: normal; font-size: 32px; line-height: 100% } @media (min-width: 1025px) { .lifestyle .title-card-grid .title-card-grid__title-wrapper h2 { font-weight: 300; font-size: 36px; line-height: 100%; letter-spacing: 0.02em } } .lifestyle .card-slider__link { font-family: "Minion Pro" } .lifestyle .img-title-copy-grid {} @media (min-width: 641px) { .lifestyle .img-title-copy-grid { display: none } } .lifestyle .filter-component__inner {} @media (min-width: 641px) { .lifestyle .filter-component__inner { margin-top: 24px } } @media (min-width: 1025px) { .lifestyle .filter-component__inner { margin-top: 32px } } .lifestyle__pagination { padding-top: 56px; border-top: 1px solid #777777; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 80px; margin: 0 16px } @media (min-width: 641px) { .lifestyle__pagination { padding-top: 8px; padding-left: 0; padding-right: 0; width: calc(50% - 32px); margin-left: auto } } @media (min-width: 1025px) { .lifestyle__pagination { margin-right: 50px; width: calc(50% - 74px) } } .lifestyle__button { background: transparent; border: none; outline: none; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0; min-width: 160px } @media (min-width: 641px) { .lifestyle__button { min-width: unset } } .lifestyle__button:active, .lifestyle__button:focus { outline: none } .lifestyle__button img { width: 24px; height: 24px; margin-bottom: 8px } @media (min-width: 641px) { .lifestyle__button img { display: none } } .lifestyle__button span { font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: uppercase; padding: 8px } @media (min-width: 641px) { .lifestyle__button span { text-transform: none; padding: 0 } } .lifestyle__button .\--from-tablet { display: none } @media (min-width: 641px) { .lifestyle__button .\--from-tablet { display: inline } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .products-listing { } .products-listing__wrapper { margin-top: 32px } @media (min-width: 641px) { .products-listing__wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 280px 1fr; grid-template-columns: 280px 1fr; grid-column-gap: 40px; padding-left: 8px; padding-right: 72px } } @media (min-width: 1025px) { .products-listing__wrapper { padding-left: 32px; padding-right: 32px } } .products-listing .filter-component { } @media (min-width: 641px) { .products-listing .filter-component { -ms-grid-columns: 1fr; grid-template-columns: 1fr } .products-listing .filter-component .filter-component__heading { max-width: 142px } } .products-listing a.small-cards-product__card { } @media (min-width: 1025px) { .products-listing a.small-cards-product__card { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .products-listing a.small-cards-product__card .mobile_products_slider { outline: none !important } .products-listing a.small-cards-product__card .mobile_products_slider picture { position: relative; left: auto; top: auto; height: 200px; width: 100% } .products-listing .\--double-img { width: 100%; padding-top: 24px } @media (max-width: 374px) { .products-listing .\--double-img { padding-top: 0; width: 100% } } @media (min-width: 375px) { .products-listing .\--double-img { padding-top: 0 } } @media (min-width: 641px) { .products-listing .\--double-img { padding-top: 24px } } .products-listing .small-cards-product__inner.container.\--small { } @media (min-width: 1025px) { .products-listing .small-cards-product__inner.container.\--small { padding-left: 0; padding-right: 8px } } .products-listing .seo-content { width: 100%; padding: 0 32px; margin: 64px auto 0; text-align: center; max-width: 1024px } @media (max-width: 1024px) { .products-listing .seo-content { padding: 0 16px; max-width: 720px } } @media (max-width: 640px) { .products-listing .seo-content { margin: 32px auto } } .products-listing .seo-content h1 { font-size: 57.6px; font-size: 3.6rem; font-weight: 300; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px } @media (max-width: 1024px) { .products-listing .seo-content h1 { font-size: 1.8rem } } .products-listing .seo-content h2 { font-size: 25.6px; font-size: 1.6rem; font-weight: 300; line-height: 24px; letter-spacing: 0.2px } .products-listing .seo-content h2 a { text-decoration: underline } .products-listing-filters { } @media (min-width: 641px) { .products-listing-filters { position: -webkit-sticky; position: sticky; top: 80px; max-height: calc(100vh - 308px); overflow-y: scroll } } @media (min-width: 641px) { .products-listing-filters { top: 112px } } @media (min-width: 1025px) { .products-listing-filters { max-height: calc(100vh - 225px) } } .products-listing-filters::-webkit-scrollbar { width: 0 } .products-listing-filters__wrap { display: none } @media (min-width: 641px) { .products-listing-filters__wrap { display: block; padding-top: 23px } } @media (min-width: 1025px) { .products-listing-filters__wrap { padding-top: 0 } } .products-listing-filters .filter-component__inner { margin-bottom: 23px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .where-to-buy__grid { } @media (min-width: 1025px) { .where-to-buy__grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; } .where-to-buy__grid.\--hidden-list { display: block; } } .where-to-buy__grid img { display: block; } .where-to-buy__grid-info { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 641px) { .where-to-buy__grid-info { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media (min-width: 1025px) { .where-to-buy__grid-info { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .where-to-buy__grid .retailer-list { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } .where-to-buy__grid .retailer-list.\--single { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .where-to-buy__grid .retailer-list .profession-retailer__item { height: auto !important; max-width: 100% !important; margin-right: 0 !important; } .where-to-buy__grid .retailer-list .profession-retailer__item.\--regular { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .header-logo-fixed.\--dark-color { transition: all 0.3s ease; background-color: #ffffff; } /* Styles start from here */ & .tab-container { width: 100%; padding: 24px } & .tab-container select.select-dropdown { width: 100%; padding: 8px; font-size: 32px; font-size: 2rem; border-bottom: solid 1px; font-family: "Sofia Pro"; margin-bottom: 24px; } select { width: 100%; padding: 16px; padding: 1rem; font-size: 18px; font-size: 1.125rem; background-color: transparent; border: none; } select::-ms-expand { display: none; } .select { position: relative } .select::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke='none'%3E%3Cpath d='M21.293,12.293,16,17.586l-5.293-5.293a1,1,0,0,0-1.414,1.414l6,6a1,1,0,0,0,1.414,0l6-6a1,1,0,0,0-1.414-1.414Z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); background-position: center; background-size: contain; position: absolute; top: 35%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 16px; right: 1rem; pointer-events: none; width: 32px; height: 32px; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .profession-retailer { padding: 32px 16px 0 } @media (min-width: 641px) { .profession-retailer { padding: 65px 16px 20px; max-width: 40%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; margin-right: 8px } } @media (min-width: 1025px) { .profession-retailer { display: block; padding: 40px 32px 0; min-width: 478px; max-width: none } } .profession-retailer__title { text-align: center; text-transform: uppercase; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; margin-bottom: 32px } @media (min-width: 641px) { .profession-retailer__title { font-size: 2.4rem; line-height: 110%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px } } @media (min-width: 1025px) { .profession-retailer__title { display: block; margin-bottom: 32px; text-align: left } } .profession-retailer__items { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 641px) { .profession-retailer__items { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } } .profession-retailer__item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 64px; margin-bottom: 4rem; text-align: center; height: auto !important; max-width: 100% !important; margin-right: 0 !important } @media (min-width: 641px) { .profession-retailer__item { margin-right: 32px } } .profession-retailer__item img { height: auto; width: auto; max-width: 100%; max-height: 64px; max-height: 4rem; margin-bottom: 12.8px; margin-bottom: 0.8rem } .profession-retailer__item-link { text-transform: uppercase; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-decoration: underline; color: #000000 } @media (min-width: 1025px) { .profession-retailer__item-link { font-size: 1.35rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .product-page { display: block; overflow-x: hidden } .product-page__tabs-wrapper { } @media (min-width: 1025px) { .product-page__tabs-wrapper { min-height: 610px } } .product-page .small-cards-product__card-rating { -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end } .product-page .accordion { } @media (min-width: 641px) { .product-page .accordion { padding-left: 72px; padding-right: 72px } } @media (min-width: 1025px) { .product-page .accordion { padding-left: 0; padding-right: 0 } } .product-page .two-card-slider.container.\--small { overflow: hidden } @media (min-width: 1025px) { .product-page .two-card-slider.container.\--small { padding-left: 8px; padding-right: 8px } } .product-page .sticky-scroll-slider .img-slider-product-card { } @media (min-width: 1025px) { .product-page .sticky-scroll-slider .img-slider-product-card { padding-left: 0 } } .product-page .product-page__tabs-wrapper .img-slider-product-card { } @media (min-width: 1025px) { .product-page .product-page__tabs-wrapper .img-slider-product-card { padding-right: 8px } } .product-page .two-card-slider .two-card-slider__card { } @media (min-width: 1025px) { .product-page .two-card-slider .two-card-slider__card { width: 264px } } .product-page .two-card-slider .two-card-slider__card:not(:last-of-type) { } @media (min-width: 1025px) { .product-page .two-card-slider .two-card-slider__card:not(:last-of-type) { margin-right: 0; width: 25% } } .product-page .two-card-slider__card-img-wrap { } @media (min-width: 1025px) { .product-page .two-card-slider__card-img-wrap { width: 264px; margin: 0 audio } } .product-page .img-slider-product-card.\--small { } @media (min-width: 1025px) { .product-page .img-slider-product-card.\--small { padding-top: 56px } } .product-page__content-wrapper { } @media (min-width: 1025px) { .product-page__content-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 80px; max-height: 100vh; overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none } .product-page__content-wrapper::-webkit-scrollbar { display: none } } .product-page .tab-slider { } @media (min-width: 641px) { .product-page .tab-slider { padding-left: 80px; padding-right: 80px } } @media (min-width: 1025px) { .product-page .tab-slider { padding-left: 32px; padding-right: 32px } } .product-page__video { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 24px 0 0; max-width: 1440px; margin: 0 auto 72px } @media (min-width: 641px) { .product-page__video { padding: 0 80px } } @media (min-width: 1025px) { .product-page__video { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; padding: 48px 32px 0; margin-bottom: 87px } } .product-page__video-wrap { width: 100% } @media (min-width: 1025px) { .product-page__video-wrap { max-width: 847px } } .product-page__video-text { width: 100%; padding: 65px 24px } @media (min-width: 641px) { .product-page__video-text { padding: 105px 40px } } @media (min-width: 1025px) { .product-page__video-text { padding: 0 32px 0 40px; position: relative; left: -1px; width: 528px } } .product-page__video-text .video-text-color-white { color: #ffffff } .product-page__video-text .video-text-color-white::before { background-image: url("/img/quote-bottom-left-white.svg") } .product-page__video-text .video-text-color-white::after { background-image: url("/img/quote-bottom-left-white.svg") } .product-page__video-text .video-text-color-black { color: #000000 } .product-page__video-text p { font-size: 25.6px; font-size: 1.6rem; line-height: 24px; position: relative } @media (min-width: 1025px) { .product-page__video-text p { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } } .product-page__video-text p::before { display: block; content: ''; background-image: url("/img/quote-bottom.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20px; height: 16px; position: absolute; top: -32px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media (min-width: 641px) { .product-page__video-text p::before { width: 30px; height: 24px; top: -48px; left: 0; -webkit-transform: unset; -ms-transform: unset; transform: unset } } .product-page__video-text p::after { display: block; content: ''; background-image: url("/img/quote-bottom.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; width: 20px; height: 16px; position: absolute; bottom: -32px; right: 50%; -webkit-transform: translateX(50%) rotate(180deg); -ms-transform: translateX(50%) rotate(180deg); transform: translateX(50%) rotate(180deg) } @media (min-width: 641px) { .product-page__video-text p::after { width: 30px; height: 24px; bottom: -48px; right: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } } .availability { width: 980px; margin: auto; height: auto; padding-bottom: 120px } @media (min-width: 641px) { .availability { width: 100% } .availability-shops img { margin: 10px } } @media (max-width: 640px) { .availability { width: 100% } .availability-shops img { margin: 10px } } .availability h2 { text-align: center; padding-bottom: 8px; font-family: "Chiswick Sans" } .availability p { text-align: center; padding-bottom: 30px } .availability-shops { width: 100%; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .availability-shops img { width: auto; height: 75px; margin: 10px 22.5px; filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: grayscale(100%); filter: grayscale(100%) } .cc-i-comment p { color: #000000; font-size: 16px; } .cc-w.cc-w a, .cc-i-header .cc-w small { font-size: 16px; font-family: "Helvetica Neue"; color: #000000; } .cc-i-header span, .cc-w.cc-w small { font-size: 16px; font-family: "Minion Pro"; } .cc-ll .cc-ll-i .cc-i-reply.cc-i-reply { font-size: 15px; font-family: "Minion Pro"; } .label-wrapper.\--hidden { display: none; margin-left: 0; } .cc-i-content h3 { color: #000000; font-size: 24px; line-height: 42px; font-family: "Minion Pro"; font-style: normal; font-weight: 400; text-decoration: none; text-transform: none; margin-bottom: 6px; } .answer { margin-top: 10px; } .btn-native { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .\--files { display: none !important; } .label-wrapper { margin-top: 15px; margin-left: -2px } .label-wrapper .title-copy-form__file-label { margin: 0; background: transparent } .copy-form-file { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 32px; } .copy-form-file__txt { margin-right: 34px; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; color: #000000; } .copy-form-file-container { display: none; } .copy-form-file__remove { width: 8px; height: 8px; background-image: url(/img/remove-file.svg); background-image: url(/img/remove-file.svg); background-size: contain; background-repeat: no-repeat; cursor: pointer; border-color: #000000; margin-top: 1px; margin-left: 15px; } .reviews-header { padding: 20px 0; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 641px) { .reviews-header { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset } } .reviews-header h2 { color: #4a4a4a !important; font-size: 32px !important; font-family: "Didot"; font-style: italic !important; font-weight: 400 !important; font-feature-settings: normal !important; font-variant: normal !important; text-decoration: none !important; text-transform: uppercase !important; line-height: 40px !important } .reviews-header__btn { font-family: "Minion Pro"; font-weight: 400; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; color: #171717; border: 1px solid #000000; background-color: #ffffff; width: 200px; height: 43px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-transform: capitalize; padding: 2px 10px; transition: all 0.3s ease; border-radius: 0 } .reviews-header__btn:hover { color: #ffffff; background: #171717 } .img-star { margin-bottom: 5px } .img-star .choose-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px } .img-star .choose-wrapper .txt-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 15px } .img-star .choose-wrapper .svg-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-right: 10px } .img-star svg { width: 16px; cursor: pointer; fill: #d3d3d3 } .img-star svg.\--gray { fill: #000000 } .replies article { padding-left: 0 } @media (min-width: 641px) { .replies article { padding-left: 40px } } @media (min-width: 1025px) { .replies article { padding-left: 70px } } .cc-w.cc-w .cc-f-input.\--txt { margin-bottom: 15px; } .cc-n.cc-n .cc-w, .cc-w.cc-w .cc-n { color: #000000; font-size: 15px; font-weight: 300; letter-spacing: 0.02em; } .btn-native .cc-n.cc-n { margin-top: 13px; } .cc-w .cc-f-row.cc-f-row { padding-left: 2px; } .cc-w.cc-w .cc-e { font-weight: 300; font-size: 12px; line-height: 100%; text-transform: uppercase; color: #eb5757; } #reviews .accordion__title.\--text-small { margin-bottom: 0; padding-left: 0; padding-right: 0; margin-top: 20px; } .replies .cc-i-wrap { background: #f7f7f7; padding: 7px; } .cc-w.cc-w .cc-f-textarea { border: 1px solid #171717; resize: none; border-radius: 0; background: transparent; color: #2e1a47; font-size: 25.6px; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.02em; padding: 7.5px 15px } .cc-w.cc-w .cc-f-textarea:focus, .cc-w.cc-w .cc-f-textarea:active { border: 1px solid #000000 } .cc-w.cc-w .cc-f-textarea::-webkit-input-placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: #9eacb5 !important } .cc-w.cc-w .cc-f-textarea:-ms-input-placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: #9eacb5 !important } .cc-w.cc-w .cc-f-textarea::placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: #9eacb5 !important } .cc-w.cc-w .\--num { color: #000000; border: 1px solid #000000; resize: none; border-radius: 0; visibility: hidden; position: absolute; } .cc-w.cc-w .cc-f-input { border: none; border-bottom: 1px solid #2e1a47; border-radius: 0; color: #2e1a47; padding: 1px 20px 1px 0; background-color: transparent; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } .cc-w.cc-w .cc-f-input::-webkit-input-placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: black !important } .cc-w.cc-w .cc-f-input:-ms-input-placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: black !important } .cc-w.cc-w .cc-f-input::placeholder { font-family: "Sofia Pro" !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 38.4px !important; line-height: 2.4rem !important; letter-spacing: 0.02em !important; color: black !important } .cc-w.cc-w .cc-f-input:focus, .cc-w.cc-w .cc-f-input:active { border-bottom: 1px solid #000000 } .\--form .cc-f-cf .cc-f-row .cc-f-col { visibility: hidden; height: 0; padding: 0; } .cc-w .cc-f-row.cc-f-row.\--inpt { } @media (min-width: 1025px) { .cc-w .cc-f-row.cc-f-row.\--inpt { margin-bottom: 10px } } .cc-w .cc-f-row.cc-f-row.\--inpt .cc-f-col:nth-child(1) { margin-left: 0; margin-right: 0 } @media (min-width: 1025px) { .cc-w .cc-f-row.cc-f-row.\--inpt .cc-f-col:nth-child(1) { margin-right: 10px } } .cc-w .cc-f-row.cc-f-row.\--inpt .cc-f-col:nth-child(2) { margin-left: 0; margin-right: 0 } @media (min-width: 1025px) { .cc-w .cc-f-row.cc-f-row.\--inpt .cc-f-col:nth-child(2) { margin-left: 10px } } .\--form .img-star { visibility: hidden; height: 0; padding: 0; margin: 0; } .reviews { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 8px } .reviews .small-cards-product__card-rating { margin-bottom: 0; margin-right: 5px } .\--form article { padding-left: 0 } @media (min-width: 641px) { .\--form article { padding-left: 40px } } @media (min-width: 1025px) { .\--form article { padding-left: 70px } } .cc-i-content { } .cc-i-content img { max-width: 300px !important; width: 100%; height: 180px !important; margin-right: 5px } .cc-i-content img:last-child { margin-right: 0 } .cc-w .cc-f-btn.cc-f-btn { min-width: 160px; width: 160px; margin-bottom: 0; color: #000000; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; font-weight: normal; display: inline-block; padding: 12px 24px; text-align: center; transition: all 0.3s ease; cursor: pointer; border: 1px solid #171717; border-radius: 0; background: transparent; text-transform: capitalize; font-family: "Minion Pro"; margin-top: 10px; margin-right: 10px } .cc-w .cc-f-btn.cc-f-btn:hover { color: #ffffff; background: #000000 } .img-slider-product-card .small-cards-product__star { width: 20px; height: 20px; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset .bv-fieldset-label { font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating .bv-rating-link { background-color: #ffffff !important; border: none !important; display: block !important; width: 24px !important; height: 24px !important; } .bv-dropdown .bv-cv2-cleanslate span { font-family: "Sofia Pro" !important; color: #171717 !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating .bv-rating-link span { color: transparent !important; text-shadow: none !important; display: block !important; height: 100% !important; position: relative !important; background-image: url(/img/star.svg) !important; background-size: cover !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating-control.bv-heat-map-off .bv-submission-star-rating-on .bv-rating-link span, .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating-control.bv-heat-map-off .bv-submission-star-rating-hover .bv-rating-link span { background-image: url(/img/black-star.svg) !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldset-radio-wrapper .bv-rating-input:last-child .bv-rating-link { border-radius: 0 0 0 0 !important; background-color: #ffffff; background-image: url(/img/star.svg); } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating .bv-rating-link span::after { content: '' !important; position: absolute !important; top: 0 !important; background-image: url(/img/star.svg) !important; background-size: cover !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-mbox .bv-mbox-sidebar .bv-submission-sidebar .bv-subject-info-section .bv-subject-info span { color: #171717 !important; font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-mbox .bv-mbox-breadcrumb span.bv-mbox-breadcrumb-item, .bv-header .bv-action-bar .bv-action-bar-header.bv-focusable { font-family: "Chiswick Sans" !important; } .bv-content-summary-body .bv-content-summary-body-text p { font-family: "Sofia Pro" !important; color: #171717 !important; font-weight: 300 !important; font-size: 25.6px !important; font-size: 1.6rem !important; line-height: 150% !important; letter-spacing: 0.02em !important; } .bv-control-bar-sort .bv-dropdown .bv-dropdown-target .bv-dropdown-label { font-family: "Sofia Pro" !important; color: #171717 !important; } .bv-control-bar-sort .bv-dropdown .bv-dropdown-target .bv-focusable .bv-dropdown-title { font-family: "Sofia Pro" !important; color: #171717 !important; } .bv-dropdown-item.bv-dropdown-item-selected.bv-focusable { font-family: "Sofia Pro" !important; color: #171717 !important; } #bv-dropdown-select-reviews-sortby.bv-dropdown-active .bv-dropdown-item.bv-focusable { font-family: "Sofia Pro" !important; color: #171717 !important; } .bv-filters .bv-content-filter-select .bv-dropdown .bv-dropdown-target .bv-focusable .bv-dropdown-title { font-family: "Sofia Pro" !important; color: #171717 !important; font-style: normal !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset .bv-helper span.bv-helper-label, .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-long .bv-loy-plus-box-longpoints { margin-right: 20px !important; } #reviews .bv-content-btn.bv-filter-control.bv-expand-filter-button.bv-focusable { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; padding: 9px !important; width: 36px !important; height: 36px !important; transition: all 0.3s ease !important } #reviews .bv-content-btn.bv-filter-control.bv-expand-filter-button.bv-focusable:hover { background-color: #ffffff !important; box-shadow: none !important } #reviews .bv-content-btn.bv-filter-control.bv-expand-filter-button.bv-focusable span { display: block !important; height: 2px !important; width: 18px !important; background-color: #000000 !important; position: relative !important; overflow: hidden !important } #reviews .bv-content-btn.bv-filter-control.bv-expand-filter-button.bv-focusable span:not(:last-of-type) { margin-bottom: 6px !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error .bv-fieldset-label { color: #eb5757 !important; } #reviews .bv-cv2-cleanslate .bv-core-container-48 .bv-content-item .bv-secondary-content-actions-container .bv-content-btn { font-family: "Minion Pro" !important; font-weight: normal !important; font-size: 28.8px !important; font-size: 1.8rem !important; line-height: 100% !important; color: #171717 !important; border: 1px solid #000000 !important; background-color: #eeeeee !important; width: 200px !important; height: 43px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; text-transform: capitalize !important; transition: all 0.3s ease !important; border-radius: 0 !important } #reviews .bv-cv2-cleanslate .bv-core-container-48 .bv-content-item .bv-secondary-content-actions-container .bv-content-btn:hover { background-color: #000000 !important; color: #ffffff !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 button.bv-ask-question, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit, .bv-action-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button, .bv-action-bar .bv-control-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button { font-family: "Minion Pro" !important; font-weight: normal !important; font-size: 28.8px !important; font-size: 1.8rem !important; line-height: 100% !important; color: #171717 !important; border: 1px solid #000000 !important; background-color: #ffffff !important; width: 200px !important; height: 43px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; text-transform: capitalize !important; padding: 2px 10px !important; transition: all 0.3s ease !important; border-radius: 0 !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 button.bv-ask-question:hover, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit:hover, .bv-action-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button:hover, .bv-action-bar .bv-control-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button:hover { background-color: #000000 !important; color: #ffffff !important; width: 200px !important; height: 43px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; text-transform: capitalize !important; padding: 2px 10px !important; font-family: "Minion Pro" !important; font-weight: normal !important; font-size: 28.8px !important; font-size: 1.8rem !important; line-height: 100% !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 button.bv-ask-question:focus, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit:focus, .bv-action-bar.bv-action-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button:focus, .bv-action-bar .bv-control-bar .bv-write-review-container.bv-write-container button.bv-write-review.bv-focusable.bv-submission-button:focus { font-family: "Minion Pro" !important; font-weight: normal !important; font-size: 28.8px !important; font-size: 1.8rem !important; line-height: 100% !important; color: #171717 !important; border: 1px solid #000000 !important; background-color: #ffffff !important; width: 200px !important; height: 43px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; text-transform: capitalize !important; padding: 2px 10px !important; transition: all 0.3s ease !important; border-radius: 0 !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-form-actions .bv-submission-button-submit:nth-of-type(2n) { -webkit-transform: translate(16px, 0) !important; -ms-transform: translate(16px, 0) !important; transform: translate(16px, 0) !important; } li.bv-content-item.bv-content-top-question.bv-content-question .bv-content-item-avatar-offset.bv-content-item-avatar-offset-off .bv-content-actions-container { padding-left: 0 !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-active, .bv-cv2-cleanslate.bv-mbox-opened .bv-core-container-48 .bv-mbox-box .bv-mbox { background-color: #ffffff !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-mbox-wide .bv-mbox .bv-mbox-injection-target .bv-fieldsets .bv-fieldset.bv-fieldset-active .bv-fieldset-arrowicon { border-left-color: #ffffff !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldset-agreements .bv-text-link, .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-agreements .bv-fieldset-label-text { font-family: "Sofia Pro" !important; font-size: 19.2px !important; font-size: 1.2rem !important; font-weight: 300 !important; text-decoration: none !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset .bv-helper span.bv-helper-label { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; color: #eb5757 !important; font-family: #eb5757 !important; font-weight: 300 !important; font-size: 19.2px !important; font-size: 1.2rem !important; line-height: 100% !important; margin-right: 9px !important; } #reviews .bv-cv2-cleanslate .bv-core-container-48 .bv-secondary-content-list .bv-content-item { margin: 0 0 2px 0 !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-active .bv-helper span.bv-helper-label { font-family: "Sofia Pro" !important; font-style: normal !important; font-weight: 300 !important; font-size: 19.2px !important; font-size: 1.2rem !important; line-height: 100% !important; color: #eb5757 !important; padding: 0 9px 0 0 !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-questionsummary .bv-sublabel, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-title, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-summary p, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission textarea, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-required-fields-text, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-tags .bv-radio-group .bv-radio-container-li .bv-radio-wrapper-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets input.bv-text, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset-secondary-rating .bv-rating-helper, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-isrecommended .bv-fieldset-label-wrapper .bv-fieldset-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset .bv-review-field-content-wrapper textarea, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-form-actions .bv-fieldset-casltext, fieldset.bv-select-field.bv-select-field .bv-fieldset-select-wrapper .bv-select, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset-rating .bv-fieldset-rating-wrapper .bv-rating-helper, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-select-field .bv-fieldset-label-wrapper, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-badge-summary .bv-badge-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-item .bv-content-feedback-vote-request p, #reviews .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-summary p, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-item .bv-content-feedback-vote .bv-content-feedback-btn-container *, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-data-summary .bv-content-data-count .bv-content-data-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-content-item .bv-content-feedback-vote.bv-content-feedback-vote-active button.bv-content-report-btn { font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error span.bv-helper-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover span.bv-helper-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover .bv-fieldset-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-agreements.bv-error .bv-fieldset-label-text, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-agreements.bv-error:hover .bv-fieldset-label-text { color: #eb5757 !important; font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset { background-color: #ffffff !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-isrecommended .bv-fieldset-isrecommended-group .bv-radio-container-li .bv-radio-wrapper-label { background-color: #ffffff !important; border-radius: 0 !important; font-family: "Minion Pro" !important; font-style: normal !important; font-weight: normal !important; font-size: 28.8px !important; font-size: 1.8rem !important; line-height: 100% !important; color: #171717 !important; border-color: #000000 !important; transition: all 0.3s ease !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-fieldset-isrecommended .bv-fieldset-isrecommended-group .bv-radio-container-li .bv-radio-wrapper-label:hover { background-color: #000000 !important; color: #ffffff !important } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error .bv-helper { border-color: #eb5757 !important; color: #eb5757 !important; min-width: 89px !important; height: 26px !important; border-radius: 0 !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; overflow: hidden !important; padding: 0 !important; z-index: 9999 !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-helper-icon { width: 18px !important; height: 18px !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-radio-field .bv-radio-group { padding-top: 9px !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error .bv-helper-icon-negative { color: #ffffff !important; width: 18px !important; height: 18px !important; position: relative !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error .bv-helper-icon-negative::after { content: ''; width: 18px !important; height: 18px !important; position: absolute; background-image: url(/img/close-bv-red.svg) !important; background-size: cover !important; top: 0; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-mbox-wide .bv-mbox .bv-mbox-close, .bv-cv2-cleanslate.bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-mbox .bv-mbox-close, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-mbox .bv-content-item-close { color: #ffffff !important; width: 24px !important; height: 24px !important; display: block !important; margin-top: 3px !important; background-image: url(/img/close-bv-black.svg) !important; background-size: cover !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldset-radio-wrapper .bv-rating-input:first-child .bv-rating-link { border-radius: 0 0 0 0 !important; border: none !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-valid .bv-helper-icon-positive { color: #ffffff !important; width: 18px !important; height: 12px !important; position: relative !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-valid .bv-helper-icon-positive::after { content: '' !important; width: 18px !important; height: 12px !important; position: absolute !important; background-image: url(/img/success-bv.svg) !important; background-size: cover !important; top: 0; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating-control.bv-heat-map-off .bv-submission-star-rating-on .bv-rating-link:focus { border: none !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset-rating.bv-error #bv-fieldset-label-rating .bv-fieldset-label { color: #eb5757 !important; font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating-applied.bv-submission-star-rating-live .bv-rating-link.bv-focusable { border: 1px solid transparent !important; border-color: transparent !important; border-style: solid !important; } .bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-submission-star-rating-applied.bv-submission-star-rating-live .bv-rating-link.bv-focusable:focus { border: 1px solid transparent !important; border-color: transparent !important; border-style: solid !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error input, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error textarea, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error select, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover input, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover textarea, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover select, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error .bv-review-field-content-wrapper, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-error:hover .bv-review-field-content-wrapper { border-color: #eb5757 !important; font-family: "Sofia Pro" !important; } .bv-cv2-cleanslate.bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset .bv-helper span.bv-helper-label, .bv-cv2-cleanslate.bv-cv2-cleanslate .bv-core-container-48 .bv-submission .bv-fieldsets .bv-fieldset.bv-long .bv-loy-plus-box-longpoints { padding: 2px 1em 2px 0.8em !important; } .bv-cv2-cleanslate .bv-core-container-51 .bv-content-placeholder { margin-left: 13px !important; } .bv-write-review-label { margin-top: 25px !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .contact { } .contact__title-txt { margin-bottom: 98px } @media (min-width: 641px) { .contact__title-txt { margin-bottom: 24px } } @media (min-width: 1025px) { .contact__title-txt { margin-bottom: 82px } } .contact__title { text-align: left } @media (min-width: 641px) { .contact__title { margin-bottom: 50px } } @media (min-width: 1025px) { .contact__title { margin-bottom: 96px } } .contact__txt { } .contact__txt p { margin-bottom: 40px } @media (min-width: 1025px) { .contact__txt p { margin-bottom: 64px } } .contact__list-item { padding-left: 64px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; position: relative } .contact__list-item::after { display: block; content: ''; position: absolute; width: 32px; height: 32px; top: 0; left: 0; background-size: contain; background-repeat: no-repeat; background-position: center } .contact__list-item.\--tel::after { background-image: url(/img/telephone.svg) } .contact__list-item.\--email::after { background-image: url(/img/mail.svg) } .contact__list-item *:first-child { font-weight: bold } .contact__list-item:not(:last-of-type) { margin-bottom: 48px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .education-team-datail { } .education-team-datail section.img-title-copy-grid { } @media (min-width: 641px) { .education-team-datail section.img-title-copy-grid { padding-bottom: 0; margin-bottom: -80px } } @media (min-width: 1025px) { .education-team-datail section.img-title-copy-grid { padding-bottom: 0; margin-bottom: 130px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .event-search { } .event-search__autocomplete { max-width: 480px; width: 100%; position: absolute; top: 35px; left: 0 } .event-search__autocomplete-list { max-height: 64px; overflow-y: auto; padding-top: 5px } .event-search__autocomplete-item { padding: 1px 16px; cursor: pointer; transition: all 0.3s ease } .event-search__autocomplete-item:hover, .event-search__autocomplete-item.\--focus { background: #f7f7f7 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .event-detail__wrap { } .event-detail__wrap .title-img-txt-form__right-col { padding: 0 } @media (min-width: 641px) { .event-detail__wrap .title-img-txt-form__right-col { padding-left: 72px; padding-right: 72px } } @media (min-width: 1025px) { .event-detail__wrap .title-img-txt-form__right-col { padding: 0 40px 0 24px; max-width: 640px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .quiz-type { width: 100%; display: none; margin-bottom: 32px; padding-top: 24px } @media (min-width: 641px) { .quiz-type { min-height: calc(100vh - 60px); padding-top: 0; margin-bottom: 0 } } @media (min-width: 1025px) { .quiz-type { min-height: calc(100vh - 80px) } } .quiz-type__wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100% } @media (min-width: 641px) { .quiz-type__wrapper { min-height: calc(100vh - 60px); padding-bottom: 60px } } @media (min-width: 1025px) { .quiz-type__wrapper { height: 100%; padding-bottom: 0 } } .quiz-type__title { font-weight: 400; font-size: 18px; line-height: 120%; padding: 24px 8px; text-align: center; text-transform: uppercase } @media (min-width: 641px) { .quiz-type__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; min-height: 104px; font-weight: 300; font-size: 24px; line-height: 110% } } .quiz-type__cards-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } @media (min-width: 641px) { .quiz-type__cards-wrapper { position: relative; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: justify; justify-content: center; margin: 0 auto; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center } } .quiz-type__cards-title { width: 100%; font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; text-transform: uppercase; font-weight: 300; line-height: 32px; line-height: 2rem; margin-bottom: 20px; text-align: center } @media (min-width: 641px) { .quiz-type__cards-title { font-size: 2.4rem; line-height: 56px; margin-bottom: 24px; /* position: absolute; */ top: -80px } } .quiz-type__img-title { padding: 50px 0 22px; height: 146px; margin: 0 auto } @media (min-width: 1025px) { .quiz-type__img-title { padding: 32px 0 21px; height: 173px } } .quiz-type__img-title picture { height: 100% } .quiz-type__img-title picture img { object-fit: contain; display: block } .quiz-type__card-picture { position: relative; width: 100%; height: 33.3333333vw; overflow: hidden; border-radius: 5px 5px 0 0 } @media (min-width: 641px) { .quiz-type__card-picture { height: 216px } } @media (min-width: 1025px) { .quiz-type__card-picture { height: 214px } } .quiz-type__card-picture picture { position: absolute; left: 0; right: 0; top: 0; bottom: 0 } .quiz-type__card-picture picture:last-child { opacity: 0 } .quiz-type__card-picture picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center } .quiz-type__card { box-shadow: 0 4px 4px rgba(0, 0, 0, .1); border-radius: 5px; border: none; transition: box-shadow 0.3s ease; cursor: pointer } @media (min-width: 641px) { .quiz-type__card { /* width: calc(50% - 8px) */ } } @media (min-width: 1025px) { .quiz-type__card { /* width: calc(50% - 16px); */ box-shadow: 0 8px 8px rgba(0, 0, 0, .1) } .quiz-type__card:hover { } .quiz-type__card:hover .quiz-type__card-picture { } .quiz-type__card:hover .quiz-type__card-picture picture:first-child { opacity: 0; transition: opacity 0.3s ease } .quiz-type__card:hover .quiz-type__card-picture picture:last-child { opacity: 1; transition: opacity 0.3s ease } .quiz-type__card:not(:hover) { } .quiz-type__card:not(:hover) .quiz-type__card-picture { } .quiz-type__card:not(:hover) .quiz-type__card-picture picture:first-child { opacity: 1; transition: opacity 0.3s ease } .quiz-type__card:not(:hover) .quiz-type__card-picture picture:last-child { opacity: 0; transition: opacity 0.3s ease } } .quiz-type__card:not(:last-child) { margin-bottom: 30px } @media (min-width: 641px) { .quiz-type__card:not(:last-child) { margin-bottom: 0; margin-top: 64px; } } @media (min-width: 1025px) { .quiz-type__card:not(:last-child) { /* margin-right: 32px; */ } } .quiz-type__card:last-child { margin-bottom: 24px } @media (min-width: 641px) { .quiz-type__card:last-child { margin-bottom: 0; margin-top: 64px; } } .quiz-type__card.\--selected { box-shadow: 0 8px 8px rgba(0, 0, 0, .1) } .quiz-type__intro { padding: 8px 8px 50px; text-align: center } @media (min-width: 641px) { .quiz-type__intro { padding: 15px 29px 50px } } @media (min-width: 1025px) { .quiz-type__intro { padding: 15px 39px 46px; font-weight: 300; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02rem } } .quiz-step { display: none; width: 100%; height: 100%; position: relative; right: 0; opacity: 1; pointer-events: auto; z-index: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; overflow: hidden } .quiz-step.\--moving-out { position: absolute; right: 100%; opacity: 0; transition: all 0.6s ease; pointer-events: none; z-index: 0 } .quiz-step__outer { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; height: 100%; overflow: hidden } @media (min-width: 641px) { .quiz-step__outer { width: 100% } } .quiz-step__choice-list-item { padding: 0 34px; text-align: center } @media (min-width: 641px) { .quiz-step__choice-list-item { margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex } } @media (max-width: 800px) { .quiz-step__choice-list-item { padding: 5px 34px } } @media (min-width: 1025px) { .quiz-step { padding: 0 20px !important } .quiz-step:nth-child(4n) { } .quiz-step:nth-child(4n) .quiz-step__choice-list { max-width: 850px } } .quiz-step__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-height: calc(100vh - 116px - 48px); height: 100% } @media (min-width: 641px) { .quiz-step__inner { min-height: calc(100vh - 63px - 134px - 60px - 80px) } } @media (min-width: 1025px) { .quiz-step__inner { min-height: calc(100vh - 80px - 69px - 25px - 72px) } } .quiz-step__link-wrapper { width: 100%; margin: auto 0 16px; padding: 0 8px; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } @media (min-width: 641px) { .quiz-step__link-wrapper { margin: auto auto 48px; padding: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } } .quiz-step__link-back { font-family: "Minion Pro"; display: inline-block; transition: opacity ease-in 0.3s; -webkit-order: -1; -ms-flex-order: -1; order: -1; padding: 12px 24px; min-width: calc(50% - 8px); text-align: center; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; text-transform: capitalize; margin-right: 0 } @media (min-width: 641px) { .quiz-step__link-back { margin-right: 32px; min-width: 160px } } .quiz-step__choice-list-2 { max-width: 650px } @media (min-width: 641px) { .quiz-step__choice-list-2 { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .quiz-step__choice-list-2 .quiz-step__choice-list-item { margin: 0 auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .quiz-step__choice-list-2 { display: -ms-grid !important; display: grid !important; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin: 0 auto } } .quiz-step__choice-list-3 { max-width: 650px } @media (min-width: 641px) { .quiz-step__choice-list-3 { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .quiz-step__choice-list-3 .quiz-step__choice-list-item { margin: 0 auto; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } } @media (min-width: 1025px) { .quiz-step__choice-list-3 { display: -ms-grid !important; display: grid !important; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); margin: 0 auto } } .quiz-step__title { display: none } .quiz-step__subtitle { font-size: 18px; line-height: 120%; text-align: center; text-transform: uppercase; padding: 24px 8px; height: 104px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-weight: 300 } @media (min-width: 641px) { .quiz-step__subtitle { font-style: normal; font-size: 24px; line-height: 110%; max-width: 576px; width: 100%; margin: 0 auto 16px } } .quiz-step__choice-wrapper { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; display: -webkit-flex; display: -ms-flexbox; display: flex } .quiz-step__choice-list { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 32px 0; overflow-y: hidden; overflow-x: hidden; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center } @media (min-width: 641px) { .quiz-step__choice-list { padding: 0 0 24px } } .quiz-step__choice-button { width: 150px; height: 150px; border: 2px solid black; background-color: white; border-radius: 100px; cursor: pointer; text-align: center; background-size: auto auto; background-size: initial; background-position: center right; background-repeat: no-repeat; font-family: Sofia Pro, sans-serif; font-weight: 300 } @media (min-width: 641px) { .quiz-step__choice-button { margin-bottom: 24px } } .quiz-step__choice-button.\--blocked { pointer-events: none; opacity: 0.5 } .quiz-step__choice-button.\--blocked:active, .quiz-step__choice-button.\--blocked:target { outline: none } .quiz-step__choice-button:focus { outline: none } .quiz-step__choice-list.\--multiple-choice { } @media (min-width: 641px) { .quiz-step__choice-list.\--multiple-choice { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-flex: initial; -ms-flex: initial; flex: initial; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } } @media (min-width: 1025px) { .quiz-step__choice-list.\--multiple-choice { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; grid-column-gap: 57px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: unset; -ms-flex-pack: unset; justify-content: unset } } .quiz-step__choice-list.\--multiple-choice .quiz-step__choice-list-item { } @media (min-width: 641px) { .quiz-step__choice-list.\--multiple-choice .quiz-step__choice-list-item { width: calc(50% - 8px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 0; max-width: 276px; text-align: center } } @media (min-width: 1025px) { .quiz-step__choice-list.\--multiple-choice .quiz-step__choice-list-item { width: 100% } } .quiz-step__choice-list.\--multiple-choice[data-restrict="none"], .quiz-step__choice-list.\--multiple-choice[data-group="hairHistory"] { } @media (min-width: 641px) { .quiz-step__choice-list.\--multiple-choice[data-restrict="none"], .quiz-step__choice-list.\--multiple-choice[data-group="hairHistory"] { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .quiz-step__choice-list.\--multiple-choice[data-restrict="none"] .quiz-step__choice-list-item, .quiz-step__choice-list.\--multiple-choice[data-group="hairHistory"] .quiz-step__choice-list-item { margin: 0 auto } } @media (min-width: 1025px) { .quiz-step__choice-list.\--multiple-choice[data-restrict="none"], .quiz-step__choice-list.\--multiple-choice[data-group="hairHistory"] { display: -ms-grid; display: grid; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin: 0 auto } } .quiz-step__choice-list.\--multiple-choice[data-restrict="3"] { } @media (min-width: 641px) { .quiz-step__choice-list.\--multiple-choice[data-restrict="3"] { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .quiz-step__choice-list.\--multiple-choice[data-restrict="3"] .quiz-step__choice-list-item { margin: 0 auto } } .quiz-step__choice-list.\--multiple-choice .quiz-step__choice-button { } @media (min-width: 641px) { .quiz-step__choice-list.\--multiple-choice .quiz-step__choice-button { position: relative } } .quiz-step__choice-trigger { margin-top: 8px; opacity: 0; transition: opacity 0.3s ease-in } .quiz-step__choice-trigger.\--chosen { opacity: 1 } .quiz-step__link { font-family: "Minion Pro"; pointer-events: none; opacity: 0.5; transition: opacity 0.3s ease-in; text-transform: capitalize; padding: 12px 24px; min-width: calc(50% - 8px); text-align: center; font-size: 22.4px; font-size: 1.4rem; line-height: 100% } @media (min-width: 641px) { .quiz-step__link { min-width: 160px } } .quiz-step__link.\--allowed { pointer-events: all; opacity: 1 } .quiz { } .quiz-wrapper { min-height: 100vh; padding-bottom: 56px } .quiz__progress-bar { padding: 16px 42px 24px !important; display: none; width: 100% } @media (min-width: 641px) { .quiz__progress-bar { padding-top: 48px !important; padding-bottom: 0 } } @media (min-width: 1025px) { .quiz__progress-bar { padding: 64px 0 0 !important } } .quiz__total-bar { width: 100%; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media (min-width: 641px) { .quiz__total-bar { /* max-width: 328px; */ margin: 0 auto } } .quiz__stage { width: 14px; position: relative; transition: width 0.6s ease; border-radius: 50%; height: 14px; border: 4px solid #c4c4c4; margin: 0 8px; background-color: white } .quiz__stage .\--passed { border: none } @media (min-width: 641px) { .quiz__stage { width: 20px; height: 20px; margin: 0 12px } } @media (min-width: 1025px) { .quiz__stage { width: 25px; height: 25px; margin: 0 20px } } #quiz-line { margin: auto; width: calc(27px * var(--quiz-num-questions)); height: 3px; position: relative; top: 9px; background: #c4c4c4 } @media (min-width: 641px) { #quiz-line { width: calc(39px * var(--quiz-num-questions)); top: 12px } } @media (min-width: 1025px) { #quiz-line { width: calc(55.6px * var(--quiz-num-questions)); top: 14px } } .quiz-frame { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; min-height: calc(100vh - 116px); overflow: hidden } @media (min-width: 641px) { .quiz-frame { min-height: calc(100vh - 63px - 134px - 60px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-width: 624px; margin: 63px auto 134px; padding: 0 20px } } @media (min-width: 1025px) { .quiz-frame { min-height: calc(100vh - 80px - 69px - 25px); margin: 25px auto 69px; max-width: 1008px } } .quiz-frame__container { display: none; overflow: hidden } .quiz-frame.\--caviar { } @media (min-width: 641px) { .quiz-frame.\--caviar { border: 2px solid #966abe } } .quiz-frame.\--caviar .quiz-step__choice-button { border: 2px solid #966abe } .quiz-frame.\--caviar .quiz-step__choice-button.\--chosen { background-color: #966abe !important; color: white !important } .quiz-frame.\--caviar .\--passed { background-color: #966abe; border: none } .quiz-frame.\--caviar .quiz { } .quiz-frame.\--caviar .quiz__total-bar { border-color: #966abe } .quiz-frame.\--caviar .quiz__stage-start { background-color: #966abe } .quiz-frame.\--caviar .quiz.\--passed { background-color: #966abe } .quiz-frame.\--caviar .quiz.\--chosen { background-color: #966abe } .quiz-frame.\--caviar .quiz-line.\--canvas { display: none } .quiz-frame.\--caviar .quiz__total-bar.\--canvas { display: none } .quiz-frame.\--canvas { } @media (min-width: 641px) { .quiz-frame.\--canvas { border: 2px solid #aedad6 } } .quiz-frame.\--canvas .quiz-step__choice-button { border: 2px solid #aedad6 } .quiz-frame.\--canvas .quiz-step__choice-button.\--chosen { background-color: #aedad6 !important; color: white !important } .quiz-frame.\--canvas .\--passed { background-color: #aedad6; border: none } .quiz-frame.\--canvas .quiz { } .quiz-frame.\--canvas .quiz__total-bar { border-color: #aedad6 } .quiz-frame.\--canvas .quiz__stage-start { background-color: #aedad6 } .quiz-frame.\--canvas .quiz.\--passed { background-color: #aedad6 } .quiz-frame.\--canvas .quiz.\--chosen { background-color: #aedad6 } .quiz-frame.\--canvas .quiz-line.\--caviar { display: none } .quiz-frame.\--canvas .quiz__total-bar.\--caviar { display: none } .quiz-loader { width: 100%; display: none; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #ffffff; z-index: 13; text-transform: uppercase } .quiz-loader__wrapper { width: 100%; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .quiz-loader .box { box-sizing: border-box; position: relative; margin: 30px auto; width: 200px; height: 200px; border-radius: 0 } .quiz-loader .box__inner { height: 100%; padding: 2px 2px 3px } .quiz-loader .box__text { height: 100%; padding: 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; background-color: #ffffff; font-family: "Sofia Pro"; font-weight: 300; line-height: 100%; text-align: center; text-transform: uppercase } .quiz-loader .box::before, .quiz-loader .box::after, .quiz-loader .box__inner::before { content: ''; position: absolute; z-index: -1; border-radius: 0; border: 2px solid #966abe; -webkit-animation: anim-box 4s linear infinite; animation: anim-box 4s linear infinite } .quiz-loader .box::before { -webkit-animation-delay: -2s; animation-delay: -2s } .quiz-loader .box__inner::before { -webkit-animation-delay: -1s; animation-delay: -1s } .quiz-loader.\--canvas .box::before, .quiz-loader.\--canvas .box::after, .quiz-loader.\--canvas .box__inner::before { border: 2px solid #aedad6 } .quiz-loader__outer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 200px; height: 200px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-animation: darkShimmering 2s 2s ease infinite alternate; animation: darkShimmering 2s 2s ease infinite alternate } .quiz-loader__inner { width: 176px; height: 176px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-animation: lightShimmering 2s ease infinite alternate; animation: lightShimmering 2s ease infinite alternate } .quiz-loader__title { color: #ffffff; text-align: center; font-weight: 300; font-size: 14px; line-height: 100%; width: 160px; height: 160px; border-radius: 50%; background: #2c2b6c; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @-webkit-keyframes anim-box { 0%, 100% { left: 0; right: 0; top: 0; bottom: 198px; width: 100%; height: 2px; } 25% { left: 0; right: 198px; top: 0; bottom: 0; width: 2px; height: 100%; } 50% { left: 0; right: 0; top: 198px; bottom: 0; width: 100%; height: 2px; } 75% { left: 198px; right: 0; bottom: 0; top: 0; width: 2px; height: 100%; } } @keyframes anim-box { 0%, 100% { left: 0; right: 0; top: 0; bottom: 198px; width: 100%; height: 2px; } 25% { left: 0; right: 198px; top: 0; bottom: 0; width: 2px; height: 100%; } 50% { left: 0; right: 0; top: 198px; bottom: 0; width: 100%; height: 2px; } 75% { left: 198px; right: 0; bottom: 0; top: 0; width: 2px; height: 100%; } } @-webkit-keyframes darkShimmering { 0% { background: rgba(44, 43, 108, 0); } 50% { background: rgba(44, 43, 108, .5); } 100% { background: rgba(44, 43, 108, .5); } } @keyframes darkShimmering { 0% { background: rgba(44, 43, 108, 0); } 50% { background: rgba(44, 43, 108, .5); } 100% { background: rgba(44, 43, 108, .5); } } @-webkit-keyframes lightShimmering { 0% { background: rgba(44, 43, 108, 0); } 50% { background: rgba(44, 43, 108, .7); } 100% { background: rgba(44, 43, 108, .7); } } @keyframes lightShimmering { 0% { background: rgba(44, 43, 108, 0); } 50% { background: rgba(44, 43, 108, .7); } 100% { background: rgba(44, 43, 108, .7); } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .gratitude { padding-top: 24px; padding-bottom: 24px } .gratitude__title { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; text-align: center; font-style: normal; padding: 24px 8px; text-transform: none; text-transform: initial; margin: 0 auto; max-width: 368px; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; letter-spacing: 0.02em } @media (min-width: 641px) { .gratitude__title { font-size: 4rem; line-height: 110% } } @media (min-width: 1025px) { .gratitude__title { font-size: 40px; line-height: 110% } } .gratitude__subtitle { padding: 16px 8px; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; text-align: center; margin: 0 auto 32px; max-width: 368px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .results { } .results.container.\--small { } @media (min-width: 641px) { .results.container.\--small { max-width: 496px; margin: 40px auto 0 } } @media (min-width: 1025px) { .results.container.\--small { max-width: 800px; margin: 40px auto 0; padding: 60px 32px } } @media (min-width: 1025px) { .results.container.\--small { margin: 100px auto 76px } } .results.container.\--small.\--caviar { background-image: url("https://d8ua7bnpmn6n9.cloudfront.net/confetti_caviar.gif"); background-size: auto auto; background-size: initial; background-position: center top } @media (min-width: 641px) { .results.container.\--small.\--caviar { border: 2px solid #966abe } } .results.container.\--small.\--canvas { background-image: url("https://d8ua7bnpmn6n9.cloudfront.net/confetti_canvas.gif"); background-size: auto auto; background-size: initial; background-position: center top } @media (min-width: 641px) { .results.container.\--small.\--canvas { border: 2px solid #aedad6 } } .results__again-link { position: fixed; right: 60px; top: 32px; color: #ffffff; transition: color 0.3s ease, background-color 0.3s ease; background-color: #000000; padding: 10px 15px 8px; line-height: 16px; border-radius: 20px; z-index: 8; min-width: 200px; display: none; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .results__again-link:hover { color: #4a4a4a; background-color: rgba(0, 0, 0, .3) } .results__subtitle { font-family: "Sofia Pro"; padding: 42px 8px; font-weight: normal; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-align: center; text-transform: uppercase } @media (min-width: 641px) { .results__subtitle { font-size: 3.6rem; line-height: 110%; font-weight: 300 } } @media (min-width: 1025px) { .results__subtitle { padding: 0 8px 24px } } .results__text { font-family: "Sofia Pro"; padding: 0 8px; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; text-align: center; margin: 0 auto 40px } @media (min-width: 641px) { .results__text { max-width: 322px; text-align: center; margin-bottom: 30px } } @media (min-width: 1025px) { .results__text { max-width: 384px; margin-bottom: 0 } } .products { } .products .small-cards-product { } @media (min-width: 1025px) { .products .small-cards-product { padding-top: 32px } } .products .small-cards-product__inner > h4 { font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120% } @media (min-width: 641px) { .products .small-cards-product__inner > h4 { font-weight: 300; font-size: 2.4rem; line-height: 110% } } .redo-quiz { margin: 0 auto 32px; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } @media (min-width: 641px) { .redo-quiz { margin-bottom: 30px } } @media (min-width: 1025px) { .redo-quiz { margin-top: 24px; margin-bottom: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .enter-email { margin: 0 auto; max-width: 368px } .enter-email__title { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; padding: 16px 8px; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-align: center; margin-bottom: 0; font-weight: 300 } @media (min-width: 641px) { .enter-email__title { font-size: 4rem; line-height: 110% } } .enter-email__form { padding: 8px; position: relative } .enter-email__email { padding: 8px 20px 0 16px; border-bottom: 1px solid #2e1a47; background: transparent; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; color: rgba(46, 26, 71, .4) } .enter-email__submit { display: block; width: 16px; height: 16px; position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: url('/img/arrow.svg'); background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden; color: transparent; border: none; cursor: pointer } .enter-email__error-msg { display: none } .enter-email__success-msg { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .share { padding-top: 50px } .share__inner { margin: 0 auto; max-width: 368px } .share h3 { width: 100%; text-align: center; font-style: normal; padding: 24px 8px; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; margin-bottom: 0 } .share__share-btns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 auto } .share__share-btn { width: 50px; height: 50px; padding: 10px; cursor: pointer; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .share__share-btn:not(:last-child) { margin-right: 40px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fixed-form { position: fixed; bottom: 56px; left: 0; width: 100%; z-index: 99 } @media (min-width: 641px) { .fixed-form { bottom: 0 } } .fixed-form__inner { transition: background-color 0.3s ease } .fixed-form__inner.\--active { background-color: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 72px 8px; overflow-y: auto } .fixed-form__title, .fixed-form__gratitude { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #ffffff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .25); margin: 0; position: absolute; bottom: -1000px; transition: all 0.8s ease; cursor: pointer; font-style: normal; font-weight: 300 } @media (min-width: 641px) { .fixed-form__title, .fixed-form__gratitude { font-size: 4rem; line-height: 110% } } @media (min-width: 641px) { .fixed-form__title, .fixed-form__gratitude { width: 100%; padding: 30px; font-size: 2.4rem; font-weight: 300 } } .fixed-form__title.\--active, .fixed-form__gratitude.\--active { position: relative; bottom: 0; transition: all 0.3s ease } .fixed-form__title img, .fixed-form__gratitude img { width: 16px; height: 16px; object-fit: contain; margin-left: 10px } .fixed-form__title { font-family: "Minion Pro"; margin: 0 8px 16px; box-shadow: none; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; height: 43px; border: 1px solid #171717; text-transform: capitalize; transition: all 0.3s ease } .fixed-form__title:hover { background-color: #000000; color: #ffffff } .fixed-form__title img { display: none } @media (min-width: 641px) { .fixed-form__title { font-family: "Chiswick Sans"; font-style: normal; font-weight: 300; font-size: 2.4rem; line-height: 100%; border: none; margin: 0; box-shadow: 0 -4px 14px rgba(0, 0, 0, .25) } .fixed-form__title:hover { background-color: #ffffff; color: #000000 } .fixed-form__title img { display: block } } .fixed-form__gratitude { display: none; transition: none; bottom: unset; position: static } @media (min-width: 641px) { .fixed-form__gratitude { bottom: -1000px; position: absolute; transition: all 0.3s ease; display: -webkit-flex; display: -ms-flexbox; display: flex } } .fixed-form__gratitude p.\--hide-on-phones { display: none } @media (min-width: 641px) { .fixed-form__gratitude p.\--hide-on-phones { display: inline-block } } .fixed-form__gratitude-inner.\--mobile { background-color: #ffffff; padding: 51px 8px 46px; position: relative } .fixed-form__gratitude-inner.\--mobile p { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; margin-bottom: 24px } .fixed-form__gratitude-inner.\--mobile .fixed-form__gratitude-mobile-title { font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100% } @media (min-width: 641px) { .fixed-form__gratitude-inner.\--mobile { display: none } } .fixed-form__gratitude-mobile-btn-wrap { padding: 0 16px } .fixed-form__gratitude-inner.\--tablet { display: none; margin-bottom: 0 } @media (min-width: 641px) { .fixed-form__gratitude-inner.\--tablet { display: block; font-size: 24px; font-weight: 300; line-height: 1; margin-right: 15px } } .fixed-form__gratitude-close { width: 100% } .fixed-form__form { display: none; width: 100%; background: #ffffff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .25); transition: all 0.3s ease } .fixed-form__form.\--active {} @media (min-width: 641px) { .fixed-form__form.\--active { position: relative; top: auto; bottom: 0 } } @media (min-width: 641px) { .fixed-form__form { display: block; opacity: 1; position: absolute; bottom: -1000px } } .fixed-form__form-inner { position: relative; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 40px 24px; background: #ffffff; transition: all 0.8s ease; max-width: 1440px; margin: 0 auto } @media (min-width: 641px) { .fixed-form__form-inner { padding-top: 32px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } } @media (min-width: 1025px) { .fixed-form__form-inner { padding: 26px 32px 24px; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } } .fixed-form__form-title { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; margin-bottom: 32px } @media (min-width: 641px) { .fixed-form__form-title { display: none } } .fixed-form input { font-family: "Sofia Pro"; padding: 0; border-bottom: 1px solid #2e1a47; background: transparent; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: rgb(46, 26, 71); transition: all 0.3s ease } .fixed-form input.\--error + p.fixed-form__error-message { display: block; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; top: 100% } .fixed-form__fields-wrap { transition: all 0.3s ease; width: 100% } @media (min-width: 641px) { .fixed-form__fields-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 15px } } @media (min-width: 1025px) { .fixed-form__fields-wrap { max-width: 794px; margin-right: 22px } } .fixed-form__fields-wrap.\--error {} @media (min-width: 641px) { .fixed-form__fields-wrap.\--error { margin-bottom: 34px } } @media (min-width: 1025px) { .fixed-form__fields-wrap.\--error { margin-bottom: 16px } } .fixed-form__name-field { width: 100%; margin-bottom: 31px } @media (min-width: 641px) { .fixed-form__name-field { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: calc(50% - 16px); margin-right: 32px; margin-bottom: 0; height: 25px } } @media (min-width: 641px) { .fixed-form__name-field { height: 28px; padding-top: 3px } } @media (min-width: 1025px) { .fixed-form__name-field { width: 368px; margin-right: 48px } } .fixed-form__name-field input {} @media (min-width: 1025px) { .fixed-form__name-field input { width: 160px } } .fixed-form__name-field input:not(:last-child) {} @media (min-width: 1025px) { .fixed-form__name-field input:not(:last-child) { margin-right: 48px } } .fixed-form__email-field { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; line-height: 0; width: 100%; margin-bottom: 23px; position: relative } @media (min-width: 641px) { .fixed-form__email-field { width: calc(50% - 16px); margin-bottom: 0 } } @media (min-width: 1025px) { .fixed-form__email-field { max-width: 378px } } .fixed-form__email {} @media (min-width: 641px) { .fixed-form__email { margin-right: 16px } } .fixed-form__input-name-wrap { line-height: 0; position: relative; margin-bottom: 40px } @media (min-width: 641px) { .fixed-form__input-name-wrap { width: calc(50% - 16px) } } @media (min-width: 1025px) { .fixed-form__input-name-wrap { width: 160px } } .fixed-form__submit { display: none; color: transparent; cursor: pointer; width: 111px; height: 28px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; font-weight: normal; font-size: 18px; line-height: 115.5%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 } @media (min-width: 641px) { .fixed-form__submit { display: -webkit-flex; display: -ms-flexbox; display: flex } } .fixed-form__error-message { padding-top: 7px; font-family: "Sofia Pro"; font-style: normal; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; opacity: 0.5; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); display: none; transition: all 0.3s ease; position: absolute } .fixed-form__warning-input { display: none; transition: all 0.3s ease } .fixed-form__warning { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 32px } @media (min-width: 641px) { .fixed-form__warning { margin-bottom: 0 } } @media (min-width: 1025px) { .fixed-form__warning { cursor: pointer } } .fixed-form__warning-checkbox { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 16px; height: 16px; border: 1px solid #171717; margin-right: 8px } .fixed-form__warning-checkbox.\--error { border: 2px solid #eb5757 } .fixed-form__warning-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #171717 } @media (min-width: 1025px) { .fixed-form__warning-text { max-width: 264px } } .fixed-form__warning-input:checked + label > .fixed-form__warning-checkbox { border: 1px solid #2e1a47; background-color: #2e1a47 } .fixed-form__submit.\--mobile { display: block; height: 43px; width: 100% } @media (min-width: 641px) { .fixed-form__submit.\--mobile { display: none } } .fixed-form__form-close { position: absolute; height: 16px; width: 16px; right: 16px; top: 16px; padding: 0; background-size: contain; background-repeat: no-repeat; background-image: url(https://d8ua7bnpmn6n9.cloudfront.net/resources/img/close-old.svg); background-color: transparent; border: none } @media (min-width: 641px) { .fixed-form__form-close { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .quiz-container { } .quiz-container .title-card-grid__card-description-wrap { } @media (min-width: 1025px) { .quiz-container .title-card-grid__card-description-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-grid-cards { padding: 48px 16px 16px } @media (min-width: 641px) { .title-txt-grid-cards { padding: 64px 16px 7px } } @media (min-width: 1025px) { .title-txt-grid-cards { padding: 80px 40px 0 } } .title-txt-grid-cards__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .title-txt-grid-cards__title { font-size: 3.6rem; margin-bottom: 40px } } @media (min-width: 1025px) { .title-txt-grid-cards__title { margin-bottom: 35px } } .title-txt-grid-cards__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } @media (min-width: 641px) { .title-txt-grid-cards__txt { padding-right: 128px } } @media (min-width: 1025px) { .title-txt-grid-cards__txt { padding-right: 0; width: calc(50% - 25px) } } .title-txt-grid-cards__btns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 14px; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } @media (min-width: 641px) { .title-txt-grid-cards__btns { margin-bottom: 0; -webkit-justify-content: unset; -ms-flex-pack: unset; justify-content: unset } } .title-txt-grid-cards__btn { display: block; border: none; width: 74px; font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; padding: 0 16px 8px; background: transparent; color: #171717; position: relative; opacity: 0.4; cursor: pointer; transition: all 0.3s ease } @media (min-width: 641px) { .title-txt-grid-cards__btn { width: 96px } } .title-txt-grid-cards__btn:hover, .title-txt-grid-cards__btn.\--active { opacity: 1 } .title-txt-grid-cards__btn.\--vip { border: 2px solid transparent; padding: 8px 17px; color: #2c2b6c; width: auto; outline: 2px solid #2c2b6c; transition: all 0.3s ease; margin-left: 16px; margin-top: -7px } @media (min-width: 641px) { .title-txt-grid-cards__btn.\--vip { padding: 2px 29px; margin-top: -4px } } .title-txt-grid-cards__btn.\--vip:hover { border: 2px solid #ffffff; outline: 2px solid #2c2b6c; background: #2c2b6c; color: #ffffff } .title-txt-grid-cards__btn.\--vip:hover + .title-txt-grid-cards__btn-icon.vip.icon {} .title-txt-grid-cards__btn.\--vip:hover + .title-txt-grid-cards__btn-icon.vip.icon svg.vip { transition: all 0.3s ease } .title-txt-grid-cards__btn.\--vip:hover + .title-txt-grid-cards__btn-icon.vip.icon svg.vip path { transition: all 0.3s ease; fill: #ffffff } .title-txt-grid-cards__btn.\--vip.\--active { background: #2c2b6c; color: #ffffff } .title-txt-grid-cards__btn.\--vip.\--active::after { content: none } .title-txt-grid-cards__btn.\--vip.\--active + .title-txt-grid-cards__btn-icon.vip.icon {} .title-txt-grid-cards__btn.\--vip.\--active + .title-txt-grid-cards__btn-icon.vip.icon svg.vip { transition: all 0.3s ease } .title-txt-grid-cards__btn.\--vip.\--active + .title-txt-grid-cards__btn-icon.vip.icon svg.vip path { transition: all 0.3s ease; fill: #ffffff } .title-txt-grid-cards__btn:focus { outline: none } .title-txt-grid-cards__btn::after { display: block; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 2px; width: 0; background-color: #171717; transition: all 0.3s ease } .title-txt-grid-cards__btn.\--active::after { width: 100% } .title-txt-grid-cards__btn:not(:last-of-type) { margin-right: 20px } .title-txt-grid-cards__pointer-block { display: none; width: 15px; height: 15px; border-bottom: 1px solid rgba(46, 26, 71, .4); border-right: 1px solid rgba(46, 26, 71, .4); position: absolute; left: 60px; top: -21px; background: white; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) } @media (min-width: 641px) { .title-txt-grid-cards__pointer-block { left: 80px; top: -18px } } .title-txt-grid-cards__btn-icon { width: 11px; height: 11px; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; cursor: pointer; right: 0; top: -3px } @media (min-width: 641px) { .title-txt-grid-cards__btn-icon { right: 28px; top: 2px; width: 20px; height: 20px } } .title-txt-grid-cards__btn-icon svg { height: 17px } .title-txt-grid-cards__btn-icon:hover {} @media (min-width: 1025px) { .title-txt-grid-cards__btn-icon:hover {} .title-txt-grid-cards__btn-icon:hover + .title-txt-grid-cards__pointer-block { display: block } } .title-txt-grid-cards__btn-icon.vip { top: 1px; right: 4px } @media (min-width: 641px) { .title-txt-grid-cards__btn-icon.vip { right: 34px } } .title-txt-grid-cards__btn-hover-text-wrap { height: 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 10px; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } @media (min-width: 1025px) { .title-txt-grid-cards__btn-hover-text-wrap { width: 650px } } .title-txt-grid-cards__btn-wrap { position: relative } .title-txt-grid-cards__btn-wrap.\--vip {} .title-txt-grid-cards__btn-wrap.\--vip .title-txt-grid-cards__pointer-block { right: 2px; left: unset; top: -18px } @media (min-width: 641px) { .title-txt-grid-cards__btn-wrap.\--vip .title-txt-grid-cards__pointer-block { right: 38px; top: -20px } } .title-txt-grid-cards__btn-hover-text { position: absolute; left: 0; width: 100%; padding: 9px 13px; display: none; font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; border: 1px solid rgba(46, 26, 71, .4) } @media (min-width: 641px) { .title-txt-grid-cards__btn-hover-text { width: auto; position: static } } .title-txt-grid-cards__grid {} @media (min-width: 641px) { .title-txt-grid-cards__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-txt-grid-cards__grid { grid-column-gap: 50px } } .mk-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 8px; background-color: #e5e5e5; z-index: 9999 } .mk-modal__inner { padding: 52px 38px; background-color: #ffffff; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .mk-modal__inner { padding: 88px 112px; max-width: 592px } } @media (min-width: 1025px) { .mk-modal__inner { padding: 84px 112px } } .mk-modal p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: 0.02em; color: #171717; margin-bottom: 43px } @media (min-width: 641px) { .mk-modal p { margin-bottom: 32px } } .mk-modal button, .mk-modal a { background-color: #ffffff; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 118px; height: 43px; font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 14px; line-height: 100%; color: #171717; border: 1px solid #000000; cursor: pointer; transition: all 0.3s ease } @media (min-width: 641px) { .mk-modal button, .mk-modal a { width: 160px } } .mk-modal button:hover, .mk-modal a:hover { background-color: #000000; color: white } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .media-text-wrap { padding: 48px 16px 36px } @media (min-width: 641px) { .media-text-wrap { padding: 64px 16px 17px } } @media (min-width: 1025px) { .media-text-wrap { padding: 80px 40px 9px } } .\--video-files { } .\--video-files .title-grid-files__grid { display: block } @media (min-width: 641px) { .\--video-files .title-grid-files__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } @media (min-width: 1025px) { .\--video-files .title-grid-files__grid { -ms-grid-columns: (minmax(368px, 1fr))[auto-fill]; grid-template-columns: repeat(auto-fill, minmax(368px, 1fr)) } } .\--video-files .title-grid-files__file-card { margin-bottom: 82px } @media (min-width: 641px) { .\--video-files .title-grid-files__file-card { margin-bottom: 0 } } .\--pdf-files { } @media (min-width: 641px) { .\--pdf-files { padding: 0 16px } } @media (min-width: 1025px) { .\--pdf-files { padding: 0 40px } } .\--pdf-files .title-grid-files { padding: 34px 16px; margin-left: 0; margin-right: 0 } @media (min-width: 641px) { .\--pdf-files .title-grid-files { padding: 43px 0 } } @media (min-width: 1025px) { .\--pdf-files .title-grid-files { padding: 51px 0 } } .title-txt-grid-cards__grid { } .title-txt-grid-cards__grid.\--container { padding: 0 0 78px } @media (min-width: 641px) { .title-txt-grid-cards__grid.\--container { padding: 64px 0 84px; -ms-grid-columns: (352px)[2]; grid-template-columns: repeat(2, 352px); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-txt-grid-cards__grid.\--container { padding: 80px 0 84px; -ms-grid-columns: (522px)[2]; grid-template-columns: repeat(2, 522px); grid-column-gap: 103px } } .title-txt-grid-cards__grid.container .card-img-txt-icons-btn::after { display: none } .title-txt-grid-cards__grid.\--class-modification { padding: 0 16px 0; max-width: 1440px; margin: 0 8px; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } @media (min-width: 641px) { .title-txt-grid-cards__grid.\--class-modification { padding: 0 16px 0; margin: 0 auto } } @media (min-width: 1025px) { .title-txt-grid-cards__grid.\--class-modification { padding: 0 40px 0 } } .title-txt-grid-cards__grid.\--class-modification .card-img-txt-icons-btn { } .title-txt-grid-cards__grid.\--class-modification .card-img-txt-icons-btn::after { content: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .login { padding: 56px 8px 63px } @media (min-width: 641px) { .login { padding: 120px 80px 73px; border-bottom: none } } @media (min-width: 1025px) { .login { padding: 144px 40px 140px; display: -ms-grid; display: grid; -ms-grid-columns: 472px 1fr; grid-template-columns: 472px 1fr; -ms-grid-rows: min-content 1fr; grid-template-rows: min-content 1fr; grid-column-gap: 152px; grid-row-gap: 30px } } .login__title { font-family: "Sofia Pro"; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; font-weight: normal; margin-bottom: 48px } @media (min-width: 641px) { .login__title { font-size: 3.6rem; line-height: 110%; font-weight: 300; margin-bottom: 40px } } @media (min-width: 1025px) { .login__title { margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2 } } .login__txt { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 72px } @media (min-width: 641px) { .login__txt { margin-bottom: 40px } } @media (min-width: 1025px) { .login__txt { margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2; -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3 } } .login__form { } @media (min-width: 1025px) { .login__form { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 3 } } .login fieldset { } @media (min-width: 641px) { .login fieldset { margin-bottom: 18px } } @media (min-width: 1025px) { .login fieldset { margin-bottom: 4px } } .login fieldset > * { margin-bottom: 31px } .login__fieldset-legend { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 32px; font-weight: normal } @media (min-width: 641px) { .login__fieldset-legend { font-size: 2.4rem; line-height: 110%; margin-bottom: 40px; font-weight: 300 } } .login__input-wrap { position: relative; margin-bottom: 32px !important } .login__input { background-color: transparent; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; padding-left: 0; padding-right: 70px } .login__error { display: none; position: absolute; padding-top: 7px; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757 } .login__error a { font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; color: #eb5757; border-bottom: 1px solid #eb5757; padding: 0; margin-left: 6px } .login__input-error { padding-top: 7px; font-weight: 250; font-size: 12px; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; position: absolute } .login__input.\--error + .login__input-error { display: block } .login____footer { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .login__submit { background-color: transparent; width: 160px; height: 43px; font-family: "Minion Pro"; font-style: normal; font-weight: normal; line-height: 100%; border-color: #000000; margin-right: 16px } @media (min-width: 641px) { .login__submit { margin-right: 32px } } @media (min-width: 641px) { .login__submit { margin-right: 48px } } .login__reset-password-link-wrap { padding-top: 13px } .login__thanks-recovery-text { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .login__thanks-recovery-wrap { margin-bottom: 0 !important } .login__reset-password-link { font-style: normal; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; cursor: pointer } .login__recover-password { text-transform: uppercase; font-weight: normal; line-height: 120%; font-size: 28.8px; font-size: 1.8rem } @media (min-width: 641px) { .login__recover-password { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 33px !important } } .login__recover-password-btn { width: 256px; font-size: 22.4px; font-size: 1.4rem } .login__link { font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline } .login .firebase_login_erros { color: #ff0000; -ms-grid-column: 2; grid-column-start: 2; -ms-grid-row: 3; grid-row-start: 3 } .login__footer { margin-bottom: 27px } @media (min-width: 1025px) { .login__footer { margin-bottom: 0 } } #reset-password { display: none; } .reset-password { } .reset-password__footer input { width: 256px; margin-bottom: 27px } #reset-password-message { display: none } #reset-password-message p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .account { } .account__wrap { padding: 0; margin: 0 } @media (min-width: 641px) { .account__wrap { margin: 0 auto } } .account .promo-code__pop-up { display: none; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; z-index: 999 } .account .promo-code__pop-up::after { display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); opacity: 0.8 } .account .promo-code__pop-up-wrap { width: 344px; height: 240px; background: #ffffff; padding: 50px 40px; cursor: default; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; position: absolute; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } @media (min-width: 641px) { .account .promo-code__pop-up-wrap { width: 592px; height: 292px; padding: 88px 112px } } .account .promo-code__pop-up-wrap .text { text-align: center; font-size: 25.6px; font-size: 1.6rem } .account__banner { height: 90px; position: relative; margin-bottom: 96px; background-image: linear-gradient(180deg, #6c5bd7 0%, rgba(146, 132, 235, 0) 100%), linear-gradient(76.01deg, #2e1a47 0%, rgba(223, 84, 226, 0) 100%); background-size: cover; background-position: center; background-repeat: no-repeat } @media (min-width: 641px) { .account__banner { height: 192px; margin-bottom: 40px } } @media (min-width: 1025px) { .account__banner { height: 319px; margin-bottom: 56px } } .account__banner-wrap { background-size: cover; background-position: center; background-repeat: no-repeat; height: 100% } .account__banner-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center } .account__banner-bg { height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat } .account__photo { height: 100%; background-color: #ffffff; background-image: url(/img/profile.svg); background-size: cover; background-position: center; background-repeat: no-repeat } .account__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center } .account__card-img { height: 460px; margin-bottom: 48px } @media (min-width: 641px) { .account__card-img { height: 212px; margin-bottom: 32px } } @media (min-width: 1025px) { .account__card-img { height: 365px } } .account__card-img img { width: 100%; height: 100%; object-fit: cover } .account__card { } @media (min-width: 641px) { .account__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .account__card-info { position: relative; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .account__card-title { padding-left: 20px; padding-right: 20px; text-align: center; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 641px) { .account__card-title { padding-left: 0; padding-right: 0; font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 11px; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } } @media (min-width: 1025px) { .account__card-title { margin-bottom: 10px } } .account input[type="file"] { display: none } .account .\--edit-btn { display: block; width: 30px; height: 30px; cursor: pointer } @media (min-width: 641px) { .account .\--edit-btn { width: 162px; height: 24px } } @media (min-width: 1025px) { .account .\--edit-btn { width: 162px; height: 24px } } .account .\--edit-btn:focus { outline: none } .account .\--edit-btn p { font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: #000000; text-transform: capitalize; display: none } @media (min-width: 641px) { .account .\--edit-btn p { display: block } } @media (min-width: 1025px) { .account .\--edit-btn p { display: block } } .account .\--edit-btn img { height: 100%; width: 100%; object-fit: contain } .account__banner-edit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .75) } .account__banner-edit-btn { position: absolute; right: 8px; bottom: 6px; -webkit-transform: unset; -ms-transform: unset; transform: unset; left: unset; top: unset } @media (min-width: 641px) { .account__banner-edit-btn { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } } @media (min-width: 1025px) { .account__banner-edit-btn { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } } .account__banner-edit-btn picture { display: block } @media (min-width: 641px) { .account__banner-edit-btn picture { display: none } } @media (min-width: 1025px) { .account__banner-edit-btn picture { display: none } } .account__photo-wrap { position: absolute; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; left: 8px; bottom: 0; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); z-index: 2 } @media (min-width: 641px) { .account__photo-wrap { height: 216px; width: 216px; left: 72px } } @media (min-width: 1025px) { .account__photo-wrap { height: 280px; width: 280px; left: 136px } } .account__photo-edit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, .75) } .account__photo-edit-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .account__photo-edit-btn picture { display: block } @media (min-width: 641px) { .account__photo-edit-btn picture { display: none } } @media (min-width: 1025px) { .account__photo-edit-btn picture { display: none } } .account__title-txt { margin-left: 16px; margin-right: 16px; margin-bottom: 72px } @media (min-width: 641px) { .account__title-txt { margin-left: 336px; margin-right: 80px; margin-bottom: 96px } } @media (min-width: 1025px) { .account__title-txt { margin-left: 560px; margin-right: 144px } } .account__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px } .account__title h1 { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase } @media (min-width: 641px) { .account__title h1 { font-size: 2.4rem; line-height: 110% } } .account__title .account__account-info-edit-btn { width: 24px; height: 24px; padding: 0; border: none; background-color: transparent } @media (min-width: 641px) { .account__title .account__account-info-edit-btn { width: 24px; height: 24px } } @media (min-width: 1025px) { .account__title .account__account-info-edit-btn { width: 24px; height: 24px } } .account__title-txt-description { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 32px } .account__txt { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .account__title-cards { margin-left: 16px; margin-right: 16px; margin-bottom: 48px } @media (min-width: 641px) { .account__title-cards { margin-left: 144px; margin-right: 80px; margin-bottom: 14px } } @media (min-width: 1025px) { .account__title-cards { margin-left: 248px; margin-right: 144px; margin-bottom: 82px } } .account__cards-title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: normal; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .account__cards-title { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 48px } } .account__cards-grid { } @media (min-width: 641px) { .account__cards-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 32px; grid-row-gap: 32px } } @media (min-width: 1025px) { .account__cards-grid { grid-column-gap: 48px; grid-row-gap: 48px } } .account__card:not(:last-of-type) { margin-bottom: 72px } @media (min-width: 641px) { .account__card:not(:last-of-type) { margin-bottom: 0 } } .account__card-icon-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; position: absolute; top: 1px; right: 0 } @media (min-width: 641px) { .account__card-icon-wrap { position: relative } } .account__card-icon { height: 17px; width: 13px; display: block; cursor: pointer } .account__card-icon-img { width: 100%; height: 100%; display: block; object-position: center; object-fit: contain } .account .\--not-saved { display: none } .account__form { margin-left: 16px; margin-right: 16px; margin-bottom: 48px } @media (min-width: 641px) { .account__form { margin-left: auto; max-width: 352px; margin-right: 80px; margin-bottom: 14px } } @media (min-width: 1025px) { .account__form { max-width: 576px; margin-right: 144px; margin-bottom: 130px } } .account__form-inner { } .account__form-inner .promo-code { padding: 17px 0 51px; position: relative } @media (min-width: 641px) { .account__form-inner .promo-code { padding: 31px 0 32px } } @media (min-width: 641px) { .account__form-inner .promo-code { padding: 23px 0 32px } } .account__form-inner .promo-code .registration__input-error { padding: 7px 0 0; position: absolute; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; transition: all 0.3s ease; opacity: 0; left: 0; bottom: 20px; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .account__form-inner .promo-code input[name='promocode'].\--error + .registration__input-error { opacity: 1; display: block; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .account__form-inner .promo-code p { position: relative; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; color: #171717; margin-bottom: 32px } @media (min-width: 641px) { .account__form-inner .promo-code p { margin-bottom: 20px } } .account__form-inner .promo-code p span { color: #27ae60 } .account__form-inner .promo-code .promo-code__input { background-color: transparent; padding: 0 20px 0 0; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-family: "Sofia Pro", sans-serif; font-weight: 300; letter-spacing: 0.02em } .account__form-inner .promo-code .icon { width: 20px; height: 20px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; position: relative } .account__form-inner .promo-code .icon::after { content: ''; width: 15px; height: 15px; border-bottom: 1px solid rgba(46, 26, 71, 0.4); border-right: 1px solid rgba(46, 26, 71, 0.4); position: absolute; left: 3px; opacity: 0; top: -20px; background: #ffffff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2 } @media (min-width: 456px) { .account__form-inner .promo-code .icon::after { left: -0.5px; top: -19px } } .account__form-inner .promo-code svg { height: 14px } .account__form-inner .promo-code .promo-code__hint { background: #ffffff; border: 1px solid rgba(46, 26, 71, .4); position: absolute; top: -20px; right: 0; height: 36px; z-index: 1; opacity: 0; width: 100%; max-width: 450px } @media (min-width: 456px) { .account__form-inner .promo-code .promo-code__hint { top: -43px } } .account__form-inner .promo-code .promo-code__hint span { font-family: "Sofia Pro"; font-style: normal; font-weight: 250; color: #000000; position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; padding: 9px 12px; background-color: #ffffff; z-index: 3; font-size: 11px; line-height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .account__form-inner .promo-code .icon:hover + .promo-code__hint { opacity: 1 } .account__form-inner .promo-code .icon:hover { } .account__form-inner .promo-code .icon:hover::after { opacity: 1 } .account legend { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 40px } .account legend h1 { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; float: left } @media (min-width: 641px) { .account legend h1 { font-size: 2.4rem; line-height: 110% } } .account legend picture { display: none } .account legend .account__account-info-edit-btn { width: 24px; height: 24px; padding: 0; border: none; margin-left: auto; background-color: transparent } @media (min-width: 641px) { .account legend .account__account-info-edit-btn { width: 24px; height: 24px } } @media (min-width: 1025px) { .account legend .account__account-info-edit-btn { width: 24px; height: 24px } } .account input { font-family: "Sofia Pro"; background: transparent; font-size: 25.6px; font-size: 1.6rem; font-style: normal; font-weight: 300; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em; margin-bottom: 31px } .account input::-webkit-input-placeholder { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .account input:-ms-input-placeholder { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .account input::placeholder { font-family: "Sofia Pro"; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .account__form-select-wrap { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: (39px)[2]; grid-template-rows: repeat(2, 39px); grid-column-gap: 24px; grid-row-gap: 32px; margin-bottom: 31px; position: relative } @media (min-width: 641px) { .account__form-select-wrap { grid-column-gap: 32px; -ms-grid-rows: (42px)[2]; grid-template-rows: repeat(2, 42px) } } @media (min-width: 1025px) { .account__form-select-wrap { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: 43px; grid-template-rows: 43px; grid-column-gap: 46px } } .account__form-select-label { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: 1px solid #000000; position: relative } .account__form-select-label.\--big { min-width: 200px } .account__form-select-label::after { content: ''; display: block; background-image: url(/img/arrow-vector-for-carry.svg); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 50%; right: 24px; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); width: 12px; height: 7px; z-index: -1 } .account__date-select { font-family: "Sofia Pro"; color: #2e1a47; background-color: transparent; border: none; font-size: 25.6px; font-size: 1.6rem; font-weight: 300; line-height: 100%; cursor: pointer; text-align-last: center; width: 100%; height: 100%; padding-right: 7px } @media (min-width: 1800px) { .account__date-select { padding-right: 16px } } .account__date-select:focus { outline: none } .account__form-select-label.\--year { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3 } @media (min-width: 1025px) { .account__form-select-label.\--year { -ms-grid-column: 3; grid-column-start: 3; grid-column-end: 4; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2 } } .account__form-input.\--tel { margin-bottom: 71px } .account__form-legend { font-size: 28.8px; font-size: 1.8rem; line-height: 120%; font-weight: normal; text-transform: uppercase; margin-bottom: 40px } @media (min-width: 641px) { .account__form-legend { font-size: 2.4rem; font-weight: 300; line-height: 110% } } .account__input-select-wrap { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); -ms-grid-rows: 39px; grid-template-rows: 39px; grid-column-gap: 24px; margin-bottom: 31px } .account__input-select-wrap .account__form-select-label { } .account__input-select-wrap .account__form-select-label::after { right: 12px } .account__input-select-wrap .birthday-date-select { padding-right: 10px } @media (min-width: 641px) { .account__input-select-wrap { grid-column-gap: 32px; -ms-grid-rows: 42px; grid-template-rows: 42px } } @media (min-width: 1025px) { .account__input-select-wrap { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); -ms-grid-rows: 43px; grid-template-rows: 43px; grid-column-gap: 41px } } .account__input-select-wrap input { margin-bottom: 0; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end } @media (min-width: 1025px) { .account__input-select-wrap input { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2 } } .account__input-select-wrap label, .account__input-select-wrap .account__form-input-small { } @media (min-width: 1025px) { .account__input-select-wrap label, .account__input-select-wrap .account__form-input-small { -ms-grid-column: 3; grid-column-start: 3; grid-column-end: 4; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 2 } } .account__state-select { background-color: transparent; border: none; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; cursor: pointer; text-align-last: center } .account__state-select:focus { outline: none } .account__inputs-wrap { } @media (min-width: 641px) { .account__inputs-wrap { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .account__inputs-wrap { grid-column-gap: 48px } } .account__form-footer { display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: 5px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .account__form-footer { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } } @media (min-width: 1025px) { .account__form-footer { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset } } .account__form-submit { cursor: pointer; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; margin-bottom: 31px; width: 152px } @media (min-width: 641px) { .account__form-submit { margin-bottom: 24px; width: 160px } } @media (min-width: 1025px) { .account__form-submit { margin-bottom: 0 } } .account__delete-acc { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em; text-decoration: underline } @media (min-width: 1025px) { .account__delete-acc { line-height: 40px } .account__delete-acc:first-child { margin-right: 50px } } .account .\--block-to-edit { display: none } .account .date-error { position: absolute; bottom: -28px; left: 12px; color: #eb5757 } .account .\--loader { background-color: #777777 } .account__form-footer-wrap-link { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; text-transform: capitalize } @media (min-width: 1025px) { .account__form-footer-wrap-link { height: 40px } } .account__title-form-image { width: 24px; height: 24px } .account__form-input { font-size: 25.6px; font-size: 1.6rem; color: #000000; font-style: normal; font-weight: 300; line-height: 24px; padding: 0; height: 25px; border-bottom: 1px solid #000000; margin-bottom: 31px } .account .ingredients__pop-up-wrapper::after { background: rgba(0, 0, 0, .5) } .account .ingredients__pop-up { width: 344px; height: 304px; padding: 41px 22px; min-height: unset; border-radius: unset } .account .ingredients__pop-up.\--notification { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 240px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 52px 40px 61px } @media (min-width: 641px) { .account .ingredients__pop-up.\--notification { padding: 88px 112px; height: 290px } } .account .ingredients__pop-up.\--notification .text { text-align: center; font-size: 25.6px; font-size: 1.6rem } .account .ingredients__pop-up.\--notification .login__submit.close-pop-up { margin: 0 } @media (min-width: 641px) { .account .ingredients__pop-up { width: 592px; height: 346px; padding: 65px 80px 58px } } .account .ingredients__pop-up input { padding: 0; margin-bottom: 0 } .account .ingredients__pop-up .group { position: relative; margin-bottom: 31px } @media (min-width: 641px) { .account .ingredients__pop-up .group { display: block } } .account .ingredients__pop-up .change-password-popup__btn-wrap { padding-top: 12px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .account .ingredients__pop-up .login__input-error { position: absolute } .account .ingredients__pop-up .login__submit { margin-right: 0; width: 134px; font-size: 28.8px; font-size: 1.8rem } @media (min-width: 641px) { .account .ingredients__pop-up .login__submit { width: 160px } } .account .ingredients__pop-up .close-pop-up { margin-left: 32px; width: 134px; font-size: 28.8px; font-size: 1.8rem } @media (min-width: 641px) { .account .ingredients__pop-up .close-pop-up { width: 160px } } @media (min-width: 1025px) { .account .ingredients__pop-up .close-pop-up { margin-left: 48px } } .account .delete-account { display: none; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; z-index: 999 } .account .delete-account::after { display: block; content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); opacity: 0.8 } .account .delete-account-wrap .alert { position: absolute; display: none; top: 100%; transition: auto; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; color: #eb5757; padding-top: 7px; width: 100%; text-align: center } .account .delete-account-wrap { width: 344px; height: 240px; background: #ffffff; padding: 50px 40px; cursor: default; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } @media (min-width: 641px) { .account .delete-account-wrap { width: 592px; height: 292px; padding: 88px 112px } } .account .delete-account-wrap.\--notification { position: relative; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 52px 40px 61px; height: 240px } @media (min-width: 641px) { .account .delete-account-wrap.\--notification { height: 292px; padding: 88px 112px 87px } } .account .delete-account-wrap.\--notification .text { text-align: center; font-size: 25.6px; font-size: 1.6rem } .account .delete-account-wrap.\--notification .login__submit { font-size: 28.8px; font-size: 1.8rem; margin: 0 } .account .delete-account-wrap label, .account .delete-account-wrap input { display: none } .account .delete-account-wrap button { color: #171717; border: 1px solid #171717; background-color: transparent; width: 118px; height: 43px; font-family: "Minion Pro"; font-style: normal; font-weight: normal; line-height: 100%; font-size: 28.8px; font-size: 1.8rem; display: inline-block; padding: 12px 24px; text-align: center; transition: all 0.3s ease; cursor: pointer } @media (min-width: 641px) { .account .delete-account-wrap button { width: 160px } } .account .delete-account-wrap button:hover { color: #ffffff; background: #171717 } .account .delete-account-wrap .button-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative } .account .delete-account-wrap p { font-size: 25.6px; font-size: 1.6rem; line-height: 24px; text-align: center; margin-bottom: 43px } @media (min-width: 641px) { .account .delete-account-wrap p { margin-bottom: 48px } } .delete-looks-video-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: none } .delete-looks-video-popup__background { background-color: rgba(0, 0, 0, .5); padding: 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100% } .delete-looks-video-popup__inner { background-color: #ffffff; padding: 52px 38px } @media (min-width: 641px) { .delete-looks-video-popup__inner { width: 592px; margin: 0 auto; padding: 88px } } .delete-looks-video-popup__message { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; margin-bottom: 43px } @media (min-width: 641px) { .delete-looks-video-popup__message { margin-bottom: 48px } } .delete-looks-video-popup__button-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .delete-looks-video-popup .accept-button, .delete-looks-video-popup .close-button { width: 118px; height: 43px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .delete-looks-video-popup .accept-button, .delete-looks-video-popup .close-button { width: 160px } } .delete-looks-video-popup .accept-button { margin-right: 32px } @media (min-width: 641px) { .delete-looks-video-popup .accept-button { margin-right: 48px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .lifestyle { } .lifestyle .title-card-grid .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .lifestyle .title-card-grid .title-card-grid__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } .lifestyle .title-card-grid .title-card-grid__card .title-card-grid__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-order: 2; -ms-flex-order: 2; order: 2 } @media (min-width: 1025px) { .lifestyle .title-card-grid .title-card-grid__card .title-card-grid__card-title { -webkit-order: 3; -ms-flex-order: 3; order: 3 } } .lifestyle .title-card-grid .title-card-grid__card .title-card-grid__card-date { -webkit-order: 3; -ms-flex-order: 3; order: 3 } @media (min-width: 1025px) { .lifestyle .title-card-grid .title-card-grid__card .title-card-grid__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .lifestyle .filter-component { overflow: auto; padding-top: 55px; position: fixed; top: 0; height: calc(100vh - 56px); z-index: 99; background-color: #ffffff; display: none } @media (min-width: 641px) { .lifestyle .filter-component { overflow: visible; padding-top: 0; position: static; display: -ms-grid; display: grid; height: auto; padding-right: 16px; padding-left: 8px } } @media (min-width: 1025px) { .lifestyle .filter-component { padding-right: 40px; padding-left: 32px; max-width: 1440px; margin: 0 auto } } .lifestyle .\--active.filter-component__open-list-btn { display: none } @media (min-width: 641px) { .lifestyle .\--active.filter-component__open-list-btn { display: block } } .lifestyle .\--close.filter-component__close-list-btn { } @media (max-width: 640px) { .lifestyle .\--close.filter-component__close-list-btn { display: none !important } } .lifestyle .filter-component__filter-wrap { border-top-color: transparent } @media (min-width: 641px) { .lifestyle .filter-component__filter-wrap { border-top-color: #777777 } } .lifestyle .filter-component__inner { padding-left: 8px; padding-right: 8px } .lifestyle .filter-component__result-container { } @media (max-width: 640px) { .lifestyle .filter-component__result-container { display: none; background-color: #ffffff; margin-top: 32px; min-height: 100vh } } @media (min-width: 641px) { .lifestyle .filter-component__result-container { padding-top: 48px } } @media (min-width: 1025px) { .lifestyle .filter-component__result-container { padding-top: 56px } } .lifestyle .filter-component__result-container .title-card-grid__card { display: block } @media (min-width: 1025px) { .lifestyle .filter-component__result-container .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .lifestyle .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 48px } @media (min-width: 1025px) { .lifestyle .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 0 } } .lifestyle .card-slider .card-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .lifestyle .card-slider .card-slider__card picture { } @media (min-width: 1025px) { .lifestyle .card-slider .card-slider__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .lifestyle .card-slider .card-slider__card .card-slider__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } @media (min-width: 1025px) { .lifestyle .card-slider .card-slider__card .card-slider__card-title { -webkit-order: 3; -ms-flex-order: 3; order: 3 } } .lifestyle .card-slider .card-slider__card .card-slider__card-date { } @media (min-width: 1025px) { .lifestyle .card-slider .card-slider__card .card-slider__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .lifestyle .filter-component + .title-card-grid { padding-top: 10px } @media (min-width: 641px) { .lifestyle .filter-component + .title-card-grid { padding-top: 49px } } @media (min-width: 1025px) { .lifestyle .filter-component + .title-card-grid { padding-top: 65px } } .lifestyle__mobile-btn { font-family: "Sofia Pro"; /* display: block; it has been replaced by the mobile-btn-icon */ display: none; background: #ffffff; position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 152px; height: 43px; line-height: 40px; text-align: center; border: 1px solid #171717; z-index: 99 } @media (min-width: 641px) { .lifestyle__mobile-btn { display: none } } .lifestyle__mobile-btn.\--apply { display: none; width: 152px; height: 43px } .lifestyle__mobile-btn-close { display: none; position: fixed; top: 11px; right: 15px; width: 24px; height: 24px; background-image: url(/img/close.svg); background-size: cover; z-index: 100; background-color: transparent; border-color: transparent } .lifestyle__mobile-btn-icon { display: none } @media (max-width: 640px) { .lifestyle__mobile-btn-icon { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; cursor: pointer; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); position: fixed; z-index: 100; left: auto; right: 10px; top: calc(50% + 30px); background: #ffffff; border: 1px solid #f3f2f4; border-radius: 40px; box-sizing: border-box; box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } .lifestyle__mobile-btn-icon .filter-icon { width: 16px; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex } .lifestyle__mobile-btn-icon .filter-icon.filter-filled { position: relative } .lifestyle__mobile-btn-icon .filter-icon.filter-filled::after { content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #eb5757; position: absolute; top: -4px; right: -4px } .lifestyle__mobile-btn-icon .filter-icon.hide { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .registration { padding: 56px 8px 86px } @media (min-width: 641px) { .registration { padding: 120px 80px 35px } } @media (min-width: 1025px) { .registration { padding: 144px 40px 81px; display: -ms-grid; display: grid; -ms-grid-columns: 472px 1fr; grid-template-columns: 472px 1fr; -ms-grid-rows: min-content 1fr; grid-template-rows: min-content 1fr; grid-column-gap: 152px } } .registration__title { font-style: normal; font-weight: normal; font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .registration__title { font-size: 3.6rem; line-height: 110%; font-weight: 300; margin-bottom: 40px } } @media (min-width: 1025px) { .registration__title { font-size: 3.6rem; line-height: 100%; font-weight: 300; padding-bottom: 35px; margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2 } } .registration__txt { margin-bottom: 72px } @media (min-width: 641px) { .registration__txt { margin-bottom: 40px } } @media (min-width: 1025px) { .registration__txt { margin-bottom: 0; -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 2; -ms-grid-row: 2; grid-row-start: 2; grid-row-end: 3 } } .registration__txt p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .registration__form {} @media (min-width: 1025px) { .registration__form { -ms-grid-column: 2; grid-column-start: 2; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; grid-row-end: 3 } } .registration fieldset {} @media (min-width: 1025px) { .registration fieldset { margin-bottom: 4px } } .registration__fieldset-legend { font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-transform: uppercase; margin-bottom: 32px } @media (min-width: 641px) { .registration__fieldset-legend { font-weight: 300; font-size: 2.4rem; line-height: 110%; margin-bottom: 40px } } .registration__form-description { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 32px } @media (min-width: 641px) { .registration__form-description { margin-bottom: 48px } } .registration fieldset > span { font-family: "Sofia Pro"; display: block; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 8px } .registration__input-wrap { position: relative } .registration__input-wrap.\--name { margin-bottom: 32px } .registration__input-wrap.\--email { margin-bottom: 48px } .registration__input-wrap.\--salon { margin-bottom: 24px } .registration__input-wrap.\--place { margin-bottom: 56px } .registration__input-wrap.\--pass { margin-bottom: 32px } .registration__input-wrap.\--pass-confirm { margin-bottom: 22px } @media (min-width: 641px) { .registration__input-wrap.\--pass-confirm { margin-bottom: 20px } } .registration__input { font-family: "Sofia Pro"; padding: 0 20px 0 0; background-color: transparent; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 300; letter-spacing: 0.02em } .registration .errors > li { padding: 4px 0 0; font-weight: 300; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757 } .registration__input-error { padding: 7px 0 0; position: absolute; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; transition: all 0.3s ease; opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5) } .registration__input.\--error + .registration__input-error { display: block; opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .registration__submit { background-color: transparent; width: 160px; height: 43px; margin-right: 16px; border-color: #000000 } @media (min-width: 641px) { .registration__submit { margin-right: 32px } } @media (min-width: 1025px) { .registration__submit { margin-right: 48px } } .registration__privacy-input { display: none } .registration__privacy-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-bottom: 32px } @media (min-width: 641px) { .registration__privacy-wrap { margin-bottom: 23px; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .registration__privacy-checkbox { margin-top: 2px; width: 16px; height: 16px; border: 1px solid #000000; margin-right: 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; transition: all 0.3s ease } .registration__link { font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; font-style: normal; font-weight: 300; color: #000000 } .registration__link a { text-decoration: underline } .registration__privacy-checkbox.\--error { border-color: #eb5757 } .registration__privacy-input:checked + .registration__privacy-wrap .registration__privacy-checkbox { border-color: #2e1a47; background-color: #2e1a47 } .registration .promo-code { padding: 17px 0 51px; position: relative } @media (min-width: 641px) { .registration .promo-code { padding: 31px 0 32px } } @media (min-width: 641px) { .registration .promo-code { padding: 23px 0 32px } } .registration .promo-code .registration__input-error { padding: 7px 0 0; position: absolute; font-weight: 250; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; text-transform: uppercase; color: #eb5757; display: none; transition: all 0.3s ease; opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5) } .registration .promo-code input[name='promocode'].\--error + .registration__input-error { opacity: 1; display: block; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } .registration .promo-code p { position: relative; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; color: #171717; margin-bottom: 32px } @media (min-width: 641px) { .registration .promo-code p { margin-bottom: 20px } } .registration .promo-code input { background-color: transparent; padding: 0 20px 0 0; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; font-family: "Sofia Pro", sans-serif; font-weight: 300; letter-spacing: 0.02em } .registration .promo-code .icon { width: 20px; height: 20px; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; position: relative } .registration .promo-code .icon::after { content: ''; width: 15px; height: 15px; border-bottom: 1px solid rgba(46, 26, 71, 0.4); border-right: 1px solid rgba(46, 26, 71, 0.4); position: absolute; left: 3px; opacity: 0; top: -20px; background: #ffffff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2 } @media (min-width: 456px) { .registration .promo-code .icon::after { left: -0.5px; top: -19px } } .registration .promo-code svg { height: 14px } .registration .promo-code .promo-code__hint { background: #ffffff; border: 1px solid rgba(46, 26, 71, .4); position: absolute; top: -20px; right: 0; height: 36px; z-index: 1; opacity: 0; width: 100%; max-width: 450px } @media (min-width: 456px) { .registration .promo-code .promo-code__hint { top: -43px } } .registration .promo-code .promo-code__hint span { font-family: "Sofia Pro"; font-style: normal; font-weight: 250; color: #000000; position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; padding: 9px 12px; background-color: #ffffff; z-index: 3; font-size: 11px; line-height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .registration .promo-code .icon:hover + .promo-code__hint { opacity: 1 } .registration .promo-code .icon:hover {} .registration .promo-code .icon:hover::after { opacity: 1 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .sign-up-verify { padding: 68px 0 40px; font-family: "Sofia Pro" } @media (min-width: 641px) { .sign-up-verify { padding: 184px 0 119px } } @media (min-width: 1025px) { .sign-up-verify { padding: 176px 0 92px } } .sign-up-verify .container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .sign-up-verify__title { font-family: "Sofia Pro"; font-style: normal; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 120%; text-align: center; text-transform: uppercase; margin-bottom: 27px; padding: 0 8px } @media (min-width: 641px) { .sign-up-verify__title { font-weight: 300; font-size: 3.6rem; line-height: 110%; margin-bottom: 24px } } .sign-up-verify__description { margin-bottom: 45px; padding: 0 8px } @media (min-width: 641px) { .sign-up-verify__description { margin-bottom: 56px; max-width: 576px } } .sign-up-verify__description p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; padding: 0; margin: 0 } .sign-up-verify__btn { min-width: 160px; min-height: 43px } .al-homepage { display: block; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .canvas { } .canvas .small-cards-product { padding: 0 0 50px } @media (min-width: 641px) { .canvas .small-cards-product { margin: 0 -16px } } @media (min-width: 1025px) { .canvas .small-cards-product { padding: 48px 0 50px; margin: 0 8px } } .canvas .img-txt-chess__text-wrapper p { padding: 0; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em } .canvas .small-cards-product-three__inner h4 { font-style: normal; font-weight: bold; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; text-transform: lowercase; margin-bottom: 16px } @media (min-width: 641px) { .canvas .small-cards-product-three__inner h4 { margin-bottom: 32px } } @media (min-width: 1025px) { .canvas .small-cards-product-three__inner h4 { font-weight: bold; font-size: 4rem; letter-spacing: 0.02em; margin-bottom: 56px } } .caviar { } .caviar .img-txt-chess__img-filter { display: none } .caviar .title-bg-copy { } @media (min-width: 641px) { .caviar .title-bg-copy { margin-bottom: 100px } } @media (min-width: 1025px) { .caviar .title-bg-copy { margin-bottom: 90px; padding-top: 120px; padding-right: 130px } } .caviar .title-txt-btn-img-bg__inner { min-height: 760px !important } @media (min-width: 641px) { .caviar .title-txt-btn-img-bg__inner { min-height: 760px !important } } @media (max-width: 640px) { .caviar .title-txt-btn-img-bg__inner { min-height: 520px !important } } .caviar .title-txt-btn-img-bg__inner-content { top: 120px } @media (max-width: 640px) { .caviar .title-txt-btn-img-bg__inner-content { top: 42px } } @media (min-width: 641px) { .caviar .title-txt-btn-img-bg__inner-content { top: 64px } } @media (min-width: 1025px) { .caviar .title-txt-btn-img-bg__inner-content { top: 120px } } .caviar .title-bg-copy__txt { } @media (min-width: 1025px) { .caviar .title-bg-copy__txt { margin-top: 85px } } .caviar .img-txt-chess { grid-gap: 0; margin-bottom: 4px; padding-left: 0; padding-right: 0 } @media (min-width: 641px) { .caviar .img-txt-chess { padding: 0 0 37px; margin-bottom: 0 } } @media (min-width: 1025px) { .caviar .img-txt-chess { margin-bottom: 115px; padding-left: 0; padding-right: 0 } } .caviar .img-txt-chess__card { } @media (min-width: 641px) { .caviar .img-txt-chess__card { grid-column-gap: 0 } } .caviar .img-txt-chess__img-wrapper { height: 360px; margin-bottom: 0 } @media (min-width: 641px) { .caviar .img-txt-chess__img-wrapper { height: 384px; min-height: unset } } @media (min-width: 1025px) { .caviar .img-txt-chess__img-wrapper { height: 640px } } .caviar .img-txt-chess__img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center } .caviar .img-txt-chess__text-wrapper { height: auto; min-height: 360px; background-color: #f3f2f4; margin-bottom: 0; padding: 64px 32px 72px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media (min-width: 641px) { .caviar .img-txt-chess__text-wrapper { height: 384px; min-height: 384px; padding-left: 48px; padding-right: 48px } } @media (min-width: 1025px) { .caviar .img-txt-chess__text-wrapper { height: 640px; padding-left: 128px; padding-right: 128px } } .caviar .img-txt-chess h3 { font-family: "Didot"; font-style: italic; font-weight: normal; font-size: 57.6px; font-size: 3.6rem; line-height: 125%; padding: 0; margin-bottom: 6px } @media (min-width: 641px) { .caviar .img-txt-chess h3 { font-size: 4.8rem } } .caviar .img-txt-chess p { padding: 0 } .caviar .title-txt-slider { padding-top: 20px; padding-bottom: 0 } @media (min-width: 641px) { .caviar .title-txt-slider { padding-bottom: 70px } } .caviar .title-txt-slider__title { font-weight: normal; margin-bottom: 4px; font-size: 57.6px; font-size: 3.6rem } @media (min-width: 641px) { .caviar .title-txt-slider__title { font-weight: normal; line-height: 125%; margin-bottom: 0; font-size: 4.8rem } } .caviar .title-txt-slider__slider-wrapper { } @media (min-width: 641px) { .caviar .title-txt-slider__slider-wrapper { margin-top: 54px } } @media (min-width: 1025px) { .caviar .title-txt-slider__slider-wrapper { margin-top: 0 } } .caviar .img-title-copy-grid { padding-top: 50px } @media (min-width: 641px) { .caviar .img-title-copy-grid { padding-bottom: 0; padding-top: 15px } } @media (min-width: 1025px) { .caviar .img-title-copy-grid { margin-top: 25px } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .set-password { padding-bottom: 64px } @media (min-width: 641px) { .set-password { margin-bottom: 62px } } @media (min-width: 1025px) { .set-password { margin-bottom: 108px } } .set-password legend { margin-bottom: 32px } @media (min-width: 641px) { .set-password legend { margin-bottom: 40px } } .set-password__inputs-wrap { margin-bottom: 0 } @media (min-width: 641px) { .set-password__inputs-wrap { margin-bottom: 16px } } @media (min-width: 1025px) { .set-password__inputs-wrap { margin-bottom: 4px } } .set-password__input-wrap { margin-bottom: 32px } .set-password__save-btn { width: 160px; height: 43px; font-weight: normal; font-size: 28.8px; font-size: 1.8rem; line-height: 100%; text-align: center; margin-bottom: 0 } .set-password__thanks-recovery-wrap { display: none } .set-password__thanks-recovery-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; margin-bottom: 27px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .live-workshop-page { padding: 0 16px; max-width: 1440px; margin: 0 auto } @media (min-width: 1025px) { .live-workshop-page { padding: 0 32px } } .live-workshop-page .filter-component { margin-bottom: 26px } @media (min-width: 641px) { .live-workshop-page .filter-component { padding-top: 24px; margin-bottom: 66px } } @media (min-width: 1025px) { .live-workshop-page .filter-component { padding-top: 32px; margin-bottom: 81px } } .live-workshop__filter-results { } .live-workshop__filter-results .live-workshops__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .live-workshop__filter-results .live-workshops__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .live-workshop__filter-results .\--saved.live-workshops__card-icon { display: none } .live-workshop__filter-results .\--saved .\--saved.live-workshops__card-icon { display: block } .live-workshop__filter-results .\--saved .\--not-saved.live-workshops__card-icon { display: none } @media (min-width: 1025px) { .live-workshop__filter-results { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 32px } } .live-workshop__filter-results .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_click_to_play { height: 333px !important } } .live-workshop__filter-results .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_responsive_padding { height: 333px !important } } .live-workshop__filter-results.\--no-results { padding: 32px 16px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .\--alterna-pro-edu { padding: 0 16px; max-width: 1440px; margin: 0 auto } @media (min-width: 1025px) { .\--alterna-pro-edu { padding: 0 32px } } .\--alterna-pro-edu .filter-component { margin-bottom: 26px } @media (min-width: 641px) { .\--alterna-pro-edu .filter-component { padding-top: 24px; margin-bottom: 66px } } @media (min-width: 1025px) { .\--alterna-pro-edu .filter-component { padding-top: 32px; margin-bottom: 81px } } .live-workshop__filter-results { } .live-workshop__filter-results .live-workshops__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .live-workshop__filter-results .live-workshops__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .live-workshop__filter-results .\--saved.live-workshops__card-icon { display: none } .live-workshop__filter-results .\--saved .\--saved.live-workshops__card-icon { display: block } .live-workshop__filter-results .\--saved .\--not-saved.live-workshops__card-icon { display: none } @media (min-width: 1025px) { .live-workshop__filter-results { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 32px } } .live-workshop__filter-results .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_click_to_play { height: 333px !important } } .live-workshop__filter-results .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_responsive_padding { height: 333px !important } } .live-workshop__filter-results.\--no-results { padding: 32px 16px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .\--product-knowledge { padding: 0 16px; max-width: 1440px; margin: 0 auto } @media (min-width: 1025px) { .\--product-knowledge { padding: 0 32px } } .\--product-knowledge .filter-component { margin-bottom: 26px } @media (min-width: 641px) { .\--product-knowledge .filter-component { padding-top: 24px; margin-bottom: 66px } } @media (min-width: 1025px) { .\--product-knowledge .filter-component { padding-top: 32px; margin-bottom: 81px } } .live-workshop__filter-results { } .live-workshop__filter-results .live-workshops__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .live-workshop__filter-results .live-workshops__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .live-workshop__filter-results .\--saved.live-workshops__card-icon { display: none } .live-workshop__filter-results .\--saved .\--saved.live-workshops__card-icon { display: block } .live-workshop__filter-results .\--saved .\--not-saved.live-workshops__card-icon { display: none } @media (min-width: 1025px) { .live-workshop__filter-results { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 32px } } .live-workshop__filter-results .wistia_click_to_play { height: 185px !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_click_to_play { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_click_to_play { height: 333px !important } } .live-workshop__filter-results .wistia_responsive_padding { height: 185px !important; padding: 0 !important; margin-bottom: 8px } @media (min-width: 641px) { .live-workshop__filter-results .wistia_responsive_padding { height: 197px !important } } @media (min-width: 1025px) { .live-workshop__filter-results .wistia_responsive_padding { height: 333px !important } } .live-workshop__filter-results.\--no-results { padding: 32px 16px; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .\--sds-text { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 100% } @media (min-width: 1025px) { .\--sds-text { max-width: 490px } } .title-txt-grid-cards { padding: 48px 16px 16px } @media (min-width: 641px) { .title-txt-grid-cards { padding: 64px 16px 7px } } @media (min-width: 1025px) { .title-txt-grid-cards { padding: 80px 40px 0 } } .title-txt-grid-cards__title { font-size: 51.2px; font-size: 3.2rem; line-height: 100%; text-transform: uppercase; margin-bottom: 48px } @media (min-width: 641px) { .title-txt-grid-cards__title { font-size: 3.6rem; margin-bottom: 40px } } @media (min-width: 1025px) { .title-txt-grid-cards__title { margin-bottom: 35px } } .title-txt-grid-cards__text-inline { font-size: 16px } .title-txt-grid-cards__btns { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 14px } @media (min-width: 641px) { .title-txt-grid-cards__btns { margin-bottom: 2px } } .title-txt-grid-cards__btn { display: block; border: none; font-family: "Sofia Pro"; font-size: 19.2px; font-size: 1.2rem; line-height: 100%; padding: 0 13px 8px; background: transparent; color: #171717; opacity: 0.4; position: relative; cursor: pointer; transition: all 0.3s ease } @media (min-width: 641px) { .title-txt-grid-cards__btn { font-size: 1.8rem; padding: 0 16px 8px } } .title-txt-grid-cards__btn:hover, .title-txt-grid-cards__btn.\--active { opacity: 1 } .title-txt-grid-cards__btn:focus { outline: none } .title-txt-grid-cards__btn::after { display: block; content: ""; position: absolute; bottom: -4px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 2px; width: 0; background-color: #171717; transition: all 0.3s ease } @media (min-width: 641px) { .title-txt-grid-cards__btn::after { bottom: 0 } } .title-txt-grid-cards__btn.\--active::after { width: 100% } .title-txt-grid-cards__btn:not(:last-of-type) { margin-right: 16px } .title-txt-grid-cards__btn:last-of-type { margin-right: 0 } @media (min-width: 641px) { .title-txt-grid-cards__btn:last-of-type { margin-right: 32px } } .title-txt-grid-cards__grid { } @media (min-width: 641px) { .title-txt-grid-cards__grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-column-gap: 32px } } @media (min-width: 1025px) { .title-txt-grid-cards__grid { grid-column-gap: 50px } } .title-txt-grid-cards__title-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .title-txt-grid-cards__select-wrap { display: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); height: 100% } @media (min-width: 641px) { .title-txt-grid-cards__select-wrap { display: block } } .title-txt-grid-cards__select-wrap.\--mobile { display: block } @media (min-width: 641px) { .title-txt-grid-cards__select-wrap.\--mobile { display: none } } .title-txt-grid-cards__select { display: none } .title-txt-grid-cards ul.options { position: absolute; background: #ffffff; box-shadow: 0 6px 4px rgba(0, 0, 0, .25); z-index: 1 } .title-txt-grid-cards .styledSelect, .title-txt-grid-cards ul.options li { font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 14px; line-height: 100%; color: #595a5e; padding: 8px 10px; min-width: 151px } .title-txt-grid-cards .styledSelect { position: relative; text-decoration: underline } .title-txt-grid-cards .styledSelect::after { content: ''; position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 16px; background-image: url(/img/arrow-to-bottom_black.svg); background-size: contain } .container.\--image-files { } @media (min-width: 641px) { .container.\--image-files { padding-left: 0; padding-right: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .about-hero { width: 100%; height: 100vh; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-size: cover; background-position: center; overflow: hidden } #about-alterna .about-hero .header { max-width: 1280px; max-width: 80rem; position: relative; text-align: center; margin-top: 5% } @media (max-width: 1024px) { #about-alterna .about-hero .header { max-width: 56rem; margin-top: 40% } } @media (max-width: 640px) { #about-alterna .about-hero .header { margin-top: 12% } } #about-alterna .about-hero .header h1 { font-size: 76.8px; font-size: 4.8rem; font-weight: 400; font-family: "Chiswick Sans" } @media (max-width: 1024px) { #about-alterna .about-hero .header h1 { font-size: 3.2rem; line-height: 1.3 } } @media (max-width: 640px) { #about-alterna .about-hero .header h1 { font-size: 2rem; line-height: 3.4rem; font-weight: 600 } } #about-alterna .about-hero .header .year { position: absolute; font-family: "Chiswick Sans"; font-size: 320px; font-size: 20rem; opacity: 0.05 } @media (max-width: 1024px) { #about-alterna .about-hero .header .year { font-size: 17rem } } @media (max-width: 640px) { #about-alterna .about-hero .header .year { font-size: 9.6rem } } #about-alterna .about-hero .header .year.top-left { top: -160px; top: -10rem; left: -256px; left: -16rem } @media (max-width: 1024px) { #about-alterna .about-hero .header .year.top-left { top: -8rem; left: -5rem } } @media (max-width: 640px) { #about-alterna .about-hero .header .year.top-left { top: -6rem; left: 2rem } } #about-alterna .about-hero .header .year.bottom-right { bottom: -192px; bottom: -12rem; right: 0 } @media (max-width: 1024px) { #about-alterna .about-hero .header .year.bottom-right { bottom: -10rem; right: -5rem } } @media (max-width: 640px) { #about-alterna .about-hero .header .year.bottom-right { bottom: -8rem; right: 2rem } } #about-alterna .about-hero .desc { position: relative; top: 5%; right: 20%; width: 45%; padding: 64px; padding: 4rem; background-color: white } @media (max-width: 1024px) { #about-alterna .about-hero .desc { right: 10%; width: 55%; margin-bottom: 10%; margin-top: 12% } #about-alterna .about-hero .desc p { font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.02em } } @media (max-width: 640px) { #about-alterna .about-hero .desc { top: 20%; right: auto; width: calc(100% - 4rem); margin: 0 auto; padding: 1.6rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .three-pics-no-bg.big-feature-version { position: relative; width: 100%; padding: 192px 224px; padding: 12rem 14rem; overflow: hidden; background-size: cover; background-position: center } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version { padding: 6rem 1.6rem 10rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section { position: relative; width: 50% } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: -6rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .content { width: 80%; max-width: 704px; max-width: 44rem; margin-top: 192px; margin-top: 12rem } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .content { width: 55%; margin-top: 10rem } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .content .sub-title { margin-top: 1.6rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 144px; margin-top: 9rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper { margin-top: 7rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; width: 40%; margin-top: -3rem; margin-right: -1.6rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 704px; width: 44rem; height: 704px; height: 44rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 35rem; height: 35rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 10em; height: 16rem; margin-top: 8rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .portrait-image { position: absolute; top: -192px; top: -12rem; right: -400px; right: -25rem; width: 512px; width: 32rem; height: 576px; height: 36rem; z-index: 1 } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .portrait-image { top: -5rem; right: -15rem; width: 21rem; height: 23rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .left-section .image-wrapper .portrait-image { position: static; width: 11rem; height: 12.4rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section { position: relative; width: 50% } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section { width: 100%; margin-top: 2.4rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .paragraph { padding: 480px 96px 336px; padding: 30rem 6rem 21rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .paragraph { padding: 15rem 6rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .paragraph { padding: 2.4rem } } #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .landscape-image { position: absolute; bottom: -240px; bottom: -15rem; right: -160px; right: -10rem; width: 704px; width: 44rem; height: 448px; height: 28rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .landscape-image { width: 25rem; height: 18rem; bottom: -10rem; right: -4rem } } @media (max-width: 1024px) and (max-width: 640px) { #about-alterna .three-pics-no-bg.big-feature-version .wrapper .right-section .landscape-image { width: 12.4rem; height: 9.5rem; bottom: -8rem; right: -1.6rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .three-pics-no-bg.small-feature-version { position: relative; width: 100%; padding: 192px 224px 0; padding: 12rem 14rem 0; overflow: hidden; background-size: cover; background-position: center } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version { padding: 6rem 1.6rem 5rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section { position: relative; width: 50% } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .content { width: 80%; max-width: 704px; max-width: 44rem; margin-top: 192px; margin-top: 12rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .content { margin-top: 8rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .content { margin-top: 4rem; width: 20rem } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .content .sub-title { margin-top: 1.6rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 104px; margin-top: 6.5rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper { margin-top: 7rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; width: 40%; margin-top: 2rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .portrait-image { width: 704px; width: 44rem; height: 864px; height: 54rem; margin-top: 96px; margin-top: 6rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .portrait-image { width: 24rem; height: 29.5rem; margin-top: 0 } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .portrait-image { position: absolute; left: -2rem; bottom: -30rem; width: 15rem; height: 26rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 432px; width: 27rem; height: 656px; height: 41rem; margin-left: 80px; margin-left: 5rem; margin-top: 32px; margin-top: 2rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 16.6rem; height: 25rem; margin-left: 3rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .left-section .image-wrapper .featured-image { width: 11.3rem; height: 17rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section { position: relative; top: -352px; top: -22rem; right: -112px; right: -7rem; width: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section { top: -10rem; right: -4rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section { position: static; width: 100%; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .paragraph { width: 70%; max-width: 704px; max-width: 44rem; margin-right: -10%; margin-top: 192px; margin-top: 12rem } @media (max-width: 1230px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .paragraph { width: 60%; margin-right: -35% } } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .paragraph { width: 34rem; margin-top: 9rem; margin-right: auto } } @media (max-width: 800px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .paragraph { width: 26rem } } @media (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .paragraph { width: 16rem; margin-top: 4rem; margin-left: 14rem } } #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .landscape-image { width: 844.8px; width: 52.8rem; height: 707.2px; height: 44.2rem } @media (max-width: 1024px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .landscape-image { width: 31rem; height: 26rem } } @media (max-width: 1024px) and (max-width: 640px) { #about-alterna .three-pics-no-bg.small-feature-version .wrapper .right-section .landscape-image { position: absolute; top: 4rem; right: 0; width: 12rem; height: 15.5rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .two-pics-w-bg { position: relative; width: 100%; padding: 192px 48px 448px 240px; padding: 12rem 3rem 28rem 15rem; overflow: hidden /* Template 2013 */ } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg { padding: 6rem 1.6rem } } #about-alterna .two-pics-w-bg .upper-section { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; margin-top: 176px; margin-top: 11rem; margin-bottom: 64px; margin-bottom: 4rem; z-index: 1 } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { #about-alterna .two-pics-w-bg .upper-section { margin-top: 6rem; margin-bottom: 16rem } } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg .upper-section { margin-top: 0 } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg .upper-section { margin-top: 4.5rem } } #about-alterna .two-pics-w-bg .upper-section .content { max-width: 656px; max-width: 41rem; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0 } @media (max-width: 640px) { #about-alterna .two-pics-w-bg .upper-section .content { max-width: 20rem } } #about-alterna .two-pics-w-bg .upper-section .images-container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (max-width: 640px) { #about-alterna .two-pics-w-bg .upper-section .images-container { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-right: -8rem; margin-top: -30rem } } #about-alterna .two-pics-w-bg .upper-section .images-container .portrait-image { position: relative; top: -352px; top: -22rem; width: 515.2px; width: 32.2rem; height: 668.8px; height: 41.8rem; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; margin-right: 32px; margin-right: 2rem } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg .upper-section .images-container .portrait-image { width: 15rem; height: 19.5rem; top: -10rem } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg .upper-section .images-container .portrait-image { width: 11.3rem; height: 14.6rem; top: auto; margin: 0; margin-bottom: 3rem; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto } } #about-alterna .two-pics-w-bg .upper-section .images-container .landscape-image { width: 704px; width: 44rem; height: 470.4px; height: 29.4rem } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg .upper-section .images-container .landscape-image { width: 21rem; height: 14rem } } #about-alterna .two-pics-w-bg .paragraph { position: relative; width: 65%; max-width: 1456px; max-width: 91rem; margin: 0 auto; padding: 160px; padding: 10rem; text-align: center; z-index: 1 } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg .paragraph { width: 75%; padding: 6.4rem; font-size: 1.4rem } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg .paragraph { width: 100%; padding: 2.4rem } } #about-alterna .two-pics-w-bg .background { position: absolute; bottom: -16px; bottom: -1rem; left: 0; width: 100%; z-index: 0 } #about-alterna .two-pics-w-bg.variant { padding-bottom: 160px; padding-bottom: 10rem } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant { padding-bottom: 3rem } } #about-alterna .two-pics-w-bg.variant .upper-section { position: relative; left: -320px; left: -20rem; width: 95vw; margin-top: 64px; margin-top: 4rem } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { #about-alterna .two-pics-w-bg.variant .upper-section { margin-top: 4rem; margin-bottom: 4rem } } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg.variant .upper-section { left: -4rem; width: 90vw } } @media (max-width: 800px) { #about-alterna .two-pics-w-bg.variant .upper-section { width: calc(99vw - 4rem) } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant .upper-section { width: 100%; left: 0 } } #about-alterna .two-pics-w-bg.variant .upper-section .content { -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-top: -80px; margin-top: -5rem } @media (min-width: 1024px) and (max-width: 1370px) { #about-alterna .two-pics-w-bg.variant .upper-section .content { max-width: 30%; position: relative; right: -7rem } } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg.variant .upper-section .content { max-width: 40% } } @media (max-width: 800px) { #about-alterna .two-pics-w-bg.variant .upper-section .content { max-width: 27rem } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant .upper-section .content { width: 70%; margin-top: 0 } #about-alterna .two-pics-w-bg.variant .upper-section .content p { margin-top: 1.6rem } } #about-alterna .two-pics-w-bg.variant .upper-section .images-container { position: relative; left: 160px; left: 10rem } @media (min-width: 1024px) and (max-width: 1370px) { #about-alterna .two-pics-w-bg.variant .upper-section .images-container { } #about-alterna .two-pics-w-bg.variant .upper-section .images-container .portrait-image { width: 25.8rem; height: 33.5rem } #about-alterna .two-pics-w-bg.variant .upper-section .images-container .landscape-image { width: 35.2rem; height: 23.5rem } } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg.variant .upper-section .images-container { position: static } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant .upper-section .images-container { margin: 0; width: 20% } } #about-alterna .two-pics-w-bg.variant .upper-section .portrait-image { top: auto; margin-right: 0 } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant .upper-section .portrait-image { width: 12.9rem; height: 24.2rem; margin-left: -3rem } } #about-alterna .two-pics-w-bg.variant .upper-section .landscape-image { margin-top: 320px; margin-top: 20rem; margin-left: 32px; margin-left: 2rem } @media (max-width: 1024px) { #about-alterna .two-pics-w-bg.variant .upper-section .landscape-image { margin-top: 8rem; margin-left: 3rem; width: 27rem; height: 18rem } } @media (max-width: 800px) { #about-alterna .two-pics-w-bg.variant .upper-section .landscape-image { margin-top: 12rem; margin-left: 3rem; width: 24rem; height: 16rem } } @media (max-width: 640px) { #about-alterna .two-pics-w-bg.variant .upper-section .landscape-image { height: 9rem; width: 13.5rem; position: absolute; top: -12rem; right: -1.6rem; margin: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .two-pics-no-bg { position: relative; width: 100%; padding: 192px 224px 144px; padding: 12rem 14rem 9rem; overflow: hidden } @media (max-width: 1024px) { #about-alterna .two-pics-no-bg { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .two-pics-no-bg { padding: 6rem 1.6rem } } #about-alterna .two-pics-no-bg .left-section { width: 43%; max-width: 500px; margin-top: 102.4px; margin-top: 6.4rem } @media (max-width: 1024px) { #about-alterna .two-pics-no-bg .left-section { margin-top: 4rem; max-width: 340px } } @media (max-width: 640px) { #about-alterna .two-pics-no-bg .left-section { width: 68%; max-width: 230; margin-top: 2.4rem } } #about-alterna .two-pics-no-bg .left-section .square-image { width: 100%; height: 0; padding-bottom: 100%; margin-top: 64px; margin-top: 4rem } @media (max-width: 1024px) { #about-alterna .two-pics-no-bg .left-section .square-image { margin-top: 2.4rem } } @media (max-width: 640px) { #about-alterna .two-pics-no-bg .left-section .square-image { display: none } } #about-alterna .two-pics-no-bg .left-section .paragraph { margin-top: 64px; margin-top: 4rem } @media (max-width: 1024px) { #about-alterna .two-pics-no-bg .left-section .paragraph { margin-top: 2.4rem } } #about-alterna .two-pics-no-bg .lean-image { position: absolute; top: 0; right: -5%; width: 55%; height: 0; padding-bottom: 121% } @media (max-width: 1024px) { #about-alterna .two-pics-no-bg .lean-image { top: auto; bottom: 0 } } @media (max-width: 640px) { #about-alterna .two-pics-no-bg .lean-image { right: -34%; top: 0; bottom: auto; height: 100% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .one-pic-no-bg { position: relative; width: 100%; padding: 192px 240px; padding: 12rem 15rem; overflow: hidden } @media (max-width: 1024px) { #about-alterna .one-pic-no-bg { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .one-pic-no-bg { padding: 6rem 1.6rem } } #about-alterna .one-pic-no-bg .content-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-top: -80px; margin-top: -5rem } @media (max-width: 1024px) { #about-alterna .one-pic-no-bg .content-wrapper { margin-top: 5rem } } #about-alterna .one-pic-no-bg .content-wrapper .upper-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 38% } @media (max-width: 1024px) { #about-alterna .one-pic-no-bg .content-wrapper .upper-content { margin-top: -10rem } } @media (max-width: 640px) { #about-alterna .one-pic-no-bg .content-wrapper .upper-content { margin-top: 0; width: calc(100% - 13rem) } } #about-alterna .one-pic-no-bg .content-wrapper .upper-content .main-title { width: 80% } @media (max-width: 640px) { #about-alterna .one-pic-no-bg .content-wrapper .upper-content .main-title { width: 100% } } #about-alterna .one-pic-no-bg .content-wrapper .paragraph { width: 60%; padding: 176px; padding: 11rem; margin-top: 102.4px; margin-top: 6.4rem; position: relative; z-index: 1 } @media (max-width: 1024px) { #about-alterna .one-pic-no-bg .content-wrapper .paragraph { padding: 6rem } } @media (max-width: 640px) { #about-alterna .one-pic-no-bg .content-wrapper .paragraph { width: 100%; padding: 2.4rem; text-align: center } } #about-alterna .one-pic-no-bg .landscape-image { position: absolute; left: 0; top: 544px; top: 34rem; width: 1120px; width: 70rem; height: 768px; height: 48rem } @media (max-width: 1024px) { #about-alterna .one-pic-no-bg .landscape-image { left: 4rem; top: calc(50% - 11rem); width: 45rem; height: 30rem } } @media (max-width: 800px) { #about-alterna .one-pic-no-bg .landscape-image { top: calc(50% - 15rem); width: 39rem; height: 26rem } } @media (max-width: 640px) { #about-alterna .one-pic-no-bg .landscape-image { left: 0; top: calc(50% - 10rem); width: 13rem; height: 18rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .one-pic-with-bg { position: relative; width: 100%; min-height: 100vh; padding: 192px 224px 320px; padding: 12rem 14rem 20rem; background-size: cover; background-position: center; overflow: hidden /* Template 1997 */ } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg { padding: 6.4rem 4rem; min-height: auto } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg { padding: 6rem 1.6rem } } #about-alterna .one-pic-with-bg .content-wrapper { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 128px 192px; padding: 8rem 12rem; margin-top: 192px; margin-top: 12rem; background-color: rgba(255, 255, 255, .9) } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg .content-wrapper { width: 100%; margin: 5rem auto; padding: 8rem 6rem } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg .content-wrapper { width: 100%; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 1.2rem; padding: 2.4rem 1.6rem 2.4rem 9.6rem; margin-bottom: 0 } } #about-alterna .one-pic-with-bg .content-wrapper .titles { width: 35% } @media (max-width: 640px) { #about-alterna .one-pic-with-bg .content-wrapper .titles { width: 100% } #about-alterna .one-pic-with-bg .content-wrapper .titles .sub-title { margin-top: 1.6rem } } #about-alterna .one-pic-with-bg .content-wrapper .paragraph { width: 50% } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg .content-wrapper .paragraph { width: 45% } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg .content-wrapper .paragraph { width: 100%; margin-top: 1.6rem } } #about-alterna .one-pic-with-bg .portrait-image { position: absolute; left: 139.2px; left: 8.7rem; bottom: 160px; bottom: 10rem; width: 169.6px; width: 10.6rem; height: 640px; height: 40rem } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg .portrait-image { left: calc(46% - 3rem); top: 29rem; width: 6.6rem; height: 25rem } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg .portrait-image { left: 2.4rem; bottom: calc(50% - 12rem); width: 6.4rem; height: 24rem } } #about-alterna .one-pic-with-bg.variant { padding: 192px 224px; padding: 12rem 14rem } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg.variant { min-height: 70rem; padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg.variant { min-height: 70rem; padding: 6rem 1.6rem } } #about-alterna .one-pic-with-bg.variant .content-wrapper { display: block; width: 60%; max-width: 680px; padding: 0; margin: 0 auto; background-color: transparent; text-align: center } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg.variant .content-wrapper { position: absolute; top: 50%; left: 0; right: 0; padding: 0; margin-top: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg.variant .content-wrapper { position: static; width: 100%; margin-top: 4rem; padding-left: 35%; text-align: left; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } #about-alterna .one-pic-with-bg.variant .content-wrapper .titles { width: 100% } #about-alterna .one-pic-with-bg.variant .content-wrapper .paragraph { width: 100%; margin-top: 64px; margin-top: 4rem } #about-alterna .one-pic-with-bg.variant .portrait-image { position: absolute; left: 192px; left: 12rem; top: 384px; top: 24rem; width: 160px; width: 10rem; height: 800px; height: 50rem } @media (max-width: 1024px) { #about-alterna .one-pic-with-bg.variant .portrait-image { width: 9.2rem; height: 50rem; left: 3rem; top: 15rem } } @media (max-width: 640px) { #about-alterna .one-pic-with-bg.variant .portrait-image { left: 2rem; top: calc(55% - 25rem) } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .one-pic-white-block-no-bg { position: relative; width: 100%; padding: 192px 240px; padding: 12rem 15rem; overflow: hidden } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg { padding: 6rem 1.6rem } } #about-alterna .one-pic-white-block-no-bg .content-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-top: -80px; margin-top: -5rem } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper { margin-top: 5rem } } #about-alterna .one-pic-white-block-no-bg .content-wrapper .upper-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 465px } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .upper-content { margin-top: -10rem } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .upper-content { margin-top: 0; width: calc(100% - 13rem) } } #about-alterna .one-pic-white-block-no-bg .content-wrapper .upper-content .main-title { width: 80% } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .upper-content .main-title { width: 100% } } #about-alterna .one-pic-white-block-no-bg .content-wrapper .paragraph { width: 60%; padding: 176px; padding: 11rem; margin-top: 102.4px; margin-top: 6.4rem; position: relative; z-index: 1 } #about-alterna .one-pic-white-block-no-bg .content-wrapper .paragraph.full-size { width: 100%; padding: 0; margin-top: 40px; font-size: 24px; letter-spacing: 0.48px } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .paragraph.full-size { font-size: 14px; letter-spacing: 0.28px } } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .paragraph { padding: 6rem } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .content-wrapper .paragraph { width: 100%; padding: 0; text-align: left; font-size: 14px; letter-spacing: 0.28px } } #about-alterna .one-pic-white-block-no-bg .white-box { width: 44vw; height: auto; padding: 118px; background-color: #ffffff; margin-top: 76px; position: relative; z-index: 1; margin-left: auto; margin-right: 0; font-size: 14px; letter-spacing: 0.28px } #about-alterna .one-pic-white-block-no-bg .white-box .paragraph { width: 100%; padding: 0; margin: 0; position: relative; z-index: 1; font-size: 24px; letter-spacing: 0.48px } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .white-box .paragraph { padding: 0; font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.28px } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .white-box .paragraph { width: 100%; padding: 0; text-align: center; font-size: 14px; letter-spacing: 0.24px } } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .white-box { padding: 60px; width: 50.781vw } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .white-box { width: 100%; padding: 24px; text-align: center; margin-top: 45vw } } #about-alterna .one-pic-white-block-no-bg .landscape-image { position: absolute; left: 0; top: 544px; top: 34rem; width: 48vw; height: 768px; height: 48rem } @media (max-width: 1024px) { #about-alterna .one-pic-white-block-no-bg .landscape-image { left: 40px; top: calc(50% - 15rem); height: 29.297vw; width: 42.969vw } } @media (max-width: 640px) { #about-alterna .one-pic-white-block-no-bg .landscape-image { left: 0; top: 50%; width: 69.067vw; height: 18rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .no-pic-white-block-with-bg { position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; padding: 192px 240px; padding: 12rem 15rem; overflow: hidden; padding-bottom: 47.222vw } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg { padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg { padding: 6rem 1.6rem } } #about-alterna .no-pic-white-block-with-bg .heading-year { color: #ffffff } #about-alterna .no-pic-white-block-with-bg .content-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-top: -80px; margin-top: -5rem } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper { margin-top: 5rem } } #about-alterna .no-pic-white-block-with-bg .content-wrapper .upper-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 465px } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .upper-content { margin-top: -10rem } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .upper-content { margin-top: 0; width: calc(100% - 13rem) } } #about-alterna .no-pic-white-block-with-bg .content-wrapper .upper-content .main-title { width: 80% } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .upper-content .main-title { width: 100% } } #about-alterna .no-pic-white-block-with-bg .content-wrapper .paragraph { width: 60%; padding: 176px; padding: 11rem; margin-top: 102.4px; margin-top: 6.4rem; position: relative; z-index: 1 } #about-alterna .no-pic-white-block-with-bg .content-wrapper .paragraph.full-size { width: 100%; padding: 0; margin-top: 40px; font-size: 24px; letter-spacing: 0.48px } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .paragraph.full-size { font-size: 14px; letter-spacing: 0.28px } } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .paragraph { padding: 6rem } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .content-wrapper .paragraph { width: 100%; padding: 0; text-align: left; font-size: 14px; letter-spacing: 0.28px } } #about-alterna .no-pic-white-block-with-bg .white-box { width: 63.194vw; height: auto; padding: 72px; background-color: #ffffff; position: relative; z-index: 1; font-size: 14px; letter-spacing: 0.28px; margin: auto; margin-top: 76px; text-align: center } #about-alterna .no-pic-white-block-with-bg .white-box .paragraph { width: 100%; padding: 0; margin: 0; position: relative; z-index: 1; font-size: 24px; letter-spacing: 0.48px } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .white-box .paragraph { padding: 0; font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.28px } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .white-box .paragraph { width: 100%; padding: 0; text-align: center; font-size: 14px; letter-spacing: 0.24px; margin-top: 12px } } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .white-box { padding: 60px; width: 50.781vw } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .white-box { width: 100%; padding: 24px; text-align: center; margin-top: 2vw; margin-bottom: 30vw } } #about-alterna .no-pic-white-block-with-bg .landscape-image { position: absolute; left: 0; top: 544px; top: 34rem; width: 46vw; height: 768px; height: 48rem } @media (max-width: 1024px) { #about-alterna .no-pic-white-block-with-bg .landscape-image { left: 40px; top: calc(50% - 15rem); height: 29.297vw; width: 42.969vw } } @media (max-width: 640px) { #about-alterna .no-pic-white-block-with-bg .landscape-image { left: 0; top: 50%; width: 69.067vw; height: 18rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .alt-one-pic-with-bg { position: relative; width: 100%; min-height: 100vh; padding: 192px 224px 320px; padding: 12rem 14rem 20rem; background-size: cover; background-position: center; overflow: hidden /* Template 1997 */ } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg { padding: 6.4rem 4rem; min-height: auto } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg { padding: 6rem 1.6rem } } #about-alterna .alt-one-pic-with-bg .content-wrapper { width: 68.333vw; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: none; margin: auto; margin-top: 192px; margin-top: 12rem; text-align: center } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg .content-wrapper { width: 68.333vw; margin: auto; margin-top: 8rem } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg .content-wrapper { width: 80vw; margin: auto; margin-top: 4rem } } #about-alterna .alt-one-pic-with-bg .content-wrapper .titles { width: 35% } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg .content-wrapper .titles { width: 100% } #about-alterna .alt-one-pic-with-bg .content-wrapper .titles .sub-title { margin-top: 1.6rem } } #about-alterna .alt-one-pic-with-bg .content-wrapper .paragraph { margin-top: 2.778vw; font-size: 24px; font-style: normal; font-weight: 300; line-height: 160%; /* 38.4px */ letter-spacing: 0.48px } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg .content-wrapper .paragraph { font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.28px } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg .content-wrapper .paragraph { width: 100%; margin-top: 1.6rem } } #about-alterna .alt-one-pic-with-bg .portrait-image { position: absolute; top: 0; right: 0; width: 20.833vw; height: 27.778vw } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg .portrait-image { right: 0; top: 9.766vw; width: 20.833vw; height: 27.778vw } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg .portrait-image { right: 3.684vw; width: 20.833vw; height: 27.778vw } } #about-alterna .alt-one-pic-with-bg.variant { padding: 192px 224px; padding: 12rem 14rem } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg.variant { min-height: 70rem; padding: 6.4rem 4rem } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg.variant { min-height: 70rem; padding: 6rem 1.6rem } } #about-alterna .alt-one-pic-with-bg.variant .content-wrapper { display: block; width: 60%; max-width: 680px; padding: 0; margin: 0 auto; background-color: transparent; text-align: center } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg.variant .content-wrapper { position: absolute; top: 50%; left: 0; right: 0; padding: 0; margin-top: 0 auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg.variant .content-wrapper { position: static; width: 100%; margin-top: 4rem; padding-left: 35%; text-align: left; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } #about-alterna .alt-one-pic-with-bg.variant .content-wrapper .titles { width: 100% } #about-alterna .alt-one-pic-with-bg.variant .content-wrapper .paragraph { width: 100%; margin-top: 64px; margin-top: 4rem } #about-alterna .alt-one-pic-with-bg.variant .portrait-image { position: absolute; left: 192px; left: 12rem; top: 384px; top: 24rem; width: 160px; width: 10rem; height: 800px; height: 50rem } @media (max-width: 1024px) { #about-alterna .alt-one-pic-with-bg.variant .portrait-image { width: 9.2rem; height: 50rem; left: 3rem; top: 15rem } } @media (max-width: 640px) { #about-alterna .alt-one-pic-with-bg.variant .portrait-image { left: 2rem; top: calc(55% - 25rem) } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .two-sections-one-bg { position: relative; width: 100%; padding: 0; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex } #about-alterna .two-sections-one-bg .section-content { width: 54vw; padding: 192px 0; padding: 12rem 0; padding-left: 240px; padding-left: 15rem; padding-right: 113px } @media (max-width: 1024px) { #about-alterna .two-sections-one-bg .section-content { width: 56vw; padding: 8rem 0; padding-left: 6rem; padding-right: 60px } } @media (max-width: 640px) { #about-alterna .two-sections-one-bg .section-content { width: 75vw; padding: 6rem 0; padding-left: 1.6rem; padding-right: 40px } } #about-alterna .two-sections-one-bg .section-content .main-title { margin-top: 60px } #about-alterna .two-sections-one-bg .section-content .paragraph { width: 100%; margin-top: 40px; position: relative; z-index: 1; font-size: 24px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.48px } @media (max-width: 1024px) { #about-alterna .two-sections-one-bg .section-content .paragraph { margin-top: 24px; font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.28px } } @media (max-width: 640px) { #about-alterna .two-sections-one-bg .section-content .paragraph { margin-top: 12px; font-size: 14px; font-style: normal; font-weight: 300; line-height: 160%; letter-spacing: 0.28px } } #about-alterna .two-sections-one-bg .section-background { width: 46.319vw } @media (max-width: 1024px) { #about-alterna .two-sections-one-bg .section-background { width: 44vw } } @media (max-width: 640px) { #about-alterna .two-sections-one-bg .section-background { width: 25vw } } #about-alterna .two-sections-one-bg .section-background .background { height: 100% } #about-alterna .two-sections-one-bg .section-background .background picture { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .years-on-side { position: fixed; left: -144px; left: -9rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 144px; width: 9rem; background-color: rgba(255, 255, 255, .5); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; z-index: 1000; transition: 0.7s left, 0.7s opacity; will-change: left, opacity } @media (max-width: 1024px) { #about-alterna .years-on-side { display: none } } #about-alterna .years-on-side.active { left: 0; opacity: 1 } #about-alterna .years-on-side span { position: relative; left: 0; margin: 16px 0; margin: 1rem 0; font-size: 28.8px; font-size: 1.8rem; font-weight: normal; line-height: 1.2; color: #acacac; transition: 0.7s left, 0.7s color } #about-alterna .years-on-side span::after { content: ""; position: absolute; top: 7.5px; left: 0; width: 6px; height: 6px; border-radius: 100%; background-color: black; opacity: 0; transition: 0.7s left, 0.7s opacity } #about-alterna .years-on-side span.active { color: black; left: 6px } #about-alterna .years-on-side span.active::after { left: -12px; opacity: 1 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } #about-alterna .years-on-bottom { position: fixed; left: 0; bottom: -128px; bottom: -8rem; min-width: 100%; height: 96px; height: 6rem; background-color: white; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 calc(50% - 30px); opacity: 0; overflow: hidden; z-index: 1000; transition: 0.7s bottom, 0.7s opacity, 0.7s -webkit-transform; transition: 0.7s bottom, 0.7s opacity, 0.7s transform; transition: 0.7s bottom, 0.7s opacity, 0.7s transform, 0.7s -webkit-transform; will-change: bottom, opacity, transform } @media (min-width: 1025px) { #about-alterna .years-on-bottom { display: none } } #about-alterna .years-on-bottom.active { bottom: 0; opacity: 1 } @media (max-width: 640px) { #about-alterna .years-on-bottom.active { bottom: 5.5rem } } #about-alterna .years-on-bottom span { position: relative; width: 60px; font-size: 28.8px; font-size: 1.8rem; font-weight: normal; line-height: 1.2; text-align: center; color: #acacac; transition: 0.7s left, 0.7s color } #about-alterna .years-on-bottom span::after { content: ""; position: absolute; bottom: -12px; left: 27px; width: 6px; height: 6px; border-radius: 100%; background-color: black; opacity: 0; transition: 0.7s opacity } #about-alterna .years-on-bottom span.active { color: black } #about-alterna .years-on-bottom span.active::after { opacity: 1 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #about-alterna { } @media (max-width: 1024px) { #about-alterna { margin-bottom: 8rem } } #about-alterna h2.heading-year { position: relative; font-size: 198.4px; font-size: 12.4rem; font-weight: 400; font-family: "Chiswick Sans"; z-index: 1 } @media (max-width: 1024px) { #about-alterna h2.heading-year { font-size: 9.6rem; line-height: 1 } } #about-alterna h4.main-title { font-size: 76.8px; font-size: 4.8rem; font-weight: 400; font-family: "Chiswick Sans" } @media (max-width: 1024px) { #about-alterna h4.main-title { font-size: 3.2rem } } #about-alterna p.sub-title { margin-top: 64px; margin-top: 4rem; font-size: 25.6px; font-size: 1.6rem; line-height: 1.6; letter-spacing: 2% } @media (max-width: 1024px) { #about-alterna p.sub-title { font-size: 1.4rem } } #about-alterna .paragraph, #about-alterna .paragraph p { font-size: 25.6px; font-size: 1.6rem; line-height: 1.6 } @media (max-width: 1024px) { #about-alterna .paragraph, #about-alterna .paragraph p { font-size: 1.4rem } } #about-alterna .bg-image { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; background-size: cover; background-position: center } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .restore-rituals .card { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 115.2px 51.2px 0; padding: 7.2rem 3.2rem 0 } @media (max-width: 1024px) { .restore-rituals .card { padding: 4.8rem 0.8rem 0 } } @media (max-width: 640px) { .restore-rituals .card { padding: 0 0.8rem 4.8rem } } .restore-rituals .card .wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 1440px; width: 90rem; height: 600px; height: 37.5rem } @media (max-width: 1024px) { .restore-rituals .card .wrapper { width: calc(100% - 4.8rem); height: 35rem } } @media (max-width: 640px) { .restore-rituals .card .wrapper { -webkit-flex-direction: column !important; -ms-flex-direction: column !important; flex-direction: column !important; width: 100%; height: auto } } .restore-rituals .card .wrapper .card-image { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 600px; width: 37.5rem; background-size: cover; background-position: center } .restore-rituals .card .wrapper .card-image::after { content: ""; display: block; padding-bottom: 100% } @media (max-width: 1024px) { .restore-rituals .card .wrapper .card-image { width: 27rem; height: 35rem } } @media (max-width: 640px) { .restore-rituals .card .wrapper .card-image { width: 100%; height: auto } } .restore-rituals .card .wrapper .card-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 64px; padding: 0 4rem; border: 1px solid black } @media (max-width: 1024px) { .restore-rituals .card .wrapper .card-content { padding: 0 3.2rem } } @media (max-width: 640px) { .restore-rituals .card .wrapper .card-content { padding: 2.4rem 0 0; border: none } } .restore-rituals .card .wrapper .card-content h3 { font-size: 64px; font-size: 4rem; font-weight: 700; font-family: "Cera Pro"; line-height: 1; letter-spacing: 0.02em; margin-bottom: 25.6px; margin-bottom: 1.6rem } @media (max-width: 640px) { .restore-rituals .card .wrapper .card-content h3 { display: none } } .restore-rituals .card .wrapper .card-content h3.mobile { display: none } @media (max-width: 640px) { .restore-rituals .card .wrapper .card-content h3.mobile { display: block; font-size: 2.4rem } } .restore-rituals .card .wrapper .card-content p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .restore-rituals .card.left { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start } .restore-rituals .card.left .wrapper { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } .restore-rituals .card.left .wrapper .card-content { border-left: 0 } .restore-rituals .card.right { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end } .restore-rituals .card.right .wrapper { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .restore-rituals .card.right .wrapper .card-content { border-right: 0 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .restore-rituals .hero-mobile { display: none } @media (max-width: 640px) { .restore-rituals .hero-mobile { display: block } } .restore-rituals .hero-mobile p { width: 100%; padding: 64px 12.8px 80px; padding: 4rem 0.8rem 5rem; font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } .restore-rituals .hero { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100vh; background-size: cover; background-position: center } @media (max-width: 1024px) { .restore-rituals .hero { max-height: 768px; background-position-x: 70% } } @media (max-width: 640px) { .restore-rituals .hero { height: calc(100vh - 4.8rem); max-height: 640px } } .restore-rituals .hero .hero-content { padding-left: 51.2px; padding-left: 3.2rem; width: 800px; width: 50rem } @media (max-width: 640px) { .restore-rituals .hero .hero-content { padding-left: 0.8rem; width: auto } } .restore-rituals .hero .hero-content h1 { padding: 38.4px 0; padding: 2.4rem 0; margin-left: -0.07em; font-size: 102.4px; font-size: 6.4rem; font-weight: 700; font-family: "Cera Pro"; line-height: 1.1 } .restore-rituals .hero .hero-content h5 { font-size: 38.4px; font-size: 2.4rem; font-family: "Cera Pro"; font-weight: 500; letter-spacing: 0.02em } .restore-rituals .hero .hero-content p { font-size: 25.6px; font-size: 1.6rem; line-height: 38.4px; line-height: 2.4rem; letter-spacing: 0.02em } @media (max-width: 640px) { .restore-rituals .hero .hero-content p { display: none } } .restore-rituals .hero .hero-content .cruelty-free-logos { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 48px 0 16px; margin: 3rem 0 1rem } .restore-rituals .hero .hero-content .cruelty-free-logos img { height: 64px; height: 4rem; width: auto; margin-right: 48px; margin-right: 3rem } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .restore-rituals .video { position: relative; padding: 102.4px 51.2px; padding: 6.4rem 3.2rem } @media (max-width: 1024px) { .restore-rituals .video { padding: 4.8rem 0.8rem } } @media (max-width: 640px) { .restore-rituals .video { padding: 0 0.8rem; margin-bottom: 4.8rem } } .restore-rituals .video .bg-image { width: 100% } .restore-rituals .video .desktop {} @media (max-width: 640px) { .restore-rituals .video .desktop { display: none } } .restore-rituals .video .mobile { display: none } @media (max-width: 640px) { .restore-rituals .video .mobile { display: block } } .restore-rituals .video .video-wrapper { width: 74%; position: absolute; left: 13%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); object-fit: cover } @media (max-width: 640px) { .restore-rituals .video .video-wrapper { width: calc(100% - 32px); left: 16px } } .restore-rituals .video .video-wrapper:focus { outline: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .restore-rituals .product { display: block; margin: 48px 0; margin: 3rem 0; padding: 0 12.8px; padding: 0 0.8rem } @media (max-width: 1024px) { .restore-rituals .product { margin: 0.8rem 0 5rem } } @media (max-width: 640px) { .restore-rituals .product { margin-bottom: 3rem } } .restore-rituals .product .small-cards-product-three .section-title { font-size: 64px; font-size: 4rem; font-weight: bold; text-align: center; text-transform: none } @media (max-width: 1024px) { .restore-rituals .product .small-cards-product-three .section-title { font-size: 2.4rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .restore-rituals { display: block } .restore-rituals .img-title-copy-grid { margin-top: 160px; margin-top: 10rem } @media (max-width: 640px) { .restore-rituals .img-title-copy-grid { margin-top: 0 } } .mob-nav.\--restore-absolute { position: absolute; z-index: 9; top: 0; left: 0; right: 0; width: 100%; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } body.noscroll { overflow: hidden; } #review-modal { height: 100vh; width: 100vw; z-index: 99999; position: fixed; overflow: hidden; display: none; top: 0; left: 0; } #review-modal.open { display: -webkit-flex; display: -ms-flexbox; display: flex; } .modal-overlay { background: black; height: 100%; width: 100%; opacity: 0.4; position: absolute; top: 0; left: 0; z-index: 100; } .modal-content { height: 90%; width: 98%; margin: auto; background: white; position: relative; z-index: 105; box-shadow: 0 10px 25px rgba(0, 0, 0, .5); } .modal-close-button { width: 24px; height: 24px; margin: calc(-10% + 12px); margin-right: 12px; position: absolute; right: 0; top: 0; z-index: 110; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; line-height: 24px; cursor: pointer; background: black; border-radius: 50%; color: white; } .modal-content iframe { width: 100%; height: 100%; } @media (min-width: 641px) { .modal-content { max-width: 680px; width: 100%; } .modal-close-button { margin: -12px; margin-right: -12px; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .reviews-rating-wrapper { text-align: center; margin-top: 5em; } .reviews-rating-wrapper label { margin-bottom: 2em; } select { width: -webkit-min-content; width: -moz-min-content; width: min-content; border: none; border-bottom: solid; } select * { background-color: #ffffff; font-size: small; } #review-rating-filter-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 5em; width: 40%; margin-left: 2%; margin-bottom: 32px; background: white; border-top: solid 1px #777777; max-width: 233px; cursor: pointer; } @media (min-width: 641px) { #review-rating-filter-wrapper { margin-left: 56px; } } #review-rating-filter-wrapper::after { content: '+'; position: relative; right: 0; font-size: 32px; font-size: 2rem; pointer-events: none; } .filter-wrapper { position: relative; } .filter-wrapper .title { text-transform: uppercase; width: 100%; text-align: left; cursor: pointer; } div.filter-dropdown { display: none; position: absolute; z-index: 5; top: 100%; left: 0; width: 100%; text-align: left; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); padding-top: 12px; padding-bottom: 12px; background: white; } div.filter-dropdown .option { background: white; padding: 12px; padding-left: 36px; cursor: pointer; } div.filter-dropdown .option:hover { background: #eeefef; } #review-rating-filter-wrapper .filter-dropdown .option { padding: 6px; padding-left: 24px; } select.false-filter-dropdown { display: none !important; } #review-category-wrapper { max-width: 90%; margin: auto; } #review-category-wrapper .title { font-family: Chiswick Sans, Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; font-size: 2.2em; line-height: 110%; text-transform: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 2em; text-align: left; border-bottom: 3px solid black; } @media (min-width: 641px) { /* desktop and tablet */ #review-category-wrapper { max-width: 592px; } #review-category-wrapper .title { font-size: 3.5em; } } .title-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; } .title-wrapper::after { content: ' '; position: relative; left: 32px; left: 2rem; border: solid black; border-width: 0 2.5px 2.5px 0; display: inline-block; padding: 5px; -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform: rotate(45deg); } #review-category { margin: 0 auto; font-family: Chiswick Sans, Arial, sans-serif; font-style: normal; font-weight: 300; font-size: 2em; line-height: 110%; display: inline-block; } #review-category::after { content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid; } #review-sort-category { margin-top: 35px; margin-bottom: 3em; } #review-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; padding: 0 1%; } @media (min-width: 641px) { #review-rating { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; padding: 0 5%; } } /* Reviews Summary Star Ratings */ .reviews-ratings-and-stars .rating { display: block; margin-right: 0; margin-bottom: 16px; font-family: Chiswick Sans, Arial, Helvetica, sans-serif } @media (max-width: 640px) { .reviews-ratings-and-stars .rating { line-height: 1; } } @media (min-width: 641px) { /* desktop and tablet */ .review-count, .reviews-ratings-and-stars { text-align: left; } #category-rating-summary { padding-left: 36px; } .reviews-ratings-and-stars .rating { display: inline; margin-right: 32px; margin-bottom: 0; } .stars { margin-top: 0; } } .star { background-size: contain; background-position: left; background-repeat: repeat-x; } .reviews-ratings-and-stars .stars .star { background-size: 24px; padding-left: 120px; } @media (min-width: 641px) { .reviews-ratings-and-stars .stars .star { background-size: 30px; padding-left: 150px; } } @media (min-width: 1025px) { .reviews-ratings-and-stars .stars .star { background-size: 44px; padding-left: 220px; } } .full-stars { position: absolute; } .full-star { background-image: url(/img/black-star.svg); } .empty-star { background-image: url(/img/star.svg); } #category-rating-summary { -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; } .reviews-ratings-and-stars { font-size: 80px; font-size: 5rem; padding: 24px 0; padding: 1.5rem 0; } .reviews-rating-img { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .reviews-rating-img img { width: 384px; height: 480px } @media (max-width: 640px) { .reviews-rating-img img { max-width: 60vw; height: auto; padding-bottom: 35px; } } .review-count { font-size: medium; text-transform: uppercase; } .rating-container { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .rating-container span { min-width: 112px; min-width: 7rem; } .review-rating-container { display: inline; } .ratings-wrapper { width: 100%; margin-top: 10px; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .rating-bar { width: 100%; background-color: #eeefef; } .rating-bar-fill { background-color: #2e1a47; } #category-rating-summary .rating-bar { height: 21px; margin: 10px 10px; } #category-rating-summary .rating-bar-fill { height: 21px; } @media (min-width: 641px) { #category-rating-summary .rating-bar { height: 30px; } #category-rating-summary .rating-bar-fill { height: 30px; } } @media (min-width: 1025px) { #category-rating-summary .rating-bar { height: 40px; } #category-rating-summary .rating-bar-fill { height: 40px; } } /* Testimonial Section */ #filter-rating { border-bottom: none; border-top: solid 1px #777777; width: 233px; font-family: 'Sofia Pro', sans-serif; font-weight: lighter; } article.testimonial .product-info * { text-transform: uppercase; font-weight: lighter; } article.testimonial .product-info h4 a { font-weight: normal; } article.testimonial .product-info * + * { margin-top: 8px; } @media (min-width: 480px) { /* desktop and tablet */ article.testimonial .product-info * + * { margin-top: 14px; } } .testimonial { display: -webkit-flex; display: -ms-flexbox; display: flex; border-bottom: 1px solid #d3d3d3; text-align: left; padding-bottom: 2em; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 2% 2%; } @media (min-width: 641px) { .testimonial { margin: 2% 48px; } } @media (min-width: 1025px) { .testimonial { margin: 2% 56px; } } .testimonial .title-and-product-info { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 16px; } .testimonial .review-title { margin-top: 24px; } article.testimonial .review-title * { font-family: Chiswick Sans, Arial, Helvetica, sans-serif; } @media (min-width: 480px) { /* desktop and tablet */ .testimonial .title-and-product-info { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .testimonial .product-info { max-width: 33%; width: 100%; } .testimonial .review-title { max-width: 66%; margin-top: 0; } .testimonial .info-and-rating { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } .testimonial .info-and-rating { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .testimonial .info-and-rating .info .metadata { font-family: Minion Pro, Chiswick Sans, Arial, Helvetica, sans-serif; } .testimonial .info-and-rating .info .metadata .stars { padding-right: 20px; } .testimonial .info-and-rating .info .metadata .star { background-size: 21px; padding-left: 105px; } @media (min-width: 480px) { /* desktop and tablet */ .testimonial .info-and-rating .info { max-width: 66%; width: 100%; } .testimonial .info-and-rating .rating-bars { max-width: 33%; width: 100%; } .testimonial .info-and-rating { -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } } .testimonial .rating-bars .rating-type { text-transform: uppercase; } .testimonial .rating-bars .rating-type-container { padding-top: 20px; } .testimonial .rating-bars .rating-type-container.hidden { display: none; } #reviews-template .testimonial .rating-bars .rating-bar { height: 16px !important; margin-top: 16px; } #reviews-template .testimonial .rating-bars .rating-bar-fill { height: 16px !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } #reviews-page .review-hero { width: 100%; height: 100vh; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; background-size: cover; background-position: center; overflow: hidden; } #cta-wrapper { margin: 42px 3%; } #cta-wrapper .hero-header { font-family: Chiswick Sans, Arial, Helvetica, sans-serif; font-style: normal; line-height: 110%; font-weight: 300; font-size: 72px; font-size: 4.5rem; width: 100%; color: #000000; } #cta-wrapper .hero-copy { width: 75%; margin-top: 24px; margin-bottom: 24px; } @media (min-width: 641px) { #cta-wrapper { margin: 0 3%; } #reviews-page .review-hero { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #cta-wrapper .hero-header { width: 65%; font-size: 72px; } #cta-wrapper .hero-copy { width: 55%; } } #slim-news-banner { padding: 16px 2%; color: white; text-align: center; background-color: #2e1a47; } #slim-news-banner a { color: white; text-decoration: underline; font-weight: bold; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .faq { max-width: 1280px; max-width: 80rem; margin: 0 auto; padding: 89.6px 115.2px; padding: 5.6rem 7.2rem } @media (max-width: 1024px) { .faq { padding: 4.8rem 5.6rem } } @media (max-width: 640px) { .faq { padding: 3.2rem 0.8rem } } .faq__header { margin-bottom: 102.4px; margin-bottom: 6.4rem; font-size: 102.4px; font-size: 6.4rem; text-align: center; font-family: "Chiswick Sans", sans-serif; font-weight: bold; letter-spacing: 0.02em } @media (max-width: 1024px) { .faq__header { font-size: 4rem } } @media (max-width: 640px) { .faq__header { margin-bottom: 3.2rem } } .faq__subheader { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: 86.4px; margin-bottom: 5.4rem } @media (max-width: 640px) { .faq__subheader { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .faq__subheader h5 { font-weight: 500; font-size: 38.4px; font-size: 2.4rem; margin-right: 51.2px; margin-right: 3.2rem } @media (max-width: 640px) { .faq__subheader h5 { font-size: 1.8rem; margin-right: 0; margin-bottom: 1.8rem } } .faq__subheader button.btn-outline { padding: 19.2px 57.6px; padding: 1.2rem 3.6rem } .faq__search { position: relative; margin-bottom: 128px; margin-bottom: 8rem } @media (max-width: 640px) { .faq__search { margin-bottom: 6rem } } .faq__search input { display: block; width: 80%; margin: 0 auto; padding: 0; background: transparent; font-family: "Sofia Pro", sans-serif; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; min-height: 150%; letter-spacing: 0.02em; border: none; border-bottom: 1px solid #2e1a47 } @media (max-width: 640px) { .faq__search input { width: 90% } } .faq__search img { width: 25.6px; width: 1.6rem; height: auto; position: absolute; bottom: 4px; right: 10%; cursor: pointer } @media (max-width: 640px) { .faq__search img { right: 5% } } .faq__search-clean { display: none; position: absolute; bottom: -48px; bottom: -3rem; right: 10%; font-weight: 300; font-size: 22.4px; font-size: 1.4rem; cursor: pointer } .faq__search-clean.show { display: block } @media (max-width: 640px) { .faq__search-clean { right: 5% } } .faq__category { margin-bottom: 96px; margin-bottom: 6rem; display: block } @media (max-width: 640px) { .faq__category { margin-bottom: 4rem } } .faq__category-title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-bottom: 32px; padding-bottom: 2rem; border-bottom: 2px solid #000000 } @media (max-width: 640px) { .faq__category-title { padding: 0 0.8rem 1.6rem } } .faq__category-title h5 { font-weight: 500; font-size: 38.4px; font-size: 2.4rem; line-height: 38.4px; line-height: 2.4rem; color: #2e1a47; letter-spacing: 0.02em; cursor: pointer } @media (max-width: 640px) { .faq__category-title h5 { font-size: 1.8rem; line-height: 1.8rem } } .faq__category-title-btn { width: 32px; width: 2rem; height: 32px; height: 2rem; padding-top: 16px; padding-top: 1rem; cursor: pointer } @media (max-width: 640px) { .faq__category-title-btn { width: 1.4rem; height: 1.4rem; padding-top: 0.7rem } } .faq__category-title-btn-line { position: relative; width: 32px; width: 2rem; height: 3px; background-color: #000000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 0.75em; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s } @media (max-width: 640px) { .faq__category-title-btn-line { width: 1.4rem; height: 2px } } .faq__category-title-btn-line::before { content: ""; position: absolute; width: 32px; width: 2rem; height: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 0.75em; background-color: #000000; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform-origin: 1rem center; -ms-transform-origin: 1rem center; transform-origin: 1rem center; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg) } @media (max-width: 640px) { .faq__category-title-btn-line::before { width: 1.4rem; height: 2px; -webkit-transform-origin: 0.7rem center; -ms-transform-origin: 0.7rem center; transform-origin: 0.7rem center } } .faq__category-title-btn-line.open {} .faq__category-title-btn-line.open::before { top: 0; -webkit-transform: rotate3d(0, 0, 0, 90deg); transform: rotate3d(0, 0, 0, 90deg) } .faq__category-items { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.7s ease-out, opacity 0.7s ease-out; will-change: max-height opacity } .faq__category-item { margin-top: 76.8px; margin-top: 4.8rem } @media (max-width: 640px) { .faq__category-item { margin-top: 3.2rem } } .faq__category-item p { font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: 0.02em; color: #2e1a47 } .faq__category-item-a { font-weight: 300 !important; color: #000000 !important; margin-top: 25.6px; margin-top: 1.6rem } .faq__category-item-logos { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 38.4px; margin-top: 2.4rem } .faq__category-item-logos img { height: 64px; height: 4rem; width: auto; margin-right: 48px; margin-right: 3rem } .faq__content-no-result { display: none; margin-bottom: 86.4px; margin-bottom: 5.4rem } .faq__content-no-result.active { display: block } .faq__content-no-result p { font-size: 28.8px; font-size: 1.8rem; line-height: 38.4px; line-height: 2.4rem; font-weight: 500; text-align: center; letter-spacing: 0.02em } .faq__content-no-result p.result { margin-bottom: 25.6px; margin-bottom: 1.6rem } .faq__bv { width: 100% } .faq .highlight { background-color: #ffdd00 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .moisture-capsule { display: block } .moisture-capsule__title-divider { padding: 16px; font-size: 64px; font-size: 4rem; line-height: 125% } @media (min-width: 641px) { .moisture-capsule__title-divider { padding: 32px } } .moisture-capsule__title-divider.\--ingredients { font-family: "Didot"; font-style: italic; text-transform: uppercase } .moisture-capsule .btn-outline {} @media (min-width: 641px) { .moisture-capsule .btn-outline { padding: 18px 64px } } .moisture-capsule__cta { width: 100%; padding: 56px 0; text-align: center } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .moisture-capsule-description-btn-img { width: 100%; overflow-y: visible; overflow-x: clip; position: relative; max-width: 100vw } .moisture-capsule-description-btn-img__inner { padding: 24px 16px; position: relative } @media (min-width: 641px) { .moisture-capsule-description-btn-img__inner { padding: 50px 72px } } @media (min-width: 1025px) { .moisture-capsule-description-btn-img__inner { padding: 100px 180px } } .moisture-capsule-description-btn-img__content-wrapper { border: 1px solid #2e1a47; padding: 48px 40px; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media (min-width: 641px) { .moisture-capsule-description-btn-img__content-wrapper { padding: 64px 72px } } .moisture-capsule-description-btn-img__text-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: left } @media (min-width: 641px) { .moisture-capsule-description-btn-img__text-wrapper { padding: 24px 12px; max-width: 576px } } .moisture-capsule-description-btn-img__text-wrapper h2 { font-family: "Helvetica Neue"; font-size: 24px; text-transform: uppercase; font-weight: 300; line-height: 125%; width: 100% } .moisture-capsule-description-btn-img__text-wrapper hr { width: 100% } .moisture-capsule-description-btn-img__text-wrapper p { font-family: "Helvetica Neue"; font-size: 16px; padding-bottom: 24px } @media (min-width: 641px) { .moisture-capsule-description-btn-img__text-wrapper p { padding-bottom: 36px } } .moisture-capsule-description-btn-img__text-wrapper a { margin: 0 auto } .moisture-capsule-shop-description { } .moisture-capsule-shop-description-img { position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none } .moisture-capsule-shop-description-img.\--flying { height: auto; width: 224px; width: 14rem; max-width: 96px; margin: 4px; left: 0; bottom: 0 } @media (max-width: 640px) { .moisture-capsule-shop-description-img.\--flying { display: none } } .moisture-capsule-shop-description-img.\--left { left: 0; top: 0; height: 100%; -webkit-transform: translate(-70%, 0) rotate(20deg); -ms-transform: translate(-70%, 0) rotate(20deg); transform: translate(-70%, 0) rotate(20deg); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; max-width: 960px; max-width: 60rem } @media (max-width: 640px) { .moisture-capsule-shop-description-img.\--left { display: none } } @media (min-width: 1025px) { .moisture-capsule-shop-description-img.\--left { -webkit-transform: translate(-60%, 0); -ms-transform: translate(-60%, 0); transform: translate(-60%, 0) } } .moisture-capsule-shop-description-img.\--right { right: 0; top: 0; height: 70%; -webkit-transform: translate(80%, -10%); -ms-transform: translate(80%, -10%); transform: translate(80%, -10%); max-width: 800px; max-width: 50rem } @media (min-width: 641px) { .moisture-capsule-shop-description-img.\--right { top: 25%; height: 75%; -webkit-transform: translate(40%, 0); -ms-transform: translate(40%, 0); transform: translate(40%, 0) } } @media (min-width: 1025px) { .moisture-capsule-shop-description-img.\--right { top: 5%; height: 100%; -webkit-transform: translate(20%, 0); -ms-transform: translate(20%, 0); transform: translate(20%, 0) } } .moisture-capsule-shop-description-img img { object-fit: fill } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .hero-img-copy-btn { } .hero-img-copy-btn__inner { min-height: calc(100vh - 56px - 60px - 72px); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-justify-content: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 24px; margin-bottom: 48px; position: relative; overflow: visible; overflow-x: clip } @media (min-width: 641px) { .hero-img-copy-btn__inner { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: -webkit-max-content; height: -moz-max-content; height: max-content; min-height: 768px; margin: 0 } } .hero-img-copy-btn__img { height: auto; width: 100%; max-width: 100%; margin: 24px 0; z-index: 3 } @media (min-width: 641px) { .hero-img-copy-btn__img { margin: 0 24px; max-width: 40%; z-index: 5 } } @media (min-width: 1025px) { .hero-img-copy-btn__img { max-width: 50% } } .hero-img-copy-btn__img img { display: block; height: 100%; width: 60%; margin: 0 20% } @media (min-width: 641px) { .hero-img-copy-btn__img img { width: 100%; margin: 0 auto } } @media (min-width: 1025px) { .hero-img-copy-btn__img img { width: auto; max-width: 80%; max-height: 680px; margin: auto } } @media (min-width: 1440px) { .hero-img-copy-btn__img img { max-height: 60rem } } .hero-img-copy-btn__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 8px 16px; color: #000000; width: 100% } @media (min-width: 641px) { .hero-img-copy-btn__content { width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 60% } } @media (min-width: 1025px) { .hero-img-copy-btn__content { width: 50%; max-width: unset; padding: 64px 16px } } .hero-img-copy-btn__content h2 { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 102.4px; font-size: 6.4rem; line-height: 125%; text-transform: uppercase } @media (max-width: 640px) { .hero-img-copy-btn__content h2 { max-width: 75% } } @media (min-width: 641px) { .hero-img-copy-btn__content h2 { padding: 22px 22px 32px 0 } } @media (min-width: 1025px) { .hero-img-copy-btn__content h2 { max-width: 80rem } } .hero-img-copy-btn__copy { padding: 16px 8px 16px 0 } @media (min-width: 641px) { .hero-img-copy-btn__copy { padding-bottom: 24px } } @media (min-width: 1025px) { .hero-img-copy-btn__copy { padding-bottom: 40px; max-width: 90% } } .hero-img-copy-btn__copy p:first-child { padding-bottom: 4px; font-weight: 300 } .hero-img-copy-btn__btn { display: none } @media (min-width: 641px) { .hero-img-copy-btn__btn { display: block } } .hero-img-copy-btn__btn.\--mobile { width: 60%; display: block } @media (min-width: 641px) { .hero-img-copy-btn__btn.\--mobile { display: none } } .hero-img-copy-btn .moisture-capsule-hero__anim-img { position: absolute; left: 0; bottom: 0; z-index: 2; height: 33%; -webkit-transform: translate(-50%, -20%); -ms-transform: translate(-50%, -20%); transform: translate(-50%, -20%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content } .hero-img-copy-btn .moisture-capsule-hero__anim-img img { object-fit: fill } @media (max-width: 640px) { .hero-img-copy-btn .moisture-capsule-hero__anim-img { } .hero-img-copy-btn .moisture-capsule-hero__anim-img img { object-fit: contain } } @media (min-width: 641px) { .hero-img-copy-btn .moisture-capsule-hero__anim-img { z-index: 8; height: 50%; max-height: 48rem; max-width: 24rem; -webkit-transform: translate(-30%, 25%); -ms-transform: translate(-30%, 25%); transform: translate(-30%, 25%) } } @media (min-width: 1025px) { .hero-img-copy-btn .moisture-capsule-hero__anim-img { bottom: 50%; -webkit-transform: translate(-65%, 50%); -ms-transform: translate(-65%, 50%); transform: translate(-65%, 50%) } .hero-img-copy-btn .moisture-capsule-hero__anim-img:not([class*="--background"]) { height: 90% } } .hero-img-copy-btn .moisture-capsule-hero__anim-img.\--background { z-index: 1; -webkit-transform: translate(-70%, -10%); -ms-transform: translate(-70%, -10%); transform: translate(-70%, -10%) } @media (min-width: 641px) { .hero-img-copy-btn .moisture-capsule-hero__anim-img.\--background { z-index: 7; max-height: 42rem; max-width: 34rem; -webkit-transform: translate(-70%, 25%); -ms-transform: translate(-70%, 25%); transform: translate(-70%, 25%) } } @media (min-width: 1025px) { .hero-img-copy-btn .moisture-capsule-hero__anim-img.\--background { z-index: -1; -webkit-transform: translate(-70%, 50%); -ms-transform: translate(-70%, 50%); transform: translate(-70%, 50%) } } .hero-img-copy-btn .moisture-capsule-hero__capsule-line { position: absolute; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; top: 0; left: 75%; height: 50%; -webkit-transform: translate(-40%, 0); -ms-transform: translate(-40%, 0); transform: translate(-40%, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none } @media (max-width: 640px) { .hero-img-copy-btn .moisture-capsule-hero__capsule-line { } .hero-img-copy-btn .moisture-capsule-hero__capsule-line img { object-fit: contain } } @media (min-width: 641px) { .hero-img-copy-btn .moisture-capsule-hero__capsule-line { height: 200%; max-height: calc(110% + 50vw); -webkit-transform: translate(-30%, 0); -ms-transform: translate(-30%, 0); transform: translate(-30%, 0) } } @media (min-width: 1025px) { .hero-img-copy-btn .moisture-capsule-hero__capsule-line { left: 50%; height: 200%; max-height: calc(100% + 60rem); -webkit-transform: translate(-60%, 0); -ms-transform: translate(-60%, 0); transform: translate(-60%, 0); z-index: 6 } } /* related to the capsule-line */ .moisture-capsule-hero__capsule-line-end { position: absolute; -webkit-transform: translate(70vw, 40vw); -ms-transform: translate(70vw, 40vw); transform: translate(70vw, 40vw); width: 75vw } @media (min-width: 641px) { .moisture-capsule-hero__capsule-line-end { width: 25rem; left: 50%; -webkit-transform: translate(-20%, 30vw); -ms-transform: translate(-20%, 30vw); transform: translate(-20%, 30vw) } } @media (min-width: 1025px) { .moisture-capsule-hero__capsule-line-end { width: 30rem; -webkit-transform: translate(-30%, calc(60rem - 100%)); -ms-transform: translate(-30%, calc(60rem - 100%)); transform: translate(-30%, calc(60rem - 100%)) } } .moisture-capsule { } @media (max-width: 640px) { .moisture-capsule { max-width: 100vw; position: relative; overflow-x: hidden } } #top-feature-block { } #top-feature-block .moisture-capsule-img-txt-chess__card { } #top-feature-block .moisture-capsule-img-txt-chess__card:first-child, #top-feature-block .moisture-capsule-img-txt-chess__card:nth-child(2) { } #top-feature-block .moisture-capsule-img-txt-chess__card:first-child .moisture-capsule-img-txt-chess__text-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:first-child .moisture-capsule-img-txt-chess__img-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:nth-child(2) .moisture-capsule-img-txt-chess__text-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:nth-child(2) .moisture-capsule-img-txt-chess__img-wrapper { } @media (min-width: 1025px) { #top-feature-block .moisture-capsule-img-txt-chess__card:first-child .moisture-capsule-img-txt-chess__text-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:first-child .moisture-capsule-img-txt-chess__img-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:nth-child(2) .moisture-capsule-img-txt-chess__text-wrapper, #top-feature-block .moisture-capsule-img-txt-chess__card:nth-child(2) .moisture-capsule-img-txt-chess__img-wrapper { height: 50rem } } #top-feature-block .moisture-capsule-img-txt-chess__card:first-child { } #top-feature-block .moisture-capsule-img-txt-chess__card:first-child picture { z-index: 0 } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .moisture-capsule-img-txt-chess { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr /* GRID ZIGZAG */ /* OVERWRITES */ } .moisture-capsule-img-txt-chess__text-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--data-background-mobile-url); background-size: cover; background-repeat: no-repeat } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__text-background { background-image: var(--data-background-url) } } .moisture-capsule-img-txt-chess__text-background.\--smallTopOffset {} @media (max-width: 640px) { .moisture-capsule-img-txt-chess__text-background.\--smallTopOffset { -webkit-transform: translateY(-20%); -ms-transform: translateY(-20%); transform: translateY(-20%); z-index: 1 } } .moisture-capsule-img-txt-chess__text-background.\--smallBottomOffset {} @media (max-width: 640px) { .moisture-capsule-img-txt-chess__text-background.\--smallBottomOffset { -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); z-index: 1 } } .moisture-capsule-img-txt-chess__text-wrapper { padding: 96px 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__text-wrapper { padding: 16px 24px; aspect-ratio: 1 /* stylelint-disable-line property-no-unknown */ } } @media (min-width: 1025px) { .moisture-capsule-img-txt-chess__text-wrapper { padding: 32px 48px; aspect-ratio: unset /* stylelint-disable-line property-no-unknown */ } } .moisture-capsule-img-txt-chess__text-wrapper h3 { padding: 8px; font-size: 64px; font-size: 4rem; line-height: 125%; text-transform: none; margin-bottom: 0; z-index: 10 } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__text-wrapper h3 { padding: 16px 8px } } .moisture-capsule-img-txt-chess__text-wrapper hr { width: 100%; margin: 0 8px; z-index: 10 } .moisture-capsule-img-txt-chess__text-wrapper .wys { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; padding: 8px; z-index: 10 } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__text-wrapper .wys { padding: 16px 8px } } .moisture-capsule-img-txt-chess__text-wrapper .wys p { padding: 0; margin: 0 } .moisture-capsule-img-txt-chess__text-wrapper .wys ul { list-style: disc; padding-left: 2em } .moisture-capsule-img-txt-chess__text-wrapper .wys ul li::before { content: none } .moisture-capsule-img-txt-chess__text-wrapper.\--video { aspect-ratio: unset; /* stylelint-disable-line property-no-unknown */ padding: 48px 16px } .moisture-capsule-img-txt-chess__text-extra { padding: 1em 8px 8px 8px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .moisture-capsule-img-txt-chess__text-extra picture { height: 4em; width: auto; margin-right: 0.5em } .moisture-capsule-img-txt-chess__text-extra picture img { width: auto } .moisture-capsule-img-txt-chess__card { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr /* FONT STYLES, ETC */ } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__card { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto; grid-template-rows: auto } } .moisture-capsule-img-txt-chess__card.\--tagline {} .moisture-capsule-img-txt-chess__card.\--tagline .moisture-capsule-img-txt-chess__text-wrapper {} @media (max-width: 640px) { .moisture-capsule-img-txt-chess__card.\--tagline .moisture-capsule-img-txt-chess__text-wrapper { padding: 0 16px; margin-top: 3rem; margin-bottom: 5rem } } .moisture-capsule-img-txt-chess__card.\--tagline .moisture-capsule-img-txt-chess__text-wrapper h3 { font-family: "Didot"; font-style: italic; text-transform: uppercase } .moisture-capsule-img-txt-chess__card.\--tagline .moisture-capsule-img-txt-chess__text-wrapper p { font-family: "Helvetica Neue" } .moisture-capsule-img-txt-chess__card.\--description {} .moisture-capsule-img-txt-chess__card.\--description .moisture-capsule-img-txt-chess__text-wrapper { width: 100%; margin: 0 auto } @media (min-width: 1025px) { .moisture-capsule-img-txt-chess__card.\--description .moisture-capsule-img-txt-chess__text-wrapper { padding: 0 20% } } .moisture-capsule-img-txt-chess__card.\--description .moisture-capsule-img-txt-chess__text-wrapper h3 { font-family: "Helvetica Neue"; font-size: 38.4px; font-size: 2.4rem; text-transform: uppercase } .moisture-capsule-img-txt-chess__card.\--description .moisture-capsule-img-txt-chess__text-wrapper p { font-family: "Helvetica Neue" } .moisture-capsule-img-txt-chess__img-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; height: 100% } @media (max-width: 640px) { .moisture-capsule-img-txt-chess__img-wrapper { min-height: 100vw } } .moisture-capsule-img-txt-chess__img-wrapper picture { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100% } .moisture-capsule-img-txt-chess__img-wrapper picture img { object-fit: cover; object-position: center; width: 100%; height: 100% } .moisture-capsule-img-txt-chess__img-wrapper.\--video { -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background-color: #f3f2f4 } @media (max-width: 640px) { .moisture-capsule-img-txt-chess__img-wrapper.\--video { min-height: unset } } .moisture-capsule-img-txt-chess__img-wrapper.\--video .moisture-capsule-img-txt-chess__video { display: block; width: 100%; height: auto } @media (min-width: 641px) { .moisture-capsule-img-txt-chess__img-wrapper.\--video .moisture-capsule-img-txt-chess__video { width: 74.8vw } } @media (min-width: 1025px) { .moisture-capsule-img-txt-chess__img-wrapper.\--video .moisture-capsule-img-txt-chess__video { width: 100% } } .moisture-capsule-img-txt-chess__card:nth-child(8) {} @media (min-width: 641px) { .moisture-capsule-img-txt-chess__card:nth-child(8) { margin-top: 5rem } } .moisture-capsule-img-txt-chess__card:nth-child(2n) {} .moisture-capsule-img-txt-chess__card:nth-child(2n) .moisture-capsule-img-txt-chess__text-wrapper {} @media (min-width: 641px) { .moisture-capsule-img-txt-chess__card:nth-child(2n) .moisture-capsule-img-txt-chess__text-wrapper { -webkit-order: -1; -ms-flex-order: -1; order: -1 } } .moisture-capsule-img-txt-chess.\--start-right {} .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n) {} .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n) .moisture-capsule-img-txt-chess__text-wrapper {} @media (min-width: 641px) { .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n) .moisture-capsule-img-txt-chess__text-wrapper { -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n-1) {} .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n-1) .moisture-capsule-img-txt-chess__text-wrapper {} @media (min-width: 641px) { .moisture-capsule-img-txt-chess.\--start-right .moisture-capsule-img-txt-chess__card:nth-child(2n-1) .moisture-capsule-img-txt-chess__text-wrapper { -webkit-order: -1; -ms-flex-order: -1; order: -1 } } .moisture-capsule-img-txt-chess.\--ingredients {} .moisture-capsule-img-txt-chess.\--ingredients .moisture-capsule-img-txt-chess__text-background { background-position: center } .moisture-capsule-img-txt-chess.\--ingredients .moisture-capsule-img-txt-chess__img-wrapper {} @media (max-width: 640px) { .moisture-capsule-img-txt-chess.\--ingredients .moisture-capsule-img-txt-chess__img-wrapper { min-height: unset } } .moisture-capsule-img-txt-chess.\--ingredients picture > img {} @media (max-width: 640px) { .moisture-capsule-img-txt-chess.\--ingredients picture > img { object-fit: contain } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .moisture-capsule-title-copy-img { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-size: cover; background-position: center; overflow: hidden; min-height: 512px } .moisture-capsule-title-copy-img-wrapper { margin: 64px 3%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } @media (min-width: 641px) { .moisture-capsule-title-copy-img-wrapper { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .moisture-capsule-title-copy-img__text { width: 100% } @media (min-width: 641px) { .moisture-capsule-title-copy-img__text { max-width: 50% } } @media (min-width: 1025px) { .moisture-capsule-title-copy-img__text { max-width: 60% } } .moisture-capsule-title-copy-img__text__header { padding: 24px 0; font-family: "Didot"; font-style: italic; font-size: 64px; font-size: 4rem; text-transform: uppercase; line-height: 125% } @media (min-width: 641px) { .moisture-capsule-title-copy-img__text__header { padding: 16px 0; font-size: 4.5rem } } .moisture-capsule-title-copy-img__text__copy { font-family: "Helvetica Neue" } .moisture-capsule-title-copy-img__img { width: 100%; margin: 24px 12px } .moisture-capsule-title-copy-img__img img { object-fit: contain } @media (min-width: 641px) { .moisture-capsule-title-copy-img__img { margin: 0 0 0 5%; max-width: 35% } } @media (min-width: 1025px) { .moisture-capsule-title-copy-img__img { height: 40rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .moisture-capsule-video-img { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-size: 100vw; background-position: center; background-repeat: no-repeat; overflow: hidden; min-height: 75vw; background-image: var(--data-background-mobile-url) } @media (min-width: 641px) { .moisture-capsule-video-img { min-height: 512px; background-image: var(--data-background-url); background-position: bottom } } .moisture-capsule-video-img__wrapper { margin: 5%; width: 90% } @media (min-width: 641px) { .moisture-capsule-video-img__wrapper { margin: 10%; width: 80% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fab-fit-fun { } .fab-fit-fun .mob-nav { background-color: #e5e5e5 } .fab-fit-fun .btn-outline { padding: 18px 64px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-about-block { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100% } @media (min-width: 641px) { .fff-about-block { -webkit-align-items: unset; -ms-flex-align: unset; align-items: unset; margin-bottom: 10rem } } @media (min-width: 1025px) { .fff-about-block { -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 80%; margin: 0 auto; margin-bottom: 10rem; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } } .fff-about-block__img { width: 100%; margin: 80px 0; margin: 5rem 0 } @media (max-width: 640px) { .fff-about-block__img { margin: 3rem 0; margin-bottom: 0 } } @media (min-width: 641px) { .fff-about-block__img { width: 75% } } @media (min-width: 1025px) { .fff-about-block__img { width: 50%; padding-left: 3rem } } .fff-about-block__content { width: calc(100% - 30px); margin: 80px 0; margin: 5rem 0 } @media (min-width: 641px) { .fff-about-block__content { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; padding-right: 3rem; width: 75%; margin: 3rem 0 } } @media (min-width: 1025px) { .fff-about-block__content { -webkit-align-self: unset; -ms-flex-item-align: unset; -ms-grid-row-align: unset; align-self: unset; width: 50% } } .fff-about-block__content h3 { font-family: "Didot"; font-style: italic; font-weight: 400; text-align: center; text-transform: uppercase; font-size: 48px; font-size: 3rem; margin-bottom: 48px; margin-bottom: 3rem } @media (min-width: 641px) { .fff-about-block__content h3 { text-align: left } } .fff-about-block__copy { text-align: center } @media (min-width: 641px) { .fff-about-block__copy { text-align: left } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-bg-cta { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media (min-width: 641px) { .fff-bg-cta { -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .fff-bg-cta__background { height: 100vh; min-width: 100vw; width: auto; z-index: -1; background-position: center; min-height: 1200px; min-height: 75rem } @media (min-width: 641px) { .fff-bg-cta__background { min-height: 75rem } } @media (min-width: 1025px) { .fff-bg-cta__background { height: 75vh; width: 100% } } .fff-bg-cta__card { position: absolute; padding: 120px 48px; padding: 7.5rem 3rem; margin: 15px; background: #ffffff; width: calc(100% - 30px); text-align: center; bottom: 0; left: 0 } @media (min-width: 641px) { .fff-bg-cta__card { padding: 7.5rem 5rem; margin: 0; max-width: 75rem; width: 80%; bottom: unset; left: unset } } @media (min-width: 1025px) { .fff-bg-cta__card { width: 50% } } .fff-bg-cta__card__image {} .fff-bg-cta__card__image img { height: 160px; height: 10rem; width: auto; margin-bottom: 32px; margin-bottom: 2rem } .fff-bg-cta__card h2 { font-family: "Didot"; font-style: italic; font-weight: 400; text-align: center; text-transform: uppercase; margin-bottom: 64px; margin-bottom: 4rem; line-height: 145% } @media (min-width: 641px) { .fff-bg-cta__card h2 { font-size: 3rem } } .fff-bg-cta__card__copy { text-align: center } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-copy-bg-img { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } @media (min-width: 641px) { .fff-copy-bg-img { -webkit-align-items: center; -ms-flex-align: center; align-items: center } } .fff-copy-bg-img__content { position: absolute; padding: 120px 48px; padding: 7.5rem 3rem; margin: 15px; background: #ffffff; width: calc(100% - 30px); text-align: center; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } @media (min-width: 641px) { .fff-copy-bg-img__content { padding: 7.5rem 5rem; margin: 0; max-width: 75rem; width: 80%; left: unset } } @media (min-width: 1025px) { .fff-copy-bg-img__content { width: 50% } } .fff-copy-bg-img__content h3 { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 57.6px; font-size: 3.6rem; text-transform: uppercase; margin-bottom: 32px; margin-bottom: 2rem } @media (min-width: 1025px) { .fff-copy-bg-img__content h3 { font-size: 3.6rem } } .fff-copy-bg-img__content__copy { font-family: "Sofia Pro"; font-weight: 300 } .fff-copy-bg-img__background { height: 100vh; min-width: 100vw; width: auto; z-index: -1; background-position: center; min-height: 1200px; min-height: 75rem } @media (min-width: 641px) { .fff-copy-bg-img__background { min-height: 60rem } } @media (min-width: 1025px) { .fff-copy-bg-img__background { height: 75vh; width: 100% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-decorated-img-cta { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } @media (min-width: 641px) { .fff-decorated-img-cta { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } @media (min-width: 1025px) { .fff-decorated-img-cta { width: 75%; margin: 0 auto } } .fff-decorated-img-cta__img-wrapper { position: relative } @media (min-width: 641px) { .fff-decorated-img-cta__img-wrapper { width: 50%; margin: 10rem 30px } } @media (min-width: 1025px) { .fff-decorated-img-cta__img-wrapper { margin: 10rem 30px 5rem; width: 40% } } .fff-decorated-img-cta__img { width: 100%; max-height: 60vh } .fff-decorated-img-cta__img img { object-fit: contain } .fff-decorated-img-cta__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: calc(100% - 30px); margin: 120px 15px 0; margin: 7.5rem 15px 0 } @media (min-width: 641px) { .fff-decorated-img-cta__content { margin: 0 30px; width: 50% } } @media (min-width: 1025px) { .fff-decorated-img-cta__content { margin: 0 60px; width: 60% } } .fff-decorated-img-cta__content h3 { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 40px; font-size: 2.5rem; text-transform: uppercase; margin-bottom: 48px; margin-bottom: 3rem } @media (min-width: 641px) { .fff-decorated-img-cta__content h3 { font-size: 3rem } } .fff-decorated-img-cta__content__copy { font-family: "Sofia Pro"; font-weight: 300; margin-bottom: 48px; margin-bottom: 3rem } .fff-decorated-img-cta__content .btn-outline { width: -webkit-max-content; width: -moz-max-content; width: max-content } .fff-decorated-img-cta__decorative {} .fff-decorated-img-cta__decorative__bottom-left { position: absolute; height: auto; width: 192px; width: 12rem; bottom: 0; left: 0; -webkit-transform: translate(-25%, 25%); -ms-transform: translate(-25%, 25%); transform: translate(-25%, 25%); z-index: 1 } @media (min-width: 1025px) { .fff-decorated-img-cta__decorative__bottom-left { width: 15rem } } .fff-decorated-img-cta__decorative__mid-right { position: absolute; height: auto; width: 192px; width: 12rem; z-index: 1 } @media (min-width: 641px) { .fff-decorated-img-cta__decorative__mid-right { right: 0; top: 50%; -webkit-transform: translate(0%, -75%); -ms-transform: translate(0%, -75%); transform: translate(0%, -75%) } } @media (min-width: 1025px) { .fff-decorated-img-cta__decorative__mid-right { width: 15rem; -webkit-transform: translate(50%, -75%); -ms-transform: translate(50%, -75%); transform: translate(50%, -75%) } } .fff-decorated-img-cta__decorative__top-right { position: absolute; height: auto; width: 240px; width: 15rem; right: 0; top: 0; z-index: 1; -webkit-transform: translate(33%, 10%); -ms-transform: translate(33%, 10%); transform: translate(33%, 10%) } @media (min-width: 641px) { .fff-decorated-img-cta__decorative__top-right { z-index: -1; right: 0; top: 0; -webkit-transform: translate(30%, -75%); -ms-transform: translate(30%, -75%); transform: translate(30%, -75%) } } .fff-decorated-img-cta.\--contentLeft {} .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__img-wrapper {} @media (max-width: 640px) { .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__img-wrapper { width: calc(100% - 60px); margin-top: 60px; margin-left: 60px } } @media (min-width: 641px) { .fff-decorated-img-cta.\--contentLeft { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } } .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__decorative {} .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__decorative__mid-right, .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__decorative__top-right {} @media (max-width: 640px) { .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__decorative__mid-right, .fff-decorated-img-cta.\--contentLeft .fff-decorated-img-cta__decorative__top-right { display: none } } .fff-decorated-img-cta.\--contentRight {} .fff-decorated-img-cta.\--contentRight .fff-decorated-img-cta__img-wrapper {} @media (max-width: 640px) { .fff-decorated-img-cta.\--contentRight .fff-decorated-img-cta__img-wrapper { width: calc(100% - 60px); margin-top: 60px; margin-right: 60px } } @media (min-width: 641px) { .fff-decorated-img-cta.\--contentRight { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } .fff-decorated-img-cta.\--contentRight .fff-decorated-img-cta__decorative {} .fff-decorated-img-cta.\--contentRight .fff-decorated-img-cta__decorative__bottom-left {} @media (max-width: 640px) { .fff-decorated-img-cta.\--contentRight .fff-decorated-img-cta__decorative__bottom-left { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-hero-img-copy-btn { background-color: #e5e5e5 } @media (min-width: 1025px) { .fff-hero-img-copy-btn { background-color: unset } } .fff-hero-img-copy-btn__inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; min-height: calc(100vh - 56px - 72px); padding: 15px; padding-bottom: 30px } @media (min-width: 641px) { .fff-hero-img-copy-btn__inner { min-height: calc(100vh - 72px) } } @media (min-width: 1025px) { .fff-hero-img-copy-btn__inner { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 100vh; min-height: 768px; max-height: 80rem; padding: 0 } } .fff-hero-img-copy-btn__content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 24px 0; color: #000000; width: 100% } @media (min-width: 641px) { .fff-hero-img-copy-btn__content { -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 60%; text-align: center; margin: 5rem auto } } @media (min-width: 1025px) { .fff-hero-img-copy-btn__content { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 45%; padding: 0 3%; text-align: left } } .fff-hero-img-copy-btn__content h3 { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 38.4px; font-size: 2.4rem; line-height: 125%; text-transform: uppercase; margin-bottom: 38.4px; margin-bottom: 2.4rem } @media (min-width: 641px) { .fff-hero-img-copy-btn__content h3 { margin-bottom: 4rem } } @media (min-width: 1025px) { .fff-hero-img-copy-btn__content h3 { font-size: 3.2rem; margin-bottom: 3.6rem } } .fff-hero-img-copy-btn__logo { height: 64px; height: 4rem; margin-bottom: 38.4px; margin-bottom: 2.4rem; width: auto } .fff-hero-img-copy-btn__logo img { object-fit: contain } @media (min-width: 641px) { .fff-hero-img-copy-btn__logo { height: 5.6rem } } .fff-hero-img-copy-btn__img-wrapper { position: relative; height: -webkit-max-content; height: -moz-max-content; height: max-content; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #e5e5e5 } @media (min-width: 1025px) { .fff-hero-img-copy-btn__img-wrapper { height: 100%; width: 50% } } .fff-hero-img-copy-btn__img { display: block; height: auto; width: 100%; position: relative } @media (min-width: 641px) { .fff-hero-img-copy-btn__img { width: 75%; margin: 0 auto } } @media (min-width: 1025px) { .fff-hero-img-copy-btn__img { width: 80%; margin: 0 auto } } .fff-hero-img-copy-btn__img__stamp { position: absolute; bottom: 0; left: 10%; height: 153.6px; height: 9.6rem; max-height: 153.6px; max-height: 9.6rem; max-width: 153.6px; max-width: 9.6rem; width: auto } .fff-hero-img-copy-btn__img__stamp img { object-fit: contain } @media (min-width: 641px) { .fff-hero-img-copy-btn__img__stamp { margin: 4.8rem } } @media (min-width: 1025px) { .fff-hero-img-copy-btn__img__stamp { left: 0 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-key-benefits { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; overflow-x: clip; overflow-y: clip } .fff-key-benefits__background { height: 100vh; min-height: 1600px; min-height: 100rem; z-index: -1 } .fff-key-benefits__background img { object-fit: cover; object-position: bottom } @media (min-width: 641px) { .fff-key-benefits__background { min-height: 90rem; width: 100vw } } @media (min-width: 1025px) { .fff-key-benefits__background { height: 75rem; min-height: unset } } .fff-key-benefits__content { position: absolute; padding: 120px 30px; padding: 7.5rem 30px; width: 100%; text-align: center } @media (min-width: 641px) { .fff-key-benefits__content { padding: 7.5rem 10rem } } @media (min-width: 1025px) { .fff-key-benefits__content { padding: 7.5rem 10rem } } .fff-key-benefits__content h3 { font-family: "Sofia Pro"; font-weight: 300; text-align: center; text-transform: uppercase; font-size: 40px; font-size: 2.5rem; margin-bottom: 48px; margin-bottom: 3rem } @media (min-width: 1025px) { .fff-key-benefits__content h3 { margin-bottom: 5rem } } .fff-key-benefits__benefits { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 48px; margin-bottom: 3rem } @media (min-width: 1025px) { .fff-key-benefits__benefits { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-bottom: 4rem } } .fff-key-benefits__benefits__text { font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 48px; font-size: 3rem; line-height: 110%; text-transform: uppercase; margin: 48px 0; margin: 3rem 0; text-align: center } @media (min-width: 1025px) { .fff-key-benefits__benefits__text { margin: 3rem; text-align: left } } .fff-key-benefits__copy { font-family: "Sofia Pro"; font-weight: 300; text-align: center; margin-bottom: 48px; margin-bottom: 3rem } @media (min-width: 1025px) { .fff-key-benefits__copy { width: 65%; margin: 0 auto 3rem } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .fff-review-banner { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 80px; margin-top: 5rem } @media (min-width: 641px) { .fff-review-banner { margin-top: 10rem } } .fff-review-banner__background { height: 100vh; min-width: 100vw; width: auto; z-index: -1; background-position: center; min-height: 1200px; min-height: 75rem } @media (min-width: 641px) { .fff-review-banner__background { min-height: 75rem } } @media (min-width: 1025px) { .fff-review-banner__background { height: 75vh; width: 100% } } .fff-review-banner__card { position: absolute; padding: 120px 48px; padding: 7.5rem 3rem; margin: 15px; background: #ffffff; width: calc(100% - 30px); text-align: center; bottom: 0; left: 0 } @media (min-width: 641px) { .fff-review-banner__card { padding: 7.5rem 5rem; margin: 0; max-width: 75rem; width: 80%; bottom: unset; left: unset } } @media (min-width: 1025px) { .fff-review-banner__card { width: 50% } } .fff-review-banner__card-icon { position: absolute; height: auto; width: 64px; width: 4rem; margin: 32px; margin: 2rem } @media (min-width: 641px) { .fff-review-banner__card-icon { width: 7.5rem; margin: 3rem } } .fff-review-banner__card-icon.\--top { top: 0; left: 0 } .fff-review-banner__card-icon.\--bottom { bottom: 0; right: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .fff-review-banner__card h2 { font-family: "Didot"; font-style: italic; font-weight: 400; text-align: center; text-transform: uppercase; margin-bottom: 64px; margin-bottom: 4rem } @media (min-width: 641px) { .fff-review-banner__card h2 { font-size: 3rem } } .fff-review-banner__reviews { width: 100%; position: relative; overflow-x: hidden; margin-bottom: 64px; margin-bottom: 4rem } .fff-review-banner__reviews .flickity-viewport { overflow: visible; position: relative; height: 100% } .fff-review-banner__reviews .flickity-slider { position: absolute; width: 100%; height: 100% } .fff-review-banner__reviews .flickity-page-dots { width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1 } .fff-review-banner__reviews .flickity-rtl .flickity-page-dots { direction: rtl } .fff-review-banner__reviews .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333333; border-radius: 50%; opacity: 0.25; cursor: pointer } .fff-review-banner__reviews .flickity-page-dots .dot.is-selected { opacity: 1 } .fff-review-banner__review { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: auto; width: 100%; padding: 0 12.5% } .fff-review-banner__review__text { text-align: center; position: relative; margin-bottom: 48px; margin-bottom: 3rem } .fff-review-banner__review__reviewer { text-align: center; position: relative; font-family: "Sofia Pro"; font-weight: bold; margin-bottom: 48px; margin-bottom: 3rem } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .cookie-policy { padding: 48px 16px 0; margin-bottom: 20px } @media (min-width: 641px) { .cookie-policy { padding: 88px 80px 0 } } @media (min-width: 1025px) { .cookie-policy { padding: 88px 248px 0 144px } } .cookie-policy__header { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; text-align: left; text-transform: none; font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; margin-bottom: 40px; padding: 0 } @media (min-width: 641px) { .cookie-policy__header { font-size: 7.2rem; line-height: 110%; margin-right: 47px } } @media (min-width: 1025px) { .cookie-policy__header { margin-bottom: 93px } } .cookie-policy__description { font-size: 19.2px; font-size: 1.2rem; line-height: 28.8px; line-height: 1.8rem; margin-bottom: 20px } .cookie-policy__content { width: 100% } .cookie-policy__content__title { font-family: "Sofia Pro"; font-size: 28.8px; font-size: 1.8rem; text-transform: uppercase; margin-bottom: 32px; margin-bottom: 2rem } @media (min-width: 641px) { .cookie-policy__content__title { font-size: 2.4rem; margin-bottom: 3rem } } @media (min-width: 1025px) { .cookie-policy__content__title { margin-bottom: 4rem } } .cookie-policy__content__txt > p { font-size: 19.2px; font-size: 1.2rem; line-height: 28.8px; line-height: 1.8rem; margin-bottom: 20px } .cookie-policy__content__txt > ul { font-size: 19.2px; font-size: 1.2rem; line-height: 28.8px; line-height: 1.8rem; padding-left: 28.8px; padding-left: 1.8rem; margin-bottom: 12px; list-style-type: disc } .cookie-policy__btn { width: 240px; width: 15rem; padding: 12px 24px; font-family: "Minion Pro"; font-style: normal; font-weight: normal; font-size: 22.4px; font-size: 1.4rem; line-height: 100%; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; transition: all 0.3s ease; background-color: rgba(0, 0, 0, .2); border: 1px solid rgba(0, 0, 0, 0); color: #ffffff } @media (min-width: 1025px) { .cookie-policy__btn { cursor: pointer } } .cookie-policy__btn:not(.\--disabled) { background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 1); color: #000000 } .cookie-policy__btn:not(.\--disabled):hover { background-color: rgba(0, 0, 0, 1); color: #ffffff } @media (min-width: 1025px) { .cookie-policy__btn { cursor: pointer } } .CookieDeclaration { } .CookieDeclaration p { font-size: 19.2px; font-size: 1.2rem; line-height: 1.5 } .CookieDeclarationTable { font-size: 19.2px !important; font-size: 1.2rem !important; line-height: 1.5 !important } .CookieDeclaration a { text-decoration: underline } /* Hide default declration buttons */ #CookieDeclarationChangeConsent, #CookieDeclarationDoNotSell { display: none !important; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .texture-and-curls { > .small-cards-product > .small-cards-product__inner { max-width: none; } } .texture-and-curls .small-cards-product {} @media (min-width: 641px) { .texture-and-curls .small-cards-product { padding-top: 50px; } } .texture-and-curls .small-cards-product__grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } @media (min-width: 641px) { .texture-and-curls .small-cards-product__grid { -ms-grid-columns: (1fr)[3] !important; grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1025px) { .texture-and-curls .small-cards-product__grid { -ms-grid-columns: (1fr)[6] !important; grid-template-columns: repeat(6, 1fr) !important; } } .texture-and-curls__image-group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 32px; padding: 80px 40px; max-width: 100%; margin: auto; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .texture-and-curls__image-group img { max-width: 22%; } @media (max-width: 640px) { .texture-and-curls__image-group { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 80px 8px; padding-top: 40px; gap: 24px; } .texture-and-curls__image-group img { padding-top: 24px; max-width: 100%; } } @media (min-width: 641px) { .texture-and-curls__image-group { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .texture-and-curls__image-group img { max-width: 38%; } } @media (min-width: 1025px) { .texture-and-curls__image-group { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .texture-and-curls__image-group img { max-width: 22%; } } .texture-and-curls__ingredients { margin: auto; padding: 32px 16px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 1280px; gap: 32px; } @media (max-width: 640px) { .texture-and-curls__ingredients { padding: 24px 8px; padding-bottom: 0; gap: 64px; } } .texture-and-curls__ingredients-container { max-width: 600px; margin: auto; } .texture-and-curls__ingredients-container p { font-family: "Sofia Pro"; font-weight: 300; letter-spacing: 0.02em; font-size: 20px; line-height: 24px; text-align: center; } .texture-and-curls__ingredients-card { width: 48%; max-width: 480px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } @media (max-width: 640px) { .texture-and-curls__ingredients-card { width: 100%; max-width: 100%; } } .texture-and-curls__ingredients-card-product-list { list-style: none; padding: 40px; } @media (max-width: 640px) { .texture-and-curls__ingredients-card-product-list { padding-top: 32px; padding-bottom: 0; } } .texture-and-curls__ingredients-card-product-list h4 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 16px; line-height: 100%; color: #000000; padding-bottom: 8px; } .texture-and-curls__ingredients-card-product-list li a { text-align: center; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 32px; letter-spacing: 0.02em; -webkit-text-decoration-line: underline; text-decoration-line: underline; } .texture-and-curls__ingredients-card img { width: 112px; height: auto; padding-bottom: 16px; } .texture-and-curls__ingredients-card h4 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 24px; line-height: 100%; text-align: center; letter-spacing: 0.02em; color: #000000; padding-bottom: 16px; } .texture-and-curls__ingredients-card-text { height: auto; min-height: 220px; } .texture-and-curls__ingredients-card-text p { font-family: "Sofia Pro"; font-weight: 300; letter-spacing: 0.02em; font-size: 20px; line-height: 24px; text-align: center; } .texture-and-curls__ingredients-images { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .texture-and-curls__ingredients-image { margin: 0 16px; margin: 0 1rem; } .texture-and-curls__ingredients-image.\--top {} .texture-and-curls__ingredients-image.\--top:nth-child(even) { display: none; } @media (min-width: 641px) { .texture-and-curls__ingredients-image.\--top:nth-child(even) { display: block; } } .texture-and-curls__ingredients-image.\--bottom {} .texture-and-curls__ingredients-image.\--bottom:nth-child(odd) { display: none; } @media (min-width: 641px) { .texture-and-curls__ingredients-image.\--bottom { display: none; } } .texture-and-curls__ingredients-text { text-align: center; width: 100%; } .texture-and-curls__ingredients-text p { font-family: "Sofia Pro"; font-weight: 300; letter-spacing: 0.02em; font-size: 20px; line-height: 24px; text-align: center; } @media (min-width: 641px) { .texture-and-curls__ingredients-text { width: 75%; margin-top: 2em; } } .texture-and-curls__ingredients-text img { height: 80px; height: 5rem; margin: 48px 0; margin: 3rem 0; width: auto; } .texture-and-curls__img-and-text { max-width: 1280px; margin: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 56px; padding: 0 32px; padding-top: 60px; } @media (max-width: 640px) { .texture-and-curls__img-and-text { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; padding: 0 8px; gap: 24px; } } .texture-and-curls__img-and-text.\--section-two {} @media (max-width: 640px) { .texture-and-curls__img-and-text.\--section-two { -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .texture-and-curls__img-and-text .text-container { width: 55%; max-width: 500px; } @media (max-width: 640px) { .texture-and-curls__img-and-text .text-container { width: 100%; max-width: none; } } .texture-and-curls__img-and-text .text-container h4 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; letter-spacing: 0.02em; padding-bottom: 24px; color: #000000; } @media (max-width: 640px) { .texture-and-curls__img-and-text .text-container h4 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 100%; } } .texture-and-curls__img-and-text .text-container p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; padding-bottom: 24px; } .texture-and-curls__img-and-text .text-container .texture-and-curls__extras { padding-top: 24px; } .texture-and-curls__img-and-text .text-container .texture-and-curls__extras p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 10px; line-height: 16px; letter-spacing: 0.02em; color: #000000; padding-bottom: 0; } .texture-and-curls__img-and-text .img-container { width: 45%; max-width: 460px; } @media (max-width: 640px) { .texture-and-curls__img-and-text .img-container { width: 100%; max-width: none; } } .texture-and-curls__text-and-cta { padding: 32px 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; max-width: 1008px; width: 100%; margin: auto; } .texture-and-curls__text-and-cta h3 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; letter-spacing: 0.02em; } @media (max-width: 640px) { .texture-and-curls__text-and-cta h3 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 100%; } } .curl-heading { text-align: center; margin: 0 auto; margin-bottom: 48px; width: 100%; max-width: 1440px } @media (min-width: 641px) { .curl-heading { width: 75%; } } .curl-heading-title { font-family: "Cera Pro"; font-size: 76.8px; font-size: 4.8rem; font-weight: 700; line-height: 100%; margin-bottom: 48px; margin-bottom: 3rem; } @media (min-width: 641px) { .curl-heading-title { font-size: 6.4rem; } } .curl-cta { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative } .curl-cta-btn-wrapper { padding: 0 32px; padding: 0 2rem; background: white; } .curl-cta-bg { display: none; } @media (min-width: 641px) { .curl-cta-bg { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: -1; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ps-curl-list { margin: 32px 0; padding: 32px 16px } .ps-curl-list-content { margin: 4em auto 0 auto } @media (min-width: 1025px) { .ps-curl-list-content { max-width: 90% } } .ps-curl-list__curl { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 50px auto; width: 100% } @media (min-width: 1025px) { .ps-curl-list__curl { width: 90% } } @media (min-width: 641px) { .ps-curl-list__curl { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row } } @media (min-width: 1025px) { .ps-curl-list__curl { margin: 75px auto } } .ps-curl-list__curl-mobile-title { font-family: "Cera Pro"; font-size: 51.2px; font-size: 3.2rem; font-weight: 700; line-height: 100%; margin: 16px 0 32px 0; margin: 1rem 0 2rem 0; text-align: center } @media (min-width: 641px) { .ps-curl-list__curl-mobile-title { display: none } } .ps-curl-list__curl-mobile-title-icon { display: none } @media (max-width: 640px) { .ps-curl-list__curl-mobile-title-icon { display: block; width: 100px; margin: auto } } .ps-curl-list__curl-image {} @media (min-width: 641px) { .ps-curl-list__curl-image { -webkit-flex: 40%; -ms-flex: 40%; flex: 40%; margin-right: 3rem } } .ps-curl-list__curl-content {} @media (min-width: 641px) { .ps-curl-list__curl-content { -webkit-flex: 60%; -ms-flex: 60%; flex: 60% } } .ps-curl-list__curl-content__title { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin: 16px 0 32px 0; margin: 1rem 0 2rem 0; text-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .ps-curl-list__curl-content__title h3 { font-family: "Cera Pro"; font-size: 64px; font-size: 4rem; font-weight: 700; line-height: 100%; display: none } @media (min-width: 641px) { .ps-curl-list__curl-content__title h3 { display: block } } @media (min-width: 641px) { .ps-curl-list__curl-content__title { text-align: left } } .ps-curl-list__curl-content__title svg { height: 32px; height: 2rem; display: none } @media (min-width: 641px) { .ps-curl-list__curl-content__title svg { display: inline-block } } .ps-curl-list__curl-content__title-icon { max-width: 150px } @media (max-width: 640px) { .ps-curl-list__curl-content__title-icon { display: none } } .ps-curl-list__curl-content__description { margin-bottom: 80px; margin-bottom: 5rem; text-align: center } @media (min-width: 641px) { .ps-curl-list__curl-content__description { text-align: left } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } video::-webkit-media-controls { display: none; } .ps-hero-video { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; min-height: 768; width: 100% } @media (min-width: 641px) { .ps-hero-video { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } .ps-hero-video__responsive { padding: 100% 0 0 0; position: relative; overflow: hidden; } .ps-hero-video__responsive-wrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .ps-hero-video__responsive-wrapper video { height: 100%; width: auto; } .ps-hero-video__content { padding: 8px 16px; } @media (min-width: 641px) { .ps-hero-video__content { -webkit-flex: 45%; -ms-flex: 45%; flex: 45%; padding: 22px 32px; } } @media (min-width: 1025px) { .ps-hero-video__content { margin-bottom: 10%; } } .ps-hero-video__content h2 { margin: 24px 0; font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 56px; line-height: 105%; letter-spacing: -0.01em; } @media (max-width: 640px) { .ps-hero-video__content h2 { font-style: normal; font-weight: 700; font-size: 32px; line-height: 100%; } } @media (min-width: 641px) { .ps-hero-video__content h2 { margin: 0 0 24px 0; font-size: 6.4rem; } } .ps-hero-video__content p { max-width: 800px; max-width: 50rem; } .ps-hero-video__video { width: 100%; } @media (min-width: 641px) { .ps-hero-video__video { -webkit-flex: 55%; -ms-flex: 55%; flex: 55%; max-width: calc(100vh - 72px); } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ps-products-list { margin: 32px 0; padding: 32px 16px } .ps-products-list__products { display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 48px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .ps-products-list .curl-heading-title { font-style: normal; font-weight: 700; font-size: 40px; line-height: 100% } .ps-products-list .small-cards-product__card { width: 16% } .ps-products-list .small-cards-product__card-link { text-decoration: underline; text-transform: capitalize; margin-bottom: 0.25em; font-family: "Minion Pro" } .ps-products-list .small-cards-product__card-link:hover { text-decoration: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ps-video-banner { height: auto; max-height: none } @media (min-width: 641px) { .ps-video-banner { padding: 56px 0 } } @media (max-width: 640px) { .ps-video-banner { padding: 56px 0 } } @media (min-width: 1025px) { .ps-video-banner { padding: 110px 130px } } .ps-video-banner h3 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; letter-spacing: 0.02em; margin: auto; padding-bottom: 40px; padding-top: 32px; text-align: center } @media (max-width: 640px) { .ps-video-banner h3 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 100% } } .ps-video-banner__video { margin-bottom: 32px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ps-video-banner { height: auto; max-height: none } @media (min-width: 641px) { .ps-video-banner { padding: 56px 0 } } @media (max-width: 640px) { .ps-video-banner { padding: 56px 0 } } @media (min-width: 1025px) { .ps-video-banner { padding: 110px 130px } } .ps-video-banner h3 { font-family: "Cera Pro"; font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; letter-spacing: 0.02em; margin: auto; padding-bottom: 40px; padding-top: 32px; text-align: center } @media (max-width: 640px) { .ps-video-banner h3 { font-style: normal; font-weight: 700; font-size: 24px; line-height: 100% } } .ps-video-banner__video { margin-bottom: 32px } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .ps-video-carousel { margin: 32px 0; padding: 32px 16px } .ps-video-carousel__slider { height: 65vw; width: 100%; overflow: hidden; outline: none; margin-bottom: 32px; position: relative } @media (min-width: 641px) { .ps-video-carousel__slider { height: 45vw } } @media (min-width: 1025px) { .ps-video-carousel__slider { max-width: 90%; margin: 0 auto 32px auto; height: 38vw } } .ps-video-carousel__slider:active, .ps-video-carousel__slider:focus, .ps-video-carousel__slider:focus-visible { outline: none } .ps-video-carousel__slider .flickity-slider { outline: none } .ps-video-carousel__slider .flickity-slider:active, .ps-video-carousel__slider .flickity-slider:focus, .ps-video-carousel__slider .flickity-slider:focus-visible { outline: none } .ps-video-carousel__slider .w-chrome, .ps-video-carousel__slider .w-chrome > *, .ps-video-carousel__slider .wistia_embed_initialized { height: 100% !important } .ps-video-carousel__slider .flickity-viewport { overflow: hidden; outline: none; height: 100% !important } .ps-video-carousel__slider .flickity-page-dots { position: absolute; display: -webkit-flex; display: -ms-flexbox; display: flex; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 5px; z-index: 8; cursor: pointer } @media (min-width: 641px) { .ps-video-carousel__slider .flickity-page-dots { bottom: 5px } } @media (min-width: 1025px) { .ps-video-carousel__slider .flickity-page-dots { bottom: 2px } } .ps-video-carousel__slider .dot { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #171717; margin: 0 8px; margin: 0 0.5rem } @media (min-width: 641px) { .ps-video-carousel__slider .dot { width: 14px; height: 14px } } @media (min-width: 1025px) { .ps-video-carousel__slider .dot { width: 8px; height: 8px } } .ps-video-carousel__slider .dot.is-selected { background-color: #171717 } .ps-video-carousel__slider .flickity-button.flickity-prev-next-button { position: absolute; width: 20px; height: 20px; left: 50%; bottom: 0; border: none; background-color: transparent; background-image: url(/img/sliderarrow-black.svg); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 8 } @media (min-width: 641px) { .ps-video-carousel__slider .flickity-button.flickity-prev-next-button { width: 25px; height: 25px } } @media (min-width: 1025px) { .ps-video-carousel__slider .flickity-button.flickity-prev-next-button { background-image: url(/img/sliderarrow-black-desktop.svg); width: 12px; height: 12px; cursor: pointer } } .ps-video-carousel__slider .flickity-button.flickity-prev-next-button svg { display: none } .ps-video-carousel__slider .flickity-button.flickity-prev-next-button.previous { -webkit-transform: translateX(-84px) rotate(180deg); -ms-transform: translateX(-84px) rotate(180deg); transform: translateX(-84px) rotate(180deg) } @media (min-width: 1025px) { .ps-video-carousel__slider .flickity-button.flickity-prev-next-button.previous { -webkit-transform: translateX(-42px) rotate(180deg); -ms-transform: translateX(-42px) rotate(180deg); transform: translateX(-42px) rotate(180deg) } } .ps-video-carousel__slider .flickity-button.flickity-prev-next-button.next { -webkit-transform: translateX(64px); -ms-transform: translateX(64px); transform: translateX(64px) } @media (min-width: 1025px) { .ps-video-carousel__slider .flickity-button.flickity-prev-next-button.next { -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px) } } .ps-video-carousel__slider-video { width: 100%; height: 100%; margin: 0 auto } @media (min-width: 641px) { .ps-video-carousel__slider-video { padding: 0 15% } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dive-into-moisture { > .small-cards-product > .small-cards-product__inner { max-width: none; } } .dive-into-moisture .small-cards-product {} @media (min-width: 641px) { .dive-into-moisture .small-cards-product { padding-top: 50px; } } .dive-into-moisture .small-cards-product__grid { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .dive-into-moisture .small-cards-product__card { -webkit-flex: 1 0 21%; -ms-flex: 1 0 21%; flex: 1 0 21%; margin: 5px; } @media (min-width: 641px) { .dive-into-moisture .small-cards-product__card { -webkit-flex: 1 0 28%; -ms-flex: 1 0 28%; flex: 1 0 28%; margin: 5px; } } @media (max-width: 640px) { .dive-into-moisture .small-cards-product__card { -webkit-flex: 1 0 44%; -ms-flex: 1 0 44%; flex: 1 0 44%; margin: 5px; } } @media (min-width: 1025px) { .dive-into-moisture .small-cards-product__card { -webkit-flex: 1 0 21%; -ms-flex: 1 0 21%; flex: 1 0 21%; margin: 5px; } } .dive-into-moisture__ingredients { margin: 32px 0; padding: 32px 16px; } .dive-into-moisture__ingredients-images { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .dive-into-moisture__ingredients-image { margin: 0 16px; margin: 0 1rem; } .dive-into-moisture__ingredients-image.\--top {} .dive-into-moisture__ingredients-image.\--top:nth-child(even) { display: none; } @media (min-width: 641px) { .dive-into-moisture__ingredients-image.\--top:nth-child(even) { display: block; } } .dive-into-moisture__ingredients-image.\--bottom {} .dive-into-moisture__ingredients-image.\--bottom:nth-child(odd) { display: none; } @media (min-width: 641px) { .dive-into-moisture__ingredients-image.\--bottom { display: none; } } .dive-into-moisture__ingredients-text { text-align: center; margin: 0 auto; max-width: 1440px; } @media (min-width: 641px) { .dive-into-moisture__ingredients-text { width: 75%; margin-top: 2em; } } .dive-into-moisture__ingredients-text img { height: 80px; height: 5rem; margin: 48px 0; margin: 3rem 0; width: auto; } .curl-heading { text-align: center; margin: 0 auto; margin-bottom: 48px; width: 100%; max-width: 1440px } @media (min-width: 641px) { .curl-heading { width: 75%; } } .curl-heading-title { font-family: "Cera Pro"; font-size: 76.8px; font-size: 4.8rem; font-weight: 700; line-height: 100%; margin-bottom: 48px; margin-bottom: 3rem; } @media (min-width: 641px) { .curl-heading-title { font-size: 6.4rem; } } .curl-cta { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative } .curl-cta-btn-wrapper { padding: 0 32px; padding: 0 2rem; background: white; } .curl-cta-bg { display: none; } @media (min-width: 641px) { .curl-cta-bg { display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: -1; } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-btn-img-bg { margin-bottom: 24px; position: relative; background-size: cover !important } .title-txt-btn-img-bg__copy-wrapper { padding: 0 8px } @media (min-width: 641px) { .title-txt-btn-img-bg { margin-bottom: 50px } } .title-txt-btn-img-bg a { padding: 12px 32px } .title-txt-btn-img-bg picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .title-txt-btn-img-bg picture img { object-fit: cover; object-position: center } @media (min-width: 1025px) { .title-txt-btn-img-bg picture img { object-position: center } } .title-txt-btn-img-bg__inner { height: calc(100vh - 60px); padding-top: 12px; padding-bottom: 68px; position: relative; z-index: 1; background-size: cover !important } @media (min-width: 641px) { .title-txt-btn-img-bg__inner { padding-top: 12px; padding-bottom: 12px } } @media (min-width: 1025px) { .title-txt-btn-img-bg__inner { height: calc(100vh - 80px) } } .title-txt-btn-img-bg__inner--video { overflow: hidden } .title-txt-btn-img-bg__inner-content { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100% } .title-txt-btn-img-bg__inner-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105% } @media (min-width: 641px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 48px } } @media (max-width: 640px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 48px } } @media (min-width: 1025px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 64px } } .title-txt-btn-img-bg p { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; color: #ffffff } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 90%; margin: 0 auto } } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 95%; margin: 0 auto } } .title-txt-btn-img-bg .btn-outline { margin: 32px 8px 0; color: #ffffff; border-color: #ffffff } .title-txt-btn-img-bg .btn-outline:hover { background-color: #ffffff; color: #171717 } .title-txt-btn-img-bg.\--banner { margin: 0 auto } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { height: auto; padding: 20px 16px } @media (min-width: 641px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { min-height: 515px; padding-top: 62px } } @media (min-width: 1025px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { padding-top: 90px; min-height: 700px } } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner-content { display: -webkit-flex; display: -ms-flexbox; display: flex } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-description { max-width: 1280px } @media (max-width: 640px) { .dim-description { margin: 30px auto } } @media (min-width: 641px) { .dim-description { margin: 90px auto } } @media (min-width: 1025px) { .dim-description { margin: 90px auto } } .dim-description-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; max-width: 800px; margin: auto } .dim-description-header h2 { width: 100%; font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105%; margin-bottom: 24px } @media (max-width: 640px) { .dim-description-header h2 { font-size: 24px } } @media (min-width: 1025px) { .dim-description-header h2 { font-size: 36px } } .dim-description-header p { width: 100%; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-bottom: 50px } .dim-description-columns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; height: auto; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-description-columns__column { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } @media (max-width: 640px) { .dim-description-columns__column { width: 100%; margin: 0 8px; text-align: center } } @media (min-width: 641px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } @media (min-width: 1025px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } .dim-description-columns__column-content { margin: 64px 0 } @media (max-width: 640px) { .dim-description-columns__column-content { margin: 40px 0 } } @media (min-width: 1025px) { .dim-description-columns__column-content { margin: 64px 0 } } .dim-description-columns__column-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105% } .dim-description-columns__column-content p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-top: 16px } .dim-description-columns__column img {} @media (max-width: 640px) { .dim-description-columns__column img { max-width: 100%; max-height: 460px } } @media (min-width: 1025px) { .dim-description-columns__column img { max-width: 500px; max-height: 560px } } .dim-description-columns .\--right {} @media (max-width: 640px) { .dim-description-columns .\--right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media (min-width: 1025px) { .dim-description-columns .\--right { display: block; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-video { height: auto; max-height: none } @media (min-width: 641px) { .dim-video { padding: 56px 0 } } @media (max-width: 640px) { .dim-video { padding: 56px 0 } } @media (min-width: 1025px) { .dim-video { padding: 110px 130px } } .w-big-play-button div { /* remove background on video play button */ background: unset !important; } .ps-video-banner__video { margin-bottom: 40px; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-blog { } .dim-blog__title-wrapper { text-align: center } .dim-blog__title-wrapper h2 { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-bottom: 16px } .dim-blog__title-wrapper h3 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 36px; line-height: 105% } .dim-blog .title-card-grid { } .dim-blog .title-card-grid.container.\--small { } @media (max-width: 640px) { .dim-blog .title-card-grid.container.\--small { padding: 20px 0 !important } } .dim-blog .title-card-grid .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center } .dim-blog .title-card-grid .title-card-grid__card-img-wrap { } @media (max-width: 640px) { .dim-blog .title-card-grid .title-card-grid__card-img-wrap { max-height: 240px } } .dim-blog .title-card-grid .title-card-grid__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } .dim-blog .title-card-grid .title-card-grid__card .title-card-grid__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-order: 3; -ms-flex-order: 3; order: 3; font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105%; text-transform: capitalize !important; padding: 8px } .dim-blog .title-card-grid .title-card-grid__card .title-card-grid__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 14px; line-height: 100% } .dim-blog .title-card-grid .title-card-grid__card .title-card-grid__card-read_more { -webkit-order: 4; -ms-flex-order: 4; order: 4; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 14px; line-height: 100% } .dim-blog .title-card-grid .title-card-grid__card .title-card-grid__card-read_more img { width: 18px; height: 12px } .dim-blog .filter-component { overflow: auto; padding-top: 55px; position: fixed; top: 0; height: calc(100vh - 56px); z-index: 99; background-color: #ffffff; display: none } @media (min-width: 641px) { .dim-blog .filter-component { overflow: visible; padding-top: 0; position: static; display: -ms-grid; display: grid; height: auto; padding-right: 16px; padding-left: 8px } } @media (min-width: 1025px) { .dim-blog .filter-component { padding-right: 40px; padding-left: 32px; max-width: 1440px; margin: 0 auto } } .dim-blog .\--active.filter-component__open-list-btn { display: none } @media (min-width: 641px) { .dim-blog .\--active.filter-component__open-list-btn { display: block } } .dim-blog .\--close.filter-component__close-list-btn { } @media (max-width: 640px) { .dim-blog .\--close.filter-component__close-list-btn { display: none !important } } .dim-blog .filter-component__filter-wrap { border-top-color: transparent } @media (min-width: 641px) { .dim-blog .filter-component__filter-wrap { border-top-color: #777777 } } .dim-blog .filter-component__inner { padding-left: 8px; padding-right: 8px } .dim-blog .filter-component__result-container { } @media (max-width: 640px) { .dim-blog .filter-component__result-container { display: none; background-color: #ffffff; margin-top: 32px; min-height: 100vh } } @media (min-width: 641px) { .dim-blog .filter-component__result-container { padding-top: 48px } } @media (min-width: 1025px) { .dim-blog .filter-component__result-container { padding-top: 56px } } .dim-blog .filter-component__result-container .title-card-grid__card { display: block } @media (min-width: 1025px) { .dim-blog .filter-component__result-container .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .dim-blog .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 48px } @media (min-width: 1025px) { .dim-blog .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 0 } } .dim-blog .card-slider .card-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .dim-blog .card-slider .card-slider__card picture { } @media (min-width: 1025px) { .dim-blog .card-slider .card-slider__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .dim-blog .card-slider .card-slider__card .card-slider__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } @media (min-width: 1025px) { .dim-blog .card-slider .card-slider__card .card-slider__card-title { -webkit-order: 3; -ms-flex-order: 3; order: 3 } } .dim-blog .card-slider .card-slider__card .card-slider__card-date { } @media (min-width: 1025px) { .dim-blog .card-slider .card-slider__card .card-slider__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .dim-blog .filter-component + .title-card-grid { padding-top: 10px } @media (min-width: 641px) { .dim-blog .filter-component + .title-card-grid { padding-top: 49px } } @media (min-width: 1025px) { .dim-blog .filter-component + .title-card-grid { padding-top: 65px } } .dim-blog__mobile-btn { font-family: "Sofia Pro"; /* display: block; it has been replaced by the mobile-btn-icon */ display: none; background: #ffffff; position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 152px; height: 43px; line-height: 40px; text-align: center; border: 1px solid #171717; z-index: 99 } @media (min-width: 641px) { .dim-blog__mobile-btn { display: none } } .dim-blog__mobile-btn.\--apply { display: none; width: 152px; height: 43px } .dim-blog__mobile-btn-close { display: none; position: fixed; top: 11px; right: 15px; width: 24px; height: 24px; background-image: url(/img/close.svg); background-size: cover; z-index: 100; background-color: transparent; border-color: transparent } .dim-blog__mobile-btn-icon { display: none } @media (max-width: 640px) { .dim-blog__mobile-btn-icon { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; cursor: pointer; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); position: fixed; z-index: 100; left: auto; right: 10px; top: calc(50% + 30px); background: #ffffff; border: 1px solid #f3f2f4; border-radius: 40px; box-sizing: border-box; box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } .dim-blog__mobile-btn-icon .filter-icon { width: 16px; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex } .dim-blog__mobile-btn-icon .filter-icon.filter-filled { position: relative } .dim-blog__mobile-btn-icon .filter-icon.filter-filled::after { content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #eb5757; position: absolute; top: -4px; right: -4px } .dim-blog__mobile-btn-icon .filter-icon.hide { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-heading { background-repeat: no-repeat; background-size: cover; background-position: center; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0 } .dim-heading__wrapper { max-width: 800px; text-align: center; margin: auto } .dim-heading__wrapper h2 { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading__wrapper h3 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 36px; line-height: 105%; margin-bottom: 24px; margin-top: 16px } .dim-heading__wrapper p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading-flex { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-products-list__products { max-width: 100%; width: -webkit-fill-available } @media (max-width: 640px) { .dim-products-list__products { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 641px) { .dim-products-list__products { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } @media (min-width: 1025px) { .dim-products-list__products { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr) } } .dim-products-list__products-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: auto; margin-bottom: 100px; max-width: 1440px } .\--light-text { font-weight: 300; } .\--desktop { display: block } .\--mobile { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .press-banner { padding: 94px 0; margin: 0; background-size: cover !important } .press-banner a, .press-banner a:visited, .press-banner span { outline: none } @media (max-width: 1024px) { .press-banner { padding: 80px 0 } } @media (max-width: 640px) { .press-banner { padding: 80px 0 } } .press-banner * { outline: none !important } .press-banner h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 36px; line-height: 105%; text-align: center; margin-bottom: 50px; color: #ffffff } @media (max-width: 640px) { .press-banner h2 { font-size: 2.4rem; margin-bottom: 3.2rem } } .press-banner__presses { width: 100%; position: relative; overflow: hidden; padding-bottom: 240px; padding-bottom: 15rem } @media (max-width: 640px) { .press-banner__presses { padding-bottom: 12rem } } @media (min-width: 641px) { .press-banner__presses { padding-bottom: 14rem } } @media (min-width: 1025px) { .press-banner__presses { padding-bottom: 15rem } } .press-banner__presses .flickity-viewport { overflow: visible; position: relative; height: 100% } .press-banner__presses .flickity-slider { position: absolute; width: 100%; height: 100% } .press-banner__presses .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1 } .press-banner__presses .flickity-rtl .flickity-page-dots { direction: rtl } .press-banner__presses .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #ffffff; border-radius: 50%; opacity: 0.25; cursor: pointer } .press-banner__presses .flickity-page-dots .dot.is-selected { opacity: 1 } .press-banner__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 33.333%; padding: 0 2%; padding-top: 2px } @media (max-width: 1024px) { .press-banner__card { width: 48%; padding: 2px 3% 0 } } @media (max-width: 640px) { .press-banner__card { width: 95%; padding: 2px 6% 0 } } .press-banner__card-text { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; position: relative; padding: 16px; padding: 1rem; font-size: 16px; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); text-align: center } .press-banner__card-text .client-review {} .press-banner__card-text .client-review p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; width: 100%; margin-bottom: 16px } .press-banner__card-text .client-name { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 12px; line-height: 100%; width: 100%; margin-top: 8px } .press-banner__card-text .stars {} .press-banner__card-text .stars .fa { color: #b299ca } .press-banner__card-text .stars .fa.checked { color: #472e5f } .press-banner__card-text #star_no { position: absolute; opacity: 0; visibility: hidden } .press-banner__card-text::after { content: ""; width: 0; height: 0; position: absolute; bottom: -14px; left: calc(50% - 15px); border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid white; -webkit-filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .25)); filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .25)); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .press-banner__card-logo { padding-top: 112px; padding-top: 7rem } .press-banner__card-logo img { height: 64px; height: 4rem; width: auto } @media (max-width: 640px) { .press-banner__card-logo img { height: auto; max-height: 4rem; width: auto; max-width: 90%; display: block; margin: 0 auto } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .accessibility-statement { padding: 48px 16px 0; margin-bottom: 20px } @media (min-width: 641px) { .accessibility-statement { padding: 88px 80px 0 } } @media (min-width: 1025px) { .accessibility-statement { padding: 88px 248px 0 144px } } .accessibility-statement__header { font-family: "Cera Pro"; font-size: 102.4px; font-size: 6.4rem; line-height: 105%; text-align: left; text-transform: none; font-family: "Chiswick Sans"; font-size: 38.4px; font-size: 2.4rem; line-height: 100%; margin-bottom: 40px; padding: 0 } @media (min-width: 641px) { .accessibility-statement__header { font-size: 7.2rem; line-height: 110%; margin-right: 47px } } @media (min-width: 1025px) { .accessibility-statement__header { margin-bottom: 93px } } .accessibility-statement__description { width: 100% } .accessibility-statement__description > p { font-size: 19.2px; font-size: 1.2rem; line-height: 28.8px; line-height: 1.8rem; margin-bottom: 20px } .accessibility-statement__description > ul { font-size: 19.2px; font-size: 1.2rem; line-height: 28.8px; line-height: 1.8rem; padding-left: 28.8px; padding-left: 1.8rem; margin-bottom: 12px; list-style-type: disc } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .brilit { margin: auto; max-width: 100% } .brilit-wrapper { background: #a8b3e4; overflow: hidden } .brilit-wrapper .mob-nav { position: absolute; top: 0; left: 0; right: 0; width: 100% } .brilit-banner-section { height: 0; background-position: center !important; background-repeat: no-repeat !important; position: relative; background-size: cover !important; overflow: hidden } @media (max-width: 640px) { .brilit-banner-section { padding-top: 150% } } @media (min-width: 641px) { .brilit-banner-section { padding-top: 60% } } @media (min-width: 1025px) { .brilit-banner-section { padding-top: 50% } } .brilit-banner-section__logo { position: absolute; height: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media (max-width: 640px) { .brilit-banner-section__logo { width: 150px; top: 80px } } @media (min-width: 641px) { .brilit-banner-section__logo { width: 200px; top: 80px } } @media (min-width: 1025px) { .brilit-banner-section__logo { width: 240px; top: 101px } } .brilit-banner-section__alt-background { position: absolute } .brilit-banner-section div.ps-hero-video__responsive { padding: 57% 0 0 0; position: absolute !important; overflow: hidden !important; top: 0 !important; right: 0 !important; left: 0 !important } .brilit-banner-section div.ps-hero-video__responsive.-wrapper { height: auto } .brilit-section { position: relative; z-index: 1 } @media (max-width: 640px) { .brilit-section { padding: 42px 16px } } @media (min-width: 641px) { .brilit-section { padding: 42px 16px } } @media (min-width: 1025px) { .brilit-section { padding: 64px 32px } } .brilit-section-title { color: #000000; text-align: center; max-width: 800px; width: 100%; margin: auto } .brilit-section-title.main { max-width: 1024px } .brilit-section-title h1 { font-feature-settings: 'clig' off, 'liga' off; font-family: "Didot"; font-style: italic; font-weight: 400; line-height: 105%; text-transform: uppercase; text-align: center } @media (max-width: 640px) { .brilit-section-title h1 { font-size: 32px; padding-bottom: 24px } } @media (min-width: 641px) { .brilit-section-title h1 { font-size: 48px; padding-bottom: 24px } } @media (min-width: 1025px) { .brilit-section-title h1 { font-size: 64px; padding-bottom: 56px } } .brilit-section-title h1 sup { top: -0.75em; font-size: 50% } .brilit-section-title h2 { font-feature-settings: 'clig' off, 'liga' off; font-family: "Didot"; color: #000000; font-style: italic; font-weight: 400; line-height: 105%; text-transform: capitalize; text-align: center } @media (max-width: 640px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 24px } } @media (min-width: 641px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 24px } } @media (min-width: 1025px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 36px } } .brilit-section-title_header { font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; letter-spacing: 1.76px; text-transform: uppercase; padding-bottom: 16px; text-align: center } .brilit-section-title_text { font-family: "Sofia Pro"; font-size: 16px !important; font-style: normal; font-weight: 300; line-height: 24px !important; letter-spacing: 0.32px; margin: auto; text-align: center } @media (max-width: 640px) { .brilit-section-title_text { padding-bottom: 16px } } @media (min-width: 641px) { .brilit-section-title_text { padding-bottom: 16px } } @media (min-width: 1025px) { .brilit-section-title_text { padding-bottom: 20px } } .brilit-section-title_text p { font-size: 16px !important; line-height: 24px !important } .brilit-section-title_text.small { font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 12px; font-style: normal; font-weight: 300; line-height: 100%; padding: 8px 0; background-color: #ffffff } .brilit-section-title_text.w800 { max-width: 800px } .brilit-section-title_text.w650 { max-width: 650px } .brilit-section-title_text.is-top-24 {} @media (max-width: 640px) { .brilit-section-title_text.is-top-24 { padding-top: 0 } } @media (min-width: 641px) { .brilit-section-title_text.is-top-24 { padding-top: 24px } } @media (min-width: 1025px) { .brilit-section-title_text.is-top-24 { padding-top: 32px } } .brilit-section-2-img-grid { display: -ms-grid; display: grid; max-width: 1280px; margin: auto } @media (max-width: 640px) { .brilit-section-2-img-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; margin: 0 -16px } } @media (min-width: 641px) { .brilit-section-2-img-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; margin: auto } } @media (min-width: 1025px) { .brilit-section-2-img-grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin: auto } } .brilit-section__video-wrap { display: -ms-grid; display: grid } @media (min-width: 641px) { .brilit-section__video-wrap { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-gap: 16px; padding-top: 18px } } @media (min-width: 1025px) { .brilit-section__video-wrap { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; padding-top: 18px } } .brilit-section__video-wrap .styling-card { width: 100%; position: relative; padding: 0 !important } .brilit-section.\--video { width: 100%; margin: auto } @media (max-width: 640px) { .brilit-section.\--video { padding: 32px 0 } } @media (min-width: 641px) { .brilit-section.\--video { padding: 32px 0 } } @media (min-width: 1025px) { .brilit-section.\--video { padding: 64px 130px } } .brilit-section.img-section { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 } .brilit-section.white-section { background: #ffffff } .brilit-section.\--key-benefits { position: relative; background-position: top !important; background-repeat: no-repeat !important; background-size: cover !important; overflow: visible } @media (max-width: 640px) { .brilit-section.\--key-benefits { padding-bottom: 250px } } @media (min-width: 641px) { .brilit-section.\--key-benefits { padding-bottom: 350px } } @media (min-width: 1025px) { .brilit-section.\--key-benefits { padding-bottom: 78px } } .brilit-section.\--key-benefits .img-wrapper { position: absolute; width: 100%; max-width: 1080px; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; overflow: visible; height: auto; right: 0 } .brilit-section.\--key-benefits .img-wrapper.\--mobile {} @media (max-width: 520px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 360px !important; bottom: -350px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (max-width: 640px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 360px !important; bottom: -350px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (min-width: 641px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 450px !important; bottom: -450px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: none } } .brilit-section.\--key-benefits .img-wrapper.\--desktop {} @media (max-width: 640px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: none } } @media (min-width: 641px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: none } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: -webkit-flex; display: -ms-flexbox; display: flex; top: 0; width: 592px; right: -120px } } @media (min-width: 1200px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: -webkit-flex; display: -ms-flexbox; display: flex; top: 0; width: 592px; right: 32px } } .brilit-section.\--key-benefits .img-wrapper .benefits-img { position: relative; z-index: 0; height: auto } .brilit-section.\--key-benefits .brilit-section-title { z-index: 1; position: relative } .brilit-section.\--key-benefits .inner-content { margin: auto } .brilit-section.\--key-benefits .inner-content ul { list-style: none; z-index: 1; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-top: 32px } @media (max-width: 640px) { .brilit-section.\--key-benefits .inner-content ul { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin: auto } } @media (min-width: 641px) { .brilit-section.\--key-benefits .inner-content ul { width: 488px; margin: auto } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .inner-content ul { width: 488px; margin-left: 136px } } .brilit-section.\--key-benefits .inner-content ul li { border-bottom: 1px solid black; font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; line-height: 100% /* 24px */ } @media (max-width: 640px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 18px; padding-bottom: 24px; margin-bottom: 24px } } @media (min-width: 641px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 20px; padding-bottom: 24px; margin-bottom: 24px } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 24px; padding-bottom: 32px; margin-bottom: 32px } } .brilit-section.\--key-benefits .inner-content ul li span { font-size: 16px } .brilit-section.\--key-benefits .inner-content ul li:last-child { border-bottom: none !important } .brilit-section.\--gradient-bottom { background: linear-gradient(180deg, transparent, #ffffff); padding-top: 0; padding-bottom: 0 } .brilit-section .\--image-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; -webkit-column-gap: 32px; column-gap: 32px; margin: auto } @media (max-width: 640px) { .brilit-section .\--image-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding: 0; max-width: 100% } } @media (min-width: 641px) { .brilit-section .\--image-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding: 0; max-width: 100% } } @media (min-width: 1025px) { .brilit-section .\--image-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding: 0; max-width: 1280px } } .brilit-section .tech-grid { display: -ms-grid; display: grid; width: 100%; max-width: 1280px; margin: auto; grid-gap: 48px } @media (max-width: 640px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); padding-top: 28px } } @media (min-width: 641px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding-top: 28px } } @media (min-width: 1025px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding-top: 38px } } .brilit-section .tech-grid .tech-card {} @media (max-width: 640px) { .brilit-section .tech-grid .tech-card { text-align: center; max-width: none; width: 100%; height: auto } } @media (min-width: 641px) { .brilit-section .tech-grid .tech-card { text-align: center; max-width: none; width: 100%; height: auto } } @media (min-width: 1025px) { .brilit-section .tech-grid .tech-card { width: 100%; max-width: 280px } } .brilit-section .tech-grid .tech-card h3 { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 24px; font-style: normal; font-weight: 300; line-height: 100%; /* 24px */ padding-bottom: 16px } .brilit-section .tech-grid .tech-card p { font-family: "Sofia Pro"; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; /* 150% */ letter-spacing: 0.32px; text-align: center } .brilit-section .tech-grid .tech-card img { max-width: 280px; max-height: 280px; width: 100%; height: auto } .brilit-section .\--max-w-1280 {} @media (max-width: 640px) { .brilit-section .\--max-w-1280 { position: relative; max-width: 100%; margin: auto } } @media (min-width: 641px) { .brilit-section .\--max-w-1280 { position: relative; max-width: 100%; margin: auto } } @media (min-width: 1025px) { .brilit-section .\--max-w-1280 { position: relative; max-width: 1280px; margin: auto } } .brilit-section .\--max-w-1280 .title-card-grid.container.\--small { padding-left: 0 !important; padding-right: 0 !important } .brilit-section .title-txt-slider.container.\--slideUp { padding: 0; max-width: 1280px; margin: auto } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .title-txt-btn-img-bg { margin-bottom: 24px; position: relative; background-size: cover !important } .title-txt-btn-img-bg__copy-wrapper { padding: 0 8px } @media (min-width: 641px) { .title-txt-btn-img-bg { margin-bottom: 50px } } .title-txt-btn-img-bg a { padding: 12px 32px } .title-txt-btn-img-bg picture { width: 100%; height: 100%; position: absolute; top: 0; left: 0 } .title-txt-btn-img-bg picture img { object-fit: cover; object-position: center } @media (min-width: 1025px) { .title-txt-btn-img-bg picture img { object-position: center } } .title-txt-btn-img-bg__inner { height: calc(100vh - 60px); padding-top: 12px; padding-bottom: 68px; position: relative; z-index: 1; background-size: cover !important } @media (min-width: 641px) { .title-txt-btn-img-bg__inner { padding-top: 12px; padding-bottom: 12px } } @media (min-width: 1025px) { .title-txt-btn-img-bg__inner { height: calc(100vh - 80px) } } .title-txt-btn-img-bg__inner--video { overflow: hidden } .title-txt-btn-img-bg__inner-content { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100% } .title-txt-btn-img-bg__inner-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105% } @media (min-width: 641px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 48px } } @media (max-width: 640px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 48px } } @media (min-width: 1025px) { .title-txt-btn-img-bg__inner-content h2 { font-size: 64px } } .title-txt-btn-img-bg p { font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; text-align: center; letter-spacing: 0.02em; color: #ffffff } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 90%; margin: 0 auto } } @media (min-width: 641px) { .title-txt-btn-img-bg p { max-width: 95%; margin: 0 auto } } .title-txt-btn-img-bg .btn-outline { margin: 32px 8px 0; color: #ffffff; border-color: #ffffff } .title-txt-btn-img-bg .btn-outline:hover { background-color: #ffffff; color: #171717 } .title-txt-btn-img-bg.\--banner { margin: 0 auto } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { height: auto; padding: 20px 16px } @media (min-width: 641px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { min-height: 515px; padding-top: 62px } } @media (min-width: 1025px) { .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner { padding-top: 90px; min-height: 700px } } .title-txt-btn-img-bg.\--banner .title-txt-btn-img-bg__inner-content { display: -webkit-flex; display: -ms-flexbox; display: flex } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-description { max-width: 1280px } @media (max-width: 640px) { .dim-description { margin: 30px auto } } @media (min-width: 641px) { .dim-description { margin: 90px auto } } @media (min-width: 1025px) { .dim-description { margin: 90px auto } } .dim-description-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; max-width: 800px; margin: auto } .dim-description-header h2 { width: 100%; font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105%; margin-bottom: 24px } @media (max-width: 640px) { .dim-description-header h2 { font-size: 24px } } @media (min-width: 1025px) { .dim-description-header h2 { font-size: 36px } } .dim-description-header p { width: 100%; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-bottom: 50px } .dim-description-columns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; height: auto; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-description-columns__column { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } @media (max-width: 640px) { .dim-description-columns__column { width: 100%; margin: 0 8px; text-align: center } } @media (min-width: 641px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } @media (min-width: 1025px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } .dim-description-columns__column-content { margin: 64px 0 } @media (max-width: 640px) { .dim-description-columns__column-content { margin: 40px 0 } } @media (min-width: 1025px) { .dim-description-columns__column-content { margin: 64px 0 } } .dim-description-columns__column-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105% } .dim-description-columns__column-content p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-top: 16px } .dim-description-columns__column img {} @media (max-width: 640px) { .dim-description-columns__column img { max-width: 100%; max-height: 460px } } @media (min-width: 1025px) { .dim-description-columns__column img { max-width: 500px; max-height: 560px } } .dim-description-columns .\--right {} @media (max-width: 640px) { .dim-description-columns .\--right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media (min-width: 1025px) { .dim-description-columns .\--right { display: block; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-video { height: auto; max-height: none } @media (min-width: 641px) { .dim-video { padding: 56px 0 } } @media (max-width: 640px) { .dim-video { padding: 56px 0 } } @media (min-width: 1025px) { .dim-video { padding: 110px 130px } } .w-big-play-button div { /* remove background on video play button */ background: unset !important; } .ps-video-banner__video { margin-bottom: 40px; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .brilit-section { } .brilit-section__title-wrapper { text-align: center } .brilit-section__title-wrapper h2 { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: "Didot"; font-size: 36px; font-style: italic; font-weight: 400; line-height: 105%; /* 37.8px */ text-transform: capitalize; padding-bottom: 39px } .brilit-section .cta-btn-wrapper { text-align: center } .brilit-section .brilit-faq-image { padding: 0 8px; width: 100%; max-width: 1280px; margin: auto; padding-top: 86px } .brilit-section .title-card-grid { } .brilit-section .title-card-grid.container.\--small { } @media (max-width: 640px) { .brilit-section .title-card-grid.container.\--small { padding: 20px 0 !important } } .brilit-section .title-card-grid__grid { } @media (max-width: 640px) { .brilit-section .title-card-grid__grid { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-gap: 48px } } @media (min-width: 641px) { .brilit-section .title-card-grid__grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); grid-gap: 32px } } @media (min-width: 1025px) { .brilit-section .title-card-grid__grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr) } } .brilit-section .title-card-grid .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center } .brilit-section .title-card-grid .title-card-grid__card-img-wrap { } @media (max-width: 640px) { .brilit-section .title-card-grid .title-card-grid__card-img-wrap { max-height: 240px } } .brilit-section .title-card-grid .title-card-grid__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } .brilit-section .title-card-grid .title-card-grid__card .title-card-grid__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-order: 3; -ms-flex-order: 3; order: 3; font-family: "Didot"; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105%; text-transform: capitalize !important; padding: 8px } .brilit-section .title-card-grid .title-card-grid__card .title-card-grid__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 14px; line-height: 100% } .brilit-section .title-card-grid .title-card-grid__card .title-card-grid__card-read_more { -webkit-order: 4; -ms-flex-order: 4; order: 4; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 14px; line-height: 100% } .brilit-section .title-card-grid .title-card-grid__card .title-card-grid__card-read_more img { width: 18px; height: 12px } .brilit-section .filter-component { overflow: auto; padding-top: 55px; position: fixed; top: 0; height: calc(100vh - 56px); z-index: 99; background-color: #ffffff; display: none } @media (min-width: 641px) { .brilit-section .filter-component { overflow: visible; padding-top: 0; position: static; display: -ms-grid; display: grid; height: auto; padding-right: 16px; padding-left: 8px } } @media (min-width: 1025px) { .brilit-section .filter-component { padding-right: 40px; padding-left: 32px; max-width: 1440px; margin: 0 auto } } .brilit-section .\--active.filter-component__open-list-btn { display: none } @media (min-width: 641px) { .brilit-section .\--active.filter-component__open-list-btn { display: block } } .brilit-section .\--close.filter-component__close-list-btn { } @media (max-width: 640px) { .brilit-section .\--close.filter-component__close-list-btn { display: none !important } } .brilit-section .filter-component__filter-wrap { border-top-color: transparent } @media (min-width: 641px) { .brilit-section .filter-component__filter-wrap { border-top-color: #777777 } } .brilit-section .filter-component__inner { padding-left: 8px; padding-right: 8px } .brilit-section .filter-component__result-container { } @media (max-width: 640px) { .brilit-section .filter-component__result-container { display: none; background-color: #ffffff; margin-top: 32px; min-height: 100vh } } @media (min-width: 641px) { .brilit-section .filter-component__result-container { padding-top: 48px } } @media (min-width: 1025px) { .brilit-section .filter-component__result-container { padding-top: 56px } } .brilit-section .filter-component__result-container .title-card-grid__card { display: block } @media (min-width: 1025px) { .brilit-section .filter-component__result-container .title-card-grid__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } .brilit-section .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 48px } @media (min-width: 1025px) { .brilit-section .filter-component__result-container .title-card-grid__card:not(:last-of-type) { margin-bottom: 0 } } .brilit-section .card-slider .card-slider__card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .brilit-section .card-slider .card-slider__card picture { } @media (min-width: 1025px) { .brilit-section .card-slider .card-slider__card picture { -webkit-order: 1; -ms-flex-order: 1; order: 1 } } .brilit-section .card-slider .card-slider__card .card-slider__card-title { -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1 } @media (min-width: 1025px) { .brilit-section .card-slider .card-slider__card .card-slider__card-title { -webkit-order: 3; -ms-flex-order: 3; order: 3 } } .brilit-section .card-slider .card-slider__card .card-slider__card-date { } @media (min-width: 1025px) { .brilit-section .card-slider .card-slider__card .card-slider__card-date { -webkit-order: 2; -ms-flex-order: 2; order: 2 } } .brilit-section .filter-component + .title-card-grid { padding-top: 10px } @media (min-width: 641px) { .brilit-section .filter-component + .title-card-grid { padding-top: 49px } } @media (min-width: 1025px) { .brilit-section .filter-component + .title-card-grid { padding-top: 65px } } .brilit-section__mobile-btn { font-family: "Sofia Pro"; /* display: block; it has been replaced by the mobile-btn-icon */ display: none; background: #ffffff; position: fixed; bottom: 72px; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 152px; height: 43px; line-height: 40px; text-align: center; border: 1px solid #171717; z-index: 99 } @media (min-width: 641px) { .brilit-section__mobile-btn { display: none } } .brilit-section__mobile-btn.\--apply { display: none; width: 152px; height: 43px } .brilit-section__mobile-btn-close { display: none; position: fixed; top: 11px; right: 15px; width: 24px; height: 24px; background-image: url(/img/close.svg); background-size: cover; z-index: 100; background-color: transparent; border-color: transparent } .brilit-section__mobile-btn-icon { display: none } @media (max-width: 640px) { .brilit-section__mobile-btn-icon { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; cursor: pointer; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); position: fixed; z-index: 100; left: auto; right: 10px; top: calc(50% + 30px); background: #ffffff; border: 1px solid #f3f2f4; border-radius: 40px; box-sizing: border-box; box-shadow: 0 4px 4px rgba(0, 0, 0, .1) } .brilit-section__mobile-btn-icon .filter-icon { width: 16px; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex } .brilit-section__mobile-btn-icon .filter-icon.filter-filled { position: relative } .brilit-section__mobile-btn-icon .filter-icon.filter-filled::after { content: ''; width: 4px; height: 4px; border-radius: 4px; background-color: #eb5757; position: absolute; top: -4px; right: -4px } .brilit-section__mobile-btn-icon .filter-icon.hide { display: none } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-heading { background-repeat: no-repeat; background-size: cover; background-position: center; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0 } .dim-heading__wrapper { max-width: 800px; text-align: center; margin: auto } .dim-heading__wrapper h2 { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading__wrapper h3 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 36px; line-height: 105%; margin-bottom: 24px; margin-top: 16px } .dim-heading__wrapper p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading-flex { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-products-list__products { max-width: 100%; width: -webkit-fill-available } @media (max-width: 640px) { .dim-products-list__products { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 641px) { .dim-products-list__products { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } @media (min-width: 1025px) { .dim-products-list__products { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr) } } .dim-products-list__products-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: auto; margin-bottom: 100px; max-width: 1440px } .\--light-text { font-weight: 300; } .\--desktop { display: block } .\--mobile { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .education { padding: 0; width: 100% } @media (min-width: 1025px) { .education { margin-bottom: 88px } } .education-title { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1360px; margin: 0 32px 32px } @media (max-width: 640px) { .education-title { padding: 0; margin: 0 16px } } @media (min-width: 641px) { .education-title { padding: 0; margin: 0 16px } } @media (min-width: 1025px) { .education-title { margin: 0 32px } } @media (min-width: 1440px) { .education-title { margin: 0 auto 32px } } .education-title h2 { font-family: "Sofia Pro"; font-size: 32px; line-height: 100%; font-style: normal; font-weight: 300; text-transform: uppercase; color: #171717 } @media (min-width: 641px) { .education-title h2 { font-size: 3.6rem; line-height: 110% } } @media (max-width: 640px) { .education-title h2 { padding: 0 } } .education-text { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #000000; max-width: 1360px; margin: 0 32px 32px; margin-bottom: 80px } @media (min-width: 641px) { .education-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1025px) { .education-text { margin: 0 32px; margin-bottom: 80px } } @media (max-width: 640px) { .education-text { padding: 0; margin: 0 16px; margin-bottom: 32px } } @media (min-width: 1440px) { .education-text { margin: 0 auto 32px; margin-bottom: 80px } } .education-wrap { width: 100%; position: relative; overflow: hidden; margin: 0 !important; padding-bottom: 50px; margin-bottom: 30px; outline: none } @media (min-width: 641px) { .education-wrap { -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; margin-bottom: 47px } } @media (min-width: 1025px) { .education-wrap { margin-bottom: 40px } } @media (max-width: 640px) { .education-wrap { margin: 0 !important } } .education-wrap .buttons-a.btn-outline.\--gray { width: 152px; margin: 16px auto 0; font-size: 22.4px; font-size: 1.4rem } @media (min-width: 641px) { .education-wrap .buttons-a.btn-outline.\--gray { display: none } } .education-wrap .flickity-viewport { overflow: visible; position: relative; height: 100% } .education-wrap .flickity-slider { position: absolute; width: 100%; height: 100% } .education-wrap .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; margin-bottom: 25px; list-style: none; text-align: center; line-height: 1; display: none } @media (max-width: 640px) { .education-wrap .flickity-page-dots { display: block } } .education-wrap .flickity-rtl .flickity-page-dots { direction: rtl } .education-wrap .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 4px; background: #ffffff; border-radius: 50%; cursor: pointer; border: 1px solid #171717 } .education-wrap .flickity-page-dots .dot.is-selected { background: #171717 } .education-wrap .button-container-right { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); right: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .education-wrap .button-container-right:hover { opacity: 1 } @media (max-width: 640px) { .education-wrap .button-container-right { display: none } } .education-wrap .button-container-left { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 90%); left: 0; height: 100%; width: 200px; position: absolute; top: 0; opacity: 0; transition: all ease-in-out 200ms } .education-wrap .button-container-left:hover { opacity: 1 } @media (max-width: 640px) { .education-wrap .button-container-left { display: none } } .education-wrap .flickity-button { position: absolute; height: 66px; width: 66px; top: 16%; border-radius: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: none; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25) } @media (max-width: 640px) { .education-wrap .flickity-button { box-shadow: none; right: 35px; bottom: 0; top: auto } } @media (max-width: 1024px) { .education-wrap .flickity-button { top: 16% } } @media (min-width: 1025px) { .education-wrap .flickity-button { top: 20% } } @media (min-width: 1440px) { .education-wrap .flickity-button { top: 28% } } .education-wrap .flickity-button .flickity-button-icon { width: 18px; height: 18px; position: relative } .education-wrap .flickity-button.next { right: 35px } .education-wrap .flickity-button.previous { left: 35px } .education .flickity-button[disabled] { display: none } .education-card { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 32px; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 40%; padding: 0 2%; padding-top: 2px; height: -webkit-max-content !important; height: -moz-max-content !important; height: max-content !important } @media (max-width: 1024px) { .education-card { width: 42%; padding: 2px 3% 0 } } @media (max-width: 640px) { .education-card { width: 80%; padding: 2px 6% 0; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } } .education-card .live-workshops__watermark-wrap { width: 100%; height: auto } .education-card h3 { margin-top: 8px; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 38.4px; font-size: 2.4rem; line-height: 110%; text-transform: uppercase; margin-bottom: 16px; color: #171717 } .education-card-img { margin-bottom: 8px; position: relative } .education-card-stub { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .9) } .education-card-stub-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 148px } .education-card-stub-wrap img { width: 32px; height: 42px; margin: 0 auto 28px } .education-card-stub-wrap p { font-style: normal; text-align: center; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px } .education-card-text { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .education-card-text span { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 24px; letter-spacing: 0.02em; color: #171717 } .education-card-text span:first-child { margin-right: 16px } .education__card-icon { display: block; width: 14px; height: 18px; cursor: pointer } .education__card-icon img { display: block; width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 0; margin: 0 } .education .\--saved.education__card-icon { display: none } .education .\--saved .\--saved.education__card-icon { display: block } .education .\--saved .\--not-saved.education__card-icon { display: none } .education .live-workshops__watermark-block-off { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; padding: 26px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: rgba(255, 255, 255, .7); opacity: 1; transition: all 0.3s ease; cursor: default; z-index: 2; display: none } .education .live-workshops__watermark-block-off .live-workshops__watermark-block-off-lock { width: 42px; height: 42px; margin-bottom: 28px; background-size: contain; background-image: url(/img/lock.svg) } .education .live-workshops__watermark-block-off p { font-family: "Sofia Pro"; font-style: normal; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; line-height: 150%; letter-spacing: 0.02em; color: #595a5e; text-align: center; text-transform: none; max-width: 152px } .education .live-workshops__watermark-block-off a { color: #595a5e; cursor: pointer; text-decoration: underline } .education.\--looks-login-lock { } .education.\--looks-login-lock .wistia_responsive_wrapper span div div div { display: none !important } .education.\--looks-login-lock .live-workshops__watermark-block-off { display: -webkit-flex; display: -ms-flexbox; display: flex } @media (min-width: 1025px) { .education.\--looks-login-lock .live-workshops__watermark-block-off { opacity: 0; transition: opacity 0.3s ease } .education.\--looks-login-lock .live-workshops__watermark-block-off:hover { opacity: 1 } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-heading { background-repeat: no-repeat; background-size: cover; background-position: center; height: auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0 } .dim-heading__wrapper { max-width: 800px; text-align: center; margin: auto } .dim-heading__wrapper h2 { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading__wrapper h3 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 36px; line-height: 105%; margin-bottom: 24px; margin-top: 16px } .dim-heading__wrapper p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px } .dim-heading-flex { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-products-list__products { max-width: 100%; width: -webkit-fill-available } @media (max-width: 640px) { .dim-products-list__products { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr) } } @media (min-width: 641px) { .dim-products-list__products { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr) } } @media (min-width: 1025px) { .dim-products-list__products { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr) } } .dim-products-list__products-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: auto; margin-bottom: 100px; max-width: 1440px } .\--light-text { font-weight: 300; } .\--desktop { display: block } .\--mobile { display: none } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .brilit { margin: auto; max-width: 100% } .brilit-wrapper { background: #a8b3e4; overflow: hidden } .brilit-wrapper .mob-nav { position: absolute; top: 0; left: 0; right: 0; width: 100% } .brilit-banner-section { height: 0; background-position: center !important; background-repeat: no-repeat !important; position: relative; background-size: cover !important } @media (max-width: 640px) { .brilit-banner-section { padding-top: 150% } } @media (min-width: 641px) { .brilit-banner-section { padding-top: 60% } } @media (min-width: 1025px) { .brilit-banner-section { padding-top: 50% } } .brilit-banner-section__logo { position: absolute; height: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } @media (max-width: 640px) { .brilit-banner-section__logo { width: 150px; top: 80px } } @media (min-width: 641px) { .brilit-banner-section__logo { width: 200px; top: 80px } } @media (min-width: 1025px) { .brilit-banner-section__logo { width: 240px; top: 101px } } .brilit-banner-section__alt-background { position: absolute } .brilit-section { position: relative; z-index: 1 } @media (max-width: 640px) { .brilit-section { padding: 42px 16px } } @media (min-width: 641px) { .brilit-section { padding: 42px 8px } } @media (min-width: 1025px) { .brilit-section { padding: 64px 32px } } .brilit-section-title { color: #000000; text-align: center; max-width: 800px; width: 100%; margin: auto } .brilit-section-title.main { max-width: 1024px } .brilit-section-title h1 { font-feature-settings: 'clig' off, 'liga' off; font-family: "Didot"; font-style: italic; font-weight: 400; line-height: 105%; text-transform: uppercase; text-align: center } @media (max-width: 640px) { .brilit-section-title h1 { font-size: 32px; padding-bottom: 24px } } @media (min-width: 641px) { .brilit-section-title h1 { font-size: 48px; padding-bottom: 24px } } @media (min-width: 1025px) { .brilit-section-title h1 { font-size: 64px; padding-bottom: 56px } } .brilit-section-title h1 sup { top: -0.75em; font-size: 50% } .brilit-section-title h2 { font-feature-settings: 'clig' off, 'liga' off; font-family: "Didot"; color: #000000; font-style: italic; font-weight: 400; line-height: 105%; text-transform: capitalize; text-align: center } @media (max-width: 640px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 24px } } @media (min-width: 641px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 24px } } @media (min-width: 1025px) { .brilit-section-title h2 { padding-bottom: 24px; font-size: 36px } } .brilit-section-title h2.title-440 { width: 440px; margin: auto } @media (max-width: 640px) { .brilit-section-title h2.title-440 { max-width: 100% } } @media (min-width: 641px) { .brilit-section-title h2.title-440 { max-width: 100% } } .brilit-section-title_header { font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; letter-spacing: 1.76px; text-transform: uppercase; padding-bottom: 16px; text-align: center } .brilit-section-title_text { font-family: "Sofia Pro"; font-size: 16px !important; font-style: normal; font-weight: 300; line-height: 24px !important; letter-spacing: 0.32px; margin: auto; text-align: center } @media (max-width: 640px) { .brilit-section-title_text { padding-bottom: 16px } } @media (min-width: 641px) { .brilit-section-title_text { padding-bottom: 16px } } @media (min-width: 1025px) { .brilit-section-title_text { padding-bottom: 20px } } .brilit-section-title_text p { font-size: 16px !important; line-height: 24px !important } .brilit-section-title_text.small { font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 12px; font-style: normal; font-weight: 300; line-height: 100%; padding: 8px 0; background-color: #ffffff } .brilit-section-title_text.w800 { max-width: 800px } .brilit-section-title_text.w650 { max-width: 650px } .brilit-section-title_text.is-top-24 {} @media (max-width: 640px) { .brilit-section-title_text.is-top-24 { padding-top: 0 } } @media (min-width: 641px) { .brilit-section-title_text.is-top-24 { padding-top: 24px } } @media (min-width: 1025px) { .brilit-section-title_text.is-top-24 { padding-top: 32px } } .brilit-section-2-img-grid { display: -ms-grid; display: grid; max-width: 1280px; margin: auto } @media (max-width: 640px) { .brilit-section-2-img-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; margin: 0 -16px } } @media (min-width: 641px) { .brilit-section-2-img-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; margin: auto } } @media (min-width: 1025px) { .brilit-section-2-img-grid { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); margin: auto } } .brilit-section__video-wrap { display: -ms-grid; display: grid } @media (min-width: 641px) { .brilit-section__video-wrap { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); grid-gap: 16px; padding-top: 18px } } @media (min-width: 1025px) { .brilit-section__video-wrap { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); grid-gap: 32px; padding-top: 18px } } .brilit-section__video-wrap .styling-card { width: 100%; position: relative } .brilit-section .brilit-faq-image { padding-bottom: 34px } .brilit-section .brilit-extra-body { padding-bottom: 24px; color: #000000; text-align: center; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; letter-spacing: 0.32px } .brilit-section.\--header-section {} @media (max-width: 640px) { .brilit-section.\--header-section { padding-top: 46px; padding-bottom: 54px } } @media (min-width: 641px) { .brilit-section.\--header-section { padding-top: 56px; padding-bottom: 64px } } @media (min-width: 1025px) { .brilit-section.\--header-section { padding-top: 88px; padding-bottom: 100px } } .brilit-section.\--video { width: 100%; margin: auto } @media (max-width: 640px) { .brilit-section.\--video { padding: 32px 0 } } @media (min-width: 641px) { .brilit-section.\--video { padding: 32px 0 } } @media (min-width: 1025px) { .brilit-section.\--video { padding: 64px 130px } } .brilit-section.img-section { display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 } .brilit-section.white-section { background: #ffffff } .brilit-section.\--key-benefits { position: relative; background-position: top !important; background-repeat: no-repeat !important; background-size: cover !important; overflow: visible } @media (max-width: 640px) { .brilit-section.\--key-benefits { padding-bottom: 250px } } @media (min-width: 641px) { .brilit-section.\--key-benefits { padding-bottom: 350px } } @media (min-width: 1025px) { .brilit-section.\--key-benefits { padding-bottom: 78px } } .brilit-section.\--key-benefits .img-wrapper { position: absolute; width: 100%; max-width: 1080px; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; overflow: visible; height: auto; right: 0 } .brilit-section.\--key-benefits .img-wrapper.\--mobile {} @media (max-width: 520px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 360px !important; bottom: -350px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (max-width: 640px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 360px !important; bottom: -350px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (min-width: 641px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 450px !important; bottom: -450px !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; transform: translateX(-50%) !important } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .img-wrapper.\--mobile { display: none } } .brilit-section.\--key-benefits .img-wrapper.\--desktop {} @media (max-width: 640px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: none } } @media (min-width: 641px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: none } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: -webkit-flex; display: -ms-flexbox; display: flex; top: 0; width: 592px; right: -120px } } @media (min-width: 1200px) { .brilit-section.\--key-benefits .img-wrapper.\--desktop { display: -webkit-flex; display: -ms-flexbox; display: flex; top: 0; width: 592px; right: 32px } } .brilit-section.\--key-benefits .img-wrapper .benefits-img { position: relative; z-index: 0; height: auto } .brilit-section.\--key-benefits .brilit-section-title { z-index: 1; position: relative } .brilit-section.\--key-benefits .inner-content { width: 100%; margin: auto } .brilit-section.\--key-benefits .inner-content ul { list-style: none; z-index: 1; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-top: 32px } @media (max-width: 640px) { .brilit-section.\--key-benefits .inner-content ul { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin: auto } } @media (min-width: 641px) { .brilit-section.\--key-benefits .inner-content ul { width: 488px; margin: auto } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .inner-content ul { width: 488px; margin-left: 136px } } .brilit-section.\--key-benefits .inner-content ul li { border-bottom: 1px solid black; font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-style: normal; font-weight: 300; line-height: 100% /* 24px */ } @media (max-width: 640px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 18px; padding-bottom: 24px; margin-bottom: 24px } } @media (min-width: 641px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 20px; padding-bottom: 24px; margin-bottom: 24px } } @media (min-width: 1025px) { .brilit-section.\--key-benefits .inner-content ul li { font-size: 24px; padding-bottom: 32px; margin-bottom: 32px } } .brilit-section.\--key-benefits .inner-content ul li span { font-size: 16px } .brilit-section.\--key-benefits .inner-content ul li:last-child { border-bottom: none !important } .brilit-section.\--gradient { background: linear-gradient(180deg, transparent, #ffffff) !important; padding: 0 } .brilit-section.\--image-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; background: linear-gradient(180deg, transparent, #ffffff); -webkit-column-gap: 32px; column-gap: 32px } @media (max-width: 640px) { .brilit-section.\--image-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding: 0 } } @media (min-width: 641px) { .brilit-section.\--image-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding: 0 } } @media (min-width: 1025px) { .brilit-section.\--image-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding: 0 32px } } .brilit-section .tech-grid { display: -ms-grid; display: grid; width: 100%; max-width: 1280px; margin: auto; grid-gap: 48px } @media (max-width: 640px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); padding-top: 28px } } @media (min-width: 641px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding-top: 28px } } @media (min-width: 1025px) { .brilit-section .tech-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding-top: 38px } } .brilit-section .tech-grid .tech-card {} @media (max-width: 640px) { .brilit-section .tech-grid .tech-card { text-align: center; max-width: none; width: 100%; height: auto } } @media (min-width: 641px) { .brilit-section .tech-grid .tech-card { text-align: center; max-width: none; width: 100%; height: auto } } @media (min-width: 1025px) { .brilit-section .tech-grid .tech-card { width: 100%; max-width: 280px } } .brilit-section .tech-grid .tech-card h3 { text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-family: "Sofia Pro"; font-size: 24px; font-style: normal; font-weight: 300; line-height: 100%; /* 24px */ padding-bottom: 16px } .brilit-section .tech-grid .tech-card p { font-family: "Sofia Pro"; font-size: 16px; font-style: normal; font-weight: 300; line-height: 24px; /* 150% */ letter-spacing: 0.32px; text-align: center } .brilit-section .tech-grid .tech-card img { max-width: 280px; max-height: 280px; width: 100%; height: auto } .brilit-section .brilit-video { width: 100%; margin: auto } @media (max-width: 640px) { .brilit-section .brilit-video { padding: 32px 0 } } @media (min-width: 641px) { .brilit-section .brilit-video { padding: 32px 0 } } @media (min-width: 1025px) { .brilit-section .brilit-video { padding: 110px 130px } } .brilit-section .brilit-section-formula { width: 100%; max-width: 1280px; margin: auto } .brilit-section .brilit-flex-container { display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 32px; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; font-feature-settings: 'clig' off, 'liga' off } @media (max-width: 640px) { .brilit-section .brilit-flex-container { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } } @media (min-width: 641px) { .brilit-section .brilit-flex-container { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } } @media (min-width: 1025px) { .brilit-section .brilit-flex-container { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } } .brilit-section .brilit-flex-container .formula-cards { width: 100% } .brilit-section .brilit-flex-container .formula-cards h3 { font-family: "Sofia Pro"; font-size: 24px; font-style: normal; font-weight: 300; line-height: 100% } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-description { max-width: 1280px } @media (max-width: 640px) { .dim-description { margin: 30px auto } } @media (min-width: 641px) { .dim-description { margin: 90px auto } } @media (min-width: 1025px) { .dim-description { margin: 90px auto } } .dim-description-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; max-width: 800px; margin: auto } .dim-description-header h2 { width: 100%; font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105%; margin-bottom: 24px } @media (max-width: 640px) { .dim-description-header h2 { font-size: 24px } } @media (min-width: 1025px) { .dim-description-header h2 { font-size: 36px } } .dim-description-header p { width: 100%; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-bottom: 50px } .dim-description-columns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; height: auto; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-description-columns__column { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } @media (max-width: 640px) { .dim-description-columns__column { width: 100%; margin: 0 8px; text-align: center } } @media (min-width: 641px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } @media (min-width: 1025px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } .dim-description-columns__column-content { margin: 64px 0 } @media (max-width: 640px) { .dim-description-columns__column-content { margin: 40px 0 } } @media (min-width: 1025px) { .dim-description-columns__column-content { margin: 64px 0 } } .dim-description-columns__column-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105% } .dim-description-columns__column-content p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-top: 16px } .dim-description-columns__column img {} @media (max-width: 640px) { .dim-description-columns__column img { max-width: 100%; max-height: 460px } } @media (min-width: 1025px) { .dim-description-columns__column img { max-width: 500px; max-height: 560px } } .dim-description-columns .\--right {} @media (max-width: 640px) { .dim-description-columns .\--right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media (min-width: 1025px) { .dim-description-columns .\--right { display: block; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-video { height: auto; max-height: none } @media (min-width: 641px) { .dim-video { padding: 56px 0 } } @media (max-width: 640px) { .dim-video { padding: 56px 0 } } @media (min-width: 1025px) { .dim-video { padding: 110px 130px } } .w-big-play-button div { /* remove background on video play button */ background: unset !important; } .ps-video-banner__video { margin-bottom: 40px; } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .dim-description { max-width: 1280px } @media (max-width: 640px) { .dim-description { margin: 30px auto } } @media (min-width: 641px) { .dim-description { margin: 90px auto } } @media (min-width: 1025px) { .dim-description { margin: 90px auto } } .dim-description-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: auto; max-width: 800px; margin: auto } .dim-description-header h2 { width: 100%; font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; line-height: 105%; margin-bottom: 24px } @media (max-width: 640px) { .dim-description-header h2 { font-size: 24px } } @media (min-width: 1025px) { .dim-description-header h2 { font-size: 36px } } .dim-description-header p { width: 100%; font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-bottom: 50px } .dim-description-columns { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; height: auto; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .dim-description-columns__column { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content } @media (max-width: 640px) { .dim-description-columns__column { width: 100%; margin: 0 8px; text-align: center } } @media (min-width: 641px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } @media (min-width: 1025px) { .dim-description-columns__column { width: 45%; font-size: 24px; text-align: left; margin: 0 16px } } .dim-description-columns__column-content { margin: 64px 0 } @media (max-width: 640px) { .dim-description-columns__column-content { margin: 40px 0 } } @media (min-width: 1025px) { .dim-description-columns__column-content { margin: 64px 0 } } .dim-description-columns__column-content h2 { font-family: 'Didot', sans-serif; font-style: italic; font-weight: 400; font-size: 24px; line-height: 105% } .dim-description-columns__column-content p { font-family: 'Sofia Pro', sans-serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 24px; margin-top: 16px } .dim-description-columns__column img {} @media (max-width: 640px) { .dim-description-columns__column img { max-width: 100%; max-height: 460px } } @media (min-width: 1025px) { .dim-description-columns__column img { max-width: 500px; max-height: 560px } } .dim-description-columns .\--right {} @media (max-width: 640px) { .dim-description-columns .\--right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse } } @media (min-width: 1025px) { .dim-description-columns .\--right { display: block; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } :root { /** * Application Theme Colors */ /** * Alert Colors */ /** * Shades */ /** * Base var colors */ /** * Gradient */ } /* ******************************* * ** if you have tablet design ** ******************************* */ /* Phone (mobile first so no @phone rule) */ /* Tablet */ /* Desktop */ /* Television */ /* Aspect Ratios */ /* ******************************* if you don't have tablet design ******************************* */ /* @custom-media --desktop (width > 768px); @custom-media --phone (width <= 768px); */ /* Television */ /* @custom-media --desktopXL (width >= 1440px); @custom-media --notDesktopXL (width < 1440px); */ /* Aspect Ratios */ /* @custom-media --minAspect (min-aspect-ratio: 16/9); @custom-media --maxAspect (max-aspect-ratio: 16/9); */ /** * These Styles come directly from InVision and are named after those styles * So please think twice before editing these. */ :root { /** * FONT FAMILIES */ /* new fonts */ /** * FONT FAMILY MIXINS */ /** * Anchor Mixin */ /** * HEADING TYPOGRAPHY STYLES */ /** * BODY STYLES */ /** * ADDITIONAL STYLES */ } .klaviyo-form button.kl-private-reset-css-Xuajs1{ width: 140px } .klaviyo-form input[type="email"] { border: none !important; border-bottom: 1px solid #2e1a47 !important; font-family: "Sofia Pro" !important; width: 100%; background: transparent !important; padding: 0 99px 0 0; font-weight: 300; font-size: 25.6px; font-size: 1.6rem; min-height: 150%; letter-spacing: 0.02em; } .klaviyo-form input[type="checkbox"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: #ffffff; margin: 0; color: inherit; width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; border: 1px solid currentColor !important; display: block; position: relative; cursor: pointer; margin-right: 11px; } .quiz-type__card.--canvas { display: none; } @media (max-width: 475px) { .footer__bottom-txt{ flex-direction: column-reverse; gap: 14px; } }