/*
 CSS for the elements on the "What's On" page.
 This version is for the implementation using Owl Carousel
 */
/* Category nav buttons ---------------------------------- */
#site-body.events-page .event-category-nav {
  margin-bottom: 25px;
}

#site-body.events-page .event-category-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#site-body.events-page .event-category-nav ul li::before {
  content: '' !important;
  margin: 0;
}

#site-body.events-page .event-category-nav ul li {
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

#site-body.events-page .event-category-nav #eventFilterContainer ul li.btn-event-cat.active {
  background-color: #d0a379;
  color: #fff;
}

#site-body.events-page .event-category-nav ul li a {
  display: block;
  padding: .375rem .75rem;
  background-color: #043673;
  color: #fff;
  text-decoration: none;
}

#site-body.events-page .event-category-nav #eventFilterContainer ul li {
  padding: .375rem .75rem;
  background-color: #043673;
  color: #fff;
  text-decoration: none;
  font-size: .85em;
}

#site-body.events-page .event-category-nav ul li.active {
  padding: .375rem .75rem;
  background-color: #d0a379;
  color: #fff;
  text-decoration: none;
}

#site-body.events-page .event-category-nav ul li a:hover,
#site-body.events-page .event-category-nav ul li a:focus,
#site-body.events-page .event-category-nav ul li a:active {
  background-color: #d0a379;
}

#site-body.events-details-page img {
  max-width: 800px;
}

/* Event snippets ---------------------------------------- */
/*
.whats-on2-view {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
*/

.whats-on2-view {
  margin-left: 57px;
  margin-right: 57px;
}

.whats-on2-view .owl-carousel .owl-stage {
  display: flex;
}

.whats-on2-view .owl-carousel .item,
.whats-on2-view .owl-carousel .item > a {
  height: 100%;
}


.whats-on2-view .whats-on-item {
  flex: 0 0 25%;
  position: relative;
  border: 4px solid #fff;
  display: flow-root;
}

.whats-on2-view .whats-on-item.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.whats-on2-view .whats-on-item.filterDiv.show {
  display: block;
}

.whats-on2-view .whats-on-item:hover,
.whats-on2-view .whats-on-item:focus,
.whats-on2-view .whats-on-item:active {
  text-decoration: none;
}

.whats-on2-view .event-date--desktop {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  background: rgba(255, 255, 255, .7);
}

.whats-on2-view .desktop-view-content {
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: -1;
}

.whats-on2-view .event-date--desktop .day {
  font-weight: 700;
  font-size: 2.2em;
  margin-bottom: 0;
  line-height: 1;
  color: #043673;
}

.whats-on2-view .event-date--desktop .month {
  font-weight: 900;
  color: #043673;
  text-transform: uppercase;
  font-size: .95em;
}

.whats-on2-view .whats-on-item .event-img {
  height: 100%;
}

.whats-on2-view .whats-on-item .event-img .event-img-wrap {
  height: 100%;
  position: relative;
}

.whats-on2-view .whats-on-item .event-img img {
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
  max-width: 230px;
  height: auto;
}

.whats-on2-view .whats-on-item .event-name {
  color: #043673;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.whats-on2-view .whats-on-item .location {
  color: #d0a379;
  line-height: 1.2
}

.whats-on2-view .whats-on-item .event-name--special {
  position: absolute;
  background-color: #043673;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 15px;
  font-weight: 700;
  color: white;
}


/* Carousel nav elements */
.whats-on2-view .owl-carousel .owl-nav {
  position: absolute;
  /*top: 50%;*/
  /*-webkit-transform: translateY(-50%);*/
  /*transform: translateY(-50%);*/
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 100%;
}

.whats-on2-view .owl-carousel .owl-nav .owl-prev {
  position: absolute;
  left: 0;
  /*font-size: 4rem;*/
  /*font-weight: 700;*/
  margin: auto -50px;
  top: 0;
  bottom: 0;
}

.whats-on2-view .owl-carousel .owl-nav .owl-next {
  position: absolute;
  right: 0;
  /*font-size: 4rem;*/
  /*font-weight: 700;*/
  margin: auto -50px;
  top: 0;
  bottom: 0;
}

.whats-on2-view .owl-carousel .owl-nav .owl-prev img,
.whats-on2-view .owl-carousel .owl-nav .owl-next img {
  width: 40px;
}


.whats-on2-view .owl-carousel .owl-nav .owl-prev:focus,
.whats-on2-view .owl-carousel .owl-nav .owl-next:focus {
  outline: none;
}

.whats-on2-view .owl-carousel .owl-dots {
  display: none;
}

.whats-on2-view .owl-carousel .owl-nav .owl-prev.disabled,
.whats-on2-view .owl-carousel .owl-nav .owl-next.disabled {
  display: none;
}




@media only screen and (max-width: 650px) {
  .whats-on2-view {
    margin-left: 50px;
    margin-right: 50px;
  }

  .whats-on2-view .owl-carousel .owl-nav .owl-prev img,
  .whats-on2-view .owl-carousel .owl-nav .owl-next img {
    width: 33px;
  }
}
/*
@media only screen and (max-width: 900px) {
  .whats-on2-view .whats-on-item {
    flex: 0 0 33.333333333%;
  }
}
*/

/*
@media only screen and (max-width: 650px) {
  .whats-on2-view .whats-on-item {
    margin-bottom: 10px;
    flex: 0 0 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    text-align: left;
  }

  .whats-on2-view .whats-on-item .event-name--special {
    display: none;
  }

  .whats-on2-view .event-date--desktop {
    display: none;
  }

  .whats-on2-view .desktop-view-content {
    display: none;
  }

  .whats-on2-view .whats-on-item .event-img {
    display: flex;
  }

  .whats-on2-view .whats-on-item .event-img .event-img-wrap {
    flex: 0 0 33%;
  }

  .whats-on2-view .whats-on-item .event-img img {
    margin-bottom: 0;
    height: auto;
    min-width: inherit;
    min-height: inherit;
  }

  .whats-on2-view .whats-on-item .text {
    padding-left: 15px;
  }

  .whats-on2-view .whats-on-item .event-name {
    margin-bottom: 4px;
  }
}
*/

/*
@media only screen and (max-width: 480px) {
  .whats-on2-view .whats-on-item {
    font-size: .9em;
  }

  .whats-on2-view .whats-on-item .event-img .event-img-wrap {
    flex: 0 0 90px;
  }
}
*/