.Timeline { overflow: hidden; position: relative; margin-bottom: 2em; }
.Timeline > h4 { max-width: 7em; margin: 0 auto 1em; padding: 0.25em 0.5em; clear: both; text-align: center; font-weight: 300; border-radius: 0.25em; }
.Timeline .Timeline-yearEvents { padding: 0; list-style: outside none; overflow: hidden; }
.Timeline .Timeline-yearEvents > li { padding: 2%; border-radius: 8px; margin: 0 0 1em 1em; position: relative; }
.Timeline .Timeline-yearEvents > li:last-child { margin-bottom: 1.75em; }
.Timeline .Timeline-yearEvents > li:before { content: ""; position: absolute; left: -0.75em; top: 0.5em; z-index: 100; }

.Timeline--light { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #222222), color-stop(0.9%, #222222), color-stop(1%, transparent)); background-image: -webkit-linear-gradient(left, #222222 0%, #222222 0.9%, transparent 1%); background-image: -moz-linear-gradient(left, #222222 0%, #222222 0.9%, transparent 1%); background-image: linear-gradient(left, #222222 0%, #222222 0.9%, transparent 1%); }
.Timeline--light .Timeline-yearEvents > li { color: #222222; background-color: #dddddd; }
.Timeline--light .Timeline-yearEvents > li:before { border-left: 6px solid transparent; border-right: 6px solid #ddd; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.Timeline--light > h4 { color: #222222; background-color: #dddddd; border: 0.35em solid #222222; }

.Timeline--dark { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(0.9%, #dddddd), color-stop(1%, transparent)); background-image: -webkit-linear-gradient(left, #dddddd 0%, #dddddd 0.9%, transparent 1%); background-image: -moz-linear-gradient(left, #dddddd 0%, #dddddd 0.9%, transparent 1%); background-image: linear-gradient(left, #dddddd 0%, #dddddd 0.9%, transparent 1%); }
.Timeline--dark .Timeline-yearEvents > li { color: #dddddd; background-color: #333333; }
.Timeline--dark .Timeline-yearEvents > li:before { border-left: 6px solid transparent; border-right: 6px solid #333; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.Timeline--dark > h4 { color: #dddddd; background-color: #333333; border: 0.35em solid #dddddd; }

@media only screen and (min-width: 45em) { .Timeline--light { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(49.59%, transparent), color-stop(49.6%, #222222), color-stop(49.9%, #222222), color-stop(50%, transparent)); background-image: -webkit-linear-gradient(left, transparent 0%, transparent 49.59%, #222222 49.6%, #222222 49.9%, transparent 50%); background-image: -moz-linear-gradient(left, transparent 0%, transparent 49.59%, #222222 49.6%, #222222 49.9%, transparent 50%); background-image: linear-gradient(left, transparent 0%, transparent 49.59%, #222222 49.6%, #222222 49.9%, transparent 50%); }
  .Timeline--light .Timeline-yearEvents > li:nth-of-type(odd):before { content: ""; left: auto; right: -0.75em; border-left: 6px solid #ddd; border-right: 6px solid transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .Timeline--dark { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, transparent), color-stop(49.59%, transparent), color-stop(49.6%, #dddddd), color-stop(49.9%, #dddddd), color-stop(50%, transparent)); background-image: -webkit-linear-gradient(left, transparent 0%, transparent 49.59%, #dddddd 49.6%, #dddddd 49.9%, transparent 50%); background-image: -moz-linear-gradient(left, transparent 0%, transparent 49.59%, #dddddd 49.6%, #dddddd 49.9%, transparent 50%); background-image: linear-gradient(left, transparent 0%, transparent 49.59%, #dddddd 49.6%, #dddddd 49.9%, transparent 50%); }
  .Timeline--dark .Timeline-yearEvents > li:nth-of-type(odd):before { content: ""; left: auto; right: -0.75em; border-left: 6px solid #333; border-right: 6px solid transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .Timeline .Timeline-yearEvents > li { width: 44%; margin: 0 0 1em 0; }
  .Timeline .Timeline-yearEvents > li:nth-of-type(even) { float: right; margin-top: 2%; }
  .Timeline .Timeline-yearEvents > li:nth-of-type(odd) { float: left; }
  .Timeline .Timeline-yearEvents > li:nth-of-type(2n+1) { clear: both; } }