@include keyframes(navbar-input-expand) {
	from { width: rem(220px); }
	to { width: rem(300px); }
}
@include keyframes(navbar-input-expand-xs) {
	from { width: rem(160px); }
	to { width: rem(200px); }
}
.header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: $header-zindex;
	margin-bottom: 0;
	padding: 0;
	
	@include transition(box-shadow .2s linear);
	@include clearfix();
	@include display-flex();
	@include flex(1);
	@include box-shadow(0 1px 1px rgba($black ,.14));
	@include media-breakpoint-down(sm) {
		display: block;
	}
	
	& .navbar-toggle {
		position: relative;
		padding: 0;
		background-color: transparent;
		background-image: none;
		border: none;
		outline: none;
		width: $header-height;
		height: $header-height;
		display: block;
		
		@include media-breakpoint-up(md) {
			display: none;
		}
		@include media-breakpoint-down(sm) {
			height: $header-height-sm;
			
			& + .navbar-brand {
				@if $enable-rtl {
					margin-right: 0;
				} @else {
					margin-left: 0;
				}
			}
		}
		@if $enable-rtl {
			margin-right: 0;
			margin-left: rem(10px);
		}
		
		& .icon-bar {
			display: block;
			background: $black;
			width: rem(20px);
			height: rem(1px);
			margin: 0 auto;
				
			& + .icon-bar {
				margin-top: rem(4px);
			}
		}
		&:hover {
			background: none;
			opacity: 0.75;
		}
		&.pull-left {
			margin-left: rem(10px);
			margin-right: 0;
			
			@if $enable-rtl {
				margin-right: rem(10px);
				margin-left: 0;
			}
		}
		&.navbar-toggle-left {
			display: none;
			
			@if $enable-rtl {
				margin-left: rem(-15px);
			} @else {
				margin-right: rem(-15px);
			}
			
			@include media-breakpoint-up(md) {
				display: block;
			}
			@include media-breakpoint-down(sm) {
				& + .navbar-brand {
					@if $enable-rtl {
						margin-right: rem(60px);
					} @else {
						margin-left: rem(60px);
					}
				}
			}
		}
	}
	& .navbar-header {
		@include clearfix();
		@include display-flex();
		@include flex-align(center);
	}
	& .navbar-brand {
		padding: rem(15px);
		height: $header-height;
		font-weight: 300;
		font-size: rem(18px);
		line-height: rem(30px);
		text-decoration: none;
		
		@include flex(1);
		@include flex-align(center);
		@include display-flex();
		@if $enable-rtl {
			margin-right: 0;
			margin-left: rem(16px);
		}
		@include media-breakpoint-down(sm) {
			height: $header-height-sm;
			margin: 0 $header-height;
			
			@include flex-justify-content(center);
			
			& + .navbar-toggle {
				@if $enable-rtl {
					margin-right: -$header-height;
				} @else {
					margin-left: -$header-height;
				}
			}
		}
		
		& img {
			max-width: 100%;
			max-height: 100%;
		}
		& b {
			font-weight: bold;
		}
		& .navbar-logo {
			margin-right: rem(10px);
			background: $primary;
			border: 10px solid transparent;
			border-color: rgba($black, 0) rgba($black, .15) rgba($black, .3);
			position: relative;
			overflow: hidden;
			
			@include border-radius($border-radius);
			@if $enable-rtl {
				margin-right: 0;
				margin-left: rem(10px);
			}
		}
	}
	& .navbar-nav {
		list-style-type: none;
		margin: 0;
		padding: 0;
		
		@include display-flex();
		@include flex-direction-row();
		@include media-breakpoint-down(sm) {
			@include flex-justify-content(flex-end);
			@include flex(1);
			
			border-top: 1px solid lighten($border-color, 10%);
			padding-left: 15px;
			padding-right: 15px;
		}
		
		& > li {
			position: relative;
			
			& > a {
				display: block;
				text-decoration: none;
				line-height: rem(30px);
				padding: rem(15px);
				border: none;
				
				@include media-breakpoint-down(sm) {
					line-height: rem(20px);
					height: $header-height-sm;
				}
				
				& .label {
					position: absolute;
					top: rem(8px);
					right: rem(8px);
					display: block;
					background: $red;
					line-height: rem(22px);
					font-weight: 500;
					color: $white;
					padding: 0;
					min-width: rem(22px);
					height: rem(22px);
					font-size: rem(13px);
					
					@include border-radius($border-radius-lg * 5);
					@include media-breakpoint-down(sm) {
						top: rem(4px);
					}
				}
				& i {
					top: 1px;
					position: relative;
					font-size: rem(16px);
				}
				&:hover,
				&:focus {
					opacity: .75;
				}
				&.icon {
					& i {
						font-size: rem(22px);
						height: rem(30px);
						line-height: rem(30px);
						margin: 0;
						display: block;
						
						@include media-breakpoint-down(sm) {
							height: rem(20px);
							line-height: rem(20px);
						}
					}
				}
			}
			
			&.active {
				& > a {
					background: $light;
					opacity: 1;
				}
			}
			&.dropdown {
				& .dropdown-menu {
					margin: 0;
					
					@include border-top-right-radius(0);
					@include border-top-left-radius(0);
				}
				
				&.dropdown-lg {
					position: static;
					
					& .dropdown-menu {
						left: rem(20px) !important;
						right: rem(20px) !important;
						padding: rem(20px);
						
						@include transform(none !important);
						@include media-breakpoint-up(md) {
							top: 100% !important;
						}
						@include media-breakpoint-down(sm) {
							overflow: scroll;
							top: $header-height * 2 + rem(1px) !important;
							max-height: calc(100vh - #{$header-height * 2 + rem(1px)});
						}
						
						&.dropdown-menu-lg {
							& .nav {
								& > li {
									& > a {
										padding: 0;
										background: none;
										line-height: rem(24px);
									}
								}
							}
						}
					}
				}
			}
			&.show {
				& > a,
				& > a:hover,
				& > a:focus {
					background: none;
					color: $dark;
					opacity: 1;
				}
			}
			&.divider {
				height: rem(34px);
				margin-top: rem(10px);
				background: $light;
				width: 1px;
			}
		}
		&.navbar-right {
			margin-left: auto;
			
			@if $enable-rtl {
				margin-left: 0;
				margin-right: auto;
			}
		}
	}
	& .navbar-form {
		padding: 0 rem(15px);
		margin: rem(9px) 0;
		
		@include media-breakpoint-down(sm) {
			padding-left: rem(5px);
			padding-right: rem(5px);
			
			@include flex(1);
		}
		
		& .form-group {
			margin: 0;
			position: relative;
		}
		& .form-control {
			width: rem(220px);
			padding: rem(5px) rem(15px);
			height: rem(32px);
			background: $light;
			border-color: $light;
			
			@include border-radius($border-radius-lg * 5);
			@include media-breakpoint-down(sm) {
				width: 100%;
			}
			
			&:focus {
				width: rem(300px);
				border-color: $light;
				
				@include box-shadow(none);
				@include animation(navbar-input-expand .2s);
				@include media-breakpoint-down(sm) {
					width: 100%;
					
					@include animation(none);
				}
			}
		}
		& .btn-search {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			background: none;
			
			@include border-radius(0 $border-radius-lg * 5 $border-radius-lg * 5 0);
			@include display-flex();
			@include flex-align(center);
			@if $enable-rtl {
				right: auto;
				left: 0;
			}
			
			& > i[class*="ion-"] {
				font-size: rem(22px);
				display: block;
			}
		}
	}
	& .navbar-user {
		& img {
			width: rem(36px);
			height: rem(36px);
			
			@include border-radius($border-radius-lg * 5);
			@if $enable-rtl {
				margin: rem(-3px) rem(10px) rem(-3px) 0;
				float: left;
			} @else {
				float: right;
				margin: rem(-3px) 0 rem(-3px) rem(10px);
			}
			@include media-breakpoint-down(sm) {
				float: none;
				margin: rem(-8px) 0;
			}
		}
		& .image {
			width: rem(36px);
			height: rem(36px);
			overflow: hidden;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			@include border-radius($border-radius-lg * 5);
			@if $enable-rtl {
				margin: rem(-3px) rem(10px) rem(-3px) 0;
				float: left;
			} @else {
				float: right;
				margin: rem(-3px) 0 rem(-3px) rem(10px);
			}
			@include media-breakpoint-down(sm) {
				float: none;
				margin: rem(-8px) 0;
			}
			
			&.image-icon {
				font-size: rem(22px);
				text-align: center;
				
				@include display-flex();
				@include flex-align(center);
				@include flex-justify-content(center);
				
				& i {
					float: none;
					display: block;
					font-size: rem(36px);
					text-align: center;
					width: auto;
					margin: 0 auto rem(-12px);
				}
			}
		}
	}
	& .navbar-language {
		& .flag-icon {
			font-size: rem(15px);
			
			@if $enable-rtl {
				margin-left: rem(7px);
			} @else {
				margin-right: rem(7px);
			}
		}
	}
	& .navbar-collapse {
		@include media-breakpoint-up(md) {
			display: block;
			
			@include flex-basis(initial);
		}
		@include media-breakpoint-only(md) {
			display: none;
		}
		@include media-breakpoint-down(md) {
			& .navbar-nav {
				& > li {
					@include flex(1);
					
					& > a {
						@include display-flex();
						@include flex-align(center);
						@include flex-justify-content(center);
					}
				}
			}
		}
	}
	& .search-form {
		position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: $header-height;
    background: $white;
    
    @include transition(all .3s ease);
    @include display-flex();
    @include flex-align(center);
    @include media-breakpoint-down(sm) {
    	height: $header-height - rem(10px);
    	@include transition(none);
    }
    
    & .search-btn,
    & .close {
    	height: 100%;
			width: $header-height;
			color: lighten($black, 25%);
			z-index: 1000;
			background: 0 0;
			border: none;
			padding: 0;
			outline: 0;
			margin: 0;
			float: none;
			
			@include display-flex();
			@include flex-align(center);
			@include flex-justify-content(center);
    }
    & .form-control {
    	border: none;
			height: 100%;
			color: $black;
			padding-left: 0;
			padding-right: 0;
			font-size: rem(16px);
			
			@include border-radius(0);
			@include box-shadow(none);
    }
	}
	
	&.header-search-toggled {
		& .search-form {
			bottom: 0;
		}
	}
	&.navbar-default {
		background: $white;
		
		& .navbar-brand {
			color: $dark;
		}
		& .navbar-toggle {
			& .icon-bar {
				background: $dark;
			}
		}
		& .navbar-nav {
			& > li {
				& > a {
					color: lighten($black, 35%);
				}
			}
		}
	}
	&.navbar-inverse {
		background: mix($black, $blue-grey, 60%);
		
		& .navbar-toggle {
			& .icon-bar {
				background: rgba($white, .75);
			}
		}
		& .navbar-brand {
			color: $white;
		}
		& .navbar-nav {
			@include media-breakpoint-down(sm) {
				border-color: mix($black, $blue-grey, 45%);
			}
			& > li {
				& > a {
					color: $white;
					
					&:hover,
					&:focus {
						color: rgba($white, .75);
					}
				}
				
				&.active {
					& > a {
						background: $dark;
						opacity: 1;
					}
				}
				&.divider {
					background: rgba($white, .2);
				}
			}
		}
		& .navbar-form {
			margin: rem(10px) 0;
			
			& .form-control {
				background: rgba($white, .25);
				border-color: transparent;
				height: rem(30px);
				color: $white;
				
				@include placeholder(rgba($white, .5));
			}
			& .btn-search {
				color: rgba($white, .5);
			}
		}
	}
}

.has-scroll {
	& .header {
		@include box-shadow(0 0 16px rgba($black, .15));
	}
}