/* CSS layout */

body {margin:0px 0px 0px 0px; min-height:768px; height:100%; font-style:normal; font-family:Arial, Sans-Serif; font-size:1.0em; font-variant:normal; font-weight:normal; color:#ffffff; touch-action:auto; background-image: url("../img/brickwall.png"); background-repeat:repeat; }

H1 {font-family:Sans-Serif;font-size:34px;color:#3e3e3e; }
H2 {font-family:Sans-Serif;font-size:18px;color:#3e3e3e; }
H3 {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; margin-left:30px;}
H4 {font-family:Sans-Serif;font-size:16px;color:#3e3e3e; margin-left:30px;}
H5 {font-family:Sans-Serif;font-size:14px;color:#3e3e3e; }
.H2header {margin: 0px auto -5px auto; padding-bottom:2px;}
.fontstyle1 {font-family: Sans-Serif; font-size:13px; color:#606060; }
.fontstyle2 {font-family: Sans-Serif; font-size:13px; color:#606060; width:240px; padding:5px 30px 5px 30px; overflow:hidden; height:70px;}
.fontstyle3 {font-family: Sans-Serif; font-size:16px; color:#606060; text-align:justify; line-height:1.5;}
.size300x225 {height:225px; width:300px;}
.size100x100 {height:40px; width:40px;}
.sliderdisplay1 {}
.sliderdisplay2 {display:none;}
.sliderdisplay3 {display:none;}
.sliderdisplay4 {display:none;}

a#back-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 44px;
height: 44px;
display: block;
text-indent: -99999em;
background: url(../img/arrows.png) -172px 17px no-repeat #252b2d;
background-color: rgba(0,0,0,.5);
border-radius: 5px;
-webkit-border-radius: 5px;
 moz-border-radius: 5px;
z-index: 99;
}

header {margin:0px auto 0px auto; height:150px; width:100%; background-color:#fff;}
.header { margin:0px auto 0px auto; width:990px;}

#cookie-law { 
    min-width:854px;
    max-width:90%;
    background:#EEEADD; 
    margin: 0px auto 0px auto; 
    border-bottom-left-radius: 17px;
    border-bottom-right-radius: 17px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 17px;
    -webkit-border-bottom-right-radius: 17px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-bottom-left-radius: 17px;
    -moz-border-bottom-right-radius: 17px;
    -moz-border-top-left-radius: 0px;
    -moz-border-top-left-radius: 0px;
}
 
#cookie-law p { 
    padding:10px; 
    font-size:1.1em; 
    font-weight:bold; 
    text-align:center; 
    color:#682008; 
    margin:0;
}    

#navwrap {width:100%; margin:0px auto 0-x auto; text-align:center; background-color:#B00000;}
nav {width:900px; height:40px; background-color:#B00000; position:relative; z-index:9999; margin:0px auto 0px auto; text-align:justify; }
    /*Strip the ul of padding and list styling*/
    nav ul { list-style-type:none; margin:0; padding:0;	position: absolute;}

    /*Create a horizontal list with spacing*/
    nav li { display:inline-block; float: left; margin-right: 1px; }

    /*Style for menu links*/
    nav li a {display:block; width:179px; height: 40px;	text-align: center;	line-height: 40px;	text-transform: uppercase; color: #fff; background: #B00000; text-decoration: none; }

    /*Hover state for top level links*/
    nav li:hover a {background: #B00000;}

        /*Style for dropdown links*/
        nav li:hover ul a {	background: #B00000;	color: #fff;	height: 40px;	line-height: 40px;}

        /*Hover state for dropdown links*/
        nav li:hover ul a:hover {   	background: #B00000;	color: #fff;}

        /*Hide dropdown links until they are needed*/
        nav li ul {	display: none;}

        /*Make dropdown links vertical*/
        nav li ul li {	display: block;	float: none;}

        /*Prevent text wrapping*/
        nav li ul li a {	width: 100%;	min-width: 140px; height:40px;}

        /*Display the dropdown on hover*/
        nav ul li a:hover + .hidden, .hidden:hover { display: block;}

    /*Style 'show menu' label button and hide it by default*/
    .show-menu {text-decoration: none;	color: #fff; background: #B00000;	text-align: center;	padding: 10px 0;	display: none; }

    /*Hide checkbox*/
    input[type=checkbox]{    display: none;}

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu{    display: block;}




footer {width:100%; text-align:center; min-height:300px; background: url(../img/footerbackground.jpg) no-repeat; background-size: 100% 300px; }
#footerwrap {width:990px; margin:0px auto 0px auto;}
#footercontent1 {width:392px; height:240px; margin: 0px auto 0px 30px; padding: 30px 0px 30px 0px; text-align:left; font-size:24px;}

#footerform {width:990px; height:300px; margin: -300px 0px 0px auto;}
form {
    margin-left:auto;
    margin-right:0px;
    width: 538px;
    height: 238px;
    padding:30px;
    
    overflow: hidden; 
}

textarea{
	  background: rgba(255, 255, 255, 0.4) url(../img/gemicon_message.png) no-repeat scroll 16px 16px; 
    width: 471px;
    height: 80px;
    border: 1px solid rgba(255,255,255,.6);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
    color:#fff;
    padding-left:45px;
    padding-right:20px;
    padding-top:12px;
    margin-bottom:20px;
    overflow:hidden;
}

input {
    width: 471px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
}

input[type=submit] {
    cursor:pointer;
}

input.name {
	  background: rgba(255, 255, 255, 0.4) url(../img/gemicon_name.png) no-repeat scroll 16px 16px; 
	  padding-left:45px;
}

input.email {
	  background: rgba(255, 255, 255, 0.4) url(../img/gemicon_email.png) no-repeat scroll 16px 20px;
	  padding-left:45px;
}

input.message {
	  background: rgba(255, 255, 255, 0.4) url(../img/gemicon_message.png) no-repeat scroll 16px 16px;
	  padding-left:45px;
}

::-webkit-input-placeholder {
	  color: #fff;
}

:-moz-placeholder{ 
    color: #fff; 
}

::-moz-placeholder {
    color: #fff;
}

:-ms-input-placeholder {  
	  color: #fff; 
}

input:focus, textarea:focus { 
	  background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
	  overflow: hidden; 
}

.btn {
	  width: 138px;
	  height: 44px;
	  -moz-border-radius: 4px;
	  -webkit-border-radius: 4px;
	  border-radius: 4px;
	  float:right;
    border: 1px solid #253737;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
}

.btn:hover {
    border: 1px solid #253737;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
 }

.btn:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #253737;
    background: #6da5a3;
    background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
    background: -webkit-linear-gradient(top, #416b68, #609391);
    background: -moz-linear-gradient(top, #416b68, #6da5a3);
    background: -ms-linear-gradient(top, #416b68, #6da5a3);
    background: -o-linear-gradient(top, #416b68, #6da5a3);
    background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
   }



#footernav {height:150px; margin:30px auto 0px auto; text-align:center; width:990px;}
#footernav ul {width:500px; margin: 0px auto 0px auto; height:30px; padding:10px 0px 10px 0px;}
#footernav ul li {text-decoration: none; list-style-type: none; float:left; font-size:1.5em; padding:0px 10px 0px 10px;}
#footernav a:link {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}
#footernav a:visited {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}
#footernav a:hover {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}

#logo {height:100px; width:300px; padding: 25px 25px 25px 25px; overflow:hidden;}

#social {height:130px; padding: 10px 25px 10px 25px; margin:-150px auto 0px 600px; text-align:center;}

#tel1 {margin:-14px 0px 0px 0px;}
#tel1 a:link {font-family:Sans-Serif;font-size:25px;color:#B00000; text-decoration:none;}
#tel1 a:visisted {font-family:Sans-Serif;font-size:25px;color:#B00000; text-decoration:none;}
#tel1 a:hover {font-family:Sans-Serif;font-size:25px;color:#B00000; text-decoration:none;}

#tel2 {}
#tel2 a:link {font-family:Sans-Serif;font-size:25px;color:#ffffff; text-decoration:none;}
#tel2 a:visisted {font-family:Sans-Serif;font-size:25px;color:#ffffff; text-decoration:none;}
#tel2 a:hover {font-family:Sans-Serif;font-size:25px;color:#ffffff; text-decoration:none;}

.sliderzindex {z-index:10; position:relative;}
#slider {width:100%; max-width:2000px; height:450px; overflow:hidden; text-align:center; z-index:10; position:relative;}
#slider figure img { width:20%; height:450px; float:left;}
#slider figure {position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; text-align: left; -webkit-animation: 30s slidy infinite; animation: 30s slidy infinite;}
@keyframes slidy {0% { left: 0%; }20% { left: 0%; }25% { left: -100%; }45% { left: -100%; }50% { left: -200%; }70% { left: -200%; }75% { left: -300%; }95% { left: -300%; }100% { left: -400%; }}
@-webkit-keyframes slidy {0% { left: 0%; }20% { left: 0%; }25% { left: -100%; }45% { left: -100%; }50% { left: -200%; }70% { left: -200%; }75% { left: -300%; }95% { left: -300%; }100% { left: -400%; }}

.contentwrap {border:1px solid #CCC; width:990px; margin:0px auto 0px auto; padding:10px; background-color:#fff; }
.wrap1 {width:948px; margin:25px auto 25px auto; text-align:justify; font:inherit; color:#000; border:1px solid #CCC; padding:20px;}
#tandccontent1 { line-height:1.5; }

#projectbanner {width:800px; margin:25px auto 25px auto; font:inherit; color:#000000; text-align:center; }

#projectrecent {width:990px; margin:0px auto 25px auto;}
    #projectrecent a:link {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}
    #projectrecent a:visited {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}
    #projectrecent a:hover {font-family:Sans-Serif;font-size:20px;color:#3e3e3e; text-decoration:none;}
#projectrecent1 {width:300px; height: 400px; padding:20px 45px 0px 0px;}
#projectrecent2 {width:300px; height:400px; margin: -400px 0px 0px 345px;}
#projectrecent3 {width:300px; height:400px; margin: -400px 0px 0px 690px;}

#servicesmain {width:100%; height:300px; background-color:#87E293;}
#servicescontent {width:990px; height:200px; margin:0px auto 0px auto; padding:50px 0px 50px 0px;}
    #servicescontent a:link {font-family:Sans-Serif;font-size:18px;color:#3e3e3e; text-decoration:none;}
    #servicescontent a:visited {font-family:Sans-Serif;font-size:18px;color:#3e3e3e; text-decoration:none;}
    #servicescontent a:hover {font-family:Sans-Serif;font-size:18px;color:#3e3e3e; text-decoration:none;}
#servicescontenta {width:250px; height:200px; margin:-215px 0px 0px 230px;}
#servicescontentb {width:250px; height:200px; margin:-215px 0px 0px 740px;}

.circleimg1 {width: 200px; height: 200px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background : url(../img/3dhouseplan.jpg) no-repeat; background-color:#ffffff;}
.circleimg2 {width: 200px; height: 200px; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background : url(../img/extensionimg.jpg) no-repeat; background-color:#ffffff; margin:-200px 0px 0px 510px;}

#aboutbanner {width:800px; height:520px; margin:0 auto 0 auto; font:inherit; color:#000000; text-align:center; background-color:#ffffff;}
.circleaboutimg1 {width: 250px; height: 250px; margin:0 auto 0 auto; border-radius: 125px; -webkit-border-radius: 125px; -moz-border-radius: 125px; background : url(../img/noelabout.jpg) no-repeat; background-color:#ffffff; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);}
#aboutbutton {width: 80px; height: 15px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background-color:#b00000; padding:10px 0px 12px 0px; margin:0px auto 0px auto;}
#aboutbutton a:link {text-decoration:none; color:#FFFFFF;}
#aboutbutton a:visited {text-decoration:none; color:#7C0000;}
#aboutbutton a:hover {text-decoration:none; color:#F07A7A;}

#thankyou {width:100%; text-align:center; padding:50px 0px 50px 0px;}

#servicesheader {height:auto; overflow:auto; color:#000; font-size:1.3em; margin: 20px 0px 20px 0px;}
#building {height:auto; overflow:auto; color:#000; font-size:1.3em; margin: 20px 0px 20px 0px;}
    .services_building {width:auto; height:auto; margin: 20px 20px 0px 0px; display:block; float:left;}
    .services_building_text1 {width:auto; height:auto; margin: 20px 0px 20px 0px; display:block; text-align:justify; }
#extensions {height:auto; overflow:auto; color:#000; font-size:1.3em; margin: 20px 0px 20px 0px;}
    .services_extend {width:auto; height:auto; margin: 20px 20px 0px 0px; display:block; text-align:center;}
#extensions_list { padding-top:15px; line-height:1.5; height:auto;     -webkit-column-count: 3;      -moz-column-count: 3;            column-count: 3;}
    #extensions_list ul {list-style-type:disc;}
    #extensions_list li {display:inline-block; }

#farmhouse1 {width:990px; margin:25px auto 25px auto; font:inherit; color:#000; display:block; }
.farmhouse1img1 {padding: 0px 10px 10px 0px; display:block; min-height:400px; min-width:600px;}
.farmhouse1details {margin: -414px 0px 10px 610px; display:block; min-height:414px; max-width:370px; font-size:1.4em; line-height: 1.5;}
.farmhouse1quote {margin: -170px 0px 0px 610px ; display:block; max-width:350px; padding:0px 10px 0px 10px; font-size:1.4em; line-height: 1.5; text-align:justify;}
#farmhouse1txt1 {width:990px; margin: 0px auto 25px auto; font:inherit; color:#000; line-height: 1.5; display:block;}
.farmhouse1img3 {padding:20px; text-align:center; display:block;}
.farmhouse1img4 {padding:20px; text-align:center; display:block;}
.farmhouse1img4-5 {padding:20px; text-align:center; display:inline-block;}
.farmhouse1img4-5centre { text-align:center; display:block;} 

#citydormer1txt1 {width:990px; margin: 0px auto 25px auto; font:inherit; color:#000; line-height: 1.5; display:block;}
.citydormer1img3 {padding:20px; text-align:center; display:block;}
.citydormer1img2 {}
.citydormer1img4 {padding:20px; text-align:center; display:block;}
.citydormer1img4-5 {padding:20px; text-align:center; display:inline-block;}
.citydormer1img4-5centre { text-align:center; display:block;} 

#dormerbung1txt1 {width:990px; margin: 0px auto 25px auto; font:inherit; color:#000; line-height: 1.5; display:block;}
.dormerbung1img3 {padding:20px; text-align:center; display:block;}
.dormerbung1img2 {}
.dormerbung1img4 {padding:20px; text-align:center; display:block;}
.dormerbung1img4-5 {padding:20px; text-align:center; display:inline-block;}
.dormerbung1img4-5centre { text-align:center; display:block;} 

.example-right {
  position:relative;
  padding:15px 30px;
  margin:0;
  font-style:italic;
  color:#fff;
  background:#005d00; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#05a505), to(#005d00));
  background:-moz-linear-gradient(#05a505, #005d00);
  background:-o-linear-gradient(#05a505, #005d00);
  background:linear-gradient(#05a505, #005d00);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.example-right + p {margin:15px 0 2em 85px; font-style:italic;}

/* creates the triangle */
.example-right:after {
  content:"";
  position:absolute;
  bottom:-50px;
  left:50px;
  border-width:0 20px 50px 0px;
  border-style:solid;
  border-color:transparent #005d00;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}