/*
==============================================
slideLeft
==============================================
*/

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

	animation-duration: 0.2s;
	-webkit-animation-duration: 0.2s;

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

	visibility: visible !important;
}

@keyframes slideLeft {
	0% {
		transform: translateX(30%);
	}
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(30%);
	}
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
slideRight
==============================================
*/


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

	animation-duration: 0.2s;
	-webkit-animation-duration: 0.2s;

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

	visibility: visible !important;
}

@keyframes slideRight {
	0% {
		transform: translateX(-30%);
	}
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-30%);
	}
	100% {
		-webkit-transform: translateX(0%);
	}
}