/*--------------------------------------------------------------
    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%);
    }

    /* The loader container */
    .loader1 .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        width: clamp(6.25rem, 5rem + 6.25vw, 12.5rem); /* 200 - 100 */
        height: clamp(6.25rem, 5rem + 6.25vw, 12.5rem); /* 200 - 100 */
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        perspective: 1000px;
        transform-style: preserve-3d;
    }
    
    
    /* The cubes */
    .loader1 .cubes {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform: rotateY(45deg) rotateZ(45deg);
        -webkit-transform: rotateY(45deg) rotateZ(45deg);
    }

    .woocommerce .loader1 .loader::before {
        display: none;
    }
     
    
    /* The cube */
    .loader1 .cube {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform: translateZ(calc(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem) * -1)); /* 50px - 25px */
        -webkit-transform: translateZ(calc(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem) * -1)); /* 50px - 25px */
        animation: cube-loader 2500ms cubic-bezier(.66,.14,.56,.75) infinite;
        -webkit-animation: cube-loader 2500ms cubic-bezier(.66,.14,.56,.75) infinite;
    }

    .loader1 .cube:nth-child(1), .cube:nth-child(4) {
        color: var(--wdtSecondaryColor);
    }

    .loader1 .cube:nth-child(2), .cube:nth-child(3) {
        color: var(--wdtPrimaryColor);
    }
    
    .loader1 .cube:nth-child(2) {
        top: 0;
        left: 50%;
        animation-delay: 50ms;
        -webkit-animation-delay: 50ms;
    }
    
    .loader1 .cube:nth-child(3) {
        top: 50%;
        left: 0;
        animation-delay: 100ms;
        -webkit-animation-delay: 100ms;
    }
    
    .loader1 .cube:nth-child(4) {
        top: 50%;
        left: 50%;
        animation-delay: 150ms;
        -webkit-animation-delay: 150ms;
    }
    
    @keyframes cube-loader {
        0%, 75%, 100% {
            transform: translate3d(0px, 0px, clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)) rotateY(0deg) scale3d(0.9, 0.9, 0.1); /* 50px - 25px */
            -webkit-transform: translate3d(0px, 0px, clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)) rotateY(0deg) scale3d(0.9, 0.9, 0.1); /* 50px - 25px */
        }
    
        25%, 50% {
            transform: translate3d(0px, 0px, calc(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem) * -1)) rotateY(180deg) scale3d(0.9, 0.9, 0.1); /* 50px - 25px */
            -webkit-transform: translate3d(0px, 0px, calc(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem) * -1)) rotateY(180deg) scale3d(0.9, 0.9, 0.1); /* 50px - 25px */
        }
    }
    
    
    
    
    
    /* The side */
    .loader1 .side {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        backface-visibility: hidden;
    }
    
    /* back */
    .loader1 .side:nth-child(1) {
        transform: rotateX(-180deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        -webkit-transform: rotateX(-180deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }
    
    /* left side */
    .loader1 .side:nth-child(2) {
        transform: rotateY(-90deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        -webkit-transform: rotateY(-90deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }
    
    /* right side */
    .loader1 .side:nth-child(3) {
        transform: rotateY(90deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }
    
    /* top side */
    .loader1 .side:nth-child(4) {
        transform: rotateX(90deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }
    
    /* bottom side */
    .loader1 .side:nth-child(5) {
        transform: rotateX(-90deg) translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }
    
    /* top */
    .loader1 .side:nth-child(6) {
        transform: translateZ(clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem)); /* 50px - 25px */
        background-color: currentColor;
    }


/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

    .pre-loader { background-color: var(--wdtBodyBGColor); }

/*--------------------------------------------------------------
    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) {

    }