@media only screen and (max-width: 1199px){
    .z-main-background-mobile { 
        z-index: -2;
        height: 100vh;
        display: flex;
        position: relative;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(#58582c, #a7a470);
    }

    .z-bad-mountain-mobile {
        z-index: 0;
        height: 100vh;
        position: absolute;
    }

    @keyframes floating {
        from { transform: translate(0,  0px); }
        65%  { transform: translate(0, 15px); }
        to   { transform: translate(0, -0px); }    
    }

    .z-tooltip-mobile {
        z-index: 10;
        color: black;
        position: absolute;
        background-color:rgba(255,255,255, 0.6);
        padding: 10px 10px;
        border-radius: 10px;
        border: 1px solid #000;

    }

    .z-tooltip-mobile p {
        line-height: 1.5;
        text-align: center;
        letter-spacing: 2px;
        font-family: Maiah-Regular;
    }

    @media only screen and (max-width: 600px){
        .z-tooltip-mobile {
            font-size: 10px; 
        }
        .z-info {
            font-size: 8px;
        }
    }
        
    /********* RIPPLE CONTAINERS ********/
    .mobile-ripple-container-01, .mobile-ripple-container-02, .mobile-ripple-container-03, .mobile-ripple-container-04, 
    .mobile-ripple-container-05, .mobile-ripple-container-06, .mobile-ripple-container-07, .mobile-ripple-container-08 {
        position: absolute;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        transform: translate(-50%, -50%);
        top: 0;
        left: 0;
    }

    /********* ACTUAL RIPPLES ********/
    .mobile-ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border: 3px solid yellow;
        border-radius: 50%;
        animation: ripple-effect 3s linear infinite;
    }

    .mobile-ripple:nth-child(2) {
        border-color: yellow;
        animation-delay: 1s;
        opacity:0.8;
    }

    .mobile-ripple:nth-child(3) {
        border-color: yellow;
        animation-delay: 2s;
        opacity:0.5;
    }

    @keyframes ripple-effect {
        0% {
            width: 0;
            height: 0;
            opacity: 0.5;
        }
        100% {
            width: 50px;
            height: 50px;
            opacity: 0;
        }
    }

}