/* _____ Allgemein __________________________________________________ */


html		{	font-size: 100%;
			margin: 0;
			padding: 0;
		}


body		{	margin: 0;
			padding: 0; 
			background: linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3)), url("../img/background.jpg");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center 35%;
			background-size: cover;

		}


section		{	box-sizing: border-box;
			width: calc(100% - 20vw);
			margin: 0 10vw;

		}


.left		{	text-align: left;	}
.right		{	text-align: right;	}
.center		{	text-align: center;	}




/* _____ Section Aboutme __________________________________________________ */


#aboutme 	{	position: absolute;
			background-color: rgba(255,255,255,0.75);
			top: 50%;
			/*margin: 0;*/
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			padding: 10vh 5vw;
			/*border-radius: 2rem;*/
		}

#aboutme .wrapper	{	display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			column-gap: 0px;
			width: 100%;
			padding: 0;
			margin: 0;
	 	}

#hello		{	order: 1;
			box-sizing: border-box;
			width: 70%;
			margin-right: 5%;
		}

#container-right	{	margin-right: 0px;
			margin-left: auto;
			text-align: center;
		}

#inner-container	{	display: inline-block;
			box-sizing: border-box;
		}

#hello h1		{	font-family: 'Fira Sans', sans-serif;
			font-weight: 900;
			font-size: 3.125rem;
			line-height: 125%;
			text-transform: uppercase;
			letter-spacing: 0.125rem;
			text-align: center;
			color: rgb(0,0,0);
			margin: 0;
			margin: 1.5rem -1rem 0.5rem -1rem;
			padding: 0px;
		}

#hello h2		{	font-family: 'EB Garamond', serif;
			font-weight: 500;
			font-style:italic;
			font-size: 1.5rem;
			line-height: 115%;
			text-align: center;
			color: rgb(0,0,0);
			margin: 0 2rem;
			padding: 0;
		}


#hello ul		{	text-indent: 0px;
			text-align: center;
			padding: 0;
			margin: 3.125rem 0 0 0;
		}

#hello li		{	display: inline-block;
			list-style-type: none;
			margin: 0 0.75rem;
			overflow: hidden;
		}

#hello a.sociallink	{	display: inline-block;
			width: 3.875rem;
			height: 3.875rem;
			overflow: hidden;
			margin: 0;
			padding: 0.25rem;
			background-color: rgb(255,255,255);
			border: 0.2rem solid rgb(0,0,0);
			border-radius: 50%;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 80%;
			color: rgba(255,255,255,0);
			font-size: 0.5rem;
			text-indent: -10000px;
		}

.email		{	background-image: url('../img/icon_email.svg'); }
.facebook	{	background-image: url('../img/icon_facebook.svg'); }
.instagram	{	background-image: url('../img/icon_instagram.svg'); }
.twitter		{	background-image: url('../img/icon_twitter.svg'); }
.website		{	background-image: url('../img/icon_website.svg'); }




#logo		{	order: 2;
			box-sizing: border-box;
			width: 30%;
			padding-left: 0.625rem;
		}

#container-left	{	width: 100%;
			max-width: 23.4375rem;
			padding: 0;
			margin: 0;
			border: 0rem solid rgb(255,255,255);
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			overflow: hidden;
		}

#logo-ak		{	display: block;
			box-sizing: border-box;
			width: 100%;
			height: 0;
			padding-bottom: 100%;
			margin: 0;
			background-color: rgb(255,255,255);
			background-image: url("../img/kleinjung_logo.svg");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 70%;
		}




/* _____ Mobile Devices __________________________________________________ */



@media only screen

	and (orientation: portrait) {

		body		{	background-position: center top;
					background-size: 100vh;
				}

		section		{	box-sizing: border-box;
					/*width: 100vw;*/
					/*height: 100vh;*/
					/*margin: 0;*/
				}


		#aboutme		{	padding: 2rem 3rem;	}

		#aboutme .wrapper	{	display: block;	}

		#hello		{	width: 100%; margin-top: 0px; 	}

		#logo		{	width: 70%;
					margin-left: auto;
					margin-right: auto;
				}

		#container-left	{	margin: 0 auto; text-align: center;	}
	

		#container-right	{	margin: 0px; text-align: center ;	}
		.location		{	display: inline-block;
					line-height: 2.1875rem !important;
				}

		#inner-container	{	margin: 40px auto 0px auto; }

		#hello h1		{	font-size: 2rem;	}

		.fam-name	{	display: inline-block;
					font-size: 3.5rem;
					line-height: 120%;
				}

		#hello h2		{	font-size: 1.75rem;		}
}

@media only screen

	and (orientation: portrait) and (max-device-width: 400px) {

		#hello a.sociallink	{	width: 3.5rem;
					height: 3.5rem;
					padding: 0.15rem;
				}
}

@media only screen

	and (orientation: portrait) and (min-device-width: 767px) {

		#aboutme		{	padding: 3rem 3rem;	}

		#hello h1		{	font-size: 3.5rem;	 }
}



@media only screen

	and (orientation: landscape) and (max-device-width: 767px) {

		section		{	width: calc(100% - 10vw);
					margin: 0 5vw;
					background-color:green;
				}

		#hello		{	width: 70%;	}

		#logo		{	width: 30%;
					margin-left: auto;
					margin-right: auto;
				}

		#logo-ak		{	background-size: 70%;	}

		#inner-container	{	margin-right: 3rem;		}

		#hello		{	margin-right: 2%;		}

		#hello h1		{	font-size: 2.25rem !important;
					line-height: 2.25rem;
				}

		#hello h2		{	font-size: 1.4rem;
					line-height: 110%;
				}

		#hello ul		{	margin-top: 2rem;	}

		#hello li		{	margin: 0 0.5rem;	}


		#hello a.sociallink	{	width: 3.5rem;
					height: 3.5rem;
					padding: 0.15rem;
				}



}

@media only screen

	and (max-width: 1100px) {


}




@media only screen

	and (orientation: portrait) {




}