body
{
	background: #000;
}

#init-bg
{
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	opacity: 1;
	transition: opacity 1000ms ease-out;
}

#init-bg:before
{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;	
	transform: scale(1.1,1.1);
	background-size: cover;
	opacity: 0;
	transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}

#init-bg.fast, #init-bg.fast:before
{
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

#init-bg.on:before
{
	opacity: 1;
	transform: scale(1,1);
}

#init-container
{
	position: absolute;
	left:  calc(50% - 214px);
	top:  calc(50% - 214px);
	width:  428px;
	height:  428px;
	border-radius: 80px;
	backdrop-filter: blur(32px);
	background-color: rgba(0,0,0,0.05);
	opacity: 0;
	transition: opacity 500ms ease-out;
}

#init-container.fast
{
	transition: opacity 250 ease-out;
}

#init-container:after
{
	content: '';
	position: absolute;
	top: calc(43% - 24px);
	left: 0;
	width: 100%;
	height: 48px;	
	opacity: 0;
	transform: scale(0.67,0.67);
	transition: opacity 1000ms ease-out, transform 500ms ease-out;
}

#init-container.fast:after
{
	transition: opacity 500ms ease-out, transform 250ms ease-out;
}

#init-bar
{
	position: absolute;
	left: 56px;
	right: 56px;
	top: calc(57% - 2px);
	background: rgba(10,10,10,0.1);
	opacity: 0;
	transition: opacity 500ms ease-out;
}

#init-bar, #init-fill
{
	height: 4px;
	border-radius: 2px;
}

#init-fill
{
	width: 0%;
	background: #fff;
	transition: width 300ms ease-out;
}

@media only screen and (max-width: 600px)
{
	#init-container
	{
		width:  256px;
		height:  256px;
		left:  calc(50% - 128px);
		top:  calc(50% - 128px);
		border-radius: 48px;
	}

	#init-container:after
	{
		top: calc(40% - 16px);
		background-size: 128px;
	}

	#init-bar
	{
		top: calc(60% - 2px);
		left: 32px;
		right: 32px;
	}
}

#init-container.on, #init-container.on:after, #init-container.on #init-bar
{
	opacity: 1;
	transform: scale(1,1);
}

#init-container.on.outro
{
	transition: opacity 400ms ease-out;
	opacity: 0;
}

#init-bg.outro
{
	opacity: 0;
	pointer-events: none;
}

body.in-init .MainLayoutElement,body.in-init .MainLoginLayoutElement
{
	visibility: hidden;
	opacity: 0;
}

body.in-init. .MainLayoutElement.init-outro,body.in-init .MainLoginLayoutElement.init-outro
{
	visibility: visible;
	opacity: 1;
}