/*
  No accordion selector for h1: only one h1 is expected per page,
  so it can't be inside an accordion.
*/
.blog-page #content.container h1.field-navigationtitle,
.blog-page #content.container h1.field-title {
  font-size: 22px !important;
  line-height: 26px !important;
}

.blog-page #content.container .field-content h2,
.component.accordion .toggle-content h2 {
  font-size: 21px !important;
  line-height: 26px !important;
}

.blog-page #content.container .field-content h3,
.component.accordion .toggle-content h3 {
  font-size: 18px !important;
  line-height: 24px !important;
}

.blog-page #content.container .field-content h4,
.component.accordion .toggle-content h4 {
  font-size: 17px !important;
  line-height: 26px !important;
}

.blog-page #content.container .field-content p,
.component.accordion .toggle-content p {
  font-size: 17px !important;
  line-height: 26px !important;
}

@media only screen and (min-width: 768px) {
  .blog-page #content.container h1.field-navigationtitle,
  .blog-page #content.container h1.field-title {
    font-size: 26px !important;
    line-height: 30px !important;
  }

  .blog-page #content.container .field-content h2,
  .component.accordion .toggle-content h2 {
    font-size: 24px !important;
    line-height: 29px !important;
  }

  .blog-page #content.container .field-content h3,
  .component.accordion .toggle-content h3 {
    font-size: 21px !important;
    line-height: 26px !important;
  }
}

@media only screen and (min-width: 1366px) {
  .blog-page #content.container h1.field-navigationtitle,
  .blog-page #content.container h1.field-title {
    font-size: 35px !important;
    line-height: 42px !important;
  }

  .blog-page #content.container .field-content h2,
  .component.accordion .toggle-content h2 {
    font-size: 26px !important;
    line-height: 35px !important;
  }

  .blog-page #content.container .field-content h3,
  .component.accordion .toggle-content h3 {
    font-size: 22px !important;
    line-height: 30px !important;
  }
}