
#mList {
  /*max-width: 295px;*/
  margin: auto;
}
 @media screen and (orientation: landscape) and (min-width: 801px) {

#mList {
  /*max-width: 600px;*/
}
}


#mList ~ A {
    /*margin: 10px;*/
    width: 100%;
    height: 100%;
    line-height: 155px; /* match height */
    color: #FFF;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-table;
}

/* media list title overlay */


#mList ~ A DIV {
    visibility: visible;
    background: rgba(0, 0, 0, .8);
    max-height: 600px;
    max-width: 400px;
    position: inherit;
}

/* On hover actions */


#mList ~ A:hover DIV { /*visibility: hidden;*/
}

#mList ~ A:hover {
    /*border: 1px solid rgba(0, 0, 0, .8);
        background-image: url('../Image/Play_groen.png');       
        background-image: url('Play_groen.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 25.625% 30.291%;*/
    cursor: pointer;
}

/* === popup media player === */

/* background overlay */

#mPlayer {
  display: none;
  background: rgba(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*/
}
