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

.GameFrame {
	display: block;
	position: absolute;	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	text-align:center;
	overflow: hidden;
	}
	
.TheDot {
	position: absolute;		
	top: 50%;
	left: 5%;
	width:  90%;  		
	border-top: 1px solid blue;	
	}

.TheDot.Horizontal  { width: 90%; left: 5%; }
.TheDot.Horizontal .TheDot.Vertical { width: 350%; left: -125%; }
	
.TheDot:before {
	content: ""; position: absolute;
	width: 1px; margin-left: -1px; margin-top: -50%;
	padding-bottom: 100%; background-color: blue;
	}

.TheVoid {
	display: block;
	position: absolute;
	top:  0%;
	left: 0%;
	width: 100%;
	height:  0%;	
	/*margin-top: -1px;*/
	border-top: 1px solid lime;	
	}	

.TheVoid {
	animation-name: SteeringAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-play-state: paused;	
	}

.Reverse { animation-direction: reverse; }

/* The Sizes and positions of the children, here evenly: next 1/2 & only each first */
.Prima   > .Secunda,
.Secunda > .Tertia  { top:  0%; left: 50%; width: 50%; height: 0%; }
.Secunda > .Tertia  { left: -25%; }

.TheDot.StopDot .Prima > .Secunda  { top:  0%; left: -150%; width: 200%; height: 0%; }
.TheDot.StopDot .Secunda > .Tertia { top: 100%; left: 75%; }

/*
.TheDot.StopDot .Tertia.Down,
.TheDot.StopDot .Tertia.Left { margin-left: -15%; }
*/


/* Half the Size ==> Half the Speed 4 Straight Lines */
.TheVoid, .Tertia	{ animation-duration: 12.0s; }
.Secunda 			{ animation-duration:  6.0s; }

/* Initial Angle ==> relative to speed above!  Speed/4 = 90° , only each first */
.TheDot  > .TheVoid { animation-delay:    -9.0s; }
.Secunda > .Tertia,
.TheDot.StopDot > .TheVoid,
.TheDot.StopDot .Secunda,
.TheDot.StopDot .Prima.Up,
.TheDot.StopDot .Prima.Rite { animation-delay: -3.0s; }
.TheDot.StopDot .Prima.Up:nth-of-type(2),
.TheDot.StopDot .Prima.Rite:nth-of-type(2),
.TheDot.StopDot.Vertical .Prima.Up { animation-delay: 0.0s; }
.TheDot.StopDot .Prima.Down,
.TheDot.StopDot .Prima.Left,
.TheDot.Vertical .Prima.Up { animation-delay: -6.0s; }



.StopBlock { 
    position: absolute;
    display: block;
    width: 130%;
    padding-bottom: 130%;
    /*border: 0px solid green;*/
	margin-top: -65%;		
	animation-name: StopBlockAni;
	animation-iteration-count: infinite;
	animation-timing-function: linear;	
	animation-timing-function: steps(2);	
	animation-play-state: running;
	animation-duration:  0.2s;
	animation-direction: reverse;	
	transform: scale(1.2, 1.2);
	}

.TheDot.StopDot .StopBlock:nth-of-type(2) { animation-direction: normal; }	
	
.TheDot.Vertical   .StopBlock:nth-of-type(1) { margin-left:  240%; }
.TheDot.Vertical   .StopBlock:nth-of-type(2) { margin-left: -270% }
.TheDot.Horizontal .StopBlock:nth-of-type(1) { margin-left:  290%; }
.TheDot.Horizontal .StopBlock:nth-of-type(2) { margin-left: -315%; }

.TheDot.Vertical   .StopBlock:nth-of-type(1):hover { margin-left:  200%; }
.TheDot.Vertical   .StopBlock:nth-of-type(2):hover { margin-left: -220%; }
.TheDot.Horizontal .StopBlock:nth-of-type(1):hover { margin-left:  250%; }
.TheDot.Horizontal .StopBlock:nth-of-type(2):hover { margin-left: -250%; }

.TheDot.StopDot { z-index: 999; 					width: 12vmin; right: 16vmin; bottom: 20vmin; left: auto;  top: auto;  }
.HoverPad 		{ z-index: 936; position: absolute; width: 10vmin; 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: 2.0vmin;
	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: 4.8vmin; margin-bottom: 1.9vmin; 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:  3vmin; height:  3vmin; left:   -1.5vmin; top:   -1.5vmin; }	
.HoverPad.DeadZone:before { width: 30vmin; height: 30vmin; left: -15vmin; top: -15vmin; }
.HoverPad.DeadZone:active::before { display: none; }

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


.HoverPad.ne:hover ~ .TheDot .TheVoid.Up,   .HoverPad.ne:hover ~ .TheDot .TheVoid.Rite,
.HoverPad.nw:hover ~ .TheDot .TheVoid.Up,   .HoverPad.nw:hover ~ .TheDot .TheVoid.Left,
.HoverPad.sw:hover ~ .TheDot .TheVoid.Down, .HoverPad.sw:hover ~ .TheDot .TheVoid.Left,
.HoverPad.se:hover ~ .TheDot .TheVoid.Down, .HoverPad.se:hover ~ .TheDot .TheVoid.Rite,
.HoverPad.nt:hover ~ .TheDot .TheVoid.Up,   .HoverPad.et:hover ~ .TheDot .TheVoid.Rite,
.HoverPad.st:hover ~ .TheDot .TheVoid.Down, .HoverPad.wt:hover ~ .TheDot .TheVoid.Left  { animation-play-state: running; }



.HoverPad.ne:hover ~ .TheDot .TheUfo { transform: rotate(360deg); }
.HoverPad.nw:hover ~ .TheDot .TheUfo { transform: rotate(270deg); }
.HoverPad.sw:hover ~ .TheDot .TheUfo { transform: rotate(180deg); }
.HoverPad.se:hover ~ .TheDot .TheUfo { transform: rotate( 90deg); }

.HoverPad.nt:hover ~ .TheDot .TheUfo { transform: rotate(315deg); }
.HoverPad.st:hover ~ .TheDot .TheUfo { transform: rotate(135deg); }
.HoverPad.et:hover ~ .TheDot .TheUfo { transform: rotate(405deg); }
.HoverPad.wt:hover ~ .TheDot .TheUfo { transform: rotate(225deg); }



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

@keyframes StopBlockAniC { 
	  0%   {  left: -2%; }
	100%   {  left:  2%;}
	}
	
@keyframes StopBlockAni { 
	  0%   {  transform: translateX(-2%); }
	100%   {  transform: translateX( 2%);}
	}

	
.ShadowBox {
	position: absolute;
	padding: 5vmin;
	margin-top: -5vmin;
	margin-left: -5vmin;
	border-radius: 50%;

	overflow: hidden;
	}

	
.ShadowBox:after {
	content: "";
	position: absolute;
	display: block;
	width: 150%;
	height: 150%;
	top: -42%;
	left: -10%;
	border-radius: 50%;
	box-shadow: inset 0vmin 0vmin 7vmin rgba(0,0,0,0.35);
	}
	
.ShadowBox:before {
	z-index: 99;
	content: "";
	position: absolute;
	display: block;
	width: 170%;
    height: 170%;
    top: -15%;
    left: -62%;
    border-radius: 50%;
	border-radius: 50%;
	box-shadow: inset 0vmin 0vmin 7vmin rgba(255,235,205,0.5);
	}		
	
.ShadowBox:hover .BallBox { animation-play-state: running; }	

.TheUfo {
	position: absolute;
	width: 100%;
	padding-bottom: 100%;
	top: 0%;
	left: 0%;	
	border-radius: 50%;
	overflow: hidden;	
	transform: rotate( 315deg);	
	/*transition: transform 0.5s linear 0s;*/
	}	
	

.BallBox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;	
	border-radius: 50%;
	border: 0px solid red;	
	transform: rotate(45deg);
	}	
	
.HalfCabConti {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0%;
	left: 0%;
	overflow: hidden;
	}

.TheBall {
	position: absolute;
	width: 200%;
	padding-bottom: 200%;	
	border-radius: 50%;
	animation-name: SpinningAni;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.432, 0.018, 0.720, 0.540);	
	animation-play-state: paused;	
	animation-duration: 2s;
	}
	
.HoverPad.dia:hover ~ .TheDot .TheBall,
.HoverPad.lin:hover ~ .TheDot .TheBall { animation-play-state: running; }

.HalfCabConti:nth-of-type(2) { transform: rotate(180deg); left: 50%; margin-left: -1px; animation-timing-function: cubic-bezier(0.018, 0.432, 0.540, 0.720); }	
.HalfCabConti:nth-of-type(2) > .TheBall { animation-direction: reverse;  }

.TheBall:nth-of-type(2) { background-color:   blue; }
.TheBall:nth-of-type(1) { background-color: orange; }

.HalfCabConti.Left > .TheBall:nth-of-type(2) { animation-delay:  0s; }
.HalfCabConti.Left > .TheBall:nth-of-type(1) { animation-delay:  1s; }
.HalfCabConti.Rite > .TheBall:nth-of-type(2) { animation-delay: -1s; }
.HalfCabConti.Rite > .TheBall:nth-of-type(1) { animation-delay:  0s; }

/* more stable => more load.. */
@keyframes SpinningAni {	
	  0%       { width: 200%; left:   0%; z-index:  1; }
	 50%       { width:   0%; left: 100%; z-index:  1; }
	 50.0001%  { width: 200%; left:   0%; z-index: -1; }
	100%       { width: 200%; left:   0%; z-index: -1; }
}

@keyframes SpinningAniD {	
	  0%       { transform: scale(1,1); z-index:  1; }
	 50%       { transform: scale(0,1); z-index:  1; }
	 50.0001%  { transform: scale(1,1); z-index: -1; }
	100%       { transform: scale(1,1); z-index: -1; }
}

#WireFrame:checked ~ .TheDot .ShadowBox .HalfCabConti .TheBall { background-color: rgba(0,0,0,0) !important; }
#WireFrame:checked ~ .TheDot .ShadowBox .TheBall {	top: -1px; border: 1px solid blue; }
/*
#WireFrame:checked ~ .TheDot.StopDot .StopBlock { background-color: rgba(40,120,0,0.4); }

*/

.TheDot  { border: none;}
.TheDot:before { display: none; }
	
/* +++++++++++++++++++++++++++++++++++++++++  4 TESTING +++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.TheVoid.Up,
.TheVoid.Rite { border: none !important; margin-top: 0px; }

.TheDot.StopDot:hover div { border-color: red !important;}

/*
.TheDot.StopDot,
.TheDot.StopDot * { border: none !important;}
.TheDot.StopDot:before { display: none; }
*/
/*
*/
#MechaChecka:checked ~ .TheDot div { border: none; }

.TheDot.StopDot .StopBlock { background-color: rgba(40,120,0,0.4); }
#MechaChecka:checked ~ .TheDot.StopDot .StopBlock { background-color: rgba(40,120,0,0.0); }


.TheDot  { border: none;}
.TheDot:before { display: none; }

/*
.HoverStarter,
.StopBlock { background-color: rgba(40,120,0,0.4); }
*/

/*
.Tertia.Stopper:after { display: block; right: 0; border-radius: 0; width: 100%; padding: 25%; }
*/

/* Visual Aid -- See The Disc! */
/*

.TheVoid:after,
.TheVoid:before	{
	content: "";
	display: none;
	position: absolute;
	}
	
.TheVoid:before	{	
	padding: 50%;
	margin-top: -50%;
	box-sizing: border-box;
	border-radius: 50%;
	}	

.TheVoid:after	{
	padding: 5%;
	top: -1px;
	margin-top: -5%;	
	border: 1px solid orange;	
	box-sizing: border-box;
	border-radius: 50%;
	}

.TheVoid.Rite, .TheVoid.Rite:before, .TheVoid.Rite:after {  border-color: purple; }
.TheVoid.Left, .TheVoid.Left:before, .TheVoid.Left:after {  border-color: orange; }
.Tertia.Left:after { margin-left: 45%; border: 1px solid blue;	border-radius: 15%; }

*/