@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

#BlocvideoIntro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: white;
  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("") 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;
  }



body {
	user-select: none;
	-moz-user-select: none;
	cursor: none;
	overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
	margin: 0;
	scroll-behavior: smooth;
	background-color: white;
	 
	
}
* {
	 margin: 0;
	 padding: 0;
}

 html, body {
	 display: block;
	 width: 100%;
	 height: 100%;
	 position: relative;
	 overflow: hidden;
}


body {
	 font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.rotateAnim {
  animation: rotate 80s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotateAnim2 {
  animation: rotate2 100s linear infinite;
}

@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.disNone{
	display: none;
}

.btBackText {
  position: absolute;
  opacity: 0;
  color: white;
  font-size: 2vw;
  pointer-events: none;
font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  --underlineWidth: 0%;
	transition: all 0.3s ease;
}

.btBackText::after {
  content: '';
  display: block;
  height: 3px;
  width: var(--underlineWidth);
  background: white;
  margin-top: 5px;
  transition: width 0.4s ease;
  transform-origin: left;
}


.btTeamText {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  color: black;
  font-size: 2vw;
  pointer-events: none;
font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  --underlineWidth: 0%;
}

.btTeamText::after {
  content: '';
  display: block;
  height: 3px;
  width: var(--underlineWidth);
  background: #008a7f;
  margin-top: 5px;
  transition: width 0.4s ease;
  transform-origin: left;
}
.btGalleryText {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  color: black;
  font-size: 2vw;
  pointer-events: none;
font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  --underlineWidth: 0%;
}

.btGalleryText::after {
  content: '';
  display: block;
  height: 3px;
  width: var(--underlineWidth);
  background: #b41f1f;
  margin-top: 5px;
  transition: width 0.4s ease;
  transform-origin: left;
}
.btAboutTxt {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  color: black;
  font-size: 2vw;
	font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  pointer-events: none; 
--underlineWidth: 0%;
}
.btAboutTxt::after {
  content: '';
  display: block;
  height: 3px;
  width: var(--underlineWidth);
  background: rgba(63, 36, 209, 1);
  margin-top: 5px;
  transition: width 0.4s ease;
  transform-origin: left;
}
.btContactText {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%)translateX(10px);
  opacity: 0;
  color: black;
font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2vw;
  pointer-events: none;
	 --underlineWidth: 0%;
}

.btContactText::after {
  content: '';
  display: block;
  height: 3px;
  width: var(--underlineWidth);
  background: #e48b26;
  margin-top: 5px;
  transform-origin: left;
  transition: width 0.4s ease;
}
#pageTeam{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: transparent;
	opacity: 0;
	z-index: -1;
	font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.slider--teams ul li{
	list-style-type: none;
}
 .slider--teams {
	 
	 position: relative;
	 top: 50%;
	 left: 50%;
	 max-width: 750px;
	 opacity: 0;
	 transform: translate(-50%, -50%) scale(2);
}
 .slider--teams .slider--teams__team {
	 position: relative;
	 overflow: hidden;
}
 #list {
	 position: relative;
	 backface-visibility: hidden;
	 transform: translate3d(0, 0, 0);
}
 #list li {
	 position: relative;
	 display: inline-block;
	 float: left;
	 text-align: center;
}
 #list li figure {
	 cursor: none;
	 margin: 0em;
	 opacity: 0.5;
	 backface-visibility: hidden;
	 transition: transform 450ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 450ms ease-in-out;
	 transform: scale(0.5) translateZ(0px);
}
 #list li figure:hover {
	 opacity: 0.8;
	 transform: scale(0.6) translateZ(0px);
}
 #list li figure:active {
	 opacity: 1;
	 transform: scale(0.7) translateZ(0px);
}
 #list li figure > div {
	 border-radius: 5px;
	 position: relative;
	 margin: 4rem auto;
	 width: 120px;
	 height: 120px;
	 overflow: hidden;
	 transform: rotate(45deg) translateZ(0px);
}
 #list li figure > div > div {
	 background: url("../img/Team2.jpg") no-repeat;
	 background-size: cover;
	 background-position: 0px 0px;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 width: 170px;
	 height: 170px;
	 transform: rotate(-45deg) translate(0%, -70%);
}
 #list li figure figcaption h2 {
	 color: white;
	 font-size: 1.3rem;
	 font-weight: 600;
}
figcaption{
	line-height: 1.3
}
 #list li figure figcaption p {
	 color: white;
	 font-size: 0.7rem;
	 font-weight: 300;
}
 #list li:nth-child(1) figure > div > div {
	 background-position: 0px 0px !important;
}
 #list li:nth-child(2) figure > div > div {
	 background-position: 0px 20% !important;
}
 #list li:nth-child(3) figure > div > div {
	 background-position: 0px 40% !important;
}
 #list li:nth-child(4) figure > div > div {
	 background-position: 0px 60% !important;
}
 #list li:nth-child(5) figure > div > div {
	 background-position: 0px 80% !important;
}
 #list li:nth-child(6) figure > div > div {
	 background-position: 0px 100% !important;
}
 .active {
	 opacity: 1 !important;
	 transform: scale(1) translateZ(0px) !important;
}
 .cf:before, .cf:after {
	 content: " ";
	 display: table;
}
 .cf:after {
	 clear: both;
}
 .cf {
	 *zoom: 1;
}
#pageGallery{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: -1;
	font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
	color: white;
	background-color: #00897f;
}

.cloneable {
  padding: var(--container-padding);
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  font-size: 1.1vw;
}

.overlay {
  z-index: 2;
  background-image: linear-gradient(90deg, var(--color-neutral-900) 85%, #0000);
  justify-content: flex-start;
  align-items: center;
  width: 37.5em;
  height: 100%;
  padding-left: 2em;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.overlay-inner {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 28.125em;
  display: flex;
}

.overlay-count-row {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  font-family: PP Neue Corp, Impact, sans-serif;
  font-size: 5.625em;
  font-weight: 700;
  display: flex;
}

.count-column {
  height: 1em;
  overflow: hidden;
}

.count-heading {
  width: 2ch;
  font-size: 1em;
  line-height: 1;
  margin: 0px;
}

.count-row-divider {
  background-color: white;
  width: 2px;
  height: .75em;
  transform: rotate(15deg);
}

.overlay-nav-row {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  display: flex;
}

.button {
  background-color: #0000;
  color: #fff;
  border: 1px solid #fff3;
  border-radius: .4em;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  padding: 0;
  display: flex;
  position: relative;
}

.button-arrow {
  flex: none;
  width: 1em;
  height: .75em;
}

.button-arrow.next {
  transform: rotate(180deg);
}

.button-overlay {
  z-index: 2;
  position: absolute;
  inset: -1px;
}

.overlay-corner {
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-top-left-radius: .4em;
  width: 1em;
  height: 1em;
}

.overlay-corner.top-right {
  position: absolute;
  inset: 0% 0% auto auto;
  transform: rotate(90deg);
}

.overlay-corner.bottom-left {
  position: absolute;
  inset: auto auto 0% 0%;
  transform: rotate(-90deg);
}

.overlay-corner.bottom-right {
  position: absolute;
  inset: auto 0% 0% auto;
  transform: rotate(180deg);
}

.button, .button-overlay{ transition: transform 0.475s var(--cubic-default), opacity 0.475s var(--cubic-default)}

.button:hover .button-overlay{ transform: scale(1.4); }
.overlay-nav-row:hover:has(.button:hover) .button{ opacity: 0.4; }
.button:hover{ transform: scale(0.85); opacity: 1 !important; }

.main {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.slider-wrap {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slider-list {
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.slider-slide {
  flex: none;
  width: 42.5em;
  height: 28em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  transition: opacity .4s;
  position: relative;
}

[data-slider="slide"]{ opacity: 0.2; }
[data-slider="slide"].active { opacity: 1; } 
[data-slider="slide"].active .slide-caption{ transition-delay:0.3s;} 

.slide-inner {
  border-radius: .5em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

img{
  width:100%;
  height:100;
  object-fit: cover;
}

.slide-caption {
  z-index: 2;
  grid-column-gap: .4em;
  grid-row-gap: .4em;
  background-color: white;
  color: #00897f;
  white-space: nowrap;
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: .4em .75em .4em .5em;
  display: flex;
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  overflow: hidden;
}

.caption-dot {
  background-color: #00897f;
  border-radius: 10em;
  flex: none;
  width: .5em;
  height: .5em;
}

.caption {
  font-size: .75em;
  font-family: arial;
  margin: 0px;
}

.slide-caption{ transition: transform 0.525s var(--cubic-default), opacity 0.525s var(--cubic-default); transition-delay:0s; }

html:not(.wf-design-mode) .slide-caption{ opacity: 0; transform:translate(-25%, 0px) }
html:not(.wf-design-mode) [data-slider="slide"].active .slide-caption{ opacity: 1; transform:translate(0%, 0px) }
[data-slider="list"] {
  display: flex;
  overflow: hidden;
  position: relative;
}

[data-slider="slide"] {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}



#pageContact{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: transparent;
	opacity: 0;
	z-index: -1;
	font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
	color: white;
	
}
#blocTextContact{
	position: absolute;
	width: 35%;
	height: 70%;
	left: 15%;
	top: 50%;
	transform: translateY(-50%);
}
#blocTextContact h1{
	font-size: 8vw;
	font-weight: 600;
	line-height: 0.95em;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
#blocTextContact h1 span{
	font-style: italic;
}
#blocTextContact p{
	margin-top: 10em;
	line-height: 1.2em;
	letter-spacing: 0.1em;
	font-size: 1.4em;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
  #blocTextContact p{
	margin-top: 14em;
}
}
#blocTextContact p span{
	font-weight: 600;
}
* {
  box-sizing: border-box;
}
 .contact-form {
      position: absolute;
      top: 50%;
      right: 15%;
      transform: translateY(-50%) scale(1.2);
      width: 90%;
      max-width: 400px;
	 
    }
@media screen and (max-width: 768px) {
  .contact-form {
    transform: translateY(-56%) translateX(8%) scale(0.7)!important;
  }
}

    input,
    textarea,
    button {
      width: 100%;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid white;
      background: transparent;
      color: white;
      font-size: 16px;
      outline: none;
      resize: none;
		transition: background 0.3s;
    }

    input::placeholder,
    textarea::placeholder {
      color: white;
      opacity: 0.8;
    }

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

    button:hover {
      background: rgba(255, 255, 255, 0.1);
    }
 input:hover {
      background: rgba(255, 255, 255, 0.1);
    }
textarea:hover {
      background: rgba(255, 255, 255, 0.1);
    }

#pageAbout{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: transparent;
	opacity: 0;
	z-index: -1;
	
}
#Rond_About{
	position: absolute;
	top: -23%;
	right: -23%;
	width: 60%;
	height: 60%;
	fill: rgba(60, 0, 209, 1);
	z-index: -1!important;
}
#triangle_Team{
	position: absolute;
	bottom: 0%;
	left:24%;
	opacity: 0.15;
	width: 1700px;
	height: 1700px;
	fill: #d64e49;
	z-index: -1;
	transform-origin: center;
}
#carre_Contact{
	position: absolute;
	top: -10%;
	left:-10%;
	opacity: 0.3;
	width: 1000px;
	height: 1000px;
	fill: #eea91b;
	z-index: -1;
	transform-origin: center;
}
.cls-111{
	z-index: -1;
}
.leftTextWrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center; 
  justify-content: center;
}
nav {
	pointer-events: none;
}
.leftTextBlock {
	position: absolute;
	bottom: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100vw;
  max-width: 75%;
  color: white;
  font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 15px;
  gap: 5em;
}

.col {
  display: flex;
  flex-direction: column;
}

.col-left {
  width: 250px;
}
.socTxt{
	margin-top: 30px;
	font-size: 30px;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: rgba(249, 211, 0, 1);
}
.prodTxt{
	font-size: 25px;
	letter-spacing: 0.1em;
}
.col-right {
  align-items: flex-start;
  gap: 0px;
  display: flex;
  flex-direction: column;
}
.col-right p{
	font-size: 1vw;
	line-height: 1.2em;
	letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .col-right p{
	font-size: 2.1vw;
}
	.cursor, .cursor-f{
		display: none;
	}
}
.rightUnderline3 {
  width: 8.3em;
  height: 1px;
  background: white;
}
.rightUnderline2 {
  width: 6.3em;
  height: 1px;
  background: white;
}
.rightUnderline1 {
  width: 10.9em;
  height: 1px;
  background: white;
}
.bald{
	font-weight: 600;
}
.yellowLine3 {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: left;
    height: 2px;
    width: 73vw;
    background-color: white;
    z-index: 0;
    opacity: 0;
}


.yellowLine {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: right;
    height: 2px;
    width: 80vw;
    background-color: rgba(249, 211, 0, 1);
    z-index: 0;
    opacity: 0;
}
.carousel {
	position: absolute;
	left: 10%;
	top: -28%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
	
	
}

.carousel__container {
  font-family: "Saira Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  height: 170px;
}

.carousel__container p {
  font-size: 50px;
  margin: 50px 10px;
 
  color: white;
  position: absolute;
  padding: 0;
  vertical-align: middle;
}

.carousel__content {
  width: 384px;
  margin: 0;
  padding: 0;
  position: relative;
}

.carousel__content li {
  font-size: 50px;
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  opacity: 0;
  color: white;
  list-style: none;
}

.carousel_active li {
  margin-left: 150px;
  position: absolute;
  opacity: 0;
  transition: 1s;
}

.carousel_active li.prevprev_text {
  top: -50px;
}

.carousel_active li.prev_text {
  top: 0;
  opacity: 0.5;
  transition: 1s;
}

.carousel_active li.current_text {
  top: 50px;
  opacity: 1;
  transition: 1s;
}

.carousel_active li.next_text {
  top: 100px;
  opacity: 0.5;
  transition: 1s;
}

.carousel_active li.nextnext_text {
  top: 150px;
}

@media (min-width: 992px) {
  .carousel__container {
    height: 340px;
  }
  .carousel__container p {
    font-size: 100px;
    margin: 100px 20px;
  }
  .carousel__content {
    width: 768px;
  }
  .carousel__content li {
    font-size: 100px;
  }
  .carousel_active li {
    margin-left: 300px;
  }

  .carousel_active li.prevprev_text {
    top: -100px;
  }
  .carousel_active li.prev_text {
    top: 0;
  }
  .carousel_active li.current_text {
    top: 100px;
  }
  .carousel_active li.next_text {
    top: 200px;
  }
  .carousel_active li.nextnext_text {
    top: 300px;
  }
}
#pageHome{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: transparent;
}

#parallax {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
	mix-blend-mode: darken;
	opacity: 0.3;
  
}
.animHome{
	opacity: 0;
}
#parallax-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
  width: 100%;
  
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.parallax-layer {
    position: absolute;
}
#parallax .bg1 {
	position: absolute;
    width: 55%;
    height: 55%;
  left: 0%;
	top: -10%;
    z-index: 3;
  
  -webkit-transform:translateZ(90px);
  -webkit-transition: all 0.2s;
  transform:translateZ(90px);
  transition: all 0.2s;
  
}
#parallax .bg4 {
	position: absolute;
    width: 20%;
    height: 20%;
  right: 20%;
  top: 17%;
    z-index: 4;
  
  -webkit-transform:translateZ(250px);
  -webkit-transition: all 0.2s;
  transform:translateZ(250px);
  transition: all 0.2s;
}
#parallax .bg6 {
	position: absolute;
    width: 75%;
    height: 75%;
  right: 4%;
	bottom: -20%;
  
  -webkit-transform:translateZ(0px) rotate(270deg);
  -webkit-transition: all 0.2s;
  transform:translateZ(0px)rotate(270deg);
  transition: all 0.2s;
	
}



 .shapes {
	 position: absolute;
	 height: 100vh;
	 width: 100vw;
	 background: rgba(63, 36, 209, 1);
	 overflow: hidden;
	 top: 0;
	 left: 0;
	 
}
 .shapee {
	 will-change: transform;
	 position: absolute;
	 border-radius: 50%;
}
 .shapee.shape-1 {
	 background: #b41f1f;
	 width: 650px;
	 height: 650px;
	 margin: -325px 0 0 -325px;
}
 .shapee.shape-2 {
	 background: rgba(249, 211, 0, 1);
	 width: 440px;
	 height: 440px;
	 margin: -220px 0 0 -220px;
}
 .shapee.shape-3 {
	 background: rgba(63, 36, 209, 1);
	 width: 270px;
	 height: 270px;
	 margin: -135px 0 0 -135px;
}
 .content {
	 top: 0;
	 left: 0;
	 position: absolute;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 width: 100vw;
	 background: #fff;
	 mix-blend-mode: screen;
	 flex-direction: column;
	 line-height: 6em
}
 .content h1 {
	 color: #000;
	 margin: 0;
	 text-align: center;
	 font-size: 150px;
	  font-family: "Saira Condensed", sans-serif;
  font-weight: 600;
  font-style: normal;
	 line-height: 0.8em;
}
 .content p {
	 color: #000;
	 margin: 0;
	 text-align: center;
	 font-size: 30px;
	  font-family: "Saira Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}
 ::selection {
	 color: #fff;
	 background: #2128bd;
}


@media screen and (max-width: 768px) {
   .content h1 {
    font-size: 100px;;
  }
	 .content p {
    font-size: 20px;;
  }
}







 nav, main {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
}

.handle2 {
  opacity: 0; 
	transition: opacity 1s ease-in-out;
}
 .handle, .back-handle {
	 position: absolute;
	 display: inline-block;
	 z-index: 1000;
}
 .handle[data-permalink="back"][data-position="top"] path, .back-handle[data-permalink="back"][data-position="top"] path, .handle[data-permalink="back"][data-position="right"] path, .back-handle[data-permalink="back"][data-position="right"] path, .handle[data-permalink="back"][data-position="bottom"] path, .back-handle[data-permalink="back"][data-position="bottom"] path, .handle[data-permalink="back"][data-position="left"] path, .back-handle[data-permalink="back"][data-position="left"] path {
	 fill: #fff;
}
 .handle[data-position="top"], .back-handle[data-position="top"] {
	 left: 50%;
	 transform: translate(-50%, 0) scale(1);
}
 .handle[data-position="top"] path, .back-handle[data-position="top"] path {
	 fill: #b41f1f;
}
 .handle[data-position="right"], .back-handle[data-position="right"] {
	 top: 50%;
	 left: 100%;
	 transform: translate(-100%, -50%) scale(1) rotate(90deg);
}
 .handle[data-position="right"] path, .back-handle[data-position="right"] path {
	 fill: #e48b26;
}
 .handle[data-position="bottom"], .back-handle[data-position="bottom"] {
	 top: 100%;
	 left: 50%;
	 transform: translate(-50%, -100%) scale(1) rotate(180deg);
}
 .handle[data-position="bottom"] path, .back-handle[data-position="bottom"] path {
	 fill: #008a7f;
}
 .handle[data-position="left"], .back-handle[data-position="left"] {
	 top: 50%;
	 left: 0;
	 transform: translate(0, -50%) scale(1) rotate(-90deg);
}
 .handle[data-position="left"] path, .back-handle[data-position="left"] path {
	 fill: rgba(63, 36, 209, 1);
}
 .handle.out, .back-handle.out {
	 pointer-events: none;
}
 .handle.out path, .back-handle.out path {
	 pointer-events: none;
}
 .handle path, .back-handle path {
	 cursor: none;
	 pointer-events: all;
}
 .page-transition {
	 position: absolute;
}
 .page-transition svg {
	 overflow: visible;
}
 

.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;
}