.Ring{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 61.8vmin;
    width: 61.8vmin;
    transform-style: preserve-3d;
    animation: SlideRight 1s linear;
    pointer-events:none;
    z-index: 10;
    user-select:none;
}

.Ring .Plane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    list-style-type: none;
    margin: auto;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    pointer-events:none;
}

.Ring .Plane li {
    position: absolute;
    height: 50%;
    width: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-origin: bottom;
    box-sizing: border-box;
    transform-style: preserve-3d;
    pointer-events:none;
}

.Ring .Plane li > div {
    position: absolute;
    height: 1vmin;
    width: 1vmin;
    display: inline-block;
    top: 0;
    left: 0;
    text-align: center;
    transform: translateX(-50%)translateY(-12.5vmin);
    //animation: Undulate 7s linear infinite;
    border-radius: 50px;
    transform-style: preserve-3d;
    pointer-events:all;
}

.Ring .Plane li > div > div {
    position: absolute;
    height: 9vmin;
    width: 11vmin;
    background-color: rgba(100,100,100,.75);
    display: inline-block;
    top: -4vmin; /*-(li>div>div).height/2+(li>div).height/2*/
    left: -5vmin;
    border: 1px dashed #CCC;
    text-align: center;
    padding-top: calc(50% + 0.5vmin);
    transform: translateZ(10px);
    transform-style: preserve-3d;
    border-radius: 1vmin;
    box-shadow: 0 0 1vmin #333, 0 0 8vmin #444;

    //font-family: 'Courier New';
    color: #EEE;
    text-shadow: 0 0 2px #333;
    animation: RingLoad 1s;
}


.Ring .Plane:nth-child(1) li > div>div { animation-delay: .6s }
.Ring .Plane:nth-child(2) li > div>div { animation-delay: .7s }
.Ring .Plane:nth-child(3) li > div>div { animation-delay: .8s }
.Ring .Plane:nth-child(4) li > div>div { animation-delay: .85s }
.Ring .Plane:nth-child(5) li > div>div { animation-delay: .9s }
.Ring .Plane:nth-child(6) li > div>div { animation-delay: .95s }
.Ring .Plane:nth-child(7) li > div>div { animation-delay: 1.0s }
.Ring .Plane:nth-child(8) li > div>div { animation-delay: 1.1s }
.Ring .Plane:nth-child(9) li > div>div { animation-delay: 1.2s }

.Ring .Plane li > div> div:hover {
   // zoom:133%;
transform: scale(1.33)translateZ(500px);
transition: transform .2s;
box-shadow: 0 0 1vmin #333, 0 0 4vmin #444;
//width: 21vmin;
cursor: pointer;
color: #FFF;
}
.Ring .Plane.Selected li > div> div{
background-color: rgba(75,75,75,.75);
border: 1px dashed #333;
}


#fibContainer{
position:absolute;
width:100vw;
height:100vh;
overflow: hidden;
pointer-events:none;
left: calc((100vmin - 100vw)/2);
top: calc((100vmin - 100vh)/2);
transform: translateZ(-2px);
}

.SphereRing{
position:absolute;
width:200vmax;
height:200vmax;
transform: translateZ(-30px);
top: calc((100vh - 200vmax)/2) ;
left: calc((100vw - 200vmax)/2) ;
pointer-events: none;
}

.Fib-Background{
opacity: 0.15;
//z-index:-1;
animation: RotateSphereContainer 2s linear infinite;
}

.SecondaryRing{
opacity: 0.15;
//z-index:-1;
animation: RotateSphereContainer 500s linear infinite;
}

.WaveFormRing{
opacity: 0.5;
transform: translateZ(10px);
//animation: RotateSphereContainer 500s linear infinite;
}

.EventRingBack{
opacity: 0.5;
transform: translateZ(10px);

}

.EventRing{
opacity: 0.5;
transform: translateZ(10px);

}

.TextInAndOut{
opacity: 0.85;
transform: translateZ(10px);
}


#fibContainer path{
stroke-linecap: square;
stroke: white;
stroke-width: 0.5px;
}

#fibContainer svg{
display: none;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position:absolute;
opacity: 0.7;
}