@font-face {
    font-family: 'SourcePro Lite';
    src: url('fonts/SourceSansPro-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}
	
@font-face {
    font-family: 'SourcePro XtrLite';
    src: url('fonts/SourceSansPro-ExtraLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}

html, body { margin: 0;	padding: 0; overflow: hidden; }
label { cursor: pointer; }
input { display: none; }


/* ------------------ RotationFrame ------------------ */

.rotaBox { 
	position: absolute;
	width: 300px; height: 300px;
	top: 50%; left: 35%;
	margin-left: -150px;
	margin-top:  -150px; 
	}

.rota {		
	position: absolute;
	width: 100%;  height: 100%;	
	top: 0; left: 0;  
	transform-style: preserve-3d;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused;
	animation-duration: 18.0s;
	}
	
.rota.Rwd { animation-direction: reverse; }

.cZ { animation-name: RotaAniZ;  }
.cY { animation-name: RotaAniY;  }
.cX { animation-name: RotaAniX;  }

.rota.Rwd:after { 
	content: "";
	display: none;
	position: absolute;
	width: 200%; height: 200%;
	top: -50%; left: -50%;
	
	border: 2px solid rgba(100,180,20,0.7);
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	transform: rotateX(0deg);
	}
	
.rota.cX.Rwd:after { transform: rotateY(90deg); }	
.rota.cY.Rwd:after { transform: rotateX(90deg); }	

/* "fixes" Axis Alignment X <> Y  to corresponding Plane like Z */
@keyframes RotaAniX { 
	  0%   {  transform: rotateY(  0deg); }
	100%   {  transform: rotateY(360deg); }
	}
	
@keyframes RotaAniY { 
	  0%   {  transform: rotateX(   0deg); }
	100%   {  transform: rotateX( 360deg); }
	}
	
@keyframes RotaAniZ { 
	  0%   {  transform: rotateZ(   0deg); }
	100%   {  transform: rotateZ( -360deg); }
	}
	
	

/* ------------------ Objects ------------------ */

	
.frame3d {	
	display: none; 
	position: absolute;    
	width: 100%;  height: 100%; 
	top: 0; left: 0;
	transform-style: preserve-3d;
	margin-top:  0px; 
	}	

.side { position: absolute; width: 100%;  height: 100%; opacity: 1.0; overflow: hidden; }	

.side:before,
.side:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; }

.cube > .side:before { display: none; }

.cube > .front  		   { transform:                  translateZ(150px); background-color: rgba(155,  0,  0, 1.0); }
.cube > .back   		   { transform: rotateY( 180deg) translateZ(150px); background-color: rgba(  0,155,170, 1.0); }
.cube > .top    		   { transform: rotateX(  90deg) translateZ(150px); background-color: rgba(  0,135,  0, 1.0); }
.cube > .bottom 		   { transform: rotateX( 270deg) translateZ(150px); background-color: rgba(155,  0,115, 1.0); }
.cube > .right  		   { transform: rotateY(  90deg) translateZ(150px); background-color: rgba(  0,  0,170, 1.0); }
.cube > .left   		   { transform: rotateY( 270deg) translateZ(150px); background-color: rgba(225,135,  0, 1.0); }

.pyramid > .east   		   { transform: rotateY( 90deg) rotateX( 30.00deg) rotateZ(  0deg) translateZ(   0px) translateY( 151px); }
.pyramid > .west   		   { transform: rotateY(270deg) rotateX( 30.00deg) rotateZ(  0deg) translateZ(   0px) translateY( 151px); }
.pyramid > .north  		   { transform: rotateY(  0deg) rotateX( 30.00deg) rotateZ(  0deg) translateZ(   0px) translateY( 151px); }
.pyramid > .south  		   { transform: rotateY(180deg) rotateX( 30.00deg) rotateZ(  0deg) translateZ(   0px) translateY( 151px); }
.pyramid > .east.downside  { transform: rotateY( 90deg) rotateX( 30.00deg) rotateZ(180deg) translateZ(   0px) translateY( 151px); }
.pyramid > .west.downside  { transform: rotateY(270deg) rotateX( 30.00deg) rotateZ(180deg) translateZ(   0px) translateY( 151px); }
.pyramid > .north.downside { transform: rotateY(  0deg) rotateX( 30.00deg) rotateZ(180deg) translateZ(   0px) translateY( 151px); }
.pyramid > .south.downside { transform: rotateY(180deg) rotateX( 30.00deg) rotateZ(180deg) translateZ(   0px) translateY( 151px); }

.octah > .east			   { transform: rotateY( 90deg) rotateX( 35.30deg) rotateZ(   0deg) translateZ( 24px) translateY(  76px); }
.octah > .west			   { transform: rotateY(270deg) rotateX( 35.30deg) rotateZ(   0deg) translateZ( 24px) translateY(  76px); }
.octah > .north			   { transform: rotateY(  0deg) rotateX( 35.30deg) rotateZ(   0deg) translateZ( 24px) translateY(  76px); }
.octah > .south			   { transform: rotateY(180deg) rotateX( 35.30deg) rotateZ(   0deg) translateZ( 24px) translateY(  76px); }
.octah > .east.downside    { transform: rotateY( 90deg) rotateX( 35.30deg) rotateZ( 180deg) translateZ(-24px) translateY(  76px); }
.octah > .west.downside    { transform: rotateY(270deg) rotateX( 35.30deg) rotateZ( 180deg) translateZ(-24px) translateY(  76px); }
.octah > .north.downside   { transform: rotateY(  0deg) rotateX( 35.30deg) rotateZ( 180deg) translateZ(-24px) translateY(  76px); }
.octah > .south.downside   { transform: rotateY(180deg) rotateX( 35.30deg) rotateZ( 180deg) translateZ(-24px) translateY(  76px); }                                                                                                                              

.tetrah > .fur.upside      { transform: rotateY(120deg) rotateX( 90.00deg) rotateZ(  0deg) translateZ(-245px) translateY( -63px); }
.tetrah > .one.upside      { transform: rotateY(120deg) rotateX( 19.50deg) rotateZ(  0deg) translateZ(   0px) translateY( 110px); }
.tetrah > .two.upside      { transform: rotateY(240deg) rotateX( 19.50deg) rotateZ(  0deg) translateZ(   0px) translateY( 110px); }
.tetrah > .tri.upside      { transform: rotateY(  0deg) rotateX( 19.50deg) rotateZ(  0deg) translateZ(   0px) translateY( 110px); }
.tetrah > .one.downside    { transform: rotateY( 60deg) rotateX( 19.50deg) rotateZ(180deg) translateZ(   0px) translateY( 110px); }
.tetrah > .two.downside    { transform: rotateY(180deg) rotateX( 19.50deg) rotateZ(180deg) translateZ(   0px) translateY( 110px); }
.tetrah > .tri.downside    { transform: rotateY(300deg) rotateX( 19.50deg) rotateZ(180deg) translateZ(   0px) translateY( 110px); }

.east:before  				   { background-color: rgba(  0,  0,170, 1.0); }
.west:before  				   { background-color: rgba(225,135,  0, 1.0); }
.north:before 				   { background-color: rgba(155,  0,  0, 1.0); }
.south:before 				   { background-color: rgba(  0,155,170, 1.0); }

.tetrah > .one:before 		   { background-color: rgba(  0,  0,170, 1.0); }
.tetrah > .two:before 		   { background-color: rgba(225,135,  0, 1.0); }
.tetrah > .tri:before 		   { background-color: rgba(155,  0,  0, 1.0); }

.tetrah > .fur:before 		   { background-color: rgba(180,180,  0, 1.0); }
.tetrah > .one.upside:before   { background-color: rgba(180,  0,  0, 1.0); }
.tetrah > .two.upside:before   { background-color: rgba(  0,180,  0, 1.0); }
.tetrah > .tri.upside:before   { background-color: rgba(  0,  0,180, 1.0); }
.tetrah > .one.downside:before { background-color: rgba(180,180,  0, 1.0); }
.tetrah > .two.downside:before { background-color: rgba(  0,180,180, 1.0); }
.tetrah > .tri.downside:before { background-color: rgba(180,  0,180, 1.0); }

.pyramid.sngl { margin-top: -174px;}
.octah.sngl   { margin-top: -90px;}
.tetrah.sngl  { margin-top: -169px;}

.pyramid.dobl > .downside { margin-top:  260px; }
.pyramid.dobl > .upside   { margin-top: -261px; }

.tetrah.dobl  > .downside { margin-top:  245px; }
.tetrah.dobl  > .upside   { margin-top: -245px; }

.octah.dobl   > .downside { margin-top:  171px; }
.octah.dobl   > .upside   { margin-top: -170px; }

.octah.sngl   > .upside   { margin-top: 0px; }
.octah.sngl   > .bottom   { margin-top: -90px; }

.octah   > .bottom,
.pyramid > .bottom { transform: rotateX( 270deg) translateZ(260px); }

.pyramid > .side:before,
.pyramid > .side:after { top: 50%; transform: scale(0.71, 1.42) rotateZ(45deg);	}

.tetrah > .side:before,
.tetrah > .side:after,
.octah  > .side:before,
.octah  > .side:after  { top: 50%; transform: scale(0.71, 1.23) rotateZ(45deg); }

.side.bottom:after,
.side.bottom:before { top: 0; left: 0; transform: none; width: 100%; height: 100%; }	
.octah > .bottom:before {  background-color: rgba(155,  0,115, 1.0); }	





/* ------------------ ShadowTest ------------------ */


.side:after {
	display: none;
	background-color: rgba(0,  0,  0, 1.0);	
	animation-name: ShadowAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused;
	animation-duration: 18.0s;	
	}
	
@keyframes ShadowAni { 
	  0%   {  opacity: 0.0; }
	 50%   {  opacity: 0.5; }
	100%   {  opacity: 0.0; }
	}
	
.cube > .front:after  { animation-delay: -6s; }   
.cube > .back:after   { animation-delay:  0s; }                    
.cube > .top:after    { animation-delay: -4s; }   
.cube > .bottom:after { animation-delay: -8s; }                    
.cube > .right:after  { animation-delay: -3s; }  
.cube > .left:after   { animation-delay: -9s; }	

.north:after  { animation-delay: -6s; } 
.south:after  { animation-delay:  0s; }
.bottom:after { animation-delay: -8s; }                    
.east:after   { animation-delay: -3s; }  
.west:after   { animation-delay: -9s; }

.one:after { animation-delay: -6s; }   
.two:after { animation-delay:  0s; }
.tri:after { animation-delay: -9s; }                    
.fur:after { animation-delay: -3s; } 



/* ------------------------------ Controls ----------------------------- */


	
/* ------------------ Techi ------------------ */
.Btn { z-index: 999; transform-style: preserve-3d; position: absolute; width: 8vmin; height: 8vmin; bottom: 10vmin; right: 16vmin; }
.Btn { perspective: 300px; }

.Btn.RotY:after,
.Btn.RotX:after,
.Btn.RotZ:after { 
	content: "";
	position: absolute;
	top: 0;	left: 0%;
	width: 100%;  height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border: 0px solid green;
	}

.Btn.RotY.Fwd:after { background-image: url(pics/YAxisUp.svg); }
.Btn.RotY.Rwd:after { background-image: url(pics/YAxisDown.svg); }
.Btn.RotX.Fwd:after { background-image: url(pics/XAxisRight.svg); }
.Btn.RotX.Rwd:after { background-image: url(pics/XAxisLeft.svg); }
.Btn.RotZ.Fwd:after { background-image: url(pics/ZAxisLeft.svg); }
.Btn.RotZ.Rwd:after { background-image: url(pics/ZAxisRight.svg); }

.Btn.RotZ 	  { width: 5vmin; height: 5vmin; }
.Btn.RotX     { margin-bottom:  0vmin; }
.Btn.RotZ     { margin-bottom:  7vmin; }
.Btn.RotY.Fwd { margin-bottom:  2vmin; width: 6vmin; height: 6vmin; margin-right: 1vmin; }
.Btn.RotY.Rwd { margin-bottom: -6vmin; width: 10vmin; height: 10vmin; margin-right:  -1vmin; }
.Btn.RotX.Rwd { margin-right:   7vmin; }
.Btn.RotX.Fwd { margin-right:  -7vmin; }
.Btn.RotZ.Fwd { margin-right:   5vmin; }
.Btn.RotZ.Rwd { margin-right:  -2.25vmin; }

.MenuItem.Btn.RotZ     { margin-bottom: 10vmin; }
.MenuItem.Btn.RotZ.Rwd { margin-right:   -4.5vmin; }
.MenuItem.Btn.RotZ.Fwd { margin-right:  11.35vmin; }

.MenuItem.Btn.RotX     { margin-bottom: 0.75vmin; }
.MenuItem.Btn.RotX.Rwd { margin-right:   -6.75vmin; }
.MenuItem.Btn.RotX.Fwd { margin-right:  13.1vmin; }	

.MenuItem.Btn.RotY.Fwd { margin-right:  3.12vmin;  margin-bottom:  7.75vmin; }
.MenuItem.Btn.RotY.Rwd { margin-right:  3.12vmin; margin-bottom: -6.5vmin; }

.MenuItem.Btn.Stop:after,
.MenuItem.Btn.Stop:before {
		display: block; 
		margin: 0; 
		width: 4px; height: 15px; 
		top: 0; left: 0; 
		border-radius: 0%; 
		border: 0px solid rgba(0,60,135,0.5);
		background-color: rgba(0,0,120,0.0);
		}
.Btn { display: none; }

.MenuItem.Btn.Stop { display: none; }
.MenuItem.Btn.Stop.aX { margin-right:  -0.5vmin;  margin-bottom:  6vmin; }
.MenuItem.Btn.Stop.aX:after,
.MenuItem.Btn.Stop.aX:before { width: 8vmin; height: 8vmin; }
.MenuItem.Btn.Stop.aX:after  { left: -14vmin; }
.MenuItem.Btn.Stop.aY { margin-right:  5.2vmin;  margin-bottom:  8.2vmin; }
.MenuItem.Btn.Stop.aY:before { width: 6vmin; height: 6vmin; }
.MenuItem.Btn.Stop.aY:after  { width: 10vmin; height: 10vmin;  margin-top: 6vmin; margin-left: -2.2vmin; }
.MenuItem.Btn.Stop.aZ { margin-right:  1vmin;  margin-bottom:  12vmin; }
.MenuItem.Btn.Stop.aZ:after,
.MenuItem.Btn.Stop.aZ:before { width: 6vmin; height: 6vmin; }
.MenuItem.Btn.Stop.aZ:after  { left: -8.5vmin; }



/* ------------------ GamePad ------------------ */

.HoverPad {	z-index: 999; position: absolute; width: 12vmin; right: 15vmin; bottom: 15vmin; }	
.HoverPad:after, .HoverPad:before {
	content: ""; display: block; position: absolute;
	width: 100%; padding-bottom: 100%;	
	transform: scale(0.415, 1.0) rotateZ(45deg) rotateX(180deg) rotateY(180deg);	
	margin-left: 0px;	margin-top: 2.471vmin;	
	background-size: contain;
	}
	
.HoverPad:after { display: none;  }



.nw:before, .ne:before, .sw:before, .se:before    { background-image: url(pics/PadDia.svg); }
.et:before,  .wt:before,  .nt:before,  .st:before { background-image: url(pics/PadLin.svg); }

.nw:after,  .ne:after,  .sw:after,  .se:after  { background-image: url(pics/PadDiaOn.svg); }
.et:after,  .wt:after,  .nt:after,  .st:after  { background-image: url(pics/PadLinOn.svg); }


.st	{ transform: rotate(  0deg); }
.sw	{ transform: rotate( 45deg); }
.wt	{ transform: rotate( 90deg); }
.nw { transform: rotate(135deg); }
.nt	{ transform: rotate(180deg); }
.ne { transform: rotate(225deg); }
.et	{ transform: rotate(270deg); }
.se	{ transform: rotate(315deg); }	



.HoverPad.DeadZone        { right: 21vmin; width: 0vmin; height: 0vmin; background-color: rgba(0,0,0,0.0); }	
.HoverPad.DeadZone:after,
.HoverPad.DeadZone:before {
	content: "";
	display: block;
	position: absolute;
	border: none;
	transform: none;
	background-image: none;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.0);
	}
	
.HoverPad.DeadZone:after  { width:  3vmin; height:  3vmin; margin-left: -1.5vmin; margin-top: -1.5vmin; }	
.HoverPad.DeadZone:before { width: 25vmin; height: 25vmin; margin-left: -12.5vmin; margin-top: -12.5vmin;  }

.HoverPad.DeadZone:active::before { display: none; }
.HoverPad:hover::after { display: block; }

.HoverPad { display: none; }


/* ------------------ Control Trigger ------------------ */




#techSel:checked ~ .Btn.Stop { display: none; }
#techSel:checked ~ .Btn,
#hoveSel:checked ~ .HoverPad { display: block; }

.HoverPad.ne:hover ~ .rotaBox .rota.cY.Fwd,
.HoverPad.ne:hover ~ .rotaBox .rota.cX.Fwd,
.HoverPad.nw:hover ~ .rotaBox .rota.cY.Fwd,
.HoverPad.nw:hover ~ .rotaBox .rota.cX.Rwd,
.HoverPad.sw:hover ~ .rotaBox .rota.cY.Rwd,
.HoverPad.sw:hover ~ .rotaBox .rota.cX.Rwd,
.HoverPad.se:hover ~ .rotaBox .rota.cY.Rwd,
.HoverPad.se:hover ~ .rotaBox .rota.cX.Fwd,
.HoverPad.nt:hover ~ .rotaBox .rota.cY.Fwd,
.HoverPad.st:hover ~ .rotaBox .rota.cY.Rwd,
.HoverPad.et:hover ~ .rotaBox .rota.cX.Fwd,
.HoverPad.wt:hover ~ .rotaBox .rota.cX.Rwd  { animation-play-state: running; }

#playFwdX:checked ~ .rotaBox .rota.cX.Fwd,
#playRevX:checked ~ .rotaBox .rota.cX.Rwd,
#playFwdY:checked ~ .rotaBox .rota.cY.Fwd,
#playRevY:checked ~ .rotaBox .rota.cY.Rwd,
#playFwdZ:checked ~ .rotaBox .rota.cZ.Fwd,
#playRevZ:checked ~ .rotaBox .rota.cZ.Rwd,
.Btn:active ~ .rotaBox .side:after,
.Btn.RotX.Fwd:active ~ .rotaBox .rota.cX.Fwd,                         
.Btn.RotX.Rwd:active ~ .rotaBox .rota.cX.Rwd,
.Btn.RotY.Fwd:active ~ .rotaBox .rota.cY.Fwd,
.Btn.RotY.Rwd:active ~ .rotaBox .rota.cY.Rwd,                        
.Btn.RotZ.Fwd:active ~ .rotaBox .rota.cZ.Fwd,
.Btn.RotZ.Rwd:active ~ .rotaBox .rota.cZ.Rwd { animation-play-state: running; }

.MenuItem.Btn.RotX.Fwd:active ~ .rotaBox .rota.cX.Fwd,                         
.MenuItem.Btn.RotX.Rwd:active ~ .rotaBox .rota.cX.Rwd,
.MenuItem.Btn.RotY.Fwd:active ~ .rotaBox .rota.cY.Fwd,
.MenuItem.Btn.RotY.Rwd:active ~ .rotaBox .rota.cY.Rwd,                        
.MenuItem.Btn.RotZ.Fwd:active ~ .rotaBox .rota.cZ.Fwd,
.MenuItem.Btn.RotZ.Rwd:active ~ .rotaBox .rota.cZ.Rwd { animation-play-state: paused; }



/* ------------------ Menu ------------------ */

.MenuFrame { 
	z-index: 888;
	position: absolute;
	width: 45vmin;
	padding: 2vmin 5vmin;
	box-sizing: border-box;	
	height: 100%;
	right: 0;
	top: 0;
	background-color: rgba(0,0,0,0.25);
	color: rgba(45,93,132,1.0);	
	line-height: 2.8vmin;
	}
	
.MenuSection > h1 { line-height: 4.2vmin; font-family: 'SourcePro XtrLite'; padding: 0; margin: 1vmin 0; font-size: 2.25vmin; border-bottom: 0.12vmin solid rgba(45,93,132,1.0); }
.MenuItem { margin-bottom: 1.5vmin; margin-top: 2vmin; position: relative; padding: 0 1vmin 1vmin 2.0vmin; font-family: 'SourcePro Lite'; font-size: 2vmin; }

.MenuItem:before, .MenuItem:after {
	content: "";	
	position: absolute;
	top: 0.6vmin;	left: 0;	
	border-radius: 50%;
	transform: none !important;
	}
	
.MenuItem.Btn:before, .MenuItem.Btn:after { transform: none !important; background-image: none  !important; }
.MenuItem.Btn { z-index: 999; width: 1.5vmin !important; height: 1.5vmin !important; perspective:none; position: absolute; margin: 0px; padding: 0; }

.MenuItem.Btn:before,
.MenuItem:before,

.MenuItem.Btn:after,
.MenuItem:after { width: 1.0vmin; height: 1.0vmin; border:  0.12vmin solid rgba(45,93,132,1.0); }

.MenuItem.Btn:before,
.MenuItem:before { border:  0.12vmin solid rgba(45,93,132,1.0); }
.MenuItem.Btn:after,
.MenuItem:after { display: none;  background-color: rgba(45,93,132,1.0); }

/*.MenuItem.Btn:before { width: 16px; height: 16px; border:  1px solid rgba(0,60,135,0.5); }*/
.MenuItem.Btn:after { top: .5vmin; }



/* ------------------ Menu Trigger ------------------ */


#shdExp:checked ~ .rotaBox .pyramid > .side:before,

/*#shdExp:checked ~ .rotaBox .side.bottom:after { background-color: rgba(225,135,  0, 0.0); }*/
#shdExp:checked ~ .rotaBox .cube > .side { background-color: rgba(225,135,  0, 1.0); }
#shdExp:checked ~ .rotaBox .cube > .side { background-color: rgba(225,135,  0, 1.0); }

#btoExp:checked ~ .rotaBox .bottom,
#btoExp:checked ~ .rotaBox .fur { display: none; }


#rfrExp:checked ~ .rotaBox .rota.Rwd:after,
#shdExp:checked ~ .rotaBox .frame3d > .side:after { display: block; }

#wfrExp:checked ~ .rotaBox .cube > .side,
#wfrExp:checked ~ .rotaBox .frame3d > .side:before { border-radius: 2%; box-sizing: border-box;  background-color: rgba(255,255,255, 1.0); border: 2px solid rgba(0,60,135,1.0); }
#wfrExp:checked ~ .rotaBox .frame3d > .side { border-radius: 2%; box-sizing: border-box; border-bottom: 2px solid rgba(0,60,135,1.0); }
#wfrExp:checked ~ .rotaBox .frame3d > .bottom { border: none; }
#wfrExp:checked ~ .rotaBox .cube > .bottom { border: 2px solid rgba(0,60,135,1.0); }

#cubeSel:checked ~ .rotaBox .frame3d.cube,
#pdblSel:checked ~ .rotaBox .frame3d.pyramid.dobl,
#pyraSel:checked ~ .rotaBox .frame3d.pyramid.sngl,
#octaSel:checked ~ .rotaBox .frame3d.octah.dobl,
#ocsgSel:checked ~ .rotaBox .frame3d.octah.sngl,
#tribSel:checked ~ .rotaBox .frame3d.tetrah.sngl,
#sextSel:checked ~ .rotaBox .frame3d.tetrah.dobl { display: block; }



/*
#cubeSel:checked ~ .rotaBox .rota.Rwd:after { width: 170%; height: 170%; top: -35%; left: -35%; }
#pdblSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
#pyraSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
#octaSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
#ocsgSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
#tribSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
#sextSel:checked ~ .rotaBox .rota.Rwd:after { width: 120%; height: 120%; top: -10%; left: -10%; }
*/


	
#transp00:checked ~ .rotaBox .frame3d > .side { opacity: 1.0 ; } 	
#transp25:checked ~ .rotaBox .frame3d > .side { opacity: 0.75 ; } 	
#transp50:checked ~ .rotaBox .frame3d > .side { opacity: 0.50 ; } 	
#transp75:checked ~ .rotaBox .frame3d > .side { opacity: 0.25 ; } 		

#prsp00:checked ~ .rotaBox { perspective:   none; }
#prsp100:checked ~ .rotaBox { perspective:  450px; }
#prsp75:checked ~ .rotaBox { perspective:  650px; }
#prsp50:checked ~ .rotaBox { perspective:  850px; }
#prsp25:checked ~ .rotaBox { perspective: 1250px; }

#playRevZ:checked ~ .MenuItem.Btn.Stop[for="stopZ"],
#playFwdZ:checked ~ .MenuItem.Btn.Stop[for="stopZ"],
#playRevX:checked ~ .MenuItem.Btn.Stop[for="stopX"],
#playFwdX:checked ~ .MenuItem.Btn.Stop[for="stopX"],
#playRevY:checked ~ .MenuItem.Btn.Stop[for="stopY"],
#playFwdY:checked ~ .MenuItem.Btn.Stop[for="stopY"],
#playFwdX:checked ~ .MenuItem[for="playFwdX"]:after,
#playRevX:checked ~ .MenuItem[for="playRevX"]:after,
#playFwdY:checked ~ .MenuItem[for="playFwdY"]:after,
#playRevY:checked ~ .MenuItem[for="playRevY"]:after,
#playFwdZ:checked ~ .MenuItem[for="playFwdZ"]:after,
#playRevZ:checked ~ .MenuItem[for="playRevZ"]:after,
#shdExp:checked ~ .MenuFrame .MenuItem[for="shdExp"]:after,
#wfrExp:checked ~ .MenuFrame .MenuItem[for="wfrExp"]:after,
#rfrExp:checked ~ .MenuFrame .MenuItem[for="rfrExp"]:after,
#btoExp:checked ~ .MenuFrame .MenuItem[for="btoExp"]:after,
#techSel:checked ~ .MenuFrame .MenuItem[for="techSel"]:after,
#hoveSel:checked ~ .MenuFrame .MenuItem[for="hoveSel"]:after,
#transp00:checked ~ .MenuFrame .MenuItem[for="transp00"]:after,
#transp25:checked ~ .MenuFrame .MenuItem[for="transp25"]:after,
#transp50:checked ~ .MenuFrame .MenuItem[for="transp50"]:after,
#transp75:checked ~ .MenuFrame .MenuItem[for="transp75"]:after,
#prsp00:checked ~ .MenuFrame .MenuItem[for="prsp00"]:after,
#prsp25:checked ~ .MenuFrame .MenuItem[for="prsp25"]:after,
#prsp50:checked ~ .MenuFrame .MenuItem[for="prsp50"]:after,
#prsp75:checked ~ .MenuFrame .MenuItem[for="prsp75"]:after,
#prsp100:checked ~ .MenuFrame .MenuItem[for="prsp100"]:after,
#noneSel:checked ~ .MenuFrame .MenuItem[for="noneSel"]:after,
#cubeSel:checked ~ .MenuFrame .MenuItem[for="cubeSel"]:after,
#pyraSel:checked ~ .MenuFrame .MenuItem[for="pyraSel"]:after,
#pdblSel:checked ~ .MenuFrame .MenuItem[for="pdblSel"]:after,
#tribSel:checked ~ .MenuFrame .MenuItem[for="tribSel"]:after,
#sextSel:checked ~ .MenuFrame .MenuItem[for="sextSel"]:after,
#ocsgSel:checked ~ .MenuFrame .MenuItem[for="ocsgSel"]:after,
#octaSel:checked ~ .MenuFrame .MenuItem[for="octaSel"]:after { display: block; }








/* ------------------ Positioning Presets ------------------ */


#noneSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#noneSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#noneSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#tribSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#tribSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#tribSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#octaSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#octaSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#octaSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#ocsgSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#ocsgSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#ocsgSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#sextSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#sextSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#sextSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#cubeSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#cubeSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#cubeSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#pdblSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#pdblSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#pdblSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}

#pyraSel:checked ~ .rotaBox .cX.Rwd { animation-delay: -0s;}
#pyraSel:checked ~ .rotaBox .cY.Rwd { animation-delay: -0s;}
#pyraSel:checked ~ .rotaBox .cZ.Rwd { animation-delay: -0s;}