@charset "utf-8";

a {
	font-size: 1.8em;
	color: #FB6409; /*orangerot*/
	font-family: Helvetica, sans serif;
	text-decoration:none;
	font-size:larger;
	font-variant: small-caps; /*alles gross geschrieben*/
}

a1 {
	font-family: Helvetica, sans serif;
	font-size:1.25em;
	text-decoration:none;
	color:#263238;
	font-variant:small-caps; /*alles gross geschrieben*/

}

h1, h2, h3, a, a1  {
	font-family:Helvetica;
	font-variant:small-caps; /*alles gross geschrieben*/
	font-weight:100;
	
}

h1 {
	font-size:1.8em;
	line-height:1.5em;
	font-variant:small-caps; /*alles gross geschrieben*/
	font-weight:100;
	color: #B0BEC5;              /*hell blaugrau*/
	margin:0em;
}

h2 {
	font-size:1.25em;
	line-height:1.5em;
	font-variant:small-caps; /*alles gross geschrieben*/
	font-weight:100;
	color:#263238;
	margin:10px 10px 0 60px;
	padding:0;
	text-align:left;
}

h3 {
	font-size:1em;
	line-height:1.5em;
	color:#B0BEC5;
	margin:0em;
	padding:1.25em;
}
p {
	line-height:1.25em;
	font-family:Helvetica;
	font-weight:100;
	color:#fff;
	margin:0px;
	padding:1em 2.5em 1em 2em;
	text-align:justify;
}


p1 {
	line-height:1.25em;
	font-size:0.75em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
	margin:0px;
	padding:0 2.5em 0 2.5em;
	text-align:justify;
}
p2 {	/*--------------------------------------für Zitate---------------------------------------------*/
	font-size:1em;
	font-family:Helvetica;
	font-weight:100;
	font-style:italic;
	color:#263238;
	margin:10px ;
	padding:0 ;
	text-align:center;
}
p3 {	/*--------------------------------------für Zitate-Autoren --------------------------------------------*/
	font-size:0.75em;
	font-family:Helvetica;
	font-weight:100;
	font-style:normal;
	color:#2F2D2C;
	margin:0 auto;
	padding:0 2.5em 0 2.5em;
	text-align:center;
}

 .active {   /*-bei aktiver Auswahl Farbe weiss-*/
color:#fff;
}


         /* Mobile-First-Ansatz*/
      /* Alle Ansichten */
	  
	  
        .flexcontainer {
		 width:1200px;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
		 margin: 0 auto;
		 border: 1px solid #000;
		 background-color:#607D8B;	
      }
      
      .mainnav {
         flex: 1 1 100%;
         background: #263238;
         order: 1;
		 height: 160px;
		 display:block;
      }
      
      .maincontent {
         flex: 2 1 60%;
		 height: 655px;
		 background-image:url(pictures/lagerfeuer_mt.png);
		 background-repeat:no-repeat;
	  }
	  	#bildbox {
		  width:900px;
		  height:auto;
	  	}
	 	#bildbox img{
		-webkit-transition: all 2s linear;
		-moz-transition:all 2s linear;
		-o-transition:all 2s linear;
		transition: 2s linear;
		opacity:1;
		}
		 
      .marginalie {
         flex: 3;
		 height: 655px;
         background: #FFFDE7;
}
      
      footer {
         flex: 1 1 100%;
         order: 4;
		 height: 100px;
         background: #263238;
		 text-align: center;
      }
      
      .maincontent,
      .marginalie,
      .mainnav {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      
      .mainnav h3,
      .marginalie h3,
      .marginalie p,
      .mainnav ul {
         margin: 0;
         list-style: none;
      }
      
      .mainnav ul {
         padding-left: 0;
         flex-direction: row;
         flex-wrap: nowrap;
      }
      
      .mainnav li {
		display:inline-block;
		list-style:none;
		margin:0 auto;
		background:	#263238; 	/*Hintergrundfarbe der Tabs*/
		border-radius: 10px 10px 10px 10px;
		width:150px;			/*Breite der Tabs*/
		text-align: center;
      }
      
      header {
         position: relative;
         flex: 1 1 100%;
		 background-color: #263238;
		 border-bottom: 1px solid #B0BEC5;
      }
      
      .menulink {
         position: absolute;
         top: 1em;
         right: 1em;
         background: #efefef;
      }
      /* Tabletbreite */
      
      @media only screen and (min-width: 580px) {
         .mainnav {
            flex: 1 1 100%;
            order: 1;
         }
         .maincontent {
            order: 2;
         }
         .marginalie {
            order: 3;
         }
         footer {
            order: 4;
            flex: 1 1 100%;
         }
         .flexcontainer {
            flex-direction: row;
         }
         .mainnav ul {
            flex-direction: column;
            justify-content: space-between;
         }
         .menulink {
            display: none;
         }
      }
      /* Desktopbreite */
      
      @media only screen and (min-width: 900px) {
         .mainnav {
            width: auto;
            flex: 1;
         }
         .mainnav ul {
            flex-direction: column;
         }

   .flexcontainer1 {
	   width:1200px;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
		 margin: 0 auto;
		 border: 1px solid #000;
}

/* --------------------------------------------Start Navigation----------------------------------------------*/
#navigation {
	float:left;
	width: 100%;
	height: 150px;
	padding: 0;
	margin: 0 auto;
	font-family:Helvetica;
	font-variant:small-caps; /*alles gross geschrieben*/
	font-weight:100;
  	background:#000; 	/* #F0F0FF;*/
 
 }
ul li {
	display:inline-block;
	list-style:none;
	margin:0 auto;
	background:	#0d0d0d; 	/*Hintergrundfarbe der Tabs*/
	border-radius: 10px 10px 10px 10px;
	width:100px;			/*Breite der Tabs*/
	text-align: center;
}
ul li:hover {
	text-decoration: underline;
	/*border-radius:10px 10px 10px 10px ;
	background:#88D6FF;*/
	color:#FFF;
}
/*------------------------------------------------Ende der Navigation------------------------------------------*/


.hinweis {
   display: none;
}

/* Verschiedene wieder verwertbare Klassen */
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}