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

	--animation-duration-bar: .2s;
	--animation-duration-letter: .1s;
}

body
{
	background: var(--c-blue-3);
}

@keyframes kf-fade
{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

svg
{
	fill: #FFF;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(calc(-50% + 1.7%), -50%);
	width: 37%;
}
svg .R-mark
{
	display: none;
}

@keyframes kf-evenly-bars
{
	100%
	{
		transform: scaleX(1);
	}
}
svg .bar1,
svg .bar2,
svg .bar3
{
	animation-name: kf-evenly-bars;
	animation-duration: .4s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--element-inex) * var(--animation-duration-bar));

	transform: scaleX(0);
	transform-origin: top left;
}
svg .bar1
{
	--element-inex: 0;
}
svg .bar2
{
	--element-inex: 1;
}
svg .bar3
{
	--element-inex: 2;
}

svg .E1,
svg .V,
svg .E2,
svg .N,
svg .L,
svg .Y
{
	animation-name: kf-fade;
	animation-duration: var(--animation-duration);
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;

	animation-delay: calc(var(--flex-title-delay) + var(--animation-duration-bar) * 4 + var(--element-inex) * var(--animation-duration-letter));
	opacity: 0;
}
svg .E1
{
	--element-inex: 0;
}
svg .V
{
	--element-inex: 1;
}
svg .E2
{
	--element-inex: 2;
}
svg .N
{
	--element-inex: 3;
}
svg .L
{
	--element-inex: 4;
}
svg .Y
{
	--element-inex: 5;
}

@keyframes kf-evenly-move
{
	100%
	{
		top: calc(15% + 25px);
		transform: translate(calc(-50% + 5px), 0%);
		width: 360px;
	}
}
svg
{
	animation-name: kf-evenly-move;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-duration-bar) * 4 + var(--animation-duration-letter) * 8);

	transform-origin: top center;
	z-index: 3;
}

@keyframes kf-video
{
	100%
	{
		opacity: .3;
	}
}
video
{
	animation-name: kf-video;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-duration-bar) * 4 + var(--animation-duration-letter) * 5);
	background: #000;
	bottom: 0;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	opacity: 0;
	position: fixed;
	transform: translateX(-50%);
}

form
{
	animation-name: kf-fade;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: calc(var(--flex-title-delay) + var(--animation-duration-bar) * 4 + var(--animation-duration-letter) * 8 + 1s);
	background: rgba(var(--c-blue-3-rgb), .6);
	border: 1px solid #FFF;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 1fr 1fr;
	left: 50%;
	opacity: 0;
	padding: 120px 40px 20px 40px;
	position: absolute;
	top: 15%;
	transform: translateX(-50%);
	width: 460px;
	z-index: 3;
}
::placeholder
{
	color: rgba(0,0,0,.25);
	font-style: oblique;
}
span
{
	display: none;
}
input
{
	border: 1px solid #FFF;
	font-family: Muli, sans-serif;
	font-size: 15px;
	grid-column: 1/3;
	height: 35px;
    padding: 0 7px;
}
input:focus
{
    box-shadow: var(--color-customer-gold) 0 0 5px;
	outline: none;
}
button
{
	background: none;
	border: 1px solid #FFF;
	color: #FFF;
	cursor: pointer;
	font-family: Muli, sans-serif;
	font-size: 16px;
	height: 35px;
	text-transform: uppercase;
}
button.forgot
{
	background: none;
	border: none;
	color: rgba(255,255,255,.5);
	font-size: 12px;
	font-style: oblique;
	grid-column-start: 2;
	height: auto;
	padding: 0;
	text-align: right;
	text-transform: lowercase;
	width: 100%;
}

div.register-only
{
	color: #FFF;
	font-size: 14px;
	line-height: 18px;
	grid-column: 1/3;
}
.CustomContent
{
    height: 100%;
	position: absolute;
    width: 100%;
}