.footer #background-wrap {

    bottom: 0;

    left: 0;

    position: relative;

    right: 0;

    top: 0;

    z-index: 1;

    color: gray;

}



/* KEYFRAMES */



@-webkit-keyframes animateBubble {

    0% {

        margin-top: 800px;

    }

    100% {

        margin-top: -100%;

    }

}



@-moz-keyframes animateBubble {

    0% {

        margin-top: 800px;

    }

    100% {

        margin-top: -100%;

    }

}



@keyframes animateBubble {

    0% {

        margin-top: 800px;

    }

    100% {

        margin-top: -100%;

    }

}



@-webkit-keyframes sideWays {

    0% {

        margin-left: 0px;

    }

    100% {

        margin-left: 50px;

    }

}



@-moz-keyframes sideWays {

    0% {

        margin-left: 0px;

    }

    100% {

        margin-left: 50px;

    }

}



@keyframes sideWays {

    0% {

        margin-left: 0px;

    }

    100% {

        margin-left: 50px;

    }

}



/* ANIMATIONS */



.x1 {

    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;

	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;

	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;



    left: -5%;

    top: 5%;



    -webkit-transform: rotate(60deg) scale(0.6);

    -moz-transform: rotate(60deg) scale(0.6);

    transform: rotate(60deg) scale(0.6);



    margin-top: 300px;

}



.x2 {

      -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;

	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;



    left: 5%;

    top: 80%;



    -webkit-transform: scale(0.4) rotate(145deg);

    -moz-transform: scale(0.4) rotate(145deg);

    transform: scale(0.4) rotate(145deg);

}



.x3 {

    -webkit-animation: animateBubble 68s linear infinite, sideWays 2s ease-in-out infinite alternate;

    -moz-animation: animateBubble 68s linear infinite, sideWays 2s ease-in-out infinite alternate;

    animation: animateBubble 68s linear infinite, sideWays 2s ease-in-out infinite alternate;



    left: 10%;

    top: 40%;



    -webkit-transform: scale(0.7) rotate(120deg);

    -moz-transform: scale(0.7) rotate(120deg);

    transform: scale(0.7) rotate(120deg);

}



.x4 {

    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;



    left: 20%;

    top: 0;



    -webkit-transform: scale(0.3) rotate(185deg);

    -moz-transform: scale(0.3) rotate(185deg);

    transform: scale(0.3) rotate(185deg);

}



.x5 {

    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;

	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;



    left: 30%;

    top: 50%;



    -webkit-transform: scale(0.5) rotate(200deg);

    -moz-transform: scale(0.5) rotate(200deg);

    transform: scale(0.5) rotate(200deg);

}



.x6 {

    -webkit-animation: animateBubble 41s linear infinite, sideWays 2s ease-in-out infinite alternate;

    -moz-animation: animateBubble 41s linear infinite, sideWays 2s ease-in-out infinite alternate;

    animation: animateBubble 41s linear infinite, sideWays 2s ease-in-out infinite alternate;



    left: 50%;

    top: 0;



    -webkit-transform: scale(0.8) rotate(130deg);

    -moz-transform: scale(0.8) rotate(130deg);

    transform: scale(0.8) rotate(130deg);

}



.x7 {

    -webkit-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;

    -moz-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;

    animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;



    left: 65%;

    top: 70%;



    -webkit-transform: scale(0.4) rotate(90deg);

    -moz-transform: scale(0.4) rotate(90deg);

    transform: scale(0.4) rotate(90deg);

}



.x8 {

    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

    -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

    animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;

    left: 80%;

    top: 10%;



    -webkit-transform: scale(0.3) rotate(190deg);

    -moz-transform: scale(0.3) rotate(190deg);

    transform: scale(0.3) rotate(190deg);

}



.x9 {

    -webkit-animation: animateBubble 58s linear infinite, sideWays 4s ease-in-out infinite alternate;

    -moz-animation: animateBubble 58s linear infinite, sideWays 4s ease-in-out infinite alternate;

    animation: animateBubble 58s linear infinite, sideWays 4s ease-in-out infinite alternate;



    left: 90%;

    top: 50%;



    -webkit-transform: scale(0.6) rotate(250deg);

    -moz-transform: scale(0.6) rotate(250deg);

    transform: scale(0.6) rotate(250deg);

}



.x10 {

    -webkit-animation: animateBubble 46s linear infinite, sideWays 2s ease-in-out infinite alternate;

    -moz-animation: animateBubble 46s linear infinite, sideWays 2s ease-in-out infinite alternate;

    animation: animateBubble 46s linear infinite, sideWays 2s ease-in-out infinite alternate;



    left: 80%;

    top: 80%;



    -webkit-transform: scale(0.3);

    -moz-transform: scale(0.3);

    transform: scale(0.3);

}



/* OBJECTS */



.bubble {

    background-image: url("/wp-content/uploads/2022/03/bubble-2.png");

    height: 200px;

    position: absolute;

    width: 200px;

    background-size: contain;

    background-repeat: no-repeat;

}