.clearfix{clear:both;}
.VivaTimeline{width:100%;position:relative;padding-bottom:100px;}
.VivaTimeline dl{overflow:hidden;z-index:1;}
.VivaTimeline dl dd.hide{display:none;}
.VivaTimeline dl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background-color:#b3b3b3;transform:translateX(-50%);}
.VivaTimeline dl dd{width:50%;min-height:200px;position:relative;}
.VivaTimeline dl dd .events{padding:0;background-color:transparent;border:1px solid #ccc;border:none;width:70%;font-size:14px;line-height:22px;}
.VivaTimeline dl dd .events::before{display:none;}
.VivaTimeline dl dd .circ{width:20px;height:20px;border-radius:50%;background-color:#b3b3b3;position:absolute;left:100%;top:25%;border:none;margin-left:-10px;}
.VivaTimeline dl dd:nth-child(2n) .circ{left:0;}
.VivaTimeline dl dd > .time{color:#cb060d;width:110px;border-bottom:2px solid #cb060d;font-size:16px;font-weight:bold;}
.VivaTimeline dl dd:nth-child(2n){float:right;}
.VivaTimeline dl dd:nth-child(2n+1){float:left;}
.VivaTimeline dl dd:not(:nth-child(1)){margin-top:-100px;}
.VivaTimeline dl dd:nth-child(2n) .time{text-align:center;font-size:16px;margin-left:0;left:0;top:25%;margin-top:-10px;border-bottom-color:#b3b3b3;position:absolute;}
.VivaTimeline dl dd:nth-child(2n+1) .time{margin-left:-110px;text-align:center;font-size:16px;left:100%;top:25%;margin-top:-10px;border-bottom-color:#b3b3b3;position:absolute;}
.VivaTimeline dl dd:nth-child(2n) .events{float:right;margin-top:0px;text-align:left;}
.VivaTimeline dl dd:nth-child(2n+1) .events{float:left;margin-top:0;text-align:right;}
.VivaTimeline dl dd .events .events-body{background-color:#fff;border:none;padding:20px;}
.VivaTimeline dl dd .events .events-body .img{}
.VivaTimeline dl dd .events .events-body .txt{}
.VivaTimeline dl dd .events .events-body .txt h4{font-size:20px;line-height:24px;font-weight:bold;}
.VivaTimeline dl dd .events .events-body .txt span.date{font-size:16px;line-height:24px;margin-bottom:10px;display:inline-block;}
.VivaTimeline dl dd .events .events-body .txt p{font-size:14px;line-height:20px;margin-bottom:0;}
.VivaTimeline dl dd .events .events-body .txt a.more{color:#cb060d;font-size:16px;}
.VivaTimeline dl dd .events .events-body .txt a.more:hover{text-decoration:underline;}
.VivaTimeline a.loading{display:inline-block;width:100px;height:40px;line-height:40px;background-color:#cb060d;color:#fff;text-align:center;position:absolute;left:50%;margin-left:-50px;z-index:2;border-radius:5px;}
.VivaTimeline a.loading:hover{opacity:0.8;}

@media screen and (min-width:992px) and (max-width:1199px){
    .VivaTimeline{width:90%;}
}
@media screen and (min-width:768px) and (max-width:991px){
    .VivaTimeline{width:100%;}
    .VivaTimeline dl dd .events{width:240px;}
}
@media (max-width:767px){
    .VivaTimeline{width:100%;}
    .VivaTimeline dl dd{width:100%;margin-bottom:15px;}
    .VivaTimeline dl::before{left:20px;}
    .VivaTimeline dl dd:not(:nth-child(1)){margin-top:0;}
    .VivaTimeline dl dd .circ{left:20px;}
    .VivaTimeline dl dd:nth-child(2n) .circ{left:20px;}
    .VivaTimeline dl dd:nth-child(2n) .time{left:20px;}
    .VivaTimeline dl dd .events{width:220px;}
    .VivaTimeline dl dd .time{top:80px;left:20px;}
    .VivaTimeline dl dd:nth-child(2n+1) .time{margin-left:0;left:20px;}
    .VivaTimeline dl dd:nth-child(2n+1) .events{float:right;}
    .VivaTimeline dl dd .events .events-body{padding:10px 0 10px 15px;}
    .VivaTimeline dl dd .events .events-body .txt h4{font-size:14px;line-height:20px;}
    .VivaTimeline dl dd .events .events-body .txt span.date{font-size:14px;line-height:20px;}
    .VivaTimeline dl dd .events .events-body .txt p{font-size:13px;line-height:20px;}
}