.hero {
  background-image: linear-gradient(rgb(0 0 0 / 51%), rgb(0 0 0 / 65%)), url(../imagens/img-contact.jpg);
  background-position: center;
  background-repeat: no-repeat;
  min-width: auto;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  padding: 20px;
}

#contact-form {
  width: 45%;
  margin: 50px auto;
  position:relative;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#contact-form h1 {
  font-size: 3rem;
  color: var(--cor-fundo);
}
#contact-form p {
  color: var(--cor-fundo);
}
#contact-form h2 {
  font-size: 2rem;
  margin-bottom:15px;
  font-weight: bold;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
  font-size:15px;
  margin-bottom:2px;
  color: var(--cor-fundo);
}
#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%;
  border: 1px solid #656565;
  margin-bottom:20px;
  padding:10px;
  border-radius: 3px;
  box-sizing: border-box;
  transition-duration: 300ms;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  box-shadow: 0 0 0 3px #f6771de3;
  outline: none;
}
#contact-form textarea {
  height:150px;
  resize: none;
}
#contact-form label {
  display:block;
}
#contact-form .required {
  font-weight:bold;
  color:#F00;
}
#contact-form textarea {
  display:block;
}
#contact-form #submit-button {
  background-color:#333;
  color: var(--cor-primaria);
  border:none;
  background-color: var(--cor-secundaria);
  -moz-border-radius:8px;
  border-radius: .5rem;
  font-weight: 800;
}
#contact-form #submit-button:hover {
  background-color: var(--cor-terciaria);
}
#contact-form #submit-button:active {
  position:relative;
  top:1px;
}
#contact-form #loading {
  width:32px;
  height:32px;
  background-image:url(../img/loading.gif);
  display:block;
  position:absolute;
  right:130px;
  bottom:16px;
  display:none;
}
#errors {
  border:solid 1px #E58E8E;
  padding:10px;
  margin:25px 0px;
  display:block;
  width:437px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  background:#FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
  display:none;
}
#errors li {
  padding:2px;
  list-style:none;
}
#errors li:before {
  content: ' - ';
}
#errors #info {
  font-weight:bold;
}
#errors #info:before {
  content: '';
}
#success {
  border:solid 1px #83D186;
  padding:25px 10px;
  margin:25px 0px;
  display:block;
  width:437px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  background:#D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
  font-weight:bold;
  display:none;
}
#errors.visible, #success.visible {
  display:block;
}
#req-field-desc {
  font-style:italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  -o-box-shadow:none;
  box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
  color:#CCC;
  font-style:italic;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#CCC;
  font-style:italic;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  {
  color:#CCC;
  font-style:italic;
}
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

@media (max-width: 450px) {
  #contact-form h1 {
    font-size: 2rem;
  }

  #contact-form h2 {
    font-size: 1rem;
  }

  #contact-form {
    width: 75%;
  }
}