/* Animated Canvas Container */
.animate_container {
  width: 300px;
  height: 200px;
  position: relative;
  margin: 0 auto 40px;
  xborder: 1px solid #CCC;
  -webkit-perspective: 1200px;
     -moz-perspective: 1200px;
       -o-perspective: 1200px;
          perspective: 1200px;
}

.canvas_preview {
	position: absolute;
	top: 50px;
	left: 0px;
	width: 100%;
	text-align: center;
	
	display:none;
}

.animate_container img { /* wordpress responsive being annoying! */
	max-width: none !important;
}

/* Canvas */
.animate_container #canvas {
  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 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}

/* Canvas Sides (including front) */
.animate_container #canvas figure {
  display: block;
  position: absolute;
  border: 1px solid black;
  margin: 0px;
  overflow: hidden;
}

/* Canvas (see through invisibility) */
.animate_container #canvas.panels-backface-invisible figure {
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* When images are set inside preview */
.animate_container #canvas figure img { position: absolute; }

/* Initial Setup (pretty much ignored once js kicks in) */
.animate_container #canvas .front { width: 298px; height: 198px; }
.animate_container #canvas .right, #canvas .left { width: 48px; height: 198px; left: 125px; }
.animate_container #canvas .top, #canvas .bottom { width: 298px; height: 48px; top: 75px; }

/* Canvas Background Colours (ignored) should be deleted in final! */
.animate_container #canvas .front  { background: white; }
.animate_container #canvas .right  { background: white; }
.animate_container #canvas .left   { background: white; }
.animate_container #canvas .top    { background: white; }
.animate_container #canvas .bottom { background: white; }

/* Canvas Setup Positions (reset once js kicks in) */
.animate_container #canvas .front  {
  -webkit-transform: translateZ( 25px );
     -moz-transform: translateZ( 25px );
       -o-transform: translateZ( 25px );
          transform: translateZ( 25px );
}
.animate_container #canvas .right {
  -webkit-transform: rotateY(   90deg ) translateZ( 150px );
     -moz-transform: rotateY(   90deg ) translateZ( 150px );
       -o-transform: rotateY(   90deg ) translateZ( 150px );
          transform: rotateY(   90deg ) translateZ( 150px );
}
.animate_container #canvas .left {
  -webkit-transform: rotateY(  -90deg ) translateZ( 150px );
     -moz-transform: rotateY(  -90deg ) translateZ( 150px );
       -o-transform: rotateY(  -90deg ) translateZ( 150px );
          transform: rotateY(  -90deg ) translateZ( 150px );
}
.animate_container #canvas .top {
  -webkit-transform: rotateX(   90deg ) translateZ( 100px );
     -moz-transform: rotateX(   90deg ) translateZ( 100px );
       -o-transform: rotateX(   90deg ) translateZ( 100px );
          transform: rotateX(   90deg ) translateZ( 100px );
}
.animate_container #canvas .bottom {
  -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
     -moz-transform: rotateX(  -90deg ) translateZ( 100px );
       -o-transform: rotateX(  -90deg ) translateZ( 100px );
          transform: rotateX(  -90deg ) translateZ( 100px );
}

/* mirrored preview */
.animate_container #canvas .top img, .animate_container #canvas .bottom img {
	-webkit-transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
}
.animate_container #canvas .left img, .animate_container #canvas .right img {
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}
.animate_container #canvas img.wrap {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}

/* Canvas Animations upon button presses */
.animate_container #canvas.show-front {
  -webkit-transform: translateZ(  -50px );
     -moz-transform: translateZ(  -50px );
       -o-transform: translateZ(  -50px );
          transform: translateZ(  -50px );
}
.animate_container #canvas.show-right {
  -webkit-transform: translateZ( -150px ) rotateY(  -60deg );
     -moz-transform: translateZ( -150px ) rotateY(  -60deg );
       -o-transform: translateZ( -150px ) rotateY(  -60deg );
          transform: translateZ( -150px ) rotateY(  -60deg );
}
.animate_container #canvas.show-left {
  -webkit-transform: translateZ( -150px ) rotateY(   60deg );
     -moz-transform: translateZ( -150px ) rotateY(   60deg );
       -o-transform: translateZ( -150px ) rotateY(   60deg );
          transform: translateZ( -150px ) rotateY(   60deg );
}
.animate_container #canvas.show-top {
  -webkit-transform: translateZ( -100px ) rotateX(  -60deg );
     -moz-transform: translateZ( -100px ) rotateX(  -60deg );
       -o-transform: translateZ( -100px ) rotateX(  -60deg );
          transform: translateZ( -100px ) rotateX(  -60deg );
}
.animate_container #canvas.show-bottom {
  -webkit-transform: translateZ( -100px ) rotateX(   60deg );
     -moz-transform: translateZ( -100px ) rotateX(   60deg );
       -o-transform: translateZ( -100px ) rotateX(   60deg );
          transform: translateZ( -100px ) rotateX(   60deg );
}