/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

    .pre-loader { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 999991; background-color: #fff; }

    .pre-loader.loader1 .loader-inner { position: relative; display: block;   background-color: transparent; 
        transform: rotateZ(45deg); transform-origin: center center; animation: rotate 4s infinite; height: 40px; width: 40px; }
    .pre-loader.loader1 .loader-inner span.loader-text { position: relative; display: inline-block; width: 5px; height: 0; margin: 0; padding: 0; }
    .pre-loader.loader1 .loader-inner span.loader-text:before, 
    .pre-loader.loader1 .loader-inner span.loader-text:after { position: absolute; content: ""; height: 2px; 
        width: 5px; animation: top 2s infinite; }
    .pre-loader.loader1 .loader-inner span.loader-text:before { bottom: 0; height: 2px; width: 5px; border-top-left-radius: 3px; border-top-right-radius: 3px; }
    .pre-loader.loader1 .loader-inner span.loader-text:after { top: 0; height: 2px; width: 5px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(1):before, 
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(1):after { max-height: 10px; background-color: var(--wdtPrimaryColor); }
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(2):before, 
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(2):after { max-height: 20px; background-color: var(--wdtPrimaryColor); }
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(3):before, 
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(3):after { max-height: 30px; background-color: var(--wdtPrimaryColor); }
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(4):before, 
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(4):after { max-height: 20px; background-color: var(--wdtPrimaryColor); }
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(5):before, 
    .pre-loader.loader1 .loader-inner span.loader-text:nth-of-type(5):after { max-height: 10px; background-color: var(--wdtPrimaryColor); }
    
    @keyframes rotate {
        0% { transform: rotateZ(45deg); }
        10% { transform: rotateZ(45deg); }
        20% { transform: rotateZ(45deg); }
        30% { transform: rotateZ(45deg); }
        40% { transform: rotateZ(45deg); }
        50% { transform: rotateZ(45deg); }
        60% { transform: rotateZ(45deg); }
        70% { transform: rotateZ(45deg); }
        80% { transform: rotateZ(45deg); }
        90% { transform: rotateZ(45deg); }
        100% { transform: rotateZ(405deg); }
    }
    @keyframes top {
        0% { height: 2px; }
        50% { height: 30px; }
        100% { height: 2px; }
    }
    @keyframes bottom {
        0% { height: 2px; }
        50% { height: 30px; }
        100% { height: 2px; }
    }
    @keyframes pulsate {
        0% { transform: scale(1, 1); opacity: 0; letter-spacing: 0px; }
        50% { opacity: 1; }
        100% { transform: scale(1.1, 1.1); opacity: 0.05; letter-spacing: 5px; }
    }


/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .pre-loader { background-color: var(--wdtBodyBGColor); display: flex;align-items: center;justify-content: center;}
/*     .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) {

    }