div#content.museum {
	margin-top: 50px;
}

div#content.museum div.title {
	position: relative;
	background-position: left top;
	background-size: 30px;
	margin: 0 3vw 2vw 3vw;
	padding: 0;
	border: 1px solid;
	overflow: hidden;
}

div#content.museum div.title.descended, div#content.museum div.chartarea div.title, div#content.museum div.chart div.title {
	border: none;
}

div#content.museum div.title > div.image {
	padding: 40% 0 0 0;
	background-position: center;
	background-size: cover;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	z-index: -2;
	top: 30px;
}

div#content.museum div.title.descended > div.image {
	display: none;
}

div#content.museum div.title > span {
	position: absolute;
	bottom: 0;
	left: 3vw;
	right: 3vw;
	margin: 1vw 1vw 3vw 1vw;
	color: white;
	font-size: 6vw;
	display: block;
	transform: none;
	line-height: 85%;
	-webkit-text-stroke: 1px black;
}

div#content.museum div.title.descended > span {
	position: relative;
	display: inline-block;
	left: 0;
	right: 0;
	color: white;
	font-size: 12pt;
	line-height: 30px;
	margin: 0 0 0 100%;
	transform: translateX(-100%);
	padding-right: 10px;
	-webkit-text-stroke: 0px transparent;
}

div#content.museum ul.contentindex {
	margin: 0 3vw 0 3vw;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	border: none;
	height: auto;
	width: auto;
}

div#content.museum ul.contentindex > li {
	position: relative;
	text-align: left;
	transform: none !important;
	padding: 30px 0 0 0;
	left: 0;
	overflow: hidden;
	border: 1px solid black;
	box-sizing: border-box;
	width: 32%;
	height: auto;
	margin-bottom: 2vw;
	cursor: pointer;
	cursor: hand;
	background-position: left top;
	background-size: 30px;
	font-size: 1.5vw;
}

div#content.museum ul.contentindex > li > div.image {
	height: 12.8vw;
	background-position: center;
	background-size: cover;
	position: relative;
}

div#content.museum ul.contentindex > li > span {
	display: block;
	padding: 1vw;
}

div#content.museum ul.contentindex > li.fact, div#content.museum div.title.fact {
	border-color: #22CF83;
}

div#content.museum ul.contentindex > li.research_fact, div#content.museum div.title.research_fact {
	border-color: #159dd6;
}

div#content.museum ul.contentindex > li.position, div#content.museum div.title.position {
	border-color: #ffad08;
}

div#content.museum ul.contentindex > li::before, div#content.museum div.title::before {
	display: block;
	width: 100%;
	transform: none !important;
	text-align: left;
	left: 0;
	padding-left: 40px;
	position: absolute;
	top: 0;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	content: 'content type';
	font-family: Campton W00 Light;
	font-weight: 900;
	font-size: 20px;
	color: white;
	z-index: -1;
}

div#content.museum ul.contentindex > li.fact::before, div#content.museum div.title.fact::before {
	background-color: #22CF83;
}

div#content.museum ul.contentindex > li.research_fact::before, div#content.museum div.title.research_fact::before {
	background-color: #159dd6;
}

div#content.museum ul.contentindex > li.position::before, div#content.museum div.title.position::before {
	background-color: #ffad08;
}

div#content.museum ul.contentindex > li.muyomi::before, div#content.museum div.title.muyomi::before {
	content: 'muyomi';
}

div#content.museum ul.contentindex > li.case::before, div#content.museum div.title.case::before {
	content: 'case';
}

div#content.museum ul.contentindex > li.wonder::before, div#content.museum div.title.wonder::before {
	content: 'investigate';
}

div#content.museum ul.contentindex > li.insight::before, div#content.museum div.title.insight::before {
	content: 'assessment';
}

div#content.museum ul.contentindex > li.narrative::before, div#content.museum div.title.narrative::before {
	content: 'narrative';
}

div#content.museum ul.contentindex > li.analysis::before, div#content.museum div.title.analysis::before {
	content: 'analysis';
}

div#content.museum ul.contentindex > li.questionnaire::before, div#content.museum div.title.questionnaire::before {
	content: 'questionnaire';
}

div#content.museum ul.contentindex > li.question::before, div#content.museum div.title.question::before {
	content: 'question';
}

div#content.museum ul.contentindex > li.set::before, div#content.museum div.title.set::before {
	content: 'set';
}

@media ( max-width: 800px ) {
	div#content.museum ul.contentindex > li {
		font-size: 12px;
	}
	
	div#content.museum ul.contentindex > li, div#content.museum div.title {
		padding: 12px 0 0 0;
		background-size: 12px;
	}
	
	div#content.museum ul.contentindex > li::before, div#content.museum div.title::before {
		height: 12px;
		line-height: 12px;
		padding-left: 15px;
		font-size: 8px;
	}

	div#content.museum div.title.descended > span {
		font-size: 8pt;
		line-height: 12px;
		vertical-align: top;
	}

	div#content.museum div.title > div.image {
		top: 0px;
	}	
}