@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900');
/***** 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 --------

*/

/***** 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 {
	overflow-x:hidden;
	width:100%;
	font-family: 'Montserrat', sans-serif;
}

a:link, a:visited, a:active {text-decoration:none; color:#ddd;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}
h2 {font-size:30px; color:#a4a800; letter-spacing: 2px; }
h4 {font-size:18px; text-transform: uppercase; letter-spacing: 1px; color:#a4a800;}

/*--- HEADER STYLES --------------------------*/
.fa {font-size:25px !important; color:rgba(255,190,0,1.00);}
#socials { display: inline-block;}

header {
	width:100%;
	float:left;
	font-size:18px;
	 background-image: linear-gradient(#fff,rgba(244,243,244,1.00));
	display: inline-block;
	border-top:5px solid #d14e0f;
}


#topleft {
	width:27%;
	position: absolute;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    z-index: 9999999;
    transform-origin: top right;
    -ms-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
	 background-image: linear-gradient(#fff,rgba(244,243,244,1.00));
	padding: 0px 0; 
	border-top:7px solid #d14e0f;
}

#logo {
	padding-left: 32%;
	
}
#logo img{
	width:100%; 
	max-width: 250px;
	-ms-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
	display: inline-block;
}

#topright {
	background:#d14e0f; 
	width:76%;
	float:right;
	padding:19px 0;
	display:inline-block;
}
#topright p{
	margin-left:23%;  
	text-transform:uppercase;
	color:#fff; 
	text-align:left; 
	font-size: 14px;
	font-weight: 500;
	padding:5px 0 35px 0; 
	letter-spacing: 2px;
	display: inline-block;

}
#topright p a {color:#fff; font-weight: bold; }
#topright p a:hover { font-weight: 800; color:rgba(255,190,0,1.00); }




	
/* SIDE TABS
------------------------------------------------*/	
#fb {
    top: 200px;
    left: -300px;
    z-index: 99999;
}

.side {
	background: #fff;
    width: 300px;
    height: 510px;
    position: fixed;
    z-index: 100;
}

.fb_iframe_widget {
    display: inline-block;
    position: relative;
}

#facebookTab {
    display: block;
	height: 73px;
	width: 49px; 
	background: url(../siteart/facebook.png);
    position: absolute;
    right: -49px;
    top: 0px;
}


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

.hero img {max-width:2000px; width: 100%; display: block;}
.hero-text {top:20vw; right: 0; left:0; position: absolute;z-index: 999;}
.line {width:200px; height:10px; background: #a4a800; text-align: center; margin: 0 auto;}
.hero-text h1 {color:#fff; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding:15px 0;font-weight: 700;}
.hero-text h4 {color:#a4a800; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; text-align: center;}

.section-white {border-top:7px solid #d14e0f;border-bottom:7px solid #d14e0f; text-align: center; margin: 0 auto; }
#block {margin: 0 auto; text-align: center; width:125px; background:#d14e0f; height:10px;}
.section-white h2{font-size:25px;padding:50px 0 5px 0;}
.section-white h4{padding:50px 0 10px 0;}
.gray-btn {border: 2px solid #393939;background:#393939; width:350px; display: inline-block; margin: 0 5px 50px 5px; padding:15px 0; font-weight: 700; letter-spacing: 1px; color:#fff; transition:.3s ease;}
.gray-btn:hover {background:#d14e0f; border: 2px solid #d14e0f;}
.gray-outline-btn {border: 2px solid #393939; width:350px; display: inline-block; margin: 0 5px 50px 5px; padding:15px 0;color:#393939; font-weight: 700; letter-spacing: 1px; transition:.3s ease;}
.gray-outline-btn:hover {color:#d14e0f; border: 2px solid #d14e0f;}

section {margin: 0 auto;}
.width {width:70%; margin: 0 auto;}
.col-1-3 {width:31%; display: inline-block; margin: 5% 10px; vertical-align: top;}
.col-1-3 h3 {background:#393939; transition:.3s ease; width: 100%; padding:12px 0; text-align: center; color:#fff; letter-spacing: 1px; font-weight: 500; font-size:18px;}
.col-1-3 h3:hover {background:#d14e0f;}
.col-1-3 img {max-width: 500px; width: 100%;}
.col-1-3 a img:hover {opacity:.8;}
.col-1-3 p {font-weight: 500; line-height: 26px; padding:10px 5px; height:160px;}
.orange-btn {background:#d14e0f; padding:12px 0; text-align: center; color:#fff; font-weight:700;letter-spacing: 1px; transition:.3s ease;}
.orange-btn:hover {background:#393939; }

.hp-about {background: url(../siteart/dirt-bg.jpg); text-align: center;padding:70px 0;}
#border {border:2px solid #fff;padding:45px 25px;}
.hp-about h4 {font-size:30px;}
.hp-about p {color:#fff;  line-height: 26px; font-weight: 600; padding:20px 0; letter-spacing: 1px;}
.line-full {width: 100%; height:7px; background:#d14e0f;}
p#p-width { width:80%; text-align: left; padding:25px 0; margin-left:50px; line-height: 27px;}
h3#p-width { width:80%;  text-align: left; padding:5px 0; margin-left:50px;}

#repairs {padding:3% 0;}
#repairs h2 {padding:15px 0;}
.inner-width {width:85%; margin: 0 auto;}
.sect-left {width:70%; display: inline-block;}
.sect-right {width:28%; display: inline-block; vertical-align: top;}
.sect-right img {max-width:500px; width: 100%; margin-top:30px;}

.locations {padding:100px 0; text-align: center;}
.locations p {line-height: 25px; }
.locations h4 {padding-bottom:25px; color:#000;}
.col-1-2 {display: inline-block; width: 45%; vertical-align: top; padding:50px 0;}
.col-1-2 p { line-height:25px;}
.col-1-2 a {color:#d14e0f; font-weight: 700;}
.col-1-2 a:hover {color:rgba(255,190,0,1.00);font-weight: 700;}
/*--------FORM STYLES--------------------*/
.form-bg {background:#E1E1E1; padding:50px 0;}
.form-bg h4 {text-align: center; padding-bottom:25px;}
#formpage { 
	vertical-align:top; 
	margin: 0 auto;  
	text-align:center;
}

#formpage div {
	vertical-align:top;
	padding:5px;
	color: #000;
	text-align: center;
}

#formpage input {
	padding:6px 5px 10px;
	border:1px solid #000;
	background:#fff;
 -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0 !important;
}

#formpage textarea {
	padding:6px 5px;
	border:1px solid #000;
	color:#000;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
}

/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {
	border:1px solid #000;
	color:#fff;
	vertical-align:middle;
	font-size:16px;
	line-height:normal;
	padding:8px ;
	width:100%;
}

.formfield {
	width:47%; 
	float:left; 
	margin-right: 12px; 
	color: #fff;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
}

#formpage input  {
    width:100%;
}
#formpage input#interest  {
    width:auto;
}
 
#formpage input.larger  {
    width:100%;
}

#formpage textarea {
    width:100%;
    height:85px;
}

#formpage input.radio {
    padding:0; 
    border:0;
    margin:0 5px 0 0;
    width:15px;
    height:15px;
	text-align: left;	
 }

/* focus states of various types of fields */
#formpage input:focus,
#formpage textarea:focus,
#formpage select:focus {
	background:#212121; 
	color:#fff;
	border:1px solid #abacac;
	outline-style:none;
	-webkit-transition-duration: 0.4s; 
	/* Safari */ transition-duration: 0.4s;
}


#formpage input.button,
#formpage input.button:focus {
	width: 340px;
	color:#fff !important; 
	background: #212121; 
	padding: 12px 20px; 
	font-weight: 700;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	display: inline-block;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
 -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0 !important;
	letter-spacing: 1px;
	font-size:16px;

}
#formpage input.button:hover {
    background:#393939; 
	-webkit-transition-duration: 0.4s; 
	/* Safari */ transition-duration: 0.4s;
	
	
	
}

/* for plain text next to an input field, if not using a table structure */
#formpage label.basic {
    color:#212121;
    font-size:13px;
    text-align:center;
} 

/*control the Captcha */

.CaptchaPanel {
	padding:1% 0;
	line-height:normal !important;
	color:#000;
	width: 50%; 
	text-align:center;
	margin: 0 auto !important;
}

.CaptchaImagePanel {
margin-top: 10px;
padding:0 0 0 0;
	text-align: center;
}

.CaptchaMessagePanel {
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
font-weight:normal !important;
font-size:12px;
line-height:14px;
text-align: center !important;
}

.CaptchaAnswerPanel {
margin:0 0 0 0;
padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 10px 0;
	padding:10px 0 10px 0 !important;
	text-align: left;
}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 


/***** SIDE TABS *****/



.side {
	background: #fff;
    width: 300px;
    height: 300px;
    position: fixed;
    z-index: 100;
}

#markets {
    width: 300px;
    height: 350px;
    top: 250px;
    right: -300px;
    z-index: 9999999;
}

#marketTab {
    display: block;
	height: 45px;
	width: 45px; 
	background: url(../siteart/marketbutton_small.png);
    position: absolute;
    left: -45px;
    top: 0px;
	overflow:visible !important;
}

#facebook {
    width: 300px;
    height: 350px;
    top: 390px;
    right: -300px;
    z-index: 99999;
}

#facebookTab {
    display: block;
	height: 45px;
	width: 45px; 
	background: url(../siteart/facebookbutton_small.png);
    position: absolute;
    left: -45px;
    top: 0px;
	overflow:visible !important;
}

#twitter {
    width: 300px;
    height: 350px;
    top: 460px;
    right: -300px;
    z-index: 9999;
}

#twitterTab {
    display: block;
	height: 45px;
	width: 45px; 
	background: url(../siteart/twitterbutton_small.png);
    position: absolute;
    left: -45px;
    top: 0px;
	overflow:visible !important;
}



/*.widgetcontainer {
	height: 250px;
	overflow:hidden;
	width: 250px;
}*/

#weather {
    top: 320px;
    right: -300px;
    height: 159px;
    z-index: 999999;
}

#weatherTab {
    display: block;
	height: 45px;
	width: 45px; 
	background: url(../siteart/weatherbutton_small.png);
    position: absolute;
    left: -45px;
    top: 0px;

}




/*-------- FOOTER STYLES ----------------*/
.orange-bg {background:#d14e0f;  width: 100%;text-align: center; margin: 0 auto; display: block;}
.width-footer {width:40%; margin: 0 auto;}
#desc-left {width:70%; display: inline-block; color:rgba(255,190,0,1.00); text-align: center;vertical-align: middle;font-weight: 700;letter-spacing: 1px;}
#f-icon {width:28%; display: inline-block; text-align: left;vertical-align: middle;}
#f-icon img{height:60px; display: inline-block; text-align: left;}
footer{background:#393939; width: 100%;padding:25px 0;margin-top:-4px; text-align: center;}
footer p {color:#fff; text-align: center;padding:10px 0;letter-spacing: 1px;}
footer p a {padding:0 5px; color:#ddd !important;}
footer p a:hover  {color:rgba(255,190,0,1.00)}
footer .fa {padding:20px 0; }
footer a {color:#ddd;}






/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.hosted-content .listings-wrapper .listings-list p {font-size:16px !important;}
.hosted-content .listings-wrapper .listings-list .listing-name a {color:#000 !important;}
.hosted-content .left a {color:#000 !important;}
.hosted-content .btn.listings-button .fa, .hosted-content .listings-button .fa {font-size:16px !important;}
.hosted-content .p-right-10 .fa {font-size:16px !important;}
.hosted-content .listings-wrapper .listings-list .dealer-info a {color:#000;}
.currency-capital-price-container a:link, a:visited, a:active {color:#000 }

.inv-page-spacer-top { width: 100%; height: 20px; }
.inv-page-spacer-bottom { width: 100%; height: 60px; }
a.view-listing-details-link { background: #d14e0f!important; color: #fff!important; }
a.view-listing-details-link:hover { background: #96380A!important; color: #fff!important; }
a.phone-link { color: #000!important; }
a.phone-link:hover { color: #d14e0f!important; }
a.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeSmall.MuiButton-containedSizeSmall.listing-widget__link.hilltopequipmentllccomhdev-1mav7bc { color: #000!important; }
a.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeSmall.MuiButton-containedSizeSmall.listing-widget__link.hilltopequipmentllccomhdev-1mav7bc:hover { color: #fff!important; }

a.breadcrumbs__link { color: #000!important; }
a.print-this.des-print-this { color: #666666!important; }
a.print-this.des-print-this:hover { color: #fff!important; }
span.finance-link__text { color: #666666!important; }
span.listing-widget__text { color: #666666!important; }
a.listing-widget__link:hover span.listing-widget__text { color: #fff!important; }
a.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall.dealer-contact__link { color: #666666!important; }
a.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall.dealer-contact__link:hover { color: #000!important; }
a.MuiTypography-root.MuiTypography-text.MuiLink-root.MuiLink-underlineHover { color: #000!important; }
a.finance-link:hover span.finance-link__text { color: #fff!important; }
a.fin-calc span { color: #000!important; }

/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1800px) {
	#topleft {width:32%;}
	#topright {text-align: right;}
	#topright #socials{text-align: right; margin-right:25px;}
	
}

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

	#topright p {font-size:13px;}
	.width {width:80%;}
	.col-1-3 {width:30%;}
	.col-1-3 h3 {font-size:13px;}
	.col-1-3 p {height:225px;}
	.locations {padding:50px 0}



	
}
@media only screen and (max-width: 1300px) {
	.width {width:90%;}
	.col-1-3 {width:46%;}
	.col-1-3 p {height:200px;}

	.sect-left {width: 100%; text-align: left;}
	p#p-width {width: 100%; margin-left:0;}
	h3#p-width {width: 100%; margin-left:0;}
	.sect-right {width: 100%;}
}


@media only screen and (max-width: 1250px) {
	#topleft {border-top:5px solid #d14e0f; transform: none;text-align: center;width: 100%; position:relative;}	
	#topright {width:100%; text-align: center;padding:10px 0;}
	.hero-text {top:32vw;}
	#logo {padding-left:0; text-align: center;margin: 0 auto;}
	#logo img {transform: none;}
	#topright p {margin-left: auto; margin: 0 auto;}
}
@media only screen and (max-width: 1100px) {
	#topleft {width: 100%; position:relative;}
	#topright {width: 100%;}
	#topright p{width: 100%; text-align: center; margin-left:0; padding:5px 0;}
	#topright #socials {margin: 0 auto; text-align: center; width: 100%;}
	.hero-text {position:relative; background:#393939; top:0; padding:35px 0;}
	.hero-text h4 {width:90%; margin: 0 auto; text-align: center; font-size:14px;}
	.section-white h4 {width:95%; margin: 0 auto;}
	.width-footer {width: 90%;}
	#f-icon {width:10%;}
	.formfield {width: 98%;}
	.col-1-2 {width: 100%;padding:20px 0;}
	.form-bg h4 {font-size:16px;}
	.locations {padding:20px 0}

}
@media only screen and (max-width: 790px) {
	#topleft { z-index: 999; }
}

@media only screen and (max-width: 600px) {
	.gray-btn {margin: 0 5px 20px 5px;}
	.col-1-3 {width:97%;}
	.col-1-3 h3 {font-size:15px;}
	.col-1-3 p {height:auto;}
	footer p {line-height: 32px;}
	.CaptchaPanel { width: 100%;}
	
}

@media only screen and (max-width: 500px) {
	#desc-left {width: 100%;font-size:14px;}
	#f-icon {width:100%; text-align: center; }
	#f-icon img {height:35px; padding:5px 0;}
	p {font-size:13px;}
	footer p {font-size:11px;}
}