// Masthead
// -----------------------------------------------
// -----------------------------------------------
#masthead {
    position: relative;
    padding-top: ($base-point-grid * 20)/*176px*/;
    background-color: $brand-secondary;
    background-image: url("../img/helios-background-masthead.svg");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;


    .masthead-title {
        margin: ($base-point-grid * 5);
        font-size: 3.429rem;
        /*48px*/
        font-weight: $font-regular;
        line-height: 1.3;
        color: $white;
    }

    > svg {
        margin-bottom: -8px;
        width: 100%;
        height: auto
    }

    .header-button {
      padding: ($base-point-grid * 1.5) ($base-point-grid * 6);
      display: inline-block;
      font-weight: $font-semibold;
      text-transform: uppercase;
      color: $brand-tertiary;
      border: 2px solid $white;
      background: none;
      transition: background-color $base-duration $base-timing;

      &:visited {
          color: $white;
      }

      &:hover {
          text-decoration: none;
          color: $brand-secondary;
          background: $white;
      }

      &:active {
          color: $brand-secondary;
          background: rgba($white, 0.9);

      }
  }
}

// Responsive mode
@include bp(medium) {
    #masthead {
        background-position: 0 bottom, left top;
        .masthead-title {
            padding: 0 ($base-point-grid * 3);
            font-size: 2rem;
        }

        > svg {
            margin-top: ($base-point-grid * 8);
        }
    }
}

@include bp(small) {
    #masthead {
        > svg {
            margin-top: ($base-point-grid * 8);
        }
    }
}
