/**** Menu Stylesheet for OLYMPIA ****/


/* Desktop Nav */

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

#menu a:not(.ln){
	margin-top:0;
}

#menu > ul > li:not(:first-child) > a.ln + ul + span {
    top: 27px;
}


@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: 1rem; letter-spacing: 0px; font-weight: 400; text-decoration: none; display: inline-block; padding: 0.5rem 0 1.5rem 0; color: var(--gray-dark);}
	#topnav > li > a:hover{color: var(--color-base-1);}
	#topnav > li > a:hover > span > svg *{fill: var(--color-base-1);}
	
	.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: 0; border-radius: 0 0 4px 4px;}
	.drop_level2_wrapper a{transition: all 0s;}
	.drop_level2_wrapper a:hover > .flyout_arrow svg *{fill: var(--color-overlay-1) !important;}

	#topnav li .drop_level2_wrapper a{ text-decoration: none; color: var(--gray-dark); 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{ background: var(--color-base-1);}
	#topnav li .drop_level2_wrapper li:hover > a{ font-weight:400; color: var(--color-overlay-1);}

	#topnav > li > .drop_level2_wrapper{ position: absolute; top: 100%; left: -1.5rem; z-index: 2;border-radius: 0 0 4px 4px;}
	#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; border-radius: 5px;}

	.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 (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;border-radius: 0 0 4px 4px;}
}

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

@media all and (max-width: 1100px){
	.togglemenu{ display: block; font-size: 0; background: var(--primary2-lighter); border-radius: 4px; 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: var(--color-base-2) !important;}
	#topnav > li > a > span.button_icon{ display: none;} 
	#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(--color-base-1) !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;}
}

@media all and (max-width: 767px){
	#topnav > li > .drop_level2_wrapper span{
		display:none;
	}
}