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

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

/* .loader-inner { text-transform:uppercase; width:100%; text-align:center; line-height:50px; margin:auto; position:absolute; left:0;right:0;top:50%; transform:translateY(-50%); } .loader-inner .loader-text { color: var(--wdtHeadAltColor); font-family: var(--wdtFontTypo_Alt); font-size: var(--wdtFontSize_H6); font-weight: bold; padding: 5px 15px; position:relative; z-index:0; } .loader-inner .loader-text:before { content:''; background: #f4f4f4; display:block; margin: 0 -15px; position:absolute; top:0;left:0;right:0;bottom:0; z-index: -2; -webkit-animation:2s loadingBefore infinite ease-in-out; animation:2s loadingBefore infinite ease-in-out; } .loader-inner .loader-text:after { content:''; width:14px; height:60px; display:block; margin:auto; opacity:0.75; position:absolute; top:0;left:0;right:0;bottom:0; z-index: -1; animation:2s loadingAfter infinite ease-in-out; } @-webkit-keyframes loadingBefore { 0%   {transform:translateX(-15px);} 50%  {transform:translateX(15px);} 100% {transform:translateX(-15px);} } @keyframes loadingBefore { 0%   {transform:translateX(-15px);} 50%  {transform:translateX(15px);} 100% {transform:translateX(-15px);} } @-webkit-keyframes loadingAfter { 0%   {transform:translateX(-50px);} 50%  {transform:translateX(50px);} 100% {transform:translateX(-50px);} } @keyframes loadingAfter { 0%   {transform:translateX(-50px);} 50%  {transform:translateX(50px);} 100% {transform:translateX(-50px);} } */

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.wdt-loader-line-wrapper {
    animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}

.wdt-loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.wdt-loader-line-wrapper:nth-child(1) {
    animation-delay: -50ms;
}

.wdt-loader-line-wrapper:nth-child(2) {
    animation-delay: -100ms;
}

.wdt-loader-line-wrapper:nth-child(3) {
    animation-delay: -150ms;
}

.wdt-loader-line-wrapper:nth-child(4) {
    animation-delay: -200ms;
}

.wdt-loader-line-wrapper:nth-child(5) {
    animation-delay: -250ms;
}

.wdt-loader-line-wrapper:nth-child(1) .wdt-loader-line {
    border-color: rgb(235, 71, 71);
    height: 90px;
    width: 90px;
    top: 7px;
}

.wdt-loader-line-wrapper:nth-child(2) .wdt-loader-line {
    border-color: rgb(235, 235, 71);
    height: 76px;
    width: 76px;
    top: 14px;
}

.wdt-loader-line-wrapper:nth-child(3) .wdt-loader-line {
    border-color: rgb(71, 235, 71);
    height: 62px;
    width: 62px;
    top: 21px;
}

.wdt-loader-line-wrapper:nth-child(4) .wdt-loader-line {
    border-color: rgb(71, 235, 235);
    height: 48px;
    width: 48px;
    top: 28px;
}

.wdt-loader-line-wrapper:nth-child(5) .wdt-loader-line {
    border-color: rgb(71, 71, 235);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%,
    15% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

.loader-inner .loader-text:after {
    background-color: var(--wdtPrimaryColor);
}

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