.bubbleWrap {
    display: flex;
    width: 80px;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    color: rgb(0, 0, 0);
    border-radius: 50%;
    background-image: url('images/icon_Roger365.png');
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.bubbleWrap__bubbleChat {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    -webkit-box-align: center;
    align-items: center;
    align-content: center;
    -webkit-box-pack: center;
    justify-content: center;
    transform: scale(1);
    transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 50ms;
}

.bubbleChat-svg {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    font-size: 32px;
    user-select: none;
    transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 50ms;
}

.bubbleWrap:hover .bubbleChat-svg {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    transform: scale(1.25);
    transition: transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 50ms;
}

.bubbleWrap__bullets {
    position: absolute;
    z-index: 1001;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    display: flex;
    width: 32px;
    height: 32px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 150ms cubic-bezier(0.33, 0, 0.67, 1) 50ms;
    pointer-events: none;
}


.bubbleWrap:hover .bubbleWrap__bullets,
.bubbleWrap__bullets.visible {
    opacity: 1;
}

.bubbleWrap__bullets .sc-circle1 {
    transform-origin: 50% 50%;
    /* animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state; */
    -webkit-animation: animation-circle1 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Safari 4+ */
    -moz-animation: animation-circle1 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Fx 5+ */
    -o-animation: animation-circle1 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Opera 12+ */
    animation: animation-circle1 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* IE 10+, Fx 29+ */
}

.bubbleWrap__bullets .sc-circle2 {
    transform-origin: 50% 50%;
    -webkit-animation: animation-circle2 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Safari 4+ */
    -moz-animation: animation-circle2 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Fx 5+ */
    -o-animation: animation-circle2 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Opera 12+ */
    animation: animation-circle2 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* IE 10+, Fx 29+ */
}

.bubbleWrap__bullets .sc-circle3 {
    transform-origin: 50% 50%;
    -webkit-animation: animation-circle3 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Safari 4+ */
    -moz-animation: animation-circle3 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Fx 5+ */
    -o-animation: animation-circle3 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* Opera 12+ */
    animation: animation-circle3 1s cubic-bezier(0, 0, 1, 1) 0s alternate 1; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes animation-circle1 {
    0%, 66.67%, 100% {
        -webkit-transform: translate(0px, 0px);
    }

    6.67% {
        -webkit-transform: translate(0px, -8px);
    }

    13.33%, 20% {
        -webkit-transform: translate(0px, -10px);
    }

    26.67% {
        -webkit-transform: translate(0px, -6px);
    }

    33.33% {
        -webkit-transform: translate(0px, -2px);
    }

    40% {
        -webkit-transform: translate(0px, 3px);
    }

    46.67% {
        -webkit-transform: translate(0px, 2px);
    }

    53.33% {
        -webkit-transform: translate(0px, -1px);
    }
}

@-moz-keyframes animation-circle1 {
    0%, 66.67%, 100% {
        -moz-transform: translate(0px, 0px);
    }

    6.67% {
        -moz-transform: translate(0px, -8px);
    }

    13.33%, 20% {
        -moz-transform: translate(0px, -10px);
    }

    26.67% {
        -moz-transform: translate(0px, -6px);
    }

    33.33% {
        -moz-transform: translate(0px, -2px);
    }

    40% {
        -moz-transform: translate(0px, 3px);
    }

    46.67% {
        -moz-transform: translate(0px, 2px);
    }

    53.33% {
        -moz-transform: translate(0px, -1px);
    }
}

@-o-keyframes animation-circle1 {
    0%, 66.67%, 100% {
        -o-transform: translate(0px, 0px);
    }

    6.67% {
        -o-transform: translate(0px, -8px);
    }

    13.33%, 20% {
        -o-transform: translate(0px, -10px);
    }

    26.67% {
        -o-transform: translate(0px, -6px);
    }

    33.33% {
        -o-transform: translate(0px, -2px);
    }

    40% {
        -o-transform: translate(0px, 3px);
    }

    46.67% {
        -o-transform: translate(0px, 2px);
    }

    53.33% {
        -o-transform: translate(0px, -1px);
    }
}

@keyframes animation-circle1 {

    0%, 66.67%, 100% {
        transform: translate(0px, 0px);
    }

    6.67% {
        transform: translate(0px, -8px);
    }

    13.33%, 20% {
        transform: translate(0px, -10px);
    }

    26.67% {
        transform: translate(0px, -6px);
    }

    33.33% {
        transform: translate(0px, -2px);
    }

    40% {
        transform: translate(0px, 3px);
    }

    46.67% {
        transform: translate(0px, 2px);
    }

    53.33% {
        transform: translate(0px, -1px);
    }
}

@-webkit-keyframes animation-circle2 {
    0%, 6.67%, 73.33%, 100% {
        -webkit-transform: translate(0px, 0px);
    }

    13.33% {
        -webkit-transform: translate(0px, -8px);
    }

    20%, 26.67% {
        -webkit-transform: translate(0px, -10px);
    }

    33.33% {
        -webkit-transform: translate(0px, -6px);
    }

    40% {
        -webkit-transform: translate(0px, -2px);
    }

    46.67% {
        -webkit-transform: translate(0px, 3px);
    }

    53.33% {
        -webkit-transform: translate(0px, 2px);
    }

    60% {
        -webkit-transform: translate(0px, -1px);
    }
}

@-moz-keyframes animation-circle2 {
    0%, 6.67%, 73.33%, 100% {
        -moz-transform: translate(0px, 0px);
    }

    13.33% {
        -moz-transform: translate(0px, -8px);
    }

    20%, 26.67% {
        -moz-transform: translate(0px, -10px);
    }

    33.33% {
        -moz-transform: translate(0px, -6px);
    }

    40% {
        -moz-transform: translate(0px, -2px);
    }

    46.67% {
        -moz-transform: translate(0px, 3px);
    }

    53.33% {
        -moz-transform: translate(0px, 2px);
    }

    60% {
        -moz-transform: translate(0px, -1px);
    }
}

@-o-keyframes animation-circle2 {
    0%, 6.67%, 73.33%, 100% {
        -o-transform: translate(0px, 0px);
    }

    13.33% {
        -o-transform: translate(0px, -8px);
    }

    20%, 26.67% {
        -o-transform: translate(0px, -10px);
    }

    33.33% {
        -o-transform: translate(0px, -6px);
    }

    40% {
        -o-transform: translate(0px, -2px);
    }

    46.67% {
        -o-transform: translate(0px, 3px);
    }

    53.33% {
        -o-transform: translate(0px, 2px);
    }

    60% {
        -o-transform: translate(0px, -1px);
    }
}

@keyframes animation-circle2 {
    0%, 6.67%, 73.33%, 100% {
        transform: translate(0px, 0px);
    }

    13.33% {
        transform: translate(0px, -8px);
    }

    20%, 26.67% {
        transform: translate(0px, -10px);
    }

    33.33% {
        transform: translate(0px, -6px);
    }

    40% {
        transform: translate(0px, -2px);
    }

    46.67% {
        transform: translate(0px, 3px);
    }

    53.33% {
        transform: translate(0px, 2px);
    }

    60% {
        transform: translate(0px, -1px);
    }
}

@-webkit-keyframes animation-circle3 {
    0%, 13.33%, 80%, 100% {
        -webkit-transform: translate(0px, 0px);
    }

    20% {
        -webkit-transform: translate(0px, -8px);
    }

    26.67%, 33.33% {
        -webkit-transform: translate(0px, -10px);
    }

    40% {
        -webkit-transform: translate(0px, -6px);
    }

    46.67% {
        -webkit-transform: translate(0px, -2px);
    }

    53.33% {
        -webkit-transform: translate(0px, 3px);
    }

    60% {
        -webkit-transform: translate(0px, 2px);
    }

    66.67% {
        -webkit-transform: translate(0px, -1px);
    }
}

@-moz-keyframes animation-circle3 {
    0%, 13.33%, 80%, 100% {
        -moz-transform: translate(0px, 0px);
    }

    20% {
        -moz-transform: translate(0px, -8px);
    }

    26.67%, 33.33% {
        -moz-transform: translate(0px, -10px);
    }

    40% {
        -moz-transform: translate(0px, -6px);
    }

    46.67% {
        -moz-transform: translate(0px, -2px);
    }

    53.33% {
        -moz-transform: translate(0px, 3px);
    }

    60% {
        -moz-transform: translate(0px, 2px);
    }

    66.67% {
        -moz-transform: translate(0px, -1px);
    }
}

@-o-keyframes animation-circle3 {
    0%, 13.33%, 80%, 100% {
        -o-transform: translate(0px, 0px);
    }

    20% {
        -o-transform: translate(0px, -8px);
    }

    26.67%, 33.33% {
        -o-transform: translate(0px, -10px);
    }

    40% {
        -o-transform: translate(0px, -6px);
    }

    46.67% {
        -o-transform: translate(0px, -2px);
    }

    53.33% {
        -o-transform: translate(0px, 3px);
    }

    60% {
        -o-transform: translate(0px, 2px);
    }

    66.67% {
        -o-transform: translate(0px, -1px);
    }
}

@keyframes animation-circle3 {
    0%, 13.33%, 80%, 100% {
        transform: translate(0px, 0px);
    }

    20% {
        transform: translate(0px, -8px);
    }

    26.67%, 33.33% {
        transform: translate(0px, -10px);
    }

    40% {
        transform: translate(0px, -6px);
    }

    46.67% {
        transform: translate(0px, -2px);
    }

    53.33% {
        transform: translate(0px, 3px);
    }

    60% {
        transform: translate(0px, 2px);
    }

    66.67% {
        transform: translate(0px, -1px);
    }
}