:root { --light-shadow: #999; --old-color: #565656; }

.page-header { min-height: 500px; padding: 20px 0; border-bottom: 4px solid var(--primary); display: block; text-align: center; color: white;
  background: linear-gradient(rgba(86, 86, 86, 0.8), rgba(86, 86, 86, 0.5)), url(/National_Library/20160526010038oe_/https://timeline.kde.org/images/akademy-2014.png); background-repeat: no-repeat;
  background-size: cover; background-position: center center; background-color: var(--old-color); }

.page-header h1 { margin-top: 4%; margin-bottom: 0; display: inline-block; font-size: 7em; }
.page-header p { width: 60%; max-width: 1400px; margin: 0px auto 10px; line-height: 120%; font-size: 1.5em; }
.page-header a, .timeline-mark a { color: white; }

.timeline-filter-wrapper { padding: 10px 0; font-size: 1.2em; }
.timeline-filter { width: 90%; max-width: 1600px; margin: 0px auto; }
.timeline-filter ul { padding: 0; margin: 0; list-style: none; }
.timeline-filter ul li { padding-right: 20px; display: inline; }

.timeline { width: 90%; margin: 0px auto; padding: 20px 0 50px; position: relative; }
.timeline::before { width: 4px; height: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%); background: var(--primary); content: ''; }

.timeline-mark { width: 55px; height: 55px; border-radius: 50%; position: relative; left: 50%; transform: translate(-50%);
  background-color: var(--primary); line-height: 55px; font-size: 20px; font-weight: 600; text-align: center; color: white; }

.timeline-entry { box-sizing: border-box; width: 45%; padding: 20px; position: relative; box-shadow: 0px 1px 2px var(--light-shadow);
  display: flex; flex-direction: column; }
.timeline-entry.odd { margin-left: 55%; }
.timeline-entry h2 { margin-top: 0; }
.timeline-entry .below { display: flex; }
.timeline-entry .below > p { flex: 11; margin-top: 0; margin-right: 5px; }
.timeline-entry .below > .captioned-image { flex: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.timeline-entry .below > .captioned-image img { max-width: 100%; border: 8px solid white; box-shadow: 0px 1px 1px black; }
.timeline-entry .below > .captioned-image .caption { line-height: 120%; margin-top: 5px; font-size: 90%; text-align: center; }

.page-footer { max-height: 50px; position: fixed; bottom: 0; left: 0; right: 0; padding: 0; z-index: 999; background-color: white; }
.page-footer .bar { width: 90%; margin: 0 auto; display: flex; align-items: center; }
.page-footer .bar > .left { flex: 3; max-height: 50px; }
.page-footer .bar > .right { flex: 2; display: flex; align-items: center; }
.page-footer .bar > .right > .langbar { flex: 3; display: flex; justify-content: center; }
.page-footer .bar > .right > .kSocialLinks { flex: 2; display: flex; justify-content: flex-end; }
.dropdown-trans { max-height: 500px; overflow-y: scroll; border: 1px solid #54a3d8; border-bottom: none; border-bottom-left-radius: 0; }

@media only screen and (max-width: 420px) {
  .timeline::before { left: 0; transform: translate(-0%); }
  
  .timeline-mark { left: 0; transform: translate(-0%); }
  
  .timeline-entry { width: auto; margin-bottom: 15px; }
  .timeline-entry.even, .timeline-entry.odd { margin-left: 27.5px; }
  
  .page-footer .bar > .left { flex: 6; font-size: 2.5vw; }
  .page-footer .bar > .right > .langbar span { display: none; }
}

/* Fallback for no JavaScript */
.no-js .timeline-filter-wrapper { display: none; }

.no-js .timeline::before { left: 0; transform: translate(-0%); }

.no-js .timeline-mark { left: 0; transform: translate(-0%); }

.no-js .timeline-entry { width: auto; margin-bottom: 15px; margin-left: 27.5px; }
.no-js .timeline-entry .below > p { flex: 7; }
.no-js .timeline-entry .below > .captioned-image { flex: 1; }