/* ------------ margin ------------- */

.m-0 { margin: 0; }
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-100 { margin: 100px; }

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-100 { margin-top: 100px; }

.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-100 { margin-bottom: 100px; }

.ml-0 { margin-left: 0; }
.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }
.ml-100 { margin-left: 100px; }

.mr-0 { margin-right: 0; }
.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-100 { margin-right: 100px; }

.mtb-0 { margin-top: 0; margin-bottom: 0; }
.mtb-10 { margin-top: 10px; margin-bottom: 10px;}
.mtb-20 { margin-top: 20px; margin-bottom: 20px;}
.mtb-30 { margin-top: 30px; margin-bottom: 30px;}
.mtb-40 { margin-top: 40px; margin-bottom: 40px;}
.mtb-50 { margin-top: 50px; margin-bottom: 50px;}
.mtb-100 { margin-top: 100px; margin-bottom: 100px;}

.mlr-0 { margin-left: 0; margin-right: 0; }
.mlr-10 { margin-left: 10px; margin-right: 10px;}
.mlr-20 { margin-left: 20px; margin-right: 20px;}
.mlr-30 { margin-left: 30px; margin-right: 30px;}
.mlr-40 { margin-left: 40px; margin-right: 40px;}
.mlr-50 { margin-left: 50px; margin-right: 50px;}
.mlr-100 { margin-left: 100px; margin-right: 100px;}


/* ------------- padding -------------- */

.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-100 { padding: 100px; }

.pt-0 { padding-top: 0; }
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-100 { padding-top: 100px; }

.pb-0 { padding-bottom: 0; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-100 { padding-bottom: 100px; }

.pl-0 { padding-left: 0; }
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-100 { padding-left: 100px; }

.pr-0 { padding-right: 0; }
.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-100 { padding-right: 100px; }

.ptb-0 { padding-top: 0; padding-bottom: 0; }
.ptb-10 { padding-top: 10px; padding-bottom: 10px;}
.ptb-20 { padding-top: 20px; padding-bottom: 20px;}
.ptb-30 { padding-top: 30px; padding-bottom: 30px;}
.ptb-40 { padding-top: 40px; padding-bottom: 40px;}
.ptb-50 { padding-top: 50px; padding-bottom: 50px;}
.ptb-100 { padding-top: 100px; padding-bottom: 100px;}

.plr-0 { padding-left: 0; padding-right: 0; }
.plr-10 { padding-left: 10px; padding-right: 10px;}
.plr-20 { padding-left: 20px; padding-right: 20px;}
.plr-30 { padding-left: 30px; padding-right: 30px;}
.plr-40 { padding-left: 40px; padding-right: 40px;}
.plr-50 { padding-left: 50px; padding-right: 50px;}
.plr-100 { padding-left: 100px; padding-right: 100px;}


/* ============================================= small ≥576px ========================================== */

@media screen and (min-width: 576px) {
    /* ----------------- margin ----------------- */
    .m-sm-0 { margin: 0; }
    .m-sm-10 { margin: 10px; }
    .m-sm-20 { margin: 20px; }
    .m-sm-30 { margin: 30px; }
    .m-sm-40 { margin: 40px; }
    .m-sm-50 { margin: 50px; }
    .m-sm-100 { margin: 100px; }

    .mt-sm-0 { margin-top: 0; }
    .mt-sm-10 { margin-top: 10px; }
    .mt-sm-20 { margin-top: 20px; }
    .mt-sm-30 { margin-top: 30px; }
    .mt-sm-40 { margin-top: 40px; }
    .mt-sm-50 { margin-top: 50px; }
    .mt-sm-100 { margin-top: 100px; }

    .mb-sm-0 { margin-bottom: 0; }
    .mb-sm-10 { margin-bottom: 10px; }
    .mb-sm-20 { margin-bottom: 20px; }
    .mb-sm-30 { margin-bottom: 30px; }
    .mb-sm-40 { margin-bottom: 40px; }
    .mb-sm-50 { margin-bottom: 50px; }
    .mb-sm-100 { margin-bottom: 100px; }

    .ml-sm-0 { margin-left: 0; }
    .ml-sm-10 { margin-left: 10px; }
    .ml-sm-20 { margin-left: 20px; }
    .ml-sm-30 { margin-left: 30px; }
    .ml-sm-40 { margin-left: 40px; }
    .ml-sm-50 { margin-left: 50px; }
    .ml-sm-100 { margin-left: 100px; }
    
    .mr-sm-0 { margin-right: 0; }
    .mr-sm-10 { margin-right: 10px; }
    .mr-sm-20 { margin-right: 20px; }
    .mr-sm-30 { margin-right: 30px; }
    .mr-sm-40 { margin-right: 40px; }
    .mr-sm-50 { margin-right: 50px; }
    .mr-sm-100 { margin-right: 100px; }

    .mtb-sm-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-sm-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-sm-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-sm-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-sm-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-sm-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-sm-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-sm-0 { margin-left: 0; margin-right: 0; }
    .mlr-sm-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-sm-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-sm-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-sm-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-sm-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-sm-100 { margin-left: 100px; margin-right: 100px;}

    /* ----------------- padding ----------------- */

    .p-sm-0 { padding-top: 0; }
    .p-sm-10 { padding-top: 10px; }
    .p-sm-20 { padding-top: 20px; }
    .p-sm-30 { padding-top: 30px; }
    .p-sm-40 { padding-top: 40px; }
    .p-sm-50 { padding-top: 50px; }
    .p-sm-100 { padding-top: 100px; }

    .pt-sm-0 { padding-top: 0; }
    .pt-sm-10 { padding-top: 10px; }
    .pt-sm-20 { padding-top: 20px; }
    .pt-sm-30 { padding-top: 30px; }
    .pt-sm-40 { padding-top: 40px; }
    .pt-sm-50 { padding-top: 50px; }
    .pt-sm-100 { padding-top: 100px; }

    .pb-sm-0 { padding-bottom: 0; }
    .pb-sm-10 { padding-bottom: 10px; }
    .pb-sm-20 { padding-bottom: 20px; }
    .pb-sm-30 { padding-bottom: 30px; }
    .pb-sm-40 { padding-bottom: 40px; }
    .pb-sm-50 { padding-bottom: 50px; }
    .pb-sm-100 { padding-bottom: 100px; }

    .pl-sm-0 { padding-left: 0; }
    .pl-sm-10 { padding-left: 10px; }
    .pl-sm-20 { padding-left: 20px; }
    .pl-sm-30 { padding-left: 30px; }
    .pl-sm-40 { padding-left: 40px; }
    .pl-sm-50 { padding-left: 50px; }
    .pl-sm-100 { padding-left: 100px; }

    .pr-sm-0 { padding-right: 0; }
    .pr-sm-10 { padding-right: 10px; }
    .pr-sm-20 { padding-right: 20px; }
    .pr-sm-30 { padding-right: 30px; }
    .pr-sm-40 { padding-right: 40px; }
    .pr-sm-50 { padding-right: 50px; }
    .pr-sm-100 { padding-right: 100px; }

    .ptb-sm-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-sm-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-sm-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-sm-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-sm-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-sm-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-sm-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-sm-0 { padding-left: 0; padding-right: 0; }
    .plr-sm-10 { padding-left: 10px; padding-right: 10px;}
    .plr-sm-20 { padding-left: 20px; padding-right: 20px;}
    .plr-sm-30 { padding-left: 30px; padding-right: 30px;}
    .plr-sm-40 { padding-left: 40px; padding-right: 40px;}
    .plr-sm-50 { padding-left: 50px; padding-right: 50px;}
    .plr-sm-100 { padding-left: 100px; padding-right: 100px;}
}

/* ============================================= Medium ≥768px ========================================== */

@media screen and (min-width: 768px) {
    /* ------------ margin ----------------- */
    .m-md-0 { margin: 0; }
    .m-md-10 { margin: 10px; }
    .m-md-20 { margin: 20px; }
    .m-md-30 { margin: 30px; }
    .m-md-40 { margin: 40px; }
    .m-md-50 { margin: 50px; }
    .m-md-100 { margin: 100px; }

    .mt-md-0 { margin-top: 0; }
    .mt-md-10 { margin-top: 10px; }
    .mt-md-20 { margin-top: 20px; }
    .mt-md-30 { margin-top: 30px; }
    .mt-md-40 { margin-top: 40px; }
    .mt-md-50 { margin-top: 50px; }
    .mt-md-100 { margin-top: 100px; }

    .mb-md-0 { margin-bottom: 0; }
    .mb-md-10 { margin-bottom: 10px; }
    .mb-md-20 { margin-bottom: 20px; }
    .mb-md-30 { margin-bottom: 30px; }
    .mb-md-40 { margin-bottom: 40px; }
    .mb-md-50 { margin-bottom: 50px; }
    .mb-md-100 { margin-bottom: 100px; }

    .ml-md-0 { margin-left: 0; }
    .ml-md-10 { margin-left: 10px; }
    .ml-md-20 { margin-left: 20px; }
    .ml-md-30 { margin-left: 30px; }
    .ml-md-40 { margin-left: 40px; }
    .ml-md-50 { margin-left: 50px; }
    .ml-md-100 { margin-left: 100px; }
    
    .mr-md-0 { margin-right: 0; }
    .mr-md-10 { margin-right: 10px; }
    .mr-md-20 { margin-right: 20px; }
    .mr-md-30 { margin-right: 30px; }
    .mr-md-40 { margin-right: 40px; }
    .mr-md-50 { margin-right: 50px; }
    .mr-md-100 { margin-right: 100px; }

    .mtb-md-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-md-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-md-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-md-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-md-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-md-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-md-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-md-0 { margin-left: 0; margin-right: 0; }
    .mlr-md-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-md-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-md-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-md-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-md-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-md-100 { margin-left: 100px; margin-right: 100px;}

    /* ---------------- padding --------------------- */

    .p-md-0 { padding: 0; }
    .p-md-10 { padding: 10px; }
    .p-md-20 { padding: 20px; }
    .p-md-30 { padding: 30px; }
    .p-md-40 { padding: 40px; }
    .p-md-50 { padding: 50px; }
    .p-md-100 { padding: 100px; }

    .pt-md-0 { padding-top: 0; }
    .pt-md-10 { padding-top: 10px; }
    .pt-md-20 { padding-top: 20px; }
    .pt-md-30 { padding-top: 30px; }
    .pt-md-40 { padding-top: 40px; }
    .pt-md-50 { padding-top: 50px; }
    .pt-md-100 { padding-top: 100px; }

    .pb-md-0 { padding-bottom: 0; }
    .pb-md-10 { padding-bottom: 10px; }
    .pb-md-20 { padding-bottom: 20px; }
    .pb-md-30 { padding-bottom: 30px; }
    .pb-md-40 { padding-bottom: 40px; }
    .pb-md-50 { padding-bottom: 50px; }
    .pb-md-100 { padding-bottom: 100px; }

    .pl-md-0 { padding-left: 0; }
    .pl-md-10 { padding-left: 10px; }
    .pl-md-20 { padding-left: 20px; }
    .pl-md-30 { padding-left: 30px; }
    .pl-md-40 { padding-left: 40px; }
    .pl-md-50 { padding-left: 50px; }
    .pl-md-100 { padding-left: 100px; }

    .pr-md-0 { padding-right: 0; }
    .pr-md-10 { padding-right: 10px; }
    .pr-md-20 { padding-right: 20px; }
    .pr-md-30 { padding-right: 30px; }
    .pr-md-40 { padding-right: 40px; }
    .pr-md-50 { padding-right: 50px; }
    .pr-md-100 { padding-right: 100px; }

    .ptb-md-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-md-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-md-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-md-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-md-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-md-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-md-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-md-0 { padding-left: 0; padding-right: 0; }
    .plr-md-10 { padding-left: 10px; padding-right: 10px;}
    .plr-md-20 { padding-left: 20px; padding-right: 20px;}
    .plr-md-30 { padding-left: 30px; padding-right: 30px;}
    .plr-md-40 { padding-left: 40px; padding-right: 40px;}
    .plr-md-50 { padding-left: 50px; padding-right: 50px;}
    .plr-md-100 { padding-left: 100px; padding-right: 100px;}
}


/* ============================================= large ≥992px ========================================== */

@media screen and (min-width: 992px) {
    /* ------------------ margin --------------------- */
    .m-lg-0 { margin: 0; }
    .m-lg-10 { margin: 10px; }
    .m-lg-20 { margin: 20px; }
    .m-lg-30 { margin: 30px; }
    .m-lg-40 { margin: 40px; }
    .m-lg-50 { margin: 50px; }
    .m-lg-100 { margin: 100px; }

    .mt-lg-0 { margin-top: 0; }
    .mt-lg-10 { margin-top: 10px; }
    .mt-lg-20 { margin-top: 20px; }
    .mt-lg-30 { margin-top: 30px; }
    .mt-lg-40 { margin-top: 40px; }
    .mt-lg-50 { margin-top: 50px; }
    .mt-lg-100 { margin-top: 100px; }

    .mb-lg-0 { margin-bottom: 0; }
    .mb-lg-10 { margin-bottom: 10px; }
    .mb-lg-20 { margin-bottom: 20px; }
    .mb-lg-30 { margin-bottom: 30px; }
    .mb-lg-40 { margin-bottom: 40px; }
    .mb-lg-50 { margin-bottom: 50px; }
    .mb-lg-100 { margin-bottom: 100px; }

    .ml-lg-0 { margin-left: 0; }
    .ml-lg-10 { margin-left: 10px; }
    .ml-lg-20 { margin-left: 20px; }
    .ml-lg-30 { margin-left: 30px; }
    .ml-lg-40 { margin-left: 40px; }
    .ml-lg-50 { margin-left: 50px; }
    .ml-lg-100 { margin-left: 100px; }

    .mr-lg-0 { margin-right: 0; }
    .mr-lg-10 { margin-right: 10px; }
    .mr-lg-20 { margin-right: 20px; }
    .mr-lg-30 { margin-right: 30px; }
    .mr-lg-40 { margin-right: 40px; }
    .mr-lg-50 { margin-right: 50px; }
    .mr-lg-100 { margin-right: 100px; }

    .mtb-lg-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-lg-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-lg-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-lg-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-lg-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-lg-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-lg-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-lg-0 { margin-left: 0; margin-right: 0; }
    .mlr-lg-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-lg-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-lg-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-lg-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-lg-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-lg-100 { margin-left: 100px; margin-right: 100px;}

    /* ------------------- padding -------------------- */

    .p-lg-0 { padding: 0; }
    .p-lg-10 { padding: 10px; }
    .p-lg-20 { padding: 20px; }
    .p-lg-30 { padding: 30px; }
    .p-lg-40 { padding: 40px; }
    .p-lg-50 { padding: 50px; }
    .p-lg-100 { padding: 100px; }

    .pt-lg-0 { padding-top: 0; }
    .pt-lg-10 { padding-top: 10px; }
    .pt-lg-20 { padding-top: 20px; }
    .pt-lg-30 { padding-top: 30px; }
    .pt-lg-40 { padding-top: 40px; }
    .pt-lg-50 { padding-top: 50px; }
    .pt-lg-100 { padding-top: 100px; }

    .pb-lg-0 { padding-bottom: 0; }
    .pb-lg-10 { padding-bottom: 10px; }
    .pb-lg-20 { padding-bottom: 20px; }
    .pb-lg-30 { padding-bottom: 30px; }
    .pb-lg-40 { padding-bottom: 40px; }
    .pb-lg-50 { padding-bottom: 50px; }
    .pb-lg-100 { padding-bottom: 100px; }

    .pl-lg-0 { padding-left: 0; }
    .pl-lg-10 { padding-left: 10px; }
    .pl-lg-20 { padding-left: 20px; }
    .pl-lg-30 { padding-left: 30px; }
    .pl-lg-40 { padding-left: 40px; }
    .pl-lg-50 { padding-left: 50px; }
    .pl-lg-100 { padding-left: 100px; }

    .pr-lg-0 { padding-right: 0; }
    .pr-lg-10 { padding-right: 10px; }
    .pr-lg-20 { padding-right: 20px; }
    .pr-lg-30 { padding-right: 30px; }
    .pr-lg-40 { padding-right: 40px; }
    .pr-lg-50 { padding-right: 50px; }
    .pr-lg-100 { padding-right: 100px; }

    .ptb-lg-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-lg-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-lg-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-lg-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-lg-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-lg-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-lg-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-lg-0 { padding-left: 0; padding-right: 0; }
    .plr-lg-10 { padding-left: 10px; padding-right: 10px;}
    .plr-lg-20 { padding-left: 20px; padding-right: 20px;}
    .plr-lg-30 { padding-left: 30px; padding-right: 30px;}
    .plr-lg-40 { padding-left: 40px; padding-right: 40px;}
    .plr-lg-50 { padding-left: 50px; padding-right: 50px;}
    .plr-lg-100 { padding-left: 100px; padding-right: 100px;}
}

/* ============================================= Extra large ≥1200px ========================================== */

@media screen and (min-width: 1200px) {
    /* --------------- margin ----------------- */
    .m-xl-0 { margin: 0; }
    .m-xl-10 { margin: 10px; }
    .m-xl-20 { margin: 20px; }
    .m-xl-30 { margin: 30px; }
    .m-xl-40 { margin: 40px; }
    .m-xl-50 { margin: 50px; }
    .m-xl-100 { margin: 100px; }

    .mt-xl-0 { margin-top: 0; }
    .mt-xl-10 { margin-top: 10px; }
    .mt-xl-20 { margin-top: 20px; }
    .mt-xl-30 { margin-top: 30px; }
    .mt-xl-40 { margin-top: 40px; }
    .mt-xl-50 { margin-top: 50px; }
    .mt-xl-100 { margin-top: 100px; }

    .mb-xl-0 { margin-bottom: 0; }
    .mb-xl-10 { margin-bottom: 10px; }
    .mb-xl-20 { margin-bottom: 20px; }
    .mb-xl-30 { margin-bottom: 30px; }
    .mb-xl-40 { margin-bottom: 40px; }
    .mb-xl-50 { margin-bottom: 50px; }
    .mb-xl-100 { margin-bottom: 100px; }

    .ml-xl-0 { margin-left: 0; }
    .ml-xl-10 { margin-left: 10px; }
    .ml-xl-20 { margin-left: 20px; }
    .ml-xl-30 { margin-left: 30px; }
    .ml-xl-40 { margin-left: 40px; }
    .ml-xl-50 { margin-left: 50px; }
    .ml-xl-100 { margin-left: 100px; }
    
    .mr-xl-0 { margin-right: 0; }
    .mr-xl-10 { margin-right: 10px; }
    .mr-xl-20 { margin-right: 20px; }
    .mr-xl-30 { margin-right: 30px; }
    .mr-xl-40 { margin-right: 40px; }
    .mr-xl-50 { margin-right: 50px; }
    .mr-xl-100 { margin-right: 100px; }

    .mtb-xl-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-xl-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-xl-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-xl-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-xl-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-xl-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-xl-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-xl-0 { margin-left: 0; margin-right: 0; }
    .mlr-xl-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-xl-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-xl-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-xl-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-xl-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-xl-100 { margin-left: 100px; margin-right: 100px;}

    /* ---------------------- padding ---------------------- */

    .p-xl-0 { padding: 0; }
    .p-xl-10 { padding: 10px; }
    .p-xl-20 { padding: 20px; }
    .p-xl-30 { padding: 30px; }
    .p-xl-40 { padding: 40px; }
    .p-xl-50 { padding: 50px; }
    .p-xl-100 { padding: 100px; }

    .pt-xl-0 { padding-top: 0; }
    .pt-xl-10 { padding-top: 10px; }
    .pt-xl-20 { padding-top: 20px; }
    .pt-xl-30 { padding-top: 30px; }
    .pt-xl-40 { padding-top: 40px; }
    .pt-xl-50 { padding-top: 50px; }
    .pt-xl-100 { padding-top: 100px; }

    .pb-xl-0 { padding-bottom: 0; }
    .pb-xl-10 { padding-bottom: 10px; }
    .pb-xl-20 { padding-bottom: 20px; }
    .pb-xl-30 { padding-bottom: 30px; }
    .pb-xl-40 { padding-bottom: 40px; }
    .pb-xl-50 { padding-bottom: 50px; }
    .pb-xl-100 { padding-bottom: 100px; }

    .pl-xl-0 { padding-left: 0; }
    .pl-xl-10 { padding-left: 10px; }
    .pl-xl-20 { padding-left: 20px; }
    .pl-xl-30 { padding-left: 30px; }
    .pl-xl-40 { padding-left: 40px; }
    .pl-xl-50 { padding-left: 50px; }
    .pl-xl-100 { padding-left: 100px; }

    .pr-xl-0 { padding-right: 0; }
    .pr-xl-10 { padding-right: 10px; }
    .pr-xl-20 { padding-right: 20px; }
    .pr-xl-30 { padding-right: 30px; }
    .pr-xl-40 { padding-right: 40px; }
    .pr-xl-50 { padding-right: 50px; }
    .pr-xl-100 { padding-right: 100px; }

    .ptb-xl-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-xl-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-xl-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-xl-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-xl-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-xl-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-xl-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-xl-0 { padding-left: 0; padding-right: 0; }
    .plr-xl-10 { padding-left: 10px; padding-right: 10px;}
    .plr-xl-20 { padding-left: 20px; padding-right: 20px;}
    .plr-xl-30 { padding-left: 30px; padding-right: 30px;}
    .plr-xl-40 { padding-left: 40px; padding-right: 40px;}
    .plr-xl-50 { padding-left: 50px; padding-right: 50px;}
    .plr-xl-100 { padding-left: 100px; padding-right: 100px;}
}

/* ============================================= Extra extra large ≥1400px ========================================== */

@media screen and (min-width: 1400px) {
    /* ------------------ margin -------------------- */
    .m-xxl-0 { margin: 0; }
    .m-xxl-10 { margin: 10px; }
    .m-xxl-20 { margin: 20px; }
    .m-xxl-30 { margin: 30px; }
    .m-xxl-40 { margin: 40px; }
    .m-xxl-50 { margin: 50px; }
    .m-xxl-100 { margin: 100px; }

    .mt-xxl-0 { margin-top: 0; }
    .mt-xxl-10 { margin-top: 10px; }
    .mt-xxl-20 { margin-top: 20px; }
    .mt-xxl-30 { margin-top: 30px; }
    .mt-xxl-40 { margin-top: 40px; }
    .mt-xxl-50 { margin-top: 50px; }
    .mt-xxl-100 { margin-top: 100px; }

    .mb-xxl-0 { margin-bottom: 0; }
    .mb-xxl-10 { margin-bottom: 10px; }
    .mb-xxl-20 { margin-bottom: 20px; }
    .mb-xxl-30 { margin-bottom: 30px; }
    .mb-xxl-40 { margin-bottom: 40px; }
    .mb-xxl-50 { margin-bottom: 50px; }
    .mb-xxl-100 { margin-bottom: 100px; }

    .ml-xxl-0 { margin-left: 0; }
    .ml-xxl-10 { margin-left: 10px; }
    .ml-xxl-20 { margin-left: 20px; }
    .ml-xxl-30 { margin-left: 30px; }
    .ml-xxl-40 { margin-left: 40px; }
    .ml-xxl-50 { margin-left: 50px; }
    .ml-xxl-100 { margin-left: 100px; }
    
    .mr-xxl-0 { margin-right: 0; }
    .mr-xxl-10 { margin-right: 10px; }
    .mr-xxl-20 { margin-right: 20px; }
    .mr-xxl-30 { margin-right: 30px; }
    .mr-xxl-40 { margin-right: 40px; }
    .mr-xxl-50 { margin-right: 50px; }
    .mr-xxl-100 { margin-right: 100px; }

    .mtb-xxl-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-xxl-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-xxl-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-xxl-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-xxl-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-xxl-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-xxl-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-xxl-0 { margin-left: 0; margin-right: 0; }
    .mlr-xxl-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-xxl-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-xxl-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-xxl-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-xxl-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-xxl-100 { margin-left: 100px; margin-right: 100px;}

    /* ---------------------- padding ----------------- */

    .p-xxl-0 { padding: 0; }
    .p-xxl-10 { padding: 10px; }
    .p-xxl-20 { padding: 20px; }
    .p-xxl-30 { padding: 30px; }
    .p-xxl-40 { padding: 40px; }
    .p-xxl-50 { padding: 50px; }
    .p-xxl-100 { padding: 100px; }

    .pt-xxl-0 { padding-top: 0; }
    .pt-xxl-10 { padding-top: 10px; }
    .pt-xxl-20 { padding-top: 20px; }
    .pt-xxl-30 { padding-top: 30px; }
    .pt-xxl-40 { padding-top: 40px; }
    .pt-xxl-50 { padding-top: 50px; }
    .pt-xxl-100 { padding-top: 100px; }

    .pb-xxl-0 { padding-bottom: 0; }
    .pb-xxl-10 { padding-bottom: 10px; }
    .pb-xxl-20 { padding-bottom: 20px; }
    .pb-xxl-30 { padding-bottom: 30px; }
    .pb-xxl-40 { padding-bottom: 40px; }
    .pb-xxl-50 { padding-bottom: 50px; }
    .pb-xxl-100 { padding-bottom: 100px; }

    .pl-xxl-0 { padding-left: 0; }
    .pl-xxl-10 { padding-left: 10px; }
    .pl-xxl-20 { padding-left: 20px; }
    .pl-xxl-30 { padding-left: 30px; }
    .pl-xxl-40 { padding-left: 40px; }
    .pl-xxl-50 { padding-left: 50px; }
    .pl-xxl-100 { padding-left: 100px; }

    .pr-xxl-0 { padding-right: 0; }
    .pr-xxl-10 { padding-right: 10px; }
    .pr-xxl-20 { padding-right: 20px; }
    .pr-xxl-30 { padding-right: 30px; }
    .pr-xxl-40 { padding-right: 40px; }
    .pr-xxl-50 { padding-right: 50px; }
    .pr-xxl-100 { padding-right: 100px; }

    .ptb-xxl-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-xxl-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-xxl-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-xxl-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-xxl-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-xxl-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-xxl-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-xxl-0 { padding-left: 0; padding-right: 0; }
    .plr-xxl-10 { padding-left: 10px; padding-right: 10px;}
    .plr-xxl-20 { padding-left: 20px; padding-right: 20px;}
    .plr-xxl-30 { padding-left: 30px; padding-right: 30px;}
    .plr-xxl-40 { padding-left: 40px; padding-right: 40px;}
    .plr-xxl-50 { padding-left: 50px; padding-right: 50px;}
    .plr-xxl-100 { padding-left: 100px; padding-right: 100px;}
}

/* ============================================= X-Small <576px ========================================== */

@media screen and (max-width: 576px) {
    /* ------------ margin ------------- */
    .m-xs-0 { margin: 0; }
    .m-xs-10 { margin: 10px; }
    .m-xs-20 { margin: 20px; }
    .m-xs-30 { margin: 30px; }
    .m-xs-40 { margin: 40px; }
    .m-xs-50 { margin: 50px; }
    .m-xs-100 { margin: 100px; }

    .mt-xs-0 { margin-top: 0; }
    .mt-xs-10 { margin-top: 10px; }
    .mt-xs-20 { margin-top: 20px; }
    .mt-xs-30 { margin-top: 30px; }
    .mt-xs-40 { margin-top: 40px; }
    .mt-xs-50 { margin-top: 50px; }
    .mt-xs-100 { margin-top: 100px; }

    .mb-xs-0 { margin-bottom: 0; }
    .mb-xs-10 { margin-bottom: 10px; }
    .mb-xs-20 { margin-bottom: 20px; }
    .mb-xs-30 { margin-bottom: 30px; }
    .mb-xs-40 { margin-bottom: 40px; }
    .mb-xs-50 { margin-bottom: 50px; }
    .mb-xs-100 { margin-bottom: 100px; }

    .ml-xs-0 { margin-left: 0; }
    .ml-xs-10 { margin-left: 10px; }
    .ml-xs-20 { margin-left: 20px; }
    .ml-xs-30 { margin-left: 30px; }
    .ml-xs-40 { margin-left: 40px; }
    .ml-xs-50 { margin-left: 50px; }
    .ml-xs-100 { margin-left: 100px; }
    
    .mr-xs-0 { margin-right: 0; }
    .mr-xs-10 { margin-right: 10px; }
    .mr-xs-20 { margin-right: 20px; }
    .mr-xs-30 { margin-right: 30px; }
    .mr-xs-40 { margin-right: 40px; }
    .mr-xs-50 { margin-right: 50px; }
    .mr-xs-100 { margin-right: 100px; }

    .mtb-xs-0 { margin-top: 0; margin-bottom: 0; }
    .mtb-xs-10 { margin-top: 10px; margin-bottom: 10px;}
    .mtb-xs-20 { margin-top: 20px; margin-bottom: 20px;}
    .mtb-xs-30 { margin-top: 30px; margin-bottom: 30px;}
    .mtb-xs-40 { margin-top: 40px; margin-bottom: 40px;}
    .mtb-xs-50 { margin-top: 50px; margin-bottom: 50px;}
    .mtb-xs-100 { margin-top: 100px; margin-bottom: 100px;}

    .mlr-xs-0 { margin-left: 0; margin-right: 0; }
    .mlr-xs-10 { margin-left: 10px; margin-right: 10px;}
    .mlr-xs-20 { margin-left: 20px; margin-right: 20px;}
    .mlr-xs-30 { margin-left: 30px; margin-right: 30px;}
    .mlr-xs-40 { margin-left: 40px; margin-right: 40px;}
    .mlr-xs-50 { margin-left: 50px; margin-right: 50px;}
    .mlr-xs-100 { margin-left: 100px; margin-right: 100px;}


    /* ------------ padding ---------------- */

    .p-xs-0 { padding: 0; }
    .p-xs-10 { padding: 10px; }
    .p-xs-20 { padding: 20px; }
    .p-xs-30 { padding: 30px; }
    .p-xs-40 { padding: 40px; }
    .p-xs-50 { padding: 50px; }
    .p-xs-100 { padding: 100px; }

    .pt-xs-0 { padding-top: 0; }
    .pt-xs-10 { padding-top: 10px; }
    .pt-xs-20 { padding-top: 20px; }
    .pt-xs-30 { padding-top: 30px; }
    .pt-xs-40 { padding-top: 40px; }
    .pt-xs-50 { padding-top: 50px; }
    .pt-xs-100 { padding-top: 100px; }

    .pb-xs-0 { padding-bottom: 0; }
    .pb-xs-10 { padding-bottom: 10px; }
    .pb-xs-20 { padding-bottom: 20px; }
    .pb-xs-30 { padding-bottom: 30px; }
    .pb-xs-40 { padding-bottom: 40px; }
    .pb-xs-50 { padding-bottom: 50px; }
    .pb-xs-100 { padding-bottom: 100px; }

    .pl-xs-0 { padding-left: 0; }
    .pl-xs-10 { padding-left: 10px; }
    .pl-xs-20 { padding-left: 20px; }
    .pl-xs-30 { padding-left: 30px; }
    .pl-xs-40 { padding-left: 40px; }
    .pl-xs-50 { padding-left: 50px; }
    .pl-xs-100 { padding-left: 100px; }

    .pr-xs-0 { padding-right: 0; }
    .pr-xs-10 { padding-right: 10px; }
    .pr-xs-20 { padding-right: 20px; }
    .pr-xs-30 { padding-right: 30px; }
    .pr-xs-40 { padding-right: 40px; }
    .pr-xs-50 { padding-right: 50px; }
    .pr-xs-100 { padding-right: 100px; }

    .ptb-xs-0 { padding-top: 0; padding-bottom: 0; }
    .ptb-xs-10 { padding-top: 10px; padding-bottom: 10px;}
    .ptb-xs-20 { padding-top: 20px; padding-bottom: 20px;}
    .ptb-xs-30 { padding-top: 30px; padding-bottom: 30px;}
    .ptb-xs-40 { padding-top: 40px; padding-bottom: 40px;}
    .ptb-xs-50 { padding-top: 50px; padding-bottom: 50px;}
    .ptb-xs-100 { padding-top: 100px; padding-bottom: 100px;}

    .plr-xs-0 { padding-left: 0; padding-right: 0; }
    .plr-xs-10 { padding-left: 10px; padding-right: 10px;}
    .plr-xs-20 { padding-left: 20px; padding-right: 20px;}
    .plr-xs-30 { padding-left: 30px; padding-right: 30px;}
    .plr-xs-40 { padding-left: 40px; padding-right: 40px;}
    .plr-xs-50 { padding-left: 50px; padding-right: 50px;}
    .plr-xs-100 { padding-left: 100px; padding-right: 100px;}
}