:root {
    /*calculator for small:*/
    --spc: 1;
    --spcf: 1;
    /*calculator for medium*/
    --fm-1: calc(var(--spcf) * 0.25rem);
    --fm-2: calc(var(--spcf) * 0.5rem);
    --fm-3: calc(var(--spcf) * 1rem);
    --fm-4: calc(var(--spcf) * 1.5rem);
    --fm-5: calc(var(--spcf) * 3rem);
    --fm-6: calc(var(--spcf) * 1.875rem);
    --fm-7: calc(var(--spcf) * 0.9375rem);
    --m-1: calc(var(--spc) * 1rem);
    --m-2: calc(var(--spc) * 2rem);
    --m-3: calc(var(--spc) * 3rem);
    --m-4: calc(var(--spc) * 4rem);
    --m-5: calc(var(--spc) * 5rem);
    --m-6: calc(var(--spc) * 6rem);
    --m-7: calc(var(--spc) * 7rem);
    --m-8: calc(var(--spc) * 8rem);
    --m-9: calc(var(--spc) * 9rem);
    --m-10: calc(var(--spc) * 10rem);

}
@media only screen and (max-width: 40.063em) {
    :root {
        /*calculator for small*/
        --spc: 0.1;
        --spcf: 0.1;

    }
}

/* Media Queries - Medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 1440px) {
    :root {

        /*calculator for medium*/
        --spc: 0.5;
        --spcf: 0.5;
    }
}
.m-0 {margin: 0; }
.img-pb { margin-bottom: var(--fm-7); }
.img-pt { margin-top: var(--fm-2); }
.img-pr { margin-right: var(--fm-7); }
.img-pl { margin-left: var(--fm-7); }
.ma0 {margin: 0}
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.mr0 { margin-right: 0; }
.ml0 { margin-left: 0; }
.mlr0 { margin-left: 0; margin-right: 0; }
.mtb0 { margin-top: 0; margin-bottom: 0; }
/* All sides margin */
.ma1, .ma10, .margin-style-1 {margin: var(--fm-1); }
.ma2, .margin-style-2 {margin: var(--fm-2); }
.ma3, .margin-style-3 {margin: var(--fm-3); }
.ma4, .margin-style-4 {margin: var(--fm-4); }
.ma5, .margin-style-5 {margin: var(--fm-5); }
.ma6 {margin: var(--fm-6); }
.ma7 {margin: var(--fm-7); }
.ma1rem {margin: var(--m-1); }
.ma2rem {margin: var(--m-2); }
.ma3rem {margin: var(--m-3); }
.ma4rem {margin: var(--m-4); }
.ma5rem {margin: var(--m-5); }
.ma6rem {margin: var(--m-6); }
.ma7rem {margin: var(--m-7); }
.ma8rem {margin: var(--m-8); }
.ma9rem {margin: var(--m-9); }
.ma10rem {margin: var(--m-10); }

/* Top margin */
.mt1 { margin-top: var(--fm-1); }
.mt2 { margin-top: var(--fm-2); }
.mt3 { margin-top: var(--fm-3); }
.mt4 { margin-top: var(--fm-4); }
.mt5 { margin-top: var(--fm-5); }
.mt6 { margin-top: var(--fm-6); }
.mt7 { margin-top: var(--fm-7); }
.mt1rem { margin-top: var(--m-1); }
.mt2rem { margin-top: var(--m-2); }
.mt3rem { margin-top: var(--m-3); }
.mt4rem { margin-top: var(--m-4); }
.mt5rem { margin-top: var(--m-5); }
.mt6rem { margin-top: var(--m-6); }
.mt7rem { margin-top: var(--m-7); }
.mt8rem { margin-top: var(--m-8); }
.mt9rem { margin-top: var(--m-9); }
.mt10rem { margin-top: var(--m-10); }

/* Bottom margin */

.mb1 { margin-bottom: var(--fm-1) !important; }
.mb2 { margin-bottom: var(--fm-2) !important; }
.mb3 { margin-bottom: var(--fm-3) !important; }
.mb4 { margin-bottom: var(--fm-4) !important; }
.mb5 { margin-bottom: var(--fm-5) !important; }
.mb6 { margin-bottom: var(--fm-6) !important; }
.mb7 { margin-bottom: var(--fm-7) !important; }
.mb1rem { margin-bottom: var(--m-1) !important; }
.mb2rem { margin-bottom: var(--m-2) !important; }
.mb3rem { margin-bottom: var(--m-3) !important; }
.mb4rem { margin-bottom: var(--m-4) !important; }
.mb5rem { margin-bottom: var(--m-5) !important; }
.mb6rem { margin-bottom: var(--m-6) !important; }
.mb7rem { margin-bottom: var(--m-7) !important; }
.mb8rem { margin-bottom: var(--m-8) !important; }
.mb9rem { margin-bottom: var(--m-9) !important; }
.mb10rem { margin-bottom: var(--m-10) !important; }
/* Left margin */
.ml1 { margin-left: var(--fm-1); }
.ml2 { margin-left: var(--fm-2); }
.ml3 { margin-left: var(--fm-3); }
.ml4 { margin-left: var(--fm-4); }
.ml5 { margin-left: var(--fm-5); }
.ml6 { margin-left: var(--fm-6); }
.ml7 { margin-left: var(--fm-7); }
.ml1rem { margin-left: var(--m-1); }
.ml2rem { margin-left: var(--m-2); }
.ml3rem { margin-left: var(--m-3); }
.ml4rem { margin-left: var(--m-4); }
.ml5rem { margin-left: var(--m-5); }
.ml6rem { margin-left: var(--m-6); }
.ml7rem { margin-left: var(--m-7); }
.ml8rem { margin-left: var(--m-8); }
.ml9rem { margin-left: var(--m-9); }
.ml10rem { margin-left: var(--m-10); }
/* Right margin */
.mr1 { margin-right: var(--fm-1); }
.mr2 { margin-right: var(--fm-2); }
.mr3 { margin-right: var(--fm-3); }
.mr4 { margin-right: var(--fm-4); }
.mr5 { margin-right: var(--fm-5); }
.mr6 { margin-right: var(--fm-6); }
.mr7 { margin-right: var(--fm-7); }
.mr1rem { margin-right: var(--m-1); }
.mr2rem { margin-right: var(--m-2); }
.mr3rem { margin-right: var(--m-3); }
.mr4rem { margin-right: var(--m-4); }
.mr5rem { margin-right: var(--m-5); }
.mr6rem { margin-right: var(--m-6); }
.mr7rem { margin-right: var(--m-7); }
.mr8rem { margin-right: var(--m-8); }
.mr9rem { margin-right: var(--m-9); }
.mr10rem { margin-right: var(--m-10); }

/* Left and Right margin */
.mlr1 { margin-left: var(--fm-1); margin-right: var(--fm-1); }
.mlr2 { margin-left: var(--fm-2); margin-right: var(--fm-2); }
.mlr3 { margin-left: var(--fm-3); margin-right: var(--fm-3); }
.mlr4 { margin-left: var(--fm-4); margin-right: var(--fm-4); }
.mlr5 { margin-left: var(--fm-5); margin-right: var(--fm-5); }
.mlr6 { margin-left: var(--fm-6); margin-right: var(--fm-6); }
.mlr7 { margin-left: var(--fm-7); margin-right: var(--fm-7); }
.mlr1rem { margin-left: var(--m-1); margin-right: var(--m-1); }
.mlr2rem { margin-left: var(--m-2); margin-right: var(--m-2); }
.mlr3rem { margin-left: var(--m-3); margin-right: var(--m-3); }
.mlr4rem { margin-left: var(--m-4); margin-right: var(--m-4); }
.mlr5rem { margin-left: var(--m-5); margin-right: var(--m-5); }
.mlr6rem { margin-left: var(--m-6); margin-right: var(--m-6); }
.mlr7rem { margin-left: var(--m-7); margin-right: var(--m-7); }
.mlr8rem { margin-left: var(--m-8); margin-right: var(--m-8); }
.mlr9rem { margin-left: var(--m-9); margin-right: var(--m-9); }
.mlr10rem { margin-left: var(--m-10); margin-right: var(--m-10); }

/* Top and Bottom margin */
.mtb0 { margin-top: 0; margin-bottom: 0; }
.mtb1 { margin-top: var(--fm-1); margin-bottom: var(--fm-1); }
.mtb2 { margin-top: var(--fm-2); margin-bottom: var(--fm-2); }
.mtb3 { margin-top: var(--fm-3); margin-bottom: var(--fm-3); }
.mtb4 { margin-top: var(--fm-4); margin-bottom: var(--fm-4); }
.mtb5 { margin-top: var(--fm-5); margin-bottom: var(--fm-5); }
.mtb6 { margin-top: var(--fm-6); margin-bottom: var(--fm-6); }
.mtb7 { margin-top: var(--fm-7); margin-bottom: var(--fm-7); }
.mtb1rem { margin-top: var(--m-1); margin-bottom: var(--m-1); }
.mtb2rem { margin-top: var(--m-2); margin-bottom: var(--m-2); }
.mtb3rem { margin-top: var(--m-3); margin-bottom: var(--m-3); }
.mtb4rem { margin-top: var(--m-4); margin-bottom: var(--m-4); }
.mtb5rem { margin-top: var(--m-5); margin-bottom: var(--m-5); }
.mtb6rem { margin-top: var(--m-6); margin-bottom: var(--m-6); }
.mtb7rem { margin-top: var(--m-7); margin-bottom: var(--m-7); }
.mtb8rem { margin-top: var(--m-8); margin-bottom: var(--m-8); }
.mtb9rem { margin-top: var(--m-9); margin-bottom: var(--m-9); }
.mtb10rem { margin-top: var(--m-10); margin-bottom: var(--m-10); }

.mp0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
@media only screen and (min-width: 1024px) {
    .ml1c {
        margin-left: var(--margin-left-1col);
    }

    .ml2c {
        margin-left: var(--margin-left-2col);
    }

    .ml3c {
        margin-left: var(--margin-left-3col);
    }

    .ml4c {
        margin-left: var(--margin-left-4col);
    }

    .ml5c {
        margin-left: var(--margin-left-5col);
    }

    .ml6c {
        margin-left: var(--margin-left-6col);
    }

    .ml7c {
        margin-left: var(--margin-left-7col);
    }

    .ml8c {
        margin-left: var(--margin-left-8col);
    }

    .ml9c {
        margin-left: var(--margin-left-9col);
    }

    .ml10c {
        margin-left: var(--margin-left-10col);
    }

    .ml11c {
        margin-left: var(--margin-left-11col);
    }

    .mr1c {
        margin-right: var(--margin-left-1col);
    }

    .mr2c {
        margin-right: var(--margin-left-2col);
    }

    .mr3c {
        margin-right: var(--margin-left-3col);
    }

    .mr4c {
        margin-right: var(--margin-left-4col);
    }

    .mr5c {
        margin-right: var(--margin-left-5col);
    }

    .mr6c {
        margin-right: var(--margin-left-6col);
    }

    .mr7c {
        margin-right: var(--margin-left-7col);
    }

    .mr8c {
        margin-right: var(--margin-left-8col);
    }

    .mr9c {
        margin-right: var(--margin-left-9col);
    }

    .mr10c {
        margin-right: var(--margin-left-10col);
    }

    .mr11c {
        margin-right: var(--margin-left-11col);
    }
    .ml50 {
        margin-left: 50% !important;
    }
    .mr50 {
        margin-right: 50% !important;
    }
}