

body {

  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
				overflow:hidden;
				border: 0;
				padding: 0;
				margin: 0;
				font-size: 0;	
}

.wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;	
}

.rover{
  position: absolute;
  width: 100%;
  height: 100%;	
  background-color:;	
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;			  
}

.d20white {
  position: absolute;
  width: 40vmin;
  height: 40vmin;
  -webkit-animation: spinwhite 54s infinite linear;
          animation: spinwhite 54s infinite linear;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.d20white .facewhite {
  position: absolute;
  left: 0;
  bottom: 50%;
  border-bottom: 34.8vmin solid transparent;
  border-left: 20.4vmin solid transparent;
  border-right: 20.4vmin solid transparent;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
    border-bottom-color: white;		  
}
.d20white .facewhite:nth-child(1) {
  -webkit-transform: translateY(-3.7vmin) rotateY(72deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(72deg) rotateX(52.62deg);
}
.d20white .facewhite:nth-child(2) {
  -webkit-transform: translateY(-3.7vmin) rotateY(144deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(144deg) rotateX(52.62deg);
}
.d20white .facewhite:nth-child(3) {
  -webkit-transform: translateY(-3.7vmin) rotateY(216deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(216deg) rotateX(52.62deg);
}
.d20white .facewhite:nth-child(4) {
  -webkit-transform: translateY(-3.7vmin) rotateY(288deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(288deg) rotateX(52.62deg);
}
.d20white .facewhite:nth-child(5) {
  -webkit-transform: translateY(-3.7vmin) rotateY(360deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(360deg) rotateX(52.62deg);
}
.d20white .facewhite:nth-child(6) {
  -webkit-transform: translateY(72.36vmin) rotateY(468deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(468deg) rotateX(127.38deg);
}
.d20white .facewhite:nth-child(7) {
  -webkit-transform: translateY(72.36vmin) rotateY(540deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(540deg) rotateX(127.38deg);
}
.d20white .facewhite:nth-child(8) {
  -webkit-transform: translateY(72.36vmin) rotateY(612deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(612deg) rotateX(127.38deg);
}
.d20white .facewhite:nth-child(9) {
  -webkit-transform: translateY(72.36vmin) rotateY(684deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(684deg) rotateX(127.38deg);
}
.d20white .facewhite:nth-child(10) {
  -webkit-transform: translateY(72.36vmin) rotateY(756deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(756deg) rotateX(127.38deg);
}
.d20white .facewhite:nth-child(11) {
  -webkit-transform: translateY(17.32vmin) rotateY(828deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(828deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(12) {
  -webkit-transform: translateY(17.32vmin) rotateY(900deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(900deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(13) {
  -webkit-transform: translateY(17.32vmin) rotateY(972deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(972deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(14) {
  -webkit-transform: translateY(17.32vmin) rotateY(1044deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(1044deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(15) {
  -webkit-transform: translateY(17.32vmin) rotateY(1116deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(1116deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(16) {
  -webkit-transform: translateY(51.34vmin) rotateY(1152deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1152deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(17) {
  -webkit-transform: translateY(51.34vmin) rotateY(1224deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1224deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(18) {
  -webkit-transform: translateY(51.34vmin) rotateY(1296deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1296deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(19) {
  -webkit-transform: translateY(51.34vmin) rotateY(1368deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1368deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20white .facewhite:nth-child(20) {
  -webkit-transform: translateY(51.34vmin) rotateY(1440deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1440deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}



.d20black {
  position: absolute;
  width: 40vmin;
  height: 40vmin;
  -webkit-animation: spinblack 61s infinite linear;
          animation: spinblack 61s infinite linear;

  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.d20black .faceblack {
  position: absolute;
  left: 0;
  bottom: 50%;
  border-bottom: 34.8vmin solid transparent;
  border-left: 20.4vmin solid transparent;
  border-right: 20.4vmin solid transparent;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  border-bottom-color: black;		  
}
.d20black .faceblack:nth-child(1) {
  -webkit-transform: translateY(-3.7vmin) rotateY(72deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(72deg) rotateX(52.62deg);
}
.d20black .faceblack:nth-child(2) {
  -webkit-transform: translateY(-3.7vmin) rotateY(144deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(144deg) rotateX(52.62deg);
}
.d20black .faceblack:nth-child(3) {
  -webkit-transform: translateY(-3.7vmin) rotateY(216deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(216deg) rotateX(52.62deg);
}
.d20black .faceblack:nth-child(4) {
  -webkit-transform: translateY(-3.7vmin) rotateY(288deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(288deg) rotateX(52.62deg);
}
.d20black .faceblack:nth-child(5) {
  -webkit-transform: translateY(-3.7vmin) rotateY(360deg) rotateX(52.62deg);
          transform: translateY(-3.7vmin) rotateY(360deg) rotateX(52.62deg);
}
.d20black .faceblack:nth-child(6) {
  -webkit-transform: translateY(72.36vmin) rotateY(468deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(468deg) rotateX(127.38deg);
}
.d20black .faceblack:nth-child(7) {
  -webkit-transform: translateY(72.36vmin) rotateY(540deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(540deg) rotateX(127.38deg);
}
.d20black .faceblack:nth-child(8) {
  -webkit-transform: translateY(72.36vmin) rotateY(612deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(612deg) rotateX(127.38deg);
}
.d20black .faceblack:nth-child(9) {
  -webkit-transform: translateY(72.36vmin) rotateY(684deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(684deg) rotateX(127.38deg);
}
.d20black .faceblack:nth-child(10) {
  -webkit-transform: translateY(72.36vmin) rotateY(756deg) rotateX(127.38deg);
          transform: translateY(72.36vmin) rotateY(756deg) rotateX(127.38deg);
}
.d20black .faceblack:nth-child(11) {
  -webkit-transform: translateY(17.32vmin) rotateY(828deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(828deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(12) {
  -webkit-transform: translateY(17.32vmin) rotateY(900deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(900deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(13) {
  -webkit-transform: translateY(17.32vmin) rotateY(972deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(972deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(14) {
  -webkit-transform: translateY(17.32vmin) rotateY(1044deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(1044deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(15) {
  -webkit-transform: translateY(17.32vmin) rotateY(1116deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(17.32vmin) rotateY(1116deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(16) {
  -webkit-transform: translateY(51.34vmin) rotateY(1152deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1152deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(17) {
  -webkit-transform: translateY(51.34vmin) rotateY(1224deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1224deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(18) {
  -webkit-transform: translateY(51.34vmin) rotateY(1296deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1296deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(19) {
  -webkit-transform: translateY(51.34vmin) rotateY(1368deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1368deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}
.d20black .faceblack:nth-child(20) {
  -webkit-transform: translateY(51.34vmin) rotateY(1440deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
          transform: translateY(51.34vmin) rotateY(1440deg) rotateZ(180deg) translateZ(34.02vmin) rotateX(-10.81deg);
}


@-webkit-keyframes spinwhite {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
            transform: rotateX(360deg) rotateY(720deg) rotateZ(1080deg);
  }
}

@keyframes spinblack {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg);
            transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(810deg) rotateZ(1170deg);
            transform: rotateX(360deg) rotateY(810deg) rotateZ(1170deg);
  }
}
