/* /!\ 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-color: #f9f9f9;
  font-size: 100%;
}

.ui-page{
    overflow-y: hidden  !important;
    background-color: #f0f0f0;
}

.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: visible;
  /* 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*="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%;
}
[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%;
}
/* .cyl-1 styles */
.cyl-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:9.5em;
  height:5.5em;
  margin:-2.75em 0 0 -4.75em;
}
.cyl-1 .tp, .cyl-1 .bm {
  width:9.5em;
  height:9.5em;
}
.cyl-1 .side {
  width:1.5296521830830945em;
  height:5.5em;
}
.cyl-1 .s0 {
  transform: rotateY(9deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s1 {
  transform: rotateY(27deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s2 {
  transform: rotateY(45deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s3 {
  transform: rotateY(63deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s4 {
  transform: rotateY(81deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s5 {
  transform: rotateY(99deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s6 {
  transform: rotateY(117deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s7 {
  transform: rotateY(135deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s8 {
  transform: rotateY(153deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s9 {
  transform: rotateY(171deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s10 {
  transform: rotateY(189deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s11 {
  transform: rotateY(207deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s12 {
  transform: rotateY(225deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s13 {
  transform: rotateY(243deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s14 {
  transform: rotateY(261deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s15 {
  transform: rotateY(279deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s16 {
  transform: rotateY(297deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s17 {
  transform: rotateY(315deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s18 {
  transform: rotateY(333deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .s19 {
  transform: rotateY(351deg) translate3D(-50%, 0, 4.725em);
}
.cyl-1 .face, .cyl-1 .side {
  background-color:#FFFFFF;
}
.cyl-1 .tp {
    opacity:0.1;
}
.cyl-1 .side {
  background:url(metal_texture_15.jpg) #FFFFFF;
}
/* .cyl-2 styles */
.cyl-2 {
  transform:translate3D(-5.5em, -1em, -1em) rotateX(0deg) rotateY(0deg) rotateZ(90.5deg);
  opacity:1;
  width:0.5em;
  height:2em;
  margin:-1em 0 0 -0.25em;
}
.cyl-2 .tp, .cyl-2 .bm {
  width:0.5em;
  height:0.5em;
}
.cyl-2 .side {
  width:0.13912173719507498em;
  height:2em;
}
.cyl-2 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.225em);
}
.cyl-2 .face, .cyl-2 .side {
  background:url(metal_texture_15.jpg) #FFFFFF;
}
/* .cyl-3 styles */
.cyl-3 {
  transform:translate3D(-5.5em, -1em, 1em) rotateX(0deg) rotateY(0deg) rotateZ(90.5deg);
  opacity:1;
  width:0.5em;
  height:2em;
  margin:-1em 0 0 -0.25em;
}
.cyl-3 .tp, .cyl-3 .bm {
  width:0.5em;
  height:0.5em;
}
.cyl-3 .side {
  width:0.13912173719507498em;
  height:2em;
}
.cyl-3 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.225em);
}
.cyl-3 .face, .cyl-3 .side {
  background:url(metal_texture_15.jpg) #FFFFFF;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(-6.5em, -1em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.2em;
  height:0.5em;
  margin:-0.25em 0 0 -0.1em;
}
.cub-1 .ft {
  transform:translateZ(1.5em);
}
.cub-1 .bk {
  transform:translateZ(-1.5em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:3em;
  height:0.5em;
}
.cub-1 .tp, .cub-1 .bm {
  width:0.2em;
  height:3em;
}
.cub-1 .face {
  background:url(black_texture_plas.jpg) #FFFFFF;
}
/* .cyl-4 styles */
.cyl-4 {
  transform:translate3D(5.5em, -1em, -1em) rotateX(0deg) rotateY(0deg) rotateZ(90.5deg);
  opacity:1;
  width:0.5em;
  height:2em;
  margin:-1em 0 0 -0.25em;
}
.cyl-4 .tp, .cyl-4 .bm {
  width:0.5em;
  height:0.5em;
}
.cyl-4 .side {
  width:0.13912173719507498em;
  height:2em;
}
.cyl-4 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.225em);
}
.cyl-4 .face, .cyl-4 .side {
  background:url(black_texture_plas.jpg) #FFFFFF;
}
/* .cyl-5 styles */
.cyl-5 {
  transform:translate3D(5.5em, -1em, 1em) rotateX(0deg) rotateY(0deg) rotateZ(90.5deg);
  opacity:1;
  width:0.5em;
  height:2em;
  margin:-1em 0 0 -0.25em;
}
.cyl-5 .tp, .cyl-5 .bm {
  width:0.5em;
  height:0.5em;
}
.cyl-5 .side {
  width:0.13912173719507498em;
  height:2em;
}
.cyl-5 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.225em);
}
.cyl-5 .face, .cyl-5 .side {
  background:url(black_texture_plas.jpg) #FFFFFF;
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(6.5em, -1em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:0.2em;
  height:0.5em;
  margin:-0.25em 0 0 -0.1em;
}
.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:0.5em;
}
.cub-2 .tp, .cub-2 .bm {
  width:0.2em;
  height:3em;
}
.cub-2 .face {
  background:url(black_texture_plas.jpg) #FFFFFF;
}

/* .cyl-6 styles */
.cyl-6 {
  transform:translate3D(0em, -0.5em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:9em;
  height:2.5em;
  margin:-1.25em 0 0 -4.5em;
}
.cyl-6 .tp, .cyl-6 .bm {
  width:9em;
  height:9em;
}
.cyl-6 .side {
  width:2.0791912695113495em;
  height:2.5em;
}
.cyl-6 .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 4.475em);
}
.cyl-6 .face, .cyl-6 .side {
  background-color:#FFFFFF;
}
.cyl-6 .side {
  background:url(metal_texture_15.jpg);
}
.cyl-6 .tp {
  background:url(meat.png);
}


.fire{
    text-align:center;
    font-size:2em;
    color:#f0f0f0;  
    white-space:nowrap;
    text-shadow:
        10px -10px 10px blue,     
        5px -10px 15px lightyellow,
        8px -20px 20px yellow,
        12px -30px 25px orange,
        5px -60px 40px orange,
        15px -34px 30px darkorange,
        0px -36px 35px red,
        40px -40px 50px red,
        0px -36px 35px red,
        40px -40px 50px red,
        -20px -60px 40px red,
        20px -80px 40px red,
        40px -80px 40px red,
        20px -120px 60px red,
        20px -130px 80px red,
        20px -120px 60px red,
        20px -130px 80px red,
        20px -150px 80px black,
        50px -160px 80px black,
        120px -150px 100px black,
        120px -150px 100px black,
        100px -100px 100px black,
        120px -220px 100px black,
        200px -300px 150px black
        ;   
    
}
.cloudBase {
    transform:translate3D(-2em, 8.5em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    width:2em;
    height:2em;
    margin:-1.5em 0 0 -1.5em;
    position: absolute;
}

.meatBase {
    transform:translate3D(11em, -9.5em, 9em) rotateX(0deg) rotateY(30deg) rotateZ(0deg);
    width:4em;
    height:4em;
    margin:-1.5em 0 0 -1.5em;
    font-size: 2em;
    position: absolute;
}
.meatBase:before{
    position: absolute;
    content: '';
    width: 1em;
    height: 2em;
    left: -2em;
    bottom: 1em;
    border-top: 2px solid red;
    border-left: 2px solid red;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: skew(-45deg, 0deg);
}

.warnBase {
    transform:translate3D(5em, -3.5em, 6.5em) rotateX(25deg) rotateY(30deg) rotateZ(-45deg);
    width:4em;
    height:4em;
    margin:-1.5em 0 0 -1.5em;
    font-size: 4em;
    position: absolute;
    text-decoration:overline underline;
    animation-name: warn-keyframes;
    animation-duration: 2000ms;
    animation-delay: 0ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes warn-keyframes {
  0% {color:red;}
  50%  {color:yellow;}
  100% {color:red;}
}



.milkBase {
    transform:translate3D(1em, -6.5em, 5.5em) rotateX(0deg) rotateY(30deg) rotateZ(0deg);
    width:4em;
    height:4em;
    margin:-1.5em 0 0 -1.5em;
    font-size: 2em;
    position: absolute;
}
.milkBase:before {
    position: absolute;
    content: '';
    width: 1em;
    height: 2em;
    left: 2em;
    bottom: 1em;
    border-top: 2px solid blue;
    border-right: 2px solid blue;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: skew(199deg, -0deg);
}

.cloudLayer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8em;
    height: 8em;
    margin-left: -4em;
    margin-top: -4em;
    background-color: transparent;
    transition: opacity .5s ease-out;
}

.cloudLayer {
  animation-name: stylie-keyframes;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes stylie-keyframes {
  0% {transform:rotateZ(0deg);}
  50% {transform:rotateZ(180deg);}
  100% {transform:rotateZ(360deg);}
}