:root {
  --max-width-sm: 38rem; /* 640px */
  --max-width-md: 46rem; /* 768px */
  --max-width-lg: 54rem; /* 1024px */
  --max-width-xl: 85rem;

  --space-xxs: .375rem; /* 6px */
  --space-xs: .5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 2rem; /* 32px */
  --space-lg: 3rem; /* 48px */
  --space-xl: 4rem; /* 66px */
  --space-xxl: 8rem; /* 80px */
  --space-xxxl: 12rem; /* 80px */
}

html, body {
  background: var(--color-contrast-darkest);
}

body, main {
  position:relative;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.container {
  position: relative;
  width: 100%;
  max-width: var(--max-width-xl);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Container Widths */
.container-width--sm {
  max-width: var(--max-width-sm);
}
.container-width--md {
  max-width: var(--max-width-md);
}
.container-width--lg {
  max-width: var(--max-width-lg);
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

/* Container spaces */
.container-space--md {
  padding: var(--space-lg);
}

.container-space--lg {
  padding: var(--space-xl);
}

.container-space--xxl {
  padding: var(--space-xxl);
}


/* Container backgrounds */
.container-bg--light{
  background: var(--color-contrast-white);
}

/* Custom container settings */
.v-height-full {
  height: 100vh;
  min-height: 650px;
  max-height: 900px;
}

/* Container vertical spacing */
.v-padding--xs {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.v-padding--sm {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.v-padding--md {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.v-padding--lg {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}
.v-padding-top--lg { padding-top: var(--space-xxl); }
.v-padding-bottom--xl { padding-bottom: var(--space-xxxl); }
.v-padding-bottom--lg { padding-bottom: var(--space-xxl); }
.v-padding-top--md { padding-top: var(--space-md); }
.v-padding-bottom--md { padding-bottom: var(--space-md); }
.v-padding-top--sm { padding-top: var(--space-sm); }
.v-padding-bottom--sm { padding-bottom: var(--space-sm); }

/* Flex Grid Framework */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flex-container.full-width {
  width: 100%;
}

.flex-container.grid {
  margin: 0 -1rem;

}
.flex-container.no-gutter {

}

.flex-container.vertical-center {
  align-items: center;
}

.flex-container.horizontal-justify {
  justify-content: space-between;
}

.flex-container.reverse {
  flex-direction: row-reverse;
}

/* Column settings */
.flex-col {
  flex: 1;
  padding: 0 1rem;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  padding: 0 1rem;
  flex: 0 1 auto;
}

.flex-container.no-gutter [class*="col"] {
  padding: 0;
}

.col-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-2 {
  flex: 0 1 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.col-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.col-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.col-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.grid-gutter--sm .flex-container.grid{
  margin: 0 -1rem;
}

.grid-gutter--sm .flex-container.grid .flex-col,
.grid-gutter--sm .flex-container.grid .col-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 1024px) {
   :root {
      --max-width-md: 38rem;
   }
  .col-3 {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .v-height-full {
    height: auto;
    min-height: 600px;
    max-width: auto;
  }
  .flex-container.grid {
    margin: 0;
  }
  .flex-col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex-basis: 100%;
    max-width: 100%;
    padding: 1rem 0;
  }
  .row {
    padding: 0;
  }
  :root {
    --max-width-sm: 30rem; /* 640px */

    --space-md: 1.25rem; /* 32px */
    --space-lg: 2rem; /* 48px */
    --space-xl: 2rem; /* 66px */
    --space-xxl: 2rem;
  }
}

@media (max-width: 320px) {
  :root {
    --space-md: 1.25rem; /* 32px */
    --space-lg: 1.5rem; /* 48px */
    --space-xl: 1.5rem; /* 66px */
    --space-xxl: 1.5rem;
  }
}