/*░░░▒▒▒▓▓▓███  COMMON STAGE STYLING  ███████████████████████████████████████████████████▓▓▓▒▒▒░░░*/

.stage {
display: block;
position: relative;
height: 600px;
width: 800px;
border: none;
overflow: hidden;
}

.slide {
    display: block;
    position: absolute;
	width: 100%;
	height: 100%;
    top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center;
    background-color: #070300;
    opacity: 0;
	z-index: 1;
    
    
}

#overlay{
    background-color: rgba(0,0,0,0.1);
    
}


background-image::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
    opacity: .6;
}

.slide span {
	display: block;
	font-size: calc(.9vw + .9vh + .45vmin);
	position: absolute;
	bottom: 10%;
	left: 4%;
	background-color: rgba(0,0,0,.4);
	padding: calc(.75vw + .75vh + .375vmin) calc(1.1vw + 1.1vh + .55vmin);
	color: #ccc;
	text-shadow: 1px 1px 1px rgba(0,0,0,.1);
	border-radius: 4px;
	font-weight: 300;
}

.next,
.prev {
	transition: 150ms linear all;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	border-width: calc(.25vw + .25vh + .125vmin) calc(.25vw + .25vh + .125vmin) 0 0;
	border-style: solid;
	border-color: #fff;
	width: calc(.75vw + .75vh + .375vmin);
	height: calc(.75vw + .75vh + .375vmin);
	cursor: pointer;
	opacity: 0.15;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.1));
}
.next {
	right: 25px; z-index: 10;
	transform: rotate(45deg);
}
.prev {
	left: 25px; z-index: 10;
	transform: rotate(-135deg);
}
.next:hover,
.next:active,
.prev:hover,
.prev:active {
	opacity: 0.6;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.5));
}



/*░░░▒▒▒▓▓▓███  TRANSITION-BASED STAGE SLIDES  ██████████████████████████████████████████▓▓▓▒▒▒░░░*/

/* Normal slide in vanilla/inactive state */
#stage1 .slide {
    transition-property: opacity, transform, z-index;
	transition-duration: 0ms;
	transition-function: linear;
	transition-delay: 5000ms, 5000ms, 0ms;
	transform: scale(1.5) rotate(5deg);
    opacity: 0;
}

/* Active slide */
#stage1 .slide.active {
	transition-property: opacity, transform, z-index;
	transition-duration: 3000ms, 3000ms, 0ms;
	transition-function: linear;
	transition-delay: 000ms, 000ms, 0ms;
	transform: scale(1);
	opacity: 1;
	z-index: 10;
}

/* .slide activated by clicking next/prev navigation button.
 * May have, for instance, faster transition time, or a completely differen effect */
#stage1 .slide.activated {
	transition-property: opacity, transform, z-index;
	transition-duration: 1000ms, 1000ms, 0ms;
	transition-function: linear;
	transition-delay: 0ms;
	transform: scale(1);
	opacity: 1;
	z-index: 10;
}

#stage1 .slide.deactivated {
	transition-property: opacity, transform, z-index;
	transition-duration: 8000ms, 8000ms, 0ms;
	transition-function: linear;
	transition-delay: 5000ms;
	transform: scale(1.5) rotate(5deg);
	opacity: 0;
	z-index: 1;
}



/* Navigation buttons */
.next,
.prev {
	transition: 150ms linear all;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	/*border-width: calc(.5vw + .5vh + .25vmin) calc(.5vw + .5vh + .25vmin) 0 0;*/
	border-style: solid;
	border-color: #fff;
	width: calc(1vw + 1vh + .5vmin);
	height: calc(1vw + 1vh + .5vmin);
	cursor: pointer;
	opacity: .085;
	filter: drop-shadow(0 0 5px rgba(0,0,0,.1));
}

#stage2 .slide.active {
	animation:
		visibility 5s 0s 1 forwards,
		z-index 0s 0s 1 forwards;
}

#stage2 .slide.activated {
	animation:
		visibility 1s 0s 1 both,
		z-index 0s 0s 1 both;
}

#stage2 .slide.deactivated {
	animation:
		visibility 1s 0s 1 both reverse,
		z-index 0s 0s 1 both reverse;
}
.prev {
	left: 25px; z-index: 10;
	transform: rotate(-135deg);
}