@media (max-width: 979px) {
  section {
    overflow-y: scroll;
    /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
  }
  section h1 {
    display: none;
  }
  section h1.fixed {
    display: none;
  }
  .service {
    width: 94%;
    margin: 0 3% 30px 3%;
  }
  .service > svg {
    margin-right: 3%;
  }
  .portfolio {
    width: 92%;
    margin: 0 4%;
  }
  .contact .column {
    float: none;
    width: 92%;
    margin: 0 4%;
  }
  .contact .column:last-child {
    display: none;
  }
}
@media (max-width: 767px) {
  h2 {
    margin: 0 0 3px 0;
    font-size: 18px;
  }
  header .tag a {
    font-size: 13px;
    line-height: 15px;
  }
  header .tag p {
    font-size: 10px;
    line-height: 12px;
  }
  header .buttons > div span {
    font-size: 13px;
  }
  section {
    overflow-y: scroll;
    /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
  }
  section h1 {
    display: none;
  }
  section h1.fixed {
    display: none;
  }
  .service {
    width: 94%;
    margin: 0 3% 30px 3%;
  }
  .service > svg {
    margin-right: 3%;
  }
  .service > div > div {
    line-height: 18px;
    font-size: 13px;
  }
  .service > div > div .tech span {
    opacity: 1;
  }
  .service > div > div .tech:before {
    content: 'Technologies';
  }
  .portfolio {
    width: 92%;
    margin: 0 4%;
  }
  .portfolio > div {
    display: block;
    margin: 0 auto 20px auto;
  }
  .contact .column {
    float: none;
    width: 88%;
    margin: 0 6%;
  }
  .contact .column:last-child {
    display: none;
  }
  .overlay-content .close {
    font-size: 28px;
    line-height: 28px;
    right: 10px;
    top: 5px;
  }
}
@media (max-height: 450px) {
  header .tag {
    padding-top: 2px;
  }
  header .tag a {
    font-size: 11px;
    line-height: 13px;
  }
  header .tag p {
    font-size: 9px;
    line-height: 10px;
  }
}