.pre-loader {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999991;
  background-color: var(--wdtBodyBGColor);
}

.loader-inner {
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  line-height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  display: grid;
  place-items: center;


}

.pre-loader.loader-3 .loader-wrap {
  width: 10rem;
  height: 10rem;
}

.loader3 {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  position: absolute;
  transform-style: preserve-3d;
  backdrop-filter: blur(.5px);
  border: 2px solid;
  border-top-color: rgba(var(--wdtSecondaryColorRgb), 1);
  border-bottom-color: rgba(var(--wdtSecondaryColorRgb), 1);
  border-left-color: rgba(var(--wdtSecondaryColorRgb), 1);
  border-right-color: rgba(var(--wdtSecondaryColorRgb), 1);
  opacity: 1;
}

/* .loader-wrap .loader3.loader3-1 {
  transform: rotate3d(0, 1, 0, 24deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.05;
}
.loader-wrap .loader3.loader3-2 {
  transform: rotate3d(0, 1, 0, 48deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.15;
}
.loader-wrap .loader3.loader3-3 {
  transform: rotate3d(0, 1, 0, 72deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.2s;
}
.loader-wrap .loader3.loader3-4 {
  transform: rotate3d(0, 1, 0, 96deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.35s;
}
.loader-wrap .loader3.loader3-5 {
  transform: rotate3d(0, 1, 0, 120deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.4s;
}
.loader-wrap .loader3.loader3-6 {
  transform: rotate3d(0, 1, 0, 144deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.8s;
}
.loader-wrap .loader3.loader3-7 {
  transform: rotate3d(0, 1, 0, 168deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.9333333333s;
}
.loader-wrap .loader3.loader3-8 {
  transform: rotate3d(1, 0, 0, 192deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.0666666667s;
}
.loader-wrap .loader3.loader3-9 {
  transform: rotate3d(1, 0, 0, 216deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.2s;
}
.loader-wrap .loader3.loader3-10 {
  transform: rotate3d(1, 0, 0, 240deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.3333333333s;
}
.loader-wrap .loader3.loader3-11 {
  transform: rotate3d(1, 0, 0, 264deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.4666666667s;
}
.loader-wrap .loader3.loader3-12 {
  transform: rotate3d(1, 0, 0, 288deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.6s;
}
.loader-wrap .loader3.loader3-13 {
  transform: rotate3d(1, 0, 0, 312deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.7333333333s;
}
.loader-wrap .loader3.loader3-14 {
  transform: rotate3d(1, 0, 0, 336deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 1.8666666667s;
}
.loader-wrap .loader3.loader3-15 {
  transform: rotate3d(1, 0, 0, 360deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 2s;
} */
.loader-wrap .loader3.loader3-1 {
  transform: rotate3d(0, 1, 0, 24deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.05s;
}

.loader-wrap .loader3.loader3-2 {
  transform: rotate3d(0, 1, 0, 48deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.08s;
}

.loader-wrap .loader3.loader3-3 {
  transform: rotate3d(0, 1, 0, 72deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.1s;
}

.loader-wrap .loader3.loader3-4 {
  transform: rotate3d(0, 1, 0, 96deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.15s;
}

.loader-wrap .loader3.loader3-5 {
  transform: rotate3d(0, 1, 0, 120deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.2s;
}

.loader-wrap .loader3.loader3-6 {
  transform: rotate3d(0, 1, 0, 144deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.25s;
}

.loader-wrap .loader3.loader3-7 {
  transform: rotate3d(0, 1, 0, 168deg);
  animation: rotate 2s linear infinite;
  animation-delay: 0.3s;
}

.loader-wrap .loader3.loader3-8 {
  transform: rotate3d(1, 0, 0, 192deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 0.35s;
}

.loader-wrap .loader3.loader3-9 {
  transform: rotate3d(1, 0, 0, 216deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 0.4s;
}

.loader-wrap .loader3.loader3-10 {
  transform: rotate3d(1, 0, 0, 240deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 0.45s;
}

.loader-wrap .loader3.loader3-11 {
  transform: rotate3d(1, 0, 0, 264deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: 0.5s;
}

.loader-wrap .loader3.loader3-12 {
  transform: rotate3d(1, 0, 0, 288deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: .55s;
}

.loader-wrap .loader3.loader3-13 {
  transform: rotate3d(1, 0, 0, 312deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: .6s;
}

.loader-wrap .loader3.loader3-14 {
  transform: rotate3d(1, 0, 0, 336deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: .65s;
}

.loader-wrap .loader3.loader3-15 {
  transform: rotate3d(1, 0, 0, 360deg);
  animation: rotate-2 3s linear infinite;
  animation-delay: .7s;
}

@keyframes rotate {
  from {
    opacity: 1;
    transform: rotate3d(0, 1, 1, 360deg);
  }

  to {
    transform: rotate3d(0, 1, 1, 0deg);
    opacity: 1;
  }
}

@keyframes rotate-2 {
  from {
    opacity: 1;
    transform: rotate3d(1, 0, 1, 0deg);
  }

  to {
    opacity: 1;
    transform: rotate3d(1, 0, 1, 360deg);
  }
}

@media only screen and (max-width: 479px) {

  .pre-loader.loader-3 .loader-wrap {
    width: 10rem;
    height: 10rem;
  }

  .loader3 {
    width: 10rem;
    height: 10rem;
  }
}