/* Header */
#header {
	background: #F6F6F6;
	@include background(linear-gradient(#F6F6F6, #FFF));
	clear: both;
	border-top: 5px solid #EDEDED;
	min-height: 100px;
	padding: 8px 0;
	> {
		.container {
			height: 100px;
			margin-bottom: -35px;
			position: relative;
			display: table;
			max-width: 1170px;
		}
		.navbar-collapse > .container {
			position: relative;
		}
	}
	.header-top {
		min-height: 50px;
		form {
			margin: 0;
		}
		p {
			float: $left;
			font-size: 0.9em;
			line-height: 50px;
			margin: 0;
		}
		i {
			margin-#{$right}: 6px;
			margin-#{$left}: 6px;
			position: relative;
			top: 1px;
		}
		nav {
			float: $left;
			width: auto;
		}
		ul.nav-top {
			margin: side-values(7px 0 0 -15px);
			min-height: 5px;
			li {
				&.phone {
					margin-#{$right}: 10px;
				}
				a {
					padding-#{$left}: 4px;
				}
			}
		}
	}
	.social-icons {
		clear: $right;
		float: $right;
		margin-top: -3px;
		margin-#{$left}: 5px;
		position: relative;
	}
	.search {
		float: $right;
		margin: side-values(10px 0 0 15px);
		position: relative;
		+ .social-icons {
			clear: none;
			margin-#{$left}: 10px;
			margin-#{$right}: 0;
			margin-top: 13px;
		}
		input.search {
			&:first-child {
				@include transition (width 0.2s ease-in 0.2s);
				border-radius: 20px;
				width: 170px;
				font-size: 0.9em;
				padding: 6px 12px;
				height: 34px;
				margin: 0;
			}
			&:focus {
				width: 220px;
				border-color: #CCC;
			}
		}
		button.btn-default {
			border: 0;
			background: transparent;
			position: absolute;
			top: 0;
			#{$right}: 0;
			color: #CCC;
			z-index: 3;
		}
	}
	nav {
		float: $right;
		ul {
			&.nav-main {
				margin: side-values(-7px 10px 8px 0);
				> li + li {
					margin-#{$left}: -4px;
				}
				li {
					a {
						font-size: 12px;
						font-style: normal;
						line-height: 20px;
						margin-#{$left}: 3px;
						margin-#{$right}: 3px;
						text-transform: uppercase;
						font-weight: 700;
						padding: 10px 13px;
						&:hover {
							background-color: #F4F4F4;
						}
					}
					ul a {
						text-transform: none;
						font-weight: normal;
						font-size: 0.9em;
					}
					&.dropdown {
						&.open a.dropdown-toggle {
							border-radius: corner-values(5px 5px 0px 0px);
							background-color: #CCC;
						}
						&:hover {
							> a {
								padding-bottom: 11px;
								margin-bottom: -1px;
							}
							> ul {
								display: block;
							}
							a.dropdown-toggle {
								border-radius: corner-values(5px 5px 0px 0px);
							}
						}
					}
					&.active a {
						background-color: #CCC;
					}
					a.dropdown-toggle.extra {
						display: none;
					}
				}
				ul.dropdown-menu {
					background-color: #CCC;
					border: 0;
					border-radius: corner-values(0 6px 6px 6px);
					box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
					margin: side-values(1px 0 0 3px);
					padding: 5px;
					top: auto;
					text-align: $left;
					li {
						&:hover > a {
							filter: none;
							background: #999;
						}
						&:last-child > a {
							border-bottom: 0;
						}
					}
					> li > a {
						color: #FFF;
						font-weight: 400;
						padding-bottom: 4px;
						padding-top: 4px;
						text-transform: none;
						position: relative;
						padding: side-values(8px 10px 8px 5px);
						font-size: 0.9em;
						border-bottom: 1px solid rgba(255, 255, 255, 0.2);
					}
					ul.dropdown-menu {
						border-radius: 6px;
						margin-#{$left}: 0;
						margin-top: -5px;
					}
				}
				.dropdown-submenu {
					position: relative;
					> .dropdown-menu {
						top: 0;
						#{$left}: 100%;
						margin-top: -6px;
						margin-#{$left}: -1px;
						border-radius: corder-values(0 6px 6px 6px);
					}
					> a:after {
						display: block;
						content: " ";
						float: $right;
						width: 0;
						height: 0;
						border-color: transparent;
						border-style: solid;
						border-width: side-values(5px 0 5px 5px);
						border-#{$left}-color: #FFF;
						margin-top: 5px;
						margin-#{$right}: -10px;
					}
					&.pull-left {
						float: none;
						> .dropdown-menu {
							#{$left}: -100%;
							margin-#{$left}: 10px;
							border-radius: corder-values(6px 0 6px 6px);
						}
					}
					&:hover {
						> .dropdown-menu {
							display: block;
						}
						> a:after {
							border-#{$left}-color: #FFF;
						}
					}
				}
			}
			&.nav-top {
				margin: 10px 0 -10px;
				min-height: 62px;
				li {
					span {
						display: block;
						line-height: 14px;
						margin-bottom: 2px;
						margin-#{$right}: 0;
						margin-top: 5px;
						padding: side-values(8px 2px 8px 12px);
					}
					a, span {
						color: #999;
						font-size: 0.9em;
						padding: 6px 10px;
					}
					i {
						margin-#{$right}: 6px;
						position: relative;
						top: 1px;
					}
				}
			}
		}
	}
	.nav-main-collapse {
		overflow-y: visible;
		&.in {
			overflow-y: visible;
		}
	}
	.tip {
		display: inline-block;
		padding: 0 5px;
		background: #FFF;
		color: #111;
		text-shadow: none;
		border-radius: 3px;
		margin-#{$left}: 8px;
		position: relative;
		text-transform: uppercase;
		font-size: 10px;
		font-weight: bold;
		&:before {
			#{$right}: 100%;
			top: 50%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-#{$right}-color: #fff;
			border-width: 5px;
			margin-top: -5px;
		}
	}
}

/* Logo */
#header {
	.logo {
		@include transition (all 0.2s ease-in 0.2s);
		margin: 0;
		padding: 5px 0;
		display: table-cell;
		vertical-align: middle;
		height: 100%;
		color: transparent;
		a {
			position: relative;
			z-index: 1;
		}
		img {
			position: relative;
			color: transparent;
		}
	}
}

/* Header Container */
.header-container {
	min-height: 76px;
	position: relative;
}

/* Responsive Nav Button */
.btn-responsive-nav {
	display: none;
}

/* Sticky Menu */
#header.fixed {
	position: fixed;
	top: 0;
	#{$left}: 0;
	width: 100%;
	z-index: 1001;
}

body.sticky-menu-active #header {
	border-bottom: 1px solid #E9E9E9;
	position: fixed;
	top: -57px;
	width: 100%;
	z-index: 1001;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
	filter: none;
	.social-icons {
		margin-top: -1px;
	}
	nav ul.nav-main {
		margin-bottom: 7px;
		margin-top: -1px;
	}
}

body.sticky-menu-active.always-sticky #header {
	top: 0;
	nav ul.nav-main {
		margin: side-values(-7px 10px 8px 0);
	}
	.social-icons {
    	margin-top: -3px;
    }
}

body.scrolling .nav-main-collapse.collapsing {
	-webkit-transition: none;
	transition: none;
}

// HEADERS
@import "header-mega-menu";
@import "header-flat-menu";
@import "header-single-menu";
@import "header-clean-top";
@import "header-colored";
@import "header-darken-top-border";
@import "header-center";
@import "header-narrow";
@import "header-transparent";
@import "header-full-width";
@import "header-signin";

@media (min-width: 992px) {

	#header.font-color-light {
		nav.nav-main ul.nav-main > li.active > a,
		nav.nav-main ul.nav-main > li > a {
			color: #FFF;
		}
	}

	body.sticky-menu-active #header.font-color-light {
		nav.nav-main ul.nav-main > li.active > a,
		nav.nav-main ul.nav-main > li > a {
			color: #777;
		}
	}

	#header.font-color-dark {
		nav.nav-main ul.nav-main > li.active > a,
		nav.nav-main ul.nav-main > li > a {
			color: #444;
		}
	}

}

/* Responsive */
@media (max-width: 991px) {

	/* Header */
	#header {
		clear: both;
		> .container {
			margin-bottom: 0;
		}
		.header-top, .social-icons, .search {
			display: none;
		}
		.nav-collapse {
			background: #171717;
			width: 100%;
			clear: both;
			width: 100%;
			.container .nav-main {
				float: $left;
				width: 100%;
			}
		}
		.nav-main-collapse {
			top: 8px;
			position: relative;
			background: #171717;
			max-height: none;
			width: 100%;
			overflow: hidden;
			overflow-y: hidden;
			overflow-x: hidden;
			&.collapse {
				display: none !important;
			}
			&.in {
				width: 100%;
				overflow: hidden;
				overflow-y: hidden;
				overflow-x: hidden;
				display: block !important;
			}
		}
		.nav-main {
			padding: 10px 0;
			clear: both;
			display: block;
			float: none;
			width: 100%;
			ul {
				padding: 0;
				margin: 0;
				li {
					padding: 0;
					margin: 0;
					clear: both;
					float: none;
					display: block;
					border-bottom: 1px solid #2A2A2A;
					&:last-child {
						border-bottom: none;
					}
				}
				ul {
					margin-#{$left}: 20px !important;
				}
				&.nav-main {
					float: none;
					position: static;
					margin: 8px 0;
					margin-#{$right}: -10px;
				}
				&.dropdown-menu {
					position: static;
					clear: both;
					float: none;
					display: none !important;
				}
			}
			li.resp-active > ul.dropdown-menu {
				display: block !important;
			}
			li.dropdown a.dropdown-toggle.extra {
				float: $right;
				position: relative;
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				margin: 3px 0 -38px 0;
				z-index: 10;
				display: block;
			}
			li a.dropdown-toggle.disabled .fa {
				display: none;
			}
		}
		nav ul.nav-main {
			> li + li {
				margin-#{$left}: 0;
			}
			li a {
				color: #FFF;
				clear: both;
				float: none;
				display: block;
				padding: 9px 8px !important;
				border: 0;
				border-top: 0;
				margin: 0;
				i.fa-angle-down {
					position: absolute;
					#{$right}: 5px;
					top: 10px;
				}
			}
			li.dropdown:hover > a {
				margin: 0;
				padding: 9px 8px !important;
			}
			ul.dropdown-menu {
				-moz-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
				li > a {
					padding: 9px 8px;
					border: 0;
					border-top: 0;
					margin: 0;
					border-bottom: none;
				}
			}
			ul.sub-menu {
				padding: 0;
				margin: 0 0 10px 0;
			}
			.dropdown-submenu {
				> a:after {
					border-#{$left}: 5px solid transparent;
					border-#{$right}: 5px solid transparent;
					border-top: 5px solid #FFF;
				}
				&:hover > a:after {
					border-#{$left}-color: transparent;
				}
			}
		}
	}

	body {
		#header {
			nav ul.nav-main {
				ul.dropdown-menu {
					background: none !important;
					background-color: transparent !important;
				}
				li {
					&.dropdown.open .dropdown-toggle, a, > a:hover, &.active a, &.dropdown:hover a {
						background: none !important;
						background-color: transparent !important;
					}
				}
				ul.dropdown-menu li:hover > a, li.dropdown:hover ul.dropdown-menu li > a:hover {
					background: none !important;
					background-color: transparent !important;
				}
			}
		}
	}

	body.sticky-menu-active #header,
	#header.fixed {
		.nav-main-collapse {
			max-height: 300px;
		}
		.nav-main-collapse.in {
			overflow: hidden !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
		}
		.logo {
			img {
				margin-top: -12px;
			}
		}
	}

	/* Responsive Button Nav */
	.btn-responsive-nav {
		background: #171717;
		top: 55px;
		display: block;
		position: absolute;
		#{$right}: 20px;
		color: #FFF;
		z-index: 1;
		&:hover, &:active, &:focus {
			color: #CCC;
			outline: none;
		}
	}

	/* Logo */
	#header {
		.logo img {
			max-width: 180px;
			max-height: none !important;
			height: auto !important;
		}
	}

	/* Nav Top */
	#header {
		.header-top ul.nav-top {
			float: $left;
			margin: side-values(7px 0 0 -15px);
			min-height: 5px;
		}
	}

}

@media (max-width: 767px) {

	/* Header */
	#header {
		display: block;
		> .container {
			width: 100%;
		}
		.social-icons {
			display: none;
		}
		nav ul.nav-top {
			float: $right;
			margin-#{$right}: 0;
		}
		&.center nav {
			width: auto;
		}
	}

	/* Responsive Button Nav */
	.btn-responsive-nav {
		top: 55px;
	}

	body.sticky-menu-active {
		.btn-responsive-nav {
			top: 60px;
		}
	}

}

@media (max-width: 479px) {

	#header {
		nav ul.nav-top, .header-top {
			display: none;
		}
	}

}

@media (max-width: 600px) {

	/* Header */
	#header {
		nav ul.nav-top li {
			display: none;
			.phone {
				display: block;
			}
		}
	}

}