@charset "utf-8";

.cer-wrap{width:95%; max-width:275px; margin:20px auto; text-align:center;}
.cer-img{display:block; width:100%; max-width:275px; border:1px solid #ccc; box-sizing:border-box; background:#333; position:relative;}
.cer-img img{position:relative; display:block; min-height:100%; max-width:100%; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; box-sizing:border-box; width:100%;}
.cer-img:hover img{opacity:0.2;}
.cer-hover{position:absolute; top:0; left:0; width:100%; height:100%; z-index:100; opacity:0;}
.cer-hover ul{text-align:center; padding:60% 0; box-sizing:border-box;}
.cer-hover ul li{display:inline-table; margin:5px;}
.cer-hover ul li a{border:1px solid #fff; border-radius:25px; width:50px; height:50px; display:block; color:#fff; line-height:48px; font-size:20px; opacity:0.8; transition:0.35s;}
.cer-hover ul li a:hover{background:#fff; color:#333; opacity:1;}
.cer-img:hover .cer-hover{opacity:1;}

.cer-wrap .cer-title{background:#fff; padding:12px; border-image:linear-gradient(to right, #aaa 0%,#666 100%); border-image-slice:1; background:#fff; box-sizing:border-box; border-bottom:1px solid transparent;}
.cer-wrap .cer-title h4{font-size:16px; font-weight:500; color:#555; text-align:center; margin:0; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}

@media all and (max-width:525px){
	.cer-wrap .cer-title{border-bottom:1px solid #555; border-image:none;}
}