/* TEMP */
	@media (min-width:1180px) {  }
	@media (min-width:1560px) {  }


body { padding: 25px }

	@media (min-width:1180px) { body { padding: 50px } }


/* CORE */
* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased; 
	-webkit-tap-highlight-color: transparent;
	list-style: none; 
	padding: 0;
	margin: 0;
	border-collapse: inherit;
	-webkit-transition: all 1s 0s ease-out;
	-moz-transition: all 1s 0s ease-out;
	-o-transition: all 1s 0s ease-out;
	-ms-transition: all 1s 0s ease-out;
	transition: all 1s 0s ease-out }

*:focus {
  outline: none }

:root {
  --primary: #4b3b15;
  --secondary: #549bcd;
  --blue: #3399ff;
  --green: #23a181;
  --dark: #101820 }

html, body {
	cursor: default;
	scroll-behavior: smooth; 
	margin: auto }

a {
	color: inherit;
	text-decoration: none }

img {
	display: block;
	max-width: 100% }

div { 
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	margin: 0
}


/* TYPOGRAPHY */
html, body {
  font-family: azo-sans-web, sans-serif;
  font-size: 18px;
  line-height: 28px;
  overflow-x: hidden }

	@media (min-width:1560px) { html, body { font-size: 22px; line-height: 34px }}

p { 
	font-size: 16px;
	line-height: 26px;
	color: #000000;
	font-weight: normal }
	
	@media (min-width:1180px) { p { font-size: 14px; line-height: 24px }}


/* H1 */
h1 {
	font-size: 26px;
	line-height: 28px;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase }

	@media (min-width:1180px) { h1 { font-size: 28px; line-height: 30px }}
	@media (min-width:1560px) { h1 { font-size: 36px; line-height: 40px }}


/* H2 */
h2 {
	display: block;
	position: relative;
	font-size: 26px;
	line-height: 30px;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase }

	@media (min-width:1180px) { h2 { text-align: center }}
	@media (min-width:1560px) { h2 {  }}

h2 span { font-weight: 300; font-style: italic }


/* BUTTONS */
a.btn, button { 
	display: inline-flex; 
	min-height: 35px;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 15px 25px;
	border: 1px solid var(--blue);
	border-radius: 6px;
	background: -webkit-linear-gradient(0deg,#49C0FC 0%,var(--blue) 100%);
	background: -moz-linear-gradient(0deg,#49C0FC 0%,var(--blue) 100%);
	background: -o-linear-gradient(0deg,#49C0FC 0%,var(--blue) 100%);
	background: -linear-gradient(0deg,#49C0FC 0%,var(--blue) 100%);
	background-color: var(--blue);
	transition: all 0.5s ease-in-out 0s;
	cursor: pointer }

	@media (min-width:1180px) { a.btn { min-height: 60px; font-size: 20px; line-height: 30px; padding: 15px 30px }}
	@media (min-width:1560px) { a.btn { font-size: 20px; line-height: 30px }}

a.btn:hover, button:hover { 
	color: var(--dark);
	background: transparent;
	border: 1px solid var(--blue) }


a.btn.light {
	color: var(--dark);
	border: 1px solid var(--blue);
	background-color: transparent }

a.btn.light:hover {
	color: #FFFFFF;
	border: 0;
	background: var(--blue) }


/* DONATION FORM */
#donation-form {
	max-width: 600px;
    margin: 0 auto }

	@media (min-width:1180px) { #donation-form { display: flex; flex-flow: row wrap; justify-content: space-between; max-width: 900px; padding: 75px }}



/* all */
fieldset { 
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	margin: 0 0 25px;
	border: 0 }

	@media (min-width:1180px) { fieldset { flex: 1 1 100%; text-align: center; margin: 0 0 35px }}

h2 + fieldset { margin-top: 10px }

legend {
	display: block;
	position: relative;
	font-size: 18px;
	line-height: 24px;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px }

	@media (min-width:1180px) { legend { margin-bottom: 20px }}
	@media (min-width:1560px) { legend {  }}

label {
	display: block;
	position: relative;
	font-size: 14px;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase }

	@media (min-width:1180px) { label {  }}
	@media (min-width:1560px) { label {  }}

input.txt-input {
	display: flex;
	width: 100%;
	height: auto;
	font-size: 14px;
	color: #000000;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 15px;
	margin: 5px 0 15px;
	border: 1px solid #DDDDDD;
	border-radius: 6px;
	outline: 0;
	background-color: #FFFFFF }


/* make a gift */
@media (min-width:1180px) { #donation-form > h2 { flex: 1 1 100% }}

/* amount options */
.amount-options {
	display: flex;
	flex-flow: row wrap;
	margin-top: 10px }

	@media (min-width:1180px) { .amount-options { justify-content: center }}

.amount-options > label {
    flex: 0 0 auto;
	font-weight: normal;
	padding: 6px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
	border: 1px solid #DDDDDD;
	border-radius: 6px;
	cursor: pointer }

.amount-options > label:last-of-type { margin-right: 0 }

.amount-options input[type="radio"]:checked + label,
.amount-options label:has(input[type="radio"]:checked) {
	color: #FFFFFF;
	background: var(--blue) }

#otherAmountWrapper { 
	width: 100%;
	max-width: 200px }

#customAmount {
	display: flex;
	width: 100%;
	height: auto;
	font-size: 14px;
	color: #000000;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 15px;
	margin: 0;
	border: 1px solid var(--blue);
	border-radius: 6px;
	outline: 0;
	background-color: #FFFFFF }


/* recurring option */
fieldset.recurring {
	display: flex;
	flex-flow: row wrap }

	@media (min-width:1180px) { fieldset.recurring { justify-content: center }}

fieldset.recurring label {
	display: flex;
	flex-flow: row nowrap;
	align-content: flex-start; 
	align-items: flex-start;
	font-size: 16px;
	line-height: 26px;
	color: #000000;
	font-weight: normal;
	text-transform: none }

	@media (min-width:1180px) { fieldset.recurring label { align-content: center; align-items: center; font-size: 14px;
	line-height: 24px }}

#recurringCheckbox { 
	display: inline-block;
    position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
	border: 1px solid #DDDDDD;
	border-radius: 2px;
	margin-top: 5px;
	margin-right: 15px;
	background-color: white;
	cursor: pointer }

	@media (min-width:1180px) { #recurringCheckbox { width: 30px; height: 30px; margin-top: 0 }}

#recurringCheckbox:checked {
    border-color: var(--blue);
    background-color: var(--blue) }


/* email */
#addr_email { border-color: var(--blue) }

	@media (min-width:1180px) { #addr_email { width: 250px; margin: auto }}


/* mailing address */
fieldset.mailing {
	display: grid;
	grid-column-gap: 10px;
	grid-row-gap: 0;
	grid-template-columns: auto auto 75px auto;
	grid-template-areas:
    'heading heading heading heading'
    'note note note note'
    'first-name-label first-name-label last-name-label last-name-label'
	'first-name first-name last-name last-name'
    'street-address-label street-address-label street-address-label street-address-label'
	'street-address street-address street-address street-address'	
	'city-label city-label state-label zip-label'
	'city city state zip' }

	@media (min-width:1180px) { 
		fieldset.mailing {
			grid-template-areas:
				'heading heading heading heading heading heading'
				'note note note note note note'
				'first-name-label first-name-label last-name-label last-name-label street-address-label street-address-label'
				'first-name first-name last-name last-name street-address street-address'
				'city-label city-label city-label city-label state-label zip-label'
				'city city city city state zip' } }

fieldset.mailing legend { grid-area: heading }

fieldset.mailing p.note {
	grid-area: note;
	margin-bottom: 20px }

	@media (min-width:1180px) { fieldset.mailing label { display: flex; text-align: left; align-content: center; align-items: center; margin: 5px 0 15px }}

fieldset.mailing label.firt-name-label { grid-area: first-name-label }

fieldset.mailing input.firt-name { grid-area: first-name }

fieldset.mailing label.last-name-label { grid-area: last-name-label }

fieldset.mailing input.last-name { grid-area: last-name }

fieldset.mailing label.street-address-label { grid-area: street-address-label }

fieldset.mailing input.street-address { grid-area: street-address }

fieldset.mailing label.city-label { grid-area: city-label }

fieldset.mailing input.city { grid-area: city }

fieldset.mailing label.state-label { grid-area: state-label }

fieldset.mailing select.state { 
	grid-area: state;
	display: flex;
	font-size: 14px;
    color: #000000;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 15px;
    margin: 5px 0 15px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23666" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M5.516 7.548l4.484 4.486 4.484-4.486"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    background-color: #FFFFFF }

fieldset.mailing label.zip-label { grid-area: zip-label }

fieldset.mailing input.zip { grid-area: zip }


/* stripe section */
@media (min-width:1180px) { fieldset.stripe { flex: 0 0 46% }}

#card-element {
    padding: 15px;
    margin-bottom: 20px;
	border: 1px solid var(--blue);
    border-radius: 6px;
	background: #fff }

#card-element.StripeElement--focus {
    border-color: #0077cc;
    box-shadow: 0 0 4px rgba(0, 119, 204, 0.4) }

#card-element.StripeElement--invalid { border-color: #e5424d }

fieldset.stripe button { width: 100% }


/* paypal section */
fieldset.paypal { 
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between }

	@media (min-width:1180px) { fieldset.paypal { flex: 0 0 46% }}

fieldset.paypal legend { 
	flex: 1 1 100%;
	margin-bottom: 20px }

#paypalButton { 
	flex: 0 0 49%;
	background: var(--green) }

	@media (min-width:1180px) { #paypalButton { flex: 1 1 100%; margin-bottom: 10px }}

#paypalRecurringButton { 
	flex: 0 0 49%;
	background: var(--dark) }

	@media (min-width:1180px) { #paypalRecurringButton { flex: 1 1 100%; margin-top: 10px }}

#paypalButton:hover, #paypalRecurringButton:hover { background: transparent }