@-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-60deg);                           }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
    60%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);           }
    90%      { -webkit-transform: rotateX(90deg);                            }
  }
	
	@keyframes spincube {
    from,to {
      -moz-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
    33% {
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    70% {
      -moz-transform: rotateY(-270deg) rotateX(90deg);
      -ms-transform: rotateY(-270deg) rotateX(90deg);
      transform: rotateY(-270deg) rotateX(90deg);
    }
    90% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  }
	
	.cubespinner{
		-webkit-animation-name:spincube;
		-webkit-animation-timing-function:ease-in-out;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-duration:7s;
		animation-name:spincube;
		animation-timing-function:ease-in-out;
		animation-iteration-count:infinite;
		animation-duration:8s;
		-webkit-transform-style:preserve-3d;
		-moz-transform-style:preserve-3d;
		-ms-transform-style:preserve-3d;
		transform-style:preserve-3d;
		-webkit-transform-origin:60px 60px 0;
		-moz-transform-origin:60px 60px 0;
		-ms-transform-origin:60px 60px 0;
		transform-origin:60px 60px 0}
		
		.cubespinner div{
			position: absolute;
			width:120px;
			height:120px;
			border:1px solid #ccc;
			background:rgba(255,255,255,.8);
			box-shadow:inset 0 0 20px rgba(0,0,0,.2);
			text-align:center;
			font-size:100px}
			
		.cubespinner .face1{
			background-color: #231f20;
			-webkit-transform:translateZ(60px);
			-moz-transform:translateZ(60px);
			-ms-transform:translateZ(60px);
			transform:translateZ(60px)}
			
		.cubespinner .face2{
			background-color: #231f20;
			-webkit-transform:rotateY(90deg) 
			translateZ(60px);
			-moz-transform:rotateY(90deg) translateZ(60px);
			-ms-transform:rotateY(90deg) translateZ(60px);
			transform:rotateY(90deg) translateZ(60px)}
			
	
		.cubespinner .face3{
			-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
			-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
			-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);
			transform:rotateY(90deg) rotateX(90deg) translateZ(60px)}
			
		.cubespinner .face4{
			-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
			-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
			-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);
			transform:rotateY(180deg) rotateZ(90deg) translateZ(60px)}
			
		.cubespinner .face5{
			-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
			-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
			-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);
			transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px)}
			
		.cubespinner .face6{
			-webkit-transform:rotateX(-90deg) translateZ(60px);
			-moz-transform:rotateX(-90deg) translateZ(60px);
			-ms-transform:rotateX(-90deg) translateZ(60px);
			transform:rotateX(-90deg) translateZ(60px)}
	

	
	@keyframes spinlogo {
		0%   { transform: rotateZ(0deg) }
		100% { transform: rotateZ(360deg) }
	}
	
	@keyframes spinlogoReverse {
			0%   { transform: rotateZ(360deg) }
		100% { transform: rotateZ(0deg) }
	}

	
	.logo img {
		-webkit-transform: rotate(-5deg);
		-moz-transform: rotate(-8deg);
		-o-transform: rotate(-5deg);
		-ms-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}
	
	
	.logo1 img {
		position:relative;
		margin:0;
		left: 2px;
		top: -25px;
		-webkit-animation: spinlogo 8s infinite;
		animation-name: spinlogo;
    animation-duration: 5s;
	}

	.logo2 img {
		position:relative;
		margin:0;
		left: 2px;
		top: -25px;
		-webkit-animation: spinlogoReverse 8s infinite;
	}
	
	.logo3 img {
		position:relative;
		margin:0;
		left: 2px;
		top: -25px;
		-webkit-animation: spinlogo 8s infinite;
	}