/* Timeline adapted from the original site's custom.css. */
.timeline-decades { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0; }
.timeline-decades a { font-weight: bold; }
.timeline-decades-box { position: sticky; top: 90px; }
.timeline-decades-box .timeline-decades { flex-direction: column; margin: 0; }
@media (min-width: 768px) {
  .timeline-decades-mobile { display: none; }
}
@media (max-width: 767px) {
  .timeline-sidebar { display: none; }
}
.timeline .nazev { font-weight: bolder; }
.timeline { position: relative; width: 660px; max-width: 100%; margin: 20px auto 0; padding: 1em 0; list-style: none; }
.timeline::before { position: absolute; left: 50%; top: 0; content: ''; width: 6px; height: 100%; margin-left: -3px; background: linear-gradient(to bottom, transparent, #505050 8%, #505050 92%, transparent); }
.timeline > li { position: relative; padding: 1em 0; scroll-margin-top: 100px; }
.timeline > li::after { content: ''; display: block; clear: both; }
.timeline .direction-l, .timeline .direction-r { position: relative; width: calc(50% - 30px); }
.timeline .direction-l { float: left; text-align: right; }
.timeline .direction-r { float: right; }
.timeline .flag-wrapper { position: relative; display: inline-block; text-align: center; }
.timeline .flag { position: relative; display: inline-block; background: #f8f8f8; padding: 6px 10px; border-radius: 5px; font-weight: 600; text-align: left; box-shadow: 0 1px 2px #0003; }
.timeline .flag::before { position: absolute; top: 50%; right: -40px; content: ''; width: 12px; height: 12px; margin-top: -10px; background: white; border-radius: 50%; border: 4px solid #b4615d; }
.timeline .direction-r .flag::before { right: auto; left: -40px; }
.timeline .flag::after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left-color: #f8f8f8; }
.timeline .direction-r .flag::after { left: auto; right: 100%; border-left-color: transparent; border-right-color: #f8f8f8; }
.timeline .desc { margin: 1em .75em 0 0; font-size: .77777em; line-height: 1.5; text-align: justify; overflow-wrap: break-word; }
.timeline .direction-r .desc { margin: 1em 0 0 .75em; }
.timeline .timeline-photo { display: block; margin-top: 10px; }
.timeline-photo img { height: 150px; max-width: 100%; object-fit: contain; object-position: left; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .timeline-arrived .direction-l { animation: timeline-left .55s ease-out; }
  .timeline-arrived .direction-r { animation: timeline-right .55s ease-out; }
  @keyframes timeline-left { from { opacity: .3; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
  @keyframes timeline-right { from { opacity: .3; transform: translateX(20px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 999px) {
  .timeline::before { left: 10px; }
  .timeline .direction-l, .timeline .direction-r { float: none; width: auto; margin-left: 40px; text-align: left; }
  .timeline .direction-l .flag::before, .timeline .direction-r .flag::before { left: -40px; right: auto; }
  .timeline .direction-l .flag::after, .timeline .direction-r .flag::after { left: auto; right: 100%; border-left-color: transparent; border-right-color: #f8f8f8; }
  .timeline .direction-l .desc, .timeline .direction-r .desc { margin: 1em 0 0; text-align: left; font-size: .9em; }
}