@charset "utf-8";
/* Photo Gallery CSS Document */
.gallery-wrap { position:relative; text-align:center;}
.grid-item { position:relative; float:left;}
.grid-sizer, .grid-item { width:33.333%;}
.grid-item img { max-width:100%; width:100%; height:auto; position:relative; display:block; transition:all 0.4s ease-in-out; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.gallery { text-align:center; position:relative; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; margin:10px; overflow: hidden; }
.gallery-image { position:relative; overflow:hidden; display:block; }
.gallery-image:before { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:0; left:0; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
.gallery-image:after { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:50%; left:0; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

.gal-img-hover { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; opacity:0; -webkit-transition: all 300ms linear 0s; transition: all 300ms linear 0s;}

.gal-img-hover:before { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:0; left:50%; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}
.gal-img-hover:after { content:''; width:50%; height:50%; background-color:rgba(0, 0, 0, 0.8); position:absolute; top:50%; left:50%; opacity:0; -webkit-transition:all 0.5s ease 0s; transition:all 0.5s ease 0s;}

.gal-icon { line-height:50px; text-align:center; width:50px; height:50px; -webkit-border-radius:50%; border-radius:50%; display:block; position:absolute; left:0; right:0; margin:0px auto; padding:0; z-index:100; -webkit-transition:all 300ms linear 0s; transition:all 300ms linear 0s; font-size:45px;}
.gal-icon a { color:#ffffff;}

.gallery-wrap .gal-rotator .gallery-image{ margin:0; }

.gallery:hover .gallery-image:before { left:50%; opacity:1; z-index:1;}
.gallery:hover .gallery-image:after { top:0; opacity:1;}
.gallery:hover .gal-img-hover { opacity:1;}
.gallery:hover .gal-img-hover:before { top:50%; opacity:1;}
.gallery:hover .gal-img-hover:after { left:0; opacity:1;}
.gallery-image:hover img { -webkit-transform:scale3d(1.2,1.2,1.2); -ms-transform:scale3d(1.2,1.2,1.2); transform:scale3d(1.2,1.2,1.2);  opacity:0.8; }