/* Raleway:300,400,        500,700,       600 

hellbeige:   #f2e9d9;
hellgrau:  #e6e6e6;
dunkegrau:  #393939;
gold:       #b09f73;

300;0,400;0,700;1,300;1,400;1,700
*/

* {
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

      border: none!important; 
}

html, body {
    font-family: 'Roboto Condensed', Verdana, Arial, sans-serif;
    font-weight: 300;
    font-size: 100%;
    line-height: 1.5em;
    color: black;
}

h1 {
  padding: 40px 0 20px 0;
  font-size: 2em;
   font-weight: 300;
}
h2 {
  padding: 30px 0 10px 0;
  font-size: 1.125em;
   font-weight: 400;
}
.clearfix,
.clearboth {
  clear: both;
}
/* ticker */

/* 
@keyframes ticker-kf {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-54rem, 0, 0);
  }
}

.img-ticker {
  animation: ticker-kf 18s linear infinite;
}

*/


/* links */

a {
    color: #393939;
    font-size: 1.125em;
    font-weight: 300;
    text-decoration: none;
    display: inline-block;
}

a:hover {
    color: #b09f73;
}
.black {
  background-color: black;
}
.light {
  background-color: #f2e9d9;
}
.lightgrey {
  background-color: #e6e6e6;
}
.gold {
  background-color: #b09f73;
}
.space40 {
  height: 40px;
}

.kleiner {
  font-size: 0.8em;
}

.wrapper p {
  padding: 10px 0;
}
.main-top-header-nav {
    background: #000;
    height: 40px;
}
.main-top-header-nav-inner, 
.main-above-navi-inner {
    margin: 0 20px 0 auto;
    padding: 0 0 6px 20px;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px black dotted;
}

header ul,
.footer ul {
    list-style-type: none;
}
.main-top-header-nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 3px;
    display: inline-block;
    text-transform: uppercase;
}
.form-language {
  padding-right: 20px;
}
.main-top-header-nav .form-language ul {
  float: right;
}
.main-top-header-nav .form-language ul li {
    padding-top: 3px;
    float: left;
}
.main-top-header-nav .form-language li:first-child:after {
    content: " | ";
}


/* header */
header {
  padding: 0 20px;
  position: relative;
  line-height: 0;
}
.page-header-container {
   
}

.logo div#logoimg img {
    max-width: 160px;
    height: auto;
}
.logo div#logotext img {
  padding-left: 0;
  padding-top: 20px;
    width: 260px;
    height: auto;
}



.main-navi-inner { 
    max-width: 1200px;
    margin: 0 auto;
    border: 1px black dotted;
  }

.main-navi a {
    color: #393939;
    text-decoration: none;
    position: relative;
    line-height: 24px;
    font-size: 1.125em;
    font-weight: 300;
}
.main-navi nav ul li ul li a {
  font-weight: 300;
  padding-left: 40px;
}
.main-navi a:hover {
    color: #000;
    font-weight: 400;
}
#mainnav nav ul#toggle li {
      padding: 6px 0;
  }

#mainnav nav ul#toggle li div a span.menue_subtitle {
    padding: 0 20px;
        font-size: 12px;
        text-transform: none;
        white-space: nowrap;
      }

.nav-primary li a span {
    position: relative;
    top: -24px;
    left: 120px;
}


span.the-btn {
    float: right;
    font-size: 1.95em;
    margin-right: 0px;
    padding: 0 10px 0 20px;
    width: 70px;
    font-weight: bold;
}
#toggle li div a.plusminus {
    cursor: s-resize;
    display: block;
    float: right;
    width: 60px;
}

#mainnav nav ul#toggle li ul {
    display: none;
}


/* galerie  -------------------------------------------------*/

ul { list-style: none; margin:0; }
ul.galerierep { padding:0; }

.galerierep figcaption p.location_1 {
  font-size: 16px;
  padding: 0;
}

.galerierep figcaption p.location_2 {
  font-size: 13px;
  padding: 0;
}

.galerierep {
    display:block;
}
.fancybox img {
  width: 100%;
}
/* quote  -------------------------------------------------*/
.quote {
  float: right;
  padding-right: 40px;
  padding-bottom: 40px;
}
blockquote p {
  font-style: italic;
  font-size: 1.125em;
}

/* img inside text  -------------------------------------------------*/
div.col-3-4 figure img {
  max-width: 100%;
}

.imgtextkleiner div.col-3-4 figure {
  /* width: 50%; */
  display: inline-block;
}
.imgtextkleiner div.col-3-4 figure img {
  padding-right: 20px;
  padding-bottom: 0;
  max-width: 400px;
  width: 100%;
}
.imgtextkleiner.highlight div.col-3-4 figure img {
  max-width: 600px;
}

/* video */
.imgtextkleiner.highlight div.col-3-4 div.video p {
  font-weight: 400;
  width: 240px;
  padding-top: 20px;
}
.imgtextkleiner.highlight div.col-3-4 div.video {
  max-width: 240px;
  padding-right: 20px;
}


div.col-3-4 figure figcaption,
.imgtextkleiner div.col-3-4 figure figcaption {
  font-size: 14px;
  padding-bottom: 20px;
}
.zh-paris {
  padding-bottom: 10px;
}
.zh-paris p {
  padding: 0;
}

/*
.zh-paris-float div.col-3-4 .galerierep div.col-1-4:nth-child(4) {
  clear: both;
}
.zh-paris-float div.col-3-4 .galerierep div.col-1-4:nth-child(5) {
  float: left;
}/*

/* konzerte in aller welt  -------------------------------------------------*/
.concerts.galerierep {
  padding: 20px 0;
}
.concerts.galerierep li {
  padding:  0;
}
.concerts.galerierep li figure {
 
}
.concerts.galerierep li figure a {
  /*  font-weight: 400;  */
   padding: 16px;
}
.concerts.galerierep li figure a:hover {
  /*  font-weight: 400;  */
  /* background-color: #e6e6e6; */
    background-color: white;
}

.concerts.galerierep li p.land {
   /* font-weight: 400; */
    float: left;
    width: 80%;
    color: #b09f73;
   /* color: #ad9556; /*gold dunkel*/
    padding: 0 0 0 10px;
    line-height: 2em;
    font-size: 1em;
    background-color: #f8f8f8;
    font-weight: 400;
}
.concerts.galerierep li p.stadt {
  float: left;
  color:  black;
  width: 210px;
  padding: 5px 0 0 0;
}
.concerts.galerierep li p.kirche {
  float: left;
  color:  black;
  width: 190px;
  padding: 5px 0 0 0;
}
.concerts.galerierep li figure a.fancybox img {
  width: 60px;
  height: auto;
  padding: 8px 0 3px 0;
}
.concerts.galerierep li figure figcaption {
  display: none;
}

/* Fancybox open */
.fancybox-overlay.fancybox-overlay-fixed .fancybox-opened p.land {
    font-weight: 400;
    padding-bottom: 10px;
}

.fancybox-overlay.fancybox-overlay-fixed .fancybox-opened p.stadt,
.fancybox-overlay.fancybox-overlay-fixed .fancybox-opened p.kirche,
.fancybox-overlay.fancybox-overlay-fixed .fancybox-opened p.jahr {
  display: inline;
}


.fancybox-overlay.fancybox-overlay-fixed .fancybox-opened p.programm {
  padding-top: 10px;
}

/* mitwirkende hoerbuch  -------------------------------------------------*/
.quote.hoerbuecher {
  padding-bottom: 0;
  font-size: 13px;
}
.hoerbuch {
  position: relative;
}
.hoerbuch li {
  padding:  0 0 20px 0;
  width: 100%;
  position: relative;
    cursor: pointer;
}
.hoerbuch li img {
  width: 160px;
  height: auto;
}
ul.hoerbuch li p.mitwirkender {
  padding-top: 0;
  width: 160px;
}
ul.hoerbuch li figure.mitwirkender_infos {
  
}

ul.hoerbuch li figure.mitwirkender_infos p {
padding: 6px;
}
.hoerbuch div.element-item {
  border: 1px red dotted;
  width: 100%; 
  /* height: 300px; */
}


.hoerbuch div.element-item a {
  display: none; 
  z-index: 10;
  font-size: 14px;
  line-height: 16px;
  padding: 0;
  color: #000;
 

}
ul.hoerbuch li:hover div.element-item a {
  display: block;
}

/* wissen weiter geben */

div.cv p.cv_year,
div.cv p.cv_text {
  padding: 4px 0 10px 0;
}


/* footer */
/* ===================================================================================================== */

.footerlinks {
  padding:  40px 0 0 0;
  float: left;
}
.footerlinks ul {
  list-style-type: none;
}
.footerlinks ul li a {
  padding: 3px 3px 3px 20px;
  color: #393939;
  text-decoration: none;
  display: inline-block;
}
.sinuslogo {
  padding: 10px 0 0 20px;
}
.sinuslogo img {
  width: 40px;
  height: auto;
}
.footer {
  text-align: center;
} 

.footer ul li {
  padding: 10px 10px 3px 10px;
  font-size: 12px;
  color: #393939;
  text-decoration: none;
  display: inline-block;
}
.footer ul li a {
  text-decoration: none;
    color: #999;
}

@media screen and (min-width:482px) {   
          .concerts.galerierep li p.stadt {
      
          width: 150px;
        }

}


  @media screen and (min-width:500px) {   /* Name neben Bild */
        .logo div#logoimg,
        .logo div#logotext {
            display: inline-block;
            float: left;
            line-height: 0;
        }
        .logo div#logotext img {
          padding-left: 20px;
          padding-top: 60px;
            width: 260px;
            height: auto;
        }
        /* Stationen */
          .cv p.cv_year {
            width: 100px;
            float: left;
          }

                  /* hoerbuch */ 
         .hoerbuch li {
            height: 380px;
          }         

        .hoerbuch div.element-item {
          position: absolute;
          border: 2px red dotted;
          width: 100%;
          cursor: pointer;
          top: 0;
        }

        .hoerbuch div.element-item a {
          /* left: calc(25% + 10px);*/
          left: 170px;
          position: absolute;
        }
        .hoerbuch div.element-item:hover a, 
        .hoerbuch div.element-item:focus a {
          height: 200px;
        }



  }


      @media screen and (min-width:610px) {   /* Hauptnavi nebeneinander */
      body {
          border: 2px dotted green;
        }


      .main-top-header-nav-inner {
        padding: 0;
      }
      .main-top-header-nav ul {
        float: right;
      }
      .main-top-header-nav ul li {
        float: left;
      }
      .main-top-header-nav-inner>ul>li>a {
        padding: 6px 20px;
      }

      #mainnav nav ul#toggle li:last-child div a {
        padding: 4px 0 4px 30px;
      }
      #mainnav nav ul#toggle li {
          padding: 4px 0 4px 0;
      }
      #mainnav nav ul#toggle li ul li {
          display: block;
          float: none;
          padding: 2px 0 2px 0;
          position: relative;
      }
      #mainnav nav ul#toggle li.active div a {
          color: #000;
          font-weight: 400;
      }

      /* ======================================================= */
      /* PAGE - LAYOUT   - MAINNAV                                         */
      /* ======================================================= */

      #mainnav {
  
        margin: 0 auto;
        max-width: 1200px;  
        position: relative;
      }
      #mainnav nav>ul{ 
        list-style-type: none;
      }

      #mainnav nav ul li {
        float: left;
      } 
      #mainnav nav ul#toggle li ul {
        padding-top: 10px;
       }
      #mainnav nav ul#toggle li:hover ul {
        display: block;
      }
      #mainnav nav ul#toggle li div a span.menue_subtitle {
      position: absolute;
      top: 24px;
      left: 0;
      }
      #mainnav nav ul#toggle li:first-child div a {
          width:  150px;
      }
      #mainnav nav ul#toggle li:nth-child(2) div a {
          width:  160px;
      }
      #mainnav nav ul#toggle li:nth-child(3) div a {
          width:  150px;
      }

 
      
      #mainnav nav li a {
          padding: 4px 30px;
          display: inline-block;
          white-space: nowrap;
          position: relative;
        }

      #mainnav nav ul li.active a, 
      #mainnav nav li a:hover {
        color: #000;
        transition: background-color 0.5s ease-in-out;
        } 
        
        /* Sub Menus */
      #mainnav nav li>ul {
        position: absolute;
       
        font-size: 0.83em;
        z-index:600;
        background-color:#f2e9d9;
        }
      #mainnav nav li:hover ul {
          display: block;
        }
      #mainnav nav li>ul>li {
          display: block;
          float: none;
          text-align: left;
        }         

      #mainnav nav ul li.active ul li a {
        color:  grey;
      }


      #mainnav nav ul li div a:hover,
      #mainnav nav ul li.active ul li.active a,
      #mainnav nav ul>li>ul>li a:hover {
        color: #000;
        font-weight: 400;
        transition: background-color 0.5s ease-in-out;
        } 
      
      #toggle li div a.plusminus {
        display: none;
        }  
                  /* hoerbuch */ 
         .hoerbuch li {
            height: 320px;
          } 
      .footer {
        width: 340px;
        margin: 0 auto;
      }
      .footer ul li {
        padding: 3px 10px 3px 0;
        font-size: 14px;
      }

  }

    @media screen and (min-width:640px) {   /* Hauptnavi neben Bild*/


          /* konzerte in aller welt */

        .concerts.galerierep li figure a {
           padding: 0 0 0 16px;
        }


        .concerts.galerierep li p.land {
          padding: 22px 0 24px 10px;
          height: 70px;
          width: 180px;
        }

        .concerts.galerierep li p.stadt {
          padding: 22px 0 0 0;
          width: 150px;
        }

        .concerts.galerierep li p.kirche {
          padding: 22px 0 0 0;
        }
        .concerts.galerierep li figure {
          height:  70px;
        }

}



          @media screen and (min-width:760px) {   /* Hauptnavi neben Bild*/


          .logo div#logotext img {
            padding-left: 30px;
            padding-top: 40px;
            width: 300px;
            height: auto;
          }
          .main-navi {
              left: 180px;
              top: 120px;
              position: absolute;
          }

                  /* hoerbuch */ 
         .hoerbuch li {
            height: 230px;
          } 




          /* konzerte in aller welt   MACHEN */

        .concerts.galerierep li figure a {
           padding: 0 0 0 10px;
        }
        .concerts.galerierep li p.stadt {
          width: 120px;
        }
        .concerts.galerierep li p.kirche {
          width: 160px;
        }

        }


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

              .logo div#logoimg img {
                max-width: 200px;
                height: auto;
              }
                .logo div#logotext img {
                  padding-left: 40px;
                  padding-top: 56px;
                  width: 300px;
                  height: auto;
                }
                .main-navi {
                    left: 220px;
                    top: 150px;
                    position: absolute;
                }

              #mainnav nav li a {
                padding: 4px 60px 4px 30px;

              }

                                /* hoerbuch */ 
         .hoerbuch li {
            height: 240px;
          } 


              }