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


/* Small tablet to big tablet: from 768 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-steps {margin-bottom: 40px;}
    .works-step:last-of-type {
    margin-bottom: 60px;}
    
    .app-screen {width: 50%;}


svg {width:30px; height:30px; 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: from 481 to 767px */
@media only screen and (max-width: 767px) {
    body { font-size: 20px; }
    section { padding: 35px 0; }
    
    .row
    { padding: 0 7%; }
    
    .col { width: 100%; 
    	margin: 0 0 5% 0;
    }
    
    main-nav { display: none; }
    
    svg {width:45px; height:45px; margin-right: 5px; padding-right: 10px;}
    
    footer {font-size: 15px; text-align: center;}
    
    .section-form {text-align: center; padding-top: 15%;
    padding-bottom: 15px; border-spacing: 10px;}
    
    .section-testimonials {padding-top: 15%; padding-bottom: 15%;}

    .iphone{margin-right: 30%;}
    
    .hero-text-box {font-size: 15px; background-size: cover;}
    
    .main-nav {font-size: 60%; white-space: nowrap;}
    
        .long-copy {
    width: 100%;
    margin-left: 0%;
}
    
    h1 { font-size: 180%; }
    h2 { font-size: 150%; }
    
    
    .main-nav {
    float: right;
    list-style: none;
    margin-top: 15px;
    
}
    
    .sticky .main-nav {

    margin-bottom: 35px;
}
    
    .main-nav li a:link,
.main-nav li a:visited{
    padding: 8px 0px;
    color:white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 100%;
    border-bottom: 2px solid 
        transparent;
        -webkit-transition: border-bottom 0.4s;
        transition: border-bottom 0.4s;
}

.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 10px solid #009432;
    -webkit-transition: border-bottom 0.5s;
    transition: border-bottom 0.5s;
}

    
    
}


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