/***** 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, img {  
    display: block;  
} 
/***** END RESET *****/

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

/********** Control the Captcha **********/
.CaptchaPanel {
margin: 10px auto !important;
padding:0 0 0 0 !important;
text-align: center;
line-height:normal !important;
}

.CaptchaImage {
	border: 1px solid #333 !important;
	margin: 0px auto !important;
}

.CaptchaImagePanel {
margin:0 0 0 0;
padding:0 0 0 0 !important;
}

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

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

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


/***** Overall *****/
html {
	width: 100%;
	height: auto;
}

body {
	width: 100%;
	height: auto;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 400;
	text-align: center;
	font-size: 0px;
	background-color: #000 !important;
}

.divider1 {
	width: 100%;
	height: 3px;
	margin: 5px auto;
	position: relative;
	display: block;
	background-color: #FFC000;
}

.divider2 {
	width: 30%;
	height: 3px;
	margin: 10px auto;
	position: relative;
	display: block;
	background-color: #FFC000;
}

/********** Header **********/
.heading {
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
}

.heading .top {
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	background-color: #FFC000;
}

.heading .top .hampton-logo {
	width: 80%;
	height: auto;
	margin: 20px auto;
	position: relative;
	display: block;
	box-sizing: border-box;
	*background-color: orange;
}

.heading .top .hampton-logo img {
	width: auto;
	height: 32px;
	position: relative;
	display: inline-block;
}

.heading .top .contact1 {
	width: 80%;
	height: auto;
	margin: 20px auto;
	position: relative;
	display: block;
	box-sizing: border-box;
	*background-color: orange;
}

.heading .top .contact1-mobile {
	width: 80%;
	height: auto;
	margin: 20px auto;
	position: relative;
	display: none;
	box-sizing: border-box;
	*background-color: orange;
}

.heading .top .contact1 p a, .heading .top .contact1-mobile p a {
	text-decoration: none;
	color: #000;
}

.heading .top .contact1 p, .heading .top .contact1-mobile p {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000;
}

.heading .top .contact1 p strong, .heading .top .contact1-mobile p strong {
	font-weight: 900;
}

.heading .bottom {
	width: 100%;
	height: auto;
	*margin: 5px auto;
	border-bottom: 3px solid #FFC000;
	position: relative;
	display: block;
	box-sizing: border-box;
	*background-color: green;
}
	

/********** Content **********/
.content1 {
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block;
	background-color: #000;
}

.content2 {
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block;
	background-color: #fff;
}

.content1 .left1 {
	width: 20%;
	height: auto;
	padding: 20px;
	margin: 20px;
	border: solid 3px #FFC000;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	*background-color: #000;
	float: left;
}

.content1 .rightwrap {
	width: 20%;
	height: auto;

	float: right;
}

.content1 .rightwrap .right1{
	padding: 20px;
	margin: 20px;
	border: solid 3px #FFC000;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	*background-color: #000;
}

.content1 .left1 h1 {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 36px;
	letter-spacing: 2px;
	text-align: left;
	text-transform: uppercase;
	color: #FFC000;
}

.content1 .left1 ul {
	margin-bottom: 28px;
	*margin-bottom: 48px;
}

.content1 .left1 ul li {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 18px;
	text-align: left;
	color: #fff;
}

.content1 .left1 ul li a {
	text-decoration: none;
	color: #fff;
	transition: ease-out 0.15s;
}

.content1 .left1 ul li a:hover {
	color: #FFC000;
	transition: ease-in 0.15s;
}

.content1 .left1 .currency-logo {
	width: 70%;
	height: auto;
	padding: 10px 10px 7px 10px;
	margin: 10px auto;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	background-color: #FFC000;
	transition: ease-out 0.15s;
}

.content1 .left1 .currency-logo:hover {
	background-color: rgba(254, 203, 50, 0.75);
	transition: ease-in 0.15s;
}

.content1 .left1 .currency-logo img {
	width: 100%;
	height: auto;
	margin: 0px auto;
}

.content1 .slideshow {
	width: 54%;
	height: 550px;
	margin: 20px auto;
	position: relative;
	display: inline-block;
	*background-color: green;
	vertical-align: middle;
	overflow: hidden;
}

.content1 .right1 .logo1 {
	width: 100%;
	height: auto;
	margin: 10px auto;
	position: relative;
	display: inline-block;
	*background-color: green;
}

.content1 .right1 .logo1 img {
	width: 100%;
	height: auto;
	margin: 0px auto;
}

.content1 .background1 {
	width: 100%;
	height: auto;
	background: url(../siteart/images/dark-triangles.png);
	background-repeat: repeat;
}
	

.content1 .background2 {
	width: 100%;
	height: auto;
	background: -webkit-linear-gradient(black, transparent, black);
}

.content1 .about {
	width: 100%;
	height: auto;
	margin: 20px auto;
	position: relative;
	display: inline-block;
	*background-color: orange;
}

.content1 .about .map {
	width: 90%;
	height: 500px;
	position: relative;
	display: inline-block;
}

.content1 .about h1, .content1 .contact2 h1 {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 48px;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	word-spacing: 5px;
	letter-spacing: 3px;
	color: #fff;
}

.content1 .about p {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	width: 80%;
	margin: 0px auto;
	color: #fff;
}

.content1 .contact2 {
	width: 100%;
	height: auto;
	margin: 48px auto 20px auto;
	position: relative;
	display: inline-block;
	*background-color: orange;
}

.content1 .contact2 p {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	width: auto;
	margin: 0px 36px;
	display: inline-block;
	color: #fff;
}

.content1 .contact2 p strong {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FFC000;
}

.content1 .contact2 p a {
	color: #fff;
	text-decoration: none;
	transition: ease-out 0.15s;
}

.content1 .contact2 p a:hover {
	color: #FFC000;
	transition: ease-in 0.15s;
}

.content1 .categories {
	width: 95%;
	height: auto;
	margin: 36px auto;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
}

.categories .category1, .categories .category2, .categories .category3, .categories .category4, .categories .category5, .categories .category6, .categories .category7, .categories .category8, .categories .category9, .categories .category10, .categories .category11, .categories .category12, .category13, .category14, .category15, .category16, .category17 {
	width: 300px;
	height: 200px;
	position: relative;
	display: inline-block;
	background-color: #000;
	transition: ease-out 0.15s;
}

.categories .category1:hover, .categories .category2:hover, .categories .category3:hover, .categories .category4:hover, .categories .category5:hover, .categories .category6:hover, .categories .category7:hover, .categories .category8:hover, .categories .category9:hover, .categories .category10:hover, .categories .category11:hover, .categories .category12:hover, .categories .category13:hover, .categories .category14:hover, .categories .category15:hover, .categories .category16:hover, .categories .category17:hover{
	background-color: #FFC000;
	transition: ease-in 0.15s;
}

.categories .category1 {
	background: url(../siteart/images/buttons/dozer.png);
	background-position: center;
	background-size: cover;
}

.categories .category2 {
	background: url(../siteart/images/buttons/loader.png);
	background-position: center;
	background-size: cover;
}

.categories .category3 {
	background: url(../siteart/images/buttons/backhoe.png);
	background-position: center;
	background-size: cover;
}

.categories .category4 {
	background: url(../siteart/images/buttons/compactor.png);
	background-position: center;
	background-size: cover;
}

.categories .category5 {
	background: url(../siteart/images/buttons/paver.png);
	background-position: center;
	background-size: cover;
}

.categories .category6 {
	background: url(../siteart/images/buttons/forklift.png);
	background-position: center;
	background-size: cover;
}

.categories .category7 {
	background: url(../siteart/images/buttons/skidsteer.png);
	background-position: center;
	background-size: cover;
}

.categories .category8 {
	background: url(../siteart/images/buttons/excavator.png);
	background-position: center;
	background-size: cover;
}

.categories .category9 {
	background: url(../siteart/images/buttons/motor_grader.png);
	background-position: center;
	background-size: cover;
}

.categories .category10 {
	background: url(../siteart/images/buttons/scraper.png);
	background-position: center;
	background-size: cover;
}

.categories .category11 {
	background: url(../siteart/images/buttons/off_highway.png);
	background-position: center;
	background-size: cover;
}

.categories .category12 {
	background: url(../siteart/images/buttons/all.png);
	background-position: center;
	background-size: cover;
}

.categories .category13 {
	background: url(../siteart/images/buttons/crawler_loader.png);
	background-position: center;
	background-size: cover;
}

.categories .category14 {
	background: url(../siteart/images/buttons/crane.png);
	background-position: center;
	background-size: cover;
}

.categories .category15 {
	background: url(../siteart/images/buttons/aggregate.png);
	background-position: center;
	background-size: cover;
}

.categories .category16 {
	background: url("../siteart/images/buttons/lift4.png");
	background-position: center;
	background-size: cover;
}

.categories .category17 {
	background: url("../siteart/images/buttons/dumper.png");
	background-position: center;
	background-size: cover;
}

.content1 .categories h1 {
	font-size: 24px;
	text-shadow: 0px 0px 10px #000;
	margin: 85px auto;
	position: relative;
	color: #fff;
}



/********** Form **********/


/********** Inventory **********/
.body-wrapper {
	margin: 20px auto;
}

.contain {
	width: 95%;
	margin: 0px auto;
	*color: #fff;
}

/*
.hosted-content h3 {
	color: #fff !important;
}
*/

.cf {
	text-align: center !important;
	*color: #fff !important;
}

.cf h1 {
	text-align: left !important;
}

.cf a {
	*color: #fff;
}

.hosted-content .listings-wrapper .currency-box {
	text-align: left !important;
}

.hosted-content .listings-wrapper .sort-box {
	*background: #000 !important;
	text-align: right !important;
}

.hosted-content .listings-wrapper .listings-list .listing-banner {
	background: #FFC000 !important;
}

.hosted-content .listings-wrapper .listings-list .listing-banner h2 {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	word-spacing: 2px;
	color: #000;
}

.listings-wrapper .listing-largecard.column3, .listings-wrapper .listing-thumb.column3, .listings-wrapper .listing-smallcard.column3 {
	margin: 5px !important;
}

.hosted-content .listings-detail-wrapper .information-box {
	text-align: left !important;
}

.hosted-content .listings-detail-wrapper .information-box {
	text-transform: capitalize !important;
}

.border-bottom div {
	text-align: left !important;
}

.scroll-list {
	color: #000 !important;
}

.search-subheader {
	color: #000 !important;
}

.hosted-content .listings-detail-wrapper .information-box :nth-child(2n).row {
	background-color: #888B8D !important;
}

.contain {
	width: 77% !important;
}

.hosted-content input[type='submit'], .hosted-content button[type='submit'], .hosted-content .btn, .hosted-content .button {
	background: #888B8D !important;
}

.hosted-content input[type='submit']:hover, .hosted-content button[type='submit']:hover, .hosted-content .btn:hover, .hosted-content .button:hover {
	background: #C0C0C0 !important;
}

.hosted-content .red, .hosted-content .redtext, .hosted-content .field-validation-error {
	font-size: 16px !important;
}

.view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .detail-content .detail-main-body .main-detail-data .offer-btn, .modal-bg .form-bottom .captcha-and-submit .captcha-placeholder button, .compare-listings-container .compare-container .button, .detail-content-mobile .contact-options a, .detail-content-mobile .detail-contact-bar .contact-bar-btn {
	background: #FFC000 !important; color: #000 !important; font-weight: bold !important;
}
.faceted-search-content .selected-facets-container .selected-header {
	text-align: left !important;
}
.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title h3, .compare-listings-container .compare-container .compare-price {
	color: #000 !important;
}

.detail-content .detail-additional-data .data-row .data-label, .fin-calc-mobile>a, #calculator-mobile .modal-content .form-main-content .modal-left-col .calculator-btns .calculator-btn, .detail-content-mobile .detail-additional-data .data-row .data-label {
	color: #FFC000 !important;
	background: #000 !important;
	font-weight: bold !important;
}

.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a {
	color: #000 !important;
	border-color: #000 !important;
}
/********** Footer **********/
.footing {
	width: 100%;
	height: auto;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	background-color: #888B8D;
}

.divfooter {
	font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 12px;
	width: 80%;
	margin: 20px auto;
	color: #fff;
}

.footerlink {
	color: #fff;
}

.scrolling-wrap {
	width: 100%;
	height: 90px;
	border-top: 10px solid #FFC000;
	border-bottom: 10px solid #FFC000;
	overflow: hidden;
}

.scrolling {
	width: 100%;
}


.container {
	text-align: left !important;
}
/************************************************ Responsive Styles **/
@media screen and (max-width: 1500px) and (min-width: 1281) {
	.content1 .left1 h1 {
		font-size: 28px;
	}
	
	.content1 .left1 ul li {
		font-size: 16px;
	}
	
	.content1 .slideshow {
		width: 53%;
		height: 500px;
	}
	
	.slider-wrapper {
		width: 135% !important;
	}
	
	.content1 .right1 .logo1 {
		margin: 30px auto;
	}
	
	.content1 .about h1, .content1 .contact2 h1 {
		font-size: 36px;
	}
	
	.content1 .about p {
		font-size: 18px;
		line-height: 25px;
	}
}


@media screen and (max-width: 1280px) and (min-width: 1024px) {
	.content1 .left1 {
		width: 18%;
	}
	
	.content1 .rightwrap {
		width: 18%;
	}
	
	.content1 .left1 h1 {
		font-size: 21px;
	}
	
	.content1 .left1 ul {
		margin-bottom: 20px;
	}
	
	.content1 .left1 ul li {
		font-size: 14px;
	}
	
	.content1 .slideshow {
		width: 56%;
		height: 410px;
	}
	
	.slider-wrapper {
		width: 132% !important;
	}
	
	.content1 .right1 .logo1 {
		margin: 31px auto;
	}
	
	.content1 .about h1, .content1 .contact2 h1 {
		font-size: 36px;
	}
	
	.content1 .about p {
		font-size: 16px;
		line-height: 24px;
	}
	
	.content1 .contact2 p {
		font-size: 16px;
		line-height: 24px;
		margin: 0px 40px;
	}
	
	.content1 .about .map {
		height: 450px;
	}
}


@media screen and (max-width: 1023px) and (min-width: 771px) {
	.divider1 {
		width: 70%;
	}
	
	.divider2 {
		width: 40%;
	}
	
	.heading .top .contact1 {
		width: 100%;
	}
	
	.heading .top .contact1 p, .heading .top .contact1-mobile p {
		font-size: 16px;
	}
	
	.content1 .left1 {
		width: 85%;
		padding: 0px;
		margin: 20px;
		margin-bottom: 36px;
		float: none;
	}
	
	.content1 .rightwrap {
		width: 85%;
		float: none;
		margin:0 auto;
	}
	
	.content1 .right1 .logo1 {
		margin: 15px auto;
	}
	
	.content1 .right1 .logo1 img {
		width: 75%;
	}
	
	.content1 .left1 h1 {
		text-align: center;
	}
	
	.content1 .left1 ul li {
		text-align: center;
	}
	
	.content1 .left1 .express-logo {
		width: 40%;
	}
	
	.content1 .slideshow {
		width: 100%;
		height: auto;
	}
	
	.contact1 .right1 .logo1 {
		width: 70%;
		margin: 20px auto;
	}
	
	.content1 .about h1, .content1 .contact2 h1 {
		font-size: 36px;
	}
	
	.content1 .about p {
		font-size: 16px;
		line-height: 24px;
	}
	
	.content1 .contact2 p {
		font-size: 16px;
		line-height: 24px;
		margin: 0px 20px;
	}
	
	.content1 .about .map {
		height: 300px;
	}
}
	

@media screen and (max-width: 770px) {
	.heading .top .hampton-logo {
		width: auto;
	}
	
	.heading .top .hampton-logo img {
		height: 19.5px;
	}
	
	.heading .top .contact1 {
		display: none;
	}
	
	.heading .top .contact1-mobile {
		display: inline-block;
	}
	
	.heading .top .contact1-mobile {
		width: 90%;
	}
	
	.divider1 {
		width: 70%;
	}
	
	.divider2 {
		width: 40%;
	}
	
	.heading .top .contact1 {
		width: 100%;
	}
	
	.heading .top .contact1 p, .heading .top .contact1-mobile p {
		font-size: 14px;
		text-transform: capitalize;
	}
	
	.content1 .left1 {
		width: 85%;
		padding: 0px;
		margin: 20px;
		margin-bottom: 36px;
		float: none;
	}
	
	.content1 .rightwrap {
		width: 85%;
		float: none;
		margin:0 auto;
	}
	
	.content1 .right1 .logo1 {
		margin: 15px auto;
	}
	
	.content1 .right1 .logo1 img {
		width: 75%;
	}
	
	.content1 .left1 h1 {
		text-align: center;
	}
	
	.content1 .left1 ul li {
		text-align: center;
	}
	
	.content1 .left1 .express-logo {
		width: 65%;
	}
	
	.content1 .slideshow {
		width: 100%;
		height: auto;
	}
	
	.contact1 .right1 .logo1 {
		width: 70%;
		margin: 20px auto;
	}
	
	.content1 .about h1, .content1 .contact2 h1 {
		font-size: 32px;
	}
	
	.content1 .about p {
		font-size: 16px;
		line-height: 24px;
	}
	
	.content1 .contact2 p {
		font-size: 16px;
		line-height: 24px;
		width: 100%;
		margin: 10px auto;
	}
	
	.content1 .about .map {
		height: 200px;
	}
}