/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Main
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 1.25rem;
	background: #DDD;
}

body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 1.00rem;
	display: flex;
}

main {
	margin: auto;
	padding: 1rem;
	background: #FFF;
	width: 60rem;
	border: 0.05rem solid #AAA;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Slideshow
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.slideshow {
	display: flex;
	width: 100%;
	height: 30rem;
	border: 0.05rem solid #AAA;
}

.slideshow > ul,
.slideshow > div {
	display: flex;
	box-sizing: border-box;
	align-items: center;
}

.slideshow > div {
	width: 5%;
	background: #DDD;
	justify-content: center;
	cursor: pointer;
	font-weight: 600;
	padding: 0.25rem;
}

.slideshow > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 90%;
	border: 0.05rem solid #AAA;
	border-top: none;
	border-bottom: none;
	box-sizing: border-box;
	z-index: 0;
	position: relative;
	overflow: hidden;
}

.slideshow > ul > li {
	transition: visibility 0.5s linear, opacity 0.5s linear;
	position: absolute;
	top: 0;
	padding: 0.5rem;
	box-sizing: border-box;
}

.slideshow > ul > li.show {
	visibility: visible;
	opacity: 1;
}

.slideshow > ul > li.show img {
	animation-name: animation;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

.slideshow > ul > li.show.next img {
	animation-name: nextAnimation;
}

.slideshow > ul > li.show.prev img {
	animation-name: prevAnimation;
}

.slideshow > ul > li.hide {
	visibility: hidden;
	opacity: 0;
}

/* The "object-fit" attribute is equivalent to "background-size".  */
.slideshow > ul,
.slideshow > ul > li,
.slideshow > ul > li > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #DDD;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Animation
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@keyframes animation {
	0% {
		transform: translateY(-50rem);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes prevAnimation {
	0% {
		transform: translateX(-50rem);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes nextAnimation {
	0% {
		transform: translateX(50rem);
	}
	100% {
		transform: translateX(0);
	}
}