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

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

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

<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>

/* Landing tiles */

.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;
    padding: 20px !important;
    color: #077181 !important;
    position: relative;
    z-index: 999;
}

.tile.modern h2:before {
	transition: all 0.3s ease-in;
	position: relative;
	left: -2px;
	opacity: 0.9;
	font-family: "Font Awesome 5 Pro";
	font-weight: 400;
	color: #09585f;
	font-size: 0.9em;
	top: 1px;
	float: right;
	content: "\f054";
	height: 70px;
	margin-right: 0px !important;
}
.tile.modern:hover h2:before {
	  left: 0px;
	  opacity: 1;
}

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



.more_section_devide {
  float: left;
  width: 100%;
  height: 1px;
  margin-bottom: 25px;
  margin-top: 35px;
  clear: both;
	border-bottom: 1px #dfdfdf dashed;
	margin-top: 35px;
}

.more_section_box {
  float: left;
  width: 100%;
  padding: 0px;
  color: #333;
  font-size: 0.9em !important;
}

.more_columns, .more_columns li {
	float: left;	
	list-style: none;
	padding-left: 0px;
	margin-left: 0px;

}

.more_columns li {
	margin-right: 15px;
	border-right: 1px solid silver;
	padding-right: 15px;
}

.more_columns li a:hover {
	color: #017988;
}