/* main nav */

.nav_icon{ padding: 10px 0; text-align: center; width: 60px;}
.nav_icon span{ width: 30px; height: 30px; fill: #fff; display: inline-block;}
.nav_icon span svg{ fill: #fff; height: 30px;}
.nav_icon .menu-close{ display: none;}
.nav_icon.open .menu-close{ display: inline-block;}
.nav_icon.open .menu_open{ display: none;}
.nav_icon.open{ background: #b65e00; box-shadow: 0 5px 6px rgba(0,0,0,0.24);}

.nav_icon.desktop{ display: inline-block; }
.nav_icon.mobile{ display: none;}
.nav_icon.mobile i{ color: #fff;}

.mm-opened .nav_icon.mobile .menu_open{ display: none;}
.mm-opened .nav_icon.mobile .menu-close{ display: inline-block;}

#topnav{ /* display: none; */ visibility: hidden; list-style: none; margin: 0; padding: 0; justify-content: space-between; align-items: center; background: #292b2c; position: absolute;}
#topnav.active{ display: flex; position: absolute; top: 50%; transform: translateY(-50%); right: 60px; box-shadow: 0 5px 6px rgba(0,0,0,0.24); visibility: visible;}
#topnav li{ display: inline-block; padding: 15px 1.4em; position: relative;}
#topnav li a{ font-size: 1.22em; color: #fff; padding: 10px 0px; font-weight: 300; letter-spacing: 0.01em; text-decoration: none;}


#topnav li ul{ display: none; background: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; margin: 0; padding: 0; width: 205px; text-align: center; border-bottom: solid #1d3161 4px; padding-top: 10px;}
.drop_arrow{display: none; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(-50%); color: #1d3161; background: #fff; border-radius: 50%; font-size: 1em; padding: 1px 9px; text-align: center; z-index: 1;}
.drop_arrow svg{ fill: #b65e00 !important; width: 11px; height: 8px;}

#topnav li.scrolldrop ul{ overflow: auto; }

#topnav li ul li{ display: block; text-align: center;}
#topnav li ul li a{ color: #1d3161; font-size: 1em; font-weight: 500; padding: 1.1em 0;}


#topnav li ul ul{ display: none !important;}

/* sticky header */
.sticky #topnav.active, .sticky .nav_icon.open{ box-shadow: none;}

/*** mmenu ***/
.mm-menu{ z-index: 9999;}
.mm-listview > li > a, .mm-listview > li > span{ font-size: 1.25em; line-height: 200%;}
.mm-menu .mm-listview > li .mm-prev:before, .mm-menu .mm-listview > li .mm-next:after, .mm-menu .mm-listview > li .mm-arrow:after, .mm-menu .mm-navbar .mm-btn:before, .mm-menu .mm-navbar .mm-btn:after{ border-color: #fff;}

html.mm-opened{ background: #000;}
html.mm-opened #page{ opacity: 0.4;}

/**** MEDIA QUERIES *****/

@media only screen and (min-width: 767px){
	#topnav{ transform: translateY(-100%);}
	
	#topnav li:hover a{ font-weight: 700;}
	#topnav li:hover ul, #topnav li:hover .drop_arrow{ display: block;}
	#topnav li ul li:hover a{ color: #b65e00;}
	
	/* .main_nav:hover #topnav{ display: block;}
	.main_nav:hover .nav_icon .menu-close{ display: inline-block;}
	.main_nav:hover .nav_icon span.menu_open{ display: none;}
	
	.main_nav:hover .nav_icon{ background: #b65e00; box-shadow: 0 5px 6px rgba(0,0,0,0.24);} */
}

@media only screen and (max-width: 1024px) {
	.nav_icon i{ font-size: 25px;}
}

@media only screen and (max-width: 767px){
	.nav_icon.mobile{ display: inline-block; }
	.nav_icon.desktop{ display: none;}
	
	#topnav.active{ top: 100%; right: 0px !important; display: block; transform: none; width: 100%;}
	#topnav li{ display: block;}
	#topnav li a{ display: block;}
}