:root {
	--purple: #8e2b84;
	--purple-dark: #5f145b;
	--white: #ffffff;
	--night: #02010a;
}


/* ----------------------------------------------------- Global Styles ------------------------------------------------- */

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	min-height: 100vh;
}

.gn-ticket-email-notice {
    background: #fff1f1;
    border: 1px solid #dc3545;
    border-left: 5px solid #dc3545;
    border-radius: 5px;
    padding: 20px;
    margin: 25px 0;
    color: #b02a37;
}

.gn-ticket-email-notice strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}

.gn-ticket-email-notice p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* ----------------------------------------------------- Background Styles ------------------------------------------------- */


.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background:
		linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.02) 0%,
		rgba(0, 0, 0, 0.08) 10%,
		rgba(2, 1, 10, 0.62) 25%,
		rgba(2, 1, 10, 0.94) 45%,
		#02010a 65%
	),
	url("https://greensnortonfireworks.co.uk/wp-content/uploads/2026/09/Greens-Norton-Fireworks.jpg")
	center top / cover no-repeat;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(
			circle at 22% 18%,
			rgba(170, 35, 138, 0.18),
			transparent 28%
		),
		radial-gradient(
			circle at 75% 14%,
			rgba(255, 255, 255, 0.08),
			transparent 24%
		);
	pointer-events: none;
}


/* ----------------------------------------------------- Hero Styles ------------------------------------------------- */

.hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	isolation: isolate;
}

.banner-image {
	background-color: var(--night);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
}

.banner-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90%;
}

.banner-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 50%;
	margin: 0;
}



/* ----------------------------------------------------- Content Styles ------------------------------------------------- */

.content {
	width: min(940px, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5vh;
	text-align: center;
}

.content-padding {
	padding: 5%;
}

.content-padding-sm {
	padding: 2.5%;
}

.content-padding-lrg {
	padding: 10%;
}

.content-margin {
	margin: 5% 0;
}


/* ----------------------------------------------------- Date Card Styles ------------------------------------------------- */

.date-card {
	display: inline-block;
	margin-bottom: 24px;
	padding: 13px 18px 11px;
	background: #ffffff;
	color: var(--purple-dark);
	border: 7px solid var(--purple);
	transform: rotate(4deg);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.28);
}

.date-card span {
	display: block;
}


/* ----------------------------------------------------- Event Details Styles ------------------------------------------------- */

.details {
	margin-top: 28px;
	width: min(780px, 100%);
}

.refreshments {
	margin: 8px 0 6px;
}

.prices {
	margin: 4px 0 0;
}


/* ----------------------------------------------------- Ticket Release Styles ------------------------------------------------- */

.release-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.release {
	margin-top: 30px;
	padding: 14px 24px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: rgba(95, 20, 91, 0.84);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 0 24px rgba(142, 43, 132, 0.45);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.release-link:hover,
.release-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.release-link:hover .release,
.release-link:focus-visible .release {
	background: var(--purple);
	box-shadow: 0 0 35px rgba(142, 43, 132, 0.75);
}


/* ----------------------------------------------------- Link Styles ------------------------------------------------- */

.site-link {
	display: inline-block;
	margin-top: 24px;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.65);
	padding-bottom: 3px;
}

.site-link:hover,
.site-link:focus-visible {
	border-bottom-color: #ffffff;
}

.tribe-events-back {
	display: none
}

/* ----------------------------------------------------- Note Styles ------------------------------------------------- */

.note {
	margin: 10px 0 0;
	opacity: 0.9;
}

.footer-note {
	margin-top: 34px;
	max-width: 680px;
	opacity: 0.88;
}


/* ----------------------------------------------------- Tickets Page Styles ------------------------------------------------- */

.tickets-page {
	min-height: 100vh;
	padding: 0;
	justify-content: space-between;
}

.tickets-page > .container-fluid {
	position: relative;
	z-index: 2;
	width: 100%;
}

.tickets-event-content {
	text-align: left;
}

.tickets-event-content .date-card {
	margin: 0 0 35px 0;
	text-align: center;
}

.date-month {
	font-size: 7.2rem;
}

.date-year {
	font-size: 6rem;
}

.tickets-event-content .details {
	width: 100%;
	max-width: 600px;
	margin-top: 30px;
	text-align: left;
}

.event-times {
	margin-bottom: 10px;
}

.tickets-event-content .refreshments {
	margin: 10px 0;
}

.tickets-event-content .prices {
	margin-top: 10px;
}

.tickets-event-content .note {
	max-width: 550px;
	margin-top: 20px;
}


/* ----------------------------------------------------- Ticket Plugin Styles ------------------------------------------------- */

.tickets-plugin-column {
	display: flex;
	align-items: center;
}

.tickets-plugin-wrap {
	width: 100%;
	padding: 35px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 0 35px rgba(142, 43, 132, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}


/* ----------------------------------------------------- Sponsor Bar Styles ------------------------------------------------- */

.sponsor-bar {
	position: relative;
	z-index: 3;
	width: 100%;
	margin-top: auto;
	background: rgba(2, 1, 10, 0.96);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sponsor-logo img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

.sponsor-text {
	color: #ffffff;
}


/* ----------------------------------------------------- Menu Styles ------------------------------------------------- */

.menu ul {
	padding: 0;
	margin: 0;
}

.menu li {
	list-style: none;
	display: inline-block;
	padding: 3px 5px;
	background-image: none;
	margin-bottom: 10px;
}

.menu a {
	color: white;
	text-decoration: none;
}

.menu-item-15 {
	background-color: var(--gold) !important;
	color: var(--white) !important;
	padding: 20px;
	border: none !important;
	font-weight: 500;
	margin-top: 20px;
}

.menu-item-14 {
	background-color: transparent !important;
	color: var(--white) !important;
	padding: 20px;
	border: 1px solid var(--gold);
	font-weight: 500;
	margin-top: 20px;
}

.menu-item-84 {
	background-color: transparent !important;
	color: var(--white) !important;
	padding: 20px;
	border: 1px solid var(--gold);
	font-weight: 500;
	margin-top: 20px;
}

.menu-item-14:hover {
	background-color: var(--gold);
	color: var(--white) !important;
}

.menu-item-84 {
	background-color: var(--gold);
	color: var(--white) !important;
}

.menu ul li ul {
	position: absolute;
	left: -999em;
	z-index: 9999 !important;
	width: auto;
	text-align: left;
	padding-top: 10px;
	padding-bottom: 10px;
}

.menu ul li ul li {
	display: block;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 20px;
}

.menu ul li:hover ul,
.menu ul li ul:hover {
	left: auto;
}


/* ----------------------------------------------------- Menu Arrow Styles ------------------------------------------------- */

.menu li > a:after {
	content: '  ▾';
	vertical-align: 1px;
}

.menu li > a:only-child:after {
	content: '';
}


/* ----------------------------------------------------- Header And Banner Image Styles ------------------------------------------------- */

header {
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
}

.logo {
	max-width: 200px;
	z-index: 99999;
	position: relative;
}


.back-button {
	background-color: var(--brand-blue);
	border-radius: 50%;
	width: 70px;
	height: 70px;
	line-height: 70px;
	text-align: center;
	display: block;
	font-size: 50px;
	color: var(--white) !important;
	text-decoration: none !important;
	margin: 40px 0;
	border: none;
	cursor: pointer;
}


/* ----------------------------------------------------- Button Styles ------------------------------------------------- */

button {
	cursor: pointer;
	padding: 10px 20px;
	font-weight: 500;
	margin-top: 20px;
	transition-property: all;
	transition-duration: 500ms;
}

.btn-gold {
	background-color: var(--gold) !important;
	color: var(--white) !important;
	border: none !important;
}

.btn-gold:hover {
	background: var(--white) !important;
	color: var(--gold) !important;
}


/* ----------------------------------------------------- Footer Styles ------------------------------------------------- */

footer {
	padding: 50px 5%;
	background-color: white !important;
}

footer p,
footer a {
	color: black;
	font-size: 14px;
}


/* ----------------------------------------------------- 2200px + ------------------------------------------------- */

@media only screen and (min-width: 2200px) {

}


/* ----------------------------------------------------- Smaller than 2200px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1800px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1750px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1650px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1550px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1450px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1350px ------------------------------------------------- */

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

	.slider-image {
		width: calc(50% - 10px);
		min-width: calc(50% - 10px);
	}

}


/* ----------------------------------------------------- Smaller than 1250px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1125px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 1080px ------------------------------------------------- */

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

	.caption-wrap .caption {
		font-size: 30px;
	}

}


/* ----------------------------------------------------- Smaller than 1024px - iPad Landscape ------------------------------------------------- */

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

	.testimonial {
		margin-bottom: 40px;
		padding: 18px;
	}

	.bg-orange img {
		max-width: 50px;
	}

}


/* ----------------------------------------------------- Smaller than 991px ------------------------------------------------- */

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

	.caption-wrap .caption {
		font-size: 25px;
		padding: 16px 20px !important;
	}

	.menu li {
		padding: 1px 12px 2px 12px;
	}

	.banner-overlay {
		min-height: 80vh;
		padding-top: 100px !important;
	}

	.tickets-plugin-column {
		margin-top: 40px;
	}

}


/* ----------------------------------------------------- Smaller than 870px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 800px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 768px - iPad Portrait ------------------------------------------------- */

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

	.mobile-center {
		text-align: center !important;
	}

	.mobile-left {
		text-align: left !important;
	}

	.mobile-margin-top {
		margin-top: 20px;
	}

	.content-padding-sm {
		padding: 5%;
	}

	.metaslider .caption-wrap {
		width: 90% !important;
	}


	.logo {
		max-width: 165px;
	}

	.slider-container {
		margin-bottom: 30px;
	}

	.woocommerce {
		padding: 130px 5% 5% 5%;
	}

	.woocommerce ul.products {
		width: 100%;
	}

	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product {
		width: 100% !important;
	}

	.woocommerce ul.products li.product a img {
		width: 33% !important;
	}

	h2.woocommerce-loop-product__title {
		max-width: 65%;
		font-size: 35px !important;
	}

}


/* ----------------------------------------------------- Smaller than 767px ------------------------------------------------- */

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

	.tickets-page {
		justify-content: flex-start;
	}

	.tickets-event-content {
		text-align: center;
	}

	.tickets-event-content .date-card {
		margin-bottom: 30px;
	}

	.tickets-event-content .details {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.tickets-event-content .note {
		margin-left: auto;
		margin-right: auto;
	}

	.tickets-plugin-column {
		margin-top: 40px;
	}

	.tickets-plugin-wrap {
		padding: 25px 20px;
	}

	.date-month {
		font-size: 5.5rem;
	}

	.date-year {
		font-size: 4.5rem;
	}

	.sponsor-bar {
		text-align: center;
	}

	.sponsor-logo {
		margin-bottom: 15px;
	}

	.sponsor-logo img {
		margin: 0 auto;
	}
	


	.event-heading-row {
		align-items: center !important;
		text-align: center;
	}

	.date-card-column {
		width: 100%;
		justify-content: center;
		margin-bottom: 25px;
	}

	.event-heading-row .date-card {
		margin-left: auto;
		margin-right: auto;
	}

	.event-heading-row .eyebrow,
	.event-heading-row h1 {
		text-align: center;
	}
	
	
	.banner-image {
		padding: 5px 15px;
	}

	.banner-image a {
		width: 100%;
		max-width: 100%;
	}

	.banner-image img {
		width: 80%;
		max-width: 300px;
		height: auto;
		max-height: none;
	}

}



/* ----------------------------------------------------- Smaller than 700px ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than Mobile ------------------------------------------------- */

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

	.hero {
		min-height: 100vh;
	}

	.content {
		margin-top: 4vh;
	}

	.date-card {
		margin-left: 0;
		margin-bottom: 34px;
		border-width: 5px;
	}

	.details {
		margin-top: 24px;
	}

	.release {
		width: 100%;
	}

	.psac-slider-and-carousel .owl-nav {
		width: 118% !important;
		left: -9%;
	}

	.psac-slider-and-carousel .owl-nav .owl-next,
	.psac-slider-and-carousel .owl-nav .owl-prev {
		background: rgba(255, 255, 255, 1) !important;
	}

}


/* ----------------------------------------------------- Smaller than 540px ------------------------------------------------- */

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

	.content-padding {
		padding: 7%;
	}

	.tickets-plugin-wrap {
		padding: 20px 15px;
	}

}


/* ----------------------------------------------------- Smaller than 450px ------------------------------------------------- */

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

}