@charset "utf-8";
/* CSS Document */
.header{ width:100%; position:relative;}
.header .wrapper{position:relative;}
.s-power{ position:absolute; right:0; top:-5px; width:84px;}

.s-power img{ width:100%; height:auto;}
.top-header{ background:#004474; height:60px; }
.top-header .logo{ float:left; padding-top:0px;}

.bottom-header{ background:#ffa800; height:60px }

.bottom-header .sensex{ float:left; padding:0px 0; width:380px; margin-left:-13px; margin-top:-5.5px; }
.bottom-header .sensex aside{ width:46%; padding-right:15px; float:left; font:400 12px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#004474;}
.bottom-header .sensex aside strong{ font-weight:700;}

.mbl-nav{ position:absolute; left:29px; top:13px; cursor:pointer; display:none;}
.mbl-menu-bg, .mbl-menu-bg2, .mbl-menu-bg3 { background:#004475; width:100%; display:none; position:absolute; left:0; top:-4000px;  z-index:999;}
.mbl-menu{ padding:22px 30px 0 30px;}
.power-menu{  padding:22px 30px 0 30px;}
.water-menu{  padding:22px 30px 0 30px;}

.top-nav{ float:right; padding-right:15%;}
.top-nav li{background:url(https://repository.skipperlimited.com/images/nav-devider.png) no-repeat left 50%; font:600 14px/18px 'Open Sans', Arial, sans-serif, Helvetica; padding:20px 0; float:left; position:relative; }
.top-nav li:first-child{ background:none;}
.top-nav li a{color:#fff; margin:0 15px; display:block;}
.top-nav li span{color:#fff; margin:0 15px; display:block;}

.top-nav li .submenu{ background:#004474; width:250px; padding-bottom:0px; position:absolute; left:0; top:58px; text-align:left; display:none; z-index:333333;}
.top-nav li:hover .submenu { display:block; z-index:999999;}
.top-nav li:hover a{ color:#ed8931;} 
.top-nav li .submenu li{ background:none; padding:0px; float:none; display:block;}
.top-nav li .submenu li a{display:block; font:600 12px/40px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; border-bottom:1px solid rgba(24, 114, 177, 0.5)}
.top-nav li ul.submenu li:last-child a{border-bottom:1px solid #004474;}
.top-nav li ul.submenu li:last-child ul li a{border-bottom:1px solid rgba(24, 114, 177, 0.5)}
.top-nav li ul.submenu li:last-child ul li:last-child  a{border-bottom:1px solid #004474;}
.top-nav li .submenu li a.small-height {line-height:20px;}

.top-nav li .submenu li a.arrow{ background:url(https://repository.skipperlimited.com/images/top-nav-arrow2.png) no-repeat 100% 15px; }

.top-nav li .submenu li span{display:block; font:600 12px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; }

.top-nav li:hover ul {position: absolute; width: 250px; left: 0px; top: 42px; height: auto; z-index: 150; background: #004474; display:none; }
.top-nav li:hover ul li {position: relative; text-transform: none!important; }

.top-nav li:hover ul li:hover ul {left: 250px; top: 0px; height: auto; z-index: 150; padding-top: 0px; display:block; }
.top-nav li:hover ul li:hover ul li a {display: block; width: 218px; margin: 0 auto; text-decoration: none;}


.right-menu{ float:right; padding-right:15%;}
.right-menu strong{display:block; float:left;background:url(https://repository.skipperlimited.com/images/right-nav-devider.png) no-repeat left 6px; color:#19547e; font:800 20px/50px 'Open Sans', Arial, sans-serif, Helvetica; padding:7px 18px 5px 5px; }
.right-menu strong a{display:block;color:#19547e; position:relative;}
.right-menu strong a:after{ content:''; display:block; position:absolute; left:-25px; right:-25px; bottom:-6px; height:2px; z-index:33333;}
.right-menu a samp{ height:52px; width:60px; float:left; display:block;}
/*.right-menu a samp.power{background:url(https://repository.skipperlimited.com/images/nav-icon.png) no-repeat left top;}*/
.right-menu a samp.power{background:url(https://repository.skipperlimited.com/images/power.gif) no-repeat left top;}
/*.right-menu a samp.water{background:url(https://repository.skipperlimited.com/images/nav-icon.png) no-repeat left bottom;}*/
.right-menu a samp.water{background:url(https://repository.skipperlimited.com/images/drop1.gif) no-repeat left bottom;}
.right-menu a samp.infra{background:url(https://repository.skipperlimited.com/images/infra.gif) no-repeat left bottom;}
.right-menu .subnav{ background:url(https://repository.skipperlimited.com/images/subnav-bg.jpg) repeat left top; position:absolute; left:0; right:0; margin:0 auto; top:60px; width:75%; height:auto; display:none;
-webkit-box-shadow: 0px 15px 12px 6px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 15px 12px 6px rgba(0,0,0,0.35);
box-shadow: 0px 15px 12px 6px rgba(0,0,0,0.35); z-index:1;
 }
.right-menu strong:hover .subnav{ display:block;}
/*.right-menu strong:hover {background: url(https://repository.skipperlimited.com/images/subnav-bg.jpg) repeat left top; border:1px solid #a6a6a6; padding:5px 18px 5px 5px; }*/
.right-menu strong:hover { }
.right-menu strong:hover a{ color:#fff;}
.right-menu strong:hover a:after{ background:url(https://repository.skipperlimited.com/images/subnav-bg.jpg) repeat 2px top; }
.right-menu strong .subnav{ border:1px solid #a6a6a6;}
.right-menu .subnav .wraper{ background:url(https://repository.skipperlimited.com/images/power-nav-bg.png) no-repeat left bottom; background-size: cover;  min-height:240px; position:relative;}

.right-menu #power-nav:before{ background:url(https://repository.skipperlimited.com/images/arrow-menu2.png) no-repeat center top; content:'';width:31px; height:16px; position:absolute; top:-16px; right:24%; margin:0 auto; text-align:center;}
.right-menu #water-nav:before{ background:url(https://repository.skipperlimited.com/images/arrow-menu2.png) no-repeat center top; content:'';width:31px; height:16px; position:absolute; top:-16px; right:8%; margin:0 auto; text-align:center;}

.right-menu .subnav .wraper{ padding:14px;}
.right-menu .subnav.power .wraper aside{ background:url(https://repository.skipperlimited.com/images/sub-nav-pro/power-dd.jpg) repeat left top; background-size: cover; padding:20px; padding-top:90px; float:left; width:300px; }
.right-menu .subnav.water .wraper aside{ background:url(https://repository.skipperlimited.com/images/sub-nav-pro/water-dd.jpg) repeat left top; background-size: cover; padding:24px; padding-top:60px; float:left; width:300px; height:277px; }


.right-menu .subnav .wraper aside p{font:600 12px/20px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; text-align:justify; text-shadow:2px 1px 1px #000;}
.right-menu .subnav .wraper aside p.nav-text-gap{ margin-top:65px; text-shadow:none; }
.right-menu .subnav .wraper aside a{ text-align:right; font:600 14px/20px 'Open Sans', Arial, sans-serif, Helvetica; color:#ec8734; text-shadow:2px 1px 1px #000;}
.right-menu .subnav .wraper aside a:hover{ color:#fff;}
.right-menu .subnav .wraper aside a:after{ display:none;}
.right-menu .subnav .wraper ul.feature{ float:right; width:62%; text-align: left; /*padding-bottom:35px;*/}
#water-nav .wraper ul.feature{ float:left; width: auto; text-align: left; /*padding-bottom:35px;*/}
.right-menu .subnav .wraper ul.feature .top-title{ border-top:2px solid #fff; font:600 16px/20px 'Open Sans', Arial, sans-serif, Helvetica; color:#ffa800; padding:5px 0; clear:both; width:100%}

.right-menu .subnav .wraper ul.feature li{ width:103px; height:140px; padding-top:20px; margin-left:40px; float:left;  text-align: center; }
.right-menu .subnav .wraper ul.feature li samp{ width: auto; height:92px; display:block; float:none; margin:0;}
.right-menu .subnav .wraper ul.feature li img{ border:2px solid #fff; border-radius:6px;}
.right-menu .subnav .wraper ul.feature li span{ display:block; padding-top:8px; font:600 11px/18px 'Open Sans', Arial, sans-serif, Helvetica; text-align: center;}
.right-menu .subnav .wraper ul.feature li a{ color:#fff;}
.right-menu .subnav .wraper ul.feature li a:hover{ color:#ec8734;}
.right-menu .subnav .wraper ul.feature li a:after{ display:none;}

@media screen and (max-width:1366px) {
/*.top-nav li:hover:nth-child(3n) ul li:hover ul {left: -250px;}
.top-nav li:hover:nth-child(4n) ul li:hover ul {left: -250px;}*/
.top-nav li:hover ul {position: absolute; width: 190px; left: 0px; top: 42px; height: auto; z-index: 150; background: #004474; display:none; }
.top-nav li .submenu li a.small-height2 {line-height:20px;}
.top-nav li:hover ul li {position: relative; text-transform: none!important;}

.top-nav li:hover ul li:hover ul {left: 190px; top: 0px; height: auto; z-index: 150; padding-top: 0px; display:block;}
.top-nav li:hover ul li:hover ul li a {display: block; width: 160px; margin: 0 auto; text-decoration: none;}

}
@media screen and (max-width:1300px) {
/*.right-menu .subnav .wraper ul.feature{width:60%;}
.right-menu .subnav .wraper ul.feature li{ width:70px; height:150px; padding-top:20px; margin-left:58px;}
.right-menu .subnav .wraper ul.feature li samp{ width:90px; height:72px; display:block; float:none; margin:0; overflow:hidden;}
.right-menu .subnav .wraper ul.feature li samp img{ width:75%; }
.right-menu .subnav .wraper ul.feature { float:left;}*/
.power-services-box { width: 247px !important;}
.right-menu .subnav.power .wraper aside { width: 280px;}
.right-menu .subnav .wraper ul.feature li { margin-left: 20px;}
.right-menu .subnav.water .wraper aside {width: 280px;}
.power-services-box { right: 68px !important;}
}
@media screen and (max-width:1124px) {
.top-nav {  padding-right: 22%;}

.s-power{ width:17.1875%;}
.right-menu .subnav.power .wraper aside{width:225px; }
.right-menu .subnav .wraper ul.feature{width:62%; /*padding-bottom:35px;*/}
.right-menu .subnav .wraper ul.feature li{ width:70px; height:150px; padding-top:20px; margin-left:30px;}
.right-menu .subnav .wraper ul.feature li samp{ width:74px; height:72px; display:block;  float:none; margin:0; overflow:hidden;}
.right-menu .subnav .wraper ul.feature li samp img{ width:92%; }
.feature-left {margin-right: 0;}
.power-services-box { width: 200px !important;}
.right-menu .subnav.water .wraper aside {width: 220px;}
.power-services-box { right: 39px !important;}

}

@media screen and (max-width:980px) {
.s-power{ width:184px;}
.top-header .logo{padding-left: 0; width:auto;}	
.bottom-header .sensex{ display:none;}
.top-nav{ display:none;}
.mbl-nav{ display:block;}
.right-menu strong a{ font-size:0; color: transparent;}


<!--///////////////////// add css ///////////////////////////////-->
.mbl-nav{ display:block;}
.top-section{ width:auto;}
.sensex{ display:none;}
ul.home-nav{display:none;}
.mbl-menu-bg, .mbl-menu-bg2, .mbl-menu-bg3{ display:block;}
.right-menu{ float:right;}
.right-menu strong a{ font-size:0; color: transparent;}
.right-menu strong .subnav.on_mbl{ display:none;}
.right-menu strong:hover{background:url(https://repository.skipperlimited.com/images/right-nav-devider.png) no-repeat left 6px; border:none;padding:6px 25px; }
.right-menu strong:hover a:after{background:none;}

.mbl-menu ul#top-nav li{padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #fff;}
.mbl-menu ul#top-nav li:last-child{border-bottom:none;}
.mbl-menu ul#top-nav li a{font:400 14px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; display:block; }
.mbl-menu ul#top-nav li ul.submenu { padding-top:12px;}
.mbl-menu ul#top-nav li ul.submenu li{padding-bottom:5px; margin-bottom:5px; border-bottom:none;}
.mbl-menu ul#top-nav li ul.submenu li a{ padding-left:15px; font-size:12px; }
.mbl-menu ul#top-nav li ul.submenu li ul li{padding-left:15px;}
.mbl-menu ul#top-nav li ul.submenu li ul li:first-child{ margin-top:10px;}
.mbl-menu ul#top-nav li ul.submenu li ul li:last-child{ padding-bottom:0; margin-bottom:0;}

.power-menu  #power-nav{}
.power-menu  #power-nav .wraper aside{ display:none;}
.power-menu  #power-nav .top-title{font:400 14px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#eb8634; display:block; padding:8px 0;}
.power-menu  #power-nav ul.feature li samp{ display:none;}
.power-menu  #power-nav ul.feature li{padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #fff;}
.power-menu  #power-nav ul.feature li a{font:400 14px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; display:block; }
.power-menu  #power-nav ul.feature li a:hover{color:#eb8634}
.water-menu  #water-nav{}
.water-menu  #water-nav .wraper aside{ display:none;}
.water-menu  #water-nav ul.feature li samp{ display:none;}
.water-menu  #water-nav ul.feature li{padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #fff;}

.water-menu  #water-nav ul.feature li:last-child{padding-bottom:10px; margin-bottom:10px; border-bottom:0px solid #fff;}
.water-menu  #water-nav ul.feature li a{font:400 14px/18px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; display:block; }
.water-menu  #water-nav ul.feature li a:hover{color:#eb8634}
<!--///////////////////// add css ///////////////////////////////-->

.top-header .wrapper div.follow-left-gap{ display:block;}	
.top-header .wrapper div.follow-us-top{ display:inline-block; padding:8px 0; padding-left:32px; font:400 12px/32px 'Open Sans', Arial, sans-serif, Helvetica; color:#fff; margin-left:162px;}
.top-header .wrapper div.follow-us-top a{ margin-left:10px; display:inline-block; position:relative; border:1px solid rgba(255, 255, 255, 0.3); border-radius:50%; height:32px; width:32px; text-align:center; margin-top:5px;}
.top-header .wrapper div.follow-us-top a:after{ content:''; font-family:'FontAwesome'; font-size:15px; line-height:32px; color:#ffa800;}
.top-header .wrapper div.follow-us-top a.facebook:after{content:'\f09a'; }
.top-header .wrapper div.follow-us-top a.twitter:after{content:'\f099'; }
.top-header .wrapper div.follow-us-top a.youtube-link:after{content:'\f16a'; /*font-size:20px;*/ }
.top-header .wrapper div.follow-us-top a.linkin:after{content:'\f0e1'; }
.top-header .wrapper div.follow-us-top a.google:after{content:'\f0d5'; }
.top-header .wrapper div.follow-us-top a:hover{ background:#fff;}
.top-header .wrapper div.follow-us-top{display:block;}
}
@media screen and (max-width:800px) {
.top-header .wrapper div.follow-us-top{ margin-left:292px;}
}
@media screen and (max-width:640px) {
.top-header .wrapper div.follow-us-top{ margin-left:162px;}
.right-menu { padding-right: 25%;}
}
@media screen and (max-width:600px) {
.top-header .wrapper div.follow-us-top { margin-left: 135px;}
}
@media screen and (max-width:480px) {
.top-header .wrapper div.follow-us-top{display:none;}
}

@media screen and (max-width:400px) {
.mbl-nav {left: 0px;}
.mbl-nav {top: 15px !important;}
.right-menu { padding-right: 12%;}
}