/* ------------------------------
about us image stack
------------------------------ */
.stack-wrap {
	width: 70%;
	margin: 30px auto;
	position: relative;
}

.stack-wrap input[type="radio"] {
	display: none;
}

.stack {
	position: relative;
	width: 100%;
	aspect-ratio: 1280 / 1493;
}

.card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform .5s ease;
	overflow: hidden;
	pointer-events: none;
}

.card-click {
	position: absolute;
	inset: 0;intro-box
	display: block;
	cursor: pointer;
	z-index: 5;
}

.card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.card1  { transform: translate(-14px, 10px) rotate(-7deg)  scale(.96); z-index: 16; }
.card2  { transform: translate(16px, 6px)   rotate(6deg)   scale(.95); z-index: 15; }
.card3  { transform: translate(-8px, -8px)  rotate(-4deg)  scale(.97); z-index: 14; }
.card4  { transform: translate(10px, 14px)  rotate(5deg)   scale(.95); z-index: 13; }
.card5  { transform: translate(-18px, 4px)  rotate(-8deg)  scale(.94); z-index: 12; }
.card6  { transform: translate(14px, -6px)  rotate(4deg)   scale(.96); z-index: 11; }
.card7  { transform: translate(-10px, 16px) rotate(-5deg)  scale(.95); z-index: 10; }
.card8  { transform: translate(8px, -10px)  rotate(7deg)   scale(.96); z-index: 9; }
.card9  { transform: translate(-16px, 8px)  rotate(-6deg)  scale(.95); z-index: 8; }
.card10 { transform: translate(18px, 12px)  rotate(5deg)   scale(.94); z-index: 7; }
.card11 { transform: translate(-6px, -12px) rotate(-3deg)  scale(.97); z-index: 6; }
.card12 { transform: translate(12px, 4px)   rotate(8deg)   scale(.95); z-index: 5; }
.card13 { transform: translate(-12px, 14px) rotate(-7deg)  scale(.94); z-index: 4; }
.card14 { transform: translate(6px, -4px)   rotate(3deg)   scale(.96); z-index: 3; }
.card15 { transform: translate(-4px, -14px) rotate(-2deg)  scale(.97); z-index: 2; }
.card16 { transform: translate(14px, 10px)  rotate(6deg)   scale(.95); z-index: 1; }

/* active image comes to the front */
#pic1:checked ~ .stack .card1,
#pic2:checked ~ .stack .card2,
#pic3:checked ~ .stack .card3,
#pic4:checked ~ .stack .card4,
#pic5:checked ~ .stack .card5,
#pic6:checked ~ .stack .card6,
#pic7:checked ~ .stack .card7,
#pic8:checked ~ .stack .card8,
#pic9:checked ~ .stack .card9,
#pic10:checked ~ .stack .card10,
#pic11:checked ~ .stack .card11,
#pic12:checked ~ .stack .card12,
#pic13:checked ~ .stack .card13,
#pic14:checked ~ .stack .card14,
#pic15:checked ~ .stack .card15,
#pic16:checked ~ .stack .card16 {
	transform: translate(0, 0) rotate(0deg) scale(1);
	z-index: 20;
	pointer-events: auto;
}

.captions {
	position: relative;
	width: 100%;
	margin: 0 auto 40px auto;
	min-height: 20px;
	text-align: center;
}

.cap {
	display: block;
	opacity: 0;
	position: absolute;
	left: 0;
	right: 0;
	transition: opacity .3s ease;
}

#pic1:checked ~ .captions .cap1,
#pic2:checked ~ .captions .cap2,
#pic3:checked ~ .captions .cap3,
#pic4:checked ~ .captions .cap4,
#pic5:checked ~ .captions .cap5,
#pic6:checked ~ .captions .cap6,
#pic7:checked ~ .captions .cap7,
#pic8:checked ~ .captions .cap8,
#pic9:checked ~ .captions .cap9,
#pic10:checked ~ .captions .cap10,
#pic11:checked ~ .captions .cap11,
#pic12:checked ~ .captions .cap12,
#pic13:checked ~ .captions .cap13,
#pic14:checked ~ .captions .cap14,
#pic15:checked ~ .captions .cap15,
#pic16:checked ~ .captions .cap16 {
	opacity: 1;
}