:root {
    --vs-gn-transition: all 600ms cubic-bezier(0, 0, 0.5, 1);
}

/* ---- ANIMATIONS PUNCH BTN  ---- */
.vs-section .vs-punch-btn__wrapper.vs-punch-btn__mobile,
.vs-section .vs-punch-btn__wrapper.vs-punch-btn__desktop {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1500ms cubic-bezier(0.40,0.00,0.20,1.00);
}

.vs-section .vs-animate.vs-punch-btn__wrapper.vs-punch-btn__mobile,
.vs-section .vs-animate.vs-punch-btn__wrapper.vs-punch-btn__desktop {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 1024px) {
    .vs-section .vs-punch-btn__wrapper.vs-punch-btn__desktop {
        transition-delay: 500ms;
    }
}

/* ---- ANIMATIONS FADE IN UP - PAGE LOAD ---- */
/* ---- ANIMATIONS HEROES ---- */
/* ---- Delete general configuration ---- */
.vs-section.tpl-hero .vs-wrapper--fluid .vs-component--fluid {
    transform: none;
    opacity: 1;
}

.vs-animate.vs-section.tpl-hero .vs-wrapper--fluid .vs-component--fluid {
    transform: none;
}

/* ---- Fade in up - page load ---- */
.vs-section.tpl-hero .vs-fade-in-up__load {
    opacity: 0;
    transform: translateY(48px);
    transition:
            opacity 600ms cubic-bezier(0, 0, 0.5, 1),
            transform 1000ms cubic-bezier(0, 0, 0.5, 1);
}

.vs-animate.vs-section.tpl-hero .vs-fade-in-up__load {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 744px) {
    .vs-section.tpl-hero .vs-fade-in-up__load {
        transition:
                opacity 100ms cubic-bezier(0, 0, 0.5, 1),
                transform 600ms cubic-bezier(0, 0, 0.5, 1);
    }
}