/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite            																		*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: header 	    									   																		       */
/* 				element 1	    									   														                    */
/* 				bild    	    									   														                    */
/* 				seitentext 	    									   														                    */
/* 				termine  	    									   														                    */
/* 																																			*/
/* ******************************************************************************************************************************************** */




container1 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex-direction: column;
        flex-direction: column;
      		
        padding: 10px 10px 0 10px;
        
        -webkit-flex: 1;
        flex: 1 ;
        
        margin-top: 120px;

}

container2 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex-direction: row;
        flex-direction: row;
        
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        
        -webkit-align-items: flex-end;
        align-items: flex-end;
        
        -webkit-justify-content: center;
        justify-content: center;

   /*     padding: 0px 5px 0 5px;*/
/*       margin: -3px 0 0 0;*/
        margin: 6px 0 0 0;
}


container3 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex: 1;
        flex: 1 ;

        -webkit-flex-direction: row;
        flex-direction: row;
        
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        
        -webkit-align-items: flex-start;
        align-items: flex-start;
        
        -webkit-justify-content: space-around;
        justify-content: space-around;

        padding: 0 10px 0 20px;
        margin-top: 120px;

}


container4 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex: 1;
        flex: 1 ;

        -webkit-flex-direction: column;
        flex-direction: column;
        
        padding: 0 10px 0 20px;
        margin-top: 120px;
}

container5 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex: 2;
        flex: 2;

        -webkit-flex-direction: row;
        flex-direction: row;
        
/*        padding: 0 10px 0 20px;*/
}

container6 {

        display:-webkit-flex;
        display: flex;

        -webkit-flex: 2;
        flex: 2;

        -webkit-flex-direction: row;
        flex-direction: row;
      		
        padding: 0 20px 0 20px;
        
        margin-top: 120px;

        
}



termine {
    /*    padding: 0px 20px 0 20px;*/
        margin: 20px 0 0 10px;
        
      }



termine > article.content {
	/*	padding-left:17px;*/
		padding-right: 20px;
	}


seitentext {
        margin-top: 30px;
}


/* ******************************************* */

container2 {
/*	background-color:lime;   */
	
	}

/*
bild {
	padding-left: 10px;
	}
*/

termine {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
	}

bild img {
    -webkit-flex: 1 1 auto;
	flex: 1 1 auto;

	margin-bottom:-5px;
	padding-top: 10px;
/*	height: 186px;*/
	height: 210px;
	width: auto;
	}

unterteil {
/*	padding: 0px 20px 0 15px;*/
	padding: 0 4px 0 0;
	}


.bilder {
/*	padding:0 0 10px 0;
	border-width:10px;
  	border-style:solid;
  	border-color:#ffffff;
	background-color:#ffffff;
	box-shadow:5px 5px 5px #666666,
				-5px 5px 5px #666666;
*/					
}


.bilder img {
/*	height: 80px; */
	width: 130px;
	padding:0 10px 10px 0;
/*	border-width:10px;
  	border-style:solid;
  	border-color:#ffffff;
	background-color:#ffffff;
	box-shadow:5px 5px 5px #666666,
				-5px 5px 5px #666666;
*/	}

/* ************************************************************************** */

container1, container6 {
        -webkit-order: 3;
        order: 3;
      }

container3 {
        -webkit-order: 3;
        order: 3;
      }

container4 {
        -webkit-order: 3;
        order: 3;
      }
      

bild {
        -webkit-order: 4;
        order: 4;
      }

seitentext {
        -webkit-order: 5;
        order: 5;
      }
      
      
termine {
        -webkit-order: 10;
        order: 10;
      }
      
unterteil {
        -webkit-order: 20;
        order: 20;
     }

	
} 



@media all and (min-width: 480px) and (max-width: 599px) {

container1, container6 {
        -webkit-flex: 2;
        flex: 2;
        
        margin-top: 150px;

	}
}


@media all and (min-width: 200px) and (max-width: 479px) {

	.fixed_header{
		margin-left:0px;
		width:94%;
	}
	
	unterteil {
		padding:0;
	}
}
}



/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Smart Phones und Tablets mit mittlerer Auflösung         																				*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: header 	    									   																		       */
/*  			element1  || bild       									   												               	*/
/*              -----------------------																										*/
/* 				seitentext  			   	    									   														*/
/*              -----------------------																										*/
/* 				termine  																													*/
/* 																																			*/
/* ******************************************************************************************************************************************** */


@media all and (min-width: 600px) and (max-width: 799px) {



	container1{
        -webkit-flex: 2;
        flex: 2;
        
        margin-top: 150px;
        padding: 0 20px 0 30px;


	}
	
	container2 {
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		
        -webkit-justify-content: flex-start;
        justify-content: flex-start;

	}
	
	container5 {
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		
        -webkit-justify-content: flex-start;
        justify-content: flex-start;

        -webkit-align-items: baseline;
        align-items: baseline;

	 }
	 
	container3, container4{
        -webkit-flex: 2;
        flex: 2;
        
        padding: 0 0px 0 35px;
        margin-top: 150px;

	}


	container6 {
        -webkit-flex: 2;
        flex: 2;
        
        margin-top: 150px;
        -webkit-flex-direction: column;
        flex-direction: column;
	}



	termine {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
		
/*		margin: 190px 0 0 10px;*/
		margin: 20px 0 0 10px;
        padding: 0px 20px 0 20px;
		
		
	}
	
	bild img {
	    -webkit-flex: 1 1 auto;
		flex: 1 1 auto;

		margin-bottom:-5px;
/*		height: 188px;*/
		height: 210px;
		width: auto;
	}
	
	bild {
		padding-left: 10px;
	}

	
	unterteil {
		padding: 40px 8px 0 15px;
/*	padding: 0px 20px 0 15px;*/
		
	}

/* ************************** */

	container1, container5 {
        -webkit-order: 3;
        order: 3;
      }

	container3, container4 {
        -webkit-order: 3;
        order: 3;
      }

	seitentext, container6 {
        -webkit-order: 4;
        order: 4;
      }
      
	termine {
        -webkit-order: 5;
        order: 5;
      }
      
      
	unterteil {
        -webkit-order: 20;
        order: 20;
     }


}

/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Large screens									        																				*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: header 	    									   																		       */
/*  			element1  || bild      || termine     									   													*/
/*              -----------------------||																									*/
/* 				seitentext 			   ||	    									   														*/
/* 																																			*/
/* 																																			*/
/* ******************************************************************************************************************************************** */

@media all and (min-width: 800px) {


	container1 {
        -webkit-flex: 2;
        flex: 2;
        margin-top: 150px;
        padding: 0 20px 0 40px;

	}
	
	container2 {
		-webkit-flex-wrap:nowrap;
		flex-wrap:nowrap;
    
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
	}

	container3{
        -webkit-flex: 2;
        flex: 2;
        padding: 0 0px 0 35px;
        margin-top: 165px;
	}

	container4 {
        -webkit-flex: 2;
        flex: 2;
        padding: 0 0px 0 35px;
        margin-top: 180px;
	}

	container5 {
    
        -webkit-flex: 2;
        flex: 2;
        -webkit-align-items: baseline;
        align-items: baseline;

	}
	
	container6 {
        -webkit-flex: 2 1 0;
        flex: 2 1 0;	
        
        -webkit-flex-direction: column;
        flex-direction: column;
        
        margin-top:160px;
	}

	bild {
		padding-left: 10px;
	}


	bild img {
    	-webkit-flex: 1 1 auto;
		flex: 1 1 auto;

		margin-bottom:-5px;
/*		height: 180px;*/
		height: 210px;
/*	width: auto;*/
		width: 295px;
	}

	termine{
        -webkit-flex: 1;
        flex: 1;
        margin-top: 150px;
        padding: 0px 20px 0 20px;
        
	}


	#navigation {
		margin-top:-30px;
		margin-right:2px;
		z-index:-50;
	}
	
	nav ul li a:hover {
		color:lightblue;
		background-color:navy;
      }
	
	nav ul li a {
		color:#ffffff;
      }
		
	unterteil {
		padding: 100px 10px 0 20px;
		z-index:-1;
	}
		

}