#random-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  margin-top: -40px;
}

#random-image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3; /* cover lion */
  transition: opacity 1500ms ease-out;
  opacity: 0;
}

#random-image.loaded img {
  opacity: 1;
}

@media only screen and (max-width: 740px) {
  #random-image img {
    z-index: -1; /* do not cover header bar */
  }
}


/* Hide white lion on larger screens */
.header-lion .res-only,
.header-logo .res-only {
  display: none;
}

/* Enable white lion on smal screens */
@media only screen and (max-width: 740px) {
  .header-lion .res-only,
  .header-logo .res-only {
    display: inline;
  }
}