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

.av-logo-link{
	display: inline-block;
	background: url(https://azbyka.ru/wp-content/themes/azbyka-av/assets/images/favicons/favicon.svg) no-repeat center/contain;
	height: 100%;
    width: 1em;
	opacity: .6;
}

.mobnav-btn.active .av-logo-link{
	opacity: 1;
}

#nav-box .av-logo-link{
	display: none;
	height: 1.5em;
    width: 1em;
	position: absolute;
	left: max(calc((100vw - 1540px) / 2), 19px);
}

.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);
	width: 100%;
	overflow:hidden;
	flex-grow: 1;
}

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

#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;
}
#main-nav .menu-item .fa{
	display: inline-block;
	width: 1.5em;
	text-align:center;
}
#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;
}

@media(max-width:768px){
	#nav-box {
		position: fixed;
		top: .75cm;
		z-index: 10;
		left:0;
		right:0;
	}
	
	#main-nav{
		font-size: 19px;
	}
	
	#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: linear-gradient(to top, #76b347, #5e9e2e);
		text-decoration: none;
	}
}

@media(min-width:769px){
	#nav-box {
		display: block;
        background: #f3ecdd;
        background: var(--widget-bg, #f3ecdd);
		box-shadow: none;
    }
	#nav-box .av-logo-link{
		display: inline-block;
	}
	#nav-box .av-logo-link:hover{
		opacity: 1;
	}
	#main-nav{
		font-size: 14px;
		position: static;
		max-height:unset;
		overflow:visible;
		display:flex;
		justify-content:center;
		gap:8px;
        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;
	}
	
	#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: #999;
		text-decoration: none;
	}
}