html, body { height: 100%; margin: 0px;}				/* GIA */
html * { font-family: freesans, Arial, sans-serif !important; }

.accordion {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0px auto;
}

.accordion ul {
	width: 100%;
	display: table;
	table-layout: fixed;
	margin: 0;
	padding: 0;
}

.accordion ul li {
	display: table-cell;
	vertical-align: bottom;
	position: relative;
	width: 33.333%;							/* (100/#) */
	height: 100vh;							/* GIA */
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 500ms ease;
}

.accordion ul li div {
	display: block;
	overflow: hidden;
	width: 100%;
}

.accordion ul li div a {
	display: block;
	height: 100vh;							/* GIA */
	width: 100%;
	position: relative;
	z-index: 3;
	vertical-align: bottom;
	padding: 15px 20px;
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
	transition: all 200ms ease;
}

.accordion ul li div a * {
	opacity: 0;
	margin: 0;
	width: 100%;
	text-overflow: ellipsis;
	position: relative;
	z-index: 5;
	white-space: nowrap;
	overflow: hidden;
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}

.accordion ul li div a h2 {
	font-family: freesans, Arial, sans-serif;			/* GIA */
	text-overflow: clip;
	font-size: 36px;
	text-transform: uppercase;
	margin-bottom: 2px;
	top: 100px;
}

.accordion ul li div a p {
	font-family: freesans, Arial, sans-serif;			/* GIA */
	top: 100px;
	font-size: 28px;
}

.accordion ul li:nth-child(1) { background-image: url("images/architect.jpg"); }
.accordion ul li:nth-child(2) { background-image: url("images/murals.jpg"); }
.accordion ul li:nth-child(3) { background-image: url("images/albums.jpg"); }
.accordion ul li:nth-child(4) { background-image: url("images/map.jpg"); }

.accordion ul:hover li { width: 8%; }
.accordion ul:hover li:hover { width: 60%; }
.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }
.accordion ul:hover li:hover a * {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

@media screen and (max-width: 1024px) {
	body { margin: 0; }
	.accordion { max-width:100%; height: auto; }
	.accordion ul li, .accordion ul li:hover, .accordion ul:hover li, .accordion ul:hover li:hover {
		width: 100%;
height: 240px;
display: inline-block;
vertical-align: top;
		-webkit-transition: none;
		transition: none;
	}
}