/*--------------------------------------------------------------
 3. Preloader
----------------------------------------------------------------*/
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  transition: all 1s ease;

  &.hide {
    opacity: 0;
    visibility: hidden;
    width: 0%;
  }

  .preloader-inner {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .spinner {
    position: relative;
    width: 100%;
    max-width: 169px;
    height: 145px;
    margin: 0 auto 30px auto;

    img:first-child {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.2;
    }

    img.wheel {
      width: 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      filter: brightness(0) invert(1);
      animation: spinner 4s infinite linear;
    }
  }

  .loading-text {
    animation: scale1 4s infinite linear;
  }
}

/* Animation of the preloader */
@keyframes spinner {
  to {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes scale1 {
  0% {
    transform: scale(1);
    // opacity: 1;
  }

  50% {
    transform: scale(0.8);
    // opacity: 0;
  }

  100% {
    transform: scale(1);
    // opacity: 1;
  }
}