/*@import url(https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap);*/

.btn,
.fpage ol,
.fpage ul,
h1,
h2,
h3,
p,
span {
	color: #fff;
	font-family: 'Open Sans', sans-serif
}

.arrow,
span.loader {
	display: inline-block
}

.is-hover {
	cursor: pointer !important;
}

.btn.red:hover,
button:hover {
	cursor: pointer
}

/** {
	padding: 0;
	margin: 0;
	border: 0;
	list-style-type: none;
	outline: 0;
	text-decoration: none;
	-webkit-font-smoothing: antialiased
}*/

ol li {
	list-style-type: decimal
}

table {
	border-spacing: 0
}

/*body {
	background: url(/images/slider/slider14.jpg.webp) top center no-repeat #1d1d1d;
	overflow-y: scroll
}*/

body.information {
	background: url(/images/backgrounds/information.png.webp) top center no-repeat #1d1d1d
}

body.account {
	background: url(/images/backgrounds/account.jpg.webp) top center no-repeat #1d1d1e
}

body.lbpage {
	background: url(/images/backgrounds/luckybox.png.webp) top center no-repeat #1d1d1d
}

body.lbpage2 {
	background: url(/images/backgrounds/cosmeticbox.png.webp) top center no-repeat #1d1d1d
}

body.gembox {
	background: url(/images/backgrounds/gembox.jpg.webp) top center no-repeat #1d1d1d
}

body.charpage {
	background: url(/images/backgrounds/character.jpg.webp) top center no-repeat #1d1d1d
}

body.clanpage {
	background: url(/images/backgrounds/clan.jpg.webp) top center no-repeat #1b1d1f
}

body.ishop {
	background: url(/images/backgrounds/itemshop.jpg.webp) top center no-repeat #1d1d1d
}

body.ranking {
	background: url(/images/backgrounds/ranking.jpg.webp) top center no-repeat #1d1d1d
}

.nobody {
	height: 529px
}

.btn {
	height: 30px;
	width: 90px;
	background-image: -ms-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -moz-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -o-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0875C0), color-stop(100, #005f91));
	background-image: -webkit-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: linear-gradient(to bottom, #0875C0 0, #005f91 100%);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 12px;
	color: #fff;
	padding: 7px 18px
}

.blue,
.btn.blue {
	background-image: -ms-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -moz-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -o-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008ADA), color-stop(100, #0076DA));
	background-image: -webkit-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: linear-gradient(to bottom, #008ADA 0, #0076DA 100%);
	border-left: 1px solid #5eb5e8;
	border-top: 1px solid #5eb5e8
}

.blue:hover,
.btn.blue:hover {
	background-image: -ms-linear-gradient(top, #1F85D4 0, #016692 100%);
	background-image: -moz-linear-gradient(top, #1F85D4 0, #016692 100%);
	background-image: -o-linear-gradient(top, #1F85D4 0, #016692 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #1F85D4), color-stop(100, #016692));
	background-image: -webkit-linear-gradient(top, #1F85D4 0, #016692 100%);
	background-image: linear-gradient(to bottom, #1F85D4 0, #016692 100%);
	cursor: pointer
}

.btn.red {
	background-image: -ms-linear-gradient(top, #D03737 0, #a22c2c 100%);
	background-image: -moz-linear-gradient(top, #D03737 0, #a22c2c 100%);
	background-image: -o-linear-gradient(top, #D03737 0, #a22c2c 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D03737), color-stop(100, #a22c2c));
	background-image: -webkit-linear-gradient(top, #D03737 0, #a22c2c 100%);
	background-image: linear-gradient(to bottom, #D03737 0, #a22c2c 100%);
	border-top: 1px solid #e38181;
	border-left: 1px solid #e38181
}

.btn.red:hover {
	background-image: -ms-linear-gradient(top, #D41F1F 0, #920101 100%);
	background-image: -moz-linear-gradient(top, #D41F1F 0, #920101 100%);
	background-image: -o-linear-gradient(top, #D41F1F 0, #920101 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D41F1F), color-stop(100, #920101));
	background-image: -webkit-linear-gradient(top, #D41F1F 0, #920101 100%);
	background-image: linear-gradient(to bottom, #D41F1F 0, #920101 100%)
}

.btn.green {
	background-image: -ms-linear-gradient(top, #37d044 0, #1a7731 100%);
	background-image: -moz-linear-gradient(top, #37d044 0, #1a7731 100%);
	background-image: -o-linear-gradient(top, #37d044 0, #1a7731 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #37d044), color-stop(100, #1a7731));
	background-image: -webkit-linear-gradient(top, #37d044 0, #1a7731 100%);
	background-image: linear-gradient(to bottom, #37d044 0, #1a7731 100%);
	border-top: 1px solid #81e396;
	border-left: 1px solid #81e396
}

.btn.green:hover {
	background-image: -ms-linear-gradient(top, #30b63b 0, #166329 100%);
	background-image: -moz-linear-gradient(top, #30b63b 0, #166329 100%);
	background-image: -o-linear-gradient(top, #30b63b 0, #166329 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #30b63b), color-stop(100, #166329));
	background-image: -webkit-linear-gradient(top, #30b63b 0, #166329 100%);
	background-image: linear-gradient(to bottom, #30b63b 0, #166329 100%)
}

.btn.dark {
	background-image: -ms-linear-gradient(top, #595A5E 0, #353638 100%);
	background-image: -moz-linear-gradient(top, #595A5E 0, #353638 100%);
	background-image: -o-linear-gradient(top, #595A5E 0, #353638 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #595A5E), color-stop(100, #353638));
	background-image: -webkit-linear-gradient(top, #595A5E 0, #353638 100%);
	background-image: linear-gradient(to bottom, #595A5E 0, #353638 100%);
	border-radius: 2px 2px 0 0;
	border-top: 1px solid #6c6e71
}

.btn.dark:hover {
	background-image: -ms-linear-gradient(top, #383838 0, #252525 100%);
	background-image: -moz-linear-gradient(top, #383838 0, #252525 100%);
	background-image: -o-linear-gradient(top, #383838 0, #252525 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #383838), color-stop(100, #252525));
	background-image: -webkit-linear-gradient(top, #383838 0, #252525 100%);
	background-image: linear-gradient(to bottom, #383838 0, #252525 100%)
}

.redtext {
	color: #ff4343!important
}

.notopmargin {
	margin-top: 0!important
}

span.loader {
	border: 5px solid #000;
	border-top: 5px solid #0097ff;
	border-radius: 50%;
	width: 5px;
	height: 5px;
	animation: spin 1s linear infinite
}

span.loader.margin {
	margin: 7px
}

.left {
	float: left
}

.right,
.right2 {
	float: right
}

.right3 {
	float: right;
	margin: -20px 0px 0px 0px
}

.clear {
	clear: both
}

.arrow {
	border: solid #000;
	border-width: 0 3px 3px 0;
	padding: 3px;
	margin-left: 5px
}

.arrow.right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg)
}

.arrow.left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg)
}

.arrow.up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg)
}

.arrow.down {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg)
}

.arrow.red {
	border-color: red
}

.arrow.green {
	border-color: #32cd32
}

.arrow.white {
	border-color: #fff
}

.arrow.black {
	border-color: #000
}

.form-error {
	color: red;
	font-size: 11px
}

.wrapper {
	width: 972px;
	margin: 0 auto
}

.header-left {
	float: left
}

.header-left a {
	display: block;
	margin: 6px 0 0;
	height: 40px
}

.header-right {
	float: right;
	/*width: 525px;*/
	height: 58px;
	position: relative
}

.header-right>div {
	float: left
}

.header-time>span {
	font-size: 10px;
	color: #909090;
	font-family: Verdana;
	margin-top: 17px;
	display: block
}

.header-time span>span {
	color: #fff
}

.header-buttons {
	height: 30px;
	margin: 12px 0 0 30px
}

.header-buttons .register {
	margin-left: 1px
}

.header-buttons a {
	padding: 9px 25px;
	line-height: 30px;
	font-family: Verdana;
	font-size: 10px;
	text-shadow: none
}

.header-authenticated {
	margin: 0 0 0 20px
}

.header-authenticated img {
	height: 48px;
    width: 48px;
    margin: 3px 0 0 0;
}

.header-authenticated>div {
	margin: 0 0 0 4px
}

.header-authenticated span {
	display: block;
	color: #fff;
	font-size: 11px
}

.header-authenticated>div>a {
	width: 60px;
	height: 23px;
	display: inline-block;
	padding: 0;
	text-align: center;
	font-size: 11px;
	line-height: 22px;
	text-shadow: 1px 1px 1px #000;
	margin: 6px 0 0
}

.header-authenticated .btn.blue,
.header-authenticated .btn.red {
	height: 30px;
	width: 80px;
	line-height: 30px;
	font-family: Verdana;
	font-size: 10px;
	text-shadow: none
}

.header-authenticated .btn.blue {
	border: none;
	border-top: 1px solid #5eb5e8;
	border-left: 1px solid #5eb5e8
}

.header-authenticated .btn.red {
	border: none;
	border-top: 1px solid #e38181;
	border-left: 1px solid #e38181
}

.animated-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 125px;
	width: 100%;
	overflow: hidden;
	border-bottom: 1px solid #505050;
	z-index: 1
}

.animated-panel {
	position: absolute;
	top: 0;
	height: 100%;
	width: 200%;
	transform: translateX(0)
}

.animated-back {
	background: url('/images/headerBottom.jpg.webp') 100% 50% repeat-x;
	width: 7680px;
	right: 0
}

.animated-front {
	background: url('/images/headerTop.png.webp') 0 50% repeat-x;
	width: 6336px;
	left: 0;
	opacity: .3
}

@-webkit-keyframes headerTranslateBack {
	from {
		-webkit-transform: translateX(0)
	}
	to {
		-webkit-transform: translateX(25%)
	}
}

@keyframes headerTranslateBack {
	from {
		transform: translateX(0)
	}
	to {
		transform: translateX(25%)
	}
}

@-webkit-keyframes headerTranslate {
	from {
		-webkit-transform: translateX(0)
	}
	to {
		-webkit-transform: translateX(-25%)
	}
}

@keyframes headerTranslate {
	from {
		transform: translateX(0)
	}
	to {
		transform: translateX(-25%)
	}
}

@media screen and (min-width:980px) {
	.animated-back {
		-webkit-animation: headerTranslateBack 200s infinite linear;
		animation: headerTranslateBack 200s infinite linear
	}
	.animated-front {
		-webkit-animation: headerTranslate 150s infinite linear;
		animation: headerTranslate 150s infinite linear
	}
}

nav {
	width: 100%;
	height: 110px;
	padding-top: 15px
}

nav .nav-wrapper {
	width: 972px;
	margin: 0 auto;
	z-index: 10;
	position: relative
}

nav .header {
	height: 60px
}

nav .nav {
	height: 50px;
	background: #fff;
	width: 100%
}

nav .language {
	float: right;
	height: 30px;
	width: 230px;
	margin: 10px 0
}

nav .language>span {
	color: #909090;
	font-style: italic;
	font-weight: 800;
	font-size: 12px;
	margin-top: 7px;
	display: block;
	float: left
}

.downloads a,
nav .nav>ul li a:hover {
	font-weight: 700
}

nav .language ul {
	float: right;
	margin: 7px 0 0;
	background: #fff;
	cursor: pointer;
	z-index: 999;
	position: relative;
	width: 125px
}

nav .language li:first-child {
	display: block;
	background: url(/images/content/sprite3.png.webp) -655px -141px no-repeat;
	background-size: 15%;
	padding-right: 15px
}

nav .language li:not(:first-child) {
	padding: 10px 0 0
}

nav .language li:first-child span::before {
	content: "";
	display: inline-block;
	height: 28px;
	width: 28px;
	position: absolute;
	left: -5px;
	top: -2px;
	background: url(/images/content/globe.png.webp) no-repeat;
	background-size: 24px
}

nav .language li:last-child {
	padding-bottom: 10px
}

nav .language span {
	color: #2e343b;
	font-size: 12px;
	font-family: Verdana;
	padding: 2px 0 1px 30px
}

.lang {
	background-size: 20px
}

nav .nav>ul {
	top: 17px;
	position: relative
}

nav .nav>ul li {
	float: left
}

nav .nav>ul li a {
	color: #000;
	font-size: 14px;
	text-transform: uppercase;
	padding: 16px 20px;
	font-family: Roboto, sans-serif;
	cursor: pointer;
	position: relative
}

nav .nav>ul li a.sub-link {
	background: url(/images/arrow-down.png.webp) right center no-repeat
}

.nav .sub-menu {
	position: absolute;
	width: 972px;
	top: 33px;
	left: 0;
	background-image: -ms-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -moz-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -o-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0875C0), color-stop(100, #005f91));
	background-image: -webkit-linear-gradient(top, #0875C0 0, #005f91 100%);
	background-image: linear-gradient(to bottom, #0875C0 0, #005f91 100%);
	padding: 10px 0
}

.nav .sub-menu li {
	display: inline-block;
	float: left
}

.nav .sub-menu li:first-child {
	margin: 0
}

.nav .sub-menu a {
	font-size: 11px;
	color: #fff
}

.downloads {
	padding: 15px 0;
	font-size: 12px;
	font-family: Roboto, Arial
}

.downloads a {
	color: #247ac3
}

.downloads a>span {
	color: #a21e16
}

.downloads>p>span {
	color: #247ac3
}

.login-container,
.modal,
.modal2,
.register-container {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .7);
	top: 0;
	left: 0;
	z-index: 99999;
	overflow-y: scroll;
	overflow-x: hidden
}

.login-wrapper{
    position: absolute;
    top: 5%;
    left: 50%;
    width: 430px;
    margin-left: -215px;
	z-index: 99999;
	background: #fff
}

.modal>div {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 430px;
    margin-left: -215px;
	z-index: 99999;
	background: #fff
}

.modal2>div {
	width: 800px;
	margin: auto;
	margin-top: 20px;
	z-index: 99999;
	background: #fff
}

.login-wrapper>a,
.modal>div>a,
.modal2>div>a {
	position: absolute;
	right: -15px;
	top: -20px;
	color: #fff;
	font-family: Roboto;
	font-size: 14px
}

.login,
.modal>div,
.modal2>div {
	padding: 20px
}

.login h1,
.modal>div h1,
.modal2>div h1 {
	border-bottom: 1px solid #dbdbdb!important;
	padding-bottom: 10px!important;
	padding-top: 0!important;
	font-size: 21px!important;
	text-transform: uppercase!important;
	font-family: Roboto!important;
	font-weight: 700!important;
	width: initial;
	color: #000;
	display: block
}

.login .left a,
.login h3 {
	font-family: Roboto
}

.login form,
.modal>div {
	margin-top: 40px;
}

.modal2>div {
	margin-top: 40px;
	margin-bottom: 40px
}

.general form label,
.login label,
.modal label,
.modal2 label {
	color: #000;
	font-size: 13px;
	font-weight: 600;
	font-family: Roboto;
	text-transform: uppercase;
	margin-bottom: 7px
}

.general form label span,
.login label span,
.modal label span {
	color: red;
	font-size: 10px;
	padding-left: 5px;
	vertical-align: super
}

.general form input,
.general form select,
.general form textarea,
.login input,
.login select,
.modal input,
.modal select {
	border: 1px solid #dbdbdb;
	padding: 10px;
	font-size: 11px;
	width: 94%
}

.general form textarea {
	height: 75px;
	width: 98%
}

.general form .btn {
	width: auto
}

.general form>label,
.login form>label,
.modal form>label {
	color: #000;
	margin-top: 15px
}

.login select,
.modal select {
	width: 100%
}

.general form input,
.general form label,
.general form select,
.login input,
.login label,
.login select,
.modal input,
.modal label,
.modal select {
	display: block
}

.login .left,
.login .left span,
.login-recent>span {
	display: inline-block
}

.login .left {
	width: 300px;
	margin: 15px 0 0
}

.login .left input {
	width: initial;
	float: left
}

.login .left label,
.login .left span {
	color: #000;
	margin-left: 5px;
	font-weight: 400;
	text-transform: none;
	font-size: 11px
}

.login .right button,
.modal .right button {
	margin: 15px 0 0;
	padding: 5px 10px
}

.login .left label {
	color: #000;
	float: left
}

.login .left a {
	color: #0874be;
	font-weight: 800
}

.login .right button {
	height: initial;
	width: initial
}

.login h3 {
	color: #000;
	margin: 25px 0 0;
	font-size: 12px;
	text-transform: uppercase;
	border-bottom: 1px solid #dbdbdb;
	padding-bottom: 10px
}

.login-recent {
	margin: 5px
}

.login-recent>span {
	color: #000;
	font-size: 11px;
	margin-left: 10px
}

.register-container p {
	background: #88a4b6;
	border: 1px solid #207299;
	font-size: 11px;
	padding: 5px;
	margin-top: 13px
}

.register-container form {
	margin: 0
}

.register-container form>label {
	margin-top: 10px
}

.register-container .g-recaptcha {
	margin: 13px 0 0 40px
}

.register-container .btn.dark {
	margin-left: 10px
}

.playersonline span,
.slide button,
.slide h1 {
	text-transform: uppercase
}

.item-hover,
.slide p {
	text-shadow: 1px 1px 1px #000
}

.cw,
.cw-history,
.cw>div,
.event-list a {
	float: left
}

.cwlink:hover,
.item-day,
.rankings li,
.slide button:hover {
	cursor: pointer
}

.character .head a,
.column1 span,
.cw .cw-score,
.cw-hover a,
.event-list a,
.playersonline,
.slide .type,
.stats2 .column2 {
	text-align: center
}

.character h1::after,
.character h1:before,
.item-image::after,
.items h1:before,
.rankings h1:before,
.shop h1:before,
.slide h1::before,
.status::before {
	content: ""
}

.slider {
	margin-top: 87px;
	height: 351px;
	max-height: 388px
}

.slide h1,
.slide p {
	margin-top: 10px;
	color: #fff
}

.slide {
	width: 480px
}

.slide .type {
	color: #fff;
	font-size: 10px;
	height: 20px;
	width: 80px;
	display: block;
	line-height: 20px
}

.slide h1 {
	font-size: 37px;
	position: relative
}

.slide h1::before {
	/*
	background: url(/images/content/bubble.png.webp);
	width: 59px;
	height: 64px;
	display: block;
	position: absolute;
	right: 200px;
	top: -30px
	*/
}

.slide p {
	font-size: 13px;
	border-radius: 7px;
    background: #08080885;
    padding: 20px;
}

.slide button {
	margin-top: 20px;
	display: block;
	width: 190px;
	height: 40px;
	font-size: 11px;
	padding: 0 15px;
	border-radius: 7px
}

.slide button span {
	background: #044571;
	border-radius: 15px;
	display: inline-block;
	padding: 7px;
	margin-left: 15px
}

.playersonline {
	background: url(/images/content/sprite3.png.webp) -287px -921px no-repeat;
	width: 203px;
	height: 21px;
	margin: 0 auto
}

.playersonline span {
	font-family: 'Open Sans';
	font-size: 10px;
	color: #fff;
	line-height: 22px
}

.cwlog {
	width: 100%;
	height: 93px;
	border-top: 1px solid #00000000;
    /* border-bottom: 1px solid #161617; */
    background: rgb(0 0 0 / 85%);
}

.cws {
	margin-top: 30px;
	position: relative
}

.cw-hover,
.cws>a {
	position: absolute
}

.cws>div {
	height: 33px;
	overflow: hidden
}

.cws>a {
	width: 11px;
	height: 18px;
	display: block;
	margin-top: 9px;
	top: 0
}

.cws>a:first-child {
	background: url(/images/content/sprite3.png.webp) -433px -542px no-repeat
}

.cws>a:last-child {
	background: url(/images/content/sprite3.png.webp) -287px -640px no-repeat;
	right: 0
}

.cw {
	border-left: 1px solid #201f20;
	width: 260px;
	padding-left: 56px;
	color: #fff
}

.cw:first-child {
	border-left: none
}

.cw .cw-score {
	width: 60px;
	margin-top: 8px
}

.cwlink:hover {
	color: #2a92d8
}

.cw div:first-child span:first-child,
.cw div:last-child span:first-child {
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px
}

.cw div:first-child span:last-child,
.cw div:last-child span:last-child,
.cw-hover a {
	font-size: 9px;
	display: block
}

.cw-hover {
	margin-left: 65px;
	margin-top: -10px
}

.cw-hover a {
	border-radius: 10px;
	color: #fff;
	padding: 8px 13px;
	line-height: 10px;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase
}

.event-list a,
.item-day span,
.item-preview span,
.item-preview-long span {
	color: #000;
	font-family: Roboto;
	text-transform: uppercase
}

.cw-hover a:hover {
	color: #fff
}

.cw-hover a:first-child {
	background: #056cae;
	border-top: 1px solid #1f7bb7
}

.cw-hover a:last-child {
	background: #222;
	margin-top: 3px;
	border-top: 1px solid #333
}

.blog a:hover,
.cw-history a:hover,
.faq a:hover,
.itemshop a:hover,
.luckybox a:hover,
.vipshop a:hover {
	background-color: rgba(255, 255, 255, .1)
}

.blog a,
.cw-history a,
.faq a,
.itemshop a,
.luckybox a,
.vipshop a {
	display: block;
	transition: all .3s;
	-webkit-transition: all .3s
}

.cw-history {
	background: url(/images/content/sprite3.png.webp) -486px -559px no-repeat
}

.cw-history,
.cw-history a {
	height: 330px;
	width: 244px
}

.video {
	width: 475px;
	height: 220px;
	background: url(/images/content/trailer.png.webp)
}

.event {
	background: url(/images/content/sprite3.png.webp) -179px -141px no-repeat;
	height: 110px;
	width: 475px;
	color: #fff;
	position: relative
}

.event .info {
	padding-top: 15px;
	margin-left: 15px
}

.event h2,
.event h3 {
	text-transform: uppercase
}

.event h2 {
	font-size: 22px
}

.event h1 {
	font-size: 12px;
	font-weight: 400
}

.event p {
	font-size: 11px
}

.event .timer {
	position: absolute;
	right: 44px;
	top: 43px
}

.event .timer span {
	margin-left: 25px;
	font-size: 17px;
	font-weight: 800
}

.event .timer span.bigHours {
	margin-right: -4px
}

.event-list {
	position: absolute;
	bottom: 0
}

.event-list a {
	display: inline-block;
	font-size: 10px;
	padding: 4px 14px;
	max-width: 110px
}

.event-list a.type0 {
	background: rgba(100, 65, 165, .5);
	border-top: 1px solid rgba(116, 85, 175, .5)
}

.event-list a.type1 {
	background: #A9952D;
	border-top: 1px solid rgba(255, 229, 98, .15)
}

.event-list a.active,
.event-list a:hover {
	transition: all .3s;
	-webkit-transition: all .3s
}

.event-list a.type0.active,
.event-list a.type0:hover {
	background: #6441a5;
	border-top: 1px solid #7455af
}

.event-list a.type1.active,
.event-list a.type1:hover {
	background: #A9952D;
	border-top: 1px solid #96831a
}

.event-list a:last-child {
	padding-right: 17px
}

.blog {
	background: url(/images/content/sprite3.png.webp) -179px -252px no-repeat
}

.blog,
.blog a {
	height: 220px;
	width: 253px
}

.faq {
	background: url(/images/content/sprite3.png.webp) -179px -473px no-repeat
}

.faq,
.faq a {
	height: 110px;
	width: 253px
}

.home1 {
	margin-top: 25px
}

.character h1,
.items h1,
.rankings h1,
.shop h1 {
	padding-bottom: 5px;
	border-bottom: 5px solid #ffa200;
	text-transform: uppercase;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	width: 100%;
	display: inline
}

.items h1 {
	border-bottom: 5px solid #ffeb9c
}

.character h1,
.rankings h1 {
	border-bottom: 5px solid #0088da
}

.character h1:before,
.items h1:before,
.rankings h1:before,
.shop h1:before {
	display: block;
	position: absolute;
	width: 205px;
	height: 28px;
	border-bottom: 1px solid #dbdbdb;
	z-index: -1
}

.rankings h1:before {
	width: 375px
}

.rankings h1>span.selected {
	font-weight: 700
}

.rankings h1>span {
	font-weight: 400;
	cursor: pointer
}

.character h1:before {
	width: 572px
}

.character h1::after {
	display: block;
	/*background: url(/images/content/sprite3.png.webp) -491px -890px no-repeat;*/
	position: absolute;
	width: 247px;
	top: -24px;
	right: 0;
	height: 52px;
	z-index: 1111
}

.itemshop,
.luckybox,
.vipshop {
	margin-top: 15px
}

.itemshop {
	background: url(/images/content/sprite3.png.webp) -433px -252px no-repeat;
	margin-top: 23px
}

.itemshop,
.itemshop a {
	height: 94px;
	width: 312px
}

.luckybox {
	background: url(/images/content/sprite3.png.webp) -433px -442px no-repeat
}

.luckybox,
.luckybox a {
	height: 99px;
	width: 313px
}

.vipshop {
	background: url(/images/content/sprite3.png.webp) -433px -347px no-repeat
}

.vipshop,
.vipshop a {
	height: 94px;
	width: 313px
}

.blog a,
.cw-history a,
.faq a,
.shop.left>div a {
	display: block;
	position: relative;
	color: #fff;
	text-shadow: 1px 1px 1px #000
}

.blog a h3,
.cw-history a h3,
.faq a h3,
.shop.left>div a h3,
.blog a h1,
.cw-history a h1,
.faq a h1,
.shop.left>div a h1 {
	text-transform: uppercase;
	font-size: 18px;
	font-style: italic;
	padding: 10px 0 0 10px
}

.cw-history a h3,
.cw-history a h1 {
	padding-top: 120px
}

.blog a h3,
.blog a h1 {
	padding-top: 40px
}

.blog a p,
.cw-history a p,
.faq a p,
.shop.left>div a p {
	font-size: 10px;
	margin: 0 0 0 10px
}

.blog a p,
.cw-history a p {
	max-width: 230px
}

.blog a span:last-child,
.cw-history a span:last-child,
.faq a span,
.shop.left>div a span {
	position: absolute;
	bottom: 5px;
	background: #262626;
	border: 1px solid #1a1913;
	font-size: 8px;
	text-transform: uppercase;
	padding: 2px 6px;
	left: 8px
}

.column1,
.column2 {
	border-right: 1px solid #dadada
}

.blog a span:first-child,
.cw-history a span:first-child {
	position: absolute;
	top: 98px;
	left: 10px;
	padding: 1px 5px;
	font-size: 10px;
	background: red;
	color: #fff;
	text-transform: uppercase
}

.blog a span:first-child {
	background: #32cd32;
	top: 10px
}

.items.left {
	margin-left: 17px
}

.items.left>div {
	margin-top: 23px
}

.item-preview {
	background: url(/images/content/sprite3.png.webp) 0 -315px no-repeat;
	width: 178px;
	height: 314px;
	position: relative
}

.item-preview.preview2 {
	background: url(/images/content/sprite3.png.webp) no-repeat
}

.item-preview .item1,
.item-preview .item2 {
	height: 157px;
	position: relative
}

.item-day span,
.item-preview span,
.item-preview-long span {
	background: #ffa200;
	font-size: 9px;
	padding: 2px 4px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 999
}

.item-hover h3,
.item-hover p {
	padding-right: 5px;
	color: #fff;
	font-family: Roboto
}

.item-preview-long span {
	background: #ffd800
}

.item-day span {
	background: #00baff
}

.item-image {
	width: 178px;
	position: absolute;
	bottom: 30px
}

.item-image img {
	margin: 0 auto;
	display: block;
	max-height: 75px
}

.item-image::after {
	display: block;
	background: url(/images/content/sprite3.png.webp) -179px -584px no-repeat;
	width: 126px;
	height: 38px;
	z-index: 999;
	margin: -19px auto
}

.item-hover {
	position: absolute;
	top: 0;
	height: 157px;
	width: 178px;
	background: rgba(0, 0, 0, .7)
}

.item-hover h3 {
	font-size: 14px;
	margin: 45px 0 0 10px
}

.item-hover p {
	font-size: 10px;
	margin: 5px 0 20px 10px
}

.item-hover button {
	padding: 5px 12px;
	float: left;
	border-radius: 9px;
	color: #fff;
	font-size: 8px;
	margin-left: 4px;
	background: #ffa200;
	border-top: 1px solid #ffac1b;
	text-transform: uppercase;
	font-family: Roboto
}

.item-hover button:last-child {
	background: #222;
	border-top: 1px solid #2d2d2d;
	margin-left: 50px
}

.item-preview-long {
	background: url(/images/content/sprite3.png.webp) -306px -584px no-repeat;
	width: 179px;
	height: 314px;
	position: relative
}

.item-day .description,
.item-preview-long .description {
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .6);
	padding-top: 10px;
	z-index: 999;
	width: 100%;
	min-height: 60px
}

.item-day h3,
.item-preview-long h3 {
	color: #fff;
	font-size: 13px;
	margin: 0 0 0 10px;
	font-family: Roboto
}

.item-day p,
.item-preview-long p {
	color: rgba(255, 255, 255, .85);
	font-size: 9px;
	margin: 5px 5px 10px 10px
}

.item-preview-long .item-hover {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center
}

.item-day {
	background: url(/images/content/sprite3.png.webp) 0 -630px no-repeat;
	width: 286px;
	height: 314px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center
}

.item-day iframe {
	width: 285px;
	height: 311px
}

.item-day img {
	height: 250px
}

.item-day .item-hover {
	bottom: 25px;
	top: initial;
	height: initial;
	z-index: 9999;
	background: initial;
	width: 180px
}

.character,
.rankings {
	margin-top: 30px
}

.rankings ul {
	width: 375px;
	margin-top: 20px
}

.rankings li {
	background: #2f2f2f;
	border-top: 1px solid #454545;
	width: 375px;
	display: table;
	color: #fff;
	font-family: Roboto;
	font-size: 11px;
	padding: 10px 0
}

.rankings li:hover {
	background-image: -ms-linear-gradient(top, #0875C0 0, #005f90 100%);
	background-image: -moz-linear-gradient(top, #0875C0 0, #005f90 100%);
	background-image: -o-linear-gradient(top, #0875C0 0, #005f90 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0875C0), color-stop(100, #005f90));
	background-image: -webkit-linear-gradient(top, #0875C0 0, #005f90 100%);
	background-image: linear-gradient(to bottom, #0875C0 0, #005f90 100%);
	border-top: 1px solid #2f8bcb
}

.rankings li:first-child {
	border-top: none
}

.rankings li span:last-child {
	float: right;
	background: #141414;
	padding: 5px 10px;
	border-radius: 15px;
	margin: 8px 10px 0 0;
	font-size: 9px;
	text-transform: uppercase
}

.rankings li span:first-child {
	margin-left: 10px
}

.rankings li .name,
.rankings li img,
.rankings li span:first-child {
	float: left;
	line-height: 35px
}

.rankings li img {
	width: 37px;
	height: 37px;
	margin: 0 15px
}

.character {
	margin-left: 25px;
	position: relative
}

.character>div {
	margin-top: 20px
}

.character .head {
	background: url(/images/content/sprite3.png.webp) -179px 0 no-repeat;
	width: 572px;
	height: 140px;
	position: relative
}

.character .head>div {
	margin-top: 30px
}

.character .head img {
	width: 108px;
	height: 108px;
	margin: 15px
}

.character .head a {
	position: absolute;
	right: 0;
	top: 55px;
	height: 30px;
	width: 87px;
	padding: 0;
	line-height: 30px;
	border-radius: 0
}

.character .head>div>span:first-child,
.stats3 .name {
	color: #fff;
	font-family: Roboto;
	font-size: 16px;
	font-weight: 700
}

.character .head span:first-child>span {
	color: #fff;
	font-family: Roboto;
	font-size: 8px;
	font-weight: 400;
	text-transform: uppercase
}

.status::before {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 5px 0 10px
}

.online::before {
	background: #23da00
}

.offline::before {
	background: red
}

.status.hidden::before {
	background: #000
}

.character .rank {
	padding: 2px 4px;
	background: #141414;
	color: #fff;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 700;
	margin: 10px 0 0;
	display: inline-block
}

.admin {
	background: #CD0000!important
}

.gm {
	background: #4D4DA6!important
}

.et {
	background: purple!important
}

.dev {
	background: #66CD00!important
}

.vip {
	background: #DAA520!important
}

.banned {
	background: #7b7b7b!important;
	text-decoration: line-through
}

.character .head p {
	color: #9b9b9b;
	font-size: 10px;
	font-style: italic;
	margin: 10px 0 0
}

.stats1,
.stats2 {
	width: 215px
}

.column1 {
	width: 106px;
	height: 110px;
	border-left: 1px solid #e5e5e5;
	border-bottom: 1px solid #dadada;
	background: #e8e8e8;
	position: relative
}

.stats1 .column1:first-child,
.stats2 .column1:first-child {
	border-left: none;
	background: #e1e1e1
}

.column1 span {
	display: block
}

.column1 span:first-child {
	font-size: 25px;
	font-weight: 800;
	color: #4A4A4A;
	margin-top: 25px
}

.column1 span:last-child,
.column2>div span:last-child {
	font-size: 11px;
	color: #474747;
	font-weight: 800
}

.column2 {
	width: 214px;
	height: 96px;
	background: #e8e8e8;
	display: flex;
	justify-content: center;
	align-items: center
}

.column2>div span,
.stats3 span {
	display: block
}

.column2 img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
	float: left;
	margin: 0 0 0 15px
}

.column2>div {
	float: left;
	margin: 0 0 0 10px;
	width: 140px
}

.column2>div span:first-child {
	font-weight: 800;
	color: #5d5d5d;
	font-family: Roboto;
	font-size: 18px
}

.stats2 .column2>div {
	margin: 0;
	width: 215px
}

.stats3 {
	width: 142px;
	height: 207px;
	background: #141414
}

.stats3 img {
	width: 85px;
	height: 85px;
	margin: 20px 0 0 30px
}

.stats3 span {
	margin-left: 33px;
	margin-top: 3px;
	line-height: 13px
}

.stats3 .name {
	font-weight: 400;
	font-size: 17px;
	margin-top: 10px
}

.stats3 .text {
	color: #868686;
	font-size: 10px;
	font-weight: 800
}

.column1 .pts,
.stats3 .pts {
	font-size: 16px;
	font-weight: 600;
	margin-top: 12px;
	position: absolute;
	top: -15px;
	left: 30px
}

.column1 .pts.up,
.stats3 .pts.up {
	color: #215421
}

.column1 .pts.down,
.stats3 .pts.down {
	color: #813131
}

.column1 .pts.down::before,
.column1 .pts.up::before,
.stats3 .pts.down::before,
.stats3 .pts.up::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	display: inline-block;
	margin-right: 5px
}

.column1 .pts.up::before,
.stats3 .pts.up::before {
	border-bottom: 5px solid #45be49
}

.column1 .pts.down::before,
.stats3 .pts.down::before {
	border-top: 5px solid #be4545
}

.fpage .header {
	height: 207px
}

.fpage .header h1,
.fpage .header p {
	color: #fff;
	text-align: center
}

.fpage h1 {
	font-size: 30px;
	text-transform: uppercase;
	padding-top: 77px
}

.fpage p {
	color: #fff;
	font-size: 11px;
	margin-top: 10px
}

.fpage .playersonline {
	background: url(/images/content/pcount2.png.webp) no-repeat;
	width: 203px;
	height: 21px;
	margin-top: -21px
}

.fpage .navigation {
	width: 100%;
	background: #2a2a2a;
	height: 55px
}

.fpage .navigation .wrapper>ul>li {
	float: left;
	margin-right: 25px;
	height: 50px;
	line-height: 62px
}

.fpage .navigation .wrapper>ul>li a {
	color: #fff;
	font-family: 'Open Sans';
	font-size: 12px;
	font-weight: 700
}

.fpage .navigation .wrapper>ul>li a.btn {
	font-weight: 400;
	text-transform: uppercase
}

.fpage .navigation li.current {
	border-bottom: 5px solid #0874bf
}

.fpage .navigation .staff {
	height: 30px!important;
	padding: 0;
	float: right!important;
	margin-top: 13px;
	margin-right: 0!important;
	line-height: inherit!important;
	text-align: center;
	background: #4380ba;
	border: 0;
	border-top: 1px solid #4e87be;
	border-radius: 3px
}

.fpage .navigation .staff a {
	font-size: 11px;
	line-height: 30px
}

.text-head {
	background: #404040;
	width: 100%;
	padding: 20px 0
}

.text-head h2 {
	font-size: 17px
}

.text-content h2,
.text-content ol,
.text-content p,
.text-head h2,
.text-head p {
	padding: 0 20px
}

.text-content {
	margin: 20px 0
}

.text-content h2 {
	color: #fff;
	margin-bottom: 10px;
	font-size: 17px
}

.text-content p {
	color: #fff;
	padding: 0 40px
}

.text-content a {
	color: #056cae;
	font-weight: 700
}

.text-content ol,
.text-content ul {
	color: #fff;
	font-size: 12px;
	padding: 0 60px
}

.text-content ul li {
	list-style-type: circle;
	font-size: 11px
}

.faq-entry {
	position: relative;
	padding: 5px 0 0;
	margin: 0
}

.faq-entry h3 {
	background: #fff
}

.faq-entry h3,
.faq-entry p {
	font-size: 13px;
	padding: 15px 0;
	text-indent: 25px
}

.faq-entry p {
	background: url(/images/content/faq-arrow.png.webp) 50px 50% no-repeat #fafafa;
	margin-top: 5px;
	text-indent: 75px;
	position: relative;
	overflow: hidden;
	max-height: 800px;
	opacity: 1;
	transform: translate(0, 0);
	z-index: 2
}

.faq-entry i:after,
.faq-entry i:before,
.transition {
	transition: all .25s ease-in-out
}

.faq-entry h2 {
	display: block;
	background-color: #fefffa;
	margin: 0;
	cursor: pointer
}

.faq-entry i {
	background: url(/images/content/faq-button.png.webp);
	width: 22px;
	height: 22px;
	display: block;
	position: absolute;
	right: 10px;
	top: 15px
}

.faq-entry input[type=checkbox] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0
}

.faq-entry input[type=checkbox]:checked~p {
	margin-top: -30px;
	max-height: 0;
	opacity: 0;
	transform: translate(0, 50%);
	padding: 15px 0
}

@keyframes flipdown {
	0% {
		opacity: 0;
		transform-origin: top center;
		transform: rotateX(-90deg)
	}
	5% {
		opacity: 1
	}
	80% {
		transform: rotateX(8deg)
	}
	83% {
		transform: rotateX(6deg)
	}
	92% {
		transform: rotateX(-3deg)
	}
	100% {
		transform-origin: top center;
		transform: rotateX(0)
	}
}

.ticket tbody td,
.ticket thead th,
.ticket-view h3 {
	padding: 5px;
	font-family: 'Open Sans'
}

.general {
	margin-top: 20px
}

.general span.hint {
	color: #ff0000;
	font-size: 11px;
	margin-left: 5px
}

.general input[type=checkbox] {
	width: initial
}

.ticket,
.ticket-view {
	width: 100%;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin-top: 20px
}

.ticket a {
	color: #4c4c4c;
	font-weight: 700
}

.ticket thead,
.ticket-view h3 {
	background: #eaeced;
	color: #666
}

.ticket thead th,
.ticket-view h3 {
	text-align: left;
	font-size: 12px;
	border-bottom: 1px solid #909090
}

.ticket tbody {
	background: #fafafa
}

.ticket tbody tr {
	height: 40px
}

.ticket tbody tr:first-child {
	border-top: 1px solid #e0e0e0
}

.ticket tbody td {
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	color: #666;
	font-size: 12px
}

.ticket tbody td:last-child {
	border-right: none
}

.ticket tbody tr:last-child td {
	border-bottom: none
}

.ticket-view h3 {
	font-size: 12px;
	font-weight: 400;
	color: #636363
}

.ticket-view h3.staff {
	background: #056cae;
	color: #fff
}

.ticket-view h3 span {
	font-size: 11px;
	float: right
}

.ticket-view p {
	font-size: 13px;
	margin: 0;
	padding: 15px
}

.ticket .status0,
.ticket .status1,
.ticket .status2 {
	font-weight: 700
}

.ticket .status0 {
	color: green
}

.ticket .status1 {
	color: orange
}

.ticket .status2 {
	color: #000
}

.box p,
.topcontainer a,
.topcontainer button {
	text-transform: uppercase
}

.box.inactive::after,
.box::before,
.headcontainer::after {
	content: ""
}

body.lbpage .fpage {
	margin-top: 194px
}

.lbpage .fpage .header h1 {
	padding-top: 60px
}

.lbpage .fpage p {
	margin-top: 0
}

.lbpage .fpage .header h1,
.lbpage .fpage p {
	color: #e4e4e4;
	font-size: 12px;
	text-align: left
}

.lbpage .fpage .first.wrapper {
	width: 465px;
	position: relative
}

.lbpage .fpage .first.wrapper span {
	color: #da9000;
	text-transform: uppercase;
	font-size: 11px;
	position: absolute;
	right: 6px;
	border: 2px solid #da9000;
	padding: 6px 30px 6px 9px;
	top: 28px;
	font-weight: 700
}

.lbpage.gembox .fpage .first.wrapper span {
	color: #fff;
	border-color: #fff
}

#rewardBox,
#rewardBox2 {
	position: absolute;
	text-align: center;
	top: 565px;
	width: 400px;
	padding-bottom: 15px;
	z-index: 999
}

#rewardBox2 {
	top: 490px
}

#rewardBox2>img,
#rewardBox>img {
	margin-top: 68px;
	padding: 8px;
	background-color: rgba(0, 0, 0, .25);
	border-radius: 8px;
	max-height: 250px
}

#rewardBox .itemname,
#rewardBox2 .itemname {
	width: 100%;
	color: #fff;
	position: absolute;
	background: #2a2a2a;
	font-size: 14px;
	font-family: 'Open Sans';
	padding: 10px 0
}

.box,
.luckyboxes {
	position: relative
}

#rewardBox button,
#rewardBox2 button {
	display: block;
	margin: 15px auto 0
}

.topcontainer a, .topcontainer button {
	display: block;
	height: auto;
	float: left;
	width: auto;
	border-radius: 0
}

.topcontainer p {
	text-align: center;
	color: #aebece;
	width: 372px;
	margin: 15px auto 0;
	height: 30px;
	font-size: 13px;
	background-image: -ms-linear-gradient(top, #2A3443 0, #15242e 100%);
	background-image: -moz-linear-gradient(top, #2A3443 0, #15242e 100%);
	background-image: -o-linear-gradient(top, #2A3443 0, #15242e 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2A3443), color-stop(100, #15242e));
	background-image: -webkit-linear-gradient(top, #2A3443 0, #15242e 100%);
	background-image: linear-gradient(to bottom, #2A3443 0, #15242e 100%);
	border: 1px solid #26313f;
	line-height: 29px
}

.controls {
	height: 65px;
	display: table;
	margin: 30px auto 0
}

.controls .boxInfo,
.controls .boxType,
.controls .boxExchange {
	display: block;
	border: 1px solid #5da4d5;
	margin-right: 5px;
	cursor: pointer;
	float: left
}

.controls>div {
	float: left;
	margin-left: 13px
}

.controls span {
	font-family: Roboto;
	color: #9c9c9c;
	font-size: 12px
}

.controls .boxUnopened {
	display: block;
	float: left;
	border: 1px solid #5da4d5;
	padding: 5px;
	height: 21px;
	width: 100px;
	line-height: 23px;
	margin-left: 5px;
	color: #187dc3;
	text-align: center
}

.controls .boxType {
	background: url(/images/luckybox/box.png.webp) 50% 50% no-repeat #0773bc;
	background-size: 70% 70%;
	width: 1px;
	height: 1px;
	padding: 15px
}

.controls .boxExchange{
	background: url(/images/luckybox/GoldenTicket.png.webp) 50% 50% no-repeat #0773bc;
    background-size: 90% 90%;
    width: 30px;
    height: 1px;
    padding: 15px;
}

.controls .boxInfo {
	background: 50% 50% no-repeat #0773bc;
	background-size: 70% 70%;
	padding: 5px 12px 4px;
	color: #fff;
	font-size: 18px
}

#mainContainer .gembox,
#mainContainer .gembox h1,
.luckyboxes,
.luckyboxes form {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px
}

.lbrareinfo {
	color: #000!important
}

.luckyboxes {
	background: #1e1f21
}

.luckyboxes .lbaction,
.luckyboxes form {
	padding-top: 20px
}

.luckyboxes form {
	background-image: -ms-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -moz-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -o-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2A2C2E), color-stop(100, #222325));
	background-image: -webkit-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: linear-gradient(to bottom, #2A2C2E 0, #222325 100%);
	width: 100%;
	border-top: 1px solid #3d3f42;
	padding: 24px 0
}

.luckyboxes input,
.luckyboxes select {
	border: 1px solid #505050;
	color: #737373;
	background: #252628;
	font-size: 12px;
	padding: 9px;
	width: 113px
}

.luckyboxes input:first-child {
	margin-left: 25px
}

.luckyboxes select {
	padding: 8px
}

.luckyboxes button {
	height: auto;
	width: auto;
	padding: 9px 30px;
	border: 0;
	border-top: 1px solid #5eb5e8;
	background: #0089da;
	font-size: 11px;
	border-radius: 5px;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	margin-left: 10px
}

.luckyboxes .redeem {
	margin-left: 10px;
	padding: 9px 15px
}

.luckyboxes .gift {
	padding: 9px 20px
}

.luckyboxes .storage,
.showcase-list {
	background: #1e1f21;
	display: inline-block;
	padding: 5px;
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 830px;
	margin: 15px 15px 0 0
}

.lbcanvas,
div.lbcanvas img {
	display: block;
	margin: 0 auto
}

.luckyboxes .storage::-webkit-scrollbar,
.showcase-list::-webkit-scrollbar {
	width: 5px
}

.luckyboxes .storage::-webkit-scrollbar-track,
.showcase-list::-webkit-scrollbar-track {
	background: #1d1d1d
}

.luckyboxes .storage::-webkit-scrollbar-thumb,
.showcase-list::-webkit-scrollbar-thumb {
	background: #0080da
}

.lbaction span {
	color: #fff;
	font-size: 12px
}

.lbcanvas {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px
}

div.lbcanvas {
	width: 100%;
	height: 144px;
	background: #000
}

div.lbcanvas img {
	padding-top: 25px;
	width: 75px
}

.box {
	width: 171px;
	height: 154px;
	float: left;
	margin: 13px 0 0 14px;
	cursor: pointer
}

.box img,
.box p,
.box::before {
	position: absolute
}

.box::before {
	height: 100%;
	width: 100%;
	background: rgba(30, 31, 33, .5);
	z-index: 5
}

.box.selected {
    border: 2px solid #e5e5e5;
    border-radius: 15px;
    height: 150px;
    width: 167px;
}

.box.hover::before,
.box.selected::before {
	display: none
}

.box.inactive::after {
	width: 21px;
	height: 21px;
	background: url(/images/luckybox/plus.png.webp) no-repeat;
	display: block;
	position: absolute;
	z-index: 5;
	top: 5%;
	left: 83%;
}

.box p {
	padding: 2px;
	font-size: 10px!important;
	bottom: 13px;
	line-height: 13px;
	left: 15px;
	font-family: Roboto;
	font-weight: 700;
	color: #fff!important;
	text-shadow: 0 1px 6px #000;
	font-style: normal;
}

.pickBox a,
.pickBox h3,
.pickBox h4 {
	text-transform: uppercase;
	font-family: 'Open Sans'
}

.box p span {
	font-weight: 400;
	display: block;
	margin-top: 2px
}

.box.selected p {
	/*font-size: 9px !important;
	bottom: 0;
	line-height: 10px;*/
}

.box img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	top: 0;
	bottom: 25px;
	left: 0;
	right: 0;
	margin: auto
}

#scrollerContainer {
	position: relative
}

#scrollerContainer>div:first-child {
	color: #afafaf;
	font-size: 12px;
	position: absolute;
	right: 180px;
	top: 3px
}

#scrollerContainer>div:first-child input,
#scrollerContainer>div:first-child span {
	float: left
}

#scrollerContainer>div:first-child input {
	margin: 2px 10px 0 0
}

#scrollerContainer>span {
	text-align: center;
	color: #afafaf;
	font-size: 12px;
	display: block;
	margin-top: 15px
}

.headcontainer {
	background: #0f1720;
	color: #afafaf;
	padding: 20px;
	position: relative
}

.headcontainer h3 {
	color: #fff
}

.headcontainer::after {
	width: 96%;
	border-bottom: 1px solid #505050;
	height: 1px;
	position: absolute;
	margin-left: 2%;
	margin-top: 20px
}

.fallingBoxes {
	position: absolute;
	width: 100%;
	height: 526px;
	top: 0;
	overflow: hidden
}

.fallingBoxes>div {
	position: absolute;
	width: 100px;
	height: 100px;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-animation-direction: normal, normal;
	-webkit-animation-timing-function: linear, ease-in
}

.fallingBoxes>div>img {
	position: absolute;
	width: 75px;
	height: 75px;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-transform-origin: 50% -100%
}

.fallingBoxes .bottomBoxes {
	background: url(/images/luckybox/luckyboxes.png.webp);
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 120px;
	z-index: 5
}

@-webkit-keyframes fade {
	0%,
	95% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

@-webkit-keyframes drop {
	0% {
		-webkit-transform: translate(0, -50px)
	}
	100% {
		-webkit-transform: translate(0, 650px)
	}
}

@-webkit-keyframes clockwiseSpin {
	0% {
		-webkit-transform: rotate(-50deg)
	}
	100% {
		-webkit-transform: rotate(50deg)
	}
}

@-webkit-keyframes counterclockwiseSpinAndFlip {
	0% {
		-webkit-transform: scale(-1, 1) rotate(50deg)
	}
	100% {
		-webkit-transform: scale(-1, 1) rotate(-50deg)
	}
}

.giftNames>span {
	color: #000;
	display: block;
	font-size: 12px;
	line-height: 23px;
	cursor: pointer
}

.giftNames>span:hover {
	text-decoration: underline
}

.giftNames>span.selected {
	color: red
}

.pickBox {
	position: fixed;
	top: 0;
	left: 0;
	padding-top: 25px;
	z-index: 999;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .85)
}

.pickBox h3,
.pickBox h4 {
	color: #fff;
	font-size: 15px;
	text-align: center
}

.pickBox h3 {
	font-size: 27px
}

.pickBox h4 {
	margin-top: 5px
}

.pickBox p {
	text-align: center!important;
	margin-bottom: 10px
}

.pickBox span {
	color: #dadada;
	font-size: 10px
}

.pickBox img {
	margin-top: 15px
}

.pickBox a {
	background: rgba(0, 0, 0, .5);
	border-radius: 5px;
	color: transparent;
	font-size: 10px;
	padding: 6px 11px;
	font-weight: 700;
	position: absolute;
	left: 32%;
	bottom: 10px
}

.pickBox .box1,
.pickBox .box2,
.pickBox .box3,
.pickBox .box4,
.pickBox .box5,
.pickBox .box6,
.pickBox .box7,
.pickBox .box8,
.pickBox .box9,
.pickBox .box10 {
	border-radius: 5px;
	position: relative;
	margin-top: 12px;
	text-align: center
}

.pickBox .box1 {
	background-image: -ms-linear-gradient(right, #C0893A 0, #C07C0D 100%);
	background-image: -moz-linear-gradient(right, #C0893A 0, #C07C0D 100%);
	background-image: -o-linear-gradient(right, #C0893A 0, #C07C0D 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #C0893A), color-stop(100, #C07C0D));
	background-image: -webkit-linear-gradient(right, #C0893A 0, #C07C0D 100%);
	background-image: linear-gradient(to left, #C0893A 0, #C07C0D 100%);
	border-top: 1px solid #c48627
}

.pickBox .box1 a {
	color: #be8028
}

.pickBox .box2 {
	background-image: -ms-linear-gradient(right, #59bb4c 0, #2F9C29 100%);
	background-image: -moz-linear-gradient(right, #59bb4c 0, #2F9C29 100%);
	background-image: -o-linear-gradient(right, #59bb4c 0, #2F9C29 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #59bb4c), color-stop(100, #2F9C29));
	background-image: -webkit-linear-gradient(right, #59bb4c 0, #2F9C29 100%);
	background-image: linear-gradient(to left, #59bb4c 0, #2F9C29 100%);
	border-top: 1px solid #3aa849
}

.pickBox .box2 a {
	color: #2aad4c
}

.pickBox .box3 {
	background-image: -ms-linear-gradient(right, #a46164 0, #9B5053 100%);
	background-image: -moz-linear-gradient(right, #a46164 0, #9B5053 100%);
	background-image: -o-linear-gradient(right, #a46164 0, #9B5053 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #a46164), color-stop(100, #9B5053));
	background-image: -webkit-linear-gradient(right, #a46164 0, #9B5053 100%);
	background-image: linear-gradient(to left, #a46164 0, #9B5053 100%);
	border-top: 1px solid #a06769
}

.pickBox .box3 a {
	color: #8b4244
}

.pickBox .box4 {
	background-image: -ms-linear-gradient(right, #405ca8 0, #17487F 100%);
	background-image: -moz-linear-gradient(right, #405ca8 0, #17487F 100%);
	background-image: -o-linear-gradient(right, #405ca8 0, #17487F 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #405ca8), color-stop(100, #17487F));
	background-image: -webkit-linear-gradient(right, #405ca8 0, #17487F 100%);
	background-image: linear-gradient(to left, #405ca8 0, #17487F 100%);
	border-top: 1px solid #395380
}

.pickBox .box4 a {
	color: #004c90
}

.pickBox .box5 {
	background-image: -ms-linear-gradient(top, #B72000 0, #97001D 100%);
	background-image: -moz-linear-gradient(top, #B72000 0, #97001D 100%);
	background-image: -o-linear-gradient(top, #B72000 0, #97001D 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B72000), color-stop(100, #97001D));
	background-image: -webkit-linear-gradient(top, #B72000 0, #97001D 100%);
	background-image: linear-gradient(to bottom, #B72000 0, #97001D 100%);
	border-top: 1px solid #ca4000
}

.pickBox .box5 a {
	color: #ca4000
}

.pickBox .box6 {
    background: rgb(255,0,168);
    background: -moz-linear-gradient(313deg, rgba(255,0,168,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: -webkit-linear-gradient(313deg, rgba(255,0,168,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: linear-gradient(313deg, rgba(255,0,168,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00a8",endColorstr="#690000",GradientType=1);
    border-top: 1px solid #565656;
    margin-left: 85px;
}

.pickBox .box6 a {
	color: #ff78db
}

.pickBox .box7 {
    background: rgb(0,194,255);
    background: -moz-linear-gradient(313deg, rgba(0,194,255,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: -webkit-linear-gradient(313deg, rgba(0,194,255,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: linear-gradient(313deg, rgba(0,194,255,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00c2ff",endColorstr="#690000",GradientType=1);
	border-top: 1px solid #00c2ff;
}

.pickBox .box7 a {
	color: #00c2ff
}

.pickBox .box8 {
    background: rgb(0,255,171);
    background: -moz-linear-gradient(313deg, rgba(0,255,171,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: -webkit-linear-gradient(313deg, rgba(0,255,171,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: linear-gradient(313deg, rgba(0,255,171,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffab",endColorstr="#690000",GradientType=1);
	border-top: 1px solid #00ffab;
}

.pickBox .box8 a {
	color: #00ffab
}

.pickBox .box9 {
    background: rgb(232,255,0);
    background: -moz-linear-gradient(313deg, rgba(232,255,0,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: -webkit-linear-gradient(313deg, rgba(232,255,0,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    background: linear-gradient(313deg, rgba(232,255,0,1) 0%, rgba(40,40,40,1) 100%, rgba(105,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e8ff00",endColorstr="#690000",GradientType=1);
	border-top: 1px solid #e8ff00;
}

.pickBox .box9 a {
	color: #e8ff00
}

.pickBox .box10 {
	background: rgb(23, 67, 189);
	background: linear-gradient(135deg, red, blue);
	border-top: 1px solid #89a2ff;
}

.pickBox .box10 a {
	color: #567aff
}

.pickBox>div {
	width: 810px;
	margin: 0 auto
}

.pickBox>div>div {
	float: left;
	width: 150px;
	height: 284px;
	margin-left: 13px;
	cursor: pointer
}

.pickBox .box1 {
	margin-left: 0
}

#mainContainer .gembox {
	position: relative;
	background: #1e1f21
}

#mainContainer .gembox h1 {
	background: #3c3c3c;
	color: #fff;
	font-size: 13px;
	padding: 15px;
	text-transform: initial;
	background-image: -ms-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -moz-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -o-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2A2C2E), color-stop(100, #222325));
	background-image: -webkit-linear-gradient(top, #2A2C2E 0, #222325 100%);
	background-image: linear-gradient(to bottom, #2A2C2E 0, #222325 100%);
	border-top: 1px solid #3d3f42
}

#mainContainer .gembox h3 {
	color: #fff;
	font-size: 12px;
	padding: 7px;
	text-transform: initial;
	font-weight: normall
}

#mainContainer .gembox .geminfo {
	width: 320px;
	display: block;
	float: left
}

#mainContainer .gembox>div img,
#mainContainer .gembox>div span {
	float: left
}

#mainContainer .gembox>div img {
	max-height: 70px
}

#mainContainer .gembox>div span {
	display: inline-block;
	color: #e2e2e2;
	font-size: 11px;
	font-weight: 700;
	margin-top: 20px;
	width: 225px
}

#mainContainer .gembox>div span:last-child {
	font-weight: 400;
	margin-top: 0
}

.gmbox .fpage .header h1,
.gmbox .fpage p {
	font-size: 11px
}

.forms h4,
.fpage.account .navigation li a {
	font-family: Roboto, Verdana
}

.charslot.notHover::before,
.darker::before,
.right.profile a::before {
	content: ""
}

.account.clans .char,
.char,
.refund,
.side .referred a,
.side .transactions {
	cursor: pointer
}

.fpage.account .wrapper:last-child {
	position: relative
}

.fpage.account .navigation li a {
	color: #afafaf;
	font-size: 12px
}

.navigation .right {
	float: right!important
}

.right.notification a {
	background: url(/images/content/hasNoNotification.png.webp);
	width: 16px;
	height: 19px;
	display: block;
	margin-top: 21px
}

.right.notification a.hasNotifications {
	background: url(/images/content/hasNotification.png.webp)
}

.right.notification a span {
	font-size: 8px;
	background: #fff;
	padding: 1px 4px;
	border-radius: 50%;
	color: #000;
	position: absolute;
	margin: -5px 0 0 10px;
	line-height: initial
}

.account h3,
.forms h4 {
	font-weight: 400;
	color: #fff
}

.right.profile {
	margin-top: -5px;
	position: relative
}

.right.profile a {
	border-radius: 4px;
	font-size: 10px!important
}

.right.profile a::before {
	position: absolute;
	left: -13px;
	height: 21px;
	top: 24px;
	width: 0;
	border-left: 1px solid #434545;
	border-right: 1px solid #474949
}

.account.home {
	width: 662px;
	background: #1d1d1d;
	float: left;
	padding-bottom: 50px
}

.account.home .blocks {
	position: absolute;
	bottom: 0
}

.darker::before {
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	z-index: 1;
	display: block;
	position: absolute
}

.account h3 {
	width: 94%;
	padding: 25px 5px 12px;
	font-size: 13px;
	border-bottom: 1px solid #353636
}

.account .forms {
	margin: 15px 15px 15px 0
}

.forms img {
	height: 110px;
	width: 110px;
	float: left
}

.forms h4 {
	font-size: 15px;
	margin-bottom: 5px
}

.forms>div:last-child {
	margin: 0 0 0 20px;
	float: left
}

.forms .btn {
	height: initial;
	width: initial;
	font-size: 10px;
	padding: 5px 8px
}

.forms span {
	font-size: 11px;
	color: #bfbfbf;
	display: block;
	border-top: 1px solid #353636;
	margin-top: 10px;
	padding: 5px 0 6px
}

.forms .img {
	position: relative;
	float: left;
	width: 110px;
	height: 110px
}

.forms .img div {
	position: absolute;
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	text-align: center
}

.forms .img button {
	margin-top: 10px;
	text-transform: uppercase
}

.blocks h3 {
	padding: 0 0 10px;
	margin: 27px 0 10px 15px;
	width: 80%
}

.blocks>div {
	float: left;
	width: 50%
}

.blocks>div table {
	width: 331px;
	border-top: 1px solid #3a3a3b
}

.blocks>div table td {
	background-image: -ms-linear-gradient(top, #333334 0, #2E2E2F 100%);
	background-image: -moz-linear-gradient(top, #333334 0, #2E2E2F 100%);
	background-image: -o-linear-gradient(top, #333334 0, #2E2E2F 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333334), color-stop(100, #2E2E2F));
	background-image: -webkit-linear-gradient(top, #333334 0, #2E2E2F 100%);
	background-image: linear-gradient(to bottom, #333334 0, #2E2E2F 100%)
}

.blocks>div:last-child table td {
	background-image: -ms-linear-gradient(top, #353636 0, #313131 100%);
	background-image: -moz-linear-gradient(top, #353636 0, #313131 100%);
	background-image: -o-linear-gradient(top, #353636 0, #313131 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353636), color-stop(100, #313131));
	background-image: -webkit-linear-gradient(top, #353636 0, #313131 100%);
	background-image: linear-gradient(to bottom, #353636 0, #313131 100%)
}

.blocks table tr td {
	font-size: 10px;
	font-family: 'Open Sans';
	color: #fff;
	padding: 10px 15px
}

.blocks table tr td:last-child {
	text-align: right;
	color: #fff
}

.blocks>div:last-child table {
	background: #dcdcdc
}

.side {
	width: 310px;
	float: left
}

.side>div {
	width: 310px;
	display: block;
	background-image: -ms-linear-gradient(top, #323232 0, #2E2E2E 100%);
	background-image: -moz-linear-gradient(top, #323232 0, #2E2E2E 100%);
	background-image: -o-linear-gradient(top, #323232 0, #2E2E2E 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #323232), color-stop(100, #2E2E2E));
	background-image: -webkit-linear-gradient(top, #323232 0, #2E2E2E 100%);
	background-image: linear-gradient(to bottom, #323232 0, #2E2E2E 100%);
	padding: 28px 0;
	border-top: 1px solid #353535
}

.side h4 {
	font-family: Roboto;
	font-size: 14px;
	color: #fff;
	font-weight: 100
}

.account.tickets h4,
.side .referred a {
	font-family: 'Open Sans'
}

.side h4 span {
	color: #cbcbcb;
	font-size: 14px
}

.side .referred {
	position: relative;
	padding: 7px 0;
	text-align: center;
	min-height: 138px
}

.side .referred h4 {
	color: #c016ff;
	text-transform: uppercase;
	margin-top: -15px
}

.side .referred button,
.side .referred button:hover {
	background: #a729c4;
	border-top: 1px solid #cc7ae1;
	border-left: 1px solid #cc7ae1;
	width: initial;
	padding: 6px 10px;
	border-radius: 5px;
	margin-top: 10px
}

.side .referred>span:last-child {
	font-size: 9px
}

.side .referred .streamcount {
	margin-top: 8px;
	font-size: 11px!important
}

.side .referred div {
	position: absolute;
	display: block;
	height: 118px;
	width: 310px;
	background: rgba(0, 0, 0, .5)
}

.side .referred a,
.side .vipstatus a {
	display: inline-block;
	border-radius: 5px
}

.side .referred a {
	background: #424242;
	border-top: 1px solid #646464;
	padding: 5px 10px;
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
	opacity: .9;
	margin-top: 10px
}

.side .referred a:last-child {
	background: #a729c4;
	border-top: 1px solid #cc7ae1
}

.side .vipstatus h4 {
	color: #ffcc64;
	text-transform: uppercase;
	font-size: 14px
}

.side .vipstatus h4 span {
	text-transform: lowercase;
	font-weight: 400;
	font-size: 16px
}

.side .vipstatus a {
	padding: 5px 7px;
	color: #dedede;
	text-transform: uppercase;
	background: #454545;
	font-size: 9px;
	margin-right: 5px;
	border-top: 1px solid #646464;
	border-left: 1px solid #646464
}

.side .vipstatus a:last-child {
	background: initial;
	background-image: -ms-linear-gradient(top, #DAD000 0, #daad00 100%);
	background-image: -moz-linear-gradient(top, #DAD000 0, #daad00 100%);
	background-image: -o-linear-gradient(top, #DAD000 0, #daad00 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DAD000), color-stop(100, #daad00));
	background-image: -webkit-linear-gradient(top, #DAD000 0, #daad00 100%);
	background-image: linear-gradient(to bottom, #DAD000 0, #daad00 100%);
	color: #fff;
	border-top: 1px solid #e8e35e;
	border-left: 1px solid #e8e35e;
	margin-right: 0;
	margin-left: 5px
}

.side .vipstatus>span {
	margin-top: 5px
}

.side .transactions img,
.side .vipstatus img {
	float: left;
	margin: 10px 20px 0 30px
}

.side .transactions img {
	margin: 5px 20px 0 30px
}

.side>div>span {
	color: rgba(193, 193, 193, .8);
	font-size: 10px;
	display: block
}

.account.tickets {
	background: url(/images/account/tickets.png.webp);
	width: 972px;
	height: 142px;
	position: relative;
	float: left;
	margin-top: -1px
}

.account.tickets h4 {
	color: #fff;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 100;
	position: absolute;
	top: 65px;
	left: 80px
}

.avatar-upload p,
.avatars-premade p {
	color: #656565;
	text-transform: uppercase
}

.avatar-upload p,
.avatars-premade p,
.notifications li span {
	font-family: Roboto
}

.account.tickets a {
	height: initial;
	width: initial;
	display: table;
	position: absolute;
	top: 58px;
	left: 766px
}

.avatar-upload p {
	float: left;
	width: 200px;
	text-align: center;
	font-size: 9px;
	margin-top: 15px
}

.avatar-upload form,
.avatar-upload>div {
	float: left
}

.avatar-upload img {
	height: 75px;
	width: 75px;
	margin-top: 15px
}

.avatar-upload button {
	margin: 36px 0 0 15px
}

.avatar-upload input[type=file] {
	font-size: 11px
}

.avatars-premade {
	margin-top: -2px
}

.avatars-premade>div:first-child {
	width: 340px;
	float: left
}

.avatars-premade img {
	width: 54px;
	height: 54px;
	margin: 2px 0 0 2px;
	cursor: pointer
}

.avatars-premade img.active,
.avatars-premade img:hover {
	width: 50px;
	height: 50px;
	border: 2px solid #0a87de
}

.avatars-premade>div:last-child {
	width: 140px;
	text-align: center;
	margin: 30px 0 0 15px;
	float: left
}

.avatars-premade p {
	font-size: 9px
}

.notifications {
	position: absolute;
	top: 0;
	right: 0;
	width: 310px;
	background: #fff;
	padding-bottom: 10px;
	max-height: 328px;
	overflow-y: scroll;
	z-index: 5
}

.notifications::-webkit-scrollbar {
	width: 5px
}

.notifications::-webkit-scrollbar-track {
	background: #fff
}

.notifications::-webkit-scrollbar-thumb {
	background: #c8c8c8
}

.notifications>span {
	font-size: 14px;
	margin: 15px;
	display: block
}

.notifications li {
	width: 94%;
	margin: 0 0 0 10px;
	padding: 10px 0;
	display: inline-block;
	border-bottom: 1px solid #f4f4f4
}

.notifications li img,
.notifications li span {
	float: left
}

.notifications li img {
	height: 20px;
	width: 20px;
	border-radius: 50%
}

.account.clans .clanbg1,
.account.clans .clanbg2,
.account.clans .clanbg9,
.charbg0,
.charbg1,
.charbg2,
.charbg3,
.charbg4,
.charbg5 {
	width: 972px;
	height: 70px
}

.notifications li span {
	font-size: 10px;
	color: #646364;
	margin: 3px 0 0 7px;
	max-width: 225px
}

.notifications li span:last-child {
	float: left;
    color: #c3c1c4;
    margin-left: 28px;
    clear: left;
}

.char {
	background: url(/images/account/charbg.png.webp) no-repeat;
	border-top: 1px solid #343434
}

.account.clans .char {
	background: url(/images/account/clanbg.png.webp) no-repeat;
	border-top: none
}

.account.clans .emojislot .char {
	background-image: url(/images/account/charbg.png.webp) !important;
	background-repeat: no-repeat;
	border-top: 1px solid #343434  !important;
}

.charbg0,
.charbg1,
.charbg5 {
	background-position: 0 0 !important;
}

.charbg2 {
	background-position: 0 -71px !important;
}

.charbg3 {
	background-position: 0 -142px !important;
}

.charbg4 {
	background-position: 0 -213px !important;
}

.account.clans .clanbg1 {
	background-position: 0 0
}

.account.clans .clanbg2 {
	background-position: 0 -71px
}

.account.clans .clanbg9 {
	background-position: 0 -142px
}

.char ul {
	width: 309px
}

.char ul,
.char ul li,
.charhover li {
	float: left
}

.char>ul {
	height: 70px
}

.char ul:first-child {
	width: 662px
}

.account.clans .char ul:first-child {
	width: 972px
}

.charslot:nth-child(odd) .char ul:last-child {
	background: #303030
}

.account.clans .charslot:nth-child(odd) .char ul:last-child {
	background: 0 0
}

/*
.charslot:nth-child(even) .char ul:last-child {
	background: #1c1c1c
}
*/

.char li,
.charhover li a {
	color: #d1d1d1;
	font-size: 12px;
	font-family: 'Open Sans';
	margin-top: 25px
}

.char ul:first-child li {
	width: 100px;
	margin-left: 25px
}

.account.clans .char ul:first-child li {
	width: 128px
}

.account.clans .char ul:last-child li:nth-child(2) {
	width: 100px
}

.account.clans .char ul:last-child li:nth-child(3) {
	width: 225px
}

.char ul:first-child li:first-child {
	width: 130px
}

.account.clans .char ul:first-child li:first-child {
	width: 50px
}

.char ul:last-child li {
	margin-left: 10px
}

.char ul:last-child li:last-child {
	float: right;
	margin-right: 25px
}

.account.clans .char ul:last-child li:last-child {
	float: inherit;
	margin-right: inherit
}

.char ul:last-child li:first-child {
	margin-left: 25px
}

.char li img {
	width: 35px;
	height: 35px;
	margin-top: -6px
}

.account.clans .charhover a.btn {
	color: #fff;
	text-transform: uppercase;
	padding: 4px 8px;
	font-size: 9px;
	background: #056cae;
	border-radius: 3px
}

.charslot.notHover::before {
	position: absolute;
	width: 972px;
	height: 70px;
	background: rgba(0, 0, 0, .5)
}

.charhover {
	background: url(/images/account/charhover.png.webp);
	width: 972px;
	height: 40px;
	clear: both
}

.charhover li {
	width: 140px;
	height: 40px;
	border-left: 1px solid #2e2e2e;
	text-align: center;
	float: right;
	line-height: 39px
}

.charhover>span {
	float: left;
	font-size: 8px;
	color: #599ece;
	margin: 16px 0 0 25px;
	letter-spacing: 2px;
	text-transform: uppercase
}

.charhover>span>span {
	color: #828282
}

.showcase-list.purchases {
	max-height: none
}

.purchases .pagination .btn {
	margin-left: 0;
	padding: 12px;
	height: initial!important;
	width: initial!important
}

.purchases .pagination span {
	color: #fff;
	font-size: 13px;
	margin: 0 10px
}

.purchases ul {
	margin: 10px 0
}

.purchases li {
	padding: 10px;
	color: #cacaca;
	font-size: 13px
}

.purchases li:nth-child(odd) {
	background: #3e414a
}

.purchases li:nth-child(even) {
	background: #2d2e33
}

.purchases li span {
	margin-left: 10px
}

.purchases li span:first-child {
	margin-left: 0
}

.purchase-span {
	float: initial;
	color: #fff
}

.refund {
	color: red
}

.banner,
.banner_btn {
	position: absolute;
	top: 0
}

.comment a,
.comment p {
	text-shadow: 0 0 0 #696969
}

.achievements,
.charinfo .clan,
.comment .name,
.ffinder li,
.friends .name {
	cursor: pointer
}

.achieve-list .left::before,
.ffinder li.inactive::before,
.mitem.inactive::before,
.stats1 .pts.down::before,
.stats1 .pts.up::before,
.stats::before {
	content: ""
}

.banner_btn {
	width: 100%;
	height: 517px
}

.banner_btn.hover {
	background: rgba(0, 0, 0, .7)
}

.banner_btn button {
	margin: 275px auto 0;
	display: block;
	width: initial;
	height: initial
}

.stats,
.stats::before {
	height: 75px;
	width: 100%
}

.banner {
	max-height: 525px;
	max-width: 100%;
	overflow: hidden
}

.stats {
	position: relative;
	z-index: 1;
	margin-top: 315px;
	border-top: 1px solid rgba(255, 255, 255, .15)
}

.stats::before {
	z-index: -1;
	position: absolute;
	background: rgba(255, 255, 255, .1)
}

.stats .info,
.stats .info2 {
	width: 972px;
	margin: 0 auto;
	color: #fff;
	position: relative
}

.stats .info img,
.stats .info li,
.stats .info>div {
	float: left
}

.stats .info>div:last-child {
	float: right
}

.stats .info img {
	margin-top: -50px;
	border-radius: 5px;
	height: 183px;
	width: 183px;
	background: #fff;
	border: 1px solid #d8d8d8
}

.stats .info li {
	margin: 10px 25px 0 0;
	text-align: center;
	font: 700 23px 'Open Sans'
}

.stats .info li>span {
	display: block;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 400
}

.stats .info li:last-child {
	margin-right: 0
}

.stats .name {
	margin-left: 20px
}

.stats .name>span:first-child {
	font-size: 23px;
	display: block;
	margin-top: 21px;
	font-weight: Bold;
	font-family: 'Open Sans'
}

.stats .name>span:last-child {
	font-size: 10px;
	font-family: 'Open Sans'
}

.stats .badge {
	display: block;
	width: 21px;
	height: 19px;
	float: right;
	margin-left: 5px
}

.stats .badge.verified {
	background: url(/images/character/verified.png.webp);
	background-size: contain;
	width: 21px;
	height: 21px
}

.stats .badge.ban {
	background: url(/images/character/banned.png.webp)
}

.stats .badge.streamer {
	background: url(/images/character/streamer.png.webp) no-repeat;
	background-size: contain;
	width: 22px;
	height: 22px
}

.stats .badge span {
	position: absolute;
	top: -10px;
	font-size: 10px;
	background: rgba(0, 0, 0, .8);
	border-radius: 5px;
	padding: 5px 8px
}

.exp,
.exp>div {
	position: relative
}

.exp {
	width: 100%;
	height: 75px;
	background: #31343b
}

.exp>div {
	width: 972px;
	margin: 0 auto;
	padding-left: 405px
}

.xpbar {
	width: 250px;
	height: 5px;
	background: #3e424a;
	margin-top: 10px
}

.xpbar>span {
	background: #50a0dd;
	background: linear-gradient(90deg, rgba(0,107,189,1) 0%, rgba(0,198,255,1) 100%);
	height: 5px;
	display: block
}

.exp .current {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin-top: 10px;
	display: inline-block
}

.exp .current>span,
.xpleft {
	font-size: 9px;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase
}

.achievements {
	position: absolute;
	top: 80px;
	right: 0
}

.achievements>p {
	color: #4c4c4c;
	font-size: 10px
}

.achievements>span {
	color: #fff;
	font-weight: 700;
	font-size: 15px
}

.achievements ul {
	margin-top: 5px
}

.achievements li {
	float: left;
	height: 38px;
	width: 36px;
	background: url(/images/character/achievements-s.png.webp);
	margin-left: 8px
}

.achievements li:first-child {
	margin-left: 0
}

.achievements li .a-hover {
	background: #000;
	font-size: 10px;
	font-family: Roboto;
	padding: 5px;
	position: absolute;
	top: 0;
	border-radius: 2px;
	display: table
}

.achievements li .a-text {
	color: #fff;
	font-size: 8px;
	font-family: Arial;
	text-align: center;
	display: block;
	margin-top: 25px
}

.comment a,
.commentarea textarea {
	font-family: 'Open Sans'
}

.achievements li.type1 {
	background-position: 0 0
}

.achievements li.type2 {
	background-position: -44px 0
}

.achievements li.type3 {
	background-position: -89px 0
}

.achievements li.type4 {
	background-position: -176px 0
}

.achieve-list {
	background: #313439;
	border-radius: 5px;
	padding: 15px;
	max-height: 490px;
	overflow-y: scroll
}

.achieve-list li {
	float: left;
	width: 235px;
	height: 235px;
	border-radius: 5px;
	position: relative;
	margin: 0 0 10px 10px
}

.achieve-list li img {
	display: block;
	margin: 25px auto 0
}

.achieve-list .type1 div {
	background: #2e60ab
}

.achieve-list .type1 {
	background: #36547a
}

.achieve-list .type2 div {
	background: #aaab2e
}

.achieve-list .type2 {
	background: #75763b
}

.achieve-list .type3 div {
	background: #ab2e2e
}

.achieve-list .type3 {
	background: #75383b
}

.achieve-list .type4 div {
	background: #2e60ab
}

.achieve-list .type4 {
	background: #36547a
}

.achieve-list .left::before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .7);
	display: block;
	z-index: 5
}

.achieve-list div {
	height: 57px;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px
}

.achieve-list span {
	color: #fff;
	font-weight: 700;
	display: block;
	text-align: center;
	margin-top: 15px
}

.ffinder .name,
.ffinder .title,
.friends .name,
.friends .title {
	display: inline-block
}

.charinfo {
	margin-top: 30px
}

.charinfo .left {
	width: 697px
}

.charinfo .left>div,
.charinfo .right>div {
	margin-bottom: 15px
}

.charinfo .right {
	width: 259px
}

.characters,
.comments,
.friends {
	background: #282b31;
	position: relative
}

.characters h3,
.charstats h3,
.clan h3,
.comments h3,
.friends h3,
.lineup h3,
.matches h3,
.media h3,
.showcase h3,
.stream h3 {
	font-size: 14px;
	font-weight: 700;
	display: inline-block;
	padding-bottom: 8px
}

.characters h3 span,
.charstats h3 span,
.comments h3 span,
.friends h3 span,
.lineup h3 span,
.matches h3 span,
.media h3 span,
.showcase h3 span {
	font-weight: 400
}

.friends>p {
	padding: 15px;
	font-size: 12px;
	color: #fff
}

.friends>ul {
	max-height: 375px;
	overflow-y: scroll
}

.achieve-list::-webkit-scrollbar,
.ffinder>ul::-webkit-scrollbar,
.friends>ul::-webkit-scrollbar {
	width: 5px
}

.achieve-list::-webkit-scrollbar-thumb,
.friends>ul::-webkit-scrollbar-thumb {
	background: #c8c8c8
}

.friends>ul li {
	padding: 0 0 0 15px;
	height: 70px
}

.friends>ul li:nth-child(even) {
	background: #292c32
}

.comment img,
.commentarea img,
.ffinder img,
.friends img {
	float: left;
	border-radius: 50%;
	height: 45px;
	width: 45px;
	margin-left: 5px
}

.ffinder img,
.friends img {
	margin: 12px 0 0
}

.comment .name,
.ffinder .name,
.friends .name {
	font-weight: 700;
	font-size: 13px;
	margin-top: 5px
}

.friends .name {
	color: #d6d6d6;
	margin: 15px 0 0 15px;
	width: 165px;
	overflow-x: hidden
}

.friends .title {
	color: #a9b2b9
}

.comment .date,
.ffinder .title,
.friends .title {
	font-size: 10px
}

.ffinder .status,
.friends .status {
	font-size: 8px;
	text-transform: uppercase
}

.friends .status {
	color: #a9b2b9;
	margin: 0 0 0 5px
}

.ffinder .status {
	color: #afafaf
}

.comments {
	padding-bottom: 20px
}

.comments ul {
	padding: 10px
}

.comment {
	width: 100%;
	float: left;
	margin-top: 15px
}

.comment img,
.comment>div {
	float: left
}

.comment .date {
	color: #a9b2b9;
	margin-left: 5px
}

.comment>div {
	margin-left: 10px;
	width: 85%
}

.comment p {
	font-size: 12px;
	color: #9aa1ad;
	margin: 4px 0;
	word-wrap: break-word
}

.comment a {
	color: #919da6;
	font-size: 12px
}

.comment .childs {
	color: #50a0dd;
	display: block;
	margin-top: 3px
}

.comment>div ul {
	padding: 0
}

.comments>p {
	font-size: 12px;
	margin: 15px;
	color: #fff
}

.comment .name {
	color: #d6d6d6
}

.commentarea select,
.commentarea textarea {
	background: #272a2f;
	font-size: 12px;
	color: #9aa1ad
}

.commentarea {
	width: 100%;
	margin: 10px 0
}

.commentarea textarea {
	border: 1px solid #464a53;
	width: 80%;
	border-radius: 3px;
	height: 40px;
	margin: 3px 0 0 10px;
	padding: 3px 10px
}

.commentarea select {
	float: left;
	margin-left: 60px;
	border: 1px solid #464a53;
	padding: 2px 5px
}

.guide span,
.modal.stream-s form {
	border-radius: 5px;
	display: inline-block
}

.comments.m-view h3,
.friend-s form,
.guide h3,
.guide>div {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px
}

.commentarea button {
	float: left;
	margin-left: 10px;
	height: initial;
	width: initial;
	padding: 3px 5px;
	font-size: 10px
}

.commentarea button.dark {
	margin-left: 10px
}

.comments>.commentarea {
	border-top: 1px solid #464a53;
	padding-top: 15px;
	margin: 10px;
	width: 96%
}

.commentarea .form-error {
	margin-left: 15px
}

.stream {
	background: #23262b
}

.characters h3,
.charstats h3,
.clan h3,
.comments h3,
.friends h3,
.lineup h3,
.matches h3,
.media h3,
.showcase h3,
.stream h3 {
	color: #fff;
	background: #23262b;
	width: 100%;
	padding: 10px 0;
	margin: 0;
	text-indent: 15px;
	border-bottom: 1px solid #3b3e43;
	position: relative
}

.characters h3 a,
.charstats h3 a,
.comments h3 a,
.friends h3 a,
.lineup h3 a,
.media h3 a,
.showcase h3 a,
.stream h3 a {
	display: block;
	width: 15px;
	height: 15px;
	background: url(/images/content/gear.png.webp);
	position: absolute;
	top: 13px;
	right: 13px
}

.stream iframe {
	height: 380px;
	width: 100%
}

.stream>div {
	background: #282b31;
	padding: 15px
}

.showcase p,
.stream p {
	color: #f0f0f0;
	font-size: 12px
}

.modal .twitch,
.modal .youtube {
	background: url(/images/character/youtube.png.webp);
	width: 393px;
	height: 249px;
	display: block;
	float: left;
	position: relative
}

.modal .twitch {
	background: url(/images/character/twitch.png.webp);
	margin-left: 4px
}

.manage-media.active::before,
.modal .twitch.active::before,
.modal .youtube.active::before,
.reply-file.active::before,
.screenshot-file.active::before,
.upload-media.active::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 0, 0, .6);
	z-index: 5
}

.modal.friend-s>div,
.modal.stream-s>div {
	width: 790px;
	background: 0 0;
	margin-left: -385px
}

.modal.stream-s form {
	background: #fff;
	width: 100%;
	margin: 10px 0;
	height: 85px
}

.modal.stream-s input[type=text] {
	width: 63%;
	margin: 25px 0 25px 30px;
	float: left
}

.modal.stream-s input[type=checkbox] {
	float: left;
	width: 15px;
	margin: 35px 0 0 10px
}

.modal.stream-s button {
	margin: 25px 10px;
	background: #0088da;
	padding: 15px 20px;
	font-size: 11px;
	float: left
}

.modal.stream-s .form-error {
	position: absolute;
	left: 50px;
	margin-top: 3px
}

.modal.stream-s label {
	float: left;
	font-size: 11px;
	margin: 35px 0 0 5px
}

.guide>div {
	background: #313439;
	margin-top: 10px
}

.comments.m-view h3,
.guide h3 {
	background: #3d4149;
	color: #f0f0f0;
	padding: 15px 20px
}

.guide p,
.guide span {
	color: #a6a8ad;
	font-size: 12px;
	padding: 10px 10px 10px 20px;
	text-shadow: 0 0 0 #767d8a
}

.guide span {
	background: #272a2f;
	margin: 0 17px;
	font-size: 11px;
	padding: 10px 15px;
	color: #dbdbdb;
	text-shadow: none
}

.guide a {
	color: red
}

.ffinder,
.showcase-list {
	background: #313439;
	padding: 10px
}

.ffinder ul {
	display: inline-block;
	margin: 15px 0 0 15px;
	max-height: 320px;
	overflow-y: scroll
}

.ffinder ul::-webkit-scrollbar-thumb {
	background: #0080da
}

.ffinder li {
	float: left;
	height: 92px;
	background: #232425;
	border-top: 1px solid #2a2b2c;
	width: 241px;
	margin: 0 9px 15px 0;
	position: relative
}

.ffinder li.inactive::before {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .4)
}

.ffinder img {
	margin: 24px 0 0 13px
}

.ffinder .name,
.ffinder .title {
	color: #c2c9d7
}

.ffinder .name {
	margin: 35px 0 0 10px
}

.ffinder .title {
	display: block;
	margin: 2px 0 0 69px;
	font-size: 8px
}

.friend-s form {
	background: #3d4149;
	border-top: 1px solid #51555c;
	padding: 20px
}

.friend-s input[type=text] {
	background: #3d4149;
	border: 1px solid #595b5f;
	width: 32%;
	float: left;
	color: #dbdbdb
}

.friend-s button {
	margin: 2px;
	padding: 14px
}

.charinfo .characters>ul li {
	background: url(/images/character/charlist.png.webp);
	width: 259px;
	height: 60px;
	border-bottom: 1px solid #434548
}

.charinfo .characters>ul li:last-child {
	border-bottom: none
}

.charinfo .characters>ul li:nth-child(odd) {
	background-position: 0 60px
}

.charinfo .characters li>span {
	color: #fff;
	font-size: 11px;
	margin: 20px 0 0 10px;
	display: inline-block;
	cursor: pointer
}

.charinfo .characters li>span:nth-child(2) {
	float: right;
	margin-right: 10px
}

.charinfo .characters li span>span {
	color: #888
}

.charinfo .clan p {
	color: #f0f0f0;
	font-size: 12px;
	background: #282b31;
	padding: 15px
}

.clan .clanimage {
	background: #292d33;
	text-align: center;
	padding-bottom: 15px
}

.clanimage img {
	border-radius: 50%;
	height: 115px;
	width: 115px;
	margin-top: 15px
}

.clanimage span {
	color: #fff;
	font-size: 14px;
	display: block;
	margin-top: 15px;
	font-weight: 700
}

.clanstats>div,
.cstats li,
.itemstats li {
	width: 87px;
	height: 85px;
	background: #31343b;
	border-top: 1px solid #52575e;
	float: left;
	text-align: center
}

.clanstats>div>span,
.cstats li>span,
.itemstats li>span {
	color: #e8e8e8;
	font-size: 18px;
	font-family: Roboto;
	font-weight: 700;
	margin-top: 20px;
	display: inline-block
}

.block-s li,
.media-type li {
	font-family: 'Open Sans';
	cursor: pointer
}

.clanstats>div:last-child {
	width: 85px
}

.clanstats>div>span>span,
.cstats li>span>span,
.itemstats li>span>span {
	font-size: 9px;
	color: #adadad;
	font-weight: 400;
	display: block
}

.clanstats>div:nth-child(2) {
	background: #41464e
}

.showcase-list {
	margin: 0;
	max-height: 500px;
	width: 770px
}

.showcase-list .box p {
	bottom: 10px
}

.showcase-list>p {
	color: #fff;
	font-size: 13px;
	width: 765px
}

.showcase-span {
	color: #fff;
	font-size: 14px;
	float: left;
	font-weight: 700
}

.media>div,
.showcase>div {
	background: #282b31
}

.showcase ul {
	display: inline-block;
	padding-bottom: 10px
}

.showcase p {
	padding: 15px
}

.showcase li {
	float: left;
	width: 121px;
	height: 107px;
	margin: 12px 0 0 10px;
	position: relative
}

.showcase li.rare {
	background-image: -ms-linear-gradient(right, #464B2E 0, #3b3a29 100%);
	background-image: -moz-linear-gradient(right, #464B2E 0, #3b3a29 100%);
	background-image: -o-linear-gradient(right, #464B2E 0, #3b3a29 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #464B2E), color-stop(100, #3b3a29));
	background-image: -webkit-linear-gradient(right, #464B2E 0, #3b3a29 100%);
	background-image: linear-gradient(to left, #464B2E 0, #3b3a29 100%);
	border: 3px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #9ea838 0, #766c26 100%);
	-webkit-border-image: -webkit-linear-gradient(top right, #9ea838 0, #766c26 100%);
	border-image: linear-gradient(to bottom left, #9ea838 0, #766c26 100%);
	border-image-slice: 1
}

.showcase li.covert {
	background-image: -ms-linear-gradient(right, #492B2E 0, #3b2629 100%);
	background-image: -moz-linear-gradient(right, #492B2E 0, #3b2629 100%);
	background-image: -o-linear-gradient(right, #492B2E 0, #3b2629 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #492B2E), color-stop(100, #3b2629));
	background-image: -webkit-linear-gradient(right, #492B2E 0, #3b2629 100%);
	background-image: linear-gradient(to left, #492B2E 0, #3b2629 100%);
	border: 3px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #ab3838 0, #762626 100%);
	-webkit-border-image: -webkit-linear-gradient(top right, #ab3838 0, #762626 100%);
	border-image: linear-gradient(to bottom left, #ab3838 0, #762626 100%);
	border-image-slice: 1
}

.showcase li.restricted {
	background-image: -ms-linear-gradient(right, #392B4F 0, #332640 100%);
	background-image: -moz-linear-gradient(right, #392B4F 0, #332640 100%);
	background-image: -o-linear-gradient(right, #392B4F 0, #332640 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #392B4F), color-stop(100, #332640));
	background-image: -webkit-linear-gradient(right, #392B4F 0, #332640 100%);
	background-image: linear-gradient(to left, #392B4F 0, #332640 100%);
	border: 3px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #7138ab 0, #5b2676 100%);
	-webkit-border-image: -webkit-linear-gradient(top right, #7138ab 0, #5b2676 100%);
	border-image: linear-gradient(to bottom left, #7138ab 0, #5b2676 100%);
	border-image-slice: 1
}

.showcase li.milspec {
	background-image: -ms-linear-gradient(right, #28324E 0, #242A3F 100%);
	background-image: -moz-linear-gradient(right, #28324E 0, #242A3F 100%);
	background-image: -o-linear-gradient(right, #28324E 0, #242A3F 100%);
	background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #28324E), color-stop(100, #242A3F));
	background-image: -webkit-linear-gradient(right, #28324E 0, #242A3F 100%);
	background-image: linear-gradient(to left, #28324E 0, #242A3F 100%);
	border: 3px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #3750a4 0, #263772 100%);
	-webkit-border-image: -webkit-linear-gradient(top right, #3750a4 0, #263772 100%);
	border-image: linear-gradient(to bottom left, #3750a4 0, #263772 100%);
	border-image-slice: 1
}

.showcase img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto
}

.charstats .stats1,
.media,
.media li {
	position: relative
}

.charstats h3 {
	border-bottom: none
}

.charstats .stats1 {
	width: 116px;
	height: 110px;
	border-top: 1px solid #474950;
	background: #31343b;
	float: left
}

.charstats .stats1.last {
	width: 117px
}

.charstats .stats1:nth-child(even) {
	background: #41464e;
	border-top: 1px solid #51555d;
	border-bottom: 1px solid #555961
}

.charstats .stats1:nth-child(odd) {
	border-top: 1px solid #44464d;
	border-bottom: 1px solid #555961
}

.charstats .stats1 span {
	display: block;
	text-align: center
}

.charstats .stats1 span:first-child,
.charstats .stats2>div span:first-child {
	font-size: 20px;
	font-weight: 800;
	color: #c8c8c8;
	margin-top: 30px
}

.charstats .stats1 span:last-child,
.charstats .stats2>div span:last-child {
	font-size: 11px;
	color: #c8c8c8
}

.charstats .stats2 {
	width: 232px;
	height: 96px;
	background: #31343b;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left
}

.charstats .stats2>div span,
.media ul {
	display: block
}

.charstats .stats2.last {
	width: 233px
}

.charstats .stats2>div span:first-child {
	margin-top: 0;
	font-size: 18px
}

.charstats .stats2:nth-child(even) {
	background: #41464e
}

.charstats .stats2 img {
	border-radius: 50%;
	height: 40px;
	width: 40px;
	float: left;
	margin: 0 0 0 15px
}

.charstats .stats2>div {
	float: left;
	margin: 0 0 0 10px;
	width: 140px
}

.media ul {
	height: 292px
}

.media li {
	width: 50%;
	background: #292d37;
	padding-bottom: 15px;
	float: left
}

.media span {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	margin: 5px 0 0 10px;
	display: inline-block
}

.media li:nth-child(even) {
	background: #41464e
}

.media li iframe,
.media li img {
	width: 100%;
	height: 185px;
	border-bottom: 1px solid #40434c;
	position: relative;
	cursor: pointer
}

.media li:nth-child(even) img {
	border-bottom: 1px solid #555961
}

.media p {
	color: #bfbfbf;
	font-size: 11px;
	padding: 10px;
	height: 45px
}

.media>div p {
	color: #f0f0f0;
	font-size: 12px;
	padding: 15px;
	height: initial
}

.media a.btn {
	float: right;
	background: #0080da;
	background-image: none!important;
	height: initial;
	width: initial;
	border-radius: 5px;
	border-top: 1px solid #1b93de!important;
	margin-right: 20px
}

.media-type {
	position: absolute;
	top: 10px;
	right: 50px;
	display: inline-block!important
}

.media-type li {
	color: #bbb;
	width: inherit;
	background: 0 0!important;
	float: left;
	padding: 0 10px 0 0;
	font-size: 13px;
	text-transform: uppercase
}

.media-type li.active {
	color: #1d1d1d
}

.block-s {
	position: absolute;
	top: -15px;
	right: 35px;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 0 2px rgba(0, 0, 0, .61)
}

.block-s ul {
	padding: 0
}

.block-s li {
	padding: 10px 20px;
	text-align: center;
	color: #505259;
	font-size: 11px
}

.block-s li:first-child {
	font-weight: 700;
	cursor: default;
	border-bottom: 1px solid #cacaca
}

.block-s li:hover {
	background: #e6e6e6
}

.media-btn,
.media-btn2 {
	width: 602px;
	margin: 0 auto
}

.media-btn2 {
	margin-top: 15px
}

.manage-media,
.reply-file,
.screenshot-file,
.upload-media {
	float: left;
	width: 287px;
	height: 250px;
	background: url(/images/character/media.png.webp);
	display: block;
	position: relative
}

.reply-file,
.screenshot-file {
	background: url(/images/character/submedia.png.webp);
	height: 99px
}

.screenshot-file,
.upload-media {
	background-position: 287px 0;
	margin-left: 18px
}

.manage-media span:first-child,
.upload-media span:first-child {
	text-transform: uppercase;
	font-size: 25px;
	color: #fff;
	position: absolute;
	top: 160px;
	left: 50px
}

.manage-media span:last-child,
.upload-media span:last-child {
	padding: 4px 10px;
	background: rgba(0, 0, 0, .6);
	color: rgba(255, 255, 255, .2);
	border-radius: 5px;
	font-size: 11px;
	text-transform: uppercase;
	position: absolute;
	bottom: 5px;
	left: 115px
}

.reply-file span,
.screenshot-file span {
	line-height: 99px;
	text-align: center;
	margin-left: 40px;
	color: #fff;
	font-weight: 700
}

.friend-s .guide>div>div {
	width: 765px;
	background: #313439;
	display: inline-block;
	padding: 10px
}

.guide input[type=file],
.guide textarea {
	background: #3d4149;
	border: 1px solid #595b5f;
	width: 50%;
	color: #7b7d80
}

.guide button,
.m-desc p,
.mitem {
	border-radius: 5px
}

.guide textarea {
	width: 75%;
	height: 150px;
	color: #bdbdbd;
	padding: 10px
}

.guide input,
.guide textarea {
	margin-left: 20px
}

.guide button {
	background: #0083da;
	border-top: 1px solid #2f99e1;
	margin: 10px 0 0 20px
}

.mediaform {
	margin-top: 20px
}

.mitem {
	height: 235px;
	width: 235px;
	float: left;
	position: relative;
	margin: 0 0 15px 15px;
	cursor: pointer
}

.mitem.inactive::before {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .7);
	border-radius: 5px
}

.mitem.screenshot {
	background: #2eab7d
}

.mitem.replay {
	background: #ab2e2e
}

.mitem img {
	height: 125px;
	width: 235px;
	margin-top: 15px;
	padding-bottom: 5px
}

.mitem span:first-child {
	text-align: center;
	display: block;
	margin-top: 15px;
	color: #fff;
	font-weight: 700
}

.mitem span:not(:first-child) {
	color: #fff;
	font-size: 12px;
	margin-left: 10px;
	display: block
}

.guide.m-view .btn.blue {
	padding: 0;
	text-align: center;
	line-height: 30px;
	margin: 12px 0 0 10px;
	color: #fff
}

.m-view h3 {
	font-size: 13px
}

.m-desc img {
	width: 100px;
	height: 100px
}

.m-desc p {
	width: 625px;
	background: #272a2f;
	margin: 5px 0 0 15px
}

.m-parent>img {
	width: 790px;
	max-height: 500px
}

.comments.m-view {
	background: #313439;
	margin-top: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px
}

.comments.m-view h3 {
	margin: 0;
	width: 750px;
	border-bottom: none
}

.comments.m-view .comment p,
.comments.m-view .commentarea select,
.comments.m-view .name,
.comments.m-view textarea,
.comments.m-view>p {
	color: #9aa1ad
}

.comments.m-view textarea {
	background: #272a2f;
	border: none
}

.comments.m-view .commentarea select {
	background: #272a2f;
	width: 150px;
	border: none
}

.comments.m-view .btn.blue {
	padding: 3px 5px;
	height: initial;
	width: initial;
	line-height: inherit
}

.comments.m-view>.commentarea {
	border-top: 1px solid #3d4149
}

.stats1 .pts {
	font-size: 16px;
	font-weight: 600;
	margin-top: 12px;
	position: absolute;
	top: -15px;
	left: 30px
}

.stats1 .pts.up {
	color: #45be49!important
}

.stats1 .pts.down {
	color: #813131!important
}

.stats1 .pts.down::before,
.stats1 .pts.up::before {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	display: inline-block;
	margin-right: 5px
}

.stats1 .pts.up::before {
	border-bottom: 5px solid #45be49
}

.stats1 .pts.down::before {
	border-top: 5px solid #be4545
}

.clanp .exp,
.cstats li:nth-child(odd) {
	background: #31343b
}

.clanp .stats .name>span:last-child,
.likepage span {
	font-size: 11px
}

.likepage img,
.likepage span {
	display: inline-block;
	float: left
}

.clanp .stats {
	margin-top: 390px
}

.clanp .stats .name>span:first-child {
	margin-top: 10px
}

.cstats li {
	height: 74px
}

.cstats li:nth-child(even) {
	background: #41464e
}

.cstats li:nth-child(2) {
	background: #475976
}

.cstats li:first-child {
	background: #4789c6
}

.cstats li>span>span {
	color: #fff
}

.clan-privacy {
	float: left;
	margin: 20px 0 0 25px
}

.clan-privacy button {
	width: initial;
	height: initial;
	padding: 7px 10px;
	border-radius: 5px
}

.clan-privacy .blue {
	background: #0084da;
	border-top: 1px solid #1b93de
}

.clan-privacy .red {
	background: #bb2828;
	border-top: 1px solid #c94040
}

.clan-privacy .red.active {
	background: #691313;
	border: none;
	color: #afafaf
}

.clan-privacy .blue.active {
	background: #1f5176;
	border: none;
	color: #afafaf
}

.likepage {
	width: 259px;
	height: 72px;
	background: url(/images/clan/like.jpg.webp);
	cursor: pointer
}

.likepage span {
	color: #d6d6d6;
	font-weight: 700;
	margin: 28px 0 0 25px
}

.likepage img {
	margin: 14px 0 0 25px
}

.clanpage .friends .title {
	margin-left: 15px
}

.clanpage .friends .status {
	float: right;
	margin: 0 10px 0 5px
}

.left-m,
.left-m img,
.middle-m,
.right-m {
	float: left
}

.matches {
	max-height: 405px;
	overflow-y: scroll
}

.matches::-webkit-scrollbar {
	width: 5px
}

.matches::-webkit-scrollbar-track {
	background: #23262b
}

.matches::-webkit-scrollbar-thumb {
	background: #50a0dd
}

.match {
	width: 100%;
	display: inline-flex;
	padding: 12px 0
}

.match:nth-child(odd) {
	background: #282b31
}

.match:nth-child(even) {
	background: #23262b
}

.match img {
	width: 67px;
	height: 67px;
	margin-left: 25px
}

.left-m {
	width: 45%
}

.left-m span,
.right-m span {
	font-size: 12px;
	display: block;
	color: #1d1d1d;
	font-weight: 700;
	margin: 15px 0 0 105px
}

.left-m span:last-child,
.right-m span:last-child {
	color: #626875;
	font-size: 10px;
	font-weight: 400;
	margin-top: 0
}

.middle-m {
	width: 10%;
	text-align: center;
	font-weight: 700
}

.middle-m.defeat {
	color: #c64747
}

.middle-m.victory {
	color: #5cc647
}

.middle-m span:first-child {
	font-size: 22px
}

.middle-m span:last-child {
	font-size: 10px;
	text-transform: uppercase
}

.right-m {
	width: 45%
}

.right-m img {
	float: right;
	margin: 0 25px 0 0
}

.right-m span {
	text-align: right;
	margin: 15px 105px 0 0;
	cursor: pointer
}

.cmember ul {
	max-height: 400px
}

.cmember li,
.lineup li {
	width: 158px;
	height: initial;
	border-radius: 5px;
	margin: 0 25px 25px 0
}

.cmember li.inactive::before {
	border-radius: 5px
}

.cmember img,
.lineup img {
	display: block;
	margin: auto;
	float: none;
	padding: 15px 0;
	height: 90px;
	width: 90px
}

.cmember li>div,
.lineup li>div {
	background: #41464e;
	text-align: center;
	border-top: 1px solid #52575e;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	height: 60px
}

.cmember div.cadmin {
	background: #a64646;
	border-top: 1px solid #ae5757
}


.cmember div.coleader {
	background: #7a6d0f;
	border-top: 1px solid #857954
}

.cmember .name,
.lineup .name {
	margin: 5px 0 0;
	display: block
}

.cmember .lastlogin,
.cmember .rank,
.lineup .rank {
	color: #e0e0e0;
	font-size: 9px;
	font-family: Verdana
}

.cmember .lastlogin {
	display: block
}

.lineup>div {
	background: #282b31;
	display: inline-block;
	width: 100%
}

.lineup li {
	float: left;
	margin: 10px 8px;
	background: #31343b;
	cursor: pointer
}

.lineup img {
	border-radius: 50%
}

.lineup .name {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	margin-top: 12px;
	display: block
}

.lineup>div>p {
	color: #f0f0f0;
	font-size: 12px;
	padding: 15px
}

.categories li.hassub::before,
.iotd span.strike::before,
.ispecial::before,
.myaccount a::before {
	content: ""
}

.coupon input,
.guide h4,
.iteminfo .istats select,
.myaccount a {
	font-family: 'Open Sans'
}

.fpage.shop {
	margin-top: 193px
}

.fpage.shop .header {
	margin: 0 auto;
	width: 460px
}

.fpage.shop .header p {
	width: 460px;
	text-align: left;
	color: #bdbdbd
}

.shop .navigation {
	height: 80px
}

.shop .navigation .wrapper>ul>li {
	color: #818181;
	background-image: -ms-linear-gradient(bottom, #2C2D2E 0, #414245 100%);
	background-image: -moz-linear-gradient(bottom, #2C2D2E 0, #414245 100%);
	background-image: -o-linear-gradient(bottom, #2C2D2E 0, #414245 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2C2D2E), color-stop(100, #414245));
	background-image: -webkit-linear-gradient(bottom, #2C2D2E 0, #414245 100%);
	background-image: linear-gradient(to top, #2C2D2E 0, #414245 100%);
	width: 144px;
	margin: 0;
	height: 79px;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 11px;
	border-top: 1px solid #4b4d4f;
	line-height: 82px;
	border-left: 1px solid #2a2a2a
}

.shop .navigation .wrapper>ul>li.active,
.shop .navigation .wrapper>ul>li:hover {
	color: #fff;
	background-image: -ms-linear-gradient(bottom, #2F3134 0, #5d6066 100%);
	background-image: -moz-linear-gradient(bottom, #2F3134 0, #5d6066 100%);
	background-image: -o-linear-gradient(bottom, #2F3134 0, #5d6066 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2F3134), color-stop(100, #5d6066));
	background-image: -webkit-linear-gradient(bottom, #2F3134 0, #5d6066 100%);
	background-image: linear-gradient(to top, #2F3134 0, #5d6066 100%);
	border-left: none
}

.shop .navigation .wrapper>ul>li.cart {
	width: 245px;
	color: #fff;
	text-transform: none;
	border-left: none;
	line-height: 30px
}

.shop .navigation .wrapper>ul>li.cart::before {
	content: "";
	width: 30px;
	height: 25px;
	background: url(/images/shop/cart.png.webp);
	display: block;
	margin: 20px auto 0
}

.myaccount a,
.myaccount h3 {
	width: 232px;
	font-size: 11px
}

.shop .navigation .wrapper>ul>li.cart>span {
	color: #fff;
	font-size: 11px
}

.shop .navigation .wrapper>ul>li.cart span>span {
	color: #bde4ff;
	font-size: 13px
}

.shop .left {
	width: 232px;
	margin-top: 30px
}

.myaccount h3 {
	background: #2f3135;
	border-top: 1px solid #515356;
	color: #fff;
	text-transform: uppercase;
	padding: 10px 0;
	text-indent: 10px
}

.myaccount a {
	background-image: -ms-linear-gradient(bottom, #2F3134 0, #35373b 100%);
	background-image: -moz-linear-gradient(bottom, #2F3134 0, #35373b 100%);
	background-image: -o-linear-gradient(bottom, #2F3134 0, #35373b 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2F3134), color-stop(100, #35373b));
	background-image: -webkit-linear-gradient(bottom, #2F3134 0, #35373b 100%);
	background-image: linear-gradient(to top, #2F3134 0, #35373b 100%);
	display: block;
	color: #dadada;
	padding: 10px 0;
	position: relative;
	text-indent: 35px
}

.myaccount a::before {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(/images/content/history2.png.webp);
	background-repeat: no-repeat;
	background-size: 16px;
	margin-left: 10px
}

.myaccount a:nth-child(2):before {
	background-image: url(/images/content/currency.png.webp)
}

.myaccount a:last-child::before {
	background-image: url(/images/content/gift3.png.webp)
}

.myacount a:last-child {
	background-image: -ms-linear-gradient(bottom, #2F3135 0, #35373b 100%);
	background-image: -moz-linear-gradient(bottom, #2F3135 0, #35373b 100%);
	background-image: -o-linear-gradient(bottom, #2F3135 0, #35373b 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #2F3135), color-stop(100, #35373b));
	background-image: -webkit-linear-gradient(bottom, #2F3135 0, #35373b 100%);
	background-image: linear-gradient(to top, #2F3135 0, #35373b 100%)
}

.ccoins,
.eeps {
	height: 40px;
	width: 232px;
	margin-top: 11px
}

.ccoins {
	border-top: 1px solid #2a9de0;
	background-image: -ms-linear-gradient(bottom, #0076DA 0, #1092dc 100%);
	background-image: -moz-linear-gradient(bottom, #0076DA 0, #1092dc 100%);
	background-image: -o-linear-gradient(bottom, #0076DA 0, #1092dc 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0076DA), color-stop(100, #1092dc));
	background-image: -webkit-linear-gradient(bottom, #0076DA 0, #1092dc 100%);
	background-image: linear-gradient(to top, #0076DA 0, #1092dc 100%)
}

.eeps {
	border-top: 1px solid #bc4fd8;
	background-image: -ms-linear-gradient(bottom, #8D219D 0, #b439d2 100%);
	background-image: -moz-linear-gradient(bottom, #8D219D 0, #b439d2 100%);
	background-image: -o-linear-gradient(bottom, #8D219D 0, #b439d2 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #8D219D), color-stop(100, #b439d2));
	background-image: -webkit-linear-gradient(bottom, #8D219D 0, #b439d2 100%);
	background-image: linear-gradient(to top, #8D219D 0, #b439d2 100%)
}

.ccoins span,
.eeps span {
	color: #fff;
	font-size: 11px;
	margin-top: 12px
}

.ccoins span:first-child,
.eeps span:first-child {
	float: left;
	margin-left: 10px
}

.ccoins span:last-child,
.eeps span:last-child {
	float: right;
	margin-right: 10px
}

.iotd {
	width: 226px;
	height: 200px;
	border: 3px solid #282a2e;
	margin-top: 11px
}

.iotd div {
	height: 198px;
	width: 224px;
	border: 1px solid #565656;
	background: url(/images/shop/iotd.png.webp);
	position: relative;
	text-align: center
}

.iotd span:first-child {
	background: #0084da;
	position: absolute;
	top: 10px;
	left: 10px;
	text-transform: uppercase;
	color: #fff;
	font-size: 9px;
	padding: 2px 4px
}

.iotd img {
	margin: 40px auto 0;
	display: block;
	max-height: 50px
}

.iotd span.strike {
	position: relative;
	color: #616161;
	font-size: 12px;
	margin-top: 10px;
	display: inline-block
}

.iotd span.name,
.iotd span.price {
	display: inherit;
	font-weight: 700;
	text-transform: uppercase
}

.iotd span.strike::before {
	position: absolute;
	left: 0;
	top: 50%;
	right: 0;
	border: 1px solid red;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg)
}

.iotd span.price {
	color: #cb3737;
	font-size: 13px
}

.iotd span.name {
	color: #fff;
	font-size: 11px;
	margin-top: 5px
}

.cart li a,
.checkout button,
.coupon button,
.iotd a,
.ispecial a,
.iteminfo a {
	border-radius: 5px;
	border-top: 1px solid #e17a7a;
	background-image: -ms-linear-gradient(bottom, #9d2121 0, #CD2B2B 100%);
	background-image: -moz-linear-gradient(bottom, #9d2121 0, #CD2B2B 100%);
	background-image: -o-linear-gradient(bottom, #9d2121 0, #CD2B2B 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #9d2121), color-stop(100, #CD2B2B));
	background-image: -webkit-linear-gradient(bottom, #9d2121 0, #CD2B2B 100%);
	background-image: linear-gradient(to top, #9d2121 0, #CD2B2B 100%);
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-family: 'Open Sans';
	padding: 4px 20px;
	margin-top: 10px;
	display: inline-block
}

.cart li a:hover,
.checkout button:hover,
.coupon button:hover,
.iotd a:hover,
.ispecial a:hover,
.iteminfo a:hover {
	color: #c1c1c1
}

.categories {
	margin-top: 11px
}

.categories li {
	background: #34363a;
	width: 232px;
	border-top: 1px solid #535558;
	border-bottom: 2px solid #292a2c;
	text-indent: 10px;
	padding: 10px 0;
	color: #818181;
	font-size: 12px;
	position: relative
}

.categories li.active,
.categories li:hover {
	background: #71767e;
	color: #fff;
	cursor: pointer
}

.categories li.hassub::before {
	position: absolute;
	top: 15px;
	right: 10px;
	width: 9px;
	height: 7px;
	background: url(/images/shop/arrow.png.webp)
}

.categories ul ul li {
	background: #4e5156;
	color: #fff
}

.shop .right {
	width: 726px;
	margin-top: 30px
}

.shop .items>div {
	float: left;
	height: 210px;
	width: 163px;
	border: 4px solid #292a2c;
	margin-right: 14px;
    margin-bottom: 14px;
	cursor: pointer
}

.shop .items>div:nth-child(4n) {
    margin-right: 0;
}

.nomargin {
	margin-left: 0!important
}

.shop .items>div>div {
	height: 208px;
	width: 161px;
	border: 1px solid transparent;
	-moz-border-image: -moz-linear-gradient(top right, #686f77 0, #393d41 100%);
	-webkit-border-image: -webkit-linear-gradient(top right, #686f77 0, #393d41 100%);
	border-image: linear-gradient(to bottom left, #686f77 0, #393d41 100%);
	border-image-slice: 1;
	background-image: -ms-linear-gradient(top, #52555B 0, #343639 100%);
	background-image: -moz-linear-gradient(top, #52555B 0, #343639 100%);
	background-image: -o-linear-gradient(top, #52555B 0, #343639 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #52555B), color-stop(100, #343639));
	background-image: -webkit-linear-gradient(top, #52555B 0, #343639 100%);
	background-image: linear-gradient(to bottom, #52555B 0, #343639 100%);
	position: relative
}

.shop .items img {
	margin: 50px auto 0;
	display: block
}

.shop .items span {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	position: absolute;
	bottom: 10px
}

.itemview,
.itemview>div {
	position: fixed;
	z-index: 999
}

.cart li span.title,
.shop .items span.title {
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	bottom: 25px;
	max-width: 190px
}

.shop .items span.subtitle {
	color: #b1b1b1;
	text-transform: uppercase;
	font-style: italic;
	font-size: 9px
}

.itemview {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .7);
	top: 0;
	cursor: pointer
}

.itemview>div {
	top: 10%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 462px;
	border: 5px solid #55595e;
	background: #1e1f21
}

.itemview>div>div {
	cursor: initial
}

.itemmodel {
	border-bottom: 5px solid #55595e
}

.itemmodel iframe {
	display: block
}

.iteminfo {
	padding: 10px;
	display: inline-block;
	width: 442px
}

.iteminfo>div {
	float: left
}

.iteminfo>div:last-child {
	float: right
}

.cart li,
.cart li>div,
.coupon input,
.iteminfo li,
.subtotal .coupon2 span:first-child,
.subtotal .total span:first-child {
	float: left
}

.cart li div:first-child,
.iteminfo .img {
	width: 107px;
	height: 98px;
	border: 1px solid #272a2d
}

.cart li img,
.iteminfo .img img {
	display: block;
	margin: 0 auto;
	max-width: 82px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	max-height: 85px
}

.iteminfo .istats {
	color: #9e9e9e;
	font-size: 11px;
	margin-left: 20px
}

.iteminfo .istats span:first-child {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	width: initial
}

.iteminfo .istats span:last-child {
	font-weight: 700
}

.iteminfo .istats span>span {
	text-decoration: line-through;
	color: red!important
}

.iteminfo .istats select {
	display: block;
	margin: 10px 0 0;
	border: 1px solid #414243;
	color: #afafaf;
	background: #1e1f21;
	font-size: 11px;
	padding: 5px 10px
}

.iteminfo .istats a {
	margin: 10px 0 0
}

.iteminfo li:first-child {
	width: 60px;
	font-weight: 700
}

.iteminfo ul {
	clear: both
}

.iteminfo a {
	margin: 0 0 15px;
	display: block;
	text-align: center
}

.iteminfo .buy {
	background: #0087da;
	border-top: 1px solid #5eb5e8
}

.iteminfo .try {
	background: #2c2e30;
	border-top: 1px solid #4a4c4d;
	margin-bottom: 0
}

.itemstats {
	padding: 0 10px 5px;
	display: inline-block
}

.itemstats li {
	width: 88px
}

.itemstats li:nth-child(odd) {
	background: #27282a;
	border-top: 1px solid #2e2f31
}

.itemstats li:nth-child(even) {
	background: #2e2f32;
	border-top: 1px solid #353638
}

#cointip {
	position: absolute;
	padding: 5px 11px;
	background-image: -ms-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -moz-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -o-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008ADA), color-stop(100, #0076DA));
	background-image: -webkit-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: linear-gradient(to bottom, #008ADA 0, #0076DA 100%);
	color: #fff;
	font-size: 11px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .66);
	border-top: 1px solid #1b96de;
	z-index: 5;
	text-shadow: 1px 1px 1px #000;
	display: none
}

.ispecial {
	width: 718px;
	height: 211px;
	background: url(/images/shop/slider.jpg.webp);
	border: 4px solid #292a2c;
	position: relative;
	margin-bottom: 10px
}

.ispecial::before {
	display: block;
	width: 726px;
	border-top: 1px solid #404042;
	position: absolute;
	top: -5px;
	left: -4px
}

.ispecial a {
	position: absolute;
	bottom: 10px;
	left: 315px
}

.cart ul {
	z-index: 999;
	display: inline-block;
	position: relative;
	border-top: 1px solid #363738;
	margin-top: 5px
}

.cart li {
	width: 332px;
	height: 121px;
	background-image: -ms-linear-gradient(top, #2B2D2F 0, #222325 100%);
	background-image: -moz-linear-gradient(top, #2B2D2F 0, #222325 100%);
	background-image: -o-linear-gradient(top, #2B2D2F 0, #222325 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2B2D2F), color-stop(100, #222325));
	background-image: -webkit-linear-gradient(top, #2B2D2F 0, #222325 100%);
	background-image: linear-gradient(to bottom, #2B2D2F 0, #222325 100%);
	margin: 0!important;
	line-height: initial!important
}

.checkout,
.coupon,
.subtotal,
.subtotal div {
	height: initial!important
}

.cart li:first-child {
	border-top: 2px solid #1e1f21
}

.cart li div:first-child {
	border-color: #383a40;
	margin: 10px
}

.cart li div:last-child {
	margin: 20px 0 0 10px
}

.cart li a,
.cart li span {
	display: block
}

.cart li span {
	text-align: left
}

.cart li .price {
	color: #9e9e9e!important;
	font-size: 11px!important
}

.cart li a,
.coupon span {
	font-weight: 700;
	font-size: 10px!important
}

.cart li a {
	padding: 5px 20px!important;
	display: table;
	margin-top: 10px
}

.coupon,
.coupon button,
.coupon input,
.subtotal {
	display: inline-block
}

.coupon {
	background: #1e1f21;
	padding: 20px 0
}

.coupon span {
	text-transform: uppercase;
	margin-left: 22px!important
}

.coupon input {
	width: 180px;
	padding: 8px;
	border: 1px solid #414243;
	color: #afafaf;
	background: #1e1f21;
	font-size: 11px;
	margin-top: 5px
}

.checkout button:first-child,
.coupon button {
	float: left;
	background-image: -ms-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -moz-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -o-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008ADA), color-stop(100, #0076DA));
	background-image: -webkit-linear-gradient(top, #008ADA 0, #0076DA 100%);
	background-image: linear-gradient(to bottom, #008ADA 0, #0076DA 100%);
	border-top: 1px solid #36abff;
	margin: 10px 0 0 27px
}

.coupon input,
.coupon span {
	margin-left: 20px
}

.subtotal {
	text-transform: uppercase;
	background: #27282a;
	padding: 20px 0
}

.subtotal div {
	border: initial!important;
	margin: 0!important;
	display: block;
	width: 89%!important;
	padding-left: 20px
}

.checkout,
.donate-options,
.namepreview {
	display: inline-block
}

.subtotal .total {
	color: #fff;
	font-size: 10px
}

.subtotal .coupon2 {
	color: #8e8e8e!important;
	font-size: 10px!important
}

.subtotal .coupon2 span:last-child,
.subtotal .total span:last-child {
	float: right
}

.checkout {
	padding: 20px 0
}

.checkout button:first-child {
	margin: 0 0 0 15px!important
}

.checkout button:last-child {
	float: right;
	margin: 0 15px 0 0
}

.namepreview {
	font-size: 13px;
	background: #000;
	padding: 3px 10px;
	color: #fff
}

.donate-options a {
	width: 253px;
	height: 170px;
	background: red;
	display: block;
	float: left;
	margin-left: 15px;
	position: relative
}

.donate-options .inactive::after,
.donate-options .paypal::before {
	display: block;
	content: "";
	position: absolute
}

.donate-options .inactive::after {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .4);
	border-radius: 5px;
}

.donate-options a:first-child {
	margin-left: 0
}

.donate-options .paypal {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: -ms-linear-gradient(left, #306FC5 0, #265697 100%);
	background-image: -moz-linear-gradient(left, #306FC5 0, #265697 100%);
	background-image: -o-linear-gradient(left, #306FC5 0, #265697 100%);
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #306FC5), color-stop(100, #265697));
	background-image: -webkit-linear-gradient(left, #306FC5 0, #265697 100%);
	background-image: linear-gradient(to right, #306FC5 0, #265697 100%);
    border-radius: 5px;
}

.donate-options .paypal.active {
	box-shadow: 0px 0px 40px 0px rgb(0 90 255 / 50%);
}

.donate-options .paypal::before {
	width: 128px;
	height: 80px;
	background: url(/images/shop/paypal.png.webp);
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -64px
}

.donate-options .bitcoin::before,
.donate-options .phone::before {
	width: 253px;
	height: 170px;
	display: block;
	content: "";
	position: absolute;
}

.donate-options .phone {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background: #292929;
	border-radius: 5px;
}

.donate-options .phone.active {
	box-shadow: 0px 0px 40px 0px rgb(63 47 153 / 50%);
}

.donate-options .phone::before {
	background: url(/images/shop/azteco2.jpg);
	border-radius: 5px;
}

.donate-options .bitcoin {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: -ms-linear-gradient(left, #C56B02 0, #824600 100%);
	background-image: -moz-linear-gradient(left, #C56B02 0, #824600 100%);
	background-image: -o-linear-gradient(left, #C56B02 0, #824600 100%);
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #C56B02), color-stop(100, #824600));
	background-image: -webkit-linear-gradient(left, #C56B02 0, #824600 100%);
	background-image: linear-gradient(to right, #C56B02 0, #824600 100%);
	display: flex;
    justify-content: space-between;
	align-items: center;
	border-radius: 5px;
}

.donate-options .bitcoin.active {
	box-shadow: 0px 0px 40px 0px rgb(255 106 0 / 50%);
}

.donate-options .bitcoin::before {
	background: url(/images/shop/btc.jpg);
	border-radius: 5px;
}

.donate-options .bitcoin img {
    width: 50px;
    display: block;
    padding: 2px 7px;
}

.guide h4 {
	font-size: 13px;
	padding: 10px 0 10px 20px;
	color: #e0e0e0;
	margin-bottom: -28px
}

.guide img {
	margin: 0 0 20px 20px;
	cursor: pointer
}

.blankform {
	background: initial!important;
	height: initial!important
}

.item-desc {
	color: #fff;
	font-size: 12px;
	margin: 0 10px 10px
}

.rind tbody tr,
.weeklycur>div span:nth-child(2) {
	cursor: pointer
}

.rind-header::before,
.weeklyrank a::before {
	content: "";
	left: 0
}

.fpage.ranking {
	margin-top: 193px
}

.fpage.ranking .header {
	margin: 0 auto;
	width: 595px
}

.fpage.ranking .header p {
	width: 520px;
	text-align: left;
	color: #bdbdbd
}

.ranking .navigation {
	border-top: 1px solid #3d3d3e;
	height: 80px
}

.fpage.ranking .navigation .wrapper>ul>li {
	height: 75px;
	line-height: 80px
}

.fpage.ranking .navigation .wrapper>ul>li a {
	text-transform: none;
	font-weight: 700;
	font-size: 13px;
	color: #dedede
}

.fpage.ranking .navigation form {
	float: right;
	display: inline-block;
	margin-top: 25px
}

.fpage.ranking .navigation input {
	background: #2b2b2c;
	border: 1px solid #505050;
	color: #afafaf;
	padding: 9px;
	font-size: 11px
}

.rind tbody td,
.rind thead th {
	border-bottom: 2px solid #1d1d1d
}

.fpage.ranking .navigation form button {
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 5px;
	font-size: 10px;
	padding: 8px 18px;
	height: initial;
	width: initial
}

.rind {
	margin-top: 10px
}

.rind .pagination,
.rind-header {
	display: inline-block;
	margin: 10px 0
}

.rind table {
	width: 100%;
	font-family: 'Open Sans'
}

.rind thead {
	background-image: -ms-linear-gradient(top, #008ada 0, #0076da 100%);
	background-image: -moz-linear-gradient(top, #008ada 0, #0076da 100%);
	background-image: -o-linear-gradient(top, #008ada 0, #0076da 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008ada), color-stop(100, #0076da));
	background-image: -webkit-linear-gradient(top, #008ada 0, #0076da 100%);
	background-image: linear-gradient(to bottom, #008ada 0, #0076da 100%);
	color: #fff
}

.rind thead th {
	border-top: 1px solid #2c9fe0
}

.rind tbody td,
.rind thead th {
	padding: 10px 0;
	text-align: center;
	width: 120px;
	font-weight: 400;
	font-size: 12px
}

.rind img,
.rind tbody tr td:first-child,
.rind thead tr th:first-child {
	width: 50px
}

.rind tbody td {
	color: #afafaf;
	border-top: 1px solid #3e3f40;
	background-image: -ms-linear-gradient(top, #2b2c2d 0, #232324 100%);
	background-image: -moz-linear-gradient(top, #2b2c2d 0, #232324 100%);
	background-image: -o-linear-gradient(top, #2b2c2d 0, #232324 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2b2c2d), color-stop(100, #232324));
	background-image: -webkit-linear-gradient(top, #2b2c2d 0, #232324 100%);
	background-image: linear-gradient(to bottom, #2b2c2d 0, #232324 100%);
	padding: 17px 0
}

.rind tbody tr.hover td {
	background-image: -ms-linear-gradient(top, #434444 0, #232324 100%);
	background-image: -moz-linear-gradient(top, #434444 0, #232324 100%);
	background-image: -o-linear-gradient(top, #434444 0, #232324 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2b2c2d), color-stop(100, #232324));
	background-image: -webkit-linear-gradient(top, #434444 0, #232324 100%);
	background-image: linear-gradient(to bottom, #434444 0, #232324 100%)
}

.rind .emblemimg {
	width: 50px;
	position: relative;
	height: 25px
}

.rind img {
	height: 50px;
	position: absolute;
	left: 0;
	top: 5px
}

.rind .pagination button:first-child {
	float: left
}

.rind .pagination button:last-child {
	float: right
}

.rind .pagination span {
	text-align: center;
	width: 790px;
	color: #afafaf;
	display: inline-block;
	font-size: 12px
}

.rind-header {
	width: 100%;
	border-bottom: 1px solid #343434;
	position: relative;
	padding-bottom: 6px
}

.rind-header::before {
	display: block;
	position: absolute;
	bottom: 0;
	width: 60px;
	height: 5px;
	background: #0088da
}

.rind-header span:first-child {
	text-transform: uppercase;
	color: #fff;
	float: left;
	font-weight: 700;
	font-size: 18px
}

.rind-header span:last-child {
	float: right;
	color: #afafaf;
	font-size: 12px;
	margin-top: 10px
}

.weeklycur,
.weeklyprev {
	float: left;
	width: 486px
}

.weeklycur>div,
.weeklyprev>div {
	height: 24px;
	display: inline-block;
	margin-bottom: 2px;
	width: 486px
}

.weeklycur>div {
	border-top: 1px solid #38393b;
	background-image: -ms-linear-gradient(top, #343537 0, #252527 100%);
	background-image: -moz-linear-gradient(top, #343537 0, #252527 100%);
	background-image: -o-linear-gradient(top, #343537 0, #252527 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #343537), color-stop(100, #252527));
	background-image: -webkit-linear-gradient(top, #343537 0, #252527 100%);
	background-image: linear-gradient(to bottom, #343537 0, #252527 100%)
}

.weeklyprev>div {
	border-top: 1px solid #313233;
	background-image: -ms-linear-gradient(top, #2F2F31 0, #232324 100%);
	background-image: -moz-linear-gradient(top, #2F2F31 0, #232324 100%);
	background-image: -o-linear-gradient(top, #2F2F31 0, #232324 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2F2F31), color-stop(100, #232324));
	background-image: -webkit-linear-gradient(top, #2F2F31 0, #232324 100%);
	background-image: linear-gradient(to bottom, #2F2F31 0, #232324 100%)
}

.weeklycur>div span,
.weeklyprev>div span {
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	font-family: Verdana;
	display: inline-block;
	float: left;
	margin-top: 6px
}

.weeklyprev>div span {
	color: #afafaf
}

.weeklycur>div span:first-child,
.weeklyprev>div span:first-child {
	text-transform: uppercase;
	margin-left: 10px;
	width: 175px
}

.weeklycur>div span:nth-child(2):hover {
	color: red
}

.weeklycur>div span:last-child,
.weeklyprev>div span:last-child {
	float: right;
	margin-right: 10px
}

.weeklyrank {
	text-align: center;
	width: 100%;
	margin-bottom: 15px
}

.weeklyrank a {
	margin-left: 10px;
	position: relative
}

.weeklyrank a::before {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5)
}

.weeklyrank a.active::before,
.weeklyrank a:hover::before {
	display: none
}

.weeklyrank a:first-child {
	margin-left: 0
}

.weeklyrank a:not(.active) {
	border: 1px solid #004a71
}

.weeklystats {
	margin: 15px 0
}

.weeklystats h4 {
	font-family: 'Open Sans'
}

.weeklystats h4,
.weeklystats span {
	color: #000;
	font-size: 13px
}

.modal>div>p {
	color: #000;
	font-size: 12px!important;
	margin: 10px 0 0!important
}

.login-container button.dark,
.modal button,
.register-container button.dark {
	line-height: 0;
	height: 30px;
	width: initial
}

.modal form p {
	color: #000!important;
	margin: 10px 0 0!important
}

.clear.hr {
	margin: 10px 0;
	border-bottom: 1px solid #dbdbdb;
	clear: both
}

.modal h1::before {
	display: none!important
}

.footer-block {
	background: linear-gradient(135deg, #056cae 83%, #303030 50%);
	background: -o-linear-gradient(135deg, #056cae 83%, #303030 50%);
	height: 69px;
	margin-top: 25px
}

.footer-block ul:first-child {
	float: left;
	margin-top: 25px
}

.footer-block ul:first-child li {
	float: left;
	margin-left: 35px
}

.footer-block a {
	color: #fff;
	text-transform: uppercase;
	font-family: Roboto;
	font-size: 11px
}

.footer-block ul:last-child {
	float: right;
	margin: 25px 25px 0 0
}

.copyright {
	margin: 15px 0 0 15px
}

.credits {
	margin: 15px 15px 0 0
}

.credits.right {
	cursor: pointer
}

.copyright span,
.credits span {
	font-size: 8px;
	color: grey;
	font-family: 'Open Sans';
	text-transform: uppercase;
	font-weight: 700
}

.fg-footer {
	width: 185px;
	margin: 30px auto
}

#loader::after,
#loader::before {
	content: "";
	position: absolute
}

.loader-wrapper {
	margin: 150px auto 248px;
	width: 150px
}

#loader {
	display: block;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #0881c0;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	z-index: 1001
}

#loader::before {
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #fff;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite
}

#loader::after {
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: red;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		transform: rotate(0)
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}


/*!
 * vue2-animate v1.0.4
 * (c) 2016 Simon Asika
 * Released under the MIT License.
 * Documentation: https://github.com/asika32764/vue2-animate
 */

.bounce-enter-active,
.bounce-leave-active,
.bounceDown-enter-active,
.bounceDown-leave-active,
.bounceIn,
.bounceInDown,
.bounceInLeft,
.bounceInRight,
.bounceInUp,
.bounceLeft-enter-active,
.bounceLeft-leave-active,
.bounceOut,
.bounceOutDown,
.bounceOutLeft,
.bounceOutRight,
.bounceOutUp,
.bounceRight-enter-active,
.bounceRight-leave-active,
.bounceUp-enter-active,
.bounceUp-leave-active,
.fade-enter-active,
.fade-leave-active,
.fadeDown-enter-active,
.fadeDown-leave-active,
.fadeDownBig-enter-active,
.fadeDownBig-leave-active,
.fadeIn,
.fadeInDown,
.fadeInDownBig,
.fadeInLeft,
.fadeInLeftBig,
.fadeInRight,
.fadeInRightBig,
.fadeInUp,
.fadeInUpBig,
.fadeLeft-enter-active,
.fadeLeft-leave-active,
.fadeLeftBig-enter-active,
.fadeLeftBig-leave-active,
.fadeOut,
.fadeOutDown,
.fadeOutDownBig,
.fadeOutLeft,
.fadeOutLeftBig,
.fadeOutRight,
.fadeOutRightBig,
.fadeOutUp,
.fadeOutUpBig,
.fadeRight-enter-active,
.fadeRight-leave-active,
.fadeRightBig-enter-active,
.fadeRightBig-leave-active,
.fadeUp-enter-active,
.fadeUp-leave-active,
.fadeUpBig-enter-active,
.fadeUpBig-leave-active,
.rotate-enter-active,
.rotate-leave-active,
.rotateDownLeft-enter-active,
.rotateDownLeft-leave-active,
.rotateDownRight-enter-active,
.rotateDownRight-leave-active,
.rotateIn,
.rotateInDownLeft,
.rotateInDownRight,
.rotateInUpLeft,
.rotateInUpRight,
.rotateOut,
.rotateOutDownLeft,
.rotateOutDownRight,
.rotateOutUpLeft,
.rotateOutUpRight,
.rotateUpLeft-enter-active,
.rotateUpLeft-leave-active,
.rotateUpRight-enter-active,
.rotateUpRight-leave-active,
.slide-enter-active,
.slide-leave-active,
.slideDown-enter-active,
.slideDown-leave-active,
.slideIn,
.slideInDown,
.slideInLeft,
.slideInRight,
.slideInUp,
.slideLeft-enter-active,
.slideLeft-leave-active,
.slideOut,
.slideOutDown,
.slideOutLeft,
.slideOutRight,
.slideOutUp,
.slideRight-enter-active,
.slideRight-leave-active,
.slideUp-enter-active,
.slideUp-leave-active,
.zoom-enter-active,
.zoom-leave-active,
.zoomDown-enter-active,
.zoomDown-leave-active,
.zoomIn,
.zoomInDown,
.zoomInLeft,
.zoomInRight,
.zoomInUp,
.zoomLeft-enter-active,
.zoomLeft-leave-active,
.zoomOut,
.zoomOutDown,
.zoomOutLeft,
.zoomOutRight,
.zoomOutUp,
.zoomRight-enter-active,
.zoomRight-leave-active,
.zoomUp-enter-active,
.zoomUp-leave-active {
	animation-duration: .5s;
	animation-fill-mode: both
}

@keyframes bounceIn {
	20%,
	40%,
	60%,
	80%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1)
	}
	40% {
		transform: scale3d(.9, .9, .9)
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03)
	}
	80% {
		transform: scale3d(.97, .97, .97)
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1)
	}
}

@keyframes bounceOut {
	20% {
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		transform: scale3d(1.1, 1.1, 1.1)
	}
	to {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}
}

@keyframes bounceInDown {
	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0)
	}
	75% {
		transform: translate3d(0, -10px, 0)
	}
	90% {
		transform: translate3d(0, 5px, 0)
	}
	to {
		transform: none
	}
}

@keyframes bounceOutDown {
	20% {
		transform: translate3d(0, 10px, 0)
	}
	40%,
	45% {
		opacity: 1;
		transform: translate3d(0, -20px, 0)
	}
	to {
		opacity: 0;
		transform: translate3d(0, 2000px, 0)
	}
}

@keyframes bounceInLeft {
	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	0% {
		opacity: 0;
		transform: translate3d(-3000px, 0, 0)
	}
	60% {
		opacity: 1;
		transform: translate3d(25px, 0, 0)
	}
	75% {
		transform: translate3d(-10px, 0, 0)
	}
	90% {
		transform: translate3d(5px, 0, 0)
	}
	to {
		transform: none
	}
}

@keyframes bounceOutLeft {
	20% {
		opacity: 1;
		transform: translate3d(20px, 0, 0)
	}
	to {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0)
	}
}

@keyframes bounceInRight {
	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	from {
		opacity: 0;
		transform: translate3d(3000px, 0, 0)
	}
	60% {
		opacity: 1;
		transform: translate3d(-25px, 0, 0)
	}
	75% {
		transform: translate3d(10px, 0, 0)
	}
	90% {
		transform: translate3d(-5px, 0, 0)
	}
	to {
		transform: none
	}
}

@keyframes bounceOutRight {
	20% {
		opacity: 1;
		transform: translate3d(-20px, 0, 0)
	}
	to {
		opacity: 0;
		transform: translate3d(2000px, 0, 0)
	}
}

@keyframes bounceInUp {
	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}
	from {
		opacity: 0;
		transform: translate3d(0, 3000px, 0)
	}
	60% {
		opacity: 1;
		transform: translate3d(0, -20px, 0)
	}
	75% {
		transform: translate3d(0, 10px, 0)
	}
	90% {
		transform: translate3d(0, -5px, 0)
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes bounceOutUp {
	20% {
		transform: translate3d(0, -10px, 0)
	}
	40%,
	45% {
		opacity: 1;
		transform: translate3d(0, 20px, 0)
	}
	to {
		opacity: 0;
		transform: translate3d(0, -2000px, 0)
	}
}

.bounce-enter-active,
.bounceIn {
	animation-name: bounceIn
}

.bounce-leave-active,
.bounceOut {
	animation-name: bounceOut
}

.bounceInUp,
.bounceUp-enter-active {
	animation-name: bounceInUp
}

.bounceOutUp,
.bounceUp-leave-active {
	animation-name: bounceOutUp
}

.bounceInRight,
.bounceRight-enter-active {
	animation-name: bounceInRight
}

.bounceOutRight,
.bounceRight-leave-active {
	animation-name: bounceOutRight
}

.bounceInLeft,
.bounceLeft-enter-active {
	animation-name: bounceInLeft
}

.bounceLeft-leave-active,
.bounceOutLeft {
	animation-name: bounceOutLeft
}

.bounceDown-enter-active,
.bounceInDown {
	animation-name: bounceInDown
}

.bounceDown-leave-active,
.bounceOutDown {
	animation-name: bounceOutDown
}

@keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

@keyframes fadeOut {
	from {
		opacity: 1
	}
	to {
		opacity: 0
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutDown {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(0, 100%, 0)
	}
}

@keyframes fadeInDownBig {
	from {
		opacity: 0;
		transform: translate3d(0, -2000px, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutDownBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(0, 2000px, 0)
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutLeft {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(-100%, 0, 0)
	}
}

@keyframes fadeInLeftBig {
	from {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutLeftBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(-2000px, 0, 0)
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutRight {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(100%, 0, 0)
	}
}

@keyframes fadeInRightBig {
	from {
		opacity: 0;
		transform: translate3d(2000px, 0, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutRightBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(2000px, 0, 0)
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeInUpBig {
	from {
		opacity: 0;
		transform: translate3d(0, 2000px, 0)
	}
	to {
		opacity: 1;
		transform: none
	}
}

@keyframes fadeOutUp {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		transform: translate3d(0, -100%, 0)
	}
}

.fade-enter-active,
.fadeIn {
	animation-name: fadeIn
}

.fade-leave-active,
.fadeOut {
	animation-name: fadeOut
}

.fadeInUpBig,
.fadeUpBig-enter-active {
	animation-name: fadeInUpBig
}

.fadeOutUpBig,
.fadeUpBig-leave-active {
	animation-name: fadeOutUpBig
}

.fadeInUp,
.fadeUp-enter-active {
	animation-name: fadeInUp
}

.fadeOutUp,
.fadeUp-leave-active {
	animation-name: fadeOutUp
}

.fadeInRightBig,
.fadeRightBig-enter-active {
	animation-name: fadeInRightBig
}

.fadeOutRightBig,
.fadeRightBig-leave-active {
	animation-name: fadeOutRightBig
}

.fadeInRight,
.fadeRight-enter-active {
	animation-name: fadeInRight
}

.fadeOutRight,
.fadeRight-leave-active {
	animation-name: fadeOutRight
}

.fadeInLeftBig,
.fadeLeftBig-enter-active {
	animation-name: fadeInLeftBig
}

.fadeLeftBig-leave-active,
.fadeOutLeftBig {
	animation-name: fadeOutLeftBig
}

.fadeInLeft,
.fadeLeft-enter-active {
	animation-name: fadeInLeft
}

.fadeLeft-leave-active,
.fadeOutLeft {
	animation-name: fadeOutLeft
}

.fadeDownBig-enter-active,
.fadeInDownBig {
	animation-name: fadeInDownBig
}

.fadeDownBig-leave-active,
.fadeOutDownBig {
	animation-name: fadeOutDownBig
}

.fadeDown-enter-active,
.fadeInDown {
	animation-name: fadeInDown
}

.fadeDown-leave-active,
.fadeOutDown {
	animation-name: fadeOutDown
}

@keyframes rotateIn {
	from {
		transform-origin: center;
		transform: rotate3d(0, 0, 1, -200deg);
		opacity: 0
	}
	to {
		transform-origin: center;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateOut {
	from {
		transform-origin: center;
		opacity: 1
	}
	to {
		transform-origin: center;
		transform: rotate3d(0, 0, 1, 200deg);
		opacity: 0
	}
}

@keyframes rotateInDownLeft {
	from {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0
	}
	to {
		transform-origin: left bottom;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateOutDownLeft {
	from {
		transform-origin: left bottom;
		opacity: 1
	}
	to {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0
	}
}

@keyframes rotateInDownRight {
	from {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0
	}
	to {
		transform-origin: right bottom;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateOutDownRight {
	from {
		transform-origin: right bottom;
		opacity: 1
	}
	to {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0
	}
}

@keyframes rotateInUpLeft {
	from {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, 45deg);
		opacity: 0
	}
	to {
		transform-origin: left bottom;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateOutUpLeft {
	from {
		transform-origin: left bottom;
		opacity: 1
	}
	to {
		transform-origin: left bottom;
		transform: rotate3d(0, 0, 1, -45deg);
		opacity: 0
	}
}

@keyframes rotateInUpRight {
	from {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, -90deg);
		opacity: 0
	}
	to {
		transform-origin: right bottom;
		transform: none;
		opacity: 1
	}
}

@keyframes rotateOutUpRight {
	from {
		transform-origin: right bottom;
		opacity: 1
	}
	to {
		transform-origin: right bottom;
		transform: rotate3d(0, 0, 1, 90deg);
		opacity: 0
	}
}

.rotate-enter-active,
.rotateIn {
	animation-name: rotateIn
}

.rotate-leave-active,
.rotateOut {
	animation-name: rotateOut
}

.rotateInUpRight,
.rotateUpRight-enter-active {
	animation-name: rotateInUpRight
}

.rotateOutUpRight,
.rotateUpRight-leave-active {
	animation-name: rotateOutUpRight
}

.rotateInUpLeft,
.rotateUpLeft-enter-active {
	animation-name: rotateInUpLeft
}

.rotateOutUpLeft,
.rotateUpLeft-leave-active {
	animation-name: rotateOutUpLeft
}

.rotateDownRight-enter-active,
.rotateInDownRight {
	animation-name: rotateInDownRight
}

.rotateDownRight-leave-active,
.rotateOutDownRight {
	animation-name: rotateOutDownRight
}

.rotateDownLeft-enter-active,
.rotateInDownLeft {
	animation-name: rotateInDownLeft
}

.rotateDownLeft-leave-active,
.rotateOutDownLeft {
	animation-name: rotateOutDownLeft
}

@keyframes slideInDown {
	from {
		transform: translate3d(0, -100%, 0);
		visibility: visible
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideOutDown {
	from {
		transform: translate3d(0, 0, 0)
	}
	to {
		visibility: hidden;
		transform: translate3d(0, 100%, 0)
	}
}

@keyframes slideInLeft {
	from {
		transform: translate3d(-100%, 0, 0);
		visibility: visible
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideOutLeft {
	from {
		transform: translate3d(0, 0, 0)
	}
	to {
		visibility: hidden;
		transform: translate3d(-100%, 0, 0)
	}
}

@keyframes slideInRight {
	from {
		transform: translate3d(100%, 0, 0);
		visibility: visible
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideOutRight {
	from {
		transform: translate3d(0, 0, 0)
	}
	to {
		visibility: hidden;
		transform: translate3d(100%, 0, 0)
	}
}

@keyframes slideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible
	}
	to {
		transform: translate3d(0, 0, 0)
	}
}

@keyframes slideOutUp {
	from {
		transform: translate3d(0, 0, 0)
	}
	to {
		visibility: hidden;
		transform: translate3d(0, -100%, 0)
	}
}

.slide-enter-active,
.slideIn {
	animation-name: slideIn
}

.slide-leave-active,
.slideOut {
	animation-name: slideOut
}

.slideInUp,
.slideUp-enter-active {
	animation-name: slideInUp
}

.slideOutUp,
.slideUp-leave-active {
	animation-name: slideOutUp
}

.slideInRight,
.slideRight-enter-active {
	animation-name: slideInRight
}

.slideOutRight,
.slideRight-leave-active {
	animation-name: slideOutRight
}

.slideInLeft,
.slideLeft-enter-active {
	animation-name: slideInLeft
}

.slideLeft-leave-active,
.slideOutLeft {
	animation-name: slideOutLeft
}

.slideDown-enter-active,
.slideInDown {
	animation-name: slideInDown
}

.slideDown-leave-active,
.slideOutDown {
	animation-name: slideOutDown
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}
	50% {
		opacity: 1
	}
}

@keyframes zoomOut {
	from {
		opacity: 1
	}
	50% {
		opacity: 0;
		transform: scale3d(.3, .3, .3)
	}
	to {
		opacity: 0
	}
}

@keyframes zoomInDown {
	from {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

@keyframes zoomOutDown {
	40% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	to {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform-origin: center bottom;
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

@keyframes zoomInLeft {
	from {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

@keyframes zoomOutLeft {
	40% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
	}
	to {
		opacity: 0;
		transform: scale(.1) translate3d(-2000px, 0, 0);
		transform-origin: left center
	}
}

@keyframes zoomInRight {
	from {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

@keyframes zoomOutRight {
	40% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
	}
	to {
		opacity: 0;
		transform: scale(.1) translate3d(2000px, 0, 0);
		transform-origin: right center
	}
}

@keyframes zoomInUp {
	from {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	60% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

@keyframes zoomOutUp {
	40% {
		opacity: 1;
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		animation-timing-function: cubic-bezier(.55, .055, .675, .19)
	}
	to {
		opacity: 0;
		transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
		transform-origin: center bottom;
		animation-timing-function: cubic-bezier(.175, .885, .32, 1)
	}
}

.zoom-enter-active,
.zoomIn {
	animation-name: zoomIn
}

.zoom-leave-active,
.zoomOut {
	animation-name: zoomOut
}

.zoomInUp,
.zoomUp-enter-active {
	animation-name: zoomInUp
}

.zoomOutUp,
.zoomUp-leave-active {
	animation-name: zoomOutUp
}

.zoomInRight,
.zoomRight-enter-active {
	animation-name: zoomInRight
}

.zoomOutRight,
.zoomRight-leave-active {
	animation-name: zoomOutRight
}

.zoomInLeft,
.zoomLeft-enter-active {
	animation-name: zoomInLeft
}

.zoomLeft-leave-active,
.zoomOutLeft {
	animation-name: zoomOutLeft
}

.zoomDown-enter-active,
.zoomInDown {
	animation-name: zoomInDown
}

.zoomDown-leave-active,
.zoomOutDown {
	animation-name: zoomOutDown
}

.cw.slideLeft-leave-to,
.cw.slideRight-leave-to {
	display: none
}

.thumbnail {
	position: relative;
	z-index: 0;
}
  
.thumbnail:hover {
	background-color: transparent;
	z-index: 50;
}

.thumbnail span {
	/*CSS for enlarged image*/
	position: absolute;
	background-color: white;
	padding: 5px;
	left: -1000px;
	border: 1px solid #ccc;
	border-radius: 16px;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

.thumbnail span img {
	/*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
}

.thumbnail:hover span {
	/*CSS for enlarged image on hover*/
	visibility: visible;
	top: 0;
	left: 60px; /*position where enlarged image should offset horizontally */
}




.case_item{
	width: 150px;
	height: 147px;
	display: inline-block;
	vertical-align:top;
	margin-left: 10px;

	-webkit-filter: drop-shadow(0px 0px 2px #000a);

	filter: drop-shadow(0px 0px 2px #000a);
	position:  relative;
}.case_item_noshadow,.case_item_noshadow:hover{
	-webkit-filter: none;
	filter: none;
}.case_items_middle{
	top: 195px;
	height: 110px;
	left: 50%;
	position: absolute;
	border-right: 1px solid #aa3;
	border-left: 1px solid #aa3;
	margin: auto;
	z-index: 3;
	box-shadow: 0px 0px 1px 0px #000;
}.case_preitemscircle{
	z-index:2;
	position: relative;
	height: 110px;
	-webkit-mask-image: radial-gradient(circle closest-side, #fff0 165px,#000 166px);
}.case_preitemslinear{
	-webkit-mask-image: linear-gradient(to left,#fff0 0%,#000 10%,#000 90%,#fff0 100%);
}.case_showcase{
    height: 450px;
    margin-top: 0%;
    position: absolute;
    transition: 0.2s;
    z-index: 2;
    top: 50px;
    display: flex;
    width: 100%;
}.case_items{
	margin-top: 195px;
	-webkit-filter: brightness(75%) blur(2px);
	filter: brightness(75%) blur(2px);
}.case_items_zoomed{
	margin-top: 195px;
}.case_item_img{
	max-width: 100%;
	width: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index:2;
}.case_starimg{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index:2;
	-webkit-filter: drop-shadow(0px 0px 8px #0006);
	filter: drop-shadow(0px 0px 8px #0006);
}.case_item_img_div{
	position:absolute;
	width: 100%;
	height: 75%;
	overflow: hidden;
}.case_item_bg{
	border-radius: 15px;
	overflow: hidden;
	box-shadow: inset 0px 0px 2px #222;
	width: 100%;
	height: 75%;
	background: radial-gradient(circle, rgba(52,52,52,1) 0%, rgba(34,34,34,1) 100%);
	opacity: 0.75;
}.case_item_desc{
	width: 100%;
	height: 25%;
}.case_drop_names{
	margin: auto;
	width: fit-content;
	width: -moz-fit-content;
	vertical-align: bottom;
	padding: 4px 0px;
}.case_drop_txts{
	line-height: 42px;
    display: inline-table;
    height: 42px;
	padding-right: 8px;
}.case_drop_color{
	margin-top: 5px;
	height:5px;
	width:100%;
}.case_winner{
	text-align:center;
	color:#fff;
	width: 100%;
	height:500px;
	position:absolute;
	z-index: 20;
	visibility:hidden;
	opacity:0;
}.case_winnerinfo{
	text-align:center;
	color:#fff;
	width: 100%;
	height:500px;
	position:absolute;
	z-index: 50;
	transition:0.5s;
	overflow: hidden;
}.case_winnerinfo_upper{
	top:0;
}.case_winnerinfo_lower, .case_winnerinfo_upper{
	text-align:center;
	color:#fff;
	width: 100%;
	height:80px;
	position:absolute;
	z-index: 20;
	transition:0.25s;
	bottom:0;
	line-height: 80px;
	font-size: 22px;
	font-weight: 400;
}.case_winnerinfo{
	position:absolute;
	width:100%;
	height:100%;
}.case_winnerinfo_upper1{
	font-weight: 500;
	font-size: 24px;
	line-height: 80px;
	text-align: center;
	color: #fff;
}.case_prekey{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	height: 0px;
	z-index: 10;
}.case_spin{
	position: relative;
	width: 700px;
	height: 500px;
	overflow: hidden;
	white-space: nowrap;
	margin:auto;
	z-index: 5;
}.case_spin_zoomed{
	width: 100%;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin:auto;
	-webkit-clip-path: circle(25% at 50% 50%);
	clip-path: circle(22.7% at 50% 50%);
	transform: scale(1.2);
	position: absolute;
	z-index: 10;
	top: 0px;
	background: #0003;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}.case_flash{
	width: 100%;
    height: 100%;
	background: radial-gradient(farthest-side circle,#fff -50%,#0000 100%);
	opacity:0;
    position: absolute;
    top: 0;
	z-index: 1;
}.case_unlocking{
	position: absolute;
	text-align:center;
	width: 100%;
	height: 40px;
	z-index: 0;
	top: 0px;
	line-height:40px;
	margin:auto;
}.case_button{
    padding: 4px 8px;
    background-color: #3a7;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
    line-height: 32px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin: auto;
    cursor: pointer;
    visibility: hidden;
	display: inline-block;
	position: relative;
	text-overflow: clip;
    white-space: nowrap;
}.case_button:hover{
    box-shadow: inset 0px 0px 16px #3fc;
}.case_button_disabled:hover{
    box-shadow: inset 0px 0px 16px #633;
}.case_buttonLimitWidth{
	width:170px;
}.case_button_textonly{
	text-transform: none;
    background: none;
    cursor: default;
    box-shadow: none;
	transition: 1s;
	margin-top: -50px;
}.case_button_disabled{
	background: #333;
	color: #933;
	cursor:default;
}.case_buts1{
	margin: 0px 8px;
	position: relative;
	height:50px;
	border-top: 1px solid #fff6;
	padding-top: 5px;
	z-index: 30;
	overflow: hidden;
	-webkit-filter: drop-shadow(0 0 4px #0008);
	filter: drop-shadow(0 0 4px #0008);
}.case_win_anim_hide{
	position: absolute;
	width: 100%;
	height:  500px;
	margin:  auto;
	overflow:  hidden;
	transition: 0.5s;
	z-index:10;
}.case_win_anim_hide_circle{
	-webkit-clip-path: circle(80% at 50% 50%);
	clip-path: circle(80% at 50% 50%);
	width: 100%;
	height: 500px;
	margin: auto;
	overflow: hidden;
	transition: 1s;
}.case_win_anim_hide_star1{
	transition:1s;
	transform: scale(0);
}.case_win_anim_hide_star2{
	transition:1s;
	transform: scale(0);
}.case_allitems{
	width: 100%;
	max-height: 100%;
	flex-wrap: wrap;
	margin: auto;
	margin: 0 4px 0 2px;
}.panorama_scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
	background: none;
	border-radius: 2px;
}.panorama_scroll::-webkit-scrollbar-track {
	background: #fff0;
    border-radius: 2px;
    box-shadow: inset 0px 0px 6px #0006;
}.panorama_scroll::-webkit-scrollbar-thumb:window-inactive,.panorama_scroll::-webkit-scrollbar-thumb {
	background: #fff6; 
	border-radius: 2px;
	box-shadow: inset 0px 0px 3px #0000;
}.case_item_level_gradientcut{
	margin-top: -2px;
    height: 2px;
	-webkit-clip-path: polygon(0% -100px, 100% -100px, 100% 100%, 0% 100%);
	clip-path: polygon(0% -100px, 100% -100px, 100% 100%, 0% 100%);
}.case_item_level2{
	background: rgb(24, 121, 255);
	background: radial-gradient(circle farthest-side,rgb(24, 121, 255),rgb(30, 107, 215));
	box-shadow: 0px 0px 70px 32px hsla(215, 86%, 45%, 1);
}.case_item_level3{
	background: rgb(3, 166, 76);
	background: radial-gradient(circle farthest-side,rgb(3, 166, 76),rgb(27, 131, 73));
	box-shadow: 0px 0px 70px 32px hsla(147, 94%, 27%, 1);
}.case_item_level4{
	background: rgb(176, 51, 223);
	background: radial-gradient(circle farthest-side,rgb(176, 51, 223),rgb(144, 42, 183));
	box-shadow: 0px 0px 70px 32px hsla(283, 66%, 47%, 1);
}.case_item_level5{
	background: rgb(225, 0, 0);
	background: radial-gradient(circle farthest-side,rgb(225, 0, 0),rgb(204, 34, 34));
	box-shadow: 0px 0px 70px 32px hsla(360, 71%, 50%, 1);
}.case_item_level6{
	background: rgb(255, 200, 9);
	background: radial-gradient(circle farthest-side,rgb(255, 200, 9),rgb(242, 188, 11));
	box-shadow: 0px 0px 70px 32px hsla(47, 89%, 71%, 1);
}.case_item_level_box4px{
	/*box-shadow: 0px 0px 4px #000;*/
}.case_container_cards{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 4px;
	width: 100%;
}.case_container_card{
	min-width: 0px;
	max-height: 90px;
	height: 90px;
	flex: 1;
	flex-basis: 30%;
	position: relative;
	cursor: pointer;
	margin: 4px;
	overflow: hidden;
	display: flex;
	backdrop-filter: blur(8px);
	box-shadow: 0px 0px 4px #000c;
	background-size: 300%;
	background-position-x: 160%;
	transition:0.5s;
}.case_container_card.hidden{
	height: 4px;
	visibility: hidden;
	display:unset;
}.case_container_card:hover{
    background-position-x: 250%;
}.case_container_card:hover > img{
    filter:drop-shadow(0px 0px 8px #fff6);
}.case_showcontainers{
	opacity: 1;
    visibility: visible;
    max-height: 450px;
    margin-top: 0%;
    position: absolute;
    transition: 0.25s;
    z-index: 5;
    top: 50px;
    display: flex;
    width: 100%;
}.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}.ts1px{
	text-shadow: 1px 1px 0px #234;
}main{
    margin: auto;
    display: table;
    width: 972px;
	z-index: 1;
	position:relative;
	cursor: default;
}.pad0px{
    width: 972px;
    padding: 0px;
}.prestar {
	position: relative;
    height: 300px;
    width: 300px;
    margin: auto;
	top: 110px;
	z-index: 40;
	transform: scale(1.25);
}.pstar, .preloader_pstar {
	border: 0px solid transparent;
	background-size: 300px;
	background-position: center;
	height: 300px;
	width: 300px;
	position: absolute;
	-webkit-filter: drop-shadow(0px 0px 2px #000);
	filter: drop-shadow(0px 0px 2px #000);
	background-image: url('https://fgunz.net/imgs/sstar.png.webp');
}.lbv2{
	width: 972px;
}.hidden{
	display:none;
}

@keyframes starRotMini{
	0%{
		transform: scale(0.55) rotate(0deg);
  }
	100%{
		transform: scale(0.55) rotate(360deg);
  }
}
@keyframes starRot{
	0%{
		transform: scale(0.75) rotate(360deg);
  }
	100%{
		transform: scale(0.75) rotate(0deg);
  }
}
@keyframes scaledown{
	0%{
		transform: scale(2.5) rotate(20deg);
	  opacity:0;
  }
	100%{
		transform: scale(1.25) rotate(0deg);
	  opacity:1;
  }
}

.account.clans .char.emoji ul:first-child li:first-child,
.account.clans .char.emoji ul:last-child li:nth-child(2),
.account.clans .char.emoji ul:last-child li:nth-child(3),
.account.clans .char.emoji ul:first-child li {
	width: 85px !important;
}

.account.clans .char.emoji ul:first-child li.purchase {
	text-align: center;
    width: 972px !important;
}

.account.clans .char.emoji ul:first-child li.purchase a {
	position: relative;
	top: 3px;
}

.charhover.emojihover li {
	border-left: none !important;
	float: left !important;
}

.charhover.emojihover li img {
    height: 24px;
    position: relative;
    top: 8px;
    left: -33px;
}

.charslot.emojislot .account.clans .char,
.charslot.emojislot .char {
	cursor: initial !important;
}

.emojislot .btn.blue.upload {
    background: url(/images/btn-add.png);
    top: -10px !important;
    position: relative !important;
    border: none;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0;
    width: 39px !important;
    height: 39px !important;
    display: block;
}

.emojislot .btn.blue.upload:hover {
	opacity: 0.5;
}

.tooltip-wrapper .tooltip {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.tooltip-wrapper .tooltip input[type="text"] {
    width: 100%;
    max-width: 350px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	margin: 0 0 0 30px !important;
}

.tooltip-wrapper .tooltip button {
    padding: 0px 12px;
    font-size: 14px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	margin: 0 10px !important;
}

.tooltip-wrapper .tooltip button:hover {
    background-color: #0056b3;
}

.tooltip-wrapper .tooltip .tooltiptext {
    visibility: hidden;
    width: 60px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: calc(50% + 16px);;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-wrapper .tooltip .tooltiptext.visible {
    visibility: visible;
    opacity: 1;
}

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

.tooltip-wrapper p {
	padding: 0 10px 10px 20px !important;
}

.slider-container {
    display: flex;
    flex-direction: column;
	margin-top: 10px;
}

.slider-info {
    display: flex;
    gap: 10px;
}

#amountSlider {
    width: 100%;
    max-width: 400px;
}

#sliderValue {
    font-size: 16px;
}

#coinsDisplay {
    font-size: 16px;
    font-weight: bold;
    color: #e0e0e0;
}

.fg-switch {
	position: relative;
	display: inline-block;
	margin: -4px 5px;
}

.fg-switch > span {
	position: absolute;
	top: 11px;
	pointer-events: none;
	font-family: 'Helvetica', Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
	width: 50%;
	text-align: center;
	background: initial;
	margin: initial;
	padding: initial;
}

.fg-switch input.check-toggle-round-flat:checked ~ .off {
	color: #0076DA;
}

.fg-switch input.check-toggle-round-flat:checked ~ .on {
	color: #fff;
}

.fg-switch > span.on {
	left: 0;
	padding-left: 2px;
	color: #0076DA;
}

.fg-switch > span.off {
	right: 0;
	padding-right: 4px;
	color: #fff;
}

.fg-switch .check-toggle {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
	float: initial;
}

.fg-switch .check-toggle + label {
	display: block;
	position: relative;
	cursor: pointer;
	outline: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: initial !important;
	font-size: initial !important;
	margin: initial !important;
}

.fg-switch input.check-toggle-round-flat + label {
	padding: 2px;
	width: 80px;
	height: 30px;
	background-color: #0076DA;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

.fg-switch input.check-toggle-round-flat + label:before, .fg-switch input.check-toggle-round-flat + label:after {
	display: block;
	position: absolute;
	content: "";
}

.fg-switch input.check-toggle-round-flat + label:before {
	top: 2px;
	left: 2px;
	bottom: 2px;
	right: 2px;
	background-color: #0076DA;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

.fg-switch input.check-toggle-round-flat + label:after {
	top: 4px;
	left: 4px;
	bottom: 4px;
	width: 40px;
	background-color: #fff;
	-webkit-border-radius: 52px;
	-moz-border-radius: 52px;
	-ms-border-radius: 52px;
	-o-border-radius: 52px;
	border-radius: 52px;
	-webkit-transition: margin 0.2s;
	-moz-transition: margin 0.2s;
	-o-transition: margin 0.2s;
	transition: margin 0.2s;
}

.fg-switch input.check-toggle-round-flat:checked + label:after {
	margin-left: 36px;
}