@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body, ul, li, p, h1, h2, form, input, button { margin: 0; padding: 0; }
li { list-style-type: none; }

body { background-color: rgb(0,0,0); color: rgb(100,100,100); font-family: 'Open Sans Condensed', sans-serif; font-size: 14px; }

img { background-color: rgb(60,60,60); display: block; border: 0 none; }

a { color: rgb(245,245,245); text-decoration: none;  }
a:hover { color: rgb(102,203,255); }

h1 { color: rgb(245,245,245); font-size: 28px; line-height: 30px; font-weight: normal; margin: 8px 3px 0 3px; display: block; }
h2 { color: rgb(245,245,245); font-size: 26px; line-height: 28px; font-weight: normal; margin: 25px 3px 0 3px; display: block; }


.wrapper-block { margin: 0 auto; }

.header { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(60,60,60),rgb(20,20,20)); border: 1px solid rgb(10,10,10); box-shadow: 0 0 0 1px rgb(50,50,50); text-align: center; margin: 10px 4px 0 4px; padding: 0 0 10px 0; font-size: 0; overflow: hidden; }

.logo { display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; }
.logo a { display: block; width: 300px; height: 50px; }
.logo a img { background: none; width: 300px; height: 50px; }

.header-nav {  }
.header-nav li { display: inline-block; vertical-align: top; width: 32%; margin: 10px 0.5% 0 0.5%; position: relative; }
.header-nav li a, .header-nav li i { background-color: rgb(40,40,40); border: 1px solid rgb(10,10,10); color: rgb(245,245,245); text-shadow: 1px 1px 3px rgb(0,0,0); height: 30px; line-height: 30px; display: block; font-size: 14px; padding: 0 5px; overflow: hidden; }
.header-nav li a:hover, .header-nav li i:hover, .header-nav li.active a, .header-nav li.active i { background-color: rgb(30,30,30); color: rgb(102,203,255); }
.header-nav li i { cursor: pointer;  }
.header-nav li.search { clear: both; display: none; width: 98%; margin: 10px 1% 0 1%; }
.header-nav li.search form { width: 100%; display: table; height: 30px; }
.header-nav li.search input, .header-nav li.search button { display: table-cell; vertical-align: top; padding: 0 10px; font-family: 'Open Sans Condensed', sans-serif; border: 1px solid rgb(10,10,10); outline: 0 none; font-size: 16px; height: 30px; line-height: 30px; }
.header-nav li.search input { background-color: rgb(225,225,225); color: rgb(10,10,10); width: 80%;  text-align: left; font-weight: bold; border-right: 0 none; }
.header-nav li.search input:focus { background-color: rgb(255,255,255); border-color: rgb(102,203,255); }
.header-nav li.search button { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(50,50,50),rgb(30,30,30)); color: rgb(245,245,245); width: 20%; cursor: pointer;  text-align: center;}
.header-nav li.search button:hover { background: linear-gradient(to bottom,rgb(132,233,255),rgb(72,173,225)); color: rgb(255,255,255); }

.cont-block { text-align: center; }

.previews-block { font-size: 0; padding-top: 4px; }

.preview-block { background-color: rgb(30,30,30); display: inline-block; vertical-align: top; font-size: 12px; text-align: left; margin: 2% 1% 0 1%; width: 48%; height: auto; position: relative; }
.preview-block a { border: 2px solid rgb(50,50,50); display: block; box-shadow: 0 6px 15px -7px rgb(0,0,0); }
.preview-block a:hover { background-color: rgb(102,203,255); color: rgb(255,255,255); border-color: rgb(102,203,255); }
.preview-block img { width: 100%; height: auto; }
.preview-name { background: linear-gradient(to bottom,rgb(50,50,50),rgb(30,30,30)); height: 30px; overflow: hidden; padding: 0 10px; }
.preview-name span { display: block; overflow: hidden; line-height: 20px; height: 20px; margin: 5px 0; text-shadow: 1px 1px 3px rgb(0,0,0); overflow: hidden; }
.preview-block a:hover .preview-name { background: linear-gradient(to bottom,rgb(132,233,255),rgb(72,173,225)); }
.preview-info-block { background-color: rgb(20,20,20); color: rgb(160,160,160); padding: 0 10px; overflow: hidden; height: 20px; line-height: 20px; font-size: 11px; }
.preview-views-count { float: left; }
.preview-dur-value{ float: right; }
.preview-info-block span { color: rgb(120,120,120); }
.preview-block a:hover .preview-info-block { color: rgb(245,245,245); }
.preview-block a:hover .preview-info-block span { color: rgb(190,190,190); }
.preview-play { display: none; background-color: rgba(0,0,0,0.3); position: absolute; width: 240px; height: 180px; left: 0; top: 0; text-align: center; }
.preview-play i { display: block; height: 180px; line-height: 180px; font-size: 48px; }

.cat-preview-block { font-size: 14px; }

.pages-nav { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(60,60,60),rgb(20,20,20)); border: 1px solid rgb(10,10,10); box-shadow: 0 0 0 1px rgb(50,50,50); text-align: center; margin: 10px 4px 0 4px; padding: 0 0 10px 0; font-size: 0; overflow: hidden; }
.pages-nav li { display: inline-block; vertical-align: top; width: 23%; margin: 10px 1% 0 1%; position: relative; }
.pages-nav li a, .pages-nav li span { border: 1px solid rgb(10,10,10); text-shadow: 1px 1px 3px rgb(0,0,0); height: 30px; line-height: 30px; display: block; font-size: 14px; padding: 0 5px; overflow: hidden; }
.pages-nav li a { background-color: rgb(40,40,40); border: 1px solid rgb(10,10,10); color: rgb(245,245,245);  }
.pages-nav li a:hover, .pages-nav li.active a { background-color: rgb(30,30,30); color: rgb(102,203,255); }
.pages-nav li span { background-color: rgb(30,30,30); color: rgb(102,203,255);  }
.pages-nav li span.pages-grey { color: rgb(130,130,130);  }

.pages-nav ul.pages-next-prev li { width: 48%; }

.text-desc-block { margin: 30px 3px 0 3px; border: 1px solid rgb(40,40,40); color: rgb(160,160,160); font-size: 12px; line-height: 16px; padding: 10px; }
.text-desc-block span { color: rgb(102,203,255); }

.popular-categories-block .cat-preview-block { font-size: 16px; }
.all-cats-icon { display: block; position: absolute; z-index: 1000; left: 50%; top: 50%; width: 50px; height: 50px; line-height: 50px; font-size: 48px; margin: -50px 0 0 -25px; }
.all-cats-icon i { width: 50px; height: 50px; line-height: 50px; display: block; }
.view-all-cats .preview-name { height: 50px; text-align: center; text-transform: uppercase; }
.view-all-cats .preview-name span { height: 40px; line-height: 40px; }
.view-all-cats a:hover .all-cats-icon i { color: rgb(102,203,255); }


.fr-toplist-block { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(60,60,60),rgb(30,30,30)); border: 1px solid rgb(10,10,10); border-right: 0 none; border-bottom: 0 none; box-shadow: 0 0 0 1px rgb(50,50,50); text-align: center; margin: 10px 4px 0 4px; font-size: 0; overflow: hidden; }
.fr-toplist-block ul { display: inline-block; vertical-align: top; width: 50%; font-size: 12px;  }
.fr-toplist-block li { }
.fr-toplist-block li a { border-bottom: 1px solid rgba(0,0,0,0.5); border-right: 1px solid rgba(0,0,0,0.5); box-shadow: 1px 1px 0 0 rgba(255,255,255,0.1); display: block; padding: 0 10px; color: rgb(140,140,140); height: 30px; line-height: 30px; overflow: hidden; }
.fr-toplist-block li a:hover { background-color: rgba(0,0,0,0.2); color: rgb(210,210,210); }
.fr-toplist-block li a i { color: rgb(102,203,255); }

.fr-toplist-th-block { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(60,60,60),rgb(30,30,30)); border: 1px solid rgb(10,10,10); border-right: 0 none; border-bottom: 0 none; box-shadow: 0 0 0 1px rgb(50,50,50); text-align: center; margin: 10px 4px 0 4px; font-size: 0; overflow: hidden; }
.fr-tl-th { width: 50%; display: inline-block; vertical-align: top; font-size: 12px; }
.fr-tl-th a { display: block; border-bottom: 1px solid rgba(0,0,0,0.5); border-right: 1px solid rgba(0,0,0,0.5); box-shadow: 1px 1px 0 0 rgba(255,255,255,0.1); color: rgb(140,140,140); padding: 10px 10px 0 10px; }
.fr-tl-th a:hover { background-color: rgba(0,0,0,0.2); color: rgb(210,210,210); }
.fr-tl-th a img { width: 100%; height: auto; }
.fr-tl-th a span { display: block; height: 30px; line-height: 30px; overflow: hidden; }
.fr-tl-th a i { color: rgb(102,203,255); }


.line-bns-block { margin: 30px 4px 0 4px; background-color: rgb(20,20,20); border: 1px solid rgb(0,0,0); box-shadow: 0 0 0 1px rgb(40,40,40); font-size: 0; padding: 0 0 10px 0; }
.line-bn { background-color: rgb(80,80,80); display: inline-block; vertical-align: top; font-size: 14px; margin: 10px 5px 0 5px; }
.line-bn-2, .line-bn-3, .line-bn-4 { display: none; }

.video-block { background-color: rgb(20,20,20); overflow: hidden; margin: 10px 4px 0 4px; border: 1px solid rgb(10,10,10); box-shadow: 0 0 0 1px rgb(50,50,50); }
.player-cont { box-shadow: 0 5px 15px -7px rgb(0,0,0); background-color: rgb(30,30,30); }
.player { width: 100%; height: 250px; }
.player iframe, .player object, .player embed { width: 100%; height: 100%; }

.video-info-block { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(50,50,50),rgb(30,30,30)); border-bottom: 1px solid rgb(10,10,10); box-shadow: 0 1px 0 0 rgb(50,50,50); font-size: 0; text-shadow: 1px 1px 3px rgb(0,0,0); }
.video-name { padding: 0 0 13px 0; overflow: hidden; }

.video-info { display: table; width: 100%; border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -1px 0 0 rgba(0,0,0,0.5); margin: 1px 0 0 0; }
.video-views-count, .video-dur-value, .video-date-added { border-right: 1px solid rgb(20,20,20); box-shadow: 1px 0 0 0 rgb(60,60,60); color: rgb(205,205,205); height: 30px; line-height: 30px; display: table-cell; vertical-align: top; width: auto; font-size: 12px; padding: 0 10px; }
.video-views-count span, .video-dur-value span, .video-date-added span { color: rgb(145,145,145); }
.video-date-added { border-right: 0 none; box-shadow: 0; }

.video-share-block { display: none; }
.video-share-block img { background: none; }

.video-cats { background-color: rgb(30,30,30); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -1px 0 0 rgba(0,0,0,0.5); padding: 6px 0 10px 0; text-align: left; }
.video-cats span, .video-cats a { display: inline-block; vertical-align: top; margin: 4px 2px 0 2px; padding: 0 10px; height: 30px; line-height: 30px; border: 1px solid rgb(10,10,10); font-size: 14px; }
.video-cats span { color: rgb(140,140,140); text-transform: uppercase; }
.video-cats a { background-color: rgb(40,40,40); background: linear-gradient(to bottom,rgb(60,60,60),rgb(20,20,20)); border: 1px solid rgb(0,0,0); box-shadow: 0 0 0 1px rgb(50,50,50); }
.video-cats a:hover { backround-color: rgb(102,203,255); background: linear-gradient(to bottom,rgb(132,233,255),rgb(72,173,225)); color: rgb(255,255,255); box-shadow: 0 0 0 1px rgb(102,203,255); }

.vert-bns-block { font-size: 0; padding: 0 0 10px 0; }
.vert-bn { background-color: rgb(80,80,80); display: inline-block; vertical-align: top; font-size: 14px; margin: 10px 5px 0 5px; }
.vert-bn-2, .vert-bn-3, .vert-bn-4 { display: none; }

.footer { margin: 30px 3px 0 3px; border-top: 1px solid rgb(50,50,50); padding: 10px 0 15px 0; color: rgb(120,120,120); }
.footer p { margin: 5px 0 0 0; }
.footer p.footer-about { font-size: 16px; color: rgb(160,160,160); }
.footer p.footer-about span { color: rgb(102,203,255); }
.footer a { text-decoration: underline; margin: 0 10px; }
.footer a:hover { text-decoration: none; }














@media screen and (min-width: 400px) {
.preview-block { font-size: 14px; }
.cat-preview-block { font-size: 16px; }
.preview-info-block { font-size: 12px; }
.popular-categories-block .cat-preview-block { font-size: 16px; }
.header-nav li a, .header-nav li i, .pages-nav li a, .pages-nav li span { font-size: 16px; }
.fr-toplist-block ul { font-size: 14px;  }
.fr-tl-th { font-size: 14px; }
.player { height: 300px; }
.video-views-count, .video-dur-value, .video-date-added { font-size: 14px; }
}



@media screen and (min-width: 500px) {
.header-nav li a, .header-nav li i, .pages-nav li a, .pages-nav li span { padding: 0 10px; }
.preview-block { width: 32%; font-size: 12px; margin: 1% 0.5% 0 0.5%; }
.cat-preview-block { font-size: 14px; }
.preview-info-block { font-size: 11px; }
.popular-categories-block .cat-preview-block { font-size: 16px; }
.player { height: 350px; }
}

@media screen and (min-width: 600px) {
.preview-block { font-size: 14px; }
.cat-preview-block { font-size: 16px; }
.preview-info-block { font-size: 12px; }
.popular-categories-block .cat-preview-block { font-size: 16px; }
.fr-toplist-block ul { width: 33.33%; font-size: 13px; }
.fr-tl-th { width: 25%; font-size: 13px; }
.player { height: 400px; }
}

@media screen and (min-width: 630px) {
.line-bn-2, .vert-bn-2 { display: inline-block; }
}

@media screen and (min-width: 700px) {
.player { height: 450px; }
}

@media screen and (min-width: 750px) {
h1, h2 { text-align: left; }
.header { padding: 0; }
.logo { display: block; float: left; margin: 0 0 0 10px; }
.header-nav ul { float: left; text-align: left; margin: 0 0 0 20px; border-left: 1px solid rgb(60,60,60); box-shadow: -1px 0 0 0 rgb(20,20,20); position: relative; }
.header-nav li { margin: 0; width: auto; display: block; float: left; }
.header-nav li a, .header-nav li i  { background: none; border: 0 none; border-right: 1px solid rgb(10,10,10); box-shadow: 1px 0 0 0 rgb(50,50,50); height: 50px; line-height: 50px; padding: 0 15px; }
.header-nav li.search { background-color: rgb(90,90,90); background: linear-gradient(to bottom,rgb(110,110,110),rgb(70,70,70)); box-shadow: 5px 0 15px -5px rgb(0,0,0); clear: none; width: 226px; margin: 0 -259px 0 0; position: absolute; z-index: 1200; top: 0; right: 0; padding: 10px 15px; }
.header-nav ul.header-sort { float: right; margin: 0; }
.header-nav ul.header-sort li:last-child a { border: 0 none; box-shadow: none; }
.pages-nav ul.pages-next-prev li { width: auto; }

.pages-nav { padding: 0; }
.pages-nav ul { float: left; text-align: left; position: relative; }
.pages-nav li { margin: 0; width: auto; display: block; float: left; }
.pages-nav li a, .pages-nav li span { background: none; border: 0 none; border-right: 1px solid rgb(10,10,10); box-shadow: 1px 0 0 0 rgb(50,50,50); height: 40px; line-height: 40px; padding: 0 15px; }
.pages-nav ul.pages-next-prev { float: right; margin: 0; border-left: 1px solid rgb(60,60,60); box-shadow: -1px 0 0 0 rgb(20,20,20); }
.pages-nav ul.pages-next-prev li:last-child a { border: 0 none; box-shadow: none; }

.preview-block { width: 24%; font-size: 12px; }
.cat-preview-block { font-size: 14px; }
.popular-categories-block .cat-preview-block { font-size: 16px; }

.text-desc-block { font-size: 14px; line-height: 18px; }
.fr-toplist-block ul { font-size: 14px; }
.fr-tl-th { font-size: 14px; }
.video-name { padding: 0 10px 13px 10px; }
.video-info-block { text-align: left; }
.video-info { display: block; overflow: hidden; }
.video-views-count, .video-dur-value, .video-date-added, .video-share-block { display: block; float: left; font-size: 16px; height: 45px; line-height: 45px; padding: 0 15px; }
.video-share-block .addthis_sharing_toolbox { margin: 11px 15px 0 15px; }
.video-date-added, .video-share-block { float: right; border-left: 1px solid rgba(255,255,255,0.1); box-shadow: -1px 0 0 0 rgba(0,0,0,0.5); }

.video-cats { padding: 10px 0; }
.video-cats span, .video-cats a { margin: 0; height: 30px; line-height: 30px; font-size: 16px; }
.video-cats span { border-color: transparent; padding: 0 8px 0 15px; }
.video-cats a { margin: 0 5px 0 0; padding: 0 15px; }
}

@media screen and (min-width: 800px) {
.player { height: 500px; }
}

@media screen and (min-width: 850px) {
.header-nav li a, .header-nav li i, .pages-nav li a, .pages-nav li span { padding: 0 20px; }
.header-nav li.search { padding: 10px 20px; margin: 0 -268px 0 0; }
.preview-block { font-size: 14px; }
.cat-preview-block { font-size: 16px; }
.popular-categories-block .cat-preview-block { font-size: 16px; }
}

@media screen and (min-width: 900px) {
.player { height: 550px; }
}

@media screen and (min-width: 940px) {
.line-bn-3 { display: inline-block; }
}


@media screen and (min-width: 1015px) {
.wrapper-block { width: 1000px; }
.header-nav li a, .header-nav li i, .pages-nav li a, .pages-nav li span { font-size: 18px; }
.preview-block { width: 244px; margin: 6px 3px 0 3px; font-size: 18px; height: 239px;}
.preview-block a { position: absolute; top: 0; left: 0; width: 240px; height: auto; z-index: 1000; }
.preview-block a:hover { z-index: 1100; }
.preview-block img { width: 240px; height: 180px; }
.preview-name { height: 35px; }
.preview-name span { margin: 5px 0; height: 25px; line-height: 25px; }
.preview-block a:hover .preview-name { height: auto; max-height: 60px; }
.preview-block a:hover .preview-name span { height: auto; max-height: 50px; }
.preview-block a:hover .preview-play { display: block; }

.cat-preview-block { font-size: 22px; height: 244px; }
.cat-preview-block .preview-name { height: 40px; line-height: 40px; max-height: 40px; }
.cat-preview-block .preview-name span { margin: 0; height: 40px; line-height: 40px; max-height: 40px; }

.text-desc-block { text-align: justify; }

.popular-categories-block .cat-preview-block { width: 160px; height: 176px; font-size: 16px; }

.popular-categories-block .cat-preview-block .preview-name { height: 35px; line-height: 35px; max-height: 35px; }
.popular-categories-block .cat-preview-block .preview-name span { height: 35px; line-height: 35px; max-height: 35px; }
.popular-categories-block .cat-preview-block a { width: 156px; height: auto; } 
.popular-categories-block .cat-preview-block img { width: 156px; height: 117px; }

.popular-categories-block .view-all-cats .preview-name { height: 55px; line-height: 55px; margin: 0; max-height: 55px !important; }
.popular-categories-block .view-all-cats .preview-name span { height: 55px; line-height: 55px; margin: 0; max-height: 55px !important; }

.fr-toplist-block { display: table; width: 990px; border-right: 1px solid rgb(10,10,10); }
.fr-toplist-block ul { display: table-cell; text-align: left; border-right: 1px solid rgba(0,0,0,0.5); box-shadow: 1px 0 0 0 rgba(255,255,255,0.1); width: 16.6666%; }
.fr-toplist-block li a { border-right: 0 none; border-bottom: 1px solid rgba(0,0,0,0.5); box-shadow: 0 1px 0 0 rgba(255,255,255,0.1); }
.fr-toplist-block ul:last-child { width: 165px; border: 0 none; box-shadow: none; }

.fr-tl-th a { padding: 20px 20px 0 20px; }

.video-block { display: table; width: 990px; }
.player-cont { display: table-cell; vertical-align: top; border-right: 1px solid rgb(10,10,10); box-shadow: 1px 0 0 0 rgb(50,50,50); }
.player { height: 380px; }
.video-info-block { border-bottom: 0 none; box-shadow: none; height: 100%; }
.vert-bns-block { width: 300px; display: table-cell; vertical-align: top; padding: 0 10px 10px 10px; }
.vert-bn { display: block; margin: 10px 0 0 0; }
.vert-bn-3 { display: none; }
}


@media screen and (min-width: 1265px) {
h1 { font-size: 30px; line-height: 32px; }
h2 { font-size: 28px; line-height: 30px; }
.header-nav li a, .header-nav li i, .pages-nav li a, .pages-nav li span { padding: 0 25px; font-size: 20px; }
.header-nav li.search { width: 406px; padding: 10px 25px; margin: 0 -458px 0 0; }
.wrapper-block { width: 1250px; }
.pages-nav ul.pages-next-prev li a { padding: 0 30px; }

.popular-categories-block .cat-preview-block { width: 150px; height: 168px; font-size: 14px; }
.popular-categories-block .cat-preview-block a { width: 146px; } 
.popular-categories-block .cat-preview-block img { width: 146px; height: 109px; }

.fr-toplist-block { width: 1240px; }
.fr-toplist-block li a { height: 35px; line-height: 35px; }

.fr-tl-th { width: 12.5%; }
.fr-tl-th a { border-right: 1px solid rgba(0,0,0,0.5); box-shadow: 1px 0 0 0 rgba(255,255,255,0.1); padding: 10px 10px 0 10px; }
.line-bn-4 { display: inline-block; }
.video-block { width: 1240px; }
.player { height: 520px; }
}

@media screen and (min-width: 1515px) {
h1 { font-size: 32px; line-height: 34px; }
h2 { font-size: 30px; line-height: 32px; }
.wrapper-block { width: 1500px; }

.text-desc-block { font-size: 16px; line-height: 20px; }

.popular-categories-block .cat-preview-block { width: 181px; height: 191px; font-size: 18px; }
.popular-categories-block .cat-preview-block a { width: 177px; } 
.popular-categories-block .cat-preview-block img { width: 177px; height: 132px; }

.fr-toplist-block { width: 1490px; }
.fr-toplist-block ul { font-size: 16px; }
.fr-tl-th a { padding: 20px 20px 0 20px; }
.video-block { width: 1490px; }
.player { height: 660px; }
.video-views-count, .video-dur-value, .video-date-added, .video-share-block { height: 52px; line-height: 52px; font-size: 18px; }
.video-share-block .addthis_sharing_toolbox { margin: 14px 15px 18px 15px; }
.video-cats { padding: 15px 0 10px 0; }
.video-cats span, .video-cats a { font-size: 18px; }
.vert-bns-block { padding: 0px 20px 20px 20px; }
.vert-bn { margin: 20px 0 0 0; }
.vert-bn-3 { display: block; }
}