.ctn,
.ctn-v2,
.cnt-flush,
.cnt-flush-v2 {
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden;
}

.flush,
.flush-v2 {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 64rem) {

    .ctn {
        overflow: hidden;
        padding-left: 7rem;
        padding-right: 7rem;

    }

    .ctn-v2 {
        overflow: hidden;
        padding-left: 8.43135rem;
        padding-right: 8.43135rem;
    }

    .flush {
        overflow: hidden;
        padding-left: 7rem;
        padding-right: 7rem;
    }

    .flush-v2 {
        overflow: hidden;
        padding-left: 8.43135rem;
        padding-right: 8.43135rem;
    }
}

/* Font family helpers */
.font-bevietnam,
.font-be-vietnam {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.font-be-vietnam-base {
    font-family: 'Be Vietnam', sans-serif;
}

.font-fs-magistral {
    font-family: 'FS Magistral', sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Contact Form Submit Button Animations                                      */
/* -------------------------------------------------------------------------- */

.contact-orig-text.anim-out {
    animation: origSubmit 0.9s ease-in-out forwards;
}

.contact-orig-text.anim-in {
    animation: origRevert 0.9s ease-in-out forwards;
}

@keyframes origSubmit {
    0% {
        max-width: 9.125rem;
        opacity: 1;
    }

    33.33% {
        max-width: 9.125rem;
        opacity: 0;
    }

    100% {
        max-width: 0;
        opacity: 0;
    }
}

@keyframes origRevert {
    0% {
        max-width: 0;
        opacity: 0;
    }

    15% {
        max-width: 0;
        opacity: 0;
    }

    70% {
        max-width: 9.125rem;
        opacity: 0;
    }

    100% {
        max-width: 9.125rem;
        opacity: 1;
    }
}

.contact-status-text {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.contact-status-text.anim-in {
    animation: statusSubmit 0.9s ease-in-out forwards;
}

.contact-status-text.anim-out {
    animation: statusRevert 0.9s ease-in-out forwards;
}

@keyframes statusSubmit {
    0% {
        max-width: 0;
        opacity: 0;
        transform: translateX(2rem);
    }

    33.33% {
        max-width: 0;
        opacity: 0;
        transform: translateX(2rem);
    }

    66.66% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        max-width: 18.75rem;
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes statusRevert {
    0% {
        max-width: 18.75rem;
        opacity: 1;
        transform: translateX(0);
    }

    15% {
        max-width: 18.75rem;
        opacity: 0;
        transform: translateX(0);
    }

    85% {
        max-width: 0;
        opacity: 0;
        transform: translateX(0);
    }

    100% {
        max-width: 0;
        opacity: 0;
        transform: translateX(0);
    }
}