:root {
	--red-color: #bf6385;/*191, 99, 133;*/ /*#bf6385;*/
	--blue-color: #57568c;/*87, 86, 140;*//*#57568c;*/
	--dark-color: #233a59;/*35, 58, 89;*//*#233a59;*/
	--yellow-color: #f2c1ae;/*242, 193, 174;*//*#f2c1ae;*/
	--orange-color: #d99191;/*217, 145, 145;*//*#d99191;*/
}

html, body{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	font-size: 0;
}

@font-face {
  font-family: 'pass';
  font-style: normal;
  font-weight: 400;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATsAA8AAAAAB2QAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAcg9+z70dERUYAAAF0AAAAHAAAAB4AJwANT1MvMgAAAZAAAAA/AAAAYH7AkBhjbWFwAAAB0AAAAFkAAAFqZowMx2N2dCAAAAIsAAAABAAAAAQAIgKIZ2FzcAAAAjAAAAAIAAAACAAAABBnbHlmAAACOAAAALkAAAE0MwNYJ2hlYWQAAAL0AAAAMAAAADYPA2KgaGhlYQAAAyQAAAAeAAAAJAU+ATJobXR4AAADRAAAABwAAAAcCPoA6mxvY2EAAANgAAAAEAAAABAA5gFMbWF4cAAAA3AAAAAaAAAAIAAKAE9uYW1lAAADjAAAARYAAAIgB4hZ03Bvc3QAAASkAAAAPgAAAE5Ojr8ld2ViZgAABOQAAAAGAAAABuK7WtIAAAABAAAAANXulPUAAAAA1viLwQAAAADW+JM4eNpjYGRgYOABYjEgZmJgBEI2IGYB8xgAA+AANXjaY2BifMg4gYGVgYVBAwOeYEAFjMgcp8yiFAYHBl7VP8wx/94wpDDHMIoo2DP8B8kx2TLHACkFBkYA8/IL3QB42mNgYGBmgGAZBkYGEEgB8hjBfBYGDyDNx8DBwMTABmTxMigoKKmeV/3z/z9YJTKf8f/X/4/vP7pldosLag4SYATqhgkyMgEJJnQFECcMOGChndEAfOwRuAAAAAAiAogAAQAB//8AD3jaY2BiUGJgYDRiWsXAzMDOoLeRkUHfZhM7C8Nbo41srHdsNjEzAZkMG5lBwqwg4U3sbIx/bDYxgsSNBRUF1Y0FlZUYBd6dOcO06m+YElMa0DiGJIZUxjuM9xjkGRhU2djZlJXU1UDQ1MTcDASNjcTFQFBUBGjYEkkVMJCU4gcCKRTeHCk+fn4+KSllsJiUJEhMUgrMUQbZk8bgz/iA8SRR9qzAY087FjEYD2QPDDAzMFgyAwC39TCRAAAAeNpjYGRgYADid/fqneL5bb4yyLMwgMC1H90HIfRkCxDN+IBpFZDiYGAC8QBbSwuceNpjYGRgYI7594aBgcmOAQgYHzAwMqACdgBbWQN0AAABdgAiAAAAAAAAAAABFAAAAj4AYgI+AGYB9AAAAAAAKgAqACoAKgBeAJIAmnjaY2BkYGBgZ1BgYGIAAUYGBNADEQAFQQBaAAB42o2PwUrDQBCGvzVV9GAQDx485exBY1CU3PQgVgIFI9prlVqDwcZNC/oSPoKP4HNUfQLfxYN/NytCe5GwO9/88+/MBAh5I8C0VoAtnYYNa8oaXpAn9RxIP/XcIqLreZENnjwvyfPieVVdXj2H7DHxPJH/2/M7sVn3/MGyOfb8SWjOGv4K2DRdctpkmtqhos+D6ISh4kiUUXDj1Fr3Bc/Oc0vPqec6A8aUyu1cdTaPZvyXyqz6Fm5axC7bxHOv/r/dnbSRXCk7+mpVrOqVtFqdp3NKxaHUgeod9cm40rtrzfrt2OyQa8fppCO9tk7d1x0rpiQcuDuRkjjtkHt16ctbuf/radZY52/PnEcphXpZOcofiEZNcQAAeNpjYGIAg///GBgZsAF2BgZGJkZmBmaGdkYWRla29JzKggxD9tK8TAMDAxc2D0MLU2NjENfI1M0ZACUXCrsAAAABWtLiugAA) format('woff');
}

body{
	background-color: #ddeeee;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

main{
	display: block;
	position: relative;
	width: 560px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	padding: 50px 60px;
	box-sizing: border-box;
}

main .login-background{
	display: block;
	position: absolute;
	width: calc(100% + 150px);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

main > .login {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
}

main > .login > h1{
	font-family: Poppins;
	font-size: 32px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	margin-bottom: 6px;
	z-index: 2;
}

main > .login > p{
	font-family: Poppins;
	font-size: 14px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	line-height: 2;
	margin-bottom: 40px;
}

main > .login > h1, main > .login > p{
	color: #FFFFFF;
	opacity: 85%;
	text-align: center;
}

main > .login > form{
	display: inline-block;
	position: relative;
	vertical-align: top;
	left: 50%;
	transform: translateX(-50%);
}

main > .login > form > .input{
	display: inline-block;
	position: relative;
	height: 56px;
	max-height: 56px;
	width: 140px;
	vertical-align: top;
	margin-right: 6px;
	box-sizing: border-box;
}

main > .login > form > .input > input{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	border-radius: 30px;
	padding: 12px 26px 9px 26px;
	border: 1px solid var(--red-color);
	background-color: rgba(255, 255, 255, 65%);

	font-family: Poppins;
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	color: var(--blue-color);

	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif;
}

main > .login > form > .input > input:focus-visible{
	border: 2px solid var(--red-color);
	outline: none;
	background-color: rgba(255, 255, 255, 100%);
}

main > .login > form > .input > .placeholder{
	display: inline-block;
	position: absolute;
	width: 100%;
	height: auto;
	font-family: Poppins;
	font-size: 21px;
	font-weight: 200;
	text-align: center;
	line-height: 56px;
	opacity: 40%;
	color: var(--red-color);
	user-select: none;
	pointer-events: none;
}

main > .login > form > .input > .placeholder.hidden{
	display: none;
}

main > .login > form > button{
    display: inline-block;
    position: relative;
	font-family: Poppins;
	color: #fff;
    background: var(--orange-color);
    border-radius: 32px;
    font-size: 15px;
    padding: 13px 32px 13px;
    text-align: center;
    font-weight: bold;
    -webkit-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
    cursor: pointer;
    border: none;
    height: 56px;
    max-height: 56px;
    vertical-align: top;
}

main > .login > form > button:focus-visible{
    outline: none;
    border: none;
    background: var(--red-color);
}

main > .login > form > button:hover{
    background: var(--red-color);
}

body > footer{
	display: block;
	position: fixed;
	width: 100%;
	height: 20px;
	font-size: 12px;
    font-family: Poppins;
    line-height: 20px;
    font-weight: 800;
    color: rgba(35,58,89,25%);
    bottom: 0;
}

body > footer .footer-left{
	display: block;
	position: absolute;
	left: 0;
	padding-left: 7px;	
}

body > footer .footer-right{
	display: block;
	position: absolute;
	right: 0;
	padding-right: 7px;
}

body > footer .footer-right a{
	display: inline-block;
	position: relative;
	text-decoration: none;
	margin-left: 10px;
	color: rgba(35,58,89,25%);
}

#legalnotice{
	padding: 100px 35%;
	box-sizing: border-box;
	overflow-y: auto;
	position: static;
	height: auto;
}

#legalnotice h2{
	font-family: Poppins;
	font-size: 32px;
	color: var(--red-color);
	margin-top: 60px;
}

#legalnotice h3{
	font-family: Poppins;
	font-size: 21px;
	color: var(--red-color);
}

#legalnotice p{
	font-family: Poppins;
	font-size: 16px;
	color: var(--dark-color);
}

#legalnotice ul{
	font-family: Poppins;
	font-size: 16px;
	color: var(--dark-color);
}

#legalnotice a{
	color: var(--dark-color);
	text-decoration: none;
}

#legalnotice footer{
	position: fixed;
	left: 0;
}

@media screen and (min-width: 800px) and (max-width: 1200px){
	#legalnotice{
		padding: 100px 20%;
	}
}

@media screen and (min-width: 650px) and (max-width: 800px){
	body > main{
		width: 480px;
	}

	#legalnotice{
		padding: 100px 30px;
	}
}

@media screen and (min-width: 550px) and (max-width: 650px){
	body > main{
		width: 100%;
		padding: 25px 30px;
	}

	body > main > .login-background{
		width: calc(100% + 250px);
	}

	body > main > .login > form > .input{
		height: 42px;
		max-height: 42px;
		width: 120px;
	}

	body > main > .login > form > .input > input{
		font-size: 18px;
	}

	body > main > .login > form > .input > .placeholder{
		line-height: 42px;
	}

	body > main > .login > form > button{
		height: 42px;
		max-height: 42px;
		padding: 8px 32px;
	}

	#legalnotice{
		padding: 100px 30px;
	}

	body > footer .footer-left{
		padding-left: 16px;	
	}

	body > footer .footer-right{
		padding-right: 16px;
	}

	body > footer{
		font-size: 11px;
	}
}

@media screen and (min-width: 350px) and (max-width: 550px){
	body > main{
		width: 100%;
		padding: 25px 30px;
	}

	body > main > .login-background{
		width: calc(100% + 250px);
	}

	body > main > .login > h1{
		font-size: 24px;
	}

	body > main > .login > p{
		font-size: 12px;
	}

	body > main > .login > form > .input{
		height: 42px;
		max-height: 42px;
		width: 120px;
	}

	body > main > .login > form > .input > input{
		font-size: 18px;
	}

	body > main > .login > form > .input > .placeholder{
		line-height: 42px;
	}

	body > main > .login > form > button{
		height: 42px;
		max-height: 42px;
		padding: 8px 32px;
	}

	#legalnotice{
		padding: 100px 30px;
	}

	body > footer .footer-left{
		padding-left: 16px;	
	}

	body > footer .footer-right{
		padding-right: 16px;
	}

	body > footer{
		font-size: 11px;
	}
}

@media screen and (max-width: 350px){
	body > main{
		width: 100%;
		padding: 5px 10px;
	}

	body > main > .login-background{
		width: calc(100% + 400px);
	}

	body > main > .login > h1{
		font-size: 24px;
	}

	body > main > .login > p{
		font-size: 12px;
	}

	body > main > .login > form > .input{
		height: 42px;
		max-height: 42px;
		width: 120px;
		display: block;
		width: 100%;
		margin-bottom: 6px;
	}

	body > main > .login > form > .input > input{
		font-size: 18px;
	}

	body > main > .login > form > .input > .placeholder{
		line-height: 42px;
	}

	body > main > .login > form > button{
		height: 42px;
		max-height: 42px;
		padding: 8px 32px;
		display: block;
		width: 100%;
	}

	body > footer{
		display: block;
		position: fixed;
		width: 100%;
		height: auto;
		font-size: 12px;
	    font-family: Poppins;
	    line-height: 20px;
	    font-weight: 800;
	    color: rgba(35,58,89,50%);
	    bottom: 0;
	    opacity: 50%;
	}

	body > footer .footer-left{
		display: block;
		position: relative;
		left: 0;
		padding-left: 7px;
		text-align: center;
	}

	body > footer .footer-right{
		display: block;
		position: relative;
		text-align: center;
		padding-right: 7px;
	}

	body > footer .footer-right a{
		display: inline;
		position: relative;
		text-decoration: none;
		margin-left: 10px;
		color: rgba(35,58,89,50%);
	}

	#legalnotice{
		padding: 100px 30px;
	}

	body > footer .footer-left{
		padding-left: 16px;	
	}

	body > footer .footer-right{
		padding-right: 16px;
	}

	body > footer{
		font-size: 11px;
	}
}