/* === Clearfix === */
.clear {
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
	width:0
}
.padding15 {
	padding-top:15px;
	font-size:0;
	line-height:0;
}

td {
	padding-left: 5px;
	border: 1px solid #cecece;
}
/* nav styles */
.cmn-tile{
/*  width: 531px;*/
  padding: 5px 0 5px 0;
}
.cmn-tile-nav {
/*  width: 534px;*/
}
.cmn-subtile {
	width: 48%;
	margin:0 0 5px 10px;
}
.cmn-subtile2, .cmn-subtile3 {
	float: left;
	font-size:14pt;
	text-align: center;
	margin:0;
	background-color:#DEBA00;
	width: 50%;
	height:33px;
}
.cmn-subtile3 {
	border-right: 4px solid white;
}

nav.cmn-tile-nav.open {
  display: block;
}
nav.cmn-tile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.cmn-tile-nav li {
  display: block;
  overflow: hidden;
  margin: 0px 3px 3px 0px;
  float: left;
  width: 175px;
  height: 175px;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

nav.cmn-tile-nav a {
  text-align: center;
  display: block;
  color: #fff;
  -webkit-transition: background 0.3s, -webkit-transform 0.3s;
          transition: background 0.3s, transform 0.3s;
	text-decoration: none;
}

nav.cmn-tile-nav li.color-1, nav.cmn-tile-nav li.color-1 a {
  background-color: #3EA9F5;
}
nav.cmn-tile-nav li.color-1:hover, nav.cmn-tile-nav li.color-1:hover a {
  background-color: #137ECA;
}
nav.cmn-tile-nav li.color-2, nav.cmn-tile-nav li.color-2 a {
  background-color: #78C941;
}
nav.cmn-tile-nav li.color-2:hover, nav.cmn-tile-nav li.color-2:hover a {
  background-color: #4A9B13;
}
nav.cmn-tile-nav li.color-3, nav.cmn-tile-nav li.color-3 a {
  background-color: #FF931D;
}
nav.cmn-tile-nav li.color-3:hover, nav.cmn-tile-nav li.color-3:hover a {
  background-color: #E27701;
}
nav.cmn-tile-nav li.color-4, nav.cmn-tile-nav li.color-4 a {
  background-color: #ED1A23;
}
nav.cmn-tile-nav li.color-4:hover, nav.cmn-tile-nav li.color-4:hover a {
  background-color: #BD0000;
}
nav.cmn-tile-nav li.color-5, nav.cmn-tile-nav li.color-5 a {
  background-color: #FF7AAC;
}
nav.cmn-tile-nav li.color-5:hover, nav.cmn-tile-nav li.color-5:hover a {
  background-color: #DC5789;
}
nav.cmn-tile-nav li.color-6, nav.cmn-tile-nav li.color-6 a {
  background-color: #FDC20D;
}
nav.cmn-tile-nav li.color-6:hover, nav.cmn-tile-nav li.color-6:hover a {
  background-color: #DBA00F;
}
nav.cmn-tile-nav li.color-7, nav.cmn-tile-nav li.color-7 a {
  background-color: #27903A;
}
nav.cmn-tile-nav li.color-7:hover, nav.cmn-tile-nav li.color-7:hover a {
  background-color: #056E18;
}
nav.cmn-tile-nav li.color-8, nav.cmn-tile-nav li.color-8 a {
  background-color: #094A8F;
}
nav.cmn-tile-nav li.color-8:hover, nav.cmn-tile-nav li.color-8:hover a {
  background-color: #c0392b;
}
nav.cmn-tile-nav li.color-9, nav.cmn-tile-nav li.color-9 a {
  background-color: #F15923;
}
nav.cmn-tile-nav li.color-9:hover, nav.cmn-tile-nav li.color-9:hover a {
  background-color: #BD2500;
}
nav.cmn-tile-nav li.color-10, nav.cmn-tile-nav li.color-10 a {
  background-color: #F57821;
}
nav.cmn-tile-nav li.color-10:hover, nav.cmn-tile-nav li.color-10:hover a {
  background-color: #E1640D;
}
nav.cmn-tile-nav li.color-11, nav.cmn-tile-nav li.color-11 a {
  background-color: #971032;
}
nav.cmn-tile-nav li.color-12, nav.cmn-tile-nav li.color-12 a {
  background-color: #5587A2;
}
@media only screen and (max-width: 767px) {
	nav.cmn-tile-nav li {
	width: 202px;
	}
	.cmn-tile-nav {
	width: 410px;
	}
	.cmn-tile{
	width: 410px;
	}
	.cmn-subtile {
	width: 40%;
	}
	.cmn-subtile2, .cmn-subtile3 {
	width: 50%;
	}
}

@media only screen and (max-width: 480px) {
	nav.cmn-tile-nav li {
	  width: 135px;
	  height: 155px;
	}
	.cmn-tile-nav {
	width: 280px;
	}
	.cmn-tile{
	width: 280px;
	}
	.cmn-subtile {
	width: 100%;
	}
	.cmn-subtile2, .cmn-subtile3 {
	width: 100% !important;
	margin-bottom: 5px;
	}
	.cmn-subtile3 {
		border-right: 0px;
	}
}