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

.pre-loader { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; background-color: var(--wdtTertiaryColor); }
.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 .loader-inner .loadingspinner { width: calc( 3 * 30px + 26px); height: calc( 2 * 30px + 26px); padding: 0px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 30px; position: relative; }
.pre-loader.loader1 .loader-inner .loadingspinner div { display: inline-block; background: var(--wdtPrimaryColor); border: none; border-radius: 2px; width: 26px; height: 26px; position: absolute; padding: 0px; margin: 0px; font-size: 6pt; color: var(--wdtHeadAltColor); }
.pre-loader.loader1 .loader-inner .loadingspinner #square1 { left: calc( 0 * 30px ); top: calc( 0 * 30px ); animation: square1 2.4s 0.2s ease-in-out infinite, squarefadein 0.4s calc(1 * 0.1s) ease-out both; }
.pre-loader.loader1 .loader-inner .loadingspinner #square2 { left: calc( 0 * 30px ); top: calc( 1 * 30px ); animation: square2 2.4s 0.2s ease-in-out infinite, squarefadein 0.4s calc(1 * 0.1s) ease-out both; }
.pre-loader.loader1 .loader-inner .loadingspinner #square3 { left: calc( 1 * 30px ); top: calc( 1 * 30px ); animation: square3 2.4s 0.2s ease-in-out infinite, squarefadein 0.4s calc(2 * 0.1s) ease-out both; }
.pre-loader.loader1 .loader-inner .loadingspinner #square4 { left: calc( 2 * 30px ); top: calc( 1 * 30px ); animation: square4 2.4s 0.2s ease-in-out infinite, squarefadein 0.4s calc(3 * 0.1s) ease-out both; }
.pre-loader.loader1 .loader-inner .loadingspinner #square5 { left: calc( 3 * 30px ); top: calc( 1 * 30px ); animation: square5 2.4s 0.2s ease-in-out infinite, squarefadein 0.4s calc(4 * 0.1s) ease-out both; }

@keyframes square1 { 0% { left: calc( 0 * 30px ); top: calc( 0 * 30px ); } 8.333% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } }
@keyframes square2 { 0% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } 8.333% { left: calc( 0 * 30px ); top: calc( 2 * 30px ); } 16.67% { left: calc( 1 * 30px ); top: calc( 2 * 30px ); } 25.00% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 83.33% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 91.67% { left: calc( 1 * 30px ); top: calc( 0 * 30px ); } 100% { left: calc( 0 * 30px ); top: calc( 0 * 30px ); } }
@keyframes square3 { 0%,100% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 16.67% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 25.00% { left: calc( 1 * 30px ); top: calc( 0 * 30px ); } 33.33% { left: calc( 2 * 30px ); top: calc( 0 * 30px ); } 41.67% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 66.67% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 75.00% { left: calc( 2 * 30px ); top: calc( 2 * 30px ); } 83.33% { left: calc( 1 * 30px ); top: calc( 2 * 30px ); } 91.67% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } }
@keyframes square4 { 0% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 33.33% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 41.67% { left: calc( 2 * 30px ); top: calc( 2 * 30px ); } 50.00% { left: calc( 3 * 30px ); top: calc( 2 * 30px ); } 58.33% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } }
@keyframes square5 { 0% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 50.00% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 58.33% { left: calc( 3 * 30px ); top: calc( 0 * 30px ); } 66.67% { left: calc( 2 * 30px ); top: calc( 0 * 30px ); } 75.00% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } }
@keyframes squarefadein { 0% { transform: scale(0.75); opacity: 0.0; } 100% { transform: scale(1.0); opacity: 1.0; } }

@-webkit-keyframes square1 { 0% { left: calc( 0 * 30px ); top: calc( 0 * 30px ); } 8.333% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } }
@-webkit-keyframes square2 { 0% { left: calc( 0 * 30px ); top: calc( 1 * 30px ); } 8.333% { left: calc( 0 * 30px ); top: calc( 2 * 30px ); } 16.67% { left: calc( 1 * 30px ); top: calc( 2 * 30px ); } 25.00% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 83.33% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 91.67% { left: calc( 1 * 30px ); top: calc( 0 * 30px ); } 100% { left: calc( 0 * 30px ); top: calc( 0 * 30px ); } }
@-webkit-keyframes square3 { 0%,100% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 16.67% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } 25.00% { left: calc( 1 * 30px ); top: calc( 0 * 30px ); } 33.33% { left: calc( 2 * 30px ); top: calc( 0 * 30px ); } 41.67% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 66.67% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 75.00% { left: calc( 2 * 30px ); top: calc( 2 * 30px ); } 83.33% { left: calc( 1 * 30px ); top: calc( 2 * 30px ); } 91.67% { left: calc( 1 * 30px ); top: calc( 1 * 30px ); } }
@-webkit-keyframes square4 { 0% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 33.33% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 41.67% { left: calc( 2 * 30px ); top: calc( 2 * 30px ); } 50.00% { left: calc( 3 * 30px ); top: calc( 2 * 30px ); } 58.33% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } }
@-webkit-keyframes square5 { 0% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 50.00% { left: calc( 3 * 30px ); top: calc( 1 * 30px ); } 58.33% { left: calc( 3 * 30px ); top: calc( 0 * 30px ); } 66.67% { left: calc( 2 * 30px ); top: calc( 0 * 30px ); } 75.00% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } 100% { left: calc( 2 * 30px ); top: calc( 1 * 30px ); } }
@-webkit-keyframes squarefadein { 0% { transform: scale(0.75); opacity: 0.0; } 100% { transform: scale(1.0); opacity: 1.0; } }




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

    .pre-loader { background-color: var(--wdtTertiaryColor); }
    .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) { }