/* @font-face {
      font-family: CircularStd;
      src: url('webfonts/CircularStd-Medium.otf');
  }

  @font-face {
      font-family: CircularStdBold;
      src: url('webfonts/CircularStd-Bold.otf');
  }

  @font-face {
      font-family: CircularStdBook;
      src: url('webfonts/CircularStd-Book.otf');
  }

  .circular {
      font-family: CircularStd, sans-serif;
      font-weight: 500;
  }

  .circular-bold {
      font-family: CircularStdBold, sans-serif;
      font-weight: 700;
  }

  .circular-book {
      font-family: CircularStdBook, sans-serif;
      font-weight: 300;
  } */
  @import url('css/satoshi.css');

  :root {
      font-family: 'Satoshi-Medium', sans-serif;
      /* overscroll-behavior: auto;
      overflow: scroll; */
  }

  @media (min-width:48em) {
      :root {
          font-family: 'Satoshi-Medium', sans-serif;
          overscroll-behavior: none;
          overflow: hidden;
      }
  }

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

  /* @supports (font-variation-settings: normal) {:root { font-family: 'Inter var', sans-serif; }} */
  html {
      background: #000000;
      height: 100vh;
  }

  body {
      padding: 0;
      margin: 0;
      transition: background-color .3s;
  }

  .page {
      background-color: #FBF9F4;
      height: 100%;
      color: #0B0904;
      position: sticky;
      height: 100vh;
      width: 100vw;
      overflow: auto;
  }

  @media (min-width:48em) {
      .page {
          overflow: hidden;
      }
  }

  .art {
      width: 100%;
      /* height: 200px; */
      overflow: hidden;
  }

  ::selection {
      background: #1c1b1b;
      color: #878787
  }

  @media (prefers-color-scheme: dark) {
      .page {
          background-color: #0B0904;
          color: #FBF9F4;
      }

      ::selection {
          background: #878787;
          color: #1c1b1b
      }
  }

  nav {
      width: 100%;
      z-index: 100;
  }

  /*position: fixed;*/
  .flex {
      display: -ms-flexbox;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: flex-start;
      -ms-flex-wrap: wrap;
      -ms-flex-pack: start;
  }

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

  .flex-col-inner {
      justify-content: space-between;
      width: 100%;
      display: block
  }

  .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* background: #FBF9F4; */
  }

  @media (min-width: 48em) {
      .flex-50 {
          width: 50%;
      }
  }

  @media (min-width:64em) {
      .col2 {
          columns: 2;
          gap: 1rem
      }
  }

  .box {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(672px, 1fr));
      gap: 1rem
  }

  .logo {
      fill: #0B0904;
  }

  @media (prefers-color-scheme: dark) {
      .logo {
          fill: #FBF9F4;
      }

      .flex-container {
          background: #0B0904;
      }
  }

  .nav,
  .main {
      padding: 0 40px;
      max-width: 1600px;
      margin: 0 auto;
  }

  /* .main {padding-top:230px; } */
  .logo,
  .navigation,
  .footer {
      list-style: none;
      display: flex
  }

  .row {
      margin-top: 200px;
  }

  .footer ul li:first-of-type {
      margin: 0 50px 0 0;
  }

  .footer a {
      color: black;
      text-decoration: none;
  }

  .logo a,
  .navigation a {
      text-decoration: none;
  }

  .navigation {
      display: flex;
  }

  .navigation a,
  .navigation span {
      display: block;
      padding: 1em;
      color: #0B0904;
  }

  .navigation a:hover,
  .footer a:hover {
      text-decoration: underline;
      color: #555;
  }

  .foot {
      position: static;
      width: 100%;
      padding: 0 40px;
      background: #FBF9F4;
  }

  @media (min-width:40em) {
      .foot {
          position: fixed;
          bottom: 0;
          padding: 0 40px;
      }
  }

  @media (prefers-color-scheme: dark) {
      .foot {
          background: #0B0904;
          color: #fff;
          /*#FBF9F4; */
      }
  }

  /* flex-container: flex-direction: column;  */
  @media all and (max-width: 990px) {
      .flex-container {}

      .logo {
          margin: 0;
      }

      .navigation {
          wjustify-content: space-around;
      }
  }

  @media all and (max-width: 600px) {
      .logo {
          margin: .25em 0;
          align-self: left;
          /* align the logo to the left side of 'flex-container' */
      }

      .navigation {
          flex-direction: column;
      }

      .navigation a {
          text-align: center;
          padding: 10px;
          border-top: 1px solid rgba(255, 255, 255, 0.3);
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }

      .navigation li:last-of-type a {
          border-bottom: none;
      }
  }

  .details {
      bottom: 10px;
      left: 30px;
      position: absolute;
      z-index: 10;
  }

  .bold {
      font-weight: 700;
      font-family: 'Satoshi-Black';
  }

  /* demi-bold */
  .medium {
      font-weight: 500;
      font-family: 'Satoshi-medium';
  }

  .regular {
      font-weight: 400;
      font-family: 'Satoshi-Regular';
  }

  .p {
      font-size: 20px;
  }

  .h1 {

      font-size: 2.5rem;
      line-height: 1.2;
  }

  .h2 {
      font-size: 2rem;
  }

  .h3 {
      font-size: 1.7rem;
  }

  .h4 {
      font-size: 1.5rem;
  }

  @media all and (max-width: 768px) {
      .h1 {
          font-size: 2.3rem;
      }
  }

  .line-height-1 {
      line-height: 1
  }

  .line-height-2 {
      line-height: 1.4
  }

  .line-height-3 {
      line-height: 1.8
  }

  .line-height-4 {
      line-height: 2.3
  }

  .border-top {
      border-top: 1px solid #000;
  }

  @media (prefers-color-scheme: dark) {
      .border-top {
          border-top: 1px solid #FBF9F4;
      }
  }

  .fit {
      max-width: 100%
  }

  .m {
      margin: 20px;
  }

  .mb {
      margin-bottom: 20px;
  }

  .mt {
      margin-top: 20px;
  }


  .m0 {
      margin: 0
  }

  .mt-auto {
      margin-top: auto
  }

  .mt1 {
      margin-top: 0.5rem;
  }

  .mt2 {
      margin-top: 1rem;
  }

  .mt3 {
      margin-top: 2rem;
  }

  .mt4 {
      margin-top: 4rem;
  }

  .mb1 {
      margin-bottom: 0.5rem;
  }

  .mb2 {
      margin-bottom: 1rem;
  }

  .mb3 {
      margin-bottom: 2rem;
  }

  .mb4 {
      margin-bottom: 4rem;
  }

  .py1 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
  }

  .py2 {
      padding-top: 1rem;
      padding-bottom: 1rem;
  }

  /* .cols { -webkit-columns: 2;-moz-columns:2;columns:2;}
            .cols-6 { column-span:6; } */
  .clearfix:after,
  .clearfix:before {
      content: " ";
      display: table
  }

  .clearfix:after {
      clear: both
  }

  .col {
      float: left
  }

  .col,
  .col-right {
      box-sizing: border-box
  }

  .col-right {
      float: right
  }

  .col-1 {
      width: 8.33333%
  }

  .col-2 {
      width: 16.66667%
  }

  .col-3 {
      width: 25%
  }

  .col-4 {
      width: 33.33333%
  }

  .col-5 {
      width: 41.66667%
  }

  .col-6 {
      width: 50%
  }

  .col-7 {
      width: 58.33333%
  }

  .col-8 {
      width: 66.66667%
  }

  .col-9 {
      width: 75%
  }

  .col-10 {
      width: 83.33333%
  }

  .col-11 {
      width: 91.66667%
  }

  .col-12 {
      width: 100%
  }

  @media (min-width:40em) {
      .sm-col {
          float: left;
          box-sizing: border-box
      }

      .sm-col-right {
          float: right;
          box-sizing: border-box
      }

      .sm-col-1 {
          width: 8.33333%
      }

      .sm-col-2 {
          width: 16.66667%
      }

      .sm-col-3 {
          width: 25%
      }

      .sm-col-4 {
          width: 33.33333%
      }

      .sm-col-5 {
          width: 41.66667%
      }

      .sm-col-6 {
          width: 50%
      }

      .sm-col-7 {
          width: 58.33333%
      }

      .sm-col-8 {
          width: 66.66667%
      }

      .sm-col-9 {
          width: 75%
      }

      .sm-col-10 {
          width: 83.33333%
      }

      .sm-col-11 {
          width: 91.66667%
      }

      .sm-col-12 {
          width: 100%
      }
  }

  @media (min-width:52em) {
      .md-col {
          float: left;
          box-sizing: border-box
      }

      .md-col-right {
          float: right;
          box-sizing: border-box
      }

      .md-col-1 {
          width: 8.33333%
      }

      .md-col-2 {
          width: 16.66667%
      }

      .md-col-3 {
          width: 25%
      }

      .md-col-4 {
          width: 33.33333%
      }

      .md-col-5 {
          width: 41.66667%
      }

      .md-col-6 {
          width: 50%
      }

      .md-col-7 {
          width: 58.33333%
      }

      .md-col-8 {
          width: 66.66667%
      }

      .md-col-9 {
          width: 75%
      }

      .md-col-10 {
          width: 83.33333%
      }

      .md-col-11 {
          width: 91.66667%
      }

      .md-col-12 {
          width: 100%
      }
  }

  @media (min-width:64em) {
      .lg-col {
          float: left;
          box-sizing: border-box
      }

      .lg-col-right {
          float: right;
          box-sizing: border-box
      }

      .lg-col-1 {
          width: 8.33333%
      }

      .lg-col-2 {
          width: 16.66667%
      }

      .lg-col-3 {
          width: 25%
      }

      .lg-col-4 {
          width: 33.33333%
      }

      .lg-col-5 {
          width: 41.66667%
      }

      .lg-col-6 {
          width: 50%
      }

      .lg-col-7 {
          width: 58.33333%
      }

      .lg-col-8 {
          width: 66.66667%
      }

      .lg-col-9 {
          width: 75%
      }

      .lg-col-10 {
          width: 83.33333%
      }

      .lg-col-11 {
          width: 91.66667%
      }

      .lg-col-12 {
          width: 100%
      }
  }

  .come-in.delay {
      -webkit-animation-duration: 1.25s;
      -o-animation-duration: 1.25s;
      animation-duration: 1.25s;
  }

  .come-in {
      -webkit-transform: translateY(450px);
      -ms-transform: translateY(450px);
      -o-transform: translateY(450px);
      transform: translateY(450px);
      opacity: 0;
      -webkit-animation: slide-up .9s ease forwards;
      -o-animation: slide-up .9s ease forwards;
      animation: slide-up .9s ease forwards;
  }

  .drop-in {
      -webkit-transform: translateY(-250px);
      -ms-transform: translateY(-250px);
      -o-transform: translateY(-250px);
      transform: translateY(-250px);
      opacity: 0;
      -webkit-animation: slide-down .6s ease forwards;
      -o-animation: slide-down .6s ease forwards;
      animation: slide-down .6s ease forwards;
  }

  @-webkit-keyframes slide-up {
      to {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0)
      }
  }

  @-o-keyframes slide-up {
      to {
          opacity: 1;
          -o-transform: translateY(0);
          transform: translateY(0)
      }
  }

  @keyframes slide-up {
      to {
          opacity: 1;
          -webkit-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0)
      }
  }

  @-webkit-keyframes slide-down {
      to {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0)
      }
  }

  @-o-keyframes slide-down {
      to {
          opacity: 1;
          -o-transform: translateY(0);
          transform: translateY(0)
      }
  }

  @keyframes slide-down {
      to {
          opacity: 1;
          -webkit-transform: translateY(0);
          -o-transform: translateY(0);
          transform: translateY(0)
      }
  }