@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    } 
    100% {
        opacity: 0.9;
        transform: translateY(0);
    } 
}
.animzoom{
    animation: zoomslide 25s forwards infinite;
}

@keyframes zoomslide {
  0% {
    transform: scale(1.6) rotate(-10deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.6) rotate(-10deg);
  }
}

/* Animations éléments de base */
.animation-element-up, 
.animation-element_toogle-up, 
.animation-element-child-up>*, 
.animation-element_toogle-child-up>* {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.6s;
}

.animation-element, 
.animation-element_toogle, 
.animation-element-child>*, 
.animation-element_toogle-child>*{
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.6s;
}

.animation-element_opacity, 
.animation-element_toogle-opacity {
    opacity: 0;
    transition: all 2s;
}

.animation-element_reverse, 
.animation-element_toogle-reverse{
    transform: translateX(100px);
    opacity: 0;
    transition: all 2s;
}

.animClass.in-view, 
.animClassChild.in-view>*, 
.animClassToogle.in-view, 
.animClassChildToogle.in-view>* {
    transform: translate(0px, 0px)!important;
    opacity: 1;
}
.animationDirection {
    position: relative;
    overflow: hidden;
}
.animationDirection::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    transition: all 0.5s;
    top: 0;
    z-index: 2;
}

.animationDirection.left::before{left: 0%;}
.animationDirection.left.in-view::before{left:-100%;}

.animationDirection.right::before{right: 0%;left: initial;}
.animationDirection.right.in-view::before{right: -100%;}

.animationDirection.top::before{top: 0%;}
.animationDirection.top.in-view::before{top:-100%;}

.animationDirection.bottom::before{bottom: 0%; top: initial;}
.animationDirection.bottom.in-view::before{bottom: -100%;}

.animationDirection.primary::before{background: var(--primary-color);}
.animationDirection.secondary::before{background: var(--secondary-color);}
.animationDirection.tertiary::before{background: var(--tertiary-color);}
.animationDirection.white::before{background: var(--white)}
.animationDirection.black::before{background: var(--black)}

/*----------------------------- delay    -----------------------------*/
.delay:nth-child(2), 
.animClassChild.delay>*:nth-child(2){transition-delay: 0.2s;}

.delay:nth-child(3), 
.animClassChild.delay>*:nth-child(3){transition-delay: 0.3s;}

.delay:nth-child(4), 
.animClassChild.delay>*:nth-child(4){transition-delay: 0.4s;}

.delay:nth-child(5), 
.animClassChild.delay>*:nth-child(5){transition-delay: 0.5s;}

.delay:nth-child(6), 
.animClassChild.delay>*:nth-child(6){transition-delay: 0.6s;}

.delay:nth-child(7), 
.animClassChild.delay>*:nth-child(7){transition-delay: 0.7s;}

.delay:nth-child(8), 
.animClassChild.delay>*:nth-child(8){transition-delay: 0.8s;}


/*----------------------------- overflow    -----------------------------*/
.animClass, 
.animClassChild, 
.animClassToogle, 
.animClassChildToogle {overflow: hidden;}

.animClass.in-view, 
.animClassChild.in-view, 
.animClassToogle.in-view, 
.animClassChildToogle.in-view {overflow: inherit;}
/*-------------------FLOATING---------------------*/
@keyframes floating {
0% {
    transform: translateY(0) rotate(14deg);
}

50% {
    transform: translateY(16px) rotate(15deg);
}
100% {
    transform: translateY(0) rotate(14deg);
}
}

/*-------------LOADER-----------------------*/
@-webkit-keyframes box-move0 {
    12% {
      transform: translate(var(--x), var(--y));
    }
  
    25%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move0 {
    12% {
      transform: translate(var(--x), var(--y));
    }
  
    25%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale0 {
    6% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    14%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale0 {
    6% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    14%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move1 {
    16% {
      transform: translate(var(--x), var(--y));
    }
  
    29%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move1 {
    16% {
      transform: translate(var(--x), var(--y));
    }
  
    29%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale1 {
    10% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    18%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale1 {
    10% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    18%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move2 {
    20% {
      transform: translate(var(--x), var(--y));
    }
  
    33%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move2 {
    20% {
      transform: translate(var(--x), var(--y));
    }
  
    33%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale2 {
    14% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    22%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale2 {
    14% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    22%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move3 {
    24% {
      transform: translate(var(--x), var(--y));
    }
  
    37%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move3 {
    24% {
      transform: translate(var(--x), var(--y));
    }
  
    37%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale3 {
    18% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    26%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale3 {
    18% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    26%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move4 {
    28% {
      transform: translate(var(--x), var(--y));
    }
  
    41%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move4 {
    28% {
      transform: translate(var(--x), var(--y));
    }
  
    41%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale4 {
    22% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    30%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale4 {
    22% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    30%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move5 {
    32% {
      transform: translate(var(--x), var(--y));
    }
  
    45%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move5 {
    32% {
      transform: translate(var(--x), var(--y));
    }
  
    45%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale5 {
    26% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    34%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale5 {
    26% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    34%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move6 {
    36% {
      transform: translate(var(--x), var(--y));
    }
  
    49%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move6 {
    36% {
      transform: translate(var(--x), var(--y));
    }
  
    49%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale6 {
    30% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    38%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale6 {
    30% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    38%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes box-move7 {
    40% {
      transform: translate(var(--x), var(--y));
    }
  
    53%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @keyframes box-move7 {
    40% {
      transform: translate(var(--x), var(--y));
    }
  
    53%, 52% {
      transform: translate(0, 0);
    }
  
    80% {
      transform: translate(0, -32px);
    }
  
    90%, 100% {
      transform: translate(0, 188px);
    }
  }
  
  @-webkit-keyframes box-scale7 {
    34% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    42%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @keyframes box-scale7 {
    34% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }
  
    42%, 100% {
      transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
  }
  
  @-webkit-keyframes ground {
    0%, 65% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
  
    75%, 90% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
    }
  
    100% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
  }
  
  @keyframes ground {
    0%, 65% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
  
    75%, 90% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
    }
  
    100% {
      transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
  }
  
  @-webkit-keyframes ground-shine {
    0%, 70% {
      opacity: 0;
    }
  
    75%, 87% {
      opacity: 0.2;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  @keyframes ground-shine {
    0%, 70% {
      opacity: 0;
    }
  
    75%, 87% {
      opacity: 0.2;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes mask {
    0%, 65% {
      opacity: 0;
    }
  
    66%, 100% {
      opacity: 1;
    }
  }
  
  @keyframes mask {
    0%, 65% {
      opacity: 0;
    }
  
    66%, 100% {
      opacity: 1;
    }
  }