html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #000;
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  background-image: url("../images/TGEL-bg-hor.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.logo {
  position: absolute;
  top: 3.4vh;
  left: 4.2vw;
  width: 6vw;
  height: auto;
}

.menu {
  position: absolute;
  top: 4vh;
  right: 4vw;
  width: 3vw;
  height: auto;
}

.title {
  position: absolute;
  top: 30vh;
  left: 50vw;
  transform: translateX(-50%);
  width: 45vw;
  height: auto;
}

@font-face {
    font-family: "HelveticaNeueThEx";
    src: url("https://treasuringgodexperiencinglife.com/assets/fonts/Helvetica/HelveticaNeue-ThEx.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

.hero-text {
	font-family: "HelveticaNeueThEx", sans-serif;
    font-size: 1.25em;
    line-height: 1.25;
    color: rgba(255,255,255,0.92);

    position: absolute;
    left: 50%;
    bottom: 10vh;

    transform: translateX(-50%);
    text-align: center !important;

    width: 80vw;
    max-width: 900px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.7),
        0 0 20px rgba(0,0,0,.5);
}