/* ===================================
   BASE ANIMATION
=================================== */

.animate{
	opacity:0;
	transition:all 1s ease;
	will-change:transform, opacity;
}


/* ===================================
   FADE ANIMATIONS
=================================== */

.fadein{
	opacity:0;
	transform:translateY(30px);
	transition:all .8s ease;
}

.fadein.show{
	opacity:1;
	transform:translateY(0);
}
/********************/

/* Fade Up */
.fade-up{
	transform:translateY(80px);
}
.fade-up.show{
	opacity:1;
	transform:translateY(0);
}

/* Fade Down */
.fade-down{
	transform:translateY(-80px);
}
.fade-down.show{
	opacity:1;
	transform:translateY(0);
}

/* Fade Left */
.fade-left{
	transform:translateX(-100px);
}
.fade-left.show{
	opacity:1;
	transform:translateX(0);
}

/* Fade Right */
.fade-right{
	transform:translateX(100px);
}
.fade-right.show{
	opacity:1;
	transform:translateX(0);
}


/* ===================================
   SLIDE ANIMATIONS
=================================== */

/* Slide Up */
.slide-up{
	transform:translateY(150px);
}
.slide-up.show{
	opacity:1;
	transform:translateY(0);
}

/* Slide Down */
.slide-down{
	transform:translateY(-150px);
}
.slide-down.show{
	opacity:1;
	transform:translateY(0);
}

/* Slide Left */
.slide-left{
	transform:translateX(-200px);
}
.slide-left.show{
	opacity:1;
	transform:translateX(0);
}

/* Slide Right */
.slide-right{
	transform:translateX(200px);
}
.slide-right.show{
	opacity:1;
	transform:translateX(0);
}


/* ===================================
   ZOOM ANIMATIONS
=================================== */

/* Zoom In */
.zoom-in{
	transform:scale(.7);
}
.zoom-in.show{
	opacity:1;
	transform:scale(1);
}

/* Zoom Out */
.zoom-out{
	transform:scale(1.3);
}
.zoom-out.show{
	opacity:1;
	transform:scale(1);
}

/* Zoom In Small */
.zoom-small{
	transform:scale(.9);
}
.zoom-small.show{
	opacity:1;
	transform:scale(1);
}


/* ===================================
   ROTATE ANIMATIONS
=================================== */

/* Rotate Left */
.rotate-left{
	transform:rotate(-10deg) scale(.9);
}
.rotate-left.show{
	opacity:1;
	transform:rotate(0deg) scale(1);
}

/* Rotate Right */
.rotate-right{
	transform:rotate(10deg) scale(.9);
}
.rotate-right.show{
	opacity:1;
	transform:rotate(0deg) scale(1);
}


/* ===================================
   FLIP ANIMATIONS
=================================== */

/* Flip X */
.flip-x{
	transform:perspective(400px) rotateX(90deg);
}
.flip-x.show{
	opacity:1;
	transform:perspective(400px) rotateX(0deg);
}

/* Flip Y */
.flip-y{
	transform:perspective(400px) rotateY(90deg);
}
.flip-y.show{
	opacity:1;
	transform:perspective(400px) rotateY(0deg);
}


/* ===================================
   BLUR ANIMATIONS
=================================== */

/* Blur In */
.blur-in{
	filter:blur(15px);
	transform:scale(.9);
}
.blur-in.show{
	opacity:1;
	filter:blur(0);
	transform:scale(1);
}


/* ===================================
   BOUNCE ANIMATIONS
=================================== */

/* Bounce Up */
.bounce-up{
	transform:translateY(100px);
}
.bounce-up.show{
	opacity:1;
	transform:translateY(0);
	animation:bounceUp 1s ease;
}

@keyframes bounceUp{
	0%{transform:translateY(100px);}
	60%{transform:translateY(-20px);}
	100%{transform:translateY(0);}
}


/* Bounce Left */
.bounce-left{
	transform:translateX(-100px);
}
.bounce-left.show{
	opacity:1;
	transform:translateX(0);
	animation:bounceLeft 1s ease;
}

@keyframes bounceLeft{
	0%{transform:translateX(-100px);}
	60%{transform:translateX(20px);}
	100%{transform:translateX(0);}
}


/* ===================================
   ELASTIC ANIMATION
=================================== */

.elastic{
	transform:scale(.5);
}
.elastic.show{
	opacity:1;
	transform:scale(1);
	animation:elasticAnim 1s ease;
}

@keyframes elasticAnim{
	0%{transform:scale(.5);}
	60%{transform:scale(1.1);}
	80%{transform:scale(.95);}
	100%{transform:scale(1);}
}


/* ===================================
   FLOAT ANIMATION
=================================== */

.float-up.show{
	opacity:1;
	animation:floatUp 3s ease-in-out infinite;
}

@keyframes floatUp{
	0%{transform:translateY(0);}
	50%{transform:translateY(-15px);}
	100%{transform:translateY(0);}
}


/* ===================================
   STAGGER DELAYS
=================================== */

.delay-1{
	transition-delay:.2s;
}

.delay-2{
	transition-delay:.4s;
}

.delay-3{
	transition-delay:.6s;
}

.delay-4{
	transition-delay:.8s;
}

.delay-5{
	transition-delay:1s;
}


/* ===================================
   SPEED CONTROL
=================================== */

.speed-fast{
	transition-duration:.5s;
}

.speed-slow{
	transition-duration:1.5s;
}

.speed-extra-slow{
	transition-duration:2s;
}