
.cube {
	width: 200px;
	height: 200px;
	position: absolute;
	
	-webkit-transform: rotateY(11deg) rotateX(11deg);
    -moz-transform: rotateY(11deg) rotateX(11deg);
    -o-transform: rotateY(11deg) rotateX(11deg);
    -ms-transform: rotateY(11deg) rotateX(11deg);
	transform: rotateY(11deg) rotateX(11deg);
	
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.cube span {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
}

.cube_front {
	background: #003a66;

	-webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
	transform: translateZ(100px);
}

.cube_bottom {
	background: #001d33;
	border-top: 1px solid #001d33;
	
	-webkit-transform: translateY(100px) rotateX(-90deg) rotateZ(-90deg);
    -moz-transform: translateY(100px) rotateX(-90deg) rotateZ(-90deg);
    -o-transform: translateY(100px) rotateX(-90deg) rotateZ(-90deg);
    -ms-transform: translateY(100px) rotateX(-90deg) rotateZ(-90deg);
	transform: translateY(100px) rotateX(-90deg) rotateZ(-90deg);
}

.cube_left {
	background: #001d33;
	border-top: 1px solid #001d33;
	
	-webkit-transform: translateX(-100px) rotateY(-90deg);
    -moz-transform: translateX(-100px) rotateY(-90deg);
    -o-transform: translateX(-100px) rotateY(-90deg);
    -ms-transform: translateX(-100px) rotateY(-90deg);
	transform: translateX(-100px) rotateY(-90deg);
} 

.cube_animation {
	-webkit-animation: cube_push 475ms ease-out;
	-moz-animation: cube_push 475ms ease-out;
	-o-animation: cube_push 475ms ease-out;
	animation: cube_push 475ms ease-out;
}

@-webkit-keyframes cube_push {
	0%, 100% {
		border: none;
	}
	50% {
		border: none;
		
		-webkit-transform: translateZ(0px);
		-moz-transform: translateZ(0px);
		-o-transform: translateZ(0px);
		-ms-transform: translateZ(0px);
		transform: translateZ(0px);
	}
}

@-moz-keyframes cube_push {
	0%, 100% {
		border: none;
	}
	50% {
		border: none;
		
		-webkit-transform: translateZ(0px);
		-moz-transform: translateZ(0px);
		-o-transform: translateZ(0px);
		-ms-transform: translateZ(0px);
		transform: translateZ(0px);
	}
}

@-o-keyframes cube_push {
	0%, 100% {
		border: none;
	}
	50% {
		border: none;
		
		-webkit-transform: translateZ(0px);
		-moz-transform: translateZ(0px);
		-o-transform: translateZ(0px);
		-ms-transform: translateZ(0px);
		transform: translateZ(0px);
	}
}

@keyframes cube_push {
	0%, 100% {
		border: none;
	}
	50% {
		border: none;
		
		-webkit-transform: translateZ(0px);
		-moz-transform: translateZ(0px);
		-o-transform: translateZ(0px);
		-ms-transform: translateZ(0px);
		transform: translateZ(0px);
	}
}


