@charset "UTF-8";

/**
 *  File for CSS animations
 *  
 *  Inspired by animate.css
 *  @see https://animate.style/
 *  
 *  @version 1.0.0
 *  @package watheme
 *  @since 1.0.0
 *  @todo minify
 */

:root {
	--watheme--animation--duration:1s;
	--watheme--animation--delay:1s;
	--watheme--animation--size:10;
	/* --animation-repeat:1; */
}

.watheme-animation {
	-webkit-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-duration:var(--watheme--animation--duration);
	animation-duration:var(--watheme--animation--duration);
	/* -webkit-animation-delay:1s; */
	/* animation-delay:1s; */
	/* -webkit-animation-delay:var(--animation-delay); */
	/* animation-delay:var(--animation-delay); */
	/* -webkit-animation-fill-mode:both; */
	/* animation-fill-mode:both; */
}

/**
 *  Fading animations
 */

/* Fade in */
@-webkit-keyframes fade-in {
	0% {
		opacity:0;
	}

	100% {
		opacity:1;
	}
}
@keyframes fade-in {
	0% {
		opacity:0;
	}

	100% {
		opacity:1;
	}
}
.watheme-fade-in {
	-webkit-animation-name:fade-in;
	animation-name:fade-in;
}

/* Fade in left */
@-webkit-keyframes fade-in-left {
	0% {
		opacity:0;
		-webkit-transform:translatex(calc(-1vw * var(--watheme--animation--size)));
		transform:translatex(calc(-1vw * var(--watheme--animation--size)));
	}

	100% {
		opacity:1;
		-webkit-transform:translatex(0);
		transform:translatex(0);
	}
}
@keyframes fade-in-left {
	0% {
		opacity:0;
		-webkit-transform:translatex(calc(-1vw * var(--watheme--animation--size)));
		transform:translatex(calc(-1vw * var(--watheme--animation--size)));
	}

	100% {
		opacity:1;
		-webkit-transform:translatex(0);
		transform:translatex(0);
	}
}
.watheme-fade-in-left {
	-webkit-animation-name:fade-in-left;
	animation-name:fade-in-left;
}

/* Fade in right */
@-webkit-keyframes fade-in-right {
	0% {
		opacity:0;
		-webkit-transform:translatex(calc(1vw * var(--watheme--animation--size)));
		transform:translatex(calc(1vw * var(--watheme--animation--size)));
	}

	100% {
		opacity:1;
		-webkit-transform:translatex(0);
		transform:translatex(0);
	}
}
@keyframes fade-in-right {
	0% {
		opacity:0;
		-webkit-transform:translatex(calc(1vw * var(--watheme--animation--size)));
		transform:translatex(calc(1vw * var(--watheme--animation--size)));
	}

	100% {
		opacity:1;
		-webkit-transform:translatex(0);
		transform:translatex(0);
	}
}
.watheme-fade-in-right {
	-webkit-animation-name:fade-in-right;
	animation-name:fade-in-right;
}