/*====================================================================================
START TABLE OF CONTENT

1. START BASE MARGIN, PADDING.
2. START BASE CLEAR FLOAT.
3. START BASE LAYOUT.
4. START BASE TEXT.
5. START BASE HIDING CLASSES.
6. START BASE COLOR.
7. START BASE BACKGROUND COLOR.
8. START BASE LINK.
9. START LIST.

/*====================================================================================
1. START BASE MARGIN, PADDING.
====================================================================================*/
/* ---------- START MARGIN RIGHT ----------*/
@media only screen and (min-width: 768px) {
  .u-mr-pc03 {
    margin-right: -3rem !important;
  }
}
/* ---------- START MARGIN BOTTOM ----------*/
.u-mb05 {
  margin-bottom: 0.5rem !important;
}

.u-mb15 {
  margin-bottom: 1.5rem !important;
}

/*====================================================================================
2. START BASE CLEAR FLOAT.
====================================================================================*/
/* ---------- START FLOAT ----------*/
.u-pull-left {
  float: left !important;
}

.u-pull-right {
  float: right !important;
}

/*====================================================================================
3. START BASE LAYOUT.
====================================================================================*/
/* ---------- START MARGIN TOP SECTION ----------*/
.u-mt-section-primary {
  margin-top: var(--spacing-sp50-pc100) !important;
}

.u-mt-section-secondary {
  margin-top: var(--spacing-sp45-pc90) !important;
}

.u-mt-section-tertiary {
  margin-top: var(--spacing-sp00-pc60) !important;
}

.u-mt-section-quaternary {
  margin-top: var(--spacing-sp40-pc80) !important;
}

.u-mt-section-quinary {
  margin-top: var(--spacing-sp35-pc70) !important;
}

.u-mt-section-senary {
  margin-top: var(--spacing-sp30-pc60) !important;
}

/* ---------- START MARGIN BOTTOM SECTION ----------*/
.u-mb-section-primary {
  margin-bottom: var(--spacing-sp50-pc100) !important;
}

.u-mb-section-secondary {
  margin-bottom: var(--spacing-sp45-pc90) !important;
}

.u-mb-section-quaternary {
  margin-bottom: var(--spacing-sp40-pc80) !important;
}

.u-mb-section-quinary {
  margin-bottom: var(--spacing-sp35-pc70) !important;
}

.u-mb-section-senary {
  margin-bottom: var(--spacing-sp30-pc60) !important;
}

/* ---------- START PADDING SECTION ----------*/
.u-p-section-primary {
  padding: var(--spacing-sp50-pc100) 0 !important;
}

.u-p-section-secondary {
  padding: var(--spacing-sp45-pc90) 0 var(--spacing-sp50-pc100) 0 !important;
}

.u-p-section-tertiary {
  padding: var(--spacing-sp00-pc60) 0 var(--spacing-sp50-pc100) 0 !important;
}

.u-p-section-quaternary {
  padding: var(--spacing-sp40-pc80) 0 !important;
}

.u-p-section-quinary {
  padding: var(--spacing-sp35-pc70) 0 !important;
}

.u-p-section-senary {
  padding: var(--spacing-sp30-pc60) 0 !important;
}

/* ---------- START PADDING TOP SECTION ----------*/
.u-pt-section-primary {
  padding-top: var(--spacing-sp50-pc100) !important;
}

.u-pt-section-secondary {
  padding-top: var(--spacing-sp45-pc90) !important;
}

.u-pt-section-tertiary {
  padding-top: var(--spacing-sp00-pc60) !important;
}

.u-pt-section-quaternary {
  padding-top: var(--spacing-sp40-pc80) !important;
}

.u-pt-section-quinary {
  padding-top: var(--spacing-sp35-pc70) !important;
}

.u-pt-section-senary {
  padding-top: var(--spacing-sp30-pc60) !important;
}

/* ---------- START PADDING BOTTOM SECTION ----------*/
.u-pb-section-primary {
  padding-bottom: var(--spacing-sp50-pc100) !important;
}

.u-pb-section-secondary {
  padding-bottom: var(--spacing-sp45-pc90) !important;
}

.u-pb-section-quaternary {
  padding-bottom: var(--spacing-sp40-pc80) !important;
}

.u-pb-section-quinary {
  padding-bottom: var(--spacing-sp35-pc70) !important;
}

.u-pb-section-senary {
  padding-bottom: var(--spacing-sp30-pc60) !important;
}

/*====================================================================================
4. START BASE TEXT.
====================================================================================*/
/* ---------- START FONT FAMILY ---------- */
.u-jost {
  font-family: "Jost", serif !important;
}

/* ---------- START FONT STYLES ---------- */
.u-font-italic {
  font-style: italic !important;
}

/* ---------- START FONT WEIGHT ---------- */
.u-font-normal {
  font-weight: normal !important;
}

.u-font-500 {
  font-weight: 500 !important;
}

.u-font-bold {
  font-weight: bold !important;
}

/* ---------- START TEXT TRANSFORM ---------- */
.u-text-underline {
  text-decoration: underline !important;
}

.u-text-none-underline {
  text-decoration: none !important;
}

/* ---------- START TEXT ALIGN ---------- */
.u-text-center {
  text-align: center !important;
}

/*====================================================================================
5. START BASE HIDING CLASSES.
====================================================================================*/
@media only screen and (min-width: 768px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
.u-hide {
  display: none !important;
}

@media only screen and (max-width: 1199px) {
  .u-hide-max-w1199 {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  .u-hide-max-w767 {
    display: none !important;
  }
}
@media only screen and (max-width: 575px) {
  .u-hide-max-w575 {
    display: none !important;
  }
}
@media only screen and (max-width: 420px) {
  .u-hide-max-w420 {
    display: none !important;
  }
}
@media only screen and (max-width: 380px) {
  .u-hide-max-w380 {
    display: none !important;
  }
}
@media only screen and (min-width: 1200px) {
  .u-hide-min-w1200 {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-hide-min-w768 {
    display: none !important;
  }
}
@media only screen and (min-width: 576px) {
  .u-hide-min-w576 {
    display: none !important;
  }
}
@media only screen and (min-width: 421px) {
  .u-hide-min-w421 {
    display: none !important;
  }
}
@media only screen and (min-width: 381px) {
  .u-hide-min-w381 {
    display: none !important;
  }
}
/*====================================================================================
6. START BASE COLOR.
====================================================================================*/
.u-c-blue-300 {
  color: var(--color-blue-300) !important;
}

.u-c-primary {
  color: var(--color-neutral-1000) !important;
}

.u-c-secondary {
  color: var(--color-neutral-100) !important;
}

.u-c-tertiary {
  color: var(--color-neutral-900) !important;
}

.u-c-quaternary {
  color: var(--color-green-600) !important;
}

.u-c-quinary {
  color: var(--color-brown-500) !important;
}

.u-c-senary {
  color: var(--color-blue-700) !important;
}

.u-c-septenary {
  color: var(--color-neutral-200) !important;
}

.u-c-octonary {
  color: var(--color-green-500) !important;
}

.u-c-nonary {
  color: var(--color-neutral-300) !important;
}

.u-c-denary {
  color: var(--color-neutral-150) !important;
}

.u-c-undenary {
  color: var(--color-neutral-305) !important;
}

.u-c-dodenary {
  color: var(--color-red-600) !important;
}

.u-c-tridenary {
  color: var(--color-neutral-800) !important;
}

.u-c-quattuordenary {
  color: var(--color-neutral-950) !important;
}

/*====================================================================================
7. START BASE BACKGROUND COLOR.
====================================================================================*/
.u-bg-primary {
  background-color: var(--color-neutral-1000) !important;
}

.u-bg-secondary {
  background-color: var(--color-neutral-100) !important;
}

.u-bg-tertiary {
  background-color: var(--color-neutral-900) !important;
}

.u-bg-quaternary {
  background-color: var(--color-green-600) !important;
}

.u-bg-quinary {
  background-color: var(--color-brown-500) !important;
}

.u-bg-senary {
  background-color: var(--color-blue-700) !important;
}

.u-bg-septenary {
  background-color: var(--color-neutral-200) !important;
}

.u-bg-octonary {
  background-color: var(--color-green-500) !important;
}

.u-bg-nonary {
  background-color: var(--color-neutral-300) !important;
}

.u-bg-denary {
  background-color: var(--color-neutral-150) !important;
}

.u-bg-undenary {
  background-color: var(--color-neutral-305) !important;
}

.u-bg-dodenary {
  background-color: var(--color-red-600) !important;
}

.u-bg-tridenary {
  background-color: var(--color-neutral-800) !important;
}

.u-bg-quattuordenary {
  background-color: var(--color-neutral-950) !important;
}

/*====================================================================================
8. START BASE LINK.
====================================================================================*/
/* ---------- LINK DECORATION ---------- */
@media only screen and (max-width: 767px) {
  .u-link-line {
    text-decoration: underline !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-link-line {
    text-decoration: none !important;
  }
}
/*====================================================================================
9. START LIST.
====================================================================================*/
/*---------- START PROJECT LIST ----------*/
.u-list-mt-none > *:first-child {
  margin-top: 0 !important;
}