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

@keyframes rotateReverse {
    0%{
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes lte-star{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@-webkit-keyframes menu-animation {
  0% {
  	background: var(--primary-bgcolor);
    opacity: 0;
    -webkit-transform: scale(0.04) translateY(300%);
            transform: scale(0.04) translateY(300%);
  }
  40% {
  	background: var(--primary-bgcolor);
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
    -webkit-transition: ease-out;
    transition: ease-out;
  }
  40% {
  	background: var(--primary-bgcolor);
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.02) translateY(0px);
            transform: scale(0.02) translateY(0px);
  }
  61% {
    -webkit-transform: scale(0.04);
            transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }
}

@keyframes menu-animation {
  0% {
  	background: var(--primary-bgcolor);
    opacity: 0;
    -webkit-transform: scale(0.04) translateY(300%);
            transform: scale(0.04) translateY(300%);
  }
  40% {
  	background: var(--primary-bgcolor);
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
    -webkit-transition: ease-out;
    transition: ease-out;
  }
  40% {
  	background: var(--primary-bgcolor);
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.02) translateY(0px);
            transform: scale(0.02) translateY(0px);
  }
  61% {
    -webkit-transform: scale(0.04);
            transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }
}
@keyframes blink {
  0%{
    background-color: red;
  }
  100% {
    background-color: #c80a18;
  }
}
@keyframes traitAnimation {
    0%, 100% {
        width: 0;
    }
    30%, 70% {
        width: 100%;
    }
}
@keyframes traitAnimation2 {
    0%, 100% {
        width: 0;
    }
    30%, 70% {
        width: 80%;
    }
}

@keyframes traitAnimation3 {
    0%, 100% {
        width: 0;
    }
    30%, 70% {
        width: 60%;
    }
}
/* 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;}