/**** 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.78rem; text-decoration: none; display: inline-block; padding: 2.3rem 0; line-height: 1.3rem; color: var(--cccBlack);text-transform: uppercase;letter-spacing: 1.5px; font-weight:700;}
	#topnav > li > a:hover{color:var(--primary1-color);}

	.drop_level2_wrapper{ background: #fff; width: 200px; box-shadow: 0 5px 10px 0 rgba(98,112,121,0.5);}
	.drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 0.7rem 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: var(--cccBlack); font-size: 0.78rem; line-height: 155%; font-weight: 400; display: block; letter-spacing: 0.16px;}
	#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{ background-color: var(--menu-hover-l1);}

	#topnav > li > .drop_level2_wrapper{ position: absolute; top: 70%; left: -1.5rem; z-index: 2; border-radius: 5px;}
	#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: 10px; 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: -0.8rem; 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;border-radius: 5px; background-color: var(--menu-hover-l1);}
	
	#topnav li .drop_level2_wrapper li:hover .drop_level2_wrapper li:hover{ background-color: var(--menu-hover-l2);}
}

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

@media all and (max-width: 1100px){
	
	.togglemenu{ font-size: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;}
	
	.togglemenu svg{ vertical-align: middle; height: 24px; width: auto;}
	.togglemenu svg, .togglemenu svg *{ fill: var(--primary1-color) !important;}
	
/*	.togglemenu:hover{ background: var(--primary2-color); border-radius: 8px;}*/
	
	#topnav{ list-style: none; margin: 5px auto; padding: 0; width: 100%;}
	#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;border-bottom: 1px solid #cccccc;margin: 0;transition:al 0.3s ease-out;}
	
	.l2_open #topnav > li{border-bottom: none;margin: 0;}
	
	#topnav > li > a{ font-size: 1rem; font-weight: 600; padding: 0.5rem 0; letter-spacing: 1.5px; line-height: 1.2; text-transform: uppercase; margin-left: 1rem; color: var(--ccc-black);}
	
	.subnav_toggle{ position: absolute; right: 0; padding: 0 1rem; top: calc(0.9rem - 7px);transition: all 0.3s ease-out;}
	.subnav_toggle_icon{ font-size: 0;}
	.subnav_toggle svg{ vertical-align: middle; transition: all 0.3s;height:16px;}
	.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 var(--primary2-color);}
	#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;}
}