@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700&display=swap');

/**************** html definitions ****************/

/** {font-family: 'Oswald', sans-serif; font-weight: 300; }*/
body {background-color: #041c2c; font-size: 18px; font-family: 'Oswald', sans-serif;}
h1 {font-size:2.5em;}
h2 {color: #155E98; font-size: 1.8em; font-weight: 300;}
h2 span {display: block; font-size: .6em; font-weight: 300;} 
h3 {font-size: 1.4em;}
h4 {color: #041C2C;}
a {color: #155E98}
a:hover, a:focus {color: #0076cc}
a:active {color: #041C2C;}


label {font-weight: 400;}
hr { margin: 1em 0; background-color: #CCC; color: #CCC;  height: 1px; clear:both;}
/**************** template definitions ****************/

header {background: #FFF; height: 225px; z-index: 99;}

#logo {display: block; float: left; position: relative; top: 2em;}
#logo a {display: block; background: url(../images/layout/logo.png) no-repeat; background-size: contain; width: 650px; height: 150px; color: #FFF; font-size: 2em; overflow:hidden; text-indent:-9999px;}

#login {position: relative; float: right; width: 400px; top: 1em;} 
#login iframe {width: 400px; height: 40px;}
#login .login-header {margin: 0 0 .5em 0; font-size: 1.2em; color: #155E98; text-transform: none; font-weight: normal;}
#login .links {clear: both; display: block; padding: 0;/*background-color: rgba(105,50,24,.5) !important;-moz-box-shadow: inset 0 0 4px #222; -webkit-box-shadow: inset 0 0 4px #222; box-shadow: inset 0 0 4px #222;*/ }
#login .links a {padding: 0 .3em; text-decoration: none; color:#155E98; font-size: .8em; font-weight: 400;}
#login .links a:hover {text-decoration: underline;}
#login .buttons {margin-bottom: .5em;}
#login .showSingle {color: #4a4d54; font-size: .9em;}
#login .showSingle:hover{cursor: all-scroll;}
#login .targetDiv {display: none;}
#login #div1 {display: block;}


#menu-toggle, #login-toggle {display: block; position: absolute; border:0; margin: 4px; z-index:9999}
#login-toggle {display: none; right: 0;}
.btn-primary {background: #155E98;}
.btn-primary:hover {background: #0165c1;}

/* first level */
.full-menu {display: inline-block;}
.mobile-menu {display: none}

#navigation {background: #041c2c; position: relative;  z-index: 9999;}
#navigation #nav{display: block; float: left;}
#navigation ul {list-style: none; padding: 0; margin: 0;}
#navigation a {display: block; text-decoration: none; color: #FFF; font-weight: 300;}
#navigation a span {vertical-align: middle;}
#navigation-inner > nav > ul > li {display: inline-block;}
#navigation-inner > nav > ul > li > a {padding: 0 1em; line-height: 50px; font-size:.9em; text-transform: uppercase;}
#navigation-inner > nav > ul > li:hover {background-color: #155E98;}
#navigation-inner > nav > ul > li a:active {color: #f9dd2f;}
#navigation-inner > nav > ul > li:hover > ul {background-color: #155E98;}
#navigation ul ul {display:none; position: absolute; width: 200px;}
#navigation ul ul a {font-size: .9em; font-weight: 300; padding: .5em 1em; border-bottom:1px solid #648493}
#navigation ul ul a:hover, #navigation ul ul a:focus {background-color: #041C2C;}
#navigation ul ul a:active {color: #f9dd2f;}

#navigation-inner > nav > ul > li:hover ul {
	display: block;
	}
#navigation .home{display: none;}

#top-menu {display: inline; float: right;}
#top, #search, #social {display: inline-block; position: relative; margin-top: .5em}
#top ul, #social ul {list-style: none; padding: 0; margin: 0; line-height: 32px;}
#top li, #social li {display: inline-block; text-transform: uppercase;}
#top li a {color: #041C2C; text-decoration: none; font-size: .7em; padding: 0 .5em;}
#top a:hover, #login .showSingle:hover, #top a:active, #login .showSingle:active {color: #155E98; text-decoration: underline;}

#search form{border:1px solid #a3abbe; border-radius: .4em;}
#search button {background: #041C2C; border: 0; border-radius: .3em; color: #FFF; font-size: 1.1em; height: 30px; width: 40px; line-height: 10px;}
#search button:hover, #search button:focus {background: #155E98; color: #FFF;}
#search input[type=text]{height: 30px; background: transparent; border: 0; vertical-align: top; margin: 0; padding: 0 10px; font-size: .8em;}
/*
#search ::-webkit-input-placeholder {color: #91939A; font-style: italic;}
#search :-moz-placeholder {color: #91939A; font-style: italic;}
#search ::-moz-placeholder {color: #91939A; font-style: italic;}
#search :-ms-input-placeholder {color: #91939A; font-style: italic;}	
*/

#social {margin: 0;}
#social li {line-height: 50px;}
#social li a{padding: 0 .5em; font-size: 1.4em;}
#social li a:hover {color: #f9dd2f}

#banner{background-position: center; min-height:250px; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;}
#banner h1{display: block; position: relative; color: #FFF; font-size:2.7em; top: 100px;}
#banner h1 span{display: block; color: #FFF; font-size: .6em; font-weight: 300; letter-spacing: .1em;} 
.banner {background-position: center; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; z-index: 1;}
.ag-accounts {background-image:url(../images/banners/ag-accounts.jpg);}
.ag-lending {background-image:url(../images/banners/ag-lending.jpg);}
.bank {background-image:url(../images/banners/money.jpg);}
.board {background-image:url(../images/banners/board.jpg);}
.business-checking {background-image:url(../images/banners/business-checking.jpg);}
.business-checks {background-image:url(../images/banners/business-checks.jpg);}
.business-debit {background-image:url(../images/banners/business-debit-card.jpg);}
.business-loan {background-image:url(../images/banners/business-loan.jpg);}
.business-online {background-image:url(../images/banners/business-online-banking.jpg);}
.business-savings {background-image:url(../images/banners/business-savings.jpg);}
.calculators {background-image:url(../images/banners/calculator.jpg);}
.calendar {background-image:url(../images/banners/calendar.jpg);}
.careers {background-image:url(../images/banners/careers-1.jpg);}
.checking {background-image:url(../images/banners/checking.jpg);}
.community {background-image:url(../images/banners/communitysupport.jpg);}
.contact {background-image:url(../images/banners/contact.jpg);}
.construction {background-image:url(../images/banners/construction.jpg);}
.debit {background-image:url(../images/banners/debit-card.jpg);}
.field {background-image:url(../images/banners/field.jpg);}
.finance {background-image:url(../images/banners/financial-wellness.jpg);}
.history {background-image:url(../images/banners/history.jpg);}
.invest {background-image:url(../images/banners/invest.jpg);}
.loan {background-image:url(../images/banners/loan.jpg);}
.local {background-image:url(../images/banners/local-emergency-information.jpg);}
.mobile-banking {background-image:url(../images/banners/mobile-banking.jpg);}
.mobimoney {background-image:url(../images/banners/MobiMoney.jpg);}
.mortgage {background-image:url(../images/banners/mortgage.jpg); background-position: 50% 70%;}
.online {background-image:url(../images/banners/online.jpg);}
.online-banking {background-image:url(../images/banners/online-banking.jpg);}
.other-services {background-image:url(../images/banners/services.jpg);}
.overdraft {background-image:url(../images/banners/overdraftprotection.jpg);}
.personal-checks {background-image:url(../images/banners/personal-checks.jpg);}
.rates {background-image:url(../images/banners/rates.jpg);}
.redwoods {background: url(../images/layout/footer-image.jpg);}
.savings {background-image:url(../images/banners/savings.jpg); background-position: 50% 30%;}
.shareholder {background-image:url(../images/banners/shareholder-services.jpg);}
.statement {background-image:url(../images/banners/statement.jpg);}
.testimonials {background-image:url(../images/banners/testimonials.jpg);}

.acf-map {border-bottom: 1px solid #041C2C; height: 300px; margin:0 ; width: 100%;}

.readmore, .article .readmore, #contact_form .submit_btn { box-shadow: 2px 2px 5px #3d3d45; background: #155E98; border:1px solid #FFF; display:inline-block; color:#FFF; font-size:1em; font-weight:400; margin: 10px 0px 0px 0px; padding: .3em 1em; line-height: 1.6em; text-decoration:none; text-transform:uppercase;}
.readmore:hover, .article .readmore:hover, #contact_form .submit_btn:hover { background: #0165c1; color:#FFF}

.slideshow {max-width: 100%; position: relative;}
.carousel, .slides-pagination {list-style: none; padding: 0; margin: 0; position: relative; z-index: 10;}
.carousel li {-webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; padding: 0!important; margin:0 !important; width: 100%; height: 350px; z-index:1;}
/*.carousel-img {display:block; width: 100%; height: auto;  z-index:10; position:absolute; }*/
.carousel-content {position:absolute; background-color: rgba(60,61,69,.75); box-shadow: 1px 1px 3px #666; width: 100%; z-index:100; bottom: 0;  }
.carousel-content h1{padding: 0  .5em; color:#FFF; font-weight:400; text-shadow: 1px 1px 2px #212121;}
.carousel-content span{color: #CCC; font-size:.9em; line-height:30%; text-shadow: none;}
.carousel-content p{color: #FFF; font-size: 1.2em; padding: 0  1em;}
.carousel-content .readmore{width: 100%; border:0; font-size: .9em; font-weight:400; box-shadow: none; }
.slides-pagination {text-align: center;position: absolute; z-index: 11; width: 100%;}
.slides-pagination li {display: inline-block;}
.slides-pagination li a {display: block; width: 18px; height: 18px; overflow: hidden; text-indent: -9999px; border-radius: 9px; border: 2px solid #4a4d54; margin: 0 6px;}
.slides-pagination li.selected a {background-color: #155E98;}
.slides-next, .slides-prev {position: absolute; z-index: 20; top: 50%; display: none; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-top: -15px; color: #fff;}
.slides-next {right: 0;}

main {display: block; position: relative; background-color: #FFFFFF; z-index: 10} /*background: url(../images/layout/bkg.jpg)*/
#content {padding: 2em 0;}
#content .side-bar {border-left: 1px solid #ccc;}
#main-section-2 {background: url(../images/layout/footer-image.jpg) center no-repeat; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; padding:2em ;}
#main-section-2 img {margin-top: 4em; width: 500px; height: auto;}

#text {}
#text h2 {float: left; width: 30%;}
#text h2 span {display: block; font-size: .6em;}
#text ul, #text p, #text h3{float: right; width: 65%;  margin: 1em 0; padding-left: 0;}
#text ul ul{float: none;}
#text li{margin-bottom: .5em; margin-left: 2em;}

.location-photo, .photo {width: 100%; max-width: 400px; height: auto; border-radius: .4em; margin: 10px 0;}
.photo-sm {width: 100%; max-width: 150px;}
.video {width: 100%; max-width: 450px; height: 300px; margin: 1.5em 0;}

#links {background: url(../images/layout/stamp.png) center no-repeat; padding:1em 0; text-shadow: 1px 1px 2px #212121;}
#links h3{font-family: 'Vollkorn', serif; margin-bottom: 1em}
#links ul {list-style: outside none none; margin-left: 0; padding: 0}
#links li{padding-bottom: .5em;}
#links .col-sm-3 {border-right:1px solid #8f8d8d; padding: 0 3em;}
#links .last {border: 0}

#weather-module .current-conditions, #weather-module #forecast {background-color: rgba(22,45,86,.7) !important;}

.back-to-top {position: fixed;  bottom: 2em; right: 0px;  text-decoration: none; color: #000000;  background-color: rgba(229,229,229,.5);  padding: 1em; display: block;}
.back-to-top:hover {background-color: #e5e5e5; color: #000000;}

footer *, #links *{color: #FFF; font-weight: 300; z-index:9999;}
footer {border-top: 2px solid #155E98; font-size: 90%;  z-index: 99}
#footer-inner {padding: 2em 0;}
#copyright {float: left;}
#fdic-ehl {float: right;}
#copyright a, #fdic-ehl a{padding:0 1em;}
#copyright a.first {padding-left: 0;}

/*.small {text-align:justify;}*/
.clear {clear: both;}

/**************** bootstrap overrides ****************/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: #3F3F38!important; border:0!important;}
.ui-widget-content, .ui-widget.ui-widget-content, .ui-widget-header, .ui-tabs .ui-tabs-nav li {background: none; border: 0} 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {background: none;}
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, a.ui-button:hover {background: #0067B1; border-radius: .3em .3em 0 0; color: #FFF;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {background: #0067B1!important; color: #041C2C;}
.ui-dialog {width: 700px !important; background: #fff !important; padding: 1em; border:1px solid #e1e1e1; box-shadow: 2px 2px 5px #3d3d45; z-index:9999}
.ui-tabs .ui-tabs-panel a {color: #039}

.ui-accordion .ui-state-active {color: #FFF;}

.table {margin: 2em 0;}
.table h2 {margin-top: 0;}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 1px solid #CCC;}
.table > tbody > tr > td {padding: .5em;}
.table > tbody > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 0; border-bottom: 2px solid #CCC; font-weight: 700; text-transform: uppercase;}
.table > tbody > tr > th, .table > thead > tr > th {background: #041C2C; color: #FFF; font-size: .9em; font-weight: 400;}
th span {font-size: .8em;}

.carousel-inner {padding:0 2em;}
.carousel-inner > .item > a > img, .carousel-inner > .item > img {margin: 0 auto;}
.carousel-caption {position: relative; color: #333; text-align: justify; text-shadow: none; right: 0; left: 0; }
.carousel-indicators {position: relative; bottom: 0;}
.carousel-indicators li {width: 18px !important; height: 18px !important; border: 2px solid #ccc; }
.carousel-indicators .active {background-color:  #155E98;}
.carousel-control {width: 0%; color: #616161; font-size: 60px; opacity: 1; text-shadow: none; }
.carousel-control:hover, .carousel-control:focus {color: #155E98 }
.carousel-control.left, .carousel-control.right {background-image: none;}
.carousel-control .icon-prev, .carousel-control .icon-next {font-size: 60px;}

#calculators .row{
	margin: 2em 1em;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCC;
}

/**************** SBMC Overrides **********************/
dl.qanda dt:before {
	content: 'Q. ';
	font-weight: bold;
}
dl.qanda dd:before {
	content: 'A. ';
	font-weight:bold;
}
dl.qanda dd {
	padding-bottom:1em;
}
.close {
	color: #FFF !important;
	opacity: 1;
}
.close:hover, .close:focus {
	color: #f9dd2f !important;
	opacity: 1;
}

#alert_contents #alert_slides ul li {
	list-style: none;
	color: #fff;
}
/**************** Helpers **********************/
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
  display: block; overflow:hidden; text-indent:-9999px;
}



/**************** handheld definitions ****************/

@media (max-width: 767px) {
	header {background: #041C2C; height: 75px;} 
	#navigation, #login, #top {display: none; position: absolute; width: 100%; z-index: 9999 !important;}
	#login {background: #041C2C; float: none; width: 100%; height: 215px; padding:0; margin: 0; left: 0; top: 60px;}
	#login-inner { width: 100%; margin: 0; padding: .5em; text-align: center;}
	#logo {float: none; text-align: center; top: .5em;}
	#logo a {display: block; width: 250px; height: 70px; background: url(../images/layout/logo-white.png) no-repeat; background-size: contain; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#menu-toggle, #login-toggle {top: 1em;}
	#login-toggle {display: none !important;}
			
	#navigation {top: 60px; left: 0;}		
	#navigation #nav {float: none; width: 100% !important;}
	#navigation-inner > nav > ul > li {border-bottom:1px solid #FFF; width: 100% !important; height: 30px;}
	#navigation-inner > nav > ul > li > a {color: #FFF; font-size: .9em; line-height: 30px; }
	#navigation ul ul {display:none; position: relative; width: 100% !important;}
	#navigation ul ul a {font-size: .9em; padding: .3em 1em .3em 2.5em}
	
	#banner{min-height:150px;}
	#banner-inner ul, #search, .top-links {display: none;}
	
	.carousel li {height: 200px;}
	.carousel-content {float: none; width: 100%;}
	.carousel-content h1{padding: 0  1.5em; font-size: 1.3em;}
	.carousel-content span{font-size:.8em;}
	.carousel-content p{ padding: 0  1.5em; font-size: .9em;}
	.carousel-content .readmore{width: 100%; border:0; font-size: .9em; font-weight:400; box-shadow: none; }
	
	#main-section-2 img {margin-top: 4em; width: 100%; height: auto;}
	
	.table {margin: 2em 0;}
	.table h2 {font-size: 1.1em;}
	.table > tbody > tr > td {padding: .2em; font-size: .8em;}
	.table > tbody > tr > th, .table > thead > tr > th {background: #041C2C; color: #FFF; font-size: .5em; font-weight: 400;}
}

/**************** small tablet definitions ****************/

@media (min-width: 768px) and (max-width: 991px) {
	header {height: 200px;}
	#navigation, #login {display: none;}
	#logo {float: none; text-align: center;}
	#logo a {display: block; background-position: center; margin: 0 auto; height: 150px;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#login {background: #041C2C; position: absolute; width: auto; right: 0; top: 3em;  z-index: 999;}
	#login-inner {float: right; padding: 1em;}
	
	#menu-toggle, #login-toggle {top: 4em;}
	#login-toggle {display: none !important;}	
	
	
	#navigation {position:absolute; width: 100%; min-height: 300px; left: 0; z-index: 999;}
	#navigation #nav {float: none; width: 100% !important;}
	#navigation-inner > nav > ul > li {border-bottom:1px solid #FFF; width: 100% !important; height: 40px;}
	#navigation-inner > nav > ul > li > a {line-height: 40px; }
	#navigation-inner > nav > ul > li:hover, #navigation-inner > nav > ul > li > a.selected {background: none; color: #FFF; width: 100% !important;}
	#navigation ul ul {display:none; position: relative; width: 100% !important;}
	#navigation ul ul a {font-size: .9em; padding: .3em 1em .3em 2.5em}
	
	#top {padding: 0; float: left;}
	ul.carousel {margin:0;}
	.carousel li {height: 300px;}
}


/**************** tablet definitions ****************/

@media (min-width: 992px) and (max-width: 1199px) {
	#logo {top: 2em;}
	#logo a {width: 450px; height: 150px;}	
	#top {padding: 0; float: left;}
}