/* ==========================================
   MARUWATA WHATSAPP BUTTON
========================================== */

.maruwata-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25D366;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 29px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.20);

    z-index: 9998;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.maruwata-whatsapp:hover {

    color: #ffffff;

    transform: translateY(-4px) scale(1.05);

    box-shadow:
        0 12px 30px rgba(0,0,0,.28);

}


/* Tooltip */

.maruwata-whatsapp-tooltip {

    position: absolute;

    right: 70px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    background: #111111;

    color: #ffffff;

    padding: 9px 13px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transition: .25s ease;

}


/* Small arrow */

.maruwata-whatsapp-tooltip::after {

    content: "";

    position: absolute;

    right: -6px;

    top: 50%;

    transform: translateY(-50%);

    border-width: 6px 0 6px 6px;

    border-style: solid;

    border-color:
        transparent
        transparent
        transparent
        #111111;

}


.maruwata-whatsapp:hover
.maruwata-whatsapp-tooltip {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);

}


/* Mobile */

@media(max-width:600px) {

    .maruwata-whatsapp {

        right: 18px;

        bottom: 18px;

        width: 53px;

        height: 53px;

        font-size: 26px;

    }

    .maruwata-whatsapp-tooltip {

        display: none;

    }

}