@keyframes circle {
    0% {
        transform: rotate(0deg) translateY(2px);
    }

    100% {
        transform: rotate(360deg) translateY(2px);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -6px, 0);
    }
}

@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}


.ambientsound-container {
    position: fixed;
    top: 300px;
    z-index: 9;
    pointer-events: none;
    width: 100%;

    .ambientsound {
        position: relative;
        z-index: 10;
        pointer-events: all;
        height: 46px;
        max-width: 100%;
        box-shadow: 0 6px 6px -3px rgba(0, 62, 121, 0.05),
            0 1px 1px -0.5px rgba(0, 62, 121, 0.05),
            0 0 0 1px rgba(0, 62, 121, 0.05),
            0 3px 3px -1.5px rgba(0, 62, 121, 0.05),
            0 12px 12px -6px rgba(0, 62, 121, 0.05),
            0 24px 24px -12px rgba(0, 62, 121, 0.05);
        border-radius: 24px;
        background-color: rgba(255, 255, 255, 1);
        padding: 3px 24px 0 7px;
        transition: max-width .5s;
        animation: float 2s ease infinite;

        .buttontext {
            white-space: nowrap;
            max-width: 400px;
            font-size: 18px;
            overflow: hidden;
            padding: 7px 0 0 46px;
            transition: max-width .5s, padding .5s;

            span {
                opacity: 1;
                transition: opacity .4s;
            }
        }

        .anmation {
            display: none;
            width: 40px;
            height: 40px;
            background: #cb7270;
            border-radius: 24px;
            position: absolute;
            top: 0;
            filter: blur(2px);
        }

        &.scroll {
            margin-left: 7px;
            height: 40px;
            max-width: 40px;
            padding: 0;
            animation: none;

            .buttontext {
                max-width: 40px;
                padding: 7px 0 0 0;

                span {
                    opacity: 0;
                }
            }

            .anmation {
                display: block;
                animation: circle 1.5s infinite linear;
            }

        }

        button {
            width: 40px;
            height: 40px;
            background: white;
            border: none;
            border-radius: 24px;
            position: absolute;
            z-index: 10;
            padding-left: 4px;
        }
    }
}

@media (max-width: 767.98px) {
    .ambientsound-container {
        top: 230px;
    }
}