/*
	.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}
	*/

@-webkit-keyframes bounce-in-top {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}

	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}

@keyframes bounce-in-top {
	0% {
		-webkit-transform: translateY(-500px);
		transform: translateY(-500px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}

	38% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		opacity: 1;
	}

	55% {
		-webkit-transform: translateY(-65px);
		transform: translateY(-65px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	72% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	81% {
		-webkit-transform: translateY(-28px);
		transform: translateY(-28px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}

	95% {
		-webkit-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}


/*
animation: 10s infinite alternate colorShift;
-webkit-animation: 10s infinite alternate colorShift;

*/

@keyframes colorShift {
	0% {
		background-color: #22dcdf
	}

	50% {
		background-color: #2ed82e
	}

	100% {
		background-color: #e95a5a
	}
}


/*
animation: 10s infinite alternate colorShiftGL;
-webkit-animation: 10s infinite alternate colorShiftGL;

*/

@keyframes colorShiftGL {
	0% {
		background-color: azure;
	}

	50% {
		background-color: gainsboro;
	}

	100% {
		background-color: beige;
	}
}



@keyframes floatAbove { 50% { transform: translate(-50%, -60%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } }
@keyframes floatBelow { 50% { transform: translate(-50%, -60%) rotateX(10deg); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } }


/*
	.kenburns-top {
	-webkit-animation: kenburns-top 5s ease-out 1s both;
	        animation: kenburns-top 5s ease-out 1s both;
}
*/
@-webkit-keyframes kenburns-top {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0);
		-webkit-transform-origin: 50% 16%;
		transform-origin: 50% 16%;
	}

	100% {
		-webkit-transform: scale(1.25) translateY(-15px);
		transform: scale(1.25) translateY(-15px);
		-webkit-transform-origin: top;
		transform-origin: top;
	}
}

@keyframes kenburns-top {
	0% {
		-webkit-transform: scale(1) translateY(0);
		transform: scale(1) translateY(0);
		-webkit-transform-origin: 50% 16%;
		transform-origin: 50% 16%;
	}

	100% {
		-webkit-transform: scale(1.25) translateY(-15px);
		transform: scale(1.25) translateY(-15px);
		-webkit-transform-origin: top;
		transform-origin: top;
	}
}



/*
	animation: 0.5s forwards niceBtn;
	-webkit-animation: 0.5s forwards niceBtn;
*/
@keyframes niceBtn {
	0% {
		padding: 0px;
		border: 1px solid black;
		transform: rotate(0deg);
		font-size: 12px;
	}

	100% {
		padding: 10px;
		border: 10px solid black;
		transform: rotate(360deg);
		font-size: 24px;
	}
}


/*
	.roll-in-left {
	-webkit-animation: roll-in-left 0.6s ease-out both;
	        animation: roll-in-left 0.6s ease-out both;
}
*/
@-webkit-keyframes roll-in-left {
	0% {
		-webkit-transform: translateX(-800px) rotate(-540deg);
		transform: translateX(-800px) rotate(-540deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes roll-in-left {
	0% {
		-webkit-transform: translateX(-800px) rotate(-540deg);
		transform: translateX(-800px) rotate(-540deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}


/*
	-webkit-animation-name: spin; animation-duration: 1s; 
	animation-name: spin; animation-duration: 1s; 

*/
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/*
			-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
*/

@keyframes text-focus-in {
	0% {
		opacity: 1;
	}

	20% {
		-webkit-filter: blur(3px);
		filter: blur(3px);
		color: gold;
		opacity: 0.5;
	}

	40% {
		-webkit-filter: blur(0px);
		filter: blur(0px);
		color: orange;
		opacity: 1;
	}


	60% {
		color: darkorange;
	}

	80% {
		color: orange;
	}

	100% {
		color:white;
	}
}



/*
	.tilt-in-fwd-tr {
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
*/

@-webkit-keyframes tilt-in-fwd-tr {
	0% {
		-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
		transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
		transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
		opacity: 1;
	}
}

@keyframes tilt-in-fwd-tr {
	0% {
		-webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
		transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
		opacity: 0;
	}

	100% {
		-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
		transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
		opacity: 1;
	}
}




/*
	.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
*/


@keyframes tracking-in-expand {
	0% {
		letter-spacing: -0.5em;
		opacity: 0;
	}

	40% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}