/* Menu Bar ----------------------------------------------------------------------------------------- */

.mobile-menu {
	color: White;
	line-height: 44px;
	padding: 0 2%;

}
.mobile-menu:hover {
	text-decoration: none;
}
.mobile-menu i {
	font-size: 20px;
}

.menu-bar {
	background-color: rgb(4,142,70);
	min-height: 44px;
}

.menu {
	display: block;
	position: relative;
	z-index: 500;
	height: 44px;
	list-style-type: none;
}
.menu li * {
	color: White;
	font-size: 15px;
	line-height: 44px;
}

.menu li a {
	color: White;
	font-size: 15px;
	line-height: 44px;
}

@media screen and (max-width: 699px) {
	/* Mobile menu */
	.menu {height: auto;}
	.menu .sub-menu {display: none;}
	.menu li {padding: 0 2%;}
	.sub-menu {
		border-bottom: 1px solid white;
		border-top: 1px solid white;
	}
}

@media screen and (min-width: 700px) {
	.menu-bar {
		background-color: rgb(4,142,70);
		min-height: 44px;
	}

	.menu {
		display: block !important;
		position: relative;
		z-index: 500;
		height: 44px;
		list-style-type: none;
	}

	.menu li {
		padding: 0;
		margin: 0;
		margin-right: 25px;
		float: left;
		position: relative;
		line-height: 44px;
		min-height: 44px;
	}



	.menu .menu-home {
		font-size: 22px;
		color: rgb(155,210,181);
		line-height: 44px;
	}

	.menu a {
		text-decoration: none;
		display: block;
	}

	.menu ul {
		/* this targets all sub menus */
		display: none;
		/* hide all sub menus from view */
		position: absolute;
		background-color: rgb(4,142,70);
		background-color: rgba(4,142,70,0.9);
		top: 44px;
		/* this should be the same height as the top level menu -- height + padding + borders */
		z-index: 10000;
	}

	.menu ul li {
		/* this targets all submenu items */
		float: none;
		/* overwriting our float up above */
		width: 230px;
		/* set to the width you want your sub menus to be. This needs to match the value we set below */
		min-height: 2px;
	}

	.menu ul li a {
		/* target all sub menu item links */
		padding: 5px 5px;
		/* give our sub menu links a nice button feel */
		line-height: normal;
		width: auto;
	}

	.menu li:hover ul {
		display: block;
		/* show sub menus when hovering over a parent */
	}

	.menu a:hover {
		color: yellow;
	}

.menu-bar button {padding-top:0;}

}