@charset "UTF-8";
/* CSS Document */


@font-face { font-family: DINMd; src: url("../fonts/DINMd.ttf") /* TTF file for CSS3 browsers */}

@font-face { font-family: DINLiA; src: url("../fonts/DINLiA.ttf") /* TTF file for CSS3 browsers */}

@font-face { font-family: DINBdA; src: url("../fonts/DINBdA.ttf") /* TTF file for CSS3 browsers */}

body{
/*
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
*/
}
body, html { padding: 0px; margin: 0px;  overflow-x:hidden}

body { font: 13px/1.5 Helvetica,Thonburi,Arial,Tahoma,sans-serif; color: #212121; position:relative; }

ul, li { list-style:none; padding:0px; margin:0px;}
a { color: #027aea; text-decoration: none;}
a:hover { color: #00a4d3; text-decoration: none;}
img { border:none;}
p { margin:5px 0px;}

.content-area{width:100%; float:left; position:relative;}

.header-area{ background-color:#FFF; border-bottom:1px solid #d2d2d2; }
 
.itbc-header-area{ background-color:#fff; float:left; width:100%; position:relative; z-index: 20;}
.itbc-header-area .container, .itbc-nav-area .container, .itbc-footer-area .container{ background-color:inherit; position:relative; height:70px;}
.itbc-nav-area{ background-color:#fff; width:100%; position:fixed; z-index: 2; height:70px;}
.itbc-logo-area{ position:absolute; top:0px; left:0px;z-index:1; overflow:hidden;}
.itbclogo {    width:160px;    height:60px;    background-image: url('../images/theme2014/itbc/logo-itbc.png');	background-repeat:no-repeat;}


/*-------------start mobile header---------------*/

.mobile-itcb-area{ background-color:#fff; border:1px solid #f4f4f4;}
.mobile-itcb-logo-area{ float:left; width:160px; height:60px; margin-left:5px; background-image: url('../images/theme2014/itbc/logo-itbc.png'); background-position:center; background-repeat:no-repeat; background-size:100%;}
.mobile-itcb-area .navbar-toggle { padding:0px; margin:0px; background-color:#11b1ad; border-radius:0px; width:70px; height:59px;}
.itbc-mobile-collapse li { float:left; width:100%; border:1px solid #f4f4f4; margin:-1px -1px 0px 0px; }
.itbc-mobile-collapse li a{ padding:15px; color:#707070; text-align:center;}
.itbc-mobile-collapse li a p{color: #fff; font-size: 14px;}
.itbc-mobile-collapse li a:hover, .itbc-mobile-collapse li a:focus, .itbc-mobile-collapse li a:visited{ color:#707070; }
.itbc-mobile-collapse .social-itcb-icon{ width:100%;text-align:center; padding-top:7px; background-color:#11b1ad; }
.itbc-mobile-collapse .social-itcb-icon li{ width:auto; float:none; display:inline-block; margin:0px; padding:0px; border:none; border-radius:5px;   }
.icnsocial-itcb:hover{ border-radius:5px;}

/*-------------end mobile header---------------*/
.itbc-name-area { float: left; margin-left: 105px; padding-top: 7px;}
.itbc-name-area p { font-size: 1.6em; line-height: 25px; margin: 0px;}
.itbc-name-area span {font-size: 0.9em;letter-spacing: 1px; line-height: 10px;}

.itbc-social-area {list-style:none; margin:0px; height:70px; top:0px; right:0px; width:13%; background-color:#11b1ad; position:absolute; }
.itbc-social-area li { float: left; margin-left:5px; margin-top:10px; }

.icnsocial-itbc { display: block; width:45px; height: 45px; background: url('../images/theme2014/itbc/itbc_social.png') no-repeat; transition-duration: 0.2s; transition-property: background-position;}
.fbsocial {background-position: 0px 0px }
.fbsocial:hover { background-position: 0px -48px; }	
.twsocial { background-position: -48px 0px; }
.twsocial:hover { background-position: -48px -48px; }
.igsocial { background-position: -96px 0px; }
.igsocial:hover { background-position: -96px -48px; }


.itbc-nav-area .nav{ padding-left:170px; position: relative; z-index: 21; top:13px; width:80%;}
.itbc-nav-area .nav li { display: inline-block; float: left;}
.itbc-nav-area .nav > li > a { font-size:15px; font-family: DINMd; color: #707070; padding: 10px 20px; }
.itbc-nav-area .nav > li > a:hover, .itbc-nav-area .nav > li > a:focus { color: #707070; background:none;  background-color:#f1edeb; }
.itbc-nav-area .nav p{ font-size:18px; color:#707070; padding:0px; margin:0px;}
.itbc-nav-area .navbar-toggle { margin:0px; padding:0px;}


/* Home Page Carousel */

header.carousel {height: 650px;}

header.carousel .item,header.carousel .item.active,header.carousel .carousel-inner {    height: 100%; width:100%; margin:0 auto;}

header.carousel .fill {    width: 1400px;    height: 100%;    background-position: center;    background-size: cover;}

.carousel-control {  position: absolute;  top: 0;  bottom: 0;  right: 0;  width: 100%;  font-size: 20px;  color: #fff;  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);  filter: alpha(opacity=50);  z-index: 16;  left: inherit;  text-align: right;}

.carousel-area{  position: absolute;  top: 40%;  bottom: 0;  right: 18%;  width: 45px; height:45px;  z-index: 16;  text-align: center;}
.up{ float:left; width:41px; height:41px; position:relative; margin:5px 0px;}
.up img{ width:100%;}
.down{float:left; width:41px; height:41px;position:relative;margin:5px 0px; }
.down img{ width:100%; }

.header.carousel .fill{  width: 100%;  height: 100%;  background-position: center;  background-size: cover;}
.fill img{ width: 100%;  }

#itbc-companyprofile{float:left; width:100%; position:relative;}
#itbc-ourservice{float:left; width:100%; position:relative;}
#itbc-works{float:left; width:100%; position:relative;}
#itbc-contact{float:left; width:100%; position:relative;}


 .title-itbc{ float:left; width:100%; position:relative; margin-top:70px;}
 .title-itbc h1{ float:left; line-height:40px; font-size:36px; font-family: DINMd; margin:0px;}
 
 .company-detail{float:left; width:100%; position:relative; font-family: DINMd; color:#565656;}
 .company-detail p{float:left; line-height:30px; font-size:18px; padding:10px 0px; }
 .company-detail a{float:left; line-height:22px; font-size:14px; color:#565656; text-decoration:none;}
 .thump-company-area{ width:100%; float:left; position:relative; margin:30px 0px 10px 0px;}
 .thump-company{ width:100%; float:left; position:relative; padding:10px;}
 .thump-company  img{ width:100%; }
 .thump-company li{ width:25%; float:left; position:relative; padding:10px;}


  .content-area-services{ width:100%; float:left; position:relative;}
  .title-itbc-services{float:left; width:100%; position:relative; margin-top:70px;}
  .title-itbc-services h2{ float:left; line-height:40px; font-size:36px; font-family: DINBdA; margin:0px; width:100%; text-align:center;}
  .services-detail{float:left; width:100%; position:relative; font-family: DINMd; color:#565656;text-align:center; }
  .services-detail p{float:left; line-height:30px; font-size:18px; padding:0x; width:100%;  }
  .services-detail a{ width:100%; float:left; line-height:22px; font-size:14px; color:#565656;}
  
  .wrap-sec-services{ width:100%; float:left; position:relative; margin:10px 0px;}
  .sec-services{ width:100%; float: left; position:relative; } 
  .sec-services img{ width:80px;}
  .sec-services-thump-img{  padding: 10px 0px;  float: left;  width: 100%; }
  .sec-services li{ width:20%; float: left; position:relative; padding:10px; text-align:center;}
  .sec-services li p{ float:left; line-height:22px; font-size:15px; padding:0x; width:100%;font-family: DINMd; color:#565656; }
  .sec-services-thump{width:100%; float: left;  border:1px solid #e3e3e3; padding:10px; height: 360px; }
  
  .link-services-area{float: left; position: relative;  text-align: center; margin: 10px 0px 40px 0px;  padding-left: 42%; }
  .link-services-area a{ float:left; position:relative; border: 2px solid #333; color:#333;  padding: 10px;font-family: DINMd;   font-size: 18px;  text-decoration: none;  border-radius: 5px;  line-height: 20px;}
  
  
  .content-area-works{ float:left; background-color:#f4f4f4; width:100%; position:relative; padding:20px 0px;}
  .title-itbc-works{float:left; width:100%; position:relative; margin-top:70px;}
  .title-itbc-works h2{ float:left; line-height:40px; font-size:36px; font-family: DINMd; margin:0px; width:100%; text-align:center;}
  .works-detail{float:left; width:100%; position:relative; font-family: DINMd; color:#565656;text-align:center; }
  .works-detail p{float:left; line-height:30px; font-size:18px; padding:0x; width:100%;  }
  
  .wrap-works-thump-area{float:left; width:100%; position:relative;}
  .works-thump{ float:left; width:100%; position:relative;}
  .works-thump img{ width:100%;}
  .works-thump-project{background: #fff; padding: 10px; width: 100%;  float: left;  position: relative; height: 230px;}
  .works-thump p{   margin: 0px;    font-size:18px; font-family: DINMd; line-height:32px; max-height:100px;overflow-x: hiden;}
  .works-thump li{width:25%; float:left; padding:10px; }
  
  .works-project-link{ width:100%; float:left; position:relative; margin:10px 0px;}
  .works-project-link a{ float:left;font-size:18px; font-family: DINMd; line-height:42px; color:#777777; text-decoration:none; width:100%;}
  .ic-works-project-link{ float: right; position:relative; }
  .ic-works-project-link img{ width:100%;}
  
  .link-works-area{float: left; position: relative;  text-align: center; margin: 60px 0px;  padding-left: 40%; }
  .link-works-area a{ float:left; position:relative; width:220px; border: 2px solid #616161; color:#616161;  padding: 10px;font-family: DINMd;   font-size: 18px;  text-decoration: none;  border-radius: 5px;  line-height: 20px;}


.content-area-contact{width:100%; float:left; position:relative;}
.title-itbc-contact{float:left; width:100%; position:relative; margin-top:70px;}
.title-itbc-contact h2{float:left; line-height:40px; font-size:36px; font-family: DINMd; margin:0px; width:100%;}

.wrap-contact{width:100%; float:left; position:relative; padding:20px 0px;}

.contact-maps-area{width:50%; float:left; position:relative; padding:10px 0px;}
.contact-submit-area{width:50%; float:left; position:relative; padding-right:10px; padding-left: 20%;}
.maps-itbc{ float:left; width:100%; position:relative;}

.address-itbc{ float:left; width:100%; position:relative;}
.address-itbc h3{ float:left; position:relative; line-height:28px; font-size:30px; font-family: DINMd; padding:10px 0px; margin:10px 0px;}
.address-itbc p{ float:left; width:100%; position:relative; line-height:24px; font-size:18px; font-family: DINLiA;}

.bt-submit{ width:100%; float:left; position:relative;}
.btn-primary{  color: #fff;  background-color: #428bca;  border-color: #357ebd;  width: 100%;}

.itbc-footer-area{ width:100%; float:left; position:relative; background-color:#444444;padding:20px 0px;}
.itbc-footer-copyright{ width:100%; float:left; position:relative }
.itbc-footer-copyright p{ width:100%;float:left; position:relative; line-height:70px; font-size:20px; font-family: DINLiA; margin:0px; color:#fff; text-align:center; }

.detail-itbc-content{  text-align: justify;  float: left;  width: 100%;}

@media (max-width: 767px) { 
.container {}
header.carousel {height: auto;}
.carousel-area{ top:20%; right:2%;}
.content-area{ padding:10px;}
.thump-company-area{ padding:10px; margin:10px 0px;}
.thump-company{ padding:0px;}
.thump-company li{ width:100%; padding:10px 0px;}
.sec-services li{ width:100%;}
.link-services-area{ padding-left:25%;}
.works-thump li{ width:100%;}
.link-works-area{ padding-left:20%; margin:30px 0px;}

.content-area-contact{ padding:10px}
.contact-maps-area{ width:100%;}
.contact-submit-area{ width:100%; padding-left:0%;}
 .sec-services-thump{height: 275px; }

 .title-itbc{margin-top: 20px;}
.title-itbc-services{margin-top: 20px;}
.title-itbc-works{margin-top: 20px;}
 .title-itbc-contact{margin-top: 20px;}

}

@media (min-width: 768px) { 
.container {width: 750px; }
.itbc-nav-area .nav{ width:90%; padding-left:140px;}
header.carousel{ height:auto;}
.itbc-nav-area .nav > li > a { font-size:12px;padding: 15px 10px; }
.itbc-social-area { right:-11px; width:16%;  }
.itbc-social-area li{ margin-left:1px;}
.carousel-area{ right:3%;}
.link-services-area{ padding-left:37%;}
.works-thump p{   max-height: 60px;  overflow-x: hidden;}
.works-thump li{ padding:5px;}
.link-works-area{ padding-left:35%; margin:30px 0px;}
.contact-submit-area{ padding-left:5%;}
.icnsocial-itbc {width:37px; height: 35px; }
.thump-company{ padding:0px;}
.sec-services li{ padding:5px;}
 .sec-services-thump{height: 610px; }
 .works-thump-project{height: 330px; }
}

@media (min-width: 992px) { 
.container {width: 1000px; }
header.carousel{ height:auto;}
.itbc-nav-area .nav{ width:85%; padding-left:160px;}
.itbc-nav-area .nav > li > a { font-size:15px; padding: 10px 14px; }
.itbc-social-area { right:-15px; width:15%;  }
.itbc-social-area li{ margin-left:5px;}
.carousel-area{ right:3%;}
.contact-submit-area{ padding-left:5%;}
.link-services-area{ padding-left:42%;}
.works-thump p{ max-height:100px;}
.works-thump li{ padding:10px;}
.link-works-area{ padding-left:40%; margin:40px 0px;}
.icnsocial-itbc {width:45px; height: 45px; }
.thump-company{ padding:10px;}
.sec-services li{ padding:10px;}
 .sec-services-thump{height: 480px; }
 .works-thump-project{height: 260px; }

}

@media (min-width: 1200px) { 
.container{ width: 100%; max-width:1200px;position:relative;}
header.carousel{ height:650px;}
.itbc-nav-area .nav{ width:80%; padding-left:170px;}
.itbc-nav-area .nav > li > a { font-size:15px; padding: 10px 20px; }
.itbc-social-area { right:-85%; width:100%;  }
.carousel-area{ right:10%;}
.contact-submit-area{ padding-left:20%;}
 .sec-services-thump{height: 400px; }


}