header{
    background: url("../images/animators/backAnimators.webp");
    background-size: cover;
    background-repeat: no-repeat;
}
.underlined{
    position: relative;
    color: #484848;
    text-decoration: none;
    z-index: 2;
}

.underlined::before {
    content: '';
    left: 0; bottom: -5px;
    width: 0;
    height: 8.5px;
    background-color:#FFBF00 ;
    z-index: -1;
    position: absolute;
}

.underlined:hover:before {
    width: 70px;
    border-radius: 10px;

}

.underlined::before {
    transition: width 0.35s;

}
.navigation{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    /* identical to box height */
    text-align: center;
    color: #FFFFFF;

}
.navigate{
    color: #FFFFFF;
    text-decoration-line: none;
}

/*----------- animators*/
.animatorsBtn{
    position: absolute;
    height: 52px;
    width: 132px;
    border: 2px solid #FFFFFF;
    background:white;
    border-radius: 100px;
    bottom: 54px;
    left: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    z-index:5;
}
.animatorsBtn:hover{
    background: linear-gradient(180deg, #FFEC40 0%, #FC990F 100%);
    border:none;
}
.animatorsBtn span{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height */
    transition: 1s;
    text-align: center;

    color: black;
}
.animatorsBtn span a{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    /* identical to box height */
    transition: 1s;
    text-align: center;
    text-decoration:none;
    color: #000000;
}
.animatorsText{
    position: absolute;
    transition: 1s;
    bottom: 150px;
    left: 25px;
    z-index:5;
}
.animatorsText span{
    font-family: 'Balsamiq Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 31px;
    line-height: 38px;
    /* or 123% */

    text-transform: uppercase;

    color: #FFFFFF;
}
.questText{
    position: absolute;
    width: 100%;
    bottom: 40px;
    text-align: center;
    transition: 1s;
}

.questsFlex>div{
    position: relative;
}
.questText span{
    font-family: 'Balsamiq Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    /* or 158% */

    text-align: center;
    text-transform: uppercase;

    color: #FFFFFF;
}

.questsFlex>div:hover .questText{
    bottom: 100px;
}

.questsBtn{
    bottom: 34px;
    left: 114px;
    opacity: 0;
    transition: 1s;
}

.questsFlex>div:hover .questsBtn{
    opacity: 1;
}



#animatorsQuests{

}
#mainDialogAnimators{
    font-family: 'Balsamiq Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 68px;
    line-height: 74px;
    /* or 109% */

    text-align: center;
    margin-bottom:0.50em;
    color: #FFFFFF;
}
#mainDialogAnimators span{
    font-size: 47px;
}
.aflex{
    margin:10px;
}
.flex{
    margin:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
    max-width:1920px;
}
.flex>.aflex>div{
    position:relative;
}
.animatorsContainer{
    position: relative;
    width: 369px;
    height: 352px;
    transition: 1s;
}
.animatorsBackground{
    position: relative;
    width: 369px;
    height: 352px;
    transition: 1s;
    z-index:-1;
}
.animatorsContainer:hover .animatorsBackground, .animatorsContainer:hover .animatorsCharacter{
    transform: scale(103%);
}

/*.animatorsContainer:hover .animatorsText, .animatorsContainer:hover .animatorsBtn,.animatorsContainer:hover .animatorsBtn span,.animatorsContainer:hover .animatorsText span{*/
/*    transform: scale(97%);*/
/*}*/
.animatorsContainer:hover .animatorsBackground{
    opacity:0.7;
}
#animatorBravl{
    background: url("../images/animators/bravl.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorBag{
    background: url("../images/animators/bug.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}

#animatorLol{
    background: url("../images/animators/lol.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorPony{
    background: url("../images/animators/pony.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorPeppa{
    background: url("../images/animators/peppa.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorOptimus{
    background: url("../images/animators/bambl.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorTrolls{
    background: url("../images/animators/trolls.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorFairy{
    background: url("../images/animators/fairy.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorSpider{
    background: url("../images/animators/spider.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorCold{
    background: url("../images/animators/cold.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorPatrol{
    background: url("../images/animators/patrol.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorMickey{
    background: url("../images/animators/mickey.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorTurtles{
    background: url("../images/animators/turtle.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorMasks{
    background: url("../images/animators/masks.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position:absolute;
}
#animatorBunny {
    background: url("../images/animators/bunnybg.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
}
#animatorHugiWagi {
    background: url("../images/animators/hugiwagibg.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
}
#animatorCats {
    background: url("../images/animators/cats.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
}
#animatorPrincess {
    background: url("../images/animators/princessbg.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
}


.animatorsCharacter{
    transition: 1s;
    position: absolute;
    width:100%;
    height:352px;
}
#masks{
    background: url("../images/animators/masks2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#bravl{
    background: url("../images/animators/bravl2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
    z-index:1;
    position:absolute;
}
#bug{
    background: url("../images/animators/bug2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#cold{
    background: url("../images/animators/cold2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#fairy{
    background: url("../images/animators/fairy2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#lol{
    background: url("../images/animators/lol1.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#mickey{
    background: url("../images/animators/mickey2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#optimus{
    background: url("../images/animators/optimus2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#patrol{
    background: url("../images/animators/patrol2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#peppa{
    background: url("../images/animators/peppa1.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#pony{
    background: url("../images/animators/pony2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#spider{
    background: url("../images/animators/spider2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#trolls{
    background: url("../images/animators/troll2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#turtles{
    background: url("../images/animators/turtle2.webp");
    background-position: bottom;
    background-repeat: no-repeat;
}
#bunny {
    background: url("../images/animators/bunny.webp");
    background-position: right;
    background-repeat: no-repeat;
}
#hugiWagi {
    background: url("../images/animators/hugiwagi.webp");
    background-position: right;
    background-repeat: no-repeat;
}
#cats {
    background: url("../images/animators/catsh.webp");
    background-position: right;
    background-repeat: no-repeat;
}
#princessDisney {
    background: url("../images/animators/princessh.webp");
    background-position: right;
    background-repeat: no-repeat;
}


#mask{
    align-self: end;
}
.animationProgram{
    margin:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
    max-width:1230px;
}
.program1{
    margin:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap:wrap;
    max-width:380.25px;
}

.animationProgram span{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    /* or 140% */
    color: #636061;
    align-self: center;
    margin-left:5%;
}
.horizontal{
    
    display: flex;
    flex-direction: row;
    
}
.bals40{
    font-family: 'Balsamiq Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 74px;
    /* identical to box height, or 185% */
    color: #373435;
}
.bals58{
    font-family: 'Balsamiq Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 58px;
    line-height: 74px;
    /* identical to box height, or 185% */
    color: #373435;
}
.questsFlex{
    margin:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
}
#quests{
    overflow: hidden;
}
#quests .questsFlex div{margin:1%;}


/*----------------help */

#helpToChoose{
    overflow: hidden;
    position: relative;
    min-height: 1100px;


}

.helpFlex{
    margin:auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
}
.helpFlex h5{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    /* or 140% */
    color: #636061;
}
.formFlex{
    max-width:1060px;
    margin-top: 150px;
    margin-left:3%;
}
#helpImgSinka{
    width: 415px;
    height: 607px;
    background: url("../images/animators/Group 250.webp");
}



#sendbtn10{
    position:absolute;


}
#form{
    /*margin-bottom:20%;*/
    display: flex;
    flex-direction: row;
    justify-content: right;
    width:600px;
    position:relative;
}
#telephone2{
    width:600px;
    margin:0;
}
.formFlex h4{
    margin-block-start: 0;
    margin-block-end:0;
}
.formFlex h5{
    margin-block-end:4%;

}
.FlexHorizontal{
    display: flex;
    flex-direction: row;
    position:relative;
}
.FlexHorizontal div{
    margin-right:5%;
}
.FlexHorizontal form{
    margin-top:0;
}
.helpContactBtn{
    width: 176px;
    height: 60px;
}
.inlineBlock{
    display: inline-block;
}
.flexContacts{
    display: flex;
    justify-content: start;

}
#helpContacWh{
    background: url(../images/animators/wh.png);
}
#helpContactTel{
    background: url(../images/animators/tel.png);
}