@charset "UTF-8";

@keyframes slide-down {
	0% {
		transform: translate(0, -100%);
		clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
	}

	100% {
		transform: translate(0, 0%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

.slide.down.animated {
	animation-duration: var(--animation-duration, 0.25s);
	animation-name: slide-down;
	animation-fill-mode: forwards;
	animation-timing-function: var(--animatiom-timing, ease-out);
}

@keyframes slide-down-revert {
	0% {
		transform: translate(0, 0%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

	100% {
		transform: translate(0, -100%);
		clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%);
	}
}

.slide.down.revert.animated {
	animation-duration: var(--animation-duration, 0.25s);
	animation-name: slide-down-revert;
	animation-fill-mode: forwards;
	animation-timing-function: var(--animatiom-timing, ease-in);
}

@keyframes opacity {
	0% {
		opacity: 0%;
	}

	100% {
		opacity: 100%;
	}
}

.opacity.animated {
	animation-duration: var(--animation-duration, 0.25s);
	animation-name: opacity;
	animation-fill-mode: forwards;
	animation-timing-function: var(--animatiom-timing, ease-in);
	animation-delay: var(--animation-delay, 0s);
}