#preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: #FFFBF2;
  z-index: 9999999;
  display: grid;
  align-content: center;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;

  /* common */
  .loading {
    font-size: 84px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-align: center;
    @include media-query(490px){
      letter-spacing: -8px;
    }

    span {
      display: inline-block;
      margin: 0 -.05em;
      font-size: clamp(64px, 5vw, 180px);
    }
  }

  .loading07 {
    span {
      position: relative;
      color: rgba(#e64f3b85, .2);

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        content: attr(data-text);
        color: $accent-1;
        opacity: 0;
        transform: scale(1.5);
        animation: loading07 3s infinite;
      }

      @for $i from 1 through 9 {
        &:nth-child(#{$i+1})::after {
          animation-delay: #{$i*.1}s;
        }
      }
    }
  }

}


@keyframes loading07 {

  0%,
  75%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }

  25%,
  50% {
    transform: scale(1);
    opacity: 1;
  }
}