/* MD Effects JS */

/* ----------------------------------------
   Fade Up In
---------------------------------------- */

.md-fx-fade-up-in {
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		visibility 0.6s ease;
	will-change: opacity, transform;
}

.md-fx-fade-up-in.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


/* ----------------------------------------
   Fade Left In
---------------------------------------- */

.md-fx-fade-left-in {
	opacity: 0;
	visibility: hidden;
	transform: translateX(1rem);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		visibility 0.6s ease;
	will-change: opacity, transform;
}

.md-fx-fade-left-in.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}


/* ----------------------------------------
   Fade Right In
---------------------------------------- */

.md-fx-fade-right-in {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-1rem);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		visibility 0.6s ease;
	will-change: opacity, transform;
}

.md-fx-fade-right-in.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* ----------------------------------------
   Fade In
---------------------------------------- */

.md-fx-fade-in {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.98);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		visibility 0.6s ease;
	will-change: opacity, transform;
}

.md-fx-fade-in.is-visible {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

/* ----------------------------------------
   Reduced Motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.md-fx-fade-up-in,
	.md-fx-fade-left-in,
	.md-fx-fade-right-in,
    .md-fx-fade-in {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

}