/**
 * Non-critical styles for Products page template.
 */


/*
########  ########   #######  ########  ##     ##  ######  ########  ######
##     ## ##     ## ##     ## ##     ## ##     ## ##    ##    ##    ##    ##
##     ## ##     ## ##     ## ##     ## ##     ## ##          ##    ##
########  ########  ##     ## ##     ## ##     ## ##          ##     ######
##        ##   ##   ##     ## ##     ## ##     ## ##          ##          ##
##        ##    ##  ##     ## ##     ## ##     ## ##    ##    ##    ##    ##
##        ##     ##  #######  ########   #######   ######     ##     ######
*/

.template-part-products {
	margin-top: 100px;
	padding: 130px 0 120px;
	background-color: #182528;
	overflow: hidden;
	color: #fff;
}

@media ( max-width: 991px ) {

	.template-part-products {
		margin-top: 60px;
		padding: 60px 0;
	}

}

@media ( max-width: 767px ) {

	.template-part-products {
		margin-top: 50px;
	}

}

.template-part-products .eyebrow {
	text-transform: uppercase;
	font-size: 12px;
	color: #18a2b4;
}

.template-part-products a {
	text-decoration: none;
	color: inherit;
}

.template-part-products * + .nav {
	margin-top: 10px;
}

.template-part-products .nav {
	display: inline-block;
	max-width: 460px;
	margin-bottom: 45px;
	background-color: #334b50;
	border-radius: 20px;
}

@media ( max-width: 767px ) {

	.template-part-products .nav {
		position: relative;
		left: -5vw;
		z-index: 1;
		width: 100vw;
		max-width: none;
		border-radius: 0;
	}

}

@media ( max-width: 767px ) {

	.template-part-products .nav::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 80px;
		height: 100%;
		background-image: linear-gradient( 90deg, rgba( 51, 75, 80, 0 ) 0%, rgba( 51, 75, 80, 1 ) 80% );
		background-position: center center;
		background-size: cover;
		pointer-events: none;
	}

}

.template-part-products .nav ul {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0;
	list-style: none;
}

@media ( max-width: 767px ) {

	.template-part-products .nav ul {
		flex-wrap: nowrap;
		width: 100%;
		padding: 0 80px 0 15px;
		box-sizing: border-box;
		overflow: auto;
	}

}

.template-part-products .nav .nav-item {
	display: inline-block;
	user-select: none;
	padding: 10px 25px;
	border-radius: 20px;
	white-space: nowrap;
	font-weight: 700;
	font-size: 12px;
	color: #c7c7c7;
}

@media ( max-width: 767px ) {

	.template-part-products .nav .nav-item {
		margin: 13px 0;
	}

}

.template-part-products.nav-ready .nav .nav-item {
	cursor: default;
}

@media ( hover: hover ) {

	.template-part-products.nav-ready .nav .nav-item:not( .active ):hover {
		color: #FFF;
	}

}

.template-part-products.nav-ready .nav .nav-item.active {
	background-color: #18a2b4;
	color: #fff;
}

.template-part-products .product {
	display: grid;
	grid-template-columns: 43% 1fr;
	column-gap: 90px;
}

.template-part-products.nav-ready .product:not( .active ) {
	display: none;
}

.template-part-products:not( .nav-ready ) .product + .product {
	margin-top: 120px;
}

@media ( min-width: 768px ) {

	.template-part-products .product {
		min-height: 400px;
	}

	.template-part-products.nav-ready .product {
		min-height: var( --min-height, 400px );
	}

}

@media ( max-width: 767px ) {

	.template-part-products .product {
		display: block;
	}

}

.template-part-products h3 {
	font-size: 34px;
	color: inherit;
}

.template-part-products * + .description {
	margin-top: 15px;
}

.template-part-products .price {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-top: 30px;
}

.template-part-products .price i {
	font-family: "Roboto Slab", serif;
	font-style: normal;
	font-weight: 500;
	font-size: 65px;
}

.template-part-products .pricing-details {
	display: flex;
	column-gap: 15px;
	row-gap: 10px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	list-style: none;
	font-size: 12px;
}

@media ( max-width: 991px ) {

	.template-part-products .pricing-details {
		display: block;
	}

}

.template-part-products .pricing-details > li {
	white-space: nowrap;
}

@media ( max-width: 991px ) {

	.template-part-products .pricing-details > li {
		white-space: wrap;
	}

	.template-part-products .pricing-details > li + li {
		margin-top: 10px;
	}

}

.template-part-products hr {
	width: 100px;
	margin: 45px 0;
	border: 4px solid #fb8406;
	border-radius: 10px;
}

.template-part-products .list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	list-style: none;
}

@media ( max-width: 991px ) {

	.template-part-products .list {
		display: block;
	}

}

.template-part-products .list > li {
	position: relative;
	z-index: 1;
	padding-left: 45px;
	line-height: 1.75;
}

@media ( max-width: 991px ) {

	.template-part-products .list > li + li {
		margin-top: 30px;
	}

}

.template-part-products .list > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 25px;
	height: 25px;
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-check.svg" );
	background-position: left top;
	background-size: 25px auto;
}

.template-part-products * + .container--button {
	margin-top: 45px;
}

@media ( max-width: 767px ) {

	.template-part-products .image {
		margin-top: 45px;
	}

}

@media ( min-width: 768px ) {

	.template-part-products .image .inner {
		position: relative;
		top: -120px;
		width: calc( 100% + ( ( 100vw - 1110px ) / 2 ) );
		height: 100%;
	}

}

@media ( max-width: 1439px ) {

	.template-part-products .image .inner {
		width: calc( 100% + 11.5vw );
	}

}

@media ( max-width: 991px ) and ( min-width: 768px ) {

	.template-part-products .image .inner {
		top: 0;
		width: calc( 100% + 5vw );
	}

}

@media ( min-width: 768px ) {

	.template-part-products .image img {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-position: top right;
		object-fit: contain;
	}

}


/*
##     ## ######## ######## ########  ####  ######   ######
###   ### ##          ##    ##     ##  ##  ##    ## ##    ##
#### #### ##          ##    ##     ##  ##  ##       ##
## ### ## ######      ##    ########   ##  ##        ######
##     ## ##          ##    ##   ##    ##  ##             ##
##     ## ##          ##    ##    ##   ##  ##    ## ##    ##
##     ## ########    ##    ##     ## ####  ######   ######
*/

.template-part-metrics {
	padding: 75px 0;
	background-color: #434343;
	color: #FFF;
}

@media ( max-width: 991px ) {

	.template-part-metrics {
		padding: 60px 0;
	}

}

@media ( max-width: 767px ) {

	.template-part-metrics {
		padding: 45px 0;
	}

}

.template-part-metrics * + .container--metrics {
	margin-top: 50px;
}

.template-part-metrics .container--metrics {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 60px;
}

@media ( max-width: 991px ) {

	.template-part-metrics .container--metrics {
		grid-template-columns: repeat( 2, 1fr );
		grid-template-rows: repeat( 2, min-content );
	}

}

@media ( max-width: 767px ) {

	.template-part-metrics .container--metrics {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

}

.template-part-metrics h2 {
	color: inherit;
}

.template-part-metrics .metric:nth-child( n + 5 ) { /* limited to maximum of four */
	display: none;
}

.template-part-metrics span {
	display: block;
}

.template-part-metrics .value {
	line-height: 1.07;
	font-family: "Roboto Slab", serif;
	font-weight: 500;
	font-size: 65px;
	color: #29d1d7;
}

.template-part-metrics .label {
	margin-top: 15px;
	line-height: 1.75;
}

@media ( max-width: 991px ) {

	.template-part-metrics .label {
		font-size: 16px;
	}

}


/*
 ######  ########  ##       #### ########
##    ## ##     ## ##        ##     ##
##       ##     ## ##        ##     ##
 ######  ########  ##        ##     ##
      ## ##        ##        ##     ##
##    ## ##        ##        ##     ##
 ######  ##        ######## ####    ##
*/

.template-part-split {
	margin: 50px 0;
	color: #434343;
}

@media ( max-width: 991px ) {

	.template-part-split {
		margin: 60px 0;
	}

}

@media ( max-width: 767px ) {

	.template-part-split {
		margin: 45px 0;
	}

}

.template-part-metrics + .template-part-split {
	--bg-overflow-color: #434343;

	position: relative;
	z-index: 1;
	margin-top: 0;
	border-top: 50px solid var( --bg-overflow-color );
}

@media ( max-width: 991px ) {

	.template-part-metrics + .template-part-split {
		border-top-width: 60px;
	}

}

@media ( max-width: 767px ) {

	.template-part-metrics + .template-part-split {
		border-top-width: 45px;
	}

}

.template-part-metrics + .template-part-split::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 180px;
	max-height: 100%;
	background-color: var( --bg-overflow-color );
}

@media ( max-width: 991px ) {

	.template-part-metrics + .template-part-split::before {
		height: 150px;
	}

}

.template-part-split > .container {
	display: grid;
	box-shadow: 6px 6px 30px 0 rgba( 0, 0, 0, 0.06 );
	grid-template-columns: 1fr;
	align-items: stretch;
	background-color: #fff;
	border-radius: 15px;
	overflow: hidden;
}

@media ( max-width: 767px ) {

	.template-part-split > .container {
		display: block;
	}

}

.template-part-split[class*="bg-image-"] > .container {
	grid-template-columns: 1fr 1fr;
}

.template-part-split .left {
	display: flex;
	align-items: center;
}

.template-part-split .container--text {
	padding: 100px 60px;
}

@media ( max-width: 991px ) {

	.template-part-split .container--text {
		padding: 30px;
	}

}

@media ( max-width: 767px ) {

	.template-part-split .container--text {
		padding-bottom: 45px;
	}

}

.template-part-split .eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.8;
	font-size: 12px;
	color: #18a2b4;
}

.template-part-split .eyebrow + h2 {
	margin-top: 5px;
}

.template-part-split h2 {
	color: #334b50;
}

.template-part-split h2 + * {
	margin-top: 20px;
}

.template-part-split * + .list {
	margin-top: 30px;
}

.template-part-split .list > ol {
	position: relative;
	z-index: 1;
	counter-reset: template-part-split;
	list-style: none;
}

.template-part-split .list li {
	position: relative;
	display: flex;
	counter-increment: template-part-split;
	list-style: none;
}

.template-part-split .list li:nth-child( n + 10 ) {
	display: none;
}

.template-part-split .list li::before {
	content: counter( template-part-split );
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	min-width: 25px;
	height: 25px;
	margin: 2px 10px 0 0;
	background-color: #FFF;
	border: 2px solid #18a2b4;
	border-radius: 20px;
	font-family: "Roboto Slab", serif;
	box-sizing: border-box;
	font-weight: 600;
	color: #18a2b4;
}

.template-part-split .list li::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 11px;
	z-index: 1;
	display: block;
	width: 2px;
	height: calc( 100% + 20px );
	background-color: #18a2b4;
}

.template-part-split .list li:last-of-type::after {
	display: none;
}

.template-part-split .list li + li {
	margin-top: 20px;
}

.template-part-split * + .container--button {
	margin-top: 45px;
}

.template-part-split .right {
	position: relative;
}

.template-part-split .right .bg,
.template-part-split .right .bg .container--image {
	height: 100%;
}

.template-part-split .right .bg .container--image.has-lqip::after {
	background-image: var( --lqip );
	filter: blur( 25px );
}

.template-part-split .right .bg img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	transform: none;
	object-fit: cover;
}

.template-part-split .right .fg {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}

.template-part-split .right .fg img {
	display: block;
	width: 100%;
}


/*
######## ########  ######  ######## #### ##     ##  #######  ##    ## ####    ###    ##        ######
   ##    ##       ##    ##    ##     ##  ###   ### ##     ## ###   ##  ##    ## ##   ##       ##    ##
   ##    ##       ##          ##     ##  #### #### ##     ## ####  ##  ##   ##   ##  ##       ##
   ##    ######    ######     ##     ##  ## ### ## ##     ## ## ## ##  ##  ##     ## ##        ######
   ##    ##             ##    ##     ##  ##     ## ##     ## ##  ####  ##  ######### ##             ##
   ##    ##       ##    ##    ##     ##  ##     ## ##     ## ##   ###  ##  ##     ## ##       ##    ##
   ##    ########  ######     ##    #### ##     ##  #######  ##    ## #### ##     ## ########  ######
*/

.template-part-testimonials {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 120px 0;
	padding-top: 175px;
	overflow: hidden;
}

@media ( max-width: 767px ) {

	.template-part-testimonials {
		margin: 90px 0 0;
		padding-top: 0;
	}

}

.template-part-testimonials::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: 50%;
	height: calc( 100% - 60px );
	background-color: #237787;
	border-top-left-radius: 200px;
}

@media ( max-width: 991px ) {

	.template-part-testimonials::before {
		height: calc( 100% - 150px );
	}

}

@media ( max-width: 767px ) {

	.template-part-testimonials::before {
		display: none;
	}

}

.template-part-testimonials > .container {
	display: grid;
	grid-template-columns: 37% 63%;
	align-items: stretch;
}

@media ( max-width: 767px ) {

	.template-part-testimonials > .container {
		display: block;
		width: 100%;
	}

}

.template-part-testimonials .container--text {
	display: flex;
	align-items: center;
}

@media ( max-width: 767px ) {

	.template-part-testimonials .container--text {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

}

.template-part-testimonials .inner--text {
	margin-bottom: 30px;
}

@media ( min-width: 768px ) {

	.template-part-testimonials .inner--text {
		margin-bottom: 0;
		padding: 120px 0;
	}

}

.template-part-testimonials .eyebrow {
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	font-size: 12px;
	color: #18a2b4;
}

.template-part-testimonials .swiper-navigation {
	margin-top: 30px;
}

@media ( max-width: 767px ) {

	.template-part-testimonials .swiper-navigation {
		display: none;
	}

}

.template-part-testimonials .swiper-navigation button {
	width: 16px;
	height: 25px;
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-arrow.svg" );
	background-color: transparent;
	background-size: contain;
	border: none;
	transition: opacity 1s;
	opacity: 0;
}

@media ( hover: hover ) {

	.template-part-testimonials .swiper-navigation button:hover {
		background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-arrow-hover.svg" );
	}

}

.template-part-testimonials.swiper-ready .swiper-navigation button {
	opacity: 1;
}

.template-part-testimonials.swiper-ready .swiper-navigation .swiper-button-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.template-part-testimonials button.swiper-custom-button-next {
	transform: scaleX( -1 );
}

.template-part-testimonials.swiper-ready .swiper-navigation button + button {
	margin-left: 70px;
}

@media ( max-width: 991px ) {

	.template-part-testimonials.swiper-ready .swiper-navigation button + button {
		margin-left: 40px;
	}

}

@media ( max-width: 767px ) {

	.template-part-testimonials .container--slider {
		position: relative;
		z-index: 1;
	}

	.template-part-testimonials .container--slider::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 50%;
		background-color: #005261;
	}

}

.template-part-testimonials .swiper-container {
	width: calc( 100% + ( ( 100vw - 1110px ) / 2 ) );
	height: 100%;
	overflow: hidden;
}

@media ( max-width: 1439px ) {

	.template-part-testimonials .swiper-container {
		width: calc( 100% + 11.5vw );
	}

}

@media ( max-width: 767px ) {

	.template-part-testimonials .swiper-container {
		width: 100%;
		padding: 0 5vw 90px;
		box-sizing: border-box;
	}

}

.template-part-testimonials .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

@media ( min-width: 768px ) {

	.template-part-testimonials .swiper-wrapper {
		padding: 30px;
		box-sizing: border-box;
	}

}

.template-part-testimonials .swiper-container:not( .swiper-initialized ) .swiper-wrapper {
	flex-wrap: nowrap;
	width: auto;
	overflow: hidden;
}

.template-part-testimonials .swiper-slide {
	position: relative;
	width: 45vw;
	max-width: 540px;
	height: auto;
	padding: 45px 45px 100px;
	background-color: #FFF;
	box-shadow: 6px 6px 30px 0 rgba( 0, 0, 0, 0.06 );
	box-sizing: border-box;
	border-radius: 15px;
	flex-shrink: 0;
}

@media ( max-width: 767px ) {

	.template-part-testimonials .swiper-slide {
		width: 100%;
		max-width: none;
		padding: 30px 30px 70px;
	}

}

@media ( min-width: 768px ) {

	.template-part-testimonials .swiper-container:not( .swiper-initialized ) .swiper-slide + .swiper-slide {
		margin-left: 30px;
	}

}

.template-part-testimonials .swiper-container:not( .swiper-initialized ) .swiper-slide:nth-child( n + 2 ) {
	visibility: hidden;
}

.template-part-testimonials .swiper-slide:nth-child( n + 10 ) {
	display: none;
}

.template-part-testimonials .entry {
	font-weight: 600;
	font-size: 24px;
	color: #8e8e8d;
}

@media ( max-width: 991px ) {

	.template-part-testimonials .entry {
		font-size: 20px;
	}

}

.template-part-testimonials .byline {
	position: absolute;
	bottom: 45px;
	left: 45px;
	max-width: 100%;
	line-height: 1.75;
}

@media ( max-width: 991px ) {

	.template-part-testimonials .byline {
		font-size: 14px;
	}

}

@media ( max-width: 767px ) {

	.template-part-testimonials .byline {
		bottom: 30px;
		left: 30px;
	}

}

.template-part-testimonials .swiper-pagination {
	display: none;
}

@media ( max-width: 767px ) {

	.template-part-testimonials .swiper-pagination {
		bottom: 45px;
		display: block;
	}

}

.template-part-testimonials .swiper-pagination-bullet {
	--swiper-pagination-bullet-horizontal-gap: 7.5px;

	width: 12px;
	height: 12px;
	background-color: transparent;
	border: 1px solid #fff;
	opacity: 1;
}

.template-part-testimonials .swiper-pagination-bullet-active {
	background-color: #fff;
}


/*
##          ###     ######  ########     ######  ##     ##    ###    ##    ##  ######  ########
##         ## ##   ##    ##    ##       ##    ## ##     ##   ## ##   ###   ## ##    ## ##
##        ##   ##  ##          ##       ##       ##     ##  ##   ##  ####  ## ##       ##
##       ##     ##  ######     ##       ##       ######### ##     ## ## ## ## ##       ######
##       #########       ##    ##       ##       ##     ## ######### ##  #### ##       ##
##       ##     ## ##    ##    ##       ##    ## ##     ## ##     ## ##   ### ##    ## ##
######## ##     ##  ######     ##        ######  ##     ## ##     ## ##    ##  ######  ########
*/

.template-part-last-chance {
	position: relative;
	background-color: #005261;
	box-sizing: border-box;
	color: #FFF;
}

@media ( min-width: 768px ) {

	.template-part-last-chance {
		border-top: 120px solid #FFF;
	}

}

.template-part-last-chance > .container {
	display: flex;
	justify-content: space-between;
}

@media ( max-width: 767px ) {

	.template-part-last-chance > .container {
		display: block;
	}

}

.template-part-last-chance .container--text {
	flex: 0 0 40%;
}

.template-part-last-chance .inner--text {
	padding: 90px 0;
}

@media ( max-width: 767px ) {

	.template-part-last-chance .inner--text {
		padding: 45px 0;
	}

}

.template-part-last-chance h2 {
	color: inherit;
}

.template-part-last-chance h2 + .entry {
	margin-top: 15px;
}

.template-part-last-chance .entry + * {
	margin-top: 30px;
}

.template-part-last-chance .container--image {
	overflow: hidden;
}

@media ( min-width: 768px ) {

	.template-part-last-chance .container--image {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 49vw;
		height: calc( 100% + 120px );
		border-top-left-radius: 200px;
	}

}

@media ( max-width: 767px ) {

	.template-part-last-chance .container--image {
		width: 95vw;
		height: 400px;
		transform: translateX( -5vw );
		border-top-right-radius: 200px;
	}

}

.template-part-last-chance .container--image.has-lqip::after {
	background-image: var( --lqip );
	filter: blur( 25px );
}


/*
########  #######   #######  ######## ######## ########
##       ##     ## ##     ##    ##    ##       ##     ##
##       ##     ## ##     ##    ##    ##       ##     ##
######   ##     ## ##     ##    ##    ######   ########
##       ##     ## ##     ##    ##    ##       ##   ##
##       ##     ## ##     ##    ##    ##       ##    ##
##        #######   #######     ##    ######## ##     ##
*/

#page-footer {
	padding: 60px 0;
	background-color: #182528;
	font-size: 12px;
	color: #FFF;
}

#page-footer a {
	text-decoration: none;
	color: inherit;
}

#page-footer .row {
	display: flex;
	gap: 60px;
	justify-content: space-between;
	align-items: center;
}

@media ( max-width: 991px ) {

	#page-footer .row {
		align-items: start;
	}

}

@media ( max-width: 767px ) {

	#page-footer .row {
		display: block;
	}

}

#page-footer .contact {
	display: flex;
	gap: 30px;
	align-content: flex-start;
	flex-wrap: wrap;
}

@media ( max-width: 991px ) {

	#page-footer .contact {
		display: grid;
		grid-template-columns: repeat( 2, min-content );
		grid-template-rows: repeat( 2, min-content );
		row-gap: 20px;
	}

}

@media ( max-width: 767px ) {

	#page-footer * + .contact {
		margin-top: 30px;
	}

	#page-footer .contact {
		display: block;
	}

}

#page-footer .contact > * {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

@media ( max-width: 767px ) {

	#page-footer .contact > * + * {
		margin-top: 30px;
	}

}

@media ( max-width: 991px ) {

	#page-footer a[href^="mailto"] {
		grid-area: 1 / 1 / 2 / 2;
	}

}

#page-footer a[href^="mailto"]::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 28px;
	margin-right: 15px;
	background-position: center;
	background-size: contain;
}

#page-footer.lazyloaded a[href^="mailto"]::before {
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-email.svg" );
}

@media ( max-width: 991px ) {

	#page-footer a[href^="tel"] {
		grid-area: 1 / 2 / 2 / 3;
	}

}

#page-footer a[href^="tel"]::before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 28px;
	margin-right: 15px;
	background-position: center;
	background-size: contain;
}

#page-footer.lazyloaded a[href^="tel"]::before {
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-phone.svg" );
}

#page-footer .street-address {
	position: relative;
	padding: 2px 0 0 35px;
	white-space: nowrap;
}

@media ( max-width: 991px ) {

	#page-footer .street-address {
		grid-area: 2 / 1 / 3 / 3;
	}

}

#page-footer .street-address::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: 21px;
	height: 28px;
	background-position: center;
	background-size: contain;
}

#page-footer.lazyloaded .street-address::before {
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/icon-location.svg" );
}

#page-footer * + .copyright {
	margin-top: 50px;
}

#page-footer .copyright {
	text-align: center;
	color: #c7c7c7;
}


/*
##     ##  #######  ########     ###    ##
###   ### ##     ## ##     ##   ## ##   ##
#### #### ##     ## ##     ##  ##   ##  ##
## ### ## ##     ## ##     ## ##     ## ##
##     ## ##     ## ##     ## ######### ##
##     ## ##     ## ##     ## ##     ## ##
##     ##  #######  ########  ##     ## ########
*/

html.dim {
	overflow: hidden;
}

html.dim body::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: rgba( 0, 0, 0, 0.75 );
}

.template-part-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 11;
	display: none;
	width: 77%;
	background-color: #000;
	transform: translate( -50%, -50% );
}

.template-part-modal > button.close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	width: 44px;
	height: 44px;
	background-image: url( "/demos/lp.hazlnut.com/wp-content/themes/hazlnut-lps/template-products/img/button-close.svg" );
	background-color: transparent;
	background-size: 100% auto;
	transform: translate( 50%, -50% );
	border: none;
}

.template-part-modal > .container--ratio {
	width: 100%;
	aspect-ratio: 16 / 9;
}


/*
 ######  ######## ####  ######  ##    ## ##    ##    ##     ## ########    ###    ########  ######## ########
##    ##    ##     ##  ##    ## ##   ##   ##  ##     ##     ## ##         ## ##   ##     ## ##       ##     ##
##          ##     ##  ##       ##  ##     ####      ##     ## ##        ##   ##  ##     ## ##       ##     ##
 ######     ##     ##  ##       #####       ##       ######### ######   ##     ## ##     ## ######   ########
      ##    ##     ##  ##       ##  ##      ##       ##     ## ##       ######### ##     ## ##       ##   ##
##    ##    ##     ##  ##    ## ##   ##     ##       ##     ## ##       ##     ## ##     ## ##       ##    ##
 ######     ##    ####  ######  ##    ##    ##       ##     ## ######## ##     ## ########  ######## ##     ##

*/

#sticky-page-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	display: none;
	width: 100%;
	background-color: #FFF;
}

#sticky-page-header.active {
	display: block;
}

body.admin-bar #sticky-page-header {
	top: 32px;
}

@media ( max-width: 782px ) {

	body.admin-bar #sticky-page-header {
		top: 46px;
	}

}

#sticky-page-header > .container {
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	column-gap: 30px;
	padding: 12px 0;
}

@media ( max-width: 991px ) {

	#sticky-page-header > .container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 15px 0 20px;
	}

}

@media ( max-width: 767px ) {

	#sticky-page-header > .container {
		width: 100%;
		padding-bottom: 0;
	}

}

#sticky-page-header .logo {
	display: none;
}

#sticky-page-header .mark {
	display: block;
}

@media ( max-width: 991px ) {

	#sticky-page-header .left {
		width: 28px;
		flex-shrink: 0;
	}

}

@media ( max-width: 767px ) {

	#sticky-page-header .left {
		margin-left: 5vw;
	}

	#sticky-page-header .right {
		margin-right: 5vw;
	}

	#sticky-page-header .button {
		display: block;
	}

}

@media ( max-width: 991px ) {

	#sticky-page-anchors {
		position: relative;
		z-index: 1;
		width: 100%;
		order: 2;
		margin-top: 30px;
		overflow: auto;
	}

}

@media ( max-width: 767px ) {

	#sticky-page-anchors {
		margin: 10px 0 0;
	}

}

#sticky-page-anchors > .container {
	width: 100%;
	max-width: none;
	margin: 0;
}

@media ( min-width: 992px ) {

	#sticky-page-header .right a[href^="tel"] {
		display: none;
	}

	#sticky-page-header .right a[href^="tel"] + * {
		margin-left: 0;
	}

}

@media ( max-width: 991px ) {

	#sticky-page-header .right {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		flex-shrink: 0;
	}

}