.showFlexMob{
    display:none
}
.aflex{
    width:369px;
}
.flex{
    height:790px;
}
header{
    background: url("../images/show/show.webp") ;
    background-repeat: no-repeat;
    background-size: cover;
}
.animatorsContainer{
    width: 372px;
    height: 365px;
}
.animatorsContainer:hover .questText{
    bottom: 100px;
}
.animatorsContainer:hover .questsBtn{
    opacity: 1;
}
#animatorBravl{
    background: url("../images/show/disco.webp");
    background-size: cover;
}
#animatorBag{
    background: url("../images/show/porolon.webp");
    background-size: cover;
}
#animatorLol{
    background: url("../images/show/bubble.webp");
    background-size: cover;
}
#animatorPony{
    background: url("../images/show/neon.webp");
    background-size: cover;
}
#animatorPeppa{
    background: url("../images/show/ball.webp");
    background-size: cover;
}
#animatorOptimus{
    background: url("../images/show/tesla.webp");
    background-size: cover;
}
#animatorTrolls{
    background: url("../images/show/krio.webp");
    background-size: cover;
}
#animatorFairy{
    background: url("../images/show/site.webp");
    background-size: cover;
}
@media screen and (max-width: 1625px) {
    header {
        background: url("../images/show/show.webp");
        background-repeat: no-repeat;
        height: 850px;
        background-size: cover;
        background-position-x: -50px;
    }
}


@media screen and (max-width: 1560px) {
    .flex{
        height: 1400px;
    }
}
@media screen and (max-width: 1295px) {
    header {
        background: url("../images/show/show.webp");
        background-repeat: no-repeat;
        height: 1000px;
        background-size: cover;
        background-position-x: -100px;
    }
}
@media screen and (max-width: 1170px) {
    .flex{
        height: 1600px;
    }
}
@media screen and (max-width: 1015px) {
    header {
        background: url("../images/show/show.webp");
        background-repeat: no-repeat;
        height: 1000px;
        background-size: cover;
        background-position-x: -150px;
    }
}
@media screen and (max-width: 896px) {
    header {
        background: url("../images/show/Frame 50 (3).webp");
        background-repeat: no-repeat;
        height: 1000px;
        background-size: cover;
        background-position-y: -400px;
    }
}

@media screen and (max-width: 770px) {
    header {
        background: url("../images/show/Frame 50 (3).webp");
        height: 900px;
        background-size: cover;
        background-position-y: -300px;
    }
    #quests .questsFlex img {
        width: 171px;
    }
    .animatorsContainer{
        width: 191px;
        height: 188px;
    }
    .flex{
        display: none;
    }
    .flex{
        height: 900px;
    }
    .aflex {
        width: 40%;
    }
    .aflex div{
        border-radius:30%;
    }
    .showFlexMob{
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 425px;
        width:95%;
    }
    .showperspectiveMob{
        width:50%;
        height:100%;
        position:relative;
    }
    .showperspectiveMob img{
        width:98%;
        margin-left:2%;
    }
    .questTextMob{
        position: absolute;
        width: 80%;
        left: 10%;
        bottom: 8%;
        text-align: center;
        transition: 1s;
    }
    .questTextMob span {
        font-family: 'Balsamiq Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .lolQuestBtnMob{
        top:65%;
        left:15%;
        width:70%;
        opacity:0;
        position:absolute;
        height:20%;
    }
    .showperspectiveMob:hover .lolQuestBtnMob {
        opacity: 1;
    }
    .showperspectiveMob:hover .questTextMob {
        bottom: 40%;
    }
}
@media screen and (max-width: 700px) {
    header {
        background-position-y: -200px;
    }
}
@media screen and (max-width: 640px) {
    header {
        background-position-y: -100px;
    }
}
@media screen and (max-width: 580px) {
    header {
        background-position-y: 0;
    }
}
@media screen and (max-width: 520px) {
    header {
        height: 815px;
    }
}

@media screen and (max-width: 425px) {
header {
    height: 712px;

}
#quests .questsFlex img {
    width: 94%;
}


.horizontal{
    width:320px;
    margin:0;
}
#mainDialog{
    font-size: 30px;
    line-height: 34px;
}
.underTitle{
    font-size: 15px;
    line-height: 18px;
}
#mainBtn{
    top:410px;
}
.animatorsContainer{
    width: 142px;
    height: 146px;
}

}
@media screen and (max-width: 380px) {
    header{
        height: 600px;
    }
    #mainBtn {
        top: 526px
    }

}