/* 
navigation */

#primary-mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #007acc;
	padding: 0;
}
.admin-bar #primary-mobile-menu {
	top: var(--global--admin-bar--height);
}
@media ( min-width: 768px ) {
	#primary-mobile-menu {
		display: none;
	}
}
#primary-mobile-menu .dropdown-icon {
	display: flex;
	align-items: center;
}
#primary-mobile-menu .dropdown-icon.close {
	display: none;
}
#primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
	display: none;
}
#primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
	display: flex;
	animation-name: twentytwentyone-close-button-transition;
	animation-duration: 0.3s;
}
button#primary-mobile-menu:focus {
	opacity: 0.5;
	outline: none;
}

/* primary-navigation --------------- */

.primary-navigation li {
	list-style: none;
	margin: 0;
}
.primary-navigation li {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.8em;
}
.primary-navigation > div > .menu-wrapper li,
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
	position: relative;
}
.primary-navigation a {
	display: block;
	color: #fff;
	text-decoration: none;
}
.primary-navigation a:link,
.primary-navigation a:visited {
	color: #fff;
}
.primary-navigation a:hover {
	color: #cceeff;
}
.primary-navigation a:focus {
	position: relative;
	z-index: 99999;
	outline-offset: 0;
	text-decoration-thickness: 2px;
}
@media ( max-width: 767px ) {
	.primary-navigation {
		width: 250px;
		height: 100%;
		background-color: #007acc;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 200;
		transform: translate(250px);
		transition: all .5s;
		overflow-y: scroll;
		padding: 10px;
	}
	.primary-navigation-open .primary-navigation {
		transform: translateZ(0);
	}
	.admin-bar .primary-navigation > .primary-menu-container {
		top: 30px;
	}
	.primary-navigation .menu-wrapper {
		padding: 80px 0 20px 8px;
	}
	.menu-wrapper li {
		color: #fff;
		border-color: rgba(0,0,0,0.2);
		border-style: solid;
		border-width: 0 0 1px 0;
	}
	.menu-wrapper li.menu-item-has-children {
		border-width: 0;
	}
	.primary-navigation .sub-menu {
		margin-bottom: 0;
	}
	.primary-navigation a {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.primary-navigation .sub-menu a {
		padding-left: 8x;
	}
}
@media (min-width: 768px) {
	.primary-navigation li {
		font-size: 14px;
		font-weight: 400;
	}
	.primary-navigation {
		width: 100%;
		position: relative;
		background: #000066; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient(rgb(0, 0, 102), rgb(0, 0, 0)); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(rgb(0, 0, 102), rgb(0, 0, 0)); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(rgb(0, 0, 102), rgb(0, 0, 0)); /* For Firefox 3.6 to 15 */
		background: linear-gradient(rgb(0, 0, 102), rgb(0, 0, 0)); /* Standard syntax */
	}
	.primary-navigation > .primary-menu-container {
		padding: 0;
		background-color: transparent;
		overflow: initial;
		transform: none;
	}
	.primary-navigation > div > .menu-wrapper {
		display: flex;
		flex-direction: row;
		margin: 0;
		justify-content: space-between;
		flex-wrap: nowrap;
		padding-left: 0;
		font-size: 14px;
	}
	.primary-navigation > div > .menu-wrapper > li {
		display: inline-block;
		position: relative;
		width: 14.285%;
		border-left: 1px solid #909090;
		height: 45px;
	}
	.primary-navigation > div > .menu-wrapper > li:first-child {
		border-left: none;
	}
	.primary-navigation > div > .menu-wrapper > li > a {
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.primary-navigation .menu-wrapper > li > .sub-menu {
		position: absolute;
		top: 0;
		right: 9999rem;
		margin: 0;
		width: 100%;
		height: auto;
		z-index: 88888;
		padding: 0;
		background-color: #000033;
		transform: translateY(0);
		transition: opacity 0.15s linear, transform 0.15s linear;
		padding-bottom: 5px;
	}
	.primary-navigation > div > .menu-wrapper li li {
		padding: 0;
		text-align: left;
	}
	.primary-navigation .menu-wrapper > li > .sub-menu a {
		padding: 10px 16px;
		text-align: left;
	}
	.primary-navigation li.menu-item-has-children:hover > ul,
	.primary-navigation li.menu-item-has-children:focus > ul {
		left: 0;
		top: -1px;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.15s linear, transform 0.15s linear;
	}
	.primary-navigation .menu-wrapper > li > .sub-menu li {
		display: block;
		width: 100%;
	}
}

.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child {
	text-decoration: underline;
	text-decoration-style: solid;
}
.primary-navigation .current-menu-item > a:first-child:hover,
.primary-navigation .current_page_item > a:first-child:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
}

/* Category 07 is for any utility classes that are not assigned to a specific component. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}
.skip-link:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}
