@charset "utf-8";


#row1 {
	border: 1px solid #fff;
	background: #999;
	display: inline-block;
	height: 4em;
	padding: 0.3em 1em;
	margin-bottom: 0.5em;
}

#row1 h1 {
	padding-left: 0;
	line-height: 0;
}
#row2 {     /* info container  */
	border: 1px solid #fff;
	display: block;
	background: #999;
	min-height: 150px;
  float: left;
  margin-bottom: 0.5em;
	font-size: 1em;
	padding: 0.5em;
  line-height: 1.2em;
	z-index: 0;
}

#medialink {
	display: none;
}

#row2 br {
	float: none;
}

#row3 {   /* Liste */
	border: 1px solid #fff;
	display: inline-block;
	background: #999;
	float: right;
}

#listWrap {
	height: 640px;
	overflow: auto;
	scroll-behavior: smooth;
	isplay: none;
	width: 100%;

}

#listWrap li ul {
	font-size: initial;
}

#listWrap li {
	padding: 0 1em;
	margin: 0.5em 0;
	font-size: 0.8em;
	line-height: 1.2em;
}

#listWrap li.spaceUp {
	margin-top: 1.5em;
}

#listWrap li[data-year] {
	cursor: pointer;
}

#listWrap .listItem {
  color: #fff;
	font-weight: normal;
}

.mediaicon {
	background-image: url("images/icon_film.png");
	background-repeat: no-repeat;
	background-size: 14px;
	margin-right: 8px; 
	margin-top: 2px;
	width: 16px;
	height: 16px;
	float: left;
	cursor: initial;
	display: inline-block;
}



#row4 {   /* mediacontainer */
	border: 1px solid #fff;
	display:  none;
  float: left;
	position: static;
}

#row4 video, #row4 audio {
  width: 100%;
  max-height: 30.2em;
  margin: auto;
  display: block;
}


#row4 img {
  max-height: 30.2em;
  margin: auto;
  display: block;
  width: 100%;
}
#row4 #btnClose {
	display: none;
	position: absolute;
	right: 20px;
	top: 20px;
	font-weight: bold;
	font-size: 1.8em;
}
#medialink{
  cursor: pointer;
	
}
#btnClose {
  cursor: pointer;
	
}

@media only screen and ( min-width: 1351px ) {
	#row1 {
		width: calc(100% - 380px);
	}
	#row2 {
		width: calc((100% - 380px) / 2 - 0.5em);
	}
	#row3 {
		width: calc((100% - 380px) / 2);
	}
	#row4 {
		width: calc((100% - 380px) / 2 - 0.5em);
	}
	
	
}

@media only screen and ( max-width: 1350px ) {
	#row1 {
		width: calc(100% - 280px);
	}
	#row2 {
		width: calc((100% - 280px) / 2 - 0.5em);
	}
	#row3 {
		width: calc((100% - 280px) / 2);
	}
	#row4 {
		width: calc((100% - 280px) / 2 - 0.5em);
	}
	
}

@media only screen and ( max-width: 1050px ) {
	#row1 {
		width: calc(100% - 210px);
	}
	#row2 {
		width: calc((100% - 210px) / 2 - 0.5em);
	}
	#row3 {
		width: calc((100% - 210px) / 2);
	}
	#row4 {
		width: calc((100% - 210px) / 2 - 0.5em);
	}
	
}

@media only screen and ( max-width: 750px ) {
	#row1 {
		width: 100%;
		text-align: center;
	}
	#row2 {
		width: 40%; 
		float: unset;
		margin: 0 7% 0.5em;
		font-size: 1.2em;
		position: absolute;
		top: 20em;
		right: 1.5em;
		isplay: none;
		z-index: -5;
		opacity: 0;
	}
	#medialink {
	 display: inline-block;
		color: #0ff;
  }


	#row3 {
		width: 80%;
		float: unset;
		margin: 0 10%;
	}
	#listWrap {
		font-size: 1.2em;
		height: max-content;
		margin-bottom: 4em;
		overflow:  hidden;
	}
	#listWrap li {
		font-size: 1em;
		width:  100%;
	}
	#row4 {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.7);
		margin: 0 10% 0 0;
	   argin: 0 10%;
		isplay: block;
		float: unset;
		position: fixed;
	  left: 0;
		-index: -5;
	  opacity: 0;
	}
  #row4 video, #row4 audio {
			height: 95%;
     idth: 100%;
	   position: fixed;
	   ottom: 0;
		margin-top: 10%; 
  }
	
	#row4 img {
		height: 95%;
    width: max-content;
  	margin: 1% auto;
  }

	#row4 #btnClose {
		display: block;		
	}
	
}

@media only screen and ( max-width: 440px ) {

	#row2 {
    width: 50%;
    margin-right: 4%;
	}

}