/* timeline */
.sTimeline{position:relative;background-color:#fff;padding:0 10%;padding:2em 0 3em;max-width:1080px;margin:0 auto;border-radius:0.25rem;overflow:hidden}
.sTimeline::before{content:'';position:absolute;top:0;left:50%;height:100%;width:1px;background:#aaa}

// event
.sTimeline .event{position:relative;margin:0;overflow:hidden}
.sTimeline .event:before{content:"";position:absolute;top:31px;width:10px;height:10px;border-radius:50%;background-color:#ccc;left:50%;margin-left:-4px;box-shadow:0px 0px 2px 8px #fff;z-index:1;}
.sTimeline .event[data-done]:before{background-color:green;}

// event
.ltr .sTimeline .event:nth-child(even) .box{float:right}
.ltr .sTimeline .event:nth-child(even) .box::before{top:30px;left:auto;right:100%;border-color:transparent;border-right-color:#e8eded}
.rtl .sTimeline .event:nth-child(even) .box{float:left}
.rtl .sTimeline .event:nth-child(even) .box::before{top:30px;left:100%;right:auto;border-color:transparent;border-left-color:#e8eded}

// content
.sTimeline .event .box{position:relative;margin-left:60px;margin-right:30px;background:#e8eded;border-radius:2px;padding:1em;transition:0.3s;color:#fff;padding:1em;width:45%;margin:0 2%}
.sTimeline .event .box h2{color:rgba(0,0,0,0.9);margin-top:0;margin-bottom:5px}
.sTimeline .event .box p{color:rgba(0,0,0,0.7);margin:1em 0;}
.sTimeline .event .detail{background:#f5f6f8;padding:5px 10px;color:rgba(0,0,0,0.7);box-shadow:inset 0 2px 0 rgba(0,0,0,0.08);border-radius:2px;line-height:2em;}
// box mark
.sTimeline .event .box::before{content:'';position:absolute;top:16px;right:100%;height:0;width:0;border:7px solid transparent;border-right:7px solid #e8eded;top:30px;left:100%;border-color:transparent;border-left-color:#e8eded}
.rtl .sTimeline .event .box::before{left:auto;right:100%;border-color:transparent;border-right-color:#e8eded}

// effects
.sTimeline .event .box:hover{background-color:#e4e5e7}




@media only screen and (max-width: 768px) {
  .sTimeline::before{left:10px;}
  .sTimeline .event{margin-bottom:1em;}
  .sTimeline .event:before{left:10px;}
  .sTimeline .event .box{width:88%;float:none!important;margin-left:30px;}
  .sTimeline .event .box::before{top:30px!important;left:auto!important;right:100%!important;border-color:transparent!important;border-right-color:#e8eded!important;}
}