:root {
    --black:#262626;
    --gray:#c7c7c7;
}


#newsletter {
    margin-top:0;
}

#contact-hero {
    background-image: url(../../images/redesign/contact-us/bg-hero.png);
	background-image: -webkit-image-set(url("../../images/redesign/contact-us/bg-hero.png") 1x, url("../../images/redesign/contact-us/bg-hero@2x.png") 2x);
}

#contact-hero h1 {
    font-size:50px;
    line-height:38px;
}

#contact-hero h1:before,
#contact-hero h1:after{
    content:"";
    position:absolute;
    top:30px;
    width:104px;
    height:3px;
    background:var(--brand-pink);
}

#contact-hero h1:before {
    left:-115px;
}

#contact-hero h1:after {
    right:-115px;
}

#contact-hero p {
    font-size:18px;
    line-height:24px;
    max-width:610px;
}

#contact-form h2,
#contact-thanks h2{
    font-size:40px;
    line-height:37px;
}

#contact-form h3,
#contact-thanks h3 {
    font-size:50px;
    line-height:55px;
}

#contact-form form{
    max-width: 545px;
}
#contact-form form .half{
    flex-basis: 50%;
}
#contact-form form .form-field{
    margin: 10px;
    flex-grow: 1;
}
#contact-form form input,
#contact-form form select{
    height: 41px;
    font-size: 13px;
    width: 100%;
    text-indent: 10px;
}
#contact-form form select,
#contact-form form ::placeholder{
    color: var(--black);
}
#contact-form form input,
#contact-form form select.selected{
    color: var(--black);
}
#contact-form form select{
    background-repeat: no-repeat;
    background-size: 13px 8px;
    background-position: calc(100% - 8px) center;
    background-image: url(../../images/redesign/contact-us/down-arrow.png);
	background-image: -webkit-image-set(url("../../images/redesign/contact-us/down-arrow.png") 1x, url("../../images/redesign/contact-us/down-arrow@2x.png") 2x);    
}
#contact-form form ::placeholder{
    font-size: 13px;
    opacity: 1;
}
#contact-form form button,
#contact-thanks a {
    width: 225px;
    height: 51px;
    font-size: 1.357142857142857em;
    margin-top: 20px;
}
#contact-form .form-captcha {
    width:304px;
}

.contact-error .form-field {
    border-color: var(--red);
}

#contact-thanks {
    padding-top:120px;
    padding-bottom:110px;
}

#contact-thanks p {
    font-size:23px;
    line-height:30px;
}

@media screen and (max-width: 567px) {
    #contact-hero {
        background-image: url(../../images/redesign/contact-us/bg-hero-m.png);
        background-image: -webkit-image-set(url("../../images/redesign/contact-us/bg-hero-m.png") 1x, url("../../images/redesign/contact-us/bg-hero-m@2x.png") 2x);
        padding:30px 0;
        margin-top:22px;
    }
    #contact-hero h1 {
        font-size:40px;
        line-height:40px;
    }

    #contact-hero p {
        font-size:14px;
        line-height:19px;
        padding-top:10px;
    }

    #contact-hero h1:before,
    #contact-hero h1:after{
        top:25px;
        width:25px;
    }

    #contact-hero h1:before {
        left:-50px;
    }
    
    #contact-hero h1:after {
        right:-50px;
    }

    #contact-form {
        padding:35px 0 70px 0;
    }
    
    #contact-form h2,
    #contact-thanks h2 {
        font-size:28px;
        line-height:28px;
    }

    #contact-form h3,
    #contact-thanks h3 {
        font-size:28px;
        line-height:29px;
    }

    #contact-form .form-row.flex{
        flex-direction: column;
    }

    #contact-form form .form-field {
        margin:7px 0;
    }

    #contact-form form button,
    #contact-thanks a {
        font-size: 17px;
    }

    #contact-thanks {
        padding-top:80px;
        padding-bottom:80px;
    }

    #contact-thanks p {
        font-size:14px;
        line-height:20px;
    }
}