#contact {height: 746px; background-color: #392523; text-align: center; background-repeat: none; background: linear-gradient(180deg, #392523 60%, #f9f4f0 1%); }
.contactlargetext {width: 45%; display: inline-block; height: 50%; vertical-align: middle; padding: 150px 0 0 0; color: white; font-family: Chronicle Display; font-size: 8em; text-shadow: 1px 1px 4px black; }
.contactform {border: 10px solid #567050; width: 35%; display: inline-block; background-color: white; vertical-align: middle;  }
.contactform a:hover {text-decoration: none; }
.form {font-family: Mr Eaves; text-align: left; padding: 30px; }
.formsubmit {padding: 10px; margin-top: 25px; width: 90%; background-color: #567050; color: white; font-family: Mr Eaves; font-size: 24px; border: 0; }
.formsubmit:hover {opacity: .8; cursor: pointer; }
.form input[type=text] {padding: 10px; margin:10px 0 25px 0; width: 85%; border: 1px solid #554b4b; background-color: #f9f9f9; font-family: Mr Eaves; font-size: 24px;}
.form input[type=email] {padding: 10px; margin:10px 0 25px 0; width: 85%; border: 1px solid #554b4b; background-color: #f9f9f9; font-family: Mr Eaves; font-size: 24px;}
.form textarea {padding: 10px; margin: 25px 0 0 0; width: 85%; border: 1px solid #554b4b; background-color: #f9f9f9; font-family: Mr Eaves; height: 60px; font-size: 24px; }
input:focus {border: 1px solid #567050; }
textarea:focus {border: 1px solid #567050; }
.blank {height: 50px; background-color: #392523; display: block; }
.blank2 {height: 50px; background-color: #f9f4f0; display: block; }
.lass {display:  none; }
.headerimage2 {
        width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
 .logo-img2 img {
    width: auto;
    height: 100%;
  }

  .logo-img2 {
    height: 175px;
    width: 175px;
    z-index: 2;
    position: absolute;
    left: 25px;
    top: 0;
  }

  .errorinactive {
    display: none; 
}

#message-error {
  transform: translate(0, 110px);
}

.erroractive {
  display: block; 
}

.empty::after {
  content: "Please fill out this field."; }

.firstinvalid::after {
  content: "Too short. Please enter a valid first name."; 
}

.lastinvalid::after {
  content: "Too short. Please enter a valid last name."; 
}

.emailinvalid::after {
  content: "Email invalid. Please enter a valid email address.";
}

.cityinvalid::after {
  content: "Too short. Please enter a valid city.";
}

.cityinvalid2::after {
  content: "Letters only, no numbers.";
}

.link::after {
  content: "No links allowed in message box."; }

  /* Validate */

.error {
  padding: 0;
  margin: 0; 
  line-height: 1.2; 
  font-size: 12px; 
  position: absolute; 
  color: #D7567B; 
  transform: translate(0, -20px);
}

.charcount {
  font-family: mr-eaves-xl-sans; 
  font-size: 1.1vw; 
  position: relative;
  top: -.3vw;
  left: 20vw; 
}

.charspan {
  font-family: mr-eaves-xl-sans; 
  font-size: 1.1vw; 
  position: relative;
  left: -.1vw;
}

.charspan2 {
  font-family: mr-eaves-xl-sans; 
  font-size: 1.1vw; 
  position: relative;
  left: -.1vw;
}

.charspan3 {
  font-family: mr-eaves-xl-sans; 
  font-size: 1.1vw; 
  position: relative;
  left: -.1vw;
}

label.dayphone {
  display: none; }


@media (min-width: 801px) and (max-width: 1200px)   {
.contactlargetext {width: 45%; display: inline-block; height: 50%; vertical-align: middle; padding: 150px 0 0 0; color: white; font-family: Chronicle Display; font-size: 5.5em; text-shadow: 1px 1px 4px black;}
.contactform {border: 10px solid #567050; width: 45%; display: inline-block; background-color: white; vertical-align: middle;  }
}


@media (min-width: 601px) and (max-width: 800px)   {
#contact {background: #392523; height: 100vh; }
.contactlargetext {width: 85%; height: 20vw; font-size: 15vw; margin: 0 0 25px 0; text-align: center; padding: 25px 0 0 0;}
.contactform {width: 85%; }


      .charcount {
    left: 60vw; 
   }


}

@media (min-width: 320px) and (max-width: 600px)   {
    #contact {background: #392523; height: 110vh; }
.contactlargetext {width: 85%; height: 20vw; font-size: 15vw; margin: 0 0 25px 0; text-align: center; padding: 25px 0 0 0;}
.contactform {width: 95%; }

        .charcount {
    font-size: 2.2vw; 
    left: 60vw; 
   }

   .charspan {
    font-size: 2.2vw; 
  }
  
  .charspan2 {
    font-size: 2.2vw; 
  }
  
  .charspan3 {
    font-size: 2.2vw; 
  }
}