/* GALLERY */

.fadeout .grid{opacity:0;transition:opacity .1s;}

.gallery h1 b{position:relative;display:inline-block;top:-6px;/*margin: 0 20px;*/font-family:arial;height:60px;width:60px;line-height:51px;border-radius:50%;cursor:pointer;text-align:center;background:rgba(0,0,0,.03);}
.gallery h1 b:first-child{left:-20px;}
.gallery h1 b:last-child{right:-20px;}
.gallery h1 b:hover{background:rgba(0,0,0,.06);}

.controls{position:relative;top:-108px;}
.controls b{position:absolute;display:block;top:calc(50% - 50px);height:60px;width:60px;line-height:50px;border-radius:50%;cursor:pointer;text-align:center;background:#fff;opacity:.4}
.controls b:first-of-type{left:-40px;}
.controls b:last-of-type{right:-40px;}
.controls b:first-of-type:before{content:"‹";font-family:arial;font-size:82px;font-weight:normal;color:#000;position: relative;left:-2px;display:block;}
.controls b:last-of-type:before{content:"›";font-family:arial;font-size:82px;font-weight:normal;color:#000;position: relative;left:2px;display:block;}
.controls b:hover{opacity:.7;}
.controls b.disabled{opacity:0;pointer-events:none;}

.grid{position:relative;padding:20px;text-align:center;overflow:hidden;   }
.grid.back .img_wrap{animation: galleryback .5s;}
.grid:empty{height:337px;opacity:0;}

.img_wrap{position:relative;display:inline-block;width:calc(33% - 15px); margin:0 20px 20px 0;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  animation: gallery .5s;  }
.img_wrap:nth-child(3){margin:0 0 20px 0}
.img_wrap:nth-child(4){display:none;}
.img_wrap img{width:100%;object-fit:cover;height:200px;opacity:1;cursor:pointer;animation: fadein 1.6s;}
.img_wrap p{text-align: center;padding: 10px 20px;background:#fff;}

#view{display:none;position:fixed;left:50%;top:20px;max-width:1100px;width:calc(100vw - 40px);height:100vh; z-index:1000; animation: view 0.6s; transform:translateX(-50%);cursor:pointer;}
#view:before{content:' ';position:absolute;left:-2000px;top:-2000px;height:4000px;width:4000px;background:rgba(0,0,0,.9);z-index:-1;}
#view:after{content:'CLICK IMAGE TO CLOSE';position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:calc(8px + .4vw);background:rgba(0,0,0,.6);text-align:center;color:#fff;padding:5px 10px;border-radius:0 0 10px 10px;}
#view img{width:100%;object-fit:contain;position:absolute;top:0;cursor:pointer;max-height:calc(100vh - 40px);}
#view.ready{display:flex;justify-content: center;opacity:1;transition:opacity 1s;}

@keyframes view{from{top:-50px;opacity:0}to{top:20px;opacity:1}}
@keyframes gallery{from{left:50%;opacity:0}to{left:0;opacity:1}}
@keyframes galleryback{from{right:50%;opacity:0}to{right:0;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

@media screen and (max-width:1200px){
   .gallery h1{text-align:center;}
   .controls b:first-of-type{left:30px;}
   .controls b:last-of-type{right:30px;}
}

@media screen and (max-width:800px){
    .img_wrap{width:calc(50% - 15px);}
    .img_wrap:nth-child(2){margin:0 0 20px 0;}
    .img_wrap:nth-child(3){display:none;}
}


@media screen and (max-width:500px){
    .img_wrap{width:100%;margin:0 0 20px 0;}
    .img_wrap:nth-child(2){display:none;}
}