.contact_form_container {
width: 80%;
border: 1.5px solid var(--main-gold);
padding: 1rem 1.5rem;
margin: 4rem 0 6rem;
position: relative;
}
.contact_form_container form {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.form_element_container {
width: 100%;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
.form_input_container,
.form_textarea_container {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
}
.form_input_container {
width: 48%;
}
.form_textarea_container {
width: 100%;
}
.form_input_container input,
.form_input_container select,
.form_input_container option,
.form_textarea_container textarea,
.form_element_container label:not(.label_file) {
font-size: min(max(1rem, 1vw), 1.5rem);
padding: .5rem 0;
color: var(--main-grey);
}
.form_input_container input,
.form_input_container select,
.form_textarea_container textarea {
border: 1.5px solid lightgrey;
} .button.label_file {
background-color: transparent;
color: unset;
border: 1px solid var(--main-grey);
cursor: pointer;
}
.button.label_file:hover {
color: white;
}
.form_attach_container {
display: flex;
flex-flow: row-reverse wrap;
justify-content: center;
align-items: center;
gap: 1rem;
}
.input_file {
opacity: 0;
width: 0;
height: 0;
}
.submit_box {
width: 100%;
display: flex;
justify-content: flex-end;
position: absolute;
right: 0;
bottom: -80px;
} @media all and (max-width: 1150px) {
.contact_form_container {
width: 90%;
}
}
@media all and (max-width: 1050px) {
.contact_form_container {
width: 95%;
}
}
@media all and (max-width: 950px) {
.contact_form_container {
width: 98%;
}
}
@media (max-width: 700px) {
.contact_form_container form {
padding: 2.5rem 0 0;
}
}
@media all and (max-width: 650px) {
.contact_form_container {
margin: 3rem 0 6rem;
}
.contact_form_container form {
padding: 3rem 1rem 2rem;
}
.form_element_container {
gap: 1.5rem;
}
.form_input_container {
width: 100%;
margin: .5rem 0;
}
.contact .intro_box br.desktop {
display: none;
}
.contact .intro_box br.mobile {
display: block;
}
}
@media (max-width: 480px) {
.contact_form_container form {
padding: 2rem 0 0;
}
} .form_input_container input,
.form_input_container select,
.form_textarea_container textarea,
.form_input_container input:focus,
.form_input_container select:focus-visible,
.form_textarea_container textarea:focus {
padding-left: .5rem;
}
.form_input_container input:focus-visible,
.form_input_container select:focus,
.form_textarea_container textarea:focus {
border: 1.5px solid var(--main-grey);
outline: none;
color: var(--main-grey);
}
.form_textarea_container textarea,
.form_textarea_container textarea:focus {
resize: vertical;
font-family: 'Raleway', sans-serif;
} .form_input_container select:focus + label,
.form_input_container input:focus + label,
.form_textarea_container textarea:focus + label {
font-weight: 500;
}
.form_element_container label {
transition: .3s ease;
} .form_input_container input:-webkit-autofill,
.form_input_container input:-webkit-autofill:focus,
.form_textarea_container textarea:-webkit-autofill,
.form_textarea_container textarea:-webkit-autofill:focus {
transition: background-color 0s 600000s, color 0s 600000s !important;
font-family: 'Raleway', sans-serif !important;
}
.submit_box input {
cursor: pointer;
} #contact_form .btn_mess .wpcf7-spinner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
background-color: grey;
margin: 0;
} #contact_form .wpcf7 form .wpcf7-response-output {
margin: 0 !important;
width: 68%;
}