/** Basic styling for blocked videos overlay */
.blocked-video__overlay {
  z-index: 20;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-direction: column;
}

.blocked-video__message {
  color: white;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2rem;
  width: 80%;
  margin: 0 auto;
}

.btn.blocked-video__button {
  margin-top: 1rem;
}

@media only screen and (max-width: 78.7em) {
  .hero-video-right .blocked-video__message {
    font-size: 0.8rem;
    line-height: 1rem;
    width: 90%;
  }
}

@media only screen and (max-width: 62.85em) {
  .blocked-video__message {
    font-size: 0.8rem;
    line-height: 1rem;
    width: 90%;
  }

  .blocked-video__button {
    margin-top: 0.6rem;
  }
}

/** Handle https://unity3d.com/pages/butterfly. */
.blocked-overlay--small .blocked-video__message {
  font-size: 0.8rem;
  line-height: 0.9rem;
  width: 100%;
}

.blocked-overlay--small .btn.blocked-video__button {
  margin-top: 0.6rem;
}

@media only screen and (max-width: 62.85em) {
  .blocked-overlay--small .blocked-video__message {
    font-size: 0.7rem;
    line-height: 0.8rem;
  }

  .blocked-overlay--small .btn.blocked-video__button {
    margin-top: 0.6rem;
  }
}