/* 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 }

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

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


/* 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: 18px;
	line-height: 28px;
	color: #000000;
	font-weight: normal }
	
	@media (min-width:1560px) { p { font-size: 22px; line-height: 34px }}


/* 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 {
	font-size: 22px;
	line-height: 24px;
	color: #000000;
	font-weight: bold;
	text-transform: uppercase }

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

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


/* BUTTONS */
a.btn { 
	display: inline-flex; 
	min-height: 35px;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dark);
	padding: 15px 25px;
	border-radius: 2px;
	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 { 
	color: var(--dark);
	transform: scale(0.9);
	background: transparent;
	border: 1px solid var(--blue);
	border-radius: 45px }


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) }


/* 2 MODULES WITH A DONATION FORM IN BETWEEN */
#mod-custom110, #donation_form, #mod-custom117 {
	display: block;
	position: relative;
	max-width: 600px;
	margin: 0 auto }
	
	@media (min-width:601px) and (max-width:1179px) { #mod-custom110, #donation_form, #mod-custom117 { margin-top: 50px }}
	@media (min-width:1180px) { #mod-custom110, #donation_form, #mod-custom117 { max-width: none }}
	@media (min-width:1560px) { #mod-custom110, #donation_form, #mod-custom117 { max-width: 1800px }}


/* SOCIAL */
.social {
	display: flex;
    position: fixed;
    top: inherit;
	right: inherit;
    bottom: 0;
	left: 0;
	width: 100%;
    height: 55px;
    flex-flow: row nowrap;
    align-items: center;
	transform: scaleY(0);
	transform-origin: bottom;
	animation-name: slidein1;
	animation-duration: 0.5s;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
    background-color: #FFFFFF;
	z-index: 999 }

	@keyframes slidein1 {
		0% { transform: scaleY(0) }
		100% { transform: scaleY(1) }}

	@media (min-width:1180px) {
		.social { top: 40%; right: 0; left: inherit; transform: translateY(-25%) scaleY(1) scaleX(0); bottom: inherit; flex-direction: column; width: auto; height: auto; padding: 20px; animation-name: slidein2 }}

	@keyframes slidein2 {
		0% { transform: scaleX(0) }
		100% { transform: scaleX(1) }}

.social a {
	flex: 1 1 auto;
	text-align: center }

.social a svg {
	font-size: calc(10px + 1.5vh);
	color: #555555;
    padding: 0 }

	@media (min-width: 1180px) {
		.social a svg {	color: var(--dark); padding: 15px 0 0 }
		.social a:nth-of-type(1) svg { padding: 0 }}

.social a:hover svg {
	color: var(--blue) }

	@media (min-width: 1180px) { .social a:hover svg { transform: scale(1.25)}}


/* ORDERING */
#wrapper { display: flex; flex-flow: row wrap }
#system-message-container, #donation-complete-page { flex: 1 1 100%; order: 1 }
#wrapper #mod-custom110, #donation-form { flex: 1 1 100%; order: 2 }
#mod-custom117 { flex: 1 1 100%; order: 3 }

/* SCROLL TO TOP */
#wrapper #scrollToTop {
	position: fixed;
	right: 20px;
	bottom: 75px;
	border-radius: 2px;
	transform: scale(0);
	-webkit-transition: all 0.2s 0s ease;
	-moz-transition: all 0.2s 0s ease;
	-o-transition: all 0.2s 0s ease;
	-ms-transition: all 0.2s 0s ease;
	transition: all 0.2s 0s ease;
	overflow: hidden;
	z-index: 1000 }

@media (min-width:1180px) { #wrapper #scrollToTop { bottom: 20px }}

#wrapper.scrolled #scrollToTop {
	transform: scale(1) }

#wrapper.scrolled #scrollToTop .svg-inline--fa { font-size: 60px; color: var(--dark) }


/* PARENTS */
div.section, #donation_form form {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden }

#donation_form form {
	padding: 0 30px }

	@media (min-width:1180px) { div.section, #donation_form form { display: flex; flex-flow: row wrap; align-content: stretch; align-items: stretch; padding: 50px }}
	@media (min-width:1560px) { div.section, #donation_form form { padding: 75px }}

div.section::before {
	display: block;
	content: "";
	width: 100%;
	height: 15em;
	padding: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat }

	@media (min-width:1180px) { div.section::before { display: flex; flex: 0 0 50%; width: auto; height: auto; padding: 0; animation: zoom 60s ease infinite; z-index: -1 }}

	@keyframes zoom {
		0% { background-size: auto 100% }
		50% { background-size: auto 150% }
		100% { background-size: auto 100% }}

div.section > div {
	display: block;
	padding: 40px 30px 0 }

	@media (min-width:1180px) { 
		div.section > div { 
			display: flex; 
			flex: 0 0 48%; 
			flex-flow: row wrap; 
			align-content: center;
			padding: 4% }}

div.section p { padding: 15px 0 }

div.section h2 + p { padding-top: 30px }

	@media (min-width:1560px) { div.section h2 + p { padding-top: 50px }}


/* SEC.1: SUPPORT GLOBAL CONSERVATION */
div.section.one { min-height: 100vh }

div.section.one::before {
	animation-name: appear;
	animation-duration: 20s;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	opacity: 0;
	background-image: url("/images/maxresdefault.webp") }

	@keyframes appear {
		0% { opacity: 0; background-size: auto 100% }
		25% { opacity: 1 }
		100% { opacity: 1; background-size: auto 125% }}

div.section.one h1 span {
	position: relative;
	display: inline-block;  
	-webkit-transform: translateY(200px);
	-moz-transform: translateY(200px);
	-o-transform: translateY(200px);
	-ms-transform: translateY(200px);
	transform: scale(0);
	animation-name: h1reveal;
	animation-duration: 0.5s;
	animation-delay: calc(0.5s + (20ms * var(--i)));
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease;
	animation-fill-mode: forwards }

@keyframes h1reveal {
	0% {
		transform: scale(0)}
	
	100% { 
		transform: scale(1) }}

div.section.one h1 span.end-word { margin-right: 10px }

	@media (min-width:581px) and (max-width:1179px) { div.section.one h1  > br:nth-of-type(2), div.section.one h1  > br:nth-of-type(5) { display: none }}
	@media (min-width:1180px) { div.section.one h1  > br:nth-of-type(3) { display: none } }

div.section.one > div > div:nth-of-type(1), div.section.one div.btn-with-txt {  
	opacity: 0;
	animation-name: reveal;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease;
	animation-fill-mode: forwards }

div.section.one > div > div:nth-of-type(1) { animation-delay: 2.25s }
div.section.one div.btn-with-txt { animation-delay: 2.75s }

@keyframes reveal {
	0% {
		opacity: 0 }
	
	100% { 
		opacity: 1 }}

@media (min-width:1180px) { 
	div.section.one > div > div:nth-of-type(1) { 
		display: flex;
		flex-flow: row nowrap;
		padding: 40px 0 42px 40px;
		margin-top: 20px;
		margin-left: -180px;
		margin-bottom: 40px; 
		background-color: #FFFFFF }}

div.section.one > div > div .fa-iccf { 
	float: right;
	font-size: 90px;
	margin-left: 20px } 

	@media (min-width:600px) { div.section.one > div > div .fa-iccf { font-size: 125px; margin-top: 30px }}

	@media (min-width:1180px) { div.section.one > div > div .fa-iccf { flex: 0 0 150px; float: none; margin: 0 25px 0 0 }}

div.section.one > div > div .fa-iccf .fa-primary { fill: var(--primary) }

div.section.one > div > div .fa-iccf .fa-secondary { fill: var(--secondary); opacity: 1 }

div.section.one > div > div .fa-iccf:hover .fa-primary { fill: var(--blue) }
div.section.one > div > div .fa-iccf:hover .fa-secondary { fill: var(--blue); opacity: 1 }

div.section.one p { display: block; padding: 20px 0 50px }

	@media (min-width:1180px) { div.section.one p { padding: 5px 0 0 0 }}

div.section.one div.btn-with-txt {
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: center }

div.section.one div.btn-with-txt > a.btn {
	flex: 0 0 auto;
	margin-right: 20px;
	margin-bottom: 40px }

div.section.one div.btn-with-txt .mag { display: flex; flex: 0 0 auto; flex-flow: row nowrap; align-content: center; align-items: center; --fa-beat-scale: 0.9; --fa-animation-duration: 2s; margin-right: 10px; transition: all 0.5s ease-in-out 0s }

	@media (min-width:601px) { div.section.one div.btn-with-txt .mag { margin-bottom: 40px } }

div.section.one div.btn-with-txt .mag:hover { transform: scale(0.9) }

div.section.one div.btn-with-txt .mag .fa-arrow-right-from-bracket { --fa-beat-scale: 0.9; --fa-animation-duration: 2s; margin-right: 10px }

div.section.one div.btn-with-txt p {
	flex: 1 1 auto;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0 }

div.section.one div.btn-with-txt em {
	font-weight: normal }


/* SEC.2: Why we're different */
div.section.two::before { background-image: url("/images/unity.webp"); order: 2 }

	@media (min-width:1180px) { div.section.two::before { flex: 0 0 46%; margin-left: 4% }}


/* SEC. 3: Your donation creates global impact */
div.three {	max-width: 1000px; padding: 30px 30px 75px; margin: 0 auto }

	@media (min-width:1180px) { div.three { text-align: center; padding: 50px }}
	@media (min-width:1560px) { div.three { max-width: 1400px; padding: 100px 100px 150px }}

div.three p { padding: 15px 0 }

div.three > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin-bottom: 30px }

div.three > div > div { flex: 0 0 45%; padding-bottom: 15px }

div.three > div > div:last-child { flex: 1 1 100% }

div.three h2 + p { padding-top: 30px }

	@media (min-width:1180px) { div.three h2 + p { padding-top: 50px }}

div.three a.btn { margin-top: 30px }

@media (min-width:1180px) { 
	div.three a.btn { margin-top: 75px }
	div.three a.btn:hover { padding-right: 50px; padding-left: 50px }}


/* SEC. 4: Receive Nature's Chambers */
div.four { 
	width: 100%;
	max-width: 1500px;
	padding: 30px 30px 0;
	margin: 0 auto }

	@media (min-width:1180px) { div.four { display: grid; padding: 50px; grid-column-gap: 0; grid-row-gap: 0; grid-template-columns: auto auto auto; grid-template-areas:
    'info magazine'
    'thanks thanks' }}

	@media (min-width:1180px) { .magazine { grid-area: magazine; margin-bottom: 10px }}
	@media (min-width:1560px) { .magazine { margin-bottom: 20px }}

.info {
	padding: 35px 30px 50px;
	margin-top: 10px;
	background-color: #dfb05e }

	@media (min-width:1180px) { .info { grid-area: info; align-content: center; padding: 25px 50px; margin-top: 0; margin-right: 10px; margin-bottom: 10px }}
	@media (min-width:1560px) { .info { padding: 25px 100px; margin-right: 20px; margin-bottom: 20px }}

.info p { padding-top: 5px }
	
.info h2 + p, .info > p:nth-of-type(3) { padding-top: 30px }

.thanks { 
	padding: 35px 30px 40px;
	margin-top: 10px;
	border: 1px solid var(--blue);
	 }

	@media (min-width:1180px) { .thanks { grid-area: thanks; padding: 30px 50px; margin-top: 0 }}
	@media (min-width:1560px) { .thanks { padding: 35px 100px 40px }}

.thanks p { padding: 0 }

/* SEC. 5: Your trust matters */
div.five {
	max-width: 1500px;
	padding: 50px 0 50px;
	margin: 0 auto }

	@media (min-width:1180px) { div.five { padding: 40px 0 20px }}

div.five > div:nth-of-type(1) { padding: 0 30px }

	@media (min-width:1180px) { div.five > div:nth-of-type(1) { padding: 50px }}
	@media (min-width:1560px) { div.five > div:nth-of-type(1) { padding: 0 50px }}

div.five > div:nth-of-type(1) img {
	float: right;
	width: 25%;
	min-width: 150px;
	margin-top: -10px;
	margin-bottom: 25px;
	margin-left: 50px }

div.five > div:nth-of-type(1) p {
	padding-top: 25px }

div.five > div:nth-of-type(1) > p:nth-of-type(4) { margin-top: 20px }

	@media (min-width:1180px) { div.five > div:nth-of-type(1) > p:nth-of-type(4) { margin-top: 50px }}

div.five > div:nth-of-type(2) { 
	display: flex;
	flex-flow: row nowrap;
	margin-top: 50px }

@media (min-width:1180px) { div.five > div:nth-of-type(2) { margin-bottom: 15px } }

div.five > div:nth-of-type(2) > div:nth-of-type(1) {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 15px;
	margin: 30px;
	border: 1px solid var(--blue) }

	@media (min-width:1180px) { div.five > div:nth-of-type(2) > div:nth-of-type(1) { display: flex; height: 60px; align-content: center; align-items: center; padding: 0 25px; margin: 0 0 0 50px }}

div.five > div:nth-of-type(2) > div:nth-of-type(2) {
	display: none;
	flex: 0 0 75px;
	margin: 10px 30px 10px 10px;
	background-image: url("/images/iccf.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat }

	@media (min-width:601px) { div.five > div:nth-of-type(2) > div:nth-of-type(2) { display: block; margin: 0 50px 0 15px }}
	@media (min-width:1180px) { div.five > div:nth-of-type(2) > div:nth-of-type(2) { height: 60px; margin: 0 50px 0 15px }}

	


/* DONATION FORM */
#donation-form { 
	padding: 50px 0 0 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none }

	@media (min-width:1180px) { #donation-form { padding-top: 0 }}


#donation_form {
	padding: 0 0 50px;
	margin-top: 0;
	border-radius: 0;
    background: none;
    box-shadow: none }

#donation_form .jd-message { margin-bottom: 20px }
#donation_form .form-section-title { display: none }
#donation_form #donation_type { margin-top: 30px }

.default-donation-field {
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	gap: 0;
	margin-bottom: 0 }

.default-donation-field #field_address, .default-donation-field #field_city { flex: 0 0 65%; margin-right: 5% }
.default-donation-field #field_address2, .default-donation-field #field_zip { flex: 0 0 30% }

	@media (max-width:1179px) { 
		.default-donation-field #field_first_name { flex: 0 0 47.5%; margin-right: 5% }
		.default-donation-field #field_last_name { flex: 0 0 47.5% }	}

	@media (min-width:1180px) {
		.default-donation-field #field_city, .default-donation-field #field_address { flex: 1 1 auto; margin-right: 20px }
		.default-donation-field #field_zip, .default-donation-field #field_address2 { flex: 0 0 100px }
		.default-donation-field #field_state { flex: 0 0 30%; margin-right: 5% }}

#r_frequency { padding: 0 25px !important; margin-top: 20px !important }

	@media (min-width:1180px) { #r_frequency { margin-top: 0 !important } }

#tr_frequency::after { 
	display: block;
	content: 'Thank you for your continued support. Email donate@iccfoundation.us to cancel recurring donations, effective immediately.';
	width: 100%;
	font-size: 14px;
	line-height: 22px;
	font-weight: bold }
	
	@media (min-width:1180px) { #tr_frequency::after { font-size: 16px; line-height: 24px; margin-top: 40px !important } }

#donation_form input, #donation_form select {
	display: flex;
	width: 100%;
	height: 50px;
	font-size: 14px;
	color: #000000;
	font-weight: normal;
	letter-spacing: 1px;
	padding: 10px;
	margin: 5px 0 15px;
	border: 1px solid var(--blue) !important;
	border-radius: 0 !important;
	outline: 0;
	background-color: #FFFFFF }

#donation_form input[type="radio"] {  }

#donation_form .required { color: var(--blue) }

#donation_form .formError { opacity: 1 !important }

	@media (max-width:600px) { #donation_form .formError { left: 150px !important }}

#donation_form .formError .formErrorContent { 
	font-size: 13px;
	line-height: 20px;
	padding: 15px;
	border-radius: 0;
	box-shadow: none;
	background: var(--blue) }

#donation_form .formError .formErrorArrow div { background: var(--blue) }

#donation_type > .donation-default-form-group > div.radio-group {
	flex-flow: row wrap;
	width: 100%;
	align-content: center;
	align-items: center;
	gap: 0;
	padding: 20px 0;
	margin-bottom: 0 }

#donation_type > .donation-default-form-group > div.radio-group > label {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	flex: 0 0 auto;
	padding: 0;
	margin: 0 20px 0 0 }

#donation_type > .donation-default-form-group > div.radio-group > label:nth-of-type(1) { padding-right: 20px }

#donation_type > .donation-default-form-group > div.radio-group > label > input { flex: 0 0 auto; width: auto; margin-right: 10px }

#tr_frequency { padding-bottom: 50px }

.help-text {
	font-size: 14px;
    line-height: 22px;
	color: #000000;
	font-weight: bold;
	letter-spacing: 0.5px;
	margin-top: 10px }

#donation_form #donation_typeonetime, #donation_form #donation_typerecurring {
	flex: 0 0 30px;
	color: #000000;
	height: 30px;
	margin: 0 10px 0 0;
	border-radius: 0 }

#amount_container { 
	margin: 20px 0 30px;
    box-shadow: none }

#amount_container .donation-default-switch-amounts {
	display: grid;
	background: none;
	border: 0;
	grid-column-gap: 0; 
	grid-row-gap: 0;
	grid-template-columns: 40px auto 40px auto 40px auto;
	grid-template-areas:
    'box1 sum1 box2 sum2 box3 sum3'
    'box4 sum4 box5 sum5 box6 sum6'
	'box7 sum7 sum7 sum7 sum7 sum7'}

	@media (min-width:1180px) { #amount_container .donation-default-switch-amounts {
		grid-template-columns: 40px 60px 40px 60px 40px 70px 40px 70px 40px 70px 40px 150px 40px 150px;
		grid-template-areas:
			'box1 sum1 box2 sum2 box3 sum3 box4 sum4 box5 sum5 box6 sum6 box7 sum7' }}

#amount_container .donation-default-switch-amounts > input { padding: 0; margin: 0 }
#amount_container .donation-default-switch-amounts > label { display: flex; align-content: center; align-items: center; color: #000000; text-align: left; padding: 0; margin-left: 10px }


/* 25 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(1) { grid-area: box1 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(1) { grid-area: sum1 }

/* 50 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(2) { grid-area: box2 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(2) { grid-area: sum2 }

/* 100 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(3) { grid-area: box3 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(3) { grid-area: sum3 }

/* 250 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(4) { grid-area: box4 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(4) { grid-area: sum4 }

/* 500 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(5) { grid-area: box5 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(5) { grid-area: sum5 }

/* 1000 */
#amount_container .donation-default-switch-amounts > input:nth-of-type(6) { grid-area: box6 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(6) { grid-area: sum6 }

/* other */
#amount_container .donation-default-switch-amounts > input:nth-of-type(7) { grid-area: box7 }
#amount_container .donation-default-switch-amounts > label:nth-of-type(7) { grid-area: sum7 }



.donation-default-switch-amounts label.otheramountlabel {
	color: #000000;
	font-weight: bold;
	background: transparent }

#amount_container > .input-group {
	display: flex;
	flex: 1 1 100%;
	width: 100%;
	flex-flow: row nowrap;
	align-content: center;
	align-items: center;
	margin-top: 0 }

#amount_container > .input-group > span.input-group-text {
	padding-right: 10px }

#amount_container > .input-group #amount {
	flex: 1 1 auto;
	font-weight: normal;
	font-size: inherit;
	margin-top: 0;
	margin-bottom: 0 }

	@media (max-width: 1179px) { #amount_container > .input-group #amount { max-width: none }}

.donation-default-switch-amounts input[type="radio"]:checked + label, .donation-default-switch-amounts label.selected {
	font-weight: normal;
	border-radius: 0 }

#wrapper #donation-form .donation-default-switch-amounts input:checked + label { color: #000000 !important; background-color: transparent !important }

#jdpaymentmethods > .sbjtitle { padding-bottom: 15px }

#jdpaymentmethods .switch-payment-gateway {
	justify-content: space-between;
    margin: 0 0 20px }

	@media (min-width: 1180px) { #jdpaymentmethods .switch-payment-gateway { width: 350px }}

#donation-form .switch-payment-gateway label {
	flex: 0 0 48%;
	align-content: center;
	align-items: center;
	font-size: 14px !important;
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	min-height: 50px;
	padding: 0;
	margin: 0 0 10px 0;
	border-radius: 0 !important;
	background-color: #FFFFFF;
    box-shadow: none }

	@media (min-width:1560px) { #donation-form .switch-payment-gateway label { font-size: 22px; line-height: 34px }}

#donation-form .switch-payment-gateway input:checked + label {
	box-shadow: none !important }

#x_card_num::placeholder, #form-validation-field-0::placeholder, #x_card_code::placeholder {
	font-size: 14px !important;
	color: #000000 !important;
	font-weight: normal !important }

#stripe-card-form:focus-within, #creditcarddivmain:focus-within {
    box-shadow: none !important;
	border: 0 !important;
    border-color: transparent !important }

#creditcarddivmain {
	padding: 0;
	margin: 20px 0 0 0;
    border: 0;
	border-radius: 0;
    background: transparent;
    box-shadow: none }

#sq-cvv, #sq-expiration-date, #sq-card-number, #field_zip_input { height: auto }

#donatedAmount { display: block; width: 100%; font-size: 14px; font-weight: bold; letter-spacing: 1px; max-width: none; margin-top: 20px }

#donatedAmount > .donated-amount { display: flex; flex-flow: row nowrap; height: 50px; margin: 0 0 20px !important; border: 1px solid var(--blue) !important; border-radius: 0 !important; background-color: var(--blue) !important }

#donatedAmount > .donated-amount .donated-amount-label { display: flex; flex: 0 0 200px; justify-content: center; align-content: center; align-items: center; color: #000000; padding: 0 20px; border: 0; border-radius: 0; outline: 0 }

#donatedAmount > .donated-amount .donated-amount-value { display: flex; flex: 1 1 auto; float: none; align-content: center; align-items: center; padding: 0; text-align: left; padding: 0 15px; background-color: #FFFFFF }


.donation-default-form-group .sbjtitle { display: none }

#donation_form input.donation-submit-btn {
	display: inline-flex;
	height: 60px;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 15px 20px;
	border-radius: 0;
	background: var(--dark);
	box-shadow: none;
	transition: all 0.5s ease-in-out 0s;
	cursor: pointer }

	@media (min-width:1180px) { #donation_form input.donation-submit-btn { width: 350px; padding: 15px 30px }}

#donation_form input.donation-submit-btn:hover { 
	color: #000000;
	transform: scale(0.9);
	background-color: #FFFFFF;
	border-radius: 45px }

	@media (min-width:1180px) {
		#donation_form form {
			max-width: 1200px;
			margin: auto }

		#donation_form .jd-message { 
			padding-bottom: 50px;
			margin: auto }}
	
	.default-donation-field label { font-size: 14px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px }
	
	@media (min-width:1180px) {
		.default-donation-field #field_first_name { flex: 0 0 32%; margin-right: 1.5% }
		.default-donation-field #field_last_name { flex: 0 0 32%; margin-right: 1.5% }
		.default-donation-field #field_email { flex: 0 0 32% }

		.default-donation-field #field_address { flex: 0 0 32%; margin-right: 1.5%  }
		.default-donation-field #field_address2 { flex: 0 0 10%; margin-right: 1.5% }
		.default-donation-field #field_city { flex: 0 0 20%; margin-right: 1.5% }
		.default-donation-field #field_zip { flex: 0 0 15%; margin-right: 1.5% }
		.default-donation-field #field_state { flex: 0 0 16%; margin-right: 0 }}
	
	#donation_type { margin: auto }
	
	#donation_type > .donation-default-form-group > div.radio-group > label { font-size: 18px; font-weight: bold; text-transform: uppercase }
	
	#donation_type > .donation-default-form-group > div.radio-group > label > input { margin: 0 10px 0 0 }
	
	#tr_frequency { width: 100% }
	
	#tr_frequency label { display: block; width: 100%; font-size: 18px; font-weight: bold; text-transform: uppercase; text-align: center; padding-bottom: 10px }
	
	#recurringFrequency { display: flex; justify-content: center }
	
	#recurringFrequency select { width: auto; margin: auto }

	div.form-row { width: 100% }
	
	@media (min-width:1180px) { #donation_type > .donation-default-form-group > div.radio-group { justify-content: center }}

	@media (min-width:1180px) { .help-text { text-align: center }}
	
	@media (min-width:1180px) { #amount_container .donation-default-switch-amounts { justify-content: center }}

#donation_form .donation-default-switch-amounts input { flex: 0 0 auto; height: 30px; margin: 0 0 5px }

	@media (min-width:1180px) { #donation_form .donation-default-switch-amounts input { margin: 0 } }

#donation_form .donation-default-switch-amounts label { flex: 0 0 auto; height: 30px; font-size: 14px; font-weight: bold; margin: 0 5px 5px }

#amount_container > .input-group #amount { font-size: 14px; margin: 0 }
	
	@media (min-width: 1180px) { 
		
		#donation_form .donation-default-switch-amounts label { margin: 0 5px }
		
		#donation_form .donation-default-switch-amounts > label:last-child { flex: 1 1 100%; justify-content: center }
		
		#amount_container > .input-group { justify-content: center; margin-top: 10px }
		
		#os_form > div:nth-of-type(8) { width: 100% }
		
		#jdpaymentmethods { display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; margin-top: 30px }
		
		#jdpaymentmethods > label { flex: 1 1 100%; text-align: center }
		
		#creditcarddivmain { display: flex; flex-flow: row wrap; justify-content: center; flex: 1 1 100%; margin: auto }
		
		#creditcarddivmain > div.col-md-12 { margin: 30px 0 40px }
		
		.donation-default-form-group { display: flex; flex: 1 1 100%; flex-flow: row wrap; width: 100%; justify-content: center }
		
		#donation_form .donated-amount-label { font-size: 14px; color: #000000; text-transform: uppercase; font-weight: normal; background-color: var(--blue) !important }
		
		div.form-actions { display: flex; flex: 1 1 100%; flex-flow: row wrap; width: 100%; justify-content: center }
		
		#donatedAmount { width: 350px }
		
		#creditcarddivmain > div.col-md-12 { width: 350px }}


/* ALERTS AND MESSAGES */
#donation-failure-page { 
	display: flex;
	flex-flow: row wrap;
	padding: 30px }

	@media (min-width: 1180px) { #donation-failure-page { justify-content: center; text-align: center }}

#donation-failure-page h1 { 
	flex: 1 1 100%;
	padding-bottom: 15px }

#donation-failure-page .control-group {
	flex: 1 1 100%;
	padding-bottom: 10px }

#donation-failure-page .form-actions {
	flex: 1 1 100% }

#donation-failure-page .form-actions a {
	font-weight: bold;
	color: var(--blue);
	text-transform: uppercase }


/* DONATION COMPLETED */
#donation-complete-page { 
	display: flex;
	flex-flow: row wrap;
	padding: 30px }

	@media (min-width: 1180px) { #donation-complete-page { justify-content: center; text-align: center; padding-top: 75px }}

#donation-complete-page .col-md-12 {
	max-width: 1400px;
	margin: 0 auto }

#donation-complete-page h2 { font-size: 20px; line-height: 28px; font-weight: bold; padding-bottom: 15px }

#donation-complete-page p { padding-bottom: 10px }

#donation-complete-page .col-md-12 > .row:nth-of-type(2) {
	display: none }