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

body { color: rgb(153,153,153); }
body, .search button, .languages-button, .languages-list li a, .categories li a, .video-tags a, .toplist div a:hover { background-color: rgb(54,54,54); }

img, .player-bn, .bottom-bn { background-color: rgba(255,255,255,0.2); }

.header, .thumb, .dur, .categories-list, .footer, .languages-list, .video-wr, .toplist-block
{ background-color: rgb(33,33,33); }

a, h1, h2, .search button, .languages-button, .thumb-tags a, .categories li a, .video-tags span, .toplist div a:hover
{ color: rgb(252,252,252); }

a:hover, h2 i, .logo span, .search button, .thumb-tags a i, .categories li a i, .dur, .play, .footer span, .video-tags a, .toplist div a
{ color: rgb(255,112,198); }

.search button:hover, .languages-button:hover, .languages-button.active, .languages-list li a:hover, .toplist div a, .categories li.letter, .categories li a:hover, .video-tags a:hover, .categories li a:hover i
{ background-color: rgb(255,112,198); color: rgb(33,33,33); }

.search input { background-color: rgb(232,232,232); color: rgb(33,33,33); }




html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,table,tr,td {
    margin: 0;
    padding: 0;
}

img { display: block; border: 0 none; }
li { list-style-type: none; }

a { text-decoration: none; }

body { font-size: 13px; font-family: 'Open Sans', sans-serif; }

h1 { font-size: 24px; margin: 10px 5px 0 5px; display: block; font-weight: normal; }
h2 { font-size: 24px; margin: 40px 5px 0 5px; display: block; font-style: italic; font-weight: normal; text-align: left; }

.header { padding-bottom: 10px; }
.header-block { width: 100%; margin: 0 auto; text-align: center; }
.logo { margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; }
.logo a { background-repeat: no-repeat; display: block; height: 40px; line-height: 40px; font-weight: bold; font-size: 20px; text-align: center; overflow: hidden; text-transform: uppercase; }

.search { margin: 10px 5px 0 5px; display: inline-block; vertical-align: top; width: 300px; border-radius: 2px; overflow: hidden; }
.search input { float: left; border: 0 none; outline: none; width: 80%; font-size: 14px; padding: 0 2%; font-family: 'Open Sans', sans-serif; height: 40px; line-height: 40px; }
.search button { float: right; border: 0 none; cursor: pointer; width: 16%; height: 40px; line-height: 40px; font-size: 16px;   }

.languages-button { border-radius: 2px; display: inline-block; vertical-align: top; margin: 10px 5px 0 5px; cursor: pointer; height: 40px; line-height: 40px; padding: 0 20px; text-align: center; font-size: 12px; }
.languages-button i { margin-right: 5px; }

.languages-list-wrap { position: relative; width: 98%; margin: 0 auto; clear: both; }
.languages-list { box-shadow: 0 10px 20px -5px rgb(0,0,0); display: none; position: absolute; top: 10px; left: 5px; right: 5px; z-index: 5000; text-align: center; }
.languages-list ul { font-size: 0; padding: 8px 5px 10px 5px; }
.languages-list li {  display: inline-block; vertical-align: top; font-size: 11px; text-transform: uppercase; height: 27px; margin: 2px 1px 0 1px; }
.languages-list li a { border-radius: 2px; display: block; display: block; padding: 0 10px; line-height: 25px; height: 25px; }

.wrapper { width: 98%; margin: 0 auto; }

.thumbs-block { overflow: hidden; text-align: center; }

.thumb-box { float: left; width: 100%; }
.thumb { border-radius: 3px; overflow: hidden; font-size: 13px; height: auto; margin: 10px 5px 0 5px; position: relative; }
.thumb img { width: 100%; height: auto; max-height: 222px; }
.thumb-link { position: relative; display: block; }
.thumb:hover img { opacity: 0.9; }

.thumb-tags { height: 30px; line-height: 30px; padding: 0 10px; overflow: hidden; text-align: center; }
.thumb-tags a { font-size: 12px; text-transform: capitalize; }
.thumb-tags a:hover { text-decoration: underline; }

.tag { font-size: 25px; }

.dur { height: 18px; line-height: 18px; position: absolute; top: 2px; right: 2px; font-size: 10px; padding: 0 5px; }

.play { display: none; position: absolute; width: 50px; height: 50px; line-height: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; font-size: 48px; }

.categories-list { clear: both; margin: 10px 5px 0  5px; border-radius: 6px; padding: 8px 8px 10px 10px; }

.categories { font-size: 0; overflow: hidden; width: 100%; }
.categories ul { display: block; width: 100%; margin: 0 auto; overflow: hidden;}
.categories li { display: block; float: left; margin: 2px 2px 0 0; overflow: hidden; }
.categories li.letter { border-radius: 2px; height: 28px; line-height: 28px; clear: both; font-size: 18px; text-transform: uppercase; text-align: center; min-width: 28px; }
.categories li a { border-radius: 2px; padding: 0 10px; height: 28px; line-height: 28px; font-size: 14px; display: block; }

.video-wr { overflow: hidden; margin: 10px 5px 0 5px; border-radius: 6px; padding: 0 10px;  }
.player { margin-top: 10px; position: relative; background-color: rgb(0,0,0); width: 100%; height: 200px; }
.player iframe, .player object, .player embed { width: 100%; height: 100%; }


.player-right { text-align: center; overflow: hidden; text-transform: uppercase; }

.video-tags { overflow: hidden; padding: 8px 8px 10px 10px; text-align: left; font-size: 0; }
.video-tags a, .video-tags span { border-radius: 3px; float: left; margin: 2px 2px 0 0; height: 30px; line-height: 30px; font-size: 14px;  padding: 0 8px; }
.video-tags span { border-color: transparent; margin-right: 5px; }

.video-shares { padding: 10px 0 0 0; text-align: center;  text-align: left; }
.video-shares div { display: inline-block; vertical-align: top; }

.player-bn { display: inline-block; vertical-align: top; margin: 10px 3px 0 3px; width: 300px; height: 250px; }
.player-bn-2  { display: none; }
.player-bn-3 { display: none; }


.toplist-block { clear: both; overflow: hidden; clear: both; padding: 0px 5px 10px 5px; margin: 10px 5px 0 5px; border-radius: 6px; }

.toplist { clear: both; text-align: center; font-size: 0; }
.toplist div { display: inline-block; vertical-align: top; width: 50%; overflow: hidden; }
.toplist div a { border-radius: 2px;  display: block; margin: 10px 5px 0 5px; overflow: hidden; padding: 1px 1px 0 1px; }
.toplist div img { width: 100%; height: auto; }
.toplist div span { display: block; height: 26px; line-height: 26px; font-size: 12px; overflow: hidden; }


.bottom-bns-block { clear: both; text-align: center; font-size: 0;  margin: 10px 0 0 0; }
.bottom-bn { display: inline-block; vertical-align: top; width: 300px; height: 250px; margin: 10px 5px 0 5px; } 
.bottom-bn-2, .bottom-bn-3, .bottom-bn-4, .bottom-bn-5 { display: none; }

.footer { clear: both; margin: 20px 0 0 0; padding: 10px 5px;  text-align: center; overflow: hidden; }
.footer span { font-weight: bold; font-size: 16px; text-transform: uppercase; }
.footer a { font-weight: normal; text-decoration: underline; }
.footer a:hover { text-decoration: none; }

.on_player_ads { background-color: rgba(0,0,0,0.7); display: none; position: absolute; z-index: 2100; width: 100%; height: 100%; left: 0; top: 0; }
.on_player_ad_bl { background-color: rgb(0,0,0); position: absolute; z-index: 2200; height: 350px; width: 380px; margin: -175px 0 0 -190px; left: 50%; top: 50%; text-align: center; font-size: 0; }
.on_player_ad { background-color: rgba(255,255,255,0.1); font-size: 13px; display: inline-block; vertical-align: top; margin: 50px 40px; width: 300px; height: 250px; }
.on_player_ad iframe { width: 300px; height: 250px; }
.on_player_ad_2 { display: none; }
.on_player_ad_close { background-color: rgb(128,128,128); color: rgb(240,240,240); position: absolute; top: 0; right: 0; cursor: pointer; width: 25px; height: 25px; font-size: 16px; font-weight: normal; text-align: center; }
.on_player_ad_close i { display: block; width: 25px; height: 25px; line-height: 23px; }

.on_player_ads { background-color: rgba(0,0,0,0.7); display: none; position: absolute; z-index: 2100; width: 100%; height: 100%; left: 0; top: 0; }
.on_player_ad_one_bl { background-color: rgb(0,0,0); position: absolute; z-index: 2200; height: 350px; width: 380px; margin: -175px 0 0 -190px; left: 50%; top: 50%; text-align: center; font-size: 0; }
.on_player_ad_one { background-color: rgba(255,255,255,0.1); font-size: 13px; display: inline-block; vertical-align: top; margin: 50px 40px; width: 300px; height: 250px; }
.on_player_ad_one iframe { width: 300px; height: 250px; }


@media all and (min-width: 400px) { 
    .thumb-box { width: 50%; }
    .toplist div { width: 33.3333%; }
    .player { height: 250px; }
}

@media all and (min-width: 500px) { 
    .logo a { font-size: 24px; }
    .player { height: 300px; }
}

@media all and (min-width: 600px) { 
    .player { height: 350px; }
}

@media all and (min-width: 620px) {
    .on_player_ads { display: block; }
    .player-bn-2, .bottom-bn-2 { display: inline-block; }
    .toplist div { width: 25%; }
}

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

@media all and (min-width: 800px) {
    .toplist div { width: 20%; }
    .on_player_ad_bl { width: 770px; margin: -175px 0 0 -385px; }
    .on_player_ad { margin: 50px 5px; }
    .on_player_ad_2 { display: inline-block; }
    .player { height: 450px; }
}


@media all and (min-width: 840px) { 
    h2 { font-size: 36px; }
    
    .languages-list-wrap { width: 100%; }
    .header { padding: 0; position: fixed; z-index: 10000; top: 0; left: 0; width: 100%; }
    .wrapper { padding-top: 60px; }
    .wrapper, .header-block { width: 820px; }
    .header-block { height: 60px; }
    
    .logo { float: left; margin: 10px 0 0 5px; }
    .logo a { font-size: 30px; height: 40px; line-height: 40px; }
    
    .languages-button { display: block; float: right; margin: 10px 5px 0 0; height: 40px; line-height: 40px; }
    .search { float: left; margin: 10px 5px 0 20px; }
    .thumb-box { width: 410px; }
    .thumb img { width: 400px; height: 222px; }
    
    .thumb:hover .play { display: block; }
    
    .player-wrapper { display: table; width: 100%; }
    .player-block { display: table-cell; vertical-align: top; }
    .player { height: 420px; }
    .player-right { display: table-cell; vertical-align: top; width: 310px; }
    .player-bn { display: block; margin: 10px 0 0 10px; }
    .player-bn-2 { display: block; }
    .player-bn-3 { display: none; }
    .video-tags { padding-left: 0; }
    
    .on_player_ad_bl { width: 380px; margin: -175px 0 0 -190px; }
    .on_player_ad { margin: 50px 40px; }
    .on_player_ad_2 { display: none; }
    .on_player_ad_close { right: 0;  }
}

@media all and (min-width: 1250px) { 
    .wrapper, .header-block { width: 1230px; }
    .logo a { font-size: 36px; }
    .languages-button, .search input { font-size: 14px; }
    .languages-list li { font-size: 12px; }
    .bottom-bn-3 { display: inline-block; }
    .search { width: 550px; }
    .on_player_ad_bl { width: 770px; margin: -175px 0 0 -385px; }
    .on_player_ad { margin: 50px 5px; }
    .on_player_ad_2 { display: inline-block; }
    .player { height: 510px; }
    .toplist div { width: 16.6666%; }
}

@media all and (min-width: 1660px) { 
    .languages-button { padding: 0 30px; }
    .wrapper, .header-block { width: 1640px; }
    .search { width: 810px; }
    .bottom-bn-4 { display: inline-block; }
    .bottom-bn-5 { display: inline-block; }
    .player { height: 770px; }
    .player-bn-3 { display: block; }
    .toplist div { width: 10%; }
}