/* ==========================================================================
   Header slideshow
   - Fluid width: always 100% of the screen, from phones to desktops.
   - Fluid height: scales together with the width (percentage padding hack),
     so the banner keeps its proportions on every screen size.
   - Slides are cross-faded automatically, forever, in an endless loop.
   ========================================================================== */

.art-slideshow {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	z-index: 1;
}

/* Fluid height: ~26% of the current width (tweak this number to taste). */
.art-slideshow:before {
	content: "";
	display: block;
	padding-top: 26%;
}

/* Keep the banner from becoming absurdly tall on very wide desktop screens
   and guarantee a usable minimum height on narrow phones. */
@media all and (min-width: 1400px) {
	.art-slideshow:before {
		padding-top: 22%;
	}
}

@media all and (max-width: 480px) {
	.art-slideshow:before {
		padding-top: 60%;
	}
}

.art-slideshow-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease-in-out;
	-webkit-transition: opacity 1.2s ease-in-out;
}

.art-slideshow-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.art-slideshow-slide img {
	display: block;
	width: 100%;
	height: 100%;
	/* Fill the fluid box completely on any screen width/height without
	   distorting the image. */
	object-fit: cover;
	font-family: 'object-fit: cover;'; /* polyfill hint for old IE/Edge */
}