@charset "UTF-8";
* {margin:0px; padding:0px;}



h1{ font-family: 'Qwigley', "Helvetica Neue", Helvetica, Arial,"sans-serif"; font-size: 90px; font-weight: 500; color:#ffffff; letter-spacing: 0.03em;line-height:1.1em;}
h2{ font-family: Garamond,Times New Roman,'Qwigley', "Helvetica Neue", Helvetica, Arial,"sans-serif"; font-size: 80px; font-weight: 300; color:#ffffff; margin: 0px 10px 150px 0;letter-spacing: 0.02em;line-height:1em;}
h3{ font-family: Dejavu sans,"Helvetica Neue", Helvetica, Arial,"sans-serif"; font-size: 30px; color:#FEF9E5; margin: 0px 10px 50px 0;line-height:1.2em;font-weight: 600}
h4{ font-family: Garamond,Times New Roman,'Qwigley', "Helvetica Neue", Helvetica, Arial,"sans-serif"; font-size: 65px; color:#ffffff; margin: 20px 10px 55px 0;font-weight:200; letter-spacing: 0.04em;line-height:1.2em;}

h5{	font-size: 36px; color: #ffffff;	margin: 50px 10px 80px 10px;	padding-top: 5px;font-weight:300;line-height: 1.2em;}
h6{	font-size: 24px;color: #ffffff; 	margin: 20px 0 10px 0px;	font-weight:300;line-height: 1.2em;}
h7{	font-size: 14px; color: #ffffff;	margin: 20px 0;	font-weight:500;}

a:link, a:visited{font-style:normal;font-weight:900;color: #D5D5D5;text-decoration: none;font-size:1.00em;}
a:hover {font-style:normal;text-decoration: none; color: #FFE695;}
 
img{width: 100%;}

#backpicture{background-image: url("../gfx/trauermusik_hg.jpg"); top:0; background-position: center; background-repeat: no-repeat;position: fixed;background-color:#000000 ;width: 100%; height:100vH; background-position: center bottom; background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: -10;}

body{text-align: left;	font-family: Dejavu Sans,"Helvetica Neue", Helvetica, Arial,"sans-serif"; font-weight: 100; line-height: 1.5em; font-size: 22px; letter-spacing: 0.06em; color:#ffffff; }

#sound_01 { width:100%;}
#hoerprobe {margin:20px 5px}
#konzert-left {width: 40%; float: left;margin-top:10px;margin-right:3%; text-align: left;line-hight: 0.3em;}
#konzert-right {width: 57%; float: right;margin-top:0px;text-align: left;margin-right:0%}


#head{width: 100%; position:fixed;bottom:0;background-color:#132613; height:130px;z-index: 3;}

#navbox { text-align: left; display:block; min-height:30px; margin:-2px 0 0 0; }


#navbox #nav .menu {text-decoration: none;float: left;margin-left:5px;position:relative;display: block;}
#navbox #nav .menu UL {text-align: left;list-style: none; display: block;}	
#navbox #nav .menu li {display: inline;}
#navbox #nav .menu A, #nav .menu A:visited {float: left;font-size:45px;color:#ffffff;font-style:normal;font-weight:600;text-decoration:none; margin: 0 0 180px 50px;}
#navbox #nav .menu A:hover, #nav .menu A:focus {text-decoration:underline;color: #FFE695;}


#navbox #nav ul ul {display: block;list-style: none; text-align: left; position: absolute; background-color: #fff; top: 45px;left:50px; z-index: -1;  min-width:180px;padding:10px 5px 15px 5px;border-radius: 11px;}


#start{min-height: 100vH;text-align: center;}
#starthead {text-align: left; margin: 200px auto 0 auto;width:65%;overflow:visible;padding-left: 25%;}
#starttext { font-family: Dejavu Sans,"Helvetica Neue", Helvetica, Arial,"sans-serif"; font-weight: 400; line-height: 1.5em; font-size: 26px; letter-spacing: 0.06em;  margin-left:10%; Width: 80%; margin-top: 100px;}


#container{width: 100%; }


#contend {background-color: #000000;opacity: 0.95; background-image: url("../gfx/stein_hg_repead.jpg"); background-position: center top; background-size:100% auto; background-repeat: repeat;
	width: 76%; margin-left:5%; margin-top:80px;text-align: left;padding:10% 7%;border: 0.5px solid #ffffff; border-radius: 35px; }
#contend span{font-weight: 500;letter-spacing: 0.02em;font-size:1.01em;color:#FEF9E5; margin-left:4px; margin-right: 6px;}
.special{font-size:1.5em; color:#014f6d; font-weight:600;}


#picture-r img{width: 42%; height: auto;float:right; margin:-5% -4% 3% 4%; border: 0px solid #ffffff; border-radius: 15px;}
#picture-l img{width: 40%; height: auto;float:left; margin: -3% 3% 1% 0%;border: 0px solid #ffffff; border-radius: 15px;}

#picture-musiker {width: 100%; height: auto; margin:260px 0; }
#picture-musiker img{width: 35%; height: auto;float:left; margin: -5% 5% 4% -3%; border: 0px solid #ffffff; border-radius: 15px;}
 
.table_box {margin: 40px 0 20px 0;width:100%;padding-top: 40px;}
.line {margin-top:10px;margin-left: 60px;width: 550px;}
.aktuell-left {float:left;width:40%;}
.aktuell-right {float:left;width:60%;}


#lines {text-align:left; border-top: 1px solid #ffffff;	border-bottom: 1px solid #ffffff;padding-top: 10px;margin-top: 30px;padding-bottom: 10px;margin-bottom: 30px;padding-left:12px;}
#lines a{color: #ffffff; font-size:12pt;}
#lines a:hover {color: #FFE695;}
.kleintext{font-size:smaller;line-height:normal;}

#band {Text-align:right; Padding: 45vH 5% 5vH 0; background-image: url("../gfx/hg_band_sw.jpg"); background-size: 100% auto; background-position: right top; background-repeat: no-repeat; background-color: #000000;}





#impressum{padding:0 0 5px 0;text-align:right;font-size:10px;width:99%;position:fixed; bottom:0; display: block;}
#impressum a{font-size:12px; color:#C7C7C7;	font-style:oblique;	text-decoration: none; font-weight:normal;}
#impressum a:hover{color:#FFE695;}


#downloadlink a{font-size:14px;}
#down a{text-decoration:underline;}

#sound_01 { width:100%;}
#filmclip{float:left;width:30%;min-height:150px;margin-right:3%;margin-bottom:50px;}
.elastic-video {position: relative;padding-bottom: 55%;padding-top: 15px;height: 0;overflow: hidden;}
.elastic-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


#galerie { margin: 20px 8px 40px 8px;}
#galerie ul {margin-bottom: 30px; margin-left: 0;}
#galerie ul li {display:inline; float:left; width: 17%;margin-bottom: 14px;margin-right: 3%;}
	
#galerie ul img {border: 1px solid #fff;padding: 2% 2%;}
#galerie ul img:link, #gallery ul img:visited {border: 1px solid #330033; }	
#galerie ul img:hover {border: 1px solid #112233; }



.image {margin-bottom:10px;}


#mobile-nav,#mobile-nav-switch{display:none;}

#lightbox-container-image-box{max-width:1000px !important;height:auto !important;}	
#lightbox-container-image-data-box{	max-width:1000px !important;	padding:0px !important;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext{ height:100% !important;}

#contend-box {width: 80%; margin: 200px auto;}


@media only screen and (min-width: 1900px) {
	h1{font-size: 120px;}
	#starthead {text-align: left; margin: 150px auto 0 auto;width:65%;overflow:visible;padding-left: 25%;}


}
	


@media only screen and (max-width: 900px) {
	
#backpicture{background-image: url("../gfx/trauermusik_hg_mobile_02.jpg");}
	
	
#start{min-height: 100vH;text-align: center;padding-top:90px;}
#start{}
	
#starthead {text-align: left; margin: 100px auto 0 auto;width:93%;overflow:visible;padding-left: 5%;}
#starttext {text-align: left; margin: 10px auto;width:85%;overflow:visible; font-family: Dejavu Sans,"Helvetica Neue", Helvetica, Arial,"sans-serif"; font-weight: 400; line-height: 1.5em; font-size: 22px; letter-spacing: 0.06em;  margin-left:10%; margin-top: 100px;}	
	

	
	#navbox{display:none;}
	#mobile-nav-switch{	display:block;	position:fixed;	 cursor: pointer; position: top right;	background:  url(../gfx/nav.svg) no-repeat center right; background-size:80px ; height: 66px;width: 95%;	z-index:220;}
	#mobile-nav-container{	opacity: 0.95;margin:0px 0px 8px 0;	width: 60%;	background-color:#10160E; position:absolute; top:58px;z-index:200;margin-left:40%; }
	#mobile-nav{ border-top:0px solid #fff;border-bottom:0px solid #fff;margin-top:7px;list-style-type:none;		display:none;z-index:210;padding-bottom:100px; padding-top:50px;	}
	#mobile-nav li{	list-style-type:none;text-align:right; padding-right:15%;}
	#mobile-nav a{	display:block;	width:100%;	 height:80px;	text-decoration:none; color:#fff;	font-weight:300;  font-size:26px;}	
	
	
	#head{width: 100%; position:fixed;top:0; height: 65px;z-index: 210;}
	
h1{ font-size: 80px; }
	h2{ font-size: 70px; color:#ffffff; margin: 0px 10px 50px 0;}
h3{ font-size: 30px; color:#ffffff; margin: 0px 10px 50px 0;}
h4{ font-size: 45px; color:#ffffff; margin: 20px 10px 25px 0;}
	
	#contend {padding-top:80px;margin-top:100px;}
	
#picture-r img{width: 45%; height: auto;float:right; margin: -1% 2% 2% 3%; border: 0px solid #ffffff; border-radius: 5px;}
#picture-l img{width: 50%; height: auto;float:left; margin: -3% 3% 1% 0%;border: 0px solid #ffffff; border-radius: 5px;}

#picture-musiker {width: 100%; height: auto; margin:100px 0;}
#picture-musiker img{width: 50%; height: auto;float:left; margin: -5% 3% 1% -3%%;border: 0px solid #ffffff; border-radius: 10px;}
#impressum{display:none; }
.aktuell-right {margin-left:0;}

	#hoerprobe {margin:80px 0px 180px 0px}
	#konzert-left {width: 100%; float: none;margin-top:10px;margin-right:3%;  text-align: left;line-hight: 0.3em;}
#konzert-right {width: 100%; float:none;margin-top:0px;text-align: left;margin-right:0%; margin-bottom: 50px;}


	}


	
	
	
@media only screen and (max-width: 630px) {
	
	#contend {background-color: #000000;opacity: 0.95; background-image: url("../gfx/stein_hg_02.jpg"); background-position: center top; background-size:115% 100% ; background-repeat: no-repeat;
	width: 80%; margin-left:2%; margin-top:80px;text-align: left;padding:10% 7%;border: 0.5px solid #ffffff; border-radius: 15px; }
	
	#starttext {margin: 20px auto;width:85%;}
	
	h1{ font-size: 70px; }
		h2{ font-size: 70px; color:#ffffff; margin: 0px 10px 100px 0;}
h3{ font-size: 24px; color:#ffffff; margin: 0px 10px 100px 0;}
h4{ font-size: 60px; color:#ffffff; margin: 0px 10px 25px 0;}
	

.aktuell-left {float:none;width:100%;margin-bottom:15px;}
.aktuell-right {float:none;width:80%;margin-left:20%;}
	
	#picture-musiker {width: 100%; height: auto; margin:100px 0;}
#picture-musiker img{width: 100%; height: auto;float:none; margin: 0%;border: 0px solid #ffffff; border-radius: 10px;}
	#picture-r img{width: 100%; height: auto;float:none; margin:-30px 0 80px 0; border: 0px solid #ffffff; border-radius: 5px;}
	
	
}
	
@media only screen and (max-width: 511px) {
	h1{ font-size: 70px; }

	

#picture-musiker {width: 100%; height: auto; margin:50px 0;}
#picture-musiker img{width: 100%; height: auto;float:none; margin: 0 0 50px 0; border: 0px solid #ffffff; border-radius: 15px;}
	
	
}

	
@media only screen and (max-width: 480px) {
	h1{ font-size: 60px; }
	h2{ font-size: 50px; }
	h4{ font-size: 50px; }
}






/* qwigley-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/qwigley-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/qwigley-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/qwigley-v18-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/qwigley-v18-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/qwigley-v18-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/qwigley-v18-latin-regular.svg#Qwigley') format('svg'); /* Legacy iOS */
}