/*<meta />*/

body
{
	font-family: Arial;
	line-height: 1.5em;
	background: #f5f5f5;
	background-color: #f5f5f5;
}

h1
{
	margin-bottom: 0.25rem;
	font-weight: bolder;
	padding: 0.25rem;
	font-size: 2rem;
	font-family: 'Segoe UI';
	color: #264653;
	text-align: left;
	border-bottom: solid 5px #264653;
}

h2
{
	margin-bottom: 0.25rem;
	margin-top: 1rem;
	font-weight: bold;
	color: #264653;
	font: Segoe UI;
	font-size: 1.5rem;
}

p
{
	color: #5a5a5a;
	margin: 0.125rem 0rem;
}


/*================================ TILES (works with JQuery) ============================*/

.tile:after
{
	content: "";
	display: table;
	clear: both;
}

.tile {
  width: 80%;
  display: block;
  text-align: center;
  margin: auto;
}

.rowtile {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 1.25rem 0.75rem;
}

.rowtile > div {
  display: table-cell;
  width: 30%;
  vertical-align: middle;
  box-sizing: border-box;
  margin: 1%;
  padding: 1.25rem;
  border: 2px solid #b0b0b0;
  outline: solid 2px #264653;
  background-color: #fff;
  color: #5a5a5a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rowtile > div:hover
{
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	transform: scale(1.05);
	color: #000;
}


/*===========================Tile text styles============================*/

p.tile-title,
p.tile-title > a
{
	margin-top: 0px;
	font-weight: bold;
	font-size: 1.25rem;
	text-decoration: none;
	vertical-align: middle;
}

p.tile-content
{
	font-size: 1rem;
	vertical-align: middle;
}

p.tile-content > a,
a > p.tile-content
{
	text-decoration: none;
	font-size: 1rem;
}

.tile > div img
{
	height: 50px;
	width: 45px;
}

div.rowtile > div > a
{
	text-decoration: none;
	color: inherit;
	vertical-align: middle;
}

.rowtile > div img
{
	height: 50px;
	width: 45px;
	vertical-align: middle;
}

/*==Responsive Header Styles==*/

button
{
	border: solid 2px #264653;
}

/*===========================================================================================================================================================
Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
===========================================================================================================================================================*/

@media only screen and (max-width: 1279px)
{
  .rowtile > div {
    width: 46%;
  }

}

@media only screen and (max-width: 767px)
{
  .rowtile > div {
    width: 100%;
  }
  
}