@media (max-width: 768px){

  h1  {
    font-size: 2.4em;
  }

  h2  {
    font-size: 1.8em;
  }

  h3  {
    font-size: 1.2em;
  }

  .intro h3 {
    background: #fff;
    padding: 3px 5px;
  }

  div.quote, span.author {
    padding: 1.5em;
    width: auto;
  }

  header {
    position: relative;
    text-align: center;
    padding: 0;
  }

  nav {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    padding: .4em 0em;
    /* background: #fff; */
  }

  nav li a {
    font-family: 'BebasNeueRegular';
    font-size: 1.4em;
    color: #fff;
    /* color: #222; */
  }

  nav li a.small {
    font-size: 0.7em;
    line-height: 8px;
  }


  .about {
    top: 0;
    left: 0;
    position: relative;
    max-width: 100%;
    padding: 1.6em;
  }

  #titleimage {
    background-image: url('../img/header-mobile.jpg');
    background-position: center;
  }

  #titleimage .about {
    position: absolute;
    /* width: 100%; */
    bottom: -1.5em;
    top: auto;
  }

  #titleimage .social {
    font-size: 1em;
    bottom: 1em;
    right: 1em;
  }

  .about p {
    max-width: 100%;
    width: 100%;
    display: block;
    position: relative;
    letter-spacing: normal;
  }

  .portrait {
    width: 100%;
    max-width: 100%;
    position: relative;
    display: block;
  }

  .portrait img {
    width: 100%;
    max-width: 100%;
    position: relative;
    display: block;
  }

  .row {
    max-width: 96%;
    margin: 0em auto;
  }

  .col-4, .col-6 {
    width: 100%!important;
    margin: .4em auto;
    border: none;
  }

  .col-3, .col-2 {
    width: 50%;
    border: none;
    min-height: 142px;
  }

  div.space {
    height: 2em;
  }

  .work span {
    visibility: visible;
    font-size: 1em;
    bottom: .8em;
  }

  .touch a {
    font-size: 1em;
    padding: 6px 10px;
  }

  .clients img {
    max-width: 90%;
    margin: 0 auto;
  }

  .project img {
    margin: .5em auto;
  }

  .logo-bottom img  {
    bottom: .5em;
  }

  #contact {
    background-image: url('../img/contact-mobile.jpg');
    background-position: left bottom;
  }

  #contact .social {
    bottom: 2.6em
  }

  #contact .details {
    bottom: .2em
  }

  .details {
      position: absolute;
      bottom: .4em!important;
  }

  .details-right {
    right: .5em;
    width: 100%;
    text-align: center;
  }

  .details ul li {
    font-size: 1em;
  }

  .details-left {
    left: .5em;
    right: .5em;
    text-align: center;
  }

  .instagram {
    overflow-x: hidden;
  }
}