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

.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: 50%; transform: translateY(-50%); }

.loader-inner .loader-text { color: var(--wdtHeadAltColor); font-family: var(--wdtFontTypo_Alt); 
  font-size: var(--wdtFontSize_H6); font-weight: bold; padding: 5px 15px; position: relative; z-index: 0; }

.loader-inner .loader-text:before { content: ''; background: #f4f4f4; display: block; margin: 0 -15px; position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; z-index: -2;

-webkit-animation: 2s loadingBefore infinite ease-in-out; animation: 2s loadingBefore infinite ease-in-out; }

.loader-inner .loader-text:after { content:''; width: 14px; height: 60px; display: block; margin: auto; opacity: 0.75; 
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; animation: 2s loadingAfter infinite ease-in-out; }

@-webkit-keyframes loadingBefore {
  0%   { transform:translateX(-15px); }
  50%  { transform:translateX(15px); }
  100% { transform:translateX(-15px); }
}
@keyframes loadingBefore {
  0%   { transform:translateX(-15px); }
  50%  { transform:translateX(15px); }
  100% { transform:translateX(-15px); }
}

@-webkit-keyframes loadingAfter {
  0%   { transform:translateX(-50px); }
  50%  { transform:translateX(50px); }
  100% { transform:translateX(-50px); }
}
@keyframes loadingAfter {
  0%   { transform:translateX(-50px); }
  50%  { transform:translateX(50px); }
  100% { transform:translateX(-50px); }
}

.loader-inner > img { width: 100%; max-width: clamp(6.25rem, 4.9519rem + 5.7692vw, 11.875rem); }

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

}