.anim-top {
	opacity: 0;
}

.anim.show .anim-top {
	position: relative;
	animation-name: top-down, opacity-none-full;
	animation-duration: 0.75s, 0.33s;
	animation-timing-function: ease-out, linear;
	animation-delay: 0.5s;
	animation-fill-mode: forwards, forwards;
}

.anim-top-delay-500ms {
	opacity: 0;
}

.anim.show .anim-top-delay-500ms {
	position: relative;
	animation-name: top-down, opacity-none-full;
	animation-duration: 0.75s, 0.33s;
	animation-timing-function: ease-out, linear;
	animation-delay: 0.7s;
	animation-fill-mode: forwards, forwards;
}

.anim-top-delay-1000ms {
	opacity: 0;
}

.anim.show .anim-top-delay-1000ms {
	position: relative;
	animation-name: top-down, opacity-none-full;
	animation-duration: 0.75s, 0.33s;
	animation-timing-function: ease-out, linear;
	animation-delay: 1.0s;
	animation-fill-mode: forwards, forwards;
}

@keyframes top-down {
	0% {
		top: -50px;
	}
	100% {
		top: 0;
	}
}

@keyframes opacity-none-full {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}