/* ==========================================================================
Custom properties 
========================================================================== */

#content,
.content {
  /* Fonts */
  --font-primary: 'GT Alpina Light', 'Helvetica Neue', helvetica, arial, sans-serif; 
  --font-secondary: 'Sofia Pro Regular', 'Helvetica Neue', helvetica, arial, sans-serif; 
  --font-body: var(--font-secondary);
  --headline: var(--font-primary);
  --eyebrow: var(--font-secondary);
  --text: var(--font-primary);
  --caption: var(--font-secondary);

  /* Colors */
  --white: hsl(0, 0%, 100%);
  --sand: hsl(30, 50%, 98%);
  --fog:	hsl(45, 25%, 94%);
  --stone: hsl(44, 13%, 83%);
  --charcoal: hsl(0, 0%, 27%);
  --navy: hsl(211, 100%, 13%);
  --black: hsl(0, 0%, 0%);

  /* Spacing */
  --space_0: 4px;
  --space_1: 8px;
  --space_2: 16px;
  --space_3: 24px;
  --space_4: 32px;
  --space_5: 40px;
  --space_6: 48px;
  --space_7: 56px;
  --space_8: 64px;
  --space_9: 72px;
  --space_10: 80px;
  --space_11: 88px;
  --space_12: 96px;
  --space_16: 128px;
}

/* ==========================================================================
Core
========================================================================== */

.content { 
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--space_2); 
}

img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
    aspect-ratio: attr(width) / attr(height);
}

/* ==========================================================================
Layout
========================================================================== */

/* Grid
========================================================================== */

.grid { display: grid; }

/* Blocks
========================================================================== */

.block { 
    position: relative;
    margin-bottom: var(--space_3); 
}
@media (min-width: 768px){
    .block { margin-bottom: var(--space_4); }
}
@media (min-width: 1200px){
    .block { margin-bottom: var(--space_5); }
}

/* Gutters
========================================================================== */

/**
* On very small mobile devices, make extra space using a color gradient overlay
*/
.gutter--top {
    padding-top: 10%;
    background-color: rgba(255,255,255,1);
    position: relative;
    z-index: 1;
}
.gutter--top:after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--space_3);
    background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
    z-index: 1;
}
@media (min-width: 401px) {
    .gutter--top { padding-top: 0; }
    .gutter--top:after { content: none; }
}

/* ==========================================================================
Links
========================================================================== */

a,
a:hover,
a:active,
a:focus { 
  color: inherit; 
}

/* ==========================================================================
Typography
========================================================================== */

/* Headline
========================================================================== */

.headline--small,
.headline-sm--small,
.headline-md--small,
.headline-lg--small,
.headline-xl--small,
.headline-xxl--small,
.headline--medium,
.headline-sm--medium,
.headline-md--medium,
.headline-lg--medium,
.headline-xl--medium,
.headline-xxl--medium,
.headline--large,
.headline-sm--large,
.headline-md--large,
.headline-lg--large,
.headline-xl--large,
.headline-xxl--large,
.headline--huge,
.headline-sm--huge,
.headline-md--huge,
.headline-lg--huge,
.headline-xl--huge,
.headline-xxl--huge {
  font-family: var(--headline);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 0;
}
.headline--small {
  font-size: var(--space_4);
  line-height: 1.25;
}
@media (min-width: 576px){
  .headline-sm--small {
    font-size: var(--space_4);
    line-height: 1.25;
  }
}
@media (min-width: 768px){
  .headline-md--small {
    font-size: var(--space_4);
    line-height: 1.25;
  }
}
@media (min-width: 992px){
  .headline-lg--small {
    font-size: var(--space_4);
    line-height: 1.25;
  }
}
@media (min-width: 1200px){
  .headline-xl--small {
    font-size: var(--space_4);
    line-height: 1.25;
  }
}
@media (min-width: 1400px){
  .headline-xxl--small {
    font-size: var(--space_4);
    line-height: 1.25;
  }
}
.headline--medium {
  font-size: var(--space_7);
  line-height: 1;
}
@media (min-width: 576px){
  .headline-sm--medium {
    font-size: var(--space_7);
    line-height: 1;
  }
}
@media (min-width: 768px){
  .headline-md--medium {
    font-size: var(--space_7);
    line-height: 1;
  }
}
@media (min-width: 992px){
  .headline-lg--medium {
    font-size: var(--space_7);
    line-height: 1;
  }
}
@media (min-width: 1200px){
  .headline-xl--medium {
    font-size: var(--space_7);
    line-height: 1;
  }
}
@media (min-width: 1400px){
  .headline-xxl--medium {
    font-size: var(--space_7);
    line-height: 1;
  }
}
.headline--large {
  font-size: var(--space_9);
  line-height: 1;
}
@media (min-width: 576px){
  .headline-sm--large {
    font-size: var(--space_9);
    line-height: 1;
  }
}
@media (min-width: 768px){
  .headline-md--large {
    font-size: var(--space_9);
    line-height: 1;
  }
}
@media (min-width: 992px){
  .headline-lg--large {
    font-size: var(--space_9);
    line-height: 1;
  }
}
@media (min-width: 1200px){
  .headline-xl--large {
    font-size: var(--space_9);
    line-height: 1;
  }
}
@media (min-width: 1400px){
  .headline-xxl--large {
    font-size: var(--space_9);
    line-height: 1;
  }
}
.headline--huge {
  font-size: var(--space_12);
  line-height: 1;
}
@media (min-width: 576px){
  .headline-sm--huge {
    font-size: var(--space_12);
    line-height: 1;
  }
}
@media (min-width: 768px){
  .headline-md--huge {
    font-size: var(--space_12);
    line-height: 1;
  }
}
@media (min-width: 992px){
  .headline-lg--huge {
    font-size: var(--space_12);
    line-height: 1;
  }
}
@media (min-width: 1200px){
  .headline-xl--huge {
    font-size: var(--space_12);
    line-height: 1;
  }
}
@media (min-width: 1400px){
  .headline-xxl--huge {
    font-size: var(--space_12);
    line-height: 1;
  }
}

/* Eyebrow
========================================================================== */
.eyebrow--small,
.eyebrow-sm--small,
.eyebrow-md--small,
.eyebrow-lg--small,
.eyebrow-xl--small,
.eyebrow-xxl--small,
.eyebrow--medium,
.eyebrow-sm--medium,
.eyebrow-md--medium,
.eyebrow-lg--medium,
.eyebrow-xl--medium,
.eyebrow-xxl--medium {
  font-family: var(--eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space_1);
}
.eyebrow--small {
  font-size: var(--space_2);
  letter-spacing: 0.032em;
  line-height: 2;
}
@media (min-width: 576px){
  .eyebrow-sm--small {
    font-size: var(--space_2);
    letter-spacing: 0.032em;
    line-height: 2;
  }
}
@media (min-width: 768px){
  .eyebrow-md--small {
    font-size: var(--space_2);
    letter-spacing: 0.032em;
    line-height: 2;
  }
}
@media (min-width: 992px){
  .eyebrow-lg--small {
    font-size: var(--space_2);
    letter-spacing: 0.032em;
    line-height: 2;
  }
}
@media (min-width: 1200px){
  .eyebrow-xl--small {
    font-size: var(--space_2);
    letter-spacing: 0.032em;
    line-height: 2;
  }
}
@media (min-width: 1400px){
  .eyebrow-xxl--small {
    font-size: var(--space_2);
    letter-spacing: 0.032em;
    line-height: 2;
  }
}
.eyebrow--medium {
  font-size: var(--space_3);
  letter-spacing: 0.032em;
  line-height: 1.3333;
}
@media (min-width: 576px){
  .eyebrow-sm--medium {
    font-size: var(--space_3);
    letter-spacing: 0.032em;
    line-height: 1.3333;
  }
}
@media (min-width: 768px){
  .eyebrow-md--medium {
    font-size: var(--space_3);
    letter-spacing: 0.032em;
    line-height: 1.3333;
  }
}
@media (min-width: 992px){
  .eyebrow-lg--medium {
    font-size: var(--space_3);
    letter-spacing: 0.032em;
    line-height: 1.3333;
  }
}
@media (min-width: 1200px){
  .eyebrow-xl--medium {
    font-size: var(--space_3);
    letter-spacing: 0.032em;
    line-height: 1.3333;
  }
}
@media (min-width: 1400px){
  .eyebrow-xxl--medium {
    font-size: var(--space_3);
    letter-spacing: 0.032em;
    line-height: 1.3333;
  }
}

/* Username
========================================================================== */

.username,
.username--top-left,
.username--top-right,
.username--bottom-left,
.username--bottom-right {
  position: absolute;
  font-size: calc(var(--space_2) - var(--space_0));
  text-transform: uppercase;
  margin: 0;
}
.username--top-left,
.username--top-right {
  top: 1.5%;
  bottom: auto;
}
.username,
.username--top-left,
.username--bottom-left {
  left: 2%;
  right: auto;
  text-align: left;
}
.username--top-right,
.username--bottom-right {
  left: auto;
  right: 2%;
  text-align: right;
}
.username,
.username--bottom-left,
.username--bottom-right {
  top: auto;
  bottom: 1.5%;
}
.username--vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}
@media (min-width: 768px){
  .username,
  .username--top-left,
  .username--bottom-left {
    left: 1%;
  }
  .username--top-right,
  .username--bottom-right {
    right: 1%;
  }
}
@media (min-width: 1201px){
  .username,
  .username--top-left,
  .username--top-right,
  .username--bottom-left,
  .username--bottom-right { 
    font-size: var(--space_2); 
  }
}

/* Text alignment
========================================================================== */

.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
@media (min-width: 576px) {
  .text-sm--left { text-align: left; }
  .text-sm--center { text-align: center; }
  .text-sm--right { text-align: right; }
}
@media (min-width: 768px) {
  .text-md--left { text-align: left; }
  .text-md--center { text-align: center; }
  .text-md--right { text-align: right; }
}
@media (min-width: 992px) {
  .text-lg--left { text-align: left; }
  .text-lg--center { text-align: center; }
  .text-lg--right { text-align: right; }
}
@media (min-width: 1200px) {
  .text-xl--left { text-align: left; }
  .text-xl--center { text-align: center; }
  .text-xl--right { text-align: right; }
}
@media (min-width: 1400px) {
  .text-xxl--left { text-align: left; }
  .text-xxl--center { text-align: center; }
  .text-xxl--right { text-align: right; }
}

/* Text case
========================================================================== */

.text--lowercase { text-transform: lowercase; }
.text--uppercase { text-transform: uppercase; }
.text--capitalize { text-transform: capitalize; }
@media (min-width: 576px) {
  .text-sm--lowercase { text-transform: lowercase; }
  .text-sm--uppercase { text-transform: uppercase; }
  .text-sm--capitalize { text-transform: capitalize; }
}
@media (min-width: 768px) {
  .text-md--lowercase { text-transform: lowercase; }
  .text-md--uppercase { text-transform: uppercase; }
  .text-md--capitalize { text-transform: capitalize; }
}
@media (min-width: 992px) {
  .text-lg--lowercase { text-transform: lowercase; }
  .text-lg--uppercase { text-transform: uppercase; }
  .text-lg--capitalize { text-transform: capitalize; }
}
@media (min-width: 1200px) {
  .text-xl--lowercase { text-transform: lowercase; }
  .text-xl--uppercase { text-transform: uppercase; }
  .text-xl--capitalize { text-transform: capitalize; }
}
@media (min-width: 1400px) {
  .text-xxl--lowercase { text-transform: lowercase; }
  .text-xxl--uppercase { text-transform: uppercase; }
  .text-xxl--capitalize { text-transform: capitalize; }
}

/* Text decoration
========================================================================== */

.text--underline { text-decoration: underline; }
.text--no-underline { text-decoration: none; }
@media (min-width: 576px) {
  .text-sm--underline { text-decoration: underline; }
  .text-sm--no-underline { text-decoration: none; }
}
@media (min-width: 768px) {
  .text-md--underline { text-decoration: underline; }
  .text-md--no-underline { text-decoration: none; }
}
@media (min-width: 992px) {
  .text-lg--underline { text-decoration: underline; }
  .text-lg--no-underline { text-decoration: none; }
}
@media (min-width: 1200px) {
  .text-xl--underline { text-decoration: underline; }
  .text-xl--no-underline { text-decoration: none; }
}
@media (min-width: 1400px) {
  .text-xxl--underline { text-decoration: underline; }
  .text-xxl--no-underline { text-decoration: none; }
}

/* ==========================================================================
Justify Content
========================================================================== */

.justify--start { justify-content: start; }
.justify--center { justify-content: center; }
.justify--end { justify-content: end; }
@media (min-width: 576px) {
  .justify-sm--start { justify-content: start; }
  .justify-sm--center { justify-content: center; }
  .justify-sm--end { justify-content: end; }
}
@media (min-width: 768px) {
  .justify-md--start { justify-content: start; }
  .justify-md--center { justify-content: center; }
  .justify-md--end { justify-content: end; }
}
@media (min-width: 992px) {
  .justify-lg--start { justify-content: start; }
  .justify-lg--center { justify-content: center; }
  .justify-lg--end { justify-content: end; }
}
@media (min-width: 1201px) {
  .justify-xl--start { justify-content: start; }
  .justify-xl--center { justify-content: center; }
  .justify-xl--end { justify-content: end; }
}
@media (min-width: 1401px) {
  .justify-xxl--start { justify-content: start; }
  .justify-xxl--center { justify-content: center; }
  .justify-xxl--end { justify-content: end; }
}

/* ==========================================================================
Ratios
========================================================================== */

/**
* Add to figure element that wraps around an image.
* Allows us to scale the wrapper to the size of what the element
* will be after load. Helps keep CLS scores low.
*/

.ratio {
  display: block;
  position: relative;
}
.ratio img,
.ratio input[type="image"],
.ratio video,
.ratio embed,
.ratio iframe,
.ratio marquee,
.ratio object,
.ratio table {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}

/* Ratio dimensions
========================================================================== */

.ratio--1by1 { padding-top: 100%; }
.ratio--2by1 { padding-top: 50%; }
.ratio--3by1 { padding-top: 33.3333%; }
.ratio--3by2 { padding-top: 66.6666%; }
.ratio--3by4 { padding-top: 133.3333%; }
.ratio--3by5 { padding-top: 166.6666%; }
.ratio--4by1 { padding-top: 25%; }
.ratio--4by3 { padding-top: 75%; }
.ratio--4by5 { padding-top: 125%; }
.ratio--5by4 { padding-top: 80%; }
.ratio--9by16 { padding: 177.7777% }
.ratio--16by7 { padding-top: 43.75%; }
.ratio--16by9 { padding-top: 56.25%; }
.ratio--16by10 { padding-top: 62.5%; }

/* ==========================================================================
Color
========================================================================== */

/**
* Background
*/
.bg--white { background-color: var(--white); }
.bg--sand { background-color: var(--sand); }
.bg--fog { background-color: var(--fog); }
.bg--stone { background-color: var(--stone); }
.bg--charcoal { background-color: var(--charcoal); }
.bg--navy { background-color: var(--navy); }
.bg--black { background-color: var(--black); }

/**
* Text
*/
.text--white,
.text--white:hover,
.text--white:active,
.text--white:focus { color: var(--white); }
.text--sand,
.text--sand:hover,
.text--sand:active,
.text--sand:focus { color: var(--sand); }
.text--fog,
.text--fog:hover,
.text--fog:active,
.text--fog:focus { color: var(--fog); }
.text--stone,
.text--stone:hover,
.text--stone:active,
.text--stone:focus { color: var(--stone); }
.text--charcoal,
.text--charcoal:hover,
.text--charcoal:active,
.text--charcoal:focus { color: var(--charcoal); }
.text--navy,
.text--navy:hover,
.text--navy:active,
.text--navy:focus { color: var(--navy); }
.text--black,
.text--black:hover,
.text--black:active,
.text--black:focus { color: var(--black); }
.text--inherit,
.text--inherit:hover,
.text--inherit:active,
.text--inherit:focus { color: inherit; }

/**
* Border
*/
.border--white,
.border--sand,
.border--fog,
.border--stone,
.border--charcoal,
.border--navy,
.border--black { 
  border-style: solid;
  border-width: 1px; 
}
.border--white { border-color: var(--white); }
.border--sand { border-color: var(--sand); }
.border--fog { border-color: var(--fog); }
.border--stone { border-color: var(--stone); }
.border--charcoal { border-color: var(--charcoal); }
.border--navy { border-color: var(--navy); }
.border--black { border-color: var(--black); }

/* ==========================================================================
Display
========================================================================== */

.d--block { display: block; }
.d--inline-block { display: inline-block; }
.d--grid { display: grid; }
.d--inline-grid { display: inline-grid; }
.d--table { display: table; }
.d--table-row { display: table-row; }
.d--table-cell { display: table-cell; }
.d--flex { display: flex; }
.d--inline-flex { display: inline-flex; }
.d--none { display: none; }
@media (min-width: 576px) {
  .d-sm--block { display: block; }
  .d-sm--inline-block { display: inline-block; }
  .d-sm--grid { display: grid; }
  .d-sm--inline-grid { display: inline-grid; }
  .d-sm--table { display: table; }
  .d-sm--table-row { display: table-row; }
  .d-sm--table-cell { display: table-cell; }
  .d-sm--flex { display: flex; }
  .d-sm--inline-flex { display: inline-flex; }
  .d-sm--none { display: none; }
}
@media (min-width: 768px) {
  .d-md--block { display: block; }
  .d-md--inline-block { display: inline-block; }
  .d-md--grid { display: grid; }
  .d-md--inline-grid { display: inline-grid; }
  .d-md--table { display: table; }
  .d-md--table-row { display: table-row; }
  .d-md--table-cell { display: table-cell; }
  .d-md--flex { display: flex; }
  .d-md--inline-flex { display: inline-flex; }
  .d-md--none { display: none; }
}
@media (min-width: 992px) {
  .d-lg--block { display: block; }
  .d-lg--inline-block { display: inline-block; }
  .d-lg--grid { display: grid; }
  .d-lg--inline-grid { display: inline-grid; }
  .d-lg--table { display: table; }
  .d-lg--table-row { display: table-row; }
  .d-lg--table-cell { display: table-cell; }
  .d-lg--flex { display: flex; }
  .d-lg--inline-flex { display: inline-flex; }
  .d-lg--none { display: none; }
}
@media (min-width: 1200px) {
  .d-xl--block { display: block; }
  .d-xl--inline-block { display: inline-block; }
  .d-xl--grid { display: grid; }
  .d-xl--inline-grid { display: inline-grid; }
  .d-xl--table { display: table; }
  .d-xl--table-row { display: table-row; }
  .d-xl--table-cell { display: table-cell; }
  .d-xl--flex { display: flex; }
  .d-xl--inline-flex { display: inline-flex; }
  .d-xl--none { display: none; }
}
@media (min-width: 1400px) {
  .d-xxl--block { display: block; }
  .d-xxl--inline-block { display: inline-block; }
  .d-xxl--grid { display: grid; }
  .d-xxl--inline-grid { display: inline-grid; }
  .d-xxl--table { display: table; }
  .d-xxl--table-row { display: table-row; }
  .d-xxl--table-cell { display: table-cell; }
  .d-xxl--flex { display: flex; }
  .d-xxl--inline-flex { display: inline-flex; }
  .d-xxl--none { display: none; }
}

/* ==========================================================================
Width
========================================================================== */

.w--auto { width: auto; }
.w--25 { width: 25%; }
.w--50 { width: 50%; }
.w--75 { width: 75%; }
.w--100 { width: 100%; }
@media (min-width: 576px) {
  .w-sm--auto { width: auto; }
  .w-sm--25 { width: 25%; }
  .w-sm--50 { width: 50%; }
  .w-sm--75 { width: 75%; }
  .w-sm--100 { width: 100%; }
}
@media (min-width: 768px) {
  .w-md--auto { width: auto; }
  .w-md--25 { width: 25%; }
  .w-md--50 { width: 50%; }
  .w-md--75 { width: 75%; }
  .w-md--100 { width: 100%; }
}
@media (min-width: 992px) {
  .w-lg--auto { width: auto; }
  .w-lg--25 { width: 25%; }
  .w-lg--50 { width: 50%; }
  .w-lg--75 { width: 75%; }
  .w-lg--100 { width: 100%; }
}
@media (min-width: 1200px) {
  .w-xl--auto { width: auto; }
  .w-xl--25 { width: 25%; }
  .w-xl--50 { width: 50%; }
  .w-xl--75 { width: 75%; }
  .w-xl--100 { width: 100%; }
}
@media (min-width: 1400px) {
  .w-xxl--auto { width: auto; }
  .w-xxl--25 { width: 25%; }
  .w-xxl--50 { width: 50%; }
  .w-xxl--75 { width: 75%; }
  .w-xxl--100 { width: 100%; }
}

/* ==========================================================================
Buttons
========================================================================== */

.content .btn { 
  display: inline-flex; 
  justify-content: center;
  align-items: center;
}
.content .btn:not(.w--100) { width: auto; }
.btn--white,
.btn--sand,
.btn--fog,
.btn--stone,
.btn--charcoal,
.btn--navy,
.btn--black {
  font-family: var(--font-secondary);
  font-size: var(--space_2);
  line-height: var(--space_3);
  border-radius: var(--space_1);
  padding: var(--space_1) var(--space_2) !important;
}

/**
* Color
*/
.btn--white {
  background-color: var(--white);
  color: var(--charcoal);
}
.btn--white:focus,
.btn--white:hover {
  background-color: var(--white);
  color: var(--charcoal);
}
.btn--sand {
  background-color: var(--sand);
  color: var(--charcoal);
}
.btn--sand:focus,
.btn--sand:hover {
  background-color: var(--sand);
  color: var(--charcoal);
}
.btn--fog {
  background-color: var(--fog);
  color: var(--charcoal);
}
.btn--fog:focus,
.btn--fog:hover {
  background-color: var(--fog);
  color: var(--charcoal);
}
.btn--stone {
  background-color: var(--stone);
  color: var(--charcoal);
}
.btn--stone:focus,
.btn--stone:hover {
  background-color: var(--stone);
  color: var(--charcoal);
}
.btn--charcoal {
  background-color: var(--charcoal);
  color: var(--sand);
}
.btn--charcoal:focus,
.btn--charcoal:hover {
  background-color: var(--charcoal);
  color: var(--sand);
}
.btn--navy {
  background-color: var(--navy);
  color: var(--sand);
}
.btn--navy:focus,
.btn--navy:hover {
  background-color: var(--navy);
  color: var(--sand);
}
.btn--black {
  background-color: var(--black);
  color: var(--sand);
}
.btn--black:focus,
.btn--black:hover {
  background-color: var(--black);
  color: var(--sand);
}

/**
* Underlined button
*/
.btn--underline {
    font-family: var(--font-secondary);
	font-size: var(--space_2);
	line-height: var(--space_3);
	text-decoration: underline !important; 
	background-color: transparent;
}
.btn--underline,
.btn--underline:focus,
.btn--underline:hover {
    background-color: transparent;
}

/**
* Text button
*/
.btn--text {
  font-family: var(--font-secondary);
  font-size: var(--space_2);
  line-height: var(--space_3);
}
.btn--text,
.btn--text:focus,
.btn--text:hover {
  background-color: transparent;
}

/**
* Locked-height buttons
*/
.btn--height-locked {
  height: 42px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
}

/* Button wrappers
========================================================================== */

.btn-wrapper--inline,
.btn-wrapper--1,
.btn-wrapper--2,
.btn-wrapper--3,
.btn-wrapper--4,
.btn-wrapper--5,
.btn-wrapper--6 {
	display: flex;  
	flex-wrap: wrap;
	gap: var(--space_2);
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.btn-wrapper--inline .btn,
.btn-wrapper--1 .btn,
.btn-wrapper--2 .btn,
.btn-wrapper--3 .btn,
.btn-wrapper--4 .btn,
.btn-wrapper--5 .btn,
.btn-wrapper--6 .btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 14px; 
	line-height: normal;
	text-transform: uppercase;
	padding: var(--space_1) !important;
}
.btn-wrapper--inline .btn {
	flex: none;
	max-width: none;
}
.btn-wrapper--1 .btn {
	flex: 100%;
	max-width: calc(100% - 16px);
}
.btn-wrapper--2 .btn {
	flex: 33.333%;
	max-width: calc(50% - 16px);
}
.btn-wrapper--3 .btn {
	flex: 25%;
	max-width: calc(33.333% - 16px);
}
.btn-wrapper--4 .btn {
	flex: 20%;
	max-width: calc(25% - 16px);
}
.btn-wrapper--5 .btn {
	flex: 16.667%;
	max-width: calc(20% - 16px);
}
.btn-wrapper--6 .btn {
	flex: 14.285%;
	max-width: calc(16.667% - 16px);
}
@media (min-width: 576px) {
	.btn-wrapper--inline .btn,
	.btn-wrapper--1 .btn,
	.btn-wrapper--2 .btn,
	.btn-wrapper--3 .btn,
	.btn-wrapper--4 .btn,
	.btn-wrapper--5 .btn,
	.btn-wrapper--6 .btn {
		font-size: var(--space_2); 
		padding: var(--space_1) var(--space_2) !important; 
	}
	.btn-wrapper-sm--inline .btn {
		flex: none;
		max-width: none;
	}
	.btn-wrapper-sm--1 .btn {
		flex: 100%;
		max-width: calc(100% - 16px);
	}
	.btn-wrapper-sm--2 .btn {
		flex: 33.333%;
		max-width: calc(50% - 16px);
	}
	.btn-wrapper-sm--3 .btn {
		flex: 25%;
		max-width: calc(33.333% - 16px);
	}
	.btn-wrapper-sm--4 .btn {
		flex: 20%;
		max-width: calc(25% - 16px);
	}
	.btn-wrapper-sm--5 .btn {
		flex: 16.667%;
		max-width: calc(20% - 16px);
	}
	.btn-wrapper-sm--6 .btn {
		flex: 14.285%;
		max-width: calc(16.667% - 16px);
	}
}
@media (min-width: 768px) {
	.btn-wrapper-md--inline .btn {
		flex: none;
		max-width: none;
	}
	.btn-wrapper-md--1 .btn {
		flex: 100%;
		max-width: calc(100% - 16px);
	}
	.btn-wrapper-md--2 .btn {
		flex: 33.333%;
		max-width: calc(50% - 16px);
	}
	.btn-wrapper-md--3 .btn {
		flex: 25%;
		max-width: calc(33.333% - 16px);
	}
	.btn-wrapper-md--4 .btn {
		flex: 20%;
		max-width: calc(25% - 16px);
	}
	.btn-wrapper-md--5 .btn {
		flex: 16.667%;
		max-width: calc(20% - 16px);
	}
	.btn-wrapper-md--6 .btn {
		flex: 14.285%;
		max-width: calc(16.667% - 16px);
	}
}
@media (min-width: 992px) {
	.btn-wrapper-lg--inline .btn {
		flex: none;
		max-width: none;
	}
	.btn-wrapper-lg--1 .btn {
		flex: 100%;
		max-width: calc(100% - 16px);
	}
	.btn-wrapper-lg--2 .btn {
		flex: 33.333%;
		max-width: calc(50% - 16px);
	}
	.btn-wrapper-lg--3 .btn {
		flex: 25%;
		max-width: calc(33.333% - 16px);
	}
	.btn-wrapper-lg--4 .btn {
		flex: 20%;
		max-width: calc(25% - 16px);
	}
	.btn-wrapper-lg--5 .btn {
		flex: 16.667%;
		max-width: calc(20% - 16px);
	}
	.btn-wrapper-lg--6 .btn {
		flex: 14.285%;
		max-width: calc(16.667% - 16px);
	}
}
@media (min-width: 1201px) {
	.btn-wrapper-xl--inline .btn {
		flex: none;
		max-width: none;
	}
	.btn-wrapper-xl--1 .btn {
		flex: 100%;
		max-width: calc(100% - 16px);
	}
	.btn-wrapper-xl--2 .btn {
		flex: 33.333%;
		max-width: calc(50% - 16px);
	}
	.btn-wrapper-xl--3 .btn {
		flex: 25%;
		max-width: calc(33.333% - 16px);
	}
	.btn-wrapper-xl--4 .btn {
		flex: 20%;
		max-width: calc(25% - 16px);
	}
	.btn-wrapper-xl--5 .btn {
		flex: 16.667%;
		max-width: calc(20% - 16px);
	}
	.btn-wrapper-xl--6 .btn {
		flex: 14.285%;
		max-width: calc(16.667% - 16px);
	}
}
@media (min-width: 1401px) {
	.btn-wrapper-xxl--inline .btn {
		flex: none;
		max-width: none;
	}
	.btn-wrapper-xxl--1 .btn {
		flex: 100%;
		max-width: calc(100% - 16px);
	}
	.btn-wrapper-xxl--2 .btn {
		flex: 33.333%;
		max-width: calc(50% - 16px);
	}
	.btn-wrapper-xxl--3 .btn {
		flex: 25%;
		max-width: calc(33.333% - 16px);
	}
	.btn-wrapper-xxl--4 .btn {
		flex: 20%;
		max-width: calc(25% - 16px);
	}
	.btn-wrapper-xxl--5 .btn {
		flex: 16.667%;
		max-width: calc(20% - 16px);
	}
	.btn-wrapper-xxl--6 .btn {
		flex: 14.285%;
		max-width: calc(16.667% - 16px);
	}
}

/* ==========================================================================
Spacing
========================================================================== */

/* Margin
========================================================================== */

/**
* Margin all
*/
.m--auto { margin: auto; }
.m--0 { margin: 0; }
.m--1 { margin: var(--space_1); }
.m--2 { margin: var(--space_2); }
.m--3 { margin: var(--space_3); }
.m--4 { margin: var(--space_4); }
.m--5 { margin: var(--space_5); }
.m--6 { margin: var(--space_6); }
.m--7 { margin: var(--space_7); }
.m--8 { margin: var(--space_8); }
.m--12 { margin: var(--space_12); }
.m--16 { margin: var(--space_16); }
@media (min-width: 576px) {
  .m-sm--auto { margin: auto; }
  .m-sm--0 { margin: 0; }
  .m-sm--1 { margin: var(--space_1); }
  .m-sm--2 { margin: var(--space_2); }
  .m-sm--3 { margin: var(--space_3); }
  .m-sm--4 { margin: var(--space_4); }
  .m-sm--5 { margin: var(--space_5); }
  .m-sm--6 { margin: var(--space_6); }
  .m-sm--7 { margin: var(--space_7); }
  .m-sm--8 { margin: var(--space_8); }
  .m-sm--12 { margin: var(--space_12); }
  .m-sm--16 { margin: var(--space_16); }
}
@media (min-width: 768px) {
  .m-md--auto { margin: auto; }
  .m-md--0 { margin: 0; }
  .m-md--1 { margin: var(--space_1); }
  .m-md--2 { margin: var(--space_2); }
  .m-md--3 { margin: var(--space_3); }
  .m-md--4 { margin: var(--space_4); }
  .m-md--5 { margin: var(--space_5); }
  .m-md--6 { margin: var(--space_6); }
  .m-md--7 { margin: var(--space_7); }
  .m-md--8 { margin: var(--space_8); }
  .m-md--12 { margin: var(--space_12); }
  .m-md--16 { margin: var(--space_16); }
}
@media (min-width: 992px) {
  .m-lg--auto { margin: auto; }
  .m-lg--0 { margin: 0; }
  .m-lg--1 { margin: var(--space_1); }
  .m-lg--2 { margin: var(--space_2); }
  .m-lg--3 { margin: var(--space_3); }
  .m-lg--4 { margin: var(--space_4); }
  .m-lg--5 { margin: var(--space_5); }
  .m-lg--6 { margin: var(--space_6); }
  .m-lg--7 { margin: var(--space_7); }
  .m-lg--8 { margin: var(--space_8); }
  .m-lg--12 { margin: var(--space_12); }
  .m-lg--16 { margin: var(--space_16); }
}
@media (min-width: 1200px) {
  .m-xl--auto { margin: auto; }
  .m-xl--0 { margin: 0; }
  .m-xl--1 { margin: var(--space_1); }
  .m-xl--2 { margin: var(--space_2); }
  .m-xl--3 { margin: var(--space_3); }
  .m-xl--4 { margin: var(--space_4); }
  .m-xl--5 { margin: var(--space_5); }
  .m-xl--6 { margin: var(--space_6); }
  .m-xl--7 { margin: var(--space_7); }
  .m-xl--8 { margin: var(--space_8); }
  .m-xl--12 { margin: var(--space_12); }
  .m-xl--16 { margin: var(--space_16); }
}
@media (min-width: 1400px) {
  .m-xxl--auto { margin: auto; }
  .m-xxl--0 { margin: 0; }
  .m-xxl--1 { margin: var(--space_1); }
  .m-xxl--2 { margin: var(--space_2); }
  .m-xxl--3 { margin: var(--space_3); }
  .m-xxl--4 { margin: var(--space_4); }
  .m-xxl--5 { margin: var(--space_5); }
  .m-xxl--6 { margin: var(--space_6); }
  .m-xxl--7 { margin: var(--space_7); }
  .m-xxl--8 { margin: var(--space_8); }
  .m-xxl--12 { margin: var(--space_12); }
  .m-xxl--16 { margin: var(--space_16); }
}

/**
* Margin horizontal
*/
.mx--auto {
  margin-left: auto;
  margin-right: auto;
}
.mx--0 {
  margin-left: 0;
  margin-right: 0;
}
.mx--1 {
  margin-left: var(--space_1);
  margin-right: var(--space_1);
}
.mx--2 {
  margin-left: var(--space_2);
  margin-right: var(--space_2);
}
.mx--3 {
  margin-left: var(--space_3);
  margin-right: var(--space_3);
}
.mx--4 {
  margin-left: var(--space_4);
  margin-right: var(--space_4);
}
.mx--5 {
  margin-left: var(--space_5);
  margin-right: var(--space_5);
}
.mx--6 {
  margin-left: var(--space_6);
  margin-right: var(--space_6);
}
.mx--7 {
  margin-left: var(--space_7);
  margin-right: var(--space_7);
}
.mx--8 {
  margin-left: var(--space_8);
  margin-right: var(--space_8);
}
.mx--12 {
  margin-left: var(--space_12);
  margin-right: var(--space_12);
}
.mx--16 {
  margin-left: var(--space_16);
  margin-right: var(--space_16);
}
@media (min-width: 576px) {
  .mx-sm--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-sm--0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-sm--1 {
    margin-left: var(--space_1);
    margin-right: var(--space_1);
  }
  .mx-sm--2 {
    margin-left: var(--space_2);
    margin-right: var(--space_2);
  }
  .mx-sm--3 {
    margin-left: var(--space_3);
    margin-right: var(--space_3);
  }
  .mx-sm--4 {
    margin-left: var(--space_4);
    margin-right: var(--space_4);
  }
  .mx-sm--5 {
    margin-left: var(--space_5);
    margin-right: var(--space_5);
  }
  .mx-sm--6 {
    margin-left: var(--space_6);
    margin-right: var(--space_6);
  }
  .mx-sm--7 {
    margin-left: var(--space_7);
    margin-right: var(--space_7);
  }
  .mx-sm--8 {
    margin-left: var(--space_8);
    margin-right: var(--space_8);
  }
  .mx-sm--12 {
    margin-left: var(--space_12);
    margin-right: var(--space_12);
  }
  .mx-sm--16 {
    margin-left: var(--space_16);
    margin-right: var(--space_16);
  }
}
@media (min-width: 768px) {
  .mx-md--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-md--0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-md--1 {
    margin-left: var(--space_1);
    margin-right: var(--space_1);
  }
  .mx-md--2 {
    margin-left: var(--space_2);
    margin-right: var(--space_2);
  }
  .mx-md--3 {
    margin-left: var(--space_3);
    margin-right: var(--space_3);
  }
  .mx-md--4 {
    margin-left: var(--space_4);
    margin-right: var(--space_4);
  }
  .mx-md--5 {
    margin-left: var(--space_5);
    margin-right: var(--space_5);
  }
  .mx-md--6 {
    margin-left: var(--space_6);
    margin-right: var(--space_6);
  }
  .mx-md--7 {
    margin-left: var(--space_7);
    margin-right: var(--space_7);
  }
  .mx-md--8 {
    margin-left: var(--space_8);
    margin-right: var(--space_8);
  }
  .mx-md--12 {
    margin-left: var(--space_12);
    margin-right: var(--space_12);
  }
  .mx-md--16 {
    margin-left: var(--space_16);
    margin-right: var(--space_16);
  }
}
@media (min-width: 992px) {
  .mx-lg--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-lg--0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-lg--1 {
    margin-left: var(--space_1);
    margin-right: var(--space_1);
  }
  .mx-lg--2 {
    margin-left: var(--space_2);
    margin-right: var(--space_2);
  }
  .mx-lg--3 {
    margin-left: var(--space_3);
    margin-right: var(--space_3);
  }
  .mx-lg--4 {
    margin-left: var(--space_4);
    margin-right: var(--space_4);
  }
  .mx-lg--5 {
    margin-left: var(--space_5);
    margin-right: var(--space_5);
  }
  .mx-lg--6 {
    margin-left: var(--space_6);
    margin-right: var(--space_6);
  }
  .mx-lg--7 {
    margin-left: var(--space_7);
    margin-right: var(--space_7);
  }
  .mx-lg--8 {
    margin-left: var(--space_8);
    margin-right: var(--space_8);
  }
  .mx-lg--12 {
    margin-left: var(--space_12);
    margin-right: var(--space_12);
  }
  .mx-lg--16 {
    margin-left: var(--space_16);
    margin-right: var(--space_16);
  }
}
@media (min-width: 1200px) {
  .mx-xl--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-xl--0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-xl--1 {
    margin-left: var(--space_1);
    margin-right: var(--space_1);
  }
  .mx-xl--2 {
    margin-left: var(--space_2);
    margin-right: var(--space_2);
  }
  .mx-xl--3 {
    margin-left: var(--space_3);
    margin-right: var(--space_3);
  }
  .mx-xl--4 {
    margin-left: var(--space_4);
    margin-right: var(--space_4);
  }
  .mx-xl--5 {
    margin-left: var(--space_5);
    margin-right: var(--space_5);
  }
  .mx-xl--6 {
    margin-left: var(--space_6);
    margin-right: var(--space_6);
  }
  .mx-xl--7 {
    margin-left: var(--space_7);
    margin-right: var(--space_7);
  }
  .mx-xl--8 {
    margin-left: var(--space_8);
    margin-right: var(--space_8);
  }
  .mx-xl--12 {
    margin-left: var(--space_12);
    margin-right: var(--space_12);
  }
  .mx-xl--16 {
    margin-left: var(--space_16);
    margin-right: var(--space_16);
  }
}
@media (min-width: 1400px) {
  .mx-xxl--auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mx-xxl--0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mx-xxl--1 {
    margin-left: var(--space_1);
    margin-right: var(--space_1);
  }
  .mx-xxl--2 {
    margin-left: var(--space_2);
    margin-right: var(--space_2);
  }
  .mx-xxl--3 {
    margin-left: var(--space_3);
    margin-right: var(--space_3);
  }
  .mx-xxl--4 {
    margin-left: var(--space_4);
    margin-right: var(--space_4);
  }
  .mx-xxl--5 {
    margin-left: var(--space_5);
    margin-right: var(--space_5);
  }
  .mx-xxl--6 {
    margin-left: var(--space_6);
    margin-right: var(--space_6);
  }
  .mx-xxl--7 {
    margin-left: var(--space_7);
    margin-right: var(--space_7);
  }
  .mx-xxl--8 {
    margin-left: var(--space_8);
    margin-right: var(--space_8);
  }
  .mx-xxl--12 {
    margin-left: var(--space_12);
    margin-right: var(--space_12);
  }
  .mx-xxl--16 {
    margin-left: var(--space_16);
    margin-right: var(--space_16);
  }
}

/**
* Margin vertical
*/
.my--auto {
  margin-top: auto;
  margin-bottom: auto;
}
.my--0 {
  margin-top: 0;
  margin-bottom: 0;
}
.my--1 {
  margin-top: var(--space_1);
  margin-bottom: var(--space_1);
}
.my--2 {
  margin-top: var(--space_2);
  margin-bottom: var(--space_2);
}
.my--3 {
  margin-top: var(--space_3);
  margin-bottom: var(--space_3);
}
.my--4 {
  margin-top: var(--space_4);
  margin-bottom: var(--space_4);
}
.my--5 {
  margin-top: var(--space_5);
  margin-bottom: var(--space_5);
}
.my--6 {
  margin-top: var(--space_6);
  margin-bottom: var(--space_6);
}
.my--7 {
  margin-top: var(--space_7);
  margin-bottom: var(--space_7);
}
.my--8 {
  margin-top: var(--space_8);
  margin-bottom: var(--space_8);
}
.my--12 {
  margin-top: var(--space_12);
  margin-bottom: var(--space_12);
}
.my--16 {
  margin-top: var(--space_16);
  margin-bottom: var(--space_16);
}
@media (min-width: 576px) {
  .my-sm--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my-sm--0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-sm--1 {
    margin-top: var(--space_1);
    margin-bottom: var(--space_1);
  }
  .my-sm--2 {
    margin-top: var(--space_2);
    margin-bottom: var(--space_2);
  }
  .my-sm--3 {
    margin-top: var(--space_3);
    margin-bottom: var(--space_3);
  }
  .my-sm--4 {
    margin-top: var(--space_4);
    margin-bottom: var(--space_4);
  }
  .my-sm--5 {
    margin-top: var(--space_5);
    margin-bottom: var(--space_5);
  }
  .my-sm--6 {
    margin-top: var(--space_6);
    margin-bottom: var(--space_6);
  }
  .my-sm--7 {
    margin-top: var(--space_7);
    margin-bottom: var(--space_7);
  }
  .my-sm--8 {
    margin-top: var(--space_8);
    margin-bottom: var(--space_8);
  }
  .my-sm--12 {
    margin-top: var(--space_12);
    margin-bottom: var(--space_12);
  }
  .my-sm--16 {
    margin-top: var(--space_16);
    margin-bottom: var(--space_16);
  }
}
@media (min-width: 768px) {
  .my-md--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my-md--0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-md--1 {
    margin-top: var(--space_1);
    margin-bottom: var(--space_1);
  }
  .my-md--2 {
    margin-top: var(--space_2);
    margin-bottom: var(--space_2);
  }
  .my-md--3 {
    margin-top: var(--space_3);
    margin-bottom: var(--space_3);
  }
  .my-md--4 {
    margin-top: var(--space_4);
    margin-bottom: var(--space_4);
  }
  .my-md--5 {
    margin-top: var(--space_5);
    margin-bottom: var(--space_5);
  }
  .my-md--6 {
    margin-top: var(--space_6);
    margin-bottom: var(--space_6);
  }
  .my-md--7 {
    margin-top: var(--space_7);
    margin-bottom: var(--space_7);
  }
  .my-md--8 {
    margin-top: var(--space_8);
    margin-bottom: var(--space_8);
  }
  .my-md--12 {
    margin-top: var(--space_12);
    margin-bottom: var(--space_12);
  }
  .my-md--16 {
    margin-top: var(--space_16);
    margin-bottom: var(--space_16);
  }
}
@media (min-width: 992px) {
  .my-lg--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my-lg--0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-lg--1 {
    margin-top: var(--space_1);
    margin-bottom: var(--space_1);
  }
  .my-lg--2 {
    margin-top: var(--space_2);
    margin-bottom: var(--space_2);
  }
  .my-lg--3 {
    margin-top: var(--space_3);
    margin-bottom: var(--space_3);
  }
  .my-lg--4 {
    margin-top: var(--space_4);
    margin-bottom: var(--space_4);
  }
  .my-lg--5 {
    margin-top: var(--space_5);
    margin-bottom: var(--space_5);
  }
  .my-lg--6 {
    margin-top: var(--space_6);
    margin-bottom: var(--space_6);
  }
  .my-lg--7 {
    margin-top: var(--space_7);
    margin-bottom: var(--space_7);
  }
  .my-lg--8 {
    margin-top: var(--space_8);
    margin-bottom: var(--space_8);
  }
  .my-lg--12 {
    margin-top: var(--space_12);
    margin-bottom: var(--space_12);
  }
  .my-lg--16 {
    margin-top: var(--space_16);
    margin-bottom: var(--space_16);
  }
}
@media (min-width: 1200px) {
  .my-xl--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my-xl--0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xl--1 {
    margin-top: var(--space_1);
    margin-bottom: var(--space_1);
  }
  .my-xl--2 {
    margin-top: var(--space_2);
    margin-bottom: var(--space_2);
  }
  .my-xl--3 {
    margin-top: var(--space_3);
    margin-bottom: var(--space_3);
  }
  .my-xl--4 {
    margin-top: var(--space_4);
    margin-bottom: var(--space_4);
  }
  .my-xl--5 {
    margin-top: var(--space_5);
    margin-bottom: var(--space_5);
  }
  .my-xl--6 {
    margin-top: var(--space_6);
    margin-bottom: var(--space_6);
  }
  .my-xl--7 {
    margin-top: var(--space_7);
    margin-bottom: var(--space_7);
  }
  .my-xl--8 {
    margin-top: var(--space_8);
    margin-bottom: var(--space_8);
  }
  .my-xl--12 {
    margin-top: var(--space_12);
    margin-bottom: var(--space_12);
  }
  .my-xl--16 {
    margin-top: var(--space_16);
    margin-bottom: var(--space_16);
  }
}
@media (min-width: 1400px) {
  .my-xxl--auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my-xxl--0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xxl--1 {
    margin-top: var(--space_1);
    margin-bottom: var(--space_1);
  }
  .my-xxl--2 {
    margin-top: var(--space_2);
    margin-bottom: var(--space_2);
  }
  .my-xxl--3 {
    margin-top: var(--space_3);
    margin-bottom: var(--space_3);
  }
  .my-xxl--4 {
    margin-top: var(--space_4);
    margin-bottom: var(--space_4);
  }
  .my-xxl--5 {
    margin-top: var(--space_5);
    margin-bottom: var(--space_5);
  }
  .my-xxl--6 {
    margin-top: var(--space_6);
    margin-bottom: var(--space_6);
  }
  .my-xxl--7 {
    margin-top: var(--space_7);
    margin-bottom: var(--space_7);
  }
  .my-xxl--8 {
    margin-top: var(--space_8);
    margin-bottom: var(--space_8);
  }
  .my-xxl--12 {
    margin-top: var(--space_12);
    margin-bottom: var(--space_12);
  }
  .my-xxl--16 {
    margin-top: var(--space_16);
    margin-bottom: var(--space_16);
  }
}

/**
* Margin left
*/
.ml--auto { margin-left: auto; }
.ml--0 { margin-left: 0; }
.ml--1 { margin-left: var(--space_1); }
.ml--2 { margin-left: var(--space_2); }
.ml--3 { margin-left: var(--space_3); }
.ml--4 { margin-left: var(--space_4); }
.ml--5 { margin-left: var(--space_5); }
.ml--6 { margin-left: var(--space_6); }
.ml--7 { margin-left: var(--space_7); }
.ml--8 { margin-left: var(--space_8); }
.ml--12 { margin-left: var(--space_12); }
.ml--16 { margin-left: var(--space_16); }
@media (min-width: 576px) {
  .ml-sm--auto { margin-left: auto; }
  .ml-sm--0 { margin-left: 0; }
  .ml-sm--1 { margin-left: var(--space_1); }
  .ml-sm--2 { margin-left: var(--space_2); }
  .ml-sm--3 { margin-left: var(--space_3); }
  .ml-sm--4 { margin-left: var(--space_4); }
  .ml-sm--5 { margin-left: var(--space_5); }
  .ml-sm--6 { margin-left: var(--space_6); }
  .ml-sm--7 { margin-left: var(--space_7); }
  .ml-sm--8 { margin-left: var(--space_8); }
  .ml-sm--12 { margin-left: var(--space_12); }
  .ml-sm--16 { margin-left: var(--space_16); }
}
@media (min-width: 768px) {
  .ml-md--auto { margin-left: auto; }
  .ml-md--0 { margin-left: 0; }
  .ml-md--1 { margin-left: var(--space_1); }
  .ml-md--2 { margin-left: var(--space_2); }
  .ml-md--3 { margin-left: var(--space_3); }
  .ml-md--4 { margin-left: var(--space_4); }
  .ml-md--5 { margin-left: var(--space_5); }
  .ml-md--6 { margin-left: var(--space_6); }
  .ml-md--7 { margin-left: var(--space_7); }
  .ml-md--8 { margin-left: var(--space_8); }
  .ml-md--12 { margin-left: var(--space_12); }
  .ml-md--16 { margin-left: var(--space_16); }
}
@media (min-width: 992px) {
  .ml-lg--auto { margin-left: auto; }
  .ml-lg--0 { margin-left: 0; }
  .ml-lg--1 { margin-left: var(--space_1); }
  .ml-lg--2 { margin-left: var(--space_2); }
  .ml-lg--3 { margin-left: var(--space_3); }
  .ml-lg--4 { margin-left: var(--space_4); }
  .ml-lg--5 { margin-left: var(--space_5); }
  .ml-lg--6 { margin-left: var(--space_6); }
  .ml-lg--7 { margin-left: var(--space_7); }
  .ml-lg--8 { margin-left: var(--space_8); }
  .ml-lg--12 { margin-left: var(--space_12); }
  .ml-lg--16 { margin-left: var(--space_16); }
}
@media (min-width: 1200px) {
  .ml-xl--auto { margin-left: auto; }
  .ml-xl--0 { margin-left: 0; }
  .ml-xl--1 { margin-left: var(--space_1); }
  .ml-xl--2 { margin-left: var(--space_2); }
  .ml-xl--3 { margin-left: var(--space_3); }
  .ml-xl--4 { margin-left: var(--space_4); }
  .ml-xl--5 { margin-left: var(--space_5); }
  .ml-xl--6 { margin-left: var(--space_6); }
  .ml-xl--7 { margin-left: var(--space_7); }
  .ml-xl--8 { margin-left: var(--space_8); }
  .ml-xl--12 { margin-left: var(--space_12); }
  .ml-xl--16 { margin-left: var(--space_16); }
}
@media (min-width: 1400px) {
  .ml-xxl--auto { margin-left: auto; }
  .ml-xxl--0 { margin-left: 0; }
  .ml-xxl--1 { margin-left: var(--space_1); }
  .ml-xxl--2 { margin-left: var(--space_2); }
  .ml-xxl--3 { margin-left: var(--space_3); }
  .ml-xxl--4 { margin-left: var(--space_4); }
  .ml-xxl--5 { margin-left: var(--space_5); }
  .ml-xxl--6 { margin-left: var(--space_6); }
  .ml-xxl--7 { margin-left: var(--space_7); }
  .ml-xxl--8 { margin-left: var(--space_8); }
  .ml-xxl--12 { margin-left: var(--space_12); }
  .ml-xxl--16 { margin-left: var(--space_16); }
}

/**
* Margin right
*/
.mr--auto { margin-right: auto; }
.mr--0 { margin-right: 0; }
.mr--1 { margin-right: var(--space_1); }
.mr--2 { margin-right: var(--space_2); }
.mr--3 { margin-right: var(--space_3); }
.mr--4 { margin-right: var(--space_4); }
.mr--5 { margin-right: var(--space_5); }
.mr--6 { margin-right: var(--space_6); }
.mr--7 { margin-right: var(--space_7); }
.mr--8 { margin-right: var(--space_8); }
.mr--12 { margin-right: var(--space_12); }
.mr--16 { margin-right: var(--space_16); }
@media (min-width: 576px) {
  .mr-sm--auto { margin-right: auto; }
  .mr-sm--0 { margin-right: 0; }
  .mr-sm--1 { margin-right: var(--space_1); }
  .mr-sm--2 { margin-right: var(--space_2); }
  .mr-sm--3 { margin-right: var(--space_3); }
  .mr-sm--4 { margin-right: var(--space_4); }
  .mr-sm--5 { margin-right: var(--space_5); }
  .mr-sm--6 { margin-right: var(--space_6); }
  .mr-sm--7 { margin-right: var(--space_7); }
  .mr-sm--8 { margin-right: var(--space_8); }
  .mr-sm--12 { margin-right: var(--space_12); }
  .mr-sm--16 { margin-right: var(--space_16); }
}
@media (min-width: 768px) {
  .mr-md--auto { margin-right: auto; }
  .mr-md--0 { margin-right: 0; }
  .mr-md--1 { margin-right: var(--space_1); }
  .mr-md--2 { margin-right: var(--space_2); }
  .mr-md--3 { margin-right: var(--space_3); }
  .mr-md--4 { margin-right: var(--space_4); }
  .mr-md--5 { margin-right: var(--space_5); }
  .mr-md--6 { margin-right: var(--space_6); }
  .mr-md--7 { margin-right: var(--space_7); }
  .mr-md--8 { margin-right: var(--space_8); }
  .mr-md--12 { margin-right: var(--space_12); }
  .mr-md--16 { margin-right: var(--space_16); }
}
@media (min-width: 992px) {
  .mr-lg--auto { margin-right: auto; }
  .mr-lg--0 { margin-right: 0; }
  .mr-lg--1 { margin-right: var(--space_1); }
  .mr-lg--2 { margin-right: var(--space_2); }
  .mr-lg--3 { margin-right: var(--space_3); }
  .mr-lg--4 { margin-right: var(--space_4); }
  .mr-lg--5 { margin-right: var(--space_5); }
  .mr-lg--6 { margin-right: var(--space_6); }
  .mr-lg--7 { margin-right: var(--space_7); }
  .mr-lg--8 { margin-right: var(--space_8); }
  .mr-lg--12 { margin-right: var(--space_12); }
  .mr-lg--16 { margin-right: var(--space_16); }
}
@media (min-width: 1200px) {
  .mr-xl--auto { margin-right: auto; }
  .mr-xl--0 { margin-right: 0; }
  .mr-xl--1 { margin-right: var(--space_1); }
  .mr-xl--2 { margin-right: var(--space_2); }
  .mr-xl--3 { margin-right: var(--space_3); }
  .mr-xl--4 { margin-right: var(--space_4); }
  .mr-xl--5 { margin-right: var(--space_5); }
  .mr-xl--6 { margin-right: var(--space_6); }
  .mr-xl--7 { margin-right: var(--space_7); }
  .mr-xl--8 { margin-right: var(--space_8); }
  .mr-xl--12 { margin-right: var(--space_12); }
  .mr-xl--16 { margin-right: var(--space_16); }
}
@media (min-width: 1400px) {
  .mr-xxl--auto { margin-right: auto; }
  .mr-xxl--0 { margin-right: 0; }
  .mr-xxl--1 { margin-right: var(--space_1); }
  .mr-xxl--2 { margin-right: var(--space_2); }
  .mr-xxl--3 { margin-right: var(--space_3); }
  .mr-xxl--4 { margin-right: var(--space_4); }
  .mr-xxl--5 { margin-right: var(--space_5); }
  .mr-xxl--6 { margin-right: var(--space_6); }
  .mr-xxl--7 { margin-right: var(--space_7); }
  .mr-xxl--8 { margin-right: var(--space_8); }
  .mr-xxl--12 { margin-right: var(--space_12); }
  .mr-xxl--16 { margin-right: var(--space_16); }
}

/**
* Margin top
*/
.mt--auto { margin-top: auto; }
.mt--0 { margin-top: 0; }
.mt--1 { margin-top: var(--space_1); }
.mt--2 { margin-top: var(--space_2); }
.mt--3 { margin-top: var(--space_3); }
.mt--4 { margin-top: var(--space_4); }
.mt--5 { margin-top: var(--space_5); }
.mt--6 { margin-top: var(--space_6); }
.mt--7 { margin-top: var(--space_7); }
.mt--8 { margin-top: var(--space_8); }
.mt--12 { margin-top: var(--space_12); }
.mt--16 { margin-top: var(--space_16); }
@media (min-width: 576px) {
  .mt-sm--auto { margin-top: auto; }
  .mt-sm--0 { margin-top: 0; }
  .mt-sm--1 { margin-top: var(--space_1); }
  .mt-sm--2 { margin-top: var(--space_2); }
  .mt-sm--3 { margin-top: var(--space_3); }
  .mt-sm--4 { margin-top: var(--space_4); }
  .mt-sm--5 { margin-top: var(--space_5); }
  .mt-sm--6 { margin-top: var(--space_6); }
  .mt-sm--7 { margin-top: var(--space_7); }
  .mt-sm--8 { margin-top: var(--space_8); }
  .mt-sm--12 { margin-top: var(--space_12); }
  .mt-sm--16 { margin-top: var(--space_16); }
}
@media (min-width: 768px) {
  .mt-md--auto { margin-top: auto; }
  .mt-md--0 { margin-top: 0; }
  .mt-md--1 { margin-top: var(--space_1); }
  .mt-md--2 { margin-top: var(--space_2); }
  .mt-md--3 { margin-top: var(--space_3); }
  .mt-md--4 { margin-top: var(--space_4); }
  .mt-md--5 { margin-top: var(--space_5); }
  .mt-md--6 { margin-top: var(--space_6); }
  .mt-md--7 { margin-top: var(--space_7); }
  .mt-md--8 { margin-top: var(--space_8); }
  .mt-md--12 { margin-top: var(--space_12); }
  .mt-md--16 { margin-top: var(--space_16); }
}
@media (min-width: 992px) {
  .mt-lg--auto { margin-top: auto; }
  .mt-lg--0 { margin-top: 0; }
  .mt-lg--1 { margin-top: var(--space_1); }
  .mt-lg--2 { margin-top: var(--space_2); }
  .mt-lg--3 { margin-top: var(--space_3); }
  .mt-lg--4 { margin-top: var(--space_4); }
  .mt-lg--5 { margin-top: var(--space_5); }
  .mt-lg--6 { margin-top: var(--space_6); }
  .mt-lg--7 { margin-top: var(--space_7); }
  .mt-lg--8 { margin-top: var(--space_8); }
  .mt-lg--12 { margin-top: var(--space_12); }
  .mt-lg--16 { margin-top: var(--space_16); }
}
@media (min-width: 1200px) {
  .mt-xl--auto { margin-top: auto; }
  .mt-xl--0 { margin-top: 0; }
  .mt-xl--1 { margin-top: var(--space_1); }
  .mt-xl--2 { margin-top: var(--space_2); }
  .mt-xl--3 { margin-top: var(--space_3); }
  .mt-xl--4 { margin-top: var(--space_4); }
  .mt-xl--5 { margin-top: var(--space_5); }
  .mt-xl--6 { margin-top: var(--space_6); }
  .mt-xl--7 { margin-top: var(--space_7); }
  .mt-xl--8 { margin-top: var(--space_8); }
  .mt-xl--12 { margin-top: var(--space_12); }
  .mt-xl--16 { margin-top: var(--space_16); }
}
@media (min-width: 1400px) {
  .mt-xxl--auto { margin-top: auto; }
  .mt-xxl--0 { margin-top: 0; }
  .mt-xxl--1 { margin-top: var(--space_1); }
  .mt-xxl--2 { margin-top: var(--space_2); }
  .mt-xxl--3 { margin-top: var(--space_3); }
  .mt-xxl--4 { margin-top: var(--space_4); }
  .mt-xxl--5 { margin-top: var(--space_5); }
  .mt-xxl--6 { margin-top: var(--space_6); }
  .mt-xxl--7 { margin-top: var(--space_7); }
  .mt-xxl--8 { margin-top: var(--space_8); }
  .mt-xxl--12 { margin-top: var(--space_12); }
  .mt-xxl--16 { margin-top: var(--space_16); }
}

/**
* Margin bottom
*/
.mb--auto { margin-bottom: auto; }
.mb--0 { margin-bottom: 0; }
.mb--1 { margin-bottom: var(--space_1); }
.mb--2 { margin-bottom: var(--space_2); }
.mb--3 { margin-bottom: var(--space_3); }
.mb--4 { margin-bottom: var(--space_4); }
.mb--5 { margin-bottom: var(--space_5); }
.mb--6 { margin-bottom: var(--space_6); }
.mb--7 { margin-bottom: var(--space_7); }
.mb--8 { margin-bottom: var(--space_8); }
.mb--12 { margin-bottom: var(--space_12); }
.mb--16 { margin-bottom: var(--space_16); }
@media (min-width: 576px) {
  .mb-sm--auto { margin-bottom: auto; }
  .mb-sm--0 { margin-bottom: 0; }
  .mb-sm--1 { margin-bottom: var(--space_1); }
  .mb-sm--2 { margin-bottom: var(--space_2); }
  .mb-sm--3 { margin-bottom: var(--space_3); }
  .mb-sm--4 { margin-bottom: var(--space_4); }
  .mb-sm--5 { margin-bottom: var(--space_5); }
  .mb-sm--6 { margin-bottom: var(--space_6); }
  .mb-sm--7 { margin-bottom: var(--space_7); }
  .mb-sm--8 { margin-bottom: var(--space_8); }
  .mb-sm--12 { margin-bottom: var(--space_12); }
  .mb-sm--16 { margin-bottom: var(--space_16); }
}
@media (min-width: 768px) {
  .mb-md--auto { margin-bottom: auto; }
  .mb-md--0 { margin-bottom: 0; }
  .mb-md--1 { margin-bottom: var(--space_1); }
  .mb-md--2 { margin-bottom: var(--space_2); }
  .mb-md--3 { margin-bottom: var(--space_3); }
  .mb-md--4 { margin-bottom: var(--space_4); }
  .mb-md--5 { margin-bottom: var(--space_5); }
  .mb-md--6 { margin-bottom: var(--space_6); }
  .mb-md--7 { margin-bottom: var(--space_7); }
  .mb-md--8 { margin-bottom: var(--space_8); }
  .mb-md--12 { margin-bottom: var(--space_12); }
  .mb-md--16 { margin-bottom: var(--space_16); }
}
@media (min-width: 992px) {
  .mb-lg--auto { margin-bottom: auto; }
  .mb-lg--0 { margin-bottom: 0; }
  .mb-lg--1 { margin-bottom: var(--space_1); }
  .mb-lg--2 { margin-bottom: var(--space_2); }
  .mb-lg--3 { margin-bottom: var(--space_3); }
  .mb-lg--4 { margin-bottom: var(--space_4); }
  .mb-lg--5 { margin-bottom: var(--space_5); }
  .mb-lg--6 { margin-bottom: var(--space_6); }
  .mb-lg--7 { margin-bottom: var(--space_7); }
  .mb-lg--8 { margin-bottom: var(--space_8); }
  .mb-lg--12 { margin-bottom: var(--space_12); }
  .mb-lg--16 { margin-bottom: var(--space_16); }
}
@media (min-width: 1200px) {
  .mb-xl--auto { margin-bottom: auto; }
  .mb-xl--0 { margin-bottom: 0; }
  .mb-xl--1 { margin-bottom: var(--space_1); }
  .mb-xl--2 { margin-bottom: var(--space_2); }
  .mb-xl--3 { margin-bottom: var(--space_3); }
  .mb-xl--4 { margin-bottom: var(--space_4); }
  .mb-xl--5 { margin-bottom: var(--space_5); }
  .mb-xl--6 { margin-bottom: var(--space_6); }
  .mb-xl--7 { margin-bottom: var(--space_7); }
  .mb-xl--8 { margin-bottom: var(--space_8); }
  .mb-xl--12 { margin-bottom: var(--space_12); }
  .mb-xl--16 { margin-bottom: var(--space_16); }
}
@media (min-width: 1400px) {
  .mb-xxl--auto { margin-bottom: auto; }
  .mb-xxl--0 { margin-bottom: 0; }
  .mb-xxl--1 { margin-bottom: var(--space_1); }
  .mb-xxl--2 { margin-bottom: var(--space_2); }
  .mb-xxl--3 { margin-bottom: var(--space_3); }
  .mb-xxl--4 { margin-bottom: var(--space_4); }
  .mb-xxl--5 { margin-bottom: var(--space_5); }
  .mb-xxl--6 { margin-bottom: var(--space_6); }
  .mb-xxl--7 { margin-bottom: var(--space_7); }
  .mb-xxl--8 { margin-bottom: var(--space_8); }
  .mb-xxl--12 { margin-bottom: var(--space_12); }
  .mb-xxl--16 { margin-bottom: var(--space_16); }
}

/* Padding
========================================================================== */

/**
* Padding all
*/
.p--0 { padding: 0; }
.p--1 { padding: var(--space_1); }
.p--2 { padding: var(--space_2); }
.p--3 { padding: var(--space_3); }
.p--4 { padding: var(--space_4); }
.p--5 { padding: var(--space_5); }
.p--6 { padding: var(--space_6); }
.p--7 { padding: var(--space_7); }
.p--8 { padding: var(--space_8); }
.p--12 { padding: var(--space_12); }
.p--16 { padding: var(--space_16); }
@media (min-width: 576px) {
  .p-sm--0 { padding: 0; }
  .p-sm--1 { padding: var(--space_1); }
  .p-sm--2 { padding: var(--space_2); }
  .p-sm--3 { padding: var(--space_3); }
  .p-sm--4 { padding: var(--space_4); }
  .p-sm--5 { padding: var(--space_5); }
  .p-sm--6 { padding: var(--space_6); }
  .p-sm--7 { padding: var(--space_7); }
  .p-sm--8 { padding: var(--space_8); }
  .p-sm--12 { padding: var(--space_12); }
  .p-sm--16 { padding: var(--space_16); }
}
@media (min-width: 768px) {
  .p-md--0 { padding: 0; }
  .p-md--1 { padding: var(--space_1); }
  .p-md--2 { padding: var(--space_2); }
  .p-md--3 { padding: var(--space_3); }
  .p-md--4 { padding: var(--space_4); }
  .p-md--5 { padding: var(--space_5); }
  .p-md--6 { padding: var(--space_6); }
  .p-md--7 { padding: var(--space_7); }
  .p-md--8 { padding: var(--space_8); }
  .p-md--12 { padding: var(--space_12); }
  .p-md--16 { padding: var(--space_16); }
}
@media (min-width: 992px) {
  .p-lg--0 { padding: 0; }
  .p-lg--1 { padding: var(--space_1); }
  .p-lg--2 { padding: var(--space_2); }
  .p-lg--3 { padding: var(--space_3); }
  .p-lg--4 { padding: var(--space_4); }
  .p-lg--5 { padding: var(--space_5); }
  .p-lg--6 { padding: var(--space_6); }
  .p-lg--7 { padding: var(--space_7); }
  .p-lg--8 { padding: var(--space_8); }
  .p-lg--12 { padding: var(--space_12); }
  .p-lg--16 { padding: var(--space_16); }
}
@media (min-width: 1200px) {
  .p-xl--0 { padding: 0; }
  .p-xl--1 { padding: var(--space_1); }
  .p-xl--2 { padding: var(--space_2); }
  .p-xl--3 { padding: var(--space_3); }
  .p-xl--4 { padding: var(--space_4); }
  .p-xl--5 { padding: var(--space_5); }
  .p-xl--6 { padding: var(--space_6); }
  .p-xl--7 { padding: var(--space_7); }
  .p-xl--8 { padding: var(--space_8); }
  .p-xl--12 { padding: var(--space_12); }
  .p-xl--16 { padding: var(--space_16); }
}
@media (min-width: 1400px) {
  .p-xxl--0 { padding: 0; }
  .p-xxl--1 { padding: var(--space_1); }
  .p-xxl--2 { padding: var(--space_2); }
  .p-xxl--3 { padding: var(--space_3); }
  .p-xxl--4 { padding: var(--space_4); }
  .p-xxl--5 { padding: var(--space_5); }
  .p-xxl--6 { padding: var(--space_6); }
  .p-xxl--7 { padding: var(--space_7); }
  .p-xxl--8 { padding: var(--space_8); }
  .p-xxl--12 { padding: var(--space_12); }
  .p-xxl--16 { padding: var(--space_16); }
}

/**
* Padding horizontal
*/
.px--0 {
  padding-left: 0;
  padding-right: 0;
}
.px--1 {
  padding-left: var(--space_1);
  padding-right: var(--space_1);
}
.px--2 {
  padding-left: var(--space_2);
  padding-right: var(--space_2);
}
.px--3 {
  padding-left: var(--space_3);
  padding-right: var(--space_3);
}
.px--4 {
  padding-left: var(--space_4);
  padding-right: var(--space_4);
}
.px--5 {
  padding-left: var(--space_5);
  padding-right: var(--space_5);
}
.px--6 {
  padding-left: var(--space_6);
  padding-right: var(--space_6);
}
.px--7 {
  padding-left: var(--space_7);
  padding-right: var(--space_7);
}
.px--8 {
  padding-left: var(--space_8);
  padding-right: var(--space_8);
}
.px--12 {
  padding-left: var(--space_12);
  padding-right: var(--space_12);
}
.px--16 {
  padding-left: var(--space_16);
  padding-right: var(--space_16);
}
@media (min-width: 576px) {
  .px-sm--0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-sm--1 {
    padding-left: var(--space_1);
    padding-right: var(--space_1);
  }
  .px-sm--2 {
    padding-left: var(--space_2);
    padding-right: var(--space_2);
  }
  .px-sm--3 {
    padding-left: var(--space_3);
    padding-right: var(--space_3);
  }
  .px-sm--4 {
    padding-left: var(--space_4);
    padding-right: var(--space_4);
  }
  .px-sm--5 {
    padding-left: var(--space_5);
    padding-right: var(--space_5);
  }
  .px-sm--6 {
    padding-left: var(--space_6);
    padding-right: var(--space_6);
  }
  .px-sm--7 {
    padding-left: var(--space_7);
    padding-right: var(--space_7);
  }
  .px-sm--8 {
    padding-left: var(--space_8);
    padding-right: var(--space_8);
  }
  .px-sm--12 {
    padding-left: var(--space_12);
    padding-right: var(--space_12);
  }
  .px-sm--16 {
    padding-left: var(--space_16);
    padding-right: var(--space_16);
  }
}
@media (min-width: 768px) {
  .px-md--0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-md--1 {
    padding-left: var(--space_1);
    padding-right: var(--space_1);
  }
  .px-md--2 {
    padding-left: var(--space_2);
    padding-right: var(--space_2);
  }
  .px-md--3 {
    padding-left: var(--space_3);
    padding-right: var(--space_3);
  }
  .px-md--4 {
    padding-left: var(--space_4);
    padding-right: var(--space_4);
  }
  .px-md--5 {
    padding-left: var(--space_5);
    padding-right: var(--space_5);
  }
  .px-md--6 {
    padding-left: var(--space_6);
    padding-right: var(--space_6);
  }
  .px-md--7 {
    padding-left: var(--space_7);
    padding-right: var(--space_7);
  }
  .px-md--8 {
    padding-left: var(--space_8);
    padding-right: var(--space_8);
  }
  .px-md--12 {
    padding-left: var(--space_12);
    padding-right: var(--space_12);
  }
  .px-md--16 {
    padding-left: var(--space_16);
    padding-right: var(--space_16);
  }
}
@media (min-width: 992px) {
  .px-lg--0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-lg--1 {
    padding-left: var(--space_1);
    padding-right: var(--space_1);
  }
  .px-lg--2 {
    padding-left: var(--space_2);
    padding-right: var(--space_2);
  }
  .px-lg--3 {
    padding-left: var(--space_3);
    padding-right: var(--space_3);
  }
  .px-lg--4 {
    padding-left: var(--space_4);
    padding-right: var(--space_4);
  }
  .px-lg--5 {
    padding-left: var(--space_5);
    padding-right: var(--space_5);
  }
  .px-lg--6 {
    padding-left: var(--space_6);
    padding-right: var(--space_6);
  }
  .px-lg--7 {
    padding-left: var(--space_7);
    padding-right: var(--space_7);
  }
  .px-lg--8 {
    padding-left: var(--space_8);
    padding-right: var(--space_8);
  }
  .px-lg--12 {
    padding-left: var(--space_12);
    padding-right: var(--space_12);
  }
  .px-lg--16 {
    padding-left: var(--space_16);
    padding-right: var(--space_16);
  }
}
@media (min-width: 1200px) {
  .px-xl--0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-xl--1 {
    padding-left: var(--space_1);
    padding-right: var(--space_1);
  }
  .px-xl--2 {
    padding-left: var(--space_2);
    padding-right: var(--space_2);
  }
  .px-xl--3 {
    padding-left: var(--space_3);
    padding-right: var(--space_3);
  }
  .px-xl--4 {
    padding-left: var(--space_4);
    padding-right: var(--space_4);
  }
  .px-xl--5 {
    padding-left: var(--space_5);
    padding-right: var(--space_5);
  }
  .px-xl--6 {
    padding-left: var(--space_6);
    padding-right: var(--space_6);
  }
  .px-xl--7 {
    padding-left: var(--space_7);
    padding-right: var(--space_7);
  }
  .px-xl--8 {
    padding-left: var(--space_8);
    padding-right: var(--space_8);
  }
  .px-xl--12 {
    padding-left: var(--space_12);
    padding-right: var(--space_12);
  }
  .px-xl--16 {
    padding-left: var(--space_16);
    padding-right: var(--space_16);
  }
}
@media (min-width: 1400px) {
  .px-xxl--0 {
    padding-left: 0;
    padding-right: 0;
  }
  .px-xxl--1 {
    padding-left: var(--space_1);
    padding-right: var(--space_1);
  }
  .px-xxl--2 {
    padding-left: var(--space_2);
    padding-right: var(--space_2);
  }
  .px-xxl--3 {
    padding-left: var(--space_3);
    padding-right: var(--space_3);
  }
  .px-xxl--4 {
    padding-left: var(--space_4);
    padding-right: var(--space_4);
  }
  .px-xxl--5 {
    padding-left: var(--space_5);
    padding-right: var(--space_5);
  }
  .px-xxl--6 {
    padding-left: var(--space_6);
    padding-right: var(--space_6);
  }
  .px-xxl--7 {
    padding-left: var(--space_7);
    padding-right: var(--space_7);
  }
  .px-xxl--8 {
    padding-left: var(--space_8);
    padding-right: var(--space_8);
  }
  .px-xxl--12 {
    padding-left: var(--space_12);
    padding-right: var(--space_12);
  }
  .px-xxl--16 {
    padding-left: var(--space_16);
    padding-right: var(--space_16);
  }
}

/**
* Padding vertical
*/
.py--0 {
  padding-top: 0;
  padding-bottom: 0;
}
.py--1 {
  padding-top: var(--space_1);
  padding-bottom: var(--space_1);
}
.py--2 {
  padding-top: var(--space_2);
  padding-bottom: var(--space_2);
}
.py--3 {
  padding-top: var(--space_3);
  padding-bottom: var(--space_3);
}
.py--4 {
  padding-top: var(--space_4);
  padding-bottom: var(--space_4);
}
.py--5 {
  padding-top: var(--space_5);
  padding-bottom: var(--space_5);
}
.py--6 {
  padding-top: var(--space_6);
  padding-bottom: var(--space_6);
}
.py--7 {
  padding-top: var(--space_7);
  padding-bottom: var(--space_7);
}
.py--8 {
  padding-top: var(--space_8);
  padding-bottom: var(--space_8);
}
.py--12 {
  padding-top: var(--space_12);
  padding-bottom: var(--space_12);
}
.py--16 {
  padding-top: var(--space_16);
  padding-bottom: var(--space_16);
}
@media (min-width: 576px) {
  .py-sm--0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-sm--1 {
    padding-top: var(--space_1);
    padding-bottom: var(--space_1);
  }
  .py-sm--2 {
    padding-top: var(--space_2);
    padding-bottom: var(--space_2);
  }
  .py-sm--3 {
    padding-top: var(--space_3);
    padding-bottom: var(--space_3);
  }
  .py-sm--4 {
    padding-top: var(--space_4);
    padding-bottom: var(--space_4);
  }
  .py-sm--5 {
    padding-top: var(--space_5);
    padding-bottom: var(--space_5);
  }
  .py-sm--6 {
    padding-top: var(--space_6);
    padding-bottom: var(--space_6);
  }
  .py-sm--7 {
    padding-top: var(--space_7);
    padding-bottom: var(--space_7);
  }
  .py-sm--8 {
    padding-top: var(--space_8);
    padding-bottom: var(--space_8);
  }
  .py-sm--12 {
    padding-top: var(--space_12);
    padding-bottom: var(--space_12);
  }
  .py-sm--16 {
    padding-top: var(--space_16);
    padding-bottom: var(--space_16);
  }
}
@media (min-width: 768px) {
  .py-md--0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-md--1 {
    padding-top: var(--space_1);
    padding-bottom: var(--space_1);
  }
  .py-md--2 {
    padding-top: var(--space_2);
    padding-bottom: var(--space_2);
  }
  .py-md--3 {
    padding-top: var(--space_3);
    padding-bottom: var(--space_3);
  }
  .py-md--4 {
    padding-top: var(--space_4);
    padding-bottom: var(--space_4);
  }
  .py-md--5 {
    padding-top: var(--space_5);
    padding-bottom: var(--space_5);
  }
  .py-md--6 {
    padding-top: var(--space_6);
    padding-bottom: var(--space_6);
  }
  .py-md--7 {
    padding-top: var(--space_7);
    padding-bottom: var(--space_7);
  }
  .py-md--8 {
    padding-top: var(--space_8);
    padding-bottom: var(--space_8);
  }
  .py-md--12 {
    padding-top: var(--space_12);
    padding-bottom: var(--space_12);
  }
  .py-md--16 {
    padding-top: var(--space_16);
    padding-bottom: var(--space_16);
  }
}
@media (min-width: 992px) {
  .py-lg--0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-lg--1 {
    padding-top: var(--space_1);
    padding-bottom: var(--space_1);
  }
  .py-lg--2 {
    padding-top: var(--space_2);
    padding-bottom: var(--space_2);
  }
  .py-lg--3 {
    padding-top: var(--space_3);
    padding-bottom: var(--space_3);
  }
  .py-lg--4 {
    padding-top: var(--space_4);
    padding-bottom: var(--space_4);
  }
  .py-lg--5 {
    padding-top: var(--space_5);
    padding-bottom: var(--space_5);
  }
  .py-lg--6 {
    padding-top: var(--space_6);
    padding-bottom: var(--space_6);
  }
  .py-lg--7 {
    padding-top: var(--space_7);
    padding-bottom: var(--space_7);
  }
  .py-lg--8 {
    padding-top: var(--space_8);
    padding-bottom: var(--space_8);
  }
  .py-lg--12 {
    padding-top: var(--space_12);
    padding-bottom: var(--space_12);
  }
  .py-lg--16 {
    padding-top: var(--space_16);
    padding-bottom: var(--space_16);
  }
}
@media (min-width: 1200px) {
  .py-xl--0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xl--1 {
    padding-top: var(--space_1);
    padding-bottom: var(--space_1);
  }
  .py-xl--2 {
    padding-top: var(--space_2);
    padding-bottom: var(--space_2);
  }
  .py-xl--3 {
    padding-top: var(--space_3);
    padding-bottom: var(--space_3);
  }
  .py-xl--4 {
    padding-top: var(--space_4);
    padding-bottom: var(--space_4);
  }
  .py-xl--5 {
    padding-top: var(--space_5);
    padding-bottom: var(--space_5);
  }
  .py-xl--6 {
    padding-top: var(--space_6);
    padding-bottom: var(--space_6);
  }
  .py-xl--7 {
    padding-top: var(--space_7);
    padding-bottom: var(--space_7);
  }
  .py-xl--8 {
    padding-top: var(--space_8);
    padding-bottom: var(--space_8);
  }
  .py-xl--12 {
    padding-top: var(--space_12);
    padding-bottom: var(--space_12);
  }
  .py-xl--16 {
    padding-top: var(--space_16);
    padding-bottom: var(--space_16);
  }
}
@media (min-width: 1400px) {
  .py-xxl--0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xxl--1 {
    padding-top: var(--space_1);
    padding-bottom: var(--space_1);
  }
  .py-xxl--2 {
    padding-top: var(--space_2);
    padding-bottom: var(--space_2);
  }
  .py-xxl--3 {
    padding-top: var(--space_3);
    padding-bottom: var(--space_3);
  }
  .py-xxl--4 {
    padding-top: var(--space_4);
    padding-bottom: var(--space_4);
  }
  .py-xxl--5 {
    padding-top: var(--space_5);
    padding-bottom: var(--space_5);
  }
  .py-xxl--6 {
    padding-top: var(--space_6);
    padding-bottom: var(--space_6);
  }
  .py-xxl--7 {
    padding-top: var(--space_7);
    padding-bottom: var(--space_7);
  }
  .py-xxl--8 {
    padding-top: var(--space_8);
    padding-bottom: var(--space_8);
  }
  .py-xxl--12 {
    padding-top: var(--space_12);
    padding-bottom: var(--space_12);
  }
  .py-xxl--16 {
    padding-top: var(--space_16);
    padding-bottom: var(--space_16);
  }
}

/**
* Padding left
*/
.pl--0 { padding-left: 0; }
.pl--1 { padding-left: var(--space_1); }
.pl--2 { padding-left: var(--space_2); }
.pl--3 { padding-left: var(--space_3); }
.pl--4 { padding-left: var(--space_4); }
.pl--5 { padding-left: var(--space_5); }
.pl--6 { padding-left: var(--space_6); }
.pl--7 { padding-left: var(--space_7); }
.pl--8 { padding-left: var(--space_8); }
.pl--12 { padding-left: var(--space_12); }
.pl--16 { padding-left: var(--space_16); }
@media (min-width: 576px) {
  .pl-sm--0 { padding-left: 0; }
  .pl-sm--1 { padding-left: var(--space_1); }
  .pl-sm--2 { padding-left: var(--space_2); }
  .pl-sm--3 { padding-left: var(--space_3); }
  .pl-sm--4 { padding-left: var(--space_4); }
  .pl-sm--5 { padding-left: var(--space_5); }
  .pl-sm--6 { padding-left: var(--space_6); }
  .pl-sm--7 { padding-left: var(--space_7); }
  .pl-sm--8 { padding-left: var(--space_8); }
  .pl-sm--12 { padding-left: var(--space_12); }
  .pl-sm--16 { padding-left: var(--space_16); }
}
@media (min-width: 768px) {
  .pl-md--0 { padding-left: 0; }
  .pl-md--1 { padding-left: var(--space_1); }
  .pl-md--2 { padding-left: var(--space_2); }
  .pl-md--3 { padding-left: var(--space_3); }
  .pl-md--4 { padding-left: var(--space_4); }
  .pl-md--5 { padding-left: var(--space_5); }
  .pl-md--6 { padding-left: var(--space_6); }
  .pl-md--7 { padding-left: var(--space_7); }
  .pl-md--8 { padding-left: var(--space_8); }
  .pl-md--12 { padding-left: var(--space_12); }
  .pl-md--16 { padding-left: var(--space_16); }
}
@media (min-width: 992px) {
  .pl-lg--0 { padding-left: 0; }
  .pl-lg--1 { padding-left: var(--space_1); }
  .pl-lg--2 { padding-left: var(--space_2); }
  .pl-lg--3 { padding-left: var(--space_3); }
  .pl-lg--4 { padding-left: var(--space_4); }
  .pl-lg--5 { padding-left: var(--space_5); }
  .pl-lg--6 { padding-left: var(--space_6); }
  .pl-lg--7 { padding-left: var(--space_7); }
  .pl-lg--8 { padding-left: var(--space_8); }
  .pl-lg--12 { padding-left: var(--space_12); }
  .pl-lg--16 { padding-left: var(--space_16); }
}
@media (min-width: 1200px) {
  .pl-xl--0 { padding-left: 0; }
  .pl-xl--1 { padding-left: var(--space_1); }
  .pl-xl--2 { padding-left: var(--space_2); }
  .pl-xl--3 { padding-left: var(--space_3); }
  .pl-xl--4 { padding-left: var(--space_4); }
  .pl-xl--5 { padding-left: var(--space_5); }
  .pl-xl--6 { padding-left: var(--space_6); }
  .pl-xl--7 { padding-left: var(--space_7); }
  .pl-xl--8 { padding-left: var(--space_8); }
  .pl-xl--12 { padding-left: var(--space_12); }
  .pl-xl--16 { padding-left: var(--space_16); }
}
@media (min-width: 1400px) {
  .pl-xxl--0 { padding-left: 0; }
  .pl-xxl--1 { padding-left: var(--space_1); }
  .pl-xxl--2 { padding-left: var(--space_2); }
  .pl-xxl--3 { padding-left: var(--space_3); }
  .pl-xxl--4 { padding-left: var(--space_4); }
  .pl-xxl--5 { padding-left: var(--space_5); }
  .pl-xxl--6 { padding-left: var(--space_6); }
  .pl-xxl--7 { padding-left: var(--space_7); }
  .pl-xxl--8 { padding-left: var(--space_8); }
  .pl-xxl--12 { padding-left: var(--space_12); }
  .pl-xxl--16 { padding-left: var(--space_16); }
}

/**
* Padding right
*/
.pr--0 { padding-right: 0; }
.pr--1 { padding-right: var(--space_1); }
.pr--2 { padding-right: var(--space_2); }
.pr--3 { padding-right: var(--space_3); }
.pr--4 { padding-right: var(--space_4); }
.pr--5 { padding-right: var(--space_5); }
.pr--6 { padding-right: var(--space_6); }
.pr--7 { padding-right: var(--space_7); }
.pr--8 { padding-right: var(--space_8); }
.pr--12 { padding-right: var(--space_12); }
.pr--16 { padding-right: var(--space_16); }
@media (min-width: 576px) {
  .pr-sm--0 { padding-right: 0; }
  .pr-sm--1 { padding-right: var(--space_1); }
  .pr-sm--2 { padding-right: var(--space_2); }
  .pr-sm--3 { padding-right: var(--space_3); }
  .pr-sm--4 { padding-right: var(--space_4); }
  .pr-sm--5 { padding-right: var(--space_5); }
  .pr-sm--6 { padding-right: var(--space_6); }
  .pr-sm--7 { padding-right: var(--space_7); }
  .pr-sm--8 { padding-right: var(--space_8); }
  .pr-sm--12 { padding-right: var(--space_12); }
  .pr-sm--16 { padding-right: var(--space_16); }
}
@media (min-width: 768px) {
  .pr-md--0 { padding-right: 0; }
  .pr-md--1 { padding-right: var(--space_1); }
  .pr-md--2 { padding-right: var(--space_2); }
  .pr-md--3 { padding-right: var(--space_3); }
  .pr-md--4 { padding-right: var(--space_4); }
  .pr-md--5 { padding-right: var(--space_5); }
  .pr-md--6 { padding-right: var(--space_6); }
  .pr-md--7 { padding-right: var(--space_7); }
  .pr-md--8 { padding-right: var(--space_8); }
  .pr-md--12 { padding-right: var(--space_12); }
  .pr-md--16 { padding-right: var(--space_16); }
}
@media (min-width: 992px) {
  .pr-lg--0 { padding-right: 0; }
  .pr-lg--1 { padding-right: var(--space_1); }
  .pr-lg--2 { padding-right: var(--space_2); }
  .pr-lg--3 { padding-right: var(--space_3); }
  .pr-lg--4 { padding-right: var(--space_4); }
  .pr-lg--5 { padding-right: var(--space_5); }
  .pr-lg--6 { padding-right: var(--space_6); }
  .pr-lg--7 { padding-right: var(--space_7); }
  .pr-lg--8 { padding-right: var(--space_8); }
  .pr-lg--12 { padding-right: var(--space_12); }
  .pr-lg--16 { padding-right: var(--space_16); }
}
@media (min-width: 1200px) {
  .pr-xl--0 { padding-right: 0; }
  .pr-xl--1 { padding-right: var(--space_1); }
  .pr-xl--2 { padding-right: var(--space_2); }
  .pr-xl--3 { padding-right: var(--space_3); }
  .pr-xl--4 { padding-right: var(--space_4); }
  .pr-xl--5 { padding-right: var(--space_5); }
  .pr-xl--6 { padding-right: var(--space_6); }
  .pr-xl--7 { padding-right: var(--space_7); }
  .pr-xl--8 { padding-right: var(--space_8); }
  .pr-xl--12 { padding-right: var(--space_12); }
  .pr-xl--16 { padding-right: var(--space_16); }
}
@media (min-width: 1400px) {
  .pr-xxl--0 { padding-right: 0; }
  .pr-xxl--1 { padding-right: var(--space_1); }
  .pr-xxl--2 { padding-right: var(--space_2); }
  .pr-xxl--3 { padding-right: var(--space_3); }
  .pr-xxl--4 { padding-right: var(--space_4); }
  .pr-xxl--5 { padding-right: var(--space_5); }
  .pr-xxl--6 { padding-right: var(--space_6); }
  .pr-xxl--7 { padding-right: var(--space_7); }
  .pr-xxl--8 { padding-right: var(--space_8); }
  .pr-xxl--12 { padding-right: var(--space_12); }
  .pr-xxl--16 { padding-right: var(--space_16); }
}

/**
* Padding top
*/
.pt--0 { padding-top: 0; }
.pt--1 { padding-top: var(--space_1); }
.pt--2 { padding-top: var(--space_2); }
.pt--3 { padding-top: var(--space_3); }
.pt--4 { padding-top: var(--space_4); }
.pt--5 { padding-top: var(--space_5); }
.pt--6 { padding-top: var(--space_6); }
.pt--7 { padding-top: var(--space_7); }
.pt--8 { padding-top: var(--space_8); }
.pt--12 { padding-top: var(--space_12); }
.pt--16 { padding-top: var(--space_16); }
@media (min-width: 576px) {
  .pt-sm--0 { padding-top: 0; }
  .pt-sm--1 { padding-top: var(--space_1); }
  .pt-sm--2 { padding-top: var(--space_2); }
  .pt-sm--3 { padding-top: var(--space_3); }
  .pt-sm--4 { padding-top: var(--space_4); }
  .pt-sm--5 { padding-top: var(--space_5); }
  .pt-sm--6 { padding-top: var(--space_6); }
  .pt-sm--7 { padding-top: var(--space_7); }
  .pt-sm--8 { padding-top: var(--space_8); }
  .pt-sm--12 { padding-top: var(--space_12); }
  .pt-sm--16 { padding-top: var(--space_16); }
}
@media (min-width: 768px) {
  .pt-md--0 { padding-top: 0; }
  .pt-md--1 { padding-top: var(--space_1); }
  .pt-md--2 { padding-top: var(--space_2); }
  .pt-md--3 { padding-top: var(--space_3); }
  .pt-md--4 { padding-top: var(--space_4); }
  .pt-md--5 { padding-top: var(--space_5); }
  .pt-md--6 { padding-top: var(--space_6); }
  .pt-md--7 { padding-top: var(--space_7); }
  .pt-md--8 { padding-top: var(--space_8); }
  .pt-md--12 { padding-top: var(--space_12); }
  .pt-md--16 { padding-top: var(--space_16); }
}
@media (min-width: 992px) {
  .pt-lg--0 { padding-top: 0; }
  .pt-lg--1 { padding-top: var(--space_1); }
  .pt-lg--2 { padding-top: var(--space_2); }
  .pt-lg--3 { padding-top: var(--space_3); }
  .pt-lg--4 { padding-top: var(--space_4); }
  .pt-lg--5 { padding-top: var(--space_5); }
  .pt-lg--6 { padding-top: var(--space_6); }
  .pt-lg--7 { padding-top: var(--space_7); }
  .pt-lg--8 { padding-top: var(--space_8); }
  .pt-lg--12 { padding-top: var(--space_12); }
  .pt-lg--16 { padding-top: var(--space_16); }
}
@media (min-width: 1200px) {
  .pt-xl--0 { padding-top: 0; }
  .pt-xl--1 { padding-top: var(--space_1); }
  .pt-xl--2 { padding-top: var(--space_2); }
  .pt-xl--3 { padding-top: var(--space_3); }
  .pt-xl--4 { padding-top: var(--space_4); }
  .pt-xl--5 { padding-top: var(--space_5); }
  .pt-xl--6 { padding-top: var(--space_6); }
  .pt-xl--7 { padding-top: var(--space_7); }
  .pt-xl--8 { padding-top: var(--space_8); }
  .pt-xl--12 { padding-top: var(--space_12); }
  .pt-xl--16 { padding-top: var(--space_16); }
}
@media (min-width: 1400px) {
  .pt-xxl--0 { padding-top: 0; }
  .pt-xxl--1 { padding-top: var(--space_1); }
  .pt-xxl--2 { padding-top: var(--space_2); }
  .pt-xxl--3 { padding-top: var(--space_3); }
  .pt-xxl--4 { padding-top: var(--space_4); }
  .pt-xxl--5 { padding-top: var(--space_5); }
  .pt-xxl--6 { padding-top: var(--space_6); }
  .pt-xxl--7 { padding-top: var(--space_7); }
  .pt-xxl--8 { padding-top: var(--space_8); }
  .pt-xxl--12 { padding-top: var(--space_12); }
  .pt-xxl--16 { padding-top: var(--space_16); }
}

/**
* Padding bottom
*/
.pb--0 { padding-bottom: 0; }
.pb--1 { padding-bottom: var(--space_1); }
.pb--2 { padding-bottom: var(--space_2); }
.pb--3 { padding-bottom: var(--space_3); }
.pb--4 { padding-bottom: var(--space_4); }
.pb--5 { padding-bottom: var(--space_5); }
.pb--6 { padding-bottom: var(--space_6); }
.pb--7 { padding-bottom: var(--space_7); }
.pb--8 { padding-bottom: var(--space_8); }
.pb--12 { padding-bottom: var(--space_12); }
.pb--16 { padding-bottom: var(--space_16); }
@media (min-width: 576px) {
  .pb-sm--0 { padding-bottom: 0; }
  .pb-sm--1 { padding-bottom: var(--space_1); }
  .pb-sm--2 { padding-bottom: var(--space_2); }
  .pb-sm--3 { padding-bottom: var(--space_3); }
  .pb-sm--4 { padding-bottom: var(--space_4); }
  .pb-sm--5 { padding-bottom: var(--space_5); }
  .pb-sm--6 { padding-bottom: var(--space_6); }
  .pb-sm--7 { padding-bottom: var(--space_7); }
  .pb-sm--8 { padding-bottom: var(--space_8); }
  .pb-sm--12 { padding-bottom: var(--space_12); }
  .pb-sm--16 { padding-bottom: var(--space_16); }
}
@media (min-width: 768px) {
  .pb-md--0 { padding-bottom: 0; }
  .pb-md--1 { padding-bottom: var(--space_1); }
  .pb-md--2 { padding-bottom: var(--space_2); }
  .pb-md--3 { padding-bottom: var(--space_3); }
  .pb-md--4 { padding-bottom: var(--space_4); }
  .pb-md--5 { padding-bottom: var(--space_5); }
  .pb-md--6 { padding-bottom: var(--space_6); }
  .pb-md--7 { padding-bottom: var(--space_7); }
  .pb-md--8 { padding-bottom: var(--space_8); }
  .pb-md--12 { padding-bottom: var(--space_12); }
  .pb-md--16 { padding-bottom: var(--space_16); }
}
@media (min-width: 992px) {
  .pb-lg--0 { padding-bottom: 0; }
  .pb-lg--1 { padding-bottom: var(--space_1); }
  .pb-lg--2 { padding-bottom: var(--space_2); }
  .pb-lg--3 { padding-bottom: var(--space_3); }
  .pb-lg--4 { padding-bottom: var(--space_4); }
  .pb-lg--5 { padding-bottom: var(--space_5); }
  .pb-lg--6 { padding-bottom: var(--space_6); }
  .pb-lg--7 { padding-bottom: var(--space_7); }
  .pb-lg--8 { padding-bottom: var(--space_8); }
  .pb-lg--12 { padding-bottom: var(--space_12); }
  .pb-lg--16 { padding-bottom: var(--space_16); }
}
@media (min-width: 1200px) {
  .pb-xl--0 { padding-bottom: 0; }
  .pb-xl--1 { padding-bottom: var(--space_1); }
  .pb-xl--2 { padding-bottom: var(--space_2); }
  .pb-xl--3 { padding-bottom: var(--space_3); }
  .pb-xl--4 { padding-bottom: var(--space_4); }
  .pb-xl--5 { padding-bottom: var(--space_5); }
  .pb-xl--6 { padding-bottom: var(--space_6); }
  .pb-xl--7 { padding-bottom: var(--space_7); }
  .pb-xl--8 { padding-bottom: var(--space_8); }
  .pb-xl--12 { padding-bottom: var(--space_12); }
  .pb-xl--16 { padding-bottom: var(--space_16); }
}
@media (min-width: 1400px) {
  .pb-xxl--0 { padding-bottom: 0; }
  .pb-xxl--1 { padding-bottom: var(--space_1); }
  .pb-xxl--2 { padding-bottom: var(--space_2); }
  .pb-xxl--3 { padding-bottom: var(--space_3); }
  .pb-xxl--4 { padding-bottom: var(--space_4); }
  .pb-xxl--5 { padding-bottom: var(--space_5); }
  .pb-xxl--6 { padding-bottom: var(--space_6); }
  .pb-xxl--7 { padding-bottom: var(--space_7); }
  .pb-xxl--8 { padding-bottom: var(--space_8); }
  .pb-xxl--12 { padding-bottom: var(--space_12); }
  .pb-xxl--16 { padding-bottom: var(--space_16); }
}

/* Gap
========================================================================== */

.gap--0 { gap: 0; }
.gap--1 { gap: var(--space_1); }
.gap--2 { gap: var(--space_2); }
.gap--3 { gap: var(--space_3); }
.gap--4 { gap: var(--space_4); }
@media (min-width: 576px) {
  .gap-sm--0 { gap: 0; }
  .gap-sm--1 { gap: var(--space_1); }
  .gap-sm--2 { gap: var(--space_2); }
  .gap-sm--3 { gap: var(--space_3); }
  .gap-sm--4 { gap: var(--space_4); }
}
@media (min-width: 768px) {
  .gap-md--0 { gap: 0; }
  .gap-md--1 { gap: var(--space_1); }
  .gap-md--2 { gap: var(--space_2); }
  .gap-md--3 { gap: var(--space_3); }
  .gap-md--4 { gap: var(--space_4); }
}
@media (min-width: 992px) {
  .gap-lg--0 { gap: 0; }
  .gap-lg--1 { gap: var(--space_1); }
  .gap-lg--2 { gap: var(--space_2); }
  .gap-lg--3 { gap: var(--space_3); }
  .gap-lg--4 { gap: var(--space_4); }
}
@media (min-width: 1201px) {
  .gap-xl--0 { gap: 0; }
  .gap-xl--1 { gap: var(--space_1); }
  .gap-xl--2 { gap: var(--space_2); }
  .gap-xl--3 { gap: var(--space_3); }
  .gap-xl--4 { gap: var(--space_4); }
}
@media (min-width: 1401px) {
  .gap-xxl--0 { gap: 0; }
  .gap-xxl--1 { gap: var(--space_1); }
  .gap-xxl--2 { gap: var(--space_2); }
  .gap-xxl--3 { gap: var(--space_3); }
  .gap-xxl--4 { gap: var(--space_4); }
}

/**
* Gap horizontal
*/
.gap-x--0 { column-gap: 0; }
.gap-x--1 { column-gap: var(--space_1); }
.gap-x--2 { column-gap: var(--space_2); }
.gap-x--3 { column-gap: var(--space_3); }
.gap-x--4 { column-gap: var(--space_4); }
@media (min-width: 576px) {
  .gap-x-sm--0 { column-gap: 0; }
  .gap-x-sm--1 { column-gap: var(--space_1); }
  .gap-x-sm--2 { column-gap: var(--space_2); }
  .gap-x-sm--3 { column-gap: var(--space_3); }
  .gap-x-sm--4 { column-gap: var(--space_4); }
}
@media (min-width: 768px) {
  .gap-x-md--0 { column-gap: 0; }
  .gap-x-md--1 { column-gap: var(--space_1); }
  .gap-x-md--2 { column-gap: var(--space_2); }
  .gap-x-md--3 { column-gap: var(--space_3); }
  .gap-x-md--4 { column-gap: var(--space_4); }
}
@media (min-width: 992px) {
  .gap-x-lg--0 { column-gap: 0; }
  .gap-x-lg--1 { column-gap: var(--space_1); }
  .gap-x-lg--2 { column-gap: var(--space_2); }
  .gap-x-lg--3 { column-gap: var(--space_3); }
  .gap-x-lg--4 { column-gap: var(--space_4); }
}
@media (min-width: 1201px) {
  .gap-x-xl--0 { column-gap: 0; }
  .gap-x-xl--1 { column-gap: var(--space_1); }
  .gap-x-xl--2 { column-gap: var(--space_2); }
  .gap-x-xl--3 { column-gap: var(--space_3); }
  .gap-x-xl--4 { column-gap: var(--space_4); }
}
@media (min-width: 1401px) {
  .gap-x-xxl--0 { column-gap: 0; }
  .gap-x-xxl--1 { column-gap: var(--space_1); }
  .gap-x-xxl--2 { column-gap: var(--space_2); }
  .gap-x-xxl--3 { column-gap: var(--space_3); }
  .gap-x-xxl--4 { column-gap: var(--space_4); }
}

/**
* Gap vertical
*/
.gap-y--0 { row-gap: 0; }
.gap-y--1 { row-gap: var(--space_1); }
.gap-y--2 { row-gap: var(--space_2); }
.gap-y--3 { row-gap: var(--space_3); }
.gap-y--4 { row-gap: var(--space_4); }
@media (min-width: 576px) {
  .gap-y-sm--0 { row-gap: 0; }
  .gap-y-sm--1 { row-gap: var(--space_1); }
  .gap-y-sm--2 { row-gap: var(--space_2); }
  .gap-y-sm--3 { row-gap: var(--space_3); }
  .gap-y-sm--4 { row-gap: var(--space_4); }
}
@media (min-width: 768px) {
  .gap-y-md--0 { row-gap: 0; }
  .gap-y-md--1 { row-gap: var(--space_1); }
  .gap-y-md--2 { row-gap: var(--space_2); }
  .gap-y-md--3 { row-gap: var(--space_3); }
  .gap-y-md--4 { row-gap: var(--space_4); }
}
@media (min-width: 992px) {
  .gap-y-lg--0 { row-gap: 0; }
  .gap-y-lg--1 { row-gap: var(--space_1); }
  .gap-y-lg--2 { row-gap: var(--space_2); }
  .gap-y-lg--3 { row-gap: var(--space_3); }
  .gap-y-lg--4 { row-gap: var(--space_4); }
}
@media (min-width: 1201px) {
  .gap-y-xl--0 { row-gap: 0; }
  .gap-y-xl--1 { row-gap: var(--space_1); }
  .gap-y-xl--2 { row-gap: var(--space_2); }
  .gap-y-xl--3 { row-gap: var(--space_3); }
  .gap-y-xl--4 { row-gap: var(--space_4); }
}
@media (min-width: 1401px) {
  .gap-y-xxl--0 { row-gap: 0; }
  .gap-y-xxl--1 { row-gap: var(--space_1); }
  .gap-y-xxl--2 { row-gap: var(--space_2); }
  .gap-y-xxl--3 { row-gap: var(--space_3); }
  .gap-y-xxl--4 { row-gap: var(--space_4); }
}

/* ==========================================================================
Position
========================================================================== */

.pos--absolute { position: absolute; }
.pos--fixed { position: fixed; }
.pos--relative { position: relative; }
.pos--static { position: static; }
.pos--sticky { 
  position: -webkit-sticky; 
  position: sticky; 
}
@media (min-width: 576px) {
  .pos-sm--absolute { position: absolute; }
  .pos-sm--fixed { position: fixed; }
  .pos-sm--relative { position: relative; }
  .pos-sm--static { position: static; }
  .pos-sm--sticky { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}
@media (min-width: 768px) {
  .pos-md--absolute { position: absolute; }
  .pos-md--fixed { position: fixed; }
  .pos-md--relative { position: relative; }
  .pos-md--static { position: static; }
  .pos-md--sticky { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}
@media (min-width: 992px) {
  .pos-lg--absolute { position: absolute; }
  .pos-lg--fixed { position: fixed; }
  .pos-lg--relative { position: relative; }
  .pos-lg--static { position: static; }
  .pos-lg--sticky { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}
@media (min-width: 1200px) {
  .pos-xl--absolute { position: absolute; }
  .pos-xl--fixed { position: fixed; }
  .pos-xl--relative { position: relative; }
  .pos-xl--static { position: static; }
  .pos-xl--sticky { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}
@media (min-width: 1400px) {
  .pos-xxl--absolute { position: absolute; }
  .pos-xxl--fixed { position: fixed; }
  .pos-xxl--relative { position: relative; }
  .pos-xxl--static { position: static; }
  .pos-xxl--sticky { 
    position: -webkit-sticky; 
    position: sticky; 
  }
}

/* ==========================================================================
Z-Index
========================================================================== */

.z--n1 { z-index: -1; }
.z--0 { z-index: 0; }
.z--1 { z-index: 1; }
.z--2 { z-index: 2; }
.z--3 { z-index: 3; }

@media (min-width: 576px) {
  .z-sm--n1 { z-index: -1; }
  .z-sm--0 { z-index: 0; }
  .z-sm--1 { z-index: 1; }
  .z-sm--2 { z-index: 2; }
  .z-sm--3 { z-index: 3; }
}

@media (min-width: 768px) {
  .z-md--n1 { z-index: -1; }
  .z-md--0 { z-index: 0; }
  .z-md--1 { z-index: 1; }
  .z-md--2 { z-index: 2; }
  .z-md--3 { z-index: 3; }
}

@media (min-width: 992px) {
  .z-lg--n1 { z-index: -1; }
  .z-lg--0 { z-index: 0; }
  .z-lg--1 { z-index: 1; }
  .z-lg--2 { z-index: 2; }
  .z-lg--3 { z-index: 3; }
}

@media (min-width: 1200px) {
  .z-xl--n1 { z-index: -1; }
  .z-xl--0 { z-index: 0; }
  .z-xl--1 { z-index: 1; }
  .z-xl--2 { z-index: 2; }
  .z-xl--3 { z-index: 3; }
}

@media (min-width: 1400px) {
  .z-xxl--n1 { z-index: -1; }
  .z-xxl--0 { z-index: 0; }
  .z-xxl--1 { z-index: 1; }
  .z-xxl--2 { z-index: 2; }
  .z-xxl--3 { z-index: 3; }
}

/* ==========================================================================
Effects
========================================================================== */

/* Zoom effects
========================================================================== */

.effect--zoom img { transition: transform .15s ease-in; }
@media (min-width: 768px) {
  .effect--zoom:hover img { transform: scale(1.1); }
}

/* Color effects
========================================================================== */

.effect--color-white,
.effect--color-sand,
.effect--color-fog,
.effect--color-stone,
.effect--color-charcoal,
.effect--color-navy,
.effect--color-black {
  transition: color .15s ease-in;
}
.effect--color-white:hover,
.effect--color-white:active,
.effect--color-white:focus { color: var(--white); }
.effect--color-sand:hover,
.effect--color-sand:active,
.effect--color-sand:focus { color: var(--sand); }
.effect--color-fog:hover,
.effect--color-fog:active,
.effect--color-fog:focus { color: var(--fog); }
.effect--color-stone:hover,
.effect--color-stone:active,
.effect--color-stone:focus { color: var(--stone); }
.effect--color-charcoal:hover,
.effect--color-charcoal:active,
.effect--color-charcoal:focus { color: var(--charcoal); }
.effect--color-navy:hover,
.effect--color-navy:active,
.effect--color-navy:focus { color: var(--navy); }
.effect--color-black:hover,
.effect--color-black:active,
.effect--color-black:focus { color: var(--black); }

/* ==========================================================================
Rounded corners
========================================================================== */

.border--rounded { 
  border-radius: var(--space_1); 
  overflow: hidden;
}
@media (min-width: 576px) {
  .border-sm--rounded { 
    border-radius: var(--space_1); 
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .border-md--rounded { 
    border-radius: var(--space_1); 
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .border-lg--rounded { 
    border-radius: var(--space_1); 
    overflow: hidden;
  }
}
@media (min-width: 1200px) {
  .border-xl--rounded { 
    border-radius: var(--space_1); 
    overflow: hidden;
  }
}
@media (min-width: 1400px) {
  .border-xxl--rounded { 
    border-radius: var(--space_1); 
    overflow: hidden;
  }
}

/* ==========================================================================
Legacy code
========================================================================== */

/**
* Below styles are legacy code. 
* Remove these as content is migrated 
* off actively utilizing them.
* -- AJM 2023-12-14
*/

/* CLS Figure Ratios (Old)
========================================================================== */

figure {
  display: block;
  position: relative;
}
figure img,
figure video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
}
.img-wrap {
  display: block;
  margin: 0 auto;
}

/* Typography
========================================================================== */

.black-it { color: black !important; }
.white-it { color: white !important; }
.txt-shadow { text-shadow: 0 0 6px rgba(0, 0, 0, 0.9); }
.txt-uppercase { text-transform: uppercase !important; }
.txt-inherit { text-transform: inherit !important; }
.txt-lowercase { text-transform: lowercase !important; }
.txt-left { text-align: left !important; }
.txt-center { text-align: center !important; }
.txt-right { text-align: right !important; }
.txt-red { color: #c00 !important; }
h1.lg-title {
  font-size: 4.5rem !important;
  line-height: 45px !important;
  z-index: 10;
  font-weight: bold;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
  text-transform: uppercase;
}
h1.sm-title {
  font-size: 1.6rem !important;
  letter-spacing: 0.1rem;
  font-weight: normal;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
  color: #000;
}
h2.lg-title {
  font-size: 3rem !important;
  z-index: 10;
  font-weight: bold;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
}
h2.sm-title {
  font-size: 2.6rem !important;
  letter-spacing: 0.05rem;
  font-weight: bold;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
  color: #000;
}
h3.lg-title {
  font-size: 2.8rem !important;
  z-index: 10;
  font-weight: bold;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
}
h3.sm-title {
  font-size: 1.8rem !important;
  letter-spacing: 0.05rem;
  font-weight: normal;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
}
h4.lg-title {
  font-size: 2.4rem !important;
  z-index: 10;
  font-weight: bold;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
}
h4.sm-title {
  font-size: 1.4rem !important;
  letter-spacing: 0.05rem;
  font-weight: normal;
  font-family: "lato", sans-serif;
  padding: 5px 0 5px;
  margin: auto;
}

@media (max-width: 991px) {
  h1.lg-title { font-size: 2.8rem !important; }
  h1.sm-title { font-size: 1.8rem !important; }
  h2.lg-title { font-size: 2.6rem !important; }
  h2.sm-title { font-size: 1.6rem !important; }
  h3.lg-title { font-size: 2.4rem !important; }
  h3.sm-title { font-size: 1.4rem !important; }
  h4.lg-title { font-size: 2rem !important; }
  h4.sm-title { font-size: 1.2rem !important; }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  h1.lg-title { font-size: 2.4rem !important; }
  h1.sm-title { font-size: 1.8rem !important; margin: 0 0 20px !important; }
  h2.lg-title { font-size: 2.2rem !important; }
  h2.sm-title { font-size: 1.6rem !important; }
  h3 { font-size: 1.8rem; }
  h3.lg-title { font-size: 2rem !important; }
  h3.sm-title { font-size: 1.4rem !important; }
  h4.lg-title { font-size: 1.8rem !important; }
  h4.sm-title { font-size: 1.2rem !important; }
}

/* Links
========================================================================== */

.row.no-margin {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.no-pad { padding: 0px !important; }
.full-width { width: 100% !important; }
.auto-width { width: auto !important; }

@media screen and (min-width: 1px) and (max-width: 767px) {
  .auto-width { width: 100% !important; }
}

.row-eq-height-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -moz-box-align: center;
}
.row-eq-height-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: flex-start;
}
.row-eq-height-bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-content: flex-end;
  align-content: flex-end;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: flex-end;
}

/* Absolute positioning
========================================================================== */

.top-left-all,
.top-center-all,
.top-right-all,
.left-all,
.center-all,
.center-all-m,
.center-all-bg,
.right-all,
.bottom-left-all,
.bottom-center-all,
.bottom-right-all {
  position: absolute;
  width: 100%;
  padding: 10px;
  left: 0px;
  right: 0px;
}
/** 
* horizontally left positioned 
*/
.top-left-all,
.left-all,
.bottom-left-all {
  right: auto;
  text-align: left;
}
/** 
* horizontally center positioned 
*/
.top-center-all,
.center-all,
.center-all-m,
.center-all-bg,
.bottom-center-all {
  text-align: center;
}
/**
* horizontally right positioned 
*/
.top-right-all,
.right-all,
.bottom-right-all {
  left: auto;
  text-align: right;
}
/**
* vertically top positioned 
*/
.top-left-all,
.top-center-all,
.top-right-all {
  top: 0;
  bottom: auto;
}
/**
* vertically center positioned 
*/
.left-all,
.center-all,
.center-all-m,
.center-all-bg,
.right-all {
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/**
* vertically bottom positioned 
*/
.bottom-left-all,
.bottom-center-all,
.bottom-right-all {
  top: auto;
  bottom: 0;
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  .center-all {
    padding: 10px 0;
    position: relative;
    text-align: center;
    top: 0;
    transform: translateY(0%);
    width: 100%;
  }
}

/* Links
========================================================================== */

button.lt:hover,
button.dk:hover,
a.le-btn:hover {
  text-decoration: none !important;
}
button.lt,
button.dk {
  border-radius: 0px;
}

@media (max-width: 991px) {
  button.dk,
  button.lt { font-size: 1.1rem !important; }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
  button.dk,
  button.lt {
    font-size: 1rem !important;
  }
}
button.lt {
  background-color: rgba(255, 255, 255, 1);
  color: black;
  font-family: "lato", sans-serif;
  font-size: 1.3rem !important;
  margin: 5px 0 5px;
  padding: 10px 15px;
  /*	line-height: 40px;*/
  border: none;
  text-transform: uppercase;
}
button.dk {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  font-family: "lato", sans-serif;
  font-size: 1.4rem !important;
  margin: 5px 0 5px;
  padding: 10px 15px;
  /*	line-height: 40px;*/
  border: none;
  text-transform: uppercase;
}