@media screen and (min-width: 1024px) 
{
	body main{ margin-top: 80px; }
	
	header:not(.dashboard) + section{ margin-top: 80px; }
	header:not(.dashboard) + div.content-section-container{ margin-top: 80px; }
	header:not(.dashboard) + div.header-container{ margin-top: 80px; }
	header + section + main{ margin-top: 0px; }
	header + section + nav + main{ margin-top: 0px; }
	header + div.content-section-container + main{ margin-top: 0px; }
	header + div.header-container + main{ margin-top: 0px; }
	header + div.header + main{ margin-top: 0px; }
	section + main{ margin-top: 0px; }
	div.content-section-container + main{ margin-top: 0px; }
	div.header-container + main{ margin-top: 0px; }
}
body.ve main{ margin-top: 0px; }

main{ transition: 0.3s ease-in-out !important; }
main.menu-show
{ 
	-ms-transform: translateX(66.666%);
	transform: translateX(66.666%); 
	-webkit-transform: translateX(66.666%);
	
}
/* MENU BAR */
div#menu-bar-container { z-index: 10001; min-height: auto; position: fixed; top: 0px; right: 0px; width: 100%; height: 174px; }
div#menu-bar-container{ height: 80px;  }

div.full-menu{ display: none; }
div.compact-menu{ display: block; }

div.compact-menu a.compact-logo{ display: inline-block; }
div.compact-menu a.compact-logo:hover{ background-color: rgba(255,255,255,0.2); }
div.compact-menu a.compact-logo:focus{ border-bottom: 2px solid rgb(255,232,0); }
div.compact-menu a.compact-logo img{ padding: 12px 12px 4px 12px; height: 60px; }

div#menu-bar-container ul{ list-style: none; padding-left: 0px; margin-bottom: 0; }
div#menu-bar-container ul li{ display: inline-block; }
div#menu-bar-container ul li a { /*font-weight: 300;*/ font-size: 20px; color: white; /*line-height: 64px;*/ line-height: 78px; display: block; padding: 0px 8px; border-bottom: 2px solid transparent; transition: all 0.3s ease; }

@media screen and (min-width: 1048px) 
{
	div#menu-bar-container ul li a { padding: 0px 12px; }
}

div#menu-bar-container ul li a:hover, div#menu-bar-container ul li a:focus 
{
    color: #ffdd00;
    border-bottom-color: #ffdd00;
	background-color: transparent;
	transition: all 0.3s ease; 
	border-bottom-width: 2px;
}
div#menu-bar-container img.icon{ margin: 0px; }
div#menu-bar-container div.content-section-inner{ padding-bottom: 0px; padding-top: 12px; }

#hau-navbar{ pointer-events: initial; position: relative; transition: all 0.3s ease; height: 173px; border-bottom: 1px solid white; }
#hau-navbar{ height: 80px; }

div#menu-bar-container ul li.icon-link{ border-left: 1px solid white; line-height: 80px; }
div#menu-bar-container ul li.icon-link a { line-height: 78px; display: inline-block; /*vertical-align: middle;*/ padding: 0; }
div#menu-bar-container ul li.icon-link a img{ padding: 12px; border-radius: 0; vertical-align: middle; }
div#menu-bar-container ul li.icon-link:hover{ }
div#menu-bar-container ul li.icon-link a:hover, div#menu-bar-container ul li.icon-link a:focus { /*border-bottom-color: transparent;*/ background-color: rgba(255,255,255,0.2);  }

div#menu-bar-container ul li.icon-link a img.icon:hover, div#menu-bar-container ul li.icon-link a img.icon:focus{ background-color: transparent; }
/* END MENU BAR */

/* DASHBOARD MENU BAR */
div.dashboard-header div#menu-bar-container{ min-height: auto; height: auto; }
div.dashboard-header div#menu-bar-container ul li a{ border-bottom-width: 4px; line-height: 57px; }
/* END DASHBOARD MENU BAR */

/* MOBILE MENU */
#mobile-menu-overlay{ cursor: pointer; display: block; transition: all 0.3s ease; position: fixed; top: 0px; width: 100%; height: 100%; z-index: -998; margin: 0; padding: 0; overflow: hidden; background-color: rgb(0,0,0); background-color: transparent; opacity: 0; }

#mobile-menu
{ 
	width: 66.666%; height: 100vh; position: fixed; top: 0px; left: 0px; z-index: 2147483637;  
	-ms-transform-origin: left;
	    transform-origin: left; -webkit-transform-origin: left;
	-ms-transform: translateX(-100%);
	    transform: translateX(-100%); -webkit-transform: translateX(-100%);
	transition: 0.3s ease-in-out !important; 
	overflow-y: scroll;
}
#mobile-menu.show
{ 
	margin-left: 0px; margin-right: 0px; 
	-ms-transform-origin: left;
	    transform-origin: left; -webkit-transform-origin: left;
	-ms-transform: translateX(0px);
	    transform: translateX(0px); -webkit-transform: translateX(0px);
	transition: 0.3s ease-in-out;
}

#mobile-menu ul{ list-style: none; margin-bottom: 0px; padding-left: 0px; }
#mobile-menu ul li{ display: block; }
#mobile-menu ul li a
{ 
	color: white; 
	display: block; 
	background-image: url('/img/icon/icon-menu-arrow-white.png'); 
	background-position: center right; 
	background-repeat: no-repeat; 
	/*padding: 0px 32px 0px 16px; 
	line-height: 48px; */
	padding: 8px 32px 8px 12px; 
	line-height: initial;
	border-left: 4px solid transparent; 
	transition: all 0.3s ease; 
	text-decoration: none; 
	border-top: 1px solid rgba(128,128,128,0.5);
	border-bottom: 0;
	font-weight: 600;	
}
#mobile-menu ul li a:hover, #mobile-menu ul li a:focus
{ 
	background-color: transparent; 
	transition: all 0.3s ease; 
	border-left: 4px solid #ffdd00; 
	color: #ffdd00;
}
#mobile-menu ul li ul li a { padding-left: 28px; font-weight: normal; font-size: 0.8em; background-image: none; border-top: 0; }
#mobile-menu a span { padding: 16px; display: inline-block; }
#mobile-menu a span img { height: 64px; max-width: 100%; }
#mobile-menu > ul { margin-bottom: 60px; }

#mobile-menu a span img{ content:url("/img/brand/white/HAU-logo.svg"); width: 200px; } 

@media screen and (max-width: 550px) 
{
	#mobile-menu a span img{ content:url("/img/brand/white/HAU-shield.svg"); width: 50px; } 
}

div#icon-mobile-menu{ float: right; }
div#icon-mobile-menu a { display: inline-block; }
div#icon-mobile-menu a img{ display: block; width: 48px; padding: 8px; border-left: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
div#icon-mobile-menu a#my-menu{ border-bottom-left-radius: 50%; }
div#icon-mobile-menu a#my-menu img{ border-bottom-left-radius: 50%; }
div#icon-mobile-menu a:hover, div#icon-mobile-menu a:focus{ background-color: rgba(255,255,255,0.2); }

/* burger menu */
#menu-icon 
{
	position: relative;
	max-width: 64px;
	max-height: 64px;
	width: 100%;
	height: 64px;
	display: block;
	border-bottom-left-radius: 50%;
	border-left: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

#menu-icon path 
{
	stroke: white;
	stroke-width: 2;
	stroke-linecap: round;
	transition: all 250ms ease-in-out;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

#menu-button{ transition: all 250ms ease-in-out; pointer-events: initial; }
#menu-button:hover path,
#menu-button:focus path,
#menu-button:active path 
{
    stroke: rgb(255,221,0);
}
#menu-button.is-active #menu-icon path:nth-child(1) { opacity: 0; }
#menu-button.is-active #menu-icon path:nth-child(4) { opacity: 0; }
#menu-button.is-active #menu-icon path:nth-child(2) { transform: rotate(45deg); }
#menu-button.is-active #menu-icon path:nth-child(3) { transform: rotate(-45deg); }

#menu-button svg{ background-color: rgb(0, 33, 105); } 
/* END MOBILE MENU */

/* COMPACT MENU */
.main-menu-container{ pointer-events: none; background-color: transparent; z-index: 10001; min-height: auto; position: fixed; top: 0px; right: 0px; width: 100%; }
.main-menu-container nav{ 
	display: grid; 
	place-items: end;
	grid-auto-flow: column;	
	 
	max-width: 1400px;
	margin: 0 auto;
}
.main-menu-container nav > div{ width: 100%; }
.main-menu-container nav > div a img{ height: 56px; padding: 12px; display: block; }
.main-menu-container nav > div a:hover, nav > div a:focus{ background-color: rgba(255,255,255,0.2); }

.main-menu-container nav ul{ 
	list-style: none; 
	//display: grid; 
	//place-items: end;
	//grid-auto-flow: column; 
	//grid-auto-columns: auto;
	margin: 0; 
	padding: 0;
	display: flex;
	justify-content: right;	
	flex-wrap: wrap;
}
.main-menu-container nav ul li{ position: relative; display: inline-block; }
.main-menu-container nav ul li a{ 
	padding-left: 12px; 
	padding-right: 12px; 
	line-height: 80px; 
	display: block; 
	color: white; 
	text-decoration: none; 
	font-size: 20px;
	font-weight: bold;
}
.main-menu-container nav ul li a:hover, nav ul li a:focus{ 
	background-color: rgba(255,255,255,0.2); 
	color: rgb(255,232,0);
}
.main-menu-container .dropdown_menu{ 
	position: absolute; 
	top: 80px; 
	visibility: hidden; 
	opacity: 0.3; 
	grid-auto-flow: row; 
	min-width: 250px; 
	transition: 280ms all 120ms ease-out; 
	place-items: start;
	z-index: 999;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.25);
}
.main-menu-container .dropdown_menu li{ width: 100%; background-color: rgb(1,33,105); display: block; border-bottom: 1px solid rgba(255,255,255,0.2); }
.main-menu-container .dropdown_menu li:last-of-type{ border-bottom-width: 0; }
.main-menu-container .dropdown_menu a{ width: 100%; line-height: normal; padding: 12px; box-sizing: border-box; }

.main-menu-container .dropdown:hover .dropdown_menu, 
.main-menu-container .dropdown:focus-within .dropdown_menu {
  opacity: 1;
  visibility: visible;
}
.main-menu-container nav ul li.icon{ border-left: 1px solid white; }
.main-menu-container nav ul li.icon a{ line-height: 0; display: block; }
.main-menu-container nav ul li.icon a img{ width: 48px; height: 48px; display: inline-block; vertical-align:middle; margin: 0; padding-top: 16px; padding-bottom: 16px; }
/* END COMPACT MENU */

#mobile-branding a{ display: inline-block; position: relative; z-index: 10002; }
#mobile-branding a img{ display: block; height: 64px; }