/* ! Banners: defaults */
.banners {
	margin-bottom: 2em;
}
	.banner {
		position: relative;
	}
		.banner-link {
			display: block;
		}
			.banner-img {
				display: block;
				width: 100%;
				height: auto;
			}
			.banner-container {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				padding: 1em;
				padding: 5%;

				display: flex;
				align-items: center;
				justify-content: center;
			}
			.upperleft    .banner-container { align-items: flex-start; justify-content: flex-start; }
			.uppercentre  .banner-container { align-items: flex-start; justify-content: center;     text-align: center; }
			.upperright   .banner-container { align-items: flex-start; justify-content: flex-end;   }
			.middleleft   .banner-container { align-items: center;     justify-content: flex-start; }
			.middlecentre .banner-container { align-items: center;     justify-content: center;     text-align: center; }
			.middleright  .banner-container { align-items: center;     justify-content: flex-end;   }
			.lowerleft    .banner-container { align-items: flex-end;   justify-content: flex-start; }
			.lowercentre  .banner-container { align-items: flex-end;   justify-content: center;     text-align: center; }
			.lowerright   .banner-container { align-items: flex-end;   justify-content: flex-end;   }

			.banner-text {
				display: block;
				width: 100%;
				margin: 0;
				max-width: 800px;
				color: #fff;

				text-transform: none;
				transition: color .2s;
			}
			.banner-link:hover .banner-text {
				opacity: .5;
			}
				.banner-title {
					color: inherit;
					font-size: 50px;
					font-size: calc(1.5em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-subtitle {
					color: inherit;
					font-size: 30px;
					font-size: calc(1em + 2vw);
					margin-top: 0;
					margin-bottom: 0;
					text-transform: none;
				}
				.banner-desc {

				}

	/* ! Banners: Featured - slider */
	.featured-banners {
		--banner-min-height: 250px;
		--banner-max-height: 700px;
		/* this sets vertical boundaries to Featured Banners
		 and prevents them from shrinking or growing beyond set height values
		 when viewport is either too short (mobile) or unknowingly large (wide monitors) */

		line-height: 0;
		max-height: var(--banner-max-height, 700);
		overflow: hidden;
	}
		.featured-banners .banner-img {
			object-fit: cover;
			min-height: var(--banner-min-height, 200);
			max-height: var(--banner-max-height, 700);
		}

		.featured-banners .banner-title,
		.featured-banners h2 {
			font-family: var(--font-primary-heavy);
			font-size: calc(2em + 4vw);
			letter-spacing: 0.05em;
			text-transform: uppercase;
			-webkit-text-stroke: 3px #fff;
			color: rgba(255,255,255,.1);
		}
		.featured-banners .banner-subtitle,
		.featured-banners h3 {
			font-family: var(--font-primary-heavy);
			font-size: calc(2em + 1.5vw);
		}
		.featured-banners .button {
			max-width: fit-content;
			margin: 1rem auto;
		}

		@media only screen and (min-width: 1400px) {
			.featured-banners .button {
				position: absolute;
				right: 1rem;
				bottom: 2rem;
			}
		}

	/* ! Banners: Grid Fixed item width */
	.grid-fixed.banners {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 102%;
		margin: 0 -1% 0;
		padding: 0;
	}
		.grid-fixed .banner {
			display: inline-block;
			width: 25%;
			padding: 1em 1%;
		}
		.grid-fixed .banner-link {
			display: flex;
			align-items: center;
			height: 100%;
		}
		.grid-fixed .banner-img {
			transition: transform .3s;
		}
		.grid-fixed .banner-link:hover .banner-img {
			transform: scale(1.1);
		}
		.grid-fixed .banner-title {
			font-size: 20px;
		}

	/* ! Banners: Grid Flex item width
	(usually for sponsor logos where width is unknown. Set module settings to something like Width:0 and Height:100px ) */
	.grid-flex.banners {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 102%;
		margin: 0 -1% 1em;
		padding: 0;
	}
		.grid-flex .banner {
			width: auto;
			margin: 1em 1%;
			padding: 0;
		}
		.grid-flex .banner-link {

		}
		.grid-flex .banner-img {
			display: block;
			width: auto;
			height: 100%;
			max-height: 100px;
			margin: 0;
			transition: all .3s;
		}
		.grid-flex .banner:hover .banner-img {
			transform: scale(1.1);
		}
		.grid-flex .banner-title {
			font-size: 20px;
		}



/* ! Demo Reel as Featured banner  */
#banner-demoreel {
	background-color: #000;
}
	.demoreel {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		position: relative;

		margin: 0 auto;
		max-height: var(--banner-max-height);
	}
	.demoreel-iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		/* width: 100%; */
		aspect-ratio: 16 / 9;
		width: 100%;
		height: 100%;

		margin: auto;
		transform: translate(-50%, -50%);
		pointer-events: none; /* Prevent interactions with the video */
	}
	/* Optional content above the video */
	.video-content {
		position: relative;
		z-index: 1;
		text-align: center;
		color: white;
		padding: 20px;
	}
	.toggle-audio {
		position: absolute;
		right: 2rem;
		top: 1rem;
		z-index: 10;
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		min-width: 0;
		padding: .25rem;
		line-height: 1;
	}
	.toggle-audio.off use + use {
		display: none;
	}

	@media only screen and (min-width: 1200px) {
		.toggle-audio {
			right: auto;
			left: calc(50vw + var(--container) / 2 - 1rem);
		}
	}