/*--------------------------------------------------------------
    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:fit-content;
  text-align:center;
  line-height:50px;
  margin:auto;
  position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(-50%);
  display: grid;
  align-items: center;
}

.loader-inner .loader-text {
    color: var(--wdtHeadAltColor);
    font-family: var(--wdtFontTypo_Alt);
    font-size: clamp(3.125rem, 2.875rem + 1.25vw, 4.375rem);
    line-height: var(--wdtLineHeight_H2);
    font-weight: var(--wdtFontWeight_H1);
    position:relative;
    z-index:0;
    grid-area: 1/-1;
}

.loader-inner span:first-child{
  background: radial-gradient(circle closest-side,#000 94%,#0000) right/calc(180% - 1em) 100%;
  animation: loader-animation 1s infinite alternate linear;
}
.loader-inner span:last-child{
  color: #0000;
  background: inherit;
  background-image: inherit;
  background-clip: inherit;
  background: radial-gradient(circle closest-side,var(--wdtPrimaryColor) 94%,#000)right/calc(180% - 1em) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: loader-animation 1s infinite alternate linear;
}
@keyframes loader-animation{
  100%{background-position: left}
}


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

}