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

/* Fade In */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Fade Left */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Fade Right */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Zoom */

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.90);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================================================
   HERO
========================================================== */

.hero-text{

    animation:fadeLeft 1s ease;

}

.hero-image{

    animation:fadeRight 1.2s ease;

}

/* ==========================================================
   EMPRESA
========================================================== */

.empresa{

    animation:fadeUp 1s ease;

}

/* ==========================================================
   BOTÕES
========================================================== */

.btn-primary,
.btn-secondary,
.btn-portal{

    transition:all .35s ease;

}

.btn-primary:hover,
.btn-secondary:hover,
.btn-portal:hover{

    transform:translateY(-4px);

}

/* ==========================================================
   LINKS
========================================================== */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#4fc3ff;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

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

.logo img{

    transition:.4s;

}

.logo img:hover{

    transform:scale(1.05);

}

/* ==========================================================
   IMAGENS
========================================================== */

.hero-image img{

    animation:zoom 1.5s ease;

}