queries.css

/* big tablets to 1200px {widths smaller than the 1148px row} */
@media only screen and (max-width: 1200px) {

    .intro-text{
        padding-top: 15vh;
      }
    .introduction{
        height: 80vh;
    } 
     
}


/* large tablets: 768 - 1023px */
@media only screen and (max-width: 1023px) {
    .banner {
        height: 16vh;;
    }

    .intro-text{
        padding-top: 15vh;
    }
      
    .introduction{
        height: 84vh;
    }  

}


/* large phones to small tablets: 481 - 767px */
@media only screen and (max-width: 767px) {

    h1{
        font-size: 3vh;
    }

    .banner {
        height: 15vh;;
    }

    .intro-text{
        padding-top: 4vh;
    }
    
    .introduction{
        height: 85vh;
    }
    
}


/* small phones: 0 - 480px */
@media only screen and (max-width: 480px) {
    section { padding: 25px 0; }
    .contact-form {width: 100%; }

    h2{
        font-size: 2vh;
        float: right;
        padding-right: 10vh;
    }
    .article-box{
        height: 100vh;
        display:block;
    }
    .banner {
        height: 15vh;;
    }
    .introduction{
        height: 85vh;
    }

    
}