@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Vollkorn:400,400i");

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

* {font-family: 'Open Sans', sans-serif; font-weight: 300; }
body {background-color: #373a42; font-size: 16px;}
h1{color: #FFF; font-weight: 400; text-shadow: 1px 2px 2px #212121;}
h1 span{color: #FFF; font-weight: 700; }
h2 {color: #FFF; font-size: 2.2em; text-shadow: 1px 2px 2px #212121;}
h3 {color: #648493; font-size: 1.3em;}
a {color: #0053a0}
a:hover {color: #0076cc}
hr { margin:  1em 0; border-color: #648493;}
/**************** template definitions ****************/

#header {height: 150px; position: relative; z-index: 99;}
#header, #carousel, #main {background-color: #fff;}
#logo {float: left;  margin: 2em 0;}
#logo a {background: url(../images/layout/logo.png) no-repeat; color: #FFF; font-size: 2em; display: block; width: 260px; height: 75px; overflow:hidden; text-indent:-9999px;}

#login {display: block; position: relative; float: right; height: 0; margin: 0 auto; top: 25px; z-index: 400;}
#login-inner {padding: 0;  width: 100%;}
#login iframe {width: 80%; height: 50px; margin: .5em .5em 0 1em;}
#login h3 {padding: 0 1em; margin: 0; color: #373a42; font-size: 1.2em; line-height:25px;}
#login .links {clear: both; color: #648493; display: block; padding: 0 .2em;}
#login .links a { text-decoration: none; font-size: .7em; color: #648493; }
#login .links a:hover { text-decoration: underline; }


#menu-toggle, #login-toggle {display: block; position: absolute; padding: .7em 0; width: 50%; border-radius: 0; border:0; top: 130px;}
#menu-toggle {background: #648493; left: 0;}
#menu-toggle:hover {background:#2E4E5D}
#login-toggle {background: #e96e06; right: 0;}
#login-toggle:hover {background:#ef8c39}

#navigation {background: #648493; position: relative; z-index: 200;}
#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: #2e4e5d;}
#navigation-inner > nav > ul > li:hover > ul {background-color: #2e4e5d;}
#navigation ul ul {display:none; position: absolute; width: 200px;}
#navigation ul ul a {font-size: .9em; font-weight: 400; padding: .5em 1em; border-bottom:1px solid #648493}
#navigation ul ul a:hover {background-color: #e96e06;}

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

	
#search {float: right; position: relative; top: 0; right: 0; background: #484f58;}
#search button {background-color: #e96e06; color: #fff; font-size: 1.2em; height: 50px; width: 50px; border: 0;}
#search button:hover{background-color: #ef8c39;}
#search input[type=text]{height: 50px; color: #FFF; background: #2e4e5d; border: 0; vertical-align: top; margin: 0; padding: 0 15px;}
#search ::-webkit-input-placeholder {color: rgba(255,255,255,.9); font-style: italic;}
#search :-moz-placeholder {color: rgba(255,255,255,.9); font-style: italic;}
#search ::-moz-placeholder {color: rgba(255,255,255,.9); font-style: italic;}
#search :-ms-input-placeholder {color: rgba(255,255,255,.9); font-style: italic;}	

.top-links {display:block; position:relative; float: right; width: 100%; height: 0; top: 130px; right:0; padding:0 5em;}
.top-links ul {display: inline-block; list-style: none; padding: 0; margin: 0;}
.top-links li {display: inline-block;}
.top-links li a {display: block; text-decoration: none; font-size: .7em; padding: 0 1em;}
.top-links a:hover {text-decoration: underline;}

#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;}

.slideshow {max-width: 100%; position: relative; border-bottom: 10px solid #648493;}
.carousel, .slides-pagination {list-style: none; padding: 0; margin: 0; position: relative; z-index: 10;}
.carousel li {z-index:1; background-position: center; padding: 0; margin:0 !important;	width: 100%; height: 100%; min-height: 450px; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; }
#carousel-message {display: block; position: relative; height: 0; color: #FFF; text-align:center; top: -100px; z-index: 40;}
#carousel-message h1 {padding: 0; color: #648493; text-shadow: 1px 1px 1px #212121; text-align:right;}
/*.carousel img {width: 100%; height: auto;}

#carousel-message .box {background:#78BE20; width: 80%; margin:0 auto .5em; padding: .5em; border-radius:5px; }
#carousel-message h2 {color: #FFF; font-size:1.8em; font-weight: 400; line-height:100%; text-shadow: 1px 1px 1px #212121;}
#carousel-message span {font-size: .7em; font-weight:300;} */
.slides-pagination {text-align: center;position: absolute; z-index: 11; width: 100%; margin-top: -60px;}
.slides-pagination li {display: inline-block;}
.slides-pagination li a {display: block; width: 24px; height: 24px; overflow: hidden; text-indent: -9999px; border-radius: 12px; border: 2px solid #FFF; margin: 0 6px;}
.slides-pagination li.selected a {background-color: rgba(255,255,255,.8);}
.slides-next, .slides-prev {position: absolute; z-index: 20; top: 50%; display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; margin-top: -15px; color: #fff;}
.slides-next {right: 0;}

#main {background:url(../images/layout/bkg-page.jpg) center;}
#main-inner {padding: 5em 0;}
#main h2 {font-family: 'Vollkorn', serif;}
#main-section-2 {background: url(../images/layout/footer-image.jpg)  fixed top no-repeat; min-height:400px; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; padding:4em;}

.content {background-color: rgba(255,255,255,.85);padding: 1em; border: 1px solid #FFF;}
.content p{font-weight: 400;}

#text {}
#text h2 {float: left; width: 25%; color: #2E4E5D; text-shadow:none;}
#text h2 span {display: block; font-size: .7em;}
#text ul, #text p{float: right; width: 70%;  padding-left: 0;}
#text li {margin-bottom: .5em; margin-left: 2em;}
#text .col-sm-4, #text .col-sm-6 {padding-left: 0;}

.article {background-color: rgba(100,132,147,.8); padding: .5em; border: 1px solid #648493;}
.article h3 {color: #FFF; font-size: 1.1em; margin: 0;}
.article p {color: #FFF; font-size: .9em;}
.article em, .article i {font-size: .7em; color: #FFF;}	
.article a {color: #FFF; font-weight: bold;}	

#links {padding:3em 0}
#links h3{color:#FFF; margin-bottom: 2em}
#links ul {list-style: outside none none; margin-left: 0; padding: 0}
#links li{padding-bottom:1em}
#links .col-sm-3 {border-right:1px solid #8f8d8d; padding: 0 3em;}
#links .last {border: 0}

#accent-line {white-space: nowrap; border-bottom: 1px solid #FFF;}
#accent-line .color-bar {height: 10px; float:left;}
#accent-line .color-bar-top {height: 25px; float:left;}
#accent-line .bar1 {background-color: #e0393e; width: 25%;}
#accent-line .bar2 {background-color: #0053a0; width: 50%;}
#accent-line .bar3 {background-color: #0076cc; width: 25%;}
#accent-line .bar4 {background-color: #0053a0; width: 75%;}
#accent-line .bar5 {background-color: #00467F; width: 21%;}

#hor-minimalist-b{font-size: .8em;  background: #fff; border-collapse: collapse; border-radius:1em; text-align: left;}
#hor-minimalist-b th{background: #BFD4E7; font-weight: 400; color: #0062a8; padding: 5px; border-bottom: 2px solid #CCCCCC; text-align:center; vertical-align:text-top}
#hor-minimalist-b td{ border-bottom: 1px solid #ccc; color: #666; padding: 6px 8px; vertical-align:text-top;}
#hor-minimalist-b tbody tr:hover td{ color: #333; background:#eff0eb;}

#table{border-collapse: collapse;text-align: left; margin-bottom:1em;}
#table th{background: #EFF0EB; font-weight: bold; color: #7A003B; padding: 10px 8px; border-bottom: 2px solid #CCCCCC; }
#table td{ border-bottom: 1px solid #ccc; color: #666; padding: 6px 8px; vertical-align:text-top;}
#table tbody tr:hover td{ color: #333; background:#FFF;}

.back-to-top {  position: fixed;    bottom: 2em; right: 0px;  text-decoration: none; color: #000000;  background-color: rgba(191,212,231,.9);  font-size: 12px;  padding: 1em; display: block;}
.back-to-top:hover {       background-color: rgba(135, 135, 135, 0.50);}
#footer *, #links *{color: #FFF;}
#footer {font-size: 90%;}
#footer-inner {padding: 30px 0;}
#copyright {float: left;}
#fdic-ehl {float: right;}
#copyright a, #fdic-ehl a{font-size: 1.2em; font-weight: 400; padding: 0 1em;}

.last, #fdic-ehl a.last {border-right: 0; margin-right: 0; padding-right: 0}
.small {text-align: justify;}
.clear {clear: both;}
/**************** handheld definitions ****************/

@media (max-width: 767px) {
	#header {height: 80px;}
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none;}
	#logo {float: none; text-align: center; margin: .5em 0;}
	#logo a {display: block; background-position: center; background-size: contain; height: 50px; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#menu-toggle, #login-toggle {top: 80px;}
	
	#login {width: 100% !important; margin: 0; top: 49px;}
	#login-inner {background: #373A42; }
	#login h3 {color: #FFF;}
	#login .links {margin: 0.5em 1em;}
	#login .links a{color: #FFF;}
	
	#navigation {top: 35px;}
	#navigation #nav, #navigation ul {width: 100% !important; margin: 0}
	#navigation-inner > nav > ul > li {display: block;}
	#navigation-inner > nav > ul > li:hover {background-color: #2E4E5D;}
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	
	#search  {display: none;}
	#search input[type="text"] {width: 90%;}
	
	#banner h1 {top: 150px;}
}

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

@media (min-width: 768px) and (max-width: 991px) {
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none;}
	#logo {float: none; text-align: center;}
	#logo a {display: block; background-position: center; background-size: auto; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#login {width: 100% !important; margin: 0; top: 26px;}
	#login-inner {background: #373A42; }
	#login h3 {color: #FFF;}
	#login .links {margin: 0.5em 1em;}
	#login .links a{color: #FFF;}
	
	#navigation {top: 15px;}
	#navigation #nav, #navigation ul {width: 100% !important; margin: 0}
	#navigation-inner > nav > ul > li {display: block;}
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	
	#search  {display: none;}
	#search input[type="text"] {width: 90%;}
}

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

@media (min-width: 992px) and (max-width: 1199px) {
	
}