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

1. START TEXT.
2. START HIDING CLASSES.
3. START COLOR.
4. START BACKGROUND COLOR.

/*====================================================================================
1. START TEXT.
====================================================================================*/
/* ---------- START FONT FAMILY ---------- */
.u-font-jp-primary {
  font-family: var(--theme-font-jp-primary) !important;
}

.u-font-jp-secondary {
  font-family: var(--theme-font-jp-secondary) !important;
}

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

/* ---------- START 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;
  }
}
@media only screen and (max-width: 424px) {
  .u-hide-max-w424 {
    display: none !important;
  }
}
@media only screen and (max-width: 379px) {
  .u-hide-max-w379 {
    display: none !important;
  }
}
/* ---------- START 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;
  }
}
@media only screen and (min-width: 425px) {
  .u-hide-min-w425 {
    display: none !important;
  }
}
@media only screen and (min-width: 380px) {
  .u-hide-min-w380 {
    display: none !important;
  }
}
/*====================================================================================
3. START COLOR.
====================================================================================*/
.u-c-primary {
  color: var(--theme-color-primary) !important;
}

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

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

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

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

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

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

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

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