﻿@font-face {font-family: "Rollerscript";
    src: url("../fonts/Rollerscript\ W03\ Rough.eot"); /* IE9*/
    src: url("../fonts/Rollerscript\ W03\ Rough.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Rollerscript\ W03\ Rough.woff2") format("woff2"), /* chrome firefox */
    url("../fonts/Rollerscript\ W03\ Rough.woff") format("woff"), /* chrome firefox */
    url("../fonts/Rollerscript\ W03\ Rough.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("../fonts/Rollerscript\ W03\ Rough.svg#Rollerscript") format("svg"); /* iOS 4.1- */
}

/* Allgemeines */
	body { font-family:"Rollerscript"; font-size:18px; background-color:#000; text-align:center; margin:0; padding:0; }
	p {}
	td {}
	img { display: block; }
	a:link { color:#000000; text-decoration:none; }
	a:visited { color:#000000; text-decoration:none; }
	a:hover { color:#45436d; text-decoration:none; }
	a:active { text-decoration:none; }
	#master { width:75%; min-width:480px; max-width:1280px; margin:auto; } 
	#spacer { width:95%; margin:auto; background-color:#000;}
	.fett { font-weight:bold; }
	.headline { font-size:24px; }
	.center { text-align:center; }
	.left { text-align:left; }
	.vollebreite { width:100%; }
/**************/

/* header */
	#header { position:relative; width:100%; padding:0px; top:0px; margin-left:-50%; left:50%; box-sizing:border-box; }
/**********/

/* main */
	#main { position:relative; width:100%; padding:0px; top:0px; margin-left:-50%; margin-top:0px; left:50%; }
/********/

/* footer */
	#footer { position:relative; width:100%; top:0px; margin-left:-50%; left:50%; margin-top:0px; text-align:center; padding:0px; box-sizing:border-box; }
	#footercontainer { position: absolute; bottom:0px; left:0px; padding:70px; color:#000; font-size: 24px; }
/**********/

/* contentcontainer */
	#contentcontainer { }
	#logincontainer { width:80%; padding-bottom:250px; padding-top:5%; padding-left:10%; padding-right:10%; background-image:url('../design/Background.jpg'); background-repeat:no-repeat; background-size:cover; font-size:35px; }
	.background_container { width:100%; background-image:url('../design/Background.jpg'); background-repeat:no-repeat; background-size:cover; }
	#videocontainer { width:80%; position:absolute; top:36%; left:10%; }

	@media only screen and (max-width:1100px) { 
		#logincontainer { font-size:31px; }
	}
	@media only screen and (max-width:1000px) { 
		#logincontainer { font-size:26px; }
	}
	@media only screen and (max-width:900px) { 
		#logincontainer { font-size:22px; }
	}
/********/

/* Login */
	.login_field { width:30%; height:40px; color: #000; font-size: 18px; text-align: center; background-color:#F6EFE6; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; box-sizing: border-box; }
	.login_field:focus { outline: none; }
	.login_submit { -webkit-appearance: none; width:30%; color: #000; font-size: 18px; height:40px; font-weight:bold; background-color:#F6EFE6; border:4px solid #45436d; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; text-align:center; text-decoration:none; display:inline-block; }
	.login_submit:hover { background-color:#45436d; color:#FFF; }
	.login_submit:focus { outline: none; }

	@media only screen and (max-width:1100px) { 
		.login_field { width:50%; }
		.login_submit {  width:50%; }
	}
	@media only screen and (max-width:1000px) { 
		.login_field { width:60%; }
		.login_submit {  width:60%; }
	}
	@media only screen and (max-width:900px) { 
		.login_field { width:70%; }
		.login_submit {  width:70%; }
	}
/********/
