/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
.flexbin {
    display: flex!important;
    overflow: hidden;
    flex-wrap: wrap;
    margin: -2.5px; 
}
.flexbin:after {
  content: '';
  flex-grow: 999999999;
  min-width: 300px;
  height: 0; 
}
.flexbin > * {
    position: relative;
    display: block;
    /*height: 350px;*/
    margin: 2.5px;
    flex-grow: 1; 
}
.flexbin > * > img {
    height: 300px;
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
    vertical-align: bottom; 
}
.flexbin.flexbin-margin {
  margin: 1.5px; 
}

/*
* DIV d'information'
*/

.InfoLinkImg{
    /*display: none;*/
    position: inherit;
    z-index: 999;
    
    top: -12%;
    height: 12%;  
    margin-bottom: -18px;
    
    vertical-align: sub;
    font-size: 0.9em; 
    color: white;
    text-indent: 5%;
    
    pointer-events: none;
    cursor: default;
    text-decoration: none;

    transition: opacity 0.2s ease 0s, max-height 0.2s ease 0s;    
    background: linear-gradient(transparent 20%, rgba(0, 0, 0, 0.6) 100%);
    
}




  @media (max-width: 980px) {
    .flexbin {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    margin: -2.5px; 
    }
    .flexbin:after {
    content: '';
    flex-grow: 999999999;
    min-width: 150px;
    height: 0; 
    }
    .flexbin > * {
    position: relative;
    display: block;
    height: 150px;
    margin: 2.5px;
    flex-grow: 1; 
    }
    .flexbin > * > img {
    height: 150px;
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
    vertical-align: bottom; 
    }
    .flexbin.flexbin-margin {
      margin: 2.5px; 
    } 
    
    .InfoLinkImg{   
        font-size: 0.8em;        
    }    
}
  @media (max-width: 400px) {
    .flexbin {
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      margin: -2.5px; 
    }
    .flexbin:after {
      content: '';
      flex-grow: 999999999;
      min-width: 100px;
      height: 0; 
    }
    .flexbin > * {
      position: relative;
      display: block;
      height: 100px;
      margin: 2.5px;
      flex-grow: 1; 
    }
    .flexbin > * > img {
      height: 100px;
      object-fit: cover;
      max-width: 100%;
      min-width: 100%;
      vertical-align: bottom; 
    }
    .flexbin.flexbin-margin {
      margin: 2.5px; 
    } 
  }