.slide-right {
	animation-name: slideRight;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-duration: 1s;
}


@keyframes slideRight {
	0% {
		opacity: 0;
		transform: translatex(-70px);
	}

	100% {
		opacity: 1;
		transform: translatex(0px);
	}
}

.slide-left {
	animation-name: slideLeft;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-duration: 1s;
}

@keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translatex(70px);
	}

	100% {
		opacity: 1;
		transform: translatex(0px);
	}
}

.slide-up {
	animation-name: slideUp;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-duration: 1s;
}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translatey(70px);
	}

	100% {
		opacity: 1;
		transform: translatey(0px);
	}
}

.slide-down {
	animation-name: slideDown;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-duration: 1s;
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translatey(-70px);
	}

	100% {
		opacity: 1;
		transform: translatey(0px);
	}
}


.zoom-out {
	animation-name: zoomOut;
	animation-fill-mode: forwards;
	animation-play-state: running;
	animation-duration: 1s;
}

@keyframes zoomOut {
	0% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}