/*--------------------------------------------------------------
    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-icon { clear: both; display: flex; align-items: center; justify-content: center; height: 75px; margin: 0 auto 15px; position: relative; width: 75px; }

    .loader-icon svg { color: currentColor; display: block; margin: auto; height: 50px; width: 50px; }

    .loader-icon:after {
        background-color: currentColor;
        content: "";
        display: inline !important;
        height: auto;
        margin: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        width: auto;
        z-index: -1;

        -webkit-border-radius: 50%;
        border-radius: 50%;

        -webkit-transition: inherit;
        transition: inherit;

        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1WT' width='100' height='100'%3E%3C/rect%3E%3C/defs%3E%3CclipPath id='SVGID_2WT'%3E%3Cuse xlink:href='%23SVGID_1WT' style='overflow:visible;'%3E%3C/use%3E%3C/clipPath%3E%3Cpath style='clip-path:url(%23SVGID_2WT);' d='M50,0c7.9,0,15.4,1.8,22,5.1v2.3C65.4,3.9,57.9,2,50,2C23.5,2,2,23.5,2,50 s21.5,48,48,48s48-21.5,48-48c0-7.1-1.6-13.9-4.4-20h2.2c2.7,6.1,4.2,12.9,4.2,20c0,27.6-22.4,50-50,50S0,77.6,0,50S22.4,0,50,0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg%3E%3Cdefs%3E%3Crect id='SVGID_1WT' width='100' height='100'%3E%3C/rect%3E%3C/defs%3E%3CclipPath id='SVGID_2WT'%3E%3Cuse xlink:href='%23SVGID_1WT' style='overflow:visible;'%3E%3C/use%3E%3C/clipPath%3E%3Cpath style='clip-path:url(%23SVGID_2WT);' d='M50,0c7.9,0,15.4,1.8,22,5.1v2.3C65.4,3.9,57.9,2,50,2C23.5,2,2,23.5,2,50 s21.5,48,48,48s48-21.5,48-48c0-7.1-1.6-13.9-4.4-20h2.2c2.7,6.1,4.2,12.9,4.2,20c0,27.6-22.4,50-50,50S0,77.6,0,50S22.4,0,50,0'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

        -webkit-animation: rotation 1.5s infinite linear;
        animation: rotation 1.5s infinite linear
    }

    .loader-text {
        display: inline-block;    
        font-family: var(--DTFontTypo_Alt);
        font-size: 1.75rem;
        font-weight: bold !important;
        letter-spacing: 1px;
        line-height: normal;
        text-transform: capitalize;
        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;
    }

    @-webkit-keyframes textclip {
        to { background-position: 200% center; }
    }

    @keyframes textclip {
        to { background-position: 200% center; }
    }

    @-webkit-keyframes rotation {
		from { -webkit-transform: rotate(0deg); }
		to { -webkit-transform: rotate(359deg); }
    }

    @keyframes rotation {
		from { transform: rotate(0deg); }
		to { transform: rotate(359deg); }
    }     


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

    .pre-loader { background-color: var(--DTBodyBGColor); }
    .loader-text { background-image: linear-gradient(to right, var(--DTHeadAltColor) 10%, var(--DTSecondaryColor) 50%, var(--DTPrimaryColor) 60%); }


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

    /*----*****---- << Mobile (Landscape) >> ----*****----*/

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .loader-inner:before {
            font-size: 5em;
        }
    }


    /* Common Styles for the devices below 479px width */

    @media only screen and (max-width: 479px) {
        .loader-inner::before {
            font-size: 4em;
        }
    }