:root {
	--fa-primary-color: rgb(34 118 142);
	--fa-secondary-color: rgb(252 180 21);
	--fa-mobile-color: rgb(255 255 255);
}

/* Desktop Only ----------- */
@media screen and (min-width : 841px) {
	
	.fa-icon {
		color: var(--fa-primary-color) !important;
	}

	/* Navigation
	---------------------------------------- */
	.inner[role="navigation"] {
		position: relative;
	}

	.mainnav {
		max-width: 970px;
	}

	.mainnav>ul {
		font-family: 'Public Sans', Helvetica, Arial, sans-serif;
		position: relative;
		display: flex;
		margin: 0;
		padding: 0;
		width: 100%;
		text-align: center;
		font-size: .9em;
		background-color: transparent;
		list-style: none;
	}

	.mainnav>ul>li {
		flex: 1 0 auto;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		text-align: center;
		position: relative;
	}

	.mainnav ul>li>a {
		text-decoration: none;
		color: var(--teal);
		background-color: var(--white);
		font-weight: 700;
		width: calc(100% - 2px);
		display: block;
		position: relative;
		padding: 7px 0 5px 0;
		z-index: 2;
		border: 1px solid transparent;
	}

	.mainnav ul>li>a:focus {
		outline: 2px solid var(--orange);
		border-radius: 8px !important;
	}

	.mainnav li.menu-item-has-children>a:after {
		color: var(--orange);
		background-color: var(--white);
		content: ' ▼';
		font-size: 10px;
		vertical-align: 1px;
	}

	.mainnav>ul>li:hover>a {
		color: var(--orange);
		background-color: var(--white);
		text-decoration: underline;
		border: 1px solid var(--dust);
		border-radius: 8px 8px 8px 8px;
	}

	.mainnav>ul>li.menu-item-has-children:hover>a {
		color: var(--orange);
		background-color: var(--white);
		text-decoration: underline;
		border: 1px solid var(--dust);
		border-bottom: 1px solid var(--white);
		border-radius: 8px 8px 0 0;
	}

	/* Submenu styles */
	.mainnav>ul>li>ul {
		left: 0px;
		top: calc(100% - 1px);
		position: absolute;
		display: none;
		background: var(--white);
		list-style: none;
		margin: 0 0 0 0;
		padding: 5px 5px 5px 15px;
		width: 235px;
		font-size: .8rem;
		font-weight: 500;
		text-align: left;
		border: 1px solid var(--dust);
		border-radius: 0 0 8px 8px;
		z-index: 1;
	}

	.mainnav>ul>li>ul>li {
		display: block;
		margin: 0 0 7px 0px;
	}

	.mainnav>ul>li>ul>li>a:hover {
		color: var(--orange);
		background-color: var(--white);
		text-decoration: underline;
	}

	/*
    .mainnav > ul li:hover ul {
		display: block;
	}
	*/

	.mainnav li li.menu-item-has-children>a:after {
		color: #222;
		content: ' ►';
		font-size: 10px;
		vertical-align: 1px;
	}

}

@media screen and (max-width: 840px) {
	
	.fa-icon {
		color: var(--fa-mobile-color) !important;
	}
	
	body.menu-on {
		overflow: hidden;
	}

	/*hamburger */
	.btn-menu {
		top: 25px;
		right: 20px;
	}

	.nav-drill {
		display: none;
		transform: translateX(100%);
	}

	.menu-open .nav-drill {
		transform: translateX(0);
	}

	.nav-drill {
		display: flex;
		position: fixed;
		z-index: 10000;
		margin-top: 8px;
		right: 0;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		transition: 0.45s;
	}

	.nav-items {
		flex: 0 0 100%;
		margin: 0 0 0 0;
		padding: 2px 0 2px 0;
		list-style: none;
	}

	.nav-item:not(:last-child) {
		border-bottom: solid 1px #daf9f4;
	}

	.menu-item a {
		display: block;
		padding: 0.875em 1em;
		color: var(--white);
		text-decoration: none;
	}

	.nav-expand-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translateX(100%);
		background-color: #daf9f4;
		transition: 0.3s;
		visibility: hidden;
	}

	.nav-expand-content .nav-item:not(:last-child) {
		border-bottom: solid 1px var(--dust);
	}

	.nav-expand-content .nav-link {
		background-color: #daf9f4;
	}

	.nav-expand-content .nav-back-link {
		display: flex;
		align-items: center;
		background-color: var(--teal) !important;
		color: var(--white);
	}

	.menu-item a:focus,
	.nav-back-link:focus {
		outline: none;
	}

	.nav-expand-content .nav-back-link::before {
		content: "⏴";
		margin-right: 0.5em;
	}

	.nav-expand-link {
		display: flex;
		justify-content: space-between;
	}

	.menu-item-has-children>a::after {
		content: "⏵";
		flex: 0 1 auto;
	}

	.menu-item-has-children.active>.nav-expand-content {
		transform: translateX(0);
		visibility: visible;
	}

	.menu-item-has-children .nav-expand-content {
		background-color: var(--teal);
	}

	.menu-item-has-children .nav-expand-content .nav-link {
		background-color: #daf9f4;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content {
		background-color: #aff1e6;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content .nav-link {
		background-color: #aff1e6;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content .nav-expand-content {
		background-color: #84e9d9;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content .nav-expand-content .nav-link {
		background-color: #84e9d9;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content {
		background-color: #59e1cb;
	}

	.menu-item-has-children .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content .nav-link {
		background-color: #59e1cb;
	}

}