




@keyframes couleurborderbouton {
    0% {border: 2px solid #03A9F4;}
    9% {border: 2px solid #00BCD4;}
    18% {border: 2px solid #009688;}
    27% {border: 2px solid #4CAF50;}
    36% {border: 2px solid #FFEB3B;}
    45% {border: 2px solid #FFC107;}
    54% {border: 2px solid #FF9800;}
    63% {border: 2px solid #FF5722;}
    72% {border: 2px solid #F44336;}
    81% {border: 2px solid #E91E63;}
    90% {border: 2px solid #3F51B5;}
    100% {border: 2px solid #03A9F4;}
}


@keyframes couleurfondbouton {
    0% {background-color: #03A9F4;}
    9% {background-color:#00BCD4;}
    18% {background-color:#009688;}
    27% {background-color:#4CAF50;}
    36% {background-color: #FFEB3B;}
    45% {background-color: #FFC107;}
    54% {background-color: #FF9800;}
    63% {background-color: #FF5722;}
    72% {background-color: #F44336;}
    81% {background-color: #E91E63;}
    90% {background-color: #3F51B5;}
    100% {background-color: #03A9F4;}
}


@keyframes disappear {
  0% {opacity: 1;
  }
  80%{
      opacity: 1;
      display: block;
    }
  100%{
      opacity: 0;
      display: none;
  }
}
.loader{
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #495057;
  animation: disappear 3s;
  animation-iteration-count: 1;
  margin: 0;
  padding: 0;
}
.loader svg{
  width: 100vw;
  height: 100vh;
  top:0;
  left: 0;
  bottom:0;
  right: 0;
  position: fixed;
  margin: 0;
  padding: 0;
}
@keyframes loader {
    0% {left: 40%;
        width:0px;
  }
  100%{
      width:80%;
      left:0;
  }
}
.cls-1-loader{
  animation: loader 3s;
  animation-iteration-count: 1;
}






@keyframes opacitypage {
    0% {opacity: 0;}
    10% {opacity: 1;}
    80% {opacity: 1;}
    100% {opacity: 0;}
}

.svg-hero{
  animation: opacitypage 9s;
  animation-iteration-count: infinite;
}
.svg-two{
  animation: opacitypage 6s;
  animation-iteration-count: infinite;
}
.svg-three{
  animation: opacitypage 6s;
  animation-iteration-count: infinite;
}
.svg-four{
  animation: opacitypage 6s;
  animation-iteration-count: infinite;
}














