@media only screen and (max-width: 950px) {
  nav ul li a{
    padding: 10px 5px;
  }
}

@media only screen and (max-width: 850px) {
  .header-name .two{
    display: block;
  }

  nav ul li a{
    padding: 15px 5px;
  }
}

@media only screen and (max-width: 790px) {
  .header-name .one{
    font-size: 32px;
  }

  h1{
    font-size: 21px;
  }

  h2{
    font-size: 18px;
  }

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

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

  .header-name .one{
    font-size: 25px;
  }

  .header-name .two{
    font-size: 19px;
    display: inline-block;
  }

  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: 10px;
    background-color: black;
    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: #ccc;
    margin: 6px 0;
    transition: 0.5s;
    border-radius: 5px;
  }

  .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);
  }

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

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

  #contact-btn{
    height: 47px;
  }
}

@media only screen and (max-width: 680px) {
  footer p{
    font-size: 12px;
  }
}

@media only screen and (max-width: 566px) {
  #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) {
  .header-name .two{
    display: block;
  }
  nav ul.open{
    margin-top: 19px;
  }

  #call-to-action{
    background-attachment: scroll;
  }
}

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

  .nav-open{
    width: 115px;
  }

  .home-bg{
    height: 60vh;
  }

  #home-spacer{
    height: 50vh
  }

  .generic-bg{
    height: 50vh;
  }

  #services-spacer{
    height: 45vh
  }

  #contact-spacer{
    height: 45vh
  }
}