h1.hl{ padding:0 0 5px 0; text-align:left; color:#fff;}
.highlights{background:#ffc91a; text-align:center; overflow:hidden; padding: 25px 0;}
.highlights .item{color:#fff; border: 5px solid #0c111d; float:left; width: calc(25% - 30px); padding-top: calc(25% - 30px); position: relative; background-size: cover; transition: all 0.4s ease-in-out; margin: 10px;}
.highlights .item .txt{ position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.highlights .item h3{background: rgba(12, 17, 29, 0.5); color:#fff; margin:0; position:absolute; bottom:0; left:0; width: 100%; font-size:14px; height: 40px; line-height:40px; overflow:hidden; }
.highlights .item p{}
.highlights .item a{color:#fff; text-decoration:none; width:100%; height:100%; position:absolute; bottom:0; left:0;}
.highlights .item2 {}
.highlights .item2 h3 {}
.highlights .item3 {}
.highlights .item3 h3 {}
.highlights .item4 {}
.highlights .item4 h3 {}

@media only screen and (min-width: 1099px) {
	.highlights .item:hover{transform: scale(1.05); }
}

@media only screen and (max-width: 979px) {
	.highlights .item{ float:left; width: calc(50% - 30px); padding-top: calc(50% - 30px);}

}

@media only screen and (max-width: 425px) {
	.highlights .item h3{font-size:12px; line-height:20px; height:20px;}
}