/**
Fade In
 */
:where([data-k2-animate="true"][data-k2-animation="fadein"]) {
	--fade-in-translate-y: 50px;
	opacity: 0;
}

:where(.k2-fade-in) {
	animation: k2Animation__fadeInUp 0.5s ease-in-out forwards;
}

:where(.k2-fade-out) {
	animation: k2Animation__fadeInUp 0.5s ease-in-out reverse forwards;
}

[data-k2-animate="true"] {
	animation-delay: var(--k2-animation-delay, 0s);
}

@keyframes k2Animation__fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(var(--fade-in-translate-y));
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
Slide In
 */
:where([data-k2-animate="true"][data-k2-animation="slidein-right"]),
:where([data-k2-animate="true"][data-k2-animation="slidein-left"]),
:where([data-k2-animate="true"][data-k2-animation="slidein-top"]),
:where([data-k2-animate="true"][data-k2-animation="slidein-bottom"]) {
	--k2animation__slidein__start-x: 0;
	--k2animation__slidein__start-y: 0;
	opacity: 0;
}

:where([data-k2-animate="true"][data-k2-animation="slidein-right"]) {
	--k2animation__slidein__start-x: 25vw;
}
:where([data-k2-animate="true"][data-k2-animation="slidein-left"]) {
	--k2animation__slidein__start-x: -25vw;
}
:where([data-k2-animate="true"][data-k2-animation="slidein-top"]) {
	--k2animation__slidein__start-y: -25vh;
}
:where([data-k2-animate="true"][data-k2-animation="slidein-bottom"]) {
	--k2animation__slidein__start-y: 25vh;
}

:where(.k2-slidein) {
	animation: k2Animation__slideIn 0.5s ease-in-out forwards;
}

@keyframes k2Animation__slideIn {
	0% {
		opacity: 0;
		transform: translate(var(--k2animation__slidein__start-x), var(--k2animation__slidein__start-y));
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}