@media only screen and (max-width: 1200px){
  .row{
    margin: 0 15px;
  }
  .hero-text-box{
    width: 90%;
  }
}

@media only screen and (max-width: 1024px){
  .mobile-menu span{
    display: block;
  }
  .main-nav{
    display: none;
  }
  html{
    font-size: 57.5%;
  }
  .client-photo{
    width: 100%;
    float: none;
    text-align: center;
  }
  .client-review{
    width: 100%;
    float: none;
    text-align: center;
  }
  .contact-section form{
    width: 100%;
    margin-left: 0;
  }
}

@media only screen and (max-width: 980px){
  .span_1_of_4{
    width: 49.2%;
  }
  .span_1_of_4:nth-child(3){
    margin-left: 0;
  }
  html{
    font-size: 62.5%;
  }
}

@media only screen and (max-width: 768px){
  .little-description{
    width: 100%;
    margin-left: 0;
  }

  h1{
    font-size: 3.5rem;
  }

  h2{
    font-size: 3rem;
  }

  h3{
    font-size: 2rem;
  }

  .portfolio-filter{
    margin: 4.5rem 1.5rem;
  }
}

@media only screen and (max-width: 480px){
  .span_1_of_4{
    width: 100%;
  }
  h1{
    font-size: 3rem;
  }

  h2{
    font-size: 2.5rem;
  }

  h3{
    font-size: 2rem;
  }

  .portfolio-filter{
    margin: 4.5rem .1rem;
    width: 100%;
  }
 .portfolio-filter button {
    font-size: 1.2rem;
  }
}