/* Big tablets 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 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:first-child {margin-top:40px;}
    .works-step:last-of-type {margin-bottom:50px;}
    .app-screen {width:50%;}
    .btn-app img {margin-right:5px;height:45px;}
    .icon-small {width:17px;margin-right:5px;}
    .city-feature {font-size:90%;}
    .plan-box {width:100%;margin-left:0%;}
    .plan-price {font-size:250%;font-weight: 300;}
    .contact-form {width:80%;}
}


/* Small phones 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;}
    .logo {
        margin-top:30px;
    }
    .mobile-nav-icon {
        display:inline-block;
    }
    .main-nav {
        float:left;
        margin-top:30px;
        margin-left:25px;
    }
    .main-nav li{
        display:block;
    }
    .main-nav a:link,
    .main-nav a:visited{
        display:block;
        border:0;
        padding:10px 0;
        font-size:100%;
    }
    .logo-black {padding:5px 0}
    .sticky .main-nav {margin-top:10px;}
    .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;}
    
    .long-copy {
        width:100%;
        margin-left:0%;
    }
    h1 {font-size:180%;}
    h2 {font-size: 150%;}
    .steps-box:first-child {text-align: center;}
    .works-step div {height:40px;width:40px;margin-right:15px;padding:4px;}
    .works-step {margin-bottom:35px;}
    .works-step:last-of-type {margin-bottom:20px;}
    .btn-app {display: inline-block;margin:20px 20px 0 0;}
    .app-screen {width:40%;}
    
    .box:first-of-type {
        margin-left:10px;
    }
    
    .plan-box.js--wp-4 {margin-left:10px;}
    
    label {margin-left:8px;}
    
    footer {
        padding:20px 0;
    }
    .footer-nav li a{
        font-size:120%;
    }
    .social-nav {margin-bottom:15px;margin-top:10px;}
    
    .social-nav li a{font-size:200%; margin-right:25px;}
}

/* Small phones: 0 to 480px */
@media only screen and (max-width:480px){
    .js--wp-1 {margin-left:0px;}
    .box:first-of-type {margin-left:0px;}
    .plan-box.js--wp-4 {margin-left:0px;}
    .plan-box {margin:5px 0}
    label {margin-left:0px;}
    input, select, textarea {margin:10px 0;}
}