@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
/* Firefox */
@-moz-document url-prefix() {
  p, .italic, .bold, .textmidita {
    font-family: Helvetica, "Helvetica Neue", Arial, "sans-serif" !important;
  }
}
/* --------------------- STRUCTURE --------------------- */
body, html {
  margin: 0;
  padding: 0;
  font-size: 82%;
  height: 100vh;
}
body {
  background: url("../site/hvgwall.jpg") no-repeat fixed left center #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wrapper {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow-y: auto;
}
#wrapper #nav {
  width: 190px;
  float: left;
  font-size: 1.5em;
}
#content {
  width: 810px;
  margin-left: 0;
  padding-bottom: 10px;
  float: left;
}
#logo {
  max-width: 95% !important;
  width: 810px;
  height: auto;
    margin: 5px auto 0 190px;
  text-align: center;
}

#lang {
  width: 810px;
  margin-left: 190px;
  margin-bottom: 0;
  text-align: center;
  position: relative;
  top: -2px;
  z-index: 75;
}
#lang img {
  margin: 0 6px 0 6px;
}
#section {
  width: 810px;
  margin-top: 0;
}
#pagenavtop {
  padding: 6px 2px 4px 4px;
  background: rgba(255, 255, 255, 0.65);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  min-height: 24px;
  height: auto;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  color: #333;
  margin-bottom: -4px;
  margin-top: 2px;
}
#pagenavbottom {
  text-align: right;
  padding: 6px 4px 4px 2px;
  background: rgba(255, 255, 255, 0.65);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  min-height: 24px;
  height: auto;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  color: #333;
  margin-top: -4px;
}
#pagenavtop a:link, #pagenavtop a:visited, #pagenavbottom a:link, #pagenavbottom a:visited, .anchorsplit a:link, .anchorsplit a:visited {
  text-decoration: none;
  color: #BF6B00;
  font-weight: 500;
}
#pagenavtop a:active, #pagenavtop a:hover, #pagenavbottom a:active, #pagenavbottom a:hover, .anchorsplit a:active, .anchorsplit a:hover {
  text-decoration: none;
  color: #737373;
}
.article {
  padding: 4px 10px;
  border: 1px solid #fff;
  background: #fff;
  margin: 6px 0;
  overflow: auto;
}
.source {
  border-top: solid 2px #cbcbcb;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1em;
  color: #808080;
  text-align: left;
  padding: 4px 0;
}
.source a:link, .source a:visited {
  text-decoration: none;
  color: #966;
}
.source a:active, .source a:hover {
  color: #999;
}
.artwrap {
  margin: 0 0 6px 0;
  padding: 0;
  display: block;
}
.anchorsplit {
  padding: 6px 2px 2px 4px;
  background: rgba(255, 255, 255, 0.65);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  letter-spacing: 0.05em;
  color: #333;
  min-height: 24px;
  height: auto;
  overflow: hidden;
  margin: 0;
}
/* --------------------- NAVIGATION --------------------- */
#nav {
  padding: 0 4px 0 0;
}
#nav .head {
  font-size: 1.7em;
  letter-spacing: 0.1em;
  color: #000;
  margin: 6px 0 6px 0;
  padding-left: 0;
  font-family: burnaby-stencil, sans-serif;
  font-weight: 400;
  font-style: lighter;
  list-style: none;
  border-bottom: solid 1px #000;
  background: none !important;
  border-radius: 0 !important;
  text-shadow: #fff 0 0 0.2em;
}
#nav ul {
  font-size: 0.9em;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  padding: 10px 8px 6px 0;
  margin: 6px;
}
#nav li {
  line-height: 1.4em;
  list-style: none;
  padding-left: 6px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.4);
}
.radtop {
  border-radius: 6px 6px 0 0;
}
.radbottom {
  border-radius: 0 0 6px 6px;
}
#nav a:link, #nav a:visited {
  text-decoration: none;
  color: #000;
  letter-spacing: 0.03em;
  text-shadow: #fff 0 0 0.3em;
}
#nav a:hover, #nav a:active {
  color: #fff;
  text-shadow: #000 0 0 0.2em;
}
body#news #nav a.news:link, body#news #nav a.news:visited, body#updates #nav a.updates:link, body#updates #nav a.updates:visited, body#tv #nav a.tv:link, body#tv #nav a.tv:visited, body#tour #nav a.tour:link, body#tour #nav a.tour:visited, body#bio #nav a.bio:link, body#bio #nav a.bio:visited, body#hvgdesk #nav a.hvgdesk:link, body#hvgdesk #nav a.hvgdesk:visited, body#stromlinien #nav a.stromlinien:link, body#stromlinien #nav a.stromlinien:visited, body#music #nav a.music:link, body#music #nav a.music:visited, body#musicindex #nav a.music:link, body#musicindex #nav a.music:visited, body#disc #nav a.disc:link, body#disc #nav a.disc:visited, body#lyrics #nav a.lyrics:link, body#lyrics #nav a.lyrics:visited, body#film #nav a.film:link, body#film #nav a.film:visited, body#misc #nav a.misc:link, body#misc #nav a.misc:visited, body#links #nav a.links:link, body#links #nav a.links:visited, body#media #nav a.media:link, body#media #nav a.media:visited, body#contact #nav a.contact:link, body#contact #nav a.contact:visited, body#kulturpreis #nav a.kulturpreis:link, body#kulturpreis #nav a.kulturpreis:visited, body#fluechtig #nav a.fluechtig:link, body#fluechtig #nav a.fluechtig:visited {
  color: #DC5100;
  
}
body#news #nav a.news:hover, body#news #nav a.news:active, body#updates #nav a.updates:hover, body#updates #nav a.updates:active, body#tv #nav a.tv:hover, body#tv #nav a.tv:active, body#tour #nav a.tour:hover, body#tour #nav a.tour:active, body#bio #nav a.bio:hover, body#bio #nav a.bio:active, body#hvgdesk #nav a.hvgdesk:hover, body#hvgdesk #nav a.hvgdesk:active, body#stromlinien #nav a.stromlinien:hover, body#stromlinien #nav a.stromlinien:active, body#music #nav a.music:hover, body#music #nav a.music:active, body#musicindex #nav a.music:hover, body#musicindex #nav a.music:active, body#disc #nav a.disc:hover, body#disc #nav a.disc:active, body#film #nav a.film:hover, body#film #nav a.film:active, body#misc #nav a.misc:hover, body#misc #nav a.misc:active, body#hovers #nav a.hovers:hover, body#hovers #nav a.hovers:active, body#media #nav a.media:hover, body#media #nav a.media:active, body#contact #nav a.contact:hover, body#contact #nav a.contact:active, body#kulturpreis #nav a.kulturpreis:hover, body#kulturpreis #nav a.kulturpreis:active, body#fluechtig #nav a.fluechtig:hover, body#fluechtig #nav a.fluechtig:active {
  color: #fff;
  
}
body#news .collapsible-menu a.news:link, body#news .collapsible-menu a.news:visited, body#updates .collapsible-menu a.updates:link, body#updates .collapsible-menu a.updates:visited, body#tv .collapsible-menu a.tv:link, body#tv .collapsible-menu a.tv:visited, body#tour .collapsible-menu a.tour:link, body#tour .collapsible-menu a.tour:visited, body#bio .collapsible-menu a.bio:link, body#bio .collapsible-menu a.bio:visited, body#hvgdesk .collapsible-menu a.hvgdesk:link, body#hvgdesk .collapsible-menu a.hvgdesk:visited, body#stromlinien .collapsible-menu a.stromlinien:link, body#stromlinien .collapsible-menu a.stromlinien:visited, body#music .collapsible-menu a.music:link, body#music .collapsible-menu a.music:visited, body#musicindex .collapsible-menu a.music:link, body#musicindex .collapsible-menu a.music:visited, body#disc .collapsible-menu a.disc:link, body#disc .collapsible-menu a.disc:visited, body#lyrics .collapsible-menu a.film:lyrics, body#lyrics .collapsible-menu a.lyrics:visited, body#film .collapsible-menu a.film:link, body#film .collapsible-menu a.film:visited, body#misc .collapsible-menu a.misc:link, body#misc .collapsible-menu a.misc:visited, body#links .collapsible-menu a.links:link, body#links .collapsible-menu a.links:visited, body#media .collapsible-menu a.media:link, body#media .collapsible-menu a.media:visited, body#contact .collapsible-menu a.contact:link, body#contact .collapsible-menu a.contact:visited, body#kulturpreis .collapsible-menu a.kulturpreis:link, body#kulturpreis .collapsible-menu a.kulturpreis:visited, body#fluechtig .collapsible-menu a.fluechtig:link, body#fluechtig .collapsible-menu a.fluechtig:visited {
      color: #DC5100;
}
body#news .collapsible-menu a.news:hover, body#news .collapsible-menu a.news:active, body#updates .collapsible-menu a.updates:hover, body#updates .collapsible-menu a.updates:active, body#tv .collapsible-menu a.tv:hover, body#tv .collapsible-menu a.tv:active, body#tour .collapsible-menu a.tour:hover, body#tour .collapsible-menu a.tour:active, body#bio .collapsible-menu a.bio:hover, body#bio .collapsible-menu a.bio:active, body#hvgdesk .collapsible-menu a.hvgdesk:hover, body#hvgdesk .collapsible-menu a.hvgdesk:active, body#stromlinien .collapsible-menu a.stromlinien:hover, body#stromlinien .collapsible-menu a.stromlinien:active, body#music .collapsible-menu a.music:hover, body#music .collapsible-menu a.music:active, body#musicindex .collapsible-menu a.music:hover, body#musicindex .collapsible-menu a.music:active, body#disc .collapsible-menu a.disc:hover, body#disc .collapsible-menu a.disc:active, body#lyrics .collapsible-menu a.lyrics:hover, body#lyrics .collapsible-menu a.lyrics:active, body#film .collapsible-menu a.film:hover, body#film .collapsible-menu a.film:active, body#misc .collapsible-menu a.misc:hover, body#misc .collapsible-menu a.misc:active, body#hovers .collapsible-menu a.hovers:hover, body#hovers .collapsible-menu a.hovers:active, body#media .collapsible-menu a.media:hover, body#media .collapsible-menu a.media:active, body#contact .collapsible-menu a.contact:hover, body#contact .collapsible-menu a.contact:active, body#kulturpreis .collapsible-menu a.kulturpreis:hover, body#kulturpreis .collapsible-menu a.kulturpreis:active, body#fluechtig .collapsible-menu a.fluechtig:hover, body#fluechtig .collapsible-menu a.fluechtig:active {
  color: #DC5100;
    
}
.social {
  font-size: 1.8em;
  line-height: 1.2em;
  color: #fff;
  margin: 6px 14px 6px auto;
  padding: 0 10px 0 10px;
  display: flex;
  justify-content: space-around;
  width: 165px;
  background: rgba(197, 197, 197, 0.4);
  border-radius: 6px;
}
.social i {
  padding-top: 2px;
  padding-right: 6px;
  text-shadow: #aaa 0 0 0.1em;
}
i.fa-youtube {
  padding-right: 2px;
}
i.fa-vimeo-v {
  padding-right: 0;
}
.impressum {
  width: auto;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.6em;
  padding: 4px 14px;
  clear: both;
}
/* --------------------- COLLAPSIBLE MENU --------------------- */
.collapsible-menu {
  color: #fff;
  background: #666;
  font-size: 1.8em;
  width: 2em !important;
  position: absolute;
  z-index: 100;
  border-bottom-right-radius: 4px;
}
.menu-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 20px;
}
.collapsible-menu .head {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  color: #000;
  margin: 5px 0 5px 0;
  padding: 0 0 4px 0;
  font-family: burnaby-stencil, sans-serif;
  font-weight: 400;
  font-style: lighter;
  list-style: none;
  border-bottom: solid 1px #000;
}
.collapsible-menu ul {
  font-size: 0.9em;
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: 400;
  font-style: lighter;
  padding: 0 30px 0 0;
  margin: 4px 0 0 0;
  width: 48%;
}
.collapsible-menu li {
  list-style: none;
  padding-left: 14px;
  margin-right: 14px;
}
.collapsible-menu a {
  text-decoration: none;
  color: #000;
  display: inline-block;
  padding: 10px 0;
}
.collapsible-menu a:hover, .collapsible-menu a:active {
  color: #EE5700;
}
.collapsible-menu .social {
  font-size: 1.6em;
  line-height: 1.1em;
  color: #000;
  margin: 2px auto 2px 0;
  width: 95%;
}
.collapsible-menu .social i {
  padding: 6px 14px 2px 14px;
}
.collapsible-menu .impressum {
  width: auto;
  color: #000;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.6em;
  padding: 0 10px 10px 0;
  clear: both;
}
.collapsible-menu label {
  display: block;
  cursor: pointer;
  padding: 10px 0 10px 10px;
  width: 2em;
}
input#menu {
  display: none !important;
}
input:checked + label {
  width: calc(100vw - 15px);
  background-color: #fff;
  color: #000;
  box-shadow: 2px 0 12px rgba(170, 170, 170, 0.7);
}
/* Toggle Effect */
input:checked ~ .menu-content {
  max-height: 100%;
  width: calc(100vw - 15px);
  background-color: #fff;
  border-bottom-right-radius: 12px;
  box-shadow: 2px 5px 12px rgba(170, 170, 170, 0.7);
}
input:checked ~ .collapsible-menu {
  width: calc(100vw - 15px);
  overflow-y: scroll;
}
/* --------------------- INDEX PAGE --------------------- */
body#index {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background: url("../site/hvgwallsplash.jpg") no-repeat fixed center #333;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body#index img {
  max-width: 95%;
  height: auto;
  padding-top: 10px;
}
body#index .enter {
  font-family: burnaby-stencil, sans-serif;
  font-size: 3.5em;
  letter-spacing: 0.12em;
  font-weight: lighter;
  color: rgba(255, 255, 255, 0.9);
  padding-bottom: 2em;
  margin-top: auto;
}
body#index a:link, body#index a:visited {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
body#index a:hover, body#index a:active {
  color: #EE5700;
  text-decoration: none;
}
/* --------------------- PROJECT INDEX PAGES --------------------- */
#indeximg {
  box-shadow: inset 0px 0px 0px 0px #fff;
  margin: 6px auto;
  padding: 0;
  width: 100%;
  max-width: 810px;
  height: calc(100vw / 1.5);
  max-height: 540px;
  background-size: contain;
  border-radius: 4px;
  display: flex;
}
#indeximg ul {
  margin: 20px;
  padding: 10px;
  list-style-type: none;
  overflow: hidden;
  width: auto;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  border: 1px solid #eee;
}
#indeximg li {
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  line-height: 1.8em;
  font-size: 1.4em;
  font-weight: bold;
  letter-spacing: 1px;
}
#indeximg.topright ul, #indeximg.bottomright ul {
  text-align: right;
}
#indeximg ul a:link, #indeximg ul a:visited {
  color: #000;
}
#indeximg ul a:hover, #indeximg ul a:active, #indeximg.dark ul a:hover, #indeximg.dark ul a:active {
  color: #EE5700;
}
.dark > ul {
  background: rgba(000, 000, 000, 0.5) !important;
  border: 1px solid #000 !important;
}
.dark > ul a:link, .dark > ul a:visited {
  color: #fff !important;
}
.dark > ul a:hover, .dark > ul a:active {
  color: #EE5700 !important;
}
.topic {
  height: auto;
  max-width: 300px;
  width: auto;
  margin: 0;
}
.topleft {
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-end;
}
.topright {
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
}
.bottomleft {
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
}
.bottomright {
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;
}
.liedtexte_index {
  background: url("../indexpics/liedtexte.jpg") no-repeat center;
}
.lyrics_index {
  background: url("../indexpics/lyrics.jpg") no-repeat center;
}
.alpinkatzen_index {
  background: url("../indexpics/alpinkatzen.jpg") no-repeat center;
}
.tibet_index {
  background: url("../indexpics/tibet.jpg") no-repeat center;
}
.afrika_index {
  background: url("../indexpics/afrika.jpg") no-repeat center;
}
.africa_index {
  background: url("../indexpics/africa.jpg") no-repeat center;
}
.foen_index {
  background: url("../indexpics/foen.jpg") no-repeat center;
}
.trad_index {
  background: url("../indexpics/trad.jpg") no-repeat center;
}
.grenzenlos_index {
  background: url("../indexpics/grenzenlos.jpg") no-repeat center;
}
.iwasig_index {
  background: url("../indexpics/iwasig.jpg") no-repeat center;
}
.iwasig2003_index {
  background: url("../indexpics/iwasig2003.jpg") no-repeat center;
}
.grenzenlos2003_index {
  background: url("../indexpics/grenzenlos2003.jpg") no-repeat center;
}
.tradii_index {
  background: url("../indexpics/tradii.jpg") no-repeat center;
}
.tradtour_index {
  background: url("../indexpics/tradtour.jpg") no-repeat center;
}
.ausland_index {
  background: url("../indexpics/ausland.jpg") no-repeat center;
}
.derweil_index {
  background: url("../indexpics/derweil.jpg") no-repeat center;
}
.linztour_index {
  background: url("../indexpics/linztour.jpg") no-repeat center;
}
.linztour2_index {
  background: url("../indexpics/linztour2.jpg") no-repeat center;
}
.snix_index {
  background: url("../indexpics/snix.jpg") no-repeat center;
}
.hautundhaar_index {
  background: url("../indexpics/hautundhaar.jpg") no-repeat center;
}
.tour2011_index {
  background: url("../indexpics/tour2011.jpg") no-repeat center;
}
.entwederundoder_index {
  background: url("../indexpics/entwederundoder.jpg") no-repeat center;
}
.brennatuats_index {
  background: url("../indexpics/brennatuats.jpg") no-repeat center;
}
.imjahrdesdrachen_index {
  background: url("../indexpics/imjahrdesdrachen.jpg") no-repeat center;
}
.tour2014_index {
  background: url("../indexpics/tour2014.jpg") no-repeat center;
}
.tour2015_index {
  background: url("../indexpics/tour2015.jpg") no-repeat center;
}
.federn_index {
  background: url("../indexpics/federn.jpg") no-repeat center;
}
.brennatuatsschonlang_index {
  background: url("../indexpics/brennatuatsschonlang.jpg") no-repeat center;
}
.federntour_index {
  background: url("../indexpics/federntour.jpg") no-repeat center;
}
.federnlive_index {
  background: url("../indexpics/federnlive.jpg") no-repeat center;
}
.zeitenundzeichen_index {
  background: url("../indexpics/zeitenundzeichen.jpg") no-repeat center;
  box-shadow: inset 0px 0px 0px 3px #666 !important;
}
.fluechtig_index {
  background: url("../indexpics/fluechtig.jpg") no-repeat center;
}
/* --------------------- TEXT STYLES --------------------- */
p {
  font-size: 1.3em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  text-align: left;
  line-height: 1.4em;
  margin: 11px 0;
  font-weight: normal;
}
h1 {
  font-size: 2em;
  line-height: normal;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: #fff 0 0 0.3em;
}
h2 {
  font-size: 1.8em;
  margin: 10px 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #EE5700;
  padding-left: 36px;
  background-size: 30px 21px !important;
  text-align: left;
  padding-top: 8px;
  padding-bottom: 6px;
  margin-top: 6px;
  margin-bottom: 0;
  background: url(../site/lindwurm.png) no-repeat left;
  -webkit-font-smoothing: antialiased;
}
h3 {
  font-size: 1.5em;
  color: #EE5700;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 2px;
  -webkit-font-smoothing: antialiased;
}
h4 {
  font-size: 1.4em;
  color: #EE5700;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin: 0 0 2px 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}
blockquote {
  width: 90%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 8px auto;
  padding: 8px 12px;
  background: #F6F6F6;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  overflow-y: auto;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.textmid {
  text-align: center;
}
.textmidita {
  text-align: center;
  font-style: italic;
}
.textright {
  text-align: right;
}
.justify {
  text-align: justify;
}
.small {
  font-size: 0.85em !important;
}
p.small {
  font-size: 1.1em !important;
}
.grey {
  color: #666 !important;
}
.white {
  color: #fff !important;
}
.blue {
  color: #0077c2 !important;
}
.linethrough {
  text-decoration-line: line-through;
}
/* --------------------- IMAGES --------------------- */
a img {
  border: none;
}
img {
  font-weight: normal;
  font-size: 0.9em;
}
img.corners {
  border-radius: 12px;
}
.imgleft {
  float: left;
  margin: 4px 14px 14px 0;
  display: inline-block;
}
.imgright {
  float: right;
  margin: 4px 0 14px 14px;
  display: inline-block;
}
img.centre {
  display: block;
  margin: 6px auto 6px auto;
}
img.banner {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 6px auto 6px auto;
}
img.centre2 {
  display: inline;
  margin: 6px;
}
.article img {
  border: solid 3px #ccc;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 0.8em;
  color: #000;
  text-align: center;
}
.cap {
  display: none;
  padding: 0;
  margin: 0;
}
a.caplink:link, a.caplink:visited {
  text-decoration: none;
  color: #966;
}
a.caplink:active, a.caplink:hover {
  color: #999;
}
img#reise {
  width: 100%;
  height: auto;
}
/* --------------------- LINKS --------------------- */
a {
  text-decoration: none;
}
a img {
  border: none;
}
.article a:link, .article a:visited, .separate a:link, .separate a:visited {
  color: #EE5700;
}
.article a:active, .article a:hover, .separate a:active, .separate a:hover {
  color: #999;
}
/* --------------------- CAPTIONS / BARS --------------------- */
.infobar {
  width: 90%;
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 0 4px;
  border-radius: 2px;
}
.infobar p {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.3em;
  color: #666666;
  text-align: center;
}
div.infobar, div.infobar_left, div.infobar_right {
  display: block;
  margin: 8px auto;
}
.infobar_left {
  width: 50%;
  float: left;
}
.infobar_right {
  width: 50%;
  float: right;
}
span.infobar {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.2em;
  color: #666666;
  text-align: center;
}
span.infobar a {
  font-size: 0.8em !important;
}
.infobar_left, .infobar_right {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  padding: 0;
}
.captionleft {
  float: left;
  width: 100px;
  max-width: 100%;
  margin: 10px;
  display: inline-block;
}
.captioncentre {
  margin: 10px auto;
  width: 500px;
  max-width: 100%;
  display: block;
}
.captionright {
  float: right;
  margin: 10px;
  width: 100px;
  max-width: 100%;
  display: inline-block;
}
.captionleft img, .captioncentre img, .captionright img {
  border: 3px solid #CCCCCC;
  margin: 0;
}
.captionleft p, .captioncentre p, .captionright p, .columnleft .captionleft p, .columnleft .captioncentre p, .columnleft .captionright p, .columnright .captionleft p, .columnright .captioncentre p, .columnright .captionright p {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-size: 1.2em !important;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  color: #666666;
  text-align: center;
  margin: 5px 0 0 0;
  padding: 4px;
  max-width: 100%;
}
body#media .captionleft p {
  font-size: 1.1em !important;
}
.newsblock {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  clear: both;
  overflow: hidden;
}
.newsblock img {
  border: 1px solid #CCCCCC;
  width: 100%;
  height: auto;
}
.intro {
  width: 100%;
  background: #F6F6F6;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.intro p {
  font-size: 1.1em;
  font-style: italic;
  color: #742F87;
  text-align: justify;
}
div.leftbar {
  float: left;
}
div.rightbar {
  float: right;
}
div.leftbar, div.rightbar {
  width: 250px;
  margin: 0 10px;
}
.leftbar p, .rightbar p {
  background-color: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.2em;
  color: #666666;
  text-align: left;
  padding: 6px;
}
/* --------------------- GALLERIES --------------------- */
.gallery {
  width: 650px;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1em;
  color: #000;
  padding-top: 6px;
  padding-bottom: 3px;
  text-align: center;
  margin: auto;
}
.w550 {
  width: 550px;
  margin: auto;
}
.w450 {
  width: 450px;
  margin: auto;
}
.w350 {
  width: 350px;
  margin: auto;
}
.gallery img {
  border: solid 2px #ccc;
  margin: 0 1px 4px 1px;
  font-size: 0.8em;
  color: #000;
  text-align: center;
  vertical-align: middle;
}
.cap {
  display: none;
  padding: 0;
  margin: 0;
}
h4 {
  font-size: 1.4em;
}
a.caplink:link, a.caplink:visited {
  text-decoration: none;
  color: #966;
}
a.caplink:active, a.caplink:hover {
  color: #999;
}
/* --------------------- LISTS --------------------- */
ul.list, ol {
  padding-left: 10px;
  margin-left: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.3em;
  line-height: 1.4em;
}
ul.list2, ul.list2 li {
  font-size: 1.2em;
  line-height: 1.3em;
}
ul.list {
  list-style-type: circle;
}
ol {
  margin-left: 20px;
}
ul.list li, ol li {
  margin-bottom: 4px;
}
ul.artists {
  width: 99%;
  margin: 0 auto;
  display: block;
  padding: 0;
}
ul.artists li {
  width: 100%;
  list-style-type: none;
  list-style-position: inside;
  display: inline-block;
  overflow: auto;
}
ul.artists li p {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.3em;
  color: #000;
}
ul.artists img {
  margin: 0px 10px 14px 0;
  text-align: center;
  border: 2px solid #ccc;
  float: left;
  height: 75px;
  width: 75px;
  border-radius: 12px;
}
/* --------------------- COLUMNS --------------------- */
.columnleft {
  width: 48%;
  float: left;
  margin-right: 6px;
  margin-top: 10px;
  clear: both;
}
.columnright {
  width: 48%;
  float: right;
  clear: right;
  margin-top: 10px;
}
.columnleft p, .columnright p {
  margin-left: 10px;
}
.border {
  border: 2px #ccc solid;
}
/* --------------------- UPDATES --------------------- */
#updates table {
  width: 98%;
  margin: 0 auto;
  border: none;
  border-spacing: 3px;
  border-collapse: separate;
  max-width: 99% !important;
  font-size: 1.2em;
  line-height: 1.2em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#updates td, #updates th {
  padding: 4px 2px 2px 2px;
}
#updates th {
  font-weight: bold;
  background-color: #ececec;
  text-align: center;
  border: solid 1px #c5c5c5;
  width: 10%;
  max-width: 10% !important;
}
#updates .project {
  padding-left: 4px;
  width: 32%;
  max-width: 32% !important;
}
#updates .entry {
  width: auto;
  max-width: 58% !important;
}
/* --------------------- TV AND RADIO --------------------- */
#tv table {
  width: 100%;
  margin: 0 auto !important;
  border: none;
  border-spacing: 2px;
  border-collapse: separate;
  max-width: 99% !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2em;
}
#tv td, #tv th {
  padding: 6px;
}
#tv th {
  font-weight: bold;
  line-height: 1.4em;
  background-color: #ececec;
  text-align: center;
  border: solid 1px #c5c5c5;
}
#tv .date {
  width: 12%;
  font-weight: bold;
}
#tv .time {
  width: 13%;
  font-weight: bold;
}
#tv .channel {
  width: 15%;
  font-weight: bold;
}
#tv .prog {
  width: auto;
  font-weight: bold;
}
#tv .desc {
  border-bottom: solid 1px #c5c5c5;
  padding-bottom: 6px;
  width: 100%;
}
body#tv p.small {
  padding-left: 10px;
}
/* --------------------- TOURPLAN / TABLES --------------------- */
table {
  width: 100%;
  margin: 0 auto;
  border-spacing: 2px;
  border-collapse: separate;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2em;
}
td {
  padding: 10px;
}
td.tourdatum[colspan="4"] {
  border-bottom: solid 1px #c5c5c5;
  padding: 0 !important;
  border-collapse: collapse;
}
th {
  font-weight: bold;
  text-align: left;
  background-color: #ececec;
  font-size: 1em;
  line-height: 1.1em;
  border: solid 1px #c5c5c5;
  padding: 4px;
}
th tr {
  border: solid 1px #c5c5c5;
  padding: 4px 4px 2px 4px;
}
td.tourdatum {
  width: 10% !important;
  padding: 10px 10px 0 10px;
  text-align: left;
  font-weight: bold;
  vertical-align: top;
}
body#tour td.tourort {
  width: 28% !important;
  padding: 10px 10px 0 10px;
  vertical-align: top;
}
td.tourevent {
  width: 40% !important;
  padding: 10px 10px 0 10px;
  vertical-align: top;
}
td.tourtickets {
  width: 18% !important;
  padding: 10px;
  vertical-align: top;
}
table td.tourtickets a {
  padding: 8px;
  background-color: #DC5100;
  color: #fff !important;
  text-decoration: none;
  display: block;
  text-align: center;
}
td.tourtickets a:hover, td.tourtickets a:active {
  background-color: #999;
  text-decoration: none;
}
body#tour td.tourdatum p {
  font-size: 1em;
  text-align: center;
}
body#tour td.tourtickets .ausverkauft, body#fluechtig td.tourtickets .ausverkauft {
  padding: 8px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
}
body#tour td.tourtickets .free {
  padding: 8px;
  background-color: #cb7692;
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
  display: block;
  text-align: center;
}
.past {
  color: #888;
  font-size: 0.9em;
  line-height: 0.8em;
}
/* --------------------- MUSIC / FILM / BAND INDEX --------------------- */
#projectindex.article img {
  width: 188px;
  height: auto;
  border-radius: 10px;
  margin: 0 2px 6px 2px;
}
#bandindex.article img {
  width: 175px;
  height: auto;
  border-radius: 10px;
  margin: 0 6px 6px 6px;
}
#projectindex.article a:link img, #projectindex.article a:visited img, #bandindex.article a:link img, #bandindex.article a:visited img {
  border: 3px solid #ccc !important;
}
#projectindex.article a:hover img, #projectindex.article a:active img, #bandindex.article a:hover img, #bandindex.article a:active img {
  border: 3px solid #EE5700 !important;
}
/* --------------------- DISCOGRAPHY --------------------- */
.cd p {
  border: 1px solid #CCCCCC;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 0.9em;
  line-height: 1.1em;
  background-color: #f0f0f0;
  color: #666666;
  text-align: center;
  margin: 5px 0 0 0;
  padding: 4px;
}
.cd {
  float: left;
  margin: 10px 10px 0 10px;
  width: 200px;
}
.single {
  width: 125px;
}
.dvd {
  width: 150px;
}
.cd img {
  border: 3px solid #CCCCCC;
  margin: 0;
}
.musiclinks {
  background-color: transparent !important;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cd i {
  font-size: 2.1em;
  padding: 5px;
}
.cd a img, svg {
  border: none;
  margin-left: 6px;
}
path {
  fill: #EE5700;
}
path:hover, path:active {
  fill: #ccc;
}
.cdwrap {
  padding: 4px 8px;
  max-width: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.2em;
  color: #333;
  text-align: left;
  overflow-y: auto;
  margin-bottom: 8px;
  background: #F6F6F6;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.cdwrap:after, .cdwrap li.cdlink2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: auto;
}
.cdwrap ul {
  width: 32%;
  display: inline-block;
  margin: 10px;
  padding: 4px;
  float: left;
}
.cdwrap ul.wide {
  width: 65%;
}
.cdwrap ul.single {
  width: 36%;
}
.cdwrap li {
  padding-left: 4px;
  list-style-type: none;
  display: block;
  line-height: 1.3em;
}
.cd1 {
  width: 200px;
  float: left;
  vertical-align: top;
}
.cd2 {
  width: 200px;
  float: left;
  vertical-align: top;
}
.cd3 {
  clear: both;
  width: 198px;
  padding: 2px 4px;
  margin: 2px 15px 0 0;
  background-color: #eaeaea;
  color: #666666;
  position: relative;
  font-size: 0.9em;
  text-align: center;
  bottom: 0;
  left: 7px;
}
.cdwrap li.cdlink {
  margin: 8px 8px 2px 6px;
  padding: 0 10px 5px 10px;
  background: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  color: #333;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
    
}
li.cdlink h3 {
  font-size: 1.1em;
}
li.cdlink p {
  font-size: 0.9em !important;
}

.cdwrap li.cdlink2 {
  margin: 8px 4px 2px 4px;
  padding: 0 6px 6px 6px;
  background: #f0f0f0;
  border: 1px solid #CCCCCC;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  color: #333;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; 
}
.cdwrap li.cdlink2 img {
    float: left; 
    display: inline-block; 
    margin: 4px;}

li.cdlink2 h3 {  font-size: 1.1em;}


ul.discnote {
  width: 95%;
  color: #999;
  font-size: 0.9em;
  float: left;
}
.code {
  color: #EC7600;
  padding: 0 2px 0 6px;
}
/* --------------------- LYRICS --------------------- */
.engtrans {
  width: 40%;
  float: right;
  background: #eaeaea;
  font-size: inherit;
  text-align: center;
  padding: 4px 2px;
  margin-bottom: 2px;
}
.lyricsmob {
  display: none;
}
/* --------------------- FILM --------------------- */
table#filmmusik {
  width: 98%;
  max-width: 99% !important;
  margin: 8px auto;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.2em;
  padding: 4px;
  border-collapse: collapse;
  border-spacing: 2px;
}
table#filmmusik th {
  padding: 6px;
  font-size: 1.4em;
  color: #DC5100;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin-top: 6px;
  margin-bottom: 2px;
  -webkit-font-smoothing: antialiased;
  background: #f6f6f6;
}
#fm1 {
  width: 33%;
}
#fm2 {
  width: 66%;
}
table#filmmusik tr {
  border-top: 1px solid #ccc !important;
  padding: 4px;
}
table#filmmusik td {
  padding: 6px;
  vertical-align: top;
}
table#filmmusik .small {
  margin-left: 6px;
}
table#filmmusik a img {
  border: none;
  height: 12px;
  width: auto;
}
table#filmmusik a {
  margin-left: 2px;
}
/* --------------------- KULTURPREIS --------------------- */
#kulturpreis h2, #conditions h2 {
  background: url(../kulturpreispics/gustl.png) no-repeat left;
  padding-left: 34px;
  background-size: 30px 22px;
}
#kulturpreis h2.danke {
  background: none !important;
  padding: 0;
  text-align: center;
}
#kulturpreis h3 {
  margin-bottom: 8px;
  text-align: center;
  font-size: 1.4em;
}
#jury p {
  text-align: justify;
  text-align-last: left;
}
#jury .bio {
  width: 47%;
  float: left;
  padding: 4px 10px;
}
#jury .chair {
  width: auto;
  display: block;
  margin: 0 auto;
  padding: 4px 10px;
  overflow: auto;
}
#prevkp .captionleft {
  width: 160px;
  margin: 4px;
}
#prevkp .captionleft p {
  font-size: 1.1em;
}
#prevkp .prevkpwrap {
  width: 518px;
  margin: 0 auto;
}
.apply a {
  width: 80%;
  margin: 4px auto;
  display: block;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px;
  background: #eee;
  color: #d00600;
  line-height: 3em;
  border: 1px solid #ddd;
}
.apply a:active, .apply a:hover {
  background: #efefef;
  border: 1px solid #ccc;
}
.apply p {
  text-align: center;
  font-weight: bold;
}
body#kulturpreis.popup {
  background: none !important;
  width: 98%;
  margin: 0 auto;
}
#kulturpreis form {
  margin: 0 auto;
  width: 95%;
  padding: 8px 10px;
}
#kulturpreis form p {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1em;
  color: #000;
  text-align: left;
  line-height: 1.4em;
  margin: 11px 0;
}
#kulturpreis textarea {
  width: 98%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
}
#kulturpreis input {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 8px;
}
#kulturpreis input[type=email], body#kulturpreis input[type=date], #kulturpreis input[type=tel], #kulturpreis input[type=url] {
  width: 50%
}
#kulturpreis input[type=url] {
  width: 75%
}
#kulturpreis input[type=text] {
  width: 98%
}
#kulturpreis input[type=submit] {
  background: #ccc;
  color: #000;
  border-radius: 4px;
  box-sizing: border-box;
}
#kulturpreis input:hover[type=submit] {
  background: #eee;
}
#kulturpreis .counter-text {
  font-size: 0.9em;
  color: #666;
  clear: both;
  margin-top: 3px;
  display: block;
}
#kulturpreis .counter-warning {
  font-size: 0.9em;
  color: #9b1c18;
  clear: both;
  margin-top: 3px;
  display: block;
}
ol.conditions {
  padding: 10px 20px;
  width: 95%;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  margin: 0 auto;
  font-size: 1.3em;
}
ol.conditions li {
  padding-bottom: 8px !important;
}
/* --------------------- BIOGRAPHY --------------------- */
.biodate {
  margin-right: 6px;
  padding-bottom: 4px;
  background: url(../site/date.png) no-repeat center top;
  background-size: 45px 32px;
  height: 65px;
  width: 85px;
  float: left;
}
.biodate p {
  color: #DC5100;
  font-weight: bold;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  margin-top: 35px;
}
#bio .article ul {
  list-style: none;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  color: #000;
  font-size: 1.2em;
  line-height: 1.4em;
  margin: 0;
  padding: 0;
}
#bio .article li {
  margin-bottom: 4px;
  border-bottom: solid 2px #EEE;
  padding-top: 4px;
  padding-bottom: 8px;
  clear: both;
  overflow: auto;
}
/* --------------------- MISC INDEX PAGE --------------------- */
.hvgtext {
  text-transform: lowercase;
}
.hvg80er {
  background: url(../hvgpics/hubert_80er@2x.jpg) no-repeat center;
  background-color: #ccc;
  background-size: 290px 359px;
  padding: 5px 4px;
  width: 290px;
  height: 359px;
}
ul.etc {
  width: 98%;
  margin: 8px auto;
  display: block;
  padding: 0;
}
ul.etc li {
  width: 98%;
  list-style-type: none;
  list-style-position: inside;
  padding-bottom: 6px;
  display: inline-block;
  overflow: auto;
}
ul.etc li a:link, ul.etc li a:visited {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.6em;
  text-decoration: none;
  color: #EE5700;
}
ul.etc li a:active, ul.etc li a:hover {
  color: #999;
}
ul.etc li p {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.3em;
  color: #000;
}
ul.etc img {
  margin: 0px 10px 14px 0;
  text-align: center;
  border: 2px solid #ccc;
  float: left !important;
  height: 75px;
  width: 75px;
  border-radius: 12px;
}
/* --------------------- BOOKS PAGE --------------------- */
ul.books {
  margin: 0 auto;
  list-style: none;
  width: 99%;
  padding: 0;
}
ul.books li {
  margin-left: 0;
  margin-bottom: 10px;
  clear: both;
}
/* --------------------- LINKS PAGE --------------------- */
ul.links {
  width: 98%;
  margin: 2px auto;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1em;
}
ul.links li {
  width: 48%;
  float: left;
  display: inline-block;
  list-style: none;
  padding-bottom: 10px;
}
ul.links li img {
  margin-right: 8px;
}
ul.links li p {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.1em;
}
/* --------------------- MEDIA PLAYER --------------------- */
#media .article ul {
  padding-left: 10px;
  margin-left: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.3em;
}
#media .article li {
  list-style: none;
  padding-bottom: 4px;
}
audio {
  width: 100%;
  min-width: 20%;
  overflow: hidden;
  box-shadow: none;
  border-radius: 8px;
  transform: scale(0.9);
  filter: sepia(100%) saturate(100%) grayscale(1) contrast(200%) !important;
}
table#audiosamples {
  border: none;
  border-spacing: 0;
  border-collapse: separate;
  max-width: 99% !important;
  padding-bottom: 0;
}
.audio1 {
  font-weight: bold;
  width: 25%
}
.audio2 {
  width: auto;
}
.audio3 {
  width: 30%;
  color: #666;
}
iframe {
  margin: 8px auto;
  display: block;
  max-width: 99%;
  text-align: center;
  padding: 0;
  border: none;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 100%;
  margin-bottom: 16px;
}
.embed-container iframe, .embed-container object, .embed-container embed {
 /* position: absolute;
  top: 0;
  left: 4px;
  width: 100%;
  height: 100%;*/
   
position: absolute; 
    top: 0; 
    left: 4px;
    width: calc(100% - 4px)!important; 
    height: calc(100% - 4px)!important;
    border: none!important;
}

.instagram-media {
  margin: 4px auto 0 auto !important;
}
/* --------------------- MISC --------------------- */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.autowidth {
  width: auto !important;
}
.noborder {
  border: none !important;
}
.w50 {
  width: 50%;
}
.w33 {
  width: 33%;
}
.wrap {
  margin: 4px auto 2px auto;
  padding: inherit;
  overflow: auto;
  width: auto;
}
.wrap100 {
  margin: 4px auto 2px auto;
  padding: 0;
  overflow: auto;
  width: 100%;
}
.spacearound {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.spaceevenly {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.spacebetween {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hidden {visibility: hidden;}
.nodisplay {display: none;}

/* --------------------- RESPONSIVE --------------------- */
@media screen and (max-width: 600px) {
  body, html {
    height: 100vh !important;
  }
  #logo {
    width: 95% !important;
    height: auto;
  }
}
@media screen and (min-width: 1001px) {
  .collapsible-menu {
    display: none;
  }
}
/* --------------------- INDEX BG FIX  --------------------- */
@media only screen and (min-device-width: 100px) and (max-device-width: 2000px) {
  body {
    background: url("../site/hvgwall.jpg") repeat left center #333;
  }
}

/* --------------------- MAX WIDTH 400 --------------------- */
@media screen and (max-width: 600px) {
  #projectindex.article img, #bandindex.article img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 4px auto;
  }
 
}
/* --------------------- MAX WIDTH 600 --------------------- */
@media screen and (max-width: 600px) {
    
body#index img { padding-top: 10px!important;  width: 90%!important;}
body#index .enter {padding-bottom: 2.5em !important;}
    
body#index {
    display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  background: url("../site/hvgwallsplash_900.jpg") no-repeat fixed center #333 !important;
  -webkit-background-size: cover!important;
  -moz-background-size: cover!important;
  -o-background-size: cover!important;
  background-size: cover!important; 
  }
 
  ul.links li {
    width: 98%;
  }
  h1 {
    font-size: 4vw; /* 3.6*/
    max-width: 99%;
  }
  h3 {
    text-align: center;
  }
  body#tour table {
    overflow: hidden !important;
    font-size: 1em !important;
  }
  td {
    padding: 6px;
  }
  td.tourdatum {
    width: 10% !important;
    padding: 10px 6px 0 6px;
    text-align: left;
    font-weight: bold;
    vertical-align: top;
  }
  body#tour td.tourort {
    width: 20% !important;
    padding: 10px 6px 0 6px;
    vertical-align: top;
  }
  td.tourevent {
    width: 44% !important;
    padding: 10px 6px 0 6px;
    vertical-align: top;
  }
  td.tourtickets {
    width: 22% !important;
    padding: 10px;
    vertical-align: top;
  }
  table td.tourtickets a {
    padding: 4px;
    background-color: #DC5100;
    color: #fff !important;
    text-decoration: none;
    display: block;
    text-align: center;
  }
  td.tourtickets a:hover, td.tourtickets a:active {
    background-color: #999;
    text-decoration: none;
  }
  body#tour td.tourdatum p {
    font-size: 1em;
    text-align: center;
  }
  #indeximg ul {
    font-size: 2vw;
    width: auto;
    min-width: 100px;
  }
  .cd {
    margin: 8px auto;
    float: none;
  }
  .cd img {
    max-width: 100%;
  }
  .cd h3 {
    clear: both;
  }
  .cdwrap ul, .cdwrap ul.wide, cdwrap ul.single, .cdwrap ul li.cdlink2 {
    width: 99% !important;
    clear: left;
    margin: auto;
  }
  ul.lyricsmenu {
    display: none !important;
  }
  #indeximg ul.lyricsmob {
    display: inline-block !important;
    width: 50% !important;
    float: left;
  }
  #indeximg.topright ul.lyricsmob {
    text-align: left;
  }
  .columnleft, .columnright {
    width: 100%;
    display: block;
  }
  .captionleft, .captionright {
    display: block;
    float: none;
    margin: 8px auto;
  }
  body#media .captionleft, body#media .captionright {
    display: block;
    float: none;
    margin: 10px;
  }
  .columnleft {
    margin-bottom: 0 !important;
  }
  .columnright {
    margin-top: -10px !important;
  }
  div.leftbar, div.rightbar {
    width: 98%;
    margin: 0 auto;
    float: none;
  }
  .w33 {
    width: 100%;
  }
}
/* --------------------- MAX WIDTH 810 --------------------- */
@media screen and (max-width: 810px) {
  #indeximg {
    margin-bottom: 0;
  }
  #content {
    padding-bottom: 0;
  }
    
 .cdwrap ul li.cdlink2 {
    width: auto !important;
    clear: left;
     margin: auto;}
  
}
/* --------------------- BETWEEN 810 AND 1000 --------------------- */
@media screen and (min-width: 810px) and (max-width: 1000px) {
  #content, #lang, #section, #pagenavtop, #pagenavbottom, .article {
    width: 810px;
    margin: 0 auto !important;
    float: none !important;
  }
  
  #wrapper {    width: 100%;
  }
}
/* --------------------- MAX WIDTH 1000 --------------------- */
@media screen and (max-width: 1000px) {
  body#index .enter {
    font-size: 3.5em;
    padding-bottom: 2em !important;
  }
  
  #logo img {
    width: 92% !important;
    height: auto;
    margin: 0 auto !important;
    padding-left: 1.5em !important;
      display: inline-block!important;
  }

  #nav {
    display: none;
  }
  input:checked ~ label {
    width: calc(100vw - 15px);
  }
  .collapsible-menu ul {
    display: inline-block;
    width: 45%;
  }
  .collapsible-menu .social {
    clear: both;
  }
  #logo, #wrapper, #content, #lang, #section, #pagenavbottom, .article {
    margin: 0 auto !important;
    width: 100%;
  }
  #pagenavtop {
    margin: 2px auto 0 auto !important;
    width: 100%;
  }
  #pagenavbottom {
    margin-top: -4px !important;
  }
  #pagenavtop, #pagenavbottom {
    min-height: 30px;
    height: auto;
  }
  #pagenavtop a, #pagenavbottom a, .anchorsplit a {
    padding: 2px 4px 2px 4px
  }
  .article {
    margin-bottom: 4px;
  }
  img.centre2 {
    display: block !important;
    margin: 8px auto;
  }
  .imgright, .imgleft {
    display: block !important;
    float: none !important;
    margin: 8px auto;
    clear: both;
  }
.cdwrap ul, .cdwrap ul.wide, cdwrap ul.single, .cdwrap ul li.cdlink2 {
    width: 99% !important;
    clear: left;
    margin: auto;
    }
    
  ul.etc img {
    display: inline-block !important;
    float: left !important;
  }
  .article img, .article img.centre, .article img.centre2 {
    max-width: 100% !important;
    height: auto !important;
  }
  table#filmmusik a img {
    width: 12px;
  }
  .gallery {
    max-width: 90%;
  }
  .w550, .w450, .w350 {
    width: auto;
  }
  #updates th {
    width: 15% !important;
    margin: 4px;
    padding: 4px 8px;
  }
  #updates table {
    border-spacing: 6px;
  }
  #updates th, #updates tr, #updates .project, #updates .entry, #tv th, #tv tr, #tv tr.desc {
    width: 99%;
    max-width: 99% !important;
  }
  #updates td {
    display: block;
  }
  ul.artists img {
    float: left !important;
  }
  #jury .bio {
    width: 100%;
  }
  #kulturpreis #jury h3 {
    clear: both;
  }
  body#links img {
    margin: 0 auto;
  }
  body#links p {
    text-align: center;
  }
}

/* --------------------- PRINT STYLES --------------------- */
@media print {
  body {
    background-image: none !important;
    background-color: #fff;
  }
  #logo {
    margin: 0 auto;
    max-width: 95%;
  }
  #lang {
    display: none;
  }
  #nav, .collapsible-menu {
    display: none;
  }
  #wrapper, #content {
    width: 99%;
    overflow-x: hidden !important;
  }
  #section {
    margin: 25px auto -10px auto;
    width: 99%;
    overflow-x: hidden !important;
  }
  h1 {
    color: #000;
  }
  #pagenavtop, #pagenavbottom {
    display: none;
  }
  p {
    widows: 3 !important;
    orphans: 3 !important;
  }
}