/* --- */

.player {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.9);

  transition: opacity 0.3s ease-in-out;

  position: fixed;

  z-index: 9999999999;

}

.player__video {

  position: relative;

  top: 50%;

  left: 50%;

  width: auto;

  max-width: 60%;

  background: #000000;

  transform: translate(-50%, -50%);

}

.js--show-video {

  opacity: 1;

}

.video-filler {

  display: block;

  width: 100%;

}

.video-close {

  position: absolute;

  z-index: 0;

  top: 0;

  right: -48px;

  border: none;

  outline: none !important;

  cursor: pointer;

  font-size: 60px;

  color: #ffffff;

  line-height: 0.60;

  background-color: transparent;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);

}

.video-iframe {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.js-video-row1 { width:100%; float:left; margin:2px 0 24px;}



/*Smartphone css*/

@media screen and (max-width: 480px) {

.js-video-row1 { display:block;}

.player__video { max-width: 90%; }

.video-close { top: -40px; right: -5px; }

} 



@media screen and (min-width:481px) and (max-width:600px) {

.js-video-row1 { display:block;}

.player__video { max-width: 90%; }

.video-close { top: -40px; right: -5px; }

}



@media screen and (min-width:601px) and (max-width:767px) {

.js-video-row1 { display:block;}

.player__video { max-width: 90%; }

.video-close { top: -40px; right: -5px; }

}



@media screen and (min-width:768px) and (max-width:900px) {

.player__video { max-width: 90%; }

.video-close { top: -40px; right: -5px; }

}



@media screen and (min-width:901px) and (max-width:1024px) {



}



@media screen and (min-width:1025px) and (max-width:1240px) {

}