html, body
{ 
	margin:0px;
	padding:0px;
	font-size:15px;
	font-family: sans-serif;
	height: 100%;
	overflow: hidden;
}

.clearfix
{
 clear:both;
 display:block;
}

a
{
 color: #000000;
}

#logo_wrapper
{
 width:100vmin;
 height:100vmin;
 position:relative;
 top:50%; left:50%;
 transform:translateX(-50%) translateY(-50%);
 -moz-transform:translateX(-50%) translateY(-50%);
 -o-transform:translateX(-50%) translateY(-50%);
 -webkit-transform:translateX(-50%) translateY(-50%);
}

#logo
{
 position:absolute;
 top:0px;
 left:0px;
 bottom:0px;
 right:0px;
 transform:rotate(-10deg);
 -moz-transform:rotate(-10deg);
 -webkit-transform:rotate(-10deg);
 -o-transform:rotate(-10deg);
}

#logo #ball_center
{
 width:8.7%;
 cursor:pointer;
 z-index:3;
}

.ball
{ 
 width:6%; position:absolute; top:50%; left:50%; background:#000; z-index:2; cursor:pointer;
 -moz-transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);
 -moz-border-radius:50%; -webkit-border-radius:50%; -o-border-radius:50%; border-radius:50%; 
 -webkit-transition: all 500ms cubic-bezier(0.720, 0, 0.290, 1);
 -webkit-transition: all 500ms cubic-bezier(0.720, -0.310, 0.290, 1); 
 -moz-transition: all 500ms cubic-bezier(0.720, -0.310, 0.290, 1); 
 -o-transition: all 500ms cubic-bezier(0.720, -0.310, 0.290, 1); 
 transition: all 500ms cubic-bezier(0.720, -0.310, 0.290, 1); 
}

.ball:after{ padding-top:100%; display:block; content:''; }

svg, .ball
{
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#ball0.out{ transform:translateX(-534%) translateY(430%); -moz-transform:translateX(-534%) translateY(430%); -webkit-transform:translateX(-534%) translateY(430%); -o-transform:translateX(-534%) translateY(430%); }
#ball1.out{ transform:translateX(-720%) translateY(-43%); -moz-transform:translateX(-720%) translateY(-43%); -webkit-transform:translateX(-720%) translateY(-43%); -o-transform:translateX(-720%) translateY(-43%); }
#ball2.out{ transform:translateX(-534%) translateY(-529%); -moz-transform:translateX(-534%) translateY(-529%); -webkit-transform:translateX(-534%) translateY(-529%); -o-transform:translateX(-534%) translateY(-529%); }
#ball3.out{ transform:translateX(-50%) translateY(-710%); -moz-transform:translateX(-50%) translateY(-710%); -webkit-transform:translateX(-50%) translateY(-710%); -o-transform:translateX(-50%) translateY(-710%); }
#ball4.out{ transform:translateX(430%) translateY(-529%); -moz-transform:translateX(430%) translateY(-529%); -webkit-transform:translateX(430%) translateY(-529%); -o-transform:translateX(430%) translateY(-529%); }
#ball5.out{ transform:translateX(615%) translateY(-50%); -moz-transform:translateX(615%) translateY(-50%); -webkit-transform:translateX(615%) translateY(-50%); -o-transform:translateX(615%) translateY(-50%); }
#ball6.out{ transform:translateX(430%) translateY(430%); -moz-transform:translateX(430%) translateY(430%); -webkit-transform:translateX(430%) translateY(430%); -o-transform:translateX(430%) translateY(430%); }

.arm{ width:3.5vmin; height:22.129vmin; position:absolute; cursor:pointer; z-index:1; }
.arm svg > path{ fill:#000; }
#arm0{ top:55%; left:32%; 	transform:rotateZ(225deg); -moz-transform:rotateZ(225deg); -webkit-transform:rotateZ(225deg); -o-transform:rotateZ(225deg); }
#arm1{ top:39.4%; left:25.5%;	transform:rotateZ(270deg); -moz-transform:rotateZ(270deg); -webkit-transform:rotateZ(270deg); -o-transform:rotateZ(270deg); }
#arm2{ top:23.3%; left:32%;	transform:rotateZ(315deg); -moz-transform:rotateZ(315deg); -webkit-transform:rotateZ(315deg); -o-transform:rotateZ(315deg); }
#arm3{ top:16%; left:48.25%;	transform:rotateZ(0deg); -moz-transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg); -o-transform:rotateZ(0deg); }
#arm4{ top:23.3%; left:64.4%;	transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -webkit-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); }
#arm5{ top:39.4%; left:71%;	transform:rotateZ(90deg); -moz-transform:rotateZ(90deg); -webkit-transform:rotateZ(90deg); -o-transform:rotateZ(90deg); }
#arm6{ top:55%; left:64.4%;	transform:rotateZ(135deg); -moz-transform:rotateZ(135deg); -webkit-transform:rotateZ(135deg); -o-transform:rotateZ(135deg); }

#arm0.out > path, #logo_wrapper #ball0.out{ background:#3c6595; fill:#3c6595; }
#arm1.out > path, #logo_wrapper #ball1.out{ background:#138818; fill:#138818; }
#arm2.out > path, #logo_wrapper #ball2.out{ background:#be1919; fill:#be1919; }
#arm3.out > path, #logo_wrapper #ball3.out{ background:#c9df11; fill:#c9df11; }
#arm4.out > path, #logo_wrapper #ball4.out{ background:#00cbd2; fill:#00cbd2; }
#arm5.out > path, #logo_wrapper #ball5.out{ background:#e8b006; fill:#e8b006; }
#arm6.out > path, #logo_wrapper #ball6.out{ background:#e806e5; fill:#e806e5; }