#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #222222;
    z-index: 1000;
}
 
#loader-wrapper .loader-section.section-left {
    left: 0;
	opacity: 1;
}
 
#loader-wrapper .loader-section.section-right {
    right: 0;
	opacity: 1;
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
	transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	opacity: 0;
}
 
.loaded #loader-wrapper .loader-section.section-right {
	transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	opacity: 0;

}

.loaded .blackout, .loaded #loader {
	display:none;
}


.blackout {
	
	width:100%;
	height:100%;
	position:fixed;
	z-index: 1001;
	background-color:rgba(0,0,0,1);
}

.load-text {
	margin-top:10px;
	width:90px;
	text-align:center;
}

#loader {
	position:absolute;
	top:50%;
	margin-top:-45px;
	left:50%;
	margin-left:-45px;
	z-index: 1002;
}

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

}

.cube div{
  position:absolute;
  font-size:0;
}
.cube i{
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom:5px;
}
.cube .front{
  transform:translateZ(45px);
}
.cube .left{
  transform:rotateY(90deg) translate3d(5px,0,-40px);
}    
.cube .bottom{
  transform:rotateX(90deg) translate3d(0,5px,-45px);
}
.cube .right{
  transform:rotateY(90deg) translateZ(45px);
}
.cube .top{
  transform:rotateX(90deg) translatez(45px);
}


.cube .ani1{
  top: 60px;
  width: 90px;
  height: 30px;
  transform-style:preserve-3d;
  animation:cube-ani1 2s ease-in-out infinite,
    cube-ani5 2s steps(1) infinite;
}
.cube .ani1 .front i:nth-child(1){
  background: #00b3a0;
}
.cube .ani1 .front i:nth-child(2){
  background: #e2e8e7;
}
.cube .ani1 .front i:nth-child(3){
  background: #fc5652;
}
.cube .ani1 .left i:nth-child(1){
  background: #fc5652;
}
.cube .ani1 .left i:nth-child(2){
  background: #f6c574;
}
.cube .ani1 .left i:nth-child(3){
  background: #00abcd;
}
@keyframes cube-ani1{
  25%,100%{
    transform:rotateY(90deg);
  }
}
.cube .ani2{
  opacity: 0;
  left: 30px;
  width: 30px;
  height: 90px;
  transform-style:preserve-3d;
  animation:cube-ani2 2s ease-in-out infinite,
    cube-ani5 2s steps(1) 0.5s infinite;
}
.cube .ani2 .front i:nth-child(1){
  background: #00b3a0;
}
.cube .ani2 .front i:nth-child(2){
  background: #00b3a0;
}
.cube .ani2 .front i:nth-child(3){
  background: #fccf0b;
}
.cube .ani2 .bottom i:nth-child(1){
  background: #e2e8e7;
}
.cube .ani2 .bottom i:nth-child(2){
  background: #f65555;
}
.cube .ani2 .bottom i:nth-child(3){
  background: #00b3a0;
}
@keyframes cube-ani2{
  25%{
    transform:rotateX(0);
  }
  50%,100%{
    transform:rotateX(90deg);
  }
}
.cube .ani3{
  opacity: 0;
  top: 30px;
  left: 0;
  width: 90px;
  height: 30px;
  transform-style:preserve-3d;
  animation:cube-ani3 2s ease-in-out infinite,
    cube-ani5 2s steps(1) 1s infinite;
}
.cube .ani3 .front i:nth-child(1){
  background: #00abcd;

}
.cube .ani3 .front i:nth-child(2){
  background: #f65555;
}
.cube .ani3 .front i:nth-child(3){
  background: #00abcd;
}
.cube .ani3 .right i:nth-child(1){
  background: #f6c574;
}
.cube .ani3 .right i:nth-child(2){
  background: #00b39f;
}
.cube .ani3 .right i:nth-child(3){
  background: #00abcd;
}
@keyframes cube-ani3{
  50%{
    transform:rotateY(0);
  }
  75%,100%{
    transform:rotateY(-90deg);
  }
}
.cube .ani4{
  opacity: 0;
  top: 0px;
  left: 0;
  width: 30px;
  height: 90px;
  transform-style:preserve-3d;
  animation:cube-ani4 2s ease-in-out infinite,
    cube-ani5 2s steps(1) 1.5s infinite;
}
.cube .ani4 .front i:nth-child(1){
  background: #f6c574;
}
.cube .ani4 .front i:nth-child(2){
  background: #f6c574;
}
.cube .ani4 .front i:nth-child(3){
  background: #00abcd;
}
.cube .ani4 .top i:nth-child(1){
  background: #f6c574;
}
.cube .ani4 .top i:nth-child(2){
  background: #00aacf;
}
.cube .ani4 .top i:nth-child(3){
  background: #00b3a0;
}
@keyframes cube-ani4{
  75%{
    transform:rotateX(0);
  }
  100%{
    transform:rotateX(-90deg);
  }
}
@keyframes cube-ani5{
  0%{
    opacity:1;
  }
  25%{
    opacity:0;
  }
  50%{
    opacity:0;
  }
  75{
    opacity:0;
  }
}
.cube .shadow{
  width: 25px;
  height: 25px;
  background: #f6c574;
  animation:cube-ani6 2s steps(1) infinite;
}
@keyframes cube-ani6{
  0%{
    box-shadow: 30px 0px 0 #00b3a0,
    60px 0px 0 #e2e8e7,
    0px 30px 0 #00aacf,
    30px 30px 0 #00b39f,
    60px 30px 0 #00aacf;
  }
  25%{
    background: #f6c574;
    box-shadow: 60px 0px 0 #e2e8e7,
      0px 30px 0 #00aacf,
      60px 30px 0 #00aacf,
      0px 60px 0 #00aacf,
      60px 60px 0 #fc5652;
  }
  50%{
    background: #f6c574;
    box-shadow: 30px 0 0 #00b3a0,
      60px 0 0 #e2e8e7,
      0px 60px 0 #00aacf,
      30px 60px 0 #e2e8e7,
      60px 60px 0 #fc5652;
  }
  75%{
    background: transparent;
    box-shadow: 30px 0 0 #00b3a0,
      60px 0 0 #e2e8e7,
      30px 30px 0 #00b3a0,
      60px 30px 0 #00aacf,
      30px 60px 0 #e2e8e7,
      60px 60px 0 #fc5652;
  }
  
}