.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

img {
    max-width: 100%;
    border: 0;
}
.whatsApp {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 100;
    width: 81px;
    height: 70px
}

.whatsApp_img {
    position: relative;
    z-index: 2;
    bottom: 60px;
}

.whatsApp .circleIconPanel {
    width: 265px;
    height: 50px;
    border-radius: 25px;
    z-index: 1;
    position: fixed;
    left: 30px;
    bottom: 78px;
    opacity: 0;
    text-align: start;
    padding: 8px 20px 7px 50px;
    font: normal normal 600 12px/17px Poppins;
    letter-spacing: 0;
    color: #fff;
    background: #2db642 0 0 no-repeat padding-box;
    background-image: url(whatsappmess.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain
}

.whatsApp .circleIconPanel.showMessage {
    opacity: 1;
    -webkit-animation: showMessage 1s linear;
    animation: showMessage 1s linear
}

.whatsApp .circleIconPanel.hideMessage {
    opacity: 0;
    -webkit-animation: hideMessage 1s linear;
    animation: hideMessage 1s linear;
    width: 0
}

@-webkit-keyframes showMessage {
    0%,25% {
        opacity: 0;
        width: 0
    }

    to {
        opacity: 1;
        width: 265px
    }
}

@keyframes showMessage {
    0%,25% {
        opacity: 0;
        width: 0
    }

    to {
        opacity: 1;
        width: 265px
    }
}

@-webkit-keyframes hideMessage {
    0% {
        opacity: 1;
        width: 265px
    }

    80%,to {
        opacity: 0;
        width: 0
    }
}

@keyframes hideMessage {
    0% {
        opacity: 1;
        width: 265px
    }

    80%,to {
        opacity: 0;
        width: 0
    }
}