@media (max-width:1399px) {}
@media (max-width:1199px) {}
@media (max-width:991px) {
  .logo {
    max-width: 100px;
  }
  .hero-top {
    padding: 0 100px;
  }
  h1 {
    margin-top: .7em;
  }
}
@media (max-width:767px) {
  h1 {
    font-size: 3.6rem;
  }
  .logo {
    max-width: none;
    position: static;
    text-align: center;
  }
  .hero-top {
    padding: 0;
  }
  .hero-top img {
    width: 20vw
  }
  .hero-inner {
    padding: 1rem;
  }
  .hero-inner-bg {
    display: none
  }
  .hero-theme {
    position: static
  }
  .hero-theme img {
    width: inherit
  }
  .hero-anim {
    position: static;
    margin-top: 8vw;
    width: inherit;
  }
  .hero-bottom {
    width: inherit
  }
  .credits {
    font-size: 2.4rem;
  }
  .red-envs {
    margin-bottom: -8vw;
  }
  .red-env img {
    width: 22.5vw; /*2.5*/
  }
  .hand {
    width: 36.75vw; /*2.5*/
    margin: auto;
  }
  .hero-bottom {
    font-size: 2.4rem;
    padding: 2rem 0;
    column-gap: 2rem;
  }
  .credits {
    flex: 1
  }
  .history {
    flex: 1
  }

}