@keyframes slide-in-from-right
{
	0%, 32%
	{
		opacity: 0;
		transform: translateX(30px);
	}

	100%
	{
		opacity: 1; 
		transform: translateX(0);
	}
}

#menu-builder-header-nav #header-menu-navigation
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 80px;
}

/* Top-level Menu Item */
#header-menu-navigation > li > a,
#header-menu-navigation > li > a:link,
#header-menu-navigation > li > a:active,
#header-menu-navigation > li > a:visited
{
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	line-height: 60px;
	font-family: dm_serif_display;
	font-size: 18pt;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	transition: all 150ms;
}

#menu-builder-header-nav.active #header-menu-navigation > li
{
	animation: 1000ms cubic-bezier(0,.82,.67,.88) slide-in-from-right;
}

#header-menu-navigation > li > a span
{
	position: relative;
	z-index: 2;
}

#header-menu-navigation > li > a:link::before
{
	content: '';
	position: absolute;
	left: -55px;
	top: 0;
	z-index: 1;
	display: block;
	width: 180px;
	height: 60px;
	opacity: 0;
	transform: scale(0);
	background: url('/menu-builder/renderers/header/images/ink-mouse-over.png') center center no-repeat;
	transition: all 150ms;
}

#header-menu-navigation > li > a:hover::before
{
	opacity: 1;
	transform: scale(1);
}

#header-menu-navigation > li > a:hover span
{
	color: #ae8830;
}

#header-menu-navigation > li > a:hover::before
{
	opacity: 1;
}

#header-menu-navigation > li > a.highlighted
{
	
}

.tap-highlight
{
	background-color: #E2E2E2;
}

/* Sub Menu Item Container */
#header-menu-navigation ul
{
	background: #F6F6F6;
}

#header-menu-navigation ul a.highlighted
{
	background: #DDDDDD;
    color: #292929;
}

/* Sub Menu Item */
#header-menu-navigation ul a,
#header-menu-navigation ul a:link
{
	display: flex;
	align-items: center;
}

/* Sub Menu Item +/- Button */
#header-menu-navigation a .sub-arrow
{
	position: absolute;
	top: 50%;
	margin-top: -18px;
	left: auto;
	right: 4px;
	width: 35px;
	height: 35px;
	overflow: hidden;
	font: bold 17px/35px monospace;
	text-align: center;
	text-shadow: none;
	background: #434343;
	color: #ffffff;
	border-radius: 5px;
}

#header-menu-navigation ul a .sub-arrow
{
	background: transparent;
	color: #ffffff;
}

#header-menu-navigation a .sub-arrow::before
{
	content: '+';
}

#header-menu-navigation a.highlighted .sub-arrow::before
{
	content: '-';
}

#header-menu-navigation-state:checked #header-menu-navigation li
{
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#header-menu-navigation > li:first-child
{
	border-top: 0;
}

#header-menu-navigation ul a .sub-arrow
{
    background: #636363;
}

/* Sub Item Indentation */
#header-menu-navigation ul ul a,
#header-menu-navigation ul ul a:hover,
#header-menu-navigation ul ul a:focus,
#header-menu-navigation ul ul a:active
{
	border-left: 20px solid transparent;
}

#header-menu-navigation ul ul ul a,
#header-menu-navigation ul ul ul a:hover,
#header-menu-navigation ul ul ul a:focus,
#header-menu-navigation ul ul ul a:active
{
	border-left: 30px solid transparent;
}

#header-menu-navigation ul ul ul ul a,
#header-menu-navigation ul ul ul ul a:hover,
#header-menu-navigation ul ul ul ul a:focus,
#header-menu-navigation ul ul ul ul a:active
{
	border-left: 40px solid transparent;
}

#header-menu-navigation ul ul ul ul ul a,
#header-menu-navigation ul ul ul ul ul a:hover,
#header-menu-navigation ul ul ul ul ul a:focus,
#header-menu-navigation ul ul ul ul ul a:active
{
	border-left: 50px solid transparent;
}