/* ===================== Blog & News listing ===================== */

.bl-head { margin-top: 10px; padding: 81px 0 27px; text-align: center; }
.bl-head h1 { margin-bottom: 8px; padding-bottom: 10px; font-size: 55px; font-weight: 700; line-height: 71.5px; color: #1f1f1f; }
.bl-sub { margin-bottom: 8px; padding-bottom: 10px; font-size: 18px; font-weight: 300; line-height: 27px; color: #24272a; }

.bl-list { padding: 81px 0 87px; }

/* category filter */
.tab { margin: 0 auto 30px; text-align: center; }
.tab button {
  margin: 0 10px 10px 0;
  padding: 5px 16px;
  background: transparent;
  border: 1px solid #9b9895;
  border-radius: 5px;
  font-family: inherit;
  font-size: 15px;
  line-height: 22.5px;
  color: #000000;
  cursor: pointer;
  transition: 0.3s;
}
.tab button:hover,
.tab button.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.bl-search-note { margin: -10px 0 25px; font-size: 15px; text-align: center; color: #393b3d; }
.bl-search-note a { color: var(--orange); }

/* the live card grid is 21px wider than the page column */
.bl-grid { margin-left: -10.5px; margin-right: -10.5px; padding-top: 6px; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .bl-head h1 { font-size: 43px; line-height: 42px; }
}
@media (max-width: 980px) {
  .bl-head { margin-top: 0; padding: 80px 0 30px; }
  .bl-list { padding: 80px 0 86px; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .tab button { margin-right: 0; padding: 5px 6px; font-size: 12px; line-height: 18px; }
}
@media (max-width: 580px) {
  .bl-head h1 { font-size: 26px; }
}
@media (max-width: 568px) {
  .tab button { margin-right: 5px; padding: 5px; }
}
@media (max-width: 480px) {
  .tab button { width: 100%; margin-right: 0; }
}