#div_mosaic
{
	padding: 0;
	width: 1000px;
	height: 450px;
	margin: auto;
	padding-bottom: 30px;
	text-align: center;
}

#div_pic0, #div_pic1, #div_pic2, #div_pic3
{
	margin: 0px;
	padding: 0px;
	float: left;
	text-align: center;
	background-size:  cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}

#div_pic0
{
	width: 60%;
	height: 100%;
}

#div_pic1
{
	width: 40%;
	height: 66.66%;
}

#div_pic2, #div_pic3
{
	width: 20%;
	height: 33.33%;
}

#div_box_data0, #div_box_data1, #div_box_data2, #div_box_data3
{
	color: white;
	width: 100%;
	height: 100%;
	background-color: rgba(85,85,85,0);
	
	font-size: 30px;
	
	-moz-transition: all .6s ease;
    -webkit-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}

#div_box_data2, #div_box_data3
{
	font-size: 25px;
}

.div_album_title
{
	padding-top: 30%;
	line-height: 100%;
}

.span_album_date
{
	color: black;
	font-size: 70%;
}

#div_box_data0:hover, #div_box_data1:hover, #div_box_data2:hover, #div_box_data3:hover
{
	background-color: rgba(85,85,85,0.5);
}

/***********************************************************************************************************************************/
/********************************************************** CSS MINI ***************************************************************/
/***********************************************************************************************************************************/
@media screen and (max-width: 720px)
{
	#div_mosaic
	{
		width: 100%;
	}
	
	#div_pic0
	{
		width: 100%;
		height: 60%;
	}
	
	#div_pic1
	{
		width: 66.66%;
		height: 40%
	}
	
	#div_pic2, #div_pic3
	{
		width: 33.33%;
		height: 20%;
	}
	
	#div_box_data2, #div_box_data3
	{
		font-size: 18px;
	}
	
	#div_box_data0:hover, #div_box_data1:hover, #div_box_data2:hover, #div_box_data3:hover
	{
		background-color: rgba(85,85,85,0);
	}
}