

ul {
	margin: 20px auto;
	;padding: 15px 0;
}

li{
	width:180px;
	overflow:hidden; 
	position:relative; 
	height:180px; 
	display:inline-block; 
	margin: 0 10px; }

.mask {
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.link{ 
	display:block;
	text-decoration:none;
	cursor:pointer;
	transition: all .3s;
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}



.min{
	display:block;
	width: 178px;
	height: 178px;
}

.title{
	cursor:pointer;
	position:absolute;
	width:178px;
	padding:5px 0;
	color:#ffffff; 
	font-size:18px;
	text-align:center;
	left:0px;
	top:128px;
	background:rgba(17, 17, 17, 0.6);
}

.overlay{
	cursor:pointer;
	opacity:0;
	width:178px;
	height:178px;
	position:absolute;
	left:0;
	top:0;
	background: transparent;
	transition: all .3s;
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);	
}

.link:hover .overlay{
	opacity:1; 
	background:rgba(17, 17, 17, 0.5);
}
	
.icon{
	display:block;
	opacity:0; 
	position:absolute;
	width:32px;
	height:32px;
	left:74px; 
	top:74px;
	transition: all .3s;
	background-image:url(images/lupa32x32.png)
}

.link:hover .icon{
	opacity:1;
}
	
.remodal__h4 {
	font-size: 28px;
} 

