ul.timeline-list {
    margin-top: 50px;
}

.timeline-item .timeline-item-job {
    font-size: 24px;
    line-height: 32px;
    color: #d3d3d3;
    font-weight: 600;
    text-transform: uppercase;
}

.timeline-item .timeline-item-job a {
    color: #d3d3d3;
    text-decoration: none;
}

.timeline-item .timeline-item-date {
    font-size: 14px;
    line-height: 24px;
    display: flex;
}

.timeline-item.odd .timeline-item-date {
    justify-content: flex-end;
}

.drawer-timeline-company {
    margin-top: 105px;
    font-size: 38px;
    line-height: 50px;
    color: #d3d3d3;
    font-weight: 600;
    text-transform: uppercase;
}

.drawer-timeline-city {
    line-height: 1.5rem;
    font-size: 14px;
    display: flex;
}

.timeline-image {
    margin-left: -25px;
    margin-right: 0;
    bottom: 0;
    position: absolute;
}

.drawer-timeline-description, .drawer-timeline-technology {
    margin-top: 30px;
}

.drawer-timeline-technology {
    line-height: 1.5rem;
    font-size: 14px;
}

.drawer-timeline-technology ul {
    column-count: 3;
    column-gap: 30px;
    padding-left: 20px;
}

.drawer-timeline-description p {
    font-size: 14px;
}

.drawer-timeline-technology p {
    font-size: 14px;
    margin: 0;
}

.timeline-image img {
    width: 100%;
    height: auto;
    filter: grayscale(1);
}

.timeline-image-headline {
    font-size: 38px;
    line-height: 50px;
    position: absolute;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 24px;
    z-index: 3;
    text-shadow: 1px 1px 3px black;
}

.offcanvas.offcanvas-end {
    width: 640px;
    padding: 25px;
    text-align: left;
    background: #ffffff !important;
}

ul.timeline-list:after {
    width: 1px;
}

ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-marker {
    left: -5px;
}

ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-marker {
    right: -5px;
}

ul.timeline-list li.timeline-item .timeline-item-wrapper span.timeline-marker {
    border-width: 2px;
    border-color: #480862;
}

@media screen and (max-width: 996px) {
    .offcanvas.offcanvas-sm {
        width: 100%;
    }

    .offcanvas-sm .offcanvas-header {
        display: block;
    }

    .offcanvas-header {
        justify-content: flex-end;
        top: 35px;
        position: relative;
        text-align: right;
    }

    .timeline-item .timeline-item-job {
        hyphens: auto;
    }

    .drawer-timeline-description,.drawer-timeline-technology {
        margin-top: 25px;
    }

    .drawer-timeline-description p, .drawer-timeline-technology ul li p {
        font-size: 14px;
    }

    .timeline-image {
        width: 100%;
        height: 40vh;
    }

    .drawer-timeline-company {
        margin-top: 25px;
        font-size: 24px;
        line-height: 30px;
    }
}