@charset "utf-8";
/* CSS Document */


/* Mobile Layout: 580px and below. */
.whiteBGBlock {background-image:url(../images/white-section_shadow-top_bg.jpg); background-repeat:repeat-x;}
.whiteBlockPadding {padding:30px 0 30px 0;}

.breadcrumbs {margin:0; text-align:right; font-style:italic; font-size:14px;}

#banner {display:none;}
#titleBar {padding:10px 0 10px 0; background-color:#0469ae;}
#titleBar h5 {
	margin:0;
	color:#fff; 
	text-align:center; 
	font-family: 'Oswald', Arial, sans-serif; 
	font-weight:400; 
	font-size:30px;
}

#titleBar a:link, #titleBar a:active, #titleBar a:visited {color:#bbd4e5; text-decoration:underline;}
#titleBar a:hover {color:#fff; text-decoration:none;}

.fancyCallToAction {
	background-image:url(../images/divider.png);
	height:67px;
	background-repeat:repeat-x;
	width:100%;
	font-family: 'Roboto', Arial, sans-serif;
	font-size:16px;
	color:#07214a;
	text-align:center;
	margin:25px 0 60px 0;
	line-height:32px;
}
.fancyCallToActionWrapper {margin:auto; width:80%; background-color:#FFF;}
.openingBracket {
	background-image:url(../images/big-beginning-bracket.png); 
	background-repeat:no-repeat; 
	height:68px; 
	width:10%; 
	float:left; 
	background-position:right;
}

.fancyCallToActionWrapper .phone {float:left; width:80%;}
.bigPhone {color:#0f5f8a; font-size:22px;}

.endingBracket {
	background-image:url(../images/big-ending-bracket.png); 
	background-repeat:no-repeat; 
	height:68px; 
	width:10%; 
	float:left; 
	background-position:left;
}

.halfBox, .threeBox {margin-bottom:20px;}

.serviceBox h2 {font-size:28px;}
.serviceBox .button {
	background-color:#6fa72d; 
	color:#fff; 
	text-decoration:none; 
	display:block; 
	padding:8px 5px 8px 5px; 
	width:110px; 
	text-align:center;
	font-size:18px;
	margin:0 auto 0 auto;
	border:#fff solid 2px;
	box-shadow: 2px 2px #6fa72d, -2px -2px #6fa72d, 
	-2px 2px #6fa72d, 2px -2px #6fa72d;
}

.serviceBox .button:hover {
	background-color:#0469ae;
	box-shadow: 2px 2px #0469ae, -2px -2px #0469ae,
	-2px 2px #0469ae, 2px -2px #0469ae;
}

#form {margin-top:25px;}
.inputName {font-weight:bold; font-size:15px;}
.inputField {margin-bottom:15px;}
#stateInput, #timeForm {width:48%; float:left;}
#zipInput, #methodForm {width:48%; float:right;}

#submitForm {text-align:center; margin-top:15px;}

.leaksSlideshow, .leaksSlideshow2, .beforeAfterSlideshow {display:none;}


/* Tablet Layout: 581px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 581px) {
.breadcrumbs {float:right;}

#banner {display:inherit;}
#titleBar h5 {font-size:35px;}

.fancyCallToAction {font-size:20px;}
.fancyCallToActionWrapper {width:400px;}
.openingBracket {height:68px; width:25px;}
.fancyCallToActionWrapper .phone {width:350px;}
.bigPhone {font-size:42px;}
.endingBracket {height:68px; width:25px;}

.halfBox {width:50%; float:left; margin-bottom:0;}
.halfBoxLeft {width:47%; float:left;}
.halfBoxRight {width:47%; float:right;}
.threeBox {width:31%; float:left; margin-bottom:0; margin-right:20px;}

.serviceBox .button {margin:0;}

#leftForm {width:48%; float:left;}
#rightForm {width:48%; float:right;}

.leaksSlideshow {display:block; width:100%; max-width:500px; margin:auto;}
.leaksSlideshow2 {display:block; width:100%; max-width:500px; margin:0 auto 20px auto;}

}




/* Desktop Layout: 800px to a max of 1100px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 800px) {
#form {width:90%; margin:20px auto 0 auto;}

.leaksSlideshow {width:500px; float:right;}
.leaksSlideshow2 {width:311px; float:right;}
.beforeAfterSlideshow {display:block; text-align:center;}
}