/* Big tabet to 1200 px (widths smaller than our 1140 px row)  */
@media only screen and (max-width: 1200px) {
    .testbox { background-color: orange; }  
    
    .row { padding: 0 2%; }   
  }
  
  /* Small tabet to big tablet 901 - 1023  */
  @media only screen and (max-width: 1023px) {
    .testbox { background-color: yellow; }    
     body { font-size: 18px; }
  }
  
  /* Accounting for nav wrapping 768 - 900  */
  @media only screen and (max-width: 900px) {

    .testbox { background-color: pink; }

    .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: 10px 0;
      font-size: 100%;
    } 
  
    .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; }      
  }
  
  /* Small phones to small tablets: from 0 to 767px (or 481 - 767) */
  @media only screen and (max-width: 767px) {
    .testbox { background-color: green; }    
    
    .logo {
        height: 5rem;
      }
    
    .site-title {
        font-size: 2.5rem;
      }     
    
    body { font-size: 16px; }
    
    .row { padding: 0 4%; }

    .col { 
        width: 100%;
        margin: 0 0 4% 0;
    }  
    

  }
  
  @media only screen and (max-width: 767px) and (orientation: landscape) {
    .testbox { background-color: purple; }  
    
    .logo {
        height: 5rem;
      }
    
    .site-title {
        font-size: 3rem;
      }    
    
    h1 { font-size: 150%; }
    h2 { font-size: 120%; }    
  }
  
  
  /* Small phones: from 0 to 480px */
  @media only screen and (max-width: 480px) {
    
    .testbox { background-color: blue; }  
    
    .logo {
        height: 4rem;
      }
    
    .site-title {
        font-size: 2rem;
      }        

  }