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

html { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; }
body { background-image: url("png/login-logo.png"); background-position: center 36px; background-repeat: no-repeat; background-size: 200px; }


	form.login { display:block; width:300px; box-sizing: border-box; position: relative; padding:128px 16px 30px 16px; margin:168px auto 24px auto; float:none; background: rgba(255,255,255,1.00); text-align: center; -webkit-box-shadow: 1px 1px 18px 0 rgba(0,0,0,0.2); box-shadow: 1px 1px 18px 0 rgba(0,0,0,0.2);
	background-image: url("svg/lock-icon.svg"); background-position: center 18px; background-size: 90px; background-repeat: no-repeat; border-radius: 5px; 	}	

	form.login > input, form.login > button { display:block; position: relative; width:100%; text-align: center; margin:4px 0px; padding:10px; box-sizing: border-box; background: rgba(245,245,245,1.00); color:rgba(70,70,70,1.00); outline: none; border:0px; font-size:1.25rem; font-weight: 100 !important; font-family: inherit !important; }

	form.login > input:not([type="submit"]) 		{ border-bottom: 1px solid rgba(62,62,62,0.20); }
	form.login > input:not([type="submit"]):focus 	{ border-bottom: 1px solid rgba(62,62,62,0.50); }
	form.login > input:not([type="submit"]):hover 	{ border-bottom: 1px solid rgba(62,62,62,0.50); background: rgba(187,236,196,1.00); }

	form.login > input:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }

	form.login > button[type="submit"],
	form.login > input[type="submit"] 				{ background-color: rgba(13,69,135,1.00); color:#fff; opacity:0.5; margin-top: 12px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; text-transform: uppercase; background-image:url("svg/unlock-icon.svg"); background-size: 24px; background-repeat: no-repeat; background-position: -32px center; -webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	-webkit-appearance: none;
   	-moz-appearance: none;
   	appearance: none;  }
	
	form.login > button[type="submit"]:hover,
	form.login > input[type="submit"]:hover { background-color: rgba(32,136,70,0.90); opacity:1; cursor:pointer; background-position: 20px center;  color:rgba(255,255,255,0.70) }
	
	form.login > button[type="submit"]:focus,
	form.login > input[type="submit"]:focus { background-color: rgba(32,136,70,1.00); opacity:1; cursor:pointer; background-position: 230px center; color:rgba(255,255,255,0.70) }

	form.login > button[type="submit"]:active,
	form.login > input[type="submit"]:active { background-color: rgba(48,48,48,1.00);  opacity:0.8; background-position: 340px center; color:rgba(255,255,255,0.40) }



div.infotext { display:block; position: absolute; width:40%; height:auto; margin:25vh 30% 20px 30%; box-sizing: border-box; padding:40px 58px 48px 58px; font-weight:200; background: rgba(254,254,254,1.00); text-align: left; font-size:1.33rem; color: #333; -webkit-box-shadow: 4px 4px 32px 0 rgba(0,0,0,0.5); box-shadow: 4px 4px 32px 0 rgba(0,0,0,0.5); z-index:3; border-radius: 8px; }
div.popgb { display:block; z-index: 2; top:0px; left:0px; width:100%; height:100vh; position: fixed; background:rgba(0,0,0,0.80) }
div.close { display:block; position: absolute; top:10px; right:10px; text-align: center; box-sizing: border-box; padding:4px 13px 6px 12px; border-radius: 3px; color:#fff; background: rgba(73,73,73,1.00); cursor: pointer; font-weight: 100; opacity:0.8; }
div.close:hover { opacity:1; }




	a.INIT { display:block; position: absolute; bottom:80px; left:calc(50% - 145px); font-weight:200; box-sizing: border-box; margin:12px auto 48px auto; padding:20px 60px; text-decoration: none; color:rgba(85,224,157,1.00); border: 1px solid rgba(85,224,157,1.00); width:290px; text-align: center; border-radius:32px; }
	a.INIT:hover { border-color: rgba(211,0,118,1.00); color: rgba(211,0,118,1.00); }










	div.pinpad { 
		
		display: block; 
		position: relative; 
		margin:12px auto 24px auto; 
		box-sizing: border-box; 
		opacity:0.5; 
		border-radius:11px;
		
		width:300px; 
		height:100px; 
		padding:12px 11px 9px 11px; 
	
		background: rgb(238,238,238);
		background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
		background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
		background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
		
		-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.33);
		box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.33);
		
		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
		-ms-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;

	}

div.pinpad:before {
	
		display:		block;
		position:		absolute;
		width:			100%;
		height:			80px;
		top:			10px;
		left:			0px;
		content:		'KEYPAD';
		text-align: 	center;
		padding-top: 	52px;
		box-sizing: 	border-box;
	
		background-image: 		url("svg/vpn_key-24px.svg"); 
		background-position: 	center top; 
		background-repeat: 		no-repeat; 
		background-size:		50px; 
	
}


	
	div.pinpad div.keyinp { 
		
				display:  				none; 
				position: 				relative; 
				text-align: 			center; 
				font-size: 				2rem; 
				margin: 				1% 1%; 
				width: 					23%; 
				height: 				20px; 
				padding: 				24px 8px 0px 8px; 
				box-sizing: 			border-box; 

				-webkit-box-shadow: 	1px 1px 4px 0 rgba(0,0,0,0.7); 
				box-shadow: 			1px 1px 4px 0 rgba(0,0,0,0.7); 
		
background: rgb(79,133,187); 
background: -moz-linear-gradient(top,  rgba(79,133,187,1) 0%, rgba(79,133,187,1) 100%);
background: -webkit-linear-gradient(top,  rgba(79,133,187,1) 0%,rgba(79,133,187,1) 100%); 
background: linear-gradient(to bottom,  rgba(79,133,187,1) 0%,rgba(79,133,187,1) 100%);

				color: 					#fff;
				line-height: 			2.5rem; 
		
		

		-webkit-transition: all 300ms ease-in-out;
		-moz-transition: all 300ms ease-in-out;
		-ms-transition: all 300ms ease-in-out;
		-o-transition: all 300ms ease-in-out;
		transition: all 300ms ease-in-out;		
		
		

	}

	div.pinpad div.keyinp { border-radius: 7px; }


	
	div.pinpad div.keyinp:hover 	{ 

				cursor: 		pointer ;
				background: 	rgb(96,108,136); 
				background: 	-moz-linear-gradient(top,  rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); 
				background: 	-webkit-linear-gradient(top,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); 
				background: 	linear-gradient(to bottom,  rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); 

	}
	
	div.pinpad.active { 
		
			opacity:			0.9; 
			
			margin:				-12px auto 24px auto; 
			width:				300px; 
			height:				300px; 
			padding:			12px 11px 9px 11px; 

	}


div.pinpad.active:before 		{ display:none; }
div.pinpad.active div.keyinp 	{ display:inline-block; height: 31%;  }