/*big tablets to 1200px with small than 1140px row*/
@media only screen and (max-width:1200px){

    .hero-text-box{
        width:100%;
        padding: 0 2%;       
    }
    .row{ padding:0 2%; }   
 
}


/*ipads/small tablets to big tablets/ -   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%;   
     }
     .steps-box{ margin-top: 10px; }
     .steps-box:last-child{ margin-top: 10px; }
     .works-step{margin-bottom: 40px;}
     .works-step:last-of-type{margin-bottom: 60px;}

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

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

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

     .contact-form{
         width: 80%;
     }
}


/*smaller phone to small tablets -  from 481PX 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%;
    }

    /*.main-nav{
        display: none;
    }*/
   
    .main-nav li {       
        display: none;        
    }
    
    .main-nav li:first-child {
        display: block;        
    }
    .mobile-nav-icon{
        display: block;
        margin-top: -15px;
        float: right;
    }
    
  
    .main-nav li a :link,
    .main-nav li a :visited{
        display: block;
        border:0;
        padding: 10px 0;
        font-size: 100%;
    }

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

    h1{
        font-size: 180%;
    }
    h1{
        font-size: 150%
    }
    .col{
        margin:0 0 4% 0;
    }
    .long-copy{
        width:100%;
        margin-left: 0%;   
     }
     app-screen{font-size:40px;}
     .steps-box:first-child{text-align: center}

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

     .works-step div {
        border :2px solid  #cf6d17;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        text-align: center;
        padding:2px;
        float:left;
        margin-right: 15px;
    }
}

/*Small phones from 0 to 480px*/
@media only screen and (max-width:480px){
 .section{
     padding:25px 0;
 }

 .contact-form{
     width: 100%;
 }
}