body, .search-form, .pic, .info li, .brka, .list a, .tradlist a, .full-info a, .full-info span, .full-brkas-container, .menu-container span.active, .menu-container a.active, .menu-container span:hover, .menu-container a:hover
{ background-color: rgb(243,247,252); }

.head-container, .thumb-inner, .sort a, .search-form button, .pagination a, .pagination span, .brkas-container, .list, .tradlist, .tradlist a i, .footer-container, .full-table, .full-brkas-container .brka
{ background-color: rgb(236,240,245); }

.pic, .full-brkas-container
{ background-color: rgb(223,227,232); }

.search-input, .list span
{ background-color: rgb(248,252,255); }

body, .info, .list span, .list a span i, .tradlist a, .footer-container a, .rating-container a
{ color: rgb(105,107,110); }

a:hover, a.logo span, .likes, .links-container span i, .menu-container span.active, .menu-container a.active, .menu-container span:hover, .menu-container a:hover, .sort a.active, .list a i, .tradlist a:hover i, .about span.colored, .sort span
{ color: rgb(116, 125, 21); }

#scroll-top, .sort a:hover, .list a:hover, .list a:hover i, .tradlist a:hover, .sort a.active, .pagination a:hover, .pagination a.active, .search-form button:hover, .full-info a:hover, .rating-container a:hover i
{ background-color: rgb(116, 125, 21); color: rgb(255,255,255); }

a.logo, a, h1, h2, .search-form input, .search-form input::placeholder, .search-form button, .info i, .menu-container span, .list li:hover span, .list li:hover span i, .about span, .footer-container a:hover, .rating-container i
{ color: rgb(40,42,45); }

.likes
{ background-color: rgba(0,2,5,0.8); color: rgb(115,187,235); text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }

.search-input
{ border-color: rgb(215,217,220); }


.wide-ratio { padding-bottom: 56.25%; }
/* Wide 16:9 Ratio, Where 56.25% - value calculating by formula (height x 100 / width) */

.rectangle-ratio { padding-bottom: 75%; }
/* Rectangle 4:3 Ratio, Where 75% - value calculating by formula (height x 100 / width) */

.square-ratio { padding-bottom: 100%; }
/* Square 1:1 Ratio */

.vertical-ratio { padding-bottom: 150%; }
/* Vertical 2:3 Ratio, Where 150% - value calculating by formula (height x 100 / width) */

.custom-ratio { padding-bottom: 60%; }
/* Custom Ratio, Where 60% - sample value. You should change it on your value calculating by formula (height x 100 / width) */



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

body, input { font-family: 'Oswald', sans-serif; text-transform: uppercase; }

li { list-style-type: none; }

i { text-rendering: optimizeLegibility !important; }

img { display: block; }

a { text-decoration: none; }

h1, h2 { font-weight: normal; overflow: hidden; }
h1 { font-size: 28px; line-height: 40px; margin: 20px 10px 0 10px; }
h2 { margin: 40px 10px 0 10px; font-size: 26px; line-height: 34px; }

.head-container { padding-bottom: 10px; text-align: center; }
.head-container .main-container { position: relative; overflow: visible; }

a.logo { margin: 10px 10px 0 10px; overflow: hidden; font-weight: bold; display: inline-block; vertical-align: top; height: 30px; line-height: 30px; font-size: 22px; }
a.logo i { font-size: 26px; }

.menu-container { display: inline-block; vertical-align: top; overflow: hidden; padding: 5px 0 0 0; }
.menu-container a, .menu-container span { cursor: pointer; display: block; float: left; margin: 0 3px; border-radius: 3px; text-align: center; width: 30px; padding: 0 5px; height: 40px; line-height: 40px; font-size: 18px; overflow: hidden; }
.menu-container i { display: block; font-size: 26px; height: inherit; line-height: inherit; }
.menu-container i.la-play { font-size: 32px; }

.search-form { display: none; box-shadow: 0 5px 15px -7px rgb(0,0,0); overflow: hidden; top: 52px; left: 0; right: 0; position: absolute; z-index: 10000; padding: 10px; }
.search-form form { position: relative; }
.search-input { border-style: solid; border-width: 1px; border-radius: 6px; overflow: hidden; height: 45px; line-height: 45px; padding: 0 15px; margin-right: 65px; }
.search-form input { background: none; text-transform: uppercase; border: 0 none; width: 100%; outline: 0 none; font-size: 16px; height: inherit; line-height: normal; }
.search-form input::placeholder { text-transform: uppercase; }
.search-form button { border-radius: 3px; overflow: hidden; position: absolute; top: 1px; right: 5px; border: 0 none; cursor: pointer; outline: 0 none; width: 55px; font-size: 20px; height: 45px; line-height: 45px; }
.search-form button i { display: block; height: inherit; line-height: inherit; }

.main-container { margin: 0 auto; min-width: 320px; max-width: 840px; overflow: hidden; }

.title-sort { overflow: hidden; padding-top: 10px; }
.title-sort h1 { float: left; margin-top: 10px; }

.sort { float: left; overflow: hidden; padding: 5px 7px 0 7px; font-size: 0; text-align: center; }
.sort a, .sort span { border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: top; margin: 5px 3px 0 3px; min-width: 40px; padding: 0 10px; height: 40px; line-height: 40px; font-size: 14px; }
.sort i { display: block; height: inherit; line-height: inherit; font-size: 24px; }
.sort span { min-width: auto; padding: 0 5px 0 0; }

.thumbs-container { overflow: hidden; padding: 10px 5px 0 5px; clear: both; }

.thumb { overflow: hidden; }

.thumb-inner { border-radius: 6px; overflow: hidden; display: block; margin: 10px 5px 0 5px; padding-bottom: 5px; }

.thumb a { display: block; }

.pic { position: relative; overflow: hidden; }
.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease;}
.thumb a:hover .pic img { transform: scale(1.05); }  

.likes { -moz-transition: 0.2s ease; -webkit-transition: 0.2s ease; -o-transition: 0.2s ease; transition: 0.2s ease; font-weight: bold; position: absolute; bottom: 0; left: 10px; padding: 0  8px 0 6px; border-radius: 6px 6px 0 0; text-align: center; font-size: 14px; height: 26px; line-height: 26px; }
.likes i { display: block; float: left; height: inherit; line-height: inherit; font-size: 18px; margin-right: 3px; }
.thumb a:hover .likes { bottom: -40px; }

.thumb-name { height: 48px; overflow: hidden; margin: 10px 10px 5px 15px; font-size: 18px; }
.thumb p { overflow: hidden; height: 48px; line-height: 24px; display: table-cell; vertical-align: middle; }

.thumb-cat .thumb-name { font-size: 20px; }

.info { float: right; overflow: hidden; margin: 5px 0 0 10px; height: 58px; }
.info li { border-radius: 5px; float: left; height: 48px; line-height: 24px; margin-right: 5px; padding: 5px 15px; text-align: center; }
.info span { display: block; font-size: 14px; height: 24px; line-height: 24px; }
.info i { display: block; height: 24px; line-height: 24px; font-size: 24px; }

.thumb-cat  .info li { min-width: 55px; }


.pagination { overflow: hidden; margin: 35px 7px 0 7px; font-size: 0; text-align: center; }
.pagination a, .pagination span { overflow: hidden; margin: 5px 3px 0 3px; border-radius: 3px; display: inline-block; vertical-align: top; position: relative; padding: 0 5px; min-width: 40px; height: 50px; line-height: 50px; font-size: 16px; }

a.prev, span.prev { float: left; margin-left: 0 !important; min-width: 58px; padding: 0 25px; }
a.next, span.next { float: right; margin-right: 0 !important; min-width: 58px; padding: 0 25px; }
a.prev i, span.prev i, a.next i, span.next i { display: inline-block; vertical-align: top; height: inherit; line-height: inherit; font-size: 20px; margin-left: 5px; }

.pagination a.view-all { min-width: 250px; padding: 0 25px; font-size: 20px; height: 70px; line-height: 70px; }
.pagination a.view-all i { display: inline-block; vertical-align: top; height: inherit; line-height: inherit; font-size: 30px; margin-left: 1px; }

.brkas-container { border-radius: 6px; overflow: hidden; margin: 40px 10px 0 10px; text-align: center; font-size: 0; padding: 10px 0 20px 0; }
.brka { overflow: hidden; margin: 10px 5px 0 5px; width: 300px; height: 250px; display: inline-block; vertical-align: top; }
.brka-2, .brka-3, .brka-4, .brka-5 { display: none; }

.list { overflow: hidden; padding: 5px 15px 25px 15px; margin: 20px 10px 0 10px; border-radius: 6px; }
.list li { margin-top: 20px; position: relative; }
.list a { border-radius: 3px; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; clear: both; margin: 0 10px; height: 55px; line-height: 55px; padding: 0 13px; }
.list a i { float: left; display: block; height: inherit; line-height: inherit; font-size: 24px; margin-right: 3px; }
.list span { border-radius: 3px; position: absolute; bottom: -14px; right: 10px; min-width: 50px; padding: 0 5px; display: block; height: 24px; line-height: 24px; font-size: 13px; }
.list span i { float: left; display: block; height: inherit; line-height: inherit; font-size: 16px; margin-right: 4px; }

.tradlist { overflow: hidden; padding: 5px 15px 25px 15px; margin: 20px 10px 0 10px; border-radius: 6px; }
.tradlist li { margin-top: 20px; position: relative; }
.tradlist a { border-radius: 3px; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; position: relative; margin: 0 10px; height: 55px; line-height: 55px; padding: 0 45px 0 15px; }
.tradlist a i { display: block; border-radius: 3px; height: 30px; width: 30px; line-height: 30px; font-size: 20px; text-align: center; position: absolute; top: 12.5px; right: 10px; }

.about { overflow: hidden; margin: 10px 10px 0 10px; font-size: 16px; line-height: 26px; text-align: justify; }
.about p { overflow: hidden; margin-top: 10px; }
.about a { text-decoration: underline; }
.about a:hover { text-decoration: none; }

.full-container { overflow: hidden; }

.full-table { overflow: hidden; }

.full-video { background-color: rgb(0,0,0); overflow: hidden; position: relative; padding-bottom: 56.25%; }
.full-video iframe, .full-video video, .full-video source, .full-video object, .full-video embed, .full-video .fluid_video_wrapper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }

.full-info { overflow: hidden; text-align: center; padding: 0 12px; }
.full-info h1 { font-size: 22px; line-height: 28px; margin: 15px 3px 0 3px; }
.full-info a, .full-info span { overflow: hidden; padding: 5px 20px; margin: 5px 3px 0 3px; border-radius: 4px; display: block; float: left; line-height: 20px; font-size: 13px; text-align: center; }
.full-info a { cursor: pointer; }
.full-info a i, .full-info span i { display: block; height: 30px; line-height: 30px; font-size: 28px; }

.rating-container { overflow: hidden; margin: 10px 0 0 0; }
.rating-container a { padding: 5px 1%; margin: 5px 1% 0 1%; width: 46%; }

.meta { display: inline-block; vertical-align: top; overflow: hidden; margin: 10px 10px 0 10px; }

.links-wrap { overflow: hidden; clear: both; }

.links-container { overflow: hidden; float: left; padding: 15px 10px 0 3px; }
.links-container a, .links-container span { margin: 5px 5px 0 0; overflow: hidden; height: 30px; line-height: 30px; padding: 5px 15px; }
.links-container a i { float: left; font-size: 16px; margin-right: 3px; height: inherit; line-height: inherit; }
.links-container span { background: none; text-align: left; padding: 5px 5px 5px 0; float: none; }
.links-container span i { float: left; font-size: 30px; height: inherit; line-height: inherit; margin-right: 4px; }

.full-brkas-container { overflow: hidden; margin: 20px 0 0 0; text-align: center; font-size: 0; padding: 10px 0 20px 0; }

.footer-container { overflow: hidden; margin-top: 40px; padding: 15px 10px 20px 10px; font-size: 16px; line-height: 24px; text-align: center; }
.footer-container p { overflow: hidden; margin-top: 5px; }
.footer-container a { overflow: hidden; text-decoration: underline; height: 28px; line-height: 28px; display: inline-block; vertical-align: top; margin: 3px 3px 0 3px; }
.footer-container a:hover { text-decoration: none; }

#scroll-top { overflow: hidden; opacity: 0.9; border-radius: 4px; position: fixed; z-index: 20000; right: 20px; bottom: 60px; cursor: pointer; display: none; width: 50px; height: 50px; line-height: 50px; font-size: 24px; text-align: center; }
#scroll-top:hover { opacity: 1; }
#scroll-top i { display: block; height: inherit; line-height: inherit; }

@media all and (min-width:420px) {
    .thumb { float: left; width: 50%; }
    .info { float: none; }
    .info li { width: 43%; margin-right: 2%; padding: 5px 1% 5px 4%; }
    .thumb-name { font-size: 16px; }
    .thumb-cat .thumb-name { font-size: 18px; }
    .thumb-cat .info { float: right; }
    .thumb-cat .info li { width: auto; margin-right: 5px; padding: 5px 10px; }
}

@media all and (min-width:520px) {
    .info { float: right; }
    .info li { width: auto; margin-right: 5px; padding: 5px 10px; }
    .info span { font-size: 13px; }
    .list li, .tradlist li { float: left; width: 50%; }
    .list a, .tradlist a { font-size: 16px; }
    .full-info { text-align: left; }
    .rating-container { float: right; }
    .rating-container a { padding: 5px 20px; margin: 5px 3px 0 3px; width: auto; }
    .meta { float: left; margin: 10px 5px 0 0; }
    .thumb-cat .thumb-name { font-size: 20px; }
}

@media all and (min-width:640px) {
    .head-container { min-height: 40px; }
    a.logo { float: left; margin-right: 20px; }
    .menu-container { overflow: visible; display: block; padding-left: 15px; }
    .menu-container a, .menu-container span { min-width: 50px; }
    .menu-container span.search-slide { float: right; margin-right: 10px; }
    .info span { font-size: 14px; }
    .brka-2 { display: inline-block; }  
    .list a, .tradlist a { font-size: 18px; }
    .full-info h1 { font-size: 26px; line-height: 34px; }
}

@media all and (min-width:740px) {
    .list li, .tradlist li { width: 33.3333%; }
    .list a, .tradlist a { font-size: 16px; }
}

@media all and (min-width:800px) {
    .head-container { min-height: 50px; }
    .search-form { top: 62px; left: auto; right: 10px; width: 400px; }
    a.logo { margin-top: 10px; height: 40px; line-height: 40px; font-size: 28px; margin-right: 40px; }
    a.logo i { font-size: 34px; }
    .menu-container { padding-top: 10px; }
    .sort { float: right; }
    .thumbs-container { padding: 0; }
    .thumb-inner { margin: 20px 10px 0 10px; padding-bottom: 10px; }
    .likes { left: 15px; padding: 0 10px 0 8px; font-size: 13px; height: 30px; line-height: 30px; }
    .likes i { font-size: 22px; }
    .thumb-name { margin: 15px 15px 5px 20px; font-size: 18px; }
    .info { margin: 10px 5px 0 10px; }
    .info li { padding: 5px 15px; }
    .list a, .tradlist a { font-size: 18px; }
    .thumb-cat .thumb-name { font-size: 22px; }
    
}

@media all and (min-width:860px) {
    .main-container { width: 840px; max-width: 100%; }
    .full-container { margin: 20px 10px 0 10px; border-radius: 6px; }
    .thumb { width: 420px; }
    .full-info a, .full-info span { font-size: 14px; }
    .full-info a i, .full-info span i { height: 38px; line-height: 38px; font-size: 34px; }
    .links-container span { height: 38px; line-height: 38px; font-size: 14px; }
}

@media all and (min-width:1020px) {
    .main-container { width: 1000px; }
    .thumb { width: 33.3333%; }
    .thumb-name { font-size: 16px; margin-left: 15px; }
    .info li { padding: 5px 10px; }
    .info span { font-size: 13px; }
    .brka-3 { display: inline-block; }
    .list li, .tradlist li { width: 25%; }
    .list a, .tradlist a { font-size: 16px; }
    .full-table { width: 100%; display: table; }
    .full-column, .full-brkas-container { display: table-cell; vertical-align: top; padding-bottom: 20px; }
    .full-info { padding: 5px 18px 0 18px; }
    .full-brkas-container { width: 320px !important; max-width: 320px !important; padding-top: 0; }
    .full-brkas-container .brka-3 { display: none; }
    .full-info h1 { font-size: 28px; line-height: 36px; margin-bottom: 5px; }
    .full-info a, .full-info span { min-width: 60px; }
    .links-container { margin-right: 40px; }
    .links-container a, .links-container span { font-size: 16px; min-width: auto; }
    .thumb-cat .thumb-name { font-size: 20px; }
}

@media all and (min-width:1280px) {
    .main-container { width: 1260px; }
    .thumb { width: 420px; }
    .thumb-name { font-size: 18px; margin-left: 20px;  }
    .info { margin: 10px 5px 0 10px; }
    .info span { font-size: 14px; }
    .info li { padding: 5px 15px; }
    .brka { margin: 10px 2px 0 2px; }
    .brka-4 { display: inline-block; }
    .list a, .tradlist a { font-size: 18px; }
    .full-brkas-container .brka-3 { display: inline-block; }
    .full-info a, .full-info span { min-width: 100px; }
    .links-container a, .links-container span { min-width: 60px; }
    .thumb-cat .thumb-name { font-size: 22px; }
}

@media all and (min-width:1700px) {
    h2 { font-size: 29px; line-height: 36px; margin-top: 60px; }
    .main-container { width: 1680px; }
    a.logo { font-size: 32px; }
    a.logo i { font-size: 38px; }
    .brka { margin: 10px 5px 0 5px; }
    .brka-5 { display: inline-block; }
    .list li, .tradlist li { width: 16.6666%; }
}