CodePen

HTML

            
              <div id="anime">
  <div class="stars"></div>
  <div id="tridiv">
    <div class="scene" style="-webkit-transform:rotateX(-35deg) rotateY(-22deg); -moz-transform:rotateX(-35deg) rotateY(-22deg); -ms-transform:rotateX(-35deg) rotateY(-22deg); transform:rotateX(-35deg) rotateY(-22deg); ">
      <div class="shape cuboid-1 cub-1">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape prism-1 pri-1">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.12549);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-2 cub-2">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape prism-2 pri-2">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0901961);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
      </div>
      <div class="shape prism-3 pri-3">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.160784);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
      </div>
      <div class="shape prism-4 pri-4">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
      </div>
      <div class="shape prism-5 pri-5">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.156863);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-3 cub-3">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-4 cub-4">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
      </div>
      <div class="shape prism-6 pri-6">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0588235);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
      </div>
      <div class="shape prism-7 pri-7">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.290196);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
      </div>
      <div class="shape prism-8 pri-8">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.541176);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape prism-9 pri-9">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.305882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cylinder-1 cyl-1">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.619608);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.117647);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0862745);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0941176);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0196078);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
        </div>
        <div class="face side s10">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
        </div>
        <div class="face side s11">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
        </div>
        <div class="face side s12">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
        </div>
        <div class="face side s13">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face side s14">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.690196);"></div>
        </div>
        <div class="face side s15">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.698039);"></div>
        </div>
      </div>
      <div class="shape cylinder-2 cyl-2">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.392157);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00784314);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.207843);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.611765);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape prism-10 pri-10">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
      </div>
      <div class="shape cylinder-3 cyl-3">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.384314);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.176471);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0156863);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0156863);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.215686);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.423529);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.615686);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cuboid-5 cub-5">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-6 cub-6">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
      </div>
      <div class="shape cylinder-4 cyl-4">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.619608);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.117647);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0862745);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0941176);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0196078);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
        </div>
        <div class="face side s10">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
        </div>
        <div class="face side s11">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
        </div>
        <div class="face side s12">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
        </div>
        <div class="face side s13">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face side s14">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.690196);"></div>
        </div>
        <div class="face side s15">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.698039);"></div>
        </div>
      </div>
      <div class="shape cylinder-5 cyl-5">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.392157);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00784314);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.207843);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.611765);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cylinder-6 cyl-6">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.592157);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00392157);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.105882);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00392157);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.411765);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cuboid-7 cub-7">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape prism-11 pri-11">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.443137);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
      </div>
      <div class="shape cuboid-8 cub-8">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
        </div>
      </div>
      <div class="shape cuboid-9 cub-9">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cylinder-7 cyl-7">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.619608);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.117647);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0862745);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0941176);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0196078);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
        </div>
        <div class="face side s10">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
        </div>
        <div class="face side s11">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
        </div>
        <div class="face side s12">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
        </div>
        <div class="face side s13">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face side s14">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.690196);"></div>
        </div>
        <div class="face side s15">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.698039);"></div>
        </div>
      </div>
      <div class="shape cylinder-8 cyl-8">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.392157);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00784314);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.207843);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.611765);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cylinder-9 cyl-9">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.588235);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.392157);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00784314);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00784314);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.207843);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.611765);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cylinder-10 cyl-10">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.619608);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.505882);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.376471);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.117647);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0862745);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0941176);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0196078);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0941176);"></div>
        </div>
        <div class="face side s10">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
        </div>
        <div class="face side s11">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
        </div>
        <div class="face side s12">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
        </div>
        <div class="face side s13">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face side s14">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.690196);"></div>
        </div>
        <div class="face side s15">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.698039);"></div>
        </div>
      </div>
      <div class="shape prism-12 pri-12">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-10 cub-10">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cylinder-11 cyl-11">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.592157);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00392157);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.105882);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00392157);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.411765);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cylinder-12 cyl-12">
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face side s0">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.592157);"></div>
        </div>
        <div class="face side s1">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.396078);"></div>
        </div>
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.00392157);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.105882);"></div>
        </div>
        <div class="face side s5">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.00392157);"></div>
        </div>
        <div class="face side s6">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.203922);"></div>
        </div>
        <div class="face side s7">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.411765);"></div>
        </div>
        <div class="face side s8">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.607843);"></div>
        </div>
        <div class="face side s9">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
      </div>
      <div class="shape cuboid-11 cub-11">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-12 cub-12">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape prism-13 pri-13">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
      </div>
      <div class="shape prism-14 pri-14">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.541176);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
      </div>
      <div class="shape prism-15 pri-15">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.403922);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
      </div>
      <div class="shape prism-16 pri-16">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
      </div>
      <div class="shape prism-17 pri-17">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.643137);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face-wrapper rt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
          </div>
        </div>
        <div class="face-wrapper lt">
          <div class="face">
            <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
          </div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-13 cub-13">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
        </div>
      </div>
      <div class="shape cuboid-14 cub-14">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
      </div>
      <div class="shape cuboid-15 cub-15">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
        </div>
      </div>
      <div class="shape cuboid-16 cub-16">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
      </div>
      <div class="shape cuboid-17 cub-17">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.32549);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.27451);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.705882);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.101961);"></div>
        </div>
      </div>
      <div class="shape cuboid-18 cub-18">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.509804);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0901961);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.6);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0);"></div>
        </div>
      </div>
      <div class="shape cylinder-13 cyl-13">
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
        </div>
      </div>
      <div class="shape cuboid-19 cub-19">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-20 cub-20">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-21 cub-21">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cuboid-22 cub-22">
        <div class="face ft">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.105882);"></div>
        </div>
        <div class="face bk">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face rt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.415686);"></div>
        </div>
        <div class="face lt">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.180392);"></div>
        </div>
        <div class="face bm">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.666667);"></div>
        </div>
        <div class="face tp">
          <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
        </div>
      </div>
      <div class="shape cylinder-14 cyl-14">
        <div class="face tp">
        </div>
        <div class="face side s0">
        </div>
        <div class="face side s1">
        </div>
        <div class="face side s2">
        </div>
        <div class="face side s3">
        </div>
        <div class="face side s4">
        </div>
        <div class="face side s5">
        </div>
      </div>
      <div class="shape cylinder-15 cyl-15">
        <div class="face tp">
        </div>
        <div class="face side s0">
        </div>
        <div class="face side s1">
        </div>
        <div class="face side s2">
        </div>
        <div class="face side s3">
        </div>
        <div class="face side s4">
        </div>
        <div class="face side s5">
        </div>
      </div>
      <div class="shape cylinder-16 cyl-16">
        <div class="face tp">
        </div>
        <div class="face side s0">
        </div>
        <div class="face side s1">
        </div>
        <div class="face side s2">
        </div>
        <div class="face side s3">
        </div>
        <div class="face side s4">
        </div>
        <div class="face side s5">
        </div>
      </div>
      <div class="shape cylinder-17 cyl-17">
        <div class="face tp">
        </div>
        <div class="face side s0">
        </div>
        <div class="face side s1">
        </div>
        <div class="face side s2">
        </div>
        <div class="face side s3">
        </div>
        <div class="face side s4">
        </div>
        <div class="face side s5">
        </div>
      </div>
      <div class="shape cylinder-18 cyl-18">
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
        </div>
      </div>
      <div class="shape cylinder-19 cyl-19">
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
        </div>
      </div>
      <div class="shape cylinder-20 cyl-20">
        <div class="face side s2">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.584314);"></div>
        </div>
        <div class="face side s3">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.494118);"></div>
        </div>
        <div class="face side s4">
          <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="build-with">
    <p>Built with</p>
    <a href="http://tridiv.com">
      <img src="http://s.cdpn.io/1137/tridiv-logo.png" alt="Made with Tridiv"/>
    </a>
    <p class="making">Making 3D in CSS has never been easier</p>
    <a class="btn" href="http://tridiv.com">tridiv.com</a>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /* Demo styles */

#anime {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000103;
}

#tridiv {
  z-index: 1;
  transform-style: preserve-3d;
}

.scene { 
  animation: xwing 21s ease 1 0s normal forwards,
             xwing-loop 20s ease infinite 24s normal forwards; 
}

.stars {
  z-index: 0;
  transform-style: preserve-3d;
  position: absolute;
  width: 420em;
  height: 70em;
  background-image:
 url(http://s.cdpn.io/1137/hori.png),url(http://s.cdpn.io/1137/stars_5.png);
  background-repeat: repeat-x,repeat-x repeat-y;
  transform:translate3D(-5em, 0em, 0);
  animation: stars 21s ease;
}

/* Custom styles */

.cyl-13 .face,
.cyl-14 .face,
.cyl-15 .face,
.cyl-16 .face,
.cyl-17 .face,
.cyl-18 .face,
.cyl-19 .face,
.cyl-20 .face {
  backface-visibility: visible;
}

.cyl-14,
.cyl-15,
.cyl-16,
.cyl-17 {
  opacity: .2;
  animation: jet 20s ease 1 0s;
}

.cyl-14 .side,
.cyl-15 .side,
.cyl-16 .side,
.cyl-17 .side {
  opacity: .7;
  background: linear-gradient(bottom, rgba(249,249,249,0) 0%,rgba(249,249,248,0) 1%,rgba(247,238,215,0.27) 38%,rgba(240,208,151,0.44) 61%,rgba(234,184,98,0.35) 80%,rgba(245,92,49,0.3) 90%,rgba(255,0,0,0.05) 100%)!important;
  background: linear-gradient(to top, rgba(249,249,249,0) 0%,rgba(249,249,248,0) 1%,rgba(247,238,215,0.27) 38%,rgba(240,208,151,0.44) 61%,rgba(234,184,98,0.35) 80%,rgba(245,92,49,0.3) 90%,rgba(255,0,0,0.05) 100%)!important;
}

.cyl-14 .tp,
.cyl-15 .tp,
.cyl-16 .tp,
.cyl-17 .tp {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(center, ellipse cover, #fdfdd2 0%,#fdfdd2 30%,#fcc041 60%,#ea250c 80%);
  background: radial-gradient(ellipse at center, #fdfdd2 0%,#fdfdd2 30%,#fcc041 60%,#ea250c 80%);
}

@keyframes jet {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  20%  { opacity: .1; }
  40%  { opacity: .65; }
  44%  { opacity: .025; }
  50%  { opacity: .25; }
  52%  { opacity: .025; }
  55%  { opacity: .025; }
  70%  { opacity: .6; }
  75%  { opacity: .025; }
  78%  { opacity: .3; }
  82%  { opacity: .05; }
  86%  { opacity: .25; }
  87%  { opacity: .1; }
  88%  { opacity: .2; }
  90%  { opacity: .1; }
  100% { opacity: 1; }
}

@keyframes xwing {
  0%   { transform:translate3D(0em, 0em, -1000em) rotateX(0deg) rotateY(0deg) rotateZ(480deg)}
  10%  { transform:translate3D(0em, 0em, 16em) rotateX(-3deg) rotateY(0deg) rotateZ(-8deg) }
  20%  { transform:translate3D(-2em, 0em, 0em) rotateX(-25deg) rotateY(25deg) rotateZ(0deg) }
  30%  { transform:translate3D(2em, 0em, 0em) rotateX(0deg) rotateY(75deg) rotateZ(45deg) }
  40%  { transform:translate3D(-1em, 0em, 0em) rotateX(0deg) rotateY(90deg) rotateZ(-25deg) }
  55%  { transform:translate3D(2em, 0em, 0em) rotateX(-25deg) rotateY(320deg) rotateZ(35deg) }
  82%  { transform:translate3D(0em, 0em, 16em) rotateX(-15deg) rotateY(180deg) rotateZ(-380deg) }
  87%  { transform:translate3D(0em, 0em, 16em) rotateX(0deg) rotateY(180deg) rotateZ(-355deg) }
  90%  { transform:translate3D(0em, 0em, 24em) rotateX(0deg) rotateY(180deg) rotateZ(-360deg) }
  100% { transform:translate3D(0em, 0em, -4000em) rotateX(0deg) rotateY(180deg) rotateZ(-360deg)}
}

@keyframes xwing-loop {
  0%   { transform:translate3D(-120em, -250em, -400em) rotateX(-45deg) rotateY(45deg) rotateZ(0deg)}
  35%   { transform:translate3D(120em, 200em, 300em) rotateX(-30deg) rotateY(0deg) rotateZ(-110deg)}
  36%   { transform:translate3D(-200em, 5em, 10em) rotateX(-10deg) rotateY(90deg) rotateZ(-30deg)}
  74%   { transform:translate3D(250em, -30em, -100em) rotateX(45deg) rotateY(90deg) rotateZ(30deg)}
  75%   { transform:translate3D(120em, 0em, -10em) rotateX(0deg) rotateY(-90deg) rotateZ(15deg)}
  100%  { transform:translate3D(-250em, 5em, -120em) rotateX(0deg) rotateY(-90deg) rotateZ(120deg)}
}

@keyframes stars {
  0%   { transform: translate3D(-5em, 0em, 0); }
  10%  { transform: translate3D(-5em, -12em, 0); }
  20%  { transform: translate3D(-15em, -10em, 0); }
  55%  { transform: translate3D(-280em, -12em, 0); }
  82%  { transform: translate3D(0, -11em, 0); }
  87%  { transform: translate3D(-5em, -12em, 0); }
  90%  { transform: translate3D(-5em, -12em, 0); }
  100% { transform: translate3D(-5em, 0, 0); }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

.build-with {
  opacity: 0;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -240px 0 0 -240px;
  width: 480px;
  height: 480px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  animation: build 4s ease 20s normal forwards;
}

@keyframes build {
  0% {opacity: 0; transform: translateY(4em)}
  100% {opacity: 1;}
}

.build-with p {
  font-size: 24px;
  margin-bottom: 2em;
}

.making {
  opacity: 0;
  animation: btn 1s ease 1 22s normal forwards;
}

.build-with .btn {
  opacity: 0;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: white;
  background-color: #009AFF;
  padding: 20px 32px;
  border-radius: 3px;
  animation: btn .5s ease 1 23.5s normal forwards;
}

@keyframes btn {
  0% {opacity: 0; transform: translateY(4em)}
  75% {opacity: 1; transform: translateY(-.5em)}
  100% {opacity: 1;}
}

.build-with .btn:hover {
  background-color:#0088E3;
}

.build-with .btn:active {
  background-color:#0088E3;
}

.build-with img {
  width: 220px;
  height: auto;
  margin-bottom: 3em;
}

.build-with a {
  display: inline-block;
  transition: background .25s ease,
              -webkit-transform .25s ease;
}

.build-with a:hover {
  transform: scale(1.1);
}

.build-with a:active {
  transform: scale(.9);
}

/* /!\ 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: 100%;
}
.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*="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*="prism"] .ft, [class*="prism"] .bk {
  width: 100%;
  height: 100%;
}
[class*="prism"] .bk {
  left: 100%;
}
[class*="prism"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="prism"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="prism"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="prism"] .lt {
  left: 100%;
}
[class*="prism"] .bm {
  top: 100%;
}
[class*="prism"] .rt .face {
  left: -100%;
  transform-origin: 100% 0;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 0.625em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:3.25em;
  margin:-1.625em 0 0 -1.75em;
}
.cub-1 .ft {
  transform:translateZ(3.75em);
}
.cub-1 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:7.5em;
  height:3.25em;
}
.cub-1 .tp, .cub-1 .bm {
  width:3.5em;
  height:7.5em;
}
.cub-1 .face {
  background-color:#bfc9c5;
}
/* .pri-1 styles */
.pri-1 {
  transform:translate3D(0em, -1.5em, 3.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:.5;
  width:3.5em;
  height:.9em;
  margin:-0.45em 0 0 -1.75em;
}
.pri-1 .rt .face {
  transform:rotateZ(-78.43986920578223deg);
}
.pri-1 .lt .face {
  transform:rotateZ(78.43986920578223deg);
}
.pri-1 .ft {
  height:4.491102314577124em;
  transform:translateZ(-2.2em) rotateX(78.43986920578223deg);
}
.pri-1 .bk {
  transform:translateZ(-2.2em) rotateY(180deg);
}
.pri-1 .rt, .pri-1 .lt {
  width:4.4em;
  height:.9em;
}
.pri-1 .rt .face, .pri-1 .lt .face {
  height:4.491102314577124em;
}
.pri-1 .bm {
  width:3.5em;
  height:4.4em;
}
.pri-1 .face {
  background-color:#3284ce;
}
.pri-1 .bk {
  background-color:#02101f;
}
.pri-1 .bm {
  background-color:#123a5f;
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(0em, -1.5em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:1em;
  margin:-0.5em 0 0 -1.75em;
}
.cub-2 .ft {
  transform:translateZ(1.5em);
}
.cub-2 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-2 .rt, .cub-2 .lt {
  width:3em;
  height:1em;
}
.cub-2 .tp, .cub-2 .bm {
  width:3.5em;
  height:3em;
}
.cub-2 .face {
  background-color:#bfc9c5;
}
/* .pri-2 styles */
.pri-2 {
  transform:translate3D(0em, -0.625em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:.75em;
  margin:-0.375em 0 0 -1em;
}
.pri-2 .rt .face {
  transform:rotateZ(-85.71084667118097deg);
}
.pri-2 .lt .face {
  transform:rotateZ(85.71084667118097deg);
}
.pri-2 .ft {
  height:10.02808556006579em;
  transform:translateZ(-5em) rotateX(85.71084667118097deg);
}
.pri-2 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-2 .rt, .pri-2 .lt {
  width:10em;
  height:.75em;
}
.pri-2 .rt .face, .pri-2 .lt .face {
  height:10.02808556006579em;
}
.pri-2 .bm {
  width:2em;
  height:10em;
}
.pri-2 .face {
  background-color:#bfc9c5;
}
/* .pri-3 styles */
.pri-3 {
  transform:translate3D(1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1.5em;
  height:1em;
  margin:-0.5em 0 0 -0.75em;
}
.pri-3 .rt .face {
  transform:rotateZ(-84.28940686250036deg);
}
.pri-3 .lt .face {
  transform:rotateZ(84.28940686250036deg);
}
.pri-3 .ft {
  height:10.04987562112089em;
  transform:translateZ(-5em) rotateX(84.28940686250036deg);
}
.pri-3 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-3 .rt, .pri-3 .lt {
  width:10em;
  height:1em;
}
.pri-3 .rt .face, .pri-3 .lt .face {
  height:10.04987562112089em;
}
.pri-3 .bm {
  width:1.5em;
  height:10em;
}
.pri-3 .face {
  background-color:#FFFFFF;
}
.pri-3 .ft {
  background-color:#8b2626;
}
.pri-3 .lt > div {
  background-color:#bfc9c5;
}
.pri-3 .rt > div {
  background-color:#bfc9c5;
}
/* .pri-4 styles */
.pri-4 {
  transform:translate3D(-1.25em, 0.5em, 10.5em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
  opacity:1;
  width:1.5em;
  height:1em;
  margin:-0.5em 0 0 -0.75em;
}
.pri-4 .rt .face {
  transform:rotateZ(-84.28940686250036deg);
}
.pri-4 .lt .face {
  transform:rotateZ(84.28940686250036deg);
}
.pri-4 .ft {
  height:10.04987562112089em;
  transform:translateZ(-5em) rotateX(84.28940686250036deg);
}
.pri-4 .bk {
  transform:translateZ(-5em) rotateY(180deg);
}
.pri-4 .rt, .pri-4 .lt {
  width:10em;
  height:1em;
}
.pri-4 .rt .face, .pri-4 .lt .face {
  height:10.04987562112089em;
}
.pri-4 .bm {
  width:1.5em;
  height:10em;
}
.pri-4 .face {
  background-color:#bfc9c5;
}
.pri-4 .ft {
  background-color:#8b2626;
}
/* .pri-5 styles */
.pri-5 {
  transform:translate3D(0em, -0.25em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.pri-5 .rt .face {
  transform:rotateZ(-71.56505117707799deg);
}
.pri-5 .lt .face {
  transform:rotateZ(71.56505117707799deg);
}
.pri-5 .ft {
  height:3.1622776601683795em;
  transform:translateZ(-1.5em) rotateX(71.56505117707799deg);
}
.pri-5 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.pri-5 .rt, .pri-5 .lt {
  width:3em;
  height:1em;
}
.pri-5 .rt .face, .pri-5 .lt .face {
  height:3.1622776601683795em;
}
.pri-5 .bm {
  width:2em;
  height:3em;
}
.pri-5 .face {
  background-color:#b1bbb7;
}
/* .cub-3 styles */
.cub-3 {
  transform:translate3D(0em, 0.75em, 17em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cub-3 .ft {
  transform:translateZ(1.5em);
}
.cub-3 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-3 .rt, .cub-3 .lt {
  width:3em;
  height:1em;
}
.cub-3 .tp, .cub-3 .bm {
  width:2em;
  height:3em;
}
.cub-3 .face {
  background-color:#b1bbb7;
}
/* .cub-4 styles */
.cub-4 {
  transform:translate3D(-7.75em, -1.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-4 .ft {
  transform:translateZ(2em);
}
.cub-4 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-4 .rt, .cub-4 .lt {
  width:4em;
  height:.5em;
}
.cub-4 .tp, .cub-4 .bm {
  width:11em;
  height:4em;
}
.cub-4 .face {
  background-color:#bfc9c5;
}
/* .pri-6 styles */
.pri-6 {
  transform:translate3D(2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-6 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-6 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-6 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-6 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-6 .rt, .pri-6 .lt {
  width:1em;
  height:2.5em;
}
.pri-6 .rt .face, .pri-6 .lt .face {
  height:2.692582403567252em;
}
.pri-6 .bm {
  width:8.5em;
  height:1em;
}
.pri-6 .face {
  background-color:#bfc9c5;
}
.pri-6 .lt > div {
  background-color:#676f72;
}
/* .pri-7 styles */
.pri-7 {
  transform:translate3D(-2.25em, -0.75em, -6.25em) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-7 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-7 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-7 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-7 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-7 .rt, .pri-7 .lt {
  width:1em;
  height:2.5em;
}
.pri-7 .rt .face, .pri-7 .lt .face {
  height:2.692582403567252em;
}
.pri-7 .bm {
  width:8.5em;
  height:1em;
}
.pri-7 .face {
  background-color:#bfc9c5;
}
.pri-7 .rt > div {
  background-color:#676f72;
}
/* .pri-8 styles */
.pri-8 {
  transform:translate3D(-2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(270deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-8 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-8 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-8 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-8 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-8 .rt, .pri-8 .lt {
  width:1em;
  height:2.5em;
}
.pri-8 .rt .face, .pri-8 .lt .face {
  height:2.692582403567252em;
}
.pri-8 .bm {
  width:8.5em;
  height:1em;
}
.pri-8 .face {
  background-color:#bfc9c5;
}
.pri-8 .lt > div {
  background-color:#676f72;
}
/* .pri-9 styles */
.pri-9 {
  transform:translate3D(2.25em, 1.75em, -6.25em) rotateX(180deg) rotateY(90deg) rotateZ(0deg);
  opacity:1;
  width:8.5em;
  height:2.5em;
  margin:-1.25em 0 0 -4.25em;
}
.pri-9 .rt .face {
  transform:rotateZ(-21.801409486351798deg);
}
.pri-9 .lt .face {
  transform:rotateZ(21.801409486351798deg);
}
.pri-9 .ft {
  height:2.692582403567252em;
  transform:translateZ(-0.5em) rotateX(21.801409486351798deg);
}
.pri-9 .bk {
  transform:translateZ(-0.5em) rotateY(180deg);
}
.pri-9 .rt, .pri-9 .lt {
  width:1em;
  height:2.5em;
}
.pri-9 .rt .face, .pri-9 .lt .face {
  height:2.692582403567252em;
}
.pri-9 .bm {
  width:8.5em;
  height:1em;
}
.pri-9 .face {
  background-color:#bfc9c5;
}
.pri-9 .rt > div {
  background-color:#676f72;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(-3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.3em;
  height:5em;
  margin:-2.5em 0 0 -1.15em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:2.3em;
  height:2.3em;
}
.cyl-1 .side {
  width:0.5em;
  height:5em;
}
.cyl-1 .s0 {
  transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s1 {
  transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s2 {
  transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s3 {
  transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s4 {
  transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s5 {
  transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s6 {
  transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s7 {
  transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s8 {
  transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s9 {
  transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s10 {
  transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s11 {
  transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s12 {
  transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s13 {
  transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s14 {
  transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .s15 {
  transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#a6afac;
}
.cyl-1 .tp {
  background-color:#2d3133;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(-3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-2 .side {
  width:0.5123795443493594em;
  height:5em;
}
.cyl-2 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}
.cyl-2 .face, .cyl-2 .side {
  background-color:#7a716b;
}
/* .pri-10 styles */
.pri-10 {
  transform:translate3D(-8.75em, -2.04em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(74deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-10 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-10 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-10 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-10 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-10 .rt, .pri-10 .lt {
  width:2em;
  height:9em;
}
.pri-10 .rt .face, .pri-10 .lt .face {
  height:9.219544457292887em;
}
.pri-10 .bm {
  width:0.5em;
  height:2em;
}
.pri-10 .face {
  background-color:#bfc9c5;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(-12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(1deg) rotateZ(0deg);
  opacity:1;
  width:1.35em;
  height:6em;
  margin:-3em 0 0 -0.675em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:1.35em;
  height:1.35em;
}
.cyl-3 .side {
  width:0.46364158991442356em;
  height:6em;
}
.cyl-3 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}
.cyl-3 .face, .cyl-3 .side {
  background-color:#8b959a;
}
.cyl-3 .tp {
  background-color:#4f4f4f;
}
/* .cub-5 styles */
.cub-5 {
  transform:translate3D(-12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-5 .ft {
  transform:translateZ(4.5em);
}
.cub-5 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-5 .rt, .cub-5 .lt {
  width:9em;
  height:0.4em;
}
.cub-5 .tp, .cub-5 .bm {
  width:0.4em;
  height:9em;
}
.cub-5 .face {
  background-color:#b1bbb7;
}
/* .cub-6 styles */
.cub-6 {
  transform:translate3D(7.75em, -1.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-6 .ft {
  transform:translateZ(2em);
}
.cub-6 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-6 .rt, .cub-6 .lt {
  width:4em;
  height:.5em;
}
.cub-6 .tp, .cub-6 .bm {
  width:11em;
  height:4em;
}
.cub-6 .face {
  background-color:#bfc9c5;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(3.5em, -2em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.3em;
  height:5em;
  margin:-2.5em 0 0 -1.15em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:2.3em;
  height:2.3em;
}
.cyl-4 .side {
  width:0.5em;
  height:5em;
}
.cyl-4 .s0 {
  transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s1 {
  transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s2 {
  transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s3 {
  transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s4 {
  transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s5 {
  transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s6 {
  transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s7 {
  transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s8 {
  transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s9 {
  transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s10 {
  transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s11 {
  transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s12 {
  transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s13 {
  transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s14 {
  transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .s15 {
  transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-4 .face, .cyl-4 .side {
  background-color:#a6afac;
}
.cyl-4 .tp {
  background-color:#2d3133;
}
/* .cyl-5 styles */
.cyl-5 {
  transform:translate3D(3.5em, -2em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-5 .tp, .cyl-5 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-5 .side {
  width:0.5123795443493594em;
  height:5em;
}
.cyl-5 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}
.cyl-5 .face, .cyl-5 .side {
  background-color:#7a716b;
}
/* .cyl-6 styles */
.cyl-6 {
  transform:translate3D(12.25em, -4em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.35em;
  height:6em;
  margin:-3em 0 0 -0.675em;
}
.cyl-6 .tp, .cyl-6 .bm {
  width:1.35em;
  height:1.35em;
}
.cyl-6 .side {
  width:0.46364158991442356em;
  height:6em;
}
.cyl-6 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}
.cyl-6 .face, .cyl-6 .side {
  background-color:#8b959a;
}
.cyl-6 .tp {
  background-color:#353535;
}
/* .cub-7 styles */
.cub-7 {
  transform:translate3D(12.25em, -4em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-7 .ft {
  transform:translateZ(4.5em);
}
.cub-7 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-7 .rt, .cub-7 .lt {
  width:9em;
  height:0.4em;
}
.cub-7 .tp, .cub-7 .bm {
  width:0.4em;
  height:9em;
}
.cub-7 .face {
  background-color:#b1bbb7;
}
/* .pri-11 styles */
.pri-11 {
  transform:translate3D(8.75em, -2.04em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(106deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-11 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-11 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-11 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-11 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-11 .rt, .pri-11 .lt {
  width:2em;
  height:9em;
}
.pri-11 .rt .face, .pri-11 .lt .face {
  height:9.219544457292887em;
}
.pri-11 .bm {
  width:0.5em;
  height:2em;
}
.pri-11 .face {
  background-color:#bfc9c5;
}
/* .cub-8 styles */
.cub-8 {
  transform:translate3D(-7.75em, 2.75em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-8 .ft {
  transform:translateZ(2em);
}
.cub-8 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-8 .rt, .cub-8 .lt {
  width:4em;
  height:.5em;
}
.cub-8 .tp, .cub-8 .bm {
  width:11em;
  height:4em;
}
.cub-8 .face {
  background-color:#bfc9c5;
}
/* .cub-9 styles */
.cub-9 {
  transform:translate3D(7.75em, 2.75em, -5.5em) rotateX(-180deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:11em;
  height:.5em;
  margin:-0.25em 0 0 -5.5em;
}
.cub-9 .ft {
  transform:translateZ(2em);
}
.cub-9 .bk {
  transform:translateZ(-2em) rotateY(180deg);
}
.cub-9 .rt, .cub-9 .lt {
  width:4em;
  height:.5em;
}
.cub-9 .tp, .cub-9 .bm {
  width:11em;
  height:4em;
}
.cub-9 .face {
  background-color:#bfc9c5;
}
/* .cyl-7 styles */
.cyl-7 {
  transform:translate3D(-3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.3em;
  height:5em;
  margin:-2.5em 0 0 -1.15em;
}
.cyl-7 .tp, .cyl-7 .bm {
  width:2.3em;
  height:2.3em;
}
.cyl-7 .side {
  width:0.5em;
  height:5em;
}
.cyl-7 .s0 {
  transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s1 {
  transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s2 {
  transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s3 {
  transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s4 {
  transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s5 {
  transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s6 {
  transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s7 {
  transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s8 {
  transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s9 {
  transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s10 {
  transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s11 {
  transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s12 {
  transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s13 {
  transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s14 {
  transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .s15 {
  transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-7 .face, .cyl-7 .side {
  background-color:#a6afac;
}
.cyl-7 .tp {
  background-color:#2d3133;
}
/* .cyl-8 styles */
.cyl-8 {
  transform:translate3D(-3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-8 .tp, .cyl-8 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-8 .side {
  width:0.5123795443493594em;
  height:5em;
}
.cyl-8 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}
.cyl-8 .face, .cyl-8 .side {
  background-color:#7a716b;
}
/* .cyl-9 styles */
.cyl-9 {
  transform:translate3D(3.5em, 3em, -10em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-9 .tp, .cyl-9 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-9 .side {
  width:0.5123795443493594em;
  height:5em;
}
.cyl-9 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.725em);
}
.cyl-9 .face, .cyl-9 .side {
  background-color:#7a716b;
}
/* .cyl-10 styles */
.cyl-10 {
  transform:translate3D(3.5em, 3em, -5em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:2.3em;
  height:5em;
  margin:-2.5em 0 0 -1.15em;
}
.cyl-10 .tp, .cyl-10 .bm {
  width:2.3em;
  height:2.3em;
}
.cyl-10 .side {
  width:0.5em;
  height:5em;
}
.cyl-10 .s0 {
  transform: rotateY(11.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s1 {
  transform: rotateY(33.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s2 {
  transform: rotateY(56.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s3 {
  transform: rotateY(78.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s4 {
  transform: rotateY(101.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s5 {
  transform: rotateY(123.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s6 {
  transform: rotateY(146.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s7 {
  transform: rotateY(168.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s8 {
  transform: rotateY(191.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s9 {
  transform: rotateY(213.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s10 {
  transform: rotateY(236.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s11 {
  transform: rotateY(258.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s12 {
  transform: rotateY(281.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s13 {
  transform: rotateY(303.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s14 {
  transform: rotateY(326.25deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .s15 {
  transform: rotateY(348.75deg) translate3D(-50%, 0, 1.125em);
}
.cyl-10 .face, .cyl-10 .side {
  background-color:#a6afac;
}
.cyl-10 .tp {
  background-color:#2d3133;
}
/* .pri-12 styles */
.pri-12 {
  transform:translate3D(0em, 2.625em, -0.5em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:3.5em;
  height:.75em;
  margin:-0.375em 0 0 -1.75em;
}
.pri-12 .rt .face {
  transform:rotateZ(-75.96375653207352deg);
}
.pri-12 .lt .face {
  transform:rotateZ(75.96375653207352deg);
}
.pri-12 .ft {
  height:3.092329219213245em;
  transform:translateZ(-1.5em) rotateX(75.96375653207352deg);
}
.pri-12 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.pri-12 .rt, .pri-12 .lt {
  width:3em;
  height:.75em;
}
.pri-12 .rt .face, .pri-12 .lt .face {
  height:3.092329219213245em;
}
.pri-12 .bm {
  width:3.5em;
  height:3em;
}
.pri-12 .face {
  background-color:#bfc9c5;
}
/* .cub-10 styles */
.cub-10 {
  transform:translate3D(0em, 0.5em, -6.25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:3.5em;
  height:5em;
  margin:-2.5em 0 0 -1.75em;
}
.cub-10 .ft {
  transform:translateZ(4.25em);
}
.cub-10 .bk {
  transform:translateZ(-4.25em) rotateY(180deg);
}
.cub-10 .rt, .cub-10 .lt {
  width:8.5em;
  height:5em;
}
.cub-10 .tp, .cub-10 .bm {
  width:3.5em;
  height:8.5em;
}
.cub-10 .face {
  background-color:#bfc9c5;
}
.cub-10 .bk {
  background-color:#676f72;
}
/* .cyl-11 styles */
.cyl-11 {
  transform:translate3D(12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.35em;
  height:6em;
  margin:-3em 0 0 -0.675em;
}
.cyl-11 .tp, .cyl-11 .bm {
  width:1.35em;
  height:1.35em;
}
.cyl-11 .side {
  width:0.46364158991442356em;
  height:6em;
}
.cyl-11 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}
.cyl-11 .face, .cyl-11 .side {
  background-color:#8b959a;
}
.cyl-11 .tp {
  background-color:#4f4f4f;
}
/* .cyl-12 styles */
.cyl-12 {
  transform:translate3D(-12.25em, 5em, -5.5em) rotateX(-90deg) rotateY(-1deg) rotateZ(0deg);
  opacity:1;
  width:1.35em;
  height:6em;
  margin:-3em 0 0 -0.675em;
}
.cyl-12 .tp, .cyl-12 .bm {
  width:1.35em;
  height:1.35em;
}
.cyl-12 .side {
  width:0.46364158991442356em;
  height:6em;
}
.cyl-12 .s0 {
  transform: rotateY(18deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s1 {
  transform: rotateY(54deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s2 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s3 {
  transform: rotateY(126deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s4 {
  transform: rotateY(162deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s5 {
  transform: rotateY(198deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s6 {
  transform: rotateY(234deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s7 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s8 {
  transform: rotateY(306deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .s9 {
  transform: rotateY(342deg) translate3D(-50%, 0, 0.65em);
}
.cyl-12 .face, .cyl-12 .side {
  background-color:#8b959a;
}
.cyl-12 .tp {
  background-color:#4f4f4f;
}
/* .cub-11 styles */
.cub-11 {
  transform:translate3D(-12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-11 .ft {
  transform:translateZ(4.5em);
}
.cub-11 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-11 .rt, .cub-11 .lt {
  width:9em;
  height:0.4em;
}
.cub-11 .tp, .cub-11 .bm {
  width:0.4em;
  height:9em;
}
.cub-11 .face {
  background-color:#b1bbb7;
}
/* .cub-12 styles */
.cub-12 {
  transform:translate3D(12.25em, 5em, 2em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.4em;
  height:0.4em;
  margin:-0.2em 0 0 -0.2em;
}
.cub-12 .ft {
  transform:translateZ(4.5em);
}
.cub-12 .bk {
  transform:translateZ(-4.5em) rotateY(180deg);
}
.cub-12 .rt, .cub-12 .lt {
  width:9em;
  height:0.4em;
}
.cub-12 .tp, .cub-12 .bm {
  width:0.4em;
  height:9em;
}
.cub-12 .face {
  background-color:#b1bbb7;
}
/* .pri-13 styles */
.pri-13 {
  transform:translate3D(8.75em, 3em, -8.5em) rotateX(-180deg) rotateY(0deg) rotateZ(74deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-13 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-13 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-13 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-13 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-13 .rt, .pri-13 .lt {
  width:2em;
  height:9em;
}
.pri-13 .rt .face, .pri-13 .lt .face {
  height:9.219544457292887em;
}
.pri-13 .bm {
  width:0.5em;
  height:2em;
}
.pri-13 .face {
  background-color:#bfc9c5;
}
/* .pri-14 styles */
.pri-14 {
  transform:translate3D(-8.75em, 3em, -8.5em) rotateX(0deg) rotateY(180deg) rotateZ(106deg);
  opacity:1;
  width:0.5em;
  height:9em;
  margin:-4.5em 0 0 -0.25em;
}
.pri-14 .rt .face {
  transform:rotateZ(-12.528807709151492deg);
}
.pri-14 .lt .face {
  transform:rotateZ(12.528807709151492deg);
}
.pri-14 .ft {
  height:9.219544457292887em;
  transform:translateZ(-1em) rotateX(12.528807709151492deg);
}
.pri-14 .bk {
  transform:translateZ(-1em) rotateY(180deg);
}
.pri-14 .rt, .pri-14 .lt {
  width:2em;
  height:9em;
}
.pri-14 .rt .face, .pri-14 .lt .face {
  height:9.219544457292887em;
}
.pri-14 .bm {
  width:0.5em;
  height:2em;
}
.pri-14 .face {
  background-color:#bfc9c5;
}
/* .pri-15 styles */
.pri-15 {
  transform:translate3D(-2.0310344827586206em, 0.5em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(270deg);
  opacity:1;
  width:1.5em;
  height:0.5em;
  margin:-0.25em 0 0 -0.75em;
}
.pri-15 .rt .face {
  transform:rotateZ(-86.18592516570965deg);
}
.pri-15 .lt .face {
  transform:rotateZ(86.18592516570965deg);
}
.pri-15 .ft {
  height:7.516648189186454em;
  transform:translateZ(-3.75em) rotateX(86.18592516570965deg);
}
.pri-15 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.pri-15 .rt, .pri-15 .lt {
  width:7.5em;
  height:0.5em;
}
.pri-15 .rt .face, .pri-15 .lt .face {
  height:7.516648189186454em;
}
.pri-15 .bm {
  width:1.5em;
  height:7.5em;
}
.pri-15 .face {
  background-color:#bfc9c5;
}
.pri-15 .ft {
  background-color:#8b2626;
}
/* .pri-16 styles */
.pri-16 {
  transform:translate3D(2.0310344827586206em, 0.48275862068965514em, 1.75em) rotateX(0deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:1.5em;
  height:0.5em;
  margin:-0.25em 0 0 -0.75em;
}
.pri-16 .rt .face {
  transform:rotateZ(-86.18592516570965deg);
}
.pri-16 .lt .face {
  transform:rotateZ(86.18592516570965deg);
}
.pri-16 .ft {
  height:7.516648189186454em;
  transform:translateZ(-3.75em) rotateX(86.18592516570965deg);
}
.pri-16 .bk {
  transform:translateZ(-3.75em) rotateY(180deg);
}
.pri-16 .rt, .pri-16 .lt {
  width:7.5em;
  height:0.5em;
}
.pri-16 .rt .face, .pri-16 .lt .face {
  height:7.516648189186454em;
}
.pri-16 .bm {
  width:1.5em;
  height:7.5em;
}
.pri-16 .face {
  background-color:#bfc9c5;
}
.pri-16 .ft {
  background-color:#8b2626;
}
/* .pri-17 styles */
.pri-17 {
  transform:translate3D(0em, 1.75em, 12em) rotateX(0deg) rotateY(0deg) rotateZ(-180deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.pri-17 .rt .face {
  transform:rotateZ(-85.60129464500446deg);
}
.pri-17 .lt .face {
  transform:rotateZ(85.60129464500446deg);
}
.pri-17 .ft {
  height:13.038404810405298em;
  transform:translateZ(-6.5em) rotateX(85.60129464500446deg);
}
.pri-17 .bk {
  transform:translateZ(-6.5em) rotateY(180deg);
}
.pri-17 .rt, .pri-17 .lt {
  width:13em;
  height:1em;
}
.pri-17 .rt .face, .pri-17 .lt .face {
  height:13.038404810405298em;
}
.pri-17 .bm {
  width:2em;
  height:13em;
}
.pri-17 .face {
  background-color:#bfc9c5;
}
/* .cub-13 styles */
.cub-13 {
  transform:translate3D(3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.3em;
  height:0.25em;
  margin:-0.125em 0 0 -1.15em;
}
.cub-13 .ft {
  transform:translateZ(0.05em);
}
.cub-13 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-13 .rt, .cub-13 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-13 .tp, .cub-13 .bm {
  width:2.3em;
  height:0.1em;
}
.cub-13 .face {
  background-color:#97979b;
}
/* .cub-14 styles */
.cub-14 {
  transform:translate3D(-3.5em, -2em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.3em;
  height:0.25em;
  margin:-0.125em 0 0 -1.15em;
}
.cub-14 .ft {
  transform:translateZ(0.05em);
}
.cub-14 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-14 .rt, .cub-14 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-14 .tp, .cub-14 .bm {
  width:2.3em;
  height:0.1em;
}
.cub-14 .face {
  background-color:#97979b;
}
/* .cub-15 styles */
.cub-15 {
  transform:translate3D(-3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.3em;
  height:0.25em;
  margin:-0.125em 0 0 -1.15em;
}
.cub-15 .ft {
  transform:translateZ(0.05em);
}
.cub-15 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-15 .rt, .cub-15 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-15 .tp, .cub-15 .bm {
  width:2.3em;
  height:0.1em;
}
.cub-15 .face {
  background-color:#97979b;
}
/* .cub-16 styles */
.cub-16 {
  transform:translate3D(3.5em, 3em, -2.41em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.3em;
  height:0.25em;
  margin:-0.125em 0 0 -1.15em;
}
.cub-16 .ft {
  transform:translateZ(0.05em);
}
.cub-16 .bk {
  transform:translateZ(-0.05em) rotateY(180deg);
}
.cub-16 .rt, .cub-16 .lt {
  width:0.1em;
  height:0.25em;
}
.cub-16 .tp, .cub-16 .bm {
  width:2.3em;
  height:0.1em;
}
.cub-16 .face {
  background-color:#97979b;
}
/* .cub-17 styles */
.cub-17 {
  transform:translate3D(-8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(16deg);
  opacity:1;
  width:2.5em;
  height:.1em;
  margin:-0.05em 0 0 -1.25em;
}
.cub-17 .ft {
  transform:translateZ(1.75em);
}
.cub-17 .bk {
  transform:translateZ(-1.75em) rotateY(180deg);
}
.cub-17 .rt, .cub-17 .lt {
  width:3.5em;
  height:.1em;
}
.cub-17 .tp, .cub-17 .bm {
  width:2.5em;
  height:3.5em;
}
.cub-17 .face {
  background-color:#bfc9c5;
}
.cub-17 .tp {
  background-color:#8b2626;
}
/* .cub-18 styles */
.cub-18 {
  transform:translate3D(8.5em, -2.3em, -5.25em) rotateX(0deg) rotateY(0deg) rotateZ(-16deg);
  opacity:1;
  width:2.5em;
  height:.1em;
  margin:-0.05em 0 0 -1.25em;
}
.cub-18 .ft {
  transform:translateZ(1.75em);
}
.cub-18 .bk {
  transform:translateZ(-1.75em) rotateY(180deg);
}
.cub-18 .rt, .cub-18 .lt {
  width:3.5em;
  height:.1em;
}
.cub-18 .tp, .cub-18 .bm {
  width:2.5em;
  height:3.5em;
}
.cub-18 .face {
  background-color:#bfc9c5;
}
.cub-18 .tp {
  background-color:#8b2626;
}
/* .cyl-13 styles */
.cyl-13 {
  transform:translate3D(-12.25em, -4em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cyl-13 .tp, .cyl-13 .bm {
  width:2em;
  height:2em;
}
.cyl-13 .side {
  width:1.1797005383792514em;
  height:1em;
}
.cyl-13 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}
.cyl-13 .face, .cyl-13 .side {
  background-color:#bfc9c5;
}
/* .cub-19 styles */
.cub-19 {
  transform:translate3D(-12.25em, -4em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.25em;
  height:0.25em;
  margin:-0.125em 0 0 -0.125em;
}
.cub-19 .ft {
  transform:translateZ(1.5em);
}
.cub-19 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-19 .rt, .cub-19 .lt {
  width:3em;
  height:0.25em;
}
.cub-19 .tp, .cub-19 .bm {
  width:0.25em;
  height:3em;
}
.cub-19 .face {
  background-color:#b1bbb7;
}
/* .cub-20 styles */
.cub-20 {
  transform:translate3D(12.25em, -4em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.25em;
  height:0.25em;
  margin:-0.125em 0 0 -0.125em;
}
.cub-20 .ft {
  transform:translateZ(1.5em);
}
.cub-20 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-20 .rt, .cub-20 .lt {
  width:3em;
  height:0.25em;
}
.cub-20 .tp, .cub-20 .bm {
  width:0.25em;
  height:3em;
}
.cub-20 .face {
  background-color:#b1bbb7;
}
/* .cub-21 styles */
.cub-21 {
  transform:translate3D(12.25em, 5em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.25em;
  height:0.25em;
  margin:-0.125em 0 0 -0.125em;
}
.cub-21 .ft {
  transform:translateZ(1.5em);
}
.cub-21 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-21 .rt, .cub-21 .lt {
  width:3em;
  height:0.25em;
}
.cub-21 .tp, .cub-21 .bm {
  width:0.25em;
  height:3em;
}
.cub-21 .face {
  background-color:#b1bbb7;
}
/* .cub-22 styles */
.cub-22 {
  transform:translate3D(-12.25em, 5em, 8em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.25em;
  height:0.25em;
  margin:-0.125em 0 0 -0.125em;
}
.cub-22 .ft {
  transform:translateZ(1.5em);
}
.cub-22 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-22 .rt, .cub-22 .lt {
  width:3em;
  height:0.25em;
}
.cub-22 .tp, .cub-22 .bm {
  width:0.25em;
  height:3em;
}
.cub-22 .face {
  background-color:#b1bbb7;
}
/* .cyl-14 styles */
.cyl-14 {
  transform:translate3D(3.5em, -2em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-14 .tp, .cyl-14 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-14 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-14 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-14 .face, .cyl-14 .side {
  background-color:#7a716b;
}
/* .cyl-15 styles */
.cyl-15 {
  transform:translate3D(-3.5em, -2em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-15 .tp, .cyl-15 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-15 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-15 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-15 .face, .cyl-15 .side {
  background-color:#7a716b;
}
/* .cyl-16 styles */
.cyl-16 {
  transform:translate3D(-3.5em, 3em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-16 .tp, .cyl-16 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-16 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-16 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-16 .face, .cyl-16 .side {
  background-color:#7a716b;
}
/* .cyl-17 styles */
.cyl-17 {
  transform:translate3D(3.5em, 3em, -15em) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:1.5em;
  height:5em;
  margin:-2.5em 0 0 -0.75em;
}
.cyl-17 .tp, .cyl-17 .bm {
  width:1.5em;
  height:1.5em;
}
.cyl-17 .side {
  width:0.8910254037844386em;
  height:5em;
}
.cyl-17 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.725em);
}
.cyl-17 .face, .cyl-17 .side {
  background-color:#7a716b;
}
/* .cyl-18 styles */
.cyl-18 {
  transform:translate3D(12.25em, -4em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cyl-18 .tp, .cyl-18 .bm {
  width:2em;
  height:2em;
}
.cyl-18 .side {
  width:1.1797005383792514em;
  height:1em;
}
.cyl-18 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}
.cyl-18 .face, .cyl-18 .side {
  background-color:#bfc9c5;
}
/* .cyl-19 styles */
.cyl-19 {
  transform:translate3D(12.25em, 5em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cyl-19 .tp, .cyl-19 .bm {
  width:2em;
  height:2em;
}
.cyl-19 .side {
  width:1.1797005383792514em;
  height:1em;
}
.cyl-19 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}
.cyl-19 .face, .cyl-19 .side {
  background-color:#bfc9c5;
}
/* .cyl-20 styles */
.cyl-20 {
  transform:translate3D(-12.25em, 5em, 7.5em) rotateX(30deg) rotateY(0deg) rotateZ(90deg);
  opacity:1;
  width:2em;
  height:1em;
  margin:-0.5em 0 0 -1em;
}
.cyl-20 .tp, .cyl-20 .bm {
  width:2em;
  height:2em;
}
.cyl-20 .side {
  width:1.1797005383792514em;
  height:1em;
}
.cyl-20 .s0 {
  transform: rotateY(30deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .s1 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .s2 {
  transform: rotateY(150deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .s3 {
  transform: rotateY(210deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .s4 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .s5 {
  transform: rotateY(330deg) translate3D(-50%, 0, 0.975em);
}
.cyl-20 .face, .cyl-20 .side {
  background-color:#bfc9c5;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................