.border-box, .box-sizing-border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box
}


html:not(.mobile) .bg-color-true-white-on-hover:hover {
  background-color: #fff
}

.display-none {
  display: none
}

.flexbox {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex
}

.flex-center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}

.flex-justify-center, .justify-content-center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.absolute, .position-absolute {
  position: absolute
}

#site, .position-relative, .relative {
  position: relative
}


.text-align-center, .text-center {
  text-align: center
}

.fill {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

body, h1, h2, h3, h4, h5, h6, p {
  margin: 0
}

.transition-duration-instant {
  -webkit-transition-duration: 90ms;
  -moz-transition-duration: 90ms;
  -ms-transition-duration: 90ms;
  -o-transition-duration: 90ms;
  transition-duration: 90ms
}

.transition-ease-out-expo {
  -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  -moz-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  -ms-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.color-yellow, .markdown a:hover {
  color: #ffdd63
}

.bg-color-yellow {
  background-color: #ffdd63
}

.color-red {
  color: #db311e
}

.bg-color-red {
  background-color: #db311e
}

.redirect_link {
  color: #f8f6ef;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.redirect_link:hover {
  color: #ffdd63;
}

.color-white, .watermark a {
  color: #f8f6ef
}

.bg-color-white {
  background-color: #f8f6ef
}

.text-current {
  font-size: 2rem
}

.text-taller {
  font-size: 2.8rem
}

.text-huge {
  font-size: 4rem
}

.margin-top-broad {
  margin-top: 3.2rem
}

.margin-top-normal {
  margin-top: 2.2rem
}

.padding-vertical-broad {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem
}

.transparent {
  opacity: 0
}

.width-tera {
  width: 34rem
}

:root {
  --unit-root: 10;
  --security-root: 60;
  --fluid-breakpoint-root: 1560;
  --perimeter-root: calc(var(--fluid-breakpoint-root) - var(--security-root) * 2);
  --unit-in-vw: calc(var(--unit-root) * 100 / var(--fluid-breakpoint-root) * 1vw);
  --unit-in-px: calc(var(--unit-root) * 1px)
}

@media screen and (min-width: 620px) {
  html {
    --type-factor: 2
  }
}

@media screen and (min-width: 890px) {
  html {
    --type-factor: 1.25
  }
}

@media screen and (min-width: 1120px) {
  html {
    --type-factor: 1
  }
}

@media screen and (min-width: 1560px) {
  html {
    font-size: var(--unit-in-px)
  }
}

*, ::after, ::before {
  box-sizing: border-box
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed
}

ol, ul {
  padding: 0;
  margin: 0;
  list-style: none
}

hr {
  height: 0;
  background: 0 0;
  display: block
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  text-rendering: optimizeLegibility
}

img {
  max-width: 100%
}

sup {
  line-height: 0;
  font-size: .45em
}

button, input, select, textarea {
  font: inherit;
  outline-color: #000;
  background: 0 0
}

blockquote, button, fieldset, hr, input, select, textarea {
  margin: 0;
  padding: 0;
  border: 0
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

.markdown strong, html {
  font-family: Graphik Black
}

html ::selection {
  background-color: #ffdd63
}

html .color-yellow::selection {
  color: #f8f6ef
}

html body {
  min-width: 200px;
  font-family: Graphik Black;
  background-color: #f8f6ef
}

img, svg {
  display: block;
  width: 100%;
  height: 100%
}

img {
  object-fit: cover
}

html:not(.mobile) .watermark-target:hover .opaque-on-target-hover {
  opacity: 1
}

html:not(.mobile) .watermark-target:hover .transparent-on-target-hover {
  opacity: 0
}

.srt {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap
}

.width-fit-content {
  width: fit-content;
  width: -moz-fit-content
}

@media screen and (min-width: 760px) {
  .width-11_20-from-xs {
    width: 55%
  }
}

@media screen and (min-width: 1560px) {
  .max-width-42rem-from-xl {
    max-width: 42rem
  }

  .max-height-42rem-from-xl {
    max-height: 42rem
  }
}

.top-1_10 {
  top: 10%
}

.top-1_20 {
  top: 5%
}

.bottom-1_20 {
  bottom: 5%
}


.translate-x-minus-1_5 {
  transform: translateX(-20%)
}

.translate-x-1_5-rotate-180 {
  transform: translateX(20%) rotate(180deg)
}

@media screen and (min-width: 1120px) {
  .line-height-normal-from-md {
    line-height: 1.5
  }
}

header.site-header {
  --transform-duration: 1000ms;
  transition: transform var(--transform-duration) cubic-bezier(.19, 1, .22, 1) var(--fade-duration), opacity 0s linear;
  opacity: 1;
  transform: none
}

header.site-header .site-logo {
  transition: transform var(--transform-duration) cubic-bezier(.19, 1, .22, 1) calc(var(--transform-duration) / 2)
}

header.site-header .site-logo .logo-intro {
  display: none
}

header.site-header[data-transitioning] {
  transition: opacity var(--fade-duration) linear, transform 0s linear var(--fade-duration);
  opacity: 0;
  transform: translateY(-100%)
}

header.site-header[data-transitioning=intro] .site-logo {
  transform: translateY(-150%)
}

header.site-header .nav-panel {
  --duration: 600ms;
  visibility: hidden;
  transition: transform var(--duration) cubic-bezier(.19, 1, .22, 1), visibility 0s linear var(--duration)
}

header.site-header .nav-panel[data-state=active] {
  transition-delay: 0s;
  visibility: visible;
  transform: translateX(-100%)
}

header.site-header .nav-panel a:hover, header.site-header .nav-panel a:hover > * {
  opacity: .9
}

header.site-header .nav-desktop-link {
  position: relative
}

header.site-header .nav-desktop-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 20px;
  background-color: #ffdd63;
  transition: transform 500ms cubic-bezier(.19, 1, .22, 1);
  transform: scaleX(0)
}

html:not(.mobile) header.site-header .nav-desktop-link:hover::after {
  transform: none
}

header.site-header .nav-desktop-item:last-of-type {
  margin-left: 8rem
}

footer p {
  margin-top: 2.4rem;
  color: #f8f6ef;
  text-align: center;
  font-size: 2rem;
  line-height: 1.5;
  font-family: 'Graphik SemiBold'
}

footer .text-ctn a {
  color: #f8f6ef;
  text-decoration: none
}

footer .logo-ctn {
  --size: 24rem;
  width: var(--size);
  margin-top: calc(calc(var(--size) / 2.01) * -1)
}

footer nav ul li a {
  transition: transform 600ms cubic-bezier(.19, 1, .22, 1)
}

footer nav ul li a:hover {
  transform: rotate(5deg);
  outline: 1px solid transparent
}

@media screen and (min-width: 890px) {
  footer .text-ctn a, footer address p {
    font-size: 2.4rem
  }
}

@media screen and (max-width: 1120px) {
  .gap-thin {
    gap: 20px
  }
}

@media screen and (min-width: 1120px) {
  .gap-thin {
    gap: 50px
  }
}

.site-logo {
  width: 11.6rem;
  height: 8.4rem;
  min-width: 116px;
  min-height: 84px
}

@media screen and (min-width: 1120px) {
  .site-logo {
    width: 16rem;
    height: 11.8rem
  }
}

.nav-panel-item:nth-of-type(even) .nav-panel-link {
  background-color: #ffdd63
}

.nav-panel-item + .nav-panel-item {
  padding-top: 2.4rem
}

.nav-panel-item:first-of-type {
  --rotation: 5deg;
  transform: rotate(var(--rotation)) translateX(-45%)
}

.nav-panel-item:nth-of-type(2) {
  --rotation: -14deg;
  transform: rotate(var(--rotation)) translateX(30%)
}

.nav-panel-item:nth-of-type(3) {
  --rotation: -3deg;
  transform: rotate(var(--rotation)) translateX(-50%)
}

.nav-panel-item:nth-of-type(4) {
  --rotation: 8.86deg;
  transform: rotate(var(--rotation)) translateX(30%)
}

.nav-panel-item:nth-of-type(5) {
  --rotation: -5deg;
  transform: rotate(var(--rotation)) translateX(-45%)
}

@media screen and (min-width: 1120px) {
  .nav-panel-item + .nav-panel-item {
    padding-top: 0
  }

  .nav-panel-item:nth-of-type(even) {
    transform: rotate(var(--rotation)) translate(-30%, 100%)
  }

  .nav-panel-item:nth-of-type(odd) {
    transform: rotate(var(--rotation)) translate(-20%, -75%)
  }

  .nav-panel-item:first-of-type {
    transform: rotate(var(--rotation)) translate(0, -75%)
  }
}

.marquee-content-outside {
  animation: marquee var(--duration) linear infinite
}

.marquee-content-outside.shifted {
  animation: marquee-shifted var(--duration) linear infinite
}

.marquee-content-inside {
  animation: marquee var(--duration) linear infinite reverse
}

@media (prefers-reduced-motion) {
  .marquee-content-inside, .marquee-content-outside, .marquee-content-outside.shifted {
    animation: none
  }
}

.media-text-media {
  --scale-init: 0.8;
  --scale-full: 1;
  --scale-range: calc(var(--scale-full) - var(--scale-init));
  --duration: 800ms;
  transform: translate3d(0, 0, 0) scale(var(--scale-init))
}

.media-text-media img, .media-text-media video {
  transform: scale(calc(1 / var(--scale-init)))
}

.media-text-media[data-scroll=in] {
  animation: scale-bounce var(--duration) linear forwards reverse
}

.media-text-media[data-scroll=in] img, .media-text-media[data-scroll=in] video {
  animation: counter-scale-bounce var(--duration) linear forwards reverse
}

.parallax {
  opacity: 0;
  transition: opacity 150ms linear
}

.parallax .parallax-img {
  animation: none
}

.parallax[data-scroll=in] {
  opacity: 1
}

.parallax[data-scroll=in] .parallax-img {
  --translation: calc(calc(var(--distance)) / 3 * var(--direction));
  --comp-viewport-y: calc(calc(var(--viewport-y) + 1) / 2);
  transform: translateY(calc(var(--comp-viewport-y) * var(--translation)));
  animation: expand 1000ms cubic-bezier(.19, 1, .22, 1)
}

@media screen and (min-width: 760px) {
  .parallax[data-scroll=in] .parallax-img {
    --translation: calc(calc(var(--distance)) / 2 * var(--direction))
  }
}

@media screen and (min-width: 1120px) {
  .parallax[data-scroll=in] .parallax-img {
    --translation: calc(calc(var(--distance)) * var(--direction))
  }
}

.carousel .swiper-slide {
  --spacing: 1.6rem;
  width: 90%;
  max-width: 54rem;
  margin-right: var(--spacing)
}

.carousel .swiper-slide:first-of-type {
  margin-left: var(--spacing)
}

.carousel .swiper-scrollbar-drag {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: #ffdd63;
  cursor: grab
}

.carousel .swiper-scrollbar-drag:active {
  cursor: grabbing
}

.carousel .swiper-button {
  transition: transform 300ms cubic-bezier(.37, 2, .36, 2)
}

html:not(.mobile) .carousel .swiper-button:hover {
  transform: scale(1.2)
}

.carousel .swiper-button:active {
  transform: scale(.9) !important
}

@media screen and (min-width: 1120px) {
  .carousel .swiper-slide {
    --spacing: 2.4rem
  }
}

form label {
  transition: transform 150ms ease;
  transform-origin: left center
}

form input:focus ~ label, form input:not(:placeholder-shown) ~ label {
  transform: translateY(-120%) scale(.6)
}

form textarea:focus ~ label, form textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-40%) scale(.6)
}

form .form-field .form-field-hint {
  visibility: hidden
}

form .form-field.is-invalid .form-field-hint {
  visibility: visible;
  animation: bounce-x 400ms linear forwards
}

form .button-submit-loader {
  display: none;
  margin-right: 3.2rem;
  margin-left: 3.2rem
}

form .button-submit-loader .balls {
  width: 3.5em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between
}

form .button-submit-loader .balls div {
  width: .8em;
  height: .8em;
  border-radius: 50%;
  background-color: #ffdd63;
  transform: translateY(-100%);
  animation: wave .4s ease-in-out alternate infinite
}

form .button-submit-loader .balls div:nth-of-type(1) {
  animation-delay: -.4s
}

form .button-submit-loader .balls div:nth-of-type(2) {
  animation-delay: -.2s
}

form.is-submitting .button-submit .label {
  display: none
}

form.is-submitting .button-submit .button-submit-loader {
  display: block
}

.form-field-file .label {
  pointer-events: none;
  left: calc(2.4rem - 4px);
  right: calc(2.4rem - 4px)
}

.form-field-file .input {
  min-height: 9.3rem
}

.emphasis-text a {
  display: inline-block;
  padding: 1.6rem 4rem;
  border-radius: 100px;
  text-decoration: none;
  background-color: #ffdd63;
  color: #db311e;
  font-size: 2.8rem;
  text-transform: capitalize;
  transform: translateY(-.25em);
  line-height: 1
}

@media screen and (min-width: 1120px) {
  .emphasis-text a {
    font-size: 4rem;
    transform: translateY(-.15em)
  }
}

.product-heading-basic-animation[data-scroll=in] {
  animation: reveal 600ms cubic-bezier(.19, 1, .22, 1)
}

.product {
  opacity: 0;
  transition: opacity 100ms linear
}

.product[data-scroll=in] {
  opacity: 1
}

.product[data-scroll=in] .heading-product-img {
  --scale-init: 0.8;
  --scale-full: 1;
  --scale-range: calc(var(--scale-full) - var(--scale-init));
  --duration: 800ms;
  animation: scale-bounce var(--duration) linear forwards reverse
}

.product-nav {
  display: grid;
  grid-template-columns:repeat(var(--item-count), 1fr);
  gap: .8rem
}

@media screen and (min-width: 1120px) {
  .product-nav {
    gap: 2.4rem
  }
}

.drawer-trigger .drawer-chevron {
  transition: transform 600ms cubic-bezier(.19, 1, .22, 1), color 200ms linear
}

.drawer-trigger.is-auto-slide-click .drawer-chevron {
  transform: rotate(540deg);
  color: #ffdd63
}

.markdown.text > :not(picture):not(img) {
  max-width: 82rem;
  margin-left: auto;
  margin-right: auto
}

.markdown.text * + *, .markdown.text ol, .markdown.text ul {
  margin-top: 3.2rem
}

.markdown h1 {
  font-size: 7.2rem;
  text-transform: uppercase
}

.markdown h2 {
  font-size: 5.6rem
}

.markdown h3 {
  font-size: 3.2rem
}

.markdown h4 {
  font-size: 2.6rem
}

.markdown ol, .markdown p, .markdown ul {
  line-height: 1.5;
  font-family: Graphik SemiBold;
  font-size: 2.4rem
}

.markdown ol, .markdown ul {
  --spacing: 4rem
}

.markdown ol li, .markdown ul li {
  position: relative;
  padding: .8rem 0 .8rem var(--spacing)
}


.markdown ol li ol, .markdown ul li ol {
  counter-reset: nested-ol
}

.markdown ol li ol li, .markdown ul li ol li {
  counter-increment: nested-ol
}

.markdown ol li ol li::before, .markdown ul li ol li::before {
  content: counter(nested-ol, upper-alpha)
}

.markdown ol li::before, .markdown ul li::before {
  position: absolute;
  top: 0;
  left: calc(var(--spacing) * -1)
}


.markdown ol {
  counter-reset: ol
}

.markdown ol li {
  counter-increment: ol
}

.markdown ol li::before {
  content: counter(ol, decimal-leading-zero);
  width: 1.25em;
  color: #ffdd63;
  transform: translate(100%, 20%);
  font-size: 2.4rem
}

.markdown a {
  position: relative;
  text-decoration: none;
  color: inherit
}

.markdown a::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ffdd63
}

.markdown blockquote {
  --y-spacing: 6.4rem;
  position: relative;
  padding: var(--y-spacing) 4rem;
  background-color: #ffdd63;
  text-align: center;
  border-radius: 32px
}

.markdown blockquote * {
  font-size: 3.2rem;
  line-height: 1.5;
  font-family: Graphik Black
}

.markdown blockquote::after, .markdown blockquote::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}


.button-main-inverted {
  display: block;
  position: relative
}


#site-pages {
  transition: transform 1000ms cubic-bezier(.19, 1, .22, 1) 0s, opacity var(--fade-duration) linear
}

#site-pages[data-transitioning] {
  transform: translateY(8rem);
  transition: transform 0s linear var(--fade-duration), opacity 0s linear var(--fade-duration);
  opacity: 0;
  visibility: hidden
}

.card-product picture {
  --transition: 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: scale var(--transition), transform var(--transition)
}

html:not(.mobile) .card-product:hover picture {
  transform: translateY(-2rem) scale(1.05)
}

html:not(.mobile) .card-product:hover .card-product-button {
  background-color: rgba(255, 255, 255, .5)
}

[data-text-reveal] {
  overflow: hidden
}

[data-text-reveal] > [data-text-reveal-content] {
  height: 100%;
  border: 1px solid transparent;
  transition: transform 1000ms cubic-bezier(.19, 1, .22, 1);
  transform: translateY(100%)
}

[data-text-reveal][data-scroll=in] > [data-text-reveal-content] {
  transform: none
}