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



h1{	font-size: 46px; margin: 200px 10px 100px 10px;	padding-top: 5px;border-top: 5px 100% solid #1b1b1c;font-weight:800;}
h2 {font-size: 36px;font-weight:800;line-height: 1.2em;margin-bottom:50px;}
h3 {font-size: 26px;font-weight:500;line-height: 1.2em;letter-spacing:}
h4 {font-size: 26px;font-weight:800;line-height: 1.2em;letter-spacing: 0.04em;}
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: 50px 10px 80px 10px;	padding-top: 5px;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:normal;color: #ffffff;text-decoration: none;}
a:hover {font-style:normal;text-decoration: none; color: #FF71FD;}
 
img{width: 100%;}

body{text-align: left;	font-family: 'Lato', "Helvetica Neue", Helvetica, Arial,"sans-serif"; "Helvetica", "Myriad Pro"; 	font-weight: 300; line-height: 1.5em; font-size: 20px; letter-spacing: 0.02em; height: 100vH;	color: #ffffff; background-image: url("../gfx/hg1.jpg"); background-position: center 160px ; background-size: 150vW auto; background-repeat: no-repeat;background-attachment: fixed;background-color:#005B93;}

#head{width: 100%; position:fixed;top:0;background-color:#ffffff;height: 180px;z-index: 3;}

#navbox { text-align: right; float:right; display:block; min-height:40px; margin:110px 5% 0 0; text-align:left;}
#erchanalogo {float: left; height:170px; margin: 5px 0 0 5%; width: 170px;background-image: url("../gfx/logo_erchana_orchester_s.png");background-size: 170px auto ; background-position: center; background-repeat: no-repeat; }

#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:22px;color:#000000;font-style:normal;font-weight:500;text-decoration:none;padding: 15px 0 6px 60px;}
#navbox #nav .menu A:hover, #nav .menu A:focus {color: #016C9A;}


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

/*     submenu navigation links      */
#navbox #nav .submenu { opacity:0; visibility: hidden; height: 0;  z-index: 1; } 
#navbox #nav .submenu li {float: none; background-size:0;	min-width:150px;  margin:8px 5px; background-color: none; height: 40px;  display: block;  /* width: 15em; */}
#navbox #nav .submenu li a{ background-size:0; background-color:none; border-width: 0;width:auto;font-size:18px;padding: 4px 20px 2px 15px;color: #002645;}
 
/**     Show the submenu on hover, focus     **/#navbox #nav li:hover .submenu,#nav li:active .submenu, #nav li:focus .submenu{  visibility: visible; height: auto;animation: 1s fadeIn;animation-fill-mode: forwards;} 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}


#startmenue {text-align: center;z-index: 100;}
.button { background-color: #37658D; border: 2px solid #003862; color: #ffffff; padding: 10px 40px; text-align: center; text-decoration: none; display: inline-block;
  margin: 4px 10px; cursor: pointer; border-radius: 22px;opacity: 0.8; font-size:18px;}
.button:hover { background-color: #f1f1f1; color: #0C245B;}
.button:hover a{ color: #0C245B;font-weight: 300;}

#container{width: 100%; }
#space-grey {background-color:#c0c8d0;height:60px;width: 100%;}

#image-start{margin-bottom:80px;height: 75vH;padding-top: 10vH ;}
#image-orchester{background-image: url("../gfx/hg4.jpg");background-size: 200% auto; background-position: center top; background-repeat: no-repeat;}
#contend-start { padding: 20vH 10% 0 10% ;width:80%; text-align: center;}
#contend-box  {width: 70%; margin: 0 auto; padding: 40px 0;}
#contend {width: 85%; margin-left:15%; margin-top:80px;text-align: left;}

#contend-left {width: 58%; float: left;margin-top:50px;text-align: left;}
#contend-right {width: 35%; float: right;margin-top:50px;text-align: left;}

#konzert-left {width: 40%; float: left;margin-top:50px;text-align: left;}
#konzert-right {width: 40%; float: right;margin-top:50px;text-align: left;margin-right:10%}

#image-blue{background-color: #002645;}
#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;}


#impressum{padding:10px 0 20px 0;text-align:center;font-size:14px;width:100%; }
#impressum a{font-size:14px; color:#C7C7C7;	font-style:oblique;	text-decoration: none; font-weight:bold;}
#impressum a:hover{color:#FF71FD;}


#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;}



@media only screen and (max-width: 1000px) {
h1{	font-size: 42px; margin: 120px 10px 100px 10px;	padding-top: 5px;border-top: 5px 100% solid #1b1b1c;font-weight:800;}
h2 {font-size: 30px;font-weight:800;line-height: 1.2em;margin-bottom:50px;}
#erchanalogo {float: left; height:170px; margin: 5px 0 0 15px; width: 170px;background-image: url("../gfx/logo_erchana_orchester_s.png");background-size: 170px auto ; background-position: center; background-repeat: no-repeat; }
#contend-box  {width: 90%; margin: 0 auto; padding: 40px 0;}
#navbox #nav .menu A, #nav .menu A:visited {float: left;font-size:22px;color:#000000;font-style:normal;font-weight:500;text-decoration:none;padding: 15px 0 6px 38px;}
#lightbox-container-image-box{	max-width:95% !important;height:auto !important;	}	
#lightbox-container-image-data-box{	max-width:95% !important; padding:0px !important;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext{ height:100% !important;}
	
}

@media only screen and (max-width: 850px) {

	
	
	#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: 70px;width: 90%;	z-index:199;	}
	
	#mobile-nav-container{	margin:0px 0px 8px 40%;	width: 70%;	background-color: #00588E; position:relative; top:92px;z-index:200; }
	#mobile-nav{	border-top:1px solid #fff;border-bottom:1px solid #fff;margin-top:7px;list-style-type:none;		display:none;z-index:105;padding-bottom:500px; padding-top:50px;	}
	#mobile-nav li{	list-style-type:none;text-align:right; padding-right:25%;}
	#mobile-nav a{	display:block;	width:95%;	 height:80px;	text-decoration:none; color:#fff;	font-weight:500;  font-size:22px;}	
	#erchanalogo {float: left; height:100px; margin: 2px 0 0 20px; width: 100px;background-image: url("../gfx/logo_erchana_orchester_s.png");background-size: 100px auto ; background-position: center; background-repeat: no-repeat; }
	
	body{text-align: left;	font-family: 'Lato', "Helvetica Neue", Helvetica, Arial,"sans-serif"; "Helvetica", "Myriad Pro"; 	font-weight: 300; line-height: 1.5em; font-size: 18px; letter-spacing: 0.02em; height: 100vH;	color: #ffffff; background-image: url("../gfx/hg_mobile.jpg"); background-position: center 100px ; background-size: auto 400%; background-repeat: no-repeat;background-attachment: fixed;}

	
	#head{width: 100%; position:fixed;top:0;background-color:#ffffff;height: 100px;z-index:150;}
	#container{width: 100%;padding-top: 0px;}
	#contend-start { padding-top: 10vH ;}
#contend-box  {width: 90%; margin: 0 auto; padding: 40px 0;}
#contend {width: 85%; margin-left:15%; margin-top:80px;text-align: left;}
		
	h1{	font-size: 36px; margin: 60px 10px 40px 10px;	padding-top: 5px;border-top: 5px 100% solid #1b1b1c;font-weight:800;}
h2 {font-size: 24px;font-weight:800;line-height: 1.2em;margin-bottom:50px;}
	h5{	font-size: 32px; color: #ffffff;	margin: 50px 10px 40px 10px;	padding-top: 5px;font-weight:300;line-height: 1.2em;}
h6{	font-size: 20px;color: #ffffff; 	margin: 30px 10px 40px 10px;	padding-top: 5px;font-weight:300;line-height: 1.2em;}
	
#galerie ul li {display:inline; float:left; width:28%;margin-bottom: 14px;margin-right: 5%;}
	}
	
	
@media only screen and (max-width: 550px) {
	#contend-left {width: 80%; float: none;margin-top:50px;text-align: left;}
#contend-right {width: 80%; float:none;margin-top:20px;text-align: left;}

#konzert-left {width: 100%; float: none;margin-top:50px;text-align: left;}
#konzert-right {width: 100%; float: none; margin-top:20px;text-align: left; margin-right:10%}
	
		h1{	font-size: 28px; margin: 60px 10px 40px 10px;	padding-top: 5px;border-top: 5px 100% solid #1b1b1c;font-weight:800;}
h2 {font-size: 24px;font-weight:800;line-height: 1.2em;margin-bottom:50px;}
h3 {font-size: 22px;font-weight:500;line-height: 1.2em;letter-spacing:}
h4 {font-size: 22px;font-weight:800;line-height: 1.2em;letter-spacing: 0.04em;}
		h5{	font-size: 24px; }
h6{	font-size: 18px;}
	
		#contend-start { padding-top: 8vH ;}
	

#galerie ul li {display:inline; float:left; width:45%;margin-bottom: 14px;margin-right: 5%;}

}


@media only screen and (max-width: 98px) {
#topleft{width:380px;min-height:118px;padding-top:115px;}
#topright{ width:175px;text-alight:right;height:233px;background-image: url(../gfx/david_ingram_233x175.jpg);}
h1{		font-size: 60px;padding-top:40px;}
#topleft a:link {font-size: 60px;padding-top:40px;}



	

	
	
	/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/lato-v14-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
       url('../fonts/lato-v14-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-300italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lato-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Italic'), local('Lato-Italic'),
       url('../fonts/lato-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold'), local('Lato-Bold'),
       url('../fonts/lato-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-700italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/lato-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
       url('../fonts/lato-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-700italic.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/lato-v14-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Lato Black'), local('Lato-Black'),
       url('../fonts/lato-v14-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-900italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/lato-v14-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local('Lato Black Italic'), local('Lato-BlackItalic'),
       url('../fonts/lato-v14-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v14-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v14-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v14-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v14-latin-900italic.svg#Lato') format('svg'); /* Legacy iOS */
}