@charset "utf-8";

/* general Reset */
*, *::before, *::after { box-sizing: border-box;}
*:not(dialog) { margin: 0; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height:auto;}
input, button, textarea, select { font: inherit;}
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { text-wrap: pretty; margin-bottom:1.2rem;}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
#root, #__next { isolation: isolate; }
iframe {display: block; margin: 0; padding: 0; border: none;}
@media (prefers-reduced-motion: no-preference) {
  html { interpolate-size: allow-keywords; }
}

/* base styles */

:root {
  --primary-col: #BE1D24;
  --primary-dark: #99191f;
  --text-col: #212121;
}


html {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
}

body {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.1px;
	line-height: 1.8;
	color: var(--text-col);
	background: #ffffff;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 1.25rem 0;
	line-height: 1.2;
    color: var(--primary-col);
}

h2 { font-size: 2.5rem; line-height: 3rem; margin-bottom:2rem;}
h4 { font-size: 1.5rem; line-height: 1.75rem;}

a {
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
	color: var(--text-col);
    background-color: transparent;
}

p:last-child { margin: 0; }

p a {font-weight: 600; color: var(--primary-col);}

strong {font-weight:600;}

hr {
    display: block;
    width: 100%;
    height:2px;
    background-color:var(--primary-col); 
    border:0;
    margin-top: 2rem;
}

.mrgtop {margin-top:2rem;} 

footer {
	/*background-color: #333333;*/
	color: #ffffff;
}

.flex-container, .input-group { width: 100%; display:flex; flex-wrap: wrap; position: relative;}
.input-group { justify-content: space-between;}
.head-inner, .foot-inner, .section-inner {
	max-width: 1500px;
	margin: 0 auto;
    padding: 0 20px;
}

.mobonly {display:none;}

.w50 {flex: 0 0 50%;  max-width: 50%;}

.btn-main {
	display: inline-block;
    position:relative;
    background-color: var(--primary-col);
    font-weight: 600;
    color: #fff;
    padding: 8px 20px;
	border-radius: 0;
	-webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    border:none;
}

.head-inner { justify-content: space-between; flex-wrap: nowrap; align-items: center;}

.nav-outer {position:relative;}
.nav-outer:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height:100%;
    content: '';
    background-color:var(--primary-col);
    overflow: hidden;
}

.navigation { display:flex; width:66%;  padding:50px 0; text-align:right; justify-content:space-around; flex-direction: column; background-color: var(--primary-col);}
.logo-outer {display:block; width:33%; background-color: #fff;}
.logo-outer img {width:290px; max-width:100%;}

.pre-nav {background-color: var(--text-col); color:#fff;}
.btn-wanted { background-color: #fff; color: var(--text-col); display:inline-block; font-size: 16px; font-weight: 600; padding:10px 30px; text-transform: uppercase;}
.btn-wanted:hover, .btn-wanted:hover { background-color: var(--primary-col); color:#fff;}

#menu-button { display: none; }
#menu-button .menu-toggle { color:#fff; }
nav.mobile {display: none;}

.main-menu ul, .pre-nav ul {padding: 0; list-style: none;}
.main-menu ul li,  .pre-nav ul li { position: relative; display: inline-block;}
.main-menu ul li { margin-left:20px; }
.main-menu ul li a { font-size: 18px; text-transform: uppercase; font-weight:600; color: #fff;}
.main-menu ul li a:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0px;
  transition: all 0.3s ease-out;
  background: #fff;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
}
.main-menu ul li a:hover:after {transform: translateX(-50%) scaleX(1);}


.pre-nav ul li a { font-size: 16px; margin-right:20px; color: #fff;}
.pre-nav ul li a:hover {text-shadow: 0 0 6px #f2f2f2;}


.banner-home {
	height: 600px;
    width: 100%;
    background-image: url(/img/main-banner.jpg);
    background-size: cover;
    background-position: 100% 50%;
    background-color: #212121;
    position:relative;
    display: flex;
    align-items: center; justify-content: start;
}

.banner-container {width:100%; padding-bottom:45px;}
.banner-text {width:512px; padding: 83px 0; position:relative;}
.banner-text h1 {color:#fff; font-size:66px; margin:0 10px; text-shadow: 2px 2px 4px #000000;}
.banner-text:before {
    content: "";
  position: absolute;
  top: 0;
  left:0 ;
  width: 100%;
  height: 40%;
  background-image: url('/img/curve.png');
   background-size: 100% auto;
 background-position: top center;
 background-repeat: no-repeat;
}
.banner-text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left:0 ;
    width: 100%;
    height: 40%;
    background-image: url('/img/curve.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}


.inner-banner {
	height: 300px;
    width: 100%;
    background-image: url(/img/inner-banner.jpg);
    background-size: cover;
    background-position: 100% 70%;
    background-color: #212121;
    position:relative;
    display: flex;
    align-items: center; justify-content: start;
}

.inner-banner-text {
    margin-top:50px;
    padding-bottom:70px;
    position:relative;
}

.inner-banner-text:before {
content: "";
  position: absolute;
  bottom: 0;
  left:0 ;
  width: 100%;
  max-width: 450px;
  height: 100%;
  background-image: url('/img/curve.png');
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}

.inner-banner-text h1 {color:#fff; font-size:66px; margin:0 10px; text-shadow: 2px 2px 4px #000000;}


/* Search bar */
.search-section {position: relative; margin-top:-50px;}
.searchbar {border:2px solid #fff; background-color: #212121; box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.35);}
.sform {display: flex; justify-content:stretch; align-items: center; padding:30px; width:100%;}
.sform .fields { justify-content: space-between; align-items: center; flex-shrink: 0; flex-grow: 1; flex-wrap:nowrap}
#srchgo {cursor: pointer; width:48px; height:48px; text-align:center; border:0; border-radius: 0; background-color: var(--primary-col); color: #fff; font-size:32px; line-height:48px; transition: all 0.3s ease-out;}
#srchgo:active, #srchgo:hover {background-color: var(--primary-dark);}
#kwds, #manu {width: calc(50% - 20px); height:48px; margin-right:20px; border:1px solid #6B6B6B; border-radius: 0; background-color:#ffffff38; color: #fff; padding:0 10px;}
#kwds::placeholder, #manu::placeholder {color:#999;}


.about-section, .category-section, .contact-section, .innerpage-section {padding-top: 120px; padding-bottom:120px;}
.about-section .about-content, .contact-section, .innerpage-section {align-items: center;}
.about-section h2, .category-section h2, .contact-section, .innerpage-section, .mapsection {text-align: center;}
.privacy-section, .abt-text {text-align: left;}
.privacy-section h4 {margin-bottom:0.4rem; margin-top:2rem;}

.cta-section {position: relative; margin-top:0; z-index:1}
.ctabar {border:2px solid #fff; background-color: var(--primary-col); color:#fff; flex-wrap: nowrap; padding:1rem; align-items: center; justify-content: center;}
.ctabar i {font-size: min(90px, 6vw); display:inline-block;}
.ctabar a {font-size: min(44px, 3vw); font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; color:#fff}

.manulink {width:25%; min-width:25%; margin:0; padding:0; position:relative;}
.manulink img {width:100%; height:auto; opacity:0.4;-webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.manulink span {position:absolute; left:0; width:100%; bottom:12px; font-size:2vw; color:#ffffff; text-transform: uppercase;
                font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; text-align: center;
            -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.manulink:hover img, .manulink:active img {opacity:0.6}

.manulink:hover span, .manulink:active span {text-shadow: 0 0 10px #000000;}

.scania {background-color: #112b5c;}
.merc {background-color: #616979;}
.man {background-color: #303C4A;}
.iveco {background-color: #1D4E9D;}

.mitsubishi {background-color: #DC0517;}
.renault {background-color: #5f594f;}
.volvo {background-color: #14225F;}
.daf {background-color: #868484;}


.catlink {width:16.6667%; min-width:16.6667%; margin:0; padding:0; position:relative; text-align:center; padding-bottom:30px; padding-right:12px; padding-left:12px; margin-top:40px;}
.catimg {position:relative; display:block; padding-bottom:10%;}
.catimg img {opacity: 0.65;-webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.catlink span {display: block; font-family: "Archivo Black", sans-serif; padding-top: .4rem; font-size:20px; line-height:1.3; font-weight: 400; font-style: normal; text-align: center;
            -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

            .catimg:before {
    content: "";
  position: absolute;
  bottom: 0;
  left:0 ;
  width: 100%;
  height: 80%;
  background-image: url('/img/curve.png');
   background-size: 100% auto;
 background-position: top center;
 background-repeat: no-repeat;
 transform: rotate(180deg);
}

.catlink:hover .catimg img, .catlink:active .catimg img {opacity: 1;}
.catlink:hover span, .catlink:active span {color:var(--primary-col)}



/*innerpages - GALLERY PAGE */


.gallery-col {position: relative;flex: 0 0 33.33333%; max-width: 33.33333%; padding-right: 15px; padding-left: 15px; margin-top: 30px; }

.gallery-pic { overflow: hidden; cursor: pointer; 
	-webkit-box-shadow: -1px 4px 19px 0px rgba(0,0,0,0.24);
	-moz-box-shadow: -1px 4px 19px 0px rgba(0,0,0,0.24);
	box-shadow: -1px 4px 19px 0px rgba(0,0,0,0.24); 
    background-color: var(--text-col);
      border-radius: 0;
	border:2px solid #ffffff;

}
.gallery-pic img {
    filter: grayscale(80%);
    opacity:0.7;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  
}
.gallery-pic:hover img {
  -webkit-box-shadow: none;
  filter: grayscale(0%);
  opacity: 1;
  box-shadow: none;
  zoom: 1.1;
  -ms-zoom: 1.1;
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.shippingpage .abt-img { padding-left:30px;}


.mapsection {background-color: var(--primary-col); color:#fff; padding:10px;}
.mapsection h2 {color:#fff; margin-top: 20px; margin-bottom:30px;}

/*footer */
.foot-inner { padding: 20px 0; }
footer a, footer p {color: #cecece;}
footer a:hover,.footer a:active  {color: #ffffff;}

footer {position:relative; padding-top: 30px; background-color: #212121; font-size: 15px; }
.hp footer {position:relative; padding-top: calc(30px + 4vw); background-color: #212121; font-size: 15px; margin-top:-4vw;}
.footer-logo {max-width:180px; height:auto; padding-bottom:20px;}

.copyright {padding:20px; text-align:center}
.footer-col ul { margin: 0; padding: 0; list-style: none; line-height: 1.6rem;}
.footer-col ul li { margin-bottom:1.4rem;}
.footer-col h3 { font-size: 22px; padding-bottom: 30px; color: #fff; line-height: 3.25rem; margin: 0}
.footer-col {position: relative;-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 20px;}
.aboutcol {display:none;}
.footerabout {display:block; text-align: center; padding: 0 20px;}
.footerabout .footer-logo {display:inline-block; margin:auto;}
.footerabout .lrgico {justify-content: center;}

.icons li {padding-left: 2em; text-indent: -1.5em; }
.lrgico {display:flex; align-items: center; margin-top:10px;}
.lrgico i {    font-size: 2rem; display: inline-block; margin-right: 10px; margin-left: -4px;}
.lrgico span {display:inline-block; font-style: italic;}



@media (min-width: 320px) {
    footer {font-size: 16px;}
}

@media (min-width: 400px) {
    footer {font-size: 17px;}
}

@media (min-width: 640px) {
    .footer-col {flex: 0 0 50%;  max-width: 50%;}
}

@media (min-width: 1023px) {
    .footer-col {flex: 0 0 33.333%;  max-width: 33.333%;}
}
@media (min-width: 1150px) {
    .footer-col {flex: 0 25%;  max-width: 25%;}
    .footer-col.cols {flex: 0 0 20%;  max-width: 20%;}
    .footer-col.icons {flex: 0 0 30%;  max-width: 30%;}
    .footerabout {display:none;}
    .aboutcol {display:block;}
}



@media screen and (max-width: 1200px) {
    .catlink span {font-size: 18px;}
}
@media screen and (max-width: 1024px) {
    .catlink {width:25%; min-width:25%; padding-bottom:25px}
    .ctabar a {font-size: 4vw; margin-left: 2vw;}
}

@media screen and (max-width: 980px) {
    .nav-outer:before { width:30px;}
    
	.main-menu ul {display:none}
    .navigation { padding: 30px 0; width:auto; padding-left:20px;}
    .logo-outer {width:auto;}

    #menu-button {
		/*padding-top: 35px;
		padding-right: 15px;*/
        display: inline-block;
		height:100%;
		align-items: center;
        font-size: 40px;
		color:#fff;
		padding: 0;
    }

    .banner-home { height:450px; background-position: 100% 70%;}
    .banner-text { width: 380px; padding: 65px 0;}
    .banner-text h1, .inner-banner-text h1 {font-size:48px;}
    .inner-banner-text:before {max-width:350px;}
    .inner-banner-text {padding-bottom:50px;}
    	 nav.mobile {
        display: block;
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
		color: var(--text-col);
        background: #efefeff5;
        z-index: 1001;
        overflow: auto;
        text-align: left;
    }
	
	nav.mobile .menu-toggle {
		position: absolute;
		right: 15px;
		top: 0;
		font-size: 24px;
        color: var(--text-col);
	}
	nav.mobile .mobile-logo {
		margin-top: 0;
		padding: 20px;
	}
	nav.mobile .mobmain {padding: 0 20px; list-style: none;}
	nav.mobile .mobmain>li { position: relative; display:block; border-bottom:1px solid #d6d6d6;}
	nav.mobile .mobmain li a { color: var(--text-col); font-weight: 600; display: block; line-height:38px; text-transform: uppercase; position:relative; }
	nav.mobile .mobmain li:hover > a, nav.mobile .mobmain li:active > a { color: var(--primary-col); }

    .mobile-logo img {max-width:180px;}

    nav.mobile .mobcontacts { padding: 0 20px; list-style: none; margin-top: 3rem;}
    nav.mobile .mobcontacts>li { position: relative; display:block; padding:2px 0;}
    nav.mobile .mobcontacts li a { color: var(--primary-col); font-weight: 600; }
	nav.mobile .mobcontacts li:hover > a, nav.mobile .mobcontacts li:active > a { color: var(--text-col); }

    .gallery-col {padding-right: 10px; padding-left: 10px; margin-top: 20px; }

}

@media screen and (max-width: 850px) {
    .pre-nav {display:none;}
	.w50 {flex: 0 0 100%;  max-width: 100%;}
    .mobonly {display:block;}
    .about-content {flex-direction: column-reverse;}
    html { font-size: 17px;}
    h2 {font-size: 2rem; line-height:2.5rem;}
    .about-section, .category-section, .innerpage-section, .contact-section {padding-top: 90px; padding-bottom:90px;}
    .shippingpage .abt-img { padding-left:0px; padding-bottom: 2rem;}

}



@media screen and (max-width: 712px) {
    .catlink {width:33.3334%; min-width:33.3334%; padding-bottom:25px}
    .gallery-col {flex: 0 0 50%; max-width: 50%;}
}


@media screen and (max-width: 580px) {
    .banner-container {padding-bottom:0;}
    .banner-home { height:80vw; background-position: 0% 70%;}
    .banner-text { width: 80vw; padding: 12vw 0; margin: auto; text-align: center; }
    .banner-text h1, .inner-banner-text h1 {font-size:10vw;}
    .inner-banner {height: 250px;}
    .inner-banner-text {margin-top:20px;}

    .logo-outer {padding-right:15px;}
    #manu {display:none;}
    #kwds {width: calc(100% - 20px);}
    .search-section .section-inner, .cta-section .section-inner {padding:0;}
    .searchbar, .ctabar {border:none;}
    .ctabar span {display:none;}
    .ctabar i {font-size: 8vw;}
    .ctabar a {font-size: 6vw;}
    .search-section {margin-top: 0;}
    h2 {font-size: 1.7rem; line-height:2.2rem;}
    .about-section, .category-section, .innerpage-section, .contact-section {padding-top: 70px; padding-bottom:70px;}
    .manulink {width:50%; min-width:50%;}
    .manulink span {font-size:4vw;}
    .catlink {width:50%; min-width:50%; padding-bottom:20px; margin-top:30px}
        .gallery-col {flex: 0 0 100%; max-width: 100%;}


}

@media screen and (max-width: 390px) {
    .catlink span {font-size: 16px;}
    .catlink {padding-bottom:15px}
}




/* FORMS */

.form-content {max-width: 65%; padding-left: 20px; padding-left: 0; flex: 0 0 60%; padding-top:30px;}
.form-sidebar {max-width: 35%; padding-right: 0; padding-right: 20px; flex: 0 0 40%; padding-top:30px; text-align: left;}

.form-sidebar .cblock-outer div {display:flex; text-align: left; align-items: center; margin-bottom: 1.1rem; line-height:1.6;}
.form-sidebar i {display:inline-block; color: var(--primary-col); font-size: 1.6rem; margin-right:10px; width:34px;min-width:34px;}

@media screen and (max-width: 1200px) {
    .form-sidebar, .form-content {max-width: 100%; padding-right: 0; padding-right: 0; flex: 0 0 100%; padding-top:0; text-align: center;}
    .form-sidebar {padding-bottom:60px;}
    .form-sidebar .cblock-outer div {justify-content:center; margin-bottom: 0.75rem;}
    .form-sidebar .inline {display:inline-block; margin-right:5px; margin-left:5px;}
}

@media screen and (max-width: 712px) {
    .form-sidebar .cblock-outer div {justify-content:start;}
    .form-sidebar .inline {display:block; margin-right:0; margin-left:0;}
    .form-sidebar {padding-bottom:40px;}
}

@media screen and (max-width: 350px) {
    .form-sidebar i {display:inline-block; color: var(--primary-col); font-size: 1.3rem; margin-right:6px; width:23px;min-width:23px;}
}

@media screen and (max-width: 330px) {
    .form-sidebar a {font-size:16px;}
}

/* CAPTCHA AREA (hidden state) */
.include-captcha {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

/* SHOW STATE */
.include-captcha.show {
  opacity: 1;
  max-height: 400px;
  transform: translateY(0);
}

/* FAKE BUTTON FADE OUT */
.fake-submit {
  opacity: 1;
  transition: opacity 0.3s ease;
  padding-top:10px;
}

.fake-submit.hide {
  opacity: 0;
  pointer-events: none;
  display:none;
}

.contact-form h3 {
    padding-top: 2rem;
    margin-bottom:0;
    font-size: 1.4rem;
}
.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], #CaptchaAnswer {
    width: calc(50% - 10px);
    margin-top: 20px;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    border-image: initial;
    border-radius: 0;
    background-color: #f3f3f3;
}
.contact-form textarea {
    height: 200px;
    width: 100%;
    resize: none;
    margin-top: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    border-image: initial;
    padding: 12px;
    border-radius: 0;
    background-color: #f3f3f3;
}

.CaptchaImage {margin:auto;}

@media screen and (max-width: 780px) {
	.contact-form input[type="text"], .contact-form input[type="tel"], .contact-form input[type="email"], #CaptchaAnswer {width:100%;}
}



/* Inventory styles */
.inventory-section {padding-top:80px; padding-bottom:40px;}

@media screen and (max-width: 1000px) {
	.inventory-section {padding-top:40px; padding-bottom:20px;}
}
@media screen and (max-width: 780px) {
	.inventory-section {padding-top:40px; padding-bottom:0;}
}
#inv button.selected-facet.ts-button {background-color: #F3F3F3; color: #1A1A1A; border: 1px solid var(--primary-col); transition: all 0.3s ease-in-out;}
#inv button.selected-facet.ts-button:hover {background-color: var(--primary-col); color: #F3F3F3;}
#inv button.ts-button.faceted-search {background-color: #F3F3F3; color: #1A1A1A; border: 1px solid var(--primary-col); transition: all 0.3s ease-in-out;}
#inv button.ts-button.faceted-search:hover {background-color: var(--primary-col); color: #F3F3F3;}
#inv button.ts-button.faceted-show-all-btn {background-color: #F3F3F3; color: #1A1A1A; border: 1px solid var(--primary-col);transition: all 0.3s ease-in-out}
#inv button.ts-button.faceted-show-all-btn:hover {background-color: var(--primary-col); color: #F3F3F3;}
#inv button.ts-button.template-branded-button {background-color: var(--primary-col); color: #F3F3F3;}
#inv .view-listing-details-link.des-view-listingDetails.template-branded-button {background-color: var(--primary-col); color: #F3F3F3;}
#inv span.list-title-text {color: #1A1A1A; font-family: "Archivo Black", sans-serif !important; text-transform: none; }
#inv .list-listings-count {font-family: "Open Sans", sans-serif !important; color: var(--primary-col);}

 LOADING RING 
#inv .lds-ring { color: var(--primary-col) !important;}

#inv .lds-label {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    text-transform: none;
    color: #1A1A1A !important;
}