.area {
	width: 800px;
	height: 700px;
	background: #f5f5f5;
	margin: 0 auto;
	position: relative;
	perspective: 2000px;
	-webkit-perspective: 2000px;
	-moz-perspective: 2000px;
	overflow: hidden;
}

.spin{
	
	-moz-animation:mozmymove 17s infinite linear;
	-webkit-animation:wkmymove 17s infinite linear;
			
}



.shadow{
	width: 300px;
	height: 300px;
	border-radius: 150px;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(255,255,255,0.2) 69%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(69%,rgba(255,255,255,0.2)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.2) 69%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.2) 69%,rgba(255,255,255,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.2) 69%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(255,255,255,0.2) 69%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	opacity: .50;
	
	position: relative;
	top: 200px;
	left: 250px;
	transform:skew(25deg, -0deg) translateZ(-50px);
	-ms-transform:skew(25deg, -0deg) translateZ(-50px); /* IE 9 */
	-webkit-transform:skew(25deg, -0deg) translateZ(-50px); /* Safari and Chrome */
		
}
.cross{
	width: 100%;
	height: 100%;
	
	position: absolute;
	
	-webkit-transform-style:preserve-3d;
	-webkit-transform:translateZ(-100px) ;
	-moz-transform-style:preserve-3d;
	-moz-transform:translateZ(-100px) ;
	-webkit-transform-origin: 50% 50%;
	
	backface-visibility: hidden;
	 -webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
}

.cross:hover{
	
}

@keyframes mozmymove
{
0% {-moz-transform:translateZ(-100px) rotateX(33deg) rotateY(33deg);}

50% {-moz-transform:translateZ(-100px) rotateX(393deg) rotateY(393deg);}

100% {-moz-transform:translateZ(-100px) rotateX(753deg) rotateY(753deg);}
}

@-webkit-keyframes wkmymove /* Safari and Chrome */
{
0% {-webkit-transform:translateZ(-100px) rotateX(33deg) rotateY(33deg);}

50% {-webkit-transform:translateZ(-100px) rotateX(393deg) rotateY(393deg);}

100% {-webkit-transform:translateZ(-100px) rotateX(753deg) rotateY(753deg);}
}

.middle.explode{
	-moz-animation:mozmidexplode 3s linear;
	-webkit-animation:wkmidexplode 3s linear;
}
.mid-right.explode{
	-moz-animation:mozmrexplode 3s linear;
	-webkit-animation:wkmrexplode 3s linear;
}
.mid-left.explode{
	-moz-animation:mozmlexplode 3s linear;
	-webkit-animation:wkmlexplode 3s linear;
}
.upper.explode{
	-moz-animation:mozupexplode 3s linear;
	-webkit-animation:wkupexplode 3s linear;
}
.lower.explode{
	-moz-animation:mozlwexplode 3s linear;
	-webkit-animation:wklwexplode 3s linear;
}
.mid-front.explode{
	-moz-animation:mozmfexplode 3s linear;
	-webkit-animation:wkmfexplode 3s linear;
}
.mid-back.explode{
	-moz-animation:mozmbexplode 3s linear;
	-webkit-animation:wkmbexplode 3s linear;
}

@keyframes mozmidexplode
{
0% {top: -1000px; left: 1000px;}

50% {top: 150; left: 750px;}

100% {top: 300px; left: 350px;}
}

@-webkit-keyframes wkmidexplode /* Safari and Chrome */
{
0% {top: -1000px; left: 1000px;}

50% {top: 150; left: 750px;}

100% {top: 300px; left: 350px;}
}

@-webkit-keyframes wkmrexplode /* Safari and Chrome */
{
0% {top: 300px; left: 1000px;}

50% {top: 300px; left: 750px;}

100% {top: 300px; left: 450px;}
}

@-webkit-keyframes wkmlexplode /* Safari and Chrome */
{
0% {top: 300px; left: -1000px;}

50% {top: 300; left: 150px;}

100% {top: 300px; left: 250px;}
}

@-webkit-keyframes wkupexplode /* Safari and Chrome */
{
0% {top: -100px; left: 350px;}

50% {top: 00; left: 350px;}

100% {top: 200px; left: 350px;}
}

@-webkit-keyframes wklwexplode /* Safari and Chrome */
{
0% {top: 1000px; left: 350px;}

50% {top: 600; left: 350px;}

100% {top: 400px; left: 350px;}
}

@-webkit-keyframes wkmfexplode /* Safari and Chrome */
{
0% {top: 1000px; left: 1000px;}

50% {top: 750px; left: 750px;}

100% {top: 300px; left: 350px;}
}

@-webkit-keyframes wkmbexplode /* Safari and Chrome */
{
0% {top: 300px; left: 1000px; -webkit-transform:translateZ(600px); }

50% {top: 300; left: 750px; -webkit-transform:translateZ(300px);}

100% {top: 300px; left: 350px; -webkit-transform:translateZ(100px);}
}

@-moz-keyframes mozmrexplode /* Safari and Chrome */
{
0% {top: 300px; left: 1000px;}

50% {top: 300px; left: 750px;}

100% {top: 300px; left: 450px;}
}

@-moz-keyframes mozmlexplode /* Safari and Chrome */
{
0% {top: 300px; left: -1000px;}

50% {top: 300; left: 150px;}

100% {top: 300px; left: 250px;}
}

@-moz-keyframes mozupexplode /* Safari and Chrome */
{
0% {top: -100px; left: 350px;}

50% {top: 00; left: 350px;}

100% {top: 200px; left: 350px;}
}

@-moz-keyframes mozlwexplode /* Safari and Chrome */
{
0% {top: 1000px; left: 350px;}

50% {top: 600; left: 350px;}

100% {top: 400px; left: 350px;}
}

@-moz-keyframes mozmfexplode /* Safari and Chrome */
{
0% {top: 1000px; left: 1000px;}

50% {top: 750px; left: 750px;}

100% {top: 300px; left: 350px;}
}

@-moz-keyframes mozmbexplode /* Safari and Chrome */
{
0% {top: 300px; left: 1000px; -moz-transform:translateZ(600px); }

50% {top: 300; left: 750px; -moz-transform:translateZ(300px);}

100% {top: 300px; left: 350px; -moz-transform:translateZ(100px);}
}

.cube{
	width: 100px;
	height: 100px;
	display: block;
	position: absolute;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:translateZ(-0px);
	-moz-transform-style:preserve-3d;
	-moz-transform:translateZ(-0px);
	-webkit-backface-visibility: hidden;
	  -moz-backface-visibility:    hidden;
	  -ms-backface-visibility:     hidden;
		}

.middle{
	top: 300px;
	left: 350px;
}

.upper{
	top: 200px;
	left: 350px;
}

.lower{
	top: 400px;
	left: 350px;
}
.mid-right{
	top: 300px;
	left: 450px;
}
.mid-left{
	top: 300px;
	left: 250px;
}
.mid-front{
	top: 300px;
	left: 350px;
	-webkit-transform:translateZ(100px);
	-moz-transform:translateZ(100px);
}
.mid-back{
	top: 300px;
	left: 350px;
	-webkit-transform:translateZ(-100px);
	-moz-transform:translateZ(-100px);
}

.shape-shift{
	-moz-animation:mozshapshift 9s infinite linear alternate;
	-webkit-animation:wkshapeshift 9s infinite
	linear alternate;
}

@-moz-keyframes mozshapeshift /* Safari and Chrome */
{
0% {padding: 50%;}
33% {
	padding: 50%;
}
50% {padding: 25%;}

66% {
	padding: 15%;
}

100% {padding: 0;}
}
@-webkit-keyframes wkshapeshift /* Safari and Chrome */
{
0% {padding: 50%;}
33% {
	padding: 50%;
}
50% {padding: 25%;}

66% {
	padding: 15%;
}

100% {padding: 0;}

}


.face{
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: #3d0851; /* Old browsers */
	background: rgb(103,67,122); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjc0MzdhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDclIiBzdG9wLWNvbG9yPSIjNWQyODdhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkMGE1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(-45deg,  rgba(103,67,122,1) 0%, rgba(93,40,122,1) 47%, rgba(61,10,81,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(103,67,122,1)), color-stop(47%,rgba(93,40,122,1)), color-stop(100%,rgba(61,10,81,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(103,67,122,1) 0%,rgba(93,40,122,1) 47%,rgba(61,10,81,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(103,67,122,1) 0%,rgba(93,40,122,1) 47%,rgba(61,10,81,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(103,67,122,1) 0%,rgba(93,40,122,1) 47%,rgba(61,10,81,1) 100%); /* IE10+ */
	background: linear-gradient(135deg,  rgba(103,67,122,1) 0%,rgba(93,40,122,1) 47%,rgba(61,10,81,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67437a', endColorstr='#3d0a51',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
	
	border: 1px solid transparent;
	
	}

.front{
		-webkit-transform:rotateY(0deg) rotateX(0deg) translateZ(50px) ;
		-moz-transform:rotateY(0deg) rotateX(0deg) translateZ(50px);
		
				
}

.back{
	-webkit-transform:rotateY(180deg) rotateX(0deg) translateZ(50px) ;
	-moz-transform:rotateY(1800deg) rotateX(0deg) translateZ(50px);
	
}

.left{
	-webkit-transform:rotateY(90deg) rotateX(0deg) translateZ(50px) ;
	-moz-transform:rotateY(90deg) rotateX(0deg) translateZ(50px);
}

.right{
	-webkit-transform:rotateY(-90deg) rotateX(0deg) translateZ(50px) ;
	-moz-transform:rotateY(-90deg) rotateX(0deg) translateZ(50px);
}

.top{
	-webkit-transform:rotateY(0deg) rotateX(90deg) translateZ(50px) ;
	-moz-transform:rotateY(0deg) rotateX(90deg) translateZ(50px);
}

.bottom{
	-webkit-transform:rotateY(0deg) rotateX(-90deg) translateZ(50px) ;
	-moz-transform:rotateY(0deg) rotateX(-90deg) translateZ(50px);
}