@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');

*
{
	margin: 0;
	padding: 0;
}

body
{
	word-wrap:break-word;
}


.container {
	width: 100%;
	margin: auto;
	text-transform: uppercase;
	text-align: center;
	padding: 0 0 0px;
}

a, a:link, a:visited {
  text-decoration: none;
  padding: 1px 6px;
  border: 0px solid #ececec;
  border-radius: 5px;
  color: gray;
}

.animate {
	font-size: 50px;
	margin: 100px 0 0;
	border-bottom: 0px solid #ccc;
}

.animate span {
	display: inline-block;
}
.animate span:nth-of-type(2) {
	animation-delay: .05s;
}
.animate span:nth-of-type(3) {
	animation-delay: s;
}
.animate span:nth-of-type(4) {
	animation-delay: .15s;
}
.animate span:nth-of-type(5) {
	animation-delay: .2s;
}
.animate span:nth-of-type(6) {
	animation-delay: .25s;
}
.animate span:nth-of-type(7) {
	animation-delay: .35s;
}
.animate span:nth-of-type(8) {
	animation-delay: .35s;
}
.animate span:nth-of-type(9) {
	animation-delay: .4s;
}
.animate span:nth-of-type(10) {
	animation-delay: .45s;
}
.animate span:nth-of-type(11) {
	animation-delay: .5s;
}
.animate span:nth-of-type(12) {
	animation-delay: .55s;
}
.animate span:nth-of-type(13) {
	animation-delay: .6s;
}
.animate span:nth-of-type(14) {
	animation-delay: .65s;
}
.animate span:nth-of-type(15) {
	animation-delay: .7s;
}
.animate span:nth-of-type(16) {
	animation-delay: .75s;
}
.animate span:nth-of-type(17) {
	animation-delay: .8s;
}
.animate span:nth-of-type(18) {
	animation-delay: .85s;
}
.animate span:nth-of-type(19) {
	animation-delay: .9s;
}
.animate span:nth-of-type(20) {
	animation-delay: .95s;
}


/* Animation One */

.one span {
	color: #FFF;
	opacity: 0;
	transform: translate(-150px, -50px) rotate(-180deg) scale(3);
	animation: revolveScale .4s forwards;
}

@keyframes revolveScale {
	60% {
		transform: translate(20px, 20px) rotate(30deg) scale(.3);
	}

	100% {
		transform: translate(0) rotate(0) scale(1);
		opacity: 1;
	}
}


/* Animation Two */

.two span {
	color: #a5cb21;
	opacity: 0;
	transform: translate(200px, -100px) scale(2);
	animation: ballDrop .3s forwards;
}

@keyframes ballDrop {
	60% {
		transform: translate(0, 20px) rotate(-180deg) scale(.5);
	}

	100% {
		transform: translate(0) rotate(0deg) scale(1);
		opacity: 1;
	}
}


/* Animation Three */


.three span {
	color: #b10e81;
	opacity: 0;
	transform: translate(-300px, 0) scale(0);
	animation: sideSlide .5s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	80% {
		transform: translate(20px, 0) scale(1);
		color: #b10e81;
	}

	99% {
		transform: translate(0) scale(1.2);
		color: #00f0ff;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: #b10e81;
	}
}


/* Animation Four */


.four span {
	color: #8d6a00;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: revolveDrop .3s forwards;
}


@keyframes revolveDrop {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	60% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
	}

	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}


/* Animation Five */


.five span {
	color: #dd3f0f;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0);
	animation: dropVanish .5s forwards;
}


@keyframes dropVanish {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}

	50% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
		opacity: 1;
	}

	80% {
		transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}



/* Animation Six */


.six span {
	color: #ddb40f;
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .5s forwards;
}


@keyframes twister {
	10% {
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translate(0);
		opacity: 1;
	}
}



/* Animation Seven */
.seven span {
	color: #cccccc;
	opacity: 0;
	transform: translate(-150px, 0) scale(.3);
	animation: leftRight .5s forwards;
}


@keyframes leftRight {
	40% {
		transform: translate(50px, 0) scale(.7);
		opacity: 1;
		color: #333333
	}

	60% {
		color: #C0C0C0;
	}

	80% {
		transform: translate(0) scale(2);
		opacity: 0;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
	}
}