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

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

section.content {
    display: grid;
    grid-template-areas:
    "hero-banner"
    "services"
    "text-content"
    "get-in-touch"
    "footer";
}

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

div.services {
    grid-area: service;
}

div.text-content {
    grid-area: text-content;
}

div.get-in-touch {
    grid-area: get-in-touch;
}

div.footer {
    grid-area: footer;
}

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

/* ---------- Hero Banner ---------- */
.hero-holder {
    background-image: url("../images/bg1.jpg");
    height: 750px;
    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;
  }

  .join {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-left: 200px;
    margin-top: 20px;
    grid-template-areas:
    "join-form teaser-content";
  }

  div.join-form {
    grid-area: join-form;
    #background-color: #ffffff;
    border-radius: 5px 5px 5px 5px;
    margin: 50px 50px 50px 50px;;
    #width: 445px;
  }

  div.teaser-content {
    grid-area: teaser-content;
    margin: 50px 50px 50px 50px;
    color: #ffffff;
  }

  h3 {
    font-size: 19px;
  }

  .teaser-text {
    font-size: 30px;
    font-weight: 800;
    padding-top: 20px;
  }

  .contetn-text {
    font-size: 18px;
    line-height: 1.2em;
  }

  .join-header {
    font-size: 25px;
    color : #ffffff ;
    padding-bottom: 20px;
    text-align: center;
    padding: 20px;
    background-color: #919636;
    border-radius: 5px 5px 0px 0px;
  }

  .join-text {
    font-size: 18px;
    color: #ffffff;
    background-color: #524A3A;
    text-align: center;
    padding: 20px;
  }

  .f-name  {
    text-align: center;
    padding: 10px 20px 5px 20px;
  }

  .l-name  {
    text-align: center;
    padding: 5px 20px 5px 20px;
  }

  .email-form  {
    text-align: center;
    padding: 5px 20px 0px 20px;
  }

.header-button {
    padding: 20px 20px 20px 20px;
    text-align: center;
}

.header-btn {
    border: 2px solid #262626;
    background-color: transparent;
    color: #262626;
    width: 150px;
    height: 60px;
    padding: 14px 28px;
    font-size: 18px;
    cursor: pointer;
    
  }

@media (min-width: 768px){
  .join {
    padding-left: 110px;
  }
}

@media (max-width: 425px) {
  .join {
    padding-left: 0px;
    margin-top: -565px;
    grid-template-areas:
    "join-form"
    "teaser-content";
  }

  .hero-holder {
    height: auto;
  }

  .teaser-content {
    margin: 0px 50px 50px 50px;
  }

  div.join-form {
    width: 335px;
  }
  div.join-form {
    margin: -500px 50px 50px 50px;
  }
}


  

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


  /* ---------- Service ---------- */

  .service {
    background-image: url("../images/bg2.jpg");
    height: auto;
    padding: 50px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.2em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

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

  div.music-icon {
    grid-area:music-icon;
    align-items: flex-start;
    padding: 30px;
  }

  div.movies-icon {
    align-items: flex-end;
    grid-area:movies-icon;
    padding: 30px;
    margin-top: 450px;
  }

  div.games-icon {
    align-items: flex-start;
    grid-area: games-icon;
    padding: 30px;
  }

  div.books-icon {
    align-items: flex-end;
    grid-area: books-icon;
    padding: 30px;
    margin-top: 450px;
  }

  h2 {
    font-weight: 100;
    font-size: 25px;
    text-align: left;
    padding-bottom: 20px;
  }

  .mu-icon {
    height: 75px;
    width: 75px;
    padding-bottom: 40px;
  }

  .mo-icon {
    height: 75px;
    width: 75px;
    padding-top: 20px;
  }

  .ga-icon {
    height: 75px;
    width: 75px;
    padding-bottom: 20px;
  }

  .bo-icon {
    height: 75px;
    width: 75px;
    padding-top: 20px;
  }

  hr {
    border: 1px solid #3c3c3c44;
    margin: 50px 0px 50px 0px;
  }

  @media (min-width: 769px) {
    .service-content {
        display: grid;
        height: inherit;
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        grid-template-areas:
        "music-icon movies-icon games-icon books-icon";
      }
      
      hr {
        display: none;
      }
  }

  @media (max-width: 798px) {
    .service {
        height: auto;
    }

    div.music-icon {
        padding: 0px;
    }

    div.movies-icon {
        margin-top: 0px;
        padding: 0px;
    }

    div.games-icon {
        padding: 0px;
    }

    div.books-icon {
        margin-top: 0px;
        padding: 0px;
    }
  }
     


  /* ----------  END Service ---------- */


  /* ---------- Text Content ---------- */

  .text-content {
    height: auto;
    padding: 50px;
    background-color: #ffffff;
    font-size: 18px;
    color: #262626;
    line-height: 1.2em;
}

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


  /* ----------  END Text Content ---------- */


  /* ---------- Get In touch ---------- */

.get-in-touch {
    height: auto;
    padding: 50px;
    background-color: #d6d6d6;
    font-size: 18px;
    color: #262626;
    line-height: 1.2em;
  }

input[type=text], select, textarea {
    background-color: #f2f2f2;
    width: 50%;
    height: 60px;
    padding: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    resize: vertical;
    display: inline-block;
    font-size: 18px;
    font-weight: 100;
}
  
input[type=submit] {
    background-color: #5A5F37;
    height: 60px;
    color: #ffffff;
    padding: 10px 25px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 100;
    width: 100%;
}

.e-mail  {
    text-align: center;
}

.button {
    text-align: center;
    padding-top: 30px;
}

.btn {
    border: 2px solid #262626;
    background-color: transparent;
    color: #262626;
    width: 150px;
    height: 60px;
    padding: 14px 28px;
    font-size: 18px;
    cursor: pointer;
  }

  @media (max-width: 425px) {
    input[type=text], select, textarea {
        width: 100%;
        
    }
  }


  /* ----------  END Text Content ---------- */


  /* ---------- 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 ---------- */