/* ============ DO NOT EDIT THIS FILE ============ */

/*
	1. xfader.js GETS THE XFADER ELEMENT COUNT PER [customer]-xfader-data.js;
	2. xfader.js SETS THE XFADER ELEMENT COUNT AS A DATA ATTRIBUTE OF .section-x-fader ('data-xfader-element-count=');
	3. IN xfader.css, --XFADER-EL-COUNT CSS VARIABLE IS SET PER .section-x-fader[data-xfader-element-count];
	4. IN xfader.css, ANIMATION VARIANT IS SELECTED PER --XFADER-EL-COUNT CSS VARIABLE
	5. *** REQUIRED: IN [customer].css (e.g.) ***:
		- .section-x-fader REQUIRES --XFADER-EL-DURATION
		- .section-x-fader REQUIRES padding-bottom: PROPERTY
*/



/*
	.section.section-x-fader {
		.x-fader-element.x-fader-element-[brand] {
			.x-fader-element-link {
				.x-fader-element-image {}
			}
		}
	}
*/


/* ======================== X-FADER PARENT ELEMENT ======================== */
.section-x-fader {
	/*
		--XFADER-EL-DURATION,
		padding-bottom: {}
		=> [tenant]_home.css
	*/
	position: relative;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 1px auto 3rem;
	display: flex;
	flex-flow: row wrap;
/*	border: 3px dashed red; */
}
.section-x-fader[data-x-fader-item-count="1"] { --XFADER-EL-COUNT: 1; }
.section-x-fader[data-x-fader-item-count="2"] { --XFADER-EL-COUNT: 2; }
.section-x-fader[data-x-fader-item-count="3"] { --XFADER-EL-COUNT: 3; }
.section-x-fader[data-x-fader-item-count="4"] { --XFADER-EL-COUNT: 4; }
.section-x-fader[data-x-fader-item-count="5"] { --XFADER-EL-COUNT: 5; }
.section-x-fader[data-x-fader-item-count="6"] { --XFADER-EL-COUNT: 6; }
.section-x-fader[data-x-fader-item-count="7"] { --XFADER-EL-COUNT: 7; }
.section-x-fader[data-x-fader-item-count="8"] { --XFADER-EL-COUNT: 8; }
.section-x-fader[data-x-fader-item-count="9"] { --XFADER-EL-COUNT: 9; }
.section-x-fader[data-x-fader-item-count="10"] { --XFADER-EL-COUNT: 10; }
.section-x-fader[data-x-fader-item-count="11"] { --XFADER-EL-COUNT: 11; }
.section-x-fader[data-x-fader-item-count="12"] { --XFADER-EL-COUNT: 12; }
.section-x-fader[data-x-fader-item-count="13"] { --XFADER-EL-COUNT: 13; }
.section-x-fader[data-x-fader-item-count="14"] { --XFADER-EL-COUNT: 14; }
.section-x-fader[data-x-fader-item-count="15"] { --XFADER-EL-COUNT: 15; }


/* ======================== X-FADER ELEMENTS ======================== */
.x-fader-element {
	position: absolute;
	width: 100%;
	height: 100%; /* !!! */
	margin: 0 .6rem .6rem 0;
	top: 0;
	right: 0;
	left: 0;
	opacity: 0;
	animation-duration: calc(var(--XFADER-EL-DURATION) * var(--XFADER-EL-COUNT)); /* TBD: will these be correct if set in [tenant]_home.css? */
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: ease-in-out;
	z-index: -1;
}




/* this should pause the animation but it doesn't: .x-fader-element:hover { animation-play-state: paused; } */
/*.section-x-fader:hover .x-fader-element { animation-play-state: paused; }*/






/* ======================== SELECT ANIMATION VARIANT PER X-FADER ELEMENT COUNT ======================== */
.section-x-fader[data-x-fader-item-count="1"] .x-fader-element { animation-name: x-fader-1; }
.section-x-fader[data-x-fader-item-count="2"] .x-fader-element { animation-name: x-fader-2; }
.section-x-fader[data-x-fader-item-count="3"] .x-fader-element { animation-name: x-fader-3; }
.section-x-fader[data-x-fader-item-count="4"] .x-fader-element { animation-name: x-fader-4; }
.section-x-fader[data-x-fader-item-count="5"] .x-fader-element { animation-name: x-fader-5; }
.section-x-fader[data-x-fader-item-count="6"] .x-fader-element { animation-name: x-fader-6; }
.section-x-fader[data-x-fader-item-count="7"] .x-fader-element { animation-name: x-fader-7; }
.section-x-fader[data-x-fader-item-count="8"] .x-fader-element { animation-name: x-fader-8; }
.section-x-fader[data-x-fader-item-count="9"] .x-fader-element { animation-name: x-fader-9; }
.section-x-fader[data-x-fader-item-count="10"] .x-fader-element { animation-name: x-fader-10; }
.section-x-fader[data-x-fader-item-count="11"] .x-fader-element { animation-name: x-fader-11; }
.section-x-fader[data-x-fader-item-count="12"] .x-fader-element { animation-name: x-fader-12; }
.section-x-fader[data-x-fader-item-count="13"] .x-fader-element { animation-name: x-fader-13; }
.section-x-fader[data-x-fader-item-count="14"] .x-fader-element { animation-name: x-fader-14; }
.section-x-fader[data-x-fader-item-count="15"] .x-fader-element { animation-name: x-fader-15; }


/* ======================== SELECT ANIMATION-DELAY ON ALL (POTENTIAL) X-FADER ELEMENTS ======================== */
.x-fader-element:nth-child(1) { animation-delay: 0s; }
.x-fader-element:nth-child(2) { animation-delay: calc(1 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(3) { animation-delay: calc(2 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(4) { animation-delay: calc(3 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(5) { animation-delay: calc(4 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(6) { animation-delay: calc(5 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(7) { animation-delay: calc(6 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(8) { animation-delay: calc(7 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(9) { animation-delay: calc(8 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(10) { animation-delay: calc(9 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(11) { animation-delay: calc(10 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(12) { animation-delay: calc(11 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(13) { animation-delay: calc(12 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(14) { animation-delay: calc(13 * var(--XFADER-EL-DURATION)); }
.x-fader-element:nth-child(15) { animation-delay: calc(14 * var(--XFADER-EL-DURATION)); }


/* this should pause the animation but it doesn't: .x-fader-element:hover { animation-play-state: paused; } */
/*.section-x-fader:hover .x-fader-element { animation-play-state: paused; }*/
.x-fade-img,
.x-fader-element img { width: 100%; }


/* ======================== RTFM ========================
	- 100%, divided by slide-count => x%;
	- FADE IN by  15% of its time, .15 * x% = y% => 'FULL-UP'
	- FADE OUT at 96% of its time, .96 * x% = z% => 'GONE' alt. (tighter)
	======================== ...... ========================
*/



/* ======================== 2 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 2 => each x-fader element gets 50.0% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 50.0% = 7.5% => 'FULL-UP'
	- FADE OUT at 96% of its time, .96 * 50.0% = 48.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-2 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	7.5% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	46.50% { opacity: 1; }

	/* ... GONE ... */
	48.0% { 
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-2 */



/* ======================== 3 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 3 => each x-fader element gets 33.333333333333333% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 33.333333333333333% = 5.0% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 33.333333333333333% = 29.999999999999997% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 33.333333333333333% = 32.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-3 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	5.0% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	30.9% { opacity: 1; }

	/* ... GONE ... */
	32% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-3 */



/* ======================== 4 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 4 => each x-fader element gets 25.0% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 25.0% = 3.75% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 25.0% = 22.5% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 25.0% = 24.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-4 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	3.75% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	21.0% { opacity: 1; }

	/* ... GONE ... */
	22.5% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-4 */



/* ======================== 5 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 5 => each x-fader element gets 20.0% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 20.0% = 3.0% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 20.0% = 18.0% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 20.0% = 19.2% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-5 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	3.0% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	17.1% { opacity: 1; }

	/* ... GONE ... */
	18.0% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-5 */



/* ======================== 6 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 6 => each x-fader element gets 16.666666666666667% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 16.666666666666667% = 2.5% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 16.666666666666667% = 15.0% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 16.666666666666667% = 16.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-6 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	2.5% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	14.1% { opacity: 1; }

	/* ... GONE ... */
	15.0% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-6 */



/* ======================== 7 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 7 => each x-fader element gets 14.285714285714286% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 14.285714285714286% = 2.142857142857143% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 14.285714285714286% = 12.85714285714286% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 14.285714285714286% = 13.7142857143% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-7 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	2.142857142857143% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	12.9% { opacity: 1; }

	/* ... GONE ... */
	13.7142857143% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-7 */



/* ======================== 8 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 8 => each x-fader element gets 12.5% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 12.5% = 1.875% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 12.5% = 11.25% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 12.5% = 12.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-8 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	1.875% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	11.4% { opacity: 1; }

	/* ... GONE ... */
	12.0% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-8 */



/* ======================== 9 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 9 => each x-fader element gets 11.111111111111111% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 11.111111111111111% = 1.666666666666667% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 11.111111111111111% = 10.0% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 11.111111111111111% = 10.6666666667% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-9 {
	0% {
		opacity: 0;
		z-index: 0;
	}

	/* FULL-UP ... */
	1.666666666666667% {
		opacity: 1;
		z-index: 1;
	}

	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	9.0% { opacity: 1; }

	/* ... GONE ... */
	10.6666666667% {
		opacity: 0;
		z-index: 0;
	}
	100% { opacity: 0; }
} /* @keyframes x-fader-9 */



/* ======================== 10 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 10 => each x-fader element gets 10.0% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 10.0% = 1.5% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 10.0% = 9.0% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 10.0% = 9.6% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-10 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.5% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	9.0% {
		opacity: 1;
	}
	/* ... GONE ... */
	9.6% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
}
/* @keyframes x-fader-10 */



/* ======================== 11 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 11 => each x-fader element gets 9.090909090909091% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 9.090909090909091% = 1.3636363636% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 9.090909090909091% = 8.1818181818% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 9.090909090909091% = 8.7272727273% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-11 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.3636363636% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	7.8% {
		opacity: 1;
	}
	/* ... GONE ... */
	8.1818181818% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
} /* @keyframes x-fader-11 */



/* ======================== 12 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 12 => each x-fader element gets 8.333333333333333% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 8.333333333333333% = 1.25% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 8.333333333333333% = 7.5% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 8.333333333333333% = 8.0% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-12 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.25% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	7.5% {
		opacity: 1;
	}
	/* ... GONE ... */
	8.0% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
} /* @keyframes x-fader-12 */



/* ======================== 13 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 13 => each x-fader element gets 7.692307692307692% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 7.692307692307692% = 1.1538461538% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 7.692307692307692% = 6.9230769231% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 7.692307692307692% = 7.3846153846% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-13 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.1538461538% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	6.9% {
		opacity: 1;
	}
	/* ... GONE ... */
	7.3846153846% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
} /* @keyframes x-fader-13 */



/* ======================== 14 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 14 => each x-fader element gets 7.1428571429% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 7.1428571429% = 1.0714285714% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 7.1428571429% = 6.4285714286% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 7.1428571429% = 6.8571428572% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-14 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.0714285714% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	6.45% {
		opacity: 1;
	}
	/* ... GONE ... */
	6.8571428572% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
} /* @keyframes x-fader-14 */



/* ======================== 15 X-FADER ELEMENTS ========================
	- 100%, divided by slide-count of 15 => each x-fader element gets 6.6666666667% of the animation's 100%;
	- FADE IN by  15% of its time, .15 * 6.6666666667% = 1.0% => 'FULL-UP'
	- FADE OUT at 90% of its time, .9 * 6.6666666667% = 6.0% => 'GONE'
	- FADE OUT at 96% of its time, .96 * 6.6666666667% = 6.4% => 'GONE' alt. (tighter)
*/
@keyframes x-fader-15 {
	0% {
		opacity: 0;
		z-index: 0;
	}
	/* FULL-UP ... */
	1.0% {
		opacity: 1;
		z-index: 1;
	}
	/* ... 'HOLD-UNTIL' == INIT FADE-OUT (~interpreted relative to the 'GONE') ... */
	6.0% {
		opacity: 1;
	}
	/* ... GONE ... */
	6.4% {
		opacity: 0;
		z-index: 0;
	}

	100% {
		opacity: 0;
	}
} /* @keyframes x-fader-15 */

/* ------------------------------------------------------------------------------------------------------------------------------------------------ */