@charset "UTF-8";
/* CSS Document */

/* Color Scheme
-----------------------------

NavBar Background Color						0f1a20		Eerie Black
NavBar and Menu Text Color					ff0019		Ruddy
Menu Background Color						0f1a20		Eerie Black
NavBar Visited Text Color					ff0019		Ruddy
NavBar Hover Color										white
NavBar Current Page Text Color							white
NavBar Current Page Background Color		0f1a20		Eerie Black
*/


/* Navigation Bar
-----------------------------*/
nav {
	text-align: center;	
	background: #0f1a20;					/* Navbar background color */
	position: fixed;
	font-size: 1rem;
	top: 0;
	width: 100%;
	z-index: 100;
}
#menulink {
	margin: 0;
}
#menulink a {
	font-size: 1rem;
  text-transform: uppercase;
	font-style: normal;
}
#menulink a,
#navlinks a {
	display: block;
	width: 100%;
	height: 2em;
	text-align: center;
	color: #ff0019;							/* Navbar and menu text color */
	padding: .4em 0;
	text-decoration: none;
	font-weight: bold;
	font-size: 1rem;
}
#navlinks {
	padding: 0px;
	list-style: none;
	width: 100%;
	margin: 0 auto;
	position: absolute;
	-webkit-transition: all ease-out 0.5s;
	transition: all ease-out 0.5s;
}
#navlinks.displayed {
	top: 2rem;
	z-index: 1;
	opacity: 0.85;
	background: #0f1a20;  					/* Menu background color */
}
#navlinks.start {
	display: none;
}
#navlinks.collapsed {
	top: -15rem;
	opacity: 0;
}
#navlinks li {
	list-style: none;
	margin: 0px;
}
#navlinks a:visited {
	color: #ff0019;							/* Navbar visited color */
}
#navlinks a:hover,
#navlinks a:active,
#navlinks a:focus {
  color: white;								/* Navbar hover color */
}
#navlinks a.current,
#navlinks a.current:visited {
	color: white;							/* Navbar current page text color */
	background-color: #0f1a20;				/* Navbar current page background color */
}


/* Media Queries
-------------------------*/
@media (min-width: 680px){  
/* when less than 680px wide, show only menu - needs javascript to execute */
/* when 680px wide or more, show entire navbar */
	
#menulink {
	display: none;
}
#navlinks {
	position: static;
}
#navlinks.collapsed {
	opacity: 1;
}
#navlinks {
	height: 2rem;
}
#navlinks a {
	width: 20%;
	float: left;
}
	
}