@font-face{font-family:'FontAwesome'; font-display: fallback; src:url('lib/fontawesome.eot');src:url('lib/fontawesome.eot') format('embedded-opentype'), url('lib/fontawesome.woff2') format('woff2'),url('lib/fontawesome.woff') format('woff'),url('lib/fontawesome.ttf') format('truetype'),url('lib/fontawesome.svg') format('svg');font-weight:normal;font-style:normal;font-display:swap;}
[data-icon]:before{font-family:'FontAwesome';content:attr(data-icon);}
[class^="fa-"],[class*=" fa-"]{display:inline-block;width:14px; line-height: 14px;}
dd > span[class^="fa-"] + time,dd > span[class*=" fa-"] + time{margin-left:-0.25em;}
dl.article-info dd.hits span[class^="fa-"],dl.article-info dd.hits span[class*=" fa-"]{margin-right:0;}
[class^="fa-"]:before,[class*=" fa-"]:before{font-family:'FontAwesome';font-style:normal;}
[class^="fa-"].disabled,[class*=" fa-"].disabled{font-weight:normal;}
body {background: #151515; text-decoration: none; margin: 0px; line-height: 1.6; font-family: Verdana, sans-serif; font-size: 15px; color: #fff;}
.container {
color: #fff;
background: #111;
padding-top: 90px;
margin: auto;
text-align: center;
font-size: 15px;
}
.header {
position: fixed;
height: 80px;
z-index: 9;
width: 100%;
background: #111;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
top: 0px;
border-bottom: 1px solid #3fa8f9;
}
a{
color: #4fb3ff;
text-decoration: none;
}
a:hover {
color: #338ed4;
text-decoration: underline;
cursor: pointer;
}
.open-menu .mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.logo {
max-width: 250px;
width: 100%;
float: left;
display: block;
margin-top: 5px;
line-height: 1;
}
.logo img {
max-width: 100%;
}
nav {
float: right;
}
nav ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
line-height: 1.5;
margin: 0;
}
nav ul a {
color: #fff;
text-transform: uppercase;
display: table-cell;
height: 80px;
padding: 0 12px;
box-sizing: border-box;
vertical-align: middle;
}
nav ul a:hover {
text-decoration: none;
cursor: pointer;
background: #1089e6;
color: #fff;
}
.mobile-toggle {
color: #3fa8f9;
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 25px;
top: 25px;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.mobile-toggle span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: #3fa8f9;
display: block;
}
.title {
text-align: center;
padding: 7px 0px;
color: #1089e6;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
margin: 3px auto;
box-sizing: border-box;
}
.title-white {
text-align: left;
padding: 7px 5px;
color: #fff;
width: 100%;
font-size: 18px;
margin: 3px auto;
box-sizing: border-box;
}
.thumbs-container {
max-width: 1400px;
margin: 5px auto;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
min-height: 250px;
}
.thumb {
max-width: 25%;
display: inline-block;
width: 100%;
text-align: center;
line-height: 0;
padding: 5px;
min-height: 125px;
box-sizing: border-box;
}
.thumb a{
background: #222;
display: block;
color: #fff;
text-decoration: none;
}
.thumb a:hover{
text-decoration: none;
cursor: pointer;
background: #151515;
color: #1089e6;
transition: all ease .5s;
}
.thumb-info {
border-top: 1px solid #444;
display: block;
padding: 0 5px;
color: #999999;
line-height: 20px;
text-align: left;
font-size: 12px;
box-sizing: border-box;
}
.prevs {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 7;
}
.left-info {display: inline-block; text-align: left;}
.right-info {display: inline-block; float: right;}
.thumb-screen {padding: 0; margin: 0; display: block; min-height: 125px; position: relative;}
.thumb-screen img{ max-width: 100%; width: 100%; padding: 0; margin: 0;}
.thumb-name {height: 36px; line-height: 16px; padding: 2px; overflow: hidden; box-sizing: border-box;}
.thumb-time{
position: absolute;
font-size: 14px;
left: 1px;
top: 1px;
background: rgba(4, 107, 185, .75);
height: 16px;
line-height: 15px;
color: #ffffff;
padding: 2px 4px;
z-index: 3;
}
.screen-progress {
position:absolute;
top:0;
left:0;
width:0;
background:rgba(4, 107, 185, .5);
height:2px;
transition: all ease 1s;
}
.navigation {text-align: center; margin: 3px 0px; box-sizing: border-box;}
.navigation ul {list-style-type: none; padding: 10px 0px;}
.navigation li {display: inline-block; margin: 4px; line-height: 0; box-sizing: border-box;}
.navigation li > a {
text-decoration: none;
font-size: 17px;
padding: 10px 16px 11px 16px;
display: inline-block;
line-height: 20px;
margin: 4px;
color: #fff;
background: #333;
background: linear-gradient(to bottom,#333 0,#555 100%);
background: -webkit-linear-gradient(bottom,#333 0,#555 100%);
background: -moz-linear-gradient(bottom,#333 0,#555 100%);
box-sizing: border-box;
}
.navigation li > a:hover {  
color: #fff;
background: #1089e6;
cursor: pointer;
}
.active-link {
font-size: 17px;
padding: 10px 16px 11px 16px;
display: inline-block;
margin: 4px;
line-height: 20px;
color: #fff;
background: #1089e6;
}
.active-link2 {
color: #fff !important;
background: #1089e6 !important;
}
.categories {
padding: 5px 2px;
width: 100%;
max-width: 1400px;
margin: 3px auto;
text-align: center;
box-sizing: border-box;
}
.category {
color: #4fb3ff;
text-align: left;
text-decoration: none;
width: 20%;
display: inline-block;
padding: 8px 5px;
box-sizing: border-box;
}
.category:hover{
color: #338ed4;
text-decoration: underline;
cursor: pointer;
transition: all ease .5s;
}
.text-content {
color: #fff;
text-align: left;
padding: 5px 10px;
margin: 4px 0px;
background-color: #151515;
box-sizing: border-box;
}
.text-content a{
margin-left: 5px;
}
.text-aux {
text-align: left;
width: 100%;
padding: 5px 10px;
margin: 3px 0px;
position: relative;
color: #ffffff;
box-sizing: border-box;
}
.btn {
text-decoration: none;
box-sizing: border-box;
white-space: nowrap;
font-size: 16px;
margin: 4px;
padding: 7px 11px;
display: inline-block;
line-height: 20px;
color: #fff;
border: none;
background: #333;
background: linear-gradient(to bottom,#333 0,#555 100%);
background: -webkit-linear-gradient(bottom,#333 0,#555 100%);
background: -moz-linear-gradient(bottom,#333 0,#555 100%);
}
.btn:hover {   
color: #fff;
background: #1089e6;
cursor: pointer;
text-decoration: none;
}
.footer {
color: #9c9c9c;
text-align: left;
background: #222;
padding: 15px 10px;
margin-top: 4px;
width: 100%;
box-sizing: border-box;
}
.footer a {
margin-right: 5px;
text-decoration: underline;
color: #4fb3ff;
}
.footer a:hover {
cursor: pointer;
color: #338ed4;
}
.models-container{
max-width: 1400px;
width: 100%;
margin: 4px auto;
}  
.model-thumb {
color: #fff;
display: inline-block;
width: 100%;
max-width: 15%;
line-height: 0;
text-align: center;
position: relative;
margin: 5px;
box-sizing: border-box;
}
.model-thumb > a > img{  
width: 100%;
height: auto;
}
.model-thumb img{  
max-width: 100%;
}
.model-thumb a {
color: #fff;
}
.model-thumb a:hover{
color: #4fb3ff;
transition: all 0.5s ease;
text-decoration: none;
}
.model-name {
text-align: center;
overflow: hidden;
height: 38px;
line-height: 16px;
position: absolute;
width: 100%;
font-weight: bold;
padding: 5px 0px;
bottom: 0px;
background: rgba(21, 21, 21, .75);
margin: auto;
box-sizing: border-box;
}
@media (max-width: 1200px) {
.model-thumb {max-width: 18%;}
}
@media (max-width: 960px) {
.model-thumb {max-width: 23%;}
}
@media (max-width: 720px) {
.model-thumb {max-width: 31%;}
}
@media (max-width: 480px) {
.model-thumb {max-width: 45%;}
}
@media (max-width: 250px) {
.model-thumb {
max-width: 95%;
margin: 5px 0px;
}
}
@media (max-width: 1350px) {
.thumb {max-width: 33%;}
}
@media (max-width: 1070px) {
.category {
width: 25%;
padding: 8px;
}
}
@media (max-width: 895px) {
.thumb {max-width: 50%; }     
.category {width: 33%;}
}
@media only screen and (max-width: 860px) {
.logo {
float: none;
}
.open-menu {
max-height: 360px !important;
height: 100%;
}
nav {
width: 100%;
}
.mobile-toggle {
display: block;
}
nav ul li {
width: 100%; 
margin: 0;
}
nav ul {
float: left;
text-align: left;
margin-top: 10px;
width: 100%;
}
nav ul a {
color: #fff;
text-transform: uppercase;
display: block;
height: auto;
padding: 15px;
vertical-align: middle;
}
}
@media (max-width: 650px) {
.title {font-size: 17px;}   
.title-white {font-size: 17px;}     
.category {width: 50%;}
}
@media (max-width: 450px) {
.thumb {max-width: 100%;}    
.title {font-size: 16px;}   
.title-white {font-size: 16px;} 
.navigation li > a {font-size: 16px;}
.active-link {font-size: 16px;}
.btn {
font-size: 15px;
padding: 7px 11px;
}
.category {
width: 100%;
text-align: left;
padding: 8px 10px;
}
}
@media (max-width: 330px) {
.thumb {min-height: 50px;}
.thumb-screene {min-height: 50px;}
.title {font-size: 15px;}
.title-white {font-size: 15px;}
.logo {
max-width: 200px;
margin-top: 7px;
}
.mobile-toggle {
font-size: 16px;
right: 10px;
top: 29px;
}
.mobile-toggle span {
width: 25px;
height: 3px;
}
.btn {
padding: 6px 10px;
}
}
.fa-calendar:before {content: "\f073";}
.fa-eye:before {content: "\f06e";}
.fa-home:before {content: "\f015";}
.fa-clock-o:before {content: "\f017";}
.fa-thumbs-o-up:before {content: "\f087";}
.left-pad {
text-align: left;
padding-left: 10px;
}