@font-face {
    font-family: 'acens'; /*a name to be used later*/
    src: url('../fonts/Acens.ttf'); /*URL to font*/
}

html{
	font-family: 'acens', tahoma, sans-serif;
	color: #666;
	background: url('../img/bg.png') #000;
	font-size: 24px;
}

a{
	display: block;
	color: #888;
	text-decoration: none;
	
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}

a:hover{
	color: #fff;
	color /*\**/: #A3CA33\9;
    text-shadow: 	0 0 3px #A3CA33, 
					0 0 3px #A3CA33, 
					0 0 3px #A3CA33;
	transform: scale(1.4);
	-webkit-transform: scale(1.4);
}

h1,h2,h3{
	display: block;
	text-transform: uppercase;
	color: #666;
}

h1{
	font-size: 54px;
}

h2{
	font-size: 42px;
}

div.spacer{
	margin-top: 60px;
}

div.center{
	margin-top: 50px;
	width: 100%;
	text-align: center;
	overflow:hidden;
}

.scene {
	display: block;
	margin: 100px auto 0 auto;
	width: 300px;
	height: 300px;
	
	perspective: 2000px;
	-webkit-perspective: 2000px;

	background-color: #ccc;
	-moz-box-shadow:    0px 0px 60px 60px #ccc;
	-webkit-box-shadow: 0px 0px 60px 60px #ccc;
	box-shadow:         0px 0px 60px 60px #ccc;
	
	border-radius: 60px;
	-webkit-border-radius: 100%;
 }

.cube {
	width: 300px;
	height: 300px;
	position: relative;

	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	
	transition: all 1.5s cubic-bezier(0.175,0.885,0.320,1.275);
	-webkit-transition: all 1.5s cubic-bezier(0.175,0.885,0.320,1.275);
	
	animation-delay: 0.5s; 
	animation-duration: 16s;
    animation-name: turn;
	animation-iteration-count: infinite;
	animation-timing-function:linear;
	
	-webkit-animation-delay: 0.5s; 
	-webkit-animation-duration: 16s;
    -webkit-animation-name: turn;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function:linear;
}

.cube-face {
	width: inherit;
	height: inherit;
	position: absolute;
	
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	-moz-filter: brightness(100%);
	-o-filter: brightness(100%);
	-ms-filter: brightness(100%);
	
	background: url("../img/4-logo.png") no-repeat center center #fdfdfd;
	background-size: 100%;
	
	border: solid 2px #666;
	
	transition: all 1.5s cubic-bezier(0.175,0.885,0.320,1.275);
	-webkit-transition: all 1.5s cubic-bezier(0.175,0.885,0.320,1.275);
	
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 16s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function:linear;
	
	-webkit-filter: none;
}

.cube-face-front {
	/*background: yellow;*/
	transform: translate3d(0, 0, 150px);
	-webkit-transform: translate3d(0, 0, 150px);
}

.cube-face-back {
	/*background: orange;*/
	transform: rotateY(180deg) translate3d(0, 0, 150px);
	-webkit-transform: rotateY(180deg) translate3d(0, 0, 150px);
}

.cube-face-left {
	/*background: green;*/
	transform: rotateY(-90deg) translate3d(0, 0, 150px);
	-webkit-transform: rotateY(-90deg) translate3d(0, 0, 150px);
}

.cube-face-right {
	/*background: magenta;*/
	transform: rotateY(90deg) translate3d(0, 0, 150px);
	-webkit-transform: rotateY(90deg) translate3d(0, 0, 150px);
}

.cube-face-top {
	/*background: blue;*/
	background: url("../img/C4U-Logo-quer.png") no-repeat center center #fdfdfd;
	transform: rotateX(90deg) translate3d(0, 0, 150px);
	-webkit-transform: rotateX(90deg) translate3d(0, 0, 150px);
}

.cube-face-bottom {
	/*background: red;*/
	background: url("../img/C4U-Logo-quer.png") no-repeat center center #fdfdfd;
	transform: rotateX(-90deg) translate3d(0, 0, 150px);
	-webkit-transform: rotateX(-90deg) translate3d(0, 0, 150px);
}


@-webkit-keyframes turn{
	0%{
		-webkit-transform: rotateY(0deg) rotateX(360deg) rotateZ(0deg);
		
	}
	
	50%{
		-webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
	}
	
	100%{
		-webkit-transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
	}
}

@keyframes turn{
	0%{
		transform: rotateY(0deg) rotateX(360deg) rotateZ(0deg);
		
	}
	
	50%{
		transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
	}
	
	100%{
		transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg);
	}
}