.body.dark,
.page-template-contact {
    background: var(--white);
    --_bg-color: var(--white);
}
.page-template-contact .bg-blur {
    display: none;
}
/*@group Reusable contact
------------------------------------ */
.reusable-contact {
    margin-top: 9rem;
    background-color: var(--white);
    --main-color: var(--black);
    --opposite-color: var(--white);
}
@media only screen
and (min-width : 961px) {
    .reusable-contact {
        margin-top: 11rem;
    }
}
/* @end Reusable contact
------------------------------------ */

/* @group Contact
------------------------------------ */
.contact-prefooter {
    padding: 6rem 0 51.2rem;
    position: relative;
}
.contact-prefooter::after,
.contact-prefooter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: calc(var(--z-index-lowest) + 1);
}
.contact-prefooter::before {
    width: 0;
    height: 1px;
    background: var(--black);
    transition: width var(--anim-delay);
    z-index: calc(var(--z-index-lowest) + 2);
    transition-delay: calc(var(--anim-delay) * 1.2);
}
.contact-prefooter.animateActive::before {
    width: 100%;
}
.contact-prefooter::after {
    right: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(180deg, #FFF 28.43%, rgba(255, 255, 255, 0.00) 90.4%);
    transition: height var(--anim-delay);
    z-index: calc(var(--z-index-lowest) + 1);
}
.contact-prefooter.animateActive::after {
    height: 100%;
}
.contact-prefooter .outerImage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    margin: 0;
    z-index: var(--z-index-lowest);
}
.contact-prefooter .text {
    z-index: calc(var(--z-index-lowest) + 2);
}
.contact-prefooter .text h3 {
    margin: 0 0 5rem;
}
.contact-prefooter .text .boxes .box li {
    font-size: 1.4rem;
    line-height: 1.8em;
    text-transform: uppercase;
}
.contact-prefooter .text .boxes .box li h4 {
    font-family: var(--didot-font);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2em;
    text-transform: capitalize;
}
.contact-prefooter .text .boxes .box li a {
    font: unset;
}
@media only screen
and (min-width : 961px) {
    .contact-prefooter {
        padding: 8rem 0 78.3rem;
    }
    .contact-prefooter .text h3 {
        margin: 0 0 4rem;
    }
    .contact-prefooter .text .boxes {
        display: flex;
        align-items: flex-start;
    }
    .contact-prefooter .text .boxes .box {
        flex: 0 1 50%;
    }
    .contact-prefooter .text .boxes .box li {
        font-size: 1.8rem;
        line-height: 1.8em;
    }
    .contact-prefooter .text .boxes .box li h4 {
        line-height: 1.5em;
    }
    .contact-prefooter .text .boxes .box li a:hover {
        opacity: .7;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .contact-prefooter .text .boxes .box:not(:last-of-type) {
        margin-bottom: 3.6rem;
    }
}
/* @end */


h1 { display: none; }



.reusable-contact .title, 
.reusable-contact .text, 
.reusable-contact .forms {
    opacity: 0;
}
.reusable-contact.animateActive .title,
.reusable-contact.animateActive .text,
.reusable-contact.animateActive .forms {
    animation: fade var(--anim-duration) forwards;
    animation-delay: calc(var(--anim-delay) * var(--_delay));
}
.reusable-contact .title {
    --_delay: 1;
}
.reusable-contact .text {
    --_delay: 1.5;
}
.reusable-contact .forms {
    --_delay: 2;
}


.contact-prefooter .text, 
.contact-prefooter .outerImage {
    opacity: 0;
}
.contact-prefooter.animateActive .text,
.contact-prefooter.animateActive .outerImage {
    animation: fade var(--anim-duration) forwards;
    animation-delay: calc(var(--anim-delay) * var(--_delay));
}
.contact-prefooter .text {
    --_delay: 1;
}
.contact-prefooter .outerImage {
    --_delay: 1.5;
}