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

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

.pre-loader.loader2 .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%); }

.pre-loader.loader2 .loader-inner { position: relative; transform: rotate(45deg) translate(-50%, -50%); width: 20px; aspect-ratio: 1;}

.pre-loader.loader2 .loader-inner span { list-style-type: none; position: absolute; top: 0px; left: 0px; width: 20px; height: 20px; 
  background: var(--wdtPrimaryColor); border-radius: 50%; }

.pre-loader.loader2 .loader-inner .loader-text-a { -webkit-animation: loader-text-a 1s ease-in-out infinite; 
  animation: loader-text-a 1s ease-in-out infinite; top: -40px; left: -40px; }
.pre-loader.loader2 .loader-inner .loader-text-b { -webkit-animation: loader-text-b 1s ease-in-out infinite; 
  animation: loader-text-b 1s ease-in-out infinite; top: -40px; left: 0px; }
.pre-loader.loader2 .loader-inner .loader-text-c { -webkit-animation: loader-text-c 1s ease-in-out infinite; 
  animation: loader-text-c 1s ease-in-out infinite; top: -40px; left: 40px; }
.pre-loader.loader2 .loader-inner .loader-text-d { -webkit-animation: loader-text-d 1s ease-in-out infinite; 
  animation: loader-text-d 1s ease-in-out infinite; top: 0px; left: -40px; }
.pre-loader.loader2 .loader-inner .loader-text-e { -webkit-animation: loader-text-e 1s ease-in-out infinite; 
  animation: loader-text-e 1s ease-in-out infinite; top: 0px; left: 0px; }
.pre-loader.loader2 .loader-inner .loader-text-f { -webkit-animation: loader-text-f 1s ease-in-out infinite; 
  animation: loader-text-f 1s ease-in-out infinite; top: 0px; left: 40px; }
.pre-loader.loader2 .loader-inner .loader-text-g { -webkit-animation: loader-text-g 1s ease-in-out infinite; 
  animation: loader-text-g 1s ease-in-out infinite; top: 40px; left: -40px; }
.pre-loader.loader2 .loader-inner .loader-text-h { -webkit-animation: loader-text-h 1s ease-in-out infinite; 
  animation: loader-text-h 1s ease-in-out infinite; top: 40px; left: 0px; }
.pre-loader.loader2 .loader-inner .loader-text-i { -webkit-animation: loader-text-i 1s ease-in-out infinite; 
  animation: loader-text-i 1s ease-in-out infinite; top: 40px; left: 40px; }

@keyframes loader-text-a {
  50% { top: 0px; left: -40px; }
  100% { top: 0px; left: -40px; }
}
@keyframes loader-text-b {
  50% { top: -40px; left: -40px; }
  100% { top: -40px; left: -40px; }
}
@keyframes loader-text-c {
  50% { top: -40px; left: 0px; }
  100% { top: -40px; left: 0px; }
}
@keyframes loader-text-d {
  50% { top: 40px; left: -40px; }
  100% { top: 40px; left: -40px; }
}
@keyframes loader-text-f {
  50% { top: -40px; left: 40px; }
  100% { top: -40px; left: 40px; }
}
@keyframes loader-text-g {
  50% { top: 40px; left: 0px; }
  100% { top: 40px; left: 0px; }
}
@keyframes loader-text-h {
  50% { top: 40px; left: 40px; }
  100% { top: 40px; left: 40px; }
}
@keyframes loader-text-i {
  50% { top: 0px; left: 40px; }
  100% { top: 0px; left: 40px; }
}


/*--------------------------------------------------------------
    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) {

}