@media only screen and (min-device-width: 393px) and (max-device-width: 767px) {
    h1.hero {
        font-size: 4rem;
    }
    h1 {
        font-size: 3rem;
    }
    .font-lato-f3 {
        font-size: 31px;
    }
    .font-roboto-aw3 {
        font-size: 26px;
    }
    .font-lato-f4 {
        font-size: 29px;
    }
    .font-roboto-aw4 {
        font-size: 24px;
    }
    .font-lato-f5 {
        font-size: 27px;
    }
    .font-roboto-aw5 {
        font-size: 22px;
    }
    h1.hero {
        font-size: 4.5rem;
        line-height: 4.4rem;
        margin: 0 auto;
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0);
    }
    #goup {
        display: none;
        position: fixed;
        bottom: 15px;
        right: 15px;
    }
}

@media only screen and (min-device-width: 767px) and (max-device-width: 861px) and (orientation: landscape) {
    h1.hero {
        font-size: 3.5rem!important;
        line-height: 3.4rem!important;
        width: 80%;
        margin: 0 auto;
    }
    #goup {
        display: none;
        position: fixed;
        bottom: 30px;
        right: 15px;
    }
    #goup.dark line, #goup.dark path {
        stroke: #2A2C3A;
    }
}

@media only screen and (min-device-width: 667px) and (max-device-width: 766px) and (orientation: landscape) {
    h1.hero {
        font-size: 3rem!important;
        line-height: 3rem!important;
        width: 100%;
        margin: 0 auto;
    }
    #goup {
        display: none;
        position: fixed;
        bottom: 30px;
        right: 15px;
    }
    #goup.dark line, #goup.dark path {
        stroke: #2A2C3A;
    }
}