$eventItemP: 4px;
$eventItemM: 1px;
$eventItemH: 30px;
$eventItemW: 40px;

.events {
    bottom: 0;
    font-size: 0;
    left: 0;
    position: absolute;
    width: 200px;
}

.event-item {
    cursor: pointer;
    display: inline-block;
    // filter: grayscale(100%);
    height: $eventItemH + 2 * $eventItemP;
    // opacity: 0.2;
    margin: $eventItemM;
    overflow: hidden;
    padding: $eventItemP;
    position: relative;
    text-align: center;
    vertical-align: baseline;
    width: $eventItemW + 2 * $eventItemP;
}

.event-year {
    background: #fff;
    border: 1px solid #d5d5d5;
    font-size: 13px;
    height: 30px;
    left: $eventItemP;
    line-height: 30px;
    opacity: 1;
    position: absolute;
    top: $eventItemP;
    transition: opacity 0.15s ease-in;
    width: $eventItemW;
    z-index: 1;
}

.event-flag {
    font-size: $eventItemH;
    z-index: 0;
}

.event-item:hover  {
    // filter: grayscale(0%);
    // opacity: 0.8;

    .event-year {
        // top: -$eventItemH;
        opacity: 0;
    }
}