@-webkit-keyframes x-spin {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(180deg); }
	100%  { -webkit-transform: rotateX(360deg); }
}

@-webkit-keyframes y-spin {
	0%    { -webkit-transform: rotateY(0deg); }
	50%   { -webkit-transform: rotateY(180deg); }
	100%  { -webkit-transform: rotateY(360deg); }
}

@-webkit-keyframes z-spin {
	0%    { -webkit-transform: rotateZ(0deg); }
	50%   { -webkit-transform: rotateZ(180deg); }
	100%  { -webkit-transform: rotateZ(360deg); }
}

@-moz-keyframes x-spin {
	0%    { -moz-transform: rotateX(0deg); }
	50%   { -moz-transform: rotateX(180deg); }
	100%  { -moz-transform: rotateX(360deg); }
}

@-moz-keyframes y-spin {
	0%    { -moz-transform: rotateY(0deg); }
	50%   { -moz-transform: rotateY(180deg); }
	100%  { -moz-transform: rotateY(360deg); }
}

@-moz-keyframes z-spin {
	0%    { -moz-transform: rotateZ(0deg); }
	50%   { -moz-transform: rotateZ(180deg); }
	100%  { -moz-transform: rotateZ(360deg); }
}

.spin {
	-webkit-transform-style: preserve-3d;
	-webkit-animation-duration: 15s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform: rotate3d(0,0,0);
	-moz-transform-style: preserve-3d;
	-moz-animation-duration: 15s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-transform: rotate3d(0,0,0);
}

.x-spin {
	-webkit-animation-name: x-spin;
	-moz-animation-name: x-spin;
}
.y-spin {
	-webkit-animation-name: y-spin;
	-moz-animation-name: y-spin;
}
.z-spin {
	-webkit-animation-name: z-spin;
	-moz-animation-name: z-spin;
}

/* Animation */
.stage {	
	width: 200px;
	height: 200px;	
	-webkit-perspective: 800;
	-webkit-perspective-origin: 0, 0;
	-moz-perspective: 800;
	-moz-perspective-origin: 0, 0;
}

.object {
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 2s linear;
	-moz-transform-style: preserve-3d;
	-moz-transition: -webkit-transform 2s linear;
}

/* Shape */
.face {
	cursor: pointer;
	position: absolute;
	zoom: 260%;
	width: 100px;
	height: 100px;
	background-color: #ccc;
	border: 1px solid #fff;
	color: #FFFFFF;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
	-webkit-transition:
		-webkit-transform 1s linear,
		background-color 500ms linear,
		border-color 500ms linear;
	-moz-transition:
		-moz-transform 1s linear,
		background-color 500ms linear,
		border-color 500ms linear;
}
.face:hover {
	background-color: rgba(255, 0, 0, 0.5);
	border-color: rgba(32, 0, 0, 0.5);
}

/* cube construction*/
.object.cube .face-1 {
	-webkit-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
	-moz-transform: rotateY(0deg) translate3d(-50px, -50px, 50px);
}
.object.cube .face-2 {
	-webkit-transform: rotateY(90deg) translate3d(0px, -50px, 0px);
	-moz-transform: rotateY(90deg) translate3d(0px, -50px, 0px);
}
.object.cube .face-3 {
	-webkit-transform: rotateY(180deg) translate3d(50px, -50px, 50px);
	-moz-transform: rotateY(180deg) translate3d(50px, -50px, 50px);
}
.object.cube .face-4 {
	-webkit-transform: rotateY(-90deg) translate3d(0px, -50px, 100px);
	-moz-transform: rotateY(-90deg) translate3d(0px, -50px, 100px);
}
.object.cube .face-5 {
	-webkit-transform: rotateX(90deg) translate3d(-50px, 0, 100px);
	-moz-transform: rotateX(90deg) translate3d(-50px, 0, 100px);
}
.object.cube .face-6 {
	-webkit-transform: rotateX(90deg) translate3d(-50px, 0px, 0px);
	-moz-transform: rotateX(90deg) translate3d(-50px, 0px, 0px);
}

@media screen and (max-width: 680px) {
	.stage {	
		width: 150px;
		height: 100px;
		margin-left:150px;
		-webkit-perspective: 800;
		-webkit-perspective-origin: 0, 0;
		-moz-perspective: 800;
		-moz-perspective-origin: 0, 0;
	}
	.face {
		cursor: pointer;
		position: absolute;		
		zoom: 120%;
		width: 100px;
		height: 100px;
		background-color: #ccc;
		border: 1px solid #fff;
		color: #FFFFFF;
		font-size: 20px;
		text-align: center;
		line-height: 100px;
		-webkit-transition:
			-webkit-transform 1s linear,
			background-color 500ms linear,
			border-color 500ms linear;
		-moz-transition:
			-moz-transform 1s linear,
			background-color 500ms linear,
			border-color 500ms linear;
	}
	


}