.effects .img{position:relative;float:left;margin-bottom:5px;width:100%;overflow:hidden;background-color:#000}.effects .img:nth-child(n){margin-right:5px}.effects .img:last-child{margin-right:0}.effects .img img{display:block;margin:0}.overlay{display:block;position:absolute;z-index:111!important;background:rgb(255 255 255 / .8);overflow:hidden;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}a.close-overlay{display:block;position:absolute;top:0;right:0;z-index:100;width:45px;height:45px;font-size:20px;font-weight:700;color:#fff;line-height:45px;text-align:center;background-color:#000;cursor:pointer}a.close-overlay.hidden{display:none}a.expand{display:block;position:absolute;z-index:100;padding:10px;width:40%;border:solid 2px #2c4347;text-align:center;color:#2c4347;font-weight:300;margin:30px 20px 10px 20px;font-size:14px;text-transform:uppercase}#effect-1 .overlay{bottom:0;left:0;right:0;width:100%;height:0}#effect-1 .overlay a.expand{left:0;right:0;bottom:50%;margin:0 auto -30px auto}#effect-1 .img.hover .overlay{height:100%}#effect-2 .overlay{top:0;left:0;right:0;width:100%;height:0}#effect-2 .overlay a.expand{left:0;right:0;top:50%;margin:-30px auto 0 auto}#effect-2 .img.hover .overlay{height:100%}#effect-3 .overlay{top:0;bottom:0;left:0;width:0;height:100%}#effect-3 .overlay a.expand{top:0;bottom:0;left:50%;margin:auto 0 auto -30px}#effect-3 .img.hover .overlay{width:100%}#effect-4 .overlay{top:0;bottom:0;right:0;width:0;height:100%}#effect-4 .overlay a.expand{top:0;bottom:0;right:50%;margin:auto -30px auto 0}#effect-4 .img{overflow:hidden}#effect-4 .img.hover .overlay{width:100%}#effect-5 .overlay{top:0;bottom:0;left:0;right:0;opacity:0}#effect-5 .overlay a.expand{top:0;bottom:0;left:0;right:0;margin:auto;width:100%;height:100%;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}#effect-5 .img.hover .overlay{opacity:1}#effect-5 .img.hover .overlay a.expand{width:60px;height:60px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border-radius:30px}#effect-6 .overlay{top:0;bottom:0;left:0;right:0;opacity:0}#effect-6 .overlay a.expand{left:0;right:0;top:0;margin:0 auto;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s}#effect-6 .img.hover .overlay{opacity:1}#effect-6 .img.hover .overlay a.expand{top:50%;margin-top:-30px;opacity:1}@media only screen and (max-width:1100px){.effects{}.effects .img{width:100%}.effects .img:first-child{margin-left:0}.effects .img:nth-child(2n){margin-right:0}.effects .img:last-child{margin-right:0}}@media only screen and (max-width:520px){.effects .img{width:100%}.effects .img:nth-child(n){margin-right:0}.effects .img:first-child{margin-left:0}.effects .img:nth-child(2n-1){margin-left:0}.effects .img:nth-child(2n){margin-right:0}.effects .img:last-child{margin-right:0}.effects .img img{margin:0 auto}}