/* Base Styles
------------------------------------------------------------------------- */
html{
  height: 100%;
  font-size: 62.5%; 
}
body{
  height: 100%;
  font-size: 15px;  /*for older browsers*/
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 200;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url("/image/background-cloud-white.png") repeat;
  color: #222; 
  }
  
 /* Grid
------------------------------------------------------------------------- */
.cover-wrapper {
  height: 95%;
  margin: 0;
  position: relative;
  overflow: hidden;
  z-index: -1;
  background: url("/image/hawthorn-building-builder-mobile.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.story-wrapper {
  min-height: 520px;
  padding: 60px 0 0 0;
  position: relative;
  text-align: center;
}
.blob-wrapper {
  min-height: 100px;
  padding: 60px 0;
  position: relative;
  text-align: center;
}
@media (min-width: 550px){
.cover-wrapper {
  height: 95%;
    margin: 0;
  position: relative;
  overflow: hidden;
  z-index: -1;
  background: url("/image/hawthorn_building_builders.jpg") no-repeat center;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
}
/* Typography
------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1, h2, h3 { font-size: 34px; font-size: 3.4rem; line-height: 1.25;  letter-spacing: -.1rem;text-transform: uppercase;}
h6 { font-size: 20px; font-size: 2.0rem; line-height: 1.25;  letter-spacing: -.05rem;}
.text-top{font-size: 25px; font-size: 2.5rem; line-height: 1.25;  letter-spacing: -.1rem;color:#FFF;padding-top:25%; padding-left:10%; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1, h2, h3 { font-size: 40px; font-size: 4.0rem; }
.text-top{font-size: 60px; font-size: 6.0rem; line-height: 1.25;  letter-spacing: -.1rem;color:#FFF;padding-top:25%;  }
}
p {margin-top: 0; }

.label {
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 10px;
  background-color: #000;
  font-size: 10px; font-size: 1.0rem; 
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  line-height: 23px;
  letter-spacing: 1px;
}
ol, ul {
  margin: 0;
}
/* Header
------------------------------------------------------------------------- */
.global-header {
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
  margin: 0 auto;
  background: url("/image/melbourne_builder_hawthornprojects-logo.png") no-repeat center;
  background-size: 141px 40px;
  background-color: rgba(0,0,0,0.4);
  border-bottom: 1px solid #adadad;
}
.global-header .menu {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
.slogan {
  width: 100%;
  height: 80%;
}
.img-slogan {
  background: url("/image/melbourne-builder-luxury-home-house-builder.png") no-repeat;
  background-size: 140px 32px;
}
.slogan, .img-slogan {
  padding-top:100px;
  padding-left: 40px;
}
.login-text {
  display: none;
}
.menu {
  display: inline-block;
  height:22px;
  width: 100%;
}
.menu-text{
  display: none;
}
@media (min-width: 550px){
	.login-text {
	  display: block;
	}
	.menu-text {
	  display: inline-block;
	}
	.global-header {
	  display: inline-block;
	  background-size:241px 55px;
	  padding-top: 25px;
	  padding-bottom: 25px;
	}
	.global-header, .menu{
	  padding-left: 30px;
	  padding-right: 30px;
	}
	.img-slogan {
	  background-size: 506px 70px;
	}
	.slogan, .img-slogan {
	  padding-top:350px;
	}
}

 /* Story
------------------------------------------------------------------------- */
.story {
  padding: 60px 0 0 0;
  letter-spacing: -.31em;
  text-rendering: optimizespeed;
}
.story ul {
  list-style: none outside none;

}
.grid-squeezed {
  padding: 0;
}
.grid-locked {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.c1-3 {
  width:100%;
  display: inline-block;
  vertical-align: top;
  text-rendering: auto;
}
.story li
.title-box{
  display: table;
  width: 100%;
  height: 425px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.wide-box {
  height: 325px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: url("/image/luxury-home-house-builder.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   z-index: 4;
}
.wide-box2 {
  height: 325px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: url("/image/kew-home-house-builder.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   z-index: 5;
}
.wide-box3 {
  height: 325px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: url("/image/malvern-home-house-builder.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   z-index: 6;
}
.bottom-box {
  height: 375px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background: url("/image/renovations-extension-quality.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    z-index: 7;
}

.story-img-a {background: url("/image/integrity.jpg") no-repeat center;}
.story-img-b {background: url("/image/flexible.jpg") no-repeat center;}
.story-img-c {background: url("/image/quality.jpg") no-repeat center;}
.story-img-d {background: url("/image/price.jpg") no-repeat center;}

.story li {
  padding-right: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.story li .headline {
  display: table-cell;
  position: relative;
  top: 0;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  z-index: 4;
  padding: 20px;
}
.story li .headline p{
	text-align: left;
}
.story li>div {
  min-height: 425px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid #bababa;
}
.story li .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(7,7,22,.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
@media (min-width: 700px){
	.c1-3 {
	  width:48%;
	}
	.wide-box, .wide-box2, .wide-box3 {
	  height: 750px;
	}
	.bottom-box {
	  height: 750px;
	}
}
 /* Slideout-menu
------------------------------------------------------------------------- */
#panel {
  height: 100%;
}  
.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
  color: #FFF;
  background: url("/image/background-cloud-black.png") repeat;
  background-color:#000;
}
.slideout-menu p {
  padding: 0 20px;
}
.slideout-menu h6 {
  padding: 20px 20px 0px 20px;
}
.slideout-menu a:link,
.slideout-menu a:visited,
.slideout-menu a:active {
  text-decoration:none;
  text-transform: uppercase;
  color:#FFF;
  display: block;
  padding: 0 20px;
  border-bottom: 1px solid #636366;
  line-height: 45px;
}
.slideout-menu a:hover {
  color: #0FA0CE; 
}
.slideout-panel {
  position:relative;
  z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}
.slideout-open .slideout-menu {
  display: block;
}
 
/* Helper
------------------------------------------------------------------------- */
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}