:root {
  --tile-width: 250px;
}
@media only screen and (max-width: 767px) {
	/* collapsible mobile menu */
	#index .top {
		display: flex;
	  	flex-direction: row;
	  	justify-content: space-between;
	  	align-items: center;
	  	margin-bottom: 1em;
	}
	#index .top h1 {
	  	margin-bottom: 0;
	}
	#index .nav {
		max-height: 0;
		overflow: hidden;
		transition: .4s max-height ease-in-out, .4s padding ease-in-out;
		position: absolute;
		background: #fff;
		z-index: 10;
		left: 0;
		right: 0;
		padding-left: 1.4rem;
		padding-right: 1.4rem;
		padding-bottom: 0;
	}
	#index.expanded .nav {
    	max-height: 25em;
		padding-bottom: 1em;
	}
	#toggler {
		position: relative;
		display: block; 
		width: 20px; 
		height: 20px;
	}
	#toggler:before,
	#toggler:after { 
		content: ''; 
		display: block; 
		width: 16px; 
		height: 0.5px; 
		border-top: 1.5px solid; 
		position: absolute;
		left: 3px;
		top: 11px;
	}
	#toggler:before { 
		transform: rotate(0deg) translate(0,-3.5px);
	}
	#toggler:after { 
		transform: rotate(0deg) translate(0,3.5px);
	}
	#index.expanded #toggler:before { 
		transform: rotate(45deg) translate(0,0);
	}
	#index.expanded #toggler:after { 
		transform: rotate(-45deg) translate(0,0);
	}
	#index + #exhibit {
	  background: #fff;
	  opacity: 1;
	  transition: .4s background, .4s opacity;
	}
	#index.expanded + #exhibit {
	  background: #eaeaea;
	  opacity: .6;
	}
	#img-container .picture, 
	#img-container .picture_holder, 
	#img-container .captioning { max-width: calc(100vw - 2.8rem); width: 100% !important; height: auto !important }
	#img-container .captioning { margin-bottom: 1em; }
	#img-container .picture > div { padding-top: 0 !important; }
}