@import url('reset.css');


body {
	font: 12px/18px Arial, Helvetica, sans-serif;
	color: #575656;
	background: #131920;
}

.wrapper { 
	background: #082232;
}

.wrapper-inner {
	background: url(../images/bg-wrapper2.jpg) center top no-repeat;
}

a { color: #184b69; text-decoration: none; }
a:hover { text-decoration: underline; }

blockquote, .tagline {
	font-size: 20px;
	font-weight: bold;
	line-height: 26px;
	color: #184b69;
	margin-bottom: 25px;
}

body.home .hide { display:none!important; }
.floatleft {float:left;}
.floatright { float:right;}
.imageright {float:right; margin: 0 0 25px 25px; }
.imageleft {float:left; margin: 0 25px 25px 0; }

.nobg { background:none!important;}
.half-col { width:49%;}

.marginBot30 { margin-bottom:30px; }
.marginBot20 { margin-bottom:20px!important; }
.paddingBot30 { padding-bottom:30px!important; }

.size16 { font-size:16px!important; line-height:20px!important;}
.size18 { font-size:18px!important; line-height:24px!important;}
.size22 { font-size:22px!important; line-height:28px!important;}
.size28 { font-size:28px!important; line-height:34px!important;}
.size40 { font-size:40px!important; line-height:48px!important;}

.contact .side-column { padding-top:34px;}

.w-480, .w-mobile-banner { display:none;}
body.home .homenoshow { display:none;}
.marginB15 { margin-bottom:15px;}

a[href^="tel:"] { color:#575656!important; text-decoration:none!important; cursor:default!important; }
a[href^="tel:"]:hover {color:#575656!important; text-decoration:none!important;}
.content a[href^="tel:"] { font-weight:normal!important; }

/*-----------------------------------------------------
	header
-----------------------------------------------------*/
.header {	width: 980px; margin: 0 auto;	position: relative;	height: 110px;}
.header ul { position: absolute;	left:255px;	bottom:12px; z-index:99; }
	.header ul#nav-top { top:34px; left:255px; bottom:0;}
	
/*	firefox */
@-moz-document url-prefix() {
	.header ul{ left:250px;	 }
	.header ul#nav-top { left:250px; }
	.header p { right:30px!important; }
}

.header p { 	position: absolute;	right: 25px;	 top: 35px;	font-size: 16px; color: #909EA5;	text-align:right;}
.header p strong {	font-size: 22px;	color: #fff!important;}
.header p a, .header p a:hover { color:#fff!important;}
.header .logo { width:180px; margin-left:-15px; }

.logo-hide { display:none;}
.logo-show { display:block;}

.header a[href^="tel:"] { color:#fff!important; }
.header a[href^="tel:"]:hover { color:#fff!important; }

.header li {	position: relative;	float: left;	display: inline;	margin: 0;}
.header li a {	height: 27px;	display: block; padding-left: 13px;	text-decoration: none;	color: #fff;	font-size: 14px;line-height: 14px;	cursor: pointer;}
.header li a span { display: block; padding: 7px 13px 0 0;	display: block;	height: 20px;	cursor: pointer;}
.header li a:hover, .header li a.active, .header li:hover > a  {	background: url(../images/nav-left.png) left top no-repeat;}
.header li a:hover span, .header li a.active span, .header li:hover > a span {	background: url(../images/nav-right.png) right top no-repeat;}

.header li ul { position: absolute;	top: 25px; padding-top:3px; left: 0; width:60px; bottom:0px!important; display: none;  }
.header ul li:hover > ul {	display: block; }


.header li li { display:block; margin:0; padding:2px 0;}
.header li li a { width:60px; background: url(../images/nav-left.png) left top no-repeat;}
.header li li a span {background: url(../images/nav-right.png) right top no-repeat; }
.header li li a:hover, .header li li a.active {	background: url(../images/nav-left-sub.png) left top no-repeat;}
.header li li a:hover span, .header li li a.active span {	background: url(../images/nav-right-sub.png) right top no-repeat;}

body.home .header .nav-home,
body.about .header .nav-about,
body.services .header .nav-services,
body.portfolio .header .nav-portfolio,
body.health .header .nav-healthcheck,
body.seven .header .nav-seven,
body.news .header .nav-news,
body.seo .header .nav-seo,
body.sem .header .nav-sem,
body.design .header .nav-design,
body.contact .header .nav-contact,
body.perth .header .nav-perth,
body.testimonials .header .nav-testimonials,
body.workshops .header .nav-workshops { background: url(../images/nav-left.png) left top no-repeat;}

body.home .header .nav-home span,
body.about .header .nav-about span,
body.services .header .nav-services span,
body.portfolio .header .nav-portfolio span,
body.health .header .nav-healthcheck span,
body.seven .header .nav-seven span,
body.news .header .nav-news span,
body.seo .header .nav-seo span,
body.sem .header .nav-sem span,
body.design .header .nav-design span,
body.contact .header .nav-contact span,
body.perth .header .nav-perth span,
body.testimonials .header .nav-testimonials span,
body.workshops .header .nav-workshops span { background: url(../images/nav-right.png) right top no-repeat; }

/*.header .dropdown-services ul, .header .dropdown-services li a { width:200px!important;}*/
/*.header li a.active {	font-weight: bold;	color: #72bf44;}

.header li a.active:hover { background:none; }
.header li a.active:hover span { background:none; }*/


/*-----------------------------------------------------
	buttons
-----------------------------------------------------*/
a.button {
	background: url(../images/button-left.png) left top no-repeat;
	height: 40px;
	display: block;
	padding-left: 18px;
	text-decoration: none !important;
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	cursor: pointer;
}

a.button span {
	background: url(../images/button-right.png) right top no-repeat;
	display: block;
	padding: 12px 45px 0 0;
	display: block;
	height: 28px;
	cursor: pointer;
}

a.button:hover { background-position: left -40px; }
a.button:hover span { background-position: right -40px; }



/*-----------------------------------------------------
	banner
-----------------------------------------------------*/
.banner {
	width: 960px;
	padding-bottom:500px;
	height:0;
	overflow: hidden;
	margin: 0 auto;
	position:relative;

}
.banner img {  } 


/*-----------------------------------------------------
	ctas
-----------------------------------------------------*/
.ctas {
	width: 960px;
	margin: -28px auto 0 auto;
	z-index: 200 !important;
	position: relative;
}

.ctas div.clickable-panel {
	color: #909ea5;
	background:#151E22;
	width: 200px;
	float: left;
	display: block;
	height: 220px;
	padding: 0 50px  0 70px;
	cursor: pointer;
	text-decoration: none !important;
}

.ctas h2 a {
	padding: 32px 0 15px 65px;
	font-size: 18px;
	line-height: 22px;
	font-weight: bold;
	display: block;
	color: #909ea5;
	text-decoration: none;
}

.ctas .cta-ecom h2 a {
	padding-top: 42px;
	padding-bottom: 27px;
}

.ctas .cta-web h2 a { background: url(../images/cta-web.png) left 28px no-repeat; }
.ctas .cta-seo h2 a { background: url(../images/cta-seo.png) left 28px no-repeat; }
.ctas .cta-ppc h2 a { background: url(../images/cta-ppc.png) left 28px no-repeat; }
.ctas .cta-ecom h2 a { background: url(../images/cta-ecom.png) left 28px no-repeat; }

.ctas div:hover { background-position: -240px 0; color: #fff; }
.ctas div:hover a { color: #fff !important; }
.ctas div.activeSlide { background-position: -480px 0 !important; color: #fff; }
.ctas div.activeSlide a { color: #fff !important; }

.ctas div:hover h2 a { background-position: left -72px; }
.ctas div.activeSlide h2 a { background-position: left -72px; }

.ctas a { display: none; }

.ctas div a.cta-button {
	display: block;
	margin: 10px 0 10px 25px;
	color: #909ea5;
	font-weight: bold;
	padding: 5px 10px;
	background: #212e34;
	border-radius: 4px;
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	float: left;
	text-decoration: none;
}

.ctas div:hover a.cta-button { background: #28363d; }

.ctas div.activeSlide a.cta-button { background: #84d753; }



/*-----------------------------------------------------
	Banner 
-----------------------------------------------------*/
.content-top { width:100%; height: 230px; margin:0 auto;  background: url(../images/bg-content-inner.png) center bottom no-repeat; overflow:hidden; }
	
	
.banner-show { width:100%; clear:both; overflow:hidden; display:block; padding-top:15px; height:400px;} /* home banner changes on page load*/
.banner-show .random-banner { display:none;}

	body.home-inner .banner-show { height:320px;}

.content-banner { width:960px; padding:30px 0 0 0;  margin:0 auto; clear:both; }	
.content-banner .screenshot { margin-left:40px; float:left; }
.content-banner .quote-text { margin-left:30px; margin-top:60px; float:left; }
.content-banner .full-testimonial { float:right; padding-top:10px; }

.hba .screenshot { }
.hba .quote-text  { margin-top:50px; }

.pll .screenshot { }
.pll .quote-text  {   margin-top:30px;}


body.home .ozair .screenshot { margin-left:40px;   }
body.home .ozair .quote-text  {   margin-left:30px;  margin-top:40px; }

	.ozair .screenshot { margin-left:20px;}
	.ozair .quote-text  {  margin-top:30px; margin-left:20px;  }

.booktobalance .screenshot { margin-left:30px; }
.booktobalance .quote-text { }

.per-tiling .screenshot { margin-left:30px; }
.per-tiling .quote-text {  margin-top:40px; }

.directiondesign .screenshot {  margin-left:5px; }
.directiondesign .quote-text  { margin-left:15px;  margin-top:40px; }

.imagebollards .screenshot { width:100%; text-align:center; margin:0px;}
.imagebollards .quote-text { width:100%; text-align:center; margin:0px; }

.bizlink .screenshot {   }
.bizlink .quote-text { margin-top:30px;}

.cableair .screenshot { margin-left:10px; }
.cableair .quote-text {  margin-left:30px;  margin-top:25px;  padding-bottom:30px; }

body.home .grassscapes .screenshot { margin-top:0px;  }
body.home .grassscapes .quote-text { margin-top:30px;}

	.grassscapes .screenshot { margin-top:10px;  }
	.grassscapes .quote-text { margin-top:40px;}
	
body.home .kitchensdirect .screenshot {   }
body.home .kitchensdirect .quote-text { margin-top:30px;}

	.kitchensdirect .screenshot { margin-top:10px; }
	.kitchensdirect .quote-text { margin-top:40px; }

.aba .screenshot { margin-left:25px; margin-top:10px;}
.aba .quote-text  { margin-top:30px; }

body.testimonials .content-banner .screenshot { margin-left:30px!important;  }
body.testimonials .content-banner .quote-text { margin-left:30px!important; margin-top:25px!important; }
body.testimonials .content-banner .full-testimonial { padding-top:5px!important; }

/*-----------------------------------------------------
	content
-----------------------------------------------------*/

.content-container {	width: 960px;	background: #fff;	margin: -160px auto 0 auto;}
	body.home .content-container {	margin: 0 auto;}
	body.home-inner .content-container {	margin: -160px auto 0 auto;}

.content-bottom {	width: 960px; margin: -5px auto  0 auto; height: 20px; background: url(../images/bg-content-bottom.png) center bottom no-repeat; }
.socialembed {	width: 900px; padding: 20px 30px 5px 30px;	background: #fff;	margin: -5px auto 0 auto;	display:block; text-align:right;}

.content {	width: 880px; float: left;	padding: 40px 0 20px 40px;}
.content-left { width:570px; float:left;  }
.content-right {  width:270px; float:right; padding-top:10px; margin-right:10px;}
	body.home .content { padding: 20px 30px 20px 40px!important; }
	body.home-inner .content { padding: 40px 0 20px 40px!important;}


.content-half {	width: 420px !important;}

.video-panel { width:450px; float:right; 	padding: 20px 30px 0 0; margin:0;  }
.form-panel { width:410px; 	padding: 20px 0 0 40px; float:left; margin:0; }

.content-container h1, 
.content-container h2, 
.content-container h3, 
.content-container p, 
.content-container ul, 
.content-container ol, 
.content-container hr, 
.content-container table, 
.content-container form { margin-bottom: 15px; }

.content h1 {
	color: #184b69;
	font-size: 38px;
	line-height: 46px;
	margin: 0  0 30px 0;
}



body.home .content h1 {
	font-size: 24px;
	line-height: 30px;
	margin: 0  0 15px 0;
}


body.home-inner .content h1, body.home-cta .content h1 {color: #184b69;	font-size: 30px;	 line-height: 38px;	margin: 0  0 30px 0;}

.content-container h2 {
	color: #184b69;
	font-size: 20px;
	line-height: 26px;
}

.content a { font-weight:bold;  }

.content ul {
	margin-left: 35px;
	list-style: disc;
}

.content hr {
	border: 0;
	border-bottom: 1px solid #ddd;
	height: 1px;
	margin: 30px 0;
}

.content h2 a {
	text-decoration: none;
}

.img-right {
	float: right;
	margin: 0 0 15px 15px;
}

ol.fulllist { margin-left: 25px; list-style:decimal; }
ol.fulllist li { margin-bottom: 15px;}
ol.fulllist li li { margin-left: 25px;  }
ol.fulllist .nopadding { margin-left: -20px;  }


/*-----------------------------------------------------
	Seven Reasons
-----------------------------------------------------*/
.seven-list-box { width:100%; height:110px; padding:15px 0; margin:0 0 0 0; display:block; float:left; clear:both; background-color:#f6f6f6; border-bottom:1px solid #e5e5e5; }
.nobg { background:none!important;}
.number-tab { width:70px; margin:-15px 25px 0 -15px; padding:12px 0 20px 40px;  background:url(../images/tab.png) no-repeat left bottom; float:left; text-align:center; color:#fff; font-size:40px; font-weight:bold; line-height:normal; }
.seven-title { width:185px; margin-right:20px; color: #184b69;	font-size: 19px; line-height: 24px; float:left; font-weight:bold; }
.seven-text { width:210px; float:left; }
.seven-text ul { margin:0 0 0 15px;}


/*-----------------------------------------------------
	inner page side columns
-----------------------------------------------------*/
/*
.service-banner { width:900px; height:130px; display:block; margin:13px auto 0 auto; clear:both;}
body.services-overview .service-banner { background:url(../images/banner/services.jpg) no-repeat 0 0;}
body.website-design .service-banner {background:url(../images/banner/webdesign.jpg) no-repeat 0 0; }
body.e-commerce .service-banner {background:url(../images/banner/ecommerce.jpg) no-repeat 0 0; }
body.social-media .service-banner {background:url(../images/banner/social.jpg) no-repeat 0 0; }
body.search-engine-optimisation .service-banner {background:url(../images/banner/search.jpg) no-repeat 0 0; }
body.pay-per-click-advertising .service-banner {background:url(../images/banner/internetad.jpg) no-repeat 0 0; }
body.website-hosting .service-banner {background:url(../images/banner/hosting.jpg) no-repeat 0 0; }
body.analytics .service-banner {background:url(../images/banner/analytics.jpg) no-repeat 0 0; }
body.conversion-optimisation .service-banner {background:url(../images/banner/conversion.jpg) no-repeat 0 0; }
body.copywriting .service-banner {background:url(../images/banner/copywriting.jpg) no-repeat 0 0; }


.side-column {
	width: 200px;
	float: left;
	margin: 40px 0 0 30px;
}

body.contact .side-column { }



.subnav a {
	display: block;
	padding: 5px 0 5px 10px;
	border-bottom: 1px solid #ddd;
	text-decoration: none;
}

.subnav a:hover {
	text-decoration: underline;	
}

.subnav a.active {
	font-weight: bold;
	color: #72bf44;
}

*/
.inner-column { width: 250px; margin: 70px 0 0 30px; }

.right-column {
	float:right;
	margin: 40px 30px 0 0;
	width: 200px;
}

body.seven .right-column { margin-top:110px;}
body.portfolio .right-column {
	margin-top: 90px;
}

body.health .right-column { width: 240px; }
body.health .right-column  input[type=text], 
body.health .right-column  textarea { width:220px!important;}


/*-----------------------------------------------------
	portfolio
-----------------------------------------------------*/

.gallery { width:100%; }
.gallery .portfolio-item {
	float: left;
	width: 200px;
	margin: 15px 25px 15px 0;

}

.gallery .first { margin-left: 0px!important; }
.gallery .last { margin-right: 0px!important; }

.gallery .portfolio-item a {
	width: 200px;
	height: 200px;
	display: block;
	opacity: 1;
	text-decoration:none!important;
}
.gallery .portfolio-item strong {color: #575656; font-size:12px;}


.gallery .portfolio-item a img {padding-bottom:5px;}
.gallery .portfolio-item a:hover img { opacity: 0.8; text-decoration:none!important;}
.gallery .portfolio-item a:hover { color: #72bf44; text-decoration:none!important;}

.portrait {float:left; width:100px; margin-right:30px; text-align:center;}

/*-----------------------------------------------------
	form
-----------------------------------------------------*/

/*
.right-column h2 {  }
.right-column .form li {margin-bottom: 5px!important;}
.right-column .form input[type="text"], 
.right-column .form textarea { font-size:12px!important; margin:0!important; }
.right-column .form textarea { width:180px!important; height:140px!important;}
.right-column .form .button input { }
.right-column .form label { width:90%!important;}
.right-column .form label.error { width:90%!important; margin: 0 0 0 5px!important; font-size:11px!important; }
*/
.form-panel  form { margin:0; padding:0;}
.form-panel .form li {margin-bottom: 8px!important;}
.form-panel .form input[type="text"], 
.form-panel .form textarea {	width: 300px; padding: 3px 5px; font-size:12px; margin:0;}
.form-panel .form textarea {	height:60px;}
.form-panel .form .button input { padding:5px 20px; margin:-2px 0 0 80px; }
.form-panel .form label { width:80px;}
.form-panel .form label.error { width:90%; margin: 0 0 0 90px; }

.contact-form { width:290px; }

.form {
	margin: 0;
	list-style: none;
}

.form li {
	margin-bottom: 5px;
}

.form li p {
	margin-bottom: 0;
}

.form label {
	display: inline-block;
	width: 250px;
	vertical-align: top;
	padding: 0 0 0 0;
}

.form label.fullwidth {
	width: 90%!important;
}

.form li.fullwidth input, 
.form li.fullwidth textarea {
	margin-left: 140px;
}

.form .checkboxes {
	margin: 5px 0 15px 0;
}

.form input[type="text"], 
.form textarea, 
.side-column input[type="text"] {
	font: 12px/16px Arial, Helvetica, sans-serif;
	color: #575656;
	border: 1px solid #ccc;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	width: 250px;
	padding: 5px 10px;
}

.side-column input[type="text"] {
	width: 180px;
}

.side-column .subscribe-button {
	margin: 5px 0 0 160px;
}

.form textarea {
	height: 150px;
}
.form textarea.larger {
	height: 150px;
}

.form textarea.smaller {
	height: 50px;
}

.form input[type="text"].active, 
.form textarea.active, 
.side-column input[type="text"].active {
	border-color: #aaa;
}

.form .button input {
	background: #72bf44;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: #fff;
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
	cursor: pointer;
	border: 0;
	padding:7px 25px;
	margin:0;
	-webkit-appearance: none!important; -moz-appearance: none; appearance: none; 
}

.form .button input.hover {
	background: #82d451;
}

form strong {
	color: #72bf44;
}

.form label.error {
	width: 100%;
	color: #C00;
	margin: 0;
}

.form input.error, 
.form textarea.error {
	background: #fddddd url(../images/icon-cross.png) right center no-repeat;
	border-color: #ce8585 !important;
}

.form input.valid, 
.form textarea.valid {
	background: #edfddd url(../images/icon-tick.png) right center no-repeat;
	border-color: #89a969 !important;
}



/*-----------------------------------------------------
	seven reasons
-----------------------------------------------------*/
/*
.seven-items {
	margin: 0;
}

.seven-items .seven-item {
	float: left;
	margin: 0  28px 28px 0;
	width: 204px;
	height: 260px;
	background: #d8e1e6;
}

.seven-items .first {
	margin-left: 0;
}

.seven-items .last {
	margin-right: 0;
}

.seven-items ul {
	padding: 10px;
	margin:0;
	
}
.seven-items li { list-style:none; }
	

.seven-items img {
	display: block;
}

.seven-items strong {
	/*color: #184B69;*//*
}

.seven-items .number {
	/*color: #184B69;*//*
	font-weight: bold;
	font-size: 30px;
}

.seven-items p {
	background: #72bf44 url(../images/bg-reasons-bottom.png) center bottom no-repeat;
	padding: 10px 10px 33px 10px;
	height: 64px;
	color: #fff;
	margin-bottom: 0;
}
*/


/*-----------------------------------------------------
	footer
-----------------------------------------------------*/


.footer-container {	margin-top:25px;	padding: 30px 0;	background: #131920;}
.footer-container p  { }
.footer-links {width: 960px;	margin: 0 auto;	color: #688492;}
.footer-links a { color: #688492; }
.footer-links h3 {	color: #fff;	font-size: 14px;	margin-bottom: 10px;}
.footer-links .item { float: left; }
.footer-links .footer-nav { width: 40%; float:left;}
.footer-links .footer-nav li { float:left; width:50%;}
.srcontact { width: 29%!important;  }
.srcontact2 { width: 29%!important; }
.srcontact2 strong { display:inline-block; width:45px;}

.social-panel { width: 175px; margin:10px 0 0 0; float:left; display:block;}
.social-panel li a.social {
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	width: 40px;
	height: 40px;
	float:left;
	margin-right:7px;
	
}

.social-panel li a.twitter { background: url(../images/twitter.png) no-repeat; }
.social-panel li a.facebook { background: url(../images/facebook.png) no-repeat; }
.social-panel li a.google-plus { background: url(../images/google-plus.png) no-repeat; }
.social-panel li a.social:hover { background-position: 0 -40px; }

.gplus { margin:0;	float: left;	display:block;}
.social-counts { float: left;	display:block; margin:0; padding-top:20px; }

.footer-links a[href^="tel:"] { color:#688492!important; }
.footer-links a[href^="tel:"]:hover { color:#688492!important; }

/*

.credit-panel { float: left; width:375px; margin-top:30px;}
.footer-links .testimonial {	width: 340px;	padding:0 40px 0 0px;}

.footer {
	width: 960px;
	margin: 0 auto;
	color: #688492;
	position: relative;
	color: #4c6370;
	font-size: 11px;
	margin-top: 35px;
	border-top: 1px solid #1b252a;
	padding-top: 35px;
	height: 80px;
}


.footer p {
	width:250px;
	float:left;
	padding-left: 20px;
}
*/
/*
a.gpartner { width:95px; height:36px; display:block; background:url(../images/google-partner.png) no-repeat 0 0; margin-top:24px; float:right; margin-right:12px;}
a.gpartner:hover { cursor:default; }
a.awia  { width:70px; height:70px; display:block; background:url(../images/awia.png) no-repeat 0 0; float:right;}


.footer .abn { margin-left: 8px; }

.footer p a { color: #4c6370; text-decoration:underline; }

.footer ul {
	position: absolute;
	top: 40px;
	left: 280px;
}

.footer li {
	margin-right: 5px;
	float: left;
	display: inline;
}
*/
/*
.footer .form {
	float:right;
	padding:0;
	margin-top:-20px;
	width: 400px;
}

.footer .form h3 {
	width: 82px;
	height: 78px;
	text-indent: -9999px;
	background:url(../images/form-heading.png) no-repeat;	
	float: left;
}

.footer .form input.field {
	float: left;
	width: 215px;
	background: #131920;
	border: 1px solid #29353a;
	padding: 8px 15px;
	color: #5b7a86;
	font: 16px/16px Arial, Helvetica, sans-serif;
	margin: 25px 0 0 15px;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

.footer .form input.active {
	border-color: #3f4d53;
	color: #fff;
	font-weight: bold;
}	

.footer .form input.subscribe-button {
	float: left;
	margin: 23px 0 0 5px;
	width: 40px;
}
*/

/* mobile nav*/
.slicknav_menu, .main-menu { display:none; }



/*-----------------------------------------------------------------------------------*
	MEDIA QUERIES
/*-----------------------------------------------------------------------------------*

/* for 980px or less */
@media screen and (max-width: 900px) {

	.content img { max-width: 100%;  width:100%; height:auto; vertical-align: top;}
	.w-default { display:none; }
	.w-480 { display:block;}
	.content iframe { width:100%; }
	table { width:100%!important; float:none!important; clear:both!important; margin:0 auto!important; }
	
	.wrapper { }
	.wrapper-inner {background: url(../images/bg-wrapper2.jpg) center -20px no-repeat; }
	.container { }
	
	.main-menu { }
	.slicknav_menu { display:block;	}
	
	.header { width:100%; height:90px; }
	.header p{ font-size:14px!important; top:55px; right:15px!important; line-height:20px; color:#909EA5;}
	.header p strong { font-size:16px!important;  } 
	.header .logo { margin-left:0; }
	.header .logo img { width:80%; height:auto;}


	.content-container { width: auto;  padding: 0 20px 30px 20px;}
	.content-bottom, .socialembed { display:none!important;}
	.content {	width: 100%; padding:30px 0 0 0!important;}
		body.home .content { padding:0!important; }

	.content-left { width:65%; padding-bottom:10px;/* border-bottom:1px solid #ddd; */}
	.content-right {  width:30%; padding-top:20px; margin-right:0px!important;}
	.content .floatright { }

	.form-panel { width:50%; padding: 20px 0 0 0; margin:0;  }
	.video-panel { width:47%; padding: 20px 0 0 0;  margin:0; }
	.video-panel iframe { width:100%!important; height:280px;  }
	
	.banner { width:100%; padding-bottom:50%; }
	.banner img {  width:100%!important; height:auto!important;}
	
	.ctas { width: 100%; margin: 0 auto;  background:#151E22;  }
	.ctas div.clickable-panel { min-width:190px; width:27%; padding:0; margin:0 0 0 5%; }
/*	.clickable-panel .cta-button { display:none!important; }
	.clickable-panel p {  display:none!important;}

	.ctas h2 { width:200px; margin:0 auto!important;}	
	.ctas h2 a { padding: 20px 0 15px 65px; background-position: 0px 15px!important;}
*/
	.form li { width:100%; float:left;} 
	.form textarea { margin:3px 0px; height:60px;}
	.form .button input {  margin:0 0 0 80px;}
	.form label.error { width:auto!important; margin:0 0 0 90px!important;  }
	.form label { width:80px!important; float:left; }
	.contact-form { width:100%!important; }
	.contact-form label { width:90%!important; }

	.form-panel .form input[type="text"], .form-panel .form textarea { width: 70%!important;  float:left;  }
	.form input[type="text"], .form textarea { width: 90%!important;  float:left;  }
	.contact-form input[type="text"], .contact-form  textarea { width: 90%!important;  }
	
		body.contact .content iframe { height:300px; }
	
	.content h1 { font-size: 28px; line-height: 34px;	margin: 0  0 20px 0;}
		body.home .content h1 { /*	font-size: 24px;	line-height: 30px;	margin: 0  0 15px 0; */}	
	.content-container h2 {	/*font-size: 20px; line-height: 26px; */}
	
	.footer-container {  margin-top:0; clear:both; padding: 30px 0;}
	.footer-links { width:auto;	margin: 0 20px;	color: #688492;}
	.footer-links .item { width:50%!important; margin-bottom:20px;}
	.footer-links .footer-nav { display:none;}
	.srcontact { width: 47%; }
	.srcontact2 { width: 47%; }
	.footer-links .testimonial { width: 100%!important; padding:0px!important;}
	
	.credit-panel { width:auto; }
	.credit-panel .floatleft {  }
	.social-panel { width: 140px!important; }

	.inner-column {display:none;}
	
	.gallery { width:100%;}
	.gallery .portfolio-item { margin: 15px 25px 15px 0!important; }
	.gallery .portfolio-item a { margin:0 auto; }
	
	.gallery .right {  }
	.gallery .first {  }
	.gallery .last {  }
	
	.seven-list-box { width:100%; height:auto; padding:15px 0; margin:0 0 0 0;  }
	.number-tab { width:50px; margin:-15px 15px 40px -15px; padding:12px 0 20px 12px; font-size:30px;  }
	.seven-title { width:170px; margin-right:10px; font-size:16px; line-height: 20px; margin-bottom:5px; }
	.seven-text { width:180px; float:left; }


.content-top {  background: none; height:190px; }
	body.nobanner .content-top  {  background: none; background-color:#fff; height:160px;  }
	.size28 { font-size:22px!important; line-height:28px!important;}
	.size40 { font-size:30px!important; line-height:36px!important;}

.banner-show { padding-bottom:5%; height:auto;} /* home banner changes on page load*/

.content-banner,  body.testimonials .content-banner{ width:97%!important; padding:20px 0 10px 0; margin:0 auto; clear:both;  }	
.content-banner .screenshot, body.testimonials .content-banner .screenshot  {  width:45%!important; margin-left:1%!important;  margin-top:1.5%;  }
.content-banner .quote-text, body.testimonials .content-banner .quote-text {  width:48%!important; margin-left:2%; margin-top:2%!important; }
.content-banner img { width:100%!important; height:auto!important;  }	
.content-banner .full-testimonial { margin-right:2%; }

.imagebollards .screenshot { width:100%!important; text-align:center; margin:0px!important;}
.imagebollards .quote-text { width:100%!important; text-align:center; margin:0px!important; }

.hba .screenshot { margin-top:1%; }
.hba .quote-text  {}

.ozair .screenshot { margin-left:0;}
.ozair .quote-text  {  margin-left:0px;  }

.booktobalance .screenshot { margin-top:0; }
.booktobalance .quote-text { margin-top:3%!important; }

.per-tiling .screenshot { }
.per-tiling .quote-text {   }

.directiondesign .screenshot { }
.directiondesign .quote-text  {}

.bizlink .screenshot {   }
.bizlink .quote-text { }

.cableair .screenshot {  width:55%!important;}
.cableair .quote-text {  width:35%!important; }

.grassscapes .screenshot {  }
.grassscapes .quote-text {}

.kitchensdirect .screenshot {  }
.kitchensdirect .quote-text { margin-top:1.5%!important; padding-bottom:2%; }

	
}


@media screen and (max-width:640px) {
	
	.content-left { width:100%; float:left; padding-bottom:10px;/* border-bottom:1px solid #ddd; */}
	.content-right {  width:100%; float:left; padding-top:20px; margin-right:0px!important;}
	.content .floatright { float:left;}

		
	.form-panel { width:100%; padding: 20px 0 0 0; margin:0; float:left;  }
	.video-panel { width:100%; padding: 20px 0 0 0;  margin:0; float:left;  }
	.video-panel iframe { width:100%!important; height:280px;  }

	
	.ctas { width: 100%; margin: 0 auto 0 auto;  background:#151E22;}
	.ctas div.clickable-panel {	width:100%; height: 85px; padding: 0; border-bottom:1px solid #333b3e; margin:0 auto!important; float:none!important; }
	.clickable-panel .cta-button { display:none!important; }
	.clickable-panel p {  display:none!important;}

	.ctas h2 { width:200px; margin:0 auto!important;}	
	.ctas h2 a { padding: 20px 0 15px 65px; background-position: 0px 15px!important;}

	
	.credit-panel { width:auto; }
	.credit-panel .floatleft {  }
	.social-panel { width: 150px!important; }
		
	.inner-column {display:none;}
	

	.seven-list-box { width:100%; height:auto; padding:15px 0; margin:0 0 0 0;  }
	.number-tab { width:50px; margin:-15px 15px 40px -15px; padding:12px 0 20px 12px; font-size:30px;  }
	.seven-title { width:170px; margin-right:10px; font-size:16px; line-height: 20px; margin-bottom:5px; }
	.seven-text { width:180px; float:left; }
	
	.form-panel .form input[type="text"], .form-panel .form textarea { width: 75%!important;  float:left;  }
	.form input[type="text"], .form textarea { width: 75%!important;  float:left;  }
	.contact-form input[type="text"], .contact-form  textarea { width: 90%!important;  }





}


@media screen and (max-width: 480px) {
	
	.w-default-banner { display:none; }
	.w-mobile-banner { display:block;}

	.banner { width:100%; padding-bottom:50%; }
	.banner img {  width:100%!important; height:auto!important;}
	
	.ctas { width: 100%; margin: 0 auto 0 auto;  background:#151E22;}
	.ctas div.clickable-panel {	width:100%; height: 85px; padding: 0; border-bottom:1px solid #333b3e; margin:0 auto!important; float:none!important; }
	.clickable-panel .cta-button { display:none!important; }
	.clickable-panel p {  display:none!important;}

	.video-panel iframe { height:240px;  }
	
	.gallery .right { margin-right:0!important; }
	.gallery .first {  }
	.gallery .last {  }
	
	.content-top {  background: none; height:190px; }
		body.nobanner .content-top  {  background: none; background-color:#fff; height:160px;  }
		.size28 { font-size:22px!important; line-height:28px!important;}
		.size40 { font-size:30px!important; line-height:36px!important;}

	.content-banner, body.testimonials .content-banner { width:85%!important; padding:15px 0 10px 0; margin:0 auto; clear:both;  }	
	.content-banner .screenshot, body.testimonials .content-banner .screenshot  { width:100%!important; margin:0 auto 10px auto!important; float:none; text-align:center; }
	.content-banner .quote-text, body.testimonials .content-banner .quote-text  {  width:100%!important; margin:0 auto!important;   float:none;  text-align:center; }
	.content-banner img { width:100%!important; height:auto!important;  }	
	.content-banner .full-testimonial { margin-right:2%; margin-bottom:5%; }

	
.cableair .screenshot {  width:100%!important;}
.cableair .quote-text {  width:80%!important; }

.footer-links .item { width:100%!important;}
	
}



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

	.content h1 { font-size: 26px; line-height: 32px;}
	
	.gallery { width:100%; text-align:center; }
	.gallery .portfolio-item { width: 100%!important;	margin: 15px 0 15px 0!important; text-align:center; float: none;}
	.gallery .portfolio-item a { margin:0 auto; text-align:center;}
	.gallery .right { margin-right:0!important; }


	.form-panel .form input[type="text"], .form-panel .form textarea  { width: 65%!important;  }
	.form input[type="text"], .form textarea { width: 65%!important;  }
	.contact-form input[type="text"], .contact-form  textarea { width: 90%!important;  }
	.half-col { width:100%;}

	.seven-list-box { width:100%; height:auto; padding:15px 0; margin:0 0 0 0; }
	.number-tab { width:50px; margin:-15px 15px 40px -15px; padding:12px 0 20px 12px; font-size:30px;  }
	.seven-title { width:77%; margin-right:0; margin-bottom:5px;font-size:16px; line-height: 20px; }
	.seven-text { width:77%; float:left; }


}
	/* for 320px or less */
@media screen and (max-width: 320px)  {
	
	.header .logo img { width:78%; }

	.form-panel .form input[type="text"], .form-panel .form textarea  { width: 90%!important;  }
	.form input[type="text"], .form textarea { width: 90%!important;  }
	.contact-form input[type="text"],	.contact-form  textarea { width: 90%!important;  }
	.form label.error { width:auto!important; margin:0 0 0 5px!important;  }
	.form .button input, .form-panel .button input {  margin-left:0!important;}


	.seven-list-box { width:100%; height:auto; padding:15px 0; margin:0 0 0 0; }
	.number-tab { width:50px; margin:-15px 15px 40px -15px; padding:12px 0 20px 12px; font-size:30px;  }
	.seven-title { width:72%; margin-right:0; margin-bottom:5px;font-size:16px; line-height: 20px; }
	.seven-text { width:72%; float:left; }


}

@media screen and (max-width: 300px)  {
	
	.header p {display:none;}
	
}
/* Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 480px) { 
	 

    }


@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}



/*-----------------------------------------------------------------------------------*
	END CSS
/*-----------------------------------------------------------------------------------*