.loader-page {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.1px);
  -webkit-backdrop-filter: blur(3.1px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.loader-page .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 2000px;
  transform: rotateX(-30deg) rotateY(-45deg);
}
.loader-page .loader .holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transform: translate3d(0em, 3em, 1.5em);
}
.loader-page .loader .holder:last-child {
  transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
}
.loader-page .loader .holder:first-child {
  transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
}
.loader-page .loader .holder .color1 {
  background: #FF4E00;
}
.loader-page .loader .holder .color1:before {
  background-color: #992f00;
}
.loader-page .loader .holder .color1:after {
  background-color: #cc3e00;
}
.loader-page .loader .holder .color2 {
  background: #FFB466;
}
.loader-page .loader .holder .color2:before {
  background-color: #ff8200;
}
.loader-page .loader .holder .color2:after {
  background-color: #ff9b33;
}
.loader-page .loader .holder .color3 {
  background: #FF8100;
}
.loader-page .loader .holder .color3:before {
  background-color: #994d00;
}
.loader-page .loader .holder .color3:after {
  background-color: #cc6700;
}
.loader-page .loader .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  animation: ani-box 6s infinite;
  width: 3em;
  height: 3em;
}
.loader-page .loader .box:before, .loader-page .loader .box:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}
.loader-page .loader .box:before {
  left: 100%;
  bottom: 0;
  transform: rotateY(90deg);
  transform-origin: 0 50%;
}
.loader-page .loader .box:after {
  left: 0;
  bottom: 100%;
  transform: rotateX(90deg);
  transform-origin: 0 100%;
}
@keyframes ani-box {
  8.33% {
    transform: translate3d(-50%, -50%, 0) scaleZ(2);
  }
  16.7% {
    transform: translate3d(-50%, -50%, -3em) scaleZ(1);
  }
  25% {
    transform: translate3d(-50%, -100%, -3em) scaleY(2);
  }
  33.3% {
    transform: translate3d(-50%, -150%, -3em) scaleY(1);
  }
  41.7% {
    transform: translate3d(-100%, -150%, -3em) scaleX(2);
  }
  50% {
    transform: translate3d(-150%, -150%, -3em) scaleX(1);
  }
  58.3% {
    transform: translate3d(-150%, -150%, 0) scaleZ(2);
  }
  66.7% {
    transform: translate3d(-150%, -150%, 0) scaleZ(1);
  }
  75% {
    transform: translate3d(-150%, -100%, 0) scaleY(2);
  }
  83.3% {
    transform: translate3d(-150%, -50%, 0) scaleY(1);
  }
  91.7% {
    transform: translate3d(-100%, -50%, 0) scaleX(2);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scaleX(1);
  }
}/*# sourceMappingURL=loader.css.map */