:root{
	--headerheight: 0px;
	--reference-spacer: 1rem;
}


/* Show View ........... */
.reference-hero-sticky{
	position: relative;
	margin-bottom: calc(2 * var(--reference-spacer));
}

.reference-text-container .badge{
	color: var(--bs-secondary);
	border: 1px solid var(--bs-secondary);
	border-radius: .125em;
}

/* foreground ----------                */

.reference-hero-sticky .foreground-container{
	position: relative;
	display: flex;
	flex-direction: column;
	z-index: 4;
	width: 100%;
	pointer-events: none;
	margin-top: calc(0px - calc(95vh - calc(calc(var(--headerheight) - 1px) - 1px)));
}
.reference-hero-sticky .foreground-container:before{
	content: '';
	position: fixed;
	pointer-events: none;
	z-index: 1;
	top: var(--headerheight);
	width:100%;
	height: 45vh;
	background: linear-gradient(rgba(3,32,35,1), rgba(7,79,87,0));
	opacity: 1;
	transition: opacity 1s ease;
}
.reference-hero-sticky .foreground-container.change:before{
	opacity: 0;
}

.reference-hero-sticky .foreground-container .header{
	position: relative;
	align-self: center;
	max-width: 648px;
	height: calc(100vh - calc(calc(var(--headerheight) - 1px) - 1px));
	margin-left: var(--reference-spacer);
	margin-right: var(--reference-spacer);
	margin-top: calc(4 * var(--reference-spacer));
	margin-bottom: 50vh;
	padding: calc(2 * var(--reference-spacer)) var(--reference-spacer) 0 var(--reference-spacer);
	text-align: center;
	color: #fff;
	z-index: 2;
}
.reference-hero-sticky .foreground-container .header h1{
	font-weight: 400;
	text-transform: uppercase;
}

.reference-hero-sticky .foreground-container .shortdescription{
	position: relative;
	align-self: center;
	margin-bottom: calc(100vh - calc(calc(var(--headerheight) - 1px) - 1px));
	max-width: 648px;
	margin-left: var(--reference-spacer);
	margin-right: var(--reference-spacer);
	padding: var(--reference-spacer);
	text-align: center;
	background: var(--bs-secondary);
	color: #fff;
	z-index: 2;
	box-shadow: 0 0 15px rgba(0,0,0,.3);
}

.reference-hero-sticky .foreground-container .shortdescription p{
	margin-bottom: 0;
	line-height: 1.6em;
	font-weight: 500;
	font-size: 1.125em;
}


/* background  ----------                */

.reference-hero-sticky .background-container{
	position: sticky;
	z-index: 3;
	width: 100vw;
	max-width: 100%;
	height: calc(100vh - calc(calc(var(--headerheight) - 1px) - 1px));
	top: calc(var(--headerheight) - 1px);
	pointer-events: none;
	transition: .5s ease;
	filter: saturate(1);
}

.reference-hero-sticky .background-container.change{
	filter: saturate(.2);
}

.reference-hero-sticky .background-container .background{
	position: relative;
	height: 100%;
	width: 100%;
}

.reference-hero-sticky .background-container .background img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* reference-image-container ------------- */
.reference-image-container{
	position: relative;
	margin-bottom: calc(2 * var(--reference-spacer));
	height: 600px;
	width: 100%;
	background: var(--bs-primary);
	transform: translateZ(0);
}
@media (max-width: 576px) {
	.reference-image-container{
		height:300px;
	}
}
.reference-image-container img{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* reference-text-container ------------- */
.reference-text-container{
	margin: calc(4 * var(--reference-spacer)) 0 calc(4 * var(--reference-spacer)) 0;
}

.reference-text-container .tags{
	margin-bottom: calc(1.5 * var(--reference-spacer));
}

.reference-cta-container{
	background: var(--bs-beige);
}
.reference-cta-container .col{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.reference-cta-container h3{
	color: var(--bs-secondary);
}
.reference-cta-container h3, .reference-cta-container p{
	max-width: 80%;
}
.reference-cta-container .btn{
	margin-left: var(--reference-spacer);
	margin-right: var(--reference-spacer);
	max-width: 60%;
}

.reference-next-container{
	margin: calc(3 * var(--reference-spacer)) var(--reference-spacer) calc(2 * var(--reference-spacer)) var(--reference-spacer);
}

.reference-next-container .col{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.reference-next-container .btn:first-child{
	margin-right: 1em;
}