/* #banner-associe-se, section.tag {
    height: 100vh;
  }
   */
.tag {
    opacity: 0;
    transform: translate(0, 10vh);
    transition: all 1s;
}

.tag.visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ----------------- common animation ----------------- */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ----------------- Seja associado ----------------- */
#seja-associado .col {
    animation: show-up 3s ease-in-out;
}

@keyframes show-up {
    0% {
        transform: translate(0, 17rem);
        opacity: 0;
    }

    50% {
        transform: translate(0, 8rem);
        opacity: 40%;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* ----------------- Formulario ----------------- */
/* #formulario-associe-se .bar-right-first-form::before, #formulario-associe-se .bar-behind-form::before {
    animation: bar-animation-top 3s ease-out;
}

#formulario-associe-se .bar-right-first-form::after, #formulario-associe-se .bar-behind-form::after {
    animation: bar-animation-bottom 3s ease-out;
} */

/* #formulario-associe-se .call-text {
    animation: fade-in 3s linear;
} */



@keyframes bar-animation-top {
    0% {
        transform: translate(0, -40rem);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes bar-animation-bottom {
    0% {
        transform: translate(0, 40rem);
    }

    100% {
        transform: translate(0, 0);
    }
}