ul#_10d_photopanel_ul {
	list-style:none;
	margin:0;
	padding:0;
}
ul#_10d_photopanel_ul li{	
	float:left;
    position: relative;
    padding: 0;
    margin: 5px;
}

.ul#_10d_photopanel_ul li a {
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}


ul#_10d_photopanel_ul li:after {
	content: "";
	display: block;
	padding-bottom: 120%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

._10d_photopanel_div {
	position: absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;	
	background-color:#ffffff;
	border:1px solid #dddddd;
}

._10d_photopanel_div_bg {
	background-color:#2b81d529;
	position: absolute;
	top: 5px;
	right: 5px;
	bottom: 36px;
	left: 5px;
	transition-property: left,right,top, bottom;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

._10d_photopanel_div_bg:hover {
	top: 3px;
	right: 3px;
	bottom: 40px;
	left: 3px;
}

._10d_photopanel_div_bg_image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
	max-width:100%;
	max-height:100%;
    object-fit: cover;
	object-position: center;
}


._10d_photopanel_div_title_bg {
	background:#fff;/*#2b81d560;*/
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	min-height:30px;
}

._10d_photopanel_div_title {
	padding:5px;
	font-size:12px;
	font-weight: bold;
	color: #0074dc;/*#fff;*/
}


@media screen and (min-width: 830px){
	ul#_10d_photopanel_ul li{	
		width:13%;
	}
}

@media screen and (max-width: 830px){
	ul#_10d_photopanel_ul li{	
		width:20%;
	}

}