/* Custom Stylesheet */
 
  @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'); 
  @import url('https://fonts.googleapis.com/css?family=Mitr:300,400,700&subset=thai');
 
 body{
	font-family: 'Mitr', sans-serif;
	  font-size: 1.4 em;
	  line-height:1.8;
 }
  
 .thai {
 
	font-family: 'Mitr', sans-serif;
 
 }
 .navbar {
    border-radius: 0px;
}
.responsive-img {
    width: 100%;
    max-height: auto;
}
#mainNav{
	 
}
#sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    will-change: opacity;
}
.nav-wrapper{
	padding:0px 15px 0px 15px;
}
.index-remark{
		position:absolute;
		z-index:10;
		left:25%;
		bottom:15%;
}

	/*
			.hide-on-small-only
			.hide-on-small-and-down
			.hide-on-med-and-down
			.hide-on-med-and-up
			.hide-on-med-only
			.hide-on-large-only
			.show-on-large
			.show-on-medium
			.show-on-small
			.show-on-medium-and-up
			.show-on-medium-and-down
	*/
  .navbar-nav {
    /* float: left; */
     
	}
  .nav-wrapper{
	/*  z-index:100;   */
  }
  
  
  .padding15{
	  padding:15px;
  }
   .bg-black{
	   background:#000000;
   }
  
   
  .headtext{
	  color:#000;
  }
  
 .hide_check{
	opacity:0;
 }
 .visible_check{
	opacity:1;
 }
 
 .truck-main{
	/*  margin-top:60px; */
 }
 nav ul a:hover {
    background-color: rgba(0, 0, 0, 0);
}
#menu-truck{
	/* display:none;
	  position:fixed;
	 z-index:990;
	 width:100%;
	 background:#FFF; 
	 -webkit-box-shadow: 0px 5px 3px 0px rgba(66,66,66,0.7);
	-moz-box-shadow: 0px 5px 3px 0px rgba(66,66,66,0.7);
	 box-shadow: 0px 5px 3px 0px rgba(66,66,66,0.7);
	 height:250px;
	 */
}
.navcar{
	margin-top:15px;
}

.menu .slide{
	 
}
.traspa{
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

.fixed-action-btn {
    position: fixed;
    right: 23px;
    bottom: 23px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

 .fixed-action-btn.horizontal ul {
    text-align: right;
    right: 64px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 100%;
    left: auto;
    width: 300px;
}


	.foter li a {
		color:#666;
		font-size:0.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: 0px;
		margin-bottom: 10px;
	}
	
	.social {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    color: #666;
	}
	
	
 #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;
 }
 
 
 
 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;
}
	
	
	.parallelogram {
		 width:200px; 
		padding:1px; 
		background: #e8282d; 
		-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);
		font-family: 'Prompt', sans-serif;
	}
	
	.b-truck{ 
		   background: url('../images/king-of-truck-model.jpg') no-repeat top center; 
			width:100%;
			height: 100vh;
			min-height:700px;
			position: relative; 
			background-size: cover; 
	  }

	#design  {
		background: url('../images/bg-design.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh;  
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	#comfort {
		background: url('../images/bg-comfort.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	#performance {
		background: url('../images/bg-performance.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	#durability{
		background: url('../images/bg-durability.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	#safety{
		background: url('../images/bg-safety.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	#partner{
		background: url('../images/bg-partner.jpg')  no-repeat bottom center; 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
	}
	
	#cover { 
		width:100%;
		height: 100vh; 
		min-height:700px;
		position: relative; 
		background-size: cover;
		z-index:-1!important;
 
	}
	
	 .btn1{
		   border-radius: 15px;
		   box-shadow: none;
		      color:#FFF;
		   background-color:#e8282d;
		 
	   }
	   .btn1:hover{
		   color:#666;
		   background-color:#CCC;
	   }
	.owl-nav{ 
	/*	display:none; */
	} 
	
	.dropdown-content li > a, .dropdown-content li > span {
	 
		/* color: #26a69a; */
		color:#e8282d!important;
		line-height: 22px;
		 
	}
	
	.card .card-title {
  
		font-size: 1.2rem;
		 
		line-height: 24px!important;
	   margin-bottom: 15px;
	}
	/*
	.card .card-content .card-title {
    display: block;
    line-height: 32px;
    margin-bottom: 8px;
	}
	*/ 
	.bg-mimamori{ 
		height:500px;
		width:100%; 
		background:url('../images/mimamori/truck-path.jpg')  no-repeat bottom right; 
	}
	
	.rem2{
		font-size:1.2rem; 
	}
	 
	 .margin30{
		 margin-left:30px;
	 }
	 
	 #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)
	 }
	 
@media (max-width:600px) {
  
	.bg-mimamori{ 
		height:auto;
		width:100%; 
		background:none; 
	}
  
	 .index-remark{
		position:absolute;
		z-index:10;
		left:15px;
		bottom:15%;
	}
	
	
	#cover { 
		width:100%;
		height: 350px; 
		min-height:350px;
		position: relative; 
	 
	}
	
	
	
	.b-truck{
		background: url('../images/bg-home-s.jpg') no-repeat top center;  
		width:100%;
		height:400px;
	 	min-height:400px;
		position: relative;  
		 
	}
	
	 
	.fixed-action-btn.toolbar {
		padding: 0;
	 /*	height: 250px; */
	}
	.fixed-action-btn ul {
		width:100%;
	}
	.fixed-action-btn.toolbar ul li { 
		display:  block; 
		margin: 0;  
		width:100%;
   } 
   .bg-mimamori{ 
		height:300px;
		width:100%; 
		
	}
	 
}
@media (min-width:601px) and (max-width:991px) {
	 
 
}
@media (min-width:992px) and (max-width:1199px) {
	 
	 

}
@media (min-width:1200px) {
	  
 
}