.imagegrid2 { margin: 0; padding: 0; list-style: none; width:auto;}
.imagegrid2 > li {width: 20%; float: left; display: inline; position: relative; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  padding-bottom:25px;}
.imagegrid2 > li:hover {z-index: 99; cursor:auto;}
.imagegrid2 > li.box { padding:1px; margin-bottom:60px;}
.imagegrid2 > li h1{font-size:1.4em; color:#3f0105; border:none; padding:0 0 10px 0; margin:0;}
.imagegrid2 > li img {position: relative; width:100%; }

.imagegrid2 > li .infohead{
	z-index: 999;position: absolute; bottom:-30px; background-color:#333333; color:#ffffff; display:block; padding:2px 7px 3px 7px; margin:1px; right:0; left:0; font-size:1em; line-height:17px; text-align:left !important;}
	.imagegrid2 > li:hover .infohead{
	z-index: 999;position: absolute; bottom:-30px; background-color:#960400; color:#ffffff; display:block; padding:2px 7px 3px 7px; margin:1px; right:0; left:0; font-size:1em; line-height:17px; text-align:left !important;}

.imagegrid2 > li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 cursor:auto;
}

.imagegrid2 > li .info {
	position: absolute; left: 0;  top: 0; padding: 150px 1px 1px; width: auto; display: none; background: #bb000b; font-size: 1.2em; line-height:17px; color:#f1f1f1;}
.imagegrid2 > li:hover .info {display: block; text-align:left !important; }

.imagegrid2 > li h2 {
	font-size: 1.2em; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px 0;
}
.imagegrid2 > li p {padding: 5px 7px; margin: 0; font-size: 13px;  line-height:15px;}
.imagegrid2 > li p.eventdate{color:#fff; padding:5px;}


@media screen and (max-width: 1100px) {
.imagegrid2 > li {width: 33%;}
}

@media screen and (max-width: 680px) {
.imagegrid2 > li {width: 50%;}
}

@media screen and (max-width: 360px) {
.imagegrid2 > li {width: 100%;}
}