/*============================*/
/*	NAVIGATION 
/*============================*/

$navbar-height: 70px

.navbar
	width: 100%
	background: #fff
	border: 1px solid #ededed
	border-width: 0 0 1px
	border-radius: 0
	margin: 0
	height: $navbar-height
	z-index: 9999
	+box-sizing(content-box)

	&.fixed-nav
		position: fixed
		top: 0
		left: 0
		right: 0

	.nav
		> li
			> a
				// font-weight: 300
				font-size: 14px
				line-height: 50px
				color: #333
				text-transform: uppercase
				font-family: $primary-font
				height: $navbar-height
				padding: 10px 15px
				background: transparent !important
				position: relative

				@media (max-width: 990px)
					padding: 10px

				&:after
					content: ""
					position: absolute
					width: 0
					height: 3px
					border: 1px solid #bbb
					border-width: 1px 0
					bottom: -1px
					left: 50%
					margin-left: 0
					@extend .transition
					+opacity(0)

				&:hover
					color: $main-color
					&:after
						+opacity(1)
						width: 35px
						margin-left: -17.5px

			&.active
				a
					color: $main-color
					&:after
						+opacity(1)
						width: 35px
						margin-left: -17.5px

	.navbar-header
		height: $navbar-height

	.navbar-brand , .search-trigger , .navbar-toggle
		font-size: 26px
		line-height: 50px
		height: $navbar-height
		padding: 10px 15px
		margin: 0

	.search-trigger , .navbar-toggle
		font-size: 18px
		color: $main-color
		position: relative
		width: 80px
		text-align: right

		&:after
			content: ""
			position: absolute
			width: 1px
			height: 18px
			left: 25px
			top: 50%
			margin-top: -9px
			background: $main-color

	.navbar-collapse
		background: #fff
		
		&.in
			.nav
				> li
					> a
						color: #333
						height: auto
						text-align: center
						padding: 5px
.dropdown-menu
	padding: 0
	background-color: #fff
	border-color:  #ededed
	border-radius: 0
	box-shadow: 0 5px 10px rgba(0, 0, 0, .1)
	min-width: 180px

	.divider 
		height: 1px
		margin: 5px 0
		background-color: #ededed

	> li
		> a , &.active > a
			display: block
			padding: 8px 20px
			font-family: $primary-font
			color: #333

			&:hover, &:focus
				color: #fff
				background-color: $main-color




.search-container
	display: none
	position: absolute
	left: 0
	top: 0
	z-index: 999
	background: #fff
	width: 100%
	height: $navbar-height
	padding: 0 15px

	form
		margin: 0
		padding: 0
		height: 100%

	input
		border: none
		border-radius: 0
		box-shadow: none
		font-size: 24px
		font-family: $primary-font
		height: 100%
		padding: 0
		margin: 0
		width: 100%
		display: block
		color: #333

		+placeholder
			color: #333

	.close
		color: $main-color
		font-size: 18px
		margin-top: -9px
		position: absolute
		right: 30px
		top: 50%
		+opacity(1)