* {
	font-family: 'ITC Kabel Std', 'Trebuchet MS', 'Gill Sans', 'Segoe UI', sans-serif;
	margin: auto;
	max-width: 1980px;
	color: black;
}


@font-face {
	font-family: 'ITC Kabel Std';
	src: url('./font/ITCKabelStd-Book.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

#homepageCopy {
	text-align: center;
}


/* header */

header * {
	margin: 0;
}

.nav-container {
	display: inline-flex;
	width: 100%;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

.MH-logo {
	margin: 0;
	width: 50%;
}

#logo {
	width: 250px;
}

/* nav */
#container {
	margin: 0 auto;
	max-width: 890px;
}

nav p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav {
	margin: 0;
	padding: 0;

}



/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content: "";
	display: table;
	clear: both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display: inline-block;


}

/* Styling the links */
nav a {
	display: block;
	padding: 14px 20px;

	font-size: 17px;
	text-decoration: none;
}


nav ul li ul li:hover {
	background-color: #424242;
	color: white;
}

/* Background color change on Hover */
nav a:hover {
	background-color: #424242;
	color: white;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute;

}

/* Display Dropdowns on Hover */
nav ul li:hover>ul {
	display: inherit;
}

/* Fisrt Tier Dropdown */
nav ul ul li {
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top: -60px;
	/* has to be the same number as the "width" of "nav ul ul li" */
	left: 170px;
}


/* Change ' +' in order to change the Dropdown symbol */
li>a:after {
	content: ' +';
}

li>a:only-child:after {
	content: '';
}


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {
	.nav-container {
		display: flex;
		flex-direction: column;
	}

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle+a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;

		padding: 14px 20px;

		font-size: 17px;
		text-decoration: none;
		border: none;
	}

	.toggle:hover {
		background-color: #424242;
		color: white;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked+ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
	}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
	nav ul ul ul a {
		background-color: #424242;
		color: white;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
	nav ul ul ul a {
		padding: 14px 20px;

		font-size: 17px;
	}




	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position: static;

		/* has to be the same number as the "line-height" of "nav a" */
	}

	/* Hide menus on hover */
	nav ul ul li:hover>ul,
	nav ul li:hover>ul {
		display: none;
	}

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
		background-color: white;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */

	}

	nav {
		text-align: center;
	}

	.menu {
		width: 100%;
	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display: block;
		width: 94%;
	}

}

nav ul ul li {

	float: none;
	display: list-item;
	position: relative;
	background-color: white;
	z-index: 100;

}

@media all and (min-width : 769px) {
	nav ul ul {
		box-shadow: 1px 16px 37px rgba(0, 0, 0, 0.37);
	}
}

/* HERO IMAGE */

.heroImageContainer {
	background-color: #404040;
	display: flex;

}

.heroImage {
	max-width: 100%;
	align-self: baseline;
}

.tagline {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.tagline h2 {
	font-size: 60px;
	font-weight: 100;
	color: white;
}

@media screen and (max-width: 574px) {
	.tagline h2 {
		font-size: 37px !important;
		font-weight: 100;
		color: white;
		text-align: center;
				padding-bottom: 70px !important;
	}

}






/* HERO */

.heroImageContainer {
	background-color: #404040;
	display: flex;
	position: relative;
}

.heroImage {
	max-width: 100%;
	align-self: baseline;
}

.tagline {
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	text-align: center;

	width: 100%;
}

.tagline h2 {
	font-size: 60px;
	font-weight: 100;
	color: white;
		padding-bottom: 120px;
}

.homepageCopy {
	margin: 15px;
	max-width: 800px;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
}


.homepageCopy h2 {
	padding-top: 20px;
}


.pageCopy {
	padding: 15px;
	max-width: 800px;


}


/* PAGE COPY */

.pageCopy h1 {
	padding-top: 15px;
	padding-bottom: 15px;
	font-weight: 100;
	font-size: 40px;
}

.pageCopy h2 {
	padding-top: 20px;
}

.pageCopy p {
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 20px;
}

.pageCopy a {
	font-size: 20px;
	color: black;
}

.pageCopy li {
	padding: 10px;
	font-size: 20px;
}

ul {
	margin: 0;
}

ul.dashed {
	list-style-type: none;
}

ul.dashed>li:before {
	content: '\2014';
	position: absolute;
	margin-left: -30px;
}



footer {
	text-align: center;
	margin: 40px;
}

footer p {

	font-size: 16px;
	padding: 2px;
}

footer a {
	font-size: 16px;
	color: black;
}






.pageHeroImage {
	max-width: 100%;
	display: block;
	margin: auto;
}


td {
	padding: 21px;
}



@media only screen and (max-width: 600px) {

.gallery {
  grid-template-columns: repeat(1, 1fr) !important;
}

}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;  
  max-width: 900px;
  margin: auto;
  padding: 10px;
}

.gallery img {
  max-width: 100%;
}



/* Events table */

#events-table {
	margin-top: 25px;
}

.events-table-header {
	font-size: 25px;
}

.events-date {
	font-size: 20px;
}

#events-table td {
	border-top: 1px black solid;
}

/* EXPANDING GALLERY */

.expanding-gallery {
	--s: 150px;
	/* control the size */
	--g: 10px;
	/* control the gap */
	--f: 1.5;
	/* control the scale factor */
	display: grid;
	gap: var(--g);
	width: calc(3*var(--s) + 2*var(--g));
	aspect-ratio: 1;
	grid-template-columns: repeat(3, auto);
}

.expanding-gallery>img {
	width: 0;
	height: 0;
	min-height: 100%;
	min-width: 100%;
	object-fit: cover;
	cursor: pointer;
	filter: grayscale(80%);
	transition: .35s linear;
}

.expanding-gallery img:hover {
	filter: grayscale(0);
	width: calc(var(--s)*var(--f));
	height: calc(var(--s)*var(--f));
}