:root
{
    --help-delay-start: 9s;
	--flex-title-delay: 3.25s;

	--color-FLEX-logo-start: #FFF;
    --color-FLEX-logo-end: var(--c-green);

	--animation-duration: .5s;
	--animation-delay-offset: .05s;
}

body
{
	background: var(--c-green);
}

.CustomContent
{
	position: fixed;
	pointer-events: none;
	top: 0;
	z-index: -1;
}
.SE-bars
{
	left: 0;
	position: absolute;
	top: 0;
}

.SE-bars-row
{
	height: calc(100vh / 12);
	position: relative;
	width: 100vw;
}
@keyframes kf-SE-bars-row-before
{
	100%
	{
		width: 100%;
	}
}
.SE-bars-row::before
{
	animation: kf-SE-bars-row-before var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-delay));
	background: #FFF;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 0;
}
.SE-bars-row:nth-child(1)
{
	--animation-delay: 0s;
}
.SE-bars-row:nth-child(2)
{
	--animation-delay: var(--animation-delay-offset);
}
.SE-bars-row:nth-child(3)
{
	--animation-delay: calc(2 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(4)
{
	--animation-delay: calc(3 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(5)
{
	--animation-delay: calc(4 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(6)
{
	--animation-delay: calc(5 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(7)
{
	--animation-delay: calc(6 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(8)
{
	--animation-delay: calc(7 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(9)
{
	--animation-delay: calc(8 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(10)
{
	--animation-delay: calc(9 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(11)
{
	--animation-delay: calc(10 * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(12)
{
	--animation-delay: calc(11 * var(--animation-delay-offset));
}

@keyframes kf-SE-bars-pair
{
	100%
	{
		left: 100%;
		transform: translateX(0);
	}
}
.SE-bars-pair
{
	animation: kf-SE-bars-pair var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-delay));
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	transform-origin: top left;
	white-space: nowrap;
}

.SE-bars-pair>div:first-child
{
	transform-origin: top right;
}
.SE-bars-pair>div:nth-child(2)
{
	transform-origin: top left;
}

@keyframes kf-SE-bar
{
	100%
	{
		width: 100vw;
	}
}
.SE-bars-pair>div
{
	animation: kf-SE-bar var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-delay));
	display: inline-block;
	height: 100%;
	width: 20vw;
}

.SE-bar-white
{
	background: #FFF;
}
.SE-bar-green
{
	background: var(--c-green);
}
.SE-bar-orange
{
	background: var(--c-orange);
}
.SE-bar-red
{
	background: var(--c-red);
}

#SE-logo
{
	--height: 33vh;
	aspect-ratio: .75;
	height: var(--height);
	left: calc(50vw - (var(--height) * .75 / 2));
	overflow: visible;
	position: absolute;
	top: calc(100vh / 12 * 3);
}
#SE-logo .Rmark,
#SE-logo .eleven
{
	fill: var(--c-green);
}
#SE-logo .seven-orange
{
	fill: var(--c-orange);
}
#SE-logo .seven-red
{
	fill: var(--c-red);
}

@keyframes kf-seven-orange
{
	100%
	{
		transform: scaleX(1) translateX(0);
	}
}
#SE-logo .seven-orange,
#SE-logo .eleven
{
	animation: kf-seven-orange var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + 4 * var(--animation-delay-offset));
	transform: scaleX(2.5) translateX(-250%);
}
#SE-logo .eleven
{
	animation-delay: calc(var(--flex-title-delay) + 6 * var(--animation-delay-offset));
}

@keyframes kf-seven-red-top
{
	100%
	{
		transform: scale(1);
	}
}
#SE-logo .seven-red-top
{
	animation: kf-seven-red-top .5s ease-in forwards;
	animation-delay: calc(var(--flex-title-delay) + 4 * var(--animation-delay-offset) + var(--animation-duration));
	transform: scale(0);
	transform-origin: top right;
}
@keyframes kf-seven-red-bottom
{
	100%
	{
		transform: scaleY(1);
	}
}
#SE-logo .seven-red-bottom
{
	animation: kf-seven-red-top .5s ease-out forwards;
	animation-delay: calc(var(--flex-title-delay) + 4 * var(--animation-delay-offset) + var(--animation-duration) + .5s);
	transform: scaleY(0);
	transform-origin: 100% 70%;
}

@keyframes kf-SE-logo-login
{
	100%
	{
		--height: calc(100vh / 6);
		height: var(--height);
		left: calc(50vw - (var(--height) * .75 / 2));
		top: calc(100vh / 24);
	}
}
#SE-logo
{
	animation: kf-SE-logo-login var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + 12 * var(--animation-delay-offset) + var(--animation-duration) + 1.25s);
}

@keyframes kf-SE-rows-login
{
	100%
	{
		transform: translateX(100%);
	}
}
.SE-bars-row:where(:nth-child(4),:nth-child(5),:nth-child(6),:nth-child(7))
{
	animation: kf-SE-rows-login var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + 12 * var(--animation-delay-offset) + var(--animation-duration) + 1.5s + var(--index) * var(--animation-delay-offset));
}
.SE-bars-row:nth-child(4)
{
	--index: 1;
}
.SE-bars-row:nth-child(5)
{
	--index: 3;
}
.SE-bars-row:nth-child(6)
{
	--index: 5;
}
.SE-bars-row:nth-child(7)
{
	--index: 7;
}


form
{
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
	left: calc(50% - 200px);
	position: absolute;
	top: calc(100vh / 12 * 5);
	transform: translateY(-50%);
	width: 400px;
}
form span
{
	display: none;
}
input,
button.forgot
{
	grid-column: 1/3;
}
input,
button
{
	background: rgba(255,255,255,.1);
	border: 2px solid #FFF;
	color: #FFF;
	font-family: Roboto,Helvetica,Arial,sans-serif;
	font-size: 18px;
	height: 40px;
	outline: none;
}
input
{
	padding: 0 10px;
	font-family: sans-serif;
	font-size: .85rem;
	letter-spacing: .05rem;
}
::placeholder
{
	color: rgba(255,255,255,.5);
}
button
{
	border-radius: 20px;
	cursor: pointer;
}
input:where(:focus,:hover),
button:where(:focus,:hover)
{
	background: var(--c-orange);
	color: #FFF;
}

@keyframes kf-form-inputs
{
	100%
	{
		max-width: 100%;
		opacity: 1;
	}
}
input[name="email"],
input[name="password"],
button.login,
button.register,
button.forgot
{
	animation: kf-form-inputs var(--animation-duration) ease-in-out forwards;
	animation-delay: calc(var(--flex-title-delay) + 12 * var(--animation-delay-offset) + var(--animation-duration) + 2s + var(--index) * var(--animation-delay-offset));
	max-width: 0;
	opacity: 0;
}
input[name="email"]
{
	--index: 1;
}
input[name="password"]
{
	--index: 2;
}
button.login
{
	--index: 3;
}
button.login-only.register
{
	--index: 4;
}
button.forgot
{
	--index: 5;
}

body.Register form
{
	top: calc(100vh / 12 * 6);
}

body.Register .SE-bars-row:where(:nth-child(8),:nth-child(9))
{
	left: 100%;
}

div.register-only
{
	color: #FFF;
	font-size: 16px;
	grid-column: 1/3;
}

/* --------------- RESET PAGE ----------- */


form[name="form_Login"] button.reset::after {
    content: "Submit";
	text-transform: uppercase;
    color: #000;
    font-size: 14px;
}
form[name="form_Login"] button.reset:hover::after {
    color: #fff;
    transition: 0.3s ease;
}

/* --------------- RESET PAGE ----------- */