/* Animation: classes used by javascript to add predefined animations to elements */
/* ======================================================== */
.ipsAnim {
	{prefix="animation-duration" value="0.5s"}
	{prefix="animation-fill-mode" value="both"}
	{prefix="animation-timing-function" value="ease-out"}
	/* By setting an invisible 3d transform, we can cause */
	/* browsers to render the animation with the GPU instead */
	{prefix="transform" value="translate3d(0,0,0)"}
}

.ipsAnim.ipsAnim_fast {
	{prefix="animation-duration" value="0.25s"}
}

.ipsAnim.ipsAnim_slow {
	{prefix="animation-duration" value="0.8s"}
}

.ipsAnim.ipsAnim_verySlow {
	{prefix="animation-duration" value="1.2s"}
}

/* ======================================================== */
/* FADE IN/OUT */
@-webkit-keyframes fadeIn {	0% { opacity: 0; }	100% { opacity: 1; } }
@-moz-keyframes fadeIn {	0% { opacity: 0; }	100% { opacity: 1; } }
@-o-keyframes fadeIn {		0% { opacity: 0; }	100% { opacity: 1; } }
@keyframes fadeIn {			0% { opacity: 0; }	100% { opacity: 1; } }

@-webkit-keyframes fadeOut {0% { opacity: 1; }	100% { opacity: 0; } }
@-moz-keyframes fadeOut {	0% { opacity: 1; }	100% { opacity: 0; } }
@-o-keyframes fadeOut {		0% { opacity: 1; }	100% { opacity: 0; } }
@keyframes fadeOut {		0% { opacity: 1; }	100% { opacity: 0; } }

@-webkit-keyframes fadeInDown { 
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInDown {
	0% { opacity: 0; -moz-transform: translateY(-20px);	}
	100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInDown {
	0% { opacity: 0; -o-transform: translateY(-20px); }
	100% { opacity: 1; -o-transform: translateY(0);	}
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes fadeOutDown { 
	0% { opacity: 1; -webkit-transform: translateY(0); }
	100% { opacity: 0; -webkit-transform: translateY(20px); }
}
@-moz-keyframes fadeOutDown {
	0% { opacity: 1; -moz-transform: translateY(0);	}
	100% { opacity: 0; -moz-transform: translateY(20px); }
}
@-o-keyframes fadeOutDown {
	0% { opacity: 1; -o-transform: translateY(0); }
	100% { opacity: 0; -o-transform: translateY(20px);	}
}
@keyframes fadeOutDown {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(20px); }
}

.ipsAnim_fade.ipsAnim_in {
	opacity: 1;
	{prefix="animation-name" value="fadeIn"}
}
.ipsAnim_fade.ipsAnim_out {
	opacity: 1;
	{prefix="animation-name" value="fadeOut"}
}
.ipsAnim_fade.ipsAnim_in.ipsAnim_down {
	{prefix="animation-name" value="fadeInDown"}
}
.ipsAnim_fade.ipsAnim_out.ipsAnim_down {
	{prefix="animation-name" value="fadeOutDown"}
}

/* ======================================================== */
/* BLIND DOWN */
@-webkit-keyframes blindDown { 
	0% { height: 0; }
	100% { height: auto; }
}
@-moz-keyframes blindDown {
	0% { height: 0; }
	100% { height: auto; }
}
@-o-keyframes blindDown {
	0% { height: 0; }
	100% { height: auto; }
}
@keyframes blindDown {
	0% { height: 0; }
	100% { height: auto; }
}

.ipsAnim_blind.ipsAnim_down {
	height: auto;
	{prefix="animation-name" value="blindDown"}
}

/* ======================================================== */
/* BLIND Up */
@-webkit-keyframes blindUp {
	0% { height: auto; }
	100% { height: 0; }
}

.ipsAnim_blind.ipsAnim_up {
	height: 0;
	-webkit-animation-name: blindUp;
}

/* ======================================================== */
/* SLIDE */
@-webkit-keyframes slideFromRight { 
	0% { right: -100%; }
	100% { right: 0; }
}
@-moz-keyframes slideFromRight {
	0% { right: -100%; }
	100% { right: 0; }
}
@-o-keyframes slideFromRight {
	0% { right: -100%; }
	100% { right: 0; }
}
@keyframes slideFromRight {
	0% { right: -100%; }
	100% { right: 0; }
}

.ipsAnim_slide.ipsAnim_left {
	right: 0;
	{prefix="animation-name" value="slideFromRight"}
}

/* ======================================================== */
/* ZOOM */
@-webkit-keyframes zoomIn { 
	0% { -webkit-transform: scale(0); }
	100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomIn {
	0% { -moz-transform: scale(0); }
	100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomIn {
	0% { -o-transform: scale(0); }
	100% { -o-transform: scale(1); }
}
@keyframes zoomIn {
	0% { transform: scale(0); }
	100% { transform: scale(1); }
}

.ipsAnim_zoom.ipsAnim_in {
	{prefix="animation-name" value="zoomIn"}
}

@-webkit-keyframes zoomOut { 
	0% { -webkit-transform: scale(1); }
	100% { 
		-webkit-transform: scale(0);
		opacity: 0;
	}
}
@-moz-keyframes zoomOut {
	0% { -moz-transform: scale(1); }
	100% { 
		-moz-transform: scale(0);
		opacity: 0;
	}
}
@-o-keyframes zoomOut {
	0% { -o-transform: scale(1); }
	100% { 
		-o-transform: scale(0);
		opacity: 0;
	}
}
@keyframes zoomOut {
	0% { transform: scale(1); }
	100% { 
		transform: scale(0);
		opacity: 0;
	}
}

.ipsAnim_zoom.ipsAnim_out {
	{prefix="animation-name" value="zoomOut"}
	opacity: 1;
}

/* ======================================================== */
/* WOBBLE */
@-webkit-keyframes wobble {
	0% { -webkit-transform: translateX(0%); }
	15% { -webkit-transform: translateX(-5%) rotate(-4deg); }
	30% { -webkit-transform: translateX(5%) rotate(2deg); }
	45% { -webkit-transform: translateX(-4%) rotate(-2deg); }
	60% { -webkit-transform: translateX(4%) rotate(1deg); }
	75% { -webkit-transform: translateX(-3%) rotate(-1deg); }
	100% { -webkit-transform: translateX(0%); }
}

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

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

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

.ipsAnim_wobble {
	{prefix="animation-name" value="wobble"}
}

/* ======================================================== */
/* JIGGLE */
@-webkit-keyframes jiggle {
	0% { -webkit-transform: rotate(-3deg); }
	50% { -webkit-transform: rotate(3deg); }
}

@-moz-keyframes jiggle {
	0% { -moz-transform: rotate(-3deg); }
	50% { -moz-transform: rotate(3deg); }	
}

@-o-keyframes jiggle {
	0% { -o-transform: rotate(-3deg); }
	50% { -o-transform: rotate(3deg); }
}

@keyframes jiggle {
	0% { transform: rotate(-3deg); }
	50% { transform: rotate(3deg); }
}

.ipsAnim_jiggle {
	{prefix="animation" value="jiggle 0.3s infinite"}
}

/* ======================================================== */

@-webkit-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}
}

@-moz-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}
}

@-o-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-o-transform: translateY(20px);
	}
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(20px);
	}
}

.ipsAnim_fadeOutDown {
	{prefix="animation-name" value="fadeOutDown"}
}

/* ======================================================== */

@-webkit-keyframes pulseOnce {
	0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(1.15); }
	100% { -webkit-transform: scale(1); }
}

@-moz-keyframes pulseOnce {
	0% { -moz-transform: scale(1); }
	50% { -moz-transform: scale(1.15); }
	100% { -moz-transform: scale(1); }
}

@-o-keyframes pulseOnce {
	0% { -o-transform: scale(1); }
	50% { -o-transform: scale(1.15); }
	100% { -o-transform: scale(1); }
}

@keyframes pulseOnce {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.ipsAnim_pulseOnce {
	{prefix="animation-name" value="pulseOnce"}
}