@charset "UTF-8";
/* CSS Document */
.work, .workbg, .list, .bg2, .resume, #mobile-back-btn, .anarrow, .portrait {
  transition: all 1s ease;
}

.feature_sample .feature, .work .features {
  transition: all .3s ease;
}
.nav, .content, .header h1, .detailwrapper {
  transition: all 1.5s ease;
}
.feature_sample .feature:hover {
  transition: all 0.3s ease;
  margin: -10px -23px 0 -23px;
  height: 130px;
}
.scroll .feature_sample .feature:hover {
  transition: all 0.3s ease;
  margin: -10px -23px 0 -23px;
  height: 183px;
}
.about {
  transition: all .3s ease-in;
}
.view, .content img {
  transition: all 2s ease;
}
.detailnav .close .anarrow {
  animation-name: openit;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
 animation-duration: 2.3s;
}
.contact {
  animation-name: slidedown;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
 animation-duration: .8s;
}
.bg1 {
  animation-name: fade;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 4s;
}
.head h3 {
  animation-name: drop;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
 animation-duration: .4s;
}
.list .category:first-child .feature {
  animation-name: swell-category;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
 animation-delay: .3s;
}
.list .feature_sample:first-child .feature {
  animation-name: swell;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
 animation-delay: .3s;
}
 .list .feature_sample:nth-child(2) .feature {
 animation-name: swell;
 animation-iteration-count: 1;
 animation-timing-function: ease-in;
 animation-duration: 0.5s;
 animation-delay: .5s;
}
 .list .feature_sample:nth-child(3) .feature {
 animation-name: swell;
 animation-iteration-count: 1;
 animation-timing-function: ease-in;
 animation-duration: 0.5s;
 animation-delay: .7s;
}
 .list .feature_sample:nth-child(4) .feature {
 animation-name: swell;
 animation-iteration-count: 1;
 animation-timing-function: ease-in;
 animation-duration: 0.5s;
 animation-delay: .9s;
}
.list .feature_sample:nth-child(5) .feature {
 animation-name: swell;
 animation-iteration-count: 1;
 animation-timing-function: ease-in;
 animation-duration: 0.5s;
 animation-delay: 1.1s;
}
.list .feature_sample:nth-child(6) .feature {
 animation-name: swell;
 animation-iteration-count: 1;
 animation-timing-function: ease-in;
 animation-duration: 0.5s;
 animation-delay: 1.3s;
}

 @keyframes openit {
 0% {
 position: absolute;
}
 10% {
    position: absolute;
    right: -20px;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 3px;
    -webkit-transform: rotate(0deg);
  /* Firefox */
    -moz-transform: rotate(0deg);
  /* IE */
    -ms-transform: rotate(0deg);
  /* Opera */
    -o-transform: rotate(0deg);
}
 80% {
  position: absolute;
    right: -20px;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 3px;
    -webkit-transform: rotate(0deg);
  /* Firefox */
    -moz-transform: rotate(0deg);
  /* IE */
    -ms-transform: rotate(0deg);
  /* Opera */
    -o-transform: rotate(0deg);
}
 100% {

}
}

 @keyframes slidedown {
 0% {
margin-top: -100px
}
 100% {
margin-top: 150px;
}
}
 @keyframes fade {
 0% {
opacity: 0;
}
 66% {
opacity: .7;
}
 100% {
opacity: .5;
}
}
 @keyframes swell {
 0% {
height: 90px;
opacity: .8;
}
 50% {
margin: -5px -10px 0 -10px;
height: 110px
}
 100% {
margin: 0;
height: 94px
}
}
 @keyframes swell-category {
 0% {
opacity: .8;
}
 50% {
margin: -5px -10px -3px -10px;
opacity: 1;
}
 100% {
margin: 0;
}
}
 @keyframes drop {
 0% {
margin-top: -30px;
animation-timing-function: ease-out;
}
 100% {
margin-top: 43px;
}
}
.focus ul li:first-child {
  animation: slidein1 1s 0s 1;
}
.focus ul li:nth-child(2) {
animation: slidein2 1.3s 0s 1;
}
.focus ul li:nth-child(3) {
animation: slidein3 1.6s 0s 1;
}
.focus ul li:nth-child(4) {
animation: slidein4 1.9s 0s 1;
}
.focus {
  animation: slidein5  .4s 0s 1;
}
 @keyframes slidein1 {
 0% {
margin-left: -800px;
}
 50% {
margin-left: -800px;
animation-timing-function: ease-in;
}
 100% {
margin-left: 0px;
}
}
 @keyframes slidein2 {
 0% {
margin-left: -800px;
}
 60% {
margin-left: -800px;
animation-timing-function: ease-in;
}
 100% {
margin-left: 0px;
}
}
 @keyframes slidein3 {
 0% {
margin-left: -800px;
}
 70% {
margin-left: -800px;
animation-timing-function: ease-in;
}
 100% {
margin-left: 0px;
}
}
 @keyframes slidein4 {
 0% {
margin-left: -800px;
}
 80% {
margin-left: -800px;
animation-timing-function: ease-in;
}
 100% {
margin-left: 0px;
}
}
 @keyframes slidein5 {
 0% {
margin-left: -53px;
}
 100% {
margin-left: 0px;
animation-timing-function: ease-in;
}

}
.view div {
  animation: open 1s 0s 1;
}
 @keyframes open {
 0% {
height: 0px;
}
 100% {
height: auto;
animation-timing-function: ease-in;
}
}