/* Big tablet to 1200px (widths smaller than 1140px row) */
@media only screen and (max-width: 1200px) {
    .hero-text-box {
        padding: 0 2%;
        width: 100%;
    }

    .row { padding: 0 2%; }
}    

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
    body { font-size: 18px; }
    section { padding: 60px 0; }

    .long-copy {
        width: 80%;
        margin-left: 10%;
        text-align: justify;
    }

    .steps-box { margin-top: 10px;}
    .steps-box:last-child { margin-top: 10px;}
    .works-steps { margin-bottom: 40px;}
    .works-steps:last-of-type { margin-top: 60px;}

    .app-screen { width: 50%; }
    .icon-small { 
        width: 17px; 
        margin-right: 5px;
        }
    .city-feature { font-size: 90%; }

    .plan-box {
        width: 100%;
        margin-left: 0%;
    }

    .plan-price { font-size: 250%; }

    .contact-form {width: 80%;}

    .footer-nav li { margin-right: 8px; }

}


/* ipad width is 678px */
/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {

   body { font-size: 16px; } 
   section { padding: 30px 0; }
   .section-testimonials {
        background-image: -o-linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.78)), url(img/back-customers-mobile.jpg);
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.78)), to(rgba(0, 0, 0, 0.78))), url(img/back-customers-mobile.jpg);
        background-image: linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.78)), url(img/back-customers-mobile.jpg);
        background-attachment: scroll;   
    }

    header {
        background-image: -o-linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url(img/hero-mobile.jpg);
        background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.8))), url(img/hero-mobile.jpg);
        background-image: linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)), url(img/hero-mobile.jpg);
        background-attachment: scroll;
    }

    .logo {
        height: 100px;}

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

   .col { width: 100%; }

   .main-nav { display: none; }

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

   .main-nav li {
       display: block;
   }

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

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

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

   .long-copy {
    width: 100%;
    margin-left: 0%;
    text-align: justify;
    margin-bottom: 0;
    }
    .app-screen { 
        width: 50%;
        margin-right: -13px; }
        
    .steps-box:first-child { text-align: center;}    

    h1 { font-size: 180%; }
    h2 { font-size: 150%; }

    .works-steps div {
        
        height: 35px;
        width: 35px;
        padding: 4px;
        margin-right: 15px;
        font-size: 120%;
    }

    .works-steps { margin-bottom: 20px;}
    .works-steps:last-of-type { margin-top: 20px;}


    .section-features .long-copy {
        margin-bottom: 0px; 
    } 

    .footer-nav li,
    .social-links li {
        margin-right: 5px; 
        }

    footer p { margin-top: 5px; }

    .btn-app img {
        height: 35px;
        width: auto;
        margin-right: 20px;
        margin-left: 2px;
    }

    .works-steps:last-of-type { margin-bottom: 40px; }

    .how-works { margin-bottom: 10px; }

}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

    section { padding: 25px 0; }
    .contact-form { width: 100%; }
    

    .meal-photo img:hover {
    /* scaling to 1.03 instead of 1 gets rid of white line between photos */
    -webkit-transform: scale(1.09);
    -ms-transform: scale(1.09);
    transform: scale(1.09);
    opacity: 1;
    }

    .how-works { margin-bottom: 0px; }


    
}