* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; 
		background-color: black;

}


h1{
	color:white;
	font-size:30px;
	font-family: 'EB Garamond', serif;
	}
	
h2{
	color:white;
	font-size:15px;
	font-family: 'Roboto', sans-serif;
	}
	
	a:link {
  color: white;
}

h3{
	color:white;
	font-size:13px;
	font-family: 'Roboto', sans-serif;
	}
	
h4{
	color:white;
	font-size:13px;
	font-family: 'Roboto', sans-serif;
	}
	
.legende1{
	top:350px;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
	opacity: 0; 
	transition-duration:0.5s;
	}

.grid-item1:hover ~ .legende1{
	opacity:1;
	/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}


.legende2{
	top:350px;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
	opacity: 0; 
	transition-duration:0.5s;
	}

.grid-item2:hover ~ .legende2{
	opacity:1;
	/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}
	
.legende3{
	top:350px;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
	opacity: 0;
	transition-duration:0.5s; 
	}

.grid-item3:hover ~ .legende3{
	opacity:1;
	/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}


.legende4{
	top:350px;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
	opacity: 0; 
	transition-duration:0.5s;
	}

.grid-item4:hover ~ .legende4{
	opacity:1;
	/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}

.legende5{
	top:350px;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
	opacity: 0; 
/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}

.grid-item5:hover ~ .legende5{
	opacity:1;
/* ---- transition ---- */
	transition-duration:0.5s;
/* ---- transition ---- */
}

	
.header{
	top:0;
	left:0;
	height:100vh;
	width:250px;
	position:fixed;
	background-color: black;
	padding:10px;
}
.reverse{
	position:relative;
	bottom:0;
	width:100%;
	background-color:black;

}

.footer{
	left:600px;
	position:fixed;
	background-color: black;
	width:100%;
	position: absolute;
	
}
/* ---- grid ---- */

.grid {
	margin:0 0 0 250px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item0 ---- */

.grid-sizer,
.grid-item {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item {
  float: left;
  cursor:pointer;
}

.grid-item img {
  display: block;
  width: 100%;
}

/* ---- .grid-item2 ---- */

.grid-sizer,
.grid-item1 {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item1 {
  float: left;
}

.grid-item1 img {
  display: block;
  width: 100%;
}

/* ---- .grid-item2 ---- */

.grid-item2 {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item2 {
  float: left;
}

.grid-item2 img {
  display: block;
  width: 100%;
}

/* ---- .grid-item3 ---- */

.grid-item3 {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item3 {
  float: left;
}

.grid-item3 img {
  display: block;
  width: 100%;
}

/* ---- .grid-item4 ---- */

.grid-item4 {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item4 {
  float: left;
}

.grid-item4 img {
  display: block;
  width: 100%;
}

/* ---- .grid-item5 ---- */

.grid-item5 {
  width: 24.7%;
  padding:1px;
  margin:1px;
}

 
.grid-item5 {
  float: left;
}

.grid-item5 img {
  display: block;
  width: 100%;
}


@media screen and (max-width: 1200px) 

{
.header{
	
	width:100%;
	position:fixed;
	background-color: black;
	padding:10px;
}
.reverse{
	position:relative;
	bottom:0;
	width:100%;
	background-color:black;
}
.grid {
	margin:270px 0 80px 0;
	background-color:black;

}
.grid:after {
  content: '';
  display: block;
  clear: both;
  margin-top:250px;
}

.grid-sizer,
.grid-item {
  width:calc(50% - 5px);
  padding:0px;
  margin:1px;
}
 
.grid-item {
  float: left;
  cursor:pointer;
}

.grid-item img {
  display: block;
  width: 100%;
}
.legende1, .legende2, .legende3, .legende4, .legende5{
	position:fixed;
	display:block;
	top:80vh;
	left:0;
	width:100%;
	height:20vh;
	background-color: black;
	padding:10px;
	margin:0;
	opacity: 0; 
	transition-duration:0.5s;
-webkit-box-shadow: 0px -7px 15px 10px #000000; 
box-shadow: 0px -7px 15px 10px #000000;
	}
	
	.footer{
	left:180px;
	position:fixed;
	background-color: black;
	width:100%;
	position: absolute;
}