
@media (max-width:1024px){
    html{
      font-size: 50%;
    }
    .description{
      max-width: 45%;
      right: 20%;
      left: auto;
      width: 100%;     
      margin-top: 0;      
      margin: 30px auto;
    }
    .listing-items {
      position: absolute;
      left: auto;
      top: 50%;     
    }
    .footer-map{     
        padding-top: 1px;
      }     
      .states-nav ul li:after{
        top: 0;
      }
   .megamenu.active{         
     visibility: visible;
     opacity: 1;
   }
  }
  @media (max-width:992px){
    .listing-items {       
        top: 66%;       
      }
    .description{
      max-width: 60%;
      right: 0;
      left: auto;
    } 

      #toggle {
        width: 28px;
        height: 30px;    
        margin-left: auto;
      }
      
      #toggle div {
        width: 100%;
        height: 5px;
        background: #000;
        margin: 4px auto;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
      }
      
      #toggle.on .one {
        -webkit-transform: rotate(45deg) translate(5px, 5px);
            -ms-transform: rotate(45deg) translate(5px, 5px);
                transform: rotate(45deg) translate(5px, 5px);
      }
      
      #toggle.on .two {
        opacity: 0;
      }
      
      #toggle.on .three {
        -webkit-transform: rotate(-45deg) translate(7px, -8px);
            -ms-transform: rotate(-45deg) translate(7px, -8px);
                transform: rotate(-45deg) translate(7px, -8px);
      }
    
    #menu {
      color: white;
      border: 1px solid white;
      width: 150px;
      height: 100px;
      padding: 10px;
      border-radius: 3px;
      line-height: 100px;
      text-align: center;
      margin: auto;
      transition: 0.3s ease;
      display: none;
      -webkit-transition: 0.3s ease;
      -moz-transition: 0.3s ease;
      -ms-transition: 0.3s ease;
      -o-transition: 0.3s ease;
  }
  
    #header-nav{
      position: fixed;
      left: 0;
      top: 0;
      background: #fff;
      height: 100%;
      z-index: 2;
      width: 100%;
      max-width: 290px;
      padding-top: 50px;
      border-right: 1px solid #eee;
      left: -100%;
      -webkit-transition: 0.3s ease;
      -moz-transition: 0.3s ease;
      -ms-transition: 0.3s ease;
      -o-transition: 0.3s ease;
    }
    #header-nav.active{
      left: 0;
    }
    
    #header-nav li{
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    #header-nav li a{
      margin-left: 0;
    }
  }

  @media (max-width:576px){
    html{
      font-size: 45%;
    }
    .states-nav {
      padding:0 20px;
    }
    .states-nav ul li{
      margin: 6px 15px;
    }
   
    .states-nav ul li a{
      font-size: 2rem;
    }
    .listing-items {
      transform: none;
      margin-top: 0;
      right: 10px;
      bottom: 0%;
      top: auto;
    }
    .listing-items ul a{
      font-size: 14px;
    }
    .states-nav ul li:after {      
      height: 20px;            
      top: 0px;
      left: -17px;      
  }
  .description {
    max-width: 100%;
    position: static;
  }
  .megamenu .sub-dropdown{
    position: static;
    display: none;
  }
  .megamenu .sub-dropdown.active{    
    display: block;
  }
}
@media (max-width: 374px){
  .listing-items {      
      position: static;
  }
}