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

body { border-top:10px solid #006185; }
.container-fluid { padding:0 0 0 0; }
.container { max-width:1000px; padding:0; }
.margin10 { margin-bottom:10px; }
.margin20 { margin-bottom:20px; }
.margin30 { margin-bottom:30px; }
.row { margin:50px 0 0 0; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-right: 0px; padding-left: 0px; }
a:hover, :hover {  -webkit-transition: ease-out 1s; -moz-transition: ease-out 1s; -o-transition: ease-out 1s; transition: ease-out 1s; text-decoration:none; }

.header { padding:20px 0; border-bottom:1px solid #CCC; }
.logo { margin:0; padding:0; }

.top-link { float:right; }
.top-link ul { margin:0; padding:0;}
.top-link ul li { list-style-type:none; display:inline-block; margin:0 10px 0 0; }
.top-link ul li a { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#006185; font-size:13px; text-decoration:none; font-weight:500; border-bottom:1px solid #FFF;}
.top-link ul li a:hover { border-bottom:1px solid #006185; }

.slideshow { z-index:9; }
.carousel-indicators { display:none; }

.slide-content { margin-top:-510px; }
.blue-box { background-color: rgba(51,204,255,0.8); padding:50px; }
.trans-box { padding:50px 20px 0 0; }

.slide-points {}
.slide-points ul { margin:0; padding:0; }
.slide-points ul li { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:22px; text-decoration:none; font-weight:400; line-height:35px;  list-style-type:none; }

.who-we-are-box { border:1px solid #000; padding:40px 40px 0 100px; min-height:327px; margin-top:20px; position:absolute; z-index:999; margin-left:450px; max-width:550px; }

.button { background-color:transparent; }
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.3s; }
.button span:after {  content:'»'; position: absolute;  opacity: 0;  top: 0;  right: -20px;  transition: 0.5s; }
.button:hover span {  padding-right: 25px; }
.button:hover span:after { opacity: 1; right:0; }
.btn-readmore { border:1px solid #333; padding:10px 30px; font-family: "Raleway", Arial, Helvetica, sans-serif; color:#333; font-size:11px; text-decoration:none; font-weight:800; letter-spacing:2px; margin-top:20px; }
.btn-details { border:1px solid #FFF; padding:10px 30px; font-family: "Raleway", Arial, Helvetica, sans-serif; color:#FFF; font-size:11px; text-decoration:none; font-weight:800; letter-spacing:2px; margin-top:20px; }

.middle-part { clear:both; margin:120px auto 50px auto; }

.products-box { clear:both; overflow:hidden; }

.bottom-box { border:10px solid #f2f2f2; width:100%; height:auto; padding:40px 55px; text-align:center; }

.recently-projects { padding:50px 0 0 50px; border:1px solid #000; min-height:295px; margin-top:20px; position:absolute; z-index:999; max-width:400px; }
.rp-img { float:right;}


.products-box { clear:both; overflow:hidden; }
.thumbnail { border:0; padding:0; margin-bottom:0; }

.thumbnail { border:0; padding:0; margin-bottom:0; min-height:250px; }
.thumbnail .caption { padding:65px 40px 0 40px; color: #333; }
.caption { background-color:rgba(0,204,255,0.8); width:200px; height:125px; z-index:99; position:absolute; text-align:center; left:0; right:0; top:0; margin:0px auto;  }
.caption h3 { font-family:'Teko', serif, Helvetica, sans-serif; font-size:30px; color:#FFF; text-decoration:none; font-weight:800; display:block; margin:0; letter-spacing:2px; line-height:25px; }
.caption:before { content: ""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#222; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out;  }
.caption:hover:before{transform: scaleX(1); }

.bluehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:60px; text-decoration:none; font-weight:600; line-height:60px; }
.bluehead40 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:40px; text-decoration:none; font-weight:600; line-height:40px; text-transform:uppercase; letter-spacing:5px; }
.whitehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#FFF; font-size:60px; text-decoration:none; font-weight:600; line-height:50px; }
.whitehead30 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#FFF; font-size:30px; text-decoration:none; font-weight:600; line-height:30px; }
.blacktext22 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:22px; text-decoration:none; font-weight:400; line-height:35px; }
.blackhead17 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:17px; text-decoration:none; font-weight:700; line-height:22px; }
.greytext { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#555; font-size:16px; text-decoration:none; font-weight:300; line-height:24px; }
.greytext-big { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#555; font-size:17px; text-decoration:none; font-weight:400; line-height:28px; }
.greytext20 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#666; font-size:18px; text-decoration:none; font-weight:300; line-height:25px; }
.bluehead28 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#006185; font-size:24px; text-decoration:none; font-weight:700; line-height:30px; }
.blackhead25 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#000; font-size:25px; text-decoration:none; font-weight:500; line-height:30px; }

.newsletter { background-color:#006185; padding:40px 0; text-align:center; }
.form-group .form-control { background-color:#FFF; width:300px; height:50px; border-radius:0px; color:#000; border:0; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; }
.form-group label { margin-right:10px; } 
 
.btn-black { background-color:#000; width:150px; height:50px; border-radius:0px; color:#FFF; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; color:#FFF; text-decoration:none; font-weight:700; letter-spacing:2px; }
.btn-black:hover { background-color:#0eabe5; width:150px; height:50px; border-radius:0px; color:#FFF; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; color:#FFF; text-decoration:none; font-weight:700; letter-spacing:2px; }

.footer { background-image:url(../images/footer-bg.jpg); background-repeat:no-repeat; background-position:right bottom; padding:50px 0; background-color:#222; text-align:left; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; color:#FFF; text-decoration:none; font-weight:400; }
.footer ul { margin:0; padding:0; }
.footer ul li { list-style-type:none; display:block; }
.footer ul li a { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; color:#999; text-decoration:none; font-weight:500; line-height:25px; }
.footer ul li a:hover { color:#FFF; }
.f-title { font-family: "Teko", Arial, Helvetica, sans-serif; color:#0eabe5; font-size:25px; text-decoration:none; font-weight:400; line-height:30px; }

.whiteline { width:50px; border-bottom:1px solid #FFF; margin:10px 0 20px 0; }

.social { height:auto; margin:20px auto 0 auto; }
.social ul {}
.social ul li { list-style-type:none; display: inline-block; margin:0 10px 0 0; text-align:center; }
.circle-twitter { width:50px; height:50px; padding:12px 0 0 0px; color:#0eabe5; background:transparent; border:1px solid #0eabe5; }
.circle-fb { width:50px; height:50px; padding:12px 0 0 0px; color:#0eabe5; background:transparent; border:1px solid #0eabe5; }
.circle-youtube-play { width:50px; height:50px; padding:12px 0 0 0px; color:#0eabe5; background:transparent; border:1px solid #0eabe5; }
.fa-twitter { font-size:25px; }
.fa-facebook { font-size:25px; }
.fa-youtube-play { font-size:25px;}

.copypart { background-color:#000; padding:20px 0; margin:0 auto; }
.copytext { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; color:#999; text-decoration:none; text-align: center; font-weight:400; }

.middle-part-about { margin:40px auto 50px auto; text-align:center; }
h1 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:60px; text-decoration:none; font-weight:600; line-height:60px; letter-spacing:5px; text-align:center; text-transform:uppercase; }
.blueline { width:170px; border-bottom:10px solid #00aef0; margin:10px auto 40px auto; }
.greyhead-small {  font-family: "Lato", Arial, Helvetica, sans-serif; color:#666; font-size:14px; text-decoration:none; font-weight:700; line-height:18px; letter-spacing:1px; text-transform:uppercase;  }
.about-content { margin:50px 0;}
.middle-part-about img { float:right;}
.about-box { border:1px solid #000; padding:45px; font-family: "Teko", Arial, Helvetica, sans-serif; color:#000; font-size:50px; text-decoration:none; font-weight:700; line-height:52px; z-index:999; position:absolute; width:700px; margin:60px auto 0 auto; }

.middle-part-contact { margin:40px auto 50px auto; text-align:left; }
.input { width:100%; height:50px; border:0; border-radius:0; margin-bottom:10px; background-color: #f7f7f7; border-radius:5px; padding-left:15px; font-size:16px; }
.inputbig { width:100%; height:100px; border:0; border-radius:0; margin-bottom:20px; background-color: #f7f7f7; border-radius:5px; padding-left:15px; font-size:16px; padding-top:10px; }

.btn-primary { font-family: 'Lato', serif, Helvetica, sans-serif; font-size:16px; font-weight:700; border-radius:5px; background-color:#555; color:#FFF; border:0; width:100%; height:50px; letter-spacing:3px; }
.btn-primary:hover { background-color:#000; color:#FFF; }

.middle-part-projects { max-width:1300px; margin:70px auto 50px auto; text-align:center; }
.middle-part-product { max-width:1300px; margin:30px auto 50px auto; text-align:center; }
.middle-part-product-detail { max-width:1000px; margin:70px auto 50px auto; text-align:center; }

.product-box img { display:inline;}
.product-box { background-color:#FFF; border:1px solid #f0f0f0; min-height:475px; text-align:center; transition: transform 0.5s ease; }
.product-box:hover { background-color:#FFF; box-shadow:0px 0px 50px #999;  border:1px solid #999; min-height:475px; text-align:center; transform: translateY(-20px);  }
.pro-title { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:25px; color:#000; text-decoration:none; font-weight:700;  }

.also-like-box { background-color:#FFF; border:1px solid #f0f0f0; height:auto; text-align:center; }
.product-thumbnail { background:transparent; border:0; padding:15px; border-radius:0; text-align:center; position:relative; margin-bottom:0px; }
.product-thumbnail .caption { padding:20px 20px 0 20px; color: #333; }

.pro-btns { margin:15px 0 0px 0; }

.btn-see-details { margin:0px auto 0px auto; text-align:center; z-index:999; text-align:right; }
.btn-black-border { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:11px; font-weight:900; background-color:#000; color:#FFF; border-top:1px solid #000; border-bottom:1px solid #000;  width:150px; height:36px; border-radius:0px; line-height:25px; letter-spacing:2px; }
.btn-black-border:hover { background-color:#FFF; color:#000; }

.btn-inquiry { margin:0px auto 10px auto; text-align:center; z-index:999; text-align:left; }
.btn-red { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:11px; font-weight:900; background-color:#00aef0; color:#FFF; border-top:1px solid #00aef0; border-bottom:1px solid #00aef0; width:150px; height:36px; border-radius:0px; line-height:25px; letter-spacing:2px; }
.btn-red:hover { background-color:#FFF; color:#00aef0; }

.product-detail-box .pdb-img { box-shadow:0px 0px 20px #ccc; }
.detail-content { padding:0 0 0 50px; text-align:left; }

.detail-point { margin-top:10px; }
.detail-point ul { margin:0; padding:0; min-height:240px; overflow: hidden; }
.detail-point ul li { list-style-type:none; display:block; line-height:26px; font-family: 'Raleway',serif, Helvetica, sans-serif; font-size:14px; font-weight:500; color:#666; }

.pro-thumb { text-align:left;}
.pro-thumb ul { margin:0; padding:0; }
.pro-thumb ul li { list-style-type:none; display:inline-block; margin:10px 10px 0 0;}

.btns { margin-top:30px; }
.btns ul { margin:0; padding:0; }
.btns ul li { list-style-type:none; display:block; margin:0px 0px 10px 0; }

.black-btn { width:280px; height:45px; border-radius:0px; color:#FFF; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:13px; background-color:#666; text-decoration:none; font-weight:700; border:0; letter-spacing:1px; }
.black-btn:hover { background-color:#000; color:#FFF; }
.b-btn { width:280px; height:45px; border-radius:0px; color:#FFF; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:13px; background-color:#00aef0; text-decoration:none; font-weight:700; border:0;  letter-spacing:1px; }
.b-btn:hover { background-color:#006185; color:#FFF; }
.v-btn { width:280px; height:45px; border-radius:0px; color:#FFF; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:13px; background-color:#ff0000; text-decoration:none; font-weight:700; border:0;  letter-spacing:1px; }
.v-btn:hover { background-color:#b2191e; color:#FFF; }

.breadcrumb {  padding:8px 15px 8px 15px;  margin-bottom:40px;  list-style: none;  background-color: transparent;  border-bottom:1px solid #CCC;  border-radius: 0px;  font-family: 'Raleway', serif, Helvetica, sans-serif;  font-size:14px;  color:#999;  text-align:left; }
.breadcrumb a { font-family: 'Lato', serif, Helvetica, sans-serif; font-size:14px; font-weight:700; color:#000; text-decoration: none; text-transform:uppercase; }
.breadcrumb a:hover { color:#806a41; }

.project-detail img { margin-bottom:20px;}

.team { margin:0 auto; border-top:1px solid #ccc; clear:both; padding:40px 0 40px 0; }
.team ul { margin:0; padding:0; }
.team ul li { display:inline-block; margin:0 20px; }
.team img { border:5px solid #FFF; border-radius:130px; box-shadow:0px 0px 0px #FFF; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  }
.team img:hover { border:5px solid #ccc; filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); }
.team-title { font-family:'Raleway', Calibri, Arial, Helvetica, sans-serif; font-size:25px; color:#000; text-decoration:none; font-weight:700; margin-top:25px; line-height:25px; }
.team-title span { font-family:'Raleway', Calibri, Arial, Helvetica, sans-serif; font-size:16px; color:#666; text-decoration:none; font-weight:400; }

.certificate { margin:0 auto; border-top:1px solid #ccc; clear:both; padding:50px 0 0 0; }
.certificate ul { margin:0; padding:0; }
.certificate ul li { display:inline-block; margin:0 20px 10px 0;  }

.project-list-bg { padding:20px 0 0 0; border-right:1px solid #333; }


@media screen and (min-width:768px) and (max-width:1000px)
	{
	
	.slide-content { margin-top:40px; }
	.blue-box { background-color: rgba(51,204,255,0.8); padding:30px; }
	.trans-box { padding:50px 20px 0 0; }

	.slide-points ul li { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:18px; text-decoration:none; font-weight:400; line-height:35px;  list-style-type:none; }
	.whitehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#FFF; font-size:40px; text-decoration:none; font-weight:600; line-height:40px; }
	.bluehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:40px; text-decoration:none; font-weight:600; line-height:40px; }

	.who-we-are-box { border:1px solid #000; padding:40px 40px 0 100px; min-height:300px; margin-top:30px; position: relative; z-index:999; margin-left:0px; max-width:750px; }
	.margin30 { margin-bottom:0px; }
	.blacktext22 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:18px; text-decoration:none; font-weight:400; line-height:30px; }
	.middle-part { clear:both; margin:30px auto 50px auto; }
	.caption { background-color:rgba(0,204,255,0.8); width:200px; height:125px; z-index:99; position:absolute; text-align:center; left:0; right:0; top:0; margin:0px auto;  }
	
	.detail-content { padding:0 0 0 0px; text-align:left; }
	.btn-black-border { width:90%; }
	.btn-red { width:90%; }
	
	.btn-see-details { margin:0px auto 10px auto; text-align:center; z-index:999; text-align: center; }
	.btn-inquiry { margin:0px auto 10px auto; text-align:center; z-index:999; text-align: center; }
	
	.project-list-bg { padding:40px 0 0 0; border-right:0px solid #333; }
	
	.recently-projects { padding:50px 0 0 50px; border:1px solid #000; min-height:200px; margin-top:20px; margin-bottom:20px; position: relative; z-index:999; max-width:1000px; }
	.rp-img { float: none;}

	}
@media screen and (min-width:300px) and (max-width:768px)
	{
	.header { padding:20px 0;}
	.logo { margin:0; padding:0; text-align:center; }
	.container { padding-left:15px; padding-right:15px; }
	.top-link { float:none; text-align:center; margin-top:10px; }
	.slideshow { display:none; }
	.slide-content { margin-top:0px; }
	.who-we-are-box { border:1px solid #000; padding:30px 30px 30px 30px; min-height:300px; margin-top:0px; position: relative; z-index:999; margin-left:0px; max-width:100%; }
	.form-group .form-control { background-color:#FFF; width:100%; height:50px; border-radius:0px; color:#000; border:0; font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:14px; text-align:center; }
	.middle-part { clear:both; margin:0px auto 50px auto; }
	.bottom-box { border:10px solid #f2f2f2; width:100%; height:auto; padding:20px 30px; text-align:center; }
	.bluehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:50px; text-decoration:none; font-weight:600; line-height:60px; }
	.blackhead17 { font-family: "Raleway", Arial, Helvetica, sans-serif; color:#000; font-size:14px; text-decoration:none; font-weight:700; line-height:22px; }
	
	.middle-part-about { margin:30px auto 50px auto; text-align:center; }
	.about-content { margin:30px 0 0 0;}
	.middle-part-about img { float:none;}
	.about-box { border:1px solid #000; padding:20px; font-family: "Teko", Arial, Helvetica, sans-serif; color:#000; font-size:40px; text-decoration:none; font-weight:700; line-height:38px; z-index:999; position: relative; width:auto; margin:0px auto 0 auto; }
	
	.middle-part-product { margin:30px auto 30px auto; text-align:center; }
	.middle-part-product-detail { margin:30px auto 30px auto; text-align:center; }
	.pro-title { font-family: 'Raleway', serif, Helvetica, sans-serif; font-size:20px; color:#000; text-decoration:none; font-weight:700; line-height:25px; }
	
	.btn-black { background-color:#000; width:100%; }
	.btn-black:hover { background-color:#0eabe5; width:100%; }
	
	.btn-see-details { margin:0px auto 10px auto; text-align:center; z-index:999; text-align: center; }
	.btn-inquiry { margin:0px auto 10px auto; text-align:center; z-index:999; text-align: center; }
	
	.btn-black-border { width:90%; }
	.btn-red { width:90%; }
	
	.detail-content { padding:0 0 0 0px; text-align:left; }
	
	.black-btn { width:100%; }
	.b-btn { width:100%; }
	.v-btn { width:100%; }
	
	.product-box { background-color:#FFF; border:1px solid #f0f0f0; min-height:475px; text-align:center; }
	.product-box:hover { background-color:#FFF; box-shadow:0px 0px 50px #999;  border:1px solid #999; min-height:475px; text-align:center;  }
	
	h1 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:40px; text-decoration:none; font-weight:600; line-height:40px; letter-spacing:5px; text-align:center; text-transform:uppercase; }
	.bluehead40 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:30px; text-decoration:none; font-weight:600; line-height:30px; text-transform:uppercase; letter-spacing:5px; }
	.project-list-bg { padding:40px 0 0 0; border-right:0px solid #333; }
	
	.recently-projects { padding:10px; border:1px solid #000; min-height:150px; margin-top:20px; margin-bottom:20px; position: relative; z-index:999; max-width:1000px; text-align:center; }
	.rp-img { float: none;}
	.bluehead60 { font-family: "Teko", Arial, Helvetica, sans-serif; color:#006185; font-size:40px; text-decoration:none; font-weight:600; line-height:60px; }

	}