@import url("main.inc.css");

/*
This stylesheet handles styles specific for contact.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

.contact h2 {
    margin: 43px 0 17px 0;
}

.contact img {
    width: 64px;
    height: auto;
    margin: 0 17px 0 0;
}

.contact > div div {
    display: flex;
    align-items: center;
    margin-bottom: 27px;
}

.contact > div div p {
    margin: 0;
}

.contact > div > div:nth-child(2) p {
    white-space: pre-line;
}

.contact span {
    font-size: 150%;
}
  
.contact a {
    color: var(--color1);
}

#contact #facebook {
    fill: var(--color3);
}

#contact #facebook:hover, #contact #facebook:focus {
    fill: var(--color1);
    transition: var(--ctaTransition);
}

form {
    width: 100%;
    max-width: 600px;
    color: var(--color1);
}

label, input, textarea {
    display: block;
}

input:not([type="submit"]), textarea {
    width: 100%;
    font-size: 125%;
    color: var(--color1);
    background-color: var(--color4);
    padding: 3px;
    border: solid 1px var(--color1);
}

label {
    font-size: 125%;
    font-weight: 200;
    margin-top: 17px;
}

input[type="submit"] {
    margin-top: 17px;
}

input:active, input:focus, textarea:active, textarea:focus {
    border: solid 3px var(--color3);
    outline: none;
}

#contact .captcha {
    display: none;
}

input[type="submit"]:hover, input[type="submit"]:focus {
    background-color: var(--color1);
    color: var(--color4);
    transition: var(--ctaTransition);
}

/* Contact form error handling */

#input-errors {
    display: block;
    margin: 27px 0;
}

#input-errors li {
    margin: 10px 0;
}

#input-errors a {
    color: var(--color1);
}

.success {
    display: flex;
    flex-direction: column;
}

.success p {
    font-size: 150%;
}

.success a {
    color: var(--color1);
}

@media screen and (min-width: 1200px) {

    .contact h2 {
        width: 100%;
        margin-bottom: 17px; 
    }

}  /*  End of 1200px  */