body { font-family: "Roboto"; line-height: 25px;}
::before,::after { transition: .3s ease}
a { font: inherit; text-decoration: none; color: inherit;}
h1,h2,h3,h4,h5,h6,a { font-family: "Roboto Slab";}
h1,h2,h3,h4,h5,h6 { margin-top: 0;}

.w-slider { background: none}


.w-nav-link{ font-size: 16px; padding:10px 15px 0; position: relative;}
.w-nav-link::before{ content: ''; position: absolute; width: 0; height: 3px; background: #d2d2d2; top: -1px; left:15px; opacity: 0; transition: .3s ease;}
.w-nav-link:hover::before,.w-nav-link.active::before{ opacity:1; width: 25px}
.w-nav-link span{ display: block; font-size: 12px; font-family: "Roboto"; color: #9c9c9c}



/**/

.vcenter { display: table; height: 100%; width: 100%;}
.centered { display: table-cell; height: 100%; width: 100%; vertical-align: middle;}
.textcenter { text-align: center;}
.relative { position: relative;}

.header {position: absolute; width: 100%; padding:30px 0 15px 0;}
.slider {height: 800px;}
.w-slider-dot { width: 16px ; height: 16px; background: #fff; border:2px solid #fff; transition: .3s linear}
.w-slider-dot.w-active { border:2px solid #0a5157;}
.slider.wfull {background-image: url('../images/sliderbg.jpg');background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;}


.center {display: block;width: 1200px;margin-right: auto;margin-left: auto;}


.seonet { padding-right:10px;}


.hfull { height: 100%;}
.wfull {width: 100%;float: left;}
.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9,.w10,.w11,.w12 {padding-right: 15px;padding-left: 15px;float: left;}
.w1 {width: 8.33336%;}
.w2 {width: 16.66667%;}
.w3 {width: 25%;}
.w4 {width: 33.333367%;}
.w4.topslide {margin-top: 250px;}
.w5 {width: 41.66667%;}
.w6 {width: 50%;}
.w7 {width: 58.33336%;}
.w8 {width: 66.6666%;}
.w9 {width: 75%;}
.w10 {width: 83.33336%;}
.w11 {width: 91.66667%;}
.w12 {width: 100%;}
.fl { float: left;}
.fr { float: right;}

.mb30 { margin-bottom: 30px;}
.ptb15 {padding-top: 15px;padding-bottom: 15px;}
.ptb80 {padding-top: 80px;padding-bottom: 80px;}
.ptb100 {padding-top: 100px;padding-bottom: 100px;}


.nopad {padding-right: 0;padding-left: 0;}

.bggrey {background-color: #f9f9f9;}
.bgcyan {background-color: #0a5157;}

.colorwhite {color: #fff;}

.workitem {border:10px solid #f0f0f0; position: relative; transition: .3s linear; height: 260px;}
.workitem img{transition: .3s ease; opacity: 1}
.workitem:hover {border-color: #e2e2e2;}
.workitem:hover img{opacity: .7}
.workitem .name { padding:20px; position: absolute; bottom: 0; background: url(../images/shadow.png) repeat-x bottom; z-index: 88; width: 100%; height: 100%;}
.workitem .name::after { background: #fff; content: ''; width: 3px; height:50px; position: absolute; left: 20px; top: 20px;}
.workitem .name::before{ background: #fff; content: ''; height: 3px; width:50px; left: 20px; position: absolute; top: 20px;}
.workitem:hover .name::before { width:80px}
.workitem:hover .name::after{ height:80px}
.workitem .name h4{position: absolute; bottom:20px;z-index: 89; left: 20px; color: #fff}

.projectlist .projectcontent {padding: 15px 0;}
.projectcontent {padding: 15px;background-color: #fff; }
.projectcontent h4{height:54px; overflow: hidden; font-size: 16px; line-height: 18px; font-weight: normal; margin-bottom: 20px }
.projectcontent a { position: relative; width: 100%; display: inline-block;}
.projectcontent a span{ background: #fff; position: relative;float: right; padding-left: 10px; line-height:10px; font-size: 16px; color: #3f3f3f}
.projectcontent a::before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 10px; background:#0a5157 }

.mainnav {background-color: transparent;}


.slidecontent h3{ font-size: 26px ; color: #383838; font-weight: normal; margin-bottom: 30px}
.slidecontent p{ font-size: 14px ; color: #656565; margin-bottom: 20px;}

.leftdotlink { padding-left: 22px; position: relative; font-size:16px; color: #333333; display: inline-block; line-height: 10px}
.leftdotlink::after {content: ''; width: 12px; height: 12px; position: absolute; left: 0; top: 7px; background: #0a5157;}
.bordertitle { padding-left:20px; position: relative; margin-bottom: 30px; padding-bottom:20px; border-bottom: 2px solid #f4f4f4}
.bordertitle.white {border-bottom: 2px solid #24676d}
.bordertitle::after { content: ''; position: absolute; left: 0; top: 0; height: 50px; width:5px; background: #0a5157; }
.bordertitle.white::after {background: #fff; }
.bordertitle h2{ margin-bottom: 15px; color: #0a5157;font-size: 30px; line-height: 30px}
.bordertitle.white h2{ color: #fff}



.topimage { height: 200px; background:url('../images/default.jpg'); background-size:cover; background-position: top;}

.contactform input,.contactform textarea{ padding: 10px; border:1px solid #f0f0f0; width: 100%; margin-bottom: 10px; transition: .3s ease; outline: none; min-height: 40px}
.contactform input:focus,.contactform textarea:focus{border-color: #0a5157;}
.contactform input.button{ width: auto; padding:10px 15px ; border:0; cursor: pointer;}
.contactform input.button:hover,.contactform input.button:focus{ background: #0a5157; color: #fff;}

.footercontact {     height: 24px; }

.contactlineframe .contactline{ display: table; margin-bottom: 10px}
.contactlineframe .contactline img { padding-right:8px;}
.contactlineframe .contactline span{ display: table-cell;}
.contactlineframe .contactline span:first-child{ width: 24px; text-align: center;}

.owners {}

.catitemframe { display: none;}
.filtercatname, .filtername { padding: 10px 0;margin-right: 30px; border-bottom: 3px solid #fff; cursor: pointer; color: #808080; font-size: 24px; font-weight: bold;}
.filtername {border-bottom:2px solid #fff; cursor: pointer; color: #808080; font-size:16px; font-weight: bold; margin-top: 20px}
.filtercatname.active,.filtername.active { border-color: #333; color: #333;}
.hcontrol { min-height: 220px; margin-bottom: 0}
.noptb { padding: 0 !important; }
@media (max-width: 991px) {
  .slider.wfull {
    height: 600px;
  }
  .center {
    width: 768px;
  }
  .w4.topslide {
    width: 50%;
    margin-top: 150px;
  }
}

@media (max-width: 768px) {
  .w-nav-link:nth-last-child(1) {
    border: 0px !important;
  }

  .smb30 { margin-bottom: 30px}
  .slider.wfull {
    height: 600px;
  }
  .center {
    width: 100%;
  }
  .w4.topslide {
    width: 80%;
    margin-top: 150px;
  }
}

@media (max-width: 479px) {
  .slider.wfull {
    height: 450px;
  }
  .center {
    width: 100%;
  }
  .w4 {
    width: 100%;
  }
  .w4.topslide {
    margin-top: 120px;
  }
  .w6 {
    width: 100%;
  }
  .w8 {
    width: 100%;
  }

 
  .about-h1 {
    padding-top:20px;
  }

  .ptb80 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

}