/***** 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 {

}

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


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
.header {display: flex; align-items: center;justify-content: space-between; padding: 1% 2%; box-sizing: content-box;}
.logosect {width: 25%;}
.logosect img { width: 280px;}
.headerbtnsect {width: 20%; display: flex; justify-content: flex-end;}
.headerbtnsect i{padding-right: 10px;}
.headerbtn{clip-path: polygon(0% 0%, 90% 0, 100% 28%, 100% 100%, 0 100%); background: #cc252d;
 padding: 8px 30px; color: #fff; font-family: 'Oswald', sans-serif; transition-duration: 0.5s; }
.headerbtn:hover{clip-path: polygon(0% 0%, 100% 0, 100% 0%, 100% 100%, 0 100%);}
.headernav {width: 65%;}
.herosect{
	background: url(/siteart/j-4heroimg.jpg);
    width: 100%;
    height: 780px;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
}
.mobileherosect{display: none;}
.herotext {
    background: #fff;
    margin: 0% 3% 0% 2%;
    width: 28%;
    padding: 11% 5% 5% 5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
}
.redbtn{clip-path: polygon(0% 0%, 90% 0, 100% 28%, 100% 100%, 0 100%); background: #cc252d; padding: 8px 40px; color: #fff; font-family: 'Oswald', sans-serif; transition-duration: 0.5s; margin-right: 20px;}
.redbtn:hover{clip-path: polygon(0% 0%, 100% 0, 100% 0%, 100% 100%, 0 100%);}
.heroheader{font-family: 'Oswald', sans-serif;  font-size: 65px; line-height: 60px;}
.herosubhead {
    width: 100%;
    padding:30px 90px 35px 0px;
    font-family: 'Archivo', sans-serif;
    font-size: 24px;
}
.flexbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	align-items: center;
}
.halfsect {
    width: 50%;
}
.thirdsect{width: 30%}
.twothirdsect{width: 65%}
.twothirdsect p{width: 65%}
.pagepadding{padding: 2% 5%;}
.lgheadertext {
    font-family: 'Archivo';
    font-weight: 400;
    font-size: 42px;
}
.headertext {
    font-family: 'Archivo';
    font-weight: 400;
    font-size: 32px;
}
.smheadertext{
font-family: 'Oswald', sans-serif;
font-size: 24px;
width: 100%;
display: block;
}
.black{color: #000;}
.red{color: #cc252d;}
.white{color: #fff;}
.paratext {
    font-family: 'Oswald';
    font-size: 20px;
    font-weight: 300;
    line-height: 35px;
}
.hpaboutsect{padding-top: 6%;}
.hpaboutsect p{width: 80%; padding-left: 20%;}
iframe.scrolling {
    width: 100%;
    padding: 7% 0%;
	height: 90px;
}
.greyborder{clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0 100%); background: #dfdfdf; height: 600px; width: 50px;}
.hpmap {
    width: 100%;
    height: 450px;
}
.hpcontactheader {
    clip-path: polygon(0% 0%, 92% 0, 100% 35%, 100% 100%, 0 100%);
    background: #cc252f;
    padding: 6% 15%;
    position: relative;
    left: -100px;
}
.hpcontactleft {
    width: 35%;
    padding: 0% 5%;
}
.hpcontactleft p{
   	width: 80%;
    padding: 30px 0px 10px 0px;
}
.paratext.bold.black{
padding: 10px 0px 45px 0px;
}
.hpcontactleft i{
 	font-size: 25px;
}
.bold{font-weight: 500;}
.hpcontactlink {
    color: #cc252f;
    font-family: 'Oswald';
    font-size: 24px;
    padding: 0px 25px;
    font-weight: 400;
	transition-duration: 0.5s;
}
.hpcontactlink:hover {font-weight: 500;}
.hpcontactright {
    width: 50%;
}
.hpaddress{
	padding: 10px 0px 30px 0px;
    width: 100%;
    display: block;
}
.hpmanusect{padding: 30px 50px 70px 50px;display: flex; flex-wrap: wrap; justify-content: flex-start;}
.hpmanusect .smheadertext.fadeInUp.animated{padding-bottom: 8px; border-bottom: 2px solid #cc252f;}
.hplogos {padding: 30px 0px;}
.hplogos img {margin-right:50px;}
/*---CONTACT PAGE--------------------------------*/
.cpsect a{display: block; color: #000; width: 100%; padding: 10px 0px;}
.cplink{padding-bottom: 20px; font-size: 18px; font-family: 'Oswald'; color: #cc252f!important;}
.cplink:hover{font-weight: 500;}
.cplink i{padding-right: 20px;}
.cpsect {padding: 4% 0%;}
.subhead{ font-family: 'Archivo'; font-weight: 500; font-size: 18px; padding-bottom: 10px;}
.lgsubhead{ font-family: 'Archivo'; font-weight: 500; font-size: 24px;}
.cptext{font-family: 'Oswald';  padding-bottom: 2px; font-weight: 300;}
.cptitle{clip-path: polygon(0% 0%, 90% 0, 100% 28%, 100% 100%, 0 100%);
    background: #cc252d; width: 75%; padding: 20px 30px; margin-bottom: 15px;}
.cppage{ align-items: flex-start;}


/*--------THANK YOU STYLES--------------------*/

.thankyoupage p{padding: 25px 0px 50px 0px; width: 65%; }
.thankyoupage {padding: 5% 6% 10% 6%;}


/*--------FORM STYLES--------------------*/
.fullformfields {
    width: 100%;
    padding: 2px 30px;
    box-sizing: border-box;
    height: 45px;
	font-family: 'Archivo'; 
    margin: 5px 0px;
}
.comments{
    width: 100%;
    padding: 15px 30px;
    box-sizing: border-box;
	font-family: 'Archivo'; 
    height: 125px;
    margin: 5px 0px;	
}
.cpformsect{width: 60%;}
.cpleft{width: 40%;}
.submit{
    background: #cc252d;
    padding: 8px 30px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
	border: none!important;
	cursor: pointer;
	font-size: 16px;
}
.CaptchaPanel{    
	text-align: left!important;
    padding: 0px!important;
}
.CaptchaMessagePanel{	font-family: 'Archivo'; font-size: 14px; }
.CaptchaWhatsThisPanel a{	font-family: 'Oswald'; color: #000; font-size: 14px;}
/*-------- FOOTER STYLES ----------------*/
.footer{display: flex; width: 100%; align-items: center; box-sizing: content-box;}
.thinredline{background:#cc252d; height: 1px; width: 60%; }
.footertriangle{clip-path: polygon(100% 31%, 0% 100%, 100% 100%); background:#cc252d; }
.footerlogo { width: 15%; padding: 20px 0% 20px 3%;}
.footerlogo img{ width: 200px;}

.footernav {
    width: 33%;
    display: flex;
    justify-content: space-between;
    padding-right: 5%;
}
.footerinfo {
    display: flex;
    align-items: center;
    width: 32%;
	justify-content: center;
}
.footerinfo p{
    padding-left: 30px;
}
.footerbottom {
    background: #35363a;
    text-align: right;
    padding: 12px 5%;
}
.footertriangle {
    width: 12%;
    clip-path: polygon(100% 31%, 0% 100%, 100% 100%);
    background: #cc252d;
    height: 130px;
}
.footernav a:hover {
	font-weight: 500;
}
.footerlink {
    font-family: 'Oswald';
    color: #35363a;
    padding: 0px 15px;
}
.footertext {
    font-family: 'Oswald';
    font-size: 14px;
}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.invpadding{padding: 2% 5%; font-family: 'Archivo'; }
span.list-title-text {
    color: #000!important;
    font-family: 'Archivo'!important;
    font-weight: 500!important;
}
.list-top-section .list-title .list-listings-count {
    line-height: 27px;
    color: #cc252d!important;
    font-family: 'Oswald'!important;
}

.list-content .media-buttons .print-this, .list-content .media-buttons .email-this{
    border: none!important;
    border-radius: 0px!important;
    background-color: #cc252d!important;
	color: #fff!important;
}
.list-content .listing-portion-title{
    font-family: 'Archivo'!important;	
}
.list-content .price-container .price{
    color: #cc252d!important;	
	font-family: 'Oswald'!important;
}
.view-listing-details-link{
    background-color: #cc252d!important;
    border: none!important;
    border-radius: 0px!important;
    color: #fff!important;	
}
.list-content .list-container .buy-btn, .list-content .list-container .contact-btn, .list-content .list-container .check-availability, .list-content .list-container .email-seller, .list-content .list-container .video-chat, .list-content .list-container .facebook-messenger, .list-content .list-container .whatsapp, .list-content .list-container .text {
    background-color: #35363a!important;
    color: #fff!important;
    border-radius: 0px!important;
}
.list-top-section .sticky-top-menu .listing-option-bar-content .list-listings-count{
    color: #cc252d!important;	
	
}
.mobile-option-bar .mobile-option-bar-filter{
	color: #000000!important;
}
.faceted-search-content .mobile-done-button-container .mobile-done-button{
	background: #cc252d!important;
}
.parts-list-content .error-message{
	color: #000!important;
}
.parts-list-content .media-buttons .print-this, .parts-list-content .media-buttons .email-this{  border: none!important;
    border-radius: 0px!important;
    background-color: #cc252d!important;
	color: #fff!important;}
.parts-list-content .parts-title-and-breadcrumbs .parts-title .parts-title-text{
	    color: #000!important;
    font-family: 'Archivo'!important;
    font-weight: 500!important;
}
.faceted-search-content .selected-facets-container .selected-facet{
background: #cc252d!important;		
}
.list-content .list-error-container .info button:not(.login-button){background-color: #cc252d!important;}
/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1680px) {
	.herosect{height: 700px;}

}
@media only screen and (max-width: 1550px) {
	.herosect{height: 630px;}
	.herotext{
	margin: 0% 3% 0% 2%;
    width: 35%;
    padding: 11% 2% 5% 5%;
	}
}
@media only screen and (max-width: 1500px) {
.hpcontactheader {
    padding: 6% 5% 6% 15%;
    left: -78px;
    width: 100%;
}
.hpcontactleft {
    width: 37%;
    padding: 0% 3% 0% 5%;
}
.herotext{padding: 7% 2% 5% 5%;}
}
@media only screen and (max-width: 1350px) {
.footerlogo {
	width: 22%;}
.footernav{width: 30%; padding-right: 2%;}
.footerinfo p {padding-left: 12px;}
.footertriangle { width: 6%;}
.footerinfo{width: 40%;}
.greyborder {
	clip-path: polygon(0 5%, 100% 0%, 100% 90%, 0 100%);}
.herosect {
    height: 540px;
}
	
}
@media only screen and (max-width: 1295px) {
	.heroheader{font-size: 55px;
    line-height: 50px;}	
	.redbtn{margin-bottom: 8px;}
	.herosubhead{padding: 30px 90px 18px 0px;}
}
@media only screen and (max-width: 1200px) {
.logosect img {
    width: 230px;
}
.headerbtnsect {
	width: 20%;
}	
.herosubhead{ font-size: 20px;}

}

@media only screen and (max-width: 1150px) {
.cpleft {
    width: 100%;
}	
.cpsect {
    padding: 1% 0% 3% 0%;
}
.cpformsect {
    width: 100%;
}
.cptitle{width: 94%; padding: 25px 9px;}
.fullformfields {padding: 2px 5px;}
.comments{padding: 20px 5px;}
.headerbtn{padding: 8px 16px}
}
@media only screen and (max-width: 1080px) {
.hpcontactleft {
    width: 80%;
    padding: 0% 3% 0% 5%;
}	
.hpcontactheader {
    padding: 4% 5% 4% 9%;
    left: -60px;
    width: 90%;
}
.hpcontactright {
    width: 92%;
}
.herosect{background: #fff;}
.mobileherosect {
    background: url(/siteart/mobile-j-4heroimg.jpg);
    height: 478px;
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.herosubhead{padding: 30px 90px 22px 0px;}
.herosect{flex-wrap: wrap; height: auto;}	
.herotext{width: 100%;}
}
@media only screen and (max-width: 1023px) {
	.headerbtnsect{display: none;}
	.footerinfo{display: none;}
	.footerlogo {width: 100%; padding: 20px 0% 0px 3%;}
	.footernav {width: 88%; padding: 0% 3%;}
	.footertriangle{height: 95px;}
	.footer {flex-wrap: wrap;}
}

@media only screen and (max-width: 940px) {
.thirdsect {
    width: 100%;
    padding-bottom: 20px;
}
.twothirdsect {
    width: 100%;
}
.hpaboutsect p {
    width: 90%;
    padding-left: 0%;
}
.hpaboutsect {
    padding-top: 12%;
}
}
@media only screen and (max-width: 900px) {
.thankyoupage {
    padding: 5% 2% 10% 3%;
}	
.thankyoupage p {
    width: 90%;
}
}
@media only screen and (max-width: 700px) {
	.lgheadertext{font-size: 32px; line-height: 28px;}	
	.smheadertext{font-size: 18px;}
	.thankyoupage { padding: 10% 2% 20% 3%;}
	.hpcontactheader {
    padding: 4% 5% 4% 7%;
    left: -35px;
    width: 92%;}
	.hpcontactleft p {
	width: 100%;}
	.hpcontactright {
    width: 88%;}
	.hpcontactleft {
		width: 90%;
		padding: 0% 3% 12% 5%;}
	
}
@media only screen and (max-width: 500px) {
	.greyborder{display: none;}	
	.hpcontactright { width: 100%;}
	.hpcontactheader {
       padding: 8% 6%;
    left: 0px;
    width: 98%;
    clip-path: border-box;
	}
	.hpcontactleft {
		padding: 0% 0% 12% 0%;}
	.hpcontactleft p{padding: 30px 5% 10px 5%;}
	.hpaddress {
		padding: 10px 5% 30px 5%!important;}
	.hpcontactleft i{padding-left: 5%;}
	.hpaboutsect {
    padding-top: 14%;
}
	.mobileherosect {
	height: 370px;
	}
	.heroheader {
    font-size: 42px;
    line-height: 42px;
}
	.herosect{border-bottom: #cc252f solid 0.5px;}
	.herosubhead{font-size: 18px; padding: 20px 10px 25px 0px;}
	.herotext { padding: 7% 2% 12% 3%;}
	.hpmanusect {padding: 30px 15px 70px 15px;}
	.hplogos img {width: 80%;}
}
@media only screen and (max-width: 400px) {
.logosect img { width: 200px;}	
.footerlogo img { width: 150px;}
.footernav {width: 100%; flex-wrap: wrap;}
.footerlink{padding: 9px 15px; width: 100%}
.footertriangle { width: 100%; margin-top: -50px;}
.cpsect { padding: 5% 0%;}
.cpleft{padding: 20px 0px 40px 0px;}
.cpformsect{padding-bottom: 50px;}
.mobileherosect{height: 290px;}
}
@media only screen and (max-width: 280px) {
	.hpcontactlink{font-size: 20px;}	
}
@media only screen and (max-width: 255px) {
	.header{
		flex-wrap: wrap;
	}	
	.logosect {
    width: 100%;
	text-align:center;
	}
	.logosect img {
    width: 90%;
	}
	.footerlogo img{
		width: 90%;
	}
	.footertriangle{display: none;}
	.footer{padding-bottom: 20px;}
	.hplogos img {width: 100%;}
}