@charset "UTF-8";
/* Directives de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* le md suivi du class à moi c'est pas généré par standalone cli alors que ça fonctionnait avec webpack encore.
	ducoup je vais l'ajouter ici
*/
@media (min-width: 768px) {
  .md\:shadow-block {
    box-shadow: 0 0 19px -2px rgba(0, 0, 0, 0.41);
  }
}
@layer components {
  footer a:visited {
    color: #ffffff;
  }
  footer a:hover {
    color: #edd472;
  }
  h3 {
    font-size: 22px;
    padding: 10px;
  }
  .title-block {
    font-size: 29.7px;
    line-height: 35px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
  }
  /* lors du scroll l'header va descendre */
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
  }
  /* pour éviter un mouvement brutal du header lors du scroll il faut mettre un padding a la hauteur du header */
  .fixed-header + main {
    padding-top: 95.3px;
  }
  @media screen and (max-width: 768px) {
    .fixed-header {
      position: relative;
    }
    /* version mobile pour éviter un mouvement brutal du header lors du scroll il faut mettre un padding a la hauteur du header */
    .fixed-header + main {
      padding-top: 0px;
    }
  }
  .shadow-actu, .shadow-block {
    -webkit-box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
  }
  .logoSlider {
    width: 70%;
    display: inline-block;
    padding: 80px 5px 20px 5px;
  }
  .logoSliderMobile {
    width: 150px;
    display: inline-block;
    padding: 20px 5px 10px 5px;
  }
  .gradient-white-top-left {
    background: transparent;
    background: linear-gradient(to bottom right, rgba(88, 92, 104, 0.9) 0%, transparent 60%);
  }
  .cercleGradient1 {
    background: linear-gradient(rgba(255, 255, 255, 0.59), rgba(255, 255, 255, 0.59)) padding-box, linear-gradient(90deg, rgba(100, 154, 127, 0.59), rgba(255, 255, 255, 0.59), rgba(255, 255, 255, 0.59), rgba(100, 154, 127, 0.59)) border-box;
    border: 13px solid transparent;
    border-radius: 50%;
    width: 550px;
    height: 550px;
    display: inline-block;
  }
  .cercleGradient1Mobile {
    background: linear-gradient(rgba(255, 255, 255, 0.59), rgba(255, 255, 255, 0.59)) padding-box, linear-gradient(90deg, rgba(100, 154, 127, 0.59), rgba(255, 255, 255, 0.59), rgba(255, 255, 255, 0.59), rgba(100, 154, 127, 0.59)) border-box;
    border: 7px solid transparent;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    display: inline-block;
  }
  .triangle-right {
    background: #649a7f;
    background: linear-gradient(to bottom right, #649a7f 50%, #FFFFFF 50%);
    width: 48px;
  }
  .triangle-left {
    background: #649a7f;
    background: linear-gradient(to bottom right, #ffffff 50%, #649a7f 50%);
    width: 48px;
  }
  .title-actualite {
    width: calc(50% - 19px);
    @apply text-white p-3 bg-[#649a7f];
  }
  .date-actualite {
    width: calc(50% - 19px);
    color: #649a7f;
  }
  .menu-text:after {
    transition: all ease-in-out 0.2s;
    background: none repeat scroll 0 0 #649a7f;
    content: "";
    display: block;
    height: 6px;
    width: 0;
  }
  .menu-text:hover:after {
    width: 100%;
    padding-right: 35px;
  }
}
/****** réseaux sociaux ******/
.wrapper-sociaux {
  display: inline-flex;
  list-style: none;
}

.wrapper-sociaux .icon-sociaux {
  position: relative;
  background: #ffffff;
  color: #000000;
  padding: 15px;
  margin: 10px 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper-sociaux .tooltip-sociaux {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: transparent;
  border-bottom: 2px solid #edd472;
  color: #ffffff;
  padding: 5px 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper-sociaux .tooltip-sociaux::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper-sociaux .icon-sociaux:hover .tooltip-sociaux {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper-sociaux .icon-sociaux:hover span,
.wrapper-sociaux .icon-sociaux:hover .tooltip-sociaux {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper-sociaux .icon-sociaux:hover {
  background: #edd472;
  color: #ffffff;
}

/****** fin réseaux sociaux *****/
@media screen and (max-width: 768px) {
  h2 {
    font-size: 25px;
    line-height: 30px;
  }
  h3 {
    font-size: 20px;
    padding: 10px;
  }
  .title-block {
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
  }
  /**** 3D House ****/
  .house {
    scale: 1.7;
  }
  /**** fin 3D House ***/
}
@layer components {
  html {
    scroll-behavior: smooth;
  }
  img {
    @apply inline-block;
  }
  .color-text-yellow {
    color: #edd472;
  }
  .site .button {
    background: #191919;
    border-radius: 4px;
    color: #ffffff;
    padding: 5px 10px;
    text-transform: uppercase;
    display: inline-block;
    border: solid 1px #191919;
  }
  .site .navBlur {
    backdrop-filter: blur(3px);
    background-color: black;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  }
  .site .btnNavBlur {
    text-shadow: #000000 1px 1px 2px, #868686 -1px -1px 2px, #868686 -1px 1px 2px, #868686 1px -1px 2px;
  }
  .site .navBlur ul li a {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
    /*transition*/
    -webkit-transition: width 0.3s, right 0.3s;
    -moz-transition: width 0.3s, right 0.3s;
    -o-transition: width 0.3s, right 0.3s;
    transition: width 0.3s, right 0.3s;
  }
  /*** navigation mobile**/
  #navMobile-header {
    display: none;
  }
  #navMobile-header ul#list-menu-mobile {
    /*display:none;*/
    overflow: hidden;
    max-height: 0;
    -webkit-transition: max-height 1s ease-out;
    -moz-transition: max-height 1s ease-out;
    -ms-transition: max-height 1s ease-out;
    transition: max-height 1s ease-out;
    text-align: center;
  }
  #navMobile-header ul#list-menu-mobile li {
    display: block;
  }
  #navMobile-header ul#list-menu-mobile li:first-child {
    padding-top: 10px;
  }
  #navMobile-header ul#list-menu-mobile li:last-child {
    padding-bottom: 10px;
  }
  #navMobile-header ul#list-menu-mobile li a {
    display: block;
    padding: 10px 10px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 16px;
    line-height: 42px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    background: #1e1f21;
    cursor: pointer;
    transition: all 0.5s ease-in;
    position: relative;
  }
  #navMobile-header ul#list-menu-mobile li a:before,
  #navMobile-header ul#list-menu-mobile li a:after {
    position: absolute;
    content: "";
    /*right: 0;*/
    left: 50%;
    bottom: 0;
    background: #edd472;
    box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.9), -4px -4px 5px 0px rgba(255, 255, 255, 0.9), 7px 7px 20px 0px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease-in;
  }
  #navMobile-header ul#list-menu-mobile li a:before {
    height: 0%;
    /*width: 2px;*/
    width: 0px;
  }
  #navMobile-header ul#list-menu-mobile li a:after {
    width: 0%;
    height: 3px;
  }
  #navMobile-header ul#list-menu-mobile li a:hover {
    color: #edd472;
    /*background: transparent;*/
    background: #ffffff;
    box-shadow: inset 2px 2px 2px 0 hsla(0, 0%, 100%, 0.5), 7px 7px 20px 0 rgba(0, 0, 0, 0.1), 0px 5px 5px 0 rgba(0, 0, 0, 0.1);
  }
  #navMobile-header ul#list-menu-mobile li a:hover:before {
    height: 100%;
    box-shadow: none;
  }
  #navMobile-header ul#list-menu-mobile li a:hover:after {
    width: 100%;
    left: 0;
  }
  .navMobile {
    background: #191919;
    text-align: right;
  }
  .navMobile .burger {
    display: inline-flex;
    border-radius: 5px;
    background: #191919;
    /*box-shadow: rgb(136 165 191 / 48%) 1px 1px 3px 0px, rgb(255 255 255 / 80%) -1px -1px 3px 0px;*/
    /*box-shadow: inset 2px 2px 2px 0 hsla(0, 0%, 100%, .5), 0 5px 5px 0 rgba(0, 0, 0, .1), 5px 5px 5px 0 rgba(0, 0, 0, .1);*/
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding: 3px;
    transition: all 0.5s ease;
    margin: 5px;
  }
  .navMobile .burger.active-menu-mobile:hover {
    background: #1e1f21;
  }
  .navMobile .burger:hover {
    background: #ffffff;
  }
  .navMobile .burger-strip {
    transition: all 0.5s ease;
  }
  .navMobile .strip div {
    height: 3px;
    border-radius: 2px;
    background: #ffffff;
    margin: 7px;
    transition: all 0.55s cubic-bezier(0.075, 0.82, 0.165, 1);
    width: 30px;
  }
  .navMobile .burger:hover .strip div {
    background: #000000;
  }
  .navMobile .burger.active-menu-mobile .strip div {
    background: white;
  }
  /* BURGER 1 */
  .navMobile .burger-strip div:first-child {
    width: 16px;
  }
  .navMobile .burger-strip div:last-child {
    width: 28px;
  }
  .navMobile .burger:hover .burger-strip div:first-child {
    transform: rotate(45deg) translateY(1px) translateX(5px);
  }
  .navMobile .burger:hover .burger-strip div:nth-child(2) {
    transform: rotate(-45deg);
  }
  .navMobile .burger:hover .burger-strip div:last-child {
    transform: rotate(45deg) translateY(-13px) translateX(2px);
  }
  /* BURGER 2 */
  .navMobile .burger.active-menu-mobile .burger-strip-2 div:first-child {
    transform: translateY(9.75px) rotate(45deg);
  }
  .navMobile .burger.active-menu-mobile .burger-strip-2 div:nth-child(2) {
    opacity: 0;
  }
  .navMobile .burger.active-menu-mobile .burger-strip-2 div:last-child {
    transform: translateY(-9.75px) rotate(-45deg);
  }
  /* BURGER 3 */
  .navMobile .burger-strip-3 div {
    margin: 10px auto;
  }
  .navMobile .burger:hover .burger-strip-3 div:first-child {
    transform: translateY(9.75px);
    width: 25px;
  }
  .navMobile .burger:hover .burger-strip-3 div:nth-child(2) {
    opacity: 0;
  }
  .navMobile .burger:hover .burger-strip-3 div:last-child {
    transform: translateY(-9.75px);
    width: 25px;
  }
  /* BURGER 4 */
  .navMobile .burger:hover .burger-strip-4 {
    transform: scale(0.85);
  }
  .navMobile .burger:hover .burger-strip-4 div:first-child {
    width: 20px;
    transform: translateY(8px) rotate(-30deg);
  }
  .navMobile .burger:hover .burger-strip-4 div:nth-child(2) {
    width: 38px;
  }
  .navMobile .burger:hover .burger-strip-4 div:last-child {
    width: 20px;
    transform: translateY(-8px) rotate(30deg);
  }
  /* BURGER 5 */
  .navMobile .burger-strip-5 div {
    /* margin: 10px auto; */
    transition: all 0.65s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .navMobile .burger.active-menu-mobile .burger-strip-5 div:first-child {
    transform: translateY(9.75px) rotate(0deg);
  }
  .navMobile .burger.active-menu-mobile .burger-strip-5 div:nth-child(2) {
    opacity: 0;
  }
  .navMobile .burger.active-menu-mobile .burger-strip-5 div:last-child {
    transform: translateY(-9.75px) rotate(90deg);
  }
  .navMobile .burger.active-menu-mobile .burger-strip-5 {
    transform: scale(0.9) rotate(45deg);
    transition: all 0.25s ease 0.05s;
  }
  /*** fin navigation mobile ***/
  .site .button:hover {
    background: #edd472;
    border-radius: 4px;
    color: #ffffff;
    padding: 5px 10px;
    text-transform: uppercase;
    border: outset 1px #edd472;
  }
  .site .custom-btn {
    color: #ffffff;
    border-radius: 5px;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    background: #191919;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 0px 5px 5px 0px rgba(0, 0, 0, 0.1), 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
    outline: none;
  }
  /* 7 */
  .btn-7 {
    background: linear-gradient(0deg, rgb(255, 151, 0) 0%, rgb(251, 75, 2) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
  }
  .btn-7 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px 10px;
  }
  .btn-7:before,
  .btn-7:after {
    position: absolute;
    content: "";
    /*right: 0;*/
    left: 50%;
    bottom: 0;
    background: #edd472;
    box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, 0.9), -4px -4px 5px 0px rgba(255, 255, 255, 0.9), 7px 7px 20px 0px rgba(0, 0, 0, 0.2), 4px 4px 5px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in;
  }
  .btn-7:before {
    height: 0%;
    /*width: 2px;*/
    width: 0px;
  }
  .btn-7:after {
    width: 0%;
    height: 3px;
  }
  .btn-7:hover {
    color: #edd472;
    /*background: transparent;*/
    background: #ffffff;
    box-shadow: inset 2px 2px 2px 0 hsla(0, 0%, 100%, 0.5), 7px 7px 20px 0 rgba(0, 0, 0, 0.1), 0px 5px 5px 0 rgba(0, 0, 0, 0.1);
  }
  .btn-7:hover:before {
    height: 100%;
    box-shadow: none;
  }
  .btn-7:hover:after {
    width: 100%;
    left: 0;
  }
  .btn-7 span:before,
  .btn-7 span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: transparent;
    /*
    box-shadow:
     -7px -7px 20px 0px rgba(255,255,255,.9),
     -4px -4px 5px 0px rgba(255,255,255,.9),
     7px 7px 20px 0px rgba(0,0,0,.2),
     4px 4px 5px 0px rgba(0,0,0,.3);*/
    transition: all 0.3s ease-in;
  }
  .btn-7 span:before {
    width: 2px;
    height: 0%;
  }
  .btn-7 span:after {
    height: 0px;
    width: 0%;
  }
  .btn-7 span:hover:before {
    height: 100%;
  }
  .btn-7 span:hover:after {
    width: 100%;
  }
  .site .row {
    @apply flex flex-wrap w-full pl-7 pt-14 pr-7;
  }
  .site .likeRowPEnglobe {
    @apply flex flex-wrap w-full pl-14 pt-14 pr-14 pb-14;
  }
  .site .row.row-last {
    @apply pb-14;
  }
  .row-in {
    @apply flex flex-wrap w-full  pt-7;
  }
  .row-in.row-last {
    @apply pb-7;
  }
  .site .row-block {
    @apply pl-7 pr-7;
  }
  .site .like-row {
    @apply flex w-full flex-wrap;
  }
  .site .like-row-top {
    @apply pt-14;
  }
  .site .like-row-bottom {
    @apply pb-14;
  }
  .site .like-row-block-left {
    @apply pl-7;
  }
  .site .like-row-block-right {
    @apply pr-7;
  }
  .site input:focus ~ label, select:focus ~ label {
    @apply left-7;
  }
  .site .row-title {
    @apply uppercase text-4xl;
  }
  .site .row-block-title {
    @apply uppercase text-4xl pb-14;
  }
  .site .alert-success {
    @apply bg-[#649a7f] p-7 my-14 text-white;
  }
  .site .title-end-color:after {
    @apply content-[attr(data-text)] text-[#649a7f] absolute -translate-x-full;
  }
  .padding-x-10vw {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }
  .padding-y-5vw {
    padding-top: 5vw !important;
    padding-bottom: 5vw !important;
  }
  /* Tablette portrait */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .site .navBlur ul li a {
      font-size: 0.95rem;
      padding-left: 1.9vw;
      padding-right: 1.9vw;
    }
  }
  @media screen and (max-width: 768px) {
    #navMobile-header {
      display: block;
    }
    #menuHeader {
      display: none;
    }
    header #fullscreen {
      display: none;
    }
    #block-logo-video {
      padding-left: 45px;
    }
    .site .row {
      @apply pl-4 pt-8 pr-4;
    }
    .site .row.row-last {
      @apply pb-8;
    }
    .site .row > .row-block:not(.width-nochange), .site .like-row > .like-row-block:not(.width-nochange) {
      @apply w-full;
    }
    .site .row > .row-block:not(:last-child) {
      @apply pb-8;
    }
    .site .row-block {
      @apply pl-4 pr-4;
    }
    .site .row-title {
      @apply uppercase text-2xl;
    }
    .site .row-block-title {
      @apply uppercase text-2xl pb-8;
    }
    .site .likeRowPEnglobe {
      @apply pl-8 pt-8 pr-8 pb-8;
    }
  }
}
:root {
  --buttonColorParticle1: rgba(225, 240, 12, 0);
  --buttonColorParticle2: rgba(0, 0, 0, 0);
}

.parentButtonParticle {
  z-index: 1;
  position: relative;
  display: inline-block;
}

.particleButton {
  z-index: 1;
  padding: 0em;
  background-color: unset;
  pointer-events: all;
  cursor: pointer;
  border-width: 0px;
  box-sizing: border-box;
  transition: box-shadow ease-out 0.3s, transform 0.1s ease-in;
  box-shadow: 0px 0px 0px 5px var(--buttonColorParticle2), 0px 0px 0px 9px var(--buttonColorParticle1), inset 0px 0px 0px 0px var(--buttonColorParticle2);
}

.particleButton:hover:not(:active) {
  transition: 0.1s ease-in-out all;
  box-shadow: 0px 0px 0px 8px var(--buttonColorParticle2), 0px 0px 0px 14px var(--buttonColorParticle1), inset 0px 0px 0px 0px var(--buttonColorParticle2);
}

.particles {
  z-index: -1;
  background: none !important;
  pointer-events: none;
  cursor: pointer;
  box-shadow: none;
  /*csweb*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  /*fin csweb*/
}

.particles::after {
  position: absolute;
  content: "";
  left: -105px;
  top: -105px;
  min-width: 300px;
  min-height: 300px;
  pointer-events: none;
  transition: background-size ease-in-out 0.5s, background-position ease-in-out 0.5s;
  background-repeat: no-repeat;
  overflow: hidden;
}

.particleButton:active {
  transition: box-shadow ease-out 0.1s, background-size ease-in-out 0.1s, background-position ease-in-out 0.1s;
  box-shadow: 0px 0px 0px 0px var(--buttonColorParticle2), 0px 0px 0px 5px var(--buttonColorParticle1), inset 0px 0px 0px 5px var(--buttonColorParticle2);
}

.particleButton:active ~ .particles::after {
  animation: none;
  background-size: 0;
}

.boxButtonParticle.animated::after {
  animation: boxButtonParticleAnimation linear 1.65s forwards;
  background-image: linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114)), linear-gradient(rgb(237, 212, 114), rgb(237, 212, 114));
}

@keyframes boxButtonParticleAnimation {
  0% {
    background-size: 27px 27px, 10px 10px, 15px 15px, 23px 23px, 23px 23px, 14px 14px, 25px 25px, 11px 11px, 10px 10px, 20px 20px, 28px 28px, 9px 9px, 18px 18px, 19px 19px, 21px 21px, 27px 27px, 10px 10px, 13px 13px, 11px 11px, 19px 19px, 20px 20px, 15px 15px, 19px 19px, 16px 16px, 11px 11px, 11px 11px, 14px 14px, 17px 17px, 26px 26px, 27px 27px;
    background-position: 53.6% 49.7%, 54.1% 51.5%, 53.3% 52.2%, 52.2% 52.6%, 51.3% 53.2%, 50.8% 54.1%, 49.2% 53.8%, 48.8% 54.4%, 47.8% 54.3%, 46.4% 53.4%, 45.1% 52.3%, 45.4% 52.5%, 44.3% 51.1%, 44% 50.1%, 43.8% 48.9%, 43.6% 47.5%, 44.7% 47.3%, 45.1% 46.3%, 46% 45.6%, 46.4% 44.6%, 47.3% 44.1%, 48.7% 44.1%, 49.5% 43.9%, 50.7% 44.3%, 51.9% 45%, 52.8% 45.6%, 53.4% 46.2%, 53.8% 47%, 53.6% 47.6%, 53.7% 48.6%;
  }
  10% {
    background-size: 17px 17px, 6px 6px, 10px 10px, 15px 15px, 15px 15px, 9px 9px, 16px 16px, 7px 7px, 6px 6px, 12px 12px, 18px 18px, 5px 5px, 12px 12px, 12px 12px, 13px 13px, 17px 17px, 7px 7px, 8px 8px, 7px 7px, 12px 12px, 13px 13px, 9px 9px, 12px 12px, 10px 10px, 7px 7px, 7px 7px, 9px 9px, 10px 10px, 16px 16px, 17px 17px;
    background-position: 60.6% 51.1%, 58.3% 54.4%, 57.2% 55%, 53% 56.7%, 49.2% 56.2%, 50.3% 59%, 46.9% 61.7%, 45.8% 57.4%, 51.6% 60.9%, 42.6% 59.9%, 41.5% 50.6%, 42.5% 51.4%, 42.4% 47.6%, 36.9% 47.7%, 44.1% 53%, 40.3% 54.8%, 39.9% 41.8%, 39.3% 50.4%, 49.6% 41.6%, 42.7% 44.1%, 47.1% 39.7%, 49.4% 41.9%, 43.8% 40%, 48.8% 38.4%, 53.9% 38.4%, 58.1% 44.4%, 56.2% 42.7%, 57.6% 41.8%, 61.1% 45.8%, 58% 51.8%;
  }
  20% {
    background-size: 10px 10px, 4px 4px, 6px 6px, 9px 9px, 9px 9px, 5px 5px, 10px 10px, 4px 4px, 4px 4px, 8px 8px, 11px 11px, 3px 3px, 7px 7px, 7px 7px, 8px 8px, 11px 11px, 4px 4px, 5px 5px, 4px 4px, 7px 7px, 8px 8px, 6px 6px, 7px 7px, 6px 6px, 4px 4px, 4px 4px, 5px 5px, 6px 6px, 10px 10px, 11px 11px;
    background-position: 65.5% 52%, 60.2% 56.1%, 58.9% 56.2%, 52.1% 57.6%, 46.8% 54.4%, 49.4% 61.2%, 44.6% 67.9%, 44% 57.4%, 55.1% 65.6%, 39.6% 65%, 41.6% 47.7%, 43.9% 49.2%, 44.8% 44.9%, 31.2% 45.3%, 49% 53.2%, 38.9% 60.9%, 36.3% 37.2%, 35.8% 54.5%, 53.4% 41.1%, 41.4% 45.6%, 47.3% 37.8%, 50.1% 43.7%, 38.9% 37.9%, 46.8% 34.5%, 55% 33.4%, 61.4% 44.5%, 57% 40.9%, 59.8% 37.8%, 66.8% 44.2%, 59.5% 54.1%;
  }
  30% {
    background-size: 6px 6px, 2px 2px, 4px 4px, 6px 6px, 6px 6px, 3px 3px, 6px 6px, 3px 3px, 2px 2px, 5px 5px, 7px 7px, 2px 2px, 4px 4px, 4px 4px, 5px 5px, 7px 7px, 2px 2px, 3px 3px, 3px 3px, 4px 4px, 5px 5px, 3px 3px, 5px 5px, 4px 4px, 2px 2px, 3px 3px, 3px 3px, 4px 4px, 6px 6px, 7px 7px;
    background-position: 69.5% 52.7%, 60.7% 56.9%, 59.1% 56.3%, 50.2% 55.5%, 48.4% 47.2%, 48.5% 61.7%, 42.3% 73.4%, 43.6% 55.4%, 58.4% 69.5%, 36.9% 69.3%, 45% 45.5%, 51.5% 50.5%, 50.5% 46.4%, 26.2% 42.9%, 53.3% 43.5%, 38% 66.2%, 33.1% 33.1%, 33.2% 58.2%, 56.2% 42.8%, 42.6% 48.2%, 47.7% 37.3%, 49.8% 53.2%, 34.6% 36.4%, 45% 31.5%, 55.9% 29.1%, 63.3% 45.1%, 56.6% 40.5%, 61.3% 34.4%, 71.8% 42.8%, 59.2% 55.5%;
  }
  40% {
    background-size: 4px 4px, 1px 1px, 2px 2px, 4px 4px, 4px 4px, 2px 2px, 4px 4px, 2px 2px, 1px 1px, 3px 3px, 4px 4px, 1px 1px, 3px 3px, 3px 3px, 3px 3px, 4px 4px, 1px 1px, 2px 2px, 2px 2px, 3px 3px, 3px 3px, 2px 2px, 3px 3px, 2px 2px, 1px 1px, 1px 1px, 2px 2px, 2px 2px, 4px 4px, 4px 4px;
    background-position: 72.9% 53.2%, 60.1% 57%, 57.8% 55.3%, 48.6% 45.8%, 52.5% 53.2%, 47.7% 60.6%, 40.1% 78.4%, 45.8% 51.1%, 61.4% 72.9%, 34.4% 73.3%, 52% 49.4%, 56.8% 55.2%, 53.7% 56.5%, 21.4% 40.7%, 54.3% 36%, 37.4% 70.9%, 30.3% 29.2%, 31.1% 61.6%, 57.3% 46.4%, 48.4% 51.1%, 48.3% 38.1%, 48.6% 56.5%, 30.6% 35.3%, 43.2% 29.1%, 56.6% 25.2%, 64.1% 46.1%, 55.2% 41.3%, 62.4% 31.5%, 76.3% 41.3%, 57.4% 56%;
  }
  50% {
    background-size: 2px 2px, 1px 1px, 1px 1px, 2px 2px, 2px 2px, 1px 1px, 2px 2px, 1px 1px, 1px 1px, 2px 2px, 3px 3px, 0px 0px, 2px 2px, 1px 1px, 2px 2px, 3px 3px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 2px 2px, 1px 1px, 2px 2px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 2px 2px, 3px 3px;
    background-position: 75.8% 53.6%, 58.4% 56.2%, 54.4% 52.9%, 49.6% 40.4%, 51.7% 57.3%, 47.3% 57.6%, 38% 83.2%, 53.5% 50.6%, 64.2% 76%, 32% 77%, 55.3% 59.6%, 59.2% 57.6%, 53.7% 64.2%, 16.8% 38.4%, 54.8% 29.6%, 36.9% 75.4%, 27.6% 25.5%, 29.4% 64.8%, 55.3% 51.1%, 56% 46%, 49.1% 40.4%, 48.3% 54.2%, 26.8% 34.3%, 41.5% 27.1%, 57.2% 21.6%, 64% 47.3%, 52.5% 44.1%, 63.2% 28.9%, 80.4% 40%, 53.8% 54.9%;
  }
  60% {
    background-size: 1px 1px, 0px 0px, 1px 1px, 1px 1px, 1px 1px, 0px 0px, 1px 1px, 0px 0px, 0px 0px, 1px 1px, 2px 2px, 0px 0px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 0px 0px, 0px 0px, 0px 0px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 1px 1px, 0px 0px, 0px 0px, 1px 1px, 1px 1px, 1px 1px, 1px 1px;
    background-position: 78.4% 54%, 54.9% 54.1%, 46.4% 48.3%, 50.7% 37.8%, 49.8% 57.3%, 48.3% 50.6%, 35.8% 87.8%, 56.1% 55.1%, 66.9% 78.8%, 29.6% 80.6%, 57.1% 67.9%, 60.3% 59%, 53.4% 70.7%, 12.4% 36.2%, 55.2% 23.7%, 36.6% 79.5%, 25% 21.9%, 28% 67.7%, 47.7% 51.5%, 59.2% 42.6%, 50% 45.6%, 50.9% 45.9%, 23.3% 33.5%, 40% 25.4%, 57.7% 18.3%, 62.8% 48.6%, 48.3% 53.7%, 63.8% 26.5%, 84.3% 38.6%, 47.7% 47%;
  }
  70% {
    background-size: 1px 1px, 0px 0px, 0px 0px, 1px 1px, 1px 1px, 0px 0px, 1px 1px, 0px 0px, 0px 0px, 0px 0px, 1px 1px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 1px 1px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 1px 1px, 1px 1px;
    background-position: 80.6% 54.2%, 47.5% 47.5%, 42.8% 49.9%, 51.8% 36.8%, 48.1% 53%, 52.8% 46.7%, 33.7% 92.2%, 55.6% 57.4%, 69.5% 81.5%, 27.4% 83.9%, 58.5% 75.5%, 60.6% 59.6%, 52.9% 76.8%, 8.1% 34.1%, 55.5% 18.1%, 36.2% 83.4%, 22.5% 18.4%, 26.7% 70.5%, 43.3% 42.6%, 61% 40.3%, 50% 56.2%, 52.1% 49.5%, 19.9% 32.8%, 38.5% 24%, 58.2% 15.1%, 60.2% 50.1%, 46.1% 60.2%, 64.3% 24.5%, 88.1% 37.3%, 44.2% 39%;
  }
  80% {
    background-size: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    background-position: 82.7% 54.5%, 42.4% 45.4%, 44% 51.6%, 52.6% 37, 50.4% 45.1%, 51.5% 52.1%, 31.6% 96.5%, 53.5% 57.6%, 72% 84%, 25.2% 87.2%, 59.9% 82.9%, 60% 59.5%, 52.4% 82.5%, 3.9% 31.9%, 55.8% 12.6%, 36% 87.2%, 20.1% 15, 25.7% 73.1%, 41.2% 35.4%, 62% 38.7%, 49.5% 60.4%, 48.1% 48.3%, 16.8% 32.2%, 37.2% 22.8%, 58.6% 12.2%, 55.4% 51.5%, 44.7% 64.7%, 64.6% 22.6%, 91.7% 36.1%, 41.7% 32.7%;
  }
  90% {
    background-size: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    background-position: 84.5% 54.7%, 40.2% 45.1%, 50.9% 49.5%, 53.1% 38.5%, 52.5% 48%, 47.1% 46.2%, 29.6% 100.8%, 50.2% 54.7%, 74.5% 86.4%, 23% 90.3%, 61.2% 90%, 58.6% 58.5%, 51.9% 88%, -0.2% 29.8%, 56% 7.3%, 35.8% 90.8%, 17.8% 11.7%, 24.7% 75.5%, 39.7% 28.9%, 62.5% 37.6%, 49% 62.5%, 48.5% 46.4%, 13.7% 31.6%, 35.9% 21.8%, 59% 9.3%, 46.1% 47.6%, 43.5% 68.3%, 64.8% 20.9%, 95.2% 34.8%, 39.5% 26.9%;
  }
  100% {
    background-size: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
    background-position: 86.2% 54.8%, 39.7% 45.7%, 56.5% 44.7%, 53.2% 41.4%, 48.8% 50.7%, 47.8% 46.2%, 27.6% 104.9%, 48.1% 44.3%, 76.8% 88.7%, 21% 93.4%, 62.4% 97%, 56.1% 56.5%, 51.4% 93.4%, -4.2% 27.7%, 56.2% 2.2%, 35.6% 94.3%, 15.5% 8.5%, 23.9% 77.8%, 38.3% 22.8%, 62.4% 37%, 48.7% 63.1%, 51.8% 54%, 10.7% 31.1%, 34.8% 21.1%, 59.4% 6.6%, 40.2% 42.7%, 42.6% 71.3%, 64.9% 19.4%, 98.5% 33.6%, 37.4% 21.4%;
  }
}
.boxButtonParticle.particles::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*min-width: 100vw;
  min-height: 100vw;*/
  max-width: 1000px;
  max-height: 1000px;
  width: 100vw;
  height: 100vw;
}

.boxButtonParticle {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  color: rgb(21, 21, 21);
  border-radius: 5px;
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0), 0px 0px 0px 9px rgba(0, 0, 0, 0), inset 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

:root {
  --bg: #ffffff;
  --gradient-shadow: linear-gradient(
    45deg,
    #fb0094,
    #0000ff,
    #00ff00,
    #ffff00,
    #ff0000,
    #fb0094,
    #0000ff,
    #00ff00,
    #ffff00,
    #ff0000
  );
}

body {
  margin: 0;
  padding: 0;
  /*width : 100%;*/
  /*height: 100vh;*/
  /*display : flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;*/
  background-color: #000000;
  overflow: scroll;
}

.dore {
  color: #f8d47d;
}

.bleu {
  color: #127bc5;
}

.title-bg-black {
  background: rgba(28, 27, 27, 0.8);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.ordi-sticky-img {
  position: sticky;
  height: fit-content;
  top: 100px;
}

.container-shadow-black {
  background: linear-gradient(180deg, rgba(29, 29, 29, 0.9), rgba(255, 255, 255, 0.01));
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-top: solid 2px #ffffff;
}

.square-icon-list {
  list-style: none;
  padding: 20px 0px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.square-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/*** carré qui se détache step dans prestation **/
.wrapper-title-prestation {
  width: 13.4vw;
  height: 0;
  position: relative;
}

.title-prestation {
  transform: translateX(-2.5vw);
  text-shadow: -1px 2px 2px #000000, 0px -1px 2px #000000;
}

.wrapper-square-detach {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: -5px;
}

/* Petit losange */
.small-diamond, .small-diamond-crop {
  width: 1.4vw;
  height: 1.4vw;
  transform: rotate(45deg);
}

.small-diamond {
  /*background: #127bc5;*/
  background: #f8d47d;
  z-index: 3;
}

.small-diamond-crop {
  position: absolute;
  left: -17%;
  top: 40%;
  z-index: 2;
  background: #191919;
}

/* Grand losange avec texte */
.big-diamond {
  width: 7vw;
  height: 7vw;
  /*background: linear-gradient(135deg, #127bc5, #1084c4);*/
  /*background: linear-gradient(45deg, #117fc5, #02588c);*/
  background: linear-gradient(45deg, #f8d47d, #f2cf79);
  transform: rotate(45deg);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.big-diamond span {
  transform: rotate(-45deg); /* annule la rotation du parent */
  color: #191919;
  font-size: 2rem;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

/** fin carré qui se détache **/
/* 3. Checkbox square that animates on checked class */
.bullet-check li {
  position: relative;
}

.bullet-check li::before {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  border-radius: 3px;
  background: transparent;
  border: 2px solid #127bc5;
  display: inline-block;
  position: relative;
  top: 10px;
  transition: all 0.2s ease;
}

/* Puce chevron */
.bullet-chevron li::before {
  content: "›";
  color: #f8d47d;
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  margin-top: 2px;
}

.bullet-cercle-parent li {
  counter-increment: steps;
}

.bullet-cercle {
  content: "";
  width: 18px; /* 22.5 * 0.8 */
  height: 18px;
  border-radius: 50%;
  position: relative;
  counter-increment: steps;
  margin-top: 8px;
}

.bullet-cercle::before {
  content: "";
  display: block;
  width: 16.8px; /* 21 * 0.8 */
  height: 16.8px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  background-image: linear-gradient(42deg, #127bc5, #1084c4);
  transform-origin: 7.6px;
  -webkit-animation: rotateCercle 2s linear infinite;
  animation: rotateCercle 2s linear infinite;
}

.bullet-cercle::after {
  background: #191919;
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 44%;
  width: 16px; /* 20 * 0.8 */
  height: 16px;
  line-height: 33.684px; /* 42.105 * 0.8 */
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  font-family: sans-serif;
  color: #127bc5;
}

@keyframes rotateCercle {
  100% {
    transform: rotate(360deg) translateZ(0);
  }
}
.square-icon1 li::before {
  width: 20px;
  height: 20px;
  margin: 34px;
  border: 3px solid white;
  position: fixed;
  transform: rotate(0deg);
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
/**logo video**/
/***popup***/
#block-logo-video-popup {
  transition: opacity 3s ease;
}

#logo-video-popup {
  z-index: 999;
  width: 100%;
  height: 100%;
  transition: width 1s ease, height 1s ease, opacity 3s ease; /* Durée et type de transition */
  margin-left: 1.7vw;
  margin-top: 1vw;
}

/*** fin popu **/
#block-logo-video {
  z-index: 10;
  opacity: 1;
  translate: none;
  rotate: none;
  scale: none;
  position: absolute;
  top: 15px;
  padding-left: 50px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  height: 560px;
  max-height: 100%;
  transition: opacity 2s ease; /* Durée et type de transition */
}

#logo-video {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.background-video {
  background: linear-gradient(180deg, rgb(16, 16, 16) 0%, rgb(14, 14, 14) 20%, rgb(11, 12, 12) 40%, rgb(10, 10, 11) 60%, rgb(8, 9, 9) 80%, rgb(0, 0, 0) 100%);
}

/** fin logo video **/
/** effet parallax **/
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  /*background-size: auto;*/
  background-size: 200px;
  will-change: transform;
  opacity: 0; /* Initialement invisible */
  transition: opacity 0.5s ease; /* Ajouter une transition pour une apparence plus fluide */
}

.parallax-layer-left {
  background-position: top left;
}

.parallax-layer-right {
  background-position: top right;
}

/** fin effet parralax **/
#block-prestation {
  position: relative;
  z-index: 8;
}

#block-atouts {
  z-index: 7;
  position: relative;
  margin-top: -100vh;
}

#block-form-contact {
  max-width: 80%;
  margin: 0 auto;
  border: solid 4px #edd472;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}

#parent-img-contact {
  min-height: 20vw;
}

#img-contact {
  max-width: 30%;
  position: absolute;
  transform: translateX(-50%);
  bottom: -3vw;
  z-index: 2;
}

/*** shining effect logo***/
.card-shine-effect {
  --shine-deg: 90deg;
  overflow: hidden;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 200% 0, 0 0;
  background-image: linear-gradient(var(--shine-deg), transparent 20%, transparent 40%, rgba(68, 68, 68, 0.3) 90%, rgba(68, 68, 68, 0.3) 95%, transparent 70%, transparent 100%);
  background-size: 250% 250%, 100% 100%;
}

.card-shine-effect.smallSquare {
  transition: background-position 0.9s ease;
}

.card-shine-effect.bigSquarePart1 {
  transition: background-position 0.578s ease;
}

.card-shine-effect.bigSquarePart2 {
  transition: background-position 0.6s ease;
}

.bigSquare:hover .card-shine-effect.smallSquare {
  background-position: -100% 0, 0 0;
  transition-duration: 0.5s;
}

.bigSquare:hover .card-shine-effect.bigSquarePart1 {
  background-position: -100% 0, 0 0;
  transition-duration: 1s;
}

.bigSquare:hover .card-shine-effect.bigSquarePart2 {
  background-position: -100% 0, 0 0;
  transition-duration: 0.97s;
}

/*** FIN  shining effect logo***/
.text-mask {
  background-color: #fff;
  overflow: hidden;
  display: inline-block;
  padding: 10px;
  font-weight: bold;
  font-family: arial;
  color: transparent;
  font-size: 200px;
}

/* Style du fond d'image transparent au niveau du texte */
.text-mask > span {
  background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
}

.shadow-color-anime {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 2vw;
  font-weight: bold;
  width: 400px;
  height: 250px;
  background: linear-gradient(0deg, #000, #262626);
}

.shadow-color-anime:before,
.shadow-color-anime:after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background: var(--gradient-shadow);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: animateShadowColor 20s linear infinite;
}

.shadow-color-anime:after {
  filter: blur(20px);
}

@keyframes animateShadowColor {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 300% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.form-carre10, .form-carre20, .form-carre30, .form-carre40, .form-carre50 {
  position: absolute;
}

.borderGrey {
  border: solid 2px #3b3b3b;
}

.borderGold {
  border: solid 2px #8e7f44;
}

.form-carre10 {
  width: 10px;
  height: 10px;
}

.form-carre20 {
  width: 20px;
  height: 20px;
}

.form-carre30 {
  width: 30px;
  height: 30px;
}

.form-carre40 {
  width: 40px;
  height: 40px;
}

.form-carre50 {
  width: 50px;
  height: 50px;
}

.form-carre10.generateSquareBefore:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid #3b3b3b 2px;
  margin-left: -3px;
  margin-top: -4px;
}

.form-carre20.generateSquareBefore:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: solid #3b3b3b 2px;
  margin-left: -3px;
  margin-top: -10px;
}

.form-carre30.generateSquareBefore:before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: solid #3b3b3b 2px;
  margin-left: -5px;
  margin-top: -20px;
}

.form-carre40.generateSquareBefore:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: solid #3b3b3b 2px;
  margin-left: -10px;
  margin-top: -30px;
}

.form-carre50.generateSquareBefore:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border: solid #3b3b3b 2px;
  margin-left: -10px;
  margin-top: -30px;
}

.cursor,
.cursor2,
.cursor3 {
  position: fixed;
  border-radius: 5px;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
}

.cursor {
  background-color: #fff;
  height: 0;
  width: 0;
  z-index: 99999;
}

.cursor2, .cursor3 {
  height: 36px;
  width: 36px;
  z-index: 99998;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.cursor2.hover,
.cursor3.hover {
  -webkit-transform: scale(2) translateX(-25%) translateY(-25%);
  transform: scale(2) translateX(-25%) translateY(-25%);
  border: none;
}

.cursor2 {
  border: 2px solid #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}

.cursor2.hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 1200px) {
  .cursor, .cursor2, .cursor3 {
    display: none;
  }
}
.shadow-title {
  /*position: fixed;
  top: 100%;*/
  position: absolute;
  top: 10%;
  margin-top: 30px;
  left: 20px;
  width: 100%;
  height: 100%;
  text-align: left;
  font-family: "Muli", sans-serif;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  font-size: 18vw;
  line-height: 1;
  color: rgba(200, 200, 200, 0.1);
  background: linear-gradient(90deg, rgba(200, 200, 200, 0), rgba(200, 200, 200, 0.35));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  z-index: 1;
}

.section-parallax {
  position: absolute;
  /*top: -100vh;*/
  top: 0;
  margin-top: -600px;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  z-index: 2;
}

.section {
  position: relative;
  width: 100%;
  display: block;
}

.full-height {
  height: 100vh;
}

.section.z-bigger {
  z-index: 100;
}

.section.z-bigger-2 {
  z-index: 200;
}

.section-title-wrap {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /*ransform: translateY(-50%);*/
  z-index: 3;
}

.padding-top-bottom {
  padding-top: 100px;
  padding-bottom: 100px;
}

.over-hide {
  overflow: hidden;
}

.background-dark {
  background-color: #101010;
}

.project-link-wrap {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
}

.project-link-wrap p {
  font-size: 100px;
  line-height: 80px;
  color: #c4c3ca;
  font-weight: 900;
  text-align: center;
  margin: 0 auto;
  cursor: pointer;
  opacity: 0.35;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.project-link-wrap:hover p {
  opacity: 0.15;
}

/* #back to top arrow
================================================== */
.scroll-to-top:hover {
  bottom: 32px;
}

.scroll-to-top.active-arrow {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  z-index: 251;
  cursor: pointer;
  transform: translateY(-15px);
  -webkit-transition: all 250ms linear;
  transition: all 250ms linear;
  text-align: center;
  cursor: pointer;
}

.triangle-scroll {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 4.5px 7px 4.5px;
  border-color: transparent transparent #ffffff transparent;
  -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.8));
  transition: all 250ms linear;
}

.rectangle-scroll {
  display: inline-block;
  height: 30px;
  width: 2px;
  background: #ffffff;
  -webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.6));
  transition: all 250ms linear;
}

.scroll-to-top:hover .triangle-scroll {
  border-color: transparent transparent #edd472 transparent;
  -webkit-filter: none;
  filter: none;
}

.scroll-to-top:hover .rectangle-scroll {
  background: #edd472;
  -webkit-filter: none;
  filter: none;
  width: 2px;
}

/* #Media
================================================== */
@media (max-width: 1200px) {
  .scroll-to-top {
    right: 13px;
  }
  .case-study-images li .case-study-title {
    left: 13px;
  }
}
@media screen and (max-width: 1024px) {
  .ordi-sticky-img {
    position: relative;
    top: -25px;
  }
}
@media (max-width: 991px) {
  .case-study-images li .hero-number-back {
    font-size: 26vw;
  }
}
@media (max-width: 767px) {
  .case-study-wrapper {
    background-color: rgba(31, 32, 41, 0.95);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
  .case-study-wrapper .case-study-name a {
    font-size: 11px;
    letter-spacing: 1px;
    text-align: center;
    margin: 5px;
  }
  .case-study-wrapper .case-study-name {
    margin: 0 auto;
    text-align: center;
  }
  .case-study-images li .hero-number-back {
    font-size: 32vw;
  }
}
#block-raisons {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}

.animate-arrow-fire:hover #icon-target #arrow {
  transform-origin: center center;
  /*animation-name: arrow-fire;
  animation-duration: 0.7s;
  animation-delay: 2s;
  animation-iteration-count: infinite;*/
  animation: arrow-fire 2s ease-in-out 0s infinite;
  /* animation: arrow-fire ease-in-out 1s infinite alternate;
  animation-delay: 5s;*/
}
@keyframes arrow-fire {
  0% {
    transform: translate(60px, -60px);
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  14% {
    transform: translate(0, 0);
  }
  15% {
    transform: rotate(-8deg);
  }
  17% {
    transform: rotate(7deg);
  }
  18.6% {
    transform: rotate(-4deg);
  }
  20% {
    transform: rotate(0deg);
  }
}

.svg-ampoule {
  transition: all 0.3s ease-in-out;
}

#bulb_body {
  fill: #FFFFFF;
  stroke: #3D3D3D;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-miterlimit: 10;
  transition: fill 0.5s ease-in-out;
  transition-delay: 0.5s;
}

#sockel path {
  fill: #edd185;
  stroke: #3D3D3D;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-miterlimit: 10;
}

#glow {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-miterlimit: 10;
  transition: stroke 0.3s ease-in-out;
}

#licht line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-miterlimit: 10;
  transition: stroke 0.3s ease-in-out;
}

.animate-bulb .svg-ampoule #bulb_body {
  fill: none;
}

.animate-bulb:hover .svg-ampoule #bulb_body {
  /* fill: url(#my-cool-gradient) #edd185;*/
  animation: fillAmpouleAnimation 2s infinite; /* Réglez la durée et le nombre de répétitions selon vos préférences */
}

@keyframes fillAmpouleAnimation {
  0% {
    fill: none;
  }
  50% {
    fill: url(#my-cool-gradient) #edd185;
  }
  100% {
    fill: none;
  }
}
.animate-bulb .svg-ampoule .trait-ampoule {
  opacity: 0;
  visibility: hidden;
}

.animate-bulb:hover .svg-ampoule .trait-ampoule {
  /*visibility: visible;*/
  animation: visibilityAmpouleAnimation 2s infinite;
}

@keyframes visibilityAmpouleAnimation {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  50% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.animate-bulb .svg-ampoule #glow,
.animate-bulb .svg-ampoule #licht line {
  stroke: #000000;
}

.animate-bulb:hover .svg-ampoule #glow,
.animate-bulb:hover .svg-ampoule #licht line {
  stroke: #edd185;
  animation: strokeAmpouleAnimation 2s infinite; /* Réglez la durée et le nombre de répétitions selon vos préférences */
}

@keyframes strokeAmpouleAnimation {
  0% {
    stroke: #000000;
  }
  50% {
    stroke: #edd185; /* Couleur de retour pendant la moitié de l'animation */
  }
  100% {
    stroke: #000000;
  }
}
@keyframes zigzagAnimation {
  0% {
    transform: rotate(0deg) translate(-1000px, -1000px);
  }
  25% {
    transform: rotate(0deg) translate(-250px, -1000px);
  }
}
.animate-paint #dessin-pinceau {
  fill: url(#gradient-paint-animate) #edd185;
  transition-delay: 0.5s;
}

.change-bg-animate-paint {
  transition-delay: 0.5s;
}

.animate-paint:hover .change-bg-animate-paint {
  stop-color: rgb(255, 255, 255);
  transition-delay: 1s;
}

#dessin-pinceau {
  fill: url(#gradient-paint-animate);
}

.animate-paint:hover #cache-dessin-pinceau {
  animation: zigzagPaintAnimation 2s infinite; /* Réglez la durée et le nombre de répétitions selon vos préférences */
}

@keyframes zigzagAnimation {
  0% {
    transform: rotate(0deg) translate(-1000px, -1000px);
  }
  25% {
    transform: rotate(0deg) translate(-250px, -1000px);
  }
  50% {
    /*transform: rotate(-0deg) translate(0px, -600px);*/
    transform: rotate(20deg) translate(250px, -1500px);
  }
  75% {
    transform: rotate(0deg) translate(-500px, -300px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes zigzagPaintAnimation {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
  }
  25% {
    transform: rotate(45deg) translate(1000px, -1000px);
  }
  50% {
    /*transform: rotate(-0deg) translate(0px, -600px);*/
    /*transform: rotate(0deg) translate(0px, 500px);*/
    transform: rotate(55deg) translate(1000px, -700px);
  }
  75% {
    /*transform: rotate(0deg) translate(0px, 1000px);*/
    transform: rotate(45deg) translate(1000px, 100px);
  }
  100% {
    transform: rotate(0deg) translate(0px, 1400px);
  }
}
#pinceau {
  transform: rotate(0deg) translate(-1000px, -1000px);
}

.animate-paint:hover #pinceau {
  animation: zigzagAnimation 2s infinite; /* Réglez la durée et le nombre de répétitions selon vos préférences */
}

#tete-pinceau {
  fill: #edd185;
}

@keyframes drawPinceau {
  to {
    stroke-dasharray: 1000; /* Utilisez la longueur totale du chemin */
  }
}
.animate-shield:hover #shield-icon {
  animation: shieldAnimation 2s infinite;
}

@keyframes shieldAnimation {
  0% {
    transform: scale(1) translate(0px, 0px);
  }
  50% {
    transform: scale(1.2) translate(-9px, -7px);
  }
  100% {
    transform: scale(1) translate(0px, 0px);
  }
}
.icon {
  margin: 0 auto;
  text-align: center;
  width: 75px;
  height: 75px;
  /*   background: #ccc; */
}

.st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #000000;
}

.st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #edd185;
}

.habit1:hover .be-curious #telescope {
  /*   animation-play-state: running; */
  animation: telescope 2.5s ease-in-out infinite;
  -webkit-animation: telescope 2.5s ease-in-out infinite;
  transform-origin: 50% 100%;
  transform-origin: 26px 11px;
  -webkit-transform-origin: 26px 11px;
}

.habit1:hover .be-curious #star {
  animation: pulse-star 2.5s ease-in-out infinite;
  -webkit-animation: pulse-star 2.5s ease-in-out infinite;
  transform-origin: 90% 12%;
  transform-origin: 68px 9px;
  -webkit-transform-origin: 68px 9px;
}

/* .habit1:hover .be-curious #star2 {
  animation: pulse-star 2s 1.3s ease-in-out;
  -webkit-animation: pulse-star 2s 1.3s ease-in-out;
  transform-origin: 70px 19px;
  -webkit-transform-origin: 70px 19px;
} */
.be-curious #star, #star2 {
  opacity: 0;
}

.habit1:hover .be-curious #telescope #lens {
  animation-play-state: running;
  animation: lens 2.5s ease-in forwards;
  -webkit-animation: lens 2.5 ease-in forwards;
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 50%;
}

.habit2:hover .manage-yourself #scale {
  /*   animation-play-state: running; */
  animation: swing 0.8s linear alternate infinite forwards;
  -webkit-animation: swing 0.8s linear alternate infinite forwards;
  transform-origin: 50% 50%;
  transform-origin: 38px 39px;
  -webkit-transform-origin: 38px 39px;
}

.habit2:hover .manage-yourself #circ {
  /*   animation-play-state: running; */
  animation: move-circ 1.6s ease-in infinite forwards;
  -webkit-animation: move-circ 1.6s ease-in infinite forwards;
  transform-origin: 50% 50%;
  /*   transform-origin: 38px 39px;
    -webkit-transform-origin: 38px 39px; */
}

.habit2:hover .manage-yourself #rect {
  /*   animation-play-state: running; */
  animation: move-rect 1.6s ease-in infinite forwards;
  -webkit-animation: move-rect 1.6s ease-in infinite forwards;
  transform-origin: 50% 50%;
  /*   transform-origin: 38px 39px;
    -webkit-transform-origin: 38px 39px; */
}

.habit3:hover .learn-from-setbacks svg {
  animation: rotate 1s forwards;
  animation-fill-mode: both;
  -webkit-animation: rotate 1s forwards;
  animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.habit4:hover .communicate-collaborate #orange-chat {
  /*   animation-play-state: running; */
  animation: move-orange-chat 2s ease-in infinite forwards;
  -webkit-animation: move-orange-chat 2s ease-in infinite forwards;
  transform-origin: 50% 50%;
  /*   transform-origin: 38px 39px;
    -webkit-transform-origin: 38px 39px; */
}

.habit4:hover .communicate-collaborate #yellow-chat {
  /*   animation-play-state: running; */
  animation: move-yellow-chat 2s ease-in infinite forwards;
  -webkit-animation: move-yellow-chat 2s ease-in infinite forwards;
  transform-origin: 50% 50%;
  /*   transform-origin: 38px 39px;
    -webkit-transform-origin: 38px 39px; */
}

.habit4:hover .communicate-collaborate #circ1 {
  animation: show-dots 2s ease infinite forwards;
  -webkit-animation: show-dots 2s ease infinite forwards;
}

.habit4:hover .communicate-collaborate #circ2 {
  animation: show-dots 2s 0.3s ease infinite forwards;
  -webkit-animation: show-dots 2s 0.3s ease infinite forwards;
}

.habit4:hover .communicate-collaborate #circ3 {
  animation: show-dots 2s 0.5s ease infinite forwards;
  -webkit-animation: show-dots 2s 0.5s ease infinite forwards;
}

.habit5:hover .solve-problems #circle {
  animation: animate-circle 1.5s infinite ease-in-out;
  -webkit-animation: animate-circle 1.5s infinite ease-in-out;
  transform-origin: 37% 29%;
  transform-origin: 28px 22px;
  -webkit-transform-origin: 28px 22px;
}

.habit5:hover .solve-problems #arrow {
  animation: animate-arrow 1.5s infinite ease-in-out;
  -webkit-animation: animate-arrow 1.5s infinite ease-in-out;
  transform-origin: 50% 50%;
  transform-origin: 44px 40px;
  -webkit-transform-origin: 44px 40px;
}

.habit5:hover .solve-problems #rect {
  animation: animate-rect 1.5s infinite ease-in-out forwards;
  -webkit-animation: animate-rect 1.5s infinite ease-in-out forwards;
  /*   transform-origin: 37% 29%; */
  transform-origin: 54px 52px;
  -webkit-transform-origin: 54px 52px;
}

.habit5:hover .solve-problems #cross {
  animation: animate-cross 1.5s infinite ease-in-out;
  -webkit-animation: animate-cross 1.5s infinite ease-in-out;
  /*   transform-origin: 37% 29%; */
  transform-origin: 19px 43px;
  -webkit-transform-origin: 19px 43px;
}

/* .manage-yourself.animated #scale {
  animation: swing 0.5s linear alternate infinite forwards;
  -webkit-animation: swing 0.5s linear alternate infinite forwards;
  transform-origin: 50% 50%;
  transform-origin: 38px 39px;
  -webkit-transform-origin: 38px 39px;
}
 */
/* .learn-from-setbacks {
    animation-play-state: paused; 
}


/* .learn-from-setbacks.animated {
  animation: rotate 1s  infinite  forwards;
  -webkit-animation: rotate 1s   infinite forwards;
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
} */
.habit6:hover .integrated-life #orange {
  animation: solve-puzzle 1.2s forwards;
  -webkit-animation: solve-puzzle 1.2s forwards;
  animation-timing-function: easy-in;
  transform-origin: 50% 50%;
}

/* Animations */
@keyframes swing {
  0%, 10% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
  90%, 100% {
    transform: rotate(12deg);
  }
}
@keyframes move-circ {
  0%, 10% {
    transform: translate(-0.5px, 0px);
  }
  40% {
    transform: translate(1px, 0px);
  }
  90%, 100% {
    transform: translate(0px, 0px);
  }
}
@keyframes move-rect {
  0%, 10% {
    transform: translate(-0.5px, 0px);
  }
  40% {
    transform: translate(1px, 0px);
  }
  90%, 100% {
    transform: translate(0px, 0px);
  }
}
@keyframes lens {
  0%, 45% {
    transform: translate(0);
  }
  50%, 56% {
    transform: translate(3px, -1px);
  }
  65%, 100% {
    transform: translate(0);
  }
}
@keyframes pulse-star {
  /*   0%, 10%  {opacity: 0}
    15%, 70% {opacity: 1}
    74%, 100%     {opacity: 0} */
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes telescope {
  0%, 20% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
  30%, 80% {
    -webkit-transform: rotate(-7deg) translate(-2px, -1px);
    transform: rotate(-7deg) translate(-2px, -1px);
  }
  92%, 100% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 
@keyframes solve-puzzle {
   0% {
     transform: rotate(0deg) translate(0);
   }

   20% {
     transform: rotate(15deg) translate(-1px, 3px);
   }

  40% {
     transform: rotate(30deg) translate(-3px, 4px);
   }
  70%, 100% {
     transform: rotate(30deg) translate(-6px, 5px);
   }
 } */
@keyframes solve-puzzle {
  0% {
    transform: rotate(0deg) translate(0);
  }
  10% {
    transform: rotate(0deg) translate(3px, 5px);
  }
  20%, 35% {
    transform: rotate(-60deg) translate(-22px, 16px);
    transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  50% {
    transform: rotate(-60deg) translate(-22px, 26px);
  }
  80%, 100% {
    transform: rotate(30deg) translate(-6px, 5px);
    transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes move-orange-chat {
  0%, 20% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
  30%, 75% {
    -webkit-transform: rotate(8deg) translate(5px, -3px);
    transform: rotate(8deg) translate(5px, -3px);
  }
  85%, 100% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
}
@keyframes move-yellow-chat {
  0%, 20% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
  30%, 75% {
    -webkit-transform: rotate(-7deg) translate(-3px, 2px);
    transform: rotate(-7deg) translate(-3px, 2px);
  }
  85%, 100% {
    -webkit-transform: rotate(0) translate(0);
    transform: rotate(0) translate(0);
  }
}
@keyframes show-dots {
  0%, 20% {
    opacity: 0;
    transform: translate(0);
  }
  30% {
    opacity: 1;
    transform: translate(0px, 1px);
  }
  45% {
    opacity: 1;
    transform: translate(0px, -2px);
  }
  90%, 100% {
    opacity: 0;
    transform: translate(0);
  }
}
@keyframes animate-arrow {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes animate-circle {
  0% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.82);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  /*     0%, 70% {
          -webkit-transform: scale(1);
          transform: scale(1)
      }

      78%, 85% {
          -webkit-transform: scale(0);
          transform: scale(0);
      }

      100% {
          -webkit-transform: scale(1);
          transform: scale(1)
      } */
}
@keyframes animate-rect {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes animate-cross {
  0% {
    transform: rotate(0) scale(1);
  }
  30%, 60% {
    transform: rotate(360deg) scale(1);
  }
  80% {
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
/*** index part 1 Logo ***/
#global-index-part1 {
  position: relative;
  padding: 50px 0px;
}

.card__chip-texture,
.card__texture {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  position: absolute;
  animation-name: texture;
  background-image: linear-gradient(-80deg, hsla(0, 0%, 100%, 0.3) 25%, hsla(0, 0%, 100%, 0) 45%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes texture {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
}
#logo {
  transition: transform 400ms;
}

.smallSquare {
  width: 40%;
  height: 40%;
  top: -20%;
  left: -20%;
  position: absolute;
}

.smallSquare:not(.card-shine-effect), .bigSquarePart1:not(.card-shine-effect), .bigSquarePart2:not(.card-shine-effect) {
  background: #101010;
}

.bigSquare {
  position: relative;
  text-align: right;
}

.bigSquarePart {
  padding: 5px;
  line-height: 0;
  /* ca supprime le white space entre bigSquarePart1 et bigSquarePart2 */
  font-size: 0;
  width: 100%;
  height: 100%;
}

.bigSquarePart1 {
  /*background:#101010;*/
  width: 60%;
  height: 40%;
  display: inline-block;
}

.bigSquarePart2 {
  height: 60%;
  width: 100%;
  display: block;
  /*background:#101010;*/
}

.c-text-shadow {
  text-shadow: -22px -20px 1px rgba(0, 0, 0, 0.6);
}

/* Intro */
#intro {
  position: absolute;
  height: 100vh;
  width: 100vw;
  /*background-image: url('https://johandavid.fr/images/intro_shadows.gif') ;*/
  background-size: cover;
  background-position: 50% 50%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 800ms;
}

.intro-leaves {
  transform: translateY(-100%);
}

#pass-intro {
  transition: transform 200ms;
  border: 2px solid white;
}

#pass-intro:hover {
  background-color: white;
  color: #212121;
  box-shadow: -8px 8px 0px #212121;
  filter: blur(0px);
}

/* Light Button */
#wrap-button {
  position: absolute;
  width: 167px;
  height: 50px;
  background-color: #212121;
  color: white;
  text-align: center;
  font-family: "League Gothic", sans-serif;
  font-size: 2em;
  cursor: pointer;
  line-height: 1.5;
  letter-spacing: 2px;
  user-select: none;
  opacity: 0;
}

#pass-intro {
  position: absolute;
  width: 167px;
  height: 50px;
  background-color: #212121;
  color: white;
  text-align: center;
  font-family: "League Gothic", sans-serif;
  font-size: 2em;
  cursor: pointer;
  line-height: 1.5;
  letter-spacing: 2px;
  user-select: none;
}

#wrap-button:before, #wrap-button:after {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #1e2529, #fff7e9);
  background-size: 800% 100%;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  z-index: -1;
}

#wrap-button:after {
  filter: blur(8px);
}

.button-on:before, .button-on:after {
  animation: lightRotating 400ms forwards;
}

#wrap-message {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#message-1, #message-2 {
  width: 167px;
  height: 50px;
  transition: transform 200ms;
}

.up {
  transform: translateY(-50px);
}

/* Back light */
#lighted-zone {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  opacity: 1;
  /* paramètre par défaut cacher light
  top: -50%;
  left : -50%;
  opacity : 0;
  */
  background: radial-gradient(closest-side, #2e2d2d, #262525, #181818, #0e0e0e, black);
  /*bg officiel */
  /*background: radial-gradient(closest-side, #484848, #2f2f2f, #181818, #0e0e0e, black);*/
  /* lumière plus foncé */
  /*background: radial-gradient(closest-side, #3d3c3c, #232222, #101010, #0e0e0e, black);*/
  z-index: -2;
}

.lighted-zone-on {
  animation: zone-on 600ms forwards;
}

/* Circles */
.circle-body {
  position: absolute;
  height: 40px;
  width: 40px;
  /* on enlève le radius pour faire un carré */
  /*border-radius: 40px;*/
  /*background-color: #646464;*/
  /*background-color: #3d3c3c;*/
  /*background:transparent;*/
  background-color: #343434;
  z-index: 1;
}

.circle {
  position: absolute;
  height: 40px;
  width: 40px;
  filter: brightness(0%);
  opacity: 0;
}

.circle-on {
  animation: zone-on 600ms forwards;
}

/* Shadows */
.wrap-shadow {
  position: absolute;
  top: 20px;
  width: 40px;
  height: 600px;
  transform-origin: top;
  transform: perspective(600px) rotateX(40deg);
}

.shadow {
  height: 100%;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.3) 10%, transparent 100%);
  position: absolute;
}

.shadow-blur {
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent 10%, rgba(0, 0, 0, 0.8) 70%, transparent 90%);
  filter: blur(4px);
  position: absolute;
}

/* Panel (not implemented yet) */
#panel {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 999;
}

#message-panel {
  font-size: 1.3em;
  color: white;
}

#wrap-colored-dots {
  display: flex;
  justify-content: space-between;
  height: 40px;
  background-color: #606060;
  flex-direction: row;
  align-items: center;
}

.colored-dot {
  height: 14px;
  width: 14px;
  border-radius: 10px;
  border: 1px solid #262626;
  cursor: pointer;
  margin: 0px 10px 0px 10px;
}

.colored-dot:hover {
  border: 1px solid white;
}

.red-dot {
  background-color: red;
}

.green-dot {
  background-color: green;
}

.blue-dot {
  background-color: blue;
}

.white-dot {
  background-color: white;
}

/* Animations */
@keyframes lightRotating {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes zone-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*** FIN index part 1 Logo ***/
.parallax-objectif-block1-title {
  white-space: normal;
  overflow-wrap: break-word;
}

.word-gsap-effect {
  display: inline-block;
  white-space: nowrap;
}

.letter-gsap-effect {
  display: inline-block;
}

/*** faq effect ****/
.faq-container {
  max-width: 600px;
  margin: 0 auto;
}

.faq-item {
  position: relative;
  margin-bottom: 40px;
  background: linear-gradient(180deg, rgba(29, 29, 29, 0.9), rgba(255, 255, 255, 0.01));
  box-shadow: 0 2px 2px rgba(46, 46, 46, 0.6);
  /*border: 1px solid transparent;*/
  border: none;
  border-radius: 8px;
  padding: 0;
  transition: border-radius 0.8s ease;
}

.faq-item.active {
  border-radius: 0px;
}

.faq-item.removing {
  border-radius: 0px;
}

.faq-question {
  cursor: pointer;
  padding: 1rem;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  position: relative;
  box-shadow: 0 1px 2px rgba(46, 46, 46, 0.6);
}

.arrow-faq-parent {
  width: 0px;
  height: 0px;
  position: initial;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.arrow-faq {
  top: -1.5rem;
  right: 1.1rem;
  font-size: 1.5rem;
  position: absolute;
  width: 35px;
  height: 35px;
  background: linear-gradient(45deg, #f8d47d, #f2cf79);
  color: #191919;
  font-weight: bold;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.arrow-faq > span {
  display: inline-block;
  padding-top: 7px;
}

.faq-item.active .arrow-faq {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, padding 0.6s ease;
  padding: 0 1rem;
  /*background: linear-gradient(180deg, rgba(29, 29, 29, 0.9), rgba(255, 255, 255, 0.03));*/
  background: linear-gradient(45deg, #f8d47d, #f2cf79);
  color: #191919;
  /*color: #ffffff;*/
  font-size: 1rem;
}

.faq-item.active .faq-answer {
  max-height: fit-content;
  padding: 1rem;
}

/* Border animation elements */
.border-anim {
  pointer-events: none;
}

.border-anim-gris span {
  background: #2b3036;
}

.border-anim-dore span {
  background: #f8d47d;
}

.border-anim span {
  position: absolute;
  display: block;
  transition: all 0.4s ease;
}

/* Top border */
.border-anim .top {
  height: 2px;
  width: 0;
  /*-2px pour passer par dessus bordure de 2px*/
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
}

/* Left border */
.border-anim .left {
  width: 2px;
  height: 0;
  left: -2px;
  top: -2px;
}

/* Right border */
.border-anim .right {
  width: 2px;
  height: 0;
  right: -2px;
  top: -2px;
}

/* Bottom border left */
.border-anim .bottom-left {
  height: 2px;
  width: 0;
  bottom: -2px;
  left: 0;
}

/* Bottom border right */
.border-anim .bottom-right {
  height: 2px;
  width: 0;
  bottom: -2px;
  right: 0;
}

/* When active, animate borders in */
.faq-item.active .border-anim .top {
  width: 100%;
  transition-delay: 0s;
}

.faq-item.active .border-anim .left,
.faq-item.active .border-anim .right {
  /*4px pour les bordures */
  height: calc(100% + 4px);
  transition-delay: 0.4s;
}

.faq-item.active .border-anim .bottom-left,
.faq-item.active .border-anim .bottom-right {
  width: 50%;
  transition-delay: 0.8s;
}

/* When deactivating, reverse animation */
.faq-item.removing .border-anim .bottom-left,
.faq-item.removing .border-anim .bottom-right {
  width: 0;
  transition-delay: 0s;
}

.faq-item.removing .border-anim .left,
.faq-item.removing .border-anim .right {
  height: 0;
  transition-delay: 0.4s;
}

.faq-item.removing .border-anim .top {
  width: 0;
  transition-delay: 0.8s;
}

/**** fin F.A.Q effect ***/
/*** index part 2 room ***/
/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/***********************/
/***********************/
/**/
#global-index-part2 *, #global-index-part2 *::after, #global-index-part2 *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
#global-index-part2 {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: pointer;
  background-image: radial-gradient(circle, #1c1c1c, #000);
}

.face {
  position: absolute;
}

/***************/
.house {
  position: absolute;
  width: 28vw;
  height: 28vw;
  transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translateZ(-9vw);
}

.h-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 1.5vw -3vw 3vw #000, 1.5vw 0.5vw 1.5vw #000;
}

.h-lights {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 45vw;
  height: 45vw;
}

.h-light {
  position: absolute;
}

.h-light:nth-of-type(1) {
  bottom: 5vw;
  right: 0;
  width: 14vw;
  height: 14vw;
  border-radius: 50%;
  background-image: radial-gradient(#2d2d2d, transparent);
  filter: blur(1vw);
}

.h-light:nth-of-type(2) {
  bottom: 18vw;
  right: -1vw;
  width: 2vw;
  height: 12vw;
  border-radius: 50%;
  transform: rotateZ(-50deg);
  background-image: radial-gradient(rgba(36, 36, 36, 0.45) 50%, rgba(20, 20, 20, 0.45), transparent);
  box-shadow: -1vw -1vw 2vw 1vw rgba(214, 214, 214, 0.1);
  filter: blur(1vw);
}

.h-light:nth-of-type(3) {
  bottom: -2vw;
  right: 17vw;
  width: 5vw;
  height: 12vw;
  border-radius: 50%;
  transform: rotateZ(-50deg);
  background-image: radial-gradient(rgba(0, 0, 0, 0.5) 50%, rgba(85, 86, 87, 0.5), transparent);
  filter: blur(2vw);
}

.h-light:nth-of-type(3)::before, .h-light:nth-of-type(3)::after {
  content: "";
  position: absolute;
  width: 200%;
  top: -6vw;
  height: 400%;
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, 0.1), rgba(255, 255, 255, 0.1), transparent);
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
  filter: blur(1.5vw);
}

.h-light:nth-of-type(3)::before {
  right: -50%;
  transform-origin: top right;
  transform: rotateZ(15deg);
  box-shadow: -2vw -2vw 0 rgba(255, 255, 255, 0.075);
}

.h-light:nth-of-type(3)::after {
  left: -50%;
  transform-origin: top left;
  transform: rotateZ(-15deg);
  box-shadow: 2vw -2vw 0 rgba(255, 255, 255, 0.075);
}

.h-light:nth-of-type(4) {
  bottom: 5vw;
  left: 8vw;
  width: 28vw;
  height: 4vw;
  transform-origin: top left;
  transform: skewX(58deg);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.075) 10%, transparent 25%, transparent, rgba(0, 0, 0, 0.15));
  filter: blur(0.25vw);
}

.h-light:nth-of-type(6) {
  bottom: 14vw;
  right: 2vw;
  width: 8vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: skewY(49deg);
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  filter: blur(0.35vw);
}

/***************/
/***************/
.alt {
  position: absolute;
  left: 0;
  top: 0;
  width: 27vw;
  height: 27vw;
}

.alt__front {
  width: 27vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(26.5vw);
}

.alt__back {
  width: 27vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-0.5vw);
}

.alt__right {
  width: 27vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-27vw) translateY(-0.5vw);
}

.alt__left {
  width: 27vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.alt__top {
  width: 27vw;
  height: 27vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}

.alt__bottom {
  width: 27vw;
  height: 27vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-27vw);
}

.alt__front {
  background-color: #c0c0c0;
}

.alt__back {
  background-color: #6e6e6e;
}

.alt__right {
  background-color: #6e6e6e;
}

.alt__left {
  background-color: #fbfafe;
}

.alt__top {
  background-image: linear-gradient(to bottom, #020202, #6e6e6e, #c0c0c0);
}

.alt__top .light:nth-of-type(1) {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to bottom, rgba(110, 110, 110, 0.75), rgba(0, 0, 0, 0.75), transparent);
}

.alt__top .light:nth-of-type(2) {
  position: absolute;
  left: 4vw;
  height: 100%;
  width: 6vw;
  background-image: linear-gradient(to bottom, transparent 20%, rgba(85, 86, 87, 0.75), transparent 80%);
  filter: blur(0.1vw);
}

.alt__top .light:nth-of-type(3) {
  position: absolute;
  bottom: 10vw;
  left: 5vw;
  width: 6vw;
  height: 3vw;
  border-radius: 50%;
  transform: rotateZ(42deg);
  background-image: radial-gradient(rgba(171, 171, 171, 0.75) 50%, rgba(48, 48, 48, 0.75));
  filter: blur(0.55vw);
}

.alt__top .light:nth-of-type(4) {
  position: absolute;
  bottom: 7vw;
  left: 4vw;
  width: 8.5vw;
  height: 2vw;
  border-radius: 50%;
  transform: rotateZ(40deg);
  background-image: radial-gradient(rgba(171, 171, 171, 0.75) 50%, rgba(48, 48, 48, 0.75));
  filter: blur(0.55vw);
}

.alt__top .light:nth-of-type(5) {
  position: absolute;
  bottom: 3.5vw;
  left: 4.5vw;
  width: 6vw;
  height: 2vw;
  border-radius: 50%;
  transform: rotateZ(40deg);
  background-image: radial-gradient(rgba(178, 178, 178, 0.75) 50%, rgba(48, 48, 48, 0.75));
  filter: blur(0.75vw);
}

.alt__top .light:nth-of-type(6) {
  position: absolute;
  bottom: 3vw;
  left: 0.5vw;
  width: 4vw;
  height: 2vw;
  border-radius: 50%;
  transform: rotateZ(40deg);
  background-image: radial-gradient(rgba(159, 159, 159, 0.75) 50%, rgba(255, 255, 255, 0.75));
  filter: blur(0.35vw);
}

.alt__top .light:nth-of-type(7) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient(to right, #000, #292929 10%, transparent 20%);*/
  background-image: linear-gradient(to right, #3b3b3b, #4c4b4b 10%, transparent 20%);
}

.alt__top .light:nth-of-type(7)::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(110, 110, 110, 0.6), transparent 60%);
}

.alt__top .light:nth-of-type(7)::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 60%);
}

.alt__top .light:nth-of-type(8) {
  position: absolute;
  bottom: 5vw;
  left: 10vw;
  width: 6vw;
  height: 4vw;
  border-radius: 50%;
  transform: rotateZ(40deg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(128, 121, 174, 0.1));
  filter: blur(0.8vw);
}

.alt__bottom {
  background-color: #6e6e6e;
}

.alb {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 27vw;
  height: 1vw;
}

.alb__front {
  width: 27vw;
  height: 2vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-1vw);
}

.alb__back {
  width: 27vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-2vw);
}

.alb__right {
  width: 1vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-1vw) translateY(-2vw);
}

.alb__left {
  width: 1vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}

.alb__top {
  width: 27vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(2vw);
}

.alb__bottom {
  width: 27vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-27vw);
}

.alb__front {
  background-image: linear-gradient(to right, #c0c0c0 40%, #f7f7f7);
}

.alb__back {
  background-color: #6e6e6e;
}

.alb__right {
  background-color: #6e6e6e;
}

.alb__left {
  background-color: #fbfafe;
}

.alb__top {
  background-image: linear-gradient(to right, #fbfafe 40%, #f2f2f2);
}

.alb__bottom {
  background-color: #6e6e6e;
}

.arb {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1vw;
  height: 28vw;
}

.arb__front {
  width: 1vw;
  height: 2vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(26vw);
}

.arb__back {
  width: 1vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-2vw);
}

.arb__right {
  width: 28vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-28vw) translateY(-2vw);
}

.arb__left {
  width: 28vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}

.arb__top {
  width: 1vw;
  height: 28vw;
  transform-origin: top left;
  transform: translateZ(2vw);
}

.arb__bottom {
  width: 1vw;
  height: 28vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.arb__front {
  background-color: #f7f7f7;
}

.arb__back {
  background-color: #6e6e6e;
}

.arb__right {
  background-image: linear-gradient(to right, #3b3b3b 40%, #1a1a1a);
}

.arb__left {
  background-color: #c0c0c0;
}

.arb__top {
  background-image: linear-gradient(to top, #fbfafe, #646465 25%, #2e2e2f 75%, #c0c0c0);
}

.arb__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  top: 0;
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.85), transparent);
}

.arb__bottom {
  background-color: #6e6e6e;
}

/***************/
/***************/
.blt {
  position: absolute;
  left: 0;
  top: 0;
  width: 1vw;
  height: 27vw;
  transform: translateZ(0.5vw);
}

.blt__front {
  width: 1vw;
  height: 20vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7vw);
}

.blt__back {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-20vw);
}

.blt__right {
  width: 27vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-27vw) translateY(-20vw);
}

.blt__left {
  width: 27vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}

.blt__top {
  width: 1vw;
  height: 27vw;
  transform-origin: top left;
  transform: translateZ(20vw);
}

.blt__bottom {
  width: 1vw;
  height: 27vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.blt__front {
  background-image: linear-gradient(to bottom, #6e6e6e, #c0c0c0);
}

.blt__back {
  background-color: #6e6e6e;
}

.blt__right {
  /*background-image: linear-gradient(to bottom, #1e1e1e, #6e6e6e, #6e6e6e 90%, #242040);*/
  background-image: linear-gradient(to bottom, #181818, #424242, #282828 90%, #1f1f20);
}

.blt__right::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.75vw;
  background-image: linear-gradient(to bottom, #f7f7f7, #717171);
  border-top: 0.1vw solid #3b3b3b;
  border-bottom: 0.1vw solid #3b3b3b;
}

.blt__right::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(85, 86, 87, 0.35));
}

.blt__left {
  background-color: #fbfafe;
}

.blt__bottom {
  background-color: #6e6e6e;
}

.blt2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 2vw;
  height: 27vw;
  transform: translateZ(20.5vw);
}

.blt2__front {
  width: 2vw;
  height: 0.75vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(26.25vw);
}

.blt2__back {
  width: 2vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.75vw);
}

.blt2__right {
  width: 27vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-27vw) translateY(-0.75vw);
}

.blt2__left {
  width: 27vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.blt2__top {
  width: 2vw;
  height: 27vw;
  transform-origin: top left;
  transform: translateZ(0.75vw);
}

.blt2__bottom {
  width: 2vw;
  height: 27vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-2vw);
}

.blt2__front {
  background-color: #6e6e6e;
}

.blt2__back {
  background-color: #6e6e6e;
}

.blt2__right {
  background-image: linear-gradient(to right, #f7f7f7, #c0c0c0, #777777);
}

.blt2__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  border-bottom: 0.1vw solid rgba(251, 250, 254, 0.75);
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.35), transparent);
}

.blt2__left {
  background-color: #fbfafe;
}

.blt2__top {
  background-image: linear-gradient(to top, #c0c0c0, #fbfafe);
}

.blt2__bottom {
  background-color: #6e6e6e;
}

.blb {
  position: absolute;
  left: 1vw;
  top: 0;
  width: 26vw;
  height: 1vw;
  transform: translateZ(0.5vw);
}

.blb__front {
  width: 26vw;
  height: 20vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-19vw);
}

.blb__back {
  width: 26vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-20vw);
}

.blb__right {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-1vw) translateY(-20vw);
}

.blb__left {
  width: 1vw;
  height: 20vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}

.blb__top {
  width: 26vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(20vw);
}

.blb__bottom {
  width: 26vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-26vw);
}

.blb__front {
  /*desactive background-image: linear-gradient(to bottom, #4b4572, #595388 20%, #4b4572); */
  background-image: linear-gradient(to bottom, #000000, #444444 20%, #1d1d1d);
}

.blb__front::before {
  /*ajout du left par la suite ya eu un décalage faut rajouter left*/
  left: 0;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient(to bottom, rgba(85, 86, 87, .25), transparent 20%, transparent 80%, rgba(85, 86, 87, .5)), linear-gradient(to right, rgba(69, 69, 69, .35), transparent), linear-gradient(to bottom, rgba(69, 69, 69, .35), transparent), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 20%, transparent 80%, rgba(85, 86, 87, .25));*/
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, 0.25), transparent 20%, transparent 80%, rgba(85, 86, 87, 0.5)), linear-gradient(to right, rgba(69, 69, 69, 0.35), transparent), linear-gradient(to bottom, rgba(47, 47, 47, 0.35), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 20%, transparent 80%, rgba(85, 86, 87, 0.25));
  background-image: linear-gradient(to bottom, rgba(70, 70, 70, 0.25), transparent 20%, transparent 80%, rgba(44, 44, 44, 0.5)), linear-gradient(to right, rgba(36, 36, 36, 0.35), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 20%, transparent 80%, rgba(85, 86, 87, 0.25));
}

.blb__front::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0.75vw;
  background-image: linear-gradient(to bottom, #f7f7f7, #717171);
  border-top: 0.1vw solid #3b3b3b;
  border-bottom: 0.1vw solid #3b3b3b;
}

.blb__back {
  background-color: #6e6e6e;
}

.blb__right {
  background-image: linear-gradient(to bottom, #1e1e1e, #1a1a1a 80%, #1e1e1e);
}

.blb__bottom {
  background-color: #6e6e6e;
}

.blb2 {
  position: absolute;
  left: 2vw;
  top: 0;
  width: 25vw;
  height: 1vw;
  transform: translateZ(20.5vw);
}

.blb2__front {
  width: 25vw;
  height: 0.75vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(1.25vw);
}

.blb2__back {
  width: 25vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-0.75vw);
}

.blb2__right {
  width: 2vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-2vw) translateY(-0.75vw);
}

.blb2__left {
  width: 2vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.blb2__top {
  width: 25vw;
  height: 2vw;
  transform-origin: top left;
  transform: translateZ(0.75vw);
}

.blb2__bottom {
  width: 25vw;
  height: 2vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-25vw);
}

.blb2__front {
  background-image: linear-gradient(to right, #777777, #c0c0c0, #f7f7f7);
}

.blb2__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  border-bottom: 0.1vw solid rgba(251, 250, 254, 0.75);
  background-image: linear-gradient(to top, rgba(85, 86, 87, 0.25), transparent);
}

.blb2__back {
  background-color: #6e6e6e;
}

.blb2__right {
  background-color: #1e1e1e;
}

.blb2__left {
  background-color: #c0c0c0;
}

.blb2__top {
  background-image: linear-gradient(to left, #c0c0c0, #fbfafe);
}

.blb2__bottom {
  background-color: #6e6e6e;
}

/***************/
/***************/
.bocina-l, .bocina-r {
  position: absolute;
  left: 1.5vw;
  bottom: 5.25vw;
  width: 0.75vw;
  height: 1.5vw;
  transform: translateZ(8vw);
}

.bocina-l__front, .bocina-r__front {
  width: 0.75vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-4.5vw);
}

.bocina-l__back, .bocina-r__back {
  width: 0.75vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.75vw) translateY(-6vw);
}

.bocina-l__right, .bocina-r__right {
  width: 1.5vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.75vw) translateX(-1.5vw) translateY(-6vw);
}

.bocina-l__left, .bocina-r__left {
  width: 1.5vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}

.bocina-l__top, .bocina-r__top {
  width: 0.75vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: translateZ(6vw);
}

.bocina-l__bottom, .bocina-r__bottom {
  width: 0.75vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.75vw);
}

.bocina-l__right, .bocina-r__right {
  background-image: radial-gradient(#000, #000);
}

.bocina-l__top, .bocina-r__top {
  background-image: linear-gradient(to left, #bababa, #c0c0c0, #777777);
}

.bocina-l__bottom, .bocina-r__bottom {
  background-color: #6e6e6e;
}

.bocina-l__front {
  background-image: linear-gradient(to right, #262626, #212121 30%, #121212);
}

.bocina-l__back {
  background-image: linear-gradient(to right, #6e6e6e, #232038);
}

.bocina-l__back::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.35) 65%, rgba(255, 255, 255, 0.95));
}

.bocina-l__left {
  background-color: #3b3b3b;
}

.bocina-l__left::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 20%;
  width: 120%;
  height: 120%;
  background-image: linear-gradient(to left, rgba(7, 23, 39, 0.75), rgba(0, 0, 0, 0.75));
  filter: blur(0.5vw);
}

.bocina-r {
  top: 5.25vw;
}

.bocina-r__front {
  background-image: linear-gradient(to right, #6e6e6e, #1a1a1a);
}

.bocina-r__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /*background-image: linear-gradient(to left, rgba(255, 255, 255, .35) 65%, rgba(255, 255, 255, .95));*/
  background-image: linear-gradient(to left, rgba(11, 11, 11, 0.35) 65%, rgba(26, 26, 26, 0.95));
}

.bocina-r__back {
  background-image: linear-gradient(to right, #595388, #ebebeb);
}

.bocina-r__left {
  background-color: #3b3b3b;
}

.bocina-r__left::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 120%;
  height: 120%;
  background-image: linear-gradient(to right, rgba(7, 23, 39, 0.75), rgba(0, 0, 0, 0.75));
  filter: blur(0.5vw);
}

.repisa-t, .repisa-b {
  position: absolute;
  left: 1.5vw;
  top: 9vw;
  width: 1.5vw;
  height: 10vw;
  transform: translateZ(16vw);
}

.repisa-t__front, .repisa-b__front {
  width: 1.5vw;
  height: 0.25vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(9.75vw);
}

.repisa-t__back, .repisa-b__back {
  width: 1.5vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1.5vw) translateY(-0.25vw);
}

.repisa-t__right, .repisa-b__right {
  width: 10vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-10vw) translateY(-0.25vw);
}

.repisa-t__left, .repisa-b__left {
  width: 10vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}

.repisa-t__top, .repisa-b__top {
  width: 1.5vw;
  height: 10vw;
  transform-origin: top left;
  transform: translateZ(0.25vw);
}

.repisa-t__bottom, .repisa-b__bottom {
  width: 1.5vw;
  height: 10vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1.5vw);
}

.repisa-t__front, .repisa-b__front {
  background-color: #c0c0c0;
}

.repisa-t__back, .repisa-b__back {
  background-color: #fbfafe;
}

.repisa-t__right, .repisa-b__right {
  background-color: #989898;
}

.repisa-t__left, .repisa-b__left {
  background-color: #fbfafe;
}

.repisa-t__top, .repisa-b__top {
  background-color: #bababa;
}

.repisa-t__top::before, .repisa-b__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent);
}

.repisa-t__bottom, .repisa-b__bottom {
  background-color: #6e6e6e;
}

.repisa-t__bottom::before, .repisa-b__bottom::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), transparent);
}

.repisa-b {
  transform: translateZ(5vw);
}

.tv {
  position: absolute;
  left: 1.51vw;
  top: 8vw;
  width: 0.5vw;
  height: 12vw;
  transform: translateZ(8vw);
}

.tv__front {
  width: 0.5vw;
  height: 6vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(6vw);
}

.tv__back {
  width: 0.5vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-6vw);
}

.tv__right {
  width: 12vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-12vw) translateY(-6vw);
}

.tv__left {
  width: 12vw;
  height: 6vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}

.tv__top {
  width: 0.5vw;
  height: 12vw;
  transform-origin: top left;
  transform: translateZ(6vw);
}

.tv__bottom {
  width: 0.5vw;
  height: 12vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.5vw);
}

.tv__front {
  background-color: #020202;
}

.tv__back {
  background-color: #020202;
}

.tv__right {
  background-color: #606060;
  border: 0.125vw solid #000;
  animation: pantalla-tv 0.25s infinite alternate;
}

.tv__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /** desactive
  box-shadow: 0.125vw 0.125vw 1vw rgba(255, 255, 255, .5), -0.125vw 0.125vw 1vw rgba(255, 255, 255, .5), 0.125vw -0.125vw 1vw rgba(255, 255, 255, .5), -0.125vw -0.125vw 1vw rgba(255, 255, 255, .5);
  */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  opacity: 0.8;
}

.tv__left {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #020202;
}

.tv__left::before {
  content: "";
  position: absolute;
  width: 13vw;
  height: 7vw;
  background-image: radial-gradient(rgba(244, 244, 244, 0.95), rgba(255, 255, 255, 0.95));
  filter: blur(1.25vw);
  animation: luz-tv 0.25s infinite alternate;
}

.tv__top {
  background-color: #020202;
}

.tv__bottom {
  background-color: #020202;
}

.librero {
  position: absolute;
  left: 13vw;
  top: 1vw;
  width: 12vw;
  height: 0.5vw;
  transform: translateZ(7vw);
}

.librero__front {
  width: 12vw;
  height: 0.25vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(1.25vw);
}

.librero__back {
  width: 12vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-0.25vw);
}

.librero__right {
  width: 1.5vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-1.5vw) translateY(-0.25vw);
}

.librero__left {
  width: 1.5vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}

.librero__top {
  width: 12vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: translateZ(0.25vw);
}

.librero__bottom {
  width: 12vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-12vw);
}

.librero__front {
  background-color: #c0c0c0;
}

.librero__back {
  background-color: #6e6e6e;
}

.librero__back::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4vw;
  border-radius: 50%;
  background-image: radial-gradient(rgba(49, 49, 49, 0.7) 50%, rgba(255, 255, 255, 0.6), transparent);
  filter: blur(1.25vw);
}

.librero__right {
  background-color: #6e6e6e;
}

.librero__left {
  background-color: #c0c0c0;
}

.librero__top {
  background-color: #bababa;
}

.librero__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(217, 217, 217, 0.75), transparent);
}

.librero__bottom {
  background-color: #6e6e6e;
}

.librero__bottom::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(217, 217, 217, 0.75), transparent);
}

.libros {
  position: absolute;
}

.libro {
  position: absolute;
  top: 1vw;
  width: 0.5vw;
  height: 1vw;
  transform: translateZ(7.25vw);
}

.libro__front {
  width: 0.5vw;
  height: 1.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-0.5vw);
}

.libro__back {
  width: 0.5vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-1.5vw);
}

.libro__right {
  width: 1vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-1vw) translateY(-1.5vw);
}

.libro__left {
  width: 1vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw);
}

.libro__top {
  width: 0.5vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(1.5vw);
}

.libro__bottom {
  width: 0.5vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.5vw);
}

.libro__front {
  background-image: linear-gradient(to bottom, #c0c0c0, #989898);
}

.libro__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
}

.libro__back {
  background-color: #fbfafe;
}

.libro__right {
  background-color: #a1a1a1;
}

.libro__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(85, 86, 87, 0.35));
}

.libro__left {
  background-color: #c0c0c0;
}

.libro__top {
  background-color: #bababa;
}

.libro__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(85, 86, 87, 0.35));
}

.libro__bottom {
  background-color: #5d5d5d;
}

.libro:nth-of-type(1) {
  left: 16vw;
  transform-origin: left;
  transform: translateZ(7.25vw) rotateZ(-10deg);
}

.libro:nth-of-type(2) {
  left: 17vw;
  transform: translateZ(7.25vw) rotateZ(2deg);
}

.libro:nth-of-type(3) {
  left: 17.75vw;
  transform: translateZ(7.25vw) rotateZ(5deg);
}

.libro:nth-of-type(4) {
  left: 19vw;
  transform-origin: left;
  transform: translateZ(7.25vw) rotateZ(10deg);
}

.libro:nth-of-type(5) {
  left: 20vw;
  transform-origin: left;
  transform: translateZ(7.25vw) rotateZ(10deg);
}

.libro:nth-of-type(6) {
  left: 23vw;
  transform-origin: left;
  transform: translateZ(7.25vw) rotateY(-90deg);
}

.fotos {
  position: absolute;
}

.foto {
  position: absolute;
  width: 0.125vw;
  height: 2vw;
  left: 2vw;
  top: 11vw;
  transform: translateZ(5.26vw);
}

.foto__front {
  width: 0.125vw;
  height: 1.125vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(1.125vw);
}

.foto__back {
  width: 0.125vw;
  height: 1.125vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.125vw) translateY(-1.125vw);
}

.foto__right {
  width: 2.25vw;
  height: 1.125vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.125vw) translateX(-2.25vw) translateY(-1.125vw);
}

.foto__left {
  width: 2.25vw;
  height: 1.125vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.125vw);
}

.foto__top {
  width: 0.125vw;
  height: 2.25vw;
  transform-origin: top left;
  transform: translateZ(1.125vw);
}

.foto__bottom {
  width: 0.125vw;
  height: 2.25vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.125vw);
}

.foto__front {
  background-image: linear-gradient(to bottom, #c0c0c0, #989898);
}

.foto__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
}

.foto__back {
  background-color: #fbfafe;
}

.foto__right {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
  border: 0.15vw solid #484848;
}

.foto__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom, #c0c0c0 0.1vw, #ebebeb 0.2vw);
}

.foto__left {
  background-color: #c0c0c0;
}

.foto__top {
  background-color: #bababa;
}

.foto__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(85, 86, 87, 0.35));
}

.foto__bottom {
  background-color: #595388;
}

.foto__bottom::before {
  content: "";
  position: absolute;
  right: -100%;
  width: 400%;
  height: 100%;
  background-color: rgba(18, 18, 18, 0.75);
  filter: blur(0.15vw);
}

.foto:nth-of-type(1) {
  top: 10.5vw;
  transform: translateZ(5.26vw) rotateZ(5deg);
}

.foto:nth-of-type(2) {
  top: 15vw;
  transform: translateZ(5.26vw) rotateZ(-15deg);
}

.cajas {
  position: absolute;
}

.caja {
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  left: 2vw;
  transform: translateZ(16.35vw);
}

.caja__front {
  width: 1vw;
  height: 0.75vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.75vw);
}

.caja__back {
  width: 1vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.75vw);
}

.caja__right {
  width: 1.5vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-1.5vw) translateY(-0.75vw);
}

.caja__left {
  width: 1.5vw;
  height: 0.75vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.caja__top {
  width: 1vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: translateZ(0.75vw);
}

.caja__bottom {
  width: 1vw;
  height: 1.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.caja__front {
  background-image: linear-gradient(to bottom, #c0c0c0, #989898);
}

.caja__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
}

.caja__back {
  background-color: #c0c0c0;
}

.caja__right {
  background-color: #a1a1a1;
}

.caja__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(85, 86, 87, 0.35));
}

.caja__left {
  background-color: #c0c0c0;
}

.caja__top {
  background-color: #bababa;
}

.caja__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(85, 86, 87, 0.35));
}

.caja__bottom {
  background-color: #595388;
}

.caja__bottom::before {
  content: "";
  position: absolute;
  right: -50%;
  width: 150%;
  height: 120%;
  background-color: rgba(69, 69, 69, 0.5);
  filter: blur(0.15vw);
}

.caja:nth-of-type(1) {
  top: 11.6vw;
}

.caja:nth-of-type(2) {
  top: 13.5vw;
}

.caja:nth-of-type(3) {
  top: 17vw;
}

.cuadro-l, .cuadro-r {
  position: absolute;
  left: 13vw;
  top: 1vw;
  width: 12vw;
  height: 0.5vw;
  transform: translateZ(10vw);
}

.cuadro-l__front, .cuadro-r__front {
  width: 12vw;
  height: 7vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-6.75vw);
}

.cuadro-l__back, .cuadro-r__back {
  width: 12vw;
  height: 7vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-7vw);
}

.cuadro-l__right, .cuadro-r__right {
  width: 0.25vw;
  height: 7vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-0.25vw) translateY(-7vw);
}

.cuadro-l__left, .cuadro-r__left {
  width: 0.25vw;
  height: 7vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
}

.cuadro-l__top, .cuadro-r__top {
  width: 12vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: translateZ(7vw);
}

.cuadro-l__bottom, .cuadro-r__bottom {
  width: 12vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-12vw);
}

.cuadro-l__front, .cuadro-r__front {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.cuadro-l__back, .cuadro-r__back {
  background-color: #6e6e6e;
  box-shadow: 0.35vw 0.35vw 0.35vw rgba(255, 255, 255, 0.2), -0.35vw 0.35vw 0.35vw rgba(255, 255, 255, 0.2), -0.35vw -0.35vw 0.35vw rgba(255, 255, 255, 0.2), 0.35vw -0.35vw 0.35vw rgba(255, 255, 255, 0.2);
}

.cuadro-l__right, .cuadro-r__right {
  background-color: #6e6e6e;
}

.cuadro-l__left, .cuadro-r__left {
  background-color: #c0c0c0;
}

.cuadro-l__top, .cuadro-r__top {
  background-color: #c0c0c0;
}

.cuadro-l__bottom, .cuadro-r__bottom {
  background-color: #6e6e6e;
}

.cuadro-l__front {
  background-color: #ffffff;
  /*background-color: #202020;*/
  /*border: 1vw solid #d51e24;*/
  border: 0vw;
}

.cuadro-l__front::before {
  content: "";
  position: absolute;
  /*top: -1vw;
  left: -1vw;*/
  top: 0vw;
  left: 0vw;
  width: 12vw;
  height: 7vw;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, 0.15), rgba(85, 86, 87, 0.15));
}

.cuadro-r {
  left: 20vw;
  display: none;
}

.cuadro-r__front {
  background-color: #0f1110;
  border: 0vw solid #0f1110;
}

.cuadro-r__front::before {
  content: "";
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 5vw;
  height: 7vw;
  background-origin: padding-box;
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, 0.15), rgba(85, 86, 87, 0.15));
}

.puerta-c {
  position: absolute;
  left: 3vw;
  top: 1vw;
  width: 8vw;
  height: 0.5vw;
  transform: translateZ(0.5vw);
}

.puerta-c::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 200%;
  background-color: rgba(0, 0, 0, 0.65);
  filter: blur(0.5vw);
}

.puerta {
  position: absolute;
  left: 0.5vw;
  top: 0;
  width: 7vw;
  height: 0.5vw;
}

.puerta__front {
  width: 7vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-15.75vw);
}

.puerta__back {
  width: 7vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-16vw);
}

.puerta__right {
  width: 0.25vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-0.25vw) translateY(-16vw);
}

.puerta__left {
  width: 0.25vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}

.puerta__top {
  width: 7vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: translateZ(16vw);
}

.puerta__bottom {
  width: 7vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-7vw);
}

.puerta__front {
  background-image: linear-gradient(to bottom, #0f1110, #242424);
  border: 0.125vw solid #292929;
}

.puerta__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 50%, rgba(57, 57, 57, 0.25));
  box-shadow: 0.65vw 0.65vw 0.5vw rgba(0, 0, 0, 0.6), -0.65vw 0.65vw 0.5vw rgba(0, 0, 0, 0.6), -0.65vw -0.65vw 0.5vw rgba(0, 0, 0, 0.6), 0.65vw -0.65vw 0.5vw rgba(0, 0, 0, 0.6);
}

.puerta__front::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75vw;
  width: 1vw;
  height: 0.25vw;
  background-color: #c0c0c0;
  box-shadow: 0.125vw 0.125vw 0.25vw rgba(255, 255, 255, 0.6), -0.125vw 0.125vw 0.25vw rgba(255, 255, 255, 0.6), -0.125vw -0.125vw 0.25vw rgba(255, 255, 255, 0.6), 0.125vw -0.125vw 0.25vw rgba(255, 255, 255, 0.6);
}

.puerta-l, .puerta-r {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.5vw;
  height: 0.5vw;
}

.puerta-l__front, .puerta-r__front {
  width: 0.5vw;
  height: 16vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-15.5vw);
}

.puerta-l__back, .puerta-r__back {
  width: 0.5vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-16vw);
}

.puerta-l__right, .puerta-r__right {
  width: 0.5vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-16vw);
}

.puerta-l__left, .puerta-r__left {
  width: 0.5vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}

.puerta-l__top, .puerta-r__top {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(16vw);
}

.puerta-l__bottom, .puerta-r__bottom {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.5vw);
}

.puerta-l__front, .puerta-r__front {
  background-color: #242424;
}

.puerta-l__back, .puerta-r__back {
  background-color: #020202;
}

.puerta-l__right, .puerta-r__right {
  background-color: #020202;
}

.puerta-l__left, .puerta-r__left {
  background-color: #242424;
}

.puerta-l__bottom, .puerta-r__bottom {
  background-color: #020202;
}

.puerta-r {
  left: calc(100% - 0.5vw);
}

.puerta-t {
  left: 0;
  top: 0;
  width: 8vw;
  height: 0.5vw;
  transform: translateZ(16vw);
}

.puerta-t__front {
  width: 8vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0vw);
}

.puerta-t__back {
  width: 8vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.5vw);
}

.puerta-t__right {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-0.5vw) translateY(-0.5vw);
}

.puerta-t__left {
  width: 0.5vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.puerta-t__top {
  width: 8vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}

.puerta-t__bottom {
  width: 8vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-8vw);
}

.puerta-t__front {
  background-color: #242424;
}

.puerta-t__back {
  background-color: #020202;
}

.puerta-t__right {
  background-color: #020202;
}

.puerta-t__left {
  background-color: #242424;
}

.puerta-t__top {
  background-color: #484848;
}

.puerta-t__bottom {
  background-color: #020202;
}

.muro {
  position: absolute;
  left: 1vw;
  top: 6vw;
  width: 0.5vw;
  height: 16vw;
  transform: translateZ(0.51vw);
}

.muro__front {
  width: 0.5vw;
  height: 18vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-2vw);
}

.muro__back {
  width: 0.5vw;
  height: 18vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-18vw);
}

.muro__right {
  width: 16vw;
  height: 18vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-16vw) translateY(-18vw);
}

.muro__left {
  width: 16vw;
  height: 18vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-18vw);
}

.muro__top {
  width: 0.5vw;
  height: 16vw;
  transform-origin: top left;
  transform: translateZ(18vw);
}

.muro__bottom {
  width: 0.5vw;
  height: 16vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.5vw);
}

.muro__front {
  background-color: #020202;
}

.muro__back {
  background-color: #020202;
}

.muro__right {
  display: flex;
  justify-content: center;
  /*background-image: radial-gradient(circle, #484848, #020202);*/
  background-image: radial-gradient(circle, #484848, #020202);
  overflow: hidden;
}

.muro__right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  /*
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, .25), transparent 30%, transparent 70%, rgba(85, 86, 87, .15));*/
  background-image: linear-gradient(to bottom, rgba(108, 108, 108, 0.25), transparent 30%, transparent 70%, rgba(27, 27, 27, 0.15));
}

.muro__right::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 90%;
  height: 25%;
  /*background-image: linear-gradient(to bottom, rgba(4, 5, 13, .75), rgba(4, 5, 13, .95));*/
  background-image: linear-gradient(to bottom, rgba(22, 22, 22, 0.75), rgba(15, 15, 15, 0.95));
  filter: blur(0.75vw);
}

.muro__left {
  background-color: #020202;
  box-shadow: 0.5vw 0.5vw 0.6vw rgba(255, 255, 255, 0.3), 0.5vw -0.5vw 0.6vw rgba(255, 255, 255, 0.3), -0.5vw 0.5vw 0.6vw rgba(255, 255, 255, 0.3), -0.5vw -0.5vw 0.6vw rgba(255, 255, 255, 0.3);
}

.muro__top {
  background-color: #020202;
}

.muro__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  background-image: linear-gradient(to left, rgba(85, 86, 87, 0.5), rgba(255, 255, 255, 0.25));
}

.muro__bottom {
  background-color: #020202;
}

.muro__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 5vw;
  height: 100%;
  background-image: linear-gradient(to left, #020202, transparent 50%);
  transform-origin: right bottom;
  transform: skewY(-20deg);
  filter: blur(0.25vw);
}

.sillon-c {
  position: absolute;
  right: 2vw;
  bottom: 6vw;
  width: 6vw;
  height: 16vw;
  transform: translateZ(0.5vw);
}

.sillon-c::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-color: rgba(18, 18, 18, 0.85);
  filter: blur(0.75vw);
}

.sillon-b {
  position: absolute;
  left: 0;
  top: 1vw;
  width: 6vw;
  height: 14vw;
}

.sillon-b__front {
  width: 6vw;
  height: 3vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(11vw);
}

.sillon-b__back {
  width: 6vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-3vw);
}

.sillon-b__right {
  width: 14vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-14vw) translateY(-3vw);
}

.sillon-b__left {
  width: 14vw;
  height: 3vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}

.sillon-b__top {
  width: 6vw;
  height: 14vw;
  transform-origin: top left;
  transform: translateZ(3vw);
}

.sillon-b__bottom {
  width: 6vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-6vw);
}

.sillon-b__front {
  background-color: #242424;
}

.sillon-b__back {
  background-color: #020202;
}

.sillon-b__right {
  background-color: #020202;
}

.sillon-b__left {
  background-image: linear-gradient(to bottom, #242424, #020202);
}

.sillon-b__left::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(85, 86, 87, 0.1), transparent);
}

.sillon-b__top {
  background-image: linear-gradient(to right, #484848, #242424);
  border-left: 0.1vw solid rgba(49, 49, 49, 0.5);
}

.sillon-b__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(85, 86, 87, 0.25), transparent);
}

.sillon-b__bottom {
  background-color: #020202;
}

.sillon-l, .sillon-r {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6vw;
  height: 1vw;
}

.sillon-l__front, .sillon-r__front {
  width: 6vw;
  height: 4.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-3.5vw);
}

.sillon-l__back, .sillon-r__back {
  width: 6vw;
  height: 4.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-4.5vw);
}

.sillon-l__right, .sillon-r__right {
  width: 1vw;
  height: 4.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-1vw) translateY(-4.5vw);
}

.sillon-l__left, .sillon-r__left {
  width: 1vw;
  height: 4.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-4.5vw);
}

.sillon-l__top, .sillon-r__top {
  width: 6vw;
  height: 1vw;
  transform-origin: top left;
  transform: translateZ(4.5vw);
}

.sillon-l__bottom, .sillon-r__bottom {
  width: 6vw;
  height: 1vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-6vw);
}

.sillon-l__front, .sillon-r__front {
  background-image: linear-gradient(to bottom, #242424, #020202);
}

.sillon-l__back, .sillon-r__back {
  background-color: #020202;
}

.sillon-l__right, .sillon-r__right {
  background-image: linear-gradient(to bottom, #020202, #000);
}

.sillon-l__left, .sillon-r__left {
  background-image: linear-gradient(to bottom, #242424, #020202);
}

.sillon-l__top, .sillon-r__top {
  background-image: linear-gradient(to right, #484848, #0c0c0c);
  border-bottom: 0.1vw solid rgba(49, 49, 49, 0.5);
}

.sillon-l__top::before, .sillon-r__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(85, 86, 87, 0.75), transparent);
}

.sillon-l__bottom, .sillon-r__bottom {
  background-color: #020202;
}

.sillon-r {
  top: 0;
}

.sillon-t {
  position: absolute;
  right: 0;
  top: 1vw;
  width: 1vw;
  height: 1vw;
  transform-origin: right;
  transform: rotateY(7deg);
}

.sillon-t__front {
  width: 1vw;
  height: 6.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(7.5vw);
}

.sillon-t__back {
  width: 1vw;
  height: 6.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-6.5vw);
}

.sillon-t__right {
  width: 14vw;
  height: 6.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-14vw) translateY(-6.5vw);
}

.sillon-t__left {
  width: 14vw;
  height: 6.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-6.5vw);
}

.sillon-t__top {
  width: 1vw;
  height: 14vw;
  transform-origin: top left;
  transform: translateZ(6.5vw);
}

.sillon-t__bottom {
  width: 1vw;
  height: 14vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vw);
}

.sillon-t__front {
  background-image: linear-gradient(to bottom, #020202, #070814);
}

.sillon-t__back {
  background-image: linear-gradient(to bottom, #020202, #020202);
}

.sillon-t__right {
  background-image: linear-gradient(to bottom, #020202, #000);
}

.sillon-t__left {
  background-color: #242424;
}

.sillon-t__top {
  background-image: linear-gradient(to right, #484848, #0c0c0c);
  border-bottom: 0.1vw solid rgba(49, 49, 49, 0.5);
}

.sillon-t__top::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(85, 86, 87, 0.5), transparent);
}

.sillon-t__bottom {
  background-color: #020202;
}

.mesa-c {
  position: absolute;
  left: 7vw;
  top: 9.5vw;
  width: 10vw;
  height: 9vw;
  transform: translateZ(0.5vw);
}

.mesa-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10%;
  background-color: rgba(18, 18, 18, 0.95);
  filter: blur(1vw);
  transform: translateZ(0);
}

.mesa {
  position: absolute;
  left: 0;
  top: 0;
  width: 10vw;
  height: 9vw;
  transform: translateZ(2vw);
}

.mesa__front {
  width: 10vw;
  height: 0.5vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(8.5vw);
}

.mesa__back {
  width: 10vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-0.5vw);
}

.mesa__right {
  width: 9vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-9vw) translateY(-0.5vw);
}

.mesa__left {
  width: 9vw;
  height: 0.5vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.mesa__top {
  width: 10vw;
  height: 9vw;
  transform-origin: top left;
  transform: translateZ(0.5vw);
}

.mesa__bottom {
  width: 10vw;
  height: 9vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-10vw);
}

.mesa__front {
  background-image: linear-gradient(to right, #020202, #000);
}

.mesa__front::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.125), rgba(144, 144, 144, 0.25), transparent 55%);
}

.mesa__back {
  background-color: #020202;
}

.mesa__right {
  background-color: #000;
}

.mesa__left {
  background-color: #242424;
}

.mesa__top {
  background-image: linear-gradient(45deg, #191919, #000000);
  overflow: hidden;
}

.mesa__top::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 50%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5), rgba(251, 250, 254, 0.125) 50%, transparent 55%);
  filter: blur(0.5vw);
}

.mesa__top::after {
  content: "";
  position: absolute;
  left: 2vw;
  top: 2vw;
  width: 20%;
  height: 50%;
  border-radius: 50%;
  background-color: rgba(85, 86, 87, 0.079);
  transform: rotateZ(-40deg);
  filter: blur(0.75vw);
}

.mesa__bottom {
  background-color: #020202;
}

.mesa-p {
  position: absolute;
  width: 0.25vw;
  height: 0.25vw;
}

.mesa-p__front {
  width: 0.25vw;
  height: 1.75vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(-1.5vw);
}

.mesa-p__back {
  width: 0.25vw;
  height: 1.75vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-0.25vw) translateY(-1.75vw);
}

.mesa-p__right {
  width: 0.25vw;
  height: 1.75vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.25vw) translateX(-0.25vw) translateY(-1.75vw);
}

.mesa-p__left {
  width: 0.25vw;
  height: 1.75vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw);
}

.mesa-p__top {
  width: 0.25vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: translateZ(1.75vw);
}

.mesa-p__bottom {
  width: 0.25vw;
  height: 0.25vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-0.25vw);
}

.mesa-p__front {
  background-color: #020202;
}

.mesa-p__back {
  background-color: #020202;
}

.mesa-p__right {
  background-color: #000;
}

.mesa-p__left {
  background-color: #242424;
}

.mesa-p__top {
  background-color: #484848;
}

.mesa-p__bottom {
  background-color: #020202;
}

.mesa-p__bottom::before {
  content: "";
  position: absolute;
  width: 600%;
  height: 200%;
  top: 0;
  right: 0;
  border-radius: 10%;
  transform: translateZ(-0.1vw);
  background-color: rgba(0, 0, 0, 0.75);
  filter: blur(0.35vw);
}

.mesa-p:nth-of-type(1) {
  left: 0.5vw;
  top: 0.5vw;
}

.mesa-p:nth-of-type(2) {
  right: 0.5vw;
  top: 0.5vw;
}

.mesa-p:nth-of-type(3) {
  left: 0.5vw;
  bottom: 0.5vw;
}

.mesa-p:nth-of-type(4) {
  right: 0.5vw;
  bottom: 0.5vw;
}

.tablet {
  position: absolute;
  left: 13vw;
  top: 12vw;
  width: 2vw;
  height: 2.5vw;
  transform: translateZ(3.01vw) rotateZ(15deg);
}

.tablet__front {
  width: 2vw;
  height: 0.125vw;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(2.375vw);
}

.tablet__back {
  width: 2vw;
  height: 0.125vw;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.125vw);
}

.tablet__right {
  width: 2.5vw;
  height: 0.125vw;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-2.5vw) translateY(-0.125vw);
}

.tablet__left {
  width: 2.5vw;
  height: 0.125vw;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.125vw);
}

.tablet__top {
  width: 2vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: translateZ(0.125vw);
}

.tablet__bottom {
  width: 2vw;
  height: 2.5vw;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-2vw);
}

.tablet__front {
  background-color: #989898;
}

.tablet__back {
  background-color: #6e6e6e;
}

.tablet__right {
  background-color: #6e6e6e;
}

.tablet__left {
  background-color: #c0c0c0;
}

.tablet__top {
  background-color: #d7d7d7;
  border: 0.2vw solid rgba(255, 255, 255, 0.25);
  animation: pantalla-tablet 0.25s infinite;
}

.tablet__bottom {
  background-color: #000;
  box-shadow: 0.25vw 0.25vw 0.5vw rgba(72, 72, 72, 0.75), -0.25vw 0.25vw 0.5vw rgba(72, 72, 72, 0.75), -0.25vw -0.25vw 0.5vw rgba(72, 72, 72, 0.75), 0.25vw -0.25vw 0.5vw rgba(72, 72, 72, 0.75);
}

/**********************/
/**********************/
@keyframes pantalla-tablet {
  from {
    background-color: #f7f7f7;
  }
}
@keyframes pantalla-tv {
  from {
    background-color: #707070;
    box-shadow: 0.125vw 0.125vw 0vw rgba(255, 255, 255, 0), -0.125vw 0.125vw 0vw rgba(255, 255, 255, 0), 0.125vw -0.125vw 0vw rgba(255, 255, 255, 0), -0.125vw -0.125vw 0vw rgba(255, 255, 255, 0);
  }
}
@keyframes luz-tv {
  from {
    background-image: radial-gradient(rgba(244, 244, 244, 0.8), rgba(255, 255, 255, 0.8));
  }
}
.person {
  position: absolute;
  z-index: 9;
  width: 450px;
  height: 253px;
  transform-origin: bottom left;
  /*transform: rotateX(-90deg) translateZ(-9vw) rotateY(0deg) rotateZ(0deg);*/
  /*transform: rotateX(-90deg) translateZ(0vw) translateX(10vw) rotateY(50deg) rotateZ(0deg);*/
  /** transform: rotateX(-90deg) translateZ(-9vw) translateX(3vw) rotateY(0deg) rotateZ(0deg);**/
  /*transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-12vw) translateY(-6vw);*/
  /* base  */
  /**transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translateZ(-9vw);**/
  /*un coté*/
  /*transform: rotateX(-80deg) rotateY(45deg) rotateZ(-11.55deg) translateZ(0vw) translateX(0vw)translateY(0vw);*/
  /* valid 
  transform: rotateX(-75deg) rotateY(45deg) rotateZ(-10.55deg) translateZ(0vw) translateX(0vw);*/
  transform: rotateX(-75deg) rotateY(55deg) rotateZ(-10.55deg) translateZ(3vw) translateX(0vw);
}

/*
.containerT {
  width: 400px;
  height: 300px;
  margin: 1em auto;
}

.containerT img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.two {
  -webkit-mask-image: url('https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask-gradient.png?v=1597757011489');
  mask-image: url('https://cdn.glitch.com/04eadd2b-7dd4-43fc-af3d-cff948811986%2Fstar-mask-gradient.png?v=1597757011489');

}


.txtF
{

    font-weight: 700;
    text-align: center;
    color: #68d0e0;
    font-size:230pt;
     color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      background-image: url(https://media.giphy.com/media/xULW8Fw2ZhznUptrYA/giphy.gif);
      background-size: cover;
      background-position: center;

  }

*/
.text3D {
  color: #fff;
  font-size: 4em;
  line-height: 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

.gradient-text {
  /* Fallback: Set a background color. */
  background-color: #e8bd70;
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #e8bd70, #edd185);
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.wrapperBubble {
  --text-color: #e8bd70;
  position: relative;
  display: inline-block;
  z-index: 1;
}
.wrapperBubble a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.wrapperBubble a:nth-child(1) {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}
.wrapperBubble a:nth-child(2) {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
.wrapperBubble a:nth-child(3) {
  -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.wrapperBubble a:nth-child(4) {
  -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.wrapperBubble a:hover {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 2;
}
.wrapperBubble a:nth-child(1):hover ~ .fill-text {
  /*&:after {
    --hover-text: "You hovered me from top";
  }*/
}
.wrapperBubble a:nth-child(1):hover ~ .fill-text:before {
  --fill-from: circle(0% at 50% 0%);
  --fill-to: circle(150% at 0% 50%);
  animation: fill-text 3s forwards;
}
.wrapperBubble a:nth-child(2):hover ~ .fill-text {
  /* &:after {
     --hover-text: "You hovered me from right";
   }*/
}
.wrapperBubble a:nth-child(2):hover ~ .fill-text:before {
  --fill-from: circle(0% at 150% 50%);
  --fill-to: circle(100% at 50% 50%);
  animation: fill-text 3s forwards;
}
.wrapperBubble a:nth-child(3):hover ~ .fill-text {
  /*&:after {
    --hover-text: "You hovered me from bottom";
  }*/
}
.wrapperBubble a:nth-child(3):hover ~ .fill-text:before {
  --fill-from: circle(0% at 50% 100%);
  --fill-to: circle(150% at 0% 50%);
  animation: fill-text 3s forwards;
}
.wrapperBubble a:nth-child(4):hover ~ .fill-text {
  /*&:after {
    --hover-text: "You hovered me from left";
  }*/
}
.wrapperBubble a:nth-child(4):hover ~ .fill-text:before {
  --fill-from: circle(0% at 0% 50%);
  --fill-to: circle(150% at 0% 50%);
  animation: fill-text 3s forwards;
}

@keyframes fill-text {
  0% {
    clip-path: var(--fill-from);
  }
  100% {
    clip-path: var(--fill-to);
    color: var(--text-color);
  }
}
.fill-text-light {
  -webkit-text-stroke: 1px var(--text-color);
  text-stroke: 1px var(--text-color);
}

.fill-text-3D {
  text-shadow: 0 0px 0 #fff, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

.fill-text {
  color: transparent;
  line-height: initial;
  font-size: 8vh;
  font-weight: 400;
  line-height: 1em;
  /*
  &:after {
    --hover-text: "You hovered me from xxxx";
    content: var(--hover-text);
    -webkit-text-stroke: initial;
    text-stroke: initial;
    font: 2vw/1.5 verdana;
    color: #999;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
    white-space: nowrap;
  }
  */
}
.fill-text:before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  text-shadow: none;
}

@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}
.box {
  animation: expand-rev 0.5s ease forwards;
  color: transparent;
  /* cursor: pointer; */
  display: inline-block;
  font-size: 10vh;
  line-height: 10vh;
  /*  needed for firefox to have a valid output */
  --a:-30deg;
  --l:10%;
  --c:red;
  /**/
  cursor: pointer;
  display: inline-block;
  transition: --x 0.5s, --y 0.5s;
  background-size: 50%;
  /*background:conic-gradient(from var(--a) at var(--x) var(--y), #f6e097 12% ,#feda7c 33%,#151515 45%, #f6e097 45% ,#feda7c 76%,#151515 90%);*/
  background: conic-gradient(from var(--a) at var(--x) var(--y), #f6e097 12%, #fff 12%, #acaba1 33%, #6a6a6a 33%, #c3c1bc 55%, #787877 55%, #555 70%, #ffdd2d 70%, #838383 97%, #e9db56 87%);
  /*
  background:repeating-linear-gradient(
    190deg,
    rgba(255, 0, 0, 0.5) 40px,
    rgba(255, 153, 0, 0.5) 80px,
    rgba(255, 255, 0, 0.5) 120px,
    rgba(0, 255, 0, 0.5) 160px,
    rgba(0, 0, 255, 0.5) 200px,
    rgba(75, 0, 130, 0.5) 240px,
    rgba(238, 130, 238, 0.5) 280px,
    rgba(255, 0, 0, 0.5) 300px
  ), repeating-linear-gradient(
    -190deg,
    rgba(255, 0, 0, 0.5) 30px,
    rgba(255, 153, 0, 0.5) 60px,
    rgba(255, 255, 0, 0.5) 90px,
    rgba(0, 255, 0, 0.5) 120px,
    rgba(0, 0, 255, 0.5) 150px,
    rgba(75, 0, 130, 0.5) 180px,
    rgba(238, 130, 238, 0.5) 210px,
    rgba(255, 0, 0, 0.5) 230px
  ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
      200px, blue 250px, indigo 300px, violet 350px, red 370px);*/
}

.box:hover {
  --x:10%;
  --y:10%;
}

.gradient-text-logo {
  position: relative;
  z-index: 2;
  font-size: 35pt;
  line-height: 35pt;
  display: inline-block;
  color: transparent;
  /*background: conic-gradient(
    #f6e097 12%, 
    #ffffff 12%, #acaba1 33%, 
    #6a6a6a 33%, #c3c1bc 55%, 
    #787877 55%, #555555 70%, 
    #ffdd2d 70%, #838383 87%, 
    #e9db56 87%);*/
  /*background: conic-gradient(
  #f6e097 12%, 
  #555555 70%, 
  #f00 87%); */
  background: conic-gradient(#f6e097 12%, #fff 12%, #acaba1 33%, #6a6a6a 33%, #c3c1bc 55%, #787877 55%, #555 70%, #ffe57c 70%, #838383 97%, #e9db56 87%);
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: expand-rev 0.5s ease forwards;
  cursor: pointer;
}

.gradient-text-logo:hover {
  animation: expand 0.5s ease forwards;
}

@keyframes expand {
  0% {
    background-size: 50%;
    background-position: 0 0;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 225%;
    background-position: -11em -5em;
  }
}
@keyframes expand-rev {
  0% {
    background-size: 225%;
    background-position: -10em -4em;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 50%;
    background-position: 0 0;
  }
}
/*
*{
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  background-color: hsl(0, 0%, 0%);
  grid-template-columns: 100%;
  min-height: 90vh;
}
.wrapper 
{


  background-color: rgba(0, 0, 0, 0.6);
  background-blend-mode: color;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding-block-end: 2rem;
  padding-inline: 2rem;
  overflow-x: clip;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 15vw, 15rem);
  font-weight: 700;
  text-transform: uppercase;
  perspective: 2.5em;
}

.glow, 
.glow-shadow {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
}
.glow {
  --glow-color: hsl(248, 16%, 39%);
  background: inherit;
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  /*mix-blend-mode: plus-lighter;*/
/*-webkit-text-stroke: 0.012em rgba(241, 240, 255, 0.384);*/
/*
  -webkit-text-stroke: 0.012em rgba(241, 240, 255, 1);
  filter: drop-shadow(0px 0px 5px var(--glow-color)) 
    drop-shadow(0px 0px 10px var(--glow-color));
}


.glow-shadow {
  color: hsl(20, 100%, 98%);
  mix-blend-mode: soft-light;
  filter: brightness(2);
  transform:translateY(10%)                 
    rotateX(81deg) 
    scaleY(-1)                               
    translateY(-15%) scaleY(1.35)
}   
*/
/*** FIN index part 2 room ***/
@media screen and (max-width: 768px) {
  #block-raisons {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  .arrow-faq {
    width: 25px;
    height: 25px;
    top: -0.7rem;
  }
  #block-faq {
    flex-direction: column-reverse;
  }
  #img-contact {
    max-width: 40%;
  }
  #block-form-contact {
    max-width: 100%;
  }
  #parent-img-contact {
    min-height: 30vw;
  }
  .container-shadow-black {
    padding: 15px;
  }
  .big-diamond span {
    font-size: 1.3rem;
  }
}
* {
  -webkit-backface-visibility: hidden !important;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.disable-parallax {
  display: none;
}

.parallax-scale {
  transition: transform 2.3s ease-in-out;
}

#parallax2-principal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  /* {# image largeur 7280 par 4080 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 4080/7280 = 0.56 #} */
  height: 56vw;
  max-height: 100vh;
  text-shadow: -3px 2px 2px #000000, 0px -1px 2px #000000;
}

.block-text-center-parallax2 {
  width: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
  top: 12vw;
  /*
  	position:absolute;
  	right:5vw;
  	width:45%;
  	transform: translate(0%, -20%);
  	top:20%;
  	*/
}

.block-text-center-parallax2 .title-block {
  /*text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191;*/
  color: white;
}

.block-text-right-parallax2 {
  width: 45%;
  right: 5vw;
  transform: translate(0%, -20%);
  top: 20%;
}

.block-text-parallax2, .block-text-parallax4 {
  position: absolute;
}

.block-text-center-parallax4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
}

#casque-parallax4 {
  width: 18%;
  position: absolute;
  top: -100%;
  right: -100%;
  transform: rotate(40deg);
}

#clavier-parallax4 {
  width: 35%;
  position: absolute;
  top: -100%;
  left: -30%;
  transform: rotate(50deg);
}

#lunette-parallax4 {
  width: 15%;
  position: absolute;
  top: -100%;
  left: -30%;
  transform: rotate(10deg);
}

#photos-parallax4 {
  width: 20%;
  position: absolute;
  bottom: -100%;
  left: -100%;
}

#tasse-parallax4 {
  width: 10%;
  position: absolute;
  bottom: -100%;
  right: -100%;
}

#plante-parallax4 {
  width: 10%;
  position: absolute;
  bottom: -100%;
  right: -100%;
}

#cassette-blanche-parallax4 {
  width: 12%;
  position: absolute;
  top: -100%;
  right: -100%;
  transform: rotate(65deg);
}

#cassette-jaune-parallax4 {
  width: 12%;
  position: absolute;
  top: -100%;
  right: -100%;
  transform: rotate(85deg);
}

#ordicarre-parallax3 {
  width: 100%;
  max-width: 18vw;
}

#claviercarre-parallax3 {
  width: 100%;
  max-width: 18vw;
}

#palettecarre-parallax3 {
  width: 100%;
  max-width: 22vw;
}

#montagecarre-parallax3 {
  width: 100%;
  max-width: 18vw;
}

#mailcarre-parallax3 {
  width: 100%;
  max-width: 18vw;
}

.element-parallax-move {
  /*
     transition: margin-left 0.5s ease; 
  transition: margin-right 0.5s ease; 
  transition: margin-top 0.5s ease; 
  transition: margin-bottom 0.5s ease; 
  */
  transition: margin 0.1s ease;
}

@keyframes trembleEffect2pxLightBlur {
  0% {
    transform: translate(0, 0) rotate(0);
    filter: blur(0);
  }
  25% {
    transform: translate(-2px, -2px) rotate(-1deg);
    filter: blur(0.7px);
  }
  50% {
    transform: translate(2px, 2px) rotate(1deg);
    filter: blur(0.7px);
  }
  75% {
    transform: translate(-2px, 2px) rotate(1deg);
    filter: blur(0.7px);
  }
  100% {
    transform: translate(2px, -2px) rotate(-1deg);
    filter: blur(0.7px);
  }
}
.tremble-effect-2px-light-blur {
  animation: trembleEffect2pxLightBlur 0.5s infinite alternate;
  /*animation: trembleEffect2pxLightBlur 0.5s alternate 1;*/
}

@keyframes explodeFadeIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.disable-effect-fade {
  opacity: 0 !important;
  animation-delay: 0s !important; /* Délai de 2 secondes */
}

.explode-fade-in {
  animation: explodeFadeIn 1s ease-in-out forwards;
  animation-delay: 1s; /* Délai de 2 secondes */
}

@keyframes explodeFadeOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
.explode-fade-out {
  animation: explodeFadeOut 1s ease-in-out forwards;
}

@keyframes fadeInRightToLeft {
  0% {
    opacity: 0;
    display: none;
    left: 80%;
  }
  100% {
    opacity: 1;
    left: 50%;
  }
}
.fade-in-right-to-left {
  animation-delay: 2s; /* Délai de 2 secondes */
  animation: fadeInRightToLeft 0.5s ease-out forwards;
  pointer-events: none; /* Pour empêcher les interactions avec l'élément caché */
}

@keyframes fadeOutRightToLeft {
  0% {
    opacity: 1;
    left: 50%;
  }
  100% {
    opacity: 0;
    display: none;
    left: 80%;
  }
}
.fade-out-right-to-left {
  animation: fadeOutRightToLeft 0.5s ease-out forwards;
  pointer-events: none; /* Pour empêcher les interactions avec l'élément caché */
}

@keyframes fadeInLeftToRight {
  0% {
    opacity: 0;
    display: none;
    left: 0vw;
  }
  100% {
    opacity: 1;
    left: 5vw;
  }
}
.fade-in-left-to-right {
  animation-delay: 2s; /* Délai de 2 secondes */
  animation: fadeInLeftToRight 0.5s ease-out forwards;
  pointer-events: none; /* Pour empêcher les interactions avec l'élément caché */
}

@keyframes fadeOutLeftToRight {
  0% {
    opacity: 1;
    left: 5vw;
  }
  100% {
    opacity: 0;
    display: none;
    left: 0vw;
  }
}
.fade-out-left-to-right {
  animation: fadeOutLeftToRight 0.5s ease-out forwards;
  pointer-events: none; /* Pour empêcher les interactions avec l'élément caché */
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  height: 0;
  clear: both;
  content: ".";
  display: block;
  line-height: 0;
  visibility: hidden;
}

.autoscale img {
  width: 100%;
  height: 100%;
}

.flipbook {
  position: relative;
  width: 100%;
  height: 100%;
}

.flipbook img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
  -webkit-backface-visibility: hidden;
}

.flipbook img.active {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}

.br {
  white-space: normal;
  font-size: 0.01;
  content: ".";
  visibility: hidden;
}

.interstitial-region {
  position: relative;
  width: 100%;
  height: 2000px;
}

.interstitial-region .lerp-a, .interstitial-region .lerp-b {
  position: absolute;
}

.interstitial-region .lerp-a {
  top: 0;
  left: 50%;
}

.interstitial-region .lerp-b {
  bottom: 0;
  left: 50%;
}

.interstitial {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

.editorial {
  position: relative;
  /*padding:5em 10em;*/
}

.editorial .lerp-a, .editorial .lerp-b {
  position: absolute;
  left: 50%;
}

.column {
  /*width:24em;*/
  /*text-align:justify;*/
  /*white-space:nowrap;*/
  line-height: 1.75em;
  font-size: 1em;
}

.column.right {
  /*margin:0 0 0 auto*/
}

.column p {
  padding: 0;
  margin: 0 0 1.75em 0;
}

.column p.hr {
  text-align: center;
}

.column .lead {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.75em;
  line-height: 1.3333333333em;
}

.column .spacer {
  display: inline-block;
}

.column .end {
  display: inline-block;
  width: 24em;
}

#cover {
  position: relative;
  width: 100%;
  height: 100%;
}

#cover-image {
  position: relative;
  width: 100%;
  height: 100%;
  background: black;
}

#cover-image .lerp-a, #cover-image .lerp-b {
  position: absolute;
}

#cover-image .lerp-a {
  top: 50%;
  left: 50%;
}

#cover-image .lerp-b {
  bottom: 0;
  left: 50%;
}

#cover-image .text {
  position: absolute;
  top: 0;
  left: 0;
}

#cover-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cover-text .photo-link {
  position: absolute;
  top: 61.7%;
  left: 18.35%;
  width: 19.9%;
  height: 2.5%;
  cursor: pointer;
  text-decoration: none;
}

#cover-text .lerp-a, #cover-text .lerp-b {
  position: absolute;
}

#cover-text .lerp-a {
  top: 50%;
  left: 50%;
}

#cover-text .lerp-b {
  bottom: -50%;
  left: 50%;
}

#interstitial-region-5 {
  height: 1000px;
}

#section-6 {
  background: #000;
}

#end {
  color: #fff;
  font-weight: normal;
  font-family: colfax-web;
  font-size: 14px;
  text-transform: uppercase;
}

#end a {
  color: #fff;
  text-decoration: none;
}

#end .text {
  margin-left: 60px;
  position: relative;
}

#end .p4k-logo {
  font-size: 60px;
  top: 35px;
  position: relative;
  color: #fff;
}

#end .p4k-site, #end .top {
  font-weight: bold;
}

#end .top {
  position: absolute;
  right: 0;
}

.player-yt, .player-vm {
  position: fixed;
  top: -500px;
}

#player {
  z-index: 80;
  position: fixed;
  right: 0;
  top: 5em;
  line-height: 32px;
  font-weight: normal;
  font-family: colfax-web;
  font-size: 14px;
  height: 32px;
  width: 80px;
  overflow: hidden;
  -webkit-transition: width 250ms ease-in-out;
  -moz-transition: width 250ms ease-in-out;
  -ms-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}

#player:hover {
  width: 500px;
}

#player:hover .inner {
  color: #333;
  background: #ccc;
}

#player .inner {
  position: absolute;
  right: 0;
  top: 0;
  color: #777;
  padding: 0 20px;
  white-space: nowrap;
  background: 0;
  -webkit-transition: background 250ms ease-in-out;
  -moz-transition: background 250ms ease-in-out;
  -ms-transition: background 250ms ease-in-out;
  transition: background 250ms ease-in-out;
}

#player.disabled {
  opacity: 0.25;
}

#player.first .prev {
  opacity: 0.25;
}

#player.last .next {
  opacity: 0.25;
}

#player.playing .play {
  display: none;
}

#player.playing .pause {
  display: inline-block;
}

#player .controls * {
  width: 20px;
  text-align: center;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

#player .stop {
  display: none;
}

#player .pause {
  display: none;
}

#player * {
  vertical-align: top;
  display: inline-block;
}

#player .label {
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 12px;
}

#player .info {
  margin-right: 12px;
}

#player .controls {
  cursor: pointer;
  line-height: 32px;
  font-size: 19px;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

#menu {
  /*position:fixed;*/
  width: 100%;
  z-index: 100;
}

#menu .trigger {
  position: relative;
  margin: 0;
  height: 50px;
  z-index: 100;
}

#menu .trigger .content {
  height: 0;
}

#menu .trigger:hover .content, #menu .trigger.active .content {
  height: 76px;
}

#menu .content {
  color: white;
  position: fixed;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  overflow: hidden;
  -webkit-transition: height 250ms ease-in-out;
  -moz-transition: height 250ms ease-in-out;
  -ms-transition: height 250ms ease-in-out;
  transition: height 250ms ease-in-out;
}

#menu .content .pitchfork {
  position: absolute;
  top: 12px;
  left: 24px;
  width: 50px;
  height: 50px;
  line-height: 42px;
  font-size: 72px;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

#menu .content .version {
  position: absolute;
  top: 10px;
  right: 150px;
  text-decoration: uppercase;
  font-size: 10px;
}

#menu .content a {
  color: white;
  text-decoration: none;
}

#menu .content a:hover {
  text-decoration: underline;
}

#menu .content > ul {
  list-style: none;
  font-size: 10px;
  margin: 10px 150px 0 150px;
  padding: 0;
}

#menu .content > ul > li {
  float: left;
  margin: 0;
  padding: 0;
  width: 30%;
  height: 56px;
  border-right: 1px solid #fff;
}

#menu .content > ul > li.last {
  border-right: 0;
}

#menu .content > ul .buffer {
  margin-left: 20px;
}

#menu .content > ul .back, #menu .content > ul .download {
  font-weight: 700;
}

#menu .content > ul .sections ul, #menu .content > ul .share ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
  width: 49%;
}

.noplayer #player {
  display: none;
}

#progress {
  opacity: 0.5;
  z-index: 10;
  position: fixed;
  bottom: 1em;
  left: 0;
  width: 100%;
  height: 0.25em;
  background: #777;
}

#progress.disabled {
  display: none;
}

#progress .loaded {
  width: 0;
  height: 100%;
  background: #fff;
}

#fullscreen, .fullscreen-btn {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  padding: 12px 20px 0 0;
  cursor: pointer;
  opacity: 1;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
}

#fullscreen:hover, .fullscreen-btn:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
}

#fullscreen.disabled, .fullscreen-btn.disabled {
  display: none;
}

#fullscreen .active, .fullscreen-btn .active {
  display: none;
}

.fullscreen #fullscreen .active, .fullscreen .fullscreen-btn .active {
  display: block;
}

.fullscreen #fullscreen .inactive, .fullscreen .fullscreen-btn .inactive {
  display: none;
}

/*** sound icon volume **/
.volume {
  --line: #fff;
  --line-width: 6px;
  --duration: .5s;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.volume input {
  display: none;
}
.volume input + svg {
  display: block;
  fill: none;
  stroke: var(--line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--line-width);
  width: 108px;
  height: 96px;
}
.volume input + svg path {
  animation: var(--name) var(--duration) ease forwards;
}
.volume input + svg path:nth-child(2) {
  stroke-dashoffset: 1px;
}
.volume input + svg path:nth-child(3) {
  stroke-dashoffset: 1px;
}
.volume input:not(:checked) + svg path:nth-child(1) {
  --name: shape;
}
.volume input:not(:checked) + svg path:nth-child(2) {
  --name: small;
}
.volume input:not(:checked) + svg path:nth-child(3) {
  --name: large;
}
.volume input:checked + svg path:nth-child(1) {
  --name: shape-r;
}
.volume input:checked + svg path:nth-child(2) {
  --name: small-r;
}
.volume input:checked + svg path:nth-child(3) {
  --name: large-r;
}

@keyframes small {
  0%, 30% {
    stroke-dasharray: 0 0 30px 64px;
  }
  40% {
    stroke-dashoffset: 16px;
  }
  80%, 100% {
    stroke-dashoffset: 1px;
  }
  70% {
    stroke-dasharray: 0 43px 30px 64px;
  }
  100% {
    stroke-dasharray: 0 39px 30px 64px;
  }
}
@keyframes small-r {
  0% {
    stroke-dasharray: 0 39px 30px 64px;
  }
  0%, 40% {
    stroke-dashoffset: 1px;
  }
  70% {
    stroke-dashoffset: 16px;
  }
  70%, 100% {
    stroke-dasharray: 0 0 30px 64px;
  }
}
@keyframes large {
  0%, 30% {
    stroke-dasharray: 0 0 50px 84px;
  }
  40% {
    stroke-dashoffset: 16px;
  }
  80%, 100% {
    stroke-dashoffset: 1px;
  }
  70% {
    stroke-dasharray: 0 82px 32px 84px;
  }
  100% {
    stroke-dasharray: 0 78px 32px 84px;
  }
}
@keyframes large-r {
  0% {
    stroke-dasharray: 0 78px 32px 84px;
  }
  0%, 40% {
    stroke-dashoffset: 1px;
  }
  70% {
    stroke-dashoffset: 16px;
  }
  70%, 100% {
    stroke-dasharray: 0 0 50px 84px;
  }
}
@keyframes shape {
  0% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
  }
  70% {
    stroke-dasharray: 63px 51px 184px;
    stroke-dashoffset: 21px;
  }
  100% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
  }
}
@keyframes shape-r {
  0% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
  }
  100% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

/*** fin sound icon volume **/
.fillColor {
  fill: #ffffff;
}

svg:hover .fillColor {
  fill: #edd472;
}

/**** animation etoiles et parallax2 ***/
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  box-shadow: 138px -7px #c9c9c9, -960px -132px #d6d6d6, -1399px 306px #dbdbdb, -612px -309px #fcfcfc, -265px -12px #dbdbdb, 705px 241px #e8e8e8, -187px 58px #c7c7c7, 407px -261px #c9c9c9, -1023px -326px #d4d4d4, -1164px -434px #c2c2c2, -555px -166px #f7f7f7, -584px 173px #c7c7c7, -717px 188px #ededed, 604px -148px #d6d6d6, 610px -101px #e6e6e6, 1085px -288px #f2f2f2, 1338px 394px white, 698px -78px #f2f2f2, 385px -301px #d6d6d6, 723px 238px #cccccc, 716px 210px #ededed, 757px 129px #fcfcfc, 1364px 177px #e0e0e0, -404px 309px #c4c4c4, 930px 389px #c2c2c2, 243px -420px #dbdbdb, -1393px 261px #c4c4c4, 902px -82px #dedede, 1464px -164px #dedede, -514px -62px whitesmoke, -1314px -463px #e6e6e6, 520px -167px #d6d6d6, -1440px 383px #c2c2c2, 16px -16px #f7f7f7, 54px -212px #c4c4c4, -451px -172px #e6e6e6, -120px -155px #c7c7c7, -43px 316px #c4c4c4, 993px 190px #d1d1d1, 80px -321px #e3e3e3, 320px 215px #e6e6e6, -123px -240px #c9c9c9, -143px -136px #fafafa, 878px -221px #f0f0f0, 198px -287px #cfcfcf, -1412px -471px #d6d6d6, 1421px 425px #cccccc, -156px -475px #f7f7f7, -320px 152px white, -1153px 397px #f2f2f2, 1133px 332px #c7c7c7, -1288px 231px #c4c4c4, 903px 213px #cccccc, 1426px 321px #e8e8e8, 494px 404px #d6d6d6, -1253px -310px #cfcfcf, 673px 429px #d9d9d9, -980px 135px #d6d6d6, 298px -376px #dbdbdb, 584px -299px #dbdbdb, -392px -257px #e8e8e8, 916px 444px #f7f7f7, 202px -10px #f2f2f2, -13px -311px #e6e6e6, -986px -285px #e0e0e0, -437px 106px #c7c7c7, 1411px -184px #ebebeb, -175px -203px whitesmoke, 1114px -235px #c7c7c7, 1159px -144px #e0e0e0, -1097px -79px white, -411px 472px whitesmoke, 1470px 211px #f2f2f2, -1006px 171px white, 965px -237px #d4d4d4, 79px 315px #dedede, 784px 280px #c2c2c2, 1160px 349px #c9c9c9, 1441px -106px whitesmoke, -737px -11px white, 564px 247px #d1d1d1, 720px 151px #fafafa, -1010px 156px #c2c2c2, -482px -208px #f2f2f2, -257px -479px #d6d6d6, -1281px -195px #d6d6d6, -1213px 257px #c7c7c7, -605px -89px #dbdbdb, -419px -403px #e3e3e3, -376px -245px #f7f7f7, -733px 61px #e8e8e8, 370px -139px #f2f2f2, -1217px -410px #c2c2c2, -634px 319px #ebebeb, 823px 391px #d4d4d4, 2px -258px #e0e0e0, 395px -78px #e6e6e6, 1215px -238px #cfcfcf, 1295px 164px #d9d9d9, -502px 203px #e8e8e8, -428px 178px #ededed, -1473px -9px #fafafa, 607px -448px #d6d6d6, -806px -52px #e0e0e0, 1247px -212px #e6e6e6, 718px 271px #c2c2c2, 1367px -173px #ebebeb, -358px 329px #e6e6e6, 1134px 93px whitesmoke, -16px 219px #e8e8e8, -1049px 82px #fafafa, -1420px -76px #cccccc, 1277px -122px #ededed, 898px -248px #dbdbdb, 1243px 370px #f2f2f2, -1012px -273px white, -634px -326px #e3e3e3, -524px 148px #c7c7c7, 1177px -295px #c9c9c9, -675px -174px #e8e8e8, -1160px 414px #ededed, -593px -212px white, -367px -459px #d1d1d1, -453px 347px #fafafa, -840px -213px #dbdbdb, 1469px -188px #cccccc, -712px 124px #e3e3e3, 633px 425px #ededed, 626px -334px #f7f7f7, 89px -19px #f0f0f0, -592px 304px #cccccc, 937px 479px #c7c7c7, 109px -472px #f2f2f2, -1422px 218px #f7f7f7, 978px 309px whitesmoke, 827px 407px #dedede, -395px 354px whitesmoke, -83px 433px #c7c7c7, -310px -468px #e0e0e0, 1494px -136px #f2f2f2, 856px -1px #ededed, 1368px -239px whitesmoke, -414px 220px #f0f0f0, 37px -33px #fcfcfc, 1291px -157px #d1d1d1, 1298px 199px white, 490px 453px #c7c7c7, -777px 305px #f0f0f0, -1451px -419px #ededed, -518px 342px #dbdbdb, 284px 304px #e8e8e8, 1201px -141px whitesmoke, 97px -8px #d9d9d9, 1482px -95px #e8e8e8, -893px -221px #c2c2c2, -859px 364px #cccccc, -1352px 51px #c4c4c4, -135px -398px #fafafa, 161px -472px #ededed, 487px 339px #d1d1d1, -1424px -31px #f0f0f0, 924px -3px #f7f7f7, -375px -63px #d1d1d1, -747px -133px #ebebeb, -880px -344px #e3e3e3, -369px 229px #e3e3e3, 763px -180px #e3e3e3, 521px -319px #d1d1d1, -715px -470px #c7c7c7, 1416px 458px #d4d4d4, 504px 152px #c7c7c7, 882px -123px #f7f7f7, 509px -467px #dedede, 695px 428px #d6d6d6, 718px -48px #d1d1d1, -857px -283px #f0f0f0, -505px 416px #cccccc, 924px -133px #dedede, 767px 442px #f7f7f7, 1086px -356px #d6d6d6, 1232px -43px #f0f0f0, -1233px 463px #e8e8e8, -194px 411px #c4c4c4, 517px -135px whitesmoke, 719px -42px #e6e6e6, -931px -55px #dbdbdb, -1410px -131px #dedede, -1129px -317px white, 493px 121px #e6e6e6, -1348px 349px #dedede, -164px -251px #cccccc, 1461px 52px #e0e0e0, -139px 98px #e0e0e0, -275px -177px #f0f0f0, -651px 233px #e3e3e3, 480px -285px #e0e0e0, -193px -445px #d1d1d1, -368px 424px #cccccc, 439px 400px #cfcfcf, -121px 72px #c7c7c7, -250px -45px #f2f2f2, 1199px -269px whitesmoke, 986px -123px #c9c9c9, 1355px 342px #e0e0e0, 762px -303px #f0f0f0, 1201px 6px #e3e3e3, 111px 351px #c4c4c4, 381px 268px #e6e6e6, 597px -223px #ebebeb, -909px 59px whitesmoke, -108px 231px #c2c2c2, 640px -65px #fcfcfc, 888px 307px #e8e8e8, -1395px 107px #dedede, 328px -265px #c7c7c7, -886px -287px #cfcfcf, -436px 293px #ebebeb, -943px 244px #c2c2c2, -143px -124px #e3e3e3, -1257px 284px #d4d4d4, -515px 127px #f7f7f7, -483px -460px #d6d6d6, -819px 98px #fcfcfc, -400px 174px whitesmoke, 1470px -167px #e6e6e6, 205px 448px #e3e3e3, 1323px -279px #dbdbdb, 47px -220px #dedede, 172px 381px #cccccc, 193px -174px #c2c2c2, -803px 28px #c7c7c7, 264px 420px #e6e6e6, 1300px 190px whitesmoke, 1455px -98px #d1d1d1, -1259px -315px #e0e0e0, 1393px 473px #f2f2f2, 368px 261px whitesmoke, 237px -226px #f7f7f7, -937px 215px #cccccc, -1208px -77px #f2f2f2, 427px -210px #f0f0f0, -1427px 337px #d6d6d6, -470px -419px #e8e8e8, -1218px 261px #c7c7c7, 993px 227px #e8e8e8, 193px 176px #dedede, 1283px 221px #ededed, 1069px 178px #ebebeb, 388px 438px #e0e0e0, -141px 443px #e3e3e3, -1272px -220px #c9c9c9, -1397px 73px #cfcfcf, 1216px 353px #cccccc, -1416px -436px white, -693px -113px #dedede, 1457px -451px #f7f7f7, 314px -186px #dedede, -2px 47px #cfcfcf, 1014px -338px #e3e3e3, -649px 251px #ededed, 971px -123px #d9d9d9, -134px -117px #fcfcfc, 627px -365px #cccccc, -1374px 202px #c7c7c7, -1181px -140px #cccccc, -1450px -47px #dedede, -1041px -387px #ebebeb, 1139px -384px #d6d6d6, 116px 330px #dedede, -244px -321px #e3e3e3, 144px 118px #dbdbdb, -1354px -128px #cfcfcf, 302px -418px #ebebeb, 1477px -75px #c2c2c2, -1244px -461px #c7c7c7, -434px 299px #dedede, 760px 425px #cccccc, -650px 121px #f2f2f2, 783px -92px whitesmoke, 1344px 48px white, 551px 295px #ededed, 970px 41px #d9d9d9, 132px 181px #fafafa, -544px 37px #cfcfcf, 957px -293px #fafafa, -499px -349px #e3e3e3, -761px -210px #e3e3e3, 1260px 245px #d1d1d1, -856px 456px #dbdbdb, -24px 209px #ebebeb, -833px 175px #ebebeb, 255px -317px #ebebeb, -1368px -77px #d4d4d4, -974px -216px #f0f0f0, 618px -185px #f2f2f2, -117px -125px whitesmoke, -1497px 33px #c4c4c4, -1443px -184px #cccccc, 782px 26px #c4c4c4, -1252px 453px #f0f0f0, -1119px -49px #c9c9c9, -620px -45px #c7c7c7, -798px 365px #ededed, -539px -476px #d4d4d4, 133px -375px #ebebeb, -210px 106px whitesmoke, -1342px 217px #d1d1d1, -1017px 356px #c7c7c7, -385px 476px #c4c4c4, 254px 133px #d1d1d1, 732px 236px #ededed, 294px -281px #cccccc, -562px 470px #e0e0e0, 459px 315px #dbdbdb, 18px -110px #cccccc, -794px -9px #d9d9d9, -330px -294px #f0f0f0, 26px 177px #f2f2f2, 39px -179px #dedede, -35px 402px white, 1015px 319px #f7f7f7, -708px -259px #cccccc, -1142px -371px #c4c4c4, 1239px 243px #dbdbdb, -649px 148px #d4d4d4, -1252px -381px #c2c2c2, -221px 53px #c7c7c7, -545px -159px #c7c7c7, 1058px -76px #e3e3e3, 636px 276px #ebebeb, -591px 296px #c7c7c7, -977px -478px white, -953px -436px #f2f2f2, 1317px -248px #c9c9c9, 1067px -432px #ededed, -825px 74px #d1d1d1, 1072px 42px #ededed, -513px 148px #ebebeb, 331px 449px #e3e3e3, 1049px 229px #f2f2f2, -91px -106px #f7f7f7, 988px -386px #e8e8e8, -437px 56px #fafafa, -1206px -160px #f2f2f2, -328px -187px #d6d6d6, -524px -451px #cccccc, -910px 362px #cfcfcf, 412px -388px #cccccc, -393px 25px #f7f7f7, 74px -434px #ebebeb, 200px -396px #fcfcfc;
  animation: fly 3s linear infinite;
  transform-style: preserve-3d;
}

.stars:before, .stars:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
}

.stars:before {
  transform: translateZ(-250px);
  animation: fade1 3s linear infinite;
}

.stars:after {
  transform: translateZ(-300px);
  animation: fade2 3s linear infinite;
}

@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ(150px);
  }
}
@keyframes fade1 {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
.scroll-opacity-effect {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.parallax2-element {
  position: absolute;
  background-size: 100vw;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#parallax2-element1 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: radial-gradient(ellipse at top, #0d1b2a 0%, #000 50%);
  background-repeat: no-repeat;
}

.etoile {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: scintiller 2s infinite ease-in-out;
  z-index: 2;
}

.etoile:nth-child(2) {
  top: 20vh;
  left: 20vw;
  animation-delay: 0.2s;
}

.etoile:nth-child(3) {
  top: 18vh;
  left: 50vw;
  animation-delay: 1s;
}

.etoile:nth-child(4) {
  top: 24vh;
  left: 66vw;
  animation-delay: 0.5s;
}

.etoile:nth-child(5) {
  top: 30vh;
  left: 30vw;
  animation-delay: 1.5s;
}

.etoile:nth-child(6) {
  top: 25vh;
  left: 80vw;
  animation-delay: 0.8s;
}

.etoile:nth-child(7) {
  top: 28vh;
  left: 10vw;
  animation-delay: 0.3s;
}

.etoile:nth-child(8) {
  top: 15vh;
  left: 60vw;
  animation-delay: 1.2s;
}

.etoile:nth-child(9) {
  top: 35vh;
  left: 40vw;
  animation-delay: 0.2s;
}

.etoile:nth-child(10) {
  top: 37vh;
  left: 56vw;
  animation-delay: 1s;
}

.etoile:nth-child(11) {
  top: 22vh;
  left: 69vw;
  animation-delay: 0.5s;
}

.etoile:nth-child(12) {
  top: 32vh;
  left: 73vw;
  animation-delay: 1.5s;
}

.etoile:nth-child(13) {
  top: 37vh;
  left: 83vw;
  animation-delay: 0.8s;
}

.etoile:nth-child(14) {
  top: 30vh;
  left: 23vw;
  animation-delay: 0.3s;
}

.etoile:nth-child(15) {
  top: 27vh;
  left: 33vw;
  animation-delay: 1.2s;
}

.etoile:nth-child(16) {
  top: 25vh;
  left: 46vw;
  animation-delay: 0.2s;
}

@keyframes scintiller {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.2;
  }
}
@media screen and (min-width: 769px) {
  #parallax2-element2 {
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-interieur.webp");
  }
  #parallax2-elementback {
    background-repeat: no-repeat;
    position: absolute;
    z-index: 7;
    top: 14vw;
    right: 65vw;
    height: 22vw;
    width: 35vw;
    transform-origin: center center;
    will-change: transform;
    transition: transform 1s ease-out 0s;
    pointer-events: none; /* pour ne pas bloquer scroll */
    /*background-position: 21vw 7vw;
    background-size: 14vw;*/
    background-size: 100%;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-atouts/back11.png");
  }
  #parallax2-element5 {
    background-repeat: no-repeat;
    position: absolute;
    z-index: 7;
    top: 15vw;
    right: 70vw;
    height: 22vw;
    width: 38vw;
    transform-origin: center center;
    will-change: transform;
    transition: transform 1s ease-out 0s;
    pointer-events: none; /* pour ne pas bloquer scroll */
    /*background-position: 21vw 7vw;
    background-size: 14vw;*/
    background-size: 100%;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-atouts/tour8f.webp");
  }
  #parallax2-element7 {
    top: 23vw;
    left: 29vw;
    height: 13.03vw;
    width: 4.9vw;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    transform-origin: center center;
    will-change: transform;
    transition: transform 1s ease-out 0s;
    pointer-events: none; /* pour ne pas bloquer scroll */
    z-index: 8;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-atouts/sail.webp");
  }
}
#parallax2-element2 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-repeat: no-repeat;
  will-change: transform;
  transform-origin: center center;
  transition: transform 1s ease-out 0s;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-interieur.webp");
}

#parallax2-element6 {
  background-repeat: no-repeat;
  position: absolute;
  z-index: 4;
  top: 16vw;
  left: 54vw;
  /*right: 0vw;*/
  height: 11.36vw;
  /*width: 30vw;*/
  width: 38.4vw;
  transform-origin: center center;
  will-change: transform;
  transition: transform 1s ease-out 0s;
  pointer-events: none; /* pour ne pas bloquer scroll */
  /*background-position: 54vw 16vw;*/
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-atouts/tour-right2b.webp");
  z-index: 9;
  background-size: 100%;
}

.sail-navigation {
  animation: rotateSail 2s infinite ease-in-out;
}

@keyframes rotateSail {
  /* 0% { transform: rotate(-0.3deg); }
   50% { transform: rotate(0.3deg); }
   100% { transform: rotate(-0.3deg); }*/
  0% {
    rotate: -0.3deg;
  }
  50% {
    rotate: 0.3deg;
  }
  100% {
    rotate: -0.3deg;
  }
}
#parallax2-element-sea {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
}

.water {
  z-index: 6;
  position: absolute;
  background-repeat: no-repeat;
  top: 26.5vw;
  left: 54vw;
  /*right:16vw;*/
  height: 13.6vw;
  /*width: 30vw;*/
  width: 38.4vw;
  /*background-position: 33.5vw 26.5vw;
    	background-size: 55vw;*/
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-atouts/sea-right2.webp");
  background-size: 100%;
  filter: url("#turbulence");
}

.water-sail {
  content: "";
  position: absolute;
  left: 80%; /* Position horizontale à 80% de l'image */
  top: 70%; /* Position verticale à 50% de l'image */
  width: 10%; /* Rayon de 10% de la largeur de l'image */
  height: 10%; /* Rayon de 10% de la hauteur de l'image */
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sea-right.png");
  filter: url("#local-turbulence"); /* Appliquer le filtre local */
  transform: translate(-50%, -50%); /* Centrer l'élément */
  opacity: 0.2;
}

#parallax2-element8 {
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
  background-position: 27vw 26.5vw;
  background-size: 55vw;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sea-right.png");
}

#parallax2-element9 {
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-position: 10vw 75vw;
  background-size: 30vw;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sea-left.png");
  z-index: 4;
}

/*propagation background noir */
/* Style de base de l'élément */
.background-sunset {
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33.33%, transparent 66.66%, transparent 100%);
  /*L'ajout de forwards à l'animation garantit que le dernier état de l'animation est maintenu une fois l'animation terminée.*/
  background-size: 300% 300%;
  background-position: 100% 100%;
  background-attachment: fixed;
  opacity: 0.5;
  transition: all 2s ease-in-out;
}

.background-sunset-active {
  animation: gradient 2s ease forwards;
}

.background-sunset-disable {
  animation: gradientDisable 2s ease forwards;
}

#block-objectifs2 {
  color: white;
  transition: transform 1s ease-out 0.3s;
}

/*#block-objectifs2.zoomed {
  transform: scale(1.1);
}*/
#parallax1 h1 {
  text-shadow: -1px 0px 0px #9d7e02, 0px 1px 0px #967802;
}

#parallax-objectif-block1 {
  /*heightObjectifsVH*/
  height: 500vh; /* assez long pour scroller */
  z-index: 2;
  text-shadow: -3px 2px 2px #000000, 0px -1px 2px #000000;
}

.parallax-objectif-wrapper-block1 {
  position: sticky;
  /*top: 50%;
  left: 50%;*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  /*transform: translate(-50%, -50%) scale(1.3);*/
  transform: scale(1.3);
  transform-origin: center center;
  /*transition: transform 1s ease-out 0.3s;*/
  pointer-events: none; /* pour ne pas bloquer scroll */
  z-index: 1;
  background: radial-gradient(closest-side, rgb(48, 48, 48), rgb(46, 45, 45), rgb(38, 37, 37), rgb(24, 24, 24), rgb(14, 14, 14));
}

.parallax-objectif-wrapper-inside-block1 {
  width: 100%;
  height: 100%;
  transition: transform 1s ease-out 0s;
}

.parallax-objectif-wrapper-inside-block1.zoomed {
  transform: scale(1.08);
}

.parallax-img {
  opacity: 1;
  position: absolute;
  scale: 1;
  will-change: transform, opacity;
  max-width: 100%;
}

.parallax-img1 {
  bottom: 20vh;
  left: 8vw;
  width: 19%;
}

.parallax-img2 {
  top: 10vh;
  right: 10vw;
  width: 16vw;
  rotate: 40deg;
}

.parallax-img3 {
  bottom: 120vh;
  left: -20vw;
  width: 34vw;
  rotate: 50deg;
}

.parallax-img4 {
  bottom: 115vh;
  left: 15vw;
  width: 15vw;
  rotate: 10deg;
}

.parallax-img5 {
  right: -12vw;
  top: 50vh;
  width: 12vw;
  transform: rotate(65deg);
}

.parallax-img6 {
  right: -12vw;
  top: 50vh;
  width: 12vw;
  transform: rotate(85deg);
}

.parallax-img7 {
  bottom: -20vh;
  right: -10vw;
  width: 10vw;
}

.parallax-img8 {
  bottom: -20vh;
  right: 50vw;
  width: 10vw;
}

.parallax-objectif-block1-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  user-select: none;
  pointer-events: none;
  z-index: 20;
  text-align: center;
}

.parallax-objectif-block1-info span {
  display: inline-block;
  padding: 0 2px;
  will-change: transform, opacity;
}

.parallax-objectif-block1-title {
  font-size: 40px;
  line-height: 55px;
  font-weight: bold;
  color: white;
}

.parallax-objectif-block1-description {
  margin-top: 40px;
}

.new-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  pointer-events: none;
  z-index: 15;
  will-change: opacity, transform, filter;
}

.description, .descriptionflo {
  position: absolute;
  top: calc(50% + 60px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #ccc;
  opacity: 1;
  text-align: center;
  width: 100%;
  max-width: 600px;
  pointer-events: none;
  z-index: 19;
}

.description span {
  display: inline-block;
  will-change: transform, opacity;
}

@keyframes gradient {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes gradientDisable {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}
/***** fin animation étoiles **/
#content-parallax3 > article {
  padding-left: 5vw;
  padding-right: 5vw;
}

@media screen and (max-width: 1024px) {
  #content-parallax3 > article:nth-child(2n) {
    flex-direction: column-reverse;
  }
  #content-parallax3 > article:nth-child(2n) > .row-block:nth-child(2) {
    padding-bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .block-text-center-parallax4, .block-text-center-parallax2 {
    width: 80%;
  }
  .block-text-parallax2 {
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
  }
  #block-atouts {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  #casque-parallax4 {
    width: 25%;
  }
  #clavier-parallax4 {
    width: 40%;
    transform: rotate(50deg);
  }
  #lunette-parallax4 {
    width: 22%;
  }
  #photos-parallax4 {
    width: 30%;
  }
  #tasse-parallax4 {
    width: 17%;
  }
  #plante-parallax4 {
    width: 17%;
  }
  #cassette-blanche-parallax4 {
    width: 20%;
  }
  #cassette-jaune-parallax4 {
    width: 20%;
  }
  #ordicarre-parallax3 {
    max-width: 70%;
  }
  #claviercarre-parallax3 {
    max-width: 70%;
  }
  #palettecarre-parallax3 {
    max-width: 90%;
  }
  #montagecarre-parallax3 {
    max-width: 70%;
  }
  #mailcarre-parallax3 {
    max-width: 70%;
  }
  #content-parallax3 > article:nth-of-type(1) {
    padding-top: 50px;
  }
  #content-parallax3 > article {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  @keyframes rotateSail {
    0% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
    100% {
      transform: rotate(-3deg);
    }
  }
  #parallax2-element2 {
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/interieur-mobile12.png");
    background-position: center;
  }
  #parallax2-element5 {
    /*
    top:55vw;
    width:80vw;
    height: 100%;*/
    background: none;
    display: none;
  }
  #parallax2-element6 {
    /*top: 20vh;*/
    top: initial;
    width: 80vw;
    height: 22vw;
    left: 10vw;
    bottom: -67vh;
  }
  #parallax2-elementback {
    /*top: 47vw;
          height: 44vw;
          width: 77vw;
          right: 19vw;*/
    background: none;
    display: none;
  }
  #parallax2-element7 {
    top: initial;
    /*top: 63vw;*/
    left: 29vw;
    height: 26vw;
    width: 10vw;
    bottom: 23vh;
  }
  .water {
    /*top: 62.5vw;*/
    /*left: 40vw;*/
    left: 10vw;
    height: 27.2vw;
    width: 80vw;
    top: initial;
    bottom: -78vh;
  }
  .parallax-objectif-block1-info {
    width: 95%;
  }
  .parallax-objectif-block1-title {
    font-size: 25px;
    line-height: 32px;
  }
  #global-index-part2 {
    height: 100vw;
  }
  .wave {
    animation: wave 4s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .blurDistort {
    animation: blurDistort 3s infinite;
  }
  @keyframes blurDistort {
    0% {
      filter: blur(2px) brightness(1);
      background-size: 36vw 72vw;
    }
    50% {
      filter: blur(4px) brightness(1.2);
      background-position: 20vw 72vw;
    }
    100% {
      filter: blur(2px) brightness(1);
      background-position: 36vw 72vw;
    }
  }
  @keyframes mouvementLac {
    0% {
      transform: skew(0deg, 0deg);
      filter: blur(0px);
      background-position: 36vw 72vw;
    }
    25% {
      transform: skew(-1deg, 0deg);
    }
    50% {
      transform: skew(1deg, 0deg);
      background-position: 35vw 71vw;
    }
    75% {
      transform: skew(0deg, 1deg);
    }
    100% {
      transform: skew(0deg, 0deg);
      background-position: 36vw 72vw;
    }
  }
  #parallax2-principal {
    /* {# image largeur 7280 par 5981 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/7280 = 0.82 #} */
    /* {# image largeur 5964 par 8192 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/7280 = 0.82 #} */
    /* {# image largeur 4971 par 5981 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/4971 = 0.82 #} */
    /* {# image largeur 3993 par 7350 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 7350/3993 = 0.82 #} */
    /* {# image largeur 3993 par 6310 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 6310/3993 = 0.82 #} */
    /* {# image largeur 3993 par 5578 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5578/3993 = 0.82 #} */
    /* {# image largeur 3993 par 5741 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5741/3993 = 0.82 #} */
    height: 164vw;
  }
}
@layer components {
  .site select, .site input:not(.specifique-input), .site textarea {
    @apply pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-[#edd472] border-gray-200;
  }
  .site label:not(.specifique-label) {
    @apply absolute duration-300 top-3 -z-1 origin-0 text-black /*text-gray-500*/;
  }
  .site .row-block-field {
    /* w-full */
    @apply relative z-0  mb-5;
  }
  .site #ui-datepicker-div {
    width: 320px;
    z-index: 10000 !important;
  }
  /******* checkbox 3 *****/
  .checkbox-wrapper-7 .tgl {
    display: none;
  }
  .checkbox-wrapper-7 .tgl,
  .checkbox-wrapper-7 .tgl:after,
  .checkbox-wrapper-7 .tgl:before,
  .checkbox-wrapper-7 .tgl *,
  .checkbox-wrapper-7 .tgl *:after,
  .checkbox-wrapper-7 .tgl *:before,
  .checkbox-wrapper-7 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-7 .tgl::-moz-selection,
  .checkbox-wrapper-7 .tgl:after::-moz-selection,
  .checkbox-wrapper-7 .tgl:before::-moz-selection,
  .checkbox-wrapper-7 .tgl *::-moz-selection,
  .checkbox-wrapper-7 .tgl *:after::-moz-selection,
  .checkbox-wrapper-7 .tgl *:before::-moz-selection,
  .checkbox-wrapper-7 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-7 .tgl::selection,
  .checkbox-wrapper-7 .tgl:after::selection,
  .checkbox-wrapper-7 .tgl:before::selection,
  .checkbox-wrapper-7 .tgl *::selection,
  .checkbox-wrapper-7 .tgl *:after::selection,
  .checkbox-wrapper-7 .tgl *:before::selection,
  .checkbox-wrapper-7 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-7 .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.5em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .checkbox-wrapper-7 .tgl + .tgl-btn:after,
  .checkbox-wrapper-7 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .checkbox-wrapper-7 .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-7 .tgl + .tgl-btn:before {
    display: none;
  }
  .checkbox-wrapper-7 .tgl:checked + .tgl-btn:after {
    left: 50%;
  }
  .checkbox-wrapper-7 .tgl-ios + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid #e8eae9;
  }
  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
  }
  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:hover:after {
    will-change: padding;
  }
  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:active {
    box-shadow: inset 0 0 0 2em #e8eae9;
  }
  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:active:after {
    padding-right: 0.8em;
  }
  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn {
    background: #86d993;
  }
  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn:active {
    box-shadow: none;
  }
  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn:active:after {
    margin-left: -0.8em;
  }
  /******* fin checkbox 3 ******/
  /***** checkbox 4 ****/
  .checkbox-wrapper-34 label.specifique-label {
    transform: translateX(0) translateY(0) rotate(0) skewX(0) skewY(0) scaleX(0.75) scaleY(0.75) !important;
  }
  .checkbox-wrapper-34 {
    --blue: #0D7EFF;
    --g08: #E1E5EB;
    --g04: #848ea1;
    display: inline-block;
    padding-right: 20px;
  }
  .checkbox-wrapper-34 .tgl {
    display: none;
  }
  .checkbox-wrapper-34 .tgl,
  .checkbox-wrapper-34 .tgl:after,
  .checkbox-wrapper-34 .tgl:before,
  .checkbox-wrapper-34 .tgl *,
  .checkbox-wrapper-34 .tgl *:after,
  .checkbox-wrapper-34 .tgl *:before,
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .checkbox-wrapper-34 .tgl::selection,
  .checkbox-wrapper-34 .tgl:after::selection,
  .checkbox-wrapper-34 .tgl:before::selection,
  .checkbox-wrapper-34 .tgl *::selection,
  .checkbox-wrapper-34 .tgl *:after::selection,
  .checkbox-wrapper-34 .tgl *:before::selection,
  .checkbox-wrapper-34 .tgl + .tgl-btn::selection {
    background: none;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 70px;
    height: 33px;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after,
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 44%;
    height: 100%;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:after {
    left: 0;
  }
  .checkbox-wrapper-34 .tgl + .tgl-btn:before {
    display: inline;
    position: absolute;
  }
  .checkbox-wrapper-34 .tgl:checked + .tgl-btn:after {
    left: 56.5%;
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn {
    background: var(--g08);
    border-radius: 20rem;
    padding: 2px;
    transition: all 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    vertical-align: middle;
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:after {
    border-radius: 2em;
    background: #fff;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:before {
    content: "Non";
    left: 35px;
    top: 4px;
    color: var(--g04);
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios + .tgl-btn:active:after {
    padding-right: 0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn {
    background: #edd472;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active {
    box-shadow: inset 0 0 0 30px rgba(0, 0, 0, 0.1);
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:active:after {
    margin-left: -0.4em;
  }
  .checkbox-wrapper-34 .tgl-ios:checked + .tgl-btn:before {
    content: "Oui";
    left: 5px;
    top: 4px;
    color: #fff;
  }
  /****** fin checkbox 4 ***/
  /****** checkbox2 ****/
  .toggle-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 350px;
    background: #ffad00;
    border-radius: 500px;
    border: solid 5px transparent;
    background-clip: padding-box;
    cursor: pointer;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.15);
  }
  .toggle__wrapper {
    width: 500px;
    height: 250px;
    margin: -4px -2px;
    border-radius: 500px;
    background: linear-gradient(hsl(39, 100%, 44%), hsla(39, 100%, 42%, 0.1));
    box-shadow: 0px 5px 1px 0 hsla(41, 100%, 57%, 0.7);
  }
  .toggle__bg {
    width: 500px;
    height: 250px;
    background: hsl(199, 43%, 59%);
    background: linear-gradient(to right, hsl(199, 43%, 59%) 50%, hsl(18, 77%, 50%) 50% 100%);
    background-size: 200% 100%;
    background-position: 75%;
    border-radius: 500px;
    border: solid 5px transparent;
    background-clip: padding-box;
    box-shadow: inset 0px 30px 50px 15px hsla(0, 0%, 0%, 0.3);
    transition: all 0.85s ease-in-out;
  }
  .toggle__sphere {
    position: relative;
    height: 238px;
    width: 238px;
    background: hsl(18, 100%, 62%);
    background: linear-gradient(to right, hsl(199, 43%, 59%) 50%, hsl(18, 77%, 50%) 50% 100%);
    border-radius: 50%;
    transform-origin: top left;
    transform: translateY(1px);
    box-shadow: 2px 0px 5px 1px hsla(18, 77%, 15%, 0.05), 0px 10px 10px 1px hsla(18, 77%, 15%, 0.2), -3px 0px 3px 1px hsla(0, 0%, 0%, 0.75);
    transition: all 0.85s ease-in-out;
  }
  .toggle__sphere:before,
  .toggle__sphere:after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    height: 1px;
    width: 40px;
    background: hsla(0, 0%, 0%, 0.25);
    border-radius: 50%;
    box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.25);
  }
  .toggle__sphere:before {
    top: -2px;
  }
  .toggle__sphere:after {
    bottom: -1px;
  }
  .toggle__sphere-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
    box-shadow: inset 0px -30px 30px 15px hsla(0, 0%, 0%, 0.1);
  }
  .toggle__sphere-bg {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    border-radius: 50%;
    transition: transform 0.85s ease-in-out;
  }
  .toggle__sphere-bg:before,
  .toggle__sphere-bg:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .toggle__sphere-bg:before {
    background-color: hsl(18, 77%, 50%);
    border-radius: 50%;
  }
  .toggle__sphere-bg:after {
    background-color: hsl(199, 43%, 59%);
    transform: rotateY(180deg);
    border-radius: 50%;
  }
  .input-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }
  .input-checkbox:checked + .toggle__bg {
    background-position: 25%;
  }
  .input-checkbox:checked + .toggle__bg .toggle__sphere {
    transform: translateX(250px) translateY(1px);
    box-shadow: -2px 0px 5px 1px hsla(18, 77%, 15%, 0.05), 0px 10px 10px 1px hsla(18, 77%, 15%, 0.2), 3px 0px 3px 0px hsla(0, 0%, 0%, 0.75);
  }
  .input-checkbox:checked + .toggle__bg .toggle__sphere-bg {
    transform: rotateY(180deg);
  }
  /***** fin checkbox2 ***/
  /****** checkbox1 ****/
  /* The container */
  .site .container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    line-height: 25px;
    cursor: pointer;
    color: #000000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  /* Hide the browser's default checkbox */
  .site .container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  /* Create a custom checkbox */
  .site .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 10px;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: solid 1px #191919;
  }
  /* On mouse-over, add a grey background color */
  .site .container-checkbox:hover input ~ .checkmark {
    background-color: #eee;
  }
  /* When the checkbox is checked, add a blue background */
  .site .container-checkbox input:checked ~ .checkmark {
    background-color: #e3c22a;
  }
  /* Create the checkmark/indicator (hidden when not checked) */
  .site .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .site .container-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  /* Style the checkmark/indicator */
  .site .container-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  /**** fin checkbox1 ****/
  .site #formNiceEdit select, .site #formNiceEdit input, .site #formNiceEdit textarea {
    @apply pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200;
  }
  .site #formNiceEdit label {
    @apply static text-neutral-700;
  }
  .site .formNiceEdit label {
    @apply text-green-500;
  }
  .site #formNiceEdit .button {
    @apply p-3 border border-solid border-neutral-700 bg-neutral-700 text-white inline-block cursor-pointer;
  }
  .site #formNiceEdit .button:hover {
    @apply bg-white text-neutral-700;
  }
}
.-z-1 {
  z-index: -1;
}

.origin-0 {
  transform-origin: 0%;
}

input:focus ~ label,
input:not(:placeholder-shown) ~ label,
textarea:focus ~ label,
textarea:not(:placeholder-shown) ~ label,
select:focus ~ label,
select:not([value=""]):valid ~ label {
  /* @apply transform; scale-75; -translate-y-6; */
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-scale-x: 0.75;
  --tw-scale-y: 0.75;
  --tw-translate-y: -1.5rem;
}

input:focus ~ label,
select:focus ~ label {
  /* @apply text-black; left-0; */
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}

[data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] {
  transition-duration: 50ms;
}

[data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate {
  transition-delay: 50ms;
}

[data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] {
  transition-duration: 0.1s;
}

[data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate {
  transition-delay: 0.1s;
}

[data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] {
  transition-duration: 0.15s;
}

[data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate {
  transition-delay: 0.15s;
}

[data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] {
  transition-duration: 0.2s;
}

[data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate {
  transition-delay: 0.2s;
}

[data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] {
  transition-duration: 0.25s;
}

[data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate {
  transition-delay: 0.25s;
}

[data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] {
  transition-duration: 0.3s;
}

[data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate {
  transition-delay: 0.3s;
}

[data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] {
  transition-duration: 0.35s;
}

[data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate {
  transition-delay: 0.35s;
}

[data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] {
  transition-duration: 0.4s;
}

[data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate {
  transition-delay: 0.4s;
}

[data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] {
  transition-duration: 0.45s;
}

[data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate {
  transition-delay: 0.45s;
}

[data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] {
  transition-duration: 0.5s;
}

[data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate {
  transition-delay: 0.5s;
}

[data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] {
  transition-duration: 0.55s;
}

[data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate {
  transition-delay: 0.55s;
}

[data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] {
  transition-duration: 0.6s;
}

[data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate {
  transition-delay: 0.6s;
}

[data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] {
  transition-duration: 0.65s;
}

[data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate {
  transition-delay: 0.65s;
}

[data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] {
  transition-duration: 0.7s;
}

[data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate {
  transition-delay: 0.7s;
}

[data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] {
  transition-duration: 0.75s;
}

[data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate {
  transition-delay: 0.75s;
}

[data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] {
  transition-duration: 0.8s;
}

[data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate {
  transition-delay: 0.8s;
}

[data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] {
  transition-duration: 0.85s;
}

[data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate {
  transition-delay: 0.85s;
}

[data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] {
  transition-duration: 0.9s;
}

[data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate {
  transition-delay: 0.9s;
}

[data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] {
  transition-duration: 0.95s;
}

[data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate {
  transition-delay: 0.95s;
}

[data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] {
  transition-duration: 1s;
}

[data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate {
  transition-delay: 1s;
}

[data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] {
  transition-duration: 1.05s;
}

[data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate {
  transition-delay: 1.05s;
}

[data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] {
  transition-duration: 1.1s;
}

[data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate {
  transition-delay: 1.1s;
}

[data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] {
  transition-duration: 1.15s;
}

[data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate {
  transition-delay: 1.15s;
}

[data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] {
  transition-duration: 1.2s;
}

[data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate {
  transition-delay: 1.2s;
}

[data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] {
  transition-duration: 1.25s;
}

[data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate {
  transition-delay: 1.25s;
}

[data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] {
  transition-duration: 1.3s;
}

[data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate {
  transition-delay: 1.3s;
}

[data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] {
  transition-duration: 1.35s;
}

[data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate {
  transition-delay: 1.35s;
}

[data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] {
  transition-duration: 1.4s;
}

[data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate {
  transition-delay: 1.4s;
}

[data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] {
  transition-duration: 1.45s;
}

[data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate {
  transition-delay: 1.45s;
}

[data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] {
  transition-duration: 1.5s;
}

[data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate {
  transition-delay: 1.5s;
}

[data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] {
  transition-duration: 1.55s;
}

[data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate {
  transition-delay: 1.55s;
}

[data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] {
  transition-duration: 1.6s;
}

[data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate {
  transition-delay: 1.6s;
}

[data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] {
  transition-duration: 1.65s;
}

[data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate {
  transition-delay: 1.65s;
}

[data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] {
  transition-duration: 1.7s;
}

[data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate {
  transition-delay: 1.7s;
}

[data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] {
  transition-duration: 1.75s;
}

[data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate {
  transition-delay: 1.75s;
}

[data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] {
  transition-duration: 1.8s;
}

[data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate {
  transition-delay: 1.8s;
}

[data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] {
  transition-duration: 1.85s;
}

[data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate {
  transition-delay: 1.85s;
}

[data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] {
  transition-duration: 1.9s;
}

[data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate {
  transition-delay: 1.9s;
}

[data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] {
  transition-duration: 1.95s;
}

[data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate {
  transition-delay: 1.95s;
}

[data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] {
  transition-duration: 2s;
}

[data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate {
  transition-delay: 2s;
}

[data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] {
  transition-duration: 2.05s;
}

[data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate {
  transition-delay: 2.05s;
}

[data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] {
  transition-duration: 2.1s;
}

[data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate {
  transition-delay: 2.1s;
}

[data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] {
  transition-duration: 2.15s;
}

[data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate {
  transition-delay: 2.15s;
}

[data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] {
  transition-duration: 2.2s;
}

[data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate {
  transition-delay: 2.2s;
}

[data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] {
  transition-duration: 2.25s;
}

[data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate {
  transition-delay: 2.25s;
}

[data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] {
  transition-duration: 2.3s;
}

[data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate {
  transition-delay: 2.3s;
}

[data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] {
  transition-duration: 2.35s;
}

[data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate {
  transition-delay: 2.35s;
}

[data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] {
  transition-duration: 2.4s;
}

[data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate {
  transition-delay: 2.4s;
}

[data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] {
  transition-duration: 2.45s;
}

[data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate {
  transition-delay: 2.45s;
}

[data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] {
  transition-duration: 2.5s;
}

[data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate {
  transition-delay: 2.5s;
}

[data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] {
  transition-duration: 2.55s;
}

[data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate {
  transition-delay: 2.55s;
}

[data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] {
  transition-duration: 2.6s;
}

[data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate {
  transition-delay: 2.6s;
}

[data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] {
  transition-duration: 2.65s;
}

[data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate {
  transition-delay: 2.65s;
}

[data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] {
  transition-duration: 2.7s;
}

[data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate {
  transition-delay: 2.7s;
}

[data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] {
  transition-duration: 2.75s;
}

[data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate {
  transition-delay: 2.75s;
}

[data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] {
  transition-duration: 2.8s;
}

[data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate {
  transition-delay: 2.8s;
}

[data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] {
  transition-duration: 2.85s;
}

[data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate {
  transition-delay: 2.85s;
}

[data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] {
  transition-duration: 2.9s;
}

[data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate {
  transition-delay: 2.9s;
}

[data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] {
  transition-duration: 2.95s;
}

[data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate {
  transition-delay: 2.95s;
}

[data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] {
  transition-duration: 3s;
}

[data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] {
  transition-delay: 0;
}

[data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate {
  transition-delay: 3s;
}

[data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

[data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
  transition-timing-function: ease;
}

[data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
  transition-timing-function: ease-in;
}

[data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
  transition-timing-function: ease-out;
}

[data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
  transition-timing-function: ease-in-out;
}

[data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

[data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] {
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] {
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-aos^=fade][data-aos^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^=fade][data-aos^=fade].aos-animate {
  opacity: 1;
  transform: translateZ(0);
}

[data-aos=fade-up] {
  transform: translate3d(0, 100px, 0);
}

[data-aos=fade-down] {
  transform: translate3d(0, -100px, 0);
}

[data-aos=fade-right] {
  transform: translate3d(-100px, 0, 0);
}

[data-aos=fade-left] {
  transform: translate3d(100px, 0, 0);
}

[data-aos=fade-up-right] {
  transform: translate3d(-100px, 100px, 0);
}

[data-aos=fade-up-left] {
  transform: translate3d(100px, 100px, 0);
}

[data-aos=fade-down-right] {
  transform: translate3d(-100px, -100px, 0);
}

[data-aos=fade-down-left] {
  transform: translate3d(100px, -100px, 0);
}

[data-aos^=zoom][data-aos^=zoom] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos^=zoom][data-aos^=zoom].aos-animate {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

[data-aos=zoom-in] {
  transform: scale(0.6);
}

[data-aos=zoom-in-up] {
  transform: translate3d(0, 100px, 0) scale(0.6);
}

[data-aos=zoom-in-down] {
  transform: translate3d(0, -100px, 0) scale(0.6);
}

[data-aos=zoom-in-right] {
  transform: translate3d(-100px, 0, 0) scale(0.6);
}

[data-aos=zoom-in-left] {
  transform: translate3d(100px, 0, 0) scale(0.6);
}

[data-aos=zoom-out] {
  transform: scale(1.2);
}

[data-aos=zoom-out-up] {
  transform: translate3d(0, 100px, 0) scale(1.2);
}

[data-aos=zoom-out-down] {
  transform: translate3d(0, -100px, 0) scale(1.2);
}

[data-aos=zoom-out-right] {
  transform: translate3d(-100px, 0, 0) scale(1.2);
}

[data-aos=zoom-out-left] {
  transform: translate3d(100px, 0, 0) scale(1.2);
}

[data-aos^=slide][data-aos^=slide] {
  transition-property: transform;
}

[data-aos^=slide][data-aos^=slide].aos-animate {
  transform: translateZ(0);
}

[data-aos=slide-up] {
  transform: translate3d(0, 100%, 0);
}

[data-aos=slide-down] {
  transform: translate3d(0, -100%, 0);
}

[data-aos=slide-right] {
  transform: translate3d(-100%, 0, 0);
}

[data-aos=slide-left] {
  transform: translate3d(100%, 0, 0);
}

[data-aos^=flip][data-aos^=flip] {
  backface-visibility: hidden;
  transition-property: transform;
}

[data-aos=flip-left] {
  transform: perspective(2500px) rotateY(-100deg);
}

[data-aos=flip-left].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-right] {
  transform: perspective(2500px) rotateY(100deg);
}

[data-aos=flip-right].aos-animate {
  transform: perspective(2500px) rotateY(0);
}

[data-aos=flip-up] {
  transform: perspective(2500px) rotateX(-100deg);
}

[data-aos=flip-up].aos-animate {
  transform: perspective(2500px) rotateX(0);
}

[data-aos=flip-down] {
  transform: perspective(2500px) rotateX(100deg);
}

[data-aos=flip-down].aos-animate {
  transform: perspective(2500px) rotateX(0);
}