.hide{
	display: none;
	visibility: hidden;
}
.in_top{
	animation: in_top 1s ease-out both;
}
.out_top{
	animation: out_top 1s ease-out both;
}
.in_down{
	animation: in_down 1s ease-out both;
}
.out_down{
	animation: out_down 1s ease-out both;
}
@keyframes in_top{
	from{
		transform: translateY(100%);
	}
	to{
		transform: translateY(0);
	}
}
@keyframes out_top{
	from{
		transform: translateY(0);
	}
	to{
			transform: translateY(-100%);
	}
}

@keyframes in_down{
	from{
			transform: translateY(-100%);
	}
	to{
		transform: translateY(0);
	}
}

@keyframes out_down{
	from{
		transform: translateY(0);
	}
	to{
			transform: translateY(100%);
	}
}