@charset "UTF-8";
.section_home.home_videos {
  position: relative;
}

.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #000000;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.controls {
  width: 60%;
  position: absolute;
  bottom: 4rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  z-index: 10;
  color: #ffffff;
}

.controls__button {
  cursor: pointer;
  margin-bottom: 0.5rem;
  margin-right: 1.875rem;
  border-radius: 0.8125rem;
  display: flex;
  align-items: center;
  padding: 0.3125rem;
  margin-left: -36px;
}

.toggleButton {
  border: solid 1px #ffffff;
  display: flex;
  align-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 2.5rem;
  font-weight: normal;
  font-style: normal;
}

.icon-volume-mute::before,
.icon-volume-unmute::before {
  font-family: VideoJS;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.2em;
  line-height: 1.67;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.icon-volume-mute::before {
  content: "\f104";
}

.icon-volume-unmute::before {
  content: "\f107";
}

.icon-play::before,
.icon-pause::before,
.icon-replay::before {
  font-family: VideoJS;
  width: 1.75rem;
  height: 1.25rem;
  font-size: 1.4em;
  line-height: 1.67;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.icon-play::before {
  content: "\f101";
}

.icon-pause::before {
  content: "\f103";
}

.icon-replay::before {
  content: "\f116";
}

.toggleButton:hover,
.icon-play:hover::before,
.icon-pause:hover::before,
.icon-replay:hover::before {
  color: #000000;
  border: none;
  background-color: #ffd331;
}

.toggleMuted:hover,
.icon-volume-unmute:hover::before,
.icon-volume-mute:hover::before {
  color: #ffd331;
  background: none;
}

.progress {
  cursor: pointer;
  position: absolute;
  display: flex;
  bottom: -13%;
  width: 100%;
  height: 0.3125rem;
  border-radius: 0.625rem;
  background-color: rgba(0, 0, 0, 0.75);
}

.timeboxblack,
.timeboxwhite {
  position: absolute;
  display: none;
  border-radius: 0.3125rem;
  height: 1.25rem;
  bottom: 0.6875rem;
  font-size: 0.6875rem;
  margin-left: -13px;
  align-items: center;
}

.timeboxblack {
  background-color: #000000;
}

.timeboxwhite {
  margin-left: -23px;
  background-color: #ffffff;
}

.timeboxblack span {
  padding: 0.375rem;
  font-size: 0.6875rem;
  text-align: center;
  color: #ffffff;
}

.timeboxwhite span {
  padding: 0.375rem;
  font-size: 0.6875rem;
  text-align: center;
  color: #000000;
}

.progress__filled {
  cursor: pointer;
  flex-basis: 0%;
  height: 100%;
  background-color: #ffd331;
  border-radius: 0.625rem;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  top: 88%;
  height: 1.25rem;
  width: 30%;
  margin-left: 60%;
}

.swiper-pagination-bullet-active {
  width: 10px !important;
  height: 10px !important;
  background-color: #ffffff !important;
}

.swiper-pagination-bullet {
  width: 90px !important;
  height: 5px !important;
  background-color: #ffffff !important;
  border-radius: 10px !important;
}

.swiper-button-next::after {
  content: "➜";
  color: #000000;
  font-size: 0.875rem;
  line-height: 3.3125rem;
}

.swiper-button-prev::after {
  content: "➜";
  color: #000000;
  rotate: 180deg;
  font-size: 0.875rem;
  line-height: 3.3125rem;
}

@media (min-width: 0) and (max-width: 839.9px) {
  .controls {
    bottom: 119px;
    left: 120px;
  }
  .toggleButton {
    border-radius: 1.4375rem;
    padding: 0.3125rem;
    height: 1.6875rem;
  }
  .controls__button img {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .progress {
    width: 80%;
  }
  .swiper-pagination-bullet {
    width: 42px !important;
    height: 5px !important;
  }
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    top: 80%;
    width: 60%;
    margin-left: 40%;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  .video {
    width: 100%;
    object-fit: cover;
  }
}
@media (min-width: 0) and (max-width: 599.9px) {
  .controls {
    bottom: 3.6875rem;
  }
  .video {
    margin-top: -30px;
  }
}
@media (min-width: 839.9px) and (max-width: 1023.9px) {
  .section_home.home_videos .swiper,
  .section_home.home_videos .swiper-slide,
  .section_home.home_videos .video-container {
    height: 100vh;
    min-height: 100vh;
    max-height: none !important;
  }
  .section_home.home_videos .video-container video,
  .section_home.home_videos .video {
    height: 100vh !important;
    min-height: 100vh;
    max-height: none !important;
    object-fit: cover;
  }
}
@media (min-width: 1023.9px) and (max-width: 1279.9px) {
  .section_home.home_videos .swiper,
  .section_home.home_videos .swiper-slide,
  .section_home.home_videos .video-container {
    height: 100vh;
    min-height: 100vh;
    max-height: none !important;
  }
  .section_home.home_videos .video-container video,
  .section_home.home_videos .video {
    height: 100vh !important;
    min-height: 100vh;
    max-height: none !important;
    object-fit: cover;
  }
  .section_home.home_videos .video-container.video {
    height: 100vh;
    min-height: 100vh;
    max-height: none !important;
  }
}