:root {
  --face-width: 15vh;
  --face-width-neg: -15vh;
  --face-height: 35vh;
  --face-bordercolor: white;
  --opacity: 0.85;
  --front-color: red;
  --back-color: green;
  --right-color: blue;
  --left-color: orange;
  --top-color: pink;
  --bottom-color: pink;
  --perspective: 1500px;
  --perspective-origin: 50% 50%;
  --body-background: black;
  --face-color: white;
  --face-fontsize: calc( var(--face-width) / 5  ) ;
}
html {box-sizing: border-box;}
* {box-sizing: inherit;}
body {margin:0;min-width:1000px; }
.controls {
  position:relative;
  width: 30%;
  height: 100vh;
  padding-left: 10px;
  background: #555;
  float: left;
  color: white;
  font-family: sans-serif;
  border: 3px solid white;
}
.controls>h1 {
  background: black;
  margin: 0;
  width: calc(100% + 10px);
  margin-left: -10px;
  padding-bottom: 10px;
  border-bottom: 1px solid white;
  text-align: center;
  }
.controls h2 {
    margin: 15px 0 0px 0;
    font-size: 1.5em;
    color: black;
}
h1>small, h2>small {font-size: 0.8em}
.container3D {
  width: 70%;
  height: 100vh;
  color: white;
  font-family: sans-serif;
  background: var(--body-background);
  float: right;
  perspective: var(--perspective);
  perspective-origin: var(--perspective-origin);
  border: 3px solid white;
}
.container3D h2 {text-align: center;display:inline-block;position:fixed;left:50%;transform:translateX(-50%);}
.prism { 
  margin: auto;
  position: relative;
  top: calc(50vh - var(--face-height) / 2 );
  width: var(--face-width);
  height: var(--face-height);
  transform-style: preserve-3d;
}
.prism > div {
  position: absolute;
  float: left;
  opacity: var(--opacity);
  text-align: center; 
}
.face {
  text-transform: uppercase;
  font-weight: bold; 
  font-size: var(--face-fontsize);
  font-family: sans-serif;
  width: var(--face-width);
  height:  var(--face-height);
  border: calc( var(--face-width) / 20  ) solid var(--face-bordercolor); 
  color: var(--face-color);
  line-height: var(--face-height);
  }
.top.face, .bottom.face {
  width:  var(--face-width);
  height:  var(--face-width);
  line-height: var(--face-width);
  }
.back {
  transform: translateZ( var(--face-width-neg ) );
}
.right {
  transform: rotateY(-90deg);
  transform-origin: right;
}
.left {
  transform: rotateY(90deg);
  transform-origin: left;
}
.top { 
  transform: rotateX(-90deg);
  transform-origin: top;
}
.bottom {
  transform:  translateY( var(--face-height) ) rotateX(-90deg);
  transform-origin: top;
}
.front {
	background: var( --front-color );
  }
.back{
	background:  var( --back-color );
  }
.right {
	background:  var( --right-color );
  }
.left {
	background:  var( --left-color );
  }
.top {
	background:  var( --top-color );
  }
.bottom {
	background:  var( --bottom-color );  
  }
div>p {margin:0;}
.left>p {transform: rotateY(180deg);}
.right>p {transform: rotateY(180deg);}
.back>p {transform: rotateY(180deg);}
.top>p {transform: rotateX(180deg);}
@keyframes rotate {
  from {
    transform: rotateX(0deg)  rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.prism {
  animation: rotate 20s infinite linear;
} 
.container3D:hover .prism {
    animation: none;
} 
.radio {width:15px;height:15px; border: 1px solid white;}
.containerRadio{position: fixed;}
.lt {left:0;top:0;}
.rt {left:calc(100%  -  94px);top:0; text-align:right;}
.lb {left:0;top:calc(100%  -  24px);}
.rb {left:calc(100%  -  100px);top:calc(100%  -  40px); text-align:right;}

.ct {left:50%;top:0;margin-left:-6px;}
.cr {left:calc(100%  -  100px);top:50%;margin-top:-30px; text-align:right;}
.cb {left:50%;top:calc(100%  -  24px);margin-left:-6px;}
.cl {left:0;top:50%;margin-top:-12px;}
.cc {left:50%;top:50%;margin:-12px 0 0 -6px;}
.cincomil {position:fixed;left:80%; top:20%; text-align:right;}
#containerDimensionsOpacity label,  #containerDimensionsOpacity span {vertical-align:top;}
.footer {
  background: black;
  width: 100%;
  margin:-40px 0 0 -10px;
  text-align:center;
  height: 40px;
  line-height: 40px;
  position:absolute;
  bottom:0;
}
.footer a, .footer a:visited {
	color: #ededed;
}
#disqus_thread {
  margin-top:0;
  padding: 0 1%;
  background: #000;
  color: white;
  }
#disqus_thread a, #disqus_thread a:visited  {
	color: #ddd;
}
@media (max-width:1000px), (max-height:660px) {
  .container3D, .controls {
    float: none;
    width: 100%;
  }
}