/* ---- Transform up (raise) */

.raise {
	 transition: transform 500ms;
}

.raise:hover {
	transform: translateY(-8px);
}

.bump-left {
	 transition: transform 200ms ease-out;
}

.bump-left:hover {
	transform: translateX(-8px) scale(-1, 1);
}

.bump-right {
	 transition: transform 200ms ease-out;
}

.bump-right:hover {
	transform: translateX(8px);
}

/* ---- NAV Slide in Bottom Border */

.slide-in-bottom-border {
	position: relative;
}

.slide-in-bottom-border::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 4px;
	background-color: #ef227a;
	transition: width 200ms ease-out;
}

.slide-in-bottom-border:hover::after {
	width: 100%;
}

.animate-fade-out-up  {
	animation: fade-out-up 0.3s ease-out forwards;
}

.animate-fade-in-down  {
	animation: fade-in-down 0.3s ease-out forwards;
}

.animate-bump-up  {
	animation: bump-up 0.5s ease-out forwards;
}

.animate-pulse {
	animation: pulse 2s ease-in-out infinite;
}

/* slider animations */

.animate-slide-in-left {
	animation: slide-in-left 0.6s ease-out forwards;
}

.animate-slide-in-right {
	animation: slide-in-right 0.6s ease-out forwards;
}

.animate-slide-out-left {
	animation: slide-out-left 0.6s ease-out forwards;
}

.animate-slide-out-right {
	animation: slide-out-right 0.6s ease-out forwards;
}

/* ---- slider animations */

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

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

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

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

@keyframes fade-in-right {
	from {
		opacity: 0;
		transform: translateX(64px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fade-out-left {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(64px);
	}
}

@keyframes fade-in-down {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-out-up {
	0% {
		opacity: 1;
		transform: translateY(30vh);
	}
	100% {
		opacity: 0;
		transform: translateY(-100vh);
	}
}

@keyframes bump-up {
	0% {
		padding-bottom: 16px;
	}
	100% {
		padding-bottom: 48px;
	}
}

@keyframes bump-down {
	0% {
		padding-bottom: 48px;
	}
	100% {
		padding-bottom: 16px;
	}
}

@keyframes rotate-up {
	0% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(-90deg);
	}
}

@keyframes rotate-down {
	0% {
		transform: rotate(-90deg);
	}
	100% {
		transform: rotate(90deg);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(0.9);
	}
}