@media (min-width:0px) and (max-width:480px){

    .firstphoto{
        background-size: 100% 80%;
        background-position: 0 -10%;
        height: 60vh;
    }

    nav>ul>li{
        width: 7vh;
    }
    nav>ul>li>a{
        font-size: 1.7vh;
    }
    #about{
        padding-top: 5vh;
        display: block;
        height: 100vh;
    }
    .leftBoxes, .rightBoxes{
        height: 45vh;
        width: 80%;
    }
    .leftBoxes{
        height: 40vh;
       
    }
    .rightBoxes{
        padding:0vh;
        display: block;
    }
    #rightContent > h1{
        padding-top: 2vh;
        font-size: 4.5vh;
    }
    #rightContent > p{
        padding:0.5vh;
        font-size: 1.8vh;
        height: 80%;
        width: 90%;
        margin-bottom: 1vh;
    }

    #description{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

    }
    .descriptionBoxes{
        width: 80%;
        height: 70%;
        display: block;
    }
  
    .descriptionImgAndP{
        width: 80%;
    }
    .imgDescriptionBoxes{
        width: 85%;
        height: 70%;
    
    }

    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.4vh;
    }

    #gallery{
        margin-top: 100vh;
        height: 100vh;
    }
    .wrapper{

        width: 80%;
        height:200vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 3vh;
        column-gap: 3vh;
        grid-template-areas: 
        'one'  
        'two'
        'three' 
        'four'
        'five';
    }
    #contact{
        margin-top: 120vh;
    }
    .form{
        height: 60vh;
        clear: both;
        width:100%;
    }
    .contactLeftBox, .contactRightBox{
        width: 80%;
    }
    .contactBox > p{
    
        font-size: 2.2vh;
    }
    .contactBox > ul > li>a{
      
        font-size: 2.2vh;
        
    }
    footer{
        margin-top: 80vh;
    }
}
@media (min-width:480px) and (max-width:768px){
 
    .firstphoto{
        background-size: 100% 75%;
    }
    nav>ul>li{
        width: 10vh;
    }
    nav>ul>li>a{
        font-size: 2vh;
    }
    #about{
        display: block;
        height: 100vh;
    }
    .leftBoxes, .rightBoxes{
       height: 45%;
       width: 80%;
    }
   
    .rightBoxes{
        display: block;
    }
    #rightContent > h1{
        padding-top: 2vh;
        font-size: 4.5vh;
    }
    #rightContent > p{
        padding:0.5vh;
        font-size: 2vh;
        height: 80%;
        width: 90%;
        margin-bottom: 1vh;
    }
    
    #description{
        margin-top: 5vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

    }

    .descriptionBoxes{
        width: 70%;
        height: 70%;
        display: block;
    }
  
    .descriptionImgAndP{
        width: 80%;
    }
    .imgDescriptionBoxes{
        width: 80%;
        height: 70%;
    
    }

    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.4vh;
    }

    #gallery{
        margin-top: 100vh;
        height: 217vh;
    }
    .wrapper{

        width: 70%;
        height:200vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 3vh;
        column-gap: 3vh;
        grid-template-areas: 
        'one'  
        'two'
        'three' 
        'four'
        'five';
    }
    #contact{
        margin-top: 10vh;
    }
    .form{
        height: 60vh;
        clear: both;
        width:90%;
    }
    .contactLeftBox, .contactRightBox{
        width: 70%;
    }
    .contactBox > p{

        font-size: 2.4vh;
    }
    .contactBox > ul > li>a{
      
        font-size: 2.2vh;
        
    }
    footer{
        margin-top: 80vh;
    }

}
@media (min-width:768px) and (max-width:949px){
    .firstphoto{
        background-size: 100% 70%;
    }
    nav>ul>li{
        width: 10vh;
    }
    nav>ul>li>a{
        font-size: 2vh;
    }

    #about{
        display: block;
        height: 100vh;
    }
    .leftBoxes, .rightBoxes{
       height: 40%;
       width: 82.5%;
    }
  
    .rightBoxes{
        height:45%;
        padding:0vh;
        display: block;
    }
    #rightContent > h1{
        padding-top: 2vh;
        font-size: 4.5vh;
    }
    #rightContent > p{
        padding:0.5vh;
        font-size: 2vh;
        height: 80%;
        width: 90%;
        margin-bottom: 1vh;
    }

    #description{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .descriptionBoxes{
        width: 48%;
        height: 70%;
        display: block;
    }
  
    .descriptionImgAndP{
        width: 90%;
    }
    .imgDescriptionBoxes{
        width: 85%;
        height: 70%;
    
    }

    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.1vh;
        width: 80%;
    }
    #gallery{
        margin-top: 40vh;
    }
    .wrapper{

        width: 90%;
        height:90%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        row-gap: 3vh;
        column-gap: 3vh;
        grid-template-areas: 
        'one one  two two'
        'three three four four'
        'five five five five';
    }
    .form{
        width: 60%;
        margin-top: 10vh;
    }
    .contactLeftBox, .contactRightBox{
       width: 80%;
    }
    .contactBox > p{
        font-size: 2.7vh;
       
    }
    .contactBox > ul > li>a{
        font-size: 2.1vh;
    }
    footer{
        margin-top: 80vh;
    }
}
@media (min-width:950px) and (max-width:1024px){
    .leftBoxes{
       background-size: 100% 100%;
       height: 40%;
    }
    .rightBoxes{
        width: 44%;
    }
    .leftBoxes, .rightBoxes{
 
    }
    #rightContent> p {

        font-size: 1.9vh;
    }
    .descriptionImgAndP{
        width: 85%;
        height: 75%;
    }
    .imgDescriptionBoxes{
        width: 90%;
        height: 65%;
    }
    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.3vh;
        width: 90%;
    }
    .form{
        width: 100%;
    }
    .contactBox > p{
        font-size: 2vh;
   
    }
    .contactBox > ul > li>a{
        font-size: 2vh;
    }
}

@media (min-width:1025px) and (max-width:1200px){
    #rightContent> p {
        padding-top: 1vh;
        font-size: 2vh;
    }
    .leftBoxes, .rightBoxes{
        margin: 3vh;
    }
    .descriptionImgAndP{
        width: 85%;
    }
    .imgDescriptionBoxes{
        width: 90%;
    }
    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.9vh;
    }
    .form{
        width: 60%;
    }
    .contactBox > p{
        font-size: 2.7vh;      
    }

}
@media (min-width:1200px) and (max-width:1400px){
     #rightContent> p {
        
        font-size: 2.2vh;
    }
    .descriptionImgAndP{
        width: 90%;
    }
    .imgDescriptionBoxes{
        width: 90%;
    }
    #description .descriptionBoxes .descriptionImgAndP > p{
        font-size:2.9vh;
        width:80%;
    }
    .form{
        width: 30vh;
    }
    input, textarea{
        display: block;
    }
}
@media (min-width:1400px){
    #contact{
      
    }
}