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

	.logo {width:250px; margin: 20px 20px 15px 30px;}
	.estimate {top: 70px; right: 30px;}
	.social_head {right: 20px; top: 7px;}

	.services {margin: 0 0 0 168px; width: 200px; top:60px;}

	#head_image_home {min-height: 350px;}
    #head_image_services, #head_image_hardscapes, #head_image_stonework, #head_image_water, #head_image_design, #head_image_upgrades, #head_image_interiors, #head_image_featured {min-height: 250px;}
	#head_image_page, #head_image_about {min-height: 250px;}

	.image_container {padding: 40px 20px 20px;}
	.image_container_service {padding: 0 10px 10px; }
	.title_container {padding: 10px 5% 0;}

	.item_container {padding: 30px 5% 30px;}

	.service {font-size:115%; line-height:110%;}
	.service a, nav a:link, nav a:visited {padding:10px 6%;}

	.three_col_index {width:27%; margin: 0 3% 20px;}

	#footer_content {margin: 30px 5% 40px;}

	.one_col {margin:20px 0 0;}
	.six_col {width:14.5%; margin: 0 1%; float:left;}

	.photo_l {width:400px; float:left; margin: 0 30px 0 0;}
	.photo_r {width:400px; float:right; margin: 0 0 0 30px;}


header h1 {font-size:180%;}
header h2 {font-size:95%;}

#content {width: 100%; margin: 10px 20px 50px;}


  nav {text-align: left; font-size:100%; margin: 0 0;}
  nav ul { padding:0 0 0 5px;}
  nav:hover ul {margin-top:0;}
  nav ul li {display:none; margin: 0; top:0;}  
  nav:hover li {display:block; list-style: outside none none;}
  nav ul ul {margin-left:225px;}
  nav ul ul li { }
  nav a, nav a:link, nav a:visited {color:#fff; padding:10px 15px; margin:0 auto 0 0;} 
  nav a:hover {background-color: #8a4527;}

.submenu {font-size:90%;}
.submenu a, .submenu a:link, .submenu a:visited {background-color: #8a4527; padding:12px 20px;}
.submenu a:hover {color:#ccc; background-color: #8a4527;}	

.menu {display:inline-block;}	


@media (max-width: 850px) {
.service {padding: 10px 0 10px 20px;}
	
.service img {
	visibility:hidden;
	position:absolute;
	bottom:0;
	left:0;
	z-index:-300;}
	
.service ul li {width:auto;}
	
.service ul ul, .alt_design, .alt_additons, .alt_custom {top: 40px;}
	
.service a, .service a:link, .service a:visited {
	padding:10px 15px;
	line-height:20px;}
	
	.three_col {width:90%; margin: 0;}
}


@media (max-width: 750px) {
	.three_col_index {width:50%; margin: 0 25% 20px;}

	.image_container_service {padding: 20px 0 20px 30px; }

	.service {padding: 10px 0 10px 20px;}
	.six_col {width: 48%; margin: 10px 1%; float:left;}
	.s_hidden {visibility: hidden; position: absolute;}
	
	.photo_l {width:350px; float:left; margin: 0 30px 0 0;}
	.photo_r {width:350px; float:right; margin: 0 0 0 30px;}
}


@media (max-width: 660px) {
	.logo {width:250px; margin: 20px 20px 15px 20px;}
	.estimate {top: 70px; right: 20px;}
	
	.c3 {width: 97%;} /*nav*/
	nav {text-align: left; padding: 0 0 0 3%;}
	
	.gallery_photo_l, .gallery_photo_r {
		float:none; width:100%; margin:0 0 20px 0;}

	.photo_l, .photo_r {width:65%; float:none; margin: 0 17% 20px;}
	
.three_col {width:100%; margin: 0 0 20px; float:left;}
}


@media (max-width: 600px) {
	.logo {width:250px; margin: 10px 20px 15px 20px;}
	.estimate {float: right; position: static; margin: -45px 5px 0 0;}
	
	.photo_l, .photo_r {width:75%; float:none; margin: 0 12% 20px;}
}


@media (max-width: 525px) {	
	.three_col_index {width:65%; margin: 0 18% 20px;}
	
	nav {text-align: left; padding: 0 0 0 3%;}
	
	.photo_l, .photo_r {width:80%; float:none; margin: 0 10% 20px;}
	
.two_col {width:100%;}
}


@media (max-width: 430px) {
	.three_col_index {width:75%; margin: 0 13% 20px;}
	
	.photo_l, .photo_r {width:90%; float:none; margin: 0 5% 20px;}

.photo_sm {float:none; 	width:125px; margin:30px 30% -10px;}
}


@media (max-width: 400px) {
 	nav {font-size:90%; margin: 0 0;}
	
.services {margin: 0 0 0 156px; width: 190px; top:78px;}
}