@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body {
	height: 101%;
	background-image:url(images/background.jpg);
	background-repeat:repeat-x;
	background-color:#ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
	color:#333;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

a {
	text-decoration:none;
	color:#333;
	
}

a:hover {
	text-decoration:underline;
	color:#000;
}

#logo {
	
float:left; 
margin-left:2%;
}

@media screen and (max-width: 414px) {
	
	#logo {
	float:none;
	text-align:center;	
		
		
	}}
	
#main  {
	-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border: 3px solid #333;
  -moz-box-shadow:    3px 3px 3px 3px #333;
  -webkit-box-shadow: 3px 3px 3px 3px #333;
  box-shadow:         3px 3px 3px 3px #333;
  background-color:#fff;
  max-width:1100px;
  width:95%;
 margin: 0 auto; 
 padding:1%;
display:inline-block;

}	

#main-content {
	float:left; 
	margin-right:1%;
	margin-left:1%;
	text-align:left;
	
}

#main-content li {
margin-left:10%;
}

#social-media {
	float:right;
	margin-right:2%;
	margin-top:1%;
	
}

@media screen and (max-width: 414px) {
	
#social-media {
		float:none;
	text-align:center;
	margin-bottom: -5%;
	
}
	
	
}

#contact {
float:right;	
	font-size:1.4em;
	margin-right:2%;
	line-height:135%;
	text-align:right;
}


@media screen and (max-width: 414px) {
#contact {
	float:none;
	text-align:center;

	
}}

@media screen and (max-width: 568px) {
#contact {
font-size:1.2em;

	
}}


#facebook-feed {
float:right;
max-width:300px; 
width:100%; 
max-height:500px; 
padding-left:1%;
		
}
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}

/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}




@media screen and (max-width: 1096px) {
#facebook-feed {
float:right;
display: inline-block;
	width:97.5%;
	text-align: center;
	padding-top:2%;
	margin-right:2%;
}}


#left-box {
	float:left;
	color:#fff;
	background-color:#59a0be;
	padding:1%;
		-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border: 1px solid #333;
	max-width:340px;
	width:100%;
	margin-right:2%;
	text-align:left;
}

#left-box li {
	margin-left:10%;
}





#right-box {
	float:left;
	color:#fff;
	background-color:#59a0be;
	padding:1%;
		-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
border: 1px solid #333;
	max-width:340px;
	width:100%;
		margin-left:2%;
	text-align:left;
	

}

#right-box li {
	margin-left:10%;
}



@media screen and (max-width: 1096px) {
 #right-box {
float:left;
	max-width:500px;
	width:65%;
	 margin-top:2%;

	
}
	
	#left-box {
		float:left;
	max-width:none;
	width:95%;
	}

}
@media screen and (max-width: 930px) {
#left-box, #right-box {
	float:left;
	width:97.5%;
	max-width: none;
	margin-left:0%;
	margin-right:0%;
	margin-bottom: 2%; }

	#facebook-feed { 
		float:none;
	
	} }





#testimony-home {
	
	width:95%;
	border: 2px solid #000;
	font-style:italic;
	padding:1%;
	background-color:#333;
	color:#fff;
	font-size: 0.8em;
	
}






@media screen and (max-width: 667px) {
#testimony-home {
width:92%;
margin-bottom:2%;
	} }


#call {
	display:inline-block;
	text-align:center;
	font-weight:bold;
}


#bottom {
	text-align:center;
	font-size:0.8em;
}

#form {
	max-width:500px;
	width:100%;
	display:inline-block;
}

@media screen and (max-width: 667px) {
#form {
	float:left;
	max-width:667px;
	width:100%;
	text-align:center;
	
}}

@media screen and (max-width: 667px) {
#call {
	float:left;
	text-align:center;
	max-width:667px;
	width:100%;
	
}}


#highlight-box {
	padding:1%;
	background-color:#4e81a2;
	border-radius:10px;
	border: 2px solid #333;
	color:#fff;
	width:100%;
	margin:1%;	
}

#testimony-box {
	padding:1%;
	background-color:#cccccc;
	border-radius:10px;
	border: 2px solid #333;
	color:#000;
	width:100%;
	margin:1%;
	font-style:italic;	
}


.video1 {
	float:left;
	padding-left:20px;
	padding-bottom:20px;
	width:40%;
}




.video2 {
	float:right;
	padding-right:20px;
	padding-bottom:20px;
	width:40%;
}


@media screen and (max-width: 750px) {
	.video1, .video2 {
		padding-left:0px;
		padding-right:0px;
		float:none;
		width:100%;
		display: inline-block;
		padding-bottom: 0px;
	}

}
	
	
.residential-button {
	float: left;
	border-radius: 6px 6px 6px 6px;
	border: 1px solid #000;
	background-color:#5595d6;
	padding:10px;
	text-align: center;
	
}

.residential-button a {
		color:#fff;
}


.commercial-button {
	float:right;
	border-radius: 6px 6px 6px 6px;
	border: 1px solid #000;
	background-color:#5595d6;
	padding:10px;
	text-align: center;
	
	
}

.commercial-button a {
		color:#fff;
}
	
	
.estimate-button {
	border-radius: 6px 6px 6px 6px;
	border: 1px solid #000;
	background-color:#5595d6;
	padding:10px;
	text-align: center;
	
}

.estimate-button a {
		color:#fff;
}