#nav-box {
	display: none;
	position: relative;
	z-index: 1;
	box-shadow: 4px 4px 10px -4px #3a3a3a3a;
	font-size: 1.25rem;
}

.nav-logo {
	display:none;
    opacity: .5;
}

.nav-logo:hover {
	opacity: 1;
}

.nav-logo img{
	height: .5cm;
    width: .6cm;
	margin: 2px 2px 2px -2px;
	object-fit: contain;
}

.pre-header-nav{
	padding: 10px;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -1px;
    color: #6B4F38;
    display: block;
    background: #F8F4EB;
	text-align:center;
}

#main-nav{
	background: #fff;
	background: var(--body-bg, #fff);
	overflow:hidden;
	flex-grow: 1;
}

#main-nav .link{
	cursor: pointer;
	white-space: nowrap;
}

#main-nav, #main-nav ul{
	list-style:none;
	margin:0;
	padding: 0;
}

#main-nav .sub-menu{
	max-height:0;
	overflow:hidden;
	opacity:0;
	pointer-events:none;
	z-index:100;
	
	white-space:nowrap;
	text-align: left;
	
	background: #fff;
	background: var(--widget-bg, #f3ecdd);
	padding: 0;
	margin:0;
	border-radius: 0 6px 6px 6px;
	box-shadow: 4px 4px 10px -4px #3a3a3a3a;
	
	transition: opacity .3s ease, max-height .3s ease;
}
#main-nav .menu-item{
	text-align: left;
	break-inside: avoid;
}
#main-nav .menu-item .fa{
	display: inline-block;
	width: 1.5em;
	text-align:center;
	opacity: .6;
}
#main-nav .menu-item>.link,
#main-nav .menu-item>a{
	display:block;
	padding: .5em;
	color: #3a3a3a;
	color: var(--text-color, #3a3a3a);
	opacity: .9;
	text-decoration: none;
}

#main-nav .menu-item.active-menu-item .sub-menu{
	max-height:100vh;
	opacity:1;
	pointer-events:all;
}

#main-nav .menu-item.active-menu-item>.link,
#main-nav .menu-item.active-menu-item>a{
	color: #fff;
	background: #909090;
	text-decoration: none;
}

@media(max-width:768px){
	#nav-box {
		position: fixed;
		top: .75cm;
		z-index: 10;
		left:0;
		right:0;
	}
	
	#main-nav{
		font-size: 19px;
	}
	
	#nav-box .main-box{
		padding: 0;
	}
	
	#main-nav .menu-item.active-menu-item .sub-menu{
		max-height:100vh;
		opacity:1;
		pointer-events:all;
	}

	#main-nav .menu-item.active-menu-item>.link,
	#main-nav .menu-item.active-menu-item>a{
		color: #fff;
		background: #909090;
		text-decoration: none;
	}
}

@media(min-width:769px){
	#nav-box {
		white-space: nowrap;
        background: #f3ecdd;
        background: var(--widget-bg, #f3ecdd);
		box-shadow: none;
		max-height: calc(100vh - .75cm);
		z-index: 1000;
    }
	
	.nav-logo{
		display: inline-block;
	}
	
	#main-nav{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		position: static;
		max-height:unset;
		overflow:visible;
		
        margin: auto;
		background: var(--widget-bg, #f3ecdd);
	}
	
	#main-nav .menu-item{
		position:relative;
	}
	
	#main-nav .sub-menu{
		background: var(--body-bg, #fff);
		position: absolute;
		left:0;
	}
	
	#main-nav .menu-item>.link,
	#main-nav .menu-item>a{
		padding: .25em .5em .33em;
	}
}

@media(min-width:1000px){
	#nav-box {
		display: block;
    }
	
	#main-nav{
		font-size: 14px;
		display:inline-flex;
		justify-content:center;
	}
}

@media(hover:hover), (min-width: 1000px){
	#main-nav .menu-item:hover .sub-menu{
		max-height:100vh;
		opacity:1;
		pointer-events:all;
	}

	#main-nav .menu-item:hover>.link,
	#main-nav .menu-item:hover>a{
		color: #fff;
		background: #909090;
		text-decoration: none;
	}
}