.portfolio {
  width: 20%;
  position: relative;
  float: left;
  max-height: auto;
  overflow: hidden;

}

/** Sur grand écran, plus de vignette */
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  .portfolio {
  position: relative;
  float: left;
  height: auto;
  width: 12.5%;
}
}


@media only screen  and (max-width : 1000px) {
  .portfolio {
  position: relative;
  float: left;
  height: auto;
  width: 25%;
}
}


@media only screen  and (max-width : 400px) {
  .portfolio {
  width: 50%;
  position: relative;
  float: left;
  max-height: auto;
}
}


.portfolio-image  {
  width: 100%;
}
.portfolio-image img {
  width: 100%;
  display: block;
}
.portfolio_desc {
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  text-align: center;
  width: 100%;
  height: 100%;
  display: none;
  cursor: pointer;
}
.portfolio_desc a { margin-top: 5px; display: block; color: #fff; } 
.portfolio_desc i { font-size: 1.5em}
.portfolio_desc p { color: #fff} 
.portfolio_desc .ptitle {
  font-size: 1.2em;
  text-align: center;
  width: 100%;
  margin-top: 5px;
}
.portfolio_desc .portofolio_desc_text p {
  padding: 5px;
  font-size: 0.8em;
}
.portfolio_desc_view { position: absolute; width: 100%; text-align: center; z-index: 99; height: 100% }
.portfolio_desc_view a { display: block; width: 100%; height: 100%; }
.portfolio_desc_view i { margin-top: 50%; }
.portfolio_desc_share { position: absolute; bottom: 10px;  width: 100%; text-align: center; z-index: 100}
.portfolio_desc_share i { font-size: 1.4em;}