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


html {
	box-sizing: border-box;
	a         { color: red; }
    a:link    { color: red; }
    a:hover   { color: red; }	
    a:visited { color: red; }
}


	}

*,
::before,
::after {
	box-sizing: inherit;
}


body {
/*	display: flex; */
	flex-flow: column;
	justify-content: center;
	background-image: url("../");
	background-position: bottom;
	background-repeat: repeat-x;
	background-color: #000000;
}

/*** * Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
h1,
nav,
nav a,
article,
section,
aside,
footer {
/* border-radius: 0.5em 0.5em 0px 0px;
	border: 1px solid;
	padding: 10px; */
	flex: 1 100%;
	flex-flow: wrap;container box style2
	background-color: white;
}

h1 {
/*	padding-left: 15.2em; */
	padding-left: 78px;
	padding-top: 62px;
	letter-spacing: .045em;
	color: #ffffff;
	font-size: 2.5em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

h2 {
	padding-left: 76px;
	letter-spacing: .10em;	
	color: #ffffff;
	font-size: 1.8em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";	
}

h3 {
	padding-left: 76px;
	letter-spacing: .15em;	
	color: #ffffff;
	font-size: 2em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";	
}

h5 {
	color: #ffffff;
	font-size: 1.0em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
	
h6 {
	padding-left: 70px;
	color: #ffffff;
	font-size: 1.2em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

h7 {
/*	padding-left: 15.2em; */
	padding-left: 80px;
	padding-top: 58px;
	letter-spacing: .05em;
	color: #ffffff;
	font-size: 2.5em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

nav {
	padding-left: 0px;
	width: 100px;
}
	
nav ul {
	margin: 0;
	padding: 0;
	border: none;
}	
	
	
nav li {
	margin: 0;
	padding: 0;
	border: none;
}

nav li {
	list-style-type: none;
	margin: .3em 0;
}

nav a {
	display: inline-block;
	width: 100%;
	background: #fffffF;
	border: 1px solid #ffffdd;
	margin: 0;
	text-decoration: none;
	text-align: left;
}

nav a:hover {
	background-color: #dfac20;
}

section {
	background: #F1F3F4;
}

article {
/*	background: #ffede0; */
	border-color: #ffffff;
}

article img {
	width: 100%;
}


/* submenu navigation links */
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
	
nav .submenu li { 
  display: block; 
  width: 35em;
}
 
/* Show the submenu on hover, focus */
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
}

/* 	
aside {
	background: #ebf5d7;
	border-color: #8db243;
}
*/

footer {
	border-color: #8a9da8;
	backface-visibility: 80%;
	display: flex;
	flex-flow: row wrap;
	margin-top: 40px;
	order-radius: 0.5em 0.5em 0px 0px;
}
	
footer p {
	text-align: right;
	padding-left: 20px;
}

	
/* Layer Seite */

main {
	margin-left: 70px;
	position: relative;
	justify-content: center;
}

aside {
/*  position: absolute; padding: 1.5em; */
    }

#content-all {
	z-index: 0;
	top: 8em;
	max-width:  px;
	margin-left: 50px;
	background: rgba(0, 0, 0, 1.8);	
	}

div.content-titel {
	z-index: 1000;
	}
	
#content-navi {
	z-index: 30;
	}
	
#content-box {
	z-index: 0;
	top: 8em;
	}

#content-footer {
	padding: 500, 50, 50, 50px;
	z-index: 20;
	top: 8em;
	bottom: 8em;
	text-align: left;
	}

/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
	article {
		order: 2;
	}
	nav {
		flex: 1 auto 0%;
		order: 3;
	}
	
	aside {

/* durch auto werden die beiden asides in eine Zeile gesetzt */
		
		flex: 1 auto 0%;
		order: 4;
	}
	
	footer {
		webkit-order: 5;
		order: 5;
		text-align: right;
	}
}


/* Large screens */

@media all and (min-width: 50em) {
	article {
		
/* Der Article wird 5x so breit wie die beiden asides! */
		
		order: 3;
		flex: 5 1 0%;
	}
	nav {
		flex: 1 1 0%;
	}
	aside.navgation {
		flex: 0 0 0%;
		order: 0;
		align-self: center;
	}
}


/* Flex Container */


.flex-container {
	display: flex;<br>
	justify-content: center;
	align-content: center;
}

.flex-item {
	border: 1px solid;
	margin: .2em;
	padding: .2em;
	background: #ffffdd;
	background: rgba(196, 233, 255, 1.8);
	visibility: 80%;
}

.row {
  flex-direction: row;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column{
  flex-direction: column;
}

p.flex-item {
  font-weight: bold;
  text-align: center;
}

.flex-item:nth-of-type(2) {
	background: rgba(255, 255, 255, 0.5);
}

.flex-item:nth-of-type(3) {
	background: rgba(34, 121, 211, 0.7);
}

.flex-item:nth-of-type(4) {
	background: rgba(255, 255, 255, 0.9);
}

.flex-item:nth-of-type(5) {
	background: rgba(255, 255, 255, 0.5);
}


/* Flex Inhalt */	  
.flex-container {
	display: flex;
	max-width: 82em;
	border: 0px dotted;
}

.flex-item {
	border: 1px solid;
	margin: .4em;
	padding: .4em;
	image-resolution: from-image;
	background-color: rgba(255, 255, 255, .8);
}

.no {
	flex-wrap: nowrap;
}

.wrap {
	flex-wrap: wrap;
}

.wrap-reverse {
	flex-wrap: wrap-reverse;
}


p.flex-item {
	font-weight: bold;
	text-align: left;
	width: 30em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
	
p.flex-item {
	font-weight: bold;
	text-align: left;
	width: 40em;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

#BildCenter {
	text-align: center;
	justify-content: center;
}

.BildCenter {
	text-align: center;
	justify-content: center;
} 
	
.Bild-01 {
	background-color: rgba(255, 255, 255, .8);
	text-align: center;
} 

.Bild-02 {
	background-color: rgba(255, 255, 255, .8);
	text-align: center;	
}
	
.flex-item:nth-of-type(2) {
	background-color: rgba(255, 255, 255, .8);
}

.flex-item:nth-of-type(3) {
	background-color: rgba(60, 121, 211, .8);
}

.flex-item:nth-of-type(4) {
	background-color: rgba(255, 255, 255, .8);
}

.flex-item:nth-of-type(5) {
	background-color: rgba(255, 255, 255, .8);
}	

/*    submenu navigation links    */
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}
	
nav .submenu li { 
  display: block; 
  width: 200px;
}
 
/**  Show the submenu on hover, focus  **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
  width: 200px;
}
	
/** Menu Icons **/
.socials { 
	display:;
	width: auto;
}
	
.copyright {
	text-decoration-color: crimson;
	
}
	
</style>