#map-container {
	display: grid;
	grid-template-areas:
		"controls map"
		"legend map";
	grid-template-rows: 50% 50%;
	grid-template-columns: 20% 80%;
	font-size: 0.9em;
	/* border-top: 1px 0px solid #cccccc; */
	/* border-bottom: 1px solid #cccccc; */
}

#webmap-container {
	display: grid;
	grid-template-areas:
		"controls map"
		"legend map";
	grid-template-rows: 45% 55%;
	grid-template-columns: 20% 80%;
	font-size: 0.9em;
	/* border-top: 1px 0px solid #cccccc; */
	/* border-bottom: 1px solid #cccccc; */
}

#webmap-container2 {
	display: grid;
	grid-template-areas:
		"controls map";
	grid-template-columns: 20% 80%;
	font-size: 0.9em;
	/* border-top: 1px 0px solid #cccccc; */
	/* border-bottom: 1px solid #cccccc; */
}


@media all and (max-width: 900px) {
	#map-container {
		display: grid;
		grid-template-areas:
			"map map"
			"controls legend";
		grid-template-rows: 540px 1fr;
		grid-template-columns: 50% 50%;
		/* font-size: 1em; */
	}
}

#climate-container {
	display: grid;
	grid-template-areas:
		"controls map"
		"controls map";
	grid-template-rows: 55% 45%;
	grid-template-columns: 25% 75%;
	font-size: 0.9em;
	/* border-top: 1px 0px solid #cccccc; */
	/* border-bottom: 1px solid #cccccc; */
}

@media all and (max-width: 900px) {
	#climate-container {
		display: grid;
		grid-template-areas:
			"map map"
			"controls controls";
		grid-template-rows: 540px 1fr;
		grid-template-columns: 50% 50%;
		/* font-size: 1em; */
	}
}

#map-controls {
	grid-area: controls;
}
#webmap, #climatemap, #birdsmap {
	grid-area: map;
	height: 540px;
}
#map-legend, #map-legend2 {
	grid-area: legend;
	background-color: #eeeeee;
	/* font-size: 0.88em; */
}

#map-controls, #map-legend {
	padding: 5px;
	background-color: #eeeeee;
	/* min-width: 20%; */
	/* height: 100%; */
	/* flex: 0 1 240px; */
	/* font-size: 0.9em; */
	/* position: relative; */
}

#map-controls p {
	/* background-color: yellow; */
	margin-bottom: 0.75rem;
}

#map-controls2 {
	padding: 5px;
	background-color: #cccccc;
	border-bottom: solid 1px black;
}
#webmap-container3 {
	position: relative;
	border: solid 1px black;
}
#map-legend3 {
	position: absolute;
	bottom: 0px;
	opacity: 0.9;
}


.row-separator {
	border: 1px solid #cccccc;
}

.map-radio {
	padding-right: 0.3em;
	margin: 0 0 0.5rem;
}

.map-select {
	font-family: Verlag, Arial, sans-serif;
	margin: 0 0 0;
	height: 2rem;
	font-size: 0.8rem;
}

.map-select2 {
	font-family: Verlag, Arial, sans-serif;
	margin: 0 0 0;
	margin-right: 10px;
	width: 24%;
}
.map-select3 {
	font-family: Verlag, Arial, sans-serif;
	margin: 0 0 0;
	margin-right: 10px;
	/* width: auto; */
	width: 18%;
}
span.map-select2 {
	display: inline-block;
}
.selectLabel {
	margin-right: 3px;
}

.layer-opacity {
	float: right;
	margin-top: 8px;
	width: 80px;
}


/* #downloads-section h3,  */
#downloads-section h5 {
	margin-top: 1rem;
}

#downloads-section, #related-pubs {
	padding-left: 16px;
	padding-right: 16px;
}


/* WUI and housing webmaps */
#wui-stats-grid {
	display: grid;
	grid-template-areas:
		"data-desc stat-files"
		"data-desc metadata";
		grid-template-rows: auto auto;
		grid-template-columns: 70% 30%;
		grid-gap: 2vw;
}
@media all and (max-width: 900px) {
	#wui-stats-grid {
		display: grid;
		grid-template-areas:
			"data-desc data-desc"
			"stat-files metadata";
			grid-template-rows: auto auto;
			grid-template-columns: 50% 50%;
			grid-gap: 2vw;
	}
}
@media all and (max-width: 550px) {
	#wui-stats-grid {
		display: grid;
		grid-template-areas:
			"data-desc"
			"stat-files"
			"metadata";
			grid-template-rows: auto auto auto;
			grid-template-columns: auto;
			grid-gap: 2vw;
	}
}

#wui-data-description {
	grid-area: data-desc;
}
#wui-stats-files {
	grid-area: stat-files;
}
#wui-metadata {
	grid-area: metadata;
}

#wui-map-grid {
	display: grid;
	grid-template-areas:
		"state gis black90 black00 black10 black2020 white90 white00 white10 white2020";
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
	grid-gap: 1vw;
	align-items: center;
}
@media all and (max-width: 700px) {
	#wui-map-grid {
		grid-template-areas:
			"state black90 black00 black10 black2020"
			"gis white90 white00 white10 white2020";
		grid-template-rows: 50% 50%;
		grid-template-columns: 20% 1fr 1fr 1fr 1fr;
		grid-gap: 1vw;
		align-items: center;
	}
}
@media all and (max-width: 450px) {
	#wui-map-grid {
		grid-template-areas:
			"state gis"
			"black90 white90"
			"black00 white00"
			"black10 white10"
			"black2020 white2020";
			grid-template-rows: 20% 1fr 1fr 1fr;
			grid-template-columns: 50% 50%;
		grid-gap: 1vw;
		align-items: center;
	}
}
#state-name {
	grid-area: state;
	/* text-transform: uppercase; */
}
#gis-links {
	grid-area: gis;
}
#wui-map-grid > div {
  text-align: center;
}


/* PBG */
#pbg-map-grid {
	display: grid;
	grid-template-areas:
		"state pbg_gis . . . . . . . . . ."
		"black1940 black1950 black1960 black1970 black1980 black90 black00 black10 black2020 black2030 black2040 black2050"
		"white1940 white1950 white1960 white1970 white1980 white90 white00 white10 white2020 white2030 white2040 white2050";
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
	grid-gap: 1vw;
	align-items: center;
}

@media all and (max-width: 800px) {
	#pbg-map-grid {
		display: grid;
		grid-template-areas:
			"state pbg_gis . ."
			"black1940 black1950 black1960 black1970"
			"black1980 black90 black00 black10"
			"black2020 black2030 black2040 black2050"
			"white1940 white1950 white1960 white1970"
			"white1980 white90 white00 white10"
			"white2020 white2030 white2040 white2050";
		grid-template-rows: 25% 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
		grid-gap: 1vw;
		align-items: center;
	}
}

@media all and (max-width: 400px) {
	#pbg-map-grid {
		display: grid;
		grid-template-areas:
			"state pbg_gis ."
			"black1940 black1950 black1960"
			"black1970 black1980 black90"
			"black00 black10 black2020"
			"black2030 black2040 black2050"
			"white1940 white1950 white1960"
			"white1970 white1980 white90"
			"white00 white10 white2020"
			"white2030 white2040 white2050";
		grid-template-rows: 25% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
		grid-gap: 1vw;
		align-items: center;
	}
}

#black1990 {
	grid-area: black90;
}
#black2000 {
	grid-area: black00;
}
#black2010 {
	grid-area: black10;
}
#white1990 {
	grid-area: white90;
}
#white2000 {
	grid-area: white00;
}
#white2010 {
	grid-area: white10;
}

#pbg-map-grid > div {
  text-align: center;
}
#pbg-links {
	grid-area: pbg_gis;
}
#black1940 {
	grid-area: black1940;
}
#black1950 {
	grid-area: black1950;
}
#black1960 {
	grid-area: black1960;
}
#black1970 {
	grid-area: black1970;
}
#black1980 {
	grid-area: black1980;
}
#black2020 {
	grid-area: black2020;
}
#black2030 {
	grid-area: black2030;
}
#black2040 {
	grid-area: black2040;
}
#black2050 {
	grid-area: black2050;
}
#white1940 {
	grid-area: white1940;
}
#white1950 {
	grid-area: white1950;
}
#white1960 {
	grid-area: white1960;
}
#white1970 {
	grid-area: white1970;
}
#white1980 {
	grid-area: white1980;
}
#white2020 {
	grid-area: white2020;
}
#white2030 {
	grid-area: white2030;
}
#white2040 {
	grid-area: white2040;
}
#white2050 {
	grid-area: white2050;
}


/* DHIs */
#dhi-annual-container {
	display: flex;
	flex-wrap: wrap;
}
#dhi-annual-item {
	flex: 0 1 50px;
	text-align: center;
}
#dhi-composite-item {
	flex: 0 1 200px;
	text-align: center;
}

/* Carpathians */
#carp-grid {
	display: grid;
	grid-template-areas:
		"map1860 map1930 map1960"
		"tif1860 tif1930 tif1960";
		grid-template-rows: auto auto;
		grid-template-columns: 33% 33% 33%;
		grid-gap: 1vw;
}
@media all and (max-width: 950px) {
	#carp-grid {
		display: grid;
		grid-template-areas:
			"map1860"
			"tif1860"
			"map1930"
			"tif1930"
			"map1960"
			"tif1960";
			grid-template-rows: auto auto auto auto auto auto;
			grid-template-columns: 1fr;
			grid-gap: 1vw;
	}
}
#map1860 {
	grid-area: map1860;
}
#map1930 {
	grid-area: map1930;
}
#map1960 {
	grid-area: map1960;
}
#tif1860 {
	grid-area: tif1860;
	/* text-align: center; */
}
#tif1930 {
	grid-area: tif1930;
	/* text-align: center; */
}
#tif1960 {
	grid-area: tif1960;
	/* text-align: center; */
}

#ssp-links-grid {
	display: grid;
	grid-template-areas:
		"state pbgzip pbganim1 pbganim2 pbgppt blkhzip blkhanim blkhppt blkpzip blkpanim blkpppt";
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	/* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
	grid-gap: 1vw;
	align-items: center;
}
#pbgzip {
	grid-area: pbgzip;
}
#pbganim1 {
	grid-area: pbganim1;
}
#pbganim2 {
	grid-area: pbganim2;
}
#pbgppt {
	grid-area: pbgppt;
}
#blkhzip {
	grid-area: blkhzip;
}
#blkhanim {
	grid-area: blkhanim;
}
#blkhppt {
	grid-area: blkhppt;
}
#blkhpzip {
	grid-area: blkpzip;
}
#blkpanim {
	grid-area: blkpanim;
}
#blkpppt {
	grid-area: blkpppt;
}