.clear{clear:both;}

/***** Start of primary nav ******/
.mobile{display:none;}
#menu-button{display:none;}

.header{
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	width: 100%;
}
.logo{width: 20%; text-align: center;}
.logo img{width: 27%;}
nav.primary-menu{
	width: 80%;
	padding:0;
	margin:0;
	z-index: 500;
	position: relative;
    padding-left: 1.5%;
}
nav ul li a{
	color: #ffdd00;
    font-size: 20px;
    padding: 0 30px;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	letter-spacing: 1.5px;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}

nav ul li a:hover{color:#fff;}

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

	/* Appearance of the sub-level links */
			nav.primary-menu ul li li a { 
				font-size:14px;
				line-height:16px;
				letter-spacing: 2px;
				padding:0px;
				color:#fff;
				text-align:left;
				border-right:none;
				border-left:none;
			}
			/* Appearance of the sub-level links on hover */
			nav.primary-menu ul li li a:hover { 
			}
/* 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; 
}
nav.primary-menu ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary-menu ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
    padding-top: 36px;
}
nav.primary-menu ul li ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
	 padding-top: 0px;
}
nav.primary-menu ul li ul li ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 100;
	 padding-top: -2px;
}
nav.primary-menu ul ul li {
    float: none; 
	width: 156px;
    position: relative;
    margin:0;
	display: block;
	background: #000;
	padding: 9%;
	border-top: #000 solid 1px;
	-webkit-transition:.4s ease-in;  
	-moz-transition:.2s ease-in;  
	-o-transition:.2s ease-in;  
	transition:.2s ease-in;
}
nav.primary-menu ul ul li:hover{
	background: #b0100d;
}


/******** End of primary Nav ***************/

@media screen and (max-width: 1452px) {
	nav ul li a{
		font-size: 14px;
	    padding: 0 25px;
	}

}

@media screen and (max-width: 1104px) {
	nav ul li a{
		font-size: 12px;
	    padding: 0 15px;
	}

}

@media screen and (max-width: 1024px) {
	.horizontal-menu{padding-right: 2%; padding-top: 0%;}

}

/*==============================
	Mobile Nav Styles			
================================*/	
@media only screen and (max-width: 900px) {
	
	.primary-menu{display:none;}
	.logo{width: 35%;  text-align: right; padding-right: 5%;}
	
	/*==============================
			Mobile Nav Styles			
	================================*/	

	#menu-button{ /* initially will need to be hidden */
		display: block;
		font-size: 29px;
		z-index: 9;/* needs to be lower than nav.mobile, adjust as needed */
		background:transparent;
		text-align: left;
		position: absolute;
    	width: 100%;
	}
	#menu-button a{color:black;text-decoration: none; padding: 5%; }
	#menu-button a:hover{color:#6d8392;}
	
	nav.mobile {
		display:block;
		position: fixed;
		top: 0;
		left: -250px;
		width: 250px;
		height: 100%;
		background: #000;
		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: 22px;
		font-weight: normal;
		letter-spacing:1px;
	}
	nav.mobile .menu-toggle { /* Menu close button */
		position: absolute;
		top: 12px;
		right: 10px;
		display: inline-block;
		padding: 6px 9px 5px;
		font-family: 'Raleway', sans-serif;
		font-weight: bold;
		line-height: 1;
		background:  #000;
		color: #fd0;
		text-decoration: none;
		vertical-align: top;
	}
	nav.mobile .menu-toggle:hover { /* Menu close button on hoveer */
		color: #fff;
	}
	nav.mobile ul {
		list-style: none;
		font-weight: 300;
		margin:0;
		padding:0;
	}
	nav.mobile ul li {}
	nav.mobile ul li a {
		position: relative;
		display: block;
		padding: 15px;
		text-decoration: none;
		font-size: 15px;
    	letter-spacing: 2px;
		color:#51656f;
		background: #000;
		-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 {
		color: #fd0; background: #000;
	}
	nav.mobile ul li li a { /* appearance of the sub-level links */
		background: #00395d;
		position: relative;
		display: block;
		font-weight: 400;
		font-size: 15px;
		padding: 10px 10px 10px 15px;
		color: #b0100d;
		text-decoration: none;
	}
	nav.mobile ul li li li a { /* appearance of third level sub-level links if needed */
		background: #00395d;
		position: relative;
		display: block;
		padding: 10px 10px 10px 25px;
		color: #0a2618;
		text-decoration: none;
	}
	nav.mobile ul li .click{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
		position:relative;
		display:block;
		float:right;
		margin:-31px 0 0 0;
		cursor:pointer;
		z-index: 12399994;
		width:43px;
		height:43px;
		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:relative;
		display:block;
		float:right;
		margin:-25px 0 0 0;
		cursor:pointer;
		z-index: 12399994;
		width:43px;
		height:43px;
		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: 'Titillium Web', sans-serif;
		font-weight: 300;
		color: #fff;
		padding: 15px;
		font-size: 12px;
		letter-spacing: 1px;
	}

	/*  	end of Mobile Nav Styles    */
	

}

@media only screen and (max-width: 650px){

}

@media only screen and (max-width: 500px){
	.logo {width: 34%;}
	nav.mobile { left: -100%; width: 100%;}
	.menu-bg{ padding: 4% 4% 4% 0;}
	nav.mobile ul li a{text-align: center;}
	.nav-footer{text-align: center;}
}

@media only screen and (max-width: 425px){
	.logo {width: 45%;}
}

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