/* Big tablets to 1200px (widths small 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 768-1023 */

@media only screen and (max-width:1023px) {

    body { font-size: 18px; }

    section { padding: 60px 0;}

    

    .Tlogo {



    height: 100px;

    width: auto;

    float: left;

    margin-top: 20px;

}



    .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 { 

        width: 17px;

        margin-right: 5px;

    }



    .city-feature { 

        font-size: 90%;

        margin-right: 5px;

    }



    .plan-box {

        width:100%;

        margin-left: 0%;

    }



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

    .contact-form { width: 80%; }

}



/* Small phones to small tablets: from 481-767px */

@media only screen and (max-width:767px) {



    body { font-size: 16px; }

    section { padding: 30px 0; }

    

    .Tlogo {



    height: 65px;

    width: auto;

    float: left;

    margin-top: 20px;

}
    .row,

    .hero-text-box { padding: 0 4%; }

    .col { 

        width: 100%;

        margin: 0% 0 4% 0%;    

    }



    .main-nav { display: none; }

    

    .mobile-nav-icon {display: inline-block;}

    

    .main-nav {

        float: left;

        margin-top: 35px;

        margin-left: 25px;

    }

    

    .main-nav li {

        display: block;

    }

    

    .main-nav li a:link,

    .main-nav li a:visited {

        display: block;

        border: 0;

        padding: 5px 0;

        font-size: 80%;

    }

    

    /*------- STICKY NAV --------*/



    .sticky .main-nav li a:link,

    .sticky .main-nav li a:visited {padding: 5px 0;}

    .sticky .mobile-nav-icon i {color:#555;}



    .main-nav {margin-top: 10px;}



    .sticky .Tlogo {



        height: 50px;

        width: auto;

        float: left;

        margin: 25px 0;

    }



    

    h1 { font-size: 180%; }

    h2 { font-size: 150%; }



    .long-copy {

        width: 100%;

        margin-left: 0%;

    }



    .app-screen { width: 40%; }

    .steps-box:first-child { text-align: center; }



    .works-step div {

        height:40px;

        width: 40px;

        padding: 4px;

        margin-right: 15px;

        font-size: 120%;

    }

    

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

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



}



/* Small phones: from 480px */

@media only screen and (max-width:480px) {

    section { padding: 25px 0; }

    .contact-form { width: 100%; }

}
@media only screen and (max-width: 767px) {
  .hero-text-box {
    position: static !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 40px 5% 120px !important; /* keep the larger padding */
    text-align: center;
  }

  header {
    height: auto !important;
    min-height: 100vh;
    padding-bottom: 0;
    overflow: visible;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .hero-text-box {
    padding-top: 100px; /* Pushes content down below nav */
    padding-bottom: 120px; /* Creates breathing room before next section */
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    text-align: center;
  }

  header {
    height: auto !important;
    min-height: 100vh;
    overflow: visible;
  }

  .hamburger {
    display: none !important;
  }

  .nav-menu {
    display: flex !important;
  }
}