.bonwhatsapp {
    bottom: 20px;
    border-radius: 50px;
    text-align: center;
    padding: 9px;
    outline: none;
    text-decoration: none;
    border: none;
    box-shadow: none;
    position: fixed;
    width: 60px;
    height: 60px;
    margin: 0px;
    line-height: normal;
    z-index: 9999;
}

@-webkit-keyframes tada {
    0% {-webkit-transform:scale(1)}
    10%, 20% {-webkit-transform:scale(0.9) rotate(-3deg)}
    30%, 50%, 70%, 90% {-webkit-transform:scale(1.1) rotate(3deg)}
    40%, 60%, 80% {-webkit-transform:scale(1.1) rotate(-3deg)}
    100% {-webkit-transform:scale(1) rotate(0)}
}

@-moz-keyframes tada {
    0% {-moz-transform:scale(1)}
    10%,20% {-moz-transform:scale(0.9) rotate(-3deg)}
    30%, 50%, 70%, 90% {-moz-transform:scale(1.1) rotate(3deg)}
    40%, 60%, 80% {-moz-transform:scale(1.1) rotate(-3deg)}
    100% {-moz-transform:scale(1) rotate(0)}
}

@-o-keyframes tada {
    0% {-o-transform:scale(1)}
    10%,20% {-o-transform:scale(0.9) rotate(-3deg)}
    30%, 50%, 70%, 90% {-o-transform:scale(1.1) rotate(3deg)}
    40%, 60%, 80% {-o-transform:scale(1.1) rotate(-3deg)}
    100% {-o-transform:scale(1) rotate(0)}
}

@keyframes tada {
    0% {transform:scale(1)}
    10%, 20% {transform:scale(0.9) rotate(-3deg)}
    30%, 50%, 70%, 90% {transform:scale(1.1) rotate(3deg)}
    40%, 60%, 80% {transform:scale(1.1) rotate(-3deg)}
    100% {transform:scale(1) rotate(0)}
}

.bon_tada{
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    -o-animation-timing-function: ease;
    animation-timing-function: ease;
}

.bon_tada:hover{
    -webkit-animation-name: tada;
    -moz-animation-name: tada;
    -o-animation-name: tada;
    animation-name: tada;
}


@-webkit-keyframes swing{
    15%{-webkit-transform: translateX(5px);transform: translateX(5px);}
    30%{-webkit-transform: translateX(-5px);transform: translateX(-5px);}
    50%{-webkit-transform: translateX(3px);transform: translateX(3px);}
    65%{-webkit-transform: translateX(-3px);transform: translateX(-3px);}
    80%{-webkit-transform: translateX(2px);transform: translateX(2px);}
    100%{-webkit-transform: translateX(0);transform: translateX(0);}
}

@keyframes swing{
    15%{-webkit-transform: translateX(5px);transform: translateX(5px);}
    30%{-webkit-transform: translateX(-5px);transform: translateX(-5px);}
    50%{-webkit-transform: translateX(3px);transform: translateX(3px);}
    65%{-webkit-transform: translateX(-3px);transform: translateX(-3px);}
    80%{-webkit-transform: translateX(2px);transform: translateX(2px);}
    100%{-webkit-transform: translateX(0);transform: translateX(0);}
}

.bon_swing:hover{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes bon_buzz{
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}
@keyframes bon_buzz{
    10% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    20% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    30% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }
    40% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
    50% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    60% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    70% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }
    80% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }
    90% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }
    100% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.bon_buzz {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
}

.bon_buzz:hover, .bon_buzz:focus, .bon_buzz:active {
    -webkit-animation-name: bon_buzz;
    animation-name: bon_buzz;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.bon_backward {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.bon_backward:hover, .bon_backward:focus, .bon_backward:active {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
}



@-webkit-keyframes rotate {
    20% {-webkit-transform: rotate3d(0, 0, 1, 15deg);}
    40% {-webkit-transform: rotate3d(0, 0, 1, -10deg);}
    60% {-webkit-transform: rotate3d(0, 0, 1, 5deg);}
    80% {-webkit-transform: rotate3d(0, 0, 1, -5deg);}
    100% {-webkit-transform: rotate3d(0, 0, 1, 0deg);}
}

@-moz-keyframes rotate {
    20% {-moz-transform: rotate3d(0, 0, 1, 15deg);}
    40% {-moz-transform: rotate3d(0, 0, 1, -10deg);}
    60% {-moz-transform: rotate3d(0, 0, 1, 5deg);}
    80% {-moz-transform: rotate3d(0, 0, 1, -5deg);}
    100% {-moz-transform: rotate3d(0, 0, 1, 0deg);}
}

@-o-keyframes rotate {
    20% {-o-transform: rotate3d(0, 0, 1, 15deg);}
    40% {-o-transform: rotate3d(0, 0, 1, -10deg);}
    60% {-o-transform: rotate3d(0, 0, 1, 5deg);}
    80% {-o-transform: rotate3d(0, 0, 1, -5deg);}
    100% {-o-transform: rotate3d(0, 0, 1, 0deg);}
}

@keyframes rotate {
    20% {transform: rotate3d(0, 0, 1, 15deg);}
    40% {transform: rotate3d(0, 0, 1, -10deg);}
    60% {transform: rotate3d(0, 0, 1, 5deg);}
    80% {transform: rotate3d(0, 0, 1, -5deg);}
    100% {transform: rotate3d(0, 0, 1, 0deg);}
}

.bon_rotate:hover{
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;

    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
}