body, html {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  font-family: "new-science", sans-serif;
font-weight: 300;
font-style: normal;
	    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}
  html {
    font-size: 100%;
  }

.disNone{
	visibility: hidden;
}

body {
	max-width: 100%;
	margin: 0 auto;
	 padding: 0;
	user-select: none;
	-moz-user-select: none;
	cursor: none;
	overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
	background-color: #EDEADD;
	    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
	width: 25%;
}

.cookie-buttons {
  margin-top: 10px;
}

.cookie-buttons button {
  margin-right: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#acceptCookies {
  background-color: #28a745;
  color: white;
}

#declineCookies {
  background-color: #dc3545;
  color: white;
}


    .slider-containerSpons {
      width: 55vw;
      height: 55vh;
      position: absolute;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
		top: 65%;
		left: 50%;
		transform: translate(-50%,-50%);
    }

    .gridSpons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 20px;
      flex-grow: 1;
    }

    .slideSpons {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 60px;
      display: none;
    }

    .slideSpons.activeSpons {
      display: grid;
    }

.logoSpons {
  width: 100%;
  height: 100%;
  background: rgba(39, 102, 57, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%; 
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.logoSpons img {
  max-height: 80%;
  max-width: 80%;
  object-fit: contain;
  display: block;

    margin: 0 auto;
    transition: transform 0.3s ease;
	will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
	transform-origin: center center;
}
.logoSpons:hover img {
    transform: scale(1.15);
}
.imgPetit {
	max-width: 40%!important;
}
.imgPetit2 {
	max-width: 60%!important;
}
.imgPetit3 {
	max-width: 100%!important;
}

    .buttonsSpons {
      position: absolute;
      bottom: 0px;
      left: 50%;
		transform-origin: center;
      transform: translateX(-50%) scale(0.8);
      z-index: 2;
      text-align: center;
		
    }

#prevSpons,
#nextSpons {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 1rem;
	font-weight: 600;
  border: none;
  background: rgba(39, 102, 57, 1);
  color: white;
  border-radius: 6px;
  cursor: none;
  transition: background 0.5s ease, transform 0.3s ease; 
	transition-delay: 0s;
	will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
	transform-origin: center center;
}
#prevSpons:hover,
#nextSpons:hover  {
    transform: scale(1.1);
}

#prevSpons:disabled,
#nextSpons:disabled {
  background: rgba(39, 102, 57, 0.5);
}



.formBrevow{
	display: block;margin-left: auto;margin-right: auto;max-width: 100%;
	position: absolute;
	right: -10vw;
	transform: scale(0.75)!important;
}
.darken{
	mix-blend-mode: darken!important;
}
.darkenn{
	mix-blend-mode: darken!important;
z-index: 1!important;
}


.swiperMap{
	position: absolute!important;
	min-width: 100%!important;
	max-width: 100%!important;
	top: 0!important;
	left: 33.333%!important;
}
.innerMap{
	position: absolute!important;
	width: 30em!important;
	height: 30em!important;
	top: 50%!important;
	transform: translateY(-50%)!important;
	left: 10%!important;
}
.msgMap{
	left: 0!important;
	top:0!important;
	width: auto!important;
	padding-right: 20px!important;
}

.paraMap{
	margin-top: 80px!important;
}
.BottomC{
	position: absolute;
	left: 20%;
	top: 40%;
	width: 55vw;
	height: 45%;
}
.BottomC1{
	position: absolute;
	left: 0;
	top: 0;
}
.BottomC2{
	position: absolute;
	left: 60%;
	top: 0;
	transform: translateX(-50%);
}
.BottomC3{
	position: absolute;
	right: 0;
	top: 0;
}
.DediMedia{
	line-height: 1.1em!important;
}

.card-contentTake {
    position: absolute;
	left: 10em;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    background-color: rgba(255, 255, 255, 0);
}
.underlineTake {
  position: absolute;
  left: -5px;
  height: 100px;
  width: 0;
	transform: skewX(-5deg);
	z-index: -1;
}
.underlineTxtTake1{
	background-color:#1d7031;
	bottom: -29px;
}
.underlineTxtTake2{
	background-color:#de4d16;
	bottom: 70px;
}


.card-contentTake h2 {
    font-size: 5.5em;
    color: white;
    display: inline-block;
    padding: 4px 8px;
	line-height: 0.55em;
}

.card-contentTake h2 span {
    display: block;
}
/*
.card-contentTake h3 {
    font-size: 1.5em;
    color: black;
    display: inline-block;
	line-height: 1.1em;
	font-weight: 200;
	text-transform: uppercase;
}
*/
.card-contentTake h3 {
    font-size: 1em;
    color: black;
    display: inline-block;
	line-height: 1.1em;
	font-weight: 200;
	text-transform: uppercase;
}
.verysoon {
    font-size: 1em;
    color: black;
    display: inline-block;
	line-height: 1.1em;
	font-weight: 200;
	text-transform: uppercase;
}
.card-contentContact {
    position: absolute;
	top: 13vh;
    z-index: 2;
    height: 15em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    background-color: rgba(255, 255, 255, 0);
	margin-left: -70px;
}
.underlineContact {
  position: absolute;
  left: -5px;
  height: 100px;
  width: 0;
	transform: skewX(-5deg);
	z-index: -1;
}
.underlineTxtContact1{
	background-color:#1d7031;
	bottom: -29px;
}
.underlineTxtContact2{
	background-color:#de4d16;
	bottom: 70px;
}
.JD{
	margin-top: 7vh;
}

.card-contentContact h2 {
    font-size: 5.5em;
    color: white;
    display: inline-block;
    padding: 4px 8px;
	line-height: 0.55em;
}

.card-contentContact h2 span {
    display: block;
}
.card-contentContact h3 {
    font-size: 1.5em;
    color: black;
    display: inline-block;
	line-height: 1.1em;
	font-weight: 200;
	text-transform: uppercase;
}






.NoneZ {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.NoneZ.hidden {
  opacity: 0;
}
.planet{
	position: absolute;
	right: 0vw;
}


.info-block {
  position: absolute;
  top: 25%;
  left: 20%;
  text-align: left;
  width: 950px;
	font-family: "new-science", sans-serif;
font-weight: 300;
}

.LMTitle {
  position: relative;
  background: transparent;
  color: white;
  display: inline-block;
  padding: 0.2em 0.6em;
  font-weight: bold;
  font-size: 1em;
}

.subtext {
  position: relative;
  font-size: 1em;
  font-weight: bold;
  margin: 0.4em 0;
}

.nature {
  position: relative;
  background: transparent;
  color: white;
  display: inline-block;
  padding: 0.1em 0.4em;
}





.underlineZ {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 25px;
  width: 0;
	transform: skewX(-5deg);
	z-index: -1;
}
.underlineTxt1{
	background-color:#1d7031;
}
.underlineTxt2{
	background-color:#de4d16;
}

.text-block {
  overflow: hidden;
	margin-top: 2.5em;
}

.lineZ {
  overflow: hidden;
  transform: translateY(100%);
  opacity: 0;
  font-size: 3em;
  line-height: 1.4;
  color: #000;
}


.fadeLearnEntry {
  opacity: 1; 
  transform: translateY(0);
}
.fadeAboutEntry {
  opacity: 0;
  transform: translateY(20px);
}





.timeline-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.slides {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-right: 200px;
}

.slide {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 500px;
  text-align: right;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1.8) translateX(-80px);
}

.slide h2, .slide h1, .slide p {
  opacity: 1;
  transform: translateY(0);
}

.slide h2 {
  font-size: 24px;
  color: #1d7031;
  font-style: italic;
}

.slide h1 {
  background: #1d7031;
  color: white;
  display: inline-block;
  padding: 0.2em 0.5em;
  margin: 10px 0;
}

.slide p {
  font-size: 16px;
  color: #333;
}
.source{
	font-size: 10px;
}

.timeline {
  position: absolute;
	right: 20%;
	top: 43%;
	height: 100%;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
	transform: scale(0.8) translateY(-50%);
	
}

.timeline-line {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 2px;
  background: #1d7031;
}

.dates {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 100px);
  z-index: 2;
	margin-left: 80%;
}

.date {
  position: relative;
  font-size: 14px;
  color: #1d7031;
  cursor: none;
  padding: 4px 0;
}

.date::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; 
  height: 2px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}

.date:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.date.active::after {
  transform: scaleX(1);
  transform-origin: left center; 
}

.date.active {
  font-weight: bold;
}

.indicator {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #1d7031;
  border-radius: 50%;
  left: calc(50% - 5px);
  transition: top 0.3s ease;
}

.arrow {
  cursor: none;
  font-size: 40px;
  color: #1d7031;
  user-select: none;
  margin: 15px 0;
}

.fadeTransition {
  opacity: 1;
  transform: translateY(0);
}




.invert {
  filter: invert(1);
  transition: filter 0.4s ease;
}

.invert.invert-off {
  filter: invert(0);
}



.last-section {
  background: #f4f4f4;
  padding: 5rem 3rem;
  color: black;
}

.content-wrapper {
	position: absolute;
	width: 80%;
	top: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-side {
  flex: 1;
}

.big-title {
  font-size: 3.5rem;
  font-weight: 700;
  position: relative;
	line-height: 0.7em;
	color: white;
}
.white{
	color: white;
}

.question-mark {
  display: inline-block;
  animation: wiggle 1s infinite alternate;
	color: #de4d16;
	font-size: 7rem;
	margin-left: 30px;
}

@keyframes wiggle {
  0% { transform: rotate(-10deg); }
  100% { transform: rotate(10deg); }
}

.subz {
  font-size: 1.2rem;
  margin-top: 1rem;
}


.underlineText1, .underlineText2 {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-5deg);
    z-index: -1;
}
.underlineText1{
	top: -12px;
	left: -10px;
}
.underlineText2{
	background-color: #de4d16;
	top:50px;
	left: -10px;
}
.underlineText3{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 25px;
	left: 190px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}

.underlineTextDT1, .underlineTextDT2 {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-5deg);
    z-index: -1;
}
.underlineTextDT1{
	top: -12px;
	left: -10px;
}
.underlineTextDT2{
	background-color: #de4d16;
	top:50px;
	left: -10px;
}
.underlineTextDT3{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 25px;
	left: 80px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}
.underlineText1Contact, .underlineText2Contact {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-4deg);
    z-index: -1;
}
.underlineText1Contact{
	top: 0px;
	left: -10px;
}
.underlineText2Contact{
	background-color: #de4d16;
	top:64px;
	left: -10px;
}
.underlineText3Contact{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 0px;
	left: 50px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}
.underlineText4Contact{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 0px;
	left: 50px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}.underlineText5Contact{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 0px;
	left: 50px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}





.underlineText1Watch, .underlineText2Watch {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-4deg);
    z-index: -1;
}
.underlineText1Watch{
	top: -12px;
	left: -10px;
}
.underlineText2Watch{
	background-color: #de4d16;
	top:50px;
	left: -10px;
}
.underlineText3Watch{
	position: absolute;
	transition: width 0.6s ease;
	background-color: #de4d16;
	height: 25px;
	top: 0px;
	left: 130px;
	width: 0px;
	transform: skewX(-5deg);
    z-index: -1;
}
.wrapWatch{
	width: 50em!important;
	left: 10%!important;
	top: 18%!important;
}
.wrapContact{
	width: 50em!important;
	left: 20%!important;
	top: 14%!important;
}
.platform-list {
  list-style: none;
  padding: 0;
	margin-top: 40px
}

.platform-list li {
  font-weight: 600;
  font-size: 1.2em;
  margin: 10px 0;
  display: flex;
  align-items: center;
	transition: transform 0.5s ease, color 0.5s ease;
}
.stream{
	width: 5em;
}
.listC li {
  font-weight: 600;
  font-size: 1.2vw!important;
  margin: 10px 0;
  display: flex;
  align-items: center;
	transition: transform 0.5s ease, color 0.5s ease;
}
.platform-list li:hover {
  transform: translateX(5px);
  color: #de4d16;
}

.platform-list .tag {
  color: #de4d16; 
  font-weight: 600;
  margin-right: 10px;
  font-size: 1.2em;
	margin-top: -5px;
}
.platform-list a {
	color: black;
	transition: color 0.5s ease;
}
.platform-list a:hover {
  color: #de4d16;
}
.underlineTextJNL1, .underlineTextJNL2 {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-6deg);
    z-index: -1;
}
.underlineTextJNL1{
	top: -12px;
	left: -10px;
}
.underlineTextJNL2{
	background-color: #de4d16;
	top:50px;
	left: -10px;
}


.underlineText11, .underlineText22 {
    position: absolute;
    width: 0px;
    height: 65px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-6deg);
    z-index: -1;
}
.underlineText11{
	top: -12px;
	left: -10px;
}
.underlineText22{
	background-color: #de4d16;
	top:50px;
	left: -10px;
}

.right-side {
  flex: 0 0 130px;
  text-align: center;
	margin-right: 20%;
}

.take-action-btn {
  position: relative;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: none;
}

.take-action-btn span {
  display: inline-block;
  background-color: #de4d16;
  padding: 0 5px;
  color: white;
}


.draw-border {
  box-shadow: inset 0 0 0 4px #1d7031;
  color: black;
  transition: color 0.25s 0.0833s;
  position: relative;
	font-weight: 200;
}
a{
	text-decoration: none;
}

.draw-border::before,
.draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 4px;
  border-left-width: 4px;
}

.draw-border::after {
  border-top-width: 4px;
  border-right-width: 4px;
}

.draw-border:hover {
  color: #de4d16;
}

.draw-border:hover::before,
.draw-border:hover::after {
  border-color: #de4d16;
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
	transform: scale(0.5);
  background: none;
  border: none;
  cursor: none;
  line-height: 1.5;
  padding: 0.7em 0.7em;
  letter-spacing: 0.05rem;
}

.btn:focus {
  outline: 2px dotted #de4d16;
}

:root {
      --primary-color: white;
      --input-width: 500px;
      --input-height: calc(var(--input-width) / 3);
      --button-width: calc(var(--input-width) / 1.5);
      --button-height: calc(var(--input-width) / 3.5);
    }



    .mainNL, .formNL {
      position: absolute;
      transform-origin: left;
      transform: scale(0.55);
      left: -0.5em;
      top: 120%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .inputNL, .buttonNL {
      font-family: "new-science", sans-serif;
font-weight: 600;
font-style: normal;
    }

    .inputNL {
      width: var(--input-width);
      height: var(--input-height);
      background: #de4d16;
      border: none;
      border-radius: calc(var(--input-width) / 3.75);
      color: var(--primary-color);
      font-size: calc(var(--input-width) / 12);
      text-transform: uppercase;
      font-weight: 600;
      padding: 10px calc(var(--input-width) / 5);
      outline: none;
      cursor: none;
      transition: all 250ms;
      position: relative;
    }

    .inputNL[readonly] {
      cursor: not-allowed;
    }

    .inputNL:invalid {
      box-shadow: none;
    }

    .inputNL::placeholder {
      color: var(--primary-color);
      text-align: center;
      opacity: 1;
    }

    .inputNL:not(.active):not(:read-only):hover {
      opacity: 0.8;
    }

    .inputNL.active {
      cursor: initial;
      width: calc(var(--input-width) * 2.23);
      padding: 10px calc(var(--button-width) + (var(--input-height) - var(--button-height))) 10px calc(var(--input-width) / 5);
    }

    .inputNL.active::placeholder {
      text-align: left;
    }

    .inputNL.expand {
      animation: expand 1s forwards ease-out;
    }

    @keyframes expand {
      0% { width: var(--input-width); }
      10% { width: calc(var(--input-width) * 2.4); }
      35% { width: calc(var(--input-width) * 2.2); }
      50% { width: calc(var(--input-width) * 2.24); }
      100% { width: calc(var(--input-width) * 2.23); }
    }

    .inputNL.collapse {
      animation: collapse 1s forwards ease-out;
    }

    @keyframes collapse {
      0% { width: calc(var(--input-width) * 2.23); }
      10% { width: calc(var(--input-width) / 1.3); }
      35% { width: calc(var(--input-width) * 1.03); }
      50% { width: calc(var(--input-width) / 1.02); }
      100% { width: var(--input-width); }
    }

    .formNL .buttonNL {
      display: none;
    }

    .inputNL.active + .buttonNL {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 100;
    }

    .buttonNL {
      width: var(--button-width);
      height: var(--button-height);
      background: var(--primary-color);
      border-radius: calc(var(--input-width) / 3.75);
      position: relative;
      left: -350px;
      color: #de4d16;
      font-size: calc(var(--input-width) / 12);
      text-transform: uppercase;
      cursor: pointer;
      outline: none;
      z-index: 2;
    }




.footer-section {
	position: absolute;
	bottom: -3px;
	width: 100%;
	height: 23%;
  display: flex;
  justify-content: space-between;
  background-color: #1d7031;
  color: white;
  padding: 2rem;
  margin-top: 4rem;
}

.footer-column {
  flex: 1;
  margin: 0 1rem;
}
.BlocBG{
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%)
}
.BlocCT{
	position: absolute;
	left: 30%;
	top: 50%;
	transform: translateY(-50%);
	width: 25em;
}
.BlocRT{
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
	width: 45em;
	height: 8em;
}
.bald{
	font-weight: 700;
	line-height: 0;
}
.footer-btn {
  display: block;
  margin: 0.5rem 0;
  background: #de4d16;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: none;
}
.footbtn1,
.footbtn2 {
  background-color: rgba(222, 77, 22, 1);
  transition: background-color 0.4s ease, box-shadow 0.3s ease;
	text-align: center;
	
}

.footbtn1:hover,
.footbtn2:hover {
  background-color: rgba(222, 77, 22, 0.8);
	box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25);
}
.copyright-text {
  columns: 1;
  font-size: 0.8rem;
}

.footer-column.nav-footer {
	position: absolute;
	right: 0%;
	top: 0!important;
    display: flex;
    gap: 20px; 
    justify-content: center; 
    flex-wrap: wrap; 
	cursor: none;
	
}


.footer-column.nav-footer a {
	position: relative;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
	cursor: none;
	font-weight: 100;
	padding-bottom:4px;
}

.footer-column.nav-footer a:hover {
    color: #de4d16; 
	cursor: none;
}
.footer-column.nav-footer a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}

.footer-column.nav-footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/*
.nav-footer a.active::after {
  transform: scaleX(1);
  color: #1d7031;
}
*/
.footer-column h3 {
	margin-top: 0;
}

.social-footer{
	position: absolute;
	right: 0%;
	bottom: 7px;
}
.social-footer a {
  display: inline-block;
	cursor: none;
}
.Instagram{
	margin-right: 1rem;
}

.Facebook{
	margin-right: 1rem;
}

.Linkedin{
	margin-right: 0;
}

.social-footer svg {
  width: 24px;
  height: 24px;
  fill: white;
  transition: transform 0.3s ease, box-shadow 0.3s ease, fill 0.5s ease; 
}
.svgFB, .svgInst, .svgLink{
	fill: white;
}

.social-footer .svgFB:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  fill:rgba(187,195,255,1.00);
}
.social-footer .svgInst:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  fill: rgba(255,183,190,1.00); 
}
.social-footer .svgLink:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  fill: rgba(175,224,255,1.00); 
}

#imgFooter {
	position: absolute;
	background:url("img/monochrome_map_height200_max3.webp")50% 50% repeat;
    background-size: cover;
	left: 0;
	top: 0;
	height: 100%;
    width: 100%;
	opacity: 0.05;
}
#imgUnderline {
	position: fixed;
	background:url("img/monochrome_map_height200_max3.webp")50% 50% repeat;
    background-size: cover;
	left: 0;
	top: 0;
	height: 100%;
    width: 100%;
	opacity: 0.05;
}


.container2 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    display: flex;
    gap: 0px;
}

.card2 {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.card2::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 1;
}

.card-content2 {
    position: relative;
    z-index: 2;
    padding: 10em;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    background-color: rgba(255, 255, 255, 0);
}
.underlineZ2 {
  position: absolute;
  left: 0;
  height: 36px;
  width: 0;
	transform: skewX(-5deg);
	z-index: -1;
}
.underlineTxt11{
	background-color:#1d7031;
	bottom: -7px;
}
.underlineTxt22{
	background-color:#de4d16;
	bottom: 29px;
}
.underlineTxt111{
	background-color:#1d7031;
	bottom: -7px;
}
.underlineTxt222{
	background-color:#de4d16;
	bottom: 29px;
}

.card2 h2 {
    font-size: 2em;
    color: white;
    display: inline-block;
    padding: 4px 8px;
	line-height: 0.55em;
}

.card2 h2 span {
    display: block;
}

.card2 p {
    font-size: 1.4vw;
    line-height: 1.4;
	padding-right: 4em;
}
.defTitle2{
}
.NgTitle2{
}

.img-card2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
	opacity: 0;
}
#imgCard11{
	background: url("img/Screenshot_2.webp") 50% 50%;
}

#imgCard22{
    background: url("img/Screenshot_35.webp") 50% 50%;	
}

.underlineNG11, .underlineNG22,
.underlineDef11, .underlineDef22 {
    position: absolute;
    width: 0px;
    height: 35px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-5deg);
    z-index: -1;
}

.underlineNG11 { top: 1.75em; left: 2em; }
.underlineNG22 { top: 2.75em; left: 2em; }
.underlineDef11 { top: 1.75em; left: 2em; }
.underlineDef22 { top: 2.75em; left: 2em; }




.container {
    display: flex;
    gap: 40px;
	margin-top: 60px;
}

.card {
    position: relative;
    width: 35em;
    height: 40em;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 4em;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black;
    background-color: rgba(255, 255, 255, 0);
}

.card h2 {
    font-size: 2em;
    color: white;
    display: inline-block;
    padding: 4px 8px;
	line-height: 0.5em;
}

.card h2 span {
    display: block;
}

.card p {
    font-size: 1.1em;
    line-height: 1.4;
}
.defTitle{
	margin-top: -4.15em;
}
.NgTitle{
	margin-top: -8em;
}

.img-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}
#imgCard1{
	background: url("img/Screenshot_2.webp") 50% 50%;
}

#imgCard2{
    background: url("img/Screenshot_35.webp") 50% 50%;	
}

 .card button {
	 position: absolute;
	 bottom: 10%;
	 left: 8%;
	 transform: scale(0.8);
	 display: inline-block;
	 outline: none;
	 border: 0;
	 vertical-align: middle;
	 text-decoration: none;
	 background: transparent;
	 padding: 0;
	 font-size: inherit;
	 font-family: inherit;
	 z-index: 999;
	 cursor: none;
}
 .card button.learn-more {
	 width: 12rem;
	 height: auto;
}
 .card button.learn-more .circle {
	 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	 position: relative;
	 display: block;
	 margin: 0;
	 width: 3rem;
	 height: 3rem;
	 background: #1d7031;
	 border-radius: 1.625rem;
}
 .card button.learn-more .circle .icon {
	 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 margin: auto;
	 background: #fff;
}
 .card button.learn-more .circle .icon.arrow {
	 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	 left: 0.625rem;
	 width: 1.125rem;
	 height: 0.125rem;
	 background: none;
}
.card button.learn-more .circle .icon.arrow::before {
	 position: absolute;
	 content: '';
	 top: -0.25rem;
	 right: 0.0625rem;
	 width: 0.625rem;
	 height: 0.625rem;
	 border-top: 0.125rem solid #fff;
	 border-right: 0.125rem solid #fff;
	 transform: rotate(45deg);
}
 .card button.learn-more .button-text {
	 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 padding: 0.75rem 0;
	 margin: 0 0 0 1.85rem;
	 color: #1d7031;
	 font-weight: 700;
	 line-height: 1.6;
	 text-align: center;
	 text-transform: uppercase;
}
 .card button:hover .circle {
	 width: 100%;
}
 .card button:hover .circle .icon.arrow {
	 background: #fff;
	 transform: translate(1rem, 0);
}
 .card button:hover .button-text {
	 color: #fff;
}

#hero {
  position: absolute;
top: 0;
	left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.title {
	position: absolute;
  font-size: 3.4vw;
  margin: 0;
	white-space: nowrap;
	z-index: 1;
}

.subtitle {
  font-size: 1rem;
  margin-top: 9rem;
	
	font-weight: 100;
}

.underline {
	position: absolute;
  margin-top: 0rem;
  width: 60vw; 
  height: 4.2vw;
  background-color: #1d7031; 
	transform: scaleX(0)skewX(-20deg); 
  transform-origin: left center;
}
.title, .subtitle {
  opacity: 0;
}





.blocVideo1 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: black;
  z-index: -1;
  opacity: 1;
	transform-origin: center;
	 transform: scale(1.23)translateY(-50px);

}





#video1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("img/image_Nature'sGuardians/canvas title.webp") 50% 50%;
  background-size: cover;
  z-index: -1;
  opacity: 0.5;
 
}

#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 177.78vh;
  min-height: 100vh;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  border: none;
  z-index: 2;
}



.logo{
	position: absolute;
	width: 6em;
	height: 100%;
	top: 0%;
	left: 20%;
	
}

#LOGOAFRICA {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left:0%;
	filter: invert(1);
	transition: 0;
	z-index: 9999999999999999999999999999999999999999999999;
}
.cursor {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: white;
  position: absolute;
  z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
  pointer-events: none;
  mix-blend-mode: difference;
}
.cursor-f {
  width: var(--size);
  height: var(--size);
  position: absolute;
z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");
  background-size: cover;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0.5;
}

.fade {
  opacity: 0;
  transform: translateY(20px);
}
.fade2 {
  opacity: 0;
  transform: translateY(20px);
}
.fade3 {
  opacity: 0;
  transform: translateY(20px);
}
.fade4 {
  opacity: 0;
}
.fade5 {
  opacity: 0;
  transform: translateY(20px);
}
.fade6 {
  opacity: 0;
  transform: translateY(20px);
}
.fade7 {
  opacity: 1;
  transform: translateY(0px);
}
#BlocvideoIntro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #EDEADD;
  z-index: 9999;
  transition: opacity 1s ease;
  opacity: 1;
	transform-origin: center;
	 transform: scale(1.23)translateY(-50px);

}

#BlocvideoIntro.fadeout {
  opacity: 0;
}

#BlocvideoIntro.invisible {
  z-index: -999999999999999999999999999999999999999999999 !important;
}

#img_Intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("img/image_Nature'sGuardians/canvas title.webp") 50% 50%;
  background-size: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#img_Intro.visible {
  opacity: 0.2; 
}
#videoIntro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 177.78vh;
  min-height: 100vh;
  aspect-ratio: 16 / 9;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s 1s;
  pointer-events: none;
  border: none;
  z-index: 2;
}

#videoIntro.visible {
  opacity: 1;
  visibility: visible;
}

  #videoIntro.hidden {
    opacity: 0;
    filter: blur(10px);
  }

  #BlocvideoIntro.invisible {
    z-index: -999999999999999999999999999999999999999999999 !important;
  }
.scrollbar-container {
  position: fixed;
  top: 50%;
  right: 30px;
  height: 97.5%;
  width: 2px;
  background-color: transparent;
  z-index: 10;
	transform-origin: right;
	transform: translateY(-47%) scale(0.75);
	
}

.scrollbar-line {
  position: absolute;
  top: 1px;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: black;
}

.scrollbar-thumb {
  width: 60px; 
  height: 40px; 
	margin-left: -58.1px;
	margin-top: -5px;
  background-color: black; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; 
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.scrollbar-thumb span {
  display: block;
  width: 100%;
}

.scrollbar-label {
  background-color: black;
  color: white;
  font-size: 20px;
  padding: 2px 6px;
  border-radius: 2px;
  font-family: "new-science", sans-serif;
font-weight: 500;
font-style: normal;
	letter-spacing: 0.2em;
}
.scrollbar-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px; 
  height: 100%;
  pointer-events: none;
	z-index: 10;
}

.scrollbar-marker {
  position: absolute;
  left: -8px; 
  width: 10px;
  height: 10px;
  background-color: black;
  cursor: none;
  pointer-events: auto;
	margin-top: 1px;
	z-index: 10;
	
}

.scrollbar-label-hover {
  position: absolute;
  color: black;
  background: transparent;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
	visibility: hidden;
	text-align: right; 
	display: flex;
  justify-content: flex-end;
  align-items: center;
	min-width: 300px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.nav-links a {
  position: relative;
  text-decoration: none;
  color: inherit;
  padding: 4px 0; 
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav-links a.active::after {
  transform: scaleX(1);
  color: #1d7031;
}
.navbar {
  position: fixed;
  top: 0;
	left: 0;
  width: 100%;
  background: white;
  color: black;
  display: flex;
  justify-content: space-between;
  padding: 3rem;
  z-index: 1000;
	filter: invert(0);
	box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15);
	transition: padding 0.5s ease; 
}

.imgNavbar {
	position: absolute;
	background:url("img/monochrome_map_height200_max3.webp")50% 50% repeat;
    background-size: cover;
	left: 0;
	top: 0;
	height: 100%;
    width: 100%;
	opacity: 0.05;
}
.nav-links{
	position: absolute;
	top: 50%;
	right: 20%;
	transform: translateY(-50%)
}
.nav-links a {
  color: black;
  margin-left: 20px;
  text-decoration: none;
	cursor: none;
}

.burger {
  display: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1001;
  width: 30px;
  height: 24px;
}

.burger div {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: black;
  transition: 0.3s ease;
  left: 0;
}

.burger div:nth-child(1) {
  top: 0;
}

.burger div:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.burger div:nth-child(3) {
  bottom: 0;
}

.burger.active div:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.burger.active div:nth-child(2) {
  opacity: 0;
}

.burger.active div:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}


@media screen and (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 150%;
    right: -100%;
    height: auto;
    width: 57%;
    background: white;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: right 0.3s ease-in-out;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
	  display: flex; 
    z-index: 1000;
  padding: 2rem 0;
  overflow-y: auto;
	   gap: 1.5rem;
  }

  .nav-links a {
    margin:0;
    font-size: 1.2rem;
	  display: block;
  }

  .nav-links.open {
    right: 0;
  }

  .burger {
    display: flex;
  }

  .logo {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .navbar {
    padding: 1.5rem;
  }
}


.no-scroll {
  overflow: hidden !important;
  pointer-events: none;
  touch-action: none;
  height: 100%;
	cursor: none;
}

.scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
	scrollbar-width: none; 
  -ms-overflow-style: none; 
  scroll-behavior: smooth;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}
.section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: none; 
}
a:hover{cursor: none;}
.demo1 {
	display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 2em;
	
	
}

.blocTextHB{
	position: absolute;
	width: 90%;
	height: 50%;
	top: 50%;
	left: 8em;
	transform: translateY(-50%);
}
.blocTextHB h1{color: white;}
.blocTextHB p {
	font-size: 2.2vw;
	white-space: nowrap;
	font-weight: 400;
}
.blocTextHB2{
	position: absolute;
	width: 90%;
	height: 35em;
	top: 54vh;
	left: 8em;
	transform: translateY(-50%);
}
.blocTextHB2 h1{color: white;}
.blocTextHB2 p {
	font-size: 2.3vw;
	white-space: nowrap;
	font-weight: 400;
}
.blocTextHB3{
	position: absolute;
	width: 90em;
	height: 25em;
	top: 47%;
	left: 13vw;
	transform: translateY(-50%);
}
.blocTextHB3 h1{color: white;}


.underlineHB3 {
	position: absolute;
  width: 0%;
  height: 35px;
  background-color: #de4d16; 
  transition: width 0.6s ease;
	margin-top: -3.3em;
left: 266px;
	z-index: -1;
	transform:skewX(-4deg); 
}
.columnsText {
  columns: 2;
  column-gap: 4em;
  color: black;
  font-size: 1.6em;
  line-height: 1.5;
  margin-top: 3em;
  width: 80%;
}



.colorFade {
	font-weight: 800;
	color: #de4d16;
    animation-name: colorCycle;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes colorCycle {
    0%, 25% { color: #de4d16; }  
    50%, 75% { color: #1d7031; }  
    100% { color: #de4d16; }
}
.underlineNG1, .underlineNG2,
.underlineDef1, .underlineDef2 {
    position: absolute;
    width: 0px;
    height: 35px;
    background-color: #1d7031;
    transition: width 0.6s ease;
    transform: skewX(-5deg);
    z-index: -1;
}

.underlineNG1 { top: 1.75em; left: 2em; }
.underlineNG2 { top: 2.75em; left: 2em; }
.underlineDef1 { top: 1.75em; left: 2em; }
.underlineDef2 { top: 2.75em; left: 2em; }

.underlineHB {
	position: absolute;
  width: 0%;
  height: 35px;
  background-color: #1d7031; 
  transition: width 0.6s ease;
	margin-top: -3.3em;
	margin-left: -0.6em;
	z-index: -1;
	transform:skewX(-4deg); 
}
.line-wrapper {
  display: block;
  overflow: hidden;
	 line-height: 1;
    height: 1.1em; 
}

.line {
  display: inline-block;
  transform: translateY(100%);
}
.blocTextHB p {
    line-height: 0.4em;
}
.underlineHB2 {
	position: absolute;
  width: 0%;
  height: 35px;
  background-color: #de4d16; 
  transition: width 0.6s ease;
	margin-top: -3.3em;
left: 306px;
	z-index: -1;
	transform:skewX(-4deg); 
}
.line-wrapper2 {
  display: block;
  overflow: hidden;
	 line-height: 1;
    height: 1.1em; 
}

.line2 {
  display: inline-block;
  transform: translateY(100%);
}
.black{
	color: black;
}
.blocTextHB2 p {
	line-height: 0.4em;
}
#imgHB{
	position: absolute;
	background:url("img/image_Nature'sGuardians/canvas title.webp")50% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHB{
	position: absolute;
	background:url("img/image_Nature'sGuardians/canvas title.webp")50% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHBSpain{
	position: absolute;
	background:url("img/Spain2.webp")100% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHBPanama{
	position: absolute;
	background:url("img/Panama2.webp")100% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHBUSA{
	position: absolute;
	background:url("img/USA2.webp")100% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHBGalapagos{
	position: absolute;
	background:url("img/Galapagos2.webp")100% 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	
}
.imgHBLM{
	z-index: -3;
}

#ScrollTxt{
	font-size: 0.8em;
	position: absolute;
	transform: translateY(-120%);
	letter-spacing: 0.2em;
	color: white;
	font-family: "new-science", sans-serif;
font-weight: 700;
font-style: normal;
}
 .demo1-scroll {
	 font-size: 10px;
	 height: 4em;
	 width: 2em;
	 border: 0.2em solid rgba(255, 255, 255, 0.2);
	 border-radius: 2em;
}
 .demo1-scroll:before {
	 content: '';
	 width: 1.2em;
	 height: 1.2em;
	 border-radius: 0.7em;
	 background: #fff;
	 display: block;
	 margin: 0.3em auto;
	 animation: demo1-scroll-anim 0.5s 0s infinite alternate ease-in-out;
}
 @keyframes demo1-scroll-anim {
	 50% {
		 height: 1.7em;
	}
	 100% {
		 margin-top: 2.4em;
	}
}
.section {
    position: relative;
}
.learnmore::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.learnmore:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
	color: white;
}

.learnmore::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background-color:#1d7031;
  z-index: -1;
  transition: transform .3s ease;

}

.learnmore {
  position: absolute;
  font-size: 1.3rem;
	z-index: 99999999999999999999999999999999999;
	padding-left:10px;
  padding-right:10px;
	padding-top:10px;
  padding-bottom:10px;
	transform: translateX(-10px);
	color: black;
	transition: .5s ease;
	font-family: "new-science", sans-serif;
font-weight: 700;
font-style: normal;
	
	
}
.learnmore:hover{
	transition: .5s ease;
	color: white;
}
.learnmore2::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.learnmore2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
	color: black;
}

.learnmore2::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background-color:#1d7031;
  z-index: -1;
  transition: transform .3s ease;

}

.learnmore2 {
  position: absolute;
	left: 50%;
  font-size: 1.3rem;
	z-index: 99999999999999999999999999999999999;
	padding-left:10px;
  padding-right:10px;
	padding-top:10px;
  padding-bottom:10px;
	color: white;
	transition: .5s ease;
	font-family: "new-science", sans-serif;
font-weight: 700;
font-style: normal;
	text-align: center;
	    transform: translateX(-50%) translateY(-250%);

	
	
}
.learnmore2:hover{
	transition: .5s ease;
	color: black;
}
.line_underbtn{
	position: absolute;
	background-color: #1d7031;
	width: 100%;
	height: 5%;
	left: 0;
	bottom: 0;
	
	
}
.alphaX {
  
  transform-origin: center center;
  opacity: 0;
  transition: opacity 1s ease-out, transform 1.7s ease-out, letter-spacing 1.7s ease-out, -webkit-filter 1.7s ease-out, filter 1.7s ease-out;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  white-space: nowrap;
}
.alphaX.inX {
  opacity: 1;
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.button {
    margin-top: 15em;
    margin-right: 20em;
    --default: rgba(29, 112, 49, 0.2);
    --active: #1d7031;
    position: relative;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: none;
    transform: scale(var(--s, 1));
    transition: transform .2s;
}
.button:active {
    --s: .96;
}
.button svg {
    display: block;
    fill: none;
    stroke-width: var(--sw, 3px);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.button .circleDL {
    width: 76px;
    height: 76px;
    transform: rotate(-90deg);
}
.button .circleDL circle.default {
    stroke: var(--default);
}
.button .circleDL circle.activeDL {
    stroke: var(--active);
    stroke-dasharray: 227px;
    stroke-dashoffset: var(--active-offset, 227px);
    transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, .8s);
}
.button span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 13px;
    font-weight: 500;
    font-size: 10px;
    color: var(--active);
    opacity: var(--count-opacity, 0);
    transform: translateY(var(--count-y, 4px));
    animation: var(--count, none) .3s ease forwards var(--all-delay, 4.6s);
    transition: opacity .2s ease .6s, transform .3s ease .6s;
}
.button .iconDL {
    --sw: 2px;
    width: 24px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -12px;
}
.button .iconDL svg.lineDL {
    width: 4px;
    height: 37px;
    stroke: var(--active);
    position: absolute;
    left: 10px;
    top: 0;
    stroke-dasharray: 0 33px var(--line-array, 33px) 66px;
    stroke-dashoffset: var(--line-offset, 33px);
    transform: translateY(var(--line-y, 0));
    opacity: var(--line-opacity, 1);
    transition: stroke-dasharray .2s, stroke-dashoffset .2s, transform .32s ease var(--all-delay, .25s);
}
.button .iconDL div {
    width: 40px;
    height: 32px;
    position: absolute;
    overflow: hidden;
    left: 50%;
    bottom: 1px;
    margin-left: -20px;
    transform: translate(var(--icon-x, 0), var(--icon-y, 0));
    transition: transform .3s ease var(--all-delay, 4.8s);
    animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s);
}
.button .iconDL div:before,
.button .iconDL div:after {
    content: '';
    position: absolute;
    z-index: 1;
    height: 2px;
    left: var(--l, 0);
    top: 15px;
    width: var(--w, 16px);
    background: var(--active);
    border-radius: 1px;
    transform-origin: var(--tx, 15px) 1px;
    transform: rotate(var(--before-rotate, 0deg));
    opacity: var(--tick-opacity, 0);
    transition: transform .4s ease var(--all-delay, 4.8s), opacity 0s linear var(--all-delay, 4.8s);
}
.button .iconDL div:after {
    --l: 14px;
    --w: 26px;
    --tx: 1px;
    transform: rotate(var(--after-rotate, 0deg));
}
.button .iconDL div svg {
    stroke: var(--active);
}
.button .iconDL div svg.arrowDL {
    width: 40px;
    height: 32px;
    opacity: var(--arrow-opacity, 1);
    transition: opacity 0s linear var(--all-delay, 1s);
}
.button .iconDL div svg.progress {
    width: 444px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 11px;
    transform: translateX(var(--progress-x, 0));
    opacity: var(--progress-opacity, 0);
    transition: transform var(--all-transition, 4.4s) ease var(--all-delay, .4s), opacity 0s linear var(--all-delay, 1s);
    animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s);
}
.button.loading:not(.reset) {
    --line-y: -36px;
    --line-array: 0;
    --line-offset: 15px;
    --active-offset: 0;
    --arrow-opacity: 0;
    --progress-opacity: 1;
    --progress-x: -400px;
    --tick-opacity: 1;
    --before-rotate: 47deg;
    --after-rotate: -46deg;
    --hide: hide;
    --overflow: overflow;
    --icon-x: 2px;
    --icon-y: 7px;
    --count-opacity: 1;
    --count-y: 0;
    --count: count;
}
.button.reset {
    --all-delay: 0s;
    --all-transition: .3s;
}

@keyframes hide {
    to {
        opacity: 0;
    }
}

@keyframes count {
    to {
        transform: translateY(4px);
        opacity: 0;
    }
}

@keyframes overflow {
    to {
        overflow: visible;
    }
}



.last {
    margin-right: 0em;
}

.button:hover {
	transform-origin: center;
  transform: scale(1.05);
}
.descDL{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 1.5em;
	color: white;
	text-align: center;
	font-weight: 600;
	background-color:#de4d16;
	padding: 4px 40px;
}


.blocTitleResources {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	line-height: 0;
}

.subTitle {
  display: inline-block;
  color: white;
  font-size: 2em;
  font-weight: 700;
  position: relative;
  margin-bottom: 0.2em;
}

.mainTitle {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}

.underlineText111,
.underlineText222 {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}

.subTitle + .underlineText111 {
  background: #de4d16;
}

.mainTitle + .underlineText222 {
  background: #1d7031;
}
.underlineText222{
	transform: skewX(-7deg);
	left: -2em;
	top: 3.3em;
	height: 75px;
}

.underlineText111 {
	transform-origin: right;
  left: 7.8em;
transform:skewX(-7deg);
  height: 40px;
	top: 0.5em

}
.blocTitleTrailer {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	line-height: 0;
}

.subTitleTrailer {
  display: inline-block;
  color: white;
  font-size: 2em;
  font-weight: 700;
  position: relative;
  margin-bottom: 0.2em;
}

.mainTitleTrailer {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}

.underlineTextTrailer1,
.underlineTextTrailer2 {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}

.subTitleTrailer + .underlineTextTrailer1 {
  background: #de4d16;
}

.mainTitleTrailer + .underlineTextTrailer2 {
  background: #1d7031;
}
.underlineTextTrailer2{
	transform: skewX(-7deg);
	left: -2em;
	top: 3.3em;
	height: 75px;
}

.underlineTextTrailer1 {
	transform-origin: right;
  left: 7.3em;
transform:skewX(-7deg);
  height: 40px;
	top: 0.5em

}
.blocTitleBackstage {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	line-height: 0;
}

.subTitleBackstage {
  display: inline-block;
  color: white;
  font-size: 2em;
  font-weight: 700;
  position: relative;
  margin-bottom: 0.2em;
}

.mainTitleBackstage {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}

.underlineTextBackstage1,
.underlineTextBackstage2 {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}

.subTitleBackstage + .underlineTextBackstage1 {
  background: #de4d16;
}

.mainTitleBackstage + .underlineTextBackstage2 {
  background: #1d7031;
}
.underlineTextBackstage2{
	transform: skewX(-7deg);
	left: -2em;
	top: 3.3em;
	height: 75px;
}

.underlineTextBackstage1 {
	transform-origin: right;
  left: 11em;
transform:skewX(-7deg);
  height: 40px;
	top: 0.5em

}

.blocTitleProta {
  position: absolute;
  top: 12%;
  left: 10%;

  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
	line-height: 0;
	width: 78em;
}
.paraProta{
	position: absolute;
	right: 10%;
	font-size: 0.8em;
	width: 35%;
	height: 100%;
	line-height: 1.1em;
	letter-spacing: 0.1em;
	
	
}
.subTitleProta {
  display: inline-block;
  color: black;
  font-size: 1em;
  font-weight: 200;
  position: relative;
  margin-bottom: 0.2em;
}

.TitleProta {
  display: inline-block;
  color: white;
  font-size: 3em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}


.underlineTextProta {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}



.TitleProta + .underlineTextProta {
  background: #1d7031;
}
.underlineTextProta{
	transform: skewX(-7deg);
	left: -1em;
	top: 0.8em;
	height: 60px;
}


.blocTitleProd {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	line-height: 0;
	width: 60em;
	z-index: 2;
}



.TitleProd {
  display: inline-block;
  color: white;
  font-size: 3em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}


.underlineTextProd1,
.underlineTextProd2 {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}

.underlineTextProd1 {
  background: #de4d16;
}

.underlineTextProd2 {
  background: #1d7031;
}
.underlineTextProd2{
	transform: skewX(-7deg);
	left: 31.2em;
	top: 0.4em;
	height: 75px;
}

.underlineTextProd1 {
	transform-origin: right;
  left: 5em;
transform:skewX(-7deg);
  height: 75px;
	top: 0.4em

}


.blocTitlePartners {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
	line-height: 0;
	width: 45em;
}

.subTitlePartners {
  display: inline-block;
  color: black;
  font-size: 2em;
  font-weight: 200;
  position: relative;
  margin-bottom: 0.2em;
}

.TitlePartners {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}


.underlineTextPartners {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}



.TitlePartners + .underlineTextPartners {
  background: #1d7031;
}
.underlineTextPartners{
	transform: skewX(-7deg);
	left: -2em;
	top: 1.2em;
	height: 75px;
}

.boxSponsors{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	transform: scale(2.5);
	
}
:root {
	 --off-white: #fafaf0;
	 --light-gray: #1d7031;
}
 @keyframes infiniteLoop {
	 0% {
		 transform: translate3d(0, 0, 0);
	}
	 100% {
		 transform: translate3d(calc(-6.25rem * 10), 0, 0);
	}
}

 .brandsCarousel {
	 max-width: 25vw;
	 max-height: 3.25rem;
	 margin: auto;
	 overflow: hidden;
	 position: absolute;
	 z-index: 1;
	 top: 55%;
	 left: 50%;
	 transform: translateX(-50%);
	 will-change: transform;
}
 .brandsCarousel::before, .brandsCarousel::after {
	 content: "";
	 width: 6.25rem;
	 height: 3.25rem;
	 position: absolute;
	 z-index: -2;
}
 .brandsCarousel::before {
	 top: 0;
	 left: 0;
}
 .brandsCarousel::after {
	 top: 0;
	 right: 0;
	 transform: rotateZ(180deg);
}
 .carouselTrack {
	 width: calc(6.25rem * 20);
	 animation: infiniteLoop 10s linear infinite;
	 animation-fill-mode: forwards;
	 will-change: transform;
	 display: flex;
}
.brandLogo {
    width: 6.25rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1em;
	will-change: transform;
    
	
}

.brandLogo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
	will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
	transform-origin: center center;
}
.brandLogo:hover img {
    transform: scale(1.2);
}
.widthPlus2{
	width: 5rem!important;
}
.widthMoins{
	width: 2.8rem!important;
}



.widthPlus{
	width: 10rem!important;
	
		
}




.blocTitleCoalition {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  display: flex;
  flex-direction: column;
	line-height: 0.3em;
}

.subTitleCoalition {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  position: relative;
  margin-bottom: 0.2em;
}

.mainTitleCoalition {
  display: inline-block;
  color: white;
  font-size: 4em;
  font-weight: 700;
  transform: skewX(-5deg);
  position: relative;
}

.underlineTextCoalition1,
.underlineTextCoalition2 {
	transform-origin: right;
  position: absolute;
  background: currentColor;
  width: 0;
  transition: width 0.4s ease;
  z-index: -1;
}

.subTitleCoalition + .underlineTextCoalition1 {
  background: #de4d16;
}

.mainTitleCoalition + .underlineTextCoalition2 {
  background: #1d7031;
}
.underlineTextCoalition2{
	transform: skewX(-7deg);
	left: -2em;
	top: 5.8em;
	height: 75px;
}

.underlineTextCoalition1 {
	transform-origin: right;
  left: -0.9em;
transform:skewX(-7deg);
  height: 75px;
	top: 1.2em

}
button{
		  font-family: "new-science", sans-serif;
}
.formScreen{
	top: 25%!important;
	right: 10%!important;
      transform: translateX(0%) scale(1)!important;
	
	
}
.contact-form {
      position: absolute;
      top: 40%;
      right: 50%;
      transform: translateX(50%) scale(1.1);
      width: 90%;
      max-width: 500px;

	 
    }
.contact-form input,.contact-form textarea,.ContactBTN {
      width: 100%;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid #1d7031;
      background: transparent;
      color: black;
      font-size: 16px;
      outline: none;
      resize: none;
		transition: background 0.3s;
    }

.contact-form input::placeholder,
.contact-form textarea::placeholder {
      color: black;
      opacity: 0.8;
    }

.ContactBTN {
      cursor: none;
      text-transform: uppercase;
      font-weight: bold;
      transition: background 0.3s;
    }

.ContactBTN:hover {
      background: rgba(222, 77, 22, 0.1);
    }
.contact-form input:hover {
      background: rgba(222, 77, 22, 0.1);
    }
.contact-form textarea:hover {
      background: rgba(222, 77, 22, 0.1);
    }
*,
*::before,
*::after {
    box-sizing: border-box;
}
.contact-form input,
.contact-form textarea {
font-family: "new-science", sans-serif;}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
font-family: "new-science", sans-serif;}





.video-gallery {
  position:absolute;
  left:50%;
  top:60%;
  transform:translateX(-50%)translateY(-50%)scale(0.8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 45px;
  max-width: 1700px;
  padding: 15px; 
  margin: 0 auto;
  box-sizing: border-box;
}

.video-gallery .gallery-item {
  position: relative;
  width: 100%;
  height: 300px;
  background: #000;
  cursor: none;
  overflow: hidden;
}

.video-gallery .gallery-item img {
  position: relative;
  display: block;
  width: 115%;
  height: 300px;
  object-fit: cover;
  opacity: .5;
  transition: all 350ms ease-in-out;
  transform: translate3d(-23px, 0, 0);
  
}

.north-cascades-img {
  object-position: 50% 30%;
}

.video-gallery .gallery-item .gallery-item-caption {
  padding: 32px;
  font-size: 1em;
  color: #fff;
  text-transform: uppercase;
}

.video-gallery .gallery-item .gallery-item-caption,
.video-gallery .gallery-item .gallery-item-caption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-gallery .gallery-item h2 {
  font-weight: 300;
  overflow: hidden;
  padding: 12px 0;
  
}

.video-gallery .gallery-item h2,
.video-gallery .gallery-item p {
  position: relative;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}

.video-gallery .gallery-item p {
  letter-spacing: 1px;
  font-size: 12px;
  padding: 12px 0;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(10%, 0, 0);
}

.video-gallery .gallery-item:hover img {
  opacity: 0.3;
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item .gallery-item-caption {
  text-align: left;
}

.video-gallery .gallery-item h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 1px;
  background: #fff;
  transition: transform 0.3s;
  transform: translate3d(-100%, 0, 0);
}

.video-gallery .gallery-item:hover h2::after {
  transform: translate3d(0, 0, 0);
}

.video-gallery .gallery-item:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
@media screen and (max-width: 784px) {
  .video-gallery {
    width: 100%;
    padding: 15px;    

  }
  .video-gallery .gallery-item {
    width: 95%;
    margin: 0 auto; 
    width: 100%;
  }
}
*/

.blocFade{
	position: absolute;
	width: 100%;
	bottom: 0;
}
.Light{
	font-weight: 100;
	font-size: 0.9rem
}
.Light2{
	font-weight: 100;
	font-size: 1.1rem;
	color: #1d7031;
}
.prodH{
	line-height: 1em;
}

#timeline {
  position: absolute;
  bottom: 0;
  display: flex;
  background-color:rgba(11,43,15,1.00);
  font-size: 16px;
  line-height: 1.75;
}

#timeline:hover .tl-item {
  width: 23.3333%;
}
#timeline2 {
  position: absolute;
  bottom: 0;
  display: flex;
  background-color:rgba(11,43,15,1.00);
  font-size: 16px;
  line-height: 1.75;
}

#timeline2:hover .tl-item {
  width: 23.3333%;
}

.tl-item {
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 100%;
  min-height: 71vh;
	max-height: 71vh;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s ease;
}
.item-prod{
	  min-height: 77vh!important;
	max-height: 77vh!important;
}

.tl-item::before,
.tl-item::after {
  transform: translate3d(0, 0, 0);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tl-item::after {
  background: rgba(11,43,15,0.5);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.tl-item::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0) translateY(50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tl-item:hover {
  width: 30% !important;
}

.tl-item:hover::after {
  opacity: 0;
}

.tl-item:hover::before {
  opacity: 1;
  transform: translate3d(0, 0, 0) translateY(0);
  transition: opacity 1s ease, transform 1s ease 0.25s;
}

.tl-item:hover .tl-content {
  position: absolute;
  bottom: 10%;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.75s ease 0.5s;
}

.tl-item:hover .tl-bg {
  filter: grayscale(0);
}

.tl-content {
  transform: translate3d(0, 0, 0) translateY(25px);
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 1.618em;
  bottom: 15%;
  opacity: 0;
}
.prodContent {
  bottom: 5%!important;

}

.tl-content h1 {
  text-transform: uppercase;
  color: white;
  font-size: 1.44rem;
  font-weight: 600;
}
.tl-content p{
	padding-left: 3em;
	padding-right: 3em;
	font-size: 0.7vw;
}
.prodP{
	font-size: 0.6vw!important;
	letter-spacing: 0.05em!important;
}
.small{
	font-size: 0.5vw!important;
	letter-spacing: 0.05em!important;
}
.tl-year {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
	padding-left: 1em;
	padding-right: 1em;
	background-color: #1d7031;
}

.tl-year p {
  font-size: 1.728rem;
  line-height: 0;
	font-weight: 800;
	
}
.Adam{
	background: url("img/adam.webp")50% 50%;
}
.Meridith{
	background: url("img/Meridith2.webp")50% 50%;
}
.Luis{
	background: url("img/Luis.webp")50% 50%;
}
.Xavier{
	background: url("img/sunyata-films.webp")50% 50%;
}
.Audrey{
	background: url("img/Portrait_Audrey_Lavis_3.webp")35% 50%;
}

.teresa{
	background: url("img/Teresa2.webp")80% 50%;
}
.eva{
	background: url("img/Eva.webp")55% 50%;
}
.eduardo{
	background: url("img/Eduardo.webp")58% 50%;
}
.gabriel{
	background: url("img/Gabriele2.webp")50% 50%;
}
.natalie{
	background: url("img/Natalie.webp")50% 50%;
}
.tl-bg {
  transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  
	
  transition: filter 0.5s ease;
  filter: grayscale(100%);
}








.creative-carousal--hero{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
	top: 0;
	left: 0;
}
.creative-carousal--hero .carousel-slider {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.creative-carousal--hero .carousel-slider2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.creative-carousal--hero .carousel-slider  .swiper-slide{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    background-size: cover;
    background-position: center;
}
.creative-carousal--hero .carousel-slider .swiper-slide.swiper-slide-active {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.creative-carousal--hero .carousel-slider .swiper-slide:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    opacity: 0.7;
}
.creative-carousal--hero .carousel-slider .swiper-slide.swiper-slide-active:after {
    opacity: 0.4;
}
.creative-carousal--hero .carousel-slider .swiper-slide .inner {
	height: 100%;
    width: 100%;
    display: block;
    text-align: center;
    color: black;
    position: relative;
    z-index: 2;
    opacity: 0;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
	background-color:rgba(243,221,167,0.15);
}
.darkerImg{
	mix-blend-mode: darken;
}
.creative-carousal--hero .carousel-slider .swiper-slide.swiper-slide-active .inner {
    opacity: 1;
}

.titleLine {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}



.message {
  background-color: #1d7031;
  color: white;
  display: block;
  font-weight: 900;
  overflow: hidden;
  position: absolute;
  width: 75%;
	top: 25vh;
	left: 12.5%;
	transform-origin: left;
	transform:skewX(-5deg);
}



.creative-carousal--hero .carousel-slider .swiper-slide .inner p{
	position: absolute;
	top: 40vh;
padding-left: 6.5em;
	padding-right: 6.5em;
	text-align: left;
	font-size: 0.8em;
}
.creative-carousal--hero .carousel-slider .swiper-slide .inner a{
    font-size: 19px;
    color: black;
    padding-bottom: 5px;
    position: absolute;
	top: 70vh;
    border-bottom: 2px solid #1d7031;
    text-decoration: none;
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
	left: 50%;
	transform: translateX(-50%);
}
.creative-carousal--hero .carousel-slider .swiper-slide .inner a:hover{
    text-decoration: none;
    color: #1d7031;
}
.creative-carousal--hero .slide-progress {
    width: 220px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -110px;
    z-index: 3;
    text-align: center;
}
.creative-carousal--hero .slide-progress span {
    display: inline-block;
    color: black;
    font-size: 14px;
}
.creative-carousal--hero .slide-progress .swiper-pagination {
    width: 160px;
    height: 2px;
    margin: auto 10px;
    display: inline-block;
    position: static;
    background: rgba(0, 0, 0, 0.3);
}
.creative-carousal--hero .slide-progress .swiper-pagination .swiper-pagination-progressbar-fill {
    background: #1d7031;
}

.creative-carousal--hero .slide-progress span {
    display: inline-block;
    color: black;
    font-size: 14px;
}
.creative-carousal--hero .swiper-button-prev {
	font-weight: 700;
    height: auto;
	width: auto;
    position: absolute;
    right: auto;
    top: auto;
    left: 20em;
    bottom: 35px;
    color: black;
    background: none;
	cursor: none;
	text-decoration: none;
	padding: 4px 0; 
}
.swiper-button-prev::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 100%;
  background-color: #1d7031;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
	cursor: none;
	
}

.swiper-button-prev:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.creative-carousal--hero .swiper-button-next {
	font-weight: 700;
    height: auto;
    position: absolute;
	width: auto;
    left: auto;
    top: auto;
    right: 20em;
    bottom: 35px;
    color: black;
    background: none;
	cursor: none;
	text-decoration: none;
	padding: 4px 0; 
	
	
}

.swiper-button-next::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 100%;
  background-color: #1d7031;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
	cursor: none;
	
}

.swiper-button-next:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}



@media (max-width: 991px) {
    .creative-carousal--hero .carousel-slider .swiper-slide .inner h2{
               font-size: 7vw;

        line-height: 7vw;
        margin-bottom: 15px;
    }
}


@media screen and (max-width: 767px) {
    .creative-carousal--hero .carousel-slider .swiper-slide .inner h2{
        font-size: 12vw;
        line-height: 12vw;
        margin-bottom: 15px;
    }
    .creative-carousal--hero .swiper-button-prev{
		cursor: none;
            left: 40px;
    }
    .creative-carousal--hero .swiper-button-next{
		cursor: none;
            right: 40px;
    }
}



.Over{
	overflow: hidden;
}



.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  user-select: none;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  position: relative;
}

.slideMap {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.slider-control {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 12%;
  height: 100%;
  transition: opacity 0.3s;
  opacity: 0;
}

.slider-control:not(.inactive):hover {
  opacity: 1;
  cursor: none;
}

.slider-control.left {
	cursor: none;
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, transparent 100%);
}

.slider-control.right {
	cursor: none;
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.18) 0%, transparent 100%);
}

.slider-pagi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  list-style: none;
  font-size: 0;
	cursor: none;
}

.slider-pagi__elem {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  border: 2px solid #fff;
  position: relative;
  cursor: none;
}

.slider-pagi__elem::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s;
}

.slider-pagi__elem.active::before,
.slider-pagi__elem:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.slide__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  will-change: transform;
}

.slide__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-height: 810px;
  transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
  transform: translate3d(-20%, 0, 0);
  opacity: 0;
  will-change: transform, opacity;
}

.slideMap.active .slide__overlay {
  opacity: 1;
  transform: translateX(0);
}

.slide__text {
  position: absolute;
  width: 25%;
  bottom: 20%;
  left: 9%;
  color: #fff;
  transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
  opacity: 0;
}

.slide__overlay-path {
  fill: #1d7031;
  stroke: black;
  stroke-width: 4;
  transform-origin: center;
  transform: scale(1.4) translateX(80px);
	opacity: 0.7;
}

.slide__text-heading {
	position: absolute;
	top:-135px;
  font-size: 3.6vw;
  margin-bottom: 2rem;
	line-height: 1em;
	text-transform: uppercase;
	background-color: #1d7031;
	width: auto;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.slide__text-heading2 {
  font-size: 1.2vw;
	line-height: 1em;
	text-transform: uppercase;
}

.slide__text-desc {
  font-size: 1.2vw;
  margin-bottom: 1.5rem;
	font-weight: 100;
}




.slideMap:nth-child(1) .slide__bg {
  transform: translate3d(0%, 0, 0);
}
.slideMap:nth-child(2) .slide__bg {
  transform: translate3d(50%, 0, 0);
}
.slideMap:nth-child(3) .slide__bg {
  transform: translate3d(100%, 0, 0);
}
.slideMap:nth-child(4) .slide__bg {
  transform: translate3d(150%, 0, 0);
}