.rotateImg180XY{
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg);

}

.rotateImg180X{
  -webkit-transform:rotateX(180deg);
  -moz-transform:rotateX(180deg);
  -ms-transform:rotateX(180deg);
  -o-transform:rotateX(180deg);
  transform:rotateX(180deg);

}

.fadeIn{
  -webkit-animation:fadeIn 1s;
  -moz-animation:fadeIn 1s;
  -ms-animation:fadeIn 1s;
  -o-animation:fadeIn 1s;
  animation:fadeIn 1s;

}

@-webkit-keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}

@-moz-keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}

@-ms-keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}

@-o-keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes fadeIn {
  from{opacity:0;}
  to{opacity:1;}
}

@-webkit-keyframes spinPulsing{
  0%{-webkit-transform:scale(1.0,1.0) rotate(0deg);
    opacity:1;}
  50%{-webkit-transform:scale(0.5,0.5) rotate(180deg);
    opacity:0;}
  100%{
    -webkit-transform:scale(1.0,1.0) rotate(360deg);
    -webkit-transition:opacity 1.0s ease-in;
    from{opacity:0.25;}
    to{opacity:1;}
  }
}


@-moz-keyframes spinPulsing{
  0%{-moz-transform:scale(1.0,1.0) rotate(0deg);
    opacity:1;}
  50%{-moz-transform:scale(0.5,0.5) rotate(180deg);
    opacity:0;}
  100%{
    -moz-transform:scale(1.0,1.0) rotate(360deg);
    -moz-transition:opacity 1.0s ease-in;
    from{opacity:0.25;}
    to{opacity:1;}
  }
}


@-ms-keyframes spinPulsing{
  0%{-ms-transform:scale(1.0,1.0) rotate(0deg);
    opacity:1;}
  50%{-ms-transform:scale(0.5,0.5) rotate(180deg);
    opacity:0;}
  100%{
    -ms-transform:scale(1.0,1.0) rotate(360deg);
    -ms-transition:opacity 1.0s ease-in;
    from{opacity:0.25;}
    to{opacity:1;}
  }
}


@-o-keyframes spinPulsing{
  0%{-o-transform:scale(1.0,1.0) rotate(0deg);
    opacity:1;}
  50%{-o-transform:scale(0.5,0.5) rotate(180deg);
    opacity:0;}
  100%{
    -o-transform:scale(1.0,1.0) rotate(360deg);
    -o-transition:opacity 1.0s ease-in;
    from{opacity:0.25;}
    to{opacity:1;}
  }
}


@keyframes spinPulsing{
  0%{transform:scale(1.0,1.0) rotate(0deg);
    opacity:1;}
  50%{transform:scale(0.5,0.5) rotate(180deg);
    opacity:0;}
  100%{
    transform:scale(1.0,1.0) rotate(360deg);
    transition:opacity 1.0s ease-in;
    from{opacity:0.25;}
    to{opacity:1;}
  }
}

#box{
  position:absolute;
  background:black;
  visibility:visible;
  top:25%;
  left:25%;
  width:100%;
  max-width:200px;
  height:100%;
  max-height:200px;

}

.flipSpeed{
  position:absolute;
  width:50%;
  /*max-width:100px;*/
  height:50%;
  /*max-height:100px;*/
  -webkit-transition:all 750ms;
  -moz-transition:all 750ms;
  /*-ms-transition:all 750ms;*/
  -o-transition:all 750ms;
  transition:all 750ms;

}

#base1:hover{
  -webkit-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:-105% -105%;
  -moz-transform-origin:-105% -105%;
  -ms-transform-origin:-105% -105%;
  -o-transform-origin:-105% -105%;
  transform-origin:-105% -105%;

}

#base2:hover{
  -webkit-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,1,0,-65deg) scale(1.6,1.6);
  -webkit	-transform-origin:-40% -245%;
  -moz-transform-origin:-40% -245%;
  -ms-transform-origin:-40% -245%;
  -o-transform-origin:-40% -245%;
  transform-origin:-40% -245%;

}

#base3:hover{
  -webkit-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(-1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:-105% 105%;
  -moz-transform-origin:-105% 105%;
  -ms-transform-origin:-105% 105%;
  -o-transform-origin:-105% 105%;
  transform-origin:-105% 105%;

}

#base4:hover{
  -webkit-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -moz-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -ms-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -o-transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  transform:rotate3d(1,-1,0,-65deg) scale(1.6,1.6);
  -webkit-transform-origin:245% 245%;
  -moz-transform-origin:245% 245%;
  -ms-transform-origin:245% 245%;
  -o-transform-origin:245% 245%;
  transform-origin:245% 245%;

}

/* percent (145%) must remain constant */
#clip{
  width:145%;
  /*max-width:145px;*/
  height:145%;
  /*max-height:145px;*/

}

.clipPlus1{
  -webkit-transform:rotateZ(180deg);
  -moz-transform:rotateZ(180deg);
  -ms-transform:rotateZ(180deg);
  -o-transform:rotateZ(180deg);
  transform:rotateZ(180deg);

}

.clipPlus2{
  -webkit-transform:rotateZ(-90deg);
  -moz-transform:rotateZ(-90deg);
  -ms-transform:rotateZ(-90deg);
  -o-transform:rotateZ(-90deg);
  transform:rotateZ(-90deg);
  -webkit	-transform-origin:-100% 100%;
  -moz-transform-origin:-100% 100%;
  -ms-transform-origin:-100% 100%;
  -o-transform-origin:-100% 100%;
  transform-origin:-100% 100%;

}

.clipPlus3{
  -webkit-transform:rotateZ(90deg);
  -moz-transform:rotateZ(90deg);
  -ms-transform:rotateZ(90deg);
  -o-transform:rotateZ(90deg);
  transform:rotateZ(90deg);
  -webkit	-transform-origin:100% 0%;
  -moz-transform-origin:100% 0%;
  -ms-transform-origin:100% 0%;
  -o-transform-origin:100% 0%;
  transform-origin:100% 0%;

}

.clipPlus4{
  -webkit-transform:rotateZ(0deg);
  -moz-transform:rotateZ(0deg);
  -ms-transform:rotateZ(0deg);
  -o-transform:rotateZ(0deg);
  transform:rotateZ(0deg);
  -webkit-transform-origin:100% 100%;
  -moz-transform-origin:100% 100%;
  -ms-transform-origin:100% 100%;
  -o-transform-origin:100% 100%;
  transform-origin:100% 100%;

}

#image{
  background:url(http://www.richnutcoffee.net/Z_D/cosmetics_For_DIVs/galleryBox.png);
  background-size:contain;
  width:100%;
  max-width:100px;
  height:100%;
  max-height:100px;

}

.imagePlus1:hover,.imagePlus2:hover,.imagePlus3:hover,.imagePlus4:hover{
  -webkit-animation:spinPulsing 6s 1 ease-in reverse;
  -moz-animation:spinPulsing 6s 1 ease-in reverse;
  -ms-animation:spinPulsing 6s 1 ease-in reverse;
  -o-animation:spinPulsing 6s 1 ease-in reverse;
  animation:spinPulsing 6s 1 ease-in reverse;
  box-shadow:0px 0px 4px red,0px 0px 4px green,0px 0px 4px blue,0px 0px 4px blue,0px 0px 4px red,0px 0px 4px green,2px 2px 4px blue,4px 4px 4px red,6px 6px 4px green,2px 2px 4px blue,4px 4px 4px red,6px 6px 4px green;

}

.place1{
  top:-22.5%;
  left:-22.5%;

}

.place2{
  top:50%;
  left:195%;

}

.place3{
  top:122.5%;
  left:-22.5%;

}

.place4{
  top:50%;
  left:50%;

}

#base,#clip,#image{
  overflow:hidden;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  z-index:1;

}

/* ----------------- the CUBE new stuff ----------------- */

.stage{
  opacity:0;

}

.stagePacity{
  -webkit-animation:fadeIn 2s;
  -moz-animation:fadeIn 2s;
  -ms-animation:fadeIn 2s;
  -o-animation:fadeIn 2s;
  animation:fadeIn 2s;
  /*pointer-events:all;*/

}

 #spinner div{
  position:absolute;
  background:rgba(255,255,255,0.8);
  width:25%;
  /*max-width:72px;*/
  height:25%;
  /*max-height:72px;*/
  border:1px solid #ccc;
  box-shadow:inset 0 0 12px rgba(0,0,0,0.2);
  text-align:center;
  line-height:18em;
  font-size:15em;
  
}

#spinner .face1{-webkit-transform:translateZ(2.2vw);-moz-transform:translateZ(2.2vw);-ms-transform:translateZ(2.2vw);-o-transform: translateZ(2.2vw);transform:translateZ(2.2vw);}
  
#spinner .face2{-webkit-transform:rotateY(90deg) translateZ(2.2vw);-moz-transform:rotateY(90deg) translateZ(2.2vw);-ms-transform:rotateY(90deg) translateZ(2.2vw);-o-transform:rotateY(90deg) translateZ(2.2vw);transform:rotateY(90deg) translateZ(2.2vw);}
  
#spinner .face3 {-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);-o-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);}
  
#spinner .face4{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);-o-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);}
  
#spinner .face5{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);-o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);}
  
#spinner .face6{-webkit-transform:rotateX(-90deg) translateZ(2.2vw);-moz-transform:rotateX(-90deg) translateZ(2.2vw);-ms-transform:rotateX(-90deg) translateZ(2.2vw);-o-transform:rotateX(-90deg) translateZ(2.2vw);transform:rotateX(-90deg) translateZ(2.2vw);}
  

@-webkit-keyframes spincube{
  from,to{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16% {-webkit-transform:rotateY(-90deg);}
  33% {-webkit-transform:rotateY(-90deg) rotateZ(90deg);}
  50% {-webkit-transform:rotateY(-180deg) rotateZ(90deg);}
  66% {-webkit-transform:rotateY(90deg) rotateX(90deg);}
  83% {-webkit-transform:rotateX(90deg);}

}

@-moz-keyframes spincube{
  from,to{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-moz-transform:rotateY(-90deg);}
  33%{-moz-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-moz-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-moz-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-moz-transform:rotateX(90deg);}

}

@-ms-keyframes spincube{
  from,to{-ms-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-ms-transform:rotateY(-90deg);}
  33%{-ms-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-ms-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-ms-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-ms-transform:rotateX(90deg);}

}

@-o-keyframes spincube{
  from,to{-o-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{-o-transform:rotateY(-90deg);}
  33%{-o-transform:rotateY(-90deg) rotateZ(90deg);}
  50%{-o-transform:rotateY(-180deg) rotateZ(90deg);}
  66%{-o-transform:rotateY(-270deg) rotateX(90deg);}
  83%{-o-transform:rotateX(90deg);}

}

@keyframes spincube{
  from,to{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
  16%{transform:rotateY(-90deg);}
  33%{transform:rotateY(-90deg) rotateZ(90deg);}
  50%{transform:rotateY(-180deg) rotateZ(90deg);}
  66%{transform:rotateY(-270deg) rotateX(90deg);}
  83%{transform:rotateX(90deg);}

}

#spinner{
  -webkit-animation-name:spincube 12s ease-in infinite preserve-3d;
  -moz-animation-name:spincube 12s ease-in infinite preserve-3d;
  -ms-animation-name:spincube 12s ease-in infinite preserve-3d;
  -o-animation-name:spincube 12s ease-in infinite preserve-3d;
  animation-name:spincube 12s ease-in infinite preserve-3d;
  -webkit-transform-origin:30px 30px 0;
  -moz-transform-origin:30px 30px 0;
  -ms-transform-origin:30px 30px 0;
  -o-transform-origin:30px 30px 0;
  transform-origin:30px 30px 0;
 
}

.cubespinner{
  -webkit-animation:spincube 12s ease-in-out infinite;
  -moz-animation:spincube 12s ease-in-out infinite;
  -ms-animation:spincube 12s ease-in-out infinite;
  -o-animation:spincube 12s ease-in-out infinite;
  animation:spincube 12s ease-in-out infinite;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform-origin:30px 30px 0;
  -moz-transform-origin:30px 30px 0;
  -ms-transform-origin:30px 30px 0;
  -o-transform-origin:30px 30px 0;
  transform-origin:30px 30px 0;

}

.cubespinner div{
  position:absolute;
  border-radius:7%;
  width:71.5%;
  height:auto;
  border:1px solid #ccc;
  background:rgba(255,255,255,0.8);
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8);
  line-height:170%;
  text-align:center;
  font-size:210%;

}

.cubespinner .face1{
  -webkit-transform:translateZ(2.2vw);
  -moz-transform:translateZ(2.2vw);
  -ms-transform:translateZ(2.2vw);
  -o-transform:translateZ(2.2vw);
  transform:translateZ(2.2vw);

}

.cubespinner .face2{
    -webkit-transform:rotateY(90deg) translateZ(2.2vw);
    -moz-transform:rotateY(90deg) translateZ(2.2vw);
    -ms-transform:rotateY(90deg) translateZ(2.2vw);
    -o-transform:rotateY(90deg) translateZ(2.2vw);
    transform:rotateY(90deg) translateZ(2.2vw);

}

.cubespinner .face3{
  -webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  -o-transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);
  transform:rotateY(90deg) rotateX(90deg) translateZ(2.2vw);

}

.cubespinner .face4{
  -webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  -o-transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);
  transform:rotateY(180deg) rotateZ(90deg) translateZ(2.2vw);

}

.cubespinner .face5{
  -webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  -o-transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);
  transform:rotateY(-90deg) rotateZ(90deg) translateZ(2.2vw);

}

.cubespinner .face6{
   -webkit-transform:rotateX(-90deg) translateZ(2.2vw);
   -moz-transform:rotateX(-90deg) translateZ(2.2vw);
   -ms-transform:rotateX(-90deg) translateZ(2.2vw);
   -o-transform:rotateX(-90deg) translateZ(2.2vw);
  transform:rotateX(-90deg) translateZ(2.2vw);

}

div[id="geeks"]{
  background-color: green;
  color:white;

}

li[class="gfg"]{
  color:green;

}