#navigation > .container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

@media (min-width: 992px) {
	#navigation > .container {
		position: relative;
	}
	#navigation > .container::before {
		content: " ";
		
		position: absolute;
		top: 100%;
		top: calc(100% - 1px);
		right: 15px;
		left: 15px;
		
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, .25);
	}
	.layout_home #navigation > .container::before {
		border-bottom: none;
	}
}

#mainnav {
	flex-grow: 1;
}
#header-social-media-links {
	flex-grow: 0;
}

#mainnav-collapse { display:none; width:100%; position:absolute; left:0; z-index:999; background:white; padding:20px; box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); }

@media (max-width: 1269px) {
	#mainnav-collapse.open { display:block; }
}

#mainnav-collapse .mainnav-logo { display: none; }

@media (min-width: 1270px) {
	#mainnav-collapse .mainnav-logo {
		background-image: url(../images/template/logo-White.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 100%;
		display: block;
		height: 80px;
		min-width: 300px;
	}
	.layout_home #mainnav-collapse .mainnav-logo {
		background-image: url(../images/template/logo-Blue.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 90%;
		display: block;
		height: 80px;
		min-width: 200px;
	}
	.layout_home #mainnav-collapse .mainnav-logo { display: none; }
}
@media(min-width: 1270px) {
	div#nav-home-redirect {
		display: none;
	}
}

#mainnav-collapse nav { text-align:left; }
#mainnav-collapse .nav-item { }
#mainnav-collapse .nav-item a { display:block; padding:10px 0; margin-right:24px; }
#mainnav-collapse .nav-item a:hover { text-decoration:none; }
#mainnav-collapse .nav-item.active > .nav-toggle > a { background-color:rgba(255,255,255,0.15); }
#mainnav-collapse .nav-item .nav-toggle { position:relative; }
#mainnav-collapse .nav-item .nav-toggle button { position:absolute; top:0; right:0; bottom:0; border:0; width:30px; background:transparent url(../images/icons/arrow_drop-menu_up.png) center center no-repeat; }
#mainnav-collapse .nav-item .nav-toggle button.collapsed { background-image:url(../images/icons/arrow_drop-menu_down.png); }

#mainnav-collapse .nav-item .nav-item {  }

#mainmenu-nav { text-align:center; height:50px; margin:15px 0; }
#mainmenu-nav #mainnav-button { display:block; padding:15px; background:rgba(255,255,255,0.1875); transition:opacity 0.2s; border:0; transition:background-color 0.2s; color:#262626; }
#mainmenu-nav #mainnav-button .inner { display:inline-block; padding:14px 5px; }
#mainmenu-nav #mainnav-button:hover, #mainmenu-nav #mainnav-button.active { background-color:rgba(255,255,255,0.25); }
#mainmenu-nav #mainnav-button .button-text { text-transform:uppercase; font-size:20px; line-height:20px; }

@media (max-width:480px) {
	#mainmenu-nav #mainnav-button .button-text { display:none; }
}

@media (max-width:1269px) {
	#mainmenu-nav #mainnav-button .button-text { margin-left:10px; color: #fff; }
	.layout_home #mainmenu-nav #mainnav-button .button-text { margin-left:10px; color: #2254be; }
	#mainmenu-nav #mainnav-button .button-image { position:relative; overflow:hidden; width:20px; height:20px; }
	#mainmenu-nav #mainnav-button .button-image:focus { outline:none; }
	#mainmenu-nav #mainnav-button .button-image span { display:block; position:absolute; top:9px; left:0; right:0; height:2px; background:#fff; }
	.layout_home #mainmenu-nav #mainnav-button .button-image span { background:#2254be; }
	#mainmenu-nav #mainnav-button .button-image span::before, #mainmenu-nav #mainnav-button .button-image span::after { position:absolute; display:block; left:0; width:100%; height:2px; background-color:#fff; content:""; }
	.layout_home #mainmenu-nav #mainnav-button .button-image span::before, .layout_home #mainmenu-nav #mainnav-button .button-image span::after { position:absolute; display:block; left:0; width:100%; height:2px; background-color:#2254be; content:""; }
	#mainmenu-nav #mainnav-button .button-image span::before { top:-6px; }
	#mainmenu-nav #mainnav-button .button-image span::after { bottom:-6px; }
	
	#mainmenu-nav #mainnav-button .button-image {  }
	#mainmenu-nav #mainnav-button .button-image span { transition:background 0s 0.1s; }
	#mainmenu-nav #mainnav-button .button-image span::before
	, #mainmenu-nav #mainnav-button .button-image span::after { transition-duration:0.1s, 0.1s; transition-delay:0.1s, 0s; }
	#mainmenu-nav #mainnav-button .button-image span::before { transition-property:top, transform; }
	#mainmenu-nav #mainnav-button .button-image span::after { transition-property:bottom, transform; }
	/* active state, i.e. menu open */
	#mainmenu-nav #mainnav-button.active .button-image {  }
	#mainmenu-nav #mainnav-button.active .button-image span { background:none; }
	#mainmenu-nav #mainnav-button.active .button-image span::before { top:0; transform:rotate(45deg); }
	#mainmenu-nav #mainnav-button.active .button-image span::after { bottom:0; transform:rotate(-45deg); }
	#mainmenu-nav #mainnav-button.active .button-image span::before
	, #mainmenu-nav #mainnav-button.active .button-image span::after { transition-delay:0s, 0.1s; }
}

#mainnav-collapse { width:100%; }

@media (min-width:481px) {
	/* #mainmenu { position:relative; } */
	/* #mainnav-collapse { width:300px; } */
}

@media (min-width:768px) {
/* 	#mainmenu-nav #mainnav-button .button-image { display:none; } */
}

#mainnav-collapse .nav-item { border-top:1px solid #c6c1be; }
#mainnav-collapse .nav-item:first-child { border-top:0; } 
#mainnav-collapse .nav-item .nav-toggle:hover { background-color:rgba(0,0,0,0.1); }
#mainnav-collapse .nav-panel .nav-panel { border-top:none; }
#mainnav-collapse .nav-panel .nav-panel .nav-item { margin-left:5px; font-weight:300; }
#mainnav-collapse .nav-panel .nav-panel .nav-item:hover { background-color:rgba(0,0,0,0.1); } 

@media (min-width:1270px) {
	#mainmenu { position:static; }
	#mainmenu-nav { display:none; margin:15px 0; }
	#mainnav-collapse {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width:auto;
		position:static;
		top:auto;
		left:auto;
		background:none;
		color:inherit;
		padding:0;
		box-shadow:none;
	}
	#mainnav-collapse .mainnav-logo, #mainmenu-search {
		flex-grow: 0;
	}
	#mainnav-collapse>nav {
		flex-grow: 1;
	}
	#mainnav-collapse nav>.nav-panel {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	#mainnav-collapse nav>.nav-panel>.nav-item {
		flex-grow: 1;
	}
	#mainnav-collapse nav>.nav-panel>.nav-item>.nav-toggle {
		text-align: center;
	}
	
	#mainnav-collapse .nav-item { float:left; border-top:0; font-size:16px; line-height:20px; } 
	#mainnav-collapse .nav-item:first-child { margin-left:0; }
	#mainnav-collapse .nav-item a {
		margin-right:0; 
		color: #fff;
		display:block;
		/* padding:30px 14px 30px; */
		padding:30px 0px;
		transition:background-color .2s;
	}
	#mainnav-collapse .nav-item.dropdown .nav-panel a {
		margin-right:0; 
		color: #2254be;
		display:block;
		/* padding:30px 14px 30px; */
		padding:30px 0px;
		transition:background-color .2s;
	}
	.layout_home #mainnav-collapse .nav-item a {
		color: #2254be;
	}
	#mainnav-collapse .nav-item a:hover {
		background-color:rgba(255,255,255,0.15);
		/* color: #2254be; */
	}
	/* #mainnav-collapse .nav-item .nav-toggle.on { background-color: transparent; } */
	/* #mainnav-collapse .nav-item .nav-toggle.on a:hover { background-color: transparent; } */
	#mainnav-collapse .nav-item .nav-toggle button { display:none; }
	#mainnav-collapse .nav-item .nav-panel { box-shadow:3px 3px 5px 0 rgba(0,0,0,0.35); background:white; padding:0px; min-width:280px; }
	#mainnav-collapse .nav-item .nav-panel .nav-item { float:none; border-top:1px solid #bfbfbf; margin-left:0; color:#183956; } 
	#mainnav-collapse .nav-item .nav-panel .nav-item.first { border-top:0; }
	#mainnav-collapse .nav-item .nav-panel .nav-item a { display:block; text-transform:none; padding:20px 25px; height:auto; } 
	#mainnav-collapse .nav-item .nav-panel .nav-item a:hover {  }
	
	
	#mainnav .nav-item .collapse { position:absolute; top:100%; left:0; z-index:999; }
	#mainnav .nav-item.last .collapse { left:auto; right:0; }
	#mainnav .nav-item .collapse.over { display:block; }
	#mainnav .nav-item .collapse.in { display:none; }
	#mainnav .nav-item .collapse.in.over { display:block; }
	#mainnav .nav-item button { display:none; }
	
	/* #mainnav-collapse nav { display:block; float:left; max-height:66px; } */
	#mainnav-collapse nav { display:block; } /* max-height:66px; */
}

@media (min-width:1230px) {
	#mainnav-collapse>nav {
		max-width: 800px;
		max-width: 676px;
	}
	#mainnav-collapse .nav-item { line-height:20px; }
	/* #mainnav-collapse .nav-item a { padding:30px 20px; } */
} 


/* TEMPORARY */
#nav-about-the-district, #nav-legislation {
	display: none;
}