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

    .pre-loader.loader1 {
        background-color: var(--wdtPrimaryColor)
    }

    .pre-loader.loader1 .loader-inner .loader-content {
        animation: loading 5s ease-in-out infinite;
        -webkit-animation: loading 5s ease-in-out infinite;
        border: 10px solid #e74216;
        border-color: #e94234 #33a753 #f341ed #31ddec;
        border-radius: 100%;
        display: flex;
        height: 150px;
        margin: auto;
        overflow: hidden;
        width: 150px;
        justify-content: center;
        align-items: center;
    }

    .pre-loader.loader1 .loader-inner .loader-content .text-container {
        color: #222;
        font-size: 60px;
        height: 60px;
        line-height: 60px;
        margin-top: 15px;
        overflow: hidden;
        text-align: center;
        width: 60px;
    }

    .pre-loader.loader1 .loader-inner .loader-content .text-container .text {
        font-family: var(--wdtFontTypo_Alt);
        animation: scrollUp 5s 625ms ease-in-out forwards infinite;
        -webkit-animation: scrollUp 5s 625ms ease-in-out forwards infinite;
    }

    @-webkit-keyframes scrollUp {

        0%,
        7% {
            transform: translate(0, 0);
            -webkit-transform: translate(0, 0);
        }
    
        12%,
        20% {
            transform: translate(0, -60px);
            -webkit-transform: translate(0, -60px);
        }
    
        25%,
        32% {
            transform: translate(0, -120px);
            -webkit-transform: translate(0, -120px);
        }
    
        37%,
        45% {
            transform: translate(0, -180px);
            -webkit-transform: translate(0, -180px);
        }
    
        50%,
        57% {
            transform: translate(0, -240px);
            -webkit-transform: translate(0, -240px);
        }
    
        62%,
        70% {
            transform: translate(0, -300px);
            -webkit-transform: translate(0, -300px);
        }
    
        75%,
        82% {
            transform: translate(0, -360px);
            -webkit-transform: translate(0, -360px);
        }
    
        87%,
        95% {
            transform: translate(0, -420px);
            -webkit-transform: translate(0, -420px);
        }
    
        100% {
            transform: translate(0, -480px);
            -webkit-transform: translate(0, -480px);
        }
    }
    
    @keyframes scrollUp {
    
        0%,
        7% {
            transform: translate(0, 0);
            -webkit-transform: translate(0, 0);
        }
    
        12%,
        20% {
            transform: translate(0, -60px);
            -webkit-transform: translate(0, -60px);
        }
    
        25%,
        32% {
            transform: translate(0, -120px);
            -webkit-transform: translate(0, -120px);
        }
    
        37%,
        45% {
            transform: translate(0, -180px);
            -webkit-transform: translate(0, -180px);
        }
    
        50%,
        57% {
            transform: translate(0, -240px);
            -webkit-transform: translate(0, -240px);
        }
    
        62%,
        70% {
            transform: translate(0, -300px);
            -webkit-transform: translate(0, -300px);
        }
    
        75%,
        82% {
            transform: translate(0, -360px);
            -webkit-transform: translate(0, -360px);
        }
    
        87%,
        95% {
            transform: translate(0, -420px);
            -webkit-transform: translate(0, -420px);
        }
    
        100% {
            transform: translate(0, -480px);
            -webkit-transform: translate(0, -480px);
        }
    }
    
    @-webkit-keyframes loading {
    
        0%,
        7% {
            border-color: #ff7200 #5ca7e6 #45e375 #0084ff;
        }
    
        12%,
        20% {
            border-color: #e94234 #5ca7e6 #45e375 #0084ff;
        }
    
        25%,
        32% {
            border-color: #e94234 #33a753 #45e375 #0084ff;
        }
    
        37%,
        45% {
            border-color: #e94234 #33a753 #f341ed #0084ff;
        }
    
        50%,
        57% {
            border-color: #e94234 #33a753 #f341ed #31ddec;
        }
    
        62%,
        70% {
            border-color: #ff7200 #33a753 #f341ed #31ddec;
        }
    
        75%,
        82% {
            border-color: #ff7200 #5ca7e6 #f341ed #31ddec;
        }
    
        87%,
        95% {
            border-color: #ff7200 #5ca7e6 #45e375 #31ddec;
        }
    
        100% {
            border-color: #ff7200 #5ca7e6 #45e375 #0084ff;
        }
    }
    
    @keyframes loading {
    
        0%,
        7% {
            border-color: #ff7200 #5ca7e6 #45e375 #0084ff;
        }
    
        12%,
        20% {
            border-color: #e94234 #5ca7e6 #45e375 #0084ff;
        }
    
        25%,
        32% {
            border-color: #e94234 #33a753 #45e375 #0084ff;
        }
    
        37%,
        45% {
            border-color: #e94234 #33a753 #f341ed #0084ff;
        }
    
        50%,
        57% {
            border-color: #e94234 #33a753 #f341ed #31ddec;
        }
    
        62%,
        70% {
            border-color: #ff7200 #33a753 #f341ed #31ddec;
        }
    
        75%,
        82% {
            border-color: #ff7200 #5ca7e6 #f341ed #31ddec;
        }
    
        87%,
        95% {
            border-color: #ff7200 #5ca7e6 #45e375 #31ddec;
        }
    
        100% {
            border-color: #ff7200 #5ca7e6 #45e375 #0084ff;
        }
    }


    .pre-loader.loader1 .loader-inner .glow {
        animation: glow 1s ease-in-out alternate infinite;
        -webkit-animation: glow 1s ease-in-out alternate infinite;
        color: #e74216;
        font-size: 40px;
        letter-spacing: .1em;
        margin-top: 35px;
        padding-bottom: 35px;
        position: relative;
        text-align: center;
        line-height: 24px;
    }
    
    @-webkit-keyframes glow {
        0% {
            color: #222;
        }
    
        80%,
        100% {
            color: #e74216;
        }
    }
    
    @keyframes glow {
        0% {
            color: #222;
        }
    
        80%,
        100% {
            color: #e74216;
        }
    }
    
    
    .pre-loader.loader1 .loader-inner .glow:after,
    .pre-loader.loader1 .loader-inner .glow:before {
        -ms-animation-delay: 1s;
        animation-delay: 1s;
        background: #000;
        content: '';
        display: block;
        height: 3px;
        left: 0;
        margin: 0 auto;
        position: absolute;
        right: 0;
        transition: all .3s linear;
        -moz-transition: all .3s linear;
        -ms-transition: all .3s linear;
        -o-transition: all .3s linear;
        -webkit-transition: all .3s linear;
        width: 50px;
    }
    
    .pre-loader.loader1 .loader-inner .glow:before {
        animation: clip-one 1s linear infinite;
        -moz-animation: clip-one 1s linear infinite;
        -ms-animation: clip-one 1s linear infinite;
        -webkit-animation: clip-one 1s linear infinite;
        background: currentColor;
        bottom: -2px;
    }
    
    .pre-loader.loader1 .loader-inner .glow:after {
        animation: clip-two 1.5s linear infinite;
        -moz-animation: clip-two 1.5s linear infinite;
        -ms-animation: clip-two 1.5s linear infinite;
        -webkit-animation: clip-two 1.5s linear infinite;
        background: currentColor;
        bottom: 2px;
    }
    
    @keyframes clip-one {
    
        0%,
        100% {
            width: 50px;
        }
    
        25% {
            width: 20px;
        }
    
        50% {
            width: 40px;
        }
    
        75% {
            width: 25px;
        }
    }
    
    @-webkit-keyframes clip-one {
    
        0%,
        100% {
            width: 50px;
        }
    
        25% {
            width: 20px;
        }
    
        50% {
            width: 40px;
        }
    
        75% {
            width: 25px;
        }
    }
    
    @keyframes clip-two {
    
        0%,
        100% {
            width: 50px;
        }
    
        25% {
            width: 35px;
        }
    
        50% {
            width: 15px;
        }
    
        75% {
            width: 40px;
        }
    }
    
    @-moz-keyframes clip-two {
    
        0%,
        100% {
            width: 50px;
        }
    
        25% {
            width: 35px;
        }
    
        50% {
            width: 15px;
        }
    
        75% {
            width: 40px;
        }
    }


/*--------------------------------------------------------------
    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) {
        .pre-loader.loader1 .loader-inner .glow {
            font-size: 30px;
        }
    }