/*card in detail*/
                            	.card {
                              text-align: center;
                              box-shadow: 0 2px 6px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
                              max-width: 500px;/*300px*/
                              margin: 0.4rem;/*2em*/
                              padding-bottom: 0rem;/*1em*/
                            }
                            .container {
                              padding-right: 5px;/*15px*/
                              padding-left: 5px;/*15px*/
                              margin-right: 5px;/*auto*/
                              margin-left: 5px;/*auto*/
                            }
                            .recipe-grid {
                              display: flex;
                              flex-wrap: wrap;
                              justify-content: flex-start;
                            }
                            .recipe-grid .card-wrapper {
                              display: flex;
                              justify-content: center;
                              width: 100%;
                            }
                            @media (min-width:  728px) { .recipe-grid .card-wrapper { width: 50%;     } }
                            @media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }
                            @media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;     } }
                            @media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;     } }
							
							
/*--------------------text decor --------------------------*/
#text {  /* wrap text break text*/
   overflow: hidden;
   font-size:0.75em;
  line-height: 1em;/*new  1.0em*/
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
      /*Auto font sizing */
                              
                            .px2 {font-size: 1vw;
                                padding:1px;
                                }
                            	
                            	.px1 {
                              margin: 0;
                              font-size: calc(1vw + 1vh + 0.1vmin);
                              /* See:
                               * https://codepen.io/CrocoDillon/pen/jgmwt
                               * For some math behind this
                               */
                               
                               -webkit-text-size-adjust: none /*ios*/
                            }
							
	/*--------------------text decor --------------------------*/						
/*<!-- image hover layer --->*/
/* quick reset and base styles */
   * {
 /*margin:0;
 padding: 0;
 border: 0;*/
   }
   /*html {
 font-family: helvetica, arial, sans-serif;
   }*/
   /* relevant styles */
   .img__wrap {
 position: relative;
 /*height: 50px;*/
    
 width:100%;/*width:136px*/
 
   }
   
   .img__description_layer {
 position: absolute;
  top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(36, 62, 206, 0.02);

 vertical-align:top;
 /*color: #fff;*/
 visibility: hidden;
 /*opacity: 0.9;*/
 display: flex;
 align-items: center;
 justify-content: center;
   
 /* transition effect. not necessary */
 transition: opacity .1s, visibility .1s;
   }
   
   .img__wrap:hover .img__description_layer {
 visibility: visible;
 opacity: 1;

   }
   
   .img__description {
 transition: .1s;
 transform: translateY(1em);
 
   }
   
   .img__wrap:hover .img__description {
 transform: translateY(0);
  background-color:#fefefe;/*--new--*/
  
   }
/*<!-- image hover layer --->*/