nav.main {
	color: #000;
}

nav.main > button {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	border: 0;
	background-color: #eee;
	color: #000;
	font-size: 2.5rem;
}

nav.main ul {
	display: none;
	margin: 0;
	padding: 0;
	xxbackground-color: #293345;
	color: #000;
	list-style: none;	
}

nav.main ul.show {
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: max-content;
}

nav.main ul#menu-0 a {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 1.5rem;
	transition: background-color 150ms ease-in-out;
	color: #000;
	text-decoration: none;
	border-bottom:1px solid #ccc;
}

nav.main ul#menu-0 li > a {
	border-bottom:0;
}


nav.main a:hover {
	background-color: #ccc;
	xxcolor: #293345;
}

nav.main li {
	padding: 0.25rem;
}

nav.main li ul {
	background-color:#fff;	
}

nav.main li.dropdown {
	position: relative;
}

nav.main li.dropdown > a::after {
	content: "▼";
	display: block;
	margin-left: 0.5rem;
	transition: transform 250ms linear;
	font-size: 0.5em;
}

nav.main li.dropdown > a[aria-expanded="true"]::after {
	transform: rotate(-180deg);
}

nav.main li ul li a {
	padding-top:0.5rem !important;
	padding-bottom:0.5rem !important;
}

nav.main li.dropdown ul a {	
	padding-left: 2.25rem;
}

nav.main li.dropdown ul li.dropdown ul a {
	padding-left: 3.375rem;
}

@media screen and (min-width: 1080px) {
	nav.main button {
		display: none;
	}
	
	nav.main ul {
		float:right;
	}

	nav.main > ul,
	nav.main > ul.show {
		display: grid;
		grid-auto-columns: max-content;
		grid-auto-flow: column;
	}

	nav.main .dropdown ul.show {
		position: absolute;
		z-index:10;
	}

	nav.main .dropdown ul ul {
		top: 0;
		left: 100%;
	}
	
	nav.main li ul {	
	box-shadow:5px 5px 5px #ccc;
	}
	
	nav.main li.dropdown ul a,
	nav.main li.dropdown ul li.dropdown ul a	{
		padding-left:0.5em;
		white-space:nowrap;
	}
	
	nav.main > ul > li > a {
		border:0;
	}
}




/* ------------------------------------------- Skip Link ------------------------------------ */
/* Source: https://www.makethingsaccessible.com/guides/creating-a-skip-to-content-link/ */

.skip-link {
  position: absolute;
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: #000;
  color: white;
  text-decoration:none;
}

.skip-link:not(:focus) {
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* ----------------------------------------------Breadcrumbs ----------------------------------------*/
/*https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/*/

nav.breadcrumb {
  padding: 0;
font-size:75%;  
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display:inline;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentcolor;
  height: 0.8em;
  content: "";
}

nav.breadcrumb [aria-current="page"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}