/* header */
.header {
  a {
    outline: none;
    &:hover {
      text-decoration: none;
    }
  }

  .banner {
    margin-bottom: 2rem;
    .bar  {
      background-color: black;
      display: flex;
      height: 3rem;
      margin: 0 auto;
      width: 100%;
      img.logo {
        height: 20px;
        padding: 0 0.25rem;
      }
      .wrapper {
        width: 100%;
      }
      .attribution {
        color: white;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        position: relative;
        margin: 0 2rem 0 5rem;
        max-width: 1440px;
        top: 0.9rem;
        a {
          border-bottom: none;
          color: white;
          font-weight: 600;
          &:hover {
            border-bottom: 1px solid white;
          }
        }
      }
    }
    h2.tagline {
      color: $green-dark;
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      text-transform: none;
    }
    .title-area {
      align-items: flex-end;
      border-bottom: 1px solid $red;
      display: flex;
      justify-content: flex-end;
      margin: 0 1rem 1rem 5rem;
      padding: 0 0 1rem;
      .site-title {
        width: 70%;
        a.cyt-logo {
          background-image: url("/static/images/cyt-logo-green.svg");
          background-repeat: no-repeat;
          background-size: contain;
          border: none;
          display: block;
          height: 250px;
          margin: 1rem 0;
          width: 250px;
        }
      }
    }
  }
}
/* nav */
.header {
  nav {
    padding-bottom: 0.2rem;
    width: 40%;
    ul {
      list-style-type: none;
      margin: 0;
      width: auto;
      li.test-nav {
        display: none;
      }
      li {
        display: inline-block;
        font-size: 1.2rem;
        padding: 0;
        text-align: right; // right side of nav aligns with banner
        width: 28%;
        &:last-child {
          font-size: 1.2rem;
          margin-left: 6%;
          text-align: center;
        }
      }
    }
    a {
      color: $plum;
      border-bottom: none;
      &:hover {
        border-bottom: 1px solid $plum;
      }
    }
  }
}
