/*
Grundblau = 004494    rgb(0,68,148)
Verlaufsblau von 004c99 nach 007dbc
Zwischenfarbe 0064ac


*/
p.loading {
  color: white;
  font: 100 4em/100% Impact;
  text-align: center;
  margin:auto;}


/* loading dots */

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}


* {
	padding:0;
	margin:0;
}

body {
	background: #333;
	background: #b0c4de;
	margin: 0;
	font-family: sans-serif;
}

#video_background {
	position: absolute;
	background: #b0c4de;
	top: 0px;
	right: 0px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
}

.error { position:absolute;z-index:999;background:rgba(223,0,0,0.8);top:0px;left:0px;height:60px;width:100vw;display:none; }
.hinweis { position:absolute;z-index:999;background:rgba(102,205,0,0.8);top:0px;left:0px;height:60px;width:100vw;display: flex; 
  flex-direction: column; 
  justify-content:center;text-align:center;color:white;font-size:20px;
  -webkit-animation: cssAnimation 5s forwards; 
  animation: cssAnimation 5s forwards;
}
@keyframes cssAnimation {
       0%   {opacity: 1;}
       90%  {opacity: 1;}
       100% {opacity: 0;}
}
@-webkit-keyframes cssAnimation {
       0%   {opacity: 1;}
       90%  {opacity: 1;}
       100% {opacity: 0;}
}

.container {
	background: white;
	margin: 0 auto;
	padding: 10px;
	#max-width:1200px;
}
.container1 {

	margin: 0 auto;
	padding: 10px;
	#max-width:1200px;
}
.icon {height:25px;}
/*.container * { padding: 10px; }*/

.header { 
           }
.header img {
				max-height:75px;
			}
.header * { padding: 10px; }

.nav_main { background: #97a2aa; padding:10px;}



.content {padding: 0px;}

.main { padding:10px; }
.main2 {  }

.sidebar { background: #f0f3f5; }

.sidebar2 { background: #daedc1; }

.footer {
	background: #353535;
	color: white;
}

 .loginvalue { width:80%;margin:5px auto;height:40px;font-size:26px;padding:0px 15px; }
 .loginvalue_p { width:80%;margin:5px auto;height:60px;font-size:12px;padding:0px 15px; }
 
 .sel1 { font-size:18px; }
 
 .childselect {width:100%;min-height:250px;max-height:100%;text-align:center;display: flex; 
  flex-direction: column; 
  justify-content:center;border:3px double rgba(150,150,150,0.6);background:rgba(200,200,200,0.6);}
 
 .fopa { padding:5px;background-color:rgba(200,200,200,0.6);color:#333333;text-decoration:none; }
 .fopa:hover { padding:5px;background-color:rgba(200,200,200,1.0);color:#000000;text-decoration:none; }
 

@media screen and (min-width: 800px) {
	
	p.loading {
  color: white;
  font: 300 4em/150% Impact;
  text-align: center;
  margin:auto;}
	
	body {margin:1em;}
	
	.content {
		display: flex;
	}
	
	.header img {
				max-height:150px;
			}
	
	.main {
		flex: 5;	
		order: 2;
	}
	
	.main2 {
		flex: 5;	
		order: 2;
		text-align:center;
	}
	
	.sidebar {
		flex: 1;	
		order: 1;
	}
	
	.sidebar2 {
		flex: 1;
		order: 3;
	}
	
	.loginvalue { max-width:33%;min-width:500px;margin:5px auto;height:40px;font-size:26px;padding:0px 15px; }
	.loginvalue_p { max-width:33%;min-width:500px;margin:5px auto;height:60px;font-size:12px;padding:0px 15px; }
	
	.kawo {background:#0064ac;padding:5px;margin:2px 0px;color:#ffffff;}
	.kawo button {float:right;}



}