/*
=========================================================
ANIMAÇÕES
=========================================================
*/

.fade-in{

    animation:fadeIn .45s ease forwards;

}

.fade-out{

    animation:fadeOut .35s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(16px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeOut{

    from{

        opacity:1;
        transform:translateY(0);

    }

    to{

        opacity:0;
        transform:translateY(-16px);

    }

}

.progress-dot{

    transition:.30s;

}
/* ======================================
   Entrada
====================================== */

.fade-in{

    animation:fadeIn .35s ease forwards;

}


/* ======================================
   Saída
====================================== */

.fade-out{

    animation:fadeOut .30s ease forwards;

}


/* ======================================
   Keyframes
====================================== */

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


@keyframes fadeOut{

    from{

        opacity:1;
        transform:translateY(0);

    }

    to{

        opacity:0;
        transform:translateY(-12px);

    }

}