.events-cont {
    .events-articles {
        .articles-out {
            .box {
                color: $primary-color !important;
                background: none !important;
            }
        }
    }
}   

.events-highlights ul li{
    /* colors for the key are set here. times are hidden in the Month.html partial. */
    &.magenta-bg,&.orange-bg{
      font-size: 0;
      &:before{
        font-size: $font-size-12;
        display: block;
        position: relative;
        top: 1px;
        background: none;
        white-space: nowrap;
      }
    }
    &.magenta-bg:before{
      content: "Uitverkocht";//add campaign titles here
    }
    &.orange-bg:before{
      content: " Duistere Dagen"; //add campaign titles here
    }
  }

  .calendar-box {
    ul li{
        &.magenta-bg {
            a {
              background: #e6007d;
              border: 3px solid #e6007d;
              &:hover{
                background: #e6007d;
              }
            }
            .active {
              background: #e6007d;
            }
          }
    }
  }

.events-cont .calendar-box ul li.magenta-bg a,
.events-cont .calendar-box ul li.magenta-bg:after {
    background: none;
}

/* 2. On hover */
.events-cont .calendar-box ul li.magenta-bg a:hover,
.events-cont .calendar-box ul li.magenta-bg:hover:after {
    background: #e6007d;
}

/* 3. When <a> has active class */
.events-cont .calendar-box ul li.magenta-bg a.active,
.events-cont .calendar-box ul li.magenta-bg a.active:hover,
.events-cont .calendar-box ul li.magenta-bg.active:after {
    background: #e6007d;
}