/*
Theme Name: Juniper Design
Theme URI: https://juniperdesign.com/
Template: Divi
Author: Juniper Design
Author URI: https://juniperdesign.com/
Description: JD's new WordPress theme (2024).
Version: 1.0.0
Updated: 2024-05-19
Text Domain: jd
*/

.woocommerce .product .images .flex-control-thumbs li {
    width: 20%;
    margin-right: 2.5% !important;
    margin-bottom: 2.5% !important;
}

.woocommerce .product .images .flex-control-thumbs {
    margin-top: 2.5% !important;
}

.et_pb_wc_add_to_cart .quantity .qty {
    width: auto;
    max-width: 6em !important;

}

/* 2024 Updates
===================================================================================================
===================================================================================================
================================================================================================ */

/* Font-face
================================================================================================ */

@font-face {
    font-family: "Syndicat Grotesk";
    src: url('fonts/SyndicatGrotesk-Light.woff2') format('woff2'),
        url('fonts/SyndicatGrotesk-Light.woff') format('woff'),
        url('fonts/SyndicatGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Syndicat Grotesk";
    src: url('fonts/SyndicatGrotesk-Regular.woff2') format('woff2'),
        url('fonts/SyndicatGrotesk-Regular.woff') format('woff'),
        url('fonts/SyndicatGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Syndicat Grotesk";
    src: url('fonts/SyndicatGrotesk-Medium.woff2') format('woff2'),
        url('fonts/SyndicatGrotesk-Medium.woff') format('woff'),
        url('fonts/SyndicatGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Syndicat Grotesk";
    src: url('fonts/SyndicatGrotesk-Bold.woff2') format('woff2'),
        url('fonts/SyndicatGrotesk-Bold.woff') format('woff'),
        url('fonts/SyndicatGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Temp
================================================================================================ */

.page-template-page-home #main-content {
	min-height: 115vw;
}

/* Utility Classes
================================================================================================ */

/* global padding */

.jd-global-padding {
	width: 100%;
	max-width: 1440px;
	padding: 0 10px;
	display: block;
	margin: auto;

	position: relative;
	box-sizing: border-box;
}

/* responsive iframe & video */

.wrap--jd-iframe {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; 
}

.jd-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

/* button */

.wrap--jd-btn a {
	width: auto;
	display: block;

    font-family: var(--font--syndicat);
    font-weight: 400!important;
    font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
	line-height: 116.667%;

    margin: 0;
    text-transform: none;

	color: var(--color--off-black);
    background: transparent;

    height: auto;	

    padding: 11px 50px 8px 10px;

	border-radius: 5px;
	border: 1px solid var(--color--off-black);  

	transition-property: background-color, color, border-color;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.wrap--jd-btn a:is(:hover, :active, :focus) {
	color: var(--color--beige);
	background-color: var(--color--off-black);
}

.wrap--jd-btn .jd-btn--light {
	color: var(--color--beige);
	border-color: var(--color--beige);
}

.wrap--jd-btn .jd-btn--light:is(:hover, :active, :focus) {
	color: var(--color--off-black);
	background-color: var(--color--beige);
}

/* flexbox */

.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: normal;
	align-items: flex-start;
	align-content: flex-start;
}

.flex-item {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	order: 0;
}

.mobile-only,
.mobile-only--640 { display: none; }

@media ( max-width: 768px ) {

	.mobile-only 	{ display: block; }
	.desktop-only 	{ display: none; }

}

@media ( max-width: 640px ) {

	.mobile-only--640 { display: block; }

}

/* iframes, video - import from the MAC project */

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.iframe-container iframe,
.iframe-container video,
.iframe-container__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.iframe-container__placeholder img {
    max-width: unset;
    max-height: unset;
    height: 100%;
    width: auto;   
}

/* General / Global
================================================================================================ */

:root {
	/* Colors */
	--color--white: 	#fff;
	--color--beige: 	#E4E3DF;
	--color--sand: 		#C7C1B7;
	--color--olive: 	#9D9F98;
	--color--off-black: #343335;
	--color--black: 	#000;

	/* Fonts */
	--font--syndicat: 		"Syndicat Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font--source-serif: 	"Source Serif", Georgia, Times, "Times New Roman", serif;
}

.page-container,
.et_fixed_nav.et_show_nav #page-container {
	padding: 0;
}

html, body {
	overflow-x: hidden;
}

body 			{ padding-left: 0!important; padding-right: 0!important; }

sup {
	font-size: .64em;
}

u { font-weight: 500; }

/* Header
================================================================================================ */

#page-container {
	position: relative;
}

.juniper-header,
.juniper-header .header-logo a {
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.juniper-header {
	height: 50px;

	display: grid;
    grid-template-columns: fit-content(50px) 1fr fit-content(50px);

	border-radius: 5px;
	background: rgba(228, 227, 223, 0.60);

	backdrop-filter: blur(5px);

	margin: 5px 5px 30px 5px;

    position: fixed;
    width: calc(100% - 10px);
    top: 0;	

	z-index: 10;

	-webkit-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;	
}

.headroom {
    will-change: transform;
	-webkit-transition: transform 200ms linear;
	-o-transition: transform 200ms linear;
	transition: transform 200ms linear;
}

.page-template-page-home .juniper-header {}

/* EOF HEADER/BANNER SCENARIOS 
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------ */

/* SCENARIO 1: NON-HOME, NO BANNER
---------------------------------- */

#page-container 								{ padding-top: 0!important; }
@media ( max-width: 768px ) { #page-container 	{ padding-top: 0!important; } }
body 											{ padding-top: 60px!important; }
@media ( max-width: 768px ) { body 				{ padding-top: 50px!important; } }

.logged-in .juniper-header:not(.jd-has-banner--fixed) 		{ top: 32px; }
@media ( max-width: 782px ) { .logged-in .juniper-header 	{ top: 46px; } }

/* SCENARIO 2: NON-HOME, HAS BANNER
----------------------------------- */

.jd-has-banner .juniper-header {
	position: absolute;
}

.jd-has-banner #page-container 									{ padding-top: 60px!important; }
@media ( max-width: 768px ) { .jd-has-banner #page-container 	{ padding-top: 50px!important; } }
body.jd-has-banner 												{ padding-top: 0!important; }
@media ( max-width: 768px ) { body.jd-has-banner  				{ padding-top: 0!important; } }

.jd-has-banner.logged-in .juniper-header 								{ top: 0; }
@media ( max-width: 782px ) { .jd-has-banner.logged-in .juniper-header 	{ top: 0; } }

/* SCENARIO 3: HOME, NO BANNER
------------------------------ */

html:not(.jd-banner--show) .jd-has-banner--fixed #page-container 		{ 
	padding-top: 0!important; 
}
@media ( max-width:768px ) { 

	html:not(.jd-banner--show) .jd-has-banner--fixed.logged-in #page-container { 
		padding-top: 0!important; 
	} 

}

html:not(.jd-banner--show) .jd-has-banner--fixed.logged-in .juniper-header 		{ top: 32px; 
	position: fixed;
}
@media ( max-width: 782px ) { 

	html:not(.jd-banner--show) .jd-has-banner--fixed.logged-in .juniper-header 	{ top: 46px; } 

}


html:not(.jd-banner--show) .jd-has-banner--fixed.logged-in 			{ padding-top: 0!important; }
@media ( max-width:768px ) { 

	html:not(.jd-banner--show) .jd-has-banner--fixed.logged-in  	{ padding-top: 0!important; } 

}

/* SCENARIO 4: HOME, HAS BANNER
------------------------------ */

.jd-banner--show .jd-has-banner.logged-in .juniper-header 								{ top: 0; }
@media ( max-width: 782px ) { .jd-banner--show .jd-has-banner.logged-in .juniper-header { top: 0; } }

.jd-banner--show .jd-has-banner--fixed #page-container 		{ padding-top: 0!important; }
@media ( max-width:768px ) { 

	.jd-banner--show .jd-has-banner--fixed #page-container 	{ padding-top: 0!important; } 

}
.jd-banner--show .jd-has-banner--fixed 						{ padding-top: 0!important; }
@media ( max-width:768px ) { 

	.jd-banner--show .jd-has-banner--fixed  				{ padding-top: 0!important; } 

}

/* ------------------------------------------------------------------------------------------------
   ------------------------------------------------------------------------------------------------
   ------------------------------------------------------------------------------------------------
   EOF HEADER/BANNER SCENARIOS */

/* Banner
------------------------------------------------------------------------------------------------ */

.wrap--jd-banner {
    background: black;
    padding: 13px 0 10px;
    width: 100%;
    z-index: 1000;

    display: none;
}

.jd-banner,
.jd-banner p {
	color: var(--color--beige);

	text-align: center;

	font-family: var(--font--syndicat);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;    
}

.jd-banner {
	position: relative;
}

.jd-banner a {
	color: var(--color--white);
}

.jd-banner-close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);

	width: 24px;
	height: 24px;
}

.jd-banner-close button {
	background: transparent;
	border: none!important;
	outline: none!important;
	box-shadow: none!important;
	cursor: pointer;
	width: 24px;
	height: 24px;
	display: block;

	text-align: center;
	padding: 3px 0;
}

.jd-banner-close svg {
	display: block;
	width: 18px;
	height: 18px;
	margin: auto;
}

.jd-banner-close svg path {
	fill: var(--color--white);
}

.inner-wrap--jd-banner {
	padding: 0 50px;
}

.page-template-page-home .wrap--jd-banner {
	position: fixed;
}

/* ------------------------------------------------------------------------------------------------
   EOF Banner */

.juniper-header .header__left,
.juniper-header .header__right { 
	width: 50px; 
	position: relative;
}

.juniper-header .header__center {
	padding: 0 15px;
}

.juniper-header .header-logo {
	width: 133px;
	margin: auto;

	position: relative;

	height: 100%;
}

.juniper-header .header-logo a,
.juniper-header .header-logo img {
	display: block;
}

.juniper-header .header-logo a {
	opacity: 0;
	visibility: hidden;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}

.juniper-header .header-logo .logo--dark {
	opacity: 1;
	visibility: visible;
}

/*.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}*/

@media ( max-width: 768px ) {

	.juniper-header {
		height: 40px;
	    grid-template-columns: fit-content(0) 1fr fit-content(50px);		
	}

	.juniper-header .header__left {
		width: 0;
	}

	.juniper-header .header-logo {
		width: 100px;	
		margin-left: 0;
	}

}

/* Header Navigation aka Hamburger Menu
------------------------------------------------------------------------------------------------ */

.outer-wrap--hamburger,
.outer-wrap--hamburger > * {
	position: absolute;	
}

.outer-wrap--hamburger {
	width: 40px;
	height: 40px;

	top: 50%;
	right: 10px;
	transform: translateY(-50%);

	display: block;
	cursor: pointer;
}

.outer-wrap--hamburger > * {
	transition-property: all;
	transition-timing-function: cubic-bezier(.77,0,.175,1);
	transition-duration: .25s;

	background: var(--color--off-black);
}

.bun-top {
	top: 0;
	left: calc( 50% - 1px);
	width: 2px;
	height: 6px;
}
.tomato {
	left: 0;
	top: calc( 50% - 1px);
	width: 6px;
	height: 2px;
}
.ground-beef {
	right: 0;
	top: calc( 50% - 1px);
	width: 6px;
	height: 2px;
}
.bun-bottom {
	bottom: 0;
	left: calc( 50% - 1px);
	width: 2px;
	height: 6px;
}

/* The crosshair animates to a hamburger icon on desktops only. */

body:not(.is-mobile) .outer-wrap--hamburger:hover .bun-top {
	transform: scale( 2000%, 33.33% ) translateY(10px);
	transform-origin: top center;
}
body:not(.is-mobile) .outer-wrap--hamburger:hover .tomato {
	transform: scale( 333.333%, 100% );
	transform-origin: center left;
}
body:not(.is-mobile) .outer-wrap--hamburger:hover .ground-beef {
	transform: scale( 333.333%, 100% );
	transform-origin: center right;
}
body:not(.is-mobile) .outer-wrap--hamburger:hover .bun-bottom {
	transform: scale( 2000%, 33.33% ) translateY(-10px);
	transform-origin: bottom center;
}

@media ( max-width: 768px ) {

	.outer-wrap--hamburger {
		width: 30px;
		height: 30px;
	}

	.bun-top {
		height: 5px;
	}
	.tomato {
		width: 5px;
	}
	.ground-beef {
		width: 5px;
	}
	.bun-bottom {
		height: 5px;
	}

	body:not(.is-mobile) .outer-wrap--hamburger:hover .bun-top {
		transform: scale( 1500%, 33.33% ) translateY(10px);
	}
	body:not(.is-mobile) .outer-wrap--hamburger:hover .tomato {
		transform: scale( 300%, 100% );
	}
	body:not(.is-mobile) .outer-wrap--hamburger:hover .ground-beef {
		transform: scale( 300%, 100% );
	}
	body:not(.is-mobile) .outer-wrap--hamburger:hover .bun-bottom {
		transform: scale( 1500%, 33.33% ) translateY(-10px);
	}

}

/* Header Navigation Submenu
------------------------------------------------------------------------------------------------ */

.header__submenu {
	padding: 10px 0 88px 0;
	background: var(--color--white);

	opacity: 0;
	visibility: hidden;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;

	z-index: 99999999;

	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.header__submenu.is-open {
	opacity: 1;
	visibility: visible;
}

.header__submenu .submenu-ctas {
	position: absolute;
	top: 0;
	right: 10px;

	font-size: 0;
	line-height: 0;
}

.header__submenu .submenu-ctas a,
.header__submenu .menu-group__label {
	color: var(--color--off-black);
    font-family: var(--font--syndicat);
    font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0;	
}

.header__submenu .submenu-ctas a:not(:first-child) { 
	margin-left: 20px;
}

.header__submenu .submenu-ctas a {
	display: inline-block;
}

.header__submenu .submenu-ctas .submenu-cart {
	transform: translateY(3px);
}

.header__submenu .submenu-ctas .submenu-cart svg {
	width: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
	height: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
}

.header__submenu .menu-group .flex-container {}

.header__submenu li {
    color: var(--color--off-black);
    font-family: var(--font--syndicat);
    font-size: clamp(1.5rem, 0.882rem + 2.353vw, 3rem);
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;	
}

.header__submenu a {
	display: block;
}

.header__submenu .menu-group__label,
.header__submenu a {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.header__submenu svg,
.header__submenu svg path {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.header__submenu .item__image {
	position: absolute;
	top: 0;
	right: 10px;

	display: none;
}

.header__submenu .item__image.image--active {
	opacity: 1;
	visibility: visible;
}

.header__submenu .item__image a,
.header__submenu .item__image img {
	display: block;
	width: 100%;
	height: 100%;
}

.header__submenu .item__image:not(.has-image) {
	background: var(--color--white);
}

.header__submenu.sm-has-active .menu-group:not(.mg-has-active) .menu-group__label,
.header__submenu.sm-has-active .menu-group-item a:not(.item--active),
.header__submenu.sm-has-active .submenu-ctas a:not(.item--active),
.submenu--open.submenu--unhovered .header__submenu .menu-group__label,
.submenu--open.submenu--unhovered .header__submenu a:not(.item--active) {
	color: var(--color--beige);
}

.header__submenu.sm-has-active .menu-group-item a:not(.item--active) svg path,
.header__submenu.sm-has-active .submenu-ctas a:not(.item--active) svg path,
.submenu--open.submenu--unhovered .header__submenu .menu-group__label svg path,
.submenu--open.submenu--unhovered .header__submenu a:not(.item--active) svg path {
	fill: var(--color--beige);
}

@media ( max-width: 768px ) {

	.header__submenu {
		padding: 10px 0 100px 0;
	}	

	.header__submenu .menu-groups {
		padding-right: 0;
	}	

	.header__submenu li {
	    line-height: 120%;
	}		

}

@media ( max-width: 420px ) {

	.header__submenu .item__image {
		display: none!important;
	}

}


/* Footer
================================================================================================ */

/* General
------------------------------------------------------------------------------------------------ */

#juniper-footer {
	padding: 25px 0 7px;
}

#juniper-footer,
#juniper-footer li[class*="field--"]:has(textarea):after,
#juniper-footer li[class*="field--"]:has(textarea):before {
	background: var(--color--white);	
}

#juniper-footer ul,
#juniper-footer li {
	display: block;
}

#juniper-footer .jd-global-padding {}

/* General
------------------------------------------------------------------------------------------------ */

#juniper-footer,
#juniper-footer p,
#juniper-footer h3,
#juniper-footer label,
#juniper-footer input,
#juniper-footer textarea,
#juniper-footer select,
#juniper-footer a,
#juniper-footer li {
	font-family: var(--font--syndicat);
	color: var(--color--off-black);
}

/* Footer forms, general
------------------------------------------------------------------------------------------------ */

/* Breaks in wpcf7 forms */

#juniper-footer form br {
	display: none;
}

/* Wpcf7 forms spinner */

#juniper-footer .wpcf7-spinner {
    margin: 0;
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    width: 10px;
    aspect-ratio: 1;
    border-radius: 0;
    background: var(--color--off-black);
    height: 10px;
}

#juniper-footer .wpcf7-spinner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    border-radius: 0;
    top: 0;
    left: 0;

    box-shadow: 0 0 0 0 var(--color--off-black);
    animation: l1 1s infinite;    
}

@keyframes l1 {
    100% {
    	box-shadow: 0 0 0 10px var(--color--off-black);
    	opacity: 0;
    }
}

/* Footer forms placeholder */

#juniper-footer input::-ms-input-placeholder,
#juniper-footer textarea::-ms-input-placeholder { 
	color: var(--color--beige); 
	font-family: var(--font--syndicat);	
	text-transform: none;
	font-weight: 300!important;
}
#juniper-footer input::placeholder,
#juniper-footer textarea::placeholder { 
	color: var(--color--beige); 
	font-family: var(--font--syndicat);	
	text-transform: none;
	font-weight: 300!important;	
}

/* Wpcf7 forms feedback / validation messages */

/**
 * Form feedback
 *
 * ................................................................................................
 * ................................................................................................
 */

#juniper-footer .wpcf7-response-output,
#juniper-footer .wpcf7-not-valid-tip {
	color: var(--color--off-black)!important;
	margin-top: 3px!important;
}

#juniper-footer .wpcf7-response-output {
	padding: 0;
	margin: 0;
	margin-top: clamp(1.25rem, 0.478rem + 2.941vw, 3.125rem)!important;
	border: none;
	color: var(--color--off-black);
}

#juniper-footer .wpcf7-not-valid-tip {
    font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 120%;	

    padding: 0;
    text-align: left;
}

#juniper-footer .wpcf7-response-output span {
	display: block;
	margin-bottom: 10px;
}

/* Styles by grid cells OR by content type
------------------------------------------------------------------------------------------------ */

/* Contact Form Title
--------------------- */

#juniper-footer .contact-form-title {}

#juniper-footer .contact-form-title h3 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;	
}

/* Contact Form
--------------- */

#juniper-footer .contact-form {
	margin-bottom: clamp(6.25rem, 2.679rem + 7.44vw, 9.375rem);
}

#juniper-footer .wrap--form-desc,
#juniper-footer .wrap--form-desc p {
	font-family: var(--font--source-serif);
}

#juniper-footer .wrap--form-desc,
#juniper-footer .wrap--form-desc p {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */	
}

#juniper-footer .wrap--form-desc {
	width: 100%;
	max-width: 277px;
	margin-bottom: clamp(1.25rem, 0.478rem + 2.941vw, 3.125rem);
}

#juniper-footer .contact-form .wpcf7-form {
    width: auto;
    text-align: left;
    margin: 0;	
}

#juniper-footer .contact-form ul {
	width: calc( 100% + 10px );
	margin-left: -5px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: normal;
	align-items: flex-start;
	align-content: flex-start;	

	gap: clamp(1.25rem, 0.478rem + 2.941vw, 3.125rem) 0;
}

#juniper-footer .contact-form li,
#juniper-footer .contact-form label,
#juniper-footer .contact-form span {
	display: block;
}

#juniper-footer .contact-form li {
	height: auto;
	padding-top: clamp(0.9rem, 0.776rem + 0.471vw, 1.2rem);

	position: relative;

	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 100%;
	align-self: auto;
	order: 0;	

	margin: 0 5px;
}

#juniper-footer .contact-form .field--submit-message {
	padding-top: 0;
	position: relative;

	display: inline-block;
	font-size: 0;
	line-height: 0;

	flex-basis: auto;
}

#juniper-footer .contact-form .field--first-name,
#juniper-footer .contact-form .field--last-name,
#juniper-footer .contact-form .field--email-address,
#juniper-footer .contact-form .field--subject {
	flex-basis: calc( 50% - 10px );
}

#juniper-footer .contact-form label,
.wpcf7-response-output span {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
	text-transform: uppercase;	
}

#juniper-footer .contact-form label {
	position: absolute;
	top: 0;
	left: 0;

	-webkit-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;

	opacity: 0;
}

#juniper-footer .contact-form .field--focused label {
	opacity: 1;
}

#juniper-footer .contact-form input,
#juniper-footer .contact-form textarea,
#juniper-footer .contact-form select,
#juniper-footer .contact-form .wpcf7-response-output {
	font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
	font-style: normal;
	font-weight: 400!important;
	line-height: 120%; /* 28.8px */

	width: 100%!important;
	float: none!important;
	height: auto;
	
	border-radius: 0;
}

#juniper-footer .contact-form input,
#juniper-footer .contact-form textarea,
#juniper-footer .contact-form select {
	padding: 14px 0 5px;
	display: block;		

	transition-property: border-color;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;

	border: solid 1px var(--color--sand);
	border-width: 0 0 1px 0;

	margin-bottom: 0;	
}

#juniper-footer .contact-form .field--focused input,
#juniper-footer .contact-form .field--focused textarea,
#juniper-footer .contact-form .field--focused select {
	border-color: var(--color--off-black);
}

#juniper-footer .contact-form textarea {
	padding-top: 0;
	margin-top: 14px; /* This must be the same value as the inputs' top padding!!! */
	height: calc( 3 * clamp(1.813rem, 1.455rem + 0.952vw, 2.313rem) );	
}

/**
 * TEXTAREA FIXES
 *
 * Background for the pseudo items is defined above, at the beginning of the footer 
 * styles section!!!
 *
 * ................................................................................................
 * ................................................................................................
 */

/* Textarea autogrow 2024 */
@supports (field-sizing: content) {

	#juniper-footer .contact-form textarea {
		height: auto;	

		field-sizing: content;	
	}

}

/* "Hide" resize handle */
#juniper-footer li[class*="field--"]:has(textarea) {
	position: relative;
}
#juniper-footer li[class*="field--"]:has(textarea):after {
	content: '';
	position: absolute;
	bottom: 1px;
	right: 1px;
	display: block;
	width: 8px;
	height: 8px;
}

/* "Hide" textare scrollbar displayed when height is set to small
   Some sources claim that `overflow: auto` solves this issue - but it doesn't. */

#juniper-footer li[class*="field--"]:has(textarea):before {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	width: 20px; 				/* scrollbar width varies by browser */
	height: calc( 100% - 1px ); /* -1px for the border */
	z-index: 10;
}

/**
 * ................................................................................................
 * ................................................................................................
 * 
 * EOF textarea fixes
 */

#juniper-footer .contact-form div.wpcf7 form.wpcf7-form input[type="submit"],
#juniper-footer .contact-form div.wpcf7 form.wpcf7-form input[type="reset"] {
	width: auto;

    font-family: var(--font--syndicat);
    color: var(--color--beige);
    font-weight: inherit;
    font-size: clamp(0.875rem, 0.824rem + 0.196vw, 1rem);
    margin: 0;
    text-transform: inherit;
    background: transparent;

    height: auto;	

    padding: 11px 50px 8px 10px;

	border-radius: 5px;
	border: 1px solid var(--color--beige);  

	transition-property: background-color, color, border-color;
}

#juniper-footer .contact-form.submittable div.wpcf7 form.wpcf7-form input[type="submit"] {
	color: var(--color--off-black);
	border-color: var(--color--off-black);
}

#juniper-footer .contact-form.submittable div.wpcf7 form.wpcf7-form input[type="submit"]:is(:hover, :active, :focus) {
	color: var(--color--beige);
	background-color: var(--color--off-black);
}

/**
 * ................................................................................................
 * ................................................................................................
 * 
 * EOF form feedback
 */

@media ( max-width: 768px ) {

	#juniper-footer .contact-form {
		margin-bottom: clamp(3.125rem, -0.647rem + 14.368vw, 6.25rem);
	}

	#juniper-footer .wpcf7-response-output {
		margin-top: 0px;
	}

	#juniper-footer .contact-form div.wpcf7 form.wpcf7-form .field--submit-message {
		/* Same as the flex-container's vertical gap */
		margin-top: clamp(1.25rem, 0.478rem + 2.941vw, 3.125rem);
	}	

}

/* Footer Tagline
----------------- */

#juniper-footer .footer-tagline {}

#juniper-footer .footer-tagline h3 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;		

	max-width: 562px;
	width: 100%;
}

@media( max-width: 768px ) {

	#juniper-footer .footer-tagline h3 {
		padding-bottom: 0!important;
	}

}

/* Footer menus + Copyright +  Quick Contact
-------------------------------------------- */

#juniper-footer [class*="-menu"] li,
#juniper-footer .quick-contact li {
	display: block;
}
#juniper-footer .featured-menu li {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: normal;
	align-items: flex-start;
	align-content: normal;
}

#juniper-footer [class*="-menu"] a,
#juniper-footer .quick-contact a {
	-webkit-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;

	display: block;
}

#juniper-footer .featured-menu {}

#juniper-footer .featured-menu a {
	font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);	
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 28.8px */	
}

#juniper-footer .menu--active:has(.item--active) a:not(.item--active),
#juniper-footer .menu--active:has(.item--active) a:not(.item--active) {
	color: var(--color--beige);
}

@media ( max-width: 480px ) {

	#juniper-footer .footer-menus .flex-item[class*="-menu"]:not(:last-child) {
		margin-bottom: 0;
	}

	#juniper-footer .quick-contact ul {
		margin-bottom: 20px;
	}			

	#juniper-footer .footer-tagline {
		margin-top: 90px;
	}

	#juniper-footer .copyright {
		margin: 0;
	}	

}

/* Newsletter Form
------------------ */

#juniper-footer .newsletter-form {}

#juniper-footer .newsletter-form h3 {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);	
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
	text-transform: uppercase;	

	margin: 0;
	padding: 0;
}

#juniper-footer .newsletter-form form {
	margin: 0 0 16px;
	width: 100%;
	max-width: 276px;
}

#juniper-footer .newsletter-form li {
	position: relative;
}

#juniper-footer .newsletter-form input[type="email"],
.wpcf7-response-output {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);	
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
}

#juniper-footer .newsletter-form input[type="email"] {
	background: transparent;
    border-radius: 0;
    padding: 4px 0 6px 0;
	border: #343335 solid 1px;
	border-width: 0 0 1px 0;
    margin: 0;
    text-transform: none;	
}

#juniper-footer .newsletter-form input[type="submit"],
#juniper-footer .newsletter-form .pseudo-submit {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	display: block;

	z-index: 5;
}

#juniper-footer .newsletter-form input[type="submit"] {
    background: transparent;
    color: transparent;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    margin-top: 0;
    text-transform: none;

    text-indent: -9999em;

    z-index: 6;	
}

#juniper-footer .newsletter-form .pseudo-submit svg,
#juniper-footer .newsletter-form .pseudo-submit path {
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

#juniper-footer .newsletter-form .field--focused .pseudo-submit path,
#juniper-footer .newsletter-form .submit--active .pseudo-submit path {
	fill: var(--color--off-black);
}

#juniper-footer .newsletter-form .wpcf7-response-output {
	margin-top: 3px!important;
	text-align: left;
	font-weight: 400;
}

#juniper-footer .newsletter-form .wpcf7-response-output:not(.jd-form-success-msg) {
	display: none!important;
}

#juniper-footer .newsletter-form .wpcf7-spinner {
    transform: none;
    top: 7px;    
}

#juniper-footer .newsletter-form input[type="submit"], 
#juniper-footer .newsletter-form .pseudo-submit {
    transform: none;
    top: 2px;	
}

@media ( max-width: 768px ) {

	#juniper-footer .newsletter-form form {
		margin-bottom: 0;
	}

	#juniper-footer .newsletter-form .wpcf7-spinner {
	    right: 5px;
	    top: -13px;		
	}	

}

/* Copyright
------------ */

#juniper-footer .copyright {}

#juniper-footer .copyright,
#juniper-footer .copyright p {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);	
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */	
}

/* Quick Contact
---------------- */

#juniper-footer .quick-contact {}

#juniper-footer .quick-contact,
#juniper-footer .quick-contact li,
#juniper-footer .quick-contact a {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);	
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */		
}

@media ( max-width: 800px ) {

	#juniper-footer .quick-contact { padding-top: 10px; }

}

/* Footer Menus
--------------- */

#juniper-footer .footer-menus {}

#juniper-footer .footer-menus a {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */		
}

/* Page Template - Home
================================================================================================ */

.page-template-page-home {
	font-family: var(--font--syndicat);
}

.page-template-page-home img {
	display: block;
	max-width: unset;
	width: 100%;
}

/* THE SUPERGRID
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
*/


/* General grid config
------------------------------------------------------------------------------------------------ */

.jd-supergrid {
	display: grid;
	/* You should use minmax() to avoid grid blowout (grid wider than grid 
	   container); */	
	grid-template-columns: 
		minmax(19.1549%, 19.1549%)
		minmax(9.6478%, 9.6478%)
		minmax(9.3661%, 9.3661%)
		minmax(9.3661%, 9.3661%)
		minmax(0, 9.3661%)
		minmax(9.3661%, 9.3661%) 	/* no change allowed because of Systems image grid */
		minmax(0, 9.3661%)
		minmax(9.3661%, 9.3661%)
		minmax(9.3661%, 9.3661%);
	gap: 10px;
}

/* Grid image widths should also be maximized to avoid grid blowout 
   (grid wider than grid container); */
.jd-supergrid img {
	width: 100%;
	height: auto; 
}

@media ( max-width: 960px ) {
	
	.jd-supergrid {}

}

@media ( max-width: 480px ) {
	
	.jd-supergrid {
		grid-template-columns: 
			minmax(38.3098%, 38.3098%)
			1fr;	
	}

}

/* Header
------------------------------------------------------------------------------------------------ */

/* This one can't be a grid, due to the content structure, so we use flex, but make 
   it accomodate to the grid rules. */

.header__submenu .jd-grid--menu-groups,
.header__submenu .jd-grid--menu-group {
	display: grid;
}

.header__submenu .jd-grid--menu-groups {
	gap: 50px 10px;
	grid-template-columns: 
		calc( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px ) 
		calc( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px );

	/* Substract the image width, and a 10px gap from the total width */
	width: calc( 100vw - ( 2 * ( ( 100vw - 20px ) * 0.093661 ) + 10px ) - 10px );
}

/* GRID INSIDE GRID - we should use vw here, percentage means x percent of the 
   parent grid width!! */
.header__submenu .jd-grid--menu-group {
	gap: 0 10px;
	grid-template-columns: 
		calc( ( 100vw - 20px ) * 0.093661 ) 
		calc( 3 * ( ( 100vw - 20px ) * 0.093661 ) + 20px );
}

.header__submenu .item__image {
	width: calc( 2 * ( ( 100vw - 20px ) * 0.093661 ) + 10px );
}

@media ( min-width: 1441px ) {

	.header__submenu .jd-grid--menu-groups {
		grid-template-columns:
			562px 
			562px;

		/* Substract the image width, and a 10px gap from the total width */
		width: 1134px;
	}

	.header__submenu .jd-grid--menu-group {
		gap: 0 10px;
		grid-template-columns: 
			133px  
			419px;
	}

	.header__submenu .item__image {
		width: 276px;
	}

}

@media ( max-width: 1260px ) and ( min-width: 481px ) {

	.header__submenu .jd-grid--menu-group {
		grid-template-columns: 
			1fr;

		align-self: start;
	}

	.wrap--menu-group__label 	{ grid-row: 1;}
	.wrap--menu-group__list 	{ grid-row: 2; align-self: start;}

}

@media ( max-width: 768px ) {

	.header__submenu .jd-grid--menu-groups {
		grid-template-columns: 
			1fr;

		/* Substract the image width, and a 10px gap from the total width */
		width: calc( 100vw - ( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px ) - 10px );		
	}		

	.header__submenu .item__image {
		width: calc( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px );
	}	

}

@media ( max-width: 480px ) {

	.header__submenu .jd-grid--menu-groups {
		grid-template-columns: 
			1fr;

		width: 100%;		
	}	

	.header__submenu .jd-grid--menu-group {
		grid-template-columns: 
			calc( ( 100vw - 20px ) * 0.383098 )
			calc( ( 100vw - 20px ) * 0.588732 );
	}

	.header__submenu .item__image {
		display: none!important;
	}	

}

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

#juniper-footer .wrap--contact-form-title 	{ grid-column: 1; grid-row: 1; }
#juniper-footer .wrap--contact-form-desc 	{ grid-column: 4 / span 6; grid-row: 1; } 
#juniper-footer .wrap--contact-form 		{ grid-column: 4 / span 6; grid-row: 2; }
#juniper-footer .wrap--footer-tagline 		{ grid-column: 1 / span 2; grid-row: 3; }
#juniper-footer .wrap--featured-menu 		{ grid-column: 6 / span 4; grid-row: 3; }
#juniper-footer .wrap--newsletter-form 		{ grid-column: 1; grid-row: 4; }
#juniper-footer .wrap--copyright 			{ grid-column: 1; grid-row: 5; }
#juniper-footer .wrap--quick-contact 		{ grid-column: 4 / span 2; grid-row: 5; }
#juniper-footer .wrap--footer-menus 		{ grid-column: 6 / span 4; grid-row: 5; }

#juniper-footer .wrap--copyright,
#juniper-footer .wrap--quick-contact,
#juniper-footer .wrap--footer-menus 		{ align-self: end; }

#juniper-footer .footer-menus {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	align-content: flex-start;
	height: 100%;	

	gap: 0 10px;
}

#juniper-footer .footer-menus > * {
	flex-basis: calc( 25% - 7.5px );
}

@media ( max-width: 1000px ) {

	#juniper-footer .wrap--featured-menu 		{ grid-column: 4 / span 6; grid-row: 3; }
	#juniper-footer .wrap--quick-contact 		{ grid-column: 2 / span 2; grid-row: 5; }
	#juniper-footer .wrap--footer-menus 		{ grid-column: 4 / span 6; grid-row: 5; }	
	#juniper-footer .wrap--newsletter-form 		{ grid-column: 1 / span 2; grid-row: 4; }

}

@media ( max-width: 800px ) {

	#juniper-footer .wrap--copyright 			{ grid-column: 1 / span 2; grid-row: 6; }	
	#juniper-footer .wrap--quick-contact 		{ grid-column: 4 / span 6; grid-row: 6; }	

}

@media ( max-width: 768px ) {

	#juniper-footer .wrap--contact-form-desc 	{ grid-column: 3 / span 7; } 
	#juniper-footer .wrap--contact-form 		{ grid-column: 1 / span 9; }
	#juniper-footer .wrap--featured-menu 		{ grid-column: 3 / span 7; }
	#juniper-footer .wrap--quick-contact 		{ grid-column: 3 / span 7; }
	#juniper-footer .wrap--footer-menus 		{ grid-column: 3 / span 7; }

}

@media ( max-width: 480px ) {

	#juniper-footer .wrap--contact-form-title 	{ grid-column: 1; grid-row: 1; }
	#juniper-footer .wrap--contact-form-desc 	{ grid-column: 2; grid-row: 1; } 
	#juniper-footer .wrap--contact-form 		{ grid-column: 1 / span 2; grid-row: 2; }
	#juniper-footer .wrap--footer-tagline 		{ grid-column: 1 / span 2; grid-row: 6; }
	#juniper-footer .wrap--featured-menu 		{ grid-column: 2; grid-row: 3 / 6; }
	#juniper-footer .wrap--newsletter-form 		{ grid-column: 2; grid-row: 5; }
	#juniper-footer .wrap--copyright 			{ grid-column: 1 / span 2; grid-row: 7; }
	#juniper-footer .wrap--quick-contact 		{ grid-column: 2; grid-row: 4; }
	#juniper-footer .wrap--footer-menus 		{ grid-column: 1; grid-row: 3 / span 3; }

	#juniper-footer .wrap--quick-contact,
	#juniper-footer .wrap--newsletter-form 		{ align-self: end; }

	#juniper-footer .wrap--copyright,
	#juniper-footer .wrap--footer-menus 		{ align-self: start; }

	#juniper-footer .footer-menus {
		flex-wrap: wrap;
		height: auto;	
		gap: 10px 0;
	}

	#juniper-footer .footer-menus > * {
		flex-basis: 100%;
	}

}

/* Home Hero
------------------------------------------------------------------------------------------------ */

.home-hero-video .wrap--hero-events {
	width: calc( 2 * ( ( 100% - 20px ) * 0.093661 ) + 10px );
}

.home-hero-video .wrap--hero-btns {
	left: 10px;
}

.home-hero-video .wrap--hero-events {
	right: 10px;
}

@media ( min-width: 1441px ) {

	.home-hero-video .wrap--hero-btns {
		left: calc( ( 100% - 1420px ) / 2 );
	}

	.home-hero-video .wrap--hero-events {
		right: calc( ( 100% - 1420px ) / 2 );
	}

}

@media ( max-width: 1000px ) {

	.home-hero-video .wrap--hero-events {
		width: calc( 3 * ( ( 100% - 20px ) * 0.093661 ) + 20px );
	}	

}

@media ( max-width: 580px ) {

	.home-hero-video .wrap--hero-events {
		left: 5px;
	}	

}

@media ( max-width: 480px ) {

	.home-hero-video .wrap--hero-events {
		width: 178px;
	}	

}

/* Home Tagline (CLONEABLE)
------------------------------------------------------------------------------------------------ */

.container--featured-tagline .wrap--ft__tagline { grid-column: 1 / span 4; grid-row: 1; }
.container--featured-tagline .wrap--ft__image 	{ grid-column: 6 / span 4; grid-row: 1; }

@media ( max-width: 800px ) {

	.container--featured-tagline .wrap--ft__tagline { grid-column: 1 / span 9; grid-row: 1; }
	.container--featured-tagline .wrap--ft__image 	{ grid-column: 3 / span 7; grid-row: 2; }

}

@media ( max-width: 480px ) {

	.container--featured-tagline .wrap--ft__tagline { grid-column: 1 / span 2; grid-row: 1; }
	.container--featured-tagline .wrap--ft__image 	{ grid-column: 2; grid-row: 2; }

}

/* Home Mission
------------------------------------------------------------------------------------------------ */

.home-mission .wrap--feat-image 	{ grid-column: 1 / span 4; grid-row: 1 / span 2; }
.home-mission .wrap--section-title 	{ grid-column: 7; grid-row: 1; }
.home-mission .wrap--section-copy 	{ grid-column: 8 / span 2; grid-row: 1; }
.home-mission .wrap--sec-image 		{ grid-column: 8 / span 2; grid-row: 2; 
	align-self: end; 	
}

.home-mission .jd-supergrid {
	grid-template-rows: 1fr 1fr;
}

@media ( max-width: 1200px ) {

	.home-mission .jd-supergrid 		{ 
		grid-template-rows:
			auto 
			auto 
			1fr;
	}

	.home-mission .wrap--feat-image 	{ grid-column: 1 / span 4; grid-row: 1 / span 3; }
	.home-mission .wrap--section-title 	{ grid-column: 7 / span 3; grid-row: 1; }
	.home-mission .wrap--section-copy 	{ grid-column: 7 / span 3; grid-row: 2; }
	.home-mission .wrap--sec-image 		{ grid-column: 8 / span 2; grid-row: 3; }	

}

@media ( max-width: 800px ) {

	.home-mission .jd-supergrid { 
		grid-template-rows:
			auto 
			auto 
			1fr;
	}

	.home-mission .wrap--section-title 	{ grid-column: 3 / span 2; grid-row: 1; }
	.home-mission .wrap--section-copy 	{ grid-column: 5 / span 5; grid-row: 1; }
	.home-mission .wrap--feat-image 	{ grid-column: 3 / span 7; grid-row: 2; }	

}

@media ( max-width: 480px ) {

	.home-mission .jd-supergrid { 
		grid-template-rows:
			auto 
			auto;
	}

	.home-mission .wrap--section-title 	{ grid-column: 1; grid-row: 1; 
		justify-self: start;
	}
	.home-mission .wrap--section-copy 	{ grid-column: 2; grid-row: 1; }	
	.home-mission .wrap--feat-image 	{ grid-column: 1 / span 2; grid-row: 2; }	

}

/* Home Benefits
------------------------------------------------------------------------------------------------ */

/* No supergrid here - the benefit slider has a "subgrid" that should accomodate 
   to the supergrid config. Furthermore, we have ONE FLEXBOX PSEUDO-GRID, AND ONE 
   REAL GRID!! */

.home-benefits .panels {
	/*gap: clamp(2.938rem, 0.21rem + 10.392vw, 9.563rem);*/

	/* We should use specific pixel values, otherwise we couldn't check
	   the total width of the panel container with JavaScript!! */
	gap: 153px;
	width: 100%;
}

.home-benefits .jd-grid {
	display: grid;
    grid-template-columns: 
    	calc( ( 0.47534 * ( 100vw - 20px ) ) + 30px ) 
    	350px;	
    grid-template-rows: auto auto auto 1fr;
	gap: 10px;
}

.home-benefits .wrap--panel-title 		{ grid-column: 1 / span 2; grid-row: 1; }
.home-benefits .wrap--panel-feat-img 	{ grid-column: 1; grid-row: 2 / span 3; }
.home-benefits .wrap--panel-desc 		{ grid-column: 2; grid-row: 2; 
	justify-self: start;
}
.home-benefits .wrap--panel-list		{ grid-column: 2; grid-row: 3; 
	justify-self: start;
}
.home-benefits .wrap--panel-sec-image 	{ grid-column: 2; grid-row: 4; 
	justify-self: end; 
	align-self: end;
}

@media ( min-width: 1441px ) {

	.home-benefits .jd-grid {
	    grid-template-columns: 
	    	705px  
	    	350px;	
	}

}

@media ( max-width: 1100px ) 	{ 

	.home-benefits .panels { gap: 100px; } 

}

@media ( max-width: 800px ) {

	.home-benefits .jd-grid {
	    grid-template-columns: 
	    	calc( ( 0.569001 * ( 100vw - 20px ) ) + 40px ) 
	    	calc( ( 0.280983 * ( 100vw - 20px ) ) + 20px );	
	}

}

@media ( max-width: 640px ) {

	.home-benefits .panels {
		gap: 47px;
	}	

	.home-benefits .jd-grid {
	    grid-template-columns: 
	    	calc( clamp(17.625rem, 6.739rem + 41.471vw, 44.063rem) - 276px ) 
	    	175px
	    	101px;	
	}

	.home-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img {
		grid-column: 1 / span 3;
	}

	.home-benefits .wrap--panel-feat-img {
		padding-bottom: 10px;
	}

	.home-benefits .wrap--panel-desc {
		grid-column: 1 / span 3;
	}

	.home-benefits .wrap--panel-title 		{ grid-row: 1; }
	.home-benefits .wrap--panel-feat-img 	{ grid-row: 2; }
	.home-benefits .wrap--panel-desc 		{ grid-row: 3; }

}

@media ( max-width: 420px ) {

	.home-benefits .jd-grid {
	    grid-template-columns: 
	    	calc( ( ( 0.766196 * ( 100vw - 20px ) ) + 10px ) - 185px )
	    	175px;	
	}	

	.-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img,
	.home-benefits .wrap--panel-desc {
		grid-column: 1 / span 2;
	}

	.home-benefits .wrap--panel-list {
		grid-column: 1;
	}	

	.home-benefits .wrap--panel-sec-image {
		grid-column: 2;
	}		

	.home-benefits .wrap--panel-title 		{ grid-row: 1; }
	.home-benefits .wrap--panel-feat-img 	{ grid-row: 2; }
	.home-benefits .wrap--panel-desc 		{ grid-row: 3; }
	.home-benefits .wrap--panel-list		{ grid-row: 4; align-self: end; }
	.home-benefits .wrap--panel-sec-image 	{ grid-row: 4; }	

}

@media ( max-width: 320px ) {

	.home-benefits .panels,
	.home-benefits .wrap--panel {
		display: block;
	}

	.home-benefits .panels,
	.home-benefits .panels * {
		transform: none!important;
	}

	.home-benefits .wrap--panels {
		width: auto;
	}

	.home-benefits .jd-grid {
		display: block;
		width: calc( 100vw - 20px);
		overflow: hidden;
	}	

	.home-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img,
	.home-benefits .wrap--panel-desc,
	.home-benefits .wrap--panel-list,
	.home-benefits .wrap--panel-sec-image { 
		width: 100%; 
		display: block;
	}	

	.home-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img {
		margin-bottom: 10px!important;
	}

	.home-benefits .panel-title h2 {
		text-wrap: wrap;
	}

}

/* Home Events
------------------------------------------------------------------------------------------------ */

.home-events .wrap--section-title 	{ grid-column: 1; grid-row: 1 / span 2; }
.home-events .wrap--event-main 		{ grid-column: 2 / span 4; grid-row: 1; }
.home-events .wrap--event-image 	{ grid-column: 6 / span 4; grid-row: 1; }
.home-events .wrap--event-cta 		{ grid-column: 6 / span 2; grid-row: 2; }
.home-events .wrap--event-content 	{ grid-column: 8 / span 2; grid-row: 2; }

@media ( max-width: 800px ) {

	.home-events .wrap--section-title 	{ grid-column: 1 / span 2; grid-row: 1; }
	.home-events .wrap--event-main 		{ grid-column: 3 / span 7; grid-row: 1; }
	.home-events .wrap--event-image 	{ grid-column: 3 / span 7; grid-row: 3; }
	.home-events .wrap--event-cta 		{ grid-column: 3 / span 2; grid-row: 2; }
	.home-events .wrap--event-content 	{ grid-column: 6 / span 4; grid-row: 2; 
		justify-self: end;
	}

}

@media ( max-width: 480px ) {

	.home-events .wrap--section-title 	{ grid-column: 1 / span 2; grid-row: 1; }
	.home-events .wrap--event-main 		{ grid-column: 1 / span 2; grid-row: 3; }
	.home-events .wrap--event-image 	{ grid-column: 1 / span 2; grid-row: 2; }
	.home-events .wrap--event-cta 		{ grid-column: 1 / span 2; grid-row: 4; }
	.home-events .wrap--event-content 	{ grid-column: 1 / span 2; grid-row: 5; 
		justify-self: end;
	}

}

/* Home Systems
------------------------------------------------------------------------------------------------ */

.home-systems .jd-supergrid {
	gap: 0 10px;
}

.home-systems .wrap--section-title 			{ grid-column: 1; grid-row: 1 / span 2; }

.home-systems .menu-group-item:nth-child(2) { grid-column: 3 / span 3; grid-row: 1; }
.home-systems .menu-group-item:nth-child(3) { grid-column: 7 / span 3; grid-row: 1; }

.home-systems .menu-group-item:nth-child(4) { grid-column: 3 / span 3; grid-row: 2; }
.home-systems .menu-group-item:nth-child(5) { grid-column: 7 / span 3; grid-row: 2; }

.home-systems .menu-group-item:nth-child(6) { grid-column: 3 / span 3; grid-row: 3; }
.home-systems .menu-group-item:nth-child(7) { grid-column: 7 / span 3; grid-row: 3; }

.home-systems .menu-group-item:nth-child(8) { grid-column: 3 / span 3; grid-row: 4; }
.home-systems .menu-group-item:nth-child(9) { grid-column: 7 / span 3; grid-row: 4; }

.home-systems .menu-group-item:nth-child(10) { grid-column: 3 / span 3; grid-row: 5; }
.home-systems .menu-group-item:nth-child(11) { grid-column: 7 / span 3; grid-row: 5; }

.home-systems .menu-group-item:nth-child(12) { grid-column: 3 / span 3; grid-row: 6; }
.home-systems .menu-group-item:nth-child(13) { grid-column: 7 / span 3; grid-row: 6; }

.home-systems .menu-group-item:nth-child(14) { grid-column: 3 / span 3; grid-row: 7; }
.home-systems .menu-group-item:nth-child(15) { grid-column: 7 / span 3; grid-row: 7; }

.home-systems .menu-group-item:nth-child(16) { grid-column: 3 / span 3; grid-row: 8; }
.home-systems .menu-group-item:nth-child(17) { grid-column: 7 / span 3; grid-row: 8; }

.home-systems .menu-group-item:nth-child(18) { grid-column: 3 / span 3; grid-row: 9; }
.home-systems .menu-group-item:nth-child(19) { grid-column: 7 / span 3; grid-row: 9; }

.home-systems .menu-group-item:nth-child(20) { grid-column: 3 / span 3; grid-row: 10; }
.home-systems .menu-group-item:nth-child(21) { grid-column: 7 / span 3; grid-row: 10; }

.home-systems .menu-group-item:not( :nth-last-child(1), :nth-last-child(2) ) {
	margin-bottom: calc( ( 0.093661 * ( 100vw - 20px ) ) + 10px );
}

@media ( min-width: 1441px ) {

	.home-systems .menu-group-item:not( :nth-last-child(1), :nth-last-child(2) ) {
		margin-bottom: 143px;
	}

}

@media ( max-width: 800px ) {

	.home-systems .wrap--section-title 			{ grid-column: 1 / span 2; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(2) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(3) { grid-column: 3 / span 7; grid-row: 2; }

	.home-systems .menu-group-item:nth-child(4) { grid-column: 3 / span 7; grid-row: 3; }
	.home-systems .menu-group-item:nth-child(5) { grid-column: 3 / span 7; grid-row: 4; }

	.home-systems .menu-group-item:nth-child(6) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(7) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(8) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(9) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(10) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(11) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(12) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(13) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(14) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(15) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(16) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(17) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(18) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(19) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(20) { grid-column: 3 / span 7; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(21) { grid-column: 3 / span 7; grid-row: 1; }

	.home-systems .menu-group-item:not( :nth-last-child(1), :nth-last-child(2) ) {
		margin-bottom: 0;
	}

	.home-systems .jd-supergrid {
		gap: 10px;
	}	

}

@media ( max-width: 480px ) {

	.home-systems .wrap--section-title 			{ grid-column: 1; grid-row: 1; }

	.home-systems .menu-group-item:nth-child(2) { grid-column: 2; grid-row: 1; }
	.home-systems .menu-group-item:nth-child(3) { grid-column: 2; grid-row: 2; }

	.home-systems .menu-group-item:nth-child(4) { grid-column: 2; grid-row: 3; }
	.home-systems .menu-group-item:nth-child(5) { grid-column: 2; grid-row: 4; }

	.home-systems .menu-group-item:nth-child(6) { grid-column: 2; grid-row: 5; }
	.home-systems .menu-group-item:nth-child(7) { grid-column: 2; grid-row: 6; }

	.home-systems .menu-group-item:nth-child(8) { grid-column: 2; grid-row: 7; }
	.home-systems .menu-group-item:nth-child(9) { grid-column: 2; grid-row: 8; }

	.home-systems .menu-group-item:nth-child(10) { grid-column: 2; grid-row: 9; }
	.home-systems .menu-group-item:nth-child(11) { grid-column: 2; grid-row: 10; }

	.home-systems .menu-group-item:nth-child(12) { grid-column: 2; grid-row: 11; }
	.home-systems .menu-group-item:nth-child(13) { grid-column: 2; grid-row: 12; }

	.home-systems .menu-group-item:nth-child(14) { grid-column: 2; grid-row: 13; }
	.home-systems .menu-group-item:nth-child(15) { grid-column: 2; grid-row: 14; }

	.home-systems .menu-group-item:nth-child(16) { grid-column: 2; grid-row: 15; }
	.home-systems .menu-group-item:nth-child(17) { grid-column: 2; grid-row: 16; }

	.home-systems .menu-group-item:nth-child(18) { grid-column: 2; grid-row: 17; }
	.home-systems .menu-group-item:nth-child(19) { grid-column: 2; grid-row: 18; }

	.home-systems .menu-group-item:nth-child(20) { grid-column: 2; grid-row: 19; }
	.home-systems .menu-group-item:nth-child(21) { grid-column: 2; grid-row: 20; }

}

/* Home Products
------------------------------------------------------------------------------------------------ */

.home-products .wrap--section-title 	{ grid-column: 1; }
.home-products .wrap--product-list 		{ grid-column: 4 / span 3; }

.home-products .item__image {
	width: calc( ( 0.187322 * ( 100vw - 20px ) ) + 10px );
	height: auto;
}

@media ( min-width: 1441px ) {

	.home-products .item__image {
		width: 276px;
	}

}

@media ( max-width: 768px ) {

	.home-products .jd-supergrid {
		grid-template-columns: 
			1fr;
	}
	width: 

	.home-products .wrap--section-title 	{ grid-column: 1; grid-row: 1; }
	.home-products .wrap--product-list 		{ grid-column: 1; grid-row: 2; }	

	.home-products .item__image {
		width: calc( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px );		
	}

}

@media ( max-width: 480px ) {

	.home-products .jd-supergrid {
		grid-template-columns: 
			calc( ( 100vw - 20px ) * 0.383098 )
			calc( ( 100vw - 20px ) * 0.588732 );

		width: calc( 100vw - ( 4 * ( ( 100vw - 20px ) * 0.093661 ) + 30px ) - 10px );
	}

	.home-products .wrap--section-title 	{ grid-column: 1; grid-row: 1; }
	.home-products .wrap--product-list 		{ grid-column: 2; grid-row: 1; }	

	.home-products .item__image {
		width: calc( 100% - 10px );
	}

}


/* Home News
------------------------------------------------------------------------------------------------ */

.home-news .wrap--section-title 	{ grid-column: 1; }
.home-news .wrap--news-slider 		{ grid-column: 2 / span 8; }

@media ( max-width: 1200px ) {

	.home-news .wrap--section-title 	{ grid-column: 1 / span 9; grid-row: 1; }
	.home-news .wrap--news-slider 		{ grid-column: 1 / span 9; grid-row: 2; }

}

@media ( max-width: 992px ) {

	.home-news .wrap--section-title 	{ grid-column: 1 / span 2; grid-row: 1; }
	.home-news .wrap--news-slider 		{ grid-column: 3 / span 7; grid-row: 1; }

}

@media ( max-width: 640px ) {

	.home-news .wrap--section-title 	{ grid-column: 1 / span 2; }
	.home-news .wrap--news-slider 		{ grid-column: 3 / span 7; }

}

@media ( max-width: 480px ) {

	.home-news .wrap--section-title 	{ grid-column: 1; }
	.home-news .wrap--news-slider 		{ grid-column: 2; }

}

/* 
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
eof THE GRID */

/* Header & Submenu
------------------------------------------------------------------------------------------------ */

.page-template-page-home 								{ padding-top: 0!important; }
@media ( max-width: 768px ) { .page-template-page-home 	{ padding-top: 0!important; } }

.page-template-page-home {
	background: var(--color--beige);
}

.page-template-page-home .juniper-header {
	margin: 5px 5px 0 5px;
}

.page-template-page-home .juniper-header:not(.over-the-vid) {
	background: rgba(52, 51, 53, 0.40);
}

.page-template-page-home .juniper-header:not(.over-the-vid) .header-logo .logo--dark {
	opacity: 0;
	visibility: hidden;
}

.page-template-page-home .juniper-header:not(.over-the-vid) .header-logo .logo--light {
	opacity: 1;
	visibility: visible;	
}

.page-template-page-home .juniper-header:not(.over-the-vid) .outer-wrap--hamburger > * {
	background: var(--color--beige);
}

/* Home Hero
------------------------------------------------------------------------------------------------ */

.home-hero-video {
	position: relative;
	height: 0;
	width: 100%;
	padding-bottom: 56.25%;

	overflow: hidden;

	background: #1e1b18;
}

.home-hero-video .wrap--jd-iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;	

    opacity: 0;

    padding-top: 0;

    -webkit-transition: opacity .25s ease-in;
    -o-transition: opacity .25s ease-in;
    transition: opacity .25s ease-in;
}

.loaded .home-hero-video .wrap--jd-iframe {
	opacity: 1;
}

/* Video overlay - displayed upon opening the submenu, and helps to disable
   the video click events while the submenu is open (plus, it adds some design 
   flair.) */
.home-hero-video .video-overlay {
	position: absolute;
	z-index: 10;
	background: rgba(0, 0, 0, .4);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	opacity: 0;
	visibility: hidden;

	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.submenu--open .home-hero-video .video-overlay {
	opacity: 1;
	visibility: visible;
}

@media ( max-width: 580px ) {

	.home-hero-video {
		padding-bottom: 100vh;
		overflow: hidden;
	}
	.logged-in .home-hero-video {
		padding-bottom: calc( 100vh - 46px );
	}

	.home-hero-video .wrap--jd-iframe {
		width: 100%!important;
		height: 100%;

	    transform: translateY(-50%);
	    left: auto;
	    top: 50%;	
	}

	.home-hero-video video {
		width: auto;
		max-width: unset;
		height: 100%;

		position: relative;

	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);		
	}

}

@media ( min-width: 1760px ) {

	.home-hero-video {
		padding-bottom: 1000px;
		overflow: hidden;
	}

	.home-hero-video .wrap--jd-iframe {
		width: 100%!important;
		height: 100%;

	    transform: translateY(-50%);
	    left: auto;
	    top: 50%;	
	}

	.home-hero-video video {
		width: 100%;
		max-width: unset;
		height: auto;

		position: relative;

	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);		
	}

}

.home-hero-video .wrap--hero-tagline {
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ); 
	width: 500px;
	max-width: clamp(15.625rem, 9.191rem + 24.51vw, 31.25rem);
	height: auto;
}

.home-hero-video .hero-tagline h2 {
	color: var(--color--beige);
	text-align: center;
	font-family: var(--font--syndicat);
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);
	font-style: normal;
	font-weight: 400!important;
	line-height: 120%; /* 19.2px */
	text-transform: uppercase;
}

.home-hero-video .wrap--hero-btns {
	position: absolute;
	width: auto;
	height: auto;
	bottom: 10px;
}

.home-hero-video .hero-btns {
	display: inline-flex;
	gap: 10px;
}

.home-hero-video .wrap--cb-btn a {
	width: auto;
	display: block;

    font-family: var(--font--syndicat);
    color: var(--color--beige);
    font-weight: 400!important;
    font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
    margin: 0;
    text-transform: inherit;

	color: var(--color--beige);
	border-color: var(--color--beige);
    background: transparent;

    height: auto;	

    padding: 11px 49px 8px 10px;

	border-radius: 5px;
	border: 1px solid var(--color--beige);  

	transition-property: background-color, color, border-color;
	transition-timing-function: ease-in-out;
	transition-duration: .2s;
}

.home-hero-video .wrap--cb-btn a:is(:hover, :active, :focus) {
	color: var(--color--off-black);
	background-color: var(--color--beige);
}

@media ( max-width: 420px ) {

	.home-hero-video .wrap--hero-btns {
		width: calc( 100% - 20px );
	}

	.home-hero-video .hero-btns {
		width: 100%;
	}

	.home-hero-video .wrap--cb-btn {
		flex-basis: 50%;
	}

}

.home-hero-video .wrap--hero-events {
	position: absolute;
	height: auto;
	bottom: 10px;
}

.home-hero-video .hero-events {
	border-radius: 5px;
	background: rgba(52, 51, 53, 0.40);
	backdrop-filter: blur(5px);

	padding: clamp(0.313rem, 0.184rem + 0.49vw, 0.625rem);

	overflow: hidden;
}

.home-hero-video .wrap--event-bubble {
	max-width: 245px;
}

.home-hero-video .hero-events h1,
.home-hero-video .hero-events h2,
.home-hero-video .hero-events h3,
.home-hero-video .hero-events h4,
.home-hero-video .hero-events h5,
.home-hero-video .hero-events h6,
.home-hero-video .hero-events a,
.home-hero-video .hero-events div,
.home-hero-video .hero-events p {
	color: var(--color--beige);
}

.home-hero-video .hero-events h1,
.home-hero-video .hero-events h2,
.home-hero-video .hero-events h3,
.home-hero-video .hero-events h4,
.home-hero-video .hero-events h5,
.home-hero-video .hero-events h6,
.home-hero-video .hero-events div,
.home-hero-video .hero-events p {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
	font-style: normal;
	font-weight: 300;
	line-height: 120%; /* 19.2px */	
}

.home-hero-video .hero-events h3 {
	margin-bottom: clamp(0rem, -0.412rem + 1.569vw, 1rem);
}

.home-hero-video .hero-events h4 {
	padding-bottom: 0;
}

.home-hero-video .hero-events a {
	font-size: 12px;
	font-style: normal;
	font-weight: 300!important;
	line-height: 116.667%;
	text-decoration-line: underline;	

	display: inline-block;
	margin-top: 56px;
}

@media ( max-width: 580px ) {

	.home-hero-video .wrap--hero-events {
		bottom: auto;
		right: auto;
		top: 50px;
	}	

}

/* Home Tagline (CLONEABLE)
------------------------------------------------------------------------------------------------ */

.container--featured-tagline {
	padding: 10px 0 clamp(3.125rem, 1.838rem + 4.902vw, 6.25rem);
}

.container--featured-tagline img {
	width: 100%;
	height: auto;
}

.container--featured-tagline .ft__tagline {
	font-size: clamp(1.5rem, 0.882rem + 2.353vw, 3rem);
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 48px */	

	padding: .1875em 0 0;
}

.container--featured-tagline .wrap--ft__image img {
	height: auto;
	display: block;
}

.container--featured-tagline[data-section-type="no-image"] {
	padding-bottom: clamp(6.25rem, -5.065rem + 43.103vw, 15.625rem);
}
 
.container--featured-tagline[data-section-type="no-image"] .wrap--ft__tagline {
	max-width: 705px;
}

@media ( max-width: 800px ) {

	.container--featured-tagline .ft__tagline {
		line-height: 120%;
	}

	.container--featured-tagline .wrap--ft__image img {
        transform: none;
        width: calc(100% + 10px);

        margin-top: 40px;
	}	

}

/* Home - Our Mission
------------------------------------------------------------------------------------------------ */

.container--home-mission {
	padding: 0;	
}

.container--home-mission img {
	width: 100%;
	height: auto;
}

.home-mission .section-title {
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
	text-transform: uppercase; 

	padding: .2em 0 0 0;
}

.home-mission .section-copy {
	font-size: 1rem;	
	font-family: var(--font--source-serif);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
}

@media ( max-width: 992px ) {

	.home-mission .wrap--sec-image 	{ 
		display: none;
	}	

}

@media ( max-width: 800px ) {

	.home-mission .wrap--feat-image {
        transform: none;
        width: calc(100% + 10px);

        padding-top: 10px;
	}	

}

@media ( max-width: 480px ) {

	.container--home-mission img,
	.home-mission .section-title,
	.home-mission .section-copy {
		transform: none;
	}

	.home-mission .feat-image {
		margin-top: 59px;
	}	

	.home-mission .section-title {
		text-align: left;
	}	

	.home-mission .body-text {
		width: 100%;
		max-width: 400px;
	}

}

@media ( max-width: 420px ) {

	.home-mission .wrap--feat-image img { 
		width: calc(100% + 10px);
		height: auto;
		max-width: unset;
	}

}

@media ( max-width: 320px ) {

	.container--home-mission .section-title {
		margin-bottom: 10px;
	}

}

/* Home - Benefits
------------------------------------------------------------------------------------------------ */

.container--home-benefits {
	padding: 0 0 clamp(0.5rem, -5.728rem + 23.725vw, 15.625rem);
}

.home-benefits img {
	width: auto;
	max-width: 100%;
}

.home-benefits .wrap--panel-desc {
	margin-bottom: clamp(3.125rem, 1.838rem + 4.902vw, 6.25rem);
}

.home-benefits .panel-title span,
.home-benefits .panel-title h2 {
	display: inline-block;
}

.home-benefits .panel-title span {
	font-size: clamp(0.75rem, 0.647rem + 0.392vw, 1rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */

	margin-right: 10px;
	transform: translateY(-0.125em);
}

.home-benefits .panel-title h2 {
	font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 28.8px */	

	padding: 0!important;

	text-wrap: nowrap;
	overflow: hidden;
}

.home-benefits .panel-desc {
	font-size: 1rem;
	font-family: var(--font--source-serif);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */	
}

.home-benefits .panel-list {
	font-size: .75rem;
	font-style: normal;
	font-weight: 400;
	line-height: 14px; /* 116.667% */	

	width: 175px;
}

.home-benefits .wrap--panel-list {
	padding-left: calc( 100% - 175px );
}

.home-benefits .panel-list li {
  	counter-increment: sublist;
  	text-align: right;
  	padding-left: 20px;

  	position: relative;
}

.home-benefits .panel-list li:before {
  	/*content: "Section " counter(sublist) ": ";*/
  	content: counter(sublist);  
  	text-align: left;	
  	position: absolute;
  	left: 0;
}

.home-benefits .wrap--panel-sec-image img {
	mix-blend-mode: multiply;

	max-width: clamp(3.375rem, 1.342rem + 7.745vw, 8.313rem);
	height: auto;
}

@media ( max-width: 640px ) {

	.home-benefits .wrap--panel-desc {
		text-align: right;
	}

}

@media ( max-width: 320px ) {

	.panels,
	.wrap--panel {
		display: block;
	}

	.panels,
	.panels * {
		transform: none!important;
	}

	.home-benefits .wrap--panels {
		width: auto;
	}

	.home-benefits .jd-grid {
		display: block;
		width: calc( 100vw - 20px);
		overflow: hidden;
	}	

	.home-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img,
	.home-benefits .wrap--panel-desc,
	.home-benefits .wrap--panel-list,
	.home-benefits .wrap--panel-sec-image { 
		width: 100%; 
		display: block;
	}	

	.home-benefits .wrap--panel-title,
	.home-benefits .wrap--panel-feat-img {
		margin-bottom: 10px!important;
	}

	.home-benefits .panel-title h2 {
		text-wrap: wrap;
	}

}

/* Home - Events
------------------------------------------------------------------------------------------------ */

.container--home-events {
	padding: 10px 0 clamp(3.125rem, 0.268rem + 10.882vw, 10.063rem);
}

.home-events {

}

.home-events .wrap--section-title,
.home-events .event-main {
	padding-right: 50px;
}

.home-events .section-title h2 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);

	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;	

	padding-bottom: 0!important;	
}

.home-events .event-title,
.home-events .event-date,
.home-events .event-loc {
	font-size: clamp(1.5rem, 0.882rem + 2.353vw, 3rem);

	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 48px */	

	padding-bottom: 0;
}

.home-events .event-title {
	margin-bottom: 1em;
}

.home-events .event-title,
.home-events .section-title h2 {
	padding-top: .16em;
}

.home-events .event-content {
	font-family: var(--font--source-serif);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */	
}

.home-events .wrap--jd-btn {
	display: inline-flex;
}

/* Events video */

.home-events .iframe-container {
    padding-top: 100%;
}

@media ( max-width: 1120px ) {

	.home-events .event-content {
		text-align: right;
	}

}

@media ( max-width: 800px ) {

	.home-events .event-title,
	.home-events .event-date,
	.home-events .event-loc {
		line-height: 120%;
	}	

	.home-events .event-main {
		padding-bottom: 40px;
	}	

    .home-events .wrap--event-image {
        transform: none;
        width: calc(100% + 10px);
        padding-top: 50px;
    }

}

@media ( max-width: 640px ) {

	.home-events .wrap--section-title {
		padding-bottom: 0px;
	}

	.home-events .event-title {
		margin-bottom: 37px;
	}

    .home-events .wrap--event-image {
        padding-top: 10px;
    }	

	.home-events .wrap--event-image img {
		height: auto;
	}

	.home-events .wrap--event-copy {
		text-align: left;
		padding-left: 0;
	}

}

@media ( max-width: 480px ) {

	.home-events  .wrap--jd-btn {
	    min-width: 173px;
	    display: inline-block;
	    width: auto;
	}

	.home-events .wrap--jd-btn {
		margin-bottom: 40px;
	}

	.home-events .wrap--event-image img,
	.home-events .event-main,
	.home-events .event-content {
		width: calc( 100% + 10px );
		transform: none;
	}

	.home-events .event-content	{
		max-width: 276px;
	}

	.home-events .wrap--event-copy {
		text-align: right;
		padding-left: calc( 100% - 276px );
	}		

}

/* Home - Systems
------------------------------------------------------------------------------------------------ */

.container--home-systems {
	padding: 10px 0 clamp(3.125rem, -1.79rem + 18.725vw, 15.063rem);
}

.home-systems img {
	max-width: 100%;
}

.home-systems .section-title,
.home-systems .menu-group-item > a {
	padding: 3px 0 0;
}

.home-systems .section-title h2 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);

	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;	

	padding-bottom: 0!important;	
}

.home-systems .menu-group-item a {
	font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);

	font-style: normal;
	font-weight: 400;
	line-height: 120%;

	display: block;
}

.home-systems .menu-group-item {
	-webkit-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}

.home-systems .systems-has-active .menu-group-item:not(.system--active) {
	opacity: .4;
}

.home-systems .system--active {
	cursor: pointer;	
}

.home-systems .menu-group-item .flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: space-between;

	gap: 10px;
}

.home-systems .menu-group-item .flex-item {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: normal;
	align-items: normal;
	align-content: normal;
}

.home-systems .menu-group-item a,
.home-systems .menu-group-item .item__image {
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 100%;
	align-self: auto;
	order: 0;		
}

.home-systems .menu-group-item a 				{ order: 2; }
.home-systems .menu-group-item .item__image 	{ order: 1; }

@media ( max-width: 800px ) {

	.home-systems img {
		transform: none;
		width: calc(100% + 10px);
		max-width: unset;
	}

}

@media ( max-width: 320px ) {

	.home-systems .wrap--section-title {
		margin-bottom: 50px;
	}

    .home-systems .menu-group-item {
        transform: none;
        width: calc(100% + 10px);
	}	

}

/* Home - Products
------------------------------------------------------------------------------------------------ */

.container--home-products {
	padding: 10px 0 calc( clamp(6.25rem, -6.36rem + 48.039vw, 36.875rem) - 20px );
	background: var(--color--white);
}

.home-products .section-title {
	padding: 3px 0 0;
}

.home-products .section-title h2 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);

	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;	

	padding-bottom: 0!important;	
}

.home-products .menu-group-item,
.home-products .menu-group-item > a {
	display: block;
}

.home-products .menu-group-item > a {
	font-size: clamp(1.5rem, 0.882rem + 2.353vw, 3rem);

	font-style: normal;
	font-weight: 400;
	line-height: 100%;
}

.home-products .menu-group-item,
.home-products .menu-group-item a {
	-webkit-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

.home-products .products-has-active .menu-group-item:not(.product--active) a {
	color: var(--color--beige);
}

.home-products .item__image {
	position: absolute;
	top: 0;
	right: 10px; /* global padding!! */	
	display: none;
}

.home-products .menu-group-item:first-child .item__image {
	display: block;
}

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

	.home-products .menu-group-item > a {
		line-height: 120%;
	}

}

@media (max-width: 480px) {

	.container--home-products {
		padding-bottom: calc( 217px + ( 100% - 20px ) );
		position: relative;
	}

	.home-products { position: unset; }

	.home-products ul {
		padding-right: 0;
	}

	.home-products .item__image {
		top: auto;
		bottom: 0;
		right: 0;
		height: auto;
	}	

}

@media ( max-width: 320px ) {

	.home-products .wrap--section-title {
		margin-bottom: 50px;
	}

}

/* Home - News
------------------------------------------------------------------------------------------------ */

.container--home-news {
	padding: 10px 0 clamp(3.125rem, -9.871rem + 49.51vw, 34.688rem);
}

.home-news img { max-width: 100%; }

.home-news .jd-grid {
	display: grid;
    grid-template-columns: 
    	1fr 
    	1fr;	
    grid-template-rows: auto 1fr;
	gap: 10px;

	padding-right: 25px;
}

.home-news .wrap--feat-image 	{ grid-column: 1; grid-row: 1 / span 2; }
.home-news .wrap--post-title 	{ grid-column: 2; grid-row: 1; align-self: start; }
.home-news .wrap--post-excerpt 	{ grid-column: 2; grid-row: 2; align-self: end; }

.home-news .section-title,
.home-news .wrap--post-title h3 {
	padding: 3px 0 0;
}
.home-news .wrap--post-excerpt {
	padding: 0 0 10px;
}

.home-news .section-title h2 {
	font-size: clamp(1rem, 0.588rem + 1.569vw, 2rem);

	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 38.4px */
	text-transform: uppercase;	

	padding-bottom: 0!important;	
}

.home-news .wrap--post-title h3 {
	font-size: clamp(1rem, 0.794rem + 0.784vw, 1.5rem);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 28.8px */
}

.home-news .wrap--post-excerpt {
	font-size: 16px;
	font-family: var(--font--source-serif);
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */			
}

.home-news .swiper-slide {
	-webkit-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}

.home-news .news-has-active .swiper-slide:not(.news--active) {
	opacity: .4;
}

.news-slider {
	padding-bottom: 44px;
}

.news-slider > .swiper-scrollbar, 
.news-slider > .swiper-scrollbar.swiper-scrollbar-horizontal {
	width: calc(100% + 10px);
    height: 4px;
    background: var(--color--sand);	
	bottom: 0;
	left: 0;
	width: 100%;

	cursor: grab;
}

.swiper-scrollbar-drag {
    text-indent: -9999em;	
	background: var(--color--olive);
}

@media ( max-width: 1200px ) and ( min-width: 992px ), ( max-width: 768px ) {

	.home-news .wrap--section-title {
		margin-bottom: 50px;
	}

}

@media ( max-width: 992px ) {



}

@media ( max-width: 640px ) {

	.home-news .wrap--section-title {
		margin-bottom: 10px;
	}

	.home-news .swiper-slide {
		width: 100%;
	}

	.home-news .swiper-slide:not(:last-child) {
		margin-bottom: 50px;
	}

	.home-news .swiper-slide:not(:nth-child(1), :nth-child(2)),
	.wrap--jd-news-pagi {
		display: none;
	}

	.home-news .news-slider {
		padding-bottom: 0;
	}	

	.home-news .swiper-wrapper {
	    height: auto !important;
	    display: block!important;
	}	

	.home-news .swiper-slide {
	    height: auto !important;
	}	

	.home-news .jd-grid {
	    grid-template-columns: 1fr;	
	    grid-template-rows: auto;
		gap: 10px;
	}

	.home-news .wrap--feat-image 	{ grid-column: 1; grid-row: 1; }
	.home-news .wrap--post-title 	{ grid-column: 1; grid-row: 2; align-self: auto; }
	.home-news .wrap--post-excerpt 	{ grid-column: 1; grid-row: 3; align-self: auto; }	

	.home-news .wrap--post-title {
		padding-bottom: 20px;
	}



}

@media ( max-width: 640px ) {

	.home-news .mobile-only--640 {
		display: inline-flex;
	}

	.home-news .jd-grid {
		padding-right: 0;
	}

	.home-news .jd-grid .wrap--feat-image {
		width: calc( 100% + 10px );
		max-width: unset;
	}	

	.home-news .jd-grid .wrap--feat-image img {
		max-width: unset;
	}	

	.home-news .swiper {
		overflow: visible;
	}

}

@media ( max-width: 320px ) {

	.home-news .wrap--section-title {
		margin-bottom: 50px;
	}

}