
@media screen and (max-width: 770px) {
    header{
        height:900px;
        background: url("../images/animators_mob/Frame 87 (2).webp");
        background-size: cover;
        background-position-y: -300px;
    }
    #mainDialog{
        margin-top:10px;
        font-size:27px;
        line-height: 27px;
    }
    .underTitle .visiblefirst{
        display:none;
    }
    #mainBtn {
        top:420px;
    }

    .navigation{
        display:none;
    }
    .flex{
        max-width: 520px;
    }
    .aflex{
        width: auto;
    }
    .aflex img{
        width: 100%;
    }
    .animatorsContainer{
        width: 181px;
        height: 186px;
    }
    .animatorsBackground {
        position: relative;
        width: 181px;
        height: 186px;
    }
    .animatorsCharacter {
        display:none;
    }
    #animatorBravl{
        background: url("../images/animators_mob/bravl.webp");
        background-size: cover;
     }
    #animatorBag{
        background: url("../images/animators_mob/bug.webp");
        background-size: cover;
    }
    #animatorLol{
        background: url("../images/animators_mob/lol.webp");
        background-size: cover;
    }
    #animatorPony{
        background: url("../images/animators_mob/pony.webp");
        background-size: cover;
    }
    #animatorPeppa{
        background: url("../images/animators_mob/peppa.webp");
        background-size: cover;
    }
    #animatorOptimus{
        background: url("../images/animators_mob/optimus.webp");
        background-size: cover;
    }
    #animatorTrolls{
        background: url("../images/animators_mob/trolls.webp");
        background-size: cover;
    }
    #animatorFairy{
        background: url("../images/animators_mob/fairy.webp");
        background-size: cover;
    }
    #animatorSpider{
        background: url("../images/animators_mob/spider.webp");
        background-size: cover;
    }
    #animatorCold{
        background: url("../images/animators_mob/cold.webp");
        background-size: cover;
    }
    #animatorPatrol{
        background: url("../images/animators_mob/patrol.webp");
        background-size: cover;
    }
    #animatorMickey{
        background: url("../images/animators_mob/mickey.webp");
        background-size: cover;
    }
    #animatorTurtles{
        background: url("../images/animators_mob/turtles.webp");
        background-size: cover;
    }
    #animatorMasks{
        background: url("../images/animators_mob/masks.webp");
        background-size: cover;
    }
    #animatorBunny {
        background: url("../images/animators_mob/bunnybgMob.webp");
        background-size: cover;
        }
    #animatorHugiWagi {
        background: url("../images/animators_mob/hugiwagiMob.webp");
        background-size: cover;
    }
    #animatorCats {
        background: url("../images/animators_mob/catsMob.webp");
        background-size: cover;
    }
    #animatorPrincess {
        background: url("../images/animators_mob/princessMob.webp");
        background-size: cover;
    }




    /*-------------------------animation program*/
    .animatorsBtn{
        bottom: 20px;
    }
    .animatorsText{
        left: 25px;
        top: 22px;
    }
    .animatorsText span{
        font-size: 20px;
        line-height: 24px;
    }
    .bals40{
        font-size: 23px;
        line-height: 28px;
    }
    .bals58{
        font-size: 33px;
        line-height: 59px;
    }
    .animationProgram span{
        font-size: 16px;
        line-height: 20px;
    }
    .horizontal img{
        width: 56px;
    }
    .animationProgram{
        flex-direction: column;
    }
    .program1{
        width: 100%;
    }

    .horizontal{
        width: 100%;
        justify-content: start;

    }

    /*-------------quests*/

    .questsFlex{
        max-width: 400px;
    }
    .questText{
        bottom: 10px;
    }
    .questText span{
        font-size: 20px;
        line-height: 24px;
    }

    .questsBtn{
        left: 22px;
    }

    #quests .questsFlex>div {
         width: 181px;
         height: 283px;
        border-radius: 50px;
    }
    #quests .questsFlex img {
        width: 100%;
    }


    /*----------------help */
    .helpFlex{
        flex-direction: column;
    }
    .helpFlex h5 {
        font-size: 16px;
        line-height: 20px;
    }
    #helpImgSinka{
        width: 100%;
        height: 500px;
        background: url("../images/animators_mob/sinka_mob.webp");
        background-size: cover;
    }
    .formFlex {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }
    .hideInMobile{
        display: none;
    }
    .FlexHorizontal{
        flex-direction: column;
        align-items: center;
    }

    .FlexHorizontal div {
        margin-right: 0;
    }


    .application {
         padding-left: 0;
    }
    .formFlex h5 {

        margin-block-end: 4%;
        width: 100%;
        text-align: center;
    }

    .formFlex .FlexHorizontal{
        margin-bottom: 0;
        margin-top: -35px;
    }

    #form{
        width: 100%;
        justify-content: center;
    }
    #telephone2 {
        width: 86%;
        height: 76px;
        margin: 0;
        left: 0;
        right: 0;
    }

    #sendbtn10{
        border: 0;
        margin-top: 5px;
        right: 4.5%;
        width: 73px;
        height: 70px;
        background: url(../images/animators_mob/helpBtn.webp);
        background-position: center -20px;
        content: "";
        padding: 0;
    }

    .flexContacts{
        justify-content: space-between;
    }

    #helpToChoose{
        min-height: 861px;
    }

    .wavesChoseContainer {
        height: 312px;
    }
    .wavesBotMiddle {
        right: -230px;
    }

}
@media screen and (max-width: 687px) {
    header{
        height:800px;
        background-position-y: -158px;
    }
}
@media screen and (max-width: 660px) {
    header{
        height:770px;
        background-position-y: -158px;
    }
}
@media screen and (max-width: 600px) {
    header{
        height: 725px;
        /*background-position-y: -10%;*/
    }
}

