#homePageGrid{ width:100%; margin:0; padding:0; }

#homePageGrid li{ display:block; float:left;  width:33.3333333333%; margin:0%;  padding:0%; height:auto; z-index:2; position:relative; white-space:nowrap; overflow:hidden; padding:6px; }

#homePageGrid li a{ display:block;  }
#homePageGrid li a.imgWrap {   }

#homePageGrid li a.imgWrap img{ 
width:100%; height:100%; display: block;
}
#homePageGrid li:hover a.imgWrap img { }


#homePageGrid li a.textWrap {
position:absolute;
width:94%;
height:86%;
z-index:3; 
background-position:0 0; 
background-image:url(../images/bgTrans.png);
background-repeat:repeat;
white-space:normal; display:block;
left:3%; top:-100%; /* opacity:0; or -top: 100%  */
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
padding:15%; border-radius:4px;
}

#homePageGrid li *{ font-family:Arial; text-shadow:1px 1px 2px  #fff}

#homePageGrid li:hover a.textWrap{    top:3%} /*  opacity:1 */

#homePageGrid li a.textWrap strong{
display:block;
text-align:left;
color: #E25A00;
font-size:1.6em; /* border:1px solid #fff; background:#fff   003366 */
}
#homePageGrid li a.textWrap span{ display:block; text-align:left; color:#444; font-size:1.0em; padding-top:12px ;font-weight:normal}

.mobile #homePageGrid li { border:6px solid #fff}
.mobile #homePageGrid li *{ font-family:Arial; text-shadow:1px 1px 2px  #fff }
.mobile #homePageGrid li a.textWrap{ display:block; position:relative; clear:both; background:none; padding:0 0 10px 0}
.mobile #homePageGrid li a.textWrap strong{display:none} 
.mobile #homePageGrid li a.textWrap span{ display:none}

#homePageGrid li strong.itemHeading{font-size:1.1em;color: #112277;padding:4px ; display:block;text-align:center}
.mobile #homePageGrid li strong.itemHeading{font-size:0.75em;color: #112277; padding:0px ; display:block; }

@media only screen and (orientation : portrait) {  	
.mobile #homePageGrid li{ width:50% }
.mobile #homePageGrid li:nth-child(2n + 1) { clear:both;  }
}

@media only screen and (orientation : landscape) {  	
.mobile #homePageGrid li{ width:33.3% }
.mobile #homePageGrid li:nth-child(3n + 1) { clear:both;  }
}