h1 {
  font-size: var(--text-xxl);
  line-height: 1.2;
}
h2 {
  font-size: var(--text-xl);
   line-height: 1.2;
}
h3 {
  font-size: var(--text-l);
}
h4 {
  font-size: var(--text-m);
}

.text--s {
	font-size:  var(--text-s);
}
.text--m {
	font-size: var(--text-m);
}
.text--l {
	font-size: var(--text-l);
}
.text--xl {
	font-size: var(--text-xl);
}
.text--xxl {
	font-size: var(--text-xxl);
  font-weight:800;
}
.text--hero {font-size: 4rem; font-weight:800;}

.text--light {
  color: var(--light);
}
.text--dark {
  color: var(--dark);
}
.font--thin {font-weight: 300; }
.font--thick {font-weight: 700;}
.text--primary {color:var(--primary);}
.text--secondary {color:var(--secondary);}
.text--accent {color:var(--accent);}
.text-link--white a {color: var(--light) !important;}
.text-link--dark a {color: var(--dark);}
.link--accent-ultra-light {
  color: var(--accent-ultra-light);
}
.text-stroke-dark { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--dark);}
.text-stroke-light { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--light);}
.text-stroke-secondary { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--secondary);}
.text-link--primary a {color: var(--primary);}
.text-link--primary {color: var(--primary);}
.text-link--secondary a {color: var(--secondary);}
.text-link--secondary {color: var(--secondary) !important;}
.text-uppercase { text-transform:uppercase;}
.gap-xs {gap: var(--space-xs);}
.callout-text {font-size:var(--text-m); font-weight:700;}
.text--primary {color: var(--primary); }
.text--secondary {color: var(--secondary); }
.text--accent {color: var(--accent); }
.link--white a {color: #fff !important; }
.link--white {color: #fff !important; }
/* BUTTON */
.btn--primary {background-color: var(--primary); }
.btn--secondary {background-color: var(--secondary); }
.btn--accent {background-color: var(--accent); }
.center-content {margin-left:auto; margin-right:auto;}
.text-align {text-align:center;}
.set-width {width:1400px !important; max-width:100%;}
.set-width-1600 {width:1600px !important; max-width:100%;}
.set-height-600 {height:600px;}
.set-height-500 {height:500px;}
.set-height-400 {height:400px;}
.width--50 {width:50%;}
.width--80 {width:80%;}
.width--100 {width:100%;}
.background-primary {background-color: var(--primary); }
.background-secondary {background-color: var(--secondary); }
.background-accent {background-color: var(--accent); }
.background-contrast {background-color: var(--contrast); }
.background-white {background-color: var(--light); }
.margin-top--xs {margin-top:var(--space-xs); }
.margin-top--s {margin-top:var(--space-s); }
.margin-top--m {margin-top:var(--space-m); }
.margin-top--l {margin-top:var(--space-l); }
.margin-top--xl {margin-top:var(--space-xl); }
.margin-bottom--s {margin-bottom:var(--space-s); }
.margin-bottom--m {margin-bottom:var(--space-m); }
.margin-bottom--l {margin-bottom:var(--space-l); }

.margin-middle--auto {margin-top:auto; margin-bottom:auto;}
.margin-center--auto {margin-left:auto; margin-right:auto;}
.gap--xs { gap:var(--space-xs);}
.pad--xs { padding:var(--space-xs);}
.pad--s { padding:var(--space-s);}
.pad--m { padding:var(--space-m);}
.pad--l { padding:var(--space-l);}
.pad--xl { padding:var(--space-xl);}
.pad--top-m {padding-top:var(--space-m);}
.pad--bottom-m {padding-bottom:var(--space-m);}
.pad--top-xs {padding-top:var(--space-xs);}
.pad--bottom-xs {padding-bottom:var(--space-xs);}
.padding-top-bottom {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.display-flex {display:flex;}
.display-block {display:block;}
.display-grid {display:grid;}
.display-inline {display:inline;}
.grid-3 {  display: grid;
 grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
.grid-4-mobile-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-4-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .grid-4-2 {
   grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
  }
}
/* STICKY STUFF*/
.sticky {
  position: sticky;
	top:0;
}
.sticky-top--l {
  top: 10%;
}

/* BORDERS */
.border-top-light { border-top: 1px solid var(--shade-ultra-light); } 
.border-bottom-light {border-bottom: 1px solid var(--shade-ultra-light); }
.border-primary {border:2px solid var(--primary);}
.border-secondary {border:2px solid var(--secondary);}
.border-light {border:2px solid var(--light);}
.border-secondary-top {border-top:2px solid var(--secondary);}
.border-dashed-light {border: 4px dashed var(--light);}
.circle {border-radius:200px;}