.timeline-container {
     position: relative;
}
 .timeline-container::after {
     content: '';
     display: table;
     clear: both;
}
 .timeline {
     width: 100%;
}
 .timeline-list {
     position: relative;
     width: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
}
 .timeline-list-wrap {
     position: relative;
     top: -18px;
     left: 0;
     display: block;
     transform: translate3d(0, 0, 0);
     transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 .timeline-item {
     float: left;
     width: 800px;
     height: 400px;
     border: 1px solid #ddd;
     box-sizing: border-box;
}
 .timeline-dots-wrap {
     position: absolute;
     overflow: hidden;
}
 .timeline-horizontal .timeline-dots-wrap {
     width: 100%;
     height: 60px;
}
 .timeline-vertical .timeline-dots-wrap {
     width: 65px;
     height: 100%;
     top: 0;
}
 .timeline-dots-wrap.bottom {
     bottom: -50px;
}
 .timeline-dots-wrap.top {
     top: 40%;
}
 .timeline-dots-wrap.left {
     left: -65px;
}
 .timeline-dots-wrap.right {
     right: -70px;
}
 .timeline-dots {
     margin: auto;
     padding: 0;
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     z-index: 2;
}

.timeline-dots:after{
     content: '';
     position: absolute;
     width: 81%;
     height: 1px;
     background: #fff;
     left: 52px;
     bottom: 8px;
}
 .timeline-horizontal .timeline-dots {
 }
 .timeline-vertical .timeline-dots {}
 .timeline-dots li {
     position: relative;
     transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     list-style: none;
     overflow: hidden;
}
 .timeline-horizontal .timeline-dots li {
     /*float: left;*/
     display: inline-block;
     text-align: center;
     vertical-align: top;
     margin: auto 15px;
     word-break: break-word;
     width: 165px;
     height: 60px;
}
 .timeline-vertical .timeline-dots li {
     width: 100%;
}
 .timeline-dots li.slide-active button {
     color: #ff009e;
     font-size: 16px;
}

.timeline-dots li.slide-active button:after{
     background: #ff009e;
}
 .timeline-dots button {
     cursor: pointer;
     border: none;
     outline: none;
     color: #fff;
     font-size: 16px;
     transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
     position: relative;
}

.timeline-dots button:after{
     position: absolute;
     content: '';
     width: 8px;
     height: 8px;
     background: #fff;
     left: 0;
     right: 0;
     margin: auto;
     bottom: 5px;
     z-index: 1;
}
 .timeline-horizontal .timeline-dots button {
     background: url("../img/date-icon.png") bottom no-repeat;
     padding-bottom: 21px;
}
 .timeline-vertical .timeline-dots button {
     background: url("../img/date-icon-vertical.png") left no-repeat;
     padding-left: 15px;
}
/* .timeline-container {
     width: 800px;
     margin: 0 auto;
}
 .timeline-list {
     width: 800px;
}
 .timeline-item {
     width: 800px;
     height: 400px;
     padding: 10px;
     border: 1px solid #ddd;
}
 */