/* ----------------------------- */
/* ----------- imports --------- */
/* ----------------------------- */

/* Importar fuente épica estilo World of Warcraft */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=MedievalSharp&family=Almendra:wght@400;700&display=swap');

@font-face {
	font-family: Beaufort;
	src: url(../fonts/beaufort.otf);
}

@font-face {
	font-family: Beaufort Bold;
	src: url(../fonts/beaufort-bold.ttf);
}

@font-face {
	font-family: Open Sans;
	src: url(../fonts/open-sans.ttf);
}

@font-face {
	font-family: Open Sans Bold;
	src: url(../fonts/open-sans-bold.ttf);
}

/* ----------------------------- */
/* ---------- settings --------- */
/* ----------------------------- */

html,
body,
header,
nav,
section,
aside,
article,
footer,
div,
span,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: Open Sans;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

/* ----------------------------- */
/* ----------- inputs ---------- */
/* ----------------------------- */

input,
button,
select,
textarea {
	outline: none;
}

::-webkit-input-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

::-moz-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

:-moz-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

:-ms-input-placeholder {
	opacity: 1;
	transition: opacity 0.3s ease;
}

:focus::-webkit-input-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

:focus::-moz-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

:focus:-moz-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

:focus:-ms-input-placeholder {
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* ----------------------------- */
/* --------- structure --------- */
/* ----------------------------- */

body {
	background: #0c0a0a;
}

.wrapper {
	width: 100%;
	max-width: 1920px;
	min-height: 100vh;
	position: relative;
	margin: 0 auto;
	overflow-x: hidden;
}

#index_head {
	width: 100%;
	height: 911px;
	background: url(../images/bg/index_head_bg.jpg) top center no-repeat;
	position: relative;
	transition: all 0.3s ease;
	filter: brightness(1) saturate(1);
}

#index_head:hover {
	filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 20px rgba(255, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(0, 0, 255, 0.3));
}

#inner_head {
	width: 100%;
	height: 707px;
	background: url(../images/bg/inner_head_bg.jpg) top center no-repeat;
	position: relative;
}

#content {
	width: 100%;
	background: url(../images/bg/top_content_bg.png) top center no-repeat,
		url(../images/bg/bottom_content_bg.png) bottom center no-repeat,
		url(../images/bg/content_bg.jpg) top center repeat-y;
}

#footer {
	width: 100%;
	height: 322px;
	background: url(../images/bg/footer_bg.jpg) top center no-repeat;
}

.center {
	width: 1240px;
	margin: 0 auto;
}

/* ----------------------------- */
/* -------- navigation --------- */
/* ----------------------------- */

#index_head>.center,
#inner_head>.center,
#cp>.center {
	padding-top: 42px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

nav {
	width: 100%;
	height: 95px;
	background: url(../images/bg/center_nav_bg.png) top center no-repeat;
	position: relative;
	z-index: 3;
}

nav:after {
	content: '';
	width: 200px;
	height: 137px;
	background: url(../images/bg/left_nav_bg.png) top center no-repeat;
	position: absolute;
	right: 870px;
	top: -20px;
	z-index: 1;
}

nav:before {
	content: '';
	width: 200px;
	height: 137px;
	background: url(../images/bg/right_nav_bg.png) top center no-repeat;
	position: absolute;
	right: 150px;
	top: -20px;
	z-index: 1;
}

nav>.nav_content {
	width: 100%;
	height: 88px;
	left: 220px;
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

nav>.nav_content>.open_nav_button {
	width: 85px;
	height: 85px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	text-transform: uppercase;
	color: #6f6256;
	text-shadow: 0px 2px 2px #000000;
	cursor: pointer;
	transition: all .2s ease-in-out;
	display: none;
}

nav>.nav_content>.open_nav_button:hover {
	color: #f3b451;
}

nav>.nav_content>.nav_links {
	width: calc(100% - 250px);
	/* Ancho original restaurado */
	height: 90px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

nav>.nav_content>.nav_links>.link {
	margin-left: 0px;
	margin-right: 30px;
	/* Reducido de 40px a 30px para más espacio */
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	z-index: 1;
}

nav>.nav_content>.nav_links>.active>a {
	color: #ffa647 !important;
}

nav>.nav_content>.nav_links>.link:nth-child(1) {
	margin-left: 30px;
	/* Reducido de 40px a 30px */
}

nav>.nav_content>.nav_links>.link:not(:nth-child(1)) {
	border-left: 1px solid rgba(39, 33, 31, 0.51);
	padding-left: 30px;
	/* Reducido de 40px a 30px */
}

nav>.nav_content>.nav_links>.link>a {
	font-family: Beaufort;
	font-size: 20px;
	text-transform: uppercase;
	color: #9b9085;
	text-shadow: 0px 2px 2px #000000;
	transition: color .2s ease-in-out;
}

nav>.nav_content>.nav_links>.link>span {
	font-family: Beaufort;
	font-size: 20px;
	text-transform: uppercase;
	color: #9b9085;
	text-shadow: 0px 2px 2px #000000;
	transition: color .2s ease-in-out;
	cursor: pointer;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

nav>.nav_content>.nav_links>.link>span>i {
	margin-left: 8px;
}

nav>.nav_content>.nav_links>.link>a:hover,
nav>.nav_content>.nav_links>.link>span:hover,
.dropbox>a:hover {
	color: #f2ceaa;
}

.dropbox_button {
	position: relative;
	z-index: 2 !important;
}

.dropbox {
	width: 185px;
	background: url(../images/bg/mini_nav_bg.jpg) #160a0b bottom center;
	border: 1px solid #261c1a;
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
	top: 58px;
	left: calc((100% - 185px + 20px) / 2);
	overflow: hidden;
	display: none;
}

.dropbox>a {
	width: 100%;
	display: block;
	padding: 18px 25px;
	color: #fff;
	font-family: Beaufort;
	font-size: 14px;
	text-transform: uppercase;
	color: #9b9085;
	text-shadow: 0px 2px 2px #000000;
	transition: all .2s ease-in-out;
	border-bottom: 1px solid #1e1310;
	text-align: center;
}

nav>.nav_content>.login_button {
	width: 208px;
	height: 50px;
	top: 3px;
	right: 440px;
	/* Posición original del botón LOGIN */
	background: url(../images/login_button.png) top center no-repeat;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

nav>.nav_content>.login_button:hover .hover {
	opacity: 1;
}

nav>.nav_content>.login_button>.icon {
	position: relative;
	z-index: 2;
	margin: -20px;
}

nav>.nav_content>.login_button>.hover {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all .3s ease-in-out;
}

nav>.nav_content>.login_button>span {
	max-width: 160px;
	color: #3d1601;
	font-family: Beaufort Bold;
	font-size: 15px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	margin-left: 15px;
	position: relative;
	z-index: 2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

nav>.nav_content>.login_button:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background: rgba(255, 255, 255, 0.5);
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all .2s ease-in-out;
}

nav>.nav_content>.nav_links>.logout_link {
	margin-left: 0px;
	/* Reducido un poquito más para mover el botón hacia la izquierda */
	margin-right: 15px;
	/* Margen derecho moderado */
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	z-index: 10;
	/* Z-index más alto para asegurar visibilidad */
	border-left: 1px solid rgba(39, 33, 31, 0.51);
	padding-left: 15px;
	/* Reducido un poquito más el padding */
}

nav>.nav_content>.nav_links>.logout_link>a {
	font-size: 20px;
	color: #9b9085;
	text-shadow: 0px 2px 2px #000000;
	transition: color .2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

nav>.nav_content>.nav_links>.logout_link>a:hover {
	color: #f2ceaa;
}



/* ----------------------------- */
/* ----------- logo ------------ */
/* ----------------------------- */

.logo {
	display: block;
	position: relative;
	margin-top: 10px;
	/* Reducido de 20px a 10px para subir el logo */
}

.logo>.logo_img {
	width: 350px;
	/* Aumentado de 300px a 350px para hacer el logo más grande */
	height: auto;
	/* Mantiene la proporción */
	position: relative;
	z-index: 1;
}

.logo>.logo_hover_img {
	position: absolute;
	width: 350px;
	/* Mismo tamaño que logo_img - aumentado a 350px */
	height: auto;
	/* Mantiene la proporción */
	z-index: 2;
	top: 0px;
	opacity: 0;
	transition: all .3s ease-in-out;
	left: 0px;

}

.logo:hover .logo_hover_img {
	opacity: 0.5;
}

/* ----------------------------- */
/* -------- head-content ------- */
/* ----------------------------- */

.head_content {
	width: 100%;
	position: relative;
}

/* ------------ info ----------- */

.head_content>.info {
	width: 535px;
	height: 200px;
	margin: 0 auto;
}

.sub-title,
.head_content>.info>.title {
	width: 100%;
	font-family: 'MedievalSharp', 'Uncial Antiqua', 'Beaufort Bold', serif;
	font-size: 52px;
	/* Aumentado de 42px a 52px */
	font-weight: 900;
	color: #ffd700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 4px;
	/* Aumentado el espaciado */
	margin-top: -10px;
	margin-bottom: 15px;

	/* Efectos de sombra épicos */
	text-shadow:
		0 0 5px #ffd700,
		0 0 10px #ff8c00,
		0 0 15px #ff6600,
		3px 3px 0px #8b4513,
		6px 6px 0px #654321,
		9px 9px 0px #4a2c17,
		2px 2px 0px #000000;

	/* Nueva animación de pulso épico */
	animation: epicPulse 2.5s ease-in-out infinite;

	/* Mejor renderizado de texto */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

	/* Transformación 3D */
	transform: perspective(600px) rotateX(12deg);
	transform-style: preserve-3d;

	/* Transición suave */
	transition: all 0.4s ease;
}

.head_content>.info>.title:hover {
	transform: perspective(600px) rotateX(0deg) scale(1.12);
	text-shadow:
		0 0 10px #ffd700,
		0 0 20px #ffd700,
		0 0 30px #ff8c00,
		0 0 40px #ff6600,
		4px 4px 0px #8b4513,
		8px 8px 0px #654321,
		12px 12px 0px #4a2c17,
		2px 2px 0px #000000;
	color: #ffed4e;
	animation: none;
	/* Pausa la animación durante hover */
}

/* Animación de pulso épico con escalado y brillo */
@keyframes epicPulse {
	0% {
		transform: perspective(600px) rotateX(12deg) scale(1);
		text-shadow:
			0 0 5px #ffd700,
			0 0 10px #ff8c00,
			0 0 15px #ff6600,
			3px 3px 0px #8b4513,
			6px 6px 0px #654321,
			9px 9px 0px #4a2c17,
			2px 2px 0px #000000;
	}

	50% {
		transform: perspective(600px) rotateX(8deg) scale(1.08);
		text-shadow:
			0 0 8px #ffd700,
			0 0 16px #ffd700,
			0 0 24px #ff8c00,
			0 0 32px #ff6600,
			3px 3px 0px #8b4513,
			6px 6px 0px #654321,
			9px 9px 0px #4a2c17,
			2px 2px 0px #000000;
		color: #ffed4e;
	}

	100% {
		transform: perspective(600px) rotateX(12deg) scale(1);
		text-shadow:
			0 0 5px #ffd700,
			0 0 10px #ff8c00,
			0 0 15px #ff6600,
			3px 3px 0px #8b4513,
			6px 6px 0px #654321,
			9px 9px 0px #4a2c17,
			2px 2px 0px #000000;
	}
}

.sub-title {
	font-size: 28px;
}

.sub-title {
	font-size: 24px;
}

.head_content>.info>.text {
	font-family: Open Sans;
	font-size: 16px;
	color: #837970;
	text-align: center;
	line-height: 1.6;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/* -------- start button ------- */

.start_button {
	display: flex;
	/* Cambiado de block a flex */
	width: 276px;
	height: 72px;
	margin: 0;
	/* Eliminado margin auto para permitir layout lado a lado */
	position: relative;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 5px;
	/* Reducido margen superior */
}

.start_button:hover .hover {
	opacity: 1;
}

.start_button>.bg {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.start_button>span {
	width: 100%;
	position: relative;
	z-index: 2;
	font-family: Beaufort Bold;
	font-size: 30px;
	color: #38211c;
	text-align: center;
	text-shadow: 0px 0px 5px rgb(255, 234, 175), 0px 0px 5px rgb(255, 234, 175), 0px 0px 5px rgb(255, 234, 175), 0px 0px 5px rgb(255, 234, 175);
}

.start_button>.hover {
	content: '';
	position: absolute;
	z-index: 3;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all .3s ease-in-out;
}

.social {
	width: 1240px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	position: absolute;
	bottom: 110px;
	left: calc((100% - 1240px) / 2);
}

.social>.left,
.social>.right {
	width: 266px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}





.social_link {
	width: 85px;
	height: 85px;
	border-radius: 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.social_link:hover .hover {
	opacity: 0.8;
}

.social_link>.bg {
	width: 162px;
	height: 162px;
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.social_link>.hover {
	width: 162px;
	height: 162px;
	position: absolute;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all .3s ease-in-out;
}

/* ----------------------------- */
/* -------- home content ------- */
/* ----------------------------- */

#content>.center {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 40px 0px;
	gap: 30px;
}

#content>.center>.news {
	width: calc(100% - 280px - 30px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: stretch;
	gap: 20px;
}



#content>.center>.all_news {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
}

#content>.center>.full_news {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-self: stretch;
}

#content>.center>aside {
	width: 280px;
	align-self: stretch;
	border: 1px solid rgba(41, 32, 30, 0.48);
	background: rgba(29, 15, 11, 0.41);
	border-radius: 4px;
	overflow: hidden;
}

/* ----------------------------- */
/* ------------ news ----------- */
/* ----------------------------- */

article {
	width: 250px;
	align-self: stretch;
	border: 1px solid #251714;
	background: url(../images/bg/news_bg.jpg) top center;
	border-radius: 4px;
	padding-bottom: 80px;
	position: relative;
	transition: all .2s ease-in-out;
}

article:hover {
	filter: brightness(125%);
}









.all_news>article {
	width: calc((100% - 20px) / 2);
	margin-bottom: 20px;
}

.full_news>article {
	width: 794px;
}

.full_news>article>.text {
	height: initial !important;
	overflow: none !important;
	-webkit-column-width: none !important;
	-moz-column-width: none !important;
	column-width: none !important;
}

.pagination {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
}

.pagination>li {
	list-style: none;
	margin-bottom: 15px;
}

.pagination>li a,
.pagination>li.disabled {
	width: 40px;
	height: 40px;
	background: rgba(84, 49, 36, 0.3);
	border-radius: 4px;
	border: 1px solid #382622;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 5px;
	font-family: Beaufort Bold;
	font-size: 18px;
	color: #e4cdc4;
	opacity: 0.5;
	transition: all .2s ease-in-out;
}

.pagination>li.disabled {
	opacity: 0.2;
	margin-top: 0;
}

.pagination>li a:hover {
	opacity: 1;
	filter: brightness(130%);
}

.pagination>li.active a {
	opacity: 1;
	background: rgba(169, 81, 49, 0.3);
	border: 1px solid #75482c;
}

article>.img {
	width: calc(100% - 12px);
	height: 168px;
	margin: 6px;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid #261e1a;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
}

article>.title {
	width: 100%;
	padding: 15px 20px;
}

article>.title>a {
	font-family: Beaufort Bold;
	font-size: 20px;
	color: #e4cdc4;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
}

article>.title>a:hover {
	color: #ffa635;
}

article>.text {
	width: 100%;
	height: 98px;
	padding: 0px 20px;
	font-family: Open Sans;
	font-size: 14px;
	color: #796d69;
	overflow: hidden;
	-webkit-column-width: 100%;
	-moz-column-width: 100%;
	column-width: 100%;
}

article>.info {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding: 0px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 25px;
}

article>.info>.date {
	font-family: Open Sans Bold;
	font-size: 12px;
	color: #614e43;
}

article>.info>.news_button {
	width: 128px;
	height: 32px;
	position: relative;
	background: url(../images/news_button.png) top center;
	color: #3d1601;
	font-family: Beaufort Bold;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

article>.info>.news_button:hover:after {
	opacity: 1;
}

article>.info>.news_button:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
	opacity: 0;
	transition: all .3s ease-in-out;
	background: url(../images/login_button_hover.png) top center;
	background-size: 100% 100%;
}

.more_news {
	width: 100%;
	height: 60px;
	border: 1px solid #251714;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	font-family: Beaufort;
	font-size: 18px;
	color: #7f736c;
	text-transform: uppercase;
	transition: all .3s ease-in-out;
	background: rgba(25, 12, 8, 0.5);
}

.more_news:hover {
	letter-spacing: 1px;
	color: #b2a699;
	background: rgba(47, 29, 23, 0.5);
	border: 1px solid #31221e;
}

/* ----------------------------- */
/* ------------ stat ----------- */
/* ----------------------------- */

.stat_switch {
	width: calc(100% - 12px);
	height: 56px;
	margin: 6px;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
	background: url(../images/button_center.png) top center;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.stat_switch:after {
	content: '';
	width: 44px;
	height: 56px;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_left.png) top center;
}

.stat_switch:before {
	content: '';
	width: 44px;
	height: 56px;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_right.png) top center;
}

.stat_switch>.button {
	width: 50%;
	height: 100%;
	background: rgba(25, 12, 8, 0.5);
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: Beaufort Bold;
	font-size: 20px;
	color: #100a09;
	text-shadow: 0px 1px 1px rgba(123, 113, 99, 0.5);
	transition: all .3s ease-in-out;
}

.stat_switch>.button:hover {
	background: rgba(23, 16, 15, 0.28);
}

.stat_switch>.active {
	background: none !important;
}

.stat_bg {
	width: 100%;
	height: calc(100% - 56px - 12px);
	position: relative;
}

.stat_bg>.stat_block {
	width: 100%;
	height: 100%;
	padding: 0px 25px;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: scale(0, 1);
	transition: all .3s ease-in-out;
	opacity: 0;
}

.stat_bg>.active {
	transform: scale(1, 1);
	opacity: 1;
}

.stat_bg>.stat_block>.line {
	width: 100%;
	height: calc(100% / 10);
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

.stat_bg>.stat_block>.line:not(:last-child) {
	border-bottom: 1px solid rgba(41, 32, 30, 0.48);
}

.stat_bg>.stat_block>.line>.number {
	width: 30px;
	height: 31px;
	background: url(../images/icons/top_4.png);
	background-position: 0px 0px;
	font-family: Beaufort;
	font-size: 14px;
	color: #c8b2a9;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.stat_bg>.stat_block>.line:nth-child(1)>.number {
	background: url(../images/icons/top_1.png);
	padding-left: 0px;
	color: #211612;
	font-family: Beaufort Bold;
	font-size: 16px;
}

.stat_bg>.stat_block>.line:nth-child(2)>.number {
	background: url(../images/icons/top_2.png);
	padding-left: 0px;
	color: #211612;
	font-family: Beaufort Bold;
	font-size: 16px;
}

.stat_bg>.stat_block>.line:nth-child(3)>.number {
	background: url(../images/icons/top_3.png);
	padding-left: 0px;
	color: #211612;
	font-family: Beaufort Bold;
	font-size: 16px;
}

.stat_bg>.stat_block>.line>.name {
	width: calc(100% - 30px - 15px - 50px - 15px);
	color: #695e5a;
	font-size: 14px;
	margin-left: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stat_bg>.stat_block>.line:nth-child(1)>.name {
	font-family: Open Sans Bold;
	color: #cca144;
}

.stat_bg>.stat_block>.line:nth-child(2)>.name {
	font-family: Open Sans Bold;
	color: #afafaf;
}

.stat_bg>.stat_block>.line:nth-child(3)>.name {
	font-family: Open Sans Bold;
	color: #c79369;
}

.stat_bg>.stat_block>.line>.count {
	width: 50px;
	font-family: Open Sans Bold;
	color: #bcb0ab;
	font-size: 14px;
	text-align: right;
	margin-left: auto;
}

/* ----------------------------- */
/* ----------- forms ----------- */
/* ----------------------------- */

.inner_content>.center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center !important;
	align-items: flex-start;
}

.inner_content>.center>.title {
	width: 100%;
	font-family: Beaufort Bold;
	font-size: 40px;
	color: #ffb676;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: 40px;
}

.inner_form {
	width: 540px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.form-group {
	width: 100%;
}

.inner_form input {
	width: 100%;
	height: 60px;
	background: rgba(37, 19, 12, 0.24);
	border: 1px solid #342d29;
	border-radius: 4px;
	font-family: Beaufort;
	font-size: 24px;
	color: #dbc9b8;
	text-align: center;
	margin-bottom: 20px;
}

.help-block {
	color: #d03a26 !important;
	margin-bottom: 10px !important;
	text-align: center !important;
}

.inner_form button {
	width: 100%;
	height: 61px;
	overflow: hidden;
	border-radius: 4px;
	background: url(../images/button_orange_center.png) top center;
	background-size: auto 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
	margin-top: 10px;
}

.inner_form button:hover {
	filter: brightness(130%);
}

.inner_form button:after {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_orange_left.png) top center;
	background-size: 100% 100%;
}

.inner_form button:before {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_orange_right.png) top center;
	background-size: 100% 100%;
}

.inner_form button span {
	position: relative;
	z-index: 2;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 26px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.inner_form .captcha {
	width: 302px;
	height: 76px;
	margin-bottom: 20px;
	opacity: 0.5;
	transition: all .3s ease-in-out;
}

.inner_form .captcha:hover {
	opacity: 1;
}

.inner_form .form_link {
	margin-top: 20px;
	font-family: Beaufort;
	font-size: 24px;
	color: #906f50;
	text-decoration: underline;
	transition: all .3s ease-in-out;
	text-align: center;
}

.inner_form .form_link:hover {
	color: #d4baa2;
}

.inner_form textarea {
	width: 100%;
	height: 150px;
	background: rgba(37, 19, 12, 0.24);
	border: 1px solid #342d29;
	border-radius: 4px;
	font-family: Beaufort;
	font-size: 24px;
	color: #dbc9b8;
	margin-bottom: 20px;
	padding: 13px 20px;
	resize: none;
}

.contact_form {
	width: 626px;
	justify-content: space-between;
}

.contact_form .name,
.contact_form .mail {
	width: calc(50% - 10px);
	text-align: left;
	padding: 13px 20px;
}

.contact_form .title {
	text-align: left;
	padding: 13px 20px;
}

.contact_form button {
	width: calc(100% - 322px);
	height: 76px;
	margin-top: 0 !important;
}

.contact_info {
	width: 626px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	border-top: 1px solid #231d1b;
	margin-top: 10px;
}

.contact_info>.title {
	width: 100%;
	font-family: Beaufort Bold;
	font-size: 24px;
	color: #b19882;
	text-transform: uppercase;
	text-align: center;
	padding: 20px 0px;
}

.contact_info>.block {
	width: 120px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	font-family: Beaufort;
	font-size: 18px;
	color: #c8bbbb;
	margin-top: 10px;
}

.contact_info>.center_block {
	width: calc(100% - 120px - 120px);
}

.contact_info>.block>.name {
	width: 100%;
	font-family: Open Sans;
	font-size: 14px;
	color: #6f615e;
	text-align: center;
	margin-top: 7px;
	margin-bottom: 5px;
}

/* ----------------------------- */
/* ------------- faq ----------- */
/* ----------------------------- */

.question {
	width: 100%;
	margin-bottom: 7px;
}

.question>.title {
	width: 100%;
	height: 75px;
	border: 1px solid #201b1a;
	border-radius: 4px;
	background: rgba(128, 115, 110, 0.07);
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	transition: all .3s;
}

.question>.title:hover {
	filter: brightness(140%);
}

.question>.title>.number {
	width: 66px;
	font-family: Beaufort Bold;
	font-size: 26px;
	color: #96847c;
	text-align: center;
}

.question>.title>.title_text {
	width: calc(100% - 66px - 66px);
	font-family: Beaufort;
	font-size: 26px;
	color: #d1b193;
	text-align: left;
	transition: all .5s;
}

.question>.title>.title_text_active {
	color: #f6ede4;
}

.question>.title>.arrow {
	width: 66px;
	font-size: 18px;
	color: #9b9085;
	text-align: center;
	transform: scale(1, 1);
	transition: all .5s;
}

.question>.title>.arrow_active {
	transform: scale(1, -1);
}

.question>.text {
	width: 100%;
	padding: 20px 30px;
	font-family: Open Sans;
	font-size: 18px;
	color: #96847c;
	text-align: left;
	border: 1px solid #201b1a;
	border-radius: 4px;
	background: rgba(128, 115, 110, 0.04);
	margin-top: 2px;
	overflow: hidden;
	opacity: 1;
	display: none;
}

/* ----------------------------- */
/* ------- how to start -------- */
/* ----------------------------- */

.texture_block {
	width: 100%;
	background: url(../images/bg/hts_block_block.jpg) top center;
	position: relative;
	margin-bottom: 50px;
}

.texture_block:after {
	content: '';
	width: 100%;
	height: 150px;
	background: url(../images/bg/top_hts_block_block.png) top center;
	position: absolute;
	z-index: 1px;
	top: 0px;
	left: 0px;
}

.texture_block:before {
	content: '';
	width: 100%;
	height: 150px;
	background: url(../images/bg/bottom_hts_block_block.png) top center;
	position: absolute;
	z-index: 1px;
	bottom: 0px;
	left: 0px;
}

.texture_block>.content {
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 30px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.texture_block>.content>.step {
	width: 136px;
	height: 136px;
	background: url(../images/step_bg.png) top center;
	position: relative;
	margin-bottom: -72px;
	margin-top: -30px;
	top: -68px;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.texture_block>.content>.step>span:nth-child(1) {
	width: 100%;
	margin-top: 34px;
	text-align: center;
	font-family: Beaufort Bold;
	font-size: 36px;
	color: #3d290e;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.texture_block>.content>.step>span:nth-child(2) {
	width: 100%;
	margin-top: -36px;
	text-align: center;
	font-family: Beaufort Bold;
	font-size: 18px;
	color: #3d290e;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.texture_block>.content>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 26px;
	color: #e38c3d;
	text-align: center;
	text-transform: uppercase;
	margin-top: -3px;
}

.texture_block>.content>.title>span {
	font-family: Beaufort;
	font-size: 26px;
	color: #b19e87;
}

.texture_block>.content>.text {
	width: 100%;
	font-family: Open Sans;
	font-size: 16px;
	color: #746765;
	text-align: center;
	margin-top: 15px;
}

.texture_block>.content>.text>span {
	color: #b8744b;
	font-size: 16px;
}

.texture_block>.content>.regbutton {
	width: 232px;
	height: 59px;
	background: url(../images/stat_orange_button.png);
	background-size: 100% 100%;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 21px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	margin-left: 10px;
	margin-right: 10px;
	transition: filter .3s ease-in-out;
}

.texture_block>.content>.regbutton:hover {
	filter: brightness(140%);
}

.texture_block>.content>.loginbutton {
	width: 232px;
	height: 59px;
	background: url(../images/stat_gray_button.png);
	background-size: 100% 100%;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 21px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(203, 157, 144, 0.62);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	margin-left: 10px;
	margin-right: 10px;
	transition: filter .3s ease-in-out;
}

.texture_block>.content>.loginbutton:hover {
	filter: brightness(140%);
}

.texture_block>.content .text_link {
	color: #f6d6b0;
}

.texture_block>.content .text_link:hover {
	text-decoration: underline;
}

.texture_block>.content>.filebutton {
	width: 307px;
	height: 59px;
	background: url(../images/stat_orange_button2.png);
	background-size: 100% 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-top: 25px;
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 10px;
	transition: filter .3s ease-in-out;
}

.texture_block>.content>.filebutton:hover {
	filter: brightness(140%);
}

.texture_block>.content>.filebutton>span:nth-child(1) {
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	margin-top: 10px;
}

.texture_block>.content>.filebutton>span:nth-child(2) {
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	margin-top: -12px;
}

.texture_block>.content>.big_link {
	color: #f6d6b0;
	font-family: Beaufort;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: underline;
	transition: color .3s ease-in-out;
}

.texture_block>.content>.big_link:hover {
	color: #e38c3d;
}

.texture_block>.content>.guide_line {
	width: 860px;
	padding: 10px 20px;
	background: rgba(222, 180, 131, 0.03);
	border-radius: 4px;
	color: #706361;
	text-align: center;
	font-size: 16px;
	margin-top: 20px;
	position: relative;
}

.texture_block>.content>.guide_line:not(:last-child):after {
	content: '';
	position: absolute;
	width: 12px;
	height: 14px;
	background: url(../images/icons/arrow_bottom.png);
	left: calc(50% - 6px);
	bottom: -17px;
	opacity: 0.5;
}

.texture_block>.content>.guide_line>span {
	color: #b8744b;
	font-size: 16px;
}

/* ----------------------------- */
/* ----------- server ---------- */
/* ----------------------------- */

.inner_content>.center>h2 {
	width: 100%;
	font-family: Open Sans Bold;
	font-size: 26px;
	color: #c8b8ae;
	margin-top: 10px;
	margin-bottom: 0px;
}

.inner_content>.center>span {
	width: 100%;
	font-family: Open Sans;
	font-size: 16px;
	color: #c8b8ae;
	margin-top: 0px;
	margin-bottom: 10px;
}

.inner_content>.center>ul {
	width: 100%;
	font-size: 16px;
	color: #746a63;
	padding-left: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.inner_content>.center>ul>li:not(:last-child) {
	margin-bottom: 15px;
}

.inner_content>.center>p {
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	color: #afa198;
}

.inner_content>.center>p>span {
	font-size: 16px;
	color: #dac9c3;
	font-family: Open Sans Bold;
}

.inner_content>.center table {
	width: 100%;
	/*border: 1px solid #3a3532;
	margin-top: 10px;
	margin-bottom: 10px;*/
}

.inner_content>.center table tr td:not(:last-child) {
	border-right: 1px solid #3a3532;
}

.inner_content>.center table tr:not(:last-child) td {
	border-bottom: 1px solid #3a3532;
}

.inner_content>.center table tr td {
	font-size: 16px;
	color: #6f665f;
	text-align: center;
	padding: 10px;
	position: relative;
}

.inner_content>.center table tr:nth-child(1) td {
	background: rgba(66, 52, 49, 0.41) !important;
	font-family: Open Sans Bold;
	color: #c8b8ae;
	border: none;
}

.inner_content>.center table tr:nth-child(odd) td {
	background: rgba(43, 26, 23, 0.41);
}

/* ----------------------------- */
/* -------- user_panel --------- */
/* ----------------------------- */

#cp {
	width: 100%;
	background: url(../images/bg/bottom_content_bg.png) bottom center no-repeat,
		url(../images/bg/cp_head_bg.jpg) #050402 top center no-repeat;
	position: relative;
	padding-bottom: 40px;
}

.cp_head {
	width: 100%;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.cp_head>.logo {
	width: 320px;
}

.cp_head>.logo>img {
	width: 100% !important;
}




.cp_head>.info>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 14px;
	color: #d6c9c7;
	text-transform: uppercase;
}

.cp_head>.info>.name {
	width: 100%;
	font-family: Beaufort;
	font-size: 30px;
	color: #ffa647;
}

.cp_head>.line {
	width: 1px;
	height: 50px;
	background: #fff;
	opacity: 0.1;
}

.exit_button {
	width: 50px;
	height: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	color: #df5930;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	padding-left: 5px;
	transition: all .3s ease-in-out;
}

.exit_button:hover {
	color: #ff0000;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.cp_content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	background: rgba(192, 164, 158, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 25px;
	min-height: 700px;
}

.cp_content>.nav {
	width: 320px;
	border-right: 1px solid rgba(255, 255, 255, 0.04);
	min-height: 100%;
	align-self: stretch;
	background: url(../images/bg/cp_nav_bg.jpg) top center repeat-y;
}

.cp_content>.nav>a {
	width: 100%;
	height: 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding-left: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	background: rgba(255, 255, 255, 0);
	transition: all .2s ease-in-out;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
}

.cp_content>.nav>a:hover {
	background: rgba(255, 255, 255, 0.02);
}

.cp_content>.nav>a>img {}



.cp_content>.nav>a>span {
	font-family: Beaufort;
	font-size: 20px;
	color: #ffb676;
	padding-left: 5px;
}

.cp_content>.nav>.active {
	background: rgba(239, 111, 12, 0.06) !important;
}

.cp_content>.nav>.active>span {
	color: #f4e3d4;
}

.cp_content>.content {
	width: calc(100% - 320px);
	min-height: 100%;
	align-self: stretch;
	padding-bottom: 25px;
}

.cp_content>.content>.pagination {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
	margin-top: 0px;
	padding-top: 20px;
	margin-bottom: -5px;
}

.cp_content>.content>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 33px;
	color: #eccbaf;
	text-align: center;
	padding: 29px 20px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	margin-bottom: 25px;
}

.cp_content>.content>.banners {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0px 25px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	margin-bottom: 25px;
}

.cp_content>.content>.banners>.banner {
	width: calc((100% - 50px) / 3);
	background-size: auto 110%;
	height: 150px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 4px;
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding: 20px;
	transition: all .3s ease-in-out;
}

.cp_content>.content>.banners>.banner:hover {
	filter: brightness(140%);
}

.cp_content>.content>.banners>.banner:nth-child(1) {
	background: url(../images/vote_banner_bg.jpg) center center;
}

.cp_content>.content>.banners>.banner:nth-child(2) {
	background: url(../images/shop_banner_bg.jpg) center center;
}

.cp_content>.content>.banners>.banner:nth-child(3) {
	background: url(../images/donate_banner_bg.jpg) center center;
}



.cp_content>.content>.banners>.banner>span {
	font-family: Beaufort;
	font-size: 24px;
	color: #ffe3ca;
	text-shadow: 0px 2px 2px #000000;
	padding-left: 20px;
}

.form_block {
	width: 100%;
	padding: 0px 25px;
}

.form_block>.title {
	font-family: Beaufort;
	font-size: 24px;
	color: #ffb676;
	text-align: center;
	padding: 0px 20px 0px;
	margin-bottom: 25px;
	text-transform: uppercase;
}

.cp_form {
	width: 460px;
	display: block;
	margin: 0 auto;
}

.cp_form input {
	width: 100%;
	height: 50px;
	background: rgba(37, 19, 12, 0.24);
	border: 1px solid #271f1f;
	border-radius: 4px;
	font-family: Beaufort;
	font-size: 20px;
	color: #dbc9b8;
	text-align: center;
	margin-bottom: 20px;
}

.cp_form>button {
	width: 100%;
	height: 50px;
	overflow: hidden;
	border-radius: 4px;
	background: url(../images/button_orange_center.png) top center;
	background-size: auto 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.cp_form>button:hover {
	filter: brightness(130%);
}

.cp_form>button:after {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_orange_left.png) top center;
	background-size: 100% 100%;
}

.cp_form>button:before {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_orange_right.png) top center;
	background-size: 100% 100%;
}

.cp_form>button>span {
	position: relative;
	z-index: 2;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 22px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.cp_form>span {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
	color: #75695e;
	font-family: Beaufort;
	font-size: 16px;
}

.vote_block {
	width: 650px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.vote_block>a {
	width: calc((100% - 25px) / 2);
	height: 56px;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.4);
	background: url(../images/button_center.png) top center;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
	transition: all .3s ease-in-out;
}

.vote_block>a:hover {
	filter: brightness(140%);
}

.vote_block>a:after {
	content: '';
	width: 44px;
	height: 56px;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_left.png) top center;
}

.vote_block>a:before {
	content: '';
	width: 44px;
	height: 56px;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_right.png) top center;
}

.vote_block>a>span {
	font-family: Beaufort Bold;
	font-size: 23px;
	color: #100a09;
	text-shadow: 0px 1px 1px rgba(123, 113, 99, 0.5);
	position: relative;
	z-index: 2;
	width: 95%;
}

.vote_block>a>span img {
	display: inline-block;
	vertical-align: middle;
	float: left;
}

.vote_block>a>span i {
	font-style: normal;
	display: inline-block;
	padding: 10px
}

.shop_top {
	width: 100%;
	padding-bottom: 25px;
	padding-left: 25px;
	padding-right: 25px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.shop_top>form {
	width: 450px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.shop_top>form>span {
	font-family: Beaufort;
	font-size: 18px;
	color: #ffb676;
	text-transform: uppercase;
}

.shop_top>form>.select {
	width: calc(100% - 95px - 180px);
	position: relative;
}

.popup_confirm>.select select,
.shop_top>form>.select>select {
	width: 100%;
	height: 40px;
	background: rgba(37, 19, 12, 0.24);
	border: 1px solid #271f1f;
	border-radius: 4px;
	font-family: Beaufort;
	font-size: 18px;
	color: #9b9085;
	padding-left: 12px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	z-index: 1;
}

.popup_confirm>.select select>option,
.shop_top>form>.select>select>option {
	background: #191311;
	outline: none;
}

.popup_confirm>.select>.arrow,
.shop_top>form>.select>.arrow {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0px;
	right: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #9b9085;
	font-size: 18px;
	pointer-events: none;
}

.shop_top>form>button {
	width: 140px;
	height: 40px;
	overflow: hidden;
	border-radius: 4px;
	background: url(../images/button_orange_center.png) top center;
	background-size: auto 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
}

.shop_top>form>button:hover {
	filter: brightness(130%);
}

.shop_top>form>button:after {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_orange_left.png) top center;
	background-size: 100% 100%;
}

.shop_top>form>button:before {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_orange_right.png) top center;
	background-size: 100% 100%;
}

.shop_top>form>button>span {
	position: relative;
	z-index: 2;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.shop_top>.balance {
	font-family: Beaufort;
	font-size: 18px;
	color: #695b4f;
}

.shop_top>.balance>span {
	font-family: Beaufort;
	font-size: 18px;
	color: #f3d8c0;
}

.shop_items {
	width: 100%;
	padding: 0px 12.5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-top: 25px;
}

.shop_items>.item {
	width: calc(100% / 3 - 25px);
	height: 264px;
	margin-left: 12.5px;
	margin-right: 12.5px;
	margin-bottom: 25px;
	border-radius: 4px;
	background: rgba(40, 27, 23, 0.3);
	border: 1px solid rgba(56, 52, 49, 0.3);
	transition: all .3s ease-in-out;
	border-radius: 8px;
}

.shop_items>.item:hover {
	filter: brightness(130%);
}

.shop_items>.item>.image {
	width: calc(100% - 12px);
	height: 120px;
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-left: 6px;

}

.shop_items>.item>.image>img {
	height: 80%;
	pointer-events: none;
	border-radius: 8px;
	box-shadow: 0 0 20px 4px #b7b7b7;
}

.shop_items>.item>.name {
	width: 100%;
	font-family: Beaufort;
	font-size: 22px;
	color: #f3d8c0;
	text-align: center;
	padding: 0px 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shop_items>.item>.description {
	width: 100%;
	font-family: Beaufort;
	font-size: 16px;
	color: #aaa;
	text-align: center;
	padding: 0px 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shop_items>.item>.price {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #e98722;
	text-align: center;
	padding: 0px 22px;
}

.shop_items>.item>.shop_button {
	width: 146px;
	height: 43px;
	margin: 0 auto;
	margin-top: 10px;
	background: url(../images/shop_button.png) top center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #3d1601;
	font-family: Beaufort Bold;
	font-size: 18px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
	transition: all .3s ease-in-out;
}

.shop_items>.item>.shop_button:hover {
	filter: brightness(130%);
}

/* ----------------------------- */
/* ----------- footer ---------- */
/* ----------------------------- */

#footer>.center {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 110px;
}

.f_left {
	width: 420px;
}



.f_left>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 14px;
	color: #b2a699;
	text-transform: uppercase;
	margin: 10px 0px;
}

.f_left>.text {
	font-size: 10px;
	color: #b2a699;
	text-transform: uppercase;
	opacity: 0.3;
}



.f_nav>a {
	display: block;
	font-family: Beaufort;
	font-size: 18px;
	color: #6f615e;
	text-transform: uppercase;
	transition: color .3s ease-in-out;
}

.f_nav>a:hover {
	color: #edd2b4;
}

.f_nav>a:not(:nth-child(1)) {
	margin-top: 17px;
}

.f_nav>.active {
	color: #ffa647 !important;
}

.f_right {
	width: 185px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
}

.f_right>.unsimple {
	opacity: 0.5;
	transition: opacity .3s ease-in-out;
}

.f_right>.unsimple:hover {
	opacity: 1;
}

.f_right>.banners {
	width: 185px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 35px;
}

.f_right>.banners>* {
	margin-bottom: 3px;
	opacity: 0.3;
	transition: opacity .3s ease-in-out;
}

.f_right>.banners>*:hover {
	opacity: 1;
}


/* ----------------------------- */
/* ----------- popup ----------- */
/* ----------------------------- */

.popup_bg {
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 20;
	display: none;
}

.popup {
	width: 600px;
	background: #fff;
	position: fixed;
	left: calc((100% - 600px) / 2);
	z-index: 21;
	background: rgba(31, 17, 13, 0.93);
	border: 1px solid rgba(56, 52, 49, 0.3);
	border-radius: 4px;
	padding: 20px;
	display: none;
}

.popup>.close {
	position: absolute;
	top: 14px;
	right: 20px;
	font-size: 18px;
	color: #42302b;
	transition: all .3s ease-in-out;
	cursor: pointer;
}

.popup>.close:hover {
	color: #bd9a90;
}

.popup_error {
	height: 205px;
	top: calc((100vh - 205px) / 2);
}

.popup_critical_error {
	height: 135px;
	top: calc((100vh - 135px) / 2);
}

.popup_success {
	height: 135px;
	top: calc((100vh - 135px) / 2);
}

.popup_confirm {
	height: 205px;
	top: calc((100vh - 205px) / 2);
}

.popup_confirm>.text {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #b79f8d;
	text-align: center;
	margin-top: 0;
}

.popup_confirm>.select {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #b79f8d;
	text-align: center;
}

.popup_confirm>.select select {
	width: 70% !important;
	margin-top: 10px;
}


.popup_critical_error>.text {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #f56464;
	text-align: center;
	margin-top: 30px;
}

.popup_error>.text {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #f56464;
	text-align: center;
	margin-top: 30px;
}

.popup_success>.text {
	width: 100%;
	font-family: Beaufort;
	font-size: 24px;
	color: #b8c31d;
	text-align: center;
	margin-top: 30px;
}

.popup>.buttons {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-top: 20px;
}

.popup>.buttons>.popup_button {
	width: 240px;
	height: 50px;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	background: url(../images/button_orange_center.png) top center;
	background-size: auto 100%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: none;
	cursor: pointer;
	transition: all .3s ease-in-out;
	margin-left: 10px;
	margin-right: 10px;
}

.popup>.buttons>.popup_button:hover {
	filter: brightness(130%);
}

.popup>.buttons>.popup_button:after {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: url(../images/button_orange_left.png) top center;
	background-size: 100% 100%;
}

.popup>.buttons>.popup_button:before {
	content: '';
	width: 93px;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	right: 0px;
	background: url(../images/button_orange_right.png) top center;
	background-size: 100% 100%;
}

.popup>.buttons>.popup_button>span {
	position: relative;
	z-index: 2;
	color: #250e01;
	font-family: Beaufort Bold;
	font-size: 22px;
	text-transform: uppercase;
	text-shadow: 0px 1px 1px rgba(255, 193, 113, 0.5);
}

.popup>.buttons>.mini {
	width: 160px;
}

.popup>.buttons>.cancel {
	filter: grayscale(80%);
}

.popup>.buttons>.cancel:hover {
	filter: grayscale(40%);
}


.links {
	display: flex;
	justify-content: flex-start;
	text-transform: uppercase;
	margin-bottom: 10px;
	font-size: 10px;
}

.links a {
	margin-right: 20px;
	color: #b2a699;
}

.links a:hover {
	color: #ffa647;
}

/* ----------------------------- */
/* ------- server status ------- */
/* ----------------------------- */

.texture_block>.server_content {
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.server_base_info {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.server_base_info>.name {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	font-family: Beaufort;
	font-size: 26px;
	color: #c7bdb7;
}

.server_base_info>.name>.status {
	width: 7px;
	height: 7px;
	border-radius: 7px;
	margin-right: 10px;
}

.server_base_info>.name>.on {
	background: #4cb300;
	box-shadow: 0px 0px 20px rgba(76, 179, 0, 1);
}

.server_base_info>.name>.off {
	background: #e31a14;
	box-shadow: 0px 0px 20px rgba(227, 26, 20, 1);
}

.server_base_info>.statistic {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	padding-left: 17px;
	margin-top: 5px;
}

.server_base_info>.statistic>.online {
	width: 200px;
	font-family: Beaufort;
	font-size: 20px;
	color: #a89d97;
}

.server_base_info>.statistic>.online>span {
	font-family: Beaufort;
	font-size: 20px;
	color: #4cb300;
}

.server_base_info>.statistic>.online:nth-child(2)>span {
	color: #ffa647;
}

.server_base_info>.statistic>.progress_bg {
	width: calc(100% - 400px);
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.server_base_info>.statistic>.progress_bg>.percent {
	height: auto;
	font-family: Beaufort;
	font-size: 20px;
	color: #5081ff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.server_base_info>.statistic>.progress_bg>.percent>span {
	font-family: Beaufort;
	font-size: 20px;
	color: #5081ff;
}

.server_base_info>.statistic>.progress_bg>.percent>img {
	margin-left: 10px;
}

.server_base_info>.statistic>.progress_bg>.orda {
	color: #ca4726;
}

.server_base_info>.statistic>.progress_bg>.orda>span {
	color: #ca4726;
}

.server_base_info>.statistic>.progress_bg>.orda>img {
	margin-left: 0px;
	margin-right: 10px;
}

.server_base_info>.statistic>.progress_bg>.progress {
	width: calc(100% - 170px);
	height: 3px;
	background: #ca4726;
	margin: 10px;
}

.server_base_info>.statistic>.progress_bg>.progress>.bar {
	height: 100%;
	background: #5081ff;
	border-right: solid 2px #000;
}

.server_more_info {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 20px;
	margin-bottom: -10px;
	padding-left: 17px;
}

.server_more_info>.block {
	width: 280px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.server_more_info>.block>.line {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10px;
}

.server_more_info>.block>.line>.text {
	font-family: Beaufort;
	font-size: 18px;
	color: #544d49;
	text-align: left;
}

.server_more_info>.block>.line>.text:nth-child(2) {
	color: #bcb3ae;
}

.server_description {
	width: 50%;
	margin-right: auto;
	align-self: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	border-right: 1px solid rgba(255, 255, 255, 0.03);
	padding: 0px 30px 30px;
}

.server_description>.title,
.server_structure>.title,
.implemented_features>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 22px;
	color: #ffb676;
}

.server_description>.text {
	width: 100%;
	font-family: Open Sans;
	font-size: 14px;
	color: #544d49;
	margin-top: 15px;
}

.server_description>.ul_block {
	width: 50%;
	margin-top: 30px;
}


.server_description>.ul_block>ul {
	width: 100%;
	margin-top: 15px;
}

.server_description>.ul_block>ul>li {
	width: 100%;
	font-family: Open Sans;
	font-size: 14px;
	color: #544d49;
	padding-right: 20px;
	margin-bottom: 5px;
}

.server_description>.ul_block>.title {
	width: 100%;
	font-family: Open Sans Bold;
	font-size: 16px;
	color: #ecd0b7;
}

.server_structure {
	width: 50%;
	margin-left: auto;
	align-self: stretch;
	padding: 0px 30px 30px;
}

.server_structure>.table {
	width: 100%;
	margin-top: 15px;
}

.server_structure>.table>.tr {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.server_structure>.table>.tr:not(:last-child) {
	margin-bottom: 11px;
}

.server_structure>.table>.tr>.td {
	width: 180px;
	font-family: Open Sans;
	font-size: 14px;
	color: #544d49;
}

.server_structure>.table>.tr>.td:nth-child(2) {
	width: calc(100% - 180px);
	color: #b5a8a0;
}





.implemented_features {
	width: 100%;
	margin-left: auto;
	align-self: stretch;
	padding: 0px 30px;
}

.implemented_features>.table {
	width: 100%;
	margin-top: 15px;
}

.implemented_features>.table>.tr {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.implemented_features>.table>.tr:not(:last-child) {
	margin-bottom: 11px;
}

.implemented_features>.table>.tr>.td {
	font-family: Open Sans;
	font-size: 14px;
	color: #544d49;
	padding-right: 0px;
	margin-bottom: 0px;
}

.recruit {
	color: #d6c9c7;
	position: absolute;
	margin: 10px 0;
}



/* ----------------------------- */
/* ----- forum and discord ----- */
/* ----------------------------- */

.flex-sbc {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.flex-sbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.flex-sbe {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}

.flex-cc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.flex-cs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.flex-ce {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
}

.flex-sc {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.flex-ss {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.flex-se {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
}

.flex-ec {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.flex-es {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
}

.flex-ee {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-end;
}

#community {
	padding-top: 10px !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.forum_thems {
	width: calc(100% - 330px - 30px);
	align-self: stretch;
	border: 1px solid rgba(41, 32, 30, 0.48);
	background: rgba(29, 15, 11, 0.41);
	border-radius: 4px;
	padding: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.forum_thems>.title {
	width: 100%;
	border-bottom: 1px solid rgb(37, 23, 20);
	font-family: Beaufort;
	font-size: 24px;
	color: #e3ccc3;
	text-transform: uppercase;
	padding-bottom: 24px;
}

.forum_thems>.title>i {
	color: #ff712f;
	margin-right: 10px;
}

.forum_thems>.msg {
	width: calc(50% - 15px);
	border-bottom: 1px solid rgb(37, 23, 20);
	padding: 24px 0px;
}

.forum_thems>.msg:nth-child(6),
.forum_thems>.msg:nth-child(7) {
	padding-bottom: 0px;
	border-bottom: none;
}

.forum_thems>.msg>.avatar {
	width: 45px;
	height: 45px;
	position: relative;
	border-radius: 45px;
	overflow: hidden;
}

.forum_thems>.msg>.avatar:before {
	content: '';
	width: 100%;
	height: 100%;
	background: url(../images/bg/border_avatar.png) center center;
	background-size: 100% 100%;
	position: absolute;
	z-index: 2;
}

.forum_thems>.msg>.avatar>img {
	width: 100%;
	position: relative;
	z-index: 1;
}

.forum_thems>.msg>.info {
	width: calc(100% - 45px);
	padding-left: 15px;
}

.forum_thems>.msg>.info>.title {
	width: 100%;
	font-family: Beaufort;
	font-size: 18px;
	color: #b59d8a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.forum_thems>.msg>.info>.title>a {
	font-family: unset;
	font-size: unset;
	color: unset;
	transition: all 0.2s ease-in-out;
}

.forum_thems>.msg>.info>.title:hover {
	color: #ffa635;
}

.forum_thems>.msg>.info>.desc {
	width: 100%;
	font-family: Open Sans;
	font-size: 12px;
	margin-top: 5px;
}

.forum_thems>.msg>.info>.desc>.date {
	color: #6a5e5b;
	width: auto;
	margin-right: 3px;
}

.forum_thems>.msg>.info>.desc>.date>i {
	color: #ffa200;
	margin-right: 5px;
	margin-top: 2px;
}

.forum_thems>.msg>.info>.desc>.user {
	color: #3e3835;
}

.forum_thems>.msg>.info>.desc>.user>a {
	color: #8c6758;
	transition: all 0.2s ease-in-out;
}

.forum_thems>.msg>.info>.desc>.user>a:hover {
	color: #ffa635;
}

.discord {
	width: 330px;
	align-self: stretch;
	border: 1px solid rgba(41, 32, 30, 0.48);
	background: rgba(29, 15, 11, 0.41);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0.5;
	transition: all 0.2s ease-in-out;
}

.discord:hover {
	opacity: 1;
}

.pegi {
	width: 100%;
	max-width: 410px;
	margin: 0px 30px;
	margin-top: 20px;
}

.notes {
	background: #211917;
	margin: 50px 0;
	padding: 10px 15px;
	color: #c8b8ad;
}