@font-face {
  font-family: 'FranklinGothicLTCom_Dm';
  src: url('../fonts/FranklinGothic/FranklinGothicLTCom_Dm.woff') format('woff'),
    url('../fonts/FranklinGothic/FranklinGothicLTCom_Dm.ttf') format('truetype'),
    url('../fonts/FranklinGothic/FranklinGothicLTCom_Dm.svg#icon') format('svg');
}

.styleguide-header {
  height: 100%;
  padding: 24px;
  position: fixed;
  width: 240px;
}

.styleguide-h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 3.6rem !important;
  font-weight: bold;
  line-height: 4rem !important;
  margin-bottom: 24px;
}

.styleguide-h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 3.6rem !important;
  font-weight: bold;
  line-height: 4rem !important;
  margin-bottom: 24px;
}

.styleguide-nav {
  list-style: none;
}

.styleguide-nav a {
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.styleguide-nav a:hover {
  color: #333;
}

.styleguide-main  {
  padding: 0 20px 24px 260px;
}

.component {
  padding-top: 24px;
  margin-bottom: 48px;
}