.promuwu {
    width: 140px;
    height: 140px;
}

.promuwu:hover {
    animation: extend 0.5s;
}

.lit_image {
    width: 80px;
    height: 40px;
}

.lit_image:hover {
    animation: extend 0.5s;
}

@keyframes extend {
    50% {
        transform: scale(1.2);
    }
}

.shake {
    animation: shake 0.9s infinite;
}

@keyframes shake {
    0% { transform: translate(2px, 1px) rotate(0deg); } 
    10% { transform: translate(-1px, -2px) rotate(-.2deg); }
    20% { transform: translate(-3px, 0px) rotate(.5deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(.4deg); }
    50% { transform: translate(-1px, 2px) rotate(-.1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-.2deg); }
    80% { transform: translate(-1px, -1px) rotate(.5deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-.3deg); }
}

.croco_w {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco.png");
    animation: animating 1s infinite steps(4);
}

.croco_w_1 {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco.png");
    animation: animating 0.6s infinite steps(4), forwa 4s linear forwards infinite;
}

.croco_w_2 {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco.png");
    animation: animating 0.9s infinite steps(4), forwa 5.5s linear forwards infinite;
}

.croco_w_3 {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco.png");
    animation: animating 0.8s infinite steps(4), forwa 5s linear forwards infinite;
}

.croco_w_4 {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco.png");
    animation: animating 0.6s infinite steps(4), forwa 3s linear forwards infinite;
}

.croco_w_back {
    width: 56px;
    height: 39px;
    position: absolute;
    background-image: url("Images/croco_back.png");
    animation: animating 1s infinite steps(4);
}

.croco_w_back_1 {
    width: 56px;
    height: 39px;
    background-image: url("Images/croco_back.png");
    animation: animating 0.6s infinite steps(4), backwa 4s linear forwards infinite;
}

.croco_w_back_2 {
    width: 56px;
    height: 39px;
    background-image: url("Images/croco_back.png");
    animation: animating 0.9s infinite steps(4), backwa 5.5s linear forwards infinite;
}

.croco_w_back_3 {
    width: 56px;
    height: 39px;
    background-image: url("Images/croco_back.png");
    animation: animating 0.8s infinite steps(4), backwa 5s linear forwards infinite;
}

.croco_w_back_4 {
    width: 56px;
    height: 39px;
    background-image: url("Images/croco_back.png");
    animation: animating 0.6s infinite steps(4), backwa 3s linear forwards infinite;
}

@keyframes animating {
    from { background-position: 0 0; }
    to { background-position: -224px 0; }
}

@keyframes backwa {
    from { left: -57px; }
    to { left: 1800px;
        display: none;
        visibility: hidden;
        overflow: hidden;}
}

@keyframes forwa {
    from { left: 100%; }
    to { left: calc(100% - 1800px);
        display: none;
        visibility: hidden;
        overflow: hidden;}
}

.fadeout {
    animation: fadeout_anim 1.2s forwards;
}

@keyframes fadeout_anim {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0;
    }
}