#load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  pointer-events: none;
  z-index: 10;
}

svg {
  width: 100%;
  height: 100%;
}

#logo_left,
#logo_right {
  overflow: hidden;
  position: relative;
  background-color: #fcfcfc;
}

#logo_left div {
  width: 70vmin;
  height: 70vmin;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  overflow: hidden;
}

#logo_right div {
  width: 70vmin;
  height: 70vmin;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-50%);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.coloring {
  background-color: #e7e5e5;
  box-shadow: inset 0px 0px 0px 10px #fcfcfc;
}

#logo_left div.coloring::before,
#logo_right div.coloring::before {
  display: block;
  content: "";
  position: absolute;
  bottom: 3px;
  left: 3px;
  background-color: #151515;
  width: 97%;
  height: 97%;
  /* z-index: 1; */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  transform-origin: bottom left;
  animation-name: kf_fill;
  animation-duration: 1.2s;
  animation-delay: 0.5s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
}

/* #logo_left div::after,
#logo_right div:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/logo_invert.svg");
  background-size: contain;
  background-position: center;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
} */

@keyframes kf_fill {
  0% {
    width: 20%;
    height: 0%;
    border-radius: 100%;
    left: 40%;
  }
  100% {
    transform: 0;
    border-radius: 0;
    left: 2px;
  }
}

#load div.anim::before {
  transform: translateY(0);
  border-radius: 0;
}

#logo_left {
  animation-name: kf_left;
  animation-duration: 0.8s;
  animation-delay: 1.9s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;

  width: 50vw;
  position: relative;
}

#logo_right {
  animation-name: kf_right;
  animation-duration: 0.8s;
  animation-delay: 2.1s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
  width: 50vw;
  position: relative;
}

@keyframes kf_left {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes kf_right {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

#left {
  transform: translateY(100%);
  animation-name: kf_content;
  animation-duration: 0.8s;
  animation-delay: 1.9s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
}

#right {
  transform: translateY(-100%);
  animation-name: kf_content;
  animation-duration: 0.8s;
  animation-delay: 2.1s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
}

@keyframes kf_content {
  100% {
    transform: translateY(0);
  }
}

header {
  transform: translateX(-100%);
  animation-name: kf_content;
  animation-duration: 0.4s;
  animation-delay: 2.6s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
}

footer {
  transform: translateY(100%);
  animation-name: kf_content;
  animation-duration: 0.4s;
  animation-delay: 2.9s;
  animation-timing-function: cubic-bezier(0.8, 0.02, 0.3, 1);
  animation-fill-mode: both;
}

@media only screen and (max-width: 990px) {
  #load {
    flex-direction: column;
  }

  #logo_left {
    width: 100vw;
    height: 40vh;
  }

  #logo_right {
    width: 100vw;
    height: 60vh;
    background-color: #fcfcfc;
    z-index: 10;
  }

  #logo_left div {
    width: 90vmin;
    height: 90vmin;
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: #e7e5e5;
    transform: translateY(-40%) translateX(-50%);
    overflow: hidden;
  }

  #logo_right div {
    width: 90vmin;
    height: 90vmin;
    position: absolute;
    top: 0%;
    left: 50%;
    background-color: #e7e5e5;
    transform: translateY(-40%) translateX(-50%);
    overflow: hidden;
  }

  @keyframes kf_left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes kf_right {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  #left {
    transform: translateX(100%);
  }

  #right {
    transform: translateX(-100%);
  }
}