/*================================================
SHEDD ImageDeck

Site:   The Shedd Institute 
        www.theshedd.org

Author:     Jim Ralph
Created:    2/3/2021
Edited:  
Source: adapted from http://css3.bradshawenterprises.com/cfimg/#cfimg1
Usage:  Replaces Telerik's RADrotator
        Designed to be adaptive. Can Handle up to 10 images
===================================================*/

@keyframes kImgDeck1 {
	0%		{opacity:1;}
	68%		{opacity:1;}
	100%	{opacity:0;}
	68%		{opacity:0;}
	100%	{opacity:1;}
}
@keyframes kImgDeck2 {
	0%		{opacity:1;}
	34%		{opacity:1;}
	50%		{opacity:0;}
	84%		{opacity:0;}
	92%		{opacity:1;}
	100%	{opacity:1;}
}
@keyframes kImgDeck3 {
	0%		{opacity:1;}
	22.67%	{opacity:1;}
	33.33%	{opacity:0;}
	89.33%	{opacity:0;}
	96%		{opacity:1;}
	100%	{opacity:1;}
}
@keyframes kImgDeck4 {
	0%		{opacity:1;}
	17%		{opacity:1;}
	25%		{opacity:0;}
	92%		{opacity:0;}
	100%	{opacity:1;}
}
@keyframes kImgDeck5 {
	0%		{opacity:1;}
	13.6%	{opacity:1;}
	24%		{opacity:0;}	/* 20% */
	91%		{opacity:0;}	/* 93.6% */
	100%	{opacity:1;}
}
@keyframes kImgDeck6 {
	0%		{opacity:1;}
	11.5%	{opacity:1;}	/* 11.33% */
	22%		{opacity:0;}	/* 16.67% */
	90%		{opacity:0;}	/* 94.67% */
	100%	{opacity:1;}
}
@keyframes kImgDeck7 {
	0%		{opacity:1;}
	9%		{opacity:1;}	/*  9.71% */
	19%		{opacity:0;}	/* 14.29% */
	93%		{opacity:0;}	/* 95.43% */
	100%	{opacity:1;}
}
@keyframes kImgDeck8 {
	0%		{opacity:1;}
	8.5%	{opacity:1;}	/*  8.5% */
	18%		{opacity:0;}	/* 12.5% */
	94.2%	{opacity:0;}	/* 96% */
	100%	{opacity:1;}
}
@keyframes kImgDeck9 {
	0%		{opacity:1;}
	7%		{opacity:1;}	/*  7.56% */
	16%		{opacity:0;}	/* 11.11% */
	95%		{opacity:0;}	/* 96.44% */
	100%	{opacity:1;}
}
@keyframes kImgDeck10 {
	0%		{opacity:1;}
	6.5%	{opacity:1;}	/*  6.8% */
	14%		{opacity:0;}	/* 10.0% */
	96.5%	{opacity:0;}	/* 96.8% */
	100%	{opacity:1;}
}
@keyframes kImgDeck11 {
	0%		{opacity:1;}
	6%		{opacity:1;}	/*  6.18% */
	12.5%	{opacity:0;}	/*  9.09% */
	97%		{opacity:0;}	/* 97.09% */
	100%	{opacity:1;}
}
@keyframes kImgDeck12 {
	0%		{opacity:1;}
	5.5%	{opacity:1;}	/*  5.67% */
	11.5%	{opacity:0;}	/*  8.33% */
	97%		{opacity:0;}	/* 97.33% */
	100%	{opacity:1;}
}
.ImgDeck {
	position:relative;
	margin:0 auto;
}
/* 'animation-duration' & animation-delay set programmatically*/
.ImgDeck img {
	position:absolute;
	left:0;
	float: left !important;	/* Bootstrap 5.0 float-start */
	flex: 0 0 auto;			/* Bootstrap 5.0 col-12 */
	width: 100%;
	animation-name: kImgDeck1;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction:normal;
	animation-duration: 0s;

	-webkit-animation-name: kImgDeck1;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 0s;

	-moz-animation-name: kImgDeck1;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 0s;

	-o-animation-name: kImgDeck1;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 0s;
}
/*	Below creates a wrap placeholder. Always the bottom (1st) image in the ImgStack. this makes the stack work, as it reates the space on which the stack sits in a container/col. Not having this, the container doesn't recognize and make room for the images. */
.ImgDeck img:nth-of-type(1) {
	position: relative;
	margin: 0;
	padding:0;
}