.flex-container {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    height: 76vh;
}

.back-button-transforms{
    transform:
            scale(55%)
            rotate(180deg)
            translateX(2px);
    -webkit-transform:
            scale(55%)
            rotate(180deg)
            translateX(2px);
}

.continue-button-transforms{
    transform:
            scale(55%)
            translateX(4px);
    -webkit-transform:
            scale(55%)
            translateX(4px);
}

.slide-button-container {
    z-index: 2;
}

.slide-button {
    position: absolute;
    bottom: 55%;
    left: 0;
    height: 6vh;
    width: 6vh;
    margin: 1vh;
}

.slide-button-right {
    left: unset;
    right: 0;
}

.button-disable{
    display: none !important;
}

.speak-container {
    will-change: filter;
    filter: drop-shadow(-2px 4px 5px rgba(0, 0, 0, 0.17));
}

.sprechblase-container {
    will-change: filter;
    display: none;
}

.sprechblase-text {
    background-color: var(--ausbildung_lightgreen);
    width: 100%;
    height: auto;
    padding: 3%;
}

.sprechblase-speaker {
    background-color: var(--ausbildung_lightgreen);
    width: 100%;
    height: 5vh;
    margin-bottom: 2vh;
    margin-top: -2px;
}

.speaker-laura {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 24% 25%, 19% 100%, 15% 25%, 0 10%);
}

.speaker-laura2 {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 44% 25%, 39% 100%, 35% 25%, 0 10%);
}

.speaker-tom {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 76% 25%, 71% 100%, 65% 25%, 0 10%);
}

.speaker-hans {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 39% 25%, 34% 100%, 29% 25%, 0 10%);
}

.speaker-ferida {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 92% 25%, 87% 100%, 82% 25%, 0 10%);
}

.speaker-donghae {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 60% 25%, 55% 100%, 50% 25%, 0 10%);
}

.speaker-drohne {
    margin-bottom: 20%;
    clip-path: polygon(0 0, 100% 0, 100% 10%, 87% 25%, 82% 100%, 77% 25%, 0 10%);
}

.action-text-container {
    will-change: filter;
    display: none;
}

.action-text {
    background-color: white;
    width: 100%;
    height: auto;
    padding: 3%;
    margin-bottom: 8vh;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

.sprechblase-show {
    will-change: filter;
    display: initial;
}

.kinder-container {
    display: none;
    width: 50vh;
    max-width: min(828px, 95vw);
}

.kinder-show {
    display: initial;
}

.drohne {
    display: none;
}

/*above bubble*/
.drohne-pos1 {
    margin: 5vh;
}

/*under bubble left/middle*/
.drohne-pos2 {
    position: absolute;
    bottom: 20%;
    left: 35%;
    z-index: 1;
}

/*under bubble right*/
.drohne-pos3 {
    position: absolute;
    bottom: 20%;
    right: 5%;
    z-index: 1;
}

/*speaking*/
.drohne-pos4 {
    position: absolute;
    top: -20%;
    right: 5%;
    z-index: 1;
}

.drohne-show {
    display: initial;
}

.temp-choiceButton {
    /*text-align: center;*/
    line-height: 5vh;
    font-size: 5vh;
    /*padding-bottom: 1vh;*/
    display: flex;
    align-items: center;
    justify-content: center;

    height: 8vh;
    width: 8vh;
    background-color: var(--task-purple-n);
    border-radius: 50%;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.28));
    margin-right: 5%;
    user-select: none;
    cursor: pointer;
}

.multipleCoice-Button{
    /*filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.28));*/
    /*margin-right: 5%;*/
    /*user-select: none;*/
    /*cursor: pointer;*/
    width: 7vh;
    height: 7vh;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 5% 0 0;
    padding-bottom: 1.2%;
}

.question-container {
    display: none;
    position: absolute;
    top: 20%;
    right: 0;
    height: 80%;
    width: 60%;
}

.question-show{
    display: initial;
}

.question {
    display: flex;
    align-items: center;
    align-content: center;
    height: 9vh;
    /*margin-bottom: 5%;*/
}

.question-text {
    width: 60%;
    margin: 0;
    cursor: pointer;
}

@media only screen and (min-width: 1050px) {
    .slide-button {
        left: -150px;
    }

    .slide-button-right {
        left: unset;
        right: -150px;
    }
}