@font-face {
  font-family: 'AcuteGroteskLight';
  src: url('./fonts/AcuteGrotesk-Light.woff') format('woff'), /* Modern Browsers */
       url('./fonts/AcuteGrotesk-Light.woff2') format('woff2'), /* Modern Browsers */
       url('./fonts/AcuteGrotesk-Light.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: #111;
  color: #d7443d;
  font-family: 'AcuteGroteskLight';
  font-size: 12px;
}
header{
  width: 100%;
  padding: 2.5em 3em;
  box-sizing: border-box;
  transition: opacity 1s ease-out;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
@media only screen and (min-width: 1024px) {
  body{
    font-size: 14px;
  }
  header{
    display: flex;
    justify-content: space-between;
  }
}
header svg{
  width: 24px;
  height: 24px;
  transform: translateY(-2px);
}
header p{
  margin-top: 0;
}
header a{
  pointer-events: visible;
}
body:not(.loaded) header p, body:not(.loaded) header svg{
  display: none;
}
body:not(.loaded) header p.sitename{
  display: block;
  text-align: center;
  margin: 0 auto;
}
footer{
  text-align: center;
  padding: 2.5em 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  pointer-events: none;
  transition: opacity 1s ease-out;
}
a{
  color: #d7443d;
  text-decoration: none;
}
.enter{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  color: #d7443d;
  text-decoration: none;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 1s ease-out;
  /*
  animation-fill-mode: forwards;
  */
}

#bounce {
  position: absolute;
  background-size: 100% auto;
  background-repeat: no-repeat;
  color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 1s ease-out;
  background-position: top right;
  width: 188px;
  height: 175px;
}
#bounce[data-direction="left"]{
  background-position: top left;
}

#bounce.a{
    background-image: url(svg/MilkTypeFoundry_Loading_A.svg);
}
#bounce.b{
  background-image: url(svg/MilkTypeFoundry_Loading_B.svg);
}
#bounce.c{
  background-image: url(svg/MilkTypeFoundry_Loading_C.svg);
}
#bounce.d{
  background-image: url(svg/MilkTypeFoundry_Loading_D.svg);
}
#bounce.e{
  background-image: url(svg/MilkTypeFoundry_Loading_E.svg);
}
#bounce.f{
  background-image: url(svg/MilkTypeFoundry_Loading_F.svg);
}
#bounce.g{
  background-image: url(svg/MilkTypeFoundry_Loading_G.svg);
}
#bounce.h{
  background-image: url(svg/MilkTypeFoundry_Loading_H.svg);
}
#bounce.i{
  background-image: url(svg/MilkTypeFoundry_Loading_I.svg);
}
#bounce.j{
  background-image: url(svg/MilkTypeFoundry_Loading_J.svg);
}
#bounce.k{
  background-image: url(svg/MilkTypeFoundry_Loading_K.svg);
}
#bounce.l{
  background-image: url(svg/MilkTypeFoundry_Loading_L.svg);
}
#bounce.m{
  background-image: url(svg/MilkTypeFoundry_Loading_M.svg);
}
#bounce.n{
  background-image: url(svg/MilkTypeFoundry_Loading_N.svg);
}
#bounce.o{
  background-image: url(svg/MilkTypeFoundry_Loading_O.svg);
}
#bounce.p{
  background-image: url(svg/MilkTypeFoundry_Loading_P.svg);
}
#bounce.q{
  background-image: url(svg/MilkTypeFoundry_Loading_Q.svg);
}
#bounce.r{
  background-image: url(svg/MilkTypeFoundry_Loading_R.svg);
}
#bounce.s{
  background-image: url(svg/MilkTypeFoundry_Loading_S.svg);
}
#bounce.t{
  background-image: url(svg/MilkTypeFoundry_Loading_T.svg);
}
#bounce.u{
  background-image: url(svg/MilkTypeFoundry_Loading_U.svg);
}
#bounce.v{
  background-image: url(svg/MilkTypeFoundry_Loading_V.svg);
}
#bounce.w{
  background-image: url(svg/MilkTypeFoundry_Loading_W.svg);
}
#bounce.x{
  background-image: url(svg/MilkTypeFoundry_Loading_X.svg);
}
#bounce.y{
  background-image: url(svg/MilkTypeFoundry_Loading_Y.svg);
}
#bounce.z{
  background-image: url(svg/MilkTypeFoundry_Loading_Z.svg);
}

[data-fade="out"]{
  opacity: 0;
}
[data-fade="in"]{
  opacity: 1;
  /*
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-delay: 3s;
  */
}
#main{
  position: absolute;
  top:25vh;
  right:0;
  z-index: 1;
  width: 100%;
  height: 75vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
  display: none;
}
@media only screen and (min-width: 1024px) {
  #main{
    top:0;
    height: 100%;
  }
}
.grid{
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."
    ". . . . . . . ."; 
}
.hotspot{
  width: 12.5vw;
  height: 12.5vh;
}
.typeface{
  position: absolute;
  left:3em;
  bottom:2.5em;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}