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

    .pre-loader {
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999991;
        background-color: #fff;
    }

    .loader-inner {
        padding: 25px;
        position: absolute;
        left: 50%;
        top: 50%;
        text-align: center;
        width: auto;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .loader-text {
        display: inline-block;
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
        -webkit-animation: textclip 1.5s linear infinite;
        animation: textclip 1.5s linear infinite;
    }

    .loader-text
{
  width: auto;
  display: inline-block;
  text-align: center;
  min-height: 215px;
  vertical-align: top;
  margin: 1%;
  background: none !important;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.loader.loader-3 {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 75px;
  display: inline-block;
  vertical-align: middle;
}
svg.loader-star {
  position: absolute;
  top: calc(50% - 12px);
  position: static;
  width: 60px;
  height: 60px;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-animation: loader-2-star 1s ease alternate infinite;
  animation: loader-2-star 1s ease alternate infinite;
}
.loader-circles {
  width: 8px;
  height: 8px;
  background: var(--wdtPrimaryColor);
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;
  animation: loader-2-circles 1s ease-in-out alternate infinite;
}


@-webkit-keyframes loader-2-circles {
  0% {
      -webkit-box-shadow: 0 0 0 var(--wdtPrimaryColor);
      box-shadow: 0 0 0 var(--wdtPrimaryColor);
      opacity: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  50% {
      -webkit-box-shadow: 24px -22px var(--wdtPrimaryColor), 30px -15px 0 -3px var(--wdtPrimaryColor), 31px 0px var(--wdtPrimaryColor), 29px 9px 0 -3px var(--wdtPrimaryColor), 24px 23px var(--wdtPrimaryColor), 17px 30px 0 -3px var(--wdtPrimaryColor), 0px 33px var(--wdtPrimaryColor), -10px 28px 0 -3px var(--wdtPrimaryColor), -24px 22px var(--wdtPrimaryColor), -29px 14px 0 -3px var(--wdtPrimaryColor), -31px -3px var(--wdtPrimaryColor), -30px -11px 0 -3px var(--wdtPrimaryColor), -20px -25px var(--wdtPrimaryColor), -12px -30px 0 -3px var(--wdtPrimaryColor), 5px -29px var(--wdtPrimaryColor), 13px -25px 0 -3px var(--wdtPrimaryColor);
      box-shadow: 24px -22px var(--wdtPrimaryColor), 30px -15px 0 -3px var(--wdtPrimaryColor), 31px 0px var(--wdtPrimaryColor), 29px 9px 0 -3px var(--wdtPrimaryColor), 24px 23px var(--wdtPrimaryColor), 17px 30px 0 -3px var(--wdtPrimaryColor), 0px 33px var(--wdtPrimaryColor), -10px 28px 0 -3px var(--wdtPrimaryColor), -24px 22px var(--wdtPrimaryColor), -29px 14px 0 -3px var(--wdtPrimaryColor), -31px -3px var(--wdtPrimaryColor), -30px -11px 0 -3px var(--wdtPrimaryColor), -20px -25px var(--wdtPrimaryColor), -12px -30px 0 -3px var(--wdtPrimaryColor), 5px -29px var(--wdtPrimaryColor), 13px -25px 0 -3px var(--wdtPrimaryColor);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  100% {
      opacity: 0;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-box-shadow: 25px -22px var(--wdtPrimaryColor), 15px -22px 0 -3px black, 31px 2px var(--wdtPrimaryColor), 21px 2px 0 -3px black, 23px 25px var(--wdtPrimaryColor), 13px 25px 0 -3px black, 0px 33px var(--wdtPrimaryColor), -10px 33px 0 -3px black, -26px 24px var(--wdtPrimaryColor), -19px 17px 0 -3px black, -32px 0px var(--wdtPrimaryColor), -23px 0px 0 -3px black, -25px -23px var(--wdtPrimaryColor), -16px -23px 0 -3px black, 0px -31px var(--wdtPrimaryColor), -2px -23px 0 -3px black;
      box-shadow: 25px -22px var(--wdtPrimaryColor), 15px -22px 0 -3px black, 31px 2px var(--wdtPrimaryColor), 21px 2px 0 -3px black, 23px 25px var(--wdtPrimaryColor), 13px 25px 0 -3px black, 0px 33px var(--wdtPrimaryColor), -10px 33px 0 -3px black, -26px 24px var(--wdtPrimaryColor), -19px 17px 0 -3px black, -32px 0px var(--wdtPrimaryColor), -23px 0px 0 -3px black, -25px -23px var(--wdtPrimaryColor), -16px -23px 0 -3px black, 0px -31px var(--wdtPrimaryColor), -2px -23px 0 -3px black;
  }
}

@keyframes loader-2-circles {
  0% {
      -webkit-box-shadow: 0 0 0 var(--wdtPrimaryColor);
      box-shadow: 0 0 0 var(--wdtPrimaryColor);
      opacity: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  50% {
      -webkit-box-shadow: 24px -22px var(--wdtPrimaryColor), 30px -15px 0 -3px var(--wdtPrimaryColor), 31px 0px var(--wdtPrimaryColor), 29px 9px 0 -3px var(--wdtPrimaryColor), 24px 23px var(--wdtPrimaryColor), 17px 30px 0 -3px var(--wdtPrimaryColor), 0px 33px var(--wdtPrimaryColor), -10px 28px 0 -3px var(--wdtPrimaryColor), -24px 22px var(--wdtPrimaryColor), -29px 14px 0 -3px var(--wdtPrimaryColor), -31px -3px #e11a2b, -30px -11px 0 -3px var(--wdtPrimaryColor), -20px -25px var(--wdtPrimaryColor), -12px -30px 0 -3px var(--wdtPrimaryColor), 5px -29px var(--wdtPrimaryColor), 13px -25px 0 -3px var(--wdtPrimaryColor);
      box-shadow: 24px -22px var(--wdtPrimaryColor), 30px -15px 0 -3px var(--wdtPrimaryColor), 31px 0px var(--wdtPrimaryColor), 29px 9px 0 -3px var(--wdtPrimaryColor), 24px 23px var(--wdtPrimaryColor), 17px 30px 0 -3px var(--wdtPrimaryColor), 0px 33px var(--wdtPrimaryColor), -10px 28px 0 -3px var(--wdtPrimaryColor), -24px 22px var(--wdtPrimaryColor), -29px 14px 0 -3px var(--wdtPrimaryColor), -31px -3px var(--wdtPrimaryColor), -30px -11px 0 -3px var(--wdtPrimaryColor), -20px -25px var(--wdtPrimaryColor), -12px -30px 0 -3px var(--wdtPrimaryColor), 5px -29px var(--wdtPrimaryColor), 13px -25px 0 -3px var(--wdtPrimaryColor);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
  }
  100% {
      opacity: 0;
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      -webkit-box-shadow: 25px -22px var(--wdtPrimaryColor), 15px -22px 0 -3px black, 31px 2px var(--wdtPrimaryColor), 21px 2px 0 -3px black, 23px 25px var(--wdtPrimaryColor), 13px 25px 0 -3px black, 0px 33px var(--wdtPrimaryColor), -10px 33px 0 -3px black, -26px 24px var(--wdtPrimaryColor), -19px 17px 0 -3px black, -32px 0px var(--wdtPrimaryColor), -23px 0px 0 -3px black, -25px -23px var(--wdtPrimaryColor), -16px -23px 0 -3px black, 0px -31px var(--wdtPrimaryColor), -2px -23px 0 -3px black;
      box-shadow: 25px -22px var(--wdtPrimaryColor), 15px -22px 0 -3px black, 31px 2px var(--wdtPrimaryColor), 21px 2px 0 -3px black, 23px 25px var(--wdtPrimaryColor), 13px 25px 0 -3px black, 0px 33px var(--wdtPrimaryColor), -10px 33px 0 -3px black, -26px 24px var(--wdtPrimaryColor), -19px 17px 0 -3px black, -32px 0px var(--wdtPrimaryColor), -23px 0px 0 -3px black, -25px -23px var(--wdtPrimaryColor), -16px -23px 0 -3px black, 0px -31px var(--wdtPrimaryColor), -2px -23px 0 -3px black;
  }
}

@-webkit-keyframes loader-2-star {
  0% {
      -webkit-transform: scale(0) rotate(0deg);
      transform: scale(0) rotate(0deg);
  }
  100% {
      -webkit-transform: scale(0.7) rotate(360deg);
      transform: scale(0.7) rotate(360deg);
  }
}

@keyframes loader-2-star {
  0% {
      -webkit-transform: scale(0) rotate(0deg);
      transform: scale(0) rotate(0deg);
  }
  100% {
      -webkit-transform: scale(0.7) rotate(360deg);
      transform: scale(0.7) rotate(360deg);
  }
}

/* .woocommerce .loader.loader-3 .loader-circles {
    display: none;
}
.woocommerce .loader.loader-3 svg.loader-star {
    display: none;
} */



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

    .pre-loader { background-color: var(--wdtBodyBGColor); }
    .loader-text { background-image: linear-gradient(to right, var(--wdtPrimaryColor) 10%, var(--wdtHeadAltColor) 50%, var(--wdtPrimaryColor) 60%); }


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

    }