html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block
}

audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],template {
    display: none
}

a {
    background-color: transparent;
    text-decoration: none;
    cursor:pointer;
}

a:active,a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

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

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: 0
}

sub {
    bottom: -0.25em
}

img {
    border: 0;
    vertical-align: top
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

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

button,input,optgroup,select,textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    padding: 0
}

button {
    overflow: visible;
    background: none;
    border: 0
}

button,select {
    text-transform: none
}

button,html input[type="button"],input[type="reset"],input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

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

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

input[type="search"] {
    -webkit-appearance: textfield
}

input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,th {
    padding: 0
}

p,ul,li,h1,h2,h3,h4,h5,h6,dd,dt {
    margin: 0;
    padding: 0
}

input:focus,select:focus,textarea:focus,button:focus {
    outline: none
}

ul {
    list-style: none
}

* {
    box-sizing: border-box
}

BODY {
    font-family: Arial, Helvetica, sans-serif;
    min-width: 320px;
    position: relative;
    color: #000;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-size: 16px
}

BODY .is-l {
    font-family: sans-serif
}

BODY.is-nav,BODY.is-sort {
    overflow: hidden
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.main {
    margin-bottom: 40px
}

.categories-search {
    display: inline-flex;
    height: 100%;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    background: #292837;
    border: 0
}

.alphabets {
    display: block;
    flex-shrink: 0;
    width: 50px;
    position: sticky;
    margin-bottom: 10px;
    padding-bottom: calc(100vh/7)
}

@media only screen and (min-width: 1025px) {
    .alphabets {
        width:100%;
        padding-bottom: 0;
        overflow-y: auto
    }
}

.alphabets__item {
    display: inline-flex;
    text-transform: uppercase;
    height: 50px;
    width: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

@media only screen and (min-width: 1025px) {
    .alphabets__item {
        height:40px;
        width: 40px;
        font-size: auto;
        font-weight: normal
    }
}

.alphabets__item.is-active {
    color: #FF3850
}

.alphabets__item:hover {
    color: #FF3850
}

.list-categories {
    display: flex;
    min-height: 100vh
}

@media only screen and (min-width: 1025px) {
    .list-categories {
        flex-direction:column
    }
}

.list-categories__alphabet {
    order: 1;
    position: sticky;
    top: 10px;
    max-height: calc(100vh - 55px);
    flex-shrink: 0
}

@media only screen and (max-width: 1023px) {
    .list-categories__alphabet {
        overflow-y:scroll
    }
}

@media only screen and (min-width: 1025px) {
    .list-categories__alphabet {
        order:-1;
        max-height: auto;
        position: relative;
        top: 0;
        margin-bottom: 15px
    }
}

.list-categories__content {
    flex-direction: column
}

.list-categories__row {
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    flex-direction: column
}

.list-categories__row--letter {
    text-transform: uppercase;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background: #FF3850;
    color: #fff;
    border-radius: 4px
}

.list-categories__row--list {
    columns: 200px 7;
    list-style: none
}

.list-categories__row--list A {
    color: #000;
    display: list-item;
    margin-bottom: 10px;
    font-size: 18px
}

@media only screen and (min-width: 1025px) {
    .list-categories__row--list A {
        font-size:16px
    }
}

.list-categories__row--list A:hover {
    color: #FF3850
}

.list-categories__row.is-active .low {
    display: inherit
}

.list-categories .low {
    display: none
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #1F1D2B;
    opacity: 0.8;
    z-index: 20
}

.is-nav .overlay,.is-sort .overlay {
    display: block
}

.ml {
    margin-left: auto
}

.dropdown {
    position: relative;
    display: block
}

@media only screen and (min-width: 1161px) {
    .dropdown {
        display:inline-flex
    }
}

.dropdown:not(:last-child) {
    margin-bottom: 20px
}

@media only screen and (min-width: 1161px) {
    .dropdown:not(:last-child) {
        margin-bottom:0;
        margin-right: 10px
    }
}

.dropdown__title {
    cursor: pointer;
    min-width: 40px;
    align-items: center;
    color: #000;
    font-size: inherit
}

@media only screen and (max-width: 1159px) {
    .dropdown__title i[class*=flag] {
        margin-right:8px
    }
}

@media only screen and (min-width: 1161px) {
    .dropdown__title {
        display:inline-flex;
        padding: 0 10px;
        height: 40px;
        background: #292837;
        border-radius: 4px;
        justify-content: center
    }
}

.dropdown__title .i-down {
    font-size: 10px;
    margin-left: 5px;
    color: #000
}

.dropdown__hint {
    display: none;
    padding: 15px;
    background: #292837;
    border-radius: 4px;
    top: 100%;
    margin-top: 3px;
    right: 0;
    position: absolute;
    white-space: nowrap
}

.dropdown:hover .dropdown__hint {
    display: block
}

.dropdown__content {
    display: none;
    position: relative;
    margin-top: 3px;
    right: 0;
    padding: 15px;
    width: 100%
}

@media only screen and (min-width: 1161px) {
    .dropdown__content {
        top:100%;
        width: unset;
        position: absolute;
        background: #292837;
        border-radius: 4px
    }
}

.is-active .dropdown__content {
    display: flex;
    flex-direction: column
}

.dropdown__content>* {
    display: inline-flex;
    cursor: pointer;
    color: #000;
    white-space: nowrap
}

.dropdown__content>*:hover {
    color: #FF3850
}

.dropdown__content>*:not(:last-child) {
    margin-bottom: 10px
}

.dropdown__content>* i {
    margin-right: 7px
}

@media only screen and (max-width: 1159px) {
    .hide-lm {
        display:none
    }
}

@media only screen and (min-width: 1161px) {
    .show-lm {
        display:none !important
    }
}

.container,.top-tags,.footer__container,.seo {
    position: relative;
    min-width: 320px;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px
}

@media only screen and (min-width: 1025px) {
    .container,.top-tags,.footer__container,.seo {
        padding-left:15px;
        padding-right: 15px
    }
}

@media only screen and (min-width: 1025px) {
    .container--404 .thumb {
        width:calc(100%/4 - 10px)
    }

    .container--404 .thumb:nth-child(3),.container--404 .thumb:nth-child(4) {
        order: -1
    }
}

@media only screen and (min-width: 1141px) {
    .container--404 .thumb {
        width:calc(100%/5 - 10px)
    }

    .container--404 .thumb:nth-last-child(-n+3) {
        display: none
    }
}

@media only screen and (min-width: 1481px) {
    .container--404 .thumb {
        width:calc(100%/6 - 10px)
    }

    .container--404 .thumb:nth-last-child(-n+4) {
        display: none
    }
}

.age {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 600;
    position: fixed;
    display: none
}

.age__content {
    width: 100%;
    max-width: 320px;
    padding: 15px;
    margin: auto;
    background: #292837
}

.age__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.age__logo {
    height: 35px;
    width: 97px;
    display: block;
    background: url("../fonts/logo-1.svg") left center no-repeat;
    background-size: contain
}

.age__age {
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background: #FF3850;
    color: #fff;
    font-size: 14px
}

.age__text {
    text-align: center
}

.age__btn {
    margin-top: 15px;
    background: #FF3850;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer
}

.age__btn:hover {
    background: #ff6b7d
}

.is-age {
    overflow: hidden
}

.is-age .header__nav {
    display: none
}

.is-age .age {
    display: flex
}

.is-age #app>:not(.age) {
    filter: blur(10px)
}

.top-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    margin-bottom: 30px
}

.top-tags--header {
    margin-top: 0;
    margin-bottom: 5px;
    display: block;
    white-space: nowrap;
    scrollbar-width: none;
    overflow-x: scroll
}

.top-tags--header::-webkit-scrollbar {
    display: none
}

@media only screen and (min-width: 1025px) {
    .top-tags--header {
        margin-top:10px;
        margin-bottom: 13px;
        display: flex;
        overflow-x: auto
    }
}

.top-tags .top-tags__item {
    background: #292837;
    color: #000;
    display: inline-flex;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 4px
}

.top-tags .top-tags__item:not(:last-child) {
    margin-right: 10px
}

.top-tags .top-tags__item:hover {
    color: #FF3850
}

.input {
    display: inline-flex;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 15px;
    cursor: pointer;
    width: 100%;
    line-height: 1em
}

.input INPUT {
    display: none
}

.input INPUT:checked ~ SPAN:before {
    border: 5px solid #FF3850
}

.input SPAN {
    font-size: 18px
}

.input SPAN:before {
    background: #1F1D2B;
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    border-radius: 50%;
    box-sizing: border-box
}

.notify {
    background: #292837;
    padding: 15px;
    position: fixed;
    right: 20px;
    top: 60px;
    z-index: 400;
    font-size: 18px;
    transition: opacity 0.25s;
    opacity: 0
}

.notify::first-letter {
    text-transform: uppercase
}

.notify.is-active {
    opacity: 1
}

.notify i {
    margin-right: 10px
}

.notify .i-close,.notify .is-nav .i-bars,.is-nav .notify .i-bars {
    color: red
}

.notify .i-check {
    color: green
}

.hemail {
    display: inline-flex;
    font-style: normal;
    font-weight: bold
}

.hemail:after {
    content: "support@kebabtube.com";
    white-space: pre-line
}

.grecaptcha-badge {
    display: none !important
}

.bookmark {
    display: none;
    margin-right: 15px;
    margin-top: -3px;
    position: relative
}

@media only screen and (min-width: 1025px) {
    .bookmark {
        display:inline-flex
    }
}

.bookmark__hint {
    display: block;
    opacity: 0;
    visibility: hidden;
    content: attr(data-hint);
    position: absolute;
    top: 100%;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    background: #292837;
    padding: 10px;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
    color: #FFF;
    font-size: 14px;
    line-height: 25px
}

.bookmark:hover .bookmark__hint {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s
}

.hidden {
    display: none !important
}

.mt-25 {
    margin-top: 25px
}

.tourist {
    width: 21px;
    height: 20px;
    background: url("../fonts/tourist.svg") no-repeat;
    background-size: contain;
    display: inline-flex;
    margin-right: 5px;
    vertical-align: bottom
}

@media only screen and (min-width: 1025px) {
    .tourist {
        width:18px;
        height: 18px
    }
}

@font-face {
    font-family: "tpo";
    src: url(../fonts/0aab0d8d22a54b35841232b6d4b22118.woff) format("woff2"),url(../fonts/77dadc4c816d4466bcf6fd4ee0a33b09.woff) format("woff");
    font-display: fallback
}

.i {
    line-height: 1
}

.i:before {
    font-family: tpo !important;
    font-style: normal;
    font-weight: normal !important;
    vertical-align: top
}

.i-arrow-double:before {
    content: "\f101"
}

.i-arrow:before,.i-top:before,.i-down:before,.i-right:before,.i-left:before {
    content: "\f102"
}

.i-bars:before {
    content: "\f103"
}

.i-bookmark:before {
    content: "\f104"
}

.i-calendar:before {
    content: "\f105"
}

.i-check:before {
    content: "\f106"
}

.i-clock:before {
    content: "\f107"
}

.i-close:before,.is-nav .i-bars:before {
    content: "\f108"
}

.i-eye:before {
    content: "\f109"
}

.i-film:before {
    content: "\f10a"
}

.i-filter:before {
    content: "\f10b"
}

.i-gay:before {
    content: "\f10c"
}

.i-globe:before {
    content: "\f10d"
}

.i-search:before {
    content: "\f10e"
}

.i-shemale:before {
    content: "\f10f"
}

.i-sort:before {
    content: "\f110"
}

.i-star:before {
    content: "\f111"
}

.i-straight:before {
    content: "\f112"
}

.i-tag:before {
    content: "\f113"
}

.i-thumb-down:before {
    content: "\f114"
}

.i-thumb-up:before {
    content: "\f115"
}

.i-video:before {
    content: "\f116"
}

.i-zap:before {
    content: "\f117"
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 0 0;
    display: inline-flex;
    cursor: pointer;
    z-index: 120;
    position: relative;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible
}

.hamburger:hover {
    opacity: 1
}

.hamburger.is-active:hover {
    opacity: 1
}

.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner::before,.hamburger.is-active .hamburger-inner::after {
    background-color: #fff
}

.hamburger-box {
    width: 20px;
    height: 16px;
    display: inline-block;
    position: relative
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px
}

.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after {
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 8px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease
}

.hamburger-inner::before,.hamburger-inner::after {
    content: "";
    display: block
}

.hamburger-inner::before {
    top: -7px
}

.hamburger-inner::after {
    bottom: -7px
}

.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease
}

.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease,transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}

.is-nav .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}

.is-nav .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease
}

.is-nav .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease,transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.header {
    margin-bottom: 13px;
    z-index: 210;
    background: #fff;
    top: 0;
    transition: top 0.3s
}

@media only screen and (min-width: 1161px) {
    .header {
        position:relative
    }
}

.header__inner {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    z-index: 100
}

@media only screen and (min-width: 1161px) {
    .header__inner {
        padding-top:20px;
        padding-bottom: 20px
    }
}

.header__logo {
    margin-right: 20px;
    display: flex;
    align-items: center
}

@media only screen and (min-width: 1161px) {
    .header__logo {
        margin-right:30px
    }
}

@media only screen and (min-width: 1241px) {
    .header__logo {
        margin-right:40px
    }
}

.header__center {
    display: none
}

@media only screen and (min-width: 1161px) {
    .header__center {
        display:flex
    }
}

.header__right {
    margin-left: auto;
    display: flex;
    width: 100%
}

@media only screen and (min-width: 1161px) {
    .header__right {
        width:auto
    }
}

.header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media only screen and (min-width: 1161px) {
    .header__nav {
        padding:0 15px;
        position: relative;
        top: 0;
        right: 0;
        height: auto;
        width: 100%;
        max-width: 1600px;
        padding-bottom: 0;
        overflow: visible;
        margin: 0 auto;
        background: none
    }
}

.header__nav A {
    color: #000
}

.header__nav A .i {
    color: #9E9FA4
}

.header__nav A:hover {
    color: #FF3850
}

.header__nav A:hover .i {
    color: #FF3850
}

.header__burger {
    margin-left: 10px;
    width: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1F1D2B
}

@media only screen and (min-width: 1161px) {
    .header__burger {
        display:none
    }
}

.header__burger .i {
    font-size: 22px;
    color: #fff
}

@media only screen and (max-width: 1159px) {
    .is-hide .header {
        top:-100px
    }
}

.is-nav .header__nav {
    right: 0;
    transition: right 0.3s
}



.nav .i:not([class*="down"]) {
    width: 22px;
    margin-right: 2px;
    color: #000
}

@media only screen and (min-width: 1161px) {
    .nav .i:not([class*="down"]) {
        margin-right:3px
    }
}

@media only screen and (min-width: 1161px) {
    .nav {
        display:flex;
        align-items: center;
        height: 100%;
        font-size: 16px;
        letter-spacing: -0.2px
    }
}

.nav__item {
    display: inline-flex;
    color: #000;
    padding: 5px 10px;
    border-radius: 4px
}

@media only screen and (min-width: 1161px) {
    .nav__item {
        display:inline-flex;
        margin-bottom: 0;
        padding: 0 12px;
        height: 40px;
        align-items: center;
        border-radius: 4px
    }

    .nav__item:not(:last-child) {
        margin-right: 10px;
		margin-bottom: 10px
    }
}

.logo {
    width: 100px;
    height: 30px;
    overflow: hidden;
    display: block;
    background: url("../fonts/logo2.svg") left center no-repeat;
    background-size: contain
}

@media only screen and (min-width: 1161px) {
    .logo {
        height:44px;
        width: 190px;
        background-image: url("../fonts/logo2.svg")
    }
}

.is-active .i-down {
    transform: rotate(90deg)
}

.footer {
    padding-top: 32px;
    padding-bottom: 40px;
    margin-top: auto
}

.footer__rta {
    text-align: center;
    margin-top: 20px
}

.footer__rta A {
    color: #000
}

.footer__rta A:hover {
    color: #FF3850
}

.footer__menu {
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media only screen and (min-width: 1025px) {
    .footer__menu {
        flex-direction:row
    }
}

.footer__menu A {
    display: inline-flex;
    color: #000;
    font-size: 16px;
    line-height: 20px;
    justify-content: center
}

.footer__menu A:hover {
    color: #FF3850
}

.footer__menu A:not(:last-child) {
    margin-bottom: 20px
}

@media only screen and (min-width: 1025px) {
    .footer__menu A:not(:last-child) {
        margin-bottom:0;
        margin-right: 30px
    }
}

.search {
    display: flex;
    width: 100%
}

@media only screen and (min-width: 1161px) {
    .search {
        width:350px
    }
}

.search-form {
    position: relative;
    width: 100%
}

.search-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    z-index: 10
}

.search-button:hover .i {
    color: #FF3850
}

.search-input {
    width: 100%;
    height: 44px;
    position: relative;
    border: 0;
    padding-left: 15px;
    padding-right: 25px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 4px;
    border: 1px solid  #292837;
}

.search-response {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    background: #292837;
    padding: 15px;
    display: none;
    margin-top: -3px
}

.search-response:empty {
    display: none
}

.search-response DIV {
    display: flex;
    flex-direction: column
}

.search-response P {
    text-transform: capitalize;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px
}

@media only screen and (min-width: 1025px) {
    .search-response P {
        font-size:16px
    }
}

.search-response A {
    color: #000;
    display: block;
    font-size: 18px
}

.search-response A.top-tags__item:nth-child(n+11) {
    display: none
}

.search-response A.is-active {
    color: #FF3850
}

@media only screen and (min-width: 1025px) {
    .search-response A {
        font-size:16px
    }
}

.search-response A:hover {
    color: #FF3850
}

.search-response A:not(:last-child) {
    margin-bottom: 6px
}

.is-active .search-response {
    display: block
}

[class*=" flag-"],[class^=flag-] {
    display: inline-flex;
    vertical-align: middle;
    align-self: center;
    width: 18px;
    height: 14px;
    background-size: cover;
    border-radius: 2px
}

.flag-cn {
    background-image: url("../fonts/flags_cn.svg")
}
.flag-en {
    background-image: url("../fonts/flags_en.svg")
}
.flag-hk {
    background-image: url("../fonts/flags_hk.svg")
}
.flag-ja {
    background-image: url("../fonts/flags_ja.svg")
}
.flag-sg {
    background-image: url("../fonts/flags_sg.svg")
}



.flag-xmas {
    background-image: url("../fonts/flags_xmas.svg")
}

.flag-xmas2 {
    background-image: url("../fonts/flags_xmas2.svg")
}

[class*=" i-"],[class^=i-] {
    display: inline-flex;
    vertical-align: middle;
    align-self: center
}

.i-4 {
    font-size: 4px
}

.i-7 {
    font-size: 7px
}

.i-8 {
    font-size: 8px
}

.i-9 {
    font-size: 9px
}

.i-10 {
    font-size: 10px
}

.i-rotate {
    transform: rotate(180deg)
}

.i-top {
    transform: rotate(90deg)
}

.i-down {
    transform: rotate(-90deg)
}

.i-right {
    transform: rotate(-180deg);
    position: relative;
    right: -2px
}

.i-chevron-up {
    transform: rotate(90deg)
}

.i-chevron-right {
    transform: rotate(180deg)
}

.thumbs {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
    flex-wrap: wrap
}

@media (min-width: 1140px) and (max-width: 1460px) {
    .thumbs:not(.thumbs--cats) .thumb:nth-child(70),.thumbs:not(.thumbs--cats) .thumb:nth-child(71) {
        display:none
    }
}

.thumb {
    display: block;
    width: calc(100%/2 - 10px);
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    margin-bottom: 20px
}

@media only screen and (min-width: 760px) {
    .thumb {
        width:calc(100%/4 - 10px)
    }
}

@media only screen and (min-width: 1025px) {
    .thumb {
        width:calc(100%/4 - 10px)
    }
}

@media only screen and (min-width: 1141px) {
    .thumb {
        width:calc(100%/6 - 10px)
    }
}

@media only screen and (min-width: 1481px) {
    .thumb {
        width:calc(100%/6 - 10px)
    }
}

.thumb>A {
    width: 100%
}

.thumb__img {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    border-radius: 4px
}

.thumb__img img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    backface-visibility: hidden;
    border-radius: 4px
}

.thumb__img>DIV {
    z-index: 35
}

.thumb__img SPAN {
    position: absolute;
    background: rgba(28,28,36,0.7);
    color: #fff;
    z-index: 10;
    font-size: 11px;
    display: inline-flex;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 14px
}

.thumb__img SPAN .i {
    height: 10px;
    align-self: center;
    margin-right: 3px
}

.thumb__hd {
    top: 3px;
    right: 3px
}

.thumb__duration {
    bottom: 3px;
    left: 3px
}

.thumb__rating {
    bottom: 3px;
    right: 3px
}

.thumb__rating--green {
    color: #50DE89 !important
}

.thumb__img:hover .thumb__hd {
    transition: top 0.2s
}

.thumb__img:hover .thumb__duration,.thumb__img:hover .thumb__rating {
    transition: bottom 0.2s
}

.thumb__info {
    margin-top: 10px;
    display: flex;
    flex-direction: column
}

.thumb__cat {
    margin-top: 10px;
    display: flex
}

.thumb__title {
    color: #000;
    font-size: 15px;
    line-height: 20px;
    font-weight: normal;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media only screen and (min-width: 1161px) {
    .thumb__title:hover {
        color:#FF3850
    }
}

@media only screen and (min-width: 1161px) {
    .thumb:hover .thumb__title {
        color:#FF3850
    }
}

.thumb__source {
    color: #9E9FA4;
    font-size: 14px;
    line-height: 20px;
    margin-top: 1px
}

@media only screen and (min-width: 1025px) {
    .thumb__source {
        margin-top:0
    }
}

.thumb__source:hover {
    color: #FF3850
}

.thumb__total {
    color: #9E9FA4;
    font-size: 12px;
    line-height: 20px
}

.thumb-rate {
    z-index: 150;
    position: absolute;
    top: calc(50% - 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    background: #292837;
    font-size: 22px;
    padding: 5px 0;
    display: none;
    align-items: center;
    border-radius: 50px
}

.thumb-rate a {
    color: #ececec;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    width: 36px;
    height: 36px
}

.thumb-rate a:first-child {
    margin-left: 5px
}

.thumb-rate a:last-child {
    margin-right: 5px
}

.thumb-rate a:nth-child(2) {
    margin-left: 5px;
    margin-right: 5px
}

.thumb-rate a:hover {
    opacity: 0.8
}

.thumb-rate__up {
    background: #28a745
}

.thumb-rate__down {
    background: #444
}

.thumb-rate__cancel {
    background: #444
}

.thumb--rate .thumb-rate {
    display: flex
}

@media only screen and (min-width: 1141px) {
    .thumbs--lp .thumb:nth-child(27) {
        display:none
    }
}

@media only screen and (min-width: 1481px) {
    .thumbs--lp .thumb:nth-child(27) {
        display:block
    }
}

@media only screen and (min-width: 1025px) {
    .thumbs--related .thumb:nth-last-child(2),.thumbs--related .thumb:nth-last-child(1) {
        display:none
    }
}

@media only screen and (min-width: 1141px) {
    .thumbs--related .thumb {
        width:calc(100%/5 - 10px)
    }

    .thumbs--related .thumb:nth-last-child(2),.thumbs--related .thumb:nth-last-child(1),.thumbs--related .thumb:nth-last-child(3) {
        display: none
    }
}

@media only screen and (min-width: 1481px) {
    .thumbs--related .thumb {
        width:calc(100%/6 - 10px)
    }

    .thumbs--related .thumb:nth-last-child(2),.thumbs--related .thumb:nth-last-child(1),.thumbs--related .thumb:nth-last-child(3) {
        display: block
    }
}

.tags {
    display: flex;
    flex-direction: column
}

.tags+.tags {
    margin-top: 35px
}

@media only screen and (min-width: 768px) {
    .tags+.tags {
        margin-top:50px
    }
}

.tags__header {
    margin-bottom: 10px
}

.tags__title {
    font-size: 18px;
    text-transform: uppercase
}

@media only screen and (min-width: 1025px) {
    .tags__title {
        font-size:20px
    }
}

.tags__wrap {
    display: flex
}

@media only screen and (min-width: 1025px) {
    .tags__wrap {
        flex-direction:column
    }
}

.tags__alphabets {
    order: 1;
    position: sticky;
    top: 65px;
    max-height: calc(100vh - 25px);
    transition: top 0.3s;
    overflow-y: scroll;
    flex-shrink: 0
}

@media only screen and (min-width: 1025px) {
    .tags__alphabets {
        order:-1;
        max-height: auto;
        position: relative;
        top: 0;
        margin-bottom: 15px;
        overflow-y: hidden
    }
}

@media only screen and (max-width: 1023px) {
    .tags--index .tags__alphabets {
        display:none
    }
}

.tags__alphabetss {
    display: block;
    flex-shrink: 0;
    width: 40px;
    position: relative;
    flex-shrink: 0;
    margin-bottom: 10px
}

@media only screen and (min-width: 1025px) {
    .tags__alphabetss {
        position:relative;
        top: 0;
        width: 100%
    }
}

.tags__alphabet {
    display: inline-flex;
    text-transform: uppercase;
    height: 40px;
    width: 40px;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

.tags__alphabet.is-active {
    color: #FF3850
}

.tags__alphabet:hover {
    color: #FF3850
}

.tags__all {
    margin-top: 30px;
    display: inline-flex;
    align-self: center;
    align-content: center;
    height: 36px;
    font-size: 18px;
    background: #FF3850;
    align-items: center;
    line-height: 1;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    border-radius: 4px
}

@media only screen and (min-width: 1025px) {
    .tags__all {
        font-size:16px
    }
}

.tags__content {
    flex-direction: column;
    width: 100%
}

.tags__content--ul {
    display: block;
    columns: 200px 7
}

@media only screen and (max-width: 766px) {
    .tags--index .tags__content--ul {
        columns:2
    }
}
@media only screen and (max-width: 540px) {
    .nav__item {
        width: 24.2%;
    }
}
@media only screen and (max-width: 530px) {
    .nav__item {
        width: 32.2%;
    }
}

.is-letter .tags__content {
    columns: unset
}

.tags__row {
    display: block;
    margin-bottom: 20px;
    flex-direction: column;
    list-style: none
}

.tags__row>* {
    display: list-item;
    font-size: 18px;
    margin-bottom: 13px
}

@media only screen and (min-width: 1025px) {
    .tags__row>* {
        font-size:16px
    }
}

.tags__row A {
    color: #000
}

.tags__row A:hover {
    color: #FF3850
}

@media only screen and (min-width: 1025px) {
    .is-letter .tags__row {
        columns:200px 7
    }

    .is-letter .tags__row .tags__letter {
        display: none !important
    }
}

.tags--ul .tags__row {
    display: block
}

.tags__letter {
    text-transform: uppercase;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    color: #fff;
    background: #FF3850;
    border-radius: 4px
}

.tags__list {
    list-style: none
}

.tags.is-active .low {
    display: inherit
}

.is-hide .tags__alphabets {
    top: 5px
}

@media only screen and (min-width: 1025px) {
    .is-hide .tags__alphabets {
        top:0
    }
}

.pagination2874 {
    display: flex;
    justify-content: center;
    margin-top: 25px
}

.pagination2874 A {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #000;
    height: 30px;
    width: 30px;
    font-size: 18px;
    border: 1px solid #333138
}

.pagination2874 A:not(:last-child) {
    margin-right: 10px
}

@media only screen and (min-width: 760px) {
    .pagination2874 A {
        height:45px;
        width: 45px
    }
}


@media only screen and (min-width: 1024px) {
    .pagination2874 A {
        height:50px;
        width: 50px
    }
}



.pagination2874 A.dqy,.pagination2874 A:hover {
    background: #FF3850;
    color: #fff
}

.pagination2874 A .i {
    font-size: 12px
}

.pagination2874 A .i-right {
    right: 0
}

.seo {
    margin-top: 25px;
    margin-bottom: 35px
}

.seo h2 {
    margin-bottom: 15px
}

.seo p {
    line-height: 1.4
}

.seo p:not(:last-child) {
    margin-bottom: 10px
}

.seo a {
    color: #000
}

.gender-selector {
    position: relative;
    align-self: center;
    z-index: 21;
    flex-shrink: 0;
    font-size: 20px
}

@media only screen and (min-width: 1025px) {
    .gender-selector {
        margin-right:20px;
        font-size: inherit
    }
}

.gender-selector__title {
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    color: #000;
    margin-bottom: 20px
}

@media only screen and (min-width: 1025px) {
    .gender-selector__title {
        margin-bottom:0;
        font-size: 0
    }
}

.gender-selector__title .i {
    font-size: 18px;
    color: #9E9FA4;
    margin-right: 5px
}

@media only screen and (min-width: 1025px) {
    .gender-selector__title .i {
        font-size:20px
    }
}

.gender-selector__title:hover .i {
    color: #FF3850
}

.gender-selector__title .i-down {
    margin-left: 10px;
    margin-right: 0;
    font-size: 10px
}

@media only screen and (min-width: 1025px) {
    .gender-selector__title .i-down {
        margin-left:2px
    }
}

.gender-selector__content {
    display: none;
    top: 100%;
    margin-top: 10px;
    margin-bottom: 30px;
    right: 0
}

@media only screen and (min-width: 1025px) {
    .gender-selector__content {
        position:absolute;
        padding: 15px;
        margin-top: 0;
        margin-bottom: 0;
        background: #292837
    }
}

.gender-selector__content A {
    cursor: pointer;
    display: block;
    font-size: 18px;
    white-space: nowrap;
    color: #9E9FA4
}

@media only screen and (min-width: 1161px) {
    .gender-selector__content A {
        font-size:inherit
    }
}

.gender-selector__content A:hover {
    color: #FF3850
}

.gender-selector__content A:not(:last-child) {
    margin-bottom: 15px
}

@media only screen and (min-width: 1025px) {
    .gender-selector__content A:not(:last-child) {
        margin-bottom:6px
    }
}

.gender-selector__content A I {
    width: 16px
}

.gender-selector.is-active .gender-selector__content {
    display: block
}

.gender-selector:hover .i-down {
    transform: rotate(90deg)
}

@media only screen and (min-width: 1025px) {
    .gender-selector:hover .gender-selector__content {
        display:block
    }
}

.static-page__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px
}

.static-page__content ul {
    margin: 15px 0
}

.static-page__content li {
    position: relative;
    padding-left: 20px
}

.static-page__content li:after {
    content: " ";
    display: block;
    background: #909094;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 2px;
    top: 6px
}

.static-page__content li:not(:last-child) {
    margin-bottom: 8px
}

.static-page__content h2 {
    margin-bottom: 10px
}

.static-page__content p {
    line-height: 1.5
}

.static-page__content p:not(:last-child) {
    margin-bottom: 10px
}

.static-page__content a {
    color: #fff
}

.static-page__content a:visited {
    color: #fff
}

.static-page__content a:hover {
    color: #FF3850
}

.headline {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px
}

@media only screen and (min-width: 1025px) {
    .headline {
        flex-direction:column
    }
}

.headline-categories {
    display: block;
    align-items: center
}

@media only screen and (min-width: 1025px) {
    .headline-categories {
        display:flex;
        flex-direction: row
    }
}

.headline H1 {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: .04em;
    font-weight: 400;
    align-self: center
}

@media only screen and (min-width: 1025px) {
    .headline H1 {
        font-size:20px;
        align-self: initial
    }
}

.headline__search {
    margin-top: 20px;
    width: 100%;
    height: 40px
}

@media only screen and (min-width: 1025px) {
    .headline__search {
        margin-top:0;
        max-width: 300px;
        margin-left: 40px
    }
}

.headline__sort {
    margin-left: auto
}

@media only screen and (min-width: 1025px) {
    .headline__sort {
        margin-left:0;
        margin-top: 15px
    }
}

.sug-bnrs {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    padding: 30px 0
}

.footer-banners {
    margin-top: 35px;
    display: flex;
    justify-content: center;
    padding: 30px 0;
    background: #292837
}

.footer-banners-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    overflow: hidden
}

@media (max-width: 767px) {
    .footer-banners-container {
        grid-template-columns:1fr 1fr;
        grid-template-rows: 1fr 1fr
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .footer-banners-container {
        display: inline-block
    }
}

.footer-banner,.sug-bnr {
    margin: 0 5px;
    width: 300px;
    height: 250px
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .footer-banner,.sug-bnr {
        float: left
    }
}

@media (max-width: 1280px) {
    .footer-banner,.sug-bnr {
        width:calc(300px * 0.9);
        height: calc(250px * 0.9)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.9);
        transform-origin: top left
    }
}

@media (max-width: 1100px) {
    .footer-banner,.sug-bnr {
        width:calc(300px * 0.75);
        height: calc(250px * 0.75)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.75);
        transform-origin: top left
    }
}

@media (max-width: 1023px) {
    .footer-banner,.sug-bnr {
        width:calc(300px * 0.57);
        height: calc(250px * 0.57)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.57);
        transform-origin: top left
    }
}

@media (max-width: 767px) {
    .footer-banner,.sug-bnr {
        margin:3px;
        width: calc(300px * 0.75);
        height: calc(250px * 0.75)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.75);
        transform-origin: top left
    }
}

@media (max-width: 510px) {
    .footer-banner,.sug-bnr {
        margin:3px;
        width: calc(300px * 0.57);
        height: calc(250px * 0.57)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.57);
        transform-origin: top left
    }
}

@media (max-width: 359px) {
    .footer-banner,.sug-bnr {
        width:calc(300px * 0.5);
        height: calc(250px * 0.5)
    }

    .footer-banner iframe,.sug-bnr iframe {
        transform: scale(0.5);
        transform-origin: top left
    }
}

.n1,.n2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap
}

.n1 .__nat_item,.n2 .__nat_item {
    width: calc(100%/2 - 10px);
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    margin-bottom: 22px;
    align-self: start;
    display: none
}

.n1 .__nat_item:nth-child(1),.n1 .__nat_item:nth-child(2),.n2 .__nat_item:nth-child(1),.n2 .__nat_item:nth-child(2) {
    display: block
}

@media only screen and (min-width: 1025px) {
    .n1 .__nat_item,.n2 .__nat_item {
        width:calc(100%/4 - 10px)
    }

    .n1 .__nat_item:nth-child(3),.n1 .__nat_item:nth-child(4),.n2 .__nat_item:nth-child(3),.n2 .__nat_item:nth-child(4) {
        display: block
    }
}

@media only screen and (min-width: 1141px) {
    .n1 .__nat_item,.n2 .__nat_item {
        width:calc(100%/5 - 10px)
    }

    .n1 .__nat_item:nth-child(5),.n2 .__nat_item:nth-child(5) {
        display: block
    }
}

@media only screen and (min-width: 1481px) {
    .n1 .__nat_item,.n2 .__nat_item {
        width:calc(100%/6 - 10px)
    }

    .n1 .__nat_item:nth-child(6),.n2 .__nat_item:nth-child(6) {
        display: block
    }
}

.n1 .__nat_img,.n2 .__nat_img {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    background-size: cover
}

.n1 .__nat_title,.n2 .__nat_title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
    color: #000;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal
}

.n1 .__nat_pixi,.n2 .__nat_pixi {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100
}

.n1 .__nat_ad,.n2 .__nat_ad {
    position: absolute;
    background: rgba(28,28,36,0.7);
    color: #fff;
    z-index: 10;
    font-size: 11px;
    display: inline-flex;
    padding: 2px 4px;
    border-radius: 4px;
    line-height: 14px;
    top: 3px;
    right: 3px
}

.n1 {
    order: -1
}

.thumbs--related .__nat_item:nth-child(3),.thumbs--related .__nat_item:nth-child(4) {
    display: block
}

@media only screen and (min-width: 1141px) {
    .thumbs--related .__nat_item {
        width:calc(100%/6 - 10px)
    }

    .thumbs--related .__nat_item:nth-child(6) {
        display: block
    }
}

.sort-btn {
    background: #292837;
    display: inline-flex;
    height: 44px;
    width: 44px;
    justify-content: center;
    align-items: center
}

@media only screen and (min-width: 1025px) {
    .sort-btn {
        display:none
    }
}

.sort-btn .i {
    font-size: 18px
}

.sort {
    z-index: 30;
    display: block;
    position: fixed;
    top: 64px;
    right: -100%;
    background: #292837;
    height: 100vh;
    overflow-y: scroll;
    width: 300px;
    padding-bottom: 200px;
    z-index: 200
}

@media only screen and (min-width: 1025px) {
    .sort {
        width:auto;
        position: relative;
        right: 0;
        top: 0;
        padding: 0;
        height: auto;
        display: inline-flex;
        background: none;
        overflow: visible
    }
}

.sort__item {
    display: block;
    position: relative;
    margin: 15px 15px
}

@media only screen and (min-width: 1025px) {
    .sort__item {
        display:inline-flex;
        margin: 0
    }
}

.sort__item:not(:last-child) {
    margin-right: 15px
}

.sort__subtitle {
    width: 100%;
    display: flex;
    margin-bottom: 6px;
    color: #9E9FA4;
    font-size: 14px
}

.sort__subtitle .i {
    margin-right: 5px
}

@media only screen and (min-width: 1025px) {
    .sort__subtitle {
        display:none
    }
}

.sort__title {
    background: #1F1D2B;
    min-height: 42px;
    font-size: 18px;
    padding: 0 13px;
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: #000;
    width: 100%
}

.sort__title::first-letter {
    text-transform: uppercase
}

@media only screen and (min-width: 1025px) {
    .sort__title {
        padding:7px 13px;
        min-height: 32px;
        font-size: inherit;
        border: 0;
        width: auto;
        background: #292837
    }
}

@media only screen and (max-width: 1023px) {
    .sort__title.is-any {
        font-size:0
    }
}

.sort__title:hover {
    color: #FF3850
}

@media (hover: none) {
    .sort__title:hover {
        color:#fff
    }
}

.sort__title .i {
    font-size: 10px
}

.sort__title .i:last-child {
    margin-left: auto
}

@media only screen and (min-width: 1025px) {
    .sort__title .i:last-child {
        margin-left:8px
    }
}

.sort__any {
    font-size: 0
}

@media only screen and (min-width: 1025px) {
    .sort__any {
        display:none
    }
}

.sort__title.is-any .sort__any {
    font-size: 18px
}

.sort__content {
    display: none;
    padding: 15px 15px;
    padding-top: 10px;
    position: relative;
    top: 100%;
    right: 0;
    min-width: 100%;
    background: #1F1D2B;
    flex-direction: column
}

.sort__content--left {
    right: unset;
    left: 0
}

@media only screen and (min-width: 1025px) {
    .sort__content {
        margin-top:5px;
        position: absolute;
        padding: 15px 10px;
        background: #292837
    }
}

.sort__content SUP {
    color: #9E9FA4
}

.sort__content A {
    color: #000;
    white-space: nowrap;
    display: block;
    font-size: 18px;
    cursor: pointer
}

.sort__content A::first-letter {
    text-transform: uppercase
}

@media only screen and (min-width: 1025px) {
    .sort__content A {
        font-size:16px
    }
}

.sort__content A:hover {
    color: #FF3850
}

.sort__content A:not(:last-child) {
    margin-bottom: 17px
}

@media only screen and (min-width: 1025px) {
    .sort__content A:not(:last-child) {
        margin-bottom:8px
    }
}

.sort__item.is-active .sort__content {
    display: flex
}

.sort__search {
    display: block !important;
    height: 36px;
    border: 0;
    margin-bottom: 12px;
    padding: 0 5px;
    background: #1F1D2B
}

.is-sort .sort {
    right: 0;
    transition: right 0.3s
}

.cd {
    position: absolute;
    bottom: 25px;
    right: 5px;
    display: inline-flex
}

.cd::after {
    display: block;
    content: 'AD';
    right: 0;
    bottom: 0;
    font-size: .625rem;
    line-height: .625rem;
    padding: 4px;
    text-decoration: none;
    color: #fff;
    background: rgba(28,28,36,0.7);
    border-radius: 4px
}

.li {
    position: relative;
    color: #fff;
    display: block;
    text-align: center
}

.li::after {
    content: 'Advertisement'
}

.video__header,.video__und {
    display: flex;
    justify-content: center;
    overflow: hidden
}

.video__header>DIV:first-child,.video__und>DIV:first-child {
    position: relative
}

.video__header DIV DIV>*:first-child,.video__und DIV DIV>*:first-child {
    margin-bottom: 20px !important;
    position: relative
}

.video__und DIV DIV>*:first-child {
    margin-top: 20px !important;
    margin-bottom: 0 !important
}

.video__und .cd {
    bottom: 5px
}

.video__content {
    display: flex;
    flex-direction: column
}

@media only screen and (min-width: 768px) {
    .video__content {
        flex-direction:row
    }
}

.video__main {
    width: 100%
}

.video__side {
    width: 100%;
    margin-top: 15px;
    margin-left: 10px;
    flex-shrink: 0;
    display: none;
    justify-content: center
}

@media only screen and (min-width: 768px) {
    .video__side {
        margin-top:0;
        display: block;
        width: 180px;
        margin-bottom: 15px
    }
}

@media only screen and (min-width: 1025px) {
    .video__side {
        width:230px
    }
}

@media only screen and (min-width: 1481px) {
    .video__side {
        width:270px
    }
}

.video__side DIV {
    margin-bottom: 10px;
    width: 100% !important
}

.video__side DIV:not(:first-child) {
    display: none
}

@media only screen and (min-width: 768px) {
    .video__side DIV:not(:first-child) {
        display:block
    }
}

.video__player {
    display: block;
    height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 0
}

.video__player iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important
}

.video__info {
    margin: 15px 0;
    display: flex
}

.video__action {
    color: #fff;
    display: inline-flex
}

.video__action:not(span):hover {
    color: #FF3850
}

.video__action .i {
    margin-right: 10px;
    font-size: 16px
}

.video__action:not(:last-child) {
    margin-right: 25px
}

.video__title {
    font-size: 24px;
    word-break: break-word
}

.video__details {
    margin-top: 15px;
    margin-bottom: 25px
}

.video__details span {
    display: inline-flex;
    margin-right: 4px
}

.video__details a {
    color: #000;
    display: inline-flex
}

.video__details a:hover {
    color: #FF3850
}

.video__details a:not(:last-child) {
    margin-right: 10px
}

.video__details .item {
    margin-bottom: 10px
}

.report-form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    min-height: 400px;
    position: relative
}

.report-form-overlay {
    position: absolute;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0,0,0,0.9)
}

.report-form-overlay i {
    font-size: 60px
}

.report-form-overlay .i-close,.report-form-overlay .is-nav .i-bars,.is-nav .report-form-overlay .i-bars {
    color: red
}

.report-form-overlay .i-check {
    color: green
}

.report-form INPUT {
    height: 40px
}

.report-form TEXTAREA {
    resize: vertical
}

.report-form INPUT,.report-form TEXTAREA {
    width: 100%;
    border: 1px solid #333138;
    padding: 10px;
    color: #000;
    border-radius: 0
}

.report-form button {
    box-shadow: none;
    border: 0;
    background: #FF3850;
    text-align: center;
    color: #fff;
    height: 40px
}

.report-form button:hover {
    background: #ff2943
}

.report-form>* {
    margin-bottom: 10px
}

.report-form-select {
    position: relative
}

.report-form-select:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    cursor: pointer
}

.report-form-select INPUT {
    cursor: pointer
}

.report-form-select i {
    position: absolute;
    right: 13px;
    top: 14px;
    font-size: 14px
}

.report-form-select DIV {
    z-index: 10;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #292837;
    display: none;
    flex-direction: column
}

.report-form-select DIV SPAN {
    padding: 10px;
    cursor: pointer
}

.report-form-select.is-active DIV {
    display: flex
}

.report-form-file SPAN {
    background: #292837;
    color: #fff;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.report-form-file INPUT {
    display: none
}

.report-form-text {
    position: relative
}

.report-form-text i {
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: #4d4d4d;
    font-style: normal;
    font-size: 12px
}

.no-history {
    text-align: center;
    display: none
}

.no-history.show {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px
}

.tubelist {
    width: 100%;
    max-width: 1600px;
    margin: 10px auto 30px;
    padding-left: 5px;
    padding-right: 5px;
    clear: both;
}

@media only screen and (min-width: 1161px) {
    .tubelist {
        padding-left:15px;
        padding-right: 15px
    }
}

.tubelist__title {
    display: block;
    margin-bottom: 20px;
    font-size: 20px
}

.tubelist__content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.tubelist__content A {
    display: inline-flex;
    color: #fff;
    background: #292837;
    padding: 5px 10px;
    border-radius: 4px
}

.tubelist__content A:hover {
    color: #FF3850
}
.pages ul li {float: left;padding: 2px 2px;}
.pages ul li a.syy,.pages ul li a.xyy {width: 80px;}


.thumb__img img {
	height: 100%;
}

@media only screen and (min-width: 1161px) {
	.nav {
		display: block;
	}

	.navhezuolink {
		margin: 10px;
	}

	.nav__item:hover,.xuanzhong {
		background: #FF3850;
	}

	.header__nav A:hover {
		color: #fff!important
	}

	.header__nav A:hover .i {
		color: #fff!important
	}

	.mobilenav {
		display: none;
	}
}

.video__player {
	height: 320px;
}

@media only screen and (min-width: 1161px) {
	.video__player {
		height: 600px;
	}
}


.tuijiandaohang {
	width: 100%;
	overflow: hidden;
	display: block;
	margin-bottom: 10px;
}

.tuijiandaohang a {
	width: 9.78%;
	float: left;
	border-radius: 3px;
	line-height: 30px;
	height: 30px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	display: inline-block;
	background-color: #292837;
	margin: 1px;
	transition-duration: .3s;
	text-decoration: none
}

.tuijiandaohang a.lv {
	color: #08e89b;
	background-color: #292837;
}

.tuijiandaohang a:hover {
	background: #FF3850;
	color: #FFF
}

@media screen and (max-width: 1000px) {
	.tuijiandaohang a {
		width: 14%;
		font-size: 14px;
	}
}

@media screen and (max-width: 540px) {
	.tuijiandaohang a {
		width: 24.2%;
		font-size: 14px;
	}
}

.sousuoci {
	gap: 6px;
}

.sousuoci a {
	border-radius: 0;
	padding: 2px 6px;
	cursor: pointer;
}

 .nav3 {
     margin-top: 5px ;
 }

.photo-two {
    display: inline-block;
    margin: 10px;
    text-align: center;
    width: 65px;
}

.photo-two a {
    line-height: 12px;
}

.photo-two img {
    border-radius: 12%;
    height: 60px;
    width: 60px;
    margin-bottom: 5px;
}

.photo-name {
    font-size: large;
    font-weight: bold;
    color: rgb(255, 255, 255);
    font-size: small;
}


.clear{
    clear: both;
}


.col6{
    width: 50%;
    float: left;
}
.col6 a{
    display: block !important;
}
@media screen and (max-width: 750px){
     
.col6 {
    width: 100%!important;
}
.col6  img{
    height: 50px !important;
}
}

#video__player  img{
    max-width: 100%;
}


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


h2 {
text-align: center;
margin-bottom: 30px;
font-size: 28px;
}


.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
}


/* 平板自适应：每排 6 个 */
@media (max-width: 1024px) {
.grid {
grid-template-columns: repeat(6, 1fr);
}
}


/* 手机上自适应：每排 3 个 */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}


/* 更小屏幕：每排 2 个 */
@media (max-width: 480px) {
.grid {
grid-template-columns: repeat(4, 1fr);
}
}


.card {
background: #292837;
border-radius: 6px;
padding: 6px 0;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: 0.2s;
}


.card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
background: #ff3850;
}


.card a {
display: block;
text-decoration: none;
color: #fff;
font-size: 16px;
}


.app {
	margin: 10px 0;
}

.app_title {
	text-align: center;
	line-height: 35px;
	font-size: 15px;
	color: #fff000;
	font-weight: bolder;
}

.app ul li {
	margin: 10px 0;
	float: left;
	width: 8.33%;
	text-align: center;
	list-style-type: none
}

.app ul li img {
	margin: 0 auto;
	width: 48px;
	height: 48px;
	display: block;
	border-radius: 8px
}

.app ul li a {
	font: 12px/28px Tahoma,'Microsoft Yahei',Simsun;
	color: #000;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
}

.app ul li a:hover {
	color: #FD4C5D;
	font-weight: bolder;
}

@media screen and (max-width:640px) {
	.app ul li {
		width: 20%
	}
}

@media screen and (min-width:768px) {
	.app {
	}
}
.header__logo {
  display: flex;
  justify-content: center;       /* 水平居中 */
  align-items: center;           /* 垂直居中（如果 header 有高度） */
  width: 100%;                   /* 占满父容器宽度，确保能居中 */
  padding: 15px 0;               /* 可选：给 logo 一些呼吸空间 */
}

/* 你的渐变 logo 样式 */
.site-logo {
  display: inline-block;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-decoration: none;
  font-family: 'Helvetica Now Display', 'Arial Black', Arial, sans-serif;
  
  /* 渐变文字效果 */
  background: linear-gradient(90deg, #000 0%, #000 65%, #ff6200 65%, #ff6200 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
  /* 兼容性小优化 */
  color: #000;  /* fallback 颜色，旧浏览器显示纯黑 */
}

/* 可选：hover 时加点互动（让用户感觉可点击） */
.site-logo:hover {
  opacity: 0.9;
  transform: scale(1.02);
  transition: all 0.2s ease;
}


.home-hero__title {
  font-size: clamp(0.6rem, 4.5vw, 1rem);  /* 普通大小：手机约1.6rem，大屏约2.2rem */
  font-weight: 600;                         /* 中等粗细，不用太重 */
  line-height: 1.4;
  margin: 0;
  color: #222;                              /* 深灰偏黑，自然不刺眼 */
  letter-spacing: normal;                   /* 不刻意压缩字距 */
  
}
.home-search {
  position: relative;
  max-width: 420px;              /* 搜索框宽度，可根据需要调大/小 */
  margin: 20px auto;             /* 上下间距 + 水平居中 */
  width: 100%;
}

.home-search__input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 20px;        /* 左内边距留空间，右边留给按钮 */
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 999px;          /* 大圆角 */
  outline: none;
  background: #fff;
  color: #333;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-search__input::placeholder {
  color: #aaa;
}

.home-search__input:focus {
  border-color: #ff6200;
  box-shadow: 0 0 0 3px rgba(255, 98, 0, 0.15);
}

.home-search__button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;            /* 圆形按钮，更现代 */
  background: #ff6200;           /* 橙色，和你的 logo 一致 */
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.home-search__button:hover {
  background: #e55a00;
}