/* This sets the main image to cover the entire page, hence the "hero" div */
.hero {
  display: table;
  position: relative;
  background-size: cover;
  padding: 10px 0;
  color: #fff;
  width: 110%;
  height: 100vh;
}
/* This is to add a bit of an overlay to the picture */
.hero:after {
  content: '';
  z-index: 0;
  position: relative;
  background: rgba(0, 0, 0, 0.24);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
/* z-index: 1 allows for the text to still display white, and the here:after is z-index: 0 */
.hero .container {
  position: relative;
  z-index: 1;
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}
/* styling for the text */
.tagline {
  font-family: 'Libre Baskerville', serif;
  font-size: 26px;
  margin: 45px 0 75px 0;
  color: #fff;
}
.watermarked{
  background-image: url("https://eltbuzz.com/imagineit/img/backgrounds/logo.png");
    position: relative;
    z-index: 3;
    top:0;
  opacity: 0.5;
}