@import url(variables.css);
@import url(animation.css);
@import url(init.css);
@import url(./components/nav.css);
@import url(./components/footer.css);
@import url(./components/locale-selector.css);

@media screen and (min-width: 0px) {
  main { 
    margin-top: var(--nav-height); 
  }
  .visually-hidden { 
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0 0 99.9% 99.9%);
    clip-path: inset(0 0 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
  }

  #video-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background: rgba(0,0,0,.7);
    opacity: 0;
    visibility: hidden;
    transition: all .35s;
    display: flex;
    justify-content: center;
    align-items: center
  }

  #video-overlay.active {
    opacity: 1;
    visibility: visible;
    z-index: 5
  }

  #video-popup .video {
    width: 100vw;
    height: 56.25vw
  }

  #video-popup .video iframe {
    width: 100%;
    height: 100%
  }

  #video-popup .video-error {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 var(--page-padding);
    font-size: 1.875rem;
    line-height: 2.5rem;
    font-weight: 700;
    color: #fff;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: all .35s;
    transition-delay: .25s;
    text-align: center
  }

  #video-popup .video-error.active {
    height: auto;
    visibility: visible;
    opacity: 1
  }

  .close-video {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    opacity: 0;
    visibility: hidden;
    transition: all .35s;
    transition-delay: .25s;
    cursor: pointer
  }

  #video-overlay.active .close-video {
    opacity: 1;
    visibility: visible
  }

  .close-video div {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff;
    top: 50%
  }

  .close-video div:first-child {
    transform: rotate(45deg)
  }

  .close-video div:last-child {
    transform: rotate(-45deg)
  }

  .popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--default-transition);
    visibility: hidden;
    opacity: 0;
  }
  .popup.active {
    z-index: 5;
    visibility: visible;
    opacity: 1;
  }

  .popup .popup-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    z-index: 0;
  }
  .popup .popup-wrapper {
    width: 100%;
    margin: 0 var(--page-padding);
    display: none;
    padding: 28px;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-sizing: border-box;
  }
  .popup .popup-wrapper.active {
    display: block;
    z-index: 1;
  }
  .popup .popup-wrapper .popup-top {
    margin-bottom: 20px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }
  .popup .popup-wrapper .popup-top .title {
    font-size: var(--font-body-big);
    line-height: var(--font-body-big-line-height);
    font-weight: 700;
  }
  .popup .popup-wrapper .close-popup {
    position: relative;
    width: 32px;
    height: 32px;
    background-color: var(--color-pearl);
    border-radius: 50%;
    cursor: pointer;
  }
  .popup .popup-wrapper .close-popup div {
    position: absolute;
    left: 8px;
    top: 48%;
    width: 15px;
    height: 2px;
    background-color: var(--color-peppercorn);
  }
  .popup .popup-wrapper .close-popup div:first-child {
    transform: rotate(45deg);
  }
  .popup .popup-wrapper .close-popup div:last-child {
    transform: rotate(-45deg);
  }

  .nl-video {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .nl-video video {
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .nl-video .nl-video-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 0;
    cursor: pointer;
    width: 40px;
  }
  .nl-video .nl-video-btn .replay,
  .nl-video .nl-video-btn.playing .replay,
  .nl-video .nl-video-btn.finished .play,
  .nl-video .nl-video-btn.playing .play,
  .nl-video .nl-video-btn .pause {
    display: none;
  }
  .nl-video .nl-video-btn.finished .replay,
  .nl-video .nl-video-btn .play,
  .nl-video .nl-video-btn.playing .pause {
    display: block;
  }
}


@media screen and (min-width: 768px) {
  #video-popup .video {
    margin: 0 50px;
    width: calc(100vw - 100px)
  }

  .close-video {
      top: 50px;
      right: var(--page-padding)
  }

  .popup .popup-wrapper {
    width: 375px;
    margin: 0;
  }
}

@media screen and (min-width: 1280px) {
  #video-popup .video {
      margin: 0 15vw;
      width: 70vw;
      height: 39.375vw
  }
  
  .nl-video .nl-video-btn {
    right: 16px;
    bottom: 16px;
  }
}

@media screen and (min-width: 1920px) {
  #video-popup .video {
    margin: 0 auto;
    width: var(--nl-width);
    height: 33.75vw
  }
}