/* ==========================================
   ANIMATIONEN
========================================== */

/* -----------------------------
   Fade In von unten
----------------------------- */

@keyframes fadeUp {

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* -----------------------------
   Fade In von oben
----------------------------- */

@keyframes fadeDown {

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* -----------------------------
   Zoom
----------------------------- */

@keyframes zoomIn {

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* -----------------------------
   Hero
----------------------------- */

.hero-content{

    animation:zoomIn .9s ease forwards;

}

/* -----------------------------
   Karten
----------------------------- */

.cards .card{

    opacity:0;

    animation:fadeUp .7s ease forwards;

}

/* Verzögerung */

.cards .card:nth-child(1){

    animation-delay:.2s;

}

.cards .card:nth-child(2){

    animation-delay:.45s;

}

.cards .card:nth-child(3){

    animation-delay:.7s;

}

/* -----------------------------
   Footer
----------------------------- */

footer{

    animation:fadeUp .8s ease;

}

/* -----------------------------
   Hover
----------------------------- */

.card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.card:hover{

    border-color:rgba(0,157,255,.45);

}