html, body { margin: 0;	padding: 0; overflow: hidden;  }
label { cursor: pointer; }
div, .Enty b { transform-style: preserve-3d; position: absolute; display: block; }

/*
background-color: rgba(  120,180,255, 0.5);
onwht == babyblu
187
217
255

deepspaceblu
19
31
54

*/
body { background-color: rgba(  19,31,54, 1.0);  }
	
/* >>>>>>>>>>>-------------------------- Animations --------------------------<<<<<<<<<<<<< */
	


.shdBox, .plane, .sphere, .CenterPoint, .Enty b { 
	animation-name: RotaAniZ;
	animation-duration: 24s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused;
	}
	
.plane, .sphere { animation-duration: 36s; }

.plane.Hrz { animation: none; }
.Hrz .clShd { animation: none; }

.Rwd, .Earth.sphere, .CenterPoint.Left, .West .CenterPoint.Rite, .shdBox.Left { animation-direction: reverse; }
.Earth .sphere.Rwd,  .CenterPoint.Rite, .West .CenterPoint.Left, .shdBox.Rite { animation-direction:  normal; }	

.West .CenterPoint.Left   { animation-delay: -12s; }

.clouds .CenterPoint.Left { animation-delay: -12s; }

.Enty .Left  { animation-direction:  normal; }
.Enty .Rite  { animation-direction: reverse; }

.West .Enty .Left  { animation-direction: reverse; }
.West .Enty .Rite  { animation-direction:  normal; }


.Enty {
	animation-duration: 10s;
	animation-timing-function: cubic-bezier(0.345, 0.095, 0.905, 0.440);	
	animation-iteration-count: infinite;
	animation-play-state: running;	
	animation-name: EntyPathAniA;
	transform: translateX(160vw) scale( 0.0, 0.0);
	}


.SpinFire > .Enty:nth-of-type(2) {	
	animation-name: EntyPathAniB;
	transform: translateX(140vw) scale( 0.0, 0.0);
	}	
	
/* Enty Paths */
.SpinFire:nth-of-type(1) > .Enty:nth-of-type(1) { animation-delay:  0s; animation-duration:  9.5s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(1) { animation-delay:  3s; animation-duration: 10.2s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(1) { animation-delay:  6s; animation-duration:  9.7s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(1) { animation-delay:  9s; animation-duration: 10.6s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(1) { animation-delay:  12s; animation-duration:  9.3s; }

.SpinFire:nth-of-type(1) > .Enty:nth-of-type(2) { animation-delay:  1s; animation-duration: 10.8s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(2) { animation-delay:  5s; animation-duration:  9.1s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(2) { animation-delay:  7s; animation-duration: 10.0s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(2) { animation-delay:  11s; animation-duration:  9.8s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(2) { animation-delay:  14s; animation-duration: 10.4s; }

/* clouds */
.clouds .SpinFire:nth-of-type(1) > .Enty .cloud,
.clouds .SpinFire:nth-of-type(1) > .Enty .frame2d,
.clouds .SpinFire:nth-of-type(1) > .Enty { animation-delay:  1s; animation-duration: 10.0s; }
.clouds .SpinFire:nth-of-type(2) > .Enty .cloud,
.clouds .SpinFire:nth-of-type(2) > .Enty .frame2d,
.clouds .SpinFire:nth-of-type(2) > .Enty { animation-delay:  3s; animation-duration: 10.0s; }
.clouds .SpinFire:nth-of-type(3) > .Enty .cloud,
.clouds .SpinFire:nth-of-type(3) > .Enty .frame2d,
.clouds .SpinFire:nth-of-type(3) > .Enty { animation-delay:  4s; animation-duration: 10.0s; }
.clouds .SpinFire:nth-of-type(4) > .Enty .cloud,
.clouds .SpinFire:nth-of-type(4) > .Enty .frame2d,
.clouds .SpinFire:nth-of-type(4) > .Enty { animation-delay:  2s; animation-duration: 10.0s; }
.clouds .SpinFire:nth-of-type(5) > .Enty .cloud,
.clouds .SpinFire:nth-of-type(5) > .Enty .frame2d,
.clouds .SpinFire:nth-of-type(5) > .Enty { animation-delay:  5s; animation-duration: 10.0s; }

/* cloud growth */


@keyframes EntyPathAniA { 
	  0%   {  transform:  translateX(  10vw); }
	100%   {  transform:  translateX( 150vw); }
	}                                      
 
@keyframes EntyPathAniB {                   
	  0%   {  transform:  translateX(    -10vw); }
	100%   {  transform:  translateX(   -150vw); }
	}	
	
@keyframes DistGrowAni { 
	  0%   {  transform:  scale( 0.0, 0.0); }
	100%   {  transform:  scale( 1, 1); }
	}  
	
@keyframes PyraGrowAni { 
	  0%   {  transform:  scale3d( 0.2, 0.2, 0.2); }
	100%   {  transform:  scale3d( 1.3, 1.3, 1.3); }
	}  
	
	
@keyframes DistGrowCldShdAni { 
	  0%   {  transform:  scale( 0.0, 0.0); }
	100%   {  transform:  scale( 1.0, 1.0); }
	}  
	
@keyframes DistFadeAni { 
	  0%   {  opacity: 1.0; }
	 80%   {  opacity: 1.0; }
	100%   {  opacity: 0.0; }
	}  
	
	

	
	
@keyframes RotaAniZ { 
	  0%   {  transform: rotateZ(   0deg); }
	100%   {  transform: rotateZ( 360deg);  }
	}




	


/* >>>>>>>>>>>-------------------------- Positions --------------------------<<<<<<<<<<<<< */

.dummy    { top: 44%; left: 115%; }

.pCont { width: 0%; padding-bottom: 0%;	margin-top: 0%; }

.perpBox  {	
	width: 0vw;
    top: 50%;
    left: 50%;
    margin-left: 0vw;
    margin-top: 0vw;
	}

.sphere { top: 0%; left: 0%;  }


.Earth { left: 120vw; top:  2vh; }

.Strat { width: 100vw; height: 100vw; left: 0vw; top: 0%; }




.plane, .flipPlane, .CenterPoint { width:  0%; }



.plane.Hrz {     top: 40vw;    left: -40vw; }

.plane.clouds.up  { top: 30vw;  left: -200vw;  animation-delay: -35.4s; } 
.plane.clouds.dwn  { top: 200vw; left: -30vw; animation-delay: -0.6s;} 

	
.flipPlane.East { left: -150vw; }
.flipPlane.West { left:  150vw; }
.SpinFire 		{ left:    0%; }	

.SpinFire {	width:  0vw; margin-left: - 0vw; }	

.Enty { width: 0vmin; height: 0vmin; top: 0vmin; }



.pCont { transform: rotateY(-90deg); }

.perpBox { perspective: 90vw; }

.flipPlane, .Hrz .West, .Hrz .East { transform: rotateX( 90deg); }

.Hrz .West { transform: rotateX( 90deg) rotateY( -3deg); }
.Hrz .East { transform: rotateX( 90deg) rotateY(  3deg); }

.Hrz .West.enties { transform: rotateX( 90deg) rotateY( -0deg) translateZ(-6vw); }
.Hrz .East.enties { transform: rotateX( 90deg) rotateY(  0deg) translateZ(-6vw); }


.Hrz.Wst { transform: rotateZ(90deg); }

/*
.Hrz .flipPlane.East.clShd { transform: rotateX( 0deg); }	
*/
/* >>>>>>>>>>>-------------------------- Horizons & Planes --------------------------<<<<<<<<<<<<< */

.hrzplate {
	width: 150vw; height: 200vw;
    left: 50%;
	background-color: rgba( 220, 200,  130, 1.0);
	background-color: rgba( 210, 190,  120, 1.0);
	opacity: 1.0;
	}

.hrzplate {
	margin: -100vw 0 0 -7vw;
	transform: translateZ(-0vw) rotateY(0deg);
	
	
	/*background-image: url(pics/Shadow_Cone_SemiSoft_pyra.png);
	background-repeat: no-repeat;
    background-position: 100% 45%;
    background-size: 100% 100%;
    background-size: 200% 650%;
    background-blend-mode: multiply;
    background-color: rgb(241, 220, 147);*/
    box-shadow: inset 18vw 0 650px rgba(241, 220, 147, 0.25);
	}
	
.Hrz.Wst .hrzplate { 
	margin: -100vw 0 0 -143vw;

	transform: translateZ(-0vw) rotateY(-0deg);
	}
	
.Hrz.Wst .hrzplate { box-shadow: inset -18vw 0 650px rgba(241, 220, 147, 0.25) }
/*	
.hrzplate:before,
.hrzplate:after {
	content: "";
	display: block;
	position: absolute;
	width: 200%;
	padding-bottom: 200%;
	margin: -100% 0 0 -100%;
	top: 50%; left: -10%;
    border-radius: 50%;
	}
	
.hrzplate:after {	
    box-shadow: inset -10vw 0 650px rgba(141, 120, 47, 0.4);
	}

.hrzplate:before {	
    box-shadow:  12vw 0 650px rgba(141, 120, 47, 0.4);
	}	
*/
.hrzplate {}
	
.hrzcut {
    width: 200vw;
    height: 30vw;
    left: 50%;
    margin: -15vw 0 0 -95vw;

	transform: rotateY(  90deg) rotateZ(-90deg) translateY(-10vw);
	}
	

.West .hrzcut { margin: -15vw 0 0 -105vw; }
	
/*	
.East .hrzcut { transform: rotateY(  90deg) rotateZ(-90deg) translateY(-10vw); }
.West .hrzcut, .up  .hrzcut { transform: rotateY( -90deg) rotateZ(90deg) translateY(-10vw); }

.hrzcut:after {
	content: "";
	display: block;
	position:absolute;

	top: 50%;
	left:  0%;
	height: 30%;
	width: 100%;
	
	background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(135,178,255,1));
	
	transform: translateZ(7vw);
	}
*/	
.hrzcut {	
	background-image: url(pics/Semisphere_01.png);
	background-repeat: no-repeat;	
	}
	

.hrzcut {	background-position: 20% 100%; background-size: 120% 350%; }


/*
.hrzcut:after {	background-position: 20% 90%; background-size: 120% 1250%;	}
	
.Hrz    .hrzcut:after { display: none; transform: rotateX( 65deg); width: 30%; left: 36%; }
.clouds .hrzcut:after { transform: rotateX(-45deg); }	
.clouds.dwn .hrzcut:after { transform: rotateX(45deg); }	
*/
	
/* >>>>>>>>>>>-------------------------- Enty.Pyramids --------------------------<<<<<<<<<<<<< */

.pyramid {	
	width: 152px; height: 152px;
	top: 0%; left: 0%;
	margin-left: -75px;
	margin-top:  -75px; 
	
	/*left: -150px;*/
	transform: rotateY(90deg) rotateZ(-90deg) translateY(75px);
	}	
	

	

	
@keyframes DistRiseAni { 
	  0%   {  transform: translateZ(   0px); }
	100%   {  transform: translateZ(-150px); }
	}

.side { position: absolute; width: 100%;  height: 100%; opacity: 1.0; }
	
.pyside { width: 100%; height: 100%; }
.pyside { top: 50%; transform: scale(0.71, 1.42) rotateZ(45deg);	}	

.east  { transform: rotateY( 90deg) rotateX( 30.00deg) translateZ( 44px); }
.west  { transform: rotateY(270deg) rotateX( 30.00deg) translateZ( 44px); }
.north { transform: rotateY(  0deg) rotateX( 30.00deg) translateZ( 44px); }
.south { transform: rotateY(180deg) rotateX( 30.00deg) translateZ( 44px); }
/*
.pyramid > .cstShd { left: 10px; transform: rotateX( 270deg) skew(0deg, 135deg) translateZ(19px) translateY(55px); background-color: rgba(0, 0, 0, 0.25) }
*/
.pyramid > .side.cstShd {     
	left: 16px;
    transform: rotateX( 270deg) skew(0deg, 135deg) translateZ(19px) translateY(35px); 
	display: none; }

/* >>>---------------  Pyramide Shadows -------------<<<*/

.side,
.pyside { overflow: hidden; }

/*	
.pyside > .shdBox.scaler { 
	width:  100%; padding-bottom: 100%;
	margin-top: -244%; margin-left: -244%;

	background-color: rgba(185,155, 55, 1.0);
	background-color: rgba(145,95, 0, 1.0);
	background-color: rgba(205,170, 65, 1.0);
	
	animation: none;
	transform: scale(4.0, 4.0);
	}
.pyside .shdBox.scaler > .shdBox  { width: 100%; height: 100%; }
.pyside .shdBox.scaler > .shdBox > .shdBox  { 	
	width: 100%; height: 100%;	
	background-image: url(pics/Shadow_Cone_SemiSoft_pyra.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;

    opacity: 0.45;
	}	
.east   .shdBox.Left { animation-delay:   -8.1s; }  	
.north  .shdBox.Left { animation-delay:   -19.5s; } 	
.west   .shdBox.Left { animation-delay:  -24s; }  	
.south  .shdBox.Left { animation-delay:  -12s; } 


.shdBox { animation-play-state: paused !important; }
*/
/*	
.shdBox.Left:after { content: ""; position: absolute; border: 13px solid orange; left: 50%; top: 0; }
*/


/* fixed */

.side:before,
.side:after { 
	content: "";
	display: block;
	position: absolute;
	width: 100%; height: 100%;
	top: 50%; 
	transform: scale(0.71, 1.42) rotateZ(45deg);
}	
/**/
.side:after {
	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: 12.0s;	
	}
	


@keyframes ShadowAni { 
	  0%   {  opacity: 0.0; }
	100%   {  opacity: 0.5; }
	}

.south:after  { animation-delay: -1.5s; }
.west:after   { animation-delay: -2s; }	
.north:after  { animation-delay: -3s; } 
.east:after   { animation-delay: -4s; }  

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


.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); }	

.side:before 				   { background-color: rgba(235,190, 95, 1.0); }	
.side:before 				   { background-color: rgba(245,210, 125, 1.0); }	



/* Shadow Caster Test */

.side.cstShd:after, .side.cstShd:before { display: none;}

.pyramid > .side.cstShd:after { 
	content: "";
	display: block;
	position: absolute;
	width: 100%; height: 100%;
	animation: none;
    display: block;
    width: 150%;
    height: 150%;
    top: 50%;
    left: -75%;
    transform: rotateZ(45deg);
    background-color: #000;
    background-color: rgba(55,40,15,1.0);
	opacity: 0.3;
	}


/*
.pyramid:after {
	z-index: -99;
	content: "";
	display: block;
	width: 150px;
	height: 150px;
	background-color: #000;
	opacity: 0.5;
	transform: rotateX(90deg) rotateY(2.4deg) translateZ(70px);
	
	animation-name: DistSinkAni;
	animation-duration: 10s;
	animation-timing-function: cubic-bezier(0.345, 0.095, 0.905, 0.440);
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

@keyframes DistSinkAni { 
	  0%   {  transform: rotateX(90deg) rotateY(0deg) translateZ(70px); }
	100%   {  transform: rotateX(90deg) rotateY(0deg) translateZ(-0px); }
	}

*/
/* >>>>>>>>>>>-------------------------- Spinner.Settings --------------------------<<<<<<<<<<<<< */

.SpinFire:nth-of-type(1) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg)  translateY(-20px); }
.SpinFire:nth-of-type(2) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 45deg)  translateY(-20px); }
.SpinFire:nth-of-type(3) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg)  translateY(-20px); }
.SpinFire:nth-of-type(4) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg)  translateY(-20px); }
.SpinFire:nth-of-type(5) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 45deg)  translateY(-20px); }

/*  SchickiMicki
.SpinFire:nth-of-type(1) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(210deg)  translateY(-20px); }
.SpinFire:nth-of-type(2) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 30deg)  translateY(-20px); }
.SpinFire:nth-of-type(3) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(210deg)  translateY(-20px); }
.SpinFire:nth-of-type(4) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(210deg)  translateY(-20px); }
.SpinFire:nth-of-type(5) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 30deg)  translateY(-20px); }
*/


.Hrz.Wst .SpinFire:nth-of-type(1) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) translateY(-20px); }	
.Hrz.Wst .SpinFire:nth-of-type(2) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-135deg) translateY(-20px); }		
.Hrz.Wst .SpinFire:nth-of-type(3) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) translateY(-20px); }
.Hrz.Wst .SpinFire:nth-of-type(4) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) translateY(-20px); }
.Hrz.Wst .SpinFire:nth-of-type(5) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-135deg) translateY(-20px); }



.flipPlane.prShd .SpinFire:nth-of-type(1) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg) rotateX(-90deg) translateY(-20px); }
.flipPlane.prShd .SpinFire:nth-of-type(2) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 45deg) rotateX(-90deg) translateY(-20px); }
.flipPlane.prShd .SpinFire:nth-of-type(3) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg) rotateX(-90deg) translateY(-20px); }
.flipPlane.prShd .SpinFire:nth-of-type(4) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(225deg) rotateX(-90deg) translateY(-20px); }
.flipPlane.prShd .SpinFire:nth-of-type(5) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY( 45deg) rotateX(-90deg) translateY(-20px); }

.Hrz.Wst .flipPlane.prShd .SpinFire:nth-of-type(1) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) rotateX(-90deg) translateY(-20px); }	
.Hrz.Wst .flipPlane.prShd .SpinFire:nth-of-type(2) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-135deg) rotateX(-90deg) translateY(-20px); }		
.Hrz.Wst .flipPlane.prShd .SpinFire:nth-of-type(3) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) rotateX(-90deg) translateY(-20px); }
.Hrz.Wst .flipPlane.prShd .SpinFire:nth-of-type(4) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-315deg) rotateX(-90deg) translateY(-20px); }
.Hrz.Wst .flipPlane.prShd .SpinFire:nth-of-type(5) > .Enty .pyramid { transform: rotateY( 90deg) rotateZ(-90deg) rotateY(-135deg) rotateX(-90deg) translateY(-20px); }



/*
.clouds .CenterPoint.Left { animation-delay: -0s; }
*/
.clouds .SpinFire:nth-of-type(2) b.Rite { animation-delay: -2.4s; }
.clouds .SpinFire:nth-of-type(5) b.Rite { animation-delay: -7.2s; }
.clouds .SpinFire:nth-of-type(3) b.Rite { animation-delay:  0.0s; }
.clouds .SpinFire:nth-of-type(1) b.Rite { animation-delay: -4.8s; }
.clouds .SpinFire:nth-of-type(4) b.Rite { animation-delay: -9.6s; }

.Hrz .East .SpinFire:nth-of-type(2) b.Rite { animation-delay: -2.4s; }
.Hrz .East .SpinFire:nth-of-type(5) b.Rite { animation-delay: -7.2s; }
.Hrz .East .SpinFire:nth-of-type(3) b.Rite { animation-delay:  0.0s; }
.Hrz .East .SpinFire:nth-of-type(1) b.Rite { animation-delay: -4.8s; }
.Hrz .East .SpinFire:nth-of-type(4) b.Rite { animation-delay: -9.6s; }
 
.Hrz .West .SpinFire:nth-of-type(2) b.Left { animation-delay: -2.4s; }
.Hrz .West .SpinFire:nth-of-type(5) b.Left { animation-delay: -7.2s; }
.Hrz .West .SpinFire:nth-of-type(3) b.Left { animation-delay:  0.0s; }
.Hrz .West .SpinFire:nth-of-type(1) b.Left { animation-delay: -4.8s; }
.Hrz .West .SpinFire:nth-of-type(4) b.Left { animation-delay: -9.6s; }




.SpinFire:nth-of-type(1) > .Enty:nth-of-type(1) .pyramid:after { animation-delay:  0s; animation-duration:  9.5s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(1) .pyramid:after { animation-delay:  3s; animation-duration: 10.2s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(1) .pyramid:after { animation-delay:  6s; animation-duration:  9.7s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(1) .pyramid:after { animation-delay:  9s; animation-duration: 10.6s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(1) .pyramid:after { animation-delay:  12s; animation-duration:  9.3s; }

.SpinFire:nth-of-type(1) > .Enty:nth-of-type(2) .pyramid:after { animation-delay:  1s; animation-duration: 10.8s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(2) .pyramid:after { animation-delay:  5s; animation-duration:  9.1s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(2) .pyramid:after { animation-delay:  7s; animation-duration: 10.0s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(2) .pyramid:after { animation-delay:  11s; animation-duration:  9.8s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(2) .pyramid:after { animation-delay:  14s; animation-duration: 10.4s; }


.prShd .SpinFire:nth-of-type(1) > .Enty:nth-of-type(1) .pyramid { animation-delay:  0s; animation-duration:  9.5s; }
.prShd .SpinFire:nth-of-type(2) > .Enty:nth-of-type(1) .pyramid { animation-delay:  3s; animation-duration: 10.2s; }
.prShd .SpinFire:nth-of-type(3) > .Enty:nth-of-type(1) .pyramid { animation-delay:  6s; animation-duration:  9.7s; }
.prShd .SpinFire:nth-of-type(4) > .Enty:nth-of-type(1) .pyramid { animation-delay:  9s; animation-duration: 10.6s; }
.prShd .SpinFire:nth-of-type(5) > .Enty:nth-of-type(1) .pyramid { animation-delay:  12s; animation-duration:  9.3s; }
                                                         
.prShd .SpinFire:nth-of-type(1) > .Enty:nth-of-type(2) .pyramid { animation-delay:  1s; animation-duration: 10.8s; }
.prShd .SpinFire:nth-of-type(2) > .Enty:nth-of-type(2) .pyramid { animation-delay:  5s; animation-duration:  9.1s; }
.prShd .SpinFire:nth-of-type(3) > .Enty:nth-of-type(2) .pyramid { animation-delay:  7s; animation-duration: 10.0s; }
.prShd .SpinFire:nth-of-type(4) > .Enty:nth-of-type(2) .pyramid { animation-delay:  11s; animation-duration:  9.8s; }
.prShd .SpinFire:nth-of-type(5) > .Enty:nth-of-type(2) .pyramid { animation-delay:  14s; animation-duration: 10.4s; }


.SpinFire:nth-of-type(1) > .Enty:nth-of-type(1) .scaleBox { animation-delay:  0s; animation-duration:  9.5s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(1) .scaleBox { animation-delay:  3s; animation-duration: 10.2s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(1) .scaleBox { animation-delay:  6s; animation-duration:  9.7s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(1) .scaleBox { animation-delay:  9s; animation-duration: 10.6s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(1) .scaleBox { animation-delay:  12s; animation-duration:  9.3s; }

.SpinFire:nth-of-type(1) > .Enty:nth-of-type(2) .scaleBox { animation-delay:  1s; animation-duration: 10.8s; }
.SpinFire:nth-of-type(2) > .Enty:nth-of-type(2) .scaleBox { animation-delay:  5s; animation-duration:  9.1s; }
.SpinFire:nth-of-type(3) > .Enty:nth-of-type(2) .scaleBox { animation-delay:  7s; animation-duration: 10.0s; }
.SpinFire:nth-of-type(4) > .Enty:nth-of-type(2) .scaleBox { animation-delay:  11s; animation-duration:  9.8s; }
.SpinFire:nth-of-type(5) > .Enty:nth-of-type(2) .scaleBox { animation-delay:  14s; animation-duration: 10.4s; }




/* pentaSpinner */
.SpinFire:nth-of-type(1) { transform: rotateZ( 72deg) rotateX(  0deg); }
.SpinFire:nth-of-type(2) { transform: rotateZ(216deg) rotateX(  0deg); }
.SpinFire:nth-of-type(3) { transform: rotateZ(360deg) rotateX(  0deg); }
.SpinFire:nth-of-type(4) { transform: rotateZ(144deg) rotateX(  0deg); }
.SpinFire:nth-of-type(5) { transform: rotateZ(288deg) rotateX(  0deg); }

								/* CLOUD:OFFSET init */
.clouds .CenterPoint.Left { animation-delay: -1.2s; }

/* >>>>>>>>>>>-------------------------- Enty.Clouds --------------------------<<<<<<<<<<<<< */	 
	
.frame2d {	
	width: 0; height: 0;
								/* CLOUD:OFFSET counter */
	transform: rotateY(90deg) rotateX(-18deg);	
	
	animation-name: DistFadeAni;
	animation-duration: 10s;
	animation-timing-function: linear;	
	animation-iteration-count: infinite;
	animation-play-state: running;	
	
	}
	
	

	
.cloud {	
	width: 4vw;
	height: 7vw;
	margin: -1vw 0 0 -1vw;
	background-color: #FFF;	
	border-radius: 50%;
	
	animation-name: DistGrowAni;
	animation-duration: 10s;
	animation-timing-function: cubic-bezier(0.345, 0.095, 0.905, 0.440);	
	animation-iteration-count: infinite;
	animation-play-state: running;	
	transform:  scale( 0.0, 0.0);
	
	opacity: 0.825;
	}
	
	

.cloud:before,
.cloud:after {
	content: "";
	display: block;
	position:absolute;
	top: 20%; left: 40%;
	width: 100%;
	height: 100%;
	
	background-color: #FFF;
	border-radius: 50%;
	}		
	
.cloud:before { top: 30%; left: 15%;	}
.cloud:after { top: -30%; left: 20%; height: 120%;	}

.clShd .cloud { background-color: rgba(55,40,15,1.0);	opacity: 0.2; animation-name: DistGrowAni; }
.clShd .cloud:before,
.clShd .cloud:after { background-color: rgba(55,40,15,1.0); }



.hemisphere {
	
	width: 400vw; height: 200vw;
	top:  0vw;
	margin: -100vw 0 0 -200vw;
	
	background-image: url(pics/Semisphere_01.png);
	background-repeat: no-repeat;
	background-position: 20% 20%;
	background-size: 120% 120%;
	
	transform: rotateZ(45deg) rotateY(90deg);
	}


.eastern { left: -140vw; top: -30vw; }
.western { top:   140vw; left: 30vw; }


.spacern { 
	background-image: none; 
	background-color: rgba(19, 31, 54, 1.0);
	transform: rotateZ(135deg) rotateY(90deg); 
	
    height: 0vw;
    width: 0;
    margin: -0vw 0 0 -0vw;
    top: -50vw;
    left: 50vw;
	
	}
	
	
	
.mysun {
    bottom: -55vw;
    left: 80vmin;
    width: 7vw;
    height: 7vw;
	transform: rotateY(90deg);
	
	/*background-image: url(pics/Sun_full.svg);
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: contain;*/
	
	border-radius: 50%;
	background-color: rgba(250,245,201,1.0);
	
	box-shadow: 0px 0px 150px rgba(255,250,225, 1.0);
	
	transform: rotateY(99deg) rotateX(0deg) translateX(-35vmin);
	/*
	animation-name: SunnyAniZ;
	animation-duration: 63s;
	animation-timing-function: linear;	
	animation-iteration-count: infinite;
	animation-play-state: running;	*/
	
	}
@keyframes SunnyAniZ { 
	  0%   {  transform: rotateY(99deg) rotateX(0deg) translateX(-25vmin) rotateZ(   0deg); }
	100%   {  transform: rotateY(99deg) rotateX(0deg) translateX(-25vmin) rotateZ( 360deg);  }
	}


/* 19, 31, 54, 1.0 */





/* >>>>>>>>>>>-------------------------- Shadow Caster --------------------------<<<<<<<<<<<<< */

.clouds.clShd  .CenterPoint.Left { animation-delay: -1.8s; }
.clouds.clShd .cloud {	
	width: 7vw;
	height: 5vw;
	}

.flipPlane.clShd .frame2d {     transform: rotateY( 90deg) rotateY( 90deg); animation: none; }

.flipPlane.clShd .SpinFire > .Enty:nth-of-type(2) .frame2d { transform: rotateY(-90deg) rotateY( 90deg); animation: none; }
/*
.flipPlane.prShd .SpinFire > .Enty .pyramid {	transform: rotateY( 0deg) rotateZ( 0deg) translateY(75px); }
*/



.clouds.dwn .frame2d { transform: rotateY(90deg) rotateX(-18deg) rotateZ(180deg); }
.flipPlane.West.clShd .frame2d { transform: rotateY( 0deg) rotateX( 0deg) rotateZ(180deg); animation: none; }

/*
.Hrz.Est .flipPlane.clShd, .Hrz.Est .flipPlane.prShd { transform:  rotateX(90deg) translateZ( 0vw) rotateY( 2.4deg); }
.Hrz.Wst .flipPlane.clShd { transform:  rotateX(90deg) translateZ( 0vw) rotateY(-2.4deg) rotateZ(180deg); }
.Hrz.Wst .flipPlane.prShd { transform:  rotateX(90deg) translateZ( 0vw) rotateY(-2.4deg); }
*/
.Hrz.Est .flipPlane.clShd { transform: rotateX(90deg) translateZ( 0.1vw) rotateY( 3deg); }
.Hrz.Wst .flipPlane.clShd { transform: rotateX(90deg) translateZ( 0.1vw) rotateY(-3deg) rotateZ(180deg); }



.Hrz.Est .flipPlane.prShd { transform: rotateX(90deg) translateZ( 1vw) rotateY( 1deg); }
.Hrz.Wst .flipPlane.prShd { transform:  rotateX(90deg) translateZ(1vw) rotateY(-1deg); }

.Hrz.Est .flipPlane.prShd { transform: rotateX(90deg) translateZ(  0vw) rotateY( 0deg); }
.Hrz.Wst .flipPlane.prShd { transform:  rotateX(90deg) translateZ( 0vw) rotateY(-0deg); }

.prShd .pyramid { 
	border: 4px solid green;
	overflow: hidden;
	}
	
	


.Hrz .flipPlane.ground .scaleBox { 
	width: 100%; height: 100%;
	/*animation-name: PyraGrowAni;
	animation-duration: 10s;
	
	animation-timing-function: cubic-bezier(0.345, 0.095, 0.905, 0.440);	
	animation-iteration-count: infinite;
	animation-play-state: running;	*/
	}	

.prShd .pyramid:after {
	content: "";
	display: block;
	position: absolute;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	top:  10%; left: 50%;
	
	background-color: rgba(0,0,0,0.25);
	transform: scale(0.4, 1.0) rotateZ(45deg) rotateY(0deg) ;
	
	}
	
	
	
	
/* >>>>>>>>>>>-------------------------- ShowTheRopes --------------------------<<<<<<<<<<<<< */	


#flipDia { z-index: 1001; position: absolute; right: 15px; bottom: 0px;}
#flipScene { z-index: 1001; position: absolute; right: 0;  bottom: 0px;}
#flipScene:checked ~ .perpBox .pCont { transform: rotateY(  0deg); }
#flipScene:checked ~ .perpBox { left: 25%; perspective: 2000vw; transform: scale(0.25, 0.25); }

/*#flipScene:checked ~ .planeBox .intersect.init { transform:   rotateX( 90deg) rotateZ(-85deg); }
#flipScene:checked ~ .planeBox { perspective: 00vw; transform: rotateX( 90deg) scale(0.25, 0.25); }
*/
#flipScene:checked ~ .planeBox .intersect.init {  transform: rotateX( 90deg) rotateZ(-90deg) translateX(700vw); }
#flipScene:checked ~ .planeBox { perspective: 00vw; left: 20%;   }


.planeBox { perspective: 400vmin; }
.rotaBox  { top: 150vmin; }


.dummy {
	width: 12%; padding-bottom: 12%;	
	border: 0px solid blue;
	transform: rotateY(90deg);
	}

#flipDia:checked ~ .dia { display: none; }
	

	/*
.frame3d,
.pCont,
.perpBox,	       
.sphere.Rwd,
.Enty  				{ border: 3px solid gray; }	
.SpinFire			{ border-top: 0px solid gray; }

.pCont				{ border-color: purple; }
.perpBox 			{ border-color: orange; }
.sphere.Rwd			{ border-color: green;  }

.SpinFire			{ border-color: red;    }
.Enty				{ border-color: green;  }	
.clouds  .SpinFire,
.clouds  .Enty 		{ border-color: blue;   }	
	

.SpinFire			{ border-top: 0px solid red; }
	

	*/

	

	
	
	
	
	
	
	
	
	
	

/* >>>>>>>>>>>-------------------------- THE.PLANE --------------------------<<<<<<<<<<<<< */
	
.planeBox {	 						/*display: none;*/
	top: 50%; left: 50%;
	margin: 0;
	width: 0vmin;
	}	
	
.rota,
.horizontal,
.vertical,
.intersect { top: 50%; left: 50%;  width:  0%;  height:  0%; }
	
.intersect { transform: rotateY( 90deg); }
	
.intersect.init { transform: rotateX( 90deg); }
	
.rota {
	transition: transform 2.4s ease-out 0s;
	}
	
.rotaBox { 
	width: 0%; height:  0%;
	left: 50%;
	animation-name: WindBoxAni;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;	
	animation-play-state: running;
	animation-duration: 6.0s;
	}	

@keyframes WindBoxAni { 
	  0%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX(-1vmin)   rotateX(89deg) rotateY(  1deg) rotateZ( -1deg); }
	 25%   {  transform: translateZ(-0vmin) translateY( 0vmin) translateX( 1vmin)   rotateX(92deg) rotateY( -1deg) rotateZ( 1deg); }
	 50%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX( 0vmin)   rotateX(90deg) rotateY(  2deg) rotateZ( 0deg); }
	 75%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX( 2vmin)   rotateX(91deg) rotateY(  0deg) rotateZ(1deg); }
	100%   {  transform: translateZ( 0vmin) translateY( 0vmin) translateX(-1vmin)   rotateX(89deg) rotateY(  1deg) rotateZ( -1deg); }
	}	
	
/* >>>>>>>>>>>-------------------------- The Plane --------------------------<<<<<<<<<<<<< */

/* Hrzn Distance */
.planeBox {	perspective: 400vmin; }
.rotaBox  { top: 150vmin; }

	
.paperplane { 
	width: 300px; height: 99px;	
	top: 50%;	left: 50%;
	margin-top: -50px;
	margin-left: -150px;	

	margin-left: -150px;
	transform: rotateZ(90deg);
	}
	
.fold { 
	width: 100%; height: 100%;
	position: absolute;

	opacity: 1.0;
	
	/**/
	}
	
.plside,
.fold { overflow: hidden; }
	
.fold.wing.left { transform: rotateZ(  90deg) rotateY(  90deg) rotateZ( -13deg) translateX( -19px); }
.fold.wing.left { transform: rotateZ(  90deg) rotateY(  90deg) skew( -4deg, -13deg) translateX( -7px); }

.fold.wing.rite { transform: rotateZ( -90deg) rotateY(  90deg) rotateZ( -13deg) translateX( -19px); }
.fold.wing.rite { transform: rotateZ( -90deg) rotateY(  90deg) skew( -4deg, -13deg) translateX( -7px); }

.fold.body.left { transform: rotateY(  77deg) rotateX(  45.25deg) rotateZ(   0deg); }
.fold.body.rite { transform: rotateY( 103deg) rotateX( -45.25deg) rotateZ(   0deg); }

.fold.wing.left { top: 35%; left:  86px; }
.fold.wing.rite { top: 35%; left: -85px; }

.fold.dwnside.wing { top: 34.8% !important; }


.fold.body.left { left: 2px; }
.fold.body.rite { left: -1px; }

.fold > .plside { width: 45%; height: 360%; }	
	
.fold > .plside {
	top: -66px;	left: 102px;
	transform: rotateZ(72deg);	
	box-sizing: border-box;
	}

.fold.wing > .plside { top: -61px;	left: 102px;	 }


.plside { background-color: rgba(254,250,220, 1.0); }
	
	
/*
*/

.fold.body.rite > .plside { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);  }	
.fold.body.left > .plside { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);  }	
.fold.dwnside.body > .plside { box-shadow: none;  }	

.fold.dwnside.wing > .plside { box-shadow: inset 30px 0px 30px rgba(255,255,255,0.25);  }	
.fold.dwnside.body > .plside { box-shadow: inset 30px 0px 30px rgba(255,255,255,0.25);  }	

.fold.body > .plside { border: 2px solid blue; box-sizing: border-box;   }	
.fold.wing > .plside { border: 3px solid blue;  }	
.fold.wing  { border-bottom: 2px solid blue; border-right:  7px solid blue; box-sizing: border-box;	}
.fold.body  { border-bottom: 1px solid blue; border-right:  7px solid blue; box-sizing: border-box;	}


.fold,
.plside { border: none !important; }



/* >>>---------------  Plane Shadows -------------<<<*/



.plside > .shdBox.scaler { 
	width: 100%;
	padding-bottom: 100%;     
	margin-top: 220%;
	margin-left: -60%; 
	animation: none; 
	transform: scale(6.3,6.3);
	
	}


.fold > .plside > .shdBox.scaler > .shdBox { width: 100%; height: 100%; }

.fold > .plside > .shdBox.scaler > .shdBox > .shdBox  {
	
	width: 100%; height: 100%;	
	background-image: url(pics/Shadow_Cone_SemiSoft_pyra.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	
	/*mix-blend-mode: multiply;*/
    opacity: 0.75;
	}
	
.fold.body .shdBox.scaler > .shdBox,
.fold.wing .shdBox.scaler > .shdBox > .shdBox  { opacity: 0.75; }

.plside .shdBox.Rite { 
	/*animation-name: RotaAniZ;
	animation-duration: 12000s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused;*/
	
	animation:none;
	transition: transform 2s ease-out 0s;
	}	

.plside .shdBox.Left { 
	animation-name: RotaAniZ;
	animation-duration: 12000s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused; 
	animation-direction: normal; }	
/*	
.dwnside .plside > .shdBox { background-color: rgba(134,30,00, 1.0); }



.fold.wing.left .shdBox.Left { animation-delay:  -1s; }  	
.fold.wing.rite .shdBox.Left { animation-delay:  -1s; }  	
.fold.body.left .shdBox.Left { animation-delay:  -3s; } 	
.fold.body.rite .shdBox.Left { animation-delay:  -4.5s; } 	

.fold.dwnside.wing.left .shdBox.Left { animation-delay:  -7s; }  	
.fold.dwnside.wing.rite .shdBox.Left { animation-delay:  -7s; }  	
.fold.dwnside.body.left .shdBox.Left { animation-delay:  -9s; } 	
.fold.dwnside.body.rite .shdBox.Left { animation-delay:  -10.5s; } 	
*/

.fold.wing.left .shdBox.Left { animation-delay:  -1.5s; }  	
.fold.wing.rite .shdBox.Left { animation-delay:  -1.5s; }  	
.fold.body.left .shdBox.Left { animation-delay:  -2s; } 	
.fold.body.rite .shdBox.Left { animation-delay:  -9s; } 	

.fold.dwnside.wing.left .shdBox.Left { animation-delay:  -7.5s; }  	
.fold.dwnside.wing.rite .shdBox.Left { animation-delay:  -7.5s; }  	
.fold.dwnside.body.rite .shdBox.Left { animation-delay:  -9s; } 	
.fold.dwnside.body.left .shdBox.Left { animation-delay:  -12s; } 	


.fold.wing.left .shdBox.Left { animation-delay:  -7500s; }  	
.fold.wing.rite .shdBox.Left { animation-delay:  -7500s; }  	
.fold.body.left .shdBox.Left { animation-delay:  -8000s; } 	
.fold.body.rite .shdBox.Left { animation-delay:  -6000s; } 

.fold.dwnside.wing.left .shdBox.Left { animation-delay:  -6000s; }  	
.fold.dwnside.wing.rite .shdBox.Left { animation-delay:  -6000s; }  	

.fold.dwnside.body.rite .shdBox.Left { animation-delay:  -12000s; } 	
.fold.dwnside.body.left .shdBox.Left { animation-delay:  -12000s; } 












	
/* ---------    visualize    -------------- */
.planeBox { border-top: 0px solid purple; }

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







	
	
	
/* >>>>>>>>>>>-------------------------- GamePad - Classic --------------------------<<<<<<<<<<<<< */
/**/
.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.46vmin;	
	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; }	
.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);
	}
	
.HoverPad.DeadZone:after  { width:  4vmin; height:  4vmin; margin-left: -2vmin; margin-top: -2vmin; background-color: rgba(0,0,0,0.1);}	
.HoverPad.DeadZone:before { width: 40vmin; height: 40vmin; margin-left: -20vmin; margin-top: -20vmin; cursor: default; }
.HoverPad.DeadZone:active::before { display: none; }
.HoverPad:hover::after { display: block; }



/* >>>>>>>>>>>-------------------------- GamePad - 8StR--------------------------<<<<<<<<<<<<< */
/*
.HoverPad 		{ z-index: 936; position: absolute; width: 8vmin; right: 17vmin; bottom: 20vmin; }	


.HoverPad:after, .HoverPad:before {
	content: ""; display: block; position: absolute;
	width: 100%; padding-bottom: 100%;	
	transform: scale(0.415, 1.0) rotate(45deg);
	margin-left: -2px;	margin-top: 1.6vmin;
	border: 2px solid rgba(50,95,165,0.0); background-color: rgba(50,95,165,1.0);
	}
	
.HoverPad:after { display: none; border: 2px solid rgba(0,0,0,0.0); margin-left: -2px; }
.nw:before, .ne:before, .sw:before, .se:before { background-color: rgba(105,145,205,1.0); }
.nw:after,  .ne:after,  .sw:after,  .se:after  { background-color: rgba(255,255,255,0.25); }
.et:after,  .wt:after,  .nt:after,  .st:after  { background-color: rgba(255,255,255,0.50); }
		
.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        { margin-right: 3.8vmin; margin-bottom: 1.5vmin; width:  0vmin; height:  0vmin; background-color: rgba(0,0,0,0.0); }	
.HoverPad.DeadZone:after,
.HoverPad.DeadZone:before { display: block; border: none; transform: none;	border-radius: 50%;	background-color: rgba(0,0,0,0.0); }	
.HoverPad.DeadZone:after  { width:  2vmin; height:  2vmin; left:   -1vmin; top:   -1vmin; }	
.HoverPad.DeadZone:before { width: 24vmin; height: 24vmin; left: -12vmin; top: -12vmin; }
.HoverPad.DeadZone:active::before { display: none; }

.HoverPad:hover::after { display: block; }
*/

/* >>>>>>>>>>>-------------------------- Controls --------------------------<<<<<<<<<<<<< */

	
/* -------------------------- Horizon Anchor - Spheres -------------------------- */
/* Diagonal */
.HoverPad.ne:hover ~ .perpBox .Rwd, 
.HoverPad.ne:hover ~ .perpBox .Rite,
.HoverPad.nw:hover ~ .perpBox .Rwd,
.HoverPad.nw:hover ~ .perpBox .Left,
.HoverPad.sw:hover ~ .perpBox .Fwd, 
.HoverPad.sw:hover ~ .perpBox .Left,
.HoverPad.se:hover ~ .perpBox .Fwd, 
.HoverPad.se:hover ~ .perpBox .Rite,

/* Straight */
.HoverPad.nt:hover ~ .perpBox .Rwd,
.HoverPad.st:hover ~ .perpBox .Fwd, 
.HoverPad.wt:hover ~ .perpBox .Left,
.HoverPad.et:hover ~ .perpBox .Rite  { animation-play-state: running; }


/* shadowBoxing */
.HoverPad.wt:hover ~ .planeBox .Left,
.HoverPad.et:hover ~ .planeBox .Rite  {  }
/*
.HoverPad.wt:hover ~ .planeBox .left .Left,
.HoverPad.wt:hover ~ .planeBox .rite .Rite,
.HoverPad.et:hover ~ .planeBox .rite .Left,
.HoverPad.et:hover ~ .planeBox .left .Rite
*/

/* shadowBoxing */

.HoverPad.wt:hover ~ .planeBox .body .Rite    { transform: rotateZ(-15deg); }
.HoverPad.wt:hover ~ .planeBox .body.rite .Rite    { transform: rotateZ(90deg); }
.HoverPad.wt:hover ~ .planeBox .wing .Rite    { transform: rotateZ( 45deg); }


.HoverPad.et:hover ~ .planeBox .body .Rite    { transform: rotateZ(135deg); }
.HoverPad.et:hover ~ .planeBox .body.rite .Rite    { transform: rotateZ( -5deg); }


.HoverPad.nt:hover ~ .planeBox .body .Rite    { transform: rotateZ(135deg); }
.HoverPad.nt:hover ~ .planeBox .body.rite .Rite    { transform: rotateZ( -5deg); }




/* >>>>>>>>>>>-------------------------- Plane Steering --------------------------<<<<<<<<<<<<< */

/* Plane Idle */
.planeBox .rota.vertical   { transform: rotateZ( -4deg); }
.planeBox .rotaBox .rota.cY { transform: rotateY( -2deg); }

/* -------------------------- Horizon Anchor - Plane -------------------------- */
/* Diagonal */
.HoverPad.ne:hover ~ .planeBox .rota.vertical    { transform: rotateZ( 8deg); }
.HoverPad.ne:hover ~ .planeBox .rota.horizontal  { transform: rotateZ( 15deg); }
.HoverPad.nw:hover ~ .planeBox .rota.vertical    { transform: rotateZ( 8deg); }
.HoverPad.nw:hover ~ .planeBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.sw:hover ~ .planeBox .rota.vertical    { transform: rotateZ( -8deg); }
.HoverPad.sw:hover ~ .planeBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.se:hover ~ .planeBox .rota.vertical    { transform: rotateZ( -8deg); }
.HoverPad.se:hover ~ .planeBox .rota.horizontal  { transform: rotateZ( 15deg); }

/* Straight */
.HoverPad.nt:hover ~ .planeBox .rota.vertical    { transform: rotateZ( 9deg); }
.HoverPad.st:hover ~ .planeBox .rota.vertical    { transform: rotateZ(-9deg); }

.HoverPad.wt:hover ~ .planeBox .rota.horizontal  { transform: rotateZ(-15deg); }
.HoverPad.wt:hover ~ .planeBox .rota.vertical    { transform: rotateZ( -2deg); }
.HoverPad.et:hover ~ .planeBox .rota.horizontal  { transform: rotateZ( 15deg); }
.HoverPad.et:hover ~ .planeBox .rota.vertical    { transform: rotateZ( -2deg); }

/* -------------------------- Plane Weight -------------------------- */
/* Diagonal */
.HoverPad.ne:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.ne:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX(-15deg); }
.HoverPad.ne:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ(-25deg); }

.HoverPad.nw:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.nw:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX( 15deg); }
.HoverPad.nw:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ( 25deg); }

.HoverPad.sw:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.sw:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX( 15deg); }
.HoverPad.sw:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ( 35deg); }

.HoverPad.se:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY(-15deg); }
.HoverPad.se:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX(-15deg); }
.HoverPad.se:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ(-35deg); }

/* Straight */
.HoverPad.nt:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY( 15deg); }
.HoverPad.st:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY(-23deg); }

.HoverPad.et:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY(-12deg); }
.HoverPad.et:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX( -15deg); }
.HoverPad.et:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ(-63deg); }

.HoverPad.wt:hover ~ .planeBox .rotaBox .rota.cY { transform: rotateY(-12deg); }
.HoverPad.wt:hover ~ .planeBox .rotaBox .rota.cX { transform: rotateX(  15deg); }
.HoverPad.wt:hover ~ .planeBox .rotaBox .rota.cZ { transform: rotateZ( 63deg); }














.StarCenterPoint {
	width: 0; height: 0;
	top: 50%;	
	left: 50%;
	box-sizing: border-box;	

	
	animation-name: StarSpinAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: running;
	/* this is what needs to be countered by the balls GrowSpeed == BezierCurve */
	animation-duration: 936.236s;
	}
	
.Entity {
	box-sizing: border-box;	
	border: 0px solid green;
	border-radius: 30%;	
	width: 1%; 
	padding-bottom: 1%; 
	
	transform: translateX(0vw) scale(0,0);
	}
	
.Enemy {
	
	background-image: url(pics/tinkletinkle.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	
	
	animation-name: StarPathAni;
	animation-duration: 15s;
	animation-timing-function: cubic-bezier(0.345, 0.095, 0.905, 0.440);	
	animation-iteration-count: infinite;
	animation-play-state: running;
	}

.StarFire:nth-of-type(1) { transform: rotate( 72deg); }
.StarFire:nth-of-type(2) { transform: rotate(216deg); }
.StarFire:nth-of-type(3) { transform: rotate(360deg); }
.StarFire:nth-of-type(4) { transform: rotate(144deg); }
.StarFire:nth-of-type(5) { transform: rotate(288deg); }

.StarFire:nth-of-type(1) > .Enemy { animation-delay:  1.0s; animation-duration:  9s; }
.StarFire:nth-of-type(2) > .Enemy { animation-delay:  2.0s; animation-duration: 10s; }
.StarFire:nth-of-type(3) > .Enemy { animation-delay:  3.0s; animation-duration: 11s; }
.StarFire:nth-of-type(4) > .Enemy { animation-delay:  8.0s; animation-duration:  8s; }
.StarFire:nth-of-type(5) > .Enemy { animation-delay: 10.5s; animation-duration: 7.5s; }


.StarFire {
	border-top: 0px solid red;		
	width: 100vw;
	left: -50vw;
	}

@keyframes StarPathAni { 
	  0%   {  transform: translateX(  0vw) rotateZ(  0deg)  scale(0,0); opacity: 1.0; }
	 80%   {  transform: translateX( 80vw) rotateZ(180deg)  scale(1,1); opacity: 1.0; }
	100%   {  transform: translateX(100vw) rotateZ(180deg)  scale(1,1); opacity: 0.0; }
	}	
	
@keyframes StarSpinAni { 
	  0%   {  transform: rotate(0deg);  }
	100%   {  transform: rotate(360deg);   }
	}