:root {
	--side_nav_w: clamp(180px, 30%, 250px);
	--blue: #13274a;
	--blueHot: #042a92;
	--blueLight: #ccd9ef;
	--darken-cat-img: linear-gradient(
		rgba(19, 39, 74, 0.62),
		rgba(19, 39, 74, 0.62)
	);
	--darken-cat-img-hover: linear-gradient(
		rgba(19, 39, 74, 0.9),
		rgba(19, 39, 74, 0.9)
	);
}

.leaflet-control-zoom {
	position: absolute !important;
	top: 15rem !important;
	right: 0.75rem !important;
	transform: scale(0.75);
}

#container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	color: #4c4c4c;
	font-family: "Open Sans", sans-serif;
	-webkit-font-smoothing: antialiased;

	@media (width < 700px) {
		flex-direction: column;
	}
}

#subcontainer {
	background: #ff0000;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

#state_nav {
	width: calc(100% - var(--side_nav_w));
	padding: 0;
	margin: 0;
	display: flex;
	z-index: 100000000;
	justify-content: center;
	position: fixed;
	top: 40px;
	left: var(--side_nav_w);
	z-index: 40000;
	padding-left: 3rem;
	padding-right: 3rem;

	flex-wrap: wrap;
	gap: 0.5rem;
	@media (width < 700px) {
		width: 100%;
		top: 120px;
		left: 0;
	}
}

#state_nav li {
	border: var(--blueHot) solid 1px;
	background: white;
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style-type: none;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	padding: 1rem;
	font-family: "Open Sans";
	color: var(--blue);
	text-align: center;
	justify-content: center;
	box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
}

#state_nav li.active {
	background: var(--blue);
	color: white;
}

#state_nav li:not(.active):hover {
	background: var(--blue);
	color: white;
}

.project-type {
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	color: rgba(0.5, 0.5, 0.5, 0.71);
	font-family: "Open Sans";
}

.project-address {
	margin: 0;
	margin-top: 1rem;
	padding: 0;
	font-size: 1.125rem;
	color: black;
	font-family: "Open Sans";
}
.project-title {
	margin: 0;
	margin-top: 1.125rem;
	padding: 0;
	font-size: 1.125rem;
	color: var(--blue);
	font-family: "Libre Baskerville";
}

.leaflet-popup-content {
}

.portfolio_link {
	margin: 0;
	margin-top: 1.125rem;
	padding: 0;
	font-size: 0.875rem;
	color: var(--blue) !important;
	font-family: "Open Sans";
	text-decoration: underline;
	align-self: end;
}

#map {
	width: 100%;
	height: 100%;
}

#side_nav {
	margin: 0px;
	padding: 0px;
	z-index: 20000;
	text-align: center;
	display: flex;
	align-items: center;
	background-color: #f3f7ff;
	height: 100vh;
	flex-direction: column;
	width: var(--side_nav_w);
	display: flex;
	justify-content: space-evenly;

	@media (width < 700px) {
		width: 100%;
		height: 100px;
		flex-direction: row;
	}
}

.cat-link {
	cursor: pointer;
	list-style-type: none;
	margin: 0;
	font-size: 1.375rem;
	padding: 0.25rem;
	padding-top: 0px;
	width: 100%;
	font-family: "Open Sans";
	letter-spacing: -4%;
	color: white;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: var(--darken-cat-img),
		url("../ui/categories/cat_retail.png");
	transition: all 1s;
}

.cat-link:nth-child(1) {
	background-image: var(--darken-cat-img),
		url("../ui/categories/cat_public.png");
}
.cat-link:nth-child(2) {
	background-image: var(--darken-cat-img),
		url("../ui/categories/cat_hospitality.png");
}
.cat-link:nth-child(3) {
	background-image: var(--darken-cat-img),
		url("../ui/categories/cat_adaptive.png");
}
.cat-link:nth-child(4) {
	background-image: var(--darken-cat-img), url("../ui/categories/nonprofit.png");
}

.cat-link:nth-child(1):hover {
	background-image: var(--darken-cat-img-hover),
		url("../ui/categories/cat_public.png");
}
.cat-link:nth-child(2):hover {
	background-image: var(--darken-cat-img-hover),
		url("../ui/categories/cat_hospitality.png");
}
.cat-link:nth-child(3):hover {
	background-image: var(--darken-cat-img-hover),
		url("../ui/categories/cat_adaptive.png");
}
.cat-link:nth-child(4):hover {
	background-image: var(--darken-cat-img-hover),
		url("../ui/categories/nonprofit.png");
}

#side_nav li.active {
	background: var(--blue);
	font-weight: 700;
}

#side_nav li:not(.active):hover {
	filter: brightness(0.95);
}
#header h1 {
	margin: 0px;
	color: white;
}
.leaflet-control-geocoder-form input[type="submit"] {
	display: none;
}
.leaflet-control-geocoder-form input[type="text"] {
	font-size: 1.1em;
	height: 30px;
	width: 320px;
}

#basemap-button {
	background-color: #1b6cd5;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 0.05em;
	padding: 5px 11px;
	position: absolute;
	right: 20px;
	top: 62px;
	transition: background-color 0.2s;
	z-index: 1100;
}
#basemap-button:hover {
	background-color: #0853b5;
}

.leaflet-popup-content-wrapper {
	border-radius: 0;
	padding: 0;
	display: flex;
}
.leaflet-popup-content {
	margin: 0;
	padding: clamp(2rem, 45px, 3rem);
	width: clamp(30rem, 500px, 30rem) !important;
	display: flex;
	flex-direction: column;
}
.leaflet-container a.leaflet-popup-close-button {
	color: #333;
	padding: 0;
	margin-right: 1rem;
	margin-top: 1rem;
	font-size: 12px;
	font-weight: 400;
}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #666;
}
.leaflet-popup-tip {
	display: none;
}

.segment-details {
	border: 12px solid #f3901d;
	overflow: auto;
	padding: 18px 0 14px;
	width: 400px;
}
.segment-details h1 {
	color: #f3901d;
	font-size: 1.4em;
	font-weight: 700;
	margin: 0 0 16px;
	padding-bottom: 7px;
	position: relative;
	text-align: center;
}
.segment-details h1:after {
	background-color: #f3901d;
	content: "";
	height: 2px;
	left: 15%;
	position: absolute;
	top: 100%;
	width: 70%;
}
.segment-details h2 {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2em;
	margin: 6px 0 10px;
}
.segment-details > div {
	float: left;
	font-size: 1.1em;
	line-height: 1.2em;
	padding: 0 12px 3px;
	position: relative;
	text-align: center;
	width: 33.33333%;
}
.segment-details > div:nth-of-type(1):after,
.segment-details > div:nth-of-type(2):after {
	background-color: #f3901d;
	content: "";
	height: 100%;
	left: 100%;
	position: absolute;
	top: 0;
	width: 2px;
}

.light-green {
	border-color: #7ac143;
}
.light-green h1 {
	color: #7ac143;
}
.light-green h1:after,
.light-green > div:nth-of-type(1):after,
.light-green > div:nth-of-type(2):after {
	background-color: #7ac143;
}

.blue {
	border-color: #0081c6;
}
.blue h1 {
	color: #0081c6;
}
.blue h1:after,
.blue > div:nth-of-type(1):after,
.blue > div:nth-of-type(2):after {
	background-color: #0081c6;
}

.light-blue {
	border-color: #72cdf4;
}
.light-blue h1 {
	color: #72cdf4;
}
.light-blue h1:after,
.light-blue > div:nth-of-type(1):after,
.light-blue > div:nth-of-type(2):after {
	background-color: #72cdf4;
}

.gray {
	border-color: #404a54;
}
.gray h1 {
	color: #404a54;
}
.gray h1:after,
.gray > div:nth-of-type(1):after,
.gray > div:nth-of-type(2):after {
	background-color: #404a54;
}

.green {
	border-color: #439539;
}
.green h1 {
	color: #439539;
}
.green h1:after,
.green > div:nth-of-type(1):after,
.green > div:nth-of-type(2):after {
	background-color: #439539;
}

/* Modal */
#modalOverlay {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	height: 100%;
	width: 100%;
}
.modalPopup {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 50%;
	padding: 0 0 30px;
	-webkit-box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.2);
}
.modalContent {
	padding: 0 2em;
}
.headerBar {
	width: 100%;
	background: #54b948;
	margin: 0;
	text-align: center;
	height: 30px;
}

.leaflet-popup-content .segment-details h2:before {
	display: none;
}
.leaflet-popup-content .segment-details h2 {
	padding: 0px;
	width: 100% !important;
}
.buttonStyle {
	border: transparent;
	border-radius: 0;
	background: #6d6d6d;
	color: #eee !important;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	padding: 6px 25px;
	text-decoration: none;
	background: -moz-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%);
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0%, #6d6d6d),
		color-stop(100%, #1e1e1e)
	);
	background: -webkit-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%);
	background: -o-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%);
	background: -ms-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%);
	background: linear-gradient(to bottom, #6d6d6d 0%, #1e1e1e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#1e1e1e',GradientType=0 );
	/*	-webkit-box-shadow: 0 2px 4px 0 #999;
     box-shadow: 0 2px 4px 0 #999; */
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.buttonStyle:hover {
	background: #1e1e1e;
	color: #fff;
	background: -moz-linear-gradient(top, #1e1e1e 0%, #6d6d6d 100%, #6d6d6d 100%);
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0%, #1e1e1e),
		color-stop(100%, #6d6d6d),
		color-stop(100%, #6d6d6d)
	);
	background: -webkit-linear-gradient(
		top,
		#1e1e1e 0%,
		#6d6d6d 100%,
		#6d6d6d 100%
	);
	background: -o-linear-gradient(top, #1e1e1e 0%, #6d6d6d 100%, #6d6d6d 100%);
	background: -ms-linear-gradient(top, #1e1e1e 0%, #6d6d6d 100%, #6d6d6d 100%);
	background: linear-gradient(
		to bottom,
		#1e1e1e 0%,
		#6d6d6d 100%,
		#6d6d6d 100%
	);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#6d6d6d',GradientType=0 );
}
#basemap-button span:before {
	content: "View Satellite Map";
	display: inline;
}
#basemap-button.aerial span:before {
	content: "View Street Map" !important;
}

/* global popups */
.leaflet-popup-content h2 {
	font-size: 14px !important;
	padding: 20px;
	width: 100% !important;
	line-height: 1.2;
}
.leaflet-popup-content table {
	display: none;
}
.leaflet-popup-content h2:before {
	content: "Deer Donor: ";
	padding-bottom: 4px;
	display: block;
	font-weight: bold;
}

/* Legend */
#legend {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 999;
	background: white;
	padding: 10px;
	border: gray solid 1px;
}
#legend ul li {
	list-style: none;
	position: relative;
}
#legend h3 {
	margin: 0px;
}
#legend ul {
	padding: 0px;
	margin-bottom: 0px;
}

#legend ul li:nth-of-type(1):after {
	content: "";
	display: inline-block;
	height: 10px;
	width: 20px;
	background: rgba(57, 57, 57, 0.5);
	margin-left: 10px;
	border: 2px rgb(57, 57, 57) solid;
}
#legend ul li:nth-of-type(2):after {
	content: "";
	display: inline-block;
	height: 10px;
	width: 20px;
	background: #ffb106;
	margin-left: 10px;
	border: 2px #ffb106;
}

/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium"  columns in Bootstrap */

@media screen and (max-width: 992px) {
	.vertical-centered > div {
		margin: 0;
	}
	h1 {
		font-size: 2.2em;
		margin: 20px 0 6px;
	}
	h2 {
		font-size: 1.7em;
		margin: 12px 0 0;
	}
	h3 {
		font-size: 1.4em;
		margin: 20px 0 0;
	}
	h4 {
		font-size: 1.3em;
		margin: 28px 0 0;
	}
	h5 {
		font-size: 1.2em;
		margin: 26px 0 0;
	}
	h6 {
		font-size: 1.1em;
		margin: 26px 0 0;
	}
	p,
	li {
		font-size: 0.9em;
		line-height: 1.3em;
	}
	.button {
		font-size: 0.8em;
		border-radius: 12px;
		padding: 4px 12px 3px;
	}
	table tr {
		font-size: 0.8em;
		padding: 2px;
	}
}

@media screen and (max-width: 675px) {
	:root {
		--side_nav_w: clamp(120px, 25%, 180px);
	}

	.leaflet-control-geocoder-form {
		margin: 0 2px;
		width: 180px;
	}
	.leaflet-control-geocoder-form input[type="text"] {
		font-size: 0.9em;
		height: 20px;
		width: 160px;
	}
	.leaflet-control-geocoder-form i {
		font-size: 0.8em;
		height: 20px;
		line-height: 20px;
		width: 20px;
	}
	#header img {
		max-width: 120px;
	}
	#header h1 {
		font-size: 1.5em;
	}
	#basemap-button {
		font-size: 0.9em;
		padding: 3px 6px;
		right: 12px;
		top: 37px;
	}

	.leaflet-popup-content {
	}
	.leaflet-container a.leaflet-popup-close-button {
		padding: 20px 20px 0 0;
	}
	.segment-details {
		border-width: 8px;
		padding-bottom: 4px;
		width: 180px;
	}
	.segment-details h1 {
		font-size: 1em;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
	.segment-details h2 {
		margin: 4px 0 4px;
	}
	.segment-details > div {
		font-size: 0.9em;
		margin: 3px 0 0;
		padding-bottom: 7px;
		width: 100%;
	}
	.segment-details > div:nth-of-type(1):after,
	.segment-details > div:nth-of-type(2):after {
		height: 1px;
		left: 10%;
		top: 100%;
		width: 80%;
	}
}

@media screen and (max-width: 400px) {
	:root {
		--side_nav_w: clamp(100px, 18%, 140px);
	}

	#header img {
		max-width: 60px;
		margin: 15px;
	}
	#header h1 {
		font-size: 1em;
		padding-top: 15px;
	}
}

.legend-note {
	font-size: smaller;
}

.geocoder-control {
	margin-right: 20px !important;
	margin-top: 102px !important;
}