/* your styles go here */
/* Custom CSS for Timeline */
.mt-70 {
    margin-top: 70px
}

.mb-70 {
    margin-bottom: 70px
}

.scroll-area {
    overflow-x: hidden;
    height: 900px
}

.vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 147px;                 /* This should be in proportion with vertical-timeline-element-icon left*/
    height: 100%;
    width: 4px;
    background: #8a8d93;
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 135px;                 /* This should be in proportion with vertical-timeline::before left*/
}

.badge-dot-xl {
    width: 30px;
    height: 20px;
    position: relative;
}

.badge:empty {
    display: none
}

.badge-dot-xl::before {
    width: 10px;
    height: 10px;
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 200px;         /* This should be the same as vertical-timeline-element-content .vertical-timeline-element-date left*/
    font-size: .8rem
}

.vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

.vertical-timeline-element-content .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -200px;               /* This should be the same as vertical-timeline-element-content margin-left*/
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #adb5bd;
    font-size: .7619rem;
    white-space: nowrap
}

.vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}