html {
	font-family:Arial, Helvetica, sans-serif;
	background-color:#000000;
}

#wrapper {
	margin-left:auto;
	margin-right:auto;
	max-width:960px;
	min-width:320px;
}
#header {
	max-width:960px;
	min-width:320px;
	height:160px;
	background-color:#84b041;

}
#content {	max-width:960px;
	min-width:320px;
	background-color:#FFFFFF;	}
#footer {
	background-image:url(../images/footer.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	max-width:960px;
	min-width:320px;
	height:185px;
	font-size:16px;
	font-weight:bold;
	color:#000000;

}
#footer a {
	color:#000000;
	text-decoration:none;
}
#footer a:hover {
	color:#ffffff;
}
.socialmedia {
	display:inline;
	margin: 0px 0px 0px 0px;	
}
#menu_container {
	background-color:#000;
	margin-left:60px;
	margin-right:60px;
	margin-top:10px;
}

#menu {
	text-align:center; 
	float:left;
	color:#FFFFFF;
	width:20%;
	font-size:18px;

}
a {
	text-decoration:none;
}
#menu a {
	text-decoration:none;
}
#menu:hover {
	color:#ccc;
}

#bodycopy{font-size:20px; font-weight:bold; padding:30px; margin-left:60px; margin-right:60px; line-height:25px;}
 @media screen and (max-width: 640px) {#header {
	width:100%;
	height:270px;
	background-color:#000000;	
}#menu {
font-size:18px;
	text-align:left; 
	color:#FFFFFF;
	width:640px;
	margin-top:5px;

}

.socialmedia {
	display:inline;
	margin: 0px 40px 20px 0px;	
}#bodycopy{font-size:20px; font-weight:bold; padding:30px; margin-left:10px; margin-right:10px;}
}

/** testimonials **/


*{	/*some reset code, nothing else*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin: 0;
	padding: 0;
	
}
#testimonials{
	width:100%;
	margin:10px auto;
	padding: 20px 40px 40px 40px;
	position:relative;
	text-align:center;
}
#testimonials .testimonial{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	z-index:1;
}

#test_container{
	position:relative;
	overflow:hidden;
}
#testimonials .testimonial_text{
	font-size:14px;
	font-family:verdana;
	font-style:italic;
	line-height:25px;
}
#testimonials .testimonial_name{
	font-size:14px;
	margin:10px auto 3px;
	font-style:normal;
	font-family:arial;
}
#testimonials .testimonial_designation{
	font-size: 12px;
	line-height: 14px;
	font-family:verdana;
}
#t_pagers{
width: 100%; position: absolute; bottom: 10px; margin-left:-40px; text-align: center;

}
#t_pagers .pager{
	display:inline-block;
	text-decoration:none;
	width:11px;
	min-height:11px;
	margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
	background:#666;background: rgba(0,0,0,0.5);
	-webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;
	 cursor: pointer;
}
#t_pagers .pager.active{
	background: #000; background: rgba(0,0,0,0.9); cursor: default;
}
#t_pagers a:hover { background: #333; background: rgba(0,0,0,0.7); }




/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
	font-family: 'flexslider-icon';
	src:url('../flexslider-icon.eot');
	src:url('../flexslider-icon.eot?#iefix') format('embedded-opentype'),
		url('../flexslider-icon.woff') format('woff'),
		url('../flexslider-icon.ttf') format('truetype'),
		url('../flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 20px; background: #fff; position: relative; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; line-height:1; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }


/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display:inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }






.form-title{color:#FFFFFF; font-weight:normal; font-size:18px;}
.form-container {
   border: 3px solid #cce7a4;
   background: #84b041;
   text-decoration: none;
   vertical-align: middle;
   padding:20px;
   

   }
.form-field {
   border: 3px solid #cce7a4;
   background: #ffffff;
   color: #000000;
   width:100%;
   padding:10px;
   margin-bottom:20px;
   }
.form-field:focus {
   background: #fff;
   color: #84b041;
   }

.submit-container {
   margin:8px 0;
   text-align:right;
   }
.submit-button {
   border: 3px solid #cce7a4;
   background: #cce7a4;
   color: #84b041;
   padding: 8.5px 18px;
   font-size: 18px;
   text-decoration: none;
   width:100%;
   }
.submit-button:hover {
   border: 3px solid #447314;
   background: #6aa436;
   color: #fff;
   }
.submit-button:active {
   border: 3px solid #447314;
   background: #8dc059;
   color: #fff;
   }

.hide {display: none;}

















@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}












div#cottage_01 {
	position: relative;
	font-size: 0;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
div#cottage_01 img {
	width: 100%;
	height: auto;
}
div#bathroom_01 {
	position: relative;
	font-size: 0;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
div#bathroom_01 img {
	width: 100%;
	height: auto;
}
div#dojo_01 {
	position: relative;
	font-size: 0;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}
div#dojo_01 img {
	width: 100%;
	height: auto;
}
div#colored {
	background-image: url(../images/cottage_01_after.jpg);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background-size: cover;
}
div#colored2 {
	background-image: url(../images/bathroom_01_after.jpg);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background-size: cover;
}
div#colored3 {
	background-image: url(../images/dojo_01_after.jpg);
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 50%;
	background-size: cover;
}
div#cottage_01:hover {
	cursor: col-resize; 
}

div#bathroom_01:hover {
	cursor: col-resize;
}
div#dojo_01:hover {
	cursor: col-resize;
}