
/* PLEDGE FORM */
.form__field { position: relative; display: block; text-align: center;  color: #414042; font-size: 18px; line-height: 30px; padding-bottom: 16px;  }
.form__field--checkbox { position: relative; display: inline-block; width: 50%;  vertical-align: top;  padding: 0px 16px;  font-size: 20px; line-height: 12px;  }
.form__field--submit { margin-top: 48px;   }

.form__field__title { position: relative; display: block;  font-family: "futura-pt-bold", sans-serif; font-weight: 700;   }
.form__field__notes {  position: relative; display: block;  }
.form__field--checkbox .form__field__notes { font-size: 14px; line-height: 18px; }
.form__field--submit .form__field__notes { font-size: 14px; line-height: 18px; padding-top: 6px; }
.form__field__input__outer {  position: relative; display: inline-block;  border: 4px solid transparent; padding: 2px;  margin-top: 8px;  }
.form__field--checkbox .form__field__input__outer  { margin-top: 4px;    }
.form__field__input__outer--focus { border: 4px solid #6bbc46; outline: 0;   }

.form__field__input {  position: relative; display: block; width: 100%; border: 2px solid #15601a; text-align: center !important; font-size: 18px; line-height: 30px; padding: 16px;  color: #414042;   }
.form__field__input::placeholder { color: #15601a;  font-style: italic; opacity: 1;  }
input:focus::placeholder { opacity: 0;   }
textarea:focus::placeholder { opacity: 0;   }

input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

.form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden;  }
.form__field--error .form__field__error { visibility: visible;   }
.form__field--error .form__field__input {  border: 2px solid #ed1c24; color: #ed1c24; }
.form__field--error .form__field__input::placeholder { color: #ed1c24;  } 
.form__field__input--textarea { position: relative;  display: block; width: 100%; min-height: 198px; resize: vertical; font-family: "futura-pt",sans-serif; font-weight: 400; font-size: 18px; line-height: 30px; }

.form__field--checkbox input[type="checkbox"] { display: none;   }
.form__field--checkbox label { cursor: pointer;  }
.form__field--checkbox input[type="checkbox"] + label::after {  border: 2px solid #15601a; content: " "; display: inline-block; height: 18px; padding: 0; font-size: 20px; line-height: 12px;  width: 18px; border-radius: 2px;  color: #15601a; text-align: center; } 
.form__field--checkbox input[type="checkbox"]:checked + label::after { content: "\2714";  }

.form__submit__button { pointer-events: none;  opacity: 0.5; position: relative;  display: block; width: 100%; -webkit-appearance: none; border: 2px solid #15601a; background-color: #15601a; text-align: center; font-size: 18px; line-height: 30px; padding: 16px; color: #e8fdc9; text-transform: uppercase; font-family: "futura-pt-bold", sans-serif; font-weight: 700; text-decoration: underline; outline: 0; }
.form__submit__button--valid { opacity: 1; pointer-events: auto;  }
.form__submit__button::-moz-focus-inner { border: 0; }



/***** START OF MEDIA QUERIES *******/


@media only screen and (max-width: 501px) { /* CYAN */
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field--checkbox { width: 100%;  }
  .form__field__input__outer { min-width: 0px !important; max-width: 320px;  }
  .form__field__input__outer.content__block--4_columns { max-width: 100%;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }
}

@media only screen and (min-width: 502px) and (max-width: 580px) { /* BLUE */
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field--checkbox { width: 100%;  }
  .form__field__input__outer { width: 100% !important; min-width: 0px !important; max-width: 320px;  }
  .form__field__input__outer.content__block--4_columns { max-width: 100%;  }
  .form__field__input__outer--checkbox { width: auto !important;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }


}

@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field__input__outer { width: 100% !important; min-width: 0px !important; max-width: 320px !important;  }
  .form__field__input__outer.content__block--4_columns { max-width: 604px;  }
  .form__field__input__outer--checkbox { width: auto !important;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }
  
  
  
}

@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field__input__outer { width: 100% !important; min-width: 0px !important; max-width: 320px !important;  }
  .form__field__input__outer.content__block--4_columns { max-width: 604px !important;  }
  .form__field__input__outer--checkbox { width: auto !important;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }
  
}

@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field__input__outer { width: 100% !important; min-width: 0px !important; max-width: 320px !important;  }
  .form__field__input__outer.content__block--4_columns { max-width: 604px !important;  }
  .form__field__input__outer--checkbox { width: auto !important;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }
  
}

@media only screen  and (min-width: 1001px) and (max-width: 1264px)  { /* BLACK */
  
  /* PLEDGE FORM */
  .form__field__error { position: relative;  display: block; width: 100%; color: #ed1c24; visibility: hidden; height: 16px; overflow: hidden;   }
  .form__field--error .form__field__error { visibility: visible; height: auto;   }
  .form__field__input__outer { width: 100% !important; min-width: 0px !important; max-width: 320px !important;  }
  .form__field__input__outer.content__block--4_columns { max-width: 604px !important;  }
  .form__field__input__outer--checkbox { width: auto !important;  }
  
  .form__field__input { font-size: 16px; line-height: 24px; padding: 12px; }
  
  
}
