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

.loader-inner .loader-wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
  margin: auto;
}

.loader-inner .loader-circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  left: 15%;
  transform-origin: 50%;
  -webkit-transform-origin: 50%;
  animation: loader-circle .5s alternate infinite ease;
  -webkit-animation: loader-circle .5s alternate infinite ease;
}

.loader-inner .loader-shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  -webkit-transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  animation: loader-shadow .5s alternate infinite ease;
  -webkit-animation: loader-shadow .5s alternate infinite ease;
}

.loader-inner .loader-shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
}

.loader-inner .loader-shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
  -webkit-animation-delay: .3s;
}

.loader-inner .loader-circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
  -webkit-animation-delay: .2s;
}

.loader-inner .loader-circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
  -webkit-animation-delay: .3s;
}

@keyframes loader-circle {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    -webkit-border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
    -webkit-transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}

@-webkit-keyframes loader-circle {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    -webkit-border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
    -webkit-transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}

@keyframes loader-shadow {
  0% {
    transform: scaleX(1.5);
    -webkit-transform: scaleX(1.5);
  }
  40% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: .7;
  }
  100% {
    transform: scaleX(.2);
    -webkit-transform: scaleX(.2);
    opacity: .4;
  }
}

@-webkit-keyframes loader-shadow {
  0% {
    transform: scaleX(1.5);
    -webkit-transform: scaleX(1.5);
  }
  40% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: .7;
  }
  100% {
    transform: scaleX(.2);
    -webkit-transform: scaleX(.2);
    opacity: .4;
  }
}


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

    .loader-inner .loader-circle {  background-color: var(--wdtPrimaryColor); }
    .loader-inner .loader-shadow { background-color: rgba(var(--wdtPrimaryColorRgb),0.5); }

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

}