@import url('https://fonts.googleapis.com/css?family=Mitr:300,400,700&subset=thai');
body{font-family:'Mitr',sans-serif}
 nav ul a {
    transition: background-color .3s;
    font-size: 1rem;
    color: #000;
    display: block;
    padding: 0 15px;
    cursor: pointer;
}
nav {
    color: #fff;
    background-color: transparent;
    width: 100%;
    height: 56px;
 
}
 #navmain{
    box-shadow: none;
}
.dropdown-content li > a, .dropdown-content li > span {
    font-size: 16px;
    color: #000;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}
 #logo-container{
	 margin-left:25px
	 }
 .padding15{
	 padding:15px
	 }
 .side-nav{
	 background-color:#000
	 }
 #logo-container{
	 z-index:100;position:relative
	 }
 nav{
	 color:#CCC;background-color:transparent;width:100%;box-shadow:none
	 }
 nav ul a{
	 transition:background-color .3s;font-size:1rem;color:#666;display:block;padding:0 15px;cursor:pointer
	 }
nav ul a:hover{
		 color:#e8282d;text-decoration:none;background-color:rgba(255,255,255,0.5)
		 }
 
 .side-nav li>a{
	 color:#666
	 }
 .side-nav li>a:hover{
	 background-color:rgba(255,255,255,0.5)
	 }
 #nav{
	 color:#CCC;
	/*background-color:#000; */
	 width:100%;
	 box-shadow:none
	 }
 
 #nav ul a{
	 transition:background-color .3s;font-size:1rem;color:#666;display:block;padding:0 15px;cursor:pointer
	 }
 
 #nav ul a:hover{
	 color:#e8282d;text-decoration:none;background-color:rgba(255,255,255,0)
	 }
 #nav>.side-nav li>a:hover{
	 background-color:rgba(255,255,255,0.5)
	 }
 
 textarea.materialize-textarea{
	 overflow-y:hidden;padding:.8rem 0 1.5rem 0;resize:none;min-height:2rem
	 }
 
 .progress{
	 position:relative;height:8px;display:block;width:100%;background-color:#fc9;border-radius:2px;margin:.5rem 0 1rem 0;overflow:hidden
	 }
 
 .progress .determinate{
	 position:absolute;top:0;left:0;bottom:0;background-color:#e8282d;transition:width .3s linear
	 }
 .progress .indeterminate{
	 background-color:#e8282d
	 }
 
 input:focus:not([type]):not([readonly]),input[type="text"]:focus:not([readonly]),input[type="password"]:focus:not([readonly]),input[type="email"]:focus:not([readonly]),input[type="url"]:focus:not([readonly]),input[type="time"]:focus:not([readonly]),input[type="date"]:focus:not([readonly]),input[type="datetime"]:focus:not([readonly]),input[type="datetime-local"]:focus:not([readonly]),input[type="tel"]:focus:not([readonly]),input[type="number"]:focus:not([readonly]),input[type="search"]:focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]){
	 border-bottom:1px solid #ff9800;box-shadow:0 1px 0 0 #ff9800
	 }
 input:not([type]):focus:not([readonly])+label,input[type=text]:focus:not([readonly])+label,input[type=password]:focus:not([readonly])+label,input[type=email]:focus:not([readonly])+label,input[type=url]:focus:not([readonly])+label,input[type=time]:focus:not([readonly])+label,input[type=date]:focus:not([readonly])+label,input[type=datetime]:focus:not([readonly])+label,input[type=datetime-local]:focus:not([readonly])+label,input[type=tel]:focus:not([readonly])+label,input[type=number]:focus:not([readonly])+label,input[type=search]:focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label{color:#ff9800}input.valid:not([type]),input.valid:focus:not([type]),input.valid[type="text"],input.valid[type="text"]:focus,input.valid[type="password"],input.valid[type="password"]:focus,input.valid[type="email"],input.valid[type="email"]:focus,input.valid[type="url"],input.valid[type="url"]:focus,input.valid[type="time"],input.valid[type="time"]:focus,input.valid[type="date"],input.valid[type="date"]:focus,input.valid[type="datetime"],input.valid[type="datetime"]:focus,input.valid[type="datetime-local"],input.valid[type="datetime-local"]:focus,input.valid[type="tel"],input.valid[type="tel"]:focus,input.valid[type="number"],input.valid[type="number"]:focus,input.valid[type="search"],input.valid[type="search"]:focus,textarea.materialize-textarea.valid,textarea.materialize-textarea.valid:focus{
	 border-bottom:1px solid #4caf50;box-shadow:0 1px 0 0 #4caf50
	 }
 
 .dropdown-content{
	 box-shadow:none
	 }
 .dropdown-content li:hover,.dropdown-content li.active,.dropdown-content li.selected{
	 color:#ff9800
	 }
 .dropdown-content li>a,.dropdown-content li>span{
	 color:#666;padding:14px 10px
 }
 
 select:focus{outline:2px solid #ff9800}
 
 .news-event-li li{float:left}
 
 .white-btn{background-color:#FFF;border:0 solid #CCC;color:#666;box-shadow:0 2px 2px 0 rgba(0,0,0,0.0),0 1px 5px 0 rgba(0,0,0,0.0),0 3px 1px -2px rgba(0,0,0,0.0)}
 .white-btn:hover,.white:focus{background-color:#000;border:0 solid #000;color:#FFF;box-shadow:0 2px 2px 0 rgba(0,0,0,0.0),0 1px 5px 0 rgba(0,0,0,0.0),0 3px 1px -2px rgba(0,0,0,0.0)}
 
 .card{position:relative;margin:.5rem 0 1rem 0;background-color:#fff;transition:box-shadow .25s;border-radius:2px}
 .card .card-content .card-title{display:block;line-height:1.2;margin-bottom:8px}
 .card .card-title{font-size:12px;font-weight:700}
 
 .parallax-container{position:relative;overflow:hidden;height:400px}
 
 .warpper-video{min-height:300px;margin-bottom:30px;background:url(../images/carbon_fibre.png);padding-top:50px}
 
 #video{margin-top:15px}
 
 .fancybox-slide--video .fancybox-content{width:800px;height:600px;max-width:80%;max-height:80%}
 .item-video{height:200px}
 
 .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:transparent}
 .parallelogram{ width:200px; min-width:30%;padding:1px;background:#e8282d;-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);transform:skew(-20deg)}
 
  .parallelogram2{ width:100%; min-width:100%; padding:8px 5px 2px 5px; background:#000; color:#e8282d;
	font-size:1.2rem;
  -webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);transform:skew(-20deg);
  }
 
 .texth{-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);transform:skew(20deg)}
 
 .tb{display:table}
 .tb-cell{display:table-cell;vertical-align:middle;width:100%}
 
 .foter li a{color:#666;font-size:.8rem;line-height:2}
 .foter li a:hover,.foter li a:focus{color:#ff9800}
 
 .list-icon{padding-left:0;list-style:none}
 .list-icon li{display:inline-block;padding-right:5px;padding-left:0;margin-bottom:10px}
 
 .social:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1)}
 .social{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s}
 .social:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1)}
 .social{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;color:#666}
 
 .box-social{width:30px;height:30px;background:#666;border-radius:4px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s}
 
 .box-social:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1)}
 
 #social-fb:hover{color:#3b5998}
 #social-tw:hover{color:#4099ff}
 #social-gp:hover{color:#d34836}
 #social-em:hover{color:#f39c12}
 #social-line:hover{color:#00c500}
 #map_canvas{width:100%;height:400px}
 .listmap ul{margin:0;padding:0}
 .listmap li{cursor:pointer;line-height:2;border-bottom:1px dotted #CCC;color:#666;padding:5px 0 5px 0;display:block}
 .listmap li:hover{color:#ff9800}
 #infowindow{max-width:250px;padding:5px}
 #infowindow img{width:100%}
 
 ul.list-disc li{list-style-type:disc}
 .linkb{color:#666}
 .linkb:hover{color:#e8282d;text-decoration:none}
 .list-color li{display:inline-block;padding-right:10px}
 .list-color a{border:1px solid #CCC}
 .list-color a:hover{border:2px solid #e8282d}
 .btn1{border-radius:15px;box-shadow:none;color:#666;background-color:#CCC}
 .btn1:hover{color:#FFF;background-color:#e8282d}
 .btn2{border-radius:15px;box-shadow:none;color:#fff;background-color:#000}
 .btn2:hover{color:#e8282d;background-color:#000;box-shadow:none}
 #exTab1 
 .tab-content{color:white;background-color:#000;padding:20px;max-height:400px;overflow:scroll}
 #exTab2 h3{color:white;background-color:#000;padding:5px 15px}
 #exTab1 .nav-pills{padding-left:4px}
 #exTab1 .nav-pills>li{-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);transform:skew(-20deg)}
 #exTab1 .nav-pills>li>a{border-radius:0;margin-left:5px;color:#000;background-color:#CCC}
 .skwn{-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);transform:skew(20deg)}#exTab1.nav>li>a:hover,#exTab1.nav>li>a:focus{text-decoration:none;background-color:#CCC}
 
 #exTab1 .nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{color:#fff;background-color:#000}
 
 form .button-red{background:#e73a37;padding:0;line-height:40px;width:165px}
 
 iframe{top:0;left:0;width:100%;height:100%}
 .calculate-result dt{border-top:1px solid #d3d3d3;float:left;clear:left;width:100%;margin-top:15px}
 .calculate-result p{margin-bottom:15px}
 .dis-pricepermonth{color:#e8282d;font-size:1.5em}
 
 .ico{width:25px;height:25px}
 
 .button:focus{outline:0;background-color:transparent}
 
 .fancybox-close-small{position:absolute;top:0;right:0;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:0;outline:0;background:transparent;z-index:10;cursor:pointer}
 
 .fancybox-close-small::after{content:"×";position:absolute;top:5px;right:5px;width:30px;height:30px;font:20px/30px Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:normal;color:#888;font-weight:300;text-align:center;border-radius:50%;border-width:0;background:#000;transition:background .25s;box-sizing:border-box;z-index:2}
 
 #hidden-content-b{border-radius:4px;transform:translateY(-50px);transition:all .33s;width:90%;max-width:1000px}
 .fancybox-slide--current #hidden-content-b{transform:translateY(0)}
 ul.ul-normal li{list-style-type:disc}
 .warp-bp{text-align:center;margin:15px 0 15px 0}
 .slide-header{text-align:center;position:relative;line-height:1 em}
 .slide-header:before{content:'';width:709px;height:130px;background:url(../images/power/xslide-header.png) no-repeat center center;position:absolute;display:inline-block}
 .slide-header span{padding:30px 0 30px 50px;display:inline-block;position:relative;white-space:nowrap}.slide-header2{position:relative;line-height:1 em}
 .slide-header2:before{content:'';width:385px;height:100px;background:url(../images/power/xslide-header2.png) no-repeat center center;position:absolute;display:inline-block}
 .slide-header2 span{display:inline-block;position:relative;white-space:nowrap}
 .bgx-x-safety{background:url(../images/safety/x-bg.jpg) no-repeat}
 .divx-li{margin-bottom:15px}
 .x-li li{width:50%;float:left}
 .mu-color{color:#cfa84d}
 .carousel .indicators .indicator-item.active{background-color:#cfa84d}
 .panel-box{transition:box-shadow .25s;padding:24px;margin:.5rem 0 1rem 0;border-radius:2px;background-color:#fff}
 .picker__day.picker__day--today{color:#e8282d}
 .picker__close,.picker__today{font-size:1.1rem;padding:0 1rem;color:#e8282d}
 .picker__weekday-display{background-color:#000;padding:10px;font-weight:200;letter-spacing:.5;font-size:1rem;margin-bottom:15px}
 .picker__date-display{text-align:center;background-color:#e8282d;color:#fff;padding-bottom:15px;font-weight:300}
 .picker__day--selected,.picker__day--selected:hover,.picker--focused .picker__day--selected{border-radius:50%;-webkit-transform:scale(0.9);transform:scale(0.9);background-color:#e8282d;color:#fff}
 
 .pagination li a{color:#444;display:inline-block;font-size:1rem;padding:0 10px;line-height:30px}
 .max-thumb{max-height:150px;overflow:hidden}
 .card .card-image{position:relative;overflow:hidden;max-height:130px}
 
 #sidenav-overlay{position:relative;top:0;left:0;right:0;height:120vh;background-color:rgba(0,0,0,0.5);
 /*z-index:999; */
 will-change:opacity
 }
 
 [type="radio"]:checked+label::after,[type="radio"].with-gap:checked+label::after{background-color:#ff9933!important}[type="radio"]:checked+label::after,[type="radio"].with-gap:checked+label::before,[type="radio"].with-gap:checked+label::after{border:2px solid #ff9933!important}
 
    .owl-two {
		width:300px;
	}
	.item-pro{
		width:280px;
		height:150px;
		overflow:hidden;
		margin:10px;
	}
   
   
   
 @media(max-width:600px){
	 .parallax-container{margin-top:0;overflow:hidden;height:950px}
 
	.s-margin-top{margin-top:30px}
	.warpper-video{height:300px;margin-bottom:30px;background:url(../images/carbon_fibre.png);padding-top:15px}
	#map_canvas{width:100%;height:300px}
	.news-event-li li{float:none}
	.listmap li{cursor:pointer;line-height:2;border-bottom:0 dotted #CCC;color:#666;padding:0;display:inline-block;width:50%;overflow:hidden;text-align:center}
	.btn1{width:100%}
	#exTab1 .nav-pills>li{width:45%;float:left;text-align:center}
	 .gift{
		 position:fixed; bottom:0px; right:0; z-index:999; 
	 }
	#isuzu-car{
	width:100%
	}
	 .bgmain{
	   position:absolute; width:100%; 
	   height:100%; left: 0px;
	   top: 0px;
	   background-image: url('../images/bg-showroom-web-s.jpg');
	   background-repeat: no-repeat; 
	   background-position: 50% 0%;
	     z-index:-1;
   }
   .divcar{
	   position: absolute; top:150px; width:100%; z-index:200; 
   }
   .#iconfb{
		width:35%;  overflow:hidden; right:0; position:absolute; top:15%;"
	}
   
 }
 
 @media(min-width:601px) and (max-width:991px){
	 #map_canvas{width:100%;height:300px}
	 .warpper-video{height:330px;margin-bottom:30px;background:url(../images/carbon_fibre.png);padding-top:15px}
	#isuzu-car{
		  width:600px;
	}
	#isuzu-car img{
		  width:550px;
	}
		
	  .bgmain{
	   position:absolute; width:100%; 
	   height:100%; left: 0px;
	   top: 0px;
	   background-image: url('../images/bg-showroom-web-s.jpg');
	   background-repeat: no-repeat; 
	   background-position: 50% 0%;
	     z-index:-1;
	}
		
		.divcar{
		position: absolute; bottom:15%; width:100%; z-index:200; 
		}
	}
@media(min-width:1200px){
	 
	 
	#isuzu-car{
	width:100%
	}
	#isuzu-car img{
	  width:550px;
	}
	 
	.bx-wrapper {
	 	width:1400px;
	}
	 
	.bgmain{
	   position:absolute;
	   width:100%; 
	   height:100%; 
	   
	   left: 0px;
	   top: 0px;
	   background-image: url('../images/bg-showroom-web.jpg');
	   background-repeat: no-repeat; 
	   background-position: 50% 100%;
	     z-index:-1;
		  background-size: cover; 
		/*  min-height:100vh; min-width: 100vw; max-height: 100vh; max-width: 100vw; */
   }
   .divcar{
	   position: absolute; bottom:10%; width:100%; z-index:400; 
   }
   .gift{
		 position:fixed; bottom:50px; right:0; z-index:999; 
	 }
}


.icondiv{
	position:absolute;
	z-index:100;  
	 border-radius: 15px;   
  	padding:15px;
	right:15px;
	bottom:15px; 
	line-height: 50%;
 
 
 }
 
 
.icon:nth-child(1) { background: #3B5998; }
.icon:nth-child(2) { background: #e4405f; }
.icon:nth-child(3) { background: #00c300; }

.icon {
  position: relative;
  overflow: hidden;
  width: 35px !important;
  height: 35px !important;
  /*
  display: inline-block; 
  */
  margin: 0px 0 0px 5px;  
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  line-height:35px !important;
  font-size: 1.5em; 
}

/* Shine */
 .icon:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg); 
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Hover state - trigger effect */

.icon:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.1s;
  transition-timing-function: ease;
}

/*
button {
  background: #333;
  color: #ccc;
  width: 200px;
  height: 60px;
  border: 0;
  font-size: 18px;
  border-radius: 4px;
  font-family: 'Raleway', sans-serif;
  transition: .6s;
  overflow: hidden;
}
button:focus {
  outline: 0;
}
button:before {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  width: 60px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}
button:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 100%;
  left: 30px;
  top: 0;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transform: translateX(-100px) skewX(-15deg);
          transform: translateX(-100px) skewX(-15deg);
}
button:hover {
  background: #338033;
  cursor: pointer;
}
button:hover:before {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 0.6;
  transition: .7s;
}
button:hover:after {
  -webkit-transform: translateX(300px) skewX(-15deg);
          transform: translateX(300px) skewX(-15deg);
  opacity: 1;
  transition: .7s;
}
*/

 .shine-me {
    width:100%; /*Make sure the animation is over the whole element*/

    -webkit-animation-name: ShineAnimation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.12,.89,.98,.47);
}

@-webkit-keyframes ShineAnimation{
    from {
        background-repeat:no-repeat;
        background-image:-webkit-linear-gradient(
            top left,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.0) 45%,
            rgba(255, 255, 255, 0.5) 48%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.5) 52%,
            rgba(255, 255, 255, 0.0) 57%,
            rgba(255, 255, 255, 0.0) 100%
        );
        background-position:-250px -250px;
        background-size: 600px 600px
    }
    to {
        background-repeat:no-repeat;
        background-position:250px 250px;
    }
}



 
/* long form:  
div.selected {
    animation-name            : fade      , shrink    ;
    animation-duration        : 0.5s      , 0.53s     ;
    animation-iteration-count : infinite  , infinite  ;
    animation-direction       : alternate , alternate ;
}
*/
@keyframes fade {
    0% { opacity   : 0; }
	50% { opacity   : 40; } 
    100%   { opacity   : 0; }
}
/*
@keyframes shrink {
    from { transform : scale(1); }
    to   { transform : scale(0.75); }
}
*/
@keyframes moveright {
    from {    
		transform:translateX(-150px);
		/*
		-ms-transform:translateX(50%); 
		-webkit-transform:translateX(50%);  
		*/
	}
    to  {
		 transform: translateX(300%);
	}
}

@keyframes moveright2 {
    from {    
		transform:translateX(0px);
		/*
		-ms-transform:translateX(50%); 
		-webkit-transform:translateX(50%);  
		*/
	}
    to  {
		 transform: translateX(150%);
	}
}
 .bg  {
	position: absolute;
    animation: fade 2s infinite ,moveright2 2s infinite ;
	bottom:0 ;
	left:-10%;
	/* , shrink 0.53s infinite alternate  */
}
 .bg2{ 
	position: absolute;
	top:20px;
	left:-30%;
	 animation: fade 2s infinite ,moveright 2s infinite ;
 }
 
 .bg3{ 
	position: relative;  
	left: 0%;
	 animation: fade 2s infinite ,moveright 2s infinite ;
 }
 
 .bg4{ 
	position: absolute; 
	bottom:0 ;
	 animation: fade 2s infinite ,moveright2 2s infinite ;
 }
  @media only screen and (max-width: 1200px)  { 
	  
  }
  
 
.maxw{
	  width:1400px;
 }