@media only screen and (max-width:1200px){
    .hero-text-box{
        width: 100%;
        padding: 0 10%;
    }
    .row{padding: 0 3%;}
    .hero-text-box{
        font-size: 85%;
    }
    nav{
        font-size: 80%;
    }
}   

/*Small tablet to big tablet 767px to 1023*/
@media only screen and (max-width:1023px){

    body{font-size: 16px;}
    section{padding: 60px 0;}
    .long-copy{
        width: 80%;
        margin-left: 10%;
    }

    .small-icon{width: 17px;}
    
    .contact-form{width:80%}
    
    .hero-text-box{
        font-size: 90%;
    }
    nav{
        font-size: 60%;
    }
    .form-container{
        height: 47vh;
    }
    .mail-send-div{
        margin: auto 30%;
    }
}


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

    body{font-size: 16px;}
    section{padding: 30px 0;}

    .row,
    .hero-text-box { padding: 0 4%}
    .col{
        width:100%;
        margin: 0 0 4% 0;    
    }
    .main-nav{display:none}

    .main-nav{
        float: left;
        margin-top:35px;
        margin-left: 25px;;
    }

    .main-nav li {
        display: block;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border:0;
        padding: 10 0;
        font-size: 100%;
    }

    .mobile-nav{
        display: inline-block;
        font-size: 15px;
    }

    .mobile-nav-icon{
        padding-right: 20px;
        font-size: 150%;
    }

    .sticky .main-nav{ margin-top: 10px;}

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {padding: 15px 0;}
    .sticky .mobile-nav-icon { color:#555;}

    .long-copy{
        width: 100%;
    
        margin-left: 0%;
    }
    h1{font-size: 180%;}
    h2{font-size: 150%;}

    .city-feature .small-icon{
      font-size: 90%;
      margin-bottom: 2px;
    }
    .meals-tittles{
        margin-top: 5%;
        margin-bottom: 5%;
    }

    .meal-photo{
        margin:auto;
    }
    .form-container{
        height: 60vh;
    }
    iframe{
        width:400px;
        height:250px;
        border:0;
    }
    .mail-send-div{
        margin: auto 30%;
    }
}
    
/*small phones 0 to 480px*/
@media only screen and (max-width:480px){
.contact-form{width:100% ;}
.form-container{
    height: 60vh;
}
iframe{
    width:400px;
    height:250px;
    border:0;
}

}