@charset "UTF-8";
/* CSS Document */

<style>
*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.cf:after {
	content "";
	display: table;
}

.cf:after {
	clear: both; 
}

html {
	font-size: 80%;
}


body {
	font-size: 80%; /*90%*/
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:rgba(255,255,255,1);
	margin: -0.15%;
	background-color:rgba(4,4,4,0.8); /*white*/
}

img {
	max-width: 100%;
	height: auto;
}

main  {
	width: 100%;
	height: auto;
	max-width: 1500px;/*1920px;*/
	margin: 0 auto;
}

/*Typography*/

h1 {
	
	font-size: 2.5em;
	line-height: 1.1em;
	margin-left:5%;
}

.h1P {
	 margin-top:3em;
	}

h2 {
	font-size: 2em;
	line-height: 1.1em;
	margin-left:5%;
}

p {
		
}


/*Layout*/


header  {
	width:100%; 
	height: 100px;
	background:rgba(168,29,29,1);
	text-align:center;
	position:fixed;
}


	
footer {
		
		color: whitesmoke;
		padding-right:3%;	
}



section {
	width: 100%;
	height: auto;
	display: inline-block;
}

#more {display:none;}


/*navigation*/

navi {
	 
 }

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	padding: 0;
	float: right;
	margin-top: 2.6%;
	margin-right: 10%;
	margin-bottom: 0%;
	margin-left: 2%;
}

/*kreiert eine  horizontale list mit zwischenraum*/
li {
	display:inline-block;
	float: left;
	margin-right: 0.5em;
}

/*Style für menu links*/
li a {
	display: block;
	min-width: 9em;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: white;
	background: rgba(168,29,29,1);
	text-decoration: none;
	font-size: .8rem;
	letter-spacing: 0.2em;
	font-weight: bolder;
	
	
}

/*Hover status für top level links*/
li:hover a {
	background-color: #000000;
}

/*Style der dropdown links*/
li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
	
}

/*Hover status für dropdown links*/
li:hover ul a:hover {
	background: rgba(168,29,29,1);
	color: #fff;
}

/*versteckt dropdown links bis zum Gebrauch*/
li ul {
	display: none;
}

/*macht die dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Textboxen*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #fff;
	background: rgba(168,29,29,1);
	text-align: center;
	display: none;
	font-size: medium;
	letter-spacing: 0.2em;
	font-weight: bolder;
	font-variant: small-caps;
	font-style: normal;
	text-transform: capitalize;
	
	/*z-index: 60;
	position: absolute;*/
	
}


/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
	
}

/*fotos und texte*/


#boxlogo {
	width:16%;
	height: auto;
	position: absolute;
	z-index:40;
	margin-left: 10%;
}


/*bild unter navigation*/
#box1 img{
	width: 100%;
	max-height: 700px;
	object-fit:cover;
	
}

.texbox1 {
	width: 92%;
	height: auto;
	float: left;
	line-height: 1.5em;
	font-size: 1.5rem;
	margin-bottom: 2em;
	margin-left: 5%;
	margin-right: 2%;
	-webkit-column-width: 40rem;/* Chrome, Safari, Opera */
	-moz-column-width: 40rem;/* Firefox */
	column-width: 40rem;
	-webkit-column-gap: 40px; 
    -moz-column-gap: 40px; 
    column-gap: 40px;
	
}



.texbox2 {
	width: 92%;
	height: auto;
	float: left;
	line-height: 1.5em;
	font-size: 1.5rem;
	margin-bottom: 2em;
	margin-left: 5%;
	margin-right: 2%;
	-webkit-column-width: 40rem;/* Chrome, Safari, Opera */
	-moz-column-width: 40rem;/* Firefox */
	column-width: 40rem;
	-webkit-column-gap: 40px; 
    -moz-column-gap: 40px; 
    column-gap: 40px;
	
}


#box2A {
	width: 100%;
	height: auto;
	float:left;
	margin-bottom:2%; }


#box2B {
	width: 100%;
	height: auto;
	float:left;
	margin-bottom:2%; }
	
	
.box5 {
	
	width: 93%;
	height: auto;
	float:left;
	margin-left: 5%;
	margin-right:1%;
	margin-bottom:5em; }
	

.box3A { 
	width: 31.28125%;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-right:1%;
	margin-bottom: 3%;
	
}

.box3B { 
	width: 31.28125%;
	height: auto;
	float: left;
	margin-right: 1%;
	margin-bottom: 3%;
}


/*Link zu box3T*/
a.class1:link
{
	color: orange;
	text-decoration: none;
}
a.class1:visited
{
color:orange;
text-decoration:none;
}
a.class1:hover
{
font-weight:bold;
font-size:1.1em;
text-decoration:none;
}


.box3Akl { 

	width: 29.5208333%;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-right:1%;
	margin-bottom: 3%;
	
}

.box3Bkl { 

	width: 29.5208333%;
	height: auto;
	float: left;
	margin-right: 1%;
	margin-bottom: 3%;
}


.box3Ckl {

	width: 29.5208333%;
	height: auto;
	float: left;
	margin-right: 1%;
	margin-bottom: 3%;
	
}


.box4A {
	width: 43%;
	height: auto;
	float: left;
	margin-bottom: 2%;
	margin-left: 5%;
}


.box4B {
	width: 43%;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-right: 2%;
	margin-bottom: 2%;
}




.box4Bspa {
	width: 43%;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-right: 2%;
	
}

.box5 {
	
	width: 91%;
	height: auto;
	float:left;
	margin-left: 5%;
	margin-right:2%;
	margin-bottom:2%m; }
	


.box6 {
	background-color: black;
	width:44%;
	height: auto;
	float: left;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	color: rgba(255,255,255,1);
	margin: 1.29585%;
	margin-bottom: 0%;
}

/*Portrait*/
.box6P {
	width: 30%;
	height: auto;
	float: left;
	margin-bottom: 5%;
	margin-left: 5%;
	color: rgba(255,255,255,1); 
}

/*Portrait*/
.box6P1 {
	width: 30%;
	height: auto;
	float: left;
	margin-bottom: 5%;
	margin-left: 1%;
	color: rgba(255,255,255,1); 
}

/*Portrait*/
.box6P2 {
	width: 30%;
	height: auto;
	float: left;
	margin-bottom: 5%;
	margin-left: 1%;
	margin-right:2%;
	color: rgba(255,255,255,1); 
}


.tabbox {
	width: 98%;
	height: auto;
	float: left;
}



.clearfloat {
	clear: left;	
}


.textbox1 {
	padding: 2em;
	background-color:black;
	
}


.planbox {
	width: 100%;
	height: auto;
	float: left;
	margin-left: 5%;
	
}


.schluss {
	clear:left;
}


.justify { text-align: justify; }

.symbol {
	padding-bottom: 2em;
	height: auto;
	width: auto;
	float: right;
	text-align: center;
	margin: 0.2em;
	padding-top: 0.2em;
	padding-right: 1em;
	padding-left: 0.2em;
	
}



/* hyperlink-farben und navigation*/
a:link {
	color: rgba(0,0,0,1);
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: rgba(255,255,255,1);
}
a:hover {
	text-decoration: none;
	color: rgba(102,102,102,1);
}
a:active {
	text-decoration: none;
	color: rgba(255,153,0,1);
}

map {
	width:100%;
	display: inline;
	cursor: pointer;
}	


/*tabelle*/
	table {
    border-collapse: collapse;
    width: 100%;
	margin-left:5%;
	margin-right:2%;
	margin-bottom:4em;
}

th, td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}


tr td a:visited {
	text-decoration: none;
	color:black; 
	
}

/*image map*/
#burj {
	position: relative;
	width: 100%;
	padding-bottom: 55%;/*77%;*/
	vertical-align: middle;
	margin: 0;
	overflow: hidden;
}
#burj svg { 
	display: inline-block;
	position: absolute;
	top: 0; left: 0;
}



/*box impressum*/
a.info:hover {
z-index:2;
background-color:#CCCCCC;
} 

a.info span {
display: none;
} 

a.info:hover span {
	display: block;
	position: absolute;
	width: auto;
	top: 1em;
	left: 1em;
	background-color: rgba(204,204,204,0.6);
	color: rgba(102,102,102,1);
	text-align: left;
	font-size: 0.8em;
	line-height: 1.5em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 2em;
	padding-left: 1em;
}



/*box impressum in der Fusszeile*/

.impre {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1.5em;
	color: white;
	margin:0.2em;
	}

.impress {
	padding-bottom: .2em;
	height: auto;
	width: auto;
	float: right;
	text-align: center;
	margin: 0.2em;
	padding-top: 0.2em;
	padding-right: 1em;
	padding-left: 0.2em;
} 


a.impress:hover {
	z-index: 2;
} 

a.impress span {
display: none;
} 

a.impress:hover span {
	display: block;
	position: fixed;
	width: auto;
	top: 1em;
	right: 2em;
	background-color: rgba(0,0,0,0.4);
	color: rgba(255,255,255,1);
	text-align: left;
	line-height: 1.5em;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 2em;
	padding-left: 1em;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1.5em;
}


/*sprachen deutsch, english, francais*/
#sprached{
	width: auto;
	position:absolute;
	z-index:40;
	margin-left:90%;
	margin-top:10em;	
}

#sprachee{
	width: auto;
	position:absolute;
	z-index:40;
	margin-left:90%;
	margin-top:12em;	
}

#sprachef{
	width: auto;
	position:absolute;
	z-index:40;
	margin-left:90%;
	margin-top:14em;	
}









/*Responsive Styles*/




@media screen and (max-width : 341px){

#boxlogo { width:90%; }


#box1 img {
	/*margin: 0 -50%;
	max-width: 900px;*/
	height:300px;
	}
	
}




@media screen and (max-width : 420px){

	#boxlogo { width:30%;}
	
	
	
	#box1 img {
	/*margin: 0 -50%;
	max-width: 900px;*/
	height:300px;
	}
	
	
	h1 { font-size: 2rem; }
	h2 {font-size: 2rem; }
	
	.impre {
	
	font-size: 1em;
	margin:0.2em;
	}
	

}


@media screen and (max-width : 556px){
	
	/*#box1 {  margin-top: 18%; }*/	



}

@media screen and (max-width : 640px){

	html { font-size:80%; }

	.texbox1 {
		line-height: 1.3em;
		font-size: 1rem;
		margin-bottom: 1em;	
	}
	
	.texbox2 {
		line-height: 1.3em;
		font-size: 1rem;
		margin-bottom: 1em;	
	}
	

	.box3T { line-height: 1.5em; }

	
	#boxlogo {
		width:40%;
}


	#sprached{
	margin-left:80%;
	margin-top:1em;	
}

#sprachee{
	margin-left:80%;
	margin-top:2.5em;	
}

#sprachef{
	margin-left:80%;
	margin-top:4em;	
}
	
	}
	
@media screen and (max-width : 768px){

	#boxlogo { width:18%; }
}
		



@media screen and (max-width : 900px){


	.box3A { 
	
	width: 45%;
	height: auto;
	float: left;
	margin-left: 5%;
	margin-right:1%;
	margin-bottom: 0%;
	
}

	.box3B { 
	
	width: 45%;
	height: auto;
	float: left;
	margin-right: 2%;
	margin-bottom: 0%;
}

	.box3T {
	width: 91%; /*33.28125%;*/
	height: auto;
	margin-right: 2%;
	margin-left: 5%;
	clear: left;	
}

}

@media screen and (max-width : 1051px){

h1 { font-size: 2rem; }
	
}



@media screen and (max-width : 756px){
	/*Make dropdown links appear inline*/
	
	html { font-size:80%; 
	}

	
	ul {
		position: static;
		display: none;
		margin:0; 
		}
	
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px; 
		}
		
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
		min-width: 14em; 
		}
	
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}


}

</style>