/* header nav */
[role=banner] nav > ul { display:flex; }
[role=banner] nav > ul > li { flex:1 1 auto; border-right:.3rem solid #fff; }
[role=banner] nav > ul > li > a { text-align:center; }
[role=banner] nav ul { padding:0; }
[role=banner] nav li { position:relative; }
[role=banner] nav a {
	padding:.25rem 1.3rem .2rem 1.3rem;
	background-color:hsl(154, 39.9%, 52.4%);
	display:block;
}
[role=banner] nav li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	min-width: 100%;
	white-space:nowrap;
	transition-duration:.4s;
	visibility:hidden;
	opacity:0;
}
[role=banner] nav li:hover > ul ,
[role=banner] nav li:focus-within > ul {
	visibility:visible;
    opacity:1;
}

/* customize */
[role=banner] nav li > ul {
	background-color:rgba(255,255,255,.9);
	color:var(--color-text);
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
}

[role=banner] nav a.cmsInside,
[role=banner] nav a:hover,
[role=banner] nav a:focus-within {
	xbackground-color:hsl(var(--hsl-h), 60%, 60%);
	background-color:hsl(153.8, 39.3%, 76.1%);
	color:#fff;
}


/*
[role=banner] nav li > ul a[aria-current=page],
[role=banner] nav li > ul a:hover,
[role=banner] nav li > ul a:focus-within {
	background-color:var(--color);
	color:#fff;
}
*/


/* footer
[role=contentinfo] {
	background-color:var(--color-dark);
	color:var(--color-bg);
	padding-top:2em;
	padding-bottom:2em;
}
[role=contentinfo] a {
	color:inherit;
}
*/