/* Hero */

/*--------------------------------------------------------------
# Image Background / Container
--------------------------------------------------------------*/
  #hero { /* Background Image */
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
  }

  #hero .hero-logo {
    position: absolute;
    max-width:100%;
    max-height:100%;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @media (min-width: 1024px) {
    #hero {
      background-attachment: fixed; /* text moves with scrolling but not background img*/
    }
  }

/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/
  #hero h1 {
    margin: 0 0 10px 0;
    font-size: 64px;
    color: #fff;
  }

  #hero h2 {
    color: #eee;
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 5.25px;
    text-transform: uppercase;
  }

  @media (max-width: 575px) {
    #hero h1 {
      font-size: 50px;
    }

    #hero h2 {
      font-size: 14px;
      text-align: center;
      margin-bottom: 30px;
    }
  }