@keyframes bamboleo1 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) translateX(3px) rotate(2deg);
    }
    50% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    75% {
        transform: translateY(5px) translateX(-3px) rotate(-2deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes bamboleo2 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-6px) translateX(2px) rotate(1.5deg);
    }
    50% {
        transform: translateY(1px) translateX(-1px) rotate(0deg);
    }
    75% {
        transform: translateY(4px) translateX(-4px) rotate(-2.5deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes bamboleo3 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-4px) translateX(4px) rotate(2.5deg);
    }
    50% {
        transform: translateY(1px) translateX(0px) rotate(0deg);
    }
    75% {
        transform: translateY(5px) translateX(-2px) rotate(-2deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes bamboleo4 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) translateX(2px) rotate(1deg);
    }
    50% {
        transform: translateY(2px) translateX(-2px) rotate(-0.5deg);
    }
    75% {
        transform: translateY(6px) translateX(-3px) rotate(-3deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

@keyframes bamboleo5 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) translateX(1px) rotate(2deg);
    }
    50% {
        transform: translateY(0px) translateX(2px) rotate(0.5deg);
    }
    75% {
        transform: translateY(3px) translateX(-4px) rotate(-1.5deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

.bamboleo1 { animation: bamboleo1 6s ease-in-out infinite; }
.bamboleo2 { animation: bamboleo2 6s ease-in-out infinite; }
.bamboleo3 { animation: bamboleo3 6s ease-in-out infinite; }
.bamboleo4 { animation: bamboleo4 6s ease-in-out infinite; }
.bamboleo5 { animation: bamboleo5 6s ease-in-out infinite; }


.container-bubbles{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	
	.img-bubble{
		position: relative;
		z-index: 3;
		//animation: bamboleo 6s ease-in-out infinite;
    	transform-origin: center;
    	display: inline-block;

		&#img-bubble-1{
			top: 10%;
			left: 31%;
		}

		&#img-bubble-2{
			top: -5%;
			left: 16%;
		}

		&#img-bubble-3{
			top: 23%;
			left: 50%;
		}

		&#img-bubble-4{
			top: 55%;
			left: 50%;
		}

		&#img-bubble-5{
			top: 50%;
			left: -43%;
		}

		@media(max-width: 1200px) {

			&#img-bubble-1{
				top: 36%;
				left: 31%;
			}

			&#img-bubble-2{
				top: -5%;
				left: 16%;
			}

			&#img-bubble-3{
				top: -8%;
				left: 5%;
			}

			&#img-bubble-4{
				top: 30%;
				left: 9%;
			}

			&#img-bubble-5{
				top: 30%;
				left: -33%;
			}

		}
	}
}