/**** Menu Stylesheet for Harvey ****/

/* Desktop Nav */
@media all and (min-width: 1100px){
	.mobile_bottom_row, .togglemenu, .mobile_top_row, .subnav_toggle, .drop_level2_wrapper{ display: none;}


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

	#topnav li{ position: relative;}

	#topnav > li{ margin: 0 1rem; }
	#topnav > li > a{ white-space: nowrap; font-size: 0.7777777777777778rem; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 2.333333333333333rem 0;}

	.drop_level2_wrapper{ background: #fff; width: 270px; box-shadow: 0 5px 10px 0 rgba(98,112,121,0.5);}
	.drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 1.5rem 0;}
	#topnav > li:hover::after{ content:""; position: absolute; width: 100%; height: 4px; background: var(--primary1-color); left: 0; bottom: 0;}

	#topnav li .drop_level2_wrapper a{ text-decoration: none; color: #627079; font-size: 1rem; line-height: 155%; font-weight: 400; display: block;}
	#topnav li .drop_level2_wrapper a.drop1_haschildren{ padding-right: 2rem;}
	#topnav li.right_drop .drop_level2_wrapper a.drop1_haschildren{ padding-right: 0; padding-left: 2rem;}
	#topnav li .drop_level2_wrapper li:hover > a{ color: var(--primary1-color);}

	#topnav > li > .drop_level2_wrapper{ position: absolute; top: 100%; left: -1.5rem; z-index: 2;}
	#topnav > li.right_drop > .drop_level2_wrapper{ left: auto; right: -1.5rem;}

	#topnav > li > .drop_level2_wrapper li{ padding: 0.5rem 1rem;}

	#topnav > li:hover > .drop_level2_wrapper{ display: block;}

	.flyout_arrow{ position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 0;}
	.right_drop .flyout_arrow{ right: auto; left: 1rem; transform: translateY(-50%) rotate(180deg);}

	.flyout_arrow svg{ height: 15px; width: auto; vertical-align: middle;}
	.flyout_arrow svg, .flyout_arrow svg *{ fill: var(--primary1-color) !important;}

	/* Flyout (Level 3 items) */
	#topnav li .drop_level2_wrapper li .drop_level2_wrapper{ position: absolute; left: 100%; top: -1.5rem; z-index: 1;}
	#topnav li.right_drop .drop_level2_wrapper li .drop_level2_wrapper{ position: absolute; left: auto; right: 100%; top: -1.5rem; z-index: 1;}

	#topnav li .drop_level2_wrapper li:hover .drop_level2_wrapper{ display: block;}
}

/********** MEDIA QUERIES *************/
@media all and (max-width: 1250px){
	#topnav > li{ padding: 0 0.5rem;}
}

@media all and (max-width: 1100px){
	.togglemenu{ display: block; font-size: 0; background: var(--primary2-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;}
	.togglemenu svg{ vertical-align: middle; height: 15px; width: auto;}
	.togglemenu svg, .togglemenu svg *{ fill: #fff !important;}
	
	#topnav{ list-style: none; margin: 0 auto; padding: 0; width: 90%;}
	#topnav ul{ list-style: none; margin: 0; padding: 0;}
	
	#topnav a{ text-decoration: none; display: inline-block;}
	
	#topnav > li{ position: relative; width: 100%; padding: 0.5rem 0;}
	#topnav > li > a{ font-size: 0.8888888888888889rem; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; padding: 0.5rem 0;}
	
	.subnav_toggle{ position: absolute; right: 0; padding: 0 1rem; top: calc(0.9rem - 7px);}
	.subnav_toggle_icon{ font-size: 0;}
	.subnav_toggle svg{ vertical-align: middle; transition: all 0.3s;}
	.subnav_toggle svg, .subnav_toggle svg *{ fill: var(--primary1-color) !important;}
	
	.subnav_toggle.open svg{ transform: rotate(180deg);}
	
	#topnav > li > .drop_level2_wrapper > ul{ margin-left: 1rem; border-left: solid 1px #C1C7CA;}
	#topnav li li{ padding: 0 0 0 1rem;}
	#topnav li li a{ color: #151210; font-size: 1rem; padding: 0.5rem 0;}
	
	#topnav > li > .drop_level2_wrapper{ display: none;}
}