body {
	font-family: 'Montserrat', sans-serif !important;
}
.wrapper.hasnobanner {
	padding-top: 80px;
}
.topbar {
	display: none;
}
#header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	padding: 35px 0;
	transition: all 200ms linear;
	z-index: 9;
}
#header .header_logo {
	transition: all 200ms linear;
}
.header {
	position: relative;
	max-width: 1280px !important;
}
.header .fa,
.header .fal {
	color: #fff;
	font-size: 30px;
	line-height: 1;
}
#header .header_icons a {
	color: #fff;
	font-size: 30px;
	margin: 0 13px;
}
.header_icons .fa-times {
	width: 17px;
}
.header_icons .fal {
	width: 25px;
}
.header .btn-link {
	font-weight: 500;
	font-size: 17px;
	text-decoration: none;
}
.header .right-col {
	position: relative;
	padding-right: 65px;
}
.header .btn-join {
	position: relative;
	text-decoration: none;
	background-color: #fff;
	color: #000000;
	font-size: 22px;
	border-radius: 0;
	border: 0;
	padding: 10px 30px;
	transition: all .3s;
	margin-right: 10px;
	border: solid 1px transparent;
}
.header .btn-join:hover {
	background-color: #008027 !important;
	color: #fff !important;
}
.header .btn-login {
	background-color: #008027;
	color: #fff;
	font-size: 22px;
	border-radius: 0;
	border: 0;
	padding: 10px 35px;
	transition: all .3s;
	text-decoration: none;
	border: solid 1px transparent;
}
.header .btn-login:hover {
	background-color: #fff;
	color: #008027;
}
.menu-btn {
	position: absolute;
	right: 15px;
	top: calc(50% + 3px);
	cursor: pointer;
	z-index: 10;
	transform: translateY(-50%);
}
.nav-row {
	background: #05A53A;
	display: none;
	margin-bottom: -20px !important;
	margin-top: 60px !important;
	box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 25%);
	position: relative;
}
.nav-row .container {
	max-width: 1100px;
}
.nav-row ul {
	list-style: none;
}
.nav-row ul li.nav-item {
	display: inline;
	width: 100%;
	margin: -11px 2px 0 2px;
	
}
.nav-row ul li.nav-item::before {
	content: '';
	background-color: #fff;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 1;
}
.nav-row ul li a.nav_header {
	/* background-color: #05A53A; */
 
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    transition: all .3s;
	padding-top: 8px;
    height: 54px;
    align-items: center;
    justify-content: center;
	text-decoration: none;

}
.nav-row ul li a.nav_open {
    color: #000;
    font-weight: bold;
    background-color: #fff;
    border-radius: 5px 5px 0 0;
    padding-top: 8px;
       height: 54px;
    
}
.nav-row ul li a:hover {
	background-color: #fff;
	text-decoration: none;
	color: #000;
	border-radius: 5px 5px 0 0;
}
.submenu {
	display: none;
	position: absolute;
	left: 0;
	width: 100%;
	background: #fff;
	text-align: center;
	padding: 0;
	box-shadow: 0px 15px 10px -15px rgb(0 0 0 / 25%);
	opacity: 0;
	/* transition:all 100ms linear; */
	/* transition-delay: 200ms; */
}
.submenu.open {
	opacity: 1;
}
.submenu a {
	color: #000;
	text-transform: capitalize;
	background-color: #fff;
	padding: 10px 13px;
	text-align: center;
	display: flex;
	transition: all .3s;
	/* min-height: 100px; */
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-bottom: 2px solid #ccc;
	margin: 22px 30px;
	font-weight: 600;
}
.submenu a:hover {
	transform: scale(1.06);
}
.submenu li {
	display: inline-block;
	vertical-align: top;
	z-index: 2;
	position: relative;
}
.submenu .container {
	max-width: 1211px;
}
#header.fixed {
	padding: 10px 0;
	backdrop-filter: blur(7px);
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}
/* #header.fixed .header_logo {
	filter: invert(1);
} */
#header.fixed i,
#header.fixed .header .btn-link {
	color: #008027 !important;
}
#header.fixed .logo-white {
	display: none;
}
#header.fixed .header .btn-join {
	border: solid 1px #008027;
}
.home-page-wrapper #header.fixed .logo-white {
	display: none;
}
.home-page-wrapper #header .logo-black {
	display: none;
}
.home-page-wrapper #header.fixed .logo-black {
	display: block !important;
}
.join-box {
	position: absolute;
	width: 470px;
	top: 85px;
	right: 0;
	display: none;
	background-color: #fff;
	text-align: left;
	box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}
.join-box::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #fff;
	right: 75px;
	transform: rotate(45deg);
	top: -10px;
}
div.ob-login div.login-box {
	padding: 30px;
}
.login-header {
	display: none;
}
.join-box div.form-field {
	float: none;
	margin: 0;
}
.join-box div.form-field input {
	max-width: 100%;
	margin-bottom: 25px;
	border-radius: 3px;
	border: 1px solid #CCCCCC;
	height: 45px;
}
#BankingLoginSubmit {
	background-color: #008027;
	color: #fff;
	padding: 10px 30px;
	font-size: 23px;
	margin-top: 30px;
	float: right;
}
#BankingLoginSubmit i.fa {
	vertical-align: bottom;
	font-size: 30px;
}
.hblinks {
	padding: 0;
	float: left;
	margin-top: 25px;
}
.hblinks a {
	font-size: 16px;
	text-transform: uppercase;
	color: #2D2D2D;
	text-decoration: underline;
	text-align: left;
	line-height: 30px;
}
.bottom-menu {
    margin: auto;
    width: 100%;
    clear: both;
    background: rgb(238,249,242);
background: linear-gradient(0deg, rgba(238,249,242,1) 63%, rgba(216,225,219,1) 100%);
    height: auto;
    text-align: center;
    position: absolute;
    left: 0;
    padding: 10px;
    top: 143px !important;
    display: none;
     
 
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%) 0px 4px 6px -2px;
}
/* .bottom-menu {
    margin: auto;
    width: 100%;
    clear: both;
    background-color: #f2fbf5;
    height: auto;
    text-align: center;
    position: absolute;
    left: 0;
    padding: 10px;
    top: 143px !important;
    display: none;
    box-shadow: 1px -1px 9px 1px rgb(0 0 0 / 9%);
    z-index: 5;
} */
.bottom-menu a.small-menu {
	font-size: 16px;
	display: inline-block;
	margin: 0 15px;
	text-decoration: none;
	color: #008027;
	margin: 0px 60px;
	font-weight: 600;

}
.bottom-menu a.small-menu:hover {
	text-decoration: underline;
	
}
@media screen and (max-width:1450px) {
	.submenu a {
		padding: 10px 4px;
		margin: 22px 20px;
	}
}
@media screen and (max-width:1240px) {
	.header .btn-join,
	.header .btn-login {
		padding: 7px 20px;
	}
	.submenu a {
		padding: 10px 1px;
		font-size: 14px;
	}
}

@media screen and (max-width:1260px) {
	.bottom-menu-links {display: flex; justify-content: space-around;}
	.bottom-menu a.small-menu {	 
		margin: 0px 12px;		 
	  }

}








@media screen and (max-width:1015px) {
	.submenu a {
		margin: 5px 9px;
		padding: 7px 9px;
	}
	.submenu {
	 
		padding: 20px 0;
	 
	}
	.bottom-menu {
		
		top: 142px !important;
	 
	}
	.bottom-menu a.small-menu {font-size: .9rem;}
}
@media screen and (max-width:992px) {
	#header {
		padding: 20px 0;
	}
}


@media screen and (max-width:940px) {
.submenu a {
	margin: 5px 5px;
	padding: 7px 9px;
	font-size: 11px ;
  }
  
  .nav-row ul li.nav-item::before {
	
	height: 84px;
	
  }
  .bottom-menu {
	top: 126px !important;
  }
}













@media screen and (max-width:767px) {
	.wrapper.hasnobanner {margin-top: 50px}
	.header_icons {
		width: 90%;
		left: 0;
		position: absolute;
		right: 0;
		margin: auto;
	}
	.submenu a {
		margin: 0px 0;
	 
	}
	.bottom-menu {
		 position: relative;
		 top: unset !important;
		/* z-index: -1; */
	}
	.bottom-menu-links {flex-wrap: wrap;}
	.nav-row ul li.nav-item::before {
	 
		height: 0;
	 
	}
	.header_icons a {
		display: none !important;
	}
	.topbar_right .fal {
		width: 15px;
	}
	.topbar {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 45px;
		background-color: #008027;
		z-index: 9;
	}
	.topbar-inner {
		display: flex;
		padding: 10px;
		justify-content: space-between;
	}
	#header {
		padding: 10px 0;
		top: 45px;
	}
	.header .btn-link {
		line-height: 38px;
	}
	.header .right-col {
		padding-right: 10px;
		padding-left: 0;
	}
	.header .btn-join,
	.header .btn-login {
		padding: 5px 15px;
		font-size: 20px;
	}
	.nav-row {
		margin-top: 10px !important;
	}
	.topbar_left a {
		font-size: 15px;
		text-decoration: none;
	}
	.topbar_right a {
		color: #fff;
		margin: 0 5px;
	}
	.menu-btn {
		position: relative;
		right: 0;
		top: 0;
		transform: none;
		margin: 0 5px;
		color: #fff;
		display: inline-block;
		width: 15px;
		font-size: 17px;
	}
	.submenu {
		position: static;
		transition: none;
		transition-delay: none;
	}
	.submenu li {
		display: block;
		max-width: 100%;
	}
	.submenu li a {
		min-height: unset;
		text-align: left;
		justify-content: left;
		padding-left: 35px;
		font-size: 15px;
	}
	.nav-row ul li a.nav_header {
		border-bottom: none;
		padding: 10px 15px;
		min-height: auto;
		min-height: unset;
		border-bottom: solid 1px rgb(255 255 255 / 35%);
		justify-content: left;
		text-align: left;
	}
	.nav-row ul li a:hover {
		background-color: #05A53A;
		color: #fff;
		font-weight: 700;
	}
	.nav-row ul li a:hover {
		border-radius: 0;
	}
	.nav-row ul li a:focus {
		background-color: #05A53A;
		color: #fff;
		font-weight: 700;
	}
	.join-box {
		right: 15px;
		width: 300px;
	}
	div.ob-login div.login-box {
		padding: 15px;
	}
	div.ob-login div.login-box div.form-field {
		padding: 0;
	}
	div.ob-login div.login-box input[type=text],
	div.ob-login div.login-box input[type=password] {
		width: 100%;
		margin-bottom: 15px;
	}
	#BankingLoginSubmit {
		background-color: #008027;
		color: #fff;
		padding: 5px 30px;
		font-size: 23px;
		margin-top: 0px;
		float: right;
		width: 100%;
		border-radius: 3px;
	}
	.hblinks {
		margin-top: 15px;
		width: 100%;
		margin-bottom: 0;
	}
	.hblinks a {
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		margin-right: 10px;
		display: block;
		width: 100%;
	}
	.join-box::before {
		right: 35px;
	}
}



/* personalized banking promo */
.online-banking-promo {text-align: center; border: none; border-top: 1px solid #efefef; margin: 0 0 10px 0; padding: 10px;}
.online-banking-promo .promo-title {font-weight: bold;}
.banking-promo-image {width: 100%; max-height: 180px; margin-bottom: 16px; border-radius: 7px; overflow: hidden;}
.banking-promo-image img {	object-fit: cover; 
	object-position: 50% 50%;
	width: 100%; /* match to block width */
	height: 180px;}

.ob-login .hblinks, #BankingLoginSubmit  {margin-top: 10px;}
div.ob-login div.login-box {padding-bottom: 10px;}

.join-box { overflow: visible; margin-bottom: 10px;}
div.ob-login {max-height: calc(100vh - 140px); overflow: auto;}
#header.fixed button.bank-button i{color: #fff !important;} /* fix for missing arrow when scrolling */

@media screen and (max-width: 767px) { 
	.online-banking-promo {margin: 10px auto 0 auto;  max-width: 100%;}	
	.banking-promo-image {max-height: 130px; width: 80%; margin-left: auto; margin-right: auto;}
	.banking-promo-image img {	height: 130px;}
	
	.ob-login-box input[type=text], div.ob-login-box input[type=password] {max-width: 49%;}
	.login-box .b_fields {text-align: center;}
	.ob-login .hblinks {display: flex; align-items: flex-end; margin-top: 0;}
	.join-box {width: 370px; top: 55px;}
	div.ob-login div.login-box input[type=text], div.ob-login div.login-box input[type=password] {width: 49%; margin-bottom: 0;}
	.hblinks a {display: flex; width: auto;}
	li.hbb {display: flex;}
}
@media screen and (max-width: 380px) {
	.join-box {width: 340px; max-height: calc(100vh - 85px);  }
	.online-banking-promo { max-height: 400px; overflow: auto;}	
}
@media screen and (max-width: 320px) {
	.join-box {width: 300px; }
	.online-banking-promo { max-height: 250px; overflow: auto;}	
	.online-banking-promo img {display: none;}
	.topbar_left a {font-size: .75rem;} /*header layout fix unrelated to promo */
}
@media screen and (max-width: 280px) {
	.join-box {width: 260px; }
	.topbar_left a {font-size: .5rem;} /*header layout fix unrelated to promo */
	.header .btn-join, .header .btn-login {padding: 5px 9px; font-size: .9rem;}
}

/* end of file */