/*Brendan Hukill 4/16/2021 */
#navLinks {
	display: none; /* workaround applied to fix odd default behavior for this hamburger menu instance */
}

/* Nav Styling */
/* Primary button styling */
#button-primary {
	float: left;
	font-size: .8em;	
	color: black;
	font-weight: bold;
	display: block;
	color: #000; /* apply white font */
	text-transform: uppercase;
	text-decoration: none;
	background-color: #add8e6; /* change background of button color to sky blue, when page is active */
	background-image: url(null); /* hide arrow icon */
	background-repeat: no-repeat;
	background-position: 5px 50%; /* position background image exactly at the left edge, and 2px from the top edge of element */
	border-width: 4px; /* create a beveled effect */
	border-style: solid; /* create a beveled effect */
	border-top-color: #be0000; /* create a beveled effect */
	border-right-color: #a50000; /* create a beveled effect */
	border-left-color: #d80000; /* create a beveled effect */
	border-bottom-color: #8b0000; /* create a beveled effect */
	padding: 7px 20px 7px 20px; /* adds 7px of left padding to prevent text from overlapping bullet icons */
}

#button-primary:hover  {
	font-weight: bold;
	color: #000; /* change color **BACK** to white, upon user hovering nav bar section */
	background-color: #fff; /* change background color **BACK** to black, upon user hovering nav bar section */
	background-image: url(null); /* hide arrow icon */
}

#button-primary:active  {
	font-weight: bold;
	color: #000;
	background-color: #fff; /*set color to white upon user clicking nav bar section */
	background-position: 5px 50%; /* change arrow direction to right upon hover, positioned 3px from left of each nav section for a horizontal nav, and referencing the 2nd icon of nav image into frame with the 50% vertical value - which pulls the 2nd arrow icon into frame, using sprites technique (using same image, referencing different icons), upon user hover nav bar section */
}
/* End of Primary button styling */

.hamburgerIcon {
	position: absolute;
	padding-left: 10px;
}

nav {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	background-color: #000; /*set nav background color to black*/
	border-left: none;
	border-top: none;
	border-bottom: none;
	position: sticky;
	top: 0;
	z-index: 1;
}

nav ul {
	max-width: 1200px;
	padding: 0;
	margin: 0 auto; 
}

nav li a {display: inline-block;
}

.mainNav li {
	width: 100%;
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px;
	margin: 0;
	border-radius: 5px;
	padding: 2px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;	
}

.mainNav a {
	float: left;
	font-size: .8em;	
	color: white;
	font-weight: bold;
	display: block;
	color: #fff; /* apply white font */
	text-transform: uppercase;
	text-decoration: none;
	background-color: #000; /* apply black background */
	background-image: url(../Images/arrow_down.png); /* add arrow icon */
	background-repeat: no-repeat;
	background-position: 5px 50%; /* position background image exactly at the left edge, and 2px from the top edge of element */
	border-width: 4px; /* create a beveled effect */
	border-style: solid; /* create a beveled effect */
	border-top-color: #be0000; /* create a beveled effect */
	border-right-color: #a50000; /* create a beveled effect */
	border-left-color: #d80000; /* create a beveled effect */
	border-bottom-color: #8b0000; /* create a beveled effect */
	padding: 7px 20px 7px 20px; /* adds 7px of left padding to prevent text from overlapping bullet icons */
}

.mainNav a:hover  {
	font-weight: bold;
	color: #000;
	background-color: #add8e6; /* change background color to sky blue, upon user hovering nav bar section */
	background-image: url(../Images/arrow_right.png); /* add arrow icon */
	background-position: 5px 50%; /* change arrow direction to right upon hover, positioned 3px from left of each nav section for a horizontal nav, and referencing the 2nd icon of nav image into frame with the 50% vertical value - which pulls the 2nd arrow icon into frame, using sprites technique (using same image, referencing different icons), upon user hover nav bar section */
}

.mainNav a:active  {
	font-weight: bold;
	color: #000;
	background-color: #fff; /*set color to white upon user clicking nav bar section */
	background-image: url(../Images/arrow_right.png); /* add arrow icon */
	background-position: 5px 50%; /* change arrow direction to right upon hover, positioned 3px from left of each nav section for a horizontal nav, and referencing the 2nd icon of nav image into frame with the 50% vertical value - which pulls the 2nd arrow icon into frame, using sprites technique (using same image, referencing different icons), upon user hover nav bar section */
}

/* .mainNav li:hover > a class selector allows nav parent to remain highlighted
upon highlighting nav sub-menu items */
.mainNav a:hover, .mainNav li:hover > a {
	font-weight: bold;
	background-color: #fff; 
	color: #000; 
}

/* second-level lists */
nav li ul { 
	position: absolute;
	margin-top: 37px; /* removes vertical gap between parent nav & sub-menu items */
	margin-left: 15px; /* pushes sub-menu bullets over to the right*/
	width: 200px;
	list-style: none;  /* remove bullets from list */
	text-align: left;
	left: -999em; /* using left instead of display to hide menus 
	because display: none isn't read by screen readers */
}

nav li:hover ul {	/* lists nested under hovered list items */
	left: auto;
}

.mainNav ul li a {
	padding-left: 35px;
	padding-right: 20px;
}

/* End Nav Styling */

/* Hamburger height settings */

@media (max-width: 455.98px) {
.hamburgerIcon {
	top: 223px;
}
}

@media (min-width: 456px) and (max-width: 527.98px) {
.hamburgerIcon {
	top: 160px;
}
}

@media (min-width: 528px) and (max-width: 800px) {
.hamburgerIcon {
	top: 223px;
}
}

/* End of Hamburger height settings */

@media (max-width: 480px) {
/* Style specifies a horizontal display for navigation links */
.mainNav li {
	width: 100%;
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px;
	margin: 0;
	border-radius: 5px;
	padding: 2px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

.mainNav a {
	text-align: center;
}

nav li {
	float: none;
	display: inline-block;
	padding: 0;
}

nav a {
	float: none;
	display: inline-block;
	border: none;
}
}

@media (min-width: 480px) and (max-width: 800px) {
.mainNav li {
	width: 200px;
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px;
	margin: 0;
	border-radius: 5px;
	padding: 5px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

.mainNav li:nth-child(n) {
	width: 50%;
}

.mainNav li:nth-child(2n) {
	width: 50%;
}

.mainNav li:nth-child(3n) {
	width: 50%;
}

.mainNav li:nth-child(4n) {
	width: 50%;
}

.mainNav li:nth-child(5n) {
	width: 100%;
}

.mainNav a {
	padding: 7px 20px 7px 27px; 
	/* adds 30px of left padding to prevent text from overlapping bullet icons */
	text-align: center;
}
}

@media (max-width: 800px) {
.desktopNav {
	display: none;
}
}

@media (min-width: 801px) {
.hamburgerIcon {
	display: none;
}

.mainNav li {
	width: 150px;
	-webkit-flex: 1 1 150px;
	flex: 1 1 150px;
	margin: 0;
	border-radius: 5px;
	padding: 5px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

.mainNav a {
	padding: 7px 20px 7px 27px; 
	/* adds 30px of left padding to prevent text from overlapping bullet icons */
	text-align: center;
}

.mainNav ul li a:hover  {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

#button-primary:hover  {
	-webkit-transform: scale(1); /* kills the scale hover effect for primary button */
	-ms-transform: scale(1); /* kills the scale hover effect for primary button */
	transform: scale(1); /* kills the scale hover effect for primary button */
}

/* second-level lists */
nav li ul { 
	margin-top: 37.5px; /* removes vertical gap between parent nav & sub-menu items */
}
}

/* Media queries for tablet layouts */
@media (max-width: 1040px) {
nav {
	margin-top: -1px; /*gets rid of funky line in between header and nav*/
}
}
/* End of Media queries for tablet layouts */ 

@media (min-width: 1041px) {
.mobileNav {
	display: none;
}
}

/* styling from nav page - part 3 */

@media (max-width: 1200px) { 
/* mobile navbar styling 
	per https://www.w3schools.com/howto/howto_js_mobile_navbar.asp */

/* Hide the links inside the navigation menu (except for logo/home) */
.mobileMenu #myLinks {
	display: none;
}

/* Styling that controls width of secondary nav items for mobile */

.mobileNav ul li ul li {
	width: 200px;
	min-width: 100%;
}

.mainNav li ul li {
	padding: 0px;
}
	
/* Style the active link (or home/logo) */
.active, a:active {
	background-color: #cde6ff; /* blue background */
	color: white;
	text-align: left;
	font-weight: normal;
}

.mainNav a {
	text-align: center;
}

nav li {
	float: none;
	display: inline-block;
	padding: 0;
}	

nav a {
	float: none;
	display: inline-block;
	border: none;
}
/* end of mobile navbar styling */
}

/* end of styling from nav page - part 3 */

@media (min-width: 1201px) { 
/* second-level lists */
nav li ul { 
	margin-top: 47px; /* removes vertical gap between parent nav & sub-menu items */
}

.mainNav li ul li a  { 
	margin-top: -15px; /* removes vertical gap between sub-menu items */
}
}