/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 55%;
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 20%;
  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*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 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;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:4em;
  margin:-2em 0 0 -2em;
}
.cub-1 .ft {
  transform:translateZ(2em);
}
.cub-1 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:4em;
  height:4em;
}
.cub-1 .tp, .cub-1 .bm {
  width:4em;
  height:4em;
}
.cub-1 .face {
  background-color:#FFFFFF;
}
/* .pyr-1 styles */
.pyr-1 {
  transform:translate3D(0em, -4.5em, 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:#e91e63;
}
/* .pyr-2 styles */
.pyr-2 {
  transform:translate3D(0em, 0em, 4.5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-2 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-2 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-2 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-2 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-2 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-2 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-2 .bm {
  width:4em;
  height:4em;
}
.pyr-2 .face {
  background-color:#4caf50;
}
/* .pyr-3 styles */
.pyr-3 {
  transform:translate3D(0em, 0em, -4.5em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-3 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-3 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-3 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-3 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-3 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-3 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-3 .bm {
  width:4em;
  height:4em;
}
.pyr-3 .face {
  background-color:#9e9e9e;
}
/* .pyr-4 styles */
.pyr-4 {
  transform:translate3D(4.5em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-4 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-4 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-4 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-4 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-4 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-4 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-4 .bm {
  width:4em;
  height:4em;
}
.pyr-4 .face {
  background-color:#9c27b0;
}
/* .pyr-5 styles */
.pyr-5 {
  transform:translate3D(-4.5em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-5 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-5 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-5 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-5 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-5 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-5 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-5 .bm {
  width:4em;
  height:4em;
}
.pyr-5 .face {
  background-color:#3f51b5;
}
/* .pyr-6 styles */
.pyr-6 {
  transform:translate3D(0em, 4.5em, 0em) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4em;
  height:5em;
  margin:-2.5em 0 0 -2em;
}
.pyr-6 .face-wrapper {
  width:4em;
  height:2em;
}
.pyr-6 .face-wrapper .face {
  width:4em;
  height:4em;
}
.pyr-6 .ft {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(21.801409486351798deg);
}
.pyr-6 .bk {
  transform:scaleZ(2.692582403567252) scaleY(2.692582403567252) rotateX(-21.801409486351798deg) rotateY(180deg);
}
.pyr-6 .rt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(21.801409486351798deg) rotateY(-90deg);
}
.pyr-6 .lt {
  transform:scaleX(2.692582403567252) scaleY(2.692582403567252) rotateZ(-21.801409486351798deg) rotateY(90deg);
}
.pyr-6 .bm {
  width:4em;
  height:4em;
}
.pyr-6 .face {
  background-color:#ff5722;
}