/*=========================================================
PROYECTO : CAMPUS VIRTUAL ESCUELA DE OFICIOS

ARCHIVO : animations.css

VERSIÓN : 0.1
=========================================================*/


/*=========================================================
TRANSICIONES GENERALES
=========================================================*/

*{

    transition:.35s ease;

}


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

.fade-up{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp 1s forwards;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    animation:fadeLeft .9s forwards;

}

@keyframes fadeLeft{

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*=========================================================
LOGO
=========================================================*/

.hero-video video{

    animation:logoEntrada 2s ease;

}

@keyframes logoEntrada{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*=========================================================
BOTÓN PRINCIPAL
=========================================================*/

.btn-principal:hover{

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}


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

.card:hover{

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}


/*=========================================================
GALERÍA
=========================================================*/

.foto{

    cursor:pointer;

}

.foto img{

    transition:.60s;

}


/*=========================================================
MARQUESINA
=========================================================*/

.slide{

    animation:fadeTexto .8s;

}

@keyframes fadeTexto{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================
SCROLL SUAVE
=========================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================================
FINAL
=========================================================*/