/* CSS Document INDEX */
@charset "utf-8";

html, body {height: 100%; margin: 0; padding:0;}

body {
	background: #FFF;
	background: #000;
	font-family: "Century Gothic", "Trebuchet MS", Helvetica, Arial, Verdana sans-serif;
	font-weight:normal;
}



img{-ms-interpolation-mode:bicubic;}

h1,h2,h3,h4,p {color: #333; margin: 0.5em 0 0.5em 0; padding: 0 2%; line-height: 1.6em;}
h1,h2,h3,h4 {color: #333; font-size: 1.6em;}
p, a {font-size: 1.0em;}

a, a:link, a:active, a:visited  { 
	text-decoration: none; 
	cursor: pointer; 
	color: #FFF; 	
	-webkit-transition: color .25s ease-out;
	-moz-transition: color .25s ease-out;
	-o-transition: color .25s ease-out;
	transition: color .25s ease-out;
}
a:hover {color: #cc0000; text-decoration: none;}
a:focus, div:focus { outline: none; -moz-outline-style:none; }


/* ///////////// FONTS ///////////// */



h1, h2, h3, h4, p, a, li, span, label, input, textarea, submit {font-family: 'Open Sans', sans-serif;}
h1,h2,h3,h4 {font-weight: bold; font-family: 'Open Sans', sans-serif;}


/* /////////////////////// DIV ///////////////////////////// */

/* killed padding sonst scroller ab IE9 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
*/

#wrapper {
	position: relative;
	display: block;
	width: auto;
	width: 100%;
	height: auto;	
	min-height: 100%;	
	margin: 0;
	padding: 0;
	
/* vertical */
	display: -ms-flexbox;
	-ms-flex-orient: horizontal;
	-ms-flex-pack: center;
	-ms-flex-align: center;

	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	display: -moz-box;
	/*
	-moz-box-orient: horizontal;
	-moz-box-orient: vertical;
	*/
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;
	
	display: box;
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
	
z-index: 2;	
	
}

.chromeX #wrapper { /**/ display: block; }

/* Inner DIV vert horiz zentriert */

#wrap_content {
	/* sonst keine Prozente */
	-ms-flex: 1;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-webkit-flex: 1;	
	flex: 1;

	position: relative;	
	display: block;
	width: auto;
	height: auto;
/* */
	min-width: 200px;	
	min-height: 260px;
	/* max-width: 100%; */
	width: 100%;

	margin: 0 auto;
	padding: 0;
	
	border: 0px solid #FFF;
	background: black;
	background-color: rgba(0,0,0,0.2);
	/* RED 
	background: #db0132;
	background-color: rgba(219,1,50,0.4);
	*/

text-align: center;
}


/* //////////// IE HACKS //////////// */

.ie #wrapper {
	position: relative;
	display: block;
	
}

#distance {display: none;}
.ie #distance {
position: relative;
display: block; 
		width:1px;
		height:50%;
		background-color: green;
		margin-top: 25%;
		margin-bottom: -250px; /* half of container's height */
		float: left;
}


.ie #wrap_content {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		width:98%;		
		height: auto;
		height: 500px;
		height: auto;		
		clear:left;
		background-color: #db0132;
		/* background: transparent url(../images/bg_transp_fff_30.png) repeat scroll 0 0; */
}

.ie.ie7 #wrap_contentX {
	display:block;
	margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}



/* ////////////// BILD //////// */

#boxes {width: auto; max-width: 900px; margin: 0 auto;}

.box {
	position: relative;
	display: inline-block;
	text-align: left;
	margin: 0.5em;
	/* wenn 2 Blocks nebeneinander 
	width: 46%;
	width: calc(50% - 1.0em);
	*/

	width: 96%;
	width: calc(100% - 1.0em);

/*	
	background: #FFF;
	background: transparent url(../images/bg_transp_fff_30.png) repeat scroll 0 0;
	background-color: rgba(255,255,255,0.6);
*/	
	background-color: transparent;
}

.box.left { float: left; overflow: hidden; }

.box.right { float: right; }


@media only screen and (max-width: 1024px) {
	div.center{ max-width: 98%; max-height: 500px;}
}

@media only screen and (max-width: 600px) {
	.box {width: 96%; overflow: auto;}
	.box.left, .box.right {float: none;}
}

.logo {width: 100%; max-width: 1000px; height: auto; margin: 0px auto; padding: 0px;}

span.link {
	line-height: 2.0em;
	line-height: auto;
	margin: 0.5em;
	padding: 0.5em 0.8em;
	background-color: #000;
	float: right;
}



/* //////////////////////////////////////////////////////// */

	
#wrapper { padding-bottom: 32px;}
#footer p{ line-height: 30px; vertical-align: middle; }	
#footer	{ 
	z-index:5; 
	display: block; 
	height: auto; 
	
	position: absolute;
	bottom:0;	
	left:0px;
	width:100%;
	min-width:100%;	
	
	background-color: white;
	background-color: #333;
	background-color: transparent;
	
	background: #db0132;
	background-color: #000;

	color:#FFF;
	font-size:1.0em;
	/*line-height:1.2em;*/

}

.ie #footer	{  }

#footer .left, #footer .right { position: relative; display: block; width: 50%; margin: 0.0em 0 0 0 !important; background-color: transparent;}

#footer .left { text-align: left; float: left;}
#footer .right { text-align: right; float: right;}

#footer p{
	color:#FFF;
	font-size:0.8em;
	/*line-height:0.9em;*/
}

#footer .wrap {white-space: nowrap;}

#footer a, #footer a:visited {	color: #ffcc33; color: #FFF; }
#footer a:hover {color: #cc0000;}

@media only screen and (max-width: 540px) {
	#footer	{border-top: 1px solid #555;}
	#footer .left, #footer .right {width:98%;}
	#footer p{ line-height: 16px; margin: 0  0 2px 0; background: transparent;}
}


/* ///////////////////// Full BG /////////////// */

/* CSS 3 */
#full_div_bg {
	position: absolute;
	/**/ position: fixed; 
	top: 0;
	left: 0;
	width:100%;
	min-height: 100%;
	max-width: 100%;
	
	background: transparent url(none) no-repeat center center fixed;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	
	z-index: 1;

/*	
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
*/
	
/* 2 BGs	
	background-repeat: repeat, no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    background-size: auto, cover;
*/	
}



/* IE 6 7 8 per PHP browseweiche.php*/
img.full_bg {
	min-height: 100%;        /*  bg fuellen  */
	min-width: 1024px;
	width: 100%;             /*  bg Skalierung */
	height: auto;
	position: fixed;         /*  bg Positionierung  */
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
}

@media screen and (max-width: 1024px) {
	img.full_bg{
	left: 50%;
	margin-left: -512px;
	}
}

* html img#full_bg { 
	width: 100%;
	height:99.99%; /* IE6 Hack */
	position: absolute;	
}


/* //////////////////////////////////////////////////////// */

a.websteil {
	padding: 2px 6px;
	/* CSS 3 daded bei :hover */
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
}
a.websteil:hover { background: #9999cc !important;  color: #666666 !important; }