.top-tier {
	width:100%;
	background-color:var(--dark);
	color:var(--dark-yellow); 	
	position:relative;
	z-index:100;
	display:none;
}

	.top-tier-grid { 
		display:grid;
		grid-template-columns: 50% auto;
		column-gap: 0; 
		row-gap: 0; 
		max-width:100%;
		width:100%;					
		padding:1em 0; 
		text-transform:uppercase;						
		letter-spacing:0.8px;
	}
					
		.top-tier-left { text-align:left; font-size:0.75rem; }
		.top-tier-right { text-align:right; font-size:1.25rem; letter-spacing:5px; }					
		
			.top-tier-right a { 								
				-webkit-transition: all 250ms linear;
				-ms-transition: all 250ms linear;
				transition: all 250ms linear;									
			}
			
			.top-tier-right a:hover { color:var(--light-yellow); }

.nav-tier {
    width:100%;					
    background-color: rgba(0,0,0,0.3);
    background-size:cover;
    background-position:right;
    opacity: 1;
    position:relative;
    z-index:100;
    border-top: 1px solid rgba(235,233,207,0.2);
    border-bottom: 1px solid rgba(235,233,207,0.5);
    color:#fff;		
    -webkit-transition: all 250ms linear;
    -ms-transition: all 250ms linear;
    transition: all 250ms linear;	
    display:none;	
    box-shadow:0px 3px 5px -1px rgba(0,0,0,0.56);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow: hidden;
}



	.nav-tier-grid {					
		display:grid;
		grid-template-columns: auto 55%;
		column-gap: 0; 
		row-gap: 0; 
		max-width:100%;
	}		

		.nav-tier-left { display:flex;align-items: center; }
		
			.nav-tier-left a {
				line-height:1;
			}
		
			#the-ladd-school-historical-society-logo-desktop {
				width:245px;
				transform: scale(0.95);
				transition: all .2s ease-in-out;
			}

				#the-ladd-school-historical-society-logo-desktop:hover {
					transform: scale(1);					
				}
		
		.nav-tier-right { }
		
			.nav-tier-right-grid {
				display:grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
				column-gap: 0; 
				row-gap: 0; 
				max-width:100%;							
			}
			
				.nav-item {
					display:flex;justify-content: center;align-items: center;
					padding:2em 0.5em;	
					cursor:pointer; 
					-webkit-transition: all 250ms linear;
					-ms-transition: all 250ms linear;
					transition: all 250ms linear;	
					font-weight:700;
					text-shadow:1px 1px 1px #000;
				}
				
				.nav-item:hover { background-color:rgba(0,0,0,0.6); color:var(--bright-yellow); }
				.fixed .nav-item:hover { background-color:#000; color:var(--bright-yellow); }
				.nav-item-selected { background-color:transparent; color:var(--bright-yellow) !important; }

.mobile-nav-tier {
	display:grid;
	grid-template-columns: 50% auto;
	column-gap: 0; 
	row-gap: 0; 
	max-width:100%;
	width:100%;												
	padding:1em 0.75em;
	background-color: rgba(0,0,0,0.2);	
	position:relative;
	z-index:100;
	border-top: 1px solid rgba(235,233,207,0.2);
	border-bottom: 1px solid rgba(235,233,207,0.5);
	color:#fff;		
	-webkit-transition: all 250ms linear;
	-ms-transition: all 250ms linear;
	transition: all 250ms linear;	
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);	
}						

	.mobile-nav-tier-left {
		text-align:left;
		display: flex;
		align-items: center;
	}
	
		.mobile-nav-tier-left a {
			line-height:1;
		}
	
	.mobile-nav-tier-right {
		display: flex;
		justify-content: right;		
		text-align:right;
	}
	
.mobile-menu {
	width:100%;
	height:100vh;	
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	display:none;
}

	.mobile-menu .mobile-nav-tier { border-bottom:none; background-color:var(--dark); }
	
	.mobile-menu-logo { width:100%; text-align:center; padding:1em 0; }
		.mobile-menu-logo img { margin:0 auto; }
	
	.mobile-menu-grid {
		display:grid;
		grid-template-columns: 100%;
		column-gap: 0; 
		row-gap: 0; 
		max-width:100%;
		width:100%;	
		color:#fff;
		padding:1em 0;
	}
	
		.mobile-nav-item {
			font-size:1.33em;
			line-height:2;
		}
				
@media all and (min-width: 1024px) {

	.top-tier, .nav-tier { display:block; padding:0 5% !important; }
	.mobile-nav-tier { display:none; }

}