#texty
{
border:5px;
border-color:black;
   position: absolute;
   display:none;
   top: 25px;
   left: 50%; 
   margin-left: -288px; 
}


button
{
font-size:14px;
margin:0px;
padding:0px;
}




.img
{
max-width:100%;
max-height:100%;
}

h1,h2,h3,h4
{padding: 0;
margin: 0;}

h1{font-size:38px;}
h2{font-size:28.5px;}
h3{font-size:22.8px;}
h4{font-size:19px;}
p{font-size:16.285714285714px;}

.overlay
{
z-index:10;
    width: 576px;
    height:576px;
    position: absolute;
    left: 50%; 
    margin-left: -288px; 
	overflow:auto;
	border: 2px solid transparent;
}
.offscreen
{
left:5000px;
}
.onscreen
{
left: 50%;
}









.container {
	width: 576px;
	height: 576px;
      position: relative;
      margin: 0 auto -20px;
      -webkit-perspective: 2880;
         -moz-perspective: 2880;
           -o-perspective: 2880;
              perspective: 2880;
    }

   

    #cube figure {
      display: block;
      position: absolute;
      width: 576px;
      height: 576px;
      border: 2px solid black;
    }




    #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #cube .front  { background: hsla(   0, 100%, 50%, 0.95 ); }
    #cube .back   { background: hsla(  60, 100%, 50%, 0.95 ); }
    #cube .right  { background: hsla( 120, 100%, 50%, 0.95 ); }
    #cube .left   { background: hsla( 180, 100%, 50%, 0.95 ); }
    #cube .top    { background: hsla( 240, 100%, 50%, 0.95 ); }
    #cube .bottom { background: hsla( 300, 100%, 50%, 0.95 ); }

    #cube .front  {
      -webkit-transform: translateZ( 288px );
         -moz-transform: translateZ( 288px );
           -o-transform: translateZ( 288px );
              transform: translateZ( 288px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 288px );
         -moz-transform: rotateX( -180deg ) translateZ( 288px );
           -o-transform: rotateX( -180deg ) translateZ( 288px );
              transform: rotateX( -180deg ) translateZ( 288px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 288px );
         -moz-transform: rotateY(   90deg ) translateZ( 288px );
           -o-transform: rotateY(   90deg ) translateZ( 288px );
              transform: rotateY(   90deg ) translateZ( 288px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 288px );
         -moz-transform: rotateY(  -90deg ) translateZ( 288px );
           -o-transform: rotateY(  -90deg ) translateZ( 288px );
              transform: rotateY(  -90deg ) translateZ( 288px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 288px );
         -moz-transform: rotateX(   90deg ) translateZ( 288px );
           -o-transform: rotateX(   90deg ) translateZ( 288px );
              transform: rotateX(   90deg ) translateZ( 288px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 288px );
         -moz-transform: rotateX(  -90deg ) translateZ( 288px );
           -o-transform: rotateX(  -90deg ) translateZ( 288px );
              transform: rotateX(  -90deg ) translateZ( 288px );
    }

    #cube.show-front {
      -webkit-transform: translateZ( -288px );
         -moz-transform: translateZ( -288px );
           -o-transform: translateZ( -288px );
              transform: translateZ( -288px );
    }
    #cube.show-back {
      -webkit-transform: translateZ( -288px ) rotateX( -180deg );
         -moz-transform: translateZ( -288px ) rotateX( -180deg );
           -o-transform: translateZ( -288px ) rotateX( -180deg );
              transform: translateZ( -288px ) rotateX( -180deg );
    }
    #cube.show-right {
      -webkit-transform: translateZ( -288px ) rotateY(  -90deg );
         -moz-transform: translateZ( -288px ) rotateY(  -90deg );
           -o-transform: translateZ( -288px ) rotateY(  -90deg );
              transform: translateZ( -288px ) rotateY(  -90deg );
    }
    #cube.show-left {
      -webkit-transform: translateZ( -288px ) rotateY(   90deg );
         -moz-transform: translateZ( -288px ) rotateY(   90deg );
           -o-transform: translateZ( -288px ) rotateY(   90deg );
              transform: translateZ( -288px ) rotateY(   90deg );
    }
    #cube.show-top {
      -webkit-transform: translateZ( -288px ) rotateX(  -90deg );
         -moz-transform: translateZ( -288px ) rotateX(  -90deg );
           -o-transform: translateZ( -288px ) rotateX(  -90deg );
              transform: translateZ( -288px ) rotateX(  -90deg );
    }
    #cube.show-bottom {
      -webkit-transform: translateZ( -288px ) rotateX(   90deg );
         -moz-transform: translateZ( -288px ) rotateX(   90deg );
           -o-transform: translateZ( -288px ) rotateX(   90deg );
              transform: translateZ( -288px ) rotateX(   90deg );
     
    }

.centered
{
text-align:center;	
}

.editable
{
padding:20px 10px;	
height: 535px;
}

#cube iframe
{
height: 288px !important;
width: 535.68px !important;
}


 #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 0.5s;
         -moz-transition: -moz-transform 0.5s;
           -o-transition: -o-transform 0.5s;
              transition: transform 0.5s;
    }
   
   
.faster {
      -webkit-transition: -webkit-transform 0.2s !important;
         -moz-transition: -moz-transform 0.2s !important;
           -o-transition: -o-transform 0.2s !important;
              transition: transform 0.2s !important;
    }