.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;
    }
}