@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeueRegular.eot');
    src: url('../fonts/BebasNeueRegular.eot') format('embedded-opentype'),
         url('../fonts/BebasNeueRegular.woff2') format('woff2'),
         url('../fonts/BebasNeueRegular.woff') format('woff'),
         url('../fonts/BebasNeueRegular.ttf') format('truetype'),
         url('../fonts/BebasNeueRegular.svg#BebasNeueRegular') format('svg');
} 
html { position:relative; min-height:100%; }
body{ padding:0; margin:0px; background:#fff; overflow-x:hidden;}
ul{ list-style:none;}
th { text-align:center; margin:0;}
body a { text-decoration:none; outline:none;}
body a:hover, body a:focus { text-decoration:none; outline:none;}
select { outline:none;}
a img { border:none;}
img{ border:0px;}
p{ padding:0; margin:0;}
h1, h2, h3, h4, ul, p{ padding:0; margin:0;}
textarea { resize:none;}
input:focus , textarea:focus { outline: none;}
input::-moz-placeholder { opacity:1;}
/*input[placeholder], [placeholder], *[placeholder] { font:14px 'OpenSansRegular'; color:#999999!important; font-weight:normal;}*/
.clr { clear:both; height:0px;}
a {  -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;}

 header { width:100%; float:left; position: relative;  z-index:11; background:#d1d2d4; padding: 10px 0;}
.fixheader { position: fixed; top: 0; left: 0;}

.top-social { width:100%; float: left; margin: 2px 0 0;}
.top-social ul { float: right;}
.top-social ul li { float: left; margin: 0 0 0; font: 700 21px/21px "open sans"; color: #fff;}
.top-social ul li span { float: left; margin: 0 10px 0 0;}

.main-slide { width:100%; float:left; background:#fff ; position: relative; z-index: 1; margin:10px 0;}
.logo-sec { width: 25%; float: left; background: #c6d12d;}
.logo { width: 159px; display: table; margin: 50px auto;}
.logo img { width: 100%;}
.sm-logo { display: none;}
 
.slide-content { width:74%; float:right; background: #005b9f; padding: 15px 50px; height: 220px;}
.slide-content h2 { width:100%; float:right; font: 600 26px/32px "open sans"; color: #fff; margin:0 0 10px;  position: relative;}
.slide-content h2 sup { font-size: 18px;}
.slide-content p { width:100%; float:right; font: 300 26px/32px "open sans"; color: #fff;  margin:0 0 7px;}

a.findout-btn { float: left; padding: 10px 80px 10px 20px; border: 1px solid #fff; font: 400 14px/20px "open sans"; color: #fff; text-transform: uppercase; background: url(../img/arrow.png) 90% 50% no-repeat; }
a.findout-btn:hover { background:#4d8dbc url(../img/arrow.png) 95% 50% no-repeat; color: #fff; }

.seepage-thumbs-sec { width:100%; float:left; background:#fff; position:relative; padding:0;}
.seepage-thumbs { width:100%; float:left;}
.seepage-thumbs li { width:49.5%; float:left; padding: 75px 0; background: url(../img/seepage-control-bg.jpg) top center no-repeat; background-size: cover;}
.seepage-thumbs li:last-child { float: right; background-image: url(../img/reactive-bg.jpg);}
.thumb-button { width: 160px; display: table; margin: 0 auto;  }
.thumb-button span { width: 100%; float: left; padding: 15px 0 10px; background: rgba(255,255,255,.8); text-align: center; font:35px/32px "BebasNeueRegular"; color: #c6cf2e; text-transform: uppercase;}
.thumb-button a { width: 100%; float: left; font: 400 13px/20px "open sans"; color: #fefefe; text-transform: uppercase; background:#c6cf2e url(../img/arrow.png) 90% 50% no-repeat; padding: 5px 20px;}
.thumb-button a:hover { background:#d1d2d4 url(../img/arrow.png) 95% 50% no-repeat; color: #fefefe; }
.seepage-thumbs li:last-child .thumb-button span { color: #554435;}
.seepage-thumbs li:last-child .thumb-button a {  background:#554435 url(../img/arrow.png) 90% 50% no-repeat; }
.seepage-thumbs li:last-child .thumb-button a:hover { background:#d1d2d4 url(../img/arrow.png) 95% 50% no-repeat; color: #fefefe; }

.about-sec { width: 100%; float: left; background: #005b9f; padding: 25px 0;}
.about-seepage { width: 100%; float: left; padding: 0 150px 0 0;}
.about-seepage p { width: 100%; float: left; font: 400 17px/22px "open sans"; color: #fff; }
.about-seepage p strong { width: 100%; float: left; font-weight: 700; margin: 5px 0 0;}

.nav-slide-sec { width: 100%; float: left; position: relative;}
.slide-list  { width: 100%; float: left; padding:0 3px;}
.slide-list-thumb { width: 100%; float: left; position: relative;}
.slide-list-thumb span { position: absolute; top: 10px; left: 10px; width:35px; height: 35px; text-align: center; color: #005b9f; font: 400 17px/35px "open sans"; background: #fff; border-radius: 50%; }
.slide-list p { width: 100%; float: left; font: 400 12px/18px "open sans"; color: #fff;  margin:5px 0 0;}

/** posts slider nav **/
.slidernav {  display: block;  text-align: center; top: 60px; left: 0;  position:absolute; width:100%; float:left; display: none;}
.slidernav a { position:absolute; top:0%;  width: 34px; height: 42px;}
.slidernav a:active { }
.slidernav a.previous { left:-20px; background: url(../img/prev-sm.png) top left no-repeat;}
.slidernav a.next { right:-31px; background: url(../img/next-sm.png) top left no-repeat; }
.slidernav a.previous:hover , .slidernav a.next:hover { background-position: bottom left; }

.diagram-sec { width: 100%; float: left; background:#fff; padding: 20px 0 0;}
.diagram-box { width: 100%; float: left;}
.diagram-detail-sec { width: 100%; float: left;}
.diagram-detail-sec li { width:50%; float: left; padding: 0 25px 30px; border-left: 1px solid #005b9f;}
.diagram-details { width: 100%; float: left;} 
.diagram-details-top { width: 100%; float: left; min-height: 120px;} 
.diagram-details-top h2 { width: 100%; float: left; font: 600 20px/20px "open sans"; color: #005b9f; text-transform: uppercase; margin: 0 0 10px;} 
.diagram-details-top p { width: 100%; float: left; font: 400 15px/18px "open sans"; color: #231f20; margin: 0 0 10px;} 
.diagram-details-top a  { float: left; font: 400 italic 15px/16px "open sans"; color: #005b9f; margin: 0 0;} 
.diagram-details-top a:hover { font-weight: 700;}

.diagram-thumb { width: 100%; float: left; position: relative;}
.diagram-thumb a.video {  width: 100%; float: left; display: block; position: relative;}
.diagram-thumb a.video span { width: 69px; position: absolute; top: 35%; left: 0; right: 0; margin:0 auto; z-index: 1 } 
.diagram-thumb a.video:hover:after { width: 100%; float: left; position: absolute; top: 0; left: 0; height: 100%; background: rgba(0,0,0,.3); content: "";}

.copy-right-sec { width: 100%; float: left;  background: #e7e7e8; padding: 15px 0;}
.copy-right-sec p { width: 100%; float: left;  font:400 14px/20px "open sans"; color:#231f20;}
.copy-right-sec p sup { font-size: 10px;}
.copy-right-sec p a { color: #231f20;}
.copy-right-sec p a:hover { text-decoration: underline;}
.copy-right-sec p br { display: none;}

#casestudies { margin-bottom: 10px;}

.casestudy {
    width: 32.3%;
    margin-right: 1.5%;
    float:left;
    background-color: #005b9f;
    height: 150px;
    font: 300 26px/32px "open sans";
    color: #fff;
}

.casestudy:nth-child(even) {background: #c6d12d;}

.casestudy p {
    padding: 25px 25px 10px 25px;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

.casestudy:last-child {
    float:right;
    margin-right: 0;
}

a.rmore {
    width: 42%;
    float: left;
    font: 400 13px/20px "open sans";
    color: #fefefe;
    text-transform: uppercase;
    background: #554435 url(../img/arrow.png) 90% 50% no-repeat;
    padding: 5px 20px;
}

a.rmore:hover {
    background: #888 url(../img/arrow.png) 95% 50% no-repeat;
    color: #fefefe;
}

/*scroll top*/
#elevator_item {
width: 50px;
height: 50px;
position: fixed;
right: 15px;
bottom: 40px;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
opacity: 1;
z-index: 100020;
display: none;
}
#elevator_item.off {
opacity: 0;
visibility: hidden
}
#elevator {
display: block;
width: 50px;
height: 50px;
background: url(../img/icon_top.html) center center no-repeat;
background-color: #512c1e;
border-radius: 0px;
box-shadow: 0 0 0 rgba(0,0,0,.2);
cursor: pointer;
margin-bottom: 10px
}


.inner-page-head .logo-sec { width: 15%; height: 105px;}
.inner-page-head .logo { width: 105px; margin: 13px auto;}
.inner-page-head .slide-content { width: 84%; height: 105px; padding: 10px 30px;}
.inner-page-head .slide-content p { width: 75%; font-size: 20px; margin: 12px 0 0; float: left;}
.inner-page-head .slide-content p strong { font-weight: 700;}
.inner-page-head .slide-content p strong sup { font-size: 13px;}
.inner-page-head .slide-content a.findout-btn { float: right; margin: 22px 0 0;}

.main-content-sec { width: 100%; float: left; padding: 55px 0;}
.page-content { width: 100%; float: left; padding: 0 50px 0 0; }
.page-content h3 { width: 100%; float: left; font:400 18px/24px "open sans"; color:#005b9f; margin: 0 0 15px;}
.page-content h2 { width: 100%; float: left; font:700 18px/24px "open sans"; color:#005b9f; margin: 0 0 15px;}
.page-content p { width: 100%; float: left; font:400 15px/22px "open sans"; color:#231f20; margin: 0 0 15px;}
.page-content p span { color: #005b9f;}
.page-aside { width: 100%; float: left; border-left: 1px solid #005b9f; padding: 0 0 0 50px; }
.control-diagrame { width: 100%; float: left; margin: 0 0 40px; }
.form { width: 100%; float: left;}
.form li { width: 100%; float: left; margin: 0 0 10px;}
.form li input { width: 100%; float: left; margin: 0 0; padding: 5px 15px; font:400 15px/24px "open sans"; color:#231f20; background: #fff; border: 1px solid #d3d2d2; border-radius: 3px; }
.form li:nth-child(4) { width: 68%;}
.form li:nth-child(5) { width: 30%; float: right;}
.form li .msg { width: 100%; float: left; height: 100px; margin: 0 0; padding: 5px 15px; font:400 15px/24px "open sans"; color:#231f20; background: #fff; border: 1px solid #d3d2d2; border-radius: 3px; }
.form li input.enquire { width: auto; border-radius: 0; float: right; padding: 10px 80px 10px 20px; border: 1px solid #005b9f; font: 400 14px/20px "open sans"; color: #005b9f; text-transform: uppercase; background: url(../img/arrow-blue.png) 90% 50% no-repeat;  -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;}
.form li input.enquire:hover { background:#b2cde2 url(../img/arrow-blue.png) 95% 50% no-repeat; color: #005b9f; }

.page-heading { width: 100%; float: left; font:600 30px/36px "open sans"; color:#005b9f; margin: 0 0 25px;}
.testi-list { width: 100%; float: left; padding: 30px 0; border-top: 1px solid #005b9f;}
.testi-list p { width: 100%; float: left; margin: 0 0 10px; font:400 18px/25px "open sans";  color: #404040;}
.testi-list h2 { width: 100%; float: left; margin: 0 0 10px; font:700 18px/25px "open sans";  color: #000;}
.testi-thumb-sec { width: 100%; float: left;}
.testi-thumb-sec li { width: 48%; float: left; margin-right: 1%; margin-bottom: 1%;}
/*.testi-thumb-sec li:last-child { float: right;}*/


.gallery-content { width: 100%; float: left; padding: 0 15px 0 0;}
.gallery-list-sec { width: 100%; float: left; border-bottom: 1px solid #005b9f; padding: 0 0 0; margin: 0 0 20px;}
.gallery-list-sec ul { width: 100%; float: left;}
.gallery-list-sec ul li { width: 32%; float: left; margin: 0 5px 0 0;}
.gallery-list-sec ul li:last-child { margin: 0 0 0;}
.gallery-list-sec ul li a { width: 100%; float: left; margin: 0 0 15px;}
.gallery-list-sec p { width: 100%; float: left; margin: 0 0 15px; font:400 14px/21px "open sans";  color: #404040;}
.gallery-side { padding: 0 0 0 20px; border: 0;}
.gallery-video { width: 100%; float: left; background: #edf0f6; padding: 25px 50px; margin: 0 0 35px;}
.gallery-video p { margin: 0 0 25px;}
.diagram-thumb a.video img  { width: 100%; float: left;}

.contact-heading { margin: -10px 0 35px; padding: 0 0 15px; border-bottom: 1px solid #005b9f;}
.contact-detail { width: 100%; float: left; font:400 30px/40px "open sans";  color: #000; margin: -10px 0 0;}
.contact-detail strong { font-weight: 700;}