body, .menu-container a:hover i, .menu-container a.active i, .search-form button:hover
{ background-color: rgb(0,5,15); }

.menu-container, .search-form, .list
{ background-color: rgb(20,25,35); }

.menu-container i, .pic, .brka, .search-form button, .list span i
{ background-color: rgb(40,45,55); }

.head-container, .search-input, .pagination a.next, .pagination a.prev, .pagination span.next, .pagination span.prev, .pagination a.view-all, .footer-container, .full-info a, .full-meta
{ border-color: rgb(40,45,55); }

body, .filters a, .thumb li, .thumb li:after, .list a, .popular-list a, .footer-container a, .full-info a
{ color: rgb(160,165,175); text-shadow: 1px 1px 0 rgba(0,0,5,0.5); }

a:hover, .menu-slide:hover, .search-slide:hover, .menu-slide.active, .search-slide.active, a.logo span, .menu-container a.active, .menu-container a:hover, .search-form button:hover, .filters i, .thumb li.colored, .list span i, .popular-list a i, .about span.colored, .links-container span i, .rating-container a i
{ color: rgb(80,170,210); }

#scroll-top, a.logo i
{ background-color: rgb(80,170,210); color: rgb(255,255,255); }

.menu-container a:hover i, .menu-container a.active i, .pagination a.active, .pagination a:hover, .full-info a:hover
{ border-color: rgb(80,170,210); }

.thumb-lay
{ background-color: rgba(0,0,5,0.4); color: rgb(255,255,255); text-shadow: 1px 1px 0 rgba(0,0,0,0.6); }

a.logo, a, h1, h2, .menu-slide, .search-slide, .search-form button, .filters a:hover, .filters a.active, .list a:hover, .popular-list a:hover, .about span, .footer-container span, .footer-container a:hover, .links-container span, .full-info a:hover
{ color: rgb(240,245,250); }

.pic:after
{ background: linear-gradient(to bottom,transparent,rgb(0,0,5)); background: -webkit-linear-gradient(top,transparent,rgb(0,0,5)); }

.thumb p
{ text-shadow: 1px 1px 0 rgb(0,0,5); }

.search-input
{ background-color: rgba(255,255,255,0.95); }

.search-form input, .search-form input::placeholder
{ color: rgb(40,45,50); text-shadow: none; }


.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: 'Saira Condensed', sans-serif; text-transform: uppercase; }

li { list-style-type: none; }

i { text-rendering: optimizeLegibility !important; }

img { display: block; }

a { text-decoration: none; -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; }

h1, h2 { font-weight: bold; overflow: hidden; text-align: center; }
h1 { font-size: 26px; line-height: 30px; margin: 20px 10px 0 10px; }
h2 { margin: 40px 10px 0 10px; font-size: 24px; line-height: 28px; }

.head-container { border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 10px; text-align: center; min-height: 45px; }
.head-container .main-container { position: relative; overflow: visible; }

.menu-slide, .search-slide { display: block; cursor: pointer; width: 35px; height: 35px; line-height: 35px; font-size: 24px; margin: 10px 5px 0 5px; }
.menu-slide { float: left; }
.search-slide { float: right; }

a.logo { margin: 10px 10px 0 10px; text-transform: uppercase; overflow: hidden; font-weight: bold; display: inline-block; vertical-align: top; height: 35px; line-height: 35px; font-size: 22px; }
a.logo i { border-radius: 50%; font-size: 26px; width: 35px; height: 35px; line-height: 35px; display: inline-block; vertical-align: top; margin: 0 3px; text-align: center; }

.menu-container { box-shadow: 0 15px 25px -7px rgba(0,0,0,0.8); display: none; z-index: 10000; overflow: hidden; position: absolute; top: 55px; left: 0; text-align: left; padding: 10px 20px 20px 20px; min-width: 140px; }
.menu-container a { display: block; margin-top: 10px; font-weight: bold; height: 35px; line-height: 35px; font-size: 18px; overflow: hidden; }
.menu-container i { -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; border: solid 2px transparent; border-radius: 50%; text-align: center; font-size: 20px; display: block; float: left; width: 31px; margin-right: 7px; height: 31px; line-height: 31px; }
.menu-container i.la-play { font-size: 22px; }

.search-form { display: none; box-shadow: 0 15px 25px -7px rgba(0,0,0,0.8); overflow: hidden; top: 55px; left: 0; right: 0; position: absolute; z-index: 10000; padding: 20px; }
.search-form form { position: relative; }
.search-input { border-style: solid; border-width: 1px; border-radius: 23px; overflow: hidden; height: 46px; line-height: 46px; padding: 0 50px 0 20px; }
.search-form input { background: none; font-weight: bold; text-transform: uppercase; border: 0 none; width: 100%; outline: 0 none; font-size: 18px; height: inherit; line-height: normal; }
.search-form input::placeholder { text-transform: uppercase;  }
.search-form button { -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; border-radius: 50%; overflow: hidden; position: absolute; top: 6px; right: 6px; border: 0 none; cursor: pointer; outline: 0 none; width: 36px; font-size: 18px; height: 36px; line-height: 36px; }
.search-form button i { display: block; height: inherit; line-height: inherit; }

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

.title { overflow: hidden; position: relative; padding-right: 110px; }

.filters { overflow: hidden; text-align: center; padding-top: 5px; }
.filters a, .filters i { font-weight: bold; overflow: hidden; display: block; float: left; margin: 5px 5px 0 5px; height: 25px; line-height: 25px; font-size: 18px; }
.filters i { font-size: 24px; margin-right: 3px; }
.filters-group { display: inline-block; vertical-align: top; margin: 0 10px; }

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

.thumb { overflow: hidden; }

.thumb-inner { overflow: hidden; margin: 20px 10px 0 10px; }

.thumb a { display: block; }

.pic { position: relative; }
.pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pic:after { opacity: 0.7; -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 20%; }
.thumb a:hover .pic:after { height: 100%; }

.thumb-lay { position: absolute; top: 0; right: 0; padding: 0 5px; font-weight: bold; font-size: 18px; height: 20px; line-height: 20px; overflow: hidden; display: block; text-align: center; }
.thumb-lay i { display: block; font-size: 18px; float: left; height: inherit; line-height: inherit; margin-right: 3px; }

.thumb p { z-index: 2000; text-overflow: ellipsis; white-space: nowrap; -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; overflow: hidden; max-height: 24px; line-height: 24px; font-size: 18px; font-weight: bold; position: absolute; bottom: -12px; left: 10px; right: 10px; text-transform: uppercase; }

.thumb ul { overflow: hidden; height: 24px; line-height: 24px; font-size: 13px; margin: 8px 0 0 10px; }
.thumb li { float: left; overflow: hidden; margin-right: 5px; }
.thumb li:after { content: '/'; margin-left: 5px; font-weight: bold; }
.thumb li:last-child { margin-right: 0; }
.thumb li:last-child:after { display: none; }
.thumb li i { display: block; float: left; font-size: 16px; height: inherit; line-height: inherit; margin-right: 3px; }
.thumb li i.la-eye { font-size: 18px; }
.thumb li i.la-thumbs-up { margin-right: 2px !important; }

.thumb-alt p { font-size: 24px; }


.pagination { overflow: hidden; margin: 35px 5px 0 5px; font-size: 0; text-align: center; font-weight: bold; }
.pagination a, .pagination span { display: none; border: solid 2px transparent; border-radius: 50%; overflow: hidden; margin: 5px 5px 0 5px; display: inline-block; vertical-align: top; padding: 0 5px; min-width: 30px; height: 40px; line-height: 40px; font-size: 18px; }

a.prev, span.prev {border-radius: 3px; float: left; min-width: 50px; padding: 0 20px; }
a.next, span.next { border-radius: 3px; float: right; min-width: 50px; padding: 0 20px; }
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; font-size: 24px; border-radius: 3px; height: 60px; line-height: 60px; padding: 0 25px; }

.brkas-container {overflow: hidden; margin-top: 30px; text-align: center; font-size: 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; }

.popular-list { overflow: hidden; padding-top: 15px; text-align: center; }
.popular-list a { font-size: 18px; font-weight: bold; overflow: hidden; display: inline-block; vertical-align: top; margin: 5px 15px 0 15px; height: 32px; line-height: 32px; }
.popular-list a i { opacity: 0.9; -moz-transition: 0.1s ease; -webkit-transition: 0.1s ease; -o-transition: 0.1s ease; transition: 0.1s ease; float: left; display: block; height: inherit; line-height: inherit; margin-right: 3px; }
.popular-list a:hover i { opacity: 1; }
.popular-list a.size-1 { font-size: 22px; }
.popular-list a.size-2 { font-size: 26px; }
.popular-list a.size-3 { font-size: 30px; }

.list { overflow: hidden; margin-top: 20px; padding: 0 10px 20px 10px; }
.list li { overflow: hidden; }
.list a { font-size: 24px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; margin: 20px 10px 0 10px; height: 26px; line-height: 26px; }
.list span { display: block; height: 20px; line-height: 20px; font-size: 14px; margin: 0 10px; }
.list span i { border-radius: 50%; text-align: center; float: left; display: block; width: 20px; height: 20px; line-height: 20px; font-size: 16px; margin-right: 4px; }

.about { overflow: hidden; margin: 10px 10px 0 10px; font-size: 16px; line-height: 26px; text-align: center; }
.about p { overflow: hidden; margin-top: 10px; }
.about span { font-weight: bold; }
.about a { text-decoration: underline; font-weight: bold; }
.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; }

.full-info h1 { text-align: center; margin-top: 15px; }

.full-info a { cursor: pointer; overflow: hidden; font-weight: bold; margin: 5px 5px 0 0; padding: 0 10px; border-radius: 3px; border-style: solid; border-width: 2px; display: block; float: left; height: 30px; line-height: 30px; font-size: 18px; }
.full-info span { overflow: hidden; font-weight: bold; margin: 5px 7px 0 0; display: block; float: left; line-height: 34px; font-size: 18px; }
.full-info i { display: block; float: left; margin-right: 3px; height: inherit; line-height: inherit; font-size: 22px; }

.full-meta { overflow: hidden; border-bottom-width: 2px; border-bottom-style: solid; padding-bottom: 10px; }

.rating-container { overflow: hidden; margin: 10px 8px 0 8px; }
.rating-container li { float: left; width: 50%; }
.rating-container a { float: none; margin: 5px 2px 0 2px; height: 40px; line-height: 40px; text-align: center; }
.rating-container a i { float: none; display: inline-block; vertical-align: top; font-size: 28px; }

.meta { text-align:center; padding: 5px 8px 0 8px; overflow: hidden; }
.meta span { margin: 5px 2px 0 5px; display: inline-block; vertical-align: top; float: none; }
.meta span:after { content: '/'; margin-left: 10px; font-weight: bold; }
.meta span:last-child:after { display: none; }

.links-wrap { overflow: hidden; padding-left: 10px; clear: both; }

.links-container { float: left; margin: 15px 30px 0 0; }

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

.footer-container { border-top-width: 2px; border-top-style: solid; overflow: hidden; margin-top: 40px; padding: 15px 10px 25px 10px; font-size: 18px; line-height: 24px; text-align: center; }
.footer-container p { overflow: hidden; margin-top: 10px; }
.footer-container span { font-weight: bold; }
.footer-container a { font-weight: bold; overflow: hidden; height: 28px; line-height: 28px; display: inline-block; vertical-align: top; margin: 2px 10px 0 10px; }
.footer-container a:hover { text-decoration: underline; }

#scroll-top { overflow: hidden; opacity: 0.9; border-radius: 50%; position: fixed; z-index: 20000; right: 10px; bottom: 10px; cursor: pointer; display: none; width: 40px; height: 40px; line-height: 40px; font-size: 20px; 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%; }
    .thumb p { font-size: 16px; }
    .thumb-alt p { font-size: 20px; }
    .list li { float: left; width: 50%; }
    .list a { font-size: 18px; }
}

@media all and (min-width:520px) {
    .thumb p { font-size: 18px; }
    .thumb-alt p { font-size: 22px; }
    .list a { font-size: 20px; }
    .full-info h1 { text-align: left; }
    .rating-container { float: left; }
    .rating-container a { float: left; margin: 5px 5px 0 0; }
    .rating-container li { width: auto; }
    .full-meta { padding-bottom: 20px; }
    .meta { padding-top: 10px; float: right; }
    .meta span { height: 42px; line-height: 42px; }
}

@media all and (min-width:640px) {
    .brka-2 { display: inline-block; }
    .list li { width: 33.3333%; }
}

@media all and (min-width:820px) {
    .thumb { width: 33.3333%; }
    .filters a { font-size: 20px; }
}

@media all and (min-width:1020px) {
    .menu-slide { display: none; }  
    a.logo { float: left; margin-right: 40px; }
    .menu-container { display: block !important; position: static; padding: 10px 0 0 0; background: none; box-shadow: none; }
    .menu-container a { float: left; margin: 0 20px 0 0; }
    .thumb p { font-size: 20px; }
    h1 { font-size: 30px; line-height: 34px; }
    h2 { font-size: 28px; line-height: 32px; }
    .brka { margin: 10px 10px 0 10px; }
    .brka-3 { display: inline-block; }
    .list li { width: 25%; }
    .list a { font-size: 22px; }
    #scroll-top { width: 50px; height: 50px; line-height: 50px; right: 20px; bottom: 20px; font-size: 24px; }
    .thumb-alt p { font-size: 30px !important; line-height: 32px !important; max-height: 32px !important; bottom: -16px !important; }
    .thumb-alt a:hover p { max-height: 64px !important; }
    .full-container { margin: 0 10px; }
    .full-table { display: table; width: 100%; }
    .full-column, .full-brkas-container { display: table-cell; vertical-align: top; }
    .full-column { padding-top: 10px; }
    .full-brkas-container { margin: 0; width: 310px !important; max-width: 310px !important; }
    .full-brkas-container .brka { margin: 10px 0 0 10px; }
    .rating-container { margin-left: 0; }
    .meta { padding: 10px 0 0 0; }
    .full-info h1 { margin-left: 0; }
    .full-brkas-container .brka-3 { display: none; }
    
}


@media all and (min-width:1250px) {
    .main-container { width: 1230px; max-width: 100%; }
    .head-container { padding-bottom: 15px; }
    .head-container, .head-container .main-container { overflow: hidden; }
    a.logo { margin: 19px 40px 0 15px; height: 40px; line-height: 40px; font-size: 26px; }
    a.logo i { font-size: 30px; width: 40px; height: 40px; line-height: 40px; }
    .menu-container { float: left; padding-top: 19px; }
    .menu-container a { height: 40px; line-height: 40px; }
    .menu-container i { height: 36px; line-height: 36px; width: 36px; }
    .search-slide { display: none; }
    .search-form { display: block !important; position: static; padding: 15px 15px 0 30px; background: none; box-shadow: none; }
    .thumb { width: 410px; }
    .thumb-inner { margin: 30px 15px 0 15px; }
    .thumb-lay { padding: 0 8px; font-size: 20px; height: 26px; line-height: 26px; }
    .thumb p { font-size: 24px; white-space: normal; left: 20px; right: 20px; line-height: 26px; max-height: 26px; }
    .thumb a:hover p { max-height: 52px; }
    .thumb ul { font-size: 14px; margin: 14px 0 0 20px; }
    .thumb li { margin-right: 10px; }
    .thumb li:after { margin-left: 10px; }
    .thumb li i { font-size: 18px; margin-right: 5px; }
    .thumb li i.la-eye { font-size: 20px; }
    .brkas-container { margin-top: 50px; }
    .brka { margin: 10px 2px 0 2px; }
    .brka-4 { display: inline-block; }
    h1 { font-size: 34px; line-height: 38px; margin: 30px 15px 0 15px; }
    h2 { font-size: 32px; line-height: 36px; margin: 80px 15px 0 15px; }
    .filters { padding-top: 10px; }
    .filters a { margin: 5px 10px 0 10px; font-size: 22px; }
    .filters i { font-size: 30px; margin-right: 0; }
    .filters-group { margin: 0 20px; }
    .pagination { margin: 55px 10px 0 10px; }
    .pagination a, .pagination span { margin: 5px 5px 0 5px; height: 50px; line-height: 50px; min-width: 40px; font-size: 20px; }
    a.prev, span.prev, a.next, span.next { min-width: 100px; }
    .list { margin: 30px 15px 0 15px; border-radius: 3px; padding: 0 25px 40px 25px; }
    .list a { font-size: 24px; margin: 30px 15px 0 15px; }
    .list span { margin: 3px 15px 0 15px; }
    .popular-list a { font-size: 20px; }
    #scroll-top { width: 60px; height: 60px; line-height: 60px; font-size: 26px; }
    .about { font-size: 18px; margin: 20px 15px 0 15px; }
    .footer-container { margin-top: 80px; }
    .full-container { margin: 0 15px; }
    .full-column { padding-top: 30px; }
    .full-brkas-container { padding-top: 15px; width: 330px !important; max-width: 330px !important; }
    .full-brkas-container .brka { margin: 15px 0 0 30px; }
}

@media all and (min-width:1660px) {
    .main-container { width: 1640px; }
    a.logo { margin-right: 80px; font-size: 30px; }
    .menu-container a { margin-right: 40px; font-size: 22px; }
    .menu-container i { font-size: 24px; }
    .menu-container i.la-play { font-size: 26px; }
    .search-form { padding-left: 120px; }
    h1 { font-size: 36px; line-height: 40px; }
    h2 { font-size: 34px; line-height: 38px; }
    .brka { margin: 10px 10px 0 10px; }
    .brka-5 { display: inline-block; }
    .list li { width: 20%; }
    .list a { font-size: 26px; }
    .full-brkas-container .brka-3 { display: inline-block; }
}