.timeline {
  list-style: none;
  margin-left: -40px;
  
}
.timeline > li {
  margin-bottom: 60px;
}

@media ( max-width : 640px ){

  .timeline-content1 {

    background-color:#d2edad;
    border-radius:11px;

  }


    .timeline-content2 {

    background-color:#b8eff2;
    border-radius:11px;

  }

}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 150px;
    float: left;
    margin-top: 10px;
    text-align:center;
  }
  .timeline-content1 {
    width: 75%;
    float: left;
    background-color:#d2edad;
    border-radius:11px;
    margin-bottom:10px;
    border-left: 5px #e8625a solid;
    padding-left: 10px;
  }
  
    .timeline-content2 {
    width: 75%;
    float: left;
    background-color:#b8eff2;
    border-radius:11px;
    margin-bottom:10px;
    border-left: 5px #e8625a solid;
    padding-left: 10px;
  }
  
  
  .timeline-content1:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #e8625a;
    position: absolute;
    left: 143px;
    top: 24px;
    border-radius: 100%;
  }
}



  .timeline-content2:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #e8625a;
    position: absolute;
    left: 143px;
    top: 24px;
    border-radius: 100%;
  }
}