html { scroll-behavior: smooth; scroll-padding-top: 60px; }

body { background: #f1f1f1; font-family: "Roboto", sans-serif; }

a { color: #005ec2; }

.jumbotron { background-image: url("../images/hero-accent.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom; min-height: 500px; }

.sub-page .jumbotron { min-height: 300px; }

.card-title { font-weight: 900; }

.card-footer { background: #ffffff; }

.dropdown-menu { border-radius: 0; }

.dropdown-divider { border-color: #989b9e; }

.dropdown-menu { min-width: 7rem !important; }

.custom-dropdown-item { color: #999da0; line-height: 1; }

.dropdown-menu .dropdown-item { padding-left: 10px; padding-right: 10px; }

.custom-dropdown-item:hover, .custom-dropdown-item:focus { background-color: #343a40; color: #f8f9fa; }

.custom-dropdown-divider { background-color: #6c757d; }

.section-callout { background: #e9ecef; margin: 3rem 0; padding: 3rem 0; }

.overview-icon { background: #ffffff; border-radius: 100px; width: 150px; }

.nav .active { background: rgba(255, 255, 255, 0.75); color: #005ec2; display: inline-flex; border-radius: 4px; }

.link-dark-bg { color: white; text-decoration: underline; }

.link-dark-bg:hover { color: rgba(255, 255, 255, 0.75); text-decoration: underline; }

.location-list-item .card-img-top { object-fit: cover; }

.img-about { align-self: center; }

.joburg { max-width: 80%; height: auto; }

.page-title { color: #343a40; font-family: Roboto; font-size: 32px; font-style: normal; font-weight: 800; line-height: normal; text-align: center; }

.toc-item { line-height: 3em; }

figure { position: relative; }

figure figcaption { background-color: #222; color: white; position: absolute; right: 10%; top: 91%; text-align: center; max-width: 80%; padding: 2px; font-style: oblique; font-size: calc(0.5rem + 0.3vw); mix-blend-mode: hard-light; }

/* enable responsive font sizes https://christianoliff.com/blog/bootstrap-with-rfs
*/
@media (max-width: 1200px) { legend { font-size: calc(1.275rem + 0.3vw); }
  h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
  h2, .h2 { font-size: calc(1.325rem + 0.9vw); }
  h3, .h3 { font-size: calc(1.3rem + 0.6vw); }
  h4, .h4 { font-size: calc(1.275rem + 0.3vw); }
  .display-1 { font-size: calc(1.725rem + 5.7vw); }
  .display-2 { font-size: calc(1.675rem + 5.1vw); }
  .display-3 { font-size: calc(1.575rem + 3.9vw); }
  .display-4 { font-size: calc(1.475rem + 2.7vw); }
  .close { font-size: calc(1.275rem + 0.3vw); } }
.collapse-caret { display: block; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgNSAxMCI+CiAgPHBvbHlnb24gZmlsbD0iI0JDQkNCQyIgZmlsbC1ydWxlPSJldmVub2RkIiBwb2ludHM9IjAgMCA1IDUgMCAxMCIvPgo8L3N2Zz4K"); background-size: 5px 10px; background-repeat: no-repeat; background-position: left center; width: 16px; height: 16px; content: ""; margin-right: 4px; transition: transform 0.3s; transform-origin: 20% 50%; transform: rotate(90deg); }

.btn-collapse-toggle.collapsed .collapse-caret { transform: rotate(0deg); }

.collapse-caret-black { display: block; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgNSAxMCI+CiAgPHBvbHlnb24gZmlsbD0iIzM0M0E0MCIgZmlsbC1ydWxlPSJldmVub2RkIiBwb2ludHM9IjAgMCA1IDUgMCAxMCIvPgo8L3N2Zz4="); background-size: 5px 10px; background-repeat: no-repeat; background-position: left center; width: 16px; height: 16px; content: ""; margin-right: 4px; transition: transform 0.3s; transform-origin: 20% 50%; transform: rotate(90deg); }

.btn-collapse-toggle.collapsed .collapse-caret-black { transform: rotate(0deg); }

.breadcrumb { background: none; }

.breadcrumb:last-child { color: gray; text-decoration: none; cursor: default; }

/* video filtering */
.video-filter .badge { display: none; }

.video-filter.active .badge { display: inline-block; }

/* video search results */
#video-listing-container.is-searching .video-card { display: none; }

#video-listing-container.is-searching .video-result { display: block; }

#video-search-no-matches { display: none; }

#video-listing-container.no-video-results #video-search-no-matches { display: block; }

#post-mortem-container { display: flex; min-width: 336px; max-width: 991px; flex-direction: column; align-items: flex-start; gap: 30px; align-self: stretch; }

#post-mortem-year { display: flex; padding: 10px 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 4px; border: 0.5px solid #343a40; background: #fff; }

#post-mortem-year-deactivated { display: flex; padding: 10px 16px; justify-content: space-between; align-items: center; align-self: stretch; border-radius: 4px; border: 0.5px solid #343a40; background: #fff; color: #d3d3d3; pointer-events: none; }

#post-mortem-item { display: flex; padding: 0px 20px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; }

#post-mortem-item:hover { text-decoration: underline; }

#post-mortem-break { width: 100%; background: rgba(52, 58, 64, 0.5); }

#post-mortem-end-link { color: #005ec2; font-family: Inter; font-size: 16px; font-style: italic; font-weight: 500; line-height: normal; text-decoration-line: underline; text-align: center; margin-bottom: 10px; }

#in-the-news-container { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 40px; align-self: stretch; }

#in-the-news-year-container { display: flex; align-items: center; gap: 12px; align-self: stretch; }

#in-the-news-block { display: flex; }

#in-the-news-year { color: #343a40; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; }

#in-the-news-line { width: 100%; height: 1px; background-color: #dadada; margin-bottom: 12px; }

#in-the-news-article-title { color: #343a40; font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; color: #343a40; }

#in-the-news-subtitle { color: #343a40; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }

#in-the-news-date { color: #343a40; font-family: Roboto; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; }

#news-title { font-family: Roboto; font-size: 31px; font-weight: 900; margin-bottom: 20px; }

#featured-stories-subtitle { font-family: Roboto; font-size: 21px; font-weight: 700; margin-bottom: 20px; }

.featured-image-list { height: 200px; object-fit: cover; }

#featured-story-title { font-family: Roboto; color: #343a40; font-size: 31px; font-weight: 900; }

#featured-story-subtitle { color: #343a40; font-family: Roboto; font-size: 14px; font-weight: 400; }

#featured-story-date { color: #343a40; font-family: Roboto; font-size: 12px; font-weight: 400; }

#featured-story-content { color: #343a40; font-family: Roboto; font-size: 16px; font-weight: 400; }

#featured-story-footnote { color: #6c757d; font-family: Roboto; font-size: 16px; font-weight: 400; margin-top: 20px; }

.btn-link { color: #6c757d; text-decoration: none; }

.btn-link:hover { color: #5a6268; text-decoration: underline; }

.btn-block { display: block; width: 100%; }

.prev-story, .next-story { padding-left: 20px; padding-right: 20px; }

.centered-link { text-align: center; display: block; text-decoration: underline; }

#all-news-subtitle { color: #343a40; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }

#all-featured-stories-link { color: #343a40; font-family: Roboto; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; }