* {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


@-webkit-keyframes backandback {
    0% { -webkit-transform: translateZ(0); }


   50% { -webkit-transform: translateZ(-100px); }
  100% { -webkit-transform: translateZ(0); }
}
body {
	background-color: white;
}
body , h1 , h2 ,p {
	margin: 0;
	padding: 0;
	line-height: 130%;
	text-shadow: rgba(254,254,255,0.18) -1px -1px 0;
}

.header {
	position: relative;
	background-color: #e4e4e4;
	padding: 10pt;
	margin-bottom: 20px;
	border-bottom: 1px solid #d1d1d1;
	padding-left: 60pt;
}

.header a.logo {
	position: absolute;
	border: none;
	left: 10pt;
}
.header .logo img {
	width: 41pt;
}

.header a {
	color: #009fff;
	text-decoration: none;
}


h1 {
	font-size: 12pt;
	text-transform: uppercase;
}
h2 {
	font-size: 12pt;
	font-weight: normal;
	font-style: normal;
}
p {
	letter-spacing: 0;
	opacity: 0.5;
	text-transform: uppercase;
	margin-top: 2pt;
	font: 8pt geo;
}

.experiment {
	width: 800px;
	margin: 0 auto;
	padding: 0;
}

h2 {	
margin-top: 0;
}

.viewport {
	width: 200px;
	height: 200px;
-webkit-perspective: 320px; 
-webkit-perspective-origin: 50% 50%;


display: inline-block;
vertical-align: top;
}

.cube {
position: relative;
height: 200px;
width: 200px;
-webkit-transition: -webkit-transform 500ms ease-in-out;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(-100px);
/*-webkit-animation: backandback 1s infinite ease-in-out;
*/}

.cube > .sides {
	-webkit-transition: -webkit-transform 1000ms ease-in-out;
	position: absolute;
	height: 200px;
	width: 200px;
	-webkit-transform-style: preserve-3d;
}

.cube h2 {
color: #bbb;
padding-top: 0;
margin-top: 0;
}

.cube a {
color: red;
}

.cube > .sides > div {
	overflow: hidden;
position: absolute;
height: 200px;
width: 200px;
background-color: rgba(230, 230, 230, 1);
font-size: 1em;
line-height: 1em;
color: #aaa;
-webkit-border-radius: 3px;
}  

.sides > div > h2 {
	display: none;
} 

.cube > .sides > div:first-child  {
-webkit-transform: rotateX(90deg) translateZ(100px);
}

.cube > .sides > div:nth-child(2) {
-webkit-transform: translateZ(100px);
}

.cube > .sides > div:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(100px);
text-align: center;
}

.cube > .sides > div:nth-child(4) {
-webkit-transform: rotateY(180deg) translateZ(100px);
}

.cube > .sides > div:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(100px);
}


.cube > .sides > div:nth-child(6) {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(100px) ;
}

object {
opacity: 0.5;
}

object:hover {
opacity: 1;
}