body{
	background-color: #47c9af;
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-family: 'Alfa Slab One', arial;
	-webkit-perspective: 1400px;
	-moz-perspective: 1400px;
	-ms-perspective: 1400px;
	perspective: 1400px;
}

#table{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 600px;
	background-color: #eb974e;
	margin: 10px 0 0 -400px;
	
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 300ms;

	-moz-transform-style: preserve-3d;
	-moz-transition: all 300ms;

	-ms-transform-style: preserve-3d;
	-ms-transition: all 300ms;

	transform-style: preserve-3d;
	transition: all 300ms;
}
#table h2{
  line-height: 300px;
  color: #fff;
  font-size: 80px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table h3{
  line-height: 100px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table.up{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateX(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateX(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateX(10deg);

	transform-origin: bottom right;
	transform: rotateX(10deg);
}
#table.down{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateX(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateX(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateX(-10deg);

	transform-origin: bottom right;
	transform: rotateX(-10deg);
}
#table.left{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(-10deg);

	transform-origin: bottom right;
	transform: rotateY(-10deg);
}
#table.right{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(10deg);

	transform-origin: bottom right;
	transform: rotateY(10deg);
}
#table.down-right{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(10deg) rotateX(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(10deg) rotateX(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(10deg) rotateX(-10deg);

	transform-origin: bottom right;
	transform: rotateY(10deg) rotateX(-10deg);
}
#table.down-left{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(-10deg) rotateX(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(-10deg) rotateX(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(-10deg) rotateX(-10deg);

	transform-origin: bottom right;
	transform: rotateY(-10deg) rotateX(-10deg);
}
#table.up-left{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(-10deg) rotateX(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(-10deg) rotateX(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(-10deg) rotateX(10deg);

	transform-origin: bottom right;
	transform: rotateY(-10deg) rotateX(10deg);
}
#table.up-right{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(10deg) rotateX(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(10deg) rotateX(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(10deg) rotateX(10deg);

	transform-origin: bottom right;
	transform: rotateY(10deg) rotateX(10deg);
}

#inner-top-wall{
	position: absolute;
	top: 80px;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #d35400;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(90deg);

	-moz-transform-origin: top center;
	-moz-transform: rotateX(90deg);

	-ms-transform-origin: top center;
	-ms-transform: rotateX(90deg);

	transform-origin: top center;
	transform: rotateX(90deg);
}
#inner-left-wall{
	position: absolute;
	top: 80px;
	left: 80px;
	width: 80px;
	height: 440px;
	background-color: #d35400;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotateY(-90deg);

	-moz-transform-origin: bottom left;
	-moz-transform: rotateY(-90deg);

	-ms-transform-origin: bottom left;
	-ms-transform: rotateY(-90deg);

	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#inner-bottom-wall{
	position: absolute;
	top: 520px;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #d35400;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(90deg);

	-moz-transform-origin: top center;
	-moz-transform: rotateX(90deg);

	-ms-transform-origin: top center;
	-ms-transform: rotateX(90deg);

	transform-origin: top center;
	transform: rotateX(90deg);
}
#inner-right-wall{
	position: absolute;
	top: 80px;
	left: 720px;
	width: 80px;
	height: 440px;
	background-color: #d35400;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotateY(-90deg);

	-moz-transform-origin: bottom left;
	-moz-transform: rotateY(-90deg);

	-ms-transform-origin: bottom left;
	-ms-transform: rotateY(-90deg);

	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#outer-top-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #eb974e;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(90deg);

	-moz-transform-origin: top center;
	-moz-transform: rotateX(90deg);

	-ms-transform-origin: top center;
	-ms-transform: rotateX(90deg);

	transform-origin: top center;
	transform: rotateX(90deg);
}
#outer-left-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 600px;
	background-color: #eb974e;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotateY(-90deg);

	-moz-transform-origin: bottom left;
	-moz-transform: rotateY(-90deg);

	-ms-transform-origin: bottom left;
	-ms-transform: rotateY(-90deg);

	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#outer-bottom-wall{
	position: absolute;
	top: 600px;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #eb974e;
	-webkit-transform-origin: top center;
	-webkit-transform: rotateX(90deg);

	-moz-transform-origin: top center;
	-moz-transform: rotateX(90deg);

	-ms-transform-origin: top center;
	-ms-transform: rotateX(90deg);

	transform-origin: top center;
	transform: rotateX(90deg);
}
#outer-right-wall{
	position: absolute;
	top: 0;
	left: 800px;
	width: 80px;
	height: 600px;
	background-color: #eb974e;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotateY(-90deg);

	-moz-transform-origin: bottom left;
	-moz-transform: rotateY(-90deg);

	-ms-transform-origin: bottom left;
	-ms-transform: rotateY(-90deg);

	transform-origin: bottom left;
	transform: rotateY(-90deg);
}



#top-top-wall{
	position: absolute;
	top: 0;
	left: 80px;
	width: 640px;
	height: 80px;
	background-color: #f39c12;
	-webkit-transform: translate3d(0, 0, 80px);

	-moz-transform: translate3d(0, 0, 80px);

	-ms-transform: translate3d(0, 0, 80px);

	transform: translate3d(0, 0, 80px);

}
#top-left-wall{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 600px;
	background-color: #f39c12;
	-webkit-transform: translate3d(0, 0, 80px);

	-moz-transform: translate3d(0, 0, 80px);

	-ms-transform: translate3d(0, 0, 80px);

	transform: translate3d(0, 0, 80px);
}
#top-bottom-wall{
	position: absolute;
	top: 520px;
	left: 0;
	width: 800px;
	height: 80px;
	background-color: #f39c12;
	-webkit-transform: translate3d(0, 0, 80px);

	-moz-transform: translate3d(0, 0, 80px);

	-ms-transform: translate3d(0, 0, 80px);

	transform: translate3d(0, 0, 80px);
}
#top-right-wall{
	position: absolute;
	top: 0;
	left: 720px;
	width: 80px;
	height: 600px;
	background-color: #f39c12;
	-webkit-transform:translate3d(0, 0, 80px);

	-moz-transform:translate3d(0, 0, 80px);

	-ms-transform:translate3d(0, 0, 80px);

	transform:translate3d(0, 0, 80px);
}


#box{
	position: absolute;
	width: 100px;
	height: 100px;
	-webkit-transform-style: preserve-3d;

	-moz-transform-style: preserve-3d;

	-ms-transform-style: preserve-3d;

	transform-style: preserve-3d;
	top: 300px;
	left: 300px;
}
#box .left{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #cc0;
	-webkit-transform-origin: bottom left;
	-webkit-transform: rotateY(-90deg);

	-moz-transform-origin: bottom left;
	-moz-transform: rotateY(-90deg);

	-ms-transform-origin: bottom left;
	-ms-transform: rotateY(-90deg);

	transform-origin: bottom left;
	transform: rotateY(-90deg);
}
#box .right{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #16a085;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(90deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(90deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(90deg);

	transform-origin: bottom right;
	transform: rotateY(90deg);
}
#box .back{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #2ecc71;
	-webkit-transform-origin: top right;
	-webkit-transform: rotateX(90deg);

	-moz-transform-origin: top right;
	-moz-transform: rotateX(90deg);

	-ms-transform-origin: top right;
	-ms-transform: rotateX(90deg);

	transform-origin: top right;
	transform: rotateX(90deg);
}
#box .front{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #47c9af;
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateX(-90deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateX(-90deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateX(-90deg);

	transform-origin: bottom right;
	transform: rotateX(-90deg);
}
#box .top{
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #27ae60;
	-webkit-transform: translateZ(100px);

	-moz-transform: translateZ(100px);

	-ms-transform: translateZ(100px);

	transform: translateZ(100px);
}