* {
	margin: 0;
}
	
.navbar {
	position: absolute;
	top: 0px;
	width: 100%;
	font-size: 0.9em;
	padding-bottom: .625em;
}

.navbar-logo {
	display: inline-block;
	font-size: 1em;
	margin-top: .625em;
/*
	display: none;
	visibility: hidden;
	opacity: 0;
*/
	display: none;
}
.navbar .navbar-menu {
	list-style-type: none;
/*
		display: none;
		visibility: hidden;
*/
}

.nav-links,
.navbar-logo {
		text-decoration: none;
/*
		color: black;
		color: rgba(0, 0, 0, 1);
		color: rgba(0, 0, 0, 0.9);
		color: white;
		color: rgba(255, 255, 255, 0.7);
		color: rgba(255, 255, 255, 0.8);
*/
		color: rgba(0, 0, 0, 0.9);
		text-transform: uppercase;
}
.nav-link-selected a {
	text-decoration: underline:
}
.navbar-menu li {
	text-align: center;
	margin: .9em auto;
}

.navbar-toggle {
/*
	position: absolute;
	top: 10px;
	right: 20px;
	color: rgba(255, 255, 255, 0.9);
*/
	position: absolute;
	top: 10px;
	right: 20px;
	cursor: pointer;
	font-size: 1.5em;
}

/* burger
---------------------------------------------------------------------------- */
	.burger {
		display: none; /* on large displays */
		cursor: pointer;
		
	}
	
	.burger div {
		width: 25px;
		height: 3px;
		background-color: rgb(226, 226, 226);
		margin: 5px;
		transition: all 0.3s ease;
	}

/* toggles
---------------------------------------------------------------------------- */
	.active {
		display: block;
	}
	.inactive {
		display: none;
	}

	.background-Off {
		background: none;
	}
	.background-On {
		background: linear-gradient(90deg, #fcff9e 0%, #339933 100%);
		border: 1px solid rgba(0, 0, 0, 0.2);
	}

	.textColorWhite {
		color: white;
		color: rgba(255, 255, 255, 0.8);
	}
	.textColorBlack {
		color: black;
		border: 1px solid rgba(0, 0, 0, 0.8);
	}

	.visible {
		visibility: visible;
	}
	.invisible {
		visibility: hidden;
	}

	.toggle .line1 {
		transform: rotate(-45deg) translate(-5px, 6px);
		background-color: black;
	}
	.toggle .line2 {
		opacity: 0;
		background-color: black;
	}
	.toggle .line3 {
		transform: rotate(45deg) translate(-5px, -6px);
		background-color: black;
	}

/*
	I like to include this as it helps me set breakpoints 
	Extra small (xs) devices (portrait phones, less than 576px)

	Small (sm) devices (landscape phones, 576px and up)
	@media (min-width: 576px) { ... }

	Medium (md) devices (tablets, 768px and up)
	@media (min-width: 768px) { ... }

	Large (lg) devices (desktops, 992px and up)
	@media (min-width: 992px) { ... }

	Extra (xl) large devices (large desktops, 1200px and up)
	@media (min-width: 1200px) { ... }
*/

	@media screen and (max-width: 767px) {
		body {
			overflow-x: hidden; /* removes the horizontal scroll bar */
		}

		.burger {
			display: block; /* on small displays */
		}
	}

	@media screen and (min-width: 767px) {
		.navbar {
/*
	background: linear-gradient(90deg, #fcff9e 0%, #339933 100%);
	border: 1px solid rgba(0, 0, 0, 0.2);
*/
			background: linear-gradient(90deg, #fcff9e 0%, #339933 100%);
			border: 1px solid rgba(0, 0, 0, 0.2);
			display: flex;
			justify-content: space-between;
			padding-bottom: 0;
			height: 70px;
			align-items: center;
		}

		.navbar-logo {
			margin-top: 0;
			margin-left: 1.25em;
			display: block;
		}

		.navbar .navbar-menu {
			display: block;
		}	
		
		.navbar .navbar-menu {
			display: flex;
			margin-right: 1.875em;
			flex-direction: row;
			justify-content: flex-end;
		}

		.navbar-menu li {
			margin: 0;
		}

		.nav-links {
			margin-left: 2.5em;
		}

		.navbar-toggle {
/* 
			display: none;
*/
			display: none;
		}

		.nav-links,
		.navbar-logo {
		/*
				color: black;
				color: rgba(0, 0, 0, 1);
				color: rgba(0, 0, 0, 0.8);
				color: white;
				color: rgba(255, 255, 255, 0.7);
		*/
		}

		.logo:hover,
		.nav-links:hover {
/*
				color: rgba(255, 255, 255, 1);
*/
				color: rgba(0, 128, 0, 1);
				text-decoration: underline;
		}
}