body {

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);

}



.perspective {
    /*   background-color: hsla(0,0%,0%,.1);
 background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%),
                      -webkit-linear-gradient(left, hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%);*/
    background-size: 8em 8em;
  /*  box-shadow: 0 0 0 .1em hsla(0,0%,0%,.2);*/
    height: 24em;
    left: 50%;
    margin: -7.5em;
    /*padding: 4em;*/
    position: absolute;
    top: 50%;
    width: 24em;
    -webkit-transform: rotateX(55deg) rotateZ(45deg);
    -webkit-transform-style: preserve-3d;

}
.cube,
.cube:after,
.cube:before {
    box-shadow: inset 0 0 0 .18em yellow;
    content: '';
    float: left;
    height: 9em;
    position: absolute;
    width: 6em;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
/* Top */
.cube {
      background: hsla( 36, 100%, 50%, 1);
    position: relative;
    -webkit-transform: translateZ(6em);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: .08s;

}

.cube:hover {
    cursor:pointer;

}

/* Left */
.cube:after {
    background: hsla( 36, 100%, 50%, 1);
    -webkit-transform: rotateX(-90deg) translateY(7em) translateX(-3em) translateZ(2em);
    -webkit-transform-origin: 100% 100%;
    height: 7em;

}
/* Right */
.cube:before {
      background: hsla( 36, 100%, 50%, 1);
    -webkit-transform: rotateY(90deg) translateX(7em) translateZ(-4em);
    -webkit-transform-origin: 100% 0;
    width:7em;
}

.frontcover {
  background: hsla( 36, 100%, 50%, 1);
  -webkit-transform: rotateX(-90deg) translateY(0.7em) translateX(+0.5em) translateZ(33.1em);
  -webkit-transform-origin: 100% 100%;
  height: 3em;
  width:23em;

}

.sidecover {
  background: hsla( 36, 100%, 50%, 1);
-webkit-transform: rotateY(90deg) translateX(0.7em) translateY(-40px) translateZ(21em);
-webkit-transform-origin: 100% 0;
width:3em;
height:35em;

}

.frontcovergreen {
  background:  #006600;
  -webkit-transform: rotateX(-90deg) translateY(5.1em) translateX(+1.7em) translateZ(-6em);
  -webkit-transform-origin: 100% 100%;
  height: 6em;
  width:24.5em;

}

.sidecovergreen {
  background:  #006600;
-webkit-transform: rotateY(90deg) translateX(4em) translateY(-657px) translateZ(21em);
-webkit-transform-origin: 100% 0;
width:6em;
height:36em;


}


#cube7top {
  cursor:default;
}


#cube7top:hover {
  background:  #006600;
  cursor:pointer;
}