/*Set-up */
body {
 height: 100%;
 width: 100%;
 margin: 30px;
 padding-top: 400px;
	-webkit-perspective: 1000px; /* <-NB */
  background-color: black;
}


/* Container box to set the sides relative to */
.cube {
	margin: 0 auto;
	height: 400px;
	width: 400px;

	-webkit-transition: -webkit-transform 30.00s;
	transition: transform 30.00s; /* Animate the transform properties */

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
}

/* The faces of the cube */
.back,.back2,.back3,.front,.front2,.front3,.left,.left2,.left3,.right,.right2,.right3 {
	position: absolute;
  padding-top: 100px;
	height: 400px;
	width: 400px;
	text-align: center;
 
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: white;
}

/* Position the faces*/
.front{
  -webkit-transform : translateZ(300px) translateY(100px);
  transform         : translateZ(300px)translateY(100px);
  background-color  : rgba(208, 143, 143, 0.4);

}
.front2{
  -webkit-transform : translateZ(400px);
  transform         : translateZ(400px);
  background-color  : rgba(208, 143, 143, 0.4);

}
.front3{
  -webkit-transform : translateZ(500px) translateY(-100px);
  transform         : translateZ(500px) translateY(-100px);
  background-color  : rgba(208, 143, 143, 0.4);
}

.back {
  -webkit-transform : translateZ(-300px)  rotateY(180deg) translateY(100px);
  transform         : translateZ(-300px)  rotateY(180deg) translateY(100px);
    background-color  : rgba(131, 181, 142, 0.4);
}
.back2 {
  -webkit-transform : translateZ(-400px) rotateY(180deg);
  transform         : translateZ(-400px) rotateY(180deg);
    background-color  : rgba(131, 181, 142, 0.4);
}
.back3 {
  -webkit-transform : translateZ(-500px) translateY(-100px)  rotateY(180deg);
  transform         : translateZ(-500px) translateY(-100px)  rotateY(180deg);
    background-color  : rgba(131, 181, 142, 0.4);
}

.right {
  -webkit-transform : translateX(300px) rotateY(90deg) translateY(100px);
  transform         : translateX(300px) rotateY(90deg) translateY(100px);
  background-color  : rgba(136, 156, 189, 0.4);

}
.right2 {
  -webkit-transform : translateX(400px) rotateY(90deg);
  transform         : translateX(400px) rotateY(90deg);
  background-color  : rgba(136, 156, 189, 0.4);

}
.right3 {
  -webkit-transform : translateX(500px) translateY(-100px) rotateY(90deg);
  transform         : translateX(500px) translateY(-100px) rotateY(90deg);
  background-color  : rgba(136, 156, 189, 0.4);

}


.left {
  -webkit-transform : translateX(-300px) rotateY(-90deg) translateY(100px);
  transform         : translateX(-300px) rotateY(-90deg) translateY(100px);
     background-color  : rgba(243, 242, 167, 0.4);
}
.left2 {
  -webkit-transform : translateX(-400px) rotateY(-90deg);
  transform         : translateX(-400px) rotateY(-90deg);
     background-color  : rgba(243, 242, 167, 0.4);
}
.left3 {
  -webkit-transform : translateX(-500px) translateY(-100px) rotateY(-90deg);
  transform         : translateX(-500px) translateY(-100px) rotateY(-90deg);
     background-color  : rgba(243, 242, 167, 0.4);
}



/* Rotate the cube */
.cube:hover {
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg); /* Text bleed at 90¼ */
}