body {
	margin: 0px;
	padding: 0px;
	background-image: url(gaming.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

#container {
	width: 600px;
	height: 500px;
	padding-top: 40px;
	margin: 0 auto;
}

.bar {
	width: 20px;
	height: 50px;
	margin: 0 12px;
	border-radius: 50px;
	float: left;
	}
.bar:nth-child(1) {
	background-color: #333333;
	animation: up 1s infinte ease-in-out;
}

.bar:nth-child(2) {
	background-color: #333333;
	animation: down 1.1s infinte ease-in-out;
}
.bar:nth-child(3) {
		background-color: #333333;
	animation: up .9s infinte ease-in-out;
	}
.bar:nth-child(4) {
	background-color: #333333;
	animation: down 1.2s infinte ease-in-out;
	}

.bar:nth-child(5) {
	background-color: #333333;
	animation: up 1.2s infinte ease-in-out;
	}

    .bar:nth-child(6) {
	background-color: #333333;
	animation: down 1.2s  infinte ease-in-out;
	}
	.bar:nth-child(7) {
	background-color: #333333;
	animation: up 1.2s  infinte ease-in-out;
	}
	.bar:nth-child(8) {
	background-color: #333333;
	animation: down 1.3s  infinte ease-in-out;
	}
	.bar:nth-child(9) {
	background-color: #333333;
	animation: up 1.1s  infinte ease-in-out;
	}
	.bar:nth-child(10) {
	background-color: #333333;
	animation: down .9s  infinte ease-in-out;
	}
	.bar:nth-child(11) {
	background-color: #333333;
	animation: up 1.2s  infinte ease-in-out;
	}
	.bar:nth-child(12) {
	background-color: #333333;
	animation: down 1.2s  infinte ease-in-out;
	}
@keyframes up {
	0% { transform: translateY(-75px); background-color: #fc001e; }
	25% { background-color: #fc001e; }
	50% { transform: translateY(75px);  background-color: #e1cc0a; }
	100% { transform: translateY(-75px);  background-color: #c3ea07; }
}

@keyframes down {
	0% { transform: translateY(-75px);}
	50% { transform: translateY(-75px);}
	100% { transform: translateY(-75px);}
	
}