@import url("font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Oswald:400,300,700");

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

* {font-family: 'Oswald', sans-serif; font-weight: 300; }
body {background-color: #4f4f4f; font-size: 18px;}
h1{color: #424242; font-size: 2.5em; font-weight: 300;}
h1 span{color: #0076cc; font-weight: 700;}
h2 {color: #890B0F; font-size: 1.8em; font-weight: 300;}
h3 {font-size: 1.3em; font-weight: 300;}
a {color: #0053a0}
a:hover {color: #0076cc}
hr {
	margin: 1em 0;
	background-color: #525252;
	border-top: 0;
    color: #0053a0;
    height: 1px;
	clear:both;
}
/**************** template definitions ****************/

#header {background: #FFF; position: relative; height: 160px; z-index: 99;} 
#carousel, #main {background-color: #fff;}
#logo {display: block; float: left; position: relative; height: 0; top: 1em;}
#logo a {background: url(../images/layout/logo.png) no-repeat; background-size: contain; color: #FFF; font-size: 2em; display: block; width: 250px; height: 100px; overflow:hidden; text-indent:-9999px;}
#slogan {display:inline-block; float: right; position: relative; top: -20px; clear:both; margin: 0 3em; }

#login {display: block;  position: relative; width: 100%; height: 0; padding: 0; top: -1.7em; z-index: 9999;}
#login-inner {background: #5b070a; padding: .5em; width: 50%; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; color: #FFF;}
#login h2 {float: left; padding: 0 .8em; margin: 0; font-size: 1em; font-weight: 300; color: #FFF; text-transform: uppercase; line-height:40px;}
#login .hr {background: #d51f24; border: 0; height: 1px; margin: .5em 0;}
#login label {color: #FFF; font-size: .8em; font-weight: 300;}
#login .form-group {margin-bottom: 0;}
#login .form-control {background: #FFF; border-radius: .4em; border: 0; box-shadow: none; }
#login .form-control::-moz-placeholder {color: #898888}
#login .bttn  {float: left; cursor: pointer; border: 0; border-radius: .3em; margin:.2em .5em;  padding: .2em 1em; color: #FFF; text-align:center; box-sizing: content-box;}
#login .button {background: #3366cc; }
#login .button:hover {background: #3872e8;} 
#login a, #login .links {color: #FFF;}
#login .links a {text-decoration: none; font-size: .9em;  font-weight: 300; color: #FFF; padding:0 .5em; }
#login .links a:hover {text-decoration: underline; }
#login .fa {font-size: 1.1em; padding: 0 .5em;}

#menu-toggle, #login-toggle {display: block; position: absolute; margin: 4px; z-index:9999; border: 0;}
#menu-toggle {left: 0;}
#login-toggle {display: none; right: 0;}
.btn-primary {background: #890B0F;}
.btn-primary:hover {background: #9E373A;}

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

#menu-toggle, #login-toggle {display: block; position: absolute; margin: 4px;}
#login-toggle {right: 0;}

#tab {display:inline-block; float: right; position: relative; z-index: 200; top: 84px; right: 0}
#tab ul {list-style: none; padding: 0; margin: 0;}
#tab a {display: block; text-decoration: none; color: #A6A6A6; font-weight: 300;}
#tab a span {vertical-align: middle;}
#tab-inner > ul > li {display: inline-block;}
#tab-inner > ul > li > a {padding: 0 1em; line-height: 40px; font-size: 1em; font-weight: 300; text-transform: uppercase;}
#tab-inner > ul > li:hover, #tab-inner > ul > li > a.selected {background: url(../images/layout/bkg-tab.gif) center repeat-x; color: #FFF; border-top-right-radius: .4em;  border-top-left-radius: .4em;}
#tab-inner > ul > li:hover a{color: #FFF;}

#navigation {position: relative;  z-index:200;}
#navigation #nav{display: block; float: right;}
#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; height: 60px;}
#navigation-inner > nav > ul > li > a {padding: 0 2em;  line-height: 60px; font-size:.9em; text-shadow: 1px 2px 2px #212121;}
#navigation-inner > nav > ul > li:hover {background-color: #890B0F;}
#navigation-inner > nav > ul > li:hover > ul {background-color: #8B181C;}
#navigation ul ul {display:none; position: absolute; width: 200px;}
#navigation ul ul a {padding: .5em 1em; border-bottom:1px solid #A3ABBE}
#navigation ul ul a:hover {background-color: #9E373A;}

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

.top-links, #search {display: inline-block; position: relative; float: right; top: 1.5em;}
.top-links {padding: 0;}
.top-links ul {display: inline-block; list-style: none; padding: 0; margin: 0; line-height: 30px;}
.top-links li {display: inline-block; color: #4f4f4f; text-transform: uppercase;}
.top-links li a {display: block; text-decoration: none; font-size: .7em; padding: 0 .5em;}
.top-links li a{color: #4f4f4f}
.top-links a:hover {color: #8b181c;}
	
#search {background: #4f4f4f; border:1px solid #4f4f4f; }
#search button {background-color: #4f4f4f; color: #fff; font-size: 1.2em; height: 30px; width: 30px; border: 0; line-height: 20px;}
#search input[type=text]{height: 30px; color: #91939A; background: #FFF; 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;}	

.readmore, .article .readmore, #contact_form .submit_btn { box-shadow: 2px 2px 5px #3d3d45; background: #890B0F; border:1px solid #FFF; display:inline-block; color:#FFF; font-size:1em; 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: #9E373A; text-decoration: none; color:#FFF}

.slideshow {position: relative; width: 100%;  padding: 2em 0; }
.carousel, .slides-pagination {list-style: none; padding: 0; margin: 0; position: relative; z-index: 10;}
ul.carousel {margin:0; padding: 0!important}
.carousel li {background-position: center; padding: 0!important; margin:0 !important; width: 100%; height: 450px; z-index:1; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;}
/*.carousel-img {display:block; width: 100%; height: auto;  z-index:10; position:absolute; }*/
.carousel-content {background-color: rgba(79,79,79,.8); position:absolute; 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{display:block; color: #FFF; font-size:.6em; font-weight:300; text-shadow: none;}
.carousel-content p{padding: 0  1em; color: #FFF;}
.carousel-content .readmore{background: #4f4f4f; width: 100%; border:0; font-size: .9em; font-weight:400; box-shadow: none; }
.carousel-content .readmore:hover{background: #890B0F}
.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 #4F4F4F; margin: 0 6px;}
.slides-pagination li.selected a {background-color: #4F4F4F;}
.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.png)}
#main-inner {padding-top: 30px; padding-bottom: 30px;}
#main-section-2 {background: url(../images/layout/footer-image.jpg)  fixed top no-repeat; left: 0px; top: 0px; -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover; padding:0;}
#content {margin: 0;} 
#products{background: #ebebeb; padding: 4em;}

.photo {width: 100%; max-width: 400px; height: auto; border-radius: .4em;}
.photo-sm {width: 100%; max-width: 150px; margin-top: 20px; margin-bottom: 10px;}

#text {}
#text h2 {float: left; width: 30%;}
#text h2 span {display: block; font-size: .7em;}
#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;}

#banner {background: url(../images/layout/bkg-nav.gif) top repeat-x; border-top: 5px solid #890B0F; border-bottom: 5px solid #890B0F; height: 65px; padding: 0; margin: 0 !important; z-index: 1;}
#banner-inner{}

#links {padding:1em 0}
#links h3{margin-bottom: 1em}
#links ul {list-style: outside none none; margin-left: 0; padding: 0}
#links li{padding-bottom:.5em; font-size: .9em;}
#links .col-sm-3, #links .col-sm-4 {border-right:1px solid #8f8d8d; padding: 0 3em; min-height: 250px;}
#links .last {border: 0}

#weather-module .current-conditions, #weather-module #forecast {background-color: transparent !important;}

#accent-line {background: #890B0F; white-space: nowrap; height: 4px;}
#accent-line .color-bar { 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%;}

.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: #671619;}
.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 .ui-tabs-nav, .ui-tabs .ui-tabs-nav li {margin: 0; padding: 0;}
.ui-tabs .ui-tabs-nav li {background: #4f1113; border-bottom: 1px solid #d51f24; border-radius: 0 !important; width: 50%;}
.ui-tabs .ui-tabs-nav li:first-child {border-right: 1px solid #d51f24 !important;}
.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: #671619 !important; border-top: 1px solid #d51f24 !important; border-radius: 0 !important;}
.ui-tabs .ui-tabs-panel {padding: .2em .8em;}
.ui-widget-content a {}

.back-to-top {  position: fixed;    bottom: 2em; right: 0px;  text-decoration: none; color: #000000;  background-color: rgba(0,85,165,.9);  font-size: 12px;  padding: 1em; display: block;}
.back-to-top:hover {       background-color: rgba(135, 135, 135, 0.50);}

#footer *, #links *{color: #FFF; font-weight: 300;}
#footer {font-size: 90%;}
#footer-inner {padding: 30px 0;}
#copyright {float: left;}
#fdic-ehl {float: right;}
#copyright a, #fdic-ehl a{padding:0 1em;}

/**************** bootstrap overrides ****************/

.table > tbody > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 0; color: #890B0F; border-bottom: 1px solid #890B0F;}
th span {font-size: .8em;}

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

@media (max-width: 767px) {
	#header {height: 50px;}
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none; position: absolute; width: 100%;}
	#login {float: none; width: 100%; padding:0; margin: 0; top: 50px; left: 0}
	#login-inner {width: 100%;}
	#login h2, #login .bttn {float: none;}
	#logo {float: none; text-align: center;  top: 5px;}
	#logo a {display: block; width: 200px; height: 40px; background-position: center; background-size: contain; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	/* first level */
	.full-menu {display: none;}
	.mobile-menu {display: inline-block;}
	
	#login-toggle {display: none !important;}
			
	#navigation {background: #231F20; top: 50px;}		
	#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 {color: #FFF; font-size: 1em; line-height: 40px; }
	#navigation ul ul {display:none; position: relative; width: 100% !important;}
	#navigation ul ul a {font-size: .9em; padding: .3em 1em .3em 2.5em}
	
	#banner { background-size: contain; height: 30px;}
	#banner-inner {padding:0;}
	#banner-inner ul, #search, .top-links {display: none;}
	
	.slideshow {width: 100%; float: none; }
	ul.carousel {margin: 0;}
	.carousel li {height: 200px;}
	.carousel-content {font-size: .5em;}
	
	#links .col-sm-3, #links .col-sm-4 {padding: 0 2em; min-height: auto;}
}

/**************** 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; top: 8px;}
	#logo a {display: block; background-position: center; width:400px; height: 75px; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	#login {position: absolute; width: 100%; right: 0; top: 160px; left: 0; right: 0;}
	#login-inner {width: 100%;}
	#login-toggle {display: none !important;}	
	/* first level */
	.full-menu {display: none;}
	.mobile-menu {display: inline-block;}
	
	#navigation {position: absolute; background: #231F20; padding-top: 50px; width: 30%; top: 0; 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}
	
	#banner { background-size: contain; height: 30px;}
	#banner-inner {padding:0;}
	#banner-inner ul {display: none;}
	#search, .top-links {position: relative; top: 100px;}
	.top-links { float: left;}
	
	.slideshow {width: 100%; float: none; }
	ul.carousel {margin:0;}
	.carousel li {height: 300px;}
	.carousel-content {font-size: .7em;}
	
	#links .col-sm-3, #links .col-sm-4 {padding: 0 1em;}
}

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

@media (min-width: 992px) and (max-width: 1199px) {
	#login .links a {text-decoration: none; font-size: .9em;  font-weight: 300; color: #FFF; padding: 0; }
	.long-text {top: 10em;}
}