﻿#btn-wpp_1 {
    position: fixed;
    bottom: 25px;
    right: 25px;
}

    #btn-wpp_1 i {
        font-size: 25px;
        color: #FFF;
        background-color: #3ddd59;
        padding: 14px 16px;
        border-radius: 50%;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.52);
        animation-name: animacaoBotao;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

#btn-wpp_2 {
    position: fixed;
    bottom: 25px;
    left: 25px;
}

    #btn-wpp_2 i {
        font-size: 25px;
        color: #FFF;
        background-color: #3ddd59;
        padding: 14px 16px;
        border-radius: 50%;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.52);
        animation-name: animacaoBotao2;
        animation-duration: 5s;
        animation-iteration-count: infinite;
    }

#btn-wpp_3 {
    position: fixed;
    top: 150px;
    left: 10px;
    width: auto;
    z-index: 1;
}

    #btn-wpp_3 a {
        color: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

    #btn-wpp_3 i {
        font-size: 25px;
        color: #FFF;
        background-color: #1565C0;
        padding: 17px 16px;
        border-radius: 50%;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.60);
        animation-name: animacaoBotao3;
        animation-duration: 7s;
        animation-iteration-count: infinite;
        z-index: 1;
        position: relative;
    }


    #btn-wpp_3 label {
        color: transparent;
        background-color: #1E88E5;
        animation-duration: 7s;
        animation-name: animacaoTexto;
        animation-iteration-count: infinite;
        transform: translateX(-15px);
        z-index: -1;
        margin: 0;
        height: 36px;
        border-radius: 5px;
        text-align: center;
        padding-top: 7px;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: .6px;
    }



#btn-wpp_4 {
    font-size: 14px;
    position: fixed;
    bottom: 30px;
    right: 25px;
    width: 135px;
    background-color: #c28f69;
    border-radius: 5px;
    text-align: center;
    color: #FFF;
    padding: 5px 0 10px 0px;
    text-transform: uppercase;
    animation-name: animacaoBotao;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    letter-spacing: .6px;
    z-index: 1;
    cursor: pointer;
    font-family: 'Andis Regular';
}

    #btn-wpp_4 i {
        font-size: 25px;
        transform: translateY(3px);
        padding-left: 5px;
    }

    #btn-wpp_4:hover {
        text-decoration: none;
        background-color: #ce9467;
    }





@keyframes animacaoBotao {
    0% {
        transform: scale(1);
    }

    42% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    53% {
        transform: scale(1.2);
    }

    61% {
        transform: scale(1);
    }
}



@keyframes animacaoTexto {
    0% {
        width: 0px;
    }

    12% {
        width: 0px;
    }

    20% {
        width: 180px;
        color: transparent;
    }

    22% {
        color: #FFF;
    }

    80% {
        color: #FFF;
        width: 180px;
    }

    86% {
        color: transparent;
    }

    88% {
        width: 0px;
    }

    100% {
        width: 0px;
    }
}

@keyframes animacaoBotao3 {
    0% {
        transform: scale(0);
    }

    10% {
        transform: scale(1.2);
    }

    15% {
        transform: scale(1);
    }

    85% {
        transform: scale(1);
    }

    95% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0);
    }
}


@keyframes animacaoBotao {
    0% {
        transform: scale(1);
    }

    42% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    53% {
        transform: scale(1.2);
    }

    61% {
        transform: scale(1);
    }
}

@keyframes animacaoBotao2 {
    0% {
        transform: scale(0);
    }

    4% {
        transform: scale(1.2);
    }

    6% {
        transform: scale(1);
    }

    94% {
        transform: scale(1);
    }

    96% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0);
    }
}
