body    {
    font-family: roboto;
    background-color: #262626;
    color: #262626;
}

/* ---------- Grid Layout ---------- */

section.content {
    display: grid;
    grid-template-areas:
    "hero-banner"
    "terms-privacy"
    "footer";
}

div.hero-banner {
    grid-area: hero-banner;
}

div.terms-privacy {
    grid-area: terms-privacy;
}

div.footer {
    grid-area: footer;
}

/* ---------- END Grid Layout ---------- */

/* ---------- Hero Banner ---------- */
.hero-holder {
    background-image: url("../images/bg3.jpg");
    height: 130px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .navbar {
    display: grid;
    grid-template-columns: 1fr 9fr;
    align-items: center;
    padding: 30px;
    height: 50px;
    grid-template-areas:
    "logo-placer service-placer topnav";
  }

  div.logo-placer {
    grid-area: logo-placer;
  }

  div.service-placer {
    grid-area: service-placer;
  }

  div.topnav {
    grid-area: topnav;
  }

  .logo {
    width: 360px;
    height: auto;
    padding-right: 60px;
  }

  .service-nav-icon {
    display: grid;
    display: flex;
    grid-template-areas:
    "music movies games books";
  }

  div.music {
    grid-area: music;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  div.movies {
    grid-area: movies;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  div.games {
    grid-area: games;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  div.books {
    grid-area: books;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  .social-nav-icon {
    display: grid;
    display: flex;
    grid-template-areas:
    "facebook instagram twiter";
  }

  div.facebook {
    grid-area: facebook;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  div.instagram {
    grid-area: instagram;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  div.twiter {
    grid-area: twiter;
    height: 30px;
    width: 30px;
    padding: 8px;
  }

  @media (min-width: 768px) {
    .social-placer {
        display: none;
    }
}

  @media (max-width: 425px) {
    .service-nav-icon {
        display: none;
    }

    .topnav {
        display: none;
    }

    .hero-banner {
        height: 660px;
    }

    .social-placer {
      display: none;
  }
  }

  .nav-content {
    float: left;
    display: flex;
  }

  a {
    color: #ffffff;
    text-decoration: none;
    padding: 12px 7px 0px 7px;
    justify-content: center;
  }

  /* ---------- Hero Banner ---------- */


  /* ---------- terms ---------- */

  .terms-privacy {
    background-color: #1c1c1c;
    color: #ffffff;
    height: auto;
    padding: 50px;
  }

h1 {
  font-size: 25px;
  font-weight: 200;
  padding: 30px;
  text-align: center;
}


  /* ---------- END terms ---------- */

  
  /* ---------- footer ---------- */

  .footer {
    background-color: #262626;
    color: #ffffff;
    font-weight: 100;
    padding: 10px;
  }

  .social-footer {
    display: grid;
    display: flex;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
    "facebook-footer instagram-footer twiter-footer";
  }

  div.facebook-footer {
    grid-area: facebook-footer;
    height: 45px;
    width: 45px;
    padding: 8px;
  }

  div.instagram-footer {
    grid-area: instagram-footer;
    height: 45px;
    width: 45px;
    padding: 8px;
  }

  div.twiter-footer{
    grid-area: twiter-footer;
    height: 45px;
    width: 45px;
    padding: 8px;
  }

  .footer-content {
    display: grid;
    grid-template-areas:
    "support terms members";
  }

  div.support {
    grid-area: support;
  }

  div.terms {
    grid-area: terms;
  }

  div.members {
    grid-area: members;
  }

  ul {
    padding-top: 20px;
  }

  li {
    padding: 7px 0px 7px 0px;
  }

  @media (max-width: 425px) {
    .footer-content {
        display: grid;
        text-align: center;
        grid-template-areas:
        "support"
        "terms"
        "members";
    }

    .social-footer {
        justify-content: center;
    }
  }
  /* ----------  END footer ---------- */