/* expanding thumbnail grid system */

.og-grid {
	list-style: none;
	padding: 1.2em 0;
	margin: 0 auto;
	text-align: left;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	margin: .3em;
	vertical-align: top;
	width: 18%;
	height: 31em;
	border: .1em solid #c2c2c2;
	background-color: white;
}

.og-grid img {
	width: 100%;
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
	cursor: pointer;
}

.og-grid li > img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

.exhibit-title {
  font-size: 1.3em;
  color: #222;
  line-height: 125%;
}

.date {
  font-size: 1em;
  line-height: 1em;
  color: red;
  margin: 0;
}

.location {
  font-size: .8em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  margin: 4px 0 0 0;
}

.moreinfo {
  font-size: .9em;
  font-style: italic;
}
 
.block {
  z-index:10;
  padding: 0px 5px;

}
    
  /* For visualization 
  background: #808080; width: 5px;
  */
 }

.centered {
  display: inline-block;
  width: 95%;
  padding: 0px 5px;
  text-align: left;
  z-index: 2;
}


@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}


@media screen and (max-width: 1200px) {
	.og-grid li {height: 30em;}
}

@media screen and (max-width: 1100px) {
	.og-grid li {height: 29em;}
}

@media screen and (max-width: 1000px) {
	.og-grid li {height: 28em;}
}

@media screen and (max-width: 900px) {
	.og-grid li {height: 27.2em;}
}

@media screen and (max-width: 830px) {

	.exhibit-title {font-size: 1em;}
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }
	.og-grid li {height: 25em;}
}

@media screen and (max-width: 800px) {

	.og-grid li {height: 23em;}
	.current {font-size: .8em;}
}

@media screen and (max-width: 650px) {

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	.og-grid li { width: 30%; height: 22.5em;}
	.exhibit-title {font-size: .8em;}
}

@media screen and (max-width: 550px) {
	.og-grid li { width: 45%; height: 25em;}

@media screen and (max-width: 450px) {
	.og-grid li { width: 100%; height: 38.5em;}

}

@media screen and (max-width: 400px) {
	.og-grid li { height: 34em;}
}

@media screen and (max-width: 350px) {
	.og-grid li { height: 30em;}
}

@media screen and (max-width: 300px) {
	.og-grid li { height: 27em;}
}