/************************************************************************************************************
***** ELEMENTS ***********************************************************************************************
**************************************************************************************************************/
/**********************/
/* Floating Container */
/**********************/
/* General */
.floating-backdrop,
.floating-container{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;} /* Remove after gsap transition: var(--trans);*/

.floating-backdrop{z-index: 2040;background-color: hsl(var(--color-light-peach));opacity: 1;}
.floating-backdrop.close{opacity: 0;pointer-events: none;}

.floating-container{z-index: 2050;width: 100%;background-color: hsl(var(--color-background));clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);transform: translateX(101%);}
/*.floating-container.close{clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); transform: translateX(101%);}
.floating-container,
.floating-container.open{clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); transform: translateX(0%);}*/

/* Specific */
.floating-header{height: var(--height-header);padding-block: 20px 30px;padding-inline: var(--padding-pageX);}
.floating-body{--floating-body: calc(100vh - var(--height-header));--menu-main: calc(var(--floating-body) - var(--menu-bottom));--menu-bottom: 225px;position: relative;height: var(--floating-body);}
.floating-body .menu-main{
	padding: 40px var(--padding-pageX);
	height: var(--menu-main);
	overflow: hidden;
	overflow-y: auto;
}
.floating-body .menu-main .menu-main-nav-item{width: 100%;}
.floating-body .menu-main .menu-main-nav-item a{width: auto;display: inline-block;}
.floating-body .menu-bottom{position: absolute;left: 0;bottom: 0;width: 100%;height: var(--menu-bottom);padding-bottom: 30px;z-index: 1;}
.floating-body .menu-bottom .row-border{width: 100%;height: 86px;position: relative;border: 1px solid;border-left: 0;border-right: 0;padding-inline: var(--padding-pageX);}
/*.floating-body .menu-bottom .row-border > *:not(:first-child){margin-left: 70px;}*/

.floating-body .menu-bottom .row-border a{transition: var(--trans);}
.floating-body .menu-bottom .row-border a:hover{color: hsl(var(--color-secondary));}

.floating-body .menu-row-item__icon{display: flex;}
.floating-body .menu-row-item__icon img{min-width: 40px;filter: brightness(0) invert(1);}


/* GSAP Floating Init */
.floating-container .image-bg-effect{
	clip-path: inset(0% 0% 0% 100%);
	transform: scale(1.2, 1.2);
}

.floating-container ul li,
.floating-container .gsap-stagger--sec{
	opacity: 0;
	transform: translateY(20px);
}

.floating-container .menu-bottom .row-border{
	opacity: 0;
	width: 0%;
}


@media(max-width: 1024px){
	.floating-header {background-color: hsl(var(--color-background));padding-block: 20px;}
	.floating-body{--menu-bottom: 150px;}
	.floating-body .menu-bottom .row-border{height: 50px;}
	.floating-body .menu-bottom .row-border > *:not(:first-child){margin-left: 0;}
}

@media(max-width:  767px){
	.floating-header{height: var(--height-header--sticky);}

	.floating-container .floating-address{padding-inline: var(--padding-sectionX);}
}

@media(min-width: 1025px){
	/* Effect */
	.floating-body .menu-main li a{position: relative;transition: var(--trans);}
	.floating-body .menu-main li a:before{content: '';position:absolute;top: 50%;left: -1rem;transform: translateY(-50%);width: 0.4rem;height: 0.4rem;background-color: hsl(var(--color-primary));border-radius: 50%;opacity: 0;transition: var(--trans);}
	.floating-body .menu-main li a:hover{transform: translateX(calc(0px));}
	.floating-body .menu-main li a:hover:before{opacity: 1;left: -1rem;}
}


/***********/
/* Buttons */
/***********/
.btn{border-radius: 40px;border: 1px solid;line-height: 1;display: inline-flex;justify-content: center;align-items: center;font-size: var(--fs-400);font-weight: 700;color: hsl(var(--color-primary));background-color: hsl(var(--color-primary) / 0);transition: var(--trans);}
.btn{min-width: 260px;min-height: 60px;padding: var(--padding-button);}
.btn:hover{background-color: hsl(var(--color-primary) / 1);border-color: hsl(var(--color-primary) / 1);}

.btn.btn--arrow{min-width: 160px;min-height: 60px;padding: var(--padding-button-xs);}
.btn.btn--arrow .btn--arrow-icon{display: flex;margin-left: 3rem;transform: translateX(-2px);transition: var(--trans);}
.btn.btn--arrow:hover .btn--arrow-icon{transform: translateX(2px);}
.btn.btn--arrow .btn--arrow-icon .btn-arrow-path{fill: none;stroke: hsl(var(--color-primary));transition: var(--trans);}

.btn.btn--arrow.btn--arrow-reverse{display: inline-flex;}
.btn.btn--arrow.btn--arrow-reverse .btn--arrow-label{order: 2;}
.btn.btn--arrow.btn--arrow-reverse .btn--arrow-icon{order: 1;margin-left: 0;margin-right: 1rem;transform: scaleX(-1)  translateX(-2px);}
.btn.btn--arrow.btn--arrow-reverse:hover .btn--arrow-icon{transform: scaleX(-1) translateX(2px);}

/* -- Buttons Colors Variants */
.btn.btn--white{color: hsl(var(--color-white));background-color: hsl(0 0% 100% / 0);}
.btn.btn--white:hover{background-color: hsl(var(--color-greyish) / 1);border-color: hsl(var(--color-greyish) / 1);}
.btn.btn--secondary{color: hsl(var(--color-secondary));background-color: hsl(var(--color-secondary) / 0);}
.btn.btn--secondary:hover{background-color: hsl(var(--color-secondary) / 1);border-color: hsl(var(--color-secondary) / 1);}
.btn.btn--greyish{color: hsl(var(--color-greyish));background-color: hsl(var(--color-greyish) / 0);}
.btn.btn--greyish:hover{background-color: hsl(var(--color-greyish) / 1);border-color: hsl(var(--color-greyish) / 1);}
.btn.btn--light-peach{color: hsl(var(--color-light-peach));background-color: hsl(var(--color-light-peach) / 0);}
.btn.btn--light-peach:hover{background-color: hsl(var(--color-light-peach) / 1);border-color: hsl(var(--color-light-peach) / 1);}

/* -- Buttons SVG Colors Variants */
.btn.btn--arrow .btn-arrow-path{stroke: hsl(var(--color-primary));}
.btn.btn--arrow.btn--white .btn-arrow-path{stroke: hsl(var(--color-white));}
.btn.btn--arrow.btn--secondary .btn-arrow-path{stroke: hsl(var(--color-secondary));}
.btn.btn--arrow.btn--greyish .btn-arrow-path{stroke: hsl(var(--color-greyish));}
.btn.btn--arrow.btn--light-peach .btn-arrow-path{stroke: hsl(var(--color-light-peach));}

/* -- Buttons Hover Colors */
.btn:hover,
.btn.btn--white:hover,
.btn.btn--secondary:hover,
.btn.btn--greyish:hover{color: hsl(var(--color-white));}

.btn.btn--arrow:hover .btn-arrow-path,
.btn.btn--arrow.btn--white:hover .btn-arrow-path,
.btn.btn--arrow.btn--secondary:hover .btn-arrow-path,
.btn.btn--arrow.btn--greyish:hover .btn-arrow-path{stroke: hsl(var(--color-white));}

.btn.btn--light-peach:hover{color: hsl(var(--color-secondary));}
.btn.btn--arrow.btn--light-peach:hover .btn-arrow-path{stroke: hsl(var(--color-secondary));}



/***********/
/* Heading */
/***********/
.heading{}
.heading.gsap-lines{line-height: 1.3}
.heading + .subheading{margin-top: 60px;}

@media(max-width: 767px){
	.heading + .subheading{margin-top: 30px;}
}



/***********/
/* Tabs ****/
/***********/
.tabs{width: 100%;margin-top: 0px;}
.tabs__control{width: 100%;margin-bottom: 40px;overflow-x: auto;}
.tabs__control a{transition: var(--trans);white-space: nowrap;font-weight: 700;}

.tabs__control a.active,
.tabs__control a:hover{text-decoration: underline;}
.tabs__control a + a{margin-left: 30px;}

.tabs__panel{width: 100%;position: relative;}
.tabs__panel .tab__item[aria-hidden="true"]{display: none;}
.tabs__panel .tab__item[aria-hidden="false"]{display: block;}

@media(max-width: 1024px){
	.tabs__control{flex-wrap: wrap;}
	.tabs__control a{width: 100%;}
	.tabs__control a + a{margin-left: 0;}
}



/****************/
/* Accordion ****/
/****************/
.accordion{}

.accordion,
.accordion-tab,
.accordion-head,
.accordion-title,
.accordion-title__pre,
.accordion-title__label,
.accordion-content{width: 100%;float: left;position: relative;}

.accordion-tab{background-color: transparent;}
.accordion-tab + .accordion-tab{margin-top: var(--gap-400);}

.accordion-title{pointer-events: none;}
.accordion-title__label{font-family: var(--ff-sans);font-size: var(--fs-600);line-height: 1.3;font-weight: 700;color: hsl(var(--color-primary));}
.accordion-title__label em{display:inline-block;font-family: var(--ff-serif);font-size: var(--fs-700);font-weight: 400;font-style: normal;}
.accordion-content p{color: hsl(var(--color-text));}
.accordion-content a:not(.btn){text-decoration: underline;}


.accordion-head{display: flex;align-items: center;padding: var(--gap-500);}
.accordion-title{width: calc(100% - 36px);padding-right: 5%;}
.accordion-icon{width: 36px;height: 36px;position: relative;float: left;}
.accordion-icon div{width: 100%;height: 2px; position: absolute; top: 50%;opacity: 1;transition: var(--trans);background-color: hsl(var(--color-primary));}
.accordion-icon div:last-child{transform: rotate(90deg);}
.accordion-icon.minus div:last-child{transform: rotate(0deg);opacity: 0;}
.accordion-content{display: flex;align-items: center;padding-top: var(--gap-small);padding: var(--gap-500);padding-top: 0;}
.accordion-content div.btn{flex-shrink: 0;cursor: pointer;}


.accordion-head.px-0,
.accordion-content.px-0{padding-inline: 0;}


@media(max-width: 767px){
	.accordion-title__label em {display:initial;}
	.accordion-icon {width: 20px;height: 20px;}
}

/* [CASE] Accordion Product */
.accordion--product{}
.accordion--product .accordion-split{width: var(--avoid-width);}

.accordion--product .accordion-head{cursor: default;align-items: flex-start;justify-content: space-between;padding-bottom: 0;}
.accordion--product .accordion-head .accordion-title{}
.accordion--product .accordion-head .accordion-title .accordion-title__label{color: hsl(var(--color-greyish));}

.accordion--product .accordion-head .accordion-icon-wrapper{cursor: pointer;display: flex; align-items: center;justify-content: flex-end; gap: 20px;}
.accordion--product .accordion-head .accordion-icon-wrapper .accordion-icon{width: 24px;height: 24px;}
.accordion--product .accordion-head .accordion-icon-wrapper .accordion-icon div{background-color: hsl(var(--color-greyish));}

@media(min-width: 1600px){.accordion--product .accordion-head:before{content: "";position: absolute;inset: 44px 16vw 0 16vw;height: 1px;background-color: hsl(var(--color-light-peach));z-index: 0;}}



/* [CASE] Experience Content */
@media(min-width: 1600px){.column.column--experience{padding-inline: 150px;padding-block: 80px;}}
.accordion.accordion--experience .accordion-head,
.accordion.accordion--experience .accordion-content{padding-inline: 0;}
.accordion.accordion--experience .accordion-title__label,
.accordion.accordion--experience .experience__content{max-width: 600px;}

.accordion.accordion--experience .experience__content {
	max-width: 1200px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 50px;
}

.accordion.accordion--experience .experience__content .experience__meta{margin-bottom: 80px;}
.accordion.accordion--experience .experience__content ul{list-style: disc;padding-left: 40px;margin-bottom: 40px;}
.accordion.accordion--experience .experience__content li{margin-bottom: 20px;}
.accordion.accordion--experience .experience__content .hint-text p,
.accordion.accordion--experience .experience__content p small,
.accordion.accordion--experience .experience__content small{margin-bottom: 5px;font-size: 0.85em;}
.accordion.accordion--experience .experience__content a.btn{margin-top: 40px;}

@media(max-width: 767px){
	.accordion.accordion--experience .accordion-head,
	.accordion.accordion--experience .accordion-content {
    	padding: 20px 0 0 0;
	}
}


/********************/
/* Numberic Item ****/
/********************/
.numberic-item{width: 100%;margin-bottom: var(--gap-500);}
.numberic-item:last-child{margin-bottom: 0;}
.numberic-item .numberic__number{width: 70px;height: 70px;display: flex;justify-content: center;align-items: center;border-radius: 50%;font-family: var(--ff-serif);font-size: var(--fs-600);}
.numberic-item .numberic__title{width: 180px;}
.numberic-item .numberic__number,
.numberic-item .numberic__title{flex-grow: 0;flex-shrink: 0;}
.numberic-item .numberic__title,
.numberic-item .numberic__desc{padding-block: 8px;}

@media(min-width: 1025px){
	.numberic-item .numberic__button{width: 70px;flex-grow: 0;flex-shrink: 1;}
	.numberic-item .numberic__button .btn{width: 70px;min-width: 70px;height: 70px;border-radius: 50%;}
	.numberic-item .numberic__button .btn .btn--arrow-label{display: none;}
	.numberic-item .numberic__button .btn .btn--arrow-icon{margin: 0;transform: translateX(0px);}
}

@media(max-width: 1024px){
	.numberic-item{flex-wrap: wrap;margin-bottom: var(--gap-700);}
	.numberic-item .numberic__title{display: flex;align-items: center;}
	.numberic-item .numberic__button .btn .btn--arrow-icon svg{height: 24px;}
}


/* [CASE] Numberic Item Product */
.numberic-item.numberic-item--product {display: grid;grid-template-columns: 70px 1fr;gap: 20px;}
.numberic-item.numberic-item--product .numberic__title{width: auto;display: inline-block;padding-top: 0;}




/*************************************************************************************************************
***** COMPONENTS *********************************************************************************************
**************************************************************************************************************/
/*********************/
/* Mask Images *******/
/*********************/
.mask{width: 100%;max-width: 1260px;margin: 0 auto;position: relative;overflow: hidden;z-index: 1;}
.mask--lg{max-width: 1060px}
.mask--md{max-width: 860px}

.mask .mask__inner{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding-inline: var(--padding-sectionX);display: flex;justify-content: center;align-items: center;align-content: center;flex-wrap: wrap;z-index: 1;}
.mask .mask__image,
.mask .mask__image img{position: absolute;width: 100%;height: 100%;top: 0;left: 0;object-fit: cover;z-index: -1;}
.mask .mask__image:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);}
.mask .mask__svg,
.mask .mask__svg svg{position: relative;width: 100%;height: 100%;display: flex;}


/* [CASE] Mask With Background Image */
.mask .mask__bg {
	padding: 200px 150px 150px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('../images/elia--horizotal-light.svg');
}
@media(max-width: 500px){.mask .mask__bg {background-size: 140% 100%;}}
@media(max-width: 767px){
	.mask.mask--overflow-xs{}
	.mask .mask__bg {padding-block: 100px;padding-inline: 20px;background-size: contain;}

	/* Experience Page */
	#hero-experience{padding: 0;}
	#hero-experience .container{width: 100%;}
	#hero-experience .mask .mask__bg{margin:var(--padding-pageX);}
	#hero-experience .mask__bg .heading {max-width: 450px;margin: 0 auto;padding: 0 var(--padding-pageX);}
}


.bg-primary .mask svg path,
.mask-invert--primary svg path{fill: hsl(var(--color-primary));}

.bg-secondary .mask svg path,
.mask-invert--secondary svg path{fill: hsl(var(--color-secondary));}

.bg-greyish .mask svg path,
.mask-invert--greyish svg path{fill: hsl(var(--color-greyish));}

.bg-light-peach .mask svg path,
.mask-invert--light-peach svg path{fill: hsl(var(--color-light-peach));}

.bg-white .mask svg path,
.mask-invert--white svg path{fill: hsl(var(--color-white));}


.mask-olive{position: relative;}
.mask-olive--vertical{position: absolute;top: 0;left: 50%;width: 100%;height: 100%;transform: translateX(-50%);z-index: 0;}
.mask-olive .mxw-xs{max-width: 500px;}

.mask-olive-content{position: relative;padding: 200px 60px;z-index: 1;}
.mask-olive-content .subheading{margin: 40px 0;}

.mask-olive-image{--move:150px;position: relative; z-index: 1;}
.mask-olive-image .mask-olive-content{padding: 0;}

@media(min-width:1025px){
	.mask-olive-image{margin-top: calc(var(--move) / 2)}
	.mask-olive-image img{margin-top: calc(var(--move) * -1)}
	.mask-olive-image img.image--portrait-xl{max-height: 700px;}
}
@media(max-width:1024px){
	.mask-olive--vertical{top: 30px;}
	.mask-olive-image img.image--portrait-xl{max-height: 400px;}
}


/*********************/
/* Blog Archive Item */
/*********************/
.archive-item{ width:100% ; position: relative;} /* opacity: 0;transform: translateY(50px); */
.archive-item .archive__post__thumbnail{width: 100%;position: relative;overflow: hidden;}
.archive-item .archive__post__thumbnail .archive__thumbnail__overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: hsl(var(--color-white) / 0.6);z-index: 1;opacity: 0;pointer-events: none;transition: var(--trans);}
.archive-item .archive__post__thumbnail img{transform-origin: center;width: 100%;max-height: 600px;object-fit: cover;transform: scale(1.0);transition: all 800ms ease-in-out;}
.archive-item:nth-child(odd) .archive__post__thumbnail img{aspect-ratio: 1}
.archive-item:nth-child(even) .archive__post__thumbnail img{aspect-ratio: 0.56}
.archive-item .archive__post__thumbnail::before,
.archive-item .archive__post__thumbnail::after{content: "";position: absolute;width: 70px;height: 70px;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;pointer-events: none;transition: var(--trans);}
.archive-item .archive__post__thumbnail::before{border-radius: 50%;background-color: hsl(var(--color-white) / 1);transform: translate(-50%, -50%) scale(0.5);z-index: 1;}
.archive-item .archive__post__thumbnail::after{background-image: url('../images/icon-plus.svg');background-size: 24px;background-position: center;background-repeat: no-repeat;z-index: 2;}
.archive-item .archive__main,
.archive-item .archive__main__top,
.archive-item .archive__main__bottom{width: 100%;}
.archive-item .archive__post__title{color: hsl(var(--color-secondary));transition: var(--trans);}
.archive-item:hover .archive__post__thumbnail .archive__thumbnail__overlay{opacity: 1;}
.archive-item:hover .archive__post__thumbnail img{transform: scale(1.05);object-fit: cover;}
.archive-item:hover .archive__post__thumbnail::before{opacity: 1;transform: translate(-50%, -50%) scale(1);}
.archive-item:hover .archive__post__thumbnail::after{opacity: 1;}
.archive-item:hover .archive__post__title{color: hsl(var(--color-primary));}

.blog-archives-group{display: grid;gap: var(--gap-400, 1rem);grid-template-columns: repeat(4,1fr);align-items: center;}
.blog-archives-group:nth-child(odd)  .archive-item:nth-child(odd)  .archive__post__thumbnail img,
.blog-archives-group:nth-child(even) .archive-item:nth-child(even) .archive__post__thumbnail img{aspect-ratio: 1}
.blog-archives-group:nth-child(odd)  .archive-item:nth-child(even) .archive__post__thumbnail img,
.blog-archives-group:nth-child(even) .archive-item:nth-child(odd)  .archive__post__thumbnail img{aspect-ratio: 0.56}
@media(max-width: 1024px){
	.blog-archives-group{grid-template-columns: repeat(2,1fr);}
	/* .archive-item{ width:50% ; position: relative;} */
}
@media(max-width:  767px){
	.blog-archives-group{grid-template-columns: repeat(1,1fr);}
	/* .archive-item{ width:100% ; position: relative;} */
}


/*********************/
/* Secrets List ******/
/*********************/
#secrets-list{
	width: 100%;
	position: relative;
	/*margin-top:150px;*/
	/*background-color: #e0e0e0*/
}
.secrets-item{
	width: 100%;
	height: 100vh; /* calc(100vh - var(--height-header) / 2 ) *//* - var(--height-header--sticky) */
	position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
/*.secrets-item:first-child{margin-top: 0px;}*/
.secrets-item:last-child{margin-bottom: calc(var(--gap-500, 48px) * 2);}
.secrets-item .secrets__icon{margin-bottom: var(--gap-500, 48px);}

@media(max-width: 1024px){
	.secrets-item{margin-top: 0px;}
}

@media(max-width: 767px){
	.secrets-item{
		height: auto;
		min-height: 500px;
		/*min-height: 100vh;*/
		padding-block:var(--padding-sectionY);
	}
	.secrets-item:first-child{
    	padding-top: 0;
	}
	.secrets-item:last-child{
    	margin-bottom: 0;
    	padding-bottom: 0;
	}
}

/*************************/
/* Full Width Image ******/
/*************************/
.full-width-image{width: 100%;position: relative;}
.full-width-image img{width: 100%;max-height: 520px;object-fit: cover;}


/*********************/
/* Timeline **********/
/*********************/
#timeline{width: 100%;position: relative;}
#timeline .full-width-image img{max-height: max(400px, 40vh);}
.timeline__header{width: 100%;position:relative;padding-top: 50px;padding-bottom: 20px;}
.timeline__header:before{content: "";position: absolute;bottom:0;left: 50%;width: 1px;height: 10px;background-color: hsl(var(--color-greyish));}
.timeline__header:after{content: '';position: absolute;bottom:0;left: 0%;width: 100%;height: 1px;background-image: linear-gradient(90deg, transparent, hsl(var(--color-greyish)), transparent);}

.timeline__main{width: 100%;position: relative;padding-top: 120px;padding-bottom: 100px;}
.timeline__item{width: 555px;max-width: 100vw;}

@media(max-width: 1024px){
	.timeline__item{padding-inline: var(--padding-pageX);}
}


/*************************/
/* Share Bar *************/
/*************************/
.share-bar{width: 100%;margin-left: auto;margin-right: auto;border:1px solid hsl(var(--color-light-peach));border-left: 0;border-right: 0;}
.share-link{transition: var(--trans);}
.share-link:hover{color: hsl(var(--color-secondary));}
.share-label,
.share-link{line-height: 1;}


/*********************************************/
/* Hero Section - Scroll To Next *************/
/*********************************************/
section.has-scroll-to{position: relative;}
.hero-scroll{position: absolute;z-index: 10;}
.hero-scroll .hero-scroll--label{width: 100%;margin-bottom: 5px;display: flex;align-items: center;}
.hero-scroll .hero-scroll--icon{width: 100%;transition: var(--trans);display: flex;align-items: center;}
.hero-scroll.hero-scroll--right{bottom: 50%;right: var(--padding-pageX);transform: translateY(-50%);mix-blend-mode: difference;}
.hero-scroll.hero-scroll--right .hero-scroll--icon{justify-content: flex-start;}
.hero-scroll.hero-scroll--bottom{bottom: 5%;right: 50%;transform: translateX(50%);}
.hero-scroll.hero-scroll--bottom .hero-scroll--icon{justify-content: center;}

.hero-scroll:hover .hero-scroll--icon{transform: translateY(5px);}

@media(max-width: 1600px){ /* 1024px */
	section.has-scroll-to{padding-bottom: 100px;}
	.hero-scroll{width: 100%;}
	.hero-scroll.hero-scroll--right{bottom: 5%; bottom: 0%;right: 50%;transform: translateX(50%);mix-blend-mode: normal;}
	.hero-scroll.hero-scroll--right .hero-scroll--label,
	.hero-scroll.hero-scroll--right .hero-scroll--icon{justify-content: center;}
}


/****************************/
/* People Section ***********/
/****************************/
#people{}

@media(max-width: 767px){
	#people .column{padding:0;}
	#people .order-3{order: 1;}
}


/****************************/
/* Worlds 1st Section *******/
/****************************/
#worldsfirst{}
#worldsfirst-col-1{}

@media(max-width: 767px){
	#worldsfirst-col-1{flex-wrap: wrap;gap: 40px;}
	#worldsfirst-col-1 img.image--portrait-lg{max-height: 300px;}
}


/****************************/
/* WebGL Section ************/
/****************************/
/* DEVELOPMENT */
/* DEVELOPMENT */
/* DEVELOPMENT */

/*.screen__column{background-color: rgba(0, 0, 0, 0.05);}*/
/*.screen .screen__background{background-color: rgba(0, 0, 255, 0.1);}*/
/*.screen .screen__foreground{background-color: rgba(0, 0, 0, 0.1);}*/
/*.screen .screen__background__part:first-child{background-color: rgba(255, 0, 0, 0.1);}*/
/*.screen .screen__background__part:last-child{background-color: rgba(0, 255, 0, 0.1);}*/
.webgl--dev{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	z-index: 1;
}

/* DEVELOPMENT */
/* DEVELOPMENT */
/* DEVELOPMENT */

.screen{width: 100%;position: relative;}
/*.screen__grid{width: 200%;display: grid;grid-template-columns: repeat(2, 1fr);}*/ /* LOCAL HTML */
.screen__grid{width: 100%;display: grid;grid-template-columns: repeat(1, 1fr);}
.screen__column{width: 100%;}
.screen__column.screen__column--transformX{transform: translateX(-100%);}

.screen__column__row,
.screen__background__part{margin-top: 80px;}
.screen__column__row:first-child,
.screen__background__part:first-child{margin-top: 0px;}
.screen__background__part{min-height: 90vh;}

.screen__background,
.screen__foreground{position: relative;}

.screen__background{z-index: 1;}
.screen__foreground{z-index: 2;}

#webgl-bottle{position: fixed;top: 0;}
.screen__foreground__share{position: sticky;bottom: 0;width: 100%;background-color: hsl(var(--color-background));}

#presentation,
#presentation-xs{--avoid-width: calc(100% / 2 - 20%)}

#presentation .product-avoid-bottle{max-width: var(--avoid-width);}
#presentation .awards-item{margin-bottom: 40px;}
#presentation .awards-item:last-child{margin-bottom: 0px;}
#presentation .awards-item ul{list-style: disc;padding-left: 20px;margin-top: 5px;}

@media(max-width: 1399px){
	.accordion--product .accordion-head{padding: 0;padding-bottom: 20px;}
	#presentation .product-avoid-bottle,
	.product-text-item{max-width: var(--avoid-width)}
}

@media(min-width: 768px) and (max-width: 1024){
	#presentation, #presentation-xs {
    	--avoid-width: calc(100% / 2 - 15%);
	}
}

@media(max-width: 767px){
	#presentation{--padding-left: 120px;padding-left: var(--padding-left);}
	#presentation-xs .product-bottle{width: 100%;padding-top:40px;display: flex;justify-content: center;align-items: center;}
	.webgl--dev{
    	width: 50%;
    	left: -25%;
    }

	/*#webgl-bottle {
		transform: translateX(calc(-50vw));
		z-index: 1;
	}*/

	.screen__column.screen__column--transformX{transform: translateX(calc(-100% - 40px));}
	.screen__foreground__share{display: none;}
	.screen__column__row{justify-content: center;}
	.screen__background__part + .screen__background__part,
	.screen__column__row + .screen__column__row {margin-top: 20vh;margin-bottom: 30vh;}
	/*.screen__background__part:first-child .screen__column__row:nth-child(2){margin-top: 0;}*/
	


	.accordion--product .accordion-head{flex-wrap: wrap;gap:20px;}
	.accordion--product .accordion-split{width: 100%;}
	.accordion--product .accordion-head .accordion-icon-wrapper{justify-content: flex-start;}
	.accordion--product .accordion-content{padding: 0;}
	.accordion--product .accordion-content .flex-end {justify-content: flex-start;}
	.accordion--product .accordion-content .mxw-xs{justify-content: flex-start;padding-left: 20px;margin-left: 0;}

	.numberic-item.numberic-item--product{grid-template-columns: 1fr}
	.numberic-item.numberic-item--product .numberic__title{position: relative;}
	.numberic-item.numberic-item--product .numberic__title:before{content: "";position: absolute;top: 12px;left: calc(-50vw - 15px);width: 50vw;height: 2px;background-color: hsl(var(--color-light-peach));}

	#presentation .product-avoid-bottle,
	#presentation .product-text-item{max-width: 555px;}
	#presentation .product-text-item .heading + .subheading{margin-top: 20px;}

	#presentation .product-text-item__details{flex-wrap: wrap;}
}



/****************************/
/* Single Post Recipes ******/
/****************************/
.recipe{}
.recipe__header .post-featured-image{max-width: 100%;/*aspect-ratio:1;object-fit: cover;*/}
.recipe__header .recipe__meta{width: 100%;display: flex;justify-content: center;margin-top: 100px;}
.recipe__header .recipe__meta__item{width: 100%;}
.recipe__header .recipe__meta__item__value,
.recipe__header .recipe__meta__item__badge{width:100px;height: 100px;position: relative;background-color: hsl(var(--color-greyish));color: hsl(var(--color-white));border-radius: 50%;}
.recipe__header .recipe__meta__item__value.recipe__meta--difficulty{}
.recipe__header .recipe__meta__item__value.recipe__meta--difficulty:after{content: '/5';position: absolute;top: 0px;padding: 30px 15px;right: 0px;font-size: 60%;margin-left: 5px;margin-bottom: 10px;}
.recipe__header .recipe__meta__item__label{width: 100%;text-align: center;}
.recipe__header .recipe__meta__item__badge img{max-width: 100%;}

.recipe__body{margin-top: 100px;}
.recipe__body .ingredient-item{margin-top: 48px;}
.recipe__body .ingredient-item:first-child{margin-top: 0;}
.recipe__body .heading{margin-bottom: 48px;}
.recipe__body .ingredient__heading{margin-bottom: 20px;}
.recipe__body .ingredient__list li{margin-bottom: 10px;}

/* -- Directions */
.grid--container-directions{grid-template-columns: 100px 1fr;}

.direction-steps{counter-reset: steps-counter;}
.direction-item .direction__number::after {counter-increment:steps-counter;content: counter(steps-counter);}

.direction-item{--direction-gap: 60px;--num-size: 70px;position: relative;margin-bottom: var(--direction-gap);}
.direction-item .direction__number{width: var(--num-size);height: var(--num-size);position:relative;background-color: hsl(var(--color-greyish));color: hsl(var(--color-white));display: flex;justify-content: center;align-items: center;border-radius: 50%;}
.direction-item:before {content: '';position: absolute;bottom: calc(var(--direction-gap) * -1);left: calc(var(--num-size) / 2);width: 1px;height: 100%;background-color: hsl(var(--color-light-peach));}
.direction-item:last-child:before{display: none;}
.direction-item .direction__details {display: flex;align-items: center;flex-wrap: wrap;}

.direction__details .direction-item > *{width: 100%;}

@media(max-width: 767px){
	.recipe.pb-800{padding-bottom: 60px;}
	.recipe__header .post-featured-image {max-width: 100%;aspect-ratio: auto;}
	.recipe__header .recipe__head{margin-top: 40px;}
	.recipe__header .recipe__meta{margin-top: 50px;}

	.recipe__header .recipe__meta__item__value,
	.recipe__header .recipe__meta__item__badge{width: 60px;height: 60px;}

	.recipe__body {margin-top: 80px;}
	.recipe__body .grid-column + .grid-column{margin-top: 50px;}
	.grid--container-directions{grid-template-columns: 70px 1fr;}
	.recipe__body .direction-item {--direction-gap: 40px;--num-size: 50px;}
}


/*********************/
/* Single Post  ******/
/*********************/
.post{}
.post__header{}
.post__header .post__date{margin-bottom: 48px;}
.post__header .post__share{margin-block:80px;}
.post__header .post__share .post__share-icon{width: 40px;height: 40px;background-color: hsl(var(--color-greyish));border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;transition: var(--trans);}
.post__header .post__share .post__share-icon:hover{background-color: hsl(var(--color-secondary));}
.post__header .post__share .post__share-icon + .post__share-icon{margin-left: 30px;}
.post__header .post__featured_image{margin-bottom: 60px;height: 680px;}
.post__header .post__featured_image img{width: 100%;max-height: 680px;object-fit: cover;}

.post__body.flow > *:not(:first-child){margin-top: 80px;}

.post__image{display:flex;justify-content:center;}
.post__image img{max-height: 680px;margin-left: auto;margin-right: auto;}

.post__content.flow > h1,
.post__content.flow > h2,
.post__content.flow > h3,
.post__content.flow > h4,
.post__content.flow > h5,
.post__content.flow > h6{margin-top: 32px;}
.post__content.flow blockquote{margin-top: 80px;margin-bottom: 80px;}

.post__content h1,
.post__content h2{font-size: 24px;}
.post__content h3,
.post__content h4,
.post__content h5,
.post__content h6{font-size: 18px;}

.post__content a{text-decoration: underline;transition: var(--trans)}
.post__content a:hover{color: hsl(var(--color-secondary));}

.post__content ul{list-style: disc;padding-left: 20px;}

.post__content blockquote{text-align: center;}

.post__actions{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

@media(max-width: 767px){
	#post.pb-800{padding-bottom: 50px;}
	.post__header .post__share{margin-block:50px;}
	.post__body.flow > *:not(:first-child){margin-top: 50px;}
	.post__image img{max-height: 400px;}
	.post__content blockquote{margin-top: 50px;margin-bottom: 50px;}

	.post__header .post__featured_image{height: 350px;}
	.post__header .post__featured_image img{max-height: 350px;}
}


/*************************************************************************************************************
***** PAGES **************************************************************************************************
**************************************************************************************************************/
@media(min-width:1025px){.hero__inner--home{margin-top:-90px;}}
@media(max-width:1024px){.hero__heading--home{margin-bottom:60px;}}

@media (max-width: 767px){
    #hero-home{min-height:calc(100vh - var(--height-header));display: flex;align-items: center;}
    #hero-home .hero__inner {min-height: 0;}
}