/* Klassik am Odeonsplatz */
/* Ronny Engmann - 03.03.2010 */




.facebook {position:absolute; left:0px; top:0px;}



/*Layout - Positionierung */
html {height:100.2%;}
html body {height:100.2%;}
body {margin:auto 0; background:#326a8b url(/pix/bg.jpg) 0 0 repeat-x; color:#fff; font-family:arial, sans-serif; font-size:12px; width:100%;line-height:17px;}
body.extrafenster {margin:10px; background:none; background-color:#11366a; color:#dfdfdf; font-size:14px; width:640px;}
body.extrafenster h1 {margin-top:24px; color:#f0c030;  font-size:24px; line-height:24px; font-weight:normal;}

.center {float:left; text-align:center !important; width:100%;}
.links {float:left;}
.rechts {float:right;}

a {color:#00d8ff; text-decoration:none; outline:0;}
a:hover {text-decoration:none; outline:0;}
a.weiss {color:#fff;}

.clear {clear:both; font-size:0; height:0; line-height:0; margin:0; padding:0;}
.einrueckung {margin-left:250px;}
.ticker {position:absolute; left:315px; top:439px; width:300px;}

.ticker .divider {background:url(/pix/icons/menu_divider.png) center 6px no-repeat; padding:0; margin:0;}

/* Kopf */
.kopf {clear:all; float:left; max-width:920px; margin:7px 0 60px 0; padding:0;position: relative;z-index: 99;}
.kopf .rechts {color:#4b788b; font-size:11px;}
.kopf .rechts a {color:#fff; text-decoration:none;}
.kopf .logo {clear:all; float:left; margin:20px 0 8px 0; padding:0 0 44px 0; border-bottom:1px solid #5a8296;}
.kopf .logo img {
	max-width: 100% !important;
}

.logoresp {
	display: none;
}

.proevents-logo {margin-left:416px;}

.kopf .nav {font-family:FuturaStdBook, arial, sans-serif; background:url(/pix/bg_header.png) 0 0; /*max-width:900px*/; padding:6px 10px 4px 10px !important; letter-spacing:0.01em;  margin:0; text-align:center; font-size:15px;box-sizing: border-box;}


.googlemaps {position: relative; padding-bottom: 56%; height: 0; overflow: hidden;}
.googlemaps iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}




.kopf .nav a {color:#fff; padding:0 11px 0 11px; margin:0; text-decoration:none;}
.safari .kopf .nav a {padding:-2px 11px 0 11px; text-decoration:none;}
.ff2 .kopf .nav a {margin:10px 0 0 0; text-decoration:none;}
.kopf .nav a:hover, .kopf .nav a:active {color:#00d8fd !important; text-decoration:none;}
.kopf .nav a.aktiv {color:#00d8fd; font-weight:bold; text-decoration:none;}

#startseite .kopf .nav a.startseite,  
#konzerte .kopf .nav a.konzerte,
#impressionen .kopf .nav a.impressionen, 
#presse .kopf .nav a.presse, 
#konzertpaten .kopf .nav a.konzertpaten,
#kontakt .kopf .rechts a.kontakt,
#faq .kopf .nav a.faq,
#ticketbestellung .kopf .nav a.ticketbestellung {color:#00d8fd;}

.kopf .nav a.wetterinfo, #wetterinfo .kopf .nav a.wetterinfo {color:#fff44f !important;}
#wetterinfo .kopf .nav a.wetterinfo:hover {color:#fff !important;}


#menu {}

/* Header */
h1 {margin:0; color:#f0c030; font-size:24px; line-height:24px; font-weight:normal;}
h2 {font-family:FuturaStdBook, arial, sans-serif;  font-weight:normal;  margin:0 0 10px 0; font-size:20px; line-height:24px; padding:0 0 8px 0; border-bottom:1px solid #5a8296; text-transform:uppercase; color:#fff; text-align:left !important;}
.ie8 h2 {font-family:FuturaStdBook, arial, sans-serif; font-size:24px; line-height:24px;}
.ff4 h2 {font-family:FuturaStdBook, arial, sans-serif; font-size:24px; line-height:24px;}
h3 {font-family:FuturaStdBook, arial, sans-serif; font-weight:normal; letter-spacing:1px; background:url(/pix/bg_header.png) 0 0; margin:4px 0 14px 0; font-size:15px; padding:5px; color:#fff; }
.ie6 h3 {background:#1d5978 0 0;}
.presse_mitte h3, .presse_rechts h3 {background:none !important; font-family:FuturaStdBook, arial, sans-serif; font-weight:normal; letter-spacing:1px;  margin:4px 0 14px 0; font-size:15px; padding:0; color:#fff;}

h4 {font-weight:normal; font-size:14px; margin:0; padding:0;}

h1.nomargin {color:#f0c030; font-size:24px; font-weight:normal; margin:0 0 20px 0 !important; padding:0 0 0 250px;}
h2.nomargin {color:#f0c030; font-size:14px; font-weight:bold; margin:0 0 20px 0 !important; padding:0 0 0 250px;}

.layout {clear:all;  padding:0; position:relative;}

/* Content  */
.content { margin:0; padding:0; max-width:920px; position:relative; margin: auto; max-width:920px;}

.wrapper {clear:all; margin:0 0 0px 0;}
.wrapper img {margin:0 0 6px 0;max-width: 100%;}
.nomargin {margin:0 !important;}

/* Spalten  */
.spalte_links {float:left; margin:0; padding:0; max-width:920px;}
.spalte_rechts {float:left; margin:0; padding:10px; width:300px;}
a.mehr {background:url(/pix/icons/linkpfeil.png) no-repeat right 4px; font-weight:bold;padding:0 10px 0 0;}
.spalte_links .links {float:left; width:320px; margin:0 40px 0 0;}
.spalte_links .rechts {float:left; width:520px; margin:0 0 0 0;}

a.pdf {background:url(/pix/icons/pdf.png) no-repeat 0 0; font-weight:bold;padding:0 0 0 15px;}

#startseite .content .startseite_links {float:left; width:66%; margin:0 0px 0 0;}
#startseite .content .startseite_links .links {float:left; width:48%; margin:0 4% 0 0 !important;}
#startseite .content .startseite_links .rechts {float:left; width:48%; margin:0;}
#startseite .content .startseite_rechts {float:right; width:31%; margin:0 0 0 2%;}
#startseite .content .startseite_rechts .wrapper { margin:0 0 0px 0;}

#konzerttag-1 {margin:0 0 10px 0; position:absolute;width: 100% !important}
#konzerttag-1 img {position:absolute; left:0; top:0;width: 100% !important;height: auto !important}
#konzerttag-2 {margin:0 0 10px 0; position:absolute;width: 100% !important}
#konzerttag-2 img {position:absolute; left:0; top:0;width: 100% !important;height: auto !important;}
#pressestimmen {margin:0 0 10px 0; position: relative; text-align:center;}
#pressestimmen img {position:absolute; left:0; top:0;}
#pressestimmen div {text-align:left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; max-width:200px; line-height:15px; font-size:15px;}
#pressestimmen div i {font-weight:normal;}

#konzerte .content .konzerte_links {clear:all; float:left; width:48%; margin:0 0px 0 0;}
#konzerte .content .konzerte_rechts {float:right; width:48%; margin:0;}
#konzerte .content .kasten_links {background:url(/pix/bg_header.png) 0 0 no-repeat; clear:all; float:left;  padding:19px 23px 19px 23px; margin:0 0 27px 0; width:100%;  line-height:17px; font-size:12px;box-sizing: border-box;}
.ie6 #konzerte .content .kasten_links  {background:#1d5978 0 0;}
#konzerte .content .kasten_rechts {/*background:url(/pix/bg_programm_rechts.png) 0 bottom  no-repeat */; clear:all; float:left;  padding:19px 23px 19px 23px; margin:0 0 27px 0; width:100%;  line-height:17px;font-size:12px;box-sizing: border-box;}
.ie6 #konzerte .content .kasten_rechts  {background:#1d5978 0 0;}
#konzerte .content .kasten_links h3, #konzerte .content .kasten_rechts h3 {background:0 none; padding:0;}
#konzerte .content .kasten_links .links, 
#konzerte .content .kasten_rechts .links {float:left; width:45%;padding-right: 20px;box-sizing: border-box;}
#konzerte .content .kasten_links .rechts, 
#konzerte .content .kasten_rechts .rechts {float:right; position:relative; border-left:1px solid #5a8296; margin:0 0 0 0px; width:55%; padding-left:20px; height:250px; box-sizing: border-box;}


#impressionen .content .impressionen_links {clear:all; float:left; width:66%; margin:0 0px 0 0;}
#impressionen .content .impressionen_links a {width: 31%;margin-right: 2%;display: block;float: left;}
#impressionen .content .impressionen_links img {max-width: 100%;}
.impressionen_rechts .wrapper div {
	width: 100% !important;
}

#impressionen .content .impressionen_rechts {float:right; width:31%; margin:0;}
#impressionen .content #pressestimmen {background:#256080;}

#presse .content .presse_links {clear:all; float:left; width:32%; margin:0 2% 0 0;}
#presse .content .presse_mitte {float:left; width:32%; margin:0 2% 0 0;}
#presse .content .presse_rechts {float:right; width:32%; margin:0;}
#presse .content h4 {margin: 0; font-size:13px;}
#presse .content h4 a {color:#00d8ff; text-decoration: none;}

#presse .content .presse_links .wrapper {
	margin-bottom: 40px;
}

.inhalt h4 a {font-weight:bold;}

#presse .content .presseinfo span {display:block;}
#presse .content .contact {margin:30px 0 0;}
#presse .content .press {clear:all; float:left; margin:0 0 29px 0; padding:0;}
#presse .content .press img {border: none;}
#presse .content .press .float {float:left; margin:0 17px 0 0; width:75px;}
#presse .content .presse_links .press .inhalt, #presse .content .presse_rechts .press .inhalt {float:left; margin:0;}
#presse .content .presse_mitte .press .inhalt {float:left; margin:0;}

#konzertpaten .content .konzertpaten_links {clear:all; float:left; width:32%; margin:0 2% 0 0; text-align:center;}
#konzertpaten .content .konzertpaten_mitte {float:left; width:32%; margin:0 2% 0 0; text-align:center;}
#konzertpaten .content .konzertpaten_rechts {float:right; width:32%; margin:0; text-align:center;}
#konzertpaten .content .wrapper {margin:0;padding: 20px;box-sizing: border-box;}
#konzertpaten .content .wrapper .imgwrap {margin:0 0 30px 0;}

#konzertpaten .content .wrapper .imgwrap img {
	max-width: 100%;
}

#konzertpaten .content .wrapper {background:url(/pix/bg_header.png) 0 0; clear:all; float:left; margin:0; padding:20px; width:100%;box-sizing: border-box;}
.ie6 #konzertpaten .content .wrapper  {background:#1d5978 0 0;}
#kontakt .content .kontakt_links {clear:all; float:left; width:48%; margin:0 0px 0 0;}
#kontakt .content .kontakt_rechts {float:right; width:48%; margin:0;}

#ticketbestellung .content .ticketbestellung_links {clear:all; float:left; width:32%; margin:0 2% 0 0;}
#ticketbestellung .content .ticketbestellung_mitte {float:left; width:32%; margin:0 2% 0 0;}

#ticketbestellung .content .ticketbestellung_links img,
#ticketbestellung .content .ticketbestellung_mitte img {
	max-width: 100%;
}


#faq .content .faq_links {clear:all; float:left; width:32%; margin:0 2% 0 0;}
#faq .content .faq_mitte {float:left; width:32%; margin:0 2% 0 0;}

#faq .content .faq_links img,
#faq .content .faq_mitte img {
  max-width: 100%;
}


.bild_links {float:left; margin:0 21px 21px 0;}
.bild {float:left; margin:20px 0 20px 0;}
.bild img {
	max-width: 100%;1
}
.abstand_rechts {margin-right:18px;}

/*Inhalt - Presseseite/Kontaktseite */

/*Inhalt - Footer */
.footer {clear:both; color:#b2b2b2; background:#000; padding:25px 25px 25px 25px; width:100%; margin:0;box-sizing: border-box;}
.footercontent {
	max-width: 920px; margin: auto;1
}
.footer a {text-decoration:none; color:#b2b2b2;}
.footer .foerderer {float:left; padding:0;}
.footer .partnerlogos {margin:30px 0 30px 0;}
.footer .partnerlogos img {border:0; vertical-align:middle;}
.footer .partnerlogos a {margin:0 25px 0 0; border:0;}
.tor {float:left; text-align:center !important; width:100%; margin:100px 0 -5px 0;}
.ie7 .tor {margin-bottom:-4px;}
.ie8 .tor {margin-bottom:-4px;}
 

.kopf .aktionsbanner {position:absolute; left:0px; top:0px;}
.kopf .rabatt {position:absolute; left:0px; top:258px;}
.kopf .kao20jahre {position:absolute; left:700px; top:300px;}
.kopf .kao20jahre img {width:100px;}

.wetterschaden {background:#082d5d; filter:alpha(opacity=90);opacity:.90; color:#fff; font-size:11px; line-height:17px; margin:0; padding:21px 18px; position:absolute; left:0; top:250px; width:681px;}
.wetterschaden span {font-weight:bold; font-size:12px;}

.hr {background:#5a8296; clear:left; height:1px; margin:7px 0 7px 0; padding:0;}
.hr hr {display:none;}

ul {list-style-type:none; margin:0; padding:0;}
ul.unten {position:absolute; bottom:0px;}

ul.liste {list-style-type:disc; margin-bottom:10px;}
ul.liste li {margin-left:10px;}

#wrapper {width: 600px;}
.accordionButton {width: 60px; float: left; _float: none;  /* Float works in all browsers but IE6 */ cursor: pointer; font-weight:bold;padding:0 10px 0 0; color:#00d8ff; background:url(/pix/icons/linkpfeil.png) no-repeat 58px 4px; margin:0 0 10px 0;}
.accordionContent {width: 600px; float: left; _float: none; /* Float works in all browsers but IE6 */}


.round-button {position:absolute; right:25px; bottom:60px; width:150px;}
.round-button-circle {padding-bottom:100%; border-radius: 50%; overflow:hidden; background: #fff44f; -webkit-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px -7px rgba(0,0,0,0.75);}
.round-button a {position:absolute; left:0; top:65px; text-align:center;color:#206f8b;font-size:13px;font-weight:bold;text-decoration:none;}


.gelber-stoerer {background:#fff381; color:#000; padding:20px; margin-bottom:20px; /*margin-top:43px;*/}
.gelber-stoerer h2, .gelber-stoerer a {color:#000; border:none;}



/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/
.on {background:url(/pix/icons/linkpfeil_runter.png) no-repeat 58px 4px;}
.over {}

/* --- */

.print {position:absolute; top:-1000px; left:-1000px;}
.pixcaption {font-size: 11px;}

.cookie-law .cookiebanner {
    display: block;
}

.cookiebanner {
    display: none;
    background-color: #000;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 90;
}

.cookiebanner > div {
    width: 100%;
    text-align:center;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
 
    @media (max-width: 768px) {
        display: block;
    }
}

.cookiebanner p {
    color: #fff;
    box-sizing: border-box;
    @media (max-width: 768px) {
        width: 100%;
    }
}






/* whmedia.it */


#nav-main {
	
}

#nav-main ul {
	padding: 0px;
	margin: 0px;
	text-align: center;
}

#nav-main li {
	display: inline-block;
}

#nav-main li:after,
#nav-main li.first:before {
	content: "・";
}


#nav-trigger {
  display: none;
  text-align: center; }
  #nav-trigger span {
    display: inline-block;
    padding: 10px 30px;
    background-color: #0F5D7B;
    color: white;
    cursor: pointer;
    text-transform: uppercase; }
    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      position: relative;
      top: 10px;
      width:1px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #fff;
      border-right: solid 10px transparent; }
    #nav-trigger span:hover {
      background-color: #003F58; }
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; 
      position: relative;
      top: 0px;
      
      }

nav {
  margin-bottom: 30px; }

nav#nav-main {
  background-color: #0F5D7B;
  padding: 10px 0; }
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;
    border-right: solid 1px #cc0028;
    padding: 0 5px; }
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    display: block;
    color: white;
    padding: 10px 30px; }
    nav#nav-main a:hover {
      background-color: #003F58;
      color: #fff; }

div#nav-mobile {
  position: relative;
  display: none; }
  div#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #0F5D7B;
    border: solid 1px #003F58;
    text-transform: uppercase;
    
     }
  div#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #003F58; }
    div#nav-mobile li:last-child {
      border-bottom: none; }
  div#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px; }
    div#nav-mobile a:hover {
      background-color: #003F58;
      color: #fff; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 800px) {
  #nav-trigger {
    display: block; }

  #nav-main {
    display: none; }

  div#nav-mobile {
    display: block; }
    
   .kopf {
	   margin-bottom: 10px;
   } 
   
   .kopf .logo img,
   .bild img, .aktionsbanner img {
		width: 100%;
	}
	
  .kopf .rabatt {position:relative; left:0px; top:258px;} 

.kopf .kao20jahre {display:none;}

.footer .partnerlogos .proevents-logo {margin-left:0 !important;} 


.kopf .facebook img {width:50%; height:50%;}
    
}




@media all and (max-width: 920px) { 

	.content {
		margin-left: 5%;
		margin-right: 5%;
	}

.kopf .rabatt {position:absolute; left:-10px; top:60px; }  

.kopf .kao20jahre {display:none;}
 
.ticker {position:relative; left:0; top:0; width:100%;margin: 20px 0px;}

.footer .partnerlogos .proevents-logo {margin-left:0 !important;}


}


@media all and (max-width: 700px) { 
	
	.logoresp {
		display: block !important;
	}
	
	.logodesk {
		display: none !important;
	}

	#startseite .content .startseite_links,
	#startseite .content .startseite_rechts,
	#startseite .content .startseite_links .links,
	#startseite .content .startseite_links .rechts,
	#konzerte .content .konzerte_links,
	#konzerte .content .konzerte_rechts,
	#impressionen .content .impressionen_links,
	#impressionen .content .impressionen_rechts,
	#presse .content .presse_links,
	#presse .content .presse_mitte,
	#presse .content .presse_rechts,
	#konzertpaten .content .konzertpaten_links,
	#konzertpaten .content .konzertpaten_rechts,
	#konzertpaten .content .konzertpaten_mitte,
	#kontakt .content .kontakt_links,
	#kontakt .content .kontakt_rechts,
  #faq .content .faq_links,
  #faq .content  .faq_mitte
   {
		width: 100% !important;
		float: none !important;
		clear: both !important;
		margin-right: 0px !important;
		margin-left: 0px !important;
		margin-bottom: 30px !important;
	}

	
	#ticketbestellung .content .ticketbestellung_links {
		width: 50% !important;
		float: left !important;
		margin-right: 0px !important;
	}
	#ticketbestellung .content .ticketbestellung_mitte {
		width: 50% !important;
		float: right !important;
		margin-right: 0px  !important;
	}
	
  #faq .faq_links {
    width: 50% !important;
    float: left !important;
    margin-right: 0px !important;
  }
  #faq .faq_mitte {
    width: 50% !important;
    float: right !important;
    margin-right: 0px  !important;
  }

	#impressionen .content .impressionen_links h3,
	#presse .content .presse_rechts h2 {
		margin-top: 60px !important;
		clear: both;
	
	}
	
	.kopf .logo {
		margin-top: 0px !important;
		padding-bottom: 10px !important;
	}
	
	#konzerte .content .kasten_links
 {
    height: auto !important;
  }

	#konzerte .content .kasten_rechts {
		height: auto !important; 
	}
	
	.tor {
		margin-top: 20px;
	}
	
.kopf .rabatt {position:absolute; left:0px; top:160px;}
.kopf .rabatt img {max-width: 60%;}

.footer .partnerlogos .proevents-logo {margin-left:0 !important;}


}