@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);

@font-face {
  font-family:'Source Sans Pro', sans-serif;
}

 
/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Mobile first - alle Dokument-Bloecke bekommen 100% Breite            																		*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: Spalte 1 	    									   																		*/
/*  			Spalte 2 	    									   																		*/
/* 				Spalte 3 	    									   																		*/
/* 																																			*/
/* ******************************************************************************************************************************************** */

/* ******************************************************************* */
/* Allgemeine Einstellungen											   */
/* ******************************************************************* */


body {
        display:-webkit-flex;
        display: flex;
        
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        
       	font-family:"Source Sans Pro", arial;
		font-weight:400;
		color:#4e5159;
		
		/* Seite im Browser zentrieren */
		max-width:1000px;
		margin: 0 auto;
		
		height:100%;
	    min-height:100%;

      }

header, nav, footer {
        padding: 10px;
        margin: 10px;
        
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }


footer_picture, footer_socialmedia, footer_adress {
        padding: 15px;
        margin: 10px;
        
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }

/* ******************************************************************* */
/* Text														           */
/* ******************************************************************* */

/*
| In getrenntem Style-Sheet
| text-style.css
*/


/* ******************************************************************* */
/* Header  															   */
/* ******************************************************************* */
 
header {
		
        display:-webkit-flex;
        display: flex;
        
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        
       
        /* set animation */
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;

 }
 

header > img {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;

		max-width:100%;
		width:100%;
		max-height:100%;
		
		z-index:48;
       }


 
.fixed_header {
	position:fixed;
	margin-top: 0px;
	background-color:white;
	max-width:960px;
	width: 96%;
/*	margin-left: 0px;*/
	z-index: 10;
}

       
#kleiner_header{
	height:100%;
}       

.small_header {
/*	width:100%; */
	position:fixed; 
	z-index:49; 
	top:0; 
	display:none; 
/*	visibility:hidden;*/
	margin-left:-20px; 
	max-width: 1000px;
	}

.big_header {
		 /* Angabe fuer Darstellung im Opera und Google Chrome */
		 /* sonst wird das Headerbild im Handy-Modus beim  */
		 /* Ausklappen des Menues nach unten gezerrt */
       height: 100%; 
      }

/* Browserweiche fuer Chrome und Opera */ 
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.big_header {
		height:100%;   
	}     
}  

/* Browserweiche fuer MS Edge */
@supports (-ms-accelerator:true) {
	.big_header {
		height:auto;
	}     
}



/* transparenter Logo-Link */
header > a {
	margin-top: -100px;
	z-index:51;
	width:25%;
}

.transparent {
	max-width: 25%;
  	height: auto;
}
/* ++++++++ */



header.fixed_header_index img {
	height:auto;

}

header.fixed_header_index nav#navigation {
	position:fixed;
	margin-top: 100px;
	right:40px;
}
       
/* ******************************************************************* */
/* Navigation														   */
/* ******************************************************************* */


nav {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }

nav ul {
        justify-content: space-around;
        flex-direction: column;

      }
      
      
  
/* ******************* */


nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }

nav > ul > li:first-child  {
	float:right;
	}

nav > ul > li:last-child {
	border-bottom: 2px #CCCCCC solid;
}

nav li {
		list-style:outside none none;
		display:block;
		width:100%;
		padding:2px 0px 0px;

      }

nav a {
        display:inline-block;
        width:100%;
        margin: 0;
        text-decoration: none;
        text-align: center;
        font-size:26px;
        line-height:38px;
        color: gray;
      }

nav ul li a:hover {
        background-color:#EAEAEA;
		color:#999999;
      }

#navigation {
	height:40px;
	-webkit-transition:background-color 0.5s;
    transition:background-color 0.5s;
    
    overflow:hidden;
    z-index:50;
	}

.mobil {
		display:block;
		cursor: pointer;
	}

nav ul#small_header_navigation {
	display:none;
}

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


spalte1, spalte2{
        padding: 0px 25px 0 10px;
        margin: 20px 0 0 10px;
        
		display:-webkit-flex;
        display: flex;
        -webkit-flex: 1 100%;
        flex: 1 100%;
        -webkit-flex-direction: column;
		flex-direction: column;
      }


spalte1 * {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;

	    -webkit-justify-content: space-around;
    	justify-content: space-around;
      }

    
spalte2 * {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;

	    -webkit-justify-content: space-around;
    	justify-content: space-around;
      }

spalte3 {
        padding: 0px 20px 0 10px;
        margin: 10px 0 0 10px;
        
        -webkit-flex: 1 100%;
        flex: 1 100%;
      }

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


box {
	margin-top: 40px;
    background: #eaeaea;
    text-align:center;
/*    min-height:180px;*/
    min-height:210px;

    -webkit-flex: 1 1 250px;
    flex: 1 1 250px;
    z-index:9;
	
}

box ul {
     padding-left:0px;
}

box ul li {
	list-style:none;
	text-align:center;
}

box ul li a, box a {
	text-decoration: none;
	color: gray;
	
}

box img {
	margin-top: -35px;
	width: 70px;
}

box hr {
	border: 0;
    height: 2px;
    width: 80%;
	background: aqua;

  /*  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));*/
  /*  background-image: linear-gradient(to right, #ccc, #333, #ccc);*/
}

box#box1 hr {background:#0155a9;}
box#box2 hr {background:#d7df23;}
box#box3 hr {background:#3dc5e1;}
box#box4 hr {background:#31b349;}
box#box5 hr {background:#ef1d25;}
box#box6 hr {background:#7157a5;}



/* ******************************************************************* */
/* Terminleiste														   */
/* ******************************************************************* */

.content {
/*	width:100%; */
}



/* ******************************************************************* */
/* Button															   */
/* ******************************************************************* */
.button {
    background-color: #0069b2; /* blau */
    border: none;
    border-radius: 12px;
    color: white;
    padding: 15px 32px;
	font-family:"Source Sans Pro", arial;
	font-size:12px;
	font-weight:400;
    text-align: center;
    text-decoration: none;
	text-transform: uppercase;    
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);    
}


/* ******************************************************************* */
/* Footer															   */
/* ******************************************************************* */

unterteil {
	width:100%;
	
/*	position:relative;*/
	bottom:0px;
/*	background-color:#00FFCC;   */

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

footer {
        background: #00599d;

		display:-webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        
        margin-top:70px;
      }

footer * {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;

        -webkit-justify-content: space-between;
        justify-content: space-between;
      }

footer p {
        text-align:right;
      }

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


footer_picture {

		display:-webkit-flex;
        display: flex;

		justify-content: flex-end;
		margin-top: -100px;
		margin-right:0;
		padding-right: 10px;

      }

footer_picture p {
        text-align:right;
      }

footer_picture img{
	width:400px;
	height:257px;
	right: 0px;
	display:none;
}

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

footer_socialmedia {

		display:-webkit-flex;
        display: flex;

		justify-content: flex-start;
/*		margin-top: -100px;*/
		margin-left:0;
		margin-bottom: -60px;

      }

footer_socialmedia img{
	width:30px;
	height:30px;
}

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

footer_adress{
		display:-webkit-flex;
        display: flex;

		justify-content: flex-start;
/*		margin-top: -200px;*/
		margin-left:0;	
		margin-bottom:0;
}


/* ******************************************************************* */
/* Anker - Verknuepfungen											   */
/* ******************************************************************* */

/*
#ueber_uns, #geschichte, #philosophie, #presse, 
#coole_fotos,
#kontaktformular, #mail,
#seminare, #archiv, #auszeichnungen,
#fotos, #termine, #intern,
#lernstuben, #partnerfirmen, #rotary,
#termine {
	margin-top:-20px;
}
*/

.anchor {
/*	margin-top: 80px;*/
/*	padding-top:150px;  */

/*	position:absolute; 
	top:-150px;
*/	
}

.anchor::before { 
		display: block; 
 		content: " "; 
    	height: 120px;      /* Give height of your fixed element */
    	margin-top: -120px; /* Give negative margin of your fixed element */  	
    	visibility: hidden; 
    	z-index:8;
    	
	}	


/* ******************************************************************* */
/* Flex-Order														   */
/* ******************************************************************* */


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


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


	spalte3 {
        -webkit-order: 5;
        order: 5;
      }


	unterteil {
        -webkit-order: 20;
        order: 20;
     }




/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Smart Phones und Tablets mit mittlerer Auflösung         																				*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: Spalte 1 // Spalte 2 	    									   															*/
/*  			Spalte 3 darunter	    									   																*/
/* 																																			*/
/* ******************************************************************************************************************************************** */


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

	header img {
        margin-right: 50px;
      }

	spalte1, spalte2 {
        -webkit-flex: 1;
        flex: 1;
	}




/* ******************************************************************* */
/* Terminleiste														   */
/* ******************************************************************* */

	.content {
	/*  width:100%; */
	}


/* ******************************************************************* */
/* Footer															   */
/* ******************************************************************* */

	unterteil {
		bottom: -60px;
	}

	footer {
		margin-top:-25px;
	}

	footer_adress{
		margin-top:150px;
		margin-bottom:-280px;
	}

	footer_picture {
		margin-top: -200px;
      }

	footer_picture img{
		display:block;
	}


	footer_socialmedia {
		margin-bottom: -270px;
	}

/* ******************************************************************* */
/* Flex-Order														   */
/* ******************************************************************* */

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


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


	spalte3 {
        -webkit-order: 5;
        order: 5;
      }


	unterteil {
        -webkit-order: 20;
        order: 20;
     }


}


/* ******************************************************************************************************************************************** */
/* 																																			*/
/* Large screens									        																				*/
/*																							   												*/ 
/* 																																			*/
/* Darstellung: Spalte 1 // Spalte 2 // Spalte 3	    						   															*/
/* 																																			*/
/* ******************************************************************************************************************************************** */
 


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


	spalte1, spalte2, spalte3 {
	    -webkit-flex: 1;
        flex: 1;
	}
	
	spalte3 {
		padding: 0 20px 0 20px;
	}

/* ******************************************************************* */
/* Navigation														   */
/* ******************************************************************* */

	.mobil {
		display: none;
	}

	nav ul {
		float: right;
		z-index:52;
      }

	nav ul li {
		border-right: 1px solid #ccc;
		line-height:12px;
		margin-top:3px;
		
		list-style:outside none none;
		display:block;
		
		float:left;
		width:80px;
	}

	nav ul li a {
        display:inline-block;
        width:100%;
        
        font-size:12px;
        line-height: 12px;
      }

	nav > ul > li:last-child  {
		border-right:none;
	}
	
	nav ul li:hover > a {
		color:#999999;
/*		background-color:white;*/
	}
	

/* ******************************************************************* */
/* Terminleiste														   */
/* ******************************************************************* */
	
	.content {
	/*	width:90%;  */
	/*	margin:0 0 0 20px; */
	}
	
	
/* ******************************************************************* */
/* Footer															   */
/* ******************************************************************* */


	unterteil {
		bottom: 0px;
	}

	footer {
        margin-top:-25px;
        margin-left:20px;
    }

	footer_adress {
		margin-bottom:20px;
        margin-left:5px;
    }

	footer_picture {
		margin-top: -300px;
      }

	footer_socialmedia {
		margin-bottom: 30px;
      }
	
	footer_picture img{
		display:block;
	}

/* ******************************************************************* */
/* Flex-Order														   */
/* ******************************************************************* */

	spalte1 {
        -webkit-order: 2;
        order: 2;
	}
	
	spalte2 {
        -webkit-order: 3;
        order: 3;
	}

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


}



/* ******************************************************************* */
/* Galerie							     		                       */
/* ******************************************************************* */


#galerie {
	max-width:600px;
}

#galerie a {
	margin:0 20px 25px 0;
	padding:0 0px 0px 0;
	display:inline-block;
}

.galerie-img-container {
	width:130px;
	height:80px;
	margin-bottom:10px;
	overflow:hidden;
	text-align:center;
}

.galerie-img-container img {
	max-width:100%;
}

.galerie-text {}



#gallery {
	display:none;
	opacity:0.0;
	float:left;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.95);
	z-index:202;
	
	transition:opacity 0.5s;
}


#gallery-close {
	position:absolute;
	top:15px;
	left:15px;
	width:35px;
	height:35px;
	cursor:pointer;
}

.gallery-nav-prev {
	position:absolute;
	top:45%;
	left:15px;
	width:40px;
	height:40px;
	display:none;
	cursor:pointer;
}

.gallery-nav-next {
	position:absolute;
	top:45%;
	right:15px;
	width:40px;
	height:40px;
	cursor:pointer;
}

#gallery-container {
	position:relative;
	width:100%;
	height:100%;
}

.gallery-mask {
	overflow:hidden;
	width:80%;
	height:80%;
	
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
		
.gallery-pictures {
	text-align:center;
	width:100%;
 	height:100%;
}

.picture {
	position:relative;
	float:left;
	max-width:100%;
	max-height:100%;
	height:100%;
}

.picture img {
	max-width:100%;
	
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.pic_animation {
	transition: transform 0.2s;
	-webkit-transition: -webkit-transform 0.2s;
}


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


.image-text {
	max-width:100%;
	display:inline-block;
}