@charset "utf-8";

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

* {
    background:transparent;
    border:0;
    margin:0;
    padding:0;
}
ol, ul {list-style: none;}
.clear {clear: both; height:0px; margin:0;}

/***** END RESET *****/

@font-face {
    font-family: 'oswaldbook';
    src: url('../fonts/oswald-regular-webfont.eot');
    src: url('../fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-regular-webfont.woff2') format('woff2'),
         url('../fonts/oswald-regular-webfont.woff') format('woff'),
         url('../fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('../fonts/oswald-regular-webfont.svg#oswaldbook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url('https://fonts.googleapis.com/css?family=Oswald:500,600,700&display=swap');
@font-face {
    font-family: 'oswaldbold';
    src: url('../fonts/oswald-bold-webfont.eot');
    src: url('../fonts/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-bold-webfont.woff2') format('woff2'),
         url('../fonts/oswald-bold-webfont.woff') format('woff'),
         url('../fonts/oswald-bold-webfont.ttf') format('truetype'),
         url('../fonts/oswald-bold-webfont.svg#oswaldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.cart-item-fulfillmentoptions span {margin-right:15px; font-size:15px;}


a {
	color:#e00404;
	text-decoration:none;
}

a:hover {
	color:#464646;
}


p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	line-height:22px;
}

h2 {
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:26px;
	text-transform:uppercase;
	color:#e00404;
	letter-spacing:0.5px;
	font-weight:normal;
	line-height:35px;
}

h3 {
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:18px;
	color:#000;
	letter-spacing:0.5px;
	font-weight:normal;
	text-transform:none;
	line-height:30px;
}

h3 a {
	color:#e00404;
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:18px;
	letter-spacing:0.5px;
	font-weight:normal;
	text-transform:none;
}

h3 a:hover {
	color:#464646;
}

h4 {
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	background:#e00404;
	letter-spacing:0.5px;
	font-weight:normal;
	color:#fff;
	padding:4% 2%;
	width:96%;
	margin:20px 0;
}


body {
	-webkit-text-size-adjust: none;
	background:url(../siteart/Diamond-plate1.jpg) repeat;
	overflow-x: hidden;
}
.parts-banner {background: #e00404; padding: 10px 2%; width: 96%; text-align: center; color:#fff; font-size: 20px; font-weight: 800; letter-spacing: 2px;font-family:'oswaldbook', Helvetica, Arial, sans-serif; transition: .3s ease;}
.parts-banner:hover {background:#C00303;}
.parts-banner h3 {color:#fff;}

#gradient {
	width:100%;
	background: #000; /* For browsers that do not support gradients */
  	background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1)); /*Safari 5.1-6*/
  	background: -o-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,1)); /*Opera 11.1-12*/
  	background: -moz-linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,1)); /*Fx 3.6-15*/
  	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); /*Standard*/
	float:left;
}


.promo {
	width:100%;
	background-color:black;
    position: relative;
    top: 0px;
	display:block;
}
.promo p {
	color:white;
	padding:10px;
	text-align:center;    
	margin-bottom: 20px;
}
.promo b {
	color:red!important;
}




.wrap {
	width:96%;
	padding:0 2%;
	margin:0 auto;
	display: flex;
	flex-direction: row;
}

.header {
	background:rgba(255,255,255,0.85);
	background:#fff\9;
	width:100%;
	float:left;
	padding:0 0 0;
	z-index: 99999999999999999;
}

#logo {
	width:15%;
	float:left;
	margin-left: 3%;
}

#logo img {
	width:100%;
	max-width: 180px;
}

#logotext {
	width:40%;
	float:left;
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:33px;
	line-height: 40px;
	text-transform:uppercase;
	color:#e00404;
	letter-spacing:0.5px;
	margin:0 0 0 2%;
	font-weight:normal;
}

#logotext p {
	font-family:Arial, Helvetica, sans-serif;
	text-transform:none;
	color:#000;
	font-size:16px;
	font-weight:bold;
	letter-spacing:0;
}

#topcontact {
	width:40%;
	float:right;
	text-align:right;
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	color:#e00404;
	margin-top:2.5%;
	font-weight:normal;
}

#topcontact a {
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:20px;
}

#topcontact .fa-facebook-square, #topcontact .fa-linkedin-square {
	color:#000;
	font-size:25px;
}

#topcontact .fa-facebook-square:hover, #topcontact .fa-linkedin-square:hover {
	color:#e00404;
	font-size:25px;
}

#redlinks {
	width:75%;
	float:right;
	position:relative;
	margin-top:0px;
}

#redlinks li {
	width:225px;
	background:#e00404;
	padding:10px 0;
	text-align:center;
	float:right;
	margin-left:20px;
}

#redlinks li a {
	color:#fff;
	font-family:'oswaldbook', Helvetica, Arial, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	font-weight:normal;
}

#redlinks li a:hover {
	color:#000;
}

.mobileappear {
	display:none;
}

@keyframes callout-banner {
     0%   {background-color: #0459a9;}
     10%  {background-color: #e00404;}
     20%  {background-color:#0459a9;}
     30% {background-color: #e00404;}
     40%   {background-color: #0459a9;}
     50%  {background-color: #e00404;}
     60%  {background-color:#0459a9;}
     70% {background-color: #e00404;}
     80%  {background-color: #e00404;}
     90%  {background-color:#0459a9;}
     100% {background-color: #e00404;}
}
.callout-banner{background: #0459a9; animation-name:callout-banner; animation-duration: 3s; text-align:center; padding: 10px 0px; color:#fff;}
.callout-banner:hover{background: #e00404;}
.callout-banner p{ font-size: 18px; letter-spacing:1px; }
.callout-banner h2{ color:#fff; letter-spacing:2px; font-weight:500;} 
.banner-width {width: 50%; margin: 0 auto;}
.left {display:inline-block; width: 70%; vertical-align:middle; }
.right { width:25%; vertical-align: middle; display:inline-block; }
.right img {vertical-align:middle; width: 85%;}

#mainimg {
	background:url(../siteart/../siteart/trailer-equipment-grand-rapids-michigan.png) no-repeat center center;
	background-size:cover;
	width:100%;
	float:left;
	height:500px;
}
#mainimg-2 {display: none;}



h1 .fa-pencil-square-o, h1 .fa-wrench, h1 .fa-cogs {
	font-size:32px;
}

.bltri { background:#e00404;}

.bltri:before {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  top: 100%;
  left: 0px;
  border-top: 15px solid #7f0000;
  border-left: 20px solid transparent;
}



/***** Footer *****/

.footer {text-align: center; margin: 0 auto; background:#fff; color:#000; padding:10px 0;}
.footer a {color:#000!important; font-size: 15px;}
.footer p {color:#000!important; font-size: 11px; text-align: center; margin: 0 auto; max-width: 600px; width: 100%; line-height: 15px;}
/*  SCROLLING INVENTORY
------------------------------------------------*/
.scrolling-wrap {
    width:100%;
    height:90px;
    overflow:hidden;
}
 
.scrolling{
    width:100%;
    height:92px;
}
/*--INVENTORY SEARCH--*/
/*----------DETAILED SEARCH----------------------------*/

.detailed-search-wrap {
	background: #fff;
	padding: 30px 0;
	border-top:2px #7e2025 solid; 
	border-bottom:2px #7e2025 solid; 
	font-family: 'Open Sans', sans-serif; 
}

.content {
	width: 90%;
	margin: 0 auto;
}
.content h4 { color: #000;	font-family: 'Open Sans', sans-serif; 
	font-weight:400;
	letter-spacing:1px;
}

.detailed-form {
	margin: auto;
}
.clear {
	clear: both;
}
.detailed-row {
	margin: 10px 0 5px;
	font-size: 18px;
}
.column3 {
	width: 33.33%;
	*width: 31%: ;
	float: left;
	padding-right: 20px;
	box-sizing: border-box;
	margin-top: 5px;
}
.last {
	padding-right: 0px;
}
.detailed-search input[type='submit'] {
	font-size: 16px;
	background: #e00404;
	width: 100%;
	margin-top: 2px;
	height: 40px;
	color: #fff;
	display: inline-block;
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
	outline: none;
	border: none;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-webkit-border-radius: 0;
	-webkit-appearance: none;
	border-radius: 0;
	font-family: 'Open Sans', sans-serif; 
}
.detailed-search input[type='submit']:hover{
	background:#522b1c;
	
}
.detailed-search input[type='text'] {
	width: 100%;
	margin: 2px 0;
	padding: 0 8px;
	font-size: 15px;
	height: 40px;
	background-color: #f9f9f9;
	border: 1px solid #bebebe;
	box-sizing: border-box;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.detailed-search select {
    width: 100%;
    padding: 10px 8px;
    background: #fff;
	box-sizing: border-box;
	margin-bottom: 10px;
	background-color: #f9f9f9;
	border: 1px solid #bebebe;
	font-size:15px;
	color:#747474;

}
.detailed-search-wrap h3 span {
	color:#9C9C9C;
}

main {
  width:100%;
  margin: 0 auto;
}

section {
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
}
.page-header {z-index: 9999;}
.shop-home .page-header-title h1 {margin: 5px 0;width: 100%; padding: 0;}
.shop-home .welcome-hero-horiz{min-height: 50vh!important;}
#hs-main-content {padding-top:0; margin-top:0}
.shop-home .hs-content-wrapper {padding-top:15px;}
.shop-home .welcome-hero-image, .shop-home .welcome-hero-image-none {min-height: 50vh!important;}
.shop-home .welcome-hero-image .welcome-wrap-image, .shop-home .welcome-hero-image-none .welcome-wrap-image {
    padding: 15vh 20px!important;
}
/* INVENTORY */
.hs-btn.hs-highlighted {background: #E00C13; color:#fff !important;}


.hosted-content .mobile-calculator img {width: auto !important;}
.hosted-content .listings-wrapper .listings-list {font-size:16px !important; line-height: 22px !important;}
.hosted-content .listings-wrapper .listings-list .col {line-height: 23px !important;}
.hosted-content .listings-wrapper .closest-box .pc-heading .left {width: auto !important;}
.hosted-content .dealers-list-wrapper .control-box select, .hosted-content .listings-wrapper .control-box select {color:#fff!important; background:#e00404 !important;}
.hosted-content .dealers-list-wrapper .control-box .button, .hosted-content .listings-wrapper .control-box .button {position:relative !important; width: auto !important;}
@media screen and (max-width:1220px){
	.banner-width {width:90%;}
	#mainimg a {display: none;}
	#mainimg-2 {display: block; padding-bottom:30px; }
	#mainimg-2 a h1 {width: 97%; text-align: center;}
	
	#mainimgtrailer, #mainimgparts, #mainimgservice, #mainimgrent, #mainimgpart, #mainimgserv, #mainimgabout, #mainimgshort, #mainimgroad, #mainimglost, #mainimgnew, #mainimgused {
		height:300px;
	}
	#mainimgabout a{display: none;}
	#mainimgserv a {display: none;}
	#mainimgpart a {display: none;}
	#mainimgrent a {display: none;}}
@media screen and (max-width:1121px){
	.right img {vertical-align:middle; width: 95%;}

	
	#logo {
		width:15%;
	}
	
	#logotext {
		width:41%;
	}
	
	#topcontact {
		margin-top:1%;
	}
	
	
	#redlinks {
		margin-top:10px;
	}
	
	#redlinks {
		text-align: center;
		float: none;
	}
}

@media screen and (max-width: 1046px) { 
#redlinks li {
    width: 100%;
    background: #e00404;
    padding: 15px 0;
    text-align: center;
    float: right;
    margin-left: 0px;
    margin-bottom: 5px;
}
	#topcontact {
		margin:2% 0;
		width:100%;
		float:none;
		text-align:center;
		clear:left;
	}
	
	#redlinks {
		margin:2% 4%;
		width: 92%;
		box-sizing: border-box;
		
	}
	
	#logo {
		width:30%;
		margin: 0 auto;
		float: none;
		margin-bottom: -25px;
	}
	
	#logo-img {
		display: block;
    text-align: center;
	}
	
	#logotext {
		width:100%;
		margin: 0 auto;
		text-align: center;
		float: none;
	}
	
	h1 {
		margin:30px 0;
		width:32%;
	}
	
	h1:hover {
		width:35%;
	}
	
	.bltri::before {
		border-top:none;
		border-left:none;
	}
	
	#threes1, #threes2, #threes3 {
		margin:-4.8% 2% 2%;
		width:29.33%;
	}

	
	.employeeinfo h3, h3 a {
		font-size:16px;
	}
	
	.employeeinfo h2 {
		font-size:20px;
	}

}


@media screen and (max-width: 1000px) {
	
	#phonenumber {
		margin-top:10px;
	}
	
	.noshow #phonenumber {
		margin-top:-50px;
	}
	.divide2 {
		width:96%;
	}
	
}


@media screen and (max-width: 910px) {
	.banner-width h2 {font-size:17px;}
	.banner-width p {font-size:15px;}
	.form-btns {
		left: 300px;
	}
	 
}

@media screen and (max-width: 900px) {
	
	.mobileappear {
		display:block;
	}

	.column3 {width: 100%; padding-right:0px;}
	.column3 .last {width:97% !important; padding:0;}
	 
}


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

	h1 {
		font-size:20px;
	}
	
	h1 .fa-pencil-square-o, h1 .fa-wrench, h1 .fa-cogs {
		font-size:25px;
	}
	
	#threes1, #threes2, #threes3 {
		margin:-5.7% 2% 2%;
	}
	
	#mainimg {
		height:380px;
	}

	#mainimgspecials {
		height:250px;
	}
	
	.rightimg {
		width:25%;
	}
	
	.employee img {
		width:100%;
		margin:0;
	}
	
	.employeeinfo {
		width:100%;
		margin:3% 0 10%;
		text-align:center;
		height:140px;
	}
	
	#manulogos img {
		width:12.66%;
		margin:0 2%;
	}

}


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

	#topcontact {
		width:100%;
		text-align:center;
		margin:1% 0 3%;
	}
}


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

	#logotext {
		margin:2% 0;
		width:100%;
		font-size:25px;
		line-height: 35px;
	}
	
	#logo {
		width:25%;
	}
	
	#threes1, #threes2, #threes3 {
		margin:2%;
		width:46%;
	}
	
	#manulogos img {
		width:27.33%;
		margin:0 3%;
	}
	
	h1 {
		width:40%;
	}
	
	h1:hover {
		width:45%;
	}
	
	#mainimg {
		height:300px;
	}
	
	.captcha-container {
		width:50%;
		margin:0;
	}
	
	.split {
		width:96%;
	}
	
	.rightimg {
		width:35%;
	}

}


@media screen and (max-width: 677px) {
	
	#moving img {
		width:60%;
		margin:0 auto;
	}
	
	.movingleft, .movingright {
		width:96%;
	}
	
	#moving .movingright img {
		width:100%;
	}
	
	#moving h1 {
		font-size:30px;
	}
	
	#moving h2 {
		font-size:25px;
	}
	
	#moving h3 {
		font-size:22px;
	}
	
	#moving h4 {
		font-size:20px;
	}
	
	#moving p {
		font-size:16px;
	}
	
	#slideshow {
		width:100%;
		float:left;
		margin:0 0 2% 0;
	}
	
	
	.appbuttons {
		float:left;
		width:96%;
		margin:2%;
	}
	 
	.hide {
		display:none;
	}
	
}


@media screen and (max-width: 640px) {
	
	.noshow #phonenumber {
		display:none;
	}
	 
}


@media screen and (max-width: 585px) { 
	#redlinks {display: none;}
	#logotext p {display: none;}
	#topcontact {font-size:15px;}
	#mainimg {height:150px;}
	#main-inventory {display: none;}
	#welcome #slideshow {display: none;}

	.divide {
		width:96%;
	}
}


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

	h1 {
		width:57%;
	}
	
	h1:hover {
		width:62%;
	}
	
	#threes1, #threes2, #threes3 {
		margin:2%;
		width:96%;
	}
	
	.captcha-container {
		width:70%;
		margin:0 auto;
	}
	
	.form-btns {
		left:20px;
		top:250px;
	}
	
	#mainimgtrailer, #mainimgparts, #mainimgservice, #mainimgrent, #mainimgpart, #mainimgserv, #mainimgabout, #mainimgshort, #mainimgroad, #mainimglost, #mainimgnew, #mainimgused {
		height:250px;
	}
	
	.rightimg {
		width:40%;
		margin:2% auto;
		float:none;
	}
	

}

@media screen and (max-width: 470px) {
	.banner-width {width:100%;}
	.banner-width h2 {font-size:14px;}
	.banner-width p {font-size:13px;}
	
	h2 {
		font-size:20px;
	}
	
	#logotext {
		font-size:30px;
		
		margin:3% 0;
	}
	
	#logo {
		width:35%;
		padding-bottom: 0;
	}
	
	/*#logotext p {
		display:none;
	} */
	
	.employeeinfo {
		height:auto;
	}
	
	.half {
		width:96%;
	}
	
	.hide2 {
		display:none;
	}
	
	.myform textarea{
		width:90%;
	}
	  
	.wrap {width: 100%; padding:0;}
}

@media screen and (max-width: 410px) {
		.right img {vertical-align:middle; width: 100%;}

	
	h1 {
		margin:10px 0;
		width:96%;
		padding:2%;
	}
	
	h1:hover {
		width:auto;
	}
	
	#mainimg, #mainimgtrailer, #mainimgparts, #mainimgservice, #mainimgrent, #mainimgpart, #mainimgserv, #mainimgabout, #mainimgshort, #mainimgroad, #mainimglost, #mainimgnew, #mainimgused, #mainimgspecials {
		height:180px;
	}
	
	
	#logotext {
		width:100%;
		margin:0;
	}
	
	#logo {
		width:45%;
		float:none;
		margin:0 auto;
	}
	
	.rightimg {
		width:60%;
	}
	
	.hide3 {
		display:none;
	}
	
	
}