body {
	background-color: #FAFAFA;
}

h4 {
	text-align: center;
	font-family: Verdana;
	font-weight: unset;
}

#wrapper {
	width: 860px;
	margin-left: auto;
	margin-right: auto;
}

#loadingSpinner {
	-webkit-transform: translate(410px, 250px);
	-ms-transform: translate(410px, 250px);
	transform: translate(410px, 250px);
}
.loadingText {
	font-family: Verdana;
}

.loc0points .male {
	fill: #71E34B;
	stroke: #71E34B;
}
#location0Controls .male {
	color: #71E34B;
}
.loc1points .male {
	fill: #4BBDE3;
	stroke: #4BBDE3
}
#location1Controls .male {
	color: #4BBDE3;
}

.loc0points .female {
	fill: #E3714B;
	stroke: #E3714B;
}
#location0Controls .female {
	color: #E3714B;
}
.loc1points .female {
	fill: #BD4BE3;
	stroke: #BD4BE3;
}
#location1Controls .female {
	color: #BD4BE3;
}

.loc0points .both {
	fill: #339;
	stroke: #339;
}
#location0Controls .both{
	color: #339;
}
.loc1points .both {
	fill: #C33;
	stroke: #C33;
}
#location1Controls .both {
	color: #C33;
}

.line {
	fill-opacity: 0;
}

.pointDetails {
	fill: #EEE;
	display: none;
}
.pointDetails text {
	font-family: Verdana;
	font-size: 8px;
	stroke: none;
	fill: #111;
}
.point:hover .pointDetails {
	display: block
}


#controls>.controlsBlock {
	width: 430px;
	position: relative;
	float: left;
	font-family: Verdana;
}

.locationSelect {
	margin-left: 60px;
}

.checkboxes {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 200px;
	font-size: 12px;
}

.axislabel {
	font-family: Verdana;
	fill: #000;
	font-size: 13px;
}

#description {
	font-size: 14px;
	padding: 4px 65px;
	text-align: justify;
}




/* Loading animation */

.bouncingBallPosition {
	-webkit-animation: bounce 1.2s infinite;
	animation: bounce 1.2s infinite;;
	fill-opacity: 0;
}

.bouncingBall {
	fill: #bea8ea;
}

@keyframes bounce {
	0% {
		fill-opacity: 1;
		transform: translate(0px, 0px) scale(1, 1);
		animation-timing-function: cubic-bezier(.65,.02,.98,.53);
	}
	43% {
		transform: translate(0px, 15px) scale(.8, 1.2);
	}
	50% {
		transform:  translate(0px, 15px) scale(1.5, .5);
	}
	57% {
		transform: translate(0px, 15px) scale(.8, 1.2);
		animation-timing-function: cubic-bezier(.02,.43,.35,.98);
	}
	100% {
		fill-opacity: 1;
		transform: translate(0px, 0px) scale(1, 1);
	}
}