﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Montserrat', sans-serif; font-style:normal; line-height:normal;; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:20px;}
ul {padding:0 0;}
.clear {clear: both; height:0px; margin:0;}

h1 {font-size:30px; font-weight:600; text-transform:uppercase; color:#961011;}
h2 {font-size:26px; text-transform:uppercase; font-weight:600; margin-bottom:5px;}
h3 {font-size:22px; font-weight:400; text-transform: uppercase;}
h4 {font-size:18px; margin:5px 0; text-transform: uppercase;}
h5 {font-size:16px; font-weight:600;}
h6 {font-size:20px; font-weight:600; text-transform:uppercase;}

p {font-size:16px; line-height:1.8rem; margin-bottom:8px;}

a {text-decoration:none;}

/* BASIC STYLES */
body {background:#fff;}
#contentwrap {width:90%; margin:0 auto;}
#pagewrap {width:75%; margin:2% auto;}
#sitewrap {width:75%; margin:0% auto;}
#invwrap {width:75%; margin:10% auto 2%;}

/* HEADER */
header {padding:15px 0 0; width:100%;}
.logo {float:left; width:16%; margin-bottom:-20px; z-index:99999999;}
.logo img {width:100%;}
.headerright {float:right; width:75%; font-size:21px;  padding-top:3%; text-align:right; font-weight: 600;}
.headerright a {color:#000; font-weight:bold;}

/* SEARCH */
#searchwrap {background:url("../siteart/bg.png") no-repeat; background-size:cover; padding:30px 0; color:#fff;}

.search-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.search-form input {text-align:left; width:100%; color:#000; padding:5px 10px;}
.search-form input::placeholder, .search-form select::placeholder {color: black;opacity: 1;}

.search-form input.button, #search input.button:focus {width:24%!important; background: #961011; border:1px solid #006eab; font-size:16px; text-align:center; color:#fff!important;}
.search-form input.button:hover {background:linear-gradient(#961011, #8a0e0f);}
.formfield {width:24%; font-family: 'Montserrat', sans-serif; background:#fff;}
.search-form input.submit{padding:4px 10px;width:100%;font-weight:400;background:#961011; text-align:center;color:#fff;-webkit-appearance:none; font-size:16px; text-transform:uppercase;}
.search-form input.submit:hover{background:linear-gradient(#961011, #8a0e0f);cursor:pointer;box-sizing:border-box;}


.select-cont {
	padding:0px!important;
    border-radius: 0px!important;
    width:100%;
    background:#fff;
    box-sizing: border-box;
    position: relative;
}
.select-cont  select {
    -webkit-appearance: initial;
    -moz-appearance: initial;
    appearance: initial;
    width:100%;
    background-color:transparent;
    border:0px!important;
    outline:none!important;
    padding:5px 10px;
    box-sizing: border-box;
    color:#000; 
    position: relative;
    z-index: 2;
    cursor: pointer;
}
.select-cont i {
	position: absolute;
	z-index: 1;
	right: 8px;
	color: #000;
	top: 6px;
}

/* SCROLLING INVENTORY */
.scrolling-wrap {width:100%; height:90px; overflow:hidden; margin:8px auto;}
.scrolling{width:100%; height:92px;}


/* CONTENT STYLES */
.tagline {width:20%; left:40%; top:35%; margin:0 auto; background:rgba(0, 0, 0, 0.5); color:#fff; position:absolute; text-align:center; font-size:18px; font-weight: 600; z-index:999; line-height:2em;}
.tagline a {color:#fff;}
.tagline:hover {background:#000;}

.pageleft {float:left; width:60%; padding-bottom:10px;}
.pageleft a {color:#961011;}
.pageleft a:hover {color:#000;}

.pageright {float:right; width:35%;}

/* CTA */
.cta {width: 100%;}
.cta div {position: relative; margin: 0px;}
.column4 {display:inline-block; width:24.8%;}
.cta div:first-child {position: relative; background-repeat:no-repeat; background-size: cover; background-position: 50% 50%; padding: 0; height: 250px; z-index:999999;}
.cta a span {text-align: left;display: table-cell; vertical-align:middle; padding-left:5%;}
.cta a h2 { color: #fff; font-weight: 600; line-height: 1; }
.cta a p { color: #fff; background:#961011; width:100%; max-width:135px; font-weight: 400; position: relative; margin: 0; padding-left:25px;}
.cta a p::after {content: ' '; background: url(../siteart/cta/arrow.png) no-repeat 0% 35%; position:absolute; display: inline-block; height: 100%; width: 100%; background-size: 20px; top: 2px; text-align: right; margin-left: 5px;}
.cta a:hover p::after { background: url(../siteart/cta/arrow.png) no-repeat 5% 35%; background-size: 20px; }
.cta a h2 span {display: block; }
.cta a:hover {opacity: 1; }
.cta a .overlay {background: rgba(0,0,0,.45); position:absolute; top:0; bottom: 0; display: table; width: 100%; height: 100%;}
.cta .auctions {background-image:url(../siteart/cta/1.jpg); }
.cta .inventory {background-image:url(../siteart/cta/2.jpg); }
.cta .parts {background-image:url(../siteart/cta/3.jpg); }
.cta .service {background-image:url(../siteart/cta/4.jpg); }
.cta a:hover .overlay {background: rgba(0,0,0,.75); }


/* LISTINGS */
.hosted-content #listings-title {font-size:1.5rem!important;}

/* FOOTER */
footer {background:url("../siteart/bg.png") no-repeat; background-size:cover; color:#fff; padding:20px 0;}
footer p {font-size:14px; color:#fff!important;}
footer a {font-size:14px; color:#fff!important;}
footer a:hover {color:#961011!important;}
.footleft {float:left; width:55%; font-size:14px}
.footright {float:right; width:45%; text-align:right; font-size:14px}
.footright img {display:inline-block; width:31%; margin:.25%;}
  

/*===================== 
	nav styles 
=======================*/

#menu-button{display: none;}
nav.mobile, .mobile-nav-cont-1 { display:none;} /* New class to help control screen width visability */

nav.primary {
	padding:0;
	display:block;
	position:relative;
	background:#961011;
    width: 100%;
	}
	nav.primary ul {
        width:100%;
		margin:0 auto; 
		padding:0;
        display: flex;
        justify-content: center;
		}
		nav.primary ul li {
			margin:0;
			list-style-type:none; 
			}
			nav.primary ul li a {
				font-family: 'Montserrat', sans-serif;
				display: block;
				font-size: 16px;
				font-weight: 400;
				text-decoration: none;
				text-transform: uppercase;
				color: #fff;
				padding: 5px 20px;
				margin: 0;
				text-align: center;
				-webkit-transition: .1s ease-in;
				-moz-transition: .1s ease-in;
				-o-transition: .1s ease-in;
				transition: .1s ease-in;
				}	
			nav.primary ul li a:hover {
				background: #8a0e0f;
				}
			/* Appearance of the sub-level links */
			nav.primary ul li li a { 
				background: #961011;
				font-size: 12px;
				text-decoration: none;
				color: #ddd;
				padding: 10px 20px;
				display: block;
				box-sizing: border-box;
			}
			/* Appearance of the sub-level links on hover */
			nav.primary ul li li a:hover { 
				background: #555; color: #fff;
			}
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */
nav.primary ul ul {
    display: none;
    position: absolute; 
	border-bottom: 2px #ccc solid;
	width: 250px;
	z-index: 9999;
}
nav.primary ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary ul li:hover > ul {  
    display: block;

}
nav.primary ul ul li {
	display: block;
    float: none; 
    position: relative;
    margin:0;
	border: 2px #ccc solid;
  	border-bottom: none;
}



/************************************************ Responsive Styles **/
@media screen and (max-width: 1700px)  {
	.tagline {top:30%;}
}

@media screen and (max-width: 1575px)  {
	.tagline {top:25%;}
	
	.column4 {width:24.7%;}
}

@media screen and (max-width: 1375px)  {
	h1 {font-size:28px;}
	p {font-size:15px; line-height:1.6rem;}
	
	#pagewrap {width:90%;}
	#sitewrap {width:90%;}
	
	.logo {width:18%; margin-bottom:-5px;}
	.headerright {padding-top:2%;}
		
	.cta a h2 {font-size:22px;}
}


@media screen and (max-width: 1130px)  {
	h1 {font-size:26px;}
	p {font-size:14px; line-height:1.6rem;}
	
	.tagline {top:21%; font-size:16px; width:30%; left:35%;}
	
	.cta a h2 {font-size:20px;}
	
}

@media screen and (max-width: 1040px)  {	
	h2 {font-size:24px;}
	h3 {font-size:20px;}
	p {font-size:13px; line-height:1.6rem;}
	
	.logo {width:19%; margin-bottom:-5px;}
		
	.column4 {width:24.6%;}
	.cta div:first-child {height:150px;}
	
	footer p {font-size:12px;}
	footer a {font-size:12px;}
}
@media screen and (max-width: 1000px)  {	
	nav.primary ul li a {
		font-size: 1.6vw;
		padding: 5px 1.4vw;
	}
}

@media screen and (max-width: 900px)  {
	.footleft {float:none; width:100%; text-align:center;}	
	.footright {float:none; width:75%; margin:0 auto; text-align:center;}	
}

@media screen and (max-width: 850px)  {		
	h1 {font-size:24px;}
	.column4 {width:24.5%;}
	.cta a h2 {font-size:18px;}
	.cta a p {max-width:110px;}
	
	.tagline {top:18%; font-size:14px; width:30%; left:35%;}
	
}

@media screen and (max-width: 768px)  {
	h1 {font-size:22px;}
	h2 {font-size:20px;}
	h3 {font-size:18px;}
	h4 {font-size:16px;}
	p {font-size:12px; line-height:1.4rem;}
	
	.logo {width:24%;}
	
	.column4 {width:49%;}
	
	
	.hosted-content #listings-title {font-size:1.2rem!important;}
	
	.staff {width:49%; max-width:100%;}
	
	.pageleft {float:none; width:100%; padding-bottom:5px;}
	.pageright {float:none; width:100%; margin:5px auto 15px;}
	
	.tagline {display:none;}
	
	/*==============================
		Mobile Nav Styles			
	================================*/	
		nav.primary{display:none;}
		.mobile-nav-cont-1 { display:block;} /* New class to help control screen width visability */

		#menu-button{ 
			width: 100%;
			display: block;
			font-size: 24px;
			position: relative;
			box-sizing: border-box;
			z-index: 400; /* needs to be lower than nav.mobile, adjust as needed */
			background:#961011;
			text-align: center;
		}

		.menu-toggle {
			width:100%;
			box-sizing: border-box;
			display: block;
			padding: 10px 20px;
			color: #fff;
			cursor: pointer;
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			text-align: center;
		}
		.menu-toggle i {
			position: absolute;
			right:10px;
			font-size: 14px;
		}
		

		nav.mobile { 
			display:none;
			position: absolute;
			left: 0px;
			width: 100%;
			height: auto;
			z-index: 500; 
			overflow:auto;
		}
	

		/* MENU HEADER STYLES */
		nav.mobile .mobile_top {
			position: relative;
			display:block;
			padding: 0;
			margin:15px 0 10px 0;
			color: #fff;
			font-size: 18px;
			font-weight: 400;
		}



		/* MENU LIST STYLE */
		nav.mobile ul {
			list-style: none;
			font-weight: 300;
			margin:0;
			padding:0;
		}
		nav.mobile ul li {
			border-top: 1px solid #ccc;
			position:relative;
		}

		/* FIRST LEVEL */
		nav.mobile ul li a {
			font-family: 'Montserrat', sans-serif;
			color:#fff;
			display: block;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			font-size: 12px;
			padding: 10px;
			width: 100%;
			background:#961011;
			
		}
		nav.mobile ul li a span {
			position: absolute;
			width: 14px;
			height: 2px;
			background: #fff;
			right: 15px;
			top: 17px;
		}
		nav.mobile ul li a span:after {
			content:"";
			position: absolute;
			width: 2px;
			height: 14px;
			background: #fff;
			right: 6px;
			top: -6px;
			transition: .1s ease-in;
		}
	nav.mobile ul li a.clickopen span:after {
		transform: rotate(90deg);
	}
		


		/* SECOND LEVEL */
		nav.mobile ul li li a {
			background: #333;
			font-size: 12px;
			color: #fff;
			padding:15px 10px;
			width: 100%;
		}
		


}

@media screen and (max-width: 620px)  {
	h1 {font-size:20px;}
	h3 {font-size:16px;}
	
	.logo {width:30%;}
	.headerright {width:65%; padding-top:3%;}
	
	.formfield {width:100%; margin:.5% auto;}
	
	.footright {width:100%;}	
	
}

@media screen and (max-width: 450px)  {
	.logo {float:none; width:75%; margin:0 auto;}
	.headerright {float:none; width:100%; text-align:center; padding:10px 0;}
		
	.hosted-content #listings-title {font-size:1rem!important;}
}

@media screen and (max-width: 350px)  {
	.column4 {width:100%; margin:.25% auto;}
	
	.footright img {width:75%; margin:.25% auto;}
}





