/* --------------------------------------------------
   UNIVERSAL RESPONSIVE TYPOGRAPHY SYSTEM
   WITH !IMPORTANT APPLIED EVERYWHERE
----------------------------------------------------- */

html {
    font-size: 100% !important;
}

/* --------------------------------------------------
   EXTRA SMALL (0 - 268px)
----------------------------------------------------- */
@media (max-width: 268px) {

    html { font-size: 65% !important; }

    h1 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: .95rem !important; }
    h4 { font-size: .8rem !important; }
    h5 { font-size: 0.7rem !important; }
    h6 { font-size: 0.65rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: 0.7rem !important;
        line-height: 1.45 !important;
    }

    a,
    button {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* --------------------------------------------------
   EXTRA SMALL / SMALL MOBILE (269px - 480px)
----------------------------------------------------- */
@media (min-width: 269px) and (max-width: 480px) {

    html { font-size: 82% !important; }

    h1 { font-size: 1.7rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.45rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.05rem !important; }
    h5 { font-size: .90rem !important; }
    h6 { font-size: .80rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: 0.75rem !important;
        line-height: 1.55 !important;
    }

    a,
    button {
        padding: 6px 12px !important;
    }
}

/* --------------------------------------------------
   SMALL TABLET (481px - 767px)
----------------------------------------------------- */
@media (min-width: 481px) and (max-width: 767px) {

    html { font-size: 90% !important; }

    h1 { font-size: 1.9rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.35rem !important; }
    h4 { font-size: 1.15rem !important; }
    h5 { font-size: 1.0rem !important; }
    h6 { font-size: .85rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: .80rem !important;
    }
}

/* --------------------------------------------------
   TABLET (768px - 991px)
----------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {

    html { font-size: 95% !important; }

    h1 { font-size: 2.15rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    h5 { font-size: 1.05rem !important; }
    h6 { font-size: .90rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: .85rem !important;
    }
}

/* --------------------------------------------------
   LAPTOP (992px - 1199px)
----------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {

    html { font-size: 100% !important; }

    h1 { font-size: 2.4rem !important; }
    h2 { font-size: 2.05rem !important; }
    h3 { font-size: 1.65rem !important; }
    h4 { font-size: 1.35rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: .90rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: .90rem !important;
    }
}

/* --------------------------------------------------
   DESKTOP (1200px - 1600px)
----------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1600px) {

    html { font-size: 105% !important; }

    h1 { font-size: 2.65rem !important; }
    h2 { font-size: 2.25rem !important; }
    h3 { font-size: 1.8rem !important; }
    h4 { font-size: 1.45rem !important; }
    h5 { font-size: 1.05rem !important; }
    h6 { font-size: .95rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: .95rem !important;
    }
}

/* --------------------------------------------------
   WIDE DESKTOP + 4K (1601px+)
----------------------------------------------------- */
@media (min-width: 1601px) {

    html { font-size: 115% !important; }

    h1 { font-size: 2.9rem !important; }
    h2 { font-size: 2.5rem !important; }
    h3 { font-size: 2.05rem !important; }
    h4 { font-size: 1.6rem !important; }
    h5 { font-size: 1.25rem !important; }
    h6 { font-size: 1.05rem !important; }

    p,
    label,
    a,
    li,
    button {
        font-size: 1rem !important;
    }
}