#header {
	background: #004153;
	height:100px;
}

#header .col-auto {
	position: relative;
}

#header h1 {
	padding: 25px 0;
	margin:0;
}

/**
 * Header: Icon
 */
#header .icon {
	display: inline-block;
	padding-right: 10px;
	height:30px;
}

#header svg {
	fill: #fbfbfb;
	height:30px;
	max-width:30px;
	width: auto;
}

#header .account svg {
	margin:2px 0;
	height:26px;
}

/**
 * Header: Menu Toggle
 */
#header .menu-toggle {
	position:absolute;
	right: 25px;
	top: 50%;
	margin-top: -9px;
	line-height:1;
	text-transform: uppercase;
	cursor:pointer;
	color: #fbfbfb;
	border-bottom: none;
	height:18px;
	display: none;
}

#header .menu-toggle:before {
	content: "Menu";
}


#header .menu-toggle .icon {
	display: inline-block;
	position: relative;
	width:25px;
	height: 13px;
	padding:0;
	margin-left: 10px;
}


#header .menu-toggle .icon:before {
	display: block;
	position:absolute;
	top:0px;
	left:0px;
	content: "";
	height: 1px;
	width: 100%;
	border-top: 2px solid #fbfbfb;
}


#header .menu-toggle .icon:after {
	display: block;
	content: "";
	position:absolute;
	bottom:0px;
	left:0px;
	height: 1px;
	width: 100%;
	border-bottom: 2px solid #fbfbfb;
}

/**
 * Header: Menu Toggle: Open
 */
#header.open .menu-toggle:before {
	content: "Close";
}


#header.open .menu-toggle .icon {
	height:2px;
	top: -5px;
}


#header.open .menu-toggle .icon:before {
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


#header.open .menu-toggle .icon:after {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


/**
 * Header: Menus
 */
#header .menus {
	margin: 25px 0 0;
}

#header .menus span {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	vertical-align: top;
}

/**
 * Header: Menu
 */
#header .menu {
	padding-left:50px;
	height:30px;
	line-height: 30px;
}

#header .menu:first-child {
	padding-left:0px;
}

#header .menu > a {
	color: #fbfbfb;
	text-decoration: none;
	border-bottom: none;
}

#header .menu > a:focus svg,
#header .menu > a:hover svg {
	fill: #d6d6d6;
}

#header .menu > a:active svg {
	fill: #a8a8a8;
}

#header .menu > a span:last-child {
	text-decoration: none;
	border-bottom:1px solid #fbfbfb;
}

#header .menu > a:focus span:last-child,
#header .menu > a:hover span:last-child {
	text-decoration: none;
	color: #d6d6d6;
	border-bottom-color: transparent;
}

#header .menu > a:active span:last-child {
	border-bottom-color: transparent;
	color: #a8a8a8;
}


/**
 * Header: Dropdown Toggle
 */
#header .dropdown-toggle {
	-webkit-border-radius: 2px;
	border-radius: 2px;
	padding: 10px;
	height:50px;
}
 
#header .dropdown-toggle:focus {
	border: 1px solid #0094b3;
	padding: 9px;
}
 
#header .dropdown-toggle:after {
	border-top:none;
	border-right: none;
	border-left: 2px solid #fbfbfb;
	border-bottom: 2px solid #fbfbfb;
	margin-left:10px;
	width:13px;
	height:13px;
	vertical-align: 3px;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#header .dropdown-toggle:hover:after,
#header .dropdown-toggle:focus:after {
	border-color: #d6d6d6;
}

#header .dropdown-toggle:active:after {
	border-color: #a8a8a8;
}

#header .dropdown-toggle[aria-expanded=true]:after {
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	vertical-align: -3px;
}

/**
 * Header: Dropdown Menu
 */
#header .dropdown-menu {
	-webkit-border-radius: 0;
	border-radius: 0;
	margin-top:25px;
	margin-left:-15px;
	background: #fff;
	border:none;
	-webkit-box-shadow: 0 0 23px -2px #e7e3e3;
    -moz-box-shadow: 0 0 23px -2px #e7e3e3;
    box-shadow: 0 0 23px -2px #e7e3e3;
	padding:30px;
}

#header .dropdown-menu:before {
	z-index:999;
	content:"";
	display: block;
	width: 16px;
	height: 16px;
	background: #fff;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position:absolute;
	top: -8px;
	left:50%;
	margin-left: -8px;
}

#header .dropdown-menu:after {
	content:"";
	z-index:998;
	position:absolute;
	display: block;
	background: #004153;
	height: 15px;
	top:-15px;
	left:-10px;
	right:-10px;
}

/**
 * Header: Dropdown Item
 */
#header .dropdown-item {
	margin: 0 0 20px;
	padding:0;
	border-bottom: none;
	color: #0094b3;
}

#header .dropdown-item span {
	border-bottom: 1px solid #0094b3;
}

#header .dropdown-item:hover span {
	border-bottom-color: transparent;
}

#header .dropdown-item:last-child {
	margin:0;
}

#header .dropdown-item:hover {
	background: transparent;
	color: #0094b3;
	border-bottom: none;
}

/**
 * Header: Dropdown Divider
 */
#header .dropdown-divider {
	margin: 0 0 20px;
}

@media (max-width: 860px) {
	#header {
		height: 80px;
	}

	#header .logo {
		height: 40px;
		width:204px;
	}

	#header h1 {
		padding: 20px 0;
	}
	
	#header .menus {
		margin: 15px 0 0;
	}
	
	#header .dropdown-menu {
		margin-top: 15px;
	}
}

@media (max-width: 740px) {
	#header {
		min-height: 60px;
		height: auto;
		max-height: 60px;
	}
	
	#header.open {
		max-height: 1000px;
	}
	
	#header .col-auto,
	#header .col {
		width: 100%;
		display: block;
	}
	
	#header h1 {
		padding: 10px 0 10px;
	}
	
	#header .menu-toggle {
		display: block;
	}
	
	#header .menus {
		-display: none;
		margin:0;
	}
	
	#header .menus .d-flex {
		display: block !important;
	}
	
	#header .menus .float-right {
		float: none !important;
	}
	
	#header .menu {
		display: block !important;
		width: 100%;
		padding-left: 0px;
		margin-bottom: 20px;
		margin-top: 0px;
		height: auto;
	}
	
	#header .menu .icon {
		width: 40px;
	}
	
	#header .dropdown-toggle {
		display: block;
	}
	
	#header .dropdown-toggle:focus {
		border-color: transparent;
	}
	
	#header .dropdown-menu {
		position: static !important;
		transform: none !important;
		background: transparent;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		float: none;
		margin: 0;
		height: auto !important;
		padding: 5px 55px 0;
	}
	
	#header .menu:last-child .dropdown-menu {
		padding-bottom: 10px;
	}
	
	#header .dropdown-menu a,
	#header .dropdown-menu a span {
		color: #fbfbfb;
		border-bottom-color: #fbfbfb;
	}
	
	#header .dropdown-menu:before,
	#header .dropdown-menu:after {
		display: none;
	}
	
	#header .dropdown-divider {
		display: none;
	}
	
	#header .dropdown-item {
		line-height: 30px;
		padding: 5px 0 0;
	}
}