@-webkit-keyframes -webkit-rotate-glider {
    from {
        -webkit-transform: rotateX(-30deg) rotateY(0deg);
        transform: rotateX(-30deg) rotateY(0deg);
    }
    to {
    	-webkit-transform: rotateX(-30deg) rotateY(360deg);
    	transform: rotateX(-30deg) rotateY(360deg);
    }
}

@keyframes rotate-glider {
    from {
        -webkit-transform: rotateX(-30deg) rotateY(0deg);
        transform: rotateX(-30deg) rotateY(0deg);
    }
    to {
    	-webkit-transform: rotateX(-30deg) rotateY(360deg);
    	transform: rotateX(-30deg) rotateY(360deg);
    }
}


@-webkit-keyframes restore-glider {
	from {
        -webkit-transform: rotateX(-30deg) rotateY(360deg);
        -moz-transform: rotateX(-30deg) rotateY(360deg);
    	transform: rotateX(-30deg) rotateY(360deg);
    }
    to {
        -webkit-transform: rotateX(-30deg) rotateY(0deg);
        -moz-transform: rotateX(-30deg) rotateY(0deg);
        transform: rotateX(-30deg) rotateY(0deg);
    }
}

@-webkit-keyframes -webkit-rotate-cube {
    from {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to { 
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
		transform: rotateY(360deg);
    }
}

@keyframes rotate-cube {
    from {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to { 
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
		transform: rotateY(360deg);
    }
}



#glider {
	position: relative;
	width: 300px;
	height: 300px;
	top: 100px;
	margin: 0 auto;
	
	-webkit-perspective: 10000px;
	-webkit-perspective-origin: 50% 300px;
	-webkit-transform-style: preserve-3d;
	-moz-perspective: 10000px;
	-moz-perspective-origin: 50% 300px;
	-moz-transform-style: preserve-3d;
	perspective: 10000px;
	perspective-origin: 50% 300px;
	transform-style: preserve-3d;
	
	transform: rotateX(-30deg) rotateY(-30deg);
	
	
    -webkit-animation-name: -webkit-rotate-glider;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: rotate-glider;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	animation-name: rotate-glider;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#glider:hover {
	-webkit-animation-name: none;
	-moz-animation-name: none;
	animation-name: none;
	
	
    -webkit-transform: rotateX(-30deg) rotateY(-30deg);
    -moz-transform: rotateX(-30deg) rotateY(-30deg);
    transform: rotateX(-30deg) rotateY(-30deg);
}

.cube {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.cube:hover {
    -webkit-animation-name: -webkit-rotate-cube;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	animation-name: rotate-cube;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cube .face {
	position: absolute;
	height: 76px;
	width: 76px;
	padding: 10px;
	background-color: rgb(188, 62, 27);
	border: 2px solid rgb(92, 39, 24);
	border-radius: 5px;
	font-size: 20px;
	color: #ecae50;
	text-align: center;
	vertical-align: middle;
}

.cube .face a {
	color: #ecae50;
}

.cube .front {
	-moz-transform: rotateY(   0deg ) translateZ( 50px );
	-webkit-transform: rotateY(   0deg ) translateZ( 50px );
	transform: rotateY(   0deg ) translateZ( 50px );
	background-image: linear-gradient(rgb(200, 81, 31), rgb(192, 57, 27));
}
.cube .back {
	-moz-transform: rotateX( 180deg ) translateZ( 50px );
	-webkit-transform: rotateX( 180deg ) translateZ( 50px );
	transform: rotateX( 180deg ) translateZ( 50px );
	background-image: linear-gradient(rgb(78, 38, 23), rgb(118, 44, 27));
}
.cube .right {
	-moz-transform: rotateY(  90deg ) translateZ( 50px );
	-webkit-transform: rotateY(  90deg ) translateZ( 50px );
	transform: rotateY(  90deg ) translateZ( 50px );
	background-image: linear-gradient(rgb(78, 38, 23), rgb(118, 44, 27));
}
.cube .left {
	-moz-transform: rotateY( -90deg ) translateZ( 50px );
	-webkit-transform: rotateY( -90deg ) translateZ( 50px );
	transform: rotateY( -90deg ) translateZ( 50px );
}
.cube .top {
	-moz-transform: rotateX(  90deg ) translateZ( 50px );
	-webkit-transform: rotateX(  90deg ) translateZ( 50px );
	transform: rotateX(  90deg ) translateZ( 50px );
	background-image: linear-gradient(rgb(190, 112, 38), rgb(231, 138, 42));
}
.cube .bottom {
	-moz-transform: rotateX( -90deg ) translateZ( 50px );
	-webkit-transform: rotateX( -90deg ) translateZ( 50px );
	transform: rotateX( -90deg ) translateZ( 50px );
}


#cube1 {
	top: -1px;
	left: 100px;
	z-index: 10;
}

#cube2 {
	top: 100px;
	left: 201px;
	z-index: 9;
}

#cube3, #cube4, #cube5 {
	top: 201px;
}

#cube3 {
	left: -1px;
	z-index: 6;
}

#cube4 {
	left: 100px;
	z-index: 7;
}

#cube5 {
	left: 201px;
	z-index: 8;
}


.cube {
	-moz-transform-origin: 50px 50px;
	-webkit-transform-origin: 50px 50px;
	transform-origin: 50px 50px;
}