*{
	margin:0;
	padding:0;
    box-sizing: border-box;
  }

.hero {
  position: relative;  height: 100vh;  width: 100%;  background: #ccc;}

.hero__overlay {
  position: absolute; z-index: 1;  left: 0;  top: 0; right: 0;  bottom: 0;
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}

.no-background-blend-mode .hero__overlay {
  background: rgba(27, 82, 83, 0.6) !important;}

.hero__overlay {
  position: fixed; z-index: 50; top: 0;  left: -100%; width: 100%; height: 100vh; background: rgb(34, 34, 34, 0.9);
  transition: opacity 300ms linear; opacity: 0;}

.hero__overlay--active {opacity: 1;}

.hero__modal {width: 80%; position: relative; height:60%}
.hero__player{height: 100%; width: 100%;}
.hero__close {
  position: absolute; right: -50px; top: -50px;  z-index: 33;  width: 50px;  height: 50px; text-indent: -9999em;}

.hero__close:before, .hero__close:after {
  content: '';  position: absolute;
  width: 30px;  top: 50%;  left: 50%;  height: 2px;  margin-left: -15px;  background: #fff;  transform: rotate(45deg);}

.hero__close:after {transform: rotate(-45deg); }

  @media (min-width:0px) and (max-width:500px){
    .hero__modal{width: 90%;}
    .hero__close {
      position: absolute; right: 0; left: 0; margin: auto; top: -80px;  z-index: 33;  width: 50px;  height: 50px; text-indent: -9999em;}
    
  }