/* Responsive Youtube */

/*
.video-overlay {
  height: 100%;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.video-expand {
  color: white;
  font-size: 1.125rem;
  line-height: 1em;
  opacity: 0.4;
  position: absolute;
  top: 0.9375rem;
  right: 0.9375rem;
  z-index: 3;
}

.video-expand:hover {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}
*/

.hi {
  position: absolute;
  top: 130px;
  left: 20px;
  z-index: 2;
  /*transform: translate(-50%, -50%);*/

  color: #fff;
  text-shadow: 4px 4px 6px rgba(0,0,0,1);

  font-size: 24px;
  line-height: 26px;

  span {
    color: #ff0;
    cursor: pointer;
    text-decoration: underline;
  }

  em {
    font-style: normal;

    &.hidden {
      display: none;
    }
  }
}

.video-wrapper {
  position: relative;
  top: 10px;
  left: 10px;
  height: 900px;
  /*margin-top: 100px;*/
  z-index: 1;

  width: 98%;
  /*height: 100%;*/

  /*margin: rem-calc(0 0 54.5);*/
  min-height: 31.25rem;
  /*
  position: relative;
  width: 100%;
  margin: rem-calc(0 0 54.5);
  min-height: 31.25rem;
  overflow: hidden;  
*/

}

.tv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #000;

  width: 100%;
  height: 100%;

  overflow: hidden;

  .screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    margin: auto;

    opacity: 0;
    transition: opacity 0.5s;

    &.active {
      opacity: 1;
    }
  }
}

/* End Responsive Youtube */