.nav__desktop-menu-links {
  position: relative;
}
.nav__desktop-menu-links .nav__desktop-active-indicator {
  background-color: currentColor;
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 44px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 500ms;
          transition-duration: 500ms;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform-origin: right center;
          transform-origin: right center;
  left: 0;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links .nav__desktop-active-indicator {
    width: 50px;
  }
}
.nav__desktop-menu-links .nav__desktop-active-indicator.is-under-app {
  -webkit-transform: scaleX(1) translateX(0);
          transform: scaleX(1) translateX(0);
}
.nav__desktop-menu-links .nav__desktop-active-indicator.is-under-templates {
  -webkit-transform: scaleX(1.58) translateX(58px);
          transform: scaleX(1.58) translateX(58px);
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links .nav__desktop-active-indicator.is-under-templates {
    -webkit-transform: scaleX(1.58) translateX(65px);
            transform: scaleX(1.58) translateX(65px);
  }
}
.nav__desktop-menu-links .nav__desktop-active-indicator.is-under-bio-sites {
  -webkit-transform: scaleX(1.31) translateX(132px);
          transform: scaleX(1.31) translateX(132px);
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links .nav__desktop-active-indicator.is-under-bio-sites {
    -webkit-transform: scaleX(1.32) translateX(144px);
            transform: scaleX(1.32) translateX(144px);
  }
}
.nav__desktop-menu-links .nav__desktop-active-indicator.is-under-pro {
  -webkit-transform: scaleX(0.527) translateX(417px);
          transform: scaleX(0.527) translateX(417px);
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links .nav__desktop-active-indicator.is-under-pro {
    -webkit-transform: scaleX(0.58) translateX(417px);
            transform: scaleX(0.58) translateX(417px);
  }
}
.nav__desktop-menu-links a {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  color: currentColor;
  font-weight: 300;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links a {
    font-size: 16px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__desktop-menu-links a {
    font-size: 16px;
  }
}
.nav__desktop-menu-links a:not(:first-child) {
  margin-left: 24px;
}

.nav__mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 100%;
  height: 100vh;
  background-color: black;
  pointer-events: all;
}
.nav__mobile-menu-overlay .nav__mobile-menu-links {
  position: absolute;
  top: 18%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
}
.nav__mobile-menu-overlay .nav__mobile-menu-links a {
  cursor: pointer;
  color: white;
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2em;
  -webkit-transform: rotate(7deg) translate(0, 100%);
          transform: rotate(7deg) translate(0, 100%);
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: -webkit-transform 0 step-start 0.3s;
  transition: -webkit-transform 0 step-start 0.3s;
  transition: transform 0 step-start 0.3s;
  transition: transform 0 step-start 0.3s, -webkit-transform 0 step-start 0.3s;
}
@media (min-width: 768px) {
  .nav__mobile-menu-overlay .nav__mobile-menu-links a {
    font-size: 48px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__mobile-menu-overlay .nav__mobile-menu-links a {
    font-size: 64px;
  }
}
.nav__mobile-menu-overlay .nav__mobile-menu-links a .is-revealed {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.nav__mobile-menu-overlay .nav__mobile-menu-links a.is-active {
  position: relative;
}
.nav__mobile-menu-overlay .nav__mobile-menu-links a.is-active::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .nav__mobile-menu-overlay .nav__mobile-menu-links a.is-active::after {
    height: 2px;
  }
}
.nav__mobile-menu-overlay .nav__mobile-menu-links .nav__mobile-brand-link,
.nav__mobile-menu-overlay .nav__mobile-menu-links .nav__mobile-templates-link,
.nav__mobile-menu-overlay .nav__mobile-menu-links .nav__mobile-bio-sites-link {
  margin-top: 40px;
}
.nav__mobile-menu-overlay .nav__mobile-cta-button {
  position: absolute;
  top: 75%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.nav__mobile-menu-overlay .nav__mobile-cta-button .rounded-button {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition: opacity 0 step-start 0.3s;
  transition: opacity 0 step-start 0.3s;
}
.nav__mobile-menu-overlay .nav__mobile-cta-button .rounded-button::before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__mobile-menu-overlay .nav__mobile-cta-button .rounded-button .is-revealed {
  opacity: 1;
}
.nav__mobile-menu-overlay .nav__mobile-cta-button .rounded-button .is-revealed::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav__mobile-menu-overlay .nav__mobile-cta-button .rounded-button::before {
  -webkit-transition: opacity 0 step-start 0.3s;
  transition: opacity 0 step-start 0.3s;
}
.nav__mobile-menu-overlay.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.nav__mobile-menu-overlay.is-open .nav__mobile-menu-links a {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
}
.nav__mobile-menu-overlay.is-open .rounded-button {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
}
.nav__mobile-menu-overlay.is-open .rounded-button::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav__mobile-menu-overlay.is-open .rounded-button::before {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
  transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s, -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s;
}

.rounded-button {
  cursor: pointer;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 1.6em;
  padding-right: 1.6em;
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  opacity: 0;
  -webkit-transition: opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  color: black;
  height: 45px;
}
@media (min-width: 768px) {
  .rounded-button {
    height: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .rounded-button {
    height: 50px;
  }
}
.rounded-button::before {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), border 200ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), border 200ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), border 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1), border 200ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.rounded-button.is-transparent {
  background: none;
  color: white;
}
.rounded-button.is-transparent::before {
  border: solid 1px rgba(255, 255, 255, 0.2);
  background-color: transparent;
}
.rounded-button.is-transparent:hover {
  color: black;
}
.rounded-button.is-transparent:hover::before {
  background-color: white;
  opacity: 1;
}
.rounded-button span {
  width: 100%;
  text-align: center;
  z-index: 1;
}
.rounded-button::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 1px white;
  background-color: white;
  border-radius: 40px;
}
@media (min-width: 768px) {
  .rounded-button::before {
    border-radius: 50px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .rounded-button::before {
    border-width: 1.5px;
  }
}

.nav {
  position: fixed;
  width: 100%;
  max-width: 100vw;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 999;
  color: white;
  -webkit-transition: color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (min-width: 768px) {
  .nav {
    position: fixed;
    padding: 40px;
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
  }
}
.nav.is-black {
  color: black;
}
.nav.is-black .nav__desktop-button .rounded-button.is-transparent {
  color: black;
}
.nav.is-black .nav__desktop-button .rounded-button.is-transparent:hover {
  color: white;
}
.nav.is-black .nav__desktop-button .rounded-button.is-transparent:hover::before {
  background-color: black;
}
.nav.is-black .nav__desktop-button .is-transparent::before {
  border: solid 1px #ebebeb;
}
.nav__logo {
  z-index: 100;
}
.nav__logo svg {
  cursor: pointer;
  height: 100%;
  width: 28px;
  display: block;
  fill: currentColor;
}
@media (min-width: 768px) {
  .nav__logo svg {
    width: 30px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .nav__logo svg {
    width: 45px;
  }
}
.nav__mobile {
  display: block;
  width: 26px;
  height: 26px;
}
@-webkit-keyframes hamburgerTopOpen {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(3px) rotate(0deg);
            transform: translateY(3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(3px) rotate(45deg);
            transform: translateY(3px) rotate(45deg);
  }
}
@keyframes hamburgerTopOpen {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(3px) rotate(0deg);
            transform: translateY(3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(3px) rotate(45deg);
            transform: translateY(3px) rotate(45deg);
  }
}
@-webkit-keyframes hamburgerTopClose {
  0% {
    -webkit-transform: translateY(3px) rotate(45deg);
            transform: translateY(3px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(3px) rotate(0deg);
            transform: translateY(3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
}
@keyframes hamburgerTopClose {
  0% {
    -webkit-transform: translateY(3px) rotate(45deg);
            transform: translateY(3px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(3px) rotate(0deg);
            transform: translateY(3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
}
@-webkit-keyframes hamburgerBottomOpen {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-3px) rotate(0deg);
            transform: translateY(-3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-3px) rotate(-45deg);
            transform: translateY(-3px) rotate(-45deg);
  }
}
@keyframes hamburgerBottomOpen {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
            transform: translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-3px) rotate(0deg);
            transform: translateY(-3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(-3px) rotate(-45deg);
            transform: translateY(-3px) rotate(-45deg);
  }
}
@-webkit-keyframes hamburgerBottomClose {
  0% {
    -webkit-transform: translateY(-3px) rotate(-45deg);
            transform: translateY(-3px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-3px) rotate(0deg);
            transform: translateY(-3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
}
@keyframes hamburgerBottomClose {
  0% {
    -webkit-transform: translateY(-3px) rotate(-45deg);
            transform: translateY(-3px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-3px) rotate(0deg);
            transform: translateY(-3px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateY(0px) rotate(0deg);
            transform: translateY(0px) rotate(0deg);
  }
}
.nav__mobile.is-open .nav__mobile-menu-button svg path:nth-of-type(1) {
  -webkit-animation: hamburgerTopOpen 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: hamburgerTopOpen 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.nav__mobile.is-open .nav__mobile-menu-button svg path:nth-of-type(2) {
  -webkit-animation: hamburgerBottomOpen 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: hamburgerBottomOpen 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.nav__mobile .nav__mobile-menu-button {
  cursor: pointer;
  height: 100%;
  width: 100%;
}
.nav__mobile .nav__mobile-menu-button svg {
  width: 26px;
  height: 26px;
}
.nav__mobile .nav__mobile-menu-button svg path {
  stroke: currentColor;
}
.nav__mobile .nav__mobile-menu-button svg path:nth-of-type(1) {
  -webkit-transform-origin: 50% 1.5px;
          transform-origin: 50% 1.5px;
  -webkit-animation: hamburgerTopClose 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: hamburgerTopClose 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.nav__mobile .nav__mobile-menu-button svg path:nth-of-type(2) {
  -webkit-transform-origin: 50% 6.5px;
          transform-origin: 50% 6.5px;
  -webkit-animation: hamburgerBottomClose 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          animation: hamburgerBottomClose 300ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@media (min-width: 768px) {
  .nav__mobile {
    display: none;
  }
}
.nav__mobile-menu-overlay-container {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: hidden;
  z-index: 998;
  pointer-events: none;
}
@media (min-width: 768px) {
  .nav__mobile-menu-overlay-container {
    display: none;
  }
}
.nav__desktop {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .nav__desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.nav__desktop.nav__desktop-button {
  display: none;
}
.nav__desktop.nav__desktop-button.button-load-in .rounded-button {
  opacity: 1;
}
.nav__desktop.nav__desktop-button.button-load-in .rounded-button::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav__desktop.nav__desktop-button .rounded-button {
  color: white;
  opacity: 0;
  -webkit-transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__desktop.nav__desktop-button .rounded-button::before {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.nav__desktop.nav__desktop-button .rounded-button .is-revealed {
  opacity: 1;
}
.nav__desktop.nav__desktop-button .rounded-button .is-revealed::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.nav__desktop.nav__desktop-button .rounded-button::before {
  -webkit-transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1), background-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), border-color 500ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.nav__desktop.nav__desktop-button .rounded-button:hover {
  color: black;
}
.nav__desktop.nav__desktop-button .rounded-button:hover::before {
  background-color: white;
  opacity: 1;
}
@media (min-width: 768px) {
  .nav__desktop.nav__desktop-button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: block;
    position: absolute;
    left: initial;
    right: 40px;
  }
}
#error .nav__desktop-active-indicator {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.right-arrow-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
}
.right-arrow-link.is-dark {
  color: black;
}
.right-arrow-link.is-dark svg > * {
  stroke: black;
}
.right-arrow-link--underlined {
  position: relative;
}
.right-arrow-link--underlined::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: white;
  height: 1px;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.right-arrow-link svg {
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.right-arrow-link svg > * {
  stroke: white;
}
.right-arrow-link:hover .right-arrow-link--underlined::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: right;
          transform-origin: right;
}
.right-arrow-link:hover svg {
  -webkit-transform: translateX(40%);
          transform: translateX(40%);
}

.templates-block__top-gradient {
  z-index: 3;
  position: absolute;
  top: 0;
  width: 100%;
  height: 45%;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), color-stop(90%, #000000));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 90%);
  pointer-events: none;
}
.templates-block__bottom-gradient {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  pointer-events: none;
}
.templates-block__hero-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 20vh;
}
@media (min-width: 768px) {
  .templates-block__hero-text {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding-top: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__hero-text {
    padding-top: 60px;
  }
}
.templates-block__hero-text .text-container {
  -webkit-transform: rotate(7deg) translate3d(0, 100%, 0);
          transform: rotate(7deg) translate3d(0, 100%, 0);
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.templates-block__hero-text.is-loaded .text-container {
  -webkit-transform: rotate(0deg) translate3d(0, 0%, 0);
          transform: rotate(0deg) translate3d(0, 0%, 0);
}
.templates-block__hero-text.is-loaded .templates-block__hero-link-container {
  opacity: 1;
}
.templates-block__hero-text.is-loaded .templates-block__hero-link-container a::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.templates-block__hero-text h1 {
  position: relative;
  margin-bottom: 15px;
  font-family: Canela Text, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 53px;
}
@media (min-width: 768px) {
  .templates-block__hero-text h1 {
    font-size: 116px;
  }
}
.templates-block__hero-bottom-copy {
  margin-top: 30%;
}
@media (min-width: 768px) {
  .templates-block__hero-bottom-copy {
    margin-top: 0;
  }
}
.templates-block__hero-bottom-copy > span .text-line {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
  opacity: 0.6;
}
.templates-block__hero-link-container {
  opacity: 0;
  -webkit-transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  transition: opacity 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  margin-bottom: 25px;
}
.templates-block__hero-link-container a {
  opacity: 1;
  -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.templates-block__hero-link-container a::before {
  -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
  transition: transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}
.templates-block__hero-link-container a:hover {
  opacity: 0.7;
}
.templates-block__hero-copy {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 25px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__hero-copy {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .templates-block__hero-copy {
    font-size: 18px;
    margin-bottom: 38px;
  }
}
.templates-block__tagline-text-container {
  position: absolute;
  color: white;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 4;
  pointer-events: none;
}
.templates-block__tagline-text-container .text-line {
  height: 1.1em;
}
.templates-block__tagline-text-container p {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 36px;
  margin: 0 auto;
  opacity: 0;
  text-align: center;
}
@media (min-width: 768px) {
  .templates-block__tagline-text-container p {
    font-size: 48px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__tagline-text-container p {
    font-size: 64px;
  }
}
.templates-block__tagline-text-container p .canela-emphasis {
  padding-right: 0.05em;
}
.templates-block__tagline-p-mobile {
  padding-top: 26%;
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 32px;
  max-width: 8em;
}
@media (min-width: 375px) {
  .templates-block__tagline-p-mobile {
    display: none;
  }
}
.templates-block__tagline-p {
  display: none;
  max-width: 11em;
}
@media (min-width: 375px) {
  .templates-block__tagline-p {
    display: block;
    padding-top: 27%;
    font-size: 36px;
  }
}
@media (min-width: 768px) {
  .templates-block__tagline-p {
    padding-top: 20%;
    font-size: 48px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__tagline-p {
    display: none;
  }
}
.templates-block__tagline-p-desktop {
  display: none;
  font-size: 64px;
  position: absolute;
  top: 80vh;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__tagline-p-desktop {
    display: block;
  }
}
.templates-block__overview-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}
.templates-block__overview-container .template-left-desktop,
.templates-block__overview-container .template-left,
.templates-block__overview-container .template-center,
.templates-block__overview-container .template-right,
.templates-block__overview-container .template-right-desktop {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview-container .template-left-desktop,
  .templates-block__overview-container .template-left,
  .templates-block__overview-container .template-center,
  .templates-block__overview-container .template-right,
  .templates-block__overview-container .template-right-desktop {
    max-width: 85vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.templates-block__overview-container .template-left-desktop img,
.templates-block__overview-container .template-left img,
.templates-block__overview-container .template-center img,
.templates-block__overview-container .template-right img,
.templates-block__overview-container .template-right-desktop img {
  width: 29vw;
  position: absolute;
}
@media (min-width: 375px) {
  .templates-block__overview-container .template-left-desktop img,
  .templates-block__overview-container .template-left img,
  .templates-block__overview-container .template-center img,
  .templates-block__overview-container .template-right img,
  .templates-block__overview-container .template-right-desktop img {
    width: 33vw;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview-container .template-left-desktop img,
  .templates-block__overview-container .template-left img,
  .templates-block__overview-container .template-center img,
  .templates-block__overview-container .template-right img,
  .templates-block__overview-container .template-right-desktop img {
    width: 15vw;
  }
}
.templates-block__overview-container .template-left-desktop,
.templates-block__overview-container .template-left,
.templates-block__overview-container .template-right,
.templates-block__overview-container .template-right-desktop {
  z-index: 1;
}
.templates-block__overview-container .template-center {
  z-index: 2;
}
.templates-block__overview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.templates-block__overview .template-left-desktop {
  display: none;
  opacity: 1;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview .template-left-desktop {
    display: block;
  }
}
.templates-block__overview .template-left-desktop img {
  left: 4%;
  top: 52%;
  width: 16vw;
}
.templates-block__overview .template-left {
  opacity: 1;
}
.templates-block__overview .template-left img {
  top: 52%;
  left: 2%;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview .template-left img {
    left: 14%;
    width: 18vw;
  }
}
.templates-block__overview .template-center {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 1.3s;
          transition-duration: 1.3s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.templates-block__overview .template-center.is-loaded {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.templates-block__overview .template-center img {
  will-change: transform;
  -webkit-transform: scale(6);
          transform: scale(6);
  position: relative;
}
.templates-block__overview .template-right {
  opacity: 1;
}
.templates-block__overview .template-right img {
  top: 45%;
  right: 3%;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview .template-right img {
    right: 20%;
    width: 16vw;
  }
}
.templates-block__overview .template-right-desktop {
  display: none;
  opacity: 1;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview .template-right-desktop {
    display: block;
  }
}
.templates-block__overview .template-right-desktop img {
  top: 47%;
  right: 3%;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__overview .template-right-desktop img {
    width: 17vw;
  }
}
.templates-block__cta-container {
  position: absolute;
  top: auto;
  bottom: 75px;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  opacity: 0;
  z-index: 3;
}
@media (min-width: 768px) {
  .templates-block__cta-container {
    top: 90vh;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__cta-container {
    top: auto;
    bottom: 7vh;
  }
}
.templates-block__cta-container a {
  text-align: center;
  max-width: 18em;
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  display: inline-block;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block__cta-container a {
    font-size: 16px;
  }
}
.templates-block__cta-container a svg {
  width: 16px;
  height: 0.7em;
  margin-left: 0.5em;
}
.templates-block {
  height: 260vh;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding-bottom: 50px;
}
@media (min-width: 375px) {
  .templates-block {
    padding-bottom: 0;
  }
}
@media (min-width: 768px) {
  .templates-block {
    height: 240vh;
  }
}
@media (min-width: 1020px) and (orientation: portrait) {
  .templates-block {
    height: 260vh;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .templates-block {
    height: 350vh;
  }
}
.templates-block__absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.templates-block__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}

.has-visibility-translation-animation {
  opacity: 0;
  -webkit-transform: translate(0, 50px);
          transform: translate(0, 50px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.has-visibility-translation-animation--active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.has-visibility-rotation-animation {
  overflow: hidden;
}
.has-visibility-rotation-animation span {
  display: block;
  opacity: 0;
  -webkit-transform: rotate(7deg) translate(0, 100%);
          transform: rotate(7deg) translate(0, 100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.has-visibility-rotation-animation--active span {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
@media (min-width: 768px) {
  .has-visibility-scale-animation {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transition-duration: 0.7s;
            transition-duration: 0.7s;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
@media (min-width: 768px) {
  .has-visibility-scale-animation--active {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  width: 100%;
  background-color: #fff;
}


li { list-style: none; }

/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details,
/* 1 */

figcaption, figure, footer, header, main,
/* 2 */

menu, nav, section, summary {
  /* 1 */
  display: block;
}


/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}


/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
/* 1 */

[hidden] {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  text-decoration: none;
  color: inherit;
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ececec;
  color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}


/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}


/* Forms
   ========================================================================== */


/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"],
/* 1 */

[type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-400.woff2") format("woff2"),
    url("../fonts/clarkson-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-500.woff2") format("woff2"),
    url("../fonts/clarkson-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light.woff2") format("woff2"),
    url("../fonts/canela-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light-italic.woff2") format("woff2"),
    url("../fonts/canela-light-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Canela Text";
  src: local("?"), url("../fonts/canela-text-regular.woff2") format("woff2"),
    url("../fonts/canela-text-regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/*
Default border padding for the sides.
Using values from the grid
*/
/*
Default top and bottom padding for sections.
*/
/*
To animate a paragraph line by line,
each line must be split into this structure:

<span className="text-line">
  <span className="text-container">
    {text}
  </span>
</span>

Default styling for `.text-line` and `.text-container` is in defaults.less.

Apply this mixin to `.text-container` to set the starting transform.

Apply `.mixin-text-line-reveal-animation.is-revealed()`
when the parent element is visible or loaded.
*/
/*
Url must be a relative path.
*/
/*
Adding the class 'no-scroll' will disable scrolling
*/
/**

The grid is defined in three different breakpoints. Each breakpoint has outer gutters:
  - Phone (2 columns with gutters of 16px)
  - Tablet (6 columns with gutters of 40px)
  - Desktop (12 columns with gutters of 40px)

To keep column size clear, we talk about the grid in 12 column increments on every breakpoint, i.e.
  - Phone has 2 columns that we think of as 12 columns, so it has 2 columns of 6 units width.
  - Tablet has 6 columns that we think of as 12 columns, so it has 6 columns of 2 units width each.
  - Desktop has 12 columns of 1 unit each.

At desktop, the grid is broken into full-width and constrained-width grids at
1400px. The variable here is 1480 because we are accounting for the 2 outer
gutters (which are usually created with padding inside of the container).

Because the grid is defined by fixed gutters, we have to use percentage to
calculate column width (the rest of the area). This means we use calc to
determine how wide a column should be:

100% of the grid minus the amount of gutters in between the columns will give
you the amount of total space used by columns. That amount of space divided by
the number of columns will give you the single column width.

calc(100% - (number_of_inner_gutters * gutter_width)) / number_of_columns

e.g. for desktop grid, column width is calculated:

calc(100% - (11 * 40px)) / 12
  - 11 is the total number of inner gutters
  - 40px is the gutter width
  - 12 is the amount of columns

for tablet:

calc(100% - (5 * 40px)) / 6
  - 5 is the total number of inner gutters
  - 40px is the gutter width
  - 6 is the amount of columns

for mobile:

calc(100% - (1 * 16px)) / 2
  - 1 is the total number of inner gutters
  - 16px is the gutter width
  - 2 is the amount of columns


There are some additional helper variables and mixins for using vw instead of
percentage. This should be used in very rare cases and _only_ on the full width
grid. You may need this if you have a carousel that is wider than the screen,
for example.

**/
/**
Use this mixin on a container when the container should abide by the
constrained-width grid.
**/
/**
This mixin is the "parent" mixin that all the other mixins use. This one should
rarely be used because the mixins below are specific to those breakpoints.
**/
h1 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h1 {
    font-size: 116px;
  }
}
h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h3 {
    font-size: 48px;
  }
}
.canela-emphasis,
.canela-emphasis-link {
  position: relative;
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: italic;
}
.canela-emphasis::after,
.canela-emphasis-link::after {
  position: absolute;
  content: "";
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .canela-emphasis::after,
  .canela-emphasis-link::after {
    height: 2px;
  }
}
.text-line {
  display: block;
  overflow: hidden;
}
.text-container {
  display: inline-block;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#cdn-lark {
  display: none;
}
#consent_blackbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
}
div.truste_box_overlay {
  position: fixed !important;
}
body {
  background-color: black;
}
.awards-block {
  background-color: black;
  color: white;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 58px;
  padding-bottom: 58px;
}
@media (min-width: 768px) {
  .awards-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1440px) {
  .awards-block {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) {
  .awards-block {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
@media (min-width: 1440px) {
  .awards-block {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.awards-block__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1920px) {
  .awards-block__container {
    max-width: 1680px;
  }
}
@media (min-width: 768px) {
  .awards-block__container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block__container {
    margin: 0 auto;
  }
}
.awards-block__award {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.awards-block__award:not(:last-child) {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .awards-block__award:not(:last-child) {
    margin-bottom: 0;
  }
}
@media (min-width: 768px) {
  .awards-block__award {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.awards-block__award svg {
  margin-right: 25px;
  width: 50px;
}
@media (min-width: 768px) {
  .awards-block__award svg {
    width: 46px;
    margin-right: 0;
    margin-bottom: 20px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block__award svg {
    width: 62px;
  }
}
.awards-block__award .title {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  margin-bottom: 4px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block__award .title {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .awards-block__award .title {
    text-align: center;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block__award .title {
    margin-bottom: 10px;
  }
}
.awards-block__award .subtitle {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .awards-block__award .subtitle {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .awards-block__award .subtitle {
    text-align: center;
  }
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  width: 100%;
  background-color: #fff;
}


li { list-style: none; }

/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details,
/* 1 */

figcaption, figure, footer, header, main,
/* 2 */

menu, nav, section, summary {
  /* 1 */
  display: block;
}


/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}


/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
/* 1 */

[hidden] {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  text-decoration: none;
  color: inherit;
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ececec;
  color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}


/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}


/* Forms
   ========================================================================== */


/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"],
/* 1 */

[type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-400.woff2") format("woff2"),
    url("../fonts/clarkson-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-500.woff2") format("woff2"),
    url("../fonts/clarkson-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light.woff2") format("woff2"),
    url("../fonts/canela-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light-italic.woff2") format("woff2"),
    url("../fonts/canela-light-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Canela Text";
  src: local("?"), url("../fonts/canela-text-regular.woff2") format("woff2"),
    url("../fonts/canela-text-regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/*
Default border padding for the sides.
Using values from the grid
*/
/*
Default top and bottom padding for sections.
*/
/*
To animate a paragraph line by line,
each line must be split into this structure:

<span className="text-line">
  <span className="text-container">
    {text}
  </span>
</span>

Default styling for `.text-line` and `.text-container` is in defaults.less.

Apply this mixin to `.text-container` to set the starting transform.

Apply `.mixin-text-line-reveal-animation.is-revealed()`
when the parent element is visible or loaded.
*/
/*
Url must be a relative path.
*/
/*
Adding the class 'no-scroll' will disable scrolling
*/
/**

The grid is defined in three different breakpoints. Each breakpoint has outer gutters:
  - Phone (2 columns with gutters of 16px)
  - Tablet (6 columns with gutters of 40px)
  - Desktop (12 columns with gutters of 40px)

To keep column size clear, we talk about the grid in 12 column increments on every breakpoint, i.e.
  - Phone has 2 columns that we think of as 12 columns, so it has 2 columns of 6 units width.
  - Tablet has 6 columns that we think of as 12 columns, so it has 6 columns of 2 units width each.
  - Desktop has 12 columns of 1 unit each.

At desktop, the grid is broken into full-width and constrained-width grids at
1400px. The variable here is 1480 because we are accounting for the 2 outer
gutters (which are usually created with padding inside of the container).

Because the grid is defined by fixed gutters, we have to use percentage to
calculate column width (the rest of the area). This means we use calc to
determine how wide a column should be:

100% of the grid minus the amount of gutters in between the columns will give
you the amount of total space used by columns. That amount of space divided by
the number of columns will give you the single column width.

calc(100% - (number_of_inner_gutters * gutter_width)) / number_of_columns

e.g. for desktop grid, column width is calculated:

calc(100% - (11 * 40px)) / 12
  - 11 is the total number of inner gutters
  - 40px is the gutter width
  - 12 is the amount of columns

for tablet:

calc(100% - (5 * 40px)) / 6
  - 5 is the total number of inner gutters
  - 40px is the gutter width
  - 6 is the amount of columns

for mobile:

calc(100% - (1 * 16px)) / 2
  - 1 is the total number of inner gutters
  - 16px is the gutter width
  - 2 is the amount of columns


There are some additional helper variables and mixins for using vw instead of
percentage. This should be used in very rare cases and _only_ on the full width
grid. You may need this if you have a carousel that is wider than the screen,
for example.

**/
/**
Use this mixin on a container when the container should abide by the
constrained-width grid.
**/
/**
This mixin is the "parent" mixin that all the other mixins use. This one should
rarely be used because the mixins below are specific to those breakpoints.
**/
h1 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h1 {
    font-size: 116px;
  }
}
h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h3 {
    font-size: 48px;
  }
}
.canela-emphasis,
.canela-emphasis-link {
  position: relative;
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: italic;
}
.canela-emphasis::after,
.canela-emphasis-link::after {
  position: absolute;
  content: "";
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .canela-emphasis::after,
  .canela-emphasis-link::after {
    height: 2px;
  }
}
.text-line {
  display: block;
  overflow: hidden;
}
.text-container {
  display: inline-block;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#cdn-lark {
  display: none;
}
#consent_blackbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
}
div.truste_box_overlay {
  position: fixed !important;
}
body {
  background-color: black;
}
.carousel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  position: relative;
}
.carousel__slide-image-container {
  background-color: #1c1c1c;
  width: 78vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
  padding: 11% 0;
}
.carousel__slide-image {
  position: relative;
  display: block;
  width: 100%;
  margin: auto;
}
.carousel__slide-image:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 106%;
}
.carousel__slide-image > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
.carousel__slide-image img {
  width: 100%;
}
.carousel__slide-caption {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: white;
  width: 75vw;
  margin-top: 32px;
  margin-bottom: 40px;
  margin-left: 16px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .carousel__slide-caption {
    font-size: 16px;
  }
}
.carousel__slide-title {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: white;
  width: 75vw;
  margin-top: 32px;
  margin-left: 16px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .carousel__slide-title {
    font-size: 16px;
  }
}
.carousel__slide-title + .carousel__slide-caption {
  margin-top: 6px;
  opacity: 0.4;
}
.carousel .react-multi-carousel-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform, transition;
}
.carousel .react-multi-carousel-dot-list {
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  right: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.carousel .react-multi-carousel-dot button {
  cursor: pointer;
  display: inline-block;
  background-color: white;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0 4px;
  outline: 0;
  opacity: 0.2;
  -webkit-transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.carousel .react-multi-carousel-dot:not(:last-of-type) button {
  margin-right: 6px;
}
.carousel .react-multi-carousel-dot--active button {
  opacity: 1;
}
.carousel .react-multi-carousel-item {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .carousel .react-multi-carousel-item {
    -ms-flex-negative: 0 !important;
        flex-shrink: 0 !important;
  }
  .carousel .react-multi-carousel-track {
    overflow: visible !important;
  }
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  width: 100%;
  background-color: #fff;
}


li { list-style: none; }

/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details,
/* 1 */

figcaption, figure, footer, header, main,
/* 2 */

menu, nav, section, summary {
  /* 1 */
  display: block;
}


/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}


/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
/* 1 */

[hidden] {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  text-decoration: none;
  color: inherit;
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ececec;
  color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}


/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}


/* Forms
   ========================================================================== */


/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"],
/* 1 */

[type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-400.woff2") format("woff2"),
    url("../fonts/clarkson-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-500.woff2") format("woff2"),
    url("../fonts/clarkson-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light.woff2") format("woff2"),
    url("../fonts/canela-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light-italic.woff2") format("woff2"),
    url("../fonts/canela-light-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Canela Text";
  src: local("?"), url("../fonts/canela-text-regular.woff2") format("woff2"),
    url("../fonts/canela-text-regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/*
Default border padding for the sides.
Using values from the grid
*/
/*
Default top and bottom padding for sections.
*/
/*
To animate a paragraph line by line,
each line must be split into this structure:

<span className="text-line">
  <span className="text-container">
    {text}
  </span>
</span>

Default styling for `.text-line` and `.text-container` is in defaults.less.

Apply this mixin to `.text-container` to set the starting transform.

Apply `.mixin-text-line-reveal-animation.is-revealed()`
when the parent element is visible or loaded.
*/
/*
Url must be a relative path.
*/
/*
Adding the class 'no-scroll' will disable scrolling
*/
/**

The grid is defined in three different breakpoints. Each breakpoint has outer gutters:
  - Phone (2 columns with gutters of 16px)
  - Tablet (6 columns with gutters of 40px)
  - Desktop (12 columns with gutters of 40px)

To keep column size clear, we talk about the grid in 12 column increments on every breakpoint, i.e.
  - Phone has 2 columns that we think of as 12 columns, so it has 2 columns of 6 units width.
  - Tablet has 6 columns that we think of as 12 columns, so it has 6 columns of 2 units width each.
  - Desktop has 12 columns of 1 unit each.

At desktop, the grid is broken into full-width and constrained-width grids at
1400px. The variable here is 1480 because we are accounting for the 2 outer
gutters (which are usually created with padding inside of the container).

Because the grid is defined by fixed gutters, we have to use percentage to
calculate column width (the rest of the area). This means we use calc to
determine how wide a column should be:

100% of the grid minus the amount of gutters in between the columns will give
you the amount of total space used by columns. That amount of space divided by
the number of columns will give you the single column width.

calc(100% - (number_of_inner_gutters * gutter_width)) / number_of_columns

e.g. for desktop grid, column width is calculated:

calc(100% - (11 * 40px)) / 12
  - 11 is the total number of inner gutters
  - 40px is the gutter width
  - 12 is the amount of columns

for tablet:

calc(100% - (5 * 40px)) / 6
  - 5 is the total number of inner gutters
  - 40px is the gutter width
  - 6 is the amount of columns

for mobile:

calc(100% - (1 * 16px)) / 2
  - 1 is the total number of inner gutters
  - 16px is the gutter width
  - 2 is the amount of columns


There are some additional helper variables and mixins for using vw instead of
percentage. This should be used in very rare cases and _only_ on the full width
grid. You may need this if you have a carousel that is wider than the screen,
for example.

**/
/**
Use this mixin on a container when the container should abide by the
constrained-width grid.
**/
/**
This mixin is the "parent" mixin that all the other mixins use. This one should
rarely be used because the mixins below are specific to those breakpoints.
**/
h1 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h1 {
    font-size: 116px;
  }
}
h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h3 {
    font-size: 48px;
  }
}
.canela-emphasis,
.canela-emphasis-link {
  position: relative;
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: italic;
}
.canela-emphasis::after,
.canela-emphasis-link::after {
  position: absolute;
  content: "";
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .canela-emphasis::after,
  .canela-emphasis-link::after {
    height: 2px;
  }
}
.text-line {
  display: block;
  overflow: hidden;
}
.text-container {
  display: inline-block;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#cdn-lark {
  display: none;
}
#consent_blackbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
}
div.truste_box_overlay {
  position: fixed !important;
}
body {
  background-color: black;
}
.has-visibility-carousel-animation .react-multi-carousel-item {
  opacity: 0;
  -webkit-transform: translate(80px, 0);
          transform: translate(80px, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.has-visibility-carousel-animation .react-multi-carousel-item .carousel__slide-image {
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}
.has-visibility-carousel-animation--active .react-multi-carousel-item {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.has-visibility-carousel-animation--active .react-multi-carousel-item .carousel__slide-image {
  opacity: 1;
}
.features {
  padding-top: 58px;
  padding-bottom: 58px;
}
@media (min-width: 768px) {
  .features {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
@media (min-width: 1440px) {
  .features {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
@media (min-width: 768px) {
  .features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-top: 80px;
    padding-bottom: 80px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 768px) and (min-width: 1920px) {
  .features {
    max-width: 1680px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .features {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) and (min-width: 1020px) and (orientation: landscape) {
  .features {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) and (min-width: 1440px) {
  .features {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
.features__title {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
  color: white;
  font-family: 'Canela';
  margin-bottom: 36px;
  margin-left: 16px;
}
@media (min-width: 768px) {
  .features__title {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__title {
    font-size: 48px;
  }
}
@media (min-width: 768px) {
  .features__title {
    margin-left: 0;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__title {
    margin-bottom: 40px;
  }
}
.features__mobile {
  display: block;
}
@media (min-width: 768px) {
  .features__mobile {
    display: none;
  }
}
.features__mobile.has-visibility-carousel-animation {
  opacity: 0;
  -webkit-transform: translate(30px, 0px);
          transform: translate(30px, 0px);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.features__mobile.has-visibility-carousel-animation--active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.features__desktop {
  display: none;
}
@media (min-width: 768px) {
  .features__desktop {
    display: block;
  }
}
.features__gallery {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  width: calc((((100% - 200px) / 6) * 3) + 80px + 0px);
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .features__gallery {
    height: 50vw;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__gallery {
    height: 46vw;
    max-height: 820px;
  }
}
.features__gallery .features__image-container {
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.features__gallery .features__image-container.is-active {
  opacity: 1;
}
.features__gallery .features__image {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.features__gallery .features__image img {
  height: 100%;
  width: 100%;
}
.features__copy {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
@media (min-width: 768px) {
  .features__copy {
    margin-left: 40px;
    width: calc((((100% - 200px) / 6) * 3) + 80px + 0px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__copy {
    margin-left: calc((((100% - 440px) / 12) * 1) + 80px + 0px);
    width: calc((((100% - 440px) / 12) * 5) + 160px + 0px);
  }
}
.features__list-item-wrapper:not(:last-of-type) {
  margin-bottom: 24px;
}
.features__list-item {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  color: white;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__list-item {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .features__list-item {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    opacity: 0.3;
    -webkit-transition: opacity 750ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: opacity 750ms cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer;
  }
  .features__list-item.is-active {
    opacity: 1;
  }
  .features__list-item svg {
    width: 14px;
    margin-right: 20px;
    margin-top: 0.4em;
  }
  .features__list-item svg rect {
    fill: white;
  }
  .features__list-item svg path {
    stroke: white;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .features__list-item {
    font-size: 16px;
  }
}
.features__list-item-text {
  display: inline-block;
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  width: 100%;
  background-color: #fff;
}


li { list-style: none; }

/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details,
/* 1 */

figcaption, figure, footer, header, main,
/* 2 */

menu, nav, section, summary {
  /* 1 */
  display: block;
}


/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}


/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
/* 1 */

[hidden] {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  text-decoration: none;
  color: inherit;
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ececec;
  color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}


/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}


/* Forms
   ========================================================================== */


/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"],
/* 1 */

[type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-400.woff2") format("woff2"),
    url("../fonts/clarkson-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-500.woff2") format("woff2"),
    url("../fonts/clarkson-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light.woff2") format("woff2"),
    url("../fonts/canela-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light-italic.woff2") format("woff2"),
    url("../fonts/canela-light-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Canela Text";
  src: local("?"), url("../fonts/canela-text-regular.woff2") format("woff2"),
    url("../fonts/canela-text-regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/*
Default border padding for the sides.
Using values from the grid
*/
/*
Default top and bottom padding for sections.
*/
/*
To animate a paragraph line by line,
each line must be split into this structure:

<span className="text-line">
  <span className="text-container">
    {text}
  </span>
</span>

Default styling for `.text-line` and `.text-container` is in defaults.less.

Apply this mixin to `.text-container` to set the starting transform.

Apply `.mixin-text-line-reveal-animation.is-revealed()`
when the parent element is visible or loaded.
*/
/*
Url must be a relative path.
*/
/*
Adding the class 'no-scroll' will disable scrolling
*/
/**

The grid is defined in three different breakpoints. Each breakpoint has outer gutters:
  - Phone (2 columns with gutters of 16px)
  - Tablet (6 columns with gutters of 40px)
  - Desktop (12 columns with gutters of 40px)

To keep column size clear, we talk about the grid in 12 column increments on every breakpoint, i.e.
  - Phone has 2 columns that we think of as 12 columns, so it has 2 columns of 6 units width.
  - Tablet has 6 columns that we think of as 12 columns, so it has 6 columns of 2 units width each.
  - Desktop has 12 columns of 1 unit each.

At desktop, the grid is broken into full-width and constrained-width grids at
1400px. The variable here is 1480 because we are accounting for the 2 outer
gutters (which are usually created with padding inside of the container).

Because the grid is defined by fixed gutters, we have to use percentage to
calculate column width (the rest of the area). This means we use calc to
determine how wide a column should be:

100% of the grid minus the amount of gutters in between the columns will give
you the amount of total space used by columns. That amount of space divided by
the number of columns will give you the single column width.

calc(100% - (number_of_inner_gutters * gutter_width)) / number_of_columns

e.g. for desktop grid, column width is calculated:

calc(100% - (11 * 40px)) / 12
  - 11 is the total number of inner gutters
  - 40px is the gutter width
  - 12 is the amount of columns

for tablet:

calc(100% - (5 * 40px)) / 6
  - 5 is the total number of inner gutters
  - 40px is the gutter width
  - 6 is the amount of columns

for mobile:

calc(100% - (1 * 16px)) / 2
  - 1 is the total number of inner gutters
  - 16px is the gutter width
  - 2 is the amount of columns


There are some additional helper variables and mixins for using vw instead of
percentage. This should be used in very rare cases and _only_ on the full width
grid. You may need this if you have a carousel that is wider than the screen,
for example.

**/
/**
Use this mixin on a container when the container should abide by the
constrained-width grid.
**/
/**
This mixin is the "parent" mixin that all the other mixins use. This one should
rarely be used because the mixins below are specific to those breakpoints.
**/
h1 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h1 {
    font-size: 116px;
  }
}
h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h3 {
    font-size: 48px;
  }
}
.canela-emphasis,
.canela-emphasis-link {
  position: relative;
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: italic;
}
.canela-emphasis::after,
.canela-emphasis-link::after {
  position: absolute;
  content: "";
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .canela-emphasis::after,
  .canela-emphasis-link::after {
    height: 2px;
  }
}
.text-line {
  display: block;
  overflow: hidden;
}
.text-container {
  display: inline-block;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#cdn-lark {
  display: none;
}
#consent_blackbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
}
div.truste_box_overlay {
  position: fixed !important;
}
body {
  background-color: black;
}
.plans-block {
  background-color: white;
  color: black;
}
.plans-block__plans-container {
  padding-top: 58px;
  padding-bottom: 58px;
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .plans-block__plans-container {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plans-container {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
@media (min-width: 1440px) {
  .plans-block__plans-container {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}
@media (min-width: 768px) {
  .plans-block__plans-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plans-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1440px) {
  .plans-block__plans-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1920px) {
  .plans-block__plans-container {
    max-width: 1680px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plans-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan {
    padding-bottom: 0;
    border-bottom: none;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.plans-block__plan:not(:first-child) {
  padding-top: 40px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan:not(:first-child) {
    padding-top: 0;
  }
}
.plans-block__plan:not(:last-child) {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .plans-block__plan:not(:last-child) {
    padding-bottom: 48px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan:not(:last-child) {
    border-bottom: 0;
    margin-right: 40px;
  }
}
.plans-block__plan.is-open .plans-block__plan-button svg {
  -webkit-transform: scaleY(-1);
          transform: scaleY(-1);
}
.plans-block__plan-button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-button-container {
    padding-bottom: 54px;
    border-bottom: 1px solid #ebebeb;
  }
}
.plans-block__plan-button-container a {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 8px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-button-container a {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .plans-block__plan-button-container a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.plans-block__plan-button-container a svg {
  margin-left: 10px;
  width: 12px;
  margin-top: 0.125em;
}
.plans-block__plan-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background: none;
}
.plans-block__plan-button h2 {
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: left;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-button h2 {
    font-size: 64px;
  }
}
.plans-block__plan-button svg {
  width: 10px;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-button svg {
    display: none;
  }
}
.plans-block__plan-details-container {
  -webkit-transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: hidden;
  position: relative;
}
.plans-block__plan-details {
  padding-top: 10px;
  padding-bottom: 25px;
}
@media (min-width: 768px) {
  .plans-block__plan-details {
    padding-top: 48px;
    padding-bottom: 0;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-details {
    padding-top: 58px;
  }
}
.plans-block__plan-details a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 40px;
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
@media (min-width: 768px) {
  .plans-block__plan-details a {
    display: none;
  }
}
.plans-block__plan-details a svg {
  width: 14px;
  margin-left: 10px;
}
.plans-block__plan-details h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  margin-bottom: 10px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-details h3 {
    font-size: 18px;
  }
}
.plans-block__plan-details p {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  margin-bottom: 30px;
  opacity: 0.5;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .plans-block__plan-details p {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .plans-block__plan-details p {
    margin-bottom: 32px;
  }
}
.plans-block__plan-details p:last-child {
  margin-bottom: 0;
}

.cta-footer {
  position: relative;
}
@media (min-width: 768px) {
  .cta-footer {
    background-color: transparent;
  }
}
.cta-footer.is-visible .cta-footer__foreground-ui {
  opacity: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.cta-footer.is-visible h1 .text-line:first-of-type .text-container,
.cta-footer.is-visible h1 .text-line:last-of-type .text-container {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.cta-footer.is-visible:not(.is-loaded) .right-arrow-link .canela-emphasis::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.cta-footer.is-visible:not(.is-loaded) .right-arrow-link svg {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.cta-footer.is-visible p .text-line .text-container {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.cta-footer:not(.is-loaded) .right-arrow-link .canela-emphasis::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform 0.85s cubic-bezier(0.77, 0, 0.175, 1) 1s;
  transition: -webkit-transform 0.85s cubic-bezier(0.77, 0, 0.175, 1) 1s;
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1) 1s;
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1) 1s, -webkit-transform 0.85s cubic-bezier(0.77, 0, 0.175, 1) 1s;
}
.cta-footer:not(.is-loaded) .right-arrow-link svg {
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: opacity 0.9s cubic-bezier(0.77, 0, 0.175, 1) 1.5s, -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1) 1.3s;
  transition: opacity 0.9s cubic-bezier(0.77, 0, 0.175, 1) 1.5s, -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1) 1.3s;
  transition: opacity 0.9s cubic-bezier(0.77, 0, 0.175, 1) 1.5s, transform 1s cubic-bezier(0.77, 0, 0.175, 1) 1.3s;
  transition: opacity 0.9s cubic-bezier(0.77, 0, 0.175, 1) 1.5s, transform 1s cubic-bezier(0.77, 0, 0.175, 1) 1.3s, -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1) 1.3s;
}
.cta-footer .images-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-footer .images-slideshow.is-in-view {
  opacity: 1;
}
.cta-footer .images-slideshow__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: bottom;
}
.cta-footer__background-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 113vw;
}
@media (min-width: 768px) {
  .cta-footer__background-slideshow {
    height: 76vw;
    max-height: 1008px;
  }
}
@media (min-width: 1020px) and (orientation: portrait) {
  .cta-footer__background-slideshow {
    height: 65vw;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer__background-slideshow {
    height: 66vw;
    min-height: 840px;
  }
}
.cta-footer__background-slideshow .images-slideshow {
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-footer__background-slideshow .images-slideshow.is-in-view {
  opacity: 1;
}
.cta-footer__background-slideshow .images-slideshow__image {
  height: 100%;
  opacity: 0;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1s step-end;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1s step-end;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s step-end;
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s step-end, -webkit-transform 1s step-end;
}
.cta-footer__background-slideshow .images-slideshow__image.is-active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-footer__foreground {
  position: relative;
  height: 113vw;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .cta-footer__foreground {
    height: 60vw;
    max-height: 820px;
  }
}
@media (min-width: 1020px) and (orientation: portrait) {
  .cta-footer__foreground {
    height: 53vw;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer__foreground {
    min-height: 700px;
    height: 53vw;
  }
}
@media (min-width: 1920px) {
  .cta-footer__foreground {
    max-width: 1680px;
  }
}
@media (min-width: 768px) {
  .cta-footer__foreground {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer__foreground {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1440px) {
  .cta-footer__foreground {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.cta-footer__foreground .images-slideshow {
  position: absolute;
  top: 10.9%;
  left: 6.5%;
  width: 88%;
  height: 76%;
  overflow: hidden;
}
.cta-footer__foreground .images-slideshow__image {
  background-size: cover;
  width: 101%;
  height: 101%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.8s step-end;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.8s step-end;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s step-end;
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s step-end, -webkit-transform 0.8s step-end;
}
.cta-footer__foreground .images-slideshow__image.is-active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cta-footer__foreground-ui {
  background-image: url(../../assets/images/unfold-ui.jpg);
  background-size: cover;
  background-position: center center;
  position: relative;
  display: block;
  top: 50%;
  width: 42vw;
  max-width: 280px;
  height: auto;
  opacity: 0;
  -webkit-transform: translateY(-45%);
          transform: translateY(-45%);
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  margin: auto;
}
.cta-footer__foreground-ui:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 205%;
}
.cta-footer__foreground-ui > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .cta-footer__foreground-ui {
    margin: 0;
    margin-left: calc((((100% - 440px) / 12) * 1) + 40px + 0px);
    width: calc((((100% - 200px) / 6) * 1) + 80px + 0px);
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer__foreground-ui {
    width: calc((((100% - 440px) / 12) * 3) + 80px + 0px);
  }
}
.cta-footer__header {
  position: absolute;
  top: 100%;
  left: 16px;
}
.cta-footer__header p {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: white;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer__header p {
    font-size: 16px;
  }
}
.cta-footer__header p .text-line .text-container {
  -webkit-transform: rotate(7deg) translate(0, 100%);
          transform: rotate(7deg) translate(0, 100%);
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.cta-footer__header p .text-line .text-container .is-revealed {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.cta-footer__header p:first-of-type {
  margin-top: 1em;
  opacity: 75%;
}
@media (min-width: 768px) {
  .cta-footer__header p:first-of-type {
    margin-top: 2em;
  }
}
.cta-footer__header p:last-of-type {
  margin-top: 0.5em;
}
@media (min-width: 768px) {
  .cta-footer__header {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: calc((((100% - 440px) / 12) * 5) + 200px + 0px);
    margin-top: 0;
  }
}
.cta-footer h1 {
  margin-top: 0.7em;
  width: 5em;
  color: white;
}
@media (min-width: 768px) {
  .cta-footer h1 {
    margin-top: 0;
  }
}
.cta-footer h1 .text-line {
  line-height: 1.1em;
}
.cta-footer h1 .text-line:first-of-type .text-container {
  -webkit-transform: rotate(7deg) translate(0, 100%);
          transform: rotate(7deg) translate(0, 100%);
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.cta-footer h1 .text-line:first-of-type .text-container .is-revealed {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.cta-footer h1 .text-line:last-of-type .text-container {
  -webkit-transform: rotate(7deg) translate(0, 100%);
          transform: rotate(7deg) translate(0, 100%);
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.cta-footer h1 .text-line:last-of-type .text-container .is-revealed {
  -webkit-transform: rotate(0deg) translate(0, 0);
          transform: rotate(0deg) translate(0, 0);
}
.cta-footer .right-arrow-link {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  .cta-footer .right-arrow-link {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer .right-arrow-link {
    font-size: 116px;
  }
}
.cta-footer .right-arrow-link .canela-emphasis::after {
  bottom: 3px;
}
@media (min-width: 768px) {
  .cta-footer .right-arrow-link .canela-emphasis::after {
    bottom: 0.1em;
  }
}
.cta-footer .right-arrow-link svg {
  position: absolute;
  top: 0;
  stroke: white;
  margin-top: 2.1em;
  width: 34px;
}
@media (min-width: 768px) {
  .cta-footer .right-arrow-link svg {
    margin-top: 1.5em;
    width: 31px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .cta-footer .right-arrow-link svg {
    margin-top: 1.6em;
    width: 62px;
  }
}

.footer {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 250px;
}
@media (min-width: 1920px) {
  .footer {
    max-width: 1680px;
  }
}
@media (min-width: 768px) {
  .footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1440px) {
  .footer {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 768px) {
  .footer {
    height: 94px;
    margin-top: 0;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .footer > :nth-of-type(3) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .footer > :nth-of-type(4) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .footer > :nth-of-type(5) {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .footer > :nth-of-type(6) {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
}
.footer__logo,
.footer__links,
.footer__social {
  width: calc((((100% - 16px) / 2) * 1) + 0px + 0px);
}
@media (min-width: 768px) {
  .footer__logo,
  .footer__links,
  .footer__social {
    width: calc((((100% - 200px) / 6) * 1) + 0px + 0px);
  }
}
@media (min-width: 768px) {
  .footer__links,
  .footer__social {
    margin-left: 40px;
  }
}
.footer__logo {
  display: none;
}
.footer__logo svg {
  fill: white;
  width: 27px;
  height: 17px;
}
@media (min-width: 768px) {
  .footer__logo {
    display: block;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer__logo svg {
    width: 49px;
    height: 32px;
  }
}
.footer__links {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: white;
  margin-bottom: 60px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer__links {
    font-size: 16px;
  }
}
.footer__links:nth-of-type(3) .footer__link,
.footer__links:nth-of-type(4) .footer__link {
  min-width: 8em;
}
.footer__links-header {
  margin-bottom: 22px;
}
.footer__link {
  display: block;
  margin-bottom: 0.7em;
  opacity: 0.6;
  -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.footer__link:last-of-type {
  margin-bottom: 0;
}
.footer__link:hover {
  opacity: 0.8;
}
.footer__social {
  margin-bottom: 60px;
  white-space: nowrap;
  width: 100%;
}
@media (min-width: 768px) {
  .footer__social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: auto;
  }
}
.footer__social p {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: white;
  white-space: nowrap;
  margin-bottom: 2em;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer__social p {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .footer__social p {
    width: auto;
    margin-right: 0;
    padding-right: 0;
    white-space: normal;
  }
}
.footer__social p a {
  opacity: 1;
}
@media (min-width: 768px) {
  .footer__social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 110px;
    margin-bottom: 0;
  }
}
.footer__social-icons svg {
  fill: white;
  width: 16px;
  height: 16px;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer__social-icons svg {
    width: 17px;
    height: 17px;
    margin-bottom: 16px;
  }
}
.footer__social-icons a {
  padding: 8px;
  margin-right: 4px;
  text-align: center;
  opacity: 0.6;
  -webkit-transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.footer__social-icons a:first-of-type {
  margin-left: -8px;
}
.footer__social-icons a:last-child {
  margin-right: 0;
}
.footer__social-icons a:hover {
  opacity: 0.8;
}
@media (min-width: 768px) {
  .footer__social-icons a {
    padding: 6px;
    margin-right: 3px;
  }
  .footer__social-icons a:first-of-type {
    margin-left: -6px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .footer__social-icons a {
    padding: 0;
    margin-right: 16px;
  }
  .footer__social-icons a:first-of-type {
    margin-left: 0;
  }
}

.layout-grid {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 200;
  display: none;
}
.layout-grid.is-visible {
  display: block;
}
.layout-grid__mobile,
.layout-grid__tablet,
.layout-grid__desktop {
  padding-left: 16px;
  padding-right: 16px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 768px) {
  .layout-grid__mobile,
  .layout-grid__tablet,
  .layout-grid__desktop {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .layout-grid__mobile,
  .layout-grid__tablet,
  .layout-grid__desktop {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1440px) {
  .layout-grid__mobile,
  .layout-grid__tablet,
  .layout-grid__desktop {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.layout-grid__mobile > div,
.layout-grid__tablet > div,
.layout-grid__desktop > div {
  background-color: rgba(116, 19, 19, 0.15);
  height: 100%;
}
.layout-grid__mobile > div:not(:last-child),
.layout-grid__tablet > div:not(:last-child),
.layout-grid__desktop > div:not(:last-child) {
  margin-right: 16px;
}
@media (min-width: 768px) {
  .layout-grid__mobile > div:not(:last-child),
  .layout-grid__tablet > div:not(:last-child),
  .layout-grid__desktop > div:not(:last-child) {
    margin-right: 40px;
  }
}
@media (min-width: 768px) {
  .layout-grid__mobile {
    display: none;
  }
}
.layout-grid__mobile > div {
  width: calc((((100% - 16px) / 2) * 1) + 0px + 0px);
}
.layout-grid__tablet {
  display: none;
}
@media (min-width: 768px) {
  .layout-grid__tablet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  .layout-grid__tablet {
    display: none;
  }
}
.layout-grid__tablet > div {
  width: calc((((100% - 200px) / 6) * 1) + 0px + 0px);
}
.layout-grid__desktop {
  display: none;
}
@media (min-width: 1020px) and (orientation: landscape) {
  .layout-grid__desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.layout-grid__desktop > div {
  width: calc((((100% - 440px) / 12) * 1) + 0px + 0px);
}
.layout-grid__desktop.constrained-width {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1920px) {
  .layout-grid__desktop.constrained-width {
    max-width: 1680px;
  }
}

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */


/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button {
  vertical-align: baseline;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  width: 100%;
  background-color: #fff;
}


li { list-style: none; }

/* HTML5 display definitions
   ========================================================================== */


/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article, aside, details,
/* 1 */

figcaption, figure, footer, header, main,
/* 2 */

menu, nav, section, summary {
  /* 1 */
  display: block;
}


/**
 * Add the correct display in IE 9-.
 */

audio, canvas, progress, video {
  display: inline-block;
}


/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}


/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template,
/* 1 */

[hidden] {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
  text-decoration: none;
  color: inherit;
}


/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active, a:hover {
  outline-width: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}


/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b, strong {
  font-weight: inherit;
}


/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}


/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}


/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ececec;
  color: #000;
}


/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}


/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}


/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}


/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}


/* Forms
   ========================================================================== */


/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, select, textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button, html [type="button"],
/* 1 */

[type="reset"], [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}


/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}


/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"], [type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}


/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}


/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-400.woff2") format("woff2"),
    url("../fonts/clarkson-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Clarkson";
  src: local("?"), url("../fonts/clarkson-500.woff2") format("woff2"),
    url("../fonts/clarkson-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light.woff2") format("woff2"),
    url("../fonts/canela-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Canela";
  src: local("?"), url("../fonts/canela-light-italic.woff2") format("woff2"),
    url("../fonts/canela-light-italic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Canela Text";
  src: local("?"), url("../fonts/canela-text-regular.woff2") format("woff2"),
    url("../fonts/canela-text-regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

/*
Default border padding for the sides.
Using values from the grid
*/
/*
Default top and bottom padding for sections.
*/
/*
To animate a paragraph line by line,
each line must be split into this structure:

<span className="text-line">
  <span className="text-container">
    {text}
  </span>
</span>

Default styling for `.text-line` and `.text-container` is in defaults.less.

Apply this mixin to `.text-container` to set the starting transform.

Apply `.mixin-text-line-reveal-animation.is-revealed()`
when the parent element is visible or loaded.
*/
/*
Url must be a relative path.
*/
/*
Adding the class 'no-scroll' will disable scrolling
*/
/**

The grid is defined in three different breakpoints. Each breakpoint has outer gutters:
  - Phone (2 columns with gutters of 16px)
  - Tablet (6 columns with gutters of 40px)
  - Desktop (12 columns with gutters of 40px)

To keep column size clear, we talk about the grid in 12 column increments on every breakpoint, i.e.
  - Phone has 2 columns that we think of as 12 columns, so it has 2 columns of 6 units width.
  - Tablet has 6 columns that we think of as 12 columns, so it has 6 columns of 2 units width each.
  - Desktop has 12 columns of 1 unit each.

At desktop, the grid is broken into full-width and constrained-width grids at
1400px. The variable here is 1480 because we are accounting for the 2 outer
gutters (which are usually created with padding inside of the container).

Because the grid is defined by fixed gutters, we have to use percentage to
calculate column width (the rest of the area). This means we use calc to
determine how wide a column should be:

100% of the grid minus the amount of gutters in between the columns will give
you the amount of total space used by columns. That amount of space divided by
the number of columns will give you the single column width.

calc(100% - (number_of_inner_gutters * gutter_width)) / number_of_columns

e.g. for desktop grid, column width is calculated:

calc(100% - (11 * 40px)) / 12
  - 11 is the total number of inner gutters
  - 40px is the gutter width
  - 12 is the amount of columns

for tablet:

calc(100% - (5 * 40px)) / 6
  - 5 is the total number of inner gutters
  - 40px is the gutter width
  - 6 is the amount of columns

for mobile:

calc(100% - (1 * 16px)) / 2
  - 1 is the total number of inner gutters
  - 16px is the gutter width
  - 2 is the amount of columns


There are some additional helper variables and mixins for using vw instead of
percentage. This should be used in very rare cases and _only_ on the full width
grid. You may need this if you have a carousel that is wider than the screen,
for example.

**/
/**
Use this mixin on a container when the container should abide by the
constrained-width grid.
**/
/**
This mixin is the "parent" mixin that all the other mixins use. This one should
rarely be used because the mixins below are specific to those breakpoints.
**/
h1 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 48px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 64px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h1 {
    font-size: 116px;
  }
}
h3 {
  font-family: Clarkson, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 28px;
}
@media (min-width: 768px) {
  h3 {
    font-size: 36px;
  }
}
@media (min-width: 1020px) and (orientation: landscape) {
  h3 {
    font-size: 48px;
  }
}
.canela-emphasis,
.canela-emphasis-link {
  position: relative;
  font-family: Canela, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 100;
  line-height: 1em;
  letter-spacing: 0em;
  text-transform: none;
  text-decoration: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: italic;
}
.canela-emphasis::after,
.canela-emphasis-link::after {
  position: absolute;
  content: "";
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: white;
}
@media (min-width: 1440px) {
  .canela-emphasis::after,
  .canela-emphasis-link::after {
    height: 2px;
  }
}
.text-line {
  display: block;
  overflow: hidden;
}
.text-container {
  display: inline-block;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#cdn-lark {
  display: none;
}
#consent_blackbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 200;
}
div.truste_box_overlay {
  position: fixed !important;
}
body {
  background-color: black;
}
#index {
  height: auto;
  position: relative;
  overflow: initial;
}
#index.no-scroll {
  height: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #index.no-scroll {
    height: initial;
    overflow: initial;
  }
}
#index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(1) {
  background-position: 80%;
}
@media (min-width: 768px) {
  #index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(1) {
    background-position: bottom;
  }
}
#index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(2) {
  background-position: 10%;
}
@media (min-width: 768px) {
  #index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(2) {
    background-position: bottom;
  }
}
#index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(4) {
  background-position: 99%;
  background-size: 292%;
}
@media (min-width: 768px) {
  #index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(4) {
    background-size: cover;
    background-position: bottom;
  }
}
#index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(5) {
  background-position: 50%;
}
@media (min-width: 768px) {
  #index .cta-footer__background-slideshow .images-slideshow__image:nth-of-type(5) {
    background-position: bottom;
  }
}
#index .cta-footer .right-arrow-link svg {
  right: 0.8em;
}
@media (min-width: 768px) {
  #index .cta-footer .right-arrow-link svg {
    right: 1.1em;
  }
}
#index .cta-footer .footer {
  margin-top: 220px;
}
@media (min-width: 768px) {
  #index .cta-footer .footer {
    margin-top: 0;
  }
}