body {
	padding: 0px;
	margin: 0px;
	border: 0px;
	background-color: black;
}

.vaca {
	color: black;
	background-color: #00FF33;
	border: none;
	border-radius: 5px;
	height: 30px;
	width: auto;
}

.vaca:hover {
	color: blue;
	background-color: #00FF66;
	border: none;
	border-radius: 5px;
	height: 30px;
	width: auto;
}

.display {
	height: 310px;
	width: 550px;
	background-image: url("./img/display.png");
	background-repeat: none;
	background-position: center;
	background-size: 550px;
	border-radius: 10px;
}

.tela {
	background-image: url("./img/tela.jpg");
	width: 245px;
	height: 170px;
	border-radius: 2px;
	margin-top: 39px;
	overflow: hidden;
}

.P {
	width: 42px;
	height: 42px;
	display: inline-block;
	position: relative;
}

.P:hover {
	width: 42px;
	height: 42px;
	background-color: limegreen;
	display: inline-block;
	position: relative;
}

.i {
	width: 42px;
	height: 42px;
	display: inline-block;
	position: relative;
}

.i:hover {
	width: 42px;
	height: 42px;
	background-color: red;
	display: inline-block;
	position: relative;
}

#red {
	background-color: red;
}

#a {
	animation: andar 2s infinite linear;
	background-image: url("./img/1P.png");
	background-position: center;
	background-size: 45px;
}

#ab {
	animation: andar 2s infinite linear;
	background-image: url("./img/12P.png");
	background-position: center;
	background-size: 45px;
}

#b {
	animation: andar 900ms infinite linear;
	background-image: url("./img/2P.png");
	background-position: center;
	background-size: 45px;
}

#bb {
	animation: andar 900ms infinite linear;
	background-image: url("./img/22P.png");
	background-position: center;
	background-size: 45px;
}

#c {
	animation: andar 500ms infinite linear;
	background-image: url("./img/3P.png");
	background-position: center;
	background-size: 45px;
}

#cb {
	animation: andar 500ms infinite linear;
	background-image: url("./img/32P.png");
	background-position: center;
	background-size: 45px;					
}

#r {
	animation: girar 1s infinite linear;
	background-image: url("./img/1L.jpg");
	background-position: center;
	background-size: 45px;					
}

#ra {
	animation: andar 1s infinite linear;
	background-image: url("./img/12I.png");
	background-position: center;
	background-size: 45px;					
}

#rb {
	animation: andar 2s infinite linear;
	background-image: url("./img/2I.png");
	background-position: center;
	background-size: 45px;					
}

#rc {
	animation: andar 1500ms infinite linear;
	background-image: url("./img/3I.png");
	background-position: center;
	background-size: 45px;					
}

#rd {
	animation: girar 1500ms infinite linear;
	background-image: url("./img/11.png");
	background-position: center;
	background-size: 45px;					
}

#re {
	animation: andar 1500ms infinite linear;
	background-image: url("./img/22.png");
	background-position: center;
	background-size: 45px;					
}

#rf {
	animation: andar 1500ms infinite linear;
	background-image: url("./img/22I.png");
	background-position: center;
	background-size: 45px;					
}

#rg {
	animation: andar 1s infinite linear;
	background-image: url("./img/33.png");
	background-position: center;
	background-size: 45px;					
}

#rh {
	animation: girar 900ms infinite linear;
	background-image: url("./img/33I.png");
	background-position: center;
	background-size: 45px;					
}

@keyframes andar {
	from {
		left: 200px;
	}

	to {
		left: -240px;
	}
}

@keyframes girar {
	from {
		transform: rotate(0deg);
		left: 200px;
	}

	to {
		transform: rotate(360deg);
		left: -240px;
	}
}