@import url("https://p.typekit.net/p.css?s=1&k=pmk7spq&ht=tk&f=579.37986.37989.49655.37991.37994.49659.44283&a=5817904&app=typekit&e=css");

@font-face {
    font-family: "anonymous-pro";
    src: url(https://use.typekit.net/af/d359b5/000000000000000077359719/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/d359b5/000000000000000077359719/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/d359b5/000000000000000077359719/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-headline";
    src: url(https://use.typekit.net/af/ba6d2a/00000000000000007735f3b1/30/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/ba6d2a/00000000000000007735f3b1/30/d?subset_id=2&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/ba6d2a/00000000000000007735f3b1/30/a?subset_id=2&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-headline";
    src: url(https://use.typekit.net/af/377e72/00000000000000007735f3ad/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff2"), url(https://use.typekit.net/af/377e72/00000000000000007735f3ad/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("woff"), url(https://use.typekit.net/af/377e72/00000000000000007735f3ad/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 300;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-headline";
    src: url(https://use.typekit.net/af/2b0973/00000000000000007735f3af/30/l?subset_id=2&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/2b0973/00000000000000007735f3af/30/d?subset_id=2&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/2b0973/00000000000000007735f3af/30/a?subset_id=2&fvd=n6&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-text";
    src: url(https://use.typekit.net/af/551e1e/00000000000000007735f3bb/30/l?subset_id=2&fvd=i4&v=3) format("woff2"), url(https://use.typekit.net/af/551e1e/00000000000000007735f3bb/30/d?subset_id=2&fvd=i4&v=3) format("woff"), url(https://use.typekit.net/af/551e1e/00000000000000007735f3bb/30/a?subset_id=2&fvd=i4&v=3) format("opentype");
    font-display: auto;
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-text";
    src: url(https://use.typekit.net/af/f10c80/00000000000000007735f3ba/30/l?subset_id=2&fvd=n4&v=3) format("woff2"), url(https://use.typekit.net/af/f10c80/00000000000000007735f3ba/30/d?subset_id=2&fvd=n4&v=3) format("woff"), url(https://use.typekit.net/af/f10c80/00000000000000007735f3ba/30/a?subset_id=2&fvd=n4&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "guyot-text";
    src: url(https://use.typekit.net/af/0e7b54/00000000000000007735f3be/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff2"), url(https://use.typekit.net/af/0e7b54/00000000000000007735f3be/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("woff"), url(https://use.typekit.net/af/0e7b54/00000000000000007735f3be/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 600;
    font-stretch: normal;
  }
  
  @font-face {
    font-family: "arpona";
    src: url(https://use.typekit.net/af/e6b5f7/00000000000000007735c8fa/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff2"), url(https://use.typekit.net/af/e6b5f7/00000000000000007735c8fa/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("woff"), url(https://use.typekit.net/af/e6b5f7/00000000000000007735c8fa/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3) format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal;
  }
  
  .tk-anonymous-pro {
    font-family: "anonymous-pro", monospace;
  }
  
  .tk-guyot-headline {
    font-family: "guyot-headline", sans-serif;
  }
  
  .tk-guyot-text {
    font-family: "guyot-text", sans-serif;
  }
  
  .tk-arpona {
    font-family: "arpona", serif;
  }
  
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  u,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    border-style: solid;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  /* HTML5 display-role reset for older browsers */
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  
  body {
    line-height: 1;
    overflow-x: hidden;
  }

  b {
    font-style: bold;
  }

  i {
    font-style: italic;
  }

  ol,
  ul {
    list-style: none;
  }
  
  blockquote,
  q {
    quotes: none;
  }
  
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 1em;
  }
  
  input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  html {
    font-size: 0.5952380952vw;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
  }
  
  @media screen and (max-width: 1023px) and (orientation: portrait) {
    html {
      font-size: 1.1111111111vh;
    }
  }
  
  @media screen and (max-width: 1023px) and (orientation: landscape) {
    html {
      font-size: 1.1764705882vw;
    }
  }
  
  body {
    font-family: "guyot-text", serif;
    color: white;
    font-size: 1.8rem;
    font-weight: 400;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  @media screen and (max-width: 1023px) {
    body {
      font-size: 1.4rem;
    }
  }
  
  html,
  body {
    background-color: lightgray;
    height: 100vh;
    max-width: 100vw;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  img,
  picture {
    pointer-events: none;
  }
  
  *,
  *::before,
  *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  input,
  button,
  select,
  textarea {
    font-family: "guyot-text", serif;
    color: white;
    font-size: 1.8rem;
    font-weight: 400;
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    border: none;
    border-radius: 0;
    outline: none;
    background: transparent;
  }
  
  label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  @media screen and (max-width: 1023px) {
    .u-hideMobile {
      display: none !important;
    }
  }
  
  @media screen and (min-width: 1023px) {
    .u-showMobile {
      display: none !important;
    }
  }
  
  .ios .hide-ios {
    display: none;
  }
  
  html:not(.ios) .show-ios {
    display: none;
  }
  
  @media screen and (max-width: 1023px) {
    * {
      -webkit-filter: none !important;
      filter: none !important;
    }
  }
  
  :root {
    --app-height: 100%;
  }
  
  #container {
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
  
  @media screen and (max-width: 1023px) and (orientation: portrait) {
    #container {
      display: none;
    }
  }
  
  #main {
    width: calc(100% - 6.5rem);
    margin-left: 6.5rem;
    height: 100%;
    position: relative;
  }
  
  @media screen and (max-width: 1023px) {
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      height: var(--app-height);
    }
  
    html,
    body {
      -ms-touch-action: pan-y;
      touch-action: pan-y;
      -ms-touch-action: none;
      touch-action: none;
    }
  
    html {
      height: 100%;
      width: 100vw;
    }
  }
  
  @media screen and (max-width: 1023px) and (max-width: 1023px) and (orientation: portrait) {
    html {
      height: 0;
    }
  }
  
  @media screen and (max-width: 1023px) {
    #container,
    #nav {
      height: var(--app-height);
    }
  }
  
  @media screen and (max-width: 1023px) {
    html.mobfull html,
    html.mobfull body {
      -ms-touch-action: none;
      touch-action: none;
      overflow: hidden;
    }
  }
  
  .h1,
  .h2,
  .h3 {
    text-transform: uppercase;
    font-family: "guyot-headline", serif;
    line-height: 1.1;
    letter-spacing: 0.2em;
    font-weight: 300;
  }
  
  .h1 {
    font-size: 7.2rem;
    margin-bottom: 2rem;
  }
  
  .h2 {
    font-size: 4rem;
    margin-bottom: 2rem;
    letter-spacing: 0.3em;
  }
  
  .subheading {
    text-transform: uppercase;
    font-family: "guyot-headline", serif;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: 0.2em;
    margin-bottom: 2rem;
  }
  
  .subheading--small {
    font-size: 1.3rem;
  }
  
  .body,
  .plaintext,
  .richtext {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  
  .box-heading {
    font-size: 2.2rem;
    font-family: "guyot-headline", serif;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    display: block;
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 1.4;
  }
  
  @media screen and (max-width: 1023px) {
    .box-heading {
      font-size: 4.42vh;
      margin-bottom: 3.4vh;
    }
  }
  
  @media screen and (max-width: 1023px) and (orientation: portrait) {
    .box-heading {
      font-size: 2.3rem;
    }
  }
  
  .box-body {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #E3E3E3;
    margin-bottom: 2rem;
  }
  
  @media screen and (max-width: 1023px) {
    .box-body {
      font-size: 3.06vh;
      margin-bottom: 3.4vh;
    }
  }
  
  @media screen and (max-width: 1023px) and (orientation: portrait) {
    .box-body {
      font-size: 1.7rem;
    }
  }

  
.img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

.transition-main {
  border-color: red;
  -webkit-transition: border-color 800ms, opacity 800ms 200ms;
  -o-transition: border-color 800ms, opacity 800ms 200ms;
  transition: border-color 800ms, opacity 800ms 200ms;
}

html.is-animating .transition-main,
html.stop-animation .transition-main,
html.loading-assets .transition-main {
  border-color: blue;
  -webkit-transition: border-color 800ms;
  -o-transition: border-color 800ms;
  transition: border-color 800ms;
}

@media screen and (max-width: 1023px) {
  html.is-animating .transition-main,
  html.stop-animation .transition-main,
  html.loading-assets .transition-main {
    -webkit-transition: border-color 1200ms;
    -o-transition: border-color 1200ms;
    transition: border-color 1200ms;
  }
}

html.show-spinner .explore,
html.loading-assets .explore {
  opacity: 0;
}

html.show-spinner .site-spinner,
html.loading-assets .site-spinner {
  opacity: 1;
  -webkit-transition: opacity 100ms 100ms;
  -o-transition: opacity 100ms 100ms;
  transition: opacity 100ms 100ms;
}

html.is-animating.to-explore:not(.to-menu) .explore {
  opacity: 0;
  -webkit-transition: opacity 700ms;
  -o-transition: opacity 700ms;
  transition: opacity 700ms;
}

html:not(.no-anima) .fadeUp.anima {
  opacity: 0;
  -webkit-transform: translateY(8rem);
  -ms-transform: translateY(8rem);
  transform: translateY(8rem);
}

html:not(.no-anima) .fadeUp.anima.in {
  opacity: 1;
  -webkit-transform: translateY(0rem);
  -ms-transform: translateY(0rem);
  transform: translateY(0rem);
  -webkit-transition: opacity 600ms linear, -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: opacity 600ms linear, -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  -o-transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
}

html:not(.no-anima) .fade.anima {
  opacity: 0;
}

html:not(.no-anima) .fade.anima.in {
  opacity: 1;
  -webkit-transition: opacity 600ms linear;
  -o-transition: opacity 600ms linear;
  transition: opacity 600ms linear;
}

@media screen and (max-width: 1023px) {
  html:not(.no-anima) .mobFadeUp.anima {
    opacity: 0;
    -webkit-transform: translateY(8rem);
    -ms-transform: translateY(8rem);
    transform: translateY(8rem);
  }

  html:not(.no-anima) .mobFadeUp.anima.in {
    opacity: 1;
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
    -webkit-transition: opacity 600ms linear, -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms linear, -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms linear, transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
}

.img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
}

lottie-player {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  pointer-events: none;
}

.baton {
  height: 1px;
  background-color: white;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: inline-block;
  position: relative;
}

.baton:before,
.baton:after {
  content: "";
  position: absolute;
  height: 3px;
  width: 3px;
  top: -1px;
  background: white;
  border-radius: 1.5px;
}

.baton:before {
  left: -1px;
}

.baton:after {
  right: -1px;
}

.baton--small:before,
.baton--small:after {
  height: 3px;
  width: 3px;
  top: -1px;
  border-radius: 1.5px;
}

.baton--small:before {
  left: -1px;
}

.baton--small:after {
  right: -1px;
}

.baton--vert {
  width: 1px;
  height: 100%;
}

.baton--vert:before {
  top: auto;
  bottom: -1px;
}

.baton--vert.baton--small:before {
  bottom: -1px;
}

.baton--dark {
  background: #474747;
  opacity: 0.3;
}

.baton--dark:before,
.baton--dark:after {
  background: #474747;
}

.layeredImage {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.layeredImage__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.layeredImage__layer img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1.2rem 1rem;
  pointer-events: none;
  font-size: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.border__top,
.border__mid,
.border__bottom {
  display: block;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.border__mid {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.border__j,
.border__m {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.border__l,
.border__r,
.border__c,
.border__j {
  background-repeat: no-repeat;
}

.border__l,
.border__r,
.border__c {
  width: 15rem;
}

.border__top,
.border__bottom {
  height: 10rem;
}

.border__l,
.border__r,
.border__c,
.border__j {
  background-image: url(images/borders/border-all-light.png);
  background-size: 57.5rem 57.5rem;
}

.border__top .border__j {
  background-position: -1916.6666666667rem 0;
  background-size: 5750rem 57.5rem;
}

.border__top .border__c {
  background-position: -21.25rem 0;
}

.border__top .border__r {
  background-position: -42.5rem 0;
}

.border__bottom .border__j {
  background-position: -1916.6666666667rem -47.5rem;
  background-size: 5750rem 57.5rem;
}

.border__bottom .border__l {
  background-position: 0 -47.5rem;
}

.border__bottom .border__c {
  background-position: -21.25rem -47.5rem;
}

.border__bottom .border__r {
  background-position: -42.5rem -47.5rem;
}

.border__mid .border__l {
  background-position: 0 -1916.6666666667rem;
  background-size: 57.5rem 5750rem;
}

.border__mid .border__r {
  background-position: -42.5rem -1916.6666666667rem;
  background-size: 57.5rem 5750rem;
}

@media screen and (max-width: 1023px) {
  .border {
    padding: 0.6rem 0.5rem;
  }

  .border__l,
  .border__r,
  .border__c {
    width: 8rem;
  }

  .border__top,
  .border__bottom {
    height: 8rem;
  }

  .border__l,
  .border__r,
  .border__c,
  .border__j {
    background-image: url(images/borders/border-all-light.png);
    background-size: 40rem 40rem;
  }

  .border__top .border__j {
    background-position: -1333.3333333333rem 0;
    background-size: 4000rem 40rem;
  }

  .border__top .border__c {
    background-position: -16rem 0;
  }

  .border__top .border__r {
    background-position: -32rem 0;
  }

  .border__bottom .border__j {
    background-position: -1333.3333333333rem -32rem;
    background-size: 4000rem 40rem;
  }

  .border__bottom .border__l {
    background-position: 0 -32rem;
  }

  .border__bottom .border__c {
    background-position: -16rem -32rem;
  }

  .border__bottom .border__r {
    background-position: -32rem -32rem;
  }

  .border__mid .border__l {
    background-position: 0 -1333.3333333333rem;
    background-size: 40rem 4000rem;
  }

  .border__mid .border__r {
    background-position: -32rem -1333.3333333333rem;
    background-size: 40rem 4000rem;
  }
}

.border--intro {
  padding: 0;
}

.border--intro .border__l,
.border--intro .border__r,
.border--intro .border__c {
  width: 29rem;
}

.border--intro .border__top,
.border--intro .border__bottom {
  height: 25rem;
}

.border--intro .border__l,
.border--intro .border__r,
.border--intro .border__c,
.border--intro .border__j {
  background-image: url(images/borders/intro-screen-frame.png);
  background-size: 168rem 100rem;
}

.border--intro .border__top .border__j {
  background-position: -5600rem 0;
  background-size: 16800rem 100rem;
}

.border--intro .border__top .border__c {
  background-position: -69.5rem 0;
}

.border--intro .border__top .border__r {
  background-position: -139rem 0;
}

.border--intro .border__bottom .border__j {
  background-position: -5600rem -75rem;
  background-size: 16800rem 100rem;
}

.border--intro .border__bottom .border__l {
  background-position: 0 -75rem;
}

.border--intro .border__bottom .border__c {
  background-position: -69.5rem -75rem;
}

.border--intro .border__bottom .border__r {
  background-position: -139rem -75rem;
}

.border--intro .border__mid .border__l {
  background-position: 0 -3333.3333333333rem;
  background-size: 168rem 10000rem;
}

.border--intro .border__mid .border__r {
  background-position: -139rem -3333.3333333333rem;
  background-size: 168rem 10000rem;
}

@media screen and (max-width: 1023px) {
  .border--intro .border__l,
  .border--intro .border__r,
  .border--intro .border__c {
    width: 15rem;
  }

  .border--intro .border__top,
  .border--intro .border__bottom {
    height: 13rem;
  }

  .border--intro .border__l,
  .border--intro .border__r,
  .border--intro .border__c,
  .border--intro .border__j {
    background-image: url(images/borders/intro-screen-frame.png);
    background-size: 84rem 50rem;
  }

  .border--intro .border__top .border__j {
    background-position: -2800rem 0;
    background-size: 8400rem 50rem;
  }

  .border--intro .border__top .border__c {
    background-position: -34.5rem 0;
  }

  .border--intro .border__top .border__r {
    background-position: -69rem 0;
  }

  .border--intro .border__bottom .border__j {
    background-position: -2800rem -37rem;
    background-size: 8400rem 50rem;
  }

  .border--intro .border__bottom .border__l {
    background-position: 0 -37rem;
  }

  .border--intro .border__bottom .border__c {
    background-position: -34.5rem -37rem;
  }

  .border--intro .border__bottom .border__r {
    background-position: -69rem -37rem;
  }

  .border--intro .border__mid .border__l {
    background-position: 0 -1666.6666666667rem;
    background-size: 84rem 5000rem;
  }

  .border--intro .border__mid .border__r {
    background-position: -69rem -1666.6666666667rem;
    background-size: 84rem 5000rem;
  }
}

.border__corner {
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  min-width: 7.5rem;
  min-height: 7.5rem;
}

.border__corner img {
  width: 100%;
  height: auto;
}

.border__center {
  min-width: 11rem;
}

.border__center img {
  width: 100%;
  height: auto;
}

.border__line {
  font-size: 0;
  padding: 0.7rem 0.2rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2rem;
}

.border__line .border__lineCap:last-child {
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.border__line .baton {
  max-width: calc(100% - 4rem);
  margin-left: 2rem;
}

.border__lineCen,
.border__lineCap {
  display: inline-block;
  position: relative;
}

.border__lineCen {
  width: 100%;
  height: 100%;
  margin: 0 -1px;
}

.border__lineCap {
  height: 100%;
}

.border__content {
  pointer-events: auto;
  padding: 0 2rem;
}

.border__row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.border__row--top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.border__row--top .border__corner:last-child {
  -webkit-transform: translateX(100%) rotate(90deg);
  -ms-transform: translateX(100%) rotate(90deg);
  transform: translateX(100%) rotate(90deg);
}

.border__row--mid {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  height: 100%;
}

.border__row--mid .border__line {
  padding: 0.2rem 0.7rem;
  width: 2rem;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.border__row--mid .border__line .baton {
  width: 1px;
  height: 100%;
  max-width: 100%;
  max-height: calc(100% - 4rem);
  margin-left: 0;
  margin-top: 2rem;
}

.border__row--mid .border__line .baton:after {
  top: auto;
  bottom: -1px;
}

.border__row--mid .border__line:last-child {
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}

.border__row--mid .border__line .border__lineCen {
  width: 100%;
  height: 100%;
  margin: -1px 0;
}

.border__row--mid .border__line .border__lineCap {
  width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
}

.border__row--mid .border__line .border__lineCap:first-child {
  -webkit-transform: scaleX(1) scaleY(-1);
  -ms-transform: scaleX(1) scaleY(-1);
  transform: scaleX(1) scaleY(-1);
}

.border__row--mid .border__line .border__lineCap:last-child {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.border__row--bot {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.border__row--bot .border__corner:first-child {
  -webkit-transform: translateY(100%) rotate(-90deg);
  -ms-transform: translateY(100%) rotate(-90deg);
  transform: translateY(100%) rotate(-90deg);
}

.border__row--bot .border__corner:last-child {
  -webkit-transform: translateX(100%) translateY(100%) rotate(180deg);
  -ms-transform: translateX(100%) translateY(100%) rotate(180deg);
  transform: translateX(100%) translateY(100%) rotate(180deg);
}

.border__row--bot .border__line {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.border--op70 .border__line,
.border--op70 .border__center,
.border--op70 .border__corner,
.border--op70 .border__top,
.border--op70 .border__mid,
.border--op70 .border__bottom {
  opacity: 0.7;
}

.border--op40 .border__line,
.border--op40 .border__center,
.border--op40 .border__corner,
.border--op40 .border__top,
.border--op40 .border__mid,
.border--op40 .border__bottom {
  opacity: 0.4;
}

.border--op20 .border__line,
.border--op20 .border__center,
.border--op20 .border__corner,
.border--op20 .border__top,
.border--op20 .border__mid,
.border--op20 .border__bottom {
  opacity: 0.2;
}

.border--sides .border__l,
.border--sides .border__r,
.border--sides .border__c,
.border--sides .border__j {
  background-image: url(images/borders/border-sides-light.png);
}

.border--dark {
  -webkit-filter: invert(1) !important;
  filter: invert(1) !important;
  opacity: 0.25;
}

.button {
  position: relative;
  min-width: 10rem;
  height: 4rem;
  border-radius: 2rem;
  padding: 0.1rem 1.5rem 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: white;
  cursor: pointer;
}

.button + .button {
  margin-left: 3rem;
}

.button__inner {
  font-family: "arpona", serif;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 0 1rem;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  color: transparent;
  overflow: hidden;
}

.button__inner:before,
.button__inner:after {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 1rem;
}

.button__inner:before {
  color: black;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition: color 200ms linear;
  -o-transition: color 200ms linear;
  transition: color 200ms linear;
}

.button__inner:after {
  color: black;
  -webkit-transform: translateY(1em);
  -ms-transform: translateY(1em);
  transform: translateY(1em);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: color 200ms linear;
  -o-transition: color 200ms linear;
  transition: color 200ms linear;
}

.button__icon {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.2rem;
  margin-right: 0.5rem;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  -o-transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
}

.button__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: -webkit-transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  -o-transition: transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
}

.button__bg:before {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: -0.2rem;
  height: calc(100% + 0.4rem);
  width: calc(100% + 0.4rem);
  border-radius: 2.15rem;
  background: white;
}

.button__bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #E3E3E3;
  border-radius: 2.35rem;
}

.button:hover .button__inner::before {
  -webkit-transform: translateY(-1em);
  -ms-transform: translateY(-1em);
  transform: translateY(-1em);
  -webkit-transition: opacity 200ms linear, color 200ms linear, -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: opacity 200ms linear, color 200ms linear, -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  -o-transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms linear, color 200ms linear;
  transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms linear, color 200ms linear;
  transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms linear, color 200ms linear, -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
}

.button:hover .button__inner:after {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  -webkit-transition: opacity 200ms 100ms linear, color 200ms linear, -webkit-transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  transition: opacity 200ms 100ms linear, color 200ms linear, -webkit-transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  -o-transition: transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms 100ms linear, color 200ms linear;
  transition: transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms 100ms linear, color 200ms linear;
  transition: transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 200ms 100ms linear, color 200ms linear, -webkit-transform 400ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
}

.button:hover .button__bg {
  -webkit-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
}

.button:hover .button__icon {
  -webkit-transform: translateX(0.25rem);
  -ms-transform: translateX(0.25rem);
  transform: translateX(0.25rem);
}

.button:active .button__bg {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: -webkit-transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: -webkit-transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  -o-transition: transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  transition: transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
}

.button--plain .button__inner:before,
.button--plain .button__inner:after {
  color: white;
}

.button--plain .button__bg:before {
  display: none;
}

.button--plain .button__bg:after {
  border-color: #D9D9D9;
  top: -0.2rem;
  left: -0.2rem;
  height: calc(100% + 0.4rem - 4px);
  width: calc(100% + 0.4rem - 4px);
}

.button--min {
  min-width: 15rem;
}

.button--square {
  padding: 0.1rem 1rem 0;
}

.button--square .button__inner:before,
.button--square .button__inner:after {
  color: white;
}

.button--square .button__bg:before {
  border-radius: 0;
  background-color: #525252;
  -webkit-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.button--square .button__bg:after {
  border-radius: 0;
  border-color: #343434;
  background-color: #525252;
  -webkit-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.button--square:hover .button__bg:before {
  background-color: white;
}

.button--square:hover .button__bg:after {
  background-color: white;
}

.button--square:hover .button__inner:before,
.button--square:hover .button__inner:after {
  color: black;
}

@media screen and (max-width: 1023px) {
  .button {
    height: 7.82vh;
    border-radius: 4.25vh;
    min-width: 27.2vh;
    padding: 0 2.55vh;
  }

  .button .button__bg::before {
    border-radius: 4.25vh;
  }

  .button .button__bg::after {
    border-width: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 4.25vh;
  }

  .button .button__icon {
    margin-right: 0.34vh;
    width: 3.74vh;
    height: 3.74vh;
  }

  .button .button__inner {
    font-size: 2.72vh;
  }

  .button.button--plain .button__bg:after {
    height: calc(100% + 0.4rem - 2px);
    width: calc(100% + 0.4rem - 2px);
  }

  .button.button--icon {
    padding: 0 1.7vh 0 3.23vh;
  }

  .button + .button {
    margin-left: 3.4vh;
  }
}

.nav {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color 200ms linear, opacity 200ms linear;
    -o-transition: color 200ms linear, opacity 200ms linear;
    transition: color 200ms linear, opacity 200ms linear;
    font-family: "guyot-headline", serif;
    overflow: hidden;
  }
  
  .nav > * {
    pointer-events: auto;
  }
  
  .nav__sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 6.5rem;
    height: 100vh;
    padding: 1.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 7;
    border-right: 1px solid rgba(71, 71, 71, 0.4);
  }
  
  .nav__sidebar .baton {
    opacity: 0.1;
  }
  
  .nav__sidebarSpacer {
    height: 1px;
    width: 4.75rem;
    background: rgba(71, 71, 71, 0.4);
    margin: 1.4rem 0;
  }
  
  .nav__sidebarLink {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    height: 3.75rem;
  }
  
  .nav__sidebarLink + .nav__sidebarSpacer {
    visibility: hidden;
    margin-bottom: 0;
  }
  
  .nav__sidebarLink + .nav__sidebarLink {
    margin-top: 1rem;
  }
  
  @media (hover: hover) {
    .nav__sidebarLink:hover .nav__sidebarIcon {
      border-color: white;
    }
  }
  
  .nav__sidebarLink.active .nav__sidebarIcon {
    border-color: white;
    background-color: rgba(217, 217, 217, 0.15);
  }
  
  .nav__sidebarLink .sspan {
    padding-top: 1em;
    font-size: 1em;
    margin-top: 1em;
  }
  .nav__sidebarIcon {
    width: 2.4rem;
    height: 2.4rem;
    min-height: 2.4rem;
    border-radius: 100%;
    border: 1px solid #474747;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: border 100ms linear, background 200ms linear;
    -o-transition: border 100ms linear, background 200ms linear;
    transition: border 100ms linear, background 200ms linear;
  }
  
  .nav__sidebarIcon img {
    height: 1.4rem;
    width: auto;
    -webkit-transition: -webkit-filter 200ms linear;
    transition: -webkit-filter 200ms linear;
    -o-transition: filter 200ms linear;
    transition: filter 200ms linear;
    transition: filter 200ms linear, -webkit-filter 200ms linear;
  }
  
  .nav__sidebarTitle {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    margin: 1.5rem 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-family: "guyot-headline", serif;
    letter-spacing: 0.3rem;
  }
  .nav__sideBlock {
    position: absolute;
    top: 0;
    left: 0;
    width: 65rem;
    height: 100vh;
    z-index: 5;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0.1);
    -ms-transform: scaleX(0.1);
    transform: scaleX(0.1);
    background: #222222;
  }
  
  .nav__loadBlock {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #222222;
    z-index: 4;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: opacity 1ms 800ms, -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1ms 800ms, -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 800ms;
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 800ms;
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 800ms, -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    opacity: 0;
  }
  
  .nav__overlay {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #343434;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
  }
  
  .nav__toggle {
    z-index: 10;
    margin-bottom: 0rem;
    padding: 1rem;
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .nav__toggle:hover .nav__toggleInner {
      -webkit-filter: invert(1);
      filter: invert(1);
      background: black;
    }
  
    .nav__toggle:hover .nav__toggleInner:after {
      -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
  
  .nav__toggleInner {
    background: #222222;
    width: 3.85rem;
    height: 3.85rem;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transition: background 200ms linear, -webkit-filter 100ms linear;
    transition: background 200ms linear, -webkit-filter 100ms linear;
    -o-transition: filter 100ms linear, background 200ms linear;
    transition: filter 100ms linear, background 200ms linear;
    transition: filter 100ms linear, background 200ms linear, -webkit-filter 100ms linear;
  }
  
  .nav__toggleInner:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 100%;
    border: 1px solid #474747;
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .nav__settingsToggle {
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .nav__settingsToggle:hover .nav__sidebarIcon {
      border-color: white;
    }
  }
  
  .nav__settings {
    position: absolute;
    bottom: 0rem;
    left: 6.5rem;
    width: 29rem;
    min-height: 10rem;
    height: auto;
    padding: 2.2rem 3.4rem 3rem 3.4rem;
    background: #343434;
    z-index: 1;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .nav__settings:after {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: calc(100% - 1.2rem - 4px);
    height: calc(100% - 1.2rem - 4px);
    border: 2px solid #565656;
    pointer-events: none;
  }
  
  .nav__settingsTitle {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1.4rem;
    color: #cbcbcb;
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;
  }
  
  .nav__settingsRow + .nav__settingsRow {
    margin-top: 1.5rem;
  }
  
  .nav__hamburger {
    position: relative;
    display: inline-block;
    width: 1.6rem;
    height: 8px;
  }
  
  .nav__hamburgerLine {
    height: 1px;
    width: 100%;
    background: white;
    position: absolute;
    top: 3px;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .nav__hamburgerLine--top {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }
  
  .nav__hamburgerLine--middle {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  
  .nav__hamburgerLine--bottom {
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }
  
  .nav__menu {
    position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
  }
  
  .nav__links {
    position: absolute;
    top: 0;
    left: 6.5rem;
    width: 58.5rem;
    height: 100%;
    z-index: 6;
    font-family: "guyot-headline", serif;
    font-weight: 300;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6rem 5rem 0rem;
  }
  
  .nav__links:after {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: calc(100% - 1.2rem - 4px);
    height: calc(100% - 1.2rem - 4px);
    border: 2px solid #3B3B3B;
    pointer-events: none;
    display: none;
  }
  
  .nav__primaryLinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .nav__storeLinks {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  
  .nav__storeLinksInner {
    padding: 2.25rem 0 2.75rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .nav__linkBorder {
    border-top: 1px solid rgba(71, 71, 71, 0.4);
    margin-left: -2.4rem;
  }
  
  .nav__footerLinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 2.4rem;
    margin-left: -2.4rem;
    height: 5.4rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid rgba(71, 71, 71, 0.4);
  }
  
  .nav__footerLinks > * {
    margin-right: 1.5rem;
  }
  
  .nav__footerLinks span {
    opacity: 0.5;
  }
  
  .nav__linkRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .nav__linkRow + .nav__linkRow {
    margin-top: 6rem;
  }
  
  @media screen and (min-aspect-ratio: 16/9) {
    .nav__linkRow + .nav__linkRow {
      margin-top: 4rem;
    }
  }
  
  .nav__linkGroup {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  
  .nav__primaryLink {
    font-size: 3rem;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.2em;
    padding: 2.15rem 0;
    -webkit-transition: opacity 300ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear;
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear;
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    position: relative;
    cursor: pointer;
    opacity: 1;
  }
  
  @media screen and (min-aspect-ratio: 16/9) {
    .nav__primaryLink {
      font-size: 3rem;
      padding: 1.85rem 0;
    }
  }
  @media screen and (min-aspect-ratio: 16/9) {
    .nav__primaryLink {
      font-size: 3rem;
      padding: 1.85rem 0;
    }
  }
  
  .nav__primaryLink:after,
  .nav__primaryLink:before {
    content: "";
    position: absolute;
    left: 0;
    width: calc(100% - 0.2em);
    height: 1px;
    background: #C3C0BC;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .nav__primaryLink:before {
    top: -1px;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
    display: none;
  }
  
  .nav__primaryLink:after {
    bottom: 1rem;
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
  }
  
  .nav__primaryLink.active {
    font-style: italic;
  }
  
  .nav__primaryLink.active:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
  }
  
  @media (hover: hover) {
    .nav__primaryLink:hover {
      -webkit-transform: translateX(1rem);
      -ms-transform: translateX(1rem);
      transform: translateX(1rem);
      opacity: 1;
      -webkit-transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      -o-transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear;
      transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear;
      transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    }
  
    .nav__primaryLink:hover:before {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: left;
      -ms-transform-origin: left;
      transform-origin: left;
    }
  
    .nav__primaryLink:hover:after {
      -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: left;
      -ms-transform-origin: left;
      transform-origin: left;
    }
  }
  
  .nav__linkProgress {
    position: absolute;
    top: 2.55rem;
    left: calc(100% + 1rem);
    color: #C3C0BC;
    font-family: "anonymous-pro", monospace;
    font-size: 1rem;
    font-style: normal;
    letter-spacing: 0.15em;
  }
  
  @media screen and (min-aspect-ratio: 16/9) {
    .nav__linkProgress {
      top: 2.25rem;
    }
  }
  
  .nav__secondaryLink,
  .nav__linkDivider {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
  
  .nav__secondaryLink.disabled,
  .nav__linkDivider.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  
  .nav__footerLink {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 1 !important;
  }
  
  .nav a.nav__footerLink {
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .nav a.nav__footerLink:hover {
      text-decoration: underline;
    }
  }
  
  .nav__linkLabel {
    color: #C3C0BC;
    font-family: "anonymous-pro", monospace;
    text-transform: uppercase;
    font-size: 1rem;
    font-style: normal;
    letter-spacing: 0.15em;
    line-height: 2;
    opacity: 0.95;
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .nav__linkIcon {
    height: 1.6rem;
    width: auto;
    margin-right: 0.8rem;
    margin-bottom: -0.2rem;
  }
  
  .nav__linkDivider {
    cursor: default;
    margin: 0 3rem;
    height: 100%;
    width: 1px;
    background: rgba(71, 71, 71, 0.4);
  }
  
  .nav__links > * {
    opacity: 0;
    -webkit-transform: translateY(4rem);
    -ms-transform: translateY(4rem);
    transform: translateY(4rem);
  }
  
  .nav__secondaryLink {
    opacity: 0.8;
  }
  
  @media (hover: hover) {
    .nav__secondaryLink:hover {
      opacity: 1;
    }
  }
  
  .nav__chapters {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 52rem);
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(1) {
    z-index: 6;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(2) {
    z-index: 5;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(3) {
    z-index: 4;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(4) {
    z-index: 3;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(5) {
    z-index: 2;
  }
  
  .nav__chapters .chapterSpines__chapter:nth-child(6) {
    z-index: 1;
  }
  
  html:not(.menu-open) .nav__chapters {
    -webkit-transform: translateX(-46rem);
    -ms-transform: translateX(-46rem);
    transform: translateX(-46rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__inner {
    opacity: 0;
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__border {
    opacity: 0 !important;
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(1) {
    -webkit-transform: translateX(-100%) translateX(0rem);
    -ms-transform: translateX(-100%) translateX(0rem);
    transform: translateX(-100%) translateX(0rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(2) {
    -webkit-transform: translateX(-100%) translateX(-42rem);
    -ms-transform: translateX(-100%) translateX(-42rem);
    transform: translateX(-100%) translateX(-42rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(3) {
    -webkit-transform: translateX(-100%) translateX(-58rem);
    -ms-transform: translateX(-100%) translateX(-58rem);
    transform: translateX(-100%) translateX(-58rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(4) {
    -webkit-transform: translateX(-100%) translateX(-74rem);
    -ms-transform: translateX(-100%) translateX(-74rem);
    transform: translateX(-100%) translateX(-74rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(5) {
    -webkit-transform: translateX(-100%) translateX(-90rem);
    -ms-transform: translateX(-100%) translateX(-90rem);
    transform: translateX(-100%) translateX(-90rem);
  }
  
  html:not(.menu-open) .nav__chapters .chapterSpines__chapter:nth-child(6) {
    -webkit-transform: translateX(-100%) translateX(-106rem);
    -ms-transform: translateX(-100%) translateX(-106rem);
    transform: translateX(-100%) translateX(-106rem);
  }
  
  .nav__sideBlock {
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .nav__sidebar > *:not(.nav__toggle):not(.nav__settingsToggle) {
    -webkit-transition: opacity 300ms 200ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms 200ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 300ms 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .nav__links > * {
    -webkit-transition: opacity 200ms linear, -webkit-transform 1ms 200ms linear;
    transition: opacity 200ms linear, -webkit-transform 1ms 200ms linear;
    -o-transition: opacity 200ms linear, transform 1ms 200ms linear;
    transition: opacity 200ms linear, transform 1ms 200ms linear;
    transition: opacity 200ms linear, transform 1ms 200ms linear, -webkit-transform 1ms 200ms linear;
  }
  
  .to-menu .nav__chapters {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  
  .menu-open .nav__menu {
    pointer-events: auto;
  }
  
  .menu-open .nav__sideBlock {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }

  .menu-open .nav__loadBlock {
    -webkit-transform: scaleX(0.3869047619);
    -ms-transform: scaleX(0.3869047619);
    transform: scaleX(0.3869047619);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  
  .menu-open .nav__overlay {
    opacity: 0.4;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
    pointer-events: auto;
  }
  
  .menu-open .nav__sidebar > *:not(.keep) {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 300ms linear, transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .menu-open .nav__links > * {
    opacity: 1;
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
  }

  .menu-open .nav__links > *:nth-child(1) {
    -webkit-transition: opacity 400ms 400ms linear, -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 400ms linear, -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 400ms linear;
    transition: transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 400ms linear;
    transition: transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 400ms linear, -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__links > *:nth-child(2) {
    -webkit-transition: opacity 400ms 480ms linear, -webkit-transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 480ms linear, -webkit-transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 480ms linear;
    transition: transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 480ms linear;
    transition: transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 480ms linear, -webkit-transform 800ms 480ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__links > *:nth-child(3) {
    -webkit-transition: opacity 400ms 550ms linear, -webkit-transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 550ms linear, -webkit-transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 550ms linear;
    transition: transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 550ms linear;
    transition: transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 550ms linear, -webkit-transform 800ms 550ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__links > *:nth-child(4) {
    -webkit-transition: opacity 400ms 590ms linear, -webkit-transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 590ms linear, -webkit-transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 590ms linear;
    transition: transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 590ms linear;
    transition: transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 590ms linear, -webkit-transform 800ms 590ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__links > *:nth-child(5) {
    -webkit-transition: opacity 400ms 620ms linear, -webkit-transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 620ms linear, -webkit-transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 620ms linear;
    transition: transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 620ms linear;
    transition: transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 620ms linear, -webkit-transform 800ms 620ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__links > *:nth-child(6) {
    -webkit-transition: opacity 400ms 640ms linear, -webkit-transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 640ms linear, -webkit-transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 640ms linear;
    transition: transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 640ms linear;
    transition: transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms 640ms linear, -webkit-transform 800ms 640ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .menu-open .nav__hamburgerLine--top {
    -webkit-transform: translateY(0) rotate(135deg);
    -ms-transform: translateY(0) rotate(135deg);
    transform: translateY(0) rotate(135deg);
  }
  
  .menu-open .nav__hamburgerLine--mid {
    -webkit-transform: translateY(0) scaleX(0);
    -ms-transform: translateY(0) scaleX(0);
    transform: translateY(0) scaleX(0);
  }
  
  .menu-open .nav__hamburgerLine--bottom {
    -webkit-transform: translateY(0) rotate(45deg);
    -ms-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
  }
  
  #main {
    -webkit-transition: -webkit-filter 500ms ease-in-out;
    transition: -webkit-filter 500ms ease-in-out;
    -o-transition: filter 500ms ease-in-out;
    transition: filter 500ms ease-in-out;
    transition: filter 500ms ease-in-out, -webkit-filter 500ms ease-in-out;
  }

  .settings-open .nav__settingsToggle .nav__sidebarIcon {
    background: white;
  }
  
  .settings-open .nav__settingsToggle .nav__sidebarIcon img {
    -webkit-filter: invert(1);
    filter: invert(1);
  }
  
  .settings-open .nav__settings {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  
  .togglePill__label {
    font-size: 1rem;
    font-family: "anonymous-pro", monospace;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.15;
  }
  
  .togglePill label {
    display: inline-block;
    height: 3rem;
    pointer-events: none;
  }
  
  .togglePill label span {
    display: inline-block;
    height: 100%;
    margin: -1px;
    font-family: "arpona", serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 1rem;
    padding: 1.1rem 1rem 1.1rem;
    color: #D9D9D9;
    cursor: pointer;
    -webkit-transition: opacity 100ms linear, color 400ms linear;
    -o-transition: opacity 100ms linear, color 400ms linear;
    transition: opacity 100ms linear, color 400ms linear;
    position: relative;
  }
  
  .togglePill label span:before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background: #D9D9D9;
    border-radius: 1rem;
    z-index: -1;
    -webkit-transition: opacity 400ms ease-in-out, -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .togglePill label span:first-child {
    pointer-events: auto;
    opacity: 0.5;
  }
  
  @media (hover: hover) {
    .togglePill label span:first-child:hover {
      opacity: 1;
    }
  }
  
  .togglePill label span:first-child::before {
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translateX(4rem);
    -ms-transform: translateX(4rem);
    transform: translateX(4rem);
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill label span:last-child {
    color: #474747;
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 400ms linear, color 400ms linear;
    -o-transition: opacity 400ms linear, color 400ms linear;
    transition: opacity 400ms linear, color 400ms linear;
  }
  
  .togglePill label span:last-child::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill input:checked + label span:first-child {
    color: #474747;
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 400ms linear, color 400ms linear;
    -o-transition: opacity 400ms linear, color 400ms linear;
    transition: opacity 400ms linear, color 400ms linear;
  }
  
  .togglePill input:checked + label span:first-child::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill input:checked + label span:last-child {
    pointer-events: auto;
    color: #D9D9D9;
    opacity: 0.5;
  }
  
  @media (hover: hover) {
    .togglePill input:checked + label span:last-child:hover {
      opacity: 1;
    }
  }
  
  .togglePill input:checked + label span:last-child::before {
    opacity: 0;
    -webkit-transform: translateX(-4rem);
    -ms-transform: translateX(-4rem);
    transform: translateX(-4rem);
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill.show-ios label {
    height: 3rem;
    max-width: 3rem;
    margin-left: 0.5rem;
  }
  
  .togglePill.show-ios label span {
    padding-left: 0.15rem;
    padding-right: 0;
    width: 2rem;
    display: inline-block;
    position: relative;
  }
  
  .togglePill.show-ios label span:after {
    content: "";
    position: absolute;
    top: 0.65rem;
    left: 0.15rem;
    width: calc(100% - 0.5rem);
    height: calc(100% - 1.5rem);
    border: 1px solid rgba(34, 34, 34, 0.2);
    border-radius: 100%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }




  
@media (hover: hover) {
    .video-playing .nav:hover {
      opacity: 1;
      -webkit-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .nav {
      height: var(--app-height);
    }
  
    .nav__sidebar {
      padding: 2.8266666667rem 0 2.12rem;
      height: var(--app-height);
    }
  
    .nav__toggle {
      padding: 0.9328rem;
    }
  
    .nav__toggleInner {
      width: 10.2vh;
      height: 10.2vh;
    }
  
    .nav__sidebarIcon {
      width: 8.5vh;
      height: 8.5vh;
      min-width: 8.5vh;
      min-height: 8.5vh;
    }
  
    .nav__sidebarIcon img {
      height: 3.4vh;
    }
  
    .nav__sidebarLink {
      height: 15.3vh;
      font-size: 1.7vh;
      letter-spacing: 0.12em;
      font-family: "guyot-text", serif;
      font-weight: 400;
      padding: 1.7vh 1.7vh;
    }
  
    .nav__settingsToggle {
      padding: 1.7vh;
    }
  
    .nav__sideBlock,
    .nav__loadBlock {
      width: 100%;
    }
  
    .nav__sideBlock {
      -webkit-transform: scaleX(0.076);
      -ms-transform: scaleX(0.076);
      transform: scaleX(0.076);
    }
  
    .nav__overlay {
      display: none;
    }
  
    .nav__links {
      width: 79.1466666667rem;
      padding: 0;
      opacity: 0;
    }
  
    .nav__primaryLinks,
    .nav__storeLinks {
      width: 45.2266666667rem;
      padding: 2.8266666667rem 3.392rem;
    }
  
    .nav__primaryLinks {
      height: 100%;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      border-right: 1px solid rgba(71, 71, 71, 0.4);
    }
  
    .nav__primaryLink {
      font-size: 5.95vh;
      padding: 3.06vh 0;
    }
  
    .nav__storeLinks {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 7.7733333333rem;
      padding: 2.12rem 3.392rem 2.12rem;
      border-top: 1px solid rgba(71, 71, 71, 0.4);
    }
  
    .nav__storeLinksInner {
      padding: 0;
    }
  
    .nav__linkLabel {
      font-size: 0.848rem;
      line-height: 1;
      margin-bottom: 0;
    }
  
    .nav__secondaryLink {
      font-size: 1.4133333333rem;
      padding: 0.7066666667rem 0;
      display: inline-block;
    }
  
    .nav__bottomLinks,
    .nav__footerLinks {
      position: absolute;
      left: 45.2266666667rem;
      width: 33.92rem;
      padding: 2.8266666667rem 3.1093333333rem 2.12rem;
    }
  
    .nav__bottomLinks {
      bottom: 9.5rem;
    }
  
    .nav__footerLinks {
      height: 7.7733333333rem;
      bottom: 0;
      margin: 0;
    }
  
    .nav__footerLink {
      font-size: 0.9893333333rem;
    }
  
    .menu-open .nav__loadBlock {
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
    }
  
    .menu-open .nav__links {
      opacity: 1;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
    }
  
    .nav__links {
      -webkit-transition: opacity 400ms ease-in-out;
      -o-transition: opacity 400ms ease-in-out;
      transition: opacity 400ms ease-in-out;
    }
  
    .nav__links > * {
      -webkit-transition: opacity 1ms 400ms linear, -webkit-transform 1ms 400ms linear;
      transition: opacity 1ms 400ms linear, -webkit-transform 1ms 400ms linear;
      -o-transition: opacity 1ms 400ms linear, transform 1ms 400ms linear;
      transition: opacity 1ms 400ms linear, transform 1ms 400ms linear;
      transition: opacity 1ms 400ms linear, transform 1ms 400ms linear, -webkit-transform 1ms 400ms linear;
    }
  }
  
  .popper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
    visibility: hidden;
  }
  
  .popper--front {
    z-index: 1001;
  }
  
  .popper.block {
    visibility: visible;
  }
  
  .popper__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    -webkit-transition: opacity linear 300ms;
    -o-transition: opacity linear 300ms;
    transition: opacity linear 300ms;
  }
  
  .popper__popout {
    position: absolute;
    top: 0;
    right: 0;
    width: 57.5rem;
    height: 100%;
    background: #EDE8E2;
    color: #474747;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms;
    transition: -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms;
    -o-transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms;
    transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms;
    transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms, -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 300ms;
    overflow-y: scroll;
  }
  
  .popper__popoutInner {
    height: 100%;
    width: 100%;
  }
  
  .popper__popup {
    position: absolute;
    top: 50%;
    left: calc(50% + 3.25rem);
    width: 60rem;
    height: auto;
    background: #EDE8E2;
    color: #474747;
    -webkit-transform: translate3d(-50%, -40%, 0);
    transform: translate3d(-50%, -40%, 0);
    -webkit-transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms;
    transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms;
    -o-transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms, opacity 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 400ms;
    opacity: 0;
    padding: 8rem;
  }
  
  .popper__notch {
    position: absolute;
    bottom: -7px;
    left: 20px;
    width: 26px;
    height: auto;
    z-index: 1;
  }
  
  .popper__instructions {
    font-family: "anonymous-pro", monospace;
    font-size: 1.2rem;
    line-height: 1.2;
  }
  
  .popper__instructions ol {
    list-style: decimal;
    padding-left: 2rem;
  }
  
  .popper__instructions li {
    margin: 1.5rem 0;
  }
  
  .popper__instructions li:first-child {
    margin-top: 0.5rem;
  }
  
  .popper__instructions li:last-child {
    margin-bottom: 0;
  }
  
  .popper__instructions img {
    height: 1.75em;
    margin-top: -0.5em;
    margin-bottom: -0.25em;
    vertical-align: bottom;
    width: auto;
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
  }
  
  .popper.show {
    pointer-events: auto;
  }
  
  .popper.show .popper__overlay {
    opacity: 0.5;
  }
  
  .popper.show .popper__popout {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms;
    transition: -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms;
    -o-transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 500ms;
  }
  
  .popper.show .popper__popup {
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms;
    transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms;
    -o-transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms, opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 400ms;
    opacity: 1;
  }
  
  .popper--border:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px - 4px);
    height: calc(100% - 10px - 4px);
    border: 2px solid #565656;
    pointer-events: none;
  }
  
  .popper--notch {
    margin-left: -4.2rem;
    margin-top: -2rem;
    -webkit-transform: translate3d(0, -90%, 0) !important;
    transform: translate3d(0, -90%, 0) !important;
    -webkit-transition: opacity 200ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms;
    transition: opacity 200ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms;
    -o-transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms, opacity 200ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms, opacity 200ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms, opacity 200ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 300ms;
  }
  
  .popper.show .popper--notch {
    -webkit-transform: translate3d(0, -100%, 0) !important;
    transform: translate3d(0, -100%, 0) !important;
    -webkit-transition: opacity 200ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms;
    transition: opacity 200ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms;
    -o-transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms, opacity 200ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms, opacity 200ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms, opacity 200ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 300ms;
  }
  
  #message-poppers {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .messagePopper {
    position: absolute;
    bottom: 6.5rem;
    right: 5rem;
    background: #EFEFEF;
    padding: 2.2rem 2.4rem 2.4rem 2.4rem;
    min-width: 24rem;
    opacity: 0;
    -webkit-transform: translateY(3rem);
    -ms-transform: translateY(3rem);
    transform: translateY(3rem);
    -webkit-transition: opacity 300ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 300ms linear;
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 300ms linear;
    transition: transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 300ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .messagePopper__primary {
    font-size: 1.8rem;
    color: #474747;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
  }
  
  .messagePopper__secondary {
    font-family: "arpona", serif;
    font-size: 1.4rem;
    color: #6B6B6B;
    font-weight: 500;
  }
  
  .messagePopper:before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: calc(100% - 1.2rem - 4px);
    height: calc(100% - 1.2rem - 4px);
    border: 2px solid #E3E3E3;
    pointer-events: none;
  }
  
  .messagePopper--music:after {
    content: "";
    position: absolute;
    top: -1.6rem;
    left: -1.6rem;
    width: 3.7rem;
    height: 3.7rem;
    background-image: url(images/music-popper-icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .messagePopper.show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear;
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear;
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .angledPanel {
    padding: 1.1rem 0.5rem 1.3rem;
    min-width: 12rem;
    background-image: url(images/angled-panel.svg);
    background-position: center;
    background-size: 200% 100%;
  }
  
  .angledPanel:before,
  .angledPanel:after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 3rem;
    background-image: url(images/angled-panel.svg);
    background-size: 26rem 100%;
  }
  
  .angledPanel:before {
    right: 99%;
    background-position: left;
  }
  
  .angledPanel:after {
    left: 99%;
    background-position: right;
  }
  
  .subscribe {
    width: 60rem;
    height: 60rem;
    border-radius: 30rem;
    z-index: 101;
  }
  
  .subscribe:after {
    content: "";
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    width: calc(100% - 2.4rem);
    height: calc(100% - 2.4rem);
    border-radius: 100%;
    border: 0.4rem solid #5F6750;
    pointer-events: none;
  }
  
  .subscribe__close {
    position: absolute;
    top: 3.6rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .subscribe__close:hover {
      -webkit-transform: translateX(-50%) scale(0.9);
      -ms-transform: translateX(-50%) scale(0.9);
      transform: translateX(-50%) scale(0.9);
    }
  }
  
  .subscribe__content {
    position: absolute;
    top: 11.3rem;
    width: 44rem;
    left: 8rem;
    text-align: center;
  }
  
  .subscribe__heading {
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.25;
    font-family: "guyot-headline", serif;
    margin-bottom: 2rem;
  }
  
  .subscribe__paragraph {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
  }
  
  .subscribe__feather {
    height: 2rem;
  }
  
  .subscribe__feather img {
    height: 100%;
    width: auto;
  }
  
  .subscribe__bottom {
    position: absolute;
    top: 34rem;
    width: 40rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  
  .subscribe input {
    height: 100%;
    background: transparent !important;
    font-size: 1.5rem;
    color: #5F6750;
    font-family: "guyot-text", serif;
    padding: 0 2.5rem;
  }
  
  .subscribe input::-webkit-input-placeholder {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
  }
  
  .subscribe input::-moz-placeholder {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
  }
  
  .subscribe input:-ms-input-placeholder {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
  }
  
  .subscribe input::-ms-input-placeholder {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
  }
  
  .subscribe input::placeholder {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 1.2rem;
  }
  
  .subscribe__topInputs,
  .subscribe__bottomInputs {
    height: 5.4rem;
    width: 100%;
    border-radius: 2.7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .subscribe__topInputs {
    border: 1px solid #5F6750;
    margin-bottom: 2rem;
  }
  
  .subscribe__topInputs input {
    width: 50%;
  }
  
  .subscribe__topInputs input:first-child {
    border-right: 1px solid #5F6750;
  }
  
  .subscribe__bottomInputs {
    background: white;
  }
  
  .subscribe__bottomInputs input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  
  .subscribe__button {
    height: 100%;
    background: #5F6750;
    border-radius: 2.7rem;
    position: relative;
    cursor: pointer;
    -webkit-transition: background 100ms;
    -o-transition: background 100ms;
    transition: background 100ms;
  }
  
  .subscribe__button:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 2.6rem;
    border: 2px solid white;
    pointer-events: none;
  }
  
  .subscribe__button button {
    font-family: "arpona", serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    height: 100%;
    padding: 0 2rem;
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .subscribe__button:hover {
      background-color: black;
    }
  }
  
  .subscribe__error {
    text-align: center;
    color: red;
    font-size: 1.5rem;
    display: block;
    width: 100%;
    padding: 2rem 10rem;
  }
  
  .subscribe__success {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    font-family: "guyot-headline", serif;
    font-size: 2rem;
    display: block;
    text-align: center;
    -webkit-transform: translateY(3rem);
    -ms-transform: translateY(3rem);
    transform: translateY(3rem);
    opacity: 0;
  }
  
  .subscribe__form.loading > *:not(.subscribe__success) {
    opacity: 0.5;
    -webkit-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
    pointer-events: none;
  }
  
  .subscribe__form.success > *:not(.subscribe__success) {
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
    pointer-events: none;
  }
  
  .subscribe__form.success .subscribe__success {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 300ms 100ms linear, -webkit-transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 100ms linear, -webkit-transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 300ms 100ms linear, transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 100ms linear, transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 100ms linear, transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  @media screen and (max-width: 1023px) {
    .subscribe {
      width: 98.6vh;
      height: 88.4vh;
      max-height: calc(var(--app-height) * 0.98);
      border-radius: 49.3vh 49.3vh 1.7vh 1.7vh;
    }
  
    .subscribe:after {
      top: 0.4rem;
      left: 0.4rem;
      width: calc(100% - 1.6rem);
      height: calc(100% - 1.6rem);
      border-radius: 49.3vh 49.3vh 1.7vh 1.7vh;
    }
  
    .subscribe__close {
      top: 5.1vh;
      width: 8.5vh;
      height: 8.5vh;
    }
  
    .subscribe__close img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
  
    .subscribe__content {
      top: 18.7vh;
      width: 78.2vh;
      left: 10.2vh;
    }
  
    .subscribe__heading {
      font-size: 5.1vh;
      margin-bottom: 3.4vh;
    }
  
    .subscribe__paragraph {
      font-size: 3.4vh;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom: 5.1vh;
    }
  
    .subscribe__feather {
      height: 3.4vh;
      display: block;
      opacity: 0.5;
      display: none;
    }
  
    .subscribe__feather img {
      -o-object-fit: contain;
      object-fit: contain;
    }
  
    .subscribe__bottom {
      top: auto;
      bottom: calc(var(--app-height) * -0.01);
      width: 85vh;
    }
  
    .subscribe input {
      font-size: 16px;
      padding: 0 2.5rem;
    }
  
    .subscribe input::-webkit-input-placeholder {
      font-size: 1.2rem;
    }
  
    .subscribe input::-moz-placeholder {
      font-size: 1.2rem;
    }
  
    .subscribe input:-ms-input-placeholder {
      font-size: 1.2rem;
    }
  
    .subscribe input::-ms-input-placeholder {
      font-size: 1.2rem;
    }
  
    .subscribe input::placeholder {
      font-size: 1.2rem;
    }
  
    .subscribe__topInputs,
    .subscribe__bottomInputs {
      height: 12.24vh;
      border-radius: 9.18vh;
    }
  
    .subscribe__topInputs {
      margin-bottom: 3.4vh;
    }
  
    .subscribe__button {
      border-radius: 9.18vh;
      min-width: 11rem;
    }
  
    .subscribe__button:after {
      border-radius: 8.84vh;
    }
  
    .subscribe__bottomInputs input {
      max-width: calc(100% - 11rem);
    }
  
    .subscribe__success {
      top: 6.8vh;
      font-size: 4.08vh;
    }
  }
  
  .welcomeScreen {
    padding: 0;
    width: 73rem;
    background: rgba(34, 34, 34, 0.5);
  }
  
  .welcomeScreen .border {
    margin: -3rem -2.75rem;
    width: calc(100% + 5.5rem);
    height: calc(100% + 6rem);
  }
  
  .welcomeScreen__inner {
    padding: 6rem 0 6rem;
    width: 48rem;
    margin: auto;
    text-align: center;
    color: white;
    opacity: 0.9;
  }
  
  .welcomeScreen__heading {
    letter-spacing: 0.15em;
    margin-bottom: 4rem;
  }
  
  .welcomeScreen__message {
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 3rem;
  }
  
  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotate {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes bounce {
    0% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      /* easeInCubic */
    }
  
    50% {
      -webkit-transform: translateY(1rem);
      transform: translateY(1rem);
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      /* easeOutCubic */
    }
  
    100% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
    }
  }
  
  @keyframes bounce {
    0% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      /* easeInCubic */
    }
  
    50% {
      -webkit-transform: translateY(1rem);
      transform: translateY(1rem);
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      /* easeOutCubic */
    }
  
    100% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
    }
  }
  
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      border-radius: 0 100% 0 0;
    }
  
    50% {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      border-radius: 0 0 100% 0;
    }
  
    100% {
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
      border-radius: 0 0 0 100%;
    }
  }
  
  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      border-radius: 0 100% 0 0;
    }
  
    50% {
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      border-radius: 0 0 100% 0;
    }
  
    100% {
      -webkit-transform: rotate(-180deg);
      transform: rotate(-180deg);
      border-radius: 0 0 0 100%;
    }
  }
  
  
  .site-spinner {
    position: fixed;
    top: calc(var(--app-height) * 0.5);
    left: 50vw;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 200ms;
    -o-transition: opacity 200ms;
    transition: opacity 200ms;
  }
  
  html:not(.loading-done) .site-spinner {
    opacity: 0 !important;
  }
  
  html.is-leaving.to-menu .site-spinner {
    opacity: 1;
    -webkit-transition: opacity 200ms 250ms;
    -o-transition: opacity 200ms 250ms;
    transition: opacity 200ms 250ms;
  }
  
  .togglePill__label {
    font-size: 1rem;
    font-family: "anonymous-pro", monospace;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.15;
  }
  
  .togglePill label {
    display: inline-block;
    height: 3rem;
    pointer-events: none;
  }
  
  .togglePill label span {
    display: inline-block;
    height: 100%;
    margin: -1px;
    font-family: "arpona", serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 1rem;
    padding: 1.1rem 1rem 1.1rem;
    color: #D9D9D9;
    cursor: pointer;
    -webkit-transition: opacity 100ms linear, color 400ms linear;
    -o-transition: opacity 100ms linear, color 400ms linear;
    transition: opacity 100ms linear, color 400ms linear;
    position: relative;
  }
  
  .togglePill label span:before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background: #D9D9D9;
    border-radius: 1rem;
    z-index: -1;
    -webkit-transition: opacity 400ms ease-in-out, -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 400ms ease-in-out, filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-filter 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .togglePill label span:first-child {
    pointer-events: auto;
    opacity: 0.5;
  }
  
  @media (hover: hover) {
    .togglePill label span:first-child:hover {
      opacity: 1;
    }
  }
  
  .togglePill label span:first-child::before {
    pointer-events: none;
    opacity: 0;
    -webkit-transform: translateX(4rem);
    -ms-transform: translateX(4rem);
    transform: translateX(4rem);
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill label span:last-child {
    color: #474747;
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 400ms linear, color 400ms linear;
    -o-transition: opacity 400ms linear, color 400ms linear;
    transition: opacity 400ms linear, color 400ms linear;
  }
  
  .togglePill label span:last-child::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill input:checked + label span:first-child {
    color: #474747;
    pointer-events: none;
    opacity: 1;
    -webkit-transition: opacity 400ms linear, color 400ms linear;
    -o-transition: opacity 400ms linear, color 400ms linear;
    transition: opacity 400ms linear, color 400ms linear;
  }
  
  .togglePill input:checked + label span:first-child::before {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill input:checked + label span:last-child {
    pointer-events: auto;
    color: #D9D9D9;
    opacity: 0.5;
  }
  
  @media (hover: hover) {
    .togglePill input:checked + label span:last-child:hover {
      opacity: 1;
    }
  }
  
  .togglePill input:checked + label span:last-child::before {
    opacity: 0;
    -webkit-transform: translateX(-4rem);
    -ms-transform: translateX(-4rem);
    transform: translateX(-4rem);
    -webkit-filter: blur(0.5rem);
    filter: blur(0.5rem);
    -webkit-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
  }
  
  .togglePill.show-ios label {
    height: 3rem;
    max-width: 3rem;
    margin-left: 0.5rem;
  }
  
  .togglePill.show-ios label span {
    padding-left: 0.15rem;
    padding-right: 0;
    width: 2rem;
    display: inline-block;
    position: relative;
  }
  
  .togglePill.show-ios label span:after {
    content: "";
    position: absolute;
    top: 0.65rem;
    left: 0.15rem;
    width: calc(100% - 0.5rem);
    height: calc(100% - 1.5rem);
    border: 1px solid rgba(34, 34, 34, 0.2);
    border-radius: 100%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  
  .volumeControl {
    /* Special styling for WebKit/Blink */
    /* All the same stuff for Firefox */
    /* All the same stuff for IE */
  }
  
  .volumeControl > span {
    display: block;
    font-size: 1rem;
    font-family: "anonymous-pro", monospace;
  }
  
  .volumeControl > span:first-child {
    margin-bottom: 1rem;
  }
  
  .volumeControl__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 2rem;
  }
  
  .volumeControl__inner img {
    margin-right: 1rem;
    height: 1.6rem;
    cursor: pointer;
    pointer-events: auto;
  }
  
  .volumeControl input[type=range] {
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
  }
  
  .volumeControl input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  
  .volumeControl input[type=range]:focus {
    outline: none;
    /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  
  .volumeControl input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  
  .volumeControl input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
    background: white;
    cursor: pointer;
    margin-top: -0.5rem;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    background-clip: padding-box;
    border: 0.35rem solid rgba(0, 255, 0, 0);
    -webkit-transform: scale(4);
    transform: scale(4);
  }
  
  .volumeControl input[type=range]::-webkit-slider-thumb:not(:active) {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  @media screen and (max-width: 1023px) {
    .volumeControl input[type=range]::-webkit-slider-thumb {
      width: 1.5rem;
      height: 1.5rem;
      border: 0.6rem solid rgba(0, 255, 0, 0);
    }
  }
  
  .volumeControl input[type=range]::-moz-range-thumb {
    height: 2rem;
    width: 1rem;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
  }
  
  .volumeControl input[type=range]::-ms-thumb {
    height: 2rem;
    width: 1rem;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
  }
  
  .volumeControl input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.66);
    border-radius: 1px;
    accent-color: #30cc7e;
  }
  
  .volumeControl input[type=range]:focus::-webkit-slider-runnable-track {
    background: white;
  }
  
  .volumeControl input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
  }
  
  .volumeControl input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
  }
  
  .volumeControl input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  
  .volumeControl input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
  }
  
  .volumeControl input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  
  .volumeControl input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
  }
  
  .audio {
    background: #343434;
    color: white;
    padding: 2rem 2rem 3rem;
    width: 24rem;
  }
  
  .audio__top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #565656;
    padding: 0rem 1rem 1rem;
  }
  
  .audio__top img {
    height: 3.5rem;
  }
  
  .audio__heading {
    text-transform: uppercase;
    color: #CBCBCB;
    letter-spacing: 0.1em;
    font-size: 1.6rem;
    font-family: "guyot-headline", serif;
    font-weight: 500;
  }
  
  .audio__links {
    padding: 1rem 1rem 0;
    line-height: 1.6;
  }
  
  .audio__links a {
    display: block;
    font-weight: 400;
    font-family: "arpona", serif;
    font-size: 1.3rem;
    cursor: pointer;
  }
  
  @media (hover: hover) {
    .audio__links a:hover {
      text-decoration: underline;
    }
  }
  
  .badge {
    font-weight: 400;
    text-transform: uppercase;
    font-family: "anonymous-pro", monospace;
    font-size: 1rem;
    letter-spacing: 0.15em;
    height: 2.9rem;
    border-radius: 1.45rem;
    border: 1px solid #D6D2CD;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.75rem 0 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  
  .dropcap p:first-child::first-letter {
    float: left;
    font-size: 3.3em;
    font-weight: 300;
    font-family: "guyot-headline", serif;
    line-height: 1;
    padding: 1rem 2rem 1rem 2rem;
    margin-right: 1.5rem;
    background-image: url(images/drop-cap.png);
    background-size: 100% 100%;
  }
  
  @media screen and (max-width: 1023px) {
    .dropcap p:first-child::first-letter {
      font-size: 3.25em;
      padding: 1rem 1.3rem;
      margin-right: 1.2rem;
    }
  }
  
  .onboarding__infoIcon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background-color: red;
    -webkit-transform: scale(0.66);
    -ms-transform: scale(0.66);
    transform: scale(0.66);
  }
  
  @media (hover: hover) {
    .onboarding__infoIcon:hover {
      -webkit-transform: scale(0.8) !important;
      -ms-transform: scale(0.8) !important;
      transform: scale(0.8) !important;
    }
  }
  
  .onboarding.show .popper__overlay {
    opacity: 0.8 !important;
  }
  
  .onboarding__popup {
    background-color: #343434;
    width: 43rem;
    padding: 7rem 6rem 6rem;
  }
  
  .onboarding__popup::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    width: calc(100% - 1.8rem);
    height: calc(100% - 1.8rem);
    border: 1px solid #565656;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
  }
  
  .onboarding__popupInner {
    color: white;
    text-align: center;
  }
  
  .onboarding__close {
    position: absolute;
    top: 1rem;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    cursor: pointer;
    z-index: 2;
  }
  
  .onboarding__close img {
    width: 5rem;
    height: 5rem;
  }
  
  .onboarding__top {
    text-transform: uppercase;
    font-size: 1rem;
    font-family: "anonymous-pro", monospace;
    letter-spacing: 0.2em;
    -webkit-columns: #ababab;
    -moz-columns: #ababab;
    columns: #ababab;
    margin-bottom: 2.2rem;
    display: block;
  }
  
  .onboarding__message {
    margin-bottom: 5rem;
  }
  
  .onboarding__message:last-child {
    margin-bottom: 0;
  }
  
  .onboarding__image {
    display: block;
    margin: auto;
    height: 12rem;
  }
  
  .onboarding__image img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  @media screen and (max-width: 1023px) {
    .onboarding__popup {
      width: 108.8vh;
      padding: 11.9vh 6.8vh 8.5vh;
    }
  
    .onboarding__image {
      height: 20.4vh;
    }
  
    .onboarding__image:first-child {
      margin-bottom: 3.4vh;
    }
  
    .onboarding__message {
      margin-bottom: 6.8vh;
    }
  
    .onboarding__top {
      margin-bottom: 3.4vh;
      opacity: 0.75;
    }
  
    .onboarding__close img {
      width: 8.5vh;
      height: 8.5vh;
    }
  }
  
  @-webkit-keyframes swipe {
    0% {
      -webkit-transform: translateX(-2rem);
      transform: translateX(-2rem);
    }
  
    33% {
      -webkit-transform: translateX(1rem);
      transform: translateX(1rem);
    }
  
    100% {
      -webkit-transform: translateX(-2rem);
      transform: translateX(-2rem);
    }
  }
  
  @keyframes swipe {
    0% {
      -webkit-transform: translateX(-2rem);
      transform: translateX(-2rem);
    }
  
    33% {
      -webkit-transform: translateX(1rem);
      transform: translateX(1rem);
    }
  
    100% {
      -webkit-transform: translateX(-2rem);
      transform: translateX(-2rem);
    }
  }
  
  #explore-onboard-image {
    -webkit-animation: swipe 1200ms infinite ease-in-out;
    animation: swipe 1200ms infinite ease-in-out;
  }
  
  @-webkit-keyframes wiggle {
    0% {
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
    }
  
    50% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
  
    100% {
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
    }
  }
  
  @keyframes wiggle {
    0% {
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
    }
  
    50% {
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
    }
  
    100% {
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
    }
  }
  
  .portraitMessage {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
  }
  
  @media screen and (max-width: 1023px) and (orientation: portrait) {
    .portraitMessage {
      display: block;
      background: black;
    }
  }
  
  .portraitMessage__inner {
    position: absolute;
    top: 40%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 75vw;
    text-align: center;
  }
  
  .portraitMessage__inner img {
    margin: 3rem;
    width: 7rem;
    -webkit-animation: wiggle 1500ms infinite cubic-bezier(0.45, 0.015, 0.355, 1);
    animation: wiggle 1500ms infinite cubic-bezier(0.45, 0.015, 0.355, 1);
  }
  
  .chapterSpines {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    max-width: 100vw;
    counter-reset: chapter;
    font-family: "guyot-headline", serif;
    font-weight: 300;
  }
  
  .chapterSpines__back {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    cursor: pointer;
    opacity: 0 !important;
    pointer-events: none;
    -webkit-transition: opacity 200ms linear !important;
    -o-transition: opacity 200ms linear !important;
    transition: opacity 200ms linear !important;
  }
  
  .chapterSpines__chapters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .chapterSpines__chapter {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 100%;
    -webkit-transition: min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -ms-flex 1200ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    min-width: 0px;
    max-width: 100%;
  }
  
  .chapterSpines__chapter.last-completed {
    min-width: 80rem;
  }
  
  .chapterSpines__completed {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-1rem);
    -ms-transform: translateX(-50%) translateY(-1rem);
    transform: translateX(-50%) translateY(-1rem);
    height: 5rem;
    width: 5rem;
    z-index: 1;
    opacity: 0.7;
    -webkit-transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 200ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  @media screen and (max-width: 1023px) {
    .chapterSpines__completed {
      width: 3.5rem;
      height: 3.5rem;
    }
  }
  
  .chapterSpines__chapterLink,
  .chapterSpines__focusLink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
  }
  
  .chapterSpines__chapterLink {
    display: none;
  }
  
  .chapterSpines__images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .chapterSpines__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  
  .chapterSpines__image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.2;
    -webkit-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
  }
  
  .chapterSpines__image:nth-child(1) {
    -webkit-transform: scaleX(0.166667) translateX(0%);
    -ms-transform: scaleX(0.166667) translateX(0%);
    transform: scaleX(0.166667) translateX(0%);
  }
  
  .chapterSpines__image:nth-child(1) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__image:nth-child(2) {
    -webkit-transform: scaleX(0.166667) translateX(100%);
    -ms-transform: scaleX(0.166667) translateX(100%);
    transform: scaleX(0.166667) translateX(100%);
  }
  
  .chapterSpines__image:nth-child(2) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__image:nth-child(3) {
    -webkit-transform: scaleX(0.166667) translateX(200%);
    -ms-transform: scaleX(0.166667) translateX(200%);
    transform: scaleX(0.166667) translateX(200%);
  }
  
  .chapterSpines__image:nth-child(3) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__image:nth-child(4) {
    -webkit-transform: scaleX(0.166667) translateX(300%);
    -ms-transform: scaleX(0.166667) translateX(300%);
    transform: scaleX(0.166667) translateX(300%);
  }
  
  .chapterSpines__image:nth-child(4) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__image:nth-child(5) {
    -webkit-transform: scaleX(0.166667) translateX(400%);
    -ms-transform: scaleX(0.166667) translateX(400%);
    transform: scaleX(0.166667) translateX(400%);
  }
  
  .chapterSpines__image:nth-child(5) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__image:nth-child(6) {
    -webkit-transform: scaleX(0.166667) translateX(500%);
    -ms-transform: scaleX(0.166667) translateX(500%);
    transform: scaleX(0.166667) translateX(500%);
  }
  
  .chapterSpines__image:nth-child(6) img {
    -webkit-transform: scaleX(6);
    -ms-transform: scaleX(6);
    transform: scaleX(6);
  }
  
  .chapterSpines__border {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  .chapterSpines__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .chapterSpines__baseContent,
  .chapterSpines__hoverContent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vh;
    -webkit-transition: opacity 400ms 400ms linear;
    -o-transition: opacity 400ms 400ms linear;
    transition: opacity 400ms 400ms linear;
    z-index: 2;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  @media screen and (min-aspect-ratio: 2000/1250) {
    .chapterSpines__baseContent,
    .chapterSpines__hoverContent {
      max-width: 100vh;
    }
  }
  
  .chapterSpines__baseContent .baton,
  .chapterSpines__hoverContent .baton {
    opacity: 0.15;
    -webkit-transition: opacity 400ms 400ms linear;
    -o-transition: opacity 400ms 400ms linear;
    transition: opacity 400ms 400ms linear;
  }
  
  .chapterSpines__extraLinks {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
    -webkit-transition: opacity 500ms linear;
    -o-transition: opacity 500ms linear;
    transition: opacity 500ms linear;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: "guyot-headline", serif;
    letter-spacing: 0.3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-columns: white;
    -moz-columns: white;
    columns: white;
  }
  
  .chapterSpines__extraLinks a {
    padding: 0.8rem;
    margin: 0 0.8rem;
    cursor: pointer;
    display: inline-block;
    position: relative;
  }
  
  .chapterSpines__extraLinks a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.8rem;
    width: calc(100% - 1.8rem);
    height: 1px;
    background: white;
    opacity: 0.2;
    -webkit-transition: opacity 200ms;
    -o-transition: opacity 200ms;
    transition: opacity 200ms;
  }
  
  @media (hover: hover) {
    .chapterSpines__extraLinks a:hover::before {
      opacity: 0.6;
    }
  }
  
  .chapterSpines__finishedContent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42rem;
    -webkit-transform: translateX(-50%) translateY(-45%);
    -ms-transform: translateX(-50%) translateY(-45%);
    transform: translateX(-50%) translateY(-45%);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 400ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms linear;
    transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms linear;
    transition: transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 400ms linear, -webkit-transform 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .chapterSpines__finishedContent lottie-player {
    width: 36rem;
    margin: -4.5rem auto;
  }
  
  .chapterSpines__finishedContent .chapterCover__subheading {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    display: block;
  }
  
  .chapterSpines__finishedContent .chapterCover__heading {
    font-size: 6.5rem;
    white-space: nowrap;
    margin: 0;
  }
  
  .chapterSpines__finishedContent .chapterSpines__chapterIcon {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    max-width: 3rem;
    max-height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    margin: 4.6rem;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions {
    font-size: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 0;
    -webkit-transform: translateY(1.5rem);
    -ms-transform: translateY(1.5rem);
    transform: translateY(1.5rem);
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions .baton {
    opacity: 0.5;
    -webkit-transition: opacity 300ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 300ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms linear, transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    min-height: 1px;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions .baton:nth-child(2) {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions .baton:nth-child(4) {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions .baton:nth-child(5) {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions a {
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 0.15em;
    font-weight: 400;
    font-family: "guyot-headline", serif;
    display: block;
    height: 7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    cursor: pointer;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.12)), color-stop(70%, rgba(255, 255, 255, 0.2)), color-stop(90%, rgba(255, 255, 255, 0)));
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%);
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    transition: opacity 300ms linear;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions a img {
    width: 1.8rem;
    height: 1.4rem;
    margin: 0 1rem 0 -2.8rem;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions a:nth-child(1) {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  
  .chapterSpines__finishedContent .chapterSpines__finishedOptions a:nth-child(3) {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  
  @media (hover: hover) {
    .chapterSpines__finishedContent .chapterSpines__finishedOptions a:hover + .baton,
    .chapterSpines__finishedContent .chapterSpines__finishedOptions a:hover ~ .baton:last-child {
      opacity: 1;
      -webkit-transform: scaleX(0.8);
      -ms-transform: scaleX(0.8);
      transform: scaleX(0.8);
    }
  
    .chapterSpines__finishedContent .chapterSpines__finishedOptions a:hover::before {
      opacity: 1;
    }
  }
  
  .chapterSpines__baseContent {
    padding: 0 1rem 0 0.5rem;
  }
  
  .chapterSpines__hoverContent {
    opacity: 0;
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    pointer-events: none;
    -webkit-transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    -o-transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear, -webkit-filter 1ms 400ms linear;
  }
  
  .chapterSpines__chapterTitle {
    display: inline-block;
    text-align: center;
    font-family: "guyot-headline", serif;
    font-size: 2.4rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 4rem;
  }
  
  .chapterSpines__chapterIcon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
    margin: 2rem 2rem 2rem 2rem;
    opacity: 0.8;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  .chapterSpines__chapterIcon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  .chapterSpines__lastCompletedContent {
    width: 42rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    text-align: center;
  }
  
  .chapterSpines__lastCompletedContent > * {
    margin: 1rem 0;
    font-size: 3rem;
    text-transform: uppercase;
  }
  
  .chapterSpines__lockIcon {
    width: 8rem;
    height: 8rem;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .chapterSpines__comingSoon {
    position: absolute;
    left: 10rem;
    width: 10rem;
    -webkit-transform: translateX(-2rem);
    -ms-transform: translateX(-2rem);
    transform: translateX(-2rem);
    -webkit-transition: -webkit-transform 1ms 400ms linear;
    transition: -webkit-transform 1ms 400ms linear;
    -o-transition: transform 1ms 400ms linear;
    transition: transform 1ms 400ms linear;
    transition: transform 1ms 400ms linear, -webkit-transform 1ms 400ms linear;
  }
  
  .chapterSpines__comingSoon > div {
    position: absolute;
    top: 50%;
    left: 65%;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
    text-align: center;
  }
  
  .chapterSpines__comingSoon > div > span {
    font-size: 1.1rem;
    text-transform: uppercase;
    font-family: "guyot-headline", serif;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
  }
  
  .chapterSpines__comingSoon > div .button {
    min-width: 12rem;
  }
  
  .chapterSpines__comingSoon > div .button .button__inner {
    font-size: 1rem;
  }
  
  .chapterSpines__hoverCenter {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    text-align: center;
    max-height: 30rem;
    position: absolute;
    height: 30rem;
    left: 15rem;
    -webkit-transform: translateX(-50%) translateX(-2rem);
    -ms-transform: translateX(-50%) translateX(-2rem);
    transform: translateX(-50%) translateX(-2rem);
    -webkit-transition: -webkit-transform 1ms 400ms linear;
    transition: -webkit-transform 1ms 400ms linear;
    -o-transition: transform 1ms 400ms linear;
    transition: transform 1ms 400ms linear;
    transition: transform 1ms 400ms linear, -webkit-transform 1ms 400ms linear;
  }
  
  .chapterSpines__hoverCenter a {
    -webkit-writing-mode: initial;
    -ms-writing-mode: initial;
    writing-mode: initial;
    -webkit-text-orientation: initial;
    text-orientation: initial;
    position: absolute;
    left: -3rem;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .chapterSpines__hoverCenter a img {
    height: 5.5rem;
  }
  
  .chapterSpines__centerTitle {
    font-family: "guyot-headline", serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4;
    font-size: 3rem;
  }
  
  .chapterSpines__chapterSmall {
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    margin-left: 1.5rem;
  }
  
  .chapterSpines__chapterNumber {
    counter-increment: chapter;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family: "guyot-headline", serif;
    font-size: 3.5rem;
    letter-spacing: 0.05em;
    margin: 0 1rem 0 0.5rem;
  }
  
  .chapterSpines__chapterWord {
    position: relative;
    text-transform: uppercase;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family: "guyot-headline", serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    margin: 0 0rem 0 4rem;
  }
  
  .chapterSpines__chapterWord:before {
    content: "Book";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
  
  .chapterSpines .chapterCover__center {
    opacity: 0;
    -webkit-transition: opacity 400ms linear, -webkit-transform 1ms 400ms;
    transition: opacity 400ms linear, -webkit-transform 1ms 400ms;
    -o-transition: opacity 400ms linear, transform 1ms 400ms;
    transition: opacity 400ms linear, transform 1ms 400ms;
    transition: opacity 400ms linear, transform 1ms 400ms, -webkit-transform 1ms 400ms;
    pointer-events: none;
    -webkit-transform: translate3d(-50%, -35%, 0) !important;
    transform: translate3d(-50%, -35%, 0) !important;
  }
  
  .chapterSpines .chapterCover__center .chapterCover__subheading {
    opacity: 0;
    -webkit-transition: opacity 1ms 600ms;
    -o-transition: opacity 1ms 600ms;
    transition: opacity 1ms 600ms;
  }
  
  .chapterSpines .chapterCover__center .chapterCover__heading {
    -webkit-transform: translateY(2rem);
    -ms-transform: translateY(2rem);
    transform: translateY(2rem);
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    -webkit-transition: -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
    transition: -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
    -o-transition: transform 1ms 600ms, filter 1ms 600ms;
    transition: transform 1ms 600ms, filter 1ms 600ms;
    transition: transform 1ms 600ms, filter 1ms 600ms, -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
  }
  
  .chapterSpines .chapterCover__center .chapterCover__blurb {
    -webkit-transform: translateY(1rem);
    -ms-transform: translateY(1rem);
    transform: translateY(1rem);
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    -webkit-transition: -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
    transition: -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
    -o-transition: transform 1ms 600ms, filter 1ms 600ms;
    transition: transform 1ms 600ms, filter 1ms 600ms;
    transition: transform 1ms 600ms, filter 1ms 600ms, -webkit-transform 1ms 600ms, -webkit-filter 1ms 600ms;
  }
  
  .chapterSpines .chapterCover__center .baton {
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 1ms 600ms;
    transition: -webkit-transform 1ms 600ms;
    -o-transition: transform 1ms 600ms;
    transition: transform 1ms 600ms;
    transition: transform 1ms 600ms, -webkit-transform 1ms 600ms;
    opacity: 0.4;
  }
  
  .chapterSpines .chapterCover__center .baton.tr,
  .chapterSpines .chapterCover__center .baton.bl {
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
  }
  
  .chapterSpines .chapterCover__center .baton.tl,
  .chapterSpines .chapterCover__center .baton.br {
    -webkit-transform-origin: right;
    -ms-transform-origin: right;
    transform-origin: right;
  }
  
  .chapterSpines .chapterCover__center .baton.l,
  .chapterSpines .chapterCover__center .baton.r {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
  }
  
  .chapterSpines__finishedContent {
    position: absolute;
  }
  
  .chapterSpines__chapter.locked:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222222;
    opacity: 0.3;
    pointer-events: none;
  }
  
  .chapterSpines__chapter.locked .chapterSpines__image:after {
    opacity: 0.65;
  }
  
  .chapterSpines__chapter.locked .chapterSpines__baseContent {
    opacity: 1;
  }
  
  .chapterSpines__chapter.locked.last:after {
    opacity: 0.15;
  }
  
  .chapterSpines__chapter.locked.last .chapterSpines__image:after {
    opacity: 0.3;
  }
  
  .chapterSpines__chapter.locked.last .chapterSpines__baseContent {
    z-index: 2;
  }
  
  .chapterSpines__chapter:hover {
    -webkit-box-flex: 2.5;
    -ms-flex: 2.5;
    flex: 2.5;
    -webkit-transition: -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
    transition: -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
    -o-transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
    transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
    transition: flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms, -webkit-box-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms, -ms-flex cubic-bezier(0.525, 0.06, 0.11, 0.995) 1200ms;
  }
  
  .chapterSpines__chapter:hover .chapterSpines__image:after {
    opacity: 0;
  }
  
  .chapterSpines__chapter:hover .chapterSpines__baseContent .baton {
    opacity: 0;
    -webkit-transition: opacity 200ms 200ms linear;
    -o-transition: opacity 200ms 200ms linear;
    transition: opacity 200ms 200ms linear;
  }
  
  .chapterSpines__chapter:hover .chapterSpines__hoverContent {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    pointer-events: auto;
    -webkit-transition: opacity 500ms 300ms linear, -webkit-filter 500ms 300ms linear;
    transition: opacity 500ms 300ms linear, -webkit-filter 500ms 300ms linear;
    -o-transition: opacity 500ms 300ms linear, filter 500ms 300ms linear;
    transition: opacity 500ms 300ms linear, filter 500ms 300ms linear;
    transition: opacity 500ms 300ms linear, filter 500ms 300ms linear, -webkit-filter 500ms 300ms linear;
  }
  
  .chapterSpines__chapter:hover .chapterSpines__hoverCenter {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .chapterSpines__chapter:hover .chapterSpines__comingSoon {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 900ms 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .chapterSpines__chapter:hover .chapterSpines__border {
    opacity: 0.3;
    -webkit-transition: opacity 400ms 200ms linear;
    -o-transition: opacity 400ms 200ms linear;
    transition: opacity 400ms 200ms linear;
  }
  
  .chapterSpines__chapter:not(.locked):not(.finished):hover .chapterSpines__completed,
  .chapterSpines__chapter:not(.locked):not(.finished):hover .chapterSpines__chapterIcon {
    opacity: 1;
  }
  
  .chapterSpines__chapter.locked:hover {
    -webkit-box-flex: 1.35;
    -ms-flex: 1.35;
    flex: 1.35;
  }
  
  .chapterSpines__chapter.locked:hover .chapterSpines__image:after {
    opacity: 0.5;
  }
  
  .chapterSpines__chapter.locked:hover .baton {
    opacity: 0.15;
  }
  
  .chapterSpines__chapter.locked:hover .chapterSpines__lockIcon + .baton {
    opacity: 0;
    -webkit-transition: opacity 200ms 200ms linear;
    -o-transition: opacity 200ms 200ms linear;
    transition: opacity 200ms 200ms linear;
  }
  
  .chapterSpines.focussed .chapterSpines__back {
    opacity: 1 !important;
    pointer-events: auto;
    -webkit-transition: opacity 400ms 800ms linear !important;
    -o-transition: opacity 400ms 800ms linear !important;
    transition: opacity 400ms 800ms linear !important;
  }
  
  .chapterSpines.focussed .chapterSpines__chapter {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    -webkit-transition: min-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: min-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), min-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), max-width 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -ms-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .chapterSpines.focussed .chapterSpines__chapter.focus {
    -webkit-box-flex: 8;
    -ms-flex: 8;
    flex: 8;
    -webkit-transition: -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-box-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -ms-flex 1600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .chapterSpines.focussed .chapterSpines__baseContent {
    opacity: 0;
    pointer-events: none;
  }
  
  .chapterSpines.focussed .chapterSpines__baseContent {
    -webkit-transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    -o-transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear, -webkit-filter 1ms 400ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__image:after {
    opacity: 0;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__border {
    opacity: 0;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) !important;
    transform: translate3d(-50%, -50%, 0) !important;
    -webkit-transition: opacity 600ms 400ms linear, -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms 400ms linear, -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 600ms 400ms linear, transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms 400ms linear, transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 600ms 400ms linear, transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 800ms 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    pointer-events: auto;
  }
  
  @media screen and (max-width: 1023px) {
    html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center {
      -webkit-transform: translate3d(-50%, -55%, 0) !important;
      transform: translate3d(-50%, -55%, 0) !important;
    }
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__hoverContent {
    opacity: 0;
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    pointer-events: auto;
    -webkit-transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    transition: opacity 400ms linear, -webkit-filter 1ms 400ms linear;
    -o-transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear;
    transition: opacity 400ms linear, filter 1ms 400ms linear, -webkit-filter 1ms 400ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__hoverCenter {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__focusLink {
    display: none;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__completed {
    -webkit-transform: translateX(-50%) translateY(0rem);
    -ms-transform: translateX(-50%) translateY(0rem);
    transform: translateX(-50%) translateY(0rem);
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__subheading {
    opacity: 1;
    -webkit-transition: opacity 400ms 600ms linear;
    -o-transition: opacity 400ms 600ms linear;
    transition: opacity 400ms 600ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__heading {
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition: -webkit-transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 600ms linear;
    transition: -webkit-transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 600ms linear;
    -o-transition: transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 600ms linear;
    transition: transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 600ms linear;
    transition: transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 600ms linear, -webkit-transform 1200ms 600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 600ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__blurb {
    -webkit-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition: -webkit-transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 700ms linear;
    transition: -webkit-transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 700ms linear;
    -o-transition: transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 700ms linear;
    transition: transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 700ms linear;
    transition: transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 300ms 700ms linear, -webkit-transform 1400ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 300ms 700ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterSpines__extraLinks {
    opacity: 1;
    -webkit-transition: opacity 1000ms 300ms linear;
    -o-transition: opacity 1000ms 300ms linear;
    transition: opacity 1000ms 300ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center .baton {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425);
    transition: -webkit-transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425);
    -o-transition: transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425);
    transition: transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425);
    transition: transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425), -webkit-transform 400ms 800ms cubic-bezier(0.26, 0.005, 0.955, 0.425);
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center .baton.l,
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center .baton.r {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: -webkit-transform 200ms 1200ms linear;
    transition: -webkit-transform 200ms 1200ms linear;
    -o-transition: transform 200ms 1200ms linear;
    transition: transform 200ms 1200ms linear;
    transition: transform 200ms 1200ms linear, -webkit-transform 200ms 1200ms linear;
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center .baton.bl,
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__center .baton.br {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transition: -webkit-transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 500ms 1400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  html:not(.intro-window) .chapterSpines.focussed .chapterSpines__chapter:not(.locked):not(.finished).focus .chapterCover__playButton {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(1.5rem);
    -ms-transform: translateY(1.5rem);
    transform: translateY(1.5rem);
    -webkit-transition: opacity 300ms 800ms, -webkit-transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 500ms 800ms linear;
    transition: opacity 300ms 800ms, -webkit-transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 500ms 800ms linear;
    -o-transition: transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 500ms 800ms linear, opacity 300ms 800ms;
    transition: transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 500ms 800ms linear, opacity 300ms 800ms;
    transition: transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 500ms 800ms linear, opacity 300ms 800ms, -webkit-transform 1400ms 800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 500ms 800ms linear;
  }
  
  .chapterSpines.finished {
    opacity: 1;
    -webkit-transition: opacity 1000ms 1000ms;
    -o-transition: opacity 1000ms 1000ms;
    transition: opacity 1000ms 1000ms;
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished {
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
    min-width: 70rem;
    max-width: 70rem;
    pointer-events: none;
  }
  
  @media screen and (max-width: 1023px) {
    .chapterSpines.finished .chapterSpines__chapter.finished {
      min-width: 45rem;
      max-width: 45rem;
    }
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__image:after {
    opacity: 0;
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__baseContent,
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__hoverContent,
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__image .border {
    display: none;
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterCover__center,
  .chapterSpines.finished .chapterSpines__chapter.finished .border__content {
    pointer-events: none !important;
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__completed {
    -webkit-transform: translateX(-50%) translateY(0rem);
    -ms-transform: translateX(-50%) translateY(0rem);
    transform: translateX(-50%) translateY(0rem);
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__finishedContent {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: opacity 800ms 1500ms linear, -webkit-transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 800ms 1500ms linear, -webkit-transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 1500ms linear;
    transition: transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 1500ms linear;
    transition: transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 1500ms linear, -webkit-transform 800ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  @media screen and (max-width: 1023px) {
    .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__finishedContent {
      width: 30rem;
    }
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__finishedOptions {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 800ms 2000ms linear, -webkit-transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 800ms 2000ms linear, -webkit-transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 2000ms linear;
    transition: transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 2000ms linear;
    transition: transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 800ms 2000ms linear, -webkit-transform 800ms 2000ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__extraLinks {
    opacity: 1;
    -webkit-transition: opacity 1000ms 1800ms linear;
    -o-transition: opacity 1000ms 1800ms linear;
    transition: opacity 1000ms 1800ms linear;
    bottom: 15rem;
    z-index: 2;
    pointer-events: auto;
  }
  
  html:not(.ch1) .chapterSpines__chapter:nth-child(1) .chapterSpines__completed,
  html:not(.ch2) .chapterSpines__chapter:nth-child(2) .chapterSpines__completed,
  html:not(.ch3) .chapterSpines__chapter:nth-child(3) .chapterSpines__completed,
  html:not(.ch4) .chapterSpines__chapter:nth-child(4) .chapterSpines__completed,
  html:not(.ch5) .chapterSpines__chapter:nth-child(5) .chapterSpines__completed,
  html:not(.ch6) .chapterSpines__chapter:nth-child(6) .chapterSpines__completed {
    opacity: 0 !important;
  }
  
  .chapterSpines.playing {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 1500ms;
    -o-transition: opacity 1500ms;
    transition: opacity 1500ms;
  }
  
  .chapterSpines.playing + .chapterPlayer {
    opacity: 1;
    -webkit-transition: opacity 2000ms 1500ms;
    -o-transition: opacity 2000ms 1500ms;
    transition: opacity 2000ms 1500ms;
    pointer-events: auto;
  }
  
  .chapterSpines.playing .chapterCover__center,
  .chapterSpines.playing .border__content {
    pointer-events: none !important;
  }
  
  @media screen and (max-width: 1023px) {
    .chapterSpines {
      height: var(--app-height);
      min-height: var(--app-height);
      max-height: var(--app-height);
    }
  
    .chapterSpines__hoverCenter {
      height: 19.7866666667rem;
      left: 16.96rem;
    }
  
    .chapterSpines__baseContent {
      padding-left: 0;
      width: var(--app-height);
    }
  
    .chapterSpines__comingSoon {
      left: calc(var(--app-height) * 0.2 + 2rem);
    }
  
    .chapterSpines__centerTitle {
      font-size: 2.332rem;
    }
  
    .chapterSpines .chapterCover__center {
      width: 56.5333333333rem;
      padding: calc(var(--app-height) * 0.1) 10.2vh calc(var(--app-height) * 0.15);
    }
  
    .chapterSpines .chapterCover__subheading {
      margin-bottom: 3.4vh;
    }
  
    .chapterSpines .chapterCover__heading {
      font-size: 7.48vh;
      margin-bottom: calc(var(--app-height) * 0.025);
    }
  
    .chapterSpines .chapterCover__blurb {
      font-size: 3.06vh;
    }
  
    .chapterSpines .chapterCover__playButton {
      width: 15.5466666667rem;
    }
  
    .chapterSpines__finishedContent {
      margin-top: -6.8vh;
    }
  
    .chapterSpines__finishedContent lottie-player {
      margin: -4rem 0;
      width: 100%;
    }
  
    .chapterSpines__finishedContent .chapterCover__heading {
      font-size: 8.5vh;
    }
  
    .chapterSpines__finishedContent .chapterSpines__chapterIcon {
      max-width: 5.1vh;
      min-width: 5.1vh;
      min-height: 5.1vh;
      max-height: 5.1vh;
      margin: 5.1vh;
    }
  
    .chapterSpines__finishedContent .chapterSpines__finishedOptions {
      width: 66%;
      margin: auto;
    }
  
    .chapterSpines__finishedContent .chapterSpines__finishedOptions a {
      height: 4.5rem;
      font-size: 1.2rem;
    }
  
    .chapterSpines.finished .chapterSpines__chapter.finished .chapterSpines__extraLinks {
      bottom: 1.5rem;
    }
  
    .chapterSpines.finished .chapterSpines__chapter {
      -webkit-box-flex: 0;
      -ms-flex: 0;
      flex: 0;
    }
  
    .chapterSpines.finished .chapterSpines__chapter.finished + .chapterSpines__chapter {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }
  
  .chapterCover {
    width: 100%;
    height: 100%;
  }
  
  .chapterCover__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .chapterCover__center {
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 93rem;
    min-height: 48rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 10rem 5rem;
  }
  
  .chapterCover__center:after {
    content: "";
    position: absolute;
    top: 1.7rem;
    left: 1.7rem;
    height: calc(100% - 3.4rem);
    width: calc(100% - 3.4rem);
    background: rgba(52, 52, 52, 0.2);
    z-index: -1;
  }
  
  .chapterCover__blurb {
    width: 42rem;
  }
  
  .chapterCover__premierTime {
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 0.1em;
    line-height: 1.4;
    white-space: pre;
    margin-bottom: -1rem;
    display: inline-block;
  }
  
  @media screen and (max-width: 1023px) {
    .chapterCover__premierTime {
      font-size: 1.6rem;
    }
  }
  
  .chapterCover__playButton {
    position: relative;
    z-index: 2;
    width: 8rem;
    height: 4.5rem;
    -webkit-transform: translateY(3.5rem);
    -ms-transform: translateY(3.5rem);
    transform: translateY(3.5rem);
    opacity: 0;
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    -webkit-transition: opacity 1ms 500ms linear, -webkit-transform 1ms 500ms linear, -webkit-filter 1ms 500ms linear;
    transition: opacity 1ms 500ms linear, -webkit-transform 1ms 500ms linear, -webkit-filter 1ms 500ms linear;
    -o-transition: transform 1ms 500ms linear, filter 1ms 500ms linear, opacity 1ms 500ms linear;
    transition: transform 1ms 500ms linear, filter 1ms 500ms linear, opacity 1ms 500ms linear;
    transition: transform 1ms 500ms linear, filter 1ms 500ms linear, opacity 1ms 500ms linear, -webkit-transform 1ms 500ms linear, -webkit-filter 1ms 500ms linear;
  }
  
  .chapterCover__playButton .button__bg::before {
    border-radius: 3rem;
  }
  
  .chapterCover__playButton .button__bg::after {
    border-radius: 3rem;
  }
  
  .chapterCover__playButton .button__icon {
    width: 2rem;
    height: 2rem;
  }
  
  @media screen and (max-width: 1023px) {
    .chapterCover__center {
      width: 62rem;
      min-height: 20rem;
      padding: 6rem 5rem 8rem;
    }
  
    .chapterCover__center:after {
      background: rgba(52, 52, 52, 0.3);
    }
  
    .chapterCover__subheading {
      font-size: 1.2rem;
    }
  
    .chapterCover__heading {
      font-size: 4rem;
    }
  
    .chapterCover__blurb {
      font-size: 1.7rem;
    }
  }
  
  .videoPlayer {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .videoPlayer__video {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: relative;
  }
  
  .videoPlayer__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.66;
    -webkit-transition: 300ms linear;
    -o-transition: 300ms linear;
    transition: 300ms linear;
  }
  
  .videoPlayer__iframe {
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  
  .videoPlayer__cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: black;
  }
  
  .videoPlayer__cover img {
    opacity: 0.5;
  }
  
  .videoPlayer__coverContent {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    color: white;
    text-transform: uppercase;
    font-size: 4rem;
    opacity: 0.75;
  }
  
  .videoPlayer__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6.5rem;
    width: 100%;
    padding: 0 2rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
    opacity: 0.2;
    opacity: 1;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.5)));
    background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 50%);
  }
  
  .videoPlayer__controls .volumeControl {
    min-width: 16rem;
  }
  
  .videoPlayer__timeline {
    height: 3rem;
    width: 100%;
    margin: 0 2.5rem -0.25rem 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  @media (hover: hover) {
    .videoPlayer__timeline:hover .videoPlayer__timelineProgress {
      background: white;
    }
  
    .videoPlayer__timeline:hover .videoPlayer__timelineInner {
      background: rgba(255, 255, 255, 0.5);
    }
  }
  
  .videoPlayer__timelineTime {
    font-family: "anonymous-pro", monospace;
    font-weight: 500;
    font-size: 1.2rem;
    min-width: 4rem;
    max-width: 4rem;
    text-align: center;
    white-space: nowrap;
  }
  
  .videoPlayer__timelineInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 4px;
    background: rgba(255, 255, 255, 0.33);
    -webkit-transition: background 100ms linear;
    -o-transition: background 100ms linear;
    transition: background 100ms linear;
    width: 100%;
    border-radius: 2px;
    margin: 0 0.2rem 0 0.7rem;
    position: relative;
  }
  
  .videoPlayer__segments {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
  }
  
  .videoPlayer__segment {
    position: relative;
    height: 2rem;
    margin-top: calc(2px - 1rem);
  }
  
  @media (hover: hover) {
    .videoPlayer__segment:hover .videoPlayer__segmentTooltip {
      opacity: 1;
      -webkit-transform: translateY(0) translateX(-50%);
      -ms-transform: translateY(0) translateX(-50%);
      transform: translateY(0) translateX(-50%);
    }
  }
  
  .videoPlayer__segmentStart {
    position: absolute;
    left: 0;
    top: 50%;
  }
  
  .videoPlayer__segmentStart:after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background: white;
  }
  
  .videoPlayer__segmentTooltip {
    position: absolute;
    left: 0;
    bottom: 3rem;
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    background: white;
    font-family: "arpona", serif;
    color: #474747;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1rem;
    opacity: 0;
    -webkit-transform: translateY(1rem) translateX(-50%);
    -ms-transform: translateY(1rem) translateX(-50%);
    transform: translateY(1rem) translateX(-50%);
    -webkit-transition: opacity 200ms linear, -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear;
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear;
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 200ms linear, -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .videoPlayer__segmentTooltip:before {
    content: "";
    position: absolute;
    bottom: -0.4rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateX(-0.5rem) rotate(45deg);
    -ms-transform: translateX(-0.5rem) rotate(45deg);
    transform: translateX(-0.5rem) rotate(45deg);
    background: white;
  }
  
  .videoPlayer__timelineProgress {
    position: absolute;
    top: -1px;
    height: 6px;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    width: 0;
    -webkit-transition: width 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear;
    -o-transition: width 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear;
    transition: width 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear;
  }
  
  .videoPlayer__bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 5rem;
    margin-top: 0.7rem;
  }
  
  .videoPlayer__playButton {
    display: inline-block;
    margin-left: 6.5rem;
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
    border-radius: 100%;
    cursor: pointer;
    background-image: url(images/play-button.svg);
    background-position: center;
    background-size: 4rem;
    background-repeat: no-repeat;
  }
  
  .videoPlayer__mediaTitle {
    text-transform: uppercase;
    font-size: 1.6rem;
    font-family: "guyot-headline", serif;
  }
  
  .videoPlayer__video:before,
  .videoPlayer__video:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 24vh;
    min-height: 18.5rem;
    background: black;
    z-index: 1;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    pointer-events: none;
  }
  
  @media screen and (max-width: 1023px) {
    .videoPlayer__video:before,
    .videoPlayer__video:after {
      height: 20rem;
      min-height: 0;
      max-height: 35vh;
    }
  }
  
  .videoPlayer__video:before {
    top: 0;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
  }
  
  .videoPlayer__video:after {
    bottom: 0;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
  }
  
  .videoPlayer.playing:not(.started) .videoPlayer__timeline,
  .videoPlayer.ended .videoPlayer__timeline {
    opacity: 0;
    -webkit-transition: opacity 1000ms 500ms linear;
    -o-transition: opacity 1000ms 500ms linear;
    transition: opacity 1000ms 500ms linear;
  }
  
  .videoPlayer.playing:not(.started) .videoPlayer__controls,
  .videoPlayer.ended .videoPlayer__controls {
    opacity: 0;
    -webkit-transition: opacity 1000ms 500ms linear;
    -o-transition: opacity 1000ms 500ms linear;
    transition: opacity 1000ms 500ms linear;
  }
  
  .videoPlayer.playing:not(.started) .videoPlayer__video:before,
  .videoPlayer.playing:not(.started) .videoPlayer__video:after,
  .videoPlayer.ended .videoPlayer__video:before,
  .videoPlayer.ended .videoPlayer__video:after {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .videoPlayer.playing:not(.started) .videoPlayer__player,
  .videoPlayer.ended .videoPlayer__player {
    opacity: 1;
    -webkit-transition: 200ms linear;
    -o-transition: 200ms linear;
    transition: 200ms linear;
  }
  
  .videoPlayer.playing:not(.started) .videoPlayer__playButton,
  .videoPlayer.ended .videoPlayer__playButton {
    background-image: url(images/pause-button.svg);
  }
  
  .videoPlayer.ended {
    opacity: 0;
    -webkit-transition: opacity 1000ms;
    -o-transition: opacity 1000ms;
    transition: opacity 1000ms;
  }
  
  .videoPlayer.ended .videoPlayer__iframe {
    display: none;
  }
  
  .chapterPlayer {
    position: absolute;
    top: 0;
    left: -6.5rem;
    width: calc(100% + 6.5rem);
    opacity: 0;
    pointer-events: none;
  }
  
  .still .videoPlayer__video,
  .still .videoPlayer__controls {
    cursor: none;
  }
  
  @media (hover: hover) {
    html:not(.still) .videoPlayer__controls:hover {
      opacity: 1;
      -webkit-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
    }
  
    html:not(.still) .videoPlayer__controls:hover .videoPlayer__timeline {
      opacity: 1;
      -webkit-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
    }
  }
  
  .loadingScreen {
    position: fixed;
    z-index: 1000;
    top: 0;
    letter-spacing: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    top: 0;
    background: #222222;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .loadingScreen__inner {
    font-size: 3rem;
    opacity: 1;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .loadingScreen.hidden .loadingScreen__inner {
    opacity: 0;
  }
  
  .loadingScreen__icon {
    height: 3rem;
    width: 3rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(images/icon-chapter0.svg);
    margin: auto;
  }
  
  .loadingScreen__bar {
    display: block;
    width: 15rem;
    height: 2px;
    position: relative;
    margin-top: 4.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .loadingScreen__barInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    background: white;
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .loadingScreen__number {
    font-size: 1.1rem;
    font-family: "anonymous-pro", monospace;
    letter-spacing: 0;
  }
  
  .loadingScreen__number:after {
    content: "%";
    font-size: 0.5em;
  }
  
  .loading-done .loadingScreen {
    opacity: 0;
    -webkit-transition: opacity 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1000ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    pointer-events: none;
  }
  
  .loading-intro .loadingScreen {
    background: rgba(34, 34, 34, 0);
  }
  
  .loading-intro .loadingScreen__bar,
  .loading-intro .loadingScreen__number {
    opacity: 0;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
  }
  
  .loading-intro .loadingScreen__icon {
    -webkit-transform: translateY(-12rem) scale(0.5);
    -ms-transform: translateY(-12rem) scale(0.5);
    transform: translateY(-12rem) scale(0.5);
    opacity: 0.8;
    -webkit-transition: opacity 800ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms;
    transition: opacity 800ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms;
    -o-transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms, opacity 800ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms, opacity 800ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms, opacity 800ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1500ms;
  }
  
  .loading-intro.loading-done .loadingScreen__icon {
    -webkit-transform: translateY(-15rem) scale(0.5);
    -ms-transform: translateY(-15rem) scale(0.5);
    transform: translateY(-15rem) scale(0.5);
    opacity: 0;
    -webkit-transition: opacity 600ms linear, -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms;
    transition: opacity 600ms linear, -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms;
    -o-transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms, opacity 600ms linear;
    transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms, opacity 600ms linear;
    transition: transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms, opacity 600ms linear, -webkit-transform cubic-bezier(0.26, 0.005, 0.955, 0.425) 600ms;
  }
  
  html.ch1 .loadingScreen__icon {
    background-image: url(images/icon-chapter1.svg);
  }
  
  html.ch2 .loadingScreen__icon {
    background-image: url(images/icon-chapter2.svg);
  }
  
  html.ch3 .loadingScreen__icon {
    background-image: url(images/icon-chapter3.svg);
  }
  
  html.ch4 .loadingScreen__icon {
    background-image: url(images/icon-chapter4.svg);
  }
  
  html.ch5 .loadingScreen__icon {
    background-image: url(images/icon-chapter5.svg);
  }
  
  html.ch6 .loadingScreen__icon {
    background-image: url(images/icon-chapter6.svg);
  }
  
  .introScreenAlt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
  }
  
  .introScreenAlt__welcomeMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 80rem;
    text-align: center;
    font-size: 1.6rem;
    line-height: 2;
    font-style: italic;
    letter-spacing: 0.03em;
    color: #C3C0BC;
  }
  
  .introScreenAlt__welcomeMessage em {
    text-transform: uppercase;
    font-style: normal;
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    color: #D9D9D9;
  }
  
  .introScreenAlt__welcomeMessage img {
    height: 6rem;
    width: auto;
    margin-top: 4rem;
    opacity: 0;
  }
  
  .introScreenAlt__welcomeMessage img.in {
    opacity: 0.8;
    -webkit-transition: opacity 800ms linear;
    -o-transition: opacity 800ms linear;
    transition: opacity 800ms linear;
  }
  
  .introScreenAlt__welcomeMessage p span,
  .introScreenAlt__welcomeMessage p em {
    margin: 0 0.13em;
    opacity: 0;
    -webkit-transform: translateY(1em);
    -ms-transform: translateY(1em);
    transform: translateY(1em);
    -webkit-filter: blur(0.3em);
    filter: blur(0.3em);
    position: relative;
    display: inline-block;
  }
  
  .introScreenAlt__welcomeMessage p.in span,
  .introScreenAlt__welcomeMessage p.in em {
    opacity: 1;
    -webkit-transform: translateY(0.01em);
    -ms-transform: translateY(0.01em);
    transform: translateY(0.01em);
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: opacity 1200ms linear, -webkit-transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 800ms linear;
    transition: opacity 1200ms linear, -webkit-transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 800ms linear;
    -o-transition: opacity 1200ms linear, transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 800ms linear;
    transition: opacity 1200ms linear, transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 800ms linear;
    transition: opacity 1200ms linear, transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 800ms linear, -webkit-transform 1600ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 800ms linear;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(1),
  .introScreenAlt__welcomeMessage p.in em:nth-child(1) {
    -webkit-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(2),
  .introScreenAlt__welcomeMessage p.in em:nth-child(2) {
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(3),
  .introScreenAlt__welcomeMessage p.in em:nth-child(3) {
    -webkit-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(4),
  .introScreenAlt__welcomeMessage p.in em:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(5),
  .introScreenAlt__welcomeMessage p.in em:nth-child(5) {
    -webkit-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(6),
  .introScreenAlt__welcomeMessage p.in em:nth-child(6) {
    -webkit-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(7),
  .introScreenAlt__welcomeMessage p.in em:nth-child(7) {
    -webkit-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(8),
  .introScreenAlt__welcomeMessage p.in em:nth-child(8) {
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(9),
  .introScreenAlt__welcomeMessage p.in em:nth-child(9) {
    -webkit-transition-delay: 450ms;
    -o-transition-delay: 450ms;
    transition-delay: 450ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(10),
  .introScreenAlt__welcomeMessage p.in em:nth-child(10) {
    -webkit-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(11),
  .introScreenAlt__welcomeMessage p.in em:nth-child(11) {
    -webkit-transition-delay: 550ms;
    -o-transition-delay: 550ms;
    transition-delay: 550ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(12),
  .introScreenAlt__welcomeMessage p.in em:nth-child(12) {
    -webkit-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(13),
  .introScreenAlt__welcomeMessage p.in em:nth-child(13) {
    -webkit-transition-delay: 650ms;
    -o-transition-delay: 650ms;
    transition-delay: 650ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(14),
  .introScreenAlt__welcomeMessage p.in em:nth-child(14) {
    -webkit-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    transition-delay: 700ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(15),
  .introScreenAlt__welcomeMessage p.in em:nth-child(15) {
    -webkit-transition-delay: 750ms;
    -o-transition-delay: 750ms;
    transition-delay: 750ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(16),
  .introScreenAlt__welcomeMessage p.in em:nth-child(16) {
    -webkit-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    transition-delay: 800ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(17),
  .introScreenAlt__welcomeMessage p.in em:nth-child(17) {
    -webkit-transition-delay: 850ms;
    -o-transition-delay: 850ms;
    transition-delay: 850ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(18),
  .introScreenAlt__welcomeMessage p.in em:nth-child(18) {
    -webkit-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    transition-delay: 900ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(19),
  .introScreenAlt__welcomeMessage p.in em:nth-child(19) {
    -webkit-transition-delay: 950ms;
    -o-transition-delay: 950ms;
    transition-delay: 950ms;
  }
  
  .introScreenAlt__welcomeMessage p.in span:nth-child(20),
  .introScreenAlt__welcomeMessage p.in em:nth-child(20) {
    -webkit-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;
  }
  
  .introScreenAlt__buttons {
    position: absolute;
    bottom: calc(10rem + 11vh);
    left: 50%;
    margin-left: -1.125rem;
    -webkit-transform: translateX(-50%) translateY(55vh);
    -ms-transform: translateX(-50%) translateY(55vh);
    transform: translateX(-50%) translateY(55vh);
    width: 55rem;
    text-align: center;
    pointer-events: none;
    opacity: 0;
  }
  
  .introScreenAlt__behind {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 6.5rem;
    width: calc(100vw - 6.5rem);
    background: #777;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateY(80vh) scale(1.5);
    -ms-transform: translateY(80vh) scale(1.5);
    transform: translateY(80vh) scale(1.5);
  }
  
  .introScreenAlt__behindInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .introScreenAlt__explore,
  .introScreenAlt__chapters {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .introScreenAlt__chapters {
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    z-index: 1;
  }
  
  .introScreenAlt__explore {
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .introScreenAlt__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  
  .introScreenAlt__bgH::before,
  .introScreenAlt__bgH:after,
  .introScreenAlt__bgV::before,
  .introScreenAlt__bgV:after {
    content: "";
    position: absolute;
    background-color: #222222;
  }
  
  .introScreenAlt__bgH::before {
    width: 100vw;
    height: 200vh;
    bottom: 98%;
    left: calc(50% - 50vw);
  }
  
  .introScreenAlt__bgH::after {
    width: 100vw;
    height: 50vh;
    top: 98%;
    left: calc(50% - 50vw);
  }
  
  .introScreenAlt__bgV::before {
    width: 50vw;
    height: 110%;
    top: -5%;
    right: 98%;
  }
  
  .introScreenAlt__bgV::after {
    width: 50vw;
    height: 110%;
    top: -5%;
    left: 98%;
  }
  
  .introScreenAlt__window {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 44rem;
    height: 44rem;
    -webkit-transform: translate3d(-50%, -50%, 0) translateY(90vh);
    transform: translate3d(-50%, -50%, 0) translateY(90vh);
    max-width: calc(100vh - 43rem);
    max-height: calc(100vh - 43rem);
    z-index: -1;
  }
  
  .introScreenAlt__window:after {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    border: 1rem solid #222222;
    z-index: 2;
  }
  
  .introScreenAlt__window::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: -2rem;
    width: calc(100% + 4rem);
    height: calc(100% + 4rem);
    background-image: url(images/window-border.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
  }
  
  .introScreenAlt__window img {
    display: none;
  }
  
  .introScreenAlt__windowCrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .introScreenAlt__windowFrame {
    position: absolute;
    top: -11rem;
    left: -11rem;
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    border-radius: 100%;
    border: 12rem solid #222222;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 1;
  }
  
  .introScreenAlt__windowInner {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(2) translateY(-33vh);
    transform: translate3d(-50%, -50%, 0) scale(2) translateY(-33vh);
  }
  
  .introScreenAlt__windowInner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .introScreenAlt__windowBaton {
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    width: 7rem;
    max-width: calc(50vh - 40rem);
    min-width: 2rem;
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(90deg) scaleX(0);
    -ms-transform: rotate(90deg) scaleX(0);
    transform: rotate(90deg) scaleX(0);
    opacity: 0;
  }
  
  .introScreenAlt__title {
    position: absolute;
    top: 40%;
    width: 100%;
    font-family: "guyot-headline", serif;
    font-size: 9rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.9rem;
    text-transform: uppercase;
  }
  
  .introScreenAlt__title span {
    position: absolute;
    -webkit-transform: translateY(-50%) translateY(50vh);
    -ms-transform: translateY(-50%) translateY(50vh);
    transform: translateY(-50%) translateY(50vh);
    opacity: 0;
    -webkit-filter: blur(0.3em);
    filter: blur(0.3em);
  }
  
  .introScreenAlt__title span:nth-child(1) {
    right: 112rem;
  }
  
  .introScreenAlt__title span:nth-child(2) {
    font-size: 1.6rem;
    line-height: 2.1rem;
    /* 131.25% */
    letter-spacing: 0.24rem;
    left: 112.5rem;
    text-align: center;
    top: 0.4rem;
    height: 6.2rem;
    width: 5.2rem;
    padding: 0.8rem 0;
  }
  
  .introScreenAlt__title span:nth-child(2)::before,
  .introScreenAlt__title span:nth-child(2)::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    opacity: 0.4;
  }
  
  .introScreenAlt__title span:nth-child(2)::before {
    top: 0rem;
  }
  
  .introScreenAlt__title span:nth-child(2)::after {
    bottom: 0rem;
  }
  
  .introScreenAlt__title span:nth-child(3) {
    left: 121.5rem;
  }
  
  .introScreenAlt__bottom {
    position: absolute;
    bottom: 11rem;
    left: 50%;
    width: 55rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #D9D9D9;
  }
  
  .introScreenAlt__settings {
    position: absolute;
    bottom: 3.5rem;
    left: 50%;
    width: 85rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #D9D9D9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    opacity: 0;
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
  }
  
  .introScreenAlt__settings .togglePill {
    min-width: 28rem;
    text-align: center;
    padding: 0 1rem;
  }
  
  .introScreenAlt__message {
    text-align: center;
    font-size: 1rem;
    font-family: "anonymous-pro", monospace;
    line-height: 1.7;
    text-align: center;
    display: block;
    opacity: 0;
  }
  
  .introScreenAlt__border {
    opacity: 0;
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
  }
  
  .loading-done .introScreenAlt {
    pointer-events: auto;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > * {
    opacity: 0 !important;
    -webkit-filter: blur(0.3em) !important;
    filter: blur(0.3em) !important;
    -webkit-transform: translateY(-30rem) !important;
    -ms-transform: translateY(-30rem) !important;
    transform: translateY(-30rem) !important;
    -webkit-transition: opacity 1000ms linear, -webkit-transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), -webkit-filter 1000ms linear !important;
    transition: opacity 1000ms linear, -webkit-transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), -webkit-filter 1000ms linear !important;
    -o-transition: opacity 1000ms linear, transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), filter 1000ms linear !important;
    transition: opacity 1000ms linear, transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), filter 1000ms linear !important;
    transition: opacity 1000ms linear, transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), filter 1000ms linear, -webkit-transform 1200ms cubic-bezier(0.26, 0.005, 0.955, 0.425), -webkit-filter 1000ms linear !important;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > *:nth-child(1) {
    -webkit-transition-delay: 0ms !important;
    -o-transition-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > *:nth-child(2) {
    -webkit-transition-delay: 100ms !important;
    -o-transition-delay: 100ms !important;
    transition-delay: 100ms !important;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > *:nth-child(3) {
    -webkit-transition-delay: 180ms !important;
    -o-transition-delay: 180ms !important;
    transition-delay: 180ms !important;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > *:nth-child(4) {
    -webkit-transition-delay: 250ms !important;
    -o-transition-delay: 250ms !important;
    transition-delay: 250ms !important;
  }
  
  .loading-done .introScreenAlt__welcomeMessage > *:nth-child(5) {
    -webkit-transition-delay: 300ms !important;
    -o-transition-delay: 300ms !important;
    transition-delay: 300ms !important;
  }
  
  .loading-done .introScreenAlt__window {
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  
  .loading-done .introScreenAlt__behind {
    -webkit-transform: translateY(-10vh) scale(0.6);
    -ms-transform: translateY(-10vh) scale(0.6);
    transform: translateY(-10vh) scale(0.6);
  }
  
  @media screen and (max-width: 1023px) {
    .loading-done .introScreenAlt__behind {
      -webkit-transform: translateY(-13vh) scale(0.6);
      -ms-transform: translateY(-13vh) scale(0.6);
      transform: translateY(-13vh) scale(0.6);
    }
  }
  
  .loading-done .introScreenAlt__windowInner {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.5) translateY(0vh);
    transform: translate3d(-50%, -50%, 0) scale(0.5) translateY(0vh);
  }
  
  .loading-done .introScreenAlt__window,
  .loading-done .introScreenAlt__windowInner,
  .loading-done .introScreenAlt__behind {
    -webkit-transition: -webkit-transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 2000ms 600ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__buttons {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateX(-50%) translateY(0);
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    -webkit-transition: opacity 1800ms 3400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1800ms 3400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 1800ms 3400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1800ms 3400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1800ms 3400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 4200ms 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__windowBaton {
    -webkit-transform: rotate(90deg) scaleX(1);
    -ms-transform: rotate(90deg) scaleX(1);
    transform: rotate(90deg) scaleX(1);
    opacity: 0.25;
    -webkit-transition: opacity 500ms 3400ms linear, -webkit-transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 500ms 3400ms linear, -webkit-transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 500ms 3400ms linear, transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 500ms 3400ms linear, transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 500ms 3400ms linear, transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 1800ms 3400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__message {
    opacity: 1;
    -webkit-transition: opacity 1800ms 4200ms ease-out;
    -o-transition: opacity 1800ms 4200ms ease-out;
    transition: opacity 1800ms 4200ms ease-out;
  }
  
  .loading-done .introScreenAlt__title span {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .loading-done .introScreenAlt__title span:nth-child(1) {
    -webkit-transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3900ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__title span:nth-child(2) {
    -webkit-transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 3800ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__title span:nth-child(3) {
    -webkit-transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 2000ms 1600ms ease-in, filter 1600ms 1600ms ease-out, transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-filter 1600ms 1600ms ease-out, -webkit-transform 4000ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .loading-done .introScreenAlt__border {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: opacity 1000ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 1000ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .loading-done .introScreenAlt__settings {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transition: opacity 1000ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 1000ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1000ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-filter 1500ms 1800ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .intro-explore .introScreenAlt__chapters {
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .intro-explore .introScreenAlt__explore {
    opacity: 1;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    z-index: 1;
  }
  
  .intro-enter .introScreenAlt {
    -webkit-transform: translateY(115%) scale(7);
    -ms-transform: translateY(115%) scale(7);
    transform: translateY(115%) scale(7);
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    pointer-events: none;
    -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-filter 800ms 300ms ease-in;
    transition: -webkit-transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-filter 800ms 300ms ease-in;
    -o-transition: transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 800ms 300ms ease-in;
    transition: transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 800ms 300ms ease-in;
    transition: transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), filter 800ms 300ms ease-in, -webkit-transform 1200ms cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-filter 800ms 300ms ease-in;
    pointer-events: none;
  }
  
  .intro-enter .introScreenAlt__behindInner {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transition: -webkit-transform 1000ms ease-in-out;
    transition: -webkit-transform 1000ms ease-in-out;
    -o-transition: transform 1000ms ease-in-out;
    transition: transform 1000ms ease-in-out;
    transition: transform 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out;
  }
  
  .intro-enter .introScreenAlt__behind {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 800ms ease-in-out;
    transition: -webkit-transform 800ms ease-in-out;
    -o-transition: transform 800ms ease-in-out;
    transition: transform 800ms ease-in-out;
    transition: transform 800ms ease-in-out, -webkit-transform 800ms ease-in-out;
    position: absolute;
    background: transparent;
    left: 0;
    width: 100%;
  }
  
  .intro-enter .introScreenAlt__explore {
    display: none;
  }
  
  .intro-enter.intro-explore .introScreenAlt__chapters {
    display: none;
  }
  
  .intro-enter.intro-explore .introScreenAlt__explore {
    display: block;
  }
  
  @media screen and (max-width: 1023px) {
    .introScreenAlt__border {
      margin: -0.5rem -0.33rem;
      width: calc(100% + 0.66rem);
      height: calc(100% + 1rem);
    }
  
    .introScreenAlt__window {
      width: 51vh;
      height: 51vh;
      max-width: calc(var(--app-height) * 0.5);
      max-height: calc(var(--app-height) * 0.5);
      top: 36%;
    }
  
    .introScreenAlt__window::before {
      top: -1.7vh;
      left: -1.7vh;
      width: calc(100% + 3.4vh);
      height: calc(100% + 3.4vh);
    }
  
    .introScreenAlt__window .baton {
      display: none;
    }
  
    .introScreenAlt__title {
      top: 37%;
      font-size: 4.24rem;
      letter-spacing: 0.6rem;
    }
  
    .introScreenAlt__title span:nth-child(1) {
      right: calc(53vw + 27.2vh);
    }
  
    .introScreenAlt__title span:nth-child(2) {
      font-size: 1.1306666667rem;
      line-height: 1.5;
      height: 4.5rem;
      width: 3rem;
      padding: 0.5rem 0;
      left: calc(52.5vw + 27.2vh);
    }
  
    .introScreenAlt__title span:nth-child(3) {
      left: calc(58.5vw + 27.2vh);
    }
  
    .introScreenAlt__buttons {
      bottom: 17vh;
    }
  
    .introScreenAlt__message {
      display: none;
    }
  
    .introScreenAlt__settings {
      bottom: 3.4vh;
      background: #222222;
      width: auto;
      padding: 0rem 0.5rem;
    }
  
    .introScreenAlt__settings .togglePill {
      min-width: 24rem;
      white-space: nowrap;
    }
  
    .introScreenAlt__settings .togglePill input {
      width: 0;
    }
  
    .intro-enter .introScreenAlt {
      -webkit-transform: translateY(100%) scale(6);
      -ms-transform: translateY(100%) scale(6);
      transform: translateY(100%) scale(6);
    }
  
    .intro-enter .introScreenAlt__behindInner {
      -webkit-transition: -webkit-transform 800ms ease-in-out;
      transition: -webkit-transform 800ms ease-in-out;
      -o-transition: transform 800ms ease-in-out;
      transition: transform 800ms ease-in-out;
      transition: transform 800ms ease-in-out, -webkit-transform 800ms ease-in-out;
    }
  
    .intro-enter .introScreenAlt__behind {
      -webkit-transition: -webkit-transform 800ms ease-in-out;
      transition: -webkit-transform 800ms ease-in-out;
      -o-transition: transform 800ms ease-in-out;
      transition: transform 800ms ease-in-out;
      transition: transform 800ms ease-in-out, -webkit-transform 800ms ease-in-out;
    }
  }
  
  .bestiary {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    color: #474747;
    background-color: #EDE8E2;
  }
  
  .bestiary__content {
    background-color: #EDE8E2;
    height: 100%;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    width: calc(100% - 70.5rem);
    position: relative;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
  
  .bestiary__content::-webkit-scrollbar {
    display: none;
  }
  
  .bestiary__content .richtext {
    width: 52rem;
  }
  
  .bestiary__content .bestiary__contentSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  .bestiary__content .bestiary__contentSlide .bestiary__pageTop,
  .bestiary__content .bestiary__contentSlide .bestiary__richtext {
    opacity: 0;
    -webkit-transform: translateY(3rem);
    -ms-transform: translateY(3rem);
    transform: translateY(3rem);
    -webkit-transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .bestiary__content .bestiary__contentSlide .bestiary__contentHeader {
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
    -webkit-transition: -webkit-filter 1ms 200ms;
    transition: -webkit-filter 1ms 200ms;
    -o-transition: filter 1ms 200ms;
    transition: filter 1ms 200ms;
    transition: filter 1ms 200ms, -webkit-filter 1ms 200ms;
  }
  
  .bestiary__content .bestiary__contentSlide .border {
    opacity: 0;
  }
  
  .bestiary__content .bestiary__contentSlide:not(.active) {
    max-height: 100vh;
    overflow: hidden;
  }
  
  .bestiary__content .bestiary__contentSlide.active .bestiary__pageNumber {
    opacity: 1;
    -webkit-transition: opacity 400ms 0ms linear;
    -o-transition: opacity 400ms 0ms linear;
    transition: opacity 400ms 0ms linear;
  }
  
  .bestiary__content .bestiary__contentSlide.active .bestiary__pageTop {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 500ms 250ms linear, -webkit-transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 250ms linear, -webkit-transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 500ms 250ms linear, transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 250ms linear, transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 250ms linear, transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1200ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .bestiary__content .bestiary__contentSlide.active .bestiary__contentHeader {
    -webkit-filter: blur(0rem);
    filter: blur(0rem);
    -webkit-transition: -webkit-filter 800ms 250ms;
    transition: -webkit-filter 800ms 250ms;
    -o-transition: filter 800ms 250ms;
    transition: filter 800ms 250ms;
    transition: filter 800ms 250ms, -webkit-filter 800ms 250ms;
  }
  
  .bestiary__content .bestiary__contentSlide.active .bestiary__richtext {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 800ms 350ms linear, -webkit-transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 800ms 350ms linear, -webkit-transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 800ms 350ms linear, transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 800ms 350ms linear, transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 800ms 350ms linear, transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 900ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .bestiary__content .bestiary__contentSlide.active .border {
    opacity: 0.2;
  }
  
  .bestiary__top {
    text-align: center;
    padding: 5.7rem 2rem 3rem;
    border: 1px solid #C3C0BC;
  }
  
  .bestiary__count {
    letter-spacing: 0.3em;
    font-family: "guyot-headline", serif;
    font-weight: 300;
  }
  
  .bestiary__nav {
    width: 74rem;
    height: 100%;
    background-color: #E3DFDB;
    overflow: hidden;
  }
  
  .bestiary__scrollCrop {
    padding: 3.5rem 8.9rem 3.5rem 3.6rem;
    width: 80rem;
    height: 100%;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
  }
  
  .bestiary__cardGroup {
    position: relative;
    padding-left: 4rem;
    margin-bottom: 5rem;
  }
  
  .bestiary__cardGroup:last-child {
    margin-bottom: 12rem;
  }
  
  .bestiary__cardGroup:first-child:last-child {
    min-height: 100%;
    margin-bottom: 0;
  }
  
  @media screen and (min-width: 1023px) {
    .bestiary__cardGroupLabel {
      position: absolute;
      top: 0;
      left: 0;
      width: 4rem;
      height: 100%;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      -webkit-text-orientation: mixed;
      text-orientation: mixed;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
    }
  
    .bestiary__chapterLabel {
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      margin-bottom: 2rem;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      margin-left: -0.5rem;
      z-index: 2;
      padding-top: 1rem;
      background: #E3DFDB;
    }
  
    .bestiary__chapterLabel:before {
      content: "";
      position: absolute;
      top: 99%;
      left: 0;
      width: 1rem;
      height: 3.8rem;
      background: #E3DFDB;
      z-index: 1;
    }
  }
  
  .bestiary__chapterLabel {
    font-family: "guyot-headline", serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 1rem;
    position: relative;
    display: inline-block;
  }
  
  .bestiary__card {
    width: 100%;
    height: 16rem;
    border: 1px solid #C3C0BC;
    border-radius: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    cursor: pointer;
    -webkit-transition: background 200ms linear;
    -o-transition: background 200ms linear;
    transition: background 200ms linear;
  }
  
  @media (hover: hover) {
    .bestiary__card:hover {
      background: rgba(237, 232, 226, 0.5);
    }
  
    .bestiary__card:hover .bestiary__cardImage {
      opacity: 0.8;
    }
  }
  
  .bestiary__card .badge {
    position: absolute;
    top: 0.5rem;
    right: 4.5rem;
  }
  
  .bestiary__card:not(.found) .bestiary__cardImage {
    -webkit-filter: saturate(0) !important;
    filter: saturate(0) !important;
    opacity: 0.33;
  }
  
  .bestiary__card:not(.found) .bestiary__metaCol span:last-child {
    position: relative;
    color: transparent;
  }
  
  .bestiary__card:not(.found) .bestiary__metaCol span:last-child:after {
    content: "???";
    position: absolute;
    top: 0;
    left: 0;
    color: #474747;
  }
  
  .bestiary__card:not(.found) .badge {
    display: none;
  }
  
  .bestiary__card.active {
    background: #EDE8E2;
  }
  
  .bestiary__card.active.found .bestiary__cardImage {
    opacity: 1;
  }
  
  .bestiary__cardImage {
    height: 13rem;
    max-width: 12rem;
    margin-right: 3rem;
    position: relative;
    display: inline-block;
    opacity: 0.7;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  .bestiary__cardImg {
    height: 100%;
    width: auto;
  }
  
  .bestiary__cardNumber {
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1px solid #C3C0BC;
    border-left: 1px solid #C3C0BC;
    width: 3.3rem;
    height: 3.3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 0.2rem 0.2rem;
    font-family: "anonymous-pro", monospace;
    font-size: 1.2rem;
    border-bottom-left-radius: 1rem;
  }
  
  .bestiary__cardContent {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  
  .bestiary__cardTitle {
    font-size: 2.2rem;
    letter-spacing: 0.3em;
    font-family: "guyot-headline", serif;
  }
  
  .bestiary__card .bestiary__meta {
    border: none;
    padding: 0;
    margin-left: -1rem;
  }
  
  .bestiary__card .bestiary__metaCol {
    padding: 0.5rem 1.5rem;
    -webkit-box-flex: initial;
    -ms-flex: initial;
    flex: initial;
    border-right: 1px solid rgba(71, 71, 71, 0.2);
  }
  
  .bestiary__card .bestiary__metaCol:last-child {
    border: none;
  }
  
  .bestiary__card .bestiary__metaCol span:first-child {
    margin-bottom: 0.5rem;
  }
  
  .bestiary__page {
    padding: 5rem 9.5rem 12rem;
    position: relative;
  }
  
  .bestiary__pageTop {
    text-align: center;
  }
  
  .bestiary__pageNumber {
    position: absolute;
    top: 4.5rem;
    right: 4rem;
    font-size: 5rem;
    color: #C3C0BC;
    font-family: "anonymous-pro", monospace;
    font-weight: 300;
    letter-spacing: 0;
    display: block;
    color: #D6D2CD;
    opacity: 0;
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
  }
  
  .bestiary__mainImage {
    height: 43rem;
    width: auto;
    margin: auto;
    position: relative;
    display: inline-block;
  }
  
  .bestiary__mainImg {
    height: 100%;
    width: auto;
    margin-bottom: 0rem;
  }
  
  .bestiary__node {
    margin-bottom: 2rem;
  }
  
  .bestiary__node img {
    width: 2.9rem;
    height: 2.9rem;
  }
  
  .bestiary__node lottie-player {
    height: 11.9rem;
    margin: -3.5rem 0;
    display: none;
  }
  
  .bestiary__title {
    font-weight: 600;
    letter-spacing: 0.3em;
    margin-bottom: 3rem;
  }
  
  .bestiary__count {
    font-family: "anonymous-pro", monospace;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    display: block;
  }
  
  .bestiary__count span {
    font-size: 0.8rem;
  }
  
  .bestiary__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid rgba(71, 71, 71, 0.2);
    border-bottom: 1px solid rgba(71, 71, 71, 0.2);
    padding: 0.75rem 0;
    margin-left: -0.5rem;
  }
  
  .bestiary__metaCol {
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
    padding: 0.5rem 2rem;
    border-right: 1px solid rgba(71, 71, 71, 0.2);
  }
  
  .bestiary__metaCol:nth-child(2) {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }
  
  .bestiary__metaCol:last-child {
    border: none;
  }
  
  .bestiary__metaCol:first-child {
    padding-left: 1rem;
  }
  
  .bestiary__metaCol:last-child {
    padding-right: 1rem;
  }
  
  .bestiary__metaCol span {
    display: block;
    font-family: "anonymous-pro", monospace;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
  }
  
  .bestiary__metaCol span:first-child {
    opacity: 0.5;
    font-size: 1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
  }
  
  .bestiary__richtext {
    margin: auto;
    margin-top: 5rem;
    font-size: 1.5rem;
    line-height: 1.65;
  }
  
  .bestiary__richtext p + p {
    margin-top: 1em;
  }
  
  .bestiary__contentSlide:not(.found) .bestiary__mainImage {
    -webkit-filter: saturate(0) !important;
    filter: saturate(0) !important;
    opacity: 0.35;
  }
  
  .bestiary__contentSlide:not(.found) .bestiary__richtext {
    display: none;
  }
  
  .bestiary__contentSlide:not(.found) .badge:before {
    content: "Not ";
    margin-right: 0.5em;
  }
  
  .bestiary__contentSlide:not(.found) .bestiary__metaCol span:last-child {
    position: relative;
    color: transparent;
  }
  
  .bestiary__contentSlide:not(.found) .bestiary__metaCol span:last-child:after {
    content: "???";
    position: absolute;
    top: 0;
    left: 0;
    color: #474747;
  }
  
  .bestiary__contentSlide:not(.found) .bestiary__pageTop {
    border-bottom: none;
  }
  
  .bestiary__contentSlide .bestiary__page {
    padding: 5rem 8rem 12rem;
    min-height: 100vh;
  }
  
  .bestiary__contentSlide .bestiary__page .border {
    padding: 1rem;
  }
  
  .bestiary__contentSlide .bestiary__pageTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 1px solid #D6D2CD;
    text-align: left;
    position: relative;
    padding: 0rem 0 4rem;
  }
  
  .bestiary__contentSlide .bestiary__mainImage {
    height: 40rem;
    width: 32rem;
    min-width: 35rem;
    max-width: 35rem;
    margin: 0;
    margin-left: -3rem;
    margin-right: -3rem;
  }
  
  .bestiary__contentSlide .bestiary__mainImg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  .bestiary__contentHeader {
    width: 42rem;
    padding-right: 4rem;
    position: absolute;
    left: 32rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  
  .bestiary__contentItems {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .bestiary__contentItems .badge {
    margin-left: 0.8rem;
  }
  
  .popper .border {
    opacity: 0.1;
  }
  
  .popper .bestiary__mainImage {
    height: 36rem;
    max-width: 100%;
  }
  
  .popper .bestiary__mainImage img {
    height: 100%;
    width: auto;
  }
  
  .popper .bestiary__page {
    padding: 5rem 7.5rem 12rem;
  }
  
  .popper .bestiary__pageTopLeft {
    position: absolute;
    top: 4rem;
    left: 4rem;
  }
  
  .popper .bestiary__meta {
    margin: 0 -1rem;
  }
  
  .popper .bestiary__node img {
    width: 4.8rem;
    height: 4.8rem;
  }
  
  .popper .bestiary__pageTop,
  .popper .bestiary__richtext,
  .popper .bestiary__meta {
    opacity: 0;
    -webkit-transform: translateY(4rem);
    -ms-transform: translateY(4rem);
    transform: translateY(4rem);
    -webkit-transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .bestiary__pageTop {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 500ms 150ms ease-in-out, -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .bestiary__meta {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .bestiary__richtext {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.first-time .bestiary__node img {
    display: none;
  }
  
  .popper.first-time .bestiary__node lottie-player {
    display: block;
  }
  
  @media screen and (max-width: 1023px) {
    .bestiary__nav {
      width: 28rem;
    }
  
    .bestiary__content {
      width: calc(100% - 28rem);
    }
  
    .bestiary__scrollCrop {
      width: 32rem;
      padding: 1.5rem 5.5rem 1.5rem 1.5rem;
    }
  
    .bestiary__cardGroup {
      padding-left: 0;
      margin-bottom: 3rem;
    }
  
    .bestiary__cardGroupLabel {
      height: 1rem;
      margin-bottom: 1.5rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
    }
  
    .bestiary__chapterLabel {
      margin-right: 1rem;
    }
  
    .bestiary__card {
      padding: 1rem 1rem 1rem 1.5rem;
      height: 5rem;
      margin-bottom: 1rem;
      display: block;
    }
  
    .bestiary__card .badge {
      display: none;
    }
  
    .bestiary .bestiary__card:not(.found) .bestiary__cardTitle {
      opacity: 0.5;
    }
  
    .bestiary__cardTitle {
      margin-bottom: 0;
      line-height: 1.3;
      font-size: 1.8rem;
      letter-spacing: 0.2em;
    }
  
    .bestiary__cardImage {
      display: none;
    }
  
    .bestiary__cardTitle {
      font-size: 1.6rem;
    }
  
    .bestiary__cardContent .bestiary__meta {
      display: none;
    }
  
    .bestiary__contentSlide .bestiary__page .border {
      padding: 0.25rem;
    }
  
    .bestiary__contentSlide .bestiary__page {
      padding: 3rem 4rem 8rem;
    }
  
    .bestiary__contentSlide .bestiary__pageTop {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
  
    .bestiary__contentSlide .bestiary__mainImage {
      position: absolute;
      height: 22rem;
      width: 22rem;
      min-width: 22rem;
      max-width: 22rem;
      text-align: center;
    }
  
    .bestiary__contentSlide .bestiary__mainImage img {
      -o-object-fit: contain;
      object-fit: contain;
    }
  
    .bestiary__pageNumber {
      font-size: 5rem;
      top: 0;
      right: 2rem;
      display: none;
    }
  
    .bestiary__contentHeader {
      width: 100%;
      padding: 0;
      position: static;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      margin-top: 0rem;
      min-height: 22rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding: 4rem 0 5rem 20rem;
    }
  
    .bestiary__contentSlide .bestiary__meta {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin: 0;
    }
  
    .bestiary__title {
      font-size: 2.4rem;
      line-height: 1.2;
    }
  
    .bestiary__richtext {
      width: 100% !important;
      font-size: 1.5rem;
      margin-top: 3.5rem;
    }
  
    .popper .bestiary__mainImage {
      height: 54.4vh;
      max-width: 54.4vh;
      min-width: 54.4vh;
      text-align: center;
      position: absolute;
      top: 0;
      left: -6.8vh;
    }
  
    .popper .bestiary__mainImage img {
      -o-object-fit: contain;
      object-fit: contain;
    }
  
    .popper .bestiary__pageTop {
      height: 57.8vh;
      padding-left: 45.05vh;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: left;
    }
  
    .popper .bestiary__title {
      font-size: 2.8rem;
    }
  
    .popper .bestiary__node {
      height: 11.9vh;
      position: relative;
      margin-bottom: 0;
      margin-top: -2rem;
    }
  
    .popper .bestiary__node img {
      width: 3.5rem;
      height: 3.5rem;
    }
  
    .popper .bestiary__node lottie-player {
      height: 8.48rem;
      width: 28.2666666667rem;
      margin: 0;
      position: absolute;
      top: 1.9786666667rem;
      left: 1.696rem;
      max-width: initial;
      max-height: initial;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
    }
  
    .popper .bestiary__page {
      padding: 6.8vh 5.6533333333rem 20.4vh;
    }
  
    .popper .bestiary__richtext {
      margin-top: 3.5rem;
      padding: 0 2rem;
      font-size: 1.7rem;
    }
  
  @-webkit-keyframes adjust {
      0% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  
      16% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(4rem);
        transform: translate3d(-50%, -50%, 0) translateX(4rem);
      }
  
      67% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(4rem);
        transform: translate3d(-50%, -50%, 0) translateX(4rem);
      }
  
      82% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  
      100% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  }
  
  @keyframes adjust {
      0% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  
      16% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(4rem);
        transform: translate3d(-50%, -50%, 0) translateX(4rem);
      }
  
      67% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(4rem);
        transform: translate3d(-50%, -50%, 0) translateX(4rem);
      }
  
      82% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  
      100% {
        -webkit-transform: translate3d(-50%, -50%, 0) translateX(0);
        transform: translate3d(-50%, -50%, 0) translateX(0);
      }
  }
  
    .popper.first-time .bestiary__node lottie-player {
      -webkit-animation: adjust 3s 0.5s linear;
      animation: adjust 3s 0.5s linear;
    }
  }
  
  .explore {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: opacity 700ms 200ms;
    -o-transition: opacity 700ms 200ms;
    transition: opacity 700ms 200ms;
  }
  
  .explore__nodes,
  .explore__fx,
  .explore__frame,
  .explore__popouts,
  .explore__gui {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .explore__nodes {
    z-index: 5;
    opacity: 1;
    -webkit-transition: opacity 500ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 500ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 700ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__frame {
    z-index: 1;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
  
  .explore__gui {
    z-index: 6;
    pointer-events: none;
    -webkit-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
  }
  
  .explore__gui > * {
    pointer-events: auto;
  }
  
  .explore__mapToggle {
    position: absolute;
    bottom: 1.4rem;
    left: 2.5rem;
    width: 7.5rem;
    height: 4rem;
    border-radius: 2rem;
    background: #343434;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.4rem 0 1rem;
    -webkit-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
  }
  
  .explore__mapToggle span:nth-child(2) {
    font-size: 0.7rem;
    text-transform: uppercase;
  }
  
  @media (hover: hover) {
    .explore__mapToggle:hover {
      background-color: #222222;
    }
  }
  
  @-webkit-keyframes location-name {
    0% {
      opacity: 0;
    }
  
    5% {
      opacity: 0;
    }
  
    20% {
      opacity: 1;
    }
  
    85% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  @keyframes location-name {
    0% {
      opacity: 0;
    }
  
    5% {
      opacity: 0;
    }
  
    20% {
      opacity: 1;
    }
  
    85% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  .explore__locationName {
    position: absolute;
    pointer-events: none;
    top: 2rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: auto;
    -webkit-animation: location-name 6000ms forwards;
    animation: location-name 6000ms forwards;
    text-align: center;
  }
  
  .explore__locationName span {
    display: block;
    text-transform: uppercase;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  
  .explore__locationName span:first-child {
    color: #ABABAB;
    font-size: 1rem;
  }
  
  .explore__locationName span:last-child {
    letter-spacing: 0.1em;
  }
  
  .explore__nodeWrap {
    position: absolute;
    display: inline-block;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
  
  .explore__node {
    display: inline-block;
    background: rgba(128, 128, 128, 0.25);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 100%;
    -webkit-transition: opacity 1000ms 300ms linear, -webkit-transform 200ms ease-out;
    transition: opacity 1000ms 300ms linear, -webkit-transform 200ms ease-out;
    -o-transition: transform 200ms ease-out, opacity 1000ms 300ms linear;
    transition: transform 200ms ease-out, opacity 1000ms 300ms linear;
    transition: transform 200ms ease-out, opacity 1000ms 300ms linear, -webkit-transform 200ms ease-out;
  }
  
  .explore__node:after {
    content: "";
    width: 3.5rem;
    height: 3.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border: 2px solid white;
    border-radius: 100%;
  }
  
  .explore__node:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
    transform: translate3d(-50%, -50%, 0) scale(0);
    background: white;
    border-radius: 100%;
    opacity: 0;
    -webkit-transition: opacity 200ms linear, -webkit-transform 1ms 200ms linear;
    transition: opacity 200ms linear, -webkit-transform 1ms 200ms linear;
    -o-transition: opacity 200ms linear, transform 1ms 200ms linear;
    transition: opacity 200ms linear, transform 1ms 200ms linear;
    transition: opacity 200ms linear, transform 1ms 200ms linear, -webkit-transform 1ms 200ms linear;
  }
  
  .explore__node--hidden {
    opacity: 0;
  }
  
  .explore__node:hover {
    opacity: 1;
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node:hover:before {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node:hover:after {
    border-color: #E3E3E3;
    -webkit-transition: border 100ms 150ms linear;
    -o-transition: border 100ms 150ms linear;
    transition: border 100ms 150ms linear;
  }
  
  .explore__node:hover .explore__nodeIcon {
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
    -webkit-transition: -webkit-filter 150ms 50ms linear;
    transition: -webkit-filter 150ms 50ms linear;
    -o-transition: filter 150ms 50ms linear;
    transition: filter 150ms 50ms linear;
    transition: filter 150ms 50ms linear, -webkit-filter 150ms 50ms linear;
  }
  
  .explore__node:hover .explore__nodeLabel {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    -webkit-transition: opacity 100ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 100ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 100ms linear;
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 100ms linear;
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 100ms linear, -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node:hover .explore__nodeLabel span {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 400ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__nodeIcon {
    width: 2.2rem;
    height: 2.2rem;
  }
  
  .explore__nodeIcon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  .explore__nodeLabel {
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    display: block;
    width: 16rem;
    padding: 1.7rem 1.2rem 1.2rem;
    background: #343434;
    line-height: 1.4;
    -webkit-transform: translate3d(-50%, 1rem, 0);
    transform: translate3d(-50%, 1rem, 0);
    opacity: 0;
    -webkit-transition: opacity 100ms linear, -webkit-transform 1ms 100ms linear;
    transition: opacity 100ms linear, -webkit-transform 1ms 100ms linear;
    -o-transition: transform 1ms 100ms linear, opacity 100ms linear;
    transition: transform 1ms 100ms linear, opacity 100ms linear;
    transition: transform 1ms 100ms linear, opacity 100ms linear, -webkit-transform 1ms 100ms linear;
  }
  
  .explore__nodeLabel span {
    display: inline-block;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: -webkit-transform 1ms 100ms linear;
    transition: -webkit-transform 1ms 100ms linear;
    -o-transition: transform 1ms 100ms linear;
    transition: transform 1ms 100ms linear;
    transition: transform 1ms 100ms linear, -webkit-transform 1ms 100ms linear;
  }
  
  .explore__nodeLabel:after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    outline: 2px solid #565656;
  }
  
  .explore__node--bottom .explore__nodeLabel {
    top: auto;
    bottom: calc(100% + 1rem);
    -webkit-transform: translate3d(-50%, -1rem, 0);
    transform: translate3d(-50%, -1rem, 0);
  }
  
  .explore__node.explore-link .explore__nodeIcon img {
    -webkit-transform: translateY(-0.2rem);
    -ms-transform: translateY(-0.2rem);
    transform: translateY(-0.2rem);
  }
  
  .explore__node--sign {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  
  .explore__node--sign::before {
    width: 8.2rem;
    height: 8.2rem;
    background: #343434;
    z-index: 2;
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
  }
  
  .explore__node--sign::after {
    z-index: 3;
  }
  
  .explore__node--sign .explore__nodeImage {
    -webkit-transition: -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node--sign .explore__nodeImage:after {
    -webkit-transition: opacity 400ms linear;
    -o-transition: opacity 400ms linear;
    transition: opacity 400ms linear;
  }
  
  .explore__node--sign:after {
    -webkit-transition: border-width 200ms 100ms linear, -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: border-width 200ms 100ms linear, -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms 100ms linear;
    transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms 100ms linear;
    transition: transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms 100ms linear, -webkit-transform 250ms 100ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node--sign .explore__nodeSignInner {
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node--sign .explore__nodeSignLabel {
    -webkit-transition: opacity 100ms linear;
    -o-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
  }
  
  .explore__node--sign:hover {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .explore__node--sign:hover:after {
    -webkit-transform: translate3d(-49.5%, -50.5%, 0) scale(2.05);
    transform: translate3d(-49.5%, -50.5%, 0) scale(2.05);
    border-width: 1px;
    -webkit-transition: border-width 200ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: border-width 200ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms linear;
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms linear;
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), border-width 200ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    border-color: #565656;
  }
  
  .explore__node--sign:hover .explore__nodeImage {
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
    -webkit-transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node--sign:hover .explore__nodeImage:after {
    opacity: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
  
  .explore__node--sign:hover .explore__nodeSign {
    pointer-events: auto;
  }
  
  .explore__node--sign:hover .explore__nodeSignInner {
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    -webkit-transition: -webkit-transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 500ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__node--sign:hover .explore__nodeSignLabel {
    opacity: 1 !important;
    -webkit-transition: opacity 400ms 100ms linear;
    -o-transition: opacity 400ms 100ms linear;
    transition: opacity 400ms 100ms linear;
  }
  
  .explore__node--sign:hover .explore__nodeSignArrow {
    opacity: 1 !important;
  }
  
  .explore__nodeImage {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 6.5rem;
    height: 6.5rem;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.1);
    transform: translate3d(-50%, -50%, 0) scale(0.1);
  }
  
  .explore__nodeImage img {
    border-radius: 100%;
  }
  
  .explore__nodeImage:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: white;
  }
  
  .explore__nodeSign {
    position: absolute;
    left: 50%;
    height: 8.1rem;
    width: 23rem;
    overflow: hidden;
    pointer-events: none;
  }
  
  .explore__nodeSignInner {
    display: block;
    position: relative;
    width: 22rem;
    height: 100%;
    background: #343434;
    border-radius: 1rem 4.1rem 4.1rem 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.1rem 4rem 1rem 8rem;
    -webkit-transform: translateX(-105%);
    -ms-transform: translateX(-105%);
    transform: translateX(-105%);
  }
  
  .explore__nodeSignInner:after {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0.2rem;
    border-radius: 1rem 4.1rem 4.1rem 1rem;
    width: calc(100% - 0.6rem);
    height: calc(100% - 0.7rem);
    border: 2px solid #565656;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .explore__nodeSignArrow {
    position: absolute;
    height: 0.9rem;
    top: calc(50% - 0.9rem);
    left: 5rem;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    opacity: 0;
  }
  
  .explore__nodeSignLabel {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #CBCBCB;
    letter-spacing: 0.1em;
    line-height: 1.4;
    opacity: 0;
  }
  
  .explore__node--sign.explore__node--left:hover {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .explore__node--sign.explore__node--left:hover .explore__nodeSignInner {
    -webkit-transform: translateX(5%) !important;
    -ms-transform: translateX(5%) !important;
    transform: translateX(5%) !important;
  }
  
  .explore__node--sign.explore__node--left .explore__nodeSign {
    left: auto;
    right: 38%;
  }
  
  .explore__node--sign.explore__node--left .explore__nodeSignInner {
    border-radius: 4.1rem 1rem 1rem 4.1rem;
    padding: 1.1rem 7.5rem 1rem 4.5rem;
    -webkit-transform: translateX(105%);
    -ms-transform: translateX(105%);
    transform: translateX(105%);
  }
  
  .explore__node--sign.explore__node--left .explore__nodeSignInner:after {
    left: 0.5rem;
    border-radius: 4.1rem 1rem 1rem 4.1rem;
  }
  
  .explore__node--sign.explore__node--left .explore__nodeSignArrow {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    left: auto;
    right: 5rem;
  }
  
  .explore__back {
    position: absolute;
    top: 2.7rem;
    left: 1.3rem;
  }
  
  .explore__back:hover {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  
  .explore__back::after {
    width: 2.2rem;
    height: 2.2rem;
    border-width: 1px;
  }
  
  .explore__back .explore__nodeIcon {
    width: 1.6rem;
    height: 1.6rem;
  }
  
  .explore__backLabel {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.6rem);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1rem;
  }
  
  .explore__fx {
    z-index: 3;
  }
  
  .explore__staticOverlayFx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
  
  .explore__staticOverlayFx img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .explore__fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 500ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .explore__bg {
    -webkit-transition: -webkit-filter 300ms ease-in-out;
    transition: -webkit-filter 300ms ease-in-out;
    -o-transition: filter 300ms ease-in-out;
    transition: filter 300ms ease-in-out;
    transition: filter 300ms ease-in-out, -webkit-filter 300ms ease-in-out;
  }
  
  .explore__nodes {
    -webkit-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
  }
  
  .explore__bg,
  .explore__nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 172.8vh;
    height: 108vh;
  }
  
  @media screen and (min-aspect-ratio: 2000/1250) {
    .explore__bg,
    .explore__nodes {
      width: 108vw;
      height: 67.5vw;
    }
  }
  
  .explore__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .explore__layer img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  
  .explore__chapterNotifier {
    position: absolute;
    bottom: 0;
    right: 2rem;
    width: 44rem;
    height: 11.3rem;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .explore__chapterNotifierToggle {
    position: absolute;
    top: 0;
    right: 1rem;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.25em;
    font-family: "guyot-headline", serif;
    cursor: pointer;
  }
  
  .explore__chapterNotifierToggle span:last-child {
    display: none;
  }
  
  .explore__chapterNotifierInner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 9.2rem;
    display: block;
    background: #343434;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2rem 2.5rem;
  }
  
  .explore__chapterNotifierBorders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .explore__chapterNotifierPlay {
    position: relative;
    z-index: 1;
    width: 6rem;
    height: 6rem;
    min-width: 6rem;
  }
  
  .explore__chapterNotifierPlay img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  
  .explore__chapterNotifierContent {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 1rem;
  }
  
  .explore__chapterNotifierContent span {
    display: block;
    text-transform: uppercase;
  }
  
  .explore__chapterNotifierContent span:first-child {
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: #ABABAB;
    margin-bottom: 1rem;
  }
  
  .explore__chapterNotifierContent span:last-child {
    font-size: 1.5rem;
    font-family: "guyot-headline", serif;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: #EEEEEE;
    margin-top: 1rem;
  }
  
  .explore__chapterNotifierImage {
    position: relative;
    z-index: 1;
    width: 9.8rem;
    min-width: 9.8rem;
    height: 5.8rem;
  }
  
  .explore__chapterNotifierImage img {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  
  .explore__map {
    left: 6.5rem;
    width: calc(100% - 6.5rem);

    
  }
  
  .explore__map.show .popper__overlay {
    opacity: 0.5;
  }
  
  .explore__achievement {
    position: absolute;
    bottom: -4rem;
    right: -4rem;
    width: 36rem;
    pointer-events: none;
    display: none;
  }
  
  .first-time.explore .explore__achievement {
    display: block;
  }
  
  .fade.explore .explore__nodes {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .fade.explore .explore__fade {
    opacity: 1;
    -webkit-transition: opacity 500ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: opacity 500ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 500ms 300ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .hide-chapter .explore__chapterNotifier {
    -webkit-transform: translateY(9.3rem);
    -ms-transform: translateY(9.3rem);
    transform: translateY(9.3rem);
  }
  
  .hide-chapter .explore__chapterNotifierToggle span:last-child {
    display: inline-block;
  }
  
  .hide-chapter .explore__chapterNotifierToggle span:first-child {
    display: none;
  }
  
  .popup-explore-map .explore__bg {
    -webkit-filter: blur(1rem);
    filter: blur(1rem);
  }
  
  .popup-explore-map .explore__gui,
  .popup-explore-map .explore__nodes {
    opacity: 0;
  }
  
  .intro-window .explore__nodes,
  .intro-window .explore__gui {
    opacity: 0;
  }
  
  @media screen and (max-width: 1023px) {
    .explore__back {
      top: 10.71vh;
    }
  
    .explore__mapToggle {
      bottom: 5.78vh;
      height: 10.2vh;
      width: 19.55vh;
      border-radius: 5.1vh;
      padding: 0.85vh 3.06vh 0.85vh 0.85vh;
    }
  
    .explore__mapToggle span:nth-child(2) {
      font-size: 2.38vh;
    }
  
    .explore__achievement {
      bottom: -6rem;
      right: -6rem;
      width: 36rem;
    }
  }
  
  .slowTV {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #161515;
  }
  
  .slowTV__area {
    position: relative;
    width: 100%;
    height: auto;
    top: 57vh;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform-origin: 50% 80%;
    -ms-transform-origin: 50% 80%;
    transform-origin: 50% 80%;
  }
  
  .slowTV__area:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(25, 24, 23, 0)), to(#161515));
    background: -o-linear-gradient(rgba(25, 24, 23, 0), #161515);
    background: linear-gradient(rgba(25, 24, 23, 0), #161515);
    z-index: 10;
  }
  
  .slowTV__bg {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    font-size: 0;
  }
  
  .slowTV__bg #bg-img {
    width: 100%;
    height: auto;
  }
  
  .slowTV__bg img.mob {
    display: none;
  }
  
  @media screen and (max-width: 1023px) {
    .slowTV__bg img {
      display: none;
    }
  
    .slowTV__bg img.mob {
      display: block;
    }
  }
  
  .slowTV__fireflies {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }
  
  .slowTV__video {
    position: absolute;
    bottom: 54rem;
    left: 50%;
    width: 67rem;
    height: 39.5rem;
    -webkit-transform: translate3d(-50%, 50%, 0);
    transform: translate3d(-50%, 50%, 0);
    z-index: 2;
    pointer-events: none;
  }
  
  .slowTV__video:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12rem;
    height: 7rem;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-color: #474747;
    border-radius: 1rem;
    cursor: pointer;
    background-image: url(images/slowtv_play.svg);
    background-position: center;
    background-size: 4rem auto;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
  }
  
  @media screen and (max-width: 1023px) {
    .slowTV__video:after {
      width: 10rem;
      height: 6rem;
    }
  }
  
  @-webkit-keyframes flicker {
    0% {
      opacity: 0.885;
    }
  
    10% {
      opacity: 0.88;
    }
  
    20% {
      opacity: 0.885;
    }
  
    30% {
      opacity: 0.89;
    }
  
    40% {
      opacity: 0.885;
    }
  
    50% {
      opacity: 0.88;
    }
  
    60% {
      opacity: 0.885;
    }
  
    70% {
      opacity: 0.89;
    }
  
    80% {
      opacity: 0.885;
    }
  
    90% {
      opacity: 0.89;
    }
  
    100% {
      opacity: 0.895;
    }
  }
  
  @keyframes flicker {
    0% {
      opacity: 0.885;
    }
  
    10% {
      opacity: 0.88;
    }
  
    20% {
      opacity: 0.885;
    }
  
    30% {
      opacity: 0.89;
    }
  
    40% {
      opacity: 0.885;
    }
  
    50% {
      opacity: 0.88;
    }
  
    60% {
      opacity: 0.885;
    }
  
    70% {
      opacity: 0.89;
    }
  
    80% {
      opacity: 0.885;
    }
  
    90% {
      opacity: 0.89;
    }
  
    100% {
      opacity: 0.895;
    }
  }

  
  @-webkit-keyframes zoom {
    0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
    }
  
    100% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
    }
  }
  
  @keyframes zoom {
    0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
    }
  
    100% {
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
    }
  }
  
  @-webkit-keyframes fade {
    0% {
      opacity: 0;
      -webkit-filter: blur(2rem);
      filter: blur(2rem);
    }
  
    66% {
      opacity: 1;
    }
  
    100% {
      opacity: 1;
      -webkit-filter: blur(0);
      filter: blur(0);
    }
  }
  
  @keyframes fade {
    0% {
      opacity: 0;
      -webkit-filter: blur(2rem);
      filter: blur(2rem);
    }
  
    66% {
      opacity: 1;
    }
  
    100% {
      opacity: 1;
      -webkit-filter: blur(0);
      filter: blur(0);
    }
  }
  
  
  #screen-img,
  #screen-overlay {
    position: absolute;
    bottom: 12rem;
    left: 37.8rem;
    width: 100rem;
    height: auto;
  }
  
  #screen-overlay {
    z-index: 3;
    opacity: 1;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
  
  html:not(.popup-slow-tv-onboard) .slowTV.in.ready .slowTV__area {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transition: -webkit-transform 30000ms ease-in-out;
    transition: -webkit-transform 30000ms ease-in-out;
    -o-transition: transform 30000ms ease-in-out;
    transition: transform 30000ms ease-in-out;
    transition: transform 30000ms ease-in-out, -webkit-transform 30000ms ease-in-out;
    -webkit-transform: translateY(-88%) scale(1.7);
    -ms-transform: translateY(-88%) scale(1.7);
    transform: translateY(-88%) scale(1.7);
  }
  
  .slowTV.image-mode .slowTV__iframeWrap {
    opacity: 0;
  }
  
  .slowTV.image-mode .slowTV__imageWrap {
    opacity: 1;
  }
  
  @media screen and (max-width: 1023px) {
    .slowTV {
      height: var(--app-height);
    }
  
    #screen-img,
    #screen-overlay {
      bottom: 5.5rem;
      left: 20.4rem;
      width: 44rem;
      height: auto;
    }
  
    #screen-overlay {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  
    .slowTV.in .slowTV__area {
      top: calc(var(--app-height) * 0.58);
      -webkit-transform: translateY(-89%) translateZ(0);
      transform: translateY(-89%) translateZ(0);
    }
  
    .slowTV__gui {
      bottom: 3.4vh;
      left: 2.12rem;
      right: 2.12rem;
    }
  
    .slowTV__gui > * {
      width: 16.96rem;
    }
  
    .slowTV__options {
      width: auto;
    }
  
    .slowTV__video {
      bottom: 24rem;
      width: 29.6rem;
      height: 17.464rem;
    }
  
    html:not(.popup-slow-tv-onboard) .slowTV.in.ready .slowTV__area {
      -webkit-transform: translateY(-92%) scale(2) translateZ(0);
      transform: translateY(-92%) scale(2) translateZ(0);
    }
  }
  
  .mural {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .mural__painting {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
  }
  
  .mural #mural-canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 100% !important;
  }
  
  .mural__paintingRail {
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    width: 300vw;
    position: relative;
    cursor: -webkit-grab;
    cursor: grab;
  }
  
  .mural__paintingRail:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  
  .mural__paintingRail picture:first-child img {
    margin-left: -33vw;
  }
  
  .mural__paintingPart {
    height: 100%;
    width: auto;
    position: relative;
    z-index: 1;
    margin-left: -1px;
    opacity: 0;
  }
  
  .mural__bar {
    position: absolute;
    bottom: 2.7rem;
    left: 2.9rem;
    height: 2rem;
    border-radius: 1rem;
    width: calc(100% - 16rem);
    background: #BCBCBC;
    z-index: 10;
    cursor: default;
  }
  
  .mural__barPart {
    display: inline-block;
    height: 100%;
    border-right: 1px solid #BCBCBC;
    margin-right: 0;
    background: #3D5136;
    opacity: 0.7;
    position: relative;
    -webkit-transition: opacity 100ms linear;
    -o-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
  
  .mural__barPart:hover {
    opacity: 1;
  }
  
  .mural__barPart:hover .mural__barTooltip {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0rem);
    -ms-transform: translateX(-50%) translateY(0rem);
    transform: translateX(-50%) translateY(0rem);
  }
  
  .mural__barPart:first-child {
    border-radius: 1.5rem 0 0 1.5rem;
  }
  
  .mural__barTooltip {
    position: absolute;
    pointer-events: none;
    bottom: 150%;
    left: 50%;
    background: white;
    color: black;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    text-align: center;
    font-family: "arpona", serif;
    text-transform: uppercase;
    color: #474747;
    letter-spacing: 0.1em;
    z-index: 10;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(1rem);
    -ms-transform: translateX(-50%) translateY(1rem);
    transform: translateX(-50%) translateY(1rem);
    -webkit-transition: opacity 200ms ease-in, -webkit-transform 200ms ease-out;
    transition: opacity 200ms ease-in, -webkit-transform 200ms ease-out;
    -o-transition: opacity 200ms ease-in, transform 200ms ease-out;
    transition: opacity 200ms ease-in, transform 200ms ease-out;
    transition: opacity 200ms ease-in, transform 200ms ease-out, -webkit-transform 200ms ease-out;
  }
  
  .mural__barTooltip:before {
    content: "Contributor";
    display: block;
    font-size: 1.1rem;
    opacity: 0.5;
    margin-bottom: 0.3rem;
  }
  
  .mural__barTooltip:after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateX(-0.5rem) rotate(45deg);
    -ms-transform: translateX(-0.5rem) rotate(45deg);
    transform: translateX(-0.5rem) rotate(45deg);
    background: white;
  }
  
  .mural__content {
    position: absolute;
    right: 2.9rem;
    bottom: 8.3rem;
    background: #343434;
    padding: 6rem 5rem 5rem;
    z-index: 2;
    width: 40rem;
    text-align: center;
  }
  
  .mural__content .box-heading {
    padding: 0 3rem;
  }
  
  @media screen and (min-width: 1023px) {
    .mural__content {
      left: auto !important;
      -webkit-transform: none !important;
      -ms-transform: none !important;
      transform: none !important;
    }
  }
  
  .mural__content::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    width: calc(100% - 1.8rem);
    height: calc(100% - 1.8rem);
    border: 1px solid #565656;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
  }
  
  .mural__message {
    margin-bottom: 3rem;
  }
  
  .mural__donationButtons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }
  
  .mural__donationButton {
    min-width: 30%;
    max-width: 30%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0.8rem 0 !important;
  }
  
  .mural__linkMessage {
    margin-bottom: 0;
    opacity: 0.66;
  }
  
  .mural__topMessage {
    position: absolute;
    top: 2rem;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    background-color: #EDE8E2;
    border-radius: 0.7rem;
    color: #474747;
    font-size: 1.4rem;
    padding: 0.6rem 2rem 0.8rem;
  }
  
  @media screen and (max-width: 1023px) {
    .mural__topMessage {
      display: none;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .mural {
      height: var(--app-height);
    }
  
    .mural__painting {
      height: var(--app-height);
    }
  
    .mural__bar {
      position: absolute;
      bottom: 3.4vh;
      left: 3.4vh;
      height: 3.4vh;
    }
  
    .mural__content {
      bottom: 10.2vh;
      left: 0;
      right: auto;
      padding: calc(var(--app-height) * 0.1);
      max-height: calc(var(--app-height) * 0.85);
    }
  
    .mural__content .box-heading {
      padding: 0 5rem;
    }
  }
  
  @-webkit-keyframes mo1 {
    5% {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
    }
  
    25% {
      -webkit-transform: scaleX(0.25);
      transform: scaleX(0.25);
    }
  
    45% {
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }
  
    65% {
      -webkit-transform: scaleX(0.75);
      transform: scaleX(0.75);
    }
  
    85% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  
    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
  
  @keyframes mo1 {
    5% {
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
    }
  
    25% {
      -webkit-transform: scaleX(0.25);
      transform: scaleX(0.25);
    }
  
    45% {
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }
  
    65% {
      -webkit-transform: scaleX(0.75);
      transform: scaleX(0.75);
    }
  
    85% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  
    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }
  
  @-webkit-keyframes mo2 {
    0% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  
    100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  
  @keyframes mo2 {
    0% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  
    100% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }
  
  .mural-onboard-anim {
    width: 75%;
    height: 100%;
    margin: auto;
  }
  
  @media screen and (max-width: 1023px) {
    .mural-onboard-anim {
      width: 50%;
    }
  }
  
  .mural-onboard-anim span {
    display: block;
    position: relative;
  }
  
  .mural-onboard-anim span:first-child {
    height: 10rem;
    width: 100%;
    background: rgba(217, 217, 217, 0.1);
  }
  
  @media screen and (max-width: 1023px) {
    .mural-onboard-anim span:first-child {
      height: 5rem;
    }
  }
  
  .mural-onboard-anim span:first-child:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #D9D9D9;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: mo1 3s infinite;
    animation: mo1 3s infinite;
  }
  
  .mural-onboard-anim span:last-child {
    height: 1px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    margin-top: 2rem;
  }
  
  .mural-onboard-anim span:last-child:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    -webkit-transform-origin: left;
    -ms-transform-origin: left;
    transform-origin: left;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-animation: mo1 3s infinite;
    animation: mo1 3s infinite;
  }
  
  .map {
    position: absolute;
    top: 48.5%;
    left: 50%;
    width: 66vw;
    height: 43vw;
    background: #EDE8E2;
    color: #474747;
    -webkit-transform: translate3d(-50%, 0%, 0);
    transform: translate3d(-50%, 0%, 0);
    -webkit-transition: opacity 300ms 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms;
    transition: opacity 300ms 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms;
    -o-transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms, opacity 300ms 300ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms, opacity 300ms 300ms linear;
    transition: transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms, opacity 300ms 300ms linear, -webkit-transform cubic-bezier(0.525, 0.06, 0.11, 0.995) 1ms 600ms;
    opacity: 0;
    background: transparent;
    max-height: calc(90vh - 5rem);
  }
  
  .map__close {
    display: block;
    position: absolute;
    right: 0;
    top:-20px;
    z-index: 99;
  }
  
  .map__inner {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    width: 0;
    height: 100%;
    will-change: width;
    -webkit-transition: width 600ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: width 600ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: width 600ms 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    background-color: #888;
  }
  
  .map__inner:after {
    content: "";
    display: block;
    position: absolute;
    top: -0.3rem;
    left: -0.3rem;
    width: calc(100% + 0.6rem);
    height: calc(100% + 0.6rem);
    border: 0.6rem solid white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    pointer-events: none;
  }
  
  .map__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .map__move {
    width: 111rem;
    height: 73.4409542744rem;
  }
  
  .map__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .map__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  
  .map__nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      opacity: 1;
    }
  
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  
  @keyframes pulse {
    0% {
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      opacity: 1;
    }
  
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  
  .map__node {
    position: absolute;
    width: 6rem;
    height: 6rem;
    margin: -3rem 0 0 -3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    background: -o-radial-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 66%);
    background: radial-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 66%);
  }
  
  .map__nodeDot {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    border: 1px solid black;
    border-radius: 12px;
    background: white;
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    position: relative;
  }
  
  .visited .map__nodeDot {
    background: #D7E874;
  }
  
  .current .map__nodeDot {
    background: #D7E874;
    border: none;
    -webkit-transform: translateY(-0.4em);
    -ms-transform: translateY(-0.4em);
    transform: translateY(-0.4em);
  }
  
  .current .map__nodeDot:before {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    bottom: -0.92rem;
    left: 0rem;
    border: 0.5rem solid transparent;
    border-top: 0.8rem solid #D7E874;
  }
  
  .current .map__nodeDot:after {
    content: "";
    position: absolute;
    top: 0.38rem;
    left: 0.35rem;
    width: 0.33rem;
    height: 0.33rem;
    border-radius: 100%;
    background-color: #343434;
  }
  
  .current .map__nodeHover {
    bottom: 85%;
  }
  
  .map__nodeHover {
    pointer-events: none;
    position: absolute;
    bottom: 75%;
    left: 50%;
    min-width: 10rem;
    background: #222222;
    color: #EDE8E2;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    font-family: "arpona", serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 11;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(1rem);
    -ms-transform: translateX(-50%) translateY(1rem);
    transform: translateX(-50%) translateY(1rem);
    -webkit-transition: opacity 200ms ease-in, -webkit-transform 200ms ease-out;
    transition: opacity 200ms ease-in, -webkit-transform 200ms ease-out;
    -o-transition: opacity 200ms ease-in, transform 200ms ease-out;
    transition: opacity 200ms ease-in, transform 200ms ease-out;
    transition: opacity 200ms ease-in, transform 200ms ease-out, -webkit-transform 200ms ease-out;
  }
  
  .map__nodeHover:after {
    content: "";
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    -webkit-transform: translateX(-0.5rem) rotate(45deg);
    -ms-transform: translateX(-0.5rem) rotate(45deg);
    transform: translateX(-0.5rem) rotate(45deg);
    background: #222222;
  }
  
  @media (hover: hover) {
    .map__node:hover {
      z-index: 11;
    }
  
    .map__node:hover .map__nodeHover {
      opacity: 1;
      -webkit-transform: translateX(-50%) translateY(0rem);
      -ms-transform: translateX(-50%) translateY(0rem);
      transform: translateX(-50%) translateY(0rem);
    }
  }
  
  .map__nodeLocked {
    height: 46px;
    background: white;
    border-radius: 22.5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 300ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .map__nodeLocked img {
    margin-left: -10px;
    margin-top: 1px;
  }
  
  .map__nodeLocked span {
    font-size: 12px;
    text-transform: uppercase;
    padding-right: 20px;
  }
  
  .map__controls {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  
  .map__legend {
    color: white;
    height: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 2.3rem;
  }
  
  .map__legend > span:first-child {
    text-transform: uppercase;
    font-family: "anonymous-pro", monospace;
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin: 0 1.3rem;
  }
  
  .map__legend > span:last-child {
    height: 100%;
    padding: 0.5rem 0.8rem 0.5rem 0.6rem;
    border-radius: 1.5rem;
    background-color: #222222;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .map__legendItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0.5rem;
  }
  
  .map__legendItem span {
    margin: 0 0.5rem;
  }
  
  .map__zoom {
    color: white;
    height: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 2.3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 10rem;
    margin-left: 2rem;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    font-family: "anonymous-pro", monospace;
  }
  
  .map__zoom button {
    cursor: pointer;
    font-size: 2rem;
    font-weight: 600;
    min-width: 3rem;
    max-width: 3rem;
    text-align: center;
    opacity: 0.8;
    -webkit-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    transition: opacity 100ms;
  }
  
  .map__zoom button:first-child {
    padding-bottom: 0.4rem;
  }
  
  @media (hover: hover) {
    .map__zoom button:hover {
      opacity: 1;
    }
  }
  
  .map__zoom span {
    color: #D9D9D9;
    font-size: 1rem;
    letter-spacing: 0.15em;
  }
  
  .map__tabs {
    position: absolute;
    top: 0;
    right: -0.3rem;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  
  .map__tab {
    min-width: 6.1rem;
    height: 5.65rem;
    position: relative;
    display: block;
    -webkit-transform: translateY(-110%);
    -ms-transform: translateY(-110%);
    transform: translateY(-110%);
    margin-left: 0.1rem;
    opacity: 0;
    -webkit-transition: opacity 1ms 100ms linear, -webkit-transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: opacity 1ms 100ms linear, -webkit-transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 100ms linear;
    transition: transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 100ms linear;
    transition: transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995), opacity 1ms 100ms linear, -webkit-transform 100ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  .map__tabInner {
    font-size: 1rem;
    font-family: "arpona", serif;
    text-transform: uppercase;
    background: #D9D9D9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 0.75rem;
    color: black;
    border-radius: 0 0 2rem 2rem;
    -webkit-transition: background 100ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: background 100ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear;
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear;
    transition: transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), background 100ms linear, -webkit-transform 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .map__tabInner span span {
    display: block;
    text-align: center;
    margin: 0.15rem 0;
  }
  
  .map__tabInner span span:first-child {
    font-size: 0.85rem;
  }
  
  .map__tabInner span span:last-child {
    font-size: 1.3rem;
  }
  
  .map__tabInner:not([disabled]) {
    cursor: pointer;
  }
  
  .map__tabInner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0.3rem;
    height: calc(100% - 0.3rem);
    width: calc(100% - 0.6rem);
    border: 1px solid #B8B7B6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0 0 1.7rem 1.7rem;
  }
  
  @media (hover: hover) {
    .map__tabInner:hover {
      background: white;
      -webkit-transform: translateY(0.5rem) !important;
      -ms-transform: translateY(0.5rem) !important;
      transform: translateY(0.5rem) !important;
    }
  }
  
  .map__tab[disabled] .map__tabInner {
    background: #999999 !important;
    -webkit-filter: saturate(0.5);
    filter: saturate(0.5);
    color: rgba(0, 0, 0, 0.75);
    pointer-events: none;
  }
  
  .map__tab[disabled] .map__tabInner:after {
    border-color: #797776;
  }
  
  html:not(.to-explore) .popper.show .map {
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms;
    transition: opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms;
    -o-transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms, opacity 300ms linear;
    transition: transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms, opacity 300ms linear, -webkit-transform cubic-bezier(0.13, 0.095, 0.2, 0.915) 700ms;
    opacity: 1;
  }
  
  html:not(.to-explore) .popper.show .map__inner {
    width: 66vw;
    -webkit-transition: width 1100ms 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    -o-transition: width 1100ms 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    transition: width 1100ms 400ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
  }
  
  html:not(.to-explore) .popper.show .map__tab {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%);
    -webkit-transition: opacity 1ms 1500ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 1ms 1500ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 1ms 1500ms linear;
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 1ms 1500ms linear;
    transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), opacity 1ms 1500ms linear, -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(0) {
    -webkit-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(1) {
    -webkit-transition-delay: 1050ms;
    -o-transition-delay: 1050ms;
    transition-delay: 1050ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(2) {
    -webkit-transition-delay: 1100ms;
    -o-transition-delay: 1100ms;
    transition-delay: 1100ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(3) {
    -webkit-transition-delay: 1150ms;
    -o-transition-delay: 1150ms;
    transition-delay: 1150ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(4) {
    -webkit-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(5) {
    -webkit-transition-delay: 1250ms;
    -o-transition-delay: 1250ms;
    transition-delay: 1250ms;
  }
  
  html:not(.to-explore) .popper.show .map__tab:nth-child(6) {
    -webkit-transition-delay: 1300ms;
    -o-transition-delay: 1300ms;
    transition-delay: 1300ms;
  }
  
  .map__move {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985);
    transition: -webkit-transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985);
    -o-transition: transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985);
    transition: transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985);
    transition: transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985), -webkit-transform 400ms cubic-bezier(0.205, 0.005, 0.275, 0.985);
  }
  
  .map__move[data-zoom="0"] {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .map__move[data-zoom="1"] {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
  }
  
  .map__move[data-zoom="2"] {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
  }
  
  .map__move[data-zoom="3"] {
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
  }
  
  .map__move[data-zoom="4"] {
    -webkit-transform: scale(4.2);
    -ms-transform: scale(4.2);
    transform: scale(4.2);
  }
  
  .map__move[data-zoom="5"] {
    -webkit-transform: scale(5.5);
    -ms-transform: scale(5.5);
    transform: scale(5.5);
  }
  
  .map__move[data-zoom="0"] .map__node {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .map__move[data-zoom="1"] .map__node {
    -webkit-transform: scale(0.82);
    -ms-transform: scale(0.82);
    transform: scale(0.82);
  }
  
  .map__move[data-zoom="2"] .map__node {
    -webkit-transform: scale(0.63);
    -ms-transform: scale(0.63);
    transform: scale(0.63);
  }
  
  .map__move[data-zoom="3"] .map__node {
    -webkit-transform: scale(0.45);
    -ms-transform: scale(0.45);
    transform: scale(0.45);
  }
  
  .map__move[data-zoom="4"] .map__node {
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3);
  }
  
  .map__move[data-zoom="5"] .map__node {
    -webkit-transform: scale(0.25);
    -ms-transform: scale(0.25);
    transform: scale(0.25);
  }
  
  .map__move[data-zoom="0"] .show-zoom-1:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="0"] .show-zoom-2:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="0"] .show-zoom-3:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="0"] .show-zoom-4:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="0"] .show-zoom-5:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="1"] .show-zoom-2:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="1"] .show-zoom-3:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="1"] .show-zoom-4:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="1"] .show-zoom-5:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="2"] .show-zoom-3:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="2"] .show-zoom-4:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="2"] .show-zoom-5:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="3"] .show-zoom-4:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="3"] .show-zoom-5:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  .map__move[data-zoom="4"] .show-zoom-5:not(.current) {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
  }
  
  @media screen and (max-width: 1023px) {
    .map {
      top: 0;
      left: 0;
      -webkit-transform: none !important;
      -ms-transform: none !important;
      transform: none !important;
      width: 100%;
      height: 100%;
      max-height: 100%;
    }
  
    .map__inner {
      width: 100% !important;
      height: 100%;
      -webkit-transform: translateX(-50%) translateY(100%);
      -ms-transform: translateX(-50%) translateY(100%);
      transform: translateX(-50%) translateY(100%);
      -webkit-transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      transition: -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      -o-transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
      transition: transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 500ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    }
  
    .map__inner:after {
      border-left: none;
      border-right: none;
      border-bottom: none;
      top: -0.6rem;
      display: none;
    }
  
    .map__close {
      position: absolute;
      top: 8.5vh;
      left: 2.8266666667rem;
      width: 10.2vh;
      height: 10.2vh;
      z-index: 2;
      display: block;
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -o-transition: opacity 300ms ease-in-out;
      transition: opacity 300ms ease-in-out;
    }
  
    .map__close img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
  
    .map__controls {
      top: auto;
      bottom: 2rem;
      z-index: 2;
    }
  
    .map__legend {
      margin-top: 0.5rem;
      padding-left: 1.5rem;
    }
  
    .map__legend > span:first-child {
      display: none;
    }
  
    .map__zoom {
      margin-top: 0.5rem;
      background-color: white;
      width: 13rem;
      margin-left: 3rem;
    }
  
    .map__zoom button {
      max-width: 5rem;
      width: 5rem;
    }
  
    .map__zoom button,
    .map__zoom span {
      color: black;
    }
  
    .map__tabs {
      -webkit-transform: translateY(50%) translateX(50%) rotate(90deg);
      -ms-transform: translateY(50%) translateX(50%) rotate(90deg);
      transform: translateY(50%) translateX(50%) rotate(90deg);
      right: 2rem;
      top: auto;
      bottom: calc(var(--app-height) * 0.5 - 2rem);
    }
  
    .map__tab {
      min-width: 5.5rem;
      margin: 0 0.1rem;
    }
  
    .map__tabInner > span {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
      display: inline-block;
      position: relative;
      font-size: 0.95rem;
    }
  
    .explore__map .popper__overlay {
      -webkit-transition: opacity 500ms linear;
      -o-transition: opacity 500ms linear;
      transition: opacity 500ms linear;
    }
  
    html:not(.to-explore) .explore__map.popper.show .popper__overlay {
      opacity: 0.8;
      -webkit-transition: opacity 800ms linear;
      -o-transition: opacity 800ms linear;
      transition: opacity 800ms linear;
    }
  
    html:not(.to-explore) .popper.show .map__close {
      opacity: 1;
      -webkit-transition: opacity 300ms 300ms ease-in-out;
      -o-transition: opacity 300ms 300ms ease-in-out;
      transition: opacity 300ms 300ms ease-in-out;
    }
  
    html:not(.to-explore) .popper.show .map .popper__overlay {
      opacity: 1;
    }
  
    html:not(.to-explore) .popper.show .map__inner {
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      -webkit-transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
      transition: -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
      -o-transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
      transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
      transition: transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995), -webkit-transform 800ms cubic-bezier(0.525, 0.06, 0.11, 0.995);
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(0) {
      -webkit-transition-delay: 100ms;
      -o-transition-delay: 100ms;
      transition-delay: 100ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(1) {
      -webkit-transition-delay: 150ms;
      -o-transition-delay: 150ms;
      transition-delay: 150ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(2) {
      -webkit-transition-delay: 200ms;
      -o-transition-delay: 200ms;
      transition-delay: 200ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(3) {
      -webkit-transition-delay: 250ms;
      -o-transition-delay: 250ms;
      transition-delay: 250ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(4) {
      -webkit-transition-delay: 300ms;
      -o-transition-delay: 300ms;
      transition-delay: 300ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(5) {
      -webkit-transition-delay: 350ms;
      -o-transition-delay: 350ms;
      transition-delay: 350ms;
    }
  
    html:not(.to-explore) .popper.show .map__tab:nth-child(6) {
      -webkit-transition-delay: 400ms;
      -o-transition-delay: 400ms;
      transition-delay: 400ms;
    }
  }
  
  .generalContent__page {
    padding: 5rem 7.5rem 12rem;
    position: relative;
    min-height: 100%;
  }
  
  .generalContent__blocks {
    padding: 5rem 0;
  }
  
  .generalContent__block {
    margin-bottom: 4rem;
  }
  
  .generalContent__heading {
    text-transform: uppercase;
    text-align: center;
    display: block;
    letter-spacing: 0.3em;
    font-size: 4rem;
    line-height: 1.15;
    font-family: "guyot-headline", serif;
    font-weight: 600;
    color: #474747;
    padding-left: 0.3em;
  }
  
  @media screen and (max-width: 1023px) {
    .generalContent__heading {
      font-size: 3.5rem;
    }
  }
  
  .generalContent__subHeading {
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #474747;
    text-align: center;
    display: block;
    margin-bottom: 1rem;
    padding-left: 0.1em;
  }
  
  .generalContent__headingFeather {
    text-align: center;
    margin-top: 4rem;
  }
  
  .generalContent__paragraph {
    font-size: 1.6rem;
    line-height: 1.6;
  }
  
  .generalContent__paragraph p + p {
    margin-top: 1.5em;
  }
  
  @media screen and (max-width: 1023px) {
    .generalContent__paragraph {
      font-size: 1.7rem;
    }
  }
  
  .generalContent__divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 2rem;
    -webkit-filter: invert(1) !important;
    filter: invert(1) !important;
    opacity: 0.15;
    margin-top: 4rem;
  }
  
  .generalContent__divider .baton {
    opacity: 0.5;
  }
  
  .generalContent__divider img {
    width: 11rem;
    margin: 0 2rem;
  }
  
  .generalContent__feather {
    text-align: center;
    opacity: 0.2;
  }
  
  .generalContent__node {
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 6rem;
  }
  
  .generalContent__node img {
    width: 4rem;
    height: 4rem;
  }
  
  .generalContent__header {
    margin: 0 -4rem;
  }
  
  .popper .generalContent__header,
  .popper .generalContent__feather,
  .popper .generalContent__blocks {
    opacity: 0;
    -webkit-transform: translateY(4rem);
    -ms-transform: translateY(4rem);
    transform: translateY(4rem);
    -webkit-transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 200ms linear, transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 1ms 200ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .generalContent__header {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 500ms 150ms ease-in-out, -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 500ms 150ms ease-in-out, transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 600ms 150ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .generalContent__blocks {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  .popper.show .generalContent__feather {
    opacity: 0.2;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  @media screen and (max-width: 1023px) {
    .generalContent__page {
      padding: 3.4vh 4.24rem 20.4vh;
    }
  
    .generalContent__blocks {
      padding: 11.9vh 0 5.1vh 0;
    }
  
    .generalContent__divider {
      display: none;
    }
  
    .generalContent__paragraph {
      font-size: 1.7rem;
      padding: 0 2rem;
    }
  }
  
  .fof {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  .fof__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 120rem;
    height: 100%;
  }
  
  .fof__bg img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
  
  .fof__bg:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40rem;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(black));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), black);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), black);
  }
  
  .fof__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 58rem;
    height: 100%;
    padding: 10rem 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
  
  .fof__heading {
    color: #D9D9D9;
    text-align: center;
    font-family: Guyot Headline;
    font-size: 9rem;
    font-style: normal;
    font-weight: 300;
    line-height: 10rem;
    /* 111.111% */
    letter-spacing: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 4rem;
  }
  
  .fof__paragraph {
    color: #E3E3E3;
    text-align: center;
    font-family: Guyot Text;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.3rem;
    /* 164.286% */
    margin-bottom: 12rem;
  }
  
  .fof__buttons {
    color: white;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  @media screen and (max-width: 1023px) {
    .fof__content {
      width: 44rem;
      padding: 5rem;
    }
  
    .fof__bg {
      width: 44rem;
    }
  
    .fof__bg:after {
      width: 16rem;
    }
  
    .fof__heading {
      color: #D9D9D9;
      text-align: center;
      font-family: Guyot Headline;
      font-size: 4.5rem;
      font-style: normal;
      font-weight: 300;
      line-height: 5.5rem;
      /* 122.222% */
      letter-spacing: 0.45rem;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
  
    .fof__paragraph {
      color: #E3E3E3;
      text-align: center;
      font-family: Guyot Text;
      font-size: 1.3rem;
      font-style: normal;
      font-weight: 400;
      line-height: 2.3rem;
      /* 176.923% */
      margin-bottom: 4rem;
    }
  }
  
  .policy {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  
  .policy__content {
    color: #474747;
    background-color: #EDE8E2;
    min-height: 100vh;
    padding: 20rem 5rem 30rem;
    position: relative;
  }
  
  .policy__pageInner {
    width: 62rem;
    margin: auto;
    font-size: 1.5rem;
    line-height: 1.8;
  }
  
  .policy__heading {
    text-align: center;
    width: 90rem;
    margin: 0 auto 3rem;
  }
  
  .policy__updated {
    text-align: center;
    margin: auto;
    display: block;
    margin-bottom: 10rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
  }
  
  .policy__richtext p + p {
    margin-top: 1.5em;
  }
  
  @media screen and (max-width: 1023px) {
    .policy {
      height: var(--app-height);
    }
  
    .policy__content {
      max-width: 100%;
      padding: 14rem 3rem 20rem;
    }
  
    .policy__pageInner {
      width: 60rem;
      margin: auto;
      font-size: 1.5rem;
      line-height: 1.65;
    }
  
    .policy__heading {
      text-align: center;
      width: 70rem;
      margin: 0 auto 2rem;
    }
  
    .policy__updated {
      margin-bottom: 6rem;
    }
  } 0.915);
  }
  .popper.show .generalContent__blocks {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 400ms 250ms ease-in-out, transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 700ms 250ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  .popper.show .generalContent__feather {
    opacity: 0.2;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    -o-transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
    transition: opacity 300ms 350ms ease-in-out, transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915), -webkit-transform 800ms 350ms cubic-bezier(0.13, 0.095, 0.2, 0.915);
  }
  
  @media screen and (max-width: 1023px) {
    .generalContent__page {
      padding: 3.4vh 4.24rem 20.4vh;
    }
    .generalContent__blocks {
      padding: 11.9vh 0 5.1vh 0;
    }
    .generalContent__divider {
      display: none;
    }
    .generalContent__paragraph {
      font-size: 1.7rem;
      padding: 0 2rem;
    }
  }
  .fof {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .fof__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 120rem;
    height: 100%;
  }
  .fof__bg img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    width: 100%;
    height: 100%;
    opacity: 0.9;
  }
  .fof__bg:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40rem;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(black));
    background: -o-linear-gradient(left, rgba(0, 0, 0, 0), black);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), black);
  }
  .fof__content {
    position: absolute;
    top: 0;
    right: 0;
    width: 58rem;
    height: 100%;
    padding: 10rem 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
  }
  .fof__heading {
    color: #D9D9D9;
    text-align: center;
    font-family: Guyot Headline;
    font-size: 9rem;
    font-style: normal;
    font-weight: 300;
    line-height: 10rem;
    /* 111.111% */
    letter-spacing: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 4rem;
  }
  .fof__paragraph {
    color: #E3E3E3;
    text-align: center;
    font-family: Guyot Text;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.3rem;
    /* 164.286% */
    margin-bottom: 12rem;
  }
  .fof__buttons {
    color: white;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  @media screen and (max-width: 1023px) {
    .fof__content {
      width: 44rem;
      padding: 5rem;
    }
    .fof__bg {
      width: 44rem;
    }
    .fof__bg:after {
      width: 16rem;
    }
    .fof__heading {
      color: #D9D9D9;
      text-align: center;
      font-family: Guyot Headline;
      font-size: 4.5rem;
      font-style: normal;
      font-weight: 300;
      line-height: 5.5rem;
      /* 122.222% */
      letter-spacing: 0.45rem;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
    }
    .fof__paragraph {
      color: #E3E3E3;
      text-align: center;
      font-family: Guyot Text;
      font-size: 1.3rem;
      font-style: normal;
      font-weight: 400;
      line-height: 2.3rem;
      /* 176.923% */
      margin-bottom: 4rem;
    }
  }
  
  .policy {
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .policy__content {
    color: #474747;
    background-color: #EDE8E2;
    min-height: 100vh;
    padding: 20rem 5rem 30rem;
    position: relative;
  }
  .policy__pageInner {
    width: 62rem;
    margin: auto;
    font-size: 1.5rem;
    line-height: 1.8;
  }
  .policy__heading {
    text-align: center;
    width: 90rem;
    margin: 0 auto 3rem;
  }
  .policy__updated {
    text-align: center;
    margin: auto;
    display: block;
    margin-bottom: 10rem;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
  }
  .policy__richtext p + p {
    margin-top: 1.5em;
  }
  @media screen and (max-width: 1023px) {
    .policy {
      height: var(--app-height);
    }
    .policy__content {
      max-width: 100%;
      padding: 14rem 3rem 20rem;
    }
    .policy__pageInner {
      width: 60rem;
      margin: auto;
      font-size: 1.5rem;
      line-height: 1.65;
    }
    .policy__heading {
      text-align: center;
      width: 70rem;
      margin: 0 auto 2rem;
    }
    .policy__updated {
      margin-bottom: 6rem;
    }
  }