html{height:100%;}
body{
  margin:0px;padding:0px;
  width:100%;height:100%;
 background: rgba(76,76,76,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, , color-stop(0%, rgba(76,76,76,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(76,76,76,1) 0%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: radial-gradient(ellipse at center, rgba(76,76,76,1) 0%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
  overflow:hidden;
}
.screen{
	position:absolute;
	width:100%;
  margin-left:10%;
	margin-top:5%;
	height:70%;
}
@-webkit-keyframes cube1{
	0%{-webkit-transform:rotateX(0deg) rotateY(0deg);}
	33%{-webkit-transform:rotateY(-90deg) rotateX(0deg);}
	66%{-webkit-transform:rotateY(-90deg) rotateX(80deg);}
	90%{-webkit-transform:rotateX(180deg) rotateZ(90deg) rotateY(260);}
	100%{-webkit-transform:rotateX(180deg) rotateZ(90deg) rotateY(270);
}
}
.cube1{
	margin:5% 23%;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:cube1 12s infinite ease-in-out;
	-webkit-transform-origin:5vw 5vw 0;
}
.cube4{
	margin:5% 3%;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:cube3 12s infinite ease-in-out;
	-webkit-transform-origin:5vw 5vw 0;
}
@-webkit-keyframes cube2{
	0%{-webkit-transform:rotateX(0deg) rotateY(0deg);}
	33%{-webkit-transform:rotateY(180deg) rotateX(0deg);}
	66%{-webkit-transform:rotateY(180deg) rotateX(80deg);}
	90%{-webkit-transform:rotateX(-180deg) rotateY(90deg) rotateZ(170deg);}
	100%{-webkit-transform:rotateX(-180deg) rotateY(90deg) rotateZ(180deg);}
}
.cube2{
	margin:5% 45%;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:cube2 12s infinite ease-in-out;
	-webkit-transform-origin:5vw 5vw 0;
}
@-webkit-keyframes cube3{
	0%{-webkit-transform:rotateX(0deg) rotateY(0deg);}
	33%{-webkit-transform:rotateY(210deg) rotateX(0deg);}
	66%{-webkit-transform:rotateY(-90deg) rotateX(70deg);}
	90%{-webkit-transform:rotateX(0deg) rotateZ(0deg) rotateY(170deg);}
	100%{-webkit-transform:rotateX(0deg) rotateZ(0deg) rotateY(180deg);}
}
.cube3{
	margin:5% 65%;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:cube3 12s infinite ease-in-out;
	-webkit-transform-origin:5vw 5vw 0;
}

.cube1 div,.cube2 div,.cube3 div,.cube4 div{
width:10vw;
height:10vw;
position:absolute;
background:rgba(255,255,255,0.8);
box-shadow:0 0 10px #CCC;
color:rgba(0,0,0,0.7);
font-size:10vw;
line-height:10vw;
text-align:center;
}
.cube1>.face1,.cube2>.face1,.cube3>.face1,.cube4>.face1{
	-webkit-transform:translateZ(5vw);
}
.cube1>.face1,.cube2>.face1,.cube3>.face1,.cube4>.face1{
background:rgba(215, 44, 44, 0.8);
color:white;
}
.cube1>.face2,.cube2>.face2,.cube3>.face2,.cube4>.face2{
background:rgba(73, 98, 189, 0.6);
color:white;
}
.cube1>.face3,.cube2>.face3,.cube3>.face3,.cube4>.face3{
background:rgba(215, 217, 58, 0.6);
color:white;
}
.cube1>.face4,.cube2>.face4,.cube3>.face4,.cube4>.face4{
background:rgba(215, 100, 44, 0.8);
color:white;
}
.cube1>.face5,.cube2>.face5,.cube3>.face5,.cube4>.face5{
background:rgba(73, 250, 189, 0.6);
color:white;
}
.cube1>.face6,.cube2>.face6,.cube3>.face6,.cube4>.face6{
background:rgba(235, 0, 147, 0.6);
color:white;
}
.cube1>.face2,.cube2>.face2,.cube3>.face2,.cube4>.face2{
	-webkit-transform:rotateY(-90deg) translateZ(5vw);
}
.cube1>.face3,.cube2>.face3,.cube3>.face3,.cube4>.face3{
	-webkit-transform:rotateY(180deg) translateZ(5vw);
}
.cube1>.face4,.cube2>.face4,.cube3>.face4,.cube4>.face4{
	-webkit-transform:rotateY(90deg) translateZ(5vw);
}
.cube1>.face5,.cube2>.face5,.cube3>.face5,.cube4>.face5{
	-webkit-transform:rotateX(90deg) translateZ(5vw) rotateZ(180deg);
}
.cube1>.face6,.cube2>.face6,.cube3>.face6,.cube4>.face6{
	-webkit-transform:rotateX(-90deg) translateZ(5vw);
}