﻿.img_position {
position:absolute;
left:0;
width:100%;
height:100%;

top:0;
}


.baner_wrap_pumpa {
    grid-template-columns: auto auto;
    display:inline-grid;
    margin-bottom:10px;
}


.baner_text_pumpa {
    color: black;
    font-size: 14px;
    text-align: left;
    background-color: white;
    padding: 20px;
    height: fit-content;
    align-self: center;
    border-radius: 20px;
}

.cloude_circule_1 {
    background-color: white;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    position: absolute;
    top: 97px;
    right: 8px;
}


.cloude_circule_2 {
    background-color: white;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    position: absolute;
    top: 95px;
    right: 39px;
}


.pumpa_anim_wrap {
    position: relative;
    width: 180px;
    height: 180px;
    margin-top: -30px;
    margin-left: -40px;
    margin-right: -20px;
    animation: left_right 3s ease-in-out infinite alternate-reverse;
    transform-origin: 50% 100%;
}


.fade_1 {
opacity:0;
animation: fade_ob_1 1s forwards ease-in-out;
animation-delay:0.5s;
transform-origin:0 50%;
}




.pum_anim_1 {
    transform-origin: 58.0% 64.0%;
    transform: rotate(42deg);
    animation: hande 8s alternate-reverse infinite ease-in-out;
}


.pum_anim_4 {
    transform-origin: 45% 25%;
    animation: ushi 12s  infinite ease-in-out;
}


.pum_anim_5 {
    transform-origin: 45% 55%;
    animation: ushi_2 12s infinite ease-in-out;
}



.fade_2 {
    opacity: 0;
    animation: fade_ob_1 1s forwards ease-in-out;
    animation-delay: 0s;
    transform-origin: 0 50%;
}


.fade_3 {
    opacity: 0;
    animation: fade_ob_1 0.5s forwards ease-in-out;
    animation-delay: 1s;
    transform-origin: 0 50%;
}


.pum_anim_2 {
    transform-origin: 52.0% 44.0%;
    animation: glaz 4s alternate-reverse infinite ease-in-out;
}


.pum_anim_3 {
    transform-origin: 45.0% 42.0%;
    animation: glaz 4s alternate-reverse infinite ease-in-out;
}



@keyframes glaz {


    100% {
        transform: scale(1);
    }
    
    5% {
        transform: scaleY(0.1);
    }

    10% {
        transform: scale(1);
    }



    100% {
        transform: scale(1);
    }
}





@keyframes fade_ob_1 {

    0% {
        opacity: 0;
        transform:scale(0.5);
    }




    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes left_right {

    0% {
        transform: skewX(-1deg);
    }




    100% {
        transform: skewX(1deg);
    }
}


@keyframes ushi {

    0% {
        transform: skewY(0);
    }
    2% {
        transform: skewY(-5deg);
    }

    4% {
        transform: skewY(0);
    }
    6% {
        transform: skewY(-5deg);
    }

    8% {
        transform: skewY(0);
    }

    100% {
        transform: skewY(0);
    }
}



@keyframes ushi_2 {

    0% {
        transform: skewY(0);
    }

    2% {
        transform: skewY(5deg);
    }

    4% {
        transform: skewY(0);
    }

    6% {
        transform: skewY(5deg);
    }

    8% {
        transform: skewY(0);
    }

    100% {
        transform: skewY(0);
    }
}



@keyframes hande {

    0% {
        transform: rotate(42deg);
    }

    20% {
        transform: rotate(42deg);
    }

    30% {
        transform: rotate(0);
    }
    32% {
        transform: rotate(0) scaleX(1.1);
    }

    34% {
        transform: rotate(0) scaleX(1);
    }

    36% {
        transform: rotate(0) scaleX(1.1);
    }


    38% {
        transform: rotate(0) scaleX(1);
    }

    100% {
        transform: rotate(0);
    }

/*
    100% {
        transform: rotate(42deg);
    }*/
}


