.row-timeline {
margin-top: 5em; }
.timeline {
line-height: 1.4em;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
box-sizing: content-box !important; }
.timeline h3 {
line-height: inherit;
margin: 0 0 5px 0 !important;
line-height: 1 !important; }
.timeline p {
margin-top: 0 !important; }
.timeline-item {
padding-left: 40px;
position: relative; }
.timeline-item:last-child {
padding-bottom: 0; }
.timeline-info {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 .5em 0;
text-transform: uppercase;
white-space: nowrap; }
.timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 22px; }
.timeline-marker:before {
background: #0055b7;
border: 3px solid transparent;
border-radius: 100%;
content: "";
display: block;
height: 15px;
position: absolute;
top: 2px;
left: 0;
width: 15px;
transition: background 0.3s ease-in-out, border 0.3s ease-in-out; }
.timeline-marker:after {
content: "";
width: 3px;
background: #CCD5DB;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 9px; }
.timeline-item:last-child .timeline-marker:after {
content: none; }
.timeline-item:not(.period):hover .timeline-marker:before {
background: transparent;
border: 3px solid #0055b7; }
.timeline-content {
padding-bottom: 40px; }
.timeline-content p:last-child {
margin-bottom: 0; }
.period {
padding: 0; }
.period .timeline-info, .period .timeline-content > p {
display: none !important; }
.period .timeline-marker:before {
background: transparent;
content: "";
width: 20px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #CCD5DB;
border-bottom: 3px solid #CCD5DB; }
.period .timeline-marker:after {
content: "";
height: 32px;
top: auto; }
.period .timeline-content {
padding: 40px 0 70px; }
.period .timeline-title {
margin: 0; }
@media (min-width: 768px) {
.timeline-split .timeline, .timeline-centered .timeline {
display: table; }
.timeline-split .timeline-item, .timeline-centered .timeline-item {
display: table-row;
padding: 0; }
.timeline-split .timeline-info, .timeline-centered .timeline-info,
.timeline-split .timeline-marker,
.timeline-centered .timeline-marker,
.timeline-split .timeline-content,
.timeline-centered .timeline-content,
.timeline-split .period .timeline-info,
.timeline-centered .period .timeline-info {
display: table-cell;
vertical-align: top; }
.timeline-split .timeline-marker, .timeline-centered .timeline-marker {
position: relative; }
.timeline-split .timeline-content, .timeline-centered .timeline-content {
padding-left: 30px; }
.timeline-split .timeline-info, .timeline-centered .timeline-info {
padding-right: 30px; }
.timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
position: relative;
left: -45px; } }
@media (min-width: 992px) {
.timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0; }
.timeline-centered .timeline-item {
padding-bottom: 40px;
overflow: hidden; }
.timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px; }
.timeline-centered .timeline-info,
.timeline-centered .timeline-content {
width: calc( 50% - 30px); }
.timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px; }
.timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px; }
.timeline-centered > .timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px; }
.timeline-centered > .timeline-item:nth-child(even) .timeline-content {
float: left;
text-align: right;
padding-right: 30px; }
.timeline-centered > .timeline-item:nth-child(even) .timeline-content p {
width: 100%; }
.timeline-centered > .timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center; }
.timeline-centered .timeline-item.period {
padding: 50px 0 90px; }
.timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto; }
.timeline-centered .period .timeline-title {
left: auto; } }
.marker-outline .timeline-marker:before {
background: transparent;
border-color: #FF6B6B; }
.marker-outline .timeline-item:hover .timeline-marker:before {
background: #FF6B6B; }
.timeline-block-ctrl-group {
display: flex;
margin-bottom: 10px; }
.timeline-block-ctrl-group > button {
border-radius: 0;
padding: 0;
box-shadow: none !important;
border: 1px solid #ababab;
display: flex;
align-items: center;
cursor: pointer; }
.timeline-block-ctrl-group > button:not(:last-child) {
border-right: 0; }
.timeline-block-ctrl-group > button img {
width: 25px;
height: 25px;
padding: 5px;
pointer-events: none; }