*
{
	font-family: 'Roboto Flex', sans-serif;
	/*font-family:  arial, sans-serif;*/
}


html,body
{
	scroll-behavior: smooth;
	height:100%;
	box-sizing: border-box;
}

body 
{
	background:black;
	color:white;
	margin:25px;
}


a
{
	_color:#1be225;
	color:white;
	text-decoration:none;
}

p a
{
	color:#1be225;
	_color:white;
	text-decoration:none;
}

hr
{
	color: white;
	
}

#top hr
{
	margin-left: 50px;
}

.navipunkt
{	
	font-size: 124%;
	padding: 8px;	
	padding-left: 15px;	
	padding-right: 15px;
	border: solid 1.5px white;	
	background:#000000;
}

/* letzte border in der Navi löschen */
#last_navi
{
	_border-right:none;
	border-radius:  0px 20px 20px 0px;
	_border-radius: 50px 20px;
}

#first_navi
{
	border-radius:  20px 0px 0px 20px;
}

.navipunkt:hover
{
	background:#1be225;
	cursor: pointer;
	color: black;
	transition:0.3s;
}

.navipunkt:hover a
{
	color: black;
}

#navi
{
	/* Scroll-Navi - sichtbar wenn nach unten gescrollt wird */
	_width: 95%;
	margin: auto;
	color: white;
	display:flex;
	justify-content: center;
}

.fadeshow
{
	_display:flex;
	margin: 5px;
	z-index: 0;
}

#fadeshowTop
{
	display: flex;
}

#top 
{
	display:flex;
	justify-content: center;
	_width: 85%;
	
}

.hi
{
	_border: solid 1.5px white;	
	width: 180px;
	margin-left: 50px;
	margin-right:200px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.hi h1
{
	_line-height: 0,9;
	margin-top: 5px;
	margin-bottom: 5px;
}

#about_text
{
	margin-top: 75px;
	_width: 85%;
	_margin: auto;
}

#about
{
	width: 85%;
	margin:auto;
	margin-bottom: 300px;
}



.button
{	
	font-size: 124%;
	padding: 8px;
	padding-left: 15px;	
	padding-right: 15px;
	border: solid 1.5px white;	
	border-radius:  20px 20px 20px 20px;
	background-color: #000000;
}

.btn
{
	margin:auto;
}

.button:hover
{
	background:#1be225;
	cursor: pointer;
	color: black;
	transition:0.4s;
}

.button:hover a
{
	color: black;
}

.vorschau .button 
{
	margin: 0px 0px 0px 0px;
}

.vorschau2 .button 
{
	margin: 0px 0px 0px 0px;
}

#portfolio
{
	margin-top: 100px;
	margin-bottom: 100px;
}



.vorschau
{
	margin-top: 150px ;
	display: flex;
}

.vorschau2
{
	margin-top: 150px ;
	display: flex;
}

.Beitrag .vorschau, .Beitrag .vorschau2
{
	margin-top: 30px;
}

/*top-margin bug-fix*/
.vorschau h1, .vorschau2 h1, .vorschau h2, .vorschau2 h2
{
	padding-top: 0px;
	margin-top: 0px;
}

#fadeshow1
{
	border: solid 1.5px white;
}

.Bildunterschrift
{
	max-width: 718px;
}



/* generic */
.flex
{
	display:flex;
	
}

.margin_top
{
	margin-top: 100px;
}

.margin-left
{
	margin-left: 100px;
}

.margin-right
{
	margin-right: 40px;
}

.margin_auto
{
	margin: auto;
}

.white_bg
{
	background-color: #ffffff;
}

/* ^generic^ */
.fixed_navi
{
	z-index: 700;
	
		width: 95%;
		position: fixed;
		left: 50%;
		top: 50px;
		transform: translate(-50%, -50%);
	
}

#footer
{	
	display:flex;
	justify-content: space-between;
	margin-bottom: 50px;
	padding-top: 50px;
	padding-left: 50px;
	padding-right: 50px;
	border-top: solid 1.5px white;
}



#mySidenav, #mobile-button
{
	display:none;
}

.img_reihe
{
	margin-right: 50px;
}

.img_reihe2
{
	margin-right: 50px;
	margin-top: 30px;
	max-width: 45%;
	object-fit: contain;
}

.img_reihe3
{
	margin-right: 40px;
	margin-top: 30px;
	max-width: 28%;
	object-fit: contain;
}

/* MEDIA QUERY */
@media screen and (max-width:1450px) 
{
	body 
	{
		_background:rgb(207, 11, 11);
		color:white;
		margin:5px;
	}

	.vorschau
	{
		display: block;
	}

	.vorschau2
	{
		position:relative;
		display:block;
	}

	.vorschau2 h1, .vorschau2 h2
	{
		padding-top: 420px;
	}
	.vorschau h1, .vorschau h2
	{
		padding-top: 20px;
	}

	.vorschau h2, .vorschau2 h2
	{
		margin-top: 20px;
	}

	.vorschau2 img
	{
		position:absolute;
		top:0;
	}

	#about
	{
		width: 90%;
		margin:auto;
		margin-bottom: 300px;
	}
	
	.margin-left
	{
		margin-left: 0px;
	}

	.img_reihe
	{
		margin-right:50px;
	}
}

@media screen and (max-width:1000px) 
{
	body 
	{
	_background:rgb(11, 80, 207);
	color:white;
	margin:5px;
	}

	#about
	{
		width: 92%;
	}
	
	#fadeshow2
	{
		display: none;
	}

	.hi
	{
		margin-right:20px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	img
	{
		max-width:100%;
		height:auto;
	}

	.vorschau, .vorschau2
	{
		margin-top: 100px ;
	}

	.img_reihe
	{
		max-width:22%;
		height:auto;
		margin-right: 30px;
	}
}

@media screen and (max-width:640px) 
{
	body 
	{
	_background:rgb(0, 124, 56);
	color:white;
	margin-left: 0px;
	margin-top: 55px;
	}

	#about
	{
		width:90%;
		
	}

	#top 
	{
		display:block;
		_justify-content: space-between;
		_width: 85%;
	}

	#fadeshow2
	{
		display: flex;
	}

	#fadeshowTop
	{
		justify-content: center;
		margin-bottom: 35px;
	}

	#top hr 
	{
		border:1px solid #000000;
		margin-top: 30px;
	}

	.hi
	{
		
		width: auto;
		margin-left: 0px;
		margin-right:0px;
		margin-top: 5px;
		margin-bottom: 0px;
	}

	#top .button 
	{
		display:flex;
		margin:0px,0px,0px,0px;
	}

	.flex
	{
		display: block;
		justify-content: flex-end;
		_border: solid 1.5px white;	
	}

	.img_reihe2
	{
		margin-right: 0px;
		margin-top: 30px;
		max-width: 100%;
	}

	.img_reihe3
	{
		margin-right: 0px;
		margin-top: 30px;
		max-width: 100%;
	}

	#top2 hr
	{
		margin-left: 0px;
	}

	img
	{
		max-width:100%;
		height:auto;
	}

	.vorschau img, .vorschau2 img
	{
		height: 250px;
		width: auto;
	}
	
	.vorschau2 h1, .vorschau2 h2
	{
		padding-top: 280px;
	}

	#navi
	{
		
		width: 100%;
		background: black;
		color: white;
		display:block;
		justify-content: center;
		display:none;
	}

	#first_navi
	{
		border-radius:  20px 20px 0px 0px;
	}

	#last_navi
	{
		
		border-radius:  0px 0px 20px 20px;
	}

	#portfolio
	{
		margin-top: 75px;
		margin-bottom: 75px;
	}

	.vorschau, .vorschau2
	{
		margin-top: 75px ;
	}


	/*sidenav Start*/
	#mySidenav
	{
		display:block;
	}

	#mobile-button
	{
		display:block;
		position:fixed;
		_border-bottom: #1be225 1.5px solid;
		background:#000000;
		top:0px;
		width: 100%;
		z-index: 500;
		padding-left: 20px;
		padding-bottom: 1px;
		box-shadow:	
			0 0 0 2px hsl(118, 94%, 6%),
   			0 0 0 3px hsl(118, 96%, 18%),
			0 0 0 4px hsl(118, 100%, 50%),
			0 0 17px 10px hsl(0, 0%, 0%);

	}

	.sidenav 
	{
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: -1px;
		background-color: rgb(0, 0, 0);
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		border-right: #061b07 1.5px solid;
	}

	.sidenav > a 
	{
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #1be225;
		display: block;
		transition: 0.3s;
	}

	.sidenav > a:hover 
	{
		color: #ffffff;
	}

	.sidenav .closebtn 
	{
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}
	/*sidenav Ende*/
	.img_reihe
	{
		max-width: 45%;
		margin-right: 15px;
	}
}

@media screen and (max-width:440px) 
{
		body 
		{
			_background:rgb(0, 0, 0);
		}

		#fadeshow2
		{
			display:none;
		}

		.vorschau img, .vorschau2 img
		{
			height: 210px;
			width: auto;
		}

		#mobile-button
		{	
			padding-left:10px;
		}

		.img_reihe
		{
			max-width: 40%;
		}
}