@import url("bootstrap.min.css");
@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Shadows+Into+Light|Vollkorn:400,400i");

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


body {background-color: #222;  color: #555; font-family: 'Roboto', sans-serif;}
a{color: #33BEE5;}
h1, h2, h3, h4, h5, h6 {font-family: 'Vollkorn', serif; font-weight: bold;}
h1 {border-bottom: 1px solid #FFC20E; color: #666; font-size: 2.5em; padding-bottom: 10px;}
h1:first-child {margin-top: 0;}
h2 {font-size: 1.8em; color: #440F62;}
h3 {font-size: 1.4em; color: #855FA8;}
h4 {font-size: 1.2em; text-transform: none;}

.readmore, .btn-primary{box-shadow: 1px 1px 2px #3d3d45; background: #440F62; border:1px solid #D8D8D8; border-radius:5px; display:inline-block; color:#FFF; font-size:.9em; font-weight:300; margin: 10px 0px; padding: .2em 1em; line-height: 1.6em; text-decoration:none;}
.readmore:hover, .btn-primary:hover { background: #855FA8; color:#FFF; text-decoration: none;}
/**************** template definitions ****************/

#page {background: url(../images/layout/paper.jpg);} 
#header {position: relative; z-index: 99;}
/*#header, #carousel, #main {background-color: transparent;}*/
#logo {float: left; background:url(../images/layout/bkg-logo.png) top left no-repeat; margin-bottom: 1em; width: 350px; height: 155px;} 
#logo a {display: block; background:url(../images/layout/logo.png) center no-repeat; background-size: contain; width: 350px; height: 141px; margin-top:.5em; text-indent: -9999em; overflow: hidden;}

#login {position: relative; float: right; width: 400px; top: 2em;}
#login iframe {width: 400px; height: 35px;}
#login h2 {margin: 0 0 .5em 0; font-size: 1.4em; color: #fff; text-transform: none; font-weight: normal; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);}

.fdic-signage {position: relative; z-index:100;}

.links {
	clear: both;
	color: #FFF;
	display: block;
	}

.links a {
	text-decoration: none;
	font-size: 9pt;
	color: #fff;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
	}

.links a:hover {
	text-decoration: underline;
	}

#menu-toggle, #login-toggle {display: block; position: absolute; background: #440F62; border:1px solid #440F62; border-radius: 0; margin:0; width: 50%; z-index: 100;}
#menu-toggle {border-right: 1px solid #FFF;}
#menu-toggle:hover, #login-toggle:hover {background: #855FA8;}
#login-toggle {right: 0;}

#navigation {background: transparent; position: relative; z-index: 99;}
#navigation ul {list-style: none; padding: 0; margin: 0;}
#navigation a {display: block; text-decoration: none; color: #FFF;}
#navigation a span {vertical-align: middle;}
#navigation-inner {position: relative; background-color: rgba(105,50,24,.5) !important; padding: 0; margin: 0 auto 1em auto; -moz-box-shadow: inset 0 0 4px #222; -webkit-box-shadow: inset 0 0 4px #222; box-shadow: inset 0 0 4px #222;}
#navigation-inner > nav > ul > li {display: block; float: left;}
#navigation-inner > nav > ul > li > a {padding: 0 1em; line-height: 52px; border-left: 1px solid rgba(0,0,0,.5); border-right: 1px solid rgba(255,255,255,.1);}
#navigation-inner > nav > ul > li:first-child > a {border-left: 0;}
#navigation-inner > nav > ul > li > a.selected {background-color: #440f62;}
#navigation-inner > nav > ul > li:hover {background-color: #440f62;}
#navigation-inner > nav > ul > li:hover > ul {background-color: #440f62;}
#navigation ul ul {display:none; position: absolute; width: 200px; margin-left: 1px;}
#navigation ul ul a {padding: .5em 1em;}
#navigation ul ul a:hover {background-color: #855fa8;}
#navigation-inner > nav > ul > li:hover ul {
	display: block;
	}

#search {position: absolute; top: 0; right: 0; border-left: 1px solid #444;}
#search button {background-color: #440f62; color: #fff; height: 52px; width: 52px; border: 0;}
#search input[type=text]{height: 52px;color: #FFF; background: transparent; border: 0; vertical-align: top; margin: 0; padding: 0 15px;}
#search ::-webkit-input-placeholder {color: rgba(255,255,255,.8); font-style: italic;}
#search :-moz-placeholder {color: rgba(255,255,255,.8); font-style: italic;}
#search ::-moz-placeholder {color: rgba(255,255,255,.8); font-style: italic;}
#search :-ms-input-placeholder {color: rgba(255,255,255,.8); font-style: italic;}

.slideshow {max-width: 100%; position: relative;}
.carousel, .slides-pagination {list-style: none; padding: 0; margin: 0; position: relative; z-index: 10;}
.carousel li {z-index:1; border-radius: .5em; padding: 0; margin:0 !important;	width: 100%; height: 100%; min-height: 400px; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;}
/*.carousel img {width: 100%; height: auto;}*/
.slides-pagination {text-align: center;position: absolute; z-index: 11; width: 100%; top: 1em;}
.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; text-shadow: 0 0 5px rgba(0,0,0,.5);}
.slides-next {right: 0;}
.slogan {position: absolute; margin: 0 auto; bottom: -4em; left: 0; right: 0; z-index: 999;}

#main-inner {padding-top: 30px; padding-bottom: 30px;box-shadow: 0 0 10px rgba(0,0,0,.8); }

.back-to-top {position: fixed; bottom: 0em; right: 0px;  text-decoration: none; color: #000000;  background-color: rgba(173,173,173.80); padding: .5em 1em !important; display: block; z-index: 9999; }
.back-to-top:hover {background-color: rgba(68,15,98,.70);}

#footer * {color: #FFF; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8)}
#footer a{font-size:120%;}
#footer {font-size: 90%; background:url(../images/layout/leather-bottom.png) top  repeat-x; border-bottom: 5px solid #440f62; position: relative;}
#footer-inner {padding: 3em 0 0;}
#copyright {float: left;}
#fdic-ehl {float: right;}
#fdic, #ehl {display: inline-block; margin-left: 1em;}

.stripe {position: absolute; z-index: 1; width: 100%; height: 290px; background: url(../images/layout/leather.png) bottom  repeat-x; border-top: 5px solid #440f62; border-bottom: 0;}
#header-inner {background: transparent !important; padding-top: 15px; color: #FFF; position: relative;}

#main, #carousel {position: relative; z-index:10;}
#main-inner {background: #FFF;margin-bottom: -20px; border-radius: 8px;}

#main-section {background: url(../images/layout/main-section-header.jpg) top no-repeat; padding-top:74px; }
#main-section-inner {background:url(../images/layout/main-section.jpg); padding:2em; box-shadow: 1px 1px 8px #212121;;}
#main-section div{font-size:1.2em; font-family: 'Shadows Into Light', cursive !important; color:#FFF; text-align:center}
#main-section h3 {font-family: 'Vollkorn', serif; padding: 1em 0 .5em; color: #ffc20e;}
#main-section div img{width: 150px; height: 150px; border-radius: 50%;}
#links h3{height: 60px;}
/**************** bootstrap overrides ****************/

.table > tbody > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 0; color: #855FA8; border-bottom: 1px solid #855FA8;}
th span {font-size: .8em;}
.list-group-item:hover{
	
}
.list-group-item a{
	color: #555;
}
.list-group-item a:hover {
	color: #855FA8;
}
/**************** handheld definitions ****************/

@media (max-width: 767px) {
	#header-inner, #navigation-inner {padding: 0;position: relative;}
	
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	
	
	#navigation-inner > nav > ul > li > a {border: 0; border-bottom: 1px solid rgba(0,0,0,.5); border-top: 1px solid rgba(255,255,255,.1);}
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	
	#search {position: relative; border-left: 0;}
	#search input[type=text] {width: 84%;}
	#search button {position: absolute; top: 0; right: 0;}
	
	#main-inner  {border-radius: 0;}
	#main-section-inner {height:auto;}
	#footer-inner {padding: 2em 0 0;}
}

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

@media (min-width: 768px) and (max-width: 991px) {
	#header-inner, #navigation-inner {padding: 0;position: relative;}	
	
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#navigation-inner > nav > ul > li {display: block; float: none;}
	#navigation-inner > nav > ul > li > a {border: 0; border-bottom: 1px solid rgba(0,0,0,.5); border-top: 1px solid rgba(255,255,255,.1);}
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	
	#search {position: relative; border-left: 0;}
	#search input[type=text] {width: 84%;}
	#search button {position: absolute; top: 0; right: 0;}
	
	
}

/**************** tablet definitions ****************/
@media (max-width: 991px) {
	#header {padding: 3em 0 2em;}
	#navigation, #login {display: none; position: absolute; width: 100%;}
	#logo {float: none; margin:0 auto;}
	#logo a {position: relative; margin: 0; height: 130px; top: 1em;}
	
	#navigation-inner > nav > ul > li {background:#440F62; display: block; float: none;}
	#navigation-inner > nav > ul > li:hover {background:#855FA8;}
	
	#login {background:#440F62; border-radius: .8em; float: none; width: 100%; top: 10em;}
	#login-inner {width: 450px; margin: 0 auto; padding: 15px;}

	
}
@media (min-width: 992px) and (max-width: 1199px) {
	#search input[type="text"] {
		width: 125px 
	}
	
}