/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ 
#tridiv {
  perspective: 800px;
  -webkit-perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 16px;
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
  -webkit-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%;
}
/* .leg_0L styles */
.leg_0L {
  transform:translate3D(0em, -6em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  /* first leg starts at back left, so X and Z translation set to 0. Y translation = 1/2 leg height LH */
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
  /* width of legs hard coded to 0.2. Height set to LH. Margins set to 1/2 height of div, 0, 0, and -1/2 of width of div */
}
.leg_0L .ft {
  transform:translateZ(0.1em);
  /* translateZ value set to half thickness of entity, in this case hard coded to 0.1 since entity is set to 0.2 thick*/
}
.leg_0L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
/* see explanation for front*/
.leg_0L .rt, .leg_0L .lt {
  width:.2em;
  height:12em;
}
.leg_0L .tp, .leg_0L .bm {
  width:.2em;
  height:.2em;
}
.leg_0L .face {
  background-color:#FFFFFF;
}
.leg_0L .ft {
  background-color:#d6d6d6;
}
.leg_0L .bk {
  background-color:#d6d6d6;
}
.leg_0L .tp {
  background-color:#000000;
}
.leg_0L .bm {
  background-color:#000000;
}
.leg_0L .lt {
  background-color:#797979;
}
.leg_0L .rt {
  background-color:#c0c0c0;
}
/* .leg_1L styles */
.leg_1L {
  /* X value is 0, Y value is 1/2 LH, Z value is 5 since legs are spaced 5' apart */
  transform:translate3D(0em, -6em, 5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_1L .ft {
  transform:translateZ(0.1em);
}
.leg_1L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_1L .rt, .leg_1L .lt {
  width:.2em;
  height:12em;
}
.leg_1L .tp, .leg_1L .bm {
  width:.2em;
  height:.2em;
}
.leg_1L .face {
  background-color:#FFFFFF;
}
.leg_1L .ft {
  background-color:#d6d6d6;
}
.leg_1L .bk {
  background-color:#d6d6d6;
}
.leg_1L .tp {
  background-color:#000000;
}
.leg_1L .bm {
  background-color:#000000;
}
.leg_1L .lt {
  background-color:#797979;
}
.leg_1L .rt {
  background-color:#c0c0c0;
}
/* .leg_2L styles */
.leg_2L {
  transform:translate3D(0em, -6em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* X value is 0, Y value is 1/2 LH, Z value is 10 since legs are spaced 5' apart and this is the third row of legs */
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_2L .ft {
  transform:translateZ(0.1em);
}
.leg_2L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_2L .rt, .leg_2L .lt {
  width:.2em;
  height:12em;
}
.leg_2L .tp, .leg_2L .bm {
  width:.2em;
  height:.2em;
}
.leg_2L .face {
  background-color:#FFFFFF;
}
.leg_2L .ft {
  background-color:#d6d6d6;
}
.leg_2L .bk {
  background-color:#d6d6d6;
}
.leg_2L .tp {
  background-color:#000000;
}
.leg_2L .bm {
  background-color:#000000;
}
.leg_2L .lt {
  background-color:#797979;
}
.leg_2L .rt {
  background-color:#c0c0c0;
}
/* .leg_3L styles */
.leg_3L {
  transform:translate3D(0em, -6em, 15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  /* left side so X value is 0, -1/2 of LH for Y value, Z value is 15 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_3L .ft {
  transform:translateZ(0.1em);
}
.leg_3L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_3L .rt, .leg_3L .lt {
  width:.2em;
  height:12em;
}
.leg_3L .tp, .leg_3L .bm {
  width:.2em;
  height:.2em;
}
.leg_3L .face {
  background-color:#FFFFFF;
}
.leg_3L .ft {
  background-color:#d6d6d6;
}
.leg_3L .bk {
  background-color:#d6d6d6;
}
.leg_3L .tp {
  background-color:#000000;
}
.leg_3L .bm {
  background-color:#000000;
}
.leg_3L .lt {
  background-color:#797979;
}
.leg_3L .rt {
  background-color:#c0c0c0;
}
/* .leg_4L styles */
.leg_4L {
  transform:translate3D(0em, -6em, 20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_4L .ft {
  transform:translateZ(0.1em);
}
.leg_4L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_4L .rt, .leg_4L .lt {
  width:.2em;
  height:12em;
}
.leg_4L .tp, .leg_4L .bm {
  width:.2em;
  height:.2em;
}
.leg_4L .face {
  background-color:#FFFFFF;
}
.leg_4L .ft {
  background-color:#d6d6d6;
}
.leg_4L .bk {
  background-color:#d6d6d6;
}
.leg_4L .tp {
  background-color:#000000;
}
.leg_4L .bm {
  background-color:#000000;
}
.leg_4L .lt {
  background-color:#797979;
}
.leg_4L .rt {
  background-color:#c0c0c0;
}
/* .leg_5L styles */
.leg_5L {
  transform:translate3D(0em, -6em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_5L .ft {
  transform:translateZ(0.1em);
}
.leg_5L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_5L .rt, .leg_5L .lt {
  width:.2em;
  height:12em;
}
.leg_5L .tp, .leg_5L .bm {
  width:.2em;
  height:.2em;
}
.leg_5L .face {
  background-color:#FFFFFF;
}
.leg_5L .ft {
  background-color:#d6d6d6;
}
.leg_5L .bk {
  background-color:#d6d6d6;
}
.leg_5L .tp {
  background-color:#000000;
}
.leg_5L .bm {
  background-color:#000000;
}
.leg_5L .lt {
  background-color:#797979;
}
.leg_5L .rt {
  background-color:#c0c0c0;
}
/* .leg_6L styles */
.leg_6L {
  transform:translate3D(0em, -6em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_6L .ft {
  transform:translateZ(0.1em);
}
.leg_6L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_6L .rt, .leg_6L .lt {
  width:.2em;
  height:12em;
}
.leg_6L .tp, .leg_6L .bm {
  width:.2em;
  height:.2em;
}
.leg_6L .face {
  background-color:#FFFFFF;
}
.leg_6L .ft {
  background-color:#d6d6d6;
}
.leg_6L .bk {
  background-color:#d6d6d6;
}
.leg_6L .tp {
  background-color:#000000;
}
.leg_6L .bm {
  background-color:#000000;
}
.leg_6L .lt {
  background-color:#797979;
}
.leg_6L .rt {
  background-color:#c0c0c0;
}
/* .leg_7L styles */
.leg_7L {
  transform:translate3D(0em, -6em, 35em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_7L .ft {
  transform:translateZ(0.1em);
}
.leg_7L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_7L .rt, .leg_7L .lt {
  width:.2em;
  height:12em;
}
.leg_7L .tp, .leg_7L .bm {
  width:.2em;
  height:.2em;
}
.leg_7L .face {
  background-color:#FFFFFF;
}
.leg_7L .ft {
  background-color:#d6d6d6;
}
.leg_7L .bk {
  background-color:#d6d6d6;
}
.leg_7L .tp {
  background-color:#000000;
}
.leg_7L .bm {
  background-color:#000000;
}
.leg_7L .lt {
  background-color:#797979;
}
.leg_7L .rt {
  background-color:#c0c0c0;
}
/* .leg_8L styles */
.leg_8L {
  transform:translate3D(0em, -6em, 40em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_8L .ft {
  transform:translateZ(0.1em);
}
.leg_8L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_8L .rt, .leg_8L .lt {
  width:.2em;
  height:12em;
}
.leg_8L .tp, .leg_8L .bm {
  width:.2em;
  height:.2em;
}
.leg_8L .face {
  background-color:#FFFFFF;
}
.leg_8L .ft {
  background-color:#d6d6d6;
}
.leg_8L .bk {
  background-color:#d6d6d6;
}
.leg_8L .tp {
  background-color:#000000;
}
.leg_8L .bm {
  background-color:#000000;
}
.leg_8L .lt {
  background-color:#797979;
}
.leg_8L .rt {
  background-color:#c0c0c0;
}
/* .leg_9L styles */
.leg_9L {
  transform:translate3D(0em, -6em, 45em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_9L .ft {
  transform:translateZ(0.1em);
}
.leg_9L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_9L .rt, .leg_9L .lt {
  width:.2em;
  height:12em;
}
.leg_9L .tp, .leg_9L .bm {
  width:.2em;
  height:.2em;
}
.leg_9L .face {
  background-color:#FFFFFF;
}
.leg_9L .ft {
  background-color:#d6d6d6;
}
.leg_9L .bk {
  background-color:#d6d6d6;
}
.leg_9L .tp {
  background-color:#000000;
}
.leg_9L .bm {
  background-color:#000000;
}
.leg_9L .lt {
  background-color:#797979;
}
.leg_9L .rt {
  background-color:#c0c0c0;
}
/* .leg_10L styles */
.leg_10L {
  transform:translate3D(0em, -6em, 50em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* left side so X value is 0, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fifth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_10L .ft {
  transform:translateZ(0.1em);
}
.leg_10L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_10L .rt, .leg_10L .lt {
  width:.2em;
  height:12em;
}
.leg_10L .tp, .leg_10L .bm {
  width:.2em;
  height:.2em;
}
.leg_10L .face {
  background-color:#FFFFFF;
}
.leg_10L .ft {
  background-color:#d6d6d6;
}
.leg_10L .bk {
  background-color:#d6d6d6;
}
.leg_10L .tp {
  background-color:#000000;
}
.leg_10L .bm {
  background-color:#000000;
}
.leg_10L .lt {
  background-color:#797979;
}
.leg_10L .rt {
  background-color:#c0c0c0;
}
/* .leg_0R styles */
.leg_0R {
  transform:translate3D(30em, -6em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  /* 12 em value is the width W of the structure, so X value set to 12. Y value still 1/2 LH*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_0R .ft {
  transform:translateZ(0.1em);
}
.leg_0R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_0R .rt, .leg_0R .lt {
  width:.2em;
  height:12em;
}
.leg_0R .tp, .leg_0R .bm {
  width:.2em;
  height:.2em;
}
.leg_0R .face {
  background-color:#FFFFFF;
}
.leg_0R .ft {
  background-color:#d6d6d6;
}
.leg_0R .bk {
  background-color:#d6d6d6;
}
.leg_0R .tp {
  background-color:#000000;
}
.leg_0R .bm {
  background-color:#000000;
}
.leg_0R .lt {
  background-color:#c0c0c0;
}
.leg_0R .rt {
  background-color:#797979;
}
/* .leg_1R styles */
.leg_1R {
  transform:translate3D(30em, -6em, 5em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
   /* X value is 12 = W, Y value is 1/2 LH, Z value is 5 since legs are spaced 5' apart */
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_1R .ft {
  transform:translateZ(0.1em);
}
.leg_1R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_1R .rt, .leg_1R .lt {
  width:.2em;
  height:12em;
}
.leg_1R .tp, .leg_1R .bm {
  width:.2em;
  height:.2em;
}
.leg_1R .face {
  background-color:#FFFFFF;
}
.leg_1R .ft {
  background-color:#d6d6d6;
}
.leg_1R .bk {
  background-color:#d6d6d6;
}
.leg_1R .tp {
  background-color:#000000;
}
.leg_1R .bm {
  background-color:#000000;
}
.leg_1R .lt {
  background-color:#c0c0c0;
}
.leg_1R .rt {
  background-color:#797979;
}
/* .leg_2R styles */
.leg_2R {
  transform:translate3D(30em, -6em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_2R .ft {
  transform:translateZ(0.1em);
}
.leg_2R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_2R .rt, .leg_2R .lt {
  width:.2em;
  height:12em;
}
.leg_2R .tp, .leg_2R .bm {
  width:.2em;
  height:.2em;
}
.leg_2R .face {
  background-color:#FFFFFF;
}
.leg_2R .ft {
  background-color:#d6d6d6;
}
.leg_2R .bk {
  background-color:#d6d6d6;
}
.leg_2R .tp {
  background-color:#000000;
}
.leg_2R .bm {
  background-color:#000000;
}
.leg_2R .lt {
  background-color:#c0c0c0;
}
.leg_2R .rt {
  background-color:#797979;
}
/* .leg_3R styles */
.leg_3R {
  transform:translate3D(30em, -6em, 15em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 15 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_3R .ft {
  transform:translateZ(0.1em);
}
.leg_3R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_3R .rt, .leg_3R .lt {
  width:.2em;
  height:12em;
}
.leg_3R .tp, .leg_3R .bm {
  width:.2em;
  height:.2em;
}
.leg_3R .face {
  background-color:#FFFFFF;
}
.leg_3R .ft {
  background-color:#d6d6d6;
}
.leg_3R .bk {
  background-color:#d6d6d6;
}
.leg_3R .tp {
  background-color:#000000;
}
.leg_3R .bm {
  background-color:#000000;
}
.leg_3R .lt {
  background-color:#c0c0c0;
}
.leg_3R .rt {
  background-color:#797979;
}
/* .leg_4R styles */
.leg_4R {
  transform:translate3D(30em, -6em, 20em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_4R .ft {
  transform:translateZ(0.1em);
}
.leg_4R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_4R .rt, .leg_4R .lt {
  width:.2em;
  height:12em;
}
.leg_4R .tp, .leg_4R .bm {
  width:.2em;
  height:.2em;
}
.leg_4R .face {
  background-color:#FFFFFF;
}
.leg_4R .ft {
  background-color:#d6d6d6;
}
.leg_4R .bk {
  background-color:#d6d6d6;
}
.leg_4R .tp {
  background-color:#000000;
}
.leg_4R .bm {
  background-color:#000000;
}
.leg_4R .lt {
  background-color:#c0c0c0;
}
.leg_4R .rt {
  background-color:#797979;
}
/* .leg_5R styles */
.leg_5R {
  transform:translate3D(30em, -6em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_5R .ft {
  transform:translateZ(0.1em);
}
.leg_5R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_5R .rt, .leg_5R .lt {
  width:.2em;
  height:12em;
}
.leg_5R .tp, .leg_5R .bm {
  width:.2em;
  height:.2em;
}
.leg_5R .face {
  background-color:#FFFFFF;
}
.leg_5R .ft {
  background-color:#d6d6d6;
}
.leg_5R .bk {
  background-color:#d6d6d6;
}
.leg_5R .tp {
  background-color:#000000;
}
.leg_5R .bm {
  background-color:#000000;
}
.leg_5R .lt {
  background-color:#c0c0c0;
}
.leg_5R .rt {
  background-color:#797979;
}
/* .leg_6R styles */
.leg_6R {
  transform:translate3D(30em, -6em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_6R .ft {
  transform:translateZ(0.1em);
}
.leg_6R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_6R .rt, .leg_6R .lt {
  width:.2em;
  height:12em;
}
.leg_6R .tp, .leg_6R .bm {
  width:.2em;
  height:.2em;
}
.leg_6R .face {
  background-color:#FFFFFF;
}
.leg_6R .ft {
  background-color:#d6d6d6;
}
.leg_6R .bk {
  background-color:#d6d6d6;
}
.leg_6R .tp {
  background-color:#000000;
}
.leg_6R .bm {
  background-color:#000000;
}
.leg_6R .lt {
  background-color:#c0c0c0;
}
.leg_6R .rt {
  background-color:#797979;
}
/* .leg_7R styles */
.leg_7R {
  transform:translate3D(30em, -6em, 35em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_7R .ft {
  transform:translateZ(0.1em);
}
.leg_7R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_7R .rt, .leg_7R .lt {
  width:.2em;
  height:12em;
}
.leg_7R .tp, .leg_7R .bm {
  width:.2em;
  height:.2em;
}
.leg_7R .face {
  background-color:#FFFFFF;
}
.leg_7R .ft {
  background-color:#d6d6d6;
}
.leg_7R .bk {
  background-color:#d6d6d6;
}
.leg_7R .tp {
  background-color:#000000;
}
.leg_7R .bm {
  background-color:#000000;
}
.leg_7R .lt {
  background-color:#c0c0c0;
}
.leg_7R .rt {
  background-color:#797979;
}
/* .leg_8R styles */
.leg_8R {
  transform:translate3D(30em, -6em, 40em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_8R .ft {
  transform:translateZ(0.1em);
}
.leg_8R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_8R .rt, .leg_8R .lt {
  width:.2em;
  height:12em;
}
.leg_8R .tp, .leg_8R .bm {
  width:.2em;
  height:.2em;
}
.leg_8R .face {
  background-color:#FFFFFF;
}
.leg_8R .ft {
  background-color:#d6d6d6;
}
.leg_8R .bk {
  background-color:#d6d6d6;
}
.leg_8R .tp {
  background-color:#000000;
}
.leg_8R .bm {
  background-color:#000000;
}
.leg_8R .lt {
  background-color:#c0c0c0;
}
.leg_8R .rt {
  background-color:#797979;
}
/* .leg_9R styles */
.leg_9R {
  transform:translate3D(30em, -6em, 45em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_9R .ft {
  transform:translateZ(0.1em);
}
.leg_9R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_9R .rt, .leg_9R .lt {
  width:.2em;
  height:12em;
}
.leg_9R .tp, .leg_9R .bm {
  width:.2em;
  height:.2em;
}
.leg_9R .face {
  background-color:#FFFFFF;
}
.leg_9R .ft {
  background-color:#d6d6d6;
}
.leg_9R .bk {
  background-color:#d6d6d6;
}
.leg_9R .tp {
  background-color:#000000;
}
.leg_9R .bm {
  background-color:#000000;
}
.leg_9R .lt {
  background-color:#c0c0c0;
}
.leg_9R .rt {
  background-color:#797979;
}
/* .leg_10R styles */
.leg_10R {
  transform:translate3D(30em, -6em, 50em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right side so X value = W, -1/2 of LH for Y value, Z value is 20 because legs are spaced 5' apart and this is the fourth row*/
  opacity:1;
  width:.2em;
  height:12em;
  margin:-6em 0 0 -0.1em;
}
.leg_10R .ft {
  transform:translateZ(0.1em);
}
.leg_10R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.leg_10R .rt, .leg_10R .lt {
  width:.2em;
  height:12em;
}
.leg_10R .tp, .leg_10R .bm {
  width:.2em;
  height:.2em;
}
.leg_10R .face {
  background-color:#FFFFFF;
}
.leg_10R .ft {
  background-color:#d6d6d6;
}
.leg_10R .bk {
  background-color:#d6d6d6;
}
.leg_10R .tp {
  background-color:#000000;
}
.leg_10R .bm {
  background-color:#000000;
}
.leg_10R .lt {
  background-color:#c0c0c0;
}
.leg_10R .rt {
  background-color:#797979;
}
/* 2017-02-20 Hat Channel / Purlings */
[class*="hatChannel_L"] {
  transform:translate3D(0em, 0em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
[class*="hatChannel_R"] {
  transform:translate3D(0em, 0em, 0em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}
[class*="hatChannel_"] {
  height:5em;
  opacity:1;
  width:.2em;
  margin:-2.5em 0 0 -0.1em;
  /* display: none; /* Until Turned on via Closed Vertical sides */
}
[class*="hatChannel_"] .ft {
  transform:translateZ(0.1em);
  /* translateZ value set to half thickness of entity, in this case hard coded to 0.1 since entity is set to 0.2 thick*/
}
[class*="hatChannel_"] .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
/* see explanation for front*/
[class*="hatChannel_"] .rt, [class*="hatChannel_"] .lt {
  width:.2em;
  height:5em;
}
[class*="hatChannel_"] .tp, [class*="hatChannel_"] .bm {
  width:.2em;
  height:.2em;
}
[class*="hatChannel_"] .face {
  background-color:#FFFFFF;
}
[class*="hatChannel_"] .ft, [class*="hatChannel_"] .bk {
  background-color:#d6d6d6;
}

[class*="hatChannel_"] .tp, [class*="hatChannel_"] .bm {
  background-color:#000000;
}
[class*="hatChannel_L"] .lt, [class*="hatChannel_R"] .rt {
  background-color:#797979;
}
[class*="hatChannel_L"] .rt, [class*="hatChannel_R"] .lt {
  background-color:#c0c0c0;
}
/* END 2017-02-20 Hat Channel / Purlings */

/* .skid_L styles */
.skid_L {
  transform:translate3D(0em, 0em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  /* left skid, so X value is 0. On the ground, so Y value is 0. Z value = roof length L / 2.   */
  opacity:1;
  width:.2em;
  height:.2em;
  margin:-0.1em 0 0 -0.1em;
}
.skid_L .ft {
  transform:translateZ(25em);
}
.skid_L .bk {
  transform:translateZ(-25em) rotateY(180deg);
}
.skid_L .rt, .skid_L .lt {
  width:50em;
  height:.2em;
}
.skid_L .tp, .skid_L .bm {
  width:.2em;
  height:50em;
}
.skid_L .face {
  background-color:#FFFFFF;
}
.skid_L .ft {
  background-color:#d6d6d6;
}
.skid_L .bk {
  background-color:#d6d6d6;
}
.skid_L .tp {
  background-color:#d6d6d6;
}
.skid_L .bm {
  background-color:#000000;
}
.skid_L .lt {
  background-color:#797979;
}
.skid_L .rt {
  background-color:#c0c0c0;
}
/* .skid_R styles */
.skid_R {
  transform:translate3D(30em, 0em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    /* right skid, so X value = W. On the ground, so Y value is 0. Z value = roof length L / 2.   */
  opacity:1;
  width:.2em;
  height:.2em;
  margin:-0.1em 0 0 -0.1em;
}
.skid_R .ft {
  transform:translateZ(25em);
}
.skid_R .bk {
  transform:translateZ(-25em) rotateY(180deg);
}
.skid_R .rt, .skid_R .lt {
  width:50em;
  height:.2em;
}
.skid_R .tp, .skid_R .bm {
  width:.2em;
  height:50em;
}
.skid_R .face {
  background-color:#FFFFFF;
}
.skid_R .ft {
  background-color:#d6d6d6;
}
.skid_R .bk {
  background-color:#d6d6d6;
}
.skid_R .tp {
  background-color:#d6d6d6;
}
.skid_R .bm {
  background-color:#000000;
}
.skid_R .lt {
  background-color:#c0c0c0;
}
.skid_R .rt {
  background-color:#797979;
}
/* .roof_L styles */
.roof_L {
  transform:translate3D(7.5em, -14.75em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-14.036deg);/*7.75em, -15.08333333em*/
  /*FOR STANDARD ROOFS
  X value is [(W/2 - 0.5)/2] + 0.5
  Y value is [((W/2 - 0.5)/3) + 0.6667 + LH] - [((W/2 - 0.5)/3)/2] -- the overall height of the entire structure minus half the height of just the roof portion
  Z value is 1/2 ( roof length L - 1 )
  rotateZ is hardcoded to -14.036 degrees to represent 3/12 pitch
  */
  opacity:1;
  width:15.28434202em;
  /* The width of the roof is sqrt[(W/2 - 0.5)^2 + ((W/2 - 0.5)/3))^2], because roof is 3/12 pitch after the 6" over 8" up curve  */
  height:.2em;
  /* height set to 0.2 thickness so that roof thickness can be front trim as well*/
  margin:-0.1em 0 0 -7.642171012em;
  /* margin set to 1/2 height, 0, 0, -1/2 width */
}
.roof_L .ft {
  transform:translateZ(25.5em);
}
/* 1/2 roof length*/
.roof_L .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
  /* -1/2 roof length */
}
.roof_L .rt, .roof_L .lt {
  width:51em;
  height:.2em;
  /* roof length*/
}
.roof_L .tp, .roof_L .bm {
  width:15.28434202em;
  height:51em;
}
.roof_L .face {
  background-color:#FFFFFF;
}
.roof_L .ft {
  background-color:#009051;
}
.roof_L .bk {
  background-color:#009051;
}
.roof_L .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roof_L .bm {
  background-color:#565656;
}
/* .roof_R styles */
.roof_R {
  transform:translate3D(22.25em, -14.75em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(14.036deg);
  opacity:1;
  width:15.28434202em;
  height:.2em;
  margin:-0.1em 0 0 -7.642171012em;
}
.roof_R .ft {
  transform:translateZ(25.5em);
}
.roof_R .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roof_R .rt, .roof_R .lt {
  width:51em;
  height:.2em;
}
.roof_R .tp, .roof_R .bm {
  width:15.28434202em;
  height:51em;
}
.roof_R .face {
  background-color:#ffffff;
}
.roof_R .ft {
  background-color:#009051;
}
.roof_R .bk {
  background-color:#009051;
}
.roof_R .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roof_R .bm {
  background-color:#565656;
}
/* .braceH and .braceV */
.braceH {
  opacity:1;
  width:.1em;
  height:16em;
  margin:-8em 0 0 -0.05em;
}
.braceH .ft {
  transform:translateZ(0.1em);
}
.braceH .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.braceH .rt, .braceH .lt {
  width:.2em;
  height:16em;
}
.braceH .tp, .braceH .bm {
  width:.1em;
  height:.2em;
}
.braceH .face {
  background-color:#797979;
}
.braceV {
  opacity:1;
  width:.1em;
  height:2em;
  margin:-1em 0 0 -0.05em;
}
.braceV .ft {
  transform:translateZ(0.1em);
}
.braceV .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.braceV .rt, .braceV .lt {
  width:.2em;
  height:2em;
}
.braceV .tp, .braceV .bm {
  width:.1em;
  height:.2em;
}
.braceV .face {
  background-color:#797979;
}

/* .brace_0L styles */
.brace_0L {
  transform:translate3D(0.25em, -12.333em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  /* hard code X value for left braces at 0.25. Y value = LH + 0.333. Z value is 0.*/
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
  /* these values same for all braces*/
}
.brace_0L .ft {
  transform:translateZ(0.1em);
}
.brace_0L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_0L .rt, .brace_0L .lt {
  width:.2em;
  height:0.833em;
}
.brace_0L .tp, .brace_0L .bm {
  width:.1em;
  height:.2em;
}
.brace_0L .face {
  background-color:#797979;
}
/* .brace_1L styles */
.brace_1L {
  transform:translate3D(0.25em, -12.333em, 5em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
    /* hard code X value for left braces at 0.25. Y value = LH + 0.333. Z value is 5 since legs spaced 5' apart.*/
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_1L .ft {
  transform:translateZ(0.1em);
}
.brace_1L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_1L .rt, .brace_1L .lt {
  width:.2em;
  height:0.833em;
}
.brace_1L .tp, .brace_1L .bm {
  width:.1em;
  height:.2em;
}
.brace_1L .face {
  background-color:#797979;
}
/* .brace_2L styles */
.brace_2L {
  transform:translate3D(0.25em, -12.333em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_2L .ft {
  transform:translateZ(0.1em);
}
.brace_2L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_2L .rt, .brace_2L .lt {
  width:.2em;
  height:0.833em;
}
.brace_2L .tp, .brace_2L .bm {
  width:.1em;
  height:.2em;
}
.brace_2L .face {
  background-color:#797979;
}
/* .brace_3L styles */
.brace_3L {
  transform:translate3D(0.25em, -12.333em, 15em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_3L .ft {
  transform:translateZ(0.1em);
}
.brace_3L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_3L .rt, .brace_3L .lt {
  width:.2em;
  height:0.833em;
}
.brace_3L .tp, .brace_3L .bm {
  width:.1em;
  height:.2em;
}
.brace_3L .face {
  background-color:#797979;
}
/* .brace_4L styles */
.brace_4L {
  transform:translate3D(0.25em, -12.333em, 20em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_4L .ft {
  transform:translateZ(0.1em);
}
.brace_4L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_4L .rt, .brace_4L .lt {
  width:.2em;
  height:0.833em;
}
.brace_4L .tp, .brace_4L .bm {
  width:.1em;
  height:.2em;
}
.brace_4L .face {
  background-color:#797979;
}
.brace_4L .bm {
  background-color:#797979;
}
/* .brace_5L styles */
.brace_5L {
  transform:translate3D(0.25em, -12.333em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_5L .ft {
  transform:translateZ(0.1em);
}
.brace_5L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_5L .rt, .brace_5L .lt {
  width:.2em;
  height:0.833em;
}
.brace_5L .tp, .brace_5L .bm {
  width:.1em;
  height:.2em;
}
.brace_5L .face {
  background-color:#797979;
}
.brace_5L .bm {
  background-color:#797979;
}
/* .brace_6L styles */
.brace_6L {
  transform:translate3D(0.25em, -12.333em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_6L .ft {
  transform:translateZ(0.1em);
}
.brace_6L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_6L .rt, .brace_6L .lt {
  width:.2em;
  height:0.833em;
}
.brace_6L .tp, .brace_6L .bm {
  width:.1em;
  height:.2em;
}
.brace_6L .face {
  background-color:#797979;
}
.brace_6L .bm {
  background-color:#797979;
}
/* .brace_7L styles */
.brace_7L {
  transform:translate3D(0.25em, -12.333em, 35em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_7L .ft {
  transform:translateZ(0.1em);
}
.brace_7L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_7L .rt, .brace_7L .lt {
  width:.2em;
  height:0.833em;
}
.brace_7L .tp, .brace_7L .bm {
  width:.1em;
  height:.2em;
}
.brace_7L .face {
  background-color:#797979;
}
.brace_7L .bm {
  background-color:#797979;
}
/* .brace_8L styles */
.brace_8L {
  transform:translate3D(0.25em, -12.333em, 40em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_8L .ft {
  transform:translateZ(0.1em);
}
.brace_8L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_8L .rt, .brace_8L .lt {
  width:.2em;
  height:0.833em;
}
.brace_8L .tp, .brace_8L .bm {
  width:.1em;
  height:.2em;
}
.brace_8L .face {
  background-color:#797979;
}
.brace_8L .bm {
  background-color:#797979;
}
/* .brace_9L styles */
.brace_9L {
  transform:translate3D(0.25em, -12.333em, 45em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_9L .ft {
  transform:translateZ(0.1em);
}
.brace_9L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_9L .rt, .brace_9L .lt {
  width:.2em;
  height:0.833em;
}
.brace_9L .tp, .brace_9L .bm {
  width:.1em;
  height:.2em;
}
.brace_9L .face {
  background-color:#797979;
}
.brace_9L .bm {
  background-color:#797979;
}
/* .brace_10L styles */
.brace_10L {
  transform:translate3D(0.25em, -12.333em, 50em) rotateX(0deg) rotateY(0deg) rotateZ(36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_10L .ft {
  transform:translateZ(0.1em);
}
.brace_10L .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_10L .rt, .brace_10L .lt {
  width:.2em;
  height:0.833em;
}
.brace_10L .tp, .brace_10L .bm {
  width:.1em;
  height:.2em;
}
.brace_10L .face {
  background-color:#797979;
}
.brace_10L .bm {
  background-color:#797979;
}
/* .brace_0R styles */
.brace_0R {
  transform:translate3D(29.75em, -12.333em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_0R .ft {
  transform:translateZ(0.1em);
}
.brace_0R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_0R .rt, .brace_0R .lt {
  width:.2em;
  height:0.833em;
}
.brace_0R .tp, .brace_0R .bm {
  width:.1em;
  height:.2em;
}
.brace_0R .face {
  background-color:#797979;
}
/* .brace_1R styles */
.brace_1R {
  transform:translate3D(29.75em, -12.333em, 5em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_1R .ft {
  transform:translateZ(0.1em);
}
.brace_1R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_1R .rt, .brace_1R .lt {
  width:.2em;
  height:0.833em;
}
.brace_1R .tp, .brace_1R .bm {
  width:.1em;
  height:.2em;
}
.brace_1R .face {
  background-color:#797979;
}
/* .brace_2R styles */
.brace_2R {
  transform:translate3D(29.75em, -12.333em, 10em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_2R .ft {
  transform:translateZ(0.1em);
}
.brace_2R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_2R .rt, .brace_2R .lt {
  width:.2em;
  height:0.833em;
}
.brace_2R .tp, .brace_2R .bm {
  width:.1em;
  height:.2em;
}
.brace_2R .face {
  background-color:#797979;
}
/* .brace_3R styles */
.brace_3R {
  transform:translate3D(29.75em, -12.333em, 15em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_3R .ft {
  transform:translateZ(0.1em);
}
.brace_3R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_3R .rt, .brace_3R .lt {
  width:.2em;
  height:0.833em;
}
.brace_3R .tp, .brace_3R .bm {
  width:.1em;
  height:.2em;
}
.brace_3R .face {
  background-color:#797979;
}
/* .brace_4R styles */
.brace_4R {
  transform:translate3D(29.75em, -12.333em, 20em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_4R .ft {
  transform:translateZ(0.1em);
}
.brace_4R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_4R .rt, .brace_4R .lt {
  width:.2em;
  height:0.833em;
}
.brace_4R .tp, .brace_4R .bm {
  width:.1em;
  height:.2em;
}
.brace_4R .face {
  background-color:#797979;
}
/* .brace_5R styles */
.brace_5R {
  transform:translate3D(29.75em, -12.333em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_5R .ft {
  transform:translateZ(0.1em);
}
.brace_5R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_5R .rt, .brace_5R .lt {
  width:.2em;
  height:0.833em;
}
.brace_5R .tp, .brace_5R .bm {
  width:.1em;
  height:.2em;
}
.brace_5R .face {
  background-color:#797979;
}
/* .brace_6R styles */
.brace_6R {
  transform:translate3D(29.75em, -12.333em, 30em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_6R .ft {
  transform:translateZ(0.1em);
}
.brace_6R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_6R .rt, .brace_6R .lt {
  width:.2em;
  height:0.833em;
}
.brace_6R .tp, .brace_6R .bm {
  width:.1em;
  height:.2em;
}
.brace_6R .face {
  background-color:#797979;
}
/* .brace_7R styles */
.brace_7R {
  transform:translate3D(29.75em, -12.333em, 35em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_7R .ft {
  transform:translateZ(0.1em);
}
.brace_7R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_7R .rt, .brace_7R .lt {
  width:.2em;
  height:0.833em;
}
.brace_7R .tp, .brace_7R .bm {
  width:.1em;
  height:.2em;
}
.brace_7R .face {
  background-color:#797979;
}
/* .brace_8R styles */
.brace_8R {
  transform:translate3D(29.75em, -12.333em, 40em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_8R .ft {
  transform:translateZ(0.1em);
}
.brace_8R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_8R .rt, .brace_8R .lt {
  width:.2em;
  height:0.833em;
}
.brace_8R .tp, .brace_8R .bm {
  width:.1em;
  height:.2em;
}
.brace_8R .face {
  background-color:#797979;
}
/* .brace_9R styles */
.brace_9R {
  transform:translate3D(29.75em, -12.333em, 45em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_9R .ft {
  transform:translateZ(0.1em);
}
.brace_9R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_9R .rt, .brace_9R .lt {
  width:.2em;
  height:0.833em;
}
.brace_9R .tp, .brace_9R .bm {
  width:.1em;
  height:.2em;
}
.brace_9R .face {
  background-color:#797979;
}
/* .brace_10R styles */
.brace_10R {
  transform:translate3D(29.75em, -12.333em, 50em) rotateX(0deg) rotateY(0deg) rotateZ(-36.87deg);
  opacity:1;
  width:.1em;
  height:0.833em;
  margin:-0.4165em 0 0 -0.05em;
}
.brace_10R .ft {
  transform:translateZ(0.1em);
}
.brace_10R .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.brace_10R .rt, .brace_10R .lt {
  width:.2em;
  height:0.833em;
}
.brace_10R .tp, .brace_10R .bm {
  width:.1em;
  height:.2em;
}
.brace_10R .face {
  background-color:#797979;
}
/* .back styles */
.shape.back {
  transform:translate3D(15em, -8.25em/* adjust down 0.05 to 0.1 to hide the edge poking out of the roof */, -.1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  /* 
  X = 1/2 width W
  Y = 1/2 building height (see below for building height calc)
  Z = hardcoded to -0.1 em
  */
  opacity:1;
  width:30.4em;
  height:17.5em;
  margin:-8.75em 0 0 -15.2em;
  /* The front and back are transparent rectangles. The face is an irregular shape that is defined by a PNG file with transparency that must be generated dynamically. I can supply images to use to generate the face, including siding and doors/windows. 
The width is determined by building width W. 
The height is (W/2 - 0.5)/3 + 0.6667 + LH ( * shows 8.5 for 6 ft tall, LH [ Leg Height ] = 6 & W = 12 = +2.5 )
Margin is -1/2 height, 0, 0, -1/2 width
 */
}
.back .ft {
  transform:translateZ(0em);
}
.back .bk {
  transform:translateZ(0em) rotateY(180deg);
}
.back .rt, .back .lt {
  width:0em;
  height:17.5em;
}
.back .tp, .back .bm {
  width:30.4em;
  height:0em;
}
.back .face {
  background-color:#FFFFFF;
}
.back .ft, .back .bk {
  background:;
}
/* .front styles */
.shape.front {
  transform:translate3D(15em, -8.25em, 50.1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:30.4em;
  height:17.5em;
  margin:-8.75em 0 0 -15.2em;
}
.front .ft {
  transform:translateZ(0em);
}
.front .bk {
  transform:translateZ(0em) rotateY(180deg);
}
.front .rt, .front .lt {
  width:0em;
  height:17.5em;
}
.front .tp, .front .bm {
  width:30.4em;
  height:0em;
}
.front .face {
  background-color:#FFFFFF;
}
.front .ft, .front .bk {
  background:;
}

/* .roofCurve_R_1 styles */
.roofCurve_R_1 {
  transform:translate3D(29.719999999999999em, -12.530882352941176em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(39deg);
  /* I placed these visually. The factors should remain the same regardless, so 
  X = building width W - 0.28
  Y = building leg height LH + 0.53
  Z = building roof length (RL - 1)/2
  rotateZ = hardcode to 39 degrees
  */
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
}
.roofCurve_R_1 .ft {
  transform:translateZ(25.5em);
}
.roofCurve_R_1 .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roofCurve_R_1 .rt, .roofCurve_R_1 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_R_1 .tp, .roofCurve_R_1 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_R_1 .face {
  background-color:#FFFFFF;
}
.roofCurve_R_1 .ft {
  background-color:#009051;
}
.roofCurve_R_1 .bk {
  background-color:#009051;
}
.roofCurve_R_1 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_R_1 .bm {
  background-color:#565656;
}
/* .roofCurve_R-2 styles */
.roofCurve_R-2 {
  transform:translate3D(29.969999999999999em, -12.155882352941174em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(64deg);
    /* I placed these visually. The factors should remain the same regardless, so 
  X = building width W - 0.03
  Y = building leg height LH + 0.15
  Z = building roof length (RL - 1)/2
  rotateZ = hardcode to 64 degrees
  */
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
}
.roofCurve_R-2 .ft {
  transform:translateZ(10.5em);
}
.roofCurve_R-2 .bk {
  transform:translateZ(-10.5em) rotateY(180deg);
}
.roofCurve_R-2 .rt, .roofCurve_R-2 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_R-2 .tp, .roofCurve_R-2 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_R-2 .face {
  background-color:#FFFFFF;
}
.roofCurve_R-2 .ft {
  background-color:#009051;
}
.roofCurve_R-2 .bk {
  background-color:#009051;
}
.roofCurve_R-2 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_R-2 .bm {
  background-color:#565656;
}
.roofCurve_R-2 .lt {
  background-color:#565656;
}
/* .right styles */
.shape.right {
  transform:translate3D(30.2em, -6em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0em;
  height:12em;
  margin:-6em 0 0 0em;
}
.right .ft {
  transform:translateZ(10.105em);
}
.right .bk {
  transform:translateZ(-10.105em) rotateY(180deg);
}
.right .rt, .right .lt {
  width:50.21em;
  height:12em;
}
.right .tp, .right .bm {
  width:0em;
  height:50.21em;
}
.right .face {
  background: #FFFFFF;
}
/* .left styles */
.shape.left {
  transform:translate3D(-.2em, -6em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0em;
  height:12em;
  margin:-6em 0 0 0em;
}
.left .ft {
  transform:translateZ(10.105em);
}
.left .bk {
  transform:translateZ(-10.105em) rotateY(180deg);
}
.left .rt, .left .lt {
  width:50.21em;
  height:12em;
}
.left .tp, .left .bm {
  width:0em;
  height:50.21em;
}
.left .face {
  background: #FFFFFF;
}
/* .roofCurve_L_1 styles */
.roofCurve_L_1 {
  transform:translate3D(0.4em, -12.83em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-39deg);
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
  /*
  These were placed visually. Please see roofCurve_R comments above for derivation.
  X = 0.27
  Y = -LH -0.53
  Z = (RL-1)2
  rotateZ = hard coded to -39 degrees
  */
}
.roofCurve_L_1 .ft {
  transform:translateZ(25.5em);
}
.roofCurve_L_1 .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roofCurve_L_1 .rt, .roofCurve_L_1 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_L_1 .tp, .roofCurve_L_1 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_L_1 .face {
  background-color:#FFFFFF;
}
.roofCurve_L_1 .ft {
  background-color:#009051;
}
.roofCurve_L_1 .bk {
  background-color:#009051;
}
.roofCurve_L_1 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_L_1 .bm {
  background-color:#565656;
}
/* .roofCurve_L-2 styles */
.roofCurve_L-2 {
  transform:translate3D(0.27em, -12.53em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-64deg);
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
}
.roofCurve_L-2 .ft {
  transform:translateZ(25.5em);
}
.roofCurve_L-2 .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roofCurve_L-2 .rt, .roofCurve_L-2 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_L-2 .tp, .roofCurve_L-2 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_L-2 .face {
  background-color:#FFFFFF;
}
.roofCurve_L-2 .ft {
  background-color:#009051;
}
.roofCurve_L-2 .bk {
  background-color:#009051;
}
.roofCurve_L-2 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_L-2 .bm {
  background-color:#565656;
}
.roofCurve_L-2 .rt {
  background-color:#565656;
}

/* Vertical Roof Curve Piece */
.roofCurve_L_0 {
  transform:translate3D(-0.2, -12.3em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
  /*
  These were placed visually. Please see roofCurve_R comments above for derivation.
  X = 0.27
  Y = -LH -0.53
  Z = (RL-1)2
  rotateZ = hard coded to -39 degrees
  */
}
.roofCurve_L_0 .ft {
  transform:translateZ(25.5em);
}
.roofCurve_L_0 .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roofCurve_L_0 .rt, .roofCurve_L_0 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_L_0 .tp, .roofCurve_L_0 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_L_0 .face {
  background-color:#FFFFFF;
}
.roofCurve_L_0 .ft {
  background-color:#009051;
}
.roofCurve_L_0 .bk {
  background-color:#009051;
}
.roofCurve_L_0 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_L_0 .bm {
  background-color:#565656;
}
.roofCurve_R_0 {
  transform:translate3D(-22.2, -12.3em, 25em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:.5em;
  height:.2em;
  margin:-0.1em 0 0 -0.25em;
  /*
  These were placed visually. Please see roofCurve_R comments above for derivation.
  X = 0.27
  Y = -LH -0.53
  Z = (RL-1)2
  rotateZ = hard coded to -39 degrees
  */
}
.roofCurve_R_0 .ft {
  transform:translateZ(25.5em);
}
.roofCurve_R_0 .bk {
  transform:translateZ(-25.5em) rotateY(180deg);
}
.roofCurve_R_0 .rt, .roofCurve_R_0 .lt {
  width:51em;
  height:.2em;
}
.roofCurve_R_0 .tp, .roofCurve_R_0 .bm {
  width:.5em;
  height:51em;
}
.roofCurve_R_0 .face {
  background-color:#FFFFFF;
}
.roofCurve_R_0 .ft {
  background-color:#009051;
}
.roofCurve_R_0 .bk {
  background-color:#009051;
}
.roofCurve_R_0 .tp {
  /*background:url(http://www.tomasrdesign.com/thforrester/textures/sidingTexture.jpg);*/
}
.roofCurve_R_0 .bm {
  background-color:#565656;
}


/*
	Flip Inside Images of Sides
*/
.left .lt {
  transform: rotateY(90deg) scaleX(-1) translateX(-50%);
}
.right .rt {
  transform: rotateY(-90deg) scaleX(-1) translateX(-50%);
}
.front .bk {
  transform:translateZ(0em) translateX(-100%) scaleX(-1) rotateY(180deg);
}
.back .ft {
  transform:translateZ(0em) translateX(100%) scaleX(-1);
}