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

    .articles-out{
      max-width: 420px;
      .box{
        color: $tertiary-color
      }
    }

    .articles-out .ride-information{
      padding-bottom: 30px;
      li{
        &:before{
          top: 9px;
        }
      }
      .col-md-6{
        width: 100%;
        .box{
          background: none;
          float: inherit;
          height: inherit;
          .aside{
            padding: 0;
            min-height: inherit;
            float: inherit;
            p{
              color: $white;
            }
          }
        }
      }
    }

    &:before{
      border-right: 19px solid $tertiary-color;

      @include media-breakpoint-down(md) {
        border-bottom: 19px solid $tertiary-color;
        border-left: 24px solid transparent;
        border-right: 24px solid transparent;
      }
    }
  }

  .events-highlights, .events-calendar{
    overflow: inherit;
  }

  .events-highlights ul li{
    color: #000000;
    line-height: 1.625rem;
  }

  .events-highlights ul li{
    /* colors for the key are set here. times are hidden for drayton manor in the Month.html partial. */
    &.green-bg, &.dark-green-bg, &.orange-bg, &.blue-bg, &.turquoise-bg, &.magenta-bg, &.rose-bg, &.yellow-bg, &.brown-bg, &.gray-bg, &.light-blue-bg, &.Purple-bg, &.Red-bg{
      &:before{
        font-size: $font-size-12;
        display: block;
        position: relative;
        top: -10px;
        background: none;
        white-space: nowrap;
      }
    }
    &.green-bg:before{
      content: "Zoo Only"; //add campaign titles here
    }
    &.dark-green-bg:before{
      content: "Soft Play, Trains & Zoo"; //add campaign titles here
    }
    &.orange-bg:before{
      content: "Spooktacular Halloween";//add campaign titles here
    }
    &.blue-bg:before{
      content: "Christmas Wonderland";//add campaign titles here
    }
    &.turquoise-bg:before{
      content: "Park Open";//add campaign titles here
    }
    &.magenta-bg:before{
      content: "Fireworks";//add campaign titles here
    }
    &.rose-bg:before{
      content: "May Half Term";//add campaign titles here
    }
    &.yellow-bg:before{
      content: "Summer";//add campaign titles here
    }
    &.brown-bg:before{
      content: "Vikings Festival";//add campaign titles here
    }
    &.gray-bg:before{
      content: "Park closed";//add campaign titles here
    }
    &.light-blue-bg:before{
      content: "Thomas Land & Zoo Only";//add campaign titles here
    }
    &.Purple-bg:before{
      content: "Expected Busy Day";
    }
    &.Red-bg:before{
      content: "Sold Out";
    }

  }

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

    ul li{
      color: $tertiary-color;
      margin: 0px 0.85% 24px 0.85%;

      &.yellow-bg a, &.yellow-bg:after, &.yellow-bg a:hover, &.yellow-bg.active {
        background: $quaternary-color!important;
      }

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

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

      &.blue-bg a, &.blue-bg:after, &.blue-bg a:hover, &.blue-bg.active {
        background: $tertiary-color!important;
      }

      &.turquoise-bg a, &.turquoise-bg:after, &.turquoise-bg a:hover, &.turquoise-bg.active {
        background: #21b2b2!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;
      }

      &.light-blue-bg a, &.light-blue-bg:after, &.light-blue-bg a:hover, &.light-blue-bg.active {
        background: #67BCF2!important;
      }

      &.Purple-bg a, &.Purple-bg:after, &.Purple-bg a:hover, &.Purple-bg.active {
        background:  #881bdc!important;
      }

      &.Red-bg a, &.Red-bg:after, &.Red-bg a:hover, &.Red-bg.active {
        background:  #d31216 !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);
      }
    }

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

#calendar .calendar-spinner {
  filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(100%);
}