#skip-link
{
	position: absolute;
	left: 0;
	top: 0;
	padding: 0.25em;
	background: black;
	color: white;
	text-decoration: inherit;
	transform: translateY(-100%);
}

#skip-link:focus
{
	transform: translateY(0);
}

[aria-controls="main-nav-list"]
{
	display: none;
	font: inherit;
/*	vertical-align: middle;	*/
}

[aria-controls="main-nav-list"]:focus,
[aria-controls="main-nav-list"]:hover
{
}

[aria-controls="main-nav-list"]::before
{
	display: inline-block;
	width: 2.5em;
	font-size: 1em;
	font-weight: bold;
	line-height: 0;
	text-align: center;
}

[aria-controls="main-nav-list"][aria-expanded="true"]::before
{
	content: "\1F5D9";   /* cancellation x */
												font-size: 120%;
}

[aria-controls="main-nav-list"][aria-expanded="false"]::before
{
	content: "\2261";	/* identical to,   ☰	*/  
												font-size: 120%;
												font-weight: bold;
}


#main-nav ul
{
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	list-style: none;
}

#main-nav li:not(:first-child)
{
}

#main-nav a
{
	display: inline-block;
	color: inherit;
	text-decoration: inherit;
}

#main-nav a:focus,
#main-nav a:hover
{
}

/* ******************************************************* */

@media (max-width: 80rem)
{
	[aria-controls="main-nav-list"]
	{
		display: inline;
	}
	
	#main-nav
	{
		flex-flow: column nowrap;
	}
	
	#main-nav ul
	{
		flex-flow: column nowrap;
	}
	
	#main-nav li:not(:first-child)
	{
		margin-left: 0;
	}

	#main-nav [aria-controls="main-nav-list"][aria-expanded="false"] + ul
	{
		visibility: hidden;
		/* or alternatively: border: none; */
		margin: 0;
	}
	
	#main-nav [aria-controls="main-nav-list"][aria-expanded="false"] + ul li
	{
		display: none;
	}

}