/* HOMEPAGE PORTFOLIO 2 ANIMATION */
.og-grid li{
	opacity: 0;
}
.og-grid li.mypassion-animation{
	-webkit-animation: animation-ltr 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-ltr 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-ltr 1s 1 ease; /* Opera 12+ */
	animation:         animation-ltr 1s 1 ease; /* IE 10+ */
	opacity: 1;
}


/* ENTRY TITLE ANIMATION */
.entrytitle h4, .entrytitle p{
	opacity: 0;
}
.entrytitle.mypassion-animation h4{
	-webkit-animation: animation-ltr 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-ltr 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-ltr 1s 1 ease; /* Opera 12+ */
	animation:         animation-ltr 1s 1 ease; /* IE 10+ */
	opacity: 1;
}
.entrytitle.mypassion-animation p{
	-webkit-animation: animation-rtl 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-rtl 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-rtl 1s 1 ease; /* Opera 12+ */
	animation:         animation-rtl 1s 1 ease; /* IE 10+ */
	opacity: 1;
}

/* TIMELINE ANIMATION */
.timeline li{
	opacity: 0;
}

.timeline li.mypassion-animation{
	-webkit-animation: animation-btt 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-btt 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-btt 1s 1 ease; /* Opera 12+ */
	animation:         animation-btt 1s 1 ease; /* IE 10+ */
	opacity: 1;
}

/* PORTFOLIO-1 & BLOG ANIMATION */
.item{
	opacity: 0;
}

.item.mypassion-animation{
	-webkit-animation: animation-btt 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-btt 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-btt 1s 1 ease; /* Opera 12+ */
	animation:         animation-btt 1s 1 ease; /* IE 10+ */
	opacity: 1;
}


/* HOMEPAGE PARALLAX SERVICE ANIMATION */

.content-boxes.version-4 .article-in:hover i{
	-webkit-animation: animation-rotate 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-rotate 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-rotate 1s 1 ease; /* Opera 12+ */
	animation:         animation-rotate 1s 1 ease; /* IE 10+ */
}

/* SHOWCASE */
.showcase .add-animation{
	opacity:0;
}

.showcase .add-animation.mypassion-animation{
	-webkit-animation: animation-ltr 1s 1 ease; /* Safari 4+ */ /* linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(0.175, 0.885, 0.320, 1.275) */
	-moz-animation:    animation-ltr 1s 1 ease; /* Fx 5+ */
	-o-animation:      animation-ltr 1s 1 ease; /* Opera 12+ */
	animation:         animation-ltr 1s 1 ease; /* IE 10+ */
	opacity: 1;
}


.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
			
	animation-delay: .1s; /* W3C and Opera */
	-o-animation-delay: .1s; /* Firefox */
	-moz-animation-delay: .1s; /* Firefox */
	-webkit-animation-delay: .1s; /* Safari and Chrome */
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	   -moz-animation-duration: 2s;
	     -o-animation-duration: 2s;
	        animation-duration: 2s;
}

[animation_type=animation-appear], [animation_type=animation-btt], [animation_type=animation-ttb], [animation_type=animation-rtl], [animation_type=animation-ltr], [animation_type=animation-slide-left], [animation_type=animation-slide-right], [animation_type=animation-slide-bottom], [animation_type=animation-slide-top] { visibility:hidden; }

/*
=====================================================
	CORE ANIMATIONS
=====================================================
*/


/*appearing animation*/
@-webkit-keyframes animation-appear {
  0%   { -webkit-transform:scale(0.5); opacity: 0.1;  }
  100% { -webkit-transform:scale(1); opacity: 1; }
}
@-moz-keyframes animation-appear {
  0%   { -moz-transform:scale(0.5); opacity: 0.1;  }
  100% { -moz-transform:scale(1);opacity: 1;  }
}
@-o-keyframes animation-appear {
  0%   { -o-transform:scale(0.5); opacity: 0.1;  }
  100% { -o-transform:scale(1);  opacity: 1; }
}
@keyframes animation-appear {
  0%   { transform:scale(0.5); opacity: 0.1;  }
  100% { transform:scale(1); opacity: 1;  }
}
.animation-appear{
	-webkit-animation-name: animation-appear;
	-moz-animation-name: animation-appear;
	-o-animation-name: animation-appear;
	animation-name: animation-appear;
}

/* flash animation */
@-webkit-keyframes animation-flash {
	0%, 50%, 100% {opacity: 1;}	25%, 75% {opacity: 0;}
}
@-moz-keyframes animation-flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
@-o-keyframes animation-flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
@keyframes animation-flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}
.animation-flash {
	-webkit-animation-name: animation-flash;
	-moz-animation-name: animation-flash;
	-o-animation-name: animation-flash;
	animation-name: animation-flash;
}


@-webkit-keyframes animation-rotate {
  0%   { -webkit-transform:rotate(0deg);}
  100% { -webkit-transform:rotate(720deg);}
}
@-moz-keyframes animation-rotate {
  0%   { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(720deg);}
}
@-o-keyframes animation-rotate {
  0%   { -o-transform:rotate(0deg); }
  100% { -o-transform:rotate(720deg);}
}
@keyframes animation-rotate {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(720deg);}
}
.animation-rotate{
	-webkit-animation-name: animation-rotate;
	-moz-animation-name: animation-rotate;
	-o-animation-name: animation-rotate;
	animation-name: animation-rotate;
}


@-webkit-keyframes animation-shake {
	0%, 100% {-webkit-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes animation-shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes animation-shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes animation-shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.animation-shake {
	-webkit-animation-name: animation-shake;
	-moz-animation-name: animation-shake;
	-o-animation-name: animation-shake;
	animation-name: animation-shake;
}


@-webkit-keyframes animation-bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes animation-bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes animation-bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes animation-bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.animation-bounce {
	-webkit-animation-name: animation-bounce;
	-moz-animation-name: animation-bounce;
	-o-animation-name: animation-bounce;
	animation-name: animation-bounce;
}


@-webkit-keyframes animation-tada {
	0% {-webkit-transform: scale(1);}
	10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
	100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes animation-tada {
	0% {-moz-transform: scale(1);}
	10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
	100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes animation-tada {
	0% {-o-transform: scale(1);}
	10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
	100% {-o-transform: scale(1) rotate(0);}
}

@keyframes animation-tada {
	0% {transform: scale(1);}
	10%, 20% {transform: scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
	40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
	100% {transform: scale(1) rotate(0);}
}

.animation-tada {
	-webkit-animation-name: animation-tada;
	-moz-animation-name: animation-tada;
	-o-animation-name: animation-tada;
	animation-name: animation-tada;
}



@-webkit-keyframes animation-swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
	20% { -webkit-transform: rotate(15deg); }
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }
	80% { -webkit-transform: rotate(-5deg); }
	100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes animation-swing {
	20% { -moz-transform: rotate(15deg); }
	40% { -moz-transform: rotate(-10deg); }
	60% { -moz-transform: rotate(5deg); }
	80% { -moz-transform: rotate(-5deg); }
	100% { -moz-transform: rotate(0deg); }
}

@-o-keyframes animation-swing {
	20% { -o-transform: rotate(15deg); }
	40% { -o-transform: rotate(-10deg); }
	60% { -o-transform: rotate(5deg); }
	80% { -o-transform: rotate(-5deg); }
	100% { -o-transform: rotate(0deg); }
}

@keyframes animation-swing {
	20% { transform: rotate(15deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

.animation-swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: animation-swing;
	-moz-animation-name: animation-swing;
	-o-animation-name: animation-swing;
	animation-name: animation-swing;
}


@-webkit-keyframes animation-wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes animation-wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}

@-o-keyframes animation-wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}

@keyframes animation-wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.animation-wobble {
	-webkit-animation-name: animation-wobble;
	-moz-animation-name: animation-wobble;
	-o-animation-name: animation-wobble;
	animation-name: animation-wobble;
}

@-webkit-keyframes animation-pulse {
    0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes animation-pulse {
    0% { -moz-transform: scale(1); }
	50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes animation-pulse {
    0% { -o-transform: scale(1); }
	50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes animation-pulse {
    0% { transform: scale(1); }
	50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animation-pulse {
	-webkit-animation-name: animation-pulse;
	-moz-animation-name: animation-pulse;
	-o-animation-name: animation-pulse;
	animation-name: animation-pulse;
}
@-webkit-keyframes animation-flip {
	0% {
		-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
		-webkit-animation-timing-function: ease-out;
	}
	40% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	80% {
		-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
}
@-moz-keyframes animation-flip {
	0% {
		-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
		-moz-animation-timing-function: ease-out;
	}
	40% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
		-moz-animation-timing-function: ease-out;
	}
	50% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-moz-animation-timing-function: ease-in;
	}
	80% {
		-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
		-moz-animation-timing-function: ease-in;
	}
	100% {
		-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
		-moz-animation-timing-function: ease-in;
	}
}
@-o-keyframes animation-flip {
	0% {
		-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
		-o-animation-timing-function: ease-out;
	}
	40% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
		-o-animation-timing-function: ease-out;
	}
	50% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-o-animation-timing-function: ease-in;
	}
	80% {
		-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
		-o-animation-timing-function: ease-in;
	}
	100% {
		-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
		-o-animation-timing-function: ease-in;
	}
}
@keyframes animation-flip {
	0% {
		transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
		animation-timing-function: ease-in;
	}
}

.animation-flip {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: animation-flip;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: animation-flip;
	-o-backface-visibility: visible !important;
	-o-animation-name: animation-flip;
	backface-visibility: visible !important;
	animation-name: animation-flip;
}



/*fade in animation*/
@-webkit-keyframes animation-ltr {
  0%   { -webkit-transform:translate(-20%,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-ltr {
  0%   { -moz-transform:translate(-20%,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-ltr {
  0%   { -o-transform:translate(-20%,0); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-ltr {
  0%   { transform:translate(-20%,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-ltr{
	-webkit-animation-name: animation-ltr;
	-moz-animation-name: animation-ltr;
	-o-animation-name: animation-ltr;
	animation-name: animation-ltr;
}


@-webkit-keyframes animation-rtl {
  0%   { -webkit-transform:translate(20%,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-rtl {
  0%   { -moz-transform:translate(20%,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-rtl {
  0%   { -o-transform:translate(20%,0); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-rtl {
  0%   { transform:translate(20%,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-rtl{
	-webkit-animation-name: animation-rtl;
	-moz-animation-name: animation-rtl;
	-o-animation-name: animation-rtl;
	animation-name: animation-rtl;
}



@-webkit-keyframes animation-btt {
  0%   { -webkit-transform:translate(0,20%); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-btt {
  0%   { -moz-transform:translate(0,20%); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-btt {
  0%   { -o-transform:translate(0,20%); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-btt {
  0%   { transform:translate(0,20%); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-btt{
	-webkit-animation-name: animation-btt;
	-moz-animation-name: animation-btt;
	-o-animation-name: animation-btt;
	animation-name: animation-btt;
}



@-webkit-keyframes animation-ttb {
  0%   { -webkit-transform:translate(0, -20%); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-ttb {
  0%   { -moz-transform:translate(0, -20%); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-ttb {
  0%   { -o-transform:translate(0, -20%); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-ttb {
  0%   { transform:translate(0, -20%); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-ttb{
	-webkit-animation-name: animation-ttb;
	-moz-animation-name: animation-ttb;
	-o-animation-name: animation-ttb;
	animation-name: animation-ttb;
}







/*caption animation*/

@-webkit-keyframes animation-slide-right {
  0%   { -webkit-transform:translate(2000px,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-slide-right {
  0%   { -moz-transform:translate(2000px,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-slide-right {
  0%   { -o-transform:translate(2000px,0); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-slide-right {
  0%   { transform:translate(2000px,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-slide-right{
	-webkit-animation-name: animation-slide-right;
	-moz-animation-name: animation-slide-right;
	-o-animation-name: animation-slide-right;
	animation-name: animation-slide-right;
}




@-webkit-keyframes animation-slide-left {
  0%   { -webkit-transform:translate(-2000px,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-slide-left {
  0%   { -moz-transform:translate(-2000px,0); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-slide-left {
  0%   { -o-transform:translate(-2000px,0); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-slide-left {
  0%   { transform:translate(-2000px,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-slide-left{
	-webkit-animation-name: animation-slide-left;
	-moz-animation-name: animation-slide-left;
	-o-animation-name: animation-slide-left;
	animation-name: animation-slide-left;
}



@-webkit-keyframes animation-slide-top {
  0%   { -webkit-transform:translate(0,-2000px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-slide-top {
  0%   { -moz-transform:translate(0,-2000px); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-slide-top {
  0%   { -o-transform:translate(0,-2000px); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-slide-top {
  0%   { transform:translate(0,-2000px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-slide-top{
	-webkit-animation-name: animation-slide-top;
	-moz-animation-name: animation-slide-top;
	-o-animation-name: animation-slide-top;
	animation-name: animation-slide-top;
}



@-webkit-keyframes animation-slide-bottom {
  0%   { -webkit-transform:translate(0,2000px); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@-moz-keyframes animation-slide-bottom {
  0%   { -moz-transform:translate(0,2000px); opacity: 0;  }
  100% { -moz-transform:translate(0,0); opacity: 1; }
}
@-o-keyframes animation-slide-bottom {
  0%   { -o-transform:translate(0,2000px); opacity: 0;  }
  100% { -o-transform:translate(0,0); opacity: 1; }
}
@keyframes animation-slide-bottom {
  0%   { transform:translate(0,2000px); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}
.animation-slide-bottom{
	-webkit-animation-name: animation-slide-bottom;
	-moz-animation-name: animation-slide-bottom;
	-o-animation-name: animation-slide-bottom;
	animation-name: animation-slide-bottom;
}