.crab-cb {
    position: fixed;
    bottom: 8%;
    left: 18px;
    z-index: 9;
}

.bubble-button img {
    height: 50px;
}

div#crab-container {
    position: relative;
}

.wrapper-bubbles {
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
}

.wrapper-bubbles a {
    width: 30px !important;
    height: 30px !important;
    display: block;
    position: absolute;
}

.wrapper-bubbles a i {
    padding: 5px;
    border-radius: 25px;
    width: 30px;
    height: 29px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    background-repeat: no-repeat;
    border-bottom: none !important;
    box-shadow: 5px 5px 10px #00000033;
    color: white;
}

.wrapper-bubbles a {
    text-decoration: none !important;
}

.wrapper-bubbles a {
    opacity: 0;
}

.wrapper-bubbles .show {
    opacity: 1;
}

/**** BUBBLES ****/
a.bubble-skype.show {
    transform: translate(0px, -88px);
    visibility: visible;
}

a.bubble-whatsapp.show {
    transform: translate(59px, -46px);
    visibility: visible;
}

a.bubble-facetime.show {
    transform: translate(40px, -81px);
    visibility: visible;
}

a.bubble-zoom.show {
    transform: translate(49px, -9px);
    visibility: visible;
}

/*********/

a.bubble-skype {
    transform: translate(0, 0);
    visibility: hidden;
}

a.bubble-whatsapp {
    transform: translate(0, 0x);
    visibility: hidden;
}

a.bubble-facetime {
    transform: translate(0, 0x);
    visibility: hidden;
}

a.bubble-zoom {
    transform: translate(0, 0);
    visibility: hidden;
}

/****** BUBBLES COLOR ******/
a.bubble-skype i {
    background: #00b1f4;
}

a.bubble-facetime i {
    background: #00ef49;
    font-size: 15px;
}

a.bubble-whatsapp i {
    background: #00cc52;
}

a.bubble-zoom i {
    background: #2ea1fd;
    font-size: 15px;
}


/************************/
.bubble-button:hover {
    cursor: pointer;
}

.bubble-button:hover img {
    transform: scale(1.2);
    transition: all .3s;
}

.bubble-button img {
    transition: all .3s;
    transform: scale(1);
}

.wrapper-bubbles a:hover i {
    transition: all .15s;
    transform: scale(1.2);
}

.wrapper-bubbles a i {
    transition: all .4s;
    transform: scale(1);
}


/************************/


@media only screen and (max-width: 767px) {

    .crab-cb {
        bottom: 65px;
    }

}