/* Thank you for looking at this code- Copyright Julia Etter 2016 */
html{
		width:100%;
		height:100%;	
	
}
body {
	/*background:url(../bilder/hirnwindungen8.png) no-repeat fixed center center;/*fixed= wird gefestigt/ am Body festgemacht*/
		background-color:#000;
		background-size:cover;/*damit Bild in Mitte und responsive ist; Bild wird nicht verzerrt; max breite/höhe gedehnt*/
	/*font-family:'Roboto',Tahoma,sans-serif;*/
		height:100%;
		padding:0;
		width:100%;
		margin:10px auto;
	
}
	
	
div {
	/*damit padding und border nicht dazugezaehlt werden*/
		box-sizing:border-box;	
}
	

#container {
		/*border:1px solid #fda;*/
		max-width:1000px;/*damit es nicht breiter wird auf grossem Bildschirm*/
		margin:10px auto; /*zentriert*/ /*margin:10px auto = oben bisschen abstand*/
		padding:30px;
	
}



#titelbalken {
		border-bottom:1px solid #678;
		/*box-shadow:inset 0px 0px 10px #333;/* kann auch für Navigationspunkte gebraucht werden*/
		font-size:2em;/*relativ von Standartschriftgrösse 16px*/
		margin-bottom:10px; /* Rand nach unten*/
		padding:10px;
		text-align:center;/*zentriert den Text*/
}

#titelbalken img {
		display:center;
		/*border:1px solid #f00;*/
		width:25%; /* absolute breite */ 
			
	
}




#kopfnavi1 {
		color:#2dd0e6;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1.5em;
		position:absolute;
		top:55px;
		left:770px;
		display:none;
}
#kopfnavi2 {
		color:#2dd0e6;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1.5em;
		position:absolute;
		top:100px;
		left:739px;
		display:none;
}

#kopfnavi3 {
		color:#2dd0e6;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1.5em;
		position:absolute;
		top:224px;
		left:769px;
		display:none;
}

#kopfnavi4 {
		color:#2dd0e6;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1.5em;
		position:absolute;
		top:333px;
		left:844px;
		display:none;
}

#kopfnavi5 {
		color:#2dd0e6;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1.5em;
		position:absolute;
		top:460px;
		left:786px;
		display:none;
}

#navigation {
		display:table; /*hebt das Blockelement auf*/
		margin-bottom:20px;
		width:100%; /* damit Navigation an ganzem Fenster sich responsive anpasst*/
	
	}
	
#navigation ul {
		
		display:table-row; /*row = zeile*/
		
	}
	
#navigation li {
		display:table-cell; /* zelle*/
		text-align:center;
}

#scroll_top {
		bottom:15px;
		cursor:pointer;	
		color:#fff;
		position:fixed;
		right:15px;
		display:none;
}	

.nav--mobile {
	
	
}
.nav-toggler__button {
	
	display:none;
}


/******************STARTSEITEN-NAVIGATION***********



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


#text {
		background:rgba(0,0,0,0.7); 
		/*border:1px solid #f00;*/
		color:#fff;
		float:left;
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size:1em;
		letter-spacing:0.2em;
		margin:80px 0px 0px 0px;
		padding:20px;
		width:50%;
}


.werbung{
	color:#fff;
	text-decoration:none;
	
}


#platzhalter1 {
		/*border:1px solid #f00;*/
		float:right;
		width:100%;	

}

#foto {
		/*border:1px solid #f00;*/
		float:right; /* links schweben */
		width:50%; /* absolute breite */ 
		margin-bottom:50px;
}
#foto img{
		width:100%; /* absolute breite */
}
#fusszeile{
		border-top:1px solid #678;
		clear:both;
		color:#2dd0e6; /* gleiche wie aus dem Formular-- css ist dort direkt reingeschrieben worden*/
		font-family:'Quantico', Calibri, Helvetica, sans-serif;
		letter-spacing:0.2em;
		position:bottom;
		text-align:center;/*zentriert den Text*/
		margin-top:50px; /* Rand nach oben*/
		padding:15px;
		width:100%;		
	
}

/*--------------RAHMEN------------*/

table {
		border-top:1px solid #678;
		padding:10px;
		text-align:center;
		width:100%;
}


/*--------------BILDER------------*/

#fotos1 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}

#fotos2 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}

#fotos3 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}


/*------------------BEWEGTE BILDER------*/
#bewegte_bilder1 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}

#bewegte_bilder2 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}

#bewegte_bilder3 {
	color:#2dd0e6;
	font-size:1.5em;
	margin:20px;
	text-align:center;	
	
}


/*--------------FORMULAR-------------*/


body, input, textarea, select {
		font-family: 'Quantico', Calibri, Helvetica, sans-serif;
		font-size: 14px;
}
.klein {
		font-size: 10px;
}
#formularbox{
		width:100%;	
	color:#2dd0e6;
}

.grossschrift {
	text-transform:uppercase;
}

.linieunten {
		border-bottom:1px solid #678;
		padding-bottom:15px;
}



input{
		margin:10px 10px 10px 0px !important;
}

.formularfeld {
		width:300px;
}

input:focus{
		background-color:#2dd0e6;	
}

textarea{
		margin:10px 10px 10px 0px !important;;	
}

textarea:focus{
		background-color:#2dd0e6;	
}

select{
		margin:10px 10px 10px 0px !important;	
}

select:focus{
		background-color:#2dd0e6;	
}

#koepfchen_links {
		position:fixed;
		left:0;
		top:30%;
		z-index:-2;
}

#koepfchen_rechts {
		position:fixed;
		right:0;
		top:30%;
		z-index:-1;
}



#koepfchen_links1 {
		display:none;
}

#koepfchen_rechts1 {
		display:none;
}  





/*----------------------------------------------------
Div layout
-----------------------------------------------------*/


@media screen and (max-width: 1100px) {
	
	#koepfchen_rechts {
		display:none;
	}	
	
	#koepfchen_links {
		display:none;

	}
	#koepfchen_rechts1 {
		display:block;
		position:fixed;
		right:0;
		top:0%;
		z-index:-2;
	}
	
	#koepfchen_links1 {
		display:block;
		position:fixed;
		bottom:0%;
		z-index:-2;
	}
	


	#fotos1 {
		
			display:block;	
			text-align:center;
			width:100%;
	}


}
		
@media screen and (max-width: 780px) {
	

	
	
		#titelbalken{
		border-bottom:1px solid #678;
		}	
				
		#navigation li {
	 		display:block;	
			text-align:center;
			width:100%;	
		}
		
		#text, #foto{
			display:block;
			width:100%;	
			
		}
		
		table {
		text-align:center;
		width:100%;
		}
		
		td {
		display:block;
		margin-bottom:10px;
		text-align:center;
		width:100%;
		}
		

		#fusszeile{
			display:block;
			width:100%;
		}
	}

@media screen and (max-width: 600px) {
	
		#titelbalken{
			display:none;
			
		}	
		
		/* HAMBURGER-BUTTON */
	
	.nav-toggler {
  font-family: sans-serif;
  float: left;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
	
	.nav--mobile {
    max-height: 0;
    visibility: hidden;
    transition: max-height 0s 3s, background 0.3s;
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    font-size: 1.25rem;
    text-shadow: 0.025rem 0.025rem 2rem rgba(0, 0, 0, 0.7);
  }
  .nav--mobile ul {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .nav--mobile li {
    float: none;
    transition: opacity 0.3s;
    opacity: 0;
  }
	.nav--mobile a {
	padding: 0.5rem;
    margin: 0.5rem;
	}
	.nav--mobile span.active {
	padding: 0.5rem;
    margin: 0.5rem;
	}
  .nav--mobile span.trail {
   padding: 0.5rem;
   margin: 0.5rem;
  }
	/*=========================VERTIG HAMBURGER BUTTON =================*/
	
		
		
	
		#navigation li {
	 		display:block;	
			text-align:center;
			width:100%;	
		}
		
		#koepfchen_links1 {
			display:none;

		}

		#koepfchen_rechts1 {
			display:none;	
	
		}

}

@media screen and (min-width: 601px) {
  .nav-toggler {
    display: none;
  }
	.nav--mobile--active {
    max-height: 100%;
    transition: max-height 0s, background 0.3s;
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
  }
  .nav--mobile--active li {
    opacity: 1;
  }
}

.nav-toggler__button {
  background: none;
  border: 2px solid currentColor;
  outline: none;
  color: orange;
  padding: 0.25rem;
}