.contact-content
{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding:5px;
  color: var(--dark-color);
  text-align: center;
  border-top:1px solid var(--dark-color);
  background-color:#fafafa;
  width:100%;
}

#contact-form
{
  width:100%;
  max-width:400px;
  margin-bottom:60px;
  text-align: left;
  padding:10px;
  position: relative;
}

#contact-form label, #contact-form input, #contact-form textarea
{
  position:relative;
  display:block;
  width:100%;
}

#contact-form label
{
  font-size:1em;
}

#contact-form label sup
{
  opacity:0.5;
  font-style: italic;
  font-weight: 200;
}

#contact-form input, #contact-form textarea
{
  font-size:1em;
  padding:0px;
  margin-bottom:0.5em;
  font-weight: 400;
  color:var(--dark);
  border:1px solid var(--color);
}

#contact-form input
{
  padding-left:0.5em;
  line-height:1.8em;
}

#contact-form textarea
{
  resize: none;
  padding:0.5em;
  height:14em;
}

#send-message-button
{
  float:right;
  height:2em;
  line-height:2em;
  text-align: center;
  font-size:1em;
  padding:0em 2em;
  background-color:var(--color);
  color:var(--light-color);
}

#send-message-button:hover
{
  color:#FFF;
  cursor:pointer;
}


@keyframes shake
{
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

#contact-form label.contact-form-error
{
  position:relative;
  color:red;
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

#contact-form label.contact-form-error::after
{
  bottom:0em;
  padding-left:1em;
  content: attr(alt);
  z-index:300;
  color:red;
  font-weight: 200;
  font-size:0.7em;
  font-style: italic;

}


#contact-process
{
  display:none;
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  background-color:var(--color);
  color:#FFF;
}

#contact-process span
{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}