/* CSS Document */
.restos {
  display:flex;
  flex-wrap:wrap;
  
  margin-bottom:2%;
}

.resto_cat {
  width:24%;
  margin-right:1%;
  margin-bottom:1%;
  position: relative;
  min-height:150px;
  
  background-size:cover;
  background-repeat:no-repeat;
}
.resto_cat h2 {
    font-weight: 500;
    font-size: 14px;     
    bottom: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px;
    text-align: right;
    color:#000;
    position: absolute;
    bottom:20px;
    width:100%;
}

.resto {
  width:24%;
  min-height:150px;
  margin-right:1%;
  margin-bottom:1%;
  padding:10px;
  border:1px solid rgba(200,200,200,0.5);
  
  display:flex;
  justify-content:space-between;
  flex-direction:column;
}




.resto h2 {
  color:#8C1D40;
  font-weight:500;
  font-size:14px;
  margin: 0 0 5px 0;
  text-transform:none;
}
.resto a {
  color:#000;
}
.resto a:hover {
  color:#8C1D40;
}

.resto_photo {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width:100%;
    height:100px;  
}


.resto_desc {
  text-align:justify;
  color:#000;
  margin-bottom:5px;
  font-size: 11px;
}
.resto_ville {
  text-align:left;
  color:#777;
  margin-bottom:5px;
}
.resto_infos {
   background-color: rgba(200,200,200,0.2);
   padding:5px;
   font-size: 11px;
}




/* ---------------------- @NOTE RESPONSIVE 920px */

@media screen and (max-width: 1200px) {

  .resto, .resto_cat {
    width:31%;
    margin:1%;
    
  }
 
}

@media screen and (max-width: 920px) {
  #restos {
    
  }
  .resto, .resto_cat {
    width:48%;
    margin:1%;
    
  }
 
}

@media screen and (max-width: 600px) {
  #restos {
    
  }
  .resto {
    width:100%;
    margin:1% 0;
    
  }
  .resto_cat {
    background-image:none!important;
    height:auto;
    min-height: 0;
    width:100%;
  }
  .resto_cat h2 {
    position:relative;
    text-align:center;
    bottom:0;
  }
 
}

@media print {
  #restos {
   
  }
  .resto, .resto_cat {
    width:48%;
    margin:1%;
    
  }

 
}