/* Resets 
------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;} */

object,
embed {max-width: 100%;}

ul, ol {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't screw with your line-heights
gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* let's clear some floats */
.clear:before, .clear:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clear:after { clear: both; }

img { max-width: 100%;
	float: left;
	height: auto; }
	
hr { display:none; }

abbr,
acronym {
	border-bottom:1px dotted #ccc;
}

address { 
	font-style:normal; 
}

.hidden {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden; 
}

/* Main body 
-----------------------------------------------*/

body {
 	background-color: #333333;
 	color: #FFFFFF; 
 	font-family: 'Droid Sans', helvetica, arial, sans-serif;
 	font-size: 15px;
 	line-height: 26px;
	padding:0;
	margin:0;
}
a:link, 
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #c0c0c0;
}
a:hover, 
a:active {
	color: #C0C0C0;
	border-bottom: 1px solid #999999;
}
#body-content a {
	color:#40d8ff;
}

h1, h2, h3, h4 {
	color: #FFFFFF;
	font-family: 'Droid Serif', Georgia, serif;
	text-shadow: 1px 1px 1px #333333;
	font-weight: normal;
	padding-bottom: 10px;
}
h1, h2 {
	font-size: 26px;
	line-height: 36px;
}
h3, h4 {
	font-size: 20px;
	line-height: 30px;
}
p {
	padding-bottom: 10px;
	font-size: 14px;
}

/* Header
------------------------------------------------*/

#head-wrap {
	background-color:#262727;
	float: left;
	width: 100%;
}
#head-cont {
	width: 1080px;
	margin: 0 auto;
	background: #262727;
	position:relative;
}
#title {
	width: 280px;
	height: 90px;
	float: left;
	margin: 60px 0 40px;
	display:block;
	text-indent:-9999em;
	border:0;
	background: url('/images/poolworx-logo.png') top left no-repeat;
	background-size: 100%;
}
a:link.cover,
a:visited.cover,
a:link.mag,
a:visited.mag {
	width: auto;
	float: right;
	background: #555;
	text-decoration: none;
	border: 2px solid #666;
	margin-left: 20px;
	border-radius: 0 0 10px 10px ;
}
a:link.cover,
a:visited.cover {
	width: 120px;
	font-size: 18px;
	text-align: center;
	padding: 8px 10px 12px;
	font-family: 'Droid Serif', Georgia, serif;
	text-shadow: 1px 1px 1px #333333;
}
a:link.cover span {
	font-size: 30px;
}
a:link.mag,
a:visited.mag {
	width: 138px;
	padding: 10px 12px 13px 3px;
}

/* ---------------- cookies --------------- */

div.cookie_banner{width:100%;position:fixed;bottom:0;left: 0;z-index:20000;background-color:#000;text-align: center;padding:10px 0;border-top:1px solid #999;}div.cookie_banner #cookie_text{max-width:680px;width: 94%;font-size:13px;margin:0 auto;padding:10px 3%;}button.consent{width:100px;border: 0;padding: 5px;background-color:#40d8ff;margin: 0 auto;display:block;color:#000;}div.cookie_banner a{color:#40d8ff}

/* Navigation
------------------------------------------------*/

nav {
	float: right;
	width: auto;
	margin: 25px 0 15px;
}
nav ul#main {
	color: #FFFFFF;
	font-family: 'Droid Serif', Georgia, serif;
	text-shadow: 1px 1px 1px #222222;
	float: left;
}
nav ul#main li {
	width: auto;
	float: left;
	font-size: 15px;
	padding: 5px 15px;
}
nav ul#main li a {
	text-decoration: none;
	border:0;
}
nav ul#main li:first-of-type {
	padding-left: 0;
}
nav ul#main li:last-of-type {
	padding-right: 0;
}
nav ul#main li ul {
	margin: 10px 0 0 -50px;
	padding: 0px 5px;
	width: 155px;
	font-family: 'Droid Sans', helvetica, arial, sans-serif;
	text-align: center;
	position: absolute;
	z-index: 1000;
	visibility: hidden;
	background-color: rgba(39, 39, 39, 0.85);
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}
nav ul#main li ul li {
	float: none;
	padding: 5px 0;
	width: 100%;
	height: 30px;
	line-height: 30px;
	display: block;
	border: 0;
	border-bottom: 1px solid #FFF;
}
nav ul#main li ul li:last-of-type {
	border-bottom: 0;
}
nav ul#main li ul li a {	
	width: 100%;
	padding: 0;
}		
nav ul#main li ul li a:hover {
	color: #C0C0C0;
}

/* Media queries
------------------------------------------------*/

@media screen and (min-width:525px) {
	p.reveal {
		display:none;
	}	
	.nav_hidden {
		display:block;
	}
}
p#tel {
	width: auto;
	float: right;
	font-size: 16px;
}
p#tel a {
	color:#40d8ff;
	border:0;
}
/* p#email a {
	right:177px;
}
#head-cont p {
	padding:0;
} */
#slate-strip {
	height: 30px;
	background: #444444 url('/images/slate-bg.jpg') bottom left repeat-x;
	width: 100%;
	float: left;
}

/*---------------------body----------------------------*/

#body-wrap {
	background-color: #444444;
	width: 100%;
	float: left;
}
#body-content {
	background-color: #444444;
	background-size: 100%;
	margin: 0px auto;
	width: 1080px;
	padding: 30px 0;
}
.left-col {
	width: 31%;
	margin-right: 2%;
	float: left;	
}
.centre-col {
	width: 31%;
	margin-right: 2%;
	float: left;
}
.right-col {
	width: 31%;
	float: right;
}
.double-col {
	width: 66%;
	float: left;
}
.left-col img {
	margin-bottom: 30px;
}
.half {
	width: 48%;
	margin: 0 1% 30px;
	float: left;
}
p.intro {
	font-size: 15px;
	line-height: 26px;
	font-family: 'Droid Serif', Georgia, serif;
}
.feature-box {
	background-color: #555555;
	border: 1px solid #3a3a3a;
	float: left;
	width: 288px;
	padding: 20px;
	margin-bottom: 25px;
}
.feature-box h2, .feature-box h1 {
	padding-bottom: 5px;
	color: #fff;
}
.feature-box h2 a, 
.feature-box h2 a:visited {
	color: #222222;
	border: 0;
}
.feature-box h2 a:hover, 
.feature-box h2 a:active {
	color: #353535;
}

.feature-box p {
	padding-bottom: 8px;
}
.feature-box ul {
	padding-bottom: 8px;
	list-style: circle;
	margin-left: 15px;
}
.feature-box ul li {
	padding-top: 10px;
}
img.feature {
	float: right;
	width: 298px;
	border: 2px solid #333;
	margin-bottom: 20px;
}
img.feature:last-of-type {
	margin-bottom: 0;
}
.feature-sub {
	width: 300px; 
	float: left;
}
.wide {
	width: 663px;
}
img#mb {
	padding: 5px 15px 0 0;
}

/*---------------------buttons----------------------------*/

a.service, a:visited.service {
	float: left;
	margin: 20px 2px 0px;
	background-image: url('/images/buttons.png');
	background-color: #444444;
	background-repeat: no-repeat;
	height: 32px;
	width: 246px;
	background-position: 0px 0px;
	border: 0;
}
a:hover.service, a:active.service {
	background-position: 0px -32px;
}
a.service span {
	line-height: 32px;
	padding: 0px 15px;
	font-family: 'Droid Serif', Georgia, serif;
	font-size: 15px;
	text-shadow: 1px 1px 1px #222222;
}
/*---------------------slideshow----------------------------*/

#slide-wrap {
	background: #494949 url('/images/slate-bg.jpg') repeat-x;
	padding: 30px 0px;
	height: 399px;
	width: 100%;
	float: left;
}
#slideshow {
 	width: 1080px;
 	height: 399px;
 	margin: 0px auto;
}
#slideshow img.bracket {
	padding-top: 9px;
	margin-right: 20px;
}
ul#slider {
 	height: auto;
  float: left;
}
ul#slider li {
 	float: left;
 	list-style: none outside none;
 	overflow: hidden;
}
.slide-text {
	background-color: rgba(255,255,255,0.75);
	width: 1080px;
	height: 50px;
	margin-top: 349px;
	position: absolute;
	color: #333333;
}
.slide-text p {
	line-height: 18px;
	padding-top: 7px;
	padding-right: 15px;
	font-size: 12px;
}
p.slide-title {
	font-family: 'Droid Serif', Georgia, serif;
	font-size: 15px;
	width: 240px;
	float: left;
	padding: 16px 8px;
}

/*---------------------home----------------------------*/

img#spata {
	margin: 10px 20px 10px 0;
}
p#award {
	margin-top: 30px;
	font-size: 22px;
	line-height: 30px;
}

/*--------------------- project slider ---------------------------*/

#slideshow-project {
 	width: 630px;
 	height: 424px;
 	float: left;
}
ul#project {
 	height: 424px;
  	float: left;
}
ul#project li {
 	float: left;
 	list-style: none outside none;
 	overflow: hidden;
}
#slider2 {
	width: 100%;
	float: left;
	margin:0;
	padding:0;
} 
.slide-project {
	width: 630px;
	height: 424px;
	float: left;
	background-color: #444;
}
.slide-project img {
	float: left;
	max-width: 100%;
}
a.bx-prev,
a.bx-next {
	border: 0;
}
.thumbs img {
	max-width:90px;
}
.thumbs a {
	width: 90px;
	float: left;
	margin-right: 10px;
	margin-top: 10px;
	border: 0;
}
a.gal-thumbs {
	float:left;
	border:1px solid #999;
	margin: 0 20px 20px 0;
}
img.phone {
	display: none;
}

/*---------------------news page----------------------------*/

#pageintro {
	width: 600px;
	float: left;
	margin-bottom: 20px;
}
ul#news {
	width: 100%;
	float: left;
}
ul#news li,
.news-container {
	width: 100%;
	float: left;
	border-bottom:1px solid #555;
	margin-bottom:20px;
}
ul#news li:nth-of-type(1) {
	border-top:1px solid #555;
	margin-top:20px;
	padding-top:19px;
}

.news-img {
	width: 31%;
	float: right;
	margin-bottom: 30px;
}
.news-img img {
	margin-bottom: 20px;
}
.news-article {
	width: 705px;
	float: left;
	margin-bottom: 20px;
}
.news-img a {
	border: 0;
}

ul.page-numbers {
	list-style: none;
	float: right;
	margin: 20px 0px;
}
ul.page-numbers li {
	display: inline;
	padding: 0px 5px;
}
#article-cont {
	width: 600px;
	float: left;
}
#article-archive {
	width: 285px;
	float: right;
}
p.archive-link {
	text-align: right;
}
#article-cont ul,
#article-cont ol,
.news-article ul,
.news-article ol {
	margin: 0px 50px 20px;
}

body#sitemap .news-article ul {
	margin:0;
	padding:0;
}

body#sitemap .news-article ul li {
	margin:0;
	padding:0;
	font-size:15px;
	line-height:160%;
}

/*---------------------showcase main----------------------------*/

.showcase-thumb {
  width: 150px;
  height: 150px;
  float: left;
  overflow: hidden;
  position: relative;
  margin: 0 32px 32px 0;
  text-align: center;
  cursor: default;
}
.showcase-thumb:nth-of-type(4n) {
	margin-right: 0;
}
.showcase-thumb .mask {
   width: 150px;
   height: 100px;
   position: absolute;
   overflow: hidden;
   top: 50px;
   left: 0;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(255,255,255, 0.75);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
showcase-thumb .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.showcase-thumb img {
   display: block;
   position: relative;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.showcase-thumb h2 {
   color: #333333;
   text-shadow: none;
   text-align: center;
   position: relative;
   font-size: 16px;
   line-height: 20px;
   font-weight: normal;
   padding: 10px;
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.showcase-thumb a.info {
   display: inline-block;
   text-decoration: none;
   border: 0;
   padding: 2px 0px;
   width: 125px;
   color: #494949;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.showcase-thumb a.info:hover {
	background-color: rgba(0,0,0, 0.75);
	color: #FFFFFF;
}
.showcase-thumb:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.showcase-thumb:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.showcase-thumb:hover h2,
.showcase-thumb:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.showcase-thumb:hover a.info {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
/*---------------------showcase project page----------------------------*/

#gallery-container {
	width: 680px;
	overflow:hidden;
	float: right;
	margin-bottom:30px;
}

/*---------------------testimonial----------------------------*/
p.customer-name {
	text-align: right;
	font-style: italic;
}
img.testimonial:nth-of-type(odd) {
	margin-right: 30px;
}

/*--------------------- Safety Covers ----------------------------*/
ul.cover-features span {
	font-family: 'Droid Serif', Georgia, serif;
	font-size: 15px;
	text-shadow: 1px 1px 1px #333333;
}
ul.cover-features li {
	margin-top: 10px;
	padding-left: 50px;
	list-style: none;
}
.cover-gal {
	float: left;
	width: 100%;
}
.cover-gal ul {
	width: 100%;
	float: left;
	list-style: none;
	margin-left: 0;
}
.cover-gal ul li {
	float: left;
	padding-right: 15px;
	padding-bottom: 15px;
}
.cover-gal a {
	border: 0;
}
.cover-gal ul li:nth-of-type(5n) {
	padding-right: 0;
}
ul.cover-features li#energy {
	background: url('/images/energy-saving.png') top left no-repeat;
}
ul.cover-features li#water {
	background: url('/images/save-water.png') top left no-repeat;
}
ul.cover-features li#clean {
	background: url('/images/pool-clean.png') top left no-repeat;
}
ul.cover-features li#equipment {
	background: url('/images/save-equipment.png') top left no-repeat;
}
ul.cover-features li#money {
	background: url('/images/save-money.png') top left no-repeat;
}

/*---------------------extras----------------------------*/

.product-shot {
	width: 304px;
	float: left;
	padding: 10px;
	background-color: #5e5e5e;
	margin-top: 15px;
}
.product-shot figcaption {
	width: 100%;
	float: left;
	padding-top: 10px;
	text-align: center;
}
.product-shot figcaption h2 {
	font-size: 20px;
	line-height: 30px;
}
ul#products {
	padding-bottom: 8px;
	list-style: circle;
	margin-left: 15px;
	font-size: 13px;
	line-height: 22px;
}
.prodwide {
	width: 642px;
}
.prodwide img {
	width: 100%;
}
.prodwide figcaption {
	width: 96%;
	padding: 0 2%;
	float: right;
}
ul#products li {
	padding-top: 10px;
}
.left {
	margin-right: 15px;
}
iframe#cleaner {
	width: 100%;
	height: 400px;
}
#approved {
	width: 100%;
	float: left;
}
#approved img {
	margin: 30px 30px 0 0;
}
#approved p {
	width: 300px;
	float: left;
}

/*--------------------- design pool ----------------------------*/

img#maglogo {
	width: 33%;
	float: right;
	margin: 0 1% 30px;
}
ul#des {
	width: 100%;
	float: left;
}
ul#des li {
	width: 100%;
	float: left;
	margin-bottom: 30px;
}
p.designdet {
	color: #40d8ff;
	font-size: 26px;
	font-family: 'Droid Serif', Georgia, serif;
	width: 87%;
	padding: 20px 3% 20px 10%;
} 

.general_shape {
	color: #40d8ff;
    font-size: 26px;
    font-family: 'Droid Serif', Georgia, serif;
	background-color: #555555;
	padding: 20px 3%;
	width: 96%;
}

p.shape {
	background: #555555 url(/images/icon-shape.png) center left no-repeat;
	background-size: 65px;
}
p.stairs {
	background: #555555 url(/images/icon-stairs.png) center left no-repeat;
	background-size: 65px;
}
p.liners {
	background: #555555 url(/images/icon-liner.png) center left no-repeat;
	background-size: 65px;
}
p.filter {
	background: #555555 url(/images/icon-filter.png) center left no-repeat;
	background-size: 65px;
}
p.auto {
	background: #555555 url(/images/icon-auto.png) center left no-repeat;
	background-size: 65px;
}
p.heat {
	background: #555555 url(/images/icon-heat.png) center left no-repeat;
	background-size: 65px;
}
img.arrow_image {
	width: auto;
	float: right;
}
.design {
	width: 30%;
	padding: 2%;
	float: left;
}
ul#des li img {
	width: 66%;
	float: right;
}
ul#des li img.desim {
	width: 100%;
	margin-bottom: 20px;
	float: left;
}
iframe#magivid {
	width: 66%;
	float: right;
	height: 420px;
}

/*--------------------- find & contact ----------------------------*/
.left-col dt, .left-col dd {
	float: left;
}
p.small {
	width: 400px;
	float: left;
	font-size: 12px;
}
#form-submit {
	clear: both;
}
form {
	margin-bottom: 30px;
}
form#contact-form {
	width: 60%;
	float: left;
}
.submit {
	float: left;
	margin: 20px 2px 0px;
	background-image: url('/images/buttons.png');
	background-color: #444444;
	background-repeat: no-repeat;
	height: 32px;
	width: 120px;
	background-position: 0px -64px;
	border: 0;
	color: #FFFFFF;
	line-height: 32px;
	padding: 0px 15px;
	font-family: 'Droid Serif', Georgia, serif;
	font-size: 15px;
	cursor: pointer;
	text-shadow: 1px 1px 1px #222222;
}
textarea, input {
	background-color: #C0C0C0;
	border: 0;
	margin-bottom:8px;
	padding: 5px 8px;
	width: 96%;
	float: left;
	clear: both;
}
form#contact-form p.required {
	background-color:#B50808;
	color:#fff;
	line-height: 1.5;
    margin:8px 0 0 0;
    padding:2px 5px;
	font-size:11px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	width:60%;
	min-width:200px;
	display:block;
	position:relative;
}
p.data_msg {
	color: #FFF;
	width: 80%;
	float: right;
	clear: none;
	font-size: 13px;
	line-height: 20px;
}
.check_area {
	width: 20%;
	padding-top: 10px;
	float: left;
	text-align: left;
}
.check_area label {
	clear: none;
	width: 50%;
	text-align: left;
	float: left;
}
.check_area input {
	padding: 0;
	width: 20%;
	float: left;
}

body#home .left-col h2 {
	margin:10px 0;
}
body#home .left-col h3 {
	padding-bottom:8px;
}
#map_canvas {
	width:600px;
	height:350px;
	float:left;
	display:block;
	border:1px solid #111;
}

/* Footer
-----------------------------------------------*/
#foot-wrap {
	background-color: #313131;
	width: 100%;
	float: left;
}
#foot-cont {
	width: 1080px;
	padding: 30px 0;
	margin: 0 auto;
}
#foot-cont .left-col dt {
	font-family: 'Droid Serif', Georgia, serif;
	width: 50px;
	float: left;
	clear: both;
}
#foot-cont .left-col dd {
	width: auto;
	float: left;
}
#foot-wrap p span {
	font-family: 'Droid Serif', Georgia, serif;
	font-size: 15px;
}
#sub-foot {
	width: 1080px;
	margin: 10px auto;
	text-align: right;
	font-size: 11px;
}
#sub-foot li {
	float:right;
	margin:0 0 10px 20px;
	font-size: 11px;
}

/*------------------------------------- < 1100px ----------------------------------- */

@media screen and (max-width: 1100px) {
	#body-content,
	#head-cont,
	#sub-foot,
	#foot-cont {
		width: 96%;
		padding: 20px 2%;
		float: left;
	}
	#head-cont {
		padding: 0 2%;
	}
	#title {
		width: 30%;
		margin: 10px 0 0;
	}
	#cover-tab a {
		right: 20px;
	}
	nav {
		width: 100%;
		margin: 0;
		text-align: center;
	}
	nav ul#main {
		float: right;
	}
	/*nav ul#main li {
		width: 120px;
		padding: 6px 0;
		text-align: center;
	} */
	#cover-tab a {
		width: 100px;
		height: 120px;
		background-size: 100%;		
	}
	#slide-wrap {
		height: 300px;
	}
	#slideshow {
		width: 768px;
		height: 284px;
		margin: 0 auto;
	}
	.slide-text {
		width: 768px;
		margin-top: 235px;
	}
	.slide-text p {
		line-height: 18px;
		padding-top: 7px;
		padding-right: 10px;
		font-size: 11px;
	}
	p.slide-title {
		font-size: 15px;
		width: 150px;
		padding: 8px;
	}
	.left-col,
	.centre-col {
		width: 30%;
		float: left;
		margin-right: 3%;
	}
	.right-col {
		width: 30%;
		float: left;
	}
	.feature-box {
    width: 90%;
    padding: 5%;
    margin-bottom: 25px;
	}
	.feature-sub {
		width: 100%;
	}
	.wide {
		padding: 2%;
	}
	#map_canvas {
		width: 100%;
	}
	form#contact-form,
	#pageintro,
	.double-col,
	.news-article,
	#gallery-container {
		width: 66%;
	}
	#slideshow-project {
		width: 100%;
		float: left;
		height: auto;
	}
	.product-shot {
		width: 45%;
		padding: 2%;
	}
	iframe#cleaner {
		height: 280px;
	}
	iframe#magivid {
		height: 300px;
	}
	.left {
		margin-right: 2%;
	}
	.thide {
		display: none;
	}
}

/*------------------------------------- < 768px ------------------------------------ */

@media screen and (max-width:768px) {
	h1, h2 {
		font-size: 20px;
		line-height: 30px;
	}
	h3, h4 {
		font-size: 18px;
		line-height: 28px;
	}
	#title {
		height: 70px;
	}
	nav {
		width: auto;
		float: left;
		margin: 0;
		clear: both;
	}
	nav p.reveal {
		padding:0;
		clear: both;
		display:block;
		float: left;
		width: auto;
	}
	nav p.reveal a {
		padding: 6px 10px 5px 35px;
		display:block;
		background: url('/images/menu_icon.png') center left no-repeat;
		font-family: 'Droid Serif', Georgia, serif;
		font-size: 16px;
		text-decoration:none;
		border: 0;
	}
	nav p.reveal a:hover {
		color: #EFEFEF;
		text-decoration:underline;
	}
	nav .nav_hidden {
		display:none;
	}
	nav ul#main {
		position: absolute;
		z-index: 100;
		width: 192px;
		margin-top: 50px;
		background-color: rgba(39, 39, 39, 0.85);
		font-size: 13px;
		line-height: 22px;
		border-top: 1px solid #FFF;
	}
	nav ul#main li {
		float:none;
		width:100%;
		text-align: left;
		margin:0;
		padding:0;
	}
	nav ul#main li a:link,
	nav ul#main li a:visited {
		width:172px;
		height:auto;
		float: none;
		padding:10px 10px 8px;
		margin:0;
		color:#fff;
		background-image:none;
		border-bottom: 1px solid #FFF;
		display:block;
	}
	nav ul#main li ul {
		margin: -5px 0 0 10px;
		font-size: 13px;
		line-height: 22px;
		width: 250px;}

	nav ul#main li ul li {
		padding: 0;
		width: 100%;
		height: auto;
		line-height: 22px;
		border: 0;}
		
	nav ul#main ul li a:link,
	nav ul#main ul li a:visited {
		width: 210px;
	}
	p#tel {
		padding: 10px 0;
	}
	#slide-wrap {
		height: 300px;
	}
	#slideshow {
		width: 524px;
		height: 284px;
	}
	.bx-wrapper img.bar,
	.bx-wrapper img.bracket {
		display: none;
	}
	.slide-text {
		width: 500px;
		height: auto;
		padding: 10px 12px;
		margin-top: 118px;
		position: static;
	}
	.slide-text p {
		line-height: 18px;
		padding: 0;
		font-size: 11px;
	}
	p.slide-title {
		font-size: 13px;
		width: 100%;
		padding: 0 0 8px 0;
	}
	.left-col,
	.centre-col,
	.right-col,
	.half {
		width: 96%;
		padding: 0 2%;
		margin: 0 0 2% 0;
	}
	.feature-box {
		width: 96%;
		padding: 14px 2%;
	}
	.feature-box img {
		width: 49%;
		float: right;
	} 
	.ftext {
		width: 49%;
		float: left;
	}
	.double-col {
		width: 100%;
	}
	.news-img {
		width: 96%;
		margin: 0 2% 10px;
	}
	form#contact-form,
	#pageintro,
	#gallery-container,
	.news-article {
		width: 96%;
		padding: 0 2%;
		float: left;
		margin-bottom: 15px;
	}
	.showcase-thumb {
		width: 112px;
		height: 112px;
		margin: 0 12px 12px 0;
	}
	.showcase-thumb:nth-of-type(4n) {
		margin-right: 0;
	}
	.showcase-thumb:nth-of-type(4n+1) {
		clear: both;
	}
	.showcase-thumb .mask {
		 width: 120px;
		 height: 100px;
		 top: 50px;
   }
   iframe#cleaner {
   	height: 260px;
   }
  .product-shot {
  	width: 44%;
  	padding: 10px 2%;
  }
  .product-shot img {
  	width: 100%;
  }
  .prodwide {
		width: 458px;
	}	
	#foot-cont {
		width: 96%;
		padding: 20px 2%;
	}
	.slide-project {
    height: 364px;
    width: 100%;
	}
	.wide {
		width: 96%;
		padding: 10px 2%;
	}
	.cover-gal ul li {
		width: 23%;
		padding: 0;
		margin: 0 2% 2% 0;
	}
	.cover-gal ul li img {
		width: 100%;
	}
	.design {
		width: 100%;
	}
	p.designdet {
    width: 79%;
    padding: 20px 3% 20px 18%;
  }
  ul#des li img {
    width: 100%;
    float: right;
	}
  .destext {
  	width: 48%;
  	float: left;
  }
  ul#des li img.desim {
  	width: 48%;
  	float: right;
  	margin: 0 2% 20px;
  }
  iframe#magivid {
		width: 100%;
		height: 420px;
	}
	img.feature,
	.feature-sub {
		width: 49%;
	}
	#map_canvas {
		width:100%;
		height:350px;
	}
	form#contact-form {
		width: 90%;
	}
	.check_area label {
		clear: none;
		width: 100%;
		text-align: left;
		float: left;
	}
}

/*--------------------------------------- < 524px ------------------------------------- */

@media screen and (max-width:524px) {
	#title {
		margin: 10px 0;
		height: 50px;
	}
	a:link.cover,
	a:visited.cover {
		width: 100px;
		font-size: 13px;
		line-height: 20px;
		padding: 6px 8px 8px;
	}
	a:link.cover span {
		font-size: 20px;
	}
	a:link.mag,
	a:visited.mag {
		width: 100px;
		padding: 10px 12px 10px 3px;
		margin-left: 10px;
	}
	#slide-wrap {
		height: 235px;
	}
	#slideshow {
		width: 300px;
		height: 200px;
	}
	.slide-text {
		width: 280px;
		padding: 10px;
	}
	.bx-wrapper img.bar,
	.bx-wrapper img.bracket {
		display: none;
	}
	.feature-box {
		width: 92%;
		padding: 4%;
	}
	.ftext,
	.feature-box img {
		width: 100%;
	}
	a.service, a.service:visited {
		margin: 10px 0;
	}
	h1.news_header {
		margin-left: 0;
	}
	.news-img {
		width: 90px;
		float: left;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.news-article {
		margin-bottom: 10px;
	}
	.slide-project {
    height: 217px;
	}
	.feature-sub {
		width: 100%;
	}
	a.gal-thumbs {
		display: none;
	}
	img.phone {
		display: inline;
		margin-bottom: 20px;
	}
	iframe#cleaner {
		height: 200px;
	}
	.product-shot {
  	width: 260px;
  }
  .prodwide figcaption {
		width: auto;
	}
	.destext {
		width: 96%;
	}
	ul#des li img {
		width: 100%;
		margin: 0;
	}
	p.designdet {
		font-size: 20px;
		padding: 15px 3% 15px 18%;
	}
	iframe#magivid {
		height: 280px;
	}
	/* p.details_accordian {
		font-size: 20px;
		width: 80%;
		padding: 20px 3% 20px 17%;
	} */
	p.shape,
	p.stairs,
	p.liners,
	p.filter,
	p.auto,
	p.heat {
		background-size: 12%;
	}
	ul#des li img.desim {
  	width: 96%;
  	margin: 0 2% 10px;
  }
	#map_canvas {
		height:350px;
	}
}

/*--------------------------------------- < 400px ------------------------------------- */

@media screen and (max-width:400px) {
	nav {
		clear: none;
		float: right;
	}
	a:link.cover,
	a:visited.cover,
	a:link.mag,
	a:visited.mag {
		display: none;
	}
}