/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

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

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

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

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

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

strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

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

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

/*
 * Add the correct display in all browsers.
 */

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/*!
 * Bootstrap Grid v4.1.0 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
  width: device-width; }

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar; }

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

.container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container {
    max-width: 540px; } }

@media (min-width: 768px) {
  .container {
    max-width: 730px; } }

@media (min-width: 992px) {
  .container {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1180px; } }

@media (min-width: 1360px) {
  .container {
    max-width: 1340px; } }

@media (min-width: 1480px) {
  .container {
    max-width: 1460px; } }

.container-fluid {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto; }

.d-none {
  display: none !important; }

.d-inline {
  display: inline !important; }

.d-inline-block {
  display: inline-block !important; }

.d-inline-flex {
  display: inline-flex !important; }

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important; }
  .d-sm-inline {
    display: inline !important; }
  .d-sm-inline-block {
    display: inline-block !important; }
  .d-sm-inline-flex {
    display: inline-flex !important; } }

@media (min-width: 768px) {
  .d-md-none {
    display: none !important; }
  .d-md-inline {
    display: inline !important; }
  .d-md-inline-block {
    display: inline-block !important; }
  .d-md-inline-flex {
    display: inline-flex !important; } }

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important; }
  .d-lg-inline {
    display: inline !important; }
  .d-lg-inline-block {
    display: inline-block !important; }
  .d-lg-inline-flex {
    display: inline-flex !important; } }

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important; }
  .d-xl-inline {
    display: inline !important; }
  .d-xl-inline-block {
    display: inline-block !important; }
  .d-xl-inline-flex {
    display: inline-flex !important; } }

@media print {
  .d-print-none {
    display: none !important; }
  .d-print-inline {
    display: inline !important; }
  .d-print-inline-block {
    display: inline-block !important; }
  .d-print-inline-flex {
    display: inline-flex !important; } }

.justify-content-start {
  justify-content: flex-start !important; }

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

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

.justify-content-between {
  justify-content: space-between !important; }

.justify-content-around {
  justify-content: space-around !important; }

.align-items-baseline {
  align-items: baseline !important; }

.align-content-start {
  align-content: flex-start !important; }

.align-content-end {
  align-content: flex-end !important; }

.align-content-center {
  align-content: center !important; }

.align-content-between {
  align-content: space-between !important; }

.align-content-around {
  align-content: space-around !important; }

.align-content-stretch {
  align-content: stretch !important; }

.align-self-baseline {
  align-self: baseline !important; }

@media (min-width: 576px) {
  .justify-content-sm-start {
    justify-content: flex-start !important; }
  .justify-content-sm-end {
    justify-content: flex-end !important; }
  .justify-content-sm-center {
    justify-content: center !important; }
  .justify-content-sm-between {
    justify-content: space-between !important; }
  .justify-content-sm-around {
    justify-content: space-around !important; }
  .align-items-sm-baseline {
    align-items: baseline !important; }
  .align-content-sm-start {
    align-content: flex-start !important; }
  .align-content-sm-end {
    align-content: flex-end !important; }
  .align-content-sm-center {
    align-content: center !important; }
  .align-content-sm-between {
    align-content: space-between !important; }
  .align-content-sm-around {
    align-content: space-around !important; }
  .align-content-sm-stretch {
    align-content: stretch !important; }
  .align-self-sm-baseline {
    align-self: baseline !important; } }

@media (min-width: 768px) {
  .justify-content-md-start {
    justify-content: flex-start !important; }
  .justify-content-md-end {
    justify-content: flex-end !important; }
  .justify-content-md-center {
    justify-content: center !important; }
  .justify-content-md-between {
    justify-content: space-between !important; }
  .justify-content-md-around {
    justify-content: space-around !important; }
  .align-items-md-baseline {
    align-items: baseline !important; }
  .align-content-md-start {
    align-content: flex-start !important; }
  .align-content-md-end {
    align-content: flex-end !important; }
  .align-content-md-center {
    align-content: center !important; }
  .align-content-md-between {
    align-content: space-between !important; }
  .align-content-md-around {
    align-content: space-around !important; }
  .align-content-md-stretch {
    align-content: stretch !important; }
  .align-self-md-baseline {
    align-self: baseline !important; } }

@media (min-width: 992px) {
  .justify-content-lg-start {
    justify-content: flex-start !important; }
  .justify-content-lg-end {
    justify-content: flex-end !important; }
  .justify-content-lg-center {
    justify-content: center !important; }
  .justify-content-lg-between {
    justify-content: space-between !important; }
  .justify-content-lg-around {
    justify-content: space-around !important; }
  .align-items-lg-baseline {
    align-items: baseline !important; }
  .align-content-lg-start {
    align-content: flex-start !important; }
  .align-content-lg-end {
    align-content: flex-end !important; }
  .align-content-lg-center {
    align-content: center !important; }
  .align-content-lg-between {
    align-content: space-between !important; }
  .align-content-lg-around {
    align-content: space-around !important; }
  .align-content-lg-stretch {
    align-content: stretch !important; }
  .align-self-lg-baseline {
    align-self: baseline !important; } }

@media (min-width: 1200px) {
  .justify-content-xl-start {
    justify-content: flex-start !important; }
  .justify-content-xl-end {
    justify-content: flex-end !important; }
  .justify-content-xl-center {
    justify-content: center !important; }
  .justify-content-xl-between {
    justify-content: space-between !important; }
  .justify-content-xl-around {
    justify-content: space-around !important; }
  .align-items-xl-baseline {
    align-items: baseline !important; }
  .align-content-xl-start {
    align-content: flex-start !important; }
  .align-content-xl-end {
    align-content: flex-end !important; }
  .align-content-xl-center {
    align-content: center !important; }
  .align-content-xl-between {
    align-content: space-between !important; }
  .align-content-xl-around {
    align-content: space-around !important; }
  .align-content-xl-stretch {
    align-content: stretch !important; }
  .align-self-xl-baseline {
    align-self: baseline !important; } }

.visible {
  visibility: visible !important; }

.invisible {
  visibility: hidden !important; }

.louv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  perspective: 2000px;
  opacity: 0; }
  .louv.is-hidden {
    opacity: 0; }
  .louv.is-inactive {
    display: none; }
  .louv__picture {
    position: relative;
    height: 100%;
    width: 100%;
    background: transparent;
    perspective: 1500px;
    perspective-origin: 50% 70%;
    transform: translateZ(0);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 1s; }
    .louv__picture.is-hidden {
      opacity: 0; }
    .louv__picture.is-inactive {
      display: none; }
    .louv__picture.is-flattened {
      transition: transform 1s !important; }
      .louv__picture.is-flattened .louv__molecule {
        transition: transform 1s !important;
        transform: scale(0.99) !important;
        will-change: auto; }
      .louv__picture.is-flattened canvas {
        transition: transform 1s !important;
        transform: '' !important; }
    .louv__picture.is-shrinked {
      transform: scale(0.1) translateZ(0) !important; }
  .louv__molecule {
    position: absolute;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center; }
  .louv canvas {
    display: block;
    transform: scale(1.02); }
  .louv img {
    visibility: hidden; }
  .louv__loading {
    position: fixed;
    z-index: 9999;
    top: calc(1rem + 1.1vmin);
    left: calc(1rem + 1.1vmin);
    width: calc(2rem + 2.5vmin);
    height: calc(2rem + 2.5vmin);
    -webkit-animation: 3s cubic-bezier(0.2, 0.5, 0.8, 0.5) infinite;
            animation: 3s cubic-bezier(0.2, 0.5, 0.8, 0.5) infinite;
    -webkit-animation-name: louv-loading;
            animation-name: louv-loading;
    transition: opacity .5s;
    pointer-events: none;
    opacity: 0;
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
    display: none; }
    .louv__loading.is-visible {
      opacity: 1;
      pointer-events: all;
      -webkit-animation-play-state: running;
              animation-play-state: running;
      display: block; }
    .louv__loading:before, .louv__loading:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-radius: 50%;
      border-style: dotted;
      border-style: dashed; }
    .louv__loading:before {
      border-width: 3px 3px 0px 0px;
      border-color: black black transparent transparent; }
    .louv__loading:after {
      border-width: 0px 0px 3px 3px;
      border-color: transparent transparent white white; }

@keyframes louv-loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

[data-subtly] {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  background-color: transparent;
  color: black; }
  [data-subtly] li {
    padding-left: 0.4rem; }
    [data-subtly] li > a {
      padding: 1.8rem 0; }
      [data-subtly] li > a:active {
        border: none;
        outline: none;
        box-shadow: none; }
  [data-subtly] > li {
    position: relative; }
    [data-subtly] > li:not(:last-child):after {
      content: '';
      position: absolute;
      left: -5%;
      right: -5%;
      bottom: 0;
      height: 1px;
      background-image: linear-gradient(90deg, transparent, #4e74fb 20%, #a00210 80%, transparent);
      transform-origin: 0;
      -webkit-animation: line-grow 0.5s cubic-bezier(0.2, 0, 0.2, 1);
              animation: line-grow 0.5s cubic-bezier(0.2, 0, 0.2, 1); }
  [data-subtly] a {
    font-size: 1.8rem;
    color: currentColor; }
    [data-subtly] a.has-href {
      color: #7999fb; }
  [data-subtly] li > a {
    display: block; }
    [data-subtly] li > a:hover {
      background-image: linear-gradient(180deg, transparent 25%, rgba(255, 255, 255, 0.05) 66%, rgba(255, 255, 255, 0.1)); }
  [data-subtly] > li ul {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 0.4rem;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.2, 0, 0.2, 1); }
    [data-subtly] > li ul li > a {
      display: flex;
      padding: 1.8rem 0; }
    [data-subtly] > li ul li:first-child {
      margin-top: .8rem; }
    [data-subtly] > li ul li > ul {
      transition: all .3s ease; }
  [data-subtly] li:not(.has-sub) > a {
    padding-left: 0.4rem;
    margin-left: -0.4rem; }
  [data-subtly] .has-sub {
    padding-bottom: calc(1.8rem - 0.3em); }
    [data-subtly] .has-sub > a {
      position: relative;
      display: block;
      padding-right: 4rem; }
      [data-subtly] .has-sub > a:before, [data-subtly] .has-sub > a:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 3%;
        display: block;
        width: .66em;
        height: .66em;
        transform: translateY(-75%) rotate(-45deg);
        transform-origin: 50%;
        transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
        border: 2px solid transparent; }
      [data-subtly] .has-sub > a:before {
        border-left-color: #7999fb; }
      [data-subtly] .has-sub > a:after {
        border-bottom-color: #7999fb; }
      [data-subtly] .has-sub > a ~ ul {
        margin-top: calc(-1.8rem + 0.3em);
        position: relative; }
        [data-subtly] .has-sub > a ~ ul:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 1px;
          background: linear-gradient(#7999fb, #440faa, #7999fb 90%, transparent);
          transform-origin: 0 0;
          transition: transform 1s cubic-bezier(0.2, 0, 0.2, 1);
          transform: scale(0); }
        [data-subtly] .has-sub > a ~ ul > li:not(:last-child) {
          position: relative; }
          [data-subtly] .has-sub > a ~ ul > li:not(:last-child):after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 10%, #9ea1ba 60%, transparent);
            transform-origin: 0;
            opacity: .66;
            transition: transform 1s cubic-bezier(0.2, 0, 0.2, 1);
            transform: scale(0); }
    [data-subtly] .has-sub > a > a {
      position: relative;
      display: inline; }
      [data-subtly] .has-sub > a > a:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.3em;
        height: 1px;
        background: currentColor;
        transform-origin: 0;
        transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
        transform: scale(0); }
    [data-subtly] .has-sub.is-animated > a:before, [data-subtly] .has-sub.is-animated > a:after {
      -webkit-animation: line-grow .3s both;
              animation: line-grow .3s both; }
    [data-subtly] .has-sub.is-animated > a:after {
      -webkit-animation-delay: .3s;
              animation-delay: .3s; }
    [data-subtly] .has-sub.is-opened > a:before, [data-subtly] .has-sub.is-opened > a:after {
      transform: translateY(-20%) rotate(135deg); }
    [data-subtly] .has-sub.is-opened > a:before {
      border-left-color: #f01241; }
    [data-subtly] .has-sub.is-opened > a:after {
      border-bottom-color: #f01241; }
    [data-subtly] .has-sub.is-opened > a ~ ul:before {
      transform: scale(1); }
    [data-subtly] .has-sub.is-opened > a ~ ul > li:after {
      transform: scale(1); }
    [data-subtly] .has-sub.is-opened > a > a:before {
      transform: scale(1);
      background-color: #7999fb; }

@keyframes line-grow {
  0% {
    transform: translateY(-50%) rotate(-45deg) scale(0); }
  100% {
    transform: translateY(-50%) rotate(-45deg) scale(1); } }

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

*:focus {
  outline-style: none; }
  *:focus:not(:active) {
    box-shadow: inset 0 0 0px 1px #4e74fb, inset 0 0 0px 2px lightcyan, inset 0 0 0px 3px #4e74fb; }

html {
  font-size: 62.5%;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }
  html.full-viewport {
    height: 100%;
    width: 100%; }
    html.full-viewport body, html.full-viewport main {
      height: 100%;
      width: 100%; }

.js-disabled .louv {
  opacity: .99; }

.js-disabled .works__gallery {
  overflow: scroll; }

.js-disabled .works__article {
  position: relative;
  height: auto; }

.js-disabled .article__content {
  flex: 100%; }

.js-disabled .article__text-item.is-inactive {
  opacity: 1;
  transform: none; }

.js-disabled .article__header-hiding-element {
  transform: none !important; }

.js-disabled .article__accent-line {
  transform: none !important; }

.js-disabled .article__images {
  min-height: 0 !important;
  flex-basis: 0; }

.js-disabled .spotlight__texts-louv {
  justify-content: flex-start; }

.js-disabled .spotlight__text-item {
  margin-bottom: 4rem; }

.js-disabled .spotlight__texts-wrapper {
  padding-top: 2rem;
  overflow-y: scroll; }

.js-disabled .spotlight {
  -webkit-animation: no-js-preload-delayed-opacity .5s 4s both;
          animation: no-js-preload-delayed-opacity .5s 4s both;
  z-index: 1; }

.js-disabled .manifest {
  -webkit-animation: no-js-preload-delayed-opacity .5s 10s both;
          animation: no-js-preload-delayed-opacity .5s 10s both; }

.js-disabled .manifest {
  display: flex;
  align-items: center;
  justify-content: center; }
  .js-disabled .manifest__container {
    height: 50%;
    flex-wrap: nowrap;
    max-width: 50%; }
  .js-disabled .manifest__phrase {
    margin: 2vmin 0; }
    .js-disabled .manifest__phrase.is-hidden {
      opacity: 1; }

.js-disabled .nav__symbol--spotlight,
.js-disabled .nav__bg-half--first {
  -webkit-animation: nav-bg-half-first-show-on-load 1s backwards 4.8s, fade-in .5s 6s both;
          animation: nav-bg-half-first-show-on-load 1s backwards 4.8s, fade-in .5s 6s both; }

.js-disabled .nav__symbol--menu,
.js-disabled .nav__bg-half--second {
  -webkit-animation: nav-bg-half-second-show-on-load 1s backwards 4.8s, fade-in .5s 6s both;
          animation: nav-bg-half-second-show-on-load 1s backwards 4.8s, fade-in .5s 6s both; }

@keyframes nav-bg-half-first-show-on-load {
  0% {
    transform: translate(-15vw, 15vh); }
  100% {
    transform: none; } }

@keyframes nav-bg-half-second-show-on-load {
  0% {
    transform: translate(15vw, -15vh); }
  100% {
    transform: none; } }

body {
  font-family: "Play", sans-serif;
  color: #0a0506;
  color: #fffbfc;
  font-size: 1.6rem;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  position: relative; }

@keyframes no-js-preload-delayed-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

main {
  background: #0a0506; }

img {
  vertical-align: top;
  max-width: 100%;
  display: block;
  min-height: 1px;
  min-width: 1px; }

a {
  text-decoration: none;
  cursor: pointer;
  color: currentColor; }

button {
  outline: none;
  border: none;
  background: none;
  cursor: pointer; }

.layer-full-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden; }

.section-padding {
  padding: 4rem 0; }

.font-c-1 {
  font-family: 'Forum', sans-serif; }

.font-s-s-1 {
  font-family: 'Play', sans-serif; }

h1, h2, h3 {
  font-weight: 400;
  margin: 0; }

.light {
  font-weight: 300; }

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; }

.semi {
  font-weight: 600; }

@keyframes unveal-to-right {
  0% {
    transform: scaleX(0); }
  0% {
    transform: scaleX(1); } }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .img-wrapper--contain img, .img-wrapper--contain svg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center; }
  .img-wrapper--contain svg {
    width: 50%;
    height: 50%; }

.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6vmin;
  height: 6vmin;
  border-radius: 50%;
  box-shadow: 6px 0px 8px -4px white;
  -webkit-animation: 3s cubic-bezier(0.2, 0.5, 0.8, 0.5) infinite;
          animation: 3s cubic-bezier(0.2, 0.5, 0.8, 0.5) infinite;
  -webkit-animation-name: loading1;
          animation-name: loading1;
  box-shadow: 6px 0px 3px -4px white, 7px 0px 3px -4px black; }

.lozenge {
  height: 100vmin;
  width: 100vmin;
  perspective: 500px;
  transform-style: preserve-3d;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: .6; }
  @media (min-width: 50em) and (min-height: 50em) {
    .lozenge {
      max-height: 80rem;
      max-width: 80rem; } }
  .lozenge.intro-animated {
    -webkit-animation: intro-lozenge 3s cubic-bezier(0.12, 0.05, 0.15, 0.9) 3.4s both;
            animation: intro-lozenge 3s cubic-bezier(0.12, 0.05, 0.15, 0.9) 3.4s both; }
    .lozenge.intro-animated .lozenge__headlines {
      -webkit-animation: rotate-360-clock 3s cubic-bezier(0.5, 0, 0.1, 1) 0.6s both;
              animation: rotate-360-clock 3s cubic-bezier(0.5, 0, 0.1, 1) 0.6s both; }
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .lozenge.intro-animated .lozenge__headlines {
          -webkit-animation: none !important;
                  animation: none !important; } }
    .lozenge.intro-animated .lozenge__headline {
      -webkit-animation-duration: 3s;
              animation-duration: 3s;
      -webkit-animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
              animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-delay: 3.4s;
              animation-delay: 3.4s; }
    .lozenge.intro-animated .lozenge__span {
      margin: 0;
      font-size: inherit;
      -webkit-animation-duration: 3s;
              animation-duration: 3s;
      -webkit-animation-timing-function: ease;
              animation-timing-function: ease;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both; }
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .lozenge.intro-animated .lozenge__span {
          -webkit-animation: none !important;
                  animation: none !important; } }
      .lozenge.intro-animated .lozenge__span span:first-child {
        -webkit-animation: span-opacity 6s ease-in-out 1s both;
                animation: span-opacity 6s ease-in-out 1s both; }
    .lozenge.intro-animated .lozenge__span-wrapper {
      display: block;
      -webkit-animation: rotate-360-anti-clock 3s cubic-bezier(0.5, 0, 0.1, 1) 0.6s both;
              animation: rotate-360-anti-clock 3s cubic-bezier(0.5, 0, 0.1, 1) 0.6s both; }
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .lozenge.intro-animated .lozenge__span-wrapper {
          -webkit-animation: none !important;
                  animation: none !important; } }
  .lozenge.is-animated .lozenge__headline {
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
            animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-delay: 1s;
            animation-delay: 1s; }
  .lozenge__headlines {
    height: 100%;
    width: 100%;
    transition: opacity 1s;
    will-change: transform; }
  .lozenge__headline {
    position: absolute;
    font-size: 10rem;
    line-height: .7;
    color: white;
    transition: transform 3s ease-out;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform; }
    @media (min-width: 35em) and (min-height: 35em) {
      .lozenge__headline {
        font-size: 13rem; } }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .lozenge__headline {
        -webkit-animation: none !important;
                animation: none !important; } }
    .lozenge__headline--1 {
      top: 20px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      -webkit-animation-name: intro-lozenge-h-1;
              animation-name: intro-lozenge-h-1; }
      @media (min-width: 35em) and (min-height: 35em) {
        .lozenge__headline--1 {
          top: 40px;
          -webkit-animation-name: intro-lozenge-h-1-xs;
                  animation-name: intro-lozenge-h-1-xs; } }
      @media (min-width: 50em) and (min-height: 50em) {
        .lozenge__headline--1 {
          -webkit-animation-name: intro-lozenge-h-1-sm;
                  animation-name: intro-lozenge-h-1-sm; } }
      .lozenge__headline--1 .lozenge__span {
        align-items: flex-start;
        -webkit-animation-name: slide-fade-down;
                animation-name: slide-fade-down;
        -webkit-animation-delay: 0s;
                animation-delay: 0s; }
        .lozenge__headline--1 .lozenge__span span:last-child {
          top: -.1em;
          right: -2em; }
    .lozenge__headline--2 {
      top: 50%;
      right: 0;
      transform: translate3d(0, -50%, 0);
      -webkit-animation-name: intro-lozenge-h-2;
              animation-name: intro-lozenge-h-2; }
      @media (min-width: 35em) and (min-height: 35em) {
        .lozenge__headline--2 {
          right: 40px;
          -webkit-animation-name: intro-lozenge-h-2-xs;
                  animation-name: intro-lozenge-h-2-xs; } }
      @media (min-width: 50em) and (min-height: 50em) {
        .lozenge__headline--2 {
          -webkit-animation-name: intro-lozenge-h-2-sm;
                  animation-name: intro-lozenge-h-2-sm; } }
      .lozenge__headline--2 .lozenge__span {
        align-items: center;
        -webkit-animation-name: slide-fade-left;
                animation-name: slide-fade-left;
        -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s; }
        .lozenge__headline--2 .lozenge__span span:last-child {
          left: .9em;
          top: 1.7em; }
    .lozenge__headline--3 {
      bottom: 20px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      -webkit-animation-name: intro-lozenge-h-3;
              animation-name: intro-lozenge-h-3; }
      @media (min-width: 35em) and (min-height: 35em) {
        .lozenge__headline--3 {
          bottom: 40px;
          -webkit-animation-name: intro-lozenge-h-3-xs;
                  animation-name: intro-lozenge-h-3-xs; } }
      @media (min-width: 50em) and (min-height: 50em) {
        .lozenge__headline--3 {
          -webkit-animation-name: intro-lozenge-h-3-sm;
                  animation-name: intro-lozenge-h-3-sm; } }
      .lozenge__headline--3 .lozenge__span {
        align-items: flex-end;
        -webkit-animation-name: slide-fade-up;
                animation-name: slide-fade-up;
        -webkit-animation-delay: 0.8s;
                animation-delay: 0.8s; }
        .lozenge__headline--3 .lozenge__span span:last-child {
          right: -2.2em;
          bottom: .5em; }
    .lozenge__headline--4 {
      left: 0;
      bottom: 50%;
      transform: translate3d(0, 50%, 0);
      -webkit-animation-name: intro-lozenge-h-4;
              animation-name: intro-lozenge-h-4; }
      @media (min-width: 35em) and (min-height: 35em) {
        .lozenge__headline--4 {
          left: 40px;
          -webkit-animation-name: intro-lozenge-h-4-xs;
                  animation-name: intro-lozenge-h-4-xs; } }
      @media (min-width: 50em) and (min-height: 50em) {
        .lozenge__headline--4 {
          -webkit-animation-name: intro-lozenge-h-4-sm;
                  animation-name: intro-lozenge-h-4-sm; } }
      .lozenge__headline--4 .lozenge__span {
        align-items: center;
        -webkit-animation-name: slide-fade-right;
                animation-name: slide-fade-right;
        -webkit-animation-delay: 1.2s;
                animation-delay: 1.2s; }
        .lozenge__headline--4 .lozenge__span span:last-child {
          left: 1.2em;
          top: 1.7em; }
  .lozenge__span {
    display: flex;
    position: relative;
    transition: opacity 1s; }
    .lozenge__span span {
      height: auto; }
      .lozenge__span span:first-child {
        opacity: .25;
        transition: opacity .7s; }
      .lozenge__span span:last-child {
        position: absolute;
        font-size: 0.15em; }

@keyframes span-opacity {
  0% {
    opacity: .8; }
  100% {
    opacity: .25; } }

@keyframes slide-fade-down {
  0% {
    opacity: 0;
    transform: translate(0, -4rem); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes slide-fade-up {
  0% {
    opacity: 0;
    transform: translate(0, 4rem); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes slide-fade-right {
  0% {
    opacity: 0;
    transform: translate(-4rem, 0); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes slide-fade-left {
  0% {
    opacity: 0;
    transform: translate(4rem, 0); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }

@keyframes intro-lozenge {
  0% {
    opacity: 1; }
  100% {
    opacity: .6; } }

@keyframes intro-lozenge-h-1 {
  0% {
    transform: translate3d(-50%, calc(50vmin - 1em - 20px), 0) scale(1); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(0.6); } }

@keyframes intro-lozenge-h-2 {
  0% {
    transform: translate3d(calc(-50vmin + 1em + 20px), -50%, 0) scale(1); }
  100% {
    transform: translate3d(0, -50%, 0) scale(0.6); } }

@keyframes intro-lozenge-h-3 {
  0% {
    transform: translate3d(-50%, calc(-50vmin + 1em + 20px), 0) scale(1); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(0.6); } }

@keyframes intro-lozenge-h-4 {
  0% {
    transform: translate3d(calc(50vmin - 1em), 50%, 0) scale(1); }
  100% {
    transform: translate3d(0, 50%, 0) scale(0.6); } }

@keyframes intro-lozenge-h-1-xs {
  0% {
    transform: translate3d(-50%, calc(50vmin - 1em - 4rem), 0) scale(0.9); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1); } }

@keyframes intro-lozenge-h-2-xs {
  0% {
    transform: translate3d(calc(-50vmin + 1em + 40px + 10px), -50%, 0) scale(0.9); }
  100% {
    transform: translate3d(0, -50%, 0) scale(1); } }

@keyframes intro-lozenge-h-3-xs {
  0% {
    transform: translate3d(-50%, calc(-50vmin + 1em + 4rem), 0) scale(0.9); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1); } }

@keyframes intro-lozenge-h-4-xs {
  0% {
    transform: translate3d(calc(50vmin - 1em - 40px + 18px), 50%, 0) scale(0.9); }
  100% {
    transform: translate3d(0, 50%, 0) scale(1); } }

@keyframes intro-lozenge-h-1-sm {
  0% {
    transform: translate3d(-50%, 223px, 0) scale(0.9); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1); } }

@keyframes intro-lozenge-h-2-sm {
  0% {
    transform: translate3d(-211px, -50%, 0) scale(0.9); }
  100% {
    transform: translate3d(0, -50%, 0) scale(1); } }

@keyframes intro-lozenge-h-3-sm {
  0% {
    transform: translate3d(-50%, -219px, 0) scale(0.9); }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1); } }

@keyframes intro-lozenge-h-4-sm {
  0% {
    transform: translate3d(246px, 50%, 0) scale(0.9); }
  100% {
    transform: translate3d(0, 50%, 0) scale(1); } }

@keyframes rotate-360-clock {
  0% {
    transform: rotate(0deg) translateZ(0); }
  100% {
    transform: rotate(360deg) translateZ(0); } }

@keyframes rotate-360-anti-clock {
  0% {
    transform: rotate(360deg) translateZ(0); }
  100% {
    transform: rotate(0deg) translateZ(0); } }

@keyframes intro-span-last-child-1 {
  0% {
    transform: translateY(1.7em); }
  100% {
    transform: translateY(0); } }

@keyframes intro-span-last-child-3 {
  0% {
    transform: translateY(-1.7em); }
  100% {
    transform: translateY(0); } }
  .moving-dot__container {
    width: 20vmin;
    height: 20vmin;
    position: relative; }

.nav-symbol {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: black;
  transition: transform .5s, opacity 1s, color 1s;
  will-change: transform;
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  perspective: 500px; }
  .nav-symbol:before, .nav-symbol:after {
    content: '';
    position: absolute;
    left: 17%;
    width: 66%;
    height: 66%;
    border: solid 3px;
    transition: transform 0.5s; }
  .nav-symbol:before {
    top: calc(-25% + 1px);
    border-color: transparent transparent currentColor currentColor;
    transform: translateY(-15%); }
  .nav-symbol:after {
    bottom: calc(-25% + 1px);
    border-color: currentColor currentColor transparent transparent;
    transform: translateY(15%); }

.modal-symbol {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: black;
  transition: transform .5s, color 1s;
  will-change: transform;
  opacity: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  transform: rotate(90deg); }
  .modal-symbol__half {
    position: relative;
    width: 50%;
    flex: 1 1 0;
    transition: flex-basis .5s, max-width .5s; }
    .modal-symbol__half:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 0;
      padding-top: 100%;
      box-sizing: content-box;
      top: 50%;
      border: solid;
      border-width: 0px 3px 3px 0px;
      border-radius: 31% 63% 0% 98% / 31% 100% 0% 64%;
      border-radius: 31% 67% 0% 70% / 31% 77% 0% 64%;
      border-radius: 31% 67% 52% 70% / 31% 77% 0% 64%;
      border-radius: 31% 63% 54% 52% / 31% 48% 0% 64%; }
    .modal-symbol__half--first {
      flex-basis: 33%;
      max-width: 33%;
      margin-right: 17%;
      flex-basis: 26%;
      max-width: 26%;
      margin-right: 24%; }
      .modal-symbol__half--first:before {
        transform: translateY(-50%) rotate(-45deg); }
    .modal-symbol__half--second {
      max-width: 50%; }
      .modal-symbol__half--second:before {
        transform: translateY(-50%) rotate(135deg); }

.magic-screen {
  width: 100%;
  height: 100%;
  border-radius: 100% 78% 100% 77% / 99% 97% 75% 74%;
  box-shadow: 0 0 100px 0vmin #e2ffff;
  background: radial-gradient(ellipse at top, #00fff3, transparent), radial-gradient(ellipse at bottom, #00157b, transparent), black; }
  .magic-screen--black-bg {
    box-shadow: 0 0 100px 0vmin #e2ffff, 0 0 0vmin 33vh #0a0506, 0 0 0vmin 33vw #0a0506; }

.nav-target {
  position: absolute;
  height: 0;
  opacity: 0; }
  .nav-target ~ .nav-target__content {
    opacity: 0;
    transition: opacity 1s ease 2s;
    pointer-events: none;
    z-index: 0; }
    .nav-target ~ .nav-target__content.nav__menu {
      transition: opacity .5s ease 1s, z-index 1s step-end;
      z-index: 0; }
    .nav-target ~ .nav-target__content.spotlight__container {
      transition: opacity 2s 1s;
      position: relative;
      z-index: 1; }
      .nav-target ~ .nav-target__content.spotlight__container .spotlight__magic-screen {
        transform: translate3d(-50%, -50%, 0) scale(2);
        transition: transform 2.5s;
        -webkit-animation: spotlight-disappear 2.5 0s;
                animation: spotlight-disappear 2.5 0s; }
  .nav-target:checked ~ .nav-target__content {
    opacity: 1;
    transition-delay: 0s;
    z-index: 1;
    position: relative;
    pointer-events: all;
    transform: scale(1); }
    .nav-target:checked ~ .nav-target__content.nav__menu {
      transition: z-index 1s;
      z-index: 2; }
  .nav-target.spotlight__trigger:checked ~ .nav-target__content {
    transition: opacity 1s; }
    .nav-target.spotlight__trigger:checked ~ .nav-target__content .spotlight__magic-screen {
      transform: translate3d(-50%, -50%, 0px) scale(1);
      -webkit-animation: spotlight-shrink 4s forward;
              animation: spotlight-shrink 4s forward; }
  .nav-target.works__trigger:checked ~ .nav-target__content:after {
    transition: opacity ease-in-out 1.6s 1s;
    opacity: 0; }

@keyframes spotlight-shrink {
  0% {
    transform: translate3d(-50%, -50%, 0px) scale(2); }
  100% {
    transform: translate3d(-50%, -50%, 0px) scale(1); } }

@keyframes spotlight-disappear {
  0% {
    display: block; }
  100% {
    display: none; } }

.call-to-scroll {
  position: absolute;
  transition: opacity .3s;
  width: 4rem;
  height: 6rem;
  overflow: visible;
  color: lightcyan;
  -webkit-animation: cts-slide-down 4.5s infinite cubic-bezier(0.2, 0, 0.5, 1) both;
          animation: cts-slide-down 4.5s infinite cubic-bezier(0.2, 0, 0.5, 1) both;
  bottom: 5px;
  right: 8px; }
  @media (min-width: 35em) {
    .call-to-scroll {
      right: 17px; } }
  .call-to-scroll.is-hidden {
    display: none; }
  .call-to-scroll__arrow {
    position: absolute;
    width: 100%;
    height: 0;
    padding-top: 100%; }
    .call-to-scroll__arrow:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      height: 50%;
      border: solid .2rem;
      transition: transform 0.5s;
      border-color: transparent currentColor currentColor transparent;
      -webkit-animation: cts-blink 4.5s infinite cubic-bezier(0.2, 0, 0.5, 1) both;
              animation: cts-blink 4.5s infinite cubic-bezier(0.2, 0, 0.5, 1) both; }
    .call-to-scroll__arrow:nth-child(1):before {
      transform: scaleY(0.8) translateY(0.3rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0s;
              animation-delay: 0s; }
    .call-to-scroll__arrow:nth-child(2):before {
      transform: scaleY(0.8) translateY(0.6rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.03s;
              animation-delay: 0.03s; }
    .call-to-scroll__arrow:nth-child(3):before {
      transform: scaleY(0.8) translateY(0.9rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.06s;
              animation-delay: 0.06s; }
    .call-to-scroll__arrow:nth-child(4):before {
      transform: scaleY(0.8) translateY(1.2rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.09s;
              animation-delay: 0.09s; }
    .call-to-scroll__arrow:nth-child(5):before {
      transform: scaleY(0.8) translateY(1.5rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.12s;
              animation-delay: 0.12s; }
    .call-to-scroll__arrow:nth-child(6):before {
      transform: scaleY(0.8) translateY(1.8rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.15s;
              animation-delay: 0.15s; }
    .call-to-scroll__arrow:nth-child(7):before {
      transform: scaleY(0.8) translateY(2.1rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.18s;
              animation-delay: 0.18s; }
    .call-to-scroll__arrow:nth-child(8):before {
      transform: scaleY(0.8) translateY(2.4rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.21s;
              animation-delay: 0.21s; }
    .call-to-scroll__arrow:nth-child(9):before {
      transform: scaleY(0.8) translateY(2.7rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.24s;
              animation-delay: 0.24s; }
    .call-to-scroll__arrow:nth-child(10):before {
      transform: scaleY(0.8) translateY(3rem) translate(50%, 25%) rotate(45deg);
      -webkit-animation-delay: 0.27s;
              animation-delay: 0.27s; }

@keyframes cts-blink {
  0% {
    opacity: 0; }
  12% {
    opacity: .7; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes cts-long-blink {
  0% {
    opacity: 0; }
  5% {
    opacity: .5; }
  35% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes shadow-blink {
  0% {
    opacity: 0; }
  5% {
    opacity: .3; }
  30% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.666); } }

@keyframes cts-slide-down {
  0% {
    transform: translateY(-20px); }
  30% {
    transform: translateY(0); }
  100% {
    transform: translateY(0); } }

.article {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  padding: 7vmin 15vmin 0; }
  .article__content {
    flex: 100%;
    flex: 1 1 0;
    max-height: 100%;
    display: flex;
    align-items: stretch;
    flex-flow: column nowrap;
    justify-content: space-between;
    justify-content: flex-start;
    min-height: 0; }
    @media screen and (min-aspect-ratio: 4 / 3) {
      .article__content {
        flex-flow: row nowrap; } }
  .article__category {
    font-family: "Forum", sans-serif;
    font-size: calc(calc(1.2rem + .6vmin) * 0.8);
    color: #703843;
    margin: 0;
    transition: transform 0.5s 0.44s; }
  .article__accent-line {
    flex: 1 1 0;
    padding-left: 2rem;
    margin-left: 1rem;
    margin-bottom: 0;
    transform: scaleX(0.6) translateY(-0.2em);
    transform-origin: left center;
    transition: transform 0.8s 0.66s;
    height: 1px;
    color: #703843;
    background: currentColor;
    background: linear-gradient(to right, currentColor, transparent); }
  .article__title {
    font-size: calc(3.9rem + 2vmin);
    font-weight: 400;
    margin: .1em 0 .1em -.06em;
    color: #251700;
    color: #0a0506;
    transition: transform .5s; }
  .article__subtitle {
    font-size: calc(1.2rem + 1.8vmin);
    font-weight: 400;
    margin: 0;
    color: #2a1a00;
    color: #2c161a;
    color: #1b0e10;
    transition: transform 0.5s 0.22s; }
  .article__header {
    flex: none;
    margin-bottom: 5vmin; }
    @media screen and (min-aspect-ratio: 4 / 3) {
      .article__header {
        margin-bottom: 6vmin; } }
    .article__header.is-hidden .article__header-hiding-element {
      transform: translateX(-100vw); }
    .article__header.is-hidden .article__accent-line {
      transform: scaleX(0) translateY(-2px); }
  .article__text-with-line-container {
    display: flex;
    align-items: flex-end; }
  .article__texts {
    max-height: 100%;
    position: relative;
    overflow: visible;
    width: calc(100% + 2rem);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    @media screen and (min-aspect-ratio: 4 / 3) {
      .article__texts {
        padding-left: 0; } }
    .article__texts:focus {
      outline-style: none;
      box-shadow: none; }
    .article__texts .louv {
      align-items: flex-start;
      justify-content: flex-start; }
  .article__texts-wrapper {
    overflow: visible;
    flex: 1 1 0;
    flex: 1 0 0;
    margin-top: 5vmin;
    order: 1;
    margin-right: auto;
    width: 100%;
    max-width: 80rem; }
    @media screen and (min-aspect-ratio: 4 / 3) {
      .article__texts-wrapper {
        padding-top: 0;
        padding-left: 7.5vmin;
        margin-top: -.4em; } }
    .article__texts-wrapper.is-scrollable {
      overflow: hidden;
      vertical-align: bottom; }
      .article__texts-wrapper.is-scrollable .article__texts {
        overflow: hidden;
        overflow-y: scroll; }
  .article__images {
    width: auto;
    max-width: 80%;
    order: 0;
    z-index: 0;
    flex-basis: 18vh;
    min-height: 18vh;
    height: 18vh; }
    .article__images .louv {
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%; }
    @media screen and (min-aspect-ratio: 4 / 3) {
      .article__images {
        flex-basis: 33%;
        width: 33%;
        height: calc(100% - 4rem); }
        .article__images .louv {
          align-items: flex-start; } }
  .article__text-item {
    font-size: calc(1.2rem + .65vmin);
    line-height: 1.3;
    width: calc(100% - 20px);
    margin: 0;
    text-transform: none;
    transition: transform .6s, opacity .6s; }
    .article__text-item:not(:first-child) {
      margin: 1em 0 5rem; }
    .article__text-item.is-inactive {
      transform: translateY(10rem);
      opacity: 0; }
  .article ul {
    padding-left: 2rem;
    margin-top: 1.8em; }
  .article li {
    margin-top: 1em; }
  .article__headline {
    color: #703843;
    font-size: calc(1.2rem + 1.8vmin);
    margin-top: 1em; }
  .article__subheadline {
    font-weight: 600;
    font-size: calc(1.4rem + 1vmin); }

.nav-btn {
  height: 15vmin;
  width: 15vmin;
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  color: black;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  will-change: transform;
  transition: transform .2s, opacity 0s;
  z-index: 2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
  .nav-btn:before {
    content: '';
    width: 33%;
    height: 33%;
    border: solid 5px white;
    border-color: transparent transparent currentColor currentColor;
    transition: transform, border-radius, border-width, opacity;
    transition-duration: .5s;
    will-change: border-radius, transform, border-width;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
  .nav-btn--prev {
    left: 0; }
    .nav-btn--prev:before {
      transform: scale(0.6) translateZ(0) rotate(45deg); }
    @media (hover: hover) {
      .nav-btn--prev:hover:before {
        transform: scale(1) translateZ(0) rotate(45deg); } }
  .nav-btn--next {
    right: 0; }
    .nav-btn--next:before {
      transform: scale(0.6) translateZ(0) rotate(-135deg); }
    @media (hover: hover) {
      .nav-btn--next:hover:before {
        transform: scale(1) translateZ(0) rotate(-135deg); } }

.intro-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  height: 100%;
  width: 100%; }
  .intro-gallery__louv {
    height: 100vmin;
    width: 100vmin;
    max-height: 80rem;
    max-width: calc(1.09 * 80rem); }

.manifest__container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-flow: column; }

.manifest .louv__picture-container,
.manifest .louv__picture-container {
  perspective: 900px;
  perspective-origin: 50% 70%;
  transform-style: preserve-3d; }

.manifest__phrase {
  margin: 0;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  border-radius: 30%;
  transition: transform 3s;
  font-size: 2rem; }
  .manifest__phrase.is-hidden {
    opacity: 0; }
  @media (min-width: 35em) and (min-height: 35em) {
    .manifest__phrase {
      font-size: 2.4rem; } }
  .manifest__phrase [data-word] {
    display: inline-flex; }
  .manifest__phrase [data-char] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin: .35em;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px -1px, 0 0 30px 0px rgba(0, 0, 0, 0.4); }

.nav {
  color: white;
  color: #fffbfc;
  transition: color 1s; }
  .nav__bg-arch {
    transition: transform 1.6s cubic-bezier(0.2, 0, 0.1, 1) 1s;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
    position: absolute;
    transform: scale(0.3333333333);
    width: 300%;
    height: 300%;
    border-radius: 50%; }
  .nav__bg-wings {
    position: absolute;
    height: 100%;
    width: 100%; }
    .nav__bg-wings:before, .nav__bg-wings:after {
      content: '';
      position: absolute;
      background: currentColor;
      transition: transform 1.6s cubic-bezier(0.2, 0, 0.1, 1) 0.5s;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
  .nav__bg-half {
    position: absolute;
    height: 536px;
    width: 536px;
    height: 536px;
    width: 536px;
    transition: transform 1.6s cubic-bezier(0.2, 0, 0.1, 1) 0.5s;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    will-change: transform;
    pointer-events: none;
    z-index: 2; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .nav__bg-half {
        transition: none; } }
    .nav__bg-half--first {
      bottom: -40px;
      left: -20px; }
      @media (min-width: 35em) {
        .nav__bg-half--first {
          bottom: -30px;
          left: -10px; } }
      .nav__bg-half--first .nav__bg-arch {
        top: -200%;
        transform-origin: bottom left;
        box-shadow: -402px 402px 0 -198.000295523px; }
      .nav__bg-half--first .nav__bg-wings:before {
        bottom: 1px;
        left: 0;
        width: 102vw;
        height: 55vh;
        transform-origin: top left;
        transform: translateX(-1vw) translateX(10px) translateY(100%) translateZ(0) scaleY(0.1); }
      .nav__bg-half--first .nav__bg-wings:after {
        bottom: 0;
        left: 1px;
        width: 55vw;
        height: 102vh;
        transform-origin: left bottom;
        transform: scaleX(0.1) translateX(-100%) translateY(-30px) translateY(1vh) translateZ(0); }
    .nav__bg-half--second {
      top: -40px;
      right: -20px; }
      @media (min-width: 35em) {
        .nav__bg-half--second {
          top: -30px;
          right: -10px; } }
      .nav__bg-half--second .nav__bg-arch {
        left: -200%;
        transform-origin: top right;
        box-shadow: 402px -402px 0 -198.000295523px; }
      .nav__bg-half--second .nav__bg-wings:before {
        top: 1px;
        right: 0;
        width: 102vw;
        height: 55vh;
        transform-origin: bottom right;
        transform: translateX(1vw) translateX(-10px) translateY(-100%) translateZ(0) scaleY(0.1); }
      .nav__bg-half--second .nav__bg-wings:after {
        top: 0;
        right: 1px;
        width: 55vw;
        height: 102vh;
        transform-origin: right top;
        transform: scaleX(0.1) translateX(100%) translateY(30px) translateY(-1vh) translateZ(0); }
  .nav__spotlight-label {
    position: absolute;
    max-height: 8rem;
    max-width: 8rem;
    width: 20vmin;
    height: 20vmin;
    bottom: 0;
    left: 0;
    z-index: 3;
    font-size: 0;
    color: #ffffff00; }
    .nav__spotlight-label.is-inactive {
      pointer-events: none; }
    @media (hover: hover) {
      .nav__spotlight-label:hover .modal-symbol .modal-symbol__half--first {
        flex-basis: 50%;
        max-width: 50%; }
      .nav__spotlight-label:hover .modal-symbol .modal-symbol__half--second {
        max-width: 33%; } }
    .nav__spotlight-label.is-active .modal-symbol .modal-symbol__half--first {
      flex-basis: 50%;
      max-width: 50%; }
    .nav__spotlight-label.is-active .modal-symbol .modal-symbol__half--second {
      max-width: 33%; }
  .nav__symbol {
    position: absolute;
    height: 37px;
    width: 37px;
    z-index: 1;
    color: #0a0506; }
    .nav__symbol:active {
      outline: none !important; }
    .nav__symbol--menu {
      top: 13px;
      right: 10px; }
      @media (min-width: 35em) {
        .nav__symbol--menu {
          top: 18px;
          right: 17px; } }
    .nav__symbol--modal {
      bottom: 11px;
      left: 8px; }
      @media (min-width: 35em) {
        .nav__symbol--modal {
          bottom: 14px;
          left: 14px; } }
  .nav__trigger-label {
    position: absolute;
    height: calc(50px + 5vh);
    width: calc(50px + 5vw);
    max-height: 8rem;
    max-width: 8rem;
    width: 20vmin;
    height: 20vmin;
    z-index: 3;
    top: 0;
    right: 0;
    font-size: 0;
    color: #ffffff00; }
    .nav__trigger-label.is-inactive {
      pointer-events: none; }
    @media (hover: hover) {
      .nav__trigger-label:hover .nav__symbol--menu {
        transform: rotate(-45deg); } }
  .nav__trigger:checked ~ .nav__trigger-label .nav__symbol--menu {
    transform: scaleX(0.7272) scaleY(1) rotate(-180deg);
    opacity: 1; }
    .nav__trigger:checked ~ .nav__trigger-label .nav__symbol--menu:before, .nav__trigger:checked ~ .nav__trigger-label .nav__symbol--menu:after {
      transition: transform .5s, border-radius .4s;
      transform: rotate(-45deg) translateX(0) scale(0.95);
      border-radius: 40%; }
  .nav__trigger:checked ~ .nav__bg-half {
    transition: transform 1.6s cubic-bezier(0.3, 0.5, 0.1, 1) 0.2s; }
    .nav__trigger:checked ~ .nav__bg-half .nav__bg-arch {
      transition: transform 0.6s cubic-bezier(0.1, 0, 0.4, 1) 0s; }
    .nav__trigger:checked ~ .nav__bg-half .nav__bg-wings:before, .nav__trigger:checked ~ .nav__bg-half .nav__bg-wings:after {
      transition: transform 1.6s cubic-bezier(0.3, 0.5, 0.1, 1) 0.2s; }
  .nav__trigger:checked ~ .nav__bg-half--second {
    transform: translateX(-50vw) translateX(39%) translateY(50vh) translateY(-39%) translateZ(0); }
    .nav__trigger:checked ~ .nav__bg-half--second .nav__bg-arch {
      transform: scale(1) translate(-5px, 5px); }
      @media (min-width: 35em) {
        .nav__trigger:checked ~ .nav__bg-half--second .nav__bg-arch {
          transform: scale(1); } }
    .nav__trigger:checked ~ .nav__bg-half--second .nav__bg-wings:before {
      transform: translateX(51vw) translateX(-209.04px) translateX(-10px) translateY(-100%) translateZ(0) scaleY(1); }
    .nav__trigger:checked ~ .nav__bg-half--second .nav__bg-wings:after {
      transform: translateX(100%) translateY(-51vh) translateY(209.04px) translateY(30px) translateZ(0) scaleX(1); }
  .nav__trigger:checked ~ .nav__bg-half--first,
  .nav__trigger:checked ~ .nav__bg-half--first.is-translated {
    transform: translateX(50vw) translateX(-39%) translateY(-50vh) translateY(39%) translateZ(0); }
    .nav__trigger:checked ~ .nav__bg-half--first .nav__bg-arch,
    .nav__trigger:checked ~ .nav__bg-half--first.is-translated .nav__bg-arch {
      transform: scale(1) translate(5px, -5px); }
      @media (min-width: 35em) {
        .nav__trigger:checked ~ .nav__bg-half--first .nav__bg-arch,
        .nav__trigger:checked ~ .nav__bg-half--first.is-translated .nav__bg-arch {
          transform: scale(1); } }
    .nav__trigger:checked ~ .nav__bg-half--first .nav__bg-wings:before,
    .nav__trigger:checked ~ .nav__bg-half--first.is-translated .nav__bg-wings:before {
      transform: translateX(-51vw) translateX(209.04px) translateX(10px) translateY(100%) translateZ(0) scaleY(1); }
    .nav__trigger:checked ~ .nav__bg-half--first .nav__bg-wings:after,
    .nav__trigger:checked ~ .nav__bg-half--first.is-translated .nav__bg-wings:after {
      transform: translateX(-100%) translateY(51vh) translateY(-209.04px) translateY(-30px) translateZ(0) scaleX(1); }
  .nav__trigger:checked:hover ~ .nav__trigger-label .nav__symbol--menu {
    transform: scaleX(0.8363) scaleY(1.15) rotate(-180deg); }
  .nav__menu {
    position: relative;
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: space-around;
    padding: 80px 0; }
    body.js-disabled .nav__menu {
      opacity: 0 !important;
      transition: opacity 1.2s 0s !important; }
    body.js-disabled .nav__trigger:checked ~ .nav__menu {
      opacity: 1 !important;
      transition: opacity 1s .8s !important; }
  .nav__item {
    color: #0a0506;
    font-size: 9.6vmin;
    font-weight: 300;
    letter-spacing: 1.2vmin;
    transition: transform 1s, background-color .7s, color .7s;
    flex: 1;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .nav__item a, .nav__item label {
      height: 100%;
      width: 100%; }
    .nav__item .louv__molecule {
      transform: scale(0.625); }
    @media (hover: hover) {
      .nav__item:hover .louv__molecule, .nav__item:focus .louv__molecule {
        transform: translateX(-3vw) scale(1); } }
    @media (hover: hover) {
      .nav__item.inverts-on-hover:hover {
        color: #fffbfc;
        background-color: #003768; } }
    @media (hover: hover) {
      body.js-disabled .nav__item:hover {
        color: #fffbfc;
        background-color: #003768; } }
    .nav__item.has-background {
      background-image: linear-gradient(to bottom, transparent 11%, #271c0014);
      background-image: linear-gradient(to bottom, transparent 11%, rgba(10, 5, 6, 0.04)); }
  .nav__item-louv {
    height: 100%;
    width: 100%; }

body:not(.js-disabled) .nav.is-hidden .nav__bg-half--first {
  transform: translate(-15vw, 15vh); }

body:not(.js-disabled) .nav.is-hidden .nav__bg-half--second {
  transform: translate(15vw, -15vh); }

body:not(.js-disabled) .nav.is-hidden .nav__symbol {
  pointer-events: none; }

.works {
  transition: opacity .5s;
  color: #1b0e10;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: calc(1.2rem + .6vmin); }
  .works__container {
    height: 100%;
    background: #fafdff;
    background-image: linear-gradient(45deg, #c7e5ff, #e6f3ff 25%, #f5faff 75%, #c7e5ff); }
    .works__container:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: black;
      transition: opacity 0s 1.6s; }
  .works__gallery {
    height: 100%;
    justify-content: flex-start;
    display: block;
    z-index: 1; }
  .works__article {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; }
    .works__article > .louv__molecule {
      height: 100% !important;
      width: 100% !important; }
  .works__nav.is-hidden .nav-btn--prev {
    transform: translate3d(-100%, 50%, 0); }
  .works__nav.is-hidden .nav-btn--next {
    transform: translate3d(100%, 50%, 0); }

.spotlight__container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  perspective: 100px; }

.spotlight__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 80%;
  height: 80%;
  padding: 15vh 10% 15vh;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center; }
  @media screen and (min-aspect-ratio: 4 / 3) {
    .spotlight__stage {
      padding: 20vh 10% 15vh; } }

.spotlight__magic-screen {
  z-index: -1;
  will-change: transform; }

.spotlight__headline-louv {
  height: calc(1rem + 6vmin + 1em); }

.spotlight__headline {
  height: auto;
  font-size: calc(1rem + 6vmin);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: .3em;
  margin-bottom: 1em;
  text-align: center;
  color: #33faed;
  text-shadow: 0.04em 0.04em 0px #0000001f; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
    .spotlight__headline {
      background: #33faed;
      -webkit-background-clip: text;
              background-clip: text;
      color: rgba(255, 255, 255, 0.3);
      display: inline; } }
  .spotlight__headline .louv__molecule {
    will-change: filter;
    -webkit-filter: blur(3px);
            filter: blur(3px); }
    @supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
      .spotlight__headline .louv__molecule {
        background: #33faed;
        -webkit-background-clip: text;
                background-clip: text;
        color: rgba(255, 255, 255, 0.3);
        display: inline; } }

.spotlight__texts-wrapper {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: calc(1.4rem + 1.5vmin);
  letter-spacing: .08em;
  color: #affff8;
  text-shadow: 3px 3px 1vw #00136878;
  line-height: 1.3;
  max-width: 500px; }
  .spotlight__texts-wrapper.is-scrollable {
    overflow: hidden; }
    .spotlight__texts-wrapper.is-scrollable .spotlight__texts {
      overflow: hidden;
      overflow-y: scroll; }
  .spotlight__texts-wrapper .louv__molecule {
    -webkit-filter: blur(3px);
            filter: blur(3px); }

.spotlight__texts {
  height: 100%;
  width: 100%; }

.spotlight__texts-louv {
  flex-flow: column nowrap; }

.spotlight__text-item {
  margin: 0;
  width: 100%;
  text-align: center; }

.spotlight .nav-btn {
  color: #fffbfc;
  bottom: 15%; }
  .spotlight .nav-btn--prev {
    left: calc(50% - 15vmin); }
  .spotlight .nav-btn--next {
    left: 50%; }

.spotlight__nav.is-hidden .nav-btn {
  -webkit-filter: blur(5px);
          filter: blur(5px); }

.spotlight__nav.is-hidden .nav-btn--prev {
  transform: translate3d(-100%, 50%, 0); }

.spotlight__nav.is-hidden .nav-btn--next {
  transform: translate3d(100%, 50%, 0); }

.intro {
  background: #0a0506;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.contact__container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap;
  background: #0a0506; }
  @media screen and (min-aspect-ratio: 4 / 3) {
    .contact__container {
      flex-direction: row;
      height: 100%; } }

.contact__contact-word {
  font-weight: 400;
  font-size: inherit;
  transform: rotateX(0deg) rotateY(0deg) translateZ(-200px); }

.contact__stage {
  position: relative;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.contact__texts {
  padding: 10% 10% 10% 10%;
  flex-basis: 50%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start; }
  @media screen and (min-aspect-ratio: 4 / 3) {
    .contact__texts {
      padding-left: 0; } }

.contact__headline {
  font-size: calc(2rem + 1vmin);
  display: none; }

.contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(1rem + 1vw);
  line-height: 1.3;
  color: #fffbfc;
  text-shadow: 0.04em 0.04em 0 black;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: flex-start;
  flex: 1 0 auto;
  width: 100%; }

.contact__list-item:not(:last-child) {
  margin-bottom: 2em;
  width: calc(100% - 2em - 2rem); }

.contact__list-item:nth-child(2) {
  margin-left: 1em; }

.contact__list-item:nth-child(3) {
  margin-left: 2em; }

.contact__list-item:last-child {
  width: 100%;
  text-align: right; }

.contact__magic-screen {
  width: 40vmin;
  height: 40vmin;
  box-shadow: 0 0 8vmin 0vmin #949494;
  box-shadow: 0 0 12vmin 0vmin #7b7b7b;
  background: radial-gradient(ellipse at top, #e402ff, transparent), radial-gradient(ellipse at bottom, #00157b, transparent), black;
  background: radial-gradient(ellipse at top, #9100a2, transparent), radial-gradient(ellipse at bottom, #00157b, transparent), #ffffff2e; }

.contact .louv {
  perspective: 500px; }

.contact__bg {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100vh;
  width: 100vw;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 251, 252, 0.2);
  font-size: 20vw;
  letter-spacing: .15em; }

.contact__email {
  font-size: calc(1rem + 2vw);
  color: white;
  text-align: center;
  margin: 0;
  transform: rotateX(0deg) rotateY(0deg); }
  .contact__email [data-word] {
    display: inline-flex; }
  .contact__email [data-char] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    margin: .35em;
    transition: -webkit-filter 3s ease-out opacity 3s ease-out;
    transition: filter 3s ease-out opacity 3s ease-out;
    transition: filter 3s ease-out opacity 3s ease-out, -webkit-filter 3s ease-out opacity 3s ease-out;
    box-shadow: 0 0 10px -1px; }

.skills__container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  background: #0a0506; }

.skills__stage {
  position: relative;
  width: 80%;
  max-width: 600px;
  overflow: hidden;
  flex: 1; }

.skills__subtly {
  width: calc(100% + 20px);
  padding-right: 20px;
  overflow: hidden;
  overflow-y: scroll;
  height: 100%;
  letter-spacing: .02em;
  padding-bottom: 5rem; }
  .skills__subtly [data-subtly] {
    background: transparent;
    background: none;
    transition: max-height 1s cubic-bezier(0.2, 0, 0.5, 1);
    color: #f9f6f3; }

.skills__head {
  width: 80%;
  max-width: 600px;
  text-transform: uppercase; }

.skills__headline {
  font-size: calc(2rem + 2vw);
  color: #fffbfc;
  margin: 2em 0 0;
  letter-spacing: .05em; }

.skills__tagline {
  font-size: calc(1.2rem + 1vw);
  margin: 1em 0 0;
  color: #e0d8cf;
  letter-spacing: .05em;
  line-height: 1.3; }

.skills__dividing-line {
  height: 3px;
  width: 20%;
  min-width: 4rem;
  background: #e0d8cf;
  margin: 5vh 0; }

.skills.light .skills__container {
  background: white; }

.skills.light .skills__headline {
  color: #0a0506; }

.skills.light .skills__subtly [data-subtly] {
  color: #0a0506; }
  .skills.light .skills__subtly [data-subtly] .has-sub.is-opened > a {
    color: #0030c1; }
  .skills.light .skills__subtly [data-subtly] .has-sub > a ~ ul > li:not(:last-child):after {
    background: linear-gradient(90deg, transparent 10%, #5b5e75 60%, transparent); }

.skills.light .skills__tagline {
  color: #251700; }

.skills.light .skills__dividing-line {
  background: #251700; }