@media only screen and (max-width: 1110px) {
  .map{
    width: 40%;
  }

  .towns{
    width: 60%;
  }
}

@media only screen and (max-width: 960px) {
  #aggregates-1-4{
    display: none;
  }

  #aggregates-1-3{
    display: block;
  }
}

@media only screen and (max-width: 935px) {
  .towns li{
    font-size: 15px
  }

  .towns{
    width: 65%;
    padding: 0 25px;
  }

  .map{
    padding: 0 10px;
    width: 35%;
  }

  .grab-1-4{
    display: none;
  }

  .grab-1-2{
    display: flex;
  }
}

@media only screen and (max-width: 790px) {
  .towns-1-3{
    display: none;
  }

  .towns-1-2{
    display: block;
  }

  .towns{
    width: 55%;
  }

  .map{
    width: 45%;
  }

  .aggregates-content ul li, h3{
    font-size: 17px;
  }
}

@media only screen and (max-width: 700px) {
  .home-bg{
    background: linear-gradient(to bottom right, rgba(0,0,0,0.5), rgba(0,0,0, 0.4)), url(images/booths-grab-hire.jpg);
    background-size: cover;
    background-position: top;
  }

  #call-to-action-content h1{
    font-size: 26px
  }

  #contact-button{
    font-size: 20px;
  }

  #contact-btn{
    height: 47px;
  }

  #aggregates-1-3{
    display: none;
  }

  #aggregates-1-2{
    display: block;
  }
}

@media only screen and (max-width: 680px) {
  .map{
    float: none;
    width: 100%;
  }

  .towns-1-2{
    display: none;
  }

  .towns-1-3{
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .towns ul{
    text-align: left
  }

  .contact-content .working-distance{
    width: 100%;
    padding: 0;
    display: table-footer-group;
  }

  .contact-content-inner{
    padding: 25px;
    display: table;
  }

  .contact-content-inner, .contact div{
    text-align: center;
    text-align: -webkit-center;
  }

  .contact-content-inner .left{
    float: none;
  }

  .contact{
    margin: 0;
  }

  footer p{
    font-size: 12px;
  }
}

@media only screen and (max-width: 600px) {
  .header-contact-obj:last-of-type{
    padding: 0;
  }

  nav{
    height: 100%;
    width: 24px;
  }

  nav ul{
    overflow: hidden;
    height: 0;
    display: none
  }

  nav ul li{
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
  }

  .nav-open {
    width: 90px;
  }

  nav ul.open {
    height: auto;
    position: absolute;
    margin-top: 11px;
    background-color: white;
    display: block;
  }

  nav ul li a {
    font-size: 18px;
    padding: 15px;
  }

  .container {
    display: inline-block;
    cursor: pointer;
  }

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.5s;
  }

  .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-9px, 6px);
      transform: rotate(-45deg) translate(-9px, 6px);
  }

  .change .bar2 {opacity: 0;}

  .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
  }
}

@media only screen and (max-width: 566px) {
  .towns-1-3{
    display: none;
  }

  .towns-1-2{
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  #call-to-action-content{
    text-align: center;
    text-align: -webkit-center;
  }

  #call-to-action-content h1, #contact-btn{
    float: none;
  }

  #contact-btn{
    margin-top: 10px;
  }

  .footer-container .left, .footer-container .right{
    float: none;
    text-align: center;
  }

  footer p{
    font-size: 15px;
  }
}

@media only screen and (max-width: 500px) {
  .grab-1-2{
    display: block;
    padding: 20px 20px 0 20px;
  }

  .grab-1-2:last-child{
    padding: 0 20px;
  }

  .grab-1-2 .col-1-2{
    width: 100%
  }

  .grab-1-2 .services-table{
    padding: 0 0 20px ;
  }
}

@media only screen and (max-width: 450px) {
  #header-content{
    padding: 10px 25px;
  }

  .nav-open{
    width: 115px;
  }

  .home-bg{
    height: 60vh;
  }

  #home-spacer{
    height: 50vh
  }

  .grab-hire-bg{
    height: 50vh;
  }

  .aggregates-bg{
    height: 50vh;
  }

  #services-spacer{
    height: 45vh
  }

  .contact-bg{
    height: 50vh;
  }

  #contact-spacer{
    height: 45vh
  }

  #aggregates-1-2{
    display: none;
  }

  #aggregates-1{
    display: block;
  }

  .aggregates-content ul img {
    width: 50%;
    height: auto;
  }
}

@media only screen and (max-width: 400px) {
  .working-distance{
    padding: 25px 10px;
  }

  .map, .towns{
    padding: 0;
  }
}

@media only screen and (max-width: 350px) {
  .contact-content-inner{
    padding: 0
  }

  .working-distance h1, .working-distance h3{
    padding: 0 25px;
  }
}