html, body {
height: 100%;
width: 100%;
}
body{
font-family:Arial;
font-size:12px;
margin:0px;
padding:0px;
color:#717276;
background-color:#fff;
}
a{
color:#57b2d3;
text-decoration:underline;
}
hr{
margin-top:10px;
margin-bottom:10px;
}
input,select,textarea{
outline: 0;
}
h1,h2,h3,h4{
font-family:'Robotoblack';
margin-top:0px;
margin-bottom:0px;
text-transform:uppercase;
}
h1,h2,h3{
font-size:24px;
}
h4{
font-size:14px;
}
header{
width:100%;
min-height:100px;
}
header .logo{
padding-left:0px;
margin-top:20px;
}
header .social{
padding-left:0px;
margin-top:50px;
}
.navbar{
margin:0px;
background-color:#fff;
}
.navbar button{
border:1px solid #67c1e5;
}
.navbar .icon-bar{
background-color:#67c1e5;
}
.navbar a{
text-transform:uppercase;
font-family:'Roboto';
font-size:16px;
font-weight:bold;
text-decoration:none;
}
.navbar-default{
background-color:#76c7e8;
border-bottom:4px solid #dfdfdf;
}
.navbar-default ul {
margin:0px;
padding:10px 0 0 0;
}
.navbar-default ul li{
display:inline-block;
border-left:1px solid #fff;
padding-left:20px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
margin:5px 0px 10px 0px;
position:relative;
}
.navbar-default ul li:first-child{
border-left:0px;
}
.navbar-default ul li .title{
font-family:'Roboto';
text-transform:uppercase;
font-size:15px;
font-weight:bold;
z-index:2;
position:relative;
}
.navbar-default ul li .title a{
color:#fff;
text-decoration:none;
}
.navbar-default ul li .title a.active{
color:#67c1e5;
}
.navbar-default ul li.active .bg{
width:104%;
height:67px;
position:absolute;
top:-15px;
left:-1px;
z-index:1;
background-color:#faf8f8;
}
.navbar-default ul li.active .sd_left{
position:absolute;
top:45px;
left:-6px;
width:5px;
height:7px;
background-image:url(../images/shadow_left.jpg);
}
.navbar-default ul li.active .sd_right{
position:absolute;
top:45px;
right:-9px;
width:5px;
height:7px;
background-image:url(../images/shadow_right.jpg);
}
.navbar-default ul li.active a{
color:#67c1e5;
}
section.content{
min-height:500px;
}
.content{
background-color:#fff;
padding-top:35px;
padding-bottom:55px;
width:100%;
}
#product_menu{
background-color:#f3f3f3;
width:100%;
padding-top:20px;
padding-bottom:20px;
display:none;
}
#product_menu a {
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto';
color:#848484;
display:block;
border-bottom:1px solid #d4d4d4;
padding-top:5px;
padding-bottom:5px;
margin-bottom:5px;
}
#product_menu a:hover{
background-color:#eee;
text-indent:10px;
}
#slider{
width:100%;
height:450px;
position:relative;
}
#recent_project{
padding-top:65px;
padding-bottom:55px;
width:100%;
background-color:#f7f7f7;
position:relative;
}
#recent_project .arrow{
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
margin-left: -20px;
border-width: 20px 20px 0;
left:50%;
border-top-color: #f7f7f7;
bottom:-20px;
z-index:10;
}
#recent_project hr{
border-top-color:#d9d9d9;
}
#recent_project .item{
float:left;
width:200px;
border:5px solid #fff;
border-radius:5px;
position:relative;
height:200px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-top:10px;
margin-bottom:10px;
}
#recent_project .item .image{
height:160px;
}
#recent_project .item .image img{
height:100%;
width:100%;
}
#recent_project .item .title{
width:100%;
height:40px;
background-color:#ebebeb;
position:absolute;
bottom:0px;
}
#recent_project .item .title  a{
display:block;
text-align:center;
color:#848484;
line-height:40px;
text-decoration:none;
font-family:'Roboto';
font-weight:bold;
}
#recent_project .highlight{
width:230px;
height:230px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.5);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.5);
margin-top:0px;
}
#recent_project .highlight .image{
height:180px;
}
#recent_project .chrome{
width:100%;
height:160px;
position:absolute;
z-index:10;
background:url(../images/chrome.png) no-repeat transparent;
background-size:cover;
top:0px;
}
#recent_mobile .item{
width:100%;
border:5px solid #fff;
border-radius:5px;
position:relative;
height:300px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-top:10px;
margin-bottom:10px;
}
#recent_mobile .item .image{
height:260px;
}
#recent_mobile .chrome{
height:260px;
}
#our_product{
padding-top:65px;
padding-bottom:45px;
width:100%;
background-color:#67c1e5;
position:relative;
color:#fff;
}
#our_product hr{
width:60%;
float:right;
}
#our_product  .current{
margin-bottom:20px;
}
#our_product  .current img{
border-radius:5px;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width:100%;
}
#our_product .list{
margin-top:40px;
text-align:right;
}
#our_product .list  ul{
margin:0px;
padding:0px;
}
#our_product .list  ul li{
display:inline-block;
}
#our_product .list  ul li  img{
border-radius:100%;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.5);
box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.5);
width:100%;
}
#our_product .arrow{
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
margin-left: -20px;
border-width: 20px 20px 0;
left:50%;
border-top-color: #67c1e5;
bottom:-20px;
z-index:10;
}
#our_product a{
color:#fff;
}
#product_detail{
height:105px;
}
#why_choose{
padding-top:65px;
padding-bottom:65px;
width:100%;
background-color:#fff;
position:relative;
}
#why_choose .item{
margin-top:20px;
margin-bottom:20px;
font-size:12px;
color:#717276;
}
#why_choose .item  img{
float:left;
margin-right:10px;
}
#why_choose .item  h3{
font-family:'Roboto';
font-size:14px;
font-weight:bold;
color:#878787;
text-transform:uppercase;
margin:0px;
margin-bottom:10px;
}
#our_customer{
padding-top:15px;
padding-bottom:15px;
width:100%;
background-color:#f7f7f7;
position:relative;
}
#our_customer h2{
line-height:90px;
border-right:1px solid #e2e2e2;
}
#our_customer .list{
padding:0px;
}
#our_customer ul{
margin:0px;
padding:0px;
}
#our_customer ul li{
display:inline-block;
margin-left:25px;
line-height:90px;
}
#our_customer ul li img{
max-height:89px;
}
#map{
width:100%;
height:350px;
position:relative;
}
#map .map{
width:100%;
height:100%;
}
#map .map_link{
position:absolute;
text-align:center;
bottom:0px;
width:100%;
}
footer{
width:100%;
background-color:#67c1e5;
text-transform:uppercase;
color:#fff;
font-size:11px;
font-family:'Roboto';
padding-top:18px;
}
footer .logo{
padding-top:5px;
margin-bottom:10px;
}
footer h3{
font-size:14px;
font-weight:bold;
border-bottom:1px solid #fff;
padding-bottom:10px;
}
footer .address{
margin-bottom:10px;
}
footer .contact{
padding-bottom:20px;
}
footer .contact a{
color:#fff;
}
footer .contact h3{
width:60%;
}
footer .copyright{
font-family:Arial;
font-size:12px;
text-transform:none;
background-color:#dcdce7;
color:#888888;
padding:10px 0px 10px 0px;
}
.list{
list-style:url(../images/li.png);
}
.list li{
margin-bottom:10px;
}
.list a{
font-family:'Roboto';
text-transform:uppercase;
color:#848484;
text-decoration:none;
vertical-align:top;
display:inline-block;
}
.list a.active{
color:#67c1e5;
}
.gray{
color:#848484;
}
.blue{
color:#67c1e5;
}
.white{
color:#fff;
}

/* -xs */
@media (max-width: 767px) {
#slider{
height:150px;
}
}
/* -sm */
@media (min-width: 768px) and (max-width: 991px) {
#slider{
height:350px;
}
.navbar-default ul li{
padding: 5px 9px;
}
#outer_container .thumbScroller .slide {
height:80px;
}
}
/* -md */
@media (min-width: 992px) and (max-width: 1199px) {

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

}