section.grid{
  background-color: black;
  position:relative;
  margin: 0px;
  padding-top:100px;
  font-family: trade-gothic,sans-serif;
}
section.yt{
  width:80%;
  max-height:600px;
  height:80vw;
  background-color:black;
  margin: 20px auto;
  padding: 5px 20px;
}
iframe#evideo{
 width:100%;
 height:100%;
}
section.col{
  margin: 50px auto 0px;
  align-items:flex-start;
  -webkit-align-items:flex-start;
  justify-content:space-around;
  -webkit-justify-content:space-around;
  background-color:#333333;

}

article.facefeed{
 flex:1 3 300px;
 min-width:300px;
 max-width:700px;
 background-color: #8d8d8e;
 text-align:center;
 padding:5px;
}
@media(min-width:400px){
iframe.facefeed{
  width:400px;
  height:600px;  /* same as url height */
}}
@media(max-width:400px){
iframe.facefeed{
  width:280px;
  height:450px;  /* same as url height */
 overflow:auto;
}}

iframe.facefeed{
  vertical-align: top;
  border:none;
  overflow:hidden;
}

article.series{
  flex:1 1 180px;
  min-width:180px;
  margin:20px 10px;
  color:white;
  text-align:center;
}
article.series >ul{
  list-style: none;
}
li.series{
  margin:5px;
  font-size:1.5em;
  margin:15px 10px;
  color:white;
  background-color:#C22A39;
  background-color: #C22A39;
  border-radius: 8px;
}

li.series{ cursor:pointer; }
  
article.chap{
  flex:2 1 300px;
  min-width:300px;
  margin:20px 10px;
  color:white;
  text-align:left;
}
article.chap > ul{
  list-style: none;
  transition: 0.5s;
}
li.chap{
  margin:5px;
  font-size:1.2em;
  margin:15px 10px;
  color:white;
  display:none;
}
li.chap:hover{
  cursor:pointer;
  transform:scale(1.1,1.1);
}