html, body {
  margin: 0;
  padding-top: 30px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.hero {
  position: relative;
  width: 100%;
}

.heroimagebg {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  padding-top: 70px;
  padding-bottom: 100px; /* border thickness */
  background: linear-gradient(180deg, black, rgb(79, 79, 79), rgb(89, 89, 89), white);
}

.heroimage {
  display: block;
  width: 100%;
  height: auto;
}

.overlayimg {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%;
  min-width: 10%;
  height: auto;
  background-color: rgba(239, 239, 239, 0.3);
}