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

body {background-color: #CBD9D6;color: #483e3e;font-family: 'Abel', sans-serif;}
input, button { font-family: 'Abel', sans-serif; }

.categories-list {
	    overflow: hidden;
}

.categories-list li a {
    background-color: #a3bfbc;
    margin: 2px 2px 0 0;
    display: block;
    overflow: hidden;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
}
.categories-list li a:hover { background-color: #c5d8d6
; color: #000000; box-shadow: 0 0 0 1px #ffffff;}

li { list-style-type: none; }

img { background-color: rgb(2, 2, 2); display: block; }

a {color: #1b1a1a;text-decoration: none;}
a:hover {color: #484242;}

h1, h2 { display: block; font-weight: normal; text-transform: uppercase; }
h1 {color: #000000;font-size: 20px;line-height: 22px;}
h2 {background-color: #a3bfbc;color: #000000;padding: 10px;font-size: 22px;margin: 20px 1px 0 1px;}
 
.head-wrapper { font-size: 0; text-align: center; overflow: hidden; }
.head {background-color: #a3bfbc;margin: 2px 1px 0 1px;text-align: center;overflow: hidden;}
.head-top { overflow: hidden; padding: 10px 5px; }
.logo { display: inline-block; vertical-align: top; margin: 0 5px; }
.logo a {color: rgb(252,252,252);text-transform: uppercase;font-size: 24px;height: 30px;line-height: 30px;}
.logo a span {color: #020202;}

.head-open-menu {background-color: #9cc0bc;color: #fcfcfc;height: 30px;line-height: 30px;width: 30px;font-size: 18px;display: inline-block;vertical-align: top;margin: 0 5px;cursor: pointer;}
.head-open-menu.active, .head-open-menu:hover {background-color: rgb(156, 192, 188);color: rgb(255,255,255);}

.head-bottom { display: none; border-top: 2px solid rgb(2,2,2); padding: 0 0 10px 0; }
.head-menu { overflow: hidden; }
.head-menu li { display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; text-transform: uppercase; position: relative; }
.head-menu li a { display: block; font-size: 16px; line-height: 20px; }
.head-menu li a:hover, .head-menu li.active a {color: #fbf9f9;}

.search { margin: 10px auto 0 auto; width: 96%; max-width: 400px; }
.search form { position: relative; }
.search input, .search button { display: block; font-size: 14px; outline: none; }
.search input { background-color: transparent; border: 1px solid rgb(82,82,82); color: rgb(242,242,242); border-radius: 15px; width: 96%; padding: 0 2%; height: 28px; line-height: 28px; }
.search input:focus { background-color: rgb(12,12,12); border-color: rgb(24, 24, 24); }
.search button { background-color: transparent; color: rgb(162,162,162); position: absolute; top: 0; right: 5px; height: 30px; line-height: 30px; width: 30px; cursor: pointer; font-size: 16px; border: 0 none; }
.search button:hover { color: rgb(0, 0, 0); }

.wrapper { margin: 0 auto; width: 99%; text-align: left; text-transform: capitalize; }

.top-bl {background-color: #a3bfbc;margin: 2px 1px 0 1px;overflow: hidden;padding: 10px;font-size: 0;}
.sort { overflow: hidden; }
.sort li { display: block; display: inline-block; vertical-align: top; margin: 5px 5px 0 5px; font-size: 16px; line-height: 20px; }
.sort li span { display: none; }
.sort li a:hover, .sort li.active a, .sort li i { color: rgb(30, 30, 30); }
.sort li a:hover, .sort li.active a { text-decoration: underline;  }

.clear-line { clear: both; }

.thumb-bl { float: left; width: 100%; }
.thumb { background-color: #a3bfbc; position: relative; margin: 2px 1px 0 1px; }
.thumb:hover { background-color: #c5d8d6; box-shadow: 0 0 0 1px rgb(242, 238, 238); }
.thumb:hover a { color: #000000; }
.thumb img { width: 100%; height: auto; max-height: 200px; }
.thumb:hover img { opacity: 0.9; }
.thumb p { line-height: 30px; height: 30px; font-size: 14px; overflow: hidden; padding: 0px 10px; text-transform: capitalize; }
.thumb-dur, .thumb-total, .thumb-added { position: absolute; background-color: rgba(12, 12, 12, 0.4); color: rgb(212,212,212); height: 20px; line-height: 20px; padding: 0 5px; font-size: 10px; }
.thumb-total { left: 2px; bottom: 32px; }
.thumb-added { right: 2px; top: 2; }
.thumb-dur { right: 2px; bottom: 32px; }

.thumb-ctr p {text-transform: uppercase; font-size: 18px; }

.pages-bl { overflow: hidden; margin-top: 10px; text-align: center; font-size: 0; }
.pages-bl li { display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; }
.pages-bl li span { background-color: rgb(22,22,22); min-width: 30px; display: block; height: 40px; line-height: 40px; padding: 0 5px; font-size: 14px; }
.pages-bl li a span.page {background-color: #9cc0bc;color: rgb(41, 37, 37);}
.pages-bl li span.page, .pages-bl li a:hover span.page {background-color: #9cc0bc;color: #f2eeee;}

.go-to-all li a { padding: 0 20px; text-transform: uppercase; font-size: 16px; }

.bns-bl { margin-top: 18px; text-align: center; overflow: hidden; font-size: 0; }
.bn { background-color: rgb(42,42,42); display: inline-block; vertical-align: top; margin: 2px 1px 0 1px; width: 300px; height: 250px; padding: 10px; }
.bn-2, .bn-3, .bn-4, .bn-5 { display: none; }

.top-list { overflow: hidden; }
.top-list ul { width: 50%; float: left; }
.top-list li { margin: 2px 1px 0 1px; }
.top-list li a {background-color: #9cc0bc;color: #483e3e;height: 35px;line-height: 35px;padding: 0 10px;font-size: 14px;display: block;overflow: hidden;}
.top-list li a i { color: #483e3e; }
.top-list li a:hover { background-color: #c5d8d6; color: #363940; box-shadow: 0 0 0 1px #f2eeee; }

.video-block {background-color: rgb(163, 191, 188);overflow: hidden;margin: 2px 1px 0 1px;}
.player {background-color: rgb(203, 217, 214);position: relative;width: 100%;height: 250px;}
.player iframe, .player object, .player embed { width: 100%; height: 100%; }

.on-player-wrap { background-color: rgb(203, 217, 214); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; }
.on-player-block { position: absolute; top: 50%; left: 50%; width: 300px; height: 250px; z-index: 5500; margin: -125px 0 0 -150px; }
.on-pl-spts { overflow: hidden; }
.on-player-spot { background-color: rgb(203, 217, 214); width: 300px; height: 250px; }
.on-player-spot-2 { display: none; }
.on-player-close { position: absolute; z-index: 5600; background-color: rgb(242,242,242); color: rgb(203, 217, 214); border-radius: 3px; top: 0; right: 0; font-weight: bold; width: 30px; text-align: center; height: 30px; line-height: 32px; text-transform: uppercase; font-size: 18px; cursor: pointer; transition: 0.2s ease; }
.on-player-close:hover { background-color: rgb(203, 217, 214); color: rgb(245, 208, 255); }

.right-player-col {background-color: rgb(200, 216, 214);margin: 2px 1px 0 1px;font-size: 0;text-align: center;padding: 8px 9px 10px 9px;overflow: hidden;}
.player-bn { background-color: rgb(203, 217, 214); display: inline-block; vertical-align: top; margin: 2px 1px 0 1px; width: 300px; height: 250px; }
.player-bn-2, .player-bn-3 { display: none; }

.video-info { overflow: hidden; padding: 0 0 10px 10px; }
.video-info h1 { margin: 10px 10px 0 0; }
.video-info ul { overflow: hidden; }
.video-info li {  float: left; font-size: 14px; line-height: 18px; }
ul.video-meta li { margin: 10px 10px 0 0; }
ul.video-meta li span {color: #483e3e;}
ul.video-tags { margin-top: 5px; }
ul.video-tags li { margin: 5px 10px 0 0; }
ul.video-tags li i { color: #483e3e; }
ul.video-tags li a:hover { text-decoration: underline; }

.footer-wrapper {background-color: #a3bfbc;margin-top: 20px;}
.footer { margin: 0 auto; overflow: hidden; text-align: center; padding: 10px 0 20px 0; width: 98%; font-size: 16px; }
.footer p { margin-top: 10px; }
.footer span {color: #000000;}
.footer a { text-decoration: underline;}
.footer a:hover { text-decoration: none; }
span.category-total { float: right; }

@media all and (min-width:300px) {
.sort li span { display: inline; }
}

@media all and (min-width:320px) {
    .thumb-bl { width: 50%; }
    .categories-list li { float: left; width: 50%; }
    .player { height: 300px; }
}

@media all and (min-width:400px) {
    .top-list li a { font-size: 16px; }
    .on-player-close { top: -13px; right: -13px; }
}

@media all and (min-width:500px) {
    .logo a { font-size: 26px; }
    .player { height: 350px; }
    .top-list li a { font-size: 18px; }
}

@media all and (min-width:630px) {
    .logo a {font-size: 27px;}
	.thumb-bl { width: 33.3333%; }
    .categories-list li { width: 33.3333%; }
    .top-list ul { width: 25%; }
    .top-list li a { font-size: 14px; }
    .player { height: 400px; }
    .on-player-block { margin-top: -125px; }
    
}

@media all and (min-width:700px) {
    .player { height: 450px; }
	.bn-2, .player-bn-2 { display: inline-block; }
    .top-list li a { font-size: 15px; }
    .on-player-block { width: 604px; margin-left: -302px; }
    .on-player-spot { float: left; margin: 0 1px; }
    .on-player-spot-2 { display: block; }
}

@media all and (min-width:800px) {
	.player { height: 500px; }
    .top-list li a { font-size: 16px; }
}

@media all and (min-width:900px) {
	.player { height: 510px; }
    .categories-list li { width: 25%; }
    .top-list li a { font-size: 17px; }
}

@media all and (min-width:986px) {
    h2 { padding: 15px 10px; font-size: 28px; }
    .wrapper { width: 966px; }
    .head-wrapper { float: left; width: 322px; }
    .head-open-menu { display: none; }
    .head-bottom { display: block !important; }
    .head-menu { height: 30px; }
    .search { width: auto; margin: 10px 10px 0 10px; }
    .search input { width: 280px; padding: 0 10px; }
    .top-bl { display: table; width: 300px; height: 96px; }
    .top-bl-ins { display: table-cell; vertical-align: middle; }
    .thumb-bl { width: 322px; }
    .thumb a img { width: 320px; height: 180px; }
    .thumb-ctr .thumb-name { font-size: 18px; }
	.bn-3 { display: inline-block; }
    .top-list li a {f;font-size: 18px;e;height: 40px;ne-height: 40px;}
    .video-block { float: right; width: 642px; }
	.player { height: 340px; }
	.video-info h1 { height: 22px; overflow: hidden; }
	ul.video-tags { max-height: 23px; }
	.right-player-col { float: left; width: 320px; padding: 17px 0 27px 0; }
	.player-bn { display: block; margin: 10px 10px 0 10px; }
	.player-bn-2, .player-bn-3 { display: none; }
    .footer { width: 966px; }
}


@media all and (min-width:1308px) {
    .wrapper, .footer { width: 1288px; }
    .bn-4 { display: inline-block; }
    .top-list ul { width: 20%; }
    .top-list li a { font-size: 14px; }
    .video-block { width: 964px; }
	.player { height: 542px; }
	.video-info { padding: 8px 18px 18px 18px; }
	.video-info h1 { height: 30px; font-size: 28px; line-height: 30px; }
	.right-player-col { padding: 0 0 10px 0; }
	.player-bn-2 { display: block; }
    .on-player-block { width: 620px; margin-left: -310px; }
    .on-player-spot { margin: 0 5px; }
	.on-player-close { height: 50px; line-height: 50px; font-size: 30px; width: 50px; top: -26px; right: -26px; }
}

@media all and (min-width:1630px) {
    .wrapper, .footer { width: 1610px; }
    .bn-5 { display: inline-block; }
    .top-list li a { font-size: 16px; }
    .video-block { width: 1286px; }
	.player { height: 760px; }
	.player-bn-3 { display: block; }
	.video-info { padding: 18px 20px 28px 20px; }
	.video-info h1 { height: 34px; font-size: 32px; line-height: 34px; }
	.video-info li { font-size: 18px; line-height: 22px; }
	ul.video-meta { margin-top: 5px; }
	ul.video-tags { max-height: 32px; }
	ul.video-tags li { margin: 10px 10px 0 0; }
    
}