/*------------------------------------------------------------------
header.css
Last edited: 7/19/24
[Table of contents]

1. HEADER
2. MAIN MENU
3. TOP MENU
4. SEARCH
5. MOBILE MENU

100. MEDIA QUERIES
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
.site-header {
	background: var(--theme-color-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 1920.9 136.53'%3E%3Cpath d='M963.32 0 0 134.62l1920.9 1.91L963.33 0h-.01z' data-name='Layer 1' style='fill:%23f3f2ee'/%3E%3C/svg%3E");
	background-position: center 101%;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	z-index: 100;
	padding: 10px 0 0;
	border-bottom: 0px;
}

.site-header .logo-wrapper img {
	margin: 0 0 10px;
    width: 230px;
	max-width: 100%;
}

@media screen and (max-width: 768px) {
	.logo-wrapper {
		width: 70%;
		float: left;
	}
}

/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
.site-navigation {

}
.site-navigation ul#main-menu {
	margin: 0;
	display: flex;
	justify-content: center;
}
.site-navigation ul#main-menu li {
    display: inline-block;
	margin: 0 -4.3px 0 0;
    padding: 0;
	font-size: var(--theme-fs-button);
	font-weight: bold;
	font-family: 'Manrope';
}
.site-navigation ul#main-menu li:first-child {
	margin-left: 0;	
}
.site-navigation ul#main-menu li:last-child {
	margin-right: 0;	
}
.site-navigation ul#main-menu li a {
	color: var(--theme-color-blue);
	display: block;
}
.site-navigation ul#main-menu li:hover, 
.site-navigation ul#main-menu li:hover > a, 
.site-navigation ul#main-menu a:hover, 
.site-navigation ul#main-menu a:active, 
.site-navigation ul#main-menu a:focus,
:is(.single-cpt_news, .post-type-archive-cpt_news) .site-navigation ul#main-menu > .press-and-news a:hover {
	color: var(--theme-color-red);
    cursor: pointer;
    position: relative;
	text-decoration: none;
}
.site-navigation ul#main-menu > .current_page_item:hover > a::after,
.site-navigation ul#main-menu > .current_page_item > a:hover::after,
:is(.single-cpt_news, .post-type-archive-cpt_news) .site-navigation ul#main-menu > .press-and-news a:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 17.91 15.49'%3E%3Cpath d='M0 0h17.91L8.96 15.49 0 0Z' data-name='Layer 1' style='fill:%23A23D23;'/%3E%3C/svg%3E");
}
.site-navigation ul#main-menu li a, 
.site-navigation ul#main-menu a:focus {
	padding: 10px 15px 20px;
}
.site-navigation ul#main-menu ul.sub-menu {
    display: none;
	margin: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
}
.site-navigation ul#main-menu li.align-right ul.sub-menu {
	right: 0;
}

.site-navigation ul#main-menu > .current_page_item a, :is(.single-cpt_news, .post-type-archive-cpt_news) .site-navigation ul#main-menu > .press-and-news a  {
	color: var(--theme-color-green);
}

.site-navigation ul#main-menu > .current_page_item > a::after, 
:is(.single-cpt_news, .post-type-archive-cpt_news) .site-navigation ul#main-menu > .press-and-news a::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 2' viewBox='0 0 17.91 15.49'%3E%3Cpath d='M0 0h17.91L8.96 15.49 0 0Z' data-name='Layer 1' style='fill:%23818a35'/%3E%3C/svg%3E");
	width: 0.75em;
	height: 0.75em;
	position: relative;
	top: 4px;
	display: inline-block;
	background-repeat: no-repeat;
}


.site-navigation ul#main-menu > .menu-item-has-children:hover > ul.sub-menu {
	border: solid 1px #e3e3e3;
	border-top: none;
    display: block;
	padding: 0;
	width: 250px;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li {
	background-color: var(--theme-color-light);
    display: block;
    float: none;
	margin: 0;
    padding: 5px 10px;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a {
	padding: 0;
	text-transform: none;	
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a:hover {
}

/*------------------------------------------------------------------
3. TOP MENU
-------------------------------------------------------------------*/
.top-nav-wrapper {
	align-items: center;
	display: flex;
    float: right;
}
ul#top-menu {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}
ul#top-menu li {
    /*border-right: 1px solid var(--theme-color-dark);*/
    padding: 0 10px;
	display: flex;
	align-items: center;
	align-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-family: var(--theme-font-opensans);
	font-weight: bold;
}

ul#top-menu li:not(:last-child) {
	margin-right: 30px;
}

ul#top-menu li a {
    color: var(--theme-color-black);
	text-transform: uppercase;
}

ul#top-menu li[class*=icon] a {
	text-indent: -999em;
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
	font-weight: bold;
}


ul#top-menu li[class*=icon]::before {
	left: 1rem;
	position: relative;
	color: var(--theme-color-black);
	top: -0.1em;
	font-size: 0.8em;
}

ul#top-menu li[class*=icon]:hover::before, ul#top-menu li a:hover {
	text-decoration: none;
	color: var(--theme-color-red);
}
.top-nav-wrapper .menu li {
    display: inline-block;
    font-weight: 400;
	letter-spacing: normal;
	margin: 0;
    padding: 0 20px 0 0;
}
.top-nav-wrapper .menu li:last-child {
	padding-right: 0;	
}
.top-nav-wrapper .menu li a {
    font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
}
/*------------------------------------------------------------------
4. SEARCH
-------------------------------------------------------------------*/
.top-nav-wrapper form.searchform {
	display: flex;
	float: right;
	margin-left: 10px;
	position: relative;
}
.top-nav-wrapper form.searchform label {
	left: -36px;
	position: relative;
}
.search-toggle { 
	display: none;
}
.top-nav-wrapper form.searchform .search-toggle {
	background: none;
	border: none;
    cursor: pointer;
	display: block;
	margin-left: 6px;
    padding: 6px;
    text-decoration: none;
}
.top-nav-wrapper form.searchform .search-toggle [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle [class*=" icon-"] {
	color: var(--theme-color-blue);
	font-size: 18px;
	padding: 0;
}
.top-nav-wrapper form.searchform .search-toggle:hover [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle:hover [class*=" icon-"]
.top-nav-wrapper form.searchform .search-toggle.active [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle.active [class*=" icon-"] {
	color: var(--theme-color-green);
}
.top-nav-wrapper form.searchform input[type="text"] {
	border: solid 1px #e3e3e3;
	opacity: 0;
	font-size: 16px;
	font-weight: 400;
	left: 0;
	margin-left: 15px;
	padding: 4px;
	position: absolute;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	width: 0px;
	z-index: -1;
}
.top-nav-wrapper form.searchform input[type="text"].show-search {
	display: block;
	left: -352px;
	opacity: 1;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	width: 340px;
	z-index: 2;
}
.top-nav-wrapper form.searchform input[type="submit"] {
	display: none;	
}
/*------------------------------------------------------------------
5. MOBILE MENU
-------------------------------------------------------------------*/
/* Mobile Menu Search Form */
span.search-icon {
	background: none;
	border-radius: initial;
	cursor: pointer;
	float: right;
	font-size: 24px;
	margin: 9px 2px 0 0;
	padding: 10px;
	position: relative;
	z-index: 20;
}
span.search-icon:hover {
	background: none;
}
.mobile-search-wrapper{
	display: none;
	height: 0;
	text-align: center;
}
.mobile-search-wrapper.active {
    display: inline-block;
    height: 40px;
    margin: 0 0 25px;
	width: 100%;
}
.mobile-search-wrapper .searchform {
	margin: 12px 0 0;	
}
.mobile-search-wrapper .searchform input[type=text] {
	background-image: none;
	font-size: 16px;
	margin-right: 5px;
	padding: 8px;
	width: 65%;
}
.mobile-search-wrapper .searchform ::-webkit-input-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform :-moz-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform ::-moz-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform :-ms-input-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform input[type="submit"] {
    background: var(--theme-color-blue);
	border: none;
    color: var(--theme-color-light);
	font-size: 16px;
	height: 39px;
    letter-spacing: 0.1em;
    padding: 8px 15px;
    text-transform: uppercase;	
}

/* Hamburger */
.header-mobile-menu-button {
	float: right;
}
button.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    height: 44px;
    margin-top: 20px;
    outline: none;
    overflow: hidden;
    position: relative;
    text-indent: -900em;
    width: 50px;
}
button.menu-button::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 5px;
    background: var(--theme-color-blue);
    top: 9px;
    left: 16%;
    box-shadow: 0 9px 0 var(--theme-color-blue), 0 18px 0 var(--theme-color-blue);
}
button.menu-button.active::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
button.menu-button.active::before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
button.menu-button.active::before, button.menu-button.active::after {
    box-shadow: none;
    position: absolute;
    display: block;
    height: 4px;
    background-color: var(--theme-color-blue);
    content: "";
    left: 5px;
    top: 18px;
    width: 65%;
}

/* Flexnav Base Styles */
.flexnav {
	border-top: 1px solid #dadada;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	list-style-type: none;
	overflow: hidden;
	margin: 0 auto;
	max-height: 0;
	width: 100%;
}
.flexnav.opacity {
	opacity: 0; 
}
.flexnav.flexnav-show {
	max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.flexnav li {
	border-bottom: 1px solid #dadada;
	overflow: hidden;
    position: relative;
}
.flexnav li a {
	background: var(--theme-color-light);
	color: var(--theme-color-slate);
	display: block;
	font-size: 18px;
	overflow: hidden;
	padding: .45em .75em;
    position: relative;
	text-decoration: none;
	text-transform: none;
    z-index: 2;
}
.flexnav li ul {
	list-style-type: none;
	margin: 0;
    width: 100%; 
}
.flexnav li ul li {
	border-bottom: none;
	font-size: 100%;
	overflow: hidden; 
	position: relative;
}
.flexnav li ul.flexnav-show li {
	overflow: visible; 
}
.flexnav li ul li a {
    display: block;
	padding: 0.25em 2em 0.25em 0.75em;
}
.flexnav ul li ul li a {
	background: #e3e3e3;
	color: #021e2f;
}
.flexnav ul li ul li ul li a {
    background: #e3e3e3; 
}
.flexnav .touch-button {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
	position: absolute;
    right: 15px;
	text-align: center;
	top: 0;
    width: 49px;
	z-index: 999;
}
.flexnav li ul li .touch-button {
	height: 32px;
}
.flexnav .touch-button:hover {
	cursor: pointer; 
}
.flexnav .touch-button .navicon {
	background: none;
	color: var(--theme-color-slate);
	font-size: 16px;
	margin: 0;
	position: relative; 
}
.flexnav .touch-button.active .navicon {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

/* add mobile CSS here */

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
	.site-header {
		padding: 20px 0 0;
	}
	.site-header-wrapper {
		display: block;
	}
	.site-header .logo-wrapper img {
		width: 350px;
	}
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
	.site-header .logo-wrapper img {
		width: 380px;
	}
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
   
}