/*
  Fichier regroupant toutes les animations du portfoilio
  ==============================================================================

  Deux types de grilles existenet et se base sur un atome / Grille de 6 colonnes
  par 4 lignes (24 Positions)

  Trois formats d'images existent, ils se découpent en :
    Deux format de largeur :
      wth-1 : width 140px
      wth-2 : width 295px
    Deux format en hauteur :
      hgt-1 : height 234px
      hgt-2 : height 483px
  Nb. La combinaison 140px / 483px n'est pas utilisée (wth-1 hgt-2)


  Ces format peuvent apparaitre sur 6 colonnes positionnées en absolut aux coordonnées
    col-1 : left 0px
    col-2 : left 155px
    col-3 : left 310px
    col-4 : left 465px
    col-5 : left 620px
    col-6 : left 775px

  Il peuvent apparaître sur 4 lignes positionnées en absolut aux coordonnées
    row-1 : top 0px
    row-2 : top 249px
    row-3 : top 498px
    row-4 : top 747px
*/

ul#portfolio_projet {
  position: relative; /* Important, sinon les cellues (li) seront décalés */

  height: 1007px;
  width: 915px;
}
ul#portfolio_projet li.cellule-portfolio {
  /* Cellule de base du portfolio */

  position: absolute;
  overflow: visible;

  opacity: 0;
}


/*
  Positionnement de la grille des projets
  ==============================================================================
*/

/* Colonnes */
  .col-1 {
    left: 0px;
  }
  .col-2 {
    left: 155px;
  }
  .col-3 {
    left: 310px;
  }
  .col-4 {
    left: 465px;
  }
  .col-5 {
    left: 620px;
  }
  .col-6 {
    left: 775px;
  }
/* lignes */
  .row-1 {
    top: 0px;
  }
  .row-2 {
    top: 249px;
  }
  .row-3 {
    top: 498px;
  }
  .row-4 {
    top: 747px;
  }
/* Les largeurs */
  .wth-1 {
    width: 140px;
  }
  .wth-2 {
    width: 295px;
  }
/* Les hauteurs */
  .hgt-1 {
    height: 234px;
  }
  .hgt-2 {
    height: 483px;
  }


/*
  Survol dans la grille des projets
  ==============================================================================
*/

ul#portfolio_projet li.cellule-portfolio canvas {
  transition-duration: 0.5s;

  opacity: 1;
}
ul#portfolio_projet li.cellule-portfolio:hover canvas {
  opacity: 0;
}