/*******************************/
/* basic style to make it work */
/*******************************/
.owl-carousel .item .subitem {
    position: relative;
}

.owl-carousel .item .time {
    margin-bottom: 1%;
    padding: 0.6rem;
}

.owl-carousel .item .events {
    padding: 0.6rem;
}

.owl-carousel .item .events .event {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem;
    border-radius: 0.3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}


/********************************/
/* fix links larger than 1 item */
/********************************/
.owl-carousel .owl-item {
    visibility: hidden;
}

.owl-carousel .item .time,
.owl-carousel .item .events .event {
    visibility: visible;
}


/****************/
/* event scheme */
/****************/
.owl-stage-outer {
    background: #eee;
}

.owl-carousel .item .time {
    font-weight: bold;
    background: #05324c;
    color: white;
}

.owl-carousel .item .events .event {
    background: #36648b;
    color: white;
}

.owl-carousel .item .events .W1,
.owl-carousel .item .events .W2,
.owl-carousel .item .events .W3,
.owl-carousel .item .events .W4,
.owl-carousel .item .events .W5 {
    background: darkred;
    color: white;
}

.owl-carousel .item .events .K1,
.owl-carousel .item .events .K2 {
    background: darkgoldenrod;
    color: white;
}


/****************************************************/
/* larger screens should display with a larger font */
/****************************************************/
@media (min-width: 60rem) {
    .owl-carousel .item .subitem {
        font-size: large;
    }
    .owl-carousel .item .events .event {
        font-size: medium;
    }
}

@media (max-width: 60rem) {
    .owl-carousel .item .subitem {
        font-size: medium;
    }
    .owl-carousel .item .events .event {
        font-size: small;
    }
}