:root {
	--span-activity-narrow--box-width: calc(min(300px, 90vw));
}


.link-button>* {
	background-color: rgba(0,0,0,0.5);
	padding: 2px 10px;
}

.veil {
	position: relative;
}
.veil::before {
	content: "";
    width: 100vw;
    background-color: rgba(0,0,0,0.4);
	position: absolute;
	top: -10px;
	bottom: -10px;
	z-index: -1;
}



@media (min-width:600px) {
	.wp-block-image .alignright {
		max-width: 70%;
	}
	.wp-block-image .alignleft {
		max-width: 70%;
	}
}
@media (max-width:600px) {
	.wp-block-image .alignright {
		float: none !important;
		margin: auto !important;
	}
	.wp-block-image .alignleft {
		float: none !important;
		margin: auto !important;
	}
}

.wp-block-column.has-white-background-color.has-background {
	padding: 1%;
}



/*                   */
/* ==== Box lists  ==== */
/*                   */

/* Top class for UL of event boxes - add-ons are .eventList .showAllBelow and .staff */
.boxlist {
	padding: 0;
	color: #404040;
display: flex;
list-style-type: none;
justify-content: left;
scrollbar-width: none;
-ms-overflow-style: none;
}

.boxlist::-webkit-scrollbar {
display: none;
}

/* Mixins for .boxlist */
.showAllBelow,
.showSomeBelow,
.staff {
flex-wrap: wrap;
}

.staff .eventTitle {
position: absolute;
bottom: 30px;
left: 10px;
color: whitesmoke;
background-color: rgba(0, 0, 0, 0.6);
padding: 0 10px;
}
.staff .eventItem img {
height: 300px  !important;
}
.staff .eventItem {
max-height: 330px;
}

ul:not(.showSomeBelow):not(.showAllBelow) .eventItem {
max-width: 300px;
}

.eventItem {
margin: 20px 10px 0 0px;
list-style: none;
position: relative;
cursor: pointer;
font-size: 12pt;
background-color: white;
box-shadow: 0px 2px 2px 0 #d1d5d6; /* p3=-1 for just line at bottom */
}

.staff .eventItem {
background-color: transparent;
cursor: pointer;
}

.eventTitle {
font-size: 14pt;
margin: 6px 0;
}
.eventList .subtitle {
font-size: 11pt;
margin-bottom: 2px;
}

.showAllBelow .eventTitle {
font-size: 24pt;
}
.showAllBelow .subtitle {
font-size: 16pt;
}

.showSomeBelow .eventTitle {
font-size: 24pt;
}
.showSomeBelow .subtitle {
font-size: 16pt;
}

.eventItem img {
width: 100%;
	max-width: var(--span-activity-narrow--box-width) !important;
min-width: var(--span-activity-narrow--box-width); /* Must use space */
height: 230px  !important;
object-fit: cover;
display: block;
}
.showAllBelow .eventItem img {
object-fit: contain;
}
/* bottom of img */
.eventBooking {
position: absolute;
top: 205px;
right: 10px;
background-color: rgba(255, 255, 255, 0.5);
padding: 0 10px;
}
.showAllBelow .eventItem img {
height: 300px  !important;
}

.showAllBelow .eventContent {
background-color: #f0f0f0;
padding: 6px 0;
}

.showSomeBelow .eventItem img {
height: 300px  !important;
}

.showSomeBelow .eventContent {
background-color: #f0f0f0;
padding: 6px 0;
}

.eventList .eventContent {
border-left: 10px solid white;
background-color: white;
min-width: var(--span-activity-narrow--box-width);
}
.eventList .eventContent {
margin-bottom: 10px !important;
}
.eventList:not(.horizontal) .eventContent {
min-height: 100px;
}
.eventLocation {
font-weight: bold;
}

.eventContent * {
line-height: 1.2em;
padding-bottom: 0.1em;
}

/* Content text is hidden by default. Covers image when showing. */
.eventDescription {
position: absolute;
top: 0;
left: 0;
right: 0px;
padding: 4px;
overflow: hidden;
text-overflow: ellipsis;
background-color: white;
opacity: 0.9;
transition: height 0.5s ease-in-out;
visibility: hidden;
height: 0px;
}
/* Fade at bottom of description */
.eventDescription::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(0, white, transparent);
}
.showAllBelow .eventDescription {
position: relative;
font-size: 12pt;
width: 27vw;
visibility: visible;
height: unset;
}
.showAllBelow .eventDescription::after {
display: none;
}

.showSomeBelow .eventDescription {
position: relative;
font-size: 12pt;
width: 27vw;
visibility: visible;
height: unset;
max-height: 300px;
}

.eventDate {
margin-top: 4px;
}




@media  not hover {
.eventList {
  flex-wrap: wrap;
  justify-content: left;
}
}

@media (hover: hover) {
/* Show description on hover, but not while dragging slider */
.eventList:not(.ui-draggable-dragging) .eventItem:hover .eventDescription {
  height: 230px;
  visibility: visible;
}
.staff .eventItem:hover .eventDescription {
  height: 230px;
  visibility: visible;
}
} /* @media (hover:hover) */

@media (min-width: 1200px) {
.topgap {
  margin-top: 100px;
}

div.header-widget.widget_icl_lang_sel_widget.header-left-widget {
  display: none;
}
.narrowonly {
  display: none;
}
.three_columns .wpb_wrapper {
  width: 300px;
  margin: 0 auto;
}
.image_with_text {
  min-height: 340px;
}
	
.eventList.horizontal {
  flex-wrap: nowrap;
  justify-content: normal;
  overflow-x: auto;
  padding: 0 !important;
}
.eventList:not(.horizontal) .eventItem {
  min-height: 340px;
}
.staff .eventItem {
  min-height: 300px;
}

.boxlist .postDate {
  bottom: 0;
  right: 4px;
  font-size: small;
  font-style: italic;
  position: absolute;
}

	
.sa_scrollButton {
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  top: 90px;
  width: 30px;
  height: 60px;
  color: rgb(80, 80, 80);
  cursor: pointer;
  /*border: 3px solid rgb(196, 196, 196);
  box-shadow: 0 0 0 2px rgb(255,255,255);*/
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
}

.sa_scrollerLeft {
  left: auto;
  right: 0;
  margin-right: -15px;
}
.sa_scrollerRight {
  left: 0;
  right: auto;
  margin-left: -15px;
}
.sa_horizontal_activities {
  position: relative;
}
} /* @media (min-width: 1200px) */


@media (max-width: 1200px) {
	
	.home .eventItem.afterOne {
		display:none;
	}
	
	.sa_scrollButton { display: none; }

/* Side-by-side display */
ul:not(.showSomeBelow):not(.showAllBelow) .eventItem {
  max-width: 620px;
  min-width: 620px;
}
	
	.eventList.horizontal {
		flex-direction: column;
		align-items:center;
	}

.eventItem {
  display: flex;
  max-width: 600px;
  width: 600px;
  margin: 20px auto 0 auto;
  max-height: 230px;
  overflow: hidden;
}
.showAllBelow .eventItem {
  flex-wrap: wrap;
  justify-content: space-between;
  max-height: 900px;
}

.showSomeBelow .eventItem {
  /*flex-wrap: wrap;*/
  justify-content: space-between;
  max-height: 900px;
}

.eventDescription {
  position: relative;
  visibility: visible;
  height: auto;
}

.showAllBelow .eventContent {
  background-color: white;
  padding: 6px;
}

.showAllBelow .eventDescription {
  display: block;
  width: 600px;
}

.showSomeBelow .eventContent {
  background-color: white;
  padding: 6px;
}

.showSomeBelow .eventDescription {
  display: block;
  width: 600px;
}

/* Put fader on content instead of description 
   Because description is now floating under title */
.eventDescription::after {
  display: none;
}
.eventContent::after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 300px;
  right: 0;
  height: 40px;
  background: linear-gradient(0, white, transparent);
}
.showAllBelow .eventContent::after {
  display: none;
}

.showSomeBelow .eventContent::after {
  display: none;
}

.image_with_text {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  max-width: 600px;
  margin: 20px auto 0 auto;
}
} /* End max-width:1200px */



@media (max-width: 750px) {



/*                   */
/* ==== Box lists  ==== */
/*                   */

.shortListsInMobile li:nth-of-type(n+2) {
	display: none;
}
	
/* Undo side box used in max-width:1000 */
ul:not(.showSomeBelow):not(.showAllBelow) .eventItem {
  max-width: var(--span-activity-narrow--box-width);
  min-width: var(--span-activity-narrow--box-width);
  width: var(--span-activity-narrow--box-width);
}

.eventItem {
  display: block;
  max-width: var(--span-activity-narrow--box-width);
  min-width: unset;
  max-height: 400px;
}
.showAllBelow .eventItem {
  max-height: 900px;
}
.showSomeBelow .eventItem {
  max-height: 600px;
}

.eventContent {
  min-height: 20px !important;
}

/* Fading at bottom */
.eventContent::after {
  left: 0;
}
.staff .eventContent::after {
  display: none;
}
.showAllBelow .eventContent::after {
  display: none;
}
.showSomeBelow .eventContent::after {
  display: none;
}
	
ul.staff .eventDescription {
	visibility: hidden;
}

.showAllBelow .eventDescription {
  width: 95%;
	visibility: visible;
}
.showSomeBelow .eventDescription {
  width: 95%;
	visibility: visible;
}

.showSomeBelow .eventContent::after {
  display: none;
}

.image_with_text {
  width: var(--span-activity-narrow--box-width);
}
} /* End max-width:750px */