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

    .pre-loader {
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999991;
        background-color: var(--wdtPrimaryColor);
    }

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

    .loader-text { font-size: 0; width: 80px; height: 80px; display: block; margin:15px auto; position: relative; color: var(--wdtSecondaryColor); 
        box-sizing: border-box; animation: animation-1 1s linear infinite;}
    .loader-text::after,
    .loader-text::before { content: ''; box-sizing: border-box; position: absolute; width: 40px; height: 40px; top: 0; background-color: var(--wdtSecondaryColor); 
        border-radius: 50%; animation: animation-2 1s infinite ease-in-out; }
    .loader-text::before { top: auto; bottom: 0; background-color: var(--wdtPrimaryColor); animation-delay: 0.5s; }

    @keyframes animation-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
    @keyframes animation-2 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } 

    @-webkit-keyframes animation-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
    @-webkit-keyframes animation-2 { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); } } 



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

    .pre-loader { background-color: var(--wdtBodyBGColor); }


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

    }