body, html {
  font-family  : Serif;
  width        : 100%;
  height       : 100%;
  background   : #f0ede6;
}

* {
  box-sizing: border-box;
}

.preload * {
  transition    : none !important;
}

h1 {
  font-family   : Serif;
  font-size     : 35px;
  line-height   : 45px;
  color         : #4a4a4a;
  font-weight   : normal;
}

a {
  color         : #f83d46;
}

main {
  height       : 60%;
  width        : 100%;
  font-size    : 0;
}

main .column {
  font-size       : initial;
  display         :  inline-block;
  height          :  100%;
  vertical-align  : top;
}

main .content {
    width       : 65%;
    transition  : all 300ms ease;
}

main .content .copy {
  padding   : 0 100px;
  position  : relative;
  top       : 50%;
  transform : translateY(-50%);
}

main .content h1 {
  transform     : translateX(-200px);
  opacity       : 0;
  transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

main .content h1 a {
  text-decoration   : none;
  display           : inline-block;
}

main .content h1 a:after,
main .content ul li a:after {
  content           : '';
  width             : 100%;
  height            : 2px;
  display           : block;
  transition        : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  background        : #f83d46;
  transform         : translateY(-5px);
  opacity           : 0;
}

main .content h1 a:hover {
  color             : #fd6130;
}

main .content h1 a:hover:after,
main .content ul li a:hover:after  {
  background        : #fd6130;
  opacity           : 1;
  transform         : translateY(0px);
}

main .content ul {
  list-style-type   : none;
  margin-top        : 80px;
}

main .content ul li {
  display           : inline-block;
  margin-right      : 50px;
  font-size         : 11px;
  letter-spacing    : 0.25em;
  text-transform    : uppercase;
  color             : #4a4a4a;
  font-family       : Serif;
  line-height       : 25px;
}

main .content ul li a {
  display           : block;
  text-decoration   : none;
  transition        : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

main .content ul li a:hover {
  color             : #fd6130;
}


main .side {
    width       : 35%;
    height      : 100vh;
    background  : #f83d46;
    transform   : translateX(35vw);
    transition  : all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

main .side .copy {
    position      : relative;
    top           : 50%;
    transform     : translateY(-50%) translateX(15vw);
    padding-bottom: 20vh;
    padding-left  : 5vw;
    padding-right : 5vw;
    height        : 50%;
    transition    : all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

main .side .copy i {
  position      : relative;
  width         : 20px;
  height        : 20px;
  float         : right;
  margin        : 8px 0 0;
}

main .side .copy i:before,
main .side .copy i:after,
main .side .copy i span:before,
main .side .copy i span:after {
    content   : '';
    width     : 4px;
    height    : 4px;
    border    : 1px solid white;
    position  : absolute;
}

main .side .copy i:before,
main .side .copy i:after {
  top         : 0;
}

main .side .copy i:before,
main .side .copy i span:before {
  left        : 0;
}

main .side .copy i:after,
main .side .copy i span:after {
  right       : 0;
}

main .side .copy i span:before,
main .side .copy i span:after {
  bottom      : 0;
}

main .side h1 {
    color       : #f0ede6;
    display     : inline-block;
}


/*
  Everything about the footer
*/
footer {
  height      : 40%;
  background  : #4a4a4a;
  width       : 100%;
  color       : #f0ede6;
  position    : relative;
}

footer .media {
  width             : 30%;
  height            : 150%;
  background        : url(../media/me@2x.jpg) no-repeat center;
  background-size   : cover;
  position          : absolute;
  right             : 0;
  bottom            : 0;
}

footer .lists {
  width             : 70%;
  padding           : 0 100px;
  position          : relative;
  top               : 50%;
  transform         : translateY(-50%);
}

footer .lists .column {
  display           : inline-block;
  vertical-align    : top;
}

footer .lists b {
  display           : block;
  margin-bottom     : 20px;
  font-size         : 11px;
  color             : #f83d46;
  text-transform    : uppercase;
  letter-spacing    : 0.25em;
}

footer .lists .links {
  margin-right      : 50px;
}

footer .lists .clients ul {
  margin-right      : 50px;
}

footer .lists ul {
  display           : inline-block;
  vertical-align    : top;
}

footer .lists ul li {
  line-height       : 25px;
  font-size         : 13px;
}

footer .lists ul li a {
  text-decoration   : none;
  color             : #f0ede6;
}

footer .lists ul li a:hover {
  color             : #f83d46;
}


/* Animations */

  /* Main side */

  /* main .side {
    transform: translateX(35vw);
    transition  : all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  } */

  /* main .side .copy {
    transform   : translateX(15vw) translateY(-50%);
    transition  : all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  } */

  main .side.enter {
    transform: translateX(0%);
  }

  main .side.enter .copy {
    transform: translateX(0) translateY(-50%);
  }

  /* Main content */
  /* main .content h1 {
    transform     : translateX(-200px);
    opacity       : 0;
    transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  } */

  main .content ul li {
    transform     : translateX(-200px);
    opacity       : 0;
    transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) 200ms;
  }

  main .content ul li:first-child {
    transition-delay  : 150ms;
  }

  main .content.enter h1,
  main .content.enter li {
    transform     : translateX(0);
    opacity       : 1;
  }

  /* Footer */

    /* Media */
    footer {
      transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      transform     : translateY(50%);
    }

    footer.enter {
      transform     : translateY(0);
    }

    footer .links,
    footer .clients {
      transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      transform     : translateY(50%);
      opacity       : 0;
    }

    footer .clients {
      transition-delay  : 200ms;
    }

    footer.enter .links,
    footer.enter .clients {
      transform     : translateY(0);
      opacity       : 1;
    }

    footer .media {
      transition    : all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      transform     : translateX(35vw);
    }

    footer .media.enter {
      transform     : translateX(0);
    }


/* Resonsive */

@media (max-width: 600px) {
  html, body {
    height  : auto;
  }
  h1 {
      font-size   : 25px;
      line-height : 35px;
  }

  main .column {
    display     : block;
  }

  main .content .copy {
    padding     : 80px 40px;
    top         : auto;
    transform   : none;
  }

  main .content ul {
    margin      : 20px 0 0;
  }

  main .content ul li {
    display: block;
  }
  main .side {
    display: none;
  }

  main .content {
    width       : 100%;
  }

  footer .lists {
    padding     : 40px 40px;
    transform   : none;
    width       : 100%;
  }

  footer .media {
    position  : relative;
    width     : 100%;
    height    : 480px;
  }

  footer .lists .clients {
    font-size   : 0;
    margin-top  : 40px;
  }

  footer .lists .clients ul {
    width    : 50%;
    margin   : 0;
  }

 }