:root {
  --text-color: #fff;
  --text-gray-color: #888;
  --background-color: #000;
  --color-pink: #ed83c1;
  --color-gray: #444444;
  --hover-pink: #C44F94;
  --hover-gray: #7F7F7F;

  --plyr-color-main: var(--text-color) !important;
  --plyr-menu-color: var(--text-color);
  --plyr-menu-background: var(--background-color);
  --plyr-menu-radiobutton: var(--color-gray);
  --plyr-video-background: var(--background-color);
  --plyr-control-toggle-checked-background: var(--color-pink);
  --plyr-video-control-background-hover: none;
  --plyr-video-control-color-hover: var(--color-pink);

  --background-gray-color: #21272e;
  --border-gray-color: #444;
}

* {
  font-family: "Roboto", sans-serif;
  color: white;
}

html,
body {
  background-color: #000000;
}

body {
  &.mobile {
    --plyr-video-control-color-hover: var(--plyr-color-main);
  }
}

.container {
  max-width: 1240px;
  padding: 0 20px;
  margin: 0 auto;
}

.container--full-width {
  padding-left: 0;
  padding-right: 0;
}

.header__wrapper {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(25px);
  position: relative;
  z-index: 11;
}
header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  margin-bottom: 0;
}

.header__left {
  display: flex;
  gap: 172px;
  align-items: center;
}
.header__upload {
  cursor: pointer;
  display: flex;
  align-items: self-end;
  gap: 6px;
  color: #ffffff;
  font-size: 16px;
  transition: color ease .3s;

  svg path {
    transition: stroke ease .3s;
  }

  &:hover {
    color: var(--hover-pink);

    svg path {
      stroke: var(--hover-pink);
    }
  }
}

.header__search {
  position: relative;
  max-width: 1200px;
  width: 100%;
}

.header__logo {
  max-height: 38px;
}

.header__search input {
  width: 100%;
  color: rgba(255, 255, 255, 1);
  padding: 13px 48px 13px 20px;
  border-radius: 100px;
  border: 1px solid #21272e;
  background: #21272e;
  transition: background ease .3s;

  &:hover {
    background: #2B333C;
  }
}

.header__search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  z-index: 50;
}

.header__search-result {
  position: absolute;
  z-index: 99;
  top: calc(100% + 8px);
  padding-top: 6px;
  padding-bottom: 6px;

  display: none;
  flex-direction: column;
  border-radius: 20px;
  background-color: #21272e;
  overflow: hidden;
  width: 100%;
}

.header__search-result.show {
  display: flex;
}

.header__search-result-row {
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: all 0.1s ease-in;

  &:hover {
    background-color: #373C42;
  }

  a {
    display: block;
    padding: 8px 16px;
  }
}

.catimage__name {
  color: #fff;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 10px;
}

/** slider START **/
.slider {
  margin-top: 20px;
  margin-bottom: 40px;
}

.slider > .container {
  position: relative;
}

.slider > .container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
  right: 20px;
  background: linear-gradient(to left, #000000, transparent);
}

.slider > .container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
  left: 20px;
  background: linear-gradient(to right, #000000, transparent);
}

.slider .wrapper {
  overflow: hidden;
  padding-left: 66px;
  padding-right: 66px;
}

.slider .items {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.slider .items .item {
  display: inline-block;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid #21272e;
  color: var(--color-pink);
  font-size: 16px;
  font-weight: 400;
  user-select: none;
  transition: border-color ease .3s;

  &:hover {
    border-color: var(--hover-gray);
  }
}

.slider .items .item a {
  display: block;
  line-height: 1;
  padding: 17px 20px;
  white-space: nowrap;
  max-height: 50px;
}

.slider .items .item.active {
  background-color: #21272e;
  color: #ffffff;
}

.slider .next {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(calc(-50%));
  background: #21272e;
  width: 50px;
  height: 50px;
  z-index: 10;

  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider .prev {
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(calc(-50%));
  background: #21272e;
  width: 50px;
  height: 50px;
  z-index: 10;

  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider .prev,
.slider .next {
  transition: background ease .3s;

  &:hover {
    background: var(--hover-pink);
  }
}
/** slider END **/

.video {
  margin-top: 50px;

  &.full-width {
    #plyr_container {
      height: var(--wide-video-height);
    }

    .plyr,
    .plyr video {
      max-height: none;
    }

    .video-control,
    #plyr_container {
      width: var(--wide-video-width);
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: calc(-1 * (((var(--wide-video-width)) / 2)));
      margin-right: calc(-1 * (((var(--wide-video-width)) / 2)));
    }
  }
}
.video__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video__top {
  /*display: flex;*/
  align-items: flex-end;
  gap: 20px;
}
.video__video {
  max-width: 895px;
  max-height: 503px;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}
.video__video-img {
  padding-top: 56.25%;
  width: 100%;
  height: 100%;
  background-size: 400% 400%;
  background-position: 0 -200%;
}

.video__video-play {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--color-pink);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: background ease .3s;

  &:hover {
    background: var(--hover-pink);
  }
}

.video__video-play a svg {
  position: absolute;
  top: 50%;
  translate: -20px -50%;
}

.video__video-play a {
  position: relative;
  padding: 13px 32px 13px 48px;
}

.video__ads {
  max-width: 285px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
.video__ads-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.video__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.video__category {
  a {
    cursor: pointer;
    color: var(--color-pink);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: all ease .3s;

    &:hover {
      color: var(--hover-pink);
      text-decoration: underline;
    }
  }
}
.video__name {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.video__title {
  a {
    color: #fff;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    transition: color ease .3s;

    &:hover {
      color: var(--hover-pink);
    }
  }
}
.video-info {
  display: flex;
  align-items: center;
  gap: 6px;

  .video-info-sub {
    .video-date {
      i {
        margin-right: 6px;
      }
    }
  }
}
.video-info-date {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  opacity: 0.5;
}
.video-info-circle {
  width: 4px;
  height: 4px;
  background: #fff;
  opacity: 0.5;
  border-radius: 50%;
}
.video-info-views {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  opacity: 0.5;
}

.author {
  margin-top: 130px;
}

.author > .container{
  padding-left: 0;
  padding-right: 0;
}

.author__inner {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
}
.author__content {
  display: flex;
  gap: 20px;
  align-items: center;
}
.author__img {
  min-width: min-content;
  min-height: min-content;
}
.author__img .videos__video-div-img {
  background-size: 800% 400%;
  background-position: 7% -200%;
  border-radius: 999px;

  max-width: 285px;
  max-height: 285px;
  min-height: 285px;
  min-width: 285px;
}
.author__img .videos__video-div-img.video-vertical {
  background-size: 800% 400%;
  background-position: 93% -200%;
}
.author__author {
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.author__name {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.author__info-name {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  opacity: 0.5;
  margin-bottom: 12px;
}
.author__info-cirle {
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.5;
}
.author__info-items {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  opacity: 0.5;
  word-break: break-word;
}
.author__ads {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.author__ads>a {
  display: block;
}

.author__ads-img {
  display: block;
  max-width: 590px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.videos {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 40px;
}

.videos__title {
  color: #fff;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-top: 50px;
  margin-bottom: 20px;
}

.videos__video {
  width: calc(25% - 15px);
  max-width: 285px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.videos__video-div {
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.videos__video-div.video-vertical {
  border-radius: 0;
  position: relative;

  a {
    height: 100%;
  }
}

.videos__video-div-img {
  padding-top: 56.25%;
  width: 100%;
  height: 100%;

  background-size: 400% 400%;
  background-position: 0 -200%;
}

.videos__video-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  transition: color ease .3s;

  &:hover {
    color: var(--hover-pink);
  }
}

.videos__video-circle {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.5);
}

.videos__video-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.videos__video-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.videos__video-data {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 300;
}
.videos__video-views {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 300;
}

.videos__video .video-vertical .video-splash {
  width: 42%;
  margin: auto;
}

.videos__video .video-vertical a {
  position: relative;
  display: inline-block;
  width: 100%;
}

.videos__video .video-vertical a .video-splash {
  width: auto;
}

.videos__video .video-vertical a .left {
  position: absolute;
  background: #000;
  width: 29%;
  height: 100%;
  top: 0;
}

.videos__video .video-vertical a .right {
  position: absolute;
  background: #000;
  width: 29%;
  height: 100%;
  top: 0;
  right: 0;
}

.videos__more {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
  margin-top: 40px;
}
.videos__more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 100px;
  border: 1px solid #21272e;
  padding: 16px 20px;

  color: var(--color-pink);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.page-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pagination {
  display: flex;
  justify-content: center;
  padding-top: 60px;
}
.pagination__arrowleft {
  cursor: pointer;
}
.pagination__arrowright {
  cursor: pointer;
}

.pagination__items {
  display: flex;
  gap: 16px;
}

.pagination__item {
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.3);
  border: 1px solid #21272e;
  cursor: pointer;
  background: transparent;
  font-weight: 400;
  width: auto;
  min-width: 50px;
  height: 50px;
  padding: 0 5px;
  text-align: center;
  line-height: 50px;
}

.pagination__item-active {
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
}

.page-item {
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.3);
  border: 1px solid #21272e;
  cursor: pointer;
  background: transparent;
  font-weight: 400;
  width: auto;
  min-width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transition: all ease .3s;

  &:hover {
    color: var(--hover-gray);
    border-color: var(--hover-gray);
  }
}

.page-item .page-link {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0 5px;
}

.page-item.active {
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
  cursor: default;

  a {
    pointer-events: none;
  }
}

.page-link--left,
.page-link--right {
  display: flex;
  justify-content: center;
  align-items: center;

  svg rect {
    transition: fill ease .3s;
  }

  &:hover {
    svg rect {
      fill: var(--hover-pink);
    }
  }
}

.page-link--left {
  margin-right: 16px;
}
.page-link--right {
  margin-left: 16px;
}

.ads {
  display: flex;
  margin: 60px 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.ads--performer {
  display: none;
}

.ads > a {
  display: block;
  width: 100%;
}

.ads__img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.ads__img--mobile {
  display: none;
}

footer {
  padding-top: 40px;
  padding-bottom: 60px;
  display: flex;
  justify-content: space-between;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__logo {
  align-self: self-start;
  max-height: 38px;
}

.footer__left-desc {
  max-width: 285px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 130%;
  font-weight: 300;
}

.footer__right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__right a {
  font-weight: 300;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.5);
  text-decoration-line: underline;
  cursor: pointer;
  transition: color ease .3s;

  &:hover {
    color: var(--hover-pink);
  }
}

.dmca-form-result {
  display: none;
  font-size: 24px;
}

.ajax-loader {
  padding: 20px;
  text-align: center;
  width: 100%;
  opacity: 0.5;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes toploader {
    0% {
        left: 0;
        width: 0;
    }
    50% {
        left: 0;
        width: 100%;
    }
    100% {
        width: 0;
        left: 100%;
    }
}

@keyframes shimmer {
  0%   { background: var(--background-color); }
  50%  { background: var(--background-gray-color); }
  100% { background: var(--background-color); }
}

@keyframes splash-play-x {
  from { background-position-x: 0; }
  to   { background-position-x: -400%; }
}

@keyframes splash-play-y {
  from { background-position-y: 0; }
  to   { background-position-y: -400%; }
}

.video-splash-bg {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
  display: block;
}

.video-splash {
  position: relative;
  border-radius: 3px;
  animation: 0s ease 0s 1 normal none running none;

  &.preload::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--color-pink);
    animation: toploader 1s linear infinite;
  }
}

.video-splash.mobile-video-preview,
.video-splash:hover {
  animation: splash-play-x 1.6s steps(4) infinite, splash-play-y 6.4s steps(4) infinite !important;
}

.video-splash-big img {
  width: 100%;
  opacity: 0.6;
  border-radius: 6px;
  display: block;
  background-size: 100%;
  min-height: 335px;
}

.video-splash-big.video-vertical img {
  margin: auto;
}

#videoUploadModal .loader {
  margin-top: 40px;
  display: none;
}

#videoUploadModal .result {
  display: none;
  padding-top: 50px;
  color: #000;
  font-size: 22px;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid var(--color-pink);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

.legal-text {
  padding: 30px;
  font-size: 16px;
  max-width: 80%;
}

.legal-text h2 {
  padding-bottom: 30px;
  font-size: 28px;
}

.legal-text p {
  padding-bottom: 20px;
  line-height: 1.25rem;
}

.legal-text a {
  color: var(--color-pink);
  transition: all ease .3s;

  &:hover {
    text-decoration: underline;
    color: var(--hover-pink);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 1024px) {
  .header__left {
    gap: 92px;
  }

  .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .video__ads {
    display: none;
  }

  .videos__video {
    width: calc(33.3% - 14px);
  }

  .author {
    margin-top: 30px;
  }

  .author__img .videos__video-div-img {
    max-width: 200px;
    max-height: 200px;
    min-height: 200px;
    min-width: 200px;
  }

  .author__ads {
    display: none;
  }
  .ads--performer {
    display: block;
    margin-bottom: 20px;
  }
}

.video-content-wrapper {
  position: relative;
}

.video-control {
  text-align: right;
  padding-top: 4px;
  height: 30px;
}

.video-control a {
  font-size: 18px;
  text-decoration: none;
  color: var(--text-light-gray-2-color);
  margin-left: 4px;
}

.video-control a:hover {
  color: var(--text-orange-color);
}

#video-loader {
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
}

#video-loader.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid var(--color-pink);
}

#video-unavailable {
  display: none;
  padding: 13px 32px;
}

#plyr_container {
  text-align: center;
  position: relative;
}

#plyr_container video {
  display: none;
  border-radius: 20px;
}

.plyr video{
  max-height: 600px;
}

.plyr {
  border-radius: 6px;
  height: 100%;
  max-height: 600px;
}

.plyr:fullscreen video{
  max-height: 100vh;
}

.plyr:fullscreen{
  max-height: 100vh;
}

.plyr input[type=range][data-plyr=volume] {
  cursor: pointer;

  &:hover {
    &::-webkit-slider-thumb {
      transition: background 0.3s ease;
      -webkit-appearance: none;
      background: var(--color-pink);
    }
    &::-moz-range-thumb {
      transition: background 0.3s ease;
      background: var(--color-pink);
    }
    &::-ms-thumb {
      transition: background 0.3s ease;
      background: var(--color-pink);
    }
  }
}

.plyr input[type=range][data-plyr=seek] {
  -webkit-appearance: none;
  cursor: pointer;
}

.plyr input[type=range][data-plyr=seek]::-webkit-slider-thumb {
  opacity: 0;
}

.plyr {
  @media screen and (max-width: 768px) {
    .plyr--video {
      .plyr__control {
        background: transparent !important;
      }
    }
  }

  .plyr__control:not(.plyr__controls--mobile) {
    &:hover {
      svg {
        transition: fill 0.3s ease;
        fill: var(--plyr-video-control-color-hover);
      }
    }

    &.plyr__control--back,
    &[data-plyr=settings],
    &[data-plyr=speed] {
      &:hover {
        span {
          transition: color 0.3s ease;
          color: var(--plyr-video-control-color-hover);
        }
      }
    }
  }

  .plyr__wide-screen:not(.plyr__controls--mobile) {
    &:hover {
      svg {
        transition: stroke 0.3s ease;
        stroke: var(--plyr-video-control-color-hover);
      }
    }
  }

  .plyr__controls--mobile {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 15px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;

    @media (orientation: landscape) {
      padding-bottom: 30px !important;
      padding-left: 30px !important;
      padding-right: 30px !important;
    }

    .plyr__controls__item {
      .plyr__control {
        background: transparent !important;
      }

      &.plyr__control {
        padding-right: 0 !important;
        background: transparent !important;
      }

      &.plyr__progress__container {
        order: 1;
        flex-basis: 100%;
        margin-left: 0;
        padding-left: 0;
      }

      &.plyr__time--duration {
        margin-right: auto;

        &::before {
          margin-right: 7.5px;
        }
      }

      &.plyr__time--current {
        margin-right: 0 !important;
      }
    }

    .plyr__time+.plyr__time {
      display: inline-block;
      color: #7C7C7C;
    }
  }

  .player-overlay__backward,
  .player-overlay__forward {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    gap: 2px;
    top: 0;
    bottom: 0;
    width: 40%;
    background: rgba(0, 0, 0, 0.3);

    i {
      display: block;
      width: 30px;
      height: 16px;
    }

    span {
      font-size: 12px;
      font-weight: 400;
      color: var(--color-white);
    }

    @media screen and (orientation: portrait) {
      width: 50%;
    }
  }

  .player-overlay__backward {
    left: 0;
    border-bottom-right-radius: 60%;
    border-top-right-radius: 60%;
    margin-top: -10%;
    margin-bottom: -10%;

    i {
      background-image: url("data:image/svg+xml,%3Csvg width='30' height='16' viewBox='0 0 30 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.3' d='M20.9761 7.21913L28.3753 1.29976C29.0301 0.775945 30 1.24212 30 2.08062L30 13.9194C30 14.7579 29.0301 15.2241 28.3753 14.7002L20.9761 8.78087C20.4757 8.38054 20.4757 7.61946 20.9761 7.21913Z' fill='white'/%3E%3Cpath opacity='0.65' d='M10.9761 7.21913L18.3753 1.29976C19.0301 0.775945 20 1.24212 20 2.08062L20 13.9194C20 14.7579 19.0301 15.2241 18.3753 14.7002L10.9761 8.78087C10.4757 8.38054 10.4757 7.61946 10.9761 7.21913Z' fill='white'/%3E%3Cpath d='M0.976087 7.21913L8.37531 1.29976C9.03007 0.775945 10 1.24212 10 2.08062L10 13.9194C10 14.7579 9.03007 15.2241 8.3753 14.7002L0.976086 8.78087C0.47568 8.38054 0.47568 7.61946 0.976087 7.21913Z' fill='white'/%3E%3C/svg%3E");
    }
  }

  .player-overlay__forward {
    right: 0;
    border-bottom-left-radius: 60%;
    border-top-left-radius: 60%;
    margin-top: -10%;
    margin-bottom: -10%;

    i {
      background-image: url("data:image/svg+xml,%3Csvg width='30' height='16' viewBox='0 0 30 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.3' d='M9.02391 7.21913L1.62469 1.29976C0.969932 0.775945 -5.42947e-08 1.24212 -9.0947e-08 2.08062L-6.08435e-07 13.9194C-6.45088e-07 14.7579 0.969932 15.2241 1.6247 14.7002L9.02391 8.78087C9.52432 8.38054 9.52432 7.61946 9.02391 7.21913Z' fill='white'/%3E%3Cpath opacity='0.65' d='M19.0239 7.21913L11.6247 1.29976C10.9699 0.775945 10 1.24212 10 2.08062L10 13.9194C10 14.7579 10.9699 15.2241 11.6247 14.7002L19.0239 8.78087C19.5243 8.38054 19.5243 7.61946 19.0239 7.21913Z' fill='white'/%3E%3Cpath d='M29.0239 7.21913L21.6247 1.29976C20.9699 0.775945 20 1.24212 20 2.08062L20 13.9194C20 14.7579 20.9699 15.2241 21.6247 14.7002L29.0239 8.78087C29.5243 8.38054 29.5243 7.61946 29.0239 7.21913Z' fill='white'/%3E%3C/svg%3E");
    }
  }

  .player-overlay__pause,
  .player-overlay__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    z-index: 2;

    i {
      display: block;
      width: 64px;
      height: 64px;
    }
  }

  .player-overlay__play {
    i {
      background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3_291)'%3E%3Ccircle opacity='0.3' cx='32' cy='32' r='32' fill='black'/%3E%3Cpath d='M40.9333 31.2L27.6 21.2C26.9408 20.7056 26 21.176 26 22L26 42C26 42.824 26.9408 43.2944 27.6 42.8L40.9333 32.8C41.4667 32.4 41.4667 31.6 40.9333 31.2Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3_291'%3E%3Crect width='64' height='64' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    }
  }

  .player-overlay__pause {
    i {
      background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3_257)'%3E%3Ccircle opacity='0.3' cx='32' cy='32' r='32' fill='black'/%3E%3Crect x='23' y='21' width='6' height='22' rx='3' fill='white'/%3E%3Crect x='35' y='21' width='6' height='22' rx='3' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3_257'%3E%3Crect width='64' height='64' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    }
  }
}

.plyr__menu__container .plyr__control[role=menuitemradio]:before {
  background: var(--plyr-menu-radiobutton) !important;
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
  background: var(--color-pink) !important;
}

.plyr__preview {
  background-color: var(--background-color);
}

.plyr__preview-thumb__image-container {
  height: 100px;
}

.plyr__progress__marker {
  width: 4px;
}

.alert-message {
  padding-bottom: 30px;
}

.dmca {
  padding-top: 60px;
  padding-bottom: 60px;
}
.dmca > .container {
  max-width: 825px;
}
.dmca__inner {
  display: flex;
  flex-direction: column;
}
.dmca__title {
  color: #fff;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 30px;
}

.turnholder > div {
  position: relative;
  left: 50%;
  translate: -50% 0;
  display: inline-block;
}

.turnholder {
  width: 100%;
  position: relative;
}

.dmca__form #dmca-form-error {
  width: 100%;
  text-align: center;
}

.dmca__form {
}

.dmca__inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 24px;
}
.dmca__label-input {
  flex-basis: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dmca__label {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.75;
}
.dmca__input {
  border-radius: 100px;
  border: 1px solid #21272e;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.dmca__select {
  max-width: 100%;
  width: 100%;
  content: "";
  appearance: none;
  border-radius: 100px;
  border: 1px solid #21272e;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  background: #000000;
  position: relative;
  cursor: pointer;
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: ' ';
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  border-bottom: 1px solid var(--border-gray-color);
  border-right: 1px solid var(--border-gray-color);
  pointer-events: none;
  width: 20px;
  height: 20px;
  transform: rotateZ(45deg);
  translate: 0 -75%;
}

.dmca__select:focus {
  outline: none;
}
.dmca__select-option {
  padding: 8px;
  background: #21272e;
}
.dmca__label-area {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dmca__area {
  border: 1px solid #21272e;
  background: #000000;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  border-radius: 24px;
}
.dmca__area:focus {
  outline: none;
}
.dmca__label-checkbox {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dmca__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  cursor: pointer;
  border-radius: 2px;
  position: relative;
}
.dmca__checkbox:checked {
  background-color: var(--color-pink);
  border: 1px solid var(--color-pink);
}
.dmca__checkbox:checked::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M5.10497 7.60407L5.08735 7.62169L0.6875 3.22185L2.12018 1.78917L5.10502 4.77402L9.87904 0L11.3117 1.43268L5.12264 7.62175L5.10497 7.60407Z" fill="white"/></svg>');
  position: absolute;
  top: -2px;
  right: 1px;
  font-weight: bold;
}
.dmca__date {
  border-radius: 100px;
  border: 1px solid #21272e;
  padding: 16px 20px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.dmca__btn {
  width: 100%;
}
.btn {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-radius: 100px;
  border: 1px solid #21272e;
  background: var(--color-pink);
  cursor: pointer;
  padding: 16px 30px;
  transition: background ease .3s;

  &:hover {
    background: var(--hover-pink);
  }
}

.air-datepicker {
  font-family: "Roboto", sans-serif !important;
  font-weight: 400 !important;
}
.air-datepicker {
  background: #21272e !important;
  font-size: 14px !important;
  border: none !important;
}
.air-datepicker-body--day-name {
  color: #ffffff !important;
  font-size: 14px !important;
}
.air-datepicker-cell {
  font-size: 14px !important;
}
.air-datepicker-nav--action:hover,
.air-datepicker-nav--title:hover,
.air-datepicker-cell:hover {
  background: #343d47 !important;
}
.-current-:hover {
  color: #ffffff !important;
}
.-selected- {
  background: var(--color-pink) !important;
  color: #21272e !important;
}
.air-datepicker-cell .-month- .-current- {
  background: var(--color-pink) !important;
}

.-selected-:hover {
  background: #cf72a9 !important;
}
.air-datepicker--pointer {
  display: none !important;
}


@media (max-width: 1024px) {
  .dmca {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .dmca .container {
    max-width: 680px;
  }
  .container--full-width {
    padding-left: 0;
    padding-right: 0;
  }
  .video {
    & > .container {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

@media (max-width: 680px) {
  header {
    padding-top: 16px;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
  }
  .header__left {
    width: 100%;
    gap: 16px;
    justify-content: space-between;
  }
  .dmca {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .dmca__inputs {
    gap: 20px;
  }
  .dmca__label-input {
    flex-basis: 100%;
    gap: 6px;
  }

  .dmca__select option {
    max-width: 100%;
  }

  .ads__img--desktop {
    display: none;
  }

  .ads__img--mobile {
    display: block;
  }

  .videos__video {
    width: calc(50% - 10px);
    max-width: initial;
  }

  footer {
    flex-direction: column;
    gap: 30px;
  }

  .catimage__name {
    font-size: 34px;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .header__search-result {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 10px;
  }

  .header__search-result {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.2);
  }

  .header__search-result::-webkit-scrollbar {
    width: 4px;
  }

  .header__search-result::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px;
  }

  .header__search-result::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    border: solid 4px transparent;
    transition: opacity ease .3s;
  }

  .header__search-result::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
    transition: opacity ease .3s;
  }

}

@media (max-width: 480px) {
  .video {
    margin-top: 30px;
  }
  .video__inner {
    gap: 8px;
  }
  .video__top {
    height: 100%;
  }
  .video__video {
    height: auto;
  }
  .video__video-play {
    white-space: nowrap;
    font-size: 14px;
  }

  .video-splash-big img {
    min-height: 135px;
  }

  .video__categories {
    row-gap: 8px;
  }
  .video__title {
    font-size: 24px;
  }
  .videos__title {
    font-size: 24px;
  }

  .categories {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .categories__inner {
    padding-left: 50px;
    gap: 10px;
  }
  .categories > .container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
    right: 0;
    background: linear-gradient(to left, #000000, rgba(0, 0, 0, 0.1));
  }
  .categories > .container::before {
    width: 70px;
  }
  .categories__category a {
    padding: 12px 16px;
  }
  .categories__next {
    width: 35px;
    height: 35px;
  }
  .categories__next > svg {
    width: 8px;
    height: 12px;
  }
  .categories__prev {
    width: 40px;
    height: 40px;
  }
  .categories__prev > svg {
    width: 8px;
    height: 12px;
  }

  .videos {
    justify-content: center;
    row-gap: 20px;
  }
  .videos__video {
    max-width: 460px;
    width: 100%;
  }

  .videos__more-btn {
    width: 100%;
  }

  .author__inner {
    justify-content: center;
  }

  .author__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .author__img .videos__video-div-img {
    max-width: 300px;
    max-height: 300px;
    min-height: 300px;
    min-width: 300px;
  }

  .pagination__arrowleft {
    width: 40px;
    height: 40px;
  }
  .pagination__arrowright {
    width: 40px;
    height: 40px;
  }

  .pagination__item {
    min-width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .slider .wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }

  .slider .next,
  .slider .prev {
    width: 40px;
    height: 40px;
  }

  .slider .items {
    gap: 10px;
  }

  .slider .items .item a {
    font-size: 14px;
    padding: 13px 16px;
    max-height: 40px;
  }
}

.modal.age {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 9999;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
}

.age__inner {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.age__logo {
  width: 299px;
  height: 49px;

  margin-bottom: 40px;
}
.age__subtitle {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  margin-bottom: 20px;
}
.age__btn {
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--color-pink);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease;
}
.age__btn:hover {
  background: var(--hover-pink);
}

@media (max-width: 480px) {
  .age__logo {
    width: 207px;
    height: 34px;

    margin-bottom: 30px;
  }
  .age__subtitle {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin-bottom: 20px;
  }
  .age__btn {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.maintenance {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
}

.maintenance__inner {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.maintenance__logo {
  width: 147px;
  height: 24px;

  margin-bottom: 40px;
}
.maintenance__title {
  color: #fff;
  text-align: center;
  font-family: "Helvetica", "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  margin-bottom: 16px;
}
.maintenance__subtitle {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  margin-bottom: 20px;
}
.maintenance__btn {
  padding: 16px 34px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--color-pink);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease;
}
.maintenance__btn:hover {
  background: var(--hover-pink);
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .container--full-width {
    padding-left: 0;
    padding-right: 0;
  }
  .page-item.dots {
    position: relative;
    margin-right: 58px;
  }
  .page-item.dots:not(:last-child)::after {
    content: '...';
    display: block;
    color: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--background-gray-color);
    border-radius: 50%;
    background-color: transparent;
    width: 50px;
    height: 50px;
    right: -63px;
    position: absolute;
    top: -1px;
  }
  .page-item.hide {
    display: none;
  }
}

@media (max-width: 620px) {
  .page-links {
    gap: 4px;
  }
  .pagination__item {
    font-size: 14px;
    padding: 0 2px;
  }
  .page-item {
    font-size: 14px;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
  }
  .page-item,
  .page-item .page-link {
    min-width: 36px;
    height: 36px;
  }
  .page-item.dots {
    margin-right: 42px;
  }
  .page-item.dots:not(:last-child)::after {
    width: 36px;
    height: 36px;
    right: -42px;
  }
  .page-link--left {
    margin-right: 5px;
  }
  .page-link--right {
    margin-left: 5px;
  }
  .pagination__arrowleft,
  .pagination__arrowright {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 719px) {
  .pagination__item {
    min-width: 34px;
    height: 34px;
    line-height: 34px;
  }
  .pagination__item:nth-of-type(1n + 6) {
    display: none;
  }
}

@media (max-width: 480px) {
  .maintenance__logo {
    margin-bottom: 30px;
  }
  .maintenance__title {
    font-size: 28px;
  }
  .maintenance__subtitle {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
    margin-bottom: 20px;
  }
  .maintenance__btn {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .pagination__arrowleft, .pagination__arrowright {
    width: 28px;
    height: 28px;
  }
  .page-item {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
  }
  .page-item,
  .page-item .page-link {
    min-width: 28px;
    height: 28px;
  }
  .page-item.dots {
    margin-right: 34px;
  }
  .page-item.dots:not(:last-child)::after {
    width: 28px;
    height: 28px;
    right: -34px;
  }
  .page-link--right {
    margin-left: 4px;
  }
  .page-link--left {
    margin-right: 4px;
  }
}

@media (max-width: 340px) {
  .page-links {
    gap: 2px;
  }
}

.page404 {
  .row {
    text-align: center;
    padding-top: 150px;
    padding-bottom: 150px;

    h1 {
      color: var(--text-gray-color);
      font-size: 100px;
      margin-bottom: 10px;
    }

    p {
      & + p {
        margin-top: 30px;

        .age__btn {
          display: inline-block;
        }
      }
    }
  }
}