.header {
	border: none;
	padding: rem(7px) 0;
	z-index: $header-zindex;
	
	@include transition(all .2s linear);
	
	& .nav.navbar-nav {
		&.navbar-right {
			@include media-breakpoint-up(lg) {
				margin-left: auto;
				margin-right: rem(-15px);
			}
		}
		& > li {
			& > a {
				background: none;
				padding: rem(15px);
				font-size: $font-size-base;
				font-weight: bold;
				letter-spacing: 0.5px;
				color: $dark;
				text-decoration: none;
				display: block;
				
				@include media-breakpoint-down(md) {
					padding: rem(15px) rem(15px);
					font-size: $font-size-sm;
				}
				
				&:hover,
				&:focus {
					color: $primary;
				}
			}
		}
		& .dropdown-menu {
			background: $gray-100;
			border: none;
			margin-top: rem(7px);
			padding: 0;
			
			@include box-shadow(none);
			@include border-radius(0);
			@include media-breakpoint-down(md) {
				margin-top: 0;
			}
			
			& .dropdown-item {
				padding: rem(12px) rem(20px);
				line-height: rem(20px);
				
				&:hover,
				&:focus {
					background: $gray-200;
				}
				& + .dropdown-item {
					border-top: 1px solid $gray-300;
				}
			}
		}
	}
	& .navbar-brand {
		line-height: rem(31px);
		padding: rem(10px) rem(15px);
		max-height: rem(51px);
		
		@include media-breakpoint-up(lg) {
			margin-left: rem(-15px);
		}
		
		& img {
			display: block;
			margin: -5px 0;
			height: 40px;
		}
		& .brand-text {   
			font-weight: bold;
			letter-spacing: 1px;
			font-size: rem(16px);
			color: $dark;
		}
		& .brand-logo {
			border: 15px solid transparent;
			border-color: $primary darken($primary, 10%) darken($primary, 20%);
			float: left;
			margin-right: rem(10px);
			
			@include border-radius(20px);
		}
	}
	& .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-sm {
		padding: rem(2px) 0;
		
		& .nav.navbar-nav {
			& .dropdown-menu {
				margin-top: rem(2px);
			}
		}
	}
	&.navbar-fixed-top {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}
	&.navbar-default {
		background: $white;
		
		@include box-shadow(0 0 16px rgba($black, .15));
		
		& .navbar-toggle {
			background: $gray-300;
			
			& .icon-bar {
				background: $gray-600;
			}
		}
	}
	&.navbar-inverse {
		background: darken($dark, 8%);
		
		& .brand-text,
		& .nav.navbar-nav > li > a {
			color: $white;
		}
		& .navbar-toggle {
			border-color: transparent;
			background: rgba($white, .2);
		
			& .icon-bar {
				background: $white;
			}
		}
		& .navbar-nav {
			& .dropdown-menu {
				background: $dark;
				& .dropdown-item {
					color: $white;
					&:hover,
					&:focus {
						background: lighten($dark, 5%);
					}
					& + .dropdown-item {
						border-top: 1px solid lighten($dark, 5%);
					}
				}
			}
		}
	}
	&.navbar-transparent {
		background: none;
		
		& .brand-text,
		& .nav.navbar-nav > li > a {
			color: $white;
		}
		& .navbar-toggle {
			border-color: transparent;
			background: rgba($white, .2);
		
			& .icon-bar {
				background: $white;
			}
		}
		&.navbar-sm {
			background: $white;
			@include box-shadow(0 0 16px rgba($black, .15));
			
			& .brand-text,
			& .nav.navbar-nav > li > a {
				color: $dark;
			}
			& .navbar-toggle {
				background: $gray-300;
			
				& .icon-bar {
					background: $gray-600;
				}
			}
		}
	}
}