/*
*
* ===========================================
* TEXT OVERLAY
* ===========================================
*
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
  text-align: center;
  position: relative;
}

/* Use this div to lighten an image and put dark text over it */
.overlay-lighten {
  opacity: 0.6;
  }

/* Use this div to darken an image and put light text over it */
.overlay-darken {
filter: brightness(50%);
  }

/* Use this class in a div h1, h2, or p to centre the overlayed text */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}