@import url("https://fonts.googleapis.com/css2?family=Kanit&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.brxTableWrapper { max-width: 1400px !important; }
  
.eb-container { 
  width: 100%;
  max-width: 1400px !important;
  margin: auto;
  position: relative; margin-top: -30px;}		
	
.eb-container p { font-style: normal; font-weight: 300; font-size: 18px; line-height: 22px; padding: 0; margin:20px 0 }	
.eb-container .txt-black h2{ font-weight: 500; font-size: 36px; line-height:40px; color: #212934; margin-bottom: 25px;letter-spacing: -1px; margin: 0}	
.eb-container h4 { font-weight: 500; font-size: 26px; line-height: 36px; margin: 0; margin-bottom: 20px !important; font-style: italic;}	
.eb-container h5{font-style: normal; font-weight: 400; font-size: 18px; line-height: 22px; padding: 20px 0 0; margin:0}	
	
/* banner style home page main banner */
#mobile-banner-wrapper {display:none;}
.eb-container .video-banner {width: 100%    !important;
  height: auto   !important; padding:0;position:relative;  margin:0; overflow:hidden;}
.eb-container .video-banner {background-color: #000000;}
.eb-container .video-banner-desc {position: absolute;top: 45%; align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center; width: 100% }
.eb-container .video-banner-desc button { cursor: pointer; margin-top: 10px ; width:0; height:0; border-style:none; padding:0; position: relative; left:-25px; }
#play-button, #play-button-2 { width: 50px; }
.eb-container .video-banner h2 {font-size: 60px; font-weight: 500; line-height: 80%; letter-spacing: -1px; color: #ffffff; padding-bottom: 5px; font-style: italic;text-shadow: 5px 5px 10px #0000007d; margin: 0 }
.eb-container .video-banner img.video-om {display: none;}
.eb-container .video-banner-desc sup { font-size: 30px;font-weight: normal;}

	
/** LIGHTBOX MARKUP **/
.thumbnail {max-width: 40%;}
.eb-container .lightbox {display: none;position: fixed; z-index: 999;width: 100%;height: 100%; text-align: center;top: 0%;left: 0;background: rgba(0,0,0,0.8); padding-top:5px;}
.eb-container .lightbox img {max-width: 560px;max-height: 315px}
.eb-container .lightbox:target {outline: none;display: block;}	
	

/* =================================================== 
Mobile First START
=================================================== */
#gec-title { padding: 1.25rem 0; background-color: #434244; color: #fff;
font-weight: 500; font-size: 40px; line-height: 40px; text-align: center; border-top: white solid 2px; border-bottom: white solid 2px;font-style: italic;}
#gec-title-trademark {
  font-weight: 200;
  font-size: 14px;
  vertical-align: super;
}
	
/* parallax images */	
#parallax-tab1, #parallax-tab2, #parallax-tab3 {}
.parallax { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-position: center; background-repeat: no-repeat; position: relative; padding: 0;}

.tire-image { background-color: #000000; background-image: url("../jpg/parallax-tires.jpg"); background-size: cover; padding: 10% 5% }
.tire-image1 { background-color: #000000; background-image: url("../jpg/scott.jpg"); background-size: cover; padding: 10% 5%}
.tire-image2 { background-color: #000000; background-image: url("../jpg/shelving-chris3.jpg"); background-size: cover; background-position: top; padding: 10% 5%}

/* ==========*/	

.text-box { width:100%; margin-bottom:24px; background-color: rgba(0, 0, 0, 0.65); color: #fff; z-index: 1; position: relative; padding: 2rem; border-radius: 4px;  height: unset; /*left: 3rem;*/ align-items: center; justify-content: space-around }	
.text-box h2 { font-weight: 500; font-size: 50px; line-height: 4rem;
color: #ffffff; margin: 20px 0; }
.text-box h3 { font-weight: 500; font-size: 30px; line-height: 3rem;
color: #ffffff; margin: 30px 0 0; font-style: italic;}
.text-box p { font-size: 23px; font-weight: 200; line-height: 2.35rem; color:#ffffff; }	

.eb-tagline { font-weight: 500; font-size: 30px; line-height: 2.5rem; text-transform: uppercase; font-style: italic; margin-top: 30px; color:#ffffff; }
.eb-tagline span { font-style: normal; }
.eb-container .text-center {text-align: center;}	
.eb-tagline-trademark {
  font-weight: 200;
  font-size: 14px;
  vertical-align: super;
}

.flex-area { display: flex; flex-wrap: wrap; }

/* parallax images Mobile */	
.mobile-parallax { display: none; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #191c21}
.mobile-parallax img { max-width: 100%;  } 
.mobile-parallax>div { width: 100%; padding: 0; margin: 0; text-align: center } 
.mobile-parallax>div.text-box-mob { text-align: center; color: #ffffff; padding: 20px }
.mobile-parallax h2 { color: #ffffff; margin: 10px 0; text-align: center; font-size: 30px} 
.mobile-parallax p { color: #ffffff; margin: 10px 0; text-align: center} 
.moblogo { width: 50%;  } 
/* ==========*/	


/* === ABOUT US ====*/

#about-slide-container { 
margin: 0;
display: block;
background-color: #F9F9F9;
padding: 40px 8px; 
}

/* .driveon { margin: 0 !important;   }	 */

.driveon .driveonSlides { 
  flex-direction: column;
 }

.driveon div > div.video-next {
  padding: 0 50px; 
}

.driveon img {width: 100%; margin: auto;}

.driveon p {font-size: 18px;
    font-weight: 300;
    line-height: 1.5rem;
    margin: 15px 0 }

.copy-container {
  display: block;
  width: 100%;
  margin: 0;
  margin-bottom: 10px;
  /* height: 220px; */
}

.copy-container h3 {    
  margin: 20px 0 20px;
  font-weight: 500;
  font-size: 36px;
  line-height: 40px;}


.button-wrapper {
  width: 50%;
  margin: auto;
  display:flex;
  justify-content: space-evenly;
}
	
.next, .prev {
  border-color:unset;
  border-style:none;
  border-radius: 4px;
  font-size: 23px;
  padding: 4px 16px; 
  color: white;
  background-color: #D41E3D;
	align-items:center;
	box-shadow: 1px 1px 4px #0000007d;
  }


/* ANIMATIONS */

.driveon .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s; }

@-webkit-keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
@keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }
	

.parallax .text-box {
  -webkit-animation: fadeInAnimation ease 1.5s;
          animation: fadeInAnimation ease 1.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeInAnimation {
  0% { opacity: 0; } 
  100% { opacity: 1; }
}	
	
/* Our Brands & Why Choose Us */
.eb-container section { padding:50px; }		
.eb-container section.brand-logo {margin: 0; background-color: #F9F9F9; display: flex; flex-wrap: wrap; }
.eb-container .brand-logo .flex-wrap { width:100%}
.eb-container .brand-logo .flex-wrap img {width: 20%; }
.eb-container .brand-logo .flex-wrap .twocol {padding:0 20%; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between}
.eb-container .brand-logo .flex-wrap .twocol>div { width: 48%;margin: 15px 0 0;}
.eb-container .brand-logo .flex-wrap .threecol {display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin: 0 5%}
.eb-container .brand-logo .flex-wrap .threecol>div { width: 30%;margin: 15px 0 0; }	
.eb-container section.our-brand {margin: 0; background-color: #F9F9F9;}
.eb-container .our-brand .comp { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin: 0 5%}
.eb-container .our-brand .comp img {max-width: 100%; }
.eb-container .our-brand .comp>div { width: 33%;margin: 10px 0 0; }
.eb-container section.shop-categ {margin: 50px 0 0; padding: 0;  }
.eb-container section.shop-categ .procon{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 }
.eb-container section.shop-categ .procon>div { width:28.5%; border: 1px solid #dddddd;border-radius: 8px; padding: 5px 20px; display: flex; margin-bottom: 27px }	
.eb-container section.shop-categ .procon>div.shpimg { width:49%; }
.eb-container section.shop-categ .procon>div.shpcont { width:49%; margin-top: 20px}
.eb-container section.shop-categ .procon>div h5 { padding: 40px 0 0 20px;  }
.eb-container section.shop-categ .top-spc { margin-bottom: 30px;  }
.eb-container a { text-decoration: none; color: unset; }
.eb-container .design-space{width:100%;position:relative;}
.design-space .swiper-container {width:100% !important ; margin: 0 auto}

.vid-rfrm {padding:56.25% 0 0 0;position:relative; opacity:.25}


/* gallery */	
.eb-container .design-space-np{background: #191c21;padding: 40px 53px 30px;  }
.design-space-wrapper {padding: 0px}	
.eb-container .design-space{width:100%;position:relative;}	
.design-space .swiper-container {width:100% !important ; margin: 0 auto}
.swiper-wrapper h2{ color: #ffffff; margin-top: 20px; }
.swiper-container{position:relative;width:100%;margin-left:auto;margin-right:auto;overflow:hidden;z-index:1;  }
.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;border-radius:5px; height: unset; overflow: hidden; margin-bottom: 50px }
.swiper-slide img { width: 100%; margin-top: 0px }
.swiper-slide .iframe-container{display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden; text-align: right; gap:20px }	
.swiper-wrapper{position:relative;width:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;transition-property:transform;transform:translate3d(0px,0,0)}
.swiper-slide .iframe-container>div{ width:48%; position: relative; margin-top: 80px }
.swiper-slide .iframe-container>div.ableft { text-align: left;}
.swiper-slide .iframe-container h2 { margin: 20px 0; color:#ffffff; font-weight: 500; font-size: 40px; line-height: 3rem; }
.swiper-slide .iframe-container p { color:#ffffff; font-size: 23px; font-weight: 200; line-height: 1.85rem; margin: 15px 0; }	
.swiper-button-next,.swiper-button-prev{position:absolute;content:"";top:0;z-index:1;cursor:pointer;opacity:1 }
.swiper-button-prev.swiper-button-disabled{opacity:.4;cursor:not-allowed}
.swiper-button-next.swiper-button-disabled{opacity:.4;cursor:not-allowed}
.swiper-button-next {
  color:#fff;
  background-color: #007DC8;
  border-radius: 4px;
  right: 0px;
  z-index: 15;
  font-size: 23px;
  line-height: 40px;	
  box-shadow: 1px 1px 4px #0000007d;	
	padding: 4px 16px;
}

.swiper-button-prev {
  color:#fff;
  background-color: #007DC8;
  border-radius: 4px;
  z-index: 20;
  font-size: 23px;
  line-height: 40px;
	box-shadow: 1px 1px 4px #0000007d;
	padding: 4px 16px;;
	right:75px;
}

.swiper-button-prev:hover, .swiper-button-next:hover {
  background-color: #6CC2ED;
}

.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10;bottom:0;left:0;width:100%}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background:#d51e3d}
.swiper-pagination-bullet{width: 10px;height: 10px;border-radius: 100px;background:#c8c8c8;display:inline-block;margin:0 10px;cursor:pointer}

.iframe-container a {
  text-decoration: underline ;
}

.iframe-container a.soul {
  /* position: absolute;
  right: 0;
  bottom: 32%; */
  text-decoration: underline ;
  font-size: 23px;
  font-weight: 500;
  color: #007DC8;
text-align: left;	
}
	
.reg-mark {vertical-align: super; font-size: 12px;  }
	
/* Our Brands & Why Choose Us */
.eb-container section { padding:50px; }		
.eb-container section.brand-logo {margin: 0; background-color: #F9F9F9; display: flex; flex-wrap: wrap; }
.eb-container .brand-logo .flex-wrap { width:100%}
.eb-container .brand-logo .flex-wrap img {width: 60px; }
#industry-standards-icon {width: 72px;}
#something-extra-icon {width: 58px;}
#warranty-icon {width: 72px;}
.eb-container .brand-logo .flex-wrap .twocol {padding:0 20%; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between}

.eb-container .brand-logo .flex-wrap .twocol>div { width: 48%;margin: 15px 0 0;}
.eb-container .brand-logo .flex-wrap .threecol {display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin: 0 5%}
.eb-container .brand-logo .flex-wrap .threecol>div { width: 30%;margin: 15px 0 0; }	
.eb-container section.our-brand {margin: 0; background-color: #F9F9F9;}
.eb-container .our-brand .comp { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; margin: 0 5%}
.eb-container .our-brand .comp img {max-width: 100%; }
.eb-container .our-brand .comp>div { width: 33%;margin: 10px 0 0; }
.eb-container section.shop-categ {margin: 50px 0 0; padding: 0;  }
.eb-container section.shop-categ .procon{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 }
.eb-container section.shop-categ .procon>div { width:28.5%; border: 1px solid #dddddd;border-radius: 8px; padding: 5px 20px; display: flex; margin-bottom: 27px }	
.eb-container section.shop-categ .procon>div.shpimg { width:49%; }
.eb-container section.shop-categ .procon>div.shpcont { width:49%; margin-top: 20px}
.eb-container section.shop-categ .procon>div h5 { padding: 40px 0 0 20px;  }
.eb-container section.shop-categ .top-spc { margin-bottom: 30px;  }

.design-space-np .swiper-wrapper .swiper-button-next,
.swiper-button-prev {
  
  content: "";
  /* z-index: 1; */
  cursor: pointer;
  opacity: 1
}
.design-space-np .swiper-wrapper .swiper-button-prev.swiper-button-disabled{opacity:.4;cursor:not-allowed}
.eb-container section .our-brand a {color: #ffffff;font-size: 16px;font-weight: 600;text-transform: none;line-height: 1.75;cursor: pointer; margin: 10px 80px 0 0; text-decoration: none  }

.slide-imgnew { margin-top: 100px; }


@media screen and (max-width: 1200px) {
	#eb-nav {
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #004e7d;
	}
	.show {
	height: 0;
	transform: scaleY(0);
	}
}

/* ==================================== */

/* ==================================== */
@media screen and  (min-width: 610px) {
  #mobile-video { display: none;}
}

@media screen and  (min-width: 768px) {
  #desktop-video { display: flex;}
}


@media screen and (min-width: 876px) {
  .eb-container .design-space-np { padding: 50px 53px 50px; }
  #play-button { width: 75px; margin-top: 12px; }
}


  @media screen and (min-width: 1000px) {
    /*.parallax {height: 700px;}
    .parallax .text-box { width: 50%; right: 18%; margin-bottom:0;}*/
    .parallax .text-box-img {display: flex; z-index: 1; position: absolute; width: 20%; bottom: 65px;  right:10%;}
    #tire-logo {bottom: 60px; /*left:10%;*/}
    /* #tire-text-box { left:20%;}	 */
    #about-slide-container { padding: 60px 20px; } 
    .driveon .driveonSlides {flex-direction: row; justify-content: space-evenly;}
    .driveon img {width: unset; max-width: 480px}
    .driveon p {font-size: 20px;
      font-weight: 300;
      line-height: 2.25rem;
      margin: 15px 0 
    }
    .button-wrapper { 
      display: flex;
      justify-content: space-between;
    }
    .driveon .driveonSlides { flex-wrap: wrap; }
    .copy-container {
      display: block; 
      /* margin: 0;   */
      /* padding: 0 20px; */
    }
    .next, .prev { font-size: 28px}     
  }
  

  @media screen and (min-width: 1200px) {
    
    .parallax .text-box-img {bottom: 75px;}
    #tire-logo {bottom: 130px}
    .copy-container {width:50%; margin:auto;}
    .button-wrapper { 
      width: 100% !important;
      bottom: 240px;
      position: relative;
  
       }
    }

    @media screen and (min-width: 1300px) {
      .parallax .text-box { width: 35%; }
      }

  @media screen and (min-width: 1400px) {
    .swiper-slide img {  }	
    }
@media screen and (min-width:768px){
	.contentWrapper {padding: 0 1%; }
}

@media screen and (max-width: 768px) {
/*.swiper-slide .iframe-container>div{ width:48%; position: relative;}
.driveon img {width:60%;} 
.slide-imgnew { margin-top: 100px; }*/

}


@media screen and (max-width:768px){
.eb-container .brand-logo .flex-wrap .twocol>div {width: 48%;}
.swiper-slide .iframe-container>div	{width: 100% !important;}
.swiper-slide .iframe-container>div.slide-imgnew { padding-top:10px}	
.swiper-container {  display: block; }
.eb-container .brand-logo .flex-wrap .twocol>div, .eb-container section.shop-categ .procon>div {width: 48%;}	
.button-wrapper { bottom: 90px; }	
.iframe-container a.soul { font-size: 28px; line-height: 40px}
.eb-container .our-brand .comp>div {width: 100%;}
.swiper-slide .iframe-container>div.ableft { text-align: left; order: 2; }	
.swiper-pagination	{ display:none }
.swiper-button-next, .swiper-button-prev{ position:absolute; content:"";top: 95%;z-index:1;cursor:pointer;opacity:1 }
.swiper-button-prev {right:unset;} 
.swiper-slide .iframe-container>div.ableft { text-align: left; order: 2;}	

}

@media screen and (max-width:610px){
.tire-image, .tire-image1, .tire-image2, .parallax .text-box, .parallax .text-box-img  {display: none;}
.mobile-parallax {display: block;}
.eb-container .video-banner-desc {display: none;}
.eb-container .brand-logo .flex-wrap .threecol>div, .eb-container .brand-logo .flex-wrap .twocol>div {width: 100%;}
#mobile-banner-wrapper {display:block;}
#mobile-title {display:block; text-align:center; width: 100%; color:#212934;}
/* #mobile-banner-wrapper {position: absolute; display:flex; flex-direction: column; gap:20px; justify-content: center;  align-items: center; width: 100%; height:100%; z-index: 1; background-color:#000000c7;} */
#mobile-video {opacity:1; display:block;}
#desktop-video { display: none;}

#gec-title { font-weight: 700; font-size: 30px; line-height: 40px;}	 
.eb-container .brand-logo .flex-wrap .twocol { padding: 0;}		
.eb-container .brand-logo .flex-wrap img {width: 60px; }
.swiper-slide .iframe-container p {font-size: 18px;}
.eb-container h5 {font-weight: 600; }
.swiper-slide .iframe-container h2 { font-size: 30px; margin: 0 0 20px }	
.swiper-pagination-bullet { margin: 0 5px; }
.swiper-slide .eb-tagline { margin: 20px 0 0; }
.eb-tagline { font-size:20px; }
.iframe-container a.soul { font-size: 25px; line-height: 55px}	
.swiper-slide .iframe-container>div	{ margin-top: 0px}	
.eb-container .video-banner-desc { top:24%}	
.eb-container .video-banner h2 { font-size:40px; line-height: 15% }
#slide-container { padding: 25px 50px}
.eb-container section.shop-categ .procon>div {width: 100%;}		
}	

@media screen and (max-width:370px){
.swiper-slide .iframe-container h2 { font-size: 28px; margin: 0 0 15px }	

.iframe-container a.soul {font-size: 18px; line-height: 18px}
.eb-container h4 {font-size: 24px;}	
.eb-container section {padding: 50px 0}		
}