/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article {
	display: block;
}

html {
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
 background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); 
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); 
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')";  
}

#container {
 width: 960px;
 margin: 0 auto;
}

#slideshow {
 width: 900px;
 margin: 50px auto 0 auto;
 padding: 50px 0 0 0;
 -webkit-perspective: 800; /* triggers a 3D space */
}

figure {
 display: inline;
 -webkit-transform-style: preserve-3d; /* maintains 3D space */
}

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
 -webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
 -webkit-transition: -webkit-transform 1s;  /* Enables transitions for transforms */
}
 
#box img {
 position: absolute;
 top: 0;
 left: 0;
}

figcaption {
 display: inline-block;
 width: 70px;
 height: 35px;
 background: rgba(0,0,0,0.6);
 border: 1px solid rgba(0,0,0,0.7);
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 text-align: center;
 line-height: 35px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 cursor: pointer;
 
 position: relative;
 top: -50px;
 left: 150px;
 margin: 0 30px 0 0;
 
 -moz-transition: all 0.1s linear;
 -o-transition: all 0.1s linear;
 -webkit-transition: all 0.1s linear;
 transition: all 0.1s linear;  
}
 
figcaption:hover {
 background: rgba(0,0,0,0.8); 
}

#box img:nth-child(1) {
 -webkit-transform: rotateX(0deg) translateZ(200px);
}

#box img:nth-child(2) {
 -webkit-transform: rotateX(180deg) translateZ(200px);
}

#box img:nth-child(3) {
 -webkit-transform: rotateX(90deg) translateZ(200px);
}

#box img:nth-child(4) {
 -webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box img:nth-child(5) {
 -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box img:nth-child(6) {
 -webkit-transform: rotateY(90deg) translateZ(700px);
}

#fig1:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(90deg);
}

#fig6:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(-90deg);
}