html{
    height: 100%;
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

}
body{

			font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
			height:100%;
			


}

#wrapper {
	min-height:100%;
	position:relative;
}
#content {
	padding-bottom:125px; /* Height of the footer element */
	}
.footer {
	background:#545454;
	width:100%;
	height:125px;
	position:absolute;
	bottom:0;
	left:0;
	color:#b9afaf;
}



.bg { 
			/* The image used for setting up backgrounds for site - class=bg */
			background-image: url("../images/exterior.jpg");

			/* Full height */
			height: 100%; 

			/* Center and scale the image*/
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
}

.bg1{
			
			background-image: url("../images/edenrural2.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg2{
			
			background-image: url("../images/bricksmall.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg3{
			
			background-image: url("../images/panaconfsmall.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg4{
			
			background-image: url("../images/panellingsmall.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg5{
			
			background-image: url("../images/frontpana.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}


.bg6{
			
			background-image: url("../images/signfocus.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg7{
			
			background-image: url("../images/flats.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg8{
			
			background-image: url("../images/sign3.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg9{
			
			background-image: url("../images/coffeeview.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
}
.bg10{
			
			background-image: url("../images/doorhandle.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
			
}
.bg11{
			
			background-image: url("../images/frontdoor2.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
			
}
.bg12{
			
			background-image: url("../images/dado.jpg");
			height: 100%;		
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;	
			
}

.icon{
	
			width: 35px;
			height: 5px;
			background-color: #ffffff;
			margin: 6px 0;
}



.top-bar{
			background-color:#B9AFAF;
			color:#000000;
	
}
.top-bar-left{
			background-color:#B9AFAF;
			color:#000000;
			text-decoration:none;
}
.top-bar-right{
			background-color:#B9AFAF;
}

.small-4{

			background:rgba(255,255,255,0.8);
			padding: 10px 10px 10px 10px;
			border: solid 1px;
			border: 10px 10px 10px 10px;
			width: 28%;
			margin:25px;
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
			
	
}

.small-6{

			background:rgba(255,255,255,0.8);
			padding: 10px 10px 10px 10px;
			border: solid 1px;
			border: 10px 10px 10px 10px;
			width: 45%;
			margin:25px;
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
			height:auto;
			
	
}

.small-2{
			font-size:35px;
			text-align: center;
			color:#000000;
			padding: 5px;
	
}
.medium-6   {
			height:auto;
			width:45%;
			border: solid 1px;
			background-repeat:no-repeat;
			background-size:cover;
			padding:20px;
			margin-bottom:30px;
			background-color:#ffffff;
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
	  }
.medium-8  {
			height:auto;
			width:65%;
			border: solid 1px;
			background-repeat:no-repeat;
			background-size:cover;
			padding:20px;
			margin-bottom:30px;
			background-color:#ffffff;
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
	  }	  
.fifty	{
			height:auto;
			width:45%;
			border: solid 1px;
			background-repeat:no-repeat;
			background-size:cover;
			padding:20px;
			margin-bottom:30px;
			background-color:#ffffff;
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
	  }
.small-12	{
			height:auto;
			width:100%;
			border: solid 1px;
			background-repeat:no-repeat;
			background-size:cover;
			padding:5px;
			margin-bottom:5px;
			background-color:rgba(255,255,255,0.8);
			border-top-left-radius:8px;
			border-top-right-radius:8px;
			border-bottom-left-radius:8px; 
			border-bottom-right-radius:8px;
		
	  }
.small-6{
			height:100%;
			border: solid 1px;
			background-repeat:no-repeat;
			background-size:cover;
			padding:0px;
	  }

.centerImage
{
			text-align:center;
			display:block;
}

 
a {
			text-decoration:none;
			color:#000000;
			background-image:none;
			
}
a:hover{ /*standard hover class*/
			color:blue;
			
	
}
a:active{
			color:green;
	
}
 a.ex1	{ /*new hover class=ex1*/
			text-decoration:none;
			color:#b9afaf;
			background-image:none;
			background-color:#545454;}
			
 

 a.ex1:hover{	
			
			color:blue;
			
 }
	a.ex1:active{	
			
			color:green;
			
 }
  a.ex2	{/*hover class ex=2*/
			text-decoration:none;
			color:#000000;
			background-image:none;
			background-color:#ffffff;}
			
 

 a.ex2:hover{	
			
			color:blue;
			
			
 }
	a.ex2:active{	
			
			color:green;
			
 }
	

.is-drilldown{
			max-width:250px;
			overflow:visible;
}
  
.dropdown.menu > li.is-dropdown-submenu-parent > a::after { 
			content:none;} /*removes zurb drop down blue arrow*/
	
	
label {
			display:block;
			margin-top:20px;
			letter-spacing:2px;
}
form {
			float: center;
			margin: auto;
   
}
input, textarea {
			width:439px;
			height:75px;
			background:#efefef;
			border:1px solid #dedede;
			padding:10px;
			margin-top:3px;
			font-size:0.9em;
			color:#000000;
}
input, textarea {
			width:439px;
			height:75px;
			background:#efefef;
			border:1px solid #dedede;
			padding:10px;
			margin-top:3px;
			font-size:0.9em;
			color:#000000;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
}
textarea {
			height:213px;
			background:url("images/northface.JPG") right no-repeat #efefef;
			background-size: cover;
}
input:focus, textarea:focus {
			border:1px solid #97d6eb;
}
#submit {
			width:127px;
			height: 73px;
			background:url("images/submit-button.png");    
			border:none;
			text-indent: -9999px;
			background-size:100% 100%;
			margin-top:20px;
			cursor:pointer;
}

#submit:hover {
			margin-top: 0px;	 
		 	}

.iframe {
			height: 530px;
			width: 350px;
			resize: both;
			overflow: auto;
}
.top-bar {
			border-bottom:solid 1px;}
		
@media screen and (max-width: 400px){

		.small-6{
				background-size:cover;
				width:100%;
				
				}
				
		.row
			{
			
			padding-top:25px;
			text-align:center;
			
			
			}
		
		.top-bar
		{
		
			border-bottom:none;
			height:150px;
			
			}
		
		.top-bar-left{padding: 10px 10px 10px 10px;}

		.top-bar-right{padding: 10px 10px 10px 10px;}
		
		.small-4{
						width:95%;
						text-align:center;
						margin:5px;
						border:none;
					}
		.small-3{
						
						width:100%;
						text-align:center;
						
					}
		
		}		

		
@media screen and (max-width: 500px){
			
		.small-3{
						
						width:100%;
						text-align:center;
						
					}	
					
		.medium-6{
			
						width:100%;
		}

		.small-6{
						background-size:cover;
						width:90%;
				
					
				}
				
		.row 
		{
		
						padding-top:25px;
						text-align:center;
			
			}
		
		.top-bar{
						border-bottom:none;
						height:150px;	 
		
		
		}
		
		.top-bar-left{padding: 10px 10px 10px 10px;}

		.top-bar-right{padding: 10px 10px 10px 10px;}
		
		.small-4{
						width:95%;
						text-align:center;
						margin:5px;
						border:solid 1px;
					}
		.footer{
						height:125px;
		}
		.small-2{	width: 50%;	}
		.bg { 
  
						background-image: url("../images/exteriorsmall.jpg");
						height: 100%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
}
		
		}
@media screen and (max-width: 645px) and (min-width: 500px)
		
		{
		
		
		.top-bar{
			
					border-bottom:none;
					height:100px;
					
					
					}
		
		.small-2{	width: 50%;	}
		
		
		
		}
		
		
		
		
@media screen and (max-width: 850px) and (min-width: 500px){
	
			.medium-6{
					width:100%;
					padding-bottom:150px;
								
			}
			
			
	
			.socials{
				
					float:center;
			}
	
			.footer{
					height:125px;
			}
			.small-3{
						
					width:25%;
					text-align:center;
						
					}
	
			.top-bar{
			
					border-bottom:none;
					height:100px;
					
					
					}
			
			.top-bar-left{padding: 10px 10px 10px 10px;}
			
			.top-bar-right{padding: 10px 10px 10px 10px;}

			.small-6{
					background-size:cover;
					width:95%;	
					}
			
			#body	{
					background-color:#bfbfbf;
					}
				
  
			.row{
						
					text-align:center;
					padding-top:25px;
				}
			

			.small-8{
					width:100%;
					height:auto;
					text-align:center;
					}
			.small-4{
						width:95%;
						text-align:center;
						margin:5px;
						border:solid 1px;
					}
	
		
			.iframe   {
						width:100%;
					}
			
			.nav2	{
						display:none;	
					}
	


		}	
		
@media screen and (min-width: 850px) and (max-width: 1200px){
				
			.top-bar{
			
						border-bottom:none;
						height:50px;
					
					
					}	
		
		
			.small-4{
						width:27%;
						text-align:center;
						margin:26px;	
						border: solid 1px;
						height:auto;			
			
			}
			.small-6{
						width:40%;
				
				
			}
		
}
		
@media screen and (min-width:1200px){

		.top-bar{
			
						border-bottom:none;
						height:50px;
					
					
					}
		
		.small-3{						
						width:25%;
						text-align:center;						
		}
		
		
		.small-4{
						width:28%;
						text-align:center;
						margin:26px;	
						border: solid 1px;
						height:auto;
		}
		
		.bg { 
   
					background-image: url("../images/exteriorsmall.jpg");					
					height: 100%; 					
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
		}
	}	

.has-tip{
			color:#755f5f;
			border-bottom: none;
			cursor:pointer;
		}
		.has-tip:hover{
			color:blue;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			
		}
/*original landing page css - not used but left in just in case!*/
.panel1 {
			background-image: url("../images/homeless.jpg");
			height: 100%;
			background-size:cover;
			width:100%;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			
}
.panel1:hover, .panel1:focus, .panel1:active {
			background-image: url("../images/redhomeless.jpg");
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
			width:100%;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
}

.panel2 {
			background-image: url("../images/exteriorsmall.jpg");
			height: 100%;
			background-size:cover;
			width:100%;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			
}
.panel2:hover {
			background-image: url("../images/exteriorsmallyellow.jpg");
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
			width:100%
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			
	}
.panel3    {
				  background-image: url("../images/coffeebar.jpg");	
				  height:100%;
				  background-size:cover;
			      background-repeat: no-repeat;
			      width:100%
				  -webkit-transition: all ease 1s;
			     -moz-transition: all ease 1s;
			     -o-transition: all ease 1s;
			     -ms-transition: all ease 1s;
			     transition: all ease 1s;


}

.panel3:hover {
			background-image: url("../images/bluecoffeebar.jpg");
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
			width:100%;
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			
	}
.panel4 {
			background-image: url("../images/handlesmall.jpg");
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
			width:100%
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
			

}
.panel4:hover {
			background-image: url(../images/handlesmallgreen.jpg);
			height:100%;
			background-size:cover;
			background-repeat: no-repeat;
			width:100%
			-webkit-transition: all ease 1s;
			-moz-transition: all ease 1s;
			-o-transition: all ease 1s;
			-ms-transition: all ease 1s;
			transition: all ease 1s;
}	
.small-6 li{
			list-style-type:none;
			display:inline;
			padding: 10px;	
			color:white;
	}
	
.small-6 a:hover{
			color:#000000;
	}
.small-6 ul{
			display:block;
			text-align:center;
			margin-top: 40px;
}


.span :hover{
		
		color:blue;
	}
	

#header{
			background-image: url("../images/exterior.jpg");
			height: 100%;
			background-size:cover;
			width:100%;
}
	
.changecolor {
	
			color:red;
			text-decoration:underline;
			  


}