/* FULL, MOD */

FIGURE
{	display:block; box-sizing:content-box;
	position:fixed; top:0; height:0; padding:0; margin:0;
	width:100%;
	height:0%;
	background-color:#F8FAFC;
	z-index:-20;
	opacity:0;
	transition:all .3s ease; 
	display:flex; flex-direction:column; justify-content:center; 
	user-select: none;
}

FIGURE.active
{	opacity:1;
	z-index:20;
	height:100%;
}

FIGURE>SECTION
{	display:flex; align-items:center;  justify-content: center;	
	flex-direction:column;
}

FIGURE>SECTION { font-size:4vw; }
FIGURE>SECTION>DIV { flex-grow:0; transition:opacity,font-size .2s ease; }
FIGURE>SECTION>DIV.blur { opacity:.4; font-size:50%; }


/* icon "full-pad" */
FIGURE>HEADER
{   text-align:right; font-size:80%; margin:0; padding:.25em 1.5em .5em 1em;
    position:fixed; top:0; right:0; z-index:25; 
}

FIGURE>HEADER>SPAN { display:block; }



FIGURE>SPAN { display:block; color:var(--grey); text-align:center; width:100%; position:absolute; }
FIGURE>SPAN.info { margin-top:3em; top:0; }
FIGURE>SPAN.help { margin-bottom:3em; bottom:0; }

FIGURE DIV { font-family:"Parisienne"; }
FIGURE DIV { font-family:"Shantell Sans"; }
FIGURE DIV { font-family:"IBM Plex Sans"; }

FIGURE DIV.element { text-align:center; width:100%; color:var(--black); }

FIGURE>SECTION.fade { animation: fadeout ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards; }
FIGURE>SECTION>DIV.fade { animation: fadeout ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards; }


/*
SECTION.play { height:100%; }

OUTPUT { display:block; box-sizing:content-box;  }
OUTPUT#container { position:relative; width:100%; height:100%; }
OUTPUT#render { position:absolute; top:0px; left:0; width:100%; height:100%; overflow:hidden; }

DIV.mod_big { font-size:800%; display:block; text-align:center; line-height:1em; }

DIV.mod_fade { animation: fadeout ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards; }

OUTPUT DIV { transition:none; }
*/