body{
	font-family:Arial;
	xpadding-left:100px;
	xpadding-top:50px;

}

#content{
	xborder:1px solid grey;
	max-width:700px;
	margin: auto auto;	
}


/* cube-jutut */

.wrap {
	margin-left:200px;
	perspective: 800px;
	perspective-origin: 50% 100px;
}

.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
}


.cube div {
	text-align: center;
	position: absolute;
	width: 200px;
	height: 200px;
	background-color:rgba(0,50,100,0.05);	
	box-shadow: inset 0px 0px 25px 10px rgba(0,50,100,0.2);
}

.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}


@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

.cube {
	animation: spin 5s infinite linear;
}