/* Main Nav CSS for GD-FL */

.togglemenu, .togglemenu_close{ display: none; font-size: 0;}
.togglemenu svg{ width: 34.3px; height: 30px;}
.togglemenu_close svg{ width: 30px; height: 30px;}

.nav_arrow, .nav_arrow_level2, .nav_arrow_level3, .nav_arrow_back_level3{ display: none;}
.nav_arrow svg, .nav_arrow_level3 svg{ height: 22px; width: 14.2px;}
.nav_arrow_level2 svg, .nav_arrow_back_level3 svg{ height: 30px; width: 19.4px; transform: rotate(180deg);}

/*** desktop nav ***/
@media all and ( min-width: 1100px ) {

	#topnav{ display: flex; transform: translateY(35%);}

	/* top level items */

	#topnav > li{ margin: 0 1rem; font-size: 0; position: relative;}
	#topnav > li > a{ color: #000; font-size: 0.7272727272727273rem; font-weight: 700; text-transform: uppercase;}

	/* drop menu */
	.drop_level2_wrapper{ display: none;}

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

	#topnav > li > .drop_level2_wrapper{ padding-bottom: 65px; overflow: hidden; position: absolute; top: 100%; left: -40%; padding-top: 36px; width: 12.40909090909091rem;}
	#topnav > li.right_drop > .drop_level2_wrapper{ left: auto; right: -10%;}

	#topnav > li > .drop_level2_wrapper:after{ content:""; width: 110%; height: 65px; background: #064931; border-bottom: solid 3px #ffc820; position: absolute; bottom: 0; left: 0; transform: skew(0deg, -7deg) translateY(-28%); }

	#topnav > li > .drop_level2_wrapper > ul{ background: #064931; padding: 1rem 2rem;}

	/* level 2 items */
	#topnav li ul > li > a{ color: #fff; font-family: 'Oswald', sans-serif; font-size: 1.090909090909091rem; font-weight: 600; display: block; margin: 0.75rem 0;}
	#topnav li ul > li > a:hover{ color: #ffc820;}

	/* level 3 items **/
	#topnav > li li:hover > .drop_level2_wrapper{ display: block;}

	#topnav li ul li li > a{ font-size: 0.7727272727272727rem; letter-spacing: 0.05em; font-style: italic; font-weight: 400; margin: 0.75rem 0 0.75rem 1rem; display: block;}
	
	/* sticky header stuff */
	header.sticky #topnav > li > .drop_level2_wrapper{ padding-top: 40px;}
}

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


@media all and ( max-width: 1600px ) {
	#topnav > li > a{ font-size: 1rem;}
	#topnav > li > .drop_level2_wrapper{ padding-top: 45px;}
	
	/* sticky header stuff */
	header.sticky #topnav > li > .drop_level2_wrapper{ padding-top: 27px;}
}

@media all and ( max-width: 1400px ) {
	#topnav > li{ margin: 0 0.75rem;}
}

@media all and ( max-width: 1300px ) {
	#topnav > li{ margin: 0 0.5rem;}
	
	#topnav > li > .drop_level2_wrapper{ padding-top: 33px;}
	/* sticky header stuff */
	header.sticky #topnav > li > .drop_level2_wrapper{ padding-top: 27px;}
	
	
}

@media all and ( max-width: 1200px) and (min-width: 1100px ) {
	header.sticky #topnav > li > a{ font-size: 0.9rem;}
}

@media all and ( min-width: 1100px ) {
	#topnav > li > .drop_level2_wrapper > ul{ overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 18rem); position: relative; z-index: 2;}
	
}
	
@media all and ( max-width: 1100px ) {
	.togglemenu, .togglemenu_close, .nav_arrow, .nav_arrow_level3{ display: block;}
	
	.nav_container{ position: relative; z-index: 9999999;}
	.nav_content{ width: 100%; height: 100%; max-height: 95vh; overflow-x: hidden; overflow-y: auto; position: relative;}
	
	#mainnav{ visibility: visible; display: none; position: fixed; right: 0; top: 0; width: 100%; height: 100%; transform: translateX(100%); transition: all 0.3s; /* z-index: -100; */ background: #064931; text-align: center;}
	#mainnav.open{ transform: translateX(0); z-index: 9997; display: block;}
	
	.togglemenu_close{ position: absolute; top: 0; right: 0; padding: 1rem;}
	
	#topnav{ margin: 5rem 0 3rem; padding: 0 1rem; list-style: none;}
	#topnav li{ position: relative;}
	
	#topnav > li{ padding: 1rem 0;}
	#topnav > li > a{ color: #fff; font-size: 1.25rem; font-weight: 700; text-transform: uppercase;}
	
	.nav_arrow, .nav_arrow_level3{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index:10; padding: 0 1rem;}
	
	.nav_arrow_level2, .nav_arrow_back_level3{ position: absolute; left: 0; top: 0; padding: 1rem; display: block; font-size: 0;}
	
	#topnav > li > .drop_level2_wrapper{ visibility: hidden; position: fixed; right: 0; top: 0; max-height: 100vh; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; transform: translateX(100%); transition: all 0.3s; z-index: -100; background: #064931; text-align: center;}
	#topnav > li > .drop_level2_wrapper.open{  transform: translateX(0); z-index: 9998; visibility: visible;}
	
	#topnav > li > .drop_level2_wrapper > ul{margin: 5rem 0 3rem; }
	
	#topnav li ul > li > a{ color: #fff; font-family: 'Oswald', sans-serif; font-size: 1.090909090909091rem; font-weight: 600; display: block; padding: 0.75rem 0;}
	
	#topnav > li li > .drop_level2_wrapper{ display: block; visibility: hidden; position: fixed; right: 0; top: 0; max-height: 100vh; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; transform: translateX(100%); transition: all 0.3s; z-index: -100; background: #064931; text-align: center;}
	#topnav > li li > .drop_level2_wrapper.open{  transform: translateX(0); z-index: 9999; visibility: visible;}
	
	#topnav > li > .drop_level2_wrapper .drop_level2_wrapper > ul{margin: 5rem 0 3rem; }
	
	#topnav li ul li li > a{ font-size: 0.8rem; letter-spacing: 0.05em; font-style: italic; font-weight: 400; display: block; margin: 1rem 0;}
}