/*

** Theme Name: Humbart Sanitary

** Theme Author: Subhro Pramanik(Complete Web Graphics)

** Theme Version: 1.0

*/

@charset "utf-8";

/* CSS Document */

html{text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}

body{ padding:0 0 0 0; margin:0; color:#7b7b7b; font-size:14px ; background:#fff;  font-weight:normal; line-height:17px; font-family: 'Arial'; width:100%; }

*{padding:0; margin:0;}

img{border:0;}



form,input, select, textarea{outline:0;}

p strong{ font-weight:normal; font-family: 'CenturyGothicBold'; font-size:15px;}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}



h1,h2,h3,h4,h5 {

	font-weight: normal; 

	font-family:'CenturyGothicBold';

}



ul,li,a{ 

	list-style:none; 

	text-decoration:none;

	font-family:'arial';

	color:#545454;

}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}



.clear{ clear:both;}

#wrapper{ margin:0; padding:0; }

.content{ width:1000px; margin:0 auto;}





/* Font Face */

@font-face {

    font-family: 'CenturyGothicBold';

    src: url('fonts/gothicb.eot');

    src: url('fonts/gothicb.eot') format('embedded-opentype'),

         url('fonts/gothicb.woff2') format('woff2'),

         url('fonts/gothicb.woff') format('woff'),

         url('fonts/gothicb.ttf') format('truetype'),

         url('fonts/gothicb.svg#CenturyGothicBold') format('svg');

}





/*header*/

#header{ margin:0; padding:0; clear:both; }

#header .top{ margin:0; padding:22px 0 12px; background:url(images/header-top.jpg) repeat-x; }

#header .top #logo{ float:left; margin:0; padding:0; }

#header .top .topInfo{ float:right; }

#header .top .topInfo h1{ color:#0b558a; font-size:21px; font-family:'CenturyGothicBold'; line-height:30px; }

#header .top .topInfo h4{ color:#323232; font-size:15px; font-family:'arial'; }

#navigation{ clear:both; margin:0; padding:0; background:#e11538; height:42px; width:100%;}

#navigation{ float:left; margin:0; padding:0; }

#navigation ul.sf-menu{ margin:0; }

#navigation ul.sf-menu li{ margin:0; padding:0; display:block; }

#navigation ul.sf-menu li a{ font-size:15px; color:#fafafa; font-family:'Arial'; padding:12px 0;transition:all 0.5s ease 0s; margin:0 12px;}

#navigation ul.sf-menu li:first-child a{ margin-left:0; }

#navigation ul.sf-menu li:hover a{transition:all 0.5s ease 0s; color:#fff; }

#navigation ul.sf-menu li.active a{ border-bottom:1px solid #fdfdfd; }

#navigation .rightPanel{ float:right; margin:6px 0 0; padding:0;}

#navigation .rightPanel .tel{ position:relative; z-index:9999999; float:left; margin:6px 26px 0 0;}

#navigation .rightPanel span{ color:#ffffff; font-size:15px; font-family:'CenturyGothicBold'; }

#navigation .rightPanel span.mobile{ background:url(images/mobile.png) no-repeat left center; padding:0 0 0 18px;}

#navigation .rightPanel span.mobile:hover{ color:#f1dbdf; }

#navigation .rightPanel span.fax{ background:url(images/fax.png) no-repeat left center; padding:0 0 0 18px; margin:0 0 0 15px;}

#navigation .rightPanel .social{ float:left; margin:0;}

#navigation .rightPanel .social a{ float:left; display:block; margin:0; color:#fff; line-height:1em; margin-top: -4px;text-transform: uppercase;font-weight: 600;}

#navigation .rightPanel .social a i.fa-facebook{ background:url(images/facebook.png) no-repeat; width:31px; height:31px; }

#navigation .rightPanel .social a:hover i.fa-facebook{ background:url(images/facebook-hover.png) no-repeat; width:31px; height:31px; }

#navigation .rightPanel .social a i.fa-twitter{ background:url(images/twitter.png) no-repeat; width:31px; height:31px; }

#navigation .rightPanel .social a:hover i.fa-twitter{ background:url(images/twitter-hover.png) no-repeat; width:31px; height:31px; }

#navigation .rightPanel .social a i.fa-google-plus{ background:url(images/google.png) no-repeat; width:31px; height:31px; }

#navigation .rightPanel .social a:hover i.fa-google-plus{ background:url(images/google-hover.png) no-repeat; width:31px; height:31px; }

.banner{ width:100%; margin:0; padding:0; border-bottom:1px solid #e11538; line-height:0; position:relative; height:100%; overflow:hidden;}

.banner img{width:100%;}

.banner-inner img{width:100%;}

.banner-inner{ width:100%; margin:0; padding:0; border-bottom:1px solid #e11538; line-height:0; position:relative; height:100%; overflow:hidden;}

/*.desc{ position:absolute; top:60%; line-height:normal; width:100%; text-align:center;  }

.desc h4{ color:#0b558a; font-size:28px; text-transform:uppercase; text-shadow:1px 0 3px rgba( 0, 0, 0, .76);  } 

.desc h1{ background:url(images/heading-bg.png) no-repeat center center; color:#0b558a; font-family:'Oswald'; font-size:95px; text-transform:uppercase; } */

.desc {display:none;}



#main{ padding:40px 0 50px;}

#main .leftPanel{ float:left; width:486px; }

#main .rightPanel{ float:right; width:500px; }

#main .rightPanel h2{ color:#0b558a; font-size:28px; line-height:28px; }

#main .rightPanel p{ color:#373737; font-size:17px; margin:15px 0 0; }

#main .rightPanel .bottomPanel{ margin:25px 0 0; padding:0; }

#main .rightPanel .bottomPanel h4{ font-size:14px; color:#e11930; font-family:'Arial'; font-weight:bold; text-transform:uppercase; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; padding:7px 0; margin:0 0 15px 0; }

#main .rightPanel .bottomPanel span{ color:#373737; font-size:14px; font-family:'Arial'; float:left;}

#main .rightPanel .bottomPanel span.system{ background:url(images/system.png) no-repeat left 4px; padding:0 0 0 40px; width:112px; margin:0 23px 0 0;}

#main .rightPanel .bottomPanel span.tank{ background:url(images/tank.png) no-repeat left 4px; padding:0 0 0 45px; width:83px; margin:0 20px 0 0}

#main .rightPanel .bottomPanel span.locating{background:url(images/locating.png) no-repeat left -3px; padding:0 0 0 40px; width:135px;}

#main .rightPanel .bottomPanel .readmore{ background:url(images/plus.jpg) no-repeat 7px center #e11538; color:#fff; font-size:12px; border-radius:2px; padding:7px 14px 7px 34px; margin:25px 0 0; display:block; float:left;}

#main .rightPanel .bottomPanel .readmore:hover{ background-color:#c31331; }

#bottom{ background:url(images/bottom.jpg) no-repeat; clear:both; padding:38px 0 55px; }

#bottom .col{ float:left; margin:0 28px 0 0; padding:0; width:313px; }

#bottom .col:last-child{ margin-right:0; }

#bottom .col h2{ color:#0b558a; font-size:20px; font-family:'Oswald'; text-transform:uppercase; margin:0 0 7px; }

#bottom .col h5{ color:#3a3a3a; font-size:14px; font-family:'Arial'; font-weight:normal; border-left:2px solid #acacac; line-height:18px; padding:0 0 0 10px; }

#bottom .col .image{ margin:12px 0; }

.imgCont{ margin:0; padding:0; }

.imgCont a{ color:#e11538; font-size:12px; display:block; margin:18px 0 0 0; }

.imgCont a:hover{ color:#850d21;}

.imgCont a.pdf-download{ background:#e11538; display:block; color:#fff; text-align:center; border-radius:10px; font-size:13px; padding:2px 0;}

.imgCont a.pdf-download:hover{ background:#850d21; }

#footer{ clear:both; border-top:1px solid #efefef; }

#footer .top{ margin:0 0 30px 0; padding:0; clear:both; }

#footer .top .left{ width:160px; float:left; }

#footer .top h4{ color:#383838; font-size:13px; font-family:'Open Sans'; font-weight:600; text-transform:uppercase; margin:0 0 5px 0; }

#footer .top ul{ margin:6px 0 0; padding:0; }

.link1{ width:236px; float:left; }

.link2{ width:313px; float:left;}

.link3{ width:288px; float:left;}

#footer .top ul li{ margin:0; padding:0; display:block; float:left; width:100%; }

#footer .top ul li a{ display:block; color:#515151; font-size:12px; background:url(images/left-arrow.png) no-repeat left 6px; padding:0 0 0 9px; margin: 3px 0; font-family:'Open sans'; font-weight:normal; }

#footer .top ul li a:hover{ color:#747474; }

#footer .top .border{ border-bottom:1px solid #d6d6d6; width:34px; }

#footer .top .right{ float: right; width:840px; }

#footer .top .right ul li a{ float:left; float:left; }

#footer .bottom{ margin:0; padding:10px 0 20px; border-top:1px solid #ebebeb; }

#footer .bottom p.copyright{ float:left; font-size:12px; color:#515151; font-family:'Open Sans'; font-weight:normal; }

#footer .bottom p.link{ float:right; }

#footer .bottom p.link a{ display:block; float:left; color:#515151; font-size:12px; padding:0 2px; font-family:'Open Sans'; font-weight:normal; }

#footer .bottom p.link a:hover{ color:#000; }



/*Inner Page*/

.leftContent{ float:left; width:650px;  height:auto; min-height:450px; padding:0 0 50px 0;}

.rightContent{ float:right; width:300px; padding:0 0 50px 0; }

.leftContent h2{ color: #0b558a; font-size: 28px; line-height: 32px; }

.leftContent h3{ color:#ae1932; font-size:20px; margin:20px 0 20px;}

.leftContent h4{ color:#951b30; font-size:16px; margin:15px 0 5px; }  

.leftContent h4 a{ color:#951b30; font-family:'CenturyGothicBold'; font-size:16px; }

.leftContent h4 a:hover{ color:#731626; }

.leftContent p{ font-size:13px; margin:7px 0 7px; }

.left{ float:left; }

.right{ float:right; }

.sidebar-text{ text-align:center; }

.sidebar-text a span{ float:left; width:100%; clear:both; color:#0b558a; font-size:16px; margin:10px 0 0 0; }

.sidebar-text a{clear: both; display: block; float: left; margin: 18px 0 0; width: 100%;}

.rightContent h2{ color: #0b558a; font-size: 28px; line-height: 32px; text-align:left; }

.textcontent{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07); float: left; padding:0 0 40px 0; margin:16px 0 0; }

.leftContent .wp-post-image{ border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25); height: auto; margin: 15px 0 10px;  padding: 5px; width: 98%; }

.block{ float:left; width:100%; margin:0 0 15px 0px; }

.block .wpcf7-text, .wpcf7-captchar{ border:1px solid #e0e0e0; padding:6px 6px; width:95.5%; margin:5px 0 0 0; }

.block input[type="tel"]{ width:70px;}

.block .wpcf7-select{border:1px solid #e0e0e0; padding:6px 6px;  width:100%; margin:5px 0 0 0; }

.block .addressline2 input, .streetaddress input{ width:97.9%; }

.block .left{ width:48%;}

.block .right{ width:48%;}

.block b{ float:left; width:100%; clear:both; font-size:16px; margin:0 0 3px;}

.wpcf7-submit{ background: none repeat scroll 0 0 #0b558a; border: medium none; color: #fff; cursor: pointer; font-size: 16px; font-weight: bold; padding: 7px 30px; text-transform: uppercase; letter-spacing:2px; }

.wpcf7-submit:hover{ background:#0f6aac; } 

.streetaddress input{ width:97.8% !important; }





/************************************************************************************

MOBILE

*************************************************************************************/

@media only screen and (orientation:landscape) {

body { -webkit-text-size-adjust:none; }

}

@media only screen and (orientation:portrait) {

body { -webkit-text-size-adjust:none; }

}



@media screen and (max-width: 860px) {

.content{ width:92%;}

.banner{ width:100%;}

.textwidget {display: none;}

#main .leftPanel iframe{width:100%;}

#navigation ul.sf-menu li a{font-size:13px;margin:0 5px;}

#navigation .rightPanel span{font-size:11px;}

#navigation{}

#header .top .topInfo{ width:58%;}	

#header .top .topInfo h1{ line-height:16px; font-size:16px;}

#header .top .topInfo h4{ font-size:13px; padding:6px 0 0 0;}

#footer .top .right{width:77%;}

.link2{ width:56%;}

.link3{ width:54%;}

#bottom{ background-size:cover;padding:25px 0 20px; }

#bottom .col:last-child{ margin:10px auto 0px; float:none; display:block; clear:both; padding:20px 0 0 0;}

#main .leftPanel{width:48%;}

#main .rightPanel{width:48%;}

#main .rightPanel h2{font-size:22px; line-height:24px;}

#main .rightPanel .bottomPanel span.locating{ margin-top:10px;}



/*OUR SERVICES Page*/

.leftContent{width:48%;}

.rightContent{width:48%;}

.right{ float:left; }

/*CONTACT Page*/

.block .left{ width:100%;}

.block .right{ width:100%;}

.streetaddress input{ width:95.6% !important; }

.block .addressline2 input, .streetaddress input{ width:95%; }

.block .wpcf7-select{width:99%;}



	}



@media screen and (max-width: 650px) {	

#header .top .topInfo h1{ line-height:16px; font-size:16px;}

#header .top .topInfo h4{ font-size:11.4px; padding:6px 0 0 0;}

#navigation ul.sf-menu li:first-child a{ margin-left:5px; }

#main{ padding:25px 0 25px;}

#main .leftPanel{ float:none; width:100%;}

#main .rightPanel{ float:none; width:100%;}

#main .rightPanel h2{padding-top:10px; font-size:28px; line-height:28px;}

#footer .top{ margin:20px 0 30px 0;}

#footer .top .left{ float:none;}

#footer .top .right{ float:inherit; width:100%;  clear:both; padding-top:10px;}

.link2{ width:100%; float:none;}

.link1{ width:100%; float:none;}

.link3{ width:100%; float:none;}

#bottom .col{ float:none; margin:0px 0 20px 0;width:100%; }

#bottom .col h2{ text-align:center;}

#bottom .col .image{ text-align:center;}

.imgCont{ text-align:center; width:66%; margin:0 auto; float:none;}

#main .rightPanel .bottomPanel span.locating{ margin-top:0px;}

#navigation .rightPanel span{font-size:15px;}



/*OUR SERVICES Page*/

.leftContent{ float:inherit; width:100%; padding-bottom:10px;}

.rightContent{ float:inherit; display:block; margin:0 auto;}

.right{ float:right; }



/*CONTACT Page*/

.block .left{ width:48%;}

.block .right{ width:48%;}

	}



@media screen and (max-width: 580px) {

#header .top .topInfo{ width:100%; float:inherit;}		

	

#header .top{ background-size:cover;}

#header .top #logo{ float:none; text-align:center;}	

#header .top .topInfo h1{ line-height:22px; text-align:center; padding:15px 0;}

#header .top .topInfo h4{ font-size:15px; text-align:center; padding:0;}

.desc h1{font-size:75px;}

#main .rightPanel p{ text-align:center;}

#main .rightPanel h2{font-size:25px; line-height:30px; text-align:center; padding-top:10px;}

#main .rightPanel .bottomPanel span.system{width:20%;}

#main .rightPanel .bottomPanel span.tank{width:20%;}

#main .rightPanel .bottomPanel span.locating{width:20%;}

#main .rightPanel .bottomPanel .readmore{float:none; width:20%; margin:10px auto;}

#main .rightPanel .bottomPanel h4{ text-align:center;}



.desc h4{font-size:2em;} 

.desc h1{font-size:3em;}





/*OUR SERVICES Page*/

.leftContent{ float:inherit; width:100%; padding-bottom:10px;}

.rightContent{float:inherit; width:100%; padding-bottom:10px;}

.right{ float:left; }



/*CONTACT Page*/

.block .left{ width:100%;}

.block .right{ width:100%;}

	}



@media screen and (max-width: 500px) {

.imgCont{width:100%;}

/*OUR SERVICES Page*/

.right{ float:left; }

	}

@media screen and (max-width: 470px) {

#navigation .rightPanel span{font-size:13px;}

#navigation .rightPanel{ width:84%;}

#navigation .rightPanel .tel{ text-align:center; width:92%;}

#navigation .rightPanel .social{ float:none; margin:0 auto; text-align:center; width:84%;}



.desc h4{font-size:1em;} 

.desc h1{font-size:3em;}



}



@media screen and (max-width: 400px) {

#main .rightPanel h2{font-size:18px; line-height:23px; text-align:center; padding-top:10px;}

#bottom .col .image img{ width:100%;}

#main .rightPanel .bottomPanel span.system{ display:block; float:none; margin:0 auto 10px; width:50%;}

#main .rightPanel .bottomPanel span.tank{display:block; float:none; margin:0 auto 10px; height:40px; width:50%;}

#main .rightPanel .bottomPanel span.locating{display:block; float:none; margin:0 auto 10px; width:50%;}

#main .rightPanel .bottomPanel .readmore{float:none; width:50%; margin:0 auto;}

#footer .bottom p.copyright{float:inherit; text-align:center;}

#footer .bottom p.link{ float:inherit; text-align:center; width:35%; margin:0 auto; padding:10px 0 0 0;}

	}