@import url(//fonts.googleapis.com/css?family=Amatic+SC:300,400,600&subset=latin,latin-ext);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek,greek-ext,vietnamese);

* {box-sizing: border-box}
body {font-family: 'Amatic SC',Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
h3 {font-size: 34px;margin:20px 0 0;color:#ff6aff}
h3 span {font-size:22px;color:#777}
a {text-decoration: none}
p {margin:0}

/* header */
div.header {width:90%;margin:20px auto}
div.header img {float:left;margin-right: 25px}
div.header p {font-size:57px;color:#000;text-transform: uppercase;font-weight: bold}
div.header p span, .mySlides p span {color:#ff6aff}


div.content {width:90%;margin:10px auto;overflow: auto}

div.dotbox {text-align:center}

ul {font-size:34px;font-weight:bold; list-style-type:none;margin-left:124px;margin-top:0;width:600px}
li a {color:#000}
li a:hover {color:#ff6aff}


/* Slideshow container */
.slideshow-container {
  max-width:1000px;
  position: relative;
  margin: auto;
  border:1px solid #000;
}

.mySlides {width:998px;height:561px;overflow: hidden}

.mySlides h2 {font-size:60px;color:#ff6aff}

.mySlides .text p, li p {background-color: rgba(0, 0, 0, 0.67);font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;font-weight: normal;padding:8px 16px}

li p {font-size:14px;background-color:white;width:90%;padding:8px 0}
li p span {font-size:10px;color:#ff6aff}
li.trenner {height:1px;background-color:#ff6aff;margin:10px 0;width:100%}

div.kipdesno img {float:right}
div.kiplivo img {float:left}

div.bauchbindeRE, div.bauchbindeLI {position: absolute;bottom:30px;background-color: #ff6aff;font-size:36px;color:#fff;padding:3px 15px;width:auto}
div.bauchbindeRE span, div.bauchbindeLI span {font-size:24px;color:#000}

div.bauchbindeRE {right:0}
div.bauchbindeLI {left:0}
div.audiobox {background-color: #ff6aff;padding:6px 12px 0;margin:10px auto;width:320px}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #ff6aff;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 22px;
  padding: 7px 12px;
  position: absolute;
  left:0;
  bottom:8px;
  width: auto;
  font-weight: bold;
  text-align: center;
}
.text a {color:#ff6aff}
.text a:hover {text-decoration: underline}

.textmitte {
  color: #000;
  font-size: 32px;
  padding: 7px 12px;
  position: absolute;
  top:120px;
  width: 100%;
  text-align: center;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;font-weight: normal;
}


.pos1 {left:0;top:30px}
.pos2 {left:inherit;right:0;top:30px}
.pos3 {left:0;bottom:30px}
.pos4 {left:inherit;right:0;bottom:30px}
.pos5 {left:130px;top:240px}
.pos5_4z {left:100px;top:200px}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

@media only screen and (orientation:landscape) and (min-device-width:320px) and (max-device-width:812px) {
  div.header, div.dotbox {display:none}
  div.content, .slideshow-container {width:100%;height:100%;max-width:inherit}
  
  div.content {margin:0}
  .slideshow-container img {width:100% !important;}
  
  .mySlides {height:98%;width:100%}
  .text {font-size:14px}
  .textmitte {font-size:15px;top:40px}
  
  .pos5 {top:40px}
}

@media only screen and (orientation:portrait) and (min-device-width:320px) and (max-device-width:812px) {
  div.header img {width:20%}
  div.header p {font-size:32px}
  div.dotbox {display:none}
  div.content, .slideshow-container {width:100%;height:100%;max-width:inherit}
  .slideshow-container {border:none}

.mySlides h2 {font-size:30px}
.mySlides img {width:140%}

  div.content {margin:0}
  .slideshow-container img {width:100% !important;}
  
  .mySlides {height:800px;width:100%}
  .text {font-size:14px;clear:both;position:initial;display:block}
  div.bauchbindeLI, div.bauchbindeRE {position:initial;clear:both;display:block}
  .textmitte {font-size:15px;top:20px}
  
.pos1 {left:0;top:30px}
.pos2 {left:inherit;right:0;top:30px}
.pos3 {left:0;bottom:30px}
.pos4 {left:inherit;right:0;bottom:30px}
.pos5 {left:130px;top:240px}
.pos5_4z {left:100px;top:200px}
  .pos5 {top:40px}
}

/* Datawrapper */
div.iframebox {margin:15px}
h1 span.chart-title {color:#ff6aff;font-family: 'Amatic SC',Verdana, sans-serif; margin:5px 0 0 5px}