/* big tablets to 1200px (width smaller then the 1140px row) */

@media only screen and (max-width:1200px) {
    
    .hero-text-box{
    width: 100%;
    padding: 0 2%; 
       
}
    .row{ padding: 0 2%;}
    
}


/* Small tablets to larger tablets: from 768px to 1023*/

@media only screen and (max-width:1023px) {
    body{font-size: 18px; }
    section{padding: 60px 0; }
    
    .long-copy{
        width: 80%;
        margin-left: 10%; }
    .steps-box { margin-top: 10px;}
    .steps-box:last-child { margin-top: 10px; }
    .works-step { margin-top:  40px; }
    .works-step:last-of-type { margin-bottom:60px;}
    .app-screen { width: 50%; }
    .btn-app img{ height: 48px; }
    .icon-small{ width: 17px;
                 margin-right: 5px;}
    .city-features{ font-size: 86%; }
    .plan-box{
        width:100%;
        margin-left: 0%;
    }
    .plan-price{
        font-size: 250%;
    }
    .contact-form{width: 80%;}

}


/* Small phones to small tablets: from 481 to 768px */

@media only screen and (max-width:767px) {
    body{font-size: 16px;}
    section{padding: 30px 0;}
    .hero-text-box{ padding: 0 4%;}
    .col{width: 100%;
         margin: 0% 0% 4% 0%;
     }
/*    */
    .main-nav { display: none; }
    h1{ font-size: 180%;}
    h2{ font-size: 150%;}
    .long-copy{
        width: 100%;
        margin-left:0%; }
    
    .works-step { margin-top: 20px; }
    .works-step:last-of-type { margin-bottom:20px;}
    .works-step div{
    
    height: 41px;
    width: 41px;
    padding: 4px;
    margin-right: 15px; 
    font-size: 120%;
}
    .steps-box:first-child{
    text-align: center; }
    .app-screen { width: 40%; }
    
    .footer-nav{
        list-style: none;
        float: none;
        text-align: center;
}

.social-links{
    letter-spacing: normal;
    float: none;
    text-align: center;
}
    footer{
        
        font-size: 60%
    }
}

 

/* Small phones: from o to 480px */

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