/*==========================================================
            ANIMACIONES AL HACER SCROLL
==========================================================*/

.reveal,
.fade-in,
.animate-on-scroll{

    opacity:0;

    transform:translateY(40px);

    transition:opacity .8s ease, transform .8s ease;

}


.reveal.visible,
.fade-in.visible,
.animate-on-scroll.visible{

    opacity:1;

    transform:translateY(0);

}


/*==========================================================
            BOTON VOLVER ARRIBA
==========================================================*/

.toTop{

    position:fixed;

    right:25px;

    bottom:100px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:var(--azul);

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.4s;

    z-index:900;

}

.toTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*==========================================================
            BOTON WHATSAPP
==========================================================*/

.whatsApp{

    position:fixed;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border-radius:50% 0 0 50%;

    background:#25D366;

    color:#FFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    box-shadow:-4px 4px 20px rgba(37,211,102,.4);

    transition:.35s;

    z-index:900;

}

.whatsApp:hover{

    transform:translateY(-50%) scale(1.1);

    width:60px;

}

/*==========================================================
            MOVIL
==========================================================*/

@media (max-width:576px){

    .toTop{
        right:15px;
        bottom:85px;
        width:44px;
        height:44px;
    }

    .whatsApp{
        width:50px;
        height:50px;
        font-size:25px;
    }

}