/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

.pre-loader {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 999991;background-color: var(--wdtSecondaryColor) !important;}
.loader-inner {text-transform:uppercase;width:100%;text-align:center;line-height:50px;margin:auto;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);}
.icons-background {width: 100vw;height: 100vh;background: var(--wdtSecondaryColor);}
.icons-background span {width: 8vmin;height: 8vmin;border-radius: 4vmin;backface-visibility: hidden;position: absolute;animation-name: move;animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);animation-iteration-count: infinite;animation-duration: 3s;top: calc(50% - 4vmin);left: 50%;transform-origin: -4vmin center;}
.icons-background span:nth-child(1) {background: var(--wdtPrimaryColor);animation-delay: -0.5s;opacity: 0;}
.icons-background span:nth-child(2) {background: var(--wdtPrimaryColor);animation-delay: -1s;opacity: 0;}
.icons-background span:nth-child(3) {background: var(--wdtPrimaryColor);animation-delay: -1.5s;opacity: 0;}
.icons-background span:nth-child(4) {background: var(--wdtPrimaryColor);animation-delay: -2s;opacity: 0;}
.icons-background span:nth-child(5) {background: var(--wdtPrimaryColor);animation-delay: -2.5s;opacity: 0;}
.icons-background span:nth-child(6) {background: var(--wdtPrimaryColor);animation-delay: -3s;opacity: 0;}

@keyframes move 
{
  0% {transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);}
  30% {opacity: 1;}
  100% {z-index: 10;transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);}
}


/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .loader-inner .loader-text:after { background-color: var(--wdtPrimaryColor); }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

/*----*****---- << Mobile (Landscape) >> ----*****----*/

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}


/* Common Styles for the devices below 479px width */

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

}