/*
 * Footer styles mirrored from the main site (www.fusioncharts.com, dist/common.css)
 * so the blog footer matches it. Scoped to #colophon to override ds.css 2.0.38
 * and the older footer rules in style.css.
 */
footer#colophon { background: #12132b; position: unset; }
footer#colophon .container { max-width: 1140px; }

/* Nav columns */
footer#colophon .footer-nav { padding-bottom: 0; }
footer#colophon .footer-nav-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 24px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 64px 2rem 40px;
  width: auto;
}
footer#colophon .footer-nav-wrapper .footer-nav-list { display: block; float: none; padding: 0; width: 100%; }
footer#colophon .footer-nav-wrapper .heading {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px !important;
  text-transform: uppercase;
}
footer#colophon .footer-nav-wrapper .footer-nav-list > div + div .heading { margin-top: 32px; }
footer#colophon .footer-nav-wrapper .footer-nav-list .list-unstyled { margin: 0; padding: 0; }
footer#colophon .footer-nav-wrapper .footer-nav-list .list-unstyled li { margin-bottom: 9px; line-height: 1.5; }
footer#colophon .footer-nav-wrapper .footer-nav-list .list-unstyled a {
  color: #a6abc6;
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: color .14s ease;
}
footer#colophon .footer-nav-wrapper .footer-nav-list .list-unstyled a:hover { color: #fff; }

/* Bottom bar: social icons + copyright */
footer#colophon .footer-bottom {
  border-top: 1px solid hsla(0, 0%, 100%, .1);
  margin-top: 0;
  padding: 22px 2rem 30px;
}
footer#colophon .social-icons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
footer#colophon .social-icons li { float: none; margin: 0; }
footer#colophon .social-icons a {
  align-items: center;
  background-color: hsla(0, 0%, 100%, .08) !important;
  border-radius: 50%;
  display: flex;
  height: 32px;
  justify-content: center;
  text-decoration: none;
  transition: background-color .14s ease;
  width: 32px;
}
footer#colophon .social-icons a i {
  background: none;
  color: #c3c7db !important;
  font-size: 14px;
  padding: 0;
}
footer#colophon .social-icons li a:hover { background-color: #6957da !important; }
footer#colophon .social-icons li a:hover i { color: #fff !important; }
footer#colophon .copyright { color: #7f849f; font-size: 12.5px; margin: 0; }

@media (max-width: 1100px) {
  footer#colophon .footer-nav-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  footer#colophon .footer-nav-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  footer#colophon .footer-nav-wrapper { grid-template-columns: 1fr; }
}