@headings-font-family: 'Arial';
@headings-color: #fff;
@line-height-computed: 20px;
@font-size: 14px;
@screen-sm-min: 320;

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: @headings-font-family;
  color: @headings-color !important;

  small,
  .small {
    font-weight: normal;
    line-height: 1;
    color: @headings-color;
  }
}

h1, .h1,
h2, .h2,
h3, .h3 {
  margin-top: @line-height-computed;
  margin-bottom: (@line-height-computed / 2);

  small,
  .small {
    font-size: 65%;
  }
}
h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: (@line-height-computed / 2);
  margin-bottom: (@line-height-computed / 2);

  small,
  .small {
    font-size: 75%;
  }
}

h1, .h1 { font-size: @font-size; }
h2, .h2 { font-size: @font-size; }
h3, .h3 { font-size: @font-size; }
h4, .h4 { font-size: @font-size; }
h5, .h5 { font-size: @font-size; }
h6, .h6 { font-size: @font-size; }


// Body text
// -------------------------

p {
  margin: 0 0 (@line-height-computed / 2);
}

.lead {
  margin-bottom: @line-height-computed;
  font-weight: 300;
  line-height: 1.4;

  @media (min-width: @screen-sm-min) {
    font-size: (@font-size * 1.5);
  }
}