/*.gallery {
    width:100%;
    text-align: center;
    /*vertical-align: top;*
}
.gallery img {
  width:auto;
  height:100px;
  cursor: zoom-in;
  /*display:block;
  vartical-align:middle;*
}*/
/*Расположение картинки по центру*/
.gallery {
  width: 150px; /* or whatever you want */
  /*height: 100px;/*150px; /* or whatever you want */
  /*line-height: 150px; /* or whatever you want, should match height */
  text-align: center;
}
.gallery > img {
   width:100px;
   cursor: zoom-in;
   vertical-align: middle;
}
/*////////////////////////*/
.gallery img:focus{
  outline: none;
  pointer-events: none;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: 100%;
  margin: 0 auto;
  box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(0,0,0,0.9);
}
.gallery img:focus ~ div{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  cursor: zoom-out;
  background-color: #000;
  
}
@media screen and (max-width: 480px) {
    .gallery img:focus{/*Увеличение картинки при нажатии*/
        height: auto;
        width:100%;
        margin: 0 auto;
    }
/*Увеличение картинки*/
/* <div class='click_zoom'>
    <label>
    <input type='checkbox'>
    <img src='../Image/Photo_article/".$val."'>
    </label>
 </div>  */  
/*.click_zoom {
  width:100px
}  
.click_zoom input[type='checkbox'] {
  display: none
}
.click_zoom img {
  width:100px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}
.click_zoom input[type='checkbox']:checked~img {
  margin-left:100px;
  height:100%;
  transform: scale(5);
  cursor: zoom-out
}*/