/*------------------------------------------------------------------
	+ Header
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
	- Main Header
-------------------------------------------------------------------*/
#main_header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	padding: 30px;
	@include hover_transition(0.3s);

	@media screen and (max-width: 991px) {
		display: none;
	}

	.logo {
		float: left;

		a {
			display: block;

			img.logo_black {
				display: none;
			}
		}
	}

	.menu {
		float: right;

		ul li {
			float: left;
			margin-right: 50px;
			padding: 0;

			@media screen and (max-width: 1280px) {
				margin-right: 30px;
			}

			&.active a {
				background: transparent;
			}

			&:last-child {
				margin-right: 0;
			}

			a {
				position: relative;
				display: block;
				margin: 0;
				padding: 0;
				color: $white;
				font-family: 'Open Sans', Arial, sans-serif;
				font-size: 14px;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 1px;

				@media screen and (max-width: 1280px) {
					font-size: 13px;
				}

				&::after {
					position: absolute;
					top: 25px;
					left: 1px;
				    content: '';
				    display: block;
				    width: 0;
				    height: 2px;
				    background: $white;
				    @include hover_transition(0.3s);
				}

				&:hover,
				&:active,
				&:visited,
				&:focus {
					background: transparent;
				}

				&:hover::after {
	    			width: 98%;
	    		}
			}

			&.active a::after {
				width: 20px;
			}		
		}
	}
}

#main_header.header_after_scroll {
	background: $white;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);

	.logo a {

		img.logo_white {
			display: none;
		}

		img.logo_black {
			display: block;
		}
	}

	.menu {
		
		ul li a {
			color: $black;

			&::after {
			    background: $black;
			}
		}
	}
}

/*------------------------------------------------------------------
	- Mobile Header
-------------------------------------------------------------------*/
#mobile_header {
	display: none;
	position: absolute;
	z-index: 9;
	width: 100%;
	padding: 30px;

	@media screen and (max-width: 991px) {
		display: block;
	}

	.logo {
		float: left;

		a {
			display: block;
		}
	}

	.menu_toggle {
		float: right;
		
		a {
			color: $white;
			font-size: 26px;
			line-height: 0;
		}
	}

	.menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 9999;
		margin-top: 25px;
		padding-left: inherit;
		padding-right: inherit;

		ul {
			width: 100%;
			background: $black;

			li a {
				display: block;
				width: 100%;
				padding: 20px 30px;
				background: $black;
				color: $white;
				font-family: 'Open Sans', Arial, sans-serif;
				font-size: 14px;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 1px;
			}
		}
	}
}


