html,body{
  height:100%;
  width:100%;
  padding: 0;
  margin: 0;
}

body{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-justify-content: center;
          justify-content: center;
}

.hero{
  height: 100%;
  width: 100%;
  max-width: 50%;
  max-height: 60%;
  overflow: hidden;
  text-align: center;
  background-image: url(/faultline.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

@media screen and (max-width:800px) { .hero{ max-width: 45%; } }
@media screen and (max-width:700px) { .hero{ max-width: 40%; } }
@media screen and (max-width:600px) { .hero{ max-width: 35%; } }
@media screen and (max-width:500px) { .hero{ max-width: 30%; } }