.slidedown {
	  -webkit-animation:slidedown 1s both ease-in;
	-moz-animation:slideOutLeft 1s both ease-in;
	animation:slidedown 1s both ease-in;
}

/* slide in from the bottom */
@keyframes slidedown {
	from 	{ transform:translateY(-100%); }
	to 		{ transform: translateY(0); }
}
@-moz-keyframes slidedown {	
	from 	{ transform:translateY(-100%); }
	to 		{ -moz-transform: translateY(0); }
}
@-webkit-keyframes slidedown {
	from 	{ transform:translateY(-100%); }
	to 		{ -webkit-transform: translateY(0); }
}


.slideOutLeft {
	  -webkit-animation:slideOutLeft 1s both ease-in;
	-moz-animation:slideOutLeft 1s both ease-in;
	animation:slideOutLeft 1s both ease-in;
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	from 	{ transform:translateX(-100%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideOutLeft {	
	from 	{ transform:translateX(-100%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideOutLeft {
	from 	{ transform:translateX(-100%); }
	to 		{ -webkit-transform: translateX(0); }
}