/**
 * Klingtjut styles, ported from the Bootstrap 3 "klingtgut" theme (css/style.css).
 */

/* ubuntu-300 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ubuntu-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/ubuntu-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/ubuntu-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/ubuntu-v20-latin-300.woff') format('woff'), /* Modern Browsers */
  url('../fonts/ubuntu-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/ubuntu-v20-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-300italic - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/ubuntu-v20-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/ubuntu-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/ubuntu-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/ubuntu-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */
  url('../fonts/ubuntu-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/ubuntu-v20-latin-300italic.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ubuntu-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/ubuntu-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('../fonts/ubuntu-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/ubuntu-v20-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ubuntu-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/ubuntu-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/ubuntu-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/ubuntu-v20-latin-500.woff') format('woff'), /* Modern Browsers */
  url('../fonts/ubuntu-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/ubuntu-v20-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/ubuntu-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('../fonts/ubuntu-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/ubuntu-v20-latin-700.woff') format('woff'), /* Modern Browsers */
  url('../fonts/ubuntu-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../fonts/ubuntu-v20-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */
body{
width: 100%;
height: 100%;
font-family: ubuntu;
font-size: 20px;
    color: #000;
margin: 0;
}


.cancelled{color: #810081; font-size: 40px;}

#navbar{background-color:white; border: none;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    background-color: #810081;

}

body.path-node{background-color: white;}
body.path-frontpage{background-color: #0088aa;}

.path-frontpage .content a, .path-frontpage .loginheader a {font-weight: bold;}

.front-content{margin-top: 160px;}

.content a, .content a:visited {color: #0088aa ;}
.content a:hover{text-decoration: none; color: #800080 ;}

.path-frontpage .content a, .path-frontpage .content a:visited, .path-frontpage .loginheader a, .path-frontpage .loginheader a:visited {
    color: #ffffff;
    text-decoration: none;
}



.path-frontpage .content a:hover, .path-frontpage .loginheader a:hover{
    color: #800080;
}

.path-frontpage .page-header{display: none;}

#logo_title {
    top: 6px;
    left: -170px;
    position: relative;
    font-size: 143%;
    float: left;
}

#logo_title span {
    color:
            #800080;
    font-weight: 500;
}

.path-frontpage .logo img{width: 316px; height: 114px;}

.loginheader .kat_schrift_rechts, .loginheader .image_right {
    margin-top: 40px;
}
.loginheader{float: right; width: 28%;}

.spruch{
    left: -85px;
    position: relative;
    font-size: 75%;
}
.strich {

    position: relative;
    display: inline-block;
    width: 27px;
    top: 103px;
    left: -195px;

}

.kategorie_bereich .kat_schrift_links,
.kategorie_wissen .kat_schrift_links,
.kategorie_login_mobile .kat_schrift_links,
.kategorie_fotos .kat_schrift_links{
    display: inline-block;
    margin: 16px 0 0 0;
    padding: 0 0 7px 0;
    line-height: 25px;
/*    border-bottom: solid 2px*/
    black;
    width: 60%;
}

.kategorie_bereich img {
    vertical-align: bottom;
}

.kat_schrift_rechts {
    display: inline-block;
    margin: 16px 11px 0 -48px;
    padding: 0 0 7px 0;
    line-height: 25px;
    /*border-bottom: solid 2px black;*/
    width: 60%;
    text-align: right;
    float: left;
}


/*
.user-logged-in .menuProgramm, .user-logged-in  .menuFotos, .user-logged-in  .menuInfos, .user-logged-in  .menuAnfahrt, .user-logged-in  .menuBezahlen {
    top: -34px;
}*/

.menuRegister, .menu--account a[data-drupal-link-system-path=user], .menu--account a[data-drupal-link-system-path=user\/logout], .menu--account a[data-drupal-link-system-path=user\/login] {
    background-repeat: no-repeat;
    bottom: -14px;
    line-height: 0 !important;
    border-bottom: 2px solid black;
    font-size: 16px;
}




.menu--account {
    bottom: 46px !important;
    position: relative;
  height: 0;
}

.icons_hochkant img {
    height: 115px;
    width: 50px;
    bottom: 60px;
    position: relative;
    left: 39px;
  display:none;
}

.kategorie_image{width: 16%; float: left; margin-right: 30px;}
.image_right{ margin-left: 30px;}

.kat_titel {
    font-size: 180%;
    font-weight: 500;
}

.kat_subtitle, .kat_subtitle_kunst, .kat_subtitle_essen{
    color: white;
    font-size: 85%;
}

.kat_subtitle_essen {
    padding-top: 65px;
}

.kategorie_bereich, .kategorie_login_mobile {clear: both;}
.kategorie_bereich, .kategorie_wissen, .kategorie_fotos{margin: 20px 0 20px 0;}
.kategorie_login_mobile {margin: 20px 0 20px 0;}


.kategorie_bereich .kat_subtitle{
    padding: 40px 0 0 100px;
}

.kategorie_bereich .kat_subtitle_kunst{
    padding: 25px 0 0 20px;
}

.tanzen{padding: 60px 0 0 49px;}

.panda {
  perspective: 800px;
}

.panda img {
    width: 100%;
}

.kgfoto {

    width: 100%;
    padding-bottom: 20px;

}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 25px;
    margin-right: 15px;
  margin-left: 15px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.olMap {

    z-index: 0;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default;

}

.headerimage {

    background-color:#0088aa;;
    padding: 10px 0 10px 65px;
    border-bottom: 2px solid #000000;

}

.navbar.container, .navbar.container-fluid {
  margin-top: 0px !important;
}
.navbar-btn {
  margin-top: 0px !important;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color: #0088aa;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #0088aa;
}



#edit-mail-0-value--description{display: none;}


@media (max-width: 776px) {

  .menu--account{display: none;}

  .menuProgramm::before {
    content: "";
    background-size: 40px 40px;
    background-image: url(../images/feiern_logo.svg);
    background-repeat: no-repeat;
    width: 40px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 9px;
    color: white;
    height: 40px;
    margin-bottom: -4px;
  }

  .menuInfos::before {
    content: "";
    background-size: 40px 40px;
    background-image: url(../images/wissen_logo.svg);
    background-repeat: no-repeat;
    width: 40px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 9px;
    color: white;
    height: 40px;
    margin-bottom: -4px;
  }

  .menuFotos::before {
    content: "";
    background-size: 40px 40px;
    background-image: url(../images/fotoapparat.svg);
    background-repeat: no-repeat;
    width: 40px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 9px;
    color: white;
    height: 40px;
    margin-bottom: -4px;
  }

  .menuTickets::before{
    content: "";
    background-size: 40px 40px;
    background-image: url(../images/zelt.svg);
    background-repeat: no-repeat;
    width: 40px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 9px;
    color: white;
    height: 40px;
    margin-bottom: -4px;
  }

  .menuBezahlen::before{
    content: "";
    background-size: 40px 40px;
    background-image: url(../images/newsletter.svg);
    background-repeat: no-repeat;
    width: 40px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 9px;
    color: white;
    height: 40px;
    margin-bottom: -4px;
  }

}

@media (min-width: 768px) {



  .nav > li.first{margin-top: 0 !important;}
  .home_icon{
    display: none;
  }
  .navbar-default .navbar-nav > li > a {
    color: black !important;
    font-size:initial !important;
  }
  .menu.menu--main.nav.navbar-nav{background-color:white !important; }
  .navbar-default .navbar-nav > li > a:hover {
    color: #800080 !important;
  }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {

    background-color: #fff !important;

  }

  .navbar-default .navbar-nav > .active > a.menuRegister {background-color: #0088AA !important;}


  #edit-field-ticket-auswaehlen--wrapper--description {
    font-size: 17px !important;
  }

  .menuProgramm, .menuFotos, .menuInfos, .menuTickets, .menuAnfahrt, .menuBezahlen {
    background-repeat: no-repeat;
    top: -2px;
    line-height: 0 !important;
    border-top: 2px solid black;
    font-size: 16px;
  }

  .mobileOnly {
    display: none !important;
  }

  .menuRegister, .menu--account a[data-drupal-link-system-path=user], .menu--account a[data-drupal-link-system-path=user\/logout], .menu--account a[data-drupal-link-system-path=user\/login] {
    background-image: url('../images/link_background_white_120.svg');
    width: 150px;
    background-color: #0088aa !important;
  }
  .icons_hochkant img{display: inline-block;}


  .menuProgramm, .menuBezahlen{
    width: 120px;}

  .menuFotos, .menuInfos, .menuAnfahrt, .menuTickets {
    width: 83px;
    height: 40px;
  }
  .menuProgramm, .menuBezahlen {
    background-image: url('../images/link_background_120.svg');
  }
  .menuFotos, .menuAnfahrt, .menuInfos, .menuTickets {
    background-image: url('../images/link_background.svg');
  }
}

@media (min-width: 992px) {
    .kategorie_wissen{padding: 60px 0 0 40px;}
    .kategorie_fotos{padding: 60px 0 0 0;}
    .kategorie_awareness{padding: 60px 0 0 0;}
    .kategorie_image{width: 25%;}
    .kategorie_awareness .kategorie_image{width: 19%;}
    .kategorie_bereich, .kategorie_login_mobile, .kategorie_wissen, .kategorie_fotos{margin: 0;}
    .front-content{margin-top: 40px;}


}

@media (min-width: 1200px) {
   .strich {left: -230px; }
    /*.user-logged-in .menuProgramm, .user-logged-in .menuFotos, .user-logged-in .menuInfos, .user-logged-in .menuAnfahrt, .user-logged-in .menuBezahlen {
        top: -2px;
    }*/
}


.ckeditor-accordion-container > dl dt > a, .ckeditor-accordion-container > dl dt > a:not(.button) {
  background-color: #0088AA;
}
.ckeditor-accordion-container > dl dt > a:hover, .ckeditor-accordion-container > dl dt > a:not(.button):hover {
  background-color: #800080;
}
.ckeditor-accordion-container > dl dd {padding:15px;}
.ckeditor-accordion-container > dl{border-color: #800080;}
.ckeditor-accordion-container > dl{border: 1px solid black;}

/*TIMETABLE KRAM*/
.timecell {
  position: relative;
  top: -1.5rem;
}
.w4{width: 24%;}
 .w3{width: 32%;}
  .w2{width: 10%;}
table {

      border-collapse: separate !important;
    }
thead{position: sticky;}
    td, th {

      padding: 5px;
    }

    th {
      color: #810081;;
    }
  @media (max-width: 991px) {
  .timecell{font-size: small;}
  .dj, .band, .timetable{font-size: small;}

  }
	.dj{background-color: #0088AA; color: white; }
	.band{background-color: #810081; color: white; }
	.dj, .band {
  vertical-align: middle !important;
  text-align: center;
 border: 1px solid; border-color: white;
}

td.dj, td.band {
  position: relative;
  height: 100%;
}

.content .dj a{color: white;}
.content .dj a:hover{color: #810081;}
.content .band a{color: white;}
.content .band a:hover{color: #0088AA;}


.genre {
  position: absolute;
  bottom: 5px;
  right: 10px;
  opacity: 0.7;
  font-size: small;
  text-transform: uppercase;
}

 @media (max-width: 576px) {
.genre{display: none;}
}

.path-frontpage .alert-success{
  background-color: #800080;
  border-color: #800080 #800080 #800080 transparent;
  color: white
}


.path-user .tabs--primary{display: none;}
#edit-field-ticket-auswaehlen--wrapper--description{margin-top: 15px; margin-bottom: 15px; color: #777777; font-size: 12px;}


.menu.menu--main.nav.navbar-nav{background-color:#800080; font-size:150%; }
.nav > li {
  padding-left: 10px;
  margin-bottom: 10px;
}

.nav > li.first{margin-top: 10px;}

.home_icon {
  float: left;
  height: 6px;
  margin-left: 20px;
  margin-top: 10px;
}
.home_icon img {
  height: 30px;
}

#edit-submit{
  margin-top: 15px;
  margin-bottom: 15px;
}

.path-frontpage .newslettersvg img{width: 72px; height:63px;}

.form-item-anzahl-personen .control-label, .form-item-anzahl-personen label {
  display: block;
}