.timeline { position: relative; padding: 5em 0 40em; }
.timeline:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 5em; z-index: 1;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
.timeline:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40em; z-index: 1;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.timelineZone { position: relative; height: 175em; }
.timelineLine { position: absolute; top: 0; left: 50%; height: 100%; width: 4px; margin-left: -2px; background: #383057;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  -moz-opacity: .4;
  -khtml-opacity: .4;
  opacity: .4;
}
.timelinePoi { position: absolute; top: 0; left: 50%; overflow: visible; }
.timelinePoi .caption { width: 500px; margin-top: -1px; background: rgba(255,255,255,.8); }
.timelinePoi .caption .title {  border-top: 1px solid #383057; padding-top: .75em; font-family: 'Roboto Slab', serif; font-size: 1.75em; line-height: 1.2em; text-transform: none; font-weight: 400; }
.timelinePoi .caption .title .time { font-size: .6em; font-family: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; }
.timelinePoi .caption .body { font-size: 1em; line-height: 1.5em; border-bottom: 0; padding: 0; background: transparent; }
.timelinePoi.rightAlign .caption .body { text-align: right; }
.timelinePoi.previous {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: .5;
  -khtml-opacity: .5;
  opacity: .5;
}
.timelinePoi .time { position: absolute; display: inline-block; top: 50%; left: 98%; margin-left: 0; padding-right: .5em; font-size: 1em; line-height: 1.2em; margin-top: -.6em; font-family: Roboto, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;
  -moz-transition: all .25s ease-out;
  -webkit-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  white-space: nowrap;
}
.timelinePoi.active .time { margin-left: 1em; background: #fff; }
.timelinePoi.rightAlign .time { left: auto; right: 98%; margin-right: 0; text-align: right; padding-right: 0; padding-left: .5em; }
.timelinePoi.rightAlign.active .time { margin-right: 1em; }