body, .br, .full-bn, .menu, .button, .search
{ background-color: rgb(61,61,71); color: rgb(166,166,171); }

.wrap, .menu a:hover, .menu a.active, .menu li.active a, .video-meta a:hover
{ background-color: rgb(11,11,22); }

.type-sort a:hover, .type-sort a.active, .type-sort li.active a, .pages a:hover, .pages a.active, .pages li.active a, .video-bottom .video-rate .perc-votes, .video-meta a, .video-meta span
{ background-color: rgb(22,22,33); }

img, .head, .menu a, .line-list, .type-sort a, .preview a, .brs-block, .list a, .pages a, .pages span, .full-block, .video-mob-br-300, .foot
{ background-color: rgb(40,40,50); }

.full-tab
{ background-color: rgb(61,61,71); }

.type-sort a, .pages a, .pages span, .video-bottom .video-rate span.votes, .video-bottom .video-rate .perc-votes, .video-meta a
{ border-color: rgb(61,61,71); }

@media all and (min-width:1230px) {
    .menu a { background-color: rgb(61,61,71); border-top: 5px solid rgb(90,90,100); }
}

a, h1, h2, .video-meta span i
{ color: rgb(244,244,255); }

a:hover, h1 i, .menu a:hover, .menu a.active, .menu li.active a, .menu a i, .search button:hover, .line-list span, .line-list i, .type-sort a:hover, .type-sort a.active, .type-sort li.active a, .preview .name i, .list a i, .pages a:hover, .pages a.active, .pages li.active a, .foot span, .type-sort span, .video-meta a i
{ color: rgb(71,196,236); }

.list a.all, .close:hover, .bot-close:hover
{ background-color: rgb(40,165,215); }

.button:hover, .button.active, .logo a, .line-list li a:hover, .preview .views-total, .list a:hover, .close, .bot-close
{ background-color: rgb(60,185,235); color: rgb(255,255,255); }

.logo a
{ background: linear-gradient(to bottom,rgb(70,195,245),rgb(50,175,225)); }

.menu, .menu a:hover, .menu a.active, .menu li.active a, .type-sort a:hover, .type-sort a.active, .type-sort li.active a, .pages a:hover, .pages a.active, .pages li.active a, .video-meta a:hover
{ border-color: rgb(60,185,235); }

.logo a, .button
{ color: rgb(255,255,255); }

.logo a span, .line-list li a:hover i, .list a:hover i, .list a.all i
{ color: rgb(0,0,11); }

.search-input { background-color: rgb(255,255,255); }
.search input { color: rgb(40,40,50);  }
.search input::placeholder { color: rgb(80,80,90); }
.search button { color: rgb(120,120,130); }




body,html,div,p,a,ul,li,input,button,form,textarea,span,img,h1,h2,h3 { margin: 0; padding: 0; }

div, ul, li, a { overflow: hidden; }

body { font-family: Arial, sans-serif; text-transform: uppercase; }

li { list-style-type: none; }

img { display: block; }

a { text-decoration: none; }

h1, h2 { font-weight: bold; }
h1 { padding-left: 1px; font-size: 16px; line-height: 18px; margin: 10px 10px 0 9px; text-align: center; }
h2 { font-size: 18px; line-height: 22px; margin: 40px 10px 0 10px; }

.wrap { margin: 10px auto; width: 98%; max-width: 890px; padding-bottom: 10px; }

.head { margin: 10px 10px 0 10px; position: relative; text-align: center; overflow: visible; }

.logo { float: left; }
.logo a { height: 40px; line-height: 40px; font-size: 14px; display: block; font-weight: bold; text-transform: uppercase; padding: 0 10px; }

.button { float: right; cursor: pointer; height: 40px; line-height: 40px; font-size: 18px; width: 40px; }

.menu { display: none; border-top-width: 8px; border-top-style: solid; position: absolute; top: 40px; right: 0; z-index: 10000; width: 240px; }
.menu ul { padding: 9px 10px 10px 10px; }
.menu li { margin-top: 1px; }
.menu a { display: block; height: 46px; line-height: 46px; font-size: 14px; padding: 0 20px; text-align: left; }

.search { clear: both; padding: 10px; }
.search form { overflow: hidden; position: relative; }
.search-input { height: 40px; line-height: 40px; padding: 0 40px 0 10px; }
.search input { background: none; width: 100%; border: 0 none; outline: 0 none; font-size: 14px; height: 40px; line-height: 40px; text-transform: uppercase; }
.search button { background: none; position: absolute; top: 0; right: 0; border: 0 none; cursor: pointer; outline: 0 none; width: 40px; font-size: 28px; height: 40px; line-height: 40px; }

.line-list { margin: 10px 10px 0 10px; height: 30px; line-height: 30px; }
.line-list li { float: left; font-size: 12px; }
.line-list li a, .line-list span { display: block; padding: 0 10px; }
.line-list span { font-weight: bold; }

.type-sort { font-size: 0; text-align: center; }
.type-sort ul { display: inline-block; vertical-align: top; margin: 8px 4px 0 4px; }
.type-sort li { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; }
.type-sort li.val { display: none; }
.type-sort a { border-bottom-width: 4px; border-bottom-style: solid; display: block; padding: 0 10px; font-size: 14px; height: 26px; line-height: 26px; }
.type-sort span { font-size: 28px; height: 30px; line-height: 30px; padding: 0 10px 0 0; display: block; }
.type-sort a.navi-hd { color: rgb(87,187,247); }
.type-sort a.navi-hd:hover, .type-sort a.navi-hd.active, .type-sort li.active a.navi-hd { border-color: rgb(47,147,207); }

.previews-block { margin-top: 10px; }

.preview { width: 100%; float: left; }
.preview a { display: block; position: relative; padding-bottom: 75%; }
.preview a::after { background: linear-gradient(to bottom,transparent,rgba(0,0,0,0.9)); content: ''; position: absolute; left: 0; bottom: 0; height: 70px; width: 100%; }
.preview a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.3s ease; }
.preview .name { color: rgb(255,255,255); text-shadow: 1px 1px 0 rgb(0,0,0); font-weight: bold; font-size: 14px; height: 30px; line-height: 30px; position: absolute; left: 9px; right: 10px; bottom: 0; z-index: 1000; padding-left: 1px; }
.preview .rate, .preview .views-total, .preview .time, .preview .hd { color: rgb(255,255,255); padding: 0 5px; font-size: 12px; height: 20px; line-height: 20px; position: absolute; z-index: 1000; }
.preview .rate { background-color: rgb(47,187,67); bottom: 30px; left: 10px; }
.preview .views-total { bottom: 30px; right: 10px; }
.preview .time { background-color: rgba(0,0,0,0.7); top: 10px; right: 10px; }
.preview .hd { background-color: rgb(47,147,207); top: 10px; left: 10px; }
.preview a:hover div { display: none; }
.preview a:hover::after { display: none; }
.preview a:hover img { transform: scale(1.03); }

.preview-2 .name { font-size: 18px; }
.preview-2 .views-total { bottom: 5px; }

.brs-block { font-size: 0; margin: 20px 10px 0 10px; text-align: center; padding: 8px 0 10px 0; }
.br { width: 300px; height: 250px; margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; }
.br-2, .br-3, .br-4, .br-5 { display: none; }

.sidebar-col { text-align: center; font-size: 0; }

.list { padding: 8px 9px 0 9px; }
.list li { display: inline-block; vertical-align: top; margin: 2px 1px 0 1px; }
.list a { height: 40px; line-height: 40px; font-size: 14px; display: block; padding: 0 10px; font-weight: bold; }

.list-2 a { font-size: 12px; }

.pages { font-size: 0; text-align: center; }
.pages ul { margin: 18px 4px 0 4px; }
.pages li { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; }
.pages a, .pages span { border-bottom-width: 4px; border-bottom-style: solid; display: block; padding: 0 5px; font-size: 14px; height: 36px; line-height: 36px; min-width: 30px; }

.full-wrap { margin: 10px 10px 0 10px; }
.full-tab { display: table; width: 100%; }
.full-block { padding-bottom: 10px; }
.video { background-color: rgb(0,0,0); position: relative; width: 100%; padding-bottom: 56.25%; }
.video iframe, .video object, .video embed, .video video, .video source { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2000; }
.video div { overflow: visible; }

.on-player-pl { display: none; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; }
.on-player { background-color: rgb(45,45,45); position: absolute; top: 50%; left: 50%; width: 300px; height: 250px; z-index: 5500; margin: -125px 0 0 -150px; overflow: visible; }
.close, .bot-close { position: absolute; cursor: pointer; height: 34px; line-height: 34px; text-align: center; }
.on-player-sp { width: 300px; height: 250px; }
.on-player-sp iframe { width: 300px !important; height: 250px !important; position: static; }
.close { font-family: Arial, sans-serif; width: 34px; font-size: 16px; top: -17px; right: -17px; }
.bot-close { left: 50%; bottom: -17px; font-size: 13px; width: 160px; margin-left: -80px; }

.video-bottom { font-size: 0; text-align: center; }
.video-bottom .video-rate li { margin: 10px 10px 0 10px; text-align: center; display: inline-block; vertical-align: top; }
.video-bottom .video-rate a { background: none; cursor: pointer; height: 50px; line-height: 50px; font-size: 50px; padding: 0; }
.video-bottom .video-rate .perc-votes { border-width: 1px; border-style: solid; height: 48px; line-height: 48px; border-radius: 3px; min-width: 80px; }
.video-bottom .video-rate span.perc { color: rgb(67,207,87); height: 24px; line-height: 24px; font-size: 14px; font-weight: bold; padding: 0 10px; display: block; }
.video-bottom .video-rate span.votes { border-top-width: 1px; border-top-style: solid; height: 23px; line-height: 23px; padding: 0 10px; font-size: 12px; display: block; }
.video-bottom .video-rate a.like:hover { color: rgb(67,207,87); }
.video-bottom .video-rate a.dislike:hover { color: rgb(225,80,135); }
.video-meta { margin-top: 18px; padding-left: 10px; }
.video-meta li { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; font-size: 12px; }
.video-meta a, .video-meta span { display: block; height: 30px; line-height: 30px; padding: 0 10px; }
.video-meta a { border-bottom-width: 3px; border-bottom-style: solid; height: 27px; line-height: 27px; }

.full-bns-block { text-align: center; font-size: 0; padding: 8px 0 10px 0; }
.full-bn { margin: 2px 1px 0 1px; display: inline-block; vertical-align: top; width: 300px; height: 250px; }
.full-bn-2, .full-bn-3 { display: none; }

.video-wide-br { background-color: rgb(0,0,0); padding-bottom: 10px; }
.video-mob-br-300 { margin: 10px auto 0 auto; width: 300px; height: 100px; }

.foot { padding: 0 10px 15px 10px; font-size: 14px; line-height: 18px; margin-top: 20px; text-align: center; }
.foot p { margin: 15px 5px 0 5px; }
.foot span { font-weight: bold; }
.foot ul { padding-top: 10px; }
.foot li { margin: 5px 5px 0 5px; display: inline-block; vertical-align: top; }
.foot a { text-decoration: underline; }
.foot a:hover { text-decoration: none; }

@media all and (min-width:32px) {
    .preview { width: 50%; }
}


@media all and (min-width:400px) {
    .logo a { font-size: 18px; }
    .preview .name { font-size: 13px; }
    .preview .rate, .preview .views-total, .preview .time, .preview .hd { font-size: 10px; }
}

@media all and (min-width:600px) {
    .logo a { font-size: 28px; height: 50px; line-height: 50px;}
    .button { font-size: 22px; height: 50px; line-height: 50px; width: 50px; }
    .search-input, .search input { height: 50px; line-height: 50px; font-size: 18px; }
    .search button { height: 50px; line-height: 50px; font-size: 36px; }
    .line-list { height: 35px; line-height: 35px; }
    .line-list li { font-size: 13px; }
    .menu { top: 50px; width: 280px; }
    .menu ul { padding: 14px 15px 15px 15px; }
    .menu a { height: 56px; line-height: 56px; font-size: 16px; }
    .preview a::after { height: 80px; }
    .preview .name { font-size: 14px; height: 40px; line-height: 40px; }
    .preview .rate, .preview .views-total, .preview .time, .preview .hd { font-size: 12px; }
    .preview .rate, .preview .views-total { bottom: 40px; }
    .preview-2 .views-total { bottom: 9px; }
}

@media all and (min-width:640px) {
    .preview { width: 33.3333%; }
    .on-player-pl { display: block; }
    .br-2, .full-bn-2 { display: inline-block; }
}

@media all and (min-width:800px) {
    .wrap { padding-bottom: 20px; margin: 20px auto; }
    .head, .line-list, .previews-block, h1, .brs-block, .full-wrap, .foot { margin: 20px 20px 0 20px; }
    .logo a { font-size: 38px; height: 60px; line-height: 60px; padding: 0 15px; }
    .button { font-size: 26px; height: 60px; line-height: 60px; width: 60px; }
    .search { padding: 15px; }
    .search-input { padding-left: 15px; }
    .line-list { height: 40px; line-height: 40px; padding-left: 5px; }
    .line-list li { font-size: 14px; }
    .menu { top: 60px; width: 300px; }
    .menu a { height: 66px; line-height: 66px; font-size: 18px; }
    h1 { font-size: 24px; line-height: 26px; }
    h2 { font-size: 22px; line-height: 24px; margin: 40px 20px 0 20px; }
    .preview .name { font-size: 16px; }
    .preview .rate, .preview .views-total, .preview .time, .preview .hd { font-size: 13px; height: 25px; line-height: 25px; padding: 0 7px; }
    .preview-2 .name { font-size: 24px; }
    .brs-block { padding: 13px 0 15px 0; }
    .full-wrap { margin-top: 10px; }
}

@media all and (min-width:940px) {
    .wrap { width: 890px; max-width: 100%; }
    .type-sort a { height: 36px; line-height: 36px; }
    .type-sort span { height: 40px; line-height: 40px; }
    .content-col { float: right; width: 680px; }
    .sidebar-col { float: left; width: 210px; text-align: left; }
    h1 { text-align: left; }
    h2.sidebar-top-title { display: none; }
    .type-sort ul { float: left; margin: 8px 0 0 20px; }
    .type-sort li { margin: 2px 2px 0 0; float: left; }
    .type-sort li.val { display: block; }
    .sidebar-col h2 { font-size: 18px; line-height: 20px; margin-right: 0; }
    .list { padding: 19px 0 0 20px; }
    .list li { display: block; margin: 1px 0 0 0; }
    .list a { font-size: 14px; }
    .list-2 a { font-size: 11px; }
    .list-2 { padding-top: 9px; }
    .preview { width: 320px; }
    .pages a, .pages span { font-size: 18px; height: 46px; line-height: 46px; min-width: 40px; }
    .foot { text-align: justify; }
} 

@media all and (min-width:1230px) {
    .wrap { width: 1210px; }
    .head { overflow: hidden; background: none; }
    .button { display: none; }
    .logo { width: 240px; }
    .logo a { height: 70px; line-height: 70px; font-size: 24px; }
    .menu { background: none; border: 0 none; position: static; float: right; display: block !important; width: 372px; height: 70px; }
    .menu ul { padding: 0; }
    .menu li { float: left; margin: 0 0 0 1px; }
    .menu a { height: 65px; line-height: 65px; font-size: 14px; }
    .search { clear: none; float: left; padding: 10px; width: 536px; margin-left: 1px; }
    .search input { font-size: 14px; }
    .search button { font-size: 22px; }
    .content-col { width: 1000px; }
    h1 { font-size: 26px; line-height: 40px; height: 40px; overflow: hidden; }
    h2 { font-size: 24px; line-height: 26px; }
    .full-block { padding-bottom: 20px; }
    .video-mob-br-300 { display: none; }
    .video-bottom { text-align: left; }
    .video-bottom .video-rate { float: left; margin: 18px 0 0 10px; }
    .video-meta { padding-left: 20px; }
    .full-block, .full-bns-block { display: table-cell; vertical-align: top; }
    .video-bottom .video-rate a { height: 70px; line-height: 70px; font-size: 70px; }
    .video-bottom .video-rate .perc-votes { height: 68px; line-height: 68px; }
    .video-bottom .video-rate span.perc { height: 34px; line-height: 34px; font-size: 18px; }
    .video-bottom .video-rate span.votes { height: 33px; line-height: 33px; font-size: 14px; }
    .video-meta li { font-size: 14px; }
    .video-meta a, .video-meta span { height: 40px; line-height: 40px; padding: 0 15px; }
    .video-meta a { height: 37px; line-height: 37px; }
    .full-bns-block { width: 312px; padding-top: 2px; }
    .full-bn { margin-top: 4px; }
    .br-3 { display: inline-block; }
} 

@media all and (min-width:1550px) {
    .wrap { width: 1530px; }
    .logo { width: 300px; }
    .logo a { font-size: 32px; }
    .menu { width: 442px; }
    .menu a { font-size: 16px; min-width: 100px; text-align: center; }
    .search { width: 716px; padding: 10px 15px; }
    .search input { font-size: 16px; }
    .search button { font-size: 28px; }
    .content-col { float: right; width: 1320px; }
    .line-list { height: 45px; line-height: 45px; }
    .type-sort a { padding: 0 15px; font-size: 16px; height: 41px; line-height: 41px; }
    .type-sort span { height: 45px; line-height: 45px; }
    .br-4 { display: inline-block; }
    .pages a, .pages span { height: 56px; line-height: 56px; min-width: 50px; }
} 

@media all and (min-width:1870px) {
    .wrap { width: 1850px; }
    .logo { width: 360px; }
    .logo a { font-size: 40px; height: 80px; line-height: 80px; }
    .menu { width: 492px; height: 80px; }
    .menu a { font-size: 18px; min-width: 120px; height: 75px; line-height: 75px; }
    .search { width: 926px; padding: 15px; }
    .search input { font-size: 18px; }
    .search button { font-size: 30px; }
    .content-col { float: right; width: 1640px; }
    .br-5 { display: inline-block; }
    .video { padding-bottom: 0; height: 744px; }
    .full-bns-block { width: 302px; padding-top: 0; }
    .full-bn { margin-top: 1px; }
    .full-bn-3 { display: inline-block; }
}