.clear {
	clear: both;
}

/* CUSTOM HEADER */

#header{overflow:hidden; padding: 0 !important;
    box-sizing: border-box;
    width: 100%;
margin: 0 !important;
}


#header-logo{
	width: 25%;
	max-width: 75%;
	position: relative;
	padding-right: 1%;
	float: left;
	z-index: 2;
}
#header-logo img{
	position: relative;
	max-width: calc(100% - 20px);
	padding: 10px 10px 25px;
}

#header-logo:before { 
	content: '';
    background: #000 !important;
    position: absolute;
    transform: skewX(-10deg);
    width: 150%;
    height: 100%;
	margin-left: -50%;
	padding-right: 5%;
}

#header .social-icons{
    float: right;
    width: 25%;
    padding: 25px 45px 25px 15px;
    margin-right: -30px;
    display: flex;
    justify-content: flex-end;
    transform: skewX(-10deg);
	border-radius: 0 0 0 5px;
}
#header .social-icons a{
	font-size: 30px;
	letter-spacing: 10px;
	color: #fff;
	text-align: right;
	transform: skewX(10deg);
}
/***** Start of primary nav ******/

#menu-button {
	display: none;
}
nav.mobile {
	display: none;
}
nav.primary {
	padding: 0;
	display: block;
	margin: 0;
	width: 100%;
	position: relative;
	background: #f5ed25;
    padding-right: 15px;
    padding-left: 30px;
	
    box-sizing: border-box;
}
nav.primary:after {
    content: '';
    background: #f5ed25;
    position: absolute;
    right: 98%;
    top: 0;
    left: -5px;
    bottom: 0;
	transform: skewX(-10deg);
	z-index: -1;
}
nav.primary ul {
	margin: 0;
	padding: 0;
	text-align: right;
	display: flex;
    justify-content: space-evenly;
}
nav.primary ul li {
	display: inline-block;
	margin: 0;
	list-style-type: none;
}
nav.primary ul li a {
	color:#000;
	font-size: 12px;	
	font-family: industry, sans-serif;
    font-weight: 700;
    font-style: italic;
	text-transform: uppercase;
	
	line-height: 20px;
	text-decoration: none;
	
	padding: 10px 12px;
	display: block;
	margin: 0;
	text-align: center;
	-webkit-transition: .2s ease-in;
	-moz-transition: .2s ease-in;
	-o-transition: .2s ease-in;
	transition: .2s ease-in;
}
nav.primary ul li a:hover {
}
/* Appearance of the sub-level links */
nav.primary ul li li a {
	line-height: 20px;
	padding: 10px;
	text-align: left;
	border-right: none;
	border-left: none;
	background: #000;
	color: #fff;

	font-size: 12px;	
	font-family: industry, sans-serif;
    font-weight: 700;
    font-style: italic;
	text-transform: uppercase;
}
/* Appearance of the sub-level links on hover */
nav.primary ul li li a:hover {
	color: #fff;
	background: #000;
}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
	display: none;
	position: absolute;
}
nav.primary ul ul ul {
	position: absolute;
	left: 100%;
	top: 0;
}
nav.primary ul li:hover>ul {
	display: block;
	line-height: 18px;
	z-index: 100;
}
nav.primary ul ul li {
	float: none;
	width: 140px;
	position: relative;
	margin: 0;
	display: block;
}
/******** Nav Resets ***************/
.fa-angle-down {
    padding-left: 3px;
    padding-top: 3px;
}



/******** End of primary Nav ***************/
@media screen and (max-width: 1480px) {

	nav.primary ul ul li {
		width: 115px;
	}
}
@media screen and (max-width: 1200px) {
	nav.primary ul li a {
		padding: 10px 5px;
	}
}

@media screen and (min-width: 1024px)  {
		
	.menu-toggle.exit-click{
		display: none !important;
	}
}

@media screen and (max-width: 1023px)  {
	
	.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;
		
		background: rgba(36,32,33,0.5);
				opacity: 0;	
		transition: ease opacity 0.3s;
	}
	.mobile.open + .menu-toggle.exit-click{
		pointer-events: auto;
		opacity: 1;
	}
	#header-logo{
			width: 300px;
			max-width: 60%;
			position: relative;
			padding-right: 3%;
		}	
		#header-logo img{
			padding: 20px 20px 20px;
		}
		#menu-button .social-icons{
			float: left;
			margin-left: 18px;
		}
		/*
		#header .social-icons{
			display: none;
		}
		*/
		#header .social-icons{
			float: none !important;
			transform: none;
			width: auto;
			background: #fff;
			position: absolute !important;
			top: 0 !important;
			right: 0 !important;
		}
		#header .social-icons a{
			transform: none !important;
					color: #000;
		}
		.mobile_top .header-icon{
			padding-right: 10px;
		}
		/*==============================
			Mobile Nav Styles			
		================================*/
		nav.primary {
			display: none;
		}
		#menu-button {
			width: 100%;
			display: inline-block;
			font-size: 24px;
			position: relative;
			line-height: 40px;
			z-index: 1000;
			text-align: right;
			padding-top: 2px;
			background: #f5ed25;
			right: 0;
			margin-bottom: 0px;
			margin-top: -2px;
		}
		#menu-button:after {
		content: '';
		background: #f5ed25;
		position: absolute;
		right: 90%;
		top: 0;
		left: -5px;
		bottom: 0;
		transform: skewX(-10deg);
		}
		#menu-button .menu-toggle {
			color: #000;
			text-decoration: none;
			font-weight: normal;
			text-align: left;
			margin-right: 15px;
			float: right;
		}
		#menu-button .social-icons{
				letter-spacing: 5px;
		}
		#menu-button i{
			color: #000;	
			line-height: 40px !important;
		}
		nav.mobile {
			display: block;
			position: fixed;
			text-align: left;
			top: 0;
			left: -250px;
			width: 250px;
			height: 100%;
			z-index: 1001;
			/* needs to be higher than #menu-button, adjust as needed */
			overflow: auto;
			background: #000;
    font-style: oblique;
		}
		nav.mobile:after {
			border-right: solid 1px #333;
			content: '';
			top: 0;
			bottom: 0;
			right: 0;
			position: absolute;
		}
		/* MENU HEADER SOCIAL MEDIA */
		nav.mobile .social-media {
			position: relative;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			word-spacing: 13px;
			padding: 0 0 0 15px;
			color: #fff !important;
		}
		nav.mobile .social-media a:link,
		nav.mobile .social-media a:visited {
			color: #fff;
			text-decoration: none;
		}
		nav.mobile .social-media a:hover,
		nav.mobile .social-media a:active {
			color: #fff;;
			text-decoration: underline;
		}
		.mobiletitle {
			padding-left: 20px;
			color: #fff;
		}
		/* MENU HEADER STYLES */
		nav.mobile .mobile_top {
			position: relative;
			display: block;
			padding: 0;
			margin: 15px 0 10px 0;
			/*margin:40px 0 10px 0;*/
			color: #fff;
			font-size: 18px;
			font-weight: 400;
		}
		/* MENU CLOSE 'X' BUTTON */
		nav.mobile .menu-toggle {
			position: absolute;
			padding: 3px 8px 3px;
			font-family: Arial, sans-serif;
			font-size: 24px;
			font-weight: bold;
			line-height: 1;
			color: #fff;
			text-decoration: none;
			top: -4px;
			/*top:-35px;*/
			right: 13px;
		}
		nav.mobile .menu-toggle:hover {
			/* Menu close button on hoveer */
			color: #fff;
		}
		/* MENU LIST STYLE */
		nav.mobile ul {
			list-style: none;
			font-weight: 300;
			margin: 0;
			padding: 0;
		}
		nav.mobile ul li {
			position: relative;
		}
		/* FIRST LEVEL */
		nav.mobile ul li a {
			position: relative;
			display: block;
			font-size: 14px;
			padding: 10px 10px 10px 15px;
			color: #fff;
			text-decoration: none;
			font-family: industry, sans-serif;
			text-transform: uppercase;
			font-weight: 700;
		}
		/* SECOND LEVEL */
		nav.mobile ul li li:last-child {
			border: none;
		}
		nav.mobile ul li li a {
			background: #333;
			position: relative;
			display: block;
			padding: 10px 10px 10px 15px;
			color:#fff;
			text-decoration: none;
		}
		/* THIRD LEVEL */
		nav.mobile ul li li li:last-child {
			border: none;
		}
		nav.mobile ul li li li a {
			background: #555;
			position: relative;
			display: block;
			padding: 10px 10px 10px 25px;
			color: #ccc;
			text-decoration: none;
			border-left: 4px #555 solid;
		}
		nav.mobile ul li li li a:hover {
			background: rgba(85, 85, 85, 0.5);
		}
		/* FOURTH LEVEL */
		nav.mobile ul li li li li:last-child {
			border: none;
		}
		nav.mobile ul li li li li a {
			background: #777;
			position: relative;
			display: block;
			padding: 10px 10px 10px 25px;
			color: #ccc;
			text-decoration: none;
			border-left: 4px #555 solid;
		}
		nav.mobile ul li li li li a:hover {
			background: rgba(85, 85, 85, 0.5);
		}
		nav.mobile ul li .click {
			/* dropdown menu idicator arrow be sure to include this image with your image files */
			/*position:absolute;
			display:block;
			cursor:pointer;
			z-index: 12399994;
			top:0;
			right:0;
			width:auto;
			height:auto;
			padding: 17px 20px;
			color:#fff;*/
		}
		.nav-footer {
			color: #fff;
			position: relative;
			text-align: center;
			font-size: 12px;
			line-height: 16px;
			padding: 30px 0;
			font-family: industry, sans-serif;
			text-transform: uppercase;
		}
		/* FONT AWESOME ICONS */
		nav.mobile ul li a .fa {
			width: 25px;
			font-weight: 100;
			padding: 8px 3px;
			margin: 0 6px 0 0;
			text-align: center;
			background: #292929;
			-webkit-border-radius: 30px;
			-moz-border-radius: 30px;
			border-radius: 30px;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
		}
		nav.mobile ul li .fa-angle-down {
			color: #999;
			padding-left: 8px;
			padding-top: 0px;
			margin-top: -2px;
		}
		.more {
			position: absolute;
			right: 5%;
		}
		.mobilefooterlogo {
			text-align: center;
			margin: 0 auto;
			transform: scale(0.9);
		}
}

@media screen and (max-width: 500px) {
	#menu-button {
		text-align: center;
	}
	#header .social-icons a{
		font-size: 20px;
	}
}
@media screen and (max-width: 360px){
	
	#header-logo{
		padding-bottom: 20px;
	}
}
/* Hide the desktop menu item icons */
.primary li > i {
	display: none;
}
/* Position the mobile menu item icons */
.mobile li i {
	position: absolute;
	top: 13px;
}