/*small phones 0-48-px*/
@media only screen and (max-width:480px){
    section { padding: 25px 0;}
    .contact-form { width: 100%;
    }
      
}
/*small phones to small tablets 481-767px */
@media only screen and (max-width:767px){
    body{font-size: 16px;} 
    section{padding: 30px;}
    .row,.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-bottom: 20px;}
    .works-step:last-of-type{margin-bottom: 20px;}
    .steps-box:first-child{ text-align: center;}
    .app-screen {width: 40%;}
    .works-step div  {
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }
}
/*tablets in portrait mode 768px to1023px */
@media only screen and (max-width:1023){
    body {font-size: 18px;}
    section {padding: 60px 0;}
    .long-copy{
    line-height: 145%;
    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{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%;}
}
/*small phones to small tablets 1023 and 1200 (width smaller than 1140px row*/
@media only screen and (max-width:1200px){
    .hero-text-box{
    width: 100%;
        padding: 0 2%;}
    .row{padding: 0 2%;}
}