.banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.banner img {
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.banner.fadeout {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

@media screen and (max-width: 768px) {
  .banner {
    width: 90%;
    max-width: 400px;
  }
}





/* This CSS sheet is used to display an image on page load and then fade it out 

this javascript and class info is needed in the main HTML to make things happen

<div class="banner">
  <img src="/images/itsawiki.png" alt="Einar Petersen with a construction sign">
  <h2>Always Under Construction</h2>
</div>

<script>
  window.onload = function() {
    var banner = document.querySelector('.banner');
    setTimeout(function() {
      banner.classList.add('fadeout');
    }, 5000);
  };
</script>
*/