/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
	0% 		{ transform: rotateZ(0deg); }
	20% 	{ transform: rotateZ(10deg); animation-timing-function: ease-out; }
	40% 	{ transform: rotateZ(17deg); }
	60% 	{ transform: rotateZ(16deg); }
	100% 	{ transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@keyframes slideOutDown {
	to 		{ transform: translateY(100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
	to 		{ transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
	from 	{ opacity: 0.3; -webkit-transform: scale(0.8); }
}
@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(100%); }
	to 		{ transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
	from 	{ transform:translateY(100%); }
	to 		{ transform: translateY(0); }
}

.ng-enter 			{ animation: scaleUp 0.0s both ease-in; z-index: 8888; }
.ng-leave 			{ display: none; }