.photo-viewer {
	margin: 10px 0 10px 0;
    padding: 0;
	width: 100%;
    max-width: 690px;
    min-width: 370px;
    list-style: none;
	vertical-align: top;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	border: 1px solid rgba(0,0,0,.05);
	border-radius: 3px;
	position: relative;
	text-align:center;
}
	.photo-viewer:hover {
		border: 1px solid rgba(0,0,0,.1);
	}
.photo-viewer li {
	background-size: contain !important;
	background-repeat: no-repeat;
	background-position: center top;
	cursor: pointer;
	overflow: hidden;
	vertical-align: top;
	/*border: 2px solid whiteSmoke;*/
	border-radius: 3px;
	position: relative;
}
	.photo-viewer li:before {
		/*content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: transparent;
		background-repeat: repeat-x;
		background-image: linear-gradient(transparent,rgba(0,0,0,0.05));
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,transparent),color-stop(100%,rgba(0,0,0,0.05)));
		background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,0.05));*/
	}
	.photo-viewer li:hover:before {
		/*background-color: transparent;
		background-image: none;*/
	}

.photo-viewer li img {
	border-radius: 3px;
	perspective: 1000px;
}

.photo-viewer.grid-1 li {
	height: auto;
	text-align: center;
}
	.photo-viewer.grid-1 li.h, .photo-viewer.grid-1 li.v {
		min-height: 280px;
		text-align: center;
		width: 100%;
		min-width: 328px;
		max-width: 686px;
		max-height: 400px;
	}
	.photo-viewer.grid-1 li.h img {
		/*width: 528px;*/
		min-width: 686px;
		min-height: 275px;
		max-width: 686px;

		left: 50%;
		top: 0;
		transform: translate3d(-50%,0,1px);
		position: relative;
	}

	.photo-viewer.grid-1 li.v  {
		min-height: 515px;
	}
	.photo-viewer.grid-1 li.v.h  {
		    min-height: 320px;
	}
	.photo-viewer.grid-1 li.v img {
		min-height: 198px;
		min-width: 696px;
		max-width: 750px;
		left: 50%;
		top: 50%;
		transform: translate3d(-50%,-65%,1px);
		position: absolute;
	}

.photo-viewer.grid-2 li {
	height: 250px;
	width: 100%;
	min-width: 173px;
	max-width:305px;
	display: inline-block !important;
	text-align: center;
}
	.photo-viewer.grid-2 li.h img {
		height: 250px;
	}
	.photo-viewer.grid-2 li.v img {
		max-width: 263px;
		min-width: 173px;
	}

.photo-viewer.grid-3 li {
	text-align: center;
    width: 100%;
}
	.photo-viewer.grid-3 li:first-child {
		height: auto;
		min-height: 250px;
		min-width: 100%;
		max-width: 696px;
		display: block !important;
	}
	.photo-viewer.grid-3 li.v:first-child img {
		min-width: 358px;
		max-width: 696px;
		height: auto;
	}
	.photo-viewer.grid-3 li.h:first-child img {
		min-width: 358px;
		max-width: 696px;
		height: auto;
	}

	.photo-viewer.grid-3 li:nth-child(3), .photo-viewer.grid-3 li:nth-child(2) {
		height: 200px;
		min-width: 179px;
		max-width: 333px;
		display: inline-block !important;
	}
	.photo-viewer.grid-3 li.h img {
		height: 200px;
	}
	.photo-viewer.grid-3 li.v img {
		min-width: 179px;
		max-width: 263px;
	}
/*[role="media-viewer"] {
  -webkit-animation-name: unBlur;
  animation-name: unBlur;
  animation-duration: 0.5s;
}*/
.photo-viewer.grid-4 li {
	min-height: 200px;
	max-width: 49%;
	min-width: 173px;
	display: inline-block;
	text-align: center;
	width: 100%;
}
	.photo-viewer.grid-4 li img {
		max-width: 263px;
		min-width: 173px;
	}
	.photo-viewer.grid-4 li.v img {
		max-width: 263px;
		min-width: 173px;
		height: auto;
	}
	.photo-viewer.grid-4 li.h img {
		height: 200px;
		width: auto;
		min-width: 100%;
		object-fit: cover;
	}

.photo-viewer.grid-5 li {
	text-align: center;
	width: 100%;
}
	.photo-viewer.grid-5 li:first-child, .photo-viewer.grid-5 li:nth-child(2) {
		height: 200px;
		max-width: 263px;
		min-width: 179px;
		display: inline-block !important;
	}
	.photo-viewer.grid-5 li:first-child img, .photo-viewer.grid-5 li:nth-child(2) img {
		height: auto;
		max-width: 263px;
		min-width: 179px;
	}
	.photo-viewer.grid-5 li.v:first-child img, .photo-viewer.grid-5 li.v:nth-child(2) img {
		height: auto;
		max-width: 263px;
		min-width: 173px;
	}
	.photo-viewer.grid-5 li.h:first-child img, .photo-viewer.grid-5 li.h:nth-child(2) img {
		height: 200px;
		width: auto;
	}
	.photo-viewer.grid-5 li:nth-child(3) img, .photo-viewer.grid-5 li:nth-child(4) img, .photo-viewer.grid-5 li:nth-child(5) img  {
		max-width: 263px;
		min-width: 173px;
		height: auto;
	}
	.photo-viewer.grid-5 li.v:nth-child(3) img, .photo-viewer.grid-5 li.v:nth-child(4) img, .photo-viewer.grid-5 li.v:nth-child(5) img  {
		max-width: 263px;
		min-width: 173px;
		height: auto;
	}
	.photo-viewer.grid-5 li.h:nth-child(3) img, .photo-viewer.grid-5 li.h:nth-child(4) img, .photo-viewer.grid-5 li.h:nth-child(5) img  {
		height: 200px;
		width: auto;
	}
	.photo-viewer.grid-5 li:nth-child(3), .photo-viewer.grid-5 li:nth-child(4), .photo-viewer.grid-5 li:nth-child(5)  {
		height: 150px;
		max-width: 173px;
		min-width: 119px;
		display: inline-block !important;
	}

.photo-viewer.grid-6 li {
	text-align: center;
	height: 150px;
	max-width: 173px;
	min-width: 173px;
	display: inline-block !important;
}
.photo-viewer.grid-6 li.v img, .photo-viewer.grid-6 li img {
	height: auto;
	max-width: 173px;
	min-width: 173px;
}
.photo-viewer.grid-6 li.h img {
	height: 150px;
	width: auto;
}
	.photo-viewer.grid-6 li:first-child, .photo-viewer.grid-6 li:nth-child(2) {
		margin: 0 0 2px 0;
	}
	.photo-viewer.grid-6 li:nth-child(3) {
		margin: 0 0 2px 0;
	}
	.photo-viewer.grid-6 li:nth-child(4), .photo-viewer.grid-6 li:nth-child(5) {
		margin: 0 0 0 0;
	}

	.photo-viewer.grid-2 li img, 
	.photo-viewer.grid-3 li img, 
	.photo-viewer.grid-4 li img,
	.photo-viewer.grid-5 li img,
	.photo-viewer.grid-6 li img {
	    position: absolute;
	    top: 50%;
	    left:50%;
	    -webkit-transform:translate(-50%,-50%);
	    transform:translate(-50%,-50%);
	}
	.photo-viewer li:before {
		content: '';
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		border: 2px solid white;
		box-sizing: border-box;
	}
	.photo-viewer li:after {
		content: '';
		width: 100%;
		height: 100%;
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 6px;
		border: 2px solid white;
		box-sizing: border-box;
	}

.ui-dialog.media-box, .ui-dialog.mementos-box {
    z-index: 1000000 !important;
    background-color: transparent !important;
	box-shadow: none;
	width: 100vw !important;
    height: 100vh !important;
}
.ui-dialog.media-box ~ .ui-widget-overlay, .ui-dialog.mementos-box ~ .ui-widget-overlay  {
    z-index: 1000000;
}
.ui-dialog.media-box img, .ui-dialog.media-box iframe {
    max-width: 100vw;
	max-height: 100vh;
	min-width: 360px;
    position: fixed;
    display: block;
    left: 50%;
    top: 50%;
	background-color: black;
	-webkit-transform: translate3d(-50%, -50%,1px);
	transform: translate3d(-50%, -50%,1px);
	/*pointer-events: none;*/
}
.ui-dialog.media-box img {
	pointer-events: none;
}
.ui-dialog.media-box .ui-dialog-titlebar, .ui-dialog.pm-box .ui-dialog-titlebar, .ui-dialog.mementos-box .ui-dialog-titlebar  {
	background-color: transparent !important;
	border-bottom: 0;
	position: absolute;
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	pointer-events: fill;
}
.ui-dialog.media-box .ui-dialog-title:empty {
	display: none;
}
 .ui-dialog.media-box .ui-dialog-title, .ui-dialog.mementos-box .ui-dialog-title {
    width: 100%;
    min-width: 360px;
	max-width: 720px;
    position: fixed;
    height: 50px;
    bottom: 0;
    left: 0;
    padding: 10px 30px 10px 90px;
    background-color: rgba(0,0,0,.5);
    font-weight: 300;
    font-size: 1em;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
    color: whiteSmoke;
    text-shadow: 1px 1px 1px black;
    left: 50%;
	-webkit-transform: translate3d(-50%, 0,1px);
	transform: translate3d(-50%, 0,1px);	
	overflow: visible;
	white-space: normal;
}
.ui-dialog.media-box .ui-dialog-title:hover, .ui-dialog.media-box .ui-dialog-title.active  {
	height: 100px;
	line-height: 20px;
	pointer-events: fill;
}
.ui-dialog.mementos-box .ui-dialog-title {
	height: 100px;
	line-height: 20px;
    padding: 8px 20px 65px 85px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-dialog.mementos-box .ui-dialog-title:hover, .ui-dialog.mementos-box .ui-dialog-title.active {
	pointer-events: fill;
}
.ui-dialog.media-box .ui-dialog-titlebar-close,
.dashboard .ui-dialog-titlebar-close,
.play-menu .ui-dialog-titlebar-close,
.ui-dialog.mementos-box .ui-dialog-titlebar-close,
#editor-close.ui-dialog-titlebar-close {
	position: fixed;
    right: 15px;
    top: 15px;
	width: 16px;
	height: 16px;
	    background-position: -59px -125px !important;
	z-index: 10000;
	transform: translate3d(0px,0px,1px);
	opacity: .5;
    -webkit-filter: brightness(2) drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
    filter: brightness(2) drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
    filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=1,OffY=1,Color='#252525');
	pointer-events: fill;
}
.ui-dialog.media-box .ui-dialog-titlebar-close:hover,
.dashboard .ui-dialog-titlebar-close:hover,
.play-menu .ui-dialog-titlebar-close:hover,
.ui-dialog.mementos-box .ui-dialog-titlebar-close:hover,
#editor-close.ui-dialog-titlebar-close:hover
{
	opacity: 1;
}
.dashboard .ui-dialog-titlebar-close, .play-menu .ui-dialog-titlebar-close  {
    top: -1px;
	right: -5px;
}
#editor-close.ui-dialog-titlebar-close  {
    position: absolute;
    top: -5px;
    right: -2.5px;
	transition: transform .1s;
}
#editor-close.ui-dialog-titlebar-close:hover  {
    transform: scale(1.1);
}
#editor-close.ui-dialog-titlebar-close .ui-icon-closethick {
	border: 2px solid #212121;
    border-radius: 100%;
	height: 35px;
    width: 35px;
    right: -10px;
    top: -10px;
}
.comment-body .photo-viewer li.v .screenshot-wrapper {
	vertical-align: bottom;
}
.photo-viewer:empty {
	display: none;
}
/* mobile */ 
@media screen and ( max-width: 618px ) {
	.comment-body .photo-viewer {
		margin: 10px auto 0 -15px;
		width: 100vw;
	}

}
@media screen and ( max-width: 540px ) {
	.comment-body .photo-viewer {
		white-space: nowrap;
	}
	.comment-body .photo-viewer.grid-4, .comment-body .photo-viewer.grid-5, .comment-body .photo-viewer.grid-6 {
		white-space: normal;
	}
	.comment-body .photo-viewer.grid-6 {
		text-align: center;
	}
	.comment-body .photo-viewer li.grid-2 {
		width: 50%;
	}
	.comment-body .photo-viewer.grid-5 li {
		width: 33%;
	}
	.ui-dialog.media-box .ui-dialog-title,
	.ui-dialog.mementos-box .ui-dialog-title {
		border-radius: 0;
	}
	.comment-body .photo-viewer {
		margin: 10px auto 0 -20px;
		width: calc(100vw + 10px);
	}

}

@media screen and ( max-width: 360px ) {
	.photo-viewer.grid-1 li img {
		-webkit-transform: translate3d(calc(50% - 356px), 0,1px);
		transform: translate3d(calc(50% - 356px), 0,1px);
	}
}

@media screen and ( max-height: 520px ) {
	.ui-dialog.media-box img, .ui-dialog.media-box iframe {
		margin-top: 50px;
	}

}
