// v2 hero content
.hero-content {
  margin-top:0;
  font-family: 'Montserrat', 'Tahoma', sans-serif;
  text-align: center;

  @include breakpoint(small only) {
    background-image: none !important; //sass-lint:disable-line no-important
  }

  @include breakpoint(medium up) {
    background-size: cover;
    background-repeat: no-repeat;
  }
  .text-overlay{
    h1 {
      font-size: 2.5rem;
      line-height: 1;
      span {
        font-size:1.5rem;
      }
      @include breakpoint(medium up) {
        font-size: 3.5rem;
      }
    }
    .sub-title {
      font-size: 1rem;
      line-height: 1.25;

      @include breakpoint(medium up) {
        font-size: 1.25rem;
      }
    }
  }
  #site-nav { //sass-lint:disable-line no-ids
    text-align: left;
    @include breakpoint(medium up) {
      margin-bottom:0;
      text-align: center;
      .secondary-menu {
        background: none;
        .dropdown li{
          border-bottom:2px solid white;
          &:last-child{
            border-bottom:2px solid white;
          }
        }
        >li {
          display: inline-block;
          background-color: color(ben-franklin-blue);
          &.opens-right{
            >a {
              padding: $spacing-small $spacing-large;
            }
            > a::after{
              display: inline;
              margin: auto 0;
              left: 5px;
              position: relative;
              float: none;
              top: 10px;
              bottom: 0;
            }
            &.is-active,
            &.current-menu-ancestor{
              > a{
                background: color(dark-gray);
                color:white;
              }
            }
          }
          >a {
            color: white;
            padding: $spacing-small $spacing-medium;
          }
        }
        a {
          border:none;
          &:hover, &:active {
            background: color(dark-gray);
            color:white;
          }
        }
        .is-dropdown-submenu {
          top: auto;
          left:0;
          a{
            background: color(ghost-gray);
            color:color(ben-franklin-blue);
            &:hover, &:active {
              background: color(dark-gray);
              color:white;
            }
          }
        }
        .current-menu-item {
          > a{
            background: color(dark-gray);
            color:white;
          }
        }
      }
    }
  }
}