styles.css

body {
	position: relative;
}

.container {
	width: 100%;
	position: relative;
}

.container .panel-module {
	/*width: 50%;*/
	/*float: left;*/
	/*min-width: 850px;*/
}

/************************ Map start ************************/
	.map-panel {
		position: relative;
		height: 1100px;
	}

	.map-container {
		margin-top: 2%;
		margin-left: -5%;
	}

	.map-container h1 {
		margin-left: 12%;
	}

	.control-panel-module {
		/*float: left;*/
		/*width: 400px;*/
	}

	.map-section8 {
		margin-top: 2%;
		/*margin-left: -11%;*/
	}

	.map-section8 h1, .map-section8 h3, .map-section8 h4 {
		color: #000;
	}

	.map-checkbox {
		margin-top: 5%;
	}

	.map-section8-text {
		font-size: 1rem;
		color: #000;
	}

	.map-section8-desp {
		color: #000;
		margin-top: -4%;
	}

	.map-selection-years {
		/*width: 500px;*/
		margin-top: 5%;
		text-align: left;
		margin-left: 5%;
		color: #000;
	}

	.map-selection-years h4 {
		margin-left: 5px;
	}

	.map-selection-years-panel {
		float: left;
		margin-right: 10px;
		margin-left: 5px;
	}

	.map-selection-years label::before, .selection-years label::after {
		color: #000;
	}

	.map-sort-by-value {
		margin-bottom: 5%;
	}

	.map-sort-by-obj {
		width: 600px;
		margin-top: 2%;
		color: #000;
		margin-left: 5%;
	}

	.map-sort-by-obj-text p {
		margin-top: 2%;
		font-size: 1.5rem;
		float: left;
	}

	.map-bubble {
		fill-opacity: .5;
		stroke: #000;
 		stroke-width: .5px;
	}

	#legend-details-id {
		width: 900px;
	}

	.legend-details li{
		display: inline;
	}

	.legend-details li img{
		height: 200px;
	}

	#map-details-id {
		/*margin-left: 2%;*/
	}

	.map-details {
		/*margin-left: 5%;*/
		margin-top: 2%;
	}

	.map-details ul {
		margin-left: -6%;
		list-style-type: none;
		display: flex;
		justify-content: space-around;
	}

	.map-details h4 {
		color: #000;
		display: inline-block;
		margin-top: 0;
	}

	#map-details-ct, #map-details-ng, #map-details-inc, #map-details-white, #map-details-section8 {
		margin-left: 5%;
	}

	.my-legend {
		text-align: center;
	}

	.my-legend .legend-title {
		margin-bottom: 8px;
		font-weight: bold;
		font-size: 150%;
	}

	.my-legend .legend-title-little {
		margin-bottom: 8px;
		font-weight: bold;
		font-size: 90%;
	}

	.my-legend .legend-scale ul {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		text-align: center;
	}

	.my-legend .legend-scale ul li {
		display: block;
		float: left;
		width: 50px;
		margin-bottom: 6px;
		font-size: 60%;
		list-style: none;
		text-align: center;
	}

	#sliderContainer {
		text-align: center;
		position: relative;
		top: 800px;
	}

	.bubble {
		fill-opacity: .5;
		stroke: #000;
		stroke-width: .5px;
	}

	#pureMap {
		margin-left: 15%;
		position: absolute;
		display: block;
	}
	#electionMap {
		margin-left: 15%;
		position: absolute;
		display: none;
	}
	#incomeMap {
		margin-left: 15%;
		position: absolute;
		display: none;
	}
	#raceMap {
		margin-left: 15%;
		position: absolute;
		display: none;
	}
/************************ Map End ************************/



/************************ Map Control Panel Start ************************/
	.map-control-panel {
		padding-left: 5%;
		width: 100%;
		background-color: #dddddd;
	}
/************************ Map Control Panel End ************************/



/************************ Sort map part start ************************/
	.axis path,
	.axis line {
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}

	.bar {
		fill: steelblue;
	}

	.x.axis path {
		display: none;
	}

	.control-panel {
		float: left;
		margin-left: 25px;
		width: 100%;
	}

	.phil-average {
		float: right;
	}

	.chart-panel {
		/*width: 1000px;*/
		position: relative;
	}

	.chart-panel svg {
		min-width: 800px;
		/*width: 800px;*/
		height: auto;
	}

	.chart-panel h2 {
		margin-top: 5%;
	}

	.chart-2012 {
		position: relative;
		display: block;
		margin: 0 auto;
		top: 0;
		left: 0;
	}

	.chart-2016 {
		position: relative;
		display: none;
		margin: 0 auto;
		top: 0;
		left: 0;
	}

	div.tooltip {
		position: absolute;
		text-align: center;
		width: 120px;
		height: 50px;
		padding-top: 10px;
		font: 12px sans-serif;
		background: #000;
		opacity: 0.7;
		border: 0px;
		border-radius: 8px;
		pointer-events: none;
		color: #000;
	}

	.sort-by-obj {
		width: 800px;
		margin-top: 2%;
		color: #000;
		margin-left: 5%;
	}

	.sort-by-obj-text p {
		margin-top: 2%;
		font-size: 1.5rem;
		float: left;
	}

	.sort-by-value {
		width: 14% !important;
		margin: 0 auto !important;
	}
/************************ Sort map part end ************************/
	.selected {
		fill: red;
	}

/************************ Team part end ************************/
	section#team {
		background-color: #5b5454;
	}
	section #team-heading h2.section-heading, section #team-heading h3.section-subheading {
		color: #ffffff;
	}