.events-cont {

  .events-highlights ul li {
    color: #000000;
    font-size: $font-size-12;
  }

  .events-articles {
    background: $tertiary-color;

    &:before {
      border-right-color: $tertiary-color;
    }

    h3, h4, .articles-out .box {
      font-family: $font-family-primary;
      font-weight: $font-weight-bold;
    }

    .articles-out .box {
      color: #000000;
    }
  }

  .calendar-box .month {
    background: $tertiary-color;
  }

  .calendar-box, .events-highlights {
    border: none;

    .days ul li {
      color: $tertiary-color;
    }

    ul li {

      &.no-bg a, &.no-bg:after, &.no-bg a:hover, &.no-bg.active {
        color: #e3e3e3;
      }

      &.yellow-bg a, &.yellow-bg:after, &.yellow-bg a:hover, &.yellow-bg.active {
        background: #ffd500 !important;
      }

      &.green-bg a, &.green-bg:after, &.green-bg a:hover, &.green-bg.active {
        background: #ABD144 !important;
      }

      &.brown-bg a, &.brown-bg:after, &.brown-bg a:hover, &.brown-bg.active {
        background: #b31117 !important;
      }

      &.brown-red-bg a, &.brown-red-bg:after, &.brown-red-bg a:hover, &.brown-red-bg.active {
        background: #b31117 !important;
      }

      &.blue-bg a, &.blue-bg:after, &.blue-bg a:hover, &.blue-bg.active {
        background: #009ee3 !important;
      }

      &.turquoise-bg a, &.turquoise-bg:after, &.turquoise-bg a:hover, &.turquoise-bg.active {
        background: #10a19a !important;
      }

      &.rose-bg a, &.rose-bg:after, &.rose-bg a:hover, &.rose-bg.active {
        background: #f6bed9 !important;
      }

      &.magenta-bg a, &.magenta-bg:after, &.magenta-bg a:hover, &.magenta-bg.active {
        background: #e6007d !important;
      }

      &.orange-bg a, &.orange-bg:after, &.orange-bg a:hover, &.orange-bg.active {
        background: #f29100 !important;
      }

      &.black-bg a, &.black-bg:after, &.black-bg a:hover, &.black-bg.active {
        background: #000000 !important;
      }

      a {
        color: $white;
        border: none !important;

        &:hover {
          border: 2px solid #000000 !important;
          box-shadow: inset #ffffff 0 0 0 2px;
        }

        &.active {
          border: 2px solid #000000 !important;
          box-shadow: inset #ffffff 0 0 0 2px !important;
        }
      }

      &:after {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
      }
    }
  }

  .calendar-box, .events-articles {
    border-radius: 8px;
  }

  .calendar-box {
    .prevmonth {

      &:after {
        content: "\f355";
      }
    }

    .nextmonth {
      &:after {
        content: "\f356";
      }
    }
  }

  .events-articles {
    background-color: rgba(126, 178, 41, 0.4);
    padding: 20px;

    .time {
      padding-left: 0;

      .icon {
        display: none;
      }
    }

    &:before {
      border: none;
    }

    .articles-out {
      max-width: 100%;

      > .row > .col-md-6 {
        flex: 1 1 100%;
        width: 100%;
        height: 160px;
        @include media-breakpoint-down(md) {
          height: 110px;
        }

        .box {
          position: relative;
          border-radius: 8px;
          background-color: transparent;
          
          > .figure {
            height: 100%;
            width: 100%;
            position: relative;

            &:before {
              content: " ";
              position: absolute;
              z-index: 1;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              background: linear-gradient(0deg, rgba(0, 0, 0, 0.67) 0%, rgba(255, 255, 255, 0) 64%);
            }

            img {
              height: 100%;
              object-fit: cover;
            }
          }

          > .aside {
            position: absolute;
            z-index: 3;
            background: none;
            left: 0;
            bottom: 0;
            min-height: auto;
            padding: 20px;

            p {
              color: $primary-color;
              font-weight: 900;
            }
          }
        }
      }
    }
  }
}