/* Animations */
.appear-animation {
	opacity: 0;
}

.appear-animation-visible {
	opacity: 1;
}

/* Fade In Up Shorter */
@keyframes fadeInUpShorter {
	from {
	    opacity: 0;
	    transform: translate(0, 50px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInUpShorter {
	animation-name: fadeInUpShorter;
}

/* Fade In Left Shorter */
@keyframes fadeInLeftShorter {
	from {
	    opacity: 0;
	    transform: translate(50px, 0);
	}

	to {
	    opacity: 1;
	    transform: none;
	}
}

.fadeInLeftShorter {
	animation-name: fadeInLeftShorter;
}

/* Fade In Right Shorter */
@keyframes fadeInRightShorter {
	from {
	    opacity: 0;
	    transform: translate(-50px, 0);
	}

	to {
	    opacity: 1;
	    transform: none;
	}
}

.fadeInRightShorter {
	animation-name: fadeInRightShorter;
}

/* Fade In Down Shorter */
@keyframes fadeInDownShorter {
	from {
	    opacity: 0;
	    transform: translate(0, -50px);
	}

	to {
	    opacity: 1;
	    transform: none;
	}
}

.fadeInDownShorter {
	animation-name: fadeInDownShorter;
}

/* Dot Pulse */
@keyframes dotPulse {
	from {
		opacity: 1;
		transform: scale(0.2);
	}
	to {
		opacity: 0;
		transform: scale(1);
	}
}

.dotPulse {
	animation-name: dotPulse;
	animation-iteration-count: infinite;
	animation-duration: 4s;
}

/* Blur In */
@keyframes blurIn {
	from {
		opacity: 0;
		filter: blur(20px);
		transform: scale(1.3);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

.blurIn {
	animation-name: blurIn;
}

/* Mask Up */
@keyframes maskUp {
	from {
	    transform: translate(0, 100%);
	}

	to {
	    transform: translate(0, 0);
	}
}

/* Mask Right */
@keyframes maskRight {
	from {
	    transform: translate(-100%, 0);
	}

	to {
	    transform: translate(0, 0);
	}
}

/* Mask Down */
@keyframes maskDown {
	from {
	    transform: translate(0, -100%);
	}

	to {
	    transform: translate(0, 0);
	}
}

/* Mask Left */
@keyframes maskLeft {
	from {
	    transform: translate(100%, 0);
	}

	to {
	    transform: translate(0, 0);
	}
}

.maskUp {
	animation-name: maskUp;
}

.maskRight {
	animation-name: maskRight;
}

.maskDown {
	animation-name: maskDown;
}

.maskLeft {
	animation-name: maskLeft;
}