body {
  margin: 0;
}

/*------------------------------------------------------------------------------- The BG image holder */

.hero-holder {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 400px; 
  /* 
  The above height, and the following media queries are to account for 100vh not working on some mobile browsers 
  and therefore showing the rest of the page content until the jquery kicks in.
  */

  background-color: #808080;
  /*
  In this example this color is set to allow the logo to display whilst waiting for the jquery to kick in.
  Set it to something that works for your design. Or piss it off.
  */
}

@media ( min-height: 401px ) {
  .hero-holder {
    height: 600px;
  }
}

@media ( min-height: 601px ) {
  .hero-holder {
    height: 800px;
  }
}

@media ( min-height: 801px ) {
  .hero-holder {
    height: 1024px;
  }
}

@media ( min-height: 1025px ) {
  .hero-holder {
    height: 100vh;
  }
}

/*------------------------------------------------------------------------------- The BG image */

.hero-image {
  display: none;
  /*
  We set this as the initial class for the image so that whilst the page is loading we don't show 
  an unstyled image in the hero-holder.
  */
}

.hero-image-width { 
  display: inline;
  width: 100%; 
  height: auto;
  position: relative; 
  top: 50%; 
}

.hero-image-height { 
  display: inline;
  height: 100%; 
  width: auto;
  position: relative; 
  left: 50%; 
}

/*------------------------------------------------------------------------------- The centered Logo */

/*
This centering technique is pinched from: 
http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height
*/

.logo-holder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    text-align:center;
    font: 0/0 a;
}
 
.logo-centerer {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
 
.logo {
    vertical-align: middle;
    display: inline-block;
    width: 400px;
    height: auto;
    max-width: 80%;
    max-height: 100%;
}

/*------------------------------------------------------------------------------- The Extra content */

.extra-content {
  float: left;
}