.timeline__slider {
    width: 100%;
    overflow-x: scroll;
    margin-top: 3rem;
}

div#opleidingen {
    position: relative;
}

    div#opleidingen .maanden div,
    div#opleidingen .jaren div {
        position: absolute;
        height: 100%;
        font-family: 'RotisSemiSansPro-Bold';
        padding-left: .5rem;
    }

    div#opleidingen .jaren div {
        height: 3rem;
        font-size: 2rem;
        color: var(--blue);
    }

    div#opleidingen .maanden,
    div#opleidingen .jaren {
        clear: both;
        text-transform: capitalize;
        height: 3rem;
    }

        div#opleidingen .maanden .maand.oneven {
            background-color: #f6f7f4;
        }

        div#opleidingen .jaren .jaar.oneven {
            /*background-color: rgba(219, 220, 195, 0.2);*/
        }

    div#opleidingen .opleiding-container {
        position: relative;
        clear: both;
    }

    div#opleidingen .opleiding-prebar {
        position: relative;
        float: left;
    }

    div#opleidingen .opleiding {
        position: relative;
        float: left;
        clear: right;
        margin: 0 0 .5rem;
        cursor: pointer;
    }

        div#opleidingen .opleiding span {
            font-size: 1.4rem;
            line-height: 2rem;
        }

            div#opleidingen .opleiding span.titel {
                padding: 1rem 1rem 0;
                display: block;
                float: left;
            }

            div#opleidingen .opleiding span.startdatum,
            div#opleidingen .opleiding span.einddatum {
                opacity: 0.5;
                display: block;
                float: left;
                padding: 0 1rem 1rem;
            }

        div#opleidingen .opleiding.kleur {
            background-color: rgba(182, 186, 159,.4);
        }

        div#opleidingen .opleiding-container:nth-child(odd) .opleiding.kleur {
            background-color: rgba(182, 186, 159,.6);
        }

    div#opleidingen .opleiding.kleur.driejarige {
        background-color: rgba(24, 103, 117, .4) !important;
    }

    div#opleidingen .opleiding.kleur a {
        display: flex;
        flex-flow: column;
        color: var(--black);
    }

    div#opleidingen .opleiding.kleur a:hover {
        background-color: var(--beige);
        color: var(--black);
    }

    div#opleidingen .opleiding.kleur.driejarige a:hover {
        background-color: rgba(24, 103, 117, .8) !important;
    }





table#workshops {
    width: 2100px;
}

    /*
table#workshops  td,
table#workshops th {
	border: 1px solid red;
}
*/

    table#workshops th {
        font-family: 'RotisSemiSansPro-Bold';
        font-size: 2rem;
    }

    table#workshops td.categorie {
        font-family: 'RotisSemiSansPro-Bold';
        font-size: 1.6rem;
        line-height: 2rem;
    }

        table#workshops td.categorie div {
            min-height: 5rem;
            display: flex;
            align-content: center;
            align-items: center;
            padding-right: 1rem;
        }

            table#workshops td.categorie div a {
                color: var(--blue);
            }

            table#workshops td {
                padding: 0;
                min-height: 5rem;
            }

    table#workshops .table-line {
        width: 100%;
        height: 1px;
        background-image: linear-gradient(to right, #707070 33%, rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 5px 1px;
        background-repeat: repeat-x;
    }

    table#workshops td:nth-child(even) {
        background-color: #f6f7f4;
    }

    table#workshops div.workshop span {
        font-size: 0.8em;
    }

    table#workshops div.workshop .titel {
    }

    table#workshops div.workshop .datum {
        opacity: 0.5;
    }

    table#workshops div.workshop {
        width: calc(100% - 1rem);
        height: 100%;
        margin: .5rem;
        line-height: 1em;
        text-align: center;
        cursor: pointer;
        background-color: rgba(182, 186, 159,.4);
    }


        table#workshops div.workshop.even {
            background-color: rgba(182, 186, 159,.6);
        }

        table#workshops div.workshop a {
            display: block;
            padding: .5rem;
            min-height: 5rem;
            color: var(--black);
        }

        table#workshops div.workshop a:hover {
            background-color: var(--beige);
        }