@import url(http://fonts.googleapis.com/css?family=Inder:400,700);
@import url(../css/slicknav.css);
@charset "UTF-8";
/*****************************************************************/
/*                            the basics                         */
/*****************************************************************/

body {
  margin: 0;
  padding: 0;
  background-color:#000; 
}
body, p {	
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #1d1d1c;  
  }
  
a img {border: none;}
img {outline:none;}

/*****************************************************************/
/*                         text stuff                            */
/*****************************************************************/

h1 {
  font-family: 'Inder', sans-serif;
  font-size: 40px;
  color:#6b3d1c; 	
}	
h2 {
  font-family: 'Inder', sans-serif;
  font-size: 30px;
	line-height:60px;
  text-transform: uppercase;
  color: #000;
  margin: 20px 0 20px 0; 
}
h3 {font-size:24px;line-height:34px;}
	
.small {
  font-size: .16px;
  color: #fff;
}

.pad {
  padding: 0 6px 0 6px;
  }
  
ul, ol, li {
	list-style: none;
}

.large {font size:22px;font-weight:bold;line-height:32px;}
  
/*****************************************************************/
/*                         links stuff                           */
/*****************************************************************/

a:link, a:visited {
  color: #6b3d1c;
  text-decoration: underline;
}
a:hover {
  color: #000;
}

a.bot:link, a.bot:visited {
  color: #fff;
  text-decoration:none;
}
a.bot:hover {
  color: #c3996e;
  text-decoration:none;
}

a.name:link, a.name:visited, a.name:hover {
  color: #fff;
  text-decoration: none;
  }
#pgtitle {
	margin: 0;
	padding: 0 20px 0 0;
	white-space: nowrap;
	float: left;	
}

#pgtitle h1 {
	color: #fff;
	font-size: 17px;
	line-height: 46px;
	text-indent: 20px;
	margin: 0;
	padding: 0;
}
.small a {
	color:#fff;
	text-decoration:underline;
}
.small a:hover {
	text-decoration:none;
}
/* =========== top nav ====== */
.slicknav_menu {
	display:none;
}
.navigation {	
	width:98%;
	margin: 0;
	padding-right: 2%;
	background-color: #000;
	z-index: 30;
}
#menu {
	width:100%;
	height: 78px;
	margin: 0 auto;
	padding: 0;	
}
#menu li a {
	float:right;
	font-size: 1.25em;
	color: #fff;
	line-height: 1.875em;
	padding: 20px;	
	text-transform: uppercase;	
	text-decoration:none;
}
#menu li a:hover, #menu li.active a {
	background: #6b3d1c;
	color: #fff;
	text-decoration:none;
	-webkit-transition: background-color 500ms ease-out;
	-moz-transition: background-color 500ms ease-out;
	transition: background-color 500ms ease-out;
}

/*****************************************************************/
/*                           layout stuff                        */
/*****************************************************************/
#wrapper {
	width: 100%;
	margin: 0 auto;
}

.banner {
	width: 100%;	
	text-align: center;
	margin: 0 auto;
	background:#000;
	z-index: 10;
}
.container {
	width: 90%;
	min-height:400px;
	margin: 0 auto;
	padding: 3% 5% 3% 5%;
	color: #fff;
	background: url(../images/bg.jpg) repeat;
}
#titleBox {
  position:absolute;
  float:left;
  padding: 20px;
  margin: 120px 0 0 0;
  width: 380px;
  height: 150px;
  background-color: #000; 
  text-align:center;
  z-index: 20; 
  }  
.logo {	
	float:left;
	padding:.5% 0 .5% 2%;
}
.logo img {
	width:136px ;
	height:55px ;		
}
.card {
  width: 180px;
  padding: 0 12px 20px 0;
  float: left;
  text-align: center;
  }

.clear {
  clear: both;
}
  
#footerwrapper {
  width: 96%;	
  margin: 0 auto;
  background-color: #000; 
  padding: 2%;
  }
.footercontainer {
	width: 100%;
	margin: 0 auto;	
}
.footercontainer p {
	color: #fff !important;
	font-size: 16px;
	padding: 0;
	margin: 0;
	line-height: 1em;
}

.imgpad {
  float: left;
  padding: 0 15px 20px 0;
  }
  
.imgpad2 {
  float: right;
  padding: 0 0 20px 15px;
  }
  
.cPad {
  padding: 20px;
  }
  
/* ========================================= Slider Styles ============================================= */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
.rslides p {
  font: 1.375em;
  line-height: 1.750em;
}  
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/* ============== RESPONSIVE CSS =============== */
@media only screen and (min-width: 1020px) and (max-width: 1320px) {
.container, #header .container {
	max-width: 1020px;
	width: 100%;
}
}
@media only screen and (min-width:750px) and (max-width:1020px) {
.container, #header .container {
	max-width: 750px;
	width: 100%;
}
	.pics img {width:90%;height:auto;}
}
 @media only screen and (max-width:750px) {
.container, {
	width: 96%;
}
.logo {	
	width:98%;
	text-align:center;
	padding:2% 0 .5% 2%;
}
#menu {
	display:none;
}
.slicknav_menu {
	display: block; margin:0;
}
.navigation {
	background-color:#000; width:96%; padding:5px 2%; display:inline-block;
}
#titleBox, #titlebox2 {
  position:relative;
  width:100%;
  margin:78px auto 0 auto;
  padding:0;
  text-align:center; 
  }
h1 {font-size: 28px;}
h2 {font-size:22px;line-height:30px;}
h3 {font-size:20px;line-height:30px}
#footerwrapper {
	text-align:center;
}
.banner{ display:inline-block; margin:0 0 20px;}
}