.history-items{
position: relative;
background:none !important;
padding: 3rem 0 !important;
}


.history-items .container{
background:#fff;
padding-top:2rem;
padding-bottom:2rem;
}

.history_box::before{
position: absolute;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
content: "";
background: rgba(000, 000, 000, 0.07);
z-index:-2;
}



.history-items::before{
position: absolute;
left: 50%;
width: 20px;
height: 20px;
top:-10px;
margin-left: -10px;
content: "";
border-radius:100%;
border:2px solid #159918;
background-color: #fff;
z-index:-1;
}

.history-items.active::before{
background-color: #159918;
}

.history_box{
position:relative;
padding-bottom:10px;
}

#now{
position: absolute;
left: 50%;
width: 20px;
height: 20px;
top:-5px;
margin-left: -10px;
content: attr(data-item);
border-radius:100%;
background-color: #159918;
z-index:0;
}


.history-items .title{
  position: relative;
  display: inline-block;
  font-size: 2em;
}

.history-items .title:before,
.history-items .title:after{
  position: absolute;
  top: 1.3em;
  content: "";
  display: inline-block;
  width: 0;
  height: 1px; 
  background:  #159918;
  transition: 1s;
}

.history-items .title:before{
  left: 50%;
}

.history-items .title:after{
  right: 50%;
}

.history-items.active .title:before,
.history-items.active .title:after{
  width: 30%;
}


.box h5{
border-bottom:1px solid #ddd;
color:#159918 !important;
line-height:2em;
margin-bottom:1rem;
}