@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

#page {
	overflow-x: hidden;
}

.main-content__container {
	max-width: 800px;
	margin: auto;
}

/* Globals */
@font-face {
	font-family: "Century Gothic";
	src: url("./GOTHICB.TTF") format("truetype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Century Gothic";
	src: url("./GOTHICBI.TTF") format("truetype");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Century Gothic";
	src: url("./GOTHIC.TTF") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Century Gothic";
	src: url("./GOTHICI.TTF") format("truetype");
	font-weight: 400;
	font-style: italic;
}

:root {
	--color-primary: #dc3232;
	--color-secondary: #444b98;
	--color-heading: #c0392b;
	--color-accent: #c0392b;
	--color-dark: #444b98;
	--color-light: #ffffff;
	/* --color-bg: #CDD5E4; */
	--color-bg: #cdd5e463;

	--font: "Century Gothic", "metropolis", sans-serif;
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box !important;
}

html {
	scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font);
	font-weight: 700;
	color: var(--color-heading);
}

h1.title.page-title {
	font-size: 2.15rem;
	line-height: 2.25rem;
}

h2,
.h2 {
	font-size: 1.5rem;
	line-height: 2.25rem;
}

h3,
.h3 {
	font-size: 1.25rem;
	line-height: 1.6875rem;
}

body {
	font-family: var(--font);
	color: var(--color-dark);
	background-color: white;
	background-image: none !important;
}

p a,
.crm-container a,
.crm-container a:link,
.crm-container a:visited {
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

p a:hover,
p a:active,
p a:focus {
	color: var(--color-dark);
}

.crm-container table {
	font-size: 15px;
}

.keyline--teal {
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

/* >= 700px */
@media (min-width: 43.75rem) {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 1.5rem;
		margin-bottom: 1.5rem;
	}

	h1.title.page-title {
		font-size: 3.75rem;
		line-height: 4.5rem;
	}

	h2,
	.h2 {
		font-size: 2.25rem;
		line-height: 3.375rem;
	}

	h3,
	.h3 {
		font-size: 1.5rem;
		line-height: 2.25rem;
	}

	.main-content__container {
		padding-top: 50px;
	}
}

/* >= 992px */
@media screen and (min-width: 62rem) {
	h1.title.page-title {
		font-size: 3.4rem;
	}
}

/* Breadcrumbs */
.region.region--breadcrumb.grid-full {
	display: block;
	grid-row: 1 / span 1;
	grid-column: 2 / -1;
	padding-left: 0;
	padding-right: 2rem;
	margin-top: 2rem;
	margin-left: calc(3.65rem);
}

.region.region--breadcrumb>* {
	margin-bottom: 0;
}

.region.region--breadcrumb .breadcrumb__content {
	padding-left: 0;
	padding-top: 0;
	padding-bottom: 0;
}

@media screen and (max-width: 1200px) {
	.region.region--breadcrumb.grid-full {
		margin-left: 4.25rem;
	}
}

@media screen and (max-width: 767px) {
	.region.region--breadcrumb.grid-full {
		margin-left: 3rem;
	}
}

@media screen and (max-width: 699px) {
	.region.region--breadcrumb.grid-full {
		margin-left: 0.5rem;
	}
}

/* #block-breadcrumbs {
    margin-bottom: 3.125rem;
} */

#block-breadcrumbs a:hover,
#block-breadcrumbs a:active,
#block-breadcrumbs a:focus {
	color: var(--color-dark);
	text-decoration: none;
}

#block-pagetitle {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* Legends */
.crm-public-form-item {
	display: block;
}

.crm-container fieldset {
	margin-top: 40px;
}

.crm-container fieldset legend {
	font-weight: 700;
	color: var(--color-heading);
	font-size: 20px;
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	width: 100%;
	padding: 0;
	appearance: none;
}

.crm-container fieldset legend:after {
	content: "";
	height: 3px;
	background-color: var(--color-primary);
	display: inline-block;
	margin-left: 10px;
}

#crm-container.crm-public #intro_text {
	margin-bottom: 2rem;
}

#crm-container.crm-public #intro_text>h2:first-child {
	margin-top: 0;
}

#crm-container.crm-public #intro_text img {
	width: 100% !important;
	height: 400px !important;
	object-fit: contain;
	object-position: center top;
}

/* #crm-container.crm-public #intro_text p:first-of-type {
	font-size: 21px;
	font-weight: 600;
	color: var(--color-accent);
} */

@media screen and (max-width: 767px) {
	#intro_text img {
		height: 300px !important;
	}
}

@media screen and (max-width: 500px) {
	#intro_text img {
		height: 200px !important;
	}
}

/* Buttons */

.crm-container .crm-button.crm-form-submit {
	display: inline-block;
	background-color: var(--color-secondary);
	color: var(--color-light);
	padding: 12px 20px;
	text-decoration: none;
	border-radius: 2em;
	margin-top: 20px;
	border: none;
	text-shadow: none;
	font-family: var(--font);
	font-size: 16px;
	float: none !important;
}

.crm-container .crm-button.crm-form-submit:hover,
.crm-container .crm-button.crm-form-submit:active,
.crm-container .crm-button.crm-form-submit:focus {
	text-decoration: none;
	color: var(--color-light);
	background-color: var(--color-dark);
	border: none;
}

#crm-submit-buttons {
	height: auto;
}

/* CRM Form */
#priceset-div {
	margin-bottom: 40px;
}

.crm-section *[class]:not(.crm-credit_card_type-icons a) {
	float: none !important;
	width: auto;
}

.crm-container .crm-section .content {
	margin-left: 0;
}

.crm-container .crm-section .label {
	width: auto;
	text-align: left;
	display: block;
}

.one_time-section .one_time-content,
.monthly-section .monthly-content,
.contribution_amount-content {
	display: flex;
}

@media screen and (max-width: 767px) {

	.one_time-section .one_time-content,
	.monthly-section .monthly-content,
	.contribution_amount-section .contribution_amount-content {
		flex-wrap: wrap;
	}
}

.one_time-section .one_time-content:not(:last-child),
.monthly-section .monthly-content:not(:last-child),
.contribution_amount-section .contribution_amount-content:not(:last-child) {
	margin-right: 7px;
}

.one_time-section .one_time-content .price-set-row,
.monthly-section .monthly-content .price-set-row,
.contribution_amount-section .contribution_amount-content .price-set-row {
	flex: 1;
}

@media screen and (max-width: 767px) {

	.one_time-section .one_time-content .price-set-row,
	.monthly-section .monthly-content .price-set-row,
	.contribution_amount-section .contribution_amount-content .price-set-row {
		flex-basis: 100px;
		/* flex-grow: 0; */
	}
}

.one_time-section .one_time-content .price-set-row:last-of-type,
.monthly-section .monthly-content .price-set-row:last-of-type,
.contribution_amount-content .price-set-row:last-of-type {
	position: absolute;
	z-index: -10;
	opacity: 0;
}

/* Grid Layout for Forms */
.billing_name_address-section,
.crm-profile-name-name_and_address,
#on-behalf-block fieldset,
.honoree-name-email-section {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 32px;
}

@media (max-width: 43.74rem) {

	.billing_name_address-section,
	.crm-profile-name-name_and_address,
	#on-behalf-block fieldset,
	.honoree-name-email-section {
		grid-template-columns: 1fr;
	}
}

/* Other Amount */
.crm-section.other_amount-section {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.crm-section.other_amount-section .label {
	color: var(--color-light) !important;
	/* background-color: var(--color-accent); */
	background-color: var(--color-secondary);
	padding: 15px 10px;
	padding-top: 15px !important;
	margin-right: 10px;
}

.crm-section.other_amount-section .label label {
	margin-bottom: 0;
	color: var(--color-light) !important;
}

.crm-section.other_amount-section .content {
	width: 250px;
	max-width: 100%;
}

@media screen and (max-width: 767px) {
	.crm-section.other_amount-section {
		flex-direction: column;
		align-items: flex-start;
	}

	.crm-section.other_amount-section>*:first-child {
		margin-bottom: 7px;
	}

	.crm-section.other_amount-section .content {
		width: 100%;
	}
}

/* Total Amount */
#pricesetTotal {
	margin-top: 20px;
	display: flex;
	font-weight: 600;
	display: none;
}

#pricesetTotal>div:first-child {
	margin-right: 7px;
}

#pricesetTotal>div:first-child:after {
	content: ":";
}

/* Recurring Section */
.is_recur-section,
.is_for_organization-section {
	position: absolute;
	z-index: -10;
	opacity: 0;
}

/* Input Fields */
#crm-container input[type="text"],
#crm-container select {
	border: 1px solid var(--color-dark);
	border-radius: 0 !important;
	font-size: 16px !important;
	padding: 5px !important;
	border-style: solid !important;
	box-shadow: none;
	appearance: none !important;
	-moz-appearance: none;
	-webkit-appearance: none !important;
	outline: none;
	background-color: transparent !important;
	background-image: none !important;
	height: 50px;
	width: 100%;
}

.crm-container div.select2-container {
	min-width: 0;
}

.select2-container .select2-choice>.select2-chosen {
	margin-right: 0;
	width: 200px;
}

.select2-container {
	width: 100% !important;
	min-width: 0;
}

.crm-container .select2-container .select2-choice {
	color: var(--color-dark);
	border: 1px solid var(--color-dark);
	border-radius: 0 !important;
	font-size: 16px !important;
	padding: 5px !important;
	border-style: solid !important;
	box-shadow: none;
	appearance: none !important;
	-moz-appearance: none;
	-webkit-appearance: none !important;
	outline: none;
	background-color: transparent !important;
	background-image: none !important;
	height: 50px;
	display: flex;
	align-items: center;
	width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.3rem;
	height: 1.3rem;
	padding: 5px;
}

input[type="checkbox"]:checked {
	background-image: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

input[type="checkbox"]:checked:before {
	content: "\f00c";
	font: var(--fa-font-solid);
	font-weight: 600;
	font-size: 18px;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	color: var(--color-light);
}

input[type="radio"]:checked {
	background-image: none;
	background-size: cover;
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.crm-container textarea {
	width: 100%;
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
	border-radius: 0;
}

/* Labels */

[dir="ltr"] input[type="checkbox"]+label,
[dir="ltr"] input[type="radio"]+label {
	padding-left: 0;
	margin-left: 5px;
	margin-right: 10px;
}

.crm-section>.label label {
	margin-bottom: 5px;
	display: inline-block;
}

#crm-container.crm-public .form-item {
	margin-bottom: 15px;
}

#crm-container.crm-public .billing_name_address-section>.crm-section {
	margin-bottom: 15px;
}

.price-set-row>span {
	position: relative;
}

.price-set-row>span>label {
	background-color: var(--color-dark);
	color: var(--color-light);
	padding: 15px 10px;
	display: block;
	text-align: center;
}

.price-set-row>span>input {
	position: absolute;
	opacity: 0;
	margin: 0;
}

#crm-container.crm-public .price-set-row .price-set-option-content>label>.crm-price-amount-label {
	color: var(--color-light);
}

#crm-container.crm-public .price-set-row>.price-set-option-content>label>span {
	margin-right: 0 !important;
}

.price-set-row>span>label>.crm-price-amount-label-separator,
.price-set-row>span>label>.crm-price-amount-amount {
	display: none;
}

.crm-section .label.option-label>label {
	font-size: 17px;
	color: var(--color-heading);
	font-weight: 600;
}

.crm-section td.labels {
	display: flex;
}

#crm-container.crm-public .contribution_amount-content .price-set-row .price-set-option-content .crm-price-amount-amount {
	display: block;
	color: var(--color-light);
}

.one_time-section,
.monthly-section {
	display: none;
}

.one_time-section.active,
.monthly-section.active {
	display: block;
}

.one_time-section>.label,
.monthly-section>.label {
	display: none !important;
}

.contribution_amount-section>.label label {
	font-weight: 700;
	font-size: 20px;
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	width: 100%;
	padding: 0;
	appearance: none;
}

.contribution_amount-section>.label label:after {
	content: "";
	height: 3px;
	background-color: var(--color-primary);
	display: inline-block;
	margin-left: 10px;
}

.price-set-row>span.highlight>label {
	/* background-color: var(--color-accent); */
	background-color: var(--color-secondary);
}

/* Footer Text */
#footer_text {
	display: block;
	margin-top: 40px;
	background-color: transparent;
	color: var(--color-dark);
	font-weight: 500;
	/* padding: 15px; */
}

#footer_text .footer_title {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 15px;
}

/* Credit Card Section */
.firstpay-container input,
.firstpay-container input[type="number"],
.firstpay-container select {
	border: 1px solid var(--color-dark);
	border-radius: 0 !important;
	font-family: var(--font) !important;
	font-size: 16px !important;
	color: var(--color-dark) !important;
	padding: 5px !important;
	border-style: solid !important;
	box-shadow: none;
	appearance: none !important;
	-moz-appearance: none;
	-webkit-appearance: none !important;
	outline: none;
	background-color: transparent !important;
	background-image: none !important;
	/* height: 45px; */
	width: 250px;
}

/* In Tribute To Section */
.honor_block-group>.crm-public-form-item .content {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

@media screen and (max-width: 400px) {
	.honor_block-group>.crm-public-form-item .content {
		flex-direction: column;
		align-items: stretch;
	}
}

.honor_block-group>.crm-public-form-item .content input {
	position: absolute;
	opacity: 0;
	z-index: -10;
}

.honor_block-group>.crm-public-form-item .content .description {
	display: none;
}

.honor_block-group>.crm-public-form-item .content label {
	display: inline-block;
	background-color: var(--color-dark);
	color: var(--color-light);
	padding: 12px 20px;
	text-decoration: none;
	border-radius: 0;
	border: 2.5px solid var(--color-dark);
	margin-top: 20px;
	text-shadow: none;
	font-family: var(--font);
	font-size: 18px;
	font-weight: 500;
	margin-left: 5px;
	margin-right: 5px;
	min-width: 130px;
	cursor: pointer;
	text-align: center;
}

@media screen and (max-width: 500px) {
	.honor_block-group>.crm-public-form-item .content label {
		padding: 12px 10px;
	}
}

@media screen and (max-width: 400px) {
	.honor_block-group>.crm-public-form-item .content label:last-of-type {
		margin-top: 0;
	}
}

.honor_block-group>.crm-public-form-item .content input[name="soft_credit_type_id"]:checked+label {
	/* background-color: var(--color-accent);
	border-color: var(--color-accent); */
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-light);
}

/* Toggle Buttons */
.duration-button-section,
.onbehalf-button-section {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.duration-button-section .toggle-btn,
.onbehalf-button-section .toggle-btn {
	display: inline-block;
	background-color: var(--color-dark);
	color: var(--color-light);
	padding: 12px 20px;
	text-decoration: none;
	border-radius: 0;
	border: 2.5px solid var(--color-dark);
	margin-top: 20px;
	text-shadow: none;
	font-family: var(--font);
	font-size: 18px;
	font-weight: 500;
	margin-left: 5px;
	margin-right: 5px;
	min-width: 130px;
	cursor: pointer;
	text-align: center;
	min-width: 241px;
}

@media screen and (max-width: 600px) {
	.onbehalf-button-section {
		flex-direction: column;
		align-items: stretch;
	}

	.duration-button-section .toggle-btn,
	.onbehalf-button-section .toggle-btn {
		padding: 12px 10px;
		min-width: 0;
	}
}

@media screen and (max-width: 500px) {

	.duration-button-section .toggle-btn,
	.onbehalf-button-section .toggle-btn {
		padding: 12px 10px;
		min-width: 0;
	}
}

.radiobuttons-form-radios-as-buttons .crm-radio-wrapper.selected,
#crm-radio-is_recur_radio-wrapper .selected {
	/* background-color: var(--color-accent);
	border-color: var(--color-accent); */
	background: var(--color-secondary) !important;
	border-color: var(--color-secondary);
	color: var(--color-light);
}

/* Newsletter Section */
.newsletter {
	margin-top: 40px !important;
}

.newsletter .label label {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px !important;
}

.newsletter input {
	margin-right: 5px !important;
}

.newsletter-helper .description.content {
	color: var(--color-dark) !important;
}

#billing-payment-block {
	margin-bottom: 30px;
}

.recaptcha-section {
	margin-top: 20px;
	margin-bottom: 20px;
}