.honeypot {
    position: absolute;
    left: -9999px;
}

#info_b-contact {
    width: 100%;
    transition: opacity 1000ms;
}

#info_b-contact-text,
.form-field {grid-column: 1/-1;}
@media only screen and (min-width: 1096px) {
    .form-field:not(#info_b-contact-message) {grid-column: span 1;}
}

.form-field label {display: none;}

.form-field input,
.form-field textarea {
    width: 100%;
    background: transparent;
    outline: none;
    border: none;
    padding: .5em 0;
    border-bottom: 1px solid var(--c-brown) !important;
}

@media (hover: hover) {
    .form-field *:active::placeholder,
    .form-field *:focus::placeholder,
    .form-field *:focus-visible::placeholder,
    .form-field *:focus-within::placeholder,
    .form-field *:target::placeholder {color: transparent;}
}

.form-field *::placeholder {
    color: var(--c-brown);
    opacity: .5;
}

#info_b-contact input[type="submit"] {
    grid-column: 1/-1;
    margin-left: auto;
    cursor: pointer !important;
}




#info_b-contact-alert {
    margin-top: 2rem;
}

@media (hover: hover) {
    #info_b-contact-alert button {transition: opacity 500ms;}
    #info_b-contact-alert button:hover {opacity: .5;}
}








/* 
CONTACT SUCCESS
*/
#info-contact-success {
    background: var(--c-brown);
    transition: transform 2000ms;
    z-index: 200;
}
#info-contact-success[data-status="close"] {transform: translateY(100%);}

#info-contact-success > div {
    padding: 2rem;
    width: 100%;
    max-width: 52rem;
}
#info-contact-success .t-medium {margin-bottom: 1em;}

@media only screen and (min-width: 768px) {
    #info-contact-success > div {
        padding: 2rem 8rem;
    }
}

@media only screen and (min-width: 1096px) {
    #info-contact-success > div {
        padding: 2rem;
    }
}