*[data-animate] {
	opacity: 0;
	transition: opacity .5s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}
*[data-animate].animated {
	opacity: 1;
}
@keyframes curveIn {
	0% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes dropInBounce {
    0% {
        transform: perspective(1000px) translateY(-25%) rotateX(-30deg); 
		opacity: 0; 
    }  
	75% {
        transform: perspective(1000px) translateY(5%) rotateX(5deg); 
		opacity: 1;   
    }
	100% {
        transform: perspective(1000px) translateY(0%) rotateX(0deg); 
		opacity: 1; 
    }
}
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes pullLeft {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-10%);
	}
}
@keyframes pullLeftIn {
	0% {
		transform: translateX(-10%);
	}
	100% {
		transform: translateX(0px);
	}
}
@keyframes pullRight {
	0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(10%);
	}
}
@keyframes pullRightIn {
	0% {
		transform: translateX(10%);
	}
	100% {
		transform: translateX(0px);
	}
}
@keyframes slideUp {
	0% {
		transform: translateY(10%);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes slideDown {
	0% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes scaleUp {
	0% {
		transform: scale(.95);
	}
	100% {
		transform: scale(1);
	}
}

.curveIn {
	transform-origin: right top;
	animation-name: curveIn;
	animation-duration: .5s;
}
.fadeIn {
	animation-name: fade;
	animation-duration: .5s;
}
.fadeInSlow {
	animation-name: fade;
	animation-duration: 1s;
}
.slideDown {
	animation-name: slideDown;
	animation-duration: .5s;
}
.slideUp,
.raiseIn {
	animation-name: slideUp;
	animation-duration: .5s;
}
.dropInBounce {
	animation-name: dropInBounce;
	animation-duration: .5s;
}
.moveInLeft,
.pullIn,
.pullLeftIn,
.slideIn {
	animation-name: pullLeftIn;
	animation-duration: .5s;
}
.pullRightIn {
	animation-name: pullRightIn;
	animation-duration: .5s;
}
.moveOutLeft,
.pullLeft {
	animation-name: pullLeft;
	animation-duration: .5s;
}
.pullRight {
	animation-name: pullRight;
	animation-duration: .5s;
}
.scaleUp {
	animation-name: scaleUp;
	animation-duration: .5s;
}
[data-animate*="fadeOut"],
[data-animate*="moveOutLeft"],
[data-animate="pullLeft"],
[data-animate*="pullLeft;"],
[data-animate="pullRight"],
[data-animate*="pullRight;"] {
	opacity: 1;
	transition: opacity .5s;
}
[data-animate*="fadeOutSlow"] {
	transition: opacity 1s;
}
.fadeOutSlow {
	opacity: 0;
}
.fadeOut,
.moveOutLeft.animated,
.pullLeft.animated,
.pullRight.animated {
	opacity: 0;
	transition: opacity .5s;
}

/* navigation */
@keyframes pullLeftTransparent {
	0% {
		transform: translateX(0px);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%);
		opacity: 0;
	}
} 
@keyframes pullLeftInTransparent {
	0% {
		transform: translateX(-50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}
@keyframes pullRightTransparent {
	0% {
		transform: translateX(0px);
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity: 0;
	}
}
@keyframes pullRightInTransparent {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
} 
.pull-left-transparent {
	animation: pullLeftTransparent .3s ease-in-out;
	backface-visibility: hidden; 
	will-change: transform, opacity;
}
.pull-left-in-transparent {
	animation: pullLeftInTransparent .3s ease-in-out;
	backface-visibility: hidden; 
	will-change: transform, opacity;
}
.pull-right-transparent {
	animation: pullRightTransparent .3s ease-in-out;
	backface-visibility: hidden; 
	will-change: transform, opacity;
}
.pull-right-in-transparent {
	animation: pullRightInTransparent .3s ease-in-out;
	backface-visibility: hidden; 
	will-change: transform, opacity;
}


/* ACCESSIBILITY MEDIA QUERY
--------------------------------------------------*/

@media (prefers-reduced-motion) {
	@keyframes curveIn {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(0deg);
		}
	}
	@keyframes dropInBounce {
		0% {
			transform: perspective(1000px) translateY(0%) rotateX(0deg); 
			opacity: 0; 
		}  
		75% {
			transform: perspective(1000px) translateY(0%) rotateX(0deg); 
			opacity: 1;   
		}
		100% {
			transform: perspective(1000px) translateY(0%) rotateX(0deg); 
			opacity: 1; 
		}
	}
	
	@keyframes pullLeft {
		0% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(0%);
		}
	}
	@keyframes pullLeftIn {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(0px);
		}
	}
	@keyframes pullRight {
		0% {
			transform: translateX(0px);
		}
		100% {
			transform: translateX(0%);
		}
	}
	@keyframes pullRightIn {
		0% {
			transform: translateX(0%);
		}
		100% {
			transform: translateX(0px);
		}
	}
	@keyframes slideUp {
		0% {
			transform: translateY(0%);
		}
		100% {
			transform: translateY(0px);
		}
	}
	@keyframes slideDown {
		0% {
			transform: translateY(0%);
		}
		100% {
			transform: translateY(0px);
		}
	}
	@keyframes scaleUp {
		0% {
			transform: scale(1);
		}
		100% {
			transform: scale(1);
		}
	}

	

	/* navigation */
	@keyframes pullLeftTransparent {
		0% {
			transform: translateX(0px);
			opacity: 1;
		}
		100% {
			transform: translateX(0%);
			opacity: 0;
		}
	} 
	@keyframes pullLeftInTransparent {
		0% {
			transform: translateX(0%);
			opacity: 0;
		}
		100% {
			transform: translateX(0px);
			opacity: 1;
		}
	}
	@keyframes pullRightTransparent {
		0% {
			transform: translateX(0px);
			opacity: 1;
		}
		100% {
			transform: translateX(0%);
			opacity: 0;
		}
	}
	@keyframes pullRightInTransparent {
		0% {
			transform: translateX(0%);
			opacity: 0;
		}
		100% {
			transform: translateX(0px);
			opacity: 1;
		}
	} 
}