/*
Theme Name: lauttencompagney
Theme URI: http://lauttencompagney.de
Author: internetgestalten.de für katigraphie.de
Author URI: https://internetgestalten.de
Version: 1.0.1
Description: Wordpress Theme - lauttencompagney.de Relaunch 2019
*/

/*
// colors:

    dunkelrot
    #b70916

    gold hell 1
    #f6f4ef

    gold hell 2
    #ede9e0

    gold hell 3 (nur Punkte unter Slider/Headerbild)
    #dbd4c0

    gold dunkel 1
    #a49362

    gold dunkel 2 (nur Schrift)
    #867544

*/

@import url('css/reset.css');

/* IE10+  */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

}

html, body {
    font-family: 'Roboto', sans-serif;
    color:#111;
    font-size:14px;
    line-height:1.4em;
    margin:0;
    padding:0;
}
body { 
    background-color:#fff; 
}

.container { 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0 20px;
}

.content.container {
    position: relative;
}
 
/* header */
#site-header {
    background-color: #ede9e0;
    padding: 27px 0 19px 0;
    z-index: 99;
    position: fixed;
    width: 100%;
}

#site-header nav {
    position: relative;
}

#logo {
    margin-top: 5px;
}

#logo img { 
    max-width: 196px;
}

#search {
    position: absolute;
    top: 56px;
    right: 28px;
    display: flex;
}
#searchform {
    margin-right: 10px;
}
#newsletter input[type="text"],
#searchform input[type="text"] {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 0 .5em;
    color: #b70916;
    border: 1px solid #fff;
}
.searchsubmit {
    background-image: url(images/icon_arrow_right.png);
    background-size: 20px;
    width: 20px;
    height: 20px;
    text-indent: -99em;
    vertical-align: top;
    margin-left: -4px;
}
.search-results .content p {
    color: #000;
}

/* new */
.icon-search {
    width: 18px;
    height:18px;
    margin-left: 20px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.icon-search:hover svg  {
    fill: #b70916;
}

/* search panel new 
.page-id-1819 nav #searchform,
.page-id-1819 nav #search .social {
    /* DEV  - remove in production 
    display: none;
}
*/

#search-panel {
    display: block;
    position: fixed;
    top: 0;
    z-index: 95;
    width: 100%;
    height: 75px;
    /*background-color: rgba(164,147,98, .05);*/
    background-color: rgba(247,244,244, .8);
    transition: top .3s ease-in-out;
}

body.search-open #search-panel {
    top: 120px;
}
body.search-open .icon-search {
    display:none;
}


#search-panel .container {
    position: relative;
    top: 23px;
    display: flex;
    justify-content: flex-end;
}

#search-panel #searchform > div {
    width: 525px;
    max-width: 100%;
    border-bottom: 1px solid #000;
    display: flex;
    position: relative;
}

#search-panel #searchform input[type="text"]{
    width: 97%;
    line-height: 30px;
    height: 30px;
    font-size: 15px;
    font-weight: 500;
    background-color: transparent;
    border: none;
    padding: 0;
    margin-right: 20px;
}
#search-panel ::placeholder{
    font-weight: bold;
}

#search-panel .searchsubmit {
    background-color: transparent;
    background-image: url(images/icon_search.svg);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;
    height: 20px;
    text-indent: -99em;
    vertical-align: top;
    margin-top: 4px;
}

#search-panel .searchsubmit:hover {
    background-image: url(images/icon_search_red.svg);
}

#search-panel a.close {
    margin-left: 25px;
}

.social {
    display: inline-block;
    margin: -4px  0 0 32px;
}
.social img {
    display: inline-block;
}
.social.yt img {
   padding-bottom: 3px;
}


a.button.red {
    background-color:#b70916; 
    color:#fff!important; 
    padding:7px 20px; 
    display:inline-block; 
    margin:10px 0;
    text-decoration: none;
    transition: opacity .2s ease-in-out;
}
a.button.red:hover {
    opacity:.85;
}

/* banner */
#banner {
    margin: 0 auto;
    width: 100%;
    position: relative;
    max-width: 1360px;
    padding-top: 121px;
    z-index: 0;
}
#banner img {
    max-width: 100%;
    z-index: 1;
    display: block;
}
#banner span.credits {
    position: absolute;
    bottom: 1em;
    left: 1.8em;
    z-index: 5;
    color: #fff;
    text-shadow: 2px 2px 1px #333;
    font-size: .8em;
}

/* home slider */
.home #banner .slide {
    position: relative;
}

#banner .bannertext {
    position: absolute;
    bottom: 40px;
    left: 18.4%;
    max-width: 70%;
    z-index: 6;
    text-shadow: 4px 4px 4px rgba(41,41,41,.8);
}
#banner .slider-gradient {
    width: 100%;
    height: 66%;
    position: absolute;
    bottom: 0;
    z-index: 3;
}
#banner .slider-gradient.color-1 { 
    background: linear-gradient(180deg, rgba(183,9,22,0) 0%, rgba(183,9,22,.9) 100%);
}
#banner .slider-gradient.color-2 {
    background: linear-gradient(180deg, rgba(134,117,68,0) 0%, rgba(134,117,68,.9) 100%);
}
#banner .slider-gradient.color-3 {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0, .9) 100%);
}

#banner .bannertext h1 {
    font-weight: bold;
    color: #fff;
    font-size: 4em;
    line-height: 1.1em;
    margin-bottom: 18px;
}
#banner .bannertext h2 {
    font-weight: 500;
    color: #fff;
    font-size: 2.75em;
    margin-bottom: 18px;
}
#banner .bannertext span {
    font-weight: 500;
    color: #fff;
    font-size: 2em;
    line-height: 1.2em;
    margin-bottom: 18px;
    display: block;
}
#banner .bannertext span.mobileonly {
    display: none;
}

/* <a> / menu */

a { 
    color: #a49362; 
    text-decoration: none;
}
a:hover, a:active {
    color: #b70916
}

#menu-main {
    float: right;
    display: flex;
    margin-top: 17px;
    list-style: none;
}
#menu-main ul {
    list-style: none;
}
#menu-main li {
    padding: 0;
}
#menu-main li a {
    font-size: 15px;
    padding: 1em 13px;
}
#menu-main li.languages {
    padding-left: 13px;
}
#menu-main li.languages a {
    padding: 1em 0;
}
#menu-main li.languages a.en {
    margin-left: -3px;
}

ul.sub-menu  {
    display: none;
    position: absolute;
    left: 310px;
    padding-top: 16px;
    padding-bottom: 20px;
    width: 100%;
}
ul.sub-menu li {
    display: inline-block;
}

#menu-main ul.sub-menu li a {
    font-size: 13px;
    padding-left: 9px;
    padding-right: 9px;
}

/*
#menu-main li.fix ul.sub-menu,
.current_page_item ul.sub-menu,
.current-menu-ancestor ul.sub-menu,
.current-menu-parent ul.sub-menu,
.current_page_parent ul.sub-menu,
.current_page_ancestor ul.sub-menu {
    display: block;
}
*/
#menu-main li.fix ul.sub-menu  {
    display: block;
}

#menu-main a,
#site-footer h4,
#site-footer h4 a {
    color: #000;
    font-weight: 500;
    transition: color .2s ease-in-out;
    
}

#menu-main a:hover,
#menu-main li.current_page_ancestor > a,
#menu-main li.current-menu-item > a,
#menu-main li.current_page_item > a,
#site-footer h4 a:hover {
    color: #b70916
}

#menu-main li:hover ul.sub-menu {
    display: block;
}


/* Mobile Menu Button */
.mobile-button {
    display: none;
    position:absolute;
    background: transparent;
    cursor: pointer;
    top: 40px;
    right: 30px;
    width: 26px;
    height: 22px;
    transition: all ease .238s;
    z-index: 9999;
}

.mobile-button:before,
.mobile-button:after, 
.mobile-button span {
    background-color: #b70916;
    transition: all ease .238s;
}

.mobile-button:before,
.mobile-button:after {
    content: '';
    position: absolute;
    top: 0;
    height: 3px;
    width: 100%;
    left: 0;
    top: 50%;
    transform-origin: 50% 50%;
}

.mobile-button span {
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    top: 50%;
    overflow: hidden;
    text-indent: 200%;
}

.mobile-button:before {
    transform: translate3d(0,-9px,0);
}

.mobile-button:after {
    transform: translate3d(0,9px,0);
}

.mobile-button.active span {
    opacity: 0;
}

.mobile-button.active:before {
    transform: rotate3d(0, 0, 1, 45deg);
}

.mobile-button.active:after {
    transform: rotate3d(0, 0, 1, -45deg);
}


/* menu sonderfälle durch cpt archive 
.single-cd #menu-item-226 > .sub-menu,
.single-programm #menu-item-109 > .sub-menu,
.post-type-archive-cd .menu-item-226 .sub-menu,
.tax-cd_kategorien .menu-item-226 .sub-menu {
    display: block;
}
*/

.tax-programm_kategorien #menu-item-109 > a,
.single-cd #menu-item-398 > a,
.tax-cd_kategorien #menu-item-398 > a,
.single-cd #menu-item-226 > a,
.single-programm #menu-item-109 > a,
.post-type-archive-termin #menu-item-145 > a,
.post-type-archive-cd #menu-main #menu-item-190 a,
.tax-cd_kategorien #menu-main #menu-item-190 a,
.post-type-archive-cd #menu-main #menu-item-226 > a,
.tax-cd_kategorien #menu-main #menu-item-226 > a {
    color: #b70916;
}


/* general */
h1,h2,h3,h4 { font-weight: 500; line-height: 1.4em; }
h1 {font-size: 2.8em; line-height: 1.15em; color: #b70916; margin-bottom: .7em;}
h2 {font-size: 1.3em; margin-bottom: 1.2em; letter-spacing: -.2px}
h3 {font-size: 1.2em; }
h4 {font-size: 1.0em; }

.search .left > h1,
h1.err404 {
    font-size: 2.2em;
    margin: 1em 0;
}

h2.medium {
    font-size: 2.2em;
    margin-bottom: .2em;
}


.notfound {
    margin-bottom: 3em;
}

.red {
    color: #b70916!important;
}

p,ol,ul {
    margin-bottom: 1.2em;
    line-height: 1.4em;
}

i,em {
    font-style: italic;
}

.content ol,
.content ul {
    padding-left: 1em;
}

.hidden {
    display: none;
}

.content{
    padding: 1.7em 0;
}
.content p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    
}

.flex {
    display:flex;
}


button.more,
button.back {
    text-align: center;
    display: block;
    margin: 2em auto;
    font-size: 1em;
    background-color: #a49362;
    color: #fff;
    padding: 10px 2em;
    transition: all .2s ease-in-out;
}
button.more {
    background-color: #b70916;
}
button.more:hover,
button.back:hover {
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
}

.bandcamp-placeholder {
    padding: 10px;
    background: #ddd;
    border: 1px solid #b70916;
    display: flex;
    flex-direction: column;
}
.load-bandcamp {
    color: #fff;
    background-color: #b70916;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
    margin-left: auto;
    transition: background-color .3s ease-in-out;
}
.load-bandcamp:hover {
    background-color: #333;
}




/* pages */
.home .content {
    padding:0;
}
.home .slide {
    display: block!important;
}

.cols {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}
.left {
    width: 70%;
}
.right {
    width: 25%;
}

.bubble {
    background: transparent url(images/icon_bubble_red.png) no-repeat center;
    color: #fff;
    text-align: center;
    min-height: 140px;
    position: relative;
    transition: all .2s ease-in-out;
    margin-bottom: 1em;
}
.bubble.gold {
    background-image: url(images/icon_bubble_gold.png)
}
.bubble a {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    position: absolute;
}
.bubble:hover {
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
}


/* programm / termine */
.termine {
    margin-top: 3em;
}
.programm,
.termin {
    position: relative;
}
.programm a,
.termin a {
    background-color: #f6f4ef;
    display: flex;
    margin-bottom: 2em;
    color:#000;
    position: relative;
    outline: none;
    transition: all .2s ease-in-out;
}
.termin a:hover,
.programm a:hover {
    background-color: transparent;
}

.termin.nolink a:first-child {
    pointer-events: none;
}
.termin a.icsexport {
    position: absolute;
    display: block;
    left: 140px;
    top: 20px;
    background: transparent;
    z-index: 2;
    width: 24px;
    height: 24px;
}
.termin .icsexport img {
  width: 24px;
  height: 24px;
}
.termin .icsexport img:hover {
  fill:red;
}

.next {
    width: 16px;
    height: 17px;
    background-image: url(images/icon_arrow_right_white.png);
    background-size: 16px 17px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.termin div,
.programm div {
    padding: 1em 2em;
}
.programm div p {
    max-width: 80%;
}

.termin h1,
.programm h1 {
    font-size: 2.2em;
}
.termin img,
.programm img { 
    width: 220px; 
    height: 220px;
    flex-shrink: 0;
}

.content .programm-details {
    list-style: none;
    padding-left: 0;
}
.programm-details li {
    margin-bottom: .5em;
}

.termin .datum span {
    font-weight: 500;
    display: block;
    line-height: 1.4em;
    font-size: 2em;
}
.termin .datum .big {
    line-height: 1em;
}
.termin .datum {
    width: 187px;
    flex-shrink: 0;
}
.termin h4.red {
    margin-top: .5em;
}
.big {
    font-size: 5em!important;
    font-weight: 500!important;
}

.programm .ticket,
.termin .ticket {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background: url(images/icon_bubble_red.png) no-repeat center;
    background-size: 64px;
    width: 64px;
    height: 64px;
    color: #fff;
    margin: 0;
    line-height: 64px;
    text-align: center;
    display: block;
    
}
.programm .ticket {
    line-height: 1.1em;
    font-size: .9em;
    padding-top: 1.2em;
}
.ticket:hover {
   filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
}

.tax-cd_kategorien .content.container {
    position: relative;
}

.cats {
    position: absolute;
    right: 0;
    top: 40px;
    list-style: none;
    padding: 0;
}
.cats li {
    display: inline-block;
    padding-left: 2em;
}
.cats li a {
    color: #000;
}

/* kalender datumswähler  #kal-select */
#kalendernavi {
    position: absolute;
    right: 0;
    top: 35px;
}

#kalendernavi,
#kalendernavi a {
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

#kal-select {
    display: inline-block;
    width: 270px;
    top: 5px;
    visibility: hidden;
}

#kal-select.slick-initialized {
    visibility: visible;
}

#kal-select .slick-slide {
    text-align: center;
}

#kal-all {
    margin-right: 10px;
}

.kal-select-year {
    margin: 0 10px;
}

.kal-prev,
.kal-next {
    display: inline-block;    
    width:9px;
    height: 9px;
    background: url(images/icon_arw_double_blk_left.svg) no-repeat center;
    background-size: 9px;
    cursor: pointer;
    padding: 0 12px;
}
.kal-next {
    background-image: url(images/icon_arw_double_blk_right.svg);
}
.kal-prev:hover {
    background-image: url(images/icon_arw_double_red_left.svg);
}
.kal-next:hover {
    background-image: url(images/icon_arw_double_red_right.svg);
}

.kal-prev.slick-disabled,
.kal-next.slick-disabled {
    opacity: .25;
}

#kalendernavi a.uline {
    border-bottom: 1px solid #000;
}

#kalendernavi .aktiv a.uline, 
#kalendernavi a.aktiv.uline {
    border-bottom: 1px solid #b70916;
}

#kalendernavi a.aktiv,
#kal-select .slick-slide.aktiv a,
#kalendernavi .kal-select-year.aktiv,
#kalendernavi .kal-select-year:hover,
#kal-all:hover,
#kal-select .slick-slide a:hover {
    color: #b70916;
}

/* musiker / team */

/* flex last item hack not working!??
.page-id-94 .cols:after {
    content:'';
    flex: auto;
    max-width: 31%
}
*/

/* team neu */
.page-id-1748 .content .left h3 {
    color: #b70916;
}

.musiker,
.team {
    position: relative;
    width: 31%;
    margin-bottom: 3.5%;
}

.musiker:after {
    content: '';
    width: 100%;
    height: 32px;
    background: green;
    position: absolute;
    background: url(images/icon_arrow_up.png) no-repeat center;
    bottom: 0;
}

.anzahlbilder {
    position: absolute;
    bottom: 4px;
    z-index: 9999;
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    display: none;
    width: 100%;
    text-align: center;
}

.musiker img {
    display: block;
    width: 100%;
    height: auto;
}

.team-infos,
.musiker-infos {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(183,8,23,.85);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .4s ease;
}

.team:after {
    /* (square) */
    content: "";
    display: block;
    padding-bottom: 100%;
}

.team-infos  {
    height: 100%;
    background-color: rgba(183,8,23,1);
}

.musiker-infos > div,
.team-infos > div {
    color: #fff;
    font-size: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
}
.team-infos h3,
.musiker-infos h3 {
    font-size: 1.6em;
    margin-bottom: .3em;
}

.team-infos a {
    color:#dbd4c0;
}
.team-infos a:hover {
    color:#111;
}
.musiker-infos {
    z-index: 95;
}
.musiker span.credit {
    position: absolute;
    bottom: 7px;
    right: 3px;
    z-index: 9;
    color: #fff;
    transform: rotate(-90deg) translate(100%, 0);
    transform-origin: right bottom;
    text-shadow: 2px 2px 1px #333;
    font-size: .8em;
    opacity: .8;
}

/* videos */

.video{
    width: 48%;
    margin-bottom: 1.8em;
}

.lyte-wrapper,
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  margin-bottom: 2em;
  width: 100%;
  padding-bottom: 56.25%!important;
}

/* < youtube light plugin */
.lyte-wrapper  {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  width: 100%!important;
  padding-bottom: 56.2%!important;
  margin: 0 0 10px 0!important;
}

.lL { display: none; width: 0;}
/* > */

.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
    flex: 0 0 48%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 27%; /* 1:56.25%; */
}

.videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



/* search */
.search h1 { 
    margin-bottom: 1em;
}
.search .content  {
    min-height: 300px;
}

.search .content a { 
    display: block;
    margin-bottom: 3em;
}
.search .content h1.title {
    font-size: 1.3em;
    margin-bottom: .3em;
}



/* footer */
#site-footer  {
    font-size: .95em;
    background-color: #ede9e0;
    /*box-shadow: 0px -8px 5px 0px rgba(200,192,180,0.45);*/
    z-index: 20;
    position: relative;
}

#site-footer .footer-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#site-footer .right {
    text-align: right;
    width: 36%;
}

#site-footer h4  {
    margin-bottom: 2em;
}
#site-footer h4 a {
    font-size: 1em;
}
#site-footer > div {
    display: flex;
    flex-wrap: wrap;
    padding-top: 36px;
    padding-bottom: 2.5em;
    justify-content: space-between;
}
#site-footer .footer-col {
    width: 25%;
}

#site-footer .foerderung {
    width: 100%;
    background: #fff;
    padding: 10px;
}

#site-footer .foerderung .flex {
    justify-content: space-between;
    padding: 0 19px;
    align-items: center;
}

#site-footer .foerderung p {
    margin: 10px 0 3px 21px;
    font-size: 11px;
}

#site-footer .foerderung img {
    max-height: 100px;
}

.kulturkurier-registration-form {
    margin: 2em 0 0 -8px;
}

#gotop {
    position: fixed;
    cursor: pointer;
    right:5%;
    bottom: 5%;
    display: none;
    width: 30px;
    height: 30px;
    text-indent: -999em;
    background-image: url(images/icon_arrow_up.png);
    background-size: 30px;
    z-index: 999;
    transition: all .3s ease-in-out;
}
#gotop:hover {
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
}

.screen-reader-text {
    display: none;
}

#menu-footer {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
}
#menu-footer li {
    font-size: 15px;
    font-weight: 500;
    margin-right: 40px;
}
#menu-footer li a {
    color: #000;
}
#menu-footer li a:hover {
    color: #b70916;
}

#site-footer .right .social {
    margin: 0;
}
#site-footer .right .social img {
    margin: -7px 0 0 35px;
    max-height: none;
}
#site-footer .right .social.yt img {
    margin-bottom: 3px;
}



/* media queries */
@media only screen and (max-width: 1460px) {
    
    #site-footer > div {
        padding-left: 30px!important;
        padding-right: 30px!important;
    }
    
    #banner .bannertext {
        left: 15%;
    }
    #banner .bannertext h1 {
        font-size: 3.2vw;
    }
    #banner .bannertext h2 {
        font-size: 2vw;
    }
    #banner .bannertext span {
        font-size: 1.6vw;
    }
    
}

@media only screen and (max-width: 1024px) {
    
    #site-footer .left,
    #site-footer .right {
        width: 80%;
        text-align: left;
    }
    
    #site-footer .foerderung p {
        margin-top: 20px;
    }
    
    #site-footer .foerderung img {
        margin-left: 0;
        margin-right: 20px;
    }    
    
    #banner .bannertext h1 {
        font-size: 5vw;
        margin-bottom: 3px;
    }
    #banner .bannertext h2 {
        font-size: 3vw;
        margin-bottom: 4px;
    }
    #banner .bannertext span {
        font-size: 2.4vw;
        margin-bottom: 3px;
        line-height: 1.4em;
    }
    
}

@media only screen and (min-width: 981px) {
    
    .musiker:hover .musiker-infos {
        height: 50%;
    }
    
    .musiker-grid .musiker:hover .musiker-infos {
        height: 35%;
    }    
    
    .musiker:hover .anzahlbilder {
        display: block;
    }
    
    .musiker:hover:after {
        display: none;
    }
    
}

@media only screen and (max-width: 980px) {
    
    /* first menu breakpoint */
    #site-header {
        padding-top: 20px;
        height: 190px;
    }
    #logo img {
        max-width: 180px;
    }
    #search {
        top:25px;
    }
    body.search-open #search-panel {
        top:186px;
    }
    #menu-main {
        float: none;
        padding-left: 3px;
        padding-top: 0;
    }
    #menu-main li:first-child a {
        padding-left: 0;
    }
    ul.sub-menu {
        left: 20px;
    }
    #banner {
        padding-top: 209px;
    }
    
    
    .musiker::after {
        display: none;
    }
    .musiker-infos {
        margin-top: 2px;
        min-height: 9em;
    }
    .musiker-infos,
    .musiker-infos > div {
        position: relative;
        width: 100%;
        padding: .8em;
    }
    .team-infos h3, .musiker-infos h3 {
        font-size: 1.4em;
        margin-bottom: .2em;
    }
    
    ul.cats {
        position: relative;
        top: 0;
        left: 0;
        line-height: 2em; 
        padding-left: 0;
    }
    ul.cats li {
        padding-left: 0;
        padding-right: 2em;
    }
    
    .termin a {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .termin .details {
        width: 100%;
        border-top: 3px solid #fff;
    }
    .termin .next {
        top: 248px;
        right: 20px;
    }
    
    #menu-footer {
        margin-bottom: 0;
    }
    
    .footer-nav {
        flex-direction: column;
    }
    
    .footer-nav div {
        margin: 1em 0;
    }
    
    .social {
        margin: 10px 32px 10px 0;
    }
    
    #site-footer .foerderung img {
        max-width: 160px;
    }
    
}


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

    #kalendernavi {
        position: relative;
        margin: 1em 0 2em 0;
        top: 0;
    }
    
    
    .musiker, .team {
        position: relative;
        width: 48%;
        margin-bottom: 3.5%;
    }
    
    .musiker-infos {
        min-height: 7.5em;
    }
    
    .tax-cd_kategorien .mobile-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .tax-cd_kategorien .mobile-flex .programm {
        width: 48%;
        background-color: #ede9e0;
        margin-bottom: 3em;
        
    }
    .tax-cd_kategorien .mobile-flex .programm a {
        display: block;
    }
    .tax-cd_kategorien .mobile-flex .programm img {
        width: 100%;
        height: auto; 
    }
    .tax-cd_kategorien .programm .next {
        display: none;
    }
    
    #menu-footer {
        display: block;
    }
    #menu-footer li {
        display: block;
        margin: 1.4em 0;
    }
    #site-footer .right .social img {
        text-align: left;
        margin: 0 35px 0 0 ;
    }
    
    #site-footer .foerderung .flex {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #site-footer .foerderung img {
        max-width: 180px;
    }    
    
    #site-footer .foerderung .flex a {
        margin: 15px 0;
        display: block;
    }

    .left img {
        max-width: 100%;
        height: auto;
    }
    
} 


@media only screen and (max-width: 736px) {
    
    #banner .bannertext h2,
    #banner .bannertext span {
        display: none;
    }
    
    #banner .bannertext span.mobileonly {
        display: block;
    }
    
    #menu-main li a {
        padding: 1em 10px;
    }
    

     /**
    *
    *  mobile menu
    *
    **/
    #site-header {
        position: relative;
        height: auto;
    }
    #banner {
        padding-top: 0;
    }
    #site-header #menu-main, 
    #search {
        display: none;
    }
    #site-header nav.open #menu-main {
        display: block;
    }
    #site-header nav.open #search{
        display: flex;
    }
    .mobile-button {
        display: block;
    }
    #search {
        position: relative;
        top: auto;
        right: auto;
    }
    #search-panel {
        position: relative;
        display: none;
    }
    body.search-open #search-panel {
        display: block;
        top: 0;
    }
    #search-panel #searchform,
    #search-panel #searchform > div {
        width:98%;
    }    
    /*
    #menu-main,
    .single-programm #menu-item-109 ul.sub-menu,
    .single-cd #menu-item-226 ul.sub-menu,
    ul.sub-menu li,
    .current-menu-parent ul.sub-menu, 
    .current-menu-parent ul.sub-menu li {
        display: block;
        position: relative;
    }
    */
    #menu-main,
    ul.sub-menu li  {
        display: block;
        position: relative;
    }
    
    #menu-main li {
        line-height: 2em;
    }
    #menu-main li.languages {
        padding: 0;
    }
    #menu-main li.languages a,
    #menu-main li a {
        padding: 2px 0 2px 0;
        display: inline-block;
    }    
    
    #menu-main a,
    #menu-main a:link,
    #menu-main a:visited,
    #menu-main a:focus,
    #menu-main a:hover,
    #menu-main a:active {
        color: #111;
    }
    
    ul.sub-menu {
        display: none;
        position: relative;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    #menu-main li:hover ul.sub-menu {
        /* no more hover ! in mobile */
        display: none;
    }
    
    /*#menu-main li.current-menu-parent:hover ul.sub-menu,*/
    #menu-main li.fix ul.sub-menu {
        display: block;
    }
    
    #menu-main li.menu-item-has-children > a:after {
        content: ' ';
        position: relative;
        display: inline-block;
        width: 7px;
        height: 7px;
        background: url(images/icon_menu_arw.png) top left no-repeat;
        background-size: 7px;
        margin-left: 7px;
    }
    #menu-main li.menu-item-has-children.fix > a:after {
        transform: rotate(90deg);
    }  
    
    #menu-main > li.current-menu-parent > a:after,
    #menu-main li.current-menu-parent > a:after,
    #menu-main li.current-menu-item > a:after {
        background-image: url(images/icon_menu_arw_red.png);
    }    
    
    #menu-main > li.current-menu-parent > a {
        border-bottom: 1px solid #b70916;
        color: #b70916;
    }
    
    #search {
        top: -5px;
    }
    .icon-search {
        margin-left: 10px;
    }
}


@media only screen and (max-width: 640px) {
    
    .left, .right  { width: 100%; }
    
    .programm img {
        display: none;
    }
    .single-cd .programm img {
        display: inline;
    }
        
    .programm a div {
        padding: 2em 1em 2em 1em;
    }
    .single-cd .cols,
    .single-programm .cols {
        flex-direction: column-reverse;
    }
    
    .tax-cd_kategorien .programm a {
        display: block;
    }
    
    .tax-cd_kategorien .programm img {
        display: block;
        width: 100%;
        height: auto;
    }
    
    .single-cd .programm .next  {
        display: none;
    }
    
    #site-header {
        padding: 20px 0;
    }
    
   

    #searchform {
        margin-right: 0;
    }
    #banner span {
        font-size: .8em;
    }
    .musiker-infos,
    .musiker-infos > div {
        padding: .5em;
    }
    .musiker-infos h3 {
        font-size: 1.3em;
    }
    
    
} 

@media only screen and (max-width: 600px) {
    
    .kal-select-year {
        margin-bottom: 2em;
    }
    
    .kal-select-year:nth-child(3):after {
        content: " ";
        display: block;
        width: 100%;
        height: 16px;
            
    }
    
}
    
@media only screen and (max-width: 540px) {
    
    .single-cd .programm a,
    .single-cd .programm img {
        display: block;
    }
    .single-cd .programm img,
    .tax-cd_kategorien .mobile-flex .programm,
    #site-footer .footer-col {
        width: 100%;
        height: auto;
    }

    .termin div {
        padding: 1em;
    }
    .termin .next {
        display: none;
    }
    .termin a {
        flex-wrap: wrap;
    }
    .termin .datum,
    .termin img {
        width: 50%;
    }
    .termin img {
        height: 50%;
    }
    .termin .details {
        width: 100%;
        border-top: 3px solid #fff;
        padding-right: 20%;
    }
    .termin .details h1 {
        font-size: 1.6em;
    }    
    .termin .datum span {
        font-size: 1.6em;
    }
    .termin h4.red {
        margin-top: .4em;
    }
    .termin a.icsexport {
        left:38%;
    }
    .big {
        font-size: 3em!important;
    }
    .termin div, .programm div {
        padding: 1em;
    }
    
} 

@media only screen and (max-width: 480px) {
    
    .tax-cd_kategorien .mobile-flex .programm,
    .musiker, 
    .team,    
    .video {
        width: 100%;
    }
    
    .musiker-infos {
        min-height: 0;
        height: auto;
    }
    .musiker-infos > div {
        height: auto;
        transition: none;
        position: relative;
        display: block;
        transform: none;
        top: auto;
        left: auto;
    }
    
    #site-header {
        padding: 12px 0;
    }
    
    #logo img {
        max-width: 160px;
    }
    
    .mobile-button {
        top:    31px;
    }
    
    #banner span {
        font-size: .7em;
    }
    
    
}

/* temp */
.page-id-78 .content {
    display: none;
}
.page-id-78 #menu-main .languages a.red {
    color: #000!important;
}
.page-id-78 #menu-main .languages a.en {
    color: #b70916;
}