@media screen and (max-width: 768px) {
	.spoiler .anno {clear: both; }
}

.hot_items {margin-bottom: 30px;}
	.hot_items .row.no-gutter {margin-right: -1px;}

	.hot_items .item {display: block;position: relative;margin-bottom: 1px;margin-right: 1px;overflow: hidden;}
	@media screen and (min-width: 768px) {
		.hot_items .item {margin-right: 1px;} 
	}


	.hot_items .item h3 {margin: 0 0 4px;font-size: 1 em;font-family: "Roboto Condensed", Arial, sans-serif;color: #fff;line-height: 1.1em;background:#288ac8;padding: 2px 5px;}

	.hot_items .item .date {display: inline-block;font-family: "Roboto Condensed", Arial, sans-serif;color: #fff;font-size: .85em;background: #8bc34a;padding: 2px 5px;line-height: 1;float: left;clear: both;}
		.hot_items .item .date i {display: inline-block;margin-right: 5px;}
	
	.hot_items .item .preview {position: relative; display: block;padding-bottom: 69%;background-color: #c9e9f7;background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;}
	.hot_items .item .preview:before {opacity: .2; content: ""; background: #000; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: opacity .5s ease; }

	.hot_items .item:hover .preview:before {opacity: 0; }
	
	.hot_items .item .anno {display: inline-block;text-align: justify;color: #777;margin: 0 0 5px;line-height: 1.1em;font-size: .9em;}
	.hot_items .item .content {position: absolute;bottom: 10px;left: 10px;right: 10px;}	
	
	
	.hot_items .first .item h3 {font-size: 1.8em; padding: 3px 6px; }
	.hot_items .first .item .date {font-size: 1em; }
	.hot_items .first .item .preview {background-position: 50% 0; }