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

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

* {font-family: 'Oswald', sans-serif;}
body {color:#666; background-color:#4a4d54; font-size:16pt; font-weight: 300}
p {}
a {color: #789848; text-decoration:none;}
h1 {color: #789848; font-size: 2.3em; font-weight: 300;}
h4 {font-family: 'Kalam', cursive; font-size: 1.5em;}
h5 {color: #789848; font-size: 1em; font-weight: 300;}
/**************** template definitions ****************/
#page {}
#header {background: #FFF; width:100%; height: 75px; position: fixed; z-index: 999; border-bottom:1px solid #75787B; top: 0}

#carousel, #main {background-color: #fff;}
#logo {float: left;}
#logo a {display: block; background: url(../images/layout/logo.png) no-repeat; background-size: contain; color: #FFFFFF; font-size: 2em; width: 300px; height: 75px; overflow:hidden; text-indent:-9999px;}


#login {display: none; float: right; position: relative; width: 300px; padding-top:1em; background: #7A003B; top: 0;}
#login iframe {width: 250px; height: 115px; margin: 0 1em;}
#login h2 {color: #FFF; margin: 0 1em 1em; font-size: 1.2em; line-height: 30px; }
#login .links {
	clear: both;
	color: #ccc;
	display: block;
	margin: 0 1em 1em;
	}

#login .links a {
	text-decoration: none;
	color: #FFF;
	font-size: .7em;
	}

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


#menu-toggle {background-color: #789848; float: left; border: 0;margin: 0; padding: 0 2em; right: 0; width: 100%; height: 40px; color: #FFF; line-height:40px; border-bottom: #FFF; border-radius:0 }
#menu-toggle:hover {background-color: #88ad51;}

.readmore{box-shadow: 1px 1px 2px #3d3d45; background: #789848; border-radius:5px; display:inline-block; color:#FFF; font-size:1em; font-weight:300; margin: 10px 0px; padding: .2em 1em; line-height: 1.6em; text-decoration:none;}
.readmore:hover { background: #75787B; color:#FFF; text-decoration: none;}

#navigation {display: block; width: auto; float:right; position: relative; z-index: 99; white-space:nowrap}
#navigation ul {list-style: none; padding: 0; margin: 0;}
#navigation a {display: block; text-decoration: none;}
#navigation a span {vertical-align: middle;}
#navigation-inner > nav > ul > li {display: inline-block;}
#navigation-inner > nav > ul > li > a {color: #75787b; font-size: .7em; padding: 0 1em; line-height: 75px; text-transform: uppercase;}
#navigation-inner > nav > ul > li > a:hover{color: #789848}
#navigation-inner > nav > ul > li:hover { background-color: none;}
#navigation-inner > nav > ul > li:hover > ul {background-color: #7A003B}

#banner { border-bottom:1px solid #D8D8D8; height:40px}
#banner ul {list-style: none; padding: 0; margin: 0;}
#banner ul li {display: inline-block; background: url(../images/arrow.svg) no-repeat scroll left top; padding: 0 2em; line-height: 40px; }
.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; background-position: center; padding: 0; margin:0 !important;	width: 100%; height: 100%; min-height:600px; 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;}
.carousel-content {width: 100%; height:600px; position:relative; z-index:100;}
#carousel-message { color: #FFF; text-align:center;}
#carousel-message h2 {position: relative; font-family: 'Slabo 27px', serif; font-size:2.5em; font-weight: 400; text-shadow: 1px 1px 1px #212121; top: 350px;}
#carousel-message span {color: #789848; font-family: 'Kalam', cursive;}
#carousel-message .readmore{font-size: .4em;}
.slides-pagination {text-align: center;position: absolute; z-index: 11; width: 100%; margin-top: -30px;}
.slides-pagination li {display: none;}
.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;}
a.slides-next , a.slides-prev {color: #FFF}
.slides-next {right: 0;}

#main-inner {background: #FFF; padding: 75px 0 0;}

.main-section{padding: 3em 0;}
.main-section span{color: #75787B; font-size: .8em;}
.sec-1 {text-align: center;}
.sec-2 {background: #d0dbbf;}
.sec-3 {background: #75787B; color: #e1e5ea;}


#content {} 
#products {padding:4em} 
#products img{display: block; position: relative; z-index:10;}
#products h3 {position: relative; height: 0; color: #333; font-size:1.5em; font-weight: 400; top: 50px; z-index: 99}

#links {padding:2em 0; text-align:center;}
#links h1{font-size: 5em; font-weight: 400; margin: 0; padding: 0}
#links h3, #links h4{color: #FFF; margin-bottom: 0}
#links ul {list-style: outside none none; margin-left: 0; padding: 0}
#links li a{color: #FFF; font-size: .8em;}
#links li a:hover{color: #789848;}

#links .col-sm-4 {border-right:1px solid #8f8d8d; padding: 0 1em 0 3em; height: 250px;}

.last {border-right: 0 !important;}

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

#footer *{color: #FFF;}
#footer .disclosures{font-size:1.2em}
#footer {font-size: 90%; border-top: 1px solid #8f8d8d;}
#footer-inner {padding: 30px 0;}
#copyright  {margin-bottom: 1em; text-align:center;}
#copyright a{padding: 0 1em; color: #789848;}
/**************** handheld definitions ****************/

@media (max-width: 767px) {
	#header {background: #4A4D54;}
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none; position: absolute; width: 100%; top: 75px;}
	#login{background:#36B1BF}
	
	#login, .carousel-content {float: none; width: 100%;}
	#logo {float: none; text-align: center;}
	#logo a {display: block; width: 200px; height: 40px; background: url(../images/layout/logo-white.png) center no-repeat; background-size: contain; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#navigation{background: #789848}
	#navigation ul {border-top:1px solid #FFF;}
	#navigation-inner > nav > ul > li {display: block;}
	#navigation-inner > nav > ul > li > a {color: #FFF; line-height: 40px; border-bottom:1px solid #D0DBBF}
	#navigation-inner > nav > ul > li > a:hover{color: #789848; background: #D0DBBF }
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	
	#main-section-2 {color: #FFF; background: url(../images/placeholder-img-full.jpg)  fixed top no-repeat;}
	
	#carousel-message{font-size: 50%}
	#main-section-1 img {width:100%; height: auot;}
	#footer-inner {padding: 30px;}
}

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

@media (min-width: 768px) and (max-width: 991px) {
	#header {background: #4A4D54;}
	#header-inner, #navigation-inner {padding: 0;}
	#navigation, #login {display: none; position: absolute; width: 100%; top: 115px;}
	#logo {float: none; text-align: center;}
	#logo a {display: block; background: url(../images/layout/logo-white.png) no-repeat;  background-size: contain; width: 200px; height: 75px; margin: 0 auto;}
	#copyright, #fdic-ehl {float: none; text-align: center;}
	#fdic-ehl {padding: 15px 0;}
	
	#navigation{background: #789848}
	#navigation ul {border-top:1px solid #FFF;}
	#navigation-inner > nav > ul > li {display: block;}
	#navigation-inner > nav > ul > li > a {color: #FFF; line-height: 40px; border-bottom:1px solid #D0DBBF}
	#navigation-inner > nav > ul > li > a:hover{color: #789848; background: #D0DBBF }
	#navigation ul ul {display:none; position: relative; width: 100%;}
	#navigation ul ul a {padding: .5em 1em .5em 2.5em;}
	#footer-inner {padding: 30px;}
}

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

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

@media (max-width: 640px ) /* 640 */ {
	
}