/*FUCKNIMATION*/
/* Animation ini*/

/*slideInFromLeft*/
@keyframes slideInFromLeft {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0%); }
}

/*slideOutToLeft*/
@keyframes slideOutToLeft {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-100%); }
}

/*slideInFromRigth*/
@keyframes slideInFromRight {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}

/*slideoutToRigth*/
@keyframes slideOutToRight {
	0% { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}

/*slideInFromTop*/
@keyframes slideInFromTop {
	0% { transform: translateY(-200%); }
	100% { transform: translateY(0%); }
}

/*slideInFromBottom*/
@keyframes slideInFromBottom {
	0% { transform: translateY(200%); }
	100% { transform: translateY(0%); }
}

/*fadeIn*/
@keyframes fadeIn {
  from {opacity: 0; width:0; height:0; display:block;}
  to {opacity: 1; width:inherit; height:inherit;}
}

/*fadeOut*/
@keyframes fadeOut {
	from {opacity: 1; width:inherit; height:inherit;}
	to {opacity: 0; width:0; height:0; display:none;}
}

/*Pulse*/
@keyframes pulse {
	0%{ transform: scale(1);  }
	50%{ transform: scale(1.2);  }
	100%{ transform: scale(1);  }
}

/*spinLeft*/
@keyframes spinLeft {
	0%{ transform: rotateZ(0deg);  }
	100%{ transform: rotateZ(-360deg);  }
}

/*spinRight*/
@keyframes spinRight{
	0%{ transform: rotateZ(0deg);  }
	100%{ transform: rotateZ(360deg);  }	
}
/* Animation end*/

/* classLists ini*/
.fadeIn{
	animation: fadeIn 1s;
	animation-fill-mode: forwards;
	overflow:hidden;
}

.fadeOut{
	animation: fadeOut 1s;
	animation-fill-mode: forwards;
	overflow:hidden;
}

.slideInFromLeft{
	animation: slideInFromLeft 1s;
}

.slideInFromRight{
	animation: slideInFromRight 1s;
}

.slideInFromTop{
	animation: slideInFromTop 1s;	
}

.slideInFromBottom{
	animation: slideInFromBottom 1s;	
}

.pulse{
	animation: pulse 1s;
	transform-origin: 50% 50%;
}

.spinLeft{
	animation: spinLeft 1s linear;
}

.spinRight{
	animation: spinRight 1s linear;
}
/* classLists end*/