/*====================================================================================
1. MARGIN, PADDING.
====================================================================================*/
/* ---------- MARGIN TOP ----------*/
.u-mt0 {
  margin-block-start: 0 !important;
}

.u-mt10 {
  margin-block-start: 0.5rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mt10 {
    margin-block-start: 1rem !important;
  }
}

.u-mt20 {
  margin-block-start: 1rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mt20 {
    margin-block-start: 2rem !important;
  }
}

.u-mt50 {
  margin-block-start: 5rem !important;
}

.u-mt70 {
  margin-block-start: 3.5rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mt70 {
    margin-block-start: 7rem !important;
  }
}

.u-mt100 {
  margin-block-start: 5rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mt100 {
    margin-block-start: 10rem !important;
  }
}

/* ---------- MARGIN BOTTOM ----------*/
.u-mb0 {
  margin-block-end: 0 !important;
}

.u-mb05 {
  margin-block-end: 0.5rem !important;
}

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

.u-mb20 {
  margin-block-end: 1rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mb20 {
    margin-block-end: 2rem !important;
  }
}

.u-mb60 {
  margin-block-end: 3rem !important;
}
@media only screen and (min-width: 768px) {
  .u-mb60 {
    margin-block-end: 6rem !important;
  }
}

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

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

/*====================================================================================
3. LAYOUT.
====================================================================================*/
/* ---------- FLEX CENTER ---------- */
.u-flex-center {
  display: flex;
  flex-flow: column;
  align-items: center;
}

/* ---------- WIDTH CONTENT ---------- */
.u-width-full {
  width: 100% !important;
}

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

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

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

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

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

/*====================================================================================
5. HIDING CLASSES.
====================================================================================*/
.u-hide {
  display: none !important;
}

/* ---------- HIDE MAX WIDTH ---------- */
@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;
  }
}
/* ---------- HIDE MIN WIDTH ---------- */
@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;
  }
}
/*====================================================================================
6. COLOR.
====================================================================================*/
.u-c-1 {
  color: var(--theme-color-1) !important;
}

.u-c-2 {
  color: var(--theme-color-2) !important;
}

.u-c-3 {
  color: var(--theme-color-3) !important;
}

.u-c-4 {
  color: var(--theme-color-4) !important;
}

.u-c-5 {
  color: var(--theme-color-5) !important;
}

.u-c-6 {
  color: var(--theme-color-6) !important;
}

.u-c-8 {
  color: var(--theme-color-8) !important;
}

.u-c-9 {
  color: var(--theme-color-9) !important;
}

/*====================================================================================
7. BACKGROUND COLOR.
====================================================================================*/
.u-bg-1 {
  background-color: var(--theme-color-1) !important;
}

.u-bg-2 {
  background-color: var(--theme-color-2) !important;
}

.u-bg-3 {
  background-color: var(--theme-color-3) !important;
}

.u-bg-4 {
  background-color: var(--theme-color-4) !important;
}

.u-bg-5 {
  background-color: var(--theme-color-5) !important;
}

.u-bg-6 {
  background-color: var(--theme-color-6) !important;
}

.u-bg-7 {
  background-color: var(--theme-color-7) !important;
}

.u-bg-8 {
  background-color: var(--theme-color-8) !important;
}

/*====================================================================================
8. 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;
  }
}