:root {
    --theme-white: #ffffff;
    --theme-blue: #0DB7E1;
    --theme-blue-dark: #003654;
    --theme-teal: #63C29D;
    --theme-deep-aqua: #1a8176;
    --theme-orange: #ed8923;
    --theme-tan : #f0ddc8;
    --theme-grey : #e9e9e9;
}

#masthead #close-menu svg {
	fill: var(--theme-blue);
}

#masthead #close-menu {
	right: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	line-height: 0;
}

.nav-bg {
	background-color: transparent;
	height: 100%;
	left: 0;
	opacity: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	transition: opacity .2s ease;
	visibility: hidden;
	width: 100%;
	z-index: 10;
}

.nav-bg.active {
	visibility: visible;
}

#content > main#primary {
	padding-top: 6.5rem;
}

.as-header {
	background-color: var(--theme-white);
	width: 100%;
	padding: 1rem 0;
	position: fixed;
	left: 0;
	z-index: 10;

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 2;
		max-width: 1256px;
	}

	nav {
		.menu-container {
			padding-top: 5rem;
			display: block;
		}

		ul {
			margin: 0;
			display: flex;
			list-style-type: none;
			flex-wrap: wrap;
			align-items: center;
			padding: 0;
			flex-wrap: nowrap;


			li {
				line-height: 1;
			}

			li.menu-item-has-children > a {
				position: relative;
			}
		}
	}

	.btn {
		margin: 0;
		padding: 1rem 1.5rem;
		transition: all 200ms;
		border-radius: 1.5rem;

		a {
			padding: 0;
		}
	}

	.as-header__menu {
		.menu-btn {
			margin: 0;
			padding: 1rem 1.5rem;
			transition: all 200ms;
			border-radius: 1.5rem;

			a {
				padding: 0;
			}
		}
		.btn-blue {
			display: none!important;
			background-color: var(--theme-blue);
			color: var(--theme-blue-dark);
			border: 0.125rem solid var(--theme-blue);
			border-radius: 2rem;
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.25rem;
			transition: all 200ms;
		}
		.btn-blue:hover {
			background-color: var(--theme-blue-dark);
			opacity: 1;

			a {
				color: var(--theme-blue);
			}
		}
	}
}

.as-header__logo-img {
	max-width: 12.5rem;
	max-height: 5rem;
	transition: max-height 200ms ease-in;
}

.as-header__logo-img.scrolled {
	max-height: 3.125rem;
}

.as-header__logo-img__text {
	opacity: 1;
	transition: opacity 200ms ease-in;
	@media (max-width: 480px) {
		opacity: 0;
	}
}

.as-header__logo-img__text.scrolled {
	opacity: 0;
}
.as-header__logo-img__small-text {
	@media (max-width: 992px) {
		opacity: 0;
	}
}

.as-header__menu {
	height: 100%;
	display: flex;
	align-items: flex-start;
	flex-direction: column;

	.btn-blue {
		background-color: var(--theme-blue);
		color: var(--theme-blue-dark);
	}

	.as-header__mega-menu {
		background-color: transparent;
		padding: 0;
		top: 64px;

		.menu-title,
		.menu-cta {
			display: none;
		}

		.container {
			color: var(--theme-blue-dark);
			width: fit-content;
			min-width: 100%;
			max-width: 100%;
			padding: 0;
			border-radius: 0 0 0.5rem 0.5rem;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			gap: 1.5rem;


			.as-header__sub-menu {
				margin: 2px 0 4px;
				padding-left: 22px;

				.menu-item a {
					font-weight: 400;
				}
			}

			>.sub-menu.has-sub-menu {
				height: auto;
				max-height: unset;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				flex-grow: 1;
				row-gap: 1.75rem;
			}
		}

		.menu-title {
			color: var(--theme-blue-dark);
			font-size: 2rem;
			width: 100%;
			max-width: 55.5rem;
			padding-bottom: 0.5rem;
			border-bottom: 1px solid var(--theme-grey);
			display: none;
		}
	}

	.as-header__sub-menu {
		grid-template-rows: repeat(4, auto);

		.menu-item {
			width: 245px;

			a {
				color: var(--theme-blue-dark);
				font-size: 1rem;
				font-weight: 700;
				transition: all 200ms;
			}

			a:hover {
				color: var(--theme-blue);
				text-decoration: underline;

			}
		}

		.menu-item-has-children {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;

			ul {
				padding: 0;
			}
		}
	}
}

	#masthead nav ul.as-header__menu li.menu-item a {
		font-weight: 500;
		font-size: 18px;
		padding: 16px 0;
		line-height: 20px;
	}

	#masthead nav ul.as-header__menu li.menu-item ul.sub-menu {
		margin: 2px 0 4px;
		padding-left: 22px;

		a {
			font-weight: 400;
			font-size: 16px;
			line-height: 1.35;
			padding: 6px 0;
		}
	}

	#masthead nav ul.as-header__menu li.menu-level-one.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		width: 100%;
	}

	#masthead #site-navigation .nav-arrow {
		right: 0;
		background-image: none;
		height: 19px;
		width: 19px;
		min-width: 19px;
		border-radius: 50%;
		background-color: var(--theme-blue);
		flex: 0 0 auto;
		order: 2;
	}

	#masthead #site-navigation .nav-arrow::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		border-right: 2px solid var(--theme-white);
		border-bottom: 2px solid var(--theme-white);
		transform: translate(-50%, -65%) rotate(45deg);
	}

	#masthead #site-navigation li.menu-item-has-children.active .nav-arrow {
		--tw-rotate: 180deg;
		transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle {
		height: auto;
		padding-top: 16px;
	}

	@media (max-width: 767px) {
	.search-toggle .search-form {
		position: static;
		left: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	}

	.search-toggle .search-form:before {
		content: none;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle::before {
		content: none;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle > a {
		position: static;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0;
		display: flex!important;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle:focus .search-toggle-label,
	#masthead nav ul.as-header__menu li.menu-item.search-toggle:active .search-toggle-label,
	#masthead nav ul.as-header__menu li.menu-item.search-toggle:hover .search-toggle-label {
		color: var(--theme-blue);
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle:focus a > svg,
	#masthead nav ul.as-header__menu li.menu-item.search-toggle:active a > svg,
	#masthead nav ul.as-header__menu li.menu-item.search-toggle:hover a > svg {
		fill: var( --theme-blue)!important;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle > a .search-toggle-icon {
		display: block;
		margin-right: 8px;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .search-toggle-label {
		font-weight: 500;
		font-size: 18px;
		color: var(--theme-blue-dark);
	}

	.close-search,
	#masthead nav ul.as-header__menu li.menu-item.search-toggle .search-toggle-label--close {
		display: none;
		margin-right: 16px;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle.active .search-toggle-label--open {
		display: none;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle.active .search-toggle-label--close {
		display: block;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle.active .search-toggle-icon {
		display: none;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle.active .close-search {
		display: block;
	}


	#masthead nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form {
		display: none;
		gap: 8px;
		margin-top: 24px;
		flex-direction: column;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle.active .custom-search-form {
		display: flex;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form label {
		font-size: 13px;
		font-weight: 500;
		color: #5b6b74;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .search-field {
		height: 2.75rem;
		padding: 0 3.25rem 0 2.75rem;
		border: 0.0625rem solid var(--theme-grey);
		border-radius: 12px;
		font-size: 14.5px;
		color: var(--theme-blue-dark);
		background-color: var(--theme-white);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8a92' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: 1rem center;
		background-size: 16px 16px;
		width: 100%;
	}

	.search-toggle .search-form input[type="submit"],
	.search-toggle .search-form button,
	.search-toggle .search-form .search-submit {
	flex: 0 0 auto;
	white-space: nowrap;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .search-field:focus {
		outline: none;
		border-color: var(--theme-blue);
		box-shadow: 0 0 0 3px rgba(13, 183, 225, 0.18);
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .search-submit {
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: var(--theme-blue-dark);
		color: transparent;
		font-size: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 17px 17px;
		position: absolute;
        right: 6px;
        bottom: 6px;
	}

.as-header__menu-announcement {
	.as-header__mega-menu {
		top: 155px;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form {
		top: 155px;
	}
}

.as-header.scrolled {

	.as-header__mega-menu {
		top: 5.125rem;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form {
		top: 5.125rem;
	}
}


.as-announcement + .nav-bg + .as-header.scrolled {
	.as-header__mega-menu {
		top: 8rem;
	}

	#masthead nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form {
		top: 8rem;
	}
}

.menu-item {

	a {
		text-decoration: none;
		transition: all 200ms;
	}

	.as-header__mega-menu {
		visibility: hidden;
		opacity: 0;
		height: 0;
	}
}

.menu-item.active {
	a {
		color: var(--theme-blue);
		text-decoration: none;
	}

	.as-header__mega-menu {
		visibility: visible;
		opacity: 1;
		height: 100%;
	}
}

.as-header.scrolled {
	.search-field {
		padding: 1rem;
	}
}
#site-navigation {
	@media (max-width: 1279px) {
		gap: 30px;
    	display: flex;
	}
	.mobile-nav-donate-btn {
		font-family: Commissioner, sans-serif;
		font-weight: 500;
		padding: 1rem 1.5rem;
		font-size: 1rem;
		background-color: var(--theme-blue);
		text-decoration: none;
		margin-left: 20px;
		a {
			color: var(--theme-blue-dark);
		}
		@media (min-width: 1280px) {
			display: none;
		}
	}
	.mobile-nav-donate-btn:hover {
		background-color: var(--theme-blue-dark);
		a {
			color: var(--theme-blue);
		}
	}
}

@media (min-width: 80rem) {
	#masthead nav .menu-container {
		padding: 0;
		flex-direction: row;
		display: flex;
		overflow: visible;

		.primary-button {
			margin-left: 1rem;
		}

		ul.as-header__menu {
			padding-bottom: 0;
			flex-direction: row;
			gap: 1rem;
			width: fit-content;

			.as-header__mega-menu {
				visibility: hidden;
				display: block;
				height: auto;
				width: 100%;
				opacity: 0;
				transition-property: all;
				transition-duration: .3s;
				transition-timing-function: cubic-bezier(.4, 0, .2, 1);
				min-width: 250px;
				transition: opacity 0.2s ease, visibility 0.2s ease;
				top: 56px;
				position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: max-content;
                z-index: 10000;
			}

			.menu-item {
				transition: color 0.2s ease;

				a {
					padding: 4px;
					font-size: 16px;
				}
			}

			li.menu-item ul.sub-menu {
				flex-direction: column;
				max-height: 310px;
				width: max-content;
				column-gap: 3rem;
				padding-left: 0;
				box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
				border: 1px solid #eaeaea;
				border-top: 3px solid var(--theme-blue);
				border-radius: 6px;
				padding: 1.5rem 2rem;
				background: white;

				.menu-item {
					margin-bottom: 0.75rem;
				}

				a {
					font-weight: 500;
					font-size: 16px;
					padding: 6px;
				}

				a:hover {
					background: #f4f9fb;
					border-radius: 6px;
				}

				li.current_page_item {
					>a {
						color: var(--theme-blue);
						text-decoration: underline;
					}

					>a:after {
						content: none;
					}
				}
			}


			li.menu-item.search-toggle {
				width: 8rem;
				padding: 0rem;
				border-left: 1px solid #D0D0D0;

				a {
					flex-direction: row-reverse;
					justify-content: space-between;
					padding-left: 32px;
				}

				.custom-search-form {
					position: fixed;
					left: 0;
					top: 109px;
					width: 100%;
					margin-top: 0;
					padding: 2rem 0 2.5rem;
					background-color: #f6f9fa;
					box-shadow: 0 8px 20px rgba(0, 54, 84, 0.06);
					box-sizing: border-box;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					z-index: 9999;

					label {
						flex-basis: 100%;
						display: block;
						position: static;
						width: auto;
						height: auto;
						margin: 0 0 8px;
						overflow: visible;
						clip: auto;
						clip-path: none;
						text-align: center;
					}
				}

				.search-field {
					flex: 0 1 30rem;
					height: 3.75rem;
					border-radius: 999px;
					border-color: #c7d3d8;
					box-shadow: 0 2px 6px rgba(0, 54, 84, 0.05);
					padding: 0 3.75rem 0 3.25rem;
					background-position: 1.375rem center;
					background-size: 18px 18px;
				}

				.search-field:focus {
					box-shadow: 0 0 0 4px rgba(13, 183, 225, 0.15);
				}

				.search-submit {
					position: static;
					width: 44px;
					height: 44px;
					margin-left: -3.75rem;
					background-size: 18px 18px;
				}

				.search-toggle-label {
					font-weight: 500;
					font-size: 16px;
				}
			}


		}

		.menu-item.active {
			.as-header__mega-menu {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
				height: 100%;
			}
		}

	}

	#masthead.as-header.scrolled {
		 nav ul.as-header__menu li.menu-item.search-toggle .custom-search-form {
			top: 82px;
		}
	}

	#masthead #site-navigation {
		li.menu-item-has-children.sub-menu-active .nav-arrow,
		.nav-arrow {
			--tw-translate-y: 0;
		}
		li.menu-item-has-children {
			position: relative;
			.nav-arrow {
				display:  block;
				background-color: transparent;
				position: relative;
			}

			.nav-arrow::before {
					border-right: 2px solid var(--theme-blue);
					border-bottom: 2px solid var(--theme-blue);
			}
		}
	}

@media (min-width: 96rem) {
	.as-header__logo-img {
		max-width: 12.5rem;
	}

}