*{
    margin: 0;
    padding: 0;
}
img{
    position: absolute;
}
.anim{
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
body{
 
    overflow-x: hidden;
    overflow-y: hidden;
}
@media only screen and (max-width: 6000px) {
    .div0{
        width: 100%;
        height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
        height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(1);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
        transform: scale(1);
        animation-name: ramka1;
    }
    #human{
        left: 0px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
        transform: scale(1);
    }


    /* 2 */
    #text11{
        left: 443px;
        top: 14px;
        z-index: 2;
        transform: scale(1);
        animation-name: text11;
    }


    #tiv1{
        left: 649px;
        top: 11px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv1;
    }
    #taniq1{
        left: 1153px;
        top: 7px;
        z-index: 2;
        transform: scale(1);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1338px;
        top: 10px;
        z-index: 3;
        transform: scale(1);
        animation-name: taniq2;
    }
    #taniq3{
        left: 1520px;
        top: 7px;
        z-index: 4;
        transform: scale(1);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 358px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text21;
    }
    #tiv2{
        left: 649px;
        top: 12px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv2;
    }
    #text24{
        left: 1420px;
        top: 36px;
        z-index: 2;
        transform: scale(1);
        animation-name: text24;
    }

    #nkar31{
        left: 1136px;
        top: 1px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar31;
    }
    #nkar32{
        left: 1207px;
        top: -16px;
        z-index: 3;
        transform: scale(1);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 543px;
        top: 18px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 571px;
        top: 24px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 616px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text41;
    }
    #gic41{
        left: 794px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 1097px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 832px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar41;
    }
    #text42{
        left: 922px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text42;
    }


    #text43{
        left: 1209px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text43;
    }

    #heraxos1{
        left: 1142px;
        top: 26px;
        z-index: 2;
        transform: scale(1);
        animation-name: heraxos1;
    }



    

    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 582px;}
        7%{top: 10px;opacity: 1;left: 582px;}
        8%,16.5%{top: 10px; opacity: 1;left: 582px;}
        21%{top: 10px; opacity: 1;left: 792px;}
        22%,45%{top: 10px; opacity: 1;left: 792px;}
        50%{top: 10px; opacity: 1;left: 792px;}
        51%,65%{top: 10px; opacity: 1;left: 792px;}
        70%{top: -50px; opacity: 0;left: 792px;}
        71%,100%{top: -50px; opacity: 0;left: 792px;}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: -13px; opacity: 0;}
        28%{top: 7px; opacity: 1;}
        29%,45%{top: 7px; opacity: 1;}
        50%{top: 7px; opacity: 0;}
        51%,100%{top: 7px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -10px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -13px; opacity: 0;}
        34%{top:7px; opacity: 1;}
        35%,45%{top:7px; opacity: 1;}
        50%{top:7px; opacity: 0;}
        51%,100%{top:7px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 136px;}
        50%{top: 36px;}
        51%,65%{top: 36px;}
        70%{top: 136px;}
        71%,100%{top: 136px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1.3);}
        58%{opacity: 1; transform: scale(1);}
        59%,65%{opacity: 1; transform: scale(1);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 852px;opacity: 0;}
        77%{left: 832px; opacity: 1;}
        78%,100%{left: 832px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}


@media only screen and (max-width: 1700px) {
    .div0{
        width: 100%;
         height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(1);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
        transform: scale(1);
        animation-name: ramka1;
    }
    #human{
        left: 0px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
        transform: scale(1);
    }


    /* 2 */
    #text11{
        left: 243px;
        top: 14px;
        z-index: 2;
        transform: scale(1);
        animation-name: text11;
    }


    #tiv1{
        left: 449px;
        top: 11px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv1;
    }
    #taniq1{
        left: 953px;
        top: 7px;
        z-index: 2;
        transform: scale(1);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1138px;
        top: 10px;
        z-index: 3;
        transform: scale(1);
        animation-name: taniq2;
    }
    #taniq3{
        left: 1320px;
        top: 7px;
        z-index: 4;
        transform: scale(1);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 358px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text21;
    }
    #tiv2{
        left: 640px;
        top: 12px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv2;
    }
    #text24{
        left: 1420px;
        top: 36px;
        z-index: 2;
        transform: scale(1);
        animation-name: text24;
    }

    #nkar31{
        left: 1136px;
        top: 1px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar31;
    }
    #nkar32{
        left: 1207px;
        top: -16px;
        z-index: 3;
        transform: scale(1);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 543px;
        top: 18px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 571px;
        top: 24px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 616px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text41;
    }
    #gic41{
        left: 794px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 1097px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 832px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar41;
    }
    #text42{
        left: 922px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text42;
    }


    #text43{
        left: 1209px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text43;
    }

    #heraxos1{
        left: 1142px;
        top: 26px;
        z-index: 2;
        transform: scale(1);
        animation-name: heraxos1;
    }


    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 582px;}
        7%{top: 10px;opacity: 1;left: 582px;}
        8%,16.5%{top: 10px; opacity: 1;left: 582px;}
        21%{top: 10px; opacity: 1;left: 592px;}
        22%,45%{top: 10px; opacity: 1;left: 592px;}
        50%{top: 10px; opacity: 1;left: 792px;}
        51%,65%{top: 10px; opacity: 1;left: 792px;}
        70%{top: -50px; opacity: 0;left: 792px;}
        71%,100%{top: -50px; opacity: 0;left: 792px;}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: -13px; opacity: 0;}
        28%{top: 7px; opacity: 1;}
        29%,45%{top: 7px; opacity: 1;}
        50%{top: 7px; opacity: 0;}
        51%,100%{top: 7px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -10px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -13px; opacity: 0;}
        34%{top:7px; opacity: 1;}
        35%,45%{top:7px; opacity: 1;}
        50%{top:7px; opacity: 0;}
        51%,100%{top:7px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 136px;}
        50%{top: 36px;}
        51%,65%{top: 36px;}
        70%{top: 136px;}
        71%,100%{top: 136px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1.3);}
        58%{opacity: 1; transform: scale(1);}
        59%,65%{opacity: 1; transform: scale(1);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 852px;opacity: 0;}
        77%{left: 832px; opacity: 1;}
        78%,100%{left: 832px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}

@media only screen and (max-width: 1610px) {
    .div0{
        width: 100%;
       height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(1);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
        transform: scale(1);
        animation-name: ramka1;
    }
    #human{
        left: 0px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
        transform: scale(1);
    }


    /* 2 */
    #text11{
        left: 243px;
        top: 14px;
        z-index: 2;
        transform: scale(1);
        animation-name: text11;
    }


    #tiv1{
        left: 449px;
        top: 11px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv1;
    }
    #taniq1{
        left: 953px;
        top: 7px;
        z-index: 2;
        transform: scale(1);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1138px;
        top: 10px;
        z-index: 3;
        transform: scale(1);
        animation-name: taniq2;
    }
    #taniq3{
        left: 1320px;
        top: 7px;
        z-index: 4;
        transform: scale(1);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 358px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text21;
    }
    #tiv2{
        left: 640px;
        top: 12px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv2;
    }
    #text24{
        left: 855px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 1136px;
        top: 1px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar31;
    }
    #nkar32{
        left: 1207px;
        top: -16px;
        z-index: 3;
        transform: scale(1);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 343px;
        top: 18px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 371px;
        top: 24px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 416px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text41;
    }
    #gic41{
        left: 594px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 897px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 632px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar41;
    }
    #text42{
        left: 722px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text42;
    }


    #text43{
        left: 1009px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text43;
    }

    #heraxos1{
        left: 942px;
        top: 26px;
        z-index: 2;
        transform: scale(1);
        animation-name: heraxos1;
    }


    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 582px; transform: scale(1);}
        7%{top: 10px;opacity: 1;left: 582px;transform: scale(1);}
        8%,16.5%{top: 10px; opacity: 1;left: 582px;transform: scale(1);}
        21%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        22%,45%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        50%{top: 0px; opacity: 1;left: 792px;transform: scale(0.9);}
        51%,65%{top: 0px; opacity: 1;left: 792px;transform: scale(0.9);}
        70%{top: -50px; opacity: 0;left: 792px;transform: scale(0.9);}
        71%,100%{top: -50px; opacity: 0;left: 792px;transform: scale(0.9);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: -13px; opacity: 0;}
        28%{top: 7px; opacity: 1;}
        29%,45%{top: 7px; opacity: 1;}
        50%{top: 7px; opacity: 0;}
        51%,100%{top: 7px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -10px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -13px; opacity: 0;}
        34%{top:7px; opacity: 1;}
        35%,45%{top:7px; opacity: 1;}
        50%{top:7px; opacity: 0;}
        51%,100%{top:7px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 73px;}
        51%,65%{top: 73px;}
        70%{top: 173px;}
        71%,100%{top: 173px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1.3);}
        58%{opacity: 1; transform: scale(1);}
        59%,65%{opacity: 1; transform: scale(1);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 652px;opacity: 0;}
        77%{left: 632px; opacity: 1;}
        78%,100%{left: 632px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}


@media only screen and (max-width: 1480px) {
    .div0{
        width: 100%;
    height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(1);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
        transform: scale(1);
        animation-name: ramka1;
    }
    #human{
        left: 0px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
        transform: scale(1);
    }


    /* 2 */
    #text11{
        left: 243px;
        top: 14px;
        z-index: 2;
        transform: scale(1);
        animation-name: text11;
    }


    #tiv1{
        left: 449px;
        top: 11px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv1;
    }
    #taniq1{
        left: 953px;
        top: 7px;
        z-index: 2;
        transform: scale(1);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1138px;
        top: 10px;
        z-index: 3;
        transform: scale(1);
        animation-name: taniq2;
    }
    #taniq3{
        left: 1045px;
        top: 7px;
        z-index: 4;
        transform: scale(1);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 358px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text21;
    }
    #tiv2{
        left: 640px;
        top: 12px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv2;
    }
    #text24{
        left: 855px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 1136px;
        top: 1px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar31;
    }
    #nkar32{
        left: 1207px;
        top: -16px;
        z-index: 3;
        transform: scale(1);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 343px;
        top: 18px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 371px;
        top: 24px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 416px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text41;
    }
    #gic41{
        left: 594px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 897px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 632px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar41;
    }
    #text42{
        left: 722px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text42;
    }


    #text43{
        left: 1009px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text43;
    }

    #heraxos1{
        left: 942px;
        top: 26px;
        z-index: 2;
        transform: scale(1);
        animation-name: heraxos1;
    }



    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 582px; transform: scale(1);}
        7%{top: 10px;opacity: 1;left: 582px;transform: scale(1);}
        8%,16.5%{top: 10px; opacity: 1;left: 582px;transform: scale(1);}
        21%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        22%,45%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        50%{top: 0px; opacity: 1;left: 792px;transform: scale(0.9);}
        51%,65%{top: 0px; opacity: 1;left: 792px;transform: scale(0.9);}
        70%{top: -50px; opacity: 0;left: 792px;transform: scale(0.9);}
        71%,100%{top: -50px; opacity: 0;left: 792px;transform: scale(0.9);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: -13px; opacity: 0;}
        28%{top: 7px; opacity: 1;}
        29%,45%{top: 7px; opacity: 1;}
        50%{top: 7px; opacity: 0;}
        51%,100%{top: 7px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -10px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -43px; opacity: 0;}
        34%{top:-23px; opacity: 1;}
        35%,45%{top:-23px; opacity: 1;}
        50%{top:-23px; opacity: 0;}
        51%,100%{top:-23px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 73px;}
        51%,65%{top: 73px;}
        70%{top: 173px;}
        71%,100%{top: 173px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1.3);}
        58%{opacity: 1; transform: scale(1);}
        59%,65%{opacity: 1; transform: scale(1);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 652px;opacity: 0;}
        77%{left: 632px; opacity: 1;}
        78%,100%{left: 632px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}


@media only screen and (max-width: 1400px) {
    .div0{
        width: 100%;
       height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
     height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(1);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
        transform: scale(1);
        animation-name: ramka1;
    }
    #human{
        left: 0px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
        transform: scale(1);
    }


    /* 2 */
    #text11{
        left: 243px;
        top: 14px;
        z-index: 2;
        transform: scale(1);
        animation-name: text11;
    }


    #tiv1{
        left: 449px;
        top: 11px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv1;
    }
    #taniq1{
        left: 953px;
        top: 7px;
        z-index: 2;
        transform: scale(1);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1138px;
        top: 10px;
        z-index: 3;
        transform: scale(1);
        animation-name: taniq2;
    }
    #taniq3{
        left: 1045px;
        top: 7px;
        z-index: 4;
        transform: scale(1);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 258px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text21;
    }
    #tiv2{
        left: 540px;
        top: 12px;
        z-index: 3;
        transform: scale(1);
        animation-name: tiv2;
    }
    #text24{
        left: 755px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 1036px;
        top: 1px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar31;
    }
    #nkar32{
        left: 1107px;
        top: -16px;
        z-index: 3;
        transform: scale(1);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 343px;
        top: 18px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 371px;
        top: 24px;
        z-index: 2;
        transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 416px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text41;
    }
    #gic41{
        left: 594px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 897px;
        top: 0px;
        z-index: 2;
        transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 632px;
        top: 20px;
        z-index: 2;
        transform: scale(1);
        animation-name: nkar41;
    }
    #text42{
        left: 722px;
        top: 21px;
        z-index: 2;
        transform: scale(1);
        animation-name: text42;
    }


    #text43{
        left: 1009px;
        top: 23px;
        z-index: 2;
        transform: scale(1);
        animation-name: text43;
    }

    #heraxos1{
        left: 942px;
        top: 26px;
        z-index: 2;
        transform: scale(1);
        animation-name: heraxos1;
    }




    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 582px; transform: scale(1);}
        7%{top: 10px;opacity: 1;left: 582px;transform: scale(1);}
        8%,16.5%{top: 10px; opacity: 1;left: 582px;transform: scale(1);}
        21%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        22%,45%{top: 10px; opacity: 1;left: 592px;transform: scale(1);}
        50%{top: 0px; opacity: 1;left: 692px;transform: scale(0.9);}
        51%,65%{top: 0px; opacity: 1;left: 692px;transform: scale(0.9);}
        70%{top: -50px; opacity: 0;left: 692px;transform: scale(0.9);}
        71%,100%{top: -50px; opacity: 0;left: 692px;transform: scale(0.9);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: -13px; opacity: 0;}
        28%{top: 7px; opacity: 1;}
        29%,45%{top: 7px; opacity: 1;}
        50%{top: 7px; opacity: 0;}
        51%,100%{top: 7px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -10px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -43px; opacity: 0;}
        34%{top:-23px; opacity: 1;}
        35%,45%{top:-23px; opacity: 1;}
        50%{top:-23px; opacity: 0;}
        51%,100%{top:-23px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 73px;}
        51%,65%{top: 73px;}
        70%{top: 173px;}
        71%,100%{top: 173px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1.3);}
        58%{opacity: 1; transform: scale(1);}
        59%,65%{opacity: 1; transform: scale(1);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 652px;opacity: 0;}
        77%{left: 632px; opacity: 1;}
        78%,100%{left: 632px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}


@media only screen and (max-width: 1300px) {
    .div0{
        width: 100%;
   height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.9);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -200px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -31px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 213px;
        top: 14px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text11;
    }


    #tiv1{
        left: 390px;
        top: 11px;
        z-index: 3;
       transform: scale(0.8);
        animation-name: tiv1;
    }
    #taniq1{
        left: 833px;
        top: 7px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: taniq1;
    }
    #taniq2{
        left: 1018px;
        top: 10px;
        z-index: 3;
       transform: scale(0.8);
        animation-name: taniq2;
    }
    #taniq3{
        left: 925px;
        top: 7px;
        z-index: 4;
       transform: scale(0.8);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 210px;
        top: 21px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text21;
    }
    #tiv2{
        left: 440px;
        top: 12px;
        z-index: 3;
       transform: scale(0.8);
        animation-name: tiv2;
    }
    #text24{
        left: 625px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 856px;
        top: 1px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: nkar31;
    }
    #nkar32{
        left: 927px;
        top: -16px;
        z-index: 3;
       transform: scale(0.8);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 243px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 271px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 316px;
        top: 23px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text41;
    }
    #gic41{
        left: 494px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 797px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 532px;
        top: 20px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: nkar41;
    }
    #text42{
        left: 622px;
        top: 21px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text42;
    }


    #text43{
        left: 909px;
        top: 23px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text43;
    }

    #heraxos1{
        left: 842px;
        top: 26px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: 2px;opacity: 0;}
        5%{left: 28px;opacity: 1}
        6%,100%{left: 28px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 382px; transform: scale(1);}
        7%{top: 10px;opacity: 1;left: 382px;transform: scale(1);}
        8%,16.5%{top: 10px; opacity: 1;left: 382px;transform: scale(1);}
        21%{top: 10px; opacity: 1;left: 492px;transform: scale(0.9);}
        22%,45%{top: 10px; opacity: 1;left: 492px;transform: scale(0.9);}
        50%{top: 0px; opacity: 1;left: 562px;transform: scale(0.9);}
        51%,65%{top: 0px; opacity: 1;left: 562px;transform: scale(0.9);}
        70%{top: -50px; opacity: 0;left: 562px;transform: scale(0.9);}
        71%,100%{top: -50px; opacity: 0;left: 562px;transform: scale(0.9);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 0px; opacity: 0;}
        28%{top: 20px; opacity: 1;}
        29%,45%{top: 20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -3px; opacity: 0;}
        31%{top:20px; opacity: 1;}
        32%,45%{top:20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-8px; opacity: 1;}
        35%,45%{top:-8px; opacity: 1;}
        50%{top:-8px; opacity: 0;}
        51%,100%{top:-8px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 73px;}
        51%,65%{top: 73px;}
        70%{top: 173px;}
        71%,100%{top: 173px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.8);}
        59%,65%{opacity: 1; transform: scale(0.8);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 552px;opacity: 0;}
        77%{left: 532px; opacity: 1;}
        78%,100%{left: 532px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(1);}
        82%{opacity: 1;transform: scale(1);}
        86%{opacity: 1;transform: scale(1.1);}
        90%{opacity: 1;transform: scale(1);}
        94%{opacity: 1;transform: scale(1.1);}
        98%{opacity: 1;transform: scale(1);}
        100%{opacity: 1;transform: scale(1.05);}
    }
}


@media only screen and (max-width: 1155px) {
    .div0{
        width: 100%;
        height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.8);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -300px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -81px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 163px;
        top: 14px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text11;
    }


    #tiv1{
        left: 320px;
        top: 11px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: tiv1;
    }
    #taniq1{
        left: 650px;
        top: 7px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: taniq1;
    }
    #taniq2{
        left: 780px;
        top: 10px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: taniq2;
    }
    #taniq3{
        left: 715px;
        top: 7px;
        z-index: 4;
       transform: scale(0.7);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 155px;
        top: 21px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text21;
    }
    #tiv2{
        left: 365px;
        top: 12px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: tiv2;
    }
    #text24{
        left: 510px;
        top: 36px;
        z-index: 2;
        transform: scale(0.7);
        animation-name: text24;
    }

    #nkar31{
        left: 686px;
        top: 1px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: nkar31;
    }
    #nkar32{
        left: 757px;
        top: -16px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 193px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 221px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 266px;
        top: 23px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text41;
    }
    #gic41{
        left: 444px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 660px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: nkar41;
    }
    #text42{
        left: 520px;
        top: 21px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text42;
    }


    #text43{
        left: 745px;
        top: 23px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text43;
    }

    #heraxos1{
        left: 690px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -15px;opacity: 0;}
        5%{left: 5px;opacity: 1}
        6%,100%{left: 5px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 282px; transform: scale(1);}
        7%{top: 10px;opacity: 1;left: 282px;transform: scale(1);}
        8%,16.5%{top: 10px; opacity: 1;left: 282px;transform: scale(1);}
        21%{top: 10px; opacity: 1;left: 372px;transform: scale(0.7);}
        22%,45%{top: 10px; opacity: 1;left: 372px;transform: scale(0.7);}
        50%{top: 0px; opacity: 1;left: 450px;transform: scale(0.7);}
        51%,65%{top: 0px; opacity: 1;left: 450px;transform: scale(0.7);}
        70%{top: -50px; opacity: 0;left: 450px;transform: scale(0.7);}
        71%,100%{top: -50px; opacity: 0;left: 450px;transform: scale(0.7);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 0px; opacity: 0;}
        28%{top: 20px; opacity: 1;}
        29%,45%{top: 20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -3px; opacity: 0;}
        31%{top:20px; opacity: 1;}
        32%,45%{top:20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-8px; opacity: 1;}
        35%,45%{top:-8px; opacity: 1;}
        50%{top:-8px; opacity: 0;}
        51%,100%{top:-8px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.8);}
        59%,65%{opacity: 1; transform: scale(0.8);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 482px;opacity: 0;}
        77%{left: 462px; opacity: 1;}
        78%,100%{left: 462px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.8);}
        82%{opacity: 1;transform: scale(0.8);}
        86%{opacity: 1;transform: scale(0.9);}
        90%{opacity: 1;transform: scale(0.8);}
        94%{opacity: 1;transform: scale(0.9);}
        98%{opacity: 1;transform: scale(0.8);}
        100%{opacity: 1;transform: scale(0.84);}
    }
}

@media only screen and (max-width: 980px) {
    .div0{
        width: 100%;
      height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.8);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -400px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -81px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 163px;
        top: 14px;
        z-index: 2;
       transform: scale(0.8);
        animation-name: text11;
    }


    #tiv1{
        left: 320px;
        top: 11px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: tiv1;
    }
    #taniq1{
        left: 650px;
        top: 7px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: taniq1;
    }
    #taniq2{
        left: 780px;
        top: 10px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: taniq2;
    }
    #taniq3{
        left: 715px;
        top: 7px;
        z-index: 4;
       transform: scale(0.7);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 155px;
        top: 21px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text21;
    }
    #tiv2{
        left: 365px;
        top: 12px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: tiv2;
    }
    #text24{
        left: 510px;
        top: 36px;
        z-index: 2;
        transform: scale(0.7);
        animation-name: text24;
    }

    #nkar31{
        left: 686px;
        top: 1px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: nkar31;
    }
    #nkar32{
        left: 757px;
        top: -16px;
        z-index: 3;
       transform: scale(0.7);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 193px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 221px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 266px;
        top: 23px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text41;
    }
    #gic41{
        left: 444px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 660px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: nkar41;
    }
    #text42{
        left: 520px;
        top: 21px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text42;
    }


    #text43{
        left: 745px;
        top: 23px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: text43;
    }

    #heraxos1{
        left: 690px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -15px;opacity: 0;}
        5%{left: 5px;opacity: 1}
        6%,100%{left: 5px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 182px; transform: scale(0.9);}
        7%{top: 10px;opacity: 1;left: 182px;transform: scale(0.9);}
        8%,16.5%{top: 10px; opacity: 1;left: 182px;transform: scale(0.9);}
        21%{top: 10px; opacity: 1;left: 372px;transform: scale(0.7);}
        22%,45%{top: 10px; opacity: 1;left: 372px;transform: scale(0.7);}
        50%{top: 0px; opacity: 1;left: 450px;transform: scale(0.7);}
        51%,65%{top: 0px; opacity: 1;left: 450px;transform: scale(0.7);}
        70%{top: -50px; opacity: 0;left: 450px;transform: scale(0.7);}
        71%,100%{top: -50px; opacity: 0;left: 450px;transform: scale(0.7);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 0px; opacity: 0;}
        28%{top: 20px; opacity: 1;}
        29%,45%{top: 20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -3px; opacity: 0;}
        31%{top:20px; opacity: 1;}
        32%,45%{top:20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-8px; opacity: 1;}
        35%,45%{top:-8px; opacity: 1;}
        50%{top:-8px; opacity: 0;}
        51%,100%{top:-8px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 6px; opacity: 1;}
        56%,65%{top: 6px; opacity: 1;}
        70%{top: 6px; opacity: 0;}
        71%,100%{top: 6px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.8);}
        59%,65%{opacity: 1; transform: scale(0.8);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 482px;opacity: 0;}
        77%{left: 462px; opacity: 1;}
        78%,100%{left: 462px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.8);}
        82%{opacity: 1;transform: scale(0.8);}
        86%{opacity: 1;transform: scale(0.9);}
        90%{opacity: 1;transform: scale(0.8);}
        94%{opacity: 1;transform: scale(0.9);}
        98%{opacity: 1;transform: scale(0.8);}
        100%{opacity: 1;transform: scale(0.84);}
    }
}


@media only screen and (max-width: 910px) {
    .div0{
        width: 100%;
        height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
  height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.8);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -400px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -81px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 145px;
        top: 14px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text11;
    }


    #tiv1{
        left: 272px;
        top: 11px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv1;
    }
    #taniq1{
        left: 540px;
        top: 7px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: taniq1;
    }
    #taniq2{
        left: 660px;
        top: 10px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: taniq2;
    }
    #taniq3{
        left: 595px;
        top: 7px;
        z-index: 4;
       transform: scale(0.55);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 125px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text21;
    }
    #tiv2{
        left: 300px;
        top: 12px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv2;
    }
    #text24{
        left: 405px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 560px;
        top: 1px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: nkar31;
    }
    #nkar32{
        left: 600px;
        top: -20px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 193px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 221px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 266px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text41;
    }
    #gic41{
        left: 380px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 540px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: nkar41;
    }
    #text42{
        left: 420px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text42;
    }


    #text43{
        left: 590px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text43;
    }

    #heraxos1{
        left: 560px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -15px;opacity: 0;}
        5%{left: 5px;opacity: 1}
        6%,100%{left: 5px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 182px; transform: scale(0.8);}
        7%{top: 10px;opacity: 1;left: 182px;transform: scale(0.8);}
        8%,16.5%{top: 10px; opacity: 1;left: 182px;transform: scale(0.8);}
        21%{top: 10px; opacity: 1;left: 300px;transform: scale(0.6);}
        22%,45%{top: 10px; opacity: 1;left: 300px;transform: scale(0.6);}
        50%{top: 0px; opacity: 1;left: 350px;transform: scale(0.6);}
        51%,65%{top: 0px; opacity: 1;left: 350px;transform: scale(0.6);}
        70%{top: -50px; opacity: 0;left: 350px;transform: scale(0.6);}
        71%,100%{top: -50px; opacity: 0;left: 350px;transform: scale(0.6);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 0px; opacity: 0;}
        28%{top: 20px; opacity: 1;}
        29%,45%{top: 20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -3px; opacity: 0;}
        31%{top:20px; opacity: 1;}
        32%,45%{top:20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-8px; opacity: 1;}
        35%,45%{top:-8px; opacity: 1;}
        50%{top:-8px; opacity: 0;}
        51%,100%{top:-8px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 0px; opacity: 1;}
        56%,65%{top: 0px; opacity: 1;}
        70%{top: 0px; opacity: 0;}
        71%,100%{top: 0px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.8);}
        59%,65%{opacity: 1; transform: scale(0.8);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 400px;opacity: 0;}
        77%{left: 380px; opacity: 1;}
        78%,100%{left: 380px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.8);}
        82%{opacity: 1;transform: scale(0.8);}
        86%{opacity: 1;transform: scale(0.9);}
        90%{opacity: 1;transform: scale(0.8);}
        94%{opacity: 1;transform: scale(0.9);}
        98%{opacity: 1;transform: scale(0.8);}
        100%{opacity: 1;transform: scale(0.84);}
    }
}


@media only screen and (max-width: 850px) {
    .div0{
        width: 100%;
        height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 0px;
        top: 0px;
        z-index: 2;
        opacity: 0;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.8);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: human;
    }
    #elipse{
        left: -81px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 145px;
        top: 14px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text11;
    }


    #tiv1{
        left: 272px;
        top: 11px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv1;
    }
    #taniq1{
        left: 540px;
        top: 7px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: taniq1;
    }
    #taniq2{
        left: 660px;
        top: 10px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: taniq2;
    }
    #taniq3{
        left: 595px;
        top: 7px;
        z-index: 4;
       transform: scale(0.55);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 125px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text21;
    }
    #tiv2{
        left: 300px;
        top: 12px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv2;
    }
    #text24{
        left: 405px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 560px;
        top: 1px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: nkar31;
    }
    #nkar32{
        left: 600px;
        top: -20px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 193px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 221px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 266px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text41;
    }
    #gic41{
        left: 380px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 540px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: nkar41;
    }
    #text42{
        left: 420px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text42;
    }


    #text43{
        left: 590px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text43;
    }

    #heraxos1{
        left: 560px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -15px;opacity: 0;}
        5%{left: 5px;opacity: 1}
        6%,100%{left: 5px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 140px; transform: scale(0.7);}
        7%{top: 10px;opacity: 1;left: 140px;transform: scale(0.7);}
        8%,16.5%{top: 10px; opacity: 1;left: 140px;transform: scale(0.7);}
        21%{top: 10px; opacity: 1;left: 300px;transform: scale(0.6);}
        22%,45%{top: 10px; opacity: 1;left: 300px;transform: scale(0.6);}
        50%{top: 0px; opacity: 1;left: 350px;transform: scale(0.6);}
        51%,65%{top: 0px; opacity: 1;left: 350px;transform: scale(0.6);}
        70%{top: -50px; opacity: 0;left: 350px;transform: scale(0.6);}
        71%,100%{top: -50px; opacity: 0;left: 350px;transform: scale(0.6);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 0px; opacity: 0;}
        28%{top: 20px; opacity: 1;}
        29%,45%{top: 20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -3px; opacity: 0;}
        31%{top:20px; opacity: 1;}
        32%,45%{top:20px; opacity: 1;}
        50%{top: 20px; opacity: 0;}
        51%,100%{top: 20px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-8px; opacity: 1;}
        35%,45%{top:-8px; opacity: 1;}
        50%{top:-8px; opacity: 0;}
        51%,100%{top:-8px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 0px; opacity: 1;}
        56%,65%{top: 0px; opacity: 1;}
        70%{top: 0px; opacity: 0;}
        71%,100%{top: 0px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.8);}
        59%,65%{opacity: 1; transform: scale(0.8);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 400px;opacity: 0;}
        77%{left: 380px; opacity: 1;}
        78%,100%{left: 380px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.8);}
        82%{opacity: 1;transform: scale(0.8);}
        86%{opacity: 1;transform: scale(0.9);}
        90%{opacity: 1;transform: scale(0.8);}
        94%{opacity: 1;transform: scale(0.9);}
        98%{opacity: 1;transform: scale(0.8);}
        100%{opacity: 1;transform: scale(0.84);}
    }
}

@media only screen and (max-width: 775px) {
    .div0{
        width: 100%;
         height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 360px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.6);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -130px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 95px;
        top: 14px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text11;
    }


    #tiv1{
        left: 217px;
        top: 11px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv1;
    }
    #taniq1{
        left: 525px;
        top: 7px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: taniq1;
    }
    #taniq2{
        left: 527px;
        top: 10px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: taniq2;
    }
    #taniq3{
        left: 526px;
        top: 7px;
        z-index: 4;
       transform: scale(0.55);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 75px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text21;
    }
    #tiv2{
        left: 240px;
        top: 12px;
        z-index: 3;
       transform: scale(0.55);
        animation-name: tiv2;
    }
    #text24{
        left: 345px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 470px;
        top: 1px;
        z-index: 2;
       transform: scale(0.5);
        animation-name: nkar31;
    }
    #nkar32{
        left: 500px;
        top: -20px;
        z-index: 3;
       transform: scale(0.5);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 143px;
        top: 18px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam1;
    }

    #jam3{
        left: 171px;
        top: 24px;
        z-index: 2;
       transform: scale(1);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 200px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text41;
    }
    #gic41{
        left: 305px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 455px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: nkar41;
    }
    #text42{
        left: 340px;
        top: 21px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text42;
    }


    #text43{
        left: 500px;
        top: 23px;
        z-index: 2;
       transform: scale(0.55);
        animation-name: text43;
    }

    #heraxos1{
        left: 470px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -35px;opacity: 0;}
        5%{left: -20px;opacity: 1}
        6%,100%{left: -20px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 140px; transform: scale(0.7);}
        7%{top: 10px;opacity: 1;left: 140px;transform: scale(0.7);}
        8%,16.5%{top: 10px; opacity: 1;left: 140px;transform: scale(0.7);}
        21%{top: 10px; opacity: 1;left: 240px;transform: scale(0.6);}
        22%,45%{top: 10px; opacity: 1;left: 240px;transform: scale(0.6);}
        50%{top: 0px; opacity: 1;left: 290px;transform: scale(0.6);}
        51%,65%{top: 0px; opacity: 1;left: 290px;transform: scale(0.6);}
        70%{top: -50px; opacity: 0;left: 290px;transform: scale(0.6);}
        71%,100%{top: -50px; opacity: 0;left: 290px;transform: scale(0.6);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 40px; opacity: 1;}
        29%,45%{top: 40px; opacity: 1;}
        50%{top: 40px; opacity: 0;}
        51%,100%{top: 40px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -4px; opacity: 0;}
        31%{top:16px; opacity: 1;}
        32%,45%{top:16px; opacity: 1;}
        50%{top: 16px; opacity: 0;}
        51%,100%{top: 16px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-10px; opacity: 1;}
        35%,45%{top:-10px; opacity: 1;}
        50%{top:-10px; opacity: 0;}
        51%,100%{top:-10px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 0px; opacity: 1;}
        56%,65%{top: 0px; opacity: 1;}
        70%{top: 0px; opacity: 0;}
        71%,100%{top: 0px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(1);}
        58%{opacity: 1; transform: scale(0.6);}
        59%,65%{opacity: 1; transform: scale(0.6);}
        70%{opacity: 0; transform: scale(0.4);}
        71%,100%{opacity: 0; transform: scale(0.4);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg);}
        70%{opacity: 1;transform: rotate(0deg);}
        100%{opacity: 1; transform: rotate(720deg);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 320px;opacity: 0;}
        77%{left: 300px; opacity: 1;}
        78%,100%{left: 300px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.8);}
        82%{opacity: 1;transform: scale(0.8);}
        86%{opacity: 1;transform: scale(0.9);}
        90%{opacity: 1;transform: scale(0.8);}
        94%{opacity: 1;transform: scale(0.9);}
        98%{opacity: 1;transform: scale(0.8);}
        100%{opacity: 1;transform: scale(0.84);}
    }
}

@media only screen and (max-width: 650px) {
    .div0{
        width: 100%;
         height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 280px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.6);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -130px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 80px;
        top: 14px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text11;
    }


    #tiv1{
        left: 190px;
        top: 11px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv1;
    }
    #taniq1{
        left: 435px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: taniq1;
    }
    #taniq2{
        left: 437px;
        top: 10px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: taniq2;
    }
    #taniq3{
        left: 436px;
        top: 7px;
        z-index: 4;
       transform: scale(0.45);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 55px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text21;
    }
    #tiv2{
        left: 205px;
        top: 12px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv2;
    }
    #text24{
        left: 290px;
        top: 36px;
        z-index: 2;
        transform: scale(0.65);
        animation-name: text24;
    }

    #nkar31{
        left: 380px;
        top: 1px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar31;
    }
    #nkar32{
        left: 425px;
        top: -20px;
        z-index: 3;
       transform: scale(0.5);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 120px;
        top: 18px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 148px;
        top: 23px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 145px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text41;
    }
    #gic41{
        left: 245px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 375px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar41;
    }
    #text42{
        left: 265px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text42;
    }


    #text43{
        left: 405px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text43;
    }

    #heraxos1{
        left: 385px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -35px;opacity: 0;}
        5%{left: -20px;opacity: 1}
        6%,100%{left: -20px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 80px; transform: scale(0.7);}
        7%{top: 10px;opacity: 1;left: 80px;transform: scale(0.7);}
        8%,16.5%{top: 10px; opacity: 1;left: 80px;transform: scale(0.7);}
        21%{top: 10px; opacity: 1;left: 210px;transform: scale(0.6);}
        22%,45%{top: 10px; opacity: 1;left: 210px;transform: scale(0.6);}
        50%{top: -10px; opacity: 1;left: 230px;transform: scale(0.5);}
        51%,65%{top: -10px; opacity: 1;left: 230px;transform: scale(0.5);}
        70%{top: -50px; opacity: 0;left: 230px;transform: scale(0.5);}
        71%,100%{top: -50px; opacity: 0;left: 230px;transform: scale(0.5);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: 175px;}
        21%{top: 14px;}
        22%,45%{top: 14px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -89px;}
        23%{top: 11px;}
        24%,45%{top: 11px;}
        50%{top: 111px;}
        51%,100%{top: 111px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 40px; opacity: 1;}
        29%,45%{top: 40px; opacity: 1;}
        50%{top: 40px; opacity: 0;}
        51%,100%{top: 40px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -4px; opacity: 0;}
        31%{top:16px; opacity: 1;}
        32%,45%{top:16px; opacity: 1;}
        50%{top: 16px; opacity: 0;}
        51%,100%{top: 16px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -28px; opacity: 0;}
        34%{top:-10px; opacity: 1;}
        35%,45%{top:-10px; opacity: 1;}
        50%{top:-10px; opacity: 0;}
        51%,100%{top:-10px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: 121px;}
        50%{top: 21px;}
        51%,65%{top: 21px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -88px;}
        53%{top: 12px;}
        54%,65%{top: 12px;}
        70%{top: 112px;}
        71%,100%{top: 112px;}
    }
    @keyframes text24{
        0%,45%{top: 120px;}
        50%{top: 68px;}
        51%,65%{top: 68px;}
        70%{top: 168px;}
        71%,100%{top: 168px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: 0px; opacity: 1;}
        56%,65%{top: 0px; opacity: 1;}
        70%{top: 0px; opacity: 0;}
        71%,100%{top: 0px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.8);}
        58%{opacity: 1; transform: scale(0.5);}
        59%,65%{opacity: 1; transform: scale(0.5);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 255px;opacity: 0;}
        77%{left: 235px; opacity: 1;}
        78%,100%{left: 235px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}

@media only screen and (max-width: 550px) {
    .div0{
        width: 100%;
         height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 280px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
        height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.6);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -130px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 168px;
        top: 14px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text11;
    }


    #tiv1{
        left: 281px;
        top: 11px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv1;
    }
    #taniq1{
        left: 340px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: taniq1;
    }
    #taniq2{
        left: 340px;
        top: 10px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: taniq2;
    }
    #taniq3{
        left: 340px;
        top: 7px;
        z-index: 4;
       transform: scale(0.45);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 125px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text21;
    }
    #tiv2{
        left: 280px;
        top: 12px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv2;
    }
    #text24{
        left: 190px;
        top: 36px;
        z-index: 2;
        transform: scale(0.4);
        animation-name: text24;
    }

    #nkar31{
        left: 280px;
        top: 1px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: nkar31;
    }
    #nkar32{
        left: 325px;
        top: -23px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 110px;
        top: 18px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 138px;
        top: 23px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 135px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text41;
    }
    #gic41{
        left: 235px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 350px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 20px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar41;
    }
    #text42{
        left: 245px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text42;
    }


    #text43{
        left: 360px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text43;
    }

    #heraxos1{
        left: 350px;
        top: 26px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -35px;opacity: 0;}
        5%{left: -20px;opacity: 1}
        6%,100%{left: -20px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 80px; transform: scale(0.7);}
        7%{top: 10px;opacity: 1;left: 80px;transform: scale(0.7);}
        8%,16.5%{top: 10px; opacity: 1;left: 80px;transform: scale(0.7);}
        21%{top: 35px; opacity: 1;left: 125px;transform: scale(0.45);}
        22%,45%{top: 35px; opacity: 1;left: 125px;transform: scale(0.45);}
        50%{top: 20px; opacity: 1;left: 125px;transform: scale(0.45);}
        51%,65%{top: 20px; opacity: 1;left: 125px;transform: scale(0.45);}
        70%{top: -50px; opacity: 0;left: 125px;transform: scale(0.45);}
        71%,100%{top: -50px; opacity: 0;left: 125px;transform: scale(0.45);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: -100px;}
        21%{top: -10px;}
        22%,45%{top: -10px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -100px;}
        23%{top: -12px;}
        24%,45%{top: -12px;}
        50%{top: -80px;}
        51%,100%{top: -80px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 35px; opacity: 1;}
        29%,45%{top: 35px; opacity: 1;}
        50%{top: 35px; opacity: 0;}
        51%,100%{top: 35px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -5px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -25px; opacity: 0;}
        34%{top:-15px; opacity: 1;}
        35%,45%{top:-15px; opacity: 1;}
        50%{top:-15px; opacity: 0;}
        51%,100%{top:-15px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: -100px;}
        50%{top: -7px;}
        51%,65%{top: -7px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -100px;}
        53%{top: -18px;}
        54%,65%{top: -18px;}
        70%{top: -100px;}
        71%,100%{top: -100px;}
    }
    @keyframes text24{
        0%,45%{top: 130px;}
        50%{top: 75px;}
        51%,65%{top: 75px;}
        70%{top: 175px;}
        71%,100%{top: 175px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: -15px; opacity: 1;}
        56%,65%{top: -15px; opacity: 1;}
        70%{top: -15px; opacity: 0;}
        71%,100%{top: -15px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.8);}
        58%{opacity: 1; transform: scale(0.4);}
        59%,65%{opacity: 1; transform: scale(0.4);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 25px;}
        71%,100%{top: 25px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 242px;opacity: 0;}
        77%{left: 220px; opacity: 1;}
        78%,100%{left: 220px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 21px; opacity: 1;}
        78%,100%{top: 21px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 23px; opacity: 1;}
        83%,100%{top: 23px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}

@media only screen and (max-width: 500px) {
    .div0{
        width: 100%;
        height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 220px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
        height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.6);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -130px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 168px;
        top: 14px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text11;
    }


    #tiv1{
        left: 281px;
        top: 11px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv1;
    }
    #taniq1{
        left: 340px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: taniq1;
    }
    #taniq2{
        left: 340px;
        top: 10px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: taniq2;
    }
    #taniq3{
        left: 340px;
        top: 7px;
        z-index: 4;
       transform: scale(0.45);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 125px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text21;
    }
    #tiv2{
        left: 280px;
        top: 12px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv2;
    }
    #text24{
        left: 190px;
        top: 36px;
        z-index: 2;
        transform: scale(0.4);
        animation-name: text24;
    }

    #nkar31{
        left: 280px;
        top: 1px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: nkar31;
    }
    #nkar32{
        left: 325px;
        top: -23px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 115px;
        top: 0px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 143px;
        top: 6px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 85px;
        top: 45px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text41;
    }
    #gic41{
        left: 2305px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 3500px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 0px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar41;
    }
    #text42{
        left: 200px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text42;
    }


    #text43{
        left: 300px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text43;
    }

    #heraxos1{
        left: 350px;
        top: 5px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -35px;opacity: 0;}
        5%{left: -20px;opacity: 1}
        6%,100%{left: -20px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 80px; transform: scale(0.7);}
        7%{top: 10px;opacity: 1;left: 80px;transform: scale(0.7);}
        8%,16.5%{top: 10px; opacity: 1;left: 80px;transform: scale(0.7);}
        21%{top: 35px; opacity: 1;left: 125px;transform: scale(0.45);}
        22%,45%{top: 35px; opacity: 1;left: 125px;transform: scale(0.45);}
        50%{top: 20px; opacity: 1;left: 125px;transform: scale(0.45);}
        51%,65%{top: 20px; opacity: 1;left: 125px;transform: scale(0.45);}
        70%{top: -50px; opacity: 0;left: 125px;transform: scale(0.45);}
        71%,100%{top: -50px; opacity: 0;left: 125px;transform: scale(0.45);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: -100px;}
        21%{top: -10px;}
        22%,45%{top: -10px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -100px;}
        23%{top: -12px;}
        24%,45%{top: -12px;}
        50%{top: -80px;}
        51%,100%{top: -80px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 35px; opacity: 1;}
        29%,45%{top: 35px; opacity: 1;}
        50%{top: 35px; opacity: 0;}
        51%,100%{top: 35px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -5px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -25px; opacity: 0;}
        34%{top:-15px; opacity: 1;}
        35%,45%{top:-15px; opacity: 1;}
        50%{top:-15px; opacity: 0;}
        51%,100%{top:-15px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: -100px;}
        50%{top: -7px;}
        51%,65%{top: -7px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -100px;}
        53%{top: -18px;}
        54%,65%{top: -18px;}
        70%{top: -100px;}
        71%,100%{top: -100px;}
    }
    @keyframes text24{
        0%,45%{top: 130px;}
        50%{top: 75px;}
        51%,65%{top: 75px;}
        70%{top: 175px;}
        71%,100%{top: 175px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: -15px; opacity: 1;}
        56%,65%{top: -15px; opacity: 1;}
        70%{top: -15px; opacity: 0;}
        71%,100%{top: -15px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.8);}
        58%{opacity: 1; transform: scale(0.4);}
        59%,65%{opacity: 1; transform: scale(0.4);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 45px;}
        71%,100%{top: 45px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 245px;opacity: 0;}
        77%{left: 230px; opacity: 1;}
        78%,100%{left: 230px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 45px; opacity: 1;}
        78%,100%{top: 45px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 45px; opacity: 1;}
        83%,100%{top: 45px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}

@media only screen and (max-width: 450px) {
    .div0{
        width: 100%;
       height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 160px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.4);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -160px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 68px;
        top: 14px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text11;
    }


    #tiv1{
        left: 181px;
        top: 11px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv1;
    }
    #taniq1{
        left: 240px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: taniq1;
    }
    #taniq2{
        left: 240px;
        top: 10px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: taniq2;
    }
    #taniq3{
        left: 240px;
        top: 7px;
        z-index: 4;
       transform: scale(0.45);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 25px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text21;
    }
    #tiv2{
        left: 180px;
        top: 12px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv2;
    }
    #text24{
        left: 90px;
        top: 36px;
        z-index: 2;
        transform: scale(0.4);
        animation-name: text24;
    }

    #nkar31{
        left: 180px;
        top: 1px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: nkar31;
    }
    #nkar32{
        left: 225px;
        top: -23px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 85px;
        top: 0px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 113px;
        top: 6px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 55px;
        top: 45px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text41;
    }
    #gic41{
        left: 2305px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 3500px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 0px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar41;
    }
    #text42{
        left: 140px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text42;
    }


    #text43{
        left: 220px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text43;
    }

    #heraxos1{
        left: 270px;
        top: 5px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -60px;opacity: 0;}
        5%{left: -40px;opacity: 1}
        6%,100%{left: -40px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -10px; opacity: 0;left: 50px; transform: scale(0.5);}
        7%{top: 10px;opacity: 1;left: 50px;transform: scale(0.5);}
        8%,16.5%{top: 10px; opacity: 1;left: 50px;transform: scale(0.5);}
        21%{top: 35px; opacity: 1;left: 25px;transform: scale(0.45);}
        22%,45%{top: 35px; opacity: 1;left: 25px;transform: scale(0.45);}
        50%{top: 20px; opacity: 1;left: 25px;transform: scale(0.45);}
        51%,65%{top: 20px; opacity: 1;left: 25px;transform: scale(0.45);}
        70%{top: -50px; opacity: 0;left: 25px;transform: scale(0.45);}
        71%,100%{top: -50px; opacity: 0;left: 25px;transform: scale(0.45);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: -100px;}
        21%{top: -10px;}
        22%,45%{top: -10px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -100px;}
        23%{top: -12px;}
        24%,45%{top: -12px;}
        50%{top: -80px;}
        51%,100%{top: -80px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 35px; opacity: 1;}
        29%,45%{top: 35px; opacity: 1;}
        50%{top: 35px; opacity: 0;}
        51%,100%{top: 35px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -5px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -25px; opacity: 0;}
        34%{top:-15px; opacity: 1;}
        35%,45%{top:-15px; opacity: 1;}
        50%{top:-15px; opacity: 0;}
        51%,100%{top:-15px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: -100px;}
        50%{top: -7px;}
        51%,65%{top: -7px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -100px;}
        53%{top: -18px;}
        54%,65%{top: -18px;}
        70%{top: -100px;}
        71%,100%{top: -100px;}
    }
    @keyframes text24{
        0%,45%{top: 130px;}
        50%{top: 75px;}
        51%,65%{top: 75px;}
        70%{top: 175px;}
        71%,100%{top: 175px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: -15px; opacity: 1;}
        56%,65%{top: -15px; opacity: 1;}
        70%{top: -15px; opacity: 0;}
        71%,100%{top: -15px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.8);}
        58%{opacity: 1; transform: scale(0.4);}
        59%,65%{opacity: 1; transform: scale(0.4);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 45px;}
        71%,100%{top: 45px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 185px;opacity: 0;}
        77%{left: 170px; opacity: 1;}
        78%,100%{left: 170px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 45px; opacity: 1;}
        78%,100%{top: 45px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 45px; opacity: 1;}
        83%,100%{top: 45px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}

@media only screen and (max-width: 380px) {
    .div0{
        width: 100%;
     height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 23px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
      height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.4);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -160px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 68px;
        top: 14px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text11;
    }


    #tiv1{
        left: 181px;
        top: 11px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv1;
    }
    #taniq1{
        left: 240px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: taniq1;
    }
    #taniq2{
        left: 240px;
        top: 10px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: taniq2;
    }
    #taniq3{
        left: 240px;
        top: 7px;
        z-index: 4;
       transform: scale(0.45);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 25px;
        top: 7px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text21;
    }
    #tiv2{
        left: 180px;
        top: 12px;
        z-index: 3;
       transform: scale(0.45);
        animation-name: tiv2;
    }
    #text24{
        left: 90px;
        top: 36px;
        z-index: 2;
        transform: scale(0.4);
        animation-name: text24;
    }

    #nkar31{
        left: 180px;
        top: 1px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: nkar31;
    }
    #nkar32{
        left: 225px;
        top: -23px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 85px;
        top: 0px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 113px;
        top: 6px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 55px;
        top: 45px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text41;
    }
    #gic41{
        left: 2305px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 3500px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 492px;
        top: 0px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: nkar41;
    }
    #text42{
        left: 140px;
        top: 21px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text42;
    }


    #text43{
        left: 220px;
        top: 23px;
        z-index: 2;
       transform: scale(0.45);
        animation-name: text43;
    }

    #heraxos1{
        left: 270px;
        top: 5px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -60px;opacity: 0;}
        5%{left: -40px;opacity: 1}
        6%,100%{left: -40px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -40px; opacity: 0;left: 50px; transform: scale(0.5);}
        7%{top: -15px;opacity: 1;left: 50px;transform: scale(0.5);}
        8%,16.5%{top: -15px; opacity: 1;left: 50px;transform: scale(0.5);}
        21%{top: 35px; opacity: 1;left: 25px;transform: scale(0.45);}
        22%,45%{top: 35px; opacity: 1;left: 25px;transform: scale(0.45);}
        50%{top: 20px; opacity: 1;left: 25px;transform: scale(0.45);}
        51%,65%{top: 20px; opacity: 1;left: 25px;transform: scale(0.45);}
        70%{top: -50px; opacity: 0;left: 25px;transform: scale(0.45);}
        71%,100%{top: -50px; opacity: 0;left: 25px;transform: scale(0.45);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: -100px;}
        21%{top: -10px;}
        22%,45%{top: -10px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -100px;}
        23%{top: -12px;}
        24%,45%{top: -12px;}
        50%{top: -80px;}
        51%,100%{top: -80px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 35px; opacity: 1;}
        29%,45%{top: 35px; opacity: 1;}
        50%{top: 35px; opacity: 0;}
        51%,100%{top: 35px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -5px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -25px; opacity: 0;}
        34%{top:-15px; opacity: 1;}
        35%,45%{top:-15px; opacity: 1;}
        50%{top:-15px; opacity: 0;}
        51%,100%{top:-15px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: -100px;}
        50%{top: -7px;}
        51%,65%{top: -7px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -100px;}
        53%{top: -18px;}
        54%,65%{top: -18px;}
        70%{top: -100px;}
        71%,100%{top: -100px;}
    }
    @keyframes text24{
        0%,45%{top: 130px;}
        50%{top: 75px;}
        51%,65%{top: 75px;}
        70%{top: 175px;}
        71%,100%{top: 175px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: -15px; opacity: 1;}
        56%,65%{top: -15px; opacity: 1;}
        70%{top: -15px; opacity: 0;}
        71%,100%{top: -15px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.8);}
        58%{opacity: 1; transform: scale(0.4);}
        59%,65%{opacity: 1; transform: scale(0.4);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 45px;}
        71%,100%{top: 45px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 185px;opacity: 0;}
        77%{left: 170px; opacity: 1;}
        78%,100%{left: 170px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 45px; opacity: 1;}
        78%,100%{top: 45px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 45px; opacity: 1;}
        83%,100%{top: 45px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}

@media only screen and (max-width: 345px) {
    .div0{
        width: 100%;
       height: 75px;
        overflow: hidden;
        position: relative;
    }
    #human2{
        left: 23px;
        top: 0px;
        z-index: 2;
        opacity: 1;
        transform: scale(1);
        animation-name: human;
    }
    /* 1 */
    #fon{
        width: 100%;
       height: 75px;
        top: 0px;
        left: 0px;
    }
    #logo{
        left: 28px;
        top: 6px;
        z-index: 3;
        animation-name: logo;
        transform: scale(0.4);
    }
    #ramka1{
        left: 306px;
        top: 16px;
        z-index: 3;
       transform: scale(0.9);
        animation-name: ramka1;
    }
    #human{
        left: -500px;
        top: 0px;
        z-index: 2;
       transform: scale(0);
        animation-name: human;
    }
    #elipse{
        left: -160px;
        top: -84px;
        z-index: 2;
       transform: scale(0.9);
    }


    /* 2 */
    #text11{
        left: 45px;
        top: 14px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: text11;
    }


    #tiv1{
        left: 150px;
        top: 11px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: tiv1;
    }
    #taniq1{
        left: 200px;
        top: 7px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: taniq1;
    }
    #taniq2{
        left: 200px;
        top: 10px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: taniq2;
    }
    #taniq3{
        left: 200px;
        top: 7px;
        z-index: 4;
       transform: scale(0.4);
        animation-name: taniq3;
    }


    /* 3 */
    #text21{
        left: 15px;
        top: 7px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: text21;
    }
    #tiv2{
        left: 150px;
        top: 12px;
        z-index: 3;
       transform: scale(0.4);
        animation-name: tiv2;
    }
    #text24{
        left: 60px;
        top: 36px;
        z-index: 2;
        transform: scale(0.4);
        animation-name: text24;
    }

    #nkar31{
        left: 140px;
        top: 1px;
        z-index: 2;
       transform: scale(0.35);
        animation-name: nkar31;
    }
    #nkar32{
        left: 185px;
        top: -23px;
        z-index: 3;
       transform: scale(0.35);
        animation-name: nkar32;
    }




    /* 4 */
    #jam1{
        left: 85px;
        top: 0px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam1;
    }

    #jam3{
        left: 113px;
        top: 6px;
        z-index: 2;
       transform: scale(0.6);
        animation-name: jam3;
        transform-origin: bottom;
    }
    #text41{
        left: 55px;
        top: 45px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: text41;
    }
    #gic41{
        left: 2305px;
        top: 20px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic41;
    }
    #gic42{
        left: 3500px;
        top: 0px;
        z-index: 2;
       transform: scale(1);
        animation-name: gic42;
    }
    #nkar41{
        left: 472px;
        top: 0px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: nkar41;
    }
    #text42{
        left: 120px;
        top: 21px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: text42;
    }


    #text43{
        left: 190px;
        top: 23px;
        z-index: 2;
       transform: scale(0.4);
        animation-name: text43;
    }

    #heraxos1{
        left: 240px;
        top: 5px;
        z-index: 2;
       transform: scale(0.7);
        animation-name: heraxos1;
    }

    @keyframes logo{
        0%,2%{left: -60px;opacity: 0;}
        5%{left: -40px;opacity: 1}
        6%,100%{left: -40px;opacity: 1}
    }
    @keyframes ramka1{
        0%,4%{top: -40px; opacity: 0;left: 50px; transform: scale(0.5);}
        7%{top: -15px;opacity: 1;left: 50px;transform: scale(0.5);}
        8%,16.5%{top: -15px; opacity: 1;left: 50px;transform: scale(0.5);}
        21%{top: 35px; opacity: 1;left: 0px;transform: scale(0.45);}
        22%,45%{top: 35px; opacity: 1;left: 0px;transform: scale(0.45);}
        50%{top: 20px; opacity: 1;left: 0px;transform: scale(0.45);}
        51%,65%{top: 20px; opacity: 1;left: 0px;transform: scale(0.45);}
        70%{top: -50px; opacity: 0;left: 0px;transform: scale(0.45);}
        71%,100%{top: -50px; opacity: 0;left: 0px;transform: scale(0.45);}
    }
    @keyframes human{
        0%,16%{top: 0px;}
        20%{top: -200px;}
        21%,100%{top: -200px;}
    }

    @keyframes text11{
        0%,16.5%{top: -100px;}
        21%{top: -10px;}
        22%,45%{top: -10px;}
        50%{top: -142px;}
        51%,100%{top: -142px;}
    }


    @keyframes tiv1{
        0%,19%{top: -100px;}
        23%{top: -12px;}
        24%,45%{top: -12px;}
        50%{top: -80px;}
        51%,100%{top: -80px;}
    }

    @keyframes taniq1{
        0%,23%{top: 20px; opacity: 0;}
        28%{top: 35px; opacity: 1;}
        29%,45%{top: 35px; opacity: 1;}
        50%{top: 35px; opacity: 0;}
        51%,100%{top: 35px; opacity: 0;}
    }
    @keyframes taniq2{
        0%,26%{top: -5px; opacity: 0;}
        31%{top:10px; opacity: 1;}
        32%,45%{top:10px; opacity: 1;}
        50%{top: 10px; opacity: 0;}
        51%,100%{top: 10px; opacity: 0;}
    }
    @keyframes taniq3{
        0%,29%{top: -25px; opacity: 0;}
        34%{top:-15px; opacity: 1;}
        35%,45%{top:-15px; opacity: 1;}
        50%{top:-15px; opacity: 0;}
        51%,100%{top:-15px; opacity: 0;}
    }



    @keyframes text21{
        0%,45%{top: -100px;}
        50%{top: -7px;}
        51%,65%{top: -7px;}
        70%{top: -79px;}
        71%,100%{top: -79px;}
    }
    @keyframes tiv2{
        0%,48%{top: -100px;}
        53%{top: -18px;}
        54%,65%{top: -18px;}
        70%{top: -100px;}
        71%,100%{top: -100px;}
    }
    @keyframes text24{
        0%,45%{top: 130px;}
        50%{top: 75px;}
        51%,65%{top: 75px;}
        70%{top: 175px;}
        71%,100%{top: 175px;}
    }


    @keyframes nkar31{
        0%,50%{top: 50px; opacity: 0;}
        55%{top: -15px; opacity: 1;}
        56%,65%{top: -15px; opacity: 1;}
        70%{top: -15px; opacity: 0;}
        71%,100%{top: -15px; opacity: 0;}
    }

    @keyframes nkar32{
        0%,55%{opacity: 0; transform: scale(0.5);}
        58%{opacity: 1; transform: scale(0.35);}
        59%,65%{opacity: 1; transform: scale(0.35);}
        70%{opacity: 0; transform: scale(0.2);}
        71%,100%{opacity: 0; transform: scale(0.2);}
    }



    @keyframes jam1{
        0%,65%{opacity: 0;}
        70%{opacity: 1;}
        71%,100%{opacity: 1;}
    }

    @keyframes jam3{
        0%,65%{opacity: 0; transform: rotate(0deg) scale(0.6);}
        70%{opacity: 1;transform: rotate(0deg) scale(0.6);}
        100%{opacity: 1; transform: rotate(720deg) scale(0.6);}
    }

    @keyframes text41{
        0%,65%{top: 125px;}
        70%{top: 45px;}
        71%,100%{top: 45px;}
    }
    @keyframes gic41{
        0%,70%{top: 120px;}
        74%{top: 20px;}
        75%,100%{top: 20px;}
    }
    @keyframes gic42{
        0%,70%{top: -100px;}
        74%{top: 0px;}
        75%,100%{top: 0px;}
    }

    @keyframes nkar41{
        0%,72%{left: 165px;opacity: 0;}
        77%{left: 150px; opacity: 1;}
        78%,100%{left: 150px;opacity: 1;}
    }

    @keyframes text42{
        0%,72%{top: 121px; opacity: 0;}
        77%{top: 45px; opacity: 1;}
        78%,100%{top: 45px; opacity: 1;}
    }

    @keyframes text43{
        0%,77%{top: 123px; opacity: 0;}
        82%{top: 45px; opacity: 1;}
        83%,100%{top: 45px; opacity: 1;}
    }

    @keyframes heraxos1{
        0%,80%{opacity: 0; transform: scale(0.0.5);}
        82%{opacity: 1;transform: scale(0.5);}
        86%{opacity: 1;transform: scale(0.6);}
        90%{opacity: 1;transform: scale(0.5);}
        94%{opacity: 1;transform: scale(0.6);}
        98%{opacity: 1;transform: scale(0.5);}
        100%{opacity: 1;transform: scale(0.54);}
    }
}