/* #region "./wp-content/themes/class/resources/styles/theme.scss" */ /* - type: css/auto */ @charset "UTF-8"; :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; margin-bottom: 0.4em; } :root { --heading-one-font-size: 4.2rem; --heading-one-line-height: 4.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-one-font-size: 5rem; --heading-one-line-height: 5.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } } :root { --heading-one-font: var(--heading-one-font-style) var(--heading-one-font-weight) var(--heading-one-font-size) / var(--heading-one-line-height) var(--heading-font-family); } :root { --heading-two-font-size: 3.2rem; --heading-two-line-height: 3.4rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-two-font-size: 4.2rem; --heading-two-line-height: 4.5rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } } :root { --heading-two-font: var(--heading-two-font-style) var(--heading-two-font-weight) var(--heading-two-font-size)/var(--heading-two-line-height) var(--heading-font-family); } :root { --heading-three-font-size: 2.8rem; --heading-three-line-height: 3rem; --heading-three-letter-spacing: 1; --heading-three-font-style: normal; --heading-three-font-weight: bold; --heading-three-text-transform: initial; } :root { --heading-three-font: var(--heading-three-font-style) var(--heading-three-font-weight) var(--heading-three-font-size) / var(--heading-three-line-height) var(--heading-font-family); } :root { --heading-four-font-size: 2rem; --heading-four-line-height: 2.1rem; --heading-four-letter-spacing: 1; --heading-four-font-style: normal; --heading-four-font-weight: bold; --heading-four-text-transform: initial; } :root { --heading-four-font: var(--heading-four-font-style) var(--heading-four-font-weight) var(--heading-four-font-size) / var(--heading-four-line-height) var(--heading-font-family); } :root { --heading-five-font-size: 1.8rem; --heading-five-line-height: 2.5rem; --heading-five-letter-spacing: 1; --heading-five-font-style: normal; --heading-five-font-weight: bold; --heading-five-text-transform: normal; } :root { --heading-five-font: var(--heading-five-font-style) var(--heading-five-font-weight) var(--heading-five-font-size) / var(--heading-five-line-height) var(--heading-font-family); } :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } @media screen and (min-width: 768px) { :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } } :root { --heading-six-font: var(--heading-six-font-style) var(--heading-six-font-weight) var(--heading-six-font-size) / var(--heading-six-line-height) var(--font-family); } :root { --paragraph-font-size: 1.8rem; --paragraph-line-height: 2.5rem; --paragraph-letter-spacing: 1; --paragraph-font-style: normal; --paragraph-font-weight: normal; --paragraph-text-transform: normal; } :root { --paragraph-font: var(--paragraph-font-style) var(--paragraph-font-weight) var(--paragraph-font-size) / var(--paragraph-line-height) var(--font-family); } :root { --small-paragraph-font-size: 1.4rem; --small-paragraph-line-height: 1.5rem; --small-paragraph-letter-spacing: 0.003rem; --small-paragraph-font-style: normal; --small-paragraph-font-weight: bold; --small-paragraph-text-transform: normal; } :root { --small-paragraph-font: var(--small-paragraph-font-style) var(--small-paragraph-font-weight) var(--small-paragraph-font-size) / var(--small-paragraph-line-height) var(--heading-font-family); } :root { --x-small-paragraph-font-size: 1.4rem; --x-small-paragraph-line-height: 1.7rem; --x-small-paragraph-letter-spacing: 0; --x-small-paragraph-font-style: normal; --x-small-paragraph-font-weight: normal; --x-small-paragraph-text-transform: normal; } :root { --x-small-paragraph-font: var(--x-small-paragraph-font-style) var(--x-small-paragraph-font-weight) var(--x-small-paragraph-font-size) / var(--x-small-paragraph-line-height) var(--font-family); } :root { --reflex-columns: 12; --reflex-grid-spacing: 15px; --reflex-xs: 576px; --reflex-sm: 768px; --reflex-md: 992px; --reflex-lg: 1200px; --reflex-xlg: 1600px; --reflex-xxs-max: 575px; --reflex-xs-max: 767px; --reflex-sm-max: 991px; --reflex-md-max: 1199px; --reflex-lg-max: 1599px; } .container, .container-full { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; } .container .grid, .container-full .grid { margin-right: -15px; margin-left: -15px; } @media (min-width: 576px) { .container { max-width: 576px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 992px) { .container { max-width: 992px; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } @media (min-width: 1600px) { .container { max-width: 1600px; } } .grid { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; margin: 0 auto; position: relative; letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; list-style-type: none; } .grid::before, .grid::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing: normal; word-spacing: normal; white-space: normal; } [class*=col-] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing: normal; word-spacing: normal; white-space: normal; position: relative; width: 100%; vertical-align: top; padding: 15px; display: inline-block; *display: inline; zoom: 1; } [class*=col-]::before, [class*=col-]::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing: normal; word-spacing: normal; white-space: normal; } [class*=col-] .grid { -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; margin: -15px; } .col-12 { width: 100%; *width: 99.9%; } .col-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-9 { width: 75%; *width: 74.9%; } .col-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-6 { width: 50%; *width: 49.9%; } .col-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-3 { width: 25%; *width: 24.9%; } .col-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-1 { width: 8.3333333333%; *width: 8.2333333333%; } @media (min-width: 576px) { .col-xs-12 { width: 100%; *width: 99.9%; } .col-xs-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-xs-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-xs-9 { width: 75%; *width: 74.9%; } .col-xs-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-xs-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-xs-6 { width: 50%; *width: 49.9%; } .col-xs-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-xs-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-xs-3 { width: 25%; *width: 24.9%; } .col-xs-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-xs-1 { width: 8.3333333333%; *width: 8.2333333333%; } } @media (min-width: 768px) { .col-sm-12 { width: 100%; *width: 99.9%; } .col-sm-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-sm-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-sm-9 { width: 75%; *width: 74.9%; } .col-sm-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-sm-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-sm-6 { width: 50%; *width: 49.9%; } .col-sm-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-sm-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-sm-3 { width: 25%; *width: 24.9%; } .col-sm-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-sm-1 { width: 8.3333333333%; *width: 8.2333333333%; } } @media (min-width: 992px) { .col-md-12 { width: 100%; *width: 99.9%; } .col-md-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-md-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-md-9 { width: 75%; *width: 74.9%; } .col-md-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-md-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-md-6 { width: 50%; *width: 49.9%; } .col-md-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-md-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-md-3 { width: 25%; *width: 24.9%; } .col-md-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-md-1 { width: 8.3333333333%; *width: 8.2333333333%; } } @media (min-width: 1200px) { .col-lg-12 { width: 100%; *width: 99.9%; } .col-lg-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-lg-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-lg-9 { width: 75%; *width: 74.9%; } .col-lg-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-lg-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-lg-6 { width: 50%; *width: 49.9%; } .col-lg-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-lg-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-lg-3 { width: 25%; *width: 24.9%; } .col-lg-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-lg-1 { width: 8.3333333333%; *width: 8.2333333333%; } } @media (min-width: 1600px) { .col-xlg-12 { width: 100%; *width: 99.9%; } .col-xlg-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-xlg-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-xlg-9 { width: 75%; *width: 74.9%; } .col-xlg-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-xlg-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-xlg-6 { width: 50%; *width: 49.9%; } .col-xlg-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-xlg-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-xlg-3 { width: 25%; *width: 24.9%; } .col-xlg-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-xlg-1 { width: 8.3333333333%; *width: 8.2333333333%; } } .col-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } @media (min-width: 576px) { .col-xs-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } } @media (min-width: 768px) { .col-sm-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } } @media (min-width: 992px) { .col-md-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } } @media (min-width: 1200px) { .col-lg-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } } @media (min-width: 1600px) { .col-xlg-auto { -ms-flex: 1 0 0px; -webkit-flex: 1 0 0px; flex: 1 0 0px; width: auto; } } .order-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } @media (min-width: 576px) { .order-xs-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-xs-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-xs-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-xs-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-xs-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-xs-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-xs-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-xs-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-xs-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-xs-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-xs-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-xs-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-xs-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media (min-width: 768px) { .order-sm-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-sm-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-sm-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-sm-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-sm-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-sm-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-sm-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-sm-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-sm-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-sm-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-sm-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-sm-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-sm-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media (min-width: 992px) { .order-md-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-md-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-md-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-md-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-md-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-md-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-md-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-md-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-md-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-md-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-md-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-md-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-md-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media (min-width: 1200px) { .order-lg-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-lg-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-lg-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-lg-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-lg-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-lg-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-lg-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-lg-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-lg-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-lg-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-lg-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-lg-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-lg-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } @media (min-width: 1600px) { .order-xlg-12 { -ms-flex-order: 12; -webkit-order: 12; order: 12; } .order-xlg-11 { -ms-flex-order: 11; -webkit-order: 11; order: 11; } .order-xlg-10 { -ms-flex-order: 10; -webkit-order: 10; order: 10; } .order-xlg-9 { -ms-flex-order: 9; -webkit-order: 9; order: 9; } .order-xlg-8 { -ms-flex-order: 8; -webkit-order: 8; order: 8; } .order-xlg-7 { -ms-flex-order: 7; -webkit-order: 7; order: 7; } .order-xlg-6 { -ms-flex-order: 6; -webkit-order: 6; order: 6; } .order-xlg-5 { -ms-flex-order: 5; -webkit-order: 5; order: 5; } .order-xlg-4 { -ms-flex-order: 4; -webkit-order: 4; order: 4; } .order-xlg-3 { -ms-flex-order: 3; -webkit-order: 3; order: 3; } .order-xlg-2 { -ms-flex-order: 2; -webkit-order: 2; order: 2; } .order-xlg-1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; } .order-xlg-0 { -ms-flex-order: 0; -webkit-order: 0; order: 0; } } .offset-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } @media (min-width: 576px) { .offset-xs-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-xs-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-xs-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-xs-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-xs-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-xs-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-xs-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-xs-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-xs-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-xs-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-xs-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } .offset-xs-0 { margin-left: 0; *margin-left: -0.1%; } } @media (min-width: 768px) { .offset-sm-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-sm-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-sm-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-sm-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-sm-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-sm-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-sm-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-sm-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-sm-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-sm-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-sm-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } .offset-sm-0 { margin-left: 0; *margin-left: -0.1%; } } @media (min-width: 992px) { .offset-md-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-md-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-md-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-md-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-md-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-md-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-md-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-md-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-md-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-md-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-md-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } .offset-md-0 { margin-left: 0; *margin-left: -0.1%; } } @media (min-width: 1200px) { .offset-lg-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-lg-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-lg-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-lg-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-lg-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-lg-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-lg-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-lg-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-lg-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-lg-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-lg-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } .offset-lg-0 { margin-left: 0; *margin-left: -0.1%; } } @media (min-width: 1600px) { .offset-xlg-11 { margin-left: 91.6666666667%; *margin-left: 91.5666666667%; } .offset-xlg-10 { margin-left: 83.3333333333%; *margin-left: 83.2333333333%; } .offset-xlg-9 { margin-left: 75%; *margin-left: 74.9%; } .offset-xlg-8 { margin-left: 66.6666666667%; *margin-left: 66.5666666667%; } .offset-xlg-7 { margin-left: 58.3333333333%; *margin-left: 58.2333333333%; } .offset-xlg-6 { margin-left: 50%; *margin-left: 49.9%; } .offset-xlg-5 { margin-left: 41.6666666667%; *margin-left: 41.5666666667%; } .offset-xlg-4 { margin-left: 33.3333333333%; *margin-left: 33.2333333333%; } .offset-xlg-3 { margin-left: 25%; *margin-left: 24.9%; } .offset-xlg-2 { margin-left: 16.6666666667%; *margin-left: 16.5666666667%; } .offset-xlg-1 { margin-left: 8.3333333333%; *margin-left: 8.2333333333%; } .offset-xlg-0 { margin-left: 0; *margin-left: -0.1%; } } .wrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .no-wrap { -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } .no-wrap [class*=col-] { -ms-flex-negative: 1; -webkit-flex-shrink: 1; flex-shrink: 1; } .wrap-reverse { -ms-flex-wrap: wrap-reverse; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .direction-row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .direction-row-reverse { -ms-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .direction-column { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .direction-column-reverse { -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .align-start { -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .align-end { -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .align-end [class*=col-] { vertical-align: bottom; } .align-center { -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .align-center [class*=col-] { vertical-align: middle; } .align-baseline { -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .align-content-start { -ms-flex-line-pack: start; -webkit-align-content: flex-start; align-content: flex-start; } .align-content-end { -ms-flex-line-pack: end; -webkit-align-content: flex-end; align-content: flex-end; } .align-content-end [class*=col-] { vertical-align: bottom; } .align-content-center { -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } .align-content-space-between { -ms-flex-line-pack: justify; -webkit-align-content: space-between; align-content: space-between; } .align-content-space-around { -ms-flex-line-pack: distribute; -webkit-align-content: space-around; align-content: space-around; } .align-self-stretch { -ms-flex-item-align: stretch; -webkit-align-self: stretch; align-self: stretch; } .align-self-start { -ms-flex-item-align: start; -webkit-align-self: flex-start; align-self: flex-start; } .align-self-end { -ms-flex-item-align: end; -webkit-align-self: flex-end; align-self: flex-end; vertical-align: bottom; } .align-self-center { -ms-flex-item-align: center; -webkit-align-self: center; align-self: center; vertical-align: middle; } .align-self-baseline { -ms-flex-item-align: baseline; -webkit-align-self: baseline; align-self: baseline; vertical-align: baseline; } .justify-start { -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .justify-start.grid { text-align: left; } .justify-end { -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .justify-end.grid { text-align: right; -moz-text-align-last: right; text-align-last: right; } .justify-end.grid [class*=col-] { text-align: left; text-align: start; -moz-text-align-last: left; -moz-text-align-last: start; text-align-last: left; text-align-last: start; } .justify-center { -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .justify-center.grid { text-align: center; -moz-text-align-last: center; text-align-last: center; } .justify-center.grid [class*=col-] { text-align: left; text-align: start; -moz-text-align-last: left; -moz-text-align-last: start; text-align-last: left; text-align-last: start; } .justify-space-between { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .justify-space-between.grid { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } .justify-space-between.grid [class*=col-] { text-align: left; text-align: start; -moz-text-align-last: left; -moz-text-align-last: start; text-align-last: left; text-align-last: start; } .justify-space-around { -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .justify-space-around.grid { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; } .justify-space-around.grid [class*=col-] { text-align: left; text-align: start; -moz-text-align-last: left; -moz-text-align-last: start; text-align-last: left; text-align-last: start; } .grid-bleed [class*=col-] { padding: 0; } .col-grid { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .col-grid.direction-row { -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } .col-bleed { padding: 0; } .col-bleed-x { padding: 15px 0; } .col-bleed-y { padding: 0 15px; } .flex-img { display: block; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto; flex: 0 0 auto; max-width: 100%; height: auto; width: 100%; *width: auto; } .flex-footer { width: 100%; margin-top: auto; margin-bottom: 0; } .flex-footer > :last-child { margin-bottom: 0; } @media (min-width: 0px) and (max-width: 575px) { .hidden-xxs { display: none; } } @media (min-width: 576px) { .hidden-xs-up { display: none; } } @media (max-width: 767px) { .hidden-xs-down { display: none; } } @media (min-width: 576px) and (max-width: 767px) { .hidden-xs { display: none; } } @media (min-width: 768px) { .hidden-sm-up { display: none; } } @media (max-width: 991px) { .hidden-sm-down { display: none; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none; } } @media (min-width: 992px) { .hidden-md-up { display: none; } } @media (max-width: 1199px) { .hidden-md-down { display: none; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none; } } @media (min-width: 1200px) { .hidden-lg-up { display: none; } } @media (max-width: 1599px) { .hidden-lg-down { display: none; } } @media (min-width: 1200px) and (max-width: 1599px) { .hidden-lg { display: none; } } @media (min-width: 1600px) { .hidden-xlg { display: none; } } /** * Swiper 11.2.6 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 19, 2025 */ @font-face { font-family: "swiper-icons"; src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA) format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } /* * Ninja Forms - Form Display Structure */ .ninja-forms-form-wrap *, .ninja-forms-form-wrap *:after, .ninja-forms-form-wrap *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .nf-response-msg { display: none; } .nf-field-container, #ninja_forms_required_items { clear: both; position: relative; margin-bottom: 25px; } .nf-field-container::after, #ninja_forms_required_items::after { clear: both; content: ""; display: block; } .nf-field-container.hidden-container, .nf-field-container.hr-container, #ninja_forms_required_items.hidden-container, #ninja_forms_required_items.hr-container { margin: 0; height: auto; } .nf-field-container.hidden-container .nf-field-label, .nf-field-container.hr-container .nf-field-label, #ninja_forms_required_items.hidden-container .nf-field-label, #ninja_forms_required_items.hr-container .nf-field-label { display: none; } .nf-field-container.html-container .nf-field-label, #ninja_forms_required_items.html-container .nf-field-label { display: none; } .nf-field-label .nf-label-span, .nf-field-label label { font-weight: bold; margin: 0; padding: 0; } .nf-field-element { position: relative; } .nf-field-element input, .nf-field-element select, .nf-field-element textarea { margin: 0; width: auto; height: auto; vertical-align: inherit; } .nf-field-element textarea { height: 200px; } .nf-field-description p:last-child { margin: 0; } .nf-help { display: inline-block; width: 16px; height: 16px; } .nf-input-limit { font-size: 12px; margin-top: 5px; } .nf-static { padding: 0 10px; } .nf-after-field .nf-error-msg { margin-right: 10px; } /* --------------------------------- CHECKBOX FIELD ----------------------------------*/ /* --------------------------------- RADIO & CHECKBOX LISTS ----------------------------------*/ .list-radio-wrap .nf-field-element ul, .list-radio-wrap .nf-field-element li, .list-checkbox-wrap .nf-field-element ul, .list-checkbox-wrap .nf-field-element li, .list-image-wrap .nf-field-element ul, .list-image-wrap .nf-field-element li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .list-radio-wrap .nf-field-element ul input, .list-radio-wrap .nf-field-element li input, .list-checkbox-wrap .nf-field-element ul input, .list-checkbox-wrap .nf-field-element li input, .list-image-wrap .nf-field-element ul input, .list-image-wrap .nf-field-element li input { margin-right: 5px; } .list-radio-wrap .nf-field-element li, .list-checkbox-wrap .nf-field-element li, .list-image-wrap .nf-field-element li { padding-left: 10px; margin: 0 0 5px !important; text-indent: initial !important; } .list-radio-wrap .nf-field-element li label, .list-checkbox-wrap .nf-field-element li label, .list-image-wrap .nf-field-element li label { display: block; float: initial; width: auto; margin-left: 1.5em; } .list-radio-wrap .nf-field-element li input, .list-checkbox-wrap .nf-field-element li input, .list-image-wrap .nf-field-element li input { width: auto !important; float: left; margin-top: 0.25em; } .listimage-wrap li { width: 100%; height: 100%; display: inline-grid; } .listimage-wrap li label { padding: 5px; border-width: 2px; border-style: solid; border-color: transparent; } .listimage-wrap li label.nf-checked-label { border-width: 2px; border-style: solid; border-color: #007acc; transition: all 0.5s; } .listimage-wrap li label img { display: block; } .listimage-wrap li input { display: none; } /* --------------------------------- PRODUCT FIELD ----------------------------------*/ .product-wrap > div input { width: 80px !important; } .product-wrap > div .nf-product-field span { padding: 0 5px; } /* --------------------------------- STAR RATING ----------------------------------*/ .starrating-wrap .star { border-bottom: 0; } /* --------------------------------- HONEYPOT ----------------------------------*/ .nf-form-hp { position: absolute; visibility: hidden; } /* --------------------------------- SELECT LIST ----------------------------------*/ .list-select-wrap div div { display: none; } /* --------------------------------- COLORS As minimal as possible ----------------------------------*/ .ninja-forms-req-symbol, .nf-error-msg { color: #E80000; } .nf-error .ninja-forms-field { border: 1px solid #E80000; } .nf-error.listimage-wrap .nf-field-element ul { border: 1px solid #E80000; } .nf-field-submit-error { padding: 15px; } .ninja-forms-noscript-message { background: #f1f1f1; border: 4px dashed #ccc; color: #333; display: block; font-size: 20px; margin: 20px 0; padding: 40px; text-align: center; } /* --------------------------------- HELPER CLASSES ----------------------------------*/ .two-col-list ul li { float: left; width: 50%; } .three-col-list ul li { float: left; width: 33.33%; } .four-col-list ul li { float: left; width: 25%; } .five-col-list ul li { float: left; width: 20%; } .six-col-list ul li { float: left; width: 16.66%; } body .pika-label { background: transparent; } /* Column Classes Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css --------------------------------------------- */ .nf-form-cont .five-sixths, .nf-form-cont .four-sixths, .nf-form-cont .one-fourth, .nf-form-cont .one-half, .nf-form-cont .one-sixth, .nf-form-cont .one-third, .nf-form-cont .three-fourths, .nf-form-cont .three-sixths, .nf-form-cont .two-fourths, .nf-form-cont .two-sixths, .nf-form-cont .two-thirds { clear: initial; float: left; margin-left: 2.5641025641%; } .nf-form-cont .five-sixths .inside, .nf-form-cont .four-sixths .inside, .nf-form-cont .one-fourth .inside, .nf-form-cont .one-half .inside, .nf-form-cont .one-sixth .inside, .nf-form-cont .one-third .inside, .nf-form-cont .three-fourths .inside, .nf-form-cont .three-sixths .inside, .nf-form-cont .two-fourths .inside, .nf-form-cont .two-sixths .inside, .nf-form-cont .two-thirds .inside { padding: 20px; } .nf-form-cont .five-sixths::after, .nf-form-cont .four-sixths::after, .nf-form-cont .one-fourth::after, .nf-form-cont .one-half::after, .nf-form-cont .one-sixth::after, .nf-form-cont .one-third::after, .nf-form-cont .three-fourths::after, .nf-form-cont .three-sixths::after, .nf-form-cont .two-fourths::after, .nf-form-cont .two-sixths::after, .nf-form-cont .two-thirds::after { clear: both; content: ""; display: block; } .nf-form-cont .one-half, .nf-form-cont .three-sixths, .nf-form-cont .two-fourths { width: 48.7179487179%; } .nf-form-cont .one-third, .nf-form-cont .two-sixths { width: 31.6239316239%; } .nf-form-cont .four-sixths, .nf-form-cont .two-thirds { width: 65.811965812%; } .nf-form-cont .one-fourth { width: 23.0769230769%; } .nf-form-cont .three-fourths { width: 74.358974359%; } .nf-form-cont .one-sixth { width: 14.5299145299%; } .nf-form-cont .five-sixths { width: 82.905982906%; } .nf-form-cont .first { clear: both; margin-left: 0; } .flow-row { grid-auto-flow: row; } .flow-row-dense { grid-auto-flow: row dense; } .flow-column { grid-auto-flow: column; } .flow-column-dense { grid-auto-flow: column dense; } .align-start { align-items: start; } .align-end { align-items: end; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-center [class*=col-] { justify-self: center; } .align-self-stretch { align-self: stretch; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-baseline { align-self: baseline; } .grid-bleed { gap: 0; } .grid-bleed-x { row-gap: 0; } .grid-bleed-y { column-gap: 0; } @media (min-width: 1340px) { .col-xlg-12 { width: 100%; *width: 99.9%; } .col-xlg-11 { width: 91.6666666667%; *width: 91.5666666667%; } .col-xlg-10 { width: 83.3333333333%; *width: 83.2333333333%; } .col-xlg-9 { width: 75%; *width: 74.9%; } .col-xlg-8 { width: 66.6666666667%; *width: 66.5666666667%; } .col-xlg-7 { width: 58.3333333333%; *width: 58.2333333333%; } .col-xlg-6 { width: 50%; *width: 49.9%; } .col-xlg-5 { width: 41.6666666667%; *width: 41.5666666667%; } .col-xlg-4 { width: 33.3333333333%; *width: 33.2333333333%; } .col-xlg-3 { width: 25%; *width: 24.9%; } .col-xlg-2 { width: 16.6666666667%; *width: 16.5666666667%; } .col-xlg-1 { width: 8.3333333333%; *width: 8.2333333333%; } } .container, .container-full { max-width: 128rem; padding-right: var(--grid-padding-md); padding-left: var(--grid-padding-md); } .container .grid, .container-full .grid { margin-right: calc(var(--grid-padding-md) * -1); margin-left: calc(var(--grid-padding-md) * -1); } .container.half, .container-full.half { max-width: 71rem; } .grid [class*=col-] { padding: var(--grid-padding-md); } .grid .col-bleed-y { padding: 0 var(--grid-padding-md); } .grid.no-padding-x { margin-top: calc(var(--grid-padding-md) * -1); margin-bottom: calc(var(--grid-padding-md) * -1); } .grid.padding-none { margin-left: 0; margin-right: 0; } .grid.padding-none [class*=col-] { padding: 0; } .grid.padding-small { margin-left: calc(var(--grid-padding-sm) * -1); margin-right: calc(var(--grid-padding-sm) * -1); } .grid.padding-small [class*=col-] { padding: var(--grid-padding-sm); } .grid.padding-small .col-bleed-y { padding: 0 var(--grid-padding-sm); } .grid.padding-small.no-padding-x { margin-top: calc(var(--grid-padding-sm) * -1); margin-bottom: calc(var(--grid-padding-sm) * -1); } .grid.padding-large { margin-left: calc(var(--grid-padding-lg) * -1); margin-right: calc(var(--grid-padding-lg) * -1); } .grid.padding-large [class*=col-] { padding: var(--grid-padding-lg); } .grid.padding-large .col-bleed-y { padding: 0 var(--grid-padding-lg); } .grid.padding-large.no-padding-x { margin-top: calc(var(--grid-padding-lg) * -1); margin-bottom: calc(var(--grid-padding-lg) * -1); } @media screen and (max-width: 767px) { .grid :root { --grid-padding-sm: 2rem; --grid-padding-md: 2rem; --grid-padding-lg: 2rem; } } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove default margin in favour of better control in authored CSS */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role=list], ol[role=list] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; } /* Set shorter line heights on headings and interactive elements */ h1, h2, h3, h4, button, input, label { line-height: 1.1; } /* Balance text wrapping on headings */ h1, h2, h3, h4 { text-wrap: balance; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } .swiper-pagination .swiper-pagination-bullet::after { content: ""; width: var(--swiper-pagination-bullet-width); height: var(--swiper-pagination-bullet-height); display: block; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAxNiI+CiAgICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQxKSAgLS0+CiAgICA8cGF0aCBjbGFzcz0ic3QwIgogICAgICAgICAgZD0iTTcuMDkwOCwxNS4yODUyYy0yLjMwOTEsMC00LjE0OTQtMS40ODE0LTUuMDQxLTIuMzY0M0MuNzIzMSwxMS42MDc0LjEwNTUsMTAuMTU5Mi4xMDU1LDguMzYxM2MwLTEuNjczOCwxLjAwNjgtMy4yMTY4LDEuNjA4NC00LjEzODcuNTM1Ni0uODIyMywyLjE2ODktMy4zMjgxLDUuMzc3LTMuMzI4MSwxLjc2NDYsMCwzLjE0MjYuOTcwMiwzLjk2NDgsMS41NDk4LDEuNzY0NiwxLjI0MzIsMi43MTA5LDIuNzkxLDMuMDcyMyw1LjAxOTV2LjAwMWMuMTYxMSwxLC40OTcxLDMuMDgxMS0uNjkzNCw1LjAwNjgtMS41NTg2LDIuNTIxNS00LjM2NzIsMi44MTM1LTYuMzQzOCwyLjgxMzVaTTcuMDkwOCw0Ljg5NDVjLS42MjQ1LDAtMS4yMDguMjU3My0yLjAyNjQsMS41MTMyLS4yNjI3LjQwMjgtLjk1OSwxLjQ2OTItLjk1OSwxLjk1MzYsMCwuNzIyNy4xOTE0LDEuMTU2Mi43NTg4LDEuNzE3OC43NjI3Ljc1NDksMS41OTUyLDEuMjA2MSwyLjIyNjYsMS4yMDYxLDIuMTA0NSwwLDIuNjc3Ny0uNDkwMiwyLjk0MTQtLjkxNy4zNzUtLjYwNjQuMjgzMi0xLjQxOC4xNDY1LTIuMjY1Ni0uMTkwNC0xLjE4MTItLjUzODEtMS43NjE3LTEuNDI2OC0yLjM4ODItLjYxMzMtLjQzMjEtMS4yMDE3LS44MTk4LTEuNjYxMS0uODE5OFoiLz4KPC9zdmc+Cg==); background-size: var(--swiper-pagination-bullet-width) var(--swiper-pagination-bullet-height); pointer-events: none; opacity: 0.5; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { opacity: 1; } .swiper-pagination .swiper-pagination-bullet:nth-of-type(2n)::after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAxNSI+CiAgICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQxKSAgLS0+CiAgICA8cGF0aCBjbGFzcz0ic3QwIgogICAgICAgICAgZD0iTTYuMDQzLDE0LjE5MjJjLS45NzI3LDAtMi4xMjY1LS4xODE2LTMuMjI5NS0uODYzM0MuMjkxNSwxMS43NzAzLDAsOC45NjE4LDAsNi45ODUyLDAsNC42NzYxLDEuNDgxLDIuODM1OCwyLjM2NDMsMS45NDQyLDMuNjc3Mi42MTc1LDUuMTI2NS0uMDAwMiw2LjkyMzgtLjAwMDIsOC41OTg2LS4wMDAyLDEwLjE0MDYsMS4wMDY3LDExLjA2MjUsMS42MDgyYy44MjIzLjUzNjEsMy4zMjgxLDIuMTY5NCwzLjMyODEsNS4zNzcsMCwxLjc2NDYtLjk3MDcsMy4xNDE2LTEuNTUwOCwzLjk2NDgtMS4yNDIyLDEuNzYzNy0yLjc5LDIuNzEwOS01LjAxODYsMy4wNzIzaC0uMDAxYy0uNDI3Mi4wNjg0LTEuMDUxOC4xNjk5LTEuNzc3My4xNjk5Wk02LjkyMzgsMy45OTk4Yy0uNzIyNywwLTEuMTU1OC4xOTE0LTEuNzE3My43NTg4LS43NTU5Ljc2MjctMS4yMDY1LDEuNTk1Mi0xLjIwNjUsMi4yMjY2LDAsMi4xMDQ1LjQ4OTcsMi42Nzc3LjkxNjUsMi45NDE0LjYwNzQuMzc1LDEuNDE4LjI4MjIsMi4yNjYxLjE0NjUsMS4xODE2LS4xOTA0LDEuNzYxNy0uNTM3MSwyLjM4NzctMS40MjU4LjQzMjYtLjYxNDMuODIwMy0xLjIwMzEuODIwMy0xLjY2MjEsMC0uNjI0NS0uMjU2OC0xLjIwOC0xLjUxMjctMi4wMjY5LS40MDIzLS4yNjIyLTEuNDY5Mi0uOTU4NS0xLjk1NDEtLjk1ODVaIi8+Cjwvc3ZnPgo=); } .swiper-pagination .swiper-pagination-bullet:nth-of-type(3n)::after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxNSAxNiI+CiAgICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjkuNS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjAgQnVpbGQgMTQxKSAgLS0+CiAgICA8cGF0aCBjbGFzcz0ic3QwIgogICAgICAgICAgZD0iTTcuMDkwOCwxNS4yODUyYy0zLjIwNzUsMC00Ljg0MDgtMi41MDU5LTUuMzc3NC0zLjMyOTFDMS4xMTIzLDExLjAzNTIuMTA1NSw5LjQ5MzIuMTA1NSw3LjgxODRjMC0xLjc5NzQuNjE3Ny0zLjI0NjYsMS45NDQzLTQuNTYwMS44OTE2LS44ODI4LDIuNzMxOS0yLjM2MzgsNS4wNDEtMi4zNjM4LDEuOTc2NiwwLDQuNzg1Mi4yOTE1LDYuMzQzOCwyLjgxNCwxLjE5MDQsMS45MjUzLjg1NDUsNC4wMDYzLjY5MzQsNS4wMDYzdi4wMDFjLS4zNjEzLDIuMjI4NS0xLjMwODYsMy43NzY0LTMuMDcyMyw1LjAxODYtLjgyMzIuNTgwMS0yLjIwMDIsMS41NTA4LTMuOTY0OCwxLjU1MDhaTTcuMDkwOCw0Ljg5NDVjLS42MzEzLDAtMS40NjM5LjQ1MDctMi4yMjY2LDEuMjA2MS0uNTY3NC41NjItLjc1ODguOTk1MS0uNzU4OCwxLjcxNzgsMCwuNDg0OS42OTYzLDEuNTUxOC45NTgsMS45NTMxLjgxOTMsMS4yNTY4LDEuNDAyOCwxLjUxMzcsMi4wMjczLDEuNTEzNy40NTksMCwxLjA0NzktLjM4NzcsMS42NjIxLS44MjAzLjg4ODctLjYyNiwxLjIzNTQtMS4yMDcsMS40MjU4LTIuMzg3Ny4xMzY3LS44NDc3LjIyODUtMS42NTkyLS4xNDY1LTIuMjY1Ni0uMjYzNy0uNDI3Mi0uODM2OS0uOTE3LTIuOTQxNC0uOTE3WiIvPgo8L3N2Zz4K); } lite-youtube, lite-vimeo { background-repeat: no-repeat; background-size: cover; background-position: center center; } lite-youtube > .lty-playbtn, lite-youtube > .ltv-playbtn, lite-vimeo > .lty-playbtn, lite-vimeo > .ltv-playbtn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; background: none; transform: none; padding: 0; margin: 0; background-color: transparent; border: none; opacity: 1; transition: opacity 200ms linear; content: ""; width: 8rem; height: 8rem; display: block; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4MyA4MyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmVkYzQ4OwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgb3BhY2l0eTogLjg7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJSZWN0YW5nbGUtQ29weS0yIiBjbGFzcz0ic3QwIiBkPSJNMjcuNzc2Ny44NzI0bDI5Ljk4MTcsMS4wNDdjMTMuNzk4Ny40ODE5LDI0LjU5NDEsMTIuMDU4NiwyNC4xMTIzLDI1Ljg1NzNsLTEuMDQ3LDI5Ljk4MTdjLS40ODE5LDEzLjc5ODctMTIuMDU4NSwyNC41OTQxLTI1Ljg1NzMsMjQuMTEyM2wtMjkuOTgxNy0xLjA0N2MtMTMuNzk4Ny0uNDgxOS0yNC41OTQxLTEyLjA1ODUtMjQuMTEyMy0yNS44NTczbDEuMDQ3LTI5Ljk4MTdDMi40MDEzLDExLjE4NiwxMy45NzguMzkwNiwyNy43NzY3Ljg3MjRaIi8+CiAgPHBhdGggaWQ9IlBhdGgiIGNsYXNzPSJzdDEiIGQ9Ik02My40NzM0LDQxLjU4NjhjLTQuMTA5Ni0zLjQ1MjItOC4yMTkzLTYuOTA0My0xMi4zMjg5LTEwLjM1NjUtMy43NzE5LTMuMTY4NC03LjQ5MzQtNi4zNzQyLTEyLjA4MjgtOC4zMDEzLTEuMTQzOC0uNDgwMy0yLjEzMzUtLjEzMDItMi43NzYyLjU2NzktLjk5ODcuNDA5Mi0xLjgxMjgsMS4zNDI5LTEuNzU0OCwyLjY5NTQuNDQ0OSwxMC4zNzYyLTIuOTIzNSwyMC45ODc2LTQuODI1MiwzMS4wOTI0LS43ODMsNC4xNjA3LDIuMjg5NSw3LjE4MTYsNi40MjY5LDUuOTI3LDQuNTk5OC0xLjM5NDcsOS4xMDk5LTMuOTIwOCwxMy40MjM0LTYuMDI2Niw0LjE2ODEtMi4wMzQ5LDguMjI0Mi00LjI4OTYsMTIuMTM2Mi02Ljc4MTksMS42NDE1LTEuMDQ1OCwzLjcyODgtMi4wOTY4LDQuMTkxNS00LjE1MzMuNDc0Mi0yLjEwNzUtLjkyNzMtMy40MTc2LTIuNDEwMS00LjY2MzJaIi8+CiAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0ic3QyIiBkPSJNNTguODQ1NSwzNC43MTQ3Yy01LjA0ODQtMy4yODI0LTEwLjA5NjktNi41NjQ4LTE1LjE0NTQtOS44NDcxLTQuNjMzNS0zLjAxMjYtOS4yMTYyLTYuMDczNy0xNC41OTAzLTcuNTkyMS0xLjMzOTQtLjM3ODQtMi4zOTM3LjE0NjgtMy4wMTM5LDEuMDEyLTEuMDU2Mi41OTIyLTEuODM1MiwxLjc0MzMtMS41ODU2LDMuMjQxNSwxLjkxNDIsMTEuNDkzOS0uMzg1OSwyMy43NzEzLTEuMTIyLDM1LjI4MzktLjMwMyw0Ljc0MDMsMy41MzE1LDcuNjg0Myw3Ljk2NzQsNS43MjE1LDQuOTMxNS0yLjE4MjEsOS42MDg2LTUuNjExNywxNC4xMjQxLTguNTQ2Niw0LjM2MzQtMi44MzU5LDguNTcxOC01LjkwMTQsMTIuNTg3NC05LjIxMTcsMS42ODQ5LTEuMzg5LDMuODY1Ni0yLjg0NDgsNC4wOTk4LTUuMTk4Mi4yMzk5LTIuNDExOC0xLjUtMy42NzktMy4zMjE1LTQuODYzM1pNNDEuNjI4Miw0OS41MDI2Yy0zLjU2NzIsMi4zMTg1LTcuMjE3OCw0LjUwNzgtMTAuODY0NSw2LjY5NzktLjcyNDIuNDM0OS0xLjYwNDIuNTY0NS0xLjUzNTEsMS40MTg3LS4wODE5LTEuMDEyMS4xMDkyLTIuMTA4Ny4xNzg3LTMuMTE3Ny4xNTk1LTIuMzE0Mi4zNTgyLTQuNjI1OS41NTAxLTYuOTM3Ni42NDE3LTcuNzMwOSwxLjQyOS0xNS43MTc5LjcyMjgtMjMuNTA5MiwyLjg3MzMsMS4yMzgxLDUuNTE1MiwyLjkyNjMsOC4xNjY0LDQuNjQ2NywzLjc4ODUsMi40NTg1LDcuNTcyNyw0LjkyMzUsMTEuMzU5LDcuMzg1MywxLjcxLDEuMTExOCwzLjQyLDIuMjIzNiw1LjEzLDMuMzM1NC0uNzMzMS42NDA3LTEuNDgzMSwxLjI2Mi0yLjIzNDIsMS44ODEyLTMuNjI3NiwyLjk5MDUtNy41MzUsNS42Mzk1LTExLjQ3MzIsOC4xOTkyWiIvPgo8L3N2Zz4=); background-size: 8rem 8rem; border-radius: var(--border-radius-md); z-index: 3; pointer-events: initial; pointer-events: none; } lite-youtube > .lty-playbtn:hover, lite-youtube > .ltv-playbtn:hover, lite-vimeo > .lty-playbtn:hover, lite-vimeo > .ltv-playbtn:hover { background: transparent; } lite-youtube > .lty-playbtn:hover, lite-youtube > .ltv-playbtn:hover, lite-vimeo > .lty-playbtn:hover, lite-vimeo > .ltv-playbtn:hover { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4MyA4MyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmVkYzQ4OwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgb3BhY2l0eTogLjg7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJSZWN0YW5nbGUtQ29weS0yIiBjbGFzcz0ic3QwIiBkPSJNMjcuNzc2Ny44NzI0bDI5Ljk4MTcsMS4wNDdjMTMuNzk4Ny40ODE5LDI0LjU5NDEsMTIuMDU4NiwyNC4xMTIzLDI1Ljg1NzNsLTEuMDQ3LDI5Ljk4MTdjLS40ODE5LDEzLjc5ODctMTIuMDU4NSwyNC41OTQxLTI1Ljg1NzMsMjQuMTEyM2wtMjkuOTgxNy0xLjA0N2MtMTMuNzk4Ny0uNDgxOS0yNC41OTQxLTEyLjA1ODUtMjQuMTEyMy0yNS44NTczbDEuMDQ3LTI5Ljk4MTdDMi40MDEzLDExLjE4NiwxMy45NzguMzkwNiwyNy43NzY3Ljg3MjRaIi8+CiAgPHBhdGggaWQ9IlBhdGgiIGNsYXNzPSJzdDEiIGQ9Ik02My40NzM0LDQxLjU4NjhjLTQuMTA5Ni0zLjQ1MjItOC4yMTkzLTYuOTA0My0xMi4zMjg5LTEwLjM1NjUtMy43NzE5LTMuMTY4NC03LjQ5MzQtNi4zNzQyLTEyLjA4MjgtOC4zMDEzLTEuMTQzOC0uNDgwMy0yLjEzMzUtLjEzMDItMi43NzYyLjU2NzktLjk5ODcuNDA5Mi0xLjgxMjgsMS4zNDI5LTEuNzU0OCwyLjY5NTQuNDQ0OSwxMC4zNzYyLTIuOTIzNSwyMC45ODc2LTQuODI1MiwzMS4wOTI0LS43ODMsNC4xNjA3LDIuMjg5NSw3LjE4MTYsNi40MjY5LDUuOTI3LDQuNTk5OC0xLjM5NDcsOS4xMDk5LTMuOTIwOCwxMy40MjM0LTYuMDI2Niw0LjE2ODEtMi4wMzQ5LDguMjI0Mi00LjI4OTYsMTIuMTM2Mi02Ljc4MTksMS42NDE1LTEuMDQ1OCwzLjcyODgtMi4wOTY4LDQuMTkxNS00LjE1MzMuNDc0Mi0yLjEwNzUtLjkyNzMtMy40MTc2LTIuNDEwMS00LjY2MzJaIi8+CiAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0ic3QyIiBkPSJNNTguODQ1NSwzNC43MTQ3Yy01LjA0ODQtMy4yODI0LTEwLjA5NjktNi41NjQ4LTE1LjE0NTQtOS44NDcxLTQuNjMzNS0zLjAxMjYtOS4yMTYyLTYuMDczNy0xNC41OTAzLTcuNTkyMS0xLjMzOTQtLjM3ODQtMi4zOTM3LjE0NjgtMy4wMTM5LDEuMDEyLTEuMDU2Mi41OTIyLTEuODM1MiwxLjc0MzMtMS41ODU2LDMuMjQxNSwxLjkxNDIsMTEuNDkzOS0uMzg1OSwyMy43NzEzLTEuMTIyLDM1LjI4MzktLjMwMyw0Ljc0MDMsMy41MzE1LDcuNjg0Myw3Ljk2NzQsNS43MjE1LDQuOTMxNS0yLjE4MjEsOS42MDg2LTUuNjExNywxNC4xMjQxLTguNTQ2Niw0LjM2MzQtMi44MzU5LDguNTcxOC01LjkwMTQsMTIuNTg3NC05LjIxMTcsMS42ODQ5LTEuMzg5LDMuODY1Ni0yLjg0NDgsNC4wOTk4LTUuMTk4Mi4yMzk5LTIuNDExOC0xLjUtMy42NzktMy4zMjE1LTQuODYzM1pNNDEuNjI4Miw0OS41MDI2Yy0zLjU2NzIsMi4zMTg1LTcuMjE3OCw0LjUwNzgtMTAuODY0NSw2LjY5NzktLjcyNDIuNDM0OS0xLjYwNDIuNTY0NS0xLjUzNTEsMS40MTg3LS4wODE5LTEuMDEyMS4xMDkyLTIuMTA4Ny4xNzg3LTMuMTE3Ny4xNTk1LTIuMzE0Mi4zNTgyLTQuNjI1OS41NTAxLTYuOTM3Ni42NDE3LTcuNzMwOSwxLjQyOS0xNS43MTc5LjcyMjgtMjMuNTA5MiwyLjg3MzMsMS4yMzgxLDUuNTE1MiwyLjkyNjMsOC4xNjY0LDQuNjQ2NywzLjc4ODUsMi40NTg1LDcuNTcyNyw0LjkyMzUsMTEuMzU5LDcuMzg1MywxLjcxLDEuMTExOCwzLjQyLDIuMjIzNiw1LjEzLDMuMzM1NC0uNzMzMS42NDA3LTEuNDgzMSwxLjI2Mi0yLjIzNDIsMS44ODEyLTMuNjI3NiwyLjk5MDUtNy41MzUsNS42Mzk1LTExLjQ3MzIsOC4xOTkyWiIvPgo8L3N2Zz4=); background-size: 8rem 8rem; } lite-youtube > .lty-playbtn::after, lite-youtube > .ltv-playbtn::after, lite-vimeo > .lty-playbtn::after, lite-vimeo > .ltv-playbtn::after { content: none; } lite-youtube > .lty-playbtn::before, lite-youtube > .ltv-playbtn::before, lite-vimeo > .lty-playbtn::before, lite-vimeo > .ltv-playbtn::before { content: none; } lite-youtube.lyt-activated > .lty-playbtn, lite-youtube.lyt-activated > .ltv-playbtn, lite-youtube.ltv-activated > .lty-playbtn, lite-youtube.ltv-activated > .ltv-playbtn, lite-vimeo.lyt-activated > .lty-playbtn, lite-vimeo.lyt-activated > .ltv-playbtn, lite-vimeo.ltv-activated > .lty-playbtn, lite-vimeo.ltv-activated > .ltv-playbtn { display: none; } .lyt-visually-hidden { display: none; } .loading { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 245, 233, 0.5); display: flex; justify-content: center; align-items: center; padding-top: 3rem; z-index: 2; } .spinner { position: relative; width: 1.5rem; height: 1.5rem; } .spinner div { animation: spinner-4t3wzl 2.25s infinite backwards; background-color: #F0A3B7; border-radius: 50%; height: 100%; position: absolute; width: 100%; z-index: 2; } .spinner div:nth-child(1) { animation-delay: 0.18s; background-color: rgba(148, 212, 235, 0.9); } .spinner div:nth-child(2) { animation-delay: 0.36s; background-color: rgba(210, 224, 185, 0.8); } .spinner div:nth-child(3) { animation-delay: 0.54s; background-color: rgba(254, 220, 72, 0.7); } .spinner div:nth-child(4) { animation-delay: 0.72s; background-color: rgba(161, 124, 182, 0.6); } .spinner div:nth-child(5) { animation-delay: 0.9s; background-color: rgba(240, 163, 183, 0.5); } @keyframes spinner-4t3wzl { 0% { transform: rotate(0deg) translateY(-200%); } 60%, 100% { transform: rotate(360deg) translateY(-200%); } } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } html { font-size: 0.625em; background-color: var(--wafer); scroll-behavior: smooth; } body { font-size: 1.4em; line-height: 1.5; font-weight: normal; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--font-family), sans-serif; color: var(--text); } .waffle { background: url(/wp-content/themes/class/dist/images/waffle.jpg) repeat; background-size: 15rem; } main, #page-navigation, #footer { font: var(--paragraph-font); } img { max-width: 100%; height: auto; } picture { line-height: 0; } picture img { object-fit: cover; } button, input, optgroup, select, textarea, small { font-family: var(--font-family), sans-serif; } .embed-container, .wp-block-embed .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed, .wp-block-embed .wp-block-embed__wrapper iframe, .wp-block-embed .wp-block-embed__wrapper object, .wp-block-embed .wp-block-embed__wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .breadcrumbs { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .container.container--small { max-width: 96.5rem; } .container.container--xs { max-width: 86rem; } #svg-icon-sprite { display: none; } * { -webkit-tap-highlight-color: transparent; } *:focus { outline: none; } @font-face { font-family: "poppins"; src: url(/wp-content/themes/class/dist/fonts/Poppins-Regular.woff2) format("woff2-variations"); src: url(/wp-content/themes/class/dist/fonts/Poppins-Regular.woff2) format("woff2") tech("variations"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "poppins"; src: url(/wp-content/themes/class/dist/fonts/Poppins-Medium.woff2) format("woff2-variations"); src: url(/wp-content/themes/class/dist/fonts/Poppins-Medium.woff2) format("woff2") tech("variations"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "poppins"; src: url(/wp-content/themes/class/dist/fonts/Poppins-Bold.woff2) format("woff2-variations"); src: url(/wp-content/themes/class/dist/fonts/Poppins-Bold.woff2) format("woff2") tech("variations"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "colby"; src: url(/wp-content/themes/class/dist/fonts/Colby-StBld.woff2) format("woff2-variations"); src: url(/wp-content/themes/class/dist/fonts/Colby-StBld.woff2) format("woff2") tech("variations"); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: "colby"; src: url(/wp-content/themes/class/dist/fonts/Colby-StBlk.woff2) format("woff2-variations"); src: url(/wp-content/themes/class/dist/fonts/Colby-StBlk.woff2) format("woff2") tech("variations"); font-weight: 900; font-style: normal; font-display: swap; } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; margin-bottom: 0.4em; } :root { --heading-one-font-size: 4.2rem; --heading-one-line-height: 4.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-one-font-size: 5rem; --heading-one-line-height: 5.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } } :root { --heading-one-font: var(--heading-one-font-style) var(--heading-one-font-weight) var(--heading-one-font-size) / var(--heading-one-line-height) var(--heading-font-family); } :root { --heading-two-font-size: 3.2rem; --heading-two-line-height: 3.4rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-two-font-size: 4.2rem; --heading-two-line-height: 4.5rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } } :root { --heading-two-font: var(--heading-two-font-style) var(--heading-two-font-weight) var(--heading-two-font-size)/var(--heading-two-line-height) var(--heading-font-family); } :root { --heading-three-font-size: 2.8rem; --heading-three-line-height: 3rem; --heading-three-letter-spacing: 1; --heading-three-font-style: normal; --heading-three-font-weight: bold; --heading-three-text-transform: initial; } :root { --heading-three-font: var(--heading-three-font-style) var(--heading-three-font-weight) var(--heading-three-font-size) / var(--heading-three-line-height) var(--heading-font-family); } :root { --heading-four-font-size: 2rem; --heading-four-line-height: 2.1rem; --heading-four-letter-spacing: 1; --heading-four-font-style: normal; --heading-four-font-weight: bold; --heading-four-text-transform: initial; } :root { --heading-four-font: var(--heading-four-font-style) var(--heading-four-font-weight) var(--heading-four-font-size) / var(--heading-four-line-height) var(--heading-font-family); } :root { --heading-five-font-size: 1.8rem; --heading-five-line-height: 2.5rem; --heading-five-letter-spacing: 1; --heading-five-font-style: normal; --heading-five-font-weight: bold; --heading-five-text-transform: normal; } :root { --heading-five-font: var(--heading-five-font-style) var(--heading-five-font-weight) var(--heading-five-font-size) / var(--heading-five-line-height) var(--heading-font-family); } :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } @media screen and (min-width: 768px) { :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } } :root { --heading-six-font: var(--heading-six-font-style) var(--heading-six-font-weight) var(--heading-six-font-size) / var(--heading-six-line-height) var(--font-family); } :root { --paragraph-font-size: 1.8rem; --paragraph-line-height: 2.5rem; --paragraph-letter-spacing: 1; --paragraph-font-style: normal; --paragraph-font-weight: normal; --paragraph-text-transform: normal; } :root { --paragraph-font: var(--paragraph-font-style) var(--paragraph-font-weight) var(--paragraph-font-size) / var(--paragraph-line-height) var(--font-family); } :root { --small-paragraph-font-size: 1.4rem; --small-paragraph-line-height: 1.5rem; --small-paragraph-letter-spacing: 0.003rem; --small-paragraph-font-style: normal; --small-paragraph-font-weight: bold; --small-paragraph-text-transform: normal; } :root { --small-paragraph-font: var(--small-paragraph-font-style) var(--small-paragraph-font-weight) var(--small-paragraph-font-size) / var(--small-paragraph-line-height) var(--heading-font-family); } :root { --x-small-paragraph-font-size: 1.4rem; --x-small-paragraph-line-height: 1.7rem; --x-small-paragraph-letter-spacing: 0; --x-small-paragraph-font-style: normal; --x-small-paragraph-font-weight: normal; --x-small-paragraph-text-transform: normal; } :root { --x-small-paragraph-font: var(--x-small-paragraph-font-style) var(--x-small-paragraph-font-weight) var(--x-small-paragraph-font-size) / var(--x-small-paragraph-line-height) var(--font-family); } h1, .heading-1, .h1 { color: var(--headings); font: var(--heading-one-font); letter-spacing: var(--heading-one-letter-spacing); text-transform: var(--heading-one-text-transform); text-transform: uppercase; } h2, .heading-2, .h2 { color: var(--headings); font: var(--heading-two-font); letter-spacing: var(--heading-two-letter-spacing); text-transform: var(--heading-two-text-transform); } h3, .heading-3, .h3 { color: var(--headings); font: var(--heading-three-font); letter-spacing: var(--heading-three-letter-spacing); text-transform: var(--heading-three-text-transform); } h4, .heading-4, .h4 { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } h5, .heading-5, .h5 { color: var(--headings); font: var(--heading-five-font); letter-spacing: var(--heading-five-letter-spacing); text-transform: var(--heading-five-text-transform); } h6, .heading-6, .h6 { color: var(--headings); font: var(--heading-six-font); letter-spacing: var(--heading-six-letter-spacing); text-transform: var(--heading-six-text-transform); } p { margin-top: 0; margin-bottom: 0.5em; font: var(--paragraph-font); letter-spacing: var(--paragraph-letter-spacing); text-transform: var(--paragraph-text-transform); } p:last-child { margin-bottom: 0; } @media screen and (min-width: 992px) { p { margin-bottom: 1em; } } a { text-decoration: none; font: inherit; color: #47AED3; } a a:not([class]) { font-weight: 500; } a a:not([class]):hover { text-decoration: underline; } .wysiwyg ol { padding: 0 0 0 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .wysiwyg ol li { padding: 0 0 0 0.5rem; } .wysiwyg img, .wysiwyg video, .wysiwyg .wp-block-embed-youtube { border-radius: var(--border-radius-md); margin: 3rem 0; } .wysiwyg blockquote { position: relative; padding: 2rem 0 2rem 2rem; } .wysiwyg blockquote::before { content: ""; height: 100%; position: absolute; display: flex; width: 0.3rem; background-color: var(--bubblegum); left: 0; top: 0; } .wysiwyg table { border-color: white; } .wysiwyg .wp-block-embed-youtube { border-radius: var(--border-radius-md); overflow: hidden; } .wysiwyg .wp-block-embed-youtube iframe { width: 100%; } .wysiwyg li { font: var(--paragraph-font); } .wysiwyg ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wysiwyg ul li { padding: 0 0 0 1.5rem; position: relative; } .wysiwyg ul li::before { content: "•"; position: absolute; left: 0; top: 0; color: inherit; } .wysiwyg a:not([class]) { color: #47AED3; font-weight: 500; } .wysiwyg a:not([class]):hover { text-decoration: underline; } small { font: var(--small-paragraph-font); letter-spacing: var(--small-paragraph-letter-spacing); text-transform: var(--small-paragraph-text-transform); } .header, .section { overflow: hidden; padding-top: var(--section-padding-md); padding-bottom: var(--section-padding-md); } .header.pd-top-sm, .section.pd-top-sm { padding-top: var(--section-padding-sm); } .header.pd-bot-sm, .section.pd-bot-sm { padding-bottom: var(--section-padding-sm); } .header.pd-top-lg, .section.pd-top-lg { padding-top: var(--section-padding-lg); } .header.pd-bot-lg, .section.pd-bot-lg { padding-bottom: var(--section-padding-lg); } .header.pd-top-xlg, .section.pd-top-xlg { padding-top: var(--section-padding-xlg); } .header.pd-bot-xlg, .section.pd-bot-xlg { padding-bottom: var(--section-padding-xlg); } .header.pd-top-none, .section.pd-top-none { padding-top: 0; } .header.pd-bot-none, .section.pd-bot-none { padding-bottom: 0; } .list.list--inline { margin: 0; padding: 0; list-style: none; display: flex; align-content: center; gap: 1rem; } .list.list--inline li { display: inline-block; } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } #page-navigation { position: absolute; margin: 0 auto; width: 100%; z-index: 10; padding: 6rem 0 0; overflow: hidden; } #page-navigation .socials { display: none; } #page-navigation .menu-item { font: var(--heading-four-font); } #page-navigation .menu-item.current-menu-item a, #page-navigation .menu-item:hover a { color: var(--headings); } #page-navigation .menu-item .menu-toggle__text { line-height: 0; } #page-navigation .nav { display: flex; gap: 3rem; align-items: center; } #page-navigation #nav-cta { margin-left: auto; margin-right: 0; } #page-navigation #page-navigation__links { display: flex; justify-content: space-between; } #page-navigation #logo { display: inline-block; height: fit-content; } #page-navigation #logo img, #page-navigation #logo svg { fill: var(--headings); width: 25.3rem; aspect-ratio: 253/54; } body:has(.header--video) #page-navigation:not(.open):not(.affixed) .menu-item { color: white; } body:has(.header--video) #page-navigation:not(.open):not(.affixed) #logo img, body:has(.header--video) #page-navigation:not(.open):not(.affixed) #logo svg { fill: white; } .nav a:hover { text-decoration: none; } .menu-toggle { background-color: rgba(210, 224, 185, 0.5); border: none; cursor: pointer; width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border-radius: var(--border-radius-md); transition: background-color 150ms linear; margin-left: auto; } .menu-toggle:hover { background-color: #d2e0b9; } .menu-toggle svg { width: 4rem; height: 4rem; } .menu-toggle .menu-toggle__burger { display: none; position: relative; left: -0.1rem; top: -0.1rem; } .menu-toggle .menu-toggle__close { display: initial; position: relative; top: 0.1rem; } .menu-toggle .menu-toggle__text { line-height: 0; } .menu-toggle.open .menu-toggle__burger { display: initial; } .menu-toggle.open .menu-toggle__close { display: none; } @keyframes affixedStart { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @media screen and (max-width: 1199px) { #page-navigation { position: fixed; padding-top: 0; transition: transform 300ms linear; overflow: visible; } #page-navigation .container-full { padding-top: 1.5rem; overflow: hidden; } #page-navigation.hidden { transform: translateY(calc(-100% - 15rem)); } #page-navigation .nav { gap: 5rem; } #page-navigation.affixed::before { content: ""; display: block; width: 100%; height: 15rem; position: absolute; top: 0; left: 0; background-image: linear-gradient(180deg, #FFF5E9 0%, rgba(255, 245, 233, 0) 100%); } #page-navigation #primary__nav, #page-navigation #page-navigation__cta { display: none; } #page-navigation .grid { display: flex; justify-content: space-between; height: 100%; } #page-navigation .grid [class*=col-] { width: auto; } #page-navigation #logo img, #page-navigation #logo svg { aspect-ratio: 80/62; width: 8rem; } #page-navigation #page-navigation__menu-wrapper { width: 100%; display: none; } #page-navigation.open { background: url(/wp-content/themes/class/dist/images/waffle.jpg) repeat; background-size: 15rem; width: 100vw; max-width: 100%; height: 100vh; position: fixed; left: 0; top: 0; padding-bottom: 4.2rem; } #page-navigation.open .menu-item { color: var(--text); } #page-navigation.open::before { content: none; } #page-navigation.open .container-full { height: 100%; } .admin-bar #page-navigation.open { top: var(--wp-admin--admin-bar--height, 4rem); height: calc(100vh - var(--wp-admin--admin-bar--height)); } #page-navigation.open .socials { display: flex; width: 100%; justify-content: center; } #page-navigation.open #page-navigation__menu-wrapper { display: flex; width: 100%; } #page-navigation.open .page-navigation__menu-wrapper { justify-content: center; } #page-navigation.open .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); grid-column-gap: 0px; grid-row-gap: 10px; } #page-navigation.open .grid .col-4, #page-navigation.open .grid .col-3 { width: initial; } #page-navigation.open .grid .page-navigation__logo-wrapper { grid-area: 1/1/2/5; } #page-navigation.open .grid .page-navigation__mobile-cta { grid-area: 1/5/2/9; display: flex; justify-content: center; } #page-navigation.open .grid .page-navigation__mobile-cta .btn { position: relative; left: 1rem; } #page-navigation.open .grid #page-navigation__menu-toggle-wrapper { grid-area: 1/9/2/13; display: flex; justify-content: flex-end; } #page-navigation.open .grid #page-navigation__menu-wrapper { grid-area: 2/1/12/13; height: 100%; padding: 6rem 0 2rem; } #page-navigation.open .grid #page-navigation__menu-wrapper #page-navigation__links { overflow-y: scroll; height: 100%; width: 100%; justify-content: center; } #page-navigation.open .grid .socials { grid-area: 12/1/13/13; } #page-navigation.open #primary__nav { display: flex; flex-direction: column; position: relative; padding-bottom: 0; } #page-navigation .page-navigation__mobile-cta { display: flex; justify-content: center; } #page-navigation .page-navigation__menu-wrapper { display: flex; justify-content: flex-end; } } .header.header--home-header { height: 64rem; padding: 0; overflow: hidden; position: relative; } .header.header--home-header .container-full { position: relative; height: 100%; } .header.header--home-header .header__bg-right { position: absolute; right: -17.2%; bottom: 0; z-index: 1; pointer-events: none; user-select: none; } .header.header--home-header .header__bg-right img { width: 100rem; min-width: 100rem; height: 50.8rem; } .header.header--home-header .header__bg-left { position: absolute; left: -12.1%; bottom: 0; z-index: 1; user-select: none; pointer-events: none; } .header.header--home-header .header__bg-left img { width: 58rem; min-width: 58rem; height: 50.8rem; } .header.header--home-header .header__bg-mobile { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; display: none; } .header.header--home-header .header__bg-mobile img { width: 100%; height: auto; } .header.header--home-header .header__background { position: absolute; z-index: 1; } .header.header--home-header .header__background .embed-container { width: 100%; height: 64rem; padding-bottom: 0; } .header.header--home-header .header__background .embed-container video, .header.header--home-header .header__background .embed-container image { width: 100%; height: 100%; object-fit: cover; } .header.header--home-header .header__content { position: relative; z-index: 2; } .header.header--home-header .header__content { padding: 24rem 0; } .header.header--home-header .header__title { display: block; width: 61rem; max-width: 100%; } @media screen and (max-width: 1279px) { .header.header--home-header .header__bg-right { right: -22.2%; } } @media screen and (max-width: 1210px) { .header.header--home-header .header__bg-right { right: -32%; } } @media screen and (max-width: 1120px) { .header.header--home-header .header__bg-right { right: -39%; } } @media screen and (max-width: 1060px) { .header.header--home-header .header__bg-right { right: -47%; } } @media screen and (max-width: 1010px) { .header.header--home-header .header__bg-right { right: -52%; } } @media screen and (max-width: 960px) { .header.header--home-header .header__bg-right { right: -56%; } .header.header--home-header .header__bg-left { left: -21%; } } @media screen and (max-width: 830px) { .header.header--home-header .header__bg-right { right: -61%; } .header.header--home-header .header__bg-left { left: -25%; } } @media screen and (max-width: 767px) { .header.header--home-header { height: auto; } .header.header--home-header .header__bg-right, .header.header--home-header .header__bg-left { display: none; } .header.header--home-header .header__bg-mobile { display: initial; } .header.header--home-header .header__content { padding: 12.5rem 0 55rem; } } @media screen and (max-width: 660px) { .header.header--home-header .header__content { padding-bottom: 45rem; } } @media screen and (max-width: 530px) { .header.header--home-header .header__content { padding-bottom: 35rem; } } .section.section--image-scroller { --animation: 400ms; overflow: visible; } .section.section--image-scroller .container-full { padding-top: 4rem; padding-bottom: 5rem; } .section.section--image-scroller .section__grid { display: flex; justify-content: space-between; } .section.section--image-scroller .section__content { width: 58rem; } @media screen and (max-width: 992px) { .section.section--image-scroller .section__content { width: 100%; } } .section.section--image-scroller .section__action { margin-top: 2.5rem; } .section.section--image-scroller .section__spinner { transition: all 200ms linear; margin-top: 20rem; } .section.section--image-scroller .section__spinner, .section.section--image-scroller .section__spinner img { width: 24rem; height: 24rem; } .section.section--image-scroller .section__spinner[data-direction=right] { margin-left: auto; margin-right: 0; } .section.section--image-scroller .section__mobile-image-wrapper { display: none; } .section.section--image-scroller .section__row { min-height: 66rem; display: flex; flex-direction: column; justify-content: center; padding: 5.5rem 0; box-sizing: content-box; } .section.section--image-scroller .section__row:first-of-type { padding-top: 0; } .section.section--image-scroller .section__row:last-of-type { padding-bottom: 0; } .section.section--image-scroller .section__grid .section__image-wrapper { transition: transform 200ms linear; position: sticky; top: 9rem; } .section.section--image-scroller .section__grid .section__image-wrapper::before { transition: background-color 300ms linear, transform 300ms linear; } .section.section--image-scroller .section__grid .section__image-wrapper, .section.section--image-scroller .section__grid .section__image-wrapper .section__media, .section.section--image-scroller .section__grid .section__image-wrapper .section__image { width: 44rem; height: 56.2rem; } .section.section--image-scroller .section__grid .section__image-wrapper .section__media { position: absolute; transform: rotate(var(--rotate-left-sm)); transition: transform var(--animation) linear; } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=left-sm] .section__media { transform: rotate(var(--rotate-left-sm)); } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=right-sm] .section__media { transform: rotate(var(--rotate-right-sm)); } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=left-md] .section__media { transform: rotate(var(--rotate-left-md)); } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=right-md] .section__media { transform: rotate(var(--rotate-right-md)); } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=left-lg] .section__media { transform: rotate(var(--rotate-left-lg)); } .section.section--image-scroller .section__grid .section__image-wrapper[data-image-rotation=right-lg] .section__media { transform: rotate(var(--rotate-right-lg)); } .section.section--image-scroller .section__image { background-size: cover; background-position: center center; z-index: 2; border-radius: var(--border-radius-md); pointer-events: none; user-select: none; transition: all var(--animation) linear; height: 0; opacity: 0; position: absolute; } .section.section--image-scroller .section__image.active { opacity: 1; } @media screen and (max-width: 1280px) { .section--image-scroller .container-full { padding-top: 0; padding-bottom: 0; } .section--image-scroller .section__row { min-height: initial; padding: 4rem 0; } .section--image-scroller .section__row:nth-of-type(2n) .section__mobile-image img { transform: rotate(var(--rotate-right-sm)); } .section--image-scroller .section__row:nth-of-type(2n) .section__mobile-image::before { transform: rotate(var(--rotate-left-lg)); } .section--image-scroller .section__mobile-image { position: relative; position: relative; overflow: visible; } .section--image-scroller .section__mobile-image, .section--image-scroller .section__mobile-image img { width: 100%; max-width: 28.8rem; aspect-ratio: 440/562 !important; } .section--image-scroller .section__mobile-image img { position: relative; z-index: 2; border-radius: var(--border-radius-md); transform: rotate(var(--rotate-left-sm)); } .section--image-scroller .section__mobile-image::before { content: ""; position: absolute; display: block; width: 100%; top: -2rem; height: calc(100% + 4rem); transform: rotate(var(--rotate-right-lg)); background-color: var(--banana); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .section--image-scroller .section__mobile-image-wrapper { padding-top: 3.5rem; padding-bottom: 4.5rem; margin-bottom: 2rem; padding-left: 1.3rem; } .section--image-scroller .section__image-wrapper { display: none; } .section--image-scroller .section__spinner { display: none; } .section.section--image-scroller .section__mobile-image-wrapper { display: block; } } .section--features .section__grid { display: flex; height: 55.5rem; } .section--features .feature:nth-of-type(1) { margin-top: auto; margin-bottom: 0; } .section--features .feature:nth-of-type(2) { margin-left: -1rem; } .section--features .feature:nth-of-type(1) .feature__icon, .section--features .feature:nth-of-type(2) .feature__icon, .section--features .feature:nth-of-type(4) .feature__icon { transform: rotate(var(--rotate-right-sm)); } .section--features .feature:nth-of-type(3) { margin-left: 8vmin; padding-top: 3vmin; } .section--features .feature:nth-of-type(3) .feature__icon { transform: rotate(var(--rotate-left-sm)); } .section--features .feature:nth-of-type(4) { margin-top: auto; margin-bottom: 0.4rem; margin-left: auto; } .section--features .section__media { display: flex; justify-content: center; margin-top: -12rem; } .section--features .section__media .section__image img { width: 27rem; height: 60rem; aspect-ratio: 270/600; } .section--features .section__media .section__image { position: relative; } .section--features .section__media .section__image img { z-index: 3; position: relative; } .section--features .section__media .section__image::before { content: ""; z-index: 1; opacity: 0; transition: opacity 200ms linear; position: absolute; display: block; top: 15.3rem; left: -12.1rem; width: 45rem; height: 33.4rem; background-color: var(--light-pink); border-radius: var(--border-radius-md); transform: rotate(var(--rotate-right-lg)); } .section--features .section__media .section__image::after { content: ""; z-index: 1; opacity: 0; transition: opacity 200ms linear; transition-delay: 200ms; position: absolute; display: block; top: 10.2rem; left: -6.5rem; width: 45.3rem; height: 37.7rem; background-color: var(--sky-blue); border-radius: var(--border-radius-md); transform: rotate(var(--rotate-left-sm)); } .section--features .ticker { margin-top: -22.8rem; margin-bottom: max(4.88vw, 3.8rem); position: relative; z-index: 4; } .section--features .ticker + .ticker { display: none; } .section--features.scrolled .section__media .section__image::before { opacity: 0.5; } .section--features.scrolled .section__media .section__image::after { opacity: 0.5; } @media screen and (max-width: 1280px) { .section--features .section__grid { height: max(44.35vw, 34rem); } .section--features .feature { max-width: 24.19vw; } .section--features .feature:nth-of-type(2) { margin-left: -0.81vw; } .section--features .feature:nth-of-type(3) { margin-left: 6.45vw; padding-top: 2.42vw; } .section--features .feature:nth-of-type(4) { margin-bottom: 0.32vw; } .section--features .section__media { display: flex; justify-content: center; margin-top: min(-9.68vw, -9rem); } .section--features .section__media .section__image img { width: max(21.77vw, 16rem); height: auto; } .section--features .section__media .section__image::before { content: ""; top: max(12.34vw, 9.1rem); left: min(-9.76vw, -7.1rem); width: max(36.29vw, 26.7rem); height: max(26.55vw, 21rem); border-radius: 2.02vw; } .section--features .section__media .section__image::after { content: ""; top: max(8.23vw, 6rem); left: min(-5.24vw, -3.8rem); width: max(36.53vw, 26.9rem); height: max(30.4vw, 22.3rem); border-radius: 2.02vw; } .section--features .ticker { margin-top: min(-18.39vw, -12rem); padding: 3.23vw; } } @media screen and (max-width: 767px) { .section--features { overflow: hidden; max-width: 100%; } .section--features .section__grid { height: initial; flex-direction: row; flex-wrap: wrap; gap: 3rem; } .section--features .feature { width: 30rem; max-width: 100%; } .section--features .feature:nth-of-type(2) { margin-left: 0; } .section--features .feature:nth-of-type(3) { margin-left: 0; padding-top: 0; } .section--features .feature:nth-of-type(4) { margin-bottom: 0; margin-left: 0; } .section--features .feature:nth-of-type(2n) { margin-left: auto; } .section--features .section__media { margin-top: 3rem; padding-bottom: 7.3rem; } .section--features .section__media .section__image img { width: 20rem; height: 44.5rem; } .section--features .section__media .section__image::before { width: 36.6rem; height: 28.8rem; border-radius: var(--border-radius-md); left: -10.1rem; top: 10.3rem; } .section--features .section__media .section__image::after { width: 36.9rem; height: 30.7rem; border-radius: var(--border-radius-md); left: -6.8rem; } .section--features .section__ticker-wrapper { margin-top: -14rem; } .section--features .ticker { margin-top: 0; margin-bottom: 0; padding: 4rem 0; } .section--features .ticker + .ticker { display: flex; border-top: 0.4rem solid var(--banana); } } .section--page-links .section__header { text-align: center; margin-bottom: 6rem; } .section--page-links .grid.gap-lg { gap: 0; row-gap: 4rem; } .section--page-links .card .card__media::before { opacity: 0; transition: 200ms linear opacity; } .section--page-links.scrolled .card .card__media::before { opacity: 0.5; } .section--video-feature { overflow: hidden; --overlap-amount: 6rem; } .section--video-feature .section__content { padding: var(--overlap-amount) 0; } .section--video-feature .section__content a { margin-top: 1.5rem; } .section--video-feature[data-slides="1"] .container-full { max-width: 109rem; } .section--video-feature .section__text-wrapper { background-color: var(--banana); border-top-left-radius: var(--border-radius-md); border-bottom-left-radius: var(--border-radius-md); min-height: 38rem; } .section--video-feature .section__media-wrapper { margin-top: calc(var(--overlap-amount) * -1); margin-bottom: calc(var(--overlap-amount) * -1); } .section--video-feature .swiper.swiper--text { padding: 7rem 4rem; } .section--video-feature .swiper.swiper--media { height: 100%; overflow: visible; } .section--video-feature .swiper.swiper--media .section__video { height: 100%; } .section--video-feature .swiper.swiper--media .embed-container { width: 100%; height: 100%; } .section--video-feature .swiper.swiper--media .swiper-slide { border-radius: var(--border-radius-md); overflow: hidden; } .section--video-feature .swiper.swiper--media .swiper-slide video { pointer-events: none; } .section--video-feature .swiper.swiper--media .swiper-slide picture, .section--video-feature .swiper.swiper--media .swiper-slide video { user-select: none; } .section--video-feature .swiper-pagination { text-align: left; position: initial; margin-top: 3rem; } .section--video-feature .section__preview, .section--video-feature video, .section--video-feature picture, .section--video-feature picture > img { position: absolute; height: 100%; width: 100%; } .section--video-feature picture img, .section--video-feature video { object-fit: cover; } .section--video-feature .section__video { cursor: pointer; } .section--video-feature .section__video::after { transition: opacity 200ms linear; content: ""; width: 8rem; height: 8rem; display: block; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4MyA4MyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmVkYzQ4OwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgb3BhY2l0eTogLjg7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJSZWN0YW5nbGUtQ29weS0yIiBjbGFzcz0ic3QwIiBkPSJNMjcuNzc2Ny44NzI0bDI5Ljk4MTcsMS4wNDdjMTMuNzk4Ny40ODE5LDI0LjU5NDEsMTIuMDU4NiwyNC4xMTIzLDI1Ljg1NzNsLTEuMDQ3LDI5Ljk4MTdjLS40ODE5LDEzLjc5ODctMTIuMDU4NSwyNC41OTQxLTI1Ljg1NzMsMjQuMTEyM2wtMjkuOTgxNy0xLjA0N2MtMTMuNzk4Ny0uNDgxOS0yNC41OTQxLTEyLjA1ODUtMjQuMTEyMy0yNS44NTczbDEuMDQ3LTI5Ljk4MTdDMi40MDEzLDExLjE4NiwxMy45NzguMzkwNiwyNy43NzY3Ljg3MjRaIi8+CiAgPHBhdGggaWQ9IlBhdGgiIGNsYXNzPSJzdDEiIGQ9Ik02My40NzM0LDQxLjU4NjhjLTQuMTA5Ni0zLjQ1MjItOC4yMTkzLTYuOTA0My0xMi4zMjg5LTEwLjM1NjUtMy43NzE5LTMuMTY4NC03LjQ5MzQtNi4zNzQyLTEyLjA4MjgtOC4zMDEzLTEuMTQzOC0uNDgwMy0yLjEzMzUtLjEzMDItMi43NzYyLjU2NzktLjk5ODcuNDA5Mi0xLjgxMjgsMS4zNDI5LTEuNzU0OCwyLjY5NTQuNDQ0OSwxMC4zNzYyLTIuOTIzNSwyMC45ODc2LTQuODI1MiwzMS4wOTI0LS43ODMsNC4xNjA3LDIuMjg5NSw3LjE4MTYsNi40MjY5LDUuOTI3LDQuNTk5OC0xLjM5NDcsOS4xMDk5LTMuOTIwOCwxMy40MjM0LTYuMDI2Niw0LjE2ODEtMi4wMzQ5LDguMjI0Mi00LjI4OTYsMTIuMTM2Mi02Ljc4MTksMS42NDE1LTEuMDQ1OCwzLjcyODgtMi4wOTY4LDQuMTkxNS00LjE1MzMuNDc0Mi0yLjEwNzUtLjkyNzMtMy40MTc2LTIuNDEwMS00LjY2MzJaIi8+CiAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0ic3QyIiBkPSJNNTguODQ1NSwzNC43MTQ3Yy01LjA0ODQtMy4yODI0LTEwLjA5NjktNi41NjQ4LTE1LjE0NTQtOS44NDcxLTQuNjMzNS0zLjAxMjYtOS4yMTYyLTYuMDczNy0xNC41OTAzLTcuNTkyMS0xLjMzOTQtLjM3ODQtMi4zOTM3LjE0NjgtMy4wMTM5LDEuMDEyLTEuMDU2Mi41OTIyLTEuODM1MiwxLjc0MzMtMS41ODU2LDMuMjQxNSwxLjkxNDIsMTEuNDkzOS0uMzg1OSwyMy43NzEzLTEuMTIyLDM1LjI4MzktLjMwMyw0Ljc0MDMsMy41MzE1LDcuNjg0Myw3Ljk2NzQsNS43MjE1LDQuOTMxNS0yLjE4MjEsOS42MDg2LTUuNjExNywxNC4xMjQxLTguNTQ2Niw0LjM2MzQtMi44MzU5LDguNTcxOC01LjkwMTQsMTIuNTg3NC05LjIxMTcsMS42ODQ5LTEuMzg5LDMuODY1Ni0yLjg0NDgsNC4wOTk4LTUuMTk4Mi4yMzk5LTIuNDExOC0xLjUtMy42NzktMy4zMjE1LTQuODYzM1pNNDEuNjI4Miw0OS41MDI2Yy0zLjU2NzIsMi4zMTg1LTcuMjE3OCw0LjUwNzgtMTAuODY0NSw2LjY5NzktLjcyNDIuNDM0OS0xLjYwNDIuNTY0NS0xLjUzNTEsMS40MTg3LS4wODE5LTEuMDEyMS4xMDkyLTIuMTA4Ny4xNzg3LTMuMTE3Ny4xNTk1LTIuMzE0Mi4zNTgyLTQuNjI1OS41NTAxLTYuOTM3Ni42NDE3LTcuNzMwOSwxLjQyOS0xNS43MTc5LjcyMjgtMjMuNTA5MiwyLjg3MzMsMS4yMzgxLDUuNTE1MiwyLjkyNjMsOC4xNjY0LDQuNjQ2NywzLjc4ODUsMi40NTg1LDcuNTcyNyw0LjkyMzUsMTEuMzU5LDcuMzg1MywxLjcxLDEuMTExOCwzLjQyLDIuMjIzNiw1LjEzLDMuMzM1NC0uNzMzMS42NDA3LTEuNDgzMSwxLjI2Mi0yLjIzNDIsMS44ODEyLTMuNjI3NiwyLjk5MDUtNy41MzUsNS42Mzk1LTExLjQ3MzIsOC4xOTkyWiIvPgo8L3N2Zz4=); background-size: 8rem 8rem; border-radius: var(--border-radius-md); z-index: 3; pointer-events: initial; } .section--video-feature .section__video::after:hover { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA4MyA4MyI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmVkYzQ4OwogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgICBpc29sYXRpb246IGlzb2xhdGU7CiAgICAgICAgb3BhY2l0eTogLjg7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxwYXRoIGlkPSJSZWN0YW5nbGUtQ29weS0yIiBjbGFzcz0ic3QwIiBkPSJNMjcuNzc2Ny44NzI0bDI5Ljk4MTcsMS4wNDdjMTMuNzk4Ny40ODE5LDI0LjU5NDEsMTIuMDU4NiwyNC4xMTIzLDI1Ljg1NzNsLTEuMDQ3LDI5Ljk4MTdjLS40ODE5LDEzLjc5ODctMTIuMDU4NSwyNC41OTQxLTI1Ljg1NzMsMjQuMTEyM2wtMjkuOTgxNy0xLjA0N2MtMTMuNzk4Ny0uNDgxOS0yNC41OTQxLTEyLjA1ODUtMjQuMTEyMy0yNS44NTczbDEuMDQ3LTI5Ljk4MTdDMi40MDEzLDExLjE4NiwxMy45NzguMzkwNiwyNy43NzY3Ljg3MjRaIi8+CiAgPHBhdGggaWQ9IlBhdGgiIGNsYXNzPSJzdDEiIGQ9Ik02My40NzM0LDQxLjU4NjhjLTQuMTA5Ni0zLjQ1MjItOC4yMTkzLTYuOTA0My0xMi4zMjg5LTEwLjM1NjUtMy43NzE5LTMuMTY4NC03LjQ5MzQtNi4zNzQyLTEyLjA4MjgtOC4zMDEzLTEuMTQzOC0uNDgwMy0yLjEzMzUtLjEzMDItMi43NzYyLjU2NzktLjk5ODcuNDA5Mi0xLjgxMjgsMS4zNDI5LTEuNzU0OCwyLjY5NTQuNDQ0OSwxMC4zNzYyLTIuOTIzNSwyMC45ODc2LTQuODI1MiwzMS4wOTI0LS43ODMsNC4xNjA3LDIuMjg5NSw3LjE4MTYsNi40MjY5LDUuOTI3LDQuNTk5OC0xLjM5NDcsOS4xMDk5LTMuOTIwOCwxMy40MjM0LTYuMDI2Niw0LjE2ODEtMi4wMzQ5LDguMjI0Mi00LjI4OTYsMTIuMTM2Mi02Ljc4MTksMS42NDE1LTEuMDQ1OCwzLjcyODgtMi4wOTY4LDQuMTkxNS00LjE1MzMuNDc0Mi0yLjEwNzUtLjkyNzMtMy40MTc2LTIuNDEwMS00LjY2MzJaIi8+CiAgPHBhdGggaWQ9IlNoYXBlIiBjbGFzcz0ic3QyIiBkPSJNNTguODQ1NSwzNC43MTQ3Yy01LjA0ODQtMy4yODI0LTEwLjA5NjktNi41NjQ4LTE1LjE0NTQtOS44NDcxLTQuNjMzNS0zLjAxMjYtOS4yMTYyLTYuMDczNy0xNC41OTAzLTcuNTkyMS0xLjMzOTQtLjM3ODQtMi4zOTM3LjE0NjgtMy4wMTM5LDEuMDEyLTEuMDU2Mi41OTIyLTEuODM1MiwxLjc0MzMtMS41ODU2LDMuMjQxNSwxLjkxNDIsMTEuNDkzOS0uMzg1OSwyMy43NzEzLTEuMTIyLDM1LjI4MzktLjMwMyw0Ljc0MDMsMy41MzE1LDcuNjg0Myw3Ljk2NzQsNS43MjE1LDQuOTMxNS0yLjE4MjEsOS42MDg2LTUuNjExNywxNC4xMjQxLTguNTQ2Niw0LjM2MzQtMi44MzU5LDguNTcxOC01LjkwMTQsMTIuNTg3NC05LjIxMTcsMS42ODQ5LTEuMzg5LDMuODY1Ni0yLjg0NDgsNC4wOTk4LTUuMTk4Mi4yMzk5LTIuNDExOC0xLjUtMy42NzktMy4zMjE1LTQuODYzM1pNNDEuNjI4Miw0OS41MDI2Yy0zLjU2NzIsMi4zMTg1LTcuMjE3OCw0LjUwNzgtMTAuODY0NSw2LjY5NzktLjcyNDIuNDM0OS0xLjYwNDIuNTY0NS0xLjUzNTEsMS40MTg3LS4wODE5LTEuMDEyMS4xMDkyLTIuMTA4Ny4xNzg3LTMuMTE3Ny4xNTk1LTIuMzE0Mi4zNTgyLTQuNjI1OS41NTAxLTYuOTM3Ni42NDE3LTcuNzMwOSwxLjQyOS0xNS43MTc5LjcyMjgtMjMuNTA5MiwyLjg3MzMsMS4yMzgxLDUuNTE1MiwyLjkyNjMsOC4xNjY0LDQuNjQ2NywzLjc4ODUsMi40NTg1LDcuNTcyNyw0LjkyMzUsMTEuMzU5LDcuMzg1MywxLjcxLDEuMTExOCwzLjQyLDIuMjIzNiw1LjEzLDMuMzM1NC0uNzMzMS42NDA3LTEuNDgzMSwxLjI2Mi0yLjIzNDIsMS44ODEyLTMuNjI3NiwyLjk5MDUtNy41MzUsNS42Mzk1LTExLjQ3MzIsOC4xOTkyWiIvPgo8L3N2Zz4=); background-size: 8rem 8rem; } .section--video-feature .section__media { position: relative; z-index: 1; } @media screen and (max-width: 991px) { .section--video-feature { --overflow-amount: 0; } .section--video-feature .section__text-wrapper { border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .section--video-feature .section__content { padding: 0; } .section--video-feature .embed-container { padding-bottom: 0; line-height: 0; } .section--video-feature[data-slides="1"] .section__text-wrapper { min-height: 20rem; } .section--video-feature[data-slides="1"] .section__media-wrapper { max-height: initial; } .section--video-feature[data-slides="1"] .section__video { max-height: initial; } .section--video-feature[data-slides="1"] .section__video picture, .section--video-feature[data-slides="1"] .section__video img, .section--video-feature[data-slides="1"] .section__video video { width: 100%; height: auto; position: initial; } .section--video-feature .section__media-wrapper { margin: -2rem 0 0; max-height: 43rem; } } .section--call-to-action .container-full { padding-top: 3rem; padding-bottom: 5rem; } .section--call-to-action .container-full .section__bg { position: relative; } .section--call-to-action .container-full .section__bg::before { top: 0; left: -3rem; box-shadow: var(--shadow); } .section--call-to-action .container-full .section__bg::after { box-shadow: var(--shadow); top: 3.2rem; right: -2rem; } .section--call-to-action .section__wrapper { border-radius: var(--border-radius-md); background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; padding: 10rem 2rem; position: relative; z-index: 3; } .section--call-to-action .section__content { border-radius: var(--border-radius-md); width: 100%; max-width: 61rem; min-height: 27.5rem; display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 4rem; background-color: rgba(153, 117, 90, 0.4); box-shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); color: white; backdrop-filter: blur(1.5rem); } .section--call-to-action .section__title { color: white; text-transform: initial; } .section--call-to-action .section__actions { margin-top: 2.5rem; } .section--call-to-action form.section__actions { display: flex; gap: 2rem; } .section--call-to-action form.section__actions input[type=email] { flex: 0 100%; } .section--call-to-action form.section__actions .btn { flex: 11.5rem; } @media screen and (max-width: 1200px) { .section--call-to-action form.section__actions { flex-direction: column; } .section--call-to-action form.section__actions .btn { flex: initial; } } @media screen and (max-width: 991px) { .section--call-to-action .section__wrapper { padding: 6rem 3rem; border-radius: 0; } .section--call-to-action .section__bg::before { height: calc(100% + 6rem); top: -2rem; } .section--call-to-action .section__bg::after { height: calc(100% + 6rem); top: -2rem; right: 0; } .section--call-to-action .container-full { padding: 3rem 0 5rem; } } .section--media-and-copy { --overhang: -8rem; } .section--media-and-copy .section__grid { margin-left: 0; margin-right: 0; } .section--media-and-copy .section__grid .section__content { background-color: var(--wafer); position: relative; z-index: 2; padding: 4rem; border-radius: var(--border-radius-md); box-sizing: content-box; } .section--media-and-copy .section__grid .section__content.order-md-1 { margin-right: var(--overhang); } .section--media-and-copy .section__grid .section__content.order-md-2 { margin-left: var(--overhang); } .section--media-and-copy .section__grid .section__description ol { padding: 0 0 0 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .section--media-and-copy .section__grid .section__description ol li { padding: 0 0 0 0.5rem; } .section--media-and-copy .section__grid .section__description img, .section--media-and-copy .section__grid .section__description video, .section--media-and-copy .section__grid .section__description .wp-block-embed-youtube { border-radius: var(--border-radius-md); margin: 3rem 0; } .section--media-and-copy .section__grid .section__description blockquote { position: relative; padding: 2rem 0 2rem 2rem; } .section--media-and-copy .section__grid .section__description blockquote::before { content: ""; height: 100%; position: absolute; display: flex; width: 0.3rem; background-color: var(--bubblegum); left: 0; top: 0; } .section--media-and-copy .section__grid .section__description table { border-color: white; } .section--media-and-copy .section__grid .section__description .wp-block-embed-youtube { border-radius: var(--border-radius-md); overflow: hidden; } .section--media-and-copy .section__grid .section__description .wp-block-embed-youtube iframe { width: 100%; } .section--media-and-copy .section__grid .section__description li { font: var(--paragraph-font); } .section--media-and-copy .section__grid .section__description ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .section--media-and-copy .section__grid .section__description ul li { padding: 0 0 0 1.5rem; position: relative; } .section--media-and-copy .section__grid .section__description ul li::before { content: "•"; position: absolute; left: 0; top: 0; color: inherit; } .section--media-and-copy .section__grid .section__description a:not([class]) { color: #47AED3; font-weight: 500; } .section--media-and-copy .section__grid .section__description a:not([class]):hover { text-decoration: underline; } .section--media-and-copy .section__grid .section__actions { margin-top: 2.5rem; } .section--media-and-copy .section__grid .section__media { position: relative; z-index: 1; max-width: 71.5rem; padding: 0; } .section--media-and-copy .section__grid .section__media.order-md-1.rotation--md img, .section--media-and-copy .section__grid .section__media.order-md-1.rotation--md video { transform: rotate(var(--rotate-left-lg)); } .section--media-and-copy .section__grid .section__media.order-md-1.rotation--sm img, .section--media-and-copy .section__grid .section__media.order-md-1.rotation--sm video { transform: rotate(var(--rotate-right-sm)); } .section--media-and-copy .section__grid .section__media.order-md-2.rotation--md img, .section--media-and-copy .section__grid .section__media.order-md-2.rotation--md video { transform: rotate(var(--rotate-right-lg)); } .section--media-and-copy .section__grid .section__media.order-md-2.rotation--sm img, .section--media-and-copy .section__grid .section__media.order-md-2.rotation--sm video { transform: rotate(var(--rotate-left-sm)); } .section--media-and-copy .section__grid .section__media .embed-container { overflow: visible; } .section--media-and-copy .section__grid .section__media .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .section--media-and-copy .section__grid .section__media img { position: relative; z-index: 2; } .section--media-and-copy .section__grid .section__media img, .section--media-and-copy .section__grid .section__media video { border-radius: var(--border-radius-md); } .section--media-and-copy .section__form:not(:first-child) { margin-top: 2.5rem; } @media screen and (max-width: 992px) { .section--media-and-copy .section__grid .section__media { max-width: 66.4rem; } .section--media-and-copy .section__grid .section__content { padding: 0; margin-top: 4rem; } .section--media-and-copy .section__grid .section__content.order-md-1 { margin-right: 0; } .section--media-and-copy .section__grid .section__content.order-md-2 { margin-left: 0; } } .section--links-min { overflow: hidden; } .section--links-min .section__header { text-align: center; margin-bottom: 5rem; } .section--links-min .section__content { padding: 5rem 10rem; border-radius: var(--border-radius-md); background: rgba(255, 245, 233, 0.6) url(/wp-content/themes/class/dist/images/waffle.jpg) repeat; background-blend-mode: lighten; background-size: 15rem; } .section--links-min .section__links { display: flex; justify-content: center; align-items: flex-start; gap: 5rem; flex-wrap: wrap; } .section--links-min .section__links a:hover { text-decoration: none; } .section--links-min .section__links .section__col { flex: 0 calc(25% - 3.8rem); } @media screen and (max-width: 1199px) { .section.section--links-min .container-full { padding: 0; } .section.section--links-min .section__header { margin-bottom: 3rem; } .section.section--links-min .section__content { padding: 4rem 2rem; border-radius: 0; } .section.section--links-min .section__links { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 -2rem; padding: 2rem; gap: 2rem; } .section.section--links-min .section__col { flex: initial; width: 24.2rem; min-width: 24.2rem; } } .section--timeline { overflow: hidden; } .section--timeline .container { position: relative; } @media screen and (max-width: 991px) { .section.section--timeline .container { max-width: 59.4rem; } } .section--flavour { overflow: hidden; } .section--flavour .categories { margin-top: 4rem; } .section--flavour .section__header { text-align: center; } .section--flavour .section__cards { position: relative; min-height: 25rem; margin-top: 7.5rem; } @supports not (.section--flavour .section__cards: has) { .section--flavour .section__cards { padding-bottom: 7.5rem; } } .section--flavour .section__cards:has(.product) { padding-bottom: 7.5rem; } .section--flavour [class*=col-] { min-height: 32.5rem; position: relative; } @media screen and (max-width: 767px) { .section--flavour [class*=col-] { position: relative; } .section--flavour [class*=col-] .product--active { left: 0; } .section--flavour [class*=col-]:nth-of-type(2n) .product--active { left: initial; right: 0; } } .section--image-swiper { max-width: 100%; overflow: hidden; } .section--image-swiper .swiper--images { overflow: visible; } .section--image-swiper .swiper--images .swiper-slide { user-select: none; } .section--image-swiper .swiper--images .swiper-slide picture img { border-radius: var(--border-radius-md); } .section--image-swiper .swiper--images .swiper-slide picture::before { content: none; } .section--image-swiper .swiper--images .swiper-slide-active picture img { transform: rotate(var(--rotate-left-sm)); } .section--image-swiper .swiper--images .swiper-slide-active picture::before { content: ""; } .section--image-swiper .swiper--thumbs { display: none; overflow: visible; margin-top: 3.5rem; } .section--image-swiper .swiper--thumbs .swiper-slide { width: 20rem; user-select: none; } .section--image-swiper .swiper--thumbs .swiper-slide picture img { border-radius: var(--border-radius-md); } .section--image-swiper .swiper--images .swiper-slide { width: 38.4rem; height: 36rem; display: flex; align-items: center; justify-content: flex-start; } .section--image-swiper .swiper--images .swiper-slide picture { transform: translateX(-7.7rem); transition: transform 200ms ease-out; transform-origin: center center; } .section--image-swiper .swiper--images .swiper-slide picture img { transition: transform 200ms ease-out; transform-origin: center center; } .section--image-swiper .swiper--images .swiper-slide picture::before { opacity: 0; transition: opacity 200ms ease-out; } .section--image-swiper .swiper--images .swiper-slide-active picture { transform: translateX(0) scale(1.4); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=left-sm] img { transform: rotate(var(--rotate-left-sm)); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=right-sm] img { transform: rotate(var(--rotate-right-sm)); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=left-md] img { transform: rotate(var(--rotate-left-md)); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=right-md] img { transform: rotate(var(--rotate-right-md)); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=left-lg] img { transform: rotate(var(--rotate-left-lg)); } .section--image-swiper .swiper--images .swiper-slide-active picture[data-image-rotate=right-lg] img { transform: rotate(var(--rotate-right-lg)); } .section--image-swiper .swiper--images .swiper-slide-active picture::before { opacity: 1; } .section--image-swiper .swiper--images .swiper-slide-active ~ .swiper-slide picture { transform: translateX(7.7rem); } @media screen and (max-width: 991px) { .section--image-swiper .swiper--images { padding: 4rem 0 5.5rem; } .section--image-swiper .swiper--images .swiper-wrapper { padding-bottom: 15rem; } .section--image-swiper .swiper--images .swiper-slide { width: 20rem; height: 14.5rem; } .section--image-swiper .swiper--images .swiper-slide picture { transform: translateX(12.9rem) translateY(20.8rem); } .section--image-swiper .swiper--images .swiper-slide-active picture { transform: translateX(0) translateY(0) scale(1.62); } .section--image-swiper .swiper--images .swiper-slide-active ~ .swiper-slide picture { transform: translateX(-12.9rem) translateY(20.8rem); } } .section--faqs { overflow: hidden; } .section--faqs .section__header { text-align: center; margin-bottom: 5rem; } .section--faqs .section__title { text-transform: initial; } .section--faqs .toggle { margin-bottom: 1rem; } @media screen and (max-width: 991px) { .section--faqs .section__header { margin-bottom: 3rem; } .section--faqs .toggle .toggle__list { box-shadow: var(--shadow); } } .section--blog-feature { overflow: hidden; } .section--blog-feature .swiper.swiper--post-cards { overflow: visible; margin-top: 5rem; } .section--blog-feature .swiper.swiper--post-cards .swiper-slide { width: 28.8rem; } .section--blog-feature .section__header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 5rem; } .section--blog-feature .section__title { text-transform: initial; } @media screen and (max-width: 767px) { .section--blog-feature .section__header { margin-bottom: 3rem; } } .section--post-swiper { overflow: hidden; } .section--post-swiper .swiper.swiper--post-cards { overflow: visible; } .section--post-swiper .swiper.swiper--post-cards .swiper-slide { width: 28.8rem; } .section--post-swiper .section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem; } .section--post-swiper .section__header .section__title:only-child { width: 100%; display: block; text-align: center; } .section--post-swiper .section__title { margin-bottom: 0; } .section--post-swiper .section__mobile { margin-top: 3rem; justify-content: center; } @media screen and (max-width: 767px) { .section--post-swiper .section__header { justify-content: center; flex-direction: column; gap: 1.5rem; } .section--post-swiper .section__mobile { display: flex; } .section--post-swiper .section__title { text-align: center; } } .header--media-header { height: 64rem; padding: 0; position: relative; overflow: hidden; } .header--media-header.header--video, .header--media-header.header--video .header__title, .header--media-header.header--video .header__content { color: white; } .header--media-header .header__background { position: absolute; z-index: 1; width: 100%; height: 100%; } .header--media-header .header__background img { height: 64rem; } .header--media-header .header__background .embed-container { width: 100%; height: 64rem; padding-bottom: 0; } .header--media-header .header__background .embed-container video, .header--media-header .header__background .embed-container image { width: 100%; height: 100%; object-fit: cover; } .header--media-header .container-full { position: relative; z-index: 2; } .header--media-header .header__content { padding: 24rem 0; } .header--media-header .header__title { display: block; width: 61rem; max-width: 100%; } @media screen and (max-width: 767px) { .header--media-header { height: auto; } .header--media-header .header__background img { height: auto; } .header--media-header .header__content { padding: 12.5rem 0 35rem; } } .section--products { overflow: visible; } .section--products .container { position: relative; } .section--products [class*=col-] { position: relative; line-height: 0; } .section--products .section__header { text-align: center; margin-bottom: 7.5rem; } .section--products .section__actions { margin-top: 7.5rem; display: flex; justify-content: center; } @media screen and (max-width: 767px) { .section--products .section__actions { margin-top: 4rem; } .section--products .section__header { margin-bottom: 4rem; } .section--products [class*=col-] { position: relative; } .section--products [class*=col-] .product--active { left: 0; } .section--products [class*=col-]:nth-of-type(2n) .product--active { left: initial; right: 0; } } .section--recipe .section__method { padding-top: 2.5rem; } .section--recipe .section__method-title { font-weight: 900; text-transform: uppercase; } .block--icon-grid { padding: 3rem 0; } .block--icon-grid .block__icon { width: 26rem; max-width: 100%; height: auto; margin: 0 auto; } .block--icon-grid .block__icon img { border-radius: 0; margin: 0 0 1.5rem; } .block--icon-grid .block__copy { text-align: center; } .block--icon-grid .block__action { display: flex; justify-content: center; margin-top: 1.5rem; } .block--icon-grid .btn:hover { text-decoration: none; } .page-template-terms .header, .error404 .header { position: relative; overflow: hidden; padding: 18.8rem 0 9rem; } .page-template-terms .header .header__content, .error404 .header .header__content { position: relative; z-index: 2; text-align: center; margin: 0 auto; } .error404 .wysiwyg { text-align: center; } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; margin-bottom: 0.4em; } :root { --heading-one-font-size: 4.2rem; --heading-one-line-height: 4.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-one-font-size: 5rem; --heading-one-line-height: 5.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } } :root { --heading-one-font: var(--heading-one-font-style) var(--heading-one-font-weight) var(--heading-one-font-size) / var(--heading-one-line-height) var(--heading-font-family); } :root { --heading-two-font-size: 3.2rem; --heading-two-line-height: 3.4rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-two-font-size: 4.2rem; --heading-two-line-height: 4.5rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } } :root { --heading-two-font: var(--heading-two-font-style) var(--heading-two-font-weight) var(--heading-two-font-size)/var(--heading-two-line-height) var(--heading-font-family); } :root { --heading-three-font-size: 2.8rem; --heading-three-line-height: 3rem; --heading-three-letter-spacing: 1; --heading-three-font-style: normal; --heading-three-font-weight: bold; --heading-three-text-transform: initial; } :root { --heading-three-font: var(--heading-three-font-style) var(--heading-three-font-weight) var(--heading-three-font-size) / var(--heading-three-line-height) var(--heading-font-family); } :root { --heading-four-font-size: 2rem; --heading-four-line-height: 2.1rem; --heading-four-letter-spacing: 1; --heading-four-font-style: normal; --heading-four-font-weight: bold; --heading-four-text-transform: initial; } :root { --heading-four-font: var(--heading-four-font-style) var(--heading-four-font-weight) var(--heading-four-font-size) / var(--heading-four-line-height) var(--heading-font-family); } :root { --heading-five-font-size: 1.8rem; --heading-five-line-height: 2.5rem; --heading-five-letter-spacing: 1; --heading-five-font-style: normal; --heading-five-font-weight: bold; --heading-five-text-transform: normal; } :root { --heading-five-font: var(--heading-five-font-style) var(--heading-five-font-weight) var(--heading-five-font-size) / var(--heading-five-line-height) var(--heading-font-family); } :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } @media screen and (min-width: 768px) { :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } } :root { --heading-six-font: var(--heading-six-font-style) var(--heading-six-font-weight) var(--heading-six-font-size) / var(--heading-six-line-height) var(--font-family); } :root { --paragraph-font-size: 1.8rem; --paragraph-line-height: 2.5rem; --paragraph-letter-spacing: 1; --paragraph-font-style: normal; --paragraph-font-weight: normal; --paragraph-text-transform: normal; } :root { --paragraph-font: var(--paragraph-font-style) var(--paragraph-font-weight) var(--paragraph-font-size) / var(--paragraph-line-height) var(--font-family); } :root { --small-paragraph-font-size: 1.4rem; --small-paragraph-line-height: 1.5rem; --small-paragraph-letter-spacing: 0.003rem; --small-paragraph-font-style: normal; --small-paragraph-font-weight: bold; --small-paragraph-text-transform: normal; } :root { --small-paragraph-font: var(--small-paragraph-font-style) var(--small-paragraph-font-weight) var(--small-paragraph-font-size) / var(--small-paragraph-line-height) var(--heading-font-family); } :root { --x-small-paragraph-font-size: 1.4rem; --x-small-paragraph-line-height: 1.7rem; --x-small-paragraph-letter-spacing: 0; --x-small-paragraph-font-style: normal; --x-small-paragraph-font-weight: normal; --x-small-paragraph-text-transform: normal; } :root { --x-small-paragraph-font: var(--x-small-paragraph-font-style) var(--x-small-paragraph-font-weight) var(--x-small-paragraph-font-size) / var(--x-small-paragraph-line-height) var(--font-family); } .btn, input[type=submit] { border-radius: var(--border-radius-xs); background-color: var(--primary-btn-bg); color: var(--primary-btn-text); border: 0.1rem solid var(--primary-btn-border); transition: background-color 200ms linear, transform 200ms linear; color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; padding: 1.2rem 1.5rem; text-transform: uppercase; font-weight: 900; cursor: pointer; display: inline-block; } .btn:hover, input[type=submit]:hover { background-color: var(--primary-btn-hover-bg); border-color: var(--primary-btn-hover-border); color: var(--primary-btn-hover-text); text-decoration: none; } .btn.btn--yellow, input[type=submit].btn--yellow { border-radius: var(--border-radius-xs); background-color: var(--primary-btn-bg); color: var(--primary-btn-text); } .btn.btn--yellow:hover, input[type=submit].btn--yellow:hover { background-color: var(--primary-btn-hover-bg); border-color: var(--primary-btn-hover-border); color: var(--primary-btn-hover-text); } .btn.btn--secondary, .btn.btn--blue, input[type=submit].btn--secondary, input[type=submit].btn--blue { background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text); border: 0.1rem solid var(--secondary-btn-border); } .btn.btn--secondary:hover, .btn.btn--blue:hover, input[type=submit].btn--secondary:hover, input[type=submit].btn--blue:hover { background-color: var(--secondary-btn-hover-bg); border-color: var(--secondary-btn-hover-border); color: var(--secondary-btn-hover-text); } .btn.btn--tertiary, .btn.btn--beige, input[type=submit].btn--tertiary, input[type=submit].btn--beige { background-color: var(--tertiary-btn-bg); color: var(--tertiary-btn-text); border: 0.1rem solid var(--tertiary-btn-border); } .btn.btn--tertiary:hover, .btn.btn--beige:hover, input[type=submit].btn--tertiary:hover, input[type=submit].btn--beige:hover { background-color: var(--tertiary-btn-hover-bg); border-color: var(--tertiary-btn-hover-border); color: var(--tertiary-btn-hover-text); } .btn.btn--green, input[type=submit].btn--green { background-color: var(--green-btn-bg); color: var(--green-btn-text); border: 0.1rem solid var(--green-btn-border); } .btn.btn--green:hover, input[type=submit].btn--green:hover { background-color: var(--green-btn-hover-bg); border-color: var(--green-btn-hover-border); color: var(--green-btn-hover-text); } .btn.btn--pink, input[type=submit].btn--pink { background-color: var(--pink-btn-bg); color: var(--pink-btn-text); border: 0.1rem solid var(--pink-btn-border); } .btn.btn--pink:hover, input[type=submit].btn--pink:hover { background-color: var(--pink-btn-hover-bg); border-color: var(--pink-btn-hover-border); color: var(--pink-btn-hover-text); } .btn.btn--purple, input[type=submit].btn--purple { background-color: var(--purple-btn-bg); color: var(--purple-btn-text); border: 0.1rem solid var(--purple-btn-border); } .btn.btn--purple:hover, input[type=submit].btn--purple:hover { background-color: var(--purple-btn-hover-bg); border-color: var(--purple-btn-hover-border); color: var(--purple-btn-hover-text); } .btn.btn--left:hover, input[type=submit].btn--left:hover { transform: rotate(var(--rotate-left-sm)); } .btn.btn--right:hover, input[type=submit].btn--right:hover { transform: rotate(var(--rotate-right-sm)); } input[type=submit]:hover { transform: rotate(var(--rotate-right-sm)); } .clear { border: none; background-color: transparent; padding: 0; margin: 0; } #footer { position: relative; padding: 8rem 0 5rem; overflow: hidden; } #footer .container-full { max-width: 134rem; background-color: white; padding: 4.3rem 5rem; border-radius: var(--border-radius-md); box-shadow: 0 8px 2rem 0 rgba(34, 17, 80, 0.1); position: relative; z-index: 2; } #footer::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 17.8rem; z-index: 1; background: url(/wp-content/themes/class/dist/images/waffle.jpg) repeat; background-size: 15rem; } #footer .footer__header { display: flex; justify-content: flex-start; align-items: center; } #footer .footer__header:has(.socials), #footer .footer__header:has(#footer-legals) { justify-content: space-between; } @supports not (#footer .footer__header: has) { #footer .footer__header { justify-content: space-between; } } #footer #footer-copyright { display: flex; flex-direction: column; align-items: center; gap: 2rem; } #footer #footer-logo img { width: 25.3rem; aspect-ratio: 253/54; } #footer #footer__nav, #footer #footer__legals { flex-wrap: wrap; gap: 0.5rem 3rem; } #footer #footer__nav a:hover, #footer #footer__legals a:hover { color: #47AED3; } #footer #footer__nav { justify-content: center; } #footer #footer-copyright { margin-top: 4rem; font: var(--small-paragraph-font); color: rgba(87, 81, 104, 0.6); } #footer .nav { margin-top: 2rem; } #footer .nav .menu-item { font: var(--heading-five-font); } #footer .footer__icons.list.list--inline { gap: 2rem; } #footer .footer__list { display: flex; gap: 2rem 4rem; } @media screen and (max-width: 1340px) { #footer { padding-left: 2rem; padding-right: 2rem; } #footer #footer-copyright { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1.5rem; } } @media screen and (max-width: 768px) { #footer .container-full { padding: 2rem; } #footer .footer__header { align-items: center; } #footer .footer__header, #footer #footer-copyright { flex-direction: column; justify-content: flex-start; align-items: center; gap: 2.5rem; } #footer #footer__nav { flex-direction: column; gap: 1.5rem; } #footer #footer__nav li { display: block; width: 100%; text-align: center; } #footer #footer-copyright { text-align: center; gap: 2rem; } #footer #footer-logo { order: 1; } #footer #footer__legals.list.list--inline { justify-content: center; gap: 1.5rem 2.8rem; } #footer #footer__info { text-align: center; } #footer .footer__list { display: contents; } #footer .footer__icons { order: 3; } #footer .socials { order: 2; } #footer::before { height: 37.1rem; } #footer #footer__nav, #footer #footer__legals { align-items: flex-start; justify-content: flex-start; } } input[type=text], input[type=password], input[type=email], textarea { background-color: white; border-radius: var(--border-radius-xs); box-shadow: 0 10px 40px -20px rgba(34, 17, 80, 0.3); border: none; font: var(--paragraph-font); padding: 1rem 1.5rem; color: var(--text); width: 100%; } input[type=text]::placeholder, input[type=password]::placeholder, input[type=email]::placeholder, textarea::placeholder { color: rgba(87, 81, 104, 0.5); } .nf-field-element textarea { width: 100%; min-height: 5rem; height: 5rem; } .nf-form-fields-required { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } nf-fields-wrap { --padding: 2rem; display: flex; flex-wrap: wrap; gap: var(--padding, 2rem); } nf-fields-wrap nf-field:has(.half) { flex: 0 0 calc(50% - var(--padding) / 2); } nf-fields-wrap .nf-field-container { margin-bottom: 0; } nf-fields-wrap .nf-field-container .nf-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @supports not (nf-fields-wrap: has) { nf-fields-wrap nf-field { flex: 0 0 100%; } } @media screen and (max-width: 767px) { nf-fields-wrap nf-field:has(.half) { flex: 0 0 100%; } } .tooltip { border: none; background-color: rgba(148, 212, 235, 0.5); transform: rotate(var(--rotate-left-sm)); padding: 0.3rem; border-radius: var(--border-radius-sm); cursor: pointer; transition: background-color 200ms linear; } .tooltip:hover { background-color: #94d4eb; } .tooltip svg { width: 2.6rem; height: 2.6rem; } .ReactModalPortal { z-index: 999; position: fixed; } .ReactModalPortal .ReactModal__Overlay { background-color: rgba(255, 245, 233, 0.5); } .ReactModalPortal .modal__copy h1, .ReactModalPortal .modal__copy .h1, .ReactModalPortal .modal__copy h2, .ReactModalPortal .modal__copy .h2, .ReactModalPortal .modal__copy h3, .ReactModalPortal .modal__copy .h3, .ReactModalPortal .modal__copy h4, .ReactModalPortal .modal__copy .h4, .ReactModalPortal .modal__copy h5, .ReactModalPortal .modal__copy .h5, .ReactModalPortal .modal__copy h6, .ReactModalPortal .modal__copy .h6 { text-transform: uppercase; font-weight: 900; } .ReactModalPortal .modal__close { background-color: rgba(148, 212, 235, 0.5); border-radius: var(--border-radius-sm); transform: rotate(var(--rotate-left-sm)); position: initial; top: -1.5rem; right: -1.5rem; width: 3.5rem; height: 3.5rem; min-width: 3.5rem; border: none; padding: 0; cursor: pointer; text-align: center; display: flex; margin-left: auto; align-items: center; justify-content: center; } .ReactModalPortal .modal__close svg { width: 2.6rem; height: 2.6rem; } .ReactModalPortal .modal__close:hover { background-color: #94D4EB; } .ReactModalPortal .ReactModal__Content { box-shadow: var(--shadow); } .ReactModalPortal .modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } .ReactModalPortal .modal__header .h3 { text-transform: uppercase; font-weight: 900; } .ReactModalPortal .nutrition-grid, .ReactModalPortal .modal__copy, .ReactModalPortal .icon-grid { margin-top: 2rem; } .ReactModalPortal .icon-grid { display: flex; justify-content: center; gap: 5rem 2.5rem; flex-wrap: wrap; align-items: center; } .ReactModalPortal .icon-grid .icon-grid__media img { height: 9rem; width: auto; } @media screen and (max-width: 767px) { .ReactModalPortal .ReactModal__Content { padding: 2rem !important; } } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-top: 0; margin-bottom: 0.4em; } :root { --heading-one-font-size: 4.2rem; --heading-one-line-height: 4.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-one-font-size: 5rem; --heading-one-line-height: 5.5rem; --heading-one-letter-spacing: 1; --heading-one-font-style: normal; --heading-one-font-weight: 900; --heading-one-text-transform: initial; } } :root { --heading-one-font: var(--heading-one-font-style) var(--heading-one-font-weight) var(--heading-one-font-size) / var(--heading-one-line-height) var(--heading-font-family); } :root { --heading-two-font-size: 3.2rem; --heading-two-line-height: 3.4rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } @media screen and (min-width: 768px) { :root { --heading-two-font-size: 4.2rem; --heading-two-line-height: 4.5rem; --heading-two-letter-spacing: 1; --heading-two-font-style: normal; --heading-two-font-weight: bold; --heading-two-text-transform: initial; } } :root { --heading-two-font: var(--heading-two-font-style) var(--heading-two-font-weight) var(--heading-two-font-size)/var(--heading-two-line-height) var(--heading-font-family); } :root { --heading-three-font-size: 2.8rem; --heading-three-line-height: 3rem; --heading-three-letter-spacing: 1; --heading-three-font-style: normal; --heading-three-font-weight: bold; --heading-three-text-transform: initial; } :root { --heading-three-font: var(--heading-three-font-style) var(--heading-three-font-weight) var(--heading-three-font-size) / var(--heading-three-line-height) var(--heading-font-family); } :root { --heading-four-font-size: 2rem; --heading-four-line-height: 2.1rem; --heading-four-letter-spacing: 1; --heading-four-font-style: normal; --heading-four-font-weight: bold; --heading-four-text-transform: initial; } :root { --heading-four-font: var(--heading-four-font-style) var(--heading-four-font-weight) var(--heading-four-font-size) / var(--heading-four-line-height) var(--heading-font-family); } :root { --heading-five-font-size: 1.8rem; --heading-five-line-height: 2.5rem; --heading-five-letter-spacing: 1; --heading-five-font-style: normal; --heading-five-font-weight: bold; --heading-five-text-transform: normal; } :root { --heading-five-font: var(--heading-five-font-style) var(--heading-five-font-weight) var(--heading-five-font-size) / var(--heading-five-line-height) var(--heading-font-family); } :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } @media screen and (min-width: 768px) { :root { --heading-six-font-size: 1.6rem; --heading-six-line-height: 1.9rem; --heading-six-letter-spacing: -0.007rem; --heading-six-font-style: normal; --heading-six-font-weight: bold; --heading-six-text-transform: normal; } } :root { --heading-six-font: var(--heading-six-font-style) var(--heading-six-font-weight) var(--heading-six-font-size) / var(--heading-six-line-height) var(--font-family); } :root { --paragraph-font-size: 1.8rem; --paragraph-line-height: 2.5rem; --paragraph-letter-spacing: 1; --paragraph-font-style: normal; --paragraph-font-weight: normal; --paragraph-text-transform: normal; } :root { --paragraph-font: var(--paragraph-font-style) var(--paragraph-font-weight) var(--paragraph-font-size) / var(--paragraph-line-height) var(--font-family); } :root { --small-paragraph-font-size: 1.4rem; --small-paragraph-line-height: 1.5rem; --small-paragraph-letter-spacing: 0.003rem; --small-paragraph-font-style: normal; --small-paragraph-font-weight: bold; --small-paragraph-text-transform: normal; } :root { --small-paragraph-font: var(--small-paragraph-font-style) var(--small-paragraph-font-weight) var(--small-paragraph-font-size) / var(--small-paragraph-line-height) var(--heading-font-family); } :root { --x-small-paragraph-font-size: 1.4rem; --x-small-paragraph-line-height: 1.7rem; --x-small-paragraph-letter-spacing: 0; --x-small-paragraph-font-style: normal; --x-small-paragraph-font-weight: normal; --x-small-paragraph-text-transform: normal; } :root { --x-small-paragraph-font: var(--x-small-paragraph-font-style) var(--x-small-paragraph-font-weight) var(--x-small-paragraph-font-size) / var(--x-small-paragraph-line-height) var(--font-family); } /** Setting list of pills to be used throughout the site. */ .pill { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } .pill.pill--blue { z-index: 2; position: relative; } .pill.pill--blue::before { content: ""; z-index: -1; background-color: #94D4EB; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .section--image-scroller .section__image-wrapper.section__image-wrapper--blue::before { background-color: #94D4EB; } .btn.btn--blue { background-color: #94D4EB; } .card.card--blue .card__media::before { background-color: #94D4EB; } .section__mobile-image.section__mobile-image--blue::before { background-color: #94D4EB; } .pill { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } .pill.pill--green { z-index: 2; position: relative; } .pill.pill--green::before { content: ""; z-index: -1; background-color: #D2E0B9; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .section--image-scroller .section__image-wrapper.section__image-wrapper--green::before { background-color: #D2E0B9; } .btn.btn--green { background-color: #D2E0B9; } .card.card--green .card__media::before { background-color: #D2E0B9; } .section__mobile-image.section__mobile-image--green::before { background-color: #D2E0B9; } .pill { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } .pill.pill--pink { z-index: 2; position: relative; } .pill.pill--pink::before { content: ""; z-index: -1; background-color: #F0A3B7; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .section--image-scroller .section__image-wrapper.section__image-wrapper--pink::before { background-color: #F0A3B7; } .btn.btn--pink { background-color: #F0A3B7; } .card.card--pink .card__media::before { background-color: #F0A3B7; } .section__mobile-image.section__mobile-image--pink::before { background-color: #F0A3B7; } .pill { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } .pill.pill--yellow { z-index: 2; position: relative; } .pill.pill--yellow::before { content: ""; z-index: -1; background-color: #FEDC48; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .section--image-scroller .section__image-wrapper.section__image-wrapper--yellow::before { background-color: #FEDC48; } .btn.btn--yellow { background-color: #FEDC48; } .card.card--yellow .card__media::before { background-color: #FEDC48; } .section__mobile-image.section__mobile-image--yellow::before { background-color: #FEDC48; } .pill { color: var(--headings); font: var(--heading-four-font); letter-spacing: var(--heading-four-letter-spacing); text-transform: var(--heading-four-text-transform); alignment-baseline: central; } .pill.pill--purple { z-index: 2; position: relative; } .pill.pill--purple::before { content: ""; z-index: -1; background-color: #A17CB6; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .section--image-scroller .section__image-wrapper.section__image-wrapper--purple::before { background-color: #A17CB6; } .btn.btn--purple { background-color: #A17CB6; } .card.card--purple .card__media::before { background-color: #A17CB6; } .section__mobile-image.section__mobile-image--purple::before { background-color: #A17CB6; } /** Couldn't figure out a good way of doing this with loops so this will have to be appended if required */ #page-navigation { --opacity: 0.6; } #page-navigation #primary__nav li.current-menu-item a { z-index: 2; position: relative; } #page-navigation #primary__nav li.current-menu-item a::before { content: ""; z-index: -1; background-color: #FEDC48; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:not(.current-menu-item):hover a { z-index: 2; position: relative; } #page-navigation #primary__nav li:not(.current-menu-item):hover a::before { content: ""; z-index: -1; background-color: rgba(254, 220, 72, var(--opacity)); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(2n).current-menu-item a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(2n).current-menu-item a::before { content: ""; z-index: -1; background-color: #F0A3B7; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(2n):not(.current-menu-item):hover a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(2n):not(.current-menu-item):hover a::before { content: ""; z-index: -1; background-color: rgba(240, 163, 183, var(--opacity)); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(3n).current-menu-item a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(3n).current-menu-item a::before { content: ""; z-index: -1; background-color: #D2E0B9; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(3n):not(.current-menu-item):hover a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(3n):not(.current-menu-item):hover a::before { content: ""; z-index: -1; background-color: rgba(210, 224, 185, var(--opacity)); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(4n).current-menu-item a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(4n).current-menu-item a::before { content: ""; z-index: -1; background-color: #94D4EB; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(4n):not(.current-menu-item):hover a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(4n):not(.current-menu-item):hover a::before { content: ""; z-index: -1; background-color: rgba(148, 212, 235, var(--opacity)); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(5n).current-menu-item a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(5n).current-menu-item a::before { content: ""; z-index: -1; background-color: #A17CB6; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } #page-navigation #primary__nav li:nth-of-type(5n):not(.current-menu-item):hover a { z-index: 2; position: relative; } #page-navigation #primary__nav li:nth-of-type(5n):not(.current-menu-item):hover a::before { content: ""; z-index: -1; background-color: rgba(161, 124, 182, var(--opacity)); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .feature { text-align: center; } .feature .feature__title { margin-top: 2.5rem; text-transform: uppercase; font-weight: 900; } .feature .feature__copy { margin-top: 2rem; } .feature .feature__icon { border-radius: 2.5rem; padding: 2rem; display: inline-block; } .feature .feature__icon img { width: 6rem; height: 6rem; } .feature.feature--pink .feature__icon { background-color: rgba(240, 163, 183, 0.5); } .feature.feature--yellow .feature__icon { background-color: rgba(254, 220, 72, 0.5); } .feature.feature--green .feature__icon { background-color: rgba(148, 212, 235, 0.5); } .feature.feature--blue .feature__icon { background-color: rgba(210, 224, 185, 0.5); } @media screen and (max-width: 1280px) { .feature .feature__title { font-size: max(2.26vw, 1.8rem); line-height: max(2.42vw, 1.9rem); margin-top: 2.02vw; } .feature .feature__copy { font-size: max(1.45vw, 1.4rem); margin-top: 1.61vw; line-height: max(1.77vw, 1.4rem); } .feature .feature__icon { border-radius: 2.02vw; padding: 1.61vw; } .feature .feature__icon img { width: max(4.84vw, 3.5rem); height: max(4.84vw, 3.5rem); } } @media screen and (max-width: 767px) { .feature .feature__title { font-size: var(--heading-three-font-size); line-height: var(--heading-three-line-height); } .feature .feature__copy { font-size: var(--paragraph-font-size); line-height: var(--paragraph-line-height); margin-top: 2rem; } .feature .feature__icon { padding: 2rem; border-radius: var(--border-radius-md); } .feature .feature__icon img { width: 5.5rem; height: 5.5rem; } } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @keyframes scrollRight { from { transform: translateX(calc(-100% - var(--gap))); } to { transform: translateX(0); } } .ticker { --gap: 8rem; position: relative; background-color: var(--vanilla); padding: 4rem 0; overflow: hidden; display: flex; user-select: none; gap: var(--gap); } .ticker.ticker--right .ticker__wrapper { animation-name: scrollRight; } .ticker .ticker__wrapper { animation: scroll 60s linear infinite; flex-shrink: 0; display: flex; justify-content: flex-start; gap: var(--gap); min-width: 100%; position: relative; top: -0.4rem; } .ticker li.ticker__item { display: flex; align-items: center; } .ticker li.ticker__item::before { content: ""; display: inline-block; width: 5.5rem; height: 5.5rem; background-size: contain; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0NyA1NCI+CiAgICA8cGF0aCBmaWxsPSIjZmZmIiBpZD0iUmVjdGFuZ2xlIiBjbGFzcz0ic3QwIgogICAgICAgICAgZD0iTTkuOSwxNS44bDE3LjktMS45YzUuNS0uNiwxMC40LDMuNCwxMSw4LjlsMS45LDE3LjljLjYsNS41LTMuNCwxMC40LTguOSwxMWwtMTcuOSwxLjljLTUuNS42LTEwLjQtMy40LTExLTguOWwtMS45LTE3LjljLS42LTUuNCwzLjMtMTAuMiw4LjYtMTFoLjNaIi8+CiAgICA8cGF0aCBmaWxsPSIjOTRkNGViIiBpZD0iUGF0aCIgY2xhc3M9InN0MSIKICAgICAgICAgIGQ9Ik0xOS4zLDM2LjJjNC4yLTExLjcsMTEuMy0yMS42LDE4LjQtMzEuNWwuMy0uNWMuOS0xLjIsMS44LTIuNCwzLjItMywxLjgtLjgsMy42LS44LDQuOSwxLjEsMS40LDIsMCwyLjgtMS40LDQtMy40LDIuOC01LjUsNi44LTcuOSwxMC40bC0yLjIsMy4zYy0zLjMsNC45LTYuNCw5LjgtOC4zLDE1LjRsLS41LDEuNGMtLjgsMi4zLTEuNCw0LjUtMS4zLDcsMCwxLjIsMCwyLjQtMS4yLDMtMS41LjctMi42LS4xLTMuNi0xLTIuNy0yLjUtNS4xLTUuMy03LjItOC4zLTEuMi0xLjctMi4zLTMuNS0zLjQtNS4ybC0uNy0xLjFjLS41LS44LS44LTEuNiwwLTIuMy44LS45LDEuOS0uNiwyLjcsMCwxLC44LDEuOSwxLjgsMi43LDIuN2wuNC41YzEuNCwxLjYsMi42LDMuNSw1LjEsNC4xWiIvPgo8L3N2Zz4K); } .ticker .ticker__title { display: inline-block; margin-bottom: 0; position: relative; top: 0.5rem; text-transform: uppercase; font-weight: 900; } .list.socials { display: flex; gap: 2rem; align-items: center; } .list.socials .socials__item a { width: 5.6rem; height: 5.6rem; display: flex; background-color: rgba(29, 14, 70, 0.5); border-radius: 50%; justify-content: center; align-items: center; transition: background-color 150ms linear; } .list.socials .socials__item a:hover { background-color: var(--midnight-blue); } .list.socials .socials__item svg { width: 3.6rem; height: 3.6rem; fill: white; } .card { --transform-amount: -2.1rem; --scale-amount: 1.1; } .card:hover .card__media img { transform: scale(var(--scale-amount)) translateY(var(--transform-amount)) rotate(var(--rotate-right-md)); } .card .card__title { text-transform: uppercase; margin-top: 6rem; text-align: center; font-weight: 900; text-align-last: center; } .card .card__copy { text-align: center; text-align-last: center; margin-top: 2rem; } .card .card__actions { display: flex; justify-content: center; margin-top: 2rem; } .card .card__media { padding: 0.6rem 0.6rem; box-sizing: content-box; overflow: visible; margin: 1.3rem auto; } .card .card__media, .card .card__media img { width: 36rem; height: 36rem; transition: transform 200ms linear; } .card .card__media[data-background]::before { transform: rotate(var(--rotate-left-lg)); } .card .card__media, .card .card__media .card__picture { position: relative; } .card .card__media .card__picture { position: relative; z-index: 2; } .card .card__media .card__picture img { border-radius: var(--border-radius-md); } .card .card__media img { position: relative; transition: 200ms transform linear; z-index: 2; } .card .card__picture { transform: rotate(var(--rotate-right-sm)); } .card:nth-of-type(2n) .card__picture, [class*=col-]:nth-of-type(2n) .card .card__picture { transform: rotate(var(--rotate-left-sm)); } .card:nth-of-type(2n) .card__media::before, [class*=col-]:nth-of-type(2n) .card .card__media::before { transform: rotate(var(--rotate-right-lg)); } .card:nth-of-type(2n):hover .card__media img, [class*=col-]:nth-of-type(2n) .card:hover .card__media img { transform: scale(var(--scale-amount)) translateY(var(--transform-amount)) rotate(var(--rotate-left-md)); } * .card:nth-of-type(3n) .card__picture, [class*=col-]:nth-of-type(3n) .card .card__picture { transform: rotate(var(--rotate-right-lg)); } * .card:nth-of-type(3n) .card__media::before, [class*=col-]:nth-of-type(3n) .card .card__media::before { transform: rotate(var(--rotate-left-lg)); } @media screen and (max-width: 991px) { .card .card__media { margin: 0.3rem auto; } .card .card__media::before { width: 29rem; height: 29rem; top: 0.8rem; } .card .card__media, .card .card__media img { width: 29rem; height: 29rem; } .card .card__media, .card .card__media .card__picture { max-width: 100%; height: auto; } } .video-modal { padding: 0 2rem; width: 1280px; max-width: 100%; background-color: transparent; border: none; overflow: visible; } .video-modal::backdrop { background-color: rgba(255, 245, 233, 0.7); } .video-modal .embed-container { padding-bottom: 56.25%; } .video-modal .video-modal__content { border-radius: var(--border-radius-md); overflow: hidden; } .video-modal .video-modal__close { position: absolute; top: -4.2rem; right: 0.5rem; z-index: 2; cursor: pointer; background-color: rgba(210, 224, 185, 0.5); width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border-radius: var(--border-radius-md); transition: background-color 150ms linear; } .video-modal .video-modal__close:hover { background-color: #d2e0b9; } .video-modal .video-modal__close svg { width: 4rem; height: 4rem; } .video-modal lite-vimeo, .video-modal lite-youtube { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .video-modal:focus { outline: none; } .link-min { --width: 16.4rem; --height: 16.4rem; } .link-min a { display: flex; flex-direction: column; align-items: center; gap: 3rem; } .link-min .link-min__title { text-align: center; text-transform: uppercase; font-weight: 900; } .link-min a picture.link-min__thumbnail { display: inline-block; position: relative; margin: 0 auto; } .link-min a picture.link-min__thumbnail img { width: var(--width); height: var(--height); border-radius: var(--border-radius-md); position: relative; z-index: 2; transform: rotate(var(--rotate-left-sm)); transition: transform 200ms linear; } .link-min a picture.link-min__thumbnail::before { top: 1.3rem; z-index: 1; } .link-min:hover picture.link-min__thumbnail img { transform: scale(1.1) translateY(-0.7rem) rotate(var(--rotate-left-md)); } .link-min:hover picture.link-min__thumbnail::before { transform: scale(1.1) rotate(var(--rotate-right-md)); } .section__col:nth-of-type(2n) .link-min .link-min__thumbnail::before { transform: rotate(var(--rotate-left-md)); } .section__col:nth-of-type(2n) .link-min img { transform: rotate(var(--rotate-right-sm)); } .section__col:nth-of-type(2n) .link-min:hover .link-min__thumbnail img { transform: scale(1.1) translateY(-0.7rem) rotate(var(--rotate-right-md)); } .section__col:nth-of-type(2n) .link-min:hover .link-min__thumbnail::before { transform: scale(1.1) rotate(var(--rotate-left-md)); } .link-min.link-min--pink .link-min__thumbnail::before { background-color: rgba(240, 163, 183, 0.5); } .link-min.link-min--yellow .link-min__thumbnail::before { background-color: rgba(254, 220, 72, 0.5); } .link-min.link-min--green .link-min__thumbnail::before { background-color: rgba(148, 212, 235, 0.5); } .link-min.link-min--purple .link-min__thumbnail::before { background-color: rgba(161, 124, 182, 0.5); } .section--timeline .container { max-width: 108rem; } .section--timeline .timeline-bar { left: 44.4rem; transform: initial; } .timeline-item { --width: 2rem; --height: 2rem; display: flex; align-items: flex-start; gap: 8.4rem; justify-content: flex-start; opacity: 0.3; } .timeline-item .timeline-item__header { width: 34rem; min-width: 34rem; text-align: right; } .timeline-item .timeline-item__title { margin-bottom: 0; } .timeline-item .timeline-item__content { width: 52rem; padding: 5.5rem 0; } .timeline-item .timeline-item__content .timeline-item__title { margin-bottom: 2rem; } .timeline-item .timeline-item__dot { width: var(--width); height: var(--height); position: absolute; border-radius: 1.3rem; background-color: var(--bubblegum); left: 50%; transform: translateX(-50%); } .timeline-item .timeline-item__dot::after { content: ""; width: 100%; height: 100%; position: absolute; border-radius: 1.3rem; background-color: inherit; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .timeline-item .timeline-item__dot::before { content: ""; height: 140%; width: 140%; display: block; background-color: var(--wafer); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; border-radius: 1.3rem; } .timeline-item .timeline-item__bar { width: 0.6rem; align-self: stretch; position: relative; } .timeline-item .timeline-item__picture { margin-top: 2rem; } .timeline-item .timeline-item__picture img { border-radius: var(--border-radius-md); } .timeline-item .timeline-item__copy { margin-top: 2rem; } .timeline-item:first-of-type .timeline-item__content { padding-top: 0; } .timeline-item:last-of-type .timeline-item__content { padding-bottom: 0; } @media screen and (max-width: 991px) { .timeline-item { gap: 3rem; width: 100%; justify-content: center; } .timeline-item .timeline-item__content { padding: 2.5rem 0; } .timeline-item .timeline-item__header { display: none; } .section--timeline .section__items { padding-left: 0; } .section--timeline .timeline-bar { left: 1.9rem; } } .timeline-bar { width: 0.6rem; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); align-self: stretch; background-color: #dfeee9; } .timeline-bar .timeline-bar__progress { width: 100%; background-color: var(--bubblegum); position: absolute; top: 0; } @media screen and (max-width: 991px) { .timeline-bar { transform: none; left: 1.9rem; } } .toggle { display: flex; justify-content: center; } .toggle.toggle--vertical { justify-content: flex-start; width: 100%; } .toggle.toggle--vertical .toggle__list { flex-direction: column; width: 100%; margin: 0; } .toggle.toggle--vertical .toggle__list .toggle__item:not(:first-of-type) { margin-top: -0.5rem; } .toggle.toggle--vertical .toggle__list label { width: 100%; font-weight: 900; } .toggle.toggle--vertical .toggle__list::before { content: none; } .toggle.toggle--vertical .toggle__list::after { content: none; } .toggle .toggle__list { position: relative; background-color: var(--waffle); border-radius: var(--border-radius-xlg); padding: 0.6rem; list-style: none; display: flex; gap: 1.5rem; width: auto; box-shadow: var(--shadow); } .toggle .toggle__list::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; transform: rotate(2deg); top: 0; left: 0; z-index: -1; background-color: rgba(148, 212, 235, 0.5); border-radius: var(--border-radius-xlg); } .toggle .toggle__list::after { content: ""; position: absolute; display: block; width: 100%; height: 100%; transform: rotate(-2deg); top: 0; left: 0; z-index: -1; background-color: rgba(254, 220, 72, 0.5); border-radius: var(--border-radius-xlg); } .toggle .toggle__item input { display: none; } .toggle .toggle__item.toggle__item--active label { background-color: white; } .toggle .toggle__item label { padding: 1.9rem 0.7rem; width: 30rem; border-radius: var(--border-radius-xlg); overflow: hidden; text-align: center; cursor: pointer; font: var(--heading-three-font); color: var(--headings); user-select: none; display: block; text-transform: uppercase; font-weight: 900; } @media screen and (max-width: 767px) { .toggle .toggle__list { box-shadow: initial; flex-direction: column; width: 100%; gap: 0.7rem; } .toggle .toggle__list::after { width: 105%; left: 50%; transform: translateX(-50%) rotate(-2deg); } .toggle .toggle__list::before { width: 105%; left: 50%; transform: translateX(-50%) rotate(2deg); } .toggle .toggle__item:not(:first-of-type) { margin-top: -0.5rem; } .toggle .toggle__item label { width: 100%; } } .categories.list.list--inline { gap: 1.5rem 5rem; justify-content: center; flex-wrap: wrap; } .categories.categories--vertical { flex-direction: column; list-style: none; padding: 0; margin: 0; align-items: center; } .categories.categories--vertical li { text-align: center; } .categories .category { position: relative; } .categories .category input { display: none; } .categories .category label { font: var(--heading-four-font); color: var(--headings); cursor: pointer; user-select: none; } .categories .category.category--active::before { content: ""; display: block; z-index: -1; width: 100%; height: 100%; background-color: var(--strawberry); border-radius: var(--border-radius-xs); position: absolute; } .categories .category.category--active.category--blue { z-index: 2; position: relative; } .categories .category.category--active.category--blue::before { content: ""; z-index: -1; background-color: #94D4EB; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0); } .categories .category.category--active.category--green { z-index: 2; position: relative; } .categories .category.category--active.category--green::before { content: ""; z-index: -1; background-color: #D2E0B9; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0); } .categories .category.category--active.category--pink { z-index: 2; position: relative; } .categories .category.category--active.category--pink::before { content: ""; z-index: -1; background-color: #F0A3B7; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0); } .categories .category.category--active.category--yellow { z-index: 2; position: relative; } .categories .category.category--active.category--yellow::before { content: ""; z-index: -1; background-color: #FEDC48; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0); } .categories .category.category--active.category--purple { z-index: 2; position: relative; } .categories .category.category--active.category--purple::before { content: ""; z-index: -1; background-color: #A17CB6; border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0); } @media screen and (max-width: 767px) { .categories.list.list--inline { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0.5rem 2rem; margin: 3.5rem -2rem 0; } .categories.list.list--inline li { white-space: nowrap; margin: 1rem 0; } } @keyframes productIn { 0% { opacity: 0; } 100% { opacity: 0.5; } } .product { text-align: center; position: relative; } .product .product__media { border-radius: var(--border-radius-md); padding: 0.6rem; max-width: 22rem; max-height: 22rem; margin: 0 auto; position: relative; } .product .product__media img { width: 20.6rem; height: 20.6rem; } .product .product__excerpt { display: none; margin-top: 1.5rem; } .product .product__excerpt, .product .product__excerpt p { font: var(--x-small-paragraph-font); } .product .product__phone, .product .product__email { display: none; margin-top: 0.5rem; font: var(--x-small-paragraph-font); } .product .product__title { margin-top: 2.5rem; text-transform: uppercase; font-weight: 900; } .product .product__actions { display: none; } .product .tooltip { display: none; position: absolute; left: -1.5rem; top: 0rem; } .product.product--flavour .product__title { margin-top: 1.5rem; } .product.product--flavour .product__media { padding: 1.6rem; } .product.product--flavour .product__media img { width: 18.8rem; height: 18.8rem; margin: 0 auto; } @media screen and (min-width: 768px) { .product:hover { position: absolute; width: 100%; left: 50%; transform: translateX(-50%); z-index: 2; } .product:hover .tooltip { display: initial; z-index: 4; } .product:hover .product__content { background-color: var(--waffle); padding: 2rem 1.5rem; border-radius: var(--border-radius-md); margin: -2rem 0; } .product:hover .product__actions { display: flex; justify-content: center; margin-top: 1.5rem; } .product:hover .product__phone, .product:hover .product__email { display: block; margin-top: 0.5rem; } .product:hover.product--flavour .product__media::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 1rem; top: 0; z-index: 2; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQ4MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyBjbGFzcz0ibGF5ZXIiPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBkPSJtNDI0LjI2LDM2Ni41M3EtOTUuMTgsMTM1Ljg3IC0yMzMuOTUsMTA0LjYycS0xMzguNzcsLTMxLjI0IC0xNjcuODMsLTEzNS44N3EtMjkuMDYsLTEwNC42MiAwLjczLC0yMDcuNzlxMjkuNzksLTEwMy4xNyAxNTkuODQsLTEyMi43OXExMzAuMDUsLTE5LjYyIDIzMy4yMiwxMDMuMTdxMTAzLjE3LDEyMi43OSA3Ljk5LDI1OC42NXoiIGZpbGw9InJnYmEoMjQwLCAxNjMsIDE4MywgMC41KSIgaWQ9InN2Z18xIi8+CiA8L2c+Cjwvc3ZnPg==) no-repeat center center; background-size: cover; } .product:hover.product--flavour .product__media::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: -1.3rem; bottom: -2rem; z-index: 1; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQ4MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyBjbGFzcz0ibGF5ZXIiPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBkPSJtNDQwLjg4LDMzNC44MXEtNzIuOTEsOTYuMSAtMTk4LjgzLDEyMS45NXEtMTI1LjkzLDI1Ljg1IC0yMDIuODEsLTk2LjFxLTc2Ljg4LC0xMjEuOTUgMy4zMSwtMjM4LjZxODAuMiwtMTE2LjY1IDIwNC4xNCwtOTguNzVxMTIzLjk0LDE3Ljg5IDE5NS41MiwxMTYuNjVxNzEuNTgsOTguNzUgLTEuMzMsMTk0Ljg2eiIgZmlsbD0icmdiYSgyMTAsIDIyNCwgMTg2LCAwLjUpIiBpZD0ic3ZnXzEiLz4KIDwvZz4KPC9zdmc+) no-repeat center center; background-size: cover; } .product:hover .product__media { position: relative; position: relative; overflow: visible; position: relative; overflow: visible; } .product:hover .product__media img { position: relative; opacity: 1; z-index: 3; } .product:hover .product__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--strawberry); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .product:hover .product__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-sm)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .product:hover .product__media::before { z-index: 1; top: 1rem; right: 3rem; opacity: 0; animation: productIn 300ms forwards linear; } .product:hover .product__media::after { z-index: 2; bottom: 1rem; left: 3rem; opacity: 0; animation: productIn 300ms 300ms forwards linear; } .product:hover::before { content: ""; position: absolute; display: block; width: calc(100% + 1.5rem); height: calc(105% + 4rem); left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) rotate(var(--rotate-right-md)); background-color: rgba(210, 224, 185, 0.5); z-index: -1; border-radius: var(--border-radius-md); opacity: 0; animation: productIn 300ms forwards linear; } .product:hover::after { content: ""; position: absolute; display: block; width: calc(100% + 1.5rem); height: calc(105% + 4rem); left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) rotate(var(--rotate-left-md)); background-color: rgba(240, 163, 183, 0.5); z-index: -1; border-radius: var(--border-radius-md); opacity: 0; animation: productIn 300ms 300ms forwards linear; } .product:hover .product__excerpt { display: initial; } .product:hover .product__title { padding: 0 0.5rem; } } .product.product--active { position: absolute; width: 100%; left: 50%; transform: translateX(-50%); z-index: 2; } .product.product--active .tooltip { display: initial; z-index: 4; } .product.product--active .product__content { background-color: var(--waffle); padding: 2rem 1.5rem; border-radius: var(--border-radius-md); margin: -2rem 0; } .product.product--active .product__actions { display: flex; justify-content: center; margin-top: 1.5rem; } .product.product--active .product__phone, .product.product--active .product__email { display: block; margin-top: 0.5rem; } .product.product--active.product--flavour .product__media::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 1rem; top: 0; z-index: 2; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQ4MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyBjbGFzcz0ibGF5ZXIiPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBkPSJtNDI0LjI2LDM2Ni41M3EtOTUuMTgsMTM1Ljg3IC0yMzMuOTUsMTA0LjYycS0xMzguNzcsLTMxLjI0IC0xNjcuODMsLTEzNS44N3EtMjkuMDYsLTEwNC42MiAwLjczLC0yMDcuNzlxMjkuNzksLTEwMy4xNyAxNTkuODQsLTEyMi43OXExMzAuMDUsLTE5LjYyIDIzMy4yMiwxMDMuMTdxMTAzLjE3LDEyMi43OSA3Ljk5LDI1OC42NXoiIGZpbGw9InJnYmEoMjQwLCAxNjMsIDE4MywgMC41KSIgaWQ9InN2Z18xIi8+CiA8L2c+Cjwvc3ZnPg==) no-repeat center center; background-size: cover; } .product.product--active.product--flavour .product__media::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: -1.3rem; bottom: -2rem; z-index: 1; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQ4MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZyBjbGFzcz0ibGF5ZXIiPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBkPSJtNDQwLjg4LDMzNC44MXEtNzIuOTEsOTYuMSAtMTk4LjgzLDEyMS45NXEtMTI1LjkzLDI1Ljg1IC0yMDIuODEsLTk2LjFxLTc2Ljg4LC0xMjEuOTUgMy4zMSwtMjM4LjZxODAuMiwtMTE2LjY1IDIwNC4xNCwtOTguNzVxMTIzLjk0LDE3Ljg5IDE5NS41MiwxMTYuNjVxNzEuNTgsOTguNzUgLTEuMzMsMTk0Ljg2eiIgZmlsbD0icmdiYSgyMTAsIDIyNCwgMTg2LCAwLjUpIiBpZD0ic3ZnXzEiLz4KIDwvZz4KPC9zdmc+) no-repeat center center; background-size: cover; } .product.product--active .product__media { position: relative; position: relative; overflow: visible; position: relative; overflow: visible; } .product.product--active .product__media img { position: relative; opacity: 1; z-index: 3; } .product.product--active .product__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--strawberry); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .product.product--active .product__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-sm)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .product.product--active .product__media::before { z-index: 1; top: 1rem; right: 3rem; opacity: 0; animation: productIn 300ms forwards linear; } .product.product--active .product__media::after { z-index: 2; bottom: 1rem; left: 3rem; opacity: 0; animation: productIn 300ms 300ms forwards linear; } .product.product--active::before { content: ""; position: absolute; display: block; width: calc(100% + 1.5rem); height: calc(105% + 4rem); left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) rotate(var(--rotate-right-md)); background-color: rgba(210, 224, 185, 0.5); z-index: -1; border-radius: var(--border-radius-md); opacity: 0; animation: productIn 300ms forwards linear; } .product.product--active::after { content: ""; position: absolute; display: block; width: calc(100% + 1.5rem); height: calc(105% + 4rem); left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%) rotate(var(--rotate-left-md)); background-color: rgba(240, 163, 183, 0.5); z-index: -1; border-radius: var(--border-radius-md); opacity: 0; animation: productIn 300ms 300ms forwards linear; } .product.product--active .product__excerpt { display: initial; } .product.product--active .product__title { padding: 0 0.5rem; } @media screen and (max-width: 767px) { .product { cursor: pointer; } .product .product__media { max-width: 15.5rem; max-height: 15.5rem; } .product .product__media img { width: 13.9rem; height: 13.9rem; } .product.product--flavour .product__media { max-width: 15.5rem; max-height: 15.5rem; padding: 0.6rem; } .product.product--flavour .product__media img { width: 13.9rem; height: 13.9rem; } .product.product--active { width: 31rem; transform: translateX(0); left: 0; } .product.product--active .product__media::before { top: 0.5rem; right: 1.5rem; } .product.product--active .product__media::after { bottom: 0.5rem; left: 1.5rem; } .product.product--active:nth-of-type(2n) { right: 0; } } .nutrition-grid { display: flex; flex-direction: column; gap: 0.9rem; } .nutrition-grid > .h4 { text-transform: uppercase; font-weight: 900; } .nutrition-grid .nutrition-grid__row { display: flex; justify-content: space-between; align-items: center; } .nutrition-grid .nutrition-grid__label, .nutrition-grid .nutrition-grid__value { font: var(--small-paragraph-font); font-weight: normal; font-family: var(--font-family); } .nutrition-grid .nutrition-grid__value { font-weight: 500; } [data-background] { --background-rotation: vars.$rotate-right-md; --background-overlap: 2rem; --opacity-transition-duration: 500ms; } [data-background][data-background-overlap="0rem"] { --background-overlap: 0rem; } [data-background][data-background-overlap="1rem"] { --background-overlap: 1rem; } [data-background][data-background-overlap="2rem"] { --background-overlap: 2rem; } [data-background][data-background-overlap="3rem"] { --background-overlap: 3rem; } [data-background][data-background-overlap="4rem"] { --background-overlap: 4rem; } [data-background][data-background-overlap="5rem"] { --background-overlap: 5rem; } [data-background][data-background-overlap="6rem"] { --background-overlap: 6rem; } [data-background][data-background-overlap="7rem"] { --background-overlap: 7rem; } [data-background][data-background-overlap="8rem"] { --background-overlap: 8rem; } [data-background][data-background-overlap="9rem"] { --background-overlap: 9rem; } [data-background][data-background-overlap="10rem"] { --background-overlap: 10rem; } [data-background][data-background-rotation=left-xs] { --background-rotation: var(--rotate-left-xs); } [data-background][data-background-rotation=left-sm] { --background-rotation: var(--rotate-left-sm); } [data-background][data-background-rotation=left-md] { --background-rotation: var(--rotate-left-md); } [data-background][data-background-rotation=left-lg] { --background-rotation: var(--rotate-left-lg); } [data-background][data-background-rotation=right-xs] { --background-rotation: var(--rotate-right-xs); } [data-background][data-background-rotation=right-sm] { --background-rotation: var(--rotate-right-sm); } [data-background][data-background-rotation=right-md] { --background-rotation: var(--rotate-right-md); } [data-background][data-background-rotation=right-lg] { --background-rotation: var(--rotate-right-lg); } [data-background][data-background=yellow] { position: relative; overflow: visible; } [data-background][data-background=yellow]::before { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--background-overlap) / 2 * -1); height: calc(100% + var(--background-overlap)); transform: rotate(var(--background-rotation)); background-color: #FEDC48; opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } [data-background][data-background=blue] { position: relative; overflow: visible; } [data-background][data-background=blue]::before { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--background-overlap) / 2 * -1); height: calc(100% + var(--background-overlap)); transform: rotate(var(--background-rotation)); background-color: #94D4EB; opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } [data-background][data-background=green] { position: relative; overflow: visible; } [data-background][data-background=green]::before { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--background-overlap) / 2 * -1); height: calc(100% + var(--background-overlap)); transform: rotate(var(--background-rotation)); background-color: #D2E0B9; opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } [data-background][data-background=pink] { position: relative; overflow: visible; } [data-background][data-background=pink]::before { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--background-overlap) / 2 * -1); height: calc(100% + var(--background-overlap)); transform: rotate(var(--background-rotation)); background-color: #F0A3B7; opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } [data-background][data-background=purple] { position: relative; overflow: visible; } [data-background][data-background=purple]::before { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--background-overlap) / 2 * -1); height: calc(100% + var(--background-overlap)); transform: rotate(var(--background-rotation)); background-color: #A17CB6; opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .section [data-background]::before { opacity: 0; } .section.scrolled [data-background]::before { transition: all 500ms linear; opacity: 0.5; } .section.scrolled [data-background][data-background-delay="0ms"]::before { transition: opacity var(--opacity-transition-duration) 0ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="100ms"]::before { transition: opacity var(--opacity-transition-duration) 100ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="200ms"]::before { transition: opacity var(--opacity-transition-duration) 200ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="300ms"]::before { transition: opacity var(--opacity-transition-duration) 300ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="400ms"]::before { transition: opacity var(--opacity-transition-duration) 400ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="500ms"]::before { transition: opacity var(--opacity-transition-duration) 500ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="600ms"]::before { transition: opacity var(--opacity-transition-duration) 600ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="700ms"]::before { transition: opacity var(--opacity-transition-duration) 700ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="800ms"]::before { transition: opacity var(--opacity-transition-duration) 800ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="900ms"]::before { transition: opacity var(--opacity-transition-duration) 900ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1000ms"]::before { transition: opacity var(--opacity-transition-duration) 1000ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1100ms"]::before { transition: opacity var(--opacity-transition-duration) 1100ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1200ms"]::before { transition: opacity var(--opacity-transition-duration) 1200ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1300ms"]::before { transition: opacity var(--opacity-transition-duration) 1300ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1400ms"]::before { transition: opacity var(--opacity-transition-duration) 1400ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1500ms"]::before { transition: opacity var(--opacity-transition-duration) 1500ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1600ms"]::before { transition: opacity var(--opacity-transition-duration) 1600ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1700ms"]::before { transition: opacity var(--opacity-transition-duration) 1700ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1800ms"]::before { transition: opacity var(--opacity-transition-duration) 1800ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="1900ms"]::before { transition: opacity var(--opacity-transition-duration) 1900ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2000ms"]::before { transition: opacity var(--opacity-transition-duration) 2000ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2100ms"]::before { transition: opacity var(--opacity-transition-duration) 2100ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2200ms"]::before { transition: opacity var(--opacity-transition-duration) 2200ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2300ms"]::before { transition: opacity var(--opacity-transition-duration) 2300ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2400ms"]::before { transition: opacity var(--opacity-transition-duration) 2400ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2500ms"]::before { transition: opacity var(--opacity-transition-duration) 2500ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2600ms"]::before { transition: opacity var(--opacity-transition-duration) 2600ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2700ms"]::before { transition: opacity var(--opacity-transition-duration) 2700ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2800ms"]::before { transition: opacity var(--opacity-transition-duration) 2800ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="2900ms"]::before { transition: opacity var(--opacity-transition-duration) 2900ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3000ms"]::before { transition: opacity var(--opacity-transition-duration) 3000ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3100ms"]::before { transition: opacity var(--opacity-transition-duration) 3100ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3200ms"]::before { transition: opacity var(--opacity-transition-duration) 3200ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3300ms"]::before { transition: opacity var(--opacity-transition-duration) 3300ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3400ms"]::before { transition: opacity var(--opacity-transition-duration) 3400ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3500ms"]::before { transition: opacity var(--opacity-transition-duration) 3500ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3600ms"]::before { transition: opacity var(--opacity-transition-duration) 3600ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3700ms"]::before { transition: opacity var(--opacity-transition-duration) 3700ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3800ms"]::before { transition: opacity var(--opacity-transition-duration) 3800ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="3900ms"]::before { transition: opacity var(--opacity-transition-duration) 3900ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4000ms"]::before { transition: opacity var(--opacity-transition-duration) 4000ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4100ms"]::before { transition: opacity var(--opacity-transition-duration) 4100ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4200ms"]::before { transition: opacity var(--opacity-transition-duration) 4200ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4300ms"]::before { transition: opacity var(--opacity-transition-duration) 4300ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4400ms"]::before { transition: opacity var(--opacity-transition-duration) 4400ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4500ms"]::before { transition: opacity var(--opacity-transition-duration) 4500ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4600ms"]::before { transition: opacity var(--opacity-transition-duration) 4600ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4700ms"]::before { transition: opacity var(--opacity-transition-duration) 4700ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4800ms"]::before { transition: opacity var(--opacity-transition-duration) 4800ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="4900ms"]::before { transition: opacity var(--opacity-transition-duration) 4900ms linear, transform 200ms linear, background-color 200ms linear; } .section.scrolled [data-background][data-background-delay="5000ms"]::before { transition: opacity var(--opacity-transition-duration) 5000ms linear, transform 200ms linear, background-color 200ms linear; } .section[data-ignore=true] [data-background]::before, .section[data-ignore="1"] [data-background]::before { opacity: 0.5; } [data-foreground] { --foreground-rotation: vars.$rotate-right-md; --foreground-overlap: 2rem; } [data-foreground][data-foreground-overlap="0rem"] { --foreground-overlap: 0rem; } [data-foreground][data-foreground-overlap="1rem"] { --foreground-overlap: 1rem; } [data-foreground][data-foreground-overlap="2rem"] { --foreground-overlap: 2rem; } [data-foreground][data-foreground-overlap="3rem"] { --foreground-overlap: 3rem; } [data-foreground][data-foreground-overlap="4rem"] { --foreground-overlap: 4rem; } [data-foreground][data-foreground-overlap="5rem"] { --foreground-overlap: 5rem; } [data-foreground][data-foreground-overlap="6rem"] { --foreground-overlap: 6rem; } [data-foreground][data-foreground-overlap="7rem"] { --foreground-overlap: 7rem; } [data-foreground][data-foreground-overlap="8rem"] { --foreground-overlap: 8rem; } [data-foreground][data-foreground-overlap="9rem"] { --foreground-overlap: 9rem; } [data-foreground][data-foreground-overlap="10rem"] { --foreground-overlap: 10rem; } [data-foreground][data-foreground-rotation=left-xs] { --foreground-rotation: var(--rotate-left-xs); } [data-foreground][data-foreground-rotation=left-sm] { --foreground-rotation: var(--rotate-left-sm); } [data-foreground][data-foreground-rotation=left-md] { --foreground-rotation: var(--rotate-left-md); } [data-foreground][data-foreground-rotation=left-lg] { --foreground-rotation: var(--rotate-left-lg); } [data-foreground][data-foreground-rotation=right-xs] { --foreground-rotation: var(--rotate-right-xs); } [data-foreground][data-foreground-rotation=right-sm] { --foreground-rotation: var(--rotate-right-sm); } [data-foreground][data-foreground-rotation=right-md] { --foreground-rotation: var(--rotate-right-md); } [data-foreground][data-foreground-rotation=right-lg] { --foreground-rotation: var(--rotate-right-lg); } [data-foreground][data-foreground=yellow] { position: relative; overflow: visible; } [data-foreground][data-foreground=yellow]::after { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--foreground-overlap) / 2 * -1); height: calc(100% + var(--foreground-overlap)); transform: rotate(var(--foreground-rotation)); background-color: #FEDC48; opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } [data-foreground][data-foreground=blue] { position: relative; overflow: visible; } [data-foreground][data-foreground=blue]::after { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--foreground-overlap) / 2 * -1); height: calc(100% + var(--foreground-overlap)); transform: rotate(var(--foreground-rotation)); background-color: #94D4EB; opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } [data-foreground][data-foreground=green] { position: relative; overflow: visible; } [data-foreground][data-foreground=green]::after { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--foreground-overlap) / 2 * -1); height: calc(100% + var(--foreground-overlap)); transform: rotate(var(--foreground-rotation)); background-color: #D2E0B9; opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } [data-foreground][data-foreground=pink] { position: relative; overflow: visible; } [data-foreground][data-foreground=pink]::after { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--foreground-overlap) / 2 * -1); height: calc(100% + var(--foreground-overlap)); transform: rotate(var(--foreground-rotation)); background-color: #F0A3B7; opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } [data-foreground][data-foreground=purple] { position: relative; overflow: visible; } [data-foreground][data-foreground=purple]::after { content: ""; position: absolute; display: block; width: 100%; top: calc(var(--foreground-overlap) / 2 * -1); height: calc(100% + var(--foreground-overlap)); transform: rotate(var(--foreground-rotation)); background-color: #A17CB6; opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .section [data-foreground]::after { opacity: 0; transition: all 500ms linear; transition-delay: 500ms; } .section [data-foreground][data-foreground-delay="0ms"]::after { transition-delay: 500ms; } .section [data-foreground][data-foreground-delay="100ms"]::after { transition-delay: 600ms; } .section [data-foreground][data-foreground-delay="200ms"]::after { transition-delay: 700ms; } .section [data-foreground][data-foreground-delay="300ms"]::after { transition-delay: 800ms; } .section [data-foreground][data-foreground-delay="400ms"]::after { transition-delay: 900ms; } .section [data-foreground][data-foreground-delay="500ms"]::after { transition-delay: 1000ms; } .section [data-foreground][data-foreground-delay="600ms"]::after { transition-delay: 1100ms; } .section [data-foreground][data-foreground-delay="700ms"]::after { transition-delay: 1200ms; } .section [data-foreground][data-foreground-delay="800ms"]::after { transition-delay: 1300ms; } .section [data-foreground][data-foreground-delay="900ms"]::after { transition-delay: 1400ms; } .section [data-foreground][data-foreground-delay="1000ms"]::after { transition-delay: 1500ms; } .section [data-foreground][data-foreground-delay="1100ms"]::after { transition-delay: 1600ms; } .section [data-foreground][data-foreground-delay="1200ms"]::after { transition-delay: 1700ms; } .section [data-foreground][data-foreground-delay="1300ms"]::after { transition-delay: 1800ms; } .section [data-foreground][data-foreground-delay="1400ms"]::after { transition-delay: 1900ms; } .section [data-foreground][data-foreground-delay="1500ms"]::after { transition-delay: 2000ms; } .section [data-foreground][data-foreground-delay="1600ms"]::after { transition-delay: 2100ms; } .section [data-foreground][data-foreground-delay="1700ms"]::after { transition-delay: 2200ms; } .section [data-foreground][data-foreground-delay="1800ms"]::after { transition-delay: 2300ms; } .section [data-foreground][data-foreground-delay="1900ms"]::after { transition-delay: 2400ms; } .section [data-foreground][data-foreground-delay="2000ms"]::after { transition-delay: 2500ms; } .section [data-foreground][data-foreground-delay="2100ms"]::after { transition-delay: 2600ms; } .section [data-foreground][data-foreground-delay="2200ms"]::after { transition-delay: 2700ms; } .section [data-foreground][data-foreground-delay="2300ms"]::after { transition-delay: 2800ms; } .section [data-foreground][data-foreground-delay="2400ms"]::after { transition-delay: 2900ms; } .section [data-foreground][data-foreground-delay="2500ms"]::after { transition-delay: 3000ms; } .section [data-foreground][data-foreground-delay="2600ms"]::after { transition-delay: 3100ms; } .section [data-foreground][data-foreground-delay="2700ms"]::after { transition-delay: 3200ms; } .section [data-foreground][data-foreground-delay="2800ms"]::after { transition-delay: 3300ms; } .section [data-foreground][data-foreground-delay="2900ms"]::after { transition-delay: 3400ms; } .section [data-foreground][data-foreground-delay="3000ms"]::after { transition-delay: 3500ms; } .section [data-foreground][data-foreground-delay="3100ms"]::after { transition-delay: 3600ms; } .section [data-foreground][data-foreground-delay="3200ms"]::after { transition-delay: 3700ms; } .section [data-foreground][data-foreground-delay="3300ms"]::after { transition-delay: 3800ms; } .section [data-foreground][data-foreground-delay="3400ms"]::after { transition-delay: 3900ms; } .section [data-foreground][data-foreground-delay="3500ms"]::after { transition-delay: 4000ms; } .section [data-foreground][data-foreground-delay="3600ms"]::after { transition-delay: 4100ms; } .section [data-foreground][data-foreground-delay="3700ms"]::after { transition-delay: 4200ms; } .section [data-foreground][data-foreground-delay="3800ms"]::after { transition-delay: 4300ms; } .section [data-foreground][data-foreground-delay="3900ms"]::after { transition-delay: 4400ms; } .section [data-foreground][data-foreground-delay="4000ms"]::after { transition-delay: 4500ms; } .section [data-foreground][data-foreground-delay="4100ms"]::after { transition-delay: 4600ms; } .section [data-foreground][data-foreground-delay="4200ms"]::after { transition-delay: 4700ms; } .section [data-foreground][data-foreground-delay="4300ms"]::after { transition-delay: 4800ms; } .section [data-foreground][data-foreground-delay="4400ms"]::after { transition-delay: 4900ms; } .section [data-foreground][data-foreground-delay="4500ms"]::after { transition-delay: 5000ms; } .section [data-foreground][data-foreground-delay="4600ms"]::after { transition-delay: 5100ms; } .section [data-foreground][data-foreground-delay="4700ms"]::after { transition-delay: 5200ms; } .section [data-foreground][data-foreground-delay="4800ms"]::after { transition-delay: 5300ms; } .section [data-foreground][data-foreground-delay="4900ms"]::after { transition-delay: 5400ms; } .section [data-foreground][data-foreground-delay="5000ms"]::after { transition-delay: 5500ms; } .section.scrolled [data-foreground]::after { opacity: 0.5; } .section[data-ignore=true] [data-foreground]::after, .section[data-ignore="1"] [data-foreground]::after { opacity: 0.5; } .faq { padding: 3rem 4rem; background-color: white; border-radius: var(--border-radius-md); overflow: hidden; box-shadow: var(--shadow); } .faq .faq__title { font: var(--heading-three-font); color: var(--headings); user-select: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; } .faq .faq__title::marker { content: none; } .faq .faq__title::after { content: ""; display: block; width: 3.7rem; min-width: 3.7rem; height: 3.7rem; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzOCAzOCI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuc3QwLCAuc3QxLCAuc3QyIHsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICM5NGQ0ZWI7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICAgIG9wYWNpdHk6IC41OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iUmVjdGFuZ2xlLUNvcHktMiIgY2xhc3M9InN0MiIgZD0iTTEyLjg4NzIuNjk3N2wxNC45NjM1LDEuMDQ2M2M1LjUwOTQuMzg1Myw5LjY2MzMsNS4xNjM4LDkuMjc4MSwxMC42NzMybC0xLjA0NjMsMTQuOTYzNWMtLjM4NTMsNS41MDk0LTUuMTYzOCw5LjY2MzMtMTAuNjczMiw5LjI3ODFsLTE0Ljk2MzUtMS4wNDYzYy01LjUwOTQtLjM4NTMtOS42NjMzLTUuMTYzOC05LjI3ODEtMTAuNjczMmwxLjA0NjMtMTQuOTYzNUMyLjU5OTMsNC40NjYzLDcuMzc3OC4zMTI0LDEyLjg4NzIuNjk3N1oiLz4KICA8cGF0aCBpZD0iRmlsbC0yIiBjbGFzcz0ic3QwIiBkPSJNMjEuNzQxMiwxMi4wNjVjLjI2ODcuMDEyMS42NTg5LjIyMDcuNjUwMy40NTUtLjAyNDYuNjY2NS0uMTc5Ni42NTk1LS4yMDQxLDEuMzI2MS0uMDI0NS42NjY2LjAwMTcuNjY3Ny0uMDIyOCwxLjMzNDQtLjAyNDYuNjY2Ny0uMTkyMi42NTkyLS4yMTY4LDEuMzI2cS0uMDI0NS42NjY2LS4wNTA3LDEuMzMzMWMtLjAyMTYuNTg4NC4xMDUuNjYzMi4xMTgxLDEuMTMxMS4zMjQ0LjAyODIuNDQ5NS4wNDA2LjgyOC4wNzI0bC4yMDQ0LjAxN2MuNjgzOC4wNTYzLjY4MjYuMDcwOSwxLjM2NjMuMTI3NC42ODM1LjA1NjMuNjk3My0uMTE1NCwxLjM4MDgtLjA1OS42ODQuMDU2NC42Njk1LjIzNTMsMS4zNTM1LjI5MTcuNjg0LjA1NjQuNjgxOS4wODI0LDEuMzY1OS4xMzg4LjI0MDMuMDE5OC41MTAxLjIwMjMuNDg5MS40NjI4LS4wNDg5LjYwNzEuMDAwOC42MTEyLS4wNDgyLDEuMjE4My0uMDQ4OS42MDcxLS4yNTQzLjU5MDItLjMwMzIsMS4xOTczLS4wMjEuMjYwMy0uMTU5MS4zODc3LS4zOTkzLjM2NzktLjY4MzQtLjA1NjMtLjY4MzYtLjA1NDItMS4zNjcxLS4xMTA2LS42ODM1LS4wNTY0LS42ODQ0LS4wNDQyLTEuMzY3OS0uMTAwNi0uNjgzNi0uMDU2My0uNzAxOC4xNjk5LTEuMzg1NC4xMTM1LS42ODM1LS4wNTYzLS42NTk1LS4zNTM5LTEuMzQzLS40MTAyLS40NTY4LS4wMzc2LS42MDc5LS4wNTU3LS44NjE5LS4wODA0LS4wNDY2LjMzMTUtLjEyNTEuNDQ1OC0uMTQ0Ljk1OTktLjAyNDYuNjY2Ny4wMTkxLjY2ODgtLjAwNTQsMS4zMzU1LS4wMjQ2LjY2NjYtLjEyMjkuNjYyMi0uMTQ3NCwxLjMyODgtLjAyNDYuNjY3LjEuNjcyNy4wNzU1LDEuMzM5Ny0uMDI0Ni42NjcuMDIyNy42NjkyLS4wMDE4LDEuMzM2Mi0uMDA4Ny4yMzQzLS4zMTY5LjQ5NTctLjU4NTYuNDgzNy0uNjI2My0uMDI4LS42Mjc0LjAwMTQtMS4yNTM3LS4wMjY2LS42MjYzLS4wMjgtLjYxOTctLjIwNDYtMS4yNDYxLS4yMzI3LS4yNjg3LS4wMTItLjYxMDItLjE1NTEtLjYwMTYtLjM4OTQuMDI0Ni0uNjY2Ni4wOTUtLjY2MzQuMTE5NC0xLjMyOTkuMDI0Ni0uNjY2Ni0uMTAyNy0uNjcyNC0uMDc4Mi0xLjMzODkuMDI0NS0uNjY2Ny4xNDgxLS42NjEyLjE3MjctMS4zMjc5LjAyNDUtLjY2NjYuMTIyMy0uNjYyMi4xNDY4LTEuMzI4OC4wMjE5LS41OTQ0LS4wMjQzLS42NjEtLjAxNzMtMS4xNDExLS4zOC0uMDE5My0uNDkwMS4wMDUyLTEuMDQtLjA0MDItLjY4MzctLjA1NjQtLjY4MTQtLjA4NTItMS4zNjUxLS4xNDE1LS4yNzM0LS4wMjI2LS40NDE5LjAxOTQtLjU4OTUuMDc0MmwtLjIxNjEuMDg1NWMtLjE0NzUuMDU0OC0uMzE2MS4wOTY4LS41ODk1LjA3NDMtLjY4NC0uMDU2NC0uNjY5MS0uMjQwOC0xLjM1MzEtLjI5NzItLjY4NC0uMDU2NS0uNjg2LS4wMzEtMS4zNy0uMDg3NC0uMjQwMi0uMDE5OC0uMjgxLS4yNjI5LS4yNi0uNTIzMy4wNDktLjYwNzEuMDgxOS0uNjA0NC4xMzA5LTEuMjExNS4wNDg5LS42MDcxLS4xNTg3LS42MjQyLS4xMDk4LTEuMjMxNC4wMjEtLjI2MDQuMjU3NS0uMjY0OC40OTc3LS4yNDUuNjgzNS4wNTYzLjcwNDMtLjIwMjgsMS4zODc4LS4xNDY0LjY4MzUuMDU2My42ODM3LjA1NDEsMS4zNjcyLjExMDUuNjA3Ni4wNTAxLjY3MDEuMTE4NiwxLjE1NjYuMTcyOGwuMjA0Mi4wMTk2Yy42ODM1LjA1NjQuNjc3MS4xMzYxLDEuMzYwNi4xOTI2LjU2ODguMDQ2OS42NjIuMDgzNywxLjA3MDkuMTI3MS0uMDE3LS40NjQ3LS4xNzM4LS41NDI3LS4xNTIyLTEuMTI4OC4wMjQ1LS42NjY3LjA3NTktLjY2NDUuMTAwNC0xLjMzMTMuMDI0Ni0uNjY2Ni4wNzA3LS42NjQ1LjA5NTEtMS4zMzExLjAyNDUtLjY2NzEuMTMxMy0uNjYyNC4xNTU4LTEuMzI5NC4wMjQ2LS42NjctLjExOTgtLjY3MzUtLjA5NTMtMS4zNDA2LjAwODYtLjIzNDIuMjE0NC0uMjU5NC40ODMxLS4yNDczLjYyNjMuMDI3OS42MzI0LS4xMzc1LDEuMjU4OC0uMTA5NS42MjYyLjAyNzkuNjI1OS4wMzY5LDEuMjUyMi4wNjQ4WiIvPgogIDxwYXRoIGlkPSJGaWxsLTIxIiBkYXRhLW5hbWU9IkZpbGwtMiIgY2xhc3M9InN0MSIgZD0iTTE5LjM3NDQsOS45ODA2Yy4yNjEyLS4wMDY3LjY1MzQuMTc0Mi42NjEuNDA4Ni4wMjE0LjY2NjYtLjEyOTMuNjcwNS0uMTA4LDEuMzM3MS4wMjE1LjY2NjYuMDQ2OS42NjYuMDY4NCwxLjMzMjcuMDIxNC42NjY4LS4xNDE2LjY3MS0uMTIwMiwxLjMzNzhxLjAyMTUuNjY2Ni4wNDEyLDEuMzMzNGMuMDE5LjU4ODUuMTQ2Ny42NTQzLjE5MTEsMS4xMjAxLjM2NjcuMDA2My40NzI3LjAxMDIsMS4wMDY1LjAxNzEuNjY2NS4wMDg1LjY2NjMuMDIzMSwxLjMzMjYuMDMxNy42NjYyLjAwODUuNjY3OS0uMTYzOCwxLjMzNDEtLjE1NTIuNjY2Ni4wMDg1LjY2NDguMTg4LDEuMzMxNC4xOTY2LjY2NjYuMDA4NS42NjY0LjAzNDYsMS4zMzMuMDQzMS4yMzQyLjAwMy41MDguMTY2My41MDUzLjQyNzUtLjAwNjIuNjA5LjA0MjIuNjA5Ny4wMzU5LDEuMjE4Ny0uMDA2Mi42MDktLjIwNjUuNjA2NS0uMjEyNywxLjIxNTUtLjAwMjcuMjYxMi0uMTI3OS4zOTc5LS4zNjIuMzk0OS0uNjY2MS0uMDA4NS0uNjY2MS0uMDA2NC0xLjMzMjMtLjAxNDktLjY2NjItLjAwODYtLjY2NjMuMDAzNi0xLjMzMjQtLjAwNS0uNjY2My0uMDA4NS0uNjY4Ni4yMTg0LTEuMzM0OS4yMDk4LS42NjYyLS4wMDg1LS42NjMxLS4zMDctMS4zMjkzLS4zMTU1LS40NDU4LS4wMDU3LS41OTMzLS4wMTMyLS44NDE3LS4wMjAxLS4wMjE3LjMzNC0uMDkwMS40NTM1LS4wNzM1Ljk2NzYuMDIxNC42NjY4LjA2MzguNjY1OC4wODUzLDEuMzMyNi4wMjE0LjY2NjctLjA3NDMuNjY5Mi0uMDUyOCwxLjMzNTkuMDIxNC42NjcxLjE0MjUuNjY0LjE2NCwxLjMzMTEuMDIxNC42NjcxLjA2NzMuNjY2LjA4ODgsMS4zMzMxLjAwNzUuMjM0My0uMjczNS41MTY2LS41MzQ3LjUyMzQtLjYwODguMDE1Ny0uNjA3OS4wNDUxLTEuMjE2Ny4wNjEtLjYwODguMDE1Ny0uNjE0NC0uMTYwOS0xLjIyMzMtLjE0NTItLjI2MTIuMDA2OC0uNjAxOC0uMTEyMS0uNjA5NC0uMzQ2NS0uMDIxNC0uNjY2Ni4wNDcxLS42Njg0LjAyNTYtMS4zMzUtLjAyMTQtLjY2NjctLjE0NTEtLjY2MzYtLjE2NjUtMS4zMzAyLS4wMjE1LS42NjY4LjA5ODctLjY2OTkuMDc3NC0xLjMzNjctLjAyMTUtLjY2NjYuMDczNi0uNjY5Mi4wNTIyLTEuMzM1OC0uMDE5MS0uNTk0NS0uMDY4NC0uNjU3Ny0uMDk0MS0xLjEzNzEtLjM2OTcuMDA3My0uNDc0OS4wMzkzLTEuMDEwNi4wMzI1LS42NjY0LS4wMDg2LS42NjYxLS4wMzc0LTEuMzMyNC0uMDQ1OS0uMjY2NS0uMDAzNC0uNDI2OS4wNTAxLS41NjYyLjExNTFsLS4yMDM2LjEwMDNjLS4xMzkzLjA2NS0uMjk5Ny4xMTg2LS41NjYyLjExNTItLjY2NjYtLjAwODUtLjY2NDctLjE5MzUtMS4zMzEzLS4yMDItLjY2NjYtLjAwODYtLjY2NjkuMDE2OS0xLjMzMzYuMDA4NC0uMjM0MS0uMDAzLS4yOTAxLS4yNDI3LS4yODc0LS41MDM5LjAwNjMtLjYwOS4wMzg0LS42MDg2LjA0NDctMS4yMTc3LjAwNjItLjYwOS0uMTk2MS0uNjExNi0uMTg5OS0xLjIyMDcuMDAyNy0uMjYxMy4yMzE2LS4yODIxLjQ2NTctLjI3OTEuNjY2Mi4wMDg1LjY2ODgtLjI1MTQsMS4zMzUtLjI0MjguNjY2Mi4wMDg1LjY2NjIuMDA2MywxLjMzMjQuMDE0OC42NjYzLjAwODUuNjY1NC4wODg1LDEuMzMxNy4wOTcuNjY2Mi4wMDg2LjY2NTMuMDg4NiwxLjMzMTUuMDk3Mi41NTQxLjAwNzEuNjQ3MS4wMzcyLDEuMDQ1OC4wNTIxLS4wNDc0LS40NjI0LS4yMDQ2LS41MjkyLS4yMjM0LTEuMTE1NC0uMDIxNS0uNjY2OC4wMjg1LS42NjgxLjAwNzEtMS4zMzUxLS4wMjE0LS42NjY2LjAyMzQtLjY2NzkuMDAyLTEuMzM0NS0uMDIxNS0uNjY3Mi4wODI0LS42Njk5LjA2MDktMS4zMzctLjAyMTQtLjY2NzEtLjE2MTctLjY2MzUtLjE4MzItMS4zMzA3LS4wMDc2LS4yMzQzLjE5MDItLjI3MzcuNDUxNC0uMjgwNC42MDg4LS4wMTU4LjYwMzYtLjE4MTMsMS4yMTI0LS4xOTcuNjA4Ny0uMDE1OC42MDktLjAwNjksMS4yMTc5LS4wMjI3WiIvPgo8L3N2Zz4=) no-repeat center center; background-size: 3.7rem 3.7rem; } .faq .faq__content { margin-top: 1.5rem; } .faq .faq__content ol { padding: 0 0 0 1.8rem; display: flex; flex-direction: column; gap: 1rem; } .faq .faq__content ol li { padding: 0 0 0 0.5rem; } .faq .faq__content img, .faq .faq__content video, .faq .faq__content .wp-block-embed-youtube { border-radius: var(--border-radius-md); margin: 3rem 0; } .faq .faq__content blockquote { position: relative; padding: 2rem 0 2rem 2rem; } .faq .faq__content blockquote::before { content: ""; height: 100%; position: absolute; display: flex; width: 0.3rem; background-color: var(--bubblegum); left: 0; top: 0; } .faq .faq__content table { border-color: white; } .faq .faq__content .wp-block-embed-youtube { border-radius: var(--border-radius-md); overflow: hidden; } .faq .faq__content .wp-block-embed-youtube iframe { width: 100%; } .faq .faq__content li { font: var(--paragraph-font); } .faq .faq__content ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .faq .faq__content ul li { padding: 0 0 0 1.5rem; position: relative; } .faq .faq__content ul li::before { content: "•"; position: absolute; left: 0; top: 0; color: inherit; } .faq .faq__content a:not([class]) { color: #47AED3; font-weight: 500; } .faq .faq__content a:not([class]):hover { text-decoration: underline; } .faq:open .faq__title::after { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzOCAzOCI+CiAgPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI5LjUuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDIuMS4wIEJ1aWxkIDE0MSkgIC0tPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuc3QwLCAuc3QxLCAuc3QyIHsKICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7CiAgICAgIH0KCiAgICAgIC5zdDEgewogICAgICAgIGZpbGw6ICMxZDBlNDY7CiAgICAgIH0KCiAgICAgIC5zdDIgewogICAgICAgIGZpbGw6ICNkMmUwYjk7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICAgIG9wYWNpdHk6IC41OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iUmVjdGFuZ2xlLUNvcHktMiIgY2xhc3M9InN0MiIgZD0iTTEyLjkuN2wxNSwxYzUuNS40LDkuNyw1LjIsOS4zLDEwLjdsLTEsMTVjLS40LDUuNS01LjIsOS43LTEwLjcsOS4zbC0xNS0xYy01LjUtLjQtOS43LTUuMi05LjMtMTAuN2wxLTE1QzIuNiw0LjUsNy40LjMsMTIuOS43WiIvPgogIDxwYXRoIGlkPSJGaWxsLTIiIGNsYXNzPSJzdDAiIGQ9Ik0yNywyMi4yYy0uNywwLS43LDAtMS40LDAtLjcsMC0uNywwLTEuNCwwLS43LDAtLjcuMy0xLjQuMy0uNywwLS43LS4zLTEuNC0uMi0uNywwLS43LDAtMS40LDAtLjcsMC0uNywwLTEuNCwwLS43LDAtLjcsMC0xLjQsMC0uNywwLS43LDAtMS40LjEtLjcsMC0uNywwLTEuNCwwLS43LDAtLjcuNC0xLjMuNC0uNywwLS43LS4xLTEuNC0uMS0uNywwLS43LDAtMS40LjEtLjIsMC0uMy0uMi0uMy0uNSwwLS42LDAtLjYsMC0xLjIsMC0uNi0uMi0uNi0uMy0xLjIsMC0uMy4yLS4zLjUtLjMuNywwLC43LS4zLDEuNC0uMy43LDAsLjcsMCwxLjQsMCwuNywwLC43LDAsMS40LDAsLjcsMCwuNywwLDEuNCwwLC43LDAsLjcsMCwxLjQsMCwuNywwLC43LS4xLDEuNC0uMS43LDAsLjctLjEsMS40LS4xLjcsMCwuNywwLDEuNCwwLC43LDAsLjcsMCwxLjQsMCwuNywwLC43LS4yLDEuNC0uMy43LDAsLjcuMSwxLjQuMXMuNywwLDEuNCwwYy4yLDAsLjUuMS41LjQsMCwuNiwwLC42LjEsMS4yLDAsLjYtLjIuNi0uMSwxLjIsMCwuMy0uMS40LS4zLjQiLz4KICA8cGF0aCBpZD0iRmlsbC0yMSIgZGF0YS1uYW1lPSJGaWxsLTIiIGNsYXNzPSJzdDEiIGQ9Ik0yNi45LDIwLjdjLS43LDAtLjcsMC0xLjMsMC0uNywwLS43LDAtMS4zLDAtLjcsMC0uNy4yLTEuMy4yLS43LDAtLjctLjMtMS4zLS4zLS43LDAtLjcsMC0xLjMsMC0uNywwLS43LDAtMS4zLDAtLjcsMC0uNywwLTEuMywwLS43LDAtLjcsMC0xLjMsMC0uNywwLS43LDAtMS4zLDAtLjcsMC0uNy4zLTEuMy4zLS43LDAtLjctLjItMS4zLS4yLS43LDAtLjcsMC0xLjMsMC0uMiwwLS4zLS4yLS4zLS41LDAtLjYsMC0uNiwwLTEuMiwwLS42LS4yLS42LS4yLTEuMiwwLS4zLjItLjMuNS0uMy43LDAsLjctLjMsMS4zLS4yLjcsMCwuNywwLDEuMywwLC43LDAsLjcsMCwxLjMsMCwuNywwLC43LDAsMS4zLDAsLjcsMCwuNywwLDEuMywwcy43LDAsMS4zLDBjLjcsMCwuNywwLDEuMywwLC43LDAsLjcsMCwxLjMsMCwuNywwLC43LDAsMS4zLDAsLjcsMCwuNy0uMiwxLjMtLjIuNywwLC43LjIsMS4zLjIuNywwLC43LDAsMS4zLDAsLjIsMCwuNS4yLjUuNCwwLC42LDAsLjYsMCwxLjIsMCwuNi0uMi42LS4yLDEuMiwwLC4zLS4xLjQtLjQuNCIvPgo8L3N2Zz4=); } @media screen and (max-width: 991px) { .faq { padding: 2rem; } .faq .faq__title { gap: 1.2rem; } } .faq-list { display: flex; flex-direction: column; gap: 1.5rem; list-style: none; padding: 0; margin: 0; } @keyframes postCardIn { 0% { opacity: 0; } 100% { opacity: 0.5; } } .post-card .post-card__media { position: relative; z-index: 2; } .post-card .post-card__media picture { overflow: hidden; border-radius: var(--border-radius-md); } .post-card .post-card__media img { width: 100%; transition: transform 200ms linear; } .post-card.post-card--blue:hover .post-card__content { background-color: var(--bubblegum); } .post-card.post-card--green:hover .post-card__content { background-color: var(--mint); } .post-card.post-card--purple .post-card__content .post-card__title { color: white; } .post-card.post-card--purple:hover .post-card__media { position: relative; overflow: visible; position: relative; overflow: visible; } .post-card.post-card--purple:hover .post-card__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-md)); background-color: var(--banana); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .post-card.post-card--purple:hover .post-card__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .post-card.post-card--purple:hover .post-card__media::before { opacity: 0; animation: postCardIn 300ms forwards linear; } .post-card.post-card--purple:hover .post-card__media::after { opacity: 0; animation: postCardIn 300ms 300ms forwards linear; } .post-card.post-card--purple:hover .post-card__content { background-color: var(--raspberry-dark); } .post-card.post-card--purple:hover .post-card__content .post-card__title { color: white; } .post-card.post-card--purple .post-card__content { background-color: var(--raspberry); } .post-card.post-card--purple .post-card__taxonomy::before { background-color: var(--bubblegum); } .post-card:hover .post-card__media { position: relative; overflow: visible; position: relative; overflow: visible; } .post-card:hover .post-card__media img { transform: scale(1.1); } .post-card:hover .post-card__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-md)); background-color: var(--strawberry); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .post-card:hover .post-card__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .post-card:hover .post-card__media::before { opacity: 0; animation: postCardIn 300ms forwards linear; } .post-card:hover .post-card__media::after { opacity: 0; animation: postCardIn 300ms 300ms forwards linear; } .post-card:hover .post-card__content { box-shadow: var(--shadow); background-color: var(--banana); } .post-card .post-card__content { padding: 4.5rem 2rem 2.5rem; background-color: var(--waffle); border-bottom-left-radius: var(--border-radius-md); border-bottom-right-radius: var(--border-radius-md); margin-top: -2rem; position: relative; z-index: 1; min-height: 13.3rem; transition: background-color 200ms linear; } .post-card .post-card__title { text-transform: initial; margin-bottom: 0; } .post-card .post-card__taxonomy { z-index: 2; position: relative; font: var(--heading-four-font); color: var(--headings); position: absolute; bottom: -0.7rem; left: 2rem; } .post-card .post-card__taxonomy::before { content: ""; z-index: -1; background-color: var(--strawberry); border-radius: 0.8rem; display: block; position: absolute; left: -0.7rem; top: -0.5rem; width: calc(100% + 1.4rem); height: calc(100% + 1rem); transform: rotate(var(--rotate-right-sm)) translateY(0.2rem); } .post-card.post-card--featured { display: flex; align-items: center; } .post-card.post-card--featured .post-card__media img { height: 49.7rem; width: 71.5rem; } .post-card.post-card--featured .post-card__taxonomy { margin-bottom: 2.5rem; position: relative; left: 0.7rem; bottom: 0; } .post-card.post-card--featured .post-card__content { padding: 4rem; min-height: 37.7rem; min-width: 53rem; width: 53rem; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; margin-top: 0; border-top-right-radius: var(--border-radius-md); border-bottom-right-radius: var(--border-radius-md); border-bottom-left-radius: 0; } @media screen and (max-width: 1200px) { .post-card.post-card--featured .post-card__content { padding: 4rem; min-width: 45rem; min-height: initial; } .post-card.post-card--featured .post-card__media img { height: auto; } .post-card.post-card--featured .post-card__taxonomy { margin-bottom: 1.5rem; } } @media screen and (max-width: 991px) { .post-card.post-card--featured { flex-direction: column; width: 100%; max-width: 53rem; margin: 0 auto; } .post-card.post-card--featured .post-card__content { border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); padding: 6rem 2rem 4rem; margin-top: -2rem; width: 100%; min-width: initial; } } @media screen and (max-width: 767px) { .swiper-slide-active .post-card .post-card__media { position: relative; overflow: visible; position: relative; overflow: visible; } .swiper-slide-active .post-card .post-card__media img { transform: scale(1.1); } .swiper-slide-active .post-card .post-card__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-md)); background-color: var(--strawberry); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .swiper-slide-active .post-card .post-card__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .swiper-slide-active .post-card .post-card__media::before { opacity: 0; animation: postCardIn 300ms forwards linear; } .swiper-slide-active .post-card .post-card__media::after { opacity: 0; animation: postCardIn 300ms 300ms forwards linear; } .swiper-slide-active .post-card .post-card__content { box-shadow: var(--shadow); background-color: var(--banana); } .swiper-slide-active .post-card.post-card--purple .post-card__media { position: relative; overflow: visible; position: relative; overflow: visible; } .swiper-slide-active .post-card.post-card--purple .post-card__media::before { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-left-md)); background-color: var(--banana); opacity: 0.5; z-index: -2; border-radius: var(--border-radius-md); } .swiper-slide-active .post-card.post-card--purple .post-card__media::after { content: ""; position: absolute; display: block; width: 100%; top: -0.5rem; height: calc(100% + 1rem); transform: rotate(var(--rotate-right-md)); background-color: var(--bubblegum); opacity: 0.5; z-index: -1; border-radius: var(--border-radius-md); } .swiper-slide-active .post-card.post-card--purple .post-card__media::before { opacity: 0; animation: postCardIn 300ms forwards linear; } .swiper-slide-active .post-card.post-card--purple .post-card__media::after { opacity: 0; animation: postCardIn 300ms 300ms forwards linear; } .swiper-slide-active .post-card.post-card--purple .post-card__content { background-color: var(--raspberry-dark); } .swiper-slide-active .post-card.post-card--purple .post-card__content .post-card__title { color: white; } .post-card.post-card--featured { max-width: initial; } .post-card.post-card--featured .post-card__content { margin: -2rem -2rem 0; width: calc(100% + 4rem); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .post-card.post-card--featured .post-card__media { margin: 0 -1.5rem 0; } } .ingredients { background-color: white; box-shadow: var(--shadow); border-radius: var(--border-radius-md); padding: 2.5rem; } .ingredients .ingredients__group + .ingredients__group { margin-top: 2rem; } .ingredients .ingredients__title { margin-bottom: 1.5rem; } .ingredients .ingredients__heading { font-weight: 900; text-transform: uppercase; } .ingredients .ingredients__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; margin: 0; } .ingredients .ingredients__item { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } .ingredients .ingredients__item span { font: var(--paragraph-font); } .ingredients .ingredients__item .ingredient__quantity { font-weight: 500; min-width: 8.1rem; text-align: right; } @media screen and (max-width: 991px) { .ingredients .ingredients__item { flex-direction: column; align-items: flex-start; gap: 0; } .ingredients .ingredients__item .ingredient__quantity { min-width: initial; } } :root { --grid-columns: 12; --grid-grid-spacing: 1.5rem; --grid-xs: 576px; --grid-sm: 768px; --grid-md: 992px; --grid-lg: 1200px; --grid-xlg: 1280px; --grid-xxs-max: 575px; --grid-xs-max: 767px; --grid-sm-max: 991px; --grid-md-max: 1199px; --grid-lg-max: 1279px; } .header.header--home-header { height: 64rem; padding: 0; overflow: hidden; position: relative; } .header.header--home-header .container-full { position: relative; height: 100%; } .header.header--home-header .header__bg-right { position: absolute; right: -17.2%; bottom: 0; z-index: 1; pointer-events: none; user-select: none; } .header.header--home-header .header__bg-right img { width: 100rem; min-width: 100rem; height: 50.8rem; } .header.header--home-header .header__bg-left { position: absolute; left: -12.1%; bottom: 0; z-index: 1; user-select: none; pointer-events: none; } .header.header--home-header .header__bg-left img { width: 58rem; min-width: 58rem; height: 50.8rem; } .header.header--home-header .header__bg-mobile { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; display: none; } .header.header--home-header .header__bg-mobile img { width: 100%; height: auto; } .header.header--home-header .header__background { position: absolute; z-index: 1; } .header.header--home-header .header__background .embed-container { width: 100%; height: 64rem; padding-bottom: 0; } .header.header--home-header .header__background .embed-container video, .header.header--home-header .header__background .embed-container image { width: 100%; height: 100%; object-fit: cover; } .header.header--home-header .header__content { position: relative; z-index: 2; } .header.header--home-header .header__content { padding: 24rem 0; } .header.header--home-header .header__title { display: block; width: 61rem; max-width: 100%; } @media screen and (max-width: 1279px) { .header.header--home-header .header__bg-right { right: -22.2%; } } @media screen and (max-width: 1210px) { .header.header--home-header .header__bg-right { right: -32%; } } @media screen and (max-width: 1120px) { .header.header--home-header .header__bg-right { right: -39%; } } @media screen and (max-width: 1060px) { .header.header--home-header .header__bg-right { right: -47%; } } @media screen and (max-width: 1010px) { .header.header--home-header .header__bg-right { right: -52%; } } @media screen and (max-width: 960px) { .header.header--home-header .header__bg-right { right: -56%; } .header.header--home-header .header__bg-left { left: -21%; } } @media screen and (max-width: 830px) { .header.header--home-header .header__bg-right { right: -61%; } .header.header--home-header .header__bg-left { left: -25%; } } @media screen and (max-width: 767px) { .header.header--home-header { height: auto; } .header.header--home-header .header__bg-right, .header.header--home-header .header__bg-left { display: none; } .header.header--home-header .header__bg-mobile { display: initial; } .header.header--home-header .header__content { padding: 12.5rem 0 55rem; } } @media screen and (max-width: 660px) { .header.header--home-header .header__content { padding-bottom: 45rem; } } @media screen and (max-width: 530px) { .header.header--home-header .header__content { padding-bottom: 35rem; } } :root { --primary: #FEDC48; --secondary: #5c5cff; --headings: #1D0E46; --text: #575168; --wafer: #FFF5E9; --light-pink: #F0A3B7; --strawberry: #F0A3B7; --sky-blue: #94D4EB; --vanilla: #FFEDB9; --banana: #FEDC48; --bubblegum: #94D4EB; --raspberry: #A17CB6; --raspberry-dark: #1D0E46; --waffle: #FEEAD5; --mint: #D2E0B9; --shadow-colour: rgba(34, 17, 80, 0.1); --shadow: 0 0.8rem 2rem 0 rgba(34, 17, 80, 0.1); --midnight-blue: #1D0E46; --rotate-left-xs: -1deg; --rotate-left-sm: -2deg; --rotate-left-md: -3deg; --rotate-left-lg: -4deg; --rotate-right-xs: 1deg; --rotate-right-sm: 2deg; --rotate-right-md: 3deg; --rotate-right-lg: 4deg; --section-padding-sm: 3rem; --section-padding-md: 6rem; --section-padding-lg: 12rem; --section-padding-xlg: 20rem; --grid-padding-sm: 1rem; --grid-padding-md: 2rem; --grid-padding-lg: 3rem; --font-family: poppins, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --heading-font-family: colby, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; --border-radius-xs: 0.5rem; --border-radius-sm: 1rem; --border-radius-md: 2.5rem; --border-radius-lg: 3rem; --border-radius-xlg: 4rem; --swiper-pagination-bullet-inactive-color: transparent; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-height: 1.8rem; --swiper-pagination-bullet-width: 1.8rem; --swiper-pagination-color: white; --header-opacity: 0.5; --primary-btn-bg: #FEDC48; --primary-btn-text: #1D0E46; --primary-btn-border: #FEDC48; --primary-btn-hover-bg: rgb(253.722826087, 210.2989130435, 21.277173913); --primary-btn-hover-text: #1D0E46; --primary-btn-hover-border: rgb(253.722826087, 210.2989130435, 21.277173913); --secondary-btn-bg: #94D4EB; --secondary-btn-text: #1D0E46; --secondary-btn-border: #94D4EB; --secondary-btn-hover-bg: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-border: rgb(105.031496063, 194.7322834646, 226.968503937); --secondary-btn-hover-text: #1D0E46; --tertiary-btn-bg: #FDDFC1; --tertiary-btn-text: #1D0E46; --tertiary-btn-border: #FDDFC1; --tertiary-btn-hover-bg: rgb(251.40625, 197.5, 143.59375); --tertiary-btn-hover-text: #1D0E46; --tertiary-btn-hover-border: rgb(251.40625, 197.5, 143.59375); --green-btn-bg: #D2E0B9; --green-btn-text: #1D0E46; --green-btn-border: #D2E0B9; --green-btn-hover-bg: rgb(187.2772277228, 208.3465346535, 149.6534653465); --green-btn-hover-text: #1D0E46; --green-btn-hover-border: rgb(187.2772277228, 208.3465346535, 149.6534653465); --pink-btn-bg: #F0A3B7; --pink-btn-text: #1D0E46; --pink-btn-border: #F0A3B7; --pink-btn-hover-bg: rgb(232.8504672897, 119.1495327103, 148.6822429907); --pink-btn-hover-text: #1D0E46; --pink-btn-hover-border: rgb(232.8504672897, 119.1495327103, 148.6822429907); --purple-btn-bg: #A17CB6; --purple-btn-text: white; --purple-btn-border: #A17CB6; --purple-btn-hover-bg: rgb(137.5, 91.25, 163.75); --purple-btn-hover-text: white; --purple-btn-hover-border: rgb(137.5, 91.25, 163.75); } @media screen and (max-width: 767px) { :root { --section-padding-sm: 3rem; --section-padding-md: 4rem; --section-padding-lg: 6rem; --section-padding-xlg: 10rem; } } .header.header--post { position: relative; overflow: hidden; padding-top: 18.8rem; padding-bottom: 24rem; min-height: 64rem; } .header.header--post .container { position: relative; z-index: 2; } .header.header--post .header__title { text-align: center; } .header.header--post .header__tags, .header.header--post .header__time { text-align: center; } .header.header--post .header__time { display: block; width: 100%; margin-top: 2.4rem; } .header.header--post + .section--featured-image { margin-top: -20rem; position: relative; z-index: 2; } .header.header--post + .section--featured-image picture, .header.header--post + .section--featured-image picture img { width: 100%; } .header.header--post + .section--featured-image picture img { border-radius: var(--border-radius-md); } .header .header__overlay { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; } .header::after { content: ""; position: absolute; display: block; left: 0; top: 0; background: url(/wp-content/themes/class/dist/images/waffle--trans.png) repeat; background-size: 15rem; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: 0.2; z-index: 0; } .header.header--pink { background-color: rgba(240, 163, 183, 0.6); } .header.header--pink .header__overlay { background: radial-gradient(circle 55rem, transparent, rgba(233.5654205607, 123.5345794393, 152.1140186916, 0.7)); opacity: 0.7; } .header.header--pink::after { opacity: 0.2; } .header.header--blue { background-color: rgba(148, 212, 235, 0.6); } .header.header--blue .header__overlay { background: radial-gradient(circle 55rem, transparent, rgb(83.5472440945, 186.0984251969, 222.9527559055)); opacity: 0.5; } .header.header--blue::after { opacity: 0.4; } .header.header--purple { background-color: rgba(161, 124, 182, 0.6); } .header.header--purple .header__overlay { background: radial-gradient(circle 55rem, transparent, rgb(123.75, 82.125, 147.375)); opacity: 0.7; } .header.header--purple::after { opacity: 0.2; } .header.header--beige { background-color: rgba(255, 240.3636363636, 222.8, 0.6); } .header.header--beige .header__overlay { background: radial-gradient(circle 55rem, transparent, rgb(253.0511627907, 214.0744186047, 173.1488372093)); opacity: 0.4; } .header.header--beige::after { opacity: 0.7; } .header.header--yellow { background-color: rgba(253.639673913, 207.3885869565, 6.060326087, 0.5); } .header.header--yellow .header__overlay { background: radial-gradient(circle 55rem, transparent, rgb(248.1440217391, 202.0407608696, 1.3559782609)); opacity: 0.6; } .header.header--yellow::after { opacity: 0.7; } .header.header--green { background-color: rgba(210, 224, 185, 0.6); } .header.header--green .header__overlay { background: radial-gradient(circle 55rem, transparent, rgb(187.2772277228, 208.3465346535, 149.6534653465)); opacity: 0.6; } .header.header--green::after { opacity: 0.5; } @media screen and (max-width: 767px) { .header.header--post.header--purple::before { background: radial-gradient(circle 28rem, transparent, rgb(123.75, 82.125, 147.375)); } .header.header--post.header--beige::before { background: radial-gradient(circle 28rem, transparent, rgb(253.0511627907, 214.0744186047, 173.1488372093)); } .header.header--post.header--pink::before { background: radial-gradient(circle 28rem, transparent, rgba(233.5654205607, 123.5345794393, 152.1140186916, 0.7)); } .header.header--post.header--blue::before { background: radial-gradient(circle 28rem, transparent, rgb(83.5472440945, 186.0984251969, 222.9527559055)); } .header.header--post.header--yellow::before { background: radial-gradient(circle 28rem, transparent, rgb(248.1440217391, 202.0407608696, 1.3559782609)); } .header.header--post.header--green::before { background: radial-gradient(circle 28rem, transparent, rgb(187.2772277228, 208.3465346535, 149.6534653465)); } } font[size="1"] { margin-left: auto; margin-right: auto; align-self: center; justify-self: center; } font[size="1"] + br { display: none; } .xdebug-error { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; color: #000000; font-size: 1.4rem; margin-left: auto; margin-right: auto; width: 100%; max-width: 120rem; border-radius: 0; border: none; margin-bottom: 2rem; line-height: normal; letter-spacing: normal; word-spacing: normal; } .xdebug-error a { color: inherit; border: none; text-decoration: underline; } .xdebug-error a:before, .xdebug-error a:after { content: none; } .xdebug-error td { padding: 0.05rem 0.5rem; } .xdebug-error th { padding: 0.15rem 0.5rem; } .xdebug-error pre { margin: 0; padding: 0.15rem 0.5rem; } .xdebug-error + br { display: none; } .fade-in-up { opacity: 0; transform: translateY(1rem); transition: all 600ms linear; } .lazyloaded.fade-in-up { opacity: 1; transform: translateY(0); } html { color: rgb(83, 186, 222); } /* #endregion "./wp-content/themes/class/resources/styles/theme.scss" */ /*# sourceMappingURL=main.css.map*/