.header {
	padding: 0;
	
	@include transition(all .2s linear);
	
	& .nav.navbar-nav {
		@include media-breakpoint-down(lg) {
			margin: rem(7.5px) 0;
		}
		
		& .nav-item {
			& .nav-link {
				font-size: rem(12px);
				line-height: rem(20px);
				font-weight: 600;
				padding: rem(25px) rem(15px);
				display: block;
				
				@include transition(all .2s linear);
				@include media-breakpoint-down(lg) {
					padding: rem(10px) rem(15px);
				}
			}
			&.dropdown {
				&.open {
					& .dropdown-menu {
						display: block;
					}
				}
				&:hover,
				&:focus {
					& .dropdown-menu {
						@include media-breakpoint-up(lg) {
							display: block;
						}
					}
				}
			}
		}
		&.navbar-right {
			@include media-breakpoint-up(lg) {
				margin-left: auto;
				margin-right: rem(-15px);
			}
		}
	}
	& .navbar-toggle {
		float: right;
		position: relative;
		padding: rem(9px) rem(10px);
		margin: rem(8px) rem(15px);
		background-color: transparent;
		background-image: none;
		border: 1px solid transparent;
		
		@include border-radius($border-radius);
		@include media-breakpoint-up(lg) {
			display: none;
		}
		
		&:focus {
			outline: none;
		}
		& .icon-bar {
			display: block;
			width: rem(22px);
			height: rem(2px);
		
			@include border-radius($border-radius);
			
			& + .icon-bar {
				margin-top: rem(4px);
			}
		}
	}
	& .navbar-brand {
		padding: rem(25px) rem(15px);
		
		@include transition(all .2s linear);
		
		& img {
			display: block;
			margin: rem(-10px) 0;
			max-height: rem(40px);
		}
		& .brand-logo {
			float: left;
			border: 15px solid;
			border-color: $primary darken($primary, 10%) darken($primary, 20%);
			margin-right: rem(12px);
			margin-top: rem(-5px);
			margin-bottom: rem(-5px);
			@include border-radius($border-radius);
			
			& + .brand-text {
				margin-left: rem(40px);
			}
		}
		& .brand-text {
			display: block;
			color: $dark;
			font-size: rem(20px);
			line-height: rem(20px);
			display: block;
		}

		@include media-breakpoint-up(lg) {
			margin-left: rem(-15px);
		}
	}
	&.navbar-transparent {
		background: none;
		@include box-shadow(0 1px rgba($white, .25));
		
		& .navbar-nav {
			& .nav-item {
				& .nav-link {
					color: rgba($white, .5);
					
					&:hover,
					&.active {
						color: $primary;
					}
				}
			}
		}
		& .brand-text {
			color: $white;
		}
		& .navbar-toggle {
			border-color: transparent;
			background: rgba($white, .2);
	
			& .icon-bar {
				background: $white;
			}
		}
		&.navbar-sm {
			background: $white;
			
			& .brand-text {
				color: $dark;
			}
			& .navbar-nav {
				& .nav-item {
					& .nav-link {
						color: $dark;
						
						&:hover,
						&.active {
							color: $primary;
						}
					}
				}
			}
			& .navbar-toggle {
				border-color: transparent;
				background: $gray-300;
	
				& .icon-bar {
					background: $gray-600;
				}
			}
		}
	}
	&.navbar-inverse {
		background: lighten($black, 13%);
		
		& .navbar-nav {
			
			& .nav-item {
				& .nav-link {
					color: rgba($white, .5);
					
					&:hover,
					&.active {
						color: $primary;
					}
				}
			}
		}
		& .brand-text {
			color: $white;
		}
		& .navbar-toggle {
			border-color: transparent;
			background: rgba($white, .2);
	
			& .icon-bar {
				background: $white;
			}
		}
		&.navbar-sm {
			& .navbar-nav {
				& .nav-item {
					& .nav-link {
						&:hover,
						&.active {
							color: $primary;
						}
					}
				}
			}
		}
	}
	&.navbar-default {
		background: $white;
		@include box-shadow(0 0 16px rgba($black, .15));
		
		& .brand-text {
			color: $dark;
		}
		& .navbar-nav {
			& .nav-item {
				& .nav-link {
					color: $dark;
					
					&:hover,
					&.active {
						color: $primary;
					}
				}
			}
		}
		& .navbar-toggle {
			border-color: transparent;
			background: $gray-300;

			& .icon-bar {
				background: $gray-600;
			}
		}
	}
	&.navbar-sm {
		@include box-shadow(0 0 16px rgba($black, .15));
		
		& .navbar-brand {
			padding: rem(15px);
		}
		& .navbar-nav .nav-item .nav-link {
			padding: rem(15px);
			
			@include media-breakpoint-down(lg) {
				padding: rem(10px) rem(15px);
			}
		}
	}
	&.navbar-fixed-top {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 1030;
		top: 0;
	}
	& .dropdown-menu {
		background: lighten($black, 13%);
		padding: 0;
		margin: 0;
		border: none;
		
		@include border-radius(0);
		@include media-breakpoint-down(lg) {
			background: none;
		}
		
		& .dropdown-item {
			color: rgba($white, .5);
			padding: rem(10px) rem(15px);
		
			@include media-breakpoint-down(lg) {
				color: rgba($white, .75);
			}
			
			&:hover,
			&:focus {
				background: lighten($black, 10%);
				
				@include media-breakpoint-down(lg) {
					background: none;
					color: $white;
				}
			}
			& + .dropdown-item {
				border-top: 1px solid lighten($black, 20%);
				
				@include media-breakpoint-down(lg) {
					border-top-color: rgba($white, .25);
				}
			}
		}
	}
}