/* Set-up */
body{
/*perspective*/
-webkit-perspective:800px;
   -moz-perspective:800px;
    -ms-perspective:800px;
     -o-perspective:800px;
        perspective:800px;
/* <-NB */
:;
}
/* Container box to set the sides relative to */
.cube{
margin:150px;
padding:50px;
height:400px;
width:400px;
/*transition*/
-webkit-transition:-webkit-transform 60.00s;
   -moz-transition:   -moz-transform 60.00s;
     -o-transition:     -o-transform 60.00s;
        transition:        transform 60.00s;
/* Animate the transform properties */
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
/* <-NB */
:;
}
/* Rotate the cube */
.cube:hover{
/*transform*/
-webkit-transform:rotateY(450deg);
   -moz-transform:rotateY(450deg);
    -ms-transform:rotateY(450deg);
     -o-transform:rotateY(450deg);
        transform:rotateY(450deg);
/* Text bleed at 90¼ */
:;
}
/* The two faces of the cube */
.back1,.right2,.front3,.left4,.middle5,.middle6,.middle7,.middle8,.midback9,.midback10{
position:absolute;
height:300px;
width:400px;
text-align:center;
}
/* Position the faces*/


.back1{
/*transform*/
-webkit-transform:translateZ(-200px) translateY(-150px);
   -moz-transform:translateZ(-200px) translateY(-150px);
    -ms-transform:translateZ(-200px) translateY(-150px);
     -o-transform:translateZ(-200px) translateY(-150px);
        transform:translateZ(-200px) translateY(-150px);
opacity: 0.5;

text-align:center;
font-family:arial;
}


.right2{
/*transform*/
-webkit-transform:translateX(270px) rotateY(-90deg) translateY(200px);
   -moz-transform:translateX(270px) rotateY(-90deg)translateY(200px);
    -ms-transform:translateX(270px) rotateY(-90deg)translateY(200px);
     -o-transform:translateX(270px) rotateY(-90deg)translateY(200px);
        transform:translateX(270px) rotateY(-90deg)translateY(200px);
opacity: 0.5;
font-size:20px;
text-align:bottom;
font-family:arial;
}


.front3{
/*transform*/
-webkit-transform:translateZ(200px) rotateY(180deg);
   -moz-transform:translateZ(200px) rotateY(180deg);
    -ms-transform:translateZ(200px) rotateY(180deg);
     -o-transform:translateZ(200px) rotateY(180deg);
        transform:translateZ(200px) rotateY(180deg);
opacity: 0.5;
font-size:20px;
text-align:center;
font-family:arial;
}


.left4{
/*transform*/
-webkit-transform:translateX(-100px) translateY(75px) rotateY(90deg);
   -moz-transform:translateX(-100px) translateY(75px) rotateY(90deg);
    -ms-transform:translateX(-100px) translateY(75px) rotateY(90deg);
     -o-transform:translateX(-100px) translateY(75px) rotateY(90deg);
        transform:translateX(-100px) translateY(75px) rotateY(90deg);
opacity: 0.5;
font-size:20px;
text-align:center;
font-family:arial;
}


.middle5{
/*transform*/
-webkit-transform:translateZ(100px) translateY(50px) translateX(50px);
   -moz-transform:translateZ(100px) translateY(50px) translateX(50px);
    -ms-transform:translateZ(100px) translateY(50px) translateX(50px);
     -o-transform:translateZ(100px) translateY(50px) translateX(50px);
        transform:translateZ(100px) translateY(50px) translateX(50px);
background-color:rgba(175, 175, 175, 0.2);
padding-top:150px;
padding-right:20px;
padding-left:20px;
font-size:30px;
text-align:center;
font-family:arial;

}


.middle6{
/*transform*/
-webkit-transform:translateZ(-150px) translateY(150px) rotateY(-90deg);
   -moz-transform:translateZ(-150px) translateY(150px) rotateY(-90deg);
    -ms-transform:translateZ(-150px) translateY(150px) rotateY(-90deg);
     -o-transform:translateZ(-150px) translateY(150px) rotateY(-90deg);
        transform:translateZ(-150px) translateY(150px) rotateY(-90deg);
background-color:rgba(175, 175, 175, 0.2);
padding-top: 100px;
font-size:15px;
text-align:center;
font-family:arial;
}


.middle7{
/*transform*/
-webkit-transform:rotateY(180deg) translateZ(120px);
   -moz-transform:translateZ(120px) transl ateY(50px) rota teY(90deg);
    -ms-transform:translateZ(120px) transl ateY(50px) rota teY(90deg);
     -o-transform:translateZ(120px) transl ateY(50px) rota teY(90deg);
        transform:translateZ(120px) transl ateY(50px) rota teY(90deg);
background-color:rgba(175, 175, 175, 0.2);
padding-top: 50px;
font-size:25px;
text-align:center;
font-family:arial;
}


.middle8{
/*transform*/
-webkit-transform:translateZ(0px) translateX(100px) rotateY(90deg);
   -moz-transform:translateZ(120px) translateX(100px) rotateY(90deg);
    -ms-transform:translateZ(120px) translateX(100px) rotateY(90deg);
     -o-transform:translateZ(120px) translateX(100px) rotateY(90deg);
        transform:translateZ(120px) translateX(100px) rotateY(90deg);
background-color:rgba(175, 175, 175, 0.2);
padding-top:350px;
padding-left: 50px;
font-size:35px;
text-align:bottom;
font-family:arial;
}


.midback9{
/*transform*/
-webkit-transform:rotateY(0deg) translateY(100px);
   -moz-transform:rotateY(90deg) translateY(100px);
    -ms-transform:rotateY(90deg) translateY(100px);
     -o-transform:rotateY(90deg) translateY(100px);
        transform:rotateY(90deg) translateY(100px);
font-size:20px;
text-align:center;
font-family:arial;
}
.midback10{
/*transform*/
-webkit-transform:rotateY(-90deg) translateY(120px);
   -moz-transform:rotateY(180deg) translateY(100px);
    -ms-transform:rotateY(180deg) translateY(100px);
     -o-transform:rotateY(180deg) translateY(100px);
        transform:rotateY(180deg) translateY(100px);
font-size:20px;
text-align:center;
font-family:arial;
}