/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin			: 0;
	padding			: 0;
	border			: 0;
	outline			: none;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.clearfix:before, .clearfix:after { content: " ";display: table;}
.clearfix:after { clear: both;}
.clearfix {*zoom: 1;}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

* {
	text-rendering				: optimizeLegibility;
	letter-spacing				: 0px;
	font-kerning				: normal;

	color						: rgba( 0, 0, 0, 1 );
	outline						: none;

	-webkit-user-select			: none;
	-moz-user-select			: none;
	user-select					: none;

	cursor						: default;

	-webkit-box-sizing			: border-box;
	-moz-box-sizing				: border-box;
	box-sizing					: border-box;

	font-family					: 'Open Sans', sans-serif;
	font-weight					: 400;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

body {
	position		: absolute;
	top				: 0;
	bottom			: 0;
	left			: 0;
	right			: 0;
	width			: 100%;
	height			: 100%;
	margin			: 0;
	padding			: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.bkg_img {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.ath_cap{
	position		: absolute;
	left			: 50%;
	top				: 50%;
	width			: 22em;
	height			: 3em;
	margin-left		: -25em; /* -11em; */
	margin-top		: -8em;
	text-align		: center;
	line-height		: 3em;
	border-top		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-left		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image	: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice: 1;
}

.ath_box {
	position		: absolute;
	left			: 50%;
	top				: 50%;
	width			: 22em;
	height			: 12em;
	margin-left		: -25em; /* -11em; */
	margin-top		: -5em;

	border-left		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-bottom	: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image	: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice: 1;
}

.ath_usr_wrp {
	position		: absolute;
	top				: 1em;
	left			: 1em;
	right			: 1em;
	height			: 1.5em;
	line-height		: 1.5em;
	font-size		: 100%;
/*
	border-bottom	: 1px solid rgba( 50, 50, 50, 0.5 );
*/
	/*
	background-image		: -webkit-gradient( linear, 0 0, 100% 0, from( rgba(250,250,250,0.5) ), to(rgba(250,250,250,0.0)) );
	background-image		: -webkit-linear-gradient(left, rgba(250,250,250,0.5) 0%, rgba(250,250,250,0.0));
	background-image		: -moz-linear-gradient(left, rgba(250,250,250,0.5), rgba(250,250,250,0.0));
	background-image		: -o-linear-gradient(left, rgba(250,250,250,0.5) 0%, rgba(250,250,250,0.0));
	*/
	border-bottom	: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image	: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice: 1;
}

.ath_pas_wrp {
	position		: absolute;
	top				: 3.5em;
	left			: 1em;
	right			: 1em;
	height			: 1.5em;
	line-height		: 1.5em;
	font-size		: 100%;
	border-bottom	: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image	: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 80% );
	border-image-slice: 1;
}

.ath_key_wrp {
	position		: absolute;
	top				: 6em;
	left			: 1em;
	right			: 1em;
	height			: 1.5em;
	line-height		: 1.5em;
	font-size		: 100%;
	border-bottom	: 1px solid rgba( 50, 50, 50, 0.25 );
	border-image	: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.0) 60% );
	border-image-slice: 1;
}

.ath_usr {
	position		: absolute;
	top				: 0.0em;
	left			: 0.0em;
	right			: 0.0em;
	height			: 100%;
	width			: 100%;
	font-size		: 100%;
	cursor			: text;
	border			: 0px solid rgba( 0, 0, 0, 0 );
	background      : rgba( 0, 0, 0, 0 );
}

.ath_key {
	position		: absolute;
	top				: 0.0em;
	left			: 0.0em;
	right			: 0.0em;
	height			: 100%;
	width			: 100%;
	font-size		: 100%;
	cursor			: text;
	border			: 0px solid rgba( 0, 0, 0, 0 );
	background      : rgba( 0, 0, 0, 0 );
}

.ath_key::placeholder {
  color					: rgba( 0,0,0,0.1 );
}

.ath_key::placeholder:hover {
  color					: rgba( 0,0,0,0.6 );
}

.ath_key {
	user-select			: none;
	pointer-events		: none; 
}

.ath_pas {
	position			: absolute;
	top					: 0.0em;
	left				: 0.0em;
	right				: 0.0em;
	height				: 100%;
	width				: 100%;
	font-size			: 100%;
	cursor				: text;
	border				: 0px solid rgba( 0, 0, 0, 0 );
	background			: rgba( 0, 0, 0, 0 );
}

.ath_sub {
	position			: absolute;
	top					: 9em;
	left				: 1em;
	right				: 1.0em;
	height				: 3.0em;
	line-height			: 3.0em;
	font-size			: 100%;
	text-align			: center;
	cursor				: pointer;
	color				: rgba( 50, 50, 50, 0.75 );
	border-top			: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.5) 100% );
	border-image-slice	: 1;
}

.ath_sub:hover {
	color				: rgba( 0, 0, 0, 1 );
	border-top			: 1px solid rgba( 50, 50, 50, 0.6 );
	border-image		: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 100% );
	border-image-slice	: 1;
	background			: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.rth_cap {
	position			: absolute;
	left				: 50%;
	top					: 50%;
	width				: 22em;
	height				: 3em;
	margin-left			: 3em;
	margin-top			: -8em;
	text-align			: center;
	line-height			: 3em;
	border-top			: 1px solid rgba( 50, 50, 50, 0.5 );
	border-right		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice	: 1;
}

.rth_box {
	position			: absolute;
	left				: 50%;
	top					: 50%;
	width				: 22em;
	height				: 12em;
	margin-left			: 3em;
	margin-top			: -5em;
	border-right		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-bottom		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient(-90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice	: 1;
}

.rth_usr_wrp {
	position			: absolute;
	top					: 1em;
	left				: 1em;
	right				: 1em;
	height				: 1.5em;
	line-height			: 1.5em;
	font-size			: 100%;
	border-bottom		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient( -90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice	: 1;
}

.rth_pas_wrp {
	position			: absolute;
	top					: 3.5em;
	left				: 1em;
	right				: 1em;
	height				: 1.5em;
	line-height			: 1.5em;
	font-size			: 100%;
	border-bottom		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient( -90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 80% );
	border-image-slice	: 1;
}

.rth_key_wrp {
	position			: absolute;
	top					: 6.0em;
	left				: 1em;
	right				: 1em;
	height				: 1.5em;
	line-height			: 1.5em;
	font-size			: 100%;
	border-bottom		: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient( -90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 60% );
	border-image-slice	: 1;
}

.rth_usr {
	position			: absolute;
	top					: 0.0em;
	left				: 0.0em;
	right				: 0.0em;
	height				: 100%;
	width				: 100%;
	font-size			: 100%;
	cursor				: text;
	border				: 0px solid rgba( 0, 0, 0, 0 );
	background			: rgba( 0, 0, 0, 0 );
}

.rth_key {
	position			: absolute;
	top					: 0.0em;
	left				: 0.0em;
	right				: 0.0em;
	height				: 100%;
	width				: 100%;
	font-size			: 100%;
	cursor				: text;
	border				: 0px solid rgba( 0, 0, 0, 0 );
	background			: rgba( 0, 0, 0, 0 );
}

.rth_pas {
	position			: absolute;
	top					: 0.0em;
	left				: 0.0em;
	right				: 0.0em;
	height				: 100%;
	width				: 100%;
	font-size			: 100%;
	cursor				: text;
	border				: 0px solid rgba( 0, 0, 0, 0 );
	background			: rgba( 0, 0, 0, 0 );
}

.rth_sub {
	position			: absolute;
	top					: 9em;
	left				: 1em;
	right				: 1.0em;
	height				: 3.0em;
	line-height			: 3.0em;
	font-size			: 100%;
	text-align			: center;
	cursor				: pointer;
	color				: rgba( 50, 50, 50, 0.75 );
	border-top			: 1px solid rgba( 50, 50, 50, 0.5 );
	border-image		: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0) 100% );
	border-image-slice	: 1;
}

.rth_sub:hover {
	color				: rgba( 0, 0, 0, 1 );
	border-top			: 1px solid rgba( 50, 50, 50, 0.6 );
	border-image		: linear-gradient(-90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 100% );
	border-image-slice	: 1;
	background			: linear-gradient(90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.0) 100%);
}

::-moz-selection { /* Code for Firefox */
	color				: rgba( 0, 0, 0, 1);
	background			: rgba( 50, 50, 50, 0.25);
}

::selection {
	color				: rgba( 0, 0, 0, 1);
	background			: rgba( 50, 50, 50, 0.25);
}

input::-webkit-input-placeholder       { color: rgba( 50, 50, 50, 0.25); }
input:hover::-webkit-input-placeholder { color: rgba( 50, 50, 50, 0.5); }
input:-moz-placeholder                 { color: rgba( 50, 50, 50, 0.25); }
input:hover:-moz-placeholder           { color: rgba( 50, 50, 50, 0.5); }
input::-moz-placeholder                { color: rgba( 50, 50, 50, 0.25); }
input:hover::-moz-placeholder          { color: rgba( 50, 50, 50, 0.5); }

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.sk-cube-grid {
	position			: absolute;
	top					: 50%;
	left				: 50%;
	width				: 42px;
	height				: 42px;
	margin-top			: -21px;
	margin-left			: -21px;
}

.sk-cube-grid .sk-cube {
	background-color	: rgba( 25, 25, 25, 0.75 );
	width				: 12px;
	height				: 12px;
	margin				: 1px;
	float				: left;
	-webkit-animation	: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	animation			: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0.0s; animation-delay: 0.0s; }
.sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1); 
		transform: scale3D(1, 1, 1); 
	} 35% {
		-webkit-transform: scale3D(0, 0, 1); 
		transform: scale3D(0, 0, 1); 
	}
}

@keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1); 
		transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1); 
		transform: scale3D(0, 0, 1); 
	}
}