/*
andyh style sheet for ss-slideshows
© Andy Hibbert 2021 - https://www.pixel-images.co.uk
*/

body	{
padding:10px;margin:auto;max-width:1180px;
font:96% verdana,arial,helvetica,sans-serif;cursor:default
	}

.header			{font:bold italic 100% 'comic sans ms', sans-serif;color:#039}
a.header:link		{font:bold italic 100% 'comic sans ms', sans-serif;color:#039;text-decoration:none;border:1px solid transparent;padding:2px}
a.header:visited	{font:bold italic 100% 'comic sans ms', sans-serif;color:#039;text-decoration:none;border:1px solid transparent;padding:2px}
a.header:hover		{font:bold italic 100% 'comic sans ms', sans-serif;background:#fff;color:#d63;padding:2px;border:1px solid #6af;border-radius:5px}

.z3here			{font:bold 90% verdana,arial,sans-serif;color:#99a;text-decoration:none;border:1px solid transparent;padding:2px}
a.z3:link		{font:bold 90% verdana,arial,sans-serif;color:#339;text-decoration:none;border:1px solid transparent;padding:2px}
a.z3:visited		{font:bold 90% verdana,arial,sans-serif;color:#339;text-decoration:none;border:1px solid transparent;padding:2px}
a.z3:hover		{font:bold 90% verdana,arial,sans-serif;background:#fff;color:#d63;padding:2px;border:1px solid #6af;border-radius:5px}

#slideshow		{
display:block;margin:auto;width:100%;height:740px;padding:8px;border:1px solid #abc;border-radius:8px
			}

#slideshow figure img{
	max-height: 680px; /* same values = best experience */
}

/* navigation buttons */
#slideshow ul a		{width:12px;height:12px;}

/* colors */
#slideshow,#slideshow figure
			{
	background: #aaa; /* the color of slideshow container */
			}

#slideshow figure figcaption
			{
	background: rgba(0,0,0,0.4); /* the background color of the caption */
	color: white; /* the text color of the caption */
			}

/* navigation colors */
#slideshow ul a{
  border: 3px solid gray; /* the border of the navigation rings */

	background: #eee; /* the fill color of empty navigation ring */
}
#slideshow ul a.slide{
	background: #369; /* the fill color of active */
}
#slideshow ul a:hover{
	background: #e66; /* the fill color when the user moves over the navigation */
}

/* transitions */
#slideshow figure{ /* transition: start */

  opacity: 0; /* default: transparenty */

  /* -webkit-transform:translateX(100%); /* left in and out */
  /* transform:translateX(100%); /* left in and out */

  /* -webkit-transform:translateX(-100%); /* right in and out */
  /* transform:translateX(-100%); /* righ in and out */

  /* -webkit-transform:translateY(-100%); /* top in and out */
  /* transform:translateY(-100%); /* top in and out */

  /* -webkit-transform:translateY(100%); /* bottom in and out */
  /* transform:translateY(100%); /* bottom in and out */

}
#slideshow figure.show{ /* transition: end */

  opacity: 1;/* default: transparenty */

  /* -webkit-transform:translateX(0); /* left in and out */
  /* transform:translateX(0); /* left in and out */

  /* -webkit-transform:translateX(0); /* right in and out */
  /* transform:translateX(0); /* right in and out */

  /* -webkit-transform:translateY(0); /* top in and out */
  /* transform:translateY(0); /* top in and out */

  /* -webkit-transform:translateY(0); /* bottom in and out */
  /* transform:translateY(0); /* bottom in and out */

}


/* slideshow default */
#slideshow{
	overflow: hidden;
	position: relative;
}
#slideshow figure{
	margin: 0;
	top:0;
	bottom: 0;
	pointer-events: none;
	display: -webkit-flex;
	display: flex;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}
#slideshow figure.show{
	pointer-events: initial;
}
#slideshow figure img{
	max-width: 100%;
	display: block;
	margin: auto;
}
#slideshow figure figcaption{
	padding: 10px;
	bottom: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-backdrop-filter: blur(10px);
}
#slideshow figure figcaption, #slideshow ul, #slideshow figure{
	position: absolute;
	right: 0;
	left: 0;
	text-align: center;
}
/* navigation default */
#slideshow ul{
	z-index: 2;
	margin: 10px 10px 10px -30px;
	bottom: 0;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}
#slideshow ul a{
	display: block;
	margin: 5px 3px;
	border-radius: 50%;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}