/* Colors */
.red, red {
    color: #DD0000;
}

.green, green {
    color: #469700;
}

.white, white {
    color: #FFF;
}

.soft, soft {
    color: #b0b0b0;
}

.blue, blue {
    color: #003B73;
}

.grey, grey {
    color: #464646;
}

.soft-grey {
    color: #878787;
}

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.invert {
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
}


/*  
 *   PREMIUM CSS
 */

.shiny {
  color: #F5C21B;
  background: -webkit-gradient(linear, left top, left bottom, from(#F5C21B), to(#D17000));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 900;
  position: relative;
  transition: color 0.5s ease, background 0.5s ease;
  -webkit-transition: color 0.5s ease, background 0.5s ease;
  -moz-transition: color 0.5s ease, background 0.5s ease;
}

.shiny:hover {
  /* Le texte devient transparent pour laisser apparaître le dégradé */
  color: transparent;
  background: -webkit-linear-gradient(70deg, #F5C21B, #D17000, #F5C21B);
  background: -moz-linear-gradient(70deg, #F5C21B, #D17000, #F5C21B);
  background: -o-linear-gradient(70deg, #F5C21B, #D17000, #F5C21B);
  background: linear-gradient(70deg, #F5C21B, #D17000, #F5C21B);
  
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  
  background-size: 200% auto;
  
  /* Lancer l'animation de vague uniquement au hover */
  -webkit-animation: wave 3s linear forwards;
  -moz-animation: wave 3s linear forwards;
  -o-animation: wave 3s linear forwards;
  animation: wave 3s linear forwards;
}

@-webkit-keyframes wave {
  from { background-position: 300% center; }
  to   { background-position: -300% center; }
}
@-moz-keyframes wave {
  from { background-position: 300% center; }
  to   { background-position: -300% center; }
}
@-o-keyframes wave {
  from { background-position: 300% center; }
  to   { background-position: -300% center; }
}
@keyframes wave {
  from { background-position: 300% center; }
  to   { background-position: -300% center; }
}