/* Cube CSS */

#mainDiv {
    width: 200px;
    height: 200px;
    margin: 20px;
    perspective: 1500px;border-style:hidden !important; border:0 !important
}

#boxDiv {
    width: 300px;   
    transform-style: preserve-3d; 
    animation: rotate 32s linear infinite;border-style:hidden !important; border:0 !important
}

#boxDiv div {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 1 ;
    color: black

/*
;border-style:hidden !important; border:0 !important
*/

}


#boxDiv:hover {
  animation-play-state: paused;
}


#front {
    transform: translateZ(150px);
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;
}


#back {
    transform: rotateY(180deg) translateZ(150px);
    background: #101010;
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;   
}

#left {
    transform: rotateY(-90deg) translateX(-150px);
    transform-origin: left;
    background: black;
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;  
}

#right {
    transform: rotateY(90deg) translateX(150px);
    transform-origin: right;
    background: #101010;  
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;  
}

#top {
    transform: rotateX(-90deg) translateY(-150px);
    transform-origin: top;
    background: black;
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;   
}

#bottom {
    transform: rotateX(90deg) translateY(150px);
    transform-origin: bottom;
    background: #101010; 
    background-image: url(images/cubew.png );
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px ;   
}

@keyframes rotate {
	0%{ transform: rotateY(0);}
  24%{ transform: rotateY(0);}
	30%{ transform: rotateY(90deg);}
  49%{ transform: rotateY(90deg);}
	55%{ transform: rotateY(180deg);}
  72%{ transform: rotateY(180deg);}
	76%{ transform: rotateY(270deg);}
  96%{ transform: rotateY(270deg);}
	99.999%{ transform: rotateY(360deg);}
  100%{ transform: rotateY(0);}
}

.cubeshadow {
    
    
    width:200px;
    height:200px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 0 30px 30px rgba(0,0,0,0.5);
    -webkit-transform: rotateX(90deg) translateZ(-250px) rotateY(180deg) translateX(0px);

}