/******************************************************************************/
/* contactme.css                                                              */
/*                                                                            */
/* Date     Description                                          Name         */
/* -------- --------------------------------------------------   ------------ */
/* 20260919 Initial coding.                                      Rodney       */
/******************************************************************************/

/******************************************************************************/
/* Global Element Settings                                                    */
/******************************************************************************/
/* #region Global Elements Settings */
/* #endregion */
/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */
body, html 
{
  height: 100%;
}
/******************************************************************************/
/* The hero image.                                                            */
/******************************************************************************/
.clsHeroImage 
{
  /****************************************************************************/
  /* Use "linear-gradient" to add a darken background effect to the image.    */
  /* This will make the text easier to read                                   */
  /****************************************************************************/
  background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                    rgba(0, 0, 0, 0.5)), 
                    url("../images/BannerMailbox.jpg");
  /****************************************************************************/
  /* Set a specific height.                                                   */
  /****************************************************************************/
  height: 50%;

  /****************************************************************************/
  /* Position and center the image to scale nicely on all screens.            */
  /****************************************************************************/
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/******************************************************************************/
/* Place text in the middle of the image.                                     */
/******************************************************************************/
.clsHeroText 
{
  color: white;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs */
/* #endregion */