.clear{clear:both;}

/***** Start of primary nav ******/

.nav-wrap {
    width: 100%;
    float: left;
	background: #820001;
	text-align: right;
	padding: 10px 3%;
	box-sizing: border-box;
	border-bottom: solid 5px #000;
}

nav.mobile{display:none;}
#menu-button{display:none;}

nav.primary-menu{
	width: 100%;
	padding:0;
	margin:0;
	z-index: 500;
	position:relative;}
	
.primary-menu ul {
	list-style-type: none;
	padding: 0; 
	margin: 0;	
}

nav ul li {display: inline-block;}

nav ul li a{
	color: #fff;
    font-size: 13.5px;
    padding: 10px 1vw;
	display: block;
	background: transparent;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

nav ul li a:hover{background-color: #000;}

.horizontal-menu{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}

	/* Appearance of the sub-level links */
			nav.primary-menu ul li li a { 
				font-size:14px;
				padding:10px;
				color:#fff;
				text-align:left;
				border: none;
				background: #000;
			}
			/* Appearance of the sub-level links on hover */
			nav.primary-menu ul li li a:hover { 
				background: #333;
				transition:.2s ease-in;
			}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary-menu ul ul {
    display: none;
    position: absolute; 
	width: 200px;
}
nav.primary-menu ul ul ul {
    position: absolute; 
    left: 100%; 
}
nav.primary-menu ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100; 
}
nav.primary-menu ul li ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
	padding-top: 15px;
}
nav.primary-menu ul li ul li ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
}
nav.primary-menu ul ul li {
    position: relative;
    margin:0;
	display: block;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}


/*==============================
	Responsive Primary Styles		
================================*/	
@media screen and (max-width:1615px){ 
	.nav-wrap {text-align: center;}
}
@media screen and (max-width:1507px){ 
	nav ul li a {padding: 10px .75vw; font-size: 12.5px;}
}

@media screen and (max-width:1310px){ 
	nav ul li a {padding: 10px .75vw; font-size: 11.5px;}
	.nav-wrap {padding:10px 1%;}
}


/*==============================
	Mobile Nav Styles			
================================*/	
@media only screen and (max-width: 1150px) {
	
	.primary-menu{display:none;}
	.slideoutLogo {
		display: block;
		margin: auto;
		width: 100%; 
		max-width: 100px;	
	}
	/*==============================
			Mobile Nav Styles			
	================================*/	
	.nav-wrap {
		background: linear-gradient(#151515, #000);
		border: none;
		padding: 0 3%;
	}
	#menu-button{ 
		display: block;
		font-size: 35px;
		z-index: 9;
		background:transparent;
		text-align: right;
		position: relative;
		width: 100%;
		margin-bottom: 7px;
		border-radius: 0!important;
	}
	#menu-button a{color:#fff!important;text-decoration: none;}
	#menu-button a:hover{color:#6d8392;}
	
	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		left: -275px;
		width: 275px;
		height: 100%;
		background: rgba(0, 0, 0, 0.92);
		z-index: 9999999999; /* needs to be higher than #menu-button, adjust as needed */
		overflow:auto;
	}
	nav.mobile h3 { /* Menu header styles */
		position: relative;
		padding: 12px 10px;
		color: #fff;
		font-size: 25px;
		font-weight: normal;
		background: #000;
		letter-spacing:1px;
	}
	nav.mobile .menu-toggle { /* Menu close button */
		position: absolute;
		top: 12px;
		right: 15px;
		display: inline-block;
		padding: 0 5px;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
		color: #fff;
		background: #222;
		text-decoration: none;
		cursor: pointer;
		vertical-align: top;
	}
	nav.mobile .menu-toggle:hover { 
		background: #333; color: #fff; transition: .3s ease-in-out all;
	}
	nav.mobile ul {
		list-style: none;
		font-weight: 300;
		margin:0;
		padding:0;
	}
	nav.mobile ul li {
		display: block;
		width: 100%;
		position: relative;
	}
	nav.mobile ul li a {
		position: relative;
		display: block;
		padding: 15px;
		text-decoration: none;
		font-size: 15px;
		text-align: left;
		border-bottom: solid #4d4d4d 1px;
		color:#fff;
		background: transparent;
		-webkit-transition:.4s ease-in;  
		-moz-transition:.2s ease-in;  
		-o-transition:.2s ease-in;  
		transition:.2s ease-in;
	}
	nav.mobile ul li a:hover {
		background: #820001;
	}
	nav.mobile ul li li a { /* appearance of the sub-level links */
		background: #000;
		position: relative;
		display: block;
		font-weight: 400;
		font-size: 15px;
		padding: 10px 10px 10px 20px;
		color: #fff;
		text-decoration: none;
	}
	nav.mobile ul li li li a { /* appearance of third level sub-level links if needed */
		background: #000;
		position: relative;
		display: block;
		padding: 10px 10px 10px 25px;
		color: #fff;
		text-decoration: none;
	}
	nav.mobile ul li .click{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
		position:absolute;
		right: 0;
		padding: 1.75em;
		display:block;
		top: 0;
		cursor:pointer;
		z-index: 12399994;
		width:auto;
		height:auto;
		color: #fff;
		font-size: 12px;
		-webkit-transition:background-size .3s ease-in-out;
		-moz-transition:background-size .3s ease-in-out;
		transition:background-size .3s ease-in-out;
	}
	nav.mobile ul li ul li .click{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
		position:absolute;
		right: 0;
		display:block;
		top: 0;
		padding: 1.75em;
		cursor:pointer;
		z-index: 12399994;
		width:auto;
		height:auto;
		color: #fff;
		font-size: 12px;
		-webkit-transition:background-size .3s ease-in-out;
		-moz-transition:background-size .3s ease-in-out;
		transition:background-size .3s ease-in-out;
	}
	.nav-footer{
		font-family: 'Montserrat', sans-serif;
		font-weight: 500;
		color: #777;
		padding: 15px;
		font-size: 12px;
		letter-spacing: 1px;
	}

	/*  	end of Mobile Nav Styles    */
	

}

@media only screen and (max-width: 500px){
	.logo{padding: 2% 0%;}
	.logo img { width: 37%;}
	.menu-bg{ padding: 4% 4% 4% 0;}
	.nav-footer{text-align: center;}
}

@media only screen and (max-width: 376px){
	.menu-bg {padding: 5% 5% 5% 0;}
}

@media only screen and (max-width: 336px){
	#menu-button { font-size: 22px;}
}