@charset 'utf-8';

.splashpage-container		{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2));
	left:		0;
	width:		var(--splashpage-width);
	height:		var(--splashpage-height);
	clear:		both;
	margin:		0;
 	background-color:	salmon; 
 	background-image:	url("..\\img\\paper.jpg");
	background-blend-mode:	multiply; 
	border-radius:	calc(var(--splashpage-bradius) + 1px);
	border:		var(--splashpage-bwidth) solid maroon;
}
.splashpage-container > video	{
	position: 	absolute;
	top:     	0;
	left:     	0;
	width:		100%;
	height:		auto;
	overflow:	hidden;
	border-bottom:	var(--splashpage-bwidth) solid maroon;
	border-radius:	calc(var(--splashpage-bradius) - 4px);
}
.splashpage-blackbar		{
	position:		absolute;
	opacity:		0;
	top:			calc(var(--splashpage-height) * .3);
	left:			0;
	width:			100%;
	height:			6.6vw;
	background-color:	black;
	animation:		bar-fade 2s cubic-bezier(0.22, 1, 0.36, 1) .5s 1;
	animation-fill-mode:	forwards;
	z-index:		3;
}
.splashpage-text		{
        position:		absolute;
        top:			calc(var(--splashpage-height) * .3);
	width:			inherit;
	height:			auto;
	text-align:		center;
	z-index:		3;
}
.splashpage-text h1		{
	font-size:		5.5vw;
	line-height:		6.6vw;
	opacity:		0;
	letter-spacing:		0.2vw;
	vertical-align:		center;
	margin:			0;
	padding:		0;
	animation:		text-fade 2s cubic-bezier(0.22, 1, 0.36, 1) 2s 1;
	animation-fill-mode:	forwards;
}
.splashpage-explorelink		{
	position:		absolute;
	top:			calc(var(--splashpage-height) * 0.28);
	left:			0;
	width:			50%;
	margin-left:		25%;
 	padding-bottom:		.5vw;
	font-size:		4vw;
	text-align:		center;
	text-shadow:		1px 1px grey;
	color:			maroon;
	background-color:	rgba(80,0,0,.35);
 	border-radius:		16px; 
	z-index:		3;
}
.splashpage-explorelink a	{
	font-size:		4vw;
}
.splashpage-explorelink:hover a	{
	letter-spacing:		1.6vw;
	transition:		letter-spacing 0.75s ease;
}
.splash-triangle		{
        position:		absolute;
	top:			calc(var(--splashpage-height) - 15.65vw);
	left:			0; /*calc(var(--splashpage-bwidth) - 0px); */
	clear:			both;
	float:			left;
	width:			100%;
	box-sizing:		border-box;
	border-top:		15vw solid transparent;
	border-left:  		47.6vw solid black;
	border-bottom:		1vw  solid black;
	border-right: 		48vw solid black;
	border-radius: 		calc(var(--splashpage-bradius) - 4px);
	overflow:		hidden;
	z-index:		3;
}

.splash-footer			{
	position:	absolute;
	top: 		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2) + calc(var(--splashpage-height) - 26vw));
	left:		var(--splashpage-bwidth);
	width:		var(--splashpage-width);
	height: 	auto;
	text-align:	center;
	background:	black;
}
.splash-footer p		{
	font-size:	1.5vw;
}
.splash-footer a		{
	font-size:	1.5vw;
}
.splashpage-splashy		{
	position:	absolute;
	top:		calc(var(--menubar-height) + calc(var(--mb-border-width) * 2) + var(--splashpage-height) + calc(var(--splashpage-bwidth) * 2));
	left:		0;
	width:		var(--splashpage-width);
	height:		var(--splashy-height);
	border-radius:	calc(var(--splashpage-bradius) + 1px);
	border:		var(--splashpage-bwidth) solid maroon;
	overflow:	hidden;
/* background-color: yellow; */
}
.splashpage-splashy > img	{
	position: 	absolute;
	top:     	0;
	left:     	0;
	width:    	100%;
	height:   	auto;
	z-index: 	-1;
} 
.ss-part1			{
	position:	absolute;
	top:		0;
	left:		14vw;
}
.ss-part1 > p			{
	font-size:	18vw;
	margin-top:	-.5vh;
	text-shadow:	1px 2px black;
	animation: 	text-fade 2s cubic-bezier(0,0,0.58,1) 0s 1 forwards;
	opacity:	0;
 	z-index: 	2;
}
.ss-part2			{
	position:	absolute;
	top:		11vh;
	left:		34vw;
}
.ss-part2 > p			{
	font-size:	18vw;
	text-shadow:	1px 2px black;
	animation: 	text-fade 2s cubic-bezier(0,0,0.58,1) 2s 1 forwards;
	opacity:	0;
	z-index: 	2;
}
.ss-part3			{
	position:	absolute;
	top:		30vh;
	left:		56vw;
}
.ss-part3 > p			{
	font-size:	18vw;
	text-shadow:	1px 2px black;
	animation: 	text-fade 2s cubic-bezier(0,0,0.58,1) 4s 1 forwards;
	opacity:	0;
	z-index: 	2;
}

@keyframes text-fade		{
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bar-fade		{
	0%   { transform: scaleX(0); opacity:   0; }
	80%  { opacity: 0.5; }
	100% { transform: scaleX(1); opacity: 0.5; }
}