/* Responsive queries (mobile-first overrides)
   Drop this file in place of queries.css, or load after style.css
*/

/* Big Tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {

  .row { padding: 0 2%; }

  .hero-text-box{
    width: 90%;
    max-width: 1140px;
    padding: 0 2%;
  }

  .hero-text-box h1{ font-size: 320%; }
}


/* Small Tablet to Big Tablet: from 768 to 1023px */
@media only screen and (max-width: 1023px) {

  body{ font-size: 18px; }

  section{ padding: 50px 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%; }

  .icon-small{
    width: 18px;
    margin-right: 8px;
  }

  /* Give the header/nav more breathing room on compressed layouts */
  header{ padding-top: 110px; }
  nav{ position: relative; z-index: 9999; }

  .hero-text-box{
    width: 92%;
    top: 50%;
  }

  .hero-text-box h1{ font-size: 260%; }
}


/* Small Phones to Small Tablets: from 481 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%;
    margin: 0 0 4% 0;
  }

  /* Mobile navigation layout (works with typical JS toggles) */
  .main-nav{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    display: none; /* shown by your nav toggle script */
  }

  .main-nav li{ display: block; }

  .main-nav li a:link,
  .main-nav li a:visited{
    display: block;
    border: 0;
    padding: 10px 0;
    font-size: 100%;
  }

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

  /* Sticky header adjustments if you use a sticky class */
  .sticky .main-nav{ margin-top: 10px; }
  .sticky .mobile-nav-icon{ margin-top: 10px; }

  /* Hero type scales down to avoid overlap */
  .hero-text-box{ top: 55%; }
  .hero-text-box h1{ font-size: 220%; }
  h2{ font-size: 150%; }
}


/* Small Phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

  section{ padding: 25px 0; }

  .contact-form,
  .form{ width: 100%; }

  .hero-text-box{ top: 58%; }
  .hero-text-box h1{ font-size: 200%; }

  .btn:link,
  .btn:visited{
    padding: 10px 18px;
  }
}