﻿html, body {
	height: 100%;
	overflow: hidden;
}
 body
{
	-webkit-perspective:400px;
	-moz-perspective:400px;
	-o-perspective:400px;
	-ms-perspective:400px;
	perspective:400px;
	background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important;
	background-color: Black;
	color: #FFF;
	text-align: center;
	font-family: 'Marck Script', cursive; font-size:20px;
}

#cube 
{
    position: absolute;
    top:50%;
    left:50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
	background: transparent url(HTML5_Logo2.png) no-repeat center center;
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotieren 20s linear infinite;
	-ms-transform-style: preserve-3d;
	-ms-animation: rotieren 20s linear infinite;
	-moz-transform-style: preserve-3d;
	-moz-animation: rotieren 20s linear infinite;
	-o-transform-style: preserve-3d;
	-o-animation: rotieren 20s linear infinite;
	transform-style: preserve-3d;
	animation: rotieren 20s linear infinite;
}
#cube a {
	color: #FFF;
}
#cube a:hover, #cube a:focus {
	font-weight: bold;
}
#cube div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	outline: 1px solid #777;
	background: url(under_constuction2.png) no-repeat center center, -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%,rgba(119,119,119,.8) 90%);
	background: url(under_constuction2.png) no-repeat center center, -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%,rgba(119,119,119,.8) 90%);
	background: url(under_constuction2.png) no-repeat center center, -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%,rgba(119,119,119,.8) 90%);
	background: url(under_constuction2.png) no-repeat center center, -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%,rgba(119,119,119,.8) 90%);
	background: url(under_constuction2.png) no-repeat center center, radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%,rgba(119,119,119,.8) 90%);
	-webkit-transition: opacity .75s ease-in-out;
	-moz-transition: opacity .75s ease-in-out;
	-o-transition: opacity .75s ease-in-out;
	-ms-transition: opacity .75s ease-in-out;
	transition: opacity .75s ease-in-out;
	text-align:center;
}

#cube div:hover {
	opacity: .2;
}

#cube div:nth-of-type(1) {
	-webkit-transform: translate3d(0,0,100px);
	-moz-transform: translate3d(0,0,100px);
	-o-transform: translate3d(0,0,100px);
	-ms-transform: translate3d(0,0,100px);
	transform: translate3d(0,0,100px);
}
#cube div:nth-of-type(2) {
	-webkit-transform: translate3d(0,0,-100px) rotateY(180deg);
	-moz-transform: translate3d(0,0,-100px) rotateY(180deg);
	-o-transform: translate3d(0,0,-100px) rotateY(180deg);
	-ms-transform: translate3d(0,0,-100px) rotateY(180deg);
	transform: translate3d(0,0,-100px) rotateY(180deg);
}
#cube div:nth-of-type(3) {
	-webkit-transform: translate3d(100px,0,0) rotateY(90deg);
	-moz-transform: translate3d(100px,0,0) rotateY(90deg);
	-o-transform: translate3d(100px,0,0) rotateY(90deg);
	-ms-transform: translate3d(100px,0,0) rotateY(90deg);
	transform: translate3d(100px,0,0) rotateY(90deg);
}
#cube div:nth-of-type(4) {
	-webkit-transform: translate3d(-100px,0,0) rotateY(-90deg);
	-moz-transform: translate3d(-100px,0,0) rotateY(-90deg);
	-o-transform: translate3d(-100px,0,0) rotateY(-90deg);
	-ms-transform: translate3d(-100px,0,0) rotateY(-90deg);
	transform: translate3d(-100px,0,0) rotateY(-90deg);
}
#cube div:nth-of-type(5) {
	-webkit-transform: translate3d(0,100px,0) rotateX(-90deg);
	-moz-transform: translate3d(0,100px,0) rotateX(-90deg);
	-o-transform: translate3d(0,100px,0) rotateX(-90deg);
	-ms-transform: translate3d(0,100px,0) rotateX(-90deg);
	transform: translate3d(0,100px,0) rotateX(-90deg);
}
#cube div:nth-of-type(6) {
	-webkit-transform: translate3d(0,-100px,0) rotateX(90deg);
	-moz-transform: translate3d(0,-100px,0) rotateX(90deg);
	-o-transform: translate3d(0,-100px,0) rotateX(90deg);
	-ms-transform: translate3d(0,-100px,0) rotateX(90deg);
	transform: translate3d(0,-100px,0) rotateX(90deg);
}
@-webkit-keyframes rotieren {
	from{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	to{ -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-moz-keyframes rotieren {
	from{ -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	to{ -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-o-keyframes rotieren {
	from{ -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	to{ -o-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-ms-keyframes rotieren {
	from{ -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	to{ -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@keyframes rotieren {
	from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}