*,
*::before,
*::after { 
  box-sizing: border-box;
}

@font-face {
    font-family: 'Roboto';
    src:         url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
                 url('../fonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style:  normal;

}

@font-face {
    font-family: 'Roboto Bold';
    src:         url('../fonts/roboto-bold.woff2') format('woff2'),
                 url('../fonts/roboto-bold.woff') format('woff');
    font-weight: 700;
    font-style:  normal;
}

@font-face {
    font-family: 'Roboto Flex';
    src:         url('../fonts/roboto-flex-medium.woff2') format('woff2'),
                 url('../fonts/roboto-flex-medium.woff') format('woff');
    font-weight: 700;
    font-style:  normal;
}

@font-face {
    font-family: 'Roboto Condensed';
    src:         url('../fonts/robotocondensed-light-webfont.woff2') format('woff2'),
                 url('../fonts/robotocondensed-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
/*@font-face {
    font-family: 'Pinyon';
    src:         url('../fonts/pinyonscript-regular-webfont.woff2') format('woff2'),
                 url('../fonts/pinyonscript-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style:  normal;
}*/


/*@keyframes animationWappenMobile {
  0%   {width:80%; opacity:0%;}
  15%  {width:80%; opacity:100%;}
  70%  {width:80%; opacity:100%;}
  100% {width:30%; opacity:100%;}
}

@keyframes animationWappen {
  0%   {height:80vH; opacity:0%;}
  15%  {height:80vH; opacity:100%;}
  70%  {height:80vH; opacity:100%;}
  100% {height:30vH; opacity:100%;}
}*/

/* @keyframes fadeOut {
  0% {opacity: 95%; display: flex; height: 100%; width: 100%;}
  75% {opacity: 95%; display: flex; height: 100%; width: 100%;}
  99% {opacity: 0%; display: none; height: 100%; width: 100%;}
  100% {opacity: 0%; display: none; height: 0; width: 0;}
} */

/* @keyframes fadeOutWappen {
  0% {opacity: 100%; display: block;}
  50% {opacity: 100%; display: block;}
  100% {opacity: 0%; display: none;}
} */

@keyframes fadeIn {
  0% {opacity: 0%;}
  100% {opacity: 100%;}
}

* {
  margin:  0;
  padding: 0; 
}

body {
  padding:          0 0 52px 0;
  padding:          0;
  margin:           0;
  min-height:       100vH;
  position:         relative;
  background-color: rgb(40,40,40);
  color:            rgb(255,255,255);
  font-family:      'Roboto Flex';
  @media only screen and (min-width: 600px) {
    padding: 0
  }
}

.error {
  color: #ff0000;
}

.error-login {
  color:   #ff0000;
  font-size: .9rem;
  margin: 5px 0;
}

.btn {
  border:             none;
  outline:            none;
  background-color: #ffcc00;
  padding:            8px;
  cursor:             pointer;
}

strong {
  font-family: 'Roboto Bold';
  font-weight: 700;
}

.non-mobile-inline {
  display: none;
  @media only screen and (min-width: 900px) {
    display: inline-block;
  }
}
/* 
.startup-layer {
  position:                  fixed;
  top:                       0;
  left:                      0;
  bottom:                    0;
  right:                     0;
  display:                   flex;
  justify-content:           center;
  align-items:               center;
  align-content:             center;
  min-height:                100vH;
  height:                    100%;
  width:                     100%;
  background:                rgb(35,35,35);
  opacity:                   95%;
  -webkit-backdrop-filter:   blur(15px);
  backdrop-filter:           blur(15px);
  z-index:                   99;
  animation-name:            fadeOut;
  animation-duration:        3.6s;
  animation-delay:           0.2s;
  animation-fill-mode:       forwards;
  animation-timing-function: ease-in;
} */

/* .startup-layer > .startup_layer__img-wappen {
  width:                     60%;
  opacity:                   0;
  animation-name:            fadeOutWappen;
  animation-duration:        2.8s;
  animation-delay:           0.2s;
  animation-fill-mode:       forwards;
  animation-timing-function: ease-in;
  @media only screen and (min-width: 600px) {
    width: 30%;
  }
} */

.nav-icon-wrapper {
  position: absolute;
  top:      0px;
  left:     0px;
  width:    60px;
  height:   60px;
  z-index:  98;
}
.nav-icon-wrapper.open {
  position: fixed;
}

.nav-icon {
  display:            none;
  width:              30px;
  height:             22px;
  position:           relative;
  top:                0;
  left:               0;
  margin:             20px;
  -webkit-transform:  rotate(0deg);
  -moz-transform:     rotate(0deg);
  -o-transform:       rotate(0deg);
  transform:          rotate(0deg);
  -webkit-transition: .2s ease-in-out;
  -moz-transition:    .2s ease-in-out;
  -o-transition:      .2s ease-in-out;
  transition:         .2s ease-in-out;
  cursor:             pointer;
  @media only screen and (min-width: 600px) {
    display: block;
  }
}




.nav-icon span {
  display:            block;
  position:           absolute;
  height:             3px;
  width:              50%;
  background:         rgb(220,220,220);
  opacity:            1;
  -webkit-transform:  rotate(0deg);
  -moz-transform:     rotate(0deg);
  -o-transform:       rotate(0deg);
  transform:          rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition:    .25s ease-in-out;
  -o-transition:      .25s ease-in-out;
  transition:         .25s ease-in-out;
}

.nav-icon span:nth-child(even) {
  left: 50%;
  border-radius: 0 3px 3px 0;
}

.nav-icon span:nth-child(odd) {
  left:0px;
  border-radius: 3px 0 0 3px;
}

.nav-icon span:nth-child(1), .nav-icon span:nth-child(2) {
  top: 0px;
}

.nav-icon span:nth-child(3), .nav-icon span:nth-child(4) {
  top: 8px;
}

.nav-icon span:nth-child(5), .nav-icon span:nth-child(6) {
  top: 16px;
}

.nav-icon.open span:nth-child(1),.nav-icon.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -o-transform:      rotate(45deg);
  transform:         rotate(45deg);
}

.nav-icon.open span:nth-child(2),.nav-icon.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -o-transform:      rotate(-45deg);
  transform:         rotate(-45deg);
}

.nav-icon.open span:nth-child(1) {
  left: 5px;
  top:  7px;
}

.nav-icon.open span:nth-child(2) {
  left: calc(50% - 5px);
  top:  7px;
}

.nav-icon.open span:nth-child(3) {
  left:    -50%;
  opacity: 0;
}

.nav-icon.open span:nth-child(4) {
  left:    100%;
  opacity: 0;
}

.nav-icon.open span:nth-child(5) {
  left: 5px;
  top:  12px;
}

.nav-icon.open span:nth-child(6) {
  left: calc(50% - 5px);
  top:  12px;
}


/*.img-wappen {
  position: absolute;
  top:      20px;
  right:    20px;
  width:    30px;
  height:   30px;
  z-index:  9;
  @media only screen and (min-width: 600px) {
    width:  100px;
    height: 100px;
  }
}*/




.navigation {
  /*display:    none;*/
  width:       0px;
  height:      0;
  overflow:    hidden;
  transition:  width 0.5s ease;
  font-family: 'Roboto';
}

.navigation.open {
  position:                fixed;
  border-right:            1px solid rgba(200, 200, 200, .25);
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
  top:                     0;
  left:                    0;
  bottom:                  0;
  width:                   250px;
  height:                  100vH;
  transition:              width 0.2s ease;
  z-index:                 97;
}

.navigation > a {
  display:         block;
  color:           rgb(200,200,200);
  text-decoration: none;
  font-size:       1rem;
  padding:         12px 4px;
  margin:          0 16px;
  position:        relative;
  @media only screen and (min-width: 900px) {
    font-size: .8rem;
  }
  @media only screen and (min-width: 1100px) {
    font-size: .9rem;
  }
  @media only screen and (min-width: 1400px) {
    font-size: 1rem;
  }
}

.navigation > a:hover:not(.active) {
  color: rgb(255, 255, 255);
}

.navigation > a.active {
  color: rgb(27, 122, 250);
}

.navigation > a:nth-child(1) {
  margin-top: 80px;
}

.close-navigation-bar-wrapper {
  display:  none;
  height:   0;
  width:    0;
}

.close-navigation-bar-wrapper.open {
  display:  block;
  position: fixed;
  top:      0;
  left:     251px;
  bottom:   0;
  width:    calc(100% - 240px);
  height:   100vH;
  z-index:  96;
  content:  '';
}


/*old always visible header navigation bar*/
/*.navigation2 {
  display:  none;
  position: absolute;
  top:      10px;
  left:     10px;
  height:   43px;
  z-index:  9;
  @media only screen and (min-width: 600px) {
    display: flex;
  }
}

.navigation2 > a {
  color:           rgb(255,255,255);
  text-decoration: none;
  font-size:       .8rem;
  padding:         14px 4px;
  margin:          0 16px;
  position:        relative;
}

.navigation2 > a::: {
  content:          '';
  height:           3px;
  width:            100%;
  background-color: rgb(27, 122, 250);
  position:         absolute;
  left:             0;
  bottom:           8px;
  opacity:          0;
  transition:       opacity 0.2s;
}

.navigation2 > a:hover::: {
  opacity: 1;
}

.navigation2 > a.active::: {
  opacity: 1;
}*/


.img-header {
  width:               100%;
  height:              30vH;
  max-height:          30vH;
  top:                 0;
  left:                0;
  background-position: center;
  background-repeat:   no-repeat;
  background-size:     cover;
  position:            relative;
  @media only screen and (min-width: 600px) {
    height:     40vH;
    max-height: 500px;
  }
}

.img-header.img-start {
  background-image: url('../img/blasorchester-aachen-haaren-01.jpg');
}

.img-header.img-team {
  background-image: url('../img/blasorchester-aachen-haaren-team.jpg');
}

.img-header.img-auftritte {
  background-image: url('../img/blasorchester-aachen-haaren-auftritte.jpg');
}

.img-header.img-galerie {
  background-image: url('../img/blasorchester-aachen-haaren-galerie.jpg');
}

.img-header.img-repertoire {
  background-image: url('../img/blasorchester-aachen-haaren-repertoire.jpg');
}

.img-header.img-ausbildung {
  background-image: url('../img/blasorchester-aachen-haaren-ausbildung.jpg');
}

.img-header > .wrapper-flex {
  display:         flex;
  align-content:   flex-end;
  justify-content: center;
  align-items:     center;
  flex-wrap:       wrap;
  height:          100%;
}

.img-header > .wrapper-flex > .img-wappen {
  width:     140px;
  max-width: 15vH;
  padding:   0;
  margin:    0;
  @media only screen and (min-width: 600px) {
    width:     240px;
    max-width: 15vH;
    padding:   0 0 10px 0;
  }
/*  @media only screen and (min-width: 800px) {
    width:     240px;
    max-width: 20vH;
  }*/
  @media only screen and (min-width: 1000px) {
    width:     250px;
    max-width: 20vH;
    padding:   0 0 20px 0;
  }
  @media only screen and (min-width: 1300px) {
    width:     280;
    max-width: 20vH;
    padding:   0 0 30px 0;
  }
  @media only screen and (min-width: 1500px) {
    /*width:  24vH;*/
  }
}

.img-header > .wrapper-flex > .title {
  width:      100%;
  text-align: center;
  color:      rgb(255,255,255);
}

.img-header > .wrapper-flex > .title > h1 {
  /*font-family:    'Pinyon';*/
  font-family:    'Roboto Condensed';
  font-size:      1.6rem;
  letter-spacing: 4px;
  margin:         0;
  padding:        0;
  @media only screen and (min-width: 389px) {
    font-size:  1.9rem;
    padding:    0 0 10px 0;
  }
  @media only screen and (min-width: 600px) {
    font-size:  2.0rem;
    padding:    0 0 10px 0;
  }
  @media only screen and (min-width: 700px) {
    font-size:  2.2rem;
    padding:    0 0 10px 0;
  }
  @media only screen and (min-width: 800px) {
    font-size: 2.7rem;
    padding:   0 0 20px 0;
  }
  @media only screen and (min-width: 1000px) {
    font-size: 3.2rem;
  }
  @media only screen and (min-width: 1300px) {
    font-size: 3.5rem;
  }
/*  @media only screen and (min-width: 1500px) {
    font-size: 3.4rem;
  }*/
}

.img-header > .wrapper-flex > .title > h1 > br {
  @media only screen and (min-width: 700px) {
    display: none;
  }
}


/*Galerie*/
.pswp-gallery {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  @media only screen and (min-width: 600px) {
    /*display: block;*/
  }
}


/*content*/
.content {
  margin:     20px 20px 20px 20px;
  color:    rgb(200,200,200);
  min-height: calc(100vH - 30vH - 40px - 194px - 50px);
  @media only screen and (min-width: 600px) {
    min-height: calc(100vH - 40vH - 40px - 194px - 50px);
  }
}

.content {
  padding: 0;
  @media only screen and (min-width: 800px) {
    padding: 20px;
  }
}

.content a {
  color:           rgb(200,200,200);
  /*text-decoration: none;*/
}

.content a:hover {
  color:           rgb(255,255,255);
  /*text-decoration: none;*/
}

.content h1 {
  padding:     30px 0 30px 0;
  /*font-weight: 300;*/
  font-size:   1.8rem;
  font-family: 'Roboto Condensed';
}

.content h2 {
  padding:     30px 0 30px 0;
  /*font-weight: 300;*/
  font-size:   1.8rem;
  font-family: 'Roboto Condensed';
}

.content h3 {
  padding:     40px 0 2px 0;
  font-weight: 300;
  font-size:   1.5rem;
  font-family: 'Roboto Condensed';
}

.content h4 {
  padding:     10px 0 0 0;
  font-weight: 800;
  font-size:   1rem;
  font-family: 'Roboto';
}

.content p {
  padding:     10px 0 10px 0;
}

.content ul {
  margin:  20px 0 20px 20px;
  padding: 0;
  @media only screen and (min-width: 600px) {
    margin: 20px 0 20px 0;
  }
}

.content ul li {
  margin:          0;
  padding:         2px 0;
  list-style-type: disc;
  @media only screen and (min-width: 600px) {
    padding:         2px 0 2px 20px;
    list-style-type: none;
  }
}

.content > ul.ul-disc {
  margin:  0;
  padding: 0 0 0 20px;
}

.content > ul.ul-disc li {
  margin:          0;
  padding:         2px 0;
  list-style-type: disc;
  @media only screen and (min-width: 600px) {
    padding:         2px 0 2px 20px;
  }
}

.content > .table-chronik {
  width: 100%;
}
.content > .table-chronik td {
  vertical-align: top;
  line-height:    1.1rem;
  padding:        3px 0;
}
.content > .table-chronik td:first-of-type {
  font-family: 'Roboto';
}


.content .link-telephone {
  color:         rgb(200,200,200);
  text-decoration: none;
}
.content .link-telephone:hover {
  color: rgb(200,200,200);
}

.content > .wrapper-flex-img-text {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  @media only screen and (min-width: 600px) {
    flex-wrap: nowrap;
  }
}

.content > .wrapper-flex-img-text .img-team {
  width: 200px;
  @media only screen and (min-width: 600px) {
    width: 250px;
  }
  /* @media only screen and (min-width: 1000px) {
    width: 300px;
  } */
}

.content > .wrapper-flex-img-text > .wrapper-description {
  padding:   0 15px;
  flex-grow: 1;
}

.content > .wrapper-flex-img-text > .wrapper-description > .team-h3 {
  padding:   20px 0 0 0;
  @media only screen and (min-width: 600px) {
    padding: 0;
  }
}



.content > .team-interview {
  padding: 0 15px;
  @media only screen and (min-width: 600px) {
    padding: 0;
  }
}



.content > .heading-with-back {
  display:     flex;
  align-items: center
}

.content > .heading-with-back > a {
  display: flex;

}

.content > .heading-with-back > a > .img-arrow-back {
  padding: 0 10px 0 0;
  width:  28px;
  height: 28px;
}

.content > .heading-with-back > a > .img-arrow-back > path {
  fill: rgb(220,220,220);
}

#gallery > a {
  text-decoration: none;
  margin:          2px 4px;
}

.cards {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.cards > .card {
  display:                 block;
  color:                   rgb(200,200,200);
  text-decoration:         none;
  width:                   80%;
  margin:                  20px 20px;
  padding:                 20px;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           4px;
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
  transition:              transform .2s ease;
  @media only screen and (min-width: 800px) {
    width: 200px;
  }
}

.cards > .card:hover {
  transform: scale(1.05);
}

.cards > .card > .card-img {
  width:               100%;
  height:              200px;
  /*margin:              40px;*/
  margin:              0;
  padding:             0;
  background-position: center;
  background-repeat:   no-repeat;
  background-size:     cover;
}

.cards > .card > .card-img.card-team {
  background-image: url('../img/blasorchester-aachen-haaren-team-small.jpg');
}

.cards > .card > .card-img.card-auftritte {
  background-image: url('../img/blasorchester-aachen-haaren-auftritte-small.jpg');
}

.cards > .card > .card-img.card-repertoire {
  background-image: url('../img/blasorchester-aachen-haaren-repertoire-small.jpg');
}

.cards > .card > .card-img.card-galerie {
  background-image: url('../img/blasorchester-aachen-haaren-galerie-small.jpg');
}

.cards > .card > .card-img.card-ausbildung {
  background-image: url('../img/blasorchester-aachen-haaren-ausbildung-small.jpg');
}

/*Ausbildung*/
.cards > .card > .card-img.card-ausbildung-kemp {
  background-image: url('../img/simone-kemp.jpg');
}
.cards > .card > .card-img.card-ausbildung-dhont {
  background-image:    url('../img/didier-dhont.jpg');
  background-position: 50% 10%;
}
.cards > .card > .card-img.card-ausbildung-schaible {
  background-image:    url('../img/judith-schaible.jpg');
  background-position: 50% 20%;
}
.cards > .card > .card-img.card-ausbildung-alijew {
  background-image:    url('../img/julia-alijew.jpg');
  background-position: 50% 20%;
}
.cards > .card > .card-img.card-ausbildung-feneberg {
  background-image:    url('../img/reinhard-feneberg.jpg');
  background-position: 50% 30%;
}
.cards > .card > .card-img.card-ausbildung-bucur {
  background-image: url('../img/andreas-bucur.jpg');
}
.cards > .card > .card-img.card-ausbildung-wesselowski {
  background-image: url('../img/dimitri-wesselowski.jpg');
}

/* Audio */
.cards > .card > .card-img.card-audio {
  background-image: none;
  display:          flex;
  justify-content:  center;
  align-items:      center;
}

.cards > .card > .card-img.card-audio .icon-audio {
  width:  60%;
  height: 60%;
}

.cards > .card > .card-img.card-audio .icon-audio path {
  fill: rgb(180, 180, 180);
}

.cards > .card > .card-title {
  font-family: 'Roboto Condensed';
  font-size:   1.2rem;
  padding:     10px 0 0 0;
}

.cards > .card > .card-subtitle {
  font-size: .8rem;
  padding:   0;
}

.cards > .card > .card-content {
  font-family: 'Roboto';
  font-size:   0.8rem;
  padding:     10px 0 10px 0;
}


/*Veranstaltungen*/
.event-wrapper {
  display:   flex;
  font-size: .75rem;
  margin:    10px 0 40px 0;
}

.event-wrapper > .event-date {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  align-items:     center;
  flex-wrap:       wrap;
  margin:          0 20px 0 0;
}

.event-wrapper > .event-date > .event-day {
  font-family: 'Roboto Condensed';
  font-size:   1.4rem;
}

.event-wrapper > .event-date > .event-month {
  font-family: 'Roboto Condensed';
  font-size:   .8rem;
}


.event-wrapper > .event-details {

}

.event-wrapper > .event-details > h2 {
  font-size:   1.2rem;
  font-family: 'Roboto Condensed';
  padding:     0 0 6px 0;
  margin:      0;
}

.event-wrapper > .event-details > .event-description {
  font-size:   .9rem;
  font-family: 'Roboto'
}

.event-wrapper > .event-details > .event-venue {
  padding: 6px 0 0 0;
  color:   rgb(160,160,160);
}

.event-wrapper > .event-details > .event-venue > .event-address {
  display: inline;
}

.event-wrapper > .event-details > .event-time {
  color: rgb(160,160,160);
}

.event-wrapper > .event-details > .event-offers > .event-price {
  color: rgb(160,160,160);
}

.event-image {
  display: none;
  width:   0px;
  @media only screen and (min-width: 600px) {
    display:    block;
    width:      60px;
    align-self: center;
  }
}

.event-img {
  display: none;
  width:   0px;
  @media only screen and (min-width: 600px) {
    display:    block;
    width:      60px!important;
  }
}





/* footer */
footer {
  background-color: rgb(55,55,55);
}

.footer-content {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-direction:   column;
  text-align:       center;
  color:            rgb(160,160,160);
}

.footer-content h3 {
  font-size:      1rem;
  font-weight:    500;
  /*text-transform: capitalize;*/
  line-height:    3rem;
}

/*.footer-content p {
  max-width:   500px;
  margin:      10px auto;
  line-height: 28px;
  font-size:   14px;
}*/

.socials {
  list-style:      none;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          1rem 0 2rem 0;
}
.socials li {
  margin: 0 10px;
}
.socials a {
  text-decoration: none;
  color:           rgb(160,160,160);
  border:          1.1px solid rgb(160,160,160);
  padding:         5px;
  border-radius:   50%;
  transition:      border .2s ease;
  display:         flex;
}
.socials a .icon-social {
  width:  20px;
  height: 20px;
  transition: fill .2s ease;
  fill:   rgb(160,160,160);
}

.socials a:hover .icon-social {
  fill:   rgb(255,255,255);
}

.socials a i {
  font-size:  1.1rem;
  width:      20px;
  transition: color .2s ease;
}
.socials a:hover i{
  color:  rgb(255,255,255);
}
.socials a:hover {
  border-color: rgb(255,255,255);
}


.footer-bottom {
  width:            100%;
  padding:          0 0 10px 0;
  text-align:       center;
  display:          flex;
  flex-wrap:        wrap;
  @media only screen and (min-width: 600px) {
    display:    flex;
    flex-wrap:  nowrap;
  }
}

.footer-bottom .footer-copyright {
  color:          rgb(160,160,160);
  font-size:      0.7rem;
  word-spacing:   2px;
  /*text-transform: capitalize;*/
  width:          100%;
  order:          2;
  padding:        0;
  @media only screen and (min-width: 600px) {
    width:      50%;
    order:      1;
    padding:    0 0 0 20px;
    text-align: left;
  }
}
.footer-bottom .footer-copyright a {
  text-decoration: none;
  color:           rgb(160,160,160);
}
.footer-bottom .footer-copyright a:hover {
  color: rgb(160,160,160);
}

.footer-bottom .footer-menu a {
  /*text-transform:  uppercase;*/
  color:           rgb(160,160,160);
  font-size:       .8rem;
  text-decoration: none;
  transition:      color .2s ease;
}

.footer-bottom .footer-menu a:hover {
  color: rgb(255,255,255);
}

/*footer*/
.footer-menu {
  width:           100%;
  display:         flex;
  justify-content: center;
  order:           1;
  padding:         0;
  @media only screen and (min-width: 600px) {
    /*flex-grow:       1;*/
    order:           2;
    justify-content: flex-end;
    padding:         0 20px 0 0;
  }
}

.footer-menu ul {
  display:       flex;
  flex-wrap:     wrap;
  margin-top:    10px;
  margin-bottom: 14px;
  @media only screen and (min-width: 600px) {
    flex-wrap: nowrap;
    margin:    0;
    padding:   0;
  }
}

.footer-menu ul li {
  padding-right: 10px;
  display:       block;
}

.footer-menu ul li a {
  color:           rgb(160,160,160);
  text-decoration: none;
}

/*.footer-menu ul li a:hover {
  color: #27bcda;
}*/




/*mobile bottom navigation*/
.mobile-bottom-nav {
  position:                sticky;
  bottom:                  0;
  left:                    0;
  right:                   0;
  display:                 flex;
  align-items:             center;
  background-color:        rgba(40,40,40, 0.8);
  border-top:              2px solid rgb(100,100,100);
  width:                   100%;
  height:                  50px;
  height:                  70px;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter:         blur(15px);
  z-index:                 1000;
  @media only screen and (min-width: 600px) {
    display: none;
    height:  0;
    width:   0;
  }
}


.mobile-bottom-nav > .item {
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  color:            rgb(150,150,150);
  flex-grow:        1;
  align-items:      center;
  text-decoration:  none;
}
.mobile-bottom-nav > .item.active {
  color: rgb(255,255,255);
}
.mobile-bottom-nav > .item > .label{
  font-size:  .65rem;
  margin-top: 3px;
}
.mobile-bottom-nav > .item > .icon {
  fill:   rgb(150,150,150);
  width:  24px;
  height: 24px;
}
.mobile-bottom-nav > .item.active > .icon {
  fill: rgb(255,255,255);
}



/* galerie captions */
.pswp__custom-caption {
  background-color:        rgba(40,40,40, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter:         blur(5px);
  font-size:               .9rem;
  text-align:              center;
  color:                 #fff;
  width:                   100%;
  padding:                 8px 0px;
  position:                absolute;
  left:                    0;
  bottom:                  0;
}
.pswp__custom-caption a {
  color:         #fff;
  text-decoration: underline;
}
.hidden-caption-content {
  display: none;
}


.profile {
  position:        absolute;
  z-index:         10;
  display:         flex;
  justify-content: flex-end;
  flex-direction:  column;
  flex-wrap:       wrap;
  align-items:     flex-end;
  top:             16px;
  right:           16px;
  /* width:           36px; */
  /* height:          36px; */
}

.profile > .profile-icon {
  width:               36px;
  height:              36px;
  cursor:              pointer;
  border-radius:       50%;
  background-color:     #ffcc00;
  cursor:              pointer;
  display:             flex;
  justify-content:     center;
  align-items:         center;
  background-position: center;
  background-size:     cover;
}

/* .profile > .profile-icon > path {
  fill:  rgb(220,220,220);
} */

.profile > .profile-menu {
  display: none;
  /* display: flex; */
}

.profile > .profile-menu.active {
  display: flex;
}

.profile > .profile-menu > .profile-menu-border {
  /* position:                absolute; */
  /* z-index:                 11; */
  /* right:                   0px;
  top:                     0px; */
  margin:                  4px 0 0 0;
  width:                   120px;
  display:                 flex;
  flex-direction:          column;
  padding:                 10px 10px;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           4px;
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
}

.profile > .profile-menu > .profile-menu-border > .profile-menu-item {
  display:         block;
  text-decoration: none;
  color:           rgb(220,220,220);
  padding:         5px 0;
  font-family:     'Roboto';
  font-size:       .9rem;
  cursor:          pointer;
}

.profile > .profile-menu > .profile-menu-border > .profile-menu-item:hover {
  text-decoration: none;
  color:           rgb(255,255,255);
}


.login {
  display:         flex;
  width:           100%;
  height:          100vH;
  justify-content: center;
  align-items:     center;
  flex-direction:  column;
}

.login > .login-wappen {
  width:         80px;
  height:        80px;
  margin:        -100px 0 20px 0;
}

.login > .login-wrapper {
  display:                 flex;
  flex-direction:          column;
  align-items:             center;
  /* margin:                  0 0 80px 0; */
  padding:                 30px 20px;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           4px;
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
  text-align:              center;
  width:                   85%;
    @media only screen and (min-width: 600px) {
      width: 350px;
  }
}

.login .login-input {
  padding:          8px;
  margin:           20px 0 0 0;
  border-radius:    2px;
  border:           none;
  background-color: #fff;
  width:            80%;
  @media only screen and (min-width: 600px) {
    width: 250px;
  }
}

.login .login-input:focus {
  outline: 2px solid #ffcc00;
}

.login .login-submit {
  margin:          32px 0 0 0;
  padding:         8px 14px;
  text-align:      center;
  text-decoration: none;
  display:         inline-block;
  color:           #000;
  background-color:#ffcc00;
  outline:         none;
  border:          none;
  cursor:          pointer;
}

.login .login-hint {
  margin-top: 10px;
  font-size:  .8rem;
}

.activate-forgot-password {
  margin-top:      16px;
  font-size:       .8rem;
  color:           rgb(180,180,180);
  text-decoration: underline;
  cursor:          pointer;
}


.login .forgot-password-area {
  display: block;
}

.login .forgot-password-area.hidden {
  display: none;
}

.login .message-password-forgot {
  
}

.login .login-area {
  width: 100%;
}

.login.login-area {
  display: block;
}

.login .link-to-login {
  font-size:       .8rem;
  color:           rgb(180,180,180);
  text-decoration: underline;
  cursor:          pointer;
}

.hidden {
  display: none;
}

.mitglieder-daten {
  margin-top: 16px;
  font-size:  .8rem;
}

.mitglieder-daten > .mitglieder-daten-upper-wrapper {
  display:         flex;
  flex-direction:  column;
  margin:          0 0 40px 0;
  justify-content: center;
  align-items:     center;
  @media only screen and (min-width: 600px) {
    flex-direction:  row;
    justify-content: flex-start;
  }
}

.mitglieder-daten > .mitglieder-daten-upper-wrapper > .mitglieder-daten-right {
  padding-left: 0px;
  @media only screen and (min-width: 600px) {
    padding-left: 50px;
  }
}



.input-sizer {
  display:        inline-grid;
  vertical-align: top;
  align-items:    center;
  position:       relative;
  font-size:      .6rem;
  color:          rgb(130,130,130);
  margin:         8px 0;
  /* border: solid 1px; */
  /* padding: .25em .5em; */
  /* margin: 5px; */
}
  
.input-sizer > .label {
  padding: 0 0 6px 4px;
}

  /* .input-sizer:::, */
  .mitglieder-daten-input {
    width:      auto;
    /* min-width:  1em; */
    grid-area:  2 / 1;
    font:       inherit;
    padding:    4px 4px 0 4px;
    margin:     0;
    resize:     none;
    background: none!important;
    appearance: none;
    border:     none;
    color:    rgb(220,220,220);
    font-size:  1rem;
  }
  
  .mitglieder-daten-select {
    margin:     -4px 0 0 0;
    padding:    0;
    font-size:  1rem;
    background: none;
    border:     none;
    outline:    none;
    color:      rgb(220,220,220);
  }

  .mitglieder-daten-input {
    margin:   -10px 0 0 0;
    padding:  4px 0 0 4px;
  }

  /* .input-sizer {
    content:     attr(data-value) ' ';
    visibility:  hidden;
    white-space: pre-wrap;
  } */

  .input-sizer:focus-within {
    outline: 2px solid #ffcc00;
  }
  .mitglieder-daten-input:focus-within {
    outline: 2px solid #ffcc00;
    outline: none;
    border:  none;
  }
  .mitglieder-daten-input.non-editable {
    color: rgb(160,160,160);
  }
  .mitglieder-daten-input.non-editable:focus-within {
    outline: none;
    outline: none;
    border:  none;
  }
  .input-sizer.non-editable:focus-within {
    outline: none;
  }
  .header-small {
    margin-bottom: 6px;
    font-family:  'Roboto Condensed';
  }
  .spacer {
    display: block;
    height:  30px;
    @media only screen and (min-width: 600px) {
      display: none;
      height:  0px;
    }
  }
  /* &:focus-within {
    outline: solid 1px blue;
    box-shadow: 4px 4px 0px blue;
    
    > span { color: blue; }
    
    textarea:focus,
    input:focus {
      outline: none;
    }
  } */


.mitglieder-daten .mitglieder-daten-input {
  /* padding:          8px;
  margin:           10px 0 0 0;
  border-radius:    2px;
  border:           none;
  background:       none;
  /* display:          block; */
  /* color:            rgb(220,220,220); */
}

.mitglieder-daten .mitglieder-daten-input:focus {
  /* outline: 2px solid #ffcc00;
  background-color:  #fff;
  color:             rgb(20,20,20); */
}


.mitglieder-daten .mitglieder-daten-foto-wrapper {
  margin:              0 0 40px 0;
  width:               200px;
  height:              200px;
  border-radius:       50%;
  background-position: center;
  background-size:     cover;
  background-color:    #ffcc00;
  display:             flex;
  align-items:         center;
  justify-content:     center;
  font-size:           4.5rem;
  position:            relative;
  @media only screen and (min-width: 600px) {
    margin:          0;
  }
}

.mitglieder-daten .mitglieder-daten-foto-wrapper > .mitglieder-daten-foto {
  width:    200px;
  height:   200px;
}

.mitglieder-daten .mitglieder-daten-foto-wrapper > .mitglieder-daten-change-foto {
  display:          none;
  position:         absolute;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  justify-content:  center;
  align-items:      center;
}


.mitglieder-daten .mitglieder-daten-foto-wrapper .mitglieder-daten-remove-foto {
  position:                absolute;
  top:                     15px;
  right:                   15px;
  font-size:               1.1rem;
  border-radius:           50%;
  width:                   30px;
  height:                  30px;
  display:                 flex;
  justify-content:         center;
  align-items:             center;
  border:                  1px solid rgba(200, 200, 200, .25);
  background-color:        rgba(50, 50, 50, 0.45);
  /* box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25); */
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
  cursor:                  pointer;
  color:                  rgb(220,220,220);
}


.mitglieder-daten .mitglieder-daten-foto-wrapper > .mitglieder-daten-change-foto.active {
  display: flex;
}

.mitglieder-daten .mitglieder-daten-foto-wrapper > .mitglieder-daten-change-foto .mitglieder-daten-change-foto-button {
  padding:                 8px;
  /* background-color: #ffcc00; */
  font-size:               .9rem;
  color:                 rgb(255,255,255);
  /* opacity:                 .7; */
  cursor:                  pointer;
  border:                  1px solid rgba(200, 200, 200, .25);
  border-radius:           2px;
  /* background-color:        rgba(30, 30, 30, 0.6);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter:         blur(15px); */
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
}



/* loading indicator */
.loading-small {
  position: relative;
}
.wrapper-loading {
  position:                fixed;
  z-index:                 100;
  top:                     0;
  left:                    0;
  height:                  100vh;
  min-height:              100vh;
  width:                   100%;
  background-color:        rgba(30, 30, 30, 0.7);
  display:                 none;
  justify-content:         center;
  align-items:             center;
}

.wrapper-loading.active {
  display: flex;
}

.lds-default {
  display:  inline-block;
  position: relative;
  width:    80px;
  height:   80px;
}
.lds-default div {
  position:      absolute;
  width:         6px;
  height:        6px;
  background:    #ffcc00;
  border-radius: 50%;
  animation:     lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top:             37px;
  left:            66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top:             22px;
  left:            62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top:             11px;
  left:            52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top:             7px;
  left:            37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top:             11px;
  left:            22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top:             22px;
  left:            11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top:             37px;
  left:            7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top:             52px;
  left:            11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top:             62px;
  left:            22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top:             66px;
  left:            37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top:             62px;
  left:            52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top:             52px;
  left:            62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}


.wrapper-feedback {
  position:                fixed;
  z-index:                 100;
  top:                     0;
  left:                    0;
  height:                  100vh;
  min-height:              100vh;
  width:                   100%;
  background-color:        rgba(30, 30, 30, 0.7);
  display:                 none;
  justify-content:         center;
  align-items:             center;
}

.wrapper-feedback.active {
  display: flex;
}


.feedback-message {
  padding:                 20px;
  border:                  1px solid rgba(200, 200, 200, .25);
  background-color:        rgba(50, 50, 50, 0.1);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
  text-align:              center;
}



.media {

}

.media .media-item {
  display:         flex;
  margin:          50px 0;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  @media only screen and (min-width: 600px) {
    justify-content: flex-start;
    align-items:     flex-start;
  }
}

.media .media-item .audio-label {
  margin: 0 0 6px 0;
  @media only screen and (min-width: 600px) {
    margin: 0 0 6px 20px;
  }
}

.media .media-item audio {
  width: 100%;
  @media only screen and (min-width: 600px) {
    width:     80%;
    max-width: 600px;
  }
}


.blog {

}

.blog-item {
  border:                  1px solid rgb(100,100,100);
  border-radius:           10px;
  padding:                 10px;
  margin:                  10px 0 70px 0;
  background-color:      rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
}

.blog-header {
  display:         flex;
  justify-content: flex-start;
  align-items:     center;
  margin:          5px;
}

.blog-autor-foto-wrapper {
  width:         40px;
  height:        40px;
  border-radius: 50%;
}

.blog-autor-foto {
  width:         40px;
  height:        40px;
  object-fit:    cover;
  border-radius: 50%;
}

.blog-autor-initialien {
  width:              40px;
  height:             40px;
  border-radius:      50%;
  background-color: #ffcc00;
  display:            flex;
  justify-content:    center;
  align-items:        center;
  color:            rgb(80,80,80);
  font-size:          1.2rem;
}

.blog-upper-wrapper {
  flex-grow:   1;
  margin-left: 14px;
}

.blog-title {
  font-size: 1.2rem;
}

.blog-autor {
  font-size: .75rem;
  color:     rgb(160,160,160);
}

.blog-zeit {
  font-size: .8rem;
  color:     rgb(160,160,160);
  align-self: flex-start;
}

.blog-content {
  padding: 30px 10px;
}


.blog-comment {
  margin:  0px 5px 20px 10px;
  display: flex;
  @media only screen and (min-width: 600px) {
    margin:  5px 5px 30px 50px;
  }
}

.comment-wrapper {
  margin-left:   16px;
  padding:       6px 10px;
  background:  rgb(60,60,60);
  border:        1px solid rgb(100,100,100);
  border-radius: 5px;
  flex-grow:     1;

}

.comment-autor {
  font-size: .9rem;
}

.comment-zeit {
  font-size: .65rem;
  color:     rgb(160,160,160);
}

.comment-content {
  font-size: .85rem;
  margin-top: 10px;
}

.blog-comment-own {
  margin: 0 5px 5px 65px;
  @media only screen and (min-width: 600px) {
    margin: 0 5px 5px 105px;
  }
}

.new-comment {
  width:         auto;
  height:        auto;
  padding:       6px 10px;
  background:  rgb(60,60,60);
  border:        1px solid rgb(100,100,100);
  border-radius: 5px;
  font-size:     .9rem;
}

.new-comment:focus {
  outline: 1px solid #ffcc00;
}

.new-comment-post {
  width:           60px;
  height:          26px;
  font-size:       .8rem;
  display:         none;
  justify-content: center;
  align-items:     center;
  color:         rgb(30,30,30);
  margin:          15px 0 0 0;
  /* @media only screen and (min-width: 600px) {
    margin: 15px 0 0 0;
  } */
}

.new-comment-post.active {
  display: flex;
}

.pagination-wrapper {
  display:         flex;
  justify-content: center;
  align-items:     center;
  margin:          -20px 0 40px 0;
  @media only screen and (min-width: 600px) {
    margin: -70px 0 80px 0;
  }
}

.pagination {
  display: inline-block;
}

.pagination a {
  color:         rgb(200,200,200);
  float:           left;
  padding:         8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #ffcc00;
  color:            rgb(30,30,30);
  border-radius:      5px;
}

.pagination a:hover:not(.active) {
  background-color: rgb(160,160,160);
  color:            rgb(30,30,30);
  border-radius:      5px;
}


.blog-editable-heading {
  font-family: 'Roboto Flex';
  font-size:   1.2rem;
  margin:      20px 0;
}

.blog-editable-heading:focus {
  outline: 1px solid #ffcc00;
} 

.new-blog-post-wrapper {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  width:           100%;

}
.new-blog-post {
  display:         flex;
  justify-content: center;
  align-items:     center;
  color:         rgb(30,30,30);
  width:           120px;
  margin:          40px 0;
}




.orchester {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
}

.orchester > .orchester-sitzplan {
  position: relative;
  width:    100%;
  @media only screen and (min-width: 600px) {
    width:     80%;
    max-width: 1200px;
  }
}

.orchester > .orchester-sitzplan > .sitz {
  cursor: pointer;
}

.orchester > .orchester-sitzplan > .sitz:focus-within {
  border:  none;
  outline: none;
}

.orchester > .orchester-sitzplan > .sitz:focus {
  border:  none;
  outline: none;
}

.orchester-opacity {
  opacity: 0.1;
}

.tippy-box {
  border:                  1px solid rgba(200, 200, 200, .25);
  background-color:        rgba(50, 50, 50, 0.1);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px);
}

.tippy-box[data-placement^='top'] > .tippy-arrow::before {
  border-top-color: rgba(200, 200, 200, .75)!important;
  bottom:            -8px;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: rgba(200, 200, 200, .75)!important;
  top:               -8px;
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
  border-left-color: rgba(200, 200, 200, .75)!important;
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
  border-right-color: rgba(200, 200, 200, .75)!important;
}

.member-hover {
  display:                 flex;
  justify-content:         center;
  align-items:             center;
  flex-direction:          column;
  /* border:                  1px solid rgba(200, 200, 200, .25);
  background-color:        rgba(50, 50, 50, 0.45);
  box-shadow:              0 0 10px 1px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter:         blur(13px); */
  padding:                 20px;
}


.member-hover .member-foto {
  width:               200px;
  height:              200px;
  border-radius:       50%;
  background-position: center;
  background-size:     cover;
  background-repeat:   no-repeat;
  background-color:    #ffcc00;
  display:             flex;
  justify-content:     center;
  align-items:         center;
  font-size:           8rem;
}

.member-hover .member-instrument {
  font-family:    'Roboto';
  font-size:      1.2rem;
  padding-bottom: 10px;
}

.member-hover .member-vorname {
  font-size:   1rem;
  padding-top: 10px;
}

.legend {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-wrap:       wrap;
  margin-top:      40px;
}

.legend .legend-item {
  display:         flex;
  justify-content: center;
  align-items:     center;
  flex-wrap:       nowrap;
  margin:          10px 20px;
  cursor:          pointer;
}

.legend .legend-color {
  width:         16px;
  height:        16px;
  display:       block;
  border-radius: 50%;
  margin-right:  5px;
  cursor:        pointer;
}

.legend .legend-label {
  font-size: .9rem;
  cursor:    pointer;
}


.legend .trumpet1 {
  background-color: rgb(0, 118, 186);
}
.legend .trumpet2 {
  background-color: rgb(0, 162, 255);;
}
.legend .trumpet3 {
  background-color: rgb(97, 197, 255);
}
.legend .posaune1 {
  background-color: rgb(153, 25, 94);
}
.legend .posaune2 {
  background-color: rgb(203, 41, 123);
}
.legend .posaune3 {
  background-color: rgb(239, 95, 167);
}
.legend .posaunebass {
  background-color: rgb(241, 155, 198);
}
.legend .waldhorn {
  background-color: rgb(22, 231, 207);
}
.legend .euphonium {
  background-color: rgb(0, 168, 157);
}
.legend .tuba {
  background-color: rgb(0, 123, 118);
}
.legend .floete1 {
  background-color: rgb(181, 23, 0);
}
.legend .floete2 {
  background-color: rgb(248, 74, 55);
}
.legend .oboe {
  background-color: rgb(255, 100, 78);
}
.legend .fagott {
  background-color: rgb(255, 188, 178);
}
.legend .klarinette1 {
  background-color: rgb(1, 113, 0);
}
.legend .klarinette2 {
  background-color: rgb(29, 177, 0);
}
.legend .klarinette3 {
  background-color: rgb(97, 216, 54);
}
.legend .klarinettebass {
  background-color: rgb(139, 238, 109);
}
.legend .altsax1 {
  background-color: rgb(250, 226, 50);
}
.legend .altsax2 {
  background-color: rgb(242, 231, 146);
}
.legend .tenorsax1 {
  background-color: rgb(255, 147, 0);
}
.legend .tenorsax2 {
  background-color: rgb(249, 181, 88);
}
.legend .baritonsax {
  background-color: rgb(215, 95, 0);
}
.legend .schlagwerk {
  background-color: rgb(140, 140, 140);
}


.repertoire-header {
  display: flex;
}

.repertoire-select-wrapper {
  flex-grow: 1;
}

.icon-download path {
  fill: rgb(180,180,180);
}

.icon-download:hover path {
  fill: rgb(255,255,255);
}

.repertoire-temp {
  color:   rgb(160,160,160);
  font-size: .9rem;
}

.repertoire-content {
  position:        relative;
  width:           100%;
  /* height:          600px; */
  overflow:        auto;
  margin:          60px 0;
}

.repertoire-list {
  width:           100%;
  position:        relative;
  /* border-collapse: collapse; */
  border:          none;
  border-collapse: separate;
  border-spacing:  0;
}

.repertoire-list th {
  /* position:           sticky; */
  /* top:                0; */
  /* z-index:            10; */
  background-color: rgb(60,60,60);
  height:             38px;
  padding:            0 4px;
  font-family:        'Roboto';
  font-size:          .9rem;
}

.repertoire-list td {
  padding:     4px;
  font-size:   .9rem;
}


.repertoire-list th:first-child {
  position:     sticky;
  left:         0;
  border-right: 3px solid rgb(120,120,120);
  z-index:      11;
}

.repertoire-list td:first-child {
  position:       sticky;
  left:           0;
  z-index:        9;
  border-right:   3px solid rgb(140,140,140);
}
.repertoire-list tr td {
  min-height: 30px;
}

.repertoire-list tr {
  text-align:  left;
}

.repertoire-list tr:nth-child(even) td {
  background-color: rgb(80,80,80);
}

.repertoire-list tr:nth-child(odd) td {
  background-color: rgb(100,100,100);
}

.column-center {
  text-align: center;
}

.column-right {
  text-align: right;
}

.repertoire-youtube {
  width:      20px;
  height:     20px;
  transition: fill .2s ease;
  fill:     #FF0000;
}

.repertoire-select {
  margin:     -24px 0 0 0;
  padding:    0;
  font-size:  1rem;
  background: none;
  border:     none;
  outline:    none;
  color:      rgb(220,220,220);
}


/* .socials a:hover .icon-social {
  fill:   rgb(255,255,255);
} */

/* table plugin */
.gridjs-search-input {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  background-color: rgb(80,80,80)!important;
  color:            rgb(220,220,220)!important;
  border:             none!important;
  border-radius:      0px!important;
  font-size:          12px;
  line-height:        1.2;
  outline:            none;
  padding:            8px 13px!important;
  margin:             0 0 20px 0!important;
}
.gridjs-search-input::placeholder {
  color: rgb(200,200,200)!important;
}


input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  opacity:            1;
  height:             20px;
  width:              20px;
  cursor:             pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path fill='rgb(180,180,180)' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}

input[type="search"]:focus::-webkit-search-cancel-button {
  pointer-events: all;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path fill='rgb(180,180,180)' d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}


.gridjs-search-input:focus {
  outline:    2px solid #ffcc00!important;
  border:     none!important;
  box-shadow: none!important;
}
/* .gridjs-input:focus {
  border:     none;
  box-shadow: none;
} */


.notenbestand-type {
  margin-left: 3px;
}
.notenbestand-select {
  appearance:          none;
  width:               250px;
  background-color:  rgb(80,80,80);
  background-image:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='8' height='13' viewBox='0 0 8 13'><polygon points='0,8 4,13 8,8' style='fill: rgb(220,220,220)'/><polygon points='4,0 0,5 8,5' style='fill: rgb(220,220,220)'/></svg>");
  background-origin:   content-box;
  background-position: right 4px center;
  background-repeat:   no-repeat;
  background-size:     auto;
  color:             rgb(220,220,220);
  border:              none;
  border-radius:       0px;
  outline:             none;
  font-size:           14px;
  padding:             10px 13px;
  margin:              20px 0;
  /* line-height:        1.2; */
  outline:             none;
}

.notenbestand-select:focus {
  outline:    2px solid #ffcc00!important;
  border:     none;
  box-shadow: none;
}

/* .notenbestand-select::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='8' height='13' viewBox='0 0 8 13'><polygon points='0,8 4,13 8,8' style='fill: rgb(220,220,220)'/><polygon points='4,0 0,5 8,5' style='fill: rgb(220,220,220)'/></svg>");
} */

/* Repertoire und Notenbestand */
th[data-column-id='Schwierigkeitsgrad'] {
  text-align: center;
}
td[data-column-id='Schwierigkeitsgrad'] {
  text-align: center;
}
th[data-column-id='YouTube'] {
  text-align: center;
}
td[data-column-id='YouTube'] {
  text-align: center;
}
th[data-column-id='Dauer'] {
  text-align: center;
}
td[data-column-id='Dauer'] {
  text-align: center;
}

/* Dokumente */
.link-dokumente {
  padding-top:    10px!important;
  padding-bottom: 10px!important;
  @media only screen and (min-width: 600px) {
    padding-top:    4px!important;
    padding-bottom: 4px!important;
  }
}

.link-dokumente a {
  text-decoration: none;
}

#termin-buchen {
  filter: invert(.9) saturate(1.8) hue-rotate(8deg);
}

.abstimmung-table {
  width:       100%;
  white-space: nowrap;
  @media only screen and (min-width: 600px)  {
    width: unset;
  }
}
.abstimmung-star {
  cursor: pointer;
}
.abstimmung-star path {
  stroke: none;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display:  inline-block;
  width:    44px;
  height:   22px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width:   0;
  height:  0;
}

/* The slider */
.slider {
  position:           absolute;
  cursor:             pointer;
  top:                0;
  left:               0;
  right:              0;
  bottom:             0;
  border-radius:      22px;
  background-color:   rgb(110,110,110);
  -webkit-transition: .4s;
  transition:         .4s;
}

.slider:before {
  position:            absolute;
  content:             "";
  height:              18px;
  width:               18px;
  left:                3px;
  bottom:              2px;
  border-radius:       50%;
  background-color:    rgb(220,220,220);
  -webkit-transition: .4s;
  transition:         .4s;
}

input:checked + .slider {
  background-color: #ffcc00;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ffcc00;
}

input:checked + .slider:before {
  background-color: rgb(255,255,255);
  -webkit-transform: translateX(20px);
  -ms-transform:     translateX(20px);
  transform:         translateX(20px);
}



/* Finanzen */
#finanzen .finanzen-title {
  font-size: 1.2rem;
  margin:    30px 0 0 0;
  width:     100%;
}

#finanzen .finanzen-kpi-einausgaben {
  width:           100%;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  @media only screen and (min-width: 1000px)  {
    justify-content: left;
  }
}
#finanzen .finanzen-kpi-kontostaende {
  width:           100%;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  @media only screen and (min-width: 1000px)  {
    justify-content: left;
  }
}
/* #finanzen .finanzen-kpi-diagram {
  width:    100%;
  display:  flex;
  flex-wrap: wrap;
} */


#finanzen .finanzen-box {
  background-color: rgb(70,70,70);
  padding:           12px;
  margin:            20px;
  color:           rgb(255,255,255);
  width:             100%;
  @media only screen and (min-width: 1000px)  {
    width: unset;
  }
}
#finanzen .box-label {
  font-size: .7rem;
  color:   rgb(180,180,180);
}
#finanzen .box-title {
  font-size:     1.2rem;
  margin-bottom: 4px;
  /* color:   rgb(220,220,220); */
}
#finanzen .box-sub {
  font-size: .7rem;
  /* color:   rgb(220,220,220); */
}

#finanzen .box-sub .box-sub-label {
  margin-left: 10px;
  font-size:   0.6rem;
  color:     rgb(160,160,160);
}

#finanzen .finanzen-box-multi {
  background-color: rgb(70,70,70);
  padding:           12px;
  margin:            20px;
  color:           rgb(255,255,255);
  display:           flex;
  flex-wrap:         wrap;
  width:             100%;
  @media only screen and (min-width: 1000px) {
    width: 400px;
  }
}

#finanzen .finanzen-box-multi-item {
  width: 200px;
}

#finanzen .finanzen-details {
  width:     100%;
  display:   flex;
  flex-wrap: wrap;
} 

#finanzen .finanzen-box-details {
  width:      100%;
  margin:     0px 30px 20px 20px;
  overflow-x: auto;
}

#finanzen .finanzen-charts {
  width:           100%;
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     start;
}

#finanzen .finanzen-charts .finanzen-charts-wrapper {
  display:         flex;
  flex-wrap:       wrap;
  width:           100%;
  justify-content: center;
  /* margin-top:      40px; */
  @media only screen and (min-width: 1000px)  {
    width: 50%;
  }
}


#finanzen .finanzen-charts .finanzen-charts-wrapper .finanzen-charts-title {
  width:         100%;
  font-size:     1.2rem;
  margin-top:    30px;
  text-align:    center;
  color:         rgb(200,200,200);
}


#finanzen .finanzen-charts .finanzen-charts-wrapper .finanzen-charts-wrapper2 {
  display:         flex;
  justify-content: center;
  width:           90%;
  @media only screen and (min-width: 1000px)  {
    width: 60%;
  }
}

#finanzen .finanzen-charts .finanzen-details-einnahmen {
  display:         flex;
  flex-wrap:       wrap;
  width:           100%;
  justify-content: center;
}

#finanzen .finanzen-charts .finanzen-details-ausgaben {
  display:         flex;
  flex-wrap:       wrap;
  width:           100%;
  justify-content: center;
}