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: limegreen;
}

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

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

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

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

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

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

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

	to {
		left: -240px;
	}
}