@charset "utf-8";
/* CSS Document */

body { 
	padding: 0; margin: 0; 
	box-sizing: border-box;
}
.show {display: block;}
.hide {display: none;}


#header {
	
	width: 100%;
	min-width: 900px;
	/*border-bottom: 1px solid rgb(0 0 0 / 5%);*/
	border-bottom: 1px solid rgba(229,235,243,0.9);
	/*background: rgb(0 0 0 / 1%);*/
	/*background: linear-gradient(rgb(255 255 255 / 100%), rgb(254 254 254 / 100%));*/
	/*background: linear-gradient(0deg,rgba(245, 245, 245, 1) 0%, rgba(250, 250, 250, 1) 25%, rgba(253, 253, 253, 1) 45%, rgba(255, 255, 255, 1) 80%);*/
	/*background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 169, 224, 0.05) 100%);*/
	background: linear-gradient(0deg,rgba(0, 169, 224, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
	display: flex;
	justify-content: space-between;
}

#header img {
	height: 48px;
	padding: 1rem 1.3rem;
}


#main-container {
    width: 100%;
    /*height: 100%;*/
	min-width: 900px;
    /*background: #f9f9f9;*/
    /*position: absolute;*/
}

#logo-container {
    width: 100%;
	min-width: 900px;
	display: block;
	position: relative;
	top: 64px;
	animation: fade-in 2s ease-out;
}


.cust-training {
	position: relative;
	width: 750px;
	top: 9rem;
	padding: 3px 0 2px 0;
	margin: 0 auto;
	/*background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 169, 224, 0.05) 100%);*/
	/*background-color: rgba(0, 169, 224, 0.05);*/
	/*background-color: rgba(229,235,243,0.0);*/
	/*background-color: rgb(0 0 0 / 5%);*/
	/*border-radius: 10px;*/
	border-top: 2px solid rgba(229,235,243,0.8);
	border-bottom: 2px solid rgba(229,235,243,0.8);
/*	color: hsla(0,0%,88%,1.00);*/
	color: rgb(0 0 0 / 15%);
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	letter-spacing: .33rem;
	text-transform: uppercase;
	font-family: Helvetica, Arial, "sans-serif";
	animation: fade-in 2s ease-out;
	animation: letter-spacing 3s ease-out;
}

.cust-training img {
	height: 80px;
	opacity: .05;
	position: relative;
	top: -1rem;
}

.title-fix {
	margin-right: -.33rem;
	animation: letter-spacing-fix 1s ease-out;
}

.top, .bottom {
	width: 620px;
	border: none;
	height: 1rem;
	animation: none;
}

.top {
	border-left: 1px solid rgba(229,235,243,0.8);
	border-top-left-radius: 10px;
	border-bottom: none;
	border-top: 1px solid rgba(229,235,243,0.8);
}

.bottom {
	border-right: 1px solid rgba(229,235,243,0.8);
	border-bottom-right-radius: 10px;
	border-top: none;
	border-bottom: 1px solid rgba(229,235,243,0.8);
}

#priv-notice {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center; 
	margin: 0 auto;
	top: 20rem;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(0, 169, 224, 0.05) 100%);
	border-top: 1px solid rgba(229,235,243,0.9);
/*	background-color: rgba(229,235,243,0.9);*/
	color: hsla(0,0%,60%,1.00);
	font-size: 80%;
	text-align: center;
	font-family: Helvetica, Arial, "sans-serif";
	animation: fade-in 2s ease-out;
}

#priv-notice a {
	text-decoration: none;
	color: rgb(66 100 125 / 90%);
	font-weight: bold;
}

.logo-bg {
	width: 900px;
	display: block;
	margin: 0 auto -345px auto;
	position: relative;
	animation: fade-in 1s ease-out;
}

.logo-fan {
	display: block;
	width: 512px;
	margin: 0 auto -512px auto;
	position: relative;
	opacity: 0.05;
	transform: rotate(108deg);
}

.fan-rotate {
	animation: rotator 1s steps(20, start) infinite;
}

.logo {
    width: 161px;
	margin: auto;
	display: block;
	position: relative;
	/*filter: saturate(0%);*/
	animation: blur 1s ease-out;
	-webkit-animation: blur 1s ease-out;
	-moz-animation: blur 1s ease-out;
}


.desaturate {
	filter: saturate(0%);
}

#engine-container {
	width: 760px;
	margin: 100px auto 0px auto;
	padding: 0 70px;
	animation: blur 1s ease-out;
	-webkit-animation: blur 1s ease-out;
	-moz-animation: blur 1s ease-out;
	position: relative;
}

#engine-container a {
	text-decoration: none;
}

/* Container for flexboxes */
.row {
	display: flex;
	align-items: center;
	height: 80px;
}

/* Create four equal columns */
.column {
	flex: 25%;
	padding: 0.8em;
}


.engine-card {
	border: 2px solid rgb(245 133 31 / 20%);
	border-radius:8px 8px 8px 8px;
	padding: .5em 0;
	/*height: 18px;*/
	line-height: 18px;
	margin: 0;
	text-align: center;
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 18px;
	font-weight: bolder;
	letter-spacing: 0.1em;
	color: white;
	background-color: rgb(245 133 31 / 90%);
	position: relative;
	filter: drop-shadow(0px 48px 24px rgb(24 13 0 / 40%));
	transition: background-color .5s ease, padding .2s ease, color .3s ease, border-radius .3s ease, font-size .3s ease, letter-spacing .3s ease, drop-shadow .5s ease;
}

.login-button {
	border-color: rgb(60 160 255 / 100%);
	background-color: rgb(66 100 125 / 90%);
	max-width: 30rem;
	margin: 0 auto;
}


.login-button-disabled {
	border-color: rgb(231 231 231);
    background-color: rgb(193 193 193 / 55%);
    filter: drop-shadow(0 0 0 rgb(0 0 0 / 10%));
    color: rgb(251 251 251 / 50%);
}


.action-button {
/*	border: 2px solid rgb(245 133 31 / 20%);
	border-radius:8px 8px 8px 8px;*/
	padding: .5em 0;
	height: 18px;
	line-height: 20px;
	margin: 5em auto;
	width: 10em;
	text-align: center;
	font-family: Helvetica, Arial, "sans-serif";
	font-size: 16px;
	font-weight: bolder;
	letter-spacing: 0.1em;
/*	color: white;
	background-color: rgb(245 133 31 / 90%);*/
	position: relative;
/*	filter: drop-shadow(0px 48px 24px rgb(24 13 0 / 40%));
	transition: background-color .5s ease, padding .2s ease, color .3s ease, border-radius .3s ease, font-size .3s ease, letter-spacing .3s ease, drop-shadow .5s ease;*/
	
	background-color: rgb(255 255 255 / 50%);
	color: rgb(245 133 31 / 100%);
	box-shadow: inset 0px 10px 15px 0px rgb(245 133 31 / 20%);
	border: 2px solid rgb(245 133 31 / 60%);
	border-radius:36px;
/*	letter-spacing: 0em;
	font-size: 20px;*/
	filter: drop-shadow(0px 18px 24px rgb(245 200 133 / 90%));
}

.access-msg {
	height: auto;
	margin: 2em auto;
	width:auto;
}

a div.action-button:hover {
	/*padding: .75em 0; 
	background-color: rgb(255 255 255 / 10%);*/
	background-color: rgb(245 133 31 / 90%);
	/*color: rgb(245 133 31 / 100%);*/
	color: white;
	box-shadow: inset 0px 10px 15px 0px rgb(245 133 31 / 20%);
	border: 2px solid rgb(245 133 31 / 60%);
	border-radius:36px;
/*	letter-spacing: 0em;
	font-size: 20px;*/
	filter: drop-shadow(0px 18px 24px rgb(245 200 133 / 90%));
}

.card-disabled {
	border: 0;
	background-color: rgb(145 145 145 / 20%);
	filter: drop-shadow(0px 0px 24px rgb(24 13 0 / 50%));
}

.err-msg {
	background-color: rgb(188 29 29 / 90%);
/*	top: -40px;*/
}

a div.engine-card:hover, button:hover {
	padding: .75em 0; 
	background-color: rgb(255 255 255 / 10%);
	color: rgb(245 133 31 / 100%);
	box-shadow: inset 0px 10px 15px 0px rgb(245 133 31 / 20%);
	border: 2px solid rgb(245 133 31 / 60%);
	border-radius:36px;
	letter-spacing: 0em;
	font-size: 20px;
	filter: drop-shadow(0px 18px 24px rgb(245 200 133 / 90%));
}

a div.login-button:hover, button:hover {
	background-color: rgb(255 255 255 / 10%);
	color: rgb(66 100 125 / 100%);
	box-shadow: inset 0px 10px 15px 0px rgb(66 100 125 / 20%);
	border-color:  rgb(60 160 255 / 60%);
	filter: drop-shadow(0px 18px 24px rgb(66 100 125 / 90%));
	cursor: pointer;
}

button {
	width: 100%;
	height: 100%;
	display: block;
}



@keyframes blur {
  100% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
  0% {
    -webkit-filter: blur(64px);
    -moz-filter: blur(64px);
    -o-filter: blur(64px);
    -ms-filter: blur(64px);
  }
}

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

@keyframes letter-spacing {
	0% {letter-spacing: .55rem; /*width: 900px;*/}
	100% {letter-spacing: .33rem; /*width: 750px;*/}
}

@keyframes letter-spacing-fix {
	0% {margin-right: -.55rem; opacity: 0.2;}
	100% {margin-right: -.33rem; opacity: 1.0;}
}

@keyframes rotator {
	to { transform: rotate(-252deg); }	
}