* {
	margin:0;
	padding:0;

}

a {
	color: white;
	text-decoration: unset;
}

a:hover {
	text-decoration: underline;
	color: gold;
	text-shadow: 2px 2px black;
}

html, body {
	background-color: black;
	color: white;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	background-position: center;
	font-family: 'Lato', sans-serif;
}



img {
	padding: 20px;
}
.containercolumn {
/*background-color: rgba(0,0,0,0.5);*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	align-items: center;
	width: 100%;
}

.greyed {
  background-color: unset;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	align-items: center;
box-shadow: 0 0 300px rgba(0,0,0,0.9) inset;
}



.greybg {
	background-color: rgba(0,0,0,0.5);
	transition: 0.5s;

}

.nogreybg {
	background-color: rgba(0,0,0,0);
	transition: 0.5s;

}

.fading {
	opacity: 0;
}

.disappear {
opacity: 0;
	transition: 0.5s;
}

.appear {
  opacity: 1;
	transition: 0.5s;
}

.nodisplay {
display: none;
}

.display {
  display: flex;
}

.containerrow {
	display: flex;
	flex-direction: row;
	justify-content: center;
		align-items: center;
		width:100%;
}


#menu {
/*background-color: rgba(0,0,0,0.5);*/
	width:100%;
	display: flex;
	flex:1 1;
	flex-direction: row;
	justify-content: center;
	font-size: 20px;
	letter-spacing: 1px;
	font-weight: 300;
	text-shadow: 1px 1px black;
	z-index: 6;
}

.menuitem {
	padding: 20px;
	text-align: center;
	cursor: pointer;
}

.menuitem:hover {
	/*color: lightgrey;*/

}


.audiobutton {
	width:70px;
	height:70px;
	display: inline-block;
	margin:10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
		transition: unset;
		cursor: pointer;
}
.play {
	background-image:url('images/play.png');

}

.loading {
	background-image:url('images/spinner.svg');
}


.pause {
	background-image:url('images/pause.png');
}
.rewind {
	background-image:url('images/rewind.png');
}
.forward {
	background-image:url('images/forward.png');
}


.left {
	display: flex;
	justify-content: flex-start;
	height: 100%;
	flex:1;
	/*background-color: pink;*/
}

.right {
	display: flex;
	justify-content: flex-end;
	/*background-color: blue;*/
	height: 100%;
	flex:2;
}
#infobutton {
	padding: 0;
	margin:25px 25px 0 10px;
	border: 3px solid white;
	border-radius: 50%;
	width: 35px;
	height:35px;
	font-weight: 700;
	font-size: 25px;
	position: relative;


}

#infobutton p {
	position: absolute;
	top:-8px;
	left: 14px;
}

#infobutton:hover {
	text-shadow: 3px 3px black;
		box-shadow: 3px 3px black;
	border: 3px solid gold;
	color: gold;
}

#top {
	width: 100%;
	flex:0.5;
}
#title {
/*background-color: blue;*/
width:60%;
max-width: 800px;
	display: flex;
	flex:3;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


#info {
	width:60%;
	display: flex;
	flex:3;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: none;

	/*background-color: green;*/
	font-size: 20px;


  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



/* Hide scrollbar for Chrome, Safari and Opera */
#info::-webkit-scrollbar {
  display: none;
}



#info p {
	text-align: center;
	/*background-color: pink;*/
}

#info a {
	text-decoration: underline;
}

#audio {
/*background-color: blue;*/
width:60%;
max-width: 800px;
	display: flex;
	flex:1;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
z-index: 10;


}

#audiobuttons {
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
			background-color: rgba(0,0,0,0.5);
			/*background-color: rgba(0,0,0,1);*/
border-radius: 10px 10px 0 0;
z-index: 10;
	/*background-color: pink;*/
}

#timebarcontainer {
	width:100%;
	height: 25px;
	/*background-color: green;*/
	display: flex;
	flex-direction: row;
	justify-content: center;
	/*align-items: center;*/
	/*background-color: rgba(255,255,255,0.5);*/
	background-color: rgba(255,255,255,0.7);
	border-radius: 0 0 10px 10px ;
	overflow: hidden;
	/*background-color: green;*/
}

#timebar {
	width:100%;
	height: 100%;
	position: relative;
	/*display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;*/
/*	background: linear-gradient(to right, 
		rgba(255,255,255,1),
		rgba(255,255,255,1)
		);*/
	
		overflow: hidden;
	background-size: 100% 0%;
	background-repeat: no-repeat;
	box-shadow: 0 0 20px rgba(0,0,0,0.4) inset;
}	

#loading {
	width:100%;
	height: 100%;
	position: relative;
	/*display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;*/
	background: linear-gradient(to right, 
		rgba(0,0,0,0.1),
		rgba(0,0,0,0.1)
		);
	
		overflow: hidden;
	background-size: 100% 0%;
	background-repeat: no-repeat;
	/*box-shadow: 0 0 20px rgba(0,0,0,0.4) inset;*/
}	

#control {
	position: absolute;
	height: 25px;
	width:5px;
	left:-5px;
	background-color: rgba(0,0,0,1);
	/*background-color: white;*/
	/*display: inline-block;*/
	/*display: none;*/
}
#controlfloat {
	position: absolute;
	height: 25px;
	width:2px;
	left:-2px;
	background-color: rgba(0,0,0,0.5);
	/*background-color: white;*/
	/*display: inline-block;*/
	/*display: none;*/
}


#timercontainer {
	  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*background-color: pink;*/
}


#time {
	position: relative;
	height: 25px;
	right:0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	user-select: none;

color:black;
}

.timer {
	font-weight: 300;
	font-size: 14px;
	padding: 3px 6px 3px 0;
	height: 100%;

}

#bottom {
	width: 100%;
	flex:0.5;
}


h1 {
	padding: 5px;
	font-size: 40px;
	text-align: center;
	letter-spacing: 4px;
	font-weight: 900;
	text-shadow: 1px 1px black;
}

h2 {
	padding: 5px;
	font-size: 50px;
	text-align: center;
	letter-spacing: 3px;
	font-weight: 300;
	text-shadow: 1px 1px black;
}

audio {
	width: 100%;
	height:100%;
}


#allcontainer {
    width:96%;
        margin-left: 2%;
        margin-right: 2%;
}

.episodecontainer {
    height: 300px;
        display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.episodecontainer a {
	height: 100%;
	width: 100%;
	display: flex;
}

.episode {
    height: 100%;
    width: 300px;
    margin: 10px;
    	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	box-shadow: 0 0 150px rgba(0,0,0,0.9) inset;
	padding: 20px;
	position: relative;
	flex-grow: 1;
}


.episodetext {
	position: absolute;
	bottom:0;
	width: 90%;
	text-shadow: 2px 2px #000;
}




h3 {
	padding: 2px 0;
	/*letter-spacing: 1px;*/
	font-size: 24px;
}

h4 {
	padding: 10px 0;

	color: lightgrey;
}

p {
	padding: 10px 0;
}

#previous {
	position: fixed;
	left:0;
	top:45%;
}



#next {
		position: fixed;
	right:20px;
	top:45%;
}

#next img {
	float: right;
}


.nolink:hover {
	color: white;
	cursor: default;
}

.qmark img {
	width:55%;
	height:55%;
	position: relative;
	right:28px;
	top:-16px;
}



#console {
	position: fixed;
	top: 0;
	width:100%;
	background-color: red;
	color: white;
	z-index: 100;
	font-size: 10px;
}