.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-1,
.opacity-100 {
  opacity: 1;
}

.shadow {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.blur {
  backdrop-filter: 0.5rem;
}

.text {
  font-family: var(--font-family);
}

/*
.text--400 {
	font-weight: var(--text--400) !important;
}

.text--500 {
	font-weight: var(--text--500) !important;
}

.text--600 {
	font-weight: var(--text--600) !important;
}

.text--700 {
	font-weight: var(--text--700) !important;
}
.text--xs {
	font-size: var(--text--xs) !important;
}

.text--s {
	font-size: var(--text--s) !important;
}

.text--m {
	font-size: var(--text--m) !important;
}

.text--l {
	font-size: var(--text--l) !important;
}

.text--xl {
	font-size: var(--text--xl) !important;
}

.text--xxl {
	font-size: var(--text--xxl) !important;
}

.text--xxxl {
	font-size: var(--text--xxxl) !important;
}

.text--hero {
	font-size: var(--text--hero) !important;
}

.lh--s {
	line-height: var(--lh--s) !important;
}

.lh--m {
	line-height: var(--lh--m) !important;
}

.lh--l {
	line-height: var(--lh--l) !important;
}

.text--left {
	text-align: left !important;
}

.text--center {
	text-align: center !important;
}

.text--right {
	text-align: right !important;
}

.color--black {
	color: var(--color-black) !important;
}

.color--white {
	color: var(--color-white) !important;
}

.color--gray {
	color: var(--color-gray) !important;
}

.color--jamm {
	color: var(--jamm-color) !important;
}

.color--school {
	color: var(--school-color) !important;
}

.color--education {
	color: var(--education-color) !important;
}

.color--camp {
	color: var(--camp-color) !important;
}

.color--career {
	color: var(--career-color) !important;
}

.bg--white {
	background: var(--color-white) !important;
}

.bg--white-dark {
	background: var(--color-white-dark) !important;
}

.bg--jamm {
	background: var(--jamm-bg) !important;
}

.bg--school {
	background: var(--school-bg) !important;
}

.bg--education {
	background: var(--education-bg) !important;
}

.bg--camp {
	background: var(--camp-bg) !important;
}

.bg--career {
	background: var(--career-bg) !important;
}

.text--balance {
	text-wrap: balance;
}

.text--pretty {
	text-wrap: pretty;
}
*/
/* =========================================================
   JAMM Responsive Utility System
========================================================= */
/* =========================================================
   Breakpoints
========================================================= */
/* =========================================================
   Text Align
========================================================= */
/* =========================================================
   Responsive Prefixes
========================================================= */
/* =========================================================
   Generate Text Align Utilities
========================================================= */
.text--left,
.d-text--left {
  text-align: left !important;
}

.text--center,
.d-text--center {
  text-align: center !important;
}

.text--right,
.d-text--right {
  text-align: right !important;
}

.text--justify,
.d-text--justify {
  text-align: justify !important;
}

@media (max-width: 1024px) {
  .t-text--left {
    text-align: left !important;
  }
}
@media (max-width: 1024px) {
  .t-text--center {
    text-align: center !important;
  }
}
@media (max-width: 1024px) {
  .t-text--right {
    text-align: right !important;
  }
}
@media (max-width: 1024px) {
  .t-text--justify {
    text-align: justify !important;
  }
}
@media (max-width: 767px) {
  .m-text--left {
    text-align: left !important;
  }
}
@media (max-width: 767px) {
  .m-text--center {
    text-align: center !important;
  }
}
@media (max-width: 767px) {
  .m-text--right {
    text-align: right !important;
  }
}
@media (max-width: 767px) {
  .m-text--justify {
    text-align: justify !important;
  }
}
/* =========================================================
   Typography Sizes
========================================================= */
/* =========================================================
   Generate Responsive Font Sizes
========================================================= */
.text--xs,
.d-text--xs {
  font-size: var(--text--xs) !important;
}

.text--s,
.d-text--s {
  font-size: var(--text--s) !important;
}

.text--m,
.d-text--m {
  font-size: var(--text--m) !important;
}

.text--l,
.d-text--l {
  font-size: var(--text--l) !important;
}

.text--xl,
.d-text--xl {
  font-size: var(--text--xl) !important;
}

.text--xxl,
.d-text--xxl {
  font-size: var(--text--xxl) !important;
}

.text--xxxl,
.d-text--xxxl {
  font-size: var(--text--xxxl) !important;
}

.text--hero,
.d-text--hero {
  font-size: var(--text--hero) !important;
}

@media (max-width: 1024px) {
  .t-text--xs {
    font-size: var(--text--xs) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--s {
    font-size: var(--text--s) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--m {
    font-size: var(--text--m) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--l {
    font-size: var(--text--l) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--xl {
    font-size: var(--text--xl) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--xxl {
    font-size: var(--text--xxl) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--xxxl {
    font-size: var(--text--xxxl) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--hero {
    font-size: var(--text--hero) !important;
  }
}
@media (max-width: 767px) {
  .m-text--xs {
    font-size: var(--text--xs) !important;
  }
}
@media (max-width: 767px) {
  .m-text--s {
    font-size: var(--text--s) !important;
  }
}
@media (max-width: 767px) {
  .m-text--m {
    font-size: var(--text--m) !important;
  }
}
@media (max-width: 767px) {
  .m-text--l {
    font-size: var(--text--l) !important;
  }
}
@media (max-width: 767px) {
  .m-text--xl {
    font-size: var(--text--xl) !important;
  }
}
@media (max-width: 767px) {
  .m-text--xxl {
    font-size: var(--text--xxl) !important;
  }
}
@media (max-width: 767px) {
  .m-text--xxxl {
    font-size: var(--text--xxxl) !important;
  }
}
@media (max-width: 767px) {
  .m-text--hero {
    font-size: var(--text--hero) !important;
  }
}
/* =========================================================
   Font Weights
========================================================= */
/* =========================================================
   Generate Responsive Font Weights
========================================================= */
.text--400,
.d-text--400 {
  font-weight: var(--text--400) !important;
}

.text--500,
.d-text--500 {
  font-weight: var(--text--500) !important;
}

.text--600,
.d-text--600 {
  font-weight: var(--text--600) !important;
}

.text--700,
.d-text--700 {
  font-weight: var(--text--700) !important;
}

@media (max-width: 1024px) {
  .t-text--400 {
    font-weight: var(--text--400) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--500 {
    font-weight: var(--text--500) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--600 {
    font-weight: var(--text--600) !important;
  }
}
@media (max-width: 1024px) {
  .t-text--700 {
    font-weight: var(--text--700) !important;
  }
}
@media (max-width: 767px) {
  .m-text--400 {
    font-weight: var(--text--400) !important;
  }
}
@media (max-width: 767px) {
  .m-text--500 {
    font-weight: var(--text--500) !important;
  }
}
@media (max-width: 767px) {
  .m-text--600 {
    font-weight: var(--text--600) !important;
  }
}
@media (max-width: 767px) {
  .m-text--700 {
    font-weight: var(--text--700) !important;
  }
}
/* =========================================================
   Line Heights
========================================================= */
/* =========================================================
   Generate Responsive Line Heights
========================================================= */
.lh--s,
.d-lh--s {
  line-height: var(--lh--s) !important;
}

.lh--m,
.d-lh--m {
  line-height: var(--lh--m) !important;
}

.lh--l,
.d-lh--l {
  line-height: var(--lh--l) !important;
}

@media (max-width: 1024px) {
  .t-lh--s {
    line-height: var(--lh--s) !important;
  }
}
@media (max-width: 1024px) {
  .t-lh--m {
    line-height: var(--lh--m) !important;
  }
}
@media (max-width: 1024px) {
  .t-lh--l {
    line-height: var(--lh--l) !important;
  }
}
@media (max-width: 767px) {
  .m-lh--s {
    line-height: var(--lh--s) !important;
  }
}
@media (max-width: 767px) {
  .m-lh--m {
    line-height: var(--lh--m) !important;
  }
}
@media (max-width: 767px) {
  .m-lh--l {
    line-height: var(--lh--l) !important;
  }
}
/* =========================================================
   Colors
========================================================= */
/* =========================================================
   Generate Text Colors
========================================================= */
.color--black {
  color: var(--color-black) !important;
}

.color--white {
  color: var(--color-white) !important;
}

.color--gray {
  color: var(--color-gray) !important;
}

.color--jamm {
  color: var(--jamm-color) !important;
}

.color--school {
  color: var(--school-color) !important;
}

.color--education {
  color: var(--education-color) !important;
}

.color--camp {
  color: var(--camp-color) !important;
}

.color--career {
  color: var(--career-color) !important;
}

.color--jamm-bg {
  color: var(--jamm-bg) !important;
}

.color--school-bg {
  color: var(--school-bg) !important;
}

.color--education-bg {
  color: var(--education-bg) !important;
}

.color--camp-bg {
  color: var(--camp-bg) !important;
}

.color--career-bg {
  color: var(--career-bg) !important;
}

/* =========================================================
   Background Colors
========================================================= */
/* =========================================================
   Generate Background Colors
========================================================= */
.bg--white {
  background: var(--color-white) !important;
}

.bg--white-dark {
  background: var(--color-white-dark) !important;
}

.bg--jamm {
  background: var(--jamm-bg) !important;
}

.bg--school {
  background: var(--school-bg) !important;
}

.bg--education {
  background: var(--education-bg) !important;
}

.bg--camp {
  background: var(--camp-bg) !important;
}

.bg--career {
  background: var(--career-bg) !important;
}

/* =========================================================
   Text Wrap
========================================================= */
.text--balance {
  text-wrap: balance;
}

.text--pretty {
  text-wrap: pretty;
}

/* =========================================================
   Text Transform
========================================================= */
/* =========================================================
   Generate Responsive Text Transform Utilities
========================================================= */
.text--uppercase,
.d-text--uppercase {
  text-transform: uppercase !important;
}

.text--lowercase,
.d-text--lowercase {
  text-transform: lowercase !important;
}

.text--capitalize,
.d-text--capitalize {
  text-transform: capitalize !important;
}

@media (max-width: 1024px) {
  .t-text--uppercase {
    text-transform: uppercase !important;
  }
}
@media (max-width: 1024px) {
  .t-text--lowercase {
    text-transform: lowercase !important;
  }
}
@media (max-width: 1024px) {
  .t-text--capitalize {
    text-transform: capitalize !important;
  }
}
@media (max-width: 767px) {
  .m-text--uppercase {
    text-transform: uppercase !important;
  }
}
@media (max-width: 767px) {
  .m-text--lowercase {
    text-transform: lowercase !important;
  }
}
@media (max-width: 767px) {
  .m-text--capitalize {
    text-transform: capitalize !important;
  }
}