/* Text Elements */

h3 {
  font-size: 20px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h3.form-header {
  color: #333;
  font-weight: 300;
  font-size: 24px;
}

span.text-element.label {
  margin-bottom: 3px;
  padding-top: .335rem;
  padding-bottom: .35rem;
  background-color: #8ba2c6;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

span.text-element.form-error {
  color: #db6e65;
  font-family: 'Roboto', cursive;
}

span.text-element {
  color: #333;
  font-size: 12px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* Interaction Elements */

form.form-container.my-form {
  margin: 0vw auto 5vw;
  padding: 30px;
  min-height: 100px;
  max-width: 94%;
  border: .0625rem solid #c1c1c1;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, .15) 0 20px 60px -5px;

  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
          align-self: flex-end;
}

input[type=text] {
  border-color: #b9c2d2;
  border-radius: 3px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

input[type=text]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

input[type=email] {
  border-color: #b9c2d2;
  border-radius: 4px;
  color: #333;
  font-size: 15px;
  font-family: 'Roboto', cursive;
}

input[type=email]:focus {
  box-shadow: rgba(139, 162, 198, .4) 0 0 8px 0;
}

textarea.textarea-field-1 {
  min-height: 150px;
}

label.label-container {
  padding-bottom: 16px;
}

button.button {
  background-color: #5f78a0;
  font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

button.submit-btn {
  border-width: 0;
  border-radius: 8px;
  font-size: 18px;
}

@media screen and (min-width: 40rem) {
  /* Interaction Elements */

  form.form-container.my-form {
    max-width: 640px;
  }
}