/* CSS Document */
/* ============================================= */
/* Copyright Alexandra Fischer, 2017 Melchior Imboden */
/* ============================================= */

html, body {
	height: 100%;
	min-height: 100%; 
	padding: 0;
	margin: 0;
	
}



#bildInfos {
	background: #000000;
	
}





div {
	box-sizing: border-box;
}

body {
	background:#FFFFFF;
	background-size:cover;
	background-attachment:fixed;
	font-family: 'Abel', Calibri, Verdana, sans-serif;
	box-sizing: border-box; 
	/*margin-top:100px;*/
	
}

#navibereich {
	background-color:#fff;
	/*position:fixed;
	top:0;
	left:0;
	width:100%;*/
	text-decoration: none;
	color: black;
	height: 10%;
	padding: 20px;
	
}

#logobereich {
	float:left;
	width: 200px;
}

/*Hauptnavigation*/
#haupt_navi  {
	float:right;
}

#haupt_navi ul {
	margin: 0px;
	padding: 0px;	
}

#haupt_navi ul li {
	display:inline-block;
	padding: 15px;
}
	
#haupt_navi ul li a {
	text-decoration: none;
	color:#6F6F6F;
	font-size: 1.25rem;

}



/* mobile Navigation */
	
#hamburger_navi{
	display:none;
	width: 100%;
	float: left;
	}

#hamburger_navi .fa-bars {
	
	font-size: 2rem;
	position: absolute;
	right: 20px;
	top: 20px;
}


#hamburger_navi ul {
	margin: 0px;
	padding: 0px;
}
#hamburger_navi ul li {
	display:inline-block;
	margin-right: 15px;
}
#hamburger_navi ul li a {
		text-decoration: none;
	color:#6F6F6F;
	font-size: 1.25rem;
}




.clearfix {
	clear:both;
}


/*
.bildbox div:hover {
	opacity:0;
    transition: opacity 1s ease;
	-webkit-transition: opacity 1s ease;}
*/

.poster_container {
		padding:10px;
		border:#FF0004;

}

.poster {
	float: left;
	padding:0px;
	width: 16.66666%;
	height: calc(16vw * 1.4);
	overflow: hidden;
	box-sizing: border-box;
	position:relative;
		
}

.fotografie{
	float: left;
	padding:0px;
	width: 33.3%;
	height: calc(16vw * 1.4);
	overflow: hidden;
	box-sizing: border-box;
	position:relative;
	border:#FF0004;
	margin: 0;
	
}

.fotografie_text{
	background-color: rgba(0,0,0,0.6);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;;
	padding:20px;
	color:#fff;
	font-size: 15px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	display:none;
	
	
	
}
.fotografie_text p {
}
.fotografie_text:hover{
	/*visibility:visible !important;*/
}




.poster_text{
	background-color: rgba(0,0,0,0.6);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;;
	padding:20px;
	color:#fff;
	font-size: 15px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	display:none;
		/*visibility:hidden;*/
	
	
}

.poster_text p {
}
.poster_text:hover{
	/*visibility:visible !important;*/
}

.themenbilder {
	
	float: right;
	width: 20%;
	display: table-cell;
	
	

	
}

.fotografie_titel{
	float: left;
	padding:0px;
	width: 33%;
	height: calc(16vw * 1.4);
	overflow: hidden;
	box-sizing: border-box;
	position:relative;
	
	
}



#textbereich {
	padding: 10px;
	max-width: 960px;
	margin: 0 auto;
}

#biografie {
	max-width: 960px;
	margin: 0 auto;
	margin-bottom: 100px;
}



.youtube iframe, .srf iframe {
	width: 100%;
}

.lead {
	font-size: 30px;
}

	
img {
	width:100%;
}	



#fussbereich {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color:rgba(255,255,255,0.8);
width:100%;
text-align: center;
	
	

}





/*
	#hamburger_navi a {
		display:block; 
		border-top:1px solid #000000; 
		float: left;
        color:#000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	}
	#hamburger_navi a:hover {
		color:#fff;
	}
	#hamburger_navi a:last-child {
		border-bottom:1px solid #0f0;
		margin-bottom:5px;
	}
	#hamburger_navi .fa-bars {
		font-size:2em;
	}*/


/* ================= MEDIA QUERIES =============== */
/* ================= MEDIA QUERIES =============== */
/* ================= MEDIA QUERIES =============== */

 @media screen and (min-width: 1100px) {

#logobereich {

	width: 350px;
	
}
	 #haupt_navi ul {
	margin-top: 25px;
}

}



@media screen and (max-width:1080px) {
	
	
	#textbereich img {
	width:100%;}
	


.poster {
	width: 16.66666%;
	height: calc(16vw * 1.4);
}
	
	
	/*#logobereich{
		width: 20%;
		
	}*/
	
	
	}




@media screen and (max-width:960px) {
	
	
	#textbereich img {
	width:100%;}
	


.poster {
	width: 33.3333%;
	height: calc(16vw * 2.6);
}
	.fotografie {
	width: 33.3333%;
	height: calc(16vw * 2.6);
}
	
	
	/*#logobereich{
		width: 50%;
		
	}*/
	
	#hamburger_navi{
			display:block; /* einblenden */
		}
	#haupt_navi{
			display:none; /* ausblenden */
		}
	
	
}





@media screen and (max-width:600px){
	
	
#logobereich{
	/*width: 80%;
	position: fixed;*/
				
	}
	
/*#navibereich{
	position: fixed;}*/
	
#textbereich img {
	width:100%;}

.poster {
	width: 100%;
	height: 100%;
		
}

.fotografie {
	width: 100%;
	height: 100%;
		
}
	
	
		#hamburger_navi{
			display:block; /* einblenden */
		}
	
	#haupt_navi{
			display:none; /* ausblenden */
		}
	
	#hamburger_navi ul li {
	display: block;
}
	
	
	}