.full-width {
    width: 100%;
}

.half-height{
    height: 50%;
}
.half-width{
    width: 50%;
}

.full-size {
    width: 100%;
    height: 100%;
}

/*** 
====================================================================
    Height and width Helper Classes   
====================================================================

***/

/*----Height Direct----*/
.placeholder-height-dr-0_5,
.placeholder-height-dr-0_5before::before,
.placeholder-height-dr-0_5after::after {
    height: 25px;
}

.placeholder-height-dr-0,
.placeholder-height-dr-0-before::before,
.placeholder-height-dr-0-after::after {
    height: 50px;
}

.placeholder-height-dr-1,
.placeholder-height-dr-1-before::before,
.placeholder-height-dr-1-after::after {
    height: 100px;
}

.placeholder-height-dr-2,
.placeholder-height-dr-2-before::before,
.placeholder-height-dr-2-after::after {
    height: 150px;
}

.placeholder-height-dr-3,
.placeholder-height-dr-3-before::before,
.placeholder-height-dr-3-after::after {
    height: 200px;
}

.placeholder-height-dr-4,
.placeholder-height-dr-4-before::before,
.placeholder-height-dr-4-after::after {
    height: 250px;
}

.placeholder-height-dr-5,
.placeholder-height-dr-5-before::before,
.placeholder-height-dr-5-after::after {
    height: 300px;
}

.placeholder-height-dr-6,
.placeholder-height-dr-6-before::before,
.placeholder-height-dr-6-after::after {
    height: 350px;
}

.placeholder-height-dr-7,
.placeholder-height-dr-7-before::before,
.placeholder-height-dr-7-after::after {
    height: 400px;
}

.placeholder-height-dr-8,
.placeholder-height-dr-8-before::before,
.placeholder-height-dr-8-after::after {
    height: 450px;
}

.placeholder-height-dr-9,
.placeholder-height-dr-9-before::before,
.placeholder-height-dr-9-after::after {
    height: 500px;
}

.placeholder-height-dr-10,
.placeholder-height-dr-10-before::before,
.placeholder-height-dr-10-after::after {
    height: 550px;
}

.placeholder-height-dr-11,
.placeholder-height-dr-11-before::before,
.placeholder-height-dr-11-after::after {
    height: 600px;
}

.placeholder-height-dr-12,
.placeholder-height-dr-12-before::before,
.placeholder-height-dr-12-after::after {
    height: 650px;
}

.placeholder-height-dr-13,
.placeholder-height-dr-13-before::before,
.placeholder-height-dr-13-after::after {
    height: 700px;
}

.placeholder-height-dr-13_5,
.placeholder-height-dr-13_5-before::before,
.placeholder-height-dr-13_5-after::after {
    height: 750px;
}

.placeholder-height-dr-14,
.placeholder-height-dr-14-before::before,
.placeholder-height-dr-14-after::after {
    height: 800px;
}

.placeholder-height-dr-15,
.placeholder-height-dr-15-before::before,
.placeholder-height-dr-15-after::after {
    height: 850px;
}

.placeholder-height-dr-16,
.placeholder-height-dr-16-before::before,
.placeholder-height-dr-16-after::after {
    height: 900px;
}

.placeholder-height-dr-17,
.placeholder-height-dr-17-before::before,
.placeholder-height-dr-17-after::after {
    height: 950px;
}

.placeholder-height-dr-18,
.placeholder-height-dr-18-before::before,
.placeholder-height-dr-18-after::after {
    height: 1000px;
}
/* Half Height */
.placeholder-height-half,
.placeholder-height-half-before::before,
.placeholder-height-half-after::after {
    height: 50%;
}
/* Min Height */
.placeholder-height-0_5,
.placeholder-height-0_5-before::before,
.placeholder-height-0_5-after::after {
    min-height: 25px !important;
}
.placeholder-height-0,
.placeholder-height-0-before::before,
.placeholder-height-0-after::after {
    min-height: 50px !important;
}

.placeholder-height-1,
.placeholder-height-1-before::before,
.placeholder-height-1-after::after {
    min-height: 100px;
}

.placeholder-height-2,
.placeholder-height-2-before::before,
.placeholder-height-2-after::after {
    min-height: 150px;
}

.placeholder-height-3,
.placeholder-height-3-before::before,
.placeholder-height-3-after::after {
    min-height: 200px;
}

.placeholder-height-4,
.placeholder-height-4-before::before,
.placeholder-height-4-after::after {
    min-height: 250px;
}

.placeholder-height-5,
.placeholder-height-5-before::before,
.placeholder-height-5-after::after {
    min-height: 300px;
}

.placeholder-height-6,
.placeholder-height-6-before::before,
.placeholder-height-6-after::after {
    min-height: 350px;
}

.placeholder-height-7,
.placeholder-height-7-before::before,
.placeholder-height-7-after::after {
    min-height: 400px;
}

.placeholder-height-8,
.placeholder-height-8-before::before,
.placeholder-height-8-after::after {
    min-height: 450px;
}

.placeholder-height-9,
.placeholder-height-9-before::before,
.placeholder-height-9-after::after {
    min-height: 500px;
}

.placeholder-height-10,
.placeholder-height-10-before::before,
.placeholder-height-10-after::after {
    min-height: 550px;
}

.placeholder-height-11,
.placeholder-height-11-before::before,
.placeholder-height-11-after::after {
    min-height: 600px;
}

.placeholder-height-12,
.placeholder-height-12-before::before,
.placeholder-height-12-after::after {
    min-height: 650px;
}

.placeholder-height-13,
.placeholder-height-13-before::before,
.placeholder-height-13-after::after {
    min-height: 700px;
}

.placeholder-height-13_5,
.placeholder-height-13_5-before::before,
.placeholder-height-13_5-after::after {
    min-height: 750px;
}

.placeholder-height-14,
.placeholder-height-14-before::before,
.placeholder-height-14-after::after {
    min-height: 800px;
}

.placeholder-height-15,
.placeholder-height-15-before::before,
.placeholder-height-15-after::after {
    min-height: 850px;
}

.placeholder-height-16,
.placeholder-height-16-before::before,
.placeholder-height-16-after::after {
    min-height: 900px;
}

.placeholder-height-17,
.placeholder-height-17-before::before,
.placeholder-height-17-after::after {
    min-height: 950px;
}

.placeholder-height-18,
.placeholder-height-18-before::before,
.placeholder-height-18-after::after {
    min-height: 1000px;
}

/* Max Height */
.placeholder-mx-height-0,
.placeholder-mx-height-0-before::before,
.placeholder-mx-height-0-after::after {
    max-height: 50px;

}

.placeholder-mx-height-1,
.placeholder-mx-height-1-before::before,
.placeholder-mx-height-1-after::after {
    max-height: 100px;
}

.placeholder-mx-height-2,
.placeholder-mx-height-2-before::before,
.placeholder-mx-height-2-after::after {
    max-height: 150px;
}

.placeholder-mx-height-3,
.placeholder-mx-height-3-before::before,
.placeholder-mx-height-3-after::after {
    max-height: 200px;
}

.placeholder-mx-height-4,
.placeholder-mx-height-4-before::before,
.placeholder-mx-height-4-after::after {
    max-height: 250px;
}

.placeholder-mx-height-5,
.placeholder-mx-height-5-before::before,
.placeholder-mx-height-5-after::after {
    max-height: 300px;
}

.placeholder-mx-height-6,
.placeholder-mx-height-6-before::before,
.placeholder-mx-height-6-after::after {
    max-height: 350px;
}

.placeholder-mx-height-7,
.placeholder-mx-height-7-before::before,
.placeholder-mx-height-7-after::after {
    max-height: 400px;
}

.placeholder-mx-height-8,
.placeholder-mx-height-8-before::before,
.placeholder-mx-height-8-after::after {
    max-height: 450px;
}

.placeholder-mx-height-9,
.placeholder-mx-height-9-before::before,
.placeholder-mx-height-9-after::after {
    max-height: 500px;
}

.placeholder-mx-height-10,
.placeholder-mx-height-10-before::before,
.placeholder-mx-height-10-after::after {
    max-height: 550px;
}

.placeholder-mx-height-11,
.placeholder-mx-height-11-before::before,
.placeholder-mx-height-11-after::after {
    max-height: 600px;
}

.placeholder-mx-height-12,
.placeholder-mx-height-12-before::before,
.placeholder-mx-height-12-after::after {
    max-height: 650px;
}

.placeholder-mx-height-13,
.placeholder-mx-height-13-before::before,
.placeholder-mx-height-13-after::after {
    max-height: 700px;
}

.placeholder-mx-height-13_5,
.placeholder-mx-height-13_5-before::before,
.placeholder-mx-height-13_5-after::after {
    max-height: 750px;
}

.placeholder-mx-height-14,
.placeholder-mx-height-14-before::before,
.placeholder-mx-height-14-after::after {
    max-height: 800px;
}

.placeholder-mx-height-15,
.placeholder-mx-height-15-before::before,
.placeholder-mx-height-15-after::after {
    max-height: 850px;
}

.placeholder-mx-height-16,
.placeholder-mx-height-16-before::before,
.placeholder-mx-height-16-after::after {
    max-height: 900px;
}

.placeholder-mx-height-17,
.placeholder-mx-height-17-before::before,
.placeholder-mx-height-17-after::after {
    max-height: 950px;
}

.placeholder-mx-height-18,
.placeholder-mx-height-18-before::before,
.placeholder-mx-height-18-after::after {
    max-height: 1000px;
}

/* fit height */
.placeholder-height-fit,
.placeholder-height-fit-before::before,
.placeholder-height-fit-after::after {
    height: fit-content;
}

.placeholder-mx-height-fit,
.placeholder-mx-height-fit-before::before,
.placeholder-mx-height-fit-after::after {
    max-height: fit-content;
}

.placeholder-mn-height-fit,
.placeholder-mn-height-fit-before::before,
.placeholder-mn-height-fit-after::after {
    min-height: fit-content;
}

.placeholder-mn-height-auto,
.placeholder-mn-height-auto-before::before,
.placeholder-mn-height-auto-after::after {
    min-height: auto;
}

.placeholder-mx-height-auto,
.placeholder-mx-height-auto-before::before,
.placeholder-mx-height-auto-after::after {
    max-height: auto;
}

.placeholder-height-full,
.placeholder-height-full-before::before,
.placeholder-height-full-after::after {
    height: 100%;
}

/* Width direct */
.placeholder-width-dr-0_5,
.placeholder-width-dr-0_5before::before,
.placeholder-width-dr-0_5after::after {
    width: 25px;
}

.placeholder-width-dr-0,
.placeholder-width-dr-0-before::before,
.placeholder-width-dr-0-after::after {
    width: 50px;
}

.placeholder-width-dr-1,
.placeholder-width-dr-1-before::before,
.placeholder-width-dr-1-after::after {
    width: 100px;
}

.placeholder-width-dr-2,
.placeholder-width-dr-2-before::before,
.placeholder-width-dr-2-after::after {
    width: 150px;
}

.placeholder-width-dr-3,
.placeholder-width-dr-3-before::before,
.placeholder-width-dr-3-after::after {
    width: 200px;
}

.placeholder-width-dr-4,
.placeholder-width-dr-4-before::before,
.placeholder-width-dr-4-after::after {
    width: 250px;
}

.placeholder-width-dr-5,
.placeholder-width-dr-5-before::before,
.placeholder-width-dr-5-after::after {
    width: 300px;
}

.placeholder-width-dr-6,
.placeholder-width-dr-6-before::before,
.placeholder-width-dr-6-after::after {
    width: 350px;
}

.placeholder-width-dr-7,
.placeholder-width-dr-7-before::before,
.placeholder-width-dr-7-after::after {
    width: 400px;
}

.placeholder-width-dr-8,
.placeholder-width-dr-8-before::before,
.placeholder-width-dr-8-after::after {
    width: 450px;
}

.placeholder-width-dr-9,
.placeholder-width-dr-9-before::before,
.placeholder-width-dr-9-after::after {
    width: 500px;
}

.placeholder-width-dr-10,
.placeholder-width-dr-10-before::before,
.placeholder-width-dr-10-after::after {
    width: 550px;
}

.placeholder-width-dr-11,
.placeholder-width-dr-11-before::before,
.placeholder-width-dr-11-after::after {
    width: 600px;
}

.placeholder-width-dr-12,
.placeholder-width-dr-12-before::before,
.placeholder-width-dr-12-after::after {
    width: 650px;
}

.placeholder-width-dr-13,
.placeholder-width-dr-13-before::before,
.placeholder-width-dr-13-after::after {
    width: 700px;
}

.placeholder-width-dr-13_5,
.placeholder-width-dr-13_5-before::before,
.placeholder-width-dr-13_5-after::after {
    width: 750px;
}

.placeholder-width-dr-14,
.placeholder-width-dr-14-before::before,
.placeholder-width-dr-14-after::after {
    width: 800px;
}

.placeholder-width-dr-15,
.placeholder-width-dr-15-before::before,
.placeholder-width-dr-15-after::after {
    width: 850px;
}

.placeholder-width-dr-16,
.placeholder-width-dr-16-before::before,
.placeholder-width-dr-16-after::after {
    width: 900px;
}

.placeholder-width-dr-17,
.placeholder-width-dr-17-before::before,
.placeholder-width-dr-17-after::after {
    width: 950px;
}

.placeholder-width-dr-18,
.placeholder-width-dr-18-before::before,
.placeholder-width-dr-18-after::after {
    width: 1000px;
}

/* Half width */
.placeholder-width-half,
.placeholder-width-half-before::before,
.placeholder-width-half-after::after {
    width: 50%;
}
/* Min Width */
.placeholder-width-0_5,
.placeholder-width-0_5-before::before,
.placeholder-width-0_5-after::after {
    min-width: 25px;
}

.placeholder-width-0,
.placeholder-width-0-before::before,
.placeholder-width-0-after::after {
    min-width: 50px!important;
}

.placeholder-width-1,
.placeholder-width-1-before::before,
.placeholder-width-1-after::after {
    min-width: 100px;
}

.placeholder-width-2,
.placeholder-width-2-before::before,
.placeholder-width-2-after::after {
    min-width: 150px;
}

.placeholder-width-3,
.placeholder-width-3-before::before,
.placeholder-width-3-after::after {
    min-width: 200px;
}

.placeholder-width-4,
.placeholder-width-4-before::before,
.placeholder-width-4-after::after {
    min-width: 250px;
}

.placeholder-width-5,
.placeholder-width-5-before::before,
.placeholder-width-5-after::after {
    min-width: 300px;
}

.placeholder-width-6,
.placeholder-width-6-before::before,
.placeholder-width-6-after::after {
    min-width: 350px;
}

.placeholder-width-7,
.placeholder-width-7-before::before,
.placeholder-width-7-after::after {
    min-width: 400px;
}

.placeholder-width-8,
.placeholder-width-8-before::before,
.placeholder-width-8-after::after {
    min-width: 450px;
}

.placeholder-width-9,
.placeholder-width-9-before::before,
.placeholder-width-9-after::after {
    min-width: 500px;
}

.placeholder-width-10,
.placeholder-width-10-before::before,
.placeholder-width-10-after::after {
    min-width: 550px;
}

.placeholder-width-11,
.placeholder-width-11-before::before,
.placeholder-width-11-after::after {
    min-width: 600px;
}

.placeholder-width-12,
.placeholder-width-12-before::before,
.placeholder-width-12-after::after {
    min-width: 650px;
}

.placeholder-width-13,
.placeholder-width-13-before::before,
.placeholder-width-13-after::after {
    min-width: 700px;
}

.placeholder-width-13_5,
.placeholder-width-13_5-before::before,
.placeholder-width-13_5-after::after {
    min-width: 750px;
}

.placeholder-width-14,
.placeholder-width-14-before::before,
.placeholder-width-14-after::after {
    min-width: 800px;
}

.placeholder-width-15,
.placeholder-width-15-before::before,
.placeholder-width-15-after::after {
    min-width: 850px;
}

.placeholder-width-16,
.placeholder-width-16-before::before,
.placeholder-width-16-after::after {
    min-width: 900px;
}

.placeholder-width-17,
.placeholder-width-17-before::before,
.placeholder-width-17-after::after {
    min-width: 950px;
}

.placeholder-width-18,
.placeholder-width-18-before::before,
.placeholder-width-18-after::after {
    min-width: 1000px;
}

/* Max Width */
.placeholder-mx-width-0_5,
.placeholder-mx-width-0_5-before::before,
.placeholder-mx-width-0_5-after::after {
    max-width: 25px;
}
.placeholder-mx-width-0,
.placeholder-mx-width-0-before::before,
.placeholder-mx-width-0-after::after {
    max-width: 50px;
}

.placeholder-mx-width-1,
.placeholder-mx-width-1-before::before,
.placeholder-mx-width-1-after::after {
    max-width: 100px;
}

.placeholder-mx-width-2,
.placeholder-mx-width-2-before::before,
.placeholder-mx-width-2-after::after {
    max-width: 150px;
}

.placeholder-mx-width-3,
.placeholder-mx-width-3-before::before,
.placeholder-mx-width-3-after::after {
    max-width: 200px;
}

.placeholder-mx-width-4,
.placeholder-mx-width-4-before::before,
.placeholder-mx-width-4-after::after {
    max-width: 250px;
}

.placeholder-mx-width-5,
.placeholder-mx-width-5-before::before,
.placeholder-mx-width-5-after::after {
    max-width: 300px;
}

.placeholder-mx-width-6,
.placeholder-mx-width-6-before::before,
.placeholder-mx-width-6-after::after {
    max-width: 350px;
}

.placeholder-mx-width-7,
.placeholder-mx-width-7-before::before,
.placeholder-mx-width-7-after::after {
    max-width: 400px;
}

.placeholder-mx-width-8,
.placeholder-mx-width-8-before::before,
.placeholder-mx-width-8-after::after {
    max-width: 450px;
}

.placeholder-mx-width-9,
.placeholder-mx-width-9-before::before,
.placeholder-mx-width-9-after::after {
    max-width: 500px;
}

.placeholder-mx-width-10,
.placeholder-mx-width-10-before::before,
.placeholder-mx-width-10-after::after {
    max-width: 550px;
}

.placeholder-mx-width-11,
.placeholder-mx-width-11-before::before,
.placeholder-mx-width-11-after::after {
    max-width: 600px;
}

.placeholder-mx-width-12,
.placeholder-mx-width-12-before::before,
.placeholder-mx-width-12-after::after {
    max-width: 650px;
}

.placeholder-mx-width-13,
.placeholder-mx-width-13-before::before,
.placeholder-mx-width-13-after::after {
    max-width: 700px;
}

.placeholder-mx-width-13_5,
.placeholder-mx-width-13_5-before::before,
.placeholder-mx-width-13_5-after::after {
    max-width: 750px;
}

.placeholder-mx-width-14,
.placeholder-mx-width-14-before::before,
.placeholder-mx-width-14-after::after {
    max-width: 800px;
}

.placeholder-mx-width-15,
.placeholder-mx-width-15-before::before,
.placeholder-mx-width-15-after::after {
    max-width: 850px;
}

.placeholder-mx-width-16,
.placeholder-mx-width-16-before::before,
.placeholder-mx-width-16-after::after {
    max-width: 900px;
}

.placeholder-mx-width-17,
.placeholder-mx-width-17-before::before,
.placeholder-mx-width-17-after::after {
    max-width: 950px;
}

.placeholder-mx-width-18,
.placeholder-mx-width-18-before::before,
.placeholder-mx-width-18-after::after {
    max-width: 1000px;
}

/* fit width */
.placeholder-width-fit,
.placeholder-width-fit-before::before,
.placeholder-width-fit-after::after {
    width: fit-content;
}

.placeholder-mx-width-fit,
.placeholder-mx-width-fit-before::before,
.placeholder-mx-width-fit-after::after {
    max-width: fit-content;
}

.placeholder-mn-width-fit,
.placeholder-mn-width-fit-before::before,
.placeholder-mn-width-fit-after::after {
    min-width: fit-content;
}

.placeholder-mn-width-auto,
.placeholder-mn-width-auto-before::before,
.placeholder-mn-width-auto-after::after {
    min-width: auto;
}

.placeholder-mx-width-auto,
.placeholder-mx-width-auto-before::before,
.placeholder-mx-width-auto-after::after {
    max-width: auto;
}

.placeholder-mx-width-full,
.placeholder-mx-width-full-before::before,
.placeholder-mx-width-full-after::after {
    max-width: 100% !important;
}

.placeholder-width-full,
.placeholder-width-full-before::before,
.placeholder-width-full-after::after {
    width: 100%;
}


/* launch some responsive classes into the mix */

/*---------------------Media css start---------------------------*/

/* Large desktop */

@media (min-width: 1024px) {}

@media (min-width: 1025px) {}

@media (max-width: 1200px) {

}

@media screen(max-width: 1025px) and (max-height: 1367px) {

}

@media screen(min-width: 992px) and screen(max-width: 1024px) {}

@media screen (min-width: 1024px) {}

@media screen(min-width: 768px) and screen(max-width: 1024px) {}

/* landscape on tablets */

@media screen(min-width: 992px) {}

/* Portrait tablet to landscape and desktop */

@media screen (min-width: 768px) and (max-width: 979px) {}

/* Media-css Landscape phone to portrait tablet */

@media (max-width: 769px) {
    /*** 
    ====================================================================
        Height and width Helper Classes   
    ====================================================================

    ***/

    /* Half Height */
    .placeholder-height-half-769,
    .placeholder-height-half-769-before::before,
    .placeholder-height-half-769-after::after {
        height: 50%;
    }
    /* Min Height */
    .placeholder-height-0_5-769,
    .placeholder-height-0_5-769-before::before,
    .placeholder-height-0_5-769-after::after {
        min-height: 25px;
    }

    .placeholder-height-0-769,
    .placeholder-height-0-before-769::before,
    .placeholder-height-0-after-769::after {
        min-height: 50px;
    }

    .placeholder-height-1-769,
    .placeholder-height-1-before-769::before,
    .placeholder-height-1-after-769::after {
        min-height: 100px;
    }

    .placeholder-height-2-769,
    .placeholder-height-2-before-769::before,
    .placeholder-height-2-after-769::after {
        min-height: 150px;
    }

    .placeholder-height-3-769,
    .placeholder-height-3-before-769::before,
    .placeholder-height-3-after-769::after {
        min-height: 200px;
    }

    .placeholder-height-4-769,
    .placeholder-height-4-before-769::before,
    .placeholder-height-4-after-769::after {
        min-height: 250px;
    }

    .placeholder-height-5-769,
    .placeholder-height-5-before-769::before,
    .placeholder-height-5-after-769::after {
        min-height: 300px;
    }

    .placeholder-height-6-769,
    .placeholder-height-6-before-769::before,
    .placeholder-height-6-after-769::after {
        min-height: 350px;
    }

    .placeholder-height-7-769,
    .placeholder-height-7-before-769::before,
    .placeholder-height-7-after-769::after {
        min-height: 400px;
    }

    .placeholder-height-8-769,
    .placeholder-height-8-before-769::before,
    .placeholder-height-8-after-769::after {
        min-height: 450px;
    }

    .placeholder-height-9-769,
    .placeholder-height-9-before-769::before,
    .placeholder-height-9-after-769::after {
        min-height: 500px;
    }

    .placeholder-height-10-769,
    .placeholder-height-10-before-769::before,
    .placeholder-height-10-after-769::after {
        min-height: 550px;
    }

    .placeholder-height-11-769,
    .placeholder-height-11-before-769::before,
    .placeholder-height-11-after-769::after {
        min-height: 600px;
    }

    .placeholder-height-12-769,
    .placeholder-height-12-before-769::before,
    .placeholder-height-12-after-769::after {
        min-height: 650px;
    }

    .placeholder-height-13-769,
    .placeholder-height-13-before-769::before,
    .placeholder-height-13-after-769::after {
        min-height: 700px;
    }

    .placeholder-height-13_5-769,
    .placeholder-height-13_5-before-769::before,
    .placeholder-height-13_5-after-769::after {
        min-height: 750px;
    }

    .placeholder-height-14-769,
    .placeholder-height-14-before-769::before,
    .placeholder-height-14-after-769::after {
        min-height: 800px;
    }

    .placeholder-height-15-769,
    .placeholder-height-15-before-769::before,
    .placeholder-height-15-after-769::after {
        min-height: 850px;
    }

    .placeholder-height-16-769,
    .placeholder-height-16-before-769::before,
    .placeholder-height-16-after-769::after {
        min-height: 900px;
    }

    .placeholder-height-17-769,
    .placeholder-height-17-before-769::before,
    .placeholder-height-17-after-769::after {
        min-height: 950px;
    }

    .placeholder-height-18-769,
    .placeholder-height-18-before-769::before,
    .placeholder-height-18-after-769::after {
        min-height: 1000px;
    }

    /* Max Height */
    .placeholder-mx-height-0-769,
    .placeholder-mx-height-0-before-769::before,
    .placeholder-mx-height-0-after-769::after {
        max-height: 50px;

    }

    .placeholder-mx-height-1-769,
    .placeholder-mx-height-1-before-769::before,
    .placeholder-mx-height-1-after-769::after {
        max-height: 100px;
    }

    .placeholder-mx-height-2-769,
    .placeholder-mx-height-2-before-769::before,
    .placeholder-mx-height-2-after-769::after {
        max-height: 150px;
    }

    .placeholder-mx-height-3-769,
    .placeholder-mx-height-3-before-769::before,
    .placeholder-mx-height-3-after-769::after {
        max-height: 200px;
    }

    .placeholder-mx-height-4-769,
    .placeholder-mx-height-4-before-769::before,
    .placeholder-mx-height-4-after-769::after {
        max-height: 250px;
    }

    .placeholder-mx-height-5-769,
    .placeholder-mx-height-5-before-769::before,
    .placeholder-mx-height-5-after-769::after {
        max-height: 300px;
    }

    .placeholder-mx-height-6-769,
    .placeholder-mx-height-6-before-769::before,
    .placeholder-mx-height-6-after-769::after {
        max-height: 350px;
    }

    .placeholder-mx-height-7-769,
    .placeholder-mx-height-7-before-769::before,
    .placeholder-mx-height-7-after-769::after {
        max-height: 400px;
    }

    .placeholder-mx-height-8-769,
    .placeholder-mx-height-8-before-769::before,
    .placeholder-mx-height-8-after-769::after {
        max-height: 450px;
    }

    .placeholder-mx-height-9-769,
    .placeholder-mx-height-9-before-769::before,
    .placeholder-mx-height-9-after-769::after {
        max-height: 500px;
    }

    .placeholder-mx-height-10-769,
    .placeholder-mx-height-10-before-769::before,
    .placeholder-mx-height-10-after-769::after {
        max-height: 550px;
    }

    .placeholder-mx-height-11-769,
    .placeholder-mx-height-11-before-769::before,
    .placeholder-mx-height-11-after-769::after {
        max-height: 600px;
    }

    .placeholder-mx-height-12-769,
    .placeholder-mx-height-12-before-769::before,
    .placeholder-mx-height-12-after-769::after {
        max-height: 650px;
    }

    .placeholder-mx-height-13-769,
    .placeholder-mx-height-13-before-769::before,
    .placeholder-mx-height-13-after-769::after {
        max-height: 700px;
    }

    .placeholder-mx-height-13_5-769,
    .placeholder-mx-height-13_5-before-769::before,
    .placeholder-mx-height-13_5-after-769::after {
        max-height: 750px;
    }

    .placeholder-mx-height-14-769,
    .placeholder-mx-height-14-before-769::before,
    .placeholder-mx-height-14-after-769::after {
        max-height: 800px;
    }

    .placeholder-mx-height-15-769,
    .placeholder-mx-height-15-before-769::before,
    .placeholder-mx-height-15-after-769::after {
        max-height: 850px;
    }

    .placeholder-mx-height-16-769,
    .placeholder-mx-height-16-before-769::before,
    .placeholder-mx-height-16-after-769::after {
        max-height: 900px;
    }

    .placeholder-mx-height-17-769,
    .placeholder-mx-height-17-before-769::before,
    .placeholder-mx-height-17-after-769::after {
        max-height: 950px;
    }

    .placeholder-mx-height-18-769,
    .placeholder-mx-height-18-before-769::before,
    .placeholder-mx-height-18-after-769::after {
        max-height: 1000px;
    }

    /* fit height */
    .placeholder-height-fit-769,
    .placeholder-height-fit-before-769::before,
    .placeholder-height-fit-after-769::after {
        height: fit-content;
    }

    .placeholder-mx-height-fit-769,
    .placeholder-mx-height-fit-before-769::before,
    .placeholder-mx-height-fit-after-769::after {
        max-height: fit-content;
    }

    .placeholder-mn-height-fit-769,
    .placeholder-mn-height-fit-before-769::before,
    .placeholder-mn-height-fit-after-769::after {
        min-height: fit-content;
    }

    .placeholder-mn-height-auto-769,
    .placeholder-mn-height-auto-before-769::before,
    .placeholder-mn-height-auto-after-769::after {
        min-height: auto;
    }

    .placeholder-mx-height-auto-769,
    .placeholder-mx-height-auto-before-769::before,
    .placeholder-mx-height-auto-after-769::after {
        max-height: auto;
    }

    .placeholder-height-full-769,
    .placeholder-height-full-before-769::before,
    .placeholder-height-full-after-769::after {
        height: 100%;
    }

    /* Half width */
    .placeholder-width-half-769,
    .placeholder-width-half-769-before::before,
    .placeholder-width-half-769-after::after {
        width: 50%;
    }

    /* Min Width */
    .placeholder-width-0_5-769,
    .placeholder-width-0_5-769-before::before,
    .placeholder-width-0_5-769-after::after {
        min-width: 25px;
    }

    .placeholder-width-0-769,
    .placeholder-width-0-before-769::before,
    .placeholder-width-0-after-769::after {
        min-width: 50px;
    }

    .placeholder-width-1-769,
    .placeholder-width-1-before-769::before,
    .placeholder-width-1-after-769::after {
        min-width: 100px;
    }

    .placeholder-width-2-769,
    .placeholder-width-2-before-769::before,
    .placeholder-width-2-after-769::after {
        min-width: 150px;
    }

    .placeholder-width-3-769,
    .placeholder-width-3-before-769::before,
    .placeholder-width-3-after-769::after {
        min-width: 200px;
    }

    .placeholder-width-4-769,
    .placeholder-width-4-before-769::before,
    .placeholder-width-4-after-769::after {
        min-width: 250px;
    }

    .placeholder-width-5-769,
    .placeholder-width-5-before-769::before,
    .placeholder-width-5-after-769::after {
        min-width: 300px;
    }

    .placeholder-width-6-769,
    .placeholder-width-6-before-769::before,
    .placeholder-width-6-after-769::after {
        min-width: 350px;
    }

    .placeholder-width-7-769,
    .placeholder-width-7-before-769::before,
    .placeholder-width-7-after-769::after {
        min-width: 400px;
    }

    .placeholder-width-8-769,
    .placeholder-width-8-before-769::before,
    .placeholder-width-8-after-769::after {
        min-width: 450px;
    }

    .placeholder-width-9-769,
    .placeholder-width-9-before-769::before,
    .placeholder-width-9-after-769::after {
        min-width: 500px;
    }

    .placeholder-width-10-769,
    .placeholder-width-10-before-769::before,
    .placeholder-width-10-after-769::after {
        min-width: 550px;
    }

    .placeholder-width-11-769,
    .placeholder-width-11-before-769::before,
    .placeholder-width-11-after-769::after {
        min-width: 600px;
    }

    .placeholder-width-12-769,
    .placeholder-width-12-before-769::before,
    .placeholder-width-12-after-769::after {
        min-width: 650px;
    }

    .placeholder-width-13-769,
    .placeholder-width-13-before-769::before,
    .placeholder-width-13-after-769::after {
        min-width: 700px;
    }

    .placeholder-width-13_5-769,
    .placeholder-width-13_5-before-769::before,
    .placeholder-width-13_5-after-769::after {
        min-width: 750px;
    }

    .placeholder-width-14-769,
    .placeholder-width-14-before-769::before,
    .placeholder-width-14-after-769::after {
        min-width: 800px;
    }

    .placeholder-width-15-769,
    .placeholder-width-15-before-769::before,
    .placeholder-width-15-after-769::after {
        min-width: 850px;
    }

    .placeholder-width-16-769,
    .placeholder-width-16-before-769::before,
    .placeholder-width-16-after-769::after {
        min-width: 900px;
    }

    .placeholder-width-17-769,
    .placeholder-width-17-before-769::before,
    .placeholder-width-17-after-769::after {
        min-width: 950px;
    }

    .placeholder-width-18-769,
    .placeholder-width-18-before-769::before,
    .placeholder-width-18-after-769::after {
        min-width: 1000px;
    }

    /* Max Width */
    .placeholder-mx-width-0-769,
    .placeholder-mx-width-0-before-769::before,
    .placeholder-mx-width-0-after-769::after {
        max-width: 50px;
    }

    .placeholder-mx-width-1-769,
    .placeholder-mx-width-1-before-769::before,
    .placeholder-mx-width-1-after-769::after {
        max-width: 100px;
    }

    .placeholder-mx-width-2-769,
    .placeholder-mx-width-2-before-769::before,
    .placeholder-mx-width-2-after-769::after {
        max-width: 150px;
    }

    .placeholder-mx-width-3-769,
    .placeholder-mx-width-3-before-769::before,
    .placeholder-mx-width-3-after-769::after {
        max-width: 200px;
    }

    .placeholder-mx-width-4-769,
    .placeholder-mx-width-4-before-769::before,
    .placeholder-mx-width-4-after-769::after {
        max-width: 250px;
    }

    .placeholder-mx-width-5-769,
    .placeholder-mx-width-5-before-769::before,
    .placeholder-mx-width-5-after-769::after {
        max-width: 300px;
    }

    .placeholder-mx-width-6-769,
    .placeholder-mx-width-6-before-769::before,
    .placeholder-mx-width-6-after-769::after {
        max-width: 350px;
    }

    .placeholder-mx-width-7-769,
    .placeholder-mx-width-7-before-769::before,
    .placeholder-mx-width-7-after-769::after {
        max-width: 400px;
    }

    .placeholder-mx-width-8-769,
    .placeholder-mx-width-8-before-769::before,
    .placeholder-mx-width-8-after-769::after {
        max-width: 450px;
    }

    .placeholder-mx-width-9-769,
    .placeholder-mx-width-9-before-769::before,
    .placeholder-mx-width-9-after-769::after {
        max-width: 500px;
    }

    .placeholder-mx-width-10-769,
    .placeholder-mx-width-10-before-769::before,
    .placeholder-mx-width-10-after-769::after {
        max-width: 550px;
    }

    .placeholder-mx-width-11-769,
    .placeholder-mx-width-11-before-769::before,
    .placeholder-mx-width-11-after-769::after {
        max-width: 600px;
    }

    .placeholder-mx-width-12-769,
    .placeholder-mx-width-12-before-769::before,
    .placeholder-mx-width-12-after-769::after {
        max-width: 650px;
    }

    .placeholder-mx-width-13-769,
    .placeholder-mx-width-13-before-769::before,
    .placeholder-mx-width-13-after-769::after {
        max-width: 700px;
    }

    .placeholder-mx-width-13_5-769,
    .placeholder-mx-width-13_5-before-769::before,
    .placeholder-mx-width-13_5-after-769::after {
        max-width: 750px;
    }

    .placeholder-mx-width-14-769,
    .placeholder-mx-width-14-before-769::before,
    .placeholder-mx-width-14-after-769::after {
        max-width: 800px;
    }

    .placeholder-mx-width-15-769,
    .placeholder-mx-width-15-before-769::before,
    .placeholder-mx-width-15-after-769::after {
        max-width: 850px;
    }

    .placeholder-mx-width-16-769,
    .placeholder-mx-width-16-before-769::before,
    .placeholder-mx-width-16-after-769::after {
        max-width: 900px;
    }

    .placeholder-mx-width-17-769,
    .placeholder-mx-width-17-before-769::before,
    .placeholder-mx-width-17-after-769::after {
        max-width: 950px;
    }

    .placeholder-mx-width-18-769,
    .placeholder-mx-width-18-before-769::before,
    .placeholder-mx-width-18-after-769::after {
        max-width: 1000px;
    }

    /* fit width */
    .placeholder-width-fit-769,
    .placeholder-width-fit-before-769::before,
    .placeholder-width-fit-after-769::after {
        width: fit-content;
    }

    .placeholder-mx-width-fit-769,
    .placeholder-mx-width-fit-before-769::before,
    .placeholder-mx-width-fit-after-769::after {
        max-width: auto;
        max-width: fit-content;
    }

    .placeholder-mn-width-fit-769,
    .placeholder-mn-width-fit-before-769::before,
    .placeholder-mn-width-fit-after-769::after {
        min-width: fit-content;
    }

    .placeholder-mn-width-auto-769,
    .placeholder-mn-width-auto-before-769::before,
    .placeholder-mn-width-auto-after-769::after {
        min-width: auto;
    }

    .placeholder-mx-width-auto-769,
    .placeholder-mx-width-auto-before-769::before,
    .placeholder-mx-width-auto-after-769::after {
        max-width: none;
    }

    .placeholder-width-full-769,
    .placeholder-width-full-before-769::before,
    .placeholder-width-full-after-769::after {
        width: 100%;
    }
}

/* Ipad Pro */

@media (max-height: 1367px) and (max-width:1025) {

}

/* landscape Ipad */

@media (max-width: 1367px) and (max-height:1025) {

}

/* Ipad */

@media (max-width: 769px) and (max-height: 1025px) {

}

/* Ipad Portrait */

@media (max-height: 769px) and (max-width: 1025px) {

}

/* Boca tablet Portrait-1*/

@media (max-width: 551px) and (max-height: 1025px) {

}

/* Boca tablet Portrait-2*/

@media (max-width: 650px) and (max-height: 950px) {

}

/* Boca Tablet Landscape */

@media (max-height: 551px) and (max-width: 1025px) {

}

/* Portrait mode on smaller devices */

@media (max-width: 481px) and (max-height: 860px) {

}

/* landscape mode on smaller devices */

@media (max-width: 860px) and (max-height: 481px) {

}

/* small phones and down */

@media (max-width: 641px) {
    /*** 
    ====================================================================
        Height and width Helper Classes   
    ====================================================================

    ***/

    /* Half Height */
    .placeholder-height-half-640,
    .placeholder-height-half-640-before::before,
    .placeholder-height-half-640-after::after {
        height: 50%;
    }

    /* Min Height */
    .placeholder-height-0_5-640,
    .placeholder-height-0_5-640-before::before,
    .placeholder-height-0_5-640-after::after {
        min-height: 25px;
    }

    .placeholder-height-0-640,
    .placeholder-height-0-before-640::before,
    .placeholder-height-0-after-640::after {
        min-height: 50px;
    }

    .placeholder-height-1-640,
    .placeholder-height-1-before-640::before,
    .placeholder-height-1-after-640::after {
        min-height: 100px;
    }

    .placeholder-height-2-640,
    .placeholder-height-2-before-640::before,
    .placeholder-height-2-after-640::after {
        min-height: 150px;
    }

    .placeholder-height-3-640,
    .placeholder-height-3-before-640::before,
    .placeholder-height-3-after-640::after {
        min-height: 200px;
    }

    .placeholder-height-4-640,
    .placeholder-height-4-before-640::before,
    .placeholder-height-4-after-640::after {
        min-height: 250px;
    }

    .placeholder-height-5-640,
    .placeholder-height-5-before-640::before,
    .placeholder-height-5-after-640::after {
        min-height: 300px;
    }

    .placeholder-height-6-640,
    .placeholder-height-6-before-640::before,
    .placeholder-height-6-after-640::after {
        min-height: 350px;
    }

    .placeholder-height-7-640,
    .placeholder-height-7-before-640::before,
    .placeholder-height-7-after-640::after {
        min-height: 400px;
    }

    .placeholder-height-8-640,
    .placeholder-height-8-before-640::before,
    .placeholder-height-8-after-640::after {
        min-height: 450px;
    }

    .placeholder-height-9-640,
    .placeholder-height-9-before-640::before,
    .placeholder-height-9-after-640::after {
        min-height: 500px;
    }

    .placeholder-height-10-640,
    .placeholder-height-10-before-640::before,
    .placeholder-height-10-after-640::after {
        min-height: 550px;
    }

    .placeholder-height-11-640,
    .placeholder-height-11-before-640::before,
    .placeholder-height-11-after-640::after {
        min-height: 600px;
    }

    .placeholder-height-12-640,
    .placeholder-height-12-before-640::before,
    .placeholder-height-12-after-640::after {
        min-height: 650px;
    }

    .placeholder-height-13-640,
    .placeholder-height-13-before-640::before,
    .placeholder-height-13-after-640::after {
        min-height: 700px;
    }

    .placeholder-height-13_5-640,
    .placeholder-height-13_5-before-640::before,
    .placeholder-height-13_5-after-640::after {
        min-height: 750px;
    }

    .placeholder-height-14-640,
    .placeholder-height-14-before-640::before,
    .placeholder-height-14-after-640::after {
        min-height: 800px;
    }

    .placeholder-height-15-640,
    .placeholder-height-15-before-640::before,
    .placeholder-height-15-after-640::after {
        min-height: 850px;
    }

    .placeholder-height-16-640,
    .placeholder-height-16-before-640::before,
    .placeholder-height-16-after-640::after {
        min-height: 900px;
    }

    .placeholder-height-17-640,
    .placeholder-height-17-before-640::before,
    .placeholder-height-17-after-640::after {
        min-height: 950px;
    }

    .placeholder-height-18-640,
    .placeholder-height-18-before-640::before,
    .placeholder-height-18-after-640::after {
        min-height: 1000px;
    }

    /* Max Height */
    .placeholder-mx-height-0-640,
    .placeholder-mx-height-0-before-640::before,
    .placeholder-mx-height-0-after-640::after {
        max-height: 50px;

    }

    .placeholder-mx-height-1-640,
    .placeholder-mx-height-1-before-640::before,
    .placeholder-mx-height-1-after-640::after {
        max-height: 100px;
    }

    .placeholder-mx-height-2-640,
    .placeholder-mx-height-2-before-640::before,
    .placeholder-mx-height-2-after-640::after {
        max-height: 150px;
    }

    .placeholder-mx-height-3-640,
    .placeholder-mx-height-3-before-640::before,
    .placeholder-mx-height-3-after-640::after {
        max-height: 200px;
    }

    .placeholder-mx-height-4-640,
    .placeholder-mx-height-4-before-640::before,
    .placeholder-mx-height-4-after-640::after {
        max-height: 250px;
    }

    .placeholder-mx-height-5-640,
    .placeholder-mx-height-5-before-640::before,
    .placeholder-mx-height-5-after-640::after {
        max-height: 300px;
    }

    .placeholder-mx-height-6-640,
    .placeholder-mx-height-6-before-640::before,
    .placeholder-mx-height-6-after-640::after {
        max-height: 350px;
    }

    .placeholder-mx-height-7-640,
    .placeholder-mx-height-7-before-640::before,
    .placeholder-mx-height-7-after-640::after {
        max-height: 400px;
    }

    .placeholder-mx-height-8-640,
    .placeholder-mx-height-8-before-640::before,
    .placeholder-mx-height-8-after-640::after {
        max-height: 450px;
    }

    .placeholder-mx-height-9-640,
    .placeholder-mx-height-9-before-640::before,
    .placeholder-mx-height-9-after-640::after {
        max-height: 500px;
    }

    .placeholder-mx-height-10-640,
    .placeholder-mx-height-10-before-640::before,
    .placeholder-mx-height-10-after-640::after {
        max-height: 550px;
    }

    .placeholder-mx-height-11-640,
    .placeholder-mx-height-11-before-640::before,
    .placeholder-mx-height-11-after-640::after {
        max-height: 600px;
    }

    .placeholder-mx-height-12-640,
    .placeholder-mx-height-12-before-640::before,
    .placeholder-mx-height-12-after-640::after {
        max-height: 650px;
    }

    .placeholder-mx-height-13-640,
    .placeholder-mx-height-13-before-640::before,
    .placeholder-mx-height-13-after-640::after {
        max-height: 700px;
    }

    .placeholder-mx-height-13_5-640,
    .placeholder-mx-height-13_5-before-640::before,
    .placeholder-mx-height-13_5-after-640::after {
        max-height: 750px;
    }

    .placeholder-mx-height-14-640,
    .placeholder-mx-height-14-before-640::before,
    .placeholder-mx-height-14-after-640::after {
        max-height: 800px;
    }

    .placeholder-mx-height-15-640,
    .placeholder-mx-height-15-before-640::before,
    .placeholder-mx-height-15-after-640::after {
        max-height: 850px;
    }

    .placeholder-mx-height-16-640,
    .placeholder-mx-height-16-before-640::before,
    .placeholder-mx-height-16-after-640::after {
        max-height: 900px;
    }

    .placeholder-mx-height-17-640,
    .placeholder-mx-height-17-before-640::before,
    .placeholder-mx-height-17-after-640::after {
        max-height: 950px;
    }

    .placeholder-mx-height-18-640,
    .placeholder-mx-height-18-before-640::before,
    .placeholder-mx-height-18-after-640::after {
        max-height: 1000px;
    }

    /* fit height */
    .placeholder-height-fit-640,
    .placeholder-height-fit-before-640::before,
    .placeholder-height-fit-after-640::after {
        height: fit-content;
    }

    .placeholder-mx-height-fit-640,
    .placeholder-mx-height-fit-before-640::before,
    .placeholder-mx-height-fit-after-640::after {
        max-height: fit-content;
    }

    .placeholder-mn-height-fit-640,
    .placeholder-mn-height-fit-before-640::before,
    .placeholder-mn-height-fit-after-640::after {
        min-height: fit-content;
    }

    .placeholder-mn-height-auto-640,
    .placeholder-mn-height-auto-before-640::before,
    .placeholder-mn-height-auto-after-640::after {
        min-height: auto;
    }

    .placeholder-mx-height-auto-640,
    .placeholder-mx-height-auto-before-640::before,
    .placeholder-mx-height-auto-after-640::after {
        max-height: auto;
    }

    .placeholder-height-full-640,
    .placeholder-height-full-before-640::before,
    .placeholder-height-full-after-640::after {
        height: 100%;
    }

    /* Half width */
    .placeholder-width-half-640,
    .placeholder-width-half-640-before::before,
    .placeholder-width-half-640-after::after {
        width: 50%;
    }

    /* Min Width */
    .placeholder-width-0_5-640,
    .placeholder-width-0_5-640-before::before,
    .placeholder-width-0_5-640-after::after {
        min-width: 25px;
    }

    .placeholder-width-0-640,
    .placeholder-width-0-before-640::before,
    .placeholder-width-0-after-640::after {
        min-width: 50px;
    }

    .placeholder-width-1-640,
    .placeholder-width-1-before-640::before,
    .placeholder-width-1-after-640::after {
        min-width: 100px;
    }

    .placeholder-width-2-640,
    .placeholder-width-2-before-640::before,
    .placeholder-width-2-after-640::after {
        min-width: 150px;
    }

    .placeholder-width-3-640,
    .placeholder-width-3-before-640::before,
    .placeholder-width-3-after-640::after {
        min-width: 200px;
    }

    .placeholder-width-4-640,
    .placeholder-width-4-before-640::before,
    .placeholder-width-4-after-640::after {
        min-width: 250px;
    }

    .placeholder-width-5-640,
    .placeholder-width-5-before-640::before,
    .placeholder-width-5-after-640::after {
        min-width: 300px;
    }

    .placeholder-width-6-640,
    .placeholder-width-6-before-640::before,
    .placeholder-width-6-after-640::after {
        min-width: 350px;
    }

    .placeholder-width-7-640,
    .placeholder-width-7-before-640::before,
    .placeholder-width-7-after-640::after {
        min-width: 400px;
    }

    .placeholder-width-8-640,
    .placeholder-width-8-before-640::before,
    .placeholder-width-8-after-640::after {
        min-width: 450px;
    }

    .placeholder-width-9-640,
    .placeholder-width-9-before-640::before,
    .placeholder-width-9-after-640::after {
        min-width: 500px;
    }

    .placeholder-width-10-640,
    .placeholder-width-10-before-640::before,
    .placeholder-width-10-after-640::after {
        min-width: 550px;
    }

    .placeholder-width-11-640,
    .placeholder-width-11-before-640::before,
    .placeholder-width-11-after-640::after {
        min-width: 600px;
    }

    .placeholder-width-12-640,
    .placeholder-width-12-before-640::before,
    .placeholder-width-12-after-640::after {
        min-width: 650px;
    }

    .placeholder-width-13-640,
    .placeholder-width-13-before-640::before,
    .placeholder-width-13-after-640::after {
        min-width: 700px;
    }

    .placeholder-width-13_5-640,
    .placeholder-width-13_5-before-640::before,
    .placeholder-width-13_5-after-640::after {
        min-width: 750px;
    }

    .placeholder-width-14-640,
    .placeholder-width-14-before-640::before,
    .placeholder-width-14-after-640::after {
        min-width: 800px;
    }

    .placeholder-width-15-640,
    .placeholder-width-15-before-640::before,
    .placeholder-width-15-after-640::after {
        min-width: 850px;
    }

    .placeholder-width-16-640,
    .placeholder-width-16-before-640::before,
    .placeholder-width-16-after-640::after {
        min-width: 900px;
    }

    .placeholder-width-17-640,
    .placeholder-width-17-before-640::before,
    .placeholder-width-17-after-640::after {
        min-width: 950px;
    }

    .placeholder-width-18-640,
    .placeholder-width-18-before-640::before,
    .placeholder-width-18-after-640::after {
        min-width: 1000px;
    }

    /* Max Width */
    .placeholder-mx-width-0-640,
    .placeholder-mx-width-0-before-640::before,
    .placeholder-mx-width-0-after-640::after {
        max-width: 50px;
    }

    .placeholder-mx-width-1-640,
    .placeholder-mx-width-1-before-640::before,
    .placeholder-mx-width-1-after-640::after {
        max-width: 100px;
    }

    .placeholder-mx-width-2-640,
    .placeholder-mx-width-2-before-640::before,
    .placeholder-mx-width-2-after-640::after {
        max-width: 150px;
    }

    .placeholder-mx-width-3-640,
    .placeholder-mx-width-3-before-640::before,
    .placeholder-mx-width-3-after-640::after {
        max-width: 200px;
    }

    .placeholder-mx-width-4-640,
    .placeholder-mx-width-4-before-640::before,
    .placeholder-mx-width-4-after-640::after {
        max-width: 250px;
    }

    .placeholder-mx-width-5-640,
    .placeholder-mx-width-5-before-640::before,
    .placeholder-mx-width-5-after-640::after {
        max-width: 300px;
    }

    .placeholder-mx-width-6-640,
    .placeholder-mx-width-6-before-640::before,
    .placeholder-mx-width-6-after-640::after {
        max-width: 350px;
    }

    .placeholder-mx-width-7-640,
    .placeholder-mx-width-7-before-640::before,
    .placeholder-mx-width-7-after-640::after {
        max-width: 400px;
    }

    .placeholder-mx-width-8-640,
    .placeholder-mx-width-8-before-640::before,
    .placeholder-mx-width-8-after-640::after {
        max-width: 450px;
    }

    .placeholder-mx-width-9-640,
    .placeholder-mx-width-9-before-640::before,
    .placeholder-mx-width-9-after-640::after {
        max-width: 500px;
    }

    .placeholder-mx-width-10-640,
    .placeholder-mx-width-10-before-640::before,
    .placeholder-mx-width-10-after-640::after {
        max-width: 550px;
    }

    .placeholder-mx-width-11-640,
    .placeholder-mx-width-11-before-640::before,
    .placeholder-mx-width-11-after-640::after {
        max-width: 600px;
    }

    .placeholder-mx-width-12-640,
    .placeholder-mx-width-12-before-640::before,
    .placeholder-mx-width-12-after-640::after {
        max-width: 650px;
    }

    .placeholder-mx-width-13-640,
    .placeholder-mx-width-13-before-640::before,
    .placeholder-mx-width-13-after-640::after {
        max-width: 700px;
    }

    .placeholder-mx-width-13_5-640,
    .placeholder-mx-width-13_5-before-640::before,
    .placeholder-mx-width-13_5-after-640::after {
        max-width: 750px;
    }

    .placeholder-mx-width-14-640,
    .placeholder-mx-width-14-before-640::before,
    .placeholder-mx-width-14-after-640::after {
        max-width: 800px;
    }

    .placeholder-mx-width-15-640,
    .placeholder-mx-width-15-before-640::before,
    .placeholder-mx-width-15-after-640::after {
        max-width: 850px;
    }

    .placeholder-mx-width-16-640,
    .placeholder-mx-width-16-before-640::before,
    .placeholder-mx-width-16-after-640::after {
        max-width: 900px;
    }

    .placeholder-mx-width-17-640,
    .placeholder-mx-width-17-before-640::before,
    .placeholder-mx-width-17-after-640::after {
        max-width: 950px;
    }

    .placeholder-mx-width-18-640,
    .placeholder-mx-width-18-before-640::before,
    .placeholder-mx-width-18-after-640::after {
        max-width: 1000px;
    }

    /* fit width */
    .placeholder-width-fit-640,
    .placeholder-width-fit-before-640::before,
    .placeholder-width-fit-after-640::after {
        width: fit-content;
    }

    .placeholder-mx-width-fit-640,
    .placeholder-mx-width-fit-before-640::before,
    .placeholder-mx-width-fit-after-640::after {
        max-width: fit-content;
    }

    .placeholder-mn-width-fit-640,
    .placeholder-mn-width-fit-before-640::before,
    .placeholder-mn-width-fit-after-640::after {
        min-width: fit-content;
    }

    .placeholder-mn-width-auto-640,
    .placeholder-mn-width-auto-before-640::before,
    .placeholder-mn-width-auto-after-640::after {
        min-width: auto;
    }

    .placeholder-mx-width-auto-640,
    .placeholder-mx-width-auto-before-640::before,
    .placeholder-mx-width-auto-after-640::after {
        max-width: none;
    }

    .placeholder-width-full-640,
    .placeholder-width-full-before-640::before,
    .placeholder-width-full-after-640::after {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /*** 
    ====================================================================
        Height and width Helper Classes   
    ====================================================================

    ***/

    /* Half Height */
    .placeholder-height-half-480,
    .placeholder-height-half-480-before::before,
    .placeholder-height-half-480-after::after {
        height: 50%;
    }

    /* Min Height */
    .placeholder-height-0_5-480,
    .placeholder-height-0_5-480-before::before,
    .placeholder-height-0_5-480-after::after {
        min-height: 25px;
    }

    .placeholder-height-0-480,
    .placeholder-height-0-before-480::before,
    .placeholder-height-0-after-480::after {
        min-height: 50px;
    }

    .placeholder-height-1-480,
    .placeholder-height-1-before-480::before,
    .placeholder-height-1-after-480::after {
        min-height: 100px;
    }

    .placeholder-height-2-480,
    .placeholder-height-2-before-480::before,
    .placeholder-height-2-after-480::after {
        min-height: 150px;
    }

    .placeholder-height-3-480,
    .placeholder-height-3-before-480::before,
    .placeholder-height-3-after-480::after {
        min-height: 200px;
    }

    .placeholder-height-4-480,
    .placeholder-height-4-before-480::before,
    .placeholder-height-4-after-480::after {
        min-height: 250px;
    }

    .placeholder-height-5-480,
    .placeholder-height-5-before-480::before,
    .placeholder-height-5-after-480::after {
        min-height: 300px;
    }

    .placeholder-height-6-480,
    .placeholder-height-6-before-480::before,
    .placeholder-height-6-after-480::after {
        min-height: 350px;
    }

    .placeholder-height-7-480,
    .placeholder-height-7-before-480::before,
    .placeholder-height-7-after-480::after {
        min-height: 400px;
    }

    .placeholder-height-8-480,
    .placeholder-height-8-before-480::before,
    .placeholder-height-8-after-480::after {
        min-height: 450px;
    }

    .placeholder-height-9-480,
    .placeholder-height-9-before-480::before,
    .placeholder-height-9-after-480::after {
        min-height: 500px;
    }

    .placeholder-height-10-480,
    .placeholder-height-10-before-480::before,
    .placeholder-height-10-after-480::after {
        min-height: 550px;
    }

    .placeholder-height-11-480,
    .placeholder-height-11-before-480::before,
    .placeholder-height-11-after-480::after {
        min-height: 600px;
    }

    .placeholder-height-12-480,
    .placeholder-height-12-before-480::before,
    .placeholder-height-12-after-480::after {
        min-height: 650px;
    }

    .placeholder-height-13-480,
    .placeholder-height-13-before-480::before,
    .placeholder-height-13-after-480::after {
        min-height: 700px;
    }

    .placeholder-height-13_5-480,
    .placeholder-height-13_5-before-480::before,
    .placeholder-height-13_5-after-480::after {
        min-height: 750px;
    }

    .placeholder-height-14-480,
    .placeholder-height-14-before-480::before,
    .placeholder-height-14-after-480::after {
        min-height: 800px;
    }

    .placeholder-height-15-480,
    .placeholder-height-15-before-480::before,
    .placeholder-height-15-after-480::after {
        min-height: 850px;
    }

    .placeholder-height-16-480,
    .placeholder-height-16-before-480::before,
    .placeholder-height-16-after-480::after {
        min-height: 900px;
    }

    .placeholder-height-17-480,
    .placeholder-height-17-before-480::before,
    .placeholder-height-17-after-480::after {
        min-height: 950px;
    }

    .placeholder-height-18-480,
    .placeholder-height-18-before-480::before,
    .placeholder-height-18-after-480::after {
        min-height: 1000px;
    }

    /* Max Height */
    .placeholder-mx-height-0-480,
    .placeholder-mx-height-0-before-480::before,
    .placeholder-mx-height-0-after-480::after {
        max-height: 50px;

    }

    .placeholder-mx-height-1-480,
    .placeholder-mx-height-1-before-480::before,
    .placeholder-mx-height-1-after-480::after {
        max-height: 100px;
    }

    .placeholder-mx-height-2-480,
    .placeholder-mx-height-2-before-480::before,
    .placeholder-mx-height-2-after-480::after {
        max-height: 150px;
    }

    .placeholder-mx-height-3-480,
    .placeholder-mx-height-3-before-480::before,
    .placeholder-mx-height-3-after-480::after {
        max-height: 200px;
    }

    .placeholder-mx-height-4-480,
    .placeholder-mx-height-4-before-480::before,
    .placeholder-mx-height-4-after-480::after {
        max-height: 250px;
    }

    .placeholder-mx-height-5-480,
    .placeholder-mx-height-5-before-480::before,
    .placeholder-mx-height-5-after-480::after {
        max-height: 300px;
    }

    .placeholder-mx-height-6-480,
    .placeholder-mx-height-6-before-480::before,
    .placeholder-mx-height-6-after-480::after {
        max-height: 350px;
    }

    .placeholder-mx-height-7-480,
    .placeholder-mx-height-7-before-480::before,
    .placeholder-mx-height-7-after-480::after {
        max-height: 400px;
    }

    .placeholder-mx-height-8-480,
    .placeholder-mx-height-8-before-480::before,
    .placeholder-mx-height-8-after-480::after {
        max-height: 450px;
    }

    .placeholder-mx-height-9-480,
    .placeholder-mx-height-9-before-480::before,
    .placeholder-mx-height-9-after-480::after {
        max-height: 500px;
    }

    .placeholder-mx-height-10-480,
    .placeholder-mx-height-10-before-480::before,
    .placeholder-mx-height-10-after-480::after {
        max-height: 550px;
    }

    .placeholder-mx-height-11-480,
    .placeholder-mx-height-11-before-480::before,
    .placeholder-mx-height-11-after-480::after {
        max-height: 600px;
    }

    .placeholder-mx-height-12-480,
    .placeholder-mx-height-12-before-480::before,
    .placeholder-mx-height-12-after-480::after {
        max-height: 650px;
    }

    .placeholder-mx-height-13-480,
    .placeholder-mx-height-13-before-480::before,
    .placeholder-mx-height-13-after-480::after {
        max-height: 700px;
    }

    .placeholder-mx-height-13_5-480,
    .placeholder-mx-height-13_5-before-480::before,
    .placeholder-mx-height-13_5-after-480::after {
        max-height: 750px;
    }

    .placeholder-mx-height-14-480,
    .placeholder-mx-height-14-before-480::before,
    .placeholder-mx-height-14-after-480::after {
        max-height: 800px;
    }

    .placeholder-mx-height-15-480,
    .placeholder-mx-height-15-before-480::before,
    .placeholder-mx-height-15-after-480::after {
        max-height: 850px;
    }

    .placeholder-mx-height-16-480,
    .placeholder-mx-height-16-before-480::before,
    .placeholder-mx-height-16-after-480::after {
        max-height: 900px;
    }

    .placeholder-mx-height-17-480,
    .placeholder-mx-height-17-before-480::before,
    .placeholder-mx-height-17-after-480::after {
        max-height: 950px;
    }

    .placeholder-mx-height-18-480,
    .placeholder-mx-height-18-before-480::before,
    .placeholder-mx-height-18-after-480::after {
        max-height: 1000px;
    }

    /* fit height */
    .placeholder-height-fit-480,
    .placeholder-height-fit-before-480::before,
    .placeholder-height-fit-after-480::after {
        height: fit-content;
    }

    .placeholder-mx-height-fit-480,
    .placeholder-mx-height-fit-before-480::before,
    .placeholder-mx-height-fit-after-480::after {
        max-height: fit-content;
    }

    .placeholder-mn-height-fit-480,
    .placeholder-mn-height-fit-before-480::before,
    .placeholder-mn-height-fit-after-480::after {
        min-height: fit-content;
    }

    .placeholder-mn-height-auto-769,
    .placeholder-mn-height-auto-before-769::before,
    .placeholder-mn-height-auto-after-769::after {
        min-height: auto;
    }

    .placeholder-mx-height-auto-769,
    .placeholder-mx-height-auto-before-769::before,
    .placeholder-mx-height-auto-after-769::after {
        max-height: auto;
    }

    .placeholder-height-full-769,
    .placeholder-height-full-before-769::before,
    .placeholder-height-full-after-769::after {
        height: 100%;
    }
    /* Half width */
    .placeholder-width-half-480,
    .placeholder-width-half-480-before::before,
    .placeholder-width-half-480-after::after {
        width: 50%;
    }

    /* Min Width */
    .placeholder-width-0_5-480,
    .placeholder-width-0_5-480-before::before,
    .placeholder-width-0_5-480-after::after {
        min-width: 25px;
    }

    .placeholder-width-0-480,
    .placeholder-width-0-before-480::before,
    .placeholder-width-0-after-480::after {
        min-width: 50px;
    }

    .placeholder-width-1-480,
    .placeholder-width-1-before-480::before,
    .placeholder-width-1-after-480::after {
        min-width: 100px;
    }

    .placeholder-width-2-480,
    .placeholder-width-2-before-480::before,
    .placeholder-width-2-after-480::after {
        min-width: 150px;
    }

    .placeholder-width-3-480,
    .placeholder-width-3-before-480::before,
    .placeholder-width-3-after-480::after {
        min-width: 200px;
    }

    .placeholder-width-4-480,
    .placeholder-width-4-before-480::before,
    .placeholder-width-4-after-480::after {
        min-width: 250px;
    }

    .placeholder-width-5-480,
    .placeholder-width-5-before-480::before,
    .placeholder-width-5-after-480::after {
        min-width: 300px;
    }

    .placeholder-width-6-480,
    .placeholder-width-6-before-480::before,
    .placeholder-width-6-after-480::after {
        min-width: 350px;
    }

    .placeholder-width-7-480,
    .placeholder-width-7-before-480::before,
    .placeholder-width-7-after-480::after {
        min-width: 400px;
    }

    .placeholder-width-8-480,
    .placeholder-width-8-before-480::before,
    .placeholder-width-8-after-480::after {
        min-width: 450px;
    }

    .placeholder-width-9-480,
    .placeholder-width-9-before-480::before,
    .placeholder-width-9-after-480::after {
        min-width: 500px;
    }

    .placeholder-width-10-480,
    .placeholder-width-10-before-480::before,
    .placeholder-width-10-after-480::after {
        min-width: 550px;
    }

    .placeholder-width-11-480,
    .placeholder-width-11-before-480::before,
    .placeholder-width-11-after-480::after {
        min-width: 600px;
    }

    .placeholder-width-12-480,
    .placeholder-width-12-before-480::before,
    .placeholder-width-12-after-480::after {
        min-width: 650px;
    }

    .placeholder-width-13-480,
    .placeholder-width-13-before-480::before,
    .placeholder-width-13-after-480::after {
        min-width: 700px;
    }

    .placeholder-width-13_5-480,
    .placeholder-width-13_5-before-480::before,
    .placeholder-width-13_5-after-480::after {
        min-width: 750px;
    }

    .placeholder-width-14-480,
    .placeholder-width-14-before-480::before,
    .placeholder-width-14-after-480::after {
        min-width: 800px;
    }

    .placeholder-width-15-480,
    .placeholder-width-15-before-480::before,
    .placeholder-width-15-after-480::after {
        min-width: 850px;
    }

    .placeholder-width-16-480,
    .placeholder-width-16-before-480::before,
    .placeholder-width-16-after-480::after {
        min-width: 900px;
    }

    .placeholder-width-17-480,
    .placeholder-width-17-before-480::before,
    .placeholder-width-17-after-480::after {
        min-width: 950px;
    }

    .placeholder-width-18-480,
    .placeholder-width-18-before-480::before,
    .placeholder-width-18-after-480::after {
        min-width: 1000px;
    }

    /* Max Width */
    .placeholder-mx-width-0-480,
    .placeholder-mx-width-0-before-480::before,
    .placeholder-mx-width-0-after-480::after {
        max-width: 50px;
    }

    .placeholder-mx-width-1-480,
    .placeholder-mx-width-1-before-480::before,
    .placeholder-mx-width-1-after-480::after {
        max-width: 100px;
    }

    .placeholder-mx-width-2-480,
    .placeholder-mx-width-2-before-480::before,
    .placeholder-mx-width-2-after-480::after {
        max-width: 150px;
    }

    .placeholder-mx-width-3-480,
    .placeholder-mx-width-3-before-480::before,
    .placeholder-mx-width-3-after-480::after {
        max-width: 200px;
    }

    .placeholder-mx-width-4-480,
    .placeholder-mx-width-4-before-480::before,
    .placeholder-mx-width-4-after-480::after {
        max-width: 250px;
    }

    .placeholder-mx-width-5-480,
    .placeholder-mx-width-5-before-480::before,
    .placeholder-mx-width-5-after-480::after {
        max-width: 300px;
    }

    .placeholder-mx-width-6-480,
    .placeholder-mx-width-6-before-480::before,
    .placeholder-mx-width-6-after-480::after {
        max-width: 350px;
    }

    .placeholder-mx-width-7-480,
    .placeholder-mx-width-7-before-480::before,
    .placeholder-mx-width-7-after-480::after {
        max-width: 400px;
    }

    .placeholder-mx-width-8-480,
    .placeholder-mx-width-8-before-480::before,
    .placeholder-mx-width-8-after-480::after {
        max-width: 450px;
    }

    .placeholder-mx-width-9-480,
    .placeholder-mx-width-9-before-480::before,
    .placeholder-mx-width-9-after-480::after {
        max-width: 500px;
    }

    .placeholder-mx-width-10-480,
    .placeholder-mx-width-10-before-480::before,
    .placeholder-mx-width-10-after-480::after {
        max-width: 550px;
    }

    .placeholder-mx-width-11-480,
    .placeholder-mx-width-11-before-480::before,
    .placeholder-mx-width-11-after-480::after {
        max-width: 600px;
    }

    .placeholder-mx-width-12-480,
    .placeholder-mx-width-12-before-480::before,
    .placeholder-mx-width-12-after-480::after {
        max-width: 650px;
    }

    .placeholder-mx-width-13-480,
    .placeholder-mx-width-13-before-480::before,
    .placeholder-mx-width-13-after-480::after {
        max-width: 700px;
    }

    .placeholder-mx-width-13_5-480,
    .placeholder-mx-width-13_5-before-480::before,
    .placeholder-mx-width-13_5-after-480::after {
        max-width: 750px;
    }

    .placeholder-mx-width-14-480,
    .placeholder-mx-width-14-before-480::before,
    .placeholder-mx-width-14-after-480::after {
        max-width: 800px;
    }

    .placeholder-mx-width-15-480,
    .placeholder-mx-width-15-before-480::before,
    .placeholder-mx-width-15-after-480::after {
        max-width: 850px;
    }

    .placeholder-mx-width-16-480,
    .placeholder-mx-width-16-before-480::before,
    .placeholder-mx-width-16-after-480::after {
        max-width: 900px;
    }

    .placeholder-mx-width-17-480,
    .placeholder-mx-width-17-before-480::before,
    .placeholder-mx-width-17-after-480::after {
        max-width: 950px;
    }

    .placeholder-mx-width-18-480,
    .placeholder-mx-width-18-before-480::before,
    .placeholder-mx-width-18-after-480::after {
        max-width: 1000px;
    }

    /* fit width */
    .placeholder-width-fit-480,
    .placeholder-width-fit-before-480::before,
    .placeholder-width-fit-after-480::after {
        width: fit-content;
    }

    .placeholder-mx-width-fit-480,
    .placeholder-mx-width-fit-before-480::before,
    .placeholder-mx-width-fit-after-480::after {
        max-width: fit-content;
    }

    .placeholder-mn-width-fit-480,
    .placeholder-mn-width-fit-before-480::before,
    .placeholder-mn-width-fit-after-480::after {
        min-width: fit-content;
    }

    .placeholder-mn-width-auto-480,
    .placeholder-mn-width-auto-before-480::before,
    .placeholder-mn-width-auto-after-480::after {
        min-width: auto;
    }

    .placeholder-mx-width-auto-480,
    .placeholder-mx-width-auto-before-480::before,
    .placeholder-mx-width-auto-after-480::after {
        max-width: none;
    }

    .placeholder-width-full-480,
    .placeholder-width-full-before-480::before,
    .placeholder-width-full-after-480::after {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    /*** 
    ====================================================================
        Height and width Helper Classes   
    ====================================================================

    ***/

    /* Half Height */
    .placeholder-height-half-360,
    .placeholder-height-half-360-before::before,
    .placeholder-height-half-360-after::after {
        height: 50%;
    }
    /* Min Height */
    .placeholder-height-0_5-360,
    .placeholder-height-0_5-360-before::before,
    .placeholder-height-0_5-360-after::after {
        min-height: 25px;
    }

    .placeholder-height-0-360,
    .placeholder-height-0-before-360::before,
    .placeholder-height-0-after-360::after {
        min-height: 50px;
    }

    .placeholder-height-1-360,
    .placeholder-height-1-before-360::before,
    .placeholder-height-1-after-360::after {
        min-height: 100px;
    }

    .placeholder-height-2-360,
    .placeholder-height-2-before-360::before,
    .placeholder-height-2-after-360::after {
        min-height: 150px;
    }

    .placeholder-height-3-360,
    .placeholder-height-3-before-360::before,
    .placeholder-height-3-after-360::after {
        min-height: 200px;
    }

    .placeholder-height-4-360,
    .placeholder-height-4-before-360::before,
    .placeholder-height-4-after-360::after {
        min-height: 250px;
    }

    .placeholder-height-5-360,
    .placeholder-height-5-before-360::before,
    .placeholder-height-5-after-360::after {
        min-height: 300px;
    }

    .placeholder-height-6-360,
    .placeholder-height-6-before-360::before,
    .placeholder-height-6-after-360::after {
        min-height: 350px;
    }

    .placeholder-height-7-360,
    .placeholder-height-7-before-360::before,
    .placeholder-height-7-after-360::after {
        min-height: 400px;
    }

    .placeholder-height-8-360,
    .placeholder-height-8-before-360::before,
    .placeholder-height-8-after-360::after {
        min-height: 450px;
    }

    .placeholder-height-9-360,
    .placeholder-height-9-before-360::before,
    .placeholder-height-9-after-360::after {
        min-height: 500px;
    }

    .placeholder-height-10-360,
    .placeholder-height-10-before-360::before,
    .placeholder-height-10-after-360::after {
        min-height: 550px;
    }

    .placeholder-height-11-360,
    .placeholder-height-11-before-360::before,
    .placeholder-height-11-after-360::after {
        min-height: 600px;
    }

    .placeholder-height-12-360,
    .placeholder-height-12-before-360::before,
    .placeholder-height-12-after-360::after {
        min-height: 650px;
    }

    .placeholder-height-13-360,
    .placeholder-height-13-before-360::before,
    .placeholder-height-13-after-360::after {
        min-height: 700px;
    }

    .placeholder-height-13_5-360,
    .placeholder-height-13_5-before-360::before,
    .placeholder-height-13_5-after-360::after {
        min-height: 750px;
    }

    .placeholder-height-14-360,
    .placeholder-height-14-before-360::before,
    .placeholder-height-14-after-360::after {
        min-height: 800px;
    }

    .placeholder-height-15-360,
    .placeholder-height-15-before-360::before,
    .placeholder-height-15-after-360::after {
        min-height: 850px;
    }

    .placeholder-height-16-360,
    .placeholder-height-16-before-360::before,
    .placeholder-height-16-after-360::after {
        min-height: 900px;
    }

    .placeholder-height-17-360,
    .placeholder-height-17-before-360::before,
    .placeholder-height-17-after-360::after {
        min-height: 950px;
    }

    .placeholder-height-18-360,
    .placeholder-height-18-before-360::before,
    .placeholder-height-18-after-360::after {
        min-height: 1000px;
    }

    /* Max Height */
    .placeholder-mx-height-0-360,
    .placeholder-mx-height-0-before-360::before,
    .placeholder-mx-height-0-after-360::after {
        max-height: 50px;

    }

    .placeholder-mx-height-1-360,
    .placeholder-mx-height-1-before-360::before,
    .placeholder-mx-height-1-after-360::after {
        max-height: 100px;
    }

    .placeholder-mx-height-2-360,
    .placeholder-mx-height-2-before-360::before,
    .placeholder-mx-height-2-after-360::after {
        max-height: 150px;
    }

    .placeholder-mx-height-3-360,
    .placeholder-mx-height-3-before-360::before,
    .placeholder-mx-height-3-after-360::after {
        max-height: 200px;
    }

    .placeholder-mx-height-4-360,
    .placeholder-mx-height-4-before-360::before,
    .placeholder-mx-height-4-after-360::after {
        max-height: 250px;
    }

    .placeholder-mx-height-5-360,
    .placeholder-mx-height-5-before-360::before,
    .placeholder-mx-height-5-after-360::after {
        max-height: 300px;
    }

    .placeholder-mx-height-6-360,
    .placeholder-mx-height-6-before-360::before,
    .placeholder-mx-height-6-after-360::after {
        max-height: 350px;
    }

    .placeholder-mx-height-7-360,
    .placeholder-mx-height-7-before-360::before,
    .placeholder-mx-height-7-after-360::after {
        max-height: 400px;
    }

    .placeholder-mx-height-8-360,
    .placeholder-mx-height-8-before-360::before,
    .placeholder-mx-height-8-after-360::after {
        max-height: 450px;
    }

    .placeholder-mx-height-9-360,
    .placeholder-mx-height-9-before-360::before,
    .placeholder-mx-height-9-after-360::after {
        max-height: 500px;
    }

    .placeholder-mx-height-10-360,
    .placeholder-mx-height-10-before-360::before,
    .placeholder-mx-height-10-after-360::after {
        max-height: 550px;
    }

    .placeholder-mx-height-11-360,
    .placeholder-mx-height-11-before-360::before,
    .placeholder-mx-height-11-after-360::after {
        max-height: 600px;
    }

    .placeholder-mx-height-12-360,
    .placeholder-mx-height-12-before-360::before,
    .placeholder-mx-height-12-after-360::after {
        max-height: 650px;
    }

    .placeholder-mx-height-13-360,
    .placeholder-mx-height-13-before-360::before,
    .placeholder-mx-height-13-after-360::after {
        max-height: 700px;
    }

    .placeholder-mx-height-13_5-360,
    .placeholder-mx-height-13_5-before-360::before,
    .placeholder-mx-height-13_5-after-360::after {
        max-height: 750px;
    }

    .placeholder-mx-height-14-360,
    .placeholder-mx-height-14-before-360::before,
    .placeholder-mx-height-14-after-360::after {
        max-height: 800px;
    }

    .placeholder-mx-height-15-360,
    .placeholder-mx-height-15-before-360::before,
    .placeholder-mx-height-15-after-360::after {
        max-height: 850px;
    }

    .placeholder-mx-height-16-360,
    .placeholder-mx-height-16-before-360::before,
    .placeholder-mx-height-16-after-360::after {
        max-height: 900px;
    }

    .placeholder-mx-height-17-360,
    .placeholder-mx-height-17-before-360::before,
    .placeholder-mx-height-17-after-360::after {
        max-height: 950px;
    }

    .placeholder-mx-height-18-360,
    .placeholder-mx-height-18-before-360::before,
    .placeholder-mx-height-18-after-360::after {
        max-height: 1000px;
    }

    /* fit height */
    .placeholder-height-fit-360,
    .placeholder-height-fit-before-360::before,
    .placeholder-height-fit-after-360::after {
        height: fit-content;
    }

    .placeholder-mx-height-fit-360,
    .placeholder-mx-height-fit-before-360::before,
    .placeholder-mx-height-fit-after-360::after {
        max-height: fit-content;
    }

    .placeholder-mn-height-fit-360,
    .placeholder-mn-height-fit-before-360::before,
    .placeholder-mn-height-fit-after-360::after {
        min-height: fit-content;
    }

    .placeholder-mn-height-auto-360,
    .placeholder-mn-height-auto-before-360::before,
    .placeholder-mn-height-auto-after-360::after {
        min-height: auto;
    }

    .placeholder-mx-height-auto-360,
    .placeholder-mx-height-auto-before-360::before,
    .placeholder-mx-height-auto-after-360::after {
    }

    .placeholder-height-full-360,
    .placeholder-height-full-before-360::before,
    .placeholder-height-full-after-360::after {
        height: 100%;
    }

    /* Half width */
    .placeholder-width-half-360,
    .placeholder-width-half-360-before::before,
    .placeholder-width-half-360-after::after {
        width: 50%;
    }

    /* Min Width */
    .placeholder-width-0_5-360,
    .placeholder-width-0_5-360-before::before,
    .placeholder-width-0_5-360-after::after {
        min-width: 25px;
    }

    .placeholder-width-0-360,
    .placeholder-width-0-before-360::before,
    .placeholder-width-0-after-360::after {
        min-width: 50px;
    }

    .placeholder-width-1-360,
    .placeholder-width-1-before-360::before,
    .placeholder-width-1-after-360::after {
        min-width: 100px;
    }

    .placeholder-width-2-360,
    .placeholder-width-2-before-360::before,
    .placeholder-width-2-after-360::after {
        min-width: 150px;
    }

    .placeholder-width-3-360,
    .placeholder-width-3-before-360::before,
    .placeholder-width-3-after-360::after {
        min-width: 200px;
    }

    .placeholder-width-4-360,
    .placeholder-width-4-before-360::before,
    .placeholder-width-4-after-360::after {
        min-width: 250px;
    }

    .placeholder-width-5-360,
    .placeholder-width-5-before-360::before,
    .placeholder-width-5-after-360::after {
        min-width: 300px;
    }

    .placeholder-width-6-360,
    .placeholder-width-6-before-360::before,
    .placeholder-width-6-after-360::after {
        min-width: 350px;
    }

    .placeholder-width-7-360,
    .placeholder-width-7-before-360::before,
    .placeholder-width-7-after-360::after {
        min-width: 400px;
    }

    .placeholder-width-8-360,
    .placeholder-width-8-before-360::before,
    .placeholder-width-8-after-360::after {
        min-width: 450px;
    }

    .placeholder-width-9-360,
    .placeholder-width-9-before-360::before,
    .placeholder-width-9-after-360::after {
        min-width: 500px;
    }

    .placeholder-width-10-360,
    .placeholder-width-10-before-360::before,
    .placeholder-width-10-after-360::after {
        min-width: 550px;
    }

    .placeholder-width-11-360,
    .placeholder-width-11-before-360::before,
    .placeholder-width-11-after-360::after {
        min-width: 600px;
    }

    .placeholder-width-12-360,
    .placeholder-width-12-before-360::before,
    .placeholder-width-12-after-360::after {
        min-width: 650px;
    }

    .placeholder-width-13-360,
    .placeholder-width-13-before-360::before,
    .placeholder-width-13-after-360::after {
        min-width: 700px;
    }

    .placeholder-width-13_5-360,
    .placeholder-width-13_5-before-360::before,
    .placeholder-width-13_5-after-360::after {
        min-width: 750px;
    }

    .placeholder-width-14-360,
    .placeholder-width-14-before-360::before,
    .placeholder-width-14-after-360::after {
        min-width: 800px;
    }

    .placeholder-width-15-360,
    .placeholder-width-15-before-360::before,
    .placeholder-width-15-after-360::after {
        min-width: 850px;
    }

    .placeholder-width-16-360,
    .placeholder-width-16-before-360::before,
    .placeholder-width-16-after-360::after {
        min-width: 900px;
    }

    .placeholder-width-17-360,
    .placeholder-width-17-before-360::before,
    .placeholder-width-17-after-360::after {
        min-width: 950px;
    }

    .placeholder-width-18-360,
    .placeholder-width-18-before-360::before,
    .placeholder-width-18-after-360::after {
        min-width: 1000px;
    }

    /* Max Width */
    .placeholder-mx-width-0-360,
    .placeholder-mx-width-0-before-360::before,
    .placeholder-mx-width-0-after-360::after {
        max-width: 50px;
    }

    .placeholder-mx-width-1-360,
    .placeholder-mx-width-1-before-360::before,
    .placeholder-mx-width-1-after-360::after {
        max-width: 100px;
    }

    .placeholder-mx-width-2-360,
    .placeholder-mx-width-2-before-360::before,
    .placeholder-mx-width-2-after-360::after {
        max-width: 150px;
    }

    .placeholder-mx-width-3-360,
    .placeholder-mx-width-3-before-360::before,
    .placeholder-mx-width-3-after-360::after {
        max-width: 200px;
    }

    .placeholder-mx-width-4-360,
    .placeholder-mx-width-4-before-360::before,
    .placeholder-mx-width-4-after-360::after {
        max-width: 250px;
    }

    .placeholder-mx-width-5-360,
    .placeholder-mx-width-5-before-360::before,
    .placeholder-mx-width-5-after-360::after {
        max-width: 300px;
    }

    .placeholder-mx-width-6-360,
    .placeholder-mx-width-6-before-360::before,
    .placeholder-mx-width-6-after-360::after {
        max-width: 350px;
    }

    .placeholder-mx-width-7-360,
    .placeholder-mx-width-7-before-360::before,
    .placeholder-mx-width-7-after-360::after {
        max-width: 400px;
    }

    .placeholder-mx-width-8-360,
    .placeholder-mx-width-8-before-360::before,
    .placeholder-mx-width-8-after-360::after {
        max-width: 450px;
    }

    .placeholder-mx-width-9-360,
    .placeholder-mx-width-9-before-360::before,
    .placeholder-mx-width-9-after-360::after {
        max-width: 500px;
    }

    .placeholder-mx-width-10-360,
    .placeholder-mx-width-10-before-360::before,
    .placeholder-mx-width-10-after-360::after {
        max-width: 550px;
    }

    .placeholder-mx-width-11-360,
    .placeholder-mx-width-11-before-360::before,
    .placeholder-mx-width-11-after-360::after {
        max-width: 600px;
    }

    .placeholder-mx-width-12-360,
    .placeholder-mx-width-12-before-360::before,
    .placeholder-mx-width-12-after-360::after {
        max-width: 650px;
    }

    .placeholder-mx-width-13-360,
    .placeholder-mx-width-13-before-360::before,
    .placeholder-mx-width-13-after-360::after {
        max-width: 700px;
    }

    .placeholder-mx-width-13_5-360,
    .placeholder-mx-width-13_5-before-360::before,
    .placeholder-mx-width-13_5-after-360::after {
        max-width: 750px;
    }

    .placeholder-mx-width-14-360,
    .placeholder-mx-width-14-before-360::before,
    .placeholder-mx-width-14-after-360::after {
        max-width: 800px;
    }

    .placeholder-mx-width-15-360,
    .placeholder-mx-width-15-before-360::before,
    .placeholder-mx-width-15-after-360::after {
        max-width: 850px;
    }

    .placeholder-mx-width-16-360,
    .placeholder-mx-width-16-before-360::before,
    .placeholder-mx-width-16-after-360::after {
        max-width: 900px;
    }

    .placeholder-mx-width-17-360,
    .placeholder-mx-width-17-before-360::before,
    .placeholder-mx-width-17-after-360::after {
        max-width: 950px;
    }

    .placeholder-mx-width-18-360,
    .placeholder-mx-width-18-before-360::before,
    .placeholder-mx-width-18-after-360::after {
        max-width: 1000px;
    }

    /* fit width */
    .placeholder-width-fit-360,
    .placeholder-width-fit-before-360::before,
    .placeholder-width-fit-after-360::after {
        width: fit-content;
    }

    .placeholder-mx-width-fit-360,
    .placeholder-mx-width-fit-before-360::before,
    .placeholder-mx-width-fit-after-360::after {
        max-width: fit-content;
    }

    .placeholder-mn-width-fit-360,
    .placeholder-mn-width-fit-before-360::before,
    .placeholder-mn-width-fit-after-360::after {
        min-width: fit-content;
    }

    .placeholder-mn-width-auto-360,
    .placeholder-mn-width-auto-before-360::before,
    .placeholder-mn-width-auto-after-360::after {
        min-width: auto;
    }

    .placeholder-mx-width-auto-360,
    .placeholder-mx-width-auto-before-360::before,
    .placeholder-mx-width-auto-after-360::after {
        max-width: auto;
    }

    .placeholder-width-full-360,
    .placeholder-width-full-before-360::before,
    .placeholder-width-full-after-360::after {
        width: 100%;
    }
}

@media (max-width: 240px) {

}

@media (max-height: 360px) {

}