@keyframes grid-h {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}
@keyframes grid-v {
  0% {
    top: -100%;
  }
  100% {
    top: 0%;
  }
}
* {
  box-sizing: border-box;
}
a {
  color: #d6d6d6;
}
body {
  width: 100%;
  overflow: hidden;
  background: #000;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: 'Josefin Slab';
  font-weight: 400;
  color: #d6d6d6;
}
.plus {
  font-weight: 600;
}
.nav {
  width: 90%;
  height: 60px;
  color: #d6d6d6;
  line-height: 60px;
  position: fixed;
  left: 10%;
  z-index: 5000;
  top: 0px;
}
.nav .left {
  width: 35%;
  height: 100%;
  float: left;
  text-align: left;
}
.nav .left .plus-wrapper {
  text-align: center;
  display: inline-block;
  position: relative;
  float: left;
}
.nav .left .plus-wrapper .plus {
  position: relative;
  bottom: 15px;
  opacity: 0;
  cursor: pointer;
  font-size: 26px;
  font-weight: 600;
  -webkit-transition: bottom 0.3s linear, opacity 0.3s ease-in, color 0.3s linear, transform 0.3s linear;
  -moz-transition: bottom 0.3s linear, opacity 0.3s ease-in, color 0.3s linear, transform 0.3s linear;
  -ms-transition: bottom 0.3s linear, opacity 0.3s ease-in, color 0.3s linear, transform 0.3s linear;
  -o-transition: bottom 0.3s linear, opacity 0.3s ease-in, color 0.3s linear, transform 0.3s linear;
  color: #d6d6d6;
}
.nav .left .plus-wrapper .plus.show {
  opacity: 1;
  bottom: 0px;
}
.nav .left .plus-wrapper .plus.show:hover {
  opacity: 1;
}
.nav .left .plus-wrapper .plus.menu-show {
  color: #414141;
  -webkit-transform: rotate(45deg) scale(1) skew(0) translate(0);
  -moz-transform: rotate(45deg) scale(1) skew(0) translate(0);
  -o-transform: rotate(45deg) scale(1) skew(0) translate(0);
  -ms-transform: rotate(45deg) scale(1) skew(0) translate(0);
  transform: rotate(45deg) scale(1) skew(0) translate(0);
}
.nav .left .plus-text {
  opacity: 0;
  position: relative;
  cursor: pointer;
  padding-left: 20px;
  bottom: 23%;
  text-decoration: underline;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}
.nav .left .plus-text.show {
  opacity: 1;
  bottom: 0%;
}
.nav .left .plus-text.show.recede {
  -webkit-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -moz-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -o-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -ms-transform: rotate(0) scale(0.75) skew(0) translate(0);
  transform: rotate(0) scale(0.75) skew(0) translate(0);
  opacity: 0.05;
  bottom: -23%;
}
.nav .right {
  width: 50%;
  height: 100%;
  float: left;
  text-align: right;
  padding-right: 20px;
}
.nav .right .intro-email {
  opacity: 0;
  position: relative;
  bottom: 23%;
  margin: 0 auto 0 auto;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}
.nav .right .intro-email.show {
  opacity: 1;
  bottom: 0%;
}
.nav .right .intro-email.show.recede {
  -webkit-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -moz-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -o-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -ms-transform: rotate(0) scale(0.75) skew(0) translate(0);
  transform: rotate(0) scale(0.75) skew(0) translate(0);
  opacity: 0.05;
  bottom: -23%;
}
#section1 {
  width: 100%;
  position: relative;
  text-align: center;
}
.wrapper {
  color: #d6d6d6;
  font-size: 10px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #000000 url(../images/bg-512x288.png?v=21) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: rotate(0) scale(1) skew(0) translate(0);
  -moz-transform: rotate(0) scale(1) skew(0) translate(0);
  -o-transform: rotate(0) scale(1) skew(0) translate(0);
  -ms-transform: rotate(0) scale(1) skew(0) translate(0);
  transform: rotate(0) scale(1) skew(0) translate(0);
  position: fixed;
  -webkit-transition: opacity 0.5s ease-in, background-size 0.5s ease-in, transform 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in, background-size 0.5s ease-in, transform 0.5s ease-in;
  -ms-transition: opacity 0.5s ease-in, background-size 0.5s ease-in, transform 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in, background-size 0.5s ease-in, transform 0.5s ease-in;
}
.wrapper .credit {
  display: none;
  position: fixed;
  bottom: 5px;
  left: 5px;
}
.wrapper .credit a {
  color: #d6d6d6;
  text-decoration: underline;
}
.wrapper.show {
  opacity: 0.5;
}
.wrapper.zoom {
  -webkit-transform: rotate(0) scale(1.2) skew(0) translate(0);
  -moz-transform: rotate(0) scale(1.2) skew(0) translate(0);
  -o-transform: rotate(0) scale(1.2) skew(0) translate(0);
  -ms-transform: rotate(0) scale(1.2) skew(0) translate(0);
  transform: rotate(0) scale(1.2) skew(0) translate(0);
}
.intro {
  position: relative;
  top: 60px;
  margin: 0 auto;
  width: 80%;
  max-width: 500px;
}
.intro ._1 {
  position: relative;
  top: -30px;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  font-size: 28px;
}
.intro ._1.show {
  top: 0;
  opacity: 1;
}
.intro ._1.recede {
  -webkit-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -moz-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -o-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -ms-transform: rotate(0) scale(0.75) skew(0) translate(0);
  transform: rotate(0) scale(0.75) skew(0) translate(0);
  opacity: 0.05;
  top: 20px;
}
.intro ._2 {
  position: relative;
  top: -30px;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  font-size: 18px;
  left: 50px;
}
.intro ._2.show {
  top: 0;
  opacity: 1;
}
.intro ._2.recede {
  -webkit-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -moz-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -o-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -ms-transform: rotate(0) scale(0.75) skew(0) translate(0);
  transform: rotate(0) scale(0.75) skew(0) translate(0);
  opacity: 0.05;
  top: 20px;
  left: 40px;
}
.intro ._3 {
  position: relative;
  top: 30px;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  font-size: 18px;
}
.intro ._3.show {
  top: 60px;
  opacity: 1;
}
.intro ._3.recede {
  -webkit-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -moz-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -o-transform: rotate(0) scale(0.75) skew(0) translate(0);
  -ms-transform: rotate(0) scale(0.75) skew(0) translate(0);
  transform: rotate(0) scale(0.75) skew(0) translate(0);
  opacity: 0.05;
  top: 20px;
}
.desaturate {
  -webkit-filter: grayscale(85%) blur(4px);
  filter: grayscale(85%) blur(4px);
}
.menu {
  position: fixed;
  overflow-x: scroll;
  top: -100%;
  width: 100%;
  height: 100%;
  z-index: 2001;
  background-color: rgba(244, 244, 244, 0.7);
  -webkit-transition: top 0.3s ease-out;
  -moz-transition: top 0.3s ease-out;
  -ms-transition: top 0.3s ease-out;
  -o-transition: top 0.3s ease-out;
}
.menu.show {
  top: 0;
}
.menu .grid-header {
  width: 100%;
  height: 50px;
}
.menu .grid {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  overflow: auto;
}
.menu .grid .item {
  position: relative;
  width: 50%;
  padding-bottom: 50%;
  float: left;
}
.menu .grid .item .item-inner {
  box-shadow: 0px 0px 10px #333333;
  -webkit-box-shadow: 0px 0px 10px #333333;
  -moz-box-shadow: 0px 0px 10px #333333;
  -ms-box-shadow: 0px 0px 10px #333333;
  -o-box-shadow: 0px 0px 10px #333333;
  position: absolute;
  background: #fff;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
}
.menu .grid .item .item-inner img.full {
  width: 100%;
  height: 100%;
}
.project {
  font-size: 11px;
  color: #414141;
  width: 90%;
  margin: auto;
  position: relative;
  overflow: auto;
}
.project h1 {
  font-weight: 600;
  font-size: 14px;
}
.project .project-image {
  position: absolute;
  top: 10px;
  left: 10px;
}
.project .showcase {
  width: 100%;
  height: auto;
}
.h-line {
  position: absolute;
  z-index: 2002;
  left: -100%;
  width: 100%;
  height: 1px;
  background-color: #d6d6d6;
  opacity: 0.5;
}
.h-line.h-line--1 {
  top: 100px;
  -webkit-animation: grid-h 1.5s linear forwards 2s;
  -moz-animation: grid-h 1.5s linear forwards 2s;
  -ms-animation: grid-h 1.5s linear forwards 2s;
  -o-animation: grid-h 1.5s linear forwards 2s;
  animation: grid-h 1.5s linear forwards 2s;
}
.h-line.h-line--2 {
  top: 200px;
  -webkit-animation: grid-h 1.5s linear forwards 3s;
  -moz-animation: grid-h 1.5s linear forwards 3s;
  -ms-animation: grid-h 1.5s linear forwards 3s;
  -o-animation: grid-h 1.5s linear forwards 3s;
  animation: grid-h 1.5s linear forwards 3s;
}
.h-line.h-line--3 {
  top: 300px;
  -webkit-animation: grid-h 1.5s linear forwards 4s;
  -moz-animation: grid-h 1.5s linear forwards 4s;
  -ms-animation: grid-h 1.5s linear forwards 4s;
  -o-animation: grid-h 1.5s linear forwards 4s;
  animation: grid-h 1.5s linear forwards 4s;
}
.v-line {
  position: absolute;
  z-index: 2002;
  top: -100%;
  width: 1px;
  height: 100%;
  background-color: #d6d6d6;
  opacity: 0.5;
}
.v-line.v-line--1 {
  left: 58%;
  -webkit-animation: grid-v 1.5s linear forwards 2s;
  -moz-animation: grid-v 1.5s linear forwards 2s;
  -ms-animation: grid-v 1.5s linear forwards 2s;
  -o-animation: grid-v 1.5s linear forwards 2s;
  animation: grid-v 1.5s linear forwards 2s;
}
.v-line.v-line--2 {
  left: 84%;
  -webkit-animation: grid-v 1.5s linear forwards 3s;
  -moz-animation: grid-v 1.5s linear forwards 3s;
  -ms-animation: grid-v 1.5s linear forwards 3s;
  -o-animation: grid-v 1.5s linear forwards 3s;
  animation: grid-v 1.5s linear forwards 3s;
}
.v-line.v-line--3 {
  left: 95%;
  -webkit-animation: grid-v 1.5s linear forwards 4s;
  -moz-animation: grid-v 1.5s linear forwards 4s;
  -ms-animation: grid-v 1.5s linear forwards 4s;
  -o-animation: grid-v 1.5s linear forwards 4s;
  animation: grid-v 1.5s linear forwards 4s;
}
.align-r {
  text-align: center;
}
.align-l {
  text-align: center;
}
@media only screen and (min-width: 481px) {
  .menu .grid {
    max-width: 450px;
  }
  .menu .grid .item {
    width: 33.33%;
    padding-bottom: 33.33%;
  }
}
@media only screen and (min-width: 625px) {
  .menu .grid {
    max-width: 600px;
  }
  .menu .grid .item {
    width: 25%;
    padding-bottom: 25%;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-weight: 300;
  }
  .nav {
    width: 90%;
    margin: 0 5%;
  }
  .wrapper .credit {
    display: block;
  }
  .menu .grid {
    max-width: 750px;
  }
  .menu .grid .item {
    width: 20%;
    padding-bottom: 20%;
  }
  .intro {
    top: 120px;
  }
  .intro ._1 {
    font-size: 56px;
  }
  .intro ._2 {
    font-size: 32px;
    left: 150px;
  }
  .intro ._2.recede {
    left: 120px;
  }
  .intro ._3 {
    font-size: 20px;
  }
  .plus {
    font-size: 30px;
    font-weight: 600;
  }
  .project {
    font-size: 14px;
  }
  .project h1 {
    font-size: 18px;
    margin-top: 150px;
  }
  .project .column {
    float: left;
  }
  .project .column.float-r {
    float: right;
  }
  .project .column.image-column {
    width: 65%;
  }
  .project .column.desc-column {
    width: 35%;
  }
  .project .project-image {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .project .showcase {
    width: 100%;
    height: auto;
  }
  .align-r {
    text-align: right;
  }
  .align-l {
    text-align: left;
  }
}
@media only screen and (min-width: 1030px) {
  .menu .grid {
    max-width: 768px;
  }
  .menu .grid .item {
    width: 14.285%;
    padding-bottom: 14.285%;
  }
  .project {
    max-width: 1030px;
  }
}
@media only screen and (min-width: 1240px) {
  .menu .grid .item {
    width: 12.5%;
    padding-bottom: 12.5%;
  }
}
/*
//RETINA (2x RESOLUTION DEVICES)
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5),
			 only screen and (min-device-pixel-ratio: 1.5) {

	@import "2x.less";
}
*/