@import url("https://use.typekit.net/jvl6ifv.css");

:root
{
	--color-FLEX-logo-start: #0000A0;
	--color-FLEX-logo-end: #ccc;

	--form-font: "brandon-grotesque", sans-serif;
    --color: #441d1f;
}
@font-face
{
	font-family: "brandon-grotesque", sans-serif;
	src: url(./fonts/BrandonGrotesque-Regular.otf) format('otf');
}

.js-loading *,
.js-loading *:before,
.js-loading *:after
{
	animation-play-state: paused !important;
}

body
{
	grid-template-rows: 283px minmax(399px, 1fr) 90px;
}
form
{
	position: relative;
}

@keyframes kf-FLEX-type
{
	0%
	{
		font-weight: normal;
	}
	30%
	{
		letter-spacing: 0px;
		margin-left: 0;
		font-weight:900;
		-webkit-text-stroke: 1px var(--color-FLEX-logo-start);
	}
	55%
	{
		letter-spacing: 0px;
		margin-left: 0;
		font-weight:900;
		-webkit-text-stroke: 1px var(--color-FLEX-logo-start);
	}
	100%
	{
		font-weight:normal;
		letter-spacing: 46px;
		margin-left: 24px;
	}
}
@keyframes kf-FLEX-move
{
	100%
	{
		bottom: 0;
	}
}
@keyframes kf-FLEX-text-color
{
	100%
	{
		color: var(--color-FLEX-logo-end);
	}
}
@keyframes kf-FLEX-logo-color
{
	100%
	{
		background: var(--color-FLEX-logo-end);
	}
}
#Page_Footer
{
	animation: kf-FLEX-move 500ms ease-out 2500ms forwards;
	bottom: 45%;
	height: 90px;
	position: absolute;
	width: 100%;
	z-index: 5;
}
#Page_Footer::before
{
	animation:
		kf-FLEX-type 1500ms ease-in-out forwards 200ms,
		kf-FLEX-text-color 1.5s ease-in-out 2s forwards;
	color: var(--color-FLEX-logo-start);
	content: "FLEX";
	font-family:sans-serif;
	font-size: 14px;
	left: 50%;
	letter-spacing: 46px;
	line-height: 16px;
	margin-left: 24px;
	position: absolute;
	top: 51px;
	transform: translateX(-50%);
}
#Page_Footer::after
{
	animation: kf-FLEX-logo-color 1.5s ease-in-out 2s forwards;
	background: var(--color-FLEX-logo-start);
	content: "";
	height: 100%;
	position: absolute;
	width: 100%;
	-webkit-mask: url(/_assets/images/ui/login/TVC_footer_200324_1425.png) 50% 0 no-repeat;
}

body:not(.Register) .register-only,
body.Register .login-only
{
	max-height: 0;
	max-width: 0;
	overflow: hidden;
	position: absolute;
    visibility: hidden;
}
button.login-only.register::before
{
    content: "register...";
}
button.forgot::before
{
	content: "forgot your login?";
}
button.register-only.cancel::before
{
    content: "cancel";
}
button.register-only.register::before
{
	content: "register";
}
button.login::before
{
	content: "login";
}

:root
{
	--help-delay-start: 4500ms;
}
.help-registration
{
	bottom: 50%;
	right: 50%;
	--help-title: "Registering for Site Access";
}

.browser-IE
{
	background: #C00;
	box-sizing: border-box;
	color: #FFF;
	font-size: 30px;
	left: 50%;
	min-width: 800px;
	text-align: center;
	transform: translateX(-50%);
	padding: 20px;
	position: absolute;
}
.browser-IE::before
{
	content: "Use of this site requires a modern web browser, such as\A Chrome, Firefox, MS Edge, or Safari.\A Internet Explorer is not supported.";
	white-space: pre-wrap;
}
/* ------------------- FORM STYLE START HERE! -------------- */

body {
	/* background: #F5F5F5; */
	background: #0000A0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/* display: flex;
    justify-content: center;
    align-items: center;*/
    height: 100vh;
	animation: bgColor .5s ease-in both;
	animation-delay: 7.5s; 
}
@keyframes bgColor {
	0% 		{ background: #F5F5F5; }
	100% 	{ background: #0000A0; }
}
/* ------------------- FORM STYLE START HERE! -------------- */
form {
	display: grid;
	padding: 80px 0px 20px 0px;
	
	position: fixed;
	top: 0;
	left:0;
    right: 0;
	bottom: -100px;
	width: fit-content;
	height: fit-content;
	margin: auto;
	min-height: 240px;
	max-height: 300px;	
	min-width: 350px;

	color: #000;
	border-radius: 2px;
	/* border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.09); */
	font-family: var(--font-kelson-normal);
	
	z-index: 3;
	animation: formAni 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 7.5s both;
}


@keyframes formAni {
	0% {
		opacity: 0;
		transform: scaleY(0.4);
    	transform-origin: 0% 100%;
	}
	100% {
		opacity: 1;
		transform: scaleY(1);
    	transform-origin: 0% 100%;
	}
}

form div {
	font-size: 11px;
	text-align: left;
	grid-area: 6 / 1 / 9 / 2;
	margin-top: 40px;
	color: #333;
	font-style: normal;
	padding:10px;
	letter-spacing: 1px;
}

input {
	padding: 10px 20px;
	color: #333;
	background: transparent;
	border-bottom: 1px solid #ccc;
    border-left: none ;
    border-right: none;
    border-top: none;
	font-size: 16px;
    /* font-style: italic; */
	outline: none;
	margin-top: 10px;
	width: 350px;
	height: 40px;
    border-radius: 0px;
}

input[name="email"] {
	grid-area: 2 / 1 / 3 / 2;
}

input[name="password"] {
	grid-area: 3 / 1 / 4 / 2;	
}

input[name="code"] {
	grid-area: 4 / 1 / 5 / 2;
}

input[name="code"]::placeholder {
	color: #ccc;
}

::placeholder {
	color: #888888;
	font-family: var(--form-font);
	font-size: 14px;
	font-weight: 200;
}

button
{
	border: none;
	color: #fff;
	cursor:pointer;
	font-family: var(--font-kelson-bold);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .5px;
	text-transform: uppercase;
	outline: none;
	display: block;
	margin-top: 25px;
	height: 40px;
	width: 170px;
    border-radius: 0px;
}

button.login-only.login {
	background: #0000A0;
	color: #fff;	
	cursor: pointer;
    display: block;
	grid-area: 4 / 1 / 6 / 2;
}

button.login-only.login:hover {
	transition: 0.3s;
	opacity: .8;
	background: #000041;
}

button.login-only.register {
	background: #00D7B9;
    opacity: .5;
	margin-left: 180px;
	cursor: pointer;
	display: block;
	grid-area: 4 / 1 / 6 / 2;
}

button.login-only.register:hover {
	background: #008674;
	opacity: 1;
	transition: 0.3s;
}

button.login-only.forgot {
	background: none;
	color: #888888;
	width: 50%;
	text-align: left;
	font-weight: 400;
	line-height: 65px;
	cursor: pointer;
	font-size: 12px;
	grid-area: 5 / 1 / 8 / 2;
	margin-top: 20px;
	height: 20px;
}

button.login-only.forgot:hover {
	color: #000000;
	font-weight: 400;
	transition: 0.3s;
}

button.register-only.register {
	background:#0000A0;
	color: #fff;
	grid-area: 5 / 1 / 7 / 2;
}

button.register-only.register:hover {
	background: #15BEF0;
	color: #fff;
	transition: 0.3s;
}

button.register-only.cancel {
	background: #136BBC;
	margin-left: 180px;
	grid-area: 5 / 1 / 7 / 2;
}

button.register-only.cancel:hover {
	background: #383838;
	transition: 0.3s;
}

/* ---------------------- FORM END -------------- */

.main-logo-container-1,.main-logo-container-2,.main-logo-container-3 {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 5%;
}

.logo-box {
	width: 150px;
	height: 150px;
	border-radius: 5px;
	background: #ccc;
	animation: fade-in 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;	
}
  
:root {
	--animation-delay: 1.5s;
	--animation-direction: 4s;
}
/* line one */
@keyframes logoBox-1 {
	0% {	transform: translateY(0) translateX(0) scale(1);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(70vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-2 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(45vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-3 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(20vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-4 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(-20vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-5 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(-45vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-6 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(30vh) translateX(-70vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-7 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(70vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-8 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(50vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-9 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(20vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-10 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(-15vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-11 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(-45vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-12 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(0vh) translateX(-70vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-13 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-30vh) translateX(70vh) scale(0);
	  		opacity: 0;	}
} 
@keyframes logoBox-14 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-32vh) translateX(50vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-15 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-32vh) translateX(20vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-16 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-32vh) translateX(-15vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-17 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-32vh) translateX(-45vh) scale(0);
	  		opacity: 0;	}
}
@keyframes logoBox-18 {
	0% {	transform: translateY(0) translateX(0) scale(1.5);
	  		opacity: 0; filter: blur(1.5rem);	}
	40% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	filter: blur(0px);	}
	90% {	transform: translateY(0) translateX(0) scale(1);
			opacity: 1;	}
	100% {	transform: translateY(-32vh) translateX(-70vh) scale(0);
	  		opacity: 0;	}
}

/* CONTAINER - 1 */
.main-logo-container-1 .logo-box:nth-child(1) {
	background: url(/_customers/images/ui/Mars/logo-1.png);
	background-size: cover;
	animation: logoBox-1 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .2s);
	animation-duration: var(--animation-direction);	
}
.main-logo-container-1 .logo-box:nth-child(2) {
	background: url(/_customers/images/ui/Mars/logo-2.png);
	background-size: cover;
	animation: logoBox-2 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .4s);
	animation-duration: var(--animation-direction);		
}
.main-logo-container-1 .logo-box:nth-child(3) {
	background: url(/_customers/images/ui/Mars/logo-3.png);
	background-size: cover;
	animation: logoBox-3 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .6s);
	animation-duration: var(--animation-direction);		
}
.main-logo-container-1 .logo-box:nth-child(4) {
	background: url(/_customers/images/ui/Mars/logo-4.png);
	background-size: cover;
	animation: logoBox-4 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .2s);
	animation-duration: var(--animation-direction);		
}
.main-logo-container-1 .logo-box:nth-child(5) {
	background: url(/_customers/images/ui/Mars/logo-5.png);	
	background-size: cover;
	animation: logoBox-5 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .4s);
	animation-duration: var(--animation-direction);		
}
.main-logo-container-1 .logo-box:nth-child(6) {
	background: url(/_customers/images/ui/Mars/logo-6.png);
	background-size: cover;
	animation: logoBox-6 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .6s);
	animation-duration: var(--animation-direction);	
}

/* CONTAINER - 2 */
.main-logo-container-2 .logo-box:nth-child(1) {
	background: url(/_customers/images/ui/Mars/logo-7.png);
	background-size: cover;
	animation: logoBox-7 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .5s);
	animation-duration: var(--animation-direction);	
}
.main-logo-container-2 .logo-box:nth-child(2) {
	background: url(/_customers/images/ui/Mars/logo-8.png);
	background-size: cover;	
	animation: logoBox-8 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .7s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-2 .logo-box:nth-child(3) {
	background: url(/_customers/images/ui/Mars/logo-9.png);
	background-size: cover;	
	animation: logoBox-9 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .3s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-2 .logo-box:nth-child(4) {
	background: url(/_customers/images/ui/Mars/logo-10.png);
	background-size: cover;
	animation: logoBox-10 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .6s);
	animation-duration: var(--animation-direction);	
}
.main-logo-container-2 .logo-box:nth-child(5) {
	background: url(/_customers/images/ui/Mars/logo-11.png);
	background-size: cover;
	animation: logoBox-11 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .8s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-2 .logo-box:nth-child(6) {
	background: url(/_customers/images/ui/Mars/logo-12.png);
	background-size: cover;
	animation: logoBox-12 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .12s);
	animation-duration: var(--animation-direction);
}

/* CONTAINER - 3 */
.main-logo-container-3 .logo-box:nth-child(1) {
	background: url(/_customers/images/ui/Mars/logo-13.png);
	background-size: cover;	
	animation: logoBox-13 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .5s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-3 .logo-box:nth-child(2) {
	background: url(/_customers/images/ui/Mars/logo-14.png);
	background-size: cover;	
	animation: logoBox-14 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .7s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-3 .logo-box:nth-child(3) {
	background: url(/_customers/images/ui/Mars/logo-15.png);
	background-size: cover;
	animation: logoBox-15 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .6s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-3 .logo-box:nth-child(4) {
	background: url(/_customers/images/ui/Mars/logo-16.png);
	background-size: cover;
	animation: logoBox-16 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .10s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-3 .logo-box:nth-child(5) {
	background: url(/_customers/images/ui/Mars/logo-17.png);
	background-size: cover;	
	animation: logoBox-17 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .9s);
	animation-duration: var(--animation-direction);
}
.main-logo-container-3 .logo-box:nth-child(6) {
	background: url(/_customers/images/ui/Mars/logo-18.png);
	background-size: cover;
	animation: logoBox-18 ease-in-out both;
	animation-delay: calc(var(--animation-delay) + .8s);
	animation-duration: var(--animation-direction);
}
/* FRONT LOGO ANIMATION */

.frontLogo {
	width: 346px;
	height: max-content;
	background: transparent;
	text-align: center;
	z-index: 5;
	position: absolute;
    top: -150px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto; 	
}
.frontLogo img {
	width: 310px;
	height: fit-content;
	animation: fade-in-bottom 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 6s both;	
}
@keyframes fade-in-bottom {
	0% {
	  transform: translateY(100px);
	  filter: blur(15px);
	  opacity: 0;
	}
	80% {
	  transform: translateY(0) scale(1);
	  opacity: 1;
	}
	
	100% {
	  transform: translateY(0) scale(0.8);
	  opacity: 1;
	}
  }

/* FRONT BOX */
.frontBox {
	width: 100%;
	height: 600px;
	position: absolute;
	background: #FFF;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
	z-index: 1;
	animation: .5s frontBox ease-in both; 
	animation-delay: 7.5s;
	/* rotate: -5deg; */
}

@keyframes frontBox  {
	0%		{	transform: scaleX(1); opacity: 0; filter: blur(15px);	}
	100%	{	transform: scaleX(1);	}
}