html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

:root {
    --font-general: "Rubik", sans-serif;
    --color-main-bg: #272d35;
    --color-dark-gray-bg: #dfe2e7;
    --color-light-gray-bg: #f0f3f6;
    --color-dark-blue-bg: #0d131d;
    --color-accent: #33c166;
    --color-font-light: #5f6772;
    --color-font-dark: #272d35;
    --fz-text-df: 1.2rem;
    --lh-text-df: 162%
}

* {
    box-sizing: border-box
}

html {
    font-size: 62.5%;
    font-family: var(--font-general)
}

body {
    background-color: var(--color-main-bg)
}

main {
    overflow: hidden;
    scroll-behavior: smooth
}

ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0
}

a {
    text-decoration: none;
    transition: .3s ease-in-out
}

a::before, a::after {
    transition: .3s ease-in-out
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 400
}

button {
    padding: 0
}

img {
    max-width: 100%
}

.text-center {
    text-align: center
}

.responsive-img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.scroll-stoped {
    overflow: hidden
}

.header {
    display: flex;
    align-items: center;
    padding: 2rem 2rem 1.5rem;
    grid-gap: 4rem
}

.header__logo-link {
    display: flex;
    height: 5.3rem
}

.header__logo {
    width: 100%;
    height: 100%
}

.header__logo-link svg {
    width: 100%
}

.header__search-form {
    position: relative;
    margin-left: auto;
    width: 50vw
}

.header__lng {
    display: flex;
    align-items: center;
    grid-gap: 1rem;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer
}

.header__lng-flag {
    width: 3rem;
    height: 3rem
}

.header__lng-arrow {
    width: .9rem;
    height: .6rem
}

.header__search-opn, .header__hamburger, .header__search-form-close-btn {
    display: none
}

@media screen and (max-width: 1399px) {
    .header {
        padding: 1.7rem 2rem 1.5rem
    }

    .header__search-form {
        width: 44.2rem
    }
}

@media screen and (max-width: 959px) {
    .header {
        padding: 2.8rem 1.8rem .6rem;
        position: relative;
        grid-gap: 2rem;
        margin-top: 1rem
    }

    .header__logo-link {
        height: 4.3rem
    }

    .header__search-form {
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        padding: .5rem;
        background: #393e46;
        transform: translateY(-100%);
        transition: .3s ease-in-out
    }

    .header__search-form--active {
        transform: translateY(0)
    }

    .header__search-form-form {
        width: calc(100% - 2.7rem)
    }

    .header__search-form-close-btn {
        width: 2.7rem;
        height: 2.7rem;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .header__search-form-close-btn svg {
        width: .9rem;
        height: .9rem
    }

    .header__search-opn, .header__hamburger, .header__search-form-close-btn {
        display: block;
        background: transparent;
        border: 0;
        outline: 0
    }

    .header__search-opn svg:not(.header__close-search-btn-icon), .header__hamburger svg:not(.header__close-search-btn-icon), .header__search-form-close-btn svg:not(.header__close-search-btn-icon) {
        width: 100%;
        height: 100%
    }

    .header__search-opn {
        margin-left: auto;
        width: 2.1rem;
        height: 2rem
    }

    .header__hamburger {
        width: 2.9rem;
        height: 2rem
    }

    .header__lng {
        margin-left: .5rem
    }

    [dir="rtl"] .header__search-opn {
        margin-left: 0;
        margin-right: auto
    }

    [dir="rtl"] .header__lng {
        margin-left: 0;
        margin-right: .5rem
    }
}

@media screen and (max-width: 639px) {
    .header {
        padding: 2.8rem .5rem .5rem;
        grid-gap: 1.5rem
    }

    .header__logo-link {
        height: 2.7rem
    }

    .header__search-opn {
        width: 1.5rem;
        height: 1.5rem
    }

    .header__lng {
        grid-gap: .4rem;
        margin-left: 1rem
    }

    .header__lng-flag {
        width: 2.3rem;
        height: 2.3rem
    }

    .header__hamburger {
        width: 2.2rem;
        height: 1.5rem
    }
}

.nav {
    padding: 1.4rem 2rem;
    background: var(--color-light-gray-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    border-top-left-radius: 1.1rem;
    border-top-right-radius: 1.1rem;
    position: relative;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 4rem
}

.nav__item-title {
    display: none
}

.nav__item--best {
    display: none
}

.nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 4rem
}

.nav__link {
    display: flex;
    align-items: center;
    grid-gap: 1.5rem;
    padding: .5rem 1rem;
    height: 4.5rem;
    background: transparent;
    border-radius: .4rem;
    transition: .3s ease-in-out
}

.nav__link:hover, .nav__link.active {
    background: var(--color-dark-gray-bg)
}

.nav__link:hover span, .nav__link.active span {
    color: #272d35
}

.nav__link:hover svg, .nav__link.active svg {
    fill: #272d35
}

.nav__link-icon {
    fill: var(--color-font-light);
    transition: .3s ease-in-out
}

.nav__link-icon--nav-new {
    width: 2rem;
    height: 2.3rem
}

.nav__link-icon--nav-cat {
    width: 2.4rem;
    height: 2rem
}

.nav__link-icon--nav-popular {
    width: 2rem;
    height: 2.4rem
}

.nav__link-icon--nav-best {
    width: 2.3rem;
    height: 2.2rem
}

.nav__link-icon--nav-pornstars {
    width: 2.6rem;
    height: 2rem
}

.nav__link-icon--nav-chanels {
    width: 2.8rem;
    height: 2.2rem
}

.nav__link-icon--like {
    width: 2.4rem;
    height: 2.3rem
}

.nav__link-icon--nav-watch-later {
    width: 2.1rem;
    height: 2.1rem
}

.nav__link-icon--nav-history {
    width: 2.3rem;
    height: 2rem
}

.nav__link-title {
    font-size: 1.5rem;
    color: var(--color-font-light);
    white-space: nowrap;
    transition: .3s ease -in-out
}

@media screen and (max-width: 1639px) {
    .nav {
        grid-gap: 1.5rem
    }

    .nav__list {
        grid-gap: 1.5rem
    }

    .nav__link {
        grid-gap: 1rem
    }
}

@media screen and (max-width: 1399px) {
    .nav {
        padding: 1.2rem 2rem .5rem;
        grid-gap: .5rem
    }

    .nav__list {
        grid-gap: .5rem
    }

    .nav__link {
        flex-direction: column;
        justify-content: center;
        height: auto;
        grid-gap: .6rem;
        padding: .5rem .7rem
    }

    .nav__link-icon-wr {
        height: 2.8rem
    }

    .nav__link-title {
        white-space: nowrap
    }
}

@media screen and (max-width: 959px) {
    .nav {
        position: absolute;
        left: 0;
        top: 6rem;
        width: 100%;
        height: calc(100% - 6rem);
        padding: 3.2rem 2.3rem;
        background: #21262d;
        border-radius: 0;
        opacity: 0;
        visibility: hidden;
        transition: .3s ease-in-out;
        display: block
    }

    .nav__item-title {
        display: block
    }

    .nav__item-title {
        padding-top: 2rem;
        margin-top: 2rem;
        margin-bottom: .7rem;
        min-width: 23rem;
        position: relative;
        color: #f0f3f6;
        opacity: .5;
        padding-left: .7rem
    }

    .nav__item-title::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        border-top: .1rem solid #f0f3f6;
        opacity: .1
    }

    .nav__list {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        min-width: 23rem
    }

    .nav__item--best {
        display: block
    }

    .nav__link {
        flex-direction: row;
        grid-gap: 2.4rem
    }

    .nav__link:hover {
        background: transparent
    }

    .nav__link:hover svg {
        fill: var(--color-light-gray-bg)
    }

    .nav__link:hover span {
        color: var(--color-light-gray-bg)
    }

    .nav__link-icon-wr {
        width: 2.8rem;
        height: auto;
        text-align: center
    }

    .nav__link-icon {
        fill: var(--color-light-gray-bg)
    }

    .nav__link-title {
        color: var(--color-light-gray-bg)
    }

    .nav--active {
        opacity: 1;
        visibility: visible
    }
}

@media screen and (max-width: 639px) {
    .nav {
        height: calc(100% - 4.1rem)
    }
}

.footer {
    background: var(--color-dark-blue-bg)
}

.footer__menu {
    margin: auto;
    width: calc(100% - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 6rem;
    padding: 3.5rem 2rem 2.6rem;
    border-bottom: 1px solid #272d35
}

.footer__menu-link {
    color: var(--color-dark-gray-bg);
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none
}

.footer__menu-link:hover {
    opacity: .7
}

.footer__privacy {
    margin: auto;
    padding: 4.5rem 0;
    width: min(100%, 124rem);
    text-align: center;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 125%;
    color: var(--color-dark-gray-bg)
}

.footer__privacy p {
    margin: 0
}

.footer__privacy p:not(:first-child) {
    margin-top: 1.5rem
}

@media screen and (max-width: 1399px) {
    .footer__privacy {
        padding: 3rem 2rem
    }
}

@media screen and (max-width: 959px) {
    .footer__menu {
        grid-gap: 1.5rem 2.2rem
    }
}

@media screen and (max-width: 639px) {
    .footer__menu {
        flex-wrap: wrap;
        padding: 1.5rem
    }

    .footer__privacy {
        padding: 2.7rem 2rem 2rem;
        font-size: 1.25rem
    }
}

.lng-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 45, 53, 0.88);
    z-index: 5;
    opacity: 0;
    transition: .3s ease-in-out;
    overflow: auto
}

.lng-modal__close-btn {
    position: absolute;
    top: 0;
    right: -5.6rem;
    width: 2.6rem;
    height: 2.6rem;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: .3s ease-in-out
}

.lng-modal__close-btn svg {
    width: 100%;
    height: 100%;
    fill: #f0f3f6
}

.lng-modal__close-btn:hover {
    opacity: .7
}

.lng-modal__wr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 2rem
}

.lng-modal__inner {
    position: relative;
    background: var(--color-dark-gray-bg);
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
    width: 130rem
}

.lng-modal__list {
    column-count: 5;
    grid-gap: 6rem;
    padding: 6rem 10rem 4rem
}

.lng-modal__item-link {
    display: flex;
    align-items: center;
    grid-gap: 1rem;
    padding-bottom: 2rem
}

.lng-modal__item-flag {
    width: 3rem;
    height: 3rem
}

.lng-modal__item-name {
    color: var(--color-font-light);
    font-weight: 500;
    font-size: 1.5rem;
    white-space: nowrap;
    transition: .3s ease-in-out
}

.lng-modal__item-link:hover .lng-modal__item-name {
    color: var(--color-accent)
}

.lng-modal--active {
    display: block;
    opacity: 1
}

[dir="rtl"] .lng-modal__close-btn {
    left: -5.6rem;
    right: auto
}

@media screen and (max-width: 1399px) {
    .lng-modal__list {
        padding: 5rem 2rem 4.5rem;
        column-count: 3
    }

    .lng-modal__item:not(:first-child) {
        margin-top: 2rem
    }

    .lng-modal__item-link {
        padding-bottom: 0
    }

    .lng-modal__inner {
        width: 80rem
    }
}

@media screen and (max-width: 959px) {
    .lng-modal__list {
        padding: 3rem 2rem 1rem;
        column-count: 2
    }

    .lng-modal__inner {
        width: 50rem
    }
}

@media screen and (max-width: 639px) {
    .lng-modal__list {
        column-count: 1
    }

    .lng-modal__inner {
        width: 28rem
    }

    .lng-modal__item:not(:first-child) {
        margin-top: 1.5rem
    }

    .lng-modal__close-btn {
        top: 1rem;
        right: 1.3rem;
        width: 1.8rem;
        height: 1.8rem
    }

    .lng-modal__close-btn svg {
        fill: #272d35
    }

    [dir="rtl"] .lng-modal__close-btn {
        right: auto;
        left: 1.3rem
    }
}

.scroll-top {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    background: rgba(13, 19, 29, 0.8);
    border: 1px solid #272d35;
    border-radius: .3rem;
    transition: .3s ease-in-out;
    width: 6rem;
    height: 9.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden
}

.scroll-top svg {
    width: 1.9rem;
    height: 3rem
}

.scroll-top:hover {
    background: #0d131d
}

.scroll-top--active {
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 639px) {
    .scroll-top {
        width: 4.7rem;
        height: 7.1rem;
        right: 2rem
    }

    .scroll-top svg {
        width: 1.5rem;
        height: 2.4rem
    }
}

.container {
    width: min(100vw - 2rem, 164rem);
    margin-inline: auto;
    font-size: var(--fz-text-df);
    position: relative
}

@media screen and (max-width: 639px) {
    .container {
        width: 100%
    }
}

.page__main {
    background: #dfe2e7;
    padding: 3rem 2rem 10rem;
    font-size: 1.5rem
}

.page__main--content h1 {
    margin: 0 0 3rem
}

.page__main--content h2, .page__main--content h3 {
    margin: 2rem 0 0
}

.page__main--content h4, .page__main--content h5, .page__main--content h6 {
    margin: 1.5rem 0 0
}

.page__main--content ul {
    margin: 1.5rem 0;
    padding-left: 2rem
}

.page__main--content ul, .page__main--content li {
    list-style-type: disc
}

.page__text-categories {
    margin-top: 3rem
}

.page__popular-search {
    margin-top: 7rem
}

@media screen and (max-width: 1399px) {
    .page__main {
        padding: 2rem 2rem 8rem
    }

    .page__popular-search {
        margin-top: 5rem
    }
}

@media screen and (max-width: 959px) {
    .page__main {
        padding: 1.5rem 2rem 6rem
    }
}

@media screen and (max-width: 639px) {
    .page__main {
        padding: .8rem .5rem 6rem
    }

    .page__popular-search {
        margin-top: 3rem
    }
}

.search-form__inner {
    position: relative
}

.search-form__field {
    width: 100%;
    padding: 1.6rem 7.8rem 1.7rem 2rem;
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 121%;
    color: rgba(223, 226, 231, 0.6);
    background: var(--color-dark-blue-bg);
    border-radius: 10rem;
    border: 0;
    outline: 0
}

.search-form__field::-webkit-input-placeholder {
    transition: .3s ease-in-out
}

.search-form__field:-moz-placeholder {
    transition: .3s ease-in-out
}

.search-form__field::-moz-placeholder {
    transition: .3s ease-in-out
}

.search-form__field:-ms-input-placeholder {
    transition: .3s ease-in-out
}

.search-form__field:focus {
    outline: 3px solid rgba(240, 243, 246, 0.2);
    box-shadow: none
}

.search-form__field:focus::-webkit-input-placeholder {
    opacity: 0
}

.search-form__field:focus:-moz-placeholder {
    opacity: 0
}

.search-form__field:focus::-moz-placeholder {
    opacity: 0
}

.search-form__field:focus:-ms-input-placeholder {
    opacity: 0
}

.search-form__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
    width: 5.8rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4.2rem;
    border: 0
}

.search-form__button-icon {
    width: 1.8rem;
    height: 1.8rem
}

[dir="rtl"] .search-form__field {
    padding: 1.6rem 2rem 1.7rem 7.8rem
}

[dir="rtl"] .search-form__button {
    right: auto;
    left: 1rem
}

@media screen and (max-width: 639px) {
    .search-form__field {
        /*display: .4rem;*/
        border-radius: 0;
        font-size: 1rem;
        padding: .9rem 4.5rem .9rem 1rem
    }

    .search-form__field[type="search"] {
        -webkit-appearance: none;
        -webkit-border-radius: .4rem
    }

    .search-form__button {
        width: 4.1rem;
        height: 2.4rem;
        border-radius: .3rem
    }

    .search-form__button-icon {
        width: 1.4rem;
        height: 1.4rem
    }

    [dir="rtl"] .search-form__field {
        padding: .9rem 1rem .9rem 4.5rem
    }
}

.btn {
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: .3s ease-in-out;
    text-align: center;
    padding: unset
}

.btn:hover {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15)
}

.btn--color_accent {
    background: var(--color-accent)
}

.grid {
    display: grid
}

.grid__cols--full_5 {
    grid-template-columns:repeat(5, 1fr)
}

.grid__gap--full_1 {
    grid-gap: 1rem
}

@media screen and (max-width: 1399px) {
    .grid__cols--l_3 {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media screen and (max-width: 959px) {
    .grid__cols--m_2 {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media screen and (max-width: 639px) {
    .grid__gap--s_05 {
        grid-gap: .5rem
    }
}

.section-title__title {
    color: var(--color-font-dark);
    font-weight: 700;
    font-size: 3.3rem;
    line-height: 118.18%;
    text-transform: capitalize
}

.section-title--count {
    display: inline-block
}

.section-title--count .section-title__title-wr {
    padding-right: 1rem
}

.section-title--count .section-title__title {
    display: inline;
    vertical-align: middle;
    white-space: normal;
    overflow: visible
}

.section-title--count .section-title__line {
    height: 1.7rem;
    width: .1rem;
    background: var(--color-font-light)
}

.section-title--count .section-title__count-wr {
    padding-left: 1rem;
    font-size: 1.7rem;
    color: var(--color-font-light);
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap
}

.section-title--count .section-title__count {
    margin-top: .4rem;
    margin-left: 1rem;
    border-left: .1rem solid var(--color-font-light);
    display: inline;
    padding-left: 1rem;
    font-size: 1.7rem;
    color: var(--color-font-light);
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap
}

.section-title--alph {
    display: flex;
    align-items: center;
    grid-gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #c7cedb
}

.section-title--alph .section-title__title-wr {
    position: relative
}

.section-title--alph .section-title__title {
    display: block;
    position: relative;
    white-space: nowrap
}

.section-title--alph .section-title__title:not(.section-title__item--active) {
    color: var(--color-font-light)
}

.section-title--alph .section-title__item {
    position: relative;
    color: var(--color-font-light);
    transition: .3s ease-in-out
}

.section-title--alph .section-title__item::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #33c166;
    transition: .3s ease-in-out;
    opacity: 0;
    bottom: -1.6rem
}

.section-title--alph .section-title__item:hover {
    color: var(--color-accent)
}

.section-title--alph .section-title__item:not(.section-title__title) {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.8rem
}

.section-title--alph .section-title__item:not(.section-title__title)::after {
    bottom: -1.9rem
}

.section-title--alph .section-title__item--active {
    color: var(--color-font-dark)
}

.section-title--alph .section-title__item--active::after {
    opacity: 1
}

@media screen and (max-width: 1639px) {
    .section-title--alph .section-title__item {
        font-size: 2.6rem
    }

    .section-title--alph .section-title__item::after {
        bottom: -1.7rem
    }

    .section-title--alph .section-title__item:not(.section-title__title)::after {
        bottom: -1.6rem
    }
}

@media screen and (max-width: 1399px) {
    .section-title--alph {
        grid-gap: .8rem
    }

    .section-title--alph .section-title__title {
        font-size: 2.1rem
    }

    .section-title--alph .section-title__item::after {
        bottom: -1.6rem
    }

    .section-title--alph .section-title__item:not(.section-title__title) {
        font-size: 1.8rem
    }

    .section-title--alph .section-title__item:not(.section-title__title)::after {
        bottom: -1.8rem
    }
}

@media screen and (max-width: 959px) {
    .section-title__title {
        font-size: 2.8rem
    }

    .section-title--alph {
        grid-gap: 1rem;
        flex-wrap: wrap;
        border-bottom: 0;
        padding-bottom: 0
    }

    .section-title--alph .section-title__title-wr::after {
        display: none
    }

    .section-title--alph .section-title__item::after {
        display: none
    }

    .section-title--count .section-title__line {
        height: 1.3rem
    }
}

@media screen and (max-width: 639px) {
    .section-title__title {
        font-size: 1.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .section-title--count .section-title__title-wr {
        padding-right: .5rem
    }

    .section-title--count .section-title__count-wr {
        padding-left: .5rem
    }

    .section-title--count .section-title__count {
        margin-left: .5rem;
        font-size: 1.2rem;
        display: none
    }

    .section-title--alph .section-title__title, .section-title--alph .section-title__item, .section-title--alph .section-title__item:not(.section-title__title) {
        font-size: 1.5rem
    }

    .section-title--count .section-title__title-wr {
        max-width: calc(100% - 10rem)
    }

    .section-title--count .section-title__line {
        height: 1rem
    }
}

.cart {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    border-radius: .4rem;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.cart__banner {
    position: relative;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;
    overflow: hidden;
    display: block
}

.cart__banner::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%
}

.cart__banner picture {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.cart__content {
    padding: .9rem 1rem;
    color: var(--color-font-light)
}

.cart--pined {
    order: -1
}

.cart__pin-btn {
    position: absolute;
    top: .5rem;
    right: .5rem
}

.cart__content--category {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cart__content--video {
    display: flex;
    flex-direction: column;
    grid-gap: .8rem;
    flex-grow: 1
}

.cart__big-title {
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 116.67%;
    color: var(--color-main-bg);
    transition: .3s ease-in-out;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.cart__count-in-cat {
    background: var(--color-light-gray-bg);
    border-radius: .2rem;
    padding: .1rem .3rem;
    color: var(--color-font-light);
    font-weight: 300;
    font-size: 1.4rem
}

.cart__like-module {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out
}

.cart__like-module--active {
    opacity: 1;
    visibility: visible
}

.cart__content-title {
    color: var(--color-font-dark);
    font-weight: 500;
    max-width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cart__content-row--cats {
    display: flex;
    flex-wrap: wrap;
    grid-gap: .5rem;
    max-height: 2rem;
    text-overflow: ellipsis;
    overflow: hidden
}

.doubleline {
    max-height: 4rem
}

.cart__cat {
    background: #f0f3f6;
    border-radius: .2rem;
    padding: .1rem .5rem;
    color: var(--color-font-light);
    font-size: 1.4rem;
    transition: .3s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cart__cat:hover {
    background: #e8eef3
}

.cart__content-row--footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    grid-gap: 1.2rem
}

.cart__years, .cart__site {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-font-light)
}

.cart__time, .cart__flag {
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer
}

.cart__time svg, .cart__flag svg {
    width: 100%;
    height: 100%
}

.cart__time {
    margin-left: auto;
    width: 1.5rem;
    height: 1.5rem
}

.cart__flag {
    width: 1.2rem;
    height: 1.5rem
}

.cart__site {
    position: relative;
    display: block
}

.cart__site::before {
    content: "";
    display: block;
    position: absolute;
    left: -0.7rem;
    bottom: .7rem;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background: var(--color-main-bg)
}

.cart .cart__content-row--footer button svg {
    transition: .3s ease-in-out
}

.cart .cart__content-row--footer button:hover svg {
    fill: var(--color-accent)
}

.active svg {
    fill: var(--color-accent)
}

.cart .cart__content-row--footer a:hover {
    color: var(--color-accent)
}

.cart__like-precentage, .cart__video-duration {
    position: absolute;
    bottom: .5rem;
    background: rgba(39, 45, 53, 0.7);
    border-radius: .3rem;
    cursor: pointer
}

.cart__like-precentage {
    left: .5rem;
    padding: .4rem .4rem;
    display: flex;
    align-items: center;
    grid-gap: .4rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-accent)
}

.cart__like-precentage svg {
    width: 1.1rem;
    height: 1rem
}

.cart__video-duration {
    right: .5rem;
    padding: .2rem .5rem;
    color: #fff;
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 1
}

.cart:hover .cart__big-title {
    color: var(--color-accent)
}

.cart--pinned {
    order: -1
}

.cart--pinned .cart-pin-btn svg {
    fill: var(--color-accent);
    opacity: 1
}

[dir="rtl"] .cart__time {
    margin-left: 0;
    margin-right: auto
}

[dir="rtl"] .cart__site::before {
    left: auto;
    right: -0.7rem
}

[dir="rtl"] .cart__like-precentage {
    left: auto;
    right: .5rem
}

[dir="rtl"] .cart__video-duration {
    right: auto;
    left: .5rem
}

[dir="rtl"] .cart__pin-btn {
    position: absolute;
    right: auto;
    left: .5rem
}

@media screen and (max-width: 1639px) {
    .cart__content {
        padding: .7rem 1rem
    }

    .cart__big-title {
        font-size: 1.6rem
    }
}

@media screen and (max-width: 1399px) {
    .cart__big-title {
        font-size: 1.8rem
    }
}

@media screen and (max-width: 639px) {
    .cart__content {
        padding: .3rem .5rem
    }

    .cart__big-title {
        font-size: 1.2rem
    }

    .cart__count-in-cat {
        padding: .1rem;
        font-size: .9rem
    }

    .cart__like-precentage-icon {
        width: .9rem;
        height: .8rem;
        padding: .2rem;
        grid-gap: .2rem;
        font-size: .9rem
    }

    .cart__video-duration {
        padding: .2rem;
        font-size: .9rem
    }

    .cart__content-title {
        margin-top: .3rem;
        font-size: .9rem
    }

    .cart__cat {
        font-size: .9rem;
        padding: 0 .2rem .2rem
    }

    .cart__content--video {
        grid-gap: .4rem
    }

    .cart__years {
        display: none
    }

    .cart__site {
        font-size: .9rem
    }

    .cart__site::before {
        display: none
    }

    .cart__time, .cart__flag {
        display: flex
    }

    .cart__time {
        width: 1rem;
        height: 1rem
    }

    .cart__flag {
        width: .8rem;
        height: 1rem
    }

    .cart__content-row--footer {
        margin-bottom: .5rem
    }

    .cart:hover .cart__big-title {
        color: var(--color-main-bg)
    }

    .cart__content-row--cats {
        max-height: 1.7rem
    }

    .doubleline {
        max-height: 3.1rem
    }
}

.cart-pin-btn {
    cursor: pointer;
    outline: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(39, 45, 53, 0.6);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.cart-pin-btn svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: #f0f3f6;
    opacity: .8;
    transition: .3s ease-in-out
}

.cart-pin-btn:hover svg {
    fill: var(--color-accent);
    opacity: 1
}

@media screen and (max-width: 639px) {
    .cart-pin-btn {
        width: 2rem;
        height: 2rem
    }

    .cart-pin-btn svg {
        width: 1.1rem;
        height: 1.1rem
    }
}

.letter-categories {
    padding: 2rem 2rem 2.2rem;
    background: #f0f3f7;
    border-radius: .4rem
}

.letter-categories__letter {
    font-weight: 700;
    font-size: 2.1rem;
    text-transform: uppercase;
    color: #5f6772
}

.letter-categories__items {
    margin-top: .7rem;
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    grid-gap: 0 1rem
}

.letter-categories__item {
    display: inline-block;
    position: relative;
    padding: .8rem 0;
    width: 100%
}

.letter-categories__item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.letter-categories__item::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 1.2rem;
    height: .1rem;
    width: 100%;
    background: #dfe2e7
}

.letter-categories__item-link, .letter-categories__item-count {
    position: relative;
    display: block;
    background: #f0f3f7
}

.letter-categories__item-link {
    padding-right: 1rem;
    font-size: 1.4rem;
    color: var(--color-font-dark)
}

.letter-categories__item-link:hover {
    color: var(--color-accent)
}

.letter-categories__item-count {
    padding-left: 1rem;
    font-weight: 300;
    color: var(--color-font-light)
}

@media screen and (max-width: 1399px) {
    .letter-categories__items {
        grid-template-columns:repeat(3, 1fr)
    }

    .letter-categories__item--hide-from-l {
        display: none
    }
}

@media screen and (max-width: 959px) {
    .letter-categories__items {
        grid-template-columns:repeat(2, 1fr);
        grid-gap: 0 4rem
    }

    .letter-categories__item--hide-from-m {
        display: none
    }
}

@media screen and (max-width: 639px) {
    .letter-categories {
        border-radius: 0;
        padding: 1rem .5rem 1.5rem
    }

    .letter-categories__letter {
        font-size: 1.5rem
    }

    .letter-categories__items {
        grid-gap: 0 2rem
    }

    .letter-categories__item {
        padding: .5rem 0
    }

    .letter-categories__item::before {
        bottom: .9rem
    }

    .letter-categories__item-link {
        padding-right: .5rem;
        font-size: 1.1rem
    }

    .letter-categories__item-count {
        padding-left: .5rem;
        font-size: .9rem
    }
}

.section-heading__filter-btn {
    display: none
}

.section-heading--full {
    display: grid;
    grid-template-areas:"title filters" "tags filters";
    grid-gap: 0 1.2rem
}

.section-heading--full .section-heading__title {
    grid-area: title
}

.section-heading--full .section-heading__filters {
    grid-area: filters;
    align-self: flex-end;
    justify-self: flex-end;
    display: flex;
    grid-gap: 2rem
}

.section-heading--full .section-heading__tags {
    margin-top: 1.2rem;
    grid-area: tags
}

.section-heading--jcsb {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.section-heading--jcsb .section-heading__filters {
    display: flex;
    grid-gap: 2rem
}

.section-heading--jcsb .section-heading__filter-select {
    min-width: 12rem
}

@media screen and (max-width: 1399px) {
    .section-heading--full {
        grid-template-areas:none;
        display: flex;
        flex-direction: column
    }

    .section-heading--full .section-heading__filters {
        margin-top: .6rem;
        justify-self: start;
        align-self: start;
        order: 3;
        width: 100%
    }
}

@media screen and (max-width: 959px) {
    .section-heading--full {
        grid-gap: 0 1rem
    }

    .section-heading--full .section-heading__filters {
        margin-top: 1.5rem
    }

    .section-heading--full .section-heading__tags {
        margin-top: 1rem
    }
}

@media screen and (max-width: 639px) {
    .section-heading__filter-btn {
        display: flex
    }

    .section-heading--full {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .section-heading--full .section-heading__title {
        max-width: calc(100% - 5rem)
    }

    .section-heading--full .section-heading__filters {
        margin-top: 1rem;
        display: none;
        grid-template-columns:1fr;
        grid-gap: .5rem
    }

    .section-heading--full .section-heading__filters--active {
        display: grid
    }

    .section-heading--full .section-heading__filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-main-bg);
        border-radius: .4rem;
        width: 3.4rem;
        height: 1.9rem;
        border: 0;
        outline: 0
    }

    .section-heading--full .section-heading__filter-btn svg {
        width: 1.3rem;
        height: .9rem
    }

    .section-heading--full .section-heading__tags {
        flex-basis: 100%
    }

    .section-heading--jcsb {
        grid-gap: 1rem;
        align-items: flex-start;
        flex-wrap: wrap
    }

    .section-heading--jcsb .section-heading__filters {
        flex-direction: column;
        grid-gap: 1rem;
        width: 100%;
        display: none
    }

    .section-heading--jcsb .section-heading__filters--active {
        display: grid
    }

    .section-heading--jcsb .section-heading__filter-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-main-bg);
        border-radius: .4rem;
        width: 3.4rem;
        height: 1.9rem;
        border: 0;
        outline: 0
    }

    .section-heading--jcsb .section-heading__filter-btn svg {
        width: 1.3rem;
        height: .9rem
    }
}

.filter-btns {
    background: #f0f3f6;
    border-radius: .8rem;
    padding: .7rem;
    display: flex;
    grid-gap: .4rem
}

.filter-btns__btn {
    padding: .8rem 2rem .7rem;
    font-weight: 700;
    font-size: 1.4rem;
    color: #989898;
    display: block;
    border-radius: .5rem
}

.filter-btns__btn--active {
    color: var(--color-font-dark);
    background: var(--color-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08)
}

.filter-btns__btn:hover {
    color: var(--color-font-dark)
}

@media screen and (max-width: 1399px) {
    .filter-btns {
        display: grid;
        grid-template-columns:repeat(2, 1fr);
        flex-basis: 100%
    }
}

@media screen and (max-width: 959px) {
    .filter-btns {
        padding: .3rem
    }

    .filter-btns__btn {
        font-size: 1.2rem;
        padding: .5rem
    }
}

.heading-tags {
    display: flex;
    align-items: baseline;
    grid-gap: .5rem
}

.heading-tags__title {
    text-transform: uppercase;
    color: var(--color-font-light);
    font-weight: 300
}

.heading-tags__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    grid-gap: .5rem
}

.heading-tags__tag-item--item {
    background: #f0f3f6;
    border-radius: .2rem;
    display: block;
    padding: 0 .5rem .1rem;
    color: var(--color-font-light);
    transition: .3s ease-in-out
}

.heading-tags__tag-item--item:hover {
    background: #e8eef3
}

.heading-tags__tag-plus, .heading-tags__tag-minus {
    display: none;
    transition: .3s ease-in-out
}

@media screen and (max-width: 959px) {
    .heading-tags__tag-item--hide-m {
        display: none
    }
}

@media screen and (max-width: 639px) {
    .heading-tags {
        max-height: 2rem;
        overflow: hidden
    }

    .heading-tags__items {
        width: calc(100% - 2.2rem)
    }

    .heading-tags__tag-item--hide-s {
        display: none
    }

    .heading-tags__tag-plus {
        display: flex
    }

    .heading-tags__tag-plus, .heading-tags__tag-minus {
        align-items: center;
        justify-content: center;
        width: 1.7rem;
        height: 1.7rem;
        background: #f0f3f6;
        border-radius: .2rem;
        border: 0;
        outline: 0;
        transition: .3s ease-in-out
    }

    .heading-tags--active .heading-tags__tag-minus {
        display: flex
    }

    .heading-tags__tag-plus svg, .heading-tags__tag-minus svg {
        width: .8rem;
        height: .8rem
    }

    .heading-tags__title {
        font-size: 1.3rem
    }

    .heading-tags__tag-item {
        font-size: 1.3rem
    }

    .heading-tags--active {
        max-height: 100%
    }

    .heading-tags--active .heading-tags__tag-plus {
        opacity: 0;
        visibility: hidden
    }
}

.video-like {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    padding: 1rem 0
}

.video-like__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

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

.video-like__item {
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: 5.3rem;
    height: 3.8rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-like__item svg {
    transition: .3s ease-in-out
}

.video-like__dislike {
    border-left: 1px solid #c9cfd9;
    border-right: 1px solid #c9cfd9
}

.video-like__dislike svg {
    transform: rotate(180deg)
}

.video-like__action-icon {
    width: 2.4rem;
    height: 2.3rem;
    fill: #272d35
}

.video-like__like:hover svg, .video-like__like--active svg {
    fill: #33c166
}

.video-like__dislike:hover svg, .video-like__dislike--active svg {
    fill: #dc3e3e
}

.video-like__close-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: #5f6772
}

.video-like__close:hover svg {
    fill: var(--color-font-dark)
}

@media screen and (max-width: 639px) {
    .video-like__item {
        width: 4rem;
        height: 4rem
    }

    .video-like__action-icon {
        width: 2rem;
        height: 1.9rem
    }
}

.pagination {
    display: flex;
    align-items: center;
    border-radius: .4rem;
    background: #f0f3f7;
    padding: 1.5rem 2rem
}

.pagination__list {
    display: flex;
    align-items: center;
    justify-content: center
}

.pagination__link {
    padding: 1.1rem 2rem;
    display: block;
    color: var(--color-font-dark)
}

.pagination__link svg {
    transition: .3s ease-in-out
}

.pagination__link:not(.pagination__link--active):hover {
    color: var(--color-accent)
}

.pagination__link:not(.pagination__link--active):hover svg {
    fill: var(--color-accent)
}

.pagination__link--active {
    background: var(--color-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: .3rem;
    font-weight: 500
}

.pagination__arrow {
    padding: .1rem 2rem;
    display: flex;
    align-items: center
}

.pagination__arrow span {
    display: none
}

.pagination__arrow-icon {
    width: 1.1rem;
    height: 1.8rem
}

@media screen and (max-width: 959px) {
    .pagination__link {
        padding: 1.1rem 1.5rem
    }

    .pagination__arrow {
        padding: .1rem 1.5rem
    }
}

@media screen and (max-width: 639px) {
    .pagination {
        width: 100%;
        grid-gap: .8rem;
        padding: 0;
        background: transparent;
        justify-content: center
    }

    .pagination__list {
        width: 100%;
        background: transparent;
        padding: 0;
        display: none
    }

    .pagination__link {
        display: none
    }

    .pagination__arrow {
        background: #f0f3f7;
        flex-basis: calc(50% - .4rem);
        border-radius: .4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        grid-gap: 1.1rem;
        padding: 1.5rem 1.5rem 1.6rem;
        font-size: 1.6rem
    }

    .pagination__arrow span {
        display: inline-block;
        color: #272d35;
        font-size: 1.6rem
    }

    .pagination__arrow svg {
        width: .8rem;
        height: 1.2rem
    }

    .pagination span.pagination__item-link--arrow {
        color: rgba(39, 45, 53, 0.4)
    }

    .pagination span.pagination__item-link--arrow svg {
        opacity: .4
    }

    [dir="rtl"] .pagination__arrow svg {
        transform: rotate(180deg)
    }
}

.search-item {
    padding: .7rem 1.2rem;
    background: #f0f3f6;
    color: var(--color-font-light);
    line-height: 1;
    border-radius: .2rem
}

.search-item:hover {
    color: var(--color-accent)
}

@media screen and (max-width: 639px) {
    .search-item {
        font-size: 1.4rem;
        padding: .5rem .8rem
    }
}

.report-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 45, 53, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in-out;
    z-index: 5
}

.report-modal__inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #dfe2e7;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 1.2rem;
    padding: 3rem
}

.report-modal__content {
    display: flex;
    flex-direction: column;
    align-items: center
}

.report-modal__close-btn {
    position: absolute;
    right: -5.6rem;
    top: 0;
    width: 2.6rem;
    height: 2.6rem;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: .3s ease-in-out
}

.report-modal__close-btn svg {
    width: 100%;
    height: 100%;
    fill: var(--color-light-gray-bg)
}

.report-modal__close-btn:hover {
    opacity: .7
}

.report-modal__sides-wr {
    display: flex;
    grid-gap: 4.5rem
}

.report-modal__choose-side, .report-modal__reason-side {
    flex-basis: 50%
}

.report-modal__radio:not(:first-child) {
    margin-top: 2rem
}

.report-modal__textarea {
    width: 27rem;
    height: 100%;
    resize: none
}

.report-modal__captcha {
    margin: 2rem auto 0
}

.report-modal__btn {
    display: inline-block;
    margin: 1.5rem auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: .5rem;
    transition: .3s ease-in-out;
    padding: 1.6rem 10rem;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--color-font-dark)
}

.report-modal--active {
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 959px) {
    .report-modal__inner {
        padding: 3.5rem 1.5rem 3rem
    }

    .report-modal__sides-wr {
        flex-direction: column;
        grid-gap: 2.5rem
    }

    .report-modal__close-btn {
        top: 1rem;
        right: 1rem;
        width: 1.8rem;
        height: 1.8rem
    }

    .report-modal__close-btn svg {
        fill: var(--color-font-dark)
    }

    .report-modal__textarea {
        height: 9rem
    }

    .report-modal__btn {
        padding: 1.6rem 7.4rem 1.8rem
    }
}

.custom-radio {
    cursor: pointer
}

.custom-radio__radio-wr {
    width: 2.4rem;
    height: 2.4rem;
    position: relative
}

.custom-radio__field {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.custom-radio__customize {
    width: 100%;
    height: 100%;
    position: relative;
    border: .3rem solid var(--color-font-light);
    border-radius: 50%;
    transition: .3s ease-in-out
}

.custom-radio__customize::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-accent);
    opacity: 0;
    transition: .3s ease-in-out
}

.custom-radio__field:checked + .custom-radio__customize::before {
    opacity: 1
}

.custom-radio__field:checked + .custom-radio__customize {
    border-color: var(--color-accent)
}

.custom-radio:hover .custom-radio__customize {
    border-color: var(--color-accent)
}

.custom-radio--label {
    display: flex;
    align-items: center;
    grid-gap: 1.5rem
}

.custom-radio--label .custom-radio__label {
    white-space: nowrap;
    font-size: 1.7rem;
    color: var(--color-font-light);
    transition: .3s ease-in-out
}

.custom-radio--label:hover .custom-radio__label {
    color: var(--color-font-dark)
}

.custom-textarea {
    background: #fff;
    border: 1px solid #d6dbe2;
    border-radius: .8rem;
    padding: 1.5rem 2rem;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 130%;
    outline: 0;
    color: var(--color-font-light)
}

.custom-textarea-2__field {
    background: #fff;
    border: 1px solid #d6dbe2;
    border-radius: .8rem;
    padding: 1.5rem 2rem;
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 130%;
    outline: 0;
    resize: none;
    width: 100%;
    height: 100%;
    color: var(--color-font-light)
}

.custom-textarea-2__error {
    display: none;
    margin-top: .5rem;
    margin-left: auto;
    color: #dc3e3e;
    text-align: right
}

.is-invalid {
    background: rgba(220, 62, 62, 0.05);
    border: 1px solid rgba(220, 62, 62, 0.4)
}

@media screen and (max-width: 639px) {
    .custom-textarea-2__field {
        font-size: 1.4rem;
        padding: .9rem 1rem 1.1rem
    }

    .custom-textarea-2__error {
        font-size: 1.2rem
    }
}

.filter-select {
    position: relative
}

.filter-select__choose {
    border-radius: .8rem;
    background: #f0f3f6;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 1.5rem 1rem;
    display: flex;
    position: relative;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-font-dark);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.filter-select__choose-arrow {
    position: relative;
    width: .9rem;
    height: .6rem;
    transition: .3s ease-in-out
}

.filter-select__list {
    position: absolute;
    top: calc(100% - 0.3rem);
    left: 0;
    width: 100%;
    z-index: 2;
    background: #f0f3f6;
    border-radius: .8rem;
    padding: 1rem .5rem;
    opacity: 0;
    visibility: hidden
}

.filter-select__item:not(:first-child) {
    margin-top: .2rem
}

.filter-select__item-link {
    padding: .5rem .5rem .3rem .5rem;
    font-weight: 700;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--color-font-light);
    display: block;
    border-radius: .4rem
}

.filter-select__item-link--active {
    color: #272d35;
    background: #dfe2e7
}

.filter-select__item-link:hover {
    color: #272d35;
    background: rgba(223, 226, 231, 0.5)
}

.filter-select--active .filter-select__choose-arrow {
    transform: translateY(-50%) rotate(180deg)
}

.filter-select--active .filter-select__list {
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 959px) {
    .filter-select__choose {
        padding: .7rem 1rem
    }
}

.custom-field__field {
    width: 100%;
    background: #fff;
    border: 1px solid #d6d9df;
    border-radius: .4rem;
    padding: 1.5rem 1.8rem 1.7rem;
    font-weight: 300;
    font-size: 17px;
    color: #5f6772
}

.invalid-feedback {
    margin-top: .5rem;
    margin-left: auto;
    color: #dc3e3e;
    text-align: right
}

.is-invalid {
    background: rgba(220, 62, 62, 0.05);
    border: 1px solid rgba(220, 62, 62, 0.4)
}

@media screen and (max-width: 639px) {
    .custom-field__field {
        font-size: 1.4rem;
        padding: .9rem 1rem 1.1rem
    }

    .custom-field__error {
        font-size: 1.2rem
    }
}

.notify-apply {
    background: rgba(220, 242, 228, 0.54);
    border: 1px solid rgba(51, 193, 102, 0.41);
    border-radius: .4rem;
    display: flex;
    align-items: center;
    grid-gap: 1rem;
    padding: 1.6rem 2rem 1.4rem
}

.notify-apply svg {
    width: 2.1rem;
    height: 2.1rem
}

@media screen and (max-width: 639px) {
    .notify-apply {
        flex-direction: column;
        text-align: center;
        font-size: 1.4rem
    }
}

.popular__items {
    margin-top: 1.5rem
}

@media screen and (max-width: 1399px) {
    .popular__category-item--hide-from-l {
        display: none
    }
}

@media screen and (max-width: 959px) {
    .popular__items {
        margin-top: 1rem
    }

    .popular__category-item--hide-from-m {
        display: none
    }
}

@media screen and (max-width: 639px) {
    .popular__items {
        margin-top: .5rem
    }
}

.text-categories__items {
    margin-top: 2rem;
    display: grid;
    grid-template-columns:1fr;
    grid-gap: 1rem
}

@media screen and (max-width: 959px) {
    .text-categories__items {
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 639px) {
    .text-categories__items {
        margin-top: 1rem;
        width: calc(100% - 1rem);
        left: -0.5rem;
        position: relative
    }

    [dir="rtl"] .text-categories__items {
        left: auto;
        right: -0.5rem
    }
}

.categories-section__items {
    margin-top: 2rem
}

.categories-section__pagination-wr {
    margin: 3rem auto 0;
    display: flex;
    justify-content: center
}

.categories-section__category-item {
    max-width: 31.2rem
}

@media screen and (max-width: 1639px) {
    .categories-section__category-item {
        max-width: calc((100vw - 10rem) / 5)
    }
}

@media screen and (max-width: 1399px) {
    .categories-section__category-item {
        max-width: calc((100vw - 8rem) / 3)
    }

    .categories-section__category-item--hide-from-l {
        display: none
    }
}

@media screen and (max-width: 959px) {
    .categories-section__items {
        margin-top: 1.5rem
    }

    .categories-section__category-item {
        max-width: calc((100vw - 7rem) / 2)
    }

    .categories-section__category-item--hide-from-m {
        display: none
    }

    .categories-section__pagination {
        width: 100%
    }
}

@media screen and (max-width: 639px) {
    .categories-section__items {
        margin-top: 1rem
    }

    .categories-section__category-item {
        max-width: calc((100vw - 1.5rem) / 2)
    }

    .categories-section__pagination-wr {
        margin-top: 1.5rem
    }
}

.popular-search__items {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    grid-gap: .8rem;
    max-width: calc(100% - 20rem)
}

@media screen and (max-width: 1399px) {
    .popular-search__items {
        margin-top: 1.2rem;
        max-width: 100%
    }
}

@media screen and (max-width: 959px) {
    .popular-search__items {
        margin-top: 2rem
    }
}

@media screen and (max-width: 639px) {
    .popular-search__items {
        margin-top: 1rem
    }
}

.pornstars__list {
    margin-top: .7rem;
    grid-template-columns:repeat(5, 1fr);
    grid-gap: 0 1rem;
    display: none
}

.pornstars__list--active {
    display: grid
}

.pornstars__item {
    margin-top: 1.8rem
}

.pornstars__link {
    color: var(--color-font-dark)
}

.pornstars__link:hover {
    color: var(--color-accent)
}

@media screen and (max-width: 1399px) {
    .pornstars__list {
        grid-template-columns:repeat(3, 1fr)
    }
}

@media screen and (max-width: 639px) {
    .pornstars__list {
        grid-template-columns:repeat(2, 1fr);
        margin-top: 2rem
    }

    .pornstars__link {
        font-size: 1.3rem
    }
}

.get-listed {
    width: min(60rem, 100%)
}

.form-group {
    width: 100%
}

.form-group:first-child {
    margin-top: 2rem
}

.form-group:not(:first-child) {
    margin-top: 1.5rem
}

.get-listed__btn {
    margin-top: 4.3rem;
    padding: 1.6rem 12rem 1.8rem;
    font-weight: 700;
    font-size: 1.7rem;
    color: #272d35;
    border-radius: .5rem
}

.get-listed__message {
    width: 100%;
    margin-top: 3rem
}

@media screen and (max-width: 639px) {
    .get-listed__field:first-child {
        margin-top: 1rem
    }

    .get-listed__field:not(:first-child) {
        margin-top: .5rem
    }

    .get-listed__btn {
        width: 100%;
        text-align: center;
        font-size: 1.4rem;
        padding: 1rem 1rem 1.2rem
    }

    .get-listed__message {
        margin-top: 1.5rem
    }
}

@media screen and (max-width: 639px) {
    .section-heading--full .section-heading__title {
        max-width: calc(100% - 6rem);
        width: 100%
    }

    .section-heading--full .section-title--count {
        max-width: calc(100% - 6rem)
    }
}

.get-listed .captcha .form-group {
    width: auto
}

.get-listed .captcha {
    position: relative;
    margin-top: 2.3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center
}

@media screen and (min-width: 640px) {
    .get-listed .captcha {
        left: 0;
        transform: translateX(0);
        display: flex;
        justify-content: flex-start
    }
}

.search-form__live-search {
    position: absolute;
    top: 6.2rem;
    z-index: 3;
    left: 0;
    width: 100%
}

@media screen and (max-width: 959px) {
    .search-form__live-search {
        top: 6rem
    }
}

@media screen and (max-width: 639px) {
    .search-form__live-search {
        top: 4.1rem
    }
}

.live-search {
    background-color: #fff;
    padding: 1.6rem 2rem 1.6rem 1rem;
    transition: .3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 1.1rem;
    opacity: 0;
    visibility: hidden
}

.live-search.active {
    opacity: 1;
    visibility: visible
}

.live-search__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    grid-gap: .1rem;
    overflow-y: auto
}

.live-search__list::-webkit-scrollbar {
    width: .4rem
}

.live-search__list::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: .8rem
}

.live-search__item-link {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-main-bg);
    transition: .3s ease-in-out;
    display: block;
    width: 100%;
    border-radius: .3rem;
    padding: .4rem 1rem
}

.live-search__item-link:hover {
    background: #f0f3f6
}

.live-search__list-wr--type_live-search {
    display: none
}

[dir="rtl"] .live-search {
    padding: 1.6rem 1rem 1.6rem 2rem
}

@media screen and (max-width: 959px) {
    .live-search {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        padding: 1.6rem 1.5rem 1.6rem .5rem
    }

    [dir="rtl"] .live-search {
        padding: 1.6rem .5rem 1.6rem 1.5rem
    }
}