body, .head-container
{ background-color: rgb(246,250,249); }

.menu-container, .search, .filters, .textarea, .input
{ background-color: rgb(251,255,254); }

.pic, .search-input, .s-list span, button.submit, .brka-desk-728, .brka-desk-900, .brka-mob, .brka, .pagination a:hover, .pagination a.active, .list a:hover, .more-comments a:hover
{ background-color: rgb(236,240,239); }

.filters-button
{ background-color: rgb(46,50,49); color: rgb(246,250,249); }

.menu-container, .search, .filters, .search-input, .textarea, .input
{ border-color: rgb(226,230,229); }

a:hover, a.logo span, a.active, .spinner, .menu-slide:hover, .search-slide:hover, .menu-slide.active, .search-slide.active, .s-list a i, .list a i, .tradlist a:hover i, .footer-container span, .color-2
{ color: rgb(6,160,149); }

.filters-button:hover, .filters-button.active, .overlay.colored, button.submit:hover, #scroll-top
{ background-color: rgb(6,160,149); color: rgb(255,255,255); }

.head-container, .footer-container
{ border-color: rgb(6,160,149); }

a, a.logo, .menu-slide, .search-slide, .s-list span, button.submit, .search input, .search input::placeholder, .search button:hover, .s-list span, .tradlist a:hover, .tradlist a i, p.comment-info span, a.dislike:hover, a.like:hover, .color-1, .textarea textarea, .input input, button.submit
{ color: rgb(46,50,49); }

body, .info, .thumbs-container span, .search button, .list span, .list span i, .tradlist a, .textarea textarea::placeholder, .input input::placeholder
{ color: rgb(106,110,109); }

a.like, .thumbs-container a:hover span.likes
{ color: rgb(5,165,135); }

a.dislike
{ color: rgb(195,65,65); }


.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; }

i { text-rendering: optimizeLegibility !important; }

body, input, textarea, button { font-family: 'Lexend', sans-serif; }

li { list-style-type: none; }

img { display: block; }

a { text-decoration: none; }

h1, h2 { font-weight: normal; }
h1 { font-size: 24px; line-height: 30px; margin: 20px 10px 0 10px; }
h2 { margin: 40px 10px 0 10px; font-size: 24px; line-height: 30px; }

.subdesc { text-align: center; padding: 10px 5px 0 5px; }
.subdesc a { font-weight: bold; text-decoration: underline; }
.subdesc a:hover { text-decoration: none; }

.subtitle { margin: 40px 10px 0 10px; font-size: 24px; line-height: 30px; }

.head-container { border-top-style: solid; border-top-width: 3px; min-height: 50px; position: fixed; width: 100%; top: 0; left: 0; z-index: 10000; }
.head-container .main-container { overflow: visible; position: relative; padding: 0; }

a.logo { overflow: hidden; font-weight: bold; text-transform: uppercase; margin: 0 10px; display: block; float: left; height: 50px; line-height: 50px; font-size: 18px; }

.menu-slide, .search-slide { cursor: pointer; position: relative; overflow: hidden; display: block; float: right; height: 50px; line-height: 50px; font-size: 29px; margin: 0 10px; }
.menu-slide i, .search-slide i { display: block; height: inherit; line-height: inherit; }
.search-slide { font-size: 25px; }

.search { display: none; box-shadow: 0 5px 15px -5px rgb(0,0,0); overflow: hidden; border-width: 3px; border-style: solid; border-radius: 5px; top: 50px; left: 10px; right: 10px; padding:  20px; position: absolute; z-index: 10000; }
.search form { position: relative; overflow: hidden; }
.search-input { border-width: 1px; border-style: solid; overflow: hidden; height: 50px; line-height: 50px; border-radius: 5px; padding: 0 60px 0 20px; }
.search input { background: none; border: 0 none; width: 100%; outline: 0 none; font-size: 16px; height: inherit; line-height: inherit; }
.search button { background: none; position: absolute; top: 0; right: 0; border: 0 none; cursor: pointer; outline: 0 none; width: 50px; font-size: 22px; height: 50px; line-height: 50px; }
.search button i { display: block; height: inherit; line-height: inherit; }

.menu-container { display: none; box-shadow: -5px 5px 15px -5px rgb(0,0,0); overflow: hidden; border-width: 3px; border-style: solid; border-radius: 5px; position: absolute; top: 50px; right: 10px; padding: 5px 20px 10px 20px; z-index: 10000; }
.menu-container a { height: 40px; line-height: 40px; font-size: 16px; margin-top: 5px; display: block; }
.menu-container a i { display: block; float: left; margin-right: 3px; height: inherit; line-height: inherit; }

.main-container { margin: 0 auto; max-width: 1000px; padding-top: 50px; clear: both; overflow: hidden; }

.brka-mob { margin: 10px auto; width: 300px; height: 100px; overflow: hidden; }
.brka-desk-728 { display: none; margin: 60px auto 0 auto; width: 728px; height: 90px; overflow: hidden; }
.brka-desk-900 { display: none; margin: 60px auto 0 auto; width: 900px; height: 300px; overflow: hidden; }

.title-sort { overflow: hidden; clear: both; padding-top: 20px; }
.title-sort:first-child { padding-top: 0; }
.title-sort h1, .title-sort h2 { margin-top: 20px !important; }

.filters-button { overflow: hidden; font-weight: bold; height: 40px; line-height: 40px; cursor: pointer; float: right; margin: 15px 10px 0 10px; border-radius: 5px; padding: 0 20px; font-size: 16px; }
.filters-button i { display: block; height: inherit; line-height: inherit; font-size: 24px; float: left; margin-right: 3px; }

.filters-container { position: relative; clear: both; }

.filters { box-shadow: -5px 5px 15px -5px rgb(0,0,0); border-width: 3px; border-style: solid; border-radius: 5px; display: none; overflow: hidden; position: absolute; top: 10px; right: 10px; z-index: 10000; margin-left: 10px; padding: 0 0 20px 25px; }

.s-list { margin: 18px 40px 0 0; overflow: hidden; }
.s-list:last-child { margin-right: 0; }
.s-list span { border-radius: 5px; padding: 0 15px; margin: 7px 25px 13px 0; float: left; display: block; height: 34px; line-height: 34px; font-size: 14px; }
.s-list i { float: left; display: block; height: inherit; line-height: inherit; font-size: 20px; margin-right: 4px; }
.s-list a { margin: 2px 25px 0 0; float: left; display: block; height: 30px; line-height: 30px; font-size: 14px; }
.s-list a i { font-size: 16px; }

.val { overflow: hidden; }

.search .s-list span { padding: 0 20px; }

.thumbs-container { clear: both; overflow: hidden; }

.thumb { overflow: hidden; }
.thumb a { margin: 20px 10px 0 10px; display: block; font-size: 14px; overflow: hidden; }
.pic { position: relative; overflow: hidden; }
.pic img { width: 100%; height: auto; position: relative; z-index: 2; }
.thumb p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 10px; height: 22px; line-height: 22px; }
.thumb span { display: block; float: right; overflow: hidden; margin: 10px 0 0 10px; height: 22px; line-height: 22px; }
.thumb i { display: block; float: left; height: inherit; line-height: inherit; font-size: 22px; margin-right: 3px; }
.info { height: 22px; line-height: 22px; margin: 5px 10px 0 10px; overflow: hidden; }
.info span { margin: 0 15px 0 0; float: left; }
.info span:first-child { float: right; margin-right: 0; }

.thumb p.thumb-cat { font-size: 16px; font-weight: bold; }

.pic.wide-ratio img, .pic.rectangle-ratio img, .pic.square-ratio img, .pic.vertical-ratio img, .pic.custom-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.spinner { text-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; line-height: 40px; font-size: 40px; margin: -20px 0 0 -20px; display: block; float: none; padding: 0; }
.spinner i { float: none; font-size: inherit; margin: 0; }

.overlay { background-color: rgba(0,0,0,0.7); color: rgb(255,255,255); display: block; font-weight: bold; border-radius: 3px; height: 24px; line-height: 24px; font-size: 12px; padding: 0 5px; position: absolute; z-index: 10; }
.overlay i { width: 14px; font-size: 11px; margin: 1px 2px 0 0; display: block; float: left; height: inherit; line-height: inherit; }

.top-right { top: 4px; right: 4px; }
.top-left { top: 4px; left: 4px; }
.bottom-right { bottom: 4px; right: 4px; }
.bottom-left { bottom: 4px; left: 4px; }

.pagination { margin: 45px 5px 0 5px; font-size: 0; text-align: center; overflow: hidden; }
.pagination a, .pagination span { margin: 5px 5px 0 5px; display: inline-block; vertical-align: top; position: relative; border-radius: 5px; padding: 0 5px; min-width: 30px; height: 40px; line-height: 40px; font-size: 16px; font-weight: bold; }
.pagination i { display: block; height: inherit; line-height: inherit; font-size: 22px; }

.view-more a { padding: 0 20px; }
.view-more i { display: inline-block; vertical-align: top; margin-left: 5px; }

.brkas-container { margin-top: 40px; text-align: center; font-size: 0; overflow: hidden; }
.brka { 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 { padding-top: 18px; overflow: hidden; } 
.list a { font-weight: bold; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; display: block; margin: 2px 2px 0 2px; padding: 0 8px; border-radius: 5px; height: 40px; line-height: 40px; }
.list a i { float: left; display: block; height: inherit; line-height: inherit; font-size: 18px; margin-right: 3px; }
.list span { font-weight: normal; font-size: 13px; display: block; float: right; margin-left: 10px; }
.list span i { float: left; display: block; height: inherit; line-height: inherit; margin-right: 3px; font-size: 16px; }

.tradlist a { font-weight: normal; }

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

.media-container { clear: both; overflow: hidden; }

.media-table { overflow: hidden; }

.limited { padding: 0; margin: 0 auto; }

.media-video { background-color: rgb(0,0,0); position: relative; overflow: hidden; }

.wide-ratio iframe, .rectangle-ratio iframe, .square-ratio iframe, .vertical-ratio iframe, .custom-ratio iframe,
.wide-ratio video, .rectangle-ratio video, .square-ratio video, .vertical-ratio video, .custom-ratio video,
.wide-ratio source, .rectangle-ratio source, .square-ratio source, .vertical-ratio source, .custom-ratio source,
.wide-ratio object, .rectangle-ratio object, .square-ratio object, .vertical-ratio object, .custom-ratio object,
.wide-ratio embed, .rectangle-ratio embed, .square-ratio embed, .vertical-ratio embed, .custom-ratio embed
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.meta-container { padding: 15px 0 0 10px; overflow: hidden; }
.meta-container a, .meta-container span { margin: 5px 20px 0 0; display: block; float: left; height: 30px; line-height: 30px; font-size: 14px; overflow: hidden; }
.meta-container i { float: left; display: block; height: inherit; line-height: inherit; font-size: 30px; margin-right: 3px; }

.rating-container { float: right; overflow: hidden; padding-right: 10px; }
.rating-container a { cursor: pointer; margin: 5px 0 0 20px; }

.media-main-column { padding-top: 20px; overflow: hidden; }

.media-list { overflow: hidden; padding-left: 10px; }

.media-list .s-list { float: left; }

.media-list .s-list a i { font-size: 18px; }

.comments-block { overflow: hidden; padding: 0 10px; }

.comments-title { overflow: hidden; }

.comments-item { overflow: hidden; padding-bottom: 20px; }

.comment { margin-top: 40px;overflow: hidden; }
.comment p { clear: both; font-size: 14px; line-height: 20px; }

p.comment-info { padding: 0 0 8px 0; float: none; background: none; font-size: 14px; }
p.comment-info span { margin-right: 20px; }
p.comment-info i { margin-right: 3px; float: left; display: block; font-size: 18px; }

.add-comment { overflow: hidden; padding-top: 20px; }

.textarea { border-style: solid; border-width: 1px; border-radius: 4px; padding: 15px; margin-top: 10px; overflow: hidden; }
.textarea textarea { background: none; text-align: left; max-width: 100% !important; width: 100% !important; min-height: 60px !important; height: 60px; max-height: 180px !important; border: 0 none; outline: 0 none; line-height: 20px; font-size: 14px; }

.input { float: left; width: 150px; margin-top: 10px; border-style: solid; border-width: 1px; border-radius: 4px; overflow: hidden; padding: 0 15px; height: 38px; line-height: 38px; }
.input input { background: none; border: 0 none; width: 100%; outline: 0 none; font-size: 14px; height: inherit; line-height: normal; text-align: left; }

button.submit { float: right; border: 0 none; cursor: pointer; border-radius: 4px;  margin-top: 10px; font-size: 14px; padding: 0 20px; outline: 0 none; height: 40px; line-height: 40px; }

.more-comments { padding-top: 40px; overflow: hidden; text-align: center; }
.more-comments a { border-radius: 4px; display: inline-block; vertical-align: top; font-weight: bold; cursor: pointer; height: 30px; line-height: 30px; font-size: 14px; padding: 5px 15px; }
.more-comments i { display: inline-block; vertical-align: top; margin: 1px 0 0 5px; height: inherit; line-height: inherit; }

.footer-container { border-bottom-style: solid; border-bottom-width: 3px; overflow: hidden; margin-top: 40px; padding: 0 10px 20px 10px; font-size: 16px; line-height: 22px; text-align: center; }
.footer-container p { margin-top: 10px; }
.footer-container a { text-decoration: underline; height: 28px; line-height: 28px; display: inline-block; vertical-align: top; margin: 0 10px; }
.footer-container a:hover { text-decoration: none; }
.footer-container .main-container { padding: 0; }

#scroll-top { opacity: 0.9; position: fixed; z-index: 20000; overflow: hidden; border-radius: 5px; right: 10px; 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) {
    a.logo { font-size: 20px; }
    .thumb { float: left; width: 50%; }
}

@media all and (min-width:500px) {
    .list li { width: 50%; float: left; }
    .list a { font-size: 14px; }
}

@media all and (min-width:640px) {
    a.logo { font-size: 22px; }
    .thumb p.thumb-cat { font-size: 18px; }
    .brka-2 { display: inline-block; }
    .list a { font-size: 16px; }
    .meta-container a, .meta-container span { height: 36px; line-height: 36px; }
    .rating-container a i { font-size: 36px; }
}

@media all and (min-width:800px) {
    .brka-desk-728 { display: block; }
    .brka-mob { display: none; }
}

@media all and (min-width:840px) {
    a.logo { font-size: 24px; }
    h1, h2, .subtitle { font-size: 26px; }
    h2, .subtitle { margin-top: 60px; }
    .title-sort { padding-top: 40px; }
    .thumb { width: 33.3333%; }
    .pagination { margin-top: 55px;}
    .brkas-container { margin-top: 50px; }
    .brka { margin: 10px 10px 0 10px; }
    .list li { width: 33.3333%; }
    .list a { height: 50px; line-height: 50px; }
    #scroll-top { right: 20px; bottom: 80px; width: 60px; height: 60px; line-height: 60px; font-size: 28px; }
    .limited { width: 70%; }
}

@media all and (min-width:1020px) {
    a.logo { margin-right: 60px; }
    .menu-slide { display: none; }
    .menu-container { display: block !important; box-shadow: none; background: none; border: 0 none; border-radius: 0; position: static; padding: 0; float: left; }
    .menu-container a { float: left; margin: 0 40px 0 0; height: 50px; line-height: 50px; font-size: 16px; }
    .main-container { max-width: 100%; width: 1000px; }
    .media-table { display: table; width: 100%; }
    .media-main-column, .media-right-column { display: table-cell; vertical-align: top; }
    .media { margin: 0 10px; }
    .media-right-column { width: 320px; max-width: 320px; padding-left: 10px; }
    .media-right-column .brkas-container { margin-top: 10px; }
    .media-right-column h2 { font-size: 20px; margin-top: 20px; }
    .media-right-column .thumb { width: 100% !important; }
    .media-right-column .pic { float: left; width: 36%; margin-right: 10px; padding: 0; }
    .media-right-column .thumb .spinner { width: 24px; height: 24px; line-height: 24px; font-size: 24px; margin: -12px 0 0 -12px; }
    .media-right-column .pic.wide-ratio img, .media-right-column .pic.rectangle-ratio img, .media-right-column .pic.square-ratio img, .media-right-column .pic.vertical-ratio img, .media-right-column .pic.custom-ratio img { position: relative; }
    .media-right-column .thumb a { overflow: visible; }
    .media-right-column .thumb p { height: 40px !important; line-height: 20px !important; white-space: normal; margin-top: 0; font-size: 14px !important; }
    .media-right-column .overlay { font-size: 11px; height: 20px; line-height: 20px; }
    .media-right-column .info { margin-top: 2px; height: 20px; line-height: 20px; }
    .media-right-column .info span { font-size: 12px; }
    .media-right-column .info span i { font-size: 16px; margin-right: 3px; }
    .brka-3 { display: inline-block; }
    .brka-desk-900 { display: block; }
}

@media all and (min-width:1280px) {
    a.logo { margin-right: 60px; }
    .menu-container a { font-size: 18px; }
    .main-container { width: 1260px; }
    .s-list { float: left; margin-right: 80px; }
    .s-list a { font-size: 15px; }
    .thumb p { font-size: 16px; }
    .info p { font-size: 15px; }
    .info p i { font-size: 18px; margin-right: 5px; }
    .info span { font-size: 15px; }
    .info span i { font-size: 22px; margin-right: 5px; }
    .brka-4 { display: inline-block; }
    .pagination a, .pagination span { min-width: 40px; height: 50px; line-height: 50px; font-size: 18px; }
    .list li { width: 25%; }
    .brka { margin: 10px 5px 0 5px; }
    .meta-container { padding-top: 10px; }
    .meta-container a, .meta-container span { height: 42px; line-height: 42px; }
    .rating-container a i { font-size: 42px; }
}

@media all and (min-width:1700px) {
    a.logo { margin-right: 80px; }
    .main-container { width: 1680px; }
    .menu-container a { margin-right: 50px; }
    h1, h2 { font-size: 28px; }
    .thumb { width: 25%; }
    .brka-5 { display: inline-block; }
    .list li { width: 16.6666%; }
    .brka { margin: 10px 10px 0 10px; }
    .media-right-column .brka-2 { display: inline-block; }
}