@charset "UTF-8";

/* Directives de Tailwind CSS */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

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 */

/* pour éviter un mouvement brutal du header lors du scroll il faut mettre un padding a la hauteur du header */

.shadow-actu, .shadow-block {
  box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
}

.logoSliderMobile {
  width: 150px;
  display: inline-block;
  padding: 20px 5px 10px 5px;
}

.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);
  --tw-bg-opacity: 1;
  background-color: rgb(100 154 127 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.date-actualite {
  width: calc(50% - 19px);
  color: #649a7f;
}

html {
  scroll-behavior: smooth;
}

img{
  display: inline-block;
}

.site .button {
  background: #191919;
  border-radius: 4px;
  color: #ffffff;
  padding: 5px 10px;
  text-transform: uppercase;
  display: inline-block;
  border: solid 1px #191919;
}

.site .navBlur {
  -webkit-backdrop-filter: blur(3px);
          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;
  box-sizing: border-box;
  text-decoration: none;
  text-shadow: 0 1px 0 white;
  /*transition*/
  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;
  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{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-left: 1.75rem;
  padding-top: 3.5rem;
  padding-right: 1.75rem;
}

.site .likeRowPEnglobe{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  padding-left: 3.5rem;
  padding-top: 3.5rem;
  padding-right: 3.5rem;
  padding-bottom: 3.5rem;
}

.site .row.row-last{
  padding-bottom: 3.5rem;
}

.row-in.row-last{
  padding-bottom: 1.75rem;
}

.site .row-block{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.site .like-row{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.site .like-row-top{
  padding-top: 3.5rem;
}

.site .like-row-bottom{
  padding-bottom: 3.5rem;
}

.site .like-row-block-left{
  padding-left: 1.75rem;
}

.site .like-row-block-right{
  padding-right: 1.75rem;
}

.site input:focus ~ label, select:focus ~ label{
  left: 1.75rem;
}

.site .row-title{
  font-size: 2.25rem;
  line-height: 2.5rem;
  text-transform: uppercase;
}

.site .row-block-title{
  padding-bottom: 3.5rem;
  font-size: 2.25rem;
  line-height: 2.5rem;
  text-transform: uppercase;
}

.site .alert-success{
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(100 154 127 / var(--tw-bg-opacity, 1));
  padding: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.site .title-end-color:after{
  position: absolute;
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), 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-text-opacity: 1;
  color: rgb(100 154 127 / var(--tw-text-opacity, 1));
  --tw-content: attr(data-text);
  content: var(--tw-content);
}

.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{
    padding-left: 1rem;
    padding-top: 2rem;
    padding-right: 1rem;
  }

  .site .row.row-last{
    padding-bottom: 2rem;
  }

  .site .row > .row-block:not(.width-nochange), .site .like-row > .like-row-block:not(.width-nochange){
    width: 100%;
  }

  .site .row > .row-block:not(:last-child){
    padding-bottom: 2rem;
  }

  .site .row-block{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site .row-title{
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
  }

  .site .row-block-title{
    padding-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
  }

  .site .likeRowPEnglobe{
    padding-left: 2rem;
    padding-top: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
  }
}

.site select, .site input:not(.specifique-input), .site textarea{
  margin-top: 0px;
  display: block;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 0px;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.site select:focus, .site input:not(.specifique-input):focus, .site textarea:focus{
  --tw-border-opacity: 1;
  border-color: rgb(237 212 114 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.site label:not(.specifique-label){
  position: absolute;
  top: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  transition-duration: 300ms;
  z-index: -1;
  transform-origin: 0%;
}

.site .row-block-field {
  /* w-full */
  position: relative;
  z-index: 0;
  margin-bottom: 1.25rem;
}

.site #ui-datepicker-div {
  width: 320px;
  z-index: 10000 !important;
}

/******* checkbox 3 *****/

/******* 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::-moz-selection, .checkbox-wrapper-34 .tgl:after::-moz-selection, .checkbox-wrapper-34 .tgl:before::-moz-selection, .checkbox-wrapper-34 .tgl *::-moz-selection, .checkbox-wrapper-34 .tgl *:after::-moz-selection, .checkbox-wrapper-34 .tgl *:before::-moz-selection, .checkbox-wrapper-34 .tgl + .tgl-btn::-moz-selection {
  background: none;
}

.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;
  -webkit-user-select: none;
     -moz-user-select: none;
          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 ****/

/***** 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;
  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;
  transform: rotate(45deg);
}

/**** fin checkbox1 ****/

.site #formNiceEdit select, .site #formNiceEdit input, .site #formNiceEdit textarea{
  margin-top: 0px;
  display: block;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.site #formNiceEdit select:focus, .site #formNiceEdit input:focus, .site #formNiceEdit textarea:focus{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.site #formNiceEdit label{
  position: static;
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.site .formNiceEdit label{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.site #formNiceEdit .button{
  display: inline-block;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(74 75 76 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(74 75 76 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.site #formNiceEdit .button:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-x-0{
  left: 0px;
  right: 0px;
}

.inset-y-0{
  top: 0px;
  bottom: 0px;
}

.bottom-0{
  bottom: 0px;
}

.bottom-1{
  bottom: 0.25rem;
}

.bottom-3{
  bottom: 0.75rem;
}

.left-0{
  left: 0px;
}

.left-auto{
  left: auto;
}

.right-0{
  right: 0px;
}

.right-1{
  right: 0.25rem;
}

.right-3{
  right: 0.75rem;
}

.right-6{
  right: 1.5rem;
}

.right-8{
  right: 2rem;
}

.top-0{
  top: 0px;
}

.top-1{
  top: 0.25rem;
}

.top-3{
  top: 0.75rem;
}

.z-0{
  z-index: 0;
}

.z-10{
  z-index: 10;
}

.z-30{
  z-index: 30;
}

.z-40{
  z-index: 40;
}

.z-50{
  z-index: 50;
}

.col-auto{
  grid-column: auto;
}

.float-left{
  float: left;
}

.m-0{
  margin: 0px;
}

.m-2{
  margin: 0.5rem;
}

.m-3{
  margin: 0.75rem;
}

.m-auto{
  margin: auto;
}

.mx-0{
  margin-left: 0px;
  margin-right: 0px;
}

.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-mr-1{
  margin-right: -0.25rem;
}

.-mr-10{
  margin-right: -2.5rem;
}

.-mt-2\.5{
  margin-top: -0.625rem;
}

.mb-0{
  margin-bottom: 0px;
}

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-2{
  margin-bottom: 0.5rem;
}

.mb-3{
  margin-bottom: 0.75rem;
}

.mb-4{
  margin-bottom: 1rem;
}

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

.mb-8{
  margin-bottom: 2rem;
}

.ml-1{
  margin-left: 0.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-4{
  margin-left: 1rem;
}

.mr-1{
  margin-right: 0.25rem;
}

.mr-2{
  margin-right: 0.5rem;
}

.mr-4{
  margin-right: 1rem;
}

.mr-auto{
  margin-right: auto;
}

.ms-auto{
  margin-inline-start: auto;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-16{
  margin-top: 4rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-4{
  margin-top: 1rem;
}

.mt-48{
  margin-top: 12rem;
}

.block{
  display: block;
}

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

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.table-row{
  display: table-row;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.h-1{
  height: 0.25rem;
}

.h-10{
  height: 2.5rem;
}

.h-16{
  height: 4rem;
}

.h-28{
  height: 7rem;
}

.h-4{
  height: 1rem;
}

.h-40{
  height: 10rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-64{
  height: 16rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[20rem\]{
  height: 20rem;
}

.h-\[46px\]{
  height: 46px;
}

.h-full{
  height: 100%;
}

.h-screen{
  height: 100vh;
}

.min-h-\[20vw\]{
  min-height: 20vw;
}

.min-h-screen{
  min-height: 100vh;
}

.w-1\/12{
  width: 8.333333%;
}

.w-1\/2{
  width: 50%;
}

.w-1\/3{
  width: 33.333333%;
}

.w-1\/4{
  width: 25%;
}

.w-1\/5{
  width: 20%;
}

.w-1\/6{
  width: 16.666667%;
}

.w-10{
  width: 2.5rem;
}

.w-11\/12{
  width: 91.666667%;
}

.w-2\/12{
  width: 16.666667%;
}

.w-2\/3{
  width: 66.666667%;
}

.w-2\/4{
  width: 50%;
}

.w-2\/5{
  width: 40%;
}

.w-3\/12{
  width: 25%;
}

.w-3\/4{
  width: 75%;
}

.w-4{
  width: 1rem;
}

.w-5{
  width: 1.25rem;
}

.w-56{
  width: 14rem;
}

.w-6{
  width: 1.5rem;
}

.w-64{
  width: 16rem;
}

.w-8{
  width: 2rem;
}

.w-80{
  width: 20rem;
}

.w-\[46px\]{
  width: 46px;
}

.w-auto{
  width: auto;
}

.w-full{
  width: 100%;
}

.min-w-max{
  min-width: -moz-max-content;
  min-width: max-content;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.grow-0{
  flex-grow: 0;
}

.border-collapse{
  border-collapse: collapse;
}

.origin-top-right{
  transform-origin: top right;
}

.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), 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));
}

.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), 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));
}

.scale-y-0{
  --tw-scale-y: 0;
  transform: translate(var(--tw-translate-x), 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));
}

.transform{
  transform: translate(var(--tw-translate-x), 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));
}

.cursor-pointer{
  cursor: pointer;
}

.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize{
  resize: both;
}

.list-none{
  list-style-type: none;
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-rows-4{
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.flex-row{
  flex-direction: row;
}

.flex-row-reverse{
  flex-direction: row-reverse;
}

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

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

.flex-wrap{
  flex-wrap: wrap;
}

.content-center{
  align-content: center;
}

.content-evenly{
  align-content: space-evenly;
}

.items-start{
  align-items: flex-start;
}

.items-end{
  align-items: flex-end;
}

.items-center{
  align-items: center;
}

.items-stretch{
  align-items: stretch;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.justify-items-center{
  justify-items: center;
}

.gap-4{
  gap: 1rem;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-divide-opacity, 1));
}

.self-start{
  align-self: flex-start;
}

.self-end{
  align-self: flex-end;
}

.self-center{
  align-self: center;
}

.overflow-auto{
  overflow: auto;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-x-auto{
  overflow-x: auto;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.break-words{
  overflow-wrap: break-word;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-b-md{
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-t-md{
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.rounded-br{
  border-bottom-right-radius: 0.25rem;
}

.rounded-tr{
  border-top-right-radius: 0.25rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-2{
  border-width: 2px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-b-2{
  border-bottom-width: 2px;
}

.border-b-\[1px\]{
  border-bottom-width: 1px;
}

.border-b-\[3px\]{
  border-bottom-width: 3px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-\[1px\]{
  border-left-width: 1px;
}

.border-r{
  border-right-width: 1px;
}

.border-r-2{
  border-right-width: 2px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-\[1\.5px\]{
  border-top-width: 1.5px;
}

.border-t-\[1px\]{
  border-top-width: 1px;
}

.border-solid{
  border-style: solid;
}

.border-none{
  border-style: none;
}

.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-neutral-100{
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}

.border-neutral-700{
  --tw-border-opacity: 1;
  border-color: rgb(74 75 76 / var(--tw-border-opacity, 1));
}

.border-red-700{
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}

.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-yellow-400{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.bg-\[\#121212\]{
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}

.bg-\[\#191919\]{
  --tw-bg-opacity: 1;
  background-color: rgb(25 25 25 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2c313c\]{
  --tw-bg-opacity: 1;
  background-color: rgb(44 49 60 / var(--tw-bg-opacity, 1));
}

.bg-\[\#649a7f\]{
  --tw-bg-opacity: 1;
  background-color: rgb(100 154 127 / var(--tw-bg-opacity, 1));
}

.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-neutral-100{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-neutral-600{
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}

.bg-neutral-700{
  --tw-bg-opacity: 1;
  background-color: rgb(74 75 76 / var(--tw-bg-opacity, 1));
}

.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-red-700{
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-300{
  --tw-bg-opacity: 1;
  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
}

.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.from-yellow-300{
  --tw-gradient-from: #fde047 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-yellow-400{
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}

.bg-contain{
  background-size: contain;
}

.bg-cover{
  background-size: cover;
}

.bg-clip-padding{
  background-clip: padding-box;
}

.fill-\[\#ffffff\]{
  fill: #ffffff;
}

.fill-white{
  fill: #fff;
}

.stroke-\[\#4a4b4c\]{
  stroke: #4a4b4c;
}

.p-0{
  padding: 0px;
}

.p-10{
  padding: 2.5rem;
}

.p-12{
  padding: 3rem;
}

.p-2{
  padding: 0.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.px-0{
  padding-left: 0px;
  padding-right: 0px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-10{
  padding-bottom: 2.5rem;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pl-0{
  padding-left: 0px;
}

.pl-1\.5{
  padding-left: 0.375rem;
}

.pl-10{
  padding-left: 2.5rem;
}

.pl-3{
  padding-left: 0.75rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-1{
  padding-right: 0.25rem;
}

.pt-0{
  padding-top: 0px;
}

.pt-12{
  padding-top: 3rem;
}

.pt-14{
  padding-top: 3.5rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-3\.5{
  padding-top: 0.875rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.pt-8{
  padding-top: 2rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.text-justify{
  text-align: justify;
}

.align-middle{
  vertical-align: middle;
}

.align-bottom{
  vertical-align: bottom;
}

.font-lato{
  font-family: Lato, sans-serif, Arial;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[11pt\]{
  font-size: 11pt;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: .825rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold{
  font-weight: 700;
}

.font-extralight{
  font-weight: 200;
}

.font-medium{
  font-weight: 500;
}

.font-normal{
  font-weight: 400;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.leading-4{
  line-height: 1rem;
}

.leading-8{
  line-height: 2rem;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.text-\[\#649a7f\]{
  --tw-text-opacity: 1;
  color: rgb(100 154 127 / var(--tw-text-opacity, 1));
}

.text-\[\#edd472\]{
  --tw-text-opacity: 1;
  color: rgb(237 212 114 / var(--tw-text-opacity, 1));
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-gray-100{
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-300{
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.text-neutral-700{
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(224 43 0 / var(--tw-text-opacity, 1));
}

.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-300{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.underline{
  text-decoration-line: underline;
}

.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-neutral-400::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(163 163 163 / var(--tw-placeholder-opacity, 1));
}

.placeholder-neutral-400::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(163 163 163 / var(--tw-placeholder-opacity, 1));
}

.opacity-100{
  opacity: 1;
}

.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5{
  --tw-ring-opacity: 0.05;
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.grayscale{
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.sepia{
  --tw-sepia: sepia(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150{
  transition-duration: 150ms;
}

.duration-500{
  transition-duration: 500ms;
}

.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear{
  transition-timing-function: linear;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* 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);
  }
}

/****** 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 ***/
}

: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: -moz-fit-content;
  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;
  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%;
  -o-object-fit: cover;
     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;
  transition: all 0.3s ease-out;
}

.cursor2.hover,
.cursor3.hover {
  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;
  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;
  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;
  transform: translateY(-15px);
  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;
  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;
  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;
  filter: none;
}

.scroll-to-top:hover .rectangle-scroll {
  background: #edd472;
  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% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes telescope {
  0%, 20% {
    transform: rotate(0) translate(0);
  }

  30%, 80% {
    transform: rotate(-7deg) translate(-2px, -1px);
  }

  92%, 100% {
    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% {
    transform: rotate(0) translate(0);
  }

  30%, 75% {
    transform: rotate(8deg) translate(5px, -3px);
  }

  85%, 100% {
    transform: rotate(0) translate(0);
  }
}

@keyframes move-yellow-chat {
  0%, 20% {
    transform: rotate(0) translate(0);
  }

  30%, 75% {
    transform: rotate(-7deg) translate(-3px, 2px);
  }

  85%, 100% {
    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;
  -webkit-user-select: none;
     -moz-user-select: none;
          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;
  -webkit-user-select: none;
     -moz-user-select: none;
          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: -moz-fit-content;
  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;
  -webkit-user-select: none;
     -moz-user-select: none;
          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) {
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

.wrapperBubble a:nth-child(2) {
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}

.wrapperBubble a:nth-child(3) {
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}

.wrapperBubble a:nth-child(4) {
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.wrapperBubble a:hover {
  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; */
  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;
  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;
  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;
  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;
  -webkit-text-decoration: uppercase;
          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 {
  transition: all 0.3s ease-out;
}

.parallax2-element {
  position: absolute;
  background-size: 100vw;
  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;
  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%;
  -webkit-user-select: none;
     -moz-user-select: none;
          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;
  }
}

.-z-1 {
  z-index: -1;
}

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

input:not(:-moz-placeholder-shown) ~ label, textarea:not(:-moz-placeholder-shown) ~ 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,
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);
}

@media (min-width: 768px){
  .md\:shadow-block {
    box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
  }

  .md\:logoSlider {
    width: 70%;
    display: inline-block;
    padding: 80px 5px 20px 5px;
  }

  .md\: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;
  }
}

.hover\:right-2\.5:hover{
  right: 0.625rem;
}

.hover\:h-5:hover{
  height: 1.25rem;
}

.hover\:w-5:hover{
  width: 1.25rem;
}

.hover\:cursor-pointer:hover{
  cursor: pointer;
}

.hover\:bg-\[\#272727\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 39 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.hover\:bg-neutral-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(74 75 76 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1));
}

.hover\:bg-yellow-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.hover\:bg-opacity-30:hover{
  --tw-bg-opacity: 0.3;
}

.hover\:bg-gradient-to-tr:hover{
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.hover\:fill-\[\#8B5CF6\]:hover{
  fill: #8B5CF6;
}

.hover\:stroke-\[\#ffffff\]:hover{
  stroke: #ffffff;
}

.hover\:text-neutral-500:hover{
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}

.hover\:text-neutral-700:hover{
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-300:hover{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-500:hover{
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:no-underline:hover{
  text-decoration-line: none;
}

.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-none:hover{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-yellow-400:focus{
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.focus\:text-neutral-700:focus{
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.focus\:text-yellow-300:focus{
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.focus\:no-underline:focus{
  text-decoration-line: none;
}

.focus\:shadow-none:focus{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-neutral-100:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity, 1));
}

.focus\:ring-neutral-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity, 1));
}

.focus\:ring-neutral-700:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 75 76 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-yellow-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-white:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-opacity-75:focus-visible{
  --tw-ring-opacity: 0.75;
}

.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-neutral-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(74 75 76 / var(--tw-border-opacity, 1));
}

.dark\:bg-gray-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-neutral-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}

.dark\:bg-neutral-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(74 75 76 / var(--tw-bg-opacity, 1));
}

.dark\:text-blue-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-neutral-700:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(74 75 76 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.dark\:placeholder-gray-400:is(.dark *)::placeholder{
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.dark\:ring-offset-gray-800:is(.dark *){
  --tw-ring-offset-color: #1f2937;
}

.dark\:hover\:bg-gray-600:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-yellow-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.dark\:focus\:border-blue-500:focus:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.dark\:focus\:ring-blue-500:focus:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.dark\:focus\:ring-blue-600:focus:is(.dark *){
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px){
  .sm\:relative{
    position: relative;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:max-w-5xl{
    max-width: 64rem;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }
}

@media (min-width: 768px){
  .md\:hidden{
    display: none;
  }

  .md\:h-full{
    height: 100%;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-1\/3{
    width: 33.333333%;
  }

  .md\:w-2\/3{
    width: 66.666667%;
  }

  .md\:w-4\/5{
    width: 80%;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:p-10{
    padding: 2.5rem;
  }

  .md\:p-5{
    padding: 1.25rem;
  }

  .md\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1024px){
  .lg\:flex{
    display: flex;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:w-1\/3{
    width: 33.333333%;
  }

  .lg\:w-2\/3{
    width: 66.666667%;
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:items-end{
    align-items: flex-end;
  }
}

@media (min-width: 1280px){
  .xl\:max-w-2xl{
    max-width: 42rem;
  }
}