/* latin */
@font-face {
  font-family: 'Noto Sans';
  src: url("noto-sans.woff2");
}

@font-face {
  font-family: 'Gotu';
  src: url("gotu.woff2");
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('material-icons.woff2') format('woff2');

}  
  
@font-face {
  font-family: 'GothicExpanded';
  font-style: normal;
  font-weight: 400;
  src: url('SpecialGothicExpandedOne-Regular.ttf') format('truetype');

}  






*
{
margin: 0;
padding: 0;
border: none;
outline: none;
}

body {
background-color: rgba(70, 73, 86, 1);
}






/*height:clamp(56px, 5vw, 100px);*/

nav {position: fixed; background-color: rgba(0, 0, 0, 0); height:auto; width:100%; top:20px; right:0px; left:0px; z-index:6; transition: all 1s;
display:flex; justify-content: center; align-items:center; align-content:space-around; 


}
.scrolled {background-color: rgba(70, 73, 86, 0.9); transition: all 1s; top:2px;}


header {position: relative;    top: 0;    left: 0;    width: 100vw;    height: 100vh;  object-fit:cover; display:flex; justify-content: center; align-items:center; }
section {position:relative;   padding:20px;  display:block;   z-index:3;
font-family: 'Noto Sans'; font-weight: normal; font-style:normal; hyphens: auto; color:#444;


}

main {
border:thick double #444;
width:90vw;
margin:0 auto;
background:#fff;
padding:20px;
margin-top:-30px;
box-sizing:border-box;
font-family: 'Noto Sans'; font-weight: normal; font-style:normal; hyphens: auto;
font-size:18px;
}

main ul {margin-left:50px;}
main he, main h2, main h3 { font-family: 'GothicExpanded'; margin-top:20px;}


aside {	height: calc(100vh - 150px); margin-top:120px;	display:flex;	justify-content : center; align-items:flex-start; flex-direction:column; }
footer {position:relative; width:100vw; background-color: rgba(70, 73, 86, 1);}


video {
object-fit: cover;
height: 100vh;
width: 100vw;
z-index: -9999;
position: absolute;
top: 0;
left: 0;
}

#muteButton {position:fixed; cursor:pointer; right:20px; bottom:50vh;}


#logo {position: sticky; background-color: rgba(70, 73, 86, 0.8);  z-index:5; max-width:600px; text-align:center; border-radius:12px; padding:12px;


}
#logo i {display:block; font-size:clamp(10px, 3vw, 40px);   font-family: 'Noto Sans'; font-weight: normal; font-style:normal; hyphens: auto; color:#eee;}
#logo b {display:block; color:rgba(255,174,56,1); font-size:clamp(40px, 7vw, 120px); 
  font-family: 'GothicExpanded';
hyphens: auto;

}



/* Material Icons */
.materialfest {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #e3e3e3;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(200,200,200,0.5); transform: rotate(360deg);}


.material {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #e3e3e3;
}




.materialbutton {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 50px;
  color:#fff;

 margin:0 auto;
	transition:all 2s;
	width:60px;
	height:60px;
	overflow:hidden;
	display:flex;
	justify-content : center;
	
}
.materialbutton:hover {
	background:#245C18;
	transition:all 1s;
	
}



/* ~~~~~~~~ Datenschutz und Impressum ~~~~~~~~ */

#datenschutztext,#impressumtext{
	position:fixed;
	overflow:auto;
	background: rgba(0,0,0,0.6);
	color:#ebba8a;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

 


#datenschutztext p,#impressumtext p{color:#fefefe;}
#datenschutztext h1,#impressumtext h1{color:#fefefe;}
#datenschutztext h2,#impressumtext h2{color:#fefefe;}
#datenschutztext a, #impressumtext a{text-decoration:none; color:#fefefe;}
#datenschutztext:hover,#impressumtext:hover{background: rgba(0,0,0,0.95);}
#datenschutztext:target,#impressumtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}

@media screen and (max-width: 800px) {
	#datenschutztext:target,#impressumtext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}
}



/* ~~~~~~~~~~~~~~~~~~~~ figure in section ~~~~~~~~~~~~~~~~~~~~~~~~ */
section {display:flex; justify-content:center; align-content:space-around; ;align-items:flex-start; flex-wrap:wrap; width:100%;}

		
		
		
		section figure
		{
		display: flex;
		flex-direction:column;			
		justify-content : flex-start;
		align-items : flex-start;
		overflow:hidden;
		margin:10px;
		text-align:left;
		width: 380px;
		height: 560px;
		text-decoration:none;
		border: 1px solid #ccc;
		border-radius: 2px;
		position: relative;
		background:#f3f3f3;
		transition: 0.8s all;

		}

	section figure:hover
		{
		border: 1px solid #000;
		background: #ccc;
		transition: 0.8s all;
		}
	section figure:hover img
		{
				transform: scale(1.3);
				filter: brightness(50%);
		transition: 1.5s all;
		overflow:hidden;
		}
		
		section figure p
		{
		display: block;
		width: auto;
		overflow:hidden;
		margin:0 12px 0 12px;
		}
		
		section figure p:nth-child(1)
		{
		margin:0 0 0 0;
		width:100%;
		}
		
		section figure h3
		{
		margin:12px;
		}		

		section figure p img
		{
		display: block;
		width: 100%;
	height: 280px;
	object-fit:cover;
			transition: 1.5s all;

		}