<div class="tile modern">
    <h2><a href="">Title 1</a></h2>
    <p>Description here</p>
</div>

<div class="tile modern">
    <h2><a href="">Title 2</a></h2>
    <p>Description here</p>
</div>

<div class="tile modern">
    <h2><a href="">Title 3</a></h2>
    <p>Description here</p>
</div>

<div class="more_section_devide">&nbsp;</div>
<div class="more_section_box"> More:</div>

<ul class="more_columns">
<li>​<a href="" title="Title text">Link text</a></li>
<li>​<a href="" title="Title text">Link text</a></li>
</ul>

/* New Tile styles */
.tile.modern {
	width: 30%;
	margin-right: 2% !important;
	min-height: 140px;
	border-bottom: 4px solid #077181 !important;
}

.tile.modern:hover {
    background: #efefef !important;
    -webkit-box-shadow: 0px 20px 25px -10px rgba(112, 112, 112, 0.50) !important;
    -moz-box-shadow: 0px 20px 25px -10px rgba(112,112,112,0.50)!important;
    box-shadow: 0px 20px 25px -10px rgba(112, 112, 112, 0.50) !important;
}

.tile.modern p {
	display: block!important;
	left:0px !important;
	border: 0px solid #ebebeb;
	position:initial;
	width: 99%!important;
	font-size: initial !important;
}

.tile.modern:hover p {
    left: -1px;
    border: 0px solid #ebebeb;
    border-top: 0px !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none!important;
    box-shadow: none !important;
    border-bottom: 0px solid #076e7c !important;
    background-color: transparent !important;
} 

.tile.modern:focus, 
.tile.modern:focus-visible,
.tile.modern:focus-within {
    outline: 3px solid #ae0e00!important;
}

.tile.modern a:focus,
.tile.modern a:focus-visible,
.tile.modern h2 a:focus,
.tile.modern h2 a:focus-visible {
	border:0px!important;
	outline: 0px!important;
}

.tile.modern h2 {
    height: 60px;
}
.tile.modern h2 a {
	left:0px;
}
/* End */