less

.block{
	background:@color_white;
	border:1px solid @color_gray;
	.border_radius(5px);
	padding:10px;
	&:before,&:after{
		content:'';
		position:absolute;
		left:50%;
		margin-left:-10px;
		top:-20px;
		border:10px solid transparent;
		border-bottom:10px solid @color_gray;
	}
	&:after{
		border-bottom:10px solid @color_white;
		top:-19px;
	}
}

.text{
	width:~"calc(100% - 100px)";
}

.text{
	width:calc(100% - 100px);
}

.transition(@transition){
	-webkit-transition:@transition;
	-moz-transition:@transition;
	-o-transition:@transition;
	transition:@transition;
}
.type{
	width:299px;
	.type_photo{
		height:299px;
		position:relative;
		overflow:hidden;
		.type_photo_hover{
			.transition(top 0.4s ease-out 0.2s);
			display:block;
			width:100%;
			height:299px;
			position:absolute;
			top:299px;
			left:0px;
			background:@color_blue;
		}
	}
	&:hover{
		.type_photo{
			.type_photo_hover{
				top:0px;
			}
		}
	}
}

article p{
	display:none;
	&:first-child{
		display:block;
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
}