@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Source+Sans+Pro:wght@200;300|Noto+Sans+HK:wght@100|Courier+Prime&display=swap);

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

body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #333;
  background-color: white;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover,
a:focus {
  color: #333;
}

h2 {
  color: #000;
  font-weight: 400;
}

h3 {
  color: brown;
  font-style: normal;
  font-weight: 700
}

h4 {
  color: steelblue;
  font-style: normal;
  font-weight: 700
}

h5 {
  margin: 2.4em auto -0.4em;
  color: brown;
  font-size: 1.1em;
  font-weight: 700;
  font-style: italic;
}

h6 {
  margin: 2em auto 0.8em;
  color: red;
  font-size: 1em;
  font-weight: 700;
}

.nhide {
  display: none;
}

.mhide {
  display: block;
  width: 100%;
  margin: 0;
}

.clr1 {
  color: crimson !important
}

.clr2 {
  color: orangered !important
}

.clr2a {
  color: darkorange !important
}

.clr3 {
  color: steelblue !important
}

.clr4 {
  color: gold !important
}

.clr5 {
  color: red !important
}

table.side {
  margin-top: 8%;
}

td {
  vertical-align: top;
}

td.left {
  width: 35%;
  padding: 0 2%;
}

td.main {
  width: 30%;
}

td.right {
  width: 35%;
  padding: 0 2%;
}

.tgrd {
  width: 1210px;
  height: auto;
  margin: 7% auto 5%;
}

.grd {
  display: table-cell;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.cel {
  display: inline-block;
  width: 150px;
  height: 150px;
  float: left;
}

.cel a {
  display: block;
  width: 150px;
  height: 150px;
}

.scel {
  display: block;
  margin: 0 auto;
  width: 11px;
  height: 12px;
  text-align: center;
}

.scel a {
  display: inline-block;
  width: 10px;
  height: 10px;
  text-align: center;
}

@keyframes sparkle {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.ab,
.cd,
.ef {
  animation: 5s ease-out 0s 1 sparkle;
  background-color: rgb(196, 216, 226);
  /* 290 */
  border-radius: 2px;
}

.gh,
.ij,
.kl,
.mn {
  animation: 8s ease-out 0s 1 sparkle;
  background-color: rgb(196, 216, 226);
  /* 290 */
  border-radius: 2px;
}

.op,
.qr,
.st,
.uv,
.wx,
.yz,
.ba {
  animation: 11s ease-out 0s 1 sparkle;
  background-color: rgb(107, 201, 219);
  /* 637 */
  border-radius: 2px;
}

.c1 {
  background-color: rgb(247, 211, 181);
  /* 475 */
}

.c2 {
  background-color: rgb(249, 130, 127);
  /* 177 */
  transition-duration: 2s;
}

.c3 {
  background-color: rgb(252, 79, 89);
  /* 1785 */
}

.c4 {
  background-color: rgb(249, 86, 2);
  /* 1655 */
}

.c5 {
  background-color: rgb(255, 114, 71);
  /* 811 */
  background-position: 0% 50%;
}

.c6 {
  background-color: rgb(244, 209, 175);
  /* 719 */
}

.c7 {
  background-color: rgb(229, 196, 214);
  /* 256 */
}

.c8 {
  background-color: rgb(214, 211, 214);
  /* 538 */
  transition-duration: 2s;
}

.c9 {
  background-color: rgb(0, 170, 204);
  /* 801 */
}

.c10 {
  background-color: rgb(237, 206, 198);
  /* 5035 */
}

.c11 {
  background-color: rgb(252, 191, 201);
  /* 1895 */
}


.c12 {
  background-color: white;
}


.c13 {
  background-color: white;
}


.c14 {
  background-color: rgb(221, 219, 209);
  /* 427 */
}



.c15 {
  background-color: rgb(209, 206, 221);
  /* 2706 */
}



.c16 {
  background-color: rgb(191, 209, 229);
  /* 2707 */
}



.c17 {
  background-color: rgb(0, 163, 221);
  /* 299 */
}

.c18 {
  background-color: rgb(214, 219, 224);
  /* 656 */
}


.c19 {
  background-color: transparent
}



.c20 {
  background-color: rgb(226, 211, 214);
  /* 663 */
}



.c21 {
  background-color: rgb(224, 209, 198);
  /*  434 */
}


.c22 {
  background-color: rgb(204, 226, 221)
    /* 628 */
}

.c23 {
  background-color: rgb(183, 204, 219);
  /* 544 */
}



.c24 {
  background-color: rgb(109, 135, 168);
  /* 652 */
}



.c25 {
  background-color: rgb(25, 33, 104);
  /* 2758 */
}

.c26 {
  background-color: rgb(102, 147, 188);
  /* 542 */
}



.c27 {
  background-color: rgb(0, 132, 201);
  /* 3005 */
  transition-duration: 2s;
}



.c28 {
  background-color: rgb(234, 15, 107);
  /* 213 */
}


.c29 {
  background-color: rgb(12, 28, 71);
  /* 655 */
}



.c30 {
  background-color: rgb(51, 86, 135)
    /* 653 */
}



.c31 {
  background-color: rgb(0, 102, 127);
  /* 634 */
  background-size: 10%;
}


.c32 {
  background-color: rgb(0, 51, 91)
    /* 540 */
}


.stills {
  margin: 5% 5% 5em;
}

.stills img {
  display: block;
  width: auto;
  margin-bottom: 0;
}

.num {
  margin: 1em 0.5em 2em;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 90%;
  color: steelblue;
}

.daed {
  display: block;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  text-align: right;
  background: lightyellow;
  border: 1px solid #999;
}

.daed img {
  display: block;
  margin: 10em auto 0;
  max-width: 150px;
}

.chin {
  display: block;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  text-align: left;
  background: lightyellow;
  border: 1px solid #999;
}

.chin img {
  display: block;
  margin: 7em auto 0;
  max-width: 120px;
}

.subtitle {
  max-width: 640px;
  display: block;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 18px;
}

.einwerk {
  max-width: 640px;
  display: block;
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 43px;
}

.desc {
  max-width: 1200px;
  margin: 3em auto -5%;
  padding: 5%
}

.tab {
  max-width: 1200px;
  margin: 0 auto -5%;
  padding: 5% 1%;
}

.dark {
  margin-top: 2em;
  background-color: black;
  color: #eee;
  padding: 5%;
}

.times {
  font-weight: 300;
  margin-left: 12px;
}

.title {
  display: block;
  text-align: center;
  margin-bottom: -4em;
  margin-top: 8em;
}

.title h1 {
  font-size: 200%;
  font-weight: 400;
  color: #333;
  line-height: 2em;
  opacity: 1;
}

.title h2 {
  font-size: 18px;
  color: crimson;
  font-weight: 400;
  opacity: 1;
}


.footer {
  max-width: 1200px;
  min-height: 200px;
  font-size: 12px;
  position: relative;
  display: block;
  width: 95%;
  margin: 400px auto 30px;
  border: 1px solid #aaa;
  text-align: left;
  padding: 30px;
}

.footer:hover {
  background-image: url('/img/0014.jpg');
  background-size: 50%;
  background-position: -1% 15%;
  background-blend-mode: screen;
  transition-duration: 2s;
  background-repeat: no-repeat;
  color: transparent;
}

.img01022009 img {
  display: block;
  float: right;
  margin-top: 2em;
  border: 0.01em solid white
}

.imgkervie-11052016 {
  padding-left: 5%;
}

.imgkervie-11052016 img {
  display: block;
  margin-top: 0.9em;
  border: 1.2em solid white;
}

.musik {
  padding: 5% 10%
}

.musik h1 {
  font-family: 'Source Sans Pro sans-serif';
  font-size: 1.4em;
  padding: 1em 0;
  color: crimson;
}

.ess h1,
.ess h2,
.musik h2 {
  font-size: 1em;
  padding: 1em 0;
}

.musik h2 {
  color: crimson;
}

.musik h3 {
  font-family: 'Source Sans Pro sans-serif';
  font-size: 1.2em;
  padding: 1em 0;
  color: royalblue;
}

.musik .rbl {
  font-family: 'Source Sans Pro sans-serif';
  display: block;
  font-size: 1.1em;
  padding: 1em 0 0.1em;
  color: royalblue;
}

h2 .blk {
  color: black;
}

.dtdes,
.ess {
  display: block;
  margin-top: 5%;
  padding: 5%
}

.ess {
  font-family: 'Courier Prime', monospace;
  font-weight: 200;
}

.ess h2 {
  margin-top: 2em;
  font-weight: 700;
}

.ctrs img {
  max-width: 900px;
}

.icpr {
  display: block;
  max-width: 52%;
  font-size: 0.9em
}

.nt {
  font-size: 100%;
  font-weight: 700;
}

.tab>input[type="radio"] {
  display: none;
}

label {
  margin-top: 5%;
  display: inline-block;
  width: auto;
  padding: 1em 0.2em;
  position: relative;
}

label:hover {
  cursor: pointer;
}

.tab-content {
  display: none;
}

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3 {
  display: block;
  margin-top: 5em;
}

.ph500 {
  display: block;
  height: 500px;
}

.ph1000 {
  display: block;
  height: 1000px;
}


iframe {width:100%;height:800px;}
.subt {font-size:70%;line-height:1.2em;text-align:center;}
span.qm {font-size: 0.5em;line-height: 2.1em;display: inline-block;vertical-align: top;}
.video-js .vjs-big-play-button {display:none!important;}
.vid {display;block;margin:8em auto 5em;}
.vid2 {display;block;margin:5em auto 0;}
.vid, .vid2 {width:630px;}
.ivid {width:630px;height:355px;}


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

  .img01022009 img,
  .imgkervie-11052016 img {
    max-width: 1600px;
  }
}

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

  .img01022009 img,
  .imgkervie-11052016 img {
    max-width: 1400px;
  }
}

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

  .img01022009 img,
  .imgkervie-11052016 img {
    max-width: 1000px;
  }
}

@media screen and (max-width: 1368px) {
  .nhide {
    display: block;
  }

  .mhide {
    display: none;
  }

  .desc {
    max-width: 700px;
  }
}

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

  .img01022009 img,
  .imgkervie-11052016 img,
  .ctrs img,
  .stills img,
  iframe {
    max-width: 800px;
  }
}
@media screen and (max-width: 802px) {
  .ivid {
    width: 540px;
    height: 304px;
  }

  .subtitle {
    width: 540px;
  }

  .title h1 {
    font-size: 162%;
  }

  .title h2 {
    font-size: 122%;
  }

  .desc {
    max-width: 600px;
  }

  .img01022009 img,
  .imgkervie-11052016 img,
  .ctrs img,
  .stills img,
  iframe {
    max-width: 640px;
  }
}

@media screen and (max-width: 652px) {
  .subtitle {
    width: 540px;
  }

  .img01022009 img,
  .imgkervie-11052016 img,
  .ctrs img,
  .stills img,
  iframe {
    max-width: 520px;
  }
}

@media screen and (max-width: 600px) {
.vid, .vid2 {width:500px;}
.ivid {width:500px;height:280px;}
}

@media screen and (max-width: 552px) {
  .title h1 {
    font-size: 142%;
  }

  .title h2 {
    font-size: 112%;
  }

  .ivid {
    width: 418px;
    height: 235px;
  }

  .subtitle {
    width: 416px;
  }

  .img01022009 img,
  .imgkervie-11052016 img,
  .ctrs img,
  .stills img,
  iframe {
    max-width: 500px;
  }
@media screen and (max-width: 512px) {
.vid, .vid2 {width:300px;}
.ivid {width:300px;height:170px;}
}

  @media screen and (max-width: 422px) {
    .ivid {
      width: 318px;
      height: 179px;
    }

    .subtitle {
      width: 316px;
      font-size: 12px;
    }

    .img01022009 img,
    .imgkervie-11052016 img,
    .ctrs img,
    .stills img,
    iframe {
      max-width: 320px;
    }
  }