/* .form-section */

.form-section {
	margin: 1.5em 0 3em;
}

.form-section br {
	display: none;
}

.form-section p, .form-section div.options {
	margin: .5em -.375em 1em;
	overflow: hidden;
}

.form-section div.options p {
	margin-left: 0;
	margin-right: 0;
}

.form-section label {
	float: left;
	box-sizing: border-box;
	padding: .125em .375em;
}

.form-section button {
	margin: .125em .375em;
}

.form-section input[type="checkbox"], .form-section input[type="radio"] {
	margin-left: .375em;
}

.form-section p.captcha > #captcha > div {
	padding: 0 .375em;
}

@media (max-width: 480px) {
	.form-section p {
		margin-left: -.125em;
		margin-right: -.125em;
	}

	.form-section label {
		padding-left: .125em;
		padding-right: .125em;
	}

	.form-section button {
		margin-left: .125em;
		margin-right: .125em;
	}

	.form-section input[type="checkbox"], .form-section input[type="radio"] {
		margin-left: .125em;
	}

	.form-section p.captcha > #captcha > div {
		padding: 0 .125em;
	}
}

.form-section label b {
	color: #006C85;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 87%;
	display: block;
	margin-bottom: .125em;
}

.form-section label.error {
	color: #DD0000;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 87%;
	line-height: 1;
	margin: 0.25em 0;
	clear: left;
}

.form-section label > input,
.form-section label > select,
.form-section label > textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	font: inherit;
	max-width: 100%;
	min-width: 100%;
	resize: vertical;
}

.form-section .comments-field {
	width: 100%;
}

.form-section .first-name-field,
.form-section .last-name-field,
.form-section .email-address-field,
.form-section .phone-number-field {
	width: 50%;
}

.form-section .email-address-field {
	clear: left;
}

.form-section .title-field {
	width: 16%;
}

.form-section .title-field ~ .first-name-field,
.form-section .title-field ~ .last-name-field {
	width: 42%;
}

.form-section .address-field {
	width: 100%;
}

.form-section .city-field {
	clear: left;
	width: 50%;
}

.form-section .state-field {
	width: 20%;
}

.form-section .postal-code-field {
	width: 30%;
}

.form-section .name-on-card-field {
	width: 100%;
}

.form-section .card-number-field {
	width: 75%;
}

.form-section .card-code-field {
	width: 25%;
}

.form-section .expiration-date-field {
	width: 40%;
}

.form-section .expiration-date-field {
	width: 40%;
}

.form-section #expiration-month {
	width: 55%;
	max-width: 55%;
	min-width: 55%;
	float: left;
	clear: left;
}

.form-section #expiration-year {
	width: 42%;
	max-width: 42%;
	min-width: 42%;
	float: right;
}

.form-section .submit {
	margin: 2em 0;
	text-align: center;
}

.form-section .submit button {
	background-color: #4D99A9;
	color: white;
	border: none;
	font-size: 125%;
	padding: .5em 2em;
	border-radius: .5em;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-weight: bold;
}

.form-section.loading .submit button {
	/* base64 encoded /include/images/spinner-dark.svg ensures spinner loads immediately */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgoJPHBhdGggc3Ryb2tlPSIjRkZGIiBmaWxsPSJub25lIiBkPSJNLjUsNEEzLjUsMy41IDAgMSwwIDcuNSw0Ij4KCQk8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdHlwZT0icm90YXRlIiBkdXI9IjFzIiBmcm9tPSIwIDQgNCIgdG89IjM2MCA0IDQiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+Cgk8L3BhdGg+Cjwvc3ZnPg==);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.5em;
	text-indent: -1000%;
	overflow: hidden;
}

.form-section input[type="checkbox"],
.form-section input[type="radio"] {
	vertical-align: middle;
	width: 1em;
	height: 1em;
	cursor: pointer;
}

.form-section input[type="checkbox"] + label,
.form-section input[type="radio"] + label {
	vertical-align: middle;
	font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
	font-size: 87%;
	float: none;
	padding: 0;
	cursor: pointer;
}

.form-section input[type="checkbox"] + label + br,
.form-section input[type="radio"] + label + br {
	display: inline;
}

.form-section #is-donation ~ .donation,
.form-section #is-billing-address-separate + label ~ * {
	display: none;
}

.form-section #is-donation:checked ~ .donation,
.form-section #is-billing-address-separate:checked + label ~ * {
	display: block;
}

.form-section #is-billing-address-separate:checked + label:after {
	content: ':';
}


/* .amount-section */

.amount-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-section div.options .amount-section {
	margin: 2em .375em 1em;
}

@media (max-width: 480px) {
	.form-section div.options .amount-section {
		margin-left: .125em;
		margin-right: .125em;
	}
}

.amount-section > input[type="radio"],
.amount-section > input[type="radio"] + label + br {
	display: none;
}

.amount-section > input[type="radio"] + label {
	font: inherit;
	font-size: 180%;
	font-weight: bold;
	text-align: center;
	width: 3.75em;
	height: 2.75em;
	background: #D9E9ED;
	color: #006D84;
	border-radius: .5em;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.amount-section > input[type="radio"]:disabled + label {
	cursor: default;
}

.amount-section > label[for="amount-other-radio"] input {
	display: inline-block;
	width: 2.75em;
	margin-left: .1em;
	border: none;
	background: rgba(255, 255, 255, .25);
	font: inherit;
	font-size: 87%;
	color: inherit;
}

.amount-section > label.error {
	width: 100%;
	text-align: center;
	color: #DD0000;
}

.amount-section > label[for="amount-other-radio"] > span + span,
.amount-section > input[type="radio"]:checked + label[for="amount-other-radio"] > span {
	display: none;
}

.amount-section > input[type="radio"]:checked + label[for="amount-other-radio"] > span + span {
	display: block;
}

.amount-section > input[type="radio"] + label:before {
	content: '';
	height: .25em;
}

.amount-section > input[type="radio"] + label:after {
	content: '';
	height: .15em;
}

.amount-section > input[type="radio"]:checked + label {
	background: #4D99A9;
	color: white;
}

@media (max-width: 500px) {
	.amount-section > input[type="radio"] + label {
		font-size: 180%;
		line-height: 1.5;
		width: 100%;
		margin: .2em 0;
		height: auto;
		flex-direction: row;
	}

	.amount-section > label[for="amount-other-radio"] input {
		width: 5em;
	}
}