<!--
/*
########################################
## Autor: Thomas Brunner / skillflow.de
## Copyright: 2017
## Generator: TextPad
########################################
----------------------------------------------------------------*/

body{
	position:relative;
	margin:0px;
	padding:0px;
	background-color:rgb(49,68,134);
}

body, div, #main{
	font-family:arial;
	font-size:12pt;
	border:0px solid rgb(0,0,0);
}

h1, h2, h3, h4, h5, h6{
	font-size:20pt;
	color:rgb(71,180,3);
	margin-top:2px;
	text-align:center;
}

h2{
	font-size:18pt;
	border-bottom:2px solid rgb(71,180,3);
}

h3{
	font-size:12pt;
	text-align:left;
}

h3.padingLeft, p.padingLeft{
	padding-left:20px;
}

h4{
	font-size:14pt;
}

h5{
	font-size:12pt;
}

h6{
	font-size:10pt;
}

a, #nav a{
	cursor: pointer;
	text-decoration:none;
}

a.form{
	font-weight:600;
	color:rgb(71,180,3);
}

a.imp, #footer a, a{
	color:rgb(71,180,3);
}

#footer a{
	font-weight:700;
}

#main-container{
	margin:0px 0 0 0px;
	max-width:100%;
	min-height:580px;	
	width:100%;
	height:100%;
	background-image:url(../images/back-03_b.jpg);
	position:fixed;
	background-size:cover;
	border:0px solid yellow;
	overflow:auto;
}

#main{
	width:90%;
	max-width:1300px;
	margin:0px auto;
	border:0px solid red;
}

#header{
	top:5px;
	height:300px;
	background-image:url(../images/banner-2.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	z-index:100;
	border:2px solid rgb(255,255,255);
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 1px 1px 30px rgb(255,255,255);
	-webkit-box-shadow: 1px 1px 30px rgb(255,255,255);
	-o-box-shadow: 1px 1px 30px rgb(255,255,255);
	-ms-box-shadow: 1px 1px 30px rgb(255,255,255);
	box-shadow: 1px 1px 30px rgb(255,255,255);
}

#headerText{
	color:rgb(255,255,255);
	font-weight:900;
	border:0px solid rgb(255,255,255);
	padding-top:10px;
	padding-left:40px;
	font-size:20pt;
	font-style:italic;
}

#headerText p.second{
	padding-left:100px;
	font-size:15pt;
	font-weight:900;
	border:0px solid yellow;
	margin-top:-20px;
}

#nav{
	position:relative;
	height:50px;
	text-align:center;
	z-index:50;
	border:0px solid rgb(71,180,3);
	background-color:rgb(71,180,3);
	opacity:0.7;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#nav ul{
	list-style:none;
	margin-top:15px;
	padding-top:10px;
}

#nav li{
	display:inline;
	height:20px;
	width:150px;
	margin-right:30px;
	border: 0px solid yellow;
}

#nav li a{
	color:rgb(0,0,0);
	text-decoration:none;
	text-align:center;
	font-weight:900;
	font-size:15pt;
}

#nav a.akt{
	color:rgb(243,202,34);
	color:rgb(255,255,255);
}

#nav a:hover{
	color:rgb(255,255,255);
}

#content-container{
	margin-top:10px;
	border:0px solid rgb(255,255,255);
	padding-bottom:3px;
	position:relative;
}

#left-container{
	width:70%;
	float:left;
	border:0px solid maroon;
}

#right-container{
	width:28%;
	float:right;
	border:0px solid green;
}


.left-content-1, .right-content-1, #container-100, .rightHeadline, #leftDivContent-25-auto{
	margin-top:3px;
	padding-left:4px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border:1px solid rgb(255,255,255);
}

#leftDivContent-25-auto{ 
	padding:0px 5px 0px 5px;
	width:300px; 
	border:1px solid rgb(71,180,3);
}

#container-100{
	background-color:rgb(255,255,255);
	opacity:0.8;
	margin-bottom:30px;
	border:2px solid rgb(255,255,255);
	-moz-box-shadow: 1px 1px 30px rgb(255,255,255);
	-webkit-box-shadow: 1px 1px 30px rgb(255,255,255);
	-o-box-shadow: 1px 1px 30px rgb(255,255,255);
	-ms-box-shadow: 1px 1px 30px rgb(255,255,255);
	box-shadow: 1px 1px 30px rgb(255,255,255);
}

#footer{
	/*color:rgb(0,0,0);*/
	color:rgb(255,255,255);
	font-size:10pt;
	min-height:300px;
	margin-bottom:10px;
	/*background-color:rgb(255,255,255);*/
	background-color:rgb(49,68,134);
	border:2px solid rgb(255,255,255);
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 1px 1px 30px rgb(255,255,255);
	-webkit-box-shadow: 1px 1px 30px rgb(255,255,255);
	-o-box-shadow: 1px 1px 30px rgb(255,255,255);
	-ms-box-shadow: 1px 1px 30px rgb(255,255,255);
	box-shadow: 1px 1px 30px rgb(255,255,255);	
	opacity:0.9;
}

.echo_footer{
	padding-top:10px;
	border-top:1px solid rgb(71,180,3);
	text-align:center; 
	margin-top:30px;
}

.fotter_Box_1{
	margin-left:55px;
	border-left:1px solid rgb(71,180,3);
	padding-left:5px;
}

.fotter_Box_1, 
.fotter_Box_2, 
.fotter_Box_3, 
.fotter_Box_4{
	display:inline-block;  
	width:260px; 
	height:190px; 
	border-right:1px solid rgb(71,180,3); 
}

/*-------------------------
Start: Nach-Oben-Button
--------------------------*/
#scrollicon{
	text-align: center;
	text-decoration:none;
	background:rgb(71,180,3);
	opacity:0.7;
	position:fixed;
	bottom:10px;
	right:1.5%;
	display:none;
	border:1px solid rgb(255,255,255);
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#scrollicon div{
	width:30px;
	height:30px;
	font-weight:bold;
	font-size:22px;
	color:rgb(255,255,255);
	padding-top:12px;
	vertical-align:middle;
	padding-bottom:5px;
}
/*-------------------------
Ende: Nach-Oben-Button
--------------------------*/

#nav .menue-button{
	display: none;
	width:80px;
	font-size:22pt;
	position: absolute;
	right:0px;
	top: 0px;
	cursor: pointer;
	padding-top:5px;
	padding-bottom:5px;
	text-decoration:none;
	color:rgb(255,255,255);
	text-align:center;
	font-weight:bold;
	border:solid 0px rgb(255,255,255);
	//background:rgb(228,32,32);
	background:rgb(71,180,3);
}

/*--------------------------
Hier beginnen die Classen
--------------------------*/

p.pCenter{
	text-align:center;
}

.loesche{
	clear:both;
}

.right-content-1{
	border:0px solid rgb(255,255,255);
}

.rightHeadline
{
	display:block;
	background-color:rgb(71,180,3);
	color:rgb(255,255,255);
	font-size:16pt;
	padding:3px;
	margin-left:-3px;
	width:99%;
	border:none;
}


/*---------------------------------------------
Wir zeigen die Navigation
Und verstecken den Button zum öffnen der Nav
dadurch wir der Button zum Ausblenden sichtbar
----------------------------------------------*/

#main:target .menue-button-beschr-open {
	display: none ;
}

#main:target #nav ul{
	display: block ;
}

#main:target #nav{
	display:block;
	height:155px;
}

#main:target #nav li a{
	font-size:13pt;
}


/*-----------------------------------------------
Hier beginnen wir mit dem Content und den Bildern
------------------------------------------------*/
.fett, .fett-center{
	font-weight:600;
}

.fett-center{
	text-align:center;
}

#leftDivContent-45, #leftDivContent-25, #leftDivContent-25-auto{
	position:relative; 
	width:45%; 
	float:left; 
	border:0px solid yellow;
}

#leftDivContent-25, #leftDivContent-25-auto{
	width:25%; 
}

#leftDivContent-25-auto{
	border:2px solid rgb(71,180,3); 
}

#rightDivContenten-50, #rightDivContenten-70{
	position:relative; 
	width:50%; 
	float:right; 
	border:0px solid yellow;
}

#rightDivContenten-70{
	width:70%;
}

#rightDivContenten-50 p{
	margin-top:0px; 
	border:0px solid red;
}

p.imagesBlock_1, p.imagesBlock_2, p.imagesBlock_3, p.imagesBlock_4{
	margin-top:0px; 
	display:inline-block; 
	border:0px solid red; 
	width:180px; 
	height:auto;
}

img.imgHoch, img.imgQuer, img.galerieQuer{
	width:263px;
	height:auto;
	border:2px solid rgb(71,180,3);
	padding:10px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

img.imgQuer{
	width:300px;
}

img.galerieQuer{
	width:150px;
	height:auto;
}

p.imagesBlock{
	margin:-10px;
	margin-right:10px;
	border:0px solid red;
}

ul{
	list-style-image:url('../images/list.png');
}

li li{
	list-style-type:lower-alpha;
}

.siteAnker{
	height:65px; 
	border:0px solid red; 
	vertical-align:top;
}

.anschriftTel, .tel{
	margin-top:0px; 
	display:inline-block; 
	border:0px solid red; 	
}

.anschriftTel{
	width:60px;
}

.p_impresumm{
	margin-top:-10px;
	margin-left:5px;
	margin-right:5px;
}

.p_impresumm_N{
	margin-left:5px;
	margin-right:5px;
}

.kursiv{
	font-style:italic;
}

/*-------------------------------------------------
Hier beginnt die Bildschirmauflösungsanpassung
-------------------------------------------------*/

/*-----------------------------------------
width: 1280 x 800
Galaxy Tab 2 - portrait (1280 x 800 Pixel)
-----------------------------------------*/
@media only screen and (max-width:1280px){
	p.imagesBlock_1, p.imagesBlock_2, p.imagesBlock_3, p.imagesBlock_4{width:280px;}
}


/*-------------------------------------------------
Was passiert bei Auflösung 1259 (Tablet-Querformat)
-------------------------------------------------*/
@media only screen and (max-width:1259px){
	.fotter_Box_1{margin-left:5px;}
	.fotter_Box_4{margin-left:5px; border-left:1px solid rgb(71,180,3); padding-left:5px; height:90px; display:block;}
	.fotter_Box_2, .fotter_Box_3, .fotter_Box_4{width:200;}
}


/*-------------------------------------------------
Was passiert bei Auflösung 1234 (Tablet-Querformat)
-------------------------------------------------*/
@media only screen and (max-width:1234px){
	img.imgQuer{width:200px;}
}

/*-------------------------------------------------
Was passiert bei Auflösung 1090 (Tablet-Querformat)
-------------------------------------------------*/
@media only screen and (max-width:1090px){
	/*Show Button*/	#nav .menue-button{display:block;}
	#nav .menue-button{margin-right:0px;}
	#nav ul{display:none; margin-left:0px; text-align:left;}
	#nav li{display:block; margin-left:-30px;}
	#nav {margin-top:15px;}
}

/*-------------------------------------------------
Was passiert bei Auflösung 975 (Tablet-Querformat)
-------------------------------------------------*/
@media only screen and (max-width:975px){
	.fotter_Box_1	{margin-left:5px;}
	.fotter_Box_3 	{margin-left:5px; border-left:1px solid rgb(71,180,3); padding-left:5px; height:90px; display:block;}
	#header{height:180px;}
	body, p, #main{font-size:12pt;}
	#headerText p{font-size:17pt;}
	#headerText p.second{font-size:14pt;}
	#nav li a{font-size:13pt !important;}
	#footer p{font-size:10pt;}
	#main h1{font-size:18pt;}
	#main h2{font-size:16pt;}
	#main h3{font-size:12pt;}	
}

/*-----------------------------------------------------
iPhone Querformat - Auflösung 862px
-----------------------------------------------------*/
@media only screen and (max-width:862px){
	#leftDivContent-45, 
	#leftDivContent-25, 
	#leftDivContent-25-auto, 
	#left-container{
		width:100%; 
		position:static !important; 
		clear:left !important;
	}
	#rightDivContenten-50, 
	#rightDivContenten-70, 
	#right-container{
		width:100%; 
		position:static !important; 
		clear:right !important;
	}
	#rightDivContenten-70 .imagesBlock{margin-left:3px; margin-bottom:10px;}
	p.imagesBlock_1, p.imagesBlock_2, p.imagesBlock_3, p.imagesBlock_4{width:180px;}
	#header{height:180px;}
}

/*-----------------------------------------------------
iPhone Querformat - Auflösung 839px
-----------------------------------------------------*/
@media only screen and (max-width:839px){
	p.imagesBlock_1, p.imagesBlock_2, p.imagesBlock_3, p.imagesBlock_4{width:250px;}
}

/*-----------------------------------------------------
Chinesich Hochvormat - Auflösung 720px

@media only screen and (max-width:720px){

}
-----------------------------------------------------*/

/*-----------------------------------------------------
iPhone Querformat - Auflösung 585px
-----------------------------------------------------*/
@media only screen and (max-width:585px){
	p.imagesBlock_1, p.imagesBlock_2, p.imagesBlock_3, p.imagesBlock_4{width:180px;}
}


/*-----------------------------------------
width: 568 x 320

OnePlus One - portrait (568 x 320 Pixel) 
iPhone 5 - portrait (568 x 320 Pixel) 
iPhone 5s - portrait (568 x 320 Pixel) 
-----------------------------------------*/
@media only screen and (max-width:568px){
	#header{height:180px;}
	#headerText p.second{padding-left:50px;}  
}

/*-------------------------------------------------
Was passiert bei Auflösung 620 (Tablet-Querformat)
-------------------------------------------------*/
@media only screen and (max-width:620px){
	.fotter_Box_1{margin-left:5px;}
	.fotter_Box_2{margin-left:5px; border-left:1px solid rgb(71,180,3); padding-left:5px;}
	.fotter_Box_2, .fotter_Box_3, .fotter_Box_4{width:260;}
	.fotter_Box_2{height:90px;}
	.fotter_Box_2, .fotter_Box_3{display:none !important;}
	.echo_footer{padding-top:10px; margin-top:0px;}
}

/*-----------------------------------------------------
iPhone Querformat - Auflösung 480px
-----------------------------------------------------*/
@media only screen and (max-width:480px){
	body, p, #main{font-size:12pt;}
	#headerText p{font-size:17pt;}
	#headerText p.second{padding-left:50px; margin-top:20px;}
	#footer p{font-size:10pt;}
	#main h1{font-size:18pt;}
	#main h2{font-size:16pt;}
	#main h3{font-size:12pt;}
}

/*-----------------------------------------
width: 360 x 598

Galaxy S 3 - landscape (360 x 640 Pixel)
Galaxy S 4 - landscape (360 x 640 Pixel)
Galaxy S 4 mini - landscape (360 x 640 Pixel)
Galaxy S 5 - landscape (360 x 640 Pixel)
Galaxy Note 2 - landscape (360 x 640 Pixel)
Galaxy Note 3 - landscape (360 x 640 Pixel)
Galaxy Note 4 - landscape (360 x 640 Pixel)
LG G3 - landscape (360 x 640 Pixel)
Nexus 5 - landscape (360 x 598 Pixel)
Nexus 6 - landscape (360 x 640 Pixel)
HTC One - landscape (360 x 640 Pixel)
HTC One M8 - landscape (360 x 640 Pixel)
Sony Xperzia Z - landscape (360 x 598 Pixel)
Sony Xperia Z 2 - landscape (360 x 640 Pixel)
Sony Xperia Z 3 - landscape (360 x 640 Pixel)
-----------------------------------------*/
@media only screen and (max-width:360px){
	#headerText p.second{padding-left:20px;}
	#headerText p{font-size:15pt;}
}


/*-----------------------------------------------------
iPhone Hochformat - Auflösung 350px
-----------------------------------------------------*/
@media only screen and (max-width:350px){
	img.imgHoch{width:200px;}
	#headerText p.second{padding-left:5px;}
}

/*-----------------------------------------------------
iPhone Hochformat - Auflösung 320px
-----------------------------------------------------*/
@media only screen and (max-width:320px){
	#headerText p.second{font-size:13pt; padding-left:15px;}
	#headerText p{font-size:14pt;}
}
-->