html, body {
    width: 100%;
    height: 100%;
}

#game-canvas{
	width: 100% !important;
	height: 100% !important;
}

*{
	-webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome and Opera */
}

p{
	font-size: 1vw;
}

a{
	color: #fff;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.selectable{
	user-select: text;
}

@font-face {
    font-family: 'Digital';
    src: url('./fonts/Digital-7MonoItalic.woff2?v=1.0') format('woff2'),
        url('./fonts/Digital-7MonoItalic.woff?v=1.0') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'CoolveticaRg';
	src: url('./fonts/BebasNeue-Regular.woff') format('woff'), 
	url('./fonts/BebasNeue-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body{
	margin: 0px;
	padding: 0px;
	background: #666;
	font-family: CoolveticaRg, sans-serif;
	letter-spacing: 0.1vw;
	overflow: hidden;
}

.wrapper{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.background-overlay{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background: rgba(56, 56, 56, 0.25);
	box-shadow: inset 0px 2vw 30vw #000000;
}

.stat-background{
	background: rgba(56, 56, 56, 0.85);
}

div#background-overlay {}

.sub-overlay{
	/* z-index: 9; */
	position: fixed;
}

.menu{
	width: 55vw;
	background: rgb(39,44,49);
	/* background: linear-gradient(0deg, rgba(39,44,49,1) 0%, rgba(39,46,49,1) 35%, rgba(39,44,49,0.8911939775910365) 100%); */
	height: 100vh;
	position: relative;
	overflow: hidden;
	box-shadow: 5vw 0px 5vw rgba(0, 0, 0, 0.4);
	z-index: 5;
}

.header{
	/* padding: 1vw; */
	background: #171b1f;
	background-size: auto 300%;
	height: 4vw;
	line-height: 4vw;
	vertical-align: middle;
	box-shadow: inset 0px -0.7vw 1vw #000000;
	overflow: hidden;
}

.content{
	padding: 1vw;
	color: #fff;
}

.login-form{
	/* height: 70vh; */
	/* margin-top: 3vh; */
}

.footer{
	margin-top: 1vw;
	padding: 0px;
	background: rgba(0, 0, 0, 0.1);
	width: 100%;
	box-sizing: border-box;
	height: 15vh;
	overflow: hidden;
}

.footer-stick{
	position: absolute;
	bottom: 0;
	left: 0;
}

.logo{
	width: 12vh;
	/* float: right; */
	/* margin-top: 0.6vw; */
	/* margin-right: 1vw; */
}

.banner-area{
	/* border: solid 0.5vw rgba(0, 0, 0, 0.2); */
	display: block;
	/* background: rgba(0, 0, 0, 0.1); */
	left: 50%;
	top: 50%;
	position: absolute;
	/* box-shadow: 0px 0px 2vw #000; */
	/* margin-left: -0.5vw; */
	/* margin-top: -0.5vw; */
}

.banner-728x90{
	width: 728px;
	height: 90px;
	background: #fff;
}

.menu-list{
	list-style: none;
	color: #fff;
	font-size: 1.3vw;
	float: left;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	width: 38vw;
}

.menu-list li{
	float: left;
	/* margin-right: 1vw; */
	font-weight: bold;
	line-height: 2.5vw;
	height: 2.5vw;
	padding: 0.75vw;
	color: #45d2ec;
	min-width: 5vw;
	text-align: center;
	cursor: pointer;
	padding-left: 3vw;
	opacity: 0.5;
	position: relative;
	/* text-shadow: 0px 0vw 1.2vw #ffffff; */
	text-transform: uppercase;
	letter-spacing: 0.02vw;
}

.active-triangle{
	position: absolute !important;
	bottom: 0;
	left: 4vw;
	width: 1vw;
	height: auto !important;
	display: none;
}

.menu-list li.active{
	color: #45d2ec;
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
	text-shadow: 0px 0vw 1.2vw #ffffff;
}

li.active .active-triangle{
	display: block;
}

.tab .active-triangle{
	left: 2vw;
}

.menu-list li img{
	position: absolute;
	height: 1.8vw;
	margin-left: -2.5vw;
	margin-top: 0.4vw;
}

.btn{
	padding: 1vw 1.5vw;
	font-size: 1.5vw;
	border:none;
	font-family: CoolveticaRg, sans-serif;
	background: #7289da;
	color: #fff;
	outline: none;
	cursor: pointer;
	width: 14.5vw;
	height: 4.6vw;
	text-shadow: 0px 2px 4px #2f7181;
	letter-spacing: 1px;
	background-size: 100% auto;
	position: relative;
	overflow: hidden;
}

.btn-follow{
	padding: 0.2vw 0.5vw !important;
	font-size: 1vw;
}

.btn[disabled] .shine-effect{
	display: none;
}

.shine-effect{
	position: absolute;
	width: 5vw;
	height: 100%;
	background: url('../images/shine-effect.png');
	top: 0;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	animation: 5s shine-effect linear infinite;
	transform-origin: center center;
	display: block;
}

.loadout .loading-spin, .side-loadout-item .loading-spin{
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(255, 255, 255, 0.3);
	z-index: 10;
}

.loadout .loading-spin img, .side-loadout-item .loading-spin img{
	left: 50%;
	top: 50%;
	width: 2vw;
	position: absolute;
	transform: translate(-50%, -50%);
}

.loadout li .shine-effect{
	position: absolute;
	width: 10vw;
	height: 100%;
	background: url('../images/shine-effect.png');
	top: 0;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	animation: 2s shine-effect linear infinite;
	transform-origin: center center;
	display: block;
}

@keyframes shine-effect{
	0%{
		left: 70%;
		transform: scaleX(1);
		opacity: 0;
	}

	20%{
		opacity: 0.4;
		transform: scaleX(2);
	}

	80%{
		opacity: 0.5;
		transform: scaleX(2.2);
	}

	100%{
		transform: scaleX(1);
		left: 0%;
		opacity: 0;
	}
}

.btn-darken{
	background-image: url('../images/button-darken.png');
}

.btn img{
	height: 4vh;
}

.play-button{
	/* margin-top: -6px; */
	/* left: 50%; */
	/* top: 40%; */
	/* position: absolute; */
	/* transform: translate(-50%, -50%); */
	/* margin: 0px; */
	padding: 1.5vh 1.5vh;
	float: right;
	margin-right: 1.5vw;
	transform: skew(-5deg);
	height: 7vh;
	line-height: 5vh;
	font-size: 3vh;
}

.btn:hover{

}

.btn[disabled], .btn[disabled]:hover{
    background: #808080 !important;
    color: #fff;
    text-shadow: 0px 1vw 1vw #909090;
    border-top: solid 0.1vw #adadad;
    border-bottom: solid 0.1vw #6f6f6f;
}

.btn-sm{
	width: 10vw;
	height: 3.1vw;
	padding: 0vw 1vw;
	font-size: 1.2vw;
}

.btn:active{

}

.pull-left{
	float: left;
}

.pull-right{
	float: right;
}

.loadout{
	margin-top: 1vh;
	margin-bottom: 1vh;
	height: 20.5vh;
}

.loadout li{
	list-style: none;
	float: left;
	width: calc(30% - 1vw - 6px);
	height: 9vw;
	margin-right: 1.7vw;
	cursor: pointer;
	position: relative;
	border-radius: 0.2vw;
	/* overflow: hidden; */
	border: solid 3px #00d0ff;
	box-shadow: 0px 2px 0px #4f4f4f, 0px -2px 0px #4f4f4f, 2px 0px 0px #4f4f4f, -2px 0px 0px #4f4f4f;
	letter-spacing: 1px;

	background-color: #21D4FD;
	background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}

.loadout li.disabled{
	opacity: 0.5;
}

.loadout li b{
	text-transform: uppercase;
}

.loadout li .loadout-image{
	width: 100%;
	height: 100%;
	position: absolute;
	background-position: center -3.7vw;
	background-size: 98% auto;
	background-repeat: no-repeat;
	overflow: hidden;
}

.play-button-big{
	width: 100%;
	/* height: 9vw; */
	/* float: right; */
	text-align: center;
	/* background: rgba(0, 0, 0, 0.8); */
	position: relative;
	/* border-radius: 0.5vw; */
	/* border: solid 0.2vw rgba(255, 255, 255, 0.04); */
	/* box-shadow: inset 0px 0.5vw 1vw rgba(0, 0, 0, 0.2); */
	/* position: relative; */
	transform: skew(5deg);
	padding-top: 2vh;
	height: 9.25vh;
}

.team-selection{
	width: 45%;
	height: 9vw;
	float: right;
}

.team-title-right{
	float: right;
	max-width: 40vw !important;
	text-align: center;
	width: 21.3vw;
	background-repeat: no-repeat;
	background-position: center center;
}

.loadout-title{
	height: 5vh;
	margin-top: 0vh;
}

.team-selection .team{
	width: 35%;
	height: 9vw;
	float: right;
	margin-left: 1.5vw;
	opacity: 0.2;
	position: relative;
}

.team-label{
	font-size: 1vw;
	color: #ddd;
	position: absolute;
	text-align: center;
	width: 100%;
	margin-top: 1.6vw;
}

.team-name{
	font-size: 2.3vw;
	color: #fff;
	text-shadow: 0px 0.3vw 0.8vw #000;
	position: absolute;
	width: 100%;
	height: 100%;
	/* height: 9vw; */
	line-height: 7.5vw;
	text-align: center;
}

.team-players{
	font-size: 1.1vw !important;
	color: #fff !important;
	text-align: center;
}

.team-selection .team:hover{
	opacity: 1;
}

.team-selection .team.team-active{
	opacity: 1;
}

.team-selection .team-red{
	background: red;
}

.team-selection .team-blue{
	background: blue;
}

.hero-selection{
	width: 24% !important;
	background-size: 100% auto;
	background-position: center -1.2vw;
	margin-right: 0px !important;
}

.item-container{
	width: 100%;
	height: 100%;
}

.loadout li:before{
	content: '';
	position: absolute;
	background:url('../images/left-side.png') no-repeat;
	width: 0.5vw;
	height: 4vw;
	background-size: 100% auto;
	margin-left: -0.7vw;
	margin-top: 2.5vw;
}

.loadout li:after{
	content: '';
	position: absolute;
	background:url('../images/right-side.png') no-repeat;
	width: 0.5vw;
	height: 4vw;
	background-size: 100% auto;
	right: 0;
	margin-right: -0.7vw;
	margin-top: 2.5vw;
}

.loadout li:last-child{
	margin-right: 0px;
}

.loadout li span{
	position: absolute;
	width: 100%;
	padding: 0.5vw;
	background: rgb(29, 42, 51);
	background-size: auto 100%;
	box-sizing: border-box;
	/* border-top: solid 3px #007eff; */
	bottom: 0;
	font-size: 0.9vw;
	color: #fff;
	height: 2vw;
	text-transform: uppercase;
	line-height: 1vw;
}

.actions-bar{
	width: 100%;
	background: rgba(0, 0, 0, 0.1);
	padding: 1vw;
	box-sizing: border-box;
	height: 5vw;
	border-radius: 0.2vw;
}

.actions-bar a{
	color: #fff;
	border: solid 0.2vw #454950;
	text-decoration: none;
	padding: 0.7vw 1.5vw;
	background: rgba(0, 161, 255, 0.19);
	float: left;
	margin-right: 1vw;
	font-size: 1.1vw;
	border-radius: 0.2vw;
}

.actions-bar a.disabled{
	opacity: 0.5;
}

.actions-bar a:hover{
	border: solid 0.2vw #ccc;
}

.actions-bar a img{
	height: 1.5vw;
	margin-right: 0.8vw;
	float: left;
	margin-top: -0.05vw;
	margin-left: -0.5vw;
}

.match-time{
	/* position: absolute; */
	/* padding-left: 1.2vw; */
	/* padding-right: 2vw; */
	/* border-right: solid 1px #424242; */
	/* height: 5vw; */
	text-align: center;
	/* left: 50%; */
	/* transform: translate(-50%, 0%); */
	/* bottom: 0.9vw; */
	/* text-shadow: 0px 0px 1px #000; */
	width: 20vw;
	font-weight: normal;
	color: #7b7b7b;
	font-size: 1.2vw;
	margin-top: 2.5vh;
	float: left;
}

.match-time b{
	color: #ddd;
}

.match-time span{
	font-size: 1.8vw;
	letter-spacing: 0px;
}

.match-link{
	float: left;
	padding-left: 1.2vw;
	padding-right: 2vw;
	/* height: 5vw; */
	text-align: left;
	width: 22vw;
}

.match-link b{
	font-size: 0.9vw;
	display: block;
	margin-top: 0.4vw;
	color: #7b7b7b;
}

.match-link button{
	height: 1.6vw;
	display: block;
	width: 6vw;
	float: right;
	border: none;
	background: #2c6177;
	color: #fff;
	margin-top: 0.35vw;
	font-size: 0.8vw;
	background: rgb(44,97,119);
	background: linear-gradient(0deg, rgba(44,97,119,1) 0%, rgba(44,92,119,1) 35%, rgba(44,111,119,1) 100%);
	border-top-right-radius: 0.3vw;
	border-bottom-right-radius: 0.3vw;
	outline: none;
	cursor: pointer;
}

.match-link span{
	background: rgba(33, 33, 33, 0.7);
	color: #44d2ec;
	padding: 0.4vw 0.4vw;
	font-size: 0.8vw;
	letter-spacing: 0px;
	display: block;
	margin-top: 0.3vw;
	font-family: monospace, sans-serif;
	width: 15vw;
	float: left;
}

.inspect{
	width: 1.5vw;
	height: 1.5vw;
	background: #43cbe5 url(../images/inspect.png) no-repeat center center;
	background-size: 60% auto;
	float: right;
	position: absolute;
	right: 0.5vw;
	margin-top: -0.2vw;
	border-radius: 50%;
	/* border-bottom: solid 2px #ce4921; */
	/* border-top: solid 2px #fed14a; */
	box-shadow: 0px 0px 10px #fff;
}

.map-thumbnail{
	background-size: 100% auto !important;
	background-position: center center !important;
}

.head-area{
	height: 33.5vh;
	display: block;
	margin-bottom: 0vh;
	width: 100%;
	overflow: hidden;
}

.col-md-6{
	width: calc(50% - 0.2vw);
	float: left;
	margin-right: 0.2vw;
}

.col-md-8{
	/* width: calc(65% - 2vw); */
	/* float: left; */
	/* margin-right: 0.2vw; */
	width: 80%;
}

.col-md-4{
	width: calc(30%);
	float: right;
}

.head-area .col-md-6{
	height: 15vw;
}

.head-area .col-md-6 .banner-area{
	/* margin-left: auto; */
	/* margin-right: auto; */
	/* float: right; */
	left: -0.8vw;
	top: 0px;
	transform-origin: left top;
}

.banner-300x250{
	width: 300px;
	height: 250px;
}

h5, .main-title{
	margin: 0px;
	padding: 0.5vw;
	margin-bottom: 1vw;
	font-size: 1.2vw;
	font-weight: normal;
	/* letter-spacing: -0.05vw; */
	/* color: #45d2ec; */
	text-shadow: 0px 0px 3px #000;
	/* border-bottom: dashed 1px #4a4a4a; */
	/* padding-bottom: 0.5vw; */
	/* background: url('../images/title-bg.png?v=1') no-repeat; */
	background-size: auto 100%;
	box-sizing: content-box;
	border-radius: 0.1vw;
	background-position: left center;
	color: #fff;
	font-size: 6vh;
	text-shadow: none;
	/* padding-left: 2vw; */
}

.news-block{
	
}

.news-items{
	list-style: none;
	padding: 0px;
	margin: 0px;
	padding-right: 1vw;
}

.news-items li{
	background: rgba(0, 0, 0, 0.05);
	padding: 0.1vw;
	padding-left: 0.5vw;
	margin-bottom: 0.2vw;
	border-top-right-radius: 0.5vw;
	border-bottom-right-radius: 0.5vw;
	font-size: 0.9vw;
	letter-spacing: 0px;
	text-shadow: 0px 0.1vw 0.2vw #000;
}

.social{
	position: absolute;
	right: 1vw;
	bottom: 1vw;
	z-index: 5;
}

.social a{
	width: 3vw;
	height: 3vw;
	background: #ccc;
	list-style: none;
	float: right;
	margin-left: 0.5vw;
	background-size: 70% auto !important;
}

.social a.twitter{
	background:#29adff url('../images/twitter.png') no-repeat center center;
}

.social a.reddit{
	background:#ff4500 url('../images/reddit.png') no-repeat center center;
}

.social a.discord{
	background:#7289da url('../images/discord.png') no-repeat center center;
}

.social a.download{
	background:#ccb726 url('../images/download-icon.png') no-repeat center center;
	background-size: 80% auto;
}

.social a.poki{
	background:#fff url('../images/poki.png') no-repeat center center;
}

.social a.fandom{
	background:#002b34 url('../images/fandom-icon.png') no-repeat center center;
}

.centerized-text{
	color: #fff;
	text-align: center;
	left: calc(50% - 200px);
	top: calc(50% - 25px);
	position: absolute;
	width: 400px;
	height: 50px;
	font-size: 50px;
	margin: 0px;
	padding: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0px 0px 50px #ffcc00;
	letter-spacing: 2px;
	/* border-radius: 0.2vw; */
}

.reddot-sight{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.2vw;
	height: 0.2vw;
	border-radius: 50%;
	background:red;
	opacity: 0.4;
	box-shadow: 0px 0px 0.2vw red;
}

.hitmarker{
	position: absolute;
	left: calc(50% - 1.5vw);
	top: calc(50% - 1.5vw);
	width: 3vw;
	height: 3vw;
	background: url('../images/hitmarker_white.png?v=1.1') no-repeat;
	background-size: 100% auto;
}

.hitmarker-red{
	background: url('../images/hitmarker_red.png') no-repeat;
	background-size: 100% auto;
}

.crosshair{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
}

.crosshair .element{
	border:solid 1px #000;
	position: absolute;
	background: #fff;
	display: block;
	border-radius: 10px;
	z-index: 2;
}

.up{
	width: 2px;
	height: 20px;
	top: -50%;
	left: -1px;
}

.down{
	width: 2px;
	height: 20px;
	bottom: 50%;
	left: -1px;
}

.left{
	width: 20px;
	height: 2px;
	top: 0px;
	left: -50%;
}

.right{
	width: 20px;
	height: 2px;
	top: 0px;
	right: 50%;
}

.center-dot{
	width: 3px;
	height: 3px;
	top: -2.5px;
	left: -2.5px;
	position: absolute;
	z-index: 1000;
}

.version{
	position: absolute;
	right: 0.5vw;
	bottom: 0.5vw;
	color: #fff;
	font-size: 2vw;
}

.reloading-display{
	position: absolute;
	left: calc(50% - 6vw);
	text-align: center;
	bottom: 5vw;
	height: 3vw;
	width: 12vw;
	color: #fff;
	background: rgb(0,181,255, 0.5);
	opacity: 0.8;
	margin-top: 2vw;
	box-sizing: border-box;
	overflow: hidden;
}

.slide-text{
	position: absolute;
	width: 100%;
	height: 3vw;
	text-align: center;
	padding: 0.5vw 0vw;
	font-size: 1.5vw;
	line-height: 2vw;
	text-shadow: 0px 0.1vw 0.2vw #000;
}

.slide-background{
	position: absolute;
	background: rgb(0,181,255);
	background: linear-gradient(360deg, rgba(0,181,255,1) 0%, rgba(132,213,255,1) 35%, rgba(0,164,255,1) 100%);
	width: 100%;
	left: 0px;
	height: 3vw;
	opacity: 0.8;
}

.recording-display{
	position: absolute;
	left: calc(50% - 6vw);
	text-align: center;
	bottom: 8vw;
	min-width: 12vw;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0.8;
	margin-top: 2vw;
	box-sizing: border-box;
	padding: 0.5vw 0.5vw;
	font-size: 1.5vw;
}

.notification-success{
	background: rgba(0, 200, 0, 0.8);
}

.reloading-display .right{
	float: right;
	color: yellow;
	margin-right: 0.5vw;
}

.announce{
	background: rgba(0, 0, 0, 0.4);
	text-align: center;
	position: absolute;
	width: 20vw;
	left: calc(50% - 10vw);
	top: 1vw;
	font-size: 1.2vw;
	color: #fff;
}

.announce h4{
	font-size: 3.5vw;
	margin: 0px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px #949494;
}

.announce h5{
	font-size: 4vw;
	margin: 0px;
	color: #9eeb56;
	text-shadow: 0px 1px 1px #949494;
}

.sniper-scope{
	-moz-transform: translate(-50%, -50%) scale(0.7) translate3d(0,0,0);
	-webkit-transform: translate(-50%, -50%) scale(0.7) translate3d(0,0,0);
	transform: translate(-50%, -50%) scale(0.7) translate3d(0,0,0);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50vw;
	height: 50vw;
	border: solid #000 60vw;
	outline: solid black 10px;
	opacity: 0;
	transition: 0.06s linear all;

}

.sniper-scope.active{
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.scope-screen{
	border-radius: 50%;
	box-shadow: inset 0px 0vw 10vw #000;
	width: 50vw;
	height: 50vw;
	background-size: 100% 100%;
	z-index: 1;
	position: absolute;
	border: solid black 30vw;
	margin-left: -30vw;
	margin-top: -30vw;
}

.scope-dot{
	width: 0.3vw;
	height: 0.3vw;
	background: red;
	box-shadow: 0px 0px 0.4vw red;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: solid 0.1vw #ff6767;
}

.scope-line-vertical{
	width: 0.1vw;
	height: calc(50% - 0.5vw);
	position: absolute;
	left: 50%;
	top: 0%;
	transform: translate(-50%, 0%);
	background: #000;
}

.scope-line-vertical:after{
	content: "";
	width: 0.1vw;
	height: 100%;
	position: absolute;
	left: 50%;
	bottom: calc(-100% - 1vw);
	background: #000;
}

.scope-line-horizontal{
	width: calc(50% - 0.5vw);
	height: 0.1vw;
	position: absolute;
	left: 0%;
	top: 50%;
	transform: translate(0%, -50%);
	background: #000;
}

.scope-line-horizontal:after{
	content: "";
	width: 100%;
	height: 0.1vw;
	position: absolute;
	top: 0%;
	right: calc(-100% - 1vw);
	background: #000;
}

.damage{
	width: 18vw;
	height: 18vw;
	position: absolute;
	opacity: 0.8;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	transform-origin: center center;
	opacity: 0;
	transition: 0.3s opacity;
}

.damage img{
	width: 100%;
	height: 100%;
	position: absolute;
}

.damage-active{
	opacity: 1;
}

.ricochet-trace{
	width: 18vw;
	height: 18vw;
	position: absolute;
	opacity: 0.8;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	transform-origin: center center;
	opacity: 0;
	transition: 0.3s opacity;
}

.ricochet-trace img{
	width: 100%;
	height: 100%;
	position: absolute;
}

.ricochet-active{
	opacity: 1;
}

.damage-border{
	box-shadow: inset 0px 0px 10vw red;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.3s opacity;
}

.death-overlay{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
}

.replay-ending{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #000;
	transition: opacity 1s ease-out;
	opacity: 0;
	z-index: 12;
}

.replay-ending.active{
	opacity: 1;
}

.replay-overlay{
	border-top:solid 0vw #000;
	border-bottom:solid 0vw #000;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	animation: 1s cinematic ease-out forwards;
}

@keyframes cinematic{
	0%{
		
	}

	100%{
		border-top:solid 7vw #000;
		border-bottom:solid 7vw #000;
	}
}

.replay-overlay h1, .death-overlay h1{
	position: absolute;
	right: 5vw;
	top: 0.5vw;
	font-size: 2vw;
	color: #fff;
	text-shadow: 0px 0.1vw 0.2vw #000;
}

.killedBy-hero{
	position: absolute;
	top: 1vw;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 12vw;
}

.replay-overlay h2, .death-overlay h2, .strikeHead h2, .spectating h2{
	font-family: 'CoolveticaRg';
	font-size: 2vw;
	color: #fff;
	position: absolute;
	left: 50%;
	top: 8.8vw;
	transform: translate(-50%, 0%);
	text-align: center;
	/* font-style: italic; */
	padding: 0.8vw 4vw;
	/* border-radius: 0.2vw; */
	line-height: 1.5vw;
	text-shadow: 0px 1px 2px #000;
	background: rgba(0, 0, 0, 0.7);
	transform: skew(-20deg, 0deg) translate(-50%, 0%);
	border-bottom: solid 0.4vw #008fff;
}

.spectating h2{
	font-size: 1.5vw;
	top: 5vw;
}

h2.blue{
	border-bottom: solid 0.4vw #008fff;
}

h2.red{
	border-bottom: solid 0.4vw #ff0000;
}

.strikeHead h2{
	top: 3vw;
	border-bottom: solid 0.4vw red;
}

.replay-overlay .replay-icon{
	width: 2vw;
	height: 2vw;
	border-radius: 50%;
	background:red;
	float: left;
	margin-right: 1vw;
	margin-top: 0.2vw;
}

.replay-overlay h2 span, .death-overlay h2 span{
	text-shadow: none;
	text-transform: uppercase;
	color: #ff3e3e;
	margin-left: 0.1vw;
}

.form-paragraph{
	padding: 0.05vh 1.5vw;
	background: rgba(0, 0, 0, 0.4);
	transform: skew(-5deg);
	margin-top: 1.5vh;
	margin-bottom: 1.5vh;
}

.form-field{
	padding: 0.8vw 1.5vw;
	height: 1.7vw;
	line-height: 1.7vw;
	background: rgba(0, 0, 0);
	margin-bottom: 0.6vw;
	text-transform: uppercase;
	/* transition: background 0.2s; */
	transform: skew(-5deg);
	padding-right: 0.1vw;
	border-right: solid 0.5vw #7289da;
}

.form-field label{
	font-size: 1vw;
}

.form-field-optional{
	background: rgba(0, 0, 0, 0.8);
	font-style: normal;
	font-size: 0.9vw;
	color: #ddd;
}

.form-field-lg{
	height: 2.4vw;
	line-height: 2.4vw;
}

.form-field .input{
	float: right;
	margin-right: 1.5vw;
}

.form-field .input .form-input{
	font-size: 1.2vw;
	border: none;
	width: 15vw;
	/* margin-right: 1vw; */
	/* border-radius: 0.1vw; */
	padding: 0.4vw 0.6vw;
	background: #f5f5f5;
	color: #000;
	outline: none;
	box-shadow: inset 0px 0.1vw 0.3vw #afafaf;
}

.form-field .input .form-input:focus{
	box-shadow: 0px 0vw 0.2vw #ffffff;
}

.form-footer{
	height: 3vw;
	/* margin-top: 3vh; */
	background: rgba(0, 0, 0, 0.1);
	padding: 1vw 1vw;
	transform: skew(-5deg);
}

.form-footer .btn{
	float: right;
}

.content-right-padding, .fixed-content-height{
	height: calc(80vh - 4vw) !important;
	overflow: hidden;
	overflow-y: auto;
}

.content-right-padding-full{
	height: calc(97vh - 4vw) !important;
}

.fixed-content-height{
	height: 72.5vh;
}

.main-title:first-child{
	margin-top: 0px;
}

.main-title{
	margin-top: 2vw
}

input[type="range"] {
    width: 100%;
    height: 1.5vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    -webkit-appearance: none; /*remove the line*/
    outline: none;
    /*background-color:cyan;*/
    border: 0; /*for firefox on android*/
    padding: 0 0.8vw; /*for IE*/
    background: transparent;
}

/*chrome and opera*/
input[type="range"]::-webkit-slider-runnable-track {
    background: #ccc; /*trackColor*/
    height: 0.2vw; /*trackHeight*/
    border-radius: 0.5vw; /*trackHeight*/
    transition: 0.3s;
}

input[type="range"]:hover::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #777; /*activeTrackColor*/
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #000 url('../images/slider-button.png') no-repeat center center; /*thumbColor*/
    background-size: 100% auto;
    transform: skew(5deg);
    width: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    height: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    border-radius: 50%;
    margin-top: -0.9vw; /* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
    cursor: pointer;
    border: none; /*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
}

/*firefox*/
input[type="range"]::-moz-focus-outer {
    border: 0;
}

input[type="range"]::-moz-range-track {
    background: #ccc; /*trackColor*/
    height: 4px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    /*background isn't animatable, so can't use transition*/
}

input[type="range"]:hover::-moz-range-track,
input[type="range"]:focus::-moz-range-track {
    background: #777; /*activeTrackColor*/
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    background: #000 url('../images/slider-button.png') no-repeat center center; /*thumbColor*/
    background-size: 100% auto;
    transform: skew(5deg);
    width: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    height: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    border-radius: 50%;
    margin-top: -0.9vw; /* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
    cursor: pointer;
    border: none; /*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
}

input[type="range"]::-moz-range-progress {
    background: red; /*thumbColor*/
    border-radius: 4px; /*trackHeight*/
    height: 4px; /*trackHeight*/
}

input[type="range"]:hover::-moz-range-progress,
input[type="range"]:focus::-moz-range-progress {
    background: darkOrange; /*activeThumbColor*/
}

/*edge and IE*/
input[type="range"]::-ms-track {
    background: #ccc; /*trackColor*/
    height: 4px; /*trackHeight*/
    border-radius: 4px; /*trackHeight*/
    border: none;
    color: transparent;
}

input[type="range"]:hover::-ms-track,
input[type="range"]:focus::-ms-track {
    background: #777; /*activeTrackColor*/
}

input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    background: #000 url('../images/slider-button.png') no-repeat center center; /*thumbColor*/
    background-size: 100% auto;
    transform: skew(5deg);
    width: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    height: 2vw; /* thumbHeight + (2 x thumbBorderWidth)*/
    border-radius: 50%;
    margin-top: -0.9vw; /* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
    cursor: pointer;
    border: none; /*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
}

input[type="range"]::-ms-tooltip {
    display: none; /*tooltip makes thumb sliding lagy*/
}

input[type="range"]::-ms-fill-lower {
    background: red; /*thumbColor*/
    border-radius: 4px; /*trackHeight*/
}

input[type="range"]:hover::-ms-fill-lower,
input[type="range"]:focus::-ms-fill-lower {
    background: darkOrange; /*activeThumbColor*/
}

.tgl {
  display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
  box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
  background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
  background: none;
}
.tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 5vw;
  height: 1.8vw;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* margin-right: 1.2vw; */
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}
.tgl + .tgl-btn:after {
  left: 0;
}
.tgl + .tgl-btn:before {
  display: none;
}
.tgl:checked + .tgl-btn:after {
  left: 50%;
}

.tgl-skewed + .tgl-btn {
  overflow: hidden;
  -webkit-transform: skew(0deg);
  transform: skew(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all .2s ease;
  font-family: sans-serif;
  background: #888;
}
.tgl-skewed + .tgl-btn:after, .tgl-skewed + .tgl-btn:before {
  -webkit-transform: skew(-5deg);
  transform: skew(-5deg);
  display: inline-block;
  transition: all .2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2vw;
  font-weight: bold;
  color: #000;
  /* text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); */
  font-size: 1vw;
}
.tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}
.tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}
.tgl-skewed + .tgl-btn:active {
  background: #888;
}
.tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}
.tgl-skewed:checked + .tgl-btn {
  background: #75e9df;
}
.tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}
.tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}
.tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}

.form-field .input .value{
	float: left;
	height: 1.8vw;
	width: 3vw;
	text-align: center;
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.9vw;
	line-height: 0.8vw;
	padding: 0.5vw;
	box-sizing: border-box;
}

.form-field .input input[type="range"]{
	float: left;
	width: 10vw;
	margin-top: 0.25vw;
}

.tips-items{
	text-shadow: 0px 0px 3px #000;
	background: url('../images/title-bg.png?v=1');
	background-size: auto 100%;
	padding: 0.5vw;
	margin-top: 1.5vw;
	height: 1vw;
	font-size: 0.8vw;
	background-repeat: no-repeat;
}

.tips-items img{
	float: left;
	margin-right: 0.5vw;
	height: 1.1vw;
}

.keyboard-key{
	background: #fff;
	padding: 0.2vw;
	border:solid 1px #000;
	color: #000;
	font-size: 1.1vw;
	text-shadow: none;
	min-width: 0.9vw;
	height: 1.1vw;
	line-height: 1.2vw;
	display: inline-block;
	text-align: center;
	box-shadow: inset 0px -0.1vw 0.2vw #666;
}

.sub-content{
	width: 40vw;
	height: 100vh;
	background: #272d2f;
	box-shadow: 1vw 0px 3vw #000;
	position: absolute;
	z-index: 10;
	top: 0px;
	left: 0px;
	padding: 2vw;
	box-sizing: content-box;
}

.sub-content h4{
	background: url('../images/title-bg.png?v=1') no-repeat;
	background-size: auto 100%;
	font-size: 1.2vw;
	font-weight: normal;
	letter-spacing: 0px;
	color: #45d2ec;
	margin: 0px;
	padding: 0px;
	text-shadow: 0px 0px 3px #000;
}

.sub-close{
	float: right;
	opacity: 0.7;
	cursor: pointer;
}

.sub-close:hover{
	opacity: 1;
}

.sub-close img{
	width: 2vw;
	height: 2vw;
}

.item-name{
	background: #000;
	font-size: 2vw;
	color: #fff;
	transform: skewX(-5deg);
	padding: 1vw 2vw;
	position: absolute;
	right: -2vw;
	width: 25vw;
	bottom: 25vh;
	padding-right: 3vw;
	text-transform: uppercase;
	line-height: 3.1vw;
	z-index: 10;
}

.item-details{
	transform: skewX(-5deg);
	position: absolute;
	right: -1vw;
	width: 20vw;
	bottom: 43vh;
	text-transform: uppercase;
	z-index: 10;
}

.text-detail{
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	list-style: none;
	padding: 0vw 1.5vw;
	margin-bottom: 0.5vw;
	font-size: 0.9vw;
	overflow-y: scroll;
	text-transform: none;
	height: 14vw;
	margin-left: -5vw;
	width: 20vw;
	font-style: normal;
	transform: skew(5deg);
}

.item-details li{
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	list-style: none;
	padding: 0.5vw 1vw;
	margin-bottom: 0.5vw;
	font-size: 0.9vw;
	font-style: normal;
}

.item-details li.bigger-item-detail{
	font-size: 1.2vw;
}

.item-details li b{
	display: inline-block;
	width: 10vw;
	color: #ccc;
}

.item-colors{
	position: absolute;
	left: 1vw;
	top: 50%;
	transform: translate(0%, -50%);
	width: 5vw;
	margin-top: -5vw;
}

.item-colors li{
	list-style: none;
	border-radius: 0.2vw;
	width: 3vw;
	height: 3vw;
	display: block;
	margin-bottom: 1vw;
	border:solid 0.2vw rgba(255, 255, 255, 0.2);
}

.item-colors h5{
	color: #fff;
	transform: rotate(-90deg);
	margin-left: -1.7vw;
	margin-bottom: 3vw;
	text-shadow: none;
}

.items{
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
}

.item-bar{
	width: 100%;
	height: 20vh;
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding-left: 14vw;
	z-index: 10;
}

.items li{
	float: left;
	width: 10vw;
	height: 19.1vh;
	margin-right: 0vw;
	background:rgba(0, 0, 0, 0.6);
	transform: skewX(-5deg);
	border: solid #666 0.3vw;
	border-right: none;
	/* overflow: hidden; */
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
}

.items li .skin-set{
	position: absolute;
	width: 10.6vw;
	height: 3vw;
	background: #fff;
	padding: 0.4vw 0vw;
	margin-left: -0.3vw;
	box-sizing: border-box;
	opacity: 0;
	margin-top: 0vw;
	transition: margin-top 0.1s ease-in, opacity 0.1s ease-in;
}

.items li.active .skin-set{
	opacity: 1;
	margin-top: -3vw;
}

.items li .skin-set span{
	display: block;
	float: left;
	width: 2vw;
	height: 2vw;
	border: solid 0.1vw #dedede;
	margin-right: 0.65vw;
	margin-left: 0.65vw;
	border-radius: 0.5vw;
	background-color: #f5f5f5;
	background-size: 300% auto;
	background-position: center center;
	border-bottom-right-radius: 0px;
	/* border-bottom-left-radius: 0; */
}

.items li .skin-set span:hover{
	border: solid 0.1vw #ccc;
}

.items li .skin-set span.active{
	border: solid 0.1vw #ac40ff;
}

.items li:hover{
	background:#505669;
}

.items li:last-child{
	border-right: solid #666 0.3vw;
}

.items li.item .item-title{
	position: absolute;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
	/* padding-top: 0.1vh; */
	/* padding-bottom: 1vw; */
	font-size: 1.8vh;
	height: 3vh;
	line-height: 3vh;
}

.items li.active{
	border: solid #fff 0.3vw;
	opacity: 1;
	background-color: #21D4FD;
	background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
	height: 17.5vh;
	transform: scale(1.15) skewX(-5deg);
	position: relative;
	z-index: 10;
}

.items li .item-image{
	width: 100%;
	height: 14.4vh;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	/* border-top-right-radius: 9vw; */
	/* overflow: hidden; */
}

.items li:hover .item-image{
	background-size: 100% auto;
}

.items li:hover{
	opacity: 1;
}

.item-inspect{
	width: 56vw;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8) url('../images/light.png') no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
}

.item-thumbnail{
	width: 100%;
	height: 100%;
	background-position: center center;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 80% auto;
}

.tab{
	list-style: none;
	padding: 0px;
	margin: 0px;
	height: 4vw;
	margin-top: 1vh;
}

.tab li{
	float: left;
	font-size: 1.8vw;
	list-style: none;
	padding: 0.5vw 1.8vw;
	color: #c1c1c1;
	padding-bottom: 0.7vw;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	position: relative;
	/* margin-top: 1vh; */
	/* border-right: solid 0.3vw #3c3c3c; */
	margin-right: 0.3vw;
}

.tab li.active{
	background: rgba(179, 179, 179, 0.5);
	/* border-bottom: solid 0.3vw #272c2f; */
	color: #ffffff;
}

.leaderboard-table{
	width: 100%;
	background: #2f2f2f;
	color: #fff;
	font-size: 1vw;
	border:none;
}

.leaderboard-table tr, .leaderboard-table td, .leaderboard-table th{
	border:none;
}

.leaderboard-table tr{
	background: rgba(0, 0, 0, 0.3);
}

.leaderboard-table tr:nth-child(even){
	background: rgba(0, 0, 0, 0.1);
}

.empty-stat{
	height: 1.5vw;
	background: rgba(0, 0, 0, 0.3) !important;
}

tr.me{
	color: rgb(255, 216, 0) !important;
	text-shadow: none !important;
}

.leaderboard-table tr:first-child{
	background: rgba(0, 0, 0, 0.2);
	text-align: left;
	font-size: 0.9vw;
}

.stats-table tr:first-child{
	background: #6f6f6f;
}

.leaderboard-table td, .leaderboard-table th{
	padding: 0.4vw 0.5vw;
	font-size: 1.4vw;
	text-shadow: 0px 1px 1px #000;
}

.leaderboard-table a{
	color: #51c5e8;
	text-decoration: none;
	margin-left: 0.5vw;
}

.profile-image{
	width: 1.3vw;
	min-height: 1.3vw;
	background: #ccc;
	float: left;
	margin-right: 1vw;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}

.game-board{
	width: 50vw;
	min-height: 30vh;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	box-shadow: 0px 0.2vw 3vw #cacaca;
	background: rgb(4, 32, 37, 0.9);
	padding: 0.4vw;
	/* border-radius: 0.2vw; */
	/* border: solid 0.2vw #0b323a; */
}

.game-board .leaderboard-table{
	background: rgba(0, 0, 0, 0.7);
	/* font-size: 0.1vw !important; */
}

.game-board .leaderboard-table tr{
	background: rgba(154, 154, 154, 0.5);
}

.game-board .leaderboard-table tr:nth-child(even){
	background: rgba(140, 140, 140, 0.4);
}

.game-board .leaderboard-table td, .game-board .leaderboard-table th{
	font-size: 1vw;
}

.game-board .leaderboard-table tr:first-child{
	background: rgba(0, 0, 0, 0.2);
	text-align: left;
	font-size: 0.9vw;
}

.team-top{
	height: auto;
	width: 100%;
	padding: 0.2vw 0.5vw;
	box-sizing: border-box;
}

.team-top h3{
	margin: 0px;
	padding: 0px;
	color: #fff;
	font-size: 1.2vw;
	text-transform: uppercase;
	letter-spacing: 0.08vw;
	text-shadow: 0px 1px 1px #000;
}

.team-top h3 span{
	/* font-size: 1vw; */
	color: #fff;
	opacity: 0.4;
	letter-spacing: 0px;
}

.team-top h3 .team-score{
	font-size: 1.5vw;
	opacity: 1;
	margin-top: -0.2vw;
	float: right;
	letter-spacing: initial;
	background: rgba(0, 0, 0, 0.5);
	padding: 0.5vw;
	height: 0.9vw;
	line-height: 0.9vw;
	width: 3vw;
	text-align: center;
	box-shadow: inset 0px 0.1vw 0.5vw #000;
}

.team-top-red{
	background: rgb(130,0,0) !important;
	background: linear-gradient(360deg, rgba(130,0,0,1) 0%, rgba(121,9,9,1) 35%, rgba(255,0,0,1) 100%) !important;
}

.team-top-blue{
	background: rgb(0,69,130) !important;
	background: linear-gradient(360deg, rgba(0,69,130,1) 0%, rgba(9,71,121,1) 35%, rgba(0,151,255,1) 100%) !important;
}

.team-separator{
	height: 5vh;
}

.text-right{
	text-align: right;
}

.text-center{
	text-align: center;
}

.coin{
	color: #a2d3ff;
	text-shadow: 0px 1px 1px #000, 0px 0px 10px #a2d3ff;
	/* text-align: right; */
}

.banner-horizontal{
	width: 100%;
	height: 6vw;
	position: relative;
	/* overflow: hidden; */
	margin-top: 0.8vh;
}

.banner-horizontal .sponsored-text{
	color: #fff;
	font-size: 0.5vw;
	transform: rotate(-90deg) translate(-50%, 0%);
	position: absolute;
	text-align: center;
	width: 5vw;
	text-transform: uppercase;
	margin-left: -2vw;
}

.banner-square{
	width: 18vw;
	height: 15vw;
	position: relative;
	/* overflow: hidden; */
	right: 0;
	float: right;
}

.respawning-bar{
	background: rgba(0, 0, 0, 0.5);
	width: 21vw;
	bottom: 2vw;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	text-align: center;
	padding: 0.5vw 1vw;
	color: #fff;
	font-size: 1.2vw;
	letter-spacing: -0.05vw;
}

.btn-equip{
	position: absolute;
	bottom: 2vw;
	left: 50%;
	transform: translate(-50%, 0%);
}

.floating-logo{
	position: absolute;
	left: 2vw;
	top: 2vh;
	z-index: 11;
}

.floating-close{
	position: absolute;
	right: 1vw;
	top: 0.6vw;
	margin: 0px;
	z-index: 11;
}

.floating-close img{
	width: 3vw;
	height: 3vw;
}

.team-padding{
	padding: 0.5vw;
}

.session-finished{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 20vw;
	font-size: 1vw;
}

.select-button{
	position: absolute;
	/* width: 5vw; */
	height: 2vw;
	color: #fff;
	background: #0065dc;
	padding: 0.2vw 1vw;
	font-size: 0.9vw;
	cursor: pointer;
	right: 0px;
	margin-top: -0.5vw;
	/* color: #000; */
	text-transform: uppercase;
	font-family: CoolveticaRg, sans-serif;
	letter-spacing: -0vw;
	border: none;
	background-size: auto 100%;
	/* box-shadow: inset 0px 0.1vw 0.2vw #c0ceff; */
	/* text-shadow: 0px 0.2px 0.1vw #000; */
	/* border-left: solid 3px #007eff; */
	padding-left: 1.3vw;
}

.select-button .inner-triangle{
	background: #1d2933;
	width: 1vw;
	height: 1vw;
	position: absolute;
	left: -0.5vw;
	top: 0.5vw;
	transform: rotate(45deg);
}

.select-button img{
	float: left;
	margin-right: 0.2vw;
	height: 1vw;
	margin-top: 0.1vw;
}

.spectator-waiting{
	width: 45vw;
	height: 100%;
	color: #fff;
	text-align: center;
	position: absolute;
	right: 0px;
	top: 0px;
}

.shop-banner{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background: #333;
}

.spectator-waiting .banner{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: auto;
	height: 100%;
}

.spectator-waiting span.loading-message{
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 2vw;
	transform: translate(-50%, -50%);
	z-index: 2;
	padding: 0.5vw 2vw;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 0.2vw;
	text-transform: uppercase;
	font-size: 1.1vw;
}

.spectator-waiting span.loading-message img{
	height: 1.5vw;
	float: left;
	margin-right: 0.5vw;
	margin-top: -0.05vw;
}

.action-bar-information{
	float: right;
	width: 25vw;
}

.players-count{
	float: left;
	width: 6vw;
	text-align: center;
	border-right: solid 1px #333;
}

.players-count:last-child{
	border-right: none;
}

.players-count b{
	display: block;
	color: #ddd;
	font-size: 0.5vw;
	margin-bottom: 0.5vw;
	margin-top: 0.2vw;
	text-transform: uppercase;
}

.players-count span{
	font-size: 1.2vw;
	color: #fff;
	display: block;
}

.signal-bar{
	width: 1.5vw;
	height: 1.5vw;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0%);
}

.signal-bar li{
	background: green;
	width: 0.3vw;
	float: left;
	/* margin-right: 0vw; */
	list-style: none;
	bottom: 0;
	position: absolute;
}

.signal-bar li:nth-child(1){
	height: 0.5vw;
	left: 0.05vw;
}

.signal-bar li:nth-child(2){
	height: 1vw;
	left: 0.5vw;
}

.signal-bar li:nth-child(3){
	height: 1.5vw;
	left: 1vw;
}

.signal-bar-mini{
	/* transform: translate(0%, 0%) !important; */
	/* left: 0%; */
	/* top: 0px; */
	transform: none;
	height: 1.5vw;
	position: relative;
	left: 0px;
	display: block;
	float: left;
}

.banner-death{
	position: fixed;
	left: 50%;
	bottom: 0%;
	transform: translate(-50%, 0%);
}

.alert{
	color: #fff;
	font-size: 1vw;
	padding: 0.5vw;
	margin-bottom: 0.5vw;
}

.alert-danger{
	background: red;
}

.alert-info{
	background: green;
}

.signal-bar.low .medium, .signal-bar.low .high{
	background: rgba(255, 255, 255, 0.2);
}

.signal-bar.low .low{
	background: #ff7e00;
}

.signal-bar.medium .high{
	background: rgba(255, 255, 255, 0.2);
}

.signal-bar.medium .low, .signal-bar.medium .medium{
	background: #ff7e00;
}

.full-screen{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	left: 0px;
	top: 0px;
	position: absolute;
	z-index: 10;
}

.item-overlay{
	height: 80vh;
}

.lock{

}

.lock .centerized-icon{
	left: 50%;
	top: 50%;
	width: 5vw;
	height: 10vw;
	position: absolute;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #ddd;
}

.lock .centerized-icon img{
	width: 100%;
	height: auto;
	margin-bottom: 1vw;
}

.centerized-loading{
	background: rgba(255, 255, 255, 0.5);
	padding: 2vw 3vw;
	text-align: center;
}

.centerized-loading img{
	height: 2.5vw;
}

.transection-background{
	z-index: 14;
}

.transection-popup{
	background: #fff;
	box-shadow: 0vw 0.2vw 3vw #000;
	/* border-radius: 0.3vw; */
	width: 30vw;
	z-index: 15;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	padding-bottom: 1vw;
}

.transection-popup h4{
	background: #0079c5;
	padding: 0.5vw 2vw;
	color: #fff;
	font-size: 1.5vw;
	text-align: center;
	margin: 0px;
	text-transform: uppercase;
}

.transection-popup .item-display{
	height: 8vw;
	width: 100%;
	overflow: hidden;
}

.transection-popup .item-display img{
	/* float: left; */
	width: 100%;
	/* margin-left: 1vw; */
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	position: relative;
}

.transection-popup .item-display .transection-details{
	float: left;
	width: 60%;
	margin-left: 1vw;
}

.transection-popup .item-display .transection-details p{
	font-style: normal;
	font-size: 1vw;
	font-weight: normal;
	padding-right: 2vw;
}

.currencies .currency-display{
	border: solid 1px #f3f3f3;
	padding: 1vw 2vw;
	color: #666;
	height: 1.5vw;
	box-shadow: inset 0px 0.2vw 0.5vw #efefef;
}

.currencies .currency-display .currency-unlock-btn{
	color: #fff;
	background: #618a18;
	padding: 0.5vw 1vw;
	font-size: 1.2vw;
	cursor: pointer;
	right: 0px;
	margin-top: -0.5vw;
	margin-right: -0.8vw;
	/* color: #000; */
	float: right;
	font-family: CoolveticaRg, sans-serif;
	border: none;
	background-size: auto 100%;
	/* text-shadow: 0px 0.2px 0.1vw #000; */
	border-radius: 0.1vw;
	border-bottom: solid 0.2vw #48690d;
	height: 2.5vw;
}

.currencies .currency-display .currency-unlock-btn[disabled]{
	background: #666;
	border-bottom-color: #333;
	opacity: 0.6;
}

.currencies .currency-display:last-child{
	border-top: none;
}

.currency-amount{
	font-size: 1.5vw;
	color: #517118;
	font-style: normal;
	margin: 0px;
	padding: 0px;
	height: 1.5vw;
	float: left;
	line-height: 1.5vw;
	background: #f5f5f5;
	padding: 0.5vw 1vw;
	border-radius: 0.1vw;
	margin-top: -0.5vw;
	width: 6vw;
	text-align: center;
	margin-left: -0.5vw;
	border-bottom: solid 0.1vw #e0e0e0;
}

.currency-amount small{
	margin-left: 0.2vw;
	font-size: 1vw;
	color: #263808;
	/* float: right; */
}

.balance{
	background: #525252;
	font-style: normal;
	color: #fff;
	font-size: 0.9vw;
	height: 2.1vw;
	border: solid 1px #373737;
	border-radius: 0.3vw;
	overflow: hidden;
	text-shadow: 0px 0.04vw 0.02vw #000;
}

.balance span{
	padding: 0.5vw 0.8vw;
	display: block;
	width: 50%;
	box-sizing: content-box;
	float: left;
}

.balance b{
	background: #606060;
	float: right;
	padding: 0.5vw 0.8vw;
	width: 30%;
	box-sizing: content-box;
}

.or-seperator{
	text-transform: uppercase;
	text-align: center;
	padding: 0.5vw 1vw;
	color: #d0d0d0;
	font-style: normal;
	font-size: 0.8vw;
}

.header-tab{
	float: right;
	margin-top: 0.8vh;
}

.header-tab a{
	float: left;
	text-decoration: none;
	font-size: 1.2vw;
	color: #666;
	margin-left: 1.5vw;
}

.header-tab a .caret{
	float: left;
	width: 0.5vw;
	margin-right: 0.6vw;
	margin-top: 0.35vw;
	display: none;
}

.header-tab a.active{
	color: #fff;
}

.header-tab a.active .caret{
	display: block;
}

.profile-header{
	height: 10.5vw;
	margin-top: 1vw;
	background: rgba(0, 0, 0, 0.7);
	padding: 1vw;
}

.profile-picture{
	/* border-radius: 0.2vw; */
	/* border: solid 0.2vw #000; */
	background: #666;
	width: 10.4vw;
	height: 10.4vw;
	position: relative;
	margin-right: 1vw;
	float: left;
}

.profile-picture-inner{
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.profile-picture-change{
	background: rgba(0, 0, 0, 0.4);
	text-align: center;
	padding: 0.5vw 0.5vw;
	color: #fff;
	font-size: 0.7vw;
	bottom: 0;
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	text-shadow: 0px 0.1vw 0.2vw #000;
	cursor: pointer;
}

.profile-details{
	float: left;
	width: 20vw;
}

.enough-cc{
	margin-bottom: 1vw;
}

.last-match-details{
	float: right;
	width: 17vw;
	border-left: solid 0.1vw #1f1f1f;
	padding-left: 1vw;
	font-size: 1vw;
}

.last-match-details h3{
	font-size: 1.1vw;
	margin: 0px;
	padding: 0px;
	margin-bottom: 0.5vw;
}

.last-match-details table{
	margin: 0px;
	margin-left: -0.2vw;
}

.verified_tick{
	float: left;
	margin-right: 0.7vw;
	height: 1.5vw;
	margin-top: 0.25vw;
}

.leaderboard-table .verified_tick{
	height: 1vw;
	width: 1vw;
	margin-top: 0.2vw;
}

.badges{
	border-top: solid 0.1vw #1f1f1f;
	padding-top: 1vw;
	height: 3vw;
	margin-left: 0.5vw;
	width: 10vw;
	float: left;
}

.badges-title{
	display: block;
	height: 1.5vw;
	font-size: 0.6vw;
	color: #fff;
	text-transform: uppercase;
}

.badge-icon{
	float: left;
	margin-right: 0.5vw;
	width: 2vw;
	height: 2vw;
	list-style: none;
	background-position: center center;
	background-size: 100% auto;
}

.badge-icon.beta_tester{
	background-image: url('../images/badges/beta_tester.png');
}

.badge-icon.developer{
	background-image: url('../images/badges/developer.png');
}

.badge-icon.podbot{
	background-image: url('../images/badges/podbot.png');
}

.coin-title{
	display: block;
	height: 1.5vw;
	font-size: 0.6vw;
	color: #fff;
	text-transform: uppercase;
}

.gold-area{
	border-top: solid 0.1vw #1f1f1f;
	padding-top: 1vw;
	height: 3vw;
	margin-left: 0.5vw;
	width: 8vw;
	float: right;
	text-align: right;
	padding-right: 0.5vw;
}

.coin-display{
	font-size: 1.5vw;
}

.notification-area{
	position: absolute;
	right: 1vw;
	top: 1vw;
	z-index: 10;
}

.events{
	margin-bottom: 1vw;
}

.events li{
	list-style: none;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 0.5vw 1vw;
	font-size: 0.9vw;
	margin-bottom: 0.5vw;
}

.green{
	color: lime;
}

.red{
	color: #ff0000;
}

.blue{
	color: #5f5fd6;
}

.earn-cc{
	z-index: 15;
	text-align: center;
	background: rgba(0, 0, 0, 0.4);
	padding: 1vw 2vw;
	border-radius: 0.2vw;
	width: auto;
	/* padding-bottom: 1vw; */
	margin-bottom: 1vw;
	position: relative;
}

.earn-cc p{
	color: #fff;
}

.earn-cc-confetti{
	background: rgba(0, 0, 0, 0.1) url('../images/confetti.gif');
}

.earn-cc small{
	display: block;
	color: #666;
	text-align: center;
	margin-top: 0.8vw;
	font-size: 0.7vw;
}

.earn-cc h5{
	margin: 0px;
	margin-bottom: 0.5vw;
	background-position: center center;
	margin-top: -0.5vw;
}

.earn-cc h5 b{
	color: #fff;
	font-size: 1.5vw;
}

.earn-cc .btn{
	position: relative;
	z-index: 10;
}

.earn-cc .btn{
	margin-left: auto;
	margin-right: auto;
}

.tab li.small-btn{
	font-size: 1vw;
	background: transparent;
	border: none;
	float: right;
	margin-top: 0.3vw;
	border-left: solid 1px #444;
}

.level-head{
	height: 7vw;
	width: 31vw;
}

.level-bar{
	width: 100%;
	height: 1.5vw;
	background: #636363;
	overflow: hidden;
	font-size: 1.2vw;
}

.level-bar .level-fill{
	background: blue;
	height: 1.5vw;
	line-height: 1.5vw;
}

.level-bar .level-fill span{
	color: #fff;
	text-align: right;
	float: right;
	padding-right: 1vw;
	text-shadow: 0px 0.05vw 0.1vw #000;
}

.transection-popup .floating-close img{
    width: 1.3vw;
    height: 1.3vw;
    margin-top: 0vw;
    /* float: right; */
}

.item-unlocked{
	position: absolute;
	top: 3vw;
	left: 50%;
	transform: translate(-50%, 0%);
}

.item-unlocked h4{
	font-family: 'CoolveticaRg';
	font-size: 2vw;
	color: #fff;
	/* position: absolute; */
	/* left: 50%; */
	/* top: 8.8vw; */
	/* transform: translate(-50%, 0%); */
	text-align: center;
	font-style: normal;
	padding: 0.8vw 4vw;
	/* border-radius: 0.2vw; */
	line-height: 1.5vw;
	text-shadow: 0px 1px 2px #000;
	background: rgba(0, 0, 0, 0.7);
	transform: skew(-20deg, 0deg);
	border-bottom: solid 0.4vw #e4ff00;
	margin: 0px;
}

.streak-message{
	background: rgba(0, 0, 0, 0.1);
	background-size: auto 100%;
	text-align: center;
	width: 100%;
	height: 7vw;
	left: 0px;
	top: 0vw;
	position: absolute;
  	z-index: 5;
}

.streak-message .streak-text{
	color: #fff;
	text-shadow: 0px 0.1vw 0.3vw #004498;
	font-size: 3vw;
  	text-transform: uppercase;
  	line-height: 7vw;
}

.streak-message .streak-score{
	position: absolute;
	background: rgba(0, 0, 0, 0.3);
	left: 50%;
	top: 7vw;
	transform: translate(-50%, 0%);
	padding: 1vw 2vw;
	font-size: 2vw;
	color: #fff;
}

.streak-black{
	background: url('../textures/black_beam.png') repeat-x !important;
	background-size: auto 100% !important;
}

.streak-green{
	background: url('../textures/green_beam.png') repeat-x !important;
	background-size: auto 100% !important;
}

.streak-center{
	top: 50%;
	transform: translate(0%, -50%);
}

.streak-message span{
	color: red;
}

@keyframes beam-animation {
	0% {
		background-position: 0px 0px;
	}

	80% {
		opacity: 1;
	}

	100% {
		background-position: 1944px 0px;
		opacity: 0;
		font-size: 4vw;
	}
}

.skull-death{
	width: 4vw;
	height: 4vw;
	background: url('../images/skull-death.png?v=1.0') no-repeat center center;
	background-size: 100% auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;

	animation-name: skull-death;
  	animation-duration: 0.8s;
  	animation-timing-function: linear;
  	opacity: 0;
  	z-index: 50;

  	z-index: 1000;
}

@keyframes skull-death {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.5);
	}

	50% {
		transform: translate(-50%, -50%) scale(1);
	}

	80% {
		opacity: 0;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.5);
	}
}

#preroll{

}

/*
	zonf.css
*/






.game-board .leaderboard-table tr, .game-board .leaderboard-table {
	background: transparent;
}
.game-board .leaderboard-table tr:first-child {
	font-size: 0.75vw;
}

.game-board > .team-seperator {
	float: left; width: 100%;
}

.team-top-red {/* background: rgb(255,0,0,0.2) !important; */}
.team-top-blue {/* background: rgba(0,90,250,0.2) !important; */}
.self-top-stats {background: rgba(92,97,103,0.2) !important;}

.board-tabs {
	position: relative;
	background-color: #000;
	display: table;
	width: 100%;
	text-align: center;
	z-index: 3;
}

.board-tabs ul {
	padding: 0;
	display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 50vw;
  margin: 0 auto;
}

.board-tabs li {
	cursor: pointer;
  list-style: none;
  float: left;
  color: #ffee10;
  font-size: 18px;
  line-height: 38px;
  padding: 0.52vw;
  background-color: transparent;
  border-radius: 0.21vw;
  transform: translate3d(0);
  transition: transform .2s ease-out, box-shadow 1s ease-in-out;
  position: relative;
  margin-left: -1px;
  flex: 1;
  white-space: nowrap;
  letter-spacing: 3px;

}

.board-tabs li.major {
	font-size: 24px;
	letter-spacing: 1px
}

.board-tabs li:before, .board-tabs li:after {
	position: absolute; top: 0; left: 0; 
	width: 0%; 
	border-bottom: 2px solid #ffee10;
	transition: width .4s ease-out;
	content: "";

}

.board-tabs li:after {
	top: auto;
	bottom: 0; 
}

.board-tabs li:hover::after {
	width: 100%;    
}

.board-tabs li.active:after {
	width: 100%; 
}



.board-tabs li.active:hover::before {
	width: 100%;
}

.board-tabs li img {
	width: 7.81vw;
}

.game-board-tab {
	width: 100%;
	float: left;
}

.stat-board {
	float: left;
	width: 100%;
}

.tab-item {
	width: 100%;
	float: left;
	padding: 0.5vw;
	position: relative;
}

.tab-item.active {
	display: block;
	z-index: 5;
}

.tab-item li {
	font-size: 0.83vw;
	color: #ffee10;
	float: left;
	list-style: none;
	margin-right: 1.04vw;
}

.tab-item h5 {
	padding: 0;
	margin: 0 0 0.6vw 0;
	width: 100%;
}

.team-padding {
	/* float: left; */
	width: 100%;
	box-sizing: border-box;
}


/*Scoreboard animation sequance*/
.tab-item {
	box-sizing: border-box;
}

.tab-item li {
	transform: translateX(-10%);
	opacity: 0;
}

.tab-item h5 {
	transform: translateX(-10%);
	opacity: 0;
}

.score-board-item, .stat-board-item {
	/* transform: translateY(-20px); */
	/* opacity: 0; */
	/* position: absolute; */
}

.game-board .leaderboard-table tr:nth-child(even) {
	background-color: rgba(140, 140, 140, 0.4);
}

.game-board .leaderboard-table tr:nth-child(odd) {
	background-color: rgba(140, 140, 140, 0.2);
}

.stat-board-item > table > tr:nth-child(odd), .stat-board-item > table > tbody > tr:nth-child(odd) {
	background-color: rgba(92,97,103,0.2) !important;
}

.stat-board-item > table > tr:nth-child(odd) > td:nth-child(odd), .stat-board-item > table > tbody > tr:nth-child(odd) > td:nth-child(odd) {
	padding-right: 0 !important;
}

.stat-board-item > table > tr:nth-child(odd) > td:nth-child(even), .stat-board-item > table > tbody > tr:nth-child(odd) > td:nth-child(even) {
	
}

.GB-end-of-match {
	top: 12.4vh;
	height: 84vh;
	transform: translateY(0) translateX(-50%);
}


.board-tabs li span:hover {
	border-bottom: 1px solid #ffee10;
}

.progress h5 {

}

.progress-bar {
	border: 1px solid #515151;
	float: left;
	width: 100%; 
	background-color: #515151;
	opacity: 0;
}

.progress-bar div {
	position: relative;
}

.progress-bar span {
	position: absolute; right: 2%; top: 50%;
	transform: translateY(-50%);
	color: #fff;
}

.progress-1 {
	background: #549400;
}

.progress-2 {
	background: green;
}

.progress-3 {
	background: blue;
}


@media screen and (max-width: 1400px) {

	.board-tabs li {
		font-size: 1.4vw;
		line-height: 2.8vw;
		letter-spacing: 0.1vw !important;
	}

  .board-tabs li.major {
  	font-size: 1.8vw;
  }

}





@keyframes neon5 {
  from {
    box-shadow: 
    0 0 3px #ffee10, 
    0 0 5px #ffee10, 
    0 0 7px #ffee10, 
    0 0 9px #FF9900
  }
  to {
    box-shadow: 
    0 0 5px #ffee10, 
    0 0 9px #ffee10, 
    0 0 13px #ffee10, 
    0 0 17px #FF9900

  }
}

@keyframes neon55 {
  from {
    text-shadow: 
    0 0 1px #000, 
    0 0 2px #ffee10, 
    0 0 3px #ffee10, 
    0 0 4px #000
  }
  to {
    text-shadow: 
    0 0 2px #000, 
    0 0 3px #ffee10, 
    0 0 4px #ffee10, 
    0 0 5px #000

  }
}

.footer-only-link{
	/* float: left; */
	position: absolute;
	right: 23vw;
	bottom: 1vw;
	background: rgba(0, 0, 0, 0.3);
	padding: 0.5vw 2vw;
	z-index: 10;
}

.footer-only-link a, .footer-only-link span{
	float: left;
	margin-right: 1vw;
	color: #fff;
	text-decoration: none;
	font-size: 0.8vw;
	opacity: 0.9;
	border-right: solid 1px rgba(255, 255, 255, 0.3);
	padding-right: 1vw;
}

.footer-only-link a:hover{
	opacity: 1;
}

.footer-only-link a:last-child{
	margin-right: 0px;
	border-right: none;
	padding-right: 0px;
}

.most-valuable-players{
	display: block;
	padding: 0.5vw;
	height: 10vw;
}

.most-valuable-players li{
	/* display: inline-block; */
	width: 7.3vw;
	height: 7.5vw;
	border: solid 0.2vw #ff0002;
	float: left;
	background: rgba(255, 255, 255, 0.3);
	margin-right: 0.5vw;
	border-radius: 0.2vw;
	list-style: none;
	position: relative;
}

.most-valuable-players li:nth-child(1){
	opacity: 1;
}

.most-valuable-players li:nth-child(2){
	opacity: 0.9;
}

.most-valuable-players li:nth-child(3){
	opacity: 0.8;
}

.most-valuable-players li:nth-child(4){
	opacity: 0.7;
}

.most-valuable-players li:nth-child(5){
	opacity: 0.6;
}

.most-valuable-players li:nth-child(6){
	opacity: 0.5;
}

.most-valuable-players li:last-child{
	margin-right: 0px;
}

.most-valuable-players li .rank{
	display: block;
	position: absolute;
	/* right: 0; */
	color: #fff;
	left: 0;
	background: rgba(0, 0, 0, 0.3);
	width: 1.5vw;
	height: 1.5vw;
	text-align: center;
	color: #fff;
	padding: 0.3vw;
	font-size: 1.4vw;
	line-height: 1.5vw;
	border-bottom-right-radius: 0.7vw;
	margin: 0.2vw;
}

.most-valuable-players li .username{
	display: block;
	position: absolute;
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	text-align: center;
	padding: 0.2vw 1vw;
	box-sizing: border-box;
	font-size: 0.9vw;
	bottom: 0;
	text-shadow: 0px 0.1vw 0.2vw #000;
	height: 1.5vw;
}

.most-valuable-players li .profile-image{
	display: block;
	width: 100%;
	height: 100%;
	margin: 0px !important;
}

.stream-head{
	background: rgba(0, 0, 0, 0.5);
	height: 2vw;
	width: 100%;
	position: absolute;
	padding: 0.5vw 0.5vw;
	z-index: 5;
}

.stream-head img{
	height: 2vw;
}

.stream-spinner{
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	position: absolute;
	left: 0px;
	top: 0px;
}

.stream-spinner img{
	width: 3vw;
	height: 3vw;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.stream-head .match-time{
	float: right;
	color: #fff;
	left: auto;
	right: 0%;
	transform: translate(-10%, -0%);
}

.stream-head .match-time b{

}

.stream-controls{
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding: 0.5vw 0.1vw;
	height: 2vw;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding-top: 0.1vw;
	z-index: 5;
}

.stream-controls .stream-movement, .stream-controls .stream-stats{
	width: 40vw;
	float: left;
}

.stream-controls .stream-stats{
	float: right;
	width: 25vw;
}

.stream-controls .stream-movement h5, .stream-controls .stream-stats h5{
	float: left;
	width: 20vw;
}

.stream-controls .stream-movement .keyboard-key, .stream-controls .stream-stats .keyboard-key{
	margin-top: 0.5vw;
}

.stream-actions{
	position: absolute;
	right: 2vw;
	top: 4vw;
	width: 15vw;
}

.stream-actions li{
	margin: 0px;
	padding: 0px;
	color: #fff;
	background: rgba(0, 0, 0, 0.2);
	padding: 0.2vw 0.5vw;
	list-style: none;
	width: 100%;
	margin-bottom: 0.2vw;
}

.level-display{
	/* background: url(../textures/slot.png); */
	font-size: 3vw;
	/* padding: 0.5vw; */
	border-radius: 50%;
	width: 4vw;
	height: 4vw;
	/* line-height: 6vw; */
	vertical-align: middle;
	float: right;
	text-align: center;
	margin-top: -0.5vw;
	color: #fff;
	/* border: solid 0.2vw #272c30; */
	/* box-shadow: 0px 0px 0.5vw #7b7b7b; */
	background-size: 100% auto;
	padding-right: 0.1vw;
	/* text-shadow: 0px 0.2vw 0.4vw #fff; */
}

.level-display b{
	font-size: 1vw;
	display: block;
}

.friend-list-container{
	margin-top: 0.5vw;
}

.friend-list{color: #fff;list-style: none;margin: 0px;padding: 0px;text-align: left;}

.friend-list li{text-align: left;/* border-bottom: solid 0.1vw #383838; */height: 4vw;line-height: 4vw;background: rgba(0, 0, 0, 0.4);padding-left: 5vw;margin-bottom: 0.5vw;padding-right: 1vw;transform: skew(-5deg);}

.friend-list li .btn{
	background: #65923f;
	color: #fff;
	border: none;
	padding: 0.5vw 1vw;
	cursor: pointer;
	font-size: 0.8vw;
	margin: inherit;
	width: auto;
	height: auto;
	/* border-radius: 1vw; */
	margin-top: 1vw;
	text-shadow: none !important;
}

.alert-container{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10005;
}

.alert-popup{
	background: #fff;
	width: 30vw;
	/* height: 16vw; */
	border-radius: 0.3vw;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 10vw #000;
	z-index: 20;
	position: absolute;
	text-align: center;
	padding: 1vw;
	box-sizing: border-box;
	padding-bottom: 3vw;
	border: solid 0.5vw #2e8ba9;
}

.alert-popup h1{
	font-size: 2vw;
}

.alert-popup p{
	margin-bottom: 1vw;
}

.alert-popup.alert-danger{
	border: solid 0.5vw #b11717;
	box-shadow: 0px 0px 10vw #ff0000;
}

.alert-popup.alert-success{
	border: solid 0.5vw #3e8806;
	box-shadow: 0px 0px 10vw #3e8806;
}

.account-unlock-cta{
	font-style: normal;
	text-align: center;
	margin-top: 1vw;
}

.account-unlock-cta button{
	margin-top: 1vw;
}

.finish-bar{height: 14vw;}

.experience-side{
	font-size: 1vw;
	color: #fff;
	width: 33vw;
	float: left;
}

.experience-side h5{
    font-size: 1.5vw;
}

.experience-side h5 span{
	float: right;
	color: yellow;
	font-size: 0.9vw;
	margin-top: 0.2vw;
}

.experience-side p{padding: 0.5vw;}
.experience-bar{
	width: 20vw;
	height: 1vw;
	background: #fff;
	line-height: 1.5vw;
	border-radius: 0px;
	margin: 0.5vw;
	/* border: solid 0.2vw #fff; */
	overflow: hidden;
	position: relative;
	/* box-shadow: 0px 0px 0.5vw #fff; */
	margin-bottom: 0.7vw;
}

.experience-fill{
	background: #45d2ec;
	color: #104473;
	text-align: right;
	padding-right: 1vw;
	/* box-sizing: border-box; */
	font-size: 0.8vw;
	/* text-shadow: 0px 0.1vw 0.2vw #000000; */
	border-right: solid 0.3vw #ffffff;
	transform: skew(-10deg);
	padding-left: 1.5vw;
	margin-left: -1vw;
	height: 1vw;
	position: absolute;
	box-shadow: 0.5vw 0px 1vw #ffffff;
	width: 0%;
	transition: width 1.5s linear;
	line-height: 1vw;
	padding-right: 1.5vw !important;
}

.next-map{
	float: right;
	width: 14.2vw;
	margin-right: 1vw;
}

.next-map h5{font-size: 1vw;}

.next-map-image{
	width: 14vw;
	background: url('../images/maps/area5.jpg');
	height: 8.5vw;
	position: relative;
	border-radius: 0.1vw;
	overflow: hidden;
	margin: 0.5vw;
	background-size: 100% auto;
	background-position: center center;
	box-shadow: 0px 0px 1vw #23626f;
	border: solid 0.2vw #fff;
	box-sizing: border-box;
}

.next-map-name{
	position: absolute;
	bottom: 0.5vw;
	background: #000;
	color: #fff;
	font-size: 1vw;
	/* width: 100%; */
	padding: 0.2vw 1vw;
	box-sizing: border-box;
	text-align: center;
	transform: skew(-10deg);
	padding-left: 2vw;
	margin-left: -1vw;
	/* border-right: solid 0.5vw #de8a2c; */
}

.next-map-timer{
	color: #fff;
	right: -0.5vw;
	position: absolute;
	font-size: 1.1vw;
	/* margin: 0.5vw; */
	text-shadow: 0px 0.1vw 0.2vw #000;
	background: #000;
	padding: 0.2vw 0.5vw;
	transform: skew(-10deg);
	padding-right: 1vw;
	margin-top: 0.3vw;
}

.next-map-timer .shine-effect{
	width: 3vw;
	background-size: auto 100%;
}

.shine-effect-container{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0.2;
}

.earn-cc .shine-effect{
	width: 3vw;
	background-size: 100% 100% !important;
}

.hero-selection .loadout-image{
	background-position: center 0vw !important;
	background-size: 70% auto !important;
}

.benchmark{
	position: absolute;
	left: 1vw;
	top: 1vw;
}

.benchmark li{
	font-family: monospace, Arial;
	font-size: 0.8vw;
	margin-bottom: 0.4vw;
	list-style: none;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	padding: 0.5vw 1vw;
}

.experience-points{
	list-style: none;
	padding: 0px;
	margin: 0px;
	padding-left: 0.5vw;
}

.experience-points li{
	padding: 0.2vw;
	font-size: 1vw;
	color: #fff;
	border-bottom: solid 0.1vw rgba(255, 255, 255, 0.02);
	transform: scale(1);
	transition: all 0.2s linear;
	height: 1.4vw;
	padding-left: 0.4vw;
	margin-bottom: 0.5vw;
}

.experience-points li.active{
	background: rgba(255, 255, 255, 0.3);
	/* transform: scale(1.1); */
	font-size: 1.2vw;
	height: 1.6vw;
	padding-left: 1vw;
	line-height: 1.7vw;
	text-shadow: 0px 0vw 0.3vw #000;
}

.experience-points li b{
	width: 10vw;
	display: inline-block;
}

.experience-points li span{
	float: right;
	color: #fff;
	font-size: 1.1vw;
	/* text-shadow: 0px 0.05vw 0.1vw #000; */
	/* background: rgba(0, 0, 0, 0.1); */
	width: 4vw;
	text-align: center;
	height: 1.8vw;
	margin-right: -0.2vw;
}

.experience-points li.active span{
	font-size: 1.2vw;
    background: rgba(255, 155, 0, 0.8);
    height: 2.1vw;
    margin-top: -0.2vw;
    line-height: 2vw;
    margin-right: -0.2vw;
}

.chat-box{
	position: absolute;
	left: 3vw;
	bottom: 21vh;
}

.chat-messages{

}

.chat-messages li{
	color: #fff;
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-bottom: 0.4vw;
	background: rgba(0, 0, 0, 0.1);
	padding: 0.4vw 1vw;
	width: 20vw;
	font-size: 1vw;
	word-break: break-all;
}

.chat-messages li b{
	margin-right: 1vw;
}

.chat-input{
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	padding: 0.5vw 1vw;
	outline: none;
	border: none;
	width: 20vw;
	font-size: 1.2vw;
	font-family: 'CoolveticaRg';
}

.matchmaking{
	z-index: 1000;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.matchmaking-popup{
	width: 30vw;
	min-height: 10vh;
	background: #fff;
	box-shadow: 0px 0px 5vw #fff;
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	/* border-radius: 0.2vw; */
	/* border: solid 0.05vw #ffffff; */
	overflow: hidden;
}

.matchmaking-popup-title{
	width: 100%;
	font-size: 1vw;
	color: #fff;
	text-align: center;
	height: 2.5vw;
	line-height: 2.5vw;
	background: rgb(80, 80, 80);
	/* background: linear-gradient(0deg, rgba(21,51,75,1) 0%, rgba(12,135,227,1) 100%); */
	text-transform: uppercase;
}

.matchmaking-footer{background: #a5a5a5;height: 2vw;padding: 0.5vw 1vw;}

.matchmaking-footer span{

}

.matchmaking-footer .spinner{
	height: 2vw;
	float: left;
}

.matchmaking-content{
	padding: 1vw;
	font-size: 1vw;
}

.matchmaking-content p{
	font-size: 0.9vw;
	margin: 0px;
}

.matchmaking-popup .waiting-text{
	float: left;
	color: #eaeaea;
	margin-left: 1vw;
	margin-top: 0.4vw;
	font-size: 0.9vw;
}

.matchmaking-timer, .matchmaking-players{
	float: right;
	font-size: 1.6vw;
	color: #fff;
	text-shadow: 0px 0.1vw 0.3vw #666;
	background: #929292;
	height: 3vw;
	margin-top: -0.5vw;
	width: 6vw;
	text-align: center;
	line-height: 3vw;
}

.matchmaking-players{
	width: 10vw;
	font-size: 1.2vw;
}

.matchmaking .background-overlay{
	background: rgba(0, 0, 0, 0.8) !important;
}

.game-modes{
	position: absolute;
	top: 3.5vh;
	text-align: center;
	padding: 0px;
	margin: 0px;
	/* width: 20vw; */
	/* float: left; */
	/* margin-top: 1vw; */
	padding-left: 2vw;
	/* top: 50%; */
	transform: translate(0%, -50%);
}

.game-modes label{
	display: inline-block;
	width: 3vw;
	margin: 0px;
	padding: 0px;
	text-align: left;
	padding-left: 2.5vw;
	background: url('../images/checkbox.png?v=1.0') no-repeat left center;
	background-size: auto 100%;
	cursor: pointer;
	opacity: 0.4;
	font-size: 1.4vw;
	color: #fff;
}

.game-modes label.active{
	background: url('../images/checkbox-checked.png?v=1.0') no-repeat left center;
	background-size: auto 100%;
	opacity: 1;
}

.invite-modes{
	width: 100%;
	height: 10vw;
	position: relative;
}

.invite-modes li{
	width: calc(50% - 0.1vw);
	float: left;
	height: 10vw;
	list-style: none;
	position: relative;
	text-align: center;
	opacity: 0.9;
	cursor: pointer;
	transform: scale(0.9);
	transition: transform 0.1s linear;
}

.invite-modes li:hover{
	opacity: 1;
	transform: scale(1);
}

.invite-modes li:last-child{
	border-right: none;
}

.invite-modes li img{
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 40%;
}

.invite-modes li .title{
	position: absolute;
	top: 6vw;
	font-size: 1.2vw;
	color: #5f5f5f;
	width: 100%;
	left: 0px;
}

.invite-modes li small{
	font-size: 0.8vw;
	color: #b7b7b7;
	display: block;
	margin-top: 0.2vw;
	padding: 0vw 2vw;
	letter-spacing: 0.01vw;
}

.vertical-seperator{
	width: 0.1vw;
	border-right: solid 0.1vw #ddd;
	left: 50%;
	position: absolute;
	top: 0px;
	height: 10vw;
}

.matchmaking-popup-title .sub-close{
	top: 0.4vw;
}

.matchmaking-popup-title .sub-close img{
	width: 1.6vw;
	height: 1.6vw;
}

.link-share-container{
	border:solid 0.1vw #ddd;
	background: #ddd;
	padding: 0.5vw;
	font-size: 1vw;
	color: #333;
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	margin-top: 1vw;
}

.matchmaking-btn{
	float: right;
	font-size: 1.3vw;
	color: #fff;
	text-shadow: 0px 0.1vw 0.3vw #666;
	background: rgb(9, 107, 181);
	height: 3vw;
	margin-top: -0.5vw;
	width: 12vw;
	text-align: center;
	line-height: 2.8vw;
	border:none;
	cursor: pointer;
}

.floating-square-banner{
	width: 300px;
	height: 250px;
	background: #212121;
	padding: 0.5vw;
	border: solid 0.1vw rgba(0, 0, 0, 0.2);
}

.notification-space{
	position: relative;
	width: 100%;
}

.side-menu{
	width: 16vh;
	background: #000;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	box-shadow: 1vw 0px 1vw rgba(0, 0, 0, 0.3);
	/* min-width: 12vw; */
	z-index: 2;
}

.side-logo{
	width: 100%;
	display: block;
	height: 12vh;
	text-align: center;
	padding-top: 3vh;
	padding-bottom: 3vh;
	background: black;
}

.side-menu-list{
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.side-menu-list li{
	width: 100%;
	text-align: center;
	height: 9.5vh;
	padding-top: 2vh;
	cursor: pointer;
	opacity: 0.6;
	transform: scale(0.9);
	padding-bottom: 2.5vh;
}

.side-menu-list li:hover{
	opacity: 1;
}

.side-menu-list li.active{
	background: #151515;
	opacity: 1;
	transform: scale(1);
}

.side-menu-list li small{
	color: #ffffff;
	display: block;
	text-align: center;
	width: 100%;
	margin-top: 0.5vw;
	/* letter-spacing: -0.01vw; */
	font-size: 2.7vh;
}

.side-menu-list li img{
	width: 5vh;
}

.home-banner{
	position: absolute;
	right: 1vw;
	top: 10vw;
	width: 300px;
	height: 250px;
	background: #000;
	padding: 8px;
	padding-left: 20px;
	border: solid 1px #212121;
}

.home-banner-content{
	width: 300px;
	height: 250px;
	/* border: solid 1px #212121; */
}

.home-banner span{
	transform: rotate(-90deg);
	color: #505050;
	width: 250px;
	position: absolute;
	transform-origin: right top;
	left: -247px;
	font-size: 11px;
	/* text-align: center; */
}

.map-name{
	position: absolute;
	bottom: 5vw;
	left: 15vh;
	width: 10vw;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.5vw;
	background: #4e4e4e;
	padding: 0.5vw 1vw;
	transform: skew(-10deg);
	/* border-left: solid 0.5vw #000; */
	z-index: 1;
	padding-left: 3vw;
}

.side-tab-content{
	position: absolute;
	left: 22vh;
	width: 52vw;
	top: 1vw;
	color: #fff;
	/* height: 90vh; */
	/* overflow-y: auto; */
	/* overflow-x: hidden; */
}

.side-loadout{
	width: 45vw;
}

.side-loadout-row{
	width: 50vw;
	height: 14vh;
}

.side-loadout-row .side-loadout-half{
	width: 22vw;
	float: left;
	margin-right: 1vw;
}

.side-loadout h5{
	margin-bottom: 1vh;
}

.side-loadout-item{
	width: 100%;
	height: 14vh;
	background: rgba(0, 0, 0, 0.9);
	transform: skew(-5deg);
	border-right: solid 0.5vw #7289da;
	position: relative;
	overflow: hidden;
	margin-bottom: 2vh;
	margin-top: 2vh;
	cursor: pointer;
}

.side-loadout-image{
	width: 16vw;
	height: 100%;
	background-size: 90% auto;
	float: right;
	background-position: center center;
	margin-right: 2vw;
	transform: skew(5deg);
	/* background-color: rgba(255, 255, 255, 0.05); */
	/* padding-right: 2vw; */
	background-repeat: no-repeat;
	margin-right: 0vw;
	max-width: 45%;
}

.side-loadout-title{
	padding: 0.7vw 1.5vw;
	color: #fff;
	font-size: 3.4vh;
	text-transform: uppercase;
	/* background: #272727; */
	width: 19vw;
	text-align: left;
	letter-spacing: 0.2vw;
}

.map-name a{
	position: absolute;
	width: 100%;
	height: 1vw;
	color: #fff;
	bottom: -2.5vw;
	background: #1f1f1f;
	text-decoration: none;
	font-size: 1vw;
	padding: 0.5vw 1vw;
	left: 1vw;
}

.map-name a:hover{
	background: #333;
}

.map-name a img{
	float: left;
	height: 1vw;
	margin-right: 0.5vw;
}

.side-loadout-button{
	padding: 1vh 1.5vw;
	color: #fff;
	font-size: 2.5vh;
	text-transform: uppercase;
	background: #717171;
	width: 9.6vw;
	text-align: center;
	bottom: 0px;
	position: absolute;
	cursor: pointer;
	border: none;
	font-family: CoolveticaRg;
	min-width: 12vw;
}

.side-loadout-button img{
	float: left;
	height: 2.2vh;
	margin-top: 0.25vw;
	transform: skew(5deg);
	margin-right: 0.5vh;
}

.side-loadout-hero{
	background-size: auto 102%;
	background-position: center bottom;
}

.bottom-invite-link{
	bottom: 0vw;
	font-size: 0.8vw;
	position: absolute;
	text-align: center;
	display: block;
	background: #fff;
	color: #000;
	width: 100%;
	text-decoration: none;
	padding: 0.8vh;
	box-sizing: border-box;
}

.bottom-invite-link img{
	height: 0.9vw;
	float: left;
}

.side-match-settings{
	width: 100%;
	/* height: 14vh; */
	background: rgba(0, 0, 0, 0.9);
	transform: skew(-5deg);
	/* border-right: solid 0.5vw #7289da; */
	position: relative;
	overflow: hidden;
	margin-bottom: 2vh;
	margin-top: 2vh;
}

.side-account-cta{
	width: 100%;
	height: 14vh;
	background: rgba(0, 0, 0, 0.5);
	transform: skew(-5deg);
	border-right: solid 0.5vw #7289da;
	position: relative;
	overflow: hidden;
	margin-bottom: 2vh;
	margin-top: 6vh;
	padding: 1vw;
	box-sizing: border-box;
	height: 4.5vw;
}

.side-account-cta p{
	float: left;
	color: #fff;
	font-size: 1vw;
	margin: 0px !important;
	line-height: 2.5vw;
	height: 2.5vw;
	padding: 0px;
}

.side-account-cta a{
	float: right;
	/* width: 5vw; */
	/* height: 2vh; */
	color: #fff;
	background: #616161;
	padding: 0.6vw 1.5vw;
	text-decoration: none;
	font-size: 1.2vw;
	height: 1.2vw;
}

.side-scrollable{
	height: 55vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 1.5vw;
	width: calc(100% + 0.5vw);
	margin-left: -0.2vw;
	padding-left: 0.2vw;
}

.mini-profile{
	position: absolute;
	right: -0.6vw;
	top: 1vw;
	background: #fff;
	/* padding: 0.5vw 1.5vw; */
	transform: skew(-10deg);
	font-size: 1.2vw;
	/* padding-right: 2.5vw; */
	cursor: pointer;
	height: 3vw;
	overflow: hidden;
}

.mini-profile .profile-picture-inner{
	width: 3vw;
	height: 3vw;
	float: right;
	transform: skew(10deg);
	margin-right: 0.5vw;
	position: relative;
	background-size: cover;
	overflow: hidden;
	background-position: center center;
}

.mini-profile span{
	float: left;
	margin-right: 0vw;
	padding: 0.8vw;
	background: #ababab;
	color: #fff;
	text-shadow: 0px 0px 0.1vw #000;
}

.mini-profile span.level{
	background: #797979;
	color: #fff;
	line-height: 1vw;
	height: 100%;
	padding: 0px;
	padding-left: 0.8vw;
	padding-right: 0.8vw;
	font-size: 1vw;
	padding-top: 0.7vw;
	text-align: center;
}

.mini-profile span.level b{
	display: block;
	font-size: 0.5vw;
}

.mini-profile span.coin{
	background: #696969;
	padding: 0px;
	color: #fff;
	padding-right: 1.7vw !important;
	margin-right: -0.6vw;
	padding-left: 1vw !important;
	height: 100%;
	line-height: 3.3vw;
}

.easy-login{
	position: absolute;
	right: -0.5vw;
	top: 1vw;
	background: #fff;
	padding: 0.5vw 1.5vw;
	transform: skew(-10deg);
	font-size: 1.2vw;
	padding-right: 2.5vw;
	cursor: pointer;
}

.easy-login:hover{
	background: #ddd;
}

.easy-login img{
	height: 1.2vw;
	margin-right: 0.5vw;
	float: left;
	transform: skew(10deg);
}

.profile-username{
	font-size: 1.8vw;
	margin: 0px;
	height: 5vw;
	padding: 0.5vw;
}

.transparent-seperator{
	height: 3vw;
}

.btn-danger{
	background: #b93f3f !important;
}

h4.sub-title{
	position: relative;
}

h4.sub-title:after{
	content: "";
	position: absolute;
	border-top: solid 0.2vw rgba(255, 255, 255, 0.1);
	width: 75%;
	right: 0;
	top: 50%;
	transform: translate(0%, -50%);
}

.profile-picture-friend{
	height: 4vw;
	width: 4vw;
	position: absolute;
	background-size: 100% auto;
	left: 0px;
	background-repeat: no-repeat;
	background-color: #000;
}

.last-login{
	color: #ddd;
	font-size: 0.8vw;
	float: right;
	margin-left: 2vw;
}

.table-button{
	background: #7189da;
	color: #fff !important;
	text-decoration: none;
	padding: 0.2vw 1.5vw;
	font-size: 0.9vw;
	display: block;
	margin-left: 1.5vw;
}

.username-color{
	color: #7289da;
}

.side-account-banner{
	padding: 0px;
	height: 7vw;
	margin-top: 1vh;
}

.side-account-banner .banner-container{
	transform: skew(5deg);
}

.earn-cc-button{
	position: absolute;
	top: 5vw;
	right: -2vw;
	background: #ccb726;
	padding: 0.7vw 1vw;
	transform: skew(-10deg);
	padding-right: 3.5vw;
	color: #fff;
	font-size: 2.4vh;
	padding-left: 1.5vw;
	text-shadow: 0px 0.2vw 0.5vw #887a1a;
	cursor: pointer;
}

.earn-cc-button img{
	float: left;
	height: 2.4vh;
	margin-right: 1vw;
}

.circle-crosshair{
	position: absolute !important;
	left: -13px;
	top: -13px;
	width: 24px;
	height: 24px;
	border: solid 2px #fff !important;
	box-shadow: 0px 0px 5px #000;
	border-radius: 50% !important;
	background: transparent !important;
	/* transform: translate(-50%, -50%); */
}

.image-crosshair{
	position: absolute !important;
	left: -128px;
	top: -128px;
	width: 256px;
	height: 256px;
	background-position: center center;
	background-repeat: no-repeat;
}

.game-stats{
	position: absolute;
	top: 7.5vh;
	left: 2vw;
	font-size: 0.8vw;
	color: #ccc;
}

.game-stats span{
	border-right: solid 1px #333;
	padding-right: 1vw;
	margin-right: 1vw;
}

.game-stats span:last-child{
	border-right: none;
}

.profile-share-link{
	text-transform: lowercase;
	font-family: monospace, Arial;
	background: rgba(0, 0, 0, 0.5);
	margin-top: 3vh;
	height: 3.1vw;
}

.profile-share-link span{
	/* padding: 1.5vw; */
	font-size: 1vw;
	line-height: 3.1vw;
	user-select: text;
	width: 60%;
	display: block;
	float: left;
	padding-left: 1.5vw;
}

.profile-share-link-button{
	float: right;
}

.keyboard-bind{

}

.keyboard-bind .key-bind{
	color: #fff;
	cursor: pointer;
	font-size: 1vw;
	float: right;
	margin-right: 1vw;
	margin-top: -0.1vw;
	background: #7189da;
	padding: 0.2vw 1.5vw;
	height: 1.5vw;
}

.keyboard-bind .key-bind.key-bind-reset{
	background: transparent;
}

.key-binding-overlay{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
}

.key-binding-overlay .matchmaking-content{
	color: #000;
	text-align: center;
}

.experience-bar{
	width: calc(100% - 2vw);
	height: 1vw;
	background: rgba(0, 0, 0, 0.5);
}

.experience-fill{
	/* background: #fff; */
	width: 50%;
	height: 1vw;
}

.earn-cc-disabled{
	background: #666;
	text-shadow: none;
}

.bottom-bar{
	height: 5px;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	bottom: 0;
	left: 0px;
}

.bottom-bar-fill{
	background: #fff;
	height: 5px;
	position: absolute;
}

.shop-content{

}

.shop-content li.product{
	width: 14vw;
	height: 8.7vw;
	background: #252525;
	position: relative;
	list-style: none;
	overflow: hidden;
	cursor: pointer;
	float: left;
	margin-right: 1vw;
	margin-bottom: 1vw;
	transform: scale(1) skew(-4deg);
	transition: all 0.1s ease-in-out;
}

.shop-content li.product:hover{
	transform:scale(1.1);
}

.shop-content li.product .product-image{
	width: 100%;
	position: absolute;
}

.shop-content li.product .product-name{
	background: rgba(0, 0, 0, 0.4);
	font-size: 1vw;
	padding: 0.5vw 1vw;
	position: absolute;
	bottom: 0px;
	width: 100%;
	box-sizing: border-box;
}

.shop-content li.product .product-subtitle{
	display: block;
	font-size: 0.7vw;
}

.shop-content li.product .product-price{
	position: absolute;
	right: 0px;
	top: 0px;
	background: yellow;
	color: #000;
	text-shadow: 0px 1px 1px #fff;
	padding: 0.2vw 0.5vw;
	font-size: 1.5vw;
}

.header-tab b{
	color: #fff;
}

.product-details{
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 100;
	width: 100%;
	height: 100%;
}

.product-details-popup{
	width: 30vw;
	height: 10vh;
	border-radius: 0.3vw;
	background: #fff;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 10vw #000;
	z-index: 20;
	position: absolute;
	text-align: center;
	padding: 1vw;
	box-sizing: border-box;
	padding-bottom: 3vw;
	border: solid 0.5vw #2e8ba9;
}

.product-image-holder{
	float: left;
	width: 30%;
	margin-left: 1vw;
	margin-top: 0.5vw;
	position: relative;
	height: 6.5vw;
}

.product-quantity{
	position: absolute;
	left: 0.5vw;
	top: 0.5vw;
	background: #383838;
	padding: 0.2vw 0.5vw;
	font-size: 0.9vw;
	z-index: 1;
}

.side-account-booster{
	height: 4.5vw;
	margin-top: 0px;
}

.side-account-booster .booster-title{
	float: left;
	font-size: 1vw;
	color: #ccb727;
}

.side-account-booster .time-left{
	float: right;
	font-size: 1vw;
	color: #fff;
	letter-spacing: 0.2vw;
}

.side-account-booster .time-bar{
	width: 100%;
	height: 0.5vw;
	display: block;
	background: #666;
	float: left;
	margin-top: 0.7vw;
	position: relative;
	overflow: hidden;
}

.side-account-booster .time-fill{
	width: 50%;
	height: 0.5vw;
	background: #c6b127;
	position: absolute;
}

.featured-youtuber{
	position: absolute;
	bottom: 1vw;
	width: 300px;
	left: 22vh;
	background: #232323 url('../images/youtube-icon.png') no-repeat 295px 2vw;
	background-size: auto 40%;
	color: #ccc;
	padding: 0.5vw 1vw;
	font-size: 0.9vw;
	border-left: 0.5vw solid #c70000;
}

.featured-youtuber .title{
	display: block;
	color: #ffc0c0;
	margin-top: 0.2vw;
	float: right;
}

.featured-youtuber .youtuber-name{
	display: block;
	margin-bottom: 0.2vw;
	text-decoration: none;
	font-size: 1.2vw;
}

.featured-youtuber .video-name{
	display: block;
	margin-bottom: 0.2vw;
	font-size: 0.9vw;
	color: #ccc;
}

.daily-quests{
	position: absolute;
	top: 9.5vw;
	right: -2vw;
	background: #525252;
	padding: 0.7vw 1vw;
	transform: skew(-10deg);
	padding-right: 3.5vw;
	color: #fff;
	font-size: 2.4vh;
	padding-left: 1.5vw;
	text-shadow: 0px 0.2vw 0.5vw #444444;
	cursor: pointer;
}

.daily-quests img{
	float: left;
	height: 2.4vh;
	margin-right: 1vw;
}

.booster-factor{
	float: right;
	font-size: 1vw;
	color: yellow;
	margin-right: 1vw;
}