/* @group Contact
------------------------------------ */


[data-page="contact"] { background-color: var(--limestone); }
.popup-container>[data-page="contact"]>.icon-close { background-image: url('../../img/layout/globals/close-forest.svg'); }

/* @group Header
------------------------------------ */
.contact header { padding-top: 4rem; }
.contact header h2 { text-transform: uppercase; color: var(--forest); font-weight: 400; font-family: var(--brolimo-font); font-variant-ligatures: discretionary-ligatures; font-size: 8em; line-height: 1em; margin: 0 0 6rem; }
@media only screen
and (min-width : 961px) {
    .contact header { padding-top: 13.3rem; }
    .contact header h2 { font-size: 15em; margin: 0 0 8rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Header
------------------------------------ */

/* ----- */

/* @group Articles 
------------------------------------ */
.contact .articles-container { margin-bottom: 3rem; }
.contact .articles-container .article h3 { font-family: var(--blackdelights-font); font-weight: 400; color: var(--forest); font-size: 4.5em; line-height: 1.22em; letter-spacing: .004em;  }
.contact .articles-container ul li { font: var(--body-copy-mobile); letter-spacing: var(--body-copy-mobile-letterspacing); color: var(--forest); }
.contact .articles-container ul li > a { font: unset; color: var(--gilded-age); }
.contact .articles-container ul li > a:hover { color: var(--forest); }
@media only screen
and (min-width : 961px) {
    .contact .articles-container { display: flex; flex-wrap: wrap; column-gap: 7.5rem; margin-bottom: 8rem; }
    .contact .articles-container .article { flex: 0 1 calc(33% - 5rem); max-width: calc(33% - 5rem); }
    .contact .articles-container .article h3 { font-size: 5rem; line-height: 1.1em; margin: 0 0 2rem;}
    .contact .articles-container .article ul { padding-right: 2.1rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .contact .articles-container .article { display: flex; margin: 0 0 3rem; }
    .contact .articles-container .article h3,
    .contact .articles-container .article ul { flex: 0 1 50%; max-width: 50%; }
    .contact .articles-container .article h3 { padding-right: 4rem; }
}
/* @end Articles
------------------------------------ */

/* ----- */


/* @group Form 
------------------------------------ */
.contact .form-container { margin-bottom: 6.1rem; }
.contact .form-container form { position: relative; }

.contact .form-container .wpcf7-form-control-wrap { display: block; margin: 0 0 5rem; }
.contact .form-container .wpcf7-form-control-wrap input,
.contact .form-container .wpcf7-form-control-wrap textarea { color: var(--spanish-moss); padding: 1.5rem 0; width: 100%; border-bottom: .2rem solid var(--spanish-moss); border-radius: 0; }
.contact .form-container .wpcf7-form-control-wrap textarea { height: 12.4rem; }
.contact .form-container .wpcf7-form-control-wrap > *::placeholder { color: var(--spanish-moss); }

.contact .form-container .bttn { text-transform: uppercase; font-weight: 500; font-size: 1.5em; line-height: 1.5em; letter-spacing: .08em; color: var(--limestone); display: flex; justify-content: center; align-items: center; width: 14.1rem; height: 14.1rem; border: .1rem solid transparent; position: relative; margin-left: auto; }
.contact .form-container .bttn span { color: var(--gilded-age); position: relative; z-index: 2; }
.contact .form-container .bttn span::after { content: none; }
.contact .form-container .bttn span::before { content: ''; display: block; width: 3.5rem; height: 1rem; background: url('../../img/layout/globals/arrow.svg') no-repeat right center; background-size: cover; position: absolute; right: -1rem; top: 100%; transition: all .3s linear; }
.contact .form-container .bttn::before,
.contact .form-container .bttn::after { content: ''; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; transition: all .3s linear; z-index: 1; }
.contact .form-container .bttn::before { border: .1rem solid var(--gilded-age); transform: translate(-50%, -50%) scale(1.15); }
.contact .form-container .bttn::after { background-color: var(--forest); transform: translate(-50%, -50%) scale(1); }
.contact .form-container .bttn:hover::before { transform: translate(-50%, -50%) scale(0); }
.contact .form-container .bttn:hover::after { transform: translate(-50%, -50%) scale(1.15); }
.contact .form-container .bttn:hover span::before { translate: .5rem; }

.contact .form-container form .wpcf7-not-valid { border-color: rgb(220, 53, 69); }
.contact .form-container form .wpcf7-not-valid-tip { display: none; }
.contact .form-container form .wpcf7-response-output { position: absolute; bottom: 1rem; left: 0; max-width: 40%; border: 0; color: var(--gilded-age); font-size: 1.6rem; line-height: 1.4em; padding: 0; margin: 0; }
@media only screen
and (min-width : 961px) {
    .contact .form-container { margin-bottom: 21.6rem; }
    .contact .form-container form { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .contact .form-container .wpcf7-form-control-wrap:nth-child(2),
    .contact .form-container .wpcf7-form-control-wrap:nth-child(3) { flex: 0 1 calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
    .contact .form-container .wpcf7-form-control-wrap:nth-child(4) { flex: 0 1 100%; max-width: 100%; }
    .contact .form-container .wpcf7-form-control-wrap:nth-child(5) { flex: 0 1 calc(100% - 11rem); max-width: calc(100% - 11rem); }

    .contact .form-container .wpcf7-form-control-wrap { margin: 0 0 3rem; }
    .contact .form-container .wpcf7-form-control-wrap input,
    .contact .form-container .wpcf7-form-control-wrap textarea { font-size: 1.6em; line-height: 1.5em; letter-spacing: .0125em; }
    .contact .form-container .wpcf7-form-control-wrap textarea { padding: 1.5rem 1rem; }

    .contact .form-container .bttn { position: absolute; right: -15rem; bottom: -10.5rem; margin-left: unset; width: 21rem; height: 21rem; font-size: 1.6em; line-height: 1.5em; letter-spacing: .0125em; }
    .contact .form-container .bttn span { color: var(--limestone); }
    .contact .form-container .bttn span::before { width: 6rem; right: -3rem; margin-top: .3rem; }

    .contact .form-container form .wpcf7-response-output { bottom: -6rem; max-width: 45rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

}

/* Animación placeholder */
.contact .form-container .wpcf7-form-control-wrap input::-webkit-input-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea::-webkit-input-placeholder {
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.contact .form-container .wpcf7-form-control-wrap input::-moz-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea::-moz-placeholder {
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.contact .form-container .wpcf7-form-control-wrap input:-ms-input-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:-ms-input-placeholder {
    transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
}
.contact .form-container .wpcf7-form-control-wrap input:-moz-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:-moz-placeholder {
    -moz-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

.contact .form-container .wpcf7-form-control-wrap input:focus::-webkit-input-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:focus::-webkit-input-placeholder { opacity: 0; }
.contact .form-container .wpcf7-form-control-wrap input:focus::-moz-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:focus::-moz-placeholder { opacity: 0; }
.contact .form-container .wpcf7-form-control-wrap input:focus:-ms-input-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:focus:-ms-input-placeholder { opacity: 0; }
.contact .form-container .wpcf7-form-control-wrap input:focus:-moz-placeholder,
.contact .form-container .wpcf7-form-control-wrap textarea:focus:-moz-placeholder { opacity: 0; }
.contact .form-container .wpcf7-form-control-wrap textarea { resize: none; }
/* @end Form
------------------------------------ */


.contact-footer { padding: 0 0 5.2rem; }
.contact-footer .social { margin: 0 0 5rem; }
.contact-footer .social ul { display: flex; }
.contact-footer .social ul li { display: inline-block; flex: 0 0 50%; max-width: 50%; padding: 0 1rem; text-align: center; }
.contact-footer .created-by { text-align: center; margin: 0 0 5rem; }
.contact-footer .created-by p { text-transform: uppercase; color: var(--forest); }
.contact-footer .created-by p > a { font: unset; color: unset;  }
.contact-footer .privacy-terms { display: flex; justify-content: center;}
.contact-footer .privacy-terms a { flex: 0 0 50%; max-width: 50%; padding: 0 1rem; font: var(--body-copy-mobile); letter-spacing: var(--body-copy-mobile-letterspacing); text-align: center; }
@media only screen
and (min-width : 961px){
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

}


/* Contact Form */
.contact-form {
    position: relative;
}
.contact-form .hywrap fieldset {
    width: 100%;
}
.contact-form .hywrap .control-group {
    position: relative;
    width: 100%;
    margin-bottom: 5rem;
    font-size: 0;
}
.contact-form .hywrap .top_align .control-label {
    display: inline-block;
    transition: opacity 0.3s linear;
    color: var(--spanish-moss);
    font-size: 1.7rem;
    line-height: 1.7em;
    padding-top: 0;
    pointer-events: none;
    position: absolute;
    top: 1.5rem;
    left: 0;
    opacity: 1;
    transition: opacity .4s ease;
}
.contact-form .hywrap .top_align .control-label.hide {
    opacity: 0;
}
.contact-form .hywrap input[type="text"],
.contact-form .hywrap select,
.contact-form .hywrap textarea {
    border-radius: 0;
    border: none;
    border-bottom: .2rem solid var(--spanish-moss);
    display: inline-block;
    width: 100%;
    color: var(--spanish-moss);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.7em;
    letter-spacing: 0.0117em;
    padding: 1.5rem 0;
    margin-top: 0;
    height: unset;
    font-family: var(--gotham-book);
}
.contact-form .hywrap textarea { 
    height: 12.4rem; 
}
.contact-form textarea { 
    resize: none; 
}
.contact-form .hywrap select option {
    font-size: 1.7rem;
    line-height: 1.7em;
    color: var(--forest);
}
.contact-form .hywrap .form-actions #more-info {
    display: none;
}
  
.contact-form .wpcf7-not-valid {
    border-color: rgb(220, 53, 69) !important;
}
.contact-form .wpcf7-not-valid-tip {
    display: none;
}
.contact-form .wpcf7-response-output,
.contact-form .hywrap .LV_invalid {
    position: absolute;
    bottom: -3rem;
    left: 0;
    max-width: 45rem;
    border: 0 !important;
    color: var(--gilded-age);
    font-size: 1.4rem;
    line-height: 1.4em;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--gotham-book);
}
.contact-form .hywrap .LV_invalid:not(:first-of-type) {
    display: none;
}
.contact-form .hywrap #form-success {
    background-color: var(--limestone)!important;
    color: var(--forest)!important;
    font-family: var(--gotham-medium)!important;
    font-size: 1.8rem;
    line-height: 1.5em;
    letter-spacing: 0.008em;
    padding: 1.5rem!important;
    border-radius: 0;
}
.contact-form .hywrap button[type="submit"] {
    border: none;
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 12.5rem;
    height: 12.5rem;
    font-family: var(--gotham-book);
    font-weight: 400;
    color: var(--gilded-age);
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.29em;
    letter-spacing: 0.011em;
    text-align: center;
    background-color: var(--forest);
    margin-left: auto;
}
@media screen and (max-width:961px) {
    .contact-form .hywrap button[type="submit"] {
        float: left !important;
    }
}
.contact-form .hywrap button[type="submit"]:hover {
    background-color: var(--forest);
    color: var(--limestone);
}
.contact-form .hywrap button[type="submit"]::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    content: "";
    border: .1rem solid var(--gilded-age);
    width: 14.1rem;
    height: 14.1rem;
}
.contact-form .hywrap button[type="submit"]::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    top: 55%;
    width: 3.5rem;
    height: 1rem;
    background-image: url('../../img/layout/globals/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: 4rem;
}
@media only screen
and (min-width : 961px) {
    /* Contact Form */
    .contact-form .hywrap .control-group {
        margin-bottom: 3rem;
    }
    .contact-form .hywrap textarea {
        max-width: 52.8rem;
        margin-bottom: 0;
    }
    .contact-form .control-group.hytag_form_desired_move_in_date,
    .contact-form .control-group.hytag_number_of_bedrooms {
        display: inline-block;
        vertical-align: top;
    }
    .contact-form .hywrap input[type="text"],
    .contact-form .hywrap select,
    .contact-form .hywrap textarea {
        font-family: var(--gotham-book) !important;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1.5em;
        letter-spacing: .01333em;
    }
    .contact-form .hywrap .name-fields {
        display: flex;
    }
    .contact-form .hywrap .name-fields li,
    .contact-form .hywrap .name-fields li:first-of-type {
        margin-bottom: 0;
    }
    .contact-form .control-group.hytag_form_desired_move_in_date,
    .contact-form .control-group.hytag_number_of_bedrooms,
    .contact-form .hywrap .name-fields li {
        width: calc(50% - 1.5rem);
    }
    .contact-form .control-group.hytag_form_desired_move_in_date, 
    .contact-form .hywrap .name-fields li:first-of-type {
        margin-right: 3rem;
    }
    .contact-form .hywrap .top_align .control-label,
    .lets-connect .hywrap .LV_invalid {
        font-family: var(--gotham-book) !important;
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1.5em;
        letter-spacing: .01333em;
    }
    .lets-connect .hywrap .LV_invalid {
        bottom: -2vh;
    }
    /* .contact-form .hywrap .form-actions {
        position: absolute;
        z-index: 1;
        bottom: 0;
    } */
    .contact-form .hywrap .form-actions .g-recaptcha{
        position: relative;
        top: 95px;
    }
    .contact-form .hywrap .form-actions button[type="submit"] {
        pointer-events: all;
    }
    .contact-form .hywrap button[type="submit"],
    .contact-form .hywrap button[type="submit"]::after {
        transition: transform .7s ease;
    }
    .contact-form .hywrap button[type="submit"] {
        position: absolute;
        left: 56.8rem;
        top: calc(100% - 5.5rem);
        width: 17.8rem;
        height: 17.8rem;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 1.5em;
        letter-spacing: 0.0125em;
        color: var(--limestone);
        margin-left: 0;
    }
    .contact-form .hywrap button[type="submit"]::after {
        width: 21rem;
        height: 21rem;
    }
    .contact-form .hywrap button[type="submit"]::before {
        width: 6rem;
        margin-top: .5rem;
        
    }
    .contact-form .hywrap button[type="submit"]:hover {
        transform: scale(1.05);
    }
    .contact-form .hywrap button[type="submit"]:hover::after {
        transform: translate(-50%, -50%) scale(.86);
    }
}

.contact-form input:-webkit-autofill,
.contact-form input:-webkit-autofill:hover, 
.contact-form input:-webkit-autofill:focus, 
.contact-form input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--limestone) inset !important;
}

.contact-form .form-actions .g-recaptcha span{
    white-space: nowrap;
}

.contact .contact-form .hywrap .form-actions .g-recaptcha {
    position: relative;
}

@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .contact-form .hywrap .name-fields li:first-of-type {
        margin-bottom: 5rem;
    }
}
/* @end */