#custom-loading .scene {
  position: relative;
  z-index: 2;
  height: 220px;
  width: 220px;
  display: grid;
  place-items: center;
  /* Position dots */
  /* Animations */
}
#custom-loading .scene .cube-wrapper {
  transform-style: preserve-3d;
  animation: bouncing 2s infinite;
}
#custom-loading .scene .cube {
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(45deg);
  animation: rotation 2s infinite;
}
#custom-loading .scene .cube-faces {
  transform-style: preserve-3d;
  height: 80px;
  width: 80px;
  position: relative;
  transform-origin: 0 0;
  transform: translateX(0) translateY(0) translateZ(-40px);
}
#custom-loading .scene .cube-face {
  position: absolute;
  inset: 0;
  background: rgba(251, 204, 8, 0.7215686275);
  border: solid 1px #fff5cc;
}
#custom-loading .scene .cube-face.shadow {
  transform: translateZ(-80px);
  animation: bouncing-shadow 2s infinite;
}
#custom-loading .scene .cube-face.top {
  transform: translateZ(80px);
}
#custom-loading .scene .cube-face.front {
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
}
#custom-loading .scene .cube-face.back {
  transform-origin: 0 50%;
  transform: rotateY(-90deg) translateZ(-80px);
}
#custom-loading .scene .cube-face.right {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px);
}
#custom-loading .scene .cube-face.left {
  transform-origin: 50% 0;
  transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
}
@keyframes rotation {
  0% {
    transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
  50% {
    transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  100% {
    transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
    animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  }
}
@keyframes bouncing {
  0% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
  45% {
    transform: translateY(40px);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  100% {
    transform: translateY(-40px);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  }
}
@keyframes bouncing-shadow {
  0% {
    transform: translateZ(-80px) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
  45% {
    transform: translateZ(0);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0.3;
  }
  100% {
    transform: translateZ(-80px) scale(1.3);
    animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
    opacity: 0.05;
  }
}
#custom-loading .scene #preloader {
  background-color: #fff;
  text-align: center;
  max-width: 800px;
  height: 90vh;
  border-radius: 10px;
  position: relative;
  top: 5%;
  margin: 0 auto;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
#custom-loading .scene #text {
  position: absolute;
  top: 45%;
  left: calc(var(--left) + 2%);
  font-size: 2rem;
  font-weight: bold;
  color: #222;
}
#custom-loading .scene .wrapper, #custom-loading .scene .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
#custom-loading .scene .wrapper {
  position: absolute;
  top: 50.5%;
  left: var(--init-wrap);
}
#custom-loading .scene .dot {
  background-color: black;
}
#custom-loading .scene #thirdWrap {
  left: calc(var(--init-wrap) + 15px);
}
#custom-loading .scene #fourthWrap {
  left: calc(var(--init-wrap) + 30px);
}
#custom-loading .scene #firstWrap {
  animation: grow 2s infinite;
}
#custom-loading .scene #secondWrap, #custom-loading .scene #thirdWrap {
  animation: slide 2s infinite;
}
#custom-loading .scene #fourthWrap {
  animation: slideOnDrop 2s linear infinite;
}
#custom-loading .scene #fourthWrap .dot {
  animation: drop 2s ease-in infinite;
}
@keyframes grow {
  0%, 50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes slide {
  0% {
    transform: translate(0px, 0px);
  }
  50%, 100% {
    transform: translate(15px, 0px);
  }
}
@keyframes slideOnDrop {
  0%, 20% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(11px);
  }
  100% {
    transform: translateX(200px);
  }
}
@keyframes drop {
  0%, 25% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 45vh);
  }
}
#custom-loading .loading-container {
  font-size: 14px;
  color: #333;
  font-weight: 700;
}
#custom-loading .loading-container .loading-dots::after {
  content: "";
  animation: loading-dots 3s steps(4, end) infinite;
}
@keyframes loading-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}