@charset "UTF-8";
/* CSS Document */
/* webkit for Chrome, Safari, Opera */
h4, p {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container_3D {
	-webkit-perspective: 400px;
	-webkit-perspective-origin: 16% 50px;
	perspective: 400px;
	perspective-origin: 16% 50px;
}
.cube {
	position: relative;
	margin: 0 40px;
	height: 100px;
	width: 100px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.A:hover {
	-webkit-animation: hoverCubeA 4s;
	animation: hoverCubeA 4s;
}
.B {
	-webkit-transition: -webkit-transform 2s;
	transition: transform 2s;
}
.B:hover {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.side {
	position: absolute;
	height: 96px;
	width: 96px;
/*	padding: 10px; */
	background-color: rgba(255, 55, 55, .7);	
}
.one {
	-webkit-transform: rotateX(90deg) translateZ(50px);
	transform:  rotateX(90deg) translateZ(50px);
}
.two {
	-webkit-transform: translateZ(50px);	
	transform: translateZ(50px);
}
.three {
	-webkit-transform: rotateY(90deg) translateZ(50px);
	transform: rotateY(90deg) translateZ(50px);	
}
.four {
	-webkit-transform: rotateY(180deg) translateZ(50px);
	transform: rotateY(180deg) translateZ(50px);
}
.five {
	-webkit-transform: rotateY(-90deg) translateZ(50px);
	transform: rotateY(-90deg) translateZ(50px);
}
.six {
	-webkit-transform: rotateX(-90deg) translateZ(50px);
	transform: rotateX(-90deg) rotateZ(90deg) translateZ(50px) ;
}

@-webkit-keyframes hoverCubeA {
	50%  { -webkit-transform: rotateX(180deg) }
}
@keyframes hoverCubeA {
	50%  { transform: rotateX(180deg) }
}