#map {
	height: 750px;
}

// This style affects both the legend in the bottom left corner
// and the popup in the top right corner of the map
// .info {
// 	font-family: 'Lato', sans-serif;
//     font-size: 14px;
//     line-height: 1.8;
//     padding: 12px;
//     padding-left: 16px;
//     padding-right: 16px;
//     background: white;
//     background-color: white;
//     border-radius: 5px;
//     border: 1px solid grey;
//     max-width: 250px;
//     color: black;
// }

.info {
	background: white;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.8;
	border-radius: 3px;
	color: black;
	border: 2px solid black;
	max-width: 250px;
}

h4 {
	margin-top: 8px;
}

.source {
	margin-top: 8px;
	font-style: italic;
	line-height: 1.4;
}

.legend {
	padding: 16px;
}

.legend i {
	width: 18px;
	height: 18px;
	border: 1px solid black;
	margin-right: 10px;
	float: left;
}

// Gives the legend colors their height
// .legend i {
// 	width: 18px;
// 	height: 18px;
// 	float: left;
// 	margin-right: 8px;
// 	opacity: 0.7;
// 	clear: both;
// 	border: 1px solid #212121;
// }

.legend span,
.legend label {
  display: block;
  width: 50px;
  height: 18px;
  float: left;
  opacity: 0.7;
  text-align: center;
  font-size: 80%
}

.popup {
	background: white;
	padding: 16px;
}

.popup__name,
.popup__pct-wrapper {
	border-bottom: 1px solid black;
}

// .popup__pct-wrapper {
// 	border-bottom: 1px solid black;
// }

.popup__name {
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	padding-bottom: 8px;
	// width: 70%;
}

.popup__year {
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.popup__pct-value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-size: 48px;
	margin: 0;
}

.popup__pct-title {
	margin-bottom: 0;
}