/*--------------------------*/

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  animation: rotate 6s linear infinite;
}

.cube .face {
  position: absolute;
}

.cube .-front {


  background: rgba(211, 229, 236, 0.50);
}

.cube .-left {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(50px);
  background: rgba(196, 214, 221, 0.50);
}

.cube .-top {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(50px);
  background: rgba(216, 234, 241, 0.50);
}

.cube .-bottom {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(50px);
  background: rgba(176, 194, 201, 0.50);
}

.cube .-right {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(50px);
  background: rgba(196, 214, 221, 0.50);
}

.cube .-back {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(50px);
  background: rgba(186, 204, 211, 0.50);
}

/*------------*/


.cubes-container > div{position: absolute; opacity:0.7; bottom:-100px;}


.cube-01 > div{
overflow-y:hidden;
animation: animate 16s linear infinite;
animation-delay: 3.2s;
}
.cube-01 .cube{animation: rotate 5.8s linear infinite;}

.cube-02 > div{
animation: animate 19s linear infinite;
animation-delay: 1.8s;
}
.cube-02 .cube{animation: rotate 6.1s linear infinite;}

.cube-03 > div{
animation: animate 35s linear infinite;
animation-delay: 3.9s;
}
.cube-03 .cube{animation: rotate 6.2s linear infinite;}

.cube-04 > div{
animation: animate 22s linear infinite;
animation-delay: 5.5s;
}
.cube-04 .cube{animation: rotate 5.6s linear infinite;}

.cube-05 > div{
animation: animate 40s linear infinite;
animation-delay: 6.2s;
}
.cube-05 .cube{animation: rotate 5.9s linear infinite;}

.cube-06 > div{
animation: animate 18s linear infinite;
animation-delay: 1s;
}
.cube-06 .cube{animation: rotate 6.3s linear infinite;}

.cube-07 > div{
animation: animate 15s linear infinite;
animation-delay: 7s;
}
.cube-07 .cube{animation: rotate 6.4s linear infinite;}

.cube-08 > div{
animation: animate 25s linear infinite;
animation-delay: 15s;
}
.cube-08 .cube{animation: rotate 5.8s linear infinite;}

.cube-09 > div{
animation: animate 45s linear infinite;
animation-delay: 2s;
}
.cube-09 .cube{animation: rotate 6.5s linear infinite;}

.cube-10 > div{
animation: animate 24s linear infinite;
animation-delay: 2s;
}
.cube-10 .cube{animation: rotate 6s linear infinite;}
/*
.cube-01{transform:scale(0.43);left:25%;}
.cube-02{transform:scale(0.33);left:14%;}
.cube-03{transform:scale(0.17);left:70%;}
.cube-04{transform:scale(0.4);left:40%;}
.cube-05{transform:scale(0.15);left:65%;}
.cube-06{transform:scale(0.72);left:75%;}
.cube-07{transform:scale(0.85);left:35%;}
.cube-08{transform:scale(0.26);left:55%;}
.cube-09{transform:scale(0.12);left:20%;}
.cube-10{transform:scale(1);left:85%;}
*/

.cube-01{left:25%;}
.cube-01 .cube .-front, .cube-01 .cube .-back, .cube-01 .cube .-top, .cube-01 .cube .-bottom, .cube-01 .cube .-left, .cube-01 .cube .-right{width:44px; height:44px;}
.cube-01 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(22px);}
.cube-01 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(22px);}
.cube-01 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(22px);}
.cube-01 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(22px);}
.cube-01 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(22px);}
.cube-01 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(22px);}



.cube-02{left:14%;}
.cube-02 .cube .-front, .cube-02 .cube .-back, .cube-02 .cube .-top, .cube-02 .cube .-bottom, .cube-02 .cube .-left, .cube-02 .cube .-right{width:32px; height:32px;}
.cube-02 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(16px);}
.cube-02 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(16px);}
.cube-02 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(16px);}
.cube-02 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(16px);}
.cube-02 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(16px);}
.cube-02 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(16px);}


.cube-03{left:70%;}
.cube-03 .cube .-front, .cube-03 .cube .-back, .cube-03 .cube .-top, .cube-03 .cube .-bottom, .cube-03 .cube .-left, .cube-03 .cube .-right{width:20px; height:20px;}
.cube-03 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(8px);}
.cube-03 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(8px);}
.cube-03 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(8px);}
.cube-03 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(8px);}
.cube-03 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(8px);}
.cube-03 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(8px);}

.cube-04{left:40%;}
.cube-04 .cube .-front, .cube-04 .cube .-back, .cube-04 .cube .-top, .cube-04 .cube .-bottom, .cube-04 .cube .-left, .cube-04 .cube .-right{width:38px; height:38px;}
.cube-04 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(19px);}
.cube-04 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(19px);}
.cube-04 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(19px);}
.cube-04 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(19px);}
.cube-04 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(19px);}
.cube-04 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(19px);}

.cube-05{left:65%;}
.cube-05 .cube .-front, .cube-05 .cube .-back, .cube-05 .cube .-top, .cube-05 .cube .-bottom, .cube-05 .cube .-left, .cube-05 .cube .-right{width:16px; height:16px;}
.cube-05 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(8px);}
.cube-05 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(8px);}
.cube-05 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(8px);}
.cube-05 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(8px);}
.cube-05 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(8px);}
.cube-05 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(8px);}

.cube-06{left:75%;}
.cube-06 .cube .-front, .cube-06 .cube .-back, .cube-06 .cube .-top, .cube-06 .cube .-bottom, .cube-06 .cube .-left, .cube-06 .cube .-right{width:70px; height:70px;}
.cube-06 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(35px);}
.cube-06 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(35px);}
.cube-06 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(35px);}
.cube-06 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(35px);}
.cube-06 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(35px);}
.cube-06 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(35px);}

.cube-07{left:35%;}
.cube-07 .cube .-front, .cube-07 .cube .-back, .cube-07 .cube .-top, .cube-07 .cube .-bottom, .cube-07 .cube .-left, .cube-07 .cube .-right{width:74px; height:74px;}
.cube-07 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(37px);}
.cube-07 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(37px);}
.cube-07 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(37px);}
.cube-07 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(37px);}
.cube-07 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(37px);}
.cube-07 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(37px);}

.cube-08{left:55%;}
.cube-08 .cube .-front, .cube-08 .cube .-back, .cube-08 .cube .-top, .cube-08 .cube .-bottom, .cube-08 .cube .-left, .cube-08 .cube .-right{width:26px; height:26px;}
.cube-08 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(13px);}
.cube-08 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(13px);}
.cube-08 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(13px);}
.cube-08 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(13px);}
.cube-08 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(13px);}
.cube-08 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(13px);}

.cube-09{left:20%;}
.cube-09 .cube .-front, .cube-09 .cube .-back, .cube-09 .cube .-top, .cube-09 .cube .-bottom, .cube-09 .cube .-left, .cube-09 .cube .-right{width:12px; height:12px;}
.cube-09 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(6px);}
.cube-09 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(6px);}
.cube-09 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(6px);}
.cube-09 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(6px);}
.cube-09 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(6px);}
.cube-09 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(6px);}

.cube-10{left:85%;}
.cube-10 .cube .-front, .cube-10 .cube .-back, .cube-10 .cube .-top, .cube-10 .cube .-bottom, .cube-10 .cube .-left, .cube-10 .cube .-right{width:90px; height:90px;}
.cube-10 .cube .-front{transform:translate(-50%, -50%) rotateY(0deg) translateZ(45px);}
.cube-10 .cube .-left{transform:translate(-50%, -50%) rotateY(90deg) translateZ(45px);}
.cube-10 .cube .-top{transform:translate(-50%, -50%) rotateX(90deg) translateZ(45px);}
.cube-10 .cube .-bottom{transform:translate(-50%, -50%) rotateX(-90deg) translateZ(45px);}
.cube-10 .cube .-right{transform:translate(-50%, -50%) rotateY(-90deg) translateZ(45px);}
.cube-10 .cube .-back{transform:translate(-50%, -50%) rotateY(180deg) translateZ(45px);}

/*----------------------------------*/

@keyframes animate {
0%{transform: translateY(0);}
100%{transform: translateY(-1500px);}
}


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

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