* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
	font-family: 'Lato', helvetica, serif;
	background: #eee;
}


p {
	font-size: 18px;
}

.text {
	padding: 3em;
	max-width: 970px;
	margin: 0 auto;
}

table {
	margin: 50px 0;
}

td {
	color: #696969;
}

span {
	font-size: 15px;
}

#states {
	height: 500px;
}

#killers {
	height: 400px;
	margin-bottom: 1.2em;
}

#map {
	height: 500px;
	width: 100%;
	/*position: relative;*/
	/*display: inline-block;*/
	float: left;
	transition: width 0.5s ease;
}

#info {
	color: black;
	background: #f7f7f7;
	width: 0;
	height: 0;
	overflow: auto;
	/*display: inline-block;*/
	padding: 15px;
	/*position: absolute;*/
	float: right;
	display: none;
	transition: width 0.5s ease;
}

#map.panel-open {
	width: 75%;
	margin-left: 0;
}

#info.panel-open {
	width: 20%;
	height: 500px;
	display: block;
}

#killers {
	width: 100%;
}

.political-group {
	fill: #d62728;
}

.police-government {
	fill: #1f77b4;
}

.unknown {
	fill: #8c564b;
}

.paramilitary-group {
	fill: #17becf;
}


.local-residents {
	fill: #e377c2;
}

.government {
	fill: #bcbd22;
}

.legend {
    line-height: 22px;
    font-size: 14px;
    font-family: 'Lato', helvetica, serif;
    color: black;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.leaflet-bottom {
	background-color: #dedede;
	opacity: 0.9;
	padding: 10px;
}

.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

rect {
	fill: #b7446f;
}

.tick {
	font-size: 1.2em;
}

.state-text, .killer-text {
	font-size: 1.2em;
}

h3.chart-title {
	text-align: center;
	margin-top: 35px;
}

p.footnote {
	font-size: 1em;
}

#states {
	margin-bottom: 1.5em;
}

h1.text-center {
	margin-bottom: 1.5em;
}

@media only screen and (max-width: 640px) {
	#map {
		width: 100%;
		float: none;
	}

	#info {
		width:100%;
		margin: 20px 0;
		height: auto;
		float: none;
	}

	#map.panel-open {
		width: 100%;
	}

	#info.panel-open {
		width: 100%;
		display: block;
		height: auto;
	}

	h3.chart-title {
		font-size: 18px;
	}

	#states {
		height: 400px;
		margin-bottom: .6em;
	}

	#killers {
		height: 300px;
	}
}


@media only screen and (max-width: 480px) {
	#map {
		width: 100%;
		float: none;
	}

	#info {
		width:100%;
		margin: 20px 0;
		height: auto;
		float: none;
	}

	#map.panel-open {
		width: 100%;
	}

	#info.panel-open {
		width: 100%;
		display: block;
		height: auto;
	}

	h3.chart-title {
		font-size: 18px;
	}

	#states {
		height: 300px;
		margin-bottom: .6em;
	}

	#killers {
		height: 200px;
	}
}