html, body, .container {
font-family: Calibri, Arial, sans-serif;
position: relative;
width: 100%;
height: 100%;
color: #47a3da;
}
.grid-gallery {
position: absolute;
top: 200px;
width: 100%;
}
.grid-gallery ul {
list-style: none;
margin: 0;
padding: 0;
}
.grid-gallery figure {
margin: 0px 20px;
;box-shadow: -10px 10px 20px rgba(0,0,0,0.6);
}
.grid-gallery figure img {
display: block;
width: 100%;
}
.grid-gallery figcaption h3 {
margin: 0;
padding: 0 0 0.5em;
text-shadow: -10px 10px 30px rgba(0,0,0,0.6);
font-size: 1em;
}
.grid-gallery figcaption p {
margin: 0;
font-size: 0.8em;
}
/* Grid style */
.grid-wrap {
max-width: 99%;
margin: 0 auto;
padding: 0 1em 1.875em;
}
.grid {
margin: 0 auto;
:hover;
}
.grid:hover {
margin: 0 auto;
}
.grid img {
box-shadow: -5px 5px 10px rgba(0,0,0,0.3);
float: left;
height: 150px;
margin: 0 50px 75px 50px;
display: block;
border: 5px white solid;
opacity: 1:;
}
.grid img[tabindex="0"] {
cursor: zoom-in;
}
.grid img[tabindex="0"]:focus {
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: auto;
opacity: 1;
border: 00px white solid;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}
img[tabindex="0"]:focus,  /* убрать строку, если не нужно, чтобы при клике на увеличенное фото, оно возвращалось в исходное состояние */
img[tabindex="0"]:focus ~ * {
  pointer-events: none;
  cursor: zoom-out;
  
}
.grid figcaption {
background: #e4e4e4;
padding: 15px;
}