/* spacing */
:root {
  --sp-xs: 4px;
  --sp1: 5px;
  --sp2: 8px;
  --sp3: 10px;
  --sp4: 12px;
  --sp5: 15px;
  --sp6: 20px;
  --sp7: 25px;
  --sp8: 30px;
  --sp9: 35px;
  --sp10: 40px;
  --sp10_5: 45px;
  --sp11: 50px;
  --sp12: 60px;
  --sp13: 80px;
  --sp14: 70px;
  --sp15: 85px;
  --sp16: 90px;
  --sp17: 95px;
  --sp18: 100px;
  --sp19: 110px;
  --sp20: 150px;
  --sp-md: 70px;
  --sp-large: 100px;
  --page-x-sp: var(--sp8);
  --page-container-width: 1140px;
  --sec-nav-spx: calc(var(--sp14) + 30px);
}

/* normal-container-width */
.container-width-content {
  max-width: var(--page-container-width);
  margin: 0 auto;
}

/* padding-around */
body.padding-around .main-container {
  --arround-padding: var(--sp8);
  padding: var(--arround-padding);
  padding-bottom: 0;
  padding-top: 0;
}

body.padding-around .page-content-area {
  padding-bottom: var(--arround-padding) !important;
}

.sections-alt-bg .page-main-chapter {
  margin-top: var(--sp8);
}

/* margins */
.m-0 {
  margin: 0;
}

/* bottom */
.mb-b0 {
  margin-bottom: 0;
}

.mb-sp1 {
  margin-bottom: var(--sp1);
}

.mb-sp2 {
  margin-bottom: var(--sp2);
}

.mb-sp3 {
  margin-bottom: var(--sp3);
}

.mb-sp4 {
  margin-bottom: var(--sp4);
}

.mb-sp5 {
  margin-bottom: var(--sp5);
}

.mb-sp6 {
  margin-bottom: var(--sp6);
}

.mb-sp7 {
  margin-bottom: var(--sp7);
}

.mb-sp8 {
  margin-bottom: var(--sp8);
}

.mb-sp9 {
  margin-bottom: var(--sp9);
}

.mb-sp10 {
  margin-bottom: var(--sp10);
}

.mb-sp11 {
  margin-bottom: var(--sp11);
}

.mb-sp12 {
  margin-bottom: var(--sp12);
}

.mb-sp13 {
  margin-bottom: var(--sp13);
}

.mb-sp14 {
  margin-bottom: var(--sp14);
}

/* margin top */
.mt-b0 {
  margin-top: 0;
}

.mt-sp1 {
  margin-top: var(--sp1);
}

.mt-sp2 {
  margin-top: var(--sp2);
}

.mt-sp3 {
  margin-top: var(--sp3);
}

.mt-sp4 {
  margin-top: var(--sp4);
}

.mt-sp5 {
  margin-top: var(--sp5);
}

.mt-sp6 {
  margin-top: var(--sp6);
}

.mt-sp7 {
  margin-top: var(--sp7);
}

.mt-sp8 {
  margin-top: var(--sp8);
}

.mt-sp9 {
  margin-top: var(--sp9);
}

.mt-sp10 {
  margin-top: var(--sp10);
}

.mt-sp11 {
  margin-top: var(--sp11);
}

.mt-sp12 {
  margin-top: var(--sp12);
}

.mt-sp13 {
  margin-top: var(--sp13);
}

.mt-sp14 {
  margin-top: var(--sp14);
}

/* padding */

.p-0 {
  padding: 0 !important;
}

.p-sp1 {
  padding: var(--sp1);
}

.p-sp2 {
  padding: var(--sp2);
}

.p-sp3 {
  padding: var(--sp3);
}

.p-sp4 {
  padding: var(--sp4);
}

.p-sp5 {
  padding: var(--sp5);
}

.p-sp6 {
  padding: var(--sp6);
}

.p-sp7 {
  padding: var(--sp7);
}

.p-sp8 {
  padding: var(--sp8);
}

.p-sp9 {
  padding: var(--sp9);
}

.p-sp10 {
  padding: var(--sp10);
}

.p-sp11 {
  padding: var(--sp11);
}

.p-sp12 {
  padding: var(--sp12);
}

.p-sp13 {
  padding: var(--sp13);
}

.p-sp14 {
  padding: var(--sp14);
}


.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-sp1 {
  padding-left: var(--sp1);
  padding-right: var(--sp1);
}

.px-sp2 {
  padding-left: var(--sp2);
  padding-right: var(--sp2);
}

.px-sp3 {
  padding-left: var(--sp3);
  padding-right: var(--sp3);
}

.px-sp4 {
  padding-left: var(--sp4);
  padding-right: var(--sp4);
}

.px-sp5 {
  padding-left: var(--sp5);
  padding-right: var(--sp5);
}

.px-sp6 {
  padding-left: var(--sp6);
  padding-right: var(--sp6);
}

.px-sp7 {
  padding-left: var(--sp7);
  padding-right: var(--sp7);
}

.px-sp8 {
  padding-left: var(--sp8);
  padding-right: var(--sp8);
}

.px-sp9 {
  padding-left: var(--sp9);
  padding-right: var(--sp9);
}

.px-sp10 {
  padding-left: var(--sp10);
  padding-right: var(--sp10);
}

.px-sp11 {
  padding-left: var(--sp11);
  padding-right: var(--sp11);
}

.px-sp12 {
  padding-left: var(--sp12);
  padding-right: var(--sp12);
}

.px-sp13 {
  padding-left: var(--sp13);
  padding-right: var(--sp13);
}

.px-sp14 {
  padding-left: var(--sp14);
  padding-right: var(--sp14);
}

.px-sp20 {
  padding-left: var(--sp20);
  padding-right: var(--sp20);
}

/* py */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-sp1 {
  padding-top: var(--sp1);
  padding-bottom: var(--sp1);
}

.py-sp2 {
  padding-top: var(--sp2);
  padding-bottom: var(--sp2);
}

.py-sp3 {
  padding-top: var(--sp3);
  padding-bottom: var(--sp3);
}

.py-sp4 {
  padding-top: var(--sp4);
  padding-bottom: var(--sp4);
}

.py-sp5 {
  padding-top: var(--sp5);
  padding-bottom: var(--sp5);
}

.py-sp6 {
  padding-top: var(--sp6);
  padding-bottom: var(--sp6);
}

.py-sp7 {
  padding-top: var(--sp7);
  padding-bottom: var(--sp7);
}

.py-sp8 {
  padding-top: var(--sp8);
  padding-bottom: var(--sp8);
}

.py-sp9 {
  padding-top: var(--sp9);
  padding-bottom: var(--sp9);
}

.py-sp10 {
  padding-top: var(--sp10);
  padding-bottom: var(--sp10);
}

.py-sp11 {
  padding-top: var(--sp11);
  padding-bottom: var(--sp11);
}

.py-sp12 {
  padding-top: var(--sp12);
  padding-bottom: var(--sp12);
}

.py-sp13 {
  padding-top: var(--sp13);
  padding-bottom: var(--sp13);
}

.py-sp14 {
  padding-top: var(--sp14);
  padding-bottom: var(--sp14);
}

/* p bottom */
.pb-0 {
  padding-bottom: 0;
}

.pb-sp1 {
  padding-bottom: var(--sp1);
}

.pb-sp2 {
  padding-bottom: var(--sp2);
}

.pb-sp3 {
  padding-bottom: var(--sp3);
}

.pb-sp4 {
  padding-bottom: var(--sp4);
}

.pb-sp5 {
  padding-bottom: var(--sp5);
}

.pb-sp6 {
  padding-bottom: var(--sp6);
}

.pb-sp7 {
  padding-bottom: var(--sp7);
}

.pb-sp8 {
  padding-bottom: var(--sp8);
}

.pb-sp9 {
  padding-bottom: var(--sp9);
}

.pb-sp10 {
  padding-bottom: var(--sp10);
}

.pb-sp11 {
  padding-bottom: var(--sp11);
}

.pb-sp12 {
  padding-bottom: var(--sp12);
}

.pb-sp13 {
  padding-bottom: var(--sp13);
}

.pb-sp14 {
  padding-bottom: var(--sp14);
}

/* style with padding */
.p-styl-1 {
  --px: var(--sp14);
  padding: var(--sp-large) var(--px) !important;
}