body, .paging a, .paging span
{ background-color: rgb(0,0,0); }

.card figure, .finder .input-wrap, .side-box, .info-item span, .action-bar a, .related-box::-webkit-scrollbar
{ background-color: rgb(30,30,30); }

.paging a, .paging span
{ border-color: rgb(60,60,60); }

body, .side h2
{ color: rgb(160,160,160); }

a, a.brand, h1, h2, .finder input, .finder input::placeholder, .performer-info, .about
{ color: rgb(255,255,255); }

.info-tags a
{ background-color: rgba(245,5,95,0.5); color: rgb(255,255,255); }

a.brand span, .finder button, .menu a.active:before, .menu a:hover:before, .link-group a:hover, .bottom .link-set a:hover, .bottom .link-set a:before, .sad-icon
{ color: rgb(245,5,95); }

#go-top, .badge, .paging a:hover, .paging a.active, .paging a.expand, .info-tags a:hover, .action-bar a:hover, .action-bar a.send, .related-box::-webkit-scrollbar-thumb
{ background-color: rgb(245,5,95); color: rgb(255,255,255); }

.paging a:hover, .paging a.active, .paging a.expand
{ border-color: rgb(245,5,95); }

.card a:after
{ background: linear-gradient(to bottom,transparent,rgba(0,0,0,0.8)); content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; }

.card-meta { text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }

main
{ background: linear-gradient(to bottom,rgb(62,2,25),transparent,rgb(62,2,25)); }

@media all and (min-width:460px) {
    .menu a:before
    { background-color: rgb(30,30,30); }
    
    .menu a.active:before, .menu a:hover:before
    { background-color: rgb(245,5,95); color: rgb(255,255,255); }
}


@font-face{font-family: 'Roboto Condensed'; font-weight: normal; font-style: normal; src: url(../fonts/font/RobotoCondensed-Regular.ttf) format("truetype"); font-display: swap; }
@font-face{font-family: 'Roboto Condensed'; font-weight: bold; font-style: normal; src: url(../fonts/font/RobotoCondensed-Bold.ttf) format("truetype"); font-display: swap; }
@font-face{font-family: 'Line Awesome Free'; font-weight: 900; src:url(../fonts/iconfont/la-solid-900.woff2) format("woff2"); font-display: swap; }

body,html,div,p,a,ul,li,input,button,form,header,main,article,section,footer,aside,figure,textarea,span,img,h1,h2,h3 { margin: 0; padding: 0; }
header { display: block; }

body, input { font-family: 'Roboto Condensed', Arial, sans-serif; }

:after, :before { font-family: 'Line Awesome Free'; display: inline-block; vertical-align: top; font-weight: bold; height: inherit; line-height: inherit; text-rendering: optimizeLegibility !important; overflow: hidden; }
li { list-style-type: none; }
img { display: block; }
a { text-decoration: none; box-sizing: content-box; cursor: pointer; transition: 0.1s ease; }

body { font-size: 14px; line-height: 20px; }

main { margin-top: 5px; overflow: hidden; padding-bottom: 40px; }

h1, h2, h3 { font-weight: normal; text-transform: uppercase; font-size: 20px; line-height: 24px; margin: 10px 10px 0 10px; clear: both; }
h2 { font-size: 18px; line-height: 22px; margin-top: 40px; }
h3 { font-size: 16px; line-height: 20px; }

.container { overflow: hidden; clear: both; margin: 0 auto; min-width: 320px; max-width: 1260px; position: relative; }

.top-bar { overflow: hidden; }

a.brand { margin: 5px 10px 0 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: bold; text-transform: uppercase; display: block; float: left; height: 34px; line-height: 34px; font-size: 20px; }
a.brand img { width: auto; height: inherit; }

.finder { overflow: hidden; padding: 5px 10px 0 0; }
.finder form { position: relative; overflow: hidden; }
.finder .input-wrap { overflow: hidden; height: 34px; line-height: 34px; padding: 0 30px 0 15px; border-radius: 25px; }
.finder input { background: none; border: 0 none; width: 100%; outline: 0 none; font-size: 14px; height: inherit; line-height: normal; text-align: left; white-space: nowrap; text-overflow: ellipsis; }
.finder button { background: none; overflow: hidden; border-radius: 0 25px 25px 0; position: absolute; top: 0; right: 0; border: 0 none; cursor: pointer; outline: 0 none; width: 34px; font-size: 18px; height: 34px; line-height: 34px; }
.finder button:before { content: "\f002"; }


.menu { padding-top: 5px; clear: both; text-align: center; }
.menu nav { overflow: hidden; height: 35px; font-size: 0; }
.menu nav a { text-transform: uppercase; display: inline-block; margin: 0 5px; vertical-align: top; height: 35px; line-height: 35px; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.menu nav a:before { margin-right: 2px; float: left; width: 20px; font-size: 20px; }

.menu nav a.live:before { content: "\f519"; }
.menu nav a.mars:before { content: "\f222"; }
.menu nav a.venus:before { content: "\f221"; }
.menu nav a.transgender:before { content: "\f224"; }
.menu nav a.venus-mars:before { content: "\f228"; }

.sort { overflow: hidden; padding: 5px 5px 0 10px; }
.sort a { border-width: 1px; border-style: solid; display: block; float: left; height: 26px; line-height: 26px; text-transform: uppercase; font-size: 11px; border-radius: 20px; padding: 0 10px; font-weight: bold; margin: 5px 5px 0 0; }

.grid { padding: 0 5px; overflow: hidden; }
.card { width: 50%; float: left; }
.card .box { margin: 10px 5px 0 5px; position: relative; border-radius: 9px; }
.card a { border-radius: 9px; display: block; overflow: hidden; position: relative; }
.card figure { overflow: hidden; position: relative; padding-bottom: 90%; border-radius: 9px; }
.card figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }

.card-meta { z-index: 2; position: absolute; bottom: 5px; left: 0; right: 0; overflow: hidden; padding: 0 10px; }

.card .user-name { display: block; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.card .user-age { font-weight: normal; display: block; float: left; height: 20px; line-height: 20px; font-size: 12px; overflow: hidden; }

.card .watchers { display: block; float: right; height: 20px; line-height: 20px; font-size: 12px; overflow: hidden; font-weight: normal; }
.card .watchers:before { content: "\f06e"; width: 14px; font-size: 14px; float: left; display: block; margin: 0 2px 0 0; }

.card-tags { overflow: hidden; margin: 5px 10px 0 10px; height: 15px; }
.card-tags a { text-decoration: underline; display: inline-block; vertical-align: top; height: 15px; line-height: 15px; font-size: 11px; }
.card-tags a:hover { text-decoration: none; }
.card-tags:before { content: '\f02c'; display: block; float: left; margin: -2px 5px 0 0; font-size: 16px; }

.badge { height: 20px; line-height: 20px; border-radius: 6px; font-weight: bold; padding: 0 7px; font-size: 11px; text-transform: uppercase; overflow: hidden; display: block; position: absolute; top: 4px; right: 4px; }


.paging { clear: both; padding: 16px 3px 0 3px; text-align: center; font-size: 0; overflow: hidden; }
.paging a, .paging span { border-width: 1px; border-style: solid; display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; font-weight: bold; height: 30px; line-height: 30px; border-radius: 6px; padding: 0 5px; min-width: 20px; font-size: 14px; text-transform: uppercase; }
.paging a.back:after { content: '\f104'; }
.paging a.forward:after, .paging a.forward.expand:after { content: '\f105'; }
.paging a.expand { padding: 0 20px 0 25px; height: 40px; line-height: 40px; }
.paging a.expand:after { transform: rotateZ(90deg); content: '\f35d'; margin-left: 15px; font-size: 20px; width: 20px; }
.paging a.all:after { transform: rotateZ(0deg);  }


.side-box { border-radius: 12px; padding: 0 10px 15px 10px; margin: 20px 10px 0 10px; overflow: hidden; }
.side h2 { font-weight: bold; margin-top: 20px; }

.link-group { columns: 2; column-count: 2; overflow: hidden; padding: 15px 5px 0 5px; clear: both; }
.link-group a {display: block; height: 26px; line-height: 26px; font-size: 16px; margin: 0 5px 5px 5px; overflow: hidden; white-space: nowrap; text-overflow: hidden; }

.about { clear: both; }
.about p { margin: 10px 10px 0 10px; text-align: justify; }
.about a { text-decoration: underline; font-weight: bold; }
.about a:hover { text-decoration: none; }
.about ul { padding: 5px 10px 0 10px; }
.about li { margin-top: 5px; list-style-type: disc; margin-left: 20px; }

.about.page-404, .about.page-404 p { text-align: center; }
.sad-icon { font-size: 150px; height: 150px; line-height: 150px; margin: 20px 10px 0 10px; }
.sad-icon:after { content: '\f119'; }

.stream-zone { overflow: hidden; padding-top: 10px; }
.player { position: relative; overflow: hidden; text-align: center; }
.player.error { padding-top: 0; }
.player iframe { border: 0 none !important; display: inline-block; max-width: 100%; }
.player video { border: 0 none !important; display: block; margin: 0 auto; width: 100%; height: auto; }
.player source { border: 0 none !important; }

.action-bar { overflow: hidden; padding: 5px 0 0 10px; }
.action-bar a { display: block; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 9px; font-size: 12px; overflow: hidden; margin: 5px 3px 0 0; float: left; }
.action-bar a:before { display: block; float: left; margin-right: 2px; width: 15px; font-size: 15px; }
.action-bar a.send:before { content: "\f0e0"; }
.action-bar a.private:before { content: "\f086"; }
.action-bar a.profile:before { content: "\f2c2"; }

.performer-info { padding: 0 0 0 10px; overflow: hidden; line-height: 24px; }
.info-item { overflow: hidden; margin: 10px 20px 0 0; float: left; }
.info-item span { display: inline-block; height: 28px; line-height: 28px; font-size: 14px; border-radius: 6px; padding: 0 10px; }
.info-tags { overflow: hidden; font-size: 0; }
.info-tags a { display: block; float: left; height: 26px; line-height: 26px; font-size: 14px; border-radius: 6px; padding: 0 10px; margin: 5px 5px 0 0; }

.bottom { margin-top: 40px; text-align: center; font-size: 13px; line-height: 20px; text-align: justify; padding-bottom: 20px; }
.bottom p { margin: 10px 10px 0 10px; }
.bottom-heading { font-size: 18px; margin: 10px 10px 0 10px; font-weight: bold; text-transform: uppercase; }
.bottom .link-set { columns: 2; column-count: 2; overflow: hidden; padding: 10px 5px 10px 5px; }  
.bottom .link-set a { display: block; line-height: 26px; height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; margin: 0 5px 5px 5px; }
.bottom .link-set a:before { content: "\f002"; width: 14px; font-size: 14px; margin-right: 3px;  }

#go-top { border-radius: 9px; border: 0 none; overflow: hidden; opacity: 0.9; position: fixed; z-index: 20000; right: 10px; bottom: 10px; cursor: pointer; display: none; width: 40px; height: 40px; line-height: 40px; font-size: 22px; text-align: center; }
#go-top:before { content: '\f106'; display: block; height: inherit; line-height: inherit; font-weight: 900; }
#go-top:hover { opacity: 1; }
#go-top.without-navigation { bottom: 40px; }

@media all and (min-width:460px) {
    a.brand { font-size: 22px; }
    .menu nav a { margin: 0 10px; }
    .menu nav a:before { margin-right: 8px; width: 35px; height: 35px; line-height: 35px; border-radius: 4px; font-size: 20px; text-align: center; }
    .action-bar a { height: 36px; line-height: 36px; padding: 0 13px; font-size: 13px; }
    .action-bar a:before { margin-right: 3px; width: 18px; font-size: 18px; }
    .link-group, .bottom .link-set { columns: 3; column-count: 3; }
}

@media all and (min-width:640px) {
    main { margin-top: 10px; }
    h1 { font-size: 22px; line-height: 26px; }
    h2 { font-size: 20px; line-height: 24px; }
    a.brand { font-size: 28px; height: 40px; line-height: 40px; margin-top: 10px; }
    .finder { padding: 10px 10px 0 0;}
    .finder .input-wrap { height: 40px; line-height: 40px; padding: 0 45px 0 25px; }
    .finder button { width: 40px; height: 40px; line-height: 40px; }
    .menu { padding-top: 10px; }
    .menu nav {  height: 40px; }
    .menu nav a { margin: 0 15px; height: 40px; line-height: 40px; font-size: 16px; }
    .menu nav a:before { margin-right: 10px; width: 40px; height: 40px; line-height: 40px; font-size: 24px; }
    .card { width: 33.3333%; }
    .action-bar a { height: 40px; line-height: 40px; padding: 0 15px; font-size: 14px; }
    .action-bar a:before { margin-right: 4px; width: 20px; font-size: 20px; }
    .paging a, .paging span { height: 43px; line-height: 43px; min-width: 33px; }
    .link-group, .bottom .link-set { columns: 4; column-count: 4; }
}

@media all and (min-width:930px) {
    .card { width: 25%; }
}

@media all and (min-width:1130px) {
    .top-bar .container { min-height: 50px; }
    a.brand { position: absolute; top: 0; left: 0;  }
    .finder { float: right; width: 220px;  position: absolute; top: 0; right: 0; }
    .menu { clear: none; }
}

@media all and (min-width:1020px) {
    h1 { font-size: 24px; line-height: 28px; margin-top: 40px; }
    h2 { font-size: 22px; line-height: 26px; }
    .top-bar { padding: 10px 0 0 0; }
    main { margin-top: 20px; }
    .card figure { transition: 0.3s ease; }
    .card a:hover figure { transform: scale(1.1); }
    .stream-zone { padding: 10px 10px 0 10px; }
    .action-bar { padding: 15px 0 0 0; margin: 0; }
    .action-bar a { height: 50px; line-height: 50px; padding: 0 30px; font-size: 16px; }
    .action-bar a:before { margin-right: 3px; width: 22px; font-size: 22px; }
    .performer-info { padding: 10px 0 0 0; }
    #go-top { right: 20px; bottom: 20px; }
    .paging { padding-top: 36px; }
    .layout { display: flex; }
    .main-area { order: 2; width: 80%; overflow: hidden; }
    .main-area .card { width: 25%; }
    .side { width: 250px; order: 1; overflow: hidden; }
    .side-box { margin: 20px 10px 0 10px; border-radius: 24px; }
    .link-group { columns: 1; column-count: 1; column-gap: 0}
    
    .stream-main { overflow: hidden; }
    .stream-block { overflow: hidden; float: left; width: 75%}
    .related { float: right; width: 25%; }
    .related .card { width: 100%; }
    .related-box { overflow-y: auto; max-height: 600px; max-height: 800px; }
    .related-box::-webkit-scrollbar { width: 6px; }
    .related-box::-webkit-scrollbar-thumb { border-radius: 20px; }

}

@media all and (min-width:1260px) {
    a.brand { font-size: 34px; }
    .card { width: 20%; }
    
}
@media all and (max-width:1020px) {* { -webkit-tap-highlight-color: transparent; -webkit-focus-ring-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}}