@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: #989899; font-size: 18px;}
h1{color: #424242; font-size: 2.5em; font-weight: 300;}
h1 span{display: block; color: #0076cc; font-weight: 700;}
h2 {color: #862633; font-size: 1.8em; font-weight: 300;}
h2 span{display: block; margin-bottom: 2rem; font-size: .7em;}
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;
}
#tabs hr {margin: 0;}
.readmore, .article .readmore, #contact_form .submit_btn { box-shadow: 2px 2px 5px #3d3d45; background: #862633; border:1px solid #FFF; display:inline-block; color:#FFF !important; 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: #993333; text-decoration: none; color:#FFF}
/**************** 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: 500px; height: 115px; 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; height: 0; margin: 0 auto; z-index: 100; top: -30px; left: 2em;}
#login-inner { background: #232428; padding: 0; width: 250px; border-radius: .5em;}
#login iframe {width: 90%; height: 50px; margin: .5em .5em 0 .5em;}
#login h2 { padding: .5em 1em; margin: 0; font-size: 1.3em; font-weight: 300; color: #FFF; border-bottom:1px solid #FFF; line-height:25px;}
#login h2 a{color: #FFF;}
#login .links { background: #a7a8aa; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; padding: 0 0.5em; clear: both; display: block; color: #FFF; margin: 0}
#login .links a { text-decoration: none; font-size: .9em;  font-weight: 300; color: #FFF; padding:0 .3em; }
#login .links a:hover { text-decoration: underline; }
#login .readmore  {border:0; border-radius: .3em; padding: .2em 0; width: 90%; color: #FFF; font-size:1.2em; text-align:center; box-shadow: none;}
.button { background: #862633; }
.button:hover {background: #993333;} 

#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; border: 0;}
.btn-primary:hover {background: #9E373A;}
.btn-default {border:0;}

/* 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;}
#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: rgba(255,255,255,.25);}
#navigation-inner > nav > ul > li:hover > ul {background-color: rgba(255,255,255,.25);}
#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: #979798; text-transform: uppercase;}
.top-links li a {display: block; text-decoration: none; font-size: .7em; padding: 0 .5em;}
.top-links li a{color: #979798}
.top-links a:hover {color: #862633; text-decoration: underline;}
	
#search {border:1px solid #979798; border-radius: .5em; }
#search button {background: transparent; color: #4f4f4f; font-size: 1em; width: 30px; border: 0; line-height: 15px;}
#search input[type=text]{height: 30px; color: #91939A; 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;}	

.slideshow {max-width: 100%; position: relative;}
.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: 350px; max-height:350px; 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(35,36,40,.6); position:absolute; width: 100%; text-align: right; 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: #B7B8B9; font-size:.7em;}
.carousel-content p {padding: 0  1em; color: #FFF; font-weight: 400; text-shadow: 1px 1px 2px #212121;}
.carousel-content .readmore{background: #232428; width: 100%; border:0; font-size: .9em; font-weight:400; box-shadow: none; }
.carousel-content .readmore:hover{background: #862633}
.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: #121212  /*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*/;}
#main-section-3 {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;}

#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: #862633; min-height: 5px; padding: 0; margin: 0 !important; z-index: 1;}
#banner-inner{}

#photos {padding: 2em 0;}
#photos img {width: 160px; height: 160px; border-radius: 6px;}
.photo-sm {width: 100%; max-width: 350px; height: auto;}

#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; text-align: center;}
#links .col-sm-3, #links .col-sm-4 { padding: 0 3em; min-height: 250px;}
#links .last {border: 0}

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

.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 {border-top: 4px solid #862633; 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 ****************/
.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-tabs .ui-tabs-nav .ui-tabs-anchor {background: #525252; border-top-left-radius: .2em; border-top-right-radius: .2em; color: #FFF !important}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-state-active {background: #862633 !important; border: 0;}
.ui-dialog {width: 700px !important; background: #fff !important; padding: 1em; border:1px solid #e1e1e1; box-shadow: 2px 2px 5px #3d3d45; z-index:9999}
.ui-widget-content a {}


.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 #525252;}
.table > tbody > tr > th, .table > thead > tr > td, .table > thead > tr > th {border-top: 0; border-bottom: 2px solid #525252; color: #862633; font-size: 1.1em; font-weight: 400; text-align: none; vertical-align: bottom;}
th {color: #FFF; text-align: inherit !important;}
th span {font-size: .8em;}
.text-right {text-align: right !important;}
/**************** handheld definitions ****************/

@media (max-width: 767px) {
	#header {height: 50px;}
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none; position: absolute; width: 100%; background: #fff;}
	#login {float: none; width: 100%; padding:0; margin: 0; top: 50px; left: 0}
	#login-inner { width: 100%; margin: 0; text-align: center;}
	#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-inner ul, #search, .top-links {display: 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: 100px; left: 0; right: 0;}
	#login-inner {width: 100%; float: right;}
	#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;}
	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) {
	
}