body {
  margin: 0;
}

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

.hero-holder {
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  height: 400px; 


  background-color: #808080;

}

@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 */


.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: 500px;
    height: auto;
    max-width: 80%;
    max-height: 100%;
}

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

.extra-content {
  float: left;
}