/*****************************************************************************/
/*********************************FullHD 1440**********************************/
/*****************************************************************************/


#mosaic {
box-sizing: border-box; /*div will include padding and border*/
width:100%;
text-align:justify;
margin-top:1em;
max-width:1200px;
padding:1em;
}

.mosaic_block {
display:inline-block;
text-align:center;
box-sizing: border-box; /*div will include padding and border*/
margin-bottom:2em;
vertical-align:top;
width:420px;
border:1px solid #e3e3e3;
overflow:hidden;
white-space: nowrap;
padding:1em;
}

.mosaic_block_title {
color:#1487D4;
font-family: 'PT Serif', "Times New Roman", Georgia, serif;
font-size:2em;
font-weight:normal;
}

.mosaic_block_title a {
color:#1487D4;
text-decoration:none;
}

.mosaic_block_title a:hover {
color:#1487D4;
}

.mosaic_block_image {
position: relative;
padding:1em 1em 0.8em 1em;
border:1px solid #e3e3e3;
background-color:#FFFFFF;
}

.mosaic_block_image img {
width:100%;
height:275px;
}

.zoom {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
opacity: 0.1;
background-image:url(../images/zoom.png);
background-repeat:no-repeat;
background-position:center;
}	

.mosaic_block_image:hover .zoom {
display:block;
opacity: 0.9;
}


.mosaic_block_text {
margin-top:10px;
font-size:0.9em;
font-weight:bold;
text-align:center;
}

/*for empty blocks in mosaic with justify*/
/*should be under all mosaic styles*/
.empty {
height:0;
border:0;
margin:0;
padding:0;
width:30%; /*for last line*/
}


/*****************************************************************************/
/***********************************HD 1152***********************************/
/*****************************************************************************/

@media only screen and (max-width: 11439px) { /**Replace to 1439 when FullHD wins**/

.mosaic_block {
width:350px;
}

.mosaic_block_image img {
height:227px;
}

/*for empty blocks in mosaic with justify*/
/*should be under all mosaic styles*/
.empty {
height:0;
border:0;
margin:0;
padding:0;
}

}

/*****************************************************************************/
/***********************************Tablet 1024*********************************/
/*****************************************************************************/

@media only screen and (max-width: 1151px) {

.mosaic_block {
width:310px;
}

.mosaic_block_image img {
height:200px;
}

}

/*****************************************************************************/
/*******************************MOBILE****************************************/
/*****************************************************************************/


@media only screen and (max-width: 1023px) {

#mosaic {
text-align:center;
}

.mosaic_block {
width:100%;
height:auto;
}

.mosaic_block_image img {
width:100%;
height:auto;
}

/*for empty blocks in mosaic with justify*/
/*should be under all mosaic styles*/
.empty {
height:0;
border:0;
margin:0;
padding:0;
}

}