.modGallery {position:relative;z-index:0;}
.modGallery+.wrapText {margin:80px auto;}
.modGallery .nav a {background-color:rgba(241, 244, 245, 0.3);border-radius:4px;height:64px;width:64px;display:inline-block;transition:background-color .2s;position:absolute;z-index:4;top:0;bottom:0;margin:auto 0;}
.modGallery .nav a:hover {background-color:#f1f4f5;}
.modGallery .nav a.p {left:30px;}
.modGallery .nav a.n {right:30px;}
.modGallery .nav a::before {content:'';position:absolute;width:30px;height:30px;background:url('../images/arrow.png') no-repeat 0 100%;background-size:200% 200%;left:0;right:0;bottom:0;top:0;margin:auto;}
.modGallery .nav a.n::before {background-position:100% 100%;}
.modGallery ul {list-style:none;display:flex;overflow:hidden;}

.modGallery li {flex:0 1 33.33%;min-width:33.33%;}
.modGallery li img {max-width:100%;height:auto;vertical-align:top;}
.modGallery li a {display:block;position:relative;z-index:0;}
.modGallery li a::after {content:'';position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgba(0, 0, 0, 0.2);opacity:0;transition: opacity .3s;}
.modGallery ul:hover li a::after {opacity:1;}
.modGallery ul li a:hover::after {opacity:0}

@media screen and (max-width:980px){
  .modGallery li {flex:0 1 50%;min-width:50%}
}
@media screen and (max-width:550px){
  .modGallery li {flex:0 1 100%;min-width:100%}
}