#theArt {
	width: 450px;
	height: 450px;
	position: relative;
	margin: 0 auto 40px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
}
#cube {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}
#cube div.panel {
	display: block;
	position: absolute;
	width: 450px;
	height: 450px;
	background-color: #fff;
}
#cube p {
	text-align: justify;
}
#cube div.innerContainer {
	position: relative;
	height: 450px;
}
#cube div.innerContainer p.show-buttons {
	position: absolute;
	bottom: 20px;
	width: 450px;	
}
#show-buttons {
	text-align:  center;	
}
#cube .front {
	-webkit-transform: translateZ( 225px );
	-moz-transform: translateZ( 225px );
	-ms-transform: translateZ( 225px );
	-o-transform: translateZ( 225px );
	transform: translateZ( 225px );
}
#cube .back {
	display: none;
	-webkit-transform: rotateX( -180deg ) translateZ( 225px );
	-moz-transform: rotateX( -180deg ) translateZ( 225px );
	-ms-transform: rotateX( -180deg ) translateZ( 225px );
	-o-transform: rotateX( -180deg ) translateZ( 225px );
	transform: rotateX( -180deg ) translateZ( 225px );
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .right {
	-webkit-transform: rotateY( 90deg ) translateZ( 225px );
	-moz-transform: rotateY( 90deg ) translateZ( 225px );
	-ms-transform: rotateY( 90deg ) translateZ( 225px );
	-o-transform: rotateY( 90deg ) translateZ( 225px );
	transform: rotateY( 90deg ) translateZ( 225px );
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .left {
	-webkit-transform: rotateY( -90deg ) translateZ( 225px );
	-moz-transform: rotateY( -90deg ) translateZ( 225px );
	-ms-transform: rotateY( -90deg ) translateZ( 225px );
	-o-transform: rotateY( -90deg ) translateZ( 225px );
	transform: rotateY( -90deg ) translateZ( 225px );
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .top {
	-webkit-transform: rotateX( 90deg ) translateZ( 225px );
	-moz-transform: rotateX( 90deg ) translateZ( 225px );
	-ms-transform: rotateX( 90deg ) translateZ( 225px );
	-o-transform: rotateX( 90deg ) translateZ( 225px );
	transform: rotateX( 90deg ) translateZ( 225px );
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube .bottom {
	-webkit-transform: rotateX( -90deg ) translateZ( 225px );
	-moz-transform: rotateX( -90deg ) translateZ( 225px );
	-ms-transform: rotateX( -90deg ) translateZ( 225px );
	-o-transform: rotateX( -90deg ) translateZ( 225px );
	transform: rotateX( -90deg ) translateZ( 225px );
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
#cube.show-front {
	-webkit-transform: translateZ( -225px );
	-moz-transform: translateZ( -225px );
	-ms-transform: translateZ( -225px );
	-o-transform: translateZ( -225px );
	transform: translateZ( -225px );
}
#cube.show-back {
	-webkit-transform: translateZ( -225px ) rotateX( 180deg );
	-moz-transform: translateZ( -225px ) rotateX( 180deg );
	-ms-transform: translateZ( -225px ) rotateX( 180deg );
	-o-transform: translateZ( -225px ) rotateX( 180deg );
	transform: translateZ( -225px ) rotateX( 180deg );
}
#cube.show-right {
	-webkit-transform: translateZ( -225px ) rotateY( -90deg );
	-moz-transform: translateZ( -225px ) rotateY( -90deg );
	-ms-transform: translateZ( -225px ) rotateY( -90deg );
	-o-transform: translateZ( -225px ) rotateY( -90deg );
	transform: translateZ( -225px ) rotateY( -90deg );
}
#cube.show-left {
	-webkit-transform: translateZ( -225px ) rotateY( 90deg );
	-moz-transform: translateZ( -225px ) rotateY( 90deg );
	-ms-transform: translateZ( -225px ) rotateY( 90deg );
	-o-transform: translateZ( -225px ) rotateY( 90deg );
	transform: translateZ( -225px ) rotateY( 90deg );
}
#cube.show-top {
	-webkit-transform: translateZ( -225px ) rotateX( -90deg );
	-moz-transform: translateZ( -225px ) rotateX( -90deg );
	-ms-transform: translateZ( -225px ) rotateX( -90deg );
	-o-transform: translateZ( -225px ) rotateX( -90deg );
	transform: translateZ( -225px ) rotateX( -90deg );
}
#cube.show-bottom {
	-webkit-transform: translateZ( -225px ) rotateX( 90deg );
	-moz-transform: translateZ( -225px ) rotateX( 90deg );
	-ms-transform: translateZ( -225px ) rotateX( 90deg );
	-o-transform: translateZ( -225px ) rotateX( 90deg );
	transform: translateZ( -225px ) rotateX( 90deg );
}
