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

*{
    margin:0;
    padding: 0;
}




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;
}

/*-------- UNIVERSAL STYLES --------*/
section{
    padding: 50px 40px;
}

button{
    border: none;
    background-color: #F2682A;
    transition:.25s;
	cursor:pointer;
}

button:hover{
    background-color: #DB4E0F;
    color: black;
}

button a{
    font-size: 16px;
    padding: 5px 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 9px;
    transition:.25s;
    font-family: "Manrope", serif;
    padding: 15px 45px;
    color: #000;
    font-weight: 600;
}

button:hover a{
    color: black;
}

.secondary-btn{
    border: none;
    background-color: transparent;
    transition:.25s;
}

    a{
        color: #000;
		cursor:pointer;
    }

    i{
        color: #F2682A;
        transition:.25s;
    }


.secondary-btn:hover{
    background-color: transparent;

    a{
        color: #000;
    }

    i{
        padding-left: 20px;
    }
}

.button-container{
    display: flex;
    gap: 25px;
}

.drk-background{
    background-color: black;
    color: white;
}

.lgt-background{
    background-color: gray;
}

.span{
    font-weight: 700;
}

p {font-size: 18px;}
/*-------- FLEX STYLES --------*/
.flexy{
    display: flex;
    gap: 25px;
}

.col-2{
    width: 50%;
}

.col-2-lrg{
    width: 60%;
}

.col-2-sml{
    width: 40%;
}

.col-3 {
    width: 33.33%;
}

.col-4{
    width: 25%;
}


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

body {
    font-family: "Manrope", serif;
}

h1{
    font-size: 52px;
    line-height: 45px;

    span{
        font-size: 24px;
        font-weight: 400;
        
    }
}


h2 {font-size: 40px;

    span{
        font-size: 24px;
        font-weight: 400;
    }
}

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


hr{border:#000 1px solid;}


/*          HEADER           */
.logo {
	max-width: 290px;
}

.logo img {
	max-width: 100%;
}

/*------ Category search on homepage -----*/

.category-search {margin: 0 auto; width: 80%;position: relative;top: 250px;}
.category-search input {padding: 40px 40px;border:none; width:100%;font-size:16px;font-weight: 500;box-sizing:border-box}
.detailed-search{width: 100%;box-shadow: 0px -2px 24px rgba(0,0,0,0.2);}
.search-input {width: 90%;}
.search-input.search {width: 40%;}
input[type="submit"] {background:#F2682A;font-weight:600;cursor:pointer;}
/*-----------*/

.top-nav {
	background-color: #fff;
	color: #000;
	padding: 30px 40px;
	display: flex;
	justify-content: space-between;

    .flexy{
        justify-content: flex-end;
    }

    .top-info{
        display: flex;
        align-items: center;
        gap: 10px;

        span{
            font-size: 13px;
        }

        a{
            color: #000;
            font-weight: 700;
        }

        i{
            font-size: 18px;
        }
    }

    
        button{
            background-color: #000 !important;
            
            a{
                padding: 15px 25px;
            } 

            i{
                color: #fff;
            }
        }

}

.top-links{
	gap: 25px;
}

.top-links a{
	color: #000;
}


.left-menu {
    padding-left: 40px;
}

.right-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;

    i{
        color: #fff;
    }
}

.bottom-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	background-color: black;
}

.last-btn{

    a{
        font-weight: 700 !important;
        padding: 32px 50px;
        color: #000;
    }

    button{
        background-color: #F2682A;
    }
    
    button:hover{
        background-color: #DB4E0F;
    }
}

.bottom-links{
    a{
        font-weight: 700 !important;
    }
   
 i{
    color: #F2682A;
    font-size: 12px;
    padding-left: 5px;
 }
}


span.bold {color: #000; font-weight: 600;}

/*----  REVIEWS PAGES ----*/

.reviews-section{
    h2{
        text-align: center;
    }

}

.reviews-grid{
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.review-item{
    background-color: #fafbfd;
    padding: 30px;

    p{
        margin-bottom: 25px;
    }
    span{
        font-size: 14px;
    }
}

.rates{
    color: #DB4E0F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    b{
        font-size: 26px;
        color: #000;
    }


}

.view-more{

}

.view-parts{
	text-align: center;
	margin-top: 50px;
}



.cover.differentials-cover,.cover.engines-cover,.cover.transmissions-cover,.cover.used-truck-parts-cover {background-image: url("../siteart/parts-header.jpg") !important;}


.cover.finance-cover{background-image: url("../siteart/finance.jpg")}
.cover .request-quote {background-image: url("../siteart/finance.jpg")}
.cover.warranties-cover {background-image: url("../siteart/warranties.jpg")}
.cover.about-cover {background-image: url("../siteart/about-us.jpg")}
.cover.contact-cover {background-image: url("../siteart/contact-us.jpg")}
/*---- Other categories ----*/
.cat{
    color: #000;
}
.cat img {width: 100%; max-width: 418px;}

.flex {display: flex;}


/*----- Home page -------------------------*/

/*---- Why Category ----*/
.flex.cat-wrapper {width: 90%; margin: 0 auto; box-sizing: border-box;}
.why-hd-truck-repairs .flex {gap: 30px; justify-content: center;}
.why-hd-truck-repairs h2 {text-align: center; margin-bottom: 50px;}
section.why-hd-truck-repairs {padding: 150px 0;}
.cat h3 {font-size: 30px; font-weight: 300; margin-top: 20px;}
.cat p {width: 100%; max-width: 300px;}
/*------- Brands -----------*/
.brands img {width: 100%; max-width: 162px;}
.Explore-and-contact {background: #fafbfd;padding: 70px 0;position: relative;}
.brand-cat {padding: 40px 50px;background: #fff;}
.brands.flex {justify-content: center; gap: 30px;}
.brands {margin-top: 40px;}
.Explore-and-contact > div {width: 90%;margin: 0 auto;}


.brand-cat:hover,.brand-cat:active,.brand-cat:focus {box-shadow: 0px -2px 24px rgba(0,0,0,0.2);}
/*------- Contact ---------*/

section.contact-us-section { padding: 202px 0px !important;width: 90%; margin: 0 auto;}
.contact-us-section .left {width:100%; max-width: 450px;margin-left: 70px;}
.contact-us-section .Image {width: 100%;} 
.right img {width: 100%;max-width:960px;position: absolute;right: 0;bottom: -47px;}
.Explore-and-contact > div header a:hover,.Explore-and-contact > div header a:active,.Explore-and-contact > div header a:focus {padding-right: 30px;}

/*--------Search Form--------------*/

/*--- Why us section ---*/
.why-category p {width: 100%;max-width: 220px;text-align: center;
}

.Why-choose-us .flex {gap: 30px; justify-content: center;}

.why-category {padding: 38px 40px;background: #fafbfd;display: flex; flex-direction: column;align-items: center;}
.Why-choose-us .flex {gap: 30px;justify-content: center;}
.why-category img{width: 100%;max-width: 80px;margin-bottom:13px;}
section.Why-choose-us {padding: 121px 40px 90px;}
.Why-choose-us h2 {text-align: center;margin-bottom: 45px;}
.contact-us-section button{margin-top: 40px;background:#F2682A;}
.contact-us-section button a {padding:15px 45px;color:#000;font-weight: 600;}


/*------ Have any questions? ------*/
.have-any-questions {padding: 60px 50px;display: flex; justify-content: space-between;color: #fff;background:#000;}
.have-any-questions h3{font-size:32px;}
.have-any-questions button {background: none; a{color:#fff;} white-space: nowrap;}


.have-any-questions:hover{a{color: #fff;}}

/*----- About page -------------------------*/
.about-wrapper.flex {justify-content: space-evenly;gap:40px;}
.map {max-width: 780px;width: 100%;}
.about-wrapper.flex .main-text{max-width: 60%;padding: 0 0 40px;}
.about-wrapper.flex .bullets.main-text {max-width: 40%;}
.basic-cat.flex {flex-direction: column;padding:38px 10px;background-color:#fafbfd;width:270px;margin-top: 70px;}
.basic-categories {display: flex;flex-direction:row; gap:20px;justify-content: center;flex-wrap:wrap;}
.basic-info {text-align: center;}
.basic-section {display:flex; flex-direction: row;}
.service-wrapper.flex {flex-direction: row;justify-content: space-between;width:80%;}
.products.flex {gap:60px;}


.basic-icon {font-size: 30px; margin-bottom:10px;color:#F2682A;}
/*---- Service section ---*/

section.section-text{width:90%; margin: 0 auto;}
section.service-section {padding: 60px 0px 100px;}
section.service-section h2{text-align: center;margin-bottom: 30px;}
.cat-flex {display: flex; flex-direction: row; flex-wrap: wrap;justify-content: center;gap: 30px;margin: 0 auto;}
.cat-flex .flex {flex-direction: column;}
.section-cat {padding:30px 20px;background:#fafbfd;width:100%;max-width:320px;text-align:center;}
#viewmore {margin-top: 30px;}

/*----- Product Section -----*/
button.view-more {margin: 30px auto;display: flex; text-align: center; padding: 20px 60px; background:#F2682A;}

section.products-section h2{text-align: center;margin-bottom: 30px;}

.at-work .flex {flex-direction: column;align-items: center; gap: 20px;}
.image-flex {display: flex; flex-wrap:wrap; gap: 20px; justify-content: center;}
.image-flex img {width: 100%; max-width: 500px;}

.video {text-align: center;padding: 0px;}


/*----- Warrenties page -------------------------*/
.warranty-coverage li {margin-bottom: 21px;margin-left:50px; list-style:none;}
.terms-conditions {width: 100%; max-width: 1100px;display: flex;}
.Engine-warranty .flex {flex-direction: column;}



.sub-sections {padding: 10px 0;}

.Engine-warranty{
    margin:0px !important;
}

.Engine-warranty #viewmore {padding: 30px 150px;}


.warranty-button {margin: 30px auto 0;}

.used-products .flex{align-items: flex-start;}
/*----- Contact page -------------------------*/


/*----- Search -------*/
.search-row{
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
}

/* .search-row button{
    transition:.3s ease;  
    background:#FDB813; 
    color:#fff; 
    transition: .25s;
}
    */


/*----- Financing page -------------------------*/

section.financing-options {padding: 50px 140px;}

.financing-options .section-cat {text-align: center;}
.financing-options .section-cat a {color: #000;}
.financing-options  button {padding: 20px 20px;background-color:#F2682A; color: #000;width:100%;max-width:281px;}
.financing-options .section-text {margin-top:50px;}
.financing-options  button:hover {background-color:#DB4E0F; color: #000;}
.search-row .formfield{
  width: 75%;
}

.synchrony-button {padding: 0 !important;width:100% !important;max-width:340px !important;}
#synchrony button:hover {background-color:#DB4E0F}

.finance.flex {gap: 30px; align-items: center;justify-content: center;}

.finance-img {padding:0 20px; background: #fff;}

.finance-img img {width: 100%; max-width: 250px;}
.finance-text {width:70%;}

#synchrony button {margin-top: 20px;background:#F2682A;}
.financing#synchrony button a {padding:15px 45px;color:#000;font-weight: 600;}

.search-row input[type="text"], .search-row select{
    padding: 15px 20px; 
    border: none; 
    box-shadow: none!important; 
    color: #6D6D6D !important;
    font-weight: 700; 
    background: #F9F9F9 !important;
   width: 100%;
   font-family: "Manrope", serif;
   box-sizing: border-box;
}

.search-row button:hover{
    background-color: #000;
    a{
        color: #fff;
    }

    cursor:pointer;
}

.search-row select option{
    background:#fff; 
    color:#000; 
    padding: 10px!important; 
    box-sizing:border-box;
}

.search-row select option:hover{
    background:#32356d;
}

.search-row select {
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}


.reviews {padding: 25px;background: #fff;height: 210px;width: 30%;}
.review-content {display: flex;flex-direction: column;justify-content: space-between;gap: 100px;}
/*----- Transmission page -------------------------*/
.equipment-photos-section .section-cat img {width:100%;}
.equipment-photos-section .section-cat {display:flex; flex-direction:column;align-items: center; gap: 12px;background: #fafbfd;}
.offer .basic-cat.flex {flex-direction: row;padding: 39px 43px;background-color: #fafbfd;width: 100%;margin-top: 0;justify-content: space-between;}
.offer .basic-cat.flex h3 {margin-bottom: 10px;}

.quality-transmission .about-wrapper.flex {justify-content: space-between;align-items: center;}
.orange {font-weight: 800;color: #F2682A;font-size:20px;}
.transmission-products h3 {font-size:24px;margin-bottom:10px;}
.bold {font-weight: 600;}
.equipment-photos-section {background:#fff;}
.main-text-button {margin-top:30px;}
.basic-cat.review.flex {padding: 49px 0px;}

.product-photos.flex {margin-top: 30px;}
.product-image img {width:100%;}
span.small-text {font-size:16px;}

.offer.flex {flex-direction:row;}

section.offer {padding: 30px 0;}

.review-content h3 {font-size: 24px;}
.review-content button.secondary-btn a {justify-content:flex-start !important; height: 90px;}

.transmission-products .flex{gap: 40px;}
/*----- Differential Parts -----------------------*/

.flex.services {margin-top:22px;justify-content: space-evenly;}

/*----- Equipment page ------------------------*/

.equipment-photos-section h2 {text-align:center;margin-bottom:40px;}
/*--------HOME STYLES--------------------*/
.home-cover{
    padding: 200px 0px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
	background-image: url("../siteart/homepage-header.jpg");
	background-repeat: no-repeat;
	background-position: center;
	object-position: cover;
	background-size: cover;
	background-color: #000;
	position:relative;
}

.home-cover h1 {color: #fff;}



.cover{
    padding: 75px 0px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
	background-image: url("../siteart/homepage-header.jpg");
	background-repeat: no-repeat;
	background-position: center;
	object-position: cover;
	background-size: cover;
	background-color: #000;
	position:relative;

    button{
        margin-top: 50px;
    }
}

.section-1{

}

.section-2{

}

.section-3{

}

/*--------FORM STYLES--------------------*/
.include-captcha{display:none;}

#formpage{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}
.form-field-flex{
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.form-field-flex input{
    border: 1px solid #8B8B8B25 !important;
    width: 50%;
    padding: 10px 10px;
    border-radius: 5px;
    font-family: 'Figtree', sans-serif;
}

#formpage textarea{
    border: 1px solid #8B8B8B25 !important;
    border-radius: 5px;
    padding: 10px 10px;
    font-family: 'Figtree', sans-serif;
}

input.submit-button{
    background-color: #F2682A;
    border: none;
    color: #000 !important;
    padding: 15px 45px;
    border: none;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    transition: .25s;
    cursor: pointer;
    font-size: 16px;
}

div#submit-btn{
    margin-top: 25px;
}

.button button{
    padding: 15px 45px;
    color: #000;
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
}


/*-------- CONTACT STYLES --------*/

.google-maps{ 
}
/*-------- FOOTER STYLES ----------------*/
footer{
    font-family: "Manrope", serif;
    background-color: #F9FBFC;
}

.top-footer{
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 50px 40px;
}

.footer-logo{
    max-width: 250px;
    mix-blend-mode: multiply;

    img{
        width: 100%;
    }
}

.left-footer{

}

.right-footer{
    display: flex;
    justify-content: space-between;
    gap: 50px;

    span{
        font-weight: 700;
        white-space: nowrap;
    }

    a{
        color: #000;
    }

    li{
       list-style-type: none;
       line-height: 32px;

       a{
        font-size: 16px;
       }
    }

}

.nav-footer{
    font-size: 12px;
}

.bottom-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 10px 40px;


}

.socials-ft{
    span{
        font-weight: 700;
        font-size: 14px;

        i{
            padding-left: 15px;
        }

        a{
            color: #000;
        }
    }
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.body-wrapper{
padding: 50px 40px;
}

.body-wrapper section{
    padding: inherit;
}

.body-wrapper p.disclaimer{
    font-size: 12px;
}

.faceted-search, .faceted-search-content .faceted-section-box .faceted-btn-container .faceted-show-all-btn{
    border-radius: 0px !important;
}

.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label{
    display: flex;
    gap: 5px;
}

/*  INVENTORY BUTTONS  */
a.view-listing-details-link.des-view-listingDetails, a.email-seller.des-email-seller.collapsible-contact-list-item,a.video-chat.des-video-chat.collapsible-contact-list-item{
    border-radius: 0px;
}

a.view-listing-details-link.des-view-listingDetails{
    background-color: #000;
}


a.view-listing-details-link.des-view-listingDetails{
	background-color:  #F2682A !important;
	color: #000 !important;
	padding: 15px 45px !important;
	
}

a#collapse-button-240430667{
	border-radius: 0px !important;
	padding: 15px 45px !important;
}

button.ts-button.faceted-search{
		background-color:  #F2682A !important;
	color: #000 !important;
}

button.ts-button.faceted-show-all-btn{
			background-color:  #F2682A !important;
	color: #000 !important;
	border-radius: 0px !important;
}




.faceted-search-content .selected-facets-container .selected-facet{
				background-color:  #F2682A !important;
	color: #000 !important;
}

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

@media only screen and (max-width: 1604px) {
	.right img {width: 100%;max-width: 800px;position: absolute;right: 0;bottom: -67px;}
	
	section.contact-us-section {padding:172px 0px 62px!important;}
}

@media only screen and (max-width:1434px) {
	.right img {max-width: 700px;bottom: -47px;}
}


@media only screen and (max-width: 1328px) {
      .right img {max-width: 591px;
		  bottom: -31px;}
	.used-products .flex {flex-direction:column;}
	section.contact-us-section {padding: 172px 0px 0px!important;}
	section.quality-transmission, section.transmission-products,section.financing-options,section.Engine-warranty, section.used-parts, section.transmission-exclusions,section.contact-page {padding: 50px 40px;}
	
	.about-wrapper.flex .main-text.bullets {flex-wrap:wrap;}
	
	
	.about-wrapper.flex .main-text {margin-top:30px;}
}

@media only screen and (max-width: 1210px) {
	section.contact-us-section {display: flex; flex-direction: column-reverse;gap:70px;}
	
	.contact-us-section .left {margin:0 auto;text-align: center;}
		
	.right img {position: relative;max-width: 100%;}
}


@media only screen and (max-width: 1170px) {
    .bottom-links{
        font-size: 15px;
        gap: 17px !important;
    }

}

@media only screen and (max-width:1100px) {
	.flex.services {flex-direction:column;margin:0auto;align-content:center;margin-top:30px;gap:20px;}
}

/*----------    MOBILE MENU    ----------*/

@media only screen and (max-width:907px) {
	.review-content button.secondary-btn a {height: 36px;}
}

@media only screen and (max-width: 900px) {
    nav.mobile .logo {
        width: 175px;
    }

    .right-footer{
        justify-content: flex-start;
    }

    .top-footer{
        flex-direction: column;
    }

    .footer-logo{
        max-width: 175px !important;
    }
	
	.search-categories.flex {
		flex-direction: column;
		gap: 20px;
	}
	
	.warranty-columns {flex-direction: column; gap: 0;}
	.warranty-coverage li {margin-left: 0;margin-bottom: 20px;}
	.finance.flex {flex-direction:column; justify-content: center;}
	section.financing-options {padding:50px 40px;}

    .category-search input{
        width: inherit;
    }

    .search-input{
        width: 100%;
    }

    .search-input.search{
        width: 100%;
    }

}

@media only screen and (max-width:874px) {
		.about-wrapper.flex {flex-direction: column; gap: 0;align-items: center; padding:40px 0;}
	.about-wrapper.flex .main-text {max-width: 100%;}
	.about-wrapper.flex .main-text.bullets  {max-width:100%;}
}

@media only screen and (max-width: 750px) {
    .flexy{
        flex-direction: column !important;
    }
    
    .col-2, .col-3, .col-4, .col-2-sml, .col-2-lrg{
        width: inherit !important;
    }
    
    .no-break{
        display: none;
    }

    .flex.cat-wrapper{
        flex-direction: column;
        align-items: center;
    }

    .explore-parts-section{
        h2{
            text-align: center;
        }
    }
}

@media only screen and (max-width:700px) {
	.offer .basic-cat.flex {flex-direction: column;}
	.reviews {width: 90%;  margin: 50px auto 0;}
	.review-content {gap:130px;}
}

@media only screen and (max-width:649px) {
	.financing-options .section-cat {max-width: 100%;}
}

@media only screen and (max-width: 600px){
    .right-footer{
        flex-direction: column;
        gap: 15px;
    }

}

@media only screen and (max-width:600px){
	.product-photos.flex{flex-wrap:wrap;justify-content: center; margin: 40px auto;}
	.product-photos img {max-width: 430px; width: 100%;}

    .have-any-questions{
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }
}

@media only screen and (max-width: 500px) {
 .form-field-flex{
        flex-direction: column;
    }

    .form-field-flex input{
        width: inherit;
    }

    div#captcha{
        width: inherit;
    }

	
}

@media only screen and (max-width: 405px){
    .bottom-footer{
        flex-direction: column-reverse;
        gap: 5px;
        text-align: center;
    }
}

@media only screen and (max-width: 375px) {
    section{
        padding: 50px 25px;
    }
	
}


@media only screen and (max-width: 1200px) {
	.Why-choose-us .flex {flex-wrap:wrap;}
	.brands.flex {flex-wrap: wrap !important;}
}



@media only screen and (max-width: 767px) {
	.brand-cat {display: flex;justify-content: center;}
	.brands.flex {flex-direction:column;}
}