@charset "utf-8";

/* HERO */
	.hero {
		display: grid;
		position: relative;
		z-index: 1;
		}
	.hero-no-cutout.hero {
		height: 75vh;
		max-height: 108rem;
		min-height: 32rem;
		}
	.hero-image,
	.hero-info {
		grid-area: 1 / 1;
		position: relative;
		}
	.hero-image::before,
	.hero-image::after {
		content: '';
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		}
	.hero-image::before {
		z-index: 2;
		}
	.hero-image::after {
		z-index: 3;
		}
	.hero-image.hero-overlay-highlight::before,
	.hero-image.hero-overlay-highlight-perris::before {
		background-color: var(--mywp-highlight);
		opacity: 0.3;
		}
	.hero-image.hero-overlay-color::before,
	.hero-image.hero-overlay-color-perris::before {
		background-color: var(--mywp-color);
		opacity: 0.3;
		}
	.hero-image.hero-overlay-highlight-perris::after {
		background-color: var(--mywp-white);
		}
	.hero-image.hero-overlay-color-perris::after {
		background-color: var(--mywp-white);
		}
	.hero-image.hero-overlay-highlight-perris::after,
	.hero-image.hero-overlay-color-perris::after {
		-webkit-mask-image: url('../png/name.png');
		mask-image: url('../png/name.png');
		-webkit-mask-position: center center;
		mask-position: center center;
		-webkit-mask-size: 32rem auto;
		mask-size: 32rem auto;
		-webkit-mask-repeat: repeat;
		mask-repeat: repeat;
		mix-blend-mode: color-dodge;
		opacity: 0.05;
		}
	@media (min-width: 60em) {
		.hero-image.hero-overlay-highlight-perris::after,
		.hero-image.hero-overlay-color-perris::after {
			-webkit-mask-size: 48rem auto;
			mask-size: 48rem auto;
			}
	}
	.hero-media {
		height: 100%;
		}
	.hero-picture,
	.hero-picture > *,
	.hero-media > video {
		height: 100%;
		object-fit: cover;
		object-position: center;
		position: absolute;
		width: 100%;
		}
	.hero-info {
		padding: 0 var(--mywp-mg-pad);
		z-index: 4;
		}
	.hero-no-cutout .hero-info {
		align-items: center;
		display: flex;
		}
	.hero-has-cutout .hero-info {
		align-items: center;
		align-self: center;
		display: grid;
		grid-gap: 2rem;
		margin: 4rem auto;
		}
	.hero-holder {
		text-align: center;
		}
	.hero-no-cutout .hero-holder {
		margin: 8rem auto 4rem;
		max-width: 128rem;
		width: 100%;
		}
	.hero-header {
		color: var(--mywp-white);
		font-size: 3rem;
		font-style: italic;
		font-weight: var(--mywp-heavy);
		line-height: 1em;
		text-shadow: 0.1em 0.1em 0.3em var(--mywp-shadow-color);
		}
	.hero-buttons.buttons-group {
		margin: 4rem 0 0;
		}
	.hero-buttons.buttons-group > .button {
		margin: 0 0 1rem 0;
		}
	.hero-buttons.buttons-group > .button + .button {
		margin-left: 1rem;
		}
	@media (min-width: 40em) {
		.hero-has-cutout .hero-info {
			grid-gap: 0;
			grid-template-columns: 1fr 1fr;
			margin: 4rem auto;
			}
		.hero-has-cutout .hero-holder {
			display: flex;
			justify-content: flex-end;
			text-align: left;
			width: 100%;
			}
		.hero-has-cutout .hero-container {
			max-width: 64rem;
			width: 100%;
			}
		.hero-no-cutout .hero-header {
			font-size: 5rem;
			}
	}
	@media (min-width: 60em) {
		.hero-has-cutout .hero-info {
			margin: 8rem auto;
			}
		.hero-has-cutout .hero-header {
			font-size: 4rem;
			}
		.hero-no-cutout .hero-header {
			font-size: 8rem;
			}
	}
	@media (min-width: 80em) {
		.hero-has-cutout .hero-info {
			margin: 10rem auto;
			}
		.hero-has-cutout .hero-header {
			font-size: 6rem;
			}
		.hero-no-cutout .hero-header {
			font-size: 9rem;
			}
	}
	@media (min-width: 90em) {
		.hero-has-cutout .hero-header {
			font-size: 7.5rem;
			}
		.hero-no-cutout .hero-header {
			font-size: 10rem;
			}
	}