/*---------------XS------------------*/
/*------------576px<-----------------*/
/*-----------------------------------*/

/*|||---MARGINS---|||*/

/*---||-margin-top-||---*/
.mt0 {
    margin-top: 0px;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mt60 {
    margin-top: 60px;
}

.mt70 {
    margin-top: 70px;
}

.mt80 {
    margin-top: 80px;
}

.mt90 {
    margin-top: 90px;
}

.mt100 {
    margin-top: 100px;
}

/*---||-END margin-top-||---*/
/*---||-margin-right-||---*/
.mr0 {
    margin-right: 0px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

.mr40 {
    margin-right: 40px;
}

.mr50 {
    margin-right: 50px;
}

.mr60 {
    margin-right: 60px;
}

.mr70 {
    margin-right: 70px;
}

.mr80 {
    margin-right: 80px;
}

.mr90 {
    margin-right: 90px;
}

.mr100 {
    margin-right: 100px;
}

/*---||-END margin-right-||---*/
/*---||-margin-bottom-||---*/

.mb0 {
    margin-bottom: 0px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb60 {
    margin-bottom: 60px;
}

.mb70 {
    margin-bottom: 70px;
}

.mb80 {
    margin-bottom: 80px;
}

.mb90 {
    margin-bottom: 90px;
}

.mb100 {
    margin-bottom: 100px;
}

/*---||-END margin-bottom-||---*/

/*---||-margin-left-||---*/
.ml0 {
    margin-left: 0px;
}

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.ml50 {
    margin-left: 50px;
}

.ml60 {
    margin-left: 60px;
}

.ml70 {
    margin-left: 70px;
}

.ml80 {
    margin-left: 80px;
}

.ml90 {
    margin-left: 90px;
}

.ml100 {
    margin-left: 100px;
}

/*---||-END margin-left-||---*/


/*---||-margin-auto-||---*/
.m0a {
    margin: 0 auto;
}

/*---||-END margin-auto-||---*/



/*|||---END-MARGINS---|||*/


/*|||---PADDINGS---|||*/
/*---||-padding-top-||---*/
.pt0 {
    padding-top: 0px;
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pt30 {
    padding-top: 30px;
}

.pt40 {
    padding-top: 40px;
}

.pt50 {
    padding-top: 50px;
}

.pt60 {
    padding-top: 60px;
}

.pt70 {
    padding-top: 70px;
}

.pt80 {
    padding-top: 80px;
}

.pt90 {
    padding-top: 90px;
}

.pt100 {
    padding-top: 100px;
}

/*---||-END padding-top-||---*/

/*---||-padding-right-||---*/
.pr0 {
    padding-right: 0px;
}

.pr10 {
    padding-right: 10px;
}

.pr20 {
    padding-right: 20px;
}

.pr30 {
    padding-right: 30px;
}

.pr40 {
    padding-right: 40px;
}

.pr50 {
    padding-right: 50px;
}

.pr60 {
    padding-right: 60px;
}

.pr70 {
    padding-right: 70px;
}

.pr80 {
    padding-right: 80px;
}

.pr90 {
    padding-right: 90px;
}

.pr100 {
    padding-right: 100px;
}

/*---||-END padding-right-||---*/

/*---||-padding-bottom-||---*/
.pb0 {
    padding-bottom: 0px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pb60 {
    padding-bottom: 60px;
}

.pb70 {
    padding-bottom: 70px;
}

.pb80 {
    padding-bottom: 80px;
}

.pb90 {
    padding-bottom: 90px;
}

.pb100 {
    padding-bottom: 100px;
}

/*---||-END padding-bottom-||---*/

/*---||-padding-left-||---*/
.pl0 {
    padding-left: 0px;
}

.pl10 {
    padding-left: 10px;
}

.pl20 {
    padding-left: 20px;
}

.pl30 {
    padding-left: 30px;
}

.pl40 {
    padding-left: 40px;
}

.pl50 {
    padding-left: 50px;
}

.pl60 {
    padding-left: 60px;
}

.pl70 {
    padding-left: 70px;
}

.pl80 {
    padding-left: 80px;
}

.pl90 {
    padding-left: 90px;
}

.pl100 {
    padding-left: 100px;
}

/*---||-END padding-left-||---*/
/*|||---END-PADDINGS---|||*/

/*|||---WIDTH---|||*/
.w10p {
    width: 10%;
}

.w12p {
    width: 12.5%;
}

.w16p {
    width: 16.66666%;
}

.w20p {
    width: 20%;
}

.w25p {
    width: 25%;
}

.w30p {
    width: 30%;
}

.w33p {
    width: 33.33333%;
}

.w40p {
    width: 40%;
}

.w50p {
    width: 50%;
}

.w60p {
    width: 60%;
}

.w70p {
    width: 70%;
}

.w80p {
    width: 80%;
}

.w90p {
    width: 90%;
}

.w100p {
    width: 100%;
}

/*|||---END-WIDTH---|||*/

/*|||---HEIGHT---|||*/
.h10p {
    height: 10%;
}

.h12p {
    height: 12.5%;
}

.h16p {
    height: 16.66666%;
}

.h20p {
    height: 20%;
}

.h25p {
    height: 25%;
}

.h30p {
    height: 30%;
}

.h33p {
    height: 33.33333%;
}

.h40p {
    height: 40%;
}

.h50p {
    height: 50%;
}

.h60p {
    height: 60%;
}

.h70p {
    height: 70%;
}

.h80p {
    height: 80%;
}

.h90p {
    height: 90%;
}

.h100p {
    height: 100%;
}

/*|||---END-HEIGHT---|||*/

/*|||---POSITION---|||*/
.posr {
    position: relative;
}

.posa {
    position: absolute;
}

.posf {
    position: fixed;
}

/*|||---END-POSITION---|||*/


/*|||---DISPLAY---|||*/
.db {
    display: block;
}

.dib {
    display: inline-block;
}

.di {
    display: inline;

}

.df {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

/*|||---END-DISPLAY---|||*/



/*|||---TEXT-ALIGN---|||*/
.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

/*|||---END-TEXT-ALIGN---|||*/

/*|||---FLEXBOX---|||*/

.flex-dir-row {
    flex-direction: row;
}

.flex-dir-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-jc-end {
    justify-content: flex-end;
}

.flex-jc-center {
    justify-content: center;
}

.flex-jc-space-around {
    justify-content: space-around;
}

.flex-jc-space-between {
    justify-content: space-between;
}

.flex-jc-space-evenly {
    justify-content: space-evenly;
}

.flex-ai-end {
    align-items: flex-end;
}

.flex-ai-center {
    align-items: center;

}



/*|||---END-FLEXBOX---|||*/





/*-------------Small(sm)-------------*/
/*------------576px-768px------------*/
/*-----------------------------------*/
@media (min-width: 576px) {
    body {
        background: #d33636;
    }

    /*|||---MARGINS---|||*/

    /*---||-margin-top-||---*/
    .mt0-sm {
        margin-top: 0px;
    }

    .mt10-sm {
        margin-top: 10px;
    }

    .mt20-sm {
        margin-top: 20px;
    }

    .mt30-sm {
        margin-top: 30px;
    }

    .mt40-sm {
        margin-top: 40px;
    }

    .mt50-sm {
        margin-top: 50px;
    }

    .mt60-sm {
        margin-top: 60px;
    }

    .mt70-sm {
        margin-top: 70px;
    }

    .mt80-sm {
        margin-top: 80px;
    }

    .mt90-sm {
        margin-top: 90px;
    }

    .mt100-sm {
        margin-top: 100px;
    }

    /*---||-END margin-top-||---*/

    /*---||-margin-right-||---*/

    .mr0-sm {
        margin-right: 0px;
    }

    .mr10-sm {
        margin-right: 10px;
    }

    .mr20-sm {
        margin-right: 20px;
    }

    .mr30-sm {
        margin-right: 30px;
    }

    .mr40-sm {
        margin-right: 40px;
    }

    .mr50-sm {
        margin-right: 50px;
    }

    .mr60-sm {
        margin-right: 60px;
    }

    .mr70-sm {
        margin-right: 70px;
    }

    .mr80-sm {
        margin-right: 80px;
    }

    .mr90-sm {
        margin-right: 90px;
    }

    .mr100-sm {
        margin-right: 100px;
    }

    /*---||-END margin-right-||---*/

    /*---||-margin-bottom-||---*/
    .mb0-sm {
        margin-bottom: 0px;
    }

    .mb10-sm {
        margin-bottom: 10px;
    }

    .mb20-sm {
        margin-bottom: 20px;
    }

    .mb30-sm {
        margin-bottom: 30px;
    }

    .mb40-sm {
        margin-bottom: 40px;
    }

    .mb50-sm {
        margin-bottom: 50px;
    }

    .mb60-sm {
        margin-bottom: 60px;
    }

    .mb70-sm {
        margin-bottom: 70px;
    }

    .mb80-sm {
        margin-bottom: 80px;
    }

    .mb90-sm {
        margin-bottom: 90px;
    }

    .mb100-sm {
        margin-bottom: 100px;
    }

    /*---||-END margin-bottom-||---*/

    /*---||-margin-left-||---*/
    .ml0-sm {
        margin-left: 0px;
    }

    .ml10-sm {
        margin-left: 10px;
    }

    .ml20-sm {
        margin-left: 20px;
    }

    .ml30-sm {
        margin-left: 30px;
    }

    .ml40-sm {
        margin-left: 40px;
    }

    .ml50-sm {
        margin-left: 50px;
    }

    .ml60-sm {
        margin-left: 60px;
    }

    .ml70-sm {
        margin-left: 70px;
    }

    .ml80-sm {
        margin-left: 80px;
    }

    .ml90-sm {
        margin-left: 90px;
    }

    .ml100-sm {
        margin-left: 100px;
    }

    /*---||-END margin-left-||---*/

    /*|||---END-MARGINS---|||*/

    /*|||---PADDINGS---|||*/
    /*---||-padding-top-||---*/
    .pt0-sm {
        padding-top: 0px;
    }

    .pt10-sm {
        padding-top: 10px;
    }

    .pt20-sm {
        padding-top: 20px;
    }

    .pt30-sm {
        padding-top: 30px;
    }

    .pt40-sm {
        padding-top: 40px;
    }

    .pt50-sm {
        padding-top: 50px;
    }

    .pt60-sm {
        padding-top: 60px;
    }

    .pt70-sm {
        padding-top: 70px;
    }

    .pt80-sm {
        padding-top: 80px;
    }

    .pt90-sm {
        padding-top: 90px;
    }

    .pt100-sm {
        padding-top: 100px;
    }

    /*---||-END padding-top-||---*/

    /*---||-padding-right-||---*/
    .pr0-sm {
        padding-right: 0px;
    }

    .pr10-sm {
        padding-right: 10px;
    }

    .pr20-sm {
        padding-right: 20px;
    }

    .pr30-sm {
        padding-right: 30px;
    }

    .pr40-sm {
        padding-right: 40px;
    }

    .pr50-sm {
        padding-right: 50px;
    }

    .pr60-sm {
        padding-right: 60px;
    }

    .pr70-sm {
        padding-right: 70px;
    }

    .pr80-sm {
        padding-right: 80px;
    }

    .pr90-sm {
        padding-right: 90px;
    }

    .pr100-sm {
        padding-right: 100px;
    }

    /*---||-END padding-right-||---*/

    /*---||-padding-bottom-||---*/
    .pb0-sm {
        padding-bottom: 0px;
    }

    .pb10-sm {
        padding-bottom: 10px;
    }

    .pb20-sm {
        padding-bottom: 20px;
    }

    .pb30-sm {
        padding-bottom: 30px;
    }

    .pb40-sm {
        padding-bottom: 40px;
    }

    .pb50-sm {
        padding-bottom: 50px;
    }

    .pb60-sm {
        padding-bottom: 60px;
    }

    .pb70-sm {
        padding-bottom: 70px;
    }

    .pb80-sm {
        padding-bottom: 80px;
    }

    .pb90-sm {
        padding-bottom: 90px;
    }

    .pb100-sm {
        padding-bottom: 100px;
    }

    /*---||-END padding-bottom-||---*/

    /*---||-padding-left-||---*/
    .pl0-sm {
        padding-left: 0px;
    }

    .pl10-sm {
        padding-left: 10px;
    }

    .pl20-sm {
        padding-left: 20px;
    }

    .pl30-sm {
        padding-left: 30px;
    }

    .pl40-sm {
        padding-left: 40px;
    }

    .pl50-sm {
        padding-left: 50px;
    }

    .pl60-sm {
        padding-left: 60px;
    }

    .pl70-sm {
        padding-left: 70px;
    }

    .pl80-sm {
        padding-left: 80px;
    }

    .pl90-sm {
        padding-left: 90px;
    }

    .pl100-sm {
        padding-left: 100px;
    }

    /*---||-END padding-left-||---*/
    /*|||---END-PADDINGS---|||*/

    /*|||---WIDTH---|||*/
    .w10p-sm {
        width: 10%;
    }

    .w12p-sm {
        width: 12.5%;
    }

    .w16p-sm {
        width: 16.66666%;
    }

    .w20p-sm {
        width: 20%;
    }

    .w25p-sm {
        width: 25%;
    }

    .w30p-sm {
        width: 30%;
    }

    .w33p-sm {
        width: 33.33333%;
    }

    .w40p-sm {
        width: 40%;
    }

    .w50p-sm {
        width: 50%;
    }

    .w60p-sm {
        width: 60%;
    }

    .w70p-sm {
        width: 70%;
    }

    .w80p-sm {
        width: 80%;
    }

    .w90p-sm {
        width: 90%;
    }

    .w100p-sm {
        width: 100%;
    }

    /*|||---END-WIDTH---|||*/
    /*|||---HEIGHT---|||*/
    .h10p-sm {
        height: 10%;
    }

    .h12p-sm {
        height: 12.5%;
    }

    .h16p-sm {
        height: 16.66666%;
    }

    .h20p-sm {
        height: 20%;
    }

    .h25p-sm {
        height: 25%;
    }

    .h30p-sm {
        height: 30%;
    }

    .h33p-sm {
        height: 33.33333%;
    }

    .h40p-sm {
        height: 40%;
    }

    .h50p-sm {
        height: 50%;
    }

    .h60p-sm {
        height: 60%;
    }

    .h70p-sm {
        height: 70%;
    }

    .h80p-sm {
        height: 80%;
    }

    .h90p-sm {
        height: 90%;
    }

    .h100p-sm {
        height: 100%;
    }

    /*|||---END-HEIGHT---|||*/

    /*|||---FLEXBOX---|||*/

    .flex-dir-row-sm {
        flex-direction: row;
    }

    .flex-dir-col-sm {
        flex-direction: column;
    }

    .flex-wrap-sm {
        flex-wrap: wrap;
    }

    .flex-jc-end-sm {
        justify-content: flex-end;
    }

    .flex-jc-center-sm {
        justify-content: center;
    }

    .flex-jc-space-around-sm {
        justify-content: space-around;
    }

    .flex-jc-space-between-sm {
        justify-content: space-between;
    }

    .flex-jc-space-evenly-sm {
        justify-content: space-evenly;
    }

    .flex-ai-end-sm {
        align-items: flex-end;
    }

    .flex-ai-center-sm {
        align-items: center;

    }



    /*|||---END-FLEXBOX---|||*/

}

/*-------------Medium(md)------------*/
/*------------768px-992px------------*/
/*-----------------------------------*/
@media (min-width: 768px) {
    body {
        background: #d3c136;
    }

    /*|||---MARGINS---|||*/
    /*---||-margin-top-||---*/
    .mt0-md {
        margin-top: 0px;
    }

    .mt10-md {
        margin-top: 10px;
    }

    .mt20-md {
        margin-top: 20px;
    }

    .mt30-md {
        margin-top: 30px;
    }

    .mt40-md {
        margin-top: 40px;
    }

    .mt50-md {
        margin-top: 50px;
    }

    .mt60-md {
        margin-top: 60px;
    }

    .mt70-md {
        margin-top: 70px;
    }

    .mt80-md {
        margin-top: 80px;
    }

    .mt90-md {
        margin-top: 90px;
    }

    .mt100-md {
        margin-top: 100px;
    }

    /*---||-END margin-top-||---*/
    /*---||-margin-right-||---*/
    .mr0-md {
        margin-right: 0px;
    }

    .mr10-md {
        margin-right: 10px;
    }

    .mr20-md {
        margin-right: 20px;
    }

    .mr30-md {
        margin-right: 30px;
    }

    .mr40-md {
        margin-right: 40px;
    }

    .mr50-md {
        margin-right: 50px;
    }

    .mr60-md {
        margin-right: 60px;
    }

    .mr70-md {
        margin-right: 70px;
    }

    .mr80-md {
        margin-right: 80px;
    }

    .mr90-md {
        margin-right: 90px;
    }

    .mr100-md {
        margin-right: 100px;
    }

    /*---||-END margin-right-||---*/
    /*---||-margin-bottom-||---*/
    .mb0-md {
        margin-bottom: 0px;
    }

    .mb10-md {
        margin-bottom: 10px;
    }

    .mb20-md {
        margin-bottom: 20px;
    }

    .mb30-md {
        margin-bottom: 30px;
    }

    .mb40-md {
        margin-bottom: 40px;
    }

    .mb50-md {
        margin-bottom: 50px;
    }

    .mb60-md {
        margin-bottom: 60px;
    }

    .mb70-md {
        margin-bottom: 70px;
    }

    .mb80-md {
        margin-bottom: 80px;
    }

    .mb90-md {
        margin-bottom: 90px;
    }

    .mb100-md {
        margin-bottom: 100px;
    }

    /*---||-END margin-bottom-||---*/

    /*---||-margin-left-||---*/
    .ml0-md {
        margin-left: 0px;
    }

    .ml10-md {
        margin-left: 10px;
    }

    .ml20-md {
        margin-left: 20px;
    }

    .ml30-md {
        margin-left: 30px;
    }

    .ml40-md {
        margin-left: 40px;
    }

    .ml50-md {
        margin-left: 50px;
    }

    .ml60-md {
        margin-left: 60px;
    }

    .ml70-md {
        margin-left: 70px;
    }

    .ml80-md {
        margin-left: 80px;
    }

    .ml90-md {
        margin-left: 90px;
    }

    .ml100-md {
        margin-left: 100px;
    }

    /*---||-END margin-left-||---*/

    /*|||---END-MARGINS---|||*/


    /*|||---PADDINGS---|||*/
    /*---||-padding-top-||---*/
    .pt0-md {
        padding-top: 0px;
    }

    .pt10-md {
        padding-top: 10px;
    }

    .pt20-md {
        padding-top: 20px;
    }

    .pt30-md {
        padding-top: 30px;
    }

    .pt40-md {
        padding-top: 40px;
    }

    .pt50-md {
        padding-top: 50px;
    }

    .pt60-md {
        padding-top: 60px;
    }

    .pt70-md {
        padding-top: 70px;
    }

    .pt80-md {
        padding-top: 80px;
    }

    .pt90-md {
        padding-top: 90px;
    }

    .pt100-md {
        padding-top: 100px;
    }

    /*---||-END padding-top-||---*/

    /*---||-padding-right-||---*/
    .pr0-md {
        padding-right: 0px;
    }

    .pr10-md {
        padding-right: 10px;
    }

    .pr20-md {
        padding-right: 20px;
    }

    .pr30-md {
        padding-right: 30px;
    }

    .pr40-md {
        padding-right: 40px;
    }

    .pr50-md {
        padding-right: 50px;
    }

    .pr60-md {
        padding-right: 60px;
    }

    .pr70-md {
        padding-right: 70px;
    }

    .pr80-md {
        padding-right: 80px;
    }

    .pr90-md {
        padding-right: 90px;
    }

    .pr100-md {
        padding-right: 100px;
    }

    /*---||-END padding-right-||---*/

    /*---||-padding-bottom-||---*/
    .pb0-md {
        padding-bottom: 0px;
    }

    .pb10-md {
        padding-bottom: 10px;
    }

    .pb20-md {
        padding-bottom: 20px;
    }

    .pb30-md {
        padding-bottom: 30px;
    }

    .pb40-md {
        padding-bottom: 40px;
    }

    .pb50-md {
        padding-bottom: 50px;
    }

    .pb60-md {
        padding-bottom: 60px;
    }

    .pb70-md {
        padding-bottom: 70px;
    }

    .pb80-md {
        padding-bottom: 80px;
    }

    .pb90-md {
        padding-bottom: 90px;
    }

    .pb100-md {
        padding-bottom: 100px;
    }

    /*---||-END padding-bottom-||---*/

    /*---||-padding-left-||---*/
    .pl0-md {
        padding-left: 0px;
    }

    .pl10-md {
        padding-left: 10px;
    }

    .pl20-md {
        padding-left: 20px;
    }

    .pl30-md {
        padding-left: 30px;
    }

    .pl40-md {
        padding-left: 40px;
    }

    .pl50-md {
        padding-left: 50px;
    }

    .pl60-md {
        padding-left: 60px;
    }

    .pl70-md {
        padding-left: 70px;
    }

    .pl80-md {
        padding-left: 80px;
    }

    .pl90-md {
        padding-left: 90px;
    }

    .pl100-md {
        padding-left: 100px;
    }

    /*---||-END padding-left-||---*/
    /*|||---END-PADDINGS---|||*/

    /*|||---WIDTH---|||*/
    .w10p-md {
        width: 10%;
    }

    .w12p-md {
        width: 12.5%;
    }

    .w16p-md {
        width: 16.66666%;
    }

    .w20p-md {
        width: 20%;
    }

    .w25p-md {
        width: 25%;
    }

    .w30p-md {
        width: 30%;
    }

    .w33p-md {
        width: 33.33333%;
    }

    .w40p-md {
        width: 40%;
    }

    .w50p-md {
        width: 50%;
    }

    .w60p-md {
        width: 60%;
    }

    .w70p-md {
        width: 70%;
    }

    .w80p-md {
        width: 80%;
    }

    .w90p-md {
        width: 90%;
    }

    .w100p-md {
        width: 100%;
    }

    /*|||---END-WIDTH---|||*/
    /*|||---HEIGHT---|||*/
    .h10p-md {
        height: 10%;
    }

    .h12p-md {
        height: 12.5%;
    }

    .h16p-md {
        height: 16.66666%;
    }

    .h20p-md {
        height: 20%;
    }

    .h25p-md {
        height: 25%;
    }

    .h30p-md {
        height: 30%;
    }

    .h33p-md {
        height: 33.33333%;
    }

    .h40p-md {
        height: 40%;
    }

    .h50p-md {
        height: 50%;
    }

    .h60p-md {
        height: 60%;
    }

    .h70p-md {
        height: 70%;
    }

    .h80p-md {
        height: 80%;
    }

    .h90p-md {
        height: 90%;
    }

    .h100p-md {
        height: 100%;
    }

    /*|||---END-HEIGHT---|||*/

    /*|||---FLEXBOX---|||*/

    .flex-dir-row-md {
        flex-direction: row;
    }

    .flex-dir-col-md {
        flex-direction: column;
    }

    .flex-wrap-md {
        flex-wrap: wrap;
    }

    .flex-jc-end-md {
        justify-content: flex-end;
    }

    .flex-jc-center-md {
        justify-content: center;
    }

    .flex-jc-space-around-md {
        justify-content: space-around;
    }

    .flex-jc-space-between-md {
        justify-content: space-between;
    }

    .flex-jc-space-evenly-md {
        justify-content: space-evenly;
    }

    .flex-ai-end-md {
        align-items: flex-end;
    }

    .flex-ai-center-md {
        align-items: center;

    }



    /*|||---END-FLEXBOX---|||*/


}

/*-------------Large(lg)--------------*/
/*------------992px-1200px-----------*/
/*-----------------------------------*/
@media (min-width: 992px) {
    body {
        background: #3697d3;
    }

    /*|||---MARGINS---|||*/
    /*---||-margin-top-||---*/
    .mt0-lg {
        margin-top: 0px;
    }

    .mt10-lg {
        margin-top: 10px;
    }

    .mt20-lg {
        margin-top: 20px;
    }

    .mt30-lg {
        margin-top: 30px;
    }

    .mt40-lg {
        margin-top: 40px;
    }

    .mt50-lg {
        margin-top: 50px;
    }

    .mt60-lg {
        margin-top: 60px;
    }

    .mt70-lg {
        margin-top: 70px;
    }

    .mt80-lg {
        margin-top: 80px;
    }

    .mt90-lg {
        margin-top: 90px;
    }

    .mt100-lg {
        margin-top: 100px;
    }

    /*---||-END margin-top-||---*/

    /*---||-margin-right-||---*/
    .mr0-lg {
        margin-right: 0px;
    }

    .mr10-lg {
        margin-right: 10px;
    }

    .mr20-lg {
        margin-right: 20px;
    }

    .mr30-lg {
        margin-right: 30px;
    }

    .mr40-lg {
        margin-right: 40px;
    }

    .mr50-lg {
        margin-right: 50px;
    }

    .mr60-lg {
        margin-right: 60px;
    }

    .mr70-lg {
        margin-right: 70px;
    }

    .mr80-lg {
        margin-right: 80px;
    }

    .mr90-lg {
        margin-right: 90px;
    }

    .mr100-lg {
        margin-right: 100px;
    }

    /*---||-END margin-right-||---*/

    /*---||-margin-bottom-||---*/
    .mb0-lg {
        margin-bottom: 0px;
    }

    .mb10-lg {
        margin-bottom: 10px;
    }

    .mb20-lg {
        margin-bottom: 20px;
    }

    .mb30-lg {
        margin-bottom: 30px;
    }

    .mb40-lg {
        margin-bottom: 40px;
    }

    .mb50-lg {
        margin-bottom: 50px;
    }

    .mb60-lg {
        margin-bottom: 60px;
    }

    .mb70-lg {
        margin-bottom: 70px;
    }

    .mb80-lg {
        margin-bottom: 80px;
    }

    .mb90-lg {
        margin-bottom: 90px;
    }

    .mb100-lg {
        margin-bottom: 100px;
    }

    /*---||-END margin-bottom-||---*/

    /*---||-margin-left-||---*/
    .ml0-lg {
        margin-left: 0px;
    }

    .ml10-lg {
        margin-left: 10px;
    }

    .ml20-lg {
        margin-left: 20px;
    }

    .ml30-lg {
        margin-left: 30px;
    }

    .ml40-lg {
        margin-left: 40px;
    }

    .ml50-lg {
        margin-left: 50px;
    }

    .ml60-lg {
        margin-left: 60px;
    }

    .ml70-lg {
        margin-left: 70px;
    }

    .ml80-lg {
        margin-left: 80px;
    }

    .ml90-lg {
        margin-left: 90px;
    }

    .ml100-lg {
        margin-left: 100px;
    }

    /*---||-END margin-left-||---*/

    /*|||---END-MARGINS---|||*/

    /*|||---PADDINGS---|||*/
    /*---||-padding-top-||---*/
    .pt0-lg {
        padding-top: 0px;
    }

    .pt10-lg {
        padding-top: 10px;
    }

    .pt20-lg {
        padding-top: 20px;
    }

    .pt30-lg {
        padding-top: 30px;
    }

    .pt40-lg {
        padding-top: 40px;
    }

    .pt50-lg {
        padding-top: 50px;
    }

    .pt60-lg {
        padding-top: 60px;
    }

    .pt70-lg {
        padding-top: 70px;
    }

    .pt80-lg {
        padding-top: 80px;
    }

    .pt90-lg {
        padding-top: 90px;
    }

    .pt100-lg {
        padding-top: 100px;
    }

    /*---||-END padding-top-||---*/

    /*---||-padding-right-||---*/
    .pr0-lg {
        padding-right: 0px;
    }

    .pr10-lg {
        padding-right: 10px;
    }

    .pr20-lg {
        padding-right: 20px;
    }

    .pr30-lg {
        padding-right: 30px;
    }

    .pr40-lg {
        padding-right: 40px;
    }

    .pr50-lg {
        padding-right: 50px;
    }

    .pr60-lg {
        padding-right: 60px;
    }

    .pr70-lg {
        padding-right: 70px;
    }

    .pr80-lg {
        padding-right: 80px;
    }

    .pr90-lg {
        padding-right: 90px;
    }

    .pr100-lg {
        padding-right: 100px;
    }

    /*---||-END padding-right-||---*/

    /*---||-padding-bottom-||---*/
    .pb0-lg {
        padding-bottom: 0px;
    }

    .pb10-lg {
        padding-bottom: 10px;
    }

    .pb20-lg {
        padding-bottom: 20px;
    }

    .pb30-lg {
        padding-bottom: 30px;
    }

    .pb40-lg {
        padding-bottom: 40px;
    }

    .pb50-lg {
        padding-bottom: 50px;
    }

    .pb60-lg {
        padding-bottom: 60px;
    }

    .pb70-lg {
        padding-bottom: 70px;
    }

    .pb80-lg {
        padding-bottom: 80px;
    }

    .pb90-lg {
        padding-bottom: 90px;
    }

    .pb100-lg {
        padding-bottom: 100px;
    }

    /*---||-END padding-bottom-||---*/

    /*---||-padding-left-||---*/
    .pl0-lg {
        padding-left: 0px;
    }

    .pl10-lg {
        padding-left: 10px;
    }

    .pl20-lg {
        padding-left: 20px;
    }

    .pl30-lg {
        padding-left: 30px;
    }

    .pl40-lg {
        padding-left: 40px;
    }

    .pl50-lg {
        padding-left: 50px;
    }

    .pl60-lg {
        padding-left: 60px;
    }

    .pl70-lg {
        padding-left: 70px;
    }

    .pl80-lg {
        padding-left: 80px;
    }

    .pl90-lg {
        padding-left: 90px;
    }

    .pl100-lg {
        padding-left: 100px;
    }

    /*---||-END padding-left-||---*/
    /*|||---END-PADDINGS---|||*/

    /*|||---WIDTH---|||*/
    .w10p-lg {
        width: 10%;
    }

    .w12p-lg {
        width: 12.5%;
    }

    .w16p-lg {
        width: 16.66666%;
    }

    .w20p-lg {
        width: 20%;
    }

    .w25p-lg {
        width: 25%;
    }

    .w30p-lg {
        width: 30%;
    }

    .w33p-lg {
        width: 33.33333%;
    }

    .w40p-lg {
        width: 40%;
    }

    .w50p-lg {
        width: 50%;
    }

    .w60p-lg {
        width: 60%;
    }

    .w70p-lg {
        width: 70%;
    }

    .w80p-lg {
        width: 80%;
    }

    .w90p-lg {
        width: 90%;
    }

    .w100p-lg {
        width: 100%;
    }

    /*|||---END-WIDTH---|||*/
    /*|||---HEIGHT---|||*/
    .h10p-lg {
        height: 10%;
    }

    .h12p-lg {
        height: 12.5%;
    }

    .h16p-lg {
        height: 16.66666%;
    }

    .h20p-lg {
        height: 20%;
    }

    .h25p-lg {
        height: 25%;
    }

    .h30p-lg {
        height: 30%;
    }

    .h33p-lg {
        height: 33.33333%;
    }

    .h40p-lg {
        height: 40%;
    }

    .h50p-lg {
        height: 50%;
    }

    .h60p-lg {
        height: 60%;
    }

    .h70p-lg {
        height: 70%;
    }

    .h80p-lg {
        height: 80%;
    }

    .h90p-lg {
        height: 90%;
    }

    .h100p-lg {
        height: 100%;
    }

    /*|||---END-HEIGHT---|||*/

    /*|||---FLEXBOX---|||*/

    .flex-dir-row-lg {
        flex-direction: row;
    }

    .flex-dir-col-lg {
        flex-direction: column;
    }

    .flex-wrap-lg {
        flex-wrap: wrap;
    }

    .flex-jc-end-lg {
        justify-content: flex-end;
    }

    .flex-jc-center-lg {
        justify-content: center;
    }

    .flex-jc-space-around-lg {
        justify-content: space-around;
    }

    .flex-jc-space-between-lg {
        justify-content: space-between;
    }

    .flex-jc-space-evenly-lg {
        justify-content: space-evenly;
    }

    .flex-ai-end-lg {
        align-items: flex-end;
    }

    .flex-ai-center-lg {
        align-items: center;

    }



    /*|||---END-FLEXBOX---|||*/
}

/*-------------XL--------------------*/
/*------------1200px++---------------*/
/*-----------------------------------*/
@media (min-width: 1200px) {
    body {
        background: #d336a3;
    }

    /*|||---MARGINS---|||*/
    /*---||-margin-top-||---*/
    .mt0-xl {
        margin-top: 0px;
    }

    .mt10-xl {
        margin-top: 10px;
    }

    .mt20-xl {
        margin-top: 20px;
    }

    .mt30-xl {
        margin-top: 30px;
    }

    .mt40-xl {
        margin-top: 40px;
    }

    .mt50-xl {
        margin-top: 50px;
    }

    .mt60-xl {
        margin-top: 60px;
    }

    .mt70-xl {
        margin-top: 70px;
    }

    .mt80-xl {
        margin-top: 80px;
    }

    .mt90-xl {
        margin-top: 90px;
    }

    .mt100-xl {
        margin-top: 100px;
    }

    /*---||-END margin-top-||---*/

    /*---||-margin-right-||---*/
    .mr0-xl {
        margin-right: 0px;
    }

    .mr10-xl {
        margin-right: 10px;
    }

    .mr20-xl {
        margin-right: 20px;
    }

    .mr30-xl {
        margin-right: 30px;
    }

    .mr40-xl {
        margin-right: 40px;
    }

    .mr50-xl {
        margin-right: 50px;
    }

    .mr60-xl {
        margin-right: 60px;
    }

    .mr70-xl {
        margin-right: 70px;
    }

    .mr80-xl {
        margin-right: 80px;
    }

    .mr90-xl {
        margin-right: 90px;
    }

    .mr100-xl {
        margin-right: 100px;
    }

    /*---||-END margin-right-||---*/

    /*---||-margin-bottom-||---*/
    .mb0-xl {
        margin-bottom: 0px;
    }

    .mb10-xl {
        margin-bottom: 10px;
    }

    .mb20-xl {
        margin-bottom: 20px;
    }

    .mb30-xl {
        margin-bottom: 30px;
    }

    .mb40-xl {
        margin-bottom: 40px;
    }

    .mb50-xl {
        margin-bottom: 50px;
    }

    .mb60-xl {
        margin-bottom: 60px;
    }

    .mb70-xl {
        margin-bottom: 70px;
    }

    .mb80-xl {
        margin-bottom: 80px;
    }

    .mb90-xl {
        margin-bottom: 90px;
    }

    .mb100-xl {
        margin-bottom: 100px;
    }

    /*---||-END margin-bottom-||---*/

    /*---||-margin-left-||---*/
    .ml0-xl {
        margin-left: 0px;
    }

    .ml10-xl {
        margin-left: 10px;
    }

    .ml20-xl {
        margin-left: 20px;
    }

    .ml30-xl {
        margin-left: 30px;
    }

    .ml40-xl {
        margin-left: 40px;
    }

    .ml50-xl {
        margin-left: 50px;
    }

    .ml60-xl {
        margin-left: 60px;
    }

    .ml70-xl {
        margin-left: 70px;
    }

    .ml80-xl {
        margin-left: 80px;
    }

    .ml90-xl {
        margin-left: 90px;
    }

    .ml100-xl {
        margin-left: 100px;
    }

    /*---||-END margin-left-||---*/

    /*|||---END-MARGINS---|||*/

    /*|||---PADDINGS---|||*/
    /*---||-padding-top-||---*/
    .pt0-xl {
        padding-top: 0px;
    }

    .pt10-xl {
        padding-top: 10px;
    }

    .pt20-xl {
        padding-top: 20px;
    }

    .pt30-xl {
        padding-top: 30px;
    }

    .pt40-xl {
        padding-top: 40px;
    }

    .pt50-xl {
        padding-top: 50px;
    }

    .pt60-xl {
        padding-top: 60px;
    }

    .pt70-xl {
        padding-top: 70px;
    }

    .pt80-xl {
        padding-top: 80px;
    }

    .pt90-xl {
        padding-top: 90px;
    }

    .pt100-xl {
        padding-top: 100px;
    }

    /*---||-END padding-top-||---*/

    /*---||-padding-right-||---*/
    .pr0-xl {
        padding-right: 0px;
    }

    .pr10-xl {
        padding-right: 10px;
    }

    .pr20-xl {
        padding-right: 20px;
    }

    .pr30-xl {
        padding-right: 30px;
    }

    .pr40-xl {
        padding-right: 40px;
    }

    .pr50-xl {
        padding-right: 50px;
    }

    .pr60-xl {
        padding-right: 60px;
    }

    .pr70-xl {
        padding-right: 70px;
    }

    .pr80-xl {
        padding-right: 80px;
    }

    .pr90-xl {
        padding-right: 90px;
    }

    .pr100-xl {
        padding-right: 100px;
    }

    /*---||-END padding-right-||---*/

    /*---||-padding-bottom-||---*/
    .pb0-xl {
        padding-bottom: 0px;
    }

    .pb10-xl {
        padding-bottom: 10px;
    }

    .pb20-xl {
        padding-bottom: 20px;
    }

    .pb30-xl {
        padding-bottom: 30px;
    }

    .pb40-xl {
        padding-bottom: 40px;
    }

    .pb50-xl {
        padding-bottom: 50px;
    }

    .pb60-xl {
        padding-bottom: 60px;
    }

    .pb70-xl {
        padding-bottom: 70px;
    }

    .pb80-xl {
        padding-bottom: 80px;
    }

    .pb90-xl {
        padding-bottom: 90px;
    }

    .pb100-xl {
        padding-bottom: 100px;
    }

    /*---||-END padding-bottom-||---*/

    /*---||-padding-left-||---*/
    .pl0-xl {
        padding-left: 0px;
    }

    .pl10-xl {
        padding-left: 10px;
    }

    .pl20-xl {
        padding-left: 20px;
    }

    .pl30-xl {
        padding-left: 30px;
    }

    .pl40-xl {
        padding-left: 40px;
    }

    .pl50-xl {
        padding-left: 50px;
    }

    .pl60-xl {
        padding-left: 60px;
    }

    .pl70-xl {
        padding-left: 70px;
    }

    .pl80-xl {
        padding-left: 80px;
    }

    .pl90-xl {
        padding-left: 90px;
    }

    .pl100-xl {
        padding-left: 100px;
    }

    /*---||-END padding-left-||---*/
    /*|||---END-PADDINGS---|||*/

    /*|||---WIDTH---|||*/
    .w10p-xl {
        width: 10%;
    }

    .w12p-xl {
        width: 12.5%;
    }

    .w16p-xl {
        width: 16.66666%;
    }

    .w20p-xl {
        width: 20%;
    }

    .w25p-xl {
        width: 25%;
    }

    .w30p-xl {
        width: 30%;
    }

    .w33p-xl {
        width: 33.33333%;
    }

    .w40p-xl {
        width: 40%;
    }

    .w50p-xl {
        width: 50%;
    }

    .w60p-xl {
        width: 60%;
    }

    .w70p-xl {
        width: 70%;
    }

    .w80p-xl {
        width: 80%;
    }

    .w90p-xl {
        width: 90%;
    }

    .w100p-xl {
        width: 100%;
    }

    /*|||---END-WIDTH---|||*/
    /*|||---HEIGHT---|||*/
    .h10p-xl {
        height: 10%;
    }

    .h12p-xl {
        height: 12.5%;
    }

    .h16p-xl {
        height: 16.66666%;
    }

    .h20p-xl {
        height: 20%;
    }

    .h25p-xl {
        height: 25%;
    }

    .h30p-xl {
        height: 30%;
    }

    .h33p-xl {
        height: 33.33333%;
    }

    .h40p-xl {
        height: 40%;
    }

    .h50p-xl {
        height: 50%;
    }

    .h60p-xl {
        height: 60%;
    }

    .h70p-xl {
        height: 70%;
    }

    .h80p-xl {
        height: 80%;
    }

    .h90p-xl {
        height: 90%;
    }

    .h100p-xl {
        height: 100%;
    }

    /*|||---END-HEIGHT---|||*/

    /*|||---FLEXBOX---|||*/

    .flex-dir-row-xl {
        flex-direction: row;
    }

    .flex-dir-col-xl {
        flex-direction: column;
    }

    .flex-wrap-xl {
        flex-wrap: wrap;
    }

    .flex-jc-end-xl {
        justify-content: flex-end;
    }

    .flex-jc-center-xl {
        justify-content: center;
    }

    .flex-jc-space-around-xl {
        justify-content: space-around;
    }

    .flex-jc-space-between-xl {
        justify-content: space-between;
    }

    .flex-jc-space-evenly-xl {
        justify-content: space-evenly;
    }

    .flex-ai-end-xl {
        align-items: flex-end;
    }

    .flex-ai-center-xl {
        align-items: center;

    }



    /*|||---END-FLEXBOX---|||*/



}
