/*meyer reset
========================================================================*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;	vertical-align: baseline;	background: transparent;}
body {	line-height: 1;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
/* remember to define focus styles! */
:focus {	outline: 0;}
/* remember to highlight inserts somehow! */
ins {	text-decoration: none;}
del {	text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {	border-collapse: collapse;	border-spacing: 0;}

/* Reset
============================================================================*/
*{margin:0;padding:0;}
img{border:none;}
a{text-decoration:none;}
a:hover{}
li{list-style-type:none;}
article, aside, footer, header, hgroup, nav, section {display: block;}



/* Basics
===========================================================================*/
html{font-family:sans-serif;font-size:14px;line-height:1.5em;font-family: 'Raleway', sans-serif;}
body{width:100%;margin:0 auto;overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1.3em;}
h1{font-size:2em;margin-bottom:0.5em;}
h2{font-size:1.5em;margin-bottom:0.75em;}
h3{font-size:1.5em;margin-bottom:0.75em;}
p{margin-bottom:.5em;line-height:1.5em;}
hgroup{margin-bottom:12px;}
hgroup h1{margin-bottom:.2em;}
hgroup h2{font-size:1.3em;margin-bottom:.2em;}
.clearfix{clear:both;}


/* Background Images
===========================================================================*/
html {-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
html.home-bg{background: url('images/1-sugarloaf.jpg') no-repeat center left fixed;-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }
html.about-bg{background: url('images/1-moody-skies.jpg') no-repeat center left fixed; -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; }
html.services-bg{background: url('images/1-yallingup-waves.jpg') no-repeat center left fixed;-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }
html.articles-bg{background: url('images/1-mountain-road.jpg') no-repeat center left fixed;-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }
html.contact-bg{background: url('images/1-bushrocks.jpg') no-repeat center left fixed;-webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  }

/* Structure
===========================================================================*/
header{}
nav{}
#main{}
#side{}
section{}
article{}
footer{}
.content{margin-top:350px;margin-bottom:5em;width:50%;float:right;padding:2em;background-image:url('images/head-back.png');background-repeat:repeat;  }

/* header
===========================================================================*/
header{height:150px;position:fixed;width:100%;padding:1em; }
header {background-image:url('images/head-back.png');background-repeat:repeat; }
header img{padding:0 1em 0 0;float:left;line-height:150px; }
header h1{float:left;color:#000;text-transform:uppercase;line-height:150px;margin:0 0 2em;padding:1px 0 0 0;vertical-align:center;font-size:2em; max-width:70%;color:#444;}
header .call a{float:right;width:200px;font-size:1.9em;color:#444; line-height:150px;}


/* nav
===========================================================================*/
nav{position:fixed;top:178px;width:220px;}

nav .social{width:190px;}
nav .social a{width:30%;margin:0 1.5%;float:left; }
nav .social i{text-align:center; }
nav .social:after {content: "."; display: block;height: 0;clear: both;visibility: hidden;}
.menu-btn{display:none; }

.menu {background-color: rgba(0, 0, 0,0.5);font-size:1.2em;border-radius: 0px 0px 10px 0px;}
.menu > li {display: block;}
.menu > li > a {padding: 10px 0 10px 30px; text-decoration: none; display: block;color: #fff; }
.menu > .active > a, .menu > li > a:hover {background-color: rgba(255,255,255,0.25);}



/* content
===========================================================================*/
.content{border-radius:10px 0 0 10px; }
.content p{font-size:16px; }
.content div{width:31%;float:left;margin:0 2% 1em 0; }
.content .article{margin-top:2em; }

#slide{position:absolute;right:-110%; }
#slide{-webkit-transition: right 1s ease;
  transition: right 1s ease; } 



form{width:100%; }
form input{width:98%;margin-bottom:1em;padding:5px;font-size:1em;line-height:1.3em;border-radius:5px;border:1px solid #ccc;box-sha1dow: inset 0 1px 1px rgba(0,0,0,.075); }
form textarea{width:98%;border-radius:5px;border:none;padding:5px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);font-family:sans-serif;font-size:1em; margin-bottom:1em;}
.btn, button {color: #fff;background-color:#00599b; font-size:1.3em;padding:5px 10px;border-radius:5px;border:1px solid #285e8e;float:right;}
.btn:hover, button:hover{opacity:0.8; }

/* side
===========================================================================*/




/* footer
===========================================================================*/
footer{margin-top:3em;clear:both;width:100%;position:fixed;bottom:0;background-image:url('images/head-back.png');background-repeat:repeat;padding:1em 1em 0;}



/* Mobile
============================================================================================= */
@media only screen and (max-width:1023px) {
header{ position:static;box-sizing:border-box;height:auto;}
header:after {content: "."; display: block;height: 0;clear: both;visibility: hidden;}
header img{line height:1em; }
header h1{float:none;font-size:1.5em;line-height:inherit;max-width:100%;margin:1.1em 0 0.5em;;}
header .call a{line-height:1.5em;float:none;font-size:1.7em;width:auto; }

#main-wrapper{clear:both; }
.menu{width:100%;position:static;z-index:0;top:0;}
.menu-btn{width:100%;display:block;background-color:#000;color:#fff;font-size:2em;text-align:center;background-color: rgba(0, 0, 0,0.7); }
.menu-btn p{margin:0; }

nav{width:100%;position:static; }
.menu{display:none; }
nav:hover .menu, nav:active .menu, nav:focus .menu{display:block; }
nav li:active .menu{display:none; }

.content{margin-top:25%;width:100%;float:none;box-sizing:border-box;border-radius:0;}
.content div{float:none;width:100%;margin:0 0 2em; }
.content div:after {content: "."; display: block;height: 0;clear: both;visibility: hidden;}
form{margn-bottom:1em; }
.btn, button{float:none;display:block;width:50%;margin:0 auto 1em; }

#slide{position:static; }

}