.bubbles-container {
            position: absolute;
            bottom: 0;
            left: 10%;
            width: 100%;
            max-width: 15rem;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            opacity: 0.75;
            overflow: visible;
            z-index: -9;
        }

        .bubbles {
            width: 100%;
            height: auto;
        }

            .bubbles circle {
                stroke: #354c86;
                fill: none;
            }

            .bubbles > g > g:nth-of-type(3n) circle {
                stroke: #87f5fb;
            }

            .bubbles > g > g:nth-of-type(4n) circle {
                stroke: #8be8cb;
            }

        .bubbles-large {
            overflow: visible;
        }

            .bubbles-large > g {
                -webkit-transform: translateY(2048px);
                transform: translateY(2048px);
                opacity: 0;
                will-change: transform, opacity;
            }

            .bubbles-large g:nth-of-type(1) {
                -webkit-animation: up 6.5s infinite;
                animation: up 6.5s infinite;
            }

                .bubbles-large g:nth-of-type(1) g {
                    -webkit-transform: translateX(350px);
                    transform: translateX(350px);
                }

                .bubbles-large g:nth-of-type(1) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-large g:nth-of-type(2) {
                -webkit-animation: up 5.25s 250ms infinite;
                animation: up 5.25s 250ms infinite;
            }

                .bubbles-large g:nth-of-type(2) g {
                    -webkit-transform: translateX(450px);
                    transform: translateX(450px);
                }

                .bubbles-large g:nth-of-type(2) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-large g:nth-of-type(3) {
                -webkit-animation: up 6s 750ms infinite;
                animation: up 6s 750ms infinite;
            }

                .bubbles-large g:nth-of-type(3) g {
                    -webkit-transform: translateX(700px);
                    transform: translateX(700px);
                }

                .bubbles-large g:nth-of-type(3) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-large g:nth-of-type(4) {
                -webkit-animation: up 5.5s 1.5s infinite;
                animation: up 5.5s 1.5s infinite;
            }

                .bubbles-large g:nth-of-type(4) g {
                    -webkit-transform: translateX(500px);
                    transform: translateX(500px);
                }

                .bubbles-large g:nth-of-type(4) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-large g:nth-of-type(5) {
                -webkit-animation: up 6.5s 4s infinite;
                animation: up 6.5s 4s infinite;
            }

                .bubbles-large g:nth-of-type(5) g {
                    -webkit-transform: translateX(675px);
                    transform: translateX(675px);
                }

                .bubbles-large g:nth-of-type(5) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

        .bubbles-small {
            overflow: visible;
        }

            .bubbles-small > g {
                -webkit-transform: translateY(2048px);
                transform: translateY(2048px);
                opacity: 0;
                will-change: transform, opacity;
            }

            .bubbles-small g circle {
                -webkit-transform: scale(0);
                transform: scale(0);
            }

            .bubbles-small g:nth-of-type(1) {
                -webkit-animation: up 5.25s infinite;
                animation: up 5.25s infinite;
            }

                .bubbles-small g:nth-of-type(1) g {
                    -webkit-transform: translateX(350px);
                    transform: translateX(350px);
                }

                .bubbles-small g:nth-of-type(1) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(2) {
                -webkit-animation: up 5.75s infinite;
                animation: up 5.75s infinite;
            }

                .bubbles-small g:nth-of-type(2) g {
                    -webkit-transform: translateX(750px);
                    transform: translateX(750px);
                }

                .bubbles-small g:nth-of-type(2) circle {
                    -webkit-animation: wobble 3s infinite ease-in-out;
                    animation: wobble 3s infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(3) {
                -webkit-animation: up 5.25s 250ms infinite;
                animation: up 5.25s 250ms infinite;
            }

                .bubbles-small g:nth-of-type(3) g {
                    -webkit-transform: translateX(350px);
                    transform: translateX(350px);
                }

                .bubbles-small g:nth-of-type(3) circle {
                    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
                    animation: wobble 3s 250ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(4) {
                -webkit-animation: up 5.75s 325ms infinite;
                animation: up 5.75s 325ms infinite;
            }

                .bubbles-small g:nth-of-type(4) g {
                    -webkit-transform: translateX(180px);
                    transform: translateX(180px);
                }

                .bubbles-small g:nth-of-type(4) circle {
                    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
                    animation: wobble 3s 325ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(5) {
                -webkit-animation: up 6s 125ms infinite;
                animation: up 6s 125ms infinite;
            }

                .bubbles-small g:nth-of-type(5) g {
                    -webkit-transform: translateX(350px);
                    transform: translateX(350px);
                }

                .bubbles-small g:nth-of-type(5) circle {
                    -webkit-animation: wobble 3s 250ms infinite ease-in-out;
                    animation: wobble 3s 250ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(6) {
                -webkit-animation: up 5.13s 250ms infinite;
                animation: up 5.13s 250ms infinite;
            }

                .bubbles-small g:nth-of-type(6) g {
                    -webkit-transform: translateX(650px);
                    transform: translateX(650px);
                }

                .bubbles-small g:nth-of-type(6) circle {
                    -webkit-animation: wobble 3s 125ms infinite ease-in-out;
                    animation: wobble 3s 125ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(7) {
                -webkit-animation: up 6.25s 350ms infinite;
                animation: up 6.25s 350ms infinite;
            }

                .bubbles-small g:nth-of-type(7) g {
                    -webkit-transform: translateX(480px);
                    transform: translateX(480px);
                }

                .bubbles-small g:nth-of-type(7) circle {
                    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
                    animation: wobble 3s 325ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(8) {
                -webkit-animation: up 7s 200ms infinite;
                animation: up 7s 200ms infinite;
            }

                .bubbles-small g:nth-of-type(8) g {
                    -webkit-transform: translateX(330px);
                    transform: translateX(330px);
                }

                .bubbles-small g:nth-of-type(8) circle {
                    -webkit-animation: wobble 3s 325ms infinite ease-in-out;
                    animation: wobble 3s 325ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(9) {
                -webkit-animation: up 6.25s 233ms infinite;
                animation: up 6.25s 233ms infinite;
            }

                .bubbles-small g:nth-of-type(9) g {
                    -webkit-transform: translateX(230px);
                    transform: translateX(230px);
                }

                .bubbles-small g:nth-of-type(9) circle {
                    -webkit-animation: wobble 3s 275ms infinite ease-in-out;
                    animation: wobble 3s 275ms infinite ease-in-out;
                }

            .bubbles-small g:nth-of-type(10) {
                -webkit-animation: up 6s 900ms infinite;
                animation: up 6s 900ms infinite;
            }

                .bubbles-small g:nth-of-type(10) g {
                    -webkit-transform: translateX(730px);
                    transform: translateX(730px);
                }

                .bubbles-small g:nth-of-type(10) circle {
                    -webkit-animation: wobble 2s 905ms infinite ease-in-out;
                    animation: wobble 2s 905ms infinite ease-in-out;
                }

        @-webkit-keyframes wobble {
            33% {
                -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
            }

            66% {
                -webkit-transform: translateX(50px);
                transform: translateX(50px);
            }
        }

        @keyframes wobble {
            33% {
                -webkit-transform: translateX(-50px);
                transform: translateX(-50px);
            }

            66% {
                -webkit-transform: translateX(50px);
                transform: translateX(50px);
            }
        }

        @-webkit-keyframes up {
            0% {
                opacity: 0;
            }

            10%, 90% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                -webkit-transform: translateY(-1024px);
                transform: translateY(-1024px);
            }
        }

        @keyframes up {
            0% {
                opacity: 0;
            }

            10%, 90% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                -webkit-transform: translateY(-1024px);
                transform: translateY(-1024px);
            }
        }