html, body {
  height: 100%;
}

body {
	overflow-x: hidden;
	font-family: play_regular;
	color: #fff;
	margin:0;
	display: flex;
	flex-direction: column;
}

body.main {
	background-color: #232323;
	/*background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;*/
}

body.site {
	background-color: #232323;
	#background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
}

.content {
	flex: 1 0 auto;
}
.footer {
	padding-top: 20px;
	flex-shrink: 0;
}

i {
	color: white;
}

th {
	text-align: left;
}


a{
	color:#0080ff;
	text-decoration: none;
}


a:hover {
	color: #fff;
	text-align: center;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
	text-decoration: none;
}



img.center {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin-top: -50px; /* Half the height */
	margin-left: -50px; /* Half the width */
}

::-webkit-scrollbar {
	width: 3px;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
	background: #232323;
}


@font-face {
	font-family: 'icomoon';
	src:  url('../fonts/icomoon.eot?tbnmtl');
	src:  url('../fonts/icomoon.eot?tbnmtl#iefix') format('embedded-opentype'),
	url('../fonts/icomoon.ttf?tbnmtl') format('truetype'),
    url('../fonts/icomoon.woff?tbnmtl') format('woff'),
    url('../fonts/icomoon.svg?tbnmtl#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	#font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size:20px;

  /* Better Font Rendering =========== 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}

.icon-ak47:before { content: "\e90b";}
.icon-grenade:before { content: "\e900";}
.icon-awp:before { content: "\e901";}
.icon-famas:before { content: "\e902";}
.icon-knife:before { content: "\e903"; }
.icon-m4a1:before { content: "\e904";}
.icon-m249:before { content: "\e905";}
.icon-p90:before { content: "\e906";}
.icon-scout:before { content: "\e907";}
.icon-sg552:before { content: "\e908";}
.icon-usp:before { content: "\e909";}
.icon-usp-knife:before { content: "\e90a";}

@font-face {
	font-family: batman;
	src: url(../fonts/Batman.ttf);
}

@font-face {
	font-family: play_bold;
	src: url(../fonts/Play-Bold.ttf);
}

@font-face {
	font-family: play_regular;
	src: url(../fonts/Play-Regular.ttf);
}

big {
	#font-size:30px;
	font-family: batman;
	color:#0080ff;
	font-weight: 400;
}
.big {
	#font-size:30px;
	font-family: batman;
	color:#0080ff;
	font-weight: 400;
}

med {
	font-size:13px;
	font-family: play_bold;
	color:#0080ff;
	font-weight: 400;
}

med:hover {
	color: #fff;
	text-align: center;
	-webkit-animation: glow 1s ease-in-out infinite alternate;
	animation: glow 1s ease-in-out infinite alternate;
}

.med {
	font-size:13px;
	font-family: play_bold;
	font-weight: 400;
}

small {
	font-size:small;
	font-family: play_regular;
	color:white;
	font-weight: 400;
}

.small {
	font-size:small;
	font-family: play_regular;
	font-weight: 400;
}

.x-small {
	font-size:x-small;
	color:white;
}

###### TABLE ########

.table-fixed {
    table-layout: fixed;
}
.block-center {
    margin-right: auto;
    margin-left: auto;
}
.table-collapsed {
    border-collapse: collapse;
}
.table-shadow {
    background-color: #1b1b1b;
    -webkit-box-shadow: 0 0 2em 1em #1b1b1b, inset 0 0 1em 1em #1b1b1b;
    box-shadow: 0 0 2em 1em #1b1b1b, inset 0 0 1em 1em #1b1b1b;
}



.w48 {
    width: 48em;
}
@media (max-width: 48em) {
    .w48 {
        width: 98%;
    }
}


.w40 {
    width: 40em;
}
@media (max-width: 40em) {
    .w40 {
        width: 98%;
    }
}

.thumb span { 
	position:relative;
	visibility:hidden;
}
.thumb:hover, .thumb:hover span { 
	visibility:visible;
}

.container {
  position: relative;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #202020;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
	color: white;
	font-size:small;
	top: 50%;
	text-align: center;
}

.visible-title {
    visibility: visible;
	animation: fadeIn ease 3s;
	-webkit-animation: fadeIn ease 3s;
}

div p {
	#padding: 0px 16px 0px 0px;
	visibility: hidden;

}

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.inline{
	display: inline-block;
}

.tooltip {
	position: relative;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 220px;
	background-color: #333;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -150px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.quality {
    -webkit-animation: 1.5s slide;
    animation: 1.5s slide;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes slide {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

.pct-bar div{
    height: 100%;
    text-align: left;
    background-color: #434343;
}


.pct-bar {
    -webkit-box-shadow: 1px 0 .2em rgba(30,30,30,.3),inset 0 -.25em .25em rgba(30,30,30,.3);
    box-shadow: 1px 0 .2em rgba(30,30,30,.3),inset 0 -.25em .25em rgba(30,30,30,.3);
    background-color: #434343;
    height: 6px;
	width: 80%;
    overflow: hidden;
    text-align: left;
    float: none !important;
    text-align: left !important;
}

.rec-bar {
	background: -webkit-linear-gradient(left, rgba(255,107,107,1) 0%, rgba(251,255,0,1) 53%, rgba(174,255,82,1) 89%, rgba(151,255,107,1) 100%);	
}

.unc-bar{
	
	background: -webkit-linear-gradient(left, rgba(0,132,255,1) 0%, rgba(67,67,67,1) 100%);
}

.rec_links {
	padding: 0px 10px 0px 0px;
}

a.active {
	color: #fff;
	border-width: 2px;
	border-style: solid;
	border-color: transparent transparent #0080ff transparent;
	padding: 0px 0px 10px 0px;
}

a.active_weap {
	color: #fff;
}

.selected_display {
	color: #fff;
}

@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #0080ff, 0 0 30px #0080ff;
	}
  
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #0050ff;
	}
}

@keyframes glow {
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #0080ff, 0 0 30px #0080ff;
	}
	
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #0050ff;
	}
}

a span.en, a:hover span.mi {
	display: inline;
}
a:hover span.en, a span.mi {
	display: none;
	font-family: Batman;
}


.king {
	color: #ff1177;
	font-family:play_bold;
}

.master {
	color: #ba01ff;
	font-family:play_bold;
}

.expert {
	color: #228dff;
	font-family:play_bold;
}

.pro {
	color: #b6ff00;
	font-family:play_bold;
}

.newbie {
	color: #ffdd1b;
	font-family:play_bold;
	font-size:small;
}

.border_0 {
	padding:1px;
	border:2px solid Red;
}

.border_1, .border_5, .border_6 {
	padding:1px;
	border:2px solid Lime;
}

.border_2, .border_3 {
	padding:1px;
	border:2px solid Silver;
}

.border_4 {
	padding:1px;
	border:2px solid Aqua;
}