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

    .loader-text {
        display: inline-block;
        font-family: var(--wdtFontTypo_Alt);
        font-size: clamp(2.875rem, 2.6304rem + 1.3497vw, 4.25rem); /*68px - 46px*/
        font-weight: bold !important;
        letter-spacing: 1px;
        line-height: normal;
        text-transform: uppercase;
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-animation: textclip 1.5s linear infinite;
        animation: textclip 1.5s linear infinite;
    }

    @-webkit-keyframes textclip {
        to {
            background-position: 200% center;
        }
    }

    @keyframes textclip {
        to {
            background-position: 200% center;
        }
    }


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

    }




.wdt-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 60px;
  margin: -30px 0 0 -40px;
}
.wdt-loader .lines {
  width: 80px;
  height: 40px;
  position: absolute;
}
.wdt-loader .lines .line {
  width: 80px;
  height: 10px;
  background-color: var(--wdtPrimaryColor);
  position: absolute;
  clip: rect(0, 0, 20px, 0);
}
.wdt-loader .lines .line.line-1 {
  top: 0;
  -webkit-animation: slide 2s ease 0s infinite;
          animation: slide 2s ease 0s infinite;
}
.wdt-loader .lines .line.line-2 {
  top: 15px;
  -webkit-animation: slide 2s ease 0.25s infinite;
          animation: slide 2s ease 0.25s infinite;
}
.wdt-loader .lines .line.line-3 {
  top: 30px;
  -webkit-animation: slide 2s ease 0.5s infinite;
          animation: slide 2s ease 0.5s infinite;
}
.wdt-loader .loading-text {
  position: absolute;
  top: 50px;
  text-align: center;
  width: 100%;
  color: var(--wdtPrimaryColor);
  font-size: 13px;
  font-family: sans-serif;
  letter-spacing: 3px;
  line-height: 10px;
  height: 10px;
  -webkit-animation: fadeaway 1s ease 0s infinite;
          animation: fadeaway 1s ease 0s infinite;
}

@-webkit-keyframes slide {
  0% { clip: rect(0, 0, 20px, 0); }
  30% { clip: rect(0, 80px, 20px, 0); }
  50% { clip: rect(0, 80px, 20px, 0); }
  80% { clip: rect(0, 80px, 20px, 80px); }
  100% { clip: rect(0, 80px, 20px, 80px); }
}

@keyframes slide {
  0% { clip: rect(0, 0, 20px, 0); }
  30% { clip: rect(0, 80px, 20px, 0); }
  50% { clip: rect(0, 80px, 20px, 0); }
  80% { clip: rect(0, 80px, 20px, 80px); }
  100% { clip: rect(0, 80px, 20px, 80px); }
}

@-webkit-keyframes fadeaway {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeaway {
  0% { opacity: 1; } 50% { opacity: 0; }
  100% { opacity: 1; }
}

/* From Uiverse.io by Nawsome */ 
.wdt-banter-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
}

.wdt-banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.wdt-banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--wdtPrimaryColor);
}

.wdt-banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.wdt-banter-loader__box:nth-child(1):before, .wdt-banter-loader__box:nth-child(4):before {
  margin-left: 26px; 
}

.wdt-banter-loader__box:nth-child(2):before,.wdt-banter-loader__box:nth-child(3):before,.wdt-banter-loader__box:nth-child(8):before,.wdt-banter-loader__box:nth-child(1):before {
  background: var(--wdtQuaternaryColor);
}

.wdt-banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

.wdt-banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% { transform: translate(-26px, 0); } 
  18.1818181818% { transform: translate(0px, 0); } 
  27.2727272727% { transform: translate(0px, 0); } 
  36.3636363636% { transform: translate(26px, 0); } 
  45.4545454545% { transform: translate(26px, 26px); } 
  54.5454545455% { transform: translate(26px, 26px); } 
  63.6363636364% { transform: translate(26px, 26px); } 
  72.7272727273% { transform: translate(26px, 0px); } 
  81.8181818182% { transform: translate(0px, 0px); } 
  90.9090909091% { transform: translate(-26px, 0px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(1) {
  animation: moveBox-1 4s infinite;
}

@keyframes moveBox-2 {
  9.0909090909% { transform: translate(0, 0); } 
  18.1818181818% { transform: translate(26px, 0); } 
  27.2727272727% { transform: translate(0px, 0); } 
  36.3636363636% { transform: translate(26px, 0); } 
  45.4545454545% { transform: translate(26px, 26px); } 
  54.5454545455% { transform: translate(26px, 26px); } 
  63.6363636364% { transform: translate(26px, 26px); } 
  72.7272727273% { transform: translate(26px, 26px); } 
  81.8181818182% { transform: translate(0px, 26px); } 
  90.9090909091% { transform: translate(0px, 26px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(2) {
  animation: moveBox-2 4s infinite;
}

@keyframes moveBox-3 {
  9.0909090909% { transform: translate(-26px, 0); } 
  18.1818181818% { transform: translate(-26px, 0); } 
  27.2727272727% { transform: translate(0px, 0); } 
  36.3636363636% { transform: translate(-26px, 0); } 
  45.4545454545% { transform: translate(-26px, 0); } 
  54.5454545455% { transform: translate(-26px, 0); } 
  63.6363636364% { transform: translate(-26px, 0); } 
  72.7272727273% { transform: translate(-26px, 0); } 
  81.8181818182% { transform: translate(-26px, -26px); } 
  90.9090909091% { transform: translate(0px, -26px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(3) {
  animation: moveBox-3 4s infinite;
}

@keyframes moveBox-4 {
  9.0909090909% { transform: translate(-26px, 0); } 
  18.1818181818% { transform: translate(-26px, 0); } 
  27.2727272727% { transform: translate(-26px, -26px); } 
  36.3636363636% { transform: translate(0px, -26px); } 
  45.4545454545% { transform: translate(0px, 0px); } 
  54.5454545455% { transform: translate(0px, -26px); } 
  63.6363636364% { transform: translate(0px, -26px); } 
  72.7272727273% { transform: translate(0px, -26px); } 
  81.8181818182% { transform: translate(-26px, -26px); } 
  90.9090909091% { transform: translate(-26px, 0px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(4) {
  animation: moveBox-4 4s infinite;
}

@keyframes moveBox-5 {
  9.0909090909% { transform: translate(0, 0); } 
  18.1818181818% { transform: translate(0, 0); } 
  27.2727272727% { transform: translate(0, 0); } 
  36.3636363636% { transform: translate(26px, 0); } 
  45.4545454545% { transform: translate(26px, 0); } 
  54.5454545455% { transform: translate(26px, 0); } 
  63.6363636364% { transform: translate(26px, 0); } 
  72.7272727273% { transform: translate(26px, 0); } 
  81.8181818182% { transform: translate(26px, -26px); } 
  90.9090909091% { transform: translate(0px, -26px); } 
  100% { transform: translate(0px, 0px); } }

.wdt-banter-loader__box:nth-child(5) {
  animation: moveBox-5 4s infinite;
}

@keyframes moveBox-6 {
  9.0909090909% { transform: translate(0, 0); } 
  18.1818181818% { transform: translate(-26px, 0); } 
  27.2727272727% { transform: translate(-26px, 0); } 
  36.3636363636% { transform: translate(0px, 0); } 
  45.4545454545% { transform: translate(0px, 0); } 
  54.5454545455% { transform: translate(0px, 0); } 
  63.6363636364% { transform: translate(0px, 0); } 
  72.7272727273% { transform: translate(0px, 26px); } 
  81.8181818182% { transform: translate(-26px, 26px); } 
  90.9090909091% { transform: translate(-26px, 0px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(6) {
  animation: moveBox-6 4s infinite;
}

@keyframes moveBox-7 {
  9.0909090909% { transform: translate(26px, 0); } 
  18.1818181818% { transform: translate(26px, 0); } 
  27.2727272727% { transform: translate(26px, 0); } 
  36.3636363636% { transform: translate(0px, 0); } 
  45.4545454545% { transform: translate(0px, -26px); } 
  54.5454545455% { transform: translate(26px, -26px); } 
  63.6363636364% { transform: translate(0px, -26px); } 
  72.7272727273% { transform: translate(0px, -26px); } 
  81.8181818182% { transform: translate(0px, 0px); } 
  90.9090909091% { transform: translate(26px, 0px); } 
  100% { transform: translate(0px, 0px); } }

.wdt-banter-loader__box:nth-child(7) {
  animation: moveBox-7 4s infinite;
}

@keyframes moveBox-8 {
  9.0909090909% { transform: translate(0, 0); } 
  18.1818181818% { transform: translate(-26px, 0); } 
  27.2727272727% { transform: translate(-26px, -26px); } 
  36.3636363636% { transform: translate(0px, -26px); } 
  45.4545454545% { transform: translate(0px, -26px); } 
  54.5454545455% { transform: translate(0px, -26px); } 
  63.6363636364% { transform: translate(0px, -26px); } 
  72.7272727273% { transform: translate(0px, -26px); } 
  81.8181818182% { transform: translate(26px, -26px); } 
  90.9090909091% { transform: translate(26px, 0px); } 
  100% { transform: translate(0px, 0px); }
}

.wdt-banter-loader__box:nth-child(8) {
  animation: moveBox-8 4s infinite;
}

@keyframes moveBox-9 {
  9.0909090909% { transform: translate(-26px, 0); } 
  18.1818181818% { transform: translate(-26px, 0); } 
  27.2727272727% { transform: translate(0px, 0); } 
  36.3636363636% { transform: translate(-26px, 0); } 
  45.4545454545% { transform: translate(0px, 0); } 
  54.5454545455% { transform: translate(0px, 0); } 
  63.6363636364% { transform: translate(-26px, 0); } 
  72.7272727273% { transform: translate(-26px, 0); }
  81.8181818182% { transform: translate(-52px, 0); } 
  90.9090909091% { transform: translate(-26px, 0); } 
  100% { transform: translate(0px, 0); }
}

.wdt-banter-loader__box:nth-child(9) {
  animation: moveBox-9 4s infinite;
}