/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
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 --------

*/


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

/*-------- BODY STYLES --------*/
H1, H2, h3, h4{font-family:'Oswald', sans-serif;}
body {
 font-family: "Manrope", sans-serif;
}
p {font-size: 17px; line-height: 26px;  font-family: "Manrope", sans-serif;}
.lt-gry-bg {background: #F3F3F3}
.blk-bg {background: #000}
.width-95 {width: 95%; max-width:1500px; margin: 0 auto;}
.width-90 {width: 95%; max-width:1500px; margin: 0 auto;}
.width-80 {width: 75%; max-width:1500px; margin: 0 auto;}
#padding25 {padding: 25px 0}
#padding50 {padding: 50px 0;}
#padding100 {padding: 100px 0;}
#padding150 {padding: 150px 0;}

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

*{box-sizing:border-box;}
hr{border:#000 1px solid;}

.tabadd {margin-left:48px;}

/*------ BUTTON STYLES ---------*/
.wht-outlined-btn {color:#fff;border-radius:5px; padding: 15px 25px; border:1px solid #fff; transition: .2s ease; display: inline-block; align-items: center; font-weight: 600; letter-spacing: .5px; margin-right:10px; margin-bottom: 5px; margin-top:5px;}
.wht-outlined-btn:hover {color:#000;  border:1px solid #fff; background: #fff;}
.blk-outlined-btn {color:#000;border-radius:5px; padding: 15px 25px; border:1px solid #000; transition: .2s ease;font-weight: 600; letter-spacing: .5px;display:  inline-block; align-items: center;}
.blk-outlined-btn:hover {color:#fff;  border:1px solid #000; background: #000;}

.red-btn {color:#fff; padding: 15px 20px; background:#D50D15; border:solid 1px #D50D15; transition: .2s ease; display: inline-block; border-radius:5px; align-items: center; font-weight: 600;  margin-right:10px; margin-bottom: 5px; margin-top:5px;}
.red-btn:hover{background:#000;}

/*--- HEADER STYLES ---------------------*/
.top-header{display:flex; margin:0 auto; flex-direction:row; justify-content: space-between; width:95%; max-width:1500px; padding:10px; box-sizing:border-box; border-bottom:solid 1px #fff;}
.call{display:flex; flex-direction:row; justify-content:flex-start;}
.call a{font-size:16px; color:#fff; padding:0 20px;}
.call a i{color:#fff; padding-right:15px;}
.header-back{width:100%; background:#000;}
.titan-header {display: flex; flex-direction: row; width: 95%; max-width:1500px; margin:0 auto; padding: 15px 0;}
logo.titan-logo img{max-width: 260px; width: 100%;}
.top-icons { text-align: right; display:flex; flex-direction:row; justify-content:flex-end; }
.top-icons p{color:#fff; font-size:16px; padding-right:10px;}
.top-icons .fa-brands { font-size: 22px; padding: 0 10px;}
.top-icons .fa-facebook-f{color:#8b9dc3}
.top-icons .fa-instagram {margin-right: 20px; background: linear-gradient(220deg, #405DE6, #833AB4, #FD1D1D, #FCAF45);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }


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

.flex-container {
	display: flex;
	align-items: center;
}

.center {
	text-align: center;
}
.content-right img{width:100%;}

/* HOME PAGE */

.hero {background: url("../siteart/Harvest-Haul_Trailer.jpg"); background-size: cover; height: 65vh; background-position: center center}
.hero-text {background: linear-gradient(to left, rgba(0,0,0,.7), transparent); height: 100%; width: 100%;}
.hero-center{width:95%; max-width:1500px; padding:11% 0; margin:0 auto;}
.hero-text h1 {font-size: 70px;  text-align:right; text-transform:uppercase; line-height: 75px; color:#fff;}
.hero-text p {padding: 30px 0; text-align:right; color:#fff; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: .5px;}
.hero-text a{float:right;}
section.cta-relative {position: relative; width: 100%;}


/* Brands */
.brand-left{width:40%; padding-right:30px; box-sizing:border-box;}
.brand-left h2{font-size: 55px; text-transform:uppercase; margin-top:4%; padding-bottom:20px;}
.brand-right{width:60%; display:flex; flex-direction:row; justify-content: flex-start; flex-wrap:wrap; gap:30px;}
.brand-right a{width:calc(50% - 30px); box-sizing:border-box; padding:30px; box-shadow:0px 0px 6px 4px rgba(0,0,0,.1);}
.brand-right a:hover{ box-shadow:inset 0px 0px 6px 4px rgba(0,0,0,.1);}
.brand-right a img{width:100%;}
.brand-left p {font-size: 22px; line-height: 30px;}


/*--QLS--*/
.ql-img{width:40%; position:relative;}
.ql-img img{width:100%; z-index:10; border-radius:0 15px 15px 0; object-fit:cover; height:880px; position:relative;}
.gray-box{width:400px; z-index:-10; height:300px; background:#f0f0f0; position:absolute; top:-90px; right:-90px;}
.ql-sec{width:60%;}
.ql-sec h2 {font-size: 55px; text-transform:uppercase; }
.ql-sec p {font-size: 22px; line-height: 30px; padding-bottom:50px;}
.ql-text{max-width:550px; margin-left:15%;}
.ql-row{width:90%; margin:0 auto; display:flex; flex-direction:row; flex-wrap:wrap; justify-content: flex-start;gap:15px;}
.ql-row a{width:calc(25% - 15px);border-radius:10px; height:230px; overflow:hidden; position:relative;}
.grad{width:100%; top:0; left:0; height:100%; position:absolute; z-index:10; background:linear-gradient(to bottom, rgba(0,0,0,.6), transparent);}
.ql-row a img{width:100%; height:230px; object-fit:cover; transition:.3s ease; overflow:hidden; }
.ql-row a:hover img{transform:scale(1.2);}
.cat-text{position:absolute; top:20px; left:20px; z-index:50; display:flex; flex-direction:row; justify-content: space-between; right:20px;}
.cat-text i{color:#fff; font-size:16px; padding:12px; background:#000; width:40px; height:40px;}
.cat-text h3 {font-size: 24px!important; text-transform:uppercase; font-weight: bold; color:#fff;}
.cat-text h3 hr{width:120px; margin:15px 0; height:8px; background:#D50D15; border:none;}
.cat-text p {padding: 15px 0; color:#fff;}

.half{width:calc(50% - 40px); margin:20px; padding:5%; color:#fff; display:flex; flex-direction:row; justify-content: center;}
.half i{color:#fff; font-size:60px; padding-right:20px;}
.half h2{font-size: 35px; text-transform:uppercase; font-weight: bold; color:#fff;}
.red{background:#D50D15;}
.black{background:#000;}



.mfg-shop {width: 25%; padding: 30px 25px; text-align: center; margin: 0 auto;  align-items: baseline; }
.mfg-shop img { padding-bottom: 5px; width: 100%;}
.mfg-shop#shop-titan {background: #D9E3EC; transition: .2s ease;}
.mfg-shop#shop-titan:hover {background: #fff; filter: grayscale(100%)}
.mfg-shop#shop-east {background: #DAE6F1; transition: .2s ease;}
.mfg-shop#shop-east:hover {background: #fff;filter: grayscale(100%)}
.mfg-shop#shop-jj {background:#D9E3EC; transition: .2s ease;}
.mfg-shop#shop-jj:hover {background: #fff;filter: grayscale(100%)}
.mfg-shop#shop-matrixx {background: #DAE6F1; transition: .2s ease;}
.mfg-shop#shop-matrixx:hover {background: #fff;filter: grayscale(100%)}
a.mfg-shop {color:#000; font-weight: bold; font-size: 18px; }
a.mfg-shop:hover {color:#000; font-weight: bold; letter-spacing: .75px; transition: .2s ease; }


section.hp-about {background: #F3F3F3;padding: 100px 0;}
.hp-about .flex-container{width:95%; max-width:1500px; margin:0 auto;}
.hp-about img{width:100%; height:700px; object-fit: cover; border-radius:0 15px 15px 0;}
.col-50 {width: 50%;}
.about-info{padding:0 40px;}
.about-info h2 {font-size: 55px; text-transform:uppercase; margin-top:4%; padding-bottom:20px;}
.about-info p {line-height: 30px; padding: 20px 0;}
.about-info .blk-outlined-btn{margin-top:20px;}


section.ql { width: 98%; margin:20px auto 100px auto; }
.col-3 {width: 31%; margin: 1% 1%}
.col-3 h3 {font-size: 40px; text-transform:uppercase; font-weight: bold; padding:10px 0; margin-top:40px;}
.col-3 p {font-size: 24px; line-height: 32px;}

.col-4 {width: 25%; margin: 1% 1%}
.col-btn {border:1px solid #F3F3F3; padding: 100px 25px; text-align: center; background: #fff; transition:.3s ease;}
.col-btn:hover {border:1px solid #333; padding: 100px 25px; text-align: center; background: #fff; letter-spacing: .75px;}
.col-btn h4 {font-size:35px; font-weight: bold; padding-bottom: 35px;}
a.col-btn {color:#000; font-weight: 600; font-size: 18px; display: block;}

section.hp-map {padding: 5% 0 20% 0 ; background-image: url("../siteart/map-bg2.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center bottom; width: 70%; margin: 0 auto;background-color: #fff;}
span.hp-loc {text-align: center;margin: 0 auto;}
span.hp-loc h3 {font-size: 40px; text-transform:uppercase;}
span.hp-loc p {max-width: 650px; width: 100%; text-align: center; margin: 0 auto; padding: 25px 0; font-size: 18px; line-height:30px;}


section.hp-cat {margin-bottom: 100px;}
.hp-cat a.col-4 {background: linear-gradient(to top, #F3F3F3 0%, #F3F3F3 75%, #fff 30%, #fff 100%);color:#000;  }
.hp-cat a.col-4:hover {background: #F3F3F3;}
.hp-cat a.col-4:hover h3 {color:#333 }
.hp-cat img {width: 100%; mix-blend-mode: darken; max-height: 200px;padding:25px 0; height: 100%; object-fit: contain; background: #fff;}
.hp-cat .cat-img {background: #fff;}
.flex-trailer {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; 	align-content: stretch;overflow:hidden;}
.flex-trailer .col-4 {width: 23%;}
.flex-trailer .col-4 .cat-text {background: #fff; padding: 15px 0; height: 100%;}
.cat-text h3 {font-size: 30px; font-weight: bold;}
.cat-text p {padding: 15px 0;}

section.gallery {    background-image: url(../siteart/Image_Gallery_Feature.jpg);background-size: cover;background-position: center;width: 95%;aspect-ratio: 2 / 1;margin: auto;}
/* END HOME PAGE */

/*------Brand Pages--------*/
.page-left{width:50%; padding:6% 4%;}
.page-left h1 {font-size: 55px; line-height:64px; padding-bottom:20px; text-transform:uppercase; }
.page-left p {font-size: 22px; line-height: 30px; padding-bottom:50px;}
.page-right{width:50%; height:600px;
	img{width:100%; height:100%; object-fit:cover;}
}

.item{width:calc(25% - 20px); color:#000; background:#fff; margin:10px; box-shadow:0px 0px 4px 2px rgba(0,0,0,.1); padding:20px;}
.item img{width:100%; border-radius:0!important;height:200px; object-fit:cover;}
.item:hover h3{color:#D50D15;}
.item-text h3 {font-size: 30px; font-weight: bold;}
.item-text p {padding: 15px 0; min-height:135px;}
.item-text a{ margin-bottom:67px; display:block;}
.ql-title{font-size: 55px; text-align:center; text-transform:uppercase;}

.info{width:98%; max-width:1000px; margin:0 auto; padding:40px 10px 0 10px; text-align:center; }
.info h2{font-size: 35px; font-weight: bold; text-transform:uppercase;}
.info p{ font-size: 18px; line-height:30px;}
.info a{margin:20px 0;}

.east:hover h3{color:#000!important;}
.east-link {margin:2px!important; transition:.3s ease; padding:12px; background:#D50D15; color:#fff; text-align:center; display:inline-block;}
.east-link:hover{background:#000;}

/* SERVICE & PARTS PG */
.sub-hero {line-height: 0;}
.sub-hero img {width: 100%;height: 200px;object-fit: cover;object-position: center;}
section.service-pg .flex-container {align-content: center; align-items: stretch}
section.service-pg .content-left {background:rgba(0,0,0,0.92); width: 50%;  }
section.service-pg .content-left h1 {color:#fff; font-size: 65px; line-height: 70px;}
section.service-pg .content-left p {color:#fff; font-size: 18px; line-height: 30px; padding-top:25px;}


section.service-pg .content-right { width: 50%;  padding: 100px 0 150px 0;}
section.service-pg .content-right h2 { font-size: 40px; line-height: 50px;padding-bottom: 15px; font-weight: 800;}
section.service-pg .staff {padding-top:15px;}
section.service-pg .staff h3 {color:#fff; margin-bottom: 15px;}
section.service-pg .staff h3 .fa-solid{color:#D50D15; }
section.service-pg .staff p a {color:#ddd; padding:5px 0; margin-left:25px;}
section.service-pg .staff a:hover{color:#d50d15;}

section.service-pg p .fa-solid{color:#D50D15; padding:10px 0; }

/* CONTACT PG */
.tabadd,
.tabadd a{color:#fff; font-size: 18px; line-height: 30px; font-weight: 300}


section.service-pg .staff a {color:#ddd; padding:5px 0; margin-left:25px;}
section.loc .staff h3{margin:10px 0 5px 0!important;}
.loc .staff h2{color:#fff; margin: 20px 0 10px 0!important; margin-bottom:10px!important; font-size:26px;}
/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
.footer-space {height: 150px}
footer.titan-footer {width: 100%; position: relative;}
.titan-footer .footer-logo {max-width: 370px; background: #fff; padding: 25px 25px; text-align: center; margin: -70px auto 0 auto; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); position: absolute; left: 0; right: 0;}
.titan-footer .footer-logo img{width: 100%;}
footer .blk-bg {text-align: center;}

.titan-footer .footer-nav a {color:#fff; padding: 10px 25px; font-weight: bold; font-size: 22px; transition: .2s ease;}
.titan-footer .footer-nav a:hover {color:#D50D15;}
.titan-footer .footer-icons {padding: 25px 0; }
.titan-footer .footer-icons a{padding: 0px 15px; color:#fff; font-size: 22px;  transition: .2s ease; }
.titan-footer .footer-icons a:hover{color:#D50D15;}
.titan-footer .titan-copyright h5{color:#fff; padding: 25px 0;}

footer{width:100%; background:#000; padding:20px 0;}
.footer-row{width:95%; display:flex; flex-direction:row; justify-content: space-between; margin:0 auto; padding:40px 10px; box-sizing:border-box;}
.foot-col{width:25%; padding:20px;}
.foot-col img{width:100%; max-width:250px; float:left;}
.foot-col p{font-size:20px; color:#fff; font-family:'Oswald', sans-serif; padding-bottom:20px; font-weight:600; text-transform:uppercase;}
.foot-col ul li{list-style:none;}
.foot-col ul li a{color:#fff; font-size:16px; line-height:30px;}
.foot-col ul li a:Hover{color:#D50D15;}

.titan-copyright p{color:#fff; font-size:16px;}
.btm-row{display:flex; width:95%; margin:0 auto; padding:10px; box-sizing:border-box; flex-direction:row; justify-content: space-between;}
.memb p{font-size:18px; color:#fff;}
.memb img{width:120px; float:left;}
.news a{color:#fff; font-weight:600; margin-top:40px; display:block;}
.news img{width:100%; max-width:280px;}
.news a:hover{text-decoration:underline; }
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.detail-wrapper, .list-content {padding: 50px 0!important;}
.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet{background-color:#D50D15!important;}
.list-container-flexrow .view-listing-details-link:hover, .faceted-search-content .selected-facets-container .selected-facet:hover{background-color:#000!important;}



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

@media only screen and (max-width: 1500px) {
	.cta-section {position: relative; margin-top:0; background: #DAE6F1}
	.hero-text {align-content: center;}
	.hero-text h1 {font-size: 50px; line-height: 55px;}
	.about-info h2 , .brand-left h2, .ql-sec h2{font-size: 35px; line-height: 50px;}
	.col-3 {width: 50%;}
	.flex-trailer .col-4 {width: 31%;}
	.cat-text {font-size:24px; line-height:28px;}
	.ql-row{width:98%;}
}

@media only screen and (max-width: 1350px) {
	section.hp-map {width: 100%}
	.hp-about .flex-container {align-items:stretch}
	section.service-pg .content-left h1 {font-size: 50px; line-height: 60px;}
	.ql-img{width:30%;}
	.ql-sec{width:70%;}
	.page-left h1{font-size:45px; line-height:50px;}
	.item{width:calc(33.33% - 20px);}
	section.hp-map {padding: 5% 0 30% 0}
}

@media only screen and (max-width: 1150px) {
	.titan-logo {width: 50%;}
	.hero-text {width: 100%;height: 100%;align-content: center;}
	a.mfg-shop {font-size: 14px;}
	.about-info h2 , .brand-left h2, .ql-sec h2{font-size: 25px; line-height: 30px;}
	p {font-size: 16px;}
	.ql .flex-container {flex-wrap: wrap}
	section.ql {margin: 0 auto 10px auto; text-align: center;}
	.col-3 {width: 100%;}
	.col-4 {width: 31%; padding: 25px 0 35px;}
	.col-4:hover {width: 31%; padding: 15px 0 25px 0;}
	span.hp-loc p {max-width: 900px;}
	section.hp-map {padding: 5% 0 30% 0;}
	.cat-text {height: 170px;}
	.page-left{width:100%;}
	.page-right{width:100%; height:350px;}
	section.service-pg .flex-container {display: block;}
	section.service-pg .content-left {background:rgba(0,0,0,0.92); width: 100%;  }
	section.service-pg .content-left h1 {color:#fff; font-size: 65px; line-height: 70px;}
	section.service-pg .content-right { width: 100%;  padding: 80px 0 130px 0;}
	section.service-pg .content-right h2 { font-size: 40px; line-height: 50px;padding-bottom: 15px; font-weight: 800;}
	.top-icons {margin-right: 0px;}
	.top-icons .fa-instagram {margin-right: 0px;}
	section.hp-about {padding-bottom: 0px;}
	.about-info {margin:0 auto 10%;margin: 0 auto;}
	.about-info{padding:0 20px;}
	.flex-container{flex-wrap:wrap;}
	.ql-img{width:100%; height:400px;}
	.ql-img img{height:100%; object-fit:cover;}
	.gray-box{display:none;}
	.ql-sec{width:95%; margin:0 auto; padding-top:20px;}
	.ql-text{margin:0;}
	.ql-row{width:100%;}
	.footer-row{flex-wrap:wrap;}
	.foot-col{width:50%;}
	.item{width:calc(50% - 20px);}
}

@media only screen and (max-width: 900px) {
	logo.titan-logo {width: 70%;}
	.header-right {width: 30%;}
	.hero {height: 55vh;}
	.hp-about .flex-container {display: block;}
	.hp-about .flex-container .col-50 img {display: none;}
	.hp-about .flex-container .col-50 {width: 100%; background: #F3F3F3}
	.about-info h2 {margin-top: 0; padding-top:25px;}
	.cta-section .flex-container {flex-wrap: wrap}
	.mfg-shop {padding: 20px 0; width: 50%;}
	section.ql {margin: 0 auto; padding: 3% 0;}
	.about-info {padding:0 0 25px}
	.call{display:none;}
	.brand-right{gap:15px;}
	.brand-right a{width:calc(50% - 15px);}
	.page-left h1{font-size:35px; line-height:40px;}
	.ql-title{font-size:40px; line-height:45px;}
	.item{display:block!important; width:100%; margin:10px 0;}
	.item-text p{min-height:0;}
	.ql-row a{width:calc(33.33% - 15px)}
}



@media only screen and (max-width: 767px) {
	.hero-text h1 {font-size: 35px; line-height: 42px;}
	.hero-text p {display: none;}
	.titan-footer .footer-nav a {font-size: 16px; line-height: 25px; padding: 10px 10px;}
	.col-btn h4 {padding-bottom: 15px;}
	.col-3 p {font-size: 20px; line-height: 26px;}
	.col-4, .col-4:hover  {width: 100%; margin: 5px 0; padding: 15px 0;}
	span.hp-loc h3 {font-size: 30px;}
	.flex-trailer .col-4 {width: 48%; margin: 1% 1%;}
	.cat-text p {display: none;}
	.cat-text h3 {font-size: 25px;}
	.hp-cat img {max-height: 100px;}
	.cat-text {height: 100px;}
	.flex-trailer .col-4 .cat-text {padding: 15px 0 0 0;}
	.flex-trailer .col-4, .flex-trailer .col-4:hover {padding: 15px 0 0 0;}
	.gallery {display: none;}
	section.service-pg .content-left h1 {font-size: 50px; line-height: 55px;}
	.flex-container{flex-wrap:wrap;}
	.brand-left{width:100%; padding:0 0 20px 0;}
	.brand-right{width:100%;}
	.ql-img{height:280px;}
	.ql-row a{width:calc(50% - 20px);height:180px;}
	.ql-row a img{height:180px;}
	#padding100{padding:50px 0;}
	.btm-row{flex-direction:column;}
	.foot-col{width:100%;}
}

@media only screen and (max-width: 500px) {
	.header-right {width: 100%; text-align: center;}
	.titan-header {display: block;text-align: center;}
	logo.titan-logo { width: 100%;margin: 0 auto; text-align: center;}
	logo.titan-logo img {max-width: 250px; width: 100%; text-align: center; margin: 0 auto;}
	.top-icons {display: inline-block;width: 100%; text-align: center;    margin-right: 0px;}
	section.hp-map {padding: 5% 0 60% 0}
	.titan-footer .footer-logo {max-width: 300px;}
	.ql-row a{width:100%;}
	.page-left h1, .ql-title{font-size:30px; line-height:34px;}
	.brand-right a{padding:10px;}
	section.service-pg .content-left h1 {font-size: 35px; line-height: 45px;}
}