.timeline-bg {
 margin:0;
 padding:0;
 background-color:#30be76;
 font-family:arial
}
.box {
 /* margin:0 5%; */
 margin: 0%;
 overflow: hidden;
 /* padding:10px 0 40px 60px; */
}
/* .box ul {
 list-style-type:none;
 ! margin:0;
 padding:0;
 position:relative;
 -webkit-transition:all .5s linear;
 transition:all .5s linear;
 top:0
} */
/* .box ul:last-of-type {
 top:80px;
} */
/* .box ul:before {
 content:"";
 display:block;
 width:0;
 height:100%;
 border:1px dashed #fff;
 position:absolute;
 top:0;
 left:30px;
} */
.box ul li {
 /* margin:20px 60px 60px; */

 margin-top: 0;
 margin-bottom: 0;
 margin-left: 60px;
 margin-right: 60px;
 position:relative;
 padding:.5px 20px;
 background:#f5f5f5;
 color:#000;
 border-radius:10px;
 line-height:20px;
 /* width:35%; */
 width:75%;

 -webkit-box-shadow:2px 2px 4px rgba(.8,.8,.3,.3);
 box-shadow:2px 2px 4px rgba(.8,.8,.3,.3);
 -webkit-animation:flip-in-hor-top 2s cubic-bezier(.175,.885,.32,1.275) both;
 animation:flip-in-hor-top 2s cubic-bezier(.175,.885,.32,1.275) both
}
@-webkit-keyframes flip-in-hor-top {
 0% {
  -webkit-transform:rotateX(180deg);
  transform:rotateX(180deg);
  opacity:0
 }
 to {
  -webkit-transform:rotateX(0);
  transform:rotateX(0);
  opacity:1
 }
}
@keyframes flip-in-hor-top {
 0% {
  -webkit-transform:rotateX(180deg);
  transform:rotateX(180deg);
  opacity:0
 }
 to {
  -webkit-transform:rotateX(0);
  transform:rotateX(0);
  opacity:1
 }
}

.box ul li>span {
 width:0;
 height:100%;
 /* border:1px solid #fff; */
 top:0;
 left:-30px
}
.box ul li>span,
.box ul li>span:before {
 content:"";
 display:block;
 position:absolute;
 background-repeat: no-repeat;
}
.box ul li>span:before {
  /* background-image: url('../images/buffalo2.png'); */
 width: 64px;
 height: 64px;
 border-radius:50%;
 /* background:#30be76; */
 border:2px solid #fff;
 left:-50.5px;
 top: -15px;
}


/* ---custom added for farm--- */
.box >span:before {
 width:20px;
 height:20px;
 border-radius:50%;
 background:#30be76;
 border:2px solid #fff;
 left:-10.5px;
 top:45px;
}
/* --------------------------------- */
.box .title {
 text-transform:uppercase;
 font-weight:700;
 margin-bottom:5px;
 color:#30be76
}
.box .info:first-letter {
 text-transform:capitalize;
 line-height:1.7
}
.box .name {
 margin-top:10px;
 text-transform:capitalize;
 font-style:italic;
 text-align:right;
 margin-right:182px
}
.box .time span {
 position:absolute;
 left:-120px;
 color:#fff;
 font-size:80%;
 font-weight:700
}
.box .time span:first-child {
 top:45px
}
.box .time span:last-child {
 top:34%
}
.arrow {
 position:absolute;
 top:105%;
 left:22%;
 cursor:pointer;
 height:20px;
 width:20px
}
.arrow:hover {
 -webkit-animation:arrow 1s linear infinite;
 animation:arrow 1s linear infinite
}
/* .box ul:last-of-type .arrow {
 position:absolute;
 top:105%;
 left:22%;
 -webkit-transform:rotateX(180deg);
 transform:rotateX(180deg);
 cursor:pointer
} */
svg {
 width:20px;
 height:20px
}
@keyframes arrow {
 0%,
 to {
  top:105%
 }
 50% {
  top:106%
 }
}
@-webkit-keyframes arrow {
 0%,
 to {
  top:105%
 }
 50% {
  top:106%
 }
}
ul>li {
 list-style-type:none;
 /* margin-top:5% */
}
.avatar {
 margin-right:1em;
 position:relative;
 border-radius:50%;
 -webkit-box-shadow:0 0 0 3px #fff,0 0 0 4px #999,0 2px 5px 4px rgba(0,0,0,.2);
 box-shadow:0 0 0 3px #fff,0 0 0 4px #999,0 2px 5px 4px rgba(0,0,0,.2)
}
.svg-inline--fa {
 font-size:xx-large
}