/* Mainstage */

.mainstage {
	overflow: hidden;
	background-color: rgb(var(--blue-2));
}

.mainstage picture {
	margin: calc(var(--vertical-spacing) * -1) 0;
}

.home .mainstage picture {
	margin-top: calc(var(--vertical-spacing) * -1.25);
	margin-bottom: calc(var(--vertical-spacing) * -1.25);
}

.mainstage img {
	height: 100%;
	width: calc(100% + var(--horizontal-spacing));
	max-width: none;
}

.mainstage header {
	padding-left: calc(var(--horizontal-spacing) * 3);
}

.mainstage header:before {
	content: '';
    position: absolute;
    width: 100%;
    height: calc( 100% + (var(--vertical-spacing) * 2) );
    top: 50%;
    right: 0;
    transform: translate(10%, -50%);
    background-color: rgb(var(--blue-2));
    clip-path: ellipse(50% 100% at 50% 50%);
}

.home .mainstage header:before {
    height: calc( 100% + (var(--vertical-spacing) * 2.5) );
}

.mainstage h1, 
.mainstage h2 {
	color: inherit;
	font-size: 1.333rem;
	line-height: 1.333;
	font-weight: 900;
}

.mainstage h1:first-child, 
.mainstage h2:first-child, 
.mainstage header > strong:first-child {
	display: block;
	line-height: 1;
	font-size: 5.333rem;
	font-weight: 900;
	letter-spacing: -0.017em;
	text-shadow: 0 3px 6px rgba(var(--black), 0.3);
	margin-bottom: 0;
}

.mainstage h1:first-child + .btn-list,
.mainstage h2:first-child + .btn-list {
	margin-top: 1.5rem;
}

.mainstage figcaption {
	position: absolute;
	bottom: calc(var(--vertical-spacing) * -0.5);
	right: 0;
	font-style: italic;
	font-size: 0.778rem;
	line-height: 1.222;
	text-shadow: 0 0 0.5em rgb(var(--black)), 
					0 0 1.25em rgb(var(--black)), 
					0 0 2em rgb(var(--black));
}

/* Mainstage */

/* Mainstage [Thank You] */

.thank-you.mainstage {}

.thank-you.mainstage h1:first-child {
	font-size: 4.722rem;
}

/* Mainstage [Thank You] */

/* Mainstage [Landing Page] */

.landing.mainstage {}

.landing.mainstage h1:first-child {
	font-size: 3rem;
}

.landing.mainstage .btn {
	display: none;
	visibility: hidden;
}

/* Mainstage [Landing Page] */

/* Responsive [1440px] */

@media screen and (max-width: 1440px) {
	.mainstage header {
		padding-left: 0;
	}
}

/* End Responsive [1440px] */

/* Responsive [1200px] */

@media screen and (max-width: 1200px) {
	.mainstage h1:first-child, 
	.mainstage h2:first-child, 
	.mainstage header > strong:first-child {
		font-size: 4.444rem;
	}
	
	.thank-you.mainstage h1:first-child {
		font-size: 4rem;
	}
	

	.landing.mainstage .btn {
		display: inline-flex;
		visibility: visible;
	}
}

/* End Responsive [1200px] */

/* Responsive [1000px] */

@media screen and (max-width: 1000px) {
	.mainstage picture,
	.home .mainstage picture {
		margin-top: calc(var(--vertical-spacing) * -0.75);
		margin-bottom: calc(var(--vertical-spacing) * 0.25);
	}
	
	.mainstage img {
		width: calc( 100% + (var(--horizontal-spacing) * 2) );
		margin-left: calc(var(--horizontal-spacing) * -1);
	}
	
	.mainstage header:before {
		display: none;
	}
	
	.mainstage figcaption {
		bottom: 2rem;
	}
}

/* End Responsive [1000px] */

/* Responsive [800px] */

@media screen and (max-width: 800px) {
	
}

/* End Responsive [800px] */

/* Responsive [650px] */

@media screen and (max-width: 650px) {
}

/* End Responsive [650px] */

/* Responsive [550px] */

@media screen and (max-width: 550px) {
	.mainstage picture, 
	.home .mainstage picture {
		margin-top: calc(var(--vertical-spacing) * -0.5);
	}
	
	.mainstage img {
		width: calc(100% + var(--horizontal-spacing));
		margin-left: calc(var(--horizontal-spacing) * -0.5);
	}
	
	.mainstage h1:first-child, 
	.mainstage h2:first-child, 
	.mainstage header > strong:first-child {
		font-size: 3rem;
	}
	
	.mainstage h1, .mainstage h2 {
		font-size: 1.222rem;
	}
	
	.thank-you.mainstage h1:first-child {
		font-size: 3rem;
	}
	
	.landing.mainstage h1:first-child {
	    font-size: 2rem;
	}
	
	.mainstage figcaption {
		font-size: 0.667rem;
	}
}

/* End Responsive [550px] */