:root
{
    --pointmap-color:  				hsla(200, 100%, 40%, 1);
    --pointmap-color-hover:  		hsla(200, 100%, 34%, 1);
    --pointmap-color-active:  		hsla(200, 100%, 22%, 1);

    --text-color:                   #FFF;
}


html
{
	width:		100%;
	height:		100%;
	margin:		0px;
	border:		0px;
	font-family: Arial,sans-serive;
}

body
{
	width:			100%;
	height:			100%;
	margin:			0px;
	border:			0px;
	color:			var(--pointmap-color);
	background:		linear-gradient(var(--pointmap-color), #FFF);
}

h1
{
	color:			var(--pointmap-color);
	font-family: 	'nasalization';
	font-size: 		300%;
	margin: 		10px 0px 0px 0px;
}


a
{
	color:				var(--pointmap-color);
	text-decoration: 	none;
	margin-top:			5px;
	display: 			inline-block;
}
a.login
{
	margin-top:			0px;
	text-decoration: 	underline;
	font-size: 			120%;
}


p
{
	margin:			20px 50px 10px 50px;
}


.logo
{
	position: 	absolute;
    left:		calc(50vw - 200px);
    top:		calc(20vh);
	width:		460px;
}
img#logo_icon
{
	height:			80px;
	margin-right:	10px;
}
img#logo_text
{
	height:		80px;
}
img#flag
{
	height:		40px;
	margin:		0px 0px 38px 5px;
}

.login-box
{
    position: 	absolute;
    left:		calc(50vw - 200px);
    top:		calc(45vh);
    width:		400px;
    height:		160px;
    transition: opacity 0.5s;
}

.login-box
{
	position: 			relative;
	height:				180px;
	padding-top: 		20px;
	background:			rgba(255,255,255,0.5);
	border-radius: 		12px;
	box-shadow: 		10px 10px 15px rgba(0,0,0,0.1);
	text-align: 		center;
	z-index:			100;
	user-select: 		none;
	-webkit-user-select: none;
}

.login-box:afterx
{
	content: 			'';
	position: 			absolute;
	bottom: 			0;
	left: 				50%;
	width: 				0;
	height: 			0;
	border: 			30px solid transparent;
	border-top-color:	rgba(255,255,255,0.5);
	border-bottom: 		0;
	margin-left: 		-30px;
	margin-bottom: 		-30px;
}

.login-box.reset
{
	height:				210px;
}

input
{
	position: 		relative;
	height:			30px;
	width:			calc(300px - 20px);
	font-size: 		100%;
	margin:			10px 50px 0px 50px;
	padding:		0px 10px 0px 10px;
	background:		rgba(255,255,255,0.8);
	border:			0px;
	border-radius:	8px;
}

input:focus
{
	outline: none;
  	box-shadow: 0 0 0 3px orange;
}

button
{
	position: 		relative;
	height:			34px;
	width:			300px;
	font-size: 		120%;
	color:			#FFF;
	margin:			20px 50px 0px 50px;
	background:		var(--pointmap-color);
	border:			0px;
	border-radius:	8px;
}
button:hover
{
	background:		var(--pointmap-color-hover);
}
button:active
{
	background:		var(--pointmap-color-active);
}





/*  === fonts ====================================================== */
/*  ================================================================ */

/*  Nasalization =========== */

@font-face {
  font-family: 'nasalization';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/nasalization.eot");
  src: url("fonts/nasalization.eot?#iefix") format("embedded-opentype"),
       url("fonts/nasalization.woff") format("woff"); 
}


/*  sourcesanspro ======== */

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('fonts/sourcesanspro.eot');
    src: url('fonts/sourcesanspro.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-bold';
    src: url('fonts/sourcesanspro-bold.eot');
    src: url('fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-light';
    src: url('fonts/sourcesanspro-light.eot');
    src: url('fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-thin';
    src: url('fonts/sourcesanspro-extralight.eot');
    src: url('fonts/sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}