@charset "UTF-8";
/* Directives de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* le md suivi du class à moi c'est pas généré par standalone cli alors que ça fonctionnait avec webpack encore.
	ducoup je vais l'ajouter ici
*/
@media (min-width: 768px) {
  .md\:shadow-block {
    box-shadow: 0 0 19px -2px rgba(0, 0, 0, 0.41);
  }
}
@layer components {
  body {
    font-family: "HankenGrotesk";
  }
  /* lors du scroll l'header va descendre */
  .fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
  }
  /* pour éviter un mouvement brutal du header lors du scroll il faut mettre un padding a la hauteur du header */
  .fixed-header + main {
    padding-top: 95.3px;
  }
  .shadow-actu, .shadow-block {
    -webkit-box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
    box-shadow: 0px 0px 19px -2px rgba(0, 0, 0, 0.41);
  }
  .logoSlider {
    width: 270px;
    display: inline-block;
  }
  .logoSliderMobile {
    display: inline-block;
  }
  .text-logo-slide {
    position: absolute;
    bottom: 15%;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
    /* background: #2b3036; */
    color: #f8e7c1;
    letter-spacing: -0.38px;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
  }
  .gradient-white-top-left {
    background: transparent;
    background: linear-gradient(to bottom right, rgba(88, 92, 104, 0.9) 0%, transparent 60%);
  }
  .triangle-right {
    background: #ffc107;
    background: linear-gradient(to bottom right, #ffc107 50%, #FFFFFF 50%);
    width: 48px;
  }
  .triangle-left {
    background: #ffc107;
    background: linear-gradient(to bottom right, #ffffff 50%, #ffc107 50%);
    width: 48px;
  }
  .title-actualite {
    width: calc(50% - 19px);
    @apply text-white p-3 bg-[#ffc107];
  }
  .date-actualite {
    width: calc(50% - 19px);
    color: #ffc107;
  }
  .site #menu {
    animation: slideFadeIn 1s ease-out both;
  }
  @keyframes slideFadeIn {
    from {
      transform: translateY(-50px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .site #menu .button {
    padding: 10px 15px;
    margin-left: 15px;
  }
  #menu li > a {
    font-size: 15px;
    position: relative;
    transition: all 0.3s ease;
  }
  .menu-text {
    transition: color 0.2s ease-in-out;
  }
  .menu-text:hover {
    color: #ffc107;
  }
  #menu li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffc107;
    transition: width 0.4s ease, left 0.4s ease;
  }
  #menu li a:hover::after {
    width: 100%;
    left: 0;
  }
  #menu li a:hover:not(.button) {
    color: #ffc107;
  }
  .link-menu-actif {
    color: #ffc107;
  }
  .social-icons a {
    color: #f8e7c1;
    font-size: 1.3rem;
    transition: transform 0.3s ease, color 0.3s ease;
    position: relative;
  }
  .social-icons a::before {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #ffc107;
    border-radius: 50%;
    top: -0.4rem;
    right: -0.4rem;
    opacity: 0;
  }
  .social-icons a:hover {
    transform: scale(1.2) rotate(5deg);
    color: #ffc107;
  }
  .shadow-light-left-top {
    text-shadow: -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.8);
  }
  .shadow-light-right-top {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  }
  .shadow-text-strong {
    text-shadow: -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.8), 1px 1px 3px rgba(0, 0, 0, 0.6), -1px -1px 1px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3);
  }
  .shadow-text-medium {
    text-shadow: -0.5px -0.5px 0.5px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 1.5px rgba(0, 0, 0, 0.4), 2px 2px 2px rgba(0, 0, 0, 0.4);
  }
  /*** faq effect ****/
  .faq-container {
    max-width: 600px;
    margin: 0 auto;
  }
  .faq-item {
    position: relative;
    margin-bottom: 30px;
    background: white;
    /*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;
  }
  .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: -0.8rem;
    right: 1.1rem;
    font-size: 1.7rem;
    position: absolute;
    width: 40px;
    height: 40px;
    background: #e02b00;
    color: white;
    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: #f8e7c1;
    color: #333;
  }
  .faq-item.active .faq-answer {
    max-height: 300px;
    padding: 1rem;
  }
  /* Border animation elements */
  .border-anim {
    pointer-events: none;
  }
  .border-anim-gris span {
    background: #2b3036;
  }
  .border-anim-rouge span {
    background: #e02b00;
  }
  .border-anim-jaune span {
    background: #ffc107;
  }
  .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 ***/
  /*
    .menu-text:not(:has(.button)):after {
      transition: all ease-in-out .2s;
      background: none repeat scroll 0 0 #ffc107;
      content: "";
      display: block;
      height: 3px;
      width: 0;
  }
  .menu-text:hover:after {
      width: 100%;
      padding-right: 35px;
  }
  */
  @media screen and (max-width: 768px) {
    .fixed-header {
      position: relative;
    }
    /* version mobile pour éviter un mouvement brutal du header lors du scroll il faut mettre un padding a la hauteur du header */
    .fixed-header + main {
      padding-top: 0px;
    }
    .arrow-faq {
      font-size: 1.3rem;
      width: 30px;
      height: 30px;
    }
    .site footer .row-block {
      padding-bottom: 0px !important;
    }
    /*** page vos casiers **/
    .casier:nth-child(odd) > div {
      flex-direction: column-reverse;
    }
    /** fin page vos casiers **/
  }
}
@layer components {
  .onlyMobile {
    display: none !important;
  }
  input, select, textarea {
    display: inline-block;
    width: auto;
  }
  img {
    @apply inline-block;
  }
  .site main {
    font-size: 1.2rem;
    line-height: 2.2rem;
  }
  .site .button {
    display: inline-block;
    background: linear-gradient(145deg, #2B3036, #3a4047); /* Dégradé gris foncé */
    color: #FFC107; /* Texte doré */
    font-size: 18px;
    font-weight: bold;
    line-height: 1rem;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .site .button:hover {
    background: linear-gradient(145deg, #3a4047, #2B3036); /* Inversion du dégradé */
    color: white;
    transform: scale(1.05);
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.1);
  }
  .site .button.button-jaune {
    background: linear-gradient(145deg, #FFC107, #e0a800); /* Dégradé doré */
    color: #2b3036;
  }
  .site .button.button-jaune:hover {
    background: linear-gradient(145deg, #e0a800, #FFC107); /* Inversion du dégradé */
    color: #2b3036;
  }
  .site .button.button-rouge {
    background: linear-gradient(145deg, #FF2301, #d92000);
    color: white;
  }
  .site .button.button-rouge:hover {
    background: linear-gradient(145deg, #d92000, #FF2301); /* Inversion du dégradé */
    color: white;
  }
  #ui-datepicker-div, .ui-datepicker {
    background: #fff;
  }
  .site .row {
    @apply flex flex-wrap w-full pl-7 pt-14 pr-7;
  }
  .site .row.row-last {
    @apply pb-14;
  }
  .row-in {
    @apply flex flex-wrap w-full  pt-7;
  }
  .row-in.row-last {
    @apply pb-7;
  }
  .site .row-block {
    @apply pl-7 pr-7;
  }
  .site input:focus ~ label, select:focus ~ label {
    @apply left-7;
  }
  .site .row-title {
    @apply uppercase text-4xl font-bold;
  }
  .site .row-block-title {
    @apply uppercase text-4xl font-bold pb-14;
  }
  .site .row-block-subtitle {
    @apply uppercase text-3xl font-bold pb-14;
  }
  .site .row-block-subsubtitle {
    @apply uppercase text-2xl font-bold;
  }
  .title-underline-effect, .title-underline-effect-left, .title-underline-effect-right {
    position: relative;
  }
  .title-underline-effect::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 0;
    height: 5px;
    background: linear-gradient(145deg, #FF2301, #d92000);
    border-radius: 6px;
    opacity: 1; /* <-- ajout magique ici */
    transform: translateX(-50%);
  }
  .title-underline-effect::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 0;
    height: 10px;
    background: linear-gradient(145deg, #d92000, #FF2301);
    border-radius: 50%;
    transform: translateX(-50%);
  }
  .title-underline-effect.aos-animate::after {
    animation: underline-grow 0.6s ease 1s forwards;
  }
  .title-underline-effect.aos-animate::before {
    animation: circle-move 0.8s ease 1s forwards;
  }
  @keyframes underline-grow {
    to {
      width: 33%;
    }
  }
  @keyframes circle-move {
    to {
      /*left: calc(50% + 138px);*/
      left: calc(50% + 138px);
      width: 10px;
    }
  }
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /*right*/
  .title-underline-effect-right::after {
    content: "";
    position: absolute;
    left: 33%;
    bottom: -12px;
    width: 0;
    height: 6px;
    background: linear-gradient(145deg, #FF2301, #d92000);
    border-radius: 6px;
    opacity: 1; /* <-- ajout magique ici */
    animation: underline-grow-right 0.6s ease 1s forwards;
  }
  .title-underline-effect-right::before {
    content: "";
    position: absolute;
    left: 33%;
    bottom: -14px;
    width: 0;
    height: 10px;
    background: linear-gradient(145deg, #d92000, #FF2301);
    border-radius: 50%;
    animation: circle-move-right 0.6s ease 1s forwards;
    transform: translateX(-50%);
  }
  @keyframes underline-grow-right {
    to {
      width: 33%;
    }
  }
  @keyframes circle-move-right {
    to {
      left: calc(66% - 2px);
      width: 10px;
    }
  }
  /*fin right*/
  /*left*/
  .title-underline-effect-left::after {
    content: "";
    position: absolute;
    right: 33%;
    bottom: -12px;
    width: 0;
    height: 6px;
    background-color: #ffc107;
    border-radius: 6px;
    opacity: 1; /* <-- ajout magique ici */
    animation: underline-grow-left 0.6s ease 1s forwards;
  }
  .title-underline-effect-left::before {
    content: "";
    position: absolute;
    right: 33%;
    bottom: -14px;
    width: 0;
    height: 10px;
    background-color: #ffc107;
    border-radius: 50%;
    animation: circle-move-left 0.6s ease 1s forwards;
    transform: translateX(-50%);
  }
  @keyframes underline-grow-left {
    to {
      width: 33%;
    }
  }
  @keyframes circle-move-left {
    to {
      right: calc(66% - 10px);
      width: 10px;
    }
  }
  /*fin left*/
  .site .alert-success {
    @apply bg-[#ffc107] p-7 my-14 text-white;
  }
  .site .alert-error {
    @apply bg-[#f00000] p-7 my-14 text-white;
  }
  .site .title-end-color:after {
    @apply content-[attr(data-text)] text-[#ffc107] absolute -translate-x-full;
  }
  @media screen and (max-width: 768px) {
    .onlyMobile {
      display: block !important;
    }
    .onlyMobile.inline-block {
      display: inline-block !important;
    }
    .site .row {
      @apply pl-4 pt-8 pr-4;
    }
    .site .row.row-last {
      @apply pb-8;
    }
    .site .row > .row-block {
      @apply w-full;
    }
    .site .row > .row-block:not(:last-child) {
      @apply pb-8;
    }
    .site .row-block {
      @apply pl-4 pr-4;
    }
    .site .row-title {
      @apply uppercase;
      /*text-3xl*/
      font-size: 26px;
    }
    .site .row-block-title {
      @apply uppercase pb-8;
      /*text-3xl*/
      font-size: 26px;
    }
    .site .row-block-subtitle {
      @apply uppercase  pb-8;
      /*text-2xl*/
      font-size: 24px !important;
    }
    .site .row-block-subsubtitle {
      font-size: 24px;
    }
  }
}
: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
  );
}

.slide-accueil {
  background-image: url("https://easybagandgo.fr/images/slide1.jpg");
}

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

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

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

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

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

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

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

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

/*step accueil*/
.step-liquide {
  position: relative;
  padding: 20px 50px;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  width: 200px;
  overflow: hidden;
  border-radius: 40px;
}

.step-liquide span {
  position: relative;
  color: #fff;
  font-size: 20px;
  font-family: Arial;
  letter-spacing: 8px;
  z-index: 1;
}

.step-liquide .liquid {
  position: absolute;
  top: -80px;
  left: 0;
  width: 200px;
  height: 220px;
  background: #4973ff;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

.step-liquide .liquid::after,
.step-liquide .liquid::before {
  content: "";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -75%);
  background: #000;
}

.step-liquide .liquid::before {
  border-radius: 45%;
  background: rgb(20, 20, 20);
  animation: animateStepBubble 5s linear infinite;
}

.step-liquide .liquid::after {
  border-radius: 40%;
  background: rgba(20, 20, 20, 0.5);
  animation: animateStepBubble 10s linear infinite;
}

.step-liquide:hover .liquid {
  top: -120px;
}

@keyframes animateStepBubble {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}
.stepB {
  filter: hue-rotate(120deg);
  flex: 1;
  padding: 25px 50px;
  margin: 25px;
  border-radius: 999px;
  border: 5px solid #284cff;
  font-family: "VT323", monospace;
  font-size: 25px;
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  color: #fff;
  background: transparent;
  background-image: url(https://web.archive.org/web/20160312084140im_/http://splatoon.nintendo.com/assets/img/nav-bg-fill-blue.png?1443460871);
  background-repeat: repeat-x;
  background-position: 0 -100%;
  transition: 1.5s ease;
  background-position: 500% 100%;
}

.steps-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step {
  display: flex;
  align-items: center;
  margin: 20px 0;
  position: relative;
}

.circleStep {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  background: linear-gradient(145deg, #3a4047, #2B3036);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  z-index: 1;
}

.lineStep {
  width: 4px;
  height: 100%;
  background: linear-gradient(145deg, #3a4047, #2B3036);
  position: absolute;
  top: 0px;
  left: 23px;
  z-index: -1;
}

.stepAccueil {
  width: 100px;
  position: relative;
  margin-right: 25px;
}

.svgStepAccueil {
  position: absolute;
  top: 0%;
  transform: translateY(-20%);
  left: -30px;
  rotate: -8deg;
}

.textStepAccueil {
  padding-top: 5px;
}

.titleStep {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.contentStepAccueil {
  padding: 20px 0px;
}

.triangleEndStep {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 0px solid transparent;
  position: relative;
}

.triangleEndStep::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -15px;
  width: 40px;
  height: 30px;
  background: linear-gradient(145deg, #FF2301, #d92000);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.btnStep {
  display: inline-block;
  background: linear-gradient(145deg, #FFC107, #e0a800);
  color: #2b3036;
  font-size: 18px;
  font-weight: 600;
  line-height: 1rem;
  padding: 12px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 4px 0px #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btnStepRed {
  display: inline-block;
  background: #e02b00;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1rem;
  padding: 12px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 4px 0px #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btnStepGris {
  display: inline-block;
  background: linear-gradient(145deg, #2B3036, #3a4047);
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1rem;
  padding: 12px 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 4px 0px #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btnStepCircleInset {
  -webkit-box-shadow: inset 0px 0px 2px 0px #000000;
  box-shadow: inset 0px 0px 2px 0px #000000;
  display: inline-block;
  color: #2b3036;
  font-size: 18px;
  font-weight: 600;
  line-height: 6px;
  padding: 6px;
  margin-right: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btnStepCircle {
  display: inline-block;
  color: #2b3036;
  font-size: 18px;
  font-weight: 600;
  line-height: 6px;
  padding: 6px;
  margin-right: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 0px 4px 0px #000000;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.parentModernStepCircle {
  background: #fbf1d6;
  width: 14px;
  position: relative;
  height: 14px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  margin-right: 5px;
}

.btnStepCircleYellow {
  background: linear-gradient(145deg, #FFC107, #e0a800);
}

.btnStepCircleRed {
  background: linear-gradient(145deg, #FF2301, #d92000);
}

.btnStepCircleGris {
  background: linear-gradient(145deg, #2B3036, #3a4047);
}

.title-step {
  padding-top: 5px;
  margin-left: 20px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.content-step {
  padding: 20px 0px;
  margin-bottom: 5px;
}

/*fin step accueil*/
/* test degrade between block */
.degrade50 {
  background: linear-gradient(135deg, #f8e7c1 0%, #f2d9ac 30%, #eacb96 50%, #e0bc7e 70%, #d6ad66 100%) no-repeat 0 0/100% 55%, radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), rgba(255, 247, 230, 0.3) 30%, #f3d7a8 50%, #eacb96 80%) no-repeat 0 0/100% 55%;
}

/*prend 100%*/
.degrade-inverse {
  background: linear-gradient(135deg, #d6ad66 0%, #e0bc7e 30%, #eacb96 50%, #f2d9ac 70%, #f8e7c1 100%), radial-gradient(circle at top right, rgba(255, 255, 255, 0.8), rgba(255, 247, 230, 0.3) 30%, #f3d7a8 50%, #eacb96 80%);
}

.degrade50Bottom {
  background: linear-gradient(135deg, #f8e7c1 0%, #f2d9ac 30%, #eacb96 50%, #e0bc7e 70%, #d6ad66 100%) no-repeat 0 100%/100% 47%, radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), rgba(255, 247, 230, 0.3) 30%, #f3d7a8 50%, #eacb96 80%) no-repeat 0 100%/100% 47%;
}

.degrade50Bottom2 {
  background: linear-gradient(135deg, #f8e7c1 0%, #f2d9ac 30%, #eacb96 50%, #e0bc7e 70%, #d6ad66 100%) no-repeat 0 100%/100% 29%, radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), rgba(255, 247, 230, 0.3) 30%, #f3d7a8 50%, #eacb96 80%) no-repeat 0 100%/100% 29%;
}

/* fin test degrade between block*/
/** caroussel **/
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);*/
}

.carousel-track {
  display: flex;
  transition: transform 1.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.carousel-buttons button {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.2rem;
}

/** fin caroussel**/
.type-valise, .type-info-yellow {
  display: inline-block;
  padding: 0px 15px;
  border: solid 2px #FFC107;
  border-radius: 15px;
  margin-top: 10px;
}

.type-valise-red, .type-info-red {
  display: inline-block;
  padding: 0px 15px;
  border: solid 2px #e02b00;
  border-radius: 15px;
  margin-top: 10px;
}

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

.full-height {
  height: 100vh;
}

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

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

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

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

.over-hide {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

/* #Media
================================================== */
@media (max-width: 1200px) {
  .scroll-to-top {
    right: 13px;
  }
  .case-study-images li .case-study-title {
    left: 13px;
  }
}
@media (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;
  }
}
.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);
  }
}

/*** index part 1 Logo ***/
#global-index-part1 {
  position: relative;
  padding: 50px 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes expand {
  0% {
    background-size: 50%;
    background-position: 0 0;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 225%;
    background-position: -11em -5em;
  }
}
@keyframes expand-rev {
  0% {
    background-size: 225%;
    background-position: -10em -4em;
  }
  20% {
    background-size: 55%;
    background-position: 0 1em;
  }
  100% {
    background-size: 50%;
    background-position: 0 0;
  }
}
/*
*{
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  background-color: hsl(0, 0%, 0%);
  grid-template-columns: 100%;
  min-height: 90vh;
}
.wrapper {
  background-image: posterHD.jpg);
  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) {
  .carousel-slide figure {
    margin-top: 40px;
  }
  #block-raisons {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  .slide-accueil {
    background-image: url("https://easybagandgo.fr/images/slide1-mobile.png");
  }
  .bg-slide {
    background-size: 100%;
    background-position: bottom center !important;
    background-color: #3382b5;
  }
  .accueil-list-block-info > article {
    margin-top: 50px;
  }
  .carousel-slide {
    align-items: start;
  }
  .site .carousel-slide .row-block-subtitle {
    padding-bottom: 1rem;
    /*text-2xl*/
    font-size: 24px !important;
  }
  .site .carousel-slide .row {
    padding-top: 1rem;
    padding-bottom: 0;
  }
  .site .carousel-slide figure {
    text-align: center;
    margin: 0;
  }
  .site .carousel-slide img {
    max-height: 300px;
  }
  .accueil-description-slider {
    display: none;
  }
  .carousel-slide .type-valise {
    padding: 0px;
    border: none;
    border-radius: 0px;
    margin-top: 0px;
  }
  /*
  .accueil-block-parent-dimension  .accueil-slide-dimension
  {
    display: inline-block;
    background: linear-gradient(145deg, #FFC107, #e0a800);
    color: #2b3036;
    font-size: 18px;
    font-weight: 600;
    line-height: 1rem;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 0px 4px 0px #000000;
    text-transform: uppercase;
    letter-spacing: 1px;

  }
    */
  /*
      .accueil-parent-slide-dimension
      {
        border:solid 2px #ffc008;
        box-shadow: inset 0 0 2px 0 #000, 0 0 #0000, 0 0 #0000;
        border-radius: 10px;
        display:inline-block;
        margin-bottom:10px;
      }*/
  .title-taille-slide {
    color: #ffc008;
    font-weight: 700;
    text-transform: uppercase;
  }
}
* {
  -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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.clearfix {
  zoom: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#section-6 {
  background: #000;
}

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

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

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

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

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

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

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

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

#player:hover {
  width: 500px;
}

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

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

#player.disabled {
  opacity: 0.25;
}

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

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

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

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

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

#player .stop {
  display: none;
}

#player .pause {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.noplayer #player {
  display: none;
}

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

#progress.disabled {
  display: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

/**** animation etoiles et parallax2 ***/
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  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(-300px);
  animation: fade1 3s linear infinite;
}

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

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

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

#parallax2-element1 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-background.webp");
  background-repeat: no-repeat;
}

#parallax2-element2 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/interieur-lr.png");
  background-repeat: no-repeat;
}

/*
  #parallax2-element5
  {
	background-image: url('https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-montagne-bas2.webp');
	background-size: 26vw;
	background-position: 0 30vw;
	background-repeat: no-repeat; 
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	z-index:5; 
  }  

  #parallax2-element6
  {
	background-image: url('https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-montagne-left2.webp');
	background-size: 52vw;
	background-position: 3px 22vw;
	background-repeat: no-repeat; 
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	z-index:4; 
  }    

  #parallax2-element7
  {
	background-image: url('https://www.carresolutionweb.fr/images/accueil/parallax-2/2000-montagne-right2.webp');
	background-size: 38vw;
	background-position: 26vw 24vw;
	background-repeat: no-repeat; 
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	top:0;
	z-index:2; 
  }  


*/
#parallax2-element5 {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 8;
  background-position: 21vw 7vw;
  background-size: 14vw;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/tour8.png");
}

#parallax2-element6 {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-position: 46vw 16vw;
  background-size: 30vw;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/tour-right2.png");
  z-index: 5;
}

#parallax2-element7 {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background-position: 86vw 60vw;
  background-size: 8vw;
  z-index: 7;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sail5.png");
}

#parallax2-element-sea {
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
}

.water {
  position: absolute;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-position: 27vw 26.5vw;
  background-size: 55vw;
  background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sea-right.png");
  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.4;
}

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

@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 **/
@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-child(2n) {
    flex-direction: column-reverse;
  }
  #content-parallax3 > article:nth-child(2n) > .row-block:nth-child(2) {
    padding-bottom: 2rem;
  }
  #parallax2-element1 {
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/background-mobile2.png");
  }
  #parallax2-element2 {
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/interieur-mobile12.png");
  }
  #parallax2-element5 {
    background-position: 0px 30vw;
    background-size: 30vw;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/tour8.png");
  }
  #parallax2-element6 {
    /*background-position: -75px 48vw;
    background-size: 85vw;*/
    background-position: 36vw 50vw;
    background-size: 65vw;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/tour-right2.png");
    z-index: 5;
  }
  #parallax2-element7 {
    background-position: 86vw 60vw;
    background-size: 13vw;
    z-index: 7;
    background-image: url("https://www.carresolutionweb.fr/images/accueil/parallax-2/sail5.png");
  }
  #parallax2-element8 {
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    background-position: 36vw 72vw;
    background-size: 65vw;
    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;
  }
  .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;
    }
  }
  .lac {
    width: 100%;
    height: auto;
    animation: mouvementLac 5s infinite ease-in-out;
    transform-origin: center;
  }
  @keyframes mouvementLac {
    0% {
      transform: skew(0deg, 0deg);
      filter: blur(0px);
      background-position: 36vw 72vw;
    }
    25% {
      transform: skew(-1deg, 0deg);
    }
    50% {
      transform: skew(1deg, 0deg);
      background-position: 35vw 71vw;
    }
    75% {
      transform: skew(0deg, 1deg);
    }
    100% {
      transform: skew(0deg, 0deg);
      background-position: 36vw 72vw;
    }
  }
  #parallax2-principal {
    /* {# image largeur 7280 par 5981 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/7280 = 0.82 #} */
    /* {# image largeur 5964 par 8192 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/7280 = 0.82 #} */
    /* {# image largeur 4971 par 5981 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5981/4971 = 0.82 #} */
    /* {# image largeur 3993 par 7350 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 7350/3993 = 0.82 #} */
    /* {# image largeur 3993 par 6310 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 6310/3993 = 0.82 #} */
    /* {# image largeur 3993 par 5578 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5578/3993 = 0.82 #} */
    /* {# image largeur 3993 par 5741 de hauteur. si la largeur vaut 100% la hauteur vaut 56% car 5741/3993 = 0.82 #} */
    height: 164vw;
  }
}
@layer components {
  select, input, textarea {
    @apply pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-[#ffc107] border-gray-200;
  }
  label {
    @apply absolute duration-300 top-3 -z-1 origin-0 text-gray-500;
  }
  .row-block-field {
    @apply relative z-0 w-full mb-5;
  }
  #ui-datepicker-div {
    width: 320px;
    z-index: 10000 !important;
  }
  /* The container */
  .container-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    border: solid 1px #000000;
    cursor: pointer;
    color: #000000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  /* Hide the browser's default checkbox */
  .container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: solid 1px #191919;
  }
  /* On mouse-over, add a grey background color */
  .container-checkbox:hover input ~ .checkmark {
    background-color: #eee;
  }
  /* When the checkbox is checked, add a blue background */
  .container-checkbox input:checked ~ .checkmark {
    background-color: #ffc107;
  }
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .container-checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  /* Style the checkmark/indicator */
  .container-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #formNiceEdit select, #formNiceEdit input, #formNiceEdit textarea {
    @apply pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200;
  }
  #formNiceEdit label {
    @apply static text-neutral-700;
  }
  .formNiceEdit label {
    @apply text-green-500;
  }
  #formNiceEdit .button {
    @apply p-3 border border-solid border-neutral-700 bg-neutral-700 text-white inline-block cursor-pointer;
  }
  #formNiceEdit .button:hover {
    @apply bg-white text-neutral-700;
  }
}
.-z-1 {
  z-index: -1;
}

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

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

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

form {
  width: 100%;
}

#form-contact label {
  color: #f8e7c1;
  z-index: 1;
}

[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);
}