@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400;900&display=swap");
.container {
  width: calc(100% - 2 * var(--component-padding));
  margin-left: auto;
  margin-right: auto;
}

.grid, .flex, .inline-flex,
[class^=flex\@], [class*=" flex@"],
[class^=inline-flex\@], [class*=" inline-flex@"] {
  --gap: 0px;
  --gap-x: var(--gap);
  --gap-y: var(--gap);
  gap: var(--gap-y) var(--gap-x);
}
.grid > *, .flex > *, .inline-flex > *,
[class^=flex\@] > *, [class*=" flex@"] > *,
[class^=inline-flex\@] > *, [class*=" inline-flex@"] > * {
  --sub-gap: 0px;
  --sub-gap-x: var(--sub-gap);
  --sub-gap-y: var(--sub-gap);
}

.grid {
  --grid-columns: 12;
  display: flex;
  flex-wrap: wrap;
}
.grid > * {
  flex-basis: 100%;
  max-width: 100%;
  min-width: 0;
}

/* #region (Safari < 14.1 fallback) */
@media not all and (min-resolution: 0.001dpcm) {
  @supports not (translate: none) {
    .grid, .flex[class*=gap-], .inline-flex[class*=gap-] {
      gap: 0px;
      margin-bottom: calc(-1 * var(--gap-y));
      margin-left: calc(-1 * var(--gap-x));
    }
    .grid > *, .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * {
      margin-bottom: var(--sub-gap-y);
    }
    .grid {
      --offset: var(--gap-x);
      --gap-modifier: 0;
      --offset-modifier: 1;
    }
    .grid > * {
      margin-left: var(--offset);
    }
    .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * {
      margin-left: var(--sub-gap-x);
    }
  }
}
/* #endregion */

.gap-xxxs {
  --gap-x: var(--space-xxxs);
  --gap-y: var(--space-xxxs);
}
.gap-xxxs > * {
  --sub-gap-x: var(--space-xxxs);
  --sub-gap-y: var(--space-xxxs);
}

.gap-xs {
  --gap-x: var(--space-xs);
  --gap-y: var(--space-xs);
}
.gap-xs > * {
  --sub-gap-x: var(--space-xs);
  --sub-gap-y: var(--space-xs);
}

.gap-sm {
  --gap-x: var(--space-sm);
  --gap-y: var(--space-sm);
}
.gap-sm > * {
  --sub-gap-x: var(--space-sm);
  --sub-gap-y: var(--space-sm);
}

.gap-md {
  --gap-x: var(--space-md);
  --gap-y: var(--space-md);
}
.gap-md > * {
  --sub-gap-x: var(--space-md);
  --sub-gap-y: var(--space-md);
}

.gap-lg {
  --gap-x: var(--space-lg);
  --gap-y: var(--space-lg);
}
.gap-lg > * {
  --sub-gap-x: var(--space-lg);
  --sub-gap-y: var(--space-lg);
}

.col-9 {
  --span: 9;
}

.col-12 {
  --span: 12;
}

 .col-9, .col-12 {
  flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
  max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
}

.col {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

@media (min-width: 32rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 48rem) {
  .col-6\@sm {
    --span: 6;
  }
   .col-6\@sm {
    flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
  }
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 64rem) {
  .col-3\@md {
    --span: 3;
  }
  .col-4\@md {
    --span: 4;
  }
  .col-6\@md {
    --span: 6;
  }
   .col-3\@md, .col-4\@md, .col-6\@md {
    flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
  }
  .col\@md {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
  }
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 80rem) {
  .col-2\@lg {
    --span: 2;
  }
   .col-2\@lg {
    flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
    max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));
  }
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 90rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
*, *::after, *::before {
  box-sizing: inherit;
}

* {
  font: inherit;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, p,
a, address, em, img, s,
small, var,
b, u, i, ol, ul, li,
table, caption,
article, details, embed,
figure, figcaption, header,
menu, nav, section, summary,
time, mark, audio, video, hr {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg, white);
}

article, details, figcaption, figure, header, menu, nav, section, main {
  display: block;
}

ol, ul, menu {
  list-style: none;
}

button, input {
  margin: 0;
}

.btn, .link, .reset {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input::-ms-clear {
  display: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  max-width: 100%;
}

[data-theme] {
  background-color: var(--color-bg, hsl(0deg, 0%, 100%));
  color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
}

:root {
  --space-unit: 1rem;
}

:root, * {
  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.375 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md);
}

:root {
  --radius-sm: calc(var(--radius, 0.375em)/2);
  --radius-md: var(--radius, 0.375em);
  --radius-lg: calc(var(--radius, 0.375em)*2);
  --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05);
  --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02),
                0 1px 3px -1px hsla(0, 0%, 0%, 0.2);
  --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025),
                0 3px 5px hsla(0, 0%, 0%, 0.05),
                0 12px 20px hsla(0, 0%, 0%, 0.09);
  --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01),
                0 3px 5px -1px hsla(0, 0%, 0%, 0.015),
                0 8px 15px -1px hsla(0, 0%, 0%, 0.05),
                0 28px 40px -1px hsla(0, 0%, 0%, 0.1);
  --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009),
                0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115),
                0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125),
                0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025),
                0 46px 60px -6px hsla(0, 0%, 0%, 0.15);
  --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
  --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root {
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
}

body {
  font-size: var(--text-base-size, 1rem);
  font-family: var(--font-primary, sans-serif);
  color: var(--color-contrast-high, hsl(210deg, 7%, 21%));
  font-weight: var(--body-font-weight, normal);
}

h1, h2, h3, h4 {
  color: var(--color-contrast-higher, hsl(204deg, 28%, 7%));
  line-height: var(--heading-line-height, 1.2);
  font-weight: var(--heading-font-weight, 700);
}

h1 {
  font-size: var(--text-xxl, 2rem);
}

h2 {
  font-size: var(--text-xl, 1.75rem);
}

h3 {
  font-size: var(--text-lg, 1.375rem);
}

h4 {
  font-size: var(--text-md, 1.125rem);
}

small {
  font-size: var(--text-sm, 0.75rem);
}

a, .link {
  color: var(--color-primary, hsl(250deg, 84%, 54%));
  text-decoration: underline;
}

s {
  text-decoration: line-through;
}

u {
  text-decoration: underline;
}

.text-component h1, .text-component h2, .text-component h3, .text-component h4 {
  line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
  margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1));
}
.text-component h2, .text-component h3, .text-component h4 {
  margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
}
.text-component p, .text-component ul li, .text-component ol li {
  line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
}
.text-component ul, .text-component ol, .text-component p, .text-component .text-component__block {
  margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
}
.text-component ul, .text-component ol {
  list-style-position: inside;
}
.text-component ul ul, .text-component ul ol, .text-component ol ul, .text-component ol ol {
  padding-left: 1em;
  margin-bottom: 0;
}
.text-component ul {
  list-style-type: disc;
}
.text-component ol {
  list-style-type: decimal;
}
.text-component img {
  display: block;
  margin: 0 auto;
}
.text-component figcaption {
  text-align: center;
  margin-top: calc(var(--space-unit) * 0.5);
}
.text-component em {
  font-style: italic;
}
.text-component hr {
  margin-top: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
  margin-bottom: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1));
  margin-left: auto;
  margin-right: auto;
}
.text-component > *:first-child {
  margin-top: 0;
}
.text-component > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 48rem) {
  .text-component__block--left,
  .text-component__block--right {
    width: 45%;
  }
  .text-component__block--left img,
  .text-component__block--right img {
    width: 100%;
  }
  .text-component__block--left {
    float: left;
    margin-right: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
  }
  .text-component__block--right {
    float: right;
    margin-left: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
  }
}
@media (min-width: 90rem) {
  .text-component__block--outset {
    width: calc(100% + 10.5 * var(--space-unit));
  }
  .text-component__block--outset img {
    width: 100%;
  }
  .text-component__block--outset:not(.text-component__block--right) {
    margin-left: calc(-5.25 * var(--space-unit));
  }
  .text-component__block--left, .text-component__block--right {
    width: 50%;
  }
  .text-component__block--right.text-component__block--outset {
    margin-right: calc(-5.25 * var(--space-unit));
  }
}
:root {
  --icon-xxxs: 8px;
  --icon-xxs: 12px;
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-xl: 64px;
  --icon-xxl: 96px;
  --icon-xxxl: 128px;
}

.icon {
  --size: 1em;
  font-size: var(--size);
  height: 1em;
  width: 1em;
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.icon--xs {
  --size: var(--icon-xs);
}

.icon--sm {
  --size: var(--icon-sm);
}

.icon--md {
  --size: var(--icon-md);
}

.icon--is-spinning {
  animation: icon-spin 1s infinite linear;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.icon use {
  color: inherit;
  fill: currentColor;
}

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--btn-font-size, 1em);
  padding-top: var(--btn-padding-y, 0.5em);
  padding-bottom: var(--btn-padding-y, 0.5em);
  padding-left: var(--btn-padding-x, 0.75em);
  padding-right: var(--btn-padding-x, 0.75em);
  border-radius: var(--btn-radius, 0.25em);
}

:root {
  --z-index-header: 3;
  --z-index-popover: 5;
  --z-index-fixed-element: 10;
  --z-index-overlay: 15;
}

:root {
  --display: block;
}

.is-hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

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

.flex-column {
  flex-direction: column;
}

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

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

[class^=aspect-ratio], [class*=" aspect-ratio"] {
  --aspect-ratio: calc(16/9);
  position: relative;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[class^=aspect-ratio] > *, [class*=" aspect-ratio"] > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[class^=aspect-ratio] > *:not(iframe), [class*=" aspect-ratio"] > *:not(iframe) {
  -o-object-fit: cover;
     object-fit: cover;
}

.aspect-ratio-16\:9 {
  --aspect-ratio: calc(16/9);
}

.aspect-ratio-4\:3 {
  --aspect-ratio: calc(4/3);
}

.block {
  display: block;
}

.hide {
  display: none;
}

.margin-top-sm {
  margin-top: var(--space-sm);
}

.margin-top-xxl {
  margin-top: var(--space-xxl);
}

.margin-top-auto {
  margin-top: auto;
}

.margin-bottom-xxs {
  margin-bottom: var(--space-xxs);
}

.margin-bottom-xs {
  margin-bottom: var(--space-xs);
}

.margin-bottom-md {
  margin-bottom: var(--space-md);
}

.margin-bottom-lg {
  margin-bottom: var(--space-lg);
}

.margin-bottom-xl {
  margin-bottom: var(--space-xl);
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-right-xxxs {
  margin-right: var(--space-xxxs);
}

.margin-left-xxxs {
  margin-left: var(--space-xxxs);
}

.padding-md {
  padding: var(--space-md);
}

.padding-top-lg {
  padding-top: var(--space-lg);
}

.padding-top-xl {
  padding-top: var(--space-xl);
}

.padding-top-xxxl {
  padding-top: var(--space-xxxl);
}

.padding-bottom-md {
  padding-bottom: var(--space-md);
}

.padding-bottom-lg {
  padding-bottom: var(--space-lg);
}

.padding-bottom-xxl {
  padding-bottom: var(--space-xxl);
}

.padding-bottom-xxxl {
  padding-bottom: var(--space-xxxl);
}

.padding-left-xxl {
  padding-left: var(--space-xxl);
}

.padding-x-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.padding-y-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.padding-y-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.padding-y-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.padding-y-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.align-middle {
  vertical-align: middle;
}

.text-sm {
  font-size: var(--text-sm, 0.75rem);
}

.text-md {
  font-size: var(--text-md, 1.125rem);
}

.text-lg {
  font-size: var(--text-lg, 1.375rem);
}

.text-xl {
  font-size: var(--text-xl, 1.75rem);
}

.text-xxl {
  font-size: var(--text-xxl, 2rem);
}

.text-xxxl {
  font-size: var(--text-xxxl, 2.5rem);
}

 .text-bold {
  font-weight: 700;
}

.font-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-primary {
  font-family: var(--font-primary);
}

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

.text-left {
  text-align: left;
}

.text-shadow-md {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.text-shadow-lg {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2);
}

.text-space-y-xxs {
  --text-space-y-multiplier: 0.25 !important;
}

.text-space-y-md {
  --text-space-y-multiplier: 1.25 !important;
}

.line-height-xs {
  --heading-line-height: 1;
  --body-line-height: 1.1;
}
.line-height-xs:not(.text-component) {
  line-height: 1.1;
}

.line-height-lg {
  --heading-line-height: 1.22;
  --body-line-height: 1.58;
}
.line-height-lg:not(.text-component) {
  line-height: 1.58;
}

[class^=color-], [class*=" color-"] {
  --color-o: 1;
}

.color-inherit {
  color: inherit;
}

.color-contrast-lower {
  color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--color-o, 1));
}

.color-contrast-medium {
  color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1));
}

.color-contrast-higher {
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1));
}

.color-primary {
  color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-o, 1));
}

.color-accent {
  color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--color-o, 1));
}

.color-accent-lighter {
  color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--color-o, 1));
}

.color-white {
  color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-o, 1));
}

.color-black {
  color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-o, 1));
}

.color-opacity-50\% {
  --color-o: 0.5;
}

[class^=color-gradient], [class*=" color-gradient"] {
  color: transparent !important;
  -webkit-background-clip: text;
          background-clip: text;
}

.height-100\% {
  height: 100%;
}

.min-height-100vh {
  min-height: 100vh;
}

:root {
  --max-width-xxxxxs: 17.5rem;
  --max-width-xxxxs: 20rem;
  --max-width-xxxs: 26rem;
  --max-width-xxs: 32rem;
  --max-width-xs: 38rem;
  --max-width-sm: 48rem;
  --max-width-md: 64rem;
  --max-width-lg: 80rem;
  --max-width-xl: 90rem;
  --max-width-xxl: 100rem;
  --max-width-xxxl: 120rem;
  --max-width-xxxxl: 150rem;
}

.max-width-xxs {
  max-width: var(--max-width-xxs);
}

.max-width-sm {
  max-width: var(--max-width-sm);
}

.max-width-md {
  max-width: var(--max-width-md);
}

.max-width-lg {
  max-width: var(--max-width-lg);
}

[class^=max-width-adaptive], [class*=" max-width-adaptive"] {
  max-width: 32rem;
}

@media (min-width: 48rem) {
  .max-width-adaptive-sm, .max-width-adaptive-lg {
    max-width: 48rem;
  }
}
@media (min-width: 64rem) {
   .max-width-adaptive-lg {
    max-width: 64rem;
  }
}
@media (min-width: 80rem) {
  .max-width-adaptive-lg {
    max-width: 80rem;
  }
}
:where(.inner-glow, .inner-glow-top)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.position-relative {
  position: relative;
}

.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.opacity-50\% {
  opacity: 0.5;
}

.opacity-60\% {
  opacity: 0.6;
}

[class^=border-], [class*=" border-"] {
  --border-o: 1;
}

.radius-md {
  border-radius: var(--radius-md);
}

.bg, [class^=bg-], [class*=" bg-"] {
  --bg-o: 1;
}

.bg-transparent {
  background-color: transparent;
}

.bg {
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o));
}

.bg-contrast-higher {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--bg-o, 1));
}

.bg-black {
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1));
}

.bg-opacity-0 {
  --bg-o: 0;
}

[class^=flip], [class*=" flip"],
[class^=-rotate], [class*=" -rotate"],
[class^=rotate], [class*=" rotate"],
[class^=-translate], [class*=" -translate"],
[class^=translate], [class*=" translate"],
[class^=-scale], [class*=" -scale"],
[class^=scale], [class*=" scale"],
[class^=-skew], [class*=" -skew"] [class^=skew],
[class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;
  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

.flip-x {
  --scale-x: -1;
}

.transition {
  transition-property: var(--transition-property, all);
  transition-duration: var(--transition-duration, 0.2s);
  transition-delay: var(--transition-delay, 0s);
}

.visible {
  visibility: visible;
}
@media (min-width: 48rem) {
  .flex\@sm {
    display: flex;
  }
  .flex-row\@sm {
    flex-direction: row;
  }
  .justify-end\@sm {
    justify-content: flex-end;
  }
  .margin-top-auto\@sm {
    margin-top: auto;
  }
  .margin-bottom-0\@sm {
    margin-bottom: 0;
  }
  .padding-y-md\@sm {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
  .text-sm\@sm {
    font-size: var(--text-sm, 0.75rem);
  }
  .text-xxxl\@sm {
    font-size: var(--text-xxxl, 2.5rem);
  }
}
@media not all and (min-width: 48rem) {
  .display\@sm {
    display: none !important;
  }
}
@media (min-width: 64rem) {
  .flex\@md {
    display: flex;
  }
  .text-xxl\@md {
    font-size: var(--text-xxl, 2rem);
  }
}
@media not all and (min-width: 64rem) {
  .display\@md {
    display: none !important;
  }
}
@media not all and (min-width: 80rem) {
  .display\@lg {
    display: none !important;
  }
}
:root, [data-theme=default] {
  --color-primary-darker: hsl(210, 76%, 25%);
  --color-primary-darker-h: 210;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 25%;
  --color-primary-dark: hsl(210, 76%, 31%);
  --color-primary-dark-h: 210;
  --color-primary-dark-s: 76%;
  --color-primary-dark-l: 31%;
  --color-primary: hsl(210, 76%, 37%);
  --color-primary-h: 210;
  --color-primary-s: 76%;
  --color-primary-l: 37%;
  --color-primary-light: hsl(210, 76%, 43%);
  --color-primary-light-h: 210;
  --color-primary-light-s: 76%;
  --color-primary-light-l: 43%;
  --color-primary-lighter: hsl(210, 76%, 49%);
  --color-primary-lighter-h: 210;
  --color-primary-lighter-s: 76%;
  --color-primary-lighter-l: 49%;
  --color-accent-darker: hsl(14, 82%, 38%);
  --color-accent-darker-h: 14;
  --color-accent-darker-s: 82%;
  --color-accent-darker-l: 38%;
  --color-accent-dark: hsl(14, 82%, 44%);
  --color-accent-dark-h: 14;
  --color-accent-dark-s: 82%;
  --color-accent-dark-l: 44%;
  --color-accent: hsl(14, 82%, 50%);
  --color-accent-h: 14;
  --color-accent-s: 82%;
  --color-accent-l: 50%;
  --color-accent-light: hsl(14, 82%, 56%);
  --color-accent-light-h: 14;
  --color-accent-light-s: 82%;
  --color-accent-light-l: 56%;
  --color-accent-lighter: hsl(14, 82%, 62%);
  --color-accent-lighter-h: 14;
  --color-accent-lighter-s: 82%;
  --color-accent-lighter-l: 62%;
  --color-secondary-darker: hsl(52, 98%, 42%);
  --color-secondary-darker-h: 52;
  --color-secondary-darker-s: 98%;
  --color-secondary-darker-l: 42%;
  --color-secondary-dark: hsl(52, 98%, 48%);
  --color-secondary-dark-h: 52;
  --color-secondary-dark-s: 98%;
  --color-secondary-dark-l: 48%;
  --color-secondary: hsl(52, 98%, 54%);
  --color-secondary-h: 52;
  --color-secondary-s: 98%;
  --color-secondary-l: 54%;
  --color-secondary-light: hsl(52, 98%, 60%);
  --color-secondary-light-h: 52;
  --color-secondary-light-s: 98%;
  --color-secondary-light-l: 60%;
  --color-secondary-lighter: hsl(52, 98%, 66%);
  --color-secondary-lighter-h: 52;
  --color-secondary-lighter-s: 98%;
  --color-secondary-lighter-l: 66%;
  --color-black: hsl(0, 0%, 17%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 17%;
  --color-white: hsl(180, 20%, 98%);
  --color-white-h: 180;
  --color-white-s: 20%;
  --color-white-l: 98%;
  --color-warning-darker: hsl(35, 79%, 48%);
  --color-warning-darker-h: 35;
  --color-warning-darker-s: 79%;
  --color-warning-darker-l: 48%;
  --color-warning-dark: hsl(35, 79%, 56%);
  --color-warning-dark-h: 35;
  --color-warning-dark-s: 79%;
  --color-warning-dark-l: 56%;
  --color-warning: hsl(35, 79%, 66%);
  --color-warning-h: 35;
  --color-warning-s: 79%;
  --color-warning-l: 66%;
  --color-warning-light: hsl(35, 79%, 74%);
  --color-warning-light-h: 35;
  --color-warning-light-s: 79%;
  --color-warning-light-l: 74%;
  --color-warning-lighter: hsl(35, 79%, 82%);
  --color-warning-lighter-h: 35;
  --color-warning-lighter-s: 79%;
  --color-warning-lighter-l: 82%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(342, 89%, 38%);
  --color-error-darker-h: 342;
  --color-error-darker-s: 89%;
  --color-error-darker-l: 38%;
  --color-error-dark: hsl(342, 89%, 43%);
  --color-error-dark-h: 342;
  --color-error-dark-s: 89%;
  --color-error-dark-l: 43%;
  --color-error: hsl(342, 89%, 48%);
  --color-error-h: 342;
  --color-error-s: 89%;
  --color-error-l: 48%;
  --color-error-light: hsl(342, 89%, 56%);
  --color-error-light-h: 342;
  --color-error-light-s: 89%;
  --color-error-light-l: 56%;
  --color-error-lighter: hsl(342, 89%, 62%);
  --color-error-lighter-h: 342;
  --color-error-lighter-s: 89%;
  --color-error-lighter-l: 62%;
  --color-bg-darker: hsl(15, 6%, 88%);
  --color-bg-darker-h: 15;
  --color-bg-darker-s: 6%;
  --color-bg-darker-l: 88%;
  --color-bg-dark: hsl(15, 9%, 91%);
  --color-bg-dark-h: 15;
  --color-bg-dark-s: 9%;
  --color-bg-dark-l: 91%;
  --color-bg: hsl(15, 25%, 97%);
  --color-bg-h: 15;
  --color-bg-s: 25%;
  --color-bg-l: 97%;
  --color-bg-light: hsl(15, 9%, 100%);
  --color-bg-light-h: 15;
  --color-bg-light-s: 9%;
  --color-bg-light-l: 100%;
  --color-bg-lighter: hsl(15, 6%, 100%);
  --color-bg-lighter-h: 15;
  --color-bg-lighter-s: 6%;
  --color-bg-lighter-l: 100%;
  --color-contrast-lower: hsl(15, 5%, 84%);
  --color-contrast-lower-h: 15;
  --color-contrast-lower-s: 5%;
  --color-contrast-lower-l: 84%;
  --color-contrast-low: hsl(30, 1%, 66%);
  --color-contrast-low-h: 30;
  --color-contrast-low-s: 1%;
  --color-contrast-low-l: 66%;
  --color-contrast-medium: hsl(0, 0%, 51%);
  --color-contrast-medium-h: 0;
  --color-contrast-medium-s: 0%;
  --color-contrast-medium-l: 51%;
  --color-contrast-high: hsl(0, 0%, 29%);
  --color-contrast-high-h: 0;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 29%;
  --color-contrast-higher: hsl(0, 0%, 17%);
  --color-contrast-higher-h: 0;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 17%;
}

[data-theme=travel] {
  --color-primary-darker: hsl(210, 76%, 25%);
  --color-primary-darker-h: 210;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 25%;
  --color-primary-dark: hsl(210, 76%, 31%);
  --color-primary-dark-h: 210;
  --color-primary-dark-s: 76%;
  --color-primary-dark-l: 31%;
  --color-primary: hsl(210, 76%, 37%);
  --color-primary-h: 210;
  --color-primary-s: 76%;
  --color-primary-l: 37%;
  --color-primary-light: hsl(210, 76%, 43%);
  --color-primary-light-h: 210;
  --color-primary-light-s: 76%;
  --color-primary-light-l: 43%;
  --color-primary-lighter: hsl(210, 76%, 49%);
  --color-primary-lighter-h: 210;
  --color-primary-lighter-s: 76%;
  --color-primary-lighter-l: 49%;
  --color-accent-darker: hsl(14, 82%, 38%);
  --color-accent-darker-h: 14;
  --color-accent-darker-s: 82%;
  --color-accent-darker-l: 38%;
  --color-accent-dark: hsl(14, 82%, 44%);
  --color-accent-dark-h: 14;
  --color-accent-dark-s: 82%;
  --color-accent-dark-l: 44%;
  --color-accent: hsl(14, 82%, 50%);
  --color-accent-h: 14;
  --color-accent-s: 82%;
  --color-accent-l: 50%;
  --color-accent-light: hsl(14, 82%, 56%);
  --color-accent-light-h: 14;
  --color-accent-light-s: 82%;
  --color-accent-light-l: 56%;
  --color-accent-lighter: hsl(14, 82%, 62%);
  --color-accent-lighter-h: 14;
  --color-accent-lighter-s: 82%;
  --color-accent-lighter-l: 62%;
  --color-secondary-darker: hsl(52, 98%, 42%);
  --color-secondary-darker-h: 52;
  --color-secondary-darker-s: 98%;
  --color-secondary-darker-l: 42%;
  --color-secondary-dark: hsl(52, 98%, 48%);
  --color-secondary-dark-h: 52;
  --color-secondary-dark-s: 98%;
  --color-secondary-dark-l: 48%;
  --color-secondary: hsl(52, 98%, 54%);
  --color-secondary-h: 52;
  --color-secondary-s: 98%;
  --color-secondary-l: 54%;
  --color-secondary-light: hsl(52, 98%, 60%);
  --color-secondary-light-h: 52;
  --color-secondary-light-s: 98%;
  --color-secondary-light-l: 60%;
  --color-secondary-lighter: hsl(52, 98%, 66%);
  --color-secondary-lighter-h: 52;
  --color-secondary-lighter-s: 98%;
  --color-secondary-lighter-l: 66%;
  --color-black: hsl(230, 13%, 9%);
  --color-black-h: 230;
  --color-black-s: 13%;
  --color-black-l: 9%;
  --color-white: hsl(0, 0%, 100%);
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-warning-darker: hsl(35, 79%, 48%);
  --color-warning-darker-h: 35;
  --color-warning-darker-s: 79%;
  --color-warning-darker-l: 48%;
  --color-warning-dark: hsl(35, 79%, 56%);
  --color-warning-dark-h: 35;
  --color-warning-dark-s: 79%;
  --color-warning-dark-l: 56%;
  --color-warning: hsl(35, 79%, 66%);
  --color-warning-h: 35;
  --color-warning-s: 79%;
  --color-warning-l: 66%;
  --color-warning-light: hsl(35, 79%, 74%);
  --color-warning-light-h: 35;
  --color-warning-light-s: 79%;
  --color-warning-light-l: 74%;
  --color-warning-lighter: hsl(35, 79%, 82%);
  --color-warning-lighter-h: 35;
  --color-warning-lighter-s: 79%;
  --color-warning-lighter-l: 82%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(342, 92%, 41%);
  --color-error-darker-h: 342;
  --color-error-darker-s: 92%;
  --color-error-darker-l: 41%;
  --color-error-dark: hsl(342, 92%, 47%);
  --color-error-dark-h: 342;
  --color-error-dark-s: 92%;
  --color-error-dark-l: 47%;
  --color-error: hsl(342, 92%, 54%);
  --color-error-h: 342;
  --color-error-s: 92%;
  --color-error-l: 54%;
  --color-error-light: hsl(342, 92%, 60%);
  --color-error-light-h: 342;
  --color-error-light-s: 92%;
  --color-error-light-l: 60%;
  --color-error-lighter: hsl(342, 92%, 65%);
  --color-error-lighter-h: 342;
  --color-error-lighter-s: 92%;
  --color-error-lighter-l: 65%;
  --color-bg-darker: hsl(0, 1%, 10%);
  --color-bg-darker-h: 0;
  --color-bg-darker-s: 1%;
  --color-bg-darker-l: 10%;
  --color-bg-dark: hsl(0, 0%, 13%);
  --color-bg-dark-h: 0;
  --color-bg-dark-s: 0%;
  --color-bg-dark-l: 13%;
  --color-bg: hsl(0, 0%, 17%);
  --color-bg-h: 0;
  --color-bg-s: 0%;
  --color-bg-l: 17%;
  --color-bg-light: hsl(0, 0%, 21%);
  --color-bg-light-h: 0;
  --color-bg-light-s: 0%;
  --color-bg-light-l: 21%;
  --color-bg-lighter: hsl(0, 1%, 24%);
  --color-bg-lighter-h: 0;
  --color-bg-lighter-s: 1%;
  --color-bg-lighter-l: 24%;
  --color-contrast-lower: hsl(0, 1%, 27%);
  --color-contrast-lower-h: 0;
  --color-contrast-lower-s: 1%;
  --color-contrast-lower-l: 27%;
  --color-contrast-low: hsl(0, 0%, 42%);
  --color-contrast-low-h: 0;
  --color-contrast-low-s: 0%;
  --color-contrast-low-l: 42%;
  --color-contrast-medium: hsl(30, 1%, 57%);
  --color-contrast-medium-h: 30;
  --color-contrast-medium-s: 1%;
  --color-contrast-medium-l: 57%;
  --color-contrast-high: hsl(20, 3%, 81%);
  --color-contrast-high-h: 20;
  --color-contrast-high-s: 3%;
  --color-contrast-high-l: 81%;
  --color-contrast-higher: hsl(15, 25%, 97%);
  --color-contrast-higher-h: 15;
  --color-contrast-higher-s: 25%;
  --color-contrast-higher-l: 97%;
}

[data-theme=carto] {
  --color-primary-darker: hsl(210, 76%, 25%);
  --color-primary-darker-h: 210;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 25%;
  --color-primary-dark: hsl(210, 76%, 31%);
  --color-primary-dark-h: 210;
  --color-primary-dark-s: 76%;
  --color-primary-dark-l: 31%;
  --color-primary: hsl(210, 76%, 37%);
  --color-primary-h: 210;
  --color-primary-s: 76%;
  --color-primary-l: 37%;
  --color-primary-light: hsl(210, 76%, 43%);
  --color-primary-light-h: 210;
  --color-primary-light-s: 76%;
  --color-primary-light-l: 43%;
  --color-primary-lighter: hsl(210, 76%, 49%);
  --color-primary-lighter-h: 210;
  --color-primary-lighter-s: 76%;
  --color-primary-lighter-l: 49%;
  --color-accent-darker: hsl(14, 82%, 38%);
  --color-accent-darker-h: 14;
  --color-accent-darker-s: 82%;
  --color-accent-darker-l: 38%;
  --color-accent-dark: hsl(14, 82%, 44%);
  --color-accent-dark-h: 14;
  --color-accent-dark-s: 82%;
  --color-accent-dark-l: 44%;
  --color-accent: hsl(14, 82%, 50%);
  --color-accent-h: 14;
  --color-accent-s: 82%;
  --color-accent-l: 50%;
  --color-accent-light: hsl(14, 82%, 56%);
  --color-accent-light-h: 14;
  --color-accent-light-s: 82%;
  --color-accent-light-l: 56%;
  --color-accent-lighter: hsl(14, 82%, 62%);
  --color-accent-lighter-h: 14;
  --color-accent-lighter-s: 82%;
  --color-accent-lighter-l: 62%;
  --color-secondary-darker: hsl(52, 98%, 42%);
  --color-secondary-darker-h: 52;
  --color-secondary-darker-s: 98%;
  --color-secondary-darker-l: 42%;
  --color-secondary-dark: hsl(52, 98%, 48%);
  --color-secondary-dark-h: 52;
  --color-secondary-dark-s: 98%;
  --color-secondary-dark-l: 48%;
  --color-secondary: hsl(52, 98%, 54%);
  --color-secondary-h: 52;
  --color-secondary-s: 98%;
  --color-secondary-l: 54%;
  --color-secondary-light: hsl(52, 98%, 60%);
  --color-secondary-light-h: 52;
  --color-secondary-light-s: 98%;
  --color-secondary-light-l: 60%;
  --color-secondary-lighter: hsl(52, 98%, 66%);
  --color-secondary-lighter-h: 52;
  --color-secondary-lighter-s: 98%;
  --color-secondary-lighter-l: 66%;
  --color-black: hsl(210, 45%, 15%);
  --color-black-h: 210;
  --color-black-s: 45%;
  --color-black-l: 15%;
  --color-white: hsl(180, 20%, 98%);
  --color-white-h: 180;
  --color-white-s: 20%;
  --color-white-l: 98%;
  --color-warning-darker: hsl(35, 79%, 48%);
  --color-warning-darker-h: 35;
  --color-warning-darker-s: 79%;
  --color-warning-darker-l: 48%;
  --color-warning-dark: hsl(35, 79%, 56%);
  --color-warning-dark-h: 35;
  --color-warning-dark-s: 79%;
  --color-warning-dark-l: 56%;
  --color-warning: hsl(35, 79%, 66%);
  --color-warning-h: 35;
  --color-warning-s: 79%;
  --color-warning-l: 66%;
  --color-warning-light: hsl(35, 79%, 74%);
  --color-warning-light-h: 35;
  --color-warning-light-s: 79%;
  --color-warning-light-l: 74%;
  --color-warning-lighter: hsl(35, 79%, 82%);
  --color-warning-lighter-h: 35;
  --color-warning-lighter-s: 79%;
  --color-warning-lighter-l: 82%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(342, 89%, 38%);
  --color-error-darker-h: 342;
  --color-error-darker-s: 89%;
  --color-error-darker-l: 38%;
  --color-error-dark: hsl(342, 89%, 43%);
  --color-error-dark-h: 342;
  --color-error-dark-s: 89%;
  --color-error-dark-l: 43%;
  --color-error: hsl(342, 89%, 48%);
  --color-error-h: 342;
  --color-error-s: 89%;
  --color-error-l: 48%;
  --color-error-light: hsl(342, 89%, 56%);
  --color-error-light-h: 342;
  --color-error-light-s: 89%;
  --color-error-light-l: 56%;
  --color-error-lighter: hsl(342, 89%, 62%);
  --color-error-lighter-h: 342;
  --color-error-lighter-s: 89%;
  --color-error-lighter-l: 62%;
  --color-bg-darker: hsl(51, 79%, 53%);
  --color-bg-darker-h: 51;
  --color-bg-darker-s: 79%;
  --color-bg-darker-l: 53%;
  --color-bg-dark: hsl(52, 86%, 53%);
  --color-bg-dark-h: 52;
  --color-bg-dark-s: 86%;
  --color-bg-dark-l: 53%;
  --color-bg: hsl(52, 98%, 54%);
  --color-bg-h: 52;
  --color-bg-s: 98%;
  --color-bg-l: 54%;
  --color-bg-light: hsl(52, 86%, 55%);
  --color-bg-light-h: 52;
  --color-bg-light-s: 86%;
  --color-bg-light-l: 55%;
  --color-bg-lighter: hsl(51, 79%, 55%);
  --color-bg-lighter-h: 51;
  --color-bg-lighter-s: 79%;
  --color-bg-lighter-l: 55%;
  --color-contrast-lower: hsl(51, 69%, 51%);
  --color-contrast-lower-h: 51;
  --color-contrast-lower-s: 69%;
  --color-contrast-lower-l: 51%;
  --color-contrast-low: hsl(50, 51%, 44%);
  --color-contrast-low-h: 50;
  --color-contrast-low-s: 51%;
  --color-contrast-low-l: 44%;
  --color-contrast-medium: hsl(50, 37%, 36%);
  --color-contrast-medium-h: 50;
  --color-contrast-medium-s: 37%;
  --color-contrast-medium-l: 36%;
  --color-contrast-high: hsl(60, 6%, 25%);
  --color-contrast-high-h: 60;
  --color-contrast-high-s: 6%;
  --color-contrast-high-l: 25%;
  --color-contrast-higher: hsl(210, 45%, 15%);
  --color-contrast-higher-h: 210;
  --color-contrast-higher-s: 45%;
  --color-contrast-higher-l: 15%;
}

[data-theme=webzine] {
  --color-primary-darker: hsl(210, 76%, 25%);
  --color-primary-darker-h: 210;
  --color-primary-darker-s: 76%;
  --color-primary-darker-l: 25%;
  --color-primary-dark: hsl(210, 76%, 31%);
  --color-primary-dark-h: 210;
  --color-primary-dark-s: 76%;
  --color-primary-dark-l: 31%;
  --color-primary: hsl(210, 76%, 37%);
  --color-primary-h: 210;
  --color-primary-s: 76%;
  --color-primary-l: 37%;
  --color-primary-light: hsl(210, 76%, 43%);
  --color-primary-light-h: 210;
  --color-primary-light-s: 76%;
  --color-primary-light-l: 43%;
  --color-primary-lighter: hsl(210, 76%, 49%);
  --color-primary-lighter-h: 210;
  --color-primary-lighter-s: 76%;
  --color-primary-lighter-l: 49%;
  --color-accent-darker: hsl(52, 98%, 42%);
  --color-accent-darker-h: 52;
  --color-accent-darker-s: 98%;
  --color-accent-darker-l: 42%;
  --color-accent-dark: hsl(52, 98%, 48%);
  --color-accent-dark-h: 52;
  --color-accent-dark-s: 98%;
  --color-accent-dark-l: 48%;
  --color-accent: hsl(52, 98%, 54%);
  --color-accent-h: 52;
  --color-accent-s: 98%;
  --color-accent-l: 54%;
  --color-accent-light: hsl(52, 98%, 60%);
  --color-accent-light-h: 52;
  --color-accent-light-s: 98%;
  --color-accent-light-l: 60%;
  --color-accent-lighter: hsl(52, 98%, 66%);
  --color-accent-lighter-h: 52;
  --color-accent-lighter-s: 98%;
  --color-accent-lighter-l: 66%;
  --color-secondary-darker: hsl(52, 98%, 42%);
  --color-secondary-darker-h: 52;
  --color-secondary-darker-s: 98%;
  --color-secondary-darker-l: 42%;
  --color-secondary-dark: hsl(52, 98%, 48%);
  --color-secondary-dark-h: 52;
  --color-secondary-dark-s: 98%;
  --color-secondary-dark-l: 48%;
  --color-secondary: hsl(52, 98%, 54%);
  --color-secondary-h: 52;
  --color-secondary-s: 98%;
  --color-secondary-l: 54%;
  --color-secondary-light: hsl(52, 98%, 60%);
  --color-secondary-light-h: 52;
  --color-secondary-light-s: 98%;
  --color-secondary-light-l: 60%;
  --color-secondary-lighter: hsl(52, 98%, 66%);
  --color-secondary-lighter-h: 52;
  --color-secondary-lighter-s: 98%;
  --color-secondary-lighter-l: 66%;
  --color-black: hsl(0, 0%, 17%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 17%;
  --color-white: hsl(180, 20%, 98%);
  --color-white-h: 180;
  --color-white-s: 20%;
  --color-white-l: 98%;
  --color-warning-darker: hsl(35, 79%, 48%);
  --color-warning-darker-h: 35;
  --color-warning-darker-s: 79%;
  --color-warning-darker-l: 48%;
  --color-warning-dark: hsl(35, 79%, 56%);
  --color-warning-dark-h: 35;
  --color-warning-dark-s: 79%;
  --color-warning-dark-l: 56%;
  --color-warning: hsl(35, 79%, 66%);
  --color-warning-h: 35;
  --color-warning-s: 79%;
  --color-warning-l: 66%;
  --color-warning-light: hsl(35, 79%, 74%);
  --color-warning-light-h: 35;
  --color-warning-light-s: 79%;
  --color-warning-light-l: 74%;
  --color-warning-lighter: hsl(35, 79%, 82%);
  --color-warning-lighter-h: 35;
  --color-warning-lighter-s: 79%;
  --color-warning-lighter-l: 82%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(342, 89%, 38%);
  --color-error-darker-h: 342;
  --color-error-darker-s: 89%;
  --color-error-darker-l: 38%;
  --color-error-dark: hsl(342, 89%, 43%);
  --color-error-dark-h: 342;
  --color-error-dark-s: 89%;
  --color-error-dark-l: 43%;
  --color-error: hsl(342, 89%, 48%);
  --color-error-h: 342;
  --color-error-s: 89%;
  --color-error-l: 48%;
  --color-error-light: hsl(342, 89%, 56%);
  --color-error-light-h: 342;
  --color-error-light-s: 89%;
  --color-error-light-l: 56%;
  --color-error-lighter: hsl(342, 89%, 62%);
  --color-error-lighter-h: 342;
  --color-error-lighter-s: 89%;
  --color-error-lighter-l: 62%;
  --color-bg-darker: hsl(13, 75%, 47%);
  --color-bg-darker-h: 13;
  --color-bg-darker-s: 75%;
  --color-bg-darker-l: 47%;
  --color-bg-dark: hsl(14, 78%, 48%);
  --color-bg-dark-h: 14;
  --color-bg-dark-s: 78%;
  --color-bg-dark-l: 48%;
  --color-bg: hsl(14, 82%, 50%);
  --color-bg-h: 14;
  --color-bg-s: 82%;
  --color-bg-l: 50%;
  --color-bg-light: hsl(14, 78%, 52%);
  --color-bg-light-h: 14;
  --color-bg-light-s: 78%;
  --color-bg-light-l: 52%;
  --color-bg-lighter: hsl(13, 75%, 53%);
  --color-bg-lighter-h: 13;
  --color-bg-lighter-s: 75%;
  --color-bg-lighter-l: 53%;
  --color-contrast-lower: hsl(13, 72%, 46%);
  --color-contrast-lower-h: 13;
  --color-contrast-lower-s: 72%;
  --color-contrast-lower-l: 46%;
  --color-contrast-low: hsl(12, 59%, 39%);
  --color-contrast-low-h: 12;
  --color-contrast-low-s: 59%;
  --color-contrast-low-l: 39%;
  --color-contrast-medium: hsl(9, 44%, 33%);
  --color-contrast-medium-h: 9;
  --color-contrast-medium-s: 44%;
  --color-contrast-medium-l: 33%;
  --color-contrast-high: hsl(344, 17%, 22%);
  --color-contrast-high-h: 344;
  --color-contrast-high-s: 17%;
  --color-contrast-high-l: 22%;
  --color-contrast-higher: hsl(210, 45%, 15%);
  --color-contrast-higher-h: 210;
  --color-contrast-higher-s: 45%;
  --color-contrast-higher-l: 15%;
}

[data-theme=clock] {
  --color-primary-darker: hsl(14, 82%, 38%);
  --color-primary-darker-h: 14;
  --color-primary-darker-s: 82%;
  --color-primary-darker-l: 38%;
  --color-primary-dark: hsl(14, 82%, 44%);
  --color-primary-dark-h: 14;
  --color-primary-dark-s: 82%;
  --color-primary-dark-l: 44%;
  --color-primary: hsl(14, 82%, 50%);
  --color-primary-h: 14;
  --color-primary-s: 82%;
  --color-primary-l: 50%;
  --color-primary-light: hsl(14, 82%, 56%);
  --color-primary-light-h: 14;
  --color-primary-light-s: 82%;
  --color-primary-light-l: 56%;
  --color-primary-lighter: hsl(14, 82%, 62%);
  --color-primary-lighter-h: 14;
  --color-primary-lighter-s: 82%;
  --color-primary-lighter-l: 62%;
  --color-accent-darker: hsl(52, 98%, 42%);
  --color-accent-darker-h: 52;
  --color-accent-darker-s: 98%;
  --color-accent-darker-l: 42%;
  --color-accent-dark: hsl(52, 98%, 48%);
  --color-accent-dark-h: 52;
  --color-accent-dark-s: 98%;
  --color-accent-dark-l: 48%;
  --color-accent: hsl(52, 98%, 54%);
  --color-accent-h: 52;
  --color-accent-s: 98%;
  --color-accent-l: 54%;
  --color-accent-light: hsl(52, 98%, 60%);
  --color-accent-light-h: 52;
  --color-accent-light-s: 98%;
  --color-accent-light-l: 60%;
  --color-accent-lighter: hsl(52, 98%, 66%);
  --color-accent-lighter-h: 52;
  --color-accent-lighter-s: 98%;
  --color-accent-lighter-l: 66%;
  --color-secondary-darker: hsl(52, 98%, 42%);
  --color-secondary-darker-h: 52;
  --color-secondary-darker-s: 98%;
  --color-secondary-darker-l: 42%;
  --color-secondary-dark: hsl(52, 98%, 48%);
  --color-secondary-dark-h: 52;
  --color-secondary-dark-s: 98%;
  --color-secondary-dark-l: 48%;
  --color-secondary: hsl(52, 98%, 54%);
  --color-secondary-h: 52;
  --color-secondary-s: 98%;
  --color-secondary-l: 54%;
  --color-secondary-light: hsl(52, 98%, 60%);
  --color-secondary-light-h: 52;
  --color-secondary-light-s: 98%;
  --color-secondary-light-l: 60%;
  --color-secondary-lighter: hsl(52, 98%, 66%);
  --color-secondary-lighter-h: 52;
  --color-secondary-lighter-s: 98%;
  --color-secondary-lighter-l: 66%;
  --color-black: hsl(0, 0%, 17%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 17%;
  --color-white: hsl(180, 20%, 98%);
  --color-white-h: 180;
  --color-white-s: 20%;
  --color-white-l: 98%;
  --color-warning-darker: hsl(35, 79%, 48%);
  --color-warning-darker-h: 35;
  --color-warning-darker-s: 79%;
  --color-warning-darker-l: 48%;
  --color-warning-dark: hsl(35, 79%, 56%);
  --color-warning-dark-h: 35;
  --color-warning-dark-s: 79%;
  --color-warning-dark-l: 56%;
  --color-warning: hsl(35, 79%, 66%);
  --color-warning-h: 35;
  --color-warning-s: 79%;
  --color-warning-l: 66%;
  --color-warning-light: hsl(35, 79%, 74%);
  --color-warning-light-h: 35;
  --color-warning-light-s: 79%;
  --color-warning-light-l: 74%;
  --color-warning-lighter: hsl(35, 79%, 82%);
  --color-warning-lighter-h: 35;
  --color-warning-lighter-s: 79%;
  --color-warning-lighter-l: 82%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(342, 89%, 38%);
  --color-error-darker-h: 342;
  --color-error-darker-s: 89%;
  --color-error-darker-l: 38%;
  --color-error-dark: hsl(342, 89%, 43%);
  --color-error-dark-h: 342;
  --color-error-dark-s: 89%;
  --color-error-dark-l: 43%;
  --color-error: hsl(342, 89%, 48%);
  --color-error-h: 342;
  --color-error-s: 89%;
  --color-error-l: 48%;
  --color-error-light: hsl(342, 89%, 56%);
  --color-error-light-h: 342;
  --color-error-light-s: 89%;
  --color-error-light-l: 56%;
  --color-error-lighter: hsl(342, 89%, 62%);
  --color-error-lighter-h: 342;
  --color-error-lighter-s: 89%;
  --color-error-lighter-l: 62%;
  --color-bg-darker: hsl(215, 48%, 28%);
  --color-bg-darker-h: 215;
  --color-bg-darker-s: 48%;
  --color-bg-darker-l: 28%;
  --color-bg-dark: hsl(214, 55%, 31%);
  --color-bg-dark-h: 214;
  --color-bg-dark-s: 55%;
  --color-bg-dark-l: 31%;
  --color-bg: hsl(210, 76%, 37%);
  --color-bg-h: 210;
  --color-bg-s: 76%;
  --color-bg-l: 37%;
  --color-bg-light: hsl(214, 55%, 43%);
  --color-bg-light-h: 214;
  --color-bg-light-s: 55%;
  --color-bg-light-l: 43%;
  --color-bg-lighter: hsl(215, 48%, 46%);
  --color-bg-lighter-h: 215;
  --color-bg-lighter-s: 48%;
  --color-bg-lighter-l: 46%;
  --color-contrast-lower: hsl(217, 41%, 50%);
  --color-contrast-lower-h: 217;
  --color-contrast-lower-s: 41%;
  --color-contrast-lower-l: 50%;
  --color-contrast-low: hsl(221, 38%, 62%);
  --color-contrast-low-h: 221;
  --color-contrast-low-s: 38%;
  --color-contrast-low-l: 62%;
  --color-contrast-medium: hsl(224, 35%, 72%);
  --color-contrast-medium-h: 224;
  --color-contrast-medium-s: 35%;
  --color-contrast-medium-l: 72%;
  --color-contrast-high: hsl(229, 26%, 87%);
  --color-contrast-high-h: 229;
  --color-contrast-high-s: 26%;
  --color-contrast-high-l: 87%;
  --color-contrast-higher: hsl(15, 25%, 97%);
  --color-contrast-higher-h: 15;
  --color-contrast-higher-s: 25%;
  --color-contrast-higher-l: 97%;
}

@media (min-width: 64rem) {
  :root, * {
    --space-xxxxs: calc(0.1875 * var(--space-unit));
    --space-xxxs: calc(0.375 * var(--space-unit));
    --space-xxs: calc(0.5625 * var(--space-unit));
    --space-xs: calc(0.75 * var(--space-unit));
    --space-sm: calc(1.125 * var(--space-unit));
    --space-md: calc(2 * var(--space-unit));
    --space-lg: calc(3.125 * var(--space-unit));
    --space-xl: calc(5.125 * var(--space-unit));
    --space-xxl: calc(8.25 * var(--space-unit));
    --space-xxxl: calc(13.25 * var(--space-unit));
    --space-xxxxl: calc(21.5 * var(--space-unit));
  }
}
:root {
  --radius: 0.375em;
}

.chapo {
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 3.25rem;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0px 1px 2px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.25);
}
@media (min-width: 64rem) {
  .chapo {
    font-size: 9.875rem;
  }
}

@font-face {
  font-family: "american_typewriterregular";
  src: url("../fonts/american_typewriter_regular-webfont.woff2") format("woff2"), url("../fonts/american_typewriter_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --font-primary: "Sofia Sans", sans-serif;
  --font-secondary: "american_typewriterregular", serif;
  --text-base-size: 1rem;
  --text-scale-ratio: 1.2;
  --body-line-height: 1.4;
  --heading-line-height: 1.2;
  --font-primary-capital-letter: 1;
  --text-unit: var(--text-base-size);
}

:root, * {
  --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}

@media (min-width: 64rem) {
  :root {
    --text-base-size: 1.125rem;
    --text-scale-ratio: 1.26;
  }
}
body {
  font-family: var(--font-secondary);
}

h1, h2, h3, h4 {
  font-family: var(--font-primary);
  text-transform: uppercase;
  --heading-font-weight: 500;
}

.font-primary {
  font-family: var(--font-primary);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.link {
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor 50%, hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.2s;
}
.link:hover {
  background-position: 0% 100%;
}

mark {
  background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
  color: inherit;
}

.text-component {
  --line-height-multiplier: 1;
  --text-space-y-multiplier: 1;
}
.text-component > * {
  --text-unit: 1em;
  --space-unit: 1em;
}
.text-component hr {
  background: var(--color-contrast-lower);
  height: 1px;
}
.text-component figcaption {
  font-size: var(--text-sm);
  color: var(--color-contrast-low);
}

.article {
  --body-line-height: 1.58;
  --text-space-y-multiplier: 1.2;
}

:root {
  --btn-font-size: 1em;
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xxs);
  --btn-radius: var(--radius-md);
}

.btn {
  background: var(--color-bg-dark);
  color: var(--color-contrast-higher);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s ease;
  will-change: transform;
}
.btn:focus {
  box-shadow: 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);
  outline: none;
}
.btn:active {
  transform: translateY(2px);
}

 .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

:root {
  --form-control-font-size: 1em;
  --form-control-padding-x: var(--space-xs);
  --form-control-padding-y: var(--space-xxs);
  --form-control-radius: var(--radius-md);
}
.logo-wrapper {
  position: fixed;
  z-index: var(--z-index-fixed-element, 10);
  top: 0;
  width: 25%;
  text-align: center;
  height: 96px;
  overflow: hidden;
  transition: all 1s cubic-bezier(0.17, 0.97, 0.38, 1);
}
@media (min-width: 64rem) {
  .logo-wrapper {
    height: 225px;
    top: var(--space-md);
  }
}
@media (min-width: 80rem) {
  .logo-wrapper {
    left: calc(var(--space-md) * -1);
  }
}
.logo-wrapper.scrolled {
  transform: translateY(-150px) rotate(-12deg);
}

.clipping-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: -webkit-clip-path 1s;
  transition: clip-path 1s;
  transition: clip-path 1s, -webkit-clip-path 1s;
}

.scrolled .clipping-mask {
  -webkit-clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0% 100%);
  clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0% 100%);
}

/* -------------------------------- 

File#: _1_3d-text-block
Title: 3D Text Block
Descr: A text block that rotates on hover
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --td-text-block-padding-x: var(--space-xxs);
  --td-text-block-padding-y: var(--space-xxs);
  --td-text-block-transition-duration: .5s;
}

.td-text-block {
  position: relative;
  z-index: 1;
  display: inline-flex;
  line-height: 1;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  perspective: 1000px;
}
.td-text-block:focus {
  outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  outline-offset: 2px;
}

.td-text-block__wrapper {
  pointer-events: none;
  display: inline-block;
  width: 100%;
  transform-origin: 50% 50% calc(-0.5em - var(--td-text-block-padding-y));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--td-text-block-transition-duration) var(--ease-in-out);
}
.td-text-block:hover .td-text-block__wrapper {
  transform: rotateX(90deg);
}

.td-text-block__front-text,
.td-text-block__final-text {
  display: inline-flex;
  white-space: nowrap;
  width: 100%;
  padding: var(--td-text-block-padding-y) var(--td-text-block-padding-x);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.td-text-block__front-text {
  position: relative;
  z-index: 2;
  color: var(--color-bg);
  background-color: var(--color-contrast-higher);
}

.td-text-block__final-text {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  color: var(--color-white);
  background-color: var(--color-primary);
  transform-origin: center top;
  transform: rotateX(-90deg);
}

.td-text-block--split-2 .td-text-block__wrapper:nth-child(1) .td-text-block__front-text,
.td-text-block--split-2 .td-text-block__wrapper:nth-child(1) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 50% 0% 0%);
          clip-path: inset(0% 50% 0% 0%);
}
.td-text-block--split-2 .td-text-block__wrapper:nth-child(2) {
  position: absolute;
  left: 0;
  transition-delay: 0.1s;
}
.td-text-block--split-2 .td-text-block__wrapper:nth-child(2) .td-text-block__front-text,
.td-text-block--split-2 .td-text-block__wrapper:nth-child(2) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 0% 0% 50%);
          clip-path: inset(0% 0% 0% 50%);
}

.td-text-block--split-3 .td-text-block__wrapper:nth-child(1) .td-text-block__front-text,
.td-text-block--split-3 .td-text-block__wrapper:nth-child(1) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 66.6666666667% 0% 0%);
          clip-path: inset(0% 66.6666666667% 0% 0%);
}
.td-text-block--split-3 .td-text-block__wrapper:nth-child(2),
.td-text-block--split-3 .td-text-block__wrapper:nth-child(3) {
  position: absolute;
  left: 0;
}
.td-text-block--split-3 .td-text-block__wrapper:nth-child(2) {
  transition-delay: 0.1s;
}
.td-text-block--split-3 .td-text-block__wrapper:nth-child(2) .td-text-block__front-text,
.td-text-block--split-3 .td-text-block__wrapper:nth-child(2) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 33.3333333333% 0% 33.3333333333%);
          clip-path: inset(0% 33.3333333333% 0% 33.3333333333%);
}
.td-text-block--split-3 .td-text-block__wrapper:nth-child(3) {
  transition-delay: 0.2s;
}
.td-text-block--split-3 .td-text-block__wrapper:nth-child(3) .td-text-block__front-text,
.td-text-block--split-3 .td-text-block__wrapper:nth-child(3) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 0% 0% 66.6666666667%);
          clip-path: inset(0% 0% 0% 66.6666666667%);
}

.td-text-block--split-4 .td-text-block__wrapper:nth-child(1) .td-text-block__front-text,
.td-text-block--split-4 .td-text-block__wrapper:nth-child(1) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 75% 0% 0%);
          clip-path: inset(0% 75% 0% 0%);
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(2),
.td-text-block--split-4 .td-text-block__wrapper:nth-child(3),
.td-text-block--split-4 .td-text-block__wrapper:nth-child(4) {
  position: absolute;
  left: 0;
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(2) {
  transition-delay: 0.1s;
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(2) .td-text-block__front-text,
.td-text-block--split-4 .td-text-block__wrapper:nth-child(2) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 50% 0% 25%);
          clip-path: inset(0% 50% 0% 25%);
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(3) {
  transition-delay: 0.2s;
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(3) .td-text-block__front-text,
.td-text-block--split-4 .td-text-block__wrapper:nth-child(3) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 25% 0% 50%);
          clip-path: inset(0% 25% 0% 50%);
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(4) {
  transition-delay: 0.3s;
}
.td-text-block--split-4 .td-text-block__wrapper:nth-child(4) .td-text-block__front-text,
.td-text-block--split-4 .td-text-block__wrapper:nth-child(4) .td-text-block__final-text {
  -webkit-clip-path: inset(0% 0% 0% 75%);
          clip-path: inset(0% 0% 0% 75%);
}

/* -------------------------------- 

File#: _1_anim-menu-btn
Title: Animated Menu Button
Descr: A menu button w/ a morphing icon
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --anim-menu-btn-size: 48px;
  --anim-menu-btn-transition-duration: .2s;
  --anim-menu-btn-icon-size: 32px;
  --anim-menu-btn-icon-stroke: 2px;
}

.anim-menu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--anim-menu-btn-size);
  height: var(--anim-menu-btn-size);
}

.anim-menu-btn__icon {
  position: relative;
  display: block;
  font-size: var(--anim-menu-btn-icon-size);
  width: 1em;
  height: var(--anim-menu-btn-icon-stroke);
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  transform: scale(1);
}
.anim-menu-btn__icon::before, .anim-menu-btn__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  border-radius: inherit;
}

.anim-menu-btn__icon--close {
  background-size: 100% 100%;
  will-change: transform, background-size;
  transition-property: transform, background-size;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn:active .anim-menu-btn__icon--close {
  transform: scale(0.9);
}
.anim-menu-btn__icon--close::before, .anim-menu-btn__icon--close::after {
  will-change: inherit;
  transition: inherit;
}
.anim-menu-btn__icon--close::before {
  transform: translateY(-0.25em) rotate(0);
}
.anim-menu-btn__icon--close::after {
  transform: translateY(0.25em) rotate(0);
}

.anim-menu-btn--state-b .anim-menu-btn__icon--close {
  background-size: 0% 100%;
}
.anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
  transform: translateY(0) rotate(45deg);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
  transform: translateY(0) rotate(-45deg);
}

.anim-menu-btn__icon--arrow-left,
.anim-menu-btn__icon--arrow-right,
.anim-menu-btn__icon--arrow-up,
.anim-menu-btn__icon--arrow-down {
  border-radius: 50em;
  will-change: transform;
  transition-property: transform;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn:active .anim-menu-btn__icon--arrow-left,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-up,
.anim-menu-btn:active .anim-menu-btn__icon--arrow-down {
  transform: scale(0.9);
}
.anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn__icon--arrow-down::after {
  transform-origin: calc(var(--anim-menu-btn-icon-stroke) / 2) 50%;
  will-change: transform, width;
  transition-property: transform, width;
  transition-duration: var(--anim-menu-btn-transition-duration, 0.2s);
}
.anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn__icon--arrow-down::before {
  transform: translateY(-0.25em) rotate(0);
}
.anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0.25em) rotate(0);
}

.anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg);
}
.anim-menu-btn:active .anim-menu-btn__icon--arrow-right {
  transform: rotate(180deg) scale(0.9);
}

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
  width: 50%;
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before {
  transform: translateY(0) rotate(-45deg);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after,
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after {
  transform: translateY(0) rotate(45deg);
}
.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg) scale(0.9);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up {
  transform: rotate(90deg);
}
.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg) scale(0.9);
}
.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down {
  transform: rotate(-90deg);
}

/* -------------------------------- 

File#: _1_article-preview-v3
Title: Article Preview v3
Descr: Blog post excerpt, containing a link to the article page and a preview image animated on hover
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --story-v3-image-width: 30%;
}

.story-v3 {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--color-contrast-lower);
  box-shadow: 0 1px 0 var(--color-contrast-lower);
  transition: 0.3s;
}
.story-v3:hover .story-v3__title {
  text-decoration: underline;
}
.story-v3:hover .story-v3__icon line:nth-child(1) {
  transform: rotate(180deg);
}
.story-v3:hover .story-v3__icon line:nth-child(2) {
  transform: rotate(-180deg);
}
.story-v3:hover .story-v3__icon line:nth-child(3) {
  stroke-dashoffset: 14;
}

.story-v3__icon {
  font-size: 48px;
}
.story-v3__icon line:nth-child(1),
.story-v3__icon line:nth-child(2) {
  transition: transform 0.3s var(--ease-out);
}
.story-v3__icon line:nth-child(1) {
  transform-origin: 42px 19px;
}
.story-v3__icon line:nth-child(2) {
  transform-origin: 42px 29px;
}
.story-v3__icon line:nth-child(3) {
  stroke-dasharray: 48;
  transition: stroke-dashoffset 0.3s var(--ease-out);
}

.story-v3__preview-img {
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  will-change: transform;
}

.story-v3__preview-img--is-visible {
  transform: translateY(-50%);
  opacity: 1;
  visibility: visible;
}

/* -------------------------------- 

File#: _1_article-preview
Title: Article Preview
Descr: Blog post excerpt, containing a link to the article page
Usage: codyhouse.co/license

-------------------------------- */
.story__img {
  display: block;
  transition: opacity 0.2s;
  overflow: hidden;
  margin-bottom: var(--space-xs);
}
.story__img:hover {
  opacity: 0.85;
}
.story__img img {
  display: block;
  width: 100%;
  filter: grayscale(1);
}

.story__category {
  display: inline-flex;
  align-items: center;
  color: var(--color-contrast-higher);
  line-height: 1;
  text-decoration: none;
  font-size: var(--text-sm);
  background-color: var(--color-secondary);
  padding: var(--space-xxs);
  border-radius: var(--radius-md);
  transition: background-color 0.2s;
}
.story__category:hover {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-white);
  background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.5);
}

.story__title {
  font-size: var(--text-md);
}
.story__title a {
  color: var(--color-black);
  text-decoration: none;
  font-size: var(--text-md);
}
.story__title a:hover {
  text-decoration: underline;
}

.story__author {
  --author-img-size: 50px;
  display: grid;
  grid-template-columns: var(--author-img-size) 1fr;
  align-items: center;
  gap: var(--space-xs);
}
.story__author img {
  display: block;
  width: var(--author-img-size);
  height: var(--author-img-size);
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.story__author-name {
  margin-bottom: var(--space-xxxxs);
}
.story__author-name a {
  text-decoration: none;
  color: var(--color-black);
}
.story__author-name a:hover {
  text-decoration: underline;
}

.story__meta {
  font-size: var(--text-sm);
  color: var(--color-contrast-medium);
}

@media (min-width: 64rem) {
  .story--featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: var(--space-md);
    align-items: center;
  }
  .story--featured .story__img {
    margin: 0;
  }
  .story--featured .story__title {
    font-size: var(--text-md);
    color: red;
  }
}
/* -------------------------------- 

File#: _1_author
Title: Author
Descr: Author introduction card
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --author-img-size: 4em;
}

.author {
  display: grid;
  grid-template-columns: var(--author-img-size) 1fr;
  grid-gap: var(--space-sm);
}

.author__img-wrapper {
  display: inline-block;
  border-radius: 50%;
  width: var(--author-img-size);
  height: var(--author-img-size);
  overflow: hidden;
  transition: transform 0.3s var(--ease-out-back);
}
.author__img-wrapper:hover {
  transform: scale(1.1);
}
.author__img-wrapper img {
  display: block;
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}

.author__content a {
  color: inherit;
}
.author__content a:hover {
  color: var(--color-primary);
}

.author--meta {
  --author-img-size: 3em;
  align-items: center;
  grid-gap: var(--space-xs);
}

.author--minimal {
  --author-img-size: 2.4em;
  align-items: center;
  grid-gap: var(--space-xxs);
}

.author--featured {
  --author-img-size: 6em;
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
}
.author--featured .author__img-wrapper {
  margin-left: auto;
  margin-right: auto;
}

.author__social {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  display: flex;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  border-radius: 50%;
  transition: 0.2s;
}
.author__social .icon {
  --size: 16px;
  display: block;
  margin: auto;
  color: var(--color-contrast-higher);
  transition: color 0.2s;
}
.author__social:hover {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
}
.author__social:hover .icon {
  color: var(--color-primary);
}

/* -------------------------------- 

File#: _1_card-v9
Title: Card v9
Descr: Container of information used as teaser for further content exploration
Usage: codyhouse.co/license

-------------------------------- */
.card-v9 {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-contrast-lower);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
}
.card-v9:hover {
  box-shadow: var(--shadow-md);
}

.card-v9__content {
  display: flex;
  height: 100%;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.card-v9__btn {
  position: relative;
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.card-v9__btn i {
  position: relative;
  z-index: 2;
  color: var(--color-bg);
  opacity: 0;
  transition: opacity 0.3s;
}
.card-v9__btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8);
  opacity: 0;
  transform: translateY(25%);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}

.card-v9:hover .card-v9__btn i {
  opacity: 1;
}
.card-v9:hover .card-v9__btn::after {
  opacity: 1;
  transform: translateY(0);
}

.card-v9--overlay-bg::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.5);
  transition: background-color 0.3s;
}
.card-v9--overlay-bg:hover::before {
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.8);
}

/* -------------------------------- 

File#: _1_drop-cap
Title: Drop Cap
Descr: Make the first letter of a paragraph larger in size
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --drop-cap-lines: 3;
}

.drop-cap::first-letter {
  float: left;
  line-height: 1;
  font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height));
  padding: 0 0.125em 0 0;
  text-transform: uppercase;
  color: var(--color-accent-lighter);
}

.text-component .drop-cap::first-letter {
  font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height) * var(--line-height-multiplier));
}

/* -------------------------------- 

File#: _1_feature-v9
Title: Feature v9
Descr: A feature section with 2 blocks
Usage: codyhouse.co/license

-------------------------------- */
.feature-v9:hover .feature-v9__block:not(:hover) .feature-v9__content {
  opacity: 0.5;
}
.feature-v9:hover .feature-v9__block:not(:hover)::after {
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.8);
  -webkit-backdrop-filter: grayscale(100%);
          backdrop-filter: grayscale(100%);
}

.feature-v9__block {
  position: relative;
  display: flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: var(--space-xl) var(--space-md);
  min-height: 350px;
}
.feature-v9__block::before, .feature-v9__block::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
}
.feature-v9__block::before {
  height: 70%;
  background: linear-gradient(hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0), hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.8));
  mix-blend-mode: multiply;
}
.feature-v9__block::after {
  height: 100%;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
}
.feature-v9__block:hover .feature-v9__content {
  transform: translateY(-10px);
}
@media (min-width: 48rem) {
  .feature-v9__block {
    min-height: 450px;
  }
}
@media (min-width: 64rem) {
  .feature-v9__block {
    min-height: 600px;
  }
}
@media (min-width: 80rem) {
  .feature-v9__block {
    min-height: 700px;
  }
}

.feature-v9__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: auto auto 0;
  transition: 0.2s;
}

.feature-v9__link {
  color: var(--color-black);
  text-decoration: none;
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.8);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: background-color 0.2s;
}
.feature-v9__link:hover {
  background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 1);
}

/* -------------------------------- 

File#: _2_flexi-header
Title: Flexi Header
Descr: Customizable header template
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --f-header-height: 50px;
  --f-header-logo-width: 104px;
}
@media (min-width: 64rem) {
  :root {
    --f-header-height: 70px;
  }
}

.f-header {
  height: var(--f-header-height);
  width: 100%;
  z-index: var(--z-index-header, 3);
}
.f-header::before { /* used in JS to detect menu style */
  display: none;
  content: "mobile";
}

.f-header--expanded {
  /* class added when navigation is visible - small devices only */
}

.f-header__mobile-content { /* logo + menu button on small devices */
  position: relative;
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.f-header__logo {
  display: block;
  width: var(--f-header-logo-width);
  flex-shrink: 0;
  text-decoration: none;
}
.f-header__logo svg, .f-header__logo img {
  display: block;
}

.f-header__nav-control { /* menu button */
  --anim-menu-btn-size: 40px;
  /* 🍔 icon */
  --anim-menu-btn-icon-size: 28px;
  --anim-menu-btn-icon-stroke: 2px;
}

.f-header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: calc(100vh - var(--f-header-offset, 0px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 var(--space-md);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1em);
}
.f-header__nav::before { /* top header bg + border */
  content: "";
  display: block;
  position: sticky;
  top: 0;
  height: var(--f-header-height);
  background-color: inherit;
  border-bottom: 1px solid var(--color-contrast-lower);
}

.f-header__nav--is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: visibility 0s, opacity 0.3s, transform 0.3s;
}

.f-header__nav-logo-wrapper {
  display: none; /* hide logo nav on small devices */
}

.f-header__item {
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-contrast-lower);
}

.f-header__dropdown-icon {
  --size: 16px;
  flex-shrink: 0;
  margin: 0 10px 0 auto;
  display: none; /* hide on mobile if link */
}
.f-header__dropdown-control .f-header__dropdown-icon {
  display: block;
}

.f-header__link,
.f-header__dropdown-control,
.f-header__dropdown-link,
.f-header__btn,
.f-header__form-control {
  font-size: var(--text-md);
}

.f-header__link,
.f-header__dropdown-control,
.f-header__dropdown-link {
  display: flex;
  align-items: center;
  color: var(--color-contrast-high);
  text-decoration: none;
  padding: var(--space-xs) 0;
}
.f-header__link:hover, .f-header__link[aria-current=page],
.f-header__dropdown-control:hover,
.f-header__dropdown-control[aria-current=page],
.f-header__dropdown-link:hover,
.f-header__dropdown-link[aria-current=page] {
  color: var(--color-primary);
}

.f-header__btn,
.f-header__form-control {
  width: 100%;
  margin: var(--space-xs) 0;
}

.f-header__dropdown-control {
  width: 100%;
}

.f-header__dropdown { /* sub navigation */
  padding-left: var(--space-md); /* offset sub nav */
}

.f-header__dropdown-control + .f-header__dropdown {
  display: none;
}
.f-header__dropdown-control[aria-expanded=true] + .f-header__dropdown {
  display: block;
}

@media (min-width: 64rem) {
  .f-header::before {
    content: "desktop";
  }
  .f-header__mobile-content {
    display: none; /* hide logo + menu (mobile content) */
  }
  .f-header__nav {
    /* reset */
    position: static;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: none;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    height: var(--f-header-height);
  }
  .f-header__nav::before { /* reset */
    display: none;
  }
  .f-header__nav-logo-wrapper {
    display: flex;
  }
  .f-header__nav-grid,
  .f-header__list {
    display: flex;
    align-items: center;
  }
  .f-header__nav-grid {
    height: 100%;
  }
  .f-header__item {
    position: relative;
    border-bottom: none;
    margin-right: var(--space-xs); /* margin between nav items */
  }
  .f-header__item:last-child {
    margin-right: 0;
  }
  .f-header__dropdown-icon {
    --size: 12px;
    display: block;
    margin: 0 0 0 var(--space-xxxxs);
  }
  .f-header__link,
  .f-header__dropdown-control,
  .f-header__dropdown-link,
  .f-header__btn,
  .f-header__form-control {
    font-size: 1.125rem;
  }
  .f-header__link {
    padding: var(--space-xxxs) var(--space-xxs);
  }
  .f-header__link--icon span {
    display: none; /* hide icon label */
  }
  .f-header__btn,
  .f-header__form-control {
    margin: 0; /* reset */
  }
  .f-header__dropdown {
    position: absolute;
    top: 100%;
    width: 220px;
    left: calc(50% - 110px);
    padding: var(--space-xxxs) 0;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-md);
    z-index: var(--z-index-popover, 5);
    /* hide */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s 0.2s, opacity 0.2s 0s;
  }
  .f-header__dropdown-control + .f-header__dropdown {
    display: block; /* reset style */
  }
  .f-header__item:hover .f-header__dropdown, .f-header__dropdown-control[aria-expanded=true] + .f-header__dropdown {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: visibility 0.2s 0s, opacity 0.2s 0s;
  }
  .f-header__dropdown-link {
    color: var(--color-contrast-high);
    padding: var(--space-xs) var(--space-sm);
    transition: 0.2s;
  }
  .f-header__dropdown-link:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
    color: var(--color-contrast-higher);
  }
}
/* --------------------------------

File#: _1_sub-navigation
Title: Sub Navigation
Descr: Secondary navigation template
Usage: codyhouse.co/license

-------------------------------- */
.subnav__nav {
  position: relative;
  display: flex;
}
.subnav__nav::after {
  content: "";
  width: 1em;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to right, hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 0), hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), 1));
  pointer-events: none;
}

.subnav__list {
  display: flex;
  overflow: auto;
}

.subnav__item {
  display: inline-block;
  flex-shrink: 0;
}

.subnav__link {
  display: block;
  font-size: var(--text-sm);
  padding: 1.5625em;
  text-decoration: none;
  color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.65);
  border: 3px solid transparent;
  border-right-width: 0;
  border-left-width: 0;
  transition: 0.2s;
}
.subnav__link:hover {
  color: var(--color-contrast-high);
}
.subnav__link[aria-current=page] {
  border-bottom-color: var(--color-primary);
  color: var(--color-contrast-high);
}

.subnav:not(.subnav--collapsed) .subnav__control, .subnav:not(.subnav--collapsed) .subnav__close-btn {
  display: none;
}

.subnav--collapsed {
  display: inline-block;
}
.subnav--collapsed .subnav__wrapper {
  position: fixed;
  display: block;
  z-index: var(--z-index-overlay, 15);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
  visibility: hidden;
  opacity: 0;
}
.subnav--collapsed .subnav__wrapper--is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}
.subnav--collapsed .subnav__wrapper--is-visible .subnav__nav {
  transform: translateY(0);
  transition: transform 0.3s;
}
.subnav--collapsed .subnav__nav {
  display: block;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);
  max-height: 100%;
  overflow: auto;
  transform: translateY(-1em);
}
.subnav--collapsed .subnav__nav::after {
  display: none;
}
.subnav--collapsed .subnav__list {
  flex-direction: column;
  overflow: visible;
  padding: 0 var(--space-md) var(--space-md);
}
.subnav--collapsed .subnav__link {
  border-width: 0;
  font-size: var(--text-md);
  padding: var(--space-xs) 0;
}
.subnav--collapsed .subnav__link[aria-current=page] {
  color: var(--color-primary);
}

.subnav__close-btn {
  --size: 2em;
  width: var(--size);
  height: var(--size);
  display: flex;
  margin: var(--space-xs) var(--space-xs) 0 auto;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: 0.2s;
}
.subnav__close-btn:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}
.subnav__close-btn .icon {
  display: block;
  color: var(--color-contrast-high);
}

[class*=subnav--expanded]::before {
  display: none;
  content: "collapsed";
}

@media (min-width: 32rem) {
  .subnav--expanded\@xs::before {
    content: "expanded";
  }
}
@media (min-width: 48rem) {
  .subnav--expanded\@sm::before {
    content: "expanded";
  }
}
@media (min-width: 64rem) {
  .subnav--expanded\@md::before {
    content: "expanded";
  }
}
@media (min-width: 80rem) {
  .subnav--expanded\@lg::before {
    content: "expanded";
  }
}
@media (min-width: 90rem) {
  .subnav--expanded\@xl::before {
    content: "expanded";
  }
}
/* -------------------------------- 

File#: _1_hiding-nav
Title: Auto Hiding Navigation
Descr: A Navigation container that auto-hides when the user scrolls down, and is revealed when they scrolls back up
Usage: codyhouse.co/license

-------------------------------- */
.hide-nav {
  --hide-nav-transition-duration: 0.3s;
  position: sticky !important;
  top: 0;
  will-change: transform;
  transition: transform var(--hide-nav-transition-duration), background-color var(--hide-nav-transition-duration);
}

.hide-nav--fixed {
  background-color: transparent;
}

.hide-nav--has-bg {
  background-color: var(--color-bg);
}

/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
.modal {
  position: fixed;
  z-index: var(--z-index-overlay, 15);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.modal:not(.modal--is-visible) {
  pointer-events: none;
  background-color: transparent;
}

.modal--is-visible {
  opacity: 1;
  visibility: visible;
}

/* close buttons */
.modal__close-btn {
  display: flex;
  flex-shrink: 0;
  border-radius: 50%;
  transition: 0.2s;
}
.modal__close-btn .icon {
  display: block;
  margin: auto;
}

.modal__close-btn--outer { /* close button - outside the modal__content */
  --size: 48px;
  width: var(--size);
  height: var(--size);
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: var(--z-index-fixed-element, 10);
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
  transition: 0.2s;
}
.modal__close-btn--outer .icon {
  color: var(--color-white); /* icon color */
  transition: transform 0.3s var(--ease-out-back);
}
.modal__close-btn--outer:hover {
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1);
}
.modal__close-btn--outer:hover .icon {
  transform: scale(1.1);
}

.modal__close-btn--inner { /* close button - inside the modal__content */
  --size: 32px;
  width: var(--size);
  height: var(--size);
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  transition: 0.2s;
}
.modal__close-btn--inner .icon {
  color: inherit; /* icon color */
}
.modal__close-btn--inner:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-md);
}

/* animations */
:root {
  --modal-transition-duration: 0.2s; /* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
  .modal--animate-fade {
    --modal-transition-duration: 0.2s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-fade.modal--is-visible {
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale,
  .modal--animate-translate-up,
  .modal--animate-translate-down,
  .modal--animate-translate-right,
  .modal--animate-translate-left {
    --modal-transition-duration: 0.2s;
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-scale .modal__content,
  .modal--animate-translate-up .modal__content,
  .modal--animate-translate-down .modal__content,
  .modal--animate-translate-right .modal__content,
  .modal--animate-translate-left .modal__content {
    will-change: transform;
    transition: transform var(--modal-transition-duration) var(--ease-out);
  }
  .modal--animate-scale.modal--is-visible,
  .modal--animate-translate-up.modal--is-visible,
  .modal--animate-translate-down.modal--is-visible,
  .modal--animate-translate-right.modal--is-visible,
  .modal--animate-translate-left.modal--is-visible {
    transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-scale.modal--is-visible .modal__content,
  .modal--animate-translate-up.modal--is-visible .modal__content,
  .modal--animate-translate-down.modal--is-visible .modal__content,
  .modal--animate-translate-right.modal--is-visible .modal__content,
  .modal--animate-translate-left.modal--is-visible .modal__content {
    transform: scale(1); /* reset all transformations */
  }
  .modal--animate-slide-up,
  .modal--animate-slide-down,
  .modal--animate-slide-right,
  .modal--animate-slide-left {
    --modal-transition-duration: 0.3s;
    transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration);
  }
  .modal--animate-slide-up .modal__content,
  .modal--animate-slide-down .modal__content,
  .modal--animate-slide-right .modal__content,
  .modal--animate-slide-left .modal__content {
    will-change: transform;
    transition: transform var(--modal-transition-duration) var(--ease-out);
  }
  .modal--animate-slide-up.modal--is-visible,
  .modal--animate-slide-down.modal--is-visible,
  .modal--animate-slide-right.modal--is-visible,
  .modal--animate-slide-left.modal--is-visible {
    transition: background-color var(--modal-transition-duration), visibility 0s;
  }
  .modal--animate-slide-up.modal--is-visible .modal__content,
  .modal--animate-slide-down.modal--is-visible .modal__content,
  .modal--animate-slide-right.modal--is-visible .modal__content,
  .modal--animate-slide-left.modal--is-visible .modal__content {
    transform: scale(1); /* reset all transformations */
  }
  /* scale */
  .modal--animate-scale .modal__content {
    transform: scale(0.95);
  }
  /* translate */
  .modal--animate-translate-up .modal__content {
    transform: translateY(40px);
  }
  .modal--animate-translate-down .modal__content {
    transform: translateY(-40px);
  }
  .modal--animate-translate-right .modal__content {
    transform: translateX(-40px);
  }
  .modal--animate-translate-left .modal__content {
    transform: translateX(40px);
  }
  /* slide */
  .modal--animate-slide-up .modal__content {
    transform: translateY(100%);
  }
  .modal--animate-slide-down .modal__content {
    transform: translateY(-100%);
  }
  .modal--animate-slide-right .modal__content {
    transform: translateX(-100%);
  }
  .modal--animate-slide-left .modal__content {
    transform: translateX(100%);
  }
}
/* load content - optional */
.modal--is-loading .modal__content {
  visibility: hidden;
}
.modal--is-loading .modal__loader {
  display: flex;
}

.modal__loader { /* loader icon */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
  pointer-events: none;
}

/* --image */
.modal-img-btn {
  position: relative;
  cursor: pointer;
}
.modal-img-btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
  transition: background 0.2s;
}
.modal-img-btn:hover::after {
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
}
.modal-img-btn:hover .modal-img-btn__icon-wrapper {
  opacity: 1;
}

.modal-img-btn__icon-wrapper {
  position: absolute;
  z-index: 2;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-img-btn__icon-wrapper .icon {
  color: var(--color-white);
}

/* -------------------------------- 

File#: _2_floating-navigation
Title: Floating Navigation
Descr: A header that auto-hides and controls an expanded modal navigation
Usage: codyhouse.co/license

-------------------------------- */
/* #region (Header) */
.float-nav-header {
  background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), 0.98);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: calc(var(--radius-lg) * 1.2);
  padding: var(--space-xs);
  box-shadow: var(--inner-glow), var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow var(--hide-nav-transition-duration, 0.3s);
}
.hide-nav--off-canvas .float-nav-header {
  box-shadow: var(--inner-glow);
}

.float-nav-header__logo {
  display: block;
  color: var(--color-contrast-higher);
  transition: 0.2s;
}
.float-nav-header__logo:hover {
  color: var(--color-primary);
}

.float-nav-header__link {
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8);
  text-decoration: none;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}
.float-nav-header__link:hover {
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
}

.float-nav-header__menu-btn {
  display: inline-flex;
  align-items: center;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-lg);
  transition: 0.2s;
}
.float-nav-header__menu-btn .icon {
  font-size: 13px;
}
.float-nav-header__menu-btn:hover {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  color: var(--color-contrast-higher);
  cursor: pointer;
}
@media (min-width: 64rem) {
  .float-nav-header__menu-btn {
    font-size: var(--text-sm);
  }
}

/* #endregion */
/* #region (Modal Window) */
.float-nav-modal__close-btn {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
  transition: 0.2s;
}
.float-nav-modal__close-btn .icon {
  display: block;
  margin: auto;
  font-size: 20px;
}
.float-nav-modal__close-btn:hover {
  color: var(--color-contrast-higher);
  border-color: currentColor;
}
.float-nav-modal__close-btn:hover .float-nav-modal__close-icon-g > * {
  stroke-dashoffset: 48;
}

.float-nav-modal__close-icon-g > * {
  transform-origin: 50% 50%;
  stroke-dashoffset: 0;
  stroke-dasharray: 24;
  transition: stroke-dashoffset 0.5s var(--ease-in-out);
}
.float-nav-modal__close-icon-g > *:last-child {
  transition-delay: 0.1s;
}

.float-nav-modal__list {
  counter-reset: list-items;
}
.float-nav-modal__list li {
  counter-increment: list-items;
}

.float-nav-modal__link {
  display: inline-flex;
  padding: var(--space-xxxxs) 0;
  color: var(--color-contrast-higher);
  text-decoration: none;
  font-size: var(--text-xl);
  line-height: 1;
  transition: 0.2s;
}
.float-nav-modal__link::before {
  content: "0" counter(list-items) "";
  width: 2em;
  margin-right: var(--space-md);
  color: var(--color-contrast-medium);
  font-size: 0.3em;
  font-variant-numeric: slashed-zero;
  font-feature-settings: "tnum";
  line-height: inherit;
  transition: inherit;
  transform: translateY(0.3em);
  display: none;
}
.float-nav-modal__link:hover {
  color: var(--color-primary);
}
.float-nav-modal__link:hover span {
  color: currentColor;
}
@media (min-width: 32rem) {
  .float-nav-modal__link {
    font-size: var(--text-xl);
  }
}
@media (min-width: 64rem) {
  .float-nav-modal__link {
    font-size: var(--text-xxl);
  }
  .float-nav-modal__link::before {
    display: inline;
  }
}

.float-nav-modal__social-btn {
  color: var(--color-contrast-medium);
  transition: 0.2s;
}
.float-nav-modal__social-btn .icon {
  display: block;
  font-size: 16px;
}
.float-nav-modal__social-btn:hover {
  color: var(--color-contrast-higher);
}

/* #endregion */
/* -------------------------------- 

File#: _1_link-effects
Title: Link Effects
Descr: A collection of link effects
Usage: codyhouse.co/license

-------------------------------- */
.link-fx-1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 6px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.link-fx-1 .icon {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateX(100%) rotate(90deg);
  font-size: 32px;
}
.link-fx-1 .icon circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.2s;
}
.link-fx-1 .icon line {
  transition: transform 0.4s;
  transform-origin: 13px 15px;
}
.link-fx-1 .icon line:last-child {
  transform-origin: 19px 15px;
}
.link-fx-1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform-origin: right center;
  transition: transform 0.2s 0.1s;
}
.link-fx-1:hover .icon circle {
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.2s 0.1s;
}
.link-fx-1:hover .icon line {
  transform: rotate(-180deg);
}
.link-fx-1:hover .icon line:last-child {
  transform: rotate(180deg);
}
.link-fx-1:hover::before {
  transform: translateX(17px) scaleX(0);
  transition: transform 0.2s;
}

.link-fx-2 {
  position: relative;
  display: inline-block;
  padding: 4px 6px;
  color: var(--color-contrast-higher);
  text-decoration: none;
  background-image: linear-gradient(var(--color-contrast-higher), var(--color-contrast-higher));
  background-size: 100% 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  will-change: background-size;
  transition: background-size 0.3s var(--ease-out);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.link-fx-2::after {
  content: attr(data-link-fx-clone);
  color: var(--color-bg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: inherit;
  will-change: clip-path, transform;
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  transform: translateY(4px);
  transition: transform 0.3s, -webkit-clip-path 0.3s;
  transition: clip-path 0.3s, transform 0.3s;
  transition: clip-path 0.3s, transform 0.3s, -webkit-clip-path 0.3s;
  transition-timing-function: var(--ease-out);
}
.link-fx-2:hover {
  background-size: 100% 100%;
}
.link-fx-2:hover::after {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: translateY(0px);
}

.link-fx-3 {
  position: relative;
  display: inline-flex;
  padding: 4px 6px;
  text-decoration: none;
  align-items: center;
}
.link-fx-3 .icon {
  display: block;
  font-size: 12px;
  margin-left: 8px;
  position: relative;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out), visibility 0s 0.3s;
}
.link-fx-3 .icon line {
  transform-origin: 9px 6px;
  will-change: transform;
  transition: transform 0.3s var(--ease-out);
}
.link-fx-3 .icon line:first-child {
  transform: rotate(20deg);
}
.link-fx-3 .icon line:last-child {
  transform: rotate(-20deg);
}
.link-fx-3::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 18px);
  height: 1px;
  background-color: currentColor;
  transition: 0.3s var(--ease-out);
}
.link-fx-3:hover .icon {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.link-fx-3:hover .icon line:first-child, .link-fx-3:hover .icon line:last-child {
  transform: rotate(0);
}
.link-fx-3:hover::before {
  width: 100%;
}

.link-fx-4 {
  position: relative;
  display: inline-block;
  padding: 6px 10px;
  background-color: var(--color-contrast-lower);
  color: var(--color-contrast-higher);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.link-fx-4::before {
  content: attr(data-link-fx-clone);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-contrast-higher);
  color: var(--color-bg);
  will-change: clip-path;
  -webkit-clip-path: polygon(0% 0%, 1px 0%, 1px 100%, 0% 100%);
          clip-path: polygon(0% 0%, 1px 0%, 1px 100%, 0% 100%);
  transition: -webkit-clip-path 0.3s var(--ease-out);
  transition: clip-path 0.3s var(--ease-out);
  transition: clip-path 0.3s var(--ease-out), -webkit-clip-path 0.3s var(--ease-out);
}
.link-fx-4:hover::before {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.link-fx-5 {
  display: inline-block;
  padding: 4px 0;
  text-decoration: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' viewBox='0 0 16 4'%3E%3Cpath d='M0,3.5c4,0,4-3,8-3s4,3,8,3' fill='none' stroke='%232a6df4' opacity='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0px 100%;
  background-size: 0;
}
.link-fx-5:hover {
  background-size: 16px 4px;
  animation: link-fx-5-animation 0.4s linear infinite;
}

@keyframes link-fx-5-animation {
  from {
    background-position: 0px 100%;
  }
  to {
    background-position: 16px 100%;
  }
}
/* -------------------------------- 

File#: _1_list
Title: List
Descr: Custom list component
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --list-space-y: 0.375em;
  --list-offset: 1em;
  --list-line-height-multiplier: 1;
}

.list, .text-component .list {
  padding-left: 0;
  list-style: none;
}
.list ul, .list ol, .text-component .list ul, .text-component .list ol {
  list-style: none;
  margin: 0;
  margin-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  padding-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  padding-left: var(--list-offset);
}
.list li, .text-component .list li {
  padding-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  margin-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier));
}
.list > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
  margin-bottom: 0;
}
.list:not(.list--border) > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list:not(.list--border) > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
  padding-bottom: 0;
}

/* #region (ul + ol) */
.list--ul, .text-component .list--ul,
.list--ol, .text-component .list--ol {
  --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}
.list--ul ul, .list--ul ol, .text-component .list--ul ul, .text-component .list--ul ol,
.list--ol ul,
.list--ol ol, .text-component .list--ol ul, .text-component .list--ol ol {
  padding-left: 0;
}
@supports (--css: variables) {
  .list--ul li, .text-component .list--ul li,
  .list--ol li, .text-component .list--ol li {
    padding-left: var(--list-offset) !important;
  }
}
.list--ul li::before, .text-component .list--ul li::before,
.list--ol li::before, .text-component .list--ol li::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}
@supports (--css: variables) {
  .list--ul li::before, .text-component .list--ul li::before,
  .list--ol li::before, .text-component .list--ol li::before {
    width: var(--list-bullet-size) !important;
    height: var(--list-bullet-size) !important;
    margin-left: calc(var(--list-bullet-size) * -1) !important;
    left: calc(var(--list-bullet-margin-right) * -1) !important;
  }
}

.list--ul, .text-component .list--ul {
  --list-bullet-size: 7px;
  --list-bullet-margin-right: 12px;
}
.list--ul > li, .text-component .list--ul > li {
  padding-left: 19px;
}
.list--ul > li::before, .text-component .list--ul > li::before {
  content: "";
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-accent);
  width: 7px;
  height: 7px;
  margin-left: -7px;
  left: -12px;
}
.list--ul ul li::before, .text-component .list--ul ul li::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.list--ol, .text-component .list--ol {
  --list-bullet-size: 26px;
  --list-bullet-margin-right: 6px;
  --list-bullet-font-size: 14px;
  counter-reset: list-items;
}
.list--ol > li, .text-component .list--ol > li {
  counter-increment: list-items;
  padding-left: 32px;
}
.list--ol ol, .text-component .list--ol ol {
  counter-reset: list-items;
}
.list--ol > li::before, .text-component .list--ol > li::before {
  content: counter(list-items);
  font-size: var(--list-bullet-font-size, 14px);
  background-color: var(--color-accent);
  color: var(--color-white);
  line-height: 1;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  margin-left: -26px;
  left: -6px;
}
.list--ol ol > li::before, .text-component .list--ol ol > li::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--color-contrast-lower);
}

/* #endregion */
/* #region (border) */
.list--border li:not(:last-child), .text-component .list--border li:not(:last-child) {
  border-bottom: 1px solid var(--color-contrast-lower);
}
.list--border ul, .list--border ol, .text-component .list--border ul, .text-component .list--border ol {
  border-top: 1px solid var(--color-contrast-lower);
}

/* #endregion */
/* #region (icons) */
.list--icons, .text-component .list--icons {
  --list-bullet-size: 24px;
  --list-bullet-margin-right: 8px;
  --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}
.list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
  padding-left: 32px;
}
@supports (--css: variables) {
  .list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
    padding-left: var(--list-offset);
  }
}

.list__icon {
  position: relative;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.list__icon:not(.top-0) {
  top: calc((1em * var(--body-line-height) - 24px) / 2);
}
@supports (--css: variables) {
  .list__icon {
    width: var(--list-bullet-size);
    height: var(--list-bullet-size);
    margin-right: var(--list-bullet-margin-right);
  }
  .list__icon:not(.top-0) {
    top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2);
  }
}

/* #endregion */
/* -------------------------------- 

File#: _1_masonry
Title: Masonry
Descr: Gallery with elements laid out in optimal position based on available vertical space
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --masonry-grid-gap: var(--space-sm);
  --masonry-col-auto-size: 280px;
}

.masonry__loader {
  display: none;
}

.masonry__list {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--masonry-grid-gap));
  margin-bottom: calc(-1 * var(--masonry-grid-gap));
}

.masonry__item {
  display: inline-block;
  width: var(--masonry-col-auto-size);
  margin-right: var(--masonry-grid-gap);
  margin-bottom: var(--masonry-grid-gap);
}

.masonry {
  position: relative;
}

.masonry__loader {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.masonry__list {
  opacity: 0;
  transition: opacity 0.4s;
}

.masonry--loaded .masonry__loader {
  display: none;
}
.masonry--loaded .masonry__list {
  opacity: 1;
}

@supports (flex-basis: 0px) {
  .masonry__list {
    flex-direction: column;
  }
  .masonry__item {
    flex-basis: 0px;
  }
}
/* -------------------------------- 

File#: _1_overscroll-section
Title: Overscroll Section
Descr: Section overlapping visible content on scroll
Usage: codyhouse.co/license

-------------------------------- */
.overscroll-section {
  --overscroll-section-opacity: 0;
}

.overscroll-section__sticky-content {
  position: sticky;
  z-index: 1;
}

.overscroll-section__scroll-content {
  position: relative;
  z-index: 2;
  transform: translateZ(0);
}
.overscroll-section__scroll-content::before, .overscroll-section__scroll-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  pointer-events: none;
}
.overscroll-section__scroll-content::before {
  height: 100vh;
  background: var(--color-black);
  opacity: var(--overscroll-section-opacity, 0);
  z-index: 1;
}
.overscroll-section__scroll-content::after {
  height: 80px;
  background: linear-gradient(to top, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025) 0%, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0) 5%), linear-gradient(to top, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025) 0%, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0) 10%), linear-gradient(to top, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025) 0%, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0) 20%), linear-gradient(to top, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025) 0%, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0) 50%), linear-gradient(to top, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025) 0%, hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0) 100%);
}

.overscroll-section--disabled .overscroll-section__sticky-content {
  position: static;
}
.overscroll-section--disabled .overscroll-section__scroll-content::before,
.overscroll-section--disabled .overscroll-section__scroll-content::after {
  display: none;
}

/* -------------------------------- 

File#: _1_pagination
Title: Pagination 
Descr: Component used to navigate through pages of related content
Usage: codyhouse.co/license

-------------------------------- */
.pagination__list > li {
  display: inline-block;
}

.pagination--split .pagination__list {
  width: 100%;
}
.pagination--split .pagination__list > *:first-child {
  margin-right: auto;
}
.pagination--split .pagination__list > *:last-child {
  margin-left: auto;
}

.pagination__item {
  display: inline-block;
  display: inline-flex;
  height: 100%;
  align-items: center;
  padding: var(--space-xs) calc(1.355 * var(--space-xs));
  white-space: nowrap;
  line-height: 1;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-contrast-high);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;
  transition: 0.2s;
}
.pagination__item:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}
.pagination__item:active {
  transform: translateY(2px);
}

.pagination__item--selected {
  background-color: var(--color-contrast-higher);
  color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.pagination__item--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.pagination__jumper .form-control {
  width: 3em;
  margin-right: var(--space-xs);
}
.pagination__jumper em {
  flex-shrink: 0;
  white-space: nowrap;
}

/* -------------------------------- 

File#: _1_reading-progressbar
Title: Reading Progress Bar
Descr: A bar indicator displaying the current reading progress
Usage: codyhouse.co/license

-------------------------------- */
.reading-progressbar {
  position: fixed;
  z-index: var(--z-index-fixed-element, 10);
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  color: var(--color-accent-lighter);
  pointer-events: none;
  display: none;
  transition: transform 0.2s;
}

.reading-progressbar--is-out {
  transform: translateY(-100%);
}

.reading-progressbar--is-active {
  display: block;
}

.reading-progressbar::-webkit-progress-bar {
  background-color: transparent;
}

.reading-progressbar::-webkit-progress-value {
  background-color: currentColor;
}

.reading-progressbar::-moz-progress-bar {
  background-color: currentColor;
}

.reading-progressbar__fallback {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: currentColor;
}

/* -------------------------------- 

File#: _1_reveal-effects
Title: Reveal Effects
Descr: A collection of reveal effects targeting specific elements as they enter the viewport
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --reveal-fx-duration: 0.6s;
  --reveal-fx-timing-function: var(--ease-out);
}

.reveal-fx {
  opacity: 0;
  transition: opacity, transform var(--reveal-fx-timing-function);
  transition-duration: var(--reveal-fx-duration);
}
.reveal-fx::before {
  display: none;
  content: "reveal-fx";
}

.reveal-fx--translate, .reveal-fx--translate-up {
  transform: translateY(50px);
}

.reveal-fx--translate-right {
  transform: translateX(-50px);
}

.reveal-fx--translate-left {
  transform: translateX(50px);
}

.reveal-fx--translate-down {
  transform: translateY(-50px);
}

.reveal-fx--scale {
  transform: scale(0.8);
}

.reveal-fx--scale-up {
  transform: translateY(50px) scale(0.8);
}

.reveal-fx--scale-right {
  transform: translateX(-50px) scale(0.8);
}

.reveal-fx--scale-left {
  transform: translateX(50px) scale(0.8);
}

.reveal-fx--scale-down {
  transform: translateY(-50px) scale(0.8);
}

.reveal-fx--rotate, .reveal-fx--rotate-down, .reveal-fx--rotate-right, .reveal-fx--rotate-left, .reveal-fx--rotate-up {
  perspective: 1000px;
}
.reveal-fx--rotate > *, .reveal-fx--rotate-down > *, .reveal-fx--rotate-right > *, .reveal-fx--rotate-left > *, .reveal-fx--rotate-up > * {
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.reveal-fx--rotate > *, .reveal-fx--rotate-down > * {
  transform-origin: top;
  transform: rotateX(-45deg);
}

.reveal-fx--rotate-right > * {
  transform-origin: left center;
  transform: rotateY(45deg);
}

.reveal-fx--rotate-left > * {
  transform-origin: right center;
  transform: rotateY(-45deg);
}

.reveal-fx--rotate-up > * {
  transform-origin: bottom;
  transform: rotateX(45deg);
}

.reveal-fx--text-mask {
  overflow: hidden;
}
.reveal-fx--text-mask > * {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  will-change: transform;
}

[class*=reveal-fx--translate], [class*=reveal-fx--scale] {
  will-change: opacity, transform;
}

.reveal-fx--text-mask > *, [class*=reveal-fx--rotate] > * {
  will-change: transform;
}

.reveal-fx--clip-x > *,
.reveal-fx--clip-y > * {
  transition: opacity, -webkit-clip-path var(--ease-out);
  transition: opacity, clip-path var(--ease-out);
  transition: opacity, clip-path var(--ease-out), -webkit-clip-path var(--ease-out);
  transition-duration: var(--reveal-fx-duration);
}

.reveal-fx--clip-x > * {
  -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
          clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
}

.reveal-fx--clip-y > * {
  -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.reveal-fx--is-visible {
  opacity: 1;
}
.reveal-fx--is-visible[class*=reveal-fx--translate], .reveal-fx--is-visible[class*=reveal-fx--scale], .reveal-fx--is-visible[class*=reveal-fx--rotate] > *, .reveal-fx--is-visible.reveal-fx--text-mask > * {
  transform: translate(0);
}
.reveal-fx--is-visible.reveal-fx--clip-x > *, .reveal-fx--is-visible.reveal-fx--clip-y > * {
  opacity: 1;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* -------------------------------- 

File#: _1_sliding-panels
Title: Sliding Panels
Descr: A group of sections that expand to reveal additional content, or hide to show the navigation
Usage: codyhouse.co/license

-------------------------------- */
.s-panels__nav-control {
  position: fixed;
  z-index: var(--z-index-fixed-element, 10);
  top: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.1);
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  transition: transform 0.3s var(--ease-in-out);
}
.s-panels__nav-control:active {
  transform: translateY(2px);
}
.s-panels__nav-control .icon__group * {
  transition: transform 0.3s var(--ease-in-out), stroke-dashoffset 0.3s var(--ease-in-out);
  stroke-dasharray: 24;
}
.s-panels__nav-control .icon__group *:nth-child(1) {
  transform-origin: 2px 6px;
}
.s-panels__nav-control .icon__group *:nth-child(2) {
  transform-origin: 2px 12px;
}
.s-panels__nav-control .icon__group *:nth-child(3) {
  transform-origin: 2px 18px;
}
@media (orientation: portrait) {
  .s-panels__nav-control.s-panels__nav-control--arrow-down {
    transform: rotate(-180deg);
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
    transform: translateY(2px) rotate(-180deg);
  }
}
@media (orientation: landscape) {
  .s-panels__nav-control.s-panels__nav-control--arrow-down {
    transform: rotate(-90deg);
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
    transform: translateY(2px) rotate(-90deg);
  }
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1),
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
  stroke-dashoffset: 14;
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1) {
  transform: translateY(6px) rotate(-45deg);
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
  transform: translateY(-6px) rotate(45deg);
}
.s-panels__nav-control.s-panels__nav-control--close:active {
  transform: translateY(2px);
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(1) {
  transform: translateX(2.93px) translateY(-1.07px) rotate(45deg);
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(2) {
  stroke-dashoffset: 24;
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(3) {
  transform: translateX(2.93px) translateY(1.07px) rotate(-45deg);
}

.s-panels__projects-list {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.s-panels__project-preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition: transform 0.4s var(--ease-in-out);
}
.s-panels__project-preview .s-panels__project-picto {
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  width: 80px;
  height: 320px;
}
@media (min-width: 80rem) {
  .s-panels__project-preview .s-panels__project-picto {
    transform: translate(-50%, -55%);
    width: 600px;
    height: 150px;
  }
}

@media (orientation: landscape) {
  .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
    transform: translateX(25%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
    transform: translateX(100%);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
    transform: translateX(50%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
    transform: translateX(200%);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
    transform: translateX(75%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
    transform: translateX(300%);
  }
  .s-panels__project-preview--hide {
    transform: translateY(-100%);
  }
}
@media (orientation: portrait) {
  .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
    transform: translateY(25%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
    transform: translateY(100%);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
    transform: translateY(50%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
    transform: translateY(200%);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
    transform: translateY(75%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
    transform: translateY(300%);
  }
  .s-panels__project-preview--hide {
    transform: translateX(-100%);
  }
}
.s-panels__project-preview--selected {
  z-index: 1;
  pointer-events: auto;
}
.s-panels__project-preview--selected .s-panels__project-figure {
  position: relative;
  overflow: visible;
}
.s-panels__project-preview--selected .s-panels__project-img {
  opacity: 1 !important;
  filter: none !important;
}
.s-panels__project-preview--selected .s-panels__project-picto {
  display: none;
}
.s-panels__project-preview--selected .s-panels__project-intro {
  opacity: 0;
}
.s-panels__project-preview--selected .s-panels__project-control {
  pointer-events: none;
}
.s-panels__project-preview--selected .s-panels__text-component::before,
.s-panels__project-preview--selected .s-panels__text-component::after {
  display: none;
}
.s-panels__project-preview--selected .s-panels__project-title-wrapper {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s 0.2s;
}
.s-panels__project-preview--selected .s-panels__project-title {
  transform: translateY(0);
  transition-delay: 0.2s;
}

.webzine-content {
  transform: translateY(-5%);
}
@media (min-width: 64rem) {
  .webzine-content {
    transform: translateY(-10%);
  }
}

@media (orientation: landscape) {
  .s-panels__project-preview--selected .s-panels__project-figure {
    transform: translateX(calc(50% - 50%/4)) scaleX(0.25) !important;
  }
}
@media (orientation: portrait) {
  .s-panels__project-preview--selected .s-panels__project-figure {
    transform: translateY(calc(50% - 50%/4)) scaleY(0.25) !important;
  }
}
.s-panels__project-preview--no-transition {
  transition: none !important;
}
.s-panels__project-preview--no-transition > * {
  transition: none !important;
}

.s-panels__project-figure,
.s-panels__project-img,
.s-panels__project-intro,
.s-panels__project-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.s-panels__project-figure {
  overflow: hidden;
  transition: transform 0.4s var(--ease-in-out);
  opacity: 1;
  position: fixed;
}

@media (orientation: landscape) {
  .s-panels__project-figure {
    transform-origin: left center;
    transform: scaleX(0.25);
  }
}
@media (orientation: portrait) {
  .s-panels__project-figure {
    transform-origin: center top;
    transform: scaleY(0.25);
  }
}
.s-panels__project-img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  transition: opacity 0.4s, filter 0.4s, transform 0.4s var(--ease-in-out);
}
.s-panels__project-intro {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  transition: opacity 0.3s;
}
.s-panels__project-intro:hover + .s-panels__project-figure .s-panels__project-img, .s-panels__project-intro:focus-within + .s-panels__project-figure .s-panels__project-img {
  opacity: 1;
}
.s-panels__project-intro:hover .s-panels__text-component::before, .s-panels__project-intro:focus-within .s-panels__text-component::before {
  transform: scaleY(1);
}
.s-panels__project-intro:hover .s-panels__text-component::after, .s-panels__project-intro:focus-within .s-panels__text-component::after {
  transform: scaleX(1);
}

@media (orientation: landscape) {
  .s-panels__project-img {
    transform: scaleX(4);
  }
  .s-panels__project-intro {
    width: 25%;
  }
}
@media (orientation: portrait) {
  .s-panels__project-img {
    transform: scaleY(4);
  }
  .s-panels__project-intro {
    height: 25%;
  }
}
.s-panels__text-component {
  --icon-size: 20px;
  --icon-stroke-width: 1px;
  --icon-margin-top: 12px;
  position: relative;
  padding-top: var(--space-xxl);
}
@media (min-width: 64rem) {
  .s-panels__text-component {
    padding-top: var(--space-xxxl);
  }
}
.s-panels__text-component::before, .s-panels__text-component::after {
  content: "";
  position: absolute;
  background-color: var(--color-white);
  transition: transform 0.2s var(--ease-in-out);
}
.s-panels__text-component::before {
  width: var(--icon-stroke-width);
  height: var(--icon-size);
  bottom: calc(-1 * var(--icon-size) - var(--icon-margin-top));
  left: calc(50% - var(--icon-stroke-width) / 2);
  transform: scaleY(0);
}
.s-panels__text-component::after {
  width: var(--icon-size);
  height: var(--icon-stroke-width);
  bottom: calc(-0.5 * (var(--icon-size) + var(--icon-stroke-width)) - var(--icon-margin-top));
  left: calc(50% - var(--icon-size) / 2);
  transform: scaleX(0);
}
@media (min-width: 64rem) {
  .s-panels__text-component {
    --icon-size: 24px;
    --icon-margin-top: 16px;
  }
}

.s-panels__project-intro:has(a#carto) .s-panels__text-component::before, .s-panels__project-intro:has(a#carto) .s-panels__text-component::after {
  content: "";
  position: absolute;
  background-color: var(--color-black);
  transition: transform 0.2s var(--ease-in-out);
}
.s-panels__project-intro:has(a#carto) .s-panels__text-component p {
  letter-spacing: -0.05em;
}

.s-panels__project-control {
  color: transparent;
}
.s-panels__project-control:focus {
  outline: none;
}

.s-panels__project-title-wrapper {
  position: absolute;
  bottom: 10vh;
  width: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}

.s-panels__project-title {
  transform: translateY(50px);
  transition: transform 0.4s var(--ease-out);
}

.s-panels__nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.s-panels__nav-link {
  color: var(--color-bg);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: var(--space-xxxxs) 0;
  line-height: 1;
}
.s-panels__nav-link::before, .s-panels__nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
}
.s-panels__nav-link::before {
  opacity: 0.15;
}
.s-panels__nav-link::after {
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-in-out);
}
.s-panels__nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.s-panels__social-link {
  color: var(--color-bg);
  text-decoration: none;
  opacity: 1;
  transition: 0.2s;
}
.s-panels__social-link:hover {
  opacity: 0.65;
}

.s-panels__project-content {
  position: relative;
  z-index: 2;
}

.s-panels__overlay-layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
  visibility: hidden;
  transition: 0.5s;
}

.s-panels__overlay-layer--visible {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

/* -------------------------------- 

File#: _1_social-sharing
Title: Social Sharing
Descr: Social sharing plugin
Usage: codyhouse.co/license

-------------------------------- */
.sharebar__btn {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  display: flex;
  background: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  border-radius: 50%;
  transition: 0.2s;
}
.sharebar__btn .icon {
  --size: 24px;
  display: block;
  margin: auto;
  color: var(--color-contrast-high);
  transition: color 0.2s;
}
.sharebar__btn:hover {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  box-shadow: var(--shadow-sm);
}
.sharebar__btn:hover .icon {
  color: var(--color-contrast-higher);
}

/* -------------------------------- 

File#: _1_switch-icon
Title: Switch Icon 
Descr: An icon transition generator that works with any icons
Usage: codyhouse.co/license

-------------------------------- */
.switch-icon { /* button */
  position: relative;
}

.switch-icon--disabled { /* optional - use in JS to temporary disable click event */
  pointer-events: none;
}

.switch-icon__icon { /* icon */
  font-size: 1em; /* icon size */
  display: block;
  will-change: transform;
}

.switch-icon__icon--a {
  opacity: 1;
}

.switch-icon__icon--b {
  position: absolute;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  opacity: 0;
}

.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--hover:hover .switch-icon__icon--a {
  opacity: 0;
}
.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--hover:hover .switch-icon__icon--b {
  opacity: 1;
}

/* --scale */
.switch-icon--scale .switch-icon__icon {
  transition: opacity 0s 0.2s, transform 0.4s;
}
.switch-icon--scale .switch-icon__icon--a {
  transform: scale(1);
}
.switch-icon--scale .switch-icon__icon--b {
  transform: scale(0.8);
}

.switch-icon--scale.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--a {
  transform: scale(0.8);
}
.switch-icon--scale.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--scale.switch-icon--hover:hover .switch-icon__icon--b {
  transform: scale(1);
}

/* --rotate */
.switch-icon--rotate .switch-icon__icon {
  transition: opacity 0s 0.2s, transform 0.4s;
}
.switch-icon--rotate .switch-icon__icon--a {
  transform: rotate(0);
}
.switch-icon--rotate .switch-icon__icon--b {
  transform: rotate(90deg);
}

.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--a {
  transform: rotate(-90deg);
}
.switch-icon--rotate.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--rotate.switch-icon--hover:hover .switch-icon__icon--b {
  transform: rotate(0);
}

/* --flip */
.switch-icon--flip {
  perspective: 10em;
}
.switch-icon--flip .switch-icon__icon {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: opacity 0s 0.2s, transform 0.4s var(--ease-out-back);
}
.switch-icon--flip .switch-icon__icon--a {
  opacity: 1;
  transform: rotateY(0deg);
}
.switch-icon--flip .switch-icon__icon--b {
  opacity: 1;
  transform: rotateY(-180deg);
}

.switch-icon--flip.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--a {
  opacity: 1;
  transform: rotateY(180deg);
}
.switch-icon--flip.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--flip.switch-icon--hover:hover .switch-icon__icon--b {
  opacity: 1;
  transform: rotateY(0deg);
}

/* slide effects */
.switch-icon--slide-up,
.switch-icon--slide-down,
.switch-icon--slide-right,
.switch-icon--slide-left {
  overflow: hidden;
}
.switch-icon--slide-up .switch-icon__icon,
.switch-icon--slide-down .switch-icon__icon,
.switch-icon--slide-right .switch-icon__icon,
.switch-icon--slide-left .switch-icon__icon {
  transition: opacity 0.3s, transform 0.3s;
}

/* slide-up */
.switch-icon--slide-up .switch-icon__icon--a {
  transform: translateY(0);
}
.switch-icon--slide-up .switch-icon__icon--b {
  transform: translateY(100%);
}

.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--a {
  transform: translateY(-100%);
}
.switch-icon--slide-up.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-up.switch-icon--hover:hover .switch-icon__icon--b {
  transform: translateY(0);
}

/* slide-down */
.switch-icon--slide-down .switch-icon__icon--a {
  transform: translateY(0);
}
.switch-icon--slide-down .switch-icon__icon--b {
  transform: translateY(-100%);
}

.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--a {
  transform: translateY(100%);
}
.switch-icon--slide-down.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-down.switch-icon--hover:hover .switch-icon__icon--b {
  transform: translateY(0);
}

/* slide-right */
.switch-icon--slide-right .switch-icon__icon--a {
  transform: translateX(0);
}
.switch-icon--slide-right .switch-icon__icon--b {
  transform: translateX(-100%);
}

.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--a {
  transform: translateX(100%);
}
.switch-icon--slide-right.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-right.switch-icon--hover:hover .switch-icon__icon--b {
  transform: translateX(0);
}

/* slide-left */
.switch-icon--slide-left .switch-icon__icon--a {
  transform: translateX(0);
}
.switch-icon--slide-left .switch-icon__icon--b {
  transform: translateX(100%);
}

.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--a,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--a {
  transform: translateX(-100%);
}
.switch-icon--slide-left.switch-icon--state-b .switch-icon__icon--b,
.switch-icon--slide-left.switch-icon--hover:hover .switch-icon__icon--b {
  transform: translateX(0);
}

/* -------------------------------- 

File#: _2_article-gallery-v4
Title: Article Gallery v4
Descr: A gallery of blog articles
Usage: codyhouse.co/license

-------------------------------- */
.articles-v4.masonry {
  --masonry-grid-gap: var(--space-sm);
  --masonry-col-auto-size: 320px;
}

/* -------------------------------- 

File#: _2_article-gallery
Title: Article Gallery
Descr: A gallery of blog articles
Usage: codyhouse.co/license

-------------------------------- */
/* -------------------------------- 

File#: _2_article-preview-v4
Title: Article Preview v4
Descr: Blog post excerpt, containing a link to the article page and a preview image
Usage: codyhouse.co/license

-------------------------------- */
.story-v4 {
  position: relative;
  z-index: 1;
}

.story-v4__title {
  color: var(--color-contrast-higher);
  -webkit-text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
          text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  transition: 0.2s;
}
.story-v4__title:hover {
  -webkit-text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
          text-decoration-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 1);
}

.story-v4__img-link {
  display: block;
}
.story-v4__img-link img {
  display: block;
  width: 100%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: 0.3s var(--ease-out);
}
.story-v4__img-link:hover img {
  -webkit-clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
          clip-path: polygon(2% 2%, 98% 2%, 98% 98%, 2% 98%);
}

/* -------------------------------- 

File#: _2_article-v2
Title: Article v2
Descr: Article template
Usage: codyhouse.co/license

-------------------------------- */
.t-article-v2__cover {
  height: 200px;
  background-color: var(--color-contrast-low);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 64rem) {
  .t-article-v2__cover {
    height: 400px;
  }
}

.t-article-v2__intro {
  background-color: var(--color-bg);
  padding: var(--space-md);
  margin-top: calc(-1 * var(--space-xxl));
}

.t-article-v2__divider {
  display: flex;
  align-items: center;
}
.t-article-v2__divider span {
  display: block;
  margin: 0 var(--space-xs);
  height: 10px;
  width: 10px;
  transform: rotate(45deg);
  background-color: var(--color-contrast-low);
}
.t-article-v2__divider::before, .t-article-v2__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: auto;
  flex-grow: 1;
  background-color: var(--color-contrast-lower);
}

/* -------------------------------- 

File#: _2_main-header-v3
Title: Main Header v3
Descr: Accessible website navigation
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --header-v3-height: 50px; /* header height on small screens */
}
@media (min-width: 64rem) {
  :root {
    --header-v3-height: 70px ;
  }
}

.header-v3 {
  height: var(--header-v3-height);
  width: 100%;
  z-index: var(--z-index-header, 3);
  transition: background 0.3s;
}

.header-v3--expanded {
  /* class added when navigation is visible (small devices) or search input is visible (big devices) */
}

.header-v3__container {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.header-v3__logo {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.header-v3__logo a, .header-v3__logo svg {
  display: block;
}

.header-v3__nav-control.switch-icon { /* menu button - visible only on small screens */
  padding: var(--space-xxs);
  z-index: 2;
}
.header-v3__nav-control.switch-icon .switch-icon__icon {
  font-size: 24px; /* icon size */
}

.header-v3__nav { /* main navigation */
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md);
  z-index: 1;
  /* hide */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height 0.5s var(--ease-in-out);
}
.header-v3__nav::before { /* top border */
  content: "";
  position: absolute;
  top: var(--header-v3-height);
  width: 100%;
  height: 1px;
  background-color: var(--color-contrast-lower);
  z-index: 10;
}

.header-v3__nav--is-visible { /* show nav */
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  height: 100vh;
  visibility: visible;
}

.header-v3__nav-list {
  position: absolute;
  top: var(--header-v3-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--header-v3-height));
  padding: var(--space-sm) var(--component-padding) var(--component-padding);
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  overscroll-behavior: contain;
}

.header-v3__nav-item {
  border-bottom: 1px solid var(--color-contrast-lower);
  opacity: 0;
  transform: translateY(-10%);
  transition: opacity 0.4s, transform 0.4s;
}
.header-v3__nav--animate-children .header-v3__nav-item { /* class used to trigger list items animation  */
  opacity: 1;
  transform: translateY(0);
}
.header-v3__nav:not(.header-v3__nav--animate-children) .header-v3__nav-item {
  transition-delay: 0s !important;
}

.header-v3__nav-item--logo,
.header-v3__nav-item--search-btn {
  display: none; /* hide logo within nav and search btn */
}

.header-v3__nav-item--search-form {
  margin: var(--space-xs) 0;
  border-bottom: none;
}

.header-v3__nav-link {
  display: block;
  padding: var(--space-sm) 0;
  font-size: var(--text-md);
  color: var(--color-contrast-high);
  text-decoration: none;
}
.header-v3__nav-link:hover {
  color: var(--color-primary);
}

.header-v3__nav-link--icon {
  display: flex;
  align-items: center;
}
.header-v3__nav-link--icon .icon {
  flex-shrink: 0;
  color: currentColor;
}
.header-v3__nav-link--icon span { /* text */
  margin-left: var(--space-xxs);
}

@media (min-width: 64rem) {
  .header-v3 {
    height: var(--header-v3-height);
  }
  .header-v3__container {
    position: relative;
  }
  .header-v3__nav-control,
  .header-v3__logo {
    display: none; /* hide search and menu button */
  }
  .header-v3__nav {
    /* reset */
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    position: static;
    clip: auto;
    -webkit-clip-path: none;
            clip-path: none;
    height: auto;
    overflow: visible;
    visibility: visible;
    overscroll-behavior: auto;
  }
  .header-v3__nav::before {
    display: none;
  }
  .header-v3__nav-list {
    /* reset */
    position: static;
    padding: 0;
    width: auto;
    height: auto;
    overflow: visible;
    overscroll-behavior: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-v3__nav-item {
    /* reset */
    border-bottom: none;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, visibility 0.3s;
    transition-delay: 0s !important; /* reset inline delay set in JS for the mobile animation */
  }
  .header-v3__nav-item--logo { /* make visible logo inside nav */
    display: block;
  }
  .header-v3__nav-item--logo .header-v3__logo {
    display: block;
  }
  .header-v3__nav-item--search-btn { /* show search btn */
    display: block;
  }
  .header-v3__nav-item--search-btn .switch-icon {
    padding: var(--space-xxxs);
  }
  .header-v3__nav-item--search-btn .switch-icon__icon {
    display: block;
  }
  .header-v3__nav-link {
    display: inline-flex;
    padding: var(--space-xxxs);
    font-size: 0.9em;
  }
  .header-v3__nav-link--icon span {
    display: none; /* hide labels and show only icons */
  }
  .header-v3__nav-link--icon,
  .header-v3__nav-item--search-btn .switch-icon__icon {
    font-size: 20px; /* icons size */
  }
  .header-v3__nav-item--search-btn {
    z-index: 4;
  }
  .header-v3__nav-item--search-form {
    margin: 0; /* reset */
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--space-lg));
    height: 100%;
    z-index: var(--z-index-popover, 5);
    transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
  }
  .header-v3__nav--animate-children .header-v3__nav-item--search-form { /* reset mobile style */
    opacity: 0;
  }
  .header-v3__nav-form-control {
    height: 50px;
    position: absolute;
    left: 0;
    padding: var(--space-xs) var(--space-sm);
    top: calc(50% - 25px);
    will-change: transform;
    transition: transform 0.3s;
    transform: translateY(-50%);
  }
  .header-v3--show-search {
    background: var(--color-bg);
  }
  .header-v3--show-search .header-v3__nav-item {
    opacity: 0;
    visibility: hidden;
  }
  .header-v3--show-search .header-v3__nav-item--search-form,
  .header-v3--show-search .header-v3__nav-item--search-btn {
    visibility: visible;
    opacity: 1;
  }
  .header-v3--show-search .header-v3__nav-form-control {
    transform: translateY(0);
  }
}
/* -------------------------------- 

File#: _2_sticky-sharebar
Title: Sticky Sharebar
Descr: Sticky social sharing bar
Usage: codyhouse.co/license

-------------------------------- */
.sticky-sharebar {
  display: flex;
  align-items: center;
  position: fixed;
  height: 100%;
  top: 0;
  right: var(--space-md);
  pointer-events: none;
  z-index: var(--z-index-fixed-element, 10);
  transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s var(--ease-in-out);
  transform: translateX(10%);
  opacity: 0;
  visibility: hidden;
}

.sticky-sharebar--on-target {
  transition: visibility 0s, opacity 0.3s, transform 0.3s var(--ease-in-out);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.sticky-sharebar__list {
  pointer-events: auto;
  background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), 0.15);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-radius: 50em;
  box-shadow: var(--inner-glow), var(--shadow-md);
  padding: 4px;
}

.sticky-sharebar__btn {
  --size: 2.2em;
  width: var(--size);
  height: var(--size);
  position: relative;
  display: flex;
  border-radius: 50%;
}
.sticky-sharebar__btn .icon {
  position: relative;
  color: var(--color-accent); /* icon color */
  display: block;
  margin: auto;
  z-index: 2;
  transition: color 0.2s;
}
.sticky-sharebar__btn::before { /* animated bg */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: inherit;
  background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), 0.1);
  transform: scale(0);
  transition: transform 0.2s var(--ease-out);
}
.sticky-sharebar__btn:hover .icon {
  color: var(--color-accent);
}
.sticky-sharebar__btn:hover::before {
  transform: scale(1);
}

/* -------------------------------- 

File#: _3_article-gallery-v5
Title: Article Gallery v5
Descr: A gallery of blog articles
Usage: codyhouse.co/license

-------------------------------- */
/* -------------------------------- 

File#: _3_article-v3
Title: Article v3
Descr: Article template
Usage: codyhouse.co/license

-------------------------------- */
.t-article-v3 a {
  color: var(--color-accent);
}
.t-article-v3 a:hover {
  color: var(--color-accent-light);
}
.t-article-v3 a h1, .t-article-v3 a h2, .t-article-v3 a h3, .t-article-v3 a h4, .t-article-v3 a h5 {
  color: var(--color-accent) !important;
}

.t-article-v3__hero {
  background-color: var(--color-contrast-lower);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: var(--space-xxl) 0;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2em), 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2em), 0% 100%);
}

.t-article-v3__intro-text {
  padding: var(--space-md);
  color: var(--color-bg);
  background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.75);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.t-article-v3__intro-text p {
  opacity: 0.75;
}
.t-article-v3__intro-text a {
  color: var(--color-secondary);
}

.t-article-v3__divider {
  display: flex;
  align-items: center;
}
.t-article-v3__divider span {
  display: block;
  margin: 0 var(--space-xs);
  height: 10px;
  width: 10px;
  transform: rotate(45deg);
  background-color: var(--color-accent);
}
.t-article-v3__divider::before, .t-article-v3__divider::after {
  content: "";
  display: block;
  height: 1px;
  width: auto;
  flex-grow: 1;
  background-color: var(--color-accent);
}

::-moz-selection {
  color: var(--color-white);
  background-color: var(--color-accent-lighter);
}

::selection {
  color: var(--color-white);
  background-color: var(--color-accent-lighter);
}

/* -------------------------------- 

File#: _3_intro-v2
Title: Intro v2
Descr: Intro section including the main header and 2 content blocks
Usage: codyhouse.co/license

-------------------------------- */