.animation {
    overflow: hidden;
}

.hl-stepper .page {
    border-radius: 0.375rem;
    overflow: hidden;
}

.hl-stepper .page:not(.fade) {
    display: none;
}

.hl-stepper .page.fade {
    opacity: 0;
}

/* Without having the browser re-painting the element https://cloudfour.com/thinks/transitioning-hidden-elements/#showing-our-drawer, we can't change the "display" property this because of what is talked about below.  To summarize: If you even toggle the display property from none to block without first having the browser re-paint the element, your transition on other elements will not occur. */
/* https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property */
.hl-stepper .page.collapse-page {
    display: none;
}

.hl-stepper .page.active {
    opacity: 1;
    display: block;
    height: auto;
}