.animated-shapes {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
.ansh-3 {
    width: 300px;
    height: 300px;
    position: absolute;
    top: -20px;
    left: -20px ;
}
.ansh-3-x {
    animation: ansh-3-x 60s linear infinite alternate;
}
.ansh-3-y {
    animation: ansh-3-y 30s linear infinite alternate;
}
@keyframes ansh-3-x {
    100% {
        transform: translateX( -50px ) ;
    }
}
@keyframes ansh-3-y {
    100% {
        transform: translateY( -50px ) rotate(360deg);
    }
}

.ansh-3-shw {
    width: 600px;
    height: 600px;
    position: absolute;
    top: -80px;
    left: -80px ;
}
.ansh-3-shw-x {
    animation: ansh-3-shw-x 60s linear infinite alternate;
}
.ansh-3-shw-y {
    animation: ansh-3-shw-y 30s linear infinite alternate;
}
@keyframes ansh-3-shw-x {
    100% {
        transform: translateX( -30px ) ;
    }
}
@keyframes ansh-3-shw-y {
    100% {
        transform: translateY( -30px ) rotate(360deg);
    }
}

.ansh-2 {
    position: absolute;
    top: 0;
    right: 0 ;
    width: 250px;
    height: 250px;
}
.ansh-2-x {
    animation: ansh-2-x 25s linear infinite alternate;
}
.ansh-2-y {
    animation: ansh-2-y 30s linear infinite alternate;
}
@keyframes ansh-2-x {
    100% {
        transform: translateX( calc( 100px -  50vw) );
    }
}
@keyframes ansh-2-y {
    100% {
        transform: translateY( calc(700px - 400px) );
    }
}

.ansh-1 {
    position: absolute;
    bottom: 0;
    left: 0 ;
    width: 400px;
    height: 400px;
}
.ansh-1-x {
    animation: ansh-1-x 35s linear infinite alternate;
}
.ansh-1-y {
    animation: ansh-1-y 40s linear infinite alternate;
}
@keyframes ansh-1-x {
    100% {
        transform: translateX( calc(  100vw - 300px) );
    }
}
@keyframes ansh-1-y {
    100% {
        transform: translateY( calc(400px - 700px ) );
    }
}

.ansh-4 {
    width: 20px;
    height: 20px;
    position: absolute;

    animation: ansh-4-anim 100s;
}
.ansh-4 img {
    width: 100%;


}
@keyframes ansh-4-anim {
    0% {
        top: 100%;
        left: 100%;
    }
    20% {
        top: 50%;
        left:50%;
    }
    40% {
        top: 80%;
        left: 70%;
    }
    60% {
        top: 10%;
        left: 90%;
    }
    80% {
        top: 50%;
        left: 40%;
    }
    100% {
        top: 100%;
        left: 100%;
    }
}

.ansh-5 {
    width: 40px;
    height: 40px;
    position: absolute;

    animation: ansh-5-anim 100s;
}
.ansh-5 img {
    width: 100%;


}
@keyframes ansh-5-anim {
    0% {
        top: 0%;
        left: 70%;
    }
    20% {
        top: 50%;
        left:80%;
    }
    40% {
        top: 40%;
        left: 60%;
    }
    60% {
        top: 100%;
        left: 70%;
    }
    80% {
        top:50%;
        left: 50%;
    }
    100% {
        top: 0%;
        left: 70%;
    }
}

.ansh-6 {
    position: absolute;
    top: 0;
    right: 0 ;
    width: 100px;
    height: 100px;
}
.ansh-6-x {
    animation: ansh-6-x 45s linear infinite alternate;
}
.ansh-6-y {
    animation: ansh-6-y 40s linear infinite alternate;
}
@keyframes ansh-6-x {
    100% {
        transform: translateX( calc( 100px -  100vw) );
    }
}
@keyframes ansh-6-y {
    100% {
        transform: translateY( calc(100vh - 100px) );
    }
}

.ansh-7 {
    position: absolute;

    width: 50px;
    height: 50px;
    animation: ansh-7-anim 40s;
}
.ansh-7 img {
    width: 100%;


}
@keyframes ansh-7-anim {
    0% {
        bottom: 0%;
        left: 0%;
    }
    20% {
        bottom: 30%;
        left:30%;
    }
    40% {
        bottom: 10%;
        left: 60%;
    }
    60% {
        bottom: 40%;
        left: 80%;
    }
    80% {
        bottom:10%;
        left: 40%;
    }
    100% {
        bottom: 0%;
        left: 0%;
    }
}



.ansh-11 {
    position: absolute;
    bottom: 0;
    left: 0 ;
    width: 400px;
    height: 400px;
}
.ansh-11-x {
    animation: ansh-11-x 35s linear infinite alternate;
}
.ansh-11-y {
    animation: ansh-11-y 40s linear infinite alternate;
}
@keyframes ansh-11-x {
    100% {
        transform: translateX( calc(  100vw - 300px) );
    }
}
@keyframes ansh-11-y {
    100% {
        transform: translateY( calc(400px - 700px ) );
    }
}


.ansh-22 {
    position: absolute;
    top: 0;
    right: 0 ;
    width: 200px;
    height: 200px;
}
.ansh-22-x {
    animation: ansh-22-x 25s linear infinite alternate;
}
.ansh-22-y {
    animation: ansh-22-y 10s linear infinite alternate;
}
.ansh-22 img {
    width: 100%;
}
@keyframes ansh-22-x {
    100% {
        transform: translateX( calc( 200px -  100vw) );
    }
}
@keyframes ansh-22-y {
    100% {
        transform: translateY( calc(100vh - 100px) );
    }
}

.ansh-33 {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -100px;
    left: -100px ;
}
.ansh-33-x {
    animation: ansh-33-x 20s linear infinite alternate;
}
.ansh-33-y {
    animation: ansh-33-y 30s linear infinite alternate;
}
@keyframes ansh-33-x {
    100% {
        transform: translateX( calc( 500px -  100vw) );
    }
}
@keyframes ansh-33-y {
    100% {
        transform: translateY( calc(700px - 10px) );
    }
}