/* Small screens */
@media only screen {
    /*non-specific*/
        body {
            font-size: 1vw;
        }
        h1 {
            font-size: 10em;
        }
        h2 {
            font-size: 9em;
        }
        
        h3 {
            font-size: 2.5em;
        }

        a{
            font-size: 1.7em;
        }

        label, input[type=text], .contact-container button{
            font-size: 3.5em;
        }

        /*testing font smaller screens portrait*/
        p {
            font-size: 2.3vh;
        }

    /*navigation*/
    /*header*/
    /*spacer*/
    .reviews h6, .guarantees h6 {
        font-size: 3em;
    }
    /*services*/
    .slide-up h6 {
        font-size: 8em;
    }
    .slide-up p {
        font-size: 4em;
    }
    .more-info {
        font-size: 6em;
    }
    .more-info-popout h3{
        font-size: 5em;
    }
    .service-card button {
        font-size: 6em
    }
    .popout-info p {
        font-size: 3.4em;
    }
    /*about*/
    /*footer*/

    .footer-title {
        font-size: 3em;
    }
} /* Define mobile styles */

/*small screens in landscape orientation */
@media only screen and (orientation: landscape) {
    /*non-specific*/
    h1 {
        font-size: 8em;
    }
    h2 {
        font-size: 6em;
    }
    p, a, label, input[type=text], .contact-container button, .popout-info p{
        font-size: 2.2em;
    }
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    .slide-up h6 {
        font-size: 2.5em;
    }
    .slide-up p {
        font-size: 3em;
    }
    .more-info {
        font-size: 3em;
    }
    .more-info-popout h3{
        font-size: 2.5em;
    }
    .service-card button {
        font-size: 3em
    }
    /*about*/
    /*footer*/
}

/* Medium screens but in length(height) */
@media only screen and (min-height: 40.063em) {
    /*testing font smaller screens portrait*/
    p {
        font-size: 2.2vh;
    }
}

/* Medium screens */
@media only screen and (min-width: 40.063em) {
    /*non-specific*/
    a, label, input[type=text], .contact-container button, .popout-info p{
        font-size: 1.9em;
    }
    /*h1 {
        font-size: 6em;
    }*/
    /*navigation*/
    /*header*/
    /*spacer*/
    .reviews h6, .guarantees h6 {
        font-size: 2.5em;
    }
    .reviews .right-review h6, .reviews .left-review h6, .footer-title {
        font-size: 1.5em;
    }
    .reviews .right-review p, .reviews .left-review p{
        font-size: 1.3em;
    }
    /*services*/
    .slide-up h6 {
        font-size: 4em;
    }
    .slide-up p {
        font-size: 2.3em;
    }
    .more-info {
        font-size: 4em;
    }
    .service-card button {
        font-size: 3em;
    }
    /*about*/
    /*footer*/
} /* min-width 641px, medium screens */

/*Medium screens in landscape orientation */
@media only screen and (orientation: landscape) and (min-width: 40.063em) {
    /*non-specific*/
    h1 {
        font-size: 6em;
    }
    p, a, label, input[type=text], .contact-container button, .popout-info p{
        font-size: 1.8em;
    }
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    .slide-up h6 {
        font-size: 3em;
    }
    .more-info {
        font-size: 2em;
    }
    .service-card button {
        font-size: 2.5em;
    }
    /*about*/
    /*footer*/
}

/* large screens but in length(height) */
@media only screen and (min-height: 50.063em) {
    /*testing font smaller screens portrait*/
    p {
        font-size: 2.0vh;
    }
}

/* Large screens */
@media only screen and (min-width: 64.063em) {
    /*non-specific*/
    h1 {
        font-size: 6em;
    }
    p, a, label, input[type=text], .contact-container button, .popout-info p{
        font-size: 1.5em;
    }
    /*navigation*/
    /*header*/
    /*spacer*/
    .reviews h6,.guarantees h6 {
        font-size: 2em;
    }
    .reviews .right-review h6, .reviews .left-review h6, .footer-title{
        font-size: 1em;
    }
    .reviews .right-review p, .reviews .left-review p{
        font-size: .8em;
    }
    /*services*/
    .slide-up h6 {
        font-size: 2em;
    }

    .slide-up p {
        font-size: 1.2em;
    }
    .more-info {
        font-size: 1.2em;
    }
    .service-card button {
        font-size: 1.5em;
    }
    /*about*/
    /*footer*/
} /* min-width 1025px, large screens */

@media only screen and (orientation: landscape) and (min-width: 64.063em) {
    /*non-specific*/
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    /*about*/
    /*footer*/
}


/* XLarge screens*/
@media only screen and (min-width: 90.063em) {
    /*non-specific*/
    
    h2 {
        font-size: 5em;
    }
    
    p, a, label, input[type=text], .contact-container button, .popout-info p{
        font-size: 1em;
    }
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    .slide-up p {
        font-size: .85em;
    }
    /*about*/
    /*footer*/
} /* min-width 1441px, xlarge screens */

@media only screen and (orientation: landscape) and (min-width: 90.063em) {
    /*non-specific*/
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    /*about*/
    /*footer*/
}


/* XXLarge screens*/
@media only screen and (min-width: 120.063em) {
    /*non-specific*/
    h1 {
        font-size: 5em;
    }
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    /*about*/
    /*footer*/
} /* min-width 1921px, xxlarge screens */

@media only screen and (orientation: landscape) and (min-width: 120.063em) {
    /*non-specific*/
    /*navigation*/
    /*header*/
    /*spacer*/
    /*services*/
    /*about*/
    /*footer*/
}