@media screen and (min-width: 850px) { .timeline { min-height: 100vh; margin: 0; }
  .timeline:before { content: ''; position: relative; top: 0px; left: 50%; bottom: 0px; -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10px; background-color: lightgrey; }
  .timeline .entries { width: calc(100% - 80px); max-width: 800px; margin: auto; position: relative; left: -5px; }
  .timeline .entries .entry { width: calc(50% - 40px); float: left; padding: 20px; clear: both; text-align: right; }
  .timeline .entries .entry:not(:first-child) { margin-top: -60px; }
  .timeline .entries .entry .title { font-size: 26px; margin-bottom: 12px; position: relative; line-height: 1; }
  .timeline .entries .entry .title:before { content: ''; position: absolute; width: 8px; height: 8px; background-color: #545454; border-radius: 100%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); right: -64px; z-index: 1000; }
  .timeline .entries .entry .title.big:before { width: 24px; height: 24px; -ms-transform: translate(8px, -50%); transform: translate(8px, -50%); }
  .timeline .entries .entry .body { color: black; }
  .timeline .entries .entry .body p { line-height: 1.4em; }
  .timeline .entries .entry:nth-child(2n) { text-align: left; float: right; }
  .timeline .entries .entry:nth-child(2n) .title:before { left: -64px; }
  .timeline .entries .entry:nth-child(2n) .title.big:before { -ms-transform: translate(-8px, -50%); transform: translate(-8px, -50%); } }

.title { font-family: "Roboto"; font-weight: bold; }

.charcoalBG { background-color: #333333; }

.realWhiteBG { background-color: #FFFFFF; }

.paddingToTheLeft { padding-left: 10px; }

@media screen and (max-width: 850px) { .responsiveIMG { width: 120px; height: 120px; } }

.wrapper { width: 100%; padding-left: 15%; padding-right: 15%; padding-bottom: 40.25%; position: relative; height: 0; margin-bottom: 16px; overflow: hidden; }

@media screen and (max-width: 1100px) { .wrapper { min-height: 400px; } }

@media screen and (min-width: 1100px) { .wrapper { min-height: 600px; } }

.wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 18%; }

.wrapper :after { content: ""; display: block; padding-bottom: 40.25%; /* Which is the padding of div.container */ }

.rightPadding { padding-right: 2%; }