@font-face {
    font-family: vt323;
    src: url(../fonts/vt323.ttf);
}

/*
@font-face {
    font-family: brooklyn;
    src: url(../fonts/brooklyn.otf);
}

@font-face {
    font-family: coming;
    src: url(../fonts/coming.ttf);
}

@font-face {
    font-family: flower;
    src: url(../fonts/flower.ttf);
}

@font-face {
    font-family: handle;
    src: url(../fonts/handle.ttf);
}
*/


html,
body {
    /*color: #f41a3b;*/
    color: #eba8bf;
    height: 100%;
    min-height: 100%;
    width: 100%;
    font-family: vt323;
    font-size: 35px;
    text-shadow: 1px 1px 2px #404040;
    background-color: #505050;

    outline: none;
    -webkit-tap-highlight-color: transparent;
}

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 1;
    background-color: #000000;
    z-index: 99;
    text-align: center;
}

#loading-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 100;
}

.enter-circle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}



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

.clickable {
    cursor: pointer;
}

.container {
    background-color: red;
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg {
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}


#noiseBG {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}



.glow {
    -webkit-filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.6));
    /* 235, 168, 191 */
    /* 200, 0, 100 */
    filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.6));
    -webkit-transition: 0.2s -webkit-filter linear;
    transition: 0.2s filter linear, 0.2s -webkit-filter linear;
}

.clickable:hover {
    -webkit-filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 1));
    /* 235, 168, 191 */
    /* 200, 0, 100 */
    filter: drop-shadow(0px 0px 25px rgba(255, 255, 255, 1));
    -webkit-transition: 0.2s -webkit-filter linear;
    transition: 0.2s filter linear, 0.2s -webkit-filter linear;
}

.glowwhite {
    -webkit-filter: drop-shadow(0px 0px 25px rgba(235, 168, 191, 0.6));
    /* 235, 168, 191 */
    /* 200, 0, 100 */
    filter: drop-shadow(0px 0px 25px rgba(235, 168, 191, 0.6));
}

#kajapschill {
    position: fixed;
    width: 65%;
    top: 0;
    left: 0;
    margin-left: 3%;
    margin-top: 5%;
}

#touchme {
    position: fixed;
    left: 55%;
    top: 40%;
    transform: translate(-50%, -50%);
}

#produktionen {
    display: none;
    position: fixed;
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%) rotate(-4deg);
    ;
}

#produktionen>img {
    /*width: 80%;*/
}

#aktuelles {
    display: none;
    position: fixed;
    top: 51%;
    left: 28%;
    transform: translate(-10%, 0%) rotate(10deg);
}

#aktuelles>img {
    width: 70%;
}

#videos {
    display: none;
    position: fixed;
    right: 5%;
    top: 15%;
    transform: translate(-10%, -00%) scale(1.2)rotate(20deg);
    z-index: 10;
}

#videos>img {
    width: 80%;
}

#kontakt {
    display: none;
    position: fixed;
    left: 10%;
    top: 17%;
    transform: translate(-10%, -0%) scale(1.2) rotate(-20deg);
}

#kontakt>img {
    width: 80%;
}

#kontaktMail>span>a {
    color: #eba8bf;
}

#about {
    display: none;
    position: fixed;
    left: 14%;
    bottom: 20%;
    transform: translate(-10%, -00%) scale(1.2) rotate(-20deg);


}

#about>img {
    width: 80%;
}

#kritik {
    display: none;
    position: fixed;
    right: 8%;
    top: 50%;
    transform: translate(-10%, -00%) scale(1.6) rotate(-5deg);


}

#kritik>img {
    width: 80%;
}


#bronski {
    display: none;
    position: fixed;
    right: 24%;
    bottom: 13%;
    cursor: pointer;
    transform: translate(-5%, -00%) scale(1.1) rotate(-20deg);

}

.main-trailer {
    display: none;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

#closeTrailer {
    display: none;
    z-index: 100;
}

.closeX {
    position: absolute;
    right: 7%;
    top 7%;
    z-index: 100;
    transform: scale(0.7);

}

.show {
    opacity: 1;
    visibility: visible;
}

.rotate5left {
    transform: rotate(-5deg);
}


/* ---------------------------------------------     PRODUKTIONEN     ------------------ */



.lightboxContainer {}

.prevIcon {

    position: absolute;
    left: 33%;
    top: -50px;
    z-index: 10;
    width: 40px;
}

.nextIcon {

    position: absolute;
    left: 62%;
    top: -50px;
    transform: scale(0.5);
    width: 40px;
}




#prodDracula {
    display: none;
    position: fixed;
    left: 20%;
    bottom: 15%;
    transform: translate(-10%, -00%);
    transform: rotate(-23deg);
}

#prodDracula2 {
    display: none;
    position: fixed;
    left: 30%;
    top: 15%;
    transform: translate(-10%, -00%);
    transform: scale(1.3) rotate(-20deg);
}
#prodRomeo {
    display: none;
    position: fixed;
    left: 47%;
    top: 40%;
    transform: translate(-10%, -00%);
    transform: rotate(-10deg) scale(1.4);
}
#prodHoellenangst {
    display: none;
    position: fixed;
    right: 10%;
    top: 57%;
    transform: translate(-10%, -00%);
    transform: scale(1.3) rotate(-0deg);
}

#prodAmadeus {
    display: none;
    position: fixed;
    left: 20%;
    top: 35%;
    transform: translate(-10%, -00%);
    transform: rotate(-23deg);

}

#prodCaesar {
    display: none;
    position: fixed;
    left: 40%;
    top: 15%;
    transform: translate(-10%, -00%);
    transform: rotate(-23deg);
}

#prodLiebschaften {
    display: none;
    position: fixed;
    left: 4%;
    top: 16%;
    transform: translate(-10%, -00%);
    transform: rotate(-10deg) scale(0.9);
}

#prodRigoletto {
    display: none;
    position: fixed;
    left: 18%;
    top: 50%;
    transform: rotate(-10deg);
}

#prodWasIhrWollt {
    display: none;
    position: fixed;
    left: 4%;
    bottom: 20%;
    transform: translate(-10%, -00%);
    transform: rotate(-10deg);
}

#prodSchuld {
    display: none;
    position: fixed;
    right: 10%;
    top: 30%;
    transform: translate(-10%, -00%);
    transform: rotate(40deg);
}

#prodMass {
    display: none;
    position: fixed;
    right: 10%;
    bottom: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(20deg);
}

#prodSpieler {
    display: none;
    position: fixed;
    left: 40%;
    top: 62%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg) scale(0.8);
}

#prodTraviata {
    display: none;
    position: fixed;
    right: 3%;
    top: 14%;
    transform: translate(-10%, -00%);
    transform: rotate(16deg) scale(0.8);
}

#prodOedipus {
    display: none;
    position: fixed;
    left: 40%;
    bottom: 2%;
    transform: translate(-10%, -00%);
    transform: rotate(-10deg) scale(0.5);
}

.produktionBody {
    display: none;
    position: fixed;
    //width: 60%;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -00%);

}

.produktionSlides {}

.produktionenCast {
    width: 35%;
    font-size: 20px;
    //background-color: #ff00ff33;
    position: fixed;
    left: -25%;
    top: 30%;
    transform: rotate(-3deg);
}

.ProduktionenPress {
    display: none;
    position: fixed;
    //width: 60%;
    left: 70%;
    top: 45%;
    transform: translate(-50%, -00%);
}



.slidesContainer {
    position: fixed;
    height: 75vh;
    width: 50vw;
    padding: 0px;
    margin: 0px;
    left: 0%;
    list-style-type: none;

}

.kritikContainer {
    position: fixed;
    height: 75vh;
    width: 75vw;
    padding: 0px;
    margin: 0px;
    left: 0%;
    list-style-type: none;

}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    text-align: center;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.slide>img {
    height: 100%;
    margin: auto;

}


/* ---------------------     PRODUKTIONEN: GEF LIEBSCHAFTEN     ------------------ */
#ProduktionenLiebschaftenHead {
    display: none;
    position: fixed;
    left: 39%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

/* ------------------------------     PRODUKTIONEN: DRACULA     ------------------ */
#ProduktionenDraculaHead {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenDracula2Head {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenRomeoHead {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenHoellenangstHead {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenAmadeusHead {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenCaesarHead {
    display: none;
    position: fixed;
    left: 40%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}


/* -----------------------     PRODUKTIONEN: SCHULD & SÜHNE     ------------------ */
#ProduktionenSchuldHead {
    display: none;
    position: fixed;
    left: 37%;
    top: 5%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

#ProduktionenSchuldQuote {
    display: none;
    position: fixed;
    right: 10%;
    bottom: 10%;
    transform: rotate(2deg);
    font-size: 27px;
}

#ProduktionenCaesarQuote {
    display: none;
    position: fixed;
    right: 10%;
    bottom: 10%;
    transform: rotate(2deg);
    font-size: 27px;
}






/* ----------------------------     PRODUKTIONEN: RIGOLETTO     ------------------ */
#ProduktionenRigolettoHead {
    display: none;
    position: fixed;
    left: 45%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

/* ------------------------------     PRODUKTIONEN: SPIELER     ------------------ */
#ProduktionenSpielerHead {
    display: none;
    position: fixed;
    left: 37%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

/* -------------------------     PRODUKTIONEN: WAS IHR WOLLT     ------------------ */
#ProduktionenWolltHead {
    display: none;
    position: fixed;
    left: 43%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}

/* -------------------------     PRODUKTIONEN: MASS FÜR MASS     ------------------ */
#ProduktionenMassHead {
    display: none;
    position: fixed;
    left: 43%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(3deg);
    z-index: 5;
}

/* ----------------------------     PRODUKTIONEN: TRAVIATA     ------------------ */
#ProduktionenTraviataHead {
    display: none;
    position: fixed;
    left: 45%;
    top: 10%;
    transform: translate(-10%, -00%);
    transform: rotate(0deg);
    z-index: 5;
}


/* ----------------------------     PRODUKTIONEN: OEDIPUS     ------------------ */
#ProduktionenOedipusHead {
    display: none;
    position: fixed;
    left: 42%;
    top: 10%;
    transform: translate(-10%, -00%) scale(0.8);
    z-index: 5;
}





/* ---------------------------------------------     TEXTE     ------------------ */
#aktuellesHead {
    display: none;
    position: fixed;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
}

#texteMaxerl {
    display: none;
    position: fixed;
    right: 6%;
    bottom: 6%;
    transform: translate(-10%, -00%);
    transform: rotate(-7deg);
}

#texteGunther {
    display: none;
    position: fixed;
    left: 3%;
    top: 9%;
    transform: scale(0.8) rotate(25deg);
}


.verlagLink {
    font-size: 30px;
    padding-left: 20px;
    padding-bottom: 10px;
}

#aktuellesContent {
    display: none;
    position: fixed;
    left: 10%;
    top: 34%;
    width: 85%;
    font-size: 0.55em;

}


#texteWasIhrWollt,
#texteDracula,
#texteCaesar,
#texteSchuld {
    display: none;

    background-color: 'red';
}

#texteWasIhrWollt {
    margin-top: 25%;
}


#texteWasIhrWollt>img {
    width: 50%;
}

#texteDracula>img {
    width: 50%;
}

#texteCaesar>img {
    width: 50%;
}

#texteSchuld>img {
    width: 50%;
}

#texteMass>img {
    width: 50%;
}

.texteColumn {}






/* ---------------------------------------------     VIDEOS      ------------------ */


#videosPage {
    width: 100%;
    height: 100%;
    outline: none !important;
}

#videosTV {
    //display: none;
}

#videosWrapper {
    //display: none;
}

#youtubeWrapper {
    //display: none;
}




.TVContainer {
    display: none;
    width: 70%;
    height: 50%;
    max-width: 1034px;
    max-height: 543px;
    margin: 5% auto 10% auto;
    //background-color: #ff000033;
}

.TVMargin {
    position: relative;
    //padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}

.TV {

    box-sizing: border-box;
    background: url(../images//tv.png) center center no-repeat;
    background-size: contain;
    padding: 18% 8.5% 15.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.TVVideo {
    top: 30%;
    width: 77%;
}

#videoSpieler {
    display: none;
    position: absolute;
    transform: rotate(-25deg);
    top: 15%;
    left: 0%;
    z-index: 100;
}

#videoTraviata {
    display: none;
    position: absolute;
    transform: rotate(35deg) scale(0.6);
    top: 40%;
    left: -3%;
    z-index: 100;
}

#videoSpieler>img {
    width: 15vw;
}

#videoSchuld {
    display: none;
    position: absolute;
    transform: rotate(55deg);
    bottom: 24%;
    left: 0%;
    z-index: 100;
}

#videoSchuld>img {
    width: 17vw;
}

#videoMass {
    display: none;
    position: absolute;
    transform: rotate(-35deg);
    top: 6%;
    left: 40%;
    z-index: 100;
}

#videoMass>img {
    width: 9vw;
}

#videoRigoletto {
    display: none;
    position: absolute;
    transform: rotate(40deg);
    top: 30%;
    right: 0%;
    z-index: 100;
}

#videoRigoletto>img {
    width: 13vw;
}

#videoWasIhrWollt {
    display: none;
    position: absolute;
    transform: rotate(-40deg);
    top: 25%;
    right: 5%;
    z-index: 100;
}

#videoLiebschaften {
    display: none;
    position: absolute;
    transform: rotate(-30deg) scale(0.8);
    bottom: 15%;
    right: 0%;
    z-index: 100;
}

#videoWasIhrWollt>img {
    width: 10vw;
}



/* ---------------------------------------------     BRONSKI     ------------------ */
#bronskiText {
    display: none;
    position: fixed;
    width: 55%;
    left: 12%;
    top: 20%;
    transform: rotate(-5deg);

}

#bronskiText>img {
    width: 90%;
}



#bronskiButton {
    display: none;
    position: fixed;
    right: 20%;
    bottom: 20%;

}

#bronskiButton>a>img {
    width: 70%;
}



/* ---------------------------------------------     KONTAKT     ------------------ */
#kontaktHead {
    display: none;
    position: fixed;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
}

#kontaktMail {
    display: none;
    position: fixed;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

#kontaktMail>span>a {
    font-size: 35px;
}

#kontaktGabi {
    display: none;
    position: fixed;
    left: 2%;
    top: 10%;
    transform: scale(0.8) rotate(-20deg);

}

#kontaktPolizei {
    display: none;
    position: fixed;
    right: 10%;
    top: 46%;
    transform: scale(0.9) rotate(10deg);

}

/* ---------------------------------------------     ÜBER UNS     ------------------ */
#aboutHead {
    display: none;
    position: fixed;
    top: 60%;
    left: 14%;
    transform: translate(-50%, -50%) scale(0.8) rotate(-6deg);

}

#aboutBoth {
    display: none;
    position: absolute;
    top: 20%;
    left: 5%;
    transform: rotate(1deg) scale(0.9);

}

.aboutBothPhoto {
    margin-left: 13%;
}

#aboutAlex {
    display: none;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: rotate(1deg) scale(0.8);
}

#aboutKaja {
    display: none;
    position: absolute;
    top: 5%;
    right: 5%;
    transform: rotate(5deg) scale(0.8);
}

.aboutColumn {
    top: 20%;
    overflow: hidden;
}

#aboutContent {
    display: none;
    position: absolute;
    top: 14%;
    left: 30%;
    width: 45vw;
    height: 77vh;

    transform: translate(-48%, -00%);
    //background-color: #ff000090;
    overflow: auto;
    transform: rotate(-2deg);

}

.aboutText {
    font-size: 23px;
}

/* ---------------------------------------------     KRITIKEN     ------------------ */
#kritikHead {
    display: none;
    position: fixed;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.3);
}

#kritikContent {
    display: none;
    position: absolute;
    padding-top: 5%;
    top: 14%;
    width: 80vw;
    height: 95vh;
    margin-left: 50vw;
    transform: translate(-48%, 0%) rotate(-3deg);
    //background-color: #ff000033;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 25px;



}

.variableFontSize {
    font-size: 2.4vh !important;
}



.prevKritik {
    display: none;
    position: absolute;
    top: 20%;
    left: 30%;
    z-index: 100;
}

.nextKritik {
    display: none;
    position: absolute;
    top: 20%;
    left: auto;
    right: 30%;
    z-index: 100;
}



#closeAbout,
#closeKritik,
#closeKontakt,
#closeAktuelles,
#closeVideos,
#closeBronski,
#closeProduktionen,
#closeProduktionenLiebschaften,
#closeProduktionenDracula,
#closeProduktionenDracula2,
#closeProduktionenHoellenangst,
#closeProduktionenRomeo,
#closeProduktionenAmadeus,
#closeProduktionenCaesar,
#closeProduktionenSchuld,
#closeProduktionenRigoletto,
#closeProduktionenSpieler,
#closeProduktionenWollt,
#closeProduktionenMass,
#closeProduktionenTraviata,
#closeProduktionenOedipus {
    top: 40px;
    display: none;
}





.showing {
    opacity: 1;
    z-index: 2;
}

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    border-color: white;
    border-width: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background-color: #eba8bf55;
    border-radius: 10px;
}

/*
.slide {
      font-size: 20px;
    padding: 40px;
    box-sizing: border-box;
    background: #000000;
    color: #ffffff;
    border-style: dashed;
    border-width: 3px;
}

.slide:nth-of-type(1) {
    background: black;
}

.slide:nth-of-type(2) {
    background: orange;
}

.slide:nth-of-type(3) {
    background: green;
}

.slide:nth-of-type(4) {
    background: blue;
}

.slide:nth-of-type(5) {
    background: purple;
}
 */






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


    h2 {
        font-size: 2em;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #kajapschill {
        position: fixed;
        width: 95%;
        top: 0;
        left: 0;
        margin-left: 3%;
        margin-top: 5%;
    }

    #touchme {
        position: fixed;
        left: 55%;
        top: 37%;
        transform: translate(-50%, -50%);
    }

    #produktionen {
        display: none;
        position: fixed;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.8);
        ;
    }


    #aktuelles {
        display: none;
        position: fixed;
        top: 51%;
        left: 28%;
        transform: translate(-10%, 0%) rotate(10deg);
    }



    #videos {
        display: none;
        position: fixed;
        right: 0%;
        top: 6%;
        transform: translate(-10%, -00%) scale(1.2)rotate(20deg);
    }

    #videos>img {
        width: 80%;
    }

    #kontakt {
        display: none;
        position: fixed;
        left: 12%;
        top: 17%;
        transform: translate(-10%, -00%) scale(1.2) rotate(-20deg);
    }

    #kontakt>img {
        width: 80%;
    }

    #kontaktMail>span>a {
        color: #eba8bf;
    }

    #about {
        display: none;
        position: fixed;
        left: 14%;
        bottom: 25%;
        transform: translate(-10%, -00%) scale(1.2) rotate(-20deg);


    }

    #about>img {
        width: 80%;
    }

    #kritik {
        display: none;
        position: fixed;
        right: 3%;
        top: 63%;
        transform: translate(-10%, -00%) scale(1.3) rotate(-5deg);


    }

    #kritik>img {
        width: 80%;
    }


    #bronski {
        display: none;
        position: fixed;
        right: -2%;
        bottom: 9%;
        cursor: pointer;
        transform: translate(-5%, -00%) scale(1.1) rotate(-20deg);

    }

    #bronski>img {
        width: 80%;
    }






    /*      KONTAKT     */

    #kontaktPolizei {
        display: none;
        position: fixed;
        height: 10%;
        right: 9%;
        top: 80%;
        transform: scale(0.8) rotate(10deg);

    }



    /*      BRONSKI     */

    #bronskiText {
        display: none;
        position: fixed;
        width: 100%;
        left: 2%;
        top: 25%;
        transform: rotate(-5deg);

    }

    #bronskiText>img {
        width: 90%;
    }



    #bronskiButton {
        display: none;
        position: fixed;
        right: 0%;
        bottom: 25%;

    }

    #bronskiButton>a>img {
        width: 70%;
    }


    /*          ÜBER US ABOUT          */

    #aboutHead {
        display: none;
        position: fixed;
        top: 60%;
        left: 14%;
        transform: translate(-50%, -50%) scale(0.2) rotate(-6deg);

    }

    #aboutBoth {
        display: none;
        position: absolute;
        top: -7%;
        left: 2%;
        transform: rotate(1deg) scale(0.5);

    }

    .aboutBothPhoto {
        margin-left: 13%;
    }

    #aboutAlex {
        display: none;
        position: absolute;
        bottom: -55%;
        left: 0%;
        right: auto;
        transform: rotate(1deg) scale(0.4);
    }

    #aboutKaja {
        display: none;
        position: absolute;
        top: auto;
        bottom: -10%;
        right: 0%;
        transform: rotate(5deg) scale(0.4);
    }

    .aboutColumn {
        top: 20%;
        overflow: hidden;
    }

    #aboutContent {
        display: none;
        position: absolute;
        top: 24%;
        left: 5%;
        width: 90vw;
        height: 57vh;

        transform: translate(-48%, -00%);
        //background-color: #ff000090;
        overflow: scroll;
        transform: rotate(-2deg);

    }

    .aboutText {
        font-size: 23px;
    }



    /*           KRITIKEN          */

    #kritikHead {
        display: none;
        position: fixed;
        top: 10%;
        left: 40%;
        transform: translate(-50%, -50%) rotate(5deg) scale(1.3);
    }



    #kritikContent {
        display: none;
        position: absolute;
        padding-top: 5%;
        top: 20%;
        width: 92vw;
        height: 70vh;
        margin-left: 50vw;
        transform: translate(-48%, 0%) rotate(-3deg);
        overflow: scroll;
        font-size: 20px;
        -webkit-overflow-scrolling: touch;


    }

    #kritikContent>div {}

    #slidesKritik {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }



    .prevKritik {
        position: absolute;
        top: 15%;
        left: 10%;
    }

    .nextKritik {
        top: 15%;
        left: auto;
        right: 20%;
    }



    #aktuellesHead {
        display: none;
        position: fixed;
        left: 37%;
        top: 10%;
        transform: translate(-50%, -50%) scale(0.6);
    }


    #aktuellesContent {
        display: none;
        position: absolute;
        padding-top: 5%;
        top: 20%;
        left: 0;
        width: 92vw;
        height: 70vh;
        margin-left: 50vw;
        transform: translate(-48%, 0%) rotate(-3deg);
        overflow: scroll;
        font-size: 20px;
        //background-color: #ff0000;

    }



    /*          VIDEOS          */


    #videoSpieler {
        display: none;
        position: absolute;
        transform: rotate(-25deg);
        top: auto;
        bottom: 40%;
        left: 5%;
        z-index: 100;
    }

    #videoSpieler>img {
        width: 45vw;
    }

    #videoTraviata {
        display: none;
        position: absolute;
        transform: rotate(35deg) scale(0.5);
        top: auto;
        bottom: 23%;
        left: 10%;
        z-index: 100;
    }

    .TVContainer {
        width: 95%;
        margin: 40% auto 10% auto;
    }


    #videoSchuld {
        transform: rotate(40deg);
        bottom: 18%;
        left: 5%;

    }

    #videoSchuld>img {
        width: 45vw;
    }



    #videoRigoletto {

        top: auto;
        bottom: 30%;
        right: 0%;

    }

    #videoRigoletto>img {
        width: 33vw;
    }


    #videoLiebschaften {

        transform: rotate(-30deg) scale(0.7);
        bottom: 5%;
        right: 0%;

    }


    /* ---------------------------------------------     PRODUKTIONEN     ------------------ */



    .lightboxContainer {}

    .prevIcon {

        position: absolute;
        //left: 0px;
        //top: 0px;
        //z-index: 100;
        //width: 400px;
    }

    .nextIcon {

        position: absolute;
        //left: 62%;
        //top: -50px;
        transform: scale(0.5);
        width: 40px;
    }




    #prodDracula {
        display: none;
        position: fixed;
        left: auto;
        right: -20%;
        top: 10%;
        transform: translate(-10%, -00%);
        transform: rotate(-23deg) scale(0.7);
    }

    #prodDracula2 {
        display: none;
        position: fixed;
        left: auto;
        left: 35%;
        top: 7%;
        transform: translate(-10%, -00%);
        transform: rotate(-23deg) scale(0.9);
    }

    #prodRomeo {
        display: none;
        position: fixed;
        left: auto;
        right: 10%;
        top: 54%;
        transform: translate(-10%, -00%);
        transform: rotate(10deg) scale(1);
    }

    #prodHoellenangst {
        display: none;
        position: fixed;
        left: auto;
        right: 10%;
        top: 47%;
        transform: translate(-10%, -00%);
        transform: rotate(10deg) scale(1);
    }

    #prodAmadeus {
        display: none;
        position: fixed;
        left: auto;
        right: -5%;
        top: 37%;
        transform: translate(-10%, -00%);
        transform: rotate(23deg) scale(0.7);
    }

    #prodCaesar {
        display: none;
        position: fixed;
        left: auto;
        right: -25%;
        top: 13%;
        transform: translate(0%, -10%);
        transform: rotate(-15deg) scale(0.5);
    }

    #prodLiebschaften {
        display: none;
        position: fixed;
        left: -6%;
        top: 3%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.6);
    }

    #prodRigoletto {
        display: none;
        position: fixed;
        left: 8%;
        top: 40%;
        transform: rotate(-10deg) scale(0.8);
    }

    #prodWasIhrWollt {
        display: none;
        position: fixed;
        left: 0%;
        bottom: 5%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.7);
    }

    #prodSchuld {
        display: none;
        position: fixed;
        right: 20%;
        top: 25%;
        transform: translate(-10%, -00%);
        transform: rotate(30deg) scale(0.6);
    }

    #prodMass {
        display: none;
        position: fixed;
        right: 10%;
        bottom: 0%;
        transform: translate(-10%, -00%);
        transform: rotate(20deg) scale(0.65);
    }

    #prodSpieler {
        display: none;
        position: fixed;
        left: -10%;
        top: 60%;
        transform: translate(-20%, -00%);
        transform: rotate(-20deg) scale(0.6);
    }

    #prodTraviata {
        display: none;
        position: fixed;
        left: -20%;
        top: 52%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.6);
    }

    #prodOedipus {
        display: none;
        position: fixed;
        left: 25%;
        top: 59%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.4);
    }

    .produktionBody {
        top: 28%;
    }

    .produktionSlides {}

    .produktionenCast {
        width: 35%;
        font-size: 20px;
        //background-color: #ff00ff33;
        position: fixed;
        left: -25%;
        top: 30%;
        transform: rotate(-3deg);
    }

    .ProduktionenPress {
        top: 55%;
        transform: translate(-50%, -00%) rotate(10deg) scale(0.8);
    }






    .kritikContainer {
        position: fixed;
        height: 75vh;
        width: 75vw;
        padding: 0px;
        margin: 0px;
        left: 0%;
        list-style-type: none;

    }

    .slide {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        /*        opacity: 0;*/
        z-index: 1;
        text-align: center;
        -webkit-transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
    }

    .slide>img {
        height: 100%;
        margin: auto;

    }




    /* ---------------------     PRODUKTIONEN: GEF LIEBSCHAFTEN     ------------------ */
    #ProduktionenLiebschaftenHead {
        display: none;
        position: fixed;
        left: 5%;
        top: 10%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }

    /* ------------------------------     PRODUKTIONEN: DRACULA     ------------------ */
    #ProduktionenDraculaHead {
        display: none;
        position: fixed;
        left: 15%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }
    #ProduktionenDracula2Head {
        display: none;
        position: fixed;
        left: 15%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }
    #ProduktionenRomeoHead {
        display: none;
        position: fixed;
        left: 15%;
        top: 25%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }
    #ProduktionenHoellenangstHead {
        display: none;
        position: fixed;
        left: 15%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }

    #ProduktionenAmadeusHead {
        display: none;
        position: fixed;
        left: 15%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }

    #ProduktionenCaesarHead {
        display: none;
        position: fixed;
        left: 0%;
        top: 15%;
        transform: translate(-0%, -00%);
        transform: rotate(0deg);
        transform: scale(0.6);
        z-index: 5;
    }



    /* -----------------------     PRODUKTIONEN: SCHULD & SÜHNE     ------------------ */
    #ProduktionenSchuldHead {
        display: none;
        position: fixed;
        left: 0%;
        top: 12%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg) scale(0.7);
        z-index: 5;
    }

    #ProduktionenSchuldQuote {
        display: none;
        position: fixed;
        right: 1%;
        bottom: 10%;
        width: 90%;
        transform: rotate(2deg);
        font-size: 0.6em;
    }






    /* ----------------------------     PRODUKTIONEN: RIGOLETTO     ------------------ */
    #ProduktionenRigolettoHead {
        display: none;
        position: fixed;
        left: 25%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }

    /* ------------------------------     PRODUKTIONEN: SPIELER     ------------------ */
    #ProduktionenSpielerHead {
        display: none;
        position: fixed;
        left: 5%;
        top: 14%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg) scale(0.7);
        z-index: 5;
    }

    /* -------------------------     PRODUKTIONEN: WAS IHR WOLLT     ------------------ */
    #ProduktionenWolltHead {
        display: none;
        position: fixed;
        left: 13%;
        top: 10%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg) scale(0.9);
        z-index: 5;
    }

    /* -------------------------     PRODUKTIONEN: MASS FÜR MASS     ------------------ */
    #ProduktionenMassHead {
        display: none;
        position: fixed;
        left: 16%;
        top: 12%;
        transform: translate(-10%, -00%);
        transform: rotate(3deg) scale(0.8);
        z-index: 5;
    }

    /* ----------------------------     PRODUKTIONEN: TRAVIATA     ------------------ */
    #ProduktionenTraviataHead {
        display: none;
        position: fixed;
        left: 5%;
        top: 14%;
        transform: translate(-10%, -00%);
        transform: rotate(5deg) scale(0.7);
        z-index: 5;
    }


    /* ----------------------------     PRODUKTIONEN: OEDIPUS     ------------------ */
    #ProduktionenOedipusHead {
        display: none;
        position: fixed;
        left: 5%;
        top: 12%;
        transform: translate(-10%, -00%) scale(0.5);
        z-index: 5;
    }


    .gclose {
        margin-right: 26px;
        margin-top: 38px;
    }


}


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


    * {
        line-height: 1.2em;
    }



    .closeX {
        position: absolute;
        right: 3%;
        z-index: 100;
        transform: translate(-0px, -40%) scale(0.5);

    }




    #produktionen {
        display: none;
        position: fixed;
        left: 50%;
        top: 38%;
        transform: translate(-50%, -50%) rotate(-4deg) scale(0.75);
        ;
    }



    #aktuelles {
        display: none;
        position: fixed;
        top: 47%;
        left: 38%;
        transform: translate(-10%, 0%) rotate(10deg) scale(1.2);
    }



    #videos {
        display: none;
        position: fixed;
        right: -0%;
        top: 9%;
        transform: translate(-0%, -0%) scale(1.2)rotate(20deg);
    }



    #kontakt {
        display: none;
        position: fixed;
        left: 14%;
        top: 17%;
        transform: translate(-10%, -0%) scale(1.2) rotate(-20deg);
    }



    #kontaktMail>span>a {
        color: #eba8bf;
    }

    #about {
        display: none;
        position: fixed;
        left: 14%;
        bottom: 23%;
        transform: translate(-10%, -0%) scale(1.2) rotate(-20deg);


    }



    #kritik {
        display: none;
        position: fixed;
        right: 0%;
        top: 66%;
        transform: scale(1.3) rotate(18deg);


    }



    #bronski {
        display: none;
        position: fixed;
        left: 14%;
        right: auto;
        bottom: 7%;
        cursor: pointer;
        transform: translate(-5%, -00%) scale(1.1) rotate(-20deg);

    }








    .TVContainer {
        width: 95%;
        margin: 22% auto 10% auto;
    }

    #touchme {
        position: fixed;
        left: 55%;
        top: 35%;
        transform: translate(-50%, -50%);
    }


    #kontaktHead {
        display: none;
        position: fixed;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }

    #ProduktionenSchuldQuote {
        display: none;
        position: fixed;
        right: 1%;
        bottom: 3%;
        width: 90%;
        transform: rotate(2deg);
        font-size: 0.6em;
    }

    .ProduktionenPress {
        top: 55%;
        transform: translate(-50%, 20%) rotate(10deg) scale(0.8);
    }


    .gclose {
        width: 35px !important;
        height: 35px !important;
        margin-right: 18px;
        margin-top: 15px;
    }



    #kritikContent {
        display: none;
        position: absolute;
        padding-top: 5%;
        top: 23%;
        width: 92vw;
        height: 70vh;
        margin-left: 50vw;
        transform: translate(-48%, 0%) rotate(-3deg);
        overflow: auto;
        font-size: 18px;



    }




    /*          ÜBER US ABOUT          */



    #aboutBoth {
        top: 0%;
        bottom: inherit;
        transform: rotate(1deg) scale(0.4) translate(0%, -60%);

    }


    #aboutAlex {
        display: none;
        position: absolute;
        top: inherit;
        bottom: 0%;
        left: 0%;
        right: auto;
        transform: rotate(1deg) scale(0.36) translate(0%, 70%);
    }

    #aboutKaja {
        display: none;
        position: absolute;
        top: inherit;
        bottom: 0% right: 0%;
        transform: rotate(5deg) scale(0.36) translate(0%, 20%);
    }

    .aboutColumn {
        top: 20%;
        overflow: hidden;
    }

    #aboutContent {
        display: none;
        position: absolute;
        top: 22%;
        left: 5%;
        width: 90vw;
        height: 52vh;

        transform: translate(-48%, -00%);
        //background-color: #ff000090;
        overflow: scroll;
        transform: rotate(-2deg);

    }

    .aboutText {
        font-size: 17px;
    }



}




@media only screen and (max-width: 410px) and (max-height: 600px) {


    #videoSpieler {
        display: none;
        position: absolute;
        transform: rotate(-15deg);
        top: auto;
        bottom: 34%;
        left: 5%;
        z-index: 100;
    }

    #videoSpieler>img {
        width: 50%
    }

    #videoTraviata {
        display: none;
        position: absolute;
        transform: rotate(15deg) scale(0.4);
        top: auto;
        bottom: 16%;
        left: 10%;
        z-index: 100;
    }

    .TVContainer {

        margin: 20% auto 10% auto;
    }


    #videoSchuld {
        transform: rotate(40deg) scale(0.82);
        bottom: 10%;
        left: 5%;

    }





    #videoRigoletto {

        top: auto;
        bottom: 24%;
        right: -10%;

    }

    #videoRigoletto>img {
        width: 60%;
    }


    #videoLiebschaften {

        transform: rotate(-30deg) scale(0.5);
        bottom: 2%;
        right: -10%;

    }


    #kontaktGabi {
        top: 5%;
    }

    #kontaktGabi>img {
        width: 80%;
    }




    #prodDracula {
        display: none;
        position: fixed;
        left: auto;
        right: 7%;
        top: 24%;
        transform: translate(-10%, -00%);
        transform: rotate(15deg) scale(0.7);
    }

    #prodDracula2 {
        display: none;
        position: fixed;
        left: auto;
        right: 7%;
        top: 14%;
        transform: translate(-10%, -00%);
        transform: rotate(15deg) scale(0.7);
    }
    #prodRomeo {
        display: none;
        position: fixed;
        left: auto;
        right: 7%;
        top: 14%;
        transform: translate(-10%, -00%);
        transform: rotate(15deg) scale(0.7);
    }
    #prodHoellenangst {
        display: none;
        position: fixed;
        left: auto;
        right: 7%;
        top: 14%;
        transform: translate(-10%, -00%);
        transform: rotate(15deg) scale(0.7);
    }


    #prodAmadeus {
        display: none;
        position: fixed;
        left: auto;
        right: 0%;
        top: 20%;
        transform: translate(-10%, -00%);
        transform: rotate(-3deg) scale(0.7);
    }

    #prodCaesar {
        display: none;
        position: fixed;
        left: auto;
        right: 0%;
        top: 15%;
        transform: translate(-10%, -00%);
        transform: rotate(-15deg) scale(0.5);
    }

    #prodLiebschaften {
        display: none;
        position: fixed;
        left: -5%;
        top: -1%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.6);
    }

    #prodRigoletto {
        display: none;
        position: fixed;
        left: 8%;
        top: 48%;
        transform: rotate(-10deg) scale(0.7);
    }

    #prodWasIhrWollt {
        display: none;
        position: fixed;
        left: 0%;
        bottom: 0%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.6);
    }

    #prodSchuld {
        display: none;
        position: fixed;
        right: 20%;
        top: 29%;
        transform: translate(-10%, -00%);
        transform: rotate(20deg) scale(0.5);
    }

    #prodMass {
        display: none;
        position: fixed;
        right: 10%;
        bottom: -4%;
        transform: translate(-10%, -00%);
        transform: rotate(20deg) scale(0.55);
    }

    #prodSpieler {
        display: none;
        position: fixed;
        left: -10%;
        top: 57%;
        transform: translate(-10%, -00%);
        transform: rotate(-20deg) scale(0.5);
    }

    #prodTraviata {
        display: none;
        position: fixed;
        left: 20%;
        bottom: 21%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.5);
    }

    #prodOedipus {
        display: none;
        position: fixed;
        left: 25%;
        top: 36%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.3);
    }

    #ProduktionenSchuldQuote {
        display: none;
        position: fixed;
        right: 1%;
        bottom: 3%;
        width: 90%;
        transform: rotate(2deg);
        font-size: 0.55em;
    }

    .ProduktionenPress {
        top: 55%;
        transform: translate(-50%, 20%) rotate(10deg) scale(0.6);
    }






    /* ----------------------------     PRODUKTIONEN: RIGOLETTO     ------------------ */
    #ProduktionenRigolettoHead {
        display: none;
        position: fixed;
        left: 15%;
        top: 12%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg);
        z-index: 5;
    }

    /* ------------------------------     PRODUKTIONEN: SPIELER     ------------------ */
    #ProduktionenSpielerHead {
        display: none;
        position: fixed;
        left: 0%;
        top: 5%;
        transform: translate(-10%, -00%);
        transform: rotate(-10deg) scale(0.7);
        z-index: 5;
    }

    /* -------------------------     PRODUKTIONEN: WAS IHR WOLLT     ------------------ */
    #ProduktionenWolltHead {
        display: none;
        position: fixed;
        left: 13%;
        top: 2%;
        transform: translate(-10%, -00%);
        transform: rotate(0deg) scale(0.9);
        z-index: 5;
    }

    /* -------------------------     PRODUKTIONEN: MASS FÜR MASS     ------------------ */
    #ProduktionenMassHead {
        display: none;
        position: fixed;
        left: 13%;
        top: 1%;
        transform: translate(-10%, -00%);
        transform: rotate(3deg) scale(0.8);
        z-index: 5;
    }

    /* ----------------------------     PRODUKTIONEN: TRAVIATA     ------------------ */
    #ProduktionenTraviataHead {
        display: none;
        position: fixed;
        left: 0%;
        top: 10%;
        transform: translate(-10%, -00%);
        transform: rotate(5deg) scale(0.7);
        z-index: 5;
    }


    /* ----------------------------     PRODUKTIONEN: OEDIPUS     ------------------ */
    #ProduktionenOedipusHead {
        display: none;
        position: fixed;
        left: 5%;
        top: 6%;
        transform: translate(-10%, -00%) scale(0.5);
        z-index: 5;
    }

    #ProduktionenLiebschaftenHead {
        transform: rotate(-6deg) scale(0.8);
        top: 6%;

    }

    #ProduktionenSchuldHead {
        transform: rotate(-6deg) scale(0.6);
        top: 6%;
        left: -10%;
        right: auto;

    }

    #aboutBoth {
        top: 0% !important;
        bottom: inherit !important;
        transform: rotate(1deg) scale(0.4) translate(0%, -70%);

    }


    #aboutAlex {
        display: none;
        position: absolute;
        top: auto;
        bottom: 0px;
        left: 0%;
        right: auto;
        transform: rotate(1deg) scale(0.36) translate(0%, 80%);
    }

    #aboutKaja {
        display: none;
        position: absolute;
        top: auto;
        bottom: 0px;
        right: 0%;
        transform: rotate(5deg) scale(0.36) translate(0%, 80%);
    }

    .aboutColumn {
        top: 20%;
        overflow: hidden;
    }

    #aboutContent {
        display: none;
        position: absolute;
        top: 27%;
        left: 5%;
        width: 90vw;
        height: 48vh;

        transform: translate(-48%, -00%);
        overflow: scroll;
        transform: rotate(-2deg);

    }

    .aboutText {
        font-size: 17px;
    }



}