/* ==========================================================
   FIBERPAY
   ANIMACIONES
========================================================== */


/* ===========================================
   APARICIÓN
=========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .45s ease;

}


/* ===========================================
   FADE
=========================================== */

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade{

    animation:fade .35s ease;

}


/* ===========================================
   ESCALA
=========================================== */

@keyframes scale{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.scale{

    animation:scale .30s ease;

}


/* ===========================================
   SPINNER
=========================================== */

.spinner{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    border:6px solid #E5ECF5;

    border-top:6px solid var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/* ===========================================
   CHECK
=========================================== */

.check{

    width:100px;

    height:100px;

    margin:auto;

    border-radius:50%;

    background:var(--success);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:55px;

    animation:checkAnimation .45s ease;

}

@keyframes checkAnimation{

    0%{

        transform:scale(.4);

        opacity:0;

    }

    70%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/* ===========================================
   SHAKE
=========================================== */

.shake{

    animation:shake .35s;

}

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-6px);

    }

    40%{

        transform:translateX(6px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

    100%{

        transform:translateX(0);

    }

}


/* ===========================================
   HOVER CARDS
=========================================== */

.card{

    transition:.35s;

}

.card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}


/* ===========================================
   BOTONES
=========================================== */

.btn{

    transition:.25s;

}

.btn:active{

    transform:scale(.98);

}