.eventsHolder{
    position:absolute;
    right: 14.6%;
    top:0;
    height:100%;
    width: 24vw;
    z-index: 1;
    background-color:rgba(0,0,0,0.4);
    padding:10px;
    text-align: center;
}
.eventsHolder h2{
    width:100%;
    text-align:center;
}
table.optredens{
    width: 100%;
    position: relative;
}
table.optredens:not(.large) tr td{
    --fontSize: 19px;
    font-size: var(--fontSize);
    padding: 9px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 33%;
}
table.optredens.large tr td{    
    font-size: 16px;
    line-height: 1.9em;
    font-weight: 300;
    color: var(--themeText);
    padding:8px;
}

table.optredens tr td strong{
}
table.optredens:not(.large) tr td .locatie{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    display: inline-block;
    transform: translateY(3px);
}

table.optredens:not(.large) tr:nth-of-type(0) td{font-size:calc(var(--fontSize) * 1,00);}
table.optredens:not(.large) tr:nth-of-type(1) td{font-size:calc(var(--fontSize) * 0.89);}
table.optredens:not(.large) tr:nth-of-type(2) td{font-size:calc(var(--fontSize) * 0.79);}
table.optredens:not(.large) tr:nth-of-type(2) ~  tr td{font-size:calc(var(--fontSize) * 0.79);}
.eventsHolder .button{
    border:2px solid #fff;
    font-size: 14px;
    margin-top: 10px;
}

.years-box{
    margin-top: 10px;
    padding: 20px 10px 10px;
    display:flex;
    gap:10px;
    width: 100%;
    border-top: 1px solid #fff;
    align-items: center;
    justify-content: center;
}

.years-box a{
    display:block;
    border: 1px solid #fff;
    padding: 5px 10px;
}


@media screen and (max-width:1700px){
    table.optredens:not(.large) tr td{
        --fontSize: 16px;
        padding: 7px;
    }
    .eventsHolder {
        right: 14.6%;
    }
}

@media screen and (max-width:1510px){
    table.optredens:not(.large) tr td{
        --fontSize: 15px;
        padding: 5px;
    }
    .eventsHolder {
        right: 12%;
    }
}

@media screen and (max-width:1380px){
    table.optredens:not(.large) tr td{
        --fontSize: 15px;
        padding: 3px 5px;
    }
    .eventsHolder {
        right: 12%;
        min-width:400px;
    }
}

@media screen and (max-width:1295px){
    table.optredens:not(.large) tr td{
        --fontSize: 15px;
        padding: 2px 5px;
    }
    /* .eventsHolder {
        right: 0%;
    }
    
     */
    
    .eventsHolder {
        --width: 400px;
        left: calc((100vw - var(--width)) /2);
        right: calc((100vw - var(--width)) /2);
        width: var(--width);
    }
    
    @media (-webkit-device-pixel-ratio: 3) {
        table.optredens:not(.large) tr td{
           --fontSize: 10px !important;
        }
   }
}

@media screen and (max-width:1024px){
    table.optredens:not(.large) tr td{
        --fontSize: 17px;
    }
    .years-box{
        display:flex;
        width:100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .years-box a{
        min-width:60px;
        display:inline-block;
        text-align:center;
    }
}

@media screen and (max-width:890px){
    table.optredens:not(.large) tr td{
        --fontSize: 15px;
    }
}
@media screen and (max-width:820px){
    table.optredens:not(.large) tr td{
        --fontSize: 13px;
    }
}
@media screen and (max-width:769px){
    table.optredens:not(.large) tr td{
        --fontSize: 17px;
    }
    .eventsHolder {
        min-width:initial;
    }
    
}
@media screen and (max-width:500px){
    table.optredens:not(.large) tr td{
        --fontSize: 17px;
    }
    
    .eventsHolder {
        --width: calc(100vw - 40px);
    }
    table.optredens.large tr td{
        font-size:12px;
        padding: 8px 5px;
    }
}

@media screen and (max-width:410px){
    table.optredens:not(.large) tr td{
        --fontSize: 15px;
    }
    
    .eventsHolder {
        --width: calc(100vw - 20px);
    }
    table.optredens.large span.plaats,
    table.optredens.large span.time{
        max-width: 55px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    table.optredens.large span.plaats{
        max-width:80px;
    }
}

table.optredens.large tr.optreden-title{}
table.optredens.large tr.optreden-title td{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.8em;
    border-bottom: 1px solid #fff;
}

table.optredens.large tr.optreden-title.verleden td{
    color:var(--themeTint-3);
}
.verleden td strong{
    color:var(--themeTint-3);
}


table.optredens.large tr:not(.optreden-title):nth-of-type(odd) td{
    background-color:var(--themeGrey);
}