:root {
    /*calculator for small:*/
    --spc: 1;
    --spcf: 1;
    /*calculator for medium*/
    --fp-1: calc(var(--spcf) * 0.25rem);
    --fp-2: calc(var(--spcf) * 0.5rem);
    --fp-3: calc(var(--spcf) * 1rem);
    --fp-4: calc(var(--spcf) * 1.5rem);
    --fp-5: calc(var(--spcf) * 3rem);
    --fp-6: calc(var(--spcf) * 1.875rem);
    --fp-7: calc(var(--spcf) * 0.9375rem);
    --p-1: calc(var(--spc) * 1rem);
    --p-2: calc(var(--spc) * 2rem);
    --p-3: calc(var(--spc) * 3rem);
    --p-4: calc(var(--spc) * 4rem);
    --p-5: calc(var(--spc) * 5rem);
    --p-6: calc(var(--spc) * 6rem);
    --p-7: calc(var(--spc) * 7rem);
    --p-8: calc(var(--spc) * 8rem);
    --p-9: calc(var(--spc) * 9rem);
    --p-10: calc(var(--spc) * 10rem);
}
@media only screen and (max-width: 40.063em) {
    :root {
        /*calculator for small:*/
        --spc: 0.1;
        --spcf: 0.2;
        /*calculator for medium*/
        --fp-1: calc(var(--spcf) * 0.25rem);
        --fp-2: calc(var(--spcf) * 0.5rem);
        --fp-3: calc(var(--spcf) * 1rem);
        --fp-4: calc(var(--spcf) * 1.5rem);
        --fp-5: calc(var(--spcf) * 3rem);
        --fp-6: calc(var(--spcf) * 1.875rem);
        --fp-7: calc(var(--spcf) * 0.9375rem);
        --p-1: calc(var(--spc) * 1rem);
        --p-2: calc(var(--spc) * 2rem);
        --p-3: calc(var(--spc) * 3rem);
        --p-4: calc(var(--spc) * 4rem);
        --p-5: calc(var(--spc) * 5rem);
        --p-6: calc(var(--spc) * 6rem);
        --p-7: calc(var(--spc) * 7rem);
        --p-8: calc(var(--spc) * 8rem);
        --p-9: calc(var(--spc) * 9rem);
        --p-10: calc(var(--spc) * 10rem);
    }
}
@media only screen and (max-width: 40.063em) {
    :root {
        /* Additional small screen classes */
        /*calculator for small*/
        .spa0 {padding: 0;}
        .sptb0 {padding-top: 0; padding-bottom: 0;}
        .splr1 {padding-left: var(--fp-1); padding-right: var(--fp-1);}
        .splr2 {padding-left: var(--fp-2); padding-right: var(--fp-2);}
        .splr3 {padding-left: var(--fp-3); padding-right: var(--fp-3);}
        .splr4 {padding-left: var(--fp-4); padding-right: var(--fp-4);}
        .splr5 {padding-left: var(--fp-5); padding-right: var(--fp-5);}
        .splr6 {padding-left: var(--fp-6); padding-right: var(--fp-6);}
        .sptb1rem {padding-top: var(--p-1); padding-bottom: var(--p-1);}
        .sptb2rem {padding-top: var(--p-2); padding-bottom: var(--p-2);}
        .sptb3rem {padding-top: var(--p-3); padding-bottom: var(--p-3);}
        .sptb4rem {padding-top: var(--p-4); padding-bottom: var(--p-4);}
        .spa1 {padding: calc(var(--spc) * var(--fp-1));}
        .spa2 {padding: calc(var(--spc) * var(--fp-2));}
        .spa3 {padding: calc(var(--spc) * var(--fp-3));}
        .spa4 {padding: calc(var(--spc) * var(--fp-4));}
        .spa5 {padding: calc(var(--spc) * var(--fp-5));}
        .spa6 {padding: calc(var(--spc) * var(--fp-6));}
        .spa1remi {padding: 1rem !important;}
        .splr1remi {padding-left: 1rem !important; padding-right: 1rem !important;}
    }
}

/* Media Queries - Medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 1440px) {
    :root {
        /* Additional medium screen classes */
        /*calculator for medium*/
        --spc: 0.5;
        --spcf: 1; /* f means foundation*/
        .spa0 {padding: 0;}
        .sptb0 {padding-top: 0; padding-bottom: 0;}
        .splr1 {padding-left: var(--fp-1); padding-right: var(--fp-1);}
        .splr2 {padding-left: var(--fp-2); padding-right: var(--fp-2);}
        .splr3 {padding-left: var(--fp-3); padding-right: var(--fp-3);}
        .splr4 {padding-left: var(--fp-4); padding-right: var(--fp-4);}
        .splr5 {padding-left: var(--fp-5); padding-right: var(--fp-5);}
        .splr6 {padding-left: var(--fp-6); padding-right: var(--fp-6);}
        .sptb1rem {padding-top: var(--p-1); padding-bottom: var(--p-1);}
        .sptb2rem {padding-top: var(--p-2); padding-bottom: var(--p-2);}
        .sptb3rem {padding-top: var(--p-3); padding-bottom: var(--p-3);}
        .sptb4rem {padding-top: var(--p-4); padding-bottom: var(--p-4);}
        .mpa1 {padding: calc(var(--spc) * var(--fp-1));}
        .mpa2 {padding: calc(var(--spc) * var(--fp-2));}
        .mpa3 {padding: calc(var(--spc) * var(--fp-3));}
        .mpa4 {padding: calc(var(--spc) * var(--fp-4));}
        .mpa5 {padding: calc(var(--spc) * var(--fp-5));}
        .mpa6 {padding: var(--fp-6);}
    }
}
.p-0 {padding: 0; }
.img-pb { padding-bottom: var(--fp-7); }
.img-pt { padding-top: var(--fp-2); }
.img-pr { padding-right: var(--fp-7); }
.img-pl { padding-left: var(--fp-7); }
.pa0 {padding: 0}
.pt0 { padding-top: 0; }
.pb0 { padding-bottom: 0; }
.pr0 { padding-right: 0; }
.pl0 { padding-left: 0; }
.plr0 { padding-left: 0; padding-right: 0; }
.ptb0 { padding-top: 0; padding-bottom: 0; }
/* All sides padding */
.pa1, .padding-style-1 {padding: var(--fp-1); }
.pa2, .padding-style-2 {padding: var(--fp-2); }
.pa3, .padding-style-3 {padding: var(--fp-3); }
.pa4, .padding-style-4 {padding: var(--fp-4); }
.pa5, .padding-style-5 {padding: var(--fp-5); }
.pa6 {padding: var(--fp-6); }
.pa7 {padding: var(--fp-7); }

.pa1rem,
.padding-1 {
    padding: var(--p-1);
}

.pa2rem,
.padding-2 {
    padding: var(--p-2);
}

.pa3rem,
.padding-3 {
    padding: var(--p-3);
}

.pa4rem,
.pa4em,
.padding-4 {
    padding: var(--p-4);
}

.pa5rem,
.pa5em,
.padding-5 {
    padding: var(--p-5);
}

.pa6rem,
.pa6em,
.padding-6 {
    padding: var(--p-6);
}

.pa7rem,
.pa7em,
.padding-7 {
    padding: var(--p-7);
}
.pa8rem,
.pa8em  {padding: var(--p-8); }
.pa9rem {padding: var(--p-9); }
.pa10rem {padding: var(--p-10); }

/* Top padding */
.pt1 { padding-top: var(--fp-1); }
.pt2 { padding-top: var(--fp-2); }
.pt3 { padding-top: var(--fp-3); }
.pt4 { padding-top: var(--fp-4); }
.pt5 { padding-top: var(--fp-5); }
.pt6 { padding-top: var(--fp-6); }
.pt7 { padding-top: var(--fp-7); }
.pt1rem { padding-top: var(--p-1); }
.pt2rem { padding-top: var(--p-2); }
.pt3rem { padding-top: var(--p-3); }
.pt4rem,
.pt4em{ padding-top: var(--p-4); }
.pt5rem,
.pt5em { padding-top: var(--p-5); }
.pt6rem,
.pt6em { padding-top: var(--p-6); }
.pt7rem,
.pt7em { padding-top: var(--p-7); }
.pt8rem,
.pt8em  { padding-top: var(--p-8); }
.pt9rem { padding-top: var(--p-9); }
.pt10rem { padding-top: var(--p-10); }

/* Bottom padding */
.pb1 { padding-bottom: var(--fp-1); }
.pb2 { padding-bottom: var(--fp-2); }
.pb3 { padding-bottom: var(--fp-3); }
.pb4 { padding-bottom: var(--fp-4); }
.pb5 { padding-bottom: var(--fp-5); }
.pb6 { padding-bottom: var(--fp-6); }
.pb7 { padding-bottom: var(--fp-7); }
.pb1rem { padding-bottom: var(--p-1); }
.pb2rem { padding-bottom: var(--p-2); }
.pb3rem { padding-bottom: var(--p-3); }
.pb4rem,
.pb4em { padding-bottom: var(--p-4); }
.pb5rem,
.pb5em { padding-bottom: var(--p-5); }
.pb6rem,
.pb6em { padding-bottom: var(--p-6); }
.pb7rem,
.pb7em { padding-bottom: var(--p-7); }
.pb8rem,
.pb8em  { padding-bottom: var(--p-8); }
.pb9rem { padding-bottom: var(--p-9); }
.pb10rem { padding-bottom: var(--p-10); }
/* Left padding */
.pl1 { padding-left: var(--fp-1); }
.pl2 { padding-left: var(--fp-2); }
.pl3 { padding-left: var(--fp-3); }
.pl4 { padding-left: var(--fp-4); }
.pl5 { padding-left: var(--fp-5); }
.pl6 { padding-left: var(--fp-6); }
.pl7 { padding-left: var(--fp-7); }
.pl1rem { padding-left: var(--p-1); }
.pl2rem { padding-left: var(--p-2); }
.pl3rem { padding-left: var(--p-3); }
.pl4rem,
.pl4em { padding-left: var(--p-4); }
.pl5rem,
.pl5em { padding-left: var(--p-5); }
.pl6rem,
.pl6em { padding-left: var(--p-6); }
.pl7rem,
.pb7em { padding-left: var(--p-7); }
.pl8rem,
.pb8em{ padding-left: var(--p-8); }
.pl9rem { padding-left: var(--p-9); }
.pl10rem { padding-left: var(--p-10); }
/* Right padding */
.pr1 { padding-right: var(--fp-1); }
.pr2 { padding-right: var(--fp-2); }
.pr3 { padding-right: var(--fp-3); }
.pr4 { padding-right: var(--fp-4); }
.pr5 { padding-right: var(--fp-5); }
.pr6 { padding-right: var(--fp-6); }
.pr7 { padding-right: var(--fp-7); }
.pr1rem { padding-right: var(--p-1); }
.pr2rem { padding-right: var(--p-2); }
.pr3rem { padding-right: var(--p-3); }
.pr4rem,
.pr4em { padding-right: var(--p-4); }
.pr5rem,
.pr5em { padding-right: var(--p-5); }
.pr6rem,
.pr6em { padding-right: var(--p-6); }
.pr7rem,
.pr7em { padding-right: var(--p-7); }
.pr8rem,
.pr8em{ padding-right: var(--p-8); }
.pr9rem { padding-right: var(--p-9); }
.pr10rem { padding-right: var(--p-10); }

/* Left and Right padding */
.plr1 { padding-left: var(--fp-1); padding-right: var(--fp-1); }
.plr2 { padding-left: var(--fp-2); padding-right: var(--fp-2); }
.plr3 { padding-left: var(--fp-3); padding-right: var(--fp-3); }
.plr4 { padding-left: var(--fp-4); padding-right: var(--fp-4); }
.plr5 { padding-left: var(--fp-5); padding-right: var(--fp-5); }
.plr6 { padding-left: var(--fp-6); padding-right: var(--fp-6); }
.plr7 { padding-left: var(--fp-7); padding-right: var(--fp-7); }
.plr1rem { padding-left: var(--p-1); padding-right: var(--p-1); }
.plr2rem { padding-left: var(--p-2); padding-right: var(--p-2); }
.plr3rem { padding-left: var(--p-3); padding-right: var(--p-3); }
.plr4rem,
.plr4em { padding-left: var(--p-4); padding-right: var(--p-4); }
.plr5rem,
.plr5em { padding-left: var(--p-5); padding-right: var(--p-5); }
.plr6rem,
.plr6em { padding-left: var(--p-6); padding-right: var(--p-6); }
.plr7rem,
.plr7em { padding-left: var(--p-7); padding-right: var(--p-7); }
.plr8rem,
.plr8em { padding-left: var(--p-8); padding-right: var(--p-8); }
.plr9rem { padding-left: var(--p-9); padding-right: var(--p-9); }
.plr10rem { padding-left: var(--p-10); padding-right: var(--p-10); }

/* Top and Bottom padding */
.ptb0 { padding-top: 0; padding-bottom: 0; }
.ptb1 { padding-top: var(--fp-1); padding-bottom: var(--fp-1); }
.ptb2 { padding-top: var(--fp-2); padding-bottom: var(--fp-2); }
.ptb3 { padding-top: var(--fp-3); padding-bottom: var(--fp-3); }
.ptb4 { padding-top: var(--fp-4); padding-bottom: var(--fp-4); }
.ptb5 { padding-top: var(--fp-5); padding-bottom: var(--fp-5); }
.ptb6 { padding-top: var(--fp-6); padding-bottom: var(--fp-6); }
.ptb7 { padding-top: var(--fp-7); padding-bottom: var(--fp-7); }
.ptb1rem,
.ptb1em { padding-top: var(--p-1); padding-bottom: var(--p-1); }
.ptb2rem,
.ptb2em { padding-top: var(--p-2); padding-bottom: var(--p-2); }
.ptb3rem,
.ptb3em { padding-top: var(--p-3); padding-bottom: var(--p-3); }
.ptb4rem,
.ptb4em { padding-top: var(--p-4); padding-bottom: var(--p-4); }
.ptb5rem,
.ptb5em { padding-top: var(--p-5); padding-bottom: var(--p-5); }
.ptb6rem,
.ptb6em { padding-top: var(--p-6); padding-bottom: var(--p-6); }
.ptb7rem,
.ptb7em { padding-top: var(--p-7); padding-bottom: var(--p-7); }
.ptb8rem,
.ptb8em { padding-top: var(--p-8); padding-bottom: var(--p-8); }
.ptb9rem,
.ptb9em { padding-top: var(--p-9); padding-bottom: var(--p-9); }
.ptb10rem,
.ptb10em{ padding-top: var(--p-10); padding-bottom: var(--p-10); }


.ceimgbg-frame .img-pb, .ceimgbg-frame .img-pt, .ceimgbg-frame .img-pl, .ceimgbg-frame .img-pr { padding: inherit; }
/* Media Queries - Small screens */


.bg-padding { padding: 10px; }