@keyframes dialog-on {
  0% {
    max-height: 0;
    max-width: 0; }
  50% {
    max-height: 0;
    max-width: 100%; }
  100% {
    max-height: 100%;
    max-width: 100%; } }
@keyframes dialog-off {
  0% {
    max-height: 100%;
    max-width: 100%; }
  50% {
    max-height: 0;
    max-width: 100%; }
  100% {
    max-width: 0;
    max-height: 0; } }
@keyframes msg-on {
  0% {
    margin-top: -100vh; }
  100% {
    margin-top: 0; } }
@keyframes search-on {
  0% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes search-off {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-100vh);
    transform: translateY(-100vh); } }
@keyframes label-out {
  0% {
    opacity: 1;
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    opacity: 0;
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  51% {
    padding: 0;
    font-size: 1.2rem;
    height: 2rem;
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  100% {
    padding: 0;
    font-size: 1.2rem;
    height: 2rem;
    opacity: 0.6;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); } }
@keyframes label-in {
  0% {
    padding: 0;
    font-size: 1.2rem;
    height: 2rem;
    opacity: 0.6;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  50% {
    padding: 0;
    font-size: 1.2rem;
    height: 2rem;
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); }
  51% {
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    opacity: 1;
    height: 5rem;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes eq-1 {
  0% {
    width: 3.2rem; }
  33% {
    width: 4rem; }
  66% {
    width: 2rem; }
  100% {
    width: 3.2rem; } }
@keyframes eq-2 {
  0% {
    width: 4rem; }
  50% {
    width: 2rem; }
  100% {
    width: 4rem; } }
@keyframes eq-3 {
  0% {
    width: 2.4rem; }
  33% {
    width: 4rem; }
  66% {
    width: 2rem; }
  100% {
    width: 2.4rem; } }
progress::-webkit-progress-value {
  background: #FFEA00;
  border-radius: 2px; }

progress::-moz-progress-bar {
  border: 1px solid #FFEA00;
  background: #FFEA00; }

input[type=range]::-webkit-slider-thumb {
  background: #FFEA00; }

input[type=range]::-moz-range-thumb {
  border: 1px solid #FFEA00;
  background: #FFEA00; }

.layout-container > header {
  min-height: 100vh;
  pointer-events: none; }
  .layout-container > header .region-navigation,
  .layout-container > header .site-logo {
    pointer-events: auto; }

.region-header .menu--main-second,
.region-header .block-system-breadcrumb-block,
.region-header .block-header-image-block {
  display: none !important; }
.region-header .block-node-title-block {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
  clip: rect(1px, 1px, 1px, 1px); }

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 1.5rem;
  line-height: 1.4; }
  .video-container video {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0;
    width: auto;
    height: auto;
    transform-origin: top right;
    transform: translateY(-8%); }
    .video-container video.fixwidth {
      margin-right: 0 !important;
      width: 100% !important;
      height: auto !important;
      transform: translateY(-8%) !important; }
    .video-container video.fixheight {
      width: auto !important;
      height: 100% !important;
      transform: translateY(0) !important; }
  .video-container .video-controls {
    visibility: hidden;
    left: auto;
    right: 15rem;
    width: auto;
    margin-bottom: 3rem;
    padding: 1rem 0;
    background: none;
    z-index: 5; }
    .video-container .video-controls button {
      color: #fff;
      width: 4rem;
      height: 4rem;
      text-indent: -200vw;
      overflow: hidden; }
    .video-container .video-controls #play {
      background: url("../images/play.svg?v1") no-repeat center center;
      background-size: auto 2rem; }
      .video-container .video-controls #play:hover {
        background: url("../images/play-y.svg") no-repeat center center;
        background-size: auto 2rem; }
      .video-container .video-controls #play[data-title*="Pause"] {
        background: url("../images/pause.svg?v1") no-repeat center center;
        background-size: auto 2rem; }
        .video-container .video-controls #play[data-title*="Pause"]:hover {
          background: url("../images/pause-y.svg") no-repeat center center;
          background-size: auto 2rem; }
    .video-container .video-controls #mute {
      background: url("../images/volume-on.svg?v1") no-repeat center center;
      background-size: auto 2rem; }
      .video-container .video-controls #mute:hover {
        background: url("../images/volume-on-y.svg") no-repeat center center;
        background-size: auto 2rem; }
      .video-container .video-controls #mute.muted {
        background: url("../images/volume-off.svg?v1") no-repeat center center;
        background-size: auto 2rem; }
        .video-container .video-controls #mute.muted:hover {
          background: url("../images/volume-off-y.svg") no-repeat center center;
          background-size: auto 2rem; }
  .video-container .video-progress {
    visibility: hidden;
    position: absolute;
    right: 15rem;
    bottom: 0;
    width: 50%;
    margin-bottom: 3rem;
    z-index: 11; }
    .video-container .video-progress .seek-tooltip {
      white-space: nowrap; }
    .video-container .video-progress .start-date {
      position: absolute;
      left: 0;
      top: 100%;
      padding-left: 1rem;
      padding-top: 0.5rem;
      color: #fff;
      font-size: 1.2rem; }
      .video-container .video-progress .start-date:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        display: inline-block;
        width: 0.6rem;
        height: 1rem;
        border: 1px solid;
        border-right: 0;
        border-top: 0; }
  .video-container .time {
    display: none; }
  .video-container #info-block {
    visibility: hidden;
    position: absolute;
    bottom: 3rem;
    left: 7rem;
    max-width: 40%;
    height: calc(100% - 18rem);
    z-index: 4;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 0;
    pointer-events: none; }
    .video-container #info-block .text,
    .video-container #info-block .datas {
      position: relative;
      border-radius: 5px;
      background-color: rgba(1, 137, 64, 0.7);
      color: #fff;
      text-align: left;
      padding: 2rem;
      pointer-events: auto; }
      .video-container #info-block .text > *,
      .video-container #info-block .datas > * {
        position: relative; }
      .video-container #info-block .text:before,
      .video-container #info-block .datas:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px); }
    .video-container #info-block .text {
      margin-bottom: 1rem;
      width: 100%; }
      .video-container #info-block .text h2 {
        margin: 0;
        font-size: 2.4rem;
        color: #FFEA00; }
        .video-container #info-block .text h2 + p {
          margin-top: 1rem; }
      .video-container #info-block .text *.hide {
        visibility: hidden;
        position: absolute;
        pointer-events: none; }
      .video-container #info-block .text.hide {
        visibility: hidden;
        position: absolute;
        pointer-events: none; }
    .video-container #info-block .datas {
      display: inline-block;
      width: auto;
      max-width: 20rem; }
      .video-container #info-block .datas .date {
        font-weight: bold;
        white-space: nowrap; }
      .video-container #info-block .datas .data {
        margin-bottom: 1rem; }
        .video-container #info-block .datas .data .label {
          font-weight: normal;
          display: block; }
        .video-container #info-block .datas .data .value {
          white-space: nowrap;
          font-weight: bold;
          color: #FFEA00; }
        .video-container #info-block .datas .data:last-child {
          margin-bottom: 0; }
  .video-container #popup-layer {
    position: absolute;
    top: 0;
    left: 0; }
    .video-container #popup-layer .popup {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 4rem;
      height: 2.9rem;
      margin-left: -2rem;
      margin-top: -1.5rem;
      background: url("../images/video-marker.png") no-repeat center center;
      background-size: 100%;
      border-radius: 100%;
      z-index: 3;
      transition: background-size 0.3s; }
      .video-container #popup-layer .popup span {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #018940;
        padding: 5px;
        margin-top: 5px;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%);
        transition: opacity 0.3s, visibility 0.3s, margin 0.3s; }
        .video-container #popup-layer .popup span:before {
          content: "";
          display: inline-block;
          position: absolute;
          top: 0;
          left: 50%;
          margin-left: -5px;
          margin-top: -6px;
          width: 1rem;
          height: 1rem;
          background: #018940;
          border-right: 0;
          border-bottom: 0;
          transform: rotate(45deg); }
      .video-container #popup-layer .popup:hover {
        background-size: 60%;
        z-index: 12; }
        .video-container #popup-layer .popup:hover span {
          opacity: 1;
          visibility: visible;
          margin-top: 10px; }
    .video-container #popup-layer[hidden] {
      display: none; }
  .video-container #intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 5; }
    .video-container #intro iframe {
      width: 100%;
      height: 100%; }
    .video-container #intro .skipbar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 3; }
    .video-container #intro .desc {
      position: absolute;
      top: 0;
      left: 0;
      margin: 1rem;
      padding: 1.5rem;
      background-color: #018940;
      font-size: 1.8rem;
      color: #fff;
      border-radius: 5px; }
    .video-container #intro #skip {
      background-color: rgba(0, 0, 0, 0.5);
      margin: 1rem;
      padding: 2rem;
      width: 36rem; }
      .video-container #intro #skip:hover {
        background: rgba(0, 0, 0, 0.8); }
        .video-container #intro #skip:hover:before {
          display: none; }
    .video-container #intro.closed {
      display: none; }
  .video-container #endscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    font-size: 2rem;
    padding: 2rem 16rem 2rem 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0; }
    .video-container #endscreen .inner {
      background-color: #fff8db;
      border: 1px solid #fff8db;
      width: auto;
      max-height: 100%;
      border-radius: 5px;
      overflow: auto;
      position: relative; }
      .video-container #endscreen .inner > * {
        width: 100%;
        padding: 1rem 2rem; }
    .video-container #endscreen p {
      margin: 1rem 0; }
    .video-container #endscreen .tags {
      font-weight: bold; }
    .video-container #endscreen button {
      background-color: #95C11F;
      margin: 1rem 1rem 1rem 0;
      padding: 2rem; }
      .video-container #endscreen button:hover:before {
        display: none; }
  .video-container.show-video video,
  .video-container.show-video .video-controls,
  .video-container.show-video .video-progress,
  .video-container.show-video #info-block {
    visibility: visible; }
  .video-container.show-endscreen #endscreen {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 12;
    backdrop-filter: blur(2px); }
    .video-container.show-endscreen #endscreen .inner {
      animation: dialog-on 1s; }

.video-text.clone {
  margin-top: -3rem;
  margin-bottom: 5rem; }
  .video-text.clone > *:first-child {
    margin-top: 0; }
  .video-text.clone > *:last-child {
    margin-bottom: 0; }

body[data-pos='P4'] .video-container #info-block, body[data-pos='P5'] .video-container #info-block {
  width: calc(100% - 22rem) !important;
  max-width: none;
  height: auto;
  justify-content: flex-end; }
  body[data-pos='P4'] .video-container #info-block .text, body[data-pos='P5'] .video-container #info-block .text {
    margin-bottom: 0;
    padding-bottom: 0; }
    body[data-pos='P4'] .video-container #info-block .text h2, body[data-pos='P5'] .video-container #info-block .text h2 {
      font-size: 1.8rem; }
      body[data-pos='P4'] .video-container #info-block .text h2.hide, body[data-pos='P5'] .video-container #info-block .text h2.hide {
        visibility: visible;
        position: relative;
        pointer-events: auto; }
    body[data-pos='P4'] .video-container #info-block .text p, body[data-pos='P5'] .video-container #info-block .text p {
      visibility: hidden;
      position: absolute;
      pointer-events: none; }
    body[data-pos='P4'] .video-container #info-block .text.hide, body[data-pos='P5'] .video-container #info-block .text.hide {
      visibility: visible;
      position: static;
      pointer-events: auto; }
  body[data-pos='P4'] .video-container #info-block .datas, body[data-pos='P5'] .video-container #info-block .datas {
    max-width: none;
    width: 100%;
    padding: 1rem 11rem 3rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    body[data-pos='P4'] .video-container #info-block .datas .data, body[data-pos='P5'] .video-container #info-block .datas .data {
      width: auto;
      padding: 0 1rem; }
body[data-pos='P4'] .video-container .video-progress, body[data-pos='P5'] .video-container .video-progress {
  width: calc(100% - 22rem); }
body.touch-device .seek:focus + .seek-tooltip {
  display: block; }

@media screen and (max-width: 1199px) {
  .video-container #info-block {
    left: 3rem; }
  .video-container #endscreen {
    padding-left: 3rem; }

  body[data-pos='P4'] .video-container #info-block, body[data-pos='P5'] .video-container #info-block {
    width: calc(100% - 18rem) !important; }
  body[data-pos='P4'] .video-container .video-progress, body[data-pos='P5'] .video-container .video-progress {
    width: calc(100% - 18rem); } }
@media screen and (max-width: 1023px) {
  .video-container .video {
    transform: translateY(0); }
  .video-container .video-progress {
    margin-bottom: 1.5rem;
    right: 12rem;
    width: calc(100% - 14rem); }
    .video-container .video-progress .start-date {
      display: none; }
  .video-container .video-controls {
    margin-bottom: -1rem;
    right: 0; }
  .video-container #info-block {
    left: 2rem;
    bottom: 4rem;
    height: calc(100% - 15rem); }
    .video-container #info-block .text h2 {
      font-size: 1.8rem; }
  .video-container #intro .desc {
    top: 9rem;
    font-size: 1.4rem; }
  .video-container #intro .skipbar #skip {
    width: auto; }
  .video-container #endscreen {
    padding: 2rem; }

  body[data-pos='P4'] .video-container #info-block, body[data-pos='P5'] .video-container #info-block {
    width: 100% !important;
    max-width: none;
    left: 0;
    bottom: 0;
    padding-bottom: 0; }
    body[data-pos='P4'] .video-container #info-block .text,
    body[data-pos='P4'] .video-container #info-block .text *, body[data-pos='P5'] .video-container #info-block .text,
    body[data-pos='P5'] .video-container #info-block .text * {
      visibility: hidden !important;
      position: absolute !important;
      pointer-events: none !important; }
    body[data-pos='P4'] .video-container #info-block .datas, body[data-pos='P5'] .video-container #info-block .datas {
      max-width: none;
      width: 100%;
      padding: 1rem 11rem 3rem 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      body[data-pos='P4'] .video-container #info-block .datas .data, body[data-pos='P5'] .video-container #info-block .datas .data {
        width: auto;
        padding: 0 1rem; }
  body[data-pos='P4'] .video-container .video-progress, body[data-pos='P5'] .video-container .video-progress {
    width: calc(100% - 14rem); }
    body[data-pos='P4'] .video-container .video-progress .start-date, body[data-pos='P5'] .video-container .video-progress .start-date {
      display: none; }
  body[data-pos='P4'] .video-text.clone, body[data-pos='P5'] .video-text.clone {
    display: block !important; } }
@media screen and (max-width: 1023px) and (orientation: portrait) {
  .video-container:not(.show-video) {
    height: 80vh;
    margin-top: 0; }
    .video-container:not(.show-video) + header {
      min-height: 80vh;
      height: 80vh; } }
@media screen and (max-width: 767px) {
  .video-container #info-block .text h2 {
    font-size: 1.4rem; }

  body[data-pos='P4'] .video-container #info-block .datas .date, body[data-pos='P5'] .video-container #info-block .datas .date {
    width: 100%; } }
@media screen and (max-width: 639px) {
  body[data-pos='P4'] .video-container #info-block .datas, body[data-pos='P5'] .video-container #info-block .datas {
    padding-right: 1rem; } }
@media screen and (max-width: 479px) {
  body[data-pos='P4'] .video-container #info-block .datas .data, body[data-pos='P5'] .video-container #info-block .datas .data {
    width: 50%; } }