@font-face {
    font-family: THSarabun;
    src: url(webfonts/THSarabun.ttf);
    font-weight: normal;
}
@font-face {
    font-family: THSarabunBold;
    src: url(webfonts/THSarabunBold.ttf);
    font-weight: bold;
}
body{background-image: url(../img/bg-main.jpg);font-family: Tahoma;}
h1,h2,h3,h4{font-family: Tahoma;}
#web-header{margin-top: 10px;}
#web-header h1{
  background: #E6E6E6;
  font-family: "Arial Black"; font-size: 1.45em;color: #00782A;text-align:center;text-transform: uppercase;
  padding: 18px;margin-top: 42px; border-radius: 12px;
  width: 100%;
}
#web-header p{
  font: normal 0.75em Verdana;

}
#contact-header{
  background: #E6E6E6;padding: 16px 12px;border-radius: 12px;width: 100%;
  margin-top: 26px;line-height: 26px;
}
#contact-header div.left{
  width: 42%;float:left;padding: 4px 0;
}
#contact-header div.right{
  width: 58%;float:left;padding: 4px 0;
}
#contact-header  img{margin: 0 4px;}
nav{
  background-color: #01B0F0;
  border-radius: 6px;color: #FFF;
}
nav ul{
list-style: none;padding:0;margin: 0px 0;
}
nav ul li{
  display: inline-block;padding: 4px; text-align: center;
}
nav a{color: #FFF;}
nav a:hover{color: #FFFF26;text-decoration: none;}
nav li.active a{color: #FF0;font: bold 0.85em Verdana;}
nav .dropdown,#navbarDropdown{margin:0px;padding:0;}
nav li a.dropdown-item{color: #000;font-weight: normal;}
nav li.active a.dropdown-item{color: #000;font-weight: normal;font-size: 1em;margin: 2px;}
.navbar-toggler{background-color: #FFF;border-radius: 4px;}
.navbar-toggler-icon{color: #000;}
.title2{background: #95B3D7;border-radius: 10px;margin: 10px 6px;padding: 6px;color: #FFF;}
#homeslider,.bx-wrapper{margin: auto; width: 100%;padding-left: 2px;}
.title-left{background-color: #558ED5;color: #FFF;font: bold 1.2em Verdana;text-align: center;border-radius: 10px;padding: 10px 0;}
.box1{background-color: #DCE6F2;margin-top: 10px;padding: 10px;list-style:square;border-radius: 4px;}
.box1 li{color: #365F91;margin: 10px 20px;}
.box2{background-color: #376092;color: #FFF;font-size: 0.75em;padding: 10px;border-radius: 4px;}
.box2 strong{color: #F00;font: bold 1.2em Tahoma;background-color: #FFF;padding: 4px;border-radius: 10px;margin: 10px 0;}
.box2 p{margin: 6px;}
#icon-service{margin: 10px 20px;text-align: center;}
#icon-service img{width: 50%;}
#icon-service a{font: bold 0.9em Arial;color: #ECC0D4;}
.home-boxicon{float:left;width: 32%;text-align: center;margin: 4px 0px 6px 10px; font-size: 1.2em;color: #ECC0D4;}
.home-boxicon2{float:left;width: 25%;}
blockquote{margin: 10px;}

footer{background-color: #B9CDE5;padding:10px;font-size: 1.4em !important;margin-top: 15px;height: 140px;
color: #008000;font-family: THSarabunBold;
}
h2#head-title,h3#head-title2{background-color: #C6D9F1;color: #025;font: bold 1.4em Tahoma;text-align: center;padding: 10px; border-radius: 10px;margin: 20px 0;}
h2#head-title{display: inline-block;}
h3#head-title2{width: 80%;font: bold 1.2em Tahoma;margin:auto;}
#about-page{padding: 18px;border: solid 5px #090;margin: 20px 0;background-color: #D7E4BD;font-size: 0.9em;}
#about-page h2{text-align:center;color: #00782A;font: bold 1.8em Arial;}
#about-page h2 img{height: 80px;margin: 0 10px;}
#about-page p label{font-weight: bold; }
#about-page h3{
  font: bold 1.3em Arial;color: #092;margin-top: 10px;
}
#about-page p{
  padding: 10px; text-indent: 2em;

}
.box-title{
  background-color: #C6D9F1;color: #025;text-align: center;padding: 10px 20px;margin: 10px auto;border-radius: 6px;
  display: table;clear: both;cursor: pointer;
}
.box-title a{color: #025;}
.hide{display:none;}
#iec-page .box-title{width: 50%;}
.grid-gallery{width: 184px;height: 140px;border: solid 1px #CCC;padding: 8px;float:left;margin: 2px; overflow: hidden;}
.grid-gallery img{border-radius: 4px;cursor: pointer;  max-width: 100%;
  max-height: 100%;   vertical-align: middle;}
#calibra-title{background-color: #C6D9F1;color: #025;font: bold 1.4em Tahoma;
  display: inline-block;text-align: center;padding: 10px 32px; border-radius: 10px;margin: 20px 0;}
#calibra-img #main{
  width: 60%;text-align: center;margin: 10px auto;
}
#calibra-img #sub{
  width: 60%;text-align: center;
  background-color: #C6D9F1;padding: 4px 30px;margin: 10px auto;
}
#calibra-img #sub img{
  float: left;width: 31%;margin: 5px;height: 100px;cursor:pointer;
}
#tb-data-calibra{
border: solid 1px #CCC;margin: 20px 0;

}
#tb-data-calibra th{
  font: bold 1.2em Tahoma;
}
#tb-data-calibra tr:nth-child(even){
  background-color: #DFD8E8;
}
#tb-data-calibra tr td:first-child{
  text-align: left;width: 40%;
}
#tb-data-calibra tr td:last-child{
  text-align: left;width: 40%;
}
#homequote{background-color: #DCE6F2; color: #2E3C5D;padding: 14px;font: normal 1.4em THSarabun;border-radius: 10px;}
.box-color1,.box-color2,.box-color3{background-color: #C6D9F1;border-radius: 10px;padding: 10px;}
.box-color2{background-color: #95B3D7;}
.box-color3{padding:0;}
.box-color4{background-color: #95B3D7;border-radius: 6px;padding: 8px;width: 400px;margin: 10px auto;text-align: center;}
.box-color1 table{background-color: #FFF;}
.box-grid{background-color: #C6D9F1;}
.box-grid p{background-color: #B9CDE5;border-radius: 10px;margin-top: 4px;}
#qua-page{color: #C6D9F1;}
#serv-page p{color: #C6D9F1; text-align: center;}
#serv-page ul{width: 40%;background-color: #C6D9F1;margin:10px auto;border-radius: 10px;text-align: left;}
.font-blue1{color: #95B3D7;}
  @media screen and (min-width: 320px) {
  #iec-page .box-title{width: 80%;}
    #contact-header{
      margin-top: 0px;margin-bottom: 2px;
    }
    nav ul li{
      display: inline-block;padding: 4px 10px; text-align: left;
      border-bottom: solid 1px #CCC;
    }
    #contact-header div.right,#contact-header div.left{
      width: 100%;float:left;padding: 0px 0;
    }
    h2#head-title{width: 92%;}
    .bx-wrapper{width: 100%;}

    #calibra-img #sub{
      width: 60%;
    }
    #calibra-img #sub img{
      width: 30%;
    }
    footer{height: 180px;font-size: 0.75em;}

   }

   @media screen and (min-width: 700px) {
   
     #contact-header div.left{
       width: 40%;float:left;padding: 4px 0;
     }
     #contact-header div.right{
       width: 60%;float:left;padding: 4px 0;
     }
     nav ul li{
       text-align: left;
     }
     footer{height: 180px;font-size: 0.85em;}
    }
    @media screen and (min-width: 992px) {
      nav ul li{
          background-color: #01B0F0;border:0;text-align: center;
          display: inline-block;padding: 4px; text-align: center;
      }
      h2#head-title{width: 35%;}
      footer{height: 180px;font-size: 1em;}
	  
     }

     @media screen and (min-width: 2900px) {
    /*   nav ul li{
           background-color: #01B0F0;border:0;text-align: center;
           display: inline-block;padding: 4px; text-align: center;
       }*/
        nav a{color: #FFF; font-size: 1em;}
      }

 @media screen and (max-width: 900px) {
	#calibra-img #main{  width: 94%;}
 }

/*

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  nav ul li{
    background-color: #FF0;
  }
 }
   // Medium devices (tablets, 768px and up)
   @media (min-width: 700px){
     nav ul li{
       display: inline-block;padding: 4px 10px; text-align: left;
       border-bottom: solid 1px #CCC;background-color: #025;
     }
     #calibra-img #sub{
       width: 90%;
     }
     #calibra-img #sub img{
       width: 45%;
     }

    }
*/