/* Presentation for the 2020-2021 blog pages after the HubSpot theme host (blog.reniac.com) went away.
   Typography inherits the site's Open Sans; layout is deliberately plain. */
.body-wrapper { font-family: "Open Sans", sans-serif; color: #444; }
.body-wrapper h1, .body-wrapper h2, .body-wrapper h3, .body-wrapper h4 { font-family: "Open Sans", sans-serif; }
.body-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.body-wrapper .hero { padding: 70px 20px; text-align: center; color: #fff; background: linear-gradient(120deg, #2ac4ea 0%, #753cbe 100%); } /* decorative brand gradient; the original hero photo was never archived */
.body-wrapper .hero h1 { color: #fff; font-size: 40px; line-height: 1.2; margin: 0 0 12px 0; }
.body-wrapper .hero h2, .body-wrapper .hero p { color: #fff; font-weight: 400; font-size: 20px; margin: 0; }
.body-container--blog-post > h1 { background: linear-gradient(120deg, #2ac4ea 0%, #753cbe 100%); color: #fff !important; text-align: center; padding: 60px 24px; margin: 0 0 24px 0; font-size: 34px !important; line-height: 1.25 !important; }
@media only screen and (max-width: 690px) { .body-container--blog-post > h1 { font-size: 24px !important; padding: 40px 16px; } }
.body-wrapper header#top { background: #fff; border-bottom: 1px solid #eee; position: static !important; height: auto !important; }
.body-wrapper header#top .container, .body-wrapper header#top .row, .body-wrapper header#top .col { height: auto !important; min-height: 0 !important; }
.body-wrapper header#top #logo img { height: 30px; width: auto; }
.body-wrapper header#top nav > ul.sf-menu > li > a { font-family: "Open Sans", sans-serif; }
@media only screen and (max-width: 999px) {
  /* these pages have no off-canvas menu markup: keep the menu as a plain wrapped list and hide the inert toggle */
  .body-wrapper header#top .col, .body-wrapper header#top .col.span_9, .body-wrapper header#top .col.span_3 { position: static !important; float: none !important; width: auto !important; height: auto !important; text-align: center; }
  .body-wrapper header#top nav > ul.sf-menu { float: none !important; margin-top: 0 !important; }
  .body-wrapper header#top nav { float: none !important; }
  .body-wrapper header#top::after { content: ""; display: block; clear: both; }
  .body-wrapper header#top nav > ul.sf-menu { display: flex !important; flex-wrap: wrap; justify-content: center; padding: 10px 0; }
  .body-wrapper header#top nav > ul.sf-menu > li { margin: 4px 10px; }
  .body-wrapper header#top .slide-out-widget-area-toggle { display: none !important; }
  .body-wrapper .hero h1 { font-size: 28px; }
}
.blog-header { padding: 30px 0 10px 0; }
.blog-header__title { font-size: 26px; color: #753cbe; }
.blog-index { padding: 20px 0 40px 0; }
.blog-index__post { padding: 22px 0; border-bottom: 1px solid #e6e6e6; }
.blog-index__post h2 { font-size: 22px; line-height: 1.35; margin: 0 0 8px 0; }
.blog-index__post h2 a { color: #753cbe; }
.blog-index__post-image, .blog-recent-posts__image { display: none; } /* original thumbnails were hosted on a dead third-party host */
.blog-pagination, .blog-index__pagination { padding: 20px 0 40px 0; }
.blog-post__meta, .blog-post__timestamp { color: #777; font-size: 14px; margin: 20px 0; }
.blog-post__body { font-size: 17px; line-height: 1.7; padding-bottom: 30px; }
.blog-post__body img { max-width: 100%; height: auto; }
.blog-post__body pre { white-space: pre-wrap; word-break: break-word; background: #f5f5f5; padding: 16px; font-size: 13px; }
.blog-post__body table { max-width: 100%; }
.blog-recent-posts { padding: 30px 0 40px 0; border-top: 1px solid #e6e6e6; }
.blog-recent-posts h3 { font-size: 22px; color: #753cbe; margin-bottom: 12px; }
.blog-recent-posts__list { display: flex; flex-wrap: wrap; gap: 0 30px; }
.blog-recent-posts__post { flex: 1 1 280px; padding: 10px 0; }
.body-wrapper .footer, .body-wrapper footer { background: #3b1f6b; color: #fff; padding: 40px 20px; }
.body-wrapper footer a, .body-wrapper .footer a { color: #fff; }
.body-wrapper img, .body-wrapper iframe { max-width: 100%; }