/* ***** */
/* 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: #A452B9;
	--BACKGROUND-COLOUR: #f6f6ff;
	--DONATION-PAGE: #F44336;
	--INMEMORY-PAGE: #E81E63;
	--FUNDRAISING-PAGE: #9C27B0;
	--TEAM-PAGE: #673AB7;
	--RAFFLE-PAGE: #3F51B5;
	--TOMBOLA-PAGE: #2196F3;
	--EVENT-PAGE: #03A9F4;
	--MEMBERSHIP-PAGE: #00BCD4;
	--AUCTION-PAGE: #009688;
	--LOTTERY-PAGE: #4CAF50;
	--MEMBERSLOTTERY-PAGE: #8BC34A;
	--GIFTVOUCHER-PAGE: #CDDC39;
	--SHOP-PAGE: #FFC107;
	--POPUP-PAGE: #FF5722;
	--LIVEMEETING-PAGE: #795548;
	--CHARITY-HUB: #A452B9;
	--CHARITY-WALL: #A452B9;
	--SUPPORTER-WALL: #A452B9;
	--CAMPAIGN-WALL: #A452B9;
	--H-COLOUR: #40424A;
	--P-COLOUR: #40424A;
	--A-COLOUR: #A452B9;
	--WHITE-COLOUR: white;
}

#herogradient {
	background: linear-gradient(180deg, #A452B9 0%, #4A2553 100%);
}

#herogradient h2, #herogradient p {
	color: white;
}

#hero {
	background-color: white;
}

#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;
}

body {
	font-family: "Nunito Sans", sans-serif;
	background: #f6f6ff;
}

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

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

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

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

h5 {
	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: white;
}

#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;
}

.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled {
	color: white !important;
}

/* Buttons */
.btn-secondary, #header-button:hover, #header-share-button:hover,
	.btn-primary:hover {
	background-color: white;
	color: var(--theme-color, var(--PRIMARY-COLOUR)) !important;
	border: 1px solid var(--PRIMARY-COLOUR);
	font-weight: 700;
	font-family: "Nunito Sans", sans-serif;
}

.btn-primary, #header-button, #header-share-button, .btn-secondary:hover
	{
	background-color: var(--PRIMARY-COLOUR);
	color: white !important;
	border: 1px solid var(--PRIMARY-COLOUR);
	font-weight: 700;
	font-family: "Nunito Sans", sans-serif;
}

/* ***** */
/* Cards */
/* ***** */
.section-content .card-header svg {
	color: white;
}

/* ****** */
/* Header */
/* ****** */
#page-title-row {
	padding-top: 3rem;
	padding-bottom: 3rem;
	background-color: white;
}

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

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

/* ******* */
/* Section */
/* ******* */
.section h1, .section h2, .section h3, .section h4, .section p, .section svg
	{
	color: white;
}

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

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

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

/* map each page to a single theme variable */
#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);
}

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

/* Scope all rules to any container whose ID ends with "-page" */
#supporter-wall, #fundraising-page, #donation-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 backgrounds */ .section { background-color:var(--theme-color,
	var(--PRIMARY-COLOUR));
	
}

.section-title {
	background-color: var(--WHITE-COLOUR, var(--BACKGROUND-COLOUR));
}

.section-content {
	background-color: var(--WHITE-COLOUR, var(--BACKGROUND-COLOUR));
}

/* Typography colors */
.dropdown-item, .section-title h1, .section-title h2, .section-title h3,
	.section-title h4, #page-footer h1, #page-footer h2, #page-footer h3,
	#page-footer h4, #page-footer a {
	color: var(--theme-color, var(--PRIMARY-COLOUR));
}

#page-navigation-menu a, #page-footer h4, #page-footer svg {
	color: var(--theme-color, var(--H-COLOUR));
}

/* Buttons */
.btn-secondary, #header-button:hover, #header-share-button:hover,
	.btn-primary:hover {
	background-color: white;
	color: var(--theme-color, var(--PRIMARY-COLOUR)) !important;
	border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
	font-weight: 700;
	font-family: "Nunito Sans", sans-serif;
}

.btn-primary, #header-button, #header-share-button, .btn-secondary:hover
	{
	background-color: var(--theme-color, var(--PRIMARY-COLOUR));
	color: white !important;
	border: 1px solid var(--theme-color, var(--PRIMARY-COLOUR));
	font-weight: 700;
	font-family: "Nunito Sans", sans-serif;
}

/* Tiles */
.tile {
	border: 1px solid var(--theme-color, var(--BACKGROUND-COLOUR));
}

}
#page-footer {
	background-color: white;
}

#page-footer hr {
	visibility: hidden;
	display: none;
}

.alert, .alert-secondary {
	border: 1px solid #DEE2E6;
	border-radius: 6px;
	background-color: white;
}

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

.card-header {
	background-color: var(--PRIMARY-COLOUR);
}

.card-header h1, .card-header h2, .card-header h3, .card-header h4,
	.card-header a {
	color: white;
	font-weight: 400;
}

@media ( min-width :0px) {
	#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
	}
}