#wrapper {
/*	padding-top: 10%;
	background: rgb(255,255,255,0);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.03) 100%);*/
}

.viewport {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 200px;
	-moz-perspective-origin: 50% 200px;
	-ms-perspective-origin: 50% 200px;
	-o-perspective-origin: 50% 200px;
	perspective-origin: 50% 200px;
	-webkit-transform: scale(0.65, 0.65);
	-moz-transform: scale(0.65, 0.65);
	-ms-transform: scale(0.65, 0.65);
	-o-transform: scale(0.65, 0.65);
	transform: scale(0.65, 0.65);
	<!-- -webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(rgba(250, 0, 0, 0.3)), color-stop(50%, transparent), to(rgba(250, 250, 250, 0.3))); -->
}

.cube {
	position: relative;
	margin: 0 auto;
	height: 400px;
	width: 400px;
	-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-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	<!-- animation: rotation 10s infinite linear; -->
}

@keyframes rotation {
	from {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
		transform: rotateX(359deg) rotateY(359deg) rotateZ(359deg);
	}
}

.cube > div {
	overflow: hidden;
	position: absolute;
	opacity: 1;
	height: 400px;
	width: 400px;
	background-image: url("../gfx/tile.jpeg");
	background-repeat: repeat;
	background-size: contain;
	background-blend-mode: normal;
	background-color: rgba(220,255,255,0.5);
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	-ms-touch-callout: none;
	-o-touch-callout: none;
	touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.cube > div > div.cube-image {
	width: 400px;
	height: 400px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	line-height: 200px;
	font-size: 80px;
	text-align: center;
	color: #1b9bd8;
	-webkit-transition: color 600ms;
	-moz-transition: color 600ms;
	-ms-transition: color 600ms;
	-o-transition: color 600ms;
	transition: color 600ms;
}

.cube > div > div.cube-image.active {
	color: red;
}

.cube > div:hover {
	cursor: pointer;
}

.cube > div:active {
	cursor: pointer;
}

.cube > div:first-child {
	-webkit-transform: rotateX(90deg) translateZ(200px);
	-moz-transform: rotateX(90deg) translateZ(200px);
	-ms-transform: rotateX(90deg) translateZ(200px);
	-o-transform: rotateX(90deg) translateZ(200px);
	transform: rotateX(90deg) translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

.cube > div:nth-child(2) {
	-webkit-transform: translateZ(200px);
	-moz-transform: translateZ(200px);
	-ms-transform: translateZ(200px);
	-o-transform: translateZ(200px);
	transform: translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

.cube > div:nth-child(3) {
	-webkit-transform: rotateY(90deg) translateZ(200px);
	-moz-transform: rotateY(90deg) translateZ(200px);
	-ms-transform: rotateY(90deg) translateZ(200px);
	-o-transform: rotateY(90deg) translateZ(200px);
	transform: rotateY(90deg) translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

.cube > div:nth-child(4) {
	-webkit-transform: rotateY(180deg) translateZ(200px);
	-moz-transform: rotateY(180deg) translateZ(200px);
	-ms-transform: rotateY(180deg) translateZ(200px);
	-o-transform: rotateY(180deg) translateZ(200px);
	transform: rotateY(180deg) translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

.cube > div:nth-child(5) {
	-webkit-transform: rotateY(-90deg) translateZ(200px);
	-moz-transform: rotateY(-90deg) translateZ(200px);
	-ms-transform: rotateY(-90deg) translateZ(200px);
	-o-transform: rotateY(-90deg) translateZ(200px);
	transform: rotateY(-90deg) translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

.cube > div:nth-child(6) {
	-webkit-transform: rotateX(-90deg) translateZ(200px);
	-moz-transform: rotateX(-90deg) translateZ(200px);
	-ms-transform: rotateX(-90deg) translateZ(200px);
	-o-transform: rotateX(-90deg) translateZ(200px);
	transform: rotateX(-90deg) translateZ(200px);
	outline: 1px solid rgba(100, 100, 100, 0.2);
}

object {
	opacity: 0.5;
}

object:hover {
	opacity: 1;
}

@media (max-width: 480px) {
	.viewport {
		-webkit-transform: scale(0.4, 0.4);
		-moz-transform: scale(0.4, 0.4);
		-ms-transform: scale(0.4, 0.4);
		-o-transform: scale(0.4, 0.4);
		transform: scale(0.4, 0.4);
	}
}

<!-- analog clock -->
#clockContainer {
	position: absolute;
}

.antique_clock {
	position: absolute;
	color: #000;
	font-size: 0.5em;
	margin: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	opacity: 1;
	text-align: center;
	background-image: url("../gfx/antique_clock_bg.png");
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	z-index: 0;
}


#hour,
#minute,
#second {
	position: absolute;
	background: #45291e;
	border-radius: 50% 50% 0% 0%;
	transform-origin: bottom;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
}
  
#hour {
	width: 1.8%;
	height: 25%;
	top: 24.6%;
	left: 49.1%;
	opacity: 1;
	z-index: 2;
}
  
#minute {
	width: 1.6%;
	height: 30%;
	top: 19.5%;
	left: 49.3%;
	opacity: 1;
	z-index: 3;
}
  
#second {
	width: 1.0%;
	height: 40%;
	top: 9.5%;
	left: 49.55%;
	opacity: 1;
	z-index: 4;
}

#screw {
	position: absolute;
	background: #462a1f;
	border-radius: 50%;
	width: 4%;
	height: 4%;
	top: 47.55%;
	left: 48.15%;
	opacity: 1;
	z-index: 5;
}

#jsDate {
	position: absolute;
	margin: 140px;
	color: rgba(40, 0, 0, 0.6);
	text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
	font-size: 2.2em;
	z-index: 1;
}