/**
 * The first commented line is your dabblet’s title
 */


body 	{font-family: georgia, serif; background: #ccc;}

@-webkit-keyframes girando {
	from,20% 	{ -webkit-transform: rotateY(0deg);   }
	30%,40%  	{ -webkit-transform: rotateY(90deg);  }
	50%,60%  	{ -webkit-transform: rotateY(180deg); }
	70%,80% 	{ -webkit-transform: rotateY(270deg); }
	90%,to		{ -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes girando {
	from,20% 	{ -moz-transform: rotateY(0deg);   }
	30%,40%  	{ -moz-transform: rotateY(90deg);  }
	50%,60%  	{ -moz-transform: rotateY(180deg); }
	70
	0% 	{ -moz-transform: rotateY(270deg); }
	90%,to		{ -moz-transform: rotateY(360deg); }
}

#container {
    margin: 30px auto;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
}

#girando {
	margin: 10px auto;
	width: 300px;
	padding: 30px;
	-webkit-animation-name: girando;
	-moz-animation-name: girando;
	animation-name: girando;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 10s;
	-moz-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#girando:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}
#girando span {
  	position: absolute;
  	width: 320px;
  	height: 260px;
  	overflow: hidden;
  	border: 2px solid #fff;
  	font-weight: bold;
  	font-size: 120px;
  	text-align: center;
  	text-shadow: #fff 2px 2px 1px;
  	opacity: 0.8;
}					#uno {						-webkit-transform: rotateY(0deg) translateZ(160px);						-moz-transform: rotateY(0deg) translateZ(160px);						transform: rotateY(0deg) translateZ(160px);					}					#dos {						-webkit-transform: rotateY(-90deg) translateZ(160px);						-moz-transform: rotateY(-90deg) translateZ(160px);						transform: rotateY(-90deg) translateZ(160px);					}					#tres {						-webkit-transform: rotateY(-180deg) translateZ(160px);						-moz-transform: rotateY(-180deg) translateZ(160px);						transform: rotateY(-180deg) translateZ(160px);					}					#cuatro {						-webkit-transform: rotateY(-270deg) translateZ(160px);						-moz-transform: rotateY(-270deg) translateZ(160px);						transform: rotateY(-270deg) translateZ(160px);					}