/*das wichtige Rot: a6262a*/
/*______________________________________________________________________Normalisiserung der unterscheidlichen Browser-Einstellungen*/
img {margin:0px;padding:0px;border:0; width:99%;}

* {box-sizing: border-box;} /*alle Box-Größen beziehen sich auf die Außenränder einschließlich der BORDER*/

nav, ul, li {
			list-style:none; border:0;	padding:0; margin:0;
			display:block; 
}
					
li			{
			display:list-item;
}
.nr 	{white-space:nowrap;}

* {box-sizing: border-box;}
	* {font-size:1em;}
/*__________________________________________________________________________________________________________________Normalisierung ENDE*/
/*__________________________________________________________________________________________________________________Für die Technik___________*/

main section article {clear:both;}/*für wo? wann?*/
/*__________________________________________________________________________________________________________________Technik Ende___________*/


/*___________________________________________________________________________________________________________ für die generelle Schönheit*/

.body {background-color:#eae9da}/*hell-gelb-grauer Hintergrund*/


.link_ext {color:#656e71; text-decoration:underline;} /*externe Links*/
/*_________________________________________________________________________________________________________________________ footer */	
footer {position:fixed; bottom:0px; left:0px; right: 0px; width: 100%;  z-index:3; 
		text-align: center; vertical-align: bottom; padding: 0px; border-top:1px solid #a8b88f; 
		color:#887660; background-color:rgba(51, 68, 68, 0.5);}

.footer_text {font-size:10px;}
.note { color:rgba(95, 22, 22, 1); font-size:10px;}

/*_________________________________________________________________________________________________________________________ footer ENDE */	


/*___________________________________________________________________________________________________________ für die Schönheit ENDE*/


/*__________________________________________________________________________________________________________media quiery___*/								

 @media (min-width: 721px){.but_kl {display:none;}
 }	
@media (max-width: 720px){	#main_impr ,			
							#main_slr				{position:relatve; top:auto;}
							#main_20jahre1			{display:block;}
							#main_20jahree			{display:block;}	
}
				
@media screen and (min-width: 544px){.fl_50,.flt_50			{width:200px;}
}
						
@media (max-width: 543px){
							.container{margin-left:auto; margin-right:auto; }
}
/* für Touch-Geräte: vergrößert Schrift und Innenabstand  */
/*sollte noch mit Displaybreite kombiniert werden, dann kann man ziemlich sicher sagen ob smartphone, tablet oder desktoprechner verwendet wird*/
/* @media (pointer: coarse) {
	input {
	 padding 1em;
	 font-size: 2em;
	}
}*/

/*___________________________________________________________________________________________________________________media quiery___ENDE*/								



/*_________________________________________________________________________________________________________________________ Überschriften */
h1, h2, h3, h4, h5, h6 {margin-bottom:0.5em; padding:0; font-weight:normal; text-align: center; }
.h1l, .h2l, .h3l, .h4l, .h5l, .h6l {margin-bottom:0.5em; padding:0; font-weight:normal; text-align: left;}
.h1r, .h2r, .h3r, .h4r, .h5r, .h6r {margin-bottom:0.5em; padding:0; font-weight:normal; text-align: right;}

h1 {font-size:4em;   margin-top:2.5em; }
h2 {font-size:2.5em; margin-top:2.5em; }
h3 {font-size:2em; 	 margin-top:1.9em; }
h4 {font-size:1.7em; margin-top:1.7em; }
h5 {font-size:1.5em; margin-top:0.5em; }
h6 {font-size:1.5em; margin-top:1em; font-style:italic; }


/*_________________________________________________________________________________________________________________________ Überschriften ENDE */	

 
/*___________________________________________________________________________________________________ für das _______ GRID-System*/
/*	verwendet in SLF */

/*all columns should be floating to the left and have a padding of 0.5empx;*/
[class*="col12_"] {
				float:left;	padding: 0.5em;
}
				
.col12_01 {width:  8.33%;}
.col12_02 {width: 16.66%;}
.col12_03 {width:    25%;}
.col12_04 {width: 33.33%;}
.col12_05 {width: 41.66%;}
.col12_06 {width:    50%;}
.col12_07 {width: 58.33%;}
.col12_08 {width: 66.66%;}
.col12_09 {width:    75%;}
.col12_10 {width: 83.33%;}
.col12_11 {width: 91.66%;}
.col12_12 {width:   100%;}

@media only screen and (max-width:769px) {
		[class*="col12"] { width:100%;
		}
}

/*_____________________________________________________________________________________________ für das _______GRID-System_ENDE*/
/*______________________________________________________________________________________________________________________________*/
/*______________________________________________________________________________________________________________________________*/
/*______________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________ für das _______FULL OVERLAY MENU _anfang*/

.logo_u { z-index:10; 
	position:fixed;
	bottom:0.6em;left:0.1em;
	margin:0px;padding:0px;
	width:4.5em; height:auto; 
	margin-left:0.5em;margin-to p:0rem;
	border:0px solid #a6262a;
	font-size:1.3em;
}/**/


/*Vorschaubilder*/
.h4_over {font-size:1.3em; margin-top:0.1em; padding-left:0.3em; padding-right:0.3em; padding-top:0.1m; padding-bottom:0.3em; height:5em; color:#93927e;}
.i {font-style:italic;}
.but_menue {position:fixed; left:10px; top:1em;  cursor:pointer; z-index:1;} /*Menubutten auf der Seite*/
.px_menue {width:80px; height:auto; 
}/*Menugrafik auf der Seite*/

.px_menue_1 {width:80px; height:auto;   
	-ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
transition-duration: 2s; 

}/*Menugrafik auf der Seite*/
.px_close {width:50px; height:auto; 	z-index:5;}
/*_______________________________________________von w3schools abgekupfert________________________________________________________*/

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(17, 34, 34, 0.95);
	color:#93927e;
	font-size:0.8em;
    overflow: auto;
    transition: 0.5s;
    padding-top: 6em;
    text-align:left;
	margin-top:0px; 
}/*Gesamtfläche, die sich öffnet*/

.nav-container {
	border-left:3px solid #011; 
	background-color:rgba(51, 68, 68,1);
	display:inline-block; 
	vertical-align:top; 
	margin-top:20px;
	margin-left:5px;
	margin-bottom:0.5em;
	
}/*Feld, in dem die einzelnen Links sind*/


.sidenav a {
    padding: 0.2em 1em 0.2em 1em;
    text-decoration: none;
    font-size: 1.3em;
    color: #caa;
    display: block;
    transition: 0.3s;
	background-color:#755;
	margin-top:8px;
	border-radius:50%
}/*einzelne punkte*/

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 5px;
    left: 10px;
	margin-left: 5px; 
}	
	

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 10px;}
  .sidenav a {font-size: 14px;}
}
 @media only screen and (max-width:999px){
	.sidenav a {padding: 0.2em 0.5em 0.2em 0.5em;
				font-size: 1em;
				margin-top:4px;} 
.nav-container {
	border-left:3px solid #011; 
	margin-top:10px;
}
.h4_over {font-size:1em; margin-top:0.1em; padding-left:0.6em; padding-right:0.6em; padding-top:0.1m; padding-bottom:0.3em; height:5em;}
 }

/*Media-quieries - breakpoints 
@media only screen and (min-width: 480px) 280 - 479 ---> @media only screen and (max-width: 479px)
@media only screen and (min-width: 600px) 480 - 699 ---> @media only screen and (min-width: 480px, max-width:699px)
@media only screen and (min-width: 768px) 700 - 999 ---> @media only screen and (min-width: 700px, max-width:999px)
@media only screen and (min-width: 1000px)1000 - ultimo -> @media only screen and (min-width: 1000px)
*/








/*______________________________________________________________________________________________________________________________________________Korrekturformate*/



.h4_over {font-size:1.3em; margin-top:0.1em; padding-left:0.3em; padding-right:0.3em; padding-top:0.1m; padding-bottom:0.3em; height:5em; color:#93927e; }

/*__________________________________________________________________________________________________ Animation MENU */


@keyframes tuch {
	0%   {left:55%; top:45vH; -ms-transform:rotate(-30deg);  -webkit-transform:rotate(-30deg);  transform:rotate(-30deg); z-index:1;}
     10% {left:62%; top:43vH; -ms-transform:rotate(30deg);   -webkit-transform:rotate(30deg);   transform:rotate(30deg);   z-index:1;}
	 15% {left:60%; top:43vH; -ms-transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);  transform:rotate(-45deg);  z-index:1;}	 
	 20% {left:55%; top:43vH; -ms-transform:rotate(45deg);   -webkit-transform:rotate(45deg);   transform:rotate(45deg);   z-index:1;}	 	 
	 25% {left:49%; top:37vH; -ms-transform:rotate(-50deg);	 -webkit-transform:rotate(-50deg);  transform:rotate(-50deg);  z-index:1;}	 
	 30% {left:40%; top:35vH; -ms-transform:rotate(360deg);  -webkit-transform:rotate(360deg);  transform:rotate(360deg);  z-index:1;}
	 35% {left:38%; top:20vH; -ms-transform:rotate(-30deg);  -webkit-transform:rotate(-30deg);  transform:rotate(-30deg);  z-index:1;}
	 40% {left:30%; top:10vH; -ms-transform:rotate(360deg);  -webkit-transform:rotate(360deg);  transform:rotate(360deg);  z-index:1;}
	 45% {left:20%; top:20vH; -ms-transform:rotate(-360deg); -webkit-transform:rotate(-360deg); transform:rotate(-360deg); z-index:1;}
    50%  { left:9%; top:50vH; -ms-transform:rotate(-90deg);  -webkit-transform:rotate(-90deg);  transform:rotate(-90deg);  z-index:1;}
    75%  {left:20%; top:40px; -ms-transform:rotate(90deg);   -webkit-transform:rotate(90deg);   transform:rotate(90deg);   z-index:1; }
    80%  {left:15%; top:30px; -ms-transform:rotate(-60deg);  -webkit-transform:rotate(-60deg);  transform:rotate(-60deg);  z-index:1;}
    95%  {left:0%;  top:1em;  -ms-transform:rotate(360deg);  -webkit-transform:rotate(360deg);  transform:rotate(360deg);  z-index:1; }
}

.but_tuch {
	-webkit-animation-name: tuch;
			animation-name: tuch;
    -webkit-animation-duration: 20s;
			animation-duration: 20s;
	-webkit-animation-delay: 5s;
			animation-delay: 5s;	
	-webkit-animation-iteration-count: 1;
			animation-iteration-count: 1;
	 
}

.but_tuch_fix {position:fixed; left:10px; top:1em;  cursor:pointer; z-index:0; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); width:70px; height:80px;} /*Menubutten auf der Seite*/


@keyframes menue {
    50%  { left:9%; top:50vH; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); z-index:1; background-color:rgba(255, 255, 255, 0.5);  width:100px; height:100px; }
    60%  {left:20%; top:40px; -ms-transform: rotate(90deg);  -webkit-transform: rotate(90deg);  transform: rotate(90deg); background-color:rgba(108, 20, 27, 0.5); width:100px; height:100px; z-index:1; }
    75%  {left:15%; top:30px; -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg); background-color:#6c141b;  z-index:1; width:100px; height:100px;}
    85%  {left:10%; top:1em;  -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); z-index:1; }
	90%  {left:0%; top:1em; background-color:rgba(255, 255, 255, 1);  width:100px; height:100px; z-index:1; border-radius:50%;}
	97%  {left:5px; top:1em;  z-index:1; border-radius:50%;}
	99%  {left:10px; top:1em; z-index:1; border-radius:50%; background-color:rgba(108, 20, 27, 0.1); width:100px; height:100px;}
	
	
}
.but_menue_1 {
    -webkit-animation-name: menue;
			animation-name: menue;
    -webkit-animation-duration: 10s;
			animation-duration: 10s;
	-webkit-animation-delay: 15s;	
			animation-delay: 15s;	
	-webkit-animation-iteration-count: 1;
			animation-iteration-count: 1;
}