.parve {
      display: none;

    }
    .milk {
      display: none;

    }
    .meet {
      display: block;

    }
   

   /* ????? ???? ?????? */
  
   /* ????? ???? ?????? */
    .gallery {
		direction: ltr;
	position: realtive;
  justify-content: center;

      display: grid;
      /* ????? ????? ??????? ?????? */
      grid-template-columns: repeat(3, 30%); /* 2 ??????, ?? ????? ????? ???? ???? ????? ??�???? ??????? ?????? */
       grid-column-gap: 2%; /* ???? ??? ??????? ??????? ???�???? */
	grid-row-gap: 10%;
   
	  
 	  	animation: zolaup 2s forwards;
	  
    }
	
@keyframes zolaup {
	0% {
		opacity: 0%;
		transform: translateY(130px);

	}

  100% {
		opacity: 100%;
		transform: translateY(0px);


	}
}
    /* ????? ??????? ?????? */
    .gallery-item {
  filter: brightness(97%);
      margin: 0px;
  width: 100%;
 height: 100%;

  object-fit: cover;


    }
.gallery-item:hover {
  filter: brightness(120%);
}
.gallery-item:active {
  filter: brightness(100%);
}

.gallery-item img {
  padding: 0;
  margin:  0;
  border: 0;


}

.headpage {
	  display: flex;
align-items: center;
  justify-content: center;

    position: absolute;
    left: 0%;
    right: 0%;
  font-family: Myriad Hebrew;
font-size: 150%;
  font-weight: bold; 
  color: #16679a;
  border-bottom:  4px solid #16679a;
      width: 100%;
	  height: 25%;
	        background-color: #d3e1e6;
			
}

.indexmenu {
    
    padding-top: 40%;
            width: 100%;
	  height: 100;
}
.namefood1 {

  position: relative;

cursor: pointer;
  width: 100%;

}
.namefood2 {

  position: absolute;
top: 10%;
  background-color: rgba(222,236,241,0.6);
  color: #dbbc2c;

   text-shadow: 2px 2px 4px #000000;
  padding: 0;
        width: 100%;
	  height: 22%;
	    font-family: Myriad Hebrew;
  font-size: 220%;
  font-weight: bold; 
  border-top: 5px solid #FFFFFF;
  border-bottom: 5px solid #FFFFFF;
  
}
.pricefood {
  display: block;
  position: absolute;
 top: 99%;
  background-color: rgba(219,188,44,0.7);
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;

  padding: 0px;
        width: 100%;
	  height: 20%;
	    font-family: Myriad Hebrew;
  font-size: 200%;
  font-weight: bold; 
		animation: zoomtext 4 forwards infinite;
  
}
 .pratim:hover {
	 position: absolute;
  top: 93%;
  left: 140px;
  transform: translate(-50%, -50%);
  background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;

        width: 280px;
	  height: 47px;
	    font-family: Myriad Hebrew;
  font-size: 250%;
  font-weight: bold; 
	 
 }
.pratim {
      display: block;
  position: absolute;
  top: 94%;
  left: 140px;
  transform: translate(-50%, -50%);
  background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;

  padding: 0px;
        width: 280px;
	  height: 40px;
	    font-family: Myriad Hebrew;
  font-size: 200%;
  font-weight: bold; 

  
}
 .root {

     
 
 }
 
 .buttonfoodsmeet {
      display: block;
  position: absolute;
  top: 94%;
  left: 81%;
  transform: translate(-50%, -50%);

   background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 12%;
	    font-family: Myriad Hebrew;
  font-size: 160%;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}

 .buttonfoodsmilk {
      display: block;
  position: absolute;
  top: 94%;
  left: 19%;
  transform: translate(-50%, -50%);
  background-color: rgba(22,103,154,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 12%;
	    font-family: Myriad Hebrew;
  font-size: 160%;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}

 .buttonfoodsparve {
      display: block;
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(22,103,154,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 12%;
	    font-family: Myriad Hebrew;
  font-size: 160%;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}
.buttonfoodsparve:hover {
  filter: brightness(110%);
}
.buttonfoodsmilk:hover {
  filter: brightness(110%);
}
.buttonfoodsmeet:hover {
  filter: brightness(110%);
}
.textinfood{
	 display: none;
	
}
 .nameinfood{
	 display: none;
	
}
  
  
  
 /* עיצוב למודאל */
    .modal {
      display: none;
      position: fixed;

      padding-top: 100px;
      left: 0;
      top: 0;
	  
      width: 100%;
      height: 100%;
     
      overflow: auto;
      background-color: rgba(0,0,0,0.9);
	    z-index: 999;
    }


	.close {
      position: absolute;
      display: flex;
	justify-content: center;
	align-items: center;
      top: -1%;
      right: -1%;
      color: #f1f1f1;
      font-size: 70px;
      font-weight: bold;
      transition: 0.3s;
      z-index: 999;
      background-color: black;
      border-radius: 50%;
      padding: 0%;
      padding-left: 1%;
      padding-right: 2%;
 
    }
    /* עיצוב לכפתור סגירת המודאל */

	
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
.backmodelinfoUP
{
      position: absolute;
      top: 5%;
       width:100%;
  
       align-items: center;

}
.backmodelinfo
{
position: relative;
 margin: auto; 
 width:50%;
 height:30%;


      background-color: #d1ba3c;
		border-radius: 30px;
			  	    font-family: newfont;
		 font-weight :bold;
		 padding-bottom: 1%; 
		 padding-top: 1%;


}

    /* עיצוב לתמונה הגדולה במודאל */
    .modal-content {
 position: relative;
 
      margin: auto;
     
      display: block;
	 border-radius: 30px;
	  
      width: 94%;
 	height: 330px;


    }

	.modelfoodname {

            display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 94%;
      height: 10%;
    
	  border-radius: 20px;
  	margin-top: 1%;
	 font-size:250%;
	   color: black;
      background-color:#FFFF;
text-shadow: 2px 2px 4px  #dacb28;
}

.modelfoodtext {

      display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 94%;
      height: 60%;
       margin: auto;
      min-height: 370px;
  	margin-top: 1%;
	border-radius: 30px;
      background-color: #e3dcb9;
      
	  font-size:120%;
	   color: #000;
			  	    font-family: newfont;
		 font-weight :bold;
		text-shadow: 4px 4px 6px  #dacb28;

		
}
.modelfoodprice {

      display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 94%;
      height: 10%;
	  border-radius: 20px;

 	 margin: auto;
 	  	margin-top: 1%;
      background-color: #fffc08;
	   color: #000;
			font-size:40px;
text-shadow: 4px 4px 4px  #FFF;
}



  
  
  
  
  
  
  
  
















@media screen and (max-width: 600px) {
   .parve {
      display: none;

    }
    .milk {
      display: none;

    }
    .meet {
      display: block;

    }
   

   /* ????? ???? ?????? */
  
   /* ????? ???? ?????? */
    .gallery {
		direction: ltr;
	position: realtive;
  justify-content: center;

      display: grid;
      /* ????? ????? ??????? ?????? */
      grid-template-columns: repeat(3, 30%); /* 2 ??????, ?? ????? ????? ???? ???? ????? ??�???? ??????? ?????? */
       grid-column-gap: 2%; /* ???? ??? ??????? ??????? ???�???? */
	grid-row-gap: 10%;
   margin-top: 4%;
	  
 	  	animation: zolaup 2s forwards;
	  
    }
	
@keyframes zolaup {
	0% {
		opacity: 0%;
		transform: translateY(130px);

	}

  100% {
		opacity: 100%;
		transform: translateY(0px);


	}
}
    /* ????? ??????? ?????? */
    .gallery-item {
  filter: brightness(97%);
      margin: 0px;
  width: 100%;
 height: 110px;

  object-fit: cover;


    }
.gallery-item:hover {
  filter: brightness(120%);
}
.gallery-item:active {
  filter: brightness(100%);
}

.gallery-item img {
  padding: 0;
  margin:  0;
  border: 0;


}

.headpage {
	  display: flex;
align-items: center;
  justify-content: center;

    position: absolute;
    left: 0%;
    right: 0%;
  font-family: Myriad Hebrew;
font-size: 14px;
  font-weight: bold; 
  color: #16679a;
  border-bottom:  4px solid #16679a;
      width: 100%;
	  height: 33%;
	        background-color: #d3e1e6;
			
}

.indexmenu {
    
    padding-top: 50%;
}
.namefood1 {

  position: relative;

cursor: pointer;
  width: 120px;

}
.namefood2 {

  position: absolute;
top: 10%;
  background-color: rgba(222,236,241,0.6);
  color: #dbbc2c;

   text-shadow: 2px 2px 4px #000000;
  padding: 0;
        width: 100%;
	  height: 22%;
	    font-family: Myriad Hebrew;
  font-size: 24px;
  font-weight: bold; 
  border-top: 5px solid #FFFFFF;
  border-bottom: 5px solid #FFFFFF;
  
}
.pricefood {
  display: block;
  position: absolute;
 top: 99%;
  background-color: rgba(219,188,44,0.7);
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;

  padding: 0px;
        width: 100%;
	  height: 20%;
	    font-family: Myriad Hebrew;
  font-size: 20px;
  font-weight: bold; 
		animation: zoomtext 4 forwards infinite;
  
}
 .pratim:hover {
	 position: absolute;
  top: 93%;
  left: 140px;
  transform: translate(-50%, -50%);
  background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 2px 2px 4px #000000;

        width: 280px;
	  height: 47px;
	    font-family: Myriad Hebrew;
  font-size: 45px;
  font-weight: bold; 
	 
 }
.pratim {
      display: block;
  position: absolute;
  top: 94%;
  left: 140px;
  transform: translate(-50%, -50%);
  background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;

  padding: 0px;
        width: 280px;
	  height: 40px;
	    font-family: Myriad Hebrew;
  font-size: 40px;
  font-weight: bold; 

  
}
 .root {

     
 
 }
 
 .buttonfoodsmeet {
      display: block;
  position: absolute;
  top: 93%;
  left: 81%;
  transform: translate(-50%, -50%);

   background-color: rgba(219,188,44,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 17%;
	    font-family: Myriad Hebrew;
  font-size: 26px;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}

 .buttonfoodsmilk {
      display: block;
  position: absolute;
  top: 93%;
  left: 19%;
  transform: translate(-50%, -50%);
  background-color: rgba(22,103,154,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 17%;
	    font-family: Myriad Hebrew;
  font-size: 26px;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}

 .buttonfoodsparve {
      display: block;
  position: absolute;
  top: 93%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(22,103,154,1);
  color: #FFFFFF;
  text-shadow: 1px 1px 4px #000000;
border-radius: 15px 15px 0 0;

  padding: 0px;
        width: 29%;
	  height: 17%;
	    font-family: Myriad Hebrew;
  font-size: 26px;
  font-weight: bold; 
      text-decoration: none;
      cursor: pointer;
  
}
.buttonfoodsparve:hover {
  filter: brightness(110%);
}
.buttonfoodsmilk:hover {
  filter: brightness(110%);
}
.buttonfoodsmeet:hover {
  filter: brightness(110%);
}
.textinfood{
	 display: none;
	
}
 .nameinfood{
	 display: none;
	
}
  
  
  
 /* עיצוב למודאל */
    .modal {
      display: none;
      position: fixed;

      padding-top: 100px;
      left: 0;
      top: 0;
	  
      width: 100%;
      height: 100%;
     
      overflow: auto;
      background-color: rgba(0,0,0,0.9);
	    z-index: 999;
    }



	.close {
      position: absolute;
      display: flex;
	justify-content: center;
	align-items: center;
      top: -1%;
      right: -1%;
      color: #f1f1f1;
      font-size: 70px;
      font-weight: bold;
      transition: 0.3s;
      z-index: 999;
      background-color: black;
      border-radius: 50%;
      padding: 0%;
      padding-left: 5%;
      padding-right: 5%;
    }
    /* עיצוב לכפתור סגירת המודאל */

	
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }
    
.backmodelinfoUP
{
      position: absolute;
      top: 1%;
      
}
.backmodelinfo
{
position: relative;
 margin: auto; 
 width:91%;
 height:100%;
  
align-items: center;
 
      background-color: #d1ba3c;
		border-radius: 30px;
			  	    font-family: newfont;
		 font-weight :bold;
		 padding-bottom: 10%; 
		  margin-bottom: 40%; 
}

    /* עיצוב לתמונה הגדולה במודאל */
    .modal-content {
 position: relative;
 padding-top: 4%;
      margin: auto;
      display: block;
	 border-radius: 30px;
	  
      width: 90%;
 	height: 30%;
	  

    }

	.modelfoodname {

            display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 90%;
      height: 10%;
       margin: auto;
	  border-radius: 20px;
  	margin-top: 4%;
	 font-size:40px;
	   color: black;
      background-color:#FFFF;
text-shadow: 2px 2px 4px  #dacb28;
}

.modelfoodtext {

      display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 90%;
      height: 60%;
       margin: auto;
      min-height: 370px;
  	margin-top: 4%;
	border-radius: 30px;
      background-color: #e3dcb9;
	  font-size:16px;
	   color: #000;
			  	    font-family: newfont;
		 font-weight :bold;
		text-shadow: 4px 4px 6px  #dacb28;
		
		
}
.modelfoodprice {

      display: flex;
	  align-items: center;
  justify-content: center;
      position: relative;
      width: 90%;
      height: 25%;
	  border-radius: 20px;

 	 margin: auto;
 	  	margin-top: 4%;
      background-color: #fffc08;
	   color: #000;
			font-size:40px;
text-shadow: 4px 4px 4px  #FFF;
}



}