<h2 class="headline headline--h2">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz<br/>
# 1234567890',.<>/?;':"[]{}-=_+!@#$%^&*()</h2>

<p>
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.
</p>

{{ page.inlinestyles }}
      

      @font-face {
  font-family: 'Circular';
  src: url('../fonts/circular/CircularXXWeb-Book.woff2') format('woff2'),
    url('../fonts/circular/CircularXXWeb-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}
@font-face {
  font-family: 'Circular';
  src: url('../fonts/circular/CircularXXWeb-Black.woff2') format('woff2'),
    url('../fonts/circular/CircularXXWeb-Black.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: fallback;
}

      

      <h1 class="headline headline--h1">Headline 1</h1>
<h2 class="headline headline--h2">Headline 2</h2>
<h3 class="headline headline--h3">Headline 3</h3>
<h4 class="headline headline--h4">Headline 4</h4>
<h5 class="headline headline--h5">Headline 5</h5>
<h6 class="headline headline--h6">Headline 6</h6>

      

      .headline,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: $primary;
  font-family: $font-family-base;
  line-height: $headings-line-height;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 1em;

  * {
    text-decoration: none;
  }

  &--h1,
  h1,
  .h1 {
    font-size: $h1-font-size;
    margin-bottom: 2.5rem;
  }

  &--h2,
  h2,
  .h2 {
    font-size: $h2-font-size;
    line-height: 1.278;
    margin-bottom: 1.5rem;
  }

  &--h3,
  h3,
  .h3 {
    font-size: $h3-font-size;
    line-height: 1.385;
    font-weight: normal;
    margin-bottom: 1.125rem;
  }

  &--h4,
  h4,
  .h4 {
    font-size: $h4-font-size;
    font-weight: normal;
    line-height: 1.333;
  }

  &--h5,
  h5,
  .h5 {
    font-size: $h5-font-size;
    font-weight: normal;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  &--h6,
  h6,
  .h6 {
    font-size: $h6-font-size;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.38px;
  }
}

h1,
.h1 {
  font-size: $h1-font-size;
  margin-bottom: 2.5rem;
}

h2,
.h2 {
  font-size: $h2-font-size;
  line-height: 1.278;
  margin-bottom: 1.5rem;
}

h3,
.h3 {
  font-size: $h3-font-size;
  line-height: 1.385;
  font-weight: normal;
  margin-bottom: 1.125rem;
}

h4,
.h4 {
  font-size: $h4-font-size;
  font-weight: normal;
  line-height: 1.333;
}

h5,
.h5 {
  font-size: $h5-font-size;
  font-weight: normal;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h6,
.h6 {
  font-size: $h6-font-size;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.38px;
}

      

      <p><strong>Text 16px</strong></p>
<p class="text text--large">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
</p>
<p class="text text--large">
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
  dapibus.
</p>

<hr class="styled" />

<p><strong>Text 12px</strong></p>
<p class="text text--extra-small">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
</p>
<p class="text text--extra-small">
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
  dapibus.
</p>

<hr class="styled" />

<p><strong>Text 13px</strong></p>
<p class="text text--small">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
</p>
<p class="text text--small">
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
  dapibus.
</p>

<hr class="styled" />

<p><strong>Text 14px</strong></p>
<p class="text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
</p>
<p class="text">
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
  dapibus.
</p>

<hr class="styled" />

<p><strong>Text 18px</strong></p>
<p class="text text--extra-large">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
  ipsum dolor sit amet.
</p>
<p class="text text--extra-large">
  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
  dapibus.
</p>

      

      .text {
  color: $body-color;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family-sans-serif;
  font-weight:400;

  &--extra-small{
    font-size: $font-size-xs;
  }

  &--small{
    font-size: $font-size-sm;
  }

  &--large{
    font-size: $font-size-lg;
  }

  &--extra-large{
    font-size: $font-size-xl;
  }

  &--primary{
    color:$primary;
  }

  &--lower{
    text-transform: none !important;
  }

  &--small{
    font-size: $font-size-base;
    color: $body-color;
  }
}