/* big tablets 1200px*/
@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-1023px*/
@media only screen and (max-width: 1023px) {
    .long-copy{
      width: 70%;
      margin-left: 10%;
    }
    body{font-size: 18px;}
    section{padding: 60px 0;}
    .main-nav li{
      display: inline-block;
      margin-left: 40px;
  }
  .main-nav{width: 65%;}
  .section-cities{margin: 25px;}

  blockquote{padding: 2%; width: 85%;}
  .plan-box{width: 100%;margin-left: 0%;}

  .steps-box{margin-top: 10px;}
  .steps-box:last-child{margin-top: 10px;}
  .works-steps{margin-bottom: 40px;}
  .works-steps:last-of-type{margin-bottom: 60px;}
  .app-screen{width: 50%;}
  .icon-small{
    width: 17px;
    margin-right: 5px;
  }
  .city-feature{font-size: 90%;}
  .plan-price{font-size: 250%;}
  .contact-form{width: 80%;}
}

/* small tablets from 481-767px*/
@media only screen and (max-width: 767px) {
  body{font-size: 16px;}
  section{padding: 30px 0px;}  
  .row,
  .hero-text-box{padding: 0 4%;}
  .col{
    width: 100%;
    margin: 0 0 4% 0;
  }
  .main-nav{display: none;}
  .app-screen{width: 40%;}
  .steps-box:first-child{text-align: center;}
  .works-steps div{
    height: 40px;
    width: 40px;
    margin-right: 15px;
    padding: 4px;
    font-size: 120%;
  }
  .works-steps{margin-bottom: 40px;}
  .works-steps:last-of-type{margin-bottom: 30px;}
  }

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