/*--------------------------------------------------------------
    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%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .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%); }



  .wdt-hamster-with-wheel { position: relative; width: 12em; height: 12em; font-size: var(--wdtFontSize_Ext); }

  .wdt-wheel, .wdt-hasmter, .wdt-hasmter div, .wdt-spoke { position: absolute; }

  .wdt-wheel, .wdt-spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; }

  .wdt-wheel { background: radial-gradient(100% 100% at center, rgba(var(--wdtBorderColorRgb),.0) 47.8%,rgba(var(--wdtBorderColorRgb),1) 48%); z-index: 2; }

.wdt-hasmter {
  animation: hasmter 1s ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; 
  transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; }

.wdt-hasmter-head {
  animation: hasmterHead 1s ease-in-out infinite; background: var(--wdtQuaternaryColor); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; 
  box-shadow: 0 -0.25em 0 #facc9e inset, 0.75em -1.55em 0 #fce6cf inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; }

.wdt-hasmter-ear {
  animation: hasmterEar 1s ease-in-out infinite; background: var(--wdtTertiaryColor); border-radius: 50%; 
  box-shadow: -0.25em 0 var(--wdtQuaternaryColor) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; }

.wdt-hasmter-eye {
  animation: hasmterEye 1s linear infinite; background-color: #000; border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; }

.wdt-hasmter-nose {
  background: #f98282; border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; }

.wdt-hasmter-body {
  animation: hasmterBody 1s ease-in-out infinite; background: #fce6cf; border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; 
  box-shadow: 0.1em 0.75em 0 var(--wdtQuaternaryColor) inset, 0.15em -0.5em 0 rgba(230, 126, 32, .5) inset; top: 0.25em; left: 2em; width: 4.5em; 
  height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; }

.wdt-hasmter-limb-fr,
.wdt-hasmter-limb-fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; }

.wdt-hasmter-limb-fr { animation: hasmterFRLimb 1s linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,#f88888 80%); transform: rotate(15deg) translateZ(-1px); }

.wdt-hasmter-limb-fl {
  animation: hasmterFLLimb 1s linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); }

.wdt-hasmter-limb-br,
.wdt-hasmter-limb-bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; }

.wdt-hasmter-limb-br {
  animation: hasmterBRLimb 1s linear infinite; background: linear-gradient(#facc9e 90%,#ff6262 90%); transform: rotate(-25deg) translateZ(-1px); }

.wdt-hasmter-limb-bl {
  animation: hasmterBLLimb 1s linear infinite;
  background: linear-gradient(rgb(252, 230, 207) 90%,#ff6262 90%); transform: rotate(-25deg); }

.wdt-hasmter-tail {
  animation: hasmterTail 1s linear infinite; background: var(--wdtTertiaryCOlor); border-radius: 0.25em 50% 50% 0.25em; 
  box-shadow: 0 -0.2em 0 rgba(var(--wdtPrimaryColorRgb),.7) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; 
  transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; z-index: -1; }

.wdt-spoke {
  animation: spoke 1s linear infinite;
  background: radial-gradient(100% 100% at center,rgba(var(--wdtQuaternaryColorRgb),.65) 5%,rgba(var(--wdtQuaternaryColorRgb),0) 5%),    
   linear-gradient(rgba(var(--wdtBorderColorRgb),.0) 50%, rgba(var(--wdtBorderColorRgb),.9) 0% 55%, rgba(var(--wdtBorderColorRgb),0) 53%) 40% 40% / 99% 80% no-repeat,   
   linear-gradient(90deg, rgba(var(--wdtBorderColorRgb),.0) 50%, rgba(var(--wdtBorderColorRgb),.9) 0% 55%, rgba(var(--wdtBorderColorRgb),0) 50%) 40% 40% / 85% 99% no-repeat;
  box-shadow: inset 0 0 15px 0px rgba(var(--wdtBorderColorRgb),1);  }

/* Animations */
@keyframes hasmter { 
  from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 
  50% { transform: rotate(0) translate(-0.8em,1.85em); } }

@keyframes hasmterHead {
  from, 25%, 50%, 75%, to { transform: rotate(0); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); }
}

@keyframes hasmterEye {
  from, 90%, to { transform: scaleY(1); }
  95% { transform: scaleY(0); }
}

@keyframes hasmterEar {
  from, 25%, 50%, 75%, to { transform: rotate(0); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); }
}

@keyframes hasmterBody {
  from, 25%, 50%, 75%, to { transform: rotate(0); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); }
}

@keyframes hasmterFRLimb {
  from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); }
}

@keyframes hasmterFLLimb {
  from, 25%, 50%, 75%, to { transform: rotate(-30deg); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); }
}

@keyframes hasmterBRLimb {
  from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); }
}

@keyframes hasmterBLLimb {
  from, 25%, 50%, 75%, to { transform: rotate(20deg); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); }
}

@keyframes hasmterTail {
  from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); }
}

@keyframes spoke {
  from { transform: rotate(0); } 
  to { transform: rotate(-1turn); }
}

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

    }