/* groups of gizmo elt */
#gizmoGroup{
	position:absolute;
	top:1em;
	right:3em;
	text-align:center;
	opacity:0.25;
	transition:opacity 0.5s;
	
	/* filter:url(#gizmoLighting); */
}
#gizmoGroup:hover{
	opacity:1;
}
#gizmoGroup.hidden{
	opacity:0;
	transition:opacity 1.5s 0.5s;
	pointer-events:none;
}
#groupZoomCenter{
	margin-top:8em;
	/* width:0; */
	height:0;
	position:relative;
	text-align:center;
}

/* gizmo up and down arrow */
#gizmoUpDown{
	position:absolute;
	right:0em;
	vertical-align:middle;
	width:80px;
	transform: translate(0,-50%);
}

.arrow{
	display:inline-block;
	border-radius:100%;
	background-color:#333333;
	cursor:pointer;
	border:1px solid white;
	width: 1.5em; 
	height: 1.5em; 
}
.arrow img{
	width:90%;
	pointer-events:none;
}
.arrow:hover{
	background-color:#5dd5b0;
}
.hidden .arrow{opacity:0;}
.visible .arrow{opacity:1;}


/* main gizmo */

#gizmo{
	/* stroke:rgba(17; 80; 100; 0.6); */
	width: 9em;
	cursor: pointer;
}

#ButtonBot .inner{
	fill:#eee;
	stroke-width: 0;
}
#ButtonTop .inner{
	stroke:#FFF;
	stroke-opacity:1;
	stroke-width:1;
}
.gizmoButton{
	transition:transform 2s, opacity 1s;
	stroke:#222;
	stroke-opacity:0.5;
	stroke-width:0;
	fill:url(#radgrad);
	-webkit-filter:url(#gizmoLighting);
	filter:url(#gizmoLighting);
}
.gizmoButton:hover{
	stroke: #FFF;
	stroke-width: 1;
	stroke-opacity:1;
	fill:url(#radgradOver);
	/* filter:url(#gizmoFilterHover); */
}

#circleGizmo{
	stroke: #EEE;
    stroke-width: 2;
    stroke-opacity: 1;
    fill: transparent;
	transition:transform 1.5s;
	transform:scale(1);
	transform-origin:50% 50%;
}
.hidden #circleGizmo{
	transition:transform 2.0s 0.1s;
	transform:scale(0.1);
}
#northCircleRadius{
	fill:#FFF;
	stroke-width: 0;
}
#northSVG{
	fill:#333333;
	fill-opacity: 1;
    cursor: pointer;
    stroke-width: 0;
	opacity:1;
	transition:opacity 0.5s 1s;
}
#northSVG:hover{
	fill:#5dd5b0;
}
.hidden #northSVG{
	opacity:0;
	transition:opacity 0.3s;
}



/* hidden config animation */
.hidden .botRow{transform:rotate(-405deg) scale(0.5);} /*-225 495 */
.hidden .topRow{transform:rotate(675deg) scale(0.2);} /* -405 675 */

/* visible config animation */
.visible .top{transform:rotate(0deg) scale(1);}
.visible .right{transform:rotate(90deg) scale(1);}
.visible .bottom{transform:rotate(180deg) scale(1);}
.visible .left{transform:rotate(270deg) scale(1);}


/* for the Gizmo zoom */
#gizmoZoom { 
	width: 0.3em; 
	height: 12em; 
	margin: auto; 
	background-color: #FFF;
	text-align:center;
	transform: translate(0%,-50%);
	opacity:1;
	transition:opacity 1s;
}
.hidden #gizmoZoom{
	opacity:0;
}

.zoomButton{
	font-size:1em; 
	width: 1.2em; 
	height: 1.2em; 
	border-radius:100%; 
	background-color:#333333;
	color:#FFF;
	cursor:pointer;
	font-weight:bold;
	line-height:100%;
	border:1px solid #FFF;
	left: 2px;
}
.zoomButton:hover{
	background-color: #5dd5b0;
}

#zoomBall{
	width: 1.5em; 
	height: 1.5em; 
	border-radius:100%; 
	background:#333333;
	border:1px solid #FFF;
	cursor:pointer;
}
#zoomBall:hover{
	background: #5dd5b0;
}