@CHARSET "UTF-8";

.h5p-interactive-video-bubble {
  position: absolute;
  color: #333;
  z-index: 1;
  margin-top: 0.45em;
  min-width: 1em;
  font-size:16px;
  transition: transform 0.5s ease-out 0.5s, opacity 0s ease-out 0.5s;
  }
.h5p-interactive-video-bubble p {
  margin: 0.75em 0;
}
.h5p-interactive-video-bubble p:first-child {
  margin-top: 0.25em;
}
.h5p-interactive-video-bubble p:last-child {
  margin-bottom: 0.25em;
}
.h5p-interactive-video-bubble.h5p-interactive-video-bubble-active {
  transform: translateY(-9px);
  opacity: 1;
}
.h5p-interactive-video-bubble.h5p-interactive-video-bubble-inactive {
  transition: 0s;
  opacity: 0;
  visibility: hidden;
}
.h5p-interactive-video-bubble-inner {
  background: #fbfbfb;
  box-shadow: 0.125em 0.125em 0.417em 0.042em rgba(0,0,0,0.20);
  border-radius: 0.25em;
  padding: 0.25em 0.75em;
  text-align: center;
  position: relative;
  word-wrap: break-word; /* Long words have to break */
  font-size: 0.750em;
  line-height: 1.5em;
  height: 1.5em;
  color: #484848;
}


.h5p-interactive-video-bubble-inner-tail,
.h5p-interactive-video-bubble-tail {
  position: absolute;
  /* Setting these in pixels is intentional. We use it when calculating placement of bubble */
  width: 12px;
  height: 12px;
  background: #fbfbfb;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -1;
}
.h5p-interactive-video-bubble-tail {
  box-shadow: 0.125em 0.125em 0.417em 0.042em rgba(0,0,0,0.20);
}

/* Endscreen Bubble */
.h5p-interactive-video-bubble-endscreen {
  position: absolute;
  color: #fbfbfb;
  min-width: 1em;
  width: calc(100% - 1em);
  height: calc((100% - 36px) - 1em); /* 36px = controls height */
  top: 0.5em;
  bottom: 0;
  left: 0.5em;
  transition: top ease-out 0.25s, font ease-out 0.3s;
}
.h5p-interactive-video-bubble-endscreen p {
  margin: 0.75em 0;
}
.h5p-interactive-video-bubble-endscreen p:first-child {
  margin-top: 0.25em;
}
.h5p-interactive-video-bubble-endscreen p:last-child {
  margin-bottom: 0.25em;
}
.h5p-interactive-video-bubble-endscreen.h5p-interactive-video-bubble-endscreen-active {
  z-index: 1;
  opacity: 1;
  display: inherit;
  top: 0.5em;
}
.h5p-interactive-video-bubble-endscreen.h5p-interactive-video-bubble-endscreen-preparing {
  display: hidden;
  opacity: 1;
  top: 100%;
}
.h5p-interactive-video-bubble-endscreen.h5p-interactive-video-bubble-endscreen-inactive {
  transition: 0s;
  opacity: 0;
  display: none;
}

/* Mobile and fullscreen - use the complete screen */
.h5p-interactive-video-bubble-endscreen.mobile-fullscreen {
  font-size: 20px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.h5p-interactive-video-bubble-endscreen.mobile-fullscreen .h5p-interactive-video-bubble-endscreen-inner {
  border-radius: 0;
}

.h5p-interactive-video-bubble-endscreen-inner {
  background: #000000;
  /* box-shadow: 0 0 0.5em #2c2c2c; */
  border-radius: 0.25em;
  text-align: center;
  position: relative;
  word-wrap: break-word; /* Long words have to break */
  height: 100%;
}
.h5p-interactive-video-bubble-endscreen-inner-tail,
.h5p-interactive-video-bubble-endscreen-tail {
  position: absolute;
  /* Setting these in pixels is intentional. We use it when calculating placement of bubble */
  width: 12px;
  height: 12px;
  background: #000000;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -1;
  transition: left ease-out 0.25s;
}
.h5p-interactive-video-bubble-endscreen-text {
  height: 100%;
}