/*--------------------------------------------------------------
# Components — Contact Section
--------------------------------------------------------------*/

.section#contact .background {
    width: 100%;
}

.section#contact .titro {
    top: 0;
    -webkit-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
}

.section#contact .title {
    position: absolute;
}

.section#contact .menu {
    position: absolute;
    top: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@media (max-width: 1000px) {
    .section#contact .menu {
        position: sticky;
        -webkit-transform: unset;
        transform: unset;
        top: 0;
    }
}

.section#contact .menu-item {
}

@media (max-width: 1000px) {
    .section#contact .menu-item {
        position: static;
        -webkit-transform: unset;
        transform: unset;
    }
}

/* Contact wrapper grid */
.section#contact .contact_wrapper {
    top: 0;
    display: grid;
    grid-template: "a c" "b c";
    width: 80%;
    height: 100%;
}

@media (max-width: 1900px) {
    .section#contact .contact_wrapper {
        grid-template: "a" "c" "b";
    }
}

@media (max-width: 1000px) {
    .section#contact .contact_wrapper {
        grid-template-rows: auto auto auto;
        margin: 20vh auto 100px auto;
    }
}

@media (max-width: 650px) {
    .section#contact .contact_wrapper {
        margin-top: 15vh;
        margin-bottom: 15vh;
        width: 90%;
    }
}

/* Motto */
.section#contact .motto_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    top: 150px;
    left: 300px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-area: a;
    margin-top: 250px;
}

@media (max-width: 1000px) {
    .section#contact .motto_wrapper {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        margin-top: 0;
    }
}

.contact_wrapper .motto_wrapper div:first-child {
    margin-bottom: 60px;
}

/* Contact form */
.section#contact #wpcf7-f151-o1 {
    grid-area: b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
}

.section#contact #wpcf7-f151-o1 form {
    width: 100%;
}

.section#contact #wpcf7-f151-o1 .wpcf7-textarea {
    margin-top: 40px;
}

.section#contact .wpcf7-form-control-wrap input {
    width: 400px;
}

.section#contact .wpcf7-form-control-wrap textarea {
    width: 400px;
}

@media (max-width: 650px) {
    .section#contact .wpcf7-form-control-wrap input,
    .section#contact .wpcf7-form-control-wrap textarea {
        width: 100%;
    }
}

.section#contact #wpcf7-f151-o1 .wpcf7-textarea::placeholder {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.section#contact .wpcf7 .wpcf7-form-control.wpcf7-submit:hover {
    background-color: rgba(244, 202, 176, 1);
}

.section#contact .wpcf7-not-valid-tip {
    color: white;
    background-color: grey;
}

.section#contact .wpcf7-response-output {
    color: white;
    background-color: grey;
}

/* Email wrapper */
.section#contact .email_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    grid-area: c;
}

@media (max-width: 1000px) {
    .section#contact .email_wrapper {
        -webkit-box-pack: unset;
        -ms-flex-pack: unset;
        justify-content: unset;
    }
}

.section#contact .email_wrapper div {
    margin: 20px 0;
}

.section#contact .email_wrapper a:nth-child(2) {
    font-size: 1.57vw;
}

/* Contact inputs */
.section#contact input {
    border: 1px solid black;
    -webkit-box-shadow: 5px 5px black;
    box-shadow: 5px 5px black;
}

.section#contact textarea {
    border: 1px solid black;
    -webkit-box-shadow: 5px 5px black;
    box-shadow: 5px 5px black;
}

.section#contact input::placeholder {
    color: black;
    text-align: center;
}

.section#contact textarea::placeholder {
    color: black;
    text-align: center;
    position: absolute;
    top: 50%;
}