/* fade in class */
.fade_in {
	-webkit-animation: fadein 1.5s forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.5s forwards; /* Firefox < 16 */
	-ms-animation: fadein 1.5s forwards; /* Internet Explorer */
	-o-animation: fadein 1.5s forwards; /* Opera < 12.1 */
	animation: fadein 1.5s forwards;
}

.fade_in_fast {
	-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 0.5s; /* Firefox < 16 */
	-ms-animation: fadein 0.5s; /* Internet Explorer */
	-o-animation: fadein 0.5s; /* Opera < 12.1 */
	animation: fadein 0.5s;
}

.delay_1s { animation-delay: 1s; }
.delay_2s { animation-delay: 2s; }
.delay_3s {	animation-delay: 3s; }

/* reveal effect items */
.reveal {
  position: relative;
  transform: translateY(80px);
  opacity: 0;
  transition: 0.5s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
}

.reveal_up {
  animation: reveal_up 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.zoom_out {
	 animation: zoom-out 12s ease-out ;
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

/* animations */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; animation-play-state:paused; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; animation-play-state:paused; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; animation-play-state:paused; }
}

@keyframes run {
	from {  opacity: 0; left: -50%; }
	to   {  opacity: 1; left: 0; animation-play-state:paused; }
}

@keyframes reveal_up {
  from {  opacity: 0; transform: translate(0,20%); }
  to { opacity: 1; transform: translate(0,0);  }
}

@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}


@keyframes zoom-out {
  0% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}