@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Kanit&subset=thai,latin);

.kanit_font{font-family: 'Kanit', sans-serif;}
body{color:#333; font-family:Tahoma, Geneva, sans-serif; font-size:14px; background-color:#f6f6f6;}
.title1{font-size:36px; padding:25px 5px 0px 5px; margin:5px;font-family: 'Kanit', sans-serif;}
.title2{font-size:48px; padding:15px; margin:5px; color:#c32a0a;font-family: 'Kanit', sans-serif;}
.content_box{background-color:#FFF; min-height:400px; padding-bottom:30px;}
.about_us{font-size:16px; margin:15px auto 5px auto; max-width:800px;}
.banner_text{background-image:url(../images/trans_bg1.png); background-repeat:repeat; z-index:11; position:relative; margin-top:-100px; padding:15px 5px; font-size:24px; font-family: 'Kanit', sans-serif;;}
.banner_row{padding:20px 5px}
.banner_box{margin-bottom:60px}
.banner_link{color:#c32a0a; text-decoration:none;}
.banner_link:hover{text-decoration:none; color:#333;}
.mid_box{min-height:200px; background-color:#303038; padding:30px 0px;}
.help_box{border-bottom:1px solid #FFF}
.help_title{font-size:28px; color:#FFF; padding:20px;font-family: 'Kanit', sans-serif;}
.help_text{color:#f94c39; margin-bottom:25px;font-family: 'Kanit', sans-serif;}
.feature_box{background-color:#FFF; min-height:400px; padding-top:30px; padding-bottom:30px;}
.feature_title{font-size:32px; margin:25px; text-transform:uppercase;font-family: 'Kanit', sans-serif;}
.pro_box{min-height:525px; transition:0.3s; border-bottom:dashed #efefef 1px; margin-top:10px;}
.pro_box:hover{background-color:#eeeeee; transition:0.3s}
.pro_img_box{min-height:300px; padding:15px}
.manual_box{min-height:250px; padding:15px}
.pro_name{font-size:18px; padding:20px 0px; color:#000; min-height:80px;}
.pro_name2{font-size:32px; padding:10px 0px; color:#000;}
.pro_code{padding:15px 0px;}
.pro_price{padding:15px 0px; color:#000; font-size:20px;}
.pro_detail{padding:10px 0px;}
.pro_detail_title{ font-size:18px; padding-bottom:10px}
.pro_acces{padding:10px 0px;}
.pro_acces_title{ font-size:18px; padding-bottom:10px}
.pro_dimensions{padding:10px 0px;}
.pro_dimensions_title{ font-size:18px; padding-bottom:10px}
.view_bt{margin:20px; max-width:150px; padding:10px 40px; color:#F00}
.view_bt:hover{background-color:#F30; border-radius:3px; color:#FFF;}
.product_link{text-decoration:none;}
.product_link:hover{text-decoration:none;}
.bottom{background-color:#efefef; min-height:400px; padding:20px 0px;}
.bottom_title{font-size:24px; color:#333; padding:10px 0px; text-transform:uppercase; font-family: 'Kanit', sans-serif;}
.bottom_link_box{padding:10px 0px; border-bottom:1px #CCC solid}
.bottom_link{color:#C00; text-decoration:none}
.bottom_link:hover{text-decoration:none; color:#F00;}
.copyright{font-size:12px; padding:5px 10px}
footer{padding-top:20px; padding-bottom:20px}
.glyphicon{margin-right:10px}
.breadcrumb{margin-top:20px}
.breadcrumb li a{color:#900}

/*nav*/
.navbar-brand{padding-top:0px; padding-bottom:0px}
.navbar{border-radius:0px; border:0px; font-size:16px; background-color:#303038; border-bottom:5px #c32a0a solid; margin-bottom:0px; text-transform:uppercase; font-family: 'Kanit', sans-serif;}
.navbar-default .navbar-backgrnd {
    color: #FFF;
}

.navbar .nav > li > a{color:#FFF; text-shadow:none; padding:20px}
.navbar .nav > li > a:hover{color:#FFF; background-color:#c32a0a;}
.navbar .nav .active > a{color:#FFF; background-color:#c32a0a;}
.navbar .nav .active > a:hover{color:#FFF;  background-color:#c32a0a;}

.navbar li ul{background-color:#c32a0a; border-radius:0px;}
.navbar li ul li a{ color:#FFF; padding:10px 15px;  transition:0.3s}
.navbar li ul li a:hover{background-color:#303038; transition:0.3s; color:#FFF;}


.navbar-brand{padding-top:10px}
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: #262626;
  background-image: none;
  border: 0px solid transparent;
  border-radius: 0px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 0px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

.dropdown-menu > li.kopie > a {
    padding-left:5px;
}
 
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
   top:0;left:100%;
   margin-top:-6px;margin-left:-1px;
   -webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;
 }
  
.dropdown-submenu > a:after {
  border-color: transparent transparent transparent #333;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  content: " ";
  display: block;
  float: right;  
  height: 0;     
  margin-right: -10px;
  margin-top: 5px;
  width: 0;
}
 
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
 }

.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
  text-decoration: none;
}  
  
@media (max-width: 767px) {

  .navbar-nav  {
     display: inline;
  }
  .navbar-default .navbar-brand {
    display: inline;
  }
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
  }
  .navbar-default .navbar-nav .dropdown-menu > li > a {
    color: red;
    background-color: #ccc;
    border-radius: 4px;
    margin-top: 2px;   
  }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #333;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     background-color: #ccc;
   }

   .navbar-nav .open .dropdown-menu {
     border-bottom: 1px solid white; 
     border-radius: 0;
   }
  .dropdown-menu {
      padding-left: 10px;
  }
  .dropdown-menu .dropdown-menu {
      padding-left: 20px;
   }
   .dropdown-menu .dropdown-menu .dropdown-menu {
      padding-left: 30px;
   }
   li.dropdown.open {
    border: 0px solid red;
   }

}
 
@media (min-width: 768px) {
  ul.nav li:hover > ul.dropdown-menu {
    display: block;
  }
  #navbar {
    text-align: center;
  }
}  
.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}