/********************************************************************
  /$$$$$$  /$$$$$$$$ /$$   /$$ /$$$$$$$$ /$$$$$$$   /$$$$$$  /$$
 /$$__  $$| $$_____/| $$$ | $$| $$_____/| $$__  $$ /$$__  $$| $$
| $$  \__/| $$      | $$$$| $$| $$      | $$  \ $$| $$  \ $$| $$
| $$ /$$$$| $$$$$   | $$ $$ $$| $$$$$   | $$$$$$$/| $$$$$$$$| $$
| $$|_  $$| $$__/   | $$  $$$$| $$__/   | $$__  $$| $$__  $$| $$
| $$  \ $$| $$      | $$\  $$$| $$      | $$  \ $$| $$  | $$| $$
|  $$$$$$/| $$$$$$$$| $$ \  $$| $$$$$$$$| $$  | $$| $$  | $$| $$$$$$$$
 \______/ |________/|__/  \__/|________/|__/  |__/|__/  |__/|________/
 ********************************************************************/
#header-menu-navigation
{
    box-sizing: border-box;
    position: relative;
    z-index: 900;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#header-menu-navigation,
#header-menu-navigation ul,
#header-menu-navigation li
{
    display: block;
    list-style: none !important;
    margin: 0;
    padding: 0;
    line-height: normal;
    direction: ltr;
    text-align: left;
}

#header-menu-navigation > ul
{
    margin-left: 10px;
	margin-bottom: 10px;
}

#header-menu-navigation li,
#header-menu-navigation a:link,
#header-menu-navigation a:active,
#header-menu-navigation a:visited,
#header-menu-navigation a:hover
{
    position: relative;
}

#header-menu-navigation *,
#header-menu-navigation *::before,
#header-menu-navigation *::after
{
    box-sizing: inherit;
}

.heading-only
{
	cursor: default;
}

.header-menu-navigation-btn
{
  	position: absolute;
  	z-index: 1500;
  	top: 75px;
  	right: 20px;
  	display: inline-block;
  	width: 55px;
  	height: 40px;
  	white-space: nowrap;
  	overflow: hidden;
  	cursor: pointer;
  	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  	transition: all 400ms;
}

body.notification-dismissed .header-menu-navigation-btn
{
	top: 40px;
}

@media screen and (max-width:1200px)
{
	body.notification-dismissed .header-menu-navigation-btn
	{
		top: 10px;
	}

	.header-menu-navigation-btn
	{
		top: 10px;
		width: 40px;
		height: 40px;
	}
}

.header-menu-navigation-btn-icon,
.header-menu-navigation-btn-icon::before,
.header-menu-navigation-btn-icon::after
{
 	position: absolute;
 	height: 3px;
	right: 0;
 	background: #ffffff;
	width: 55px;
 	transition: transform 250ms,
 				background 250ms,
 				top 250ms,
 				width 250ms;
}

.header-menu-navigation-btn-icon
{
	top: 10px;
}

.header-menu-navigation-btn-icon::before
{
	content: '';
	top: 10px;
}

.header-menu-navigation-btn-icon::after
{
	content: '';
	top: 20px;
}

.header-menu-navigation-btn:hover .header-menu-navigation-btn-icon
{
	transform: scaleX(0.9);
}

.header-menu-navigation-btn.open .header-menu-navigation-btn-icon
{
	right: 7px;
 	height: 0;
 	background: transparent;
}

.header-menu-navigation-btn.open:hover .header-menu-navigation-btn-icon
{
	transform: scale(1.1);
}

@media screen and (max-width:1200px)
{
	.header-menu-navigation-btn.open .header-menu-navigation-btn-icon
	{
		right: 0;
	}
}

.header-menu-navigation-btn.open .header-menu-navigation-btn-icon::before,
.header-menu-navigation-btn.open .header-menu-navigation-btn-icon::after
{
 	top: 8px;
 	width: 40px;
 	background-color: #334963;
 }

.header-menu-navigation-btn.open .header-menu-navigation-btn-icon::before
{
 	transform: rotate(-45deg);
}

.header-menu-navigation-btn.open .header-menu-navigation-btn-icon::after
{
  	transform: rotate(45deg);
}

#content_overlay
{
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	display: block;
	width: 0;
	height: 100vh;
	background-color: #000000;
	opacity: 0;
	transition: opacity 400ms;
}

#content_overlay.active
{
	width: 100vw;
	opacity: 0.8;
	z-index: 800;
}

#menu-builder-header-nav
{
	position: fixed;
	z-index: 900;
	right: -100vw;
	top: 0;
	display: flex;
	width: 90vw;
	max-width: 700px;
	height: 100vh;
	background-color: #ffffff;
	transition: all 400ms;
	overflow: auto;
}

#menu-builder-header-nav.active
{
	right: 0;
}

#menu-builder-header-nav > div:first-of-type
{
	position: absolute;
	top: 130px;
	left: 80px;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: center;
	margin-bottom: 80px;
	padding-bottom: 60px;
}

@media screen and (max-width:360px)
{
	#menu-builder-header-nav > div:first-of-type
	{
		top: 80px;
		left: 60px;
	}
}