/*
 * Spaces Reset
 * ----------------------------------------------------------------------------
 * Common Spaces Should Be Set Here.
 *
 */

/* variables */
/* Based on 375px screen size */
/* px / em convertor: https://www.w3schools.com/tags/ref_pxtoemconversion.asp
percent convertor: https://percentagecalculator.net/ */

/* vw definition
375px = 1vw = 3.75px
5 / 3.75 = 1.33333333...
5px = 1.34vw */

:root {
  --space-size-2: 0.536vw;
  --space-size-4: 1.072vw;
  --space-size-6: 1.608vw;
  --space-size-8: 2.144vw;
  --space-size-10: 2.68vw;
  --space-size-12: 3.216vw;
  --space-size-14: 3.752vw;
  --space-size-16: 4.288vw;
  --space-size-18: 4.824vw;
  --space-size-20: 5.36vw;
  --space-size-22: 5.896vw;
  --space-size-25: 6.7vw;
  --space-size-28: 7.504vw;
  --space-size-30: 8.04vw;
  --space-size-35: 9.38vw;
  --space-size-40: 10.72vw;
  --space-size-45: 12.06vw;
  --space-size-50: 13.4vw;
  --space-size-55: 14.74vw;
  --space-size-60: 16.08vw;
  --space-size-65: 17.42vw;
  --space-size-70: 18.76vw;
  --space-size-75: 20.1vw;
  --space-size-80: 21.44vw;
  --space-size-85: 22.78vw;
  --space-size-90: 24vw;
  --space-size-95: 25.34vw;
  --space-size-100: 26.67vw;
  --space-size-150: 40.2vw;
  --space-size-200: 53.34vw;
  --space-size-250: 66.67vw;
  --space-size-300: 80.01vw;
  --space-size-350: 93.41vw;

  /* content-box padding14 reset */
  --space-size-reset: -3.926vw;
}

/* rem definition
root font size = 16px;
1rem = 16px
1/16 = 0.0625
 5px = 0.0625 * 5 = 0.3125rem */

@media (min-width: 375px) {
  :root {
    --space-size-2: 0.125rem;
    --space-size-4: 0.25rem;
    --space-size-6: 0.375rem;
    --space-size-8: 0.5rem;
    --space-size-10: 0.625rem;
    --space-size-12: 0.75rem;
    --space-size-14: 0.875rem;
    --space-size-16: 1rem;
    --space-size-18: 1.125rem;
    --space-size-20: 1.25rem;
    --space-size-22: 1.375rem;
    --space-size-25: 1.5625rem;
    --space-size-28: 1.75rem;
    --space-size-30: 1.875rem;
    --space-size-35: 2.1875rem;
    --space-size-40: 2.5rem;
    --space-size-45: 2.8125rem;
    --space-size-50: 3.125rem;
    --space-size-55: 3.4375rem;
    --space-size-60: 3.75rem;
    --space-size-65: 4.0625rem;
    --space-size-70: 4.375rem;
    --space-size-75: 4.6875rem;
    --space-size-80: 5rem;
    --space-size-85: 5.3125rem;
    --space-size-90: 5.625rem;
    --space-size-95: 5.9375rem;
    --space-size-100: 6.25rem;
    --space-size-150: 9.375rem;
    --space-size-200: 12.5rem;
    --space-size-250: 15.625rem;
    --space-size-300: 18.75rem;
    --space-size-350: 21.875rem;

    /* content-box padding14 reset */
    --space-size-reset: -0.875rem;
  }
}

/* content-box margin reset */
[marginXReset] {
  margin-right: var(--space-size-reset) !important;
  margin-left: var(--space-size-reset) !important;
}

[marginYReset] {
  margin-top: var(--space-size-reset) !important;
  margin-bottom: var(--space-size-reset) !important;
}

[marginTopReset] {
  margin-top: var(--space-size-reset) !important;
}

[marginBtmReset] {
  margin-bottom: var(--space-size-reset) !important;
}

/* margin top 100px */
[topSpace100] {
  margin-top: var(--space-size-100) !important;
}

/* margin top 60px */
[topSpace60] {
  margin-top: var(--space-size-60) !important;
}

/* margin top 55px */
[topSpace55] {
  margin-top: var(--space-size-55) !important;
}

/* margin top 50px */
[topSpace50] {
  margin-top: var(--space-size-50) !important;
}

/* margin top 45px */
[topSpace45] {
  margin-top: var(--space-size-45) !important;
}

/* margin top 40px */
[topSpace40] {
  margin-top: var(--space-size-40) !important;
}

/* margin top 35px */
[topSpace35] {
  margin-top: var(--space-size-35) !important;
}

/* margin top 30px */
[topSpace30] {
  margin-top: var(--space-size-30) !important;
}

/* margin top 25px */
[topSpace25] {
  margin-top: var(--space-size-25) !important;
}

/* margin top 20px */
[topSpace20] {
  margin-top: var(--space-size-20) !important;
}

/* margin top 18px */
[topSpace18] {
  margin-top: var(--space-size-18) !important;
}

/* margin top 16px */
[topSpace16] {
  margin-top: var(--space-size-16) !important;
}

/* margin top 14px */
[topSpace14] {
  margin-top: var(--space-size-14) !important;
}

/* margin top 12px */
[topSpace12] {
  margin-top: var(--space-size-12) !important;
}

/* margin top 10px */
[topSpace10] {
  margin-top: var(--space-size-10) !important;
}

/* margin top 8px */
[topSpace8] {
  margin-top: var(--space-size-8) !important;
}

/* margin top 6px */
[topSpace6] {
  margin-top: var(--space-size-6) !important;
}

/* margin top 4px */
[topSpace4] {
  margin-top: var(--space-size-4) !important;
}

/* margin top 2px */
[topSpace2] {
  margin-top: var(--space-size-2) !important;
}

/* margin top 2px */
[topSpace0] {
  margin-top: 0 !important;
}

/* margin bottom 2px */
[btmSpace5] {
  margin-bottom: var(--space-size-2) !important;
}

/* margin bottom 4px */
[btmSpace4] {
  margin-bottom: var(--space-size-4) !important;
}

/* margin bottom 6px */
[btmSpace6] {
  margin-bottom: var(--space-size-6) !important;
}

/* margin bottom 8px */
[btmSpace8] {
  margin-bottom: var(--space-size-8) !important;
}

/* margin bottom 10px */
[btmSpace10] {
  margin-bottom: var(--space-size-10) !important;
}

/* margin bottom 12px */
[btmSpace12] {
  margin-bottom: var(--space-size-12) !important;
}

/* margin bottom 14px */
[btmSpace14] {
  margin-bottom: var(--space-size-14) !important;
}

/* margin bottom 16px */
[btmSpace16] {
  margin-bottom: var(--space-size-16) !important;
}

/* margin bottom 18px */
[btmSpace18] {
  margin-bottom: var(--space-size-18) !important;
}

/* margin bottom 20px */
[btmSpace20] {
  margin-bottom: var(--space-size-20) !important;
}

/* margin bottom 25px */
[btmSpace25] {
  margin-bottom: var(--space-size-25) !important;
}

/* margin bottom 30px */
[btmSpace30] {
  margin-bottom: var(--space-size-30) !important;
}

/* margin bottom 35px */
[btmSpace35] {
  margin-bottom: var(--space-size-35) !important;
}

/* margin bottom 40px */
[btmSpace40] {
  margin-bottom: var(--space-size-40) !important;
}

/* margin bottom 45px */
[btmSpace45] {
  margin-bottom: var(--space-size-45) !important;
}

/* margin bottom 168px */
[btmSpace168px] {
  margin-bottom: 168px !important;
}

/* margin left 2px */
[leftSpace2] {
  margin-left: var(--space-size-2) !important;
}

/* margin left 4px */
[leftSpace4] {
  margin-left: var(--space-size-4) !important;
}

/* margin left 6px */
[leftSpace6] {
  margin-left: var(--space-size-6) !important;
}

/* margin left 8px */
[leftSpace8] {
  margin-left: var(--space-size-8) !important;
}

/* margin left 10px */
[leftSpace10] {
  margin-left: var(--space-size-10) !important;
}

/* margin left 12px */
[leftSpace12] {
  margin-left: var(--space-size-12) !important;
}

/* margin left 14px */
[leftSpace14] {
  margin-left: var(--space-size-14) !important;
}

/* margin left 16px */
[leftSpace16] {
  margin-left: var(--space-size-16) !important;
}

/* margin left 18px */
[leftSpace18] {
  margin-left: var(--space-size-18) !important;
}

/* margin left 20px */
[leftSpace20] {
  margin-left: var(--space-size-20) !important;
}

/* margin left 30px */
[leftSpace30] {
  margin-left: var(--space-size-30) !important;
}

/* margin right 2px */
[rightSpace2] {
  margin-right: var(--space-size-2) !important;
}

/* margin right 4px */
[rightSpace4] {
  margin-right: var(--space-size-4) !important;
}

/* margin right 6px */
[rightSpace6] {
  margin-right: var(--space-size-6) !important;
}

/* margin right 8px */
[rightSpace8] {
  margin-right: var(--space-size-8) !important;
}

/* margin right 10px */
[rightSpace10] {
  margin-right: var(--space-size-10) !important;
}

/* margin right 12px */
[rightSpace12] {
  margin-right: var(--space-size-12) !important;
}

/* margin right 14px */
[rightSpace14] {
  margin-right: var(--space-size-14) !important;
}

/* margin right 16px */
[rightSpace16] {
  margin-right: var(--space-size-16) !important;
}

/* margin right 18px */
[rightSpace18] {
  margin-right: var(--space-size-18) !important;
}

/* margin right 20px */
[rightSpace20] {
  margin-right: var(--space-size-20) !important;
}

/* margin right 30px */
[rightSpace30] {
  margin-right: var(--space-size-30) !important;
}