/* Stylesheet for Subbagh Engineering Consultancy */

/*============================================== GLOBAL STYLE AND RESET ============================================*/
::selection{ background: #262626; color:#fff; }
::-moz-selection{ background: #262626; color:#fff; }

.fleft{float:left;}
.fright{float:right;}

.clear{display:block; clear:both;}
.clear5{display:block; clear:both; height:5px;}
.clear10{display:block; clear:both; height:10px;}
.clear15{display:block; clear:both; height:15px;}
.clear20{display:block; clear:both; height:20px;}
.clear25{display:block; clear:both; height:25px;}
.clear30{display:block; clear:both; height:30px;}
.clear35{display:block; clear:both; height:35px;}
.clear40{display:block; clear:both; height:40px;}

.dblock{display:block;}
.rpos{position:relative;}
.nomargin{margin:0;}

html, body{width:100%; height:100%;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#6e6e6e; min-height:100%; height:auto;}

h1, h2, h3, h4, h5, h6{font-family: 'Century Gothic', Arial, Helvetica, sans-serif;}
h1{}
h2{font-size:18px; line-height:20px; color:#1b5997; text-transform:uppercase;}
h3{font-size:21px; line-height:21px; color:#85bcf4; text-transform:uppercase; margin-bottom:25px;}
h4{}
h5{font-size:14px; line-height:16px; color:#2e2e2e; margin-bottom:10px; font-weight:bold;}
h6{}

p{margin-bottom:15px;}

a{text-decoration:none; color:#0d85c1; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s;}
a:hover{color:#2e2e2e;}
a img{border:none;}

ol, ul{}
li{}

.morebtn{display:inline-block; *display:inline; zoom:1; font-size:13px; line-height:13px; color:#fff; background:#073c63; text-transform:uppercase; padding:9px 18px;}
.morebtn:hover{background:#003256; color:#fff;}

.wrapper{width:995px; margin: 0 auto; position:relative; z-index:2;}
/*=============================================== GLOBAL STYLE AND RESET ENDS =======================================*/



/*=============================================== Header Style Starts ===============================================*/
.headtop{font-size:16px; line-height:18px; color:#ffffff; text-align:right; padding:8px 0px; background:#01335a;}
.headtop p{}
.headtop .span1{display:inline-block; *display:inline; zoom:1; padding:0px 6px 0px 25px; background:url(../images/icon-mail.png) left center no-repeat; border-right:1px solid #1b486b; margin-right:6px;}
.headtop .span1 a{color:#4378a7;}
.headtop .span2{display:inline-block; *display:inline; zoom:1; padding:0px 0px 0px 10px; background:url(../images/icon-phone.png) left 1px no-repeat;}

header{position:relative; z-index:100; background:url(../images/header-bg.jpg) center bottom no-repeat; background-size:cover;}
.home header{min-height:529px;}
.inner header{min-height:5px;}

header .header-top{background:#fff; padding:0px 0px 9px; border-bottom:1px solid #737373;}
header .header-top a.logo{display:block; float:left;}
header .header-top a.logo img{display:block;}

header .header-top nav{float:right;}
header .header-top nav ul{float:right;}
header .header-top nav ul li{float:left;}
header .header-top nav ul li a{display:block; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px; line-height:17px; color:#4c4c4c; padding:41.5px 30px 41.5px; border-bottom:3px solid #fff;}
header .header-top nav ul li a.active, header .header-top nav ul li a:hover{border-bottom:3px solid #073c63;}

.banner{}
.banner img{display:block; width:100%;}

.slider{width:995px; height:416px; position:relative; overflow:hidden;}
.slider li{width:995px; height:416px; float:left; position:relative;}
.slider li img{display:block; z-index:1; position:relative;}
.slider li .caption{position:absolute; left:0px; bottom:0px; width:100%; z-index:2; text-align:center;}
.slider li .caption h2{font-size:44px; line-height:46px; color:#fff; background:url(../images/slider-caption-bg.png); padding:25px 40px; display:inline-block; *display:inline; zoom:1;}
/*=============================================== Header Style Ends =================================================*/



/*=============================================== main-content Style Starts ===============================================*/
.main-content{position:relative; z-index:99;}
.home .main-content{background:url(../images/home-main-content-bg.jpg) left top repeat-x;}
.inner .main-content{background:url(../images/home-main-content-bg.jpg) center center no-repeat; background-size:cover; padding:40px 0px;}

/* home */
.accordion{height:147px; background:#073c63;}
.accordion ul{float:left; width:100%;}
.accordion ul li{float:left; height:147px; background:#073c63; margin-right:1px;}
.accordion ul li .padding{padding:20px 0px 20px;}
.accordion ul li .left{width:84px; height:147px; float:left; cursor:pointer; font-size:44px; line-height:44px; color:#0e3c6b; background:#85bcf4; text-align:center;}
.accordion ul li .left.active{ color:#85bcf4; background:#073c63;}
.accordion ul li .right{width:510px; height:147px; float:left; color:#cdcdcd; display:none; padding:0px 60px 0px 0px;}
.accordion ul li .right h3{font-size:26px; line-height:26px; color:#fff; text-transform:none; margin-bottom:10px;}
.accordion ul li .right p{margin:0px;}
.accordion ul li .right a{display:block; color:#85bcf4; display:block; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; padding-right: 60px;}

.welcome{padding:40px; background:#fff;}
.welcome .left{width:315px; float:left; border:9px solid #e2e2e2;}
.welcome .left img{display:block; max-width:315px;}
.welcome .right{width:550px; float:right;}

.capability{background:#262626; padding:0px 12px 12px;}
.capability h2{text-align:center; font-weight:normal; font-size:20px; color:#bababa; text-transform:uppercase; padding:22px 0px; position:relative;}
.capability h2 span{display:block; width:27px; height:14px; position:absolute; left:50%; bottom:-13px; margin-left:-13.5px; background:url(../images/capability-span.png) center center no-repeat;}
.capability .box{height:328px; width:323.66px; float:left; background:url(../images/box-bg.png) left top repeat-y #343434; text-align:center; color:#6e6e6e;}
.capability .box .padding{padding:35px 35px 27px;}
.capability .box .padding img{display:block; margin:0 auto 35px;}
.capability .box .padding h3{font-size:20px; color:#bababa; line-height:20px; color:#fff; text-transform:uppercase; height:40px; margin-bottom:13px;}
.capability .box .padding p{height:63px;}
.capability .box .padding .morebtn{color:#002f51; background:#85bcf4;}
.capability .box .padding .morebtn:hover{background:#354f69;}

/* about */
.about{background:#fff; padding:40px;}
.about .left{width:315px; float:left; border:8px solid #e2e2e2;}
.about .left img{display:block;}
.about .right{width:540px; float:right;}

/* portfolio */
.portfolio{padding:40px; background:#fff;}
.portfolio h2{font-size:20px; line-height:20px; margin-bottom:15px;}
.portfolio ul{}
.portfolio ul li{margin-bottom:1px;}
.portfolio ul li h3{font-size:18px; line-height:18px; color:#fff; text-transform:uppercase; padding:16px 22px; background:url(../images/plus.png) 98% center no-repeat #343434; cursor:pointer; margin:0px;}
.portfolio ul li h3.active{background:url(../images/minus.png) 98% center no-repeat #1b5997;}
.portfolio ul li .content{padding:25px 0px 0px; display:none;}
.portfolio ul li .content .box{width:195px; float:left; margin-right:43px; padding-bottom:25px;}
.portfolio ul li .content .box.last{margin:0px;}
.portfolio ul li .content .box img{display:block; width:100%; margin-bottom:15px;}
.portfolio ul li .content .box h4{font-size:18px; line-height:23px; color:#1b5997; text-transform:uppercase;}
.portfolio ul li .content .box a{display:block;}

/* contact */
.contact{padding:40px; background:#fff;}
.contact .left{width:520px; float:left;}
.contact .left .map{border:9px solid #e2e2e2; margin-bottom:27px; min-height:170px;}
.contact .left .box{width:50%; float:left;}
.contact .left .box p{margin:0px 0px 8px;}
.contact .left .box .add{padding:0px 0px 0px 34px; background:url(../images/contact-1.png) left 3px no-repeat;}
.contact .left .box .email{padding:4px 0px 0px 34px; background:url(../images/contact-2.png) left 3px no-repeat;}
.contact .left .box .phoneno{padding:0px 0px 0px 34px; background:url(../images/contact-3.png) left 3px no-repeat;}

.contact .right{width:345px; float:right;}
.contact .right form{margin-top:15px;}
.contact .right input[type="text"], .contact .right textarea{display:block; width:100%; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; font-size:12px; line-height:12px; color:#b6b0b0; padding:9px 0px; text-indent:12px; border:1px solid #cbebff; margin-bottom:14px;}
.contact .right textarea{height:69px; resize:none; overflow:hidden;}
.contact .right input[type="submit"]{cursor:pointer;}

/* services */
.services{padding:40px; background:#fff;}
.services .left{width:372px; float:left;}
.services .left a{display:block; font-size:18px; line-height:18px; color:#fff; text-transform:uppercase; padding:16px 22px; background:#343434; cursor:pointer; margin:0px 0px 1px; position:relative;}
.services .left a.active{background:#1b5997;}
.services .left a span{display:none; height:0px; width:0px; border-color: transparent transparent transparent #1b5997; border-style:dashed solid dashed solid; border-width: 25px 0px 25px 25px; position:absolute; top:0px; right:-25px;}
.services .left a.active span{display:block;}
.services .right{width:492px; float:right;}
.services-div{display:none;}
.services-div h2{margin-bottom:15px;}
.services-div img{display:block; margin-bottom:20px; border:9px solid #e2e2e2;}
/*=============================================== main-content Style Ends =================================================*/



/*=============================================== Footer Style Starts ===============================================*/
footer{padding:40px 0px 0px;}
footer .box{width:331.66px; float:left;}
footer .box .padding{padding:0px 34px 0px 0px;}
footer .box{}
footer .box .findus{padding:15px 0px 15px; border-top:1px solid #e0e0e1;}
footer .box .findus p{font-family: 'Century Gothic', Arial, Helvetica, sans-serif; font-weight:bold; font-size:16px; color:#85bcf4; float:left; margin:0px; line-height:46px;}
footer .box .findus ul{float:right;}
footer .box .findus ul li{float:left; margin-left:1px;}
footer .box .findus ul li a{display:block;}
footer .box .findus ul li a img{display:block;}
footer .box .quicklink{}
footer .box .quicklink li{margin-bottom:10px;}
footer .box .quicklink li a{display:block; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; color:#6e6e6e; line-height:12px; padding:0px 0px 10px; border-bottom:1px dashed #d4d4d4;}
footer .box .quicklink li a:hover{color:#85bcf4;}
footer .box .quicklink li.last a{border:none;}
footer .box .footmail{color:#85bcf4; display:block; padding:0px 0px 0px 27px; background:url(../images/icon-mail.png) left 5.5px no-repeat; margin-bottom:15px;}
footer .box .location{font-family: 'Century Gothic', Arial, Helvetica, sans-serif; font-weight:bold; font-size:16px; line-height:16px; color:#85bcf4; margin-bottom:7px;}
footer .box .lowmargin{margin-bottom:5px;}
footer .botomfooter{color:#c9c9c9; padding:24px 0px; background:#073c63;}
footer .botomfooter p{margin:0px;}
/*=============================================== Footer Style Ends =================================================*/



/*=============================================== Tab Style Starts ==================================================*/
@media only screen and (min-width : 760px) and (max-width : 1024px){ /* viewport 1024*768px */

	
	
}
/*=============================================== Tab Style Ends ====================================================*/



/*=============================================== Mobile Style Starts ===============================================*/
@media only screen and (min-width : 300px) and (max-width : 759px){ /* viewport 320*759px */

	
	
}
/*=============================================== Mobile Style Ends =================================================*/
