@font-face {
  font-family: "GT Eesti Pro Text";
  src: url("../font/GTEestiProText-Regular.woff2") format("woff2"),
    url("../font/GTEestiProText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Eesti Pro Text";
  src: url("../font/GTEestiProText-UltraLight.woff2") format("woff2"),
    url("../font/GTEestiProText-UltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "GT Eesti Pro Text";
  font-weight: normal;
}
html,
body {
  position: relative;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  display: block;
  background-color: black;
}
.swiper-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  right: 50px;
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 10px 0px;
  display: block;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0.3;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #fff;
}
/* ============= loading animation =============== */
.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  background: black;
  color: #fff;
  text-transform: uppercase;
  padding: 50px 50px;
  font-size: 30px;
  letter-spacing: 0.3em;
  box-sizing: border-box;
  opacity: 1;
  visibility: visible;
  transition: 0.5s;
}
.loader h3 {
  font-size: 25px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  margin: 0px;
  margin-bottom: 35px;
}
.loader.finish {
  top: -120%;
}
.bar {
  background-color: #000;
  min-width: 300px;
  min-height: 1px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  /* animation: animate 5s ease-out forwards; */
  /* animation-delay: 1s; */
}
.bar::after {
  content: "";
  min-height: 2px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: #fff;
  animation: animate 3s ease-out forwards;
}
.bar::before {
  content: "";
  min-height: 1px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: #fff;
  animation: animate 3s ease-out forwards;
  z-index: 5;
}

@keyframes animate {
  0% {
    min-width: 0%;
  }
  100% {
    min-width: 100%;
  }
}
/* Change all text and icon colors in the player. */
.video-js {
  color: #fff;
}
.vjs-big-play-button {
  border-color: #fff;
}
.video-js .vjs-big-play-button {
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  top: 50%;
  left: 50%;
  border: 0.06666em solid #fff;
  background-color: transparent;
  border-radius: 50%;
  display: none;
}
.video-js .vjs-control-bar {
  background-color: transparent;
  padding: 40px 100px;
}
.video-js .vjs-load-progress {
  background: rgb(255, 255, 255, 0.25);
}
.video-js .vjs-load-progress div {
  background: rgb(255, 255, 255, 0.25);
}
.video-js .vjs-slider {
  background-color: rgba(255, 255, 255, 0.25);
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-size: 20px;
}
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  background-color: rgba(31, 31, 31, 0.26);
}
.video-js .vjs-play-control,
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control,
.video-js .vjs-play-progress:before,
.video-js .vjs-time-control {
  display: none;
}
.vjs-volume-level,
.vjs-play-progress,
.vjs-slider-bar {
  background: #fff;
}
.video-js .vjs-progress-holder {
  height: 2px;
}

.video-js .vjs-volume-control {
  margin-top: -14px;
}
.vjs-icon-volume-high:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
  top: -10px;
  font-size: 14px;
}
.video-js .vjs-time-tooltip {
  background-color: transparent;
  color: #fff;
  font-family: "GT Eesti Pro Text";
  font-weight: 200;
  font-size: 12px;
  position: absolute;
  top: -28px;
  visibility: visible;
}
.video-js .vjs-progress-control:hover .vjs-time-tooltip,
.video-js
  .vjs-progress-control:hover
  .vjs-progress-holder:focus
  .vjs-time-tooltip {
  font-size: 12px;
}
.video-js .vjs-volume-panel {
  display: flex;
  position: relative;
  top: -2px;
  left: 0px;
}
.video-js .vjs-volume-control {
  margin-top: -50px;
  transform: rotate(270deg) translateY(-43px);
  transition: none;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: 4em;
}
.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
.video-js
  .vjs-volume-control:hover
  .vjs-progress-holder:focus
  .vjs-volume-tooltip {
  visibility: hidden;
}
/* .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal,
.vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control {
  transition: visibility 0.1s, opacity 0.1s, height 0s, width 0s, left 0s,
    top 0s;
} */
.vjs-volume-bar.vjs-slider-horizontal {
  height: 2px;
}
.vjs-slider-horizontal .vjs-volume-level {
  height: 1px;
}
.vjs-slider-horizontal .vjs-volume-level:before {
  top: -0.5em;
  right: -0.5em;
}
.video-js .vjs-volume-level:before {
  font-size: 7px;
}
.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: hidden;
  opacity: 0;
  width: 5em;
  height: 3em;
  margin-right: 0px;
}
/* ============= Custom styles =============== */
.owner__name {
  position: absolute;
  left: 50px;
  top: 50px;
  color: #fff;
  z-index: 10;
  margin: 0px;
  font-size: 25px;
}
.modal__conatiner {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  transition: 500ms;
}
.modal__conatiner.modal__open {
  transition: 1200ms;
  background: rgba(0, 0, 0, 1);
  z-index: 20;
  opacity: 1;
  visibility: visible;
}
.modal__box {
  width: 100%;
  height: 100vh;
}
.video-js {
  width: 100%;
  height: 100vh;
}

.modal__box iframe {
  width: 100%;
  height: 100%;
}
.modal__box .modal__close {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}
.modal__box .modal__close img {
  width: 24px;
}
footer {
  position: absolute;
  left: 50px;
  bottom: 50px;
  color: #fff;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 15px;
}
footer a,
footer span {
  text-decoration: none;
  color: #fff;
  font-weight: 200;
  font-size: 16px;
  transition: 100ms;
}
footer a:hover {
  opacity: 0.5;
}
footer span {
  margin-top: -7px;
}
/* ========= For mobile ========= */
@media only screen and (max-width: 750px) {
  .swiper-pagination-vertical.swiper-pagination-bullets,
  .swiper-vertical > .swiper-pagination-bullets {
    right: 25px;
  }
  .swiper-pagination-vertical.swiper-pagination-bullets
    .swiper-pagination-bullet,
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0px;
    display: block;
  }
  .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
  }
  .modal__conatiner {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-js .vjs-volume-panel {
    left: 0px;
    width: 25px;
  }
  .video-js .vjs-mute-control {
    width: 30px;
  }
  .video-js .vjs-control-bar {
    background-color: transparent;
    padding: 0px 5px;
    bottom: 70px;
  }
  .video-js .vjs-progress-holder {
    height: 1px;
  }
  .video-js .vjs-volume-control {
    margin-top: -32px;
  }
  .vjs-icon-volume-high:before,
  .video-js .vjs-mute-control .vjs-icon-placeholder:before {
    top: 5px;
    font-size: 14px;
  }
  .video-js .vjs-time-control {
    font-size: 12px;
    letter-spacing: 0px;
    margin-top: 7px;
  }
  .loader {
    padding: 25px;
  }
  .loader h3 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  .owner__name {
    left: 25px;
    top: 25px;
    font-size: 22px;
  }
  .modal__box {
    width: 100%;
    height: auto;
  }
  .modal__box .modal__close {
    top: 15px;
    right: 12px;
  }
  .modal__box .modal__close img {
    width: 18px;
  }
  .video-js {
    width: 100%;
    height: 100vh;
    aspect-ratio: 1/1;
  }
  footer {
    left: 25px;
    bottom: 25px;
    z-index: 10;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  footer a,
  footer span {
    font-size: 13px;
  }
  footer span {
    display: none;
  }
}