body {
  background-color: black;
  color: #cccccc;
}
a {
  color: #333333;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
header {
  margin: 30px;
  position: relative;
  z-index: 100;
  max-width: 270px;
}
@media (max-width: 570px) {
  header {
    margin: 15px;
    max-width: 160px;
  }
  #cubes {
    transform: translate3d(0, 0, -500px) rotatey(45deg);
  }
}
.animation-defaults {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
#viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  perspective: 500px;
  overflow: hidden;
}
#tower {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: transform 2.5s linear;
  transform-style: preserve-3d;
}
#cubes {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  perspective-origin: 50% 100%;
  transform: translate3d(0, -100px, -300px) rotatey(45deg);
}
.face {
  position: absolute;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
}
.face .background rect {
  fill-opacity: 0.1;
  fill: #000000;
}
.face .corners polygon,
.face .cross polygon {
  fill: #F40;
}
.face.floor {
  transform: translatey(200px) translatez(100px);
  transform-origin: 0 0;
  animation-name: floor-animation;
}
.face.left {
  transform: translatex(-100px) rotatey(-90deg) rotatex(90deg);
  transform-origin: 100px 200px;
  animation-name: left-animation;
}
.face.back {
  transform: translatex(-200px) translatez(-100px) rotatey(90deg);
  transform-origin: 200px 0;
  animation-name: back-animation;
}
.face.right {
  transform: translatez(-100px);
  transform-origin: 200px 0;
  animation-name: right-animation;
}
.face.front {
  transform: translatez(100px) rotatey(-90deg);
  transform-origin: 200px 0;
  animation-name: front-animation;
}
@keyframes floor-animation {
  from {
    transform: translatey(200px) translatez(100px);
  background:  
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,110,.5), rgba(255,0,110,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(110,0,255,.5), rgba(110,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,110,.5), rgba(0,255,110,0) 70.71%);
  background:  
    radial-gradient(circle at 50% 0, 
         rgba(255,0,110,.9), rgba(255,0,110,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(110,0,255,.9), rgba(110,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,110,.9), rgba(0,255,110,0) 70.71%);	


	 }
  to {
    transform: translatey(200px) translatez(100px) rotatex(-90deg);

  background:  
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,110,.5), rgba(255,0,110,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(110,0,255,.5), rgba(110,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,110,.5), rgba(0,255,110,0) 70.71%);
  background:  
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);	
}
}
@keyframes left-animation {
  from {
    transform: translatex(-100px) rotatey(-90deg) rotatex(90deg);
/*	background:#FC6; */
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);	
  }
  to {
    transform: translatex(-100px) rotatey(-90deg) rotatex(0deg);
/* 	background:#FC6; */
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);	 
  }
}
@keyframes back-animation {
  from {
    transform: translatex(-200px) translatez(-100px) rotatey(90deg);
/* 	background:#F60;*/
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
		 	opacity:.6; 
  }
  to {
    transform: translatex(-200px) translatez(-100px) rotatey(180deg);
/* 	background:#F60;*/
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
		 	opacity:.6;   }
}
@keyframes right-animation {
  from {
    transform: translatez(-100px);
/* 	background:#FFC;*/
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
		 	opacity:.6;  
  }
  to {
    transform: translatez(-100px) rotatey(90deg);
/* 	background:#FFC;*/
  background: /* older syntax */
     -webkit-radial-gradient(50% 0, circle, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
     -webkit-radial-gradient(6.7% 75%, circle, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
     -webkit-radial-gradient(93.3% 75%, circle, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
  background: /* newest syntax */
    radial-gradient(circle at 50% 0, 
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%), 
    radial-gradient(circle at 6.7% 75%, 
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%), 
    radial-gradient(circle at 93.3% 75%, 
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
		 	opacity:.6;  
}
}
@keyframes front-animation {
  from {
    transform: translatez(100px) rotatey(-90deg);
background:url(www.biowellinc.com/d/diamondsml2.png) no-repeat 0px -150px;
opacity:1.0;			
} 
  
  to {
    transform: translatez(100px) rotatey(0deg);
background:url(http://www.biowellinc.com/d/diamondsml2.png) no-repeat 0px -150px;
opacity:1.0;			
}
}
#codepen-footer,#codepen-footer *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#codepen-footer{position:fixed;bottom:0;left:0;width:100%;padding:0 10px;height:30px;color:#eeeeee;background-color:#505050;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505050), color-stop(100%, #383838));background:-webkit-linear-gradient(#505050,#383838);background:-moz-linear-gradient(#505050,#383838);background:-o-linear-gradient(#505050,#383838);background:linear-gradient(#505050,#383838);border-top:1px solid #000;border-bottom:1px solid #000;box-shadow:inset 0 1px 0 #6e6e6e,0 2px 2px rgba(0,0,0,0.4);font:12px/30px "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;line-height:30px}#codepen-footer a{color:#a7a7a7;text-decoration:none}#codepen-footer a:hover{color:white}#footer-right{position:absolute;right:5px;top:0}@media (max-width: 600px){#footer-right{display:none}}#bs-button{padding:1px 6px 2px 19px;background:url(/images/browserstack.png),-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff4d1), color-stop(100%, #c9b67b));background:url(/images/browserstack.png),-webkit-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),-moz-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),-o-linear-gradient(#fff4d1,#c9b67b);background:url(/images/browserstack.png),linear-gradient(#fff4d1,#c9b67b);background-position:4px center,center center;background-repeat:no-repeat;background-size:12px 12px,cover;border:0;font:11px "Lucida Grande","Lucida Sans Unicode",Tahoma,sans-serif;border-radius:5px}#bs-button:hover{background-color:#fff4d1;background-position:4px center,center center;background-repeat:no-repeat;background-size:12px 12px,cover}