.cube_wrapper
{
	display: block;
	display: relative;
	height: 360px;
}
.cube_wrapper *,
.cube_wrapper *:before,
.cube_wrapper *:after 
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}
.cube_wrapper .viewport
{
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
 }
.cube_wrapper .cube 
{
	position: absolute;
	margin: 0;
	height: 200px;
	width: 200px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.cube_wrapper .cube > div
{
	overflow: hidden;
	position: absolute;
	height: 200px;
	width: 200px;
	background-color: rgba(255, 255, 255, .6);
	-moz-box-shadow:    inset 0 0 20px #ffffff;
	-webkit-box-shadow: inset 0 0 20px #ffffff;
	box-shadow:         inset 0 0 20px #ffffff;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	-ms-touch-callout: none;
	-o-touch-callout: none;
	touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none; 
}
.cube_wrapper .cube > div > div.face
{
	width: 200px;
	height: 200px;
	line-height: 200px;
	font-size: 80px;
	text-align: center;
	color: #1b9bd8;
	-webkit-transition: color 600ms;
	-moz-transition: color 600ms;
	-ms-transition: color 600ms;
	-o-transition: color 600ms;
	transition: color 600ms; 
 }
.cube_wrapper .cube > div > div.face:hover
{
	background-color: rgba(240, 240, 200, .6);
	color: #1f7;
}
.cube_wrapper .cube > div > div.face.active 
{
	color: red; 
}
.cube_wrapper .cube > div:hover 
{
	cursor: pointer; 
}
.cube_wrapper .cube > div:active 
{
	cursor: pointer; 
}
.cube_wrapper .cube > div:first-child 
{
	-webkit-transform: rotateX(90deg) translateZ(100px);
	-moz-transform: rotateX(90deg) translateZ(100px);
	-ms-transform: rotateX(90deg) translateZ(100px);
	-o-transform: rotateX(90deg) translateZ(100px);
	transform: rotateX(90deg) translateZ(100px);
	outline: 1px solid transparent;
	background-color: rgba(200, 0, 0, 0.6);
}
.cube_wrapper .cube > div:nth-child(2)
{
	-webkit-transform: translateZ(100px);
	-moz-transform: translateZ(100px);
	-ms-transform: translateZ(100px);
	-o-transform: translateZ(100px);
	transform: translateZ(100px);
	outline: 1px solid transparent; 
	background-color: rgba(200, 200, 0, 0.6);
}
.cube_wrapper .cube > div:nth-child(3) 
{
	-webkit-transform: rotateY(90deg) translateZ(100px);
	-moz-transform: rotateY(90deg) translateZ(100px);
	-ms-transform: rotateY(90deg) translateZ(100px);
	-o-transform: rotateY(90deg) translateZ(100px);
	transform: rotateY(90deg) translateZ(100px);
	outline: 1px solid transparent; 
	background-color: rgba(0, 100, 200, 0.6);
}
.cube_wrapper .cube > div:nth-child(4)
{
	-webkit-transform: rotateY(180deg) translateZ(100px);
	-moz-transform: rotateY(180deg) translateZ(100px);
	-ms-transform: rotateY(180deg) translateZ(100px);
	-o-transform: rotateY(180deg) translateZ(100px);
	transform: rotateY(180deg) translateZ(100px);
	outline: 1px solid transparent; 
	background-color: rgba(200, 0, 200, 0.6);
}
.cube_wrapper .cube > div:nth-child(5)
{
	-webkit-transform: rotateY(-90deg) translateZ(100px);
	-moz-transform: rotateY(-90deg) translateZ(100px);
	-ms-transform: rotateY(-90deg) translateZ(100px);
	-o-transform: rotateY(-90deg) translateZ(100px);
	transform: rotateY(-90deg) translateZ(100px);
	outline: 1px solid transparent; 
	background-color: rgba(100, 100, 200, 0.6);
}
.cube_wrapper .cube > div:nth-child(6)
{
	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
	transform: rotateX(-90deg) rotate(180deg) translateZ(100px);
	outline: 1px solid transparent; 
	background-color: rgba(0, 200, 0, 0.6);
}
.cube_wrapper object 
{
	opacity: 0.5; 
}
.cube_wrapper object:hover 
{
	opacity: 1; 
}