/*-----------------------------
		GENERAL
-----------------------------*/

@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 100 300;
  font-display: swap;
  src: url(../../fonts/SpaceGrotesk-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../fonts/SpaceGrotesk-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(../../fonts/SpaceGrotesk-Medium.woff2) format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(../../fonts/SpaceGrotesk-Bold.woff2) format('woff2');
}

:root {
  --fontSize: 18px;
  --wrapper: 1400px;
  --gutter: 3em;
  --textColor: #000000;
  --black: #000000;
  --color1: #42C95F;
  --color2: #000000;
  --gradient: linear-gradient(180deg, rgba(173, 255, 191, 0.00) 0%, #689973 100%);
  --trueBlack: #000000;
  --lightGrey: #f0f0f0;
  --grey: #D9D9D9;
  --baseFont: 'SpaceGrotesk', sans-serif;
  --titleFont: "SpaceGrotesk", sans-serif;
  --borderRadius: 0.55em;
  --boxShadow: 0 0 10px 2px rgba(0,0,0,0.125);
  --lightBoxShadow: 0 0 20px 1px rgba(0,0,0,0.05);
  --veryLightBoxShadow: 0 0 10px 1px rgba(0,0,0,0.035);
  --headerHeight: 68px;
}
@media screen and (max-width: 1300px) {
  :root {
    --gutter: 2.5em;
  }
}
@media screen and (max-width: 1100px) {
  :root {
    --fontSize: 16px;
    --headerHeight: 64px;
  }
}
@media screen and (max-width: 600px) {
  :root {
    --fontSize:14px;
    --headerHeight: 61px;
  }
}
@media screen and (max-width: 450px) {
  :root {
    --gutter: 2em;
  }
}

html {
  overflow-x: clip;
  max-width: 100vw;
}
body {
  color: var(--textColor);
  font-family: var(--baseFont);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
  font-size: var(--fontSize);
  background-color: #fff;
  overflow-x: clip;
  max-width: 100vw;
}
body:not(.header-light) {
  padding-top: var(--headerHeight);
}
main {
	max-width: 100vw;
}





/*******************
	helpers
*******************/


.color1 { color: var(--color1); }
.color2 { color: var(--color2); }
.bg-color1 { background-color: var(--color1); color: #fff; }
.bg-color2 { background-color: var(--color2); color: #fff; }


.slider-nav a {
  --s: 5em;
  --sarrow: calc(var(--s) * 0.2);
  position: relative;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.3);
  background-image: none;
  background-color: transparent;
}
.slider-nav a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sarrow);
  height: var(--sarrow);
  margin-top: calc(var(--sarrow) * -0.5);
  margin-left: calc(var(--sarrow) * -0.5);
  transform: rotate(45deg);
  background-image: url(../../img/arrow.svg);
  background-size: 70% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.slider-nav a:hover {
  background-color: var(--color1);
}
.slider-nav a:hover::after {
  background-image: url(../../img/arrow-white.svg);
}



.ps-heading_cta {
  --g: 1em;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  text-align: left;
  width: calc(100% + (var(--g) * 2));
  margin: calc(var(--g) * -1);
}
.ps-heading_cta > * {
  padding: var(--g);
}
.ps-heading_cta > .heading {
  flex: 1;
}
.ps-heading_cta > .cta {
  flex: 0 0 25em;
}
@media screen and (max-width: 1100px) {
  .ps-heading_cta > .heading,
  .ps-heading_cta > .cta { flex: 0 0 50%; }
}
@media screen and (max-width: 800px) {
  .ps-heading_cta > .heading,
  .ps-heading_cta > .cta { flex: 0 0 100%; }
}

.ps-menu ul {
  list-style-type: none;
  line-height: 1.35em;
}
.ps-menu ul > li:not(:last-child) {
  margin-bottom: 0.65em;
}
.ps-menu a:hover {
  text-decoration: underline;
}

.back-to-top {
  background-image: url(../../img/rarr-red.svg);
  background-size: 50% auto;
  transform: rotate(-90deg);
}

.wrapper {
  padding: 0 var(--gutter) !important;
}
.wrapper.no-padding {
  padding: 0 !important;
}

.special-list ul {
  --s: 0.4em;
  list-style-type: none;
  margin-left: 0;
}
.special-list ul li {
  position: relative;
  padding-left: 1em;
}
.special-list ul li::before {
  content: '';
  position: absolute;
  top: 0.5em;
  left: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 9999px;
  background-color: currentColor;
}
.special-list ul li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(0.5em + 2px);
  left: calc((var(--s) / 2) - 1px);
  width: 2px;
  height: 100%;
  background-color: currentColor;
}


/*******************
  HEADER & FOOTER
*******************/

header > .wrapper,
footer > .wrapper {
  padding: 0 var(--gutter);
}

header {
  padding-left: 0;
  padding-right: 0;
}
header {
  background-color: transparent !important;
}
body.scrolled header {
  filter: brightness(0) invert(1);
  mix-blend-mode: difference;
}
.header-logo {
  flex: 0 0 7em !important;
}

.main-nav > ul {
  font-size: 1.25em;
}
.main-nav > ul > li > a::before {
  content: '';
  position: absolute;
  top: 100% !important;
  left: 0.5em;
  width: 0;
  height: 1px !important;
  background-color: var(--color1);
  transition: 0.3s;
}
.main-nav > ul > li.current-menu-item > a::before,
.main-nav > ul > li.current-menu-ancestor > a::before {
  width: 0;
}
.main-nav > ul > li > a:hover::before {
  width: calc(100% - 1em);
}

footer {
  background: var(--gradient);
  color: var(--textColor);
}
footer .bacta-to-top {
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--gutter);
  cursor: pointer;
  opacity: 0.5;
}
footer .bacta-to-top:hover {
  filter: invert(82%) sepia(8%) saturate(4283%) hue-rotate(71deg) brightness(89%) contrast(73%);
  opacity: 1;
}
footer .grid {
  --g: 3em;
  margin-top: calc(var(--g) * -1);
  margin-bottom: calc(var(--g) * -1);
}
footer .grid.top > * {
  flex: 0 0 20em;
}
footer .grid.bottom > * {
  flex: 0 0 22em;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: 0;
}
footer .grid.bottom > *.footer-col-logo {
  flex: 1;
  text-align: right;
}
footer .grid.bottom > *.footer-col-logo > * {
  display: block;
  width: 25em;
  max-width: 100%;
  height: auto;
  margin-left: auto;
}
footer .ps-menu ul li {
  position: relative;
}
footer .ps-menu ul li a::before {
  content: '+';
  position: absolute;
  top: 0;
  right: 0;
}
footer .ps-menu ul li a span {
  position: relative;
  display: inline-block;
  transition: 0.3s;
}
footer .ps-menu ul li a:hover span {
  color: var(--color1);
}
footer .ps-menu ul li a span::before {
  content: '';
  position: absolute;
  top: 100% !important;
  left: 0;
  width: 0;
  height: 1px !important;
  background-color: var(--color1);
  transition: 0.3s;
}
footer .ps-menu ul li a:hover span::before {
  width: 100%;
}
@media screen and (max-width: 800px) {
  footer .bacta-to-top {
    padding: var(--gutter) 1em;
    width: 5em;
  }
  footer .bacta-to-top > * {
    display: block;
    width: 100%;
    height: auto;
  }
  footer .grid.bottom {
    margin-top: 2em;
  }
  footer .grid.bottom > * {
    flex: 0 0 100% !important;
  }
  footer .grid.bottom > .footer-col-logo > * {
    width: 20em;
    max-width: 70%;
  }
}

.header-hamburger {
  flex: 1;
  text-align: right;
}
.mobile-menu {
  z-index: 9999;
  background: linear-gradient(180deg, #c7d9cb 0%, #699974 100%);
  color: var(--textColor);
}
.mobile-menu .logo img {
  width: 5em;
  text-align: right;
}
.mobile-nav ul li a {
  font-size: 1.25em;
}

/*******************
	  PAGES LAYOUTS
*******************/

.single-layout {
  margin: calc(var(--gutter) * 0.66) 0;
}
.single-layout .meta {
  margin-top: 1.5em;
}
.single-layout .page-content {
  position: relative;
  margin-top: 2em;
  padding-top: 4em;
}
.single-layout .page-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 10em;
  height: 1px;
  background-color: currentColor;
  transform: translateX(-50%);
}

.team-layout {
  --g: 3em;
  text-align: left;
}
.team-section-title {
  margin: 2em 0 1em 0;
}
.team-section-title > * {
  font-style: 1.125em;
  text-transform: uppercase;
  line-height: 1.3em;
}
.team-section ul {
  list-style-type: none;
}
.team-section li {
  display: flex;
  justify-content: space-between;
  padding: 0.875rem 0;
  color: #9E9E9E;
  line-height: 1.25em;
  border-top: currentColor 1px solid;
  cursor: pointer;
  transition: 0.3s;
}
.team-section li.active,
.team-section li:hover {
  color: var(--color1);
}
.team-section.founders li {
  font-size: 1.25em;
  padding: 1.5rem 0;
}
.team-section li .position {
  padding-left: 1rem;
  text-align: right;
}

.team-layout .box-member {
  min-height: calc(100vh - var(--headerHeight) - (var(--g) * 2));
}
.box-member {
  justify-content: space-between;
}
.box-member .top {
  --g: 1em;
  margin-top: calc(var(--g) * -1);
  margin-bottom: auto;
  padding-bottom: 2em;
}
.box-member .top .ill .inner {
  position: relative;
}
.box-member .top .ill .inner::after {
  content: '';
  display: block;
  padding-bottom: 130%;
}
.box-member .top .ill img {
  border-radius: var(--borderRadius);
  overflow: clip;
}
.box-member .who {
  font-style: 0.92em;
  margin-top: 2rem;
  line-height: 1.3em;
}
.box-member .who span {
  opacity: 0.3;
}
.box-member .bottom {
  --g: 1em;
  margin-bottom: calc(var(--g) * -1);
  margin-top: auto;
}
.box-member .bottom > * {
  margin-top: auto;
  margin-bottom: 0;
}
.box-member .contacts {
  flex: 1;
  z-index: 2;
  position: relative;
}
.box-member .bottom .ill {
  z-index: 1;
  position: relative;
  flex: 0 0 8.125em;
}
.box-member .bottom .ill img {
  display: block;
  width: 100%;
}

@media screen and (max-width: 1400px) {
  .team-layout {
    --g: 2em;
  }
}
@media screen and (max-width: 1000px) {
  .box-member .top > * {
    flex: 0 0 100%;
  }
  .box-member .top .ill .inner {
    width: 18em;
    max-width: 100%;
  }
}
@media screen and (min-width: 701px) {
  .team-section li .box-wrapper {
    display: none;
  }
}
@media screen and (max-width: 700px) {
  .team-layout > * {
    flex: 0 0 100%;
  }
  .team-layout > .main {
    display: none;
  }
  .team-section li {
    flex-wrap: wrap;
  }
  .team-section li .box-wrapper {
    flex: 0 0 100%; 
  }
  .team-section li .box-member {
    display: none;
    padding-top: 1em;
    color: var(--textColor);
  }
}


.compare-layout {
  position: relative;
  background: linear-gradient(180deg, rgba(206, 255, 177, 0.20) 0%, rgba(20, 20, 20, 0.20) 100%);
}
.compare-layout .box-compare {
  z-index: 999;
  position: absolute;
  top: calc(var(--gutter) * 2);
  text-align: left;
  width: 28em;
  max-width: calc(50vw - (var(--gutter) * 4));
  opacity: 0.5;
  transition: 0.5s;
}
.compare-layout .compare-bacta {
  left: var(--gutter);
}
.compare-layout .compare-default {
  right: var(--gutter);
}
.compare-layout.isOnRight .compare-bacta {
  opacity: 1;
  transform: scale(1.15);
  transform-origin: top left;
}
.compare-layout.isOnLeft .compare-default {
  opacity: 1;
  transform: scale(1.15);
  transform-origin: top right;
}
.compare-layout .compare-images {
  width: 2000px;
  max-width: 100%;
  margin: auto;
}
.compare-layout .compare-images img {
  width: 100%;
}
.compare-layout .twentytwenty-handle {
  opacity: 0;
}
@media screen and (max-width: 750px) {
  .compare-layout {
    padding-top: 20vw;
  }
  .compare-layout .box-compare {
    max-width: calc(50vw - (var(--gutter) * 2));
  }
  .compare-layout .compare-bacta {
    left: 1em;
  }
  .compare-layout .compare-default {
    right: 1em;
  }
  .compare-layout .box-compare {
    top: 10vw;
  }
}
@media screen and (max-width: 500px) {
  .compare-layout {
    padding-top: 40vw;
  }
  .compare-layout .box-compare {
    max-width: calc(50vw - (var(--gutter) * 1.5));
    font-size: 0.8em;
  }
  .compare-layout.isOnRight .compare-bacta {
    transform: scale(1.1);
  }
  .compare-layout.isOnLeft .compare-default {
    transform: scale(1.1);
  }
  .compare-layout .box-compare {
    top: 10vw;
  }
}
@media screen and (max-width: 400px) {
  .compare-layout {
    padding-top: 50vw;
  }
}


.home-apps {
  padding: calc(var(--gutter) * 2) 0;
}
.sliders-apps {
  position: relative;
  margin: var(--gutter) auto;
}
.sliders-apps::after {
  content: '';
  display: block;
  padding-bottom: 25em;
}
.sliders-apps .swiper {
  height: 100%;
}
.slider-apps-images {
  mask-image: linear-gradient(to right, transparent 0, white 10%, white 90%, transparent 100%);
}
.slider-apps-images .swiper-wrapper {
  transition: 0.85s cubic-bezier(.47,1.24,.41,1) 0.05s;
}
.box-app {
  position: relative;
  width: 25em;
  max-width: 100%;
  margin: auto;
}
.box-app::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}
.box-app img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sliders-apps-nav {
  position: absolute;
  top: calc(100% + 1em);
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.ps-swiper-nav > * {
  --s: 1.8em;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  margin: calc(var(--s) * 0.25);
  background-color: var(--grey);
}
.ps-swiper-nav > *.active {
  background-color: var(--textColor);
}
.ps-swiper-nav.vertical > * {
  display: block;
}
.slider-apps-images .box-app {
  transform: scale(0.9);
}
@media screen and (max-width: 500px) {
  .sliders-apps {
    max-width: 80vw;
  }
  .slider-apps-images .box-app {
    transform: scale(0.8);
  }
}

.home-partners {
  padding: calc(var(--gutter) * 1.5) 0;
}
.slider-partners {
  mask-image: linear-gradient(to right, transparent 0, white 10%, white 90%, transparent 100%);
}
.slider-partners > .swiper-wrapper {
  transition-timing-function : linear;
}
.slider-partners .swiper-slide {
  text-align: center;
  max-width: fit-content;
}
.box-partner {
  width: 10.4em;
  height: 5.2em;
  padding: 0.6em;
  border-radius: 1em;
  background-color: var(--grey);
}
.box-partner img {
  height: 4em;
  width: 100%;
  object-fit: contain;
  object-position: center;
  filter: brightness(0);
}


.home-techno {
  padding: var(--gutter) 0;
}
.home-techno .grid {
  --g: 2em;
}
.techno-content {
  display: flex;
  flex-wrap: wrap;
}
.techno-nav-content {
  flex: 0 0 100%;
  padding-top: 4em;
  margin-top: auto;
  margin-bottom: 0;
}
.techno-nav-content > * {
  margin-top: 1em;
  cursor: pointer;
  transition: 0.3s;
}
.techno-nav-content > *:not(.active) {
  opacity: 0.5;
}
.sliders-techno {
  align-self: start;
  position: sticky;
  top: 0;
}
.swiper-techno,
.swiper-techno-content {
  height: 80vh;
}
.swiper-techno {
  mask-image: linear-gradient(to top, transparent 0, white 10%, white 90%, transparent 100%);
  overflow: visible;
}
.slider-techno-content {
  position: absolute;
  bottom: var(--g);
  left: var(--g);
  width: calc(100% - (var(--g) * 2));
  height: calc(100% - (var(--g) * 2));
}
.box-techno {
  position: relative;
  height: 100%;
}
.box-techno > .ill {
  z-index: 1;
}
.box-techno > .ill video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: clip;
}
.box-techno > .content {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 10%;
  width: 80%;
}
.swiper-techno-nav {
  z-index: 3;
  position: absolute;
  left: 0;
  bottom: var(--g);
  width: var(--s);
}
@media screen and (max-width: 700px) {
  .home-techno > .wrapper > .grid > * {
    flex: 0 0 100%;
  }
  .sliders-techno {
    margin-top: calc(var(--g) * -2);
  }
  .techno-nav-content > *:not(.active) {
    display: none;
  }
  .techno-nav-content > * > .ps-content.aLeft {
    text-align: center;
  }
  .techno-content > .ps-content.aLeft {
    text-align: center;
  }
  .techno-nav-content {
    padding-top: 2em;
  }
  .techno-content { z-index: 3; }
  .sliders-techno {
    z-index: 2;
    position: relative;
    margin-top: -18vw;
  }
}
@media screen and (max-width: 500px) {
  .swiper-techno,
  .swiper-techno-content {
    height: 110vw;
  }
  .swiper-techno {
    top: -10vw;
  }
}



.home-vision .grid {
  --g: 3em;
  width: calc(100% + var(--g));
  margin-left: 0;
}
.home-vision .grid > .ill {
  position: relative;
}
.home-vision .grid > .ill .overlay {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6em;
  height: auto;
  transform: translate(-50%, -50%);
}
.home-vision .grid > .ill .overlay svg {
  display: block;
  width: 100%;
  height: auto;
}
.home-vision .grid > .content {
  background-color: #D9D9D9;
}
.vision-ill {
  position: relative;
  width: 20em;
  margin: 2em auto;
  mask-image: url(../../img/vision-mask.png);
  mask-size: 20em;
  mask-repeat: no-repeat;
  mask-position: center;
}
.vision-ill::after {
  content: '';
  display: block;
  padding-bottom: 150%;
}
.vision-mask {
  display: none;
}
@media screen and (max-width: 1300px) {
  .home-vision .grid {
    --g: 2.5em;
  }
}
@media screen and (max-width: 700px) {
  .home-vision .grid {
    width: 100%;
  }
  .home-vision .grid > * {
    flex: 0 0 100%;
  }
  .home-vision .grid > .ill {
    height: 100vw;
  }
  .vision-ill {
    display: none;
  }
}


.home-intro {
  position: relative;
  margin-top: calc((var(--headerHeight) * -1) - 1px);
  min-height: 110vh;
  min-height: 110svh;
  padding: calc(var(--gutter) * 4) 0;
}
.home-intro > .video {
  z-index: 1;
  overflow: clip;
}
.home-intro > .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-intro > .content {
  z-index: 2;
  position: relative;
  mix-blend-mode: difference;
  flex: 0 0 100%;
}
.home-intro .reveal-cascade-children > * {
  opacity: 0;
}
.home-intro.reveal .reveal-cascade-children > * {
  opacity: 1;
}
.home-intro .content .big-logo img {
  width: 26em;
  height: auto;
  opacity: 0;
  transition: 0.5s;
}
.home-intro.reveal .big-logo img {
  opacity: 1;
}
.home-intro .content .title.special {
  color: #ADFFBF;
}
.home-intro .content .separator.special {
  background: linear-gradient(to left, #000000, #DCFFC8);
}
@media screen and (max-width: 700px) {
  .home-intro .content .big-logo {
    max-width: 40vw;
    margin: auto;
  }
}


.home-news {
  padding: calc(var(--gutter) * 1.25) 0;
}
.home-news .swiper-wrapper {
}
.home-news .swiper-slide {
  height: auto;
}
.swiper-news-arr {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  margin: 1.5em 0.5em;
  background-image: url(../../img/rarr.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.swiper-news-arr:hover {
  filter: invert(82%) sepia(8%) saturate(4283%) hue-rotate(71deg) brightness(89%) contrast(73%);
  opacity: 1;
}
.swiper-news-arr.swiper-button-disabled {
  opacity: 0.1;
}
.swiper-news-arr.swiper-news-prev {
  background-image: url(../../img/larr.svg);
}
.home-news .box-news {
  height: 100%;
}
.box-news {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--lightGrey);
  padding: 1.5em 1.125em 0.5em 1.125em;
  border-radius: var(--borderRadius);
  text-align: left;
}
/*.box-news > * {
  flex: 0 0 100%;
}*/
.box-news > .action {
  margin-top: auto;
  margin-bottom: 0;
}
.box-news .btn-plus:not(:hover) {
  background-color: var(--lightGrey) !important;
}


.split > * {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}