@charset "utf-8";

/* CSS Document */

html, body { max-width:100%; position: relative; box-sizing: border-box; }
html { min-width:100%; display: inline-block; min-height: 100vh; background-color: rgba(23,57,98,1.00); }
body { display: flex; flex-wrap: wrap; justify-content: space-around; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16h6.5c1.38 0 2.5-1.12 2.5-2.5S16.88 11 15.5 11h-.05c-.24-1.69-1.69-3-3.45-3-1.4 0-2.6.83-3.16 2.02h-.16C7.17 10.18 6 11.45 6 13c0 1.66 1.34 3 3 3zM21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center 12px; background-size:64px; min-height:200px; padding: 100px 48px 80px 48px;  }
html { font-size: 0.875em; font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; line-height: 1.33; font-weight: normal; }

form { display:inline-block; position: relative; box-sizing: border-box; text-align: center; background-color: #fff; background-repeat: no-repeat; }


form.login { width:320px; padding:24px 36px 12px 36px; -webkit-box-shadow: 0 1px 45px 0 rgba(0,0,0,0.33); box-shadow: 0 1px 45px 0 rgba(0,0,0,0.33); 	border-radius:4px; margin-bottom: 24px; }

form.logout { padding:0px 0px 0px 0px; -webkit-box-shadow: 0 1px 45px 0 rgba(0,0,0,0.1); box-shadow: 0 1px 45px 0 rgba(0,0,0,0.1); position: fixed; top:12px; right:12px; }



input, button { -webkit-appearance: none; display:inline-block; position: relative; box-sizing: border-box; width:100%; padding:14px 0px; background-color:transparent; margin:12px auto; outline:none; border:none; font-size:1.5rem; background-position: 0.5rem 77%;  background-size: 1.67rem; background-repeat: no-repeat; -webkit-transition: all 80ms ease-in-out; -moz-transition: all 80ms ease-in-out; -ms-transition: all 80ms ease-in-out; -o-transition: all 80ms ease-in-out; transition: all 80ms ease-in-out; }
button 	{ font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; border-radius:3px; width:100%; text-align: center; color:#fff; padding:12px 0px 12px 0px; cursor: pointer; margin-top: 32px; -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.4); box-shadow: 0 1px 5px 0 rgba(0,0,0,0.4); 
background: -moz-linear-gradient(-45deg,  #6bba70 0%, #6bba70 100%); 
background: -webkit-linear-gradient(-45deg,  #6bba70 0%,#6bba70 100%); 
background: linear-gradient(135deg,  #6bba70 0%,#6bba70 100%); opacity:0.8; overflow: hidden;
 } button:hover 	{ opacity:1;
 } button:active { width:98%; opacity:0.5; }
input 				{ border-bottom:2px solid #cdcdcd; text-align: center; padding:15px 0px 3px 0px; color:#787878; font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; }
input.error 	{ border-bottom:2px solid #FFA0A2; 	}
input.ok 			{ border-bottom:2px solid #418434;  }

input:focus 	{ color:#111; border-bottom:2px solid rgba(17,138,175,0.60); }



form.login input:nth-child(1) { opacity: 0.01; }

form.login input:nth-child(2) { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gainsboro' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2c-4.97 0-9 4.03-9 9 0 4.17 2.84 7.67 6.69 8.69L12 22l2.31-2.31C18.16 18.67 21 15.17 21 11c0-4.97-4.03-9-9-9zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.3c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}
form.login input:nth-child(2).error { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2c-4.97 0-9 4.03-9 9 0 4.17 2.84 7.67 6.69 8.69L12 22l2.31-2.31C18.16 18.67 21 15.17 21 11c0-4.97-4.03-9-9-9zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.3c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}
form.login input:nth-child(2).ok { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='green' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2c-4.97 0-9 4.03-9 9 0 4.17 2.84 7.67 6.69 8.69L12 22l2.31-2.31C18.16 18.67 21 15.17 21 11c0-4.97-4.03-9-9-9zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.3c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

form.login input:nth-child(3) { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gainsboro' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
}

form.login input:nth-child(3).error { 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
}


form.login button:after { 
	-webkit-transition: all 80ms ease-in-out; -moz-transition: all 80ms ease-in-out; -ms-transition: all 80ms ease-in-out; -o-transition: all 80ms ease-in-out; transition: all 80ms ease-in-out;
	display: block; position: absolute; left:0px; top:0px; height:3.85rem; width:3rem; background-size: 55%; background-repeat: no-repeat; background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' viewBox='0 0 24 24' fill='white' width='18px' height='18px'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z'/%3E%3C/g%3E%3C/svg%3E"); 
	content:''; background-color: rgba(0,0,0,0.20);

} 

form.login button	{ padding-left: 2.4rem; }

form.logout, form.logout button { border-radius: 3px; padding:0px 0px 0px 0px; width:32px; height:32px;  background-color:white; }

form.logout button { letter-spacing: 0px; font-size:0px;  line-height: 1; cursor: pointer; margin-top: 0px; margin-bottom: 0px; -webkit-box-shadow: none; box-shadow: none; background-size: 26px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); }

form.logout button:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red' width='18px' height='18px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");  }

button:focus {outline:none;}
button::-moz-focus-inner {border:0;}


body > p { font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; color:#fff; font-weight:normal; display: inline-block; text-align: center; width:100%; flex:1; min-width: 100%; line-height: 1.75; font-size:1.2rem; }
body > p.info { font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";  font-size:1.33rem; color:#111; }

body > a { 
	
	font-family: 					"DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; 
	font-weight: 					bold; 
	display:  						inline-block; 
	position: 						relative;
	text-align: 					center; 
	box-sizing: 					border-box; 
	flex: 								1; 
	min-width: 						300px; 
	max-width: 						600px; 
	text-decoration:  		none; 
	cursor: 							pointer; 
	margin: 							30px; 
	padding: 							200px 24px 24px 24px;
	background-repeat: 		no-repeat; 
	background-color: 		#fff; 
	background-size: 			70%; 
	background-position: 	center 40%; 
	-webkit-box-shadow:  	0 1px 15px 0 rgba(0,0,0,0.3);
	box-shadow: 				 	0 1px 15px 0 rgba(0,0,0,0.3); 
	border-radius: 			 	12px; 
	-webkit-transition:  	all 80ms ease-in-out; 
	-moz-transition: 		 	all 80ms ease-in-out; 
	-ms-transition: 		 	all 80ms ease-in-out; 
	-o-transition: 			 	all 80ms ease-in-out; 
	transition: 				 	all 80ms ease-in-out; 
	text-transform: 		 	uppercase; 
	font-size: 					 	15px; 
	color:							 	#4D4D4D;
	overflow: 					 	hidden;

} 

body > a:after { 
	
	display: 	block; 
	content:	''; 
	position: absolute; 
	top:			0px; 
	left:			0px; 
	width:		100%; 
	height: 	100%; 

	background: -moz-linear-gradient(top,  		rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom,  	rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);

}

body > a:hover { background-size: 65%; background-color: rgba(229,242,253,1.00); letter-spacing: 0px; font-size:14px;  }

form.login  p { text-align: left; display: inline-block; font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-weight:normal; font-size:0.85rem; box-sizing: border-box; padding:12px 3px; width:100%; position: relative; color:#939393; }
form.login  p > b { color:red; font-size:1.2rem; }

b.process { font-family: "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"; font-weight:normal; color:#fff; font-size:1.33rem; }

body:before { display:block; content:''; position: fixed; width:100%; height:100vh; top:0px; left:0px; margin:0px 0px;

	background-repeat: no-repeat;
	
	pointer-events: none;
	background-position: bottom;
	
	
	 	background-size: 128%; opacity:0.85;
  	animation-name: bgzoom;
  	animation-duration: 20s;
		animation-timing-function: ease-in-out;
	
	
}





@keyframes bgzoom {
	
	0% 			{ background-size: 100%; opacity:0.25; }
	100% 		{ background-size: 128%; opacity:0.85; }
	
}



@keyframes sunrise {
	
	from 	{ opacity:0.5; }
	to 		{ opacity:0;	}
	
}






html:before { display:block; position: fixed; width:100%; height:100vh; margin:0px 0px;  top:0px; left:0px; content:''; opacity:0; pointer-events: none;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7c820+0,ffffff+100&1+0,0+100 */
	background: -moz-linear-gradient(45deg,  rgba(247,200,32,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  rgba(247,200,32,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  rgba(247,200,32,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7c820', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  animation-name: sunrise;
  animation-duration: 35s;
	animation-timing-function: ease-in-out;
	

}







html { 

background: -moz-linear-gradient(-45deg,  #ddf4ff 5%, #14407a 100%); 
background: -webkit-linear-gradient(-45deg,  #ddf4ff 5%,#14407a 100%); 
background: linear-gradient(135deg,  #ddf4ff 5%,#14407a 100%); 

}