

#header {

  .header();

  padding: 4em 2em;
  text-align: center;

  .leader {

    h1 {
      font-size: 38px;
      font-weight: bold;
    }

  }

  p {
    margin: 0;
    font-weight: lighter;
    font-size: 1.6em;
  }

  .actions {

    margin-top: 2em;

    .action {
      display: inline-block;
      margin: 0 1em;
    }

    svg {
      margin: 0 0.5em 0 0;
      width: 40px;
      height: 40px;
    }

    path {
      fill: whitesmoke;
    }

    .btn {

      .display(flex);
      .align-items(center);
      padding: 1em;
      color: whitesmoke;

      background: rgba(220, 230, 240, 0.1);
      border: 1px solid rgba(240, 240, 240, 0.8);
      .border-radius(4px);

      font-weight: 600;

      &:hover {

        background: rgba(220, 230, 240, 0.9);
        color: @gray-dark;

        path {
          fill: @gray-dark;
        }

      }

    }

  }

}


// Mobile

@media (max-width: @screen-sm-min) {
  #header {

    // Hide the ranks button.
    .action.ranks {
      display: none;
    }

  }
}
