/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('_fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: 
       url('_fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('_fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('_fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('_fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('_fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('_fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: 
       url('_fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('_fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('_fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('_fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('_fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* eb-garamond-regular - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('_fonts/eb-garamond-v26-latin-regular.eot'); /* IE9 Compat Modes */
  src: 
       url('_fonts/eb-garamond-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('_fonts/eb-garamond-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('_fonts/eb-garamond-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('_fonts/eb-garamond-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('_fonts/eb-garamond-v26-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}




* {
	margin:0;
	padding:0;
}
img { border:0;border-style: none;}
html, body {
	margin:0;
	padding:0;
	height:100%;

	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	font-weight:400;
	color:#000000;
	font-size: 14px;
	line-height:25px;
}
body {
	background-color:#000000;
	background-image: url(gfx2021/hg.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position:50% 50%;
	background-attachment: fixed;
}
#container {
	min-height:100%;
	position:relative;
}

.hor {
	position:relative;
	margin:0 auto;
	text-align:left;
	max-width:1200px;
	clear:left;
	max-height:50000px;
}
.hor2 {
	position:relative;
	margin-left:5%;
	margin-right:5%;
	max-height:40000px;
}


#log {
	position:fixed;
	right:0px;
	bottom:0px;

	text-decoration: none;
	font-size: 12px;
	color: #ffffff;
	background-color:#000000;
	line-height:14px;
	padding:0px;
	padding-left:4px;
	padding-right:4px;
	z-index:50010;

}
.ku {
	white-space:nowrap;
}
/* -------------------------------------------------- */
.fotobreit {
	width:100%;
	height:auto;
}
.fotoleiste {
	width:100%;
	height:auto;
	line-height:0px;
	display:block;
}
.foto1 {
	max-width:700px;
	height:auto;
	width:80%;
	border-radius:10px;
	overflow:hidden;
}
/* -------------------------------------------------- */
.strich1 {
	position:relative;
	background-color:#db9b40;
	height:10px;
	height:5px;
}
/* -------------------------------------------------- */
#oben {
	position:relative;
	background-color:#000000;
	height:250px;
}

#logo {
	position:absolute;
	max-width:350px;
	height:auto;

	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	top:15px;
	line-height:0px;
}
#logo img {
	width:100%;
	height:auto;
}
/* -------------------------------------------------- */
#menue {
	position:relative;
	background-color:#db9b40;
	text-align:center;
	z-index:40000;
	font-size:20px;
	line-height:28px;
}
#menue_platzhalter {
	position:relative;
	height:37px;
	display:none;
}
#menue_ersatz {
	position:relative;
	background-color:#ffffff;
	height:2px;
	display:none;
}
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
.menue {
	display:inline-block;
	text-decoration:none;
	color:#ffffff;
	color:#000000;
	font-weight:600;
	padding-top:6px;
	padding-bottom:7px;
	padding-left:30px;
	padding-right:30px;
}
.menueaktiv {
	background-color:#ffffff;
	color:#000000;
}
.menue:hover {
	background-color:#ffffff;
	color:#000000;
}
/* -------------------------------------------------- */
/* -------------------------------------------------- */
#menuesymbol {
	position:fixed;
	right:10px;
	top:5px;
	width:60px;
	height:60px;
	background-repeat:no-repeat;
	background-size:contain;
	background-image: url(gfx2021/menuesymbol.png);
	cursor:pointer;
	display:none;
	z-index:40009;
}

@media all and (max-width:899px) {
	#menuesymbol {
		display:block;
	}
	#menue {
		display:none;
	}
	#menue_ersatz {
		display:block;
	}
}
@media all and (max-width:720px) {
	#logo {
		max-width:250px;
	}
	#oben {
		height:180px;
	}
}
/* -------------------------------------------------- */
.abstand {
	position:relative;
	height:0px;
	margin-top:0px;
}
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
#gmenue {
	position:fixed;
	right:0px;
	top:20px;
	width:360px;
	max-width:100%;
	height:100%;
	font-size:14px;

	line-height:24px;
	background-color:#ffffff;
	
	box-shadow: 0px 0px 30px #606060;
display:none;
	z-index:40019;
}
#gmenue_abstand {
	position:relative;
	height:20px;
	min-height:0px;
}
#gmenue_inhalt {
	position:relative;
	height:100%;
	overflow:auto;
}
#gmenue_inhalt1 {
	position:relative;
	margin:0 auto;
	width:90%;

	padding-bottom:20px;
}
#gmenue_x {
	position:relative;
	float:right;
	width:20px;
	height:20px;
	margin-bottom:0px;
}
#gmenue_x img {
	width:100%;
	height:100%;
}
#gmenue_x img:hover {
	opacity:0.5;
}
#gmenue p {
	color:#404040;
	font-weight:600;
	margin-bottom:10px;
	margin-top:20px;
}
/* -------------------------------------------------- */
/* -------------------------------------------------- */
.gmenue0,.gmenue0_aktiv {
	display:block;
	margin-right:20px;
	text-transform: uppercase;
	color:#404040;
	text-decoration:none;
}
.gmenue0:hover,.gmenue0_aktiv:hover {
	text-decoration:underline;
}
.gmenue0_aktiv {
	font-weight:600;
}
.gmenue_strich {
	position:relative;
	height:1px;
	background-color:#404040;
	margin-top:4px;
	margin-bottom:10px;
}
.gmenue_strich2 {
	position:relative;
	height:0px;
	border-top:1px dotted #404040;

}
/* -------------------------------------------------- */
.gmenue_wrapper {
	margin-left:18px;
	padding-top:0px;
	padding-bottom:16px;
	opacity:0;
	overflow:hidden;
display:none;
}

.gmenue1,.gmenue1_aktiv {
	position:relative;
	display:block;
	left:0px;
	padding-left:20px;
	padding-right:2px;
	line-height:34px;

	background-repeat:no-repeat;
	background-size:12px 12px;
	background-position:0px 11px;
	
}
.gmenue1_aktiv {
	font-weight:600;
}
.gmenue2,.gmenue2_aktiv {
	display:block;
	line-height:25px;
	padding-left:2px;
	padding-right:2px;
}
.gmenue2_aktiv {
	font-weight:600;
}

/* -------------------------------------------------- */
.gmenue1,.gmenue1_aktiv {
	text-decoration:none;
	color:#404040;
}
.gmenue1:hover,.gmenue1_aktiv:hover {
	background-color:#f0f0f0;
}


.gmenue2,.gmenue2_aktiv {
	text-decoration:none;
	color:#404040;
}
.gmenue2:hover,.gmenue2_aktiv:hover {
	background-color:#f0f0f0;
	color:#000000;
}
/* -------------------------------------------------- */
.ue1,.ue0 {
	font-family: 'EB Garamond', serif;
	font-weight:400;
	font-size:36px;
	line-height:42px;
	color:#db9b40;
	letter-spacing:2px;
	margin-bottom:24px;
	word-wrap:break-word;
}

.text0 {
	font-size:16px;
	line-height:24px;
	color:#ffffff;
	max-height:40000px;
}
.text0 a {
	color:#db9b40;
}
.text0 span {
	color:#db9b40;
	font-weight:600;
}
/* -------------------------------------------------- */
#person1 {
	position:relative;
	float:right;
	width:60%;
}
#person2 {
	position:relative;
	float:right;
	width:35%;
	margin-right:5%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
}
#person2 img {
	width:100%;
	height:auto;
}
/* -------------------------------------------------- */
#klavierstimmung1 {
	position:relative;
	float:left;
	width:60%;
	margin-right:5%;
}
#klavierstimmung2 {
	position:relative;
	float:left;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
}
#klavierstimmung2 img {
	width:100%;
	height:auto;
}
#klavierstimmung3 {
	position:relative;
	float:left;
	width:60%;
	margin-right:5%;
}
#klavierstimmung4 {
	position:relative;
	float:left;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
}
#klavierstimmung4 img {
	width:100%;
	height:auto;
}


#klavierstimmung5 {
	position:relative;
	float:left;
	width:60%;
	margin-right:5%;
}
#klavierstimmung6 {
	position:relative;
	float:left;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
}
#klavierstimmung6 img {
	width:100%;
	height:auto;
}
/* -------------------------------------------------- */
#intonation1 {
	position:relative;
	float:right;
	width:60%;
}
#intonation2 {
	position:relative;
	float:right;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
	margin-right:5%;
}
#intonation2 img {
	width:100%;
	height:auto;
}
#intonation3 {
	position:relative;
	float:right;
	width:60%;
}
#intonation4 {
	position:relative;
	float:right;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
	margin-right:5%;
}
#intonation4 img {
	width:100%;
	height:auto;
}
/* -------------------------------------------------- */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
.aufz {
	margin-left:20px;
	font-size:16px;
	line-height:24px;
	color:#ffffff;
}
.aufz li {
	border-bottom:1px dotted #000000;
	padding-top:10px;
	padding-bottom:10px;
}
/* -------------------------------------------------- */
#service1 {
	position:relative;
	float:left;
	width:60%;
	margin-right:5%;
}
#service2 {
	position:relative;
	float:left;
	width:35%;

}
#service2 img {
	display:inline-block;
	width:100%;
	height:auto;
	border-radius:10px;
	overflow:hidden;
}
/* -------------------------------------------------- */
#kontakt1 {
	position:relative;
	float:right;
	width:50%;
}
#kontakt2 {
	position:relative;
	float:right;
	width:35%;
	border-radius:10px;
	overflow:hidden;
	line-height:0px;
	margin-right:5%;
	margin-left:10%;
}
#kontakt2 img {
	width:100%;
	height:auto;
}
/* -------------------------------------------------- */
.farbig {
	position:relative;
	background-color:#db9b40;
}
/* -------------------------------------------------- */
@media all and (max-width:599px) {
	#person1,#klavierstimmung1,#klavierstimmung3,#klavierstimmung5,#intonation1,#intonation3,#service1,#kontakt1 {
		float:none;
		width:auto;
		margin-bottom:28px;
	}
	#person2,#klavierstimmung2,#klavierstimmung4,#klavierstimmung6,#intonation2,#intonation4,#service2,#kontakt2 {
		float:none;
		width:auto;
		margin-right:0px;
	}
	#intonation4 {
		padding-bottom:30px;
	}
	#kontakt1 {
		padding-top:30px;
	}
	#kontakt2 {
		margin-left:0px;
	}
	.farbig {
		padding-top:30px;
		padding-bottom:30px;
	}
}
/* -------------------------------------------------- */
#fl1,#fl3 {
	position:relative;
	line-height:0px;
	margin-left:5%;
	margin-right:5%;
	text-align:center;
}
#fl1 img,#fl3 img {
	width:25%;
	height:auto;
	border:1px solid #c0c0c0;
	margin:5px;
}
#fl1 a:hover > img {
	border:1px solid #000000;	
}
#fl2 a:hover > img {
	border:1px solid #000000;	
}
#fl3 a:hover > img {
	border:1px solid #000000;	
}
#fl4 a:hover > img {
	border:1px solid #000000;	
}
#fl2,#fl4 {
	position:relative;
	line-height:0px;
	margin-left:10%;
	margin-right:10%;
	text-align:center;
}
#fl2 img,#fl4 img {
	width:10%;
	height:auto;
	border:1px solid #c0c0c0;
	margin:5px;
}
@media all and (max-width:960px) {
	#fl1,#fl3 {
		margin-left:1%;
		margin-right:1%;
	}
	#fl2,#fl4 {
		margin-left:1%;
		margin-right:1%;
	}
	#fl1 img {
		width:30%;
	}
	#fl3 img {
		width:30%;
	}
}