ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: ' ';
    background: #67bf7e;
    display: inline-block;
    position: absolute;
    left: 30px;
    width: 1px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 50px 0;
    margin-bottom: 6em;
    padding-left: 20px;
    border-top: 5px double ghostwhite;
    border-top-color: rgba(255,255,255,.4);
    display: flex;
    padding-top: 1em;
    
}

.scrollshow { 
  opacity: 1; 
transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
}

ul.timeline li.tl_datemarker:before {
    content: ' ';
    background: #67bf7e;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    left: 25px;
    width: 10px;
    height: 10px;
    z-index: 400;
}

ul.timeline li h1 {
  /* Faux outline for older browsers */
    color: white; /* Unfortunately you can't use transparent here … */
    text-shadow:
	   -1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff
}

/* Real outline for modern browsers */
@supports((text-stroke: 2px black) or (-webkit-text-stroke: 2px black)) {
    ul.timeline li h1 {
        color: transparent;
        -webkit-text-stroke: 1px white;
		    text-stroke: 1px white;
        text-shadow: none;
    }
}

ul.timeline li h1:hover {
  background: #6AC17B;
  background: -webkit-linear-gradient(to right, #6AC17B 0%, #2B93D1 100%);
  background: -moz-linear-gradient(to right, #6AC17B 0%, #2B93D1 100%);
  background: linear-gradient(to right, #6AC17B 0%, #2B93D1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.timeline_content {
  margin-left: 2em; 
}

@media (max-width: 767px) {
  ul.timeline > li { display: block; }
  ul.timeline li.first, ul.timeline li.second, ul.timeline li.third {
    padding-left: auto;
  }
}