.clear{clear:both;}

nav.mobile {display:none;}

@media screen and (min-width: 1251px)  {
	nav.primary {
		padding:0;
		display:flex; justify-content: flex-end; align-items: stretch; 
		margin:0;
		width:100%;
		position:relative; z-index: 5; 
	}
	nav.primary ul {
		margin:0; 
		padding:0;position: relative; 
		display:flex; justify-content: flex-end; align-items: stretch; column-gap: 16px; 
	}
	nav.primary ul li {
		display:flex; justify-content: center; align-items: stretch; 
		margin:0;position: relative; 
		list-style-type:none; 
		width:auto; border-bottom: 2px solid transparent; transition: .3s ease all; 
	}
	nav.primary > ul > li:hover {border-bottom-color: #C89956;}
	nav.primary ul li a {
		color:#fff; font-family: 'Montserrat', sans-serif; 
		font-size:16px; position: relative; 
		line-height:1.5;
		text-decoration:none;
		display:flex; justify-content: center; align-items: center; 
		margin:0;
		text-align:center;
		text-transform:uppercase; letter-spacing: 1px; 
		-webkit-transition:.2s ease-in;  
		-moz-transition:.2s ease-in;  
		-o-transition:.2s ease-in;  
		transition:.2s ease-in;	
		font-weight:500;
		padding:0;
		cursor: pointer; 
	}	
	nav.primary ul li a:hover {
		cursor: pointer; 
	}
	/* Appearance of the sub-level links */
	nav.primary ul li li a { 
		font-size:14px;
		line-height:1;
		padding:8px 16px; justify-content: flex-start; 
		color:#fff;
		background: #0a0a0a;text-transform: none; 
		text-align:left;
		border-right:1px solid #ccc;
		border-left:none;
		border-bottom: #ccc solid 1px;
	}
	/* Appearance of the sub-level links on hover */
	nav.primary ul li li a:hover { 
		color: #C89956; 
	}

	/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
	nav.primary ul ul {
		display: none; border-top: 2px solid #C89956; 
		position: absolute; top: 100%; right: 0; 
		width: unset; column-gap: 0!important; row-gap: 0!important; 
	}
	nav.primary ul ul ul {
		position: absolute; 
		left: 100%;
		top:0; 
	}
	nav.primary ul li a.open ~ ul {  
		display: flex; flex-direction: column; align-items: stretch; width: max-content; 
		z-index: 100;
	}
	nav.primary ul ul li {
		float: none; justify-content: stretch; 
		position: relative; border: none!important; 
		margin:0;
	}
	nav.primary ul ul li a { width: 100%; }
	
	nav.primary ul li a.open ~ ul#townsstyle {
		flex-wrap: wrap!important; flex-direction: row!important; width: 492px!important; align-items: flex-start!important; justify-content: flex-start!important; display: flex!important; 
	}
	nav.primary ul li a.open ~ ul#townsstyle li { height: 30px; width: 164px!important; }
}

@media only screen and (max-width: 1360px) {
	nav.primary > ul { column-gap: 8px; }
}

@media only screen and (max-width: 1280px) {
	nav.primary > ul { column-gap: 4px; }
}

nav.mobile ul li a.open ~ ul { display: flex!important; flex-direction: column; align-items: flex-start; }

.click:after {
	font-family: 'Font Awesome 6 Free', icon; font-weight: 900!important; font-size: 10px; margin-bottom: 3px; 
	content: "\f078"; margin-left: 8px; transition: .3s ease all; 
}
.click:hover:after, .click.open:after { transform: rotate(180deg); }

.mobile + .menu-toggle.exit-click{
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 499;
	pointer-events: none;
	opacity: 0;	
	transition: ease opacity 0.3s;
}
.mobile.open + .menu-toggle.exit-click{
	pointer-events: auto;
	opacity: 1;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}


.aa-header-right-top a.menu-toggle {
	color:#fff; position: relative; margin-left: 16px; 
	cursor: pointer; width: 45px; height: 40px; 
	border: 1px solid #fff; border-radius: 0;  transition: .3s ease all; 
}
.aa-header-right-top a.menu-toggle:after, .mmtoggle-bar:before, .mmtoggle-bar:after {
	position: absolute; content: ""; right: 8px; background: #fff; height: 2px; transition: .3s ease all; 
}
.aa-header-right-top a.menu-toggle:after { width: calc(60% - 16px); top: 23%; }
.mmtoggle-bar:before { width: calc(80% - 16px); top: 49%; }
.mmtoggle-bar:after { width: calc(100% - 16px); top: 73%; }

.aa-header-right-top a.menu-toggle:hover:after, .aa-header-right-top a.menu-toggle:hover .mmtoggle-bar:before, .aa-header-right-top a.menu-toggle:hover .mmtoggle-bar:after { width: calc(100% - 16px); }

nav.mobile {
	display: block;
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .85);
	z-index: 500; /* needs to be higher than #menu-button, adjust as needed */
	overflow:auto;
}

/* MENU HEADER STYLES */
nav.mobile .mobile_top {
	position: relative;
	display:block;
	color: #999;
	font-size: 18px;
	font-weight: 400;
	padding: 24px 20px; 
}

/* MENU CLOSE 'X' BUTTON */
nav.mobile .menu-toggle:not(.exit-click) {
	position: absolute;
	padding: 3px 8px 3px;
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	border: 1px solid #fff; 
	color: #fff;
	text-decoration: none;
	top: 16px;
	right: 16px;
	cursor: pointer; 
}

/* MENU LIST STYLE */
nav.mobile > ul {
	list-style: none;
	margin:0;
	padding:0; padding: 0 5%; 
	display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; 
}
nav.mobile ul li {
	position:relative;list-style: none;
	margin:0;
	padding:0;
}
nav.mobile > ul > ul {display: flex; flex-direction: column; align-items: flex-start; list-style: none;
	margin:0;
	padding:0;}

.mobile-menu-nav {}
.mobile-menu-soc {}

@media only screen and (max-width: 769px) {
	nav.mobile ul { flex-direction: column; align-items: stretch; }
}

/* FIRST LEVEL */
nav.mobile ul li a {
	position: relative;
	cursor: pointer; text-transform: uppercase; 
	display: flex; justify-content: flex-start; align-items: center; min-height: 40px; 
	font-size: 15px; font-weight: bold;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	text-align: left;
}
nav.mobile ul li a:hover {
	color: #C89956; 
}
.mobile-menu-soc a {text-transform: none!important; }
.mobile-menu-soc a i {margin-right: 8px; }

/* SECOND LEVEL */
nav.mobile ul li li a {
	
	position: relative;
	display: flex; justify-content: flex-start; align-items: center; min-height: 40px; 
	padding: 10px 10px 10px 15px;
	text-decoration: none;
}

/* THIRD LEVEL */
nav.mobile ul li li li a {
	position: relative;
	display: flex; justify-content: flex-start; align-items: center; min-height: 40px; 
	padding: 10px 10px 10px 25px;
	text-decoration: none;
}

@media screen and (max-width: 1250px)  {
	nav.primary{display:none;}
}