/* ***** */
/* Fonts */
/* ***** */
@import
	url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Paytone+One&display=swap')
	;

/* ********* */
/* Variables */
/* ********* */
:root {
	--PRIMARY-COLOUR: #E81898;
	--BACKGROUND-COLOUR: #F7F5FF;
	--DONATION-PAGE: #E83E8C;
	--FAST-PAYMENTS-PAGE: #E83E8C;
	--INMEMORY-PAGE: #C23B9A;
	--FUNDRAISING-PAGE: #8B3FD1;
	--TEAM-PAGE: #6C4CCF;
	--RAFFLE-PAGE: #5367D6;
	--TOMBOLA-PAGE: #3A8DDE;
	--EVENT-PAGE: #2FA8D7;
	--MEMBERSHIP-PAGE: #2CB7B5;
	--AUCTION-PAGE: #2F9E7A;
	--LOTTERY-PAGE: #61B45A;
	--MEMBERSLOTTERY-PAGE: #8DBA4A;
	--GIFTVOUCHER-PAGE: #D4B52C;
	--SHOP-PAGE: #F2A93B;
	--POPUP-PAGE: #F47B4A;
	--LIVEMEETING-PAGE: #84645D;
	--CHARITY-HUB: #7B2CBF;
	--CHARITY-WALL: #7B2CBF;
	--SUPPORTER-WALL: #7B2CBF;
	--CAMPAIGN-WALL: #7B2CBF;
	--H-COLOUR: #111B4D;
	--P-COLOUR: #43485C;
	--A-COLOUR: #E81898;
	--WHITE-COLOUR: #FFFFFF;
	--BORDER-COLOUR: #E2DDED;
	--MUTED-COLOUR: #D9DCEF;
}

/* ******** */
/* Features */
/* ******** */
.feature {
	border: 4px solid transparent;
}

.feature:hover {
	border: 4px solid rgba(123, 44, 191, 0.18);
	border-radius: 40px;
	background-color: var(--WHITE-COLOUR) !important;
}

/* ********* */
/* Reactions */
/* ********* */
.reaction-btn {
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.1s ease;
}

.reaction-btn:hover {
	transform: scale(1.1);
	opacity: 0.85;
}

/* ************* */
/* Hero gradient */
/* ************* */
#herogradient {
	background: linear-gradient(135deg, var(--PRIMARY-COLOUR) 0%, #8F34C5
		55%, #5E2A7E 100%);
}

#herogradient h1, #herogradient h2, #herogradient h3, #herogradient h4,
	#herogradient p {
	color: var(--WHITE-COLOUR);
}

#herogradient a:not(.btn) {
	color: var(--WHITE-COLOUR);
}

#herogradient .btn-primary {
	background-color: var(--WHITE-COLOUR);
	border-color: var(--WHITE-COLOUR);
	color: var(--PRIMARY-COLOUR);
}

#herogradient .btn-primary:hover, #herogradient .btn-primary:focus {
	background-color: var(--BACKGROUND-COLOUR);
	border-color: var(--BACKGROUND-COLOUR);
	color: #5E2A7E;
}

#herogradient .btn-outline-primary {
	background-color: transparent;
	border-color: var(--WHITE-COLOUR);
	color: var(--WHITE-COLOUR);
}

#herogradient .btn-outline-primary:hover, #herogradient .btn-outline-primary:focus
	{
	background-color: var(--WHITE-COLOUR);
	border-color: var(--WHITE-COLOUR);
	color: var(--PRIMARY-COLOUR);
}

/* **** */
/* Hero */
/* **** */
#hero {
	background-color: var(--WHITE-COLOUR);
}

#hero h1 {
	font-family: "Paytone One", sans-serif;
	color: var(--H-COLOUR);
	font-weight: 400;
}

#hero p {
	font-family: "Nunito Sans", sans-serif;
	color: var(--P-COLOUR);
	font-weight: 400;
}

#page-navigation-button {
	padding-left: 0.75rem;
}

.pt-6 {
	padding-top: 4rem;
}

/* ********** */
/* Typography */
/* ********** */
body {
	font-family: "Nunito Sans", sans-serif;
	background: var(--BACKGROUND-COLOUR);
	color: var(--P-COLOUR);
}

h1 {
	font-family: "Paytone One", sans-serif;
	color: var(--H-COLOUR);
	font-weight: 400;
}

h2, h3, h4, h5, h6 {
	font-family: "Paytone One", sans-serif;
	color: var(--H-COLOUR);
	font-weight: 400;
}

p, li {
	color: var(--P-COLOUR);
}

a {
	color: var(--A-COLOUR);
	text-decoration: none;
}

/* ********** */
/* Navigation */
/* ********** */
#page-navigation {
	background: var(--WHITE-COLOUR);
}

.page-navigation-menu a {
	color: var(--H-COLOUR);
	font-family: "Nunito Sans", sans-serif;
	font-weight: 800;
	margin-left: 1rem;
}

/* ******* */
/* Buttons */
/* ******* */
.btn {
	border-radius: 40px;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 700;
}

.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled {
	color: var(--WHITE-COLOUR);
}

.btn-secondary, #header-button:hover, #header-share-button, .btn-primary:hover
	{
	background-color: var(--WHITE-COLOUR);
	color: var(--theme-color, var(--PRIMARY-COLOUR));
	border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
}

.btn-primary, #header-button, #header-share-button:hover, .btn-secondary:hover
	{
	background-color: var(--theme-color, var(--PRIMARY-COLOUR));
	color: var(--WHITE-COLOUR);
	border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
}

/* ***** */
/* Cards */
/* ***** */
.card {
	background-color: var(--WHITE-COLOUR);
	border: 1px solid var(--BORDER-COLOUR);
	border-radius: 6px;
	box-shadow: 0 3px 10px rgba(17, 27, 77, 0.05);
	transition: box-shadow 0.2s ease;
}

.card:hover {
	box-shadow: 0 5px 16px rgba(17, 27, 77, 0.08);
}

/* Card header */
.card>.card-header {
	background-color: var(--WHITE-COLOUR) !important;
	border: 0;
	border-bottom: 2px solid var(--theme-color, var(--BORDER-COLOUR));
}

.card>.card-header h1, .card>.card-header h2, .card>.card-header h3,
	.card>.card-header h4, .card>.card-header h5, .card>.card-header h6 {
	color: var(--H-COLOUR) !important;
}

/* Card header links */
.card>.card-header a {
	display: block;
	width: 100%;
	color: var(--H-COLOUR) !important;
	font-family: "Paytone One", sans-serif;
	font-weight: 400;
	text-decoration: none;
}

.card>.card-header a:hover, .card>.card-header a:focus, .card>.card-header a[aria-expanded="true"],
	.card>.card-header a[aria-expanded="false"] {
	color: var(--H-COLOUR) !important;
}

/* Card header icons */
.card>.card-header svg {
	color: var(--theme-color, var(--PRIMARY-COLOUR)) !important;
}

/* Card body */
.card>.card-body, .card>.collapse>.card-body, .card>.collapsing>.card-body
	{
	background-color: var(--WHITE-COLOUR);
	color: var(--P-COLOUR);
}

.card .card-body p {
	color: var(--P-COLOUR);
	margin-bottom: 0.5rem;
}

.card .card-body strong {
	color: var(--H-COLOUR);
}

/* Lists inside cards */
.card .card-body ul, .card .card-body ol {
}

.card .card-body li {
	color: var(--P-COLOUR);
}

.card .card-body li:last-child {
}

/* Card links */
.card .card-body a {
	color: var(--theme-color, var(--PRIMARY-COLOUR));
	font-weight: 700;
}

.card .card-body a:hover, .card .card-body a:focus {
	color: #5E2A7E;
	text-decoration: none;
}

/* Help links */
.card .help-link {
	color: var(--theme-color, var(--PRIMARY-COLOUR));
	font-weight: 800;
}

.card .help-link:hover, .card .help-link:focus {
	color: #5E2A7E;
}

/* ************************ */
/* Level 2 expandable area */
/* ************************ */

.card .help-description>div {
	background-color: #F6F3FC;
	border: 1px solid #E7E1F3;
	border-radius: 6px;
	padding: 1rem !important;
	margin-top: 0.5rem !important;
}

.card .help-description>div>ul a, .card .help-description>div>ol a,
	.card .help-description>div>a {
	color: var(--PRIMARY-COLOUR);
}

.card .help-description>div>ul a:hover, .card .help-description>div>ol a:hover,
	.card .help-description>div>a:hover {
	color: var(--H-COLOUR);
}

/* *********************** */
/* Level 3 expandable area */
/* *********************** */

.card .help-description .help-description>div {
	background-color: var(--WHITE-COLOUR);
	border: 1px solid #E7E1F3;
	border-radius: 6px;
	padding: 1rem !important;
	margin-top: 0.5rem !important;
}

.card .help-description .help-description a {
	color: var(--PRIMARY-COLOUR);
}

.card .help-description .help-description a:hover, .card .help-description .help-description a:focus
	{
	color: var(--H-COLOUR);
}

/* Nested lists */
.card .help-description ul, .card .help-description ol {
}

.card .help-description li {
}

.card .help-description li:last-child {
}

/* Nested icons */
.card .help-description svg {
	color: var(--theme-color, var(--PRIMARY-COLOUR));
}

/* Nested headings */
.card .help-description strong {
	color: var(--H-COLOUR);
	font-weight: 800;
}

/* Card subsection headings */
.card .card-body h5, .card .card-body h6 {
	color: var(--H-COLOUR);
}

/* Nested content inside cards */
.card .card-body .section-content, .card .card-body .alert, .card .card-body .alert-secondary
	{
	box-shadow: none;
}

.card .card-body .section-content {
	padding: 0.65rem;
}

/* Tables inside cards */
.card .table {
}

.card .table th {
	color: var(--H-COLOUR);
	background-color: #FAF9FD;
	font-weight: 800;
	border-bottom: 1px solid #E1DCEB;
}

.card .table td {
	color: var(--P-COLOUR);
	border-color: #EEEAF5;
	vertical-align: middle;
}

/* Forms inside cards */
.card .form-control, .card .form-select {
	border-color: #DDD8EC;
	color: var(--P-COLOUR);
	background-color: var(--WHITE-COLOUR);
}

.card .form-control:focus, .card .form-select:focus {
	border-color: var(--PRIMARY-COLOUR);
	box-shadow: 0 0 0 0.15rem rgba(123, 44, 191, 0.12);
}

/* Buttons inside cards */
.card .btn {
}

/* ****** */
/* Header */
/* ****** */
#page-title-row {
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: var(--WHITE-COLOUR);
}

#header-text {
	color: var(--H-COLOUR);
}

/* **** */
/* Tile */
/* **** */
.tile {
	border-radius: 6px;
}

/* ******* */
/* Section */
/* ******* */
.section, .section strong, .section h1, .section h2, .section h3,
	.section h4, .section p, .section svg {
	color: var(--WHITE-COLOUR);
}

/* ************* */
/* Section title */
/* ************* */
.section-title {
	background-color: var(--BACKGROUND-COLOUR);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* *************** */
/* Section content */
/* *************** */
.section-content {
	background-color: var(--BACKGROUND-COLOUR);
	border-radius: 6px;
}

.section-content h1, .section-content h2, .section-content h3,
	.section-content h4 {
	color: var(--H-COLOUR);
}

.section-content p, .section-content svg {
	color: var(--P-COLOUR);
}

.section-content a {
	color: var(--A-COLOUR);
}

/* ****************** */
/* Page theme colours */
/* ****************** */
#fast-payments-page {
	--theme-color: var(--FAST-PAYMENTS-PAGE);
}

#donation-page {
	--theme-color: var(--DONATION-PAGE);
}

#fundraising-page {
	--theme-color: var(--FUNDRAISING-PAGE);
}

#raffle-page {
	--theme-color: var(--RAFFLE-PAGE);
}

#event-page {
	--theme-color: var(--EVENT-PAGE);
}

#lottery-page {
	--theme-color: var(--LOTTERY-PAGE);
}

#members-lottery-page {
	--theme-color: var(--MEMBERSLOTTERY-PAGE);
}

#voucher-page {
	--theme-color: var(--GIFTVOUCHER-PAGE);
}

#tombola-page {
	--theme-color: var(--TOMBOLA-PAGE);
}

#membership-page {
	--theme-color: var(--MEMBERSHIP-PAGE);
}

#auction-page {
	--theme-color: var(--AUCTION-PAGE);
}

#shop-page {
	--theme-color: var(--SHOP-PAGE);
}

#livemeeting-page {
	--theme-color: var(--LIVEMEETING-PAGE);
}

#group-fundraising-page {
	--theme-color: var(--TEAM-PAGE);
}

#charity-wall {
	--theme-color: var(--CHARITY-WALL);
}

#charity-hub {
	--theme-color: var(--CHARITY-HUB);
}

#campaign-wall {
	--theme-color: var(--CAMPAIGN-WALL);
}

#supporter-wall {
	--theme-color: var(--SUPPORTER-WALL);
}

/* ***************** */
/* Themed page scope */
/* ***************** */
:is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section {
	background-color: var(--theme-color, var(--PRIMARY-COLOUR));
}

:is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-title, :is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-content {
	background-color: var(--WHITE-COLOUR);
}

:is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .dropdown-item, :is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-title h1, :is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-title h2, :is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-title h3, :is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .section-title h4 {
	color: var(--theme-color, var(--PRIMARY-COLOUR));
}

:is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .page-navigation-menu a {
	color: var(--theme-color, var(--H-COLOUR));
}

:is(
    #supporter-wall, #fundraising-page, #donation-page, #fast-payments-page, #raffle-page,
	#event-page, #auction-page, #voucher-page, #members-lottery-page,
	#membership-page, #shop-page, #charity-wall, #charity-hub,
	#campaign-wall, #group-fundraising-page, #tombola-page, #lottery-page,
	#livemeeting-page
) .tile {
	border: 1px solid var(--theme-color, var(--BACKGROUND-COLOUR));
}

/* ****** */
/* Footer */
/* ****** */
#page-footer-languages-row {
	visibility: hidden;
	display: none;
}

#page-footer {
	background-color: var(--H-COLOUR);
	color: var(--WHITE-COLOUR);
	padding-top: 2.25rem;
}

#page-footer h1, #page-footer h2, #page-footer h3, #page-footer h4,
	#page-footer h5, #page-footer h6 {
	color: var(--WHITE-COLOUR);
}

#page-footer p, #page-footer li, #page-footer small {
	color: var(--MUTED-COLOUR);
}

#page-footer a {
	color: var(--WHITE-COLOUR);
}

#page-footer a:hover, #page-footer a:focus {
	color: #D8A7F0;
}

#page-footer svg {
	color: var(--WHITE-COLOUR);
}

#page-footer hr {
	display: block;
	visibility: visible;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	opacity: 1;
}

#page-footer-address-row {
	padding-top: 1.5rem;
}

/* ****** */
/* Alerts */
/* ****** */
.alert, .alert-secondary {
	border: 1px solid #DEE2E6;
	border-radius: 6px;
	background-color: var(--WHITE-COLOUR);
}

.alert svg {
	color: var(--PRIMARY-COLOUR);
}

/* ************** */
/* Responsive logo */
/* ************** */
@media ( min-width : 0) {
	#logo {
		min-width: 130px;
		max-width: 130px;
		padding: 1rem;
	}
}

@media ( min-width : 576px) {
	#logo {
		min-width: 200px;
		max-width: 200px;
		padding: 1rem;
	}
}

@media ( min-width : 768px) {
	#logo {
		min-width: 200px;
		max-width: 200px;
		padding: 1rem;
	}
}

@media ( min-width : 992px) {
	#logo {
		min-width: 200px;
		max-width: 200px;
		padding: 1rem;
	}
}

@media ( min-width : 1200px) {
	#logo {
		min-width: 200px;
		max-width: 200px;
		padding: 1rem;
	}
}