/* slides NEW JAN2022
------------------------------------------------------------------------------------ */
#mainWrapper #slidesWrapper
{
	clear: both;
	position: relative;
	overflow: visible;
	padding: 0;
	max-width: 2300px; /* FONTY was 1600px */
	/*min-width: 960px; FEB2022 no longer needed probably */
	margin: 0 auto;
}
#mainWrapper ul#slides,
#mainWrapper ul#slides li
{
	padding: 0;
	margin: 0 auto;
	list-style: none;
}
#mainWrapper ul#slides
{
	display: block; 
	width: 100%;
	overflow: hidden;
	padding-bottom: 20px;
}
#mainWrapper ul#slides li
{
	display: block;
	clear: both;
	margin: 0;
	background: #fff; /* AMBER FIX was black */
	width: 100%;
	padding: 0;
	box-sizing: border-box;
}
@media screen and (max-width:1010px)
{
	#mainWrapper #slidesWrapper
	{
		width: 100%;
		margin: 0;
		/*min-width: inherit; FEB2022 no longer needed probably */
	}
	#mainWrapper ul#slides,
	#mainWrapper ul#slides li
	{
		margin: 0;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
img.slide-background <img> and <video>
------------------------------------------------------------------------------------------------------------------- */
#mainWrapper ul#slides li .slide-background
{
	display: block !important;
	padding: 0 !important;
	max-width: inherit !important;
	
	width: 100% !important;
	height: 550px !important;
	
	object-fit: cover;
	object-position: top left;
	/* JAN2022TODO for fade in animation: visibility: hidden; */
}
@media screen and (max-width:1400px)
{
	#mainWrapper ul#slides li .slide-background
	{
		height: 515px !important;
	}
}
@media screen and (max-width:1010px)
{
	#mainWrapper ul#slides li .slide-background
	{
		height: 495px !important;
	}
}
@media screen and (max-width:800px)
{
	#mainWrapper ul#slides li .slide-background
	{
		height: 380px !important;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
.slide-content
------------------------------------------------------------------------------------------------------------------- */
.slide-content
{
	position: relative;
	width: 375px !important; /* eyeballed this as 400px */
	height: 100% !important;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	right: 13%;
}
@media screen and (max-width:1010px)
{
	.slide-content
	{
		right: 12%;
	}
}
@media screen and (max-width:800px)
{
	.slide-content
	{
		width: 300px !important;
		right: 10%;
	}
}
@media screen and (max-width:680px)
{
	.slide-content
	{
		width: 250px !important;
		right: 15%;
	}
}

/* ----------------------------------------------------------------------------------------------------------------
.slide-text
------------------------------------------------------------------------------------------------------------------- */
.slide-text
{
	float: left;
	clear: both;
	box-sizing: border-box;
	padding: 13px 12px 13px 15px;
	margin: 130px 0 8px 0;
	background: transparent url(images/faded-white-2022.png) repeat 0 0;	
}
/* APRIL2022 added: */
@media screen and (max-width:1400px)
{
	.slide-text
	{
		margin-top: 94px;
	}
}
@media screen and (max-width:1010px)
{
	.slide-text
	{
		margin-top: 80px;
	}
}
@media screen and (max-width:800px)
{
	.slide-text br
	{
		display: none;
	}
}
@media screen and (max-width:680px)
{
	.slide-text
	{
		margin-top: 60px;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
.slide-text h3 and p
------------------------------------------------------------------------------------------------------------------- */
.slide-text h3
{
	font-size: 27px; /* FONTYTRIED 44px */
	color: #000 !important;
	font-weight: 400; /* ANNA was bold */
	margin-bottom: 7px;
	/* line-height: 44px; FONTYTRIED added this rule */
}
.slide-text p
{
	font-weight: 300; /* FONTY was 400 */
	font-size: 16px !important; /* FONTYTRIED 26px */
	color: #111 !important;
	line-height: normal !important;
	margin-bottom: 0 !important;
}


/* ----------------------------------------------------------------------------------------------------------------
next and previous slideshow buttons
------------------------------------------------------------------------------------------------------------------- */#previous-slide,
#next-slide
{
	display: block;
	background: transparent url(images/new-2022/nav/prev2022.png) no-repeat 50% 50%;
	width: 75px;
	height: 115px;
	text-indent: -9999px;
	opacity: 1;
	z-index: 9990; /* was 9997 */
	position: absolute; 
	bottom: 0;
	left: 0;
	background-size: 23px 39px;
}
#next-slide
{
	right: 0;
	left: auto;
	background-image: url(images/new-2022/nav/next2022.png);
}
#previous-slide:hover,
#next-slide:hover
{
	opacity: 0.8;
}
@media screen and (max-width:900px)
{
	#previous-slide,
	#next-slide
	{
		width: 60px;
	}
}
@media screen and (max-width:500px)
{
	#previous-slide,
	#next-slide
	{
		width: 45px;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
slide pager
------------------------------------------------------------------------------------------------------------------- */
/* TODO: make entire pager dot clickable by adding inner span to template, to make dot smaller but have large hotspot */
.cycle-pager 
{
	width: auto;
	height: auto;
	position: absolute;
	bottom: 53px;
	left: 84px;
	z-index: 9990;
	color: #000;
	cursor: pointer;
}
.cycle-pager span 
{
	background: #fff;
	opacity: 0.6;
	font-size: 0;
	line-height: normal;
	display: block;
	float: left;
	padding: 0;
	text-indent: -9999px;
	width: 11px;
	height: 11px;
	margin: 0 12px 0 0;
	border-radius: 100%;
}
.cycle-pager span:hover 
{
	opacity: 0.9;
}
.cycle-pager span.cycle-pager-active 
{
	opacity: 1;
}
@media screen and (max-width:680px)
{
	.cycle-pager 
	{
		display: none;
	}
}


/* ----------------------------------------------------------------------------------------------------------------
.video-launcher
NB: slightly different designs needed for slides VS home page VS main content
------------------------------------------------------------------------------------------------------------------- */
a.video-launcher
{
	position: relative;
	float: left;
	clear: both;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	background: #fff; /* ANNA updates was #ccc */
	font-size: 17px;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	min-height: 204px;
	z-index: 500;
}
	#slides a.video-launcher
	{
		border: #fff solid 8px;
	}

a.video-launcher span
{
	width: 100%;
	position: absolute;
	bottom: 23%; /* APRIL2022 was 35% */
	left: 0;
	text-shadow: 0 0 8px #000;
}
	#slides a.video-launcher span
	{
		bottom: 35px;
	}

a.video-launcher img
{
	display: block;
	width: 100%;
	height: auto;
	max-width: inherit !important;
	padding: 0 !important;
}
a.video-launcher:hover
{
	filter: brightness(115%);
}

/* ANNA UPDATES - added this: */
.columnA a.video-launcher.video-within-content
{
	width: 50%;
	float: right;
	margin: 25px 0 8px 20px !important; /* APRIL2022 added top margin was 25px to fix new WP Editor location of video */
}

@media screen and (max-width:800px)
{
	#slides a.video-launcher
	{
		min-height: inherit;
		padding: 12px 5px;
		background: #222;
	}
	#slides a.video-launcher img
	{
		display: none !important;
	}
	#slides a.video-launcher span
	{
		width: 100%;
		position: static;
		bottom: auto;
		left: auto;
		text-shadow: none;
	}
	#slides a.video-launcher:hover
	{
		filter: none;
		background: #333;
	}
}

@media screen and (max-width:640px)
{
	/* ANNA UPDATED added this: */
	.columnA a.video-launcher.video-within-content
	{
		width: 100%;
		float: left;
		clear: both;
		margin: 20px 0 20px 0 !important; /* APRIL2022 added top margin was 25px to fix new WP Editor location of video */
	}	
}