@charset "utf-8";
/* CSS Document */
@media screen and (min-width : 464px) {
        body {
                /*background-color: #E7DCDC;
*/ margin-left: 1%;
                margin-right: 1%;
        }
}
@media screen and (min-width : 903px) {
        body {
                background-color: antiquewhit;
                margin-left: 10%;
                margin-right: 10%;
        }
}
@media screen and (min-width: 1200px) {
        body {
                background-color: lightgra;
                /*  margin: auto;*/
                margin-left: 25%;
                margin-right: 25%;
        }
}
* {
        background: azur;
}
hr {
        border: 0;
        border-bottom: 3px dashed #1abc9c;
        background: #999;
}
#footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5%;
        width: 100%;
        color: #fff;
        background-color: slategrey;
        padding: 0.01em 16px;
        font-family: Verdana, sans-serif;
        font-size: 1em;
        line-height: 1.5;
}
.card-wrapper {
        max-width: 400px;
        margin: auto;
        text-align: center;
}
.card-wrapper-left {
        max-width: 400px;
        margin-left: 20%;
        text-align: left;
}
.card-image {
        max-width: 400px;
        height: auto;
        padding-top: 1em;
        text-align: center;
}
.card-header {
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 3em;
}
.card-text {
        font-size: 1.10em;
        text-align: left;
        align-content: flex-start;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        line-height: 1.25em;
        padding: 1em;
}
.card-text1 {
        font-size: 1.10em;
        text-align: left;
        align-content: flex-start;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        line-height: 1.25em;
        padding: 1em;
        text-align: center;
}
.container {
        max-width: 600px;
        margin: 0 auto;
        display: grid;
        position: relative; /* Position the background text */
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.); /* Black background with 0.5 opacity */
        color: red;
        /*display: block;
	justify-content: center;*/
}
.content {
        display: block;
        margin: auto;
        margin-top: em;
        position: absolute; /* Position the background text */
        top: 0;
        bottom: 0; /* At the bottom. Use top:0 to append it to the top */
        background: rgba(0, 0, 0, 0.); /* Black background with 0.5 opacity */
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        padding: 1em;
        color: black;
        max-width: 600px;
        font-weight: 600;
}
.text {
        display: inline-block;
        background-color: lightcyan;
        width: 100%;
        float: left;
        color: black;
        border-radius: 5px;
        padding: 0.2em;
        margin-top: 0.5em;
        margin-bottom: em;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        /*width: fit-content;*/
        max-width: 600px;
        font-weight: 600;
        opacity: ;
        white-space: pre-wrap;
}
.heading {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        font-size: 2em;
        color: brown;
        margin-bottom: 0.5em;
}
.pink {
        color: pink;
}
.spacer {
        /*Überschriften*/
        background-color: blue;
        width: 100%;
        float: left;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.0;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.4em;
        width: fit-content;
        text-align: left;
}
.text0 {
        /*Überschriften*/
        background-color: azure;
        width: 90%;
        float: left;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.4em;
        width: fit-content;
        text-align: left;
}
.text2 {
        background-color: salmon;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        color: black;
        font-weight: 700;
}
.text1 {
        background-color: lemonchiffon;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: ;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        font-style: italic;
        font-weight: 600;
        color: black;
}
.text3 {
        background-color: chartreuse;
        width: 100%;
        float: ight;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.05em;
        color: black;
        font-weight: 600;
        font-style: italic;
}
.harriet {
        display: inline-block;
        background-color: lavender;
        width: 80%;
        float: left;
        border-radius: 5px;
        margin-top: 0.5em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.harriet-wa {
        display: inline-block;
        background-color: bisque;
        width: 90%;
        float: right;
        border-radius: 15px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.hedi {
        display: inline-block;
        background-color: darkseagreen;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: 0.5em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.hedi-wa {
        display: inline-block;
        background-color: darkseagreen;
        width: 70%;
        float: left;
        border-radius: 15px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.ben {
        display: inline-block;
        background-color: lightskyblue;
        widt: 90%;
        float: right;
        border-radius: 5px;
        margin-top: 0.5em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.zoe {
        display: inline-block;
        background-color: lavenderblush;
        widt: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.torsten {
        display: inline-block;
        background-color: deepskyblue;
        widt: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.nr1 {
        display: inline-block;
        background-color: yellowgreen;
        widt: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.nr2 {
        display: inline-block;
        background-color: honeydew;
        widt: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.aerztin {
        display: inline-block;
        background-color: palegreen;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: 0.5em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.polizistin {
        display: inline-block;
        background-color: rosybrown;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: 0.5em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.geli {
        display: inline-block;
        background-color: palegreen;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.harriet05 {
        display: inline-block;
        background-color: bisque;
        width: 90%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.5;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.maya {
        display: inline-block;
        background-color: palegreen;
        width: 70%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.maya-wa {
        display: inline-block;
        background-color: palegreen;
        width: 70%;
        float: right;
        border-radius: 15px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.1em;
        width: fit-conten;
        font-weight: 600;
        color: black;
}
.pagination {
        position: fixed;
        left: 50%;
        bottom: 0.5em;
        /*width: ;
    height: ;
    background-color: ;
    */
        color: black;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 2em;
        /*text-align: ;
	  padding: em;
	  border-radius: em;*/
}
.nav {
        position: fixed;
        left: 0.1em;
        bottom: 0.1em;
        width: auto;
        height: 5vh;
        background-color: darkgra;
        color: black;
        text-align: left;
        padding: 1em;
        border-radius: 1em;
}
.navright {
        position: fixed;
        right: 0.1em;
        bottom: 0.1em;
        width: auto;
        height: 2vh;
        background-color: darkgray;
        color: black;
        text-align: right;
        font-size: 1.25em;
        padding: .3em;
        border-radius: .3em;
}
.footer {
        position: fixed;
        right: 0.1em;
        left: 0.1em;
        bottom: 0em;
        width: 100%;
        height: 4vh;
        background-color: darkgray;
        color: black;
        text-align: right;
        padding: 1em;
        border-radius: em;
        opacity: 0.5;
}
h2 {
        font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
        font-size: 2.0em;
        color: blueviolet;
        text-align: center;
        margin-top: 2%;
        margin-bottom: 2%;
}
p {
        font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
        font-size: 1.2em;
        color: #000000;
        text-align: ustify;
        line-height: 1.2em;
        margin-left: 5%;
        margin-right: 5%;
        font-weight: 600;
}
h3 {
        font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
        font-size: 1.5em;
        color: blueviolet;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 1%;
        margin-left: 5%;
}
h1 {
        font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
        font-size: 1.5em;
        color: blueviolet;
        text-align: left;
        margin-top: 2%;
        margin-bottom: 1%;
        margin-left: %;
}
* {
        margin: 0;
        padding: 0;
}

#myVideo {
        /*#video_container {
}*/ ;
}
#myAudio {}
.text-block {
        position: absolute;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        background-color: lightblue;
        top: 20px;
        width: 70%;
        right: ;
        opacity: 0.75;
}
.img {
        display: flex;
        justify-content: center;
}
.img1 {
        max-width: 400px;
        height: auto;
        padding-top: 1em;
        text-align: center;
        margin: auto;
        /*justify-content: center;
  text-align: center;
    float: left;
    margin: auto;*/
        opacity: ;
}
.img2 {
        max-width: 400px;
        height: auto;
        padding-top: 1em;
        text-align: center;
        margin: auto;
        /*justify-content: center;
  text-align: center;
    float: left;
    margin: auto;*/
        opacity: 0.5;
}
.imgfl {
        float: left;
        padding: 0.75em;
}
.imgfr {
        float: right;
}
.weiter {
        color: crimson;
        background-color: darkseagreen;
        width: 20%;
        float: right;
        border-radius: 5px;
        margin-top: em;
        padding: 0.2em;
        opacity: 0.;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 1.3em;
        font-style: italic;
}
.interlude {
        display: block;
        margin: auto;
}
.goto {
        display: inline-block;
        background-color: beige;
        width: 99%;
        float: left;
        color: black;
        border-radius: 5px;
        padding: 0.2em;
        padding-left: 2em;
        margin-top: 0.5em;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size: 2em;
        /*width: fit-content;*/
        max-width: 600px;
}
.cite {
        font: italic;
        font-size: 1.3em;
        background-color: darkslategray;
}
.zeit {
        background-color: aqu;
        float: right;
        margin-right: 1em;
}
.caption {
      max-width: 400px;
        height: auto;
        padding-top: em;
        text-align: center;
        margin: auto;  
}
/* Hide the images by default */
.mySlides {
        display: none;
}
/* Next & previous buttons */
.prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: crimson;
        font-weight: bold;
        font-size: 3em;
        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 */
.tex {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
        color: black;
        font-size: 2em;
        padding: 8px 12px;
        position: absolute;
        top: 0;
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
/* 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 {
        animation-name: fade;
        animation-duration: 1.5s;
}
@keyframes fade {
        from {
                opacity: .4
        }
        to {
                opacity: 1
        }
}