/* Menu CSS for Wycliffe Signature Theme */
#mainnav, #topnav > li, #topnav > li > a{ display: flex; align-items: center; height: 100%;}

#topnav{ margin: 0; padding: 0; list-style: none; display: flex; align-items: center; height: 100%;}
#topnav li{ position: relative;}
#topnav li a{ font-family: 'Fjalla One', sans-serif; text-decoration: none; font-weight: normal;}
#topnav > li > a{ color: #000000; text-transform: uppercase; font-size: 1.176470588235294rem; letter-spacing: 0.01em; padding: 0 1.66666666666667vw; transition: all 0.3s; position: relative;}
#topnav > li > a::before{ content:""; position: absolute; top: 0; left: 0; height: 7px; background: var(--color-base-1); transition: all 0.3s; width: 100%; opacity: 0;}
#topnav > li:last-child > a{ padding-right: 0;}

#topnav li .drop_level2_wrapper{ position: absolute; display: none; top: 100%; left: 50%; transform: translateX(-50%); background: rgba(var(--color-rgb-1),0.92); width: 11.52941176470588rem; max-height: calc(100vh - 7.294117647058824rem - 3.529411764705882rem); overflow-y: auto;}
#topnav li:last-child .drop_level2_wrapper{ transform: none; left: auto; right: 0;}


#topnav li .drop_level2_wrapper ul{ list-style: none; margin: 0; padding: 1.411764705882353rem;}
#topnav li .drop_level2_wrapper ul.level3{ padding-bottom: 0;}
#topnav li .drop_level2_wrapper ul li{ margin-top: 1.411764705882353rem; position: relative; display: flex;}
#topnav li .drop_level2_wrapper ul li:first-child{ margin-top: 0;}
#topnav li .drop_level2_wrapper ul li a{ display: block; font-size: 1.058823529411765rem; letter-spacing: 0.01em; color: var(--color-overlay-1); }

#topnav li:last-child .drop_level2_wrapper ul li{ justify-content: flex-end; text-align: right;}

#topnav li .drop_level2_wrapper ul li::before{ content:">"; display: inline-block; opacity: 0; color: var(--color-overlay-1); padding-right: 1rem;}

.togglemenu{ display: none; font-size: 0;}

/** Enhanced Nav - Dropdown with Button */
.enhanced_nav{ position: relative;}
.enhanced_nav #topnav li{ position: static; display: block;}
.enhanced_nav #topnav li .drop_level2_wrapper{ left: auto; right: 0; transform: none; width: calc(65.78125vw - 20px); padding: 2rem 0;}
.enhanced_nav #topnav li .drop_level2_wrapper ul li{ position: relative; display: block;}

.enhanced_nav #topnav li .drop_level2_wrapper ul li::before{ display: none;}
#topnav li .drop_level2_wrapper ul li a::before{ content:">"; display: inline-block; opacity: 0; color: #fff; padding-right: 1rem; position: absolute; top: 0; left: 0;}
.enhanced_nav #topnav li .drop_level2_wrapper ul li a{ padding-left: 1.5rem; position: relative;}

.enhanced_nav #topnav li .drop_level2_wrapper ul{ column-count: 3;}

.enhanced_nav .nav_button{ background: #fff; font-size: 1.764705882352941rem; color: #000; transition: all 0.3s; white-space: nowrap; padding: 1.176470588235294rem 3.5rem;}
.enhanced_nav .nav_button:hover{ background: var(--color-base-2); color: var(--color-overlay-2);}

.nav_left{ display: flex; align-items: center; padding: 0 2rem;}

/*** MEDIA QUERIERS ****/

/** Desktop only (hover states) **/
@media all and ( min-width: 767px) {
	#topnav > li > a:hover::before{ opacity: 1;}
	#topnav li:hover > .drop_level2_wrapper{ display: block;}
	
	.enhanced_nav #topnav li:hover > .drop_level2_wrapper{ display: flex;}
	
	#topnav li .drop_level2_wrapper ul li:hover a::before{ opacity: 1;}
	
	.subnav_toggle{ display: none;}
}

@media all and (max-width: 1600px) {
	.enhanced_nav .nav_button{ font-size: 1.25rem; padding: 1.5rem 2.5rem;}
}

@media all and (max-width: 1280px) {
	.nav_left{ padding: 0 1.5rem;}
	.enhanced_nav #topnav li .drop_level2_wrapper ul li a{ padding-left: 1rem; font-size: 1rem;}
}

@media all and (max-width: 1024px){
	.enhanced_nav #topnav li > .drop_level2_wrapper{ width: 100%;}
}

@media all and ( max-width: 767px) {
	/** mobile menu **/
	#mainnav, #topnav > li, #topnav > li > a, .nav_bar > .wrapper{ display: block; height: auto; align-items: unset;}
	
	.togglemenu{ display: block;}
	
	.subnav_toggle{ display: inline-block; position: absolute; padding: 0 1rem;}
	.subnav_toggle.open{ transform: rotate(180deg);}
	.subnav_toggle svg, .subnav_toggle svg *{ fill: var(--color-base-1) !important;}
	
	#topnav{ display: none; position: absolute; top: 100%; left: 0; height: calc(100vh - 8rem - 7.294117647058824rem - 10px); width: 100%; background: #fff; text-align: center; padding: 1rem 0 3rem 0; border-top: 2px solid #ebebeb; box-shadow: 0 8px 12px rgba(0,0,0,0.16); overflow-x: hidden; overflow-y: auto;}
	#topnav li{ text-align: center; display: block;}
	#topnav > li{ padding: 0.75rem 0;}
	#topnav > li > a{ display: inline-block; position: relative; font-size: 1.25rem; padding: 0; height: auto;}
	
	#topnav li .drop_level2_wrapper{ position: relative; width: 100%; margin-top: 0.5rem;}
	
	#topnav li .drop_level2_wrapper ul li, #topnav li:last-child .drop_level2_wrapper ul li{ justify-content: center; text-align: center;}
	
	#topnav li .drop_level2_wrapper ul li::before{ display: none;}
	
	/* enhanced nav */
	.enhanced_nav #topnav li .drop_level2_wrapper ul{ column-count: 1;}
	.nav_left{ justify-content: center;}
	
}


/* Level 2 and 3 Mobile view styling */
.open_nav #topnav  .drop_level2_wrapper > ul > li,.open_nav #topnav  .drop_level2_wrapper > ul > li > .drop_level2_wrapper_mobile > ul > li {
    flex-direction: column;
}
.open_nav #topnav  .drop_level2_wrapper > ul > li > .drop_level2_wrapper_mobile > ul > li a{
color: rgba(225,225,225,0.85);
}
.open_nav #topnav .drop_level2_wrapper_mobile {
    border-top: 1px solid rgba(255,255,255,0.8);
    margin-top: 1em;
}
.open_nav #topnav li .drop_level3_wrapper_mobile ul li{
    justify-content: start;
}
.open_nav #topnav li .drop_level3_wrapper_mobile ul li a {
    margin-left: 50%;
}