/* MEGA MENU (TOP MAIN ON ALL PAGES) 
https://www.w3schools.com/howto/howto_css_mega_menu.asp   */
.navbar 				{	margin-bottom: 		0px;
  							position: 			inherit;
  							overflow: 			hidden;
  							background-color: 	black;
  							font-family: 		Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
  							display: 			inline-block;
						}
/* Links inside the navbar */
.navbar a 				{	float: 				left;
  							font-size: 			100%;
 							color: 				white;
  							text-align: 		center;
  							padding: 			14px 16px;
  							text-decoration: 	none;
						}
/* The dropdown container */
.dropdown 				{	float: 				left;
  							overflow: 			hidden;
						}
/* overrides bootstraps .dropup fixed to relative" */
.dropdown, .dropup 		{	position: 			inherit; 
}
/* Dropdown button */
.dropdown .dropbtn 		{	font-size: 			150%; 
  							border: 			none;
  							outline: 			none;
  							color: 				white;
  							padding: 			14px 12px;
  							background-color: 	black;
  							font: 				inherit; 		/* Important for vertical align on mobile phones */
  							margin: 			0; 				/* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, 
.dropdown:hover 
.dropbtn 				{	background-color: 	var(--ohng-red);
}
/* Dropdown content (hidden by default) */
.dropdown-content 		{	margin-top: 		1px;
  							margin-left: 		10%;
  							margin-right: 		10%;
  							display: 			none;
  							position: 			absolute;
  							background-color:  	var(--ohng-light-gray);
  							width: 				80%;
  							left: 				0;
/*							box-shadow: 		0px 8px 16px 0px rgba(0,0,0,0.2);*/
  							z-index: 			1;
}
/* Mega Menu header, if needed */
.dropdown-content 
.header 				{	background: 		var(--ohng-red);
  							padding: 			16px;
  							color: 				white;
}
/* Show the dropdown menu on hover */
.dropdown:hover 
.dropdown-content 		{	display: 			block;
}
/* Create three equal columns that floats next to each other */
.column 				{	float: 				left;
  							padding-left: 		5%;
  							padding-right: 		2%;
  							padding-bottom: 	5%;
  							width: 				25%;
  						/*	background-color: var(--ohng-light-gray);  */
  						/*	height: 			250px;  */
}

/* Subheads */
.column h2 				{	font-weight: 		bold;
  							font-size: 			100%;
  							text-align: 		left;  
  							margin-bottom: 		.25em ;
}
.column p 				{ 	font-size: 			100%;
  							line-height: 		100%;
}
.column ul 				{	padding-left: 		0;
}
.column li 				{	font-weight: 		normal;
    						font-size: 			100%;
  							line-height: 		100%;
  							margin-bottom: 		.25em ;
  							list-style-type: 	disc;
  							text-align: 		left;   
}

/* Style links inside the columns on megameun*/
.column a  				{	float: 				none;
  							color: 				black;
  							padding: 			1px;
  							text-decoration: 	none;
  							display: 			block;
  							text-align: 		left;
}
/* Add a background color on hover }*/
.column a:hover 		{	background-color: 	var(--ohng-light-gray);
  							color: 				var(--ohng-red);
}

/* Clear floats after the columns */
.row:after 				{	content: 			"";
  							display: 			table;
  							clear: 				both;
}

/* SECONDARY NAVBAR (photo archives) */
.dropbtn 				{	background-color: 	white;
  							color: 				black;
  							padding: 			16px;
  							font-size: 			100%;
  							border: 			none;
  							cursor: 			pointer;
}

/* The container <div> - needed to position the dropdown content */
.secondarydropdown 		{	position: 			relative;
  							display: 			inline-block;
  							background-color: 	white;
}

/* Dropdown Content (Hidden by Default) */
.secondarydropdown-content 
{							display: 			none;
  							position: 			absolute;
  							background-color: 	white;
  							min-width: 			100px;
  							box-shadow: 		0px 8px 16px 0px rgba(0,0,0,0.2);
  							z-index: 			1;
}

/* Links inside the dropdown */
.secondarydropdown-content a 
{  							color: 				black;
  							padding: 			5px 5px;
  							text-decoration: 	none;
  							display: 			block;
}

/* Change color of dropdown links on hover */
.secondarydropdown-content 
a:hover 				{	background-color: 	var(--ohng-light-gray);
}
/* Show the dropdown menu on hover */
.secondarydropdown:hover 
.secondarydropdown-content { display: 			block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.secondarydropdown:hover .dropbtn {
  background-color: #ffffff;
}