/*===================== 
	Color information
	
	- Red:#af021e;
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	@Font-Face 
=======================*/


/*===================== 
	base styles 
=======================*/

html {
	font-family: Arial, sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
	}

body {
	padding:0;
    margin: 0;
	}

svg:not(:root) {overflow: hidden;/*reset*/}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	border-style: solid;
    height: 0;
	} 

img { border: 0;} 
	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {
		font-size: 24px;
		color:#af021e;
		padding:2% 0;
		font-weight:bold;
	}
	h1.home{
		padding:0 0 2% 0;
	}
	h2 {
		font-size: 21px;
		color:#af021e;
		padding:2% 0 1% 0;
		font-weight:bold;
	}
	h2.callout {
		font-size:28px;
	}
	h3 {
		font-size: 18px;
		color:#af021e;
		padding:2% 0 1% 0;
		font-weight:bold;
	}
	h4{
		color:#fff;
		font-weight:bold;
		font-size:16px;
		padding:0 0 1% 0;
	}

p {
	margin: 0;
	padding:0 0 1% 0;
	line-height: 24px;
	font-size:18px;
	color:#000;
	}
.frontpage p{ 
	line-height: 35px;
}

b, strong {
    font-weight: bold;
	}
ul{
	margin:1% 0 1% 4%;
	padding:0;
}
ul li{
	padding:5px 0;
	margin:0;
	list-style-type:disc;
}

/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/
	}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #af021e; 
    text-decoration:underline;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		color: #000;
		}  
a.videos{
	text-align:center;
	color:#fff;
	font-size:48px;
	font-weight:bold;
	padding: 6% 0 5% 0;
	display:block;
	text-decoration:none;
}
a.videos:hover{
	opacity:.8;
}
a.red_btn{
	width:29%;
	padding: 1% 0;
	margin: 2%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0407+0,af021e+100 */
	background: #cc0407; /* Old browsers */
	background: -moz-linear-gradient(top, #cc0407 0%, #af021e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #cc0407 0%,#af021e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #cc0407 0%,#af021e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0407', endColorstr='#af021e',GradientType=0 ); /* IE6-9 */
	float:left;
	display:block;
	color:#fff;
	text-align:center;
	font-size:16px;
	text-decoration:none;
}
a.red_btn:hover{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#af021e+0,cc0407+100 */
	background: #af021e; /* Old browsers */
	background: -moz-linear-gradient(top, #af021e 0%, #cc0407 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #af021e 0%,#cc0407 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #af021e 0%,#cc0407 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af021e', endColorstr='#cc0407',GradientType=0 ); /* IE6-9 */
	color:#fff;
}
a.call_btn{
	display:block;
	text-decoration:none;
	background: #af021e;
	color:#fff;
	padding:1.5% 1%;
	margin: 4% 0 1% 0;
	width:50%;
	text-align:center;
}
a.call_btn:hover{
	background: #D30224;
}

/** for shopping cart **/
.hs-btn.hs-highlighted {background-color: #af021e; color: #fff !important;}


/*===================== 
	header styles 
=======================*/
.disclaim-wrap {
    text-align: center;
    padding: 20px 0;
	background: #f8f8f8;border-bottom: 1px solid #eee;
}
.disclaim-wrap h2 {padding: 0;width: 90%;margin: 0 auto;}


.top_wrap {
	width: 100%;
	margin: 0;

	}

.main-header {
	margin: 0 auto;
	padding:0;
	width: 100%;
	background: #fff;
	position:relative;
	z-index: 900;
	box-shadow: 0 0 5px 2px rgba(0,0,0,.75);
	}

.logo img {    max-width:100%;width: 350px;}
div.top_contact{
	display:block;
	text-align:right;
	float:right;
	padding:.5% 1% 0 0;
}
.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    padding: 10px 50px 0;
    width: 100%;
    top: 0;box-sizing: border-box;
    left: 0;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.75);
    z-index: 9999;
}
.header .logo {
    width: 25%;
    margin-bottom: 5px;
}
.header .header-right {
    width: 75%;
}
/*===================== 
	nav styles 
=======================*/

#menu-button{ /* hiding responsive menu button */
	display: none;
	}
nav.mobile { /* hiding responsive menu */
	display:none;
}

/***** Start of primary nav ******/
nav.primary {
	display:block;
	float:right;
	padding:.5% 0 0 0;
	margin:0;
	clear:right;
	}
	nav.primary ul {
		    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
		}
		nav.primary ul li {
			display:block;
			list-style-type:none;
			float:left;
			padding:0;
			margin:0;
			}
			nav.primary ul li a {
				display:block;
				text-decoration:none;
				font-size:21px;
				line-height: 2;
				font-weight:bold;
				color:#000;
				padding:5px 20px;
				border-left: #000 solid 1px;
				}	
			nav.primary ul li a:hover {
				color:#af021e;
				}
			nav.primary ul li li a { /* appearance of the sub-level links */
				border-left: none;
				display:block;
				background:#fff;line-height: 14px;
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px #555 solid;
			}
			nav.primary ul li li a:hover { /* appearance of the sub-level links on hover */
				background:#af021e;
				color:#fff;
			}
/* Optional-use, Begin targeting styles of first and last links */
nav.primary ul li:last-child  { /* Optional-use, this targets last li */
}
nav.primary ul li:last-child a {  /* Optional-use, this targets last link */
}
nav.primary ul li:first-child a { /* Optional-use, this targets first li */
	border-left: none;
}
  
/* Optional-use, targeting styles of first and last sub-level links*/
nav.primary ul li li:last-child  {
}
nav.primary ul li li:last-child a {
	border-bottom: none;
}
nav.primary ul li li:first-child a {
}
/* Optional-use, End targeting styles of first and last links */
  
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    display: none;
    position: absolute; 
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
}
  
nav.primary ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
  
nav.primary ul li:hover > ul {  
    display: block;
    z-index: 100;
}
  
nav.primary ul ul li {
    float: none; 
    position: relative;
    margin:0;
}
/******** End of primary Nav ***************/
/************ Inventory Side Bar ***************/
ul.equip-list{
	margin:0;
	padding:0;
	width:20%;
	float:left;
	display:inline-block;
	position:fixed;
	padding:3% 0 0 0;
	z-index:700;
}
ul.equip-list li{
	margin:0;
	padding:0;
	list-style-type:none;
	display:block;
	background-color: #cc0407;
	
}
ul.equip-list li a{
	padding: 2% 0 2% 2%;
	color:#fff;
	display:block;
	font-size:16px;
	text-decoration:none;
	border-bottom:1px solid #fff;
}
ul.equip-list li a.dropdown{
	background-image:url(../images/arrow_down.png);
	background-repeat:no-repeat;
	background-position: 97% center;
}
ul.equip-list li a:hover{
	background-color:#000;
}
ul.equip-list li ul li a{
	display:block;
	padding: 1.5% 0 1.5% 7%;
	background-color: #D93739;
}

/***********************************************/

/******** Equipment Navigation Icon
 ***********/

#inv-button{
	display:none;
}

/**********************************************/

/*===================== 
	content styles 
=======================*/
.hosted-content{
	display:inline-block;
	float:right;
	width:70%;
	padding: 3% 0 0 20%;
}
/*** Equipment Callout Buttons **/
figure.category{
	display: inline-block;
	zoom:1; 
	*display:inline;
    	float: left;
	margin: 1% 4.5%;
	width: 11%;
}
figure.category img{
	width:80%;
	margin:auto;
	display:block;
}
figure.category figcaption{
	color:#af021e;
	font-weight:600;
	font-size:16px;
	text-align:center;
	padding:2% 0 5% 0;
}
figure.category:hover{
	opacity: .7;
}
/************************************************/

img.dlr_img{
	display:block;
	float:left;
	width:20%;
	margin:2%;
}
	
/*===================== 
	slideshow styles 
=======================*/
.hero{
	width:100%;
	overflow:hidden;
	position:relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	padding:5% 0 0 0;
}

video.hero_vid{
	width:100%;
}

.hero_feature{
	width:100%;
	margin: auto
}

.cycle-slideshow img{
	width:102%;
}


/*===================== 
	layout styles 
=======================*/

.wrap {
	width: 100%;
	margin: 0;
	background-color: #fff;
	}
.gray_wrap {
	width: 100%;
	margin: -5px 0 0 0;
	background:url(../images/site-bg.jpg) repeat;
	}
.callout_banner{
	width:100%;
	margin:0;
	background:url(../../../assets/Uploads/bottom_bg.jpg) no-repeat;
	background-size:cover;
}
.container {
	max-width: 1100px;
	margin: 0 auto;
	padding:6% 2%;
	box-sizing:border-box;
	}
.container-home {
	max-width: 1100px;
	margin: 0 auto;
	padding:6% 2%;
	box-sizing:border-box;
	}
.container-wide {
	max-width: 1300px;
	margin: 0 auto;
	padding:6% 0;
}
	
.feature-col{
	float:left;
	display:block;
	width: 48%;
	margin:4% 1%;
}
	
.col-1-6 { width: 16%;}
.col-1-5 { width: 20%;}
.col-1-4 { width: 24%;}
.col-1-3 { 
	width: 29%;
	float:left;
	padding:2%;
	}
	.col-1-3 iframe{
		width:100% !important;
		height:200px;
	}
.col-1-2 { 
	width: 45%;
	float: left;
	padding:5% 2%;
	}
.col-2-3 { width: 65%;}
.col-3-4 { width: 75%;}

/*===================== 
	footer styles 
=======================*/

footer {
	margin: 0;
	width: 100%;
	background-color:#333;
	}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:11px;
	color: #ccc;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:11px;
		color: #ccc;
		}
.footertext {
	font-size:11px; 
	color:#ccc;
	}

.smallfootertext {
	font-size:11px; 
	color:#666;
	}

.divfooter {
	max-width:490px; 
	text-align:left; 
	float:left;
	padding:2% 0 0 3%; 
	color:#666;
	}
.footer-content{
	float:right;
	color:#fff;
	padding:1% 3% 1% 0;
}
.footer-content p{
	color:#fff;
	font-size:14px;
}
	
/*================================ 
		Responsive styles 
==================================*/
@media screen and (max-width: 1380px)  {
	ul.equip-list ul{
		margin:0;
		padding:0;
		position:absolute;
		left:100%;
		top:25%;
		display:block;
		width:200px;
		z-index:700;
		}	
	ul.equip-list li ul li a{padding: 1% 0 1% 7%; font-size:13px;}
	.hero {padding: 7% 0 0 0;}
}

@media screen and (max-width: 1200px)  {
	nav.primary {
	padding:1.3% 0 0 0;
	}
	nav.primary ul li a {
		display:block;
		text-decoration:none;
		font-size:18px;
		font-weight:bold;
		color:#000;
		padding:1px 16px;
		border-left: #000 solid 1px;
	}
	ul.equip-list ul{top:12%;}
	ul.equip-list{padding:1% 0 0 0;}
	.hosted-content{padding: 1% 0 0 20%;}
	.hero {padding: 8% 0 0 0;}
}
@media screen and (max-width: 1070px)  {
	
	div.top_contact{
		display:block;
		float:none;
		margin:0 auto;
		padding:.5% 1% 0 0;
	}
	nav.primary {
		padding:1.3% 0 0 0;
		float:none;
		}
		nav.primary ul {
			padding:0;
			margin:0 auto;
			max-width:880px;
			}
	ul.equip-list{
		padding:8% 0 0 0;
		width:27%;
	}
	.hosted-content{
		padding: 8% 0 0 20%;
	}
	ul.equip-list ul{
		top:37%;
	}
	.container {
		padding:15% 2% 6% 2%;
	}
	.hero{
		padding:13% 0 0 0;
	}	
}

@media screen and (max-width: 980px)  {
	nav.primary{
		display:none;
	}
	div.top_contact {text-align: center;padding: 0;}
	.header .logo,.header .header-right {flex-basis: 100%;text-align: center;}
	/*==============================
		Mobile Nav Styles			
	================================*/	
	#menu-button{display: block; position: absolute; top: 0; left: 0; z-index: 1000;}
	#menu-button a{display: inline-block; padding: 25px; font-size: 24px; line-height: 1; color: #000;text-decoration: none;}
	
	nav.primary{display: none;}
	nav.mobile{display: block; position: fixed; top: 0; left: -250px; width: 250px; height: 100%; background: #333; z-index: 999999; overflow: auto;}
	nav.mobile .mobile_top{display: flex; align-items: center; justify-content: space-between; position: relative; padding: 10px 15px; border-bottom: 4px #AF021E solid;}
	nav.mobile .mobiletitle{font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff;}
	nav.mobile .menu-toggle{font-family: Arial, sans-serif; font-size: 24px; font-weight: 900; line-height: 1; color: #fff; padding: 5px;}
	nav.mobile .menu-toggle:hover{opacity: .5;}
	nav.mobile a {text-decoration: none !important;}
	nav.mobile i{position: absolute; right: 15px;}
	nav.mobile ul{list-style: none; font-weight: 400; margin: 0; padding: 0;}
	nav.mobile ul li{padding: 0;position: relative; border-bottom: 1px solid #444;}
	nav.mobile ul li a{        justify-content: space-between;text-decoration: none; display: flex; align-items: center; position: relative; font-size: 12px; padding: 12px 15px; font-weight: 700; text-transform: uppercase; color: #fff;}
	nav.mobile ul li a:hover{background: #AF021E;}
	
	nav.mobile ul ul ul li a{background: #444;}
	nav.mobile ul ul ul ul li a{background: #555;}
	/*********** End mobile nav ***********/
	
	img.logo{width:30%;}
	.feature-col{
		float:none;
		width: 100%;
		margin:0 auto;
	}
	div.buttons ul li a{
	color: #af021e;
	font-size: 24px;
	font-weight:bold;
	text-decoration:none;
	padding:1% 0 1% 18%;
	display:block;	
	}
	.col-1-2 { 
	width: 90%;
	float: none;
	padding:5% 2%;
	margin:0 auto;
	}
	a.videos{
	font-size:28px;
	padding: 6% 0 5% 0;
	}
	.divfooter {
	max-width:490px; 
	text-align:center; 
	float:none;
	display:block;
	margin:0 auto;
	padding:2% 0; 
	color:#666;
	}
.footer-content{
	float:none;
	color:#fff;
	padding:1% 0 2% 0;
	text-align:center;
	margin:auto;
	display:block
}
.footer-content p{
	color:#fff;
	font-size:14px;
}
ul.equip-list{
	margin:0;
	padding:0;
	width:100%;
	float:none;
	display:none;
	position:relative;
	padding:2% 0 0 0;
	overflow:auto;
}
ul.equip-list ul{
	margin:0;
	padding:0;
	position:relative;
	left:auto;
	top:auto;
	display:block;
	width:100%;
	z-index:700;
	}
ul.equip-list li ul li a{padding: 1% 0 1% 7%; font-size:14px;}	
.hosted-content{
	display:block;
	float:none;
	width:90%;
	margin:auto;
	padding: 5% 0 0 0;
}
figure.category figcaption{font-size:14px;}
figure.category{
	display: inline-block;
	zoom:1; 
	*display:inline;
    float: left;
	margin: 2% 4%;
	width: 24%;
}

/******** Equipment Navigation Icon ***********/

#inv-button{
	display:block;
	width:100%;
	margin:5% 0 0 0;
	padding:2% 0;
}
a.inv-toggle{
	font-size:24px;
	font-weight:normal;
	text-decoration:none;
	padding:0 0 0 3%;
}

/**********************************************/

.hero{padding:14% 0 0 0; display: block;}

video.hero_vid{display:none;}

}
@media screen and (max-width: 710px)  {
	figure.category{width: 40%;}
	#inv-button{
		margin:10% 0 0 0;
		padding:2% 0;
	}
}
@media screen and (max-width: 630px)  {
	a.red_btn{
		width:45%;
	}
	img.dlr_img{
		width:43%;
	}
	.col-1-3 { 
		width: 46%;
	}
	#inv-button{
		margin:15% 0 0 0;
		padding:2% 0;
	}
	.hero{padding:15% 0 0 0;}
	h2.callout {font-size:21px;}
	.disclaim-wrap h2  {font-size: 18px;}
}
@media screen and (max-width: 430px)  {

	#menu-button{top:0;}
	
	img.logo{
		display:block;
		float:none;
		margin:0 auto;
		width:50%;
	}
	
	p {
		line-height: 21px;
		font-size:14px;
		}
	.frontpage p{ 
		line-height: 21px;
	}
	h1 {
		font-size: 21px;
		padding:0 0 2% 0;
	}
	a.videos{
	font-size:21px;
	padding: 6% 0 5% 0;
	}
	div.buttons ul li a{
	font-size: 18px;
	padding:2.8% 0 2.8% 28%;	
	}
	a.red_btn{
		width:90%;
	}
	.col-1-3 { 
		width: 95%;
	}
	ul.equip-list li ul li a{padding: 1.5% 0 1.5% 7%; font-size:14px;}
	.container {padding:28% 2% 6% 2%;}
	
	#inv-button{
		margin:20% 0 0 0;
		padding:2% 0;
	}	
	.hero{padding:25% 0 0 0;}
}
