@charset "utf-8";

/*########################*/


/*########################*/


/*  ATCHOUM C.S.S. V0.1   */


/*######   ANIMS   #######*/


/*########################*/


/*########################*/

*:hover {
 transition: 0.5s ease;
}


/* ANIM GLISSEMENT HORIZONTAL */

.element-to-hide {
 visibility: hidden;
}

.slideRight {
 visibility: visible;
 animation-name: slideRight;
 -webkit-animation-name: slideRight;
 animation-duration: 1.5s;
 -webkit-animation-duration: 1.5s;
 animation-timing-function: ease-in-out;
 -webkit-animation-timing-function: ease-in-out;
}

@keyframes slideRight {
 0% {
  transform: translateX(-150%);
 }
 50% {
  transform: translateX(8%);
 }
 65% {
  transform: translateX(-4%);
 }
 80% {
  transform: translateX(4%);
 }
 95% {
  transform: translateX(-2%);
 }
 100% {
  transform: translateX(0%);
 }
}

.slideLeft {
 visibility: visible;
 animation-name: slideLeft;
 -webkit-animation-name: slideLeft;
 animation-duration: 1.5s;
 -webkit-animation-duration: 1.5s;
 animation-timing-function: ease-in-out;
 -webkit-animation-timing-function: ease-in-out;
}

@keyframes slideLeft {
 0% {
  transform: translateX(150%);
 }
 45% {
  transform: translateX(6%);
 }
 60% {
  transform: translateX(-3%);
 }
 70% {
  transform: translateX(5%);
 }
 90% {
  transform: translateX(-3%);
 }
 100% {
  transform: translateX(0%);
 }
}


/* ANIMATIONS CSS --------------*/


/* ICOS VALID */

@keyframes animValidTrajet {
 0% {
  background: #37B397 !important;
  background-position: center;
  background-size: 40px;
 }
 99% {
  background: #37B397;
  background-position: center;
  background-size: 40px;
 }
 100% {
  background: none;
  background-position: 530px 0;
  background-size: 40px;
 }
}

@keyframes animValid {
 0% {
  background: #37B397 !important;
  background-position: 530px 0;
  background-size: 40px;
 }
 99% {
  background: #37B397;
  background-position: 530px 0;
  background-size: 40px;
 }
 100% {
  background: none;
  background-size: 40px;
 }
}

.CadreAnimValid,
.CadreAnimValid2 {
 animation-name: CadreAnimValid;
 animation-duration: 5s;
 animation-timing-function: ease-in-out;
}

@keyframes CadreAnimValid {
 0% {
  border: 1px solid #ccc !important;
  background: #fff !important;
 }
 25% {
  border: 1px solid green;
  background: #ccc !important;
 }
 100% {
  border: 1px solid #ccc;
  background: #fff;
 }
}


/********ANIMS PAGE INDEX **********/

.animate46PC {
 animation: animation46PC 3s normal;
}

@keyframes animation46PC {
 0% {
  width: 0;
 }
 100% {
  width: 85%;
 }
}

.animate32PC {
 animation: animation32PC 2.5s normal;
}

@keyframes animation32PC {
 0% {
  width: 0;
 }
 100% {
  width: 60%;
 }
}

.animate29PC {
 animation: animation29PC 2s normal;
}

@keyframes animation29PC {
 0% {
  width: 0;
 }
 100% {
  width: 50%;
 }
}

.animate18PC {
 animation: animation18PC 1.5s normal;
}

@keyframes animation18PC {
 0% {
  width: 0;
 }
 100% {
  width: 40%;
 }
}

.animate5PC {
 animation: animation5PC 1s normal;
}

@keyframes animation5PC {
 0% {
  width: 0;
 }
 100% {
  width: 25%;
 }
}

.animate90PC {
 animation: animation90PC 2s normal;
}

@keyframes animation90PC {
 0% {
  width: 0;
 }
 100% {
  width: 85%;
 }
}

.animate87PC {
 animation: animation87PC 1.5s normal;
}

@keyframes animation87PC {
 0% {
  width: 0;
 }
 100% {
  width: 80%;
 }
}

.animate81PC {
 animation: animation81PC 1s normal;
}

@keyframes animation81PC {
 0% {
  width: 0;
 }
 100% {
  width: 75%;
 }
}