.m-p-g{max-width:100%;margin:0 auto}
.m-p-g__thumbs-img{margin:0;float:left;vertical-align:bottom;cursor:pointer;z-index:1;position:relative;opacity:0;filter:brightness(100%);-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:opacity,transform;transition:all .5s cubic-bezier(0.23,1,0.32,1)}
.m-p-g__thumbs-img.active{z-index:50}
.m-p-g__thumbs-img.layout-completed{opacity:1}
.m-p-g__thumbs-img.hide{opacity:0}
.m-p-g__thumbs-img:hover{filter:brightness(110%)}
.m-p-g__fullscreen{position:fixed;z-index:10;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background:rgba(0,0,0,0);visibility:hidden;transition:background .25s ease-out,visibility .01s .5s linear;will-change:background,visibility;backface-visibility:hidden}
.m-p-g__fullscreen.active{transition:background .25s ease-out,visibility .01s 0 linear;visibility:visible;background:rgba(0,0,0,0.95)}
.m-p-g__fullscreen-img{pointer-events:none;position:absolute;transform-origin:left top;top:50%;left:50%;max-height:100vh;max-width:100%;visibility:hidden;will-change:visibility;transition:opacity .5s ease-out}
.m-p-g__fullscreen-img.active{visibility:visible;opacity:1!important;transition:transform .5s cubic-bezier(0.23,1,0.32,1),opacity .5s ease-out}
.m-p-g__fullscreen-img.almost-active{opacity:0;transform:translate3d(0,0,0)!important}
.m-p-g__controls{position:fixed;top:0;left:0;width:100%;z-index:200;height:20vh;background:linear-gradient(to top,transparent 0%,rgba(0,0,0,0.55) 100%);opacity:0;visibility:hidden;transition:all .5s cubic-bezier(0.23,1,0.32,1)}
.m-p-g__controls.active{opacity:1;visibility:visible}
.m-p-g__controls-close,.m-p-g__controls-arrow{appearance:none;border:none;background:none}
.m-p-g__controls-close:focus,.m-p-g__controls-arrow:focus{outline:none}
.m-p-g__controls-arrow{position:absolute;z-index:1;top:0;width:20%;height:100vh;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0}
.m-p-g__controls-arrow:hover{opacity:1}
.m-p-g__controls-arrow--prev{left:0;padding-left:3vw;justify-content:flex-start}
.m-p-g__controls-arrow--next{right:0;padding-right:3vw;justify-content:flex-end}
.m-p-g__controls-close{position:absolute;top:3vh;left:3vw;z-index:5;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.m-p-g__btn{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.07);transition:all .25s ease-out}
.m-p-g__btn:hover{background:rgba(255,255,255,0.15)}
.m-p-g__alertBox{position:fixed;z-index:999;max-width:700px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:25px;border-radius:3px;text-align:center;box-shadow:0 6px 12px rgba(0,0,0,0.23),0 10px 40px rgba(0,0,0,0.19);color:grey}
.m-p-g__alertBox h2{color:red}
body{background:#fefefe;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;font-family:'Roboto Mono'}
h2{font-weight:300;margin:4vh 0 1.5vw 4vw;color:grey;text-transform:uppercase}
.demo-btn{display:inline-block;margin:0 2.5px 4vh;text-decoration:none;color:grey;padding:15px;line-height:1;min-width:140px;background:rgba(0,0,0,0.07);border-radius:6px}
.demo-btn:hover{background:rgba(0,0,0,0.12)}
@media (max-width: 640px) {
.demo-btn{min-width:0;font-size:14px}
}