﻿.m-p-g
	{margin:0 auto}   /* (max-width:860px;) */


.m-p-g__thumbs-img
	{margin:3px;float:center;vertical-align:top;cursor:pointer;z-index:1;
	position:relative;opacity:0;-webkit-filter:brightness(100%);filter:brightness(100%);
	-webkit-tap-highlight-color:transparent;will-change:opacity,transform;
	-webkit-transition:all .5s cubic-bezier(.23,1,.32,1);transition:all .5s cubic-bezier(.23,1,.32,1)}

.m-p-g__thumbs-img.active
	{z-index:1}

.m-p-g__thumbs-img.layout-completed
	{opacity:1}

.m-p-g__thumbs-img.hide
	{opacity:0}

.m-p-g__thumbs-img:hover
	{-webkit-filter:brightness(130%);filter:brightness(130%)}

.m-p-g__fullscreen
	{position:fixed;z-index:1;top:70px;left:0;right:0;bottom:0;width:100%;height:100vh;
	background:0 0;visibility:hidden;-webkit-transition:background .25s ease-out,visibility 10ms .5s linear;
	transition:background .25s ease-out,visibility 10ms .5s linear;will-change:background,visibility;-webkit-backface-visibility:hidden;
	backface-visibility:hidden}
	
.m-p-g__fullscreen.active
	{-webkit-transition:background .25s ease-out,visibility .01s 0s linear;
	transition:background .25s ease-out,visibility .01s 0s linear;visibility:visible;background:rgba(0,0,0,.95)}

.m-p-g__fullscreen-img
	{pointer-events:none;position:absolute;-webkit-transform-origin:left top;-ms-transform-origin:left top;
	transform-origin:left top;top:50%;left:50%;max-height:100vh;max-width:100%;visibility:hidden;will-change:visibility;
	-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out}

.m-p-g__fullscreen-img.active
	{visibility:visible;opacity:1!important;-webkit-transition:-webkit-transform .5s cubic-bezier(.23,1,.32,1),opacity .5s ease-out;
	transition:transform .5s cubic-bezier(.23,1,.32,1),opacity .5s ease-out}

.m-p-g__fullscreen-img.almost-active
	{opacity:0;-webkit-transform:translate3d(0,0,0)!important;transform:translate3d(0,0,0)!important}

.m-p-g__controls
	{position:fixed;top:70px;left:0;width:100%;z-index:2;height:20vh;
	background:-webkit-linear-gradient(bottom,transparent 0,rgba(0,0,0,.55) 100%);
	background:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 100%);opacity:0;visibility:hidden;
	-webkit-transition:all .5s cubic-bezier(.23,1,.32,1);transition:all .5s cubic-bezier(.23,1,.32,1)}

.m-p-g__controls-arrow,.m-p-g__controls-close
	{position:absolute;cursor:pointer;-webkit-tap-highlight-color:transparent}

.m-p-g__controls.active
	{opacity:1;visibility:visible}

.m-p-g__controls-arrow,.m-p-g__controls-close
	{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:0 0}

.m-p-g__controls-arrow:focus,.m-p-g__controls-close:focus
	{outline:0}

.m-p-g__controls-arrow
	{z-index:1;top:0;width:20%;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;
	display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;opacity:0}

.m-p-g__controls-arrow:hover
	{opacity:1}

.m-p-g__controls-arrow--prev
	{left:0;padding-left:3vw;-webkit-box-pack:start;-webkit-justify-content:flex-start;
	-ms-flex-pack:start;justify-content:flex-start}

.m-p-g__controls-arrow--next
	{right:0;padding-right:3vw;-webkit-box-pack:end;-webkit-justify-content:flex-end;
	-ms-flex-pack:end;justify-content:flex-end}

.m-p-g__controls-close
	{top:3vh;right:3vw;z-index:5}

.m-p-g__btn
	{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;
	-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;
	-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:50px;height:50px;border-radius:50%;
	background:rgba(255,255,255,.07);-webkit-transition:all .25s ease-out;transition:all .25s ease-out}

.m-p-g__btn:hover
	{background:rgba(255,255,255,.15)}

.m-p-g__alertBox
	{position:fixed;z-index:999;max-width:700px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff;padding:25px;border-radius:3px;
	text-align:center;box-shadow:0 6px 12px rgba(0,0,0,.23),0 10px 40px rgba(0,0,0,.19);color:grey}

.m-p-g__alertBox h2
	{color:red}

/*# sourceMappingURL=material-photo-gallery.css.map */
