/* photos */
.photolist { margin-left:0 !important; }
.photolist li { background-repeat: no-repeat; background-size:cover; border:1px solid #000; display:block; float:left; list-style:none; position: relative; width: calc(50% - 22px); padding-top: 36%; /* Aspect Ratio */ margin: 10px; }
.photolist li .inside{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.photolist li .inside .title-bg{display:block; background-color:rgba(255, 128, 0, 0.8); transition: 0.5s;}
.photolist .title{ display:block; padding: 5px; font-size: 14px; line-height:20px; height:40px; font-weight:bold; text-align:center; transition: 0.5s; text-decoration:none!important; color:#fff!important;}
.photolist li .inside a{ display:block; width:100%; height: 100%;}

/* place at the hover effect media queries */
@media only screen and (min-width: 1099px) {
	.photolist li .inside:hover .title{height:60px; font-size: 16px; line-height:24px; }
	.photolist li .inside:hover .title-bg{background-color:rgba(255, 128, 0, 0.2); }
}

@media only screen and (max-width: 400px) {
	.photolist li { width: calc(100% - 2px); padding-top: 75%; /* Aspect Ratio */ margin: 10px 0; }
}