.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 .builder_-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; } }