.mosaicflow * { box-sizing:border-box; }
.mosaicflow{ width:100%; margin:auto; padding:0; }
.mosaicflow div {	float:right; 	margin:1%;	position:relative;	width:14.5%;	height:auto;	}
.mosaicflow div.gali a, .mosaicflow div.gali p  { line-height:25px; color:#ffffff; text-decoration: underline; text-align:center; width:100%; display:table;   }
.mosaicflow div.gali a:hover  { color:#cccccc;}
.mosaicflow div.gali {	float:right; 	margin:2%;	position:relative;	width:21%;	height:100%;	border-right:3px solid #cccccc;	border-bottom:3px solid #cccccc;	}
.mosaicflow img {		display:block;		width:100%;		max-width:500px;		}	
.mosaicflow h4 {				position:absolute;		bottom:0;		right:0;		width:100%;		margin:0;		padding:10px 10px;		background:hsla(0,0%,0%,.8);		color:#fff;		font-size:0.7em;		text-shadow:1px 1px 1px hsla(0,0%,0%,.75);		height:100%;		opacity:0;		-webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);		   -moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);		     -o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);		        transition: all 0.4s cubic-bezier(0.23,1,0.32,1);		}	
.mosaicflow h4:hover {		opacity:1;		}		
@media screen and (max-width: 670px) { 		.mosaicflow div {	float:right; 	margin:1%;	position:relative;	width:48%;	height:auto;	}
.mosaicflow h4 {				height:40%;		opacity:1;		}				.mosaicflow div.gali {	float:right; 	margin:2%;	position:relative;	width:46%;	height:100%;	border-right:3px solid #cccccc;	border-bottom:3px solid #cccccc;
}}