* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
.preview-mlightbox {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0, 0, 0, .88);
transition:.4s;
	visibility:hidden;
	opacity:0;
	z-index:1
}
.mlightbox-content {
	position:absolute;
	display:flex;
	align-content:center;
	align-items:center;
	justify-content:center;
	top:30%;
	right:0;
	bottom:0;
	left:50%;
	width:100%;
	max-width:800px;
	height:100%;
	box-shadow:0 3px 7px rgba(0, 0, 0, .7);
transition:opacity .2s ease;
	transform:translate(-50%, -50%);
	z-index:2
}
.mlightbox-open {
	opacity:1;
	visibility:visible
}
.mlightbox-close, .mlightbox-close:hover {
	position:absolute;
	width:30px;
	height:30px;
	line-height:15px;
	font-size:30px;
	top:0;
	right:10px;
	border:none;
	color:#fff;
	background:transparent;
	cursor:pointer
}
[mlightbox] img {
	width:33% !important;
transition:transform .3s ease
}
.mypad
{padding: 0 13px 0 20px;}


 @media(max-width:768px) {
	 [mlightbox] img {
	width:32% !important;
transition:transform .3s ease
}
.mypad
{padding: 0 5px 0 20px;}
 }


 @media(max-width:640px) {
 }


@media(max-width:480px) {

[mlightbox] img {
    transition: transform 0.3s ease 0s;
    width: 32.7% !important;
}
.mypad {
    padding: 0 0 0 20px;
}
 }
 @media(max-width:360px) {

[mlightbox] img {
    transition: transform 0.3s ease 0s;
    width: 32.5% !important;
}
 }
 @media(max-width:320px) {

[mlightbox] img {
    transition: transform 0.3s ease 0s;
    width: 32.4% !important;
}
 }