/*.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}*/

/* APPEARANCE EFFECT */
@keyframes appear {
	0% {opacity:0; }
	100% {opacity:1; }
}

.appear {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	transition: none;
	-webkit-animation-name: appear;
	animation-name: appear;
}

@keyframes disappear {
	0% {opacity:1; }
	100% {opacity:0; }
}

.disappear {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	transition: none;
	-webkit-animation-name: disappear;
	animation-name: disappear;
}

/* FLASH EFFECT */
@keyframes flash {
	0%, 100% { opacity:1; }
	50%   {opacity:0; }
}
.flash {
	transition: none;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-name: flash;
	animation-name: flash;
	animation-iteration-count: 5;
}

/* FLASH-BOXSHADOW EFFECT */
@keyframes flash-boxshadow {
	0%, 100% { opacity:1; box-shadow: 0 0 1rem .8rem rgba(255,255,224,1);}
	50%   {opacity:0; box-shadow: 0 0 1rem .8rem rgba(255,255,224,1);}
}
.flash-boxshadow {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	animation-iteration-count: 5;
	transition: none;
	-webkit-animation-name: flash-boxshadow;
	animation-name: flash-boxshadow;
}
 
/* FADE-IN-LEFT EFFECT */
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0.1;
		-webkit-transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.fadeInLeft {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	animation-iteration-count: 1;
}

/* FADE-IN-TOP EFFECT */
@-webkit-keyframes fadeInTop {
	0% {
		opacity: 0.1;
		-webkit-transform: translateY(-30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes fadeInTop {
	0% {
		opacity: 0;
		transform: translateY(-30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.fadeInTop {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInTop;
	animation-name: fadeInTop;
	animation-iteration-count: 1;
}
 
/* FADE-IN-BOTTOM EFFECT */
@-webkit-keyframes fadeInBottom {
	0% {
		opacity: 0.1;
		-webkit-transform: translateY(30px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.fadeInBottom {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInBottom;
	animation-name: fadeInBottom;
	animation-iteration-count: 1;
}
 
/* FADE-IN-RIGHT EFFECT */
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0.1;
		-webkit-transform: translateX(30px);
	}
	100% {
	   opacity: 1;
	   -webkit-transform: translateX(0);
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.fadeInRight {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
	animation-iteration-count: 1;
}

/* WIGGLE EFFECT */
@-webkit-keyframes wiggle {
	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);}
}
@keyframes wiggle {
	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);}
}
.wiggle {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: wiggle;
	animation-name: wiggle;
	animation-iteration-count: 1;
}

/* ZOOM IN EFFECT */
@-webkit-keyframes zoomIn {
	0%, 50%, 100% {-webkit-transform: scale(1);}
	10% {-webkit-transform: scale(0.90);}
	20% {-webkit-transform: scale(0.80);}
	30% {-webkit-transform: scale(0.70);}
	40% {-webkit-transform: scale(0.85);}
	60% {-webkit-transform: scale(1.2);}
	70% {-webkit-transform: scale(1.35);}
	80% {-webkit-transform: scale(1.15);}
	90% {-webkit-transform: scale(1.05);}
}
@keyframes zoomIn {
	0%, 50%, 100% {transform: scale(1);}
	10% {transform: scale(0.90);}
	20% {transform: scale(0.80);}
	30% {transform: scale(0.70);}
	40% {transform: scale(0.85);}
	60% {transform: scale(1.2);}
	70% {transform: scale(1.35);}
	80% {transform: scale(1.15);}
	90% {transform: scale(1.05);}
}
.zoomIn {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	animation-iteration-count: 1;
}