/**
 * *****************************************************************
 *  Animations
 * *****************************************************************
 */

/**
 * Fait faire un tour au logo en modifiant l'opacity pour faire croire qu'il s'éloigne...
 */
@-moz-keyframes tournerEnRond {
  /* Au début le logo est droit */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    -webkit-transform: rotate(90deg)  scale(0.55);
    -moz-transform: rotate(90deg)  scale(0.55);
    -ms-transform: rotate(90deg)  scale(0.55);
    -o-transform: rotate(90deg)  scale(0.55);
    transform: rotate(90deg) scale(0.55);
    opacity: 0.70;
  }
  46% {
    -webkit-transform: rotate(180deg)  scale(0.45);
    -moz-transform: rotate(180deg)  scale(0.45);
    -ms-transform: rotate(180deg)  scale(0.45);
    -o-transform: rotate(180deg)  scale(0.45);
    transform: rotate(180deg) scale(0.45);
    opacity: 0.70;
  }
  69% {
    -webkit-transform: rotate(270deg)  scale(0.65);
    -moz-transform: rotate(270deg)  scale(0.65);
    -ms-transform: rotate(270deg)  scale(0.65);
    -o-transform: rotate(270deg)  scale(0.65);
    transform: rotate(270deg) scale(0.65);
    opacity: 0.75;
  }
  92% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 0.90;
  }
  100% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/**
 * Fait faire un tour au logo en modifiant l'opacity pour faire croire qu'il s'éloigne...
 */
@-moz-keyframes tournerEnRond {
  /* Au début le logo est droit */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    -webkit-transform: rotate(90deg)  scale(0.55);
    -moz-transform: rotate(90deg)  scale(0.55);
    -ms-transform: rotate(90deg)  scale(0.55);
    -o-transform: rotate(90deg)  scale(0.55);
    transform: rotate(90deg) scale(0.55);
    opacity: 0.70;
  }
  46% {
    -webkit-transform: rotate(180deg)  scale(0.45);
    -moz-transform: rotate(180deg)  scale(0.45);
    -ms-transform: rotate(180deg)  scale(0.45);
    -o-transform: rotate(180deg)  scale(0.45);
    transform: rotate(180deg) scale(0.45);
    opacity: 0.70;
  }
  69% {
    -webkit-transform: rotate(270deg)  scale(0.65);
    -moz-transform: rotate(270deg)  scale(0.65);
    -ms-transform: rotate(270deg)  scale(0.65);
    -o-transform: rotate(270deg)  scale(0.65);
    transform: rotate(270deg) scale(0.65);
    opacity: 0.75;
  }
  92% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 0.90;
  }
  100% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* La même animation */
@-webkit-keyframes tournerEnRond {
  /* Au début le logo est droit */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }
  23% {
    -webkit-transform: rotate(90deg)  scale(0.55);
    -moz-transform: rotate(90deg)  scale(0.55);
    -ms-transform: rotate(90deg)  scale(0.55);
    -o-transform: rotate(90deg)  scale(0.55);
    transform: rotate(90deg) scale(0.55);
    opacity: 0.70;
  }
  46% {
    -webkit-transform: rotate(180deg)  scale(0.45);
    -moz-transform: rotate(180deg)  scale(0.45);
    -ms-transform: rotate(180deg)  scale(0.45);
    -o-transform: rotate(180deg)  scale(0.45);
    transform: rotate(180deg) scale(0.45);
    opacity: 0.70;
  }
  69% {
    -webkit-transform: rotate(270deg)  scale(0.65);
    -moz-transform: rotate(270deg)  scale(0.65);
    -ms-transform: rotate(270deg)  scale(0.65);
    -o-transform: rotate(270deg)  scale(0.65);
    transform: rotate(270deg) scale(0.65);
    opacity: 0.75;
  }
  92% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 0.90;
  }
  100% {
    -webkit-transform: rotate(360deg)  scale(1);
    -moz-transform: rotate(360deg)  scale(1); 
    -ms-transform: rotate(360deg)  scale(1);
    -o-transform: rotate(360deg)  scale(1);
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Animation fondu (pour l'arrivée du titre) */
@-moz-keyframes arriveeFonduTitre
{
  from {
   opacity: 0;
  }
      
  to {
   opacity: 1;
  }
}

/* La même animation */
@-webkit-keyframes arriveeFonduTitre
{
  from {
   opacity: 0;
  }
      
  to {
   opacity: 1;
  }
}

/* Tremblote */
@-moz-keyframes tremblote
{
  from {
    margin-left:0px;
    margin-top:0px;
  }

  20% {
    margin-left:1px;
    margin-top:1px;
  }

  80% {
    margin-left:-1px;
    margin-top:-1px;
  }

  to {
    margin-left:0px;
    margin-top:0px;
  }
}

/* La même animation */
@-webkit-keyframes tremblote
{
  from {
    margin-left:0px;
    margin-top:0px;
  }

  20% {
    margin-left:1px;
    margin-top:1px;
  }

  80% {
    margin-left:-1px;
    margin-top:-1px;
  }

  to {
    margin-left:0px;
    margin-top:0px;
  }
}

/* Fondu de couleur sur le logo */
@-moz-keyframes fondu
{
    from { opacity:1; }
    70% { opacity:0.5; }
    to { opacity:1; }
}

@-webkit-keyframes fondu
{
    from { opacity:1; }
    70% { opacity:0.5; }
    to { opacity:1; }
}