/*=====================================================
ANIMACIONES
Power Visual Data
======================================================*/

/* Fade Up */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* Fade Left */

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:all .8s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/* Fade Right */

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:all .8s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* Zoom */

.zoom{

    opacity:0;

    transform:scale(.8);

    transition:all .8s ease;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

/* Hero flotando */

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.hero-image{

animation:floating 5s ease-in-out infinite;

}

/* Botones */

.btn-primary{

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(37,99,235,.30);

}

.btn-secondary{

transition:.35s;

}

.btn-secondary:hover{

transform:translateY(-6px);

}

/* Cards */

.dashboard-card,
.benefit-card,
.cards article,
.success-card,
.tech-card,
.sector-card,
.step{

transition:.35s;

}

.dashboard-card:hover,
.benefit-card:hover,
.cards article:hover,
.success-card:hover,
.tech-card:hover,
.sector-card:hover,
.step:hover{

transform:translateY(-12px);

}

/* Aparición */

@keyframes appear{

from{

opacity:0;

}

to{

opacity:1;

}

}

body{

animation:appear .7s;

}