a {
	text-decoration: none;
}

.navContainer {
	width: calc(100vw - 4 * 1.618 * 25px);
	margin: 2vw auto 4vw auto;
	
	box-shadow: 1.3vw 1.3vw 1vw 0.6vw rgba(0, 0, 0, 0.8), -0.4vw -0.4vw 0.9vw 0.2vw rgba(0, 0, 0, 0.4);
	/*
	box-sizing: border-box;
	outline: outset 2vw  hsl(0, 0%, 34%);
	*/
}

.navMenu {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	height: auto;
	
	position: relative;
	z-index: 2;
	
	box-shadow: 0vw 2vw 2vw 0 rgba(0, 0, 0, 0.6);
}

.subNavMenu {

	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	height: auto;
}

@media (max-width: 1000px) {
.navMenu {
	flex-flow: row wrap;
}
}

.menuItem {
	flex: 1 1 auto;
	padding: 10px;

    font-family: 'appleGaramond';
    font-weight: 'light';
	color: black;
	text-align: center;
	font-size:  clamp(10px, calc(7px + 2vw), 30px);
	height: auto;
	
	background-color: hsl(0, 0%, 67%);
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	z-index: 1;
	
	height: clamp(40px, 5vh, 60px);
}

.subMenuItem {

	flex: 1 1 auto;
	padding: 10px;

    font-family: 'appleGaramond';
    font-weight: 'light';
	color: black;
	text-align: center;
	font-size:  clamp(10px, calc(7px + 2vw), 30px);
	height: auto;
	
	background-color: hsl(0, 0%, 42%);
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	z-index: 1;
	
	height: clamp(40px, 5vh, 60px);

}


#currentNav {
	position: relative;
	border: none;
	z-index: 2;
	color: hsl(0, 0%, 70%);
	background-color:  hsl(0, 0%, 30%);
	box-shadow: inset 14px 14px 7px rgba(0, 0, 0, 0.5);
	
	overflow:visible;
}

#currentSubNav {
	color: hsl(0, 0%, 70%);
	background-color:  hsl(0, 0%, 30%);
	box-shadow: inset 14px 14px 18px rgba(0, 0, 0, 0.8);

}


.subMenuItem:hover:not(#currentNav):not(#currentSubNav), 
.menuItem:hover:not(#currentNav):not(#currentSubNav) {
	color: blue;
	background-color: lightgray;
	cursor: pointer;
	box-shadow: 1.3vw 1.3vw 1vw 0.6vw rgba(0, 0, 0, 0.8), -0.4vw -0.4vw 0.9vw 0vw rgba(0, 0, 0, 0.4);
	z-index: 10;
	outline: none;
	
	text-decoration: underline;
	
	transform: scale(1.18);
	transition: transform 0.2s ease;
}


.navImageContainer {
	flex: 0 0 auto; /* Don’t grow or shrink, size to fit content */

}

.navImage {
	flex: 0 0 auto; /* don’t grow or shrink, take natural size */
    width: auto;
    max-height: 100%;
    object-fit: contain;
    padding: 0; /* remove padding for tight fit */
}