/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------
maroon: #c3262e;
gray: #eee;
*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
	font-family: 'Roboto Slab', serif !important;
	font-size:16px; 
	line-height: 28px; 
	color: #000; 
	font-weight:500;	
	height:100%;
	background:#000; 

}

h1 {font-size:35px; font-weight:400; line-height:40px; letter-spacing: 1px; font-family: 'Roboto Slab', serif;}
h2 {font-size:28px; font-weight:400; line-height:40px; letter-spacing: 1px; font-family: 'Roboto Slab', serif; text-align: center;}
h3 {font-size:25px; letter-spacing: 1px; text-transform: uppercase; color:#7da900;font-family: 'Roboto Slab', serif;}
h4 {font-size:20px; line-height: 27px; letter-spacing: 1px; font-weight:400; text-transform: uppercase; font-family: 'Roboto Slab', serif;}

a:link, a:visited, a:active {text-decoration:none;color:#985B47;}
a:hover {text-decoration:none; color:#985B47;}
strong { font-size:16px;}

.right{float: right; text-align:right;}
.left{text-align:left;}

.pad{padding: 2% 0;}

hr{border:#000 1px solid;}

/*--- HEADER STYLES --------------------------*/
header {width: 100%; background:#000; height:209px;}
.head {width: 100%; background:url(../siteart/header-bg.jpg) repeat-x; display:inline-block; height:155px;}

.logo { display:inline-block; width: 40%; position:absolute; }
.logo img {max-width:235px; width: 100%; vertical-align: middle; padding: 5px 5px; display: inline-block;}
.logo-text {display:inline-block; vertical-align: top; padding-top:20px;}
.logo-text h1 { text-align: left; color:rgba(152,91,71,1.00);font-size:24px; line-height: 24px; }
.head-right {width:55%; display:inline-block; text-align: right; float:right;}
.contact-bar {float:right; width: 100%; text-align: right; vertical-align: middle; margin-top: 10px;}
.contact-bar p a{text-align: right; display:inline-block; vertical-align: middle; color:#fff; padding-right:10px;font-family: 'Roboto Slab', serif; font-size:18px;}
.contact-bar p a:hover {color: #985B47;}
.contact-bar p:hover {color: #985B47;}
.contact-bar p {text-align: right; display:inline-block; vertical-align: middle; color:#fff; padding-right:10px;font-family: 'Roboto Slab', serif;font-size:18px;}
/*---BODY--------------------------------*/
.pg-bg {background: url(../siteart/body-bg.png); background-attachment: fixed;}
.width {width: 75%; margin: 0 auto;}
.hero-img {width: 100%; z-index: 9; margin-top:-28px;}
.blk-banner {width: 100%;}
.blk-banner h2 {color:#fff; padding:10px 0; }

/*INV LANDING*/
.bg-holder {background:#000; width: 100%; padding:40px 0;text-align: center; margin: 0 auto;}
.bg-holder h2 {color:#fff;padding:10px 0;}
.equip-button{
	position:relative;
	display:inline-block;
	width:19%;
	text-align:center;	
	vertical-align:top;
	overflow:hidden;
	transition:all 0.3s ease-out;
}

.equip-button img{
	width:100%;
	display:block;
	opacity:.5;
}

.equip-button:hover img{opacity:1; transition:all 0.3s ease-in;}

.equip-button h4{
	position:absolute;
	top:20%;
	bottom:20%;
	left:0;
	right:0;
	font-size:24px;
	text-transform:uppercase;
	font-weight:bold;
	color:#fff;
	text-align:center !important;
}

.equip-button:hover h4{text-shadow:1px 1px 3px #000; transition:all 0.3s ease-in;}	




/*-------- FOOTER STYLES ----------------*/
footer {background:#000;}
.footer {background:#000 ; text-align: center; padding:10px 0; border-top:2px solid #000; color:#fff;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{text-decoration:underline; font-family:Arial, Helvetica, sans-serif;font-size:13px;}
a.footerlink:hover {text-decoration:none; font-family:Arial, Helvetica, sans-serif;font-size:13px;}

.footertext{font-family:Arial, Helvetica, sans-serif;font-size:13px; color:#fff;}

.smallfootertext{font-family:Arial, Helvetica, sans-serif;font-size:10px; color:#fff;}

.divfooter {max-width:450px; width:100%; text-align:center; margin:0 auto;}


/*----Inventory Styles - Stays at bottom of css----*/
.inv-container {margin:30px 5%; padding:30px; background:#fff; }


/*-------- RESPONSIVE STYLES --------*/
@media screen and (max-width:1500px){
	.equip-button {width:45%;}
}
@media screen and (max-width:1020px){
	header {width: 100%; background:#000; height:auto;}
	.width {width:95%;}
	.logo {width:100%; position:relative; text-align: center;}
	.head-right {width:100%; float:none; text-align: center; height: 75px;}
	.contact-bar {float:none; text-align: center; margin-bottom:2%;}
	.contact-bar p { padding: 0 0; text-align: center;}
	.contact-bar p a {text-align: center;}
	.hero-img {margin-top:2%;}
	.blk-banner h2 {font-size:22px;}
}
@media screen and (max-width:900px){
	.head {height: auto;}
}
@media screen and (max-width:649px){
	.blk-banner h2 {font-size:16px;}
}

@media screen and (max-width:420px){

	.logo-text h1{text-align: center;}
	.contact-bar p a{font-size:15px;}
	.contact-bar p {font-size:15px;}
	.equip-button {width:100%;}
	.divfooter {max-width:300px; width: 100%;}
}
@media screen and (max-width:350px){
	.contact-bar p a{font-size:14px;}
	.contact-bar p {font-size:14px;}
}