/* Abridged version of Normalize.css
   ========================================================================== */
/* original authors: Nicolas Gallagher and Jonathan Neal - http://necolas.github.com/normalize.css/ */

/* corrects block display not defined in IE7-9, Firefox3 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/* corrects inline-block display not defined in IE7-9, Firefox3 */
audio,
canvas,
video {
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
}

/* prevents modern browsers from displaying 'audio' without controls, remove excess height in iOS5 devices */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* addresses styling for 'hidden' attribute not present in IE7-9, Firefox3, Safari4 */
[hidden] {
  display: none;
}

html {
  /* corrects text resizing oddly in IE7 when body font-size is set using em units -
     http://clagnut.com/blog/348/#c790 */
  font-size: 100%;
  /* always force scrollbar padding so we don't get 'jumping' */
  overflow-y: scroll;
  /* prevents iOS text size adjust after orientation change, without disabling user zoom -
     http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
  -webkit-text-size-adjust: 100%;
  /* as above, for Windows Phone */
  -ms-text-size-adjust: 100%;
}

/* Addresses margins set differently in IE7 */
p,
pre {
  margin: 1em 0;
}

/* addresses style set to 'bolder' in Firefox3-4, Safari4-5, Chrome */
b,
strong {
  font-family: itc-officina-sans-pro, sans-serif; font-weight: 500; font-style: normal; 
}

/* addresses CSS quotes not supported in IE7, addresses quote property not supported in Safari4 */
q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

/* prevents sub and sup affecting line-height in all browsers */
sub,
sup {
  /* 12px */
  font-size: .85714285714286em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* removes border when inside 'a' element in IE7-9, Firefox3, improves image quality when scaled in IE7 -
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* consistent tables */
table {
  margin-bottom: 1em;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* make table cells align top and left by default */
th,
td {
  vertical-align: top;
  text-align: left;
}

/* addresses margins set differently in IE7 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 2em;
}

/* remove margins from nested lists */
dl dl,
ul ul,
ol ol {
  margin: 0;
}

/* addresses paddings set differently in IE7 */
menu,
ol,
ul {
  padding: 0 0 0 2em;
}


/* Clearfix
   ========================================================================== */
/* updated to prevent margin-collapsing on child elements in most situations -
   http://nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix,
header,
nav ul,
.container,
footer,
#paginator,
#monthly-list {
  /* zoom IE7 fix */
  *zoom: 1;
}

.clearfix:before,
.clearfix:after,
header:before,
header:after,
nav ul:before,
nav ul:after,
.container:before,
.container:after,
footer:before,
footer:after,
#paginator:before,
#paginator:after,
#monthly-list:before,
#monthly-list:after {
  content: "";
  display: table;
}

.clearfix:after,
header:after,
nav ul:after,
.container:after,
footer:after,
#paginator:after,
#monthly-list:after {
  clear: both;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

* { margin: 0px ; padding: 0px ; }
body { font-size: 1.2rem; color: #bddef3; background: #1f97d0; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; font-family: itc-officina-sans-pro, sans-serif; font-weight: 400; font-style: normal; }

#thegreatwrapper { position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#stripe_blue { position: relative; margin-top: 1.5rem; background: #04447d; width: 100%; height: auto; z-index: 9; }
#welle_1 { position: fixed; bottom: 0; width: 100%; z-index: 7; }
#welle_2 { position: fixed; bottom: 0; width: 100%; z-index: 10; }
#welle_1 img, #welle_2 img { position: absolute; bottom: 0; width: 100%; }
#welle_1_b { display: none; }
#fisch { display: none; }
#welle_1_c { display: none; }
#copyright { position: absolute; bottom: 10px; right: 20px; font-size: 0.9rem; z-index: 11; }

#content_main { position: absolute; top: 0; left: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#navi, #navi_mobile { display: block; margin-left: 0px; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }
#navi ul, #navi_mobile ul { margin: 0 0 0 10%; padding-top: 8px; padding-bottom: 5px; width: 80%; font-size: 1.2rem; line-height: 1.8rem; }
#navi ul a:link, a:visited, a.visted, #navi_mobile ul a:link, a:visited, a.visted { color: #bddef3; }
#navi ul a:hover, a:active, a.active, #navi_mobile ul a:hover, a:active, a.active { color: #1f97d0; }
ul { list-style: none; padding: 0; color: #bddef3; }
ul li { display: inline; line-height: 1.5rem; padding: 5px 20px 6px 5px; }
ul li.navi_last { padding-right: 10px; }
ul a { text-decoration: none; margin-bottom: 3px; white-space: nowrap; overflow: hidden; }
#navi_mobile_zwei ul { padding-top: 8px; padding-bottom: 5px; font-size: 1.1rem; }
#navi_mobile_zwei ul li { line-height: 1.3rem; }

#navi_mobile { display: none; }

#content { position: relative; display: block; width: 860px; margin-top: 3rem; margin-left: 10%; margin-bottom: 10rem; padding-left: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 8; }
#content div.title { margin-top: 3rem; }
div#content div.title:first-of-type { margin-top: 0; }
div#content div#teaser_1024 + div.title { margin-top: 0; }
.text p { line-height: 1.7rem; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; }
.image_top { list-style: none; width: 100%; margin-top: 1.5rem; }
.image_top img { width: 100%; height: auto; }
.image_top_choere { list-style: none; width: 100%; margin-top: 1.5rem; }
.image_top_choere img { width: auto; height: 250px; }
.images_bottom { list-style: none; width: 100%; margin-top: 1.35rem; }
.images_bottom img { height: 140px; width: auto; max-width: 100%; float: left; margin-right: 0.65rem; margin-bottom: 1rem; }
.images_bottom li:last-of-type img { margin-right: 0; }

.text a:link { text-decoration: none; color: #04447d; }
.text a:visited { text-decoration: none; color: #04447d; }
.text a:hover, a:active { text-decoration: none; color: #04447d; }

#choere_musikschulen .text a:link { text-decoration: none; color: #bddef3; }
#choere_musikschulen .text a:visited { text-decoration: none; color: #bddef3; }
#choere_musikschulen .text a:hover, a:active { text-decoration: none; color: #bddef3; }

#konzerte .title { margin-top: 1.5rem; }
#konzerte .title:first-of-type { margin-top: 3rem; }
#konzerte .title_main { margin-top: 3rem; }
#konzerte .images_bottom { margin-top: 1.35rem; }
#konzerte .images_bottom img { margin-bottom: 0.5rem; }


img.left { float: left; height: 250px; margin-right: 1rem; margin-bottom: 1rem; }
img.right { float: right; height: 250px; margin-left: 1rem; margin-bottom: 1rem; }

.button_hiddencontent { display: block; cursor: pointer; cursor: hand; color: #04447d; }
.hc_active { margin-top: 1rem; color: #bddef3; font-size: 1.25rem; }
.hc_active:first-of-type { margin-top: 0; }
.button_hiddencontent:hover { color: #bddef3; }
.button_hiddencontent.active, .button_hiddencontent:active { color: #bddef3; }
#choere_musikschulen .text_hc { display: none; margin-bottom: 1.3rem; }

h2 { font-size: 2.2rem; font-family: itc-officina-sans-pro, sans-serif; font-weight: 500; font-style: normal; }
h3 { font-size: 1.25rem; font-family: itc-officina-sans-pro, sans-serif; font-weight: 500; font-style: normal; margin-top: 1.75rem; margin-bottom: 1rem; }
h3:first-of-type { margin-top: 0; }
i { font-style: normal; }
bold, b, strong { font-family: itc-officina-sans-pro, sans-serif; font-weight: 500; font-style: normal; }

.breadcrumb { font-size: 0.9rem; margin-bottom: 0.5rem; }
.posted { font-size: 0.9rem; margin-top: 0.2rem; }
.subtitles { font-size: 0.9rem; }
.subtitles p { margin-top: 0; }
.back_to_top a:link { text-decoration: underline; font-size: 0.9rem; }

#content_right { position: absolute; top: 0; right: 13%; width: 240px; background: #bddef3; color: #04447d; z-index: 5; }
#teaser { font-size: 1.25rem; margin: 7rem 1rem 1rem 1rem; }
#teaser_margin { display: block; height: 24rem; background: #1f97d0; }   /* evtl. rausnehmen */
#teaser p { margin-top: 0.2rem; }
#teaser a:link { text-decoration: none; color: #1f97d0; }
#teaser a:visited { text-decoration: none; color: #1f97d0; }
#teaser a:hover, a:active { text-decoration: none; color: #1f97d0; }

#teaser_1024 { display: none; }

#sponsor_a { display: block; margin: 0 auto; width: 70%; }
#sponsor_a img, #sponsor_b img { width: 100%; height: auto; }
#sponsor_b { display: block; margin: 0 auto; width: 40%; }

#teaser_1024 #sponsor_a, #sponsor_a.sponsi  { display:inline-block; width: 60%; margin-right: 5%; }
#teaser_1024 #sponsor_a img, #teaser_1024 #sponsor_b img, #sponsor_a.sponsi img, #sponsor_b.sponsi img { width: auto; max-height: 160px; }
#teaser_1024 #sponsor_b, #sponsor_b.sponsi { display:inline-block; width: 30%; }

fieldset { border: 0; margin-top: 3rem; }
legend { font-size: 1.8rem; font-family: itc-officina-sans-pro, sans-serif; font-weight: 500; font-style: normal; margin-bottom: 1rem; }
input.comText, input.comEmail { margin-left: 1rem; }




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

#content { width: 780px; }
}


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

#content { width: 710px; }
}


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

#welle_1, #welle_2 { display: none; }
#welle_1_b { display: block; position: fixed; bottom: 0; width: 100%; z-index: 10; }
#fisch { display: inline; position: fixed; bottom: 5%; left: 59.93%; width: 30.3%; z-index: 9; } 
#welle_1_b img, #fisch img { position: absolute; bottom: 0; width: 100%; }
#copyright { position: fixed; bottom: 10px; right: 20px; z-index: 11; }
#content_right { right: 10%; }
}


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

#teaser { margin: 9rem 1rem 1rem 1rem; }
}



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

#content { width: 52%; max-width: 675px; }
}


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

#stripe_blue { margin-top: 1rem; }
#navi { display: none; }
#navi_mobile { display: block; } 
#navi_mobile ul { font-size: 1.1rem; line-height: 1.7rem; }
ul li { padding: 5px 5px 6px 5px; }
#navi_mobile_zwei ul { font-size: 1rem; }
#navi_mobile_zwei ul li { line-height: 1.2rem; }

#content { width: 80%; max-width: 675px; }
#content_right { display: none; }
#teaser { display: none; }
#teaser_1024 { display: block; margin-top: 4rem; }
.teaser_title_1024 { margin-top: 3rem; }
.teaser_title_1024:first-of-type { margin-top: 0; }
.teaser_title_1024 h2 { font-size: 1.6rem; }

}


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

#content { width: 90%; margin-left: 5%; }
#navi_mobile ul { width: 90%; margin: 0 0 0 5%; }

#sponsor_a.sponsi { display: inline-block; width: auto; margin-right: 5%; }
#sponsor_a.sponsi img, #sponsor_b.sponsi img { width: auto; max-height: 120px; }
#sponsor_b.sponsi { display: inline-block; width: auto; }

#teaser_1024 #sponsor_a { display: inline-block; width: auto; margin-right: 5%; }
#teaser_1024 #sponsor_a img, #teaser_1024 #sponsor_b img { width: auto; max-height: 120px; }
#teaser_1024 #sponsor_b { display: inline-block; width: auto; }

iframe.vid_frame { width: 100%; max-width: 500px; }

}


@media only screen and (orientation: portrait) and (max-width: 780px) {

#welle_1_b { display: none; }
#fisch { display: none; }
#welle_1_c { display: block; position: fixed; bottom: 0; width: 100%; z-index: 10; }
#welle_1_c img { position: absolute; bottom: 0; width: 100%; }

}


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

#content { margin-top: 2rem; }

#sponsor_a.sponsi { display: block; width: 70%; margin-right: 0; margin: 0 auto; margin-bottom: 1rem; }
#sponsor_a.sponsi img, #sponsor_b.sponsi img { width: 100%; height: auto; max-height: 200px; }
#sponsor_b.sponsi { display: block; width: 30%; margin: 0 auto; }

#teaser_1024 #sponsor_a { display: block; width: 70%; margin-right: 0; margin: 0 auto; margin-bottom: 1rem; }
#teaser_1024 #sponsor_a img, #teaser_1024 #sponsor_b img { width: 100%; height: auto; max-height: 200px; }
#teaser_1024 #sponsor_b { display: block; width: 30%; margin: 0 auto; }

}


@media only screen and (orientation: portrait) and (max-width: 680px) {

#welle_1_b { display: none; }
#fisch { display: none; }
#welle_1_c { display: block; position: fixed; bottom: 0; width: 100%; z-index: 10; }
#welle_1_c img { position: absolute; bottom: 0; width: 100%; }

}