@keyframes fadein {
    from {opacity: 0;}
    to   {opacity: 1;}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes slide-in {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0%);
	}
}

@keyframes slide-out {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(100%);
	}
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes slide-out-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}