/* --------------------------------------------------------- contact form */
/* ========================================================= VARIABLES */
:root {
  --portfolio-dark: hsl(199,16%,35%);
  --portfolio-light: hsl(42,67%,93%);
  --portfolio-header: hsl(41,29%,89%);
  --portfolio-accent: hsl(25,78%,48%);
  --portfolio-accent-light: hsl(25, 78%, 65%);
  --portfolio-gray: hsl(25,20%,40%);
  --themeColor: #005B69;
  --themeColor-accent: #DB6B1A;
  --textDark: #4A5D66;
  --textLight: #FBF2EA; }

header.contactHeader {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: #EBE6DB;
  background-image: url("../images/plane-w.svg");
  background-repeat: no-repeat;
  background-size: 50%;
  min-height: 33vh; }
  @media (min-width: 960px) {
    header.contactHeader {
      min-height: 50vh; } }
  header.contactHeader > div {
    margin: 6em; }
  header.contactHeader p {
    color: var(--portfolio-gray);
    font-family: "PT Serif", Georgia, serif;
    font-size: 2em;
    font-style: italic;
    letter-spacing: 0;
    line-height: 1; }
  header.contactHeader h1 {
    color: var(--themeColor);
    font-family: HeadingNow34, "HelveticaNeue-Condensed", "Arial Narrow", sans-serif;
    font-size: 6.4em;
    font-weight: normal;
    line-height: 1; }

.formHeader h2, .formHeader h3, .formHeader p {
  color: var(--textLight);
  font-weight: normal;
  line-height: 1; }

.formHeader h3 {
  font-size: 1.6em;
  text-transform: uppercase; }

.formHeader h2 {
  margin: 16px 0 36px 0;
  font-family: HeadingNow34, "HelveticaNeue-Condensed", "Arial Narrow", sans-serif;
  font-size: 6.4em; }

.formHeader p {
  font-size: 1.6em;
  font-style: italic; }

.contactCardBase {
  display: flex;
  flex: 0 1 50%;
  color: white;
  background-color: rgba(255, 0, 0, 0.5); }
  .contactCardBase div {
    margin: 3em; }
    @media (min-width: 720px) {
      .contactCardBase div {
        margin: 3em auto; } }
.contactCard.contactCardBase {
  background-color: #005B69; }

.contactCard.homeCard {
  background-color: #DB6B1A; }

.contactCard form {
  margin: 2em 0; }
  .contactCard form .disclaimer {
    font-size: .8em;
    font-style: italic; }

.contactCard div.form-fields {
  margin: 3em 0 0 0;
  font-size: 1.6rem; }

.contactCard form div {
  margin: 2em 0; }

.contactCard button,
.contactCard label,
.contactCard input,
.contactCard textarea {
  display: block;
  width: 100%;
  font-size: 1.6rem; }

.contactCard label {
  color: #F9F2E1; }

.contactCard input,
.contactCard textarea {
  border: 1px solid #F9F2E1;
  padding: .5em 1em;
  background-color: transparent;
  color: white; }
  .contactCard input::placeholder,
  .contactCard textarea::placeholder {
    color: rgba(0, 0, 0, 0.65); }

.contactCard textarea {
  height: 6em;
  line-height: 1.5; }

.contactCard input[type="submit"],
.contactCard button[type="submit"] {
  border: 1px solid #F9F2E1;
  border-radius: 6px;
  padding: .5em 4em;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  color: #F9F2E1; }
  .contactCard input[type="submit"]:hover,
  .contactCard button[type="submit"]:hover {
    border: 1px solid #202020;
    background-color: #202020;
    cursor: pointer; }
  .contactCard input[type="submit"] span,
  .contactCard button[type="submit"] span {
    position: relative; }

/*# sourceMappingURL=contact-form.css.map */