body{
    background: #ecedee;
}
/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    /* max-width: 1200px; */
    margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */

.timeline::after {
    content: "";
    position: absolute;
    width: 6px;
    background-color: #d20b05;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.timeline .year:first-child {
    margin-top: 0 !important;
}

            .timeline .grouped {
                position: relative;
                padding-top: 100px;
                padding-bottom: 30px;
            }

            .timeline .year {
                position: absolute;
                width: 70px;
                height: 70px;
                background-color: #fff;
                top: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                border-radius: 50%;
                z-index: 1;
                text-align: center;
                align-content: center;
                display: grid;
                border: 5px solid #d20b05;
            }

            .timeline .year .year-text {
                font-weight: bold;
                padding-top: 12px;
            }
            /* timeline-block around content */

            .timeline-block {
                padding: 10px 40px;
                position: relative;
                background-color: inherit;
                width: 50%;
            }
            /* The circles on the timeline */

            .timeline-block::after {
                content: "";
                position: absolute;
                width: 25px;
                height: 25px;
                right: -13px;
                background-color: white;
                border: 4px solid #d20b05;
                /*#ff9f55;*/
                top: 20px;
                border-radius: 50%;
                z-index: 1;
            }
            /* Place the timeline-block to the left */

            .timeline .left {
                left: 0;
            }
            /* Place the timeline-block to the right */

            .timeline .right {
                left: 50%;
            }
            /* Add arrows to the left timeline-block (pointing right) */

            .timeline .left::before {
                content: " ";
                height: 0;
                position: absolute;
                top: 22px;
                width: 0;
                z-index: 1;
                right: 30px;
                border: medium solid white;
                border-width: 10px 0 10px 10px;
                border-color: transparent transparent transparent #d20b05;
                /* #ff9f55; */
            }
            /* Add arrows to the right timeline-block (pointing left) */

            .timeline .right::before {
                content: " ";
                height: 0;
                position: absolute;
                top: 22px;
                width: 0;
                z-index: 1;
                left: 30px;
                border: medium solid white;
                border-width: 10px 10px 10px 0;
                border-color: transparent #d20b05 transparent transparent;
            }
            /* Fix the circle for timeline-blocks on the right side */

            .timeline .right::after {
                left: -12px;
            }
            /* The actual content */

            .timeline .content {
                padding: 20px;/* 30px 5px;*/
                background-color: white;
                position: relative;
                border-radius: 6px;
                border: 1px solid #d20b05;
            }

            .timeline .content .img {
                /* height: 60px; */
                border-radius: 4px;
                overflow: hidden;
            }

            .timeline .content .img img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .timeline .content .title {
                font-size: 1rem;
            }

            .timeline .content .title a {
                text-decoration: none;
                font-family: 'Source Sans Pro';
                color: rgb(41, 40, 40);
                font-weight: bold;
            }
            /* Media queries - Responsive timeline on screens less than 600px wide */

            @media screen and (max-width: 700px) {
                .timeline .content .img {
                    height: 200px;
                }
                /* Place the timelime to the left */
                .timeline::after {
                    left: 31px;
                }
                /* Full-width timeline-blocks */
                .timeline-block {
                    width: 100%;
                    padding-left: 70px;
                    padding-right: 25px;
                }
                /* Make sure that all arrows are pointing leftwards */
                .timeline-block::before {
                    left: 60px;
                    border: medium solid white;
                    border-width: 10px 10px 10px 0;
                    border-color: transparent white transparent transparent;
                }
                /* Make sure all circles are at the same spot */
                .timeline .left::after,
                .timeline .right::after {
                    left: 6px;
                }
                /* Make all right timeline-blocks behave like the left ones */
                .timeline .right {
                    left: 0%;
                }
            }