#swimming-pool {
    background-image: url(../img/pool2.png);
    width: 567px;
    height: 378px;
    position: relative;
    overflow: hidden;

}

#stick-shadow {
    background-image: url(../img/stick-shadow.png);
    width: 224px;
    height: 130px;
    position: absolute;
    bottom: 60px;
    left: 20px;
    transform-origin: 10% 20%;
    transform: skewY(-7deg) skewX(-7deg);
    animation: 6s stick-shadow-move infinite;
}

@keyframes stick-shadow-move {
    20% {
        transform: skewY(0deg) skewX(0deg);
        opacity: 0.6;
    }
    30% {
        transform: skewY(0deg) skewX(0deg);
        opacity: 0.6;
    }
    50% {
        transform: skewY(-7deg) skewX(-7deg);
    }

    70% {
        transform: skewY(0deg) skewX(0deg);
        opacity: 0.6;
    }
    80% {
        transform: skewY(0deg) skewX(0deg);
        opacity: 0.6;
    }
}


#stick {
    background-image: url(../img/stick.png);
    width: 230px;
    height: 100px;
    position: absolute;
    top: 140px;
    left: 30px;
    transform-origin: 10% 30%;
    transform: skewY(7deg) skewX(-7deg);
    animation: stick-move infinite 6s;
}

@keyframes stick-move {
    20% {
        transform: skewY(0deg) skewX(0deg);
    }
    30% {
        transform: skewY(0deg) skewX(0deg);
    }
    50% {
        transform: skewY(7deg) skewX(-7deg);
    }

    70% {
        transform: skewY(0deg) skewX(0deg);
    }
    80% {
        transform: skewY(0deg) skewX(0deg);
    }
}

#lady {

    width: 79px;
    height: 109px;
    position: absolute;
    top: 129px;
    left: 168px;
    transform: skewX(10deg) scaleY(0.9);
    animation: jump-style 6s infinite;
}

@keyframes jump-style {
    25% {
        transform: skewX(0deg) scaleY(1);
        top: 70px;
    }

    50% {
        transform: skewX(10deg) scaleY(0.9);
        top: 129px;
    }

    75% {
        transform: skewX(0deg) scaleY(1);
        top: 70px;
    }
}

#lady-body {
    background-image: url(../img/lady-body.png);
    position: absolute;
    width: 79px;
    height: 109px;
}

#lady-arm {
    position: absolute;
    background-image: url(../img/lady-arm.png);
    width: 40px;
    height: 31px;
    top: 17px;
    left: 0px;
    transform-origin: 90% 20%;
    transform: rotate(-35deg);
    animation: arm-rotate 3s infinite;
}

@keyframes arm-rotate {
    50% {
        transform: rotate(0deg);
    }
}

#lady-legs {
    position: absolute;
    top: 43px;
    left: 38px;
    width: 30px;
    height: 60px;
    animation: leg-rotate 3s infinite;
    transform-origin: 20% 10%;
    transform: rotate(10deg);
}

@keyframes leg-rotate {
    50% {
        transform: rotate(-25deg);
    }
}

#lady-leg1 {
    position: absolute;
    background-image: url(../img/lady-leg1.png);
    width: 19px;
    height: 31px;
}

#lady-leg2 {
    position: absolute;
    background-image: url(../img/lady-leg2.png);
    width: 14px;
    height: 33px;
    top: 27px;
    left: 5px;
    transform-origin: 80% 5%;
    animation: leg2-rotate 3s infinite;
}

@keyframes leg2-rotate {
    50% {
        transform: rotate(50deg);
    }
}

#dude-swimming {
    width: 70px;
    height: 45px;
    bottom: 60px;
    right: 37px;
    position: absolute;
    overflow: hidden;

}

#dude {
    background-image: url(../img/dude.png);
    width: 70px;
    height: 93px;
    top: 2px;
    position: absolute;
    animation: swimming 6s infinite;

}

@keyframes swimming {
    50% {
        top: 20px;
        transform: rotate(-10deg);
    }
}

#shadow-canvas {
    width: 70px;
    height: 60px;
    bottom: 0px;
    right: 40px;
    position: absolute;
}

#shadow {
    background-image: url(../img/schaduw2.png);
    width: 70px;
    height: 56px;
    top: -10px;
    right: 0px;
    position: absolute;
    transform-origin: top;
    animation: shadow-scale 6s infinite;
    opacity: 0.5;
}

@keyframes shadow-scale {
    50% {
        transform: scaleY(0.2) skewX(10deg);
        right: 5px;
        top: -5px;
        opacity: 1;
    }
}