/*
SimpleYouTubePlayer
by John E Maddox
*/

/* === media list === */

/* BOF For demo, centers video list on screen */

#mList {
  /* max-width: 295px;
  margin: auto; */
}
@media screen and (orientation: landscape) and (min-width: 801px) {
  #mList {
    /* max-width: 600px; */
  }
}

/* EOF demo */
.yt-thumb {
  height: 150px;
  background-position: center center !important;
}
#mList a {
  color: #000;
  font-size: 12px;
  text-decoration: none !important;
}

.yt-icon {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 30%;
  color: #fff;
}
/* media list title overlay */

#mList a div {
  /* visibility: visible; */
  /* background: rgba(0, 0, 0, 0.8); */
}

/* On hover actions */

#mList a:hover div {
  /* visibility: hidden; */
}

#mList a:hover {
  /* border: 1px solid #f00; */
}

/* === popup media player === */

/* background overlay */

#mPlayer {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 20;
  left: 0;
  top: 0;
}

/* video player */

#mPlayer div {
  position: fixed;
  background: #000;
  width: 560px; /* width of YouTube Player */
  height: 315px; /* height of YouTube Player */
  left: calc(50vw - 280px); /* 280 is .5(560), centers x axis*/
  top: calc(50vh - 157px); /* 157 is .5(315), centers y axis*/
}