@charset "UTF-8";

/* Layout Small Screens */

header {
	width: 100%;
	height: 155px;
	padding: 0;
	background: #fffffe linear-gradient(#444, #000) 0 0/100% 28px no-repeat;
	position: fixed;
	top:0;
	z-index: 1;
}

.headerinner {
	margin: 0;
	position: relative;
	padding: 1px 10px 0 20px;
	height: 155px;
}

.fixedfooterinner {
	padding: 0px 10px 0px 20px;
	font-size: 17px;
	line-height: 2.0;
}

.fixedfooterinner div.ffgaq {
	width: 100%;
	margin: 0;
	padding: 0 0px 0 0px;
	text-align: center;
	float: left;
	color: #fff;
}

span.gaq {
	cursor: pointer;
}

.ffgaqm {display: none;}

.fixedfooterinner div a {
	color: #fff;
	text-decoration: none;
}

.fixedfooterinner div .fa {
	font-size: 17px;
	color: #ccff66;
}

.verytop1 {
	text-align: center;
	width: 50%;
	color: #555;
	font-size: 16px;
	float: left;
}

.verytop2 {
	text-align: center;
	color: #555;
	font-size: 16px;
	float: left;
	width: 50%;
}

.verytop3 {
	display: none;
}

.verytop1 a, .verytop2 a, .verytop3 a {color: #fff; text-decoration: none;}
.verytop1 a:hover, .verytop2 a:hover, .verytop3 a:hover {color: #fff; text-decoration: underline;}

.verytop1 .fa {color: #ccff66;}
.verytop2 .fa {color: #ccff66;}
.verytop3 .fa {color: #ccff66;}

.verytop1 .fas {color: #ccff66;}
.verytop2 .fas {color: #ccff66;}
.verytop3 .fas {color: #ccff66;}

.emailone {display: none;}
.emailtwo {display: inline;}

div.logo {
	display: block;
	position: absolute;
	top: 50px;
}

div.logo a img {
	width: auto;
	border: 0;
	height: 85px;
}

.tel {
	text-align: right;
	float: right;
	margin: 50px 0 0 0;
	padding: 0;
}

div.banner {
	padding: 0;
	height: 100%;
	border-top: 4px solid #fffffe;
	border-bottom: 7px solid #dcdcdc;
	background-image: linear-gradient(180deg, rgba(0,133,78,0.81) 27%,rgba(0,133,78,0.76) 100%);
}

.bannerinner {
	padding: 180px 10px 180px 10px;
	height: 100%;
	margin: 0px;
	position: relative;
	text-align: center;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
}

.smallvideo {
	display: none;
	}

.quoter {text-align: right; color: #009cc8;}

h1.nobanner {font-size: 28px; margin: 0; font-weight: 300; color: #009cc8; line-height: 1.1; padding: 5px 0 5px 0; font-family: 'Open Sans', sans-serif;}

p.areascovered {margin-top: 10px;}

p.nobanner {margin-top: 20px;}

.strap {
	font-size: 36px;
	color: #fff;
	font-weight: 400;
	line-height: 1.4;
	max-width: 800px;
	font-family: 'Open Sans', sans-serif;
	padding: 5px;
}

.strap2 {
	font-size: 24px;
	color: #fff;
	font-weight: 300;
	line-height: 1.7;
	max-width: 750px;
	padding: 30px 0 0 0;
	font-family: 'Open Sans', sans-serif;
}

.strap3 {
	font-size: 16px;
	color: #777;
	font-weight: 300;
	line-height: 1.7;
	max-width: 580px;
	padding: 20px 0 10px 0;
	font-family: 'Open Sans', sans-serif;
}

.strap2 a { color:#ccff66; font-weight: 700; text-decoration: none;}
.strap2 a:hover { color: #eee; text-decoration: none;}
.strap3 i {color: #fff;}


.breadcrumbs {display: none;}


h2.lower {padding-top: 0px; padding-bottom: 10px;}

h1 {
	width: 100%; 
	float: none;
	color: #fff;
    font-size: 18px;
    padding-top: 7px;
}

h1 span.big {
	display: none;
}

h1 span.med {
	display: inline;
}

h1 span.sma {
	display: none;
}

div.nav {
    width: 100%;
    margin: 155px 0 0 0;
    padding: 3px 0 0 0;
	height: 39px;
	background: #333 linear-gradient(#00bf63, #016032);
	border-top: 1px solid #ccc;
}

.navinner {
	margin: 0;
	position: relative;
	padding: 0 20px 0 20px;
	height: 39px;
}

h2 {font-size: 28px;}

h2.area {font-size: 24px;}

.navbar2 {display: block; text-align: center; padding: 0; height:40px; margin-right: 30px;}
#catNavMenu {display: none;}

span.menu { font-size: 18px; cursor:pointer; color: #333;}

div.main {
	margin: 0;
	position: relative;
	padding: 0 10px 20px 20px;
}

div.white {
	background-color: #fff;
}

div.welcome1 {width: 70%; float: left;}
div.welcome2 {width: 30%; float: left; text-align: center;}
div.welcome2 img {margin: 120px 0 0 0; width: 100px; height: auto; border:0;}
div.welcome1 img {display: none;}

div.blocked1 {width: 65%; float: left;}
div.blocked2 {width: 35%; float: left; text-align: center;}
.blocked2 img {margin: 20px 0 0 0; width: 70%; height: auto; border:0;}
.blocked1 img {display: none;}

div.survey1 {width: 65%; float: left; margin-top: 20px;}
div.survey2 {width: 35%; float: left; text-align: center;}
div.survey2 img {margin: 25px 0 0 0; width: 75%; height: auto; border:0;}
div.survey1 img {display: none;}

div.main2 {
	margin: 0;
	position: relative;
	padding: 0 10px 15px 20px;
}

div.main3 {
	max-width: 630px;
	margin: 0 auto 0 auto;
	position: relative;
	padding: 20px 0 20px 0;
}

div.main div.about {
	text-align: center;
}

.outer {
	color: #666; 
	background-color: #f3f3f3; 
	padding: 0; 
	text-align: center;
	margin: 0 0 0 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

.tops {margin-top:0px !important; }

.outer2 {
	color: #666; 
	background-color: #f3f3f3; 
	padding: 0; 
	text-align: center;
	margin: 10px 0 0 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

.outer3 {
	color: #666; 
	background-color: #f3f3f3; 
	padding: 0; 
	text-align: left;
	margin: 10px 0 0 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	}

div.survey {
	background: #5d5d5d url(../images/banner-surveysm.jpg) no-repeat center center;
	background-size: cover;
	}

.surveyinner {
    padding: 20px 20px 20px 20px;
    height: 100%;
    margin: 0 auto 0 auto;
    position: relative;
}

.surveyinner div {
    padding: 0 25px 10px 25px;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.97);
}

div.night {
	background: #5d5d5d url(../images/banner-nightsm.jpg) no-repeat center center;
	background-size: cover;
	}

.nightinner {
    padding: 20px 20px 20px 20px;
    max-width: 1030px;
    height: 100%;
    margin: 0 auto 0 auto;
    position: relative;
}

.nightinner .dark {
    padding: 0 25px 10px 25px;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.97);
}

.nightleft {float: none; text-align: left; width: 100%;}

.nightright {float: left; text-align: center; width: 100%;}

div.three {
	width: 46%;
	float: left;
	margin: 10px 2% 5px 0;
	text-align: left;
	background: #fffffe linear-gradient(#444, #000) 0 0/100% 38px no-repeat;
	padding: 1px 1% 5px 1%;
	color: #555;
}

div.borough {
	width: 48%;
	float: left;
	margin: 10px 1% 5px 0;
	text-align: left;
	padding: 1px 1% 5px 0;
	color: #555;
}

div.borough a {font-size: 18px; text-decoration: none;}

div.borough span {font-size: 18px;color: #00bf63; font-weight: 500;}

ul.recent {margin: 0 auto; padding: 5px 0 8px 0; text-align: center; width: 70%;}

ul.recent li {float: none; padding: 2px 0 2px 0; color: #009cc8; text-align: left;}

ul.recent li span {color: #666;}

ul.recent li:last-child {margin-bottom: 15px;}

div.three h3 {font-size: 20px; padding: 4px 0 4px 0; color: #ccff66;}

.footerinner {margin: 0; position: relative; padding: 30px 10px 5px 20px;}

.footerinner ul {margin: 0; padding: 0 0 8px 0; float: none; width: 97%;}

.footerinner li {float: none; width: 100%; padding: 2px 0 2px 0;}

.footerinner div div {font-size: 20px; padding: 0 0 5px 0; margin: 0 0 0 0;  letter-spacing: .7px;}

.footerleft {
	float: left;
	width: 30%;
	text-align: left;
	padding: 0 5% 15px 0;
}

.footermiddle {
	float: left;
	width: 30%;
	text-align: left;
	padding: 0 0 15px 0;
}

.footerright {
	float: left;
	width: 30%;
	text-align: left;
	padding: 0 0 15px 4%;
}

div.three div {padding: 1px 50px 4px 6px;}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(30, 30, 30, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
	display: block;
}

.overlay-content1 {
    position: relative;
    width: 45%;
	float: left;
    text-align: left;
    margin-top: 30px;
	margin-left: 5%;
}

.overlay-content2 {
    position: relative;
    width: 50%;
	float: left;
    text-align: left;
    margin-top: 30px;
}

.overlay a {
    padding: 10px 0;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    display: block;
	letter-spacing: 1px;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #ccff66; text-decoration: underline;
}

.overlay .closebtn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 48px;
}

li {margin: 0; padding: 0 0 8px 0; float: left; width: 100%;}

.clear-fix2 {clear:both; line-height: 1px;}

.upperfooter {  font-size: 20px; color: #666; background-color: #f3f3f3; padding: 0; text-align: center; margin: 0; border-top: 1px solid #ddd; }
.upperfooterinner {margin: 0; padding: 20px 20px 20px 20px; font-family: 'Open Sans', sans-serif; text-align: center; line-height: 1.65;}

.form1 {width: 28%; float: left; text-align: left;}
.form2 {width: 28%; float: left; text-align: left;}
.form3 {width: 28%; float: left; text-align: left;}
.form4 {width: 16%; float: left; text-align: left;}
.form5{width: 100%; float: left; text-align: left;}
.form6 {width: 100%; float: left;}

.inputborder {border: 2px solid #ddd; border-radius: 0 !important; padding: 8px;  color:#666;}
.inputborder:focus {border-color: #aaa; color:#666;}

.reasonsicon {float:left; color: #00bf63; width: 5%; text-align: left;}
div.reasons {float:left; width: 42%; text-align: left; margin-right: 3%; margin-bottom: 10px;}
div.reasons h3 {color: #00bf63; line-height: 1.2; padding-bottom: 2px;}

div.reasons2 {float: left; width: 90%; margin-right: 0;  margin-bottom: 0px;}
div.reasonsicon2 {float:left; color: #00bf63; width: 10%; text-align: left;}
div.reasons2 h3 {color: #00bf63; line-height: 1.2; padding-bottom: 2px;}

h2.reasons {margin-bottom: 15px; text-align:center;}

.mapouter{overflow:hidden;height:180px;width:98%;border: 1px solid rgb(231, 231, 231); padding: 2px; margin: 0 0 5px 0;}
.gmap_canvas {background:none!important;height:180px;width:100%; margin:0;}

br.nobreak {display: none;}


.plumberleft {float: none; width: 100%; max-width: 700px; text-align: left;}

.plumberleft div {line-height: 1.8;}

.plumberleft div i {color: #009cc8;}

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

.reallybig {font-size: 72px; padding: 10px 0 0 0; line-height: 1.0; letter-spacing: 1px; color: #00bf63;}

.reallybig2 {font-size: 20px; padding: 0 0 10px 0; line-height: 1.2; letter-spacing: 1px;}

.responsibleleft {float: left; text-align: left; width: 40%; padding-top: 10px;}

.responsibleleft div {line-height: 1.8;}

.responsibleright {float: left; text-align: center; width: 60%;}

.responsibleright img { border:0; width: 90%; height: auto; margin-top: 25px; margin-left: 10%;}

.plumberjobsleft {float: left; text-align: left; width: 40%; margin-right: 10%; margin-bottom: 10px;}

.plumberjobsright {float: left; text-align: left; width: 50%; margin-right: 0%; margin-bottom: 10px;}

.blockageleft {float: left; text-align: left; width: 65%;}

.blockageleft div {line-height: 1.8;}

.blockageleft div i {color: #009cc8;}

.blockageright {float: left; text-align: center; width: 35%;}

.blockageright img {border: 0; width: 62%; height: auto; margin-top: 5px;}

.blockagejobsleft {float: left; text-align: left; width: 40%; margin-right: 10%; margin-bottom: 10px;}

.blockagejobsright {float: left; text-align: left; width: 50%; margin-right: 0%; margin-bottom: 10px;}


.repairleft {float: none; text-align: left; width: 100%; margin-right: 0%; margin-bottom: 10px;}

.repairright {display:none;}

.repairright img { width: 96%; height: auto; border:2px #009cc8 solid; padding: 2px; margin-top: 22px;}


.sonarleft {float: left; text-align: center; width: 31%; margin-bottom: 10px;}

.sonarleft img { width: 96%; height: auto; border:2px #009cc8 solid; padding: 2px; margin-top: 20px; max-width: 300px;}

.sonarright {float: left; text-align: left; width: 65%; margin-left: 4%; margin-bottom: 10px;}


div.contact1 {
			width: 45%; 
			float: left;
			margin: 15px 5% 30px 0;
}
div.contact2 {
			width: 46%;
			float: left;
			text-align: left;
			color: #666; 
			background-color: #f3f3f3; 
			padding: 10px 2% 10px 2%; 
			margin:15px 0 20px; 0;
}

div.local {float: left; width: 50%;}

.surveyleft {float: left; text-align: left; width: 65%; margin-bottom: 10px;}

.surveyright {float: left; text-align: center; width: 35%;}

.surveyright img { border:0; width: 55%; height: auto; margin-top: 5px;}

p.bull span {color: #00bf63; font-weight: bold;}
p.bull {text-align: center; margin-top: -10px;}

div.safe {text-align: center;}
div.safe img {margin: 5px 0 0px 0; width: 180px; border:0; height:auto;}

div.crawler {text-align: center;}
div.crawler img {margin: 5px 0 10px 0; width: 120px; border:0; height:auto;}

div.crawler2 {text-align: center;}
div.crawler2 img {margin: 5px 0 0 0; width: 120px; border:0; height:auto;}

.safecontractor img {
	width:50px;
	height:auto;
	margin:15px 25px 0 0;
}

.safecontractor img.cl {
	width:auto;
	height:45px;
	margin:10px 0px 0 0;
}

.bottommenu a { color:#ccff66; text-decoration: none;}
.bottommenu a:hover { color: #ccff66; text-decoration: underline;}
.blogsample span { color:#ccff66; font-weight: bold;}

div.halflist1 {
	float: none;
	width: 100%;
	padding-right: 0;
}

div.halflist2 {
	float: none;
	width: 100%;
}

.safecontractor img {
    height: 45px;
    width: auto;
    margin: 10px 8px 0 0;
}

@media screen and (max-width:750px) {
	.strap {font-size: 36px;}
	.strap2 {font-size: 20px;}
	.footerleft {
	float: none;
	width: 100%;
	text-align: center;
	padding: 0 0 15px 0;
	}
	.footermiddle {
	float: none;
	width: 100%;
	text-align: center;
	padding: 0 0 15px 0;
	}
	.footerright {
	float: none;
	width: 100%;
	text-align: center;
	padding: 0 0 15px 0;
	}
	.safecontractor img {
	margin:10px 15px 0 0;
}

	.responsibleright {display: none;}
	.responsibleleft {float: none; width: 100%;}

	.blockageright {display: none;}
	.blockageleft {float: none; width: 100%; margin-bottom: 20px;}

	.surveyright {display: none;}
	.surveyleft {float: none; width: 100%;}

	div.contact1 {
			width: 100%; 
			float: none;
			margin: 15px 0 30px 0;
}
	div.contact2 {
			width: 96%;
			float: none;
			text-align: left;
			color: #666; 
			background-color: #f3f3f3; 
			padding: 10px 2% 10px 2%; 
			margin:15px 0 20px; 0;
			}

	ul.recent {width: 90%;}
	div.borough {width: 98%; float: left; margin: 10px 0 5px 0; text-align: left; padding: 1px 0 5px 0;}
}


@media screen and (max-width:650px) {
	.welcome2 {display: none;}
	.welcome1 {float: none; width: 100% !important;}
	.welcome1 img {display: inline !important; width: 100px; height: auto; margin-bottom: 10px;}
	.blocked2 {display: none;}
	.blocked1 {float: none; width: 100% !important;}
	.blocked1 img {display: inline !important; width: 200px; height: auto; margin-bottom: 10px;}
	div.survey1 {float: none; width: 100% !important;}
	div.survey2 {display: none;}
	div.three {float: none; width: 96%; margin: 10px 0 5px 0; padding: 1px 1% 5px 3%;}
	.form1 {width: 100%; float: left; text-align: left;}
	.form2 {width: 100%; float: left; text-align: left;}
	.form3 {width: 100%; float: left; text-align: left;}
	.form4 {width: 100%; float: left; text-align: left;}
	div.reasons {float: none; width: 90%; margin-right: 0;}
	.reasonsicon {float:left; width: 10%; text-align: left;}
	div.survey {
	background: #5d5d5d url(../images/banner-surveyxsm.jpg) no-repeat center center;
	background-size: cover;
	}
	.sonarleft {float: none; text-align: center; width: 100%; margin-bottom: 0px;}
	.sonarleft img { width: 96%; height: auto; border:2px #009cc8 solid; padding: 2px; margin-top: 20px; max-width: 427px;}
	.sonarright {float: none; text-align: left; width: 100%; margin-left: 0%; margin-bottom: 20px;}
	ul.recent {width: 95%;}
}


@media screen and (max-width:550px) {
    h1 {font-size: 18px;}
	.plumberjobsleft {float: none; width: 100%; margin-right: 0%; margin-bottom:0;}
	.plumberjobsright {float: none; width: 100%; margin-right: 0%;}
	.strap {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 20px;
	line-height: 1.6;
	}
	.strap2 {
	padding: 15px 10px 0px 10px;
	line-height: 1.6;
	font-size: 16px;
	}
	.strap3 {
	padding: 20px 10px 10px 10px;
	}
	div.three h3 {font-size: 18px; padding: 4px 0 6px 0;}
	h2 { font-size: 24px;}
	.welcome1 img {width: 80px;}
	.upperfooter {font-size: 16px;}
	.bigvideo {
	display: none;
	}
	.smallvideo {
	display: block;
	}


}

@media screen and (max-width:450px) {
	.quoteinner div {
		padding: 5px 15px 10px 20px;
		background: rgba(255, 255, 255, 0.97);
		max-width: 650px;
		}

	h1 span.big {
	display: none;
	}
	h1 span.med {
	display: none;
	}
	h1 span.sma {
	display: inline;
	}
	div.logo a img {
	width: auto;
	border: 0;
	height: 85px;
	}
	header {
	width: 100%;
	height: 155px;
	padding: 0;
	background: #fffffe linear-gradient(#444, #000) 0 0/100% 28px no-repeat;
	position: fixed;
	top:0;
	z-index: 1;
	}
	div.nav {
    width: 100%;
    margin: 155px 0 0 0;
    padding: 3px 0 0 0;
	background: #333 linear-gradient(#00bf63, #016032);
	border-top: 1px solid #ccc;
	}
	.bannerinner {
	padding: 100px 10px 100px 10px;
	height: 100%;
	margin: 0px;
	position: relative;
	text-align: center;
	}
	.tel {
	text-align: right;
	float: right;
	margin: 50px 0 0 0;
	padding: 0;
}
}