/* === RESPONSIVE TYPO === */

@media screen and (max-width: 479px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width: 480px) and (max-width: 1199px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
    html {
        font-size: 1.2vw;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 22px;
    }
}

@media screen and (max-width: 479px) {

    h1,
    h2 {
        font-size: 2rem;
    }
}

h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-top: 0;
}

#hero-h1 {
    font-weight: 600;
    color: #fff;
}

#contact-h1 {
    font-weight: 600 !important;
    color: #fff !important;
}

.inner-h1 {
    font-weight: 500;
    border-bottom: solid 1px #ddd;
    margin: 0 2vw 2vw;
    padding-bottom: 0.5vw;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
}

.h2-front {
    font-weight: 600;
}

h3,
h4 {
    font-size: 1.5rem;
    font-weight: bold;

}

#hero-p,
.contact-p {
    color: #fff;
    font-size: larger;
}

.front-p,
.contact-p {
    font-size: larger;
}

@media only screen and (max-width: 836px) {

    .front-p,
    .contact-p,
    #hero-p {
        font-size: inherit;
    }

}

@media only screen and (max-width: 768px) {

    #hero-h1,
    #contact-h1 {
        font-size: 2.2rem;
    }

}