/*------------------------------------------------------------------
header.css
Last edited: 9/13/22
[Table of contents]

1. HEADER
2. MAIN MENU
3. TOP MENU
4. SOCIAL MENU
5. SEARCH
6. 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, 1400px and up)

[Notes]

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
.site-header {
	background:#ffffff;
	border-bottom: solid 1px #CCE0EB;
	padding: 10px 0;
	position: relative;
	z-index: 100;
}
.site-header .site-header-wrapper {
	width: 100%;
}
.site-header .logo-wrapper img {
	float: left;
	margin: 0;
    width: 190px;
}

/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
.site-navigation {
    float: right;
	padding: 0;
}
.site-navigation ul#main-menu {
	margin: 0;
	position: relative;
}
.site-navigation ul#main-menu li {
    display: inline-block;
	margin: 0 -4.3px 0 0;
    padding: 0;
}
.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: #707070;
	display: block;
	font-size: 20px;
	font-weight: 700;
	padding: 15px;
}
.site-navigation ul#main-menu li.btn:hover > a, 
.site-navigation ul#main-menu li.btn:hover a:active, 
.site-navigation ul#main-menu li.btn:hover a:focus {
	background-color: #C52227;
    cursor: pointer;
    position: relative;
	text-decoration: none;
}
.site-navigation ul#main-menu li.btn {
	background-color: transparent;
	padding: 0 10px 0 15px;
}
.site-navigation ul#main-menu li.btn a {
	background-color: #00669A;
	color: #fff;
	letter-spacing: 0;
	padding: 10px 25px;
	text-transform: none;
}
.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 > .menu-item-has-children:hover > ul.sub-menu {
	border: solid 1px #e3e3e3;
	border-top: none;
    display: block;
	padding: 0;
	width: 225px;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li {
	background-color: #ffffff;
    display: block;
    float: none;
	margin: 0;
    padding: 6px 18px;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a {
	font-weight: 400;
	padding: 0;
	text-transform: none;	
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a:hover {
	color: #333333;
}

/*------------------------------------------------------------------
3. TOP MENU
-------------------------------------------------------------------*/
.top-nav-wrapper {
    float: right;
}
ul#top-menu {
	float: right;
	margin: 0;
	padding: 0 0 5px;
}
ul#top-menu li {
    /*border-right: 1px solid #000000;*/
    padding: 0 10px;
}
ul#top-menu li:last-child {
	border-right: none;
	padding: 0 0 0 10px;
}
ul#top-menu li a {
    color: #000000;
}
.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. SOCIAL MENU
-------------------------------------------------------------------*/
ul#header-social-menu {
    display: flex;
	float: right;	
}
ul#header-social-menu li {
    list-style: none;
	margin: 0;
	padding: 0 5px 0 0;	
}
ul#header-social-menu li [class^="icon-"] {
    background: #8bb929;
    border-radius: 50%;
	color: #ffffff;
    font-size: 12px;
    padding: 8px;
}
ul#header-social-menu li [class^="icon-"]:hover {
    background: #61811d;
}

/*------------------------------------------------------------------
5. SEARCH
-------------------------------------------------------------------*/
.site-header form.searchform {
	float: right;
	margin: 12px 0 0 10px;
	position: relative;
}
.site-header 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;
}
.site-header 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;
}
.site-header form.searchform input[type="submit"] {
	display: none;	
}
.search-toggle { 
	display: none;
}
.site-header form.searchform .search-toggle {
    cursor: pointer;
	display: block;
    padding-top: 0;
    text-decoration: none;
}
.site-header form.searchform .search-toggle [class^="icon-"], 
.site-header form.searchform .search-toggle [class*=" icon-"] {
	color: #707070;
	font-size: 22px;
	margin-left: 6px;
	padding: 6px;
}
.site-header form.searchform .search-toggle:hover [class^="icon-"], 
.site-header form.searchform .search-toggle:hover [class*=" icon-"]
.site-header form.searchform .search-toggle.active [class^="icon-"], 
.site-header form.searchform .search-toggle.active [class*=" icon-"] {
	color: #C52227;
}

/*------------------------------------------------------------------
6. MOBILE MENU
-------------------------------------------------------------------*/
/* Mobile Menu Search Form */
span.search-icon {
	background: none;
	border-radius: initial;
	color: #707070;
	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;
	color: #C52227;
}
.site-header .mobile-search-wrapper{
	display: none;
	height: 0;
	text-align: center;
}
.site-header .mobile-search-wrapper.active {
    display: inline-block;
    height: 40px;
    margin: 0 0 25px;
	width: 100%;
}
.site-header .mobile-search-wrapper .searchform {
	float: none;
	margin: 12px 0 0;	
}
.site-header .mobile-search-wrapper .searchform input[type=text] {
	background-image: none;
	font-size: 16px;
	margin-right: 5px;
	opacity: 1;
	padding: 8px;
	position: relative;
	width: 65%;
	z-index: 1;
}
.site-header .mobile-search-wrapper .searchform ::-webkit-input-placeholder {
	color: transparent;
}
.site-header .mobile-search-wrapper .searchform :-moz-placeholder {
	color: transparent;
}
.site-header .mobile-search-wrapper .searchform ::-moz-placeholder {
	color: transparent;
}
.site-header .mobile-search-wrapper .searchform :-ms-input-placeholder {
	color: transparent;
}
.site-header .mobile-search-wrapper .searchform input[type="submit"] {
    background: #00669A;
	border: none;
    color: #ffffff;
	display: inline-block;
	font-size: 16px;
	height: 39px;
    letter-spacing: 0.1em;
    padding: 8px 15px;
    text-transform: uppercase;	
}

.site-header .mobile-search-wrapper .search-toggle .icon-02{
	display: none;
}

/* Hamburger */
.header-mobile-menu-button {
	float: right;
}
button.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    height: 44px;
    margin-top: 10px;
    outline: none;
    overflow: hidden;
    position: relative;
    text-indent: -900em;
    width: 50px;
}
button.menu-button::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 5px;
    background: #707070;
    top: 9px;
    left: 16%;
    box-shadow: 0 9px 0 #707070, 0 18px 0 #707070;
}
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: #707070;
    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: #ffffff;
	color: #333333;
	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: #333333;
	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: 8px 0 0;

}*/
.site-header .logo-wrapper img {
	height: auto;
	margin: 0;
}
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
.site-header .container-fluid {
	padding: 0 30px;

}
/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/

.site-navigation ul#main-menu li a {
	padding: 15px 20px;
}
}

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