.flex-images { overflow: hidden; position: relative; }
.flex-images .item { float: left; margin: 20px; background: #eee; box-sizing: content-box; overflow: hidden; position: relative;  }
.flex-images .item img { display: block; width: auto; height: 100%; max-width: none; }
.flex-images .item .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 6px; font-size: 0.6em; color: #fff;  background: rgba(0,0,0,.7); }


/* fix to get the caption on the image on landscape mobile screens */
@media (max-width:991px) and (orientation:landscape) {
	#lightcase-info {
		position: absolute;
		background: none;
		width: 100%;
		bottom: 0;
		padding: 0px !important;
		z-index: 1;
	}

	#lightcase-info #lightcase-caption {
		color: #fff !important;
		font-size: 20px !important;
		background: #0009;
		padding: 0 10px !important;
	}
}