html, body {
	width:100%;
	height:100%;
}

body {
	padding:0;
	margin:0;
	font-family:Arial, Helvetica;
	color:#ffffff;
	background-image:url(/images/background-768.jpg);
	background-size:cover;
	background-position: center;
}

a {
	color:#2a63a3;
	text-decoration:none;
}

a:hover,
a:focus
{
	text-decoration:underline;
}

div.welcome {
	width:calc(100% - 40px);
	border-radius:10px;
	padding:10px;
	position:absolute;
	right:10px;
	bottom:30px;
	color:#ffffff;
}

div.welcome.black {
	background-color:rgba(255,255,255,0.4);
	color:#000000;
}

div.welcome h1 {
	margin-top:30px;
	font-weight:lighter;
	font-size:24px;
	color:#ffffff;
	padding: 0 10px;
	margin:0px;
}

div.welcome.black h1 {
	color:#000000;
}

p {
	margin-top:1em;
	font-size:1em;
	padding: 0 10px;
}


div#loginform,
div#contactform 
{
	width:calc(100% - 40px);
	border-radius:10px;
	padding:10px;
	position:absolute;
	left:10px;
	top:50%;
	margin-top:0%;
	color:#ffffff;
	background-color:rgba(255,255,255,0.4);
	color:#000000;
	transform: translate(0, -50%);
}
div#contactform label{
	display:block;
}

div#loginform div.row#login input,
div#loginform div.row#password input,
div#contactform div.row#name input,
div#contactform div.row#email input,
div#contactform div.row#text textarea
{
	display:block;
	border:none;
	width:calc(100% - 12px);
	margin:0.5em 0;
	padding:5px;
	font-family:Arial,Helvetica;
}

div#loginform div.row.error#login input,
div#loginform div.row.error#password input,
div#contactform div.row.error#name input,
div#contactform div.row.error#email input,
div#contactform div.row.error#text textarea
{
	border:solid 1px #cc0000;
	width:calc(100% - 14px);
	color:#cc0000;
}
div#loginform div.row.error:after,
div#contactform div.row.error:after 
{
	display:block;
	font-size:14px;
	padding:0.25em 0;
	font-weight:bold;
	color:#cc0000;
}

div#loginform div.row.error#login:after {
	content:"Der Log-In ist nicht korrekt";
}

div#loginform div.row.error#password:after {
	content:"Das Passwort ist nicht korrekt";
}

div#contactform div.row.error#name:after {
	content:"Der Name ist nicht korrekt";
}

div#contactform div.row.error#email:after {
	content:"Die E-Mail Adresse ist nicht korrekt";
}

div#contactform div.row.error#text:after {
	content:"Der Text ist nicht korrekt";
}

div#contactform textarea {
	resize:vertical;
	height:200px;
}

div#loginform input[type=submit],
div#loginform input[type=reset],
div#contactform input[type=submit],
div#contactform input[type=reset]
{
	width:100px;;
	font-family:Arial,Helvetica;
	border:none;
	font-weight:bold;
	border-radius:5px;
	height:2em;
	color:#ffffff;
	background-color:#2a63a3;
}

@media screen and (min-width: 500px) {
	div.welcome {
		width:100%;
		max-width:400px;
		padding:20px;
		right:30px;
		bottom:30px;
	}
}
@media screen and (min-width: 500px) and (max-width: 699px) {
	div#loginform {
		width:calc(100% - 40px);
		max-width:400px;
	}

	div#contactform {
		width:calc(100% - 40px);
		max-width:680px;
	}

}

@media screen and (min-width: 700px) {
	div#contactform,
	div#loginform 
	{
		width:calc(100% - 40px);
		transform: translate(-50%, -50%);
		left:50%;
		top:50%;
	}
	div#contactform {
		max-width:680px;
	}

	div#loginform {
		max-width:500px;
	}

	div#contactform label{
		display:inline-block;
		width:150px;
		vertical-align:top;
		margin:0.5em 0;
	}
	
	div#loginform div.row#login input,
	div#loginform div.row#password input,
	div#contactform div.row#name input,
	div#contactform div.row#email input,
	div#contactform div.row#text textarea
	{
		display:inline-block;
		max-width:510px;
		vertical-align:top;
	}

	div#loginform input[type=submit],
	div#loginform input[type=reset],
	div#contactform input[type=submit],
	div#contactform input[type=reset]
	{
		margin:0.5em 0;
	}

	div#loginform div.row.error:after,
	div#contactform div.row.error:after 
	{
		padding:0.25em 0 0.25em 150px;
	}

}
@media screen and (min-width: 768px) and (max-width: 991px) {
	body {
		background-image:url(/images/background-992.jpg);
	}
	
}

@media screen and (min-width: 992px){
	body {
		background-image:url(/images/background-1920.jpg);
	}
}