/* Main nav */

#topnav{ list-style: none; margin: 0; padding: 0; display: flex;}

#topnav li{ position: relative;}

#topnav .top_nav_link a{ color: var(--black); font-size: 0.9rem; font-weight: 600; }

#topnav > li + li{ margin-left:2rem;}

/* drop menu */
#topnav li .drop_level2_wrapper{ display: none; position: absolute; z-index: 999; top:100%; left: 50%; transform: translateX(-50%); padding-top: 1rem; width: 10.25rem;}

#topnav li .drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 1rem 0.75rem; background-color: #fff;  box-shadow: 0px 2px 9px 5px rgba(0,0,0,0.06); border-radius: 6px;}
#topnav li .drop_level2_wrapper ul li + li{ padding: 1rem 0 0 0;}
#topnav li .drop_level2_wrapper ul li a{ color: var(--defaultText); font-size: 0.9rem; font-weight: 400;}
#topnav li .drop_level2_wrapper ul li a:hover{ color: var(--red);}

#topnav li:last-child .drop_level2_wrapper{ right: 0; left: auto; transform: none;}

/* landing pages - longer main navs */
.landing #topnav > li + li{ margin-left: 0; padding: 0 1vw;}
.landing #topnav .top_nav_link a{ white-space: nowrap;}
.landing #topnav{ justify-content: space-between;}
.landing #nav_panel{ width: 100%;}

/*** MEDIA QUERIES ****/

/* desktop */
@media all and (min-width: 1024px){
	.subnav_toggle_icon{ display: none;}

	#topnav .top_nav_link a:hover{ color: var(--red);}
	#topnav li:hover .drop_level2_wrapper{ display: block;}
}

@media all and (max-width: 1500px) {
	.landing.vie #topnav .top_nav_link a{ font-size: 0.75rem;}
}

@media all and (max-width: 1400px) {
	.landing #topnav .top_nav_link a{ font-size: 0.75rem;}
}

@media all and (max-width: 1350px) and ( min-width: 1024px) {
	.landing.vie #topnav .top_nav_link a{ font-size: 0.6rem;}
	.landing.vie #logo_container{ min-width: 140px; max-width: 240px;}
}

/* mobile */
@media all and (max-width: 1024px){
	#nav_panel{ position: fixed; z-index: -1; right: 0; top: 0; transform: translateX(100%); background-color: #fff; width: 100%; height: 100%; max-height: 100vh; overflow-x: hidden; overflow-y: auto; transition: all 0.3s; z-index: 9999;}
	#nav_panel.open{ transform: translateX(0);}
	
	.mobile_nav_toggle.close_menu{ text-align: right;}
	.mobile_nav_toggle.close_menu svg{ padding: 1rem; background-color: var(--red);}
	.mobile_nav_toggle.close_menu svg, .mobile_nav_toggle.close_menu svg *{ fill: #fff !important;}
	
	#topnav{ display: block; padding: 2rem 0; border-top: thin solid #E3E5E5;}
	#topnav > li + li{ margin-left: 0; margin-top: 2rem;}
	.landing #topnav > li + li{ margin-left: 0; margin-top: 2rem; padding: 0;}
	
	.top_nav_link{ justify-content: space-between; padding: 0 1rem; align-items: center;}
	
	#topnav li .drop_level2_wrapper{ position: relative; top: auto; left: auto; padding-top: 0; transform: none;}
	#topnav li .drop_level2_wrapper ul{ box-shadow: none;}
	
	.landing #topnav .top_nav_link a{ font-size: 0.9rem;}
}