.activeup{

    -webkit-animation-name: fadeInUpSmall;

    animation-name: fadeInUpSmall;

    -webkit-animation-duration: .5s;

    animation-duration: .5s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-delay: .25s;

    animation-delay: .25s;

}



.activeleft{

    -webkit-animation-name: fadeInLeftSmall;

    animation-name: fadeInLeftSmall;

    -webkit-animation-duration: .8s;

    animation-duration: .8s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-delay: .50s;

    animation-delay: .50s;

}



.activeright{

    -webkit-animation-name: fadeInRightSmall;

    animation-name: fadeInRightSmall;

    -webkit-animation-duration: .8s;

    animation-duration: .8s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

    -webkit-animation-delay: .50s;

    animation-delay: .50s;

}



@-webkit-keyframes fadeInUpSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 25%, 0);

    transform: translate3d(0, 25%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInUpSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 25%, 0);

    transform: translate3d(0, 25%, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@-webkit-keyframes fadeInLeftSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-25%, 0, 0);

    transform: translate3d(-25%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInLeftSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(-25%, 0, 0);

    transform: translate3d(-25%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@-webkit-keyframes fadeInRightSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(125%, 0, 0);

    transform: translate3d(125%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInRightSmall {

  from {

    opacity: 0;

    -webkit-transform: translate3d(125%, 0, 0);

    transform: translate3d(125%, 0, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}

  
   

.items {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  width: 100%;

  height: 700px; 

}



.items__item img{

  max-height: 100%;

}



.items__inner {

  position: relative;

  width: 100%;

  max-width: 100%;

  height: 100%;

  background: transparent;

}

.items__layer .items__item {

  position: absolute;

}

.items__layer .items__item:after {

  content: attr(data-title);

  position: absolute;

  line-height: 20px;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 2px;

  -webkit-transition: all .5s ease;

  transition: all .5s ease;

  visibility: hidden;

  opacity: 0;

}

.items__layer .items__item:hover:after {

  visibility: visible;

  opacity: 1;

}

.items__layer:nth-child(1) .items__item {

	margin: auto;
    top: 0px;
    left: 94px;
    width: 425px;
    height: 231px;

}

.items__layer:nth-child(2) .items__item {

    top: 150px;
    left: 450px;
    width: 212px;
    height: 102px;

}

.items__layer:nth-child(3) .items__item {

    top: -10px;
    left: 695px;
    width: 338px;
    height: 292px;

}