* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}


.title{
	z-index: 1;
	/*padding: 10px;
	;
	*/
	text-align: center;
	color: #20d2e6;
	width: 100%;
	top:0;
	left:0;
	background-color: #391b57;
}
h1.head{
	border-radius: 10px;
	border: 5px solid #20d2e6;
	padding: 10px;
	display: inline-block;
}
.grid_5{
	display:none;
	z-index:-10;
	background-color:#20d2e6;
	top: 220px;
	padding-left: 160px;
	position: fixed;
	color:black;
}

.grid_3{
	padding-left: 100px;
}
span.grid_1{
	background-color: #351e6e;
	position: fixed;
	left: 0px;
	top:0px;
	height: 100%;
	width: 150px;
	z-index: -1;
}
span.info-title{
	color: white;
	background-color:#2f1846;
	padding: 10px;
	position: absolute;
	left: 750px;
	top: 300px;
	width:500px;
}
span.img{
	background-color: white;
	color: black;
	position: absolute;
	padding:200px;
	margin: 100px;
	left: 40px;
	top: 100px;
	z-index: -5;
}
body{
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.grid_4{
	padding-left:180px;
}
.images{
	padding-left: 100px;
}

.display{
	padding-top: 250px;
}
span.info-text{
	position: absolute;
	top:250px;
	width: 650px;
	right:150px;
}
.subpage{
	text-decoration: none;
}
.column{
	float: left;
	width: 50%;
	padding: 5px;
}
.artrow::after{
	content:"";
	clear:both;
	display:table;
}
.white{
	color: white;
}
.text{
  position: relative;
  width: 300px;
  top: -230px;
  left: 420px;
}
.text2{
  position: relative;
  width: 500px;
  top: -300px;
  left: 800px;
}
.artsecond{
	position: relative;
	left:1000px;
	width:40%;
}
summary{
	color: white;
	background-color: #20d2e6;
	border-radius: 10px;
	border: 5px solid #20d2e6;
	padding: 10px;
	display: inline-block;
}

.hidden {
	display: none;
}


/* Page Container */
.page-container {
	display: flex;
	align-items: stretch;
	padding-top: 0px;
}

.page-container__nav {
	background-color: #391b57;
	min-width: 15em;
	max-width: 60rem;
	padding-top: 4rem;
	position: relative;
	top: -125px;
}

/* Navigation */
.main-nav {
	/*border: 1px solid yellow;*/
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: sticky;
	top: 50px;
	z-index: 999;
	 a {
		color: #ffffff;
		padding: 0.85rem 1rem;
		display: block;
		text-decoration: none;
		&:hover {
			background-color: #20d2e6;
		}
	}


}

.main-nav li {
	position: relative;
	&:hover .sub-nav {
		display: block;
	}
}

.sub-nav {
	position: absolute;
	display: none;
	left: 100%;
	top: 0;
	background-color: #391b57;
	padding: 0;
	list-style-type: none;
	width: 200px;

}