body 
{
	margin: 0px;
	background-color: rgba(0,0,0, 1.0);
}

/*
	We use three individual animations (x-spin, y-spin, back-y-spin) to create
	the cylinder's 3D rotation effect. The x-spin animation will perform a
	full rotation on the x-axis, we'll use that on the whole set of objects. 
	The y-spin and back-y-spin animations will perform a full rotation on 
	the y-axis in opposite directions, alternating directions between rings.
	We define each of these animations using the "@-webkit-keyframes" rule. 
	
	Note that since animations will take the shortest path between values
	and a rotation of 0 degrees is the same orientation as 360 degrees, it
	is necessary to specify an intermediate keyframe step that is half way
	around a full rotation. This way the animation will rotate to 180 degrees
	half way through the animation and then continue on to 360 degrees. */
@-webkit-keyframes x-spin 
{
	/* Rotate the cylinder by 0 degrees around the x-axis at the start of the animation */
	0%    { -webkit-transform: rotateX(0deg); }
	/* Rotate the cylinder by 180 degrees around the x-axis at 50% into the animation */
	50%   { -webkit-transform: rotateX(180deg); }
	/* Rotate the cylinder by 180 degrees around the x-axis when the animation is ending */
	100%  { -webkit-transform: rotateX(360deg); }
}


/* Performs rotations around the y-axis in the counterclockwise direction */
@-webkit-keyframes y-spin
{
	/* Rotate this ring of the cylinder by 0 degrees around the y-axis at the start of the animation */
	0%    { -webkit-transform: rotateY(0deg); }
	/* Rotate this ring by 180 degrees around the y-axis at 50% into the animation */
	50%   { -webkit-transform: rotateY(180deg); }
	/* Rotate this ring by 360 degrees around the y-axis when the animation is ending */
	100%  { -webkit-transform: rotateY(360deg); }
}


/* Performs rotations around the y-axis in the clockwise direction */
@-webkit-keyframes back-y-spin 
{
	/* Rotate this ring by 360 degrees around the y-axis at the start of the animation */
	0%    { -webkit-transform: rotateY(360deg); }
	/* Rotate this ring by 180 degrees around the y-axis at 50% into the animation */
	50%   { -webkit-transform: rotateY(180deg); }
	/* Rotate this ring of the cylinder by 0 degrees around the y-axis when the animation is ending */
	100%  { -webkit-transform: rotateY(0deg); }
}


/* Placeholder for the cylinder. Renders the cylinder in 3D space. */
#stage
{
	position: absolute;
	left: 10px;
	top: 20px;
	width: 300px;
	height: 420px;
	/* Setting the perspective of the contents of the stage, but not the stage itself */
	-webkit-transform-style: preserve-3d;
	/* Give some depth to the cylinder */
	-webkit-perspective: 2000;
}


/* Placeholder for the three rings of the cylinder. Makes all three rings appear like a cylinder.
   Rotates all three rings around the x-axis. */
#rotate 
{
	position: absolute;
	width: 301px;
	height: 410px;
	/* Ensure that we're in 3D space */
	-webkit-transform-style: preserve-3d;
    /* let's rotate all three rings along the x-axis over a period of 7 seconds */
	/*-webkit-animation-name: x-spin;
	-webkit-animation-duration: 7s; */
    /* Let the rings rotate forever and linearly 
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;*/
}


/* Styles each ring of the cylinder. Controls the position of each ring's posters in 3D space. */
.cube
{
	position: relative;
	height: 300px;
	width: 300px;
	margin: 10px 0px;
	/* Ensure that posters in each ring maintain their position in 3D */
	-webkit-transform-style: preserve-3d;
}


/* Styles all posters in the cylinder. Provides each poster with a round layout. */
.poster 
{
	position: absolute;
	left: 0px;
	width: 300px;
	height: 300px;
	/* Make each poster transparent */
	opacity: 0.9;
	color: rgba(0,0,0,0.9);
	background-color: rgb(200,200,0);
	/*background-image: url(1.png);
     Give a round layout to each poster */
	-webkit-border-radius: 10px;
}


/* Styles the number in each poster */
.poster > p 
{
	font-family: 'Georgia';
	font-size: 36px;
	text-align: center;
	margin-top: 28px;
	font-weight: bold;
}


/* Set up each row to have a different animation duration and alternating y-axis rotation direction */
/* This ring will continually rotate around the y-axis and in the counterclockwise direction over a period of 5 seconds 
#ring-1 
{
	-webkit-animation-name: y-spin;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
*/