/*--------------------------------------------------------------
    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: 3.75rem;
        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;
        text-fill-color: transparent;
        -webkit-animation: textclip 1.5s linear infinite;
        animation: textclip 1.5s linear infinite;
    }


    .loader-container {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        filter: url('#goo');
        animation: rotate-move 2s ease-in-out infinite;
      }
      
      .loader-dot { 
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      
      .loader-dot.dot-3 {
        background-color: var(--wdtSecondaryColor);
        animation: dot-3-move 2s ease infinite, index 6s ease infinite;
      }
      
      .loader-dot.dot-2 {
        background-color: var(--wdtPrimaryColor);
        animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
      }
      
      .loader-dot.dot-1 {
        background-color:var(--wdtPrimaryColor);
        animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
      }
      
      @keyframes dot-3-move {
        20% {transform: scale(1)}
        45% {transform: translateY(-18px) scale(.45)}
        60% {transform: translateY(-90px) scale(.45)}
        80% {transform: translateY(-90px) scale(.45)}
        100% {transform: translateY(0px) scale(1)}
      }
      
      @keyframes dot-2-move {
        20% {transform: scale(1)}
        45% {transform: translate(-16px, 12px) scale(.45)}
        60% {transform: translate(-80px, 60px) scale(.45)}
        80% {transform: translate(-80px, 60px) scale(.45)}
        100% {transform: translateY(0px) scale(1)}
      }
      
      @keyframes dot-1-move {
        20% {transform: scale(1)}
        45% {transform: translate(16px, 12px) scale(.45)}
        60% {transform: translate(80px, 60px) scale(.45)}
        80% {transform: translate(80px, 60px) scale(.45)}
        100% {transform: translateY(0px) scale(1)}
      }
      
      @keyframes rotate-move {
        55% {transform: translate(-50%, -50%) rotate(0deg)}
        80% {transform: translate(-50%, -50%) rotate(360deg)}
        100% {transform: translate(-50%, -50%) rotate(360deg)}
      }
      
      @keyframes index {
        0%, 100% {z-index: 3}
        33.3% {z-index: 2}
        66.6% {z-index: 1}
      }



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

    }