html {width:100%; height:100%;}

body {font-family: 'Open Sans', sans-serif; padding:0; margin:0; width:100%; height:100%; overflow-x:hidden; color:#222;}

h1 {color:#118086; font-size:26px; text-transform:uppercase; font-weight:bold; margin:0 0 15px 0;}

h1 span{color:#666666; font-size:24px; text-transform:none; font-style:italic; font-weight:normal; margin:0 0 15px 0;}

h2 {color:#043a3d; font-size:24px; text-transform:uppercase; margin:0 0 15px 0; font-weight:normal; border-bottom:1px solid #043a3d; padding:0 0 10px 0; }

h3 {color:#363f49; font-size:24px; margin:20px 0 20px 0; font-weight:bold; line-height:26px; }

p {font-size:16px; line-height:22px; margin:0 0 20px 0; }

p.welcome {font-size:16px; line-height:30px; margin:0 0 15px 0;}

.center {text-align:center; }

.clear {clear:both;}

small {font-size:0.8em;}

.list {float:left; margin:20px 0 15px 30px; line-height:30px; font-size:18px; }

.list2 {float:left; margin:0px 0 25px 30px; line-height:30px; font-size:18px; }

.img-r {float:right; margin:0 0 20px 20px; padding:4px; border:1px dashed #ccc;}

.img-l {float:left; margin:0 20px 20px 0; padding:4px; border:1px dashed #ccc;}

.img-l2 {float:left; margin:20px 20px 20px 0; padding:4px; border:1px dashed #ccc;}

.olist {float:left; margin:10px 0 15px 40px; line-height:22px; font-size:18px; }

.olist li {margin:0 0 15px 0;}



#gallery .img-l {max-height:113px;}

/* 

Structure

*/



.col-sm-12 {max-width:1200px; margin:0 auto; }

.col-sm-9 {width:70%; float:left;}

.col-sm-61 {width:46%; float:left; margin:0 0 0 0;}

.col-sm-62 {width:46%; float:right; margin:0 0 0 0;}

.col-sm-3 {width:28%; float:right;}

.col-sm-33 {width:31%; float:left; margin:0 4% 0 0;}

.col-sm-33-last {width:30%; float:left; margin:0 0 0 0;}

.col-sm-66 {width:48%; float:left; margin:0 0 0 2%;}

/* 

Navigation

*/

#nav {list-style-type:none; float:left; margin:0 0 0 0; padding:0 0 0 0;}

#nav li {display:inline; margin: 0 0 0 0; }

#nav li:last-child {padding:0 0 0 0; }

#nav li a {transition:all .5s; display:inline-block; float:left; margin:0 0 0 0; border-left:1px solid #0c676c; color:#fff; 

text-decoration:none; font-size:20px; line-height:20px; font-weight:bold; padding:20px 35px;}

#nav li a.current, #nav li a:hover {color:#fff; background:#095155;}

#nav li a.last {border-right:1px solid #0c676c;}

.tinynav {display:none;}



.button {color:#118086; font-size:15px; cursor:pointer;}



/* 

Custom

*/

#header-wrap{height:164px; position:relative; background:#1a1a1a url(../images/header.jpg) no-repeat top center; }

#nav-wrap{height:60px; position:relative; background:#043a3d; }

.logo {float:left; margin:45px 0 0 0;}

.mobile {color:#fff; border:none; font-size:26px; float:right; margin:60px 20px 0 0; background:url(../images/mobile.png) no-repeat left center; padding:5px 0 5px 40px;}

#slideshow {width:1920px; height:600px; position:relative; left:50%; margin:0 0 0 -960px; background:#1a1a1a url(../images/slideshow.jpg) repeat-x;}

.inner-slideshow {width:1200px; margin:0 auto; position:relative; height:600px; background:url(../images/slideshow-shadow.jpg) no-repeat bottom center;}

#slideshow img { }

.slogan {position:absolute; z-index:900; right:0; bottom:160px; background:#043a3d; color:#fff; font-weight:normal; text-transform:uppercase; font-size:26px; padding:30px 60px;}

#content {padding:60px 0;}

.latest {clear:both; padding:0 0 30px 0; line-height:24px;}

.latest img {float:left; width:60px; margin:0 20px 0 0;}

.latest a {color:#0f83c5;}

.innerfade {background:url(../images/innerfade.jpg) no-repeat bottom center;}

.fencing {padding:30px 0 0 0;}

.fence { cursor:pointer; width:31.5%; height:200px; position:relative; float:left; margin:0 1.5% 30px 0;  text-align:center;}

.fence h3 {transition:all .5s; display:block; width:260px; left:50%; margin:0 0 0 -130px; padding:10px 0; background:url(../images/trans.png); line-height:20px; font-size:20px; position:relative; top:75px; color:#fff; text-shadow:1px 1px 1px #222;}

.fence img {transition:all .5s; background:#666; width:100%; height:auto; position:absolute; top:0; left:0; opacity:0.8; border:1px solid #ccc;}

.fence:hover img {opacity:1.0;}

.fence:hover h3 {background:#49b0a8;}

.fencing {display:none;}

#tubular, #lattice, #timber, #gates, #fittings, #coulourbond {display:none;}



.fence-nav {margin:0 0 0 0px;}

.fence-nav li {transition:all .5s; background:#095155; color:#fff; display:block; margin:0 0 10px 0; text-align:center; padding:15px 0;}

.fence-nav li:hover {background:#043a3d; cursor:pointer;}

.fence-nav li.active {background:#49b0a8;}

.fence-content {float:left; clear:both; width:95%; height:auto; margin:0 0 40px 0; padding:20px 0; position:relative; top:-40px;}

.hide {display:none;}

.post-summary {
    padding: 0 30px 0 0;
    position: relative;
    min-height: 155px;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 20px;
}
.post-summary img {float:left; margin:0 20px 20px 0;}

.post-summary h3 {margin:0 0 5px 0; font-size:20px;}

.post-summary span.date {position:absolute; top:0px; left:0px; padding:5px; background:#222; color:#24d4c6; font-size:13px;}

.post-summary  p {padding:10px 0 0 0;}

.post-summary .more {
    background: #118086;
    transition: all .5s;
    color: #fff;
    padding: 5px 10px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 30px 0 0 0;
}

.post-summary .more:hover {background:#0a494c;}

#footer-wrap{width:100%; background:#063538; height:200px; padding:0 0 0 0; }

.footer {width:1200px; height:200px; margin:0 auto; background:url(../images/footer.jpg) no-repeat;}

.footer-inner {width:1200px; height:100px; background:#0a494c; box-shadow:0 0 5px #222; margin:0 auto; position:relative; top:-20px; position:relative; z-index:300;}

.footer-shadow {width:1200px; height:32px; position:relative; z-index:200; top:-35px; background:url(../images/footer-shadow.png) no-repeat top center;}

.copy {float:left; color:#ccc; font-size:12px; padding:35px 0 0 20px; }

.designer {float:right; color:#ccc; font-size:12px; padding:35px 20px 0 0;}

.designer a {color:#ccc; text-decoration:none;}

.designer a:hover {color:#fff;}



#form {width:96%; float:left; }

#details {width:96%; float:right;}

.map {

	border-radius:8px;

	-moz-border-radius:8px;

	-webkit-border-radius:8px;

	padding:4px; 

	border:1px dashed #aaa;

	width:100%;

	height:300px;

}

.contact-form {width:98%;}

.contact-form input, .contact-form textarea { 

	width: 100% ; margin:0 0 15px 0; font-family: 'Didact Gothic', sans-serif; 

}

.contact-form textarea {height:180px;}

.contact-form label {display: block; margin-bottom: 5px; color:#333; font-size:16px; clear:both; padding:0 0 5px 0;  }

.contact-form .req {color:red;}

.contact-form { 

	margin: 30px 0 0 0;

	

}

.contact-form input, .contact-form textarea { 

	background: none repeat scroll 0 0 #FFFFFF; 

	border: 1px solid #C9C9C9; 

	color: #545658; 

	padding: 8px; 

	font-size: 14px; 

	border-radius: 2px 2px 2px 2px; 

}



#submit { 

	display:block;

	background: #777; 

	color: #fff; 

	cursor: pointer; 

	height: 30px; 

	padding: 0; 

	text-shadow: 0 1px 0 #000; 

	width: 105%; 

	position:relative;

	left:0px;

}

#submit:hover { 

	background: #999; 

	

}

ol{}
ol li{
	margin: 0 0 20px 20px;
}

.facebook {
	display: inline-block;
	zoom: 1;
	background: url(../images/facebook.png) center center no-repeat;
	padding: 2px 3px;
	text-indent: -9999px;
	width: 70px;
	height: 20px;
	line-height: 20px;
}

.postslist h2{
color: #363f49;
font-size: 24px;
margin: 20px 0 20px 0;
font-weight: bold;
line-height: 26px;

margin: 0 0 5px 0;
font-size: 20px;

color: #999;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 15px 0;
	border: none;
}

.posts{
	list-style: none;
	margin-bottom: 40px;
}
.posts li {
    border-top: 1px solid #f1f1f1;
}
.posts li a {
    color: #0a494c;
    display: block;
    padding: 7px 0;
    text-decoration: none;
    line-height: 20px;
	font-size: 15px;
}
.posts li a:hover{
	color: #118086
}

.post-summary p:first-child{
	overflow: hidden;
}




@media only screen and (max-width:1150px) {	

	.col-sm-12 {width:100%; overflow:hidden;}

	#nav {list-style-type:none; float:left; margin:0 0 0 0; padding:0 0 0 0;}

	#nav li {display:inline; margin: 0 0 0 0; }

	#nav li:last-child {padding:0 0 0 0; }

	#nav li a {transition:all .5s; display:inline-block; float:left; margin:0 0 0 0; border-left:1px solid #0c676c; color:#fff; 

	text-decoration:none; font-size:18px; line-height:18px; font-weight:normal; padding:20px 20px;}

	#nav li a.current, #nav li a:hover {color:#fff; background:#095155;}

	#nav li a.last {border-right:1px solid #0c676c;}

	.logo {float:left; margin:45px 0 0 20px;}

	.mobile {color:#fff; border:none; font-size:26px; float:right; margin:60px 40px 0 0; background:url(../images/mobile.png) no-repeat left center; padding:5px 0 5px 40px;}

	#slideshow {width:100%; height:500px; position:relative; left:0%; margin:0 0 0 0px; background:#1a1a1a url(../images/lideshow.jpg) repeat-x;}

	.inner-slideshow {width:100%; margin:0 auto; position:relative; height:600px; background:url(../images/lideshow-shadow.jpg) no-repeat bottom center;}

	.inner-slideshow img {width:1150px !important;}

	.slogan {position:absolute; z-index:900; right:0; bottom:160px; line-height:34px; background:#043a3d; color:#fff; font-weight:normal; text-transform:uppercase; font-size:26px; padding:30px 60px;}

	#footer-wrap{width:100%; background:#063538; height:100px; padding:0 0 0 0; }

	.footer {width:100%; height:100px; margin:0 auto; background:#063538 url(../images/ooter.jpg) no-repeat;}

	.footer-inner {width:100%; height:100px; background:#063538; box-shadow:0 0 0px #222; margin:0 auto; position:relative; top:-20px; position:relative; z-index:300;}

	.footer-shadow {display:none; width:100%; height:32px; position:relative; z-index:200; top:-35px; background:url(../images/footer-shadow.png) no-repeat top center;}

	.copy {float:left; color:#ccc; font-size:12px; padding:35px 0 0 20px; }

	.designer {float:right; color:#ccc; font-size:12px; padding:35px 20px 0 0;}

}

@media only screen and (max-width:1024px) {

	.tinynav {display:block; width:80%; margin:10px auto; padding:5px; font-size:18px;}

	#nav {display:none;}

	.col-sm-9 {width:96%; float:left; padding:0 2%;}

	.col-sm-3 {width:96%; float:left; clear:both; padding:2%;}

	#content {padding:60px 20px;}

	.fence { cursor:pointer; width:44%; height:200px; position:relative; float:left; margin:0 3% 30px 0;  text-align:center;}

	.col-sm-61 {width:100%; clear:both; float:left; margin:0 0 0 0;}

	.col-sm-62 {width:100%; clear:both; float:right; margin:0 0 0 0; padding:30px 0 0 0;}

}

@media only screen and (max-width:700px) {	

	.copy {float:none; width:100%; text-align:center; color:#ccc; font-size:12px; padding:25px 0 0 0px; }

	.designer {float:none; width:100%; text-align:center; color:#ccc; font-size:12px; padding:0px 0px 0 0;}

	.fence h3 {transition:all .5s; display:block; width:220px; left:50%; margin:0 0 0 -110px; padding:10px 0; background:url(../images/trans.png); line-height:18px; font-size:18px; position:relative; top:55px; color:#fff; text-shadow:1px 1px 1px #222;}



}	

@media only screen and (max-width:600px) {

	.mobile {display:none; color:#fff; border:none; font-size:26px; float:right; margin:60px 40px 0 0; background:url(../images/mobile.png) no-repeat left center; padding:5px 0 5px 40px;}

	.img-r {float:none; width:100%; margin:0 0 20px 0px; padding:4px; border:1px dashed #ccc;}

	.img-l {float:none; width:100%; margin:0 0 20px 0px; padding:4px; border:1px dashed #ccc;}

	#gallery .img-l {float:none; width:150px; margin:0 0 20px 0px; padding:4px; border:1px dashed #ccc;}

	.fence { clear:both; cursor:pointer; width:100%; height:200px; position:relative; float:left; margin:0 0 60px 0;  text-align:center;}

	.fence h3 {transition:all .5s; display:block; width:280px; left:50%; margin:0 0 0 -140px; padding:10px 0; background:url(../images/trans.png); line-height:20px; font-size:20px; position:relative; top:85px; color:#fff; text-shadow:1px 1px 1px #222;}



}

@media only screen and (max-width:500px) {

	.fence { clear:both; cursor:pointer; width:100%; height:200px; position:relative; float:left; margin:0 0 10px 0;  text-align:center;}

}

@media only screen and (max-width:400px) {

	.logo {max-width:300px;}

}

.post-summary h2{
	margin: 0 0 5px 0;
    font-size: 20px;
	border: none;
	text-transform: none;
}

.archive h2{

    color: #999;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 15px 0;
    border: none;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 25px;
}