/*[][][][][][][][][][][][][][][][][][][] */
/*[][][][][][][ @ Timeline ][][][][][][][] */
/*[][][][][][][][][][][][][][][][][][][] */

.timeline {
  width: 700px;
  height: auto;
  margin: 50px auto 0;
  padding: 20px; 
  box-sizing: border-box;
}

.timeline li{
  position: relative;
  list-style: none; 
}

.source{
  margin-left: 20px;
}

.timeline li .item{
  position: relative;
  min-height: 60px; 
  margin-left: 20px;
  padding: 0 20px 20px 30px; 
  border-left: 1px solid;  
}

.timeline li:last-child .item{
  border-left: 1px solid transparent; 
}

.timeline li .item span{
position: absolute;
top: -8px; 
left: -20px; 
width: 50px;
height: 50px;
line-height: 40px; 
text-align: center;
background: #4846AA; 
color: #fff; 
font-weight: 700; 
border-radius: 50%; 
}

.timeline li .item h3, 
.timeline li .item p {
  margin: 0; 
  padding: 0;
}
.timeline li:hover .item span{
background: #B30000; 
}
/* Use a media query to add a breakpoint at 375px: */
@media screen and (min-width: 375px) {
.source, .item, .timeline {
  width: 100%; /* The width is 100%, when the viewport is 375px or smaller */
}
}