.timeline:not(.timeline--horizontal):before {
background-color: #ddd;
bottom: 0;
content: '';
left: 50%;
margin-left: -2px;
position: absolute;
top: 0;
width: 4px;
z-index: 1;
}
.eplus-timeline-horizontal .timeline__wrap {
position: relative;
overflow: hidden;
z-index: 2;
box-sizing: content-box !important;
}
.eplus-timeline-horizontal .timeline__item {
padding: .625rem 2.5rem .625rem 0;
position: relative;
width: 50%;
z-index: 2
}
.eplus-timeline-horizontal .timeline__item:after {
background-color: #fff;
border: 4px solid #ddd;
border-radius: 50%;
content: '';
height: 20px;
position: absolute;
right: -10px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
width: 20px;
z-index: 1
}
.eplus-timeline-horizontal .timeline__item.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
opacity: 0
}
.eplus-timeline-horizontal .timeline__item.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
.eplus-timeline-horizontal .timeline__item--left {
left: 0
}
.eplus-timeline-horizontal .timeline__item--right {
left: 50%;
padding: .625rem 0 .625rem 2.5rem
}
.eplus-timeline-horizontal .timeline__item--right:after {
left: -10px
}
.eplus-timeline-horizontal .timeline__item--right .timeline__content:before {
border-bottom: 10px solid transparent;
border-right: 12px solid #f5f5f5;
border-left: none;
border-top: 10px solid transparent;
left: -12px
}
.eplus-timeline-horizontal .timeline__item--right .timeline__content:after {
border-bottom: 9px solid transparent;
border-right: 11px solid #fff;
border-left: none;
border-top: 9px solid transparent;
left: -10px
}
.eplus-timeline-horizontal .timeline__content {
background-color: #f5f5f5;
border-radius: 10px;
color: #333;
display: block;
padding: 1.25rem;
position: relative
}
.eplus-timeline-horizontal .timeline__content:before {
content: '';
height: 0;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
width: 0
}
.eplus-timeline-horizontal .timeline__content:before {
border-bottom: 10px solid transparent;
border-left: 12px solid #f5f5f5;
border-top: 10px solid transparent;
right: -12px;
z-index: 1
}
.eplus-timeline-horizontal.timeline--horizontal {
position: relative;
padding: 0 25px;
overflow: hidden;
white-space: nowrap
}
.eplus-timeline-horizontal.timeline--horizontal .timeline-divider {
background-color: #ddd;
display: block;
height: 4px;
left: 40px;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 40px;
z-index: 1
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__items {
-webkit-transition: all .8s;
-o-transition: all .8s;
transition: all .8s;
will-change: transform;
display: flex;
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item {
display: inline-block;
left: 0;
padding: 0 0 2.5rem;
position: relative;
-webkit-transition: none;
-o-transition: none;
transition: none;
vertical-align: top;
white-space: normal
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item:after {
left: 50%;
right: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 100%
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item .timeline__item__inner {
display: table;
height: 100%;
width: 100%
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item .timeline__content__wrap {
display: table-cell;
margin: 0;
padding: 0;
vertical-align: bottom
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item .timeline__content:before {
border: 12px solid transparent;
border-top: 12px solid #f5f5f5;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: 100%;
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item--bottom {
padding: 2.5rem 0 0
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item--bottom:after {
top: 0
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {
vertical-align: top
}
.eplus-timeline-horizontal.timeline--horizontal .timeline__item--bottom .timeline__content:before {
border: 12px solid transparent;
border-bottom: 12px solid #f5f5f5;
bottom: 100%;
top: auto
}
.eplus-timeline-horizontal .timeline-nav-button {
font-size: 0;
background-color: #fff;
border: 3px solid #ddd;
border-radius: 50px;
cursor: pointer;
display: block;
height: 40px;
outline: 0;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
width: 40px;
z-index: 10;
}
.eplus-timeline-horizontal .timeline-nav-button:disabled {
opacity: .5;
pointer-events: none
}
.eplus-timeline-horizontal .timeline-nav-button:before {
font-family: FontAwesome;
display: inline-block;
left: 50%;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
top: 46%;
font-size: 24px;
color: #999;
}
.eplus-timeline-horizontal .timeline-nav-button--prev {
left: 0
}
.eplus-timeline-horizontal .timeline-nav-button--prev:before {
content: "\f104";
}
.eplus-timeline-horizontal .timeline-nav-button--next {
right: 0
}
.eplus-timeline-horizontal .timeline-nav-button--next:before {
content: "\f105";
}
.eplus-timeline-horizontal.timeline--mobile .timeline__item {
left: 0;
padding-left: 40px;
padding-right: 0;
width: 100%
}
.eplus-timeline-horizontal .timeline-icon {
font-size: 28px;
margin-bottom: 10px;
color: #4a4a4a;
}
.eplus-timeline-horizontal .vc-mono:before {
line-height: 0.5;
}
.eplus-timeline-horizontal .post-meta-date {
font-size: 16px;
display: block;
font-weight: 600;
color: #999;
margin-bottom: 5px;
}
.eplus-timeline-horizontal.timeline--mobile .timeline__item:after {
left: 2px;
margin: 0
}
.eplus-timeline-horizontal.timeline--mobile .timeline__item .timeline__content:before {
left: -12px;
border-bottom: 12px solid transparent;
border-right: 12px solid #f5f5f5;
border-left: none;
border-top: 12px solid transparent
}
.eplus-timeline-horizontal.timeline--mobile .timeline__item .timeline__content:after {
left: -10px;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
border-left: none;
border-top: 10px solid transparent
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
top: 70px
}
100% {
opacity: 1;
top: 0
}
}
@keyframes fadeIn {
0% {
opacity: 0;
top: 70px
}
100% {
opacity: 1;
top: 0
}
}
@-webkit-keyframes liftUp {
0% {
top: 0
}
100% {
top: -15px
}
}
@keyframes liftUp {
0% {
top: 0
}
100% {
top: -15px
}
}
@media (max-width: 991px) {
.timeline:not(.timeline--horizontal):before {
left: 27px;
}
}