#calender-block-container {
  width: 1000px;
  height: 500px;  
  position: relative;
  margin: 200px auto 40px;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;  
  -webkit-perspective: 3000px;
     -moz-perspective: 3000px;
       -o-perspective: 3000px;
          perspective: 3000px;
    -webkit-transform: translate3d( -70px,0px,0px ) scale(0.25);
       -moz-transform: translate3d( -70px,0px,0px ) scale(0.25);
         -o-transform: translate3d( -70px,0px,0px ) scale(0.25);
            transform: translate3d( -70px,0px,0px ) scale(0.25);
  opacity: 0;
}
#cube {
  display: block;
  position: absolute;
  margin-top: -90px;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 3s;
     -moz-transition: -moz-transform 3s;
       -o-transition: -o-transform 3s;
          transition: transform 3s;
}

.boxface{
  display: block;
  position: absolute;
}

#cube.panels-backface-invisible {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}
#cube .front  {
  width: 1000px;
  height: 500px;
  background: #80aa7f;
  -webkit-transform: translateZ( 250px );
     -moz-transform: translateZ( 250px );
       -o-transform: translateZ( 250px );
          transform: translateZ( 250px );
}
#cube .back   {
  width: 1000px;
  height: 500px; 
  background: #F596AA;
  -webkit-transform: rotateX( -180deg ) translateZ( 250px );
     -moz-transform: rotateX( -180deg ) translateZ( 250px );
       -o-transform: rotateX( -180deg ) translateZ( 250px );
          transform: rotateX( -180deg ) translateZ( 250px );
}
#cube .right {
  width: 500px;
  height: 500px;
  background: #333333;
  -webkit-transform: rotateY(  90deg ) translate3d( 0,0,750px );
     -moz-transform: rotateY(  90deg ) translate3d( 0,0,750px );
       -o-transform: rotateY(  90deg ) translate3d( 0,0,750px );
          transform: rotateY(  90deg ) translate3d( 0,0,750px );
}
#cube .left {
  width: 500px;
  height: 500px; 
  background: #607890;
  -webkit-transform: rotateY( -90deg ) translate3d( 0,0,250px );
     -moz-transform: rotateY( -90deg ) translate3d( 0,0,250px );
       -o-transform: rotateY( -90deg ) translate3d( 0,0,250px );
          transform: rotateY( -90deg ) translate3d( 0,0,250px );
}
#cube .top {
  width: 1000px;
  height: 500px; 
  background: #50a4ae;
  -webkit-transform: rotateX( 90deg ) translateZ( 250px );
     -moz-transform: rotateX( 90deg ) translateZ( 250px );
       -o-transform: rotateX( 90deg ) translateZ( 250px );
          transform: rotateX( 90deg ) translateZ( 250px );
}
#cube .bottom {
  width: 1000px;
  height: 500px; 
  background: #f46964;
  -webkit-transform: rotateX( -90deg ) translateZ( 250px );
     -moz-transform: rotateX( -90deg ) translateZ( 250px );
       -o-transform: rotateX( -90deg ) translateZ( 250px );
          transform: rotateX( -90deg ) translateZ( 250px );
}

#cube.show-init {
  -webkit-transform: rotateX( 50deg ) rotateY( 180deg ) rotateZ( 120deg );
     -moz-transform: rotateX( 50deg ) rotateY( 180deg ) rotateZ( 120deg );
       -o-transform: rotateX( 50deg ) rotateY( 180deg ) rotateZ( 120deg );
          transform: rotateX( 50deg ) rotateY( 180deg ) rotateZ( 120deg );          
}
#cube.show-front {  
  -webkit-transform: translateZ( 0px );
     -moz-transform: translateZ( 0px );
       -o-transform: translateZ( 0px );
          transform: translateZ( 0px );
}
#cube.show-back {
  -webkit-transform: translateZ( 0px ) rotateX( -180deg );
     -moz-transform: translateZ( 0px ) rotateX( -180deg );
       -o-transform: translateZ( 0px ) rotateX( -180deg );
          transform: translateZ( 0px ) rotateX( -180deg );
}
#cube.show-right {
  -webkit-transform: translateZ( 0px ) rotateY(  -90deg );
     -moz-transform: translateZ( 0px ) rotateY(  -90deg );
       -o-transform: translateZ( 0px ) rotateY(  -90deg );
          transform: translateZ( 0px ) rotateY(  -90deg );
}
#cube.show-left {
  -webkit-transform: translateZ( 0px ) rotateY(   90deg );
     -moz-transform: translateZ( 0px ) rotateY(   90deg );
       -o-transform: translateZ( 0px ) rotateY(   90deg );
          transform: translateZ( 0px ) rotateY(   90deg );
}
#cube.show-top {
  -webkit-transform: translateZ( 0px ) rotateX(  -90deg );
     -moz-transform: translateZ( 0px ) rotateX(  -90deg );
       -o-transform: translateZ( 0px ) rotateX(  -90deg );
          transform: translateZ( 0px ) rotateX(  -90deg );
}
#cube.show-bottom {
  -webkit-transform: translateZ( 0px ) rotateX(   90deg );
     -moz-transform: translateZ( 0px ) rotateX(   90deg );
       -o-transform: translateZ( 0px ) rotateX(   90deg );
          transform: translateZ( 0px ) rotateX(   90deg );
}
#cube.show-front-test1 {
  -webkit-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( 20deg );
     -moz-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( 20deg );
       -o-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( 20deg );
          transform: translateZ( 0px ) rotateX( -10deg ) rotateY( 20deg );
}
#cube.show-front-test2 {
  -webkit-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( -20deg );
     -moz-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( -20deg );
       -o-transform: translateZ( 0px ) rotateX( -10deg ) rotateY( -20deg );
          transform: translateZ( 0px ) rotateX( -10deg ) rotateY( -20deg );
}

.show-front, .show-right, .show-top, .show-bottom, .show-front-test2{
  background-position: 50% 50%;
  width: 80px;
  height: 80px;
  border: none;
  background: transparent;
}

button:active{
  border: none;
}

.show-front{
  background-image:url('../image/btn/home.png');
  background-repeat: no-repeat;
}
.show-right{
  background-image:url('../image/btn/edit.png');
  background-repeat: no-repeat;
}
.show-top{
  background-repeat: no-repeat;
  background-image:url('../image/btn/prev.png');
}
.show-bottom{
  background-repeat: no-repeat;
  background-image:url('../image/btn/next.png');
}
.show-front-test2{
  background-repeat: no-repeat;
  background-image:url('../image/btn/view.png');
}