#heroContainer {
  position: relative;
  height: 50vh;
  min-height: 400px;
}

#siteTitleHolder,
#pageTitleHolder {
  opacity: 0.85;
  position: absolute;
  text-decoration: none;
}

#siteTitleHolder {
  background-color: #0057a1;
  border-radius: 0 0 5px 5px;
  top: 0;
  left: 5%;
}

#pageTitleHolder {
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#siteTitleHolder:hover,
#pageTitleHolder:hover {
  text-decoration: none;
  opacity: 1;
}

#siteTitle {
  color: white;
  margin: 10px;
  text-align: center;
}

#pageTitle {
  margin: 10px;
  font-size: 3.5rem;
}

#heroImage {
  height: 100%;
}

@media screen and (width < 1000px) {
  #heroImage,
  #heroHolder {
    display: none;
  }
}

@media screen and (width >=1000px) {
  #subPageHeader {
    display: none;
  }
}