html,body{height:100%;box-sizing:border-box;margin:0;padding:0}
html{overflow:hidden}

body {
    font-family: 'Rubik', helvetica, arial;
    color: #454545 !important;
    line-height: 30px;
    letter-spacing:0.25px;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    background: #fff;
    font-size: 12px;
    background: url('../img/bg.jpg') #0a0813 center fixed no-repeat;
    background-size:cover;
}

.overlay,
.bg-overlay{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,0,0,0.85);
	z-index:10
}

.overlay-content{
	width:500px;
	max-width:98%;
	max-height:100%;
	overflow-y:auto;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#181818;
	padding:10px
}

.bg-overlay{
z-index:1;
background:rgba(0,0,0,0.55);
}

.content-overlay{
position:relative;
z-index:2;
}

.closebtn{
	width:25%;
	margin:15px auto;
	margin-bottom:0;
	text-align:center;
	color:#333;
	font-size:1.2em;
	background:#fcfcfc;
	border-radius:15px;
	cursor:pointer
}

.header{
	padding:10px;
	line-height:2;
	color:#fff
}

.wrapper{
    width:100%;
	height:100%;
    max-width:1360px;
    margin:auto;
	position:relative;

}

.content{ 
	padding-bottom:50px;
}

#lastupd{
	padding:3px 10px;
	box-shadow:1px 1px 1px 1px #555;
	font-weight:bold;
	letter-spacing:0.5px;
	background:black;
	color:red;
	display:inline-block
}

.provs{
	background:rgba(0,0,0,0.45);
	box-shadow:0 0 20px #000;
	padding:10px;
	overflow-x:auto;
	white-space:nowrap;
	border-radius:10px;
}

.prov{
	display:inline-block;
	border:1px solid #c7c7c7;
	border-top:0;
	border-left:0;
	margin: 10px;
	padding:0px 20px;
	border-radius:50px;
	background:#000
}

.prov img{width:90px;vertical-align:middle}

.prov.active,
.prov:hover,
#top20:hover{
	background:#484848;
	cursor:pointer;
}

#top20{
    position: fixed;
    bottom: 48px;
    right: 0;
    padding: 5px;
    background: #333;
    border-radius: 10px 0 0 0;
    border: 1px solid #555;
    width: 60px;
    height: 60px;
    z-index: 9;
}

#float-menu{
	position:fixed;
	bottom:0;
	left:0;
	height:48px;
	width:100%;
	z-index:99;
	background:#333;
	color:#fff;
}

.float-menu{
	float:left;
	width:33.33%;
	font-size:0.8em;
	line-height:48px;
	text-align:center;
}

.float-menu img{
	vertical-align:middle;
}

.item,
.overlay-item{
	width:30.7%;
	margin:1%;
	position:relative;
}

.item img,
.overlay-item img{
	vertical-align:middle;
	border-radius:10px 10px 0 0;
}

.item-overlay,
.overlay-item-overlay{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:calc(100% - 30px);
	background:rgba(0,0,0,0.1);
	z-index:2;	
}

.itembtn{
	padding:5px;
	width:80%;
	background:#fff;
	color:#333;
	border-radius:50px;
	letter-spacing:1px;
	text-align:center;
	position:absolute;
	top:50%;left:50%;
	transform:translate(-50%,-50%);
}

.item:hover > .item-overlay,
.overlay-item:hover > .overlay-item-overlay{display:block}

.name{
	overflow-x:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	color:#fff;
	position:absolute;
	width:100%;
	bottom:30px;
	padding:0 10px;
	background:rgba(0,0,0,0.5);
	display:none;
}

.percent{
	height:30px;
	background:#f8f8f8;
	border-radius:0 0 10px 10px;
}

.percent-text,
.percent-bar{
	position:absolute;
	width:100%;
	height:30px;
	text-align:center;
	border-radius:0 0 0 10px;
	color:#000;
	font-size:14px
}

.percent{
	background:#f8f8f8;
}

#footer{
	color:#fff;
	width:98%;
	margin:10px auto;
	background:rgba(0,0,0,0.5);
	padding:10px;
	box-shadow:0 0 5px #000;
}

.floated{
	display:inline-block
}

.centered{
	text-align:center;
}

table{
	border-collapse:collapse
}

.red{
	background:#dc3545;
	background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.yellow{
	background:#ffc107;
	background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.green{
	background:#28a745;
	background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

h1,h2,h3{margin:0}
h1{font-size:1.75em}

a{color:#fff;text-decoration:none}
a:hover{text-decoration:none}

.hide-on-desktop{display:block}
.hide-on-mobile{display:none}

*{box-sizing:border-box}

::-webkit-scrollbar{width:.4em;height:.4em}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px #666}
::-webkit-scrollbar-thumb{background-color:#333;outline:#666 solid 1px;border-radius:10px}

@media only screen and (min-width:800px){
	.item{width:17.7%}	
	.name{display:block}
}

@media only screen and (min-width:1024px){
    	.hide-on-mobile{display:block}
    	.hide-on-desktop{display:none}
	.item{width:10.23%}
	.percent-text{font-size:16px}
}