:root {
	--main-bg: 16, 77, 89;
	--second-bg: 0, 0, 0;
	--decorate-bg: 45, 151, 148;
}
@font-face {
    font-family: 'Philosopher';
    src: local('Philosopher'), url('../fonts/philosopher/philosopher.woff2') format('woff2'), url('../fonts/philosopher/philosopher.woff') format('woff'), url('../fonts/philosopher/philosopher.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Philosopher';
    src: local('Philosopher Italic'), local('Philosopher-Italic'), url('../fonts/philosopher/philosopheritalic.woff2') format('woff2'), url('../fonts/philosopher/philosopheritalic.woff') format('woff'), url('../fonts/philosopher/philosopheritalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Philosopher';
    src: local('Philosopher Bold'), local('Philosopher-Bold'), url('../fonts/philosopher/philosopherbold.woff2') format('woff2'), url('../fonts/philosopher/philosopherbold.woff') format('woff'), url('../fonts/philosopher/philosopherbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Philosopher';
    src: local('Philosopher Bold Italic'), local('Philosopher-BoldItalic'), url('../fonts/philosopher/philosopherbolditalic.woff2') format('woff2'), url('../fonts/philosopher/philosopherbolditalic.woff') format('woff'), url('../fonts/philosopher/philosopherbolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
html{
	padding: 0;
	margin: 0;
	background: #0f3a42;
}
body{
	margin: 0;
	padding: 0;
	color: #8dbfbc;
	font-size: 14px;
	font-family: 'Philosopher';
}
a{
	text-decoration: none;
	color: #fff;
	transition: 0.1s;
}
h1, h2, h3, h4, h5, h6{
	font-weight: normal;
}
/*flex*/
.f-a{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-around;
}
.f-b{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
}
.f-c{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}
.f-s{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-start;
}
.f-e{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: flex-end;
}
.f-w{
	flex-wrap: wrap;
}
.f-dr{
	flex-direction: column;
}
.wrap{
	width: 1440px;
	margin: 0 auto;
}
/*site*/
#video {
	width: 100%;
	height: 100vh;
	background-size: cover;
	object-fit: cover;
	position: fixed;
}
.site{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
}
.site:before{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url(../img/grid.png) repeat;
	z-index: 1;
	opacity: .5;
}
.block_item {
	box-shadow: 0 0 10px 1px rgba(var(--second-bg), .2);
	background: rgba(var(--main-bg), .9);
}
.block_header{
	background: rgba(var(--second-bg), .5);
	padding: 10px 15px;
	border-radius: inherit;
	margin: 0px 0px 10px;
	align-items: center;
}
.block_title {
	font-weight: normal;
	font-size: 16px;
	margin: 0px;
	text-transform: uppercase;
	padding: 4px 0px;
	color: #fff;
}
.block_title span {
	border-radius: 1em;
	padding: 2px 5px;
	color: rgba(var(--decorate-bg), 1);
}
.block_link {
	font-size: 12px;
	border-radius: inherit;
	padding: 5px 10px;
	border-left: 3px solid rgba(var(--decorate-bg), 1);
	transition: 0.2s;
	background: rgba(var(--decorate-bg), .1);
	color: #fff;
}
.block_link:hover {
	background: rgba(var(--decorate-bg), 1);
	color: rgba(var(--main-bg), 1);
}
.block_link i{
	font-size: 10px;
	margin-right: 4px;
}
.header{
	align-items: center;
	background: rgba(var(--main-bg), 1);
	position: fixed;
	z-index: 3;
	width: 100%;
}
.header_logo {
    padding: 12px 15px;
    align-items: center;
    border-radius: 4em;
    letter-spacing: 1px;
    background: rgb(0 0 0 / 40%);
    box-shadow: -4px 0px 0 0px rgb(0 0 0 / 10%), 4px 0px 0 0px rgb(0 0 0 / 10%);
}
.header_logo img{
	width: 32px;
}
.logo_glitch {
	visibility: hidden;
	color: rgb(255 255 255 / 100%);
	position: relative;
	text-transform: uppercase;
	font-size: 0;
	width: 0;
	transition: 0.2s;
	white-space: nowrap;
}
.logo_glitch:after {
	content: attr(data-text);
	position: absolute;
	left: 1px;
	text-shadow: -1px 0 #2d9794;
	top: 0;
	color: rgb(255 255 255 / 30%);
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim 2s infinite linear alternate-reverse;
	height: 100%;
	width: 100%;
	display: none;
}
.logo_glitch:before {
	content: attr(data-text);
	position: absolute;
	left: -1px;
	text-shadow: 1px 0 #50ddab;
	top: 0;
	color: #2d9794;
	overflow: hidden;
	clip: rect(0, 900px, 0, 0);
	animation: noise-anim-2 3s infinite linear alternate-reverse;
	height: 100%;
	width: 100%;
	display: none;
}
.header_logo:hover .logo_glitch{
	font-size: 21px;
	visibility: visible;
	width: auto;
	margin-left: 10px;
}
.header_logo:hover .logo_glitch:before{
	display: block;
}
.header_logo:hover .logo_glitch:after{
	display: block;
}

.header_menu{
	align-items: center;
	margin-left: 30px;
	padding-left: 20px;
	position: relative;
}
.header_menu:before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translate(0, -50%);
	width: 1px;
	height: 30px;
	background: rgb(255 255 255 / 10%);
}
.header_menu:after {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translate(0, -50%);
	width: 1px;
	height: 30px;
	background: rgb(255 255 255 / 10%);
}
.header_menu_mob{
	display: none;
}
.header_menu--active{
	display: block !important;
	-webkit-animation: fadeIn 0.5s;
	-moz-animation: fadeIn 0.5s;
	-ms-animation: fadeIn 0.5s;
	-o-animation: fadeIn 0.5s;
	animation: fadeIn 0.5s;
}
.header_menu_item {
	text-transform: uppercase;
	align-items: center;
	padding: 2px 12px;
	transition: 0.2s;
	margin-left: 1px;
	border-radius: 2em;
}
.header_menu_item span {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	transition: 0.2s;
	margin-right: 5px;
	border-radius: 50%;
	padding: 4px;
}
.header_menu_item i {
	font-size: 14px;
}
.header_menu_item:hover {
	background: rgb(255 255 255 / 5%);
}
.header_menu_item:hover i {
	font-size: 14px;
/*	color: #5dffc3;*/
}
.header_menu_item:hover span {
	color: #fff;
}
.header_menu_mob{
	align-items: center;
	cursor: pointer;
	margin: 0px 20px;
}
.header_menu_mob span{
	display: block;
	width: 28px;
	height: 3px;
	border-radius: 2em;
	background: #fff;
	margin: 2px 0px;
}
.header_rightside{
	align-items: center;
}
.header_cabinet {
	margin-right: 20px;
	background: rgba(var(--decorate-bg), 1);
	display: block;
	border-radius: 1em;
	text-transform: uppercase;
	align-items: center;
	padding-right: 15px;
	transition: 0.2s;
	border: 1px dashed transparent;
}
.header_cabinet_icon {
	display: inline-block;
	background: rgba(var(--second-bg), .4);
	padding: 10px 15px;
	border-radius: 1em;
	margin-right: 5px;
	margin: 4px;
	transition: 0.2s;
}
.header_cabinet i{
	font-size: 14px;
	color: #fff;
}
.header_cabinet:hover {
	color: rgba(var(--decorate-bg), 1);
	border: 1px dashed rgba(var(--decorate-bg), 1);
	background:rgb(255 255 255 / 5%);
}
.header_cabinet:hover .header_cabinet_icon{
	background: rgba(var(--decorate-bg), 1);
}
.header_lang{
	align-items: center;
	position: relative;
}
.header_menu_mob--btnactive span{
	background: rgba(var(--second-bg), .4);
	transition: 0.2s;
}
.header_menu_mob--btnactive span:nth-child(1){
	width: 20px;
}
.header_menu_mob--btnactive span:nth-child(3){
	width: 20px;
}
.lang_block{
	background: rgba(var(--second-bg), .2);
	border-radius: 1em;
	padding: 4px;
	height: 26px;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}
.lang_block:hover {
	background: rgb(255 255 255 / 5%);
}
.lang_active {
	cursor: pointer;
}
.lang_panel {
	display: none;
	position: absolute;
	top: 40px;
	background: rgba(var(--main-bg), .9);
	width: 100%;
	padding: 4px 0px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 0 10px 0px rgba(var(--second-bg), .2);
	transition: 0.2s;
}
.lang_panel--active {
	display: block;
}
.lang_panel:before {
	content: "▾";
	color: #32686a;
	font-size: 21px;
	position: absolute;
	top: -14px;
	left: 0px;
	transform: rotate(61deg);
}
.lang_panel a {
	background: rgba(var(--second-bg), .2);
	margin: 2px 2px;
	border-radius: 1em;
	display: flex;
	justify-content: center;
	transition: 0.2s;
	padding: 4px 0px;
}
.lang_panel a:hover {
	background: rgba(var(--decorate-bg), .4);
}
.header_lang i {
	font-size: 8px;
	margin-left: 8px;
}
.header_lang--active {
	background: rgba(var(--decorate-bg), .2);
}
/*news*/
.headbox{
	margin-top: 100px;
	position: relative;
	z-index: 2;
}
.headbox_news{
	width: 36%;
}
.headbox_container{
	align-items: center;
}
.news_title{
	text-transform: uppercase;
	font-size: 26px;
	margin: 10px 0px;
	color: #fff;
}
.news_body{
	font-size: 16px;
	margin: 15px 0px;
	line-height: 20px;
}
.news_link{
	display: inline-block;
	background: rgb(45 151 148 / 10%);
	padding: 10px 50px;
	border-radius: 2em;
	transition: 0.2s;
	border: 1px dashed #2d9794;
	color: #fff;
	margin-top: 10px;
}
.news_link i{
	margin-right: 10px;
	font-size: 12px;
	transition: 0.2s;
}
.news_link:hover{
	background: rgba(var(--decorate-bg), 1);
	color: rgba(var(--main-bg), 1);
}
.news_link:hover i{
	margin-right: 15px;
}
.headbox_stat{
	width: 36%;
}
.headbox_logo{
	position: relative;
	transition: 0.4s;
}
.headbox_logo img{
	position: relative;
	z-index: 2;
}
.headbox_logo:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.2);
	background: url(../img/logo.png);
	width: 256px;
	height: 194px;
	background-size: 100% 100%;
	z-index: 1;
	filter: opacity(0);
	transition: 0.4s;
}
.headbox_logo:hover{
	filter: brightness(1.4);
}
.headbox_logo:hover:before{
	display: block;
	filter: opacity(0.2);
}
.stat_server {
	height: fit-content;
	border-radius: 1em;
	margin: 10px;
}
.stat_server--on {
    box-shadow: -2px 0px 0 0px #5dffc3;
}
.stat_server--off {
	box-shadow: -2px 0px 0 0px #d96161;
}
.stat_server_icon {
	background: rgba(var(--second-bg), .5);
	padding: 10px;
	border-radius: 1em;
	display: inherit;
	align-items: center;
}
.stat_server_block{
	padding: 10px 15px;
}
.stat_server_name {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}
.stat_server_chars {
	margin: 2px 0px;
}
.stat_server_chars span{
	display: inline-block;
	width: 12px;
	height: 6px;
	background: rgb(255 255 255 / 20%);
	margin: 1px;
	border-radius: 1em;
}
.stat_server_online{
	font-size: 12px;
}
.stat_server_online span{
	color: #25ffbd;
}
.server_chars--active{
	background: #25ffbd !important;
}
.main{
	margin-top: 30px;
	position: relative;
	z-index: 2;
}
.main_container{
	border-radius: 1em;
}
.main_navigation{
	background: rgba(var(--second-bg), .5);
	border-radius: inherit;
	align-items: center;
}
.main_startplay {
	background: rgba(var(--decorate-bg), 1);
	padding: 15px 40px;
	font-size: 18px;
	text-transform: uppercase;
	border-radius: 1em;
	margin: 0px 30px;
	box-shadow: -5px 0px 0 0px rgb(93 255 195 / 80%), -10px 0px 0 0px rgb(93 255 195 / 20%), 5px 0px 0 0px rgb(93 255 195 / 80%), 10px 0px 0 0px rgb(93 255 195 / 20%);
	transition: 0.2s;
	width: 120px;
	text-align: center;
}
.main_startplay:hover {
		background: #5dffc3;
	color: rgba(var(--main-bg), 1);
	-webkit-animation-name: startPlayAnim;
	animation-name: startPlayAnim;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
.main_navigation_menu{
	width: 30%;
	text-align: center;
}
.main_navigation_menu:first-child{
	text-align: right;
}
.main_navigation_menu:last-child{
	text-align: left;
}
.main_navigation_menu a{
	font-size: 14px;
	transition: 0.2s;
	text-transform: uppercase;
	padding: 6px 15px;
	border-radius: 1em;
	letter-spacing: 1px;
}
.main_navigation_menu a:hover {
	color: #ffffff;
	background: rgb(255 255 255 / 5%);
}
.main_block{
	padding: 10px;
	position: relative;
}
.main_block:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: 50%;
	z-index: 1;
	background: rgba(var(--second-bg), .2);
}
.action_block{
	width: 48%;
}
.action_container {
	border: 1px dashed rgba(var(--second-bg), .1);
	border-radius: 1em;
	padding: 10px;
	background: rgba(var(--decorate-bg), .05);
}
.action_img{
	position: relative;
}
.action_img img{
	border-radius: 1em;
	width: 200px;
	height: fit-content;
}
.action_img:after {
	content: "";
	position: absolute;
	width: 40px;
	height: 15px;
	top: 0px;
	left: 50%;
	transform: translate(-50%, 0);
	background: rgb(178 183 104);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.action_content{
	margin-left: 10px;
	position: relative;
	width: 100%;
}
.action_title {
    font-size: 18px;
    font-weight: normal;
    margin: 0px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px 0px;
}
.action_content p{
	margin: 0;
}
.action_body {
	font-size: 14px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-height: 20px;
	margin-top: 10px;
	height: 60px;
}
.action_info {
	width: calc(100% - 15px);
	align-items: center;
	background: rgba(var(--second-bg), .5);
	padding: 0px 0px 0px 15px;
	border-radius: 1em;
	position: absolute;
	bottom: 0;
}
.action_date{
	font-size: 11px;
	color: rgba(var(--decorate-bg), 1);
}
.action_btn{
	padding: 6px 25px;
	border-radius: 1em;
	background: rgba(var(--decorate-bg), .1);
	border-left: 3px solid #2d9794;
	transition: 0.2s;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.action_btn:hover {
	background: rgba(var(--decorate-bg), 1);
	border-left: 3px solid #2d9794;
	color: rgba(var(--main-bg), 1);
}
/*rating*/
.informer{
	position: relative;
	z-index: 1;
	margin-top: 30px;
}
.informer_rating{
	width: calc(33% + 32px);
}
.rating_block {
	border-radius: 1em;
	margin-right: 5px;
	width: 100%;
	position: relative;
}
.rating_users{
	flex-wrap: wrap;
	padding: 0px 10px;
	padding-bottom: 10px;
}
.rating_user {
	background: rgba(var(--second-bg), .2);
	padding: 6px;
	border-radius: 1em;
	margin: 0px 1px 1px 1px;
	width: calc(50% - 14px);
	position: relative;
}
.rating_user:nth-child(1) {
	width: 100%;
	background: rgba(var(--second-bg), .4);
}
.rating_user:nth-child(2) {
	width: 100%;
	background: rgba(var(--second-bg), .4);
}
.rating_user:nth-child(3) {
	width: 100%;
	background: rgba(var(--second-bg), .4);
}
.rating_user:nth-child(1):before {
	position: absolute;
	content: "\f2eb";
	font-family: FontAwesome;
	font-size: 18px;
	left: 50%;
	color: #ffd819;
	transform: translate(-50%, 0);
}
.rating_user:nth-child(2):before {
	position: absolute;
	content: "\e123";
	font-family: FontAwesome;
	font-size: 18px;
	left: 50%;
	color: #bcfcff;
	transform: translate(-50%, 0);
}
.rating_user:nth-child(3):before {
	position: absolute;
	content: "\e123";
	font-family: FontAwesome;
	font-size: 18px;
	left: 50%;
	color: #f1873c;
	transform: translate(-50%, 0);
}
.rating_item{
	padding: 2px;
}
.rating_number {
	background: rgb(255 255 255 / 10%);
	width: 16px;
	text-align: center;
	border-radius: 1em;
	font-size: 10px;
	line-height: 15px;
}
.rating_name{
	margin-left: 10px;
	color: #fff;
}
.rating_score {
	background: rgba(var(--second-bg), .2);
	width: 50px;
	text-align: center;
	border-radius: 1em;
	font-size: 12px;
	line-height: 16px;
}
.rating_select {
	border-radius: 1em;
	padding: 10px;
	margin-left: 2px;
	position: relative;
}
.rating_select_btn {
	width: 50px;
	text-align: center;
	height: 50px;
	background: rgba(var(--second-bg), .3);
	border-radius: 50%;
	margin: 2px 0px;
	font-size: 21px;
	line-height: 50px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: 0.2s;
	color: #fff;
}
.rating_select_btn:hover {
	background: rgba(var(--decorate-bg), 1);
	color: rgba(var(--main-bg), 1);
}
.rating_select--active{
	background: rgba(var(--decorate-bg), 1);
	cursor: auto;
}
.rating_select--active:hover{
	color: #fff;
}
.rating_select:before {
	content: "";
	width: 80%;
	height: 50px;
	border-top: 1px solid rgba(var(--second-bg), .1);
	border-radius: 1em;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, 0);
}
.rating_select:after {
	content: "";
	width: 80%;
	height: 50px;
	border-bottom: 1px solid rgba(var(--second-bg), .1);
	border-radius: 1em;
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translate(-50%, 0);
}
.rating_srv{
	margin-bottom: 10px;
}
.rate_srv_item {
	background: rgba(var(--second-bg), .3);
	padding: 5px 15px;
	margin: 1px;
	border-radius: 1em;
	font-size: 12px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: 0.2s;
}
.rate_srv_item:hover {
	background: rgba(var(--decorate-bg), 1);
	color: rgba(var(--main-bg), 1);
}
.rate_srv--active{
	background: rgba(var(--decorate-bg), 1);
	color: #fff;
	cursor: auto;
}
.rate_srv--active:hover{
	color: #fff;
}
/*.rating--inactive{
	display: none;
}*/
.rating_rate_block{
	display: none;
}
.rating_rate--active{
	display: flex;
}
.rating_tab {
	display: none;
	height: 210px;
}
.rating--active{
	display: block;
}
/*forum*/
.informer_forum{
	width: calc(33% + 32px);
}
.forum_block{
	border-radius: 1em;
}
.forum_items{
	padding: 0px 10px;
	padding-bottom: 10px;
}
.forum_item {
	align-items: center;
	background: rgba(var(--second-bg), .2);
	border-radius: 1em;
	padding: 5px;
	margin: 1px;
	transition: 0.2s;
}
.forum_theme{
	width: 100%;
}
.forum_icon {
	font-size: 26px;
	padding: 8px 10px;
	color: #fff;
	transition: 0.2s;
	background: rgba(var(--second-bg), .1);
	height: 100%;
	display: block;
	border-radius: inherit;
}
.forum_item:hover {
	background: rgba(var(--second-bg), .4);
}
.forum_item:hover .forum_icon {
	margin-right: 10px;
	background: transparent;
}
.forum_theme_name {
	font-size: 14px;
	width: calc(100% - 20px);
	display: block;
	padding: 5px 10px;
}
.forum_theme_inform {
	margin-top: 2px;
	padding: 2px 10px;
	font-size: 12px;
	color: rgba(var(--decorate-bg), 1);
}
.informer_cases{
	width: 30%;
}
.media_preim{
	width: calc(33% + 32px);
}
.preim_items{
	flex-wrap: wrap;
}
.preim_item {
	color: #8dbfbc;
	width: 100%;
	padding: 6px;
	align-items: center;
	font-size: 14px;
	border-radius: 1em;
	margin: 2px 2px;
	background: rgba(var(--main-bg), 0.6);
	line-height: 18px;
	border-left: 3px solid rgba(var(--decorate-bg), 1);
	transition: 0.2s;
}
.preim_item:hover {
    background: #08252b;
}
.preim_item_icon{
	margin-right: 10px;
	background: rgba(var(--second-bg), .2);
	padding: 10px;
	border-radius: inherit;
}
.informer_case_item{
	max-width: 360px;
	padding: 10px;
	border-radius: 1em;
	align-items: center;
	margin: 10px auto;
	border-top: 4px solid rgba(var(--decorate-bg), 1);
	position: relative;
}
.case_item_icon{
	position: relative;
	width: 99px;
	height: 99px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.case_item_icon:after {
	content: "";
	position: absolute;
	background: url(../img/ball.png);
	width: 99px;
	height: 99px;
	-webkit-animation: rotating 5s linear infinite;
	-moz-animation: rotating 5s linear infinite;
	-ms-animation: rotating 5s linear infinite;
	-o-animation: rotating 5s linear infinite;
	animation: rotating 5s linear infinite;
	box-shadow: 0 0 10px 0px #3ca7b124;
	border-radius: 50%;
}
.case_item_content{
	width: calc(100% - 120px);
	align-items: center;
	margin-left: 20px;
}
.case_item_top{
	width: 100%;
}
.case_item_name {
	font-size: 16px;
}
.case_item_name_starter{
	color: #fdd954;
}
.case_item_name_emperium{
	color: #ff56b4;
}
.case_item_price{
	background: rgba(var(--second-bg), .3);
	padding: 4px 14px;
	height: fit-content;
	border-radius: 1em;
	font-size: 12px;
	color: rgba(var(--decorate-bg), 1);
}
.case_item_info {
    display: block;
    margin-top: 5px;
    line-height: 18px;
}
.case_item_bottom{
	text-align: left;
	align-items: center;
	margin-top: 10px;
}
.case_item_buy{
	background: rgb(255 255 255 / 10%);
	padding: 4px 12px;
	border-radius: 1em;
	text-align: center;
	width: 50px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	border-left: 3px solid rgba(var(--decorate-bg), 1);
	border-right: 3px solid rgba(var(--decorate-bg), 1);
	color: #fff;
	transition: 0.2s;
}
.case_item_buy:hover {
	background: rgba(var(--decorate-bg), 1);
	color: rgba(var(--main-bg), 1);
}
.case_item_desc {
	position: relative;
	width: 14px;
	text-align: center;
	padding: 4px;
	font-size: 12px;
	border-radius: 50%;
	margin-left: 10px;
	cursor: pointer;
	transition: 0.2s;
	border: 1px dashed rgb(255 255 255 / 20%);
}
.case_item_desc:hover{
	background: rgba(var(--second-bg), .2);
}
.case_descript{
	position: absolute;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	padding: 10px;
	background: #0c3943;
	border-radius: inherit;
	flex-wrap: wrap;
	display: none;
}
.case_price {
	align-items: center;
	margin: 1px;
	background: rgb(255 255 255 / 5%);
	width: 48%;
	border-radius: 0.5em;
}
.case_price_img {
	margin-right: 10px;
	border-radius: 0.5em;
	border: 1px dashed rgb(255 255 255 / 5%);
	padding: 2px;
	display: flex;
}
.case_price_img img {
	border-radius: 0.5em;
	width: 24px;
}
.case_price_desc{
	color: #fff;
	font-size: 12px;
}
.case_price_desc span{
	background: rgba(var(--decorate-bg), 1);
	padding: 1px 8px;
	border-radius: 1em;
	margin-left: 5px;
}
.case_btninfo {
	position: absolute;
	display: none;
	bottom: 4px;
	left: 30px;
	width: 100px;
	color: #2d9794;
}

.case_descript--active{
	display: flex;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.case_descript--inactive{
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


/*social*/
.socials{
	position: fixed;
	z-index: 2;
	top: 50%;
	transform: translate(0, -50%);
	right: 0px;
	align-items: center;
}
.social_item {
	background: rgba(var(--second-bg), 0.8);
	padding: 0px 20px 0px 0px;
	border-radius: 1em 0em 0em 1em;
	align-items: center;
	display: flex;
	margin-top: 4px;
	box-shadow: -5px 0px rgba(var(--second-bg), 0.2);
	margin-right: -95px;
	transition: 0.4s;
	width: 140px;
}
.social_item:hover{
	margin-right: 0px;
}
.social_item_icon {
	width: 42px;
	display: inline-block;
	padding: 5px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	border-radius: inherit;
	margin-right: 20px;
	font-size: 21px;
}
.social--discord{
	background: #9561d9;
}
.socila--telegram {
	background: #618cd9;
}

.media{
	margin-top: 30px;
	position: relative;
	z-index: 1;
}
.media_container{
	align-items: center;
}

.media_fullgallery_arrow{
	position: absolute;
	top: 50%; 
	transform: translate(0, -50%); 
	font-size: 26px; 
	background: rgba(var(--decorate-bg), .4);
	padding: 12px; 
	border-radius: 1em; 
	cursor: pointer;
	transition: 0.2s;
}
.media_fullgallery_arrow:hover{
	background: rgba(var(--decorate-bg), .4);
}
.media_fullgallery_item--active{
	background: rgba(var(--decorate-bg), .1) !important;
	border-radius: 20px;
}
/*castles*/
.castles{
	position: relative;
	z-index: 1;
	border-radius: 1em;
	width: 100%;
}
.castle_block {
	/*display: flex;*/
	flex-wrap: wrap;
	width: calc(100% - 40px);
	overflow: overlay;
	max-height: 200px;
	padding-right: 20px;
	margin: 10px;
}
.castle_item > .castle_name, .castle_leader{
	border-radius: 2em;
	display: flex;
	align-items: center;
	margin: 0px 1px;
}
.castle_name {
	width: 120px;
}
.castle_siege {
	width: 80px;
	font-size: 10px;
	color: rgba(var(--decorate-bg), 1);
	display: flex;
	justify-content: center;
}
.castle_leader {
	width: 120px;
	word-spacing: initial;
	overflow: hidden;
	white-space: nowrap;
	font-size: 12px;
	display: flex;
	align-items: center;
	background: rgba(var(--second-bg), .2);
	padding: 10px;
}
.castle_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 1px 1px;
	border-radius: 1em;
	background: rgba(var(--second-bg), 0.2);
}
.castle_icon {
	width: 32px;
	height: 32px;
	padding: 2px;
	border-radius: 1em;
	margin-right: 5px;
	background: rgba(var(--second-bg), .1);
}
.castle_inform {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	text-align: center;
	padding: 4px;
	font-size: 12px;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.2s;
	border: 1px dashed rgb(255 255 255 / 20%);
	margin-right: 5px;
	transition: 0.2s;
}
.castle_inform:hover {
	background: rgba(var(--second-bg), .2);
}
.castle_info_input img{
	margin-right: 4px;
}
.castle_block::-webkit-scrollbar {
	width: 0.2em;
	height: 0.2em;
}

.castle_block::-webkit-scrollbar-thumb {
	background: rgba(var(--decorate-bg), 1);
}

.castle_block::-webkit-scrollbar-track {
	background: rgba(var(--second-bg), 0.2);
}
.castle_fullinfo {
	display: none;
	position: absolute;
	width: 200px;
	background: rgba(var(--main-bg), 1);
	top: 50%;
	right: -200px;
	transform: translate(0, -50%);
	border-radius: 1em;
	padding: 10px;
	z-index: 99;
	box-shadow: 0 0 10px 5px rgba(var(--second-bg), .2);
}
.castle_fullinfo:before {
	content: "▾";
	color: rgba(var(--main-bg), 1);
	font-size: 21px;
	position: absolute;
	top: -14px;
	right: 10px;
	transform: rotate(61deg);
}
.castle_fullinfo--active{
	display: block;
}
.castle_fullinfo_desc{
	font-size: 12px;
	text-align: center;
}
.castle_preim_item{
	margin: 2px;
	background: rgba(var(--second-bg), .4);
	padding: 2px 8px;
	color: rgba(var(--decorate-bg), 1);
	border-radius: 1em;
	text-transform: uppercase;
	font-size: 12px;
}
.castle_attack_desc{
	margin-top: 10px;
	text-align: center;
	font-size: 12px;
	margin-bottom: 5px;
}
.castle_fullinfo_attack {
	text-align: center;
	font-size: 12px;
	background: #ff6a0036;
	padding: 5px;
	border-radius: 1em;
}
.castle_fullinfo_attack span {
	background: rgb(255 255 255 / 10%);
	padding: 2px 6px;
	margin-top: 2px;
	display: inline-block;
	border-radius: 1em;
}
.castle_fullinfo_preim {
	background: #00ff371f;
	padding: 5px;
	border-radius: 1em;
	margin-top: 5px;
}
/*media screen*/
.media_screen {
	width: 63%;
	margin-left: 20px;
	border-radius: 1em;
}
.media_screen_block {
	width: 824px;
	overflow: hidden;
}
.media_screen_items{
	width: 100%;
	transition: 0.2s;
}
.media_screen_container {
	position: relative;
	z-index: 1;
	border-radius: 1em;
	padding: 0px 10px 10px;
}

.media_screen_item {
	width: 186px;
	height: 130px;
	background: rgba(var(--second-bg), 0.2);
	margin: 10px;
	border-radius: 1em;
	box-sizing: border-box;
	position: relative;
	align-items: center;
	z-index: 2;
	font-size: 14px;
	color: rgba(var(--decorate-bg), 0.9);
}
.media_screen_item:after {
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	content: "";
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: inherit;
	transform: translate(-50%, -50%);
	border: 1px dashed rgba(var(--second-bg), 0.2);
	transition: 0.2s;
}
.media_screen_item:hover:after {
	background: rgba(var(--second-bg), 0.2);
}

.media_screen_item iframe{
	width: inherit !important;
	height: 100%;
	border-radius: inherit;
	position: relative;
	z-index: 3;
	cursor: pointer;
}
.media_screen_item img{
	width: inherit;
	height: 100%;
	border-radius: inherit;
	position: relative;
	z-index: 3;
	cursor: pointer;
}
.media_main_Fullitem_block{
	width: max-content;
	height: 75%;
	text-align: center;
	margin: 20px auto;
	top: 50%;
	transform: translate(0px, -50%);
	background: rgb(0 0 0 / 70%);
	padding: 1em;
	border-radius: 1em;
}
.media_main_Fullitem{
	width: auto !important;
	text-align: center; 
	margin: 20px auto;
}
.media_arrow {
	display: flex;
	align-items: center;
	font-size: 16px;
}

.media_arrow span {
	height: 24px;
	width: 24px;
	cursor: pointer;
	background: #2d9794;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.2s;
	color: rgba(var(--second-bg), 0.8);
}
.media_arrow span:hover {
	background: rgba(var(--second-bg), 0.1);
}
.media_arrow--inactive {
	background: rgba(var(--decorate-bg), 0.2) !important;
	cursor: no-drop !important;
}
.media_over {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgb(37 42 42 / 95%);
	top: 0px;
	left: 0px;
	z-index: 9999;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.media_over--active{
	display: block;
}
.media_miniitem {
	width: 80px;
	height: 50px;
	margin: 2px;
	background: rgba(var(--second-bg), 0.1);
}
.media_miniitem img {
	width: 80px;
	height: 40px;
	margin: 2px;
	background: transparent;
	background-size: contain;
}
.media_miniitem:after{
	display: none;
}
.media_close {
	cursor: pointer;
	position: absolute;
	right: 10%;
	top: 8%;
	background: rgba(var(--second-bg), .1);
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border-radius: 50%;
	transition: 0.2s;
}
.media_close:hover{
	background: rgba(var(--second-bg), .3);
}
.media_object{
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/*footer*/
.footer{
	background: rgba(var(--second-bg), 0.5);
	margin-top: 30px;
	position: relative;
}
.footer_container{
	padding: 10px;
	align-items: center;
}
.footer_copy {
	font-size: 14px;
	width: 33%;
}
.footer_copy span{
	display: block;
	font-size: 12px;
	color: rgba(var(--decorate-bg), 1);
}
.footer_links {
	width: 20%;
	text-align: center;
	border-left: 1px dashed rgb(255 255 255 / 10%);
	border-right: 1px dashed rgb(255 255 255 / 10%);
	padding: 5px;
}
.footer_links a{
	display: inline;
	background: rgba(var(--decorate-bg), .2);
	padding: 4px 12px;
	border-radius: 1em;
	font-size: 12px;
	transition: 0.2s;
}
.footer_links a:hover{
	background: rgba(var(--decorate-bg), 1);
}
.footer_vote{
	align-items: center;
	width: 33%;
}
.footer_vote a{
	align-items: center;
	display: flex;
	opacity: 0.7;
	transition: 0.2s;
}
.footer_vote a:hover{
	opacity: 1;
}
.footer_vote img {
	height: 32px;
	margin: 0px 2px;
	border-radius: 0.5em;
}
/*anim*/
/*---*/
@-webkit-keyframes startPlayAnim {
	0% {box-shadow: -2px 0px 0 0px rgba(var(--decorate-bg), 1), -8px 0px 0 0px rgb(93 255 195 / 20%), 2px 0px 0 0px rgba(var(--decorate-bg), 1), 8px 0px 0 0px rgb(93 255 195 / 20%);}
	50% {box-shadow: -8px 0px 0 0px rgba(var(--decorate-bg), 1), -16px 0px 0 0px rgb(93 255 195 / 20%), 8px 0px 0 0px rgba(var(--decorate-bg), 1), 16px 0px 0 0px rgb(93 255 195 / 20%);}
	100% {box-shadow: -2px 0px 0 0px rgba(var(--decorate-bg), 1), -6px 0px 0 0px rgb(93 255 195 / 20%), 2px 0px 0 0px rgba(var(--decorate-bg), 1), 6px 0px 0 0px rgb(93 255 195 / 20%);}
}
@keyframes startPlayAnim {
	0% {box-shadow: -2px 0px 0 0px rgba(var(--decorate-bg), 1), -8px 0px 0 0px rgb(93 255 195 / 20%), 2px 0px 0 0px rgba(var(--decorate-bg), 1), 8px 0px 0 0px rgb(93 255 195 / 20%);}
	50% {box-shadow: -8px 0px 0 0px rgba(var(--decorate-bg), 1), -16px 0px 0 0px rgb(93 255 195 / 20%), 8px 0px 0 0px rgba(var(--decorate-bg), 1), 16px 0px 0 0px rgb(93 255 195 / 20%);}
	100% {box-shadow: -2px 0px 0 0px rgba(var(--decorate-bg), 1), -6px 0px 0 0px rgb(93 255 195 / 20%), 2px 0px 0 0px rgba(var(--decorate-bg), 1), 6px 0px 0 0px rgb(93 255 195 / 20%);}
}
/*---*/
@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*---*/
@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
/*---*/
@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
/*---*/
@keyframes noise-anim {
	0% {
		clip: rect(100px, 9999px, 54px, 0);
	}
	5% {
		clip: rect(86px, 9999px, 9px, 0);
	}
	10% {
		clip: rect(25px, 9999px, 84px, 0);
	}
	15% {
		clip: rect(95px, 9999px, 96px, 0);
	}
	20% {
		clip: rect(24px, 9999px, 3px, 0);
	}
	25% {
		clip: rect(11px, 9999px, 91px, 0);
	}
	30% {
		clip: rect(56px, 9999px, 42px, 0);
	}
	35% {
		clip: rect(5px, 9999px, 56px, 0);
	}
	40% {
		clip: rect(75px, 9999px, 86px, 0);
	}
	45% {
		clip: rect(64px, 9999px, 41px, 0);
	}
	50% {
		clip: rect(72px, 9999px, 19px, 0);
	}
	55% {
		clip: rect(94px, 9999px, 40px, 0);
	}
	60% {
		clip: rect(84px, 9999px, 57px, 0);
	}
	65% {
		clip: rect(9px, 9999px, 91px, 0);
	}
	70% {
		clip: rect(83px, 9999px, 72px, 0);
	}
	75% {
		clip: rect(72px, 9999px, 96px, 0);
	}
	80% {
		clip: rect(39px, 9999px, 38px, 0);
	}
	85% {
		clip: rect(52px, 9999px, 12px, 0);
	}
	90% {
		clip: rect(58px, 9999px, 48px, 0);
	}
	95% {
		clip: rect(15px, 9999px, 46px, 0);
	}
	100% {
		clip: rect(95px, 9999px, 46px, 0);
	}
}
@keyframes noise-anim-2 {
	0% {
		clip: rect(59px, 9999px, 52px, 0);
	}
	5% {
		clip: rect(93px, 9999px, 94px, 0);
	}
	10% {
		clip: rect(41px, 9999px, 36px, 0);
	}
	15% {
		clip: rect(86px, 9999px, 60px, 0);
	}
	20% {
		clip: rect(39px, 9999px, 62px, 0);
	}
	25% {
		clip: rect(80px, 9999px, 56px, 0);
	}
	30% {
		clip: rect(71px, 9999px, 36px, 0);
	}
	35% {
		clip: rect(63px, 9999px, 71px, 0);
	}
	40% {
		clip: rect(1px, 9999px, 95px, 0);
	}
	45% {
		clip: rect(89px, 9999px, 55px, 0);
	}
	50% {
		clip: rect(4px, 9999px, 70px, 0);
	}
	55% {
		clip: rect(72px, 9999px, 95px, 0);
	}
	60% {
		clip: rect(12px, 9999px, 35px, 0);
	}
	65% {
		clip: rect(83px, 9999px, 21px, 0);
	}
	70% {
		clip: rect(27px, 9999px, 37px, 0);
	}
	75% {
		clip: rect(78px, 9999px, 5px, 0);
	}
	80% {
		clip: rect(76px, 9999px, 86px, 0);
	}
	85% {
		clip: rect(100px, 9999px, 67px, 0);
	}
	90% {
		clip: rect(86px, 9999px, 22px, 0);
	}
	95% {
		clip: rect(98px, 9999px, 85px, 0);
	}
	100% {
		clip: rect(29px, 9999px, 71px, 0);
	}
}