body {
	margin:0px;
	padding:0px;
}

.featured_content{
	margin: 0 auto;
	text-align:center;
	font-size:20px;
	/* font-family: 'Quicksand', sans-serif; */
}

/* this block handles styling for episode info box (the one that appears on hover) */
.ep-info {
	/*placement*/
	position:fixed;
	left: 35vw;	
	
	/*size*/
	padding:15px;
	width:30%;
	min-width: 300px;
	bottom: 5vh;
	
	/*styling*/
	background-color: #575757;
	color:white;
	border-radius: 20px;
	font-family: 'Quicksand', sans-serif;
	font-weight:bold;
	word-spacing:2px;
	
	/*idle styling*/
	opacity:0;
	display:none;
	
}

.ep-info button{
	display:none;
	width:25%;
	color:black;
	background-color:#eeeeee;
	position:relative;
	float:right;
	border:none;
	font-weight: bold;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}

.ep-info span{
	display:none;
	color:white;
	text-decoration:underline;
	
}

/*mobile phone style*/
@media only screen and (max-width: 600px) {
	.ep-info{
		left:5vw;
		width:90%;
	}
	


}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*standardized image layout (4 per row)*/
.col {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

	
.col img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/*image layout for mobile phones (2 per row)*/
@media screen and (max-width: 600px) {
  .col {
    flex: 49%;
    max-width: 49%;
  }
  .ep-info button{
		display:block;
		
	}

	.ep-info span{
		display:block;
	}
}

/*image layout for really small screens (1 per row)*/
@media screen and (max-width: 350px) {
  .col {
    flex: 100%;
    max-width: 100%;
  }
  .ep-info button{
		display:block;
		
	}

	.ep-info span{
		display:block;
	}
}