.face {
   background: linear-gradient(
    to bottom right,
    #000000,
    #2328d1,
    #7e6aff,
    #6fe2e5,
    #85f3ff,
    #9796ef
  );
    box-shadow: inset 0px 0px 20px #FFFFFF, inset 10px 0 46px #E9DEFB, inset 88px 0px 60px #D3F0FE, inset -20px -60px 100px #FDE9F6, inset 0 50px 140px #E5DEF3 !important;
}
.shape {
   animation: roll 12s linear infinite normal;
}

@keyframes roll {
  0%,100% {      transform: rotateX(50deg) rotateY(0deg)}
 50% {    transform: rotateX(120deg) rotateY(360deg)  }
}

.photon-shader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent !important;
    height: 100%;
}
#tridiv {
  perspective: 1200px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 400%;
	top: 0%;
  right: -40%;
	opacity: 0.5
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="pyramid"] .face-wrapper .face {
  transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
  left: 100%;
}
[class*="pyramid"] .bm {
  top: 100%;
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt, [class*="pyramid"] .lt {
  transform-origin: 50% 0;
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-1 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-1 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-1 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-1 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-1 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-1 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-1 .bm {
  width:4em;
  height:4em;
}
.pyr-1 .face {
  background-color:#FFFFFF;
}