:root {
    /* Animation Timing Function */
    --primary-timing-func: cubic-bezier(0.86, 0, 0.07, 1);
    /* Button Variables */
    --button-radius: 60px;
    --button-inner-ring-radius: 120px;
    --button-outer-ring-radius: 100px;
    --button-gradient: 135deg, rgba(204, 152, 0,1) 0%, rgba(204, 152, 0,1) 100%;
    --main-background-color: #edc1c2;
    /* Menu Variables */
    --menu-radius: calc(var(--button-radius) - 2px);
    --menu-height: 255px;
    --menu-width: 245px;
    --menu-border-radius: 10px;
    --menu-bg-color: #fdedc0;
    --menu-timing-function: var(--primary-timing-func);
    --menu-icon-size: 30px;
    /*   Close Icon */
    --close-icon-timing-function: var(--primary-timing-func);
}

.sticky-menu-container {
    position: fixed;
    right: calc(var(--button-radius));
    bottom: calc(var(--button-radius));
    
    /*bottom: calc(40px);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

    .sticky-menu-container .outer-button {
        position: absolute;
        height: var(--button-radius, 70px);
        width: var(--button-radius, 70px);
        border-radius: 50%;
        background: rgb(244,87,116);
        background: -moz-linear-gradient(var(--button-gradient));
        background: -webkit-linear-gradient(var(--button-gradient));
        background: linear-gradient(var(--button-gradient));
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.2);
        cursor: pointer;
    }

        .sticky-menu-container .outer-button .icon-container {
            height: inherit;
            width: inherit;
            border-radius: inherit;
            display: inherit;
            align-items: inherit;
            justify-content: inherit;
            overflow: hidden;
            position: relative;
            cursor: inherit;
        }

        .sticky-menu-container .outer-button .close-icon {
            transform: scale(0) rotate(-270deg);
            opacity: 0;
            height: 25px;
            width: 25px;
            position: absolute;
            fill: #FFFFFF;
        }

        .sticky-menu-container .outer-button .arrow-icon {
            height: 25px;
            width: 25px;
            position: absolute;
            fill: #FFFFFF;
        }

            .sticky-menu-container .outer-button .arrow-icon.hiding-spot {
                transform: translateX(calc(var(--button-radius) / -2)) translateY(calc(var(--button-radius) / 2));
                opacity: 0;
            }

        .sticky-menu-container .outer-button .close-icon.show {
            animation-duration: 1000ms;
            animation-name: close-in;
            animation-fill-mode: forwards;
            animation-timing-function: var(--close-icon-timing-function);
        }

        .sticky-menu-container .outer-button .close-icon.hide {
            animation-duration: 1000ms;
            animation-name: close-out;
            animation-timing-function: var(--close-icon-timing-function);
        }

        .sticky-menu-container .outer-button .arrow-icon.show {
            opacity: 0;
            animation-duration: 1000ms;
            animation-name: arrow-in;
            animation-fill-mode: forwards;
            animation-timing-function: var(--close-icon-timing-function);
            /*   animation-delay: 250ms; */
        }

        .sticky-menu-container .outer-button .arrow-icon.hide {
            animation-duration: 1000ms;
            animation-name: arrow-out;
            animation-fill-mode: forwards;
            animation-timing-function: var(--close-icon-timing-function);
        }

        .sticky-menu-container .outer-button::after, sticky-menu-container.outer-button::before {
            position: absolute;
            display: inline-block;
            content: "";
            height: var(--button-inner-ring-radius);
            width: var(--button-inner-ring-radius);
            border-radius: 50%;
            background-color: transparent;
            border: 0px solid rgba(255,255,255,0.5);
            opcacity: 0;
            cursor: pointer;
        }

        .sticky-menu-container .outer-button.clicked::after {
            animation-duration: 500ms;
            animation-name: touch-click-inner;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        .sticky-menu-container .outer-button::before {
            height: var(--button-outer-ring-radius);
            width: var(--button-outer-ring-radius);
        }

        .sticky-menu-container .outer-button.clicked::before {
            animation-name: touch-click-outer;
            animation-duration: 500ms;
            animation-iteration-count: 1;
            animation-delay: 250ms;
        }

    .sticky-menu-container .inner-menu {
        position: absolute;
        height: var(--menu-height);
        width: var(--menu-width);
        border-radius: var(--menu-border-radius);
        background-color: var(--menu-bg-color);
        /*   transform: translate(calc(-50% + var(--button-radius) / 2), calc(-55% - var(--button-radius) / 2)); */
        transform: translateX(-91px) translateY(-169px);
        transition: all 1000ms cubic-bezier(0.86, 0, 0.07, 1);
        /*   transition-delay: 500ms; */
        padding: 30px;
        overflow: hidden;
        box-shadow: 10px 10px 18px 5px rgba(0,0,0,0.4);
    }

        .sticky-menu-container .inner-menu > ul {
            height: 100%;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            margin: 0;
            padding: 0;
        }

        .sticky-menu-container .inner-menu > .menu-list > .menu-item {
            color: #FFFFFF;
            text-transform: uppercase;
            letter-spacing: 3px;
            width: 100%;
            display: flex;
            align-items: center;
        }

        .sticky-menu-container .inner-menu > .menu-list > .menu-item {
            overflow: hidden;
        }

            .sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon {
                margin-right: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-icon > svg {
                    height: var(--menu-icon-size);
                    width: var(--menu-icon-size);
                }

        .sticky-menu-container .inner-menu.closed {
            height: var(--menu-radius);
            width: var(--menu-radius);
            border-radius: 50%;
            padding: 0;
            transform: unset;
        }

        .sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text {
            /*opacity: 0;*/
        }

            .sticky-menu-container .inner-menu > .menu-list > .menu-item > .item-text.text-in {
                animation-duration: 1500ms;
                animation-name: text-in;
                animation-fill-mode: forwards;
                animation-timing-function: var(--close-icon-timing-function);
            }

        .sticky-menu-container .inner-menu > .menu-list > .menu-item.text-hides {
            animation-duration: 200ms;
            animation-name: text-hides;
            animation-fill-mode: forwards;
            animation-timing-function: var(--close-icon-timing-function);
        }

@keyframes touch-click-inner {
    50% {
        transform: scale(0.375);
        border-width: 30px;
        opacity: 1;
    }

    100% {
        transform: scale(1);
        border-width: 1px;
        opacity: 0;
    }
}

@keyframes touch-click-outer {
    0% {
        border-width: 10px;
        opacity: 0;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

@keyframes close-in {
    0% {
        transform:  scale(0) rotate(270deg);
        opacity: 0;
    }

    100% {
        transform: scale(1.1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes close-out {
    0% {
        transform: scale(1.1) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(270deg);
        opacity: 0;
    }
}

@keyframes arrow-out {
    0% {
        transform: translateX(0) translateY(0);
    }

    100% {
        transform: translateX(calc(var(--button-radius) / 1.5)) translateY(calc(var(--button-radius) / -1.5));
    }
}

@keyframes arrow-in {
    0% {
        transform: translateX(calc( -1 * var(--button-radius))) translateY(calc(var(--button-radius)));
        opacity: 0;
    }

    100% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

@keyframes text-in {
    0% {
        opcaity: 1;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes text-hides {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}