@import url(http://fonts.googleapis.com/css?family=Lato:300,100,400);





a.link {

  color: #C4290D

}



h1 {

  font-size: 42px;

  margin: 0;

  font-weight: 300;

  margin-bottom: 30px;

  letter-spacing: -1px;

  text-align: center

}



.portfolio-items {

  height: 400px;

  overflow-x: scroll;

  overflow-y: hidden;

  white-space: nowrap;

  margin-bottom: 30px;

  position: relative

}



.portfolio-items > li {

  display: inline-block;

  vertical-align: top

}



.portfolio-li-item {

  width: 300px;

  height: 202px;

  margin: 150px 20px 0;

  padding: 5px;

  border-radius: 2px;

  background-color: white;

  font-size: 14px;

  opacity: 0;

  position: relative;

  top: -300px;

  box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);

  -webkit-transform: rotate(-135deg);

  -ms-transform: rotate(-135deg);

  -o-transform: rotate(-135deg);

  transform: rotate(-135deg);

  -webkit-transition: all .3s ease, opacity 2s ease,  top 1s ease;

  -o-transition: all .3s ease, opacity 2s ease,  top 1s ease;

  transition: all .3s ease, opacity 2s ease,  top 1s ease

}



.portfolio-items .item:nth-child(even) {

  margin-top: 100px

}



.portfolio-items .item:hover {

  height: 270px;

  padding: 15px;

  -webkit-transform: translateY(-68px);

  -ms-transform: translateY(-68px);

  -o-transform: translateY(-68px);

  transform: translateY(-68px)

}



.portfolio-items .item:hover .date {

  -webkit-transform: translate3d(0, 61px, 0);

  -ms-transform: translate3d(0, 61px, 0);

  -o-transform: translate3d(0, 61px, 0);

  transform: translate3d(0, 61px, 0)

}



 .portfolio-items .item:hover figcaption {

  -webkit-animation: show .25s ease-in .120s forwards;

  -o-animation: show .25s ease-in .120s forwards;

  animation: show .25s ease-in .120s forwards

}



 .portfolio-items .item:hover p:nth-of-type(1) span {

  -webkit-animation: slideOut .25s ease-out .15s forwards;

  -o-animation: slideOut .25s ease-out .15s forwards;

  animation: slideOut .25s ease-out .15s forwards

}



.portfolio-items .item:hover p:nth-of-type(2) span {

  -webkit-animation: slideOut .2s  ease-out .3s forwards;

  -o-animation: slideOut .2s  ease-out .3s forwards;

  animation: slideOut .2s  ease-out .3s forwards

}



.portfolio-items .item:hover .view {

  height: 170px

}



 .portfolio-items .item:hover .view img {

  top: -20px;

  left: -20px

}



.falldown {

  top: 0;

  opacity: 1;

  -webkit-transform: rotate(0);

  -ms-transform: rotate(0);

  -o-transform: rotate(0);

  transform: rotate(0)

}



.portfolio-items .item figure {

  width: 100%;

  height: 100%

}



.portfolio-items .item figure .view {

  overflow: hidden;

  width: 100%;

  height: 190px;

  position: relative;

}



.portfolio-items .item figure .view img {

  width: 300px;

  height: 190px;

  -webkit-transition: width .3s ease;

  -o-transition: width .3s ease;

  transition: width .3s ease;

  position: absolute;

}



figcaption {

  height: 60px;

  width: 100%;

  padding: 0;

  position: absolute;

  bottom: 0;

  overflow: hidden;

  opacity: 0;

}



figcaption p {

  line-height: 25px !important;

  font: bold 12px/18px "Arial", sans-serif;

  text-transform: uppercase;

  padding: 0 10px;

  margin: 5px 0;

  width: 95%;

  background-color: #f0f0f0;

  color: #333;

}



figcaption span {

  left: -100%;

  opacity: 0;

}



figcaption a {

  color: #CC320F;

}



.date {

  z-index: 1;

  width: 50px;

  height: 30px;

  line-height: 30px;

  color: #fff;

  font-weight: bold;

  text-align: center;

  border-radius: 1px;

  background-color: #CC320F;

  position: absolute;

  bottom: 30px;

  left: 15px;

  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

  -o-transition: -o-transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

  transition: -webkit-transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

  transition: -ms-transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

  transition: -o-transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

  transition: transform 0.5s cubic-bezier(0.12, 1.6, 0.91, 0.92);

}



@keyframes slideOut {

  0% {

    left: -100%;

    opacity: 0;

  }



  95% {

    left: 0;

    opacity: 0.2;

  }



  100% {

    opacity: 1;

    left: 0;

  }

}



@keyframes show {

  to {

    opacity: 1;

  }

}



.portfolio-items::-webkit-scrollbar {

  width: 7px;

  height: 7px;

  cursor: pointer;

}



.portfolio-items::-webkit-scrollbar-track {

  background-color: #ddd;

  border-radius: 10px;

}



.portfolio-items::-webkit-scrollbar-thumb {

  border-radius: 10px;

  background-color: #C4290D;

}



@-webkit-keyframes slideOut {

  0% {

    left: -100%;

    opacity: 0;

  }



  95% {

    left: 0;

    opacity: 0.2;

  }



  100% {

    opacity: 1;

    left: 0;

  }

}



@-o-keyframes slideOut {

  0% {

    left: -100%;

    opacity: 0;

  }



  95% {

    left: 0;

    opacity: 0.2;

  }



  100% {

    opacity: 1;

    left: 0;

  }

}



@-webkit-keyframes show {

  to {

    opacity: 1

  }

}



@-o-keyframes show {

  to {

    opacity: 1

  }

}