.home .hero{
  min-height: 70dvh;
  width: 100%;
}

.hero .bg-image-container{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.hero .bg-image-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: none;
  position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}
.home .hero .constraint,
.home .hero .constraint .add-padding,
.home .hero .constraint .add-padding .container{
  height: 100%;
}

@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes slide-to-top-li-h1 {
	0% {
	transform: translateY(64px);
	}
	50%{
		opacity: 1;
	}
	100% {
	transform: translateY(0);
	opacity: 1;
	
	}
}
@keyframes slide-to-top-li-p {
	0% {
	transform: translateY(32px);
	}
	50%{
		opacity: 1;
	}
	100% {
	transform: translateY(0);
	opacity: 1;
	
	}
}

 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
  right:0;
  top: calc(var(--default-items-margin) * 2);
	text-align: center;
}
.scroll-btn > * {
	display: block;
	line-height: 1em;
	font-size: 0.75em;
	font-weight: normal;
	color: var(--color-shade-dark-300);
	letter-spacing: 0.04em;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: var(--default-item-active-bg-color);
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 26px;
	height: 40px;
	margin: 0 auto 12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid var(--default-item-active-bg-color);
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--default-item-active-bg-color);
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
}
.change-section-tree{
	background-color: var(--default-card-active-bg-color);
	position: relative;
	background: linear-gradient(45deg, rgb(255 255 255 / 75%) 0%, rgba(36, 65, 31, 0.12) 33%, rgb(244 255 242) 66%, rgb(251 255 249) 100%);
}
.change-section-tree .constraint .add-padding{
	padding: var(--default-padding-frame) var(--default-padding-frame) 0;
}

.change-section-tree .row{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex-shrink: 0;
	flex-grow: 0;
}
.change-section-tree li{

}
.change-section-tree li:first-child{
	margin: calc(var(--default-items-margin) * 8) 0 0 auto;
}
.change-section-tree li:last-child{
	margin: calc(var(--default-items-margin) * 12) 0 calc(var(--default-items-margin) * 24) auto;
}
.change-section-tree .tittle{
	max-width: 500px;
	margin: calc(var(--default-items-margin) * 12) 0 0 auto;
}
.change-section-tree .tittle h1{
	opacity: 0;
	max-width: 600px;
	margin-block-end: 0.33em;
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
	will-change: transform, opacity;
	transform: translateY(64px);
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-play-state: paused;
	animation-name:slide-to-top-li-h1;
	animation-duration: 550ms;

}
.change-section-tree .tittle p{
	opacity: 0;
	max-width: 600px;
	-webkit-transition: all 350ms ease-in-out;
	-moz-transition: all 350ms ease-in-out;
	-ms-transition: all 350ms ease-in-out;
	-o-transition: all 350ms ease-in-out;
	transition: all 350ms ease-in-out;
	will-change: transform, opacity;
	transform: translateY(32px);
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-play-state: paused;
	animation-name:slide-to-top-li-p;
	animation-duration: 550ms;
	animation-delay: 300ms;
}

.change-section-tree li.visible-on-viewport .tittle p,
.change-section-tree li.visible-on-viewport .tittle h1
{
	animation-play-state:running;
}

.change-section-tree .background-video-container{
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
}
#growing-tree-sample-video{
	height: 100dvh;
	grid-column: span 3;
	position: sticky;
	bottom: 0;
	margin-left: -30%;
	z-index: 1;
}
.sticky-tree-video-container{
	height: 100dvh;
	mix-blend-mode: multiply;
	position: sticky;
	top: 0;
	width: 50%;
	overflow: visible;
}
.content-column{
	margin: calc(var(--default-items-margin) * 8) 0 0 0;
	width: 50%;
	list-style: none;
	padding: 0;
	margin: 0;
	z-index: 2;
}
.change-section-galery{
	background-color: #73bf45;
	background: linear-gradient(45deg, rgba(36, 65, 31, 1) 0%, rgb(115 191 69 / 100%) 100%);
	background: linear-gradient(145deg, rgba(36, 65, 31, 0.32) 0%, rgba(36, 65, 31, 0.12) 33%, rgba(36, 65, 31, 0.12) 66%, rgb(115 191 69 / 32%) 100%);
}
.change-section-video{
	background-image: url("../media/images/dev/video-poster-frame-blured.jpg");
	background-size: cover;
	position: relative;
}
.change-section-video::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	background: linear-gradient(123deg, rgba(245, 245, 245, 0.95) 0%, rgba(250, 250, 250, 0.75) 35%, rgba(250, 250, 250, 0.75) 70%, rgba(255, 255, 255, 0.95) 100%);
}
.change-section-video .tittle{
	text-align: center;
	z-index: 3;
}
.change-section-video .tittle p{
	max-width: 600px;
	margin: 1em auto;
}
.change-section-video .video-container{
	position: relative;
	border-radius: 24px;
	overflow: visible;
	grid-column: span 6;
	z-index: 3;
	margin: calc(var(--default-items-margin) * 2) calc(var(--default-items-margin) * 8) calc(var(--default-items-margin) * 4);
	border-width: var(--default-item-border-width);
	border-style: solid;
	border-color: var(--default-item-border-color);
	aspect-ratio: 16 / 9;

}
.change-section-video .video-container video{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	z-index: 1;
	border-radius: 24px;
}

.change-section-video .video-container .change-video-poster{
	width: calc(100dvw - 10px);
	height: calc(100% + calc(((var(--default-items-padding)* 6) + 8.3em)));
	left: calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1440px) / 2)) * -1);
	top: calc(((var(--default-items-padding)* 6) + 8.3em) * -1);
	z-index: 2;
	position: absolute;
	animation-duration: 150ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
	animation-play-state: running;
	border-radius: 0;
	filter: brightness(0.5) grayscale(1);
	-webkit-transition: all 1050ms ease-in-out;
	-moz-transition: all 1050ms ease-in-out;
	-ms-transition: all 1050ms ease-in-out;
	-o-transition: all 1050ms ease-in-out;
	transition: all 1050ms ease-in-out;

}
.change-section-video .video-container .change-video-poster.visible-on-viewport{
	filter: brightness(1) grayscale(0);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 24px;
	
}
.change-section-video .video-container .change-video-poster img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	-webkit-transition: all 1050ms ease-in-out;
	-moz-transition: all 1050ms ease-in-out;
	-ms-transition: all 1050ms ease-in-out;
	-o-transition: all 1050ms ease-in-out;
	transition: all 1050ms ease-in-out;

}
.change-section-video .video-container .change-video-poster.visible-on-viewport img{
	border-radius: 24px;
}
.change-section-video .video-container .change-video-poster::after{
	content: "";
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 24px;
	background: linear-gradient(45deg, rgba(36, 65, 31, 0.66) 0%, rgba(36, 65, 31, 0.0) 33%, rgb(147 167 144 / 0%) 66%, rgb(255 255 255 / 52%) 100%);
}
.video-is-playing.video-container .change-video-poster{
	animation-name: fade-out-animation;
}
.change-section-video .video-container .poster img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.change-section-video .video-container .controlls-cont{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 3;
	width: fit-content;
	height: fit-content;
	display: flex;
}
.change-section-video .video-container .controlls-cont button{
	animation-duration: 250ms;
  animation-timing-function: ease-in-out;
  animation-delay: 150ms;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
	animation-name: fade-out-animation;
	animation-play-state: paused;
	border-radius: 50%;
	box-sizing: border-box;
	padding: calc(var(--default-items-padding) / 2);
	border-width: var(--default-item-border-width);
	border-style: solid;
	border-color: var(--default-item-active-bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.change-section-video .video-container .controlls-cont button svg{
	fill: var(--default-item-active-bg-color-stronger);
	width: 48px;
	height: 48px;
}
.change-section-video .video-container.video-is-playing .controlls-cont button{
	animation-play-state: running;
}
.change-section-video .video-container.video-is-playing.video-is-paused .controlls-cont button{
	animation-fill-mode:backwards;
}
.donation-section{
	background-color: var(--default-card-active-bg-color);
	position: relative;
	background: linear-gradient(45deg, rgba(36, 65, 31, 0.32) 0%, rgba(36, 65, 31, 0.12) 33%, rgba(36, 65, 31, 0.12) 66%, rgb(115 191 69 / 32%) 100%);
}
.donation-section .tittle{
	text-align: center;
}
.donation-section .tittle h1{
	margin-block-end: 0.33em;
	max-width: 600px;
	margin: 0.67em auto 0.33em;
}
.donation-section .tittle p{
	max-width: 600px;
	margin: 1em auto;
}
.donation-section .tittle h4{
	max-width: 600px;
	margin: 1em auto;
}
.donation-section .tittle .link-button{
	margin: 0 auto var(--default-items-margin);
}
.home-donation-ul{
	list-style: none;
	padding: 0;
	margin: calc(var(--default-items-margin) * 2) 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: calc(var(--default-items-margin) * 2);
}
.home-donation-ul li{
	border-radius: 16px;
	overflow: hidden;
	border-width: var(--default-item-border-width);
	border-style: solid;
	border-color: rgb(36 65 31 / 2%);
	will-change: transform, opacity;
	transform: translateY(32px);
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-play-state: paused;
	animation-name: slide-to-top-li-p;
	animation-duration: 550ms;
	animation-delay: 300ms;
	opacity: 0;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}
.home-donation-ul li:hover{
	border-color: var(--default-item-border-color);
}
.home-donation-ul li:nth-child(1){
	animation-delay: 0ms;
}
.home-donation-ul li:nth-child(2){
	animation-delay: 150ms;
}
.home-donation-ul li:nth-child(3){
	animation-delay: 300ms;
}
.home-donation-ul.visible-on-viewport li{
	animation-play-state: running;
}
.home-donation-ul li a{
	display: block;
	background-color: #fff;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
} 

.home-donation-ul li a::after{
	content: "";
	display: block;
	padding-bottom: 85%;
}
.home-donation-ul li:hover a .content h4{
	color: var(--color-shade-dark-800);
}

.home-donation-ul li a .cont{
	position: absolute;
	width: 100%;
	height: 100%;

}
.home-donation-ul li a .image-container{
	height: 65%;
	width: 100%;
}
.home-donation-ul li a .image-container img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-donation-ul li a .content{
	padding: var(--default-items-padding);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background: linear-gradient(123deg, rgba(245, 245, 245, 0.65) 0%, rgba(250, 250, 250, 0.75) 35%, rgba(250, 250, 250, 0.65) 70%, rgba(255, 255, 255, 0.65) 100%);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	min-height: 148px;
}

.home-donation-ul li a .content h4{
	margin-block-start: 0.66em;
	margin-block-end: 0;
	font-size: 1.15em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: var(--color-shade-dark-800);
	
}
.home-donation-ul li a .content p{
	margin-block-start: 0.33em;
	margin-block-end: 0.33em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
@media screen and (min-width: 1701px) and (max-width: 1920px){
	.change-section-video .video-container .change-video-poster{
		left:calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1580px) / 2)) * -1);
	}
}
@media screen and (min-width: 1500px) and (max-width: 1700px){
	.change-section-video .video-container .change-video-poster{
		left:calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1440px) / 2)) * -1);
	}
}
@media screen and (min-width: 1366px) and (max-width: 1499px){
	.change-section-video .video-container .change-video-poster{
		left:calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1346px) / 2)) * -1);
	}

	#growing-tree-sample-video{
		height: 95dvh;
		top: 5dvh;
		margin-left: -20%;
	}
}
@media screen and (min-width: 1260px) and (max-width: 1365px){
	.change-section-video .video-container .change-video-poster{
		left:calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1200px) / 2)) * -1);
	}
	#growing-tree-sample-video{
		height: 85dvh;
		top: 15dvh;
		margin-left: -35%;
	}
}
@media screen and (min-width: 1020px) and (max-width: 1259px){
	.change-section-video .video-container .change-video-poster{
		left:calc(((var(--default-items-margin) * 8) + var(--default-padding-frame) + ((100dvw - 1000px) / 2)) * -1);
	}
	#growing-tree-sample-video{
		height: 85dvh;
		top: 15dvh;
		margin-left: -50%;
	}
}
@media screen and (min-width:0px) and (max-width:1019px) {
	.change-section-video .video-container .change-video-poster{
		width: 100dvw;
		left: calc((var(--default-items-margin) + var(--default-items-padding))* -1);
		top: calc(((var(--default-items-padding)* 6) + 10.2em)* -1);
		border-radius: 0;
	}
	.change-section-video .video-container .change-video-poster.visible-on-viewport{
		border-radius: 24px;
	}
	.change-section-video .video-container{
		margin: 0;
	}
	.home-donation-ul{
		grid-template-columns: 1fr;
	}
	.home-donation-ul li a .image-container{
		height: 54%;
	}
	.sticky-tree-video-container{
		display: none;
	}
	.content-column{
		width: 100%;
	}
	.home-donation-ul li{
		margin: var(--default-items-margin) 0;
	}
	.change-section-tree li:last-child{
		margin: 0 0 calc(var(--default-items-margin) * 4) 0
	}
	.home .hero{
		min-height: 60dvh;
	}
	.constraint>.add-padding>.container>.tittle .link-button{
		margin: 0 0 var(--default-items-margin);
	}
	.change-section-tree .tittle h1{
		font-size: 2.4em;
	}
	
}