/*
==============================================
CSS3 ANIMATION

ZENZERO by Muvolab

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

/*
==============================================
fadeIn
==============================================
*/


.fadeIn{
	animation-name:fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;
}

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

@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}		
}

/*
==============================================
fadeDown
==============================================
*/


.fadeDown{
	animation-name:fadeDown;
	-webkit-animation-name: fadeDown;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;
}

@keyframes fadeDown {
	0% {
		transform: translateY(-15%);
		opacity:0;
	}
	100% {
		transform: translateY(0%);
		opacity:1;
	}		
}

@-webkit-keyframes fadeDown {
	0% {
		-webkit-transform: translateY(-15%);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0%);
		opacity:1;
	}		
}

/*
==============================================
fadeUp
==============================================
*/


.fadeUp{
	animation-name: fadeUp;
	-webkit-animation-name: fadeUp;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes fadeUp {
	0% {
		transform: translateY(15%);
		opacity:0;
	}
	100% {
		transform: translateY(0%);
		opacity:1;
	}		
}

@-webkit-keyframes fadeUp {
	0% {
		-webkit-transform: translateY(15%);
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0%);
		opacity:1;
	}		
}

/*
==============================================
fadeLeft
==============================================
*/


.fadeLeft{
	animation-name: fadeLeft;
	-webkit-animation-name: fadeLeft;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeLeft {
	0% {
		transform: translateX(15%);
		opacity:0;
	}
	100% {
		transform: translateX(0%);
		opacity:1;
	}		
}

@-webkit-keyframes fadeLeft {
	0% {
		-webkit-transform: translateX(15%);
		opacity:0;
	}
	100% {
		-webkit-transform: translateX(0%);
		opacity:1;
	}		
}

/*
==============================================
fadeRight
==============================================
*/


.fadeRight{
	animation-name: fadeRight;
	-webkit-animation-name: fadeRight;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeRight {
	0% {
		transform: translateX(-15%);
		opacity:0;
	}
	100% {
		transform: translateX(0%);
		opacity:1;
	}		
}

@-webkit-keyframes fadeRight {
	0% {
		-webkit-transform: translateX(-15%);
		opacity:0;
	}
	100% {
		-webkit-transform: translateX(0%);
		opacity:1;
	}		
}


/*
==============================================
fadeScale
==============================================
*/

.fadeScale{
	animation-name: fadeScale;
	-webkit-animation-name: fadeScale;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeScale {
	0% {
		transform: scale(0.7);
		opacity: 0.0;		
	}
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeScale {
	0% {
		-webkit-transform: scale(0.7);
		opacity: 0.0;		
	}
	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}



/*
==============================================
pulse
==============================================
*/

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.8);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1.1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.8);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.8);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1.1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.8);
		opacity: 0.7;	
	}			
}

/*
==============================================
swing
==============================================
*/

.swing{
	animation-name: swing;
	-webkit-animation-name: swing;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes swing {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(50%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes swing {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(50%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*
==============================================
sway
==============================================
*/

.sway{
	animation-name: sway;
	-webkit-animation-name: sway;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes sway {
	0% {
		transform: rotate(-8deg);	
	}
	50% {
		transform: rotate(8deg);
	}
	100% {
		transform: rotate(-8deg);	
	}						
}

@-webkit-keyframes sway {
	0% {
		-webkit-transform: rotate(-8deg);	
	}
	50% {
		-webkit-transform: rotate(8deg);
	}
	100% {
		-webkit-transform: rotate(-8deg);	
	}				
}