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

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

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

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

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

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

@font-face {
	font-family: Beaufort Bold;
	src: url(../fonts/Beaufort-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: Roboto;
	color: #ae9f95;
}

html, body{
  overflow-x: hidden;
  width: 100%;
}

body{overflow-y:auto}

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

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

hr.dashed {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px dashed #1d1b1c !important;
    margin: 1em 0; padding: 0;
    width: 820px;
}

.payment_box {

    height: 255px;
    width: 900px;
    border: 1;
    text-align: left;
    border: 2px dashed #1d1b1c !important;

}

.vote {
 padding: 5px;
    margin-top: 20px;
    margin-left: 16px;
}

.vote > .img {
    height: 80px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 10px solid #0f0d0e;
    margin-left: -16px;

}
.circles div { cursor: pointer; float: left; width: 13px; height: 13px; } .banner .circles div.act { background-position: 0 0; } .banner > a { position: absolute; z-index: 1; top: 0; left: 0; display: block; } .banner > a.bvis { z-index: 2; } .banner, .banner > a { border-radius: 10px; } .banner > a > img { border-radius: 8px; } .banner > a > .bmask { position: absolute; left: 0; top: 0; } .banner { border: 2px solid rgba(0,0,0,0.4); }
.banner .circles { bottom: 10px; right: 10px; }
.banner .bmask { }

.vote > .img:before {
    content: '';
    width: calc( 100% - 16px );
    height: calc( 100% - 16px );
    border: 2px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0px 0px 20px #000, 0px 0px 20px #000;
    position: absolute;
    z-index: 2;
}

.vote > .img:hover {
    filter: brightness(150%);
}

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

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

::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;color: #454240;}
::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;color: #454240;}
:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;color: #454240;}
:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;color: #454240;}
: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;}

input{
	width: 100%;
	height: 52px;
	background: #0c0c0c;
	border: 1px solid #282625;
	text-align: center;
	font-family: Roboto Medium;
	font-size: 18px;
	color: #847f7c;
	position: relative;
	z-index: 1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.check{
	font-size: 18px;
	padding-left: 20px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.check > .check-input{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.check > .check-input:checked + .check-box:before{
	opacity: 1;
}

.check > .check-box{
	width: 20px;
	height: 20px;
	background: #0c0c0c;
	border: 1px solid #282625;
	position: absolute;
	margin-left: -20px;
	display: block;
}

.check > .check-box:before{
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	top: 3px;
	left: 3px;
	background: #ce9f4c;
	opacity: 0;
	transition: all 0.3s ease;
}

/* flex */
/* -------------------------------------------------------------------------------------------------------------------- */

.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;}

/* default elements */
/* -------------------------------------------------------------------------------------------------------------------- */

.custom-border{
	border-style: solid;
	border-width: 21px 21px 21px 21px;
	border-image: url(../imgs/bg/border.png) 21 21 21 21 repeat repeat;
}

/* large button */

.large-button{
	width: 230px;
	height: 57px;
	border-style: solid;
	border-width: 2px 18px 2px 18px;
	border-image: url(../imgs/bg/large_button.png) 2 18 2 18 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

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

.large-button:hover:after{
	left: calc( 100% + 150px );
}

.large-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 6px );
	background: #dea044;
	z-index: 0;
}

.large-button > span{
	font-family: Beaufort;
	font-size: 19px;
	color: #1a1919;
	line-height: 27px;
	position: relative;
	z-index: 1;
}

.large-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

/* large orange button */

.large-orange-button{
	width: 230px;
	height: 57px;
	border-style: solid;
	border-width: 2px 18px 2px 18px;
	border-image: url(../imgs/bg/large_orange_button.png) 2 18 2 18 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.large-orange-button:hover{
	filter: brightness(130%);
}

.large-orange-button:hover:after{
	left: calc( 100% + 150px );
}

.large-orange-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 6px );
	background: #d96a27;
	z-index: 0;
}

.large-orange-button > span{
	font-family: Beaufort;
	font-size: 27px;
	color: #1a1919;
	line-height: 27px;
	position: relative;
	z-index: 1;
}

.large-orange-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

/* avarage button */

.avarage-button{
	width: 230px;
	height: 44px;
	border-style: solid;
	border-width: 2px 14px 2px 14px;
	border-image: url(../imgs/bg/average_button.png) 2 14 2 14 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

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

.avarage-button:hover:after{
	left: calc( 100% + 150px );
}

.avarage-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 6px );
	background: #dea044;
	z-index: 0;
}

.avarage-button > span{
	font-family: Beaufort Bold;
	font-size: 16px;
	color: #1a1919;
	line-height: 18px;
	position: relative;
	z-index: 1;
}

.avarage-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

/* avarage orenge button */

.avarage-orange-button{
	width: 230px;
	height: 44px;
	border-style: solid;
	border-width: 2px 14px 2px 14px;
	border-image: url(../imgs/bg/average_orange_button.png) 2 14 2 14 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.avarage-orange-button:hover{
	filter: brightness(130%);
}

.avarage-orange-button:hover:after{
	left: calc( 100% + 150px );
}

.avarage-orange-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 6px );
	background: #f66a1a;
	z-index: 0;
}

.avarage-orange-button > span{
	font-family: Beaufort Bold;
	font-size: 18px;
	color: #1a1919;
	line-height: 18px;
	position: relative;
	z-index: 1;
}

.avarage-orange-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

/* small gray button */

.small-button{
	width: 230px;
	height: 36px;
	border-style: solid;
	border-width: 2px 11px 2px 11px;
	border-image: url(../imgs/bg/small_button.png) 2 11 2 11 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

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

.small-button:hover:after{
	left: calc( 100% + 150px );
}

.small-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 3px );
	background: #dea044;
	z-index: 0;
}

.small-button > span{
	font-family: Beaufort Bold;
	font-size: 18px;
	color: #1a1919;
	line-height: 18px;
	position: relative;
	z-index: 1;
}

.small-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

/* small gray button */

.small-gray-button{
	width: 230px;
	height: 36px;
	border-style: solid;
	border-width: 2px 11px 2px 11px;
	border-image: url(../imgs/bg/small_gray_button.png) 2 11 2 11 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.small-gray-button:hover{
	filter: brightness(130%);
}

.small-gray-button:hover:after{
	left: calc( 100% + 150px );
}

.small-gray-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 3px );
	background: #96847b;
	z-index: 0;
}

.small-gray-button > span{
	font-family: Beaufort Bold;
	font-size: 18px;
	color: #1a1919;
	line-height: 18px;
	position: relative;
	z-index: 1;
}

.small-gray-button:after{
	content: '';
	width: 100px;
	height: 200px;
	background: #fff;
	z-index: 3;
	position: absolute;
	left: 0px;
	transform: rotate(30deg);
	left: -150px;
	transition: all 0.7s ease;
	opacity: 0.2;
}

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

body{
	background: #0f0d0e;
}

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

header{
	width: 100%;
	background: url(../imgs/bg/upvp2026.jpg) top center no-repeat;
	overflow: hidden;
}

nav{
	width: 1240px;
	height: 100px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}

.head-content{
	width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

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

nav > .logo{
	width: 46px;
	height: 45px;
	position: relative;
}

nav > .logo:hover img{
	filter: brightness(130%);
}

nav > .logo:hover:before{
	opacity: 1;
}

nav > .logo:before{
	content: '';
	width: 78px;
	height: 78px;
	position: absolute;
	z-index: 1;
	background: url(../imgs/logo/inner_mini_logo.png) center center no-repeat;
	opacity: 0.5;
	transition: all 0.3s ease;
}

nav > .logo > img{
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
}

nav > .navigation{
	width: calc( 100% - 46px );
}

nav > .navigation > .avarage-orange-button{
	width: 210px;
	margin-right: -10px;
	margin-left: -10px;
}

nav > .navigation > .links{
	width: auto;
}

nav > .navigation > .links > a{
	position: relative;
	font-family: Beaufort;
	color: #9e9d9c;
	font-size: 18px;
	margin: 0px 46px;
	transition: all 0.3s ease;
}

nav > .navigation > .links > a:hover{
	color: #ebdcd1;
}

nav > .navigation > .links > a:hover:after{
	opacity: 1;
}

nav > .navigation > .links > a:not(:last-child):before{
	content: '';
	width: 4px;
	height: 4px;
	border: 2px solid #9e9d9c;
	position: absolute;
	right: -51px;
	pointer-events: none;
	opacity: 0.3;
}

nav > .navigation > .links > a:after{
	content: '';
    width: calc( 100% + 20px );
    height: calc( 100% + 10px );
    position: absolute;
    background: rgba(158, 157, 156, 0.03);
    opacity: 0;
    border: 1px solid rgb(43, 40, 39);
    transition: all 0.3s ease;
}

nav > .navigation > .links > .active{
	color: #ffc000 !important;
}

.m-navigation{
	width: 300px;
	height: 100vh;
	position: fixed;
	z-index: 10;
	top: 0px;
	right: 0px;
	background: #141213;
	transform: translateX(100%);
}

.m-navigation-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	background: rgba(0,0,0,0.6);
	top: 0px;
	right: 0px;
	z-index: 9;
	transition: all 0.4s ease;
	opacity: 0;
	pointer-events: none;
}

.m-navigation .logo{
	width: 100%;
	margin-bottom: 30px;
	pointer-events: none;
}

.m-navigation .m-navigation-content{
	width: 100%;
}

.m-navigation .m-navigation-content > .links > a{
	width: calc( 100% + 38px );
	display: block;
	position: relative;
	font-family: Beaufort;
	color: #9e9d9c;
	font-size: 18px;
	margin: 0px -19px;
	padding: 20px 0px;
	border-bottom: 1px solid #282323;
	text-align: center;
	transition: all 0.3s ease;
	background: rgba(0,0,0,0);
}

.m-navigation .m-navigation-content > .links > a:first-child{
	border-top: 1px solid #282323;
}

.m-navigation .m-navigation-content > .links > a:hover{
	background: rgb(29, 24, 24);
	color: #ebdcd1;
}

.m-navigation .m-navigation-content > .links > .active{
	color: #ffc000 !important;
}

.m-navigation .m-navigation-content > .avarage-orange-button{
	width: 230px;
	margin: 0 auto;
	margin-top: 30px;
}

.open-navigation{
	width: 42px;
	height: 42px;
	display: none;
	cursor: pointer;
	background: url(../imgs/icon/open_nav_icon.png) center center no-repeat;
	transition: all 0.3s ease;
}

.open-navigation:hover{
	filter: brightness(130%);
}

.closed-navigation{
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url(../imgs/icon/closed_nav_icon.png) center center no-repeat;
	transition: all 0.3s ease;
	position: absolute;
	top: 0px;
	left: 0px;
}

.closed-navigation:hover{
	filter: brightness(130%);
}



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

.head-content{
	height: 400px;
	position: relative;
}

.head-content:before{
	content: '';
	width: 627px;
	height: 1037px;

	position: absolute;
	right: 30px;
	top: -100px;
	transition: all 0.5s ease;
	z-index: 1;
}

.head-content > .block{
	width: calc( 50% - 10px );
	position: relative;
	z-index: 2;
}

.head-content > .block > .title{
	width: 100%;
	font-family: Beaufort;
	color: #ebdcd1;
	font-size: 34px;
	text-align: center;
}

.head-content > .block > .title > span{
	display: block;
	width: 100%;
	font-family: Beaufort;
	color: #ae9f95;
	font-size: 26px;
	text-align: center;
	line-height: 26px;
}

.head-content > .block > .text{
	width: 100%;
	font-family: Roboto Medium;
	color: #716e6c;
	font-size: 16px;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 40px;
	line-height: 26px;
}

.head-content > .block > .large-button{
	width: 260px;
	margin: 0 auto;
}

/* servers */
/* -------------------------------------------------------------------------------------------------------------------- */

.status-servers{
	width: 1225px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
	margin-bottom: 40px;
	margin-top: 15px;
}

.status-servers > .server{
	width: calc( ( 100% / 3 ) - 27px );
	height: 128px;
	margin: 13.5px;
	margin-top: 20px;
	background: url(../imgs/bg/server_center.png) top center repeat-x;
	position: relative;
}

.status-servers > .server:nth-child(1):before{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	left: -21px;
	background: url(../imgs/bg/first_server_left.png) top center no-repeat;
}

.status-servers > .server:nth-child(1):after{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	right: -21px;
	background: url(../imgs/bg/server_right.png) top center no-repeat;
}

.status-servers > .server:nth-child(2):before{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	left: -21px;
	background: url(../imgs/bg/server_left.png) top center no-repeat;
}

.status-servers > .server:nth-child(2):after{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	right: -21px;
	background: url(../imgs/bg/server_right.png) top center no-repeat;
}

.status-servers > .server:nth-child(3):before{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	left: -21px;
	background: url(../imgs/bg/server_left.png) top center no-repeat;
}

.status-servers > .server:nth-child(3):after{
	content: '';
	width: 21px;
	height: 128px;
	position: absolute;
	top: 0px;
	right: -21px;
	background: url(../imgs/bg/last_server_right.png) top center no-repeat;
}

.status-servers > .server > .progress{
	width: 100px;
	height: 99px;
	position: relative;
}

.status-servers > .server > .progress > .circle{
	width: 100px;
	height: 99px;
	background: url(../imgs/bg/progress_bg.png) center center no-repeat;
	font-size: 100% 100%;
	padding-top: 2px;
	position: relative;
	z-index: 1;
}

.status-servers > .server > .progress > .rate{
	position: absolute;
	font-family: Beaufort;
	color: #d9b45d;
	font-size: 20px;
}

.status-servers > .server > .info{
	width: calc( 100% - 100px );
	padding-left: 10px;
}

.status-servers > .server > .info > .name{
	width: 100%;
	font-family: Beaufort;
	color: #ae9f95;
	font-size: 24px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-servers > .server > .info > .online{
	width: 100%;
	font-family: Beaufort;
	color: #5f5d5b;
	font-size: 16px;
	margin-top: 5px;
}

.status-servers > .server > .info > .online > span{
	font-family: Beaufort;
	color: #55ad14;
	font-size: 16px;
}

.status-servers > .server > .info > .offline{
	width: 100%;
	font-family: Beaufort;
	color: #ad1414;
	font-size: 16px;
	margin-top: 5px;
}

.status-servers > .server > .info > .offline > span{
	font-family: Beaufort;
	color: #ad1414;
	font-size: 16px;
}

.status-servers > .server > .info > .maintenance{
	width: 100%;
	font-family: Beaufort;
	color: #ad5514;
	font-size: 16px;
	margin-top: 5px;
}

.status-servers > .server > .info > .maintenance > span{
	font-family: Beaufort;
	color: #ad5514;
	font-size: 16px;
}

/* page content */
/* -------------------------------------------------------------------------------------------------------------------- */

.page-content{
	width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	margin-bottom: 55px;
}

.page-content > .content{
	width: calc( 100% - 410px );
}

.page-content > aside{
	width: 360px;
}

.big-title{
	width: 100%;
	border-bottom: 2px solid #22201f;
	padding-bottom: 20px;
	margin-top: 40px;
}

.big-title > span{
	font-family: Beaufort;
	color: #ebdcd1;
	font-size: 30px;
	position: relative;
	margin-right: 15px;
}

.big-title2{
	width: 100%;
	border-bottom: 2px solid #22201f;
	padding-bottom: 20px;
	margin-top: 40px;
}

.big-title2 > span{
	font-family: Beaufort;
	color: #ebdcd1;
	font-size: 30px;
	position: relative;
	margin-right: 15px;
}



.big-title2 > span:after {
    border-top-color: #18181a !important;
    border-width: 18px;
    margin-left: -16px;
}

.news-title > span{
}

.news-title  > span:before,
.news-title  > span:after{
}

.big-title > span:before,
.big-title > span:after{
	content: '';
	border: solid transparent;
	position: absolute;
	left: 50%;
	margin-left: -12px;
	bottom: -48px;
	width: 0;
}

.big-title > span:before {
   border-top-color: #22201f;
   border-width: 14px;
}
.big-title > span:after {
   border-top-color: #0f0d0e;
   border-width: 18px;
   margin-left: -16px;
}

.big-title > .small-button{
	width: 160px;
	height: 34px;
	font-size: 14px;
	padding-top: 1px;
}

.big-title > .small-button > span{
	font-size: 14px;
}


.big-title2 > span:before,
.big-title2 > span:after{
	content: '';
	border: solid transparent;
	position: absolute;
	left: 50%;
	margin-left: -12px;
	bottom: -48px;
	width: 0;
}

.big-title2 > span:before {
   border-top-color: #22201f;
   border-width: 14px;
}
.big-title2 > span:after {
   border-top-color: #0f0d0e;
   border-width: 18px;
   margin-left: -16px;
}

.big-title2 > .small-button{
	width: 160px;
	height: 34px;
	font-size: 14px;
	padding-top: 1px;
}

.big-title2 > .small-button > span{
	font-size: 14px;
}

.page-content > aside .big-title > span{
	margin-left: auto;
	margin-right: auto;
}

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

.home-news{
	width: 100%;
}

.home-news > .news{
	width: 100%;
}

.home-news > .news > article{
	width: calc( 100% - 13px );
	position: relative;
	border: 2px solid rgba(255, 255, 255, 0.06);
	margin-top: 36px;
}

.home-news > .news > article:nth-child(1){
	background: url(../imgs/bg/first_article_bg.png) bottom right no-repeat;
}

.home-news > .news > article > .img{
	width: 240px;
	height: 240px;
	position: relative;
	z-index: 2;
	overflow: hidden;
	border: 10px solid #0f0d0e;
	margin-left: -23px;
	margin-top: -23px;
	margin-bottom: -23px;
}

.home-news > .news > article > .img > img{
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
}

.home-news > .news > article > .img:before{
	content: '';
	width: calc( 100% - 26px );
	height: calc( 100% - 26px );
	border: 2px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0px 0px 20px #000, 0px 0px 20px #000;
	position: absolute;
	z-index: 2;
}

.home-news > .news > article > .article-content{
	width: calc( 100% - 230px );
	padding-top: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
}

.home-news > .news > article > .article-content > .title{
	width: 100%;
	color: #ae9f95;
	font-size: 24px;
	font-family: Beaufort;
	line-height: 24px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-news > .news > article > .article-content > .title > a{
	color: unset;
	font-size: unset;
	font-family: unset;
	line-height: unset;
	transition: all 0.3s ease;
}

.home-news > .news > article > .article-content > .title > a:hover{
	color: #d96a27;
}

.home-news > .news > article > .article-content > .subtitle{
    width: 100%;
    color: #ebdcd1;
    font-size: 14px;
    font-family: Beaufort;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-news > .news > article > .article-content > .subtitle > a{
	color: unset;
	font-size: unset;
	font-family: unset;
	line-height: unset;
	transition: all 0.3s ease;
}

.home-news > .news > article:nth-child(1) > .article-content > .title{
	font-size: 30px;
	color: #ce9f4c;
	line-height: 30px;
}

.home-news > .news > article > .article-content > .text{
	width: 100%;
	height: calc( 24px * 2 );
	font-family: Roboto Medium;
	color: #4d4b49;
	font-size: 14px;
	line-height: 24px;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    margin-top: 17px;
    margin-bottom: 17px;
}

.home-news > .news > article:nth-child(1) > .article-content > .text{
    height: calc( 24px * 4 );
    font-family: Roboto Medium;
    color: #4d4b49;
    font-size: 14px;
    line-height: 24px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    margin-top: 17px;
    margin-bottom: 17px;

}

.home-news > .news > article > .article-content > .rinfo{
	width: 100%;
}

.home-news > .news > article > .article-content > .rinfo > .small-gray-button{
	width: 116px;
	padding-top: 1px;
	margin-left: -8px;
	margin-right: 15px;
}

.home-news > .news > article > .article-content > .rinfo > .small-gray-button > span{
	font-size: 14px;
}

.home-news > .news > article > .article-content > .rinfo > .date{
	font-family: Roboto Medium;
	color: #353433;
	font-size: 14px;
	line-height: 14px;
}

/* rankings */
/* -------------------------------------------------------------------------------------------------------------------- */

.rankings{
	width: 100%;
}

.rankings > .rankings-content{
	width: 100%;
	margin-top: 36px;
	padding: 5px;
}

.rankings > .rankings-content > .switch{
	width: 100%;
	padding-bottom: 26px;

}

.rankings > .rankings-content > .switch > .avarage-button{
	width: calc( ( 100% / 3 ) );
	margin-left: -8px;
	margin-right: -8px;
	filter: grayscale(100%);
	opacity: 0.3;
}

.rankings > .rankings-content > .switch > .avarage-button:hover{
	opacity: 0.7;
}

.rankings > .rankings-content > .switch > .avarage-button > span{
}

.rankings > .rankings-content > .switch > .active{
	filter: grayscale(0%);
	opacity: 1 !important;
}

.rankings > .rankings-content > .tables{
	width: 100%;
	position: relative;
}


.rankings > .rankings-content > .tables > .active{
	position: relative !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.rankings > .rankings-content > .tables > .table{
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.rankings > .rankings-content > .tables > .table > .line{
	width: 100%;
	border-top: 1px solid #1f1f1f;

	padding: 20px 0px;
}


.toggle-block .line {
	width: 100%;
	border-top: 1px solid #1f1f1f;

	padding: 20px 0px;
}

img {
    vertical-align: middle;
}

.rankings > .rankings-content > .tables > .table > .lbottom{

	border-bottom: 1px solid #1f1f1f;

}

.rankings > .rankings-content > .tables > .table > .line > .icon{
	width: 29px;
	//height: 29px;
	margin-right: 15px;
}

.toggle-block .line > .icon{
	width: 29px;
	//height: 29px;
	margin-right: 15px;
}

.rankings > .rankings-content > .tables > .table > .line > .class{
	color: #7f7b72;
	width: 200px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toggle-block .line > .class{
	color: #7f7b72;
	width: 200px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankings > .rankings-content > .tables > .table > .line > .clan{
	color: #7f7b72;
	width: 150px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toggle-block .line > .clan{
	color: #7f7b72;
	width: 150px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.rankings > .rankings-content > .tables > .table > .line > .avatar{
	color: #7f7b72;
	width: 60px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toggle-block .line > .avatar{
	color: #7f7b72;
	width: 60px;
	margin-right: auto;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.rankings > .rankings-content > .tables > .table > .line > .name{
	width: calc( 100% - 50px - 29px - 20px );
	margin-right: auto;
	color: #7f7b72;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankings > .rankings-content > .tables > .table > .line > .name2{
	width: calc( 100% - 200px - 150px - 200px );
	margin-right: auto;
	color: #7f7b72;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.name2{
	width: calc( 100% - 200px - 150px - 200px );
	margin-right: auto;
	color: #7f7b72;
	font-size: 20px;
	font-family: Beaufort;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rankings > .rankings-content > .tables > .table > .line > .value{
	width: 50px;
	font-size: 20px;
	font-family: Beaufort;
	text-align: right;
}

.line > .value{
	width: 50px;
	font-size: 20px;
	font-family: Beaufort;
	text-align: right;
}

.rankings > .rankings-content > .tables > .top-pvp > .line > .value{
	color: #ebdcd1;
}

.rankings > .rankings-content > .tables > .top-pk > .line > .value{
	color: #ebdcd1;
}

.rankings > .rankings-content > .tables > .top-clan > .line > .value{
	color: #ebdcd1;
}

.classes {
	font-size: 16px;
	font-family: Beaufort;
	color: #232323;
}

.rank_nr {
	font-size: 16px;
	font-weight: 500;
	font-family: Beaufort;
	color: #7f7b72;
}

.player_class {
	font-size: 16px;
	font-family: Beaufort;
	color: #232323;
	margin-top: 8px;
	vertical-align: 16px;
}

/* forum msg */
/* -------------------------------------------------------------------------------------------------------------------- */

.forum-msg{
	width: 100%;
}

.forum-msg > .forum-msg-content {
	width: 100%;
	margin-top: 36px;
	padding: 5px;
}

.forum-topics {

 	width: 100%;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg{
	width: 100%;
	border-bottom: 1px solid #1f1f1f;
	padding: 20px 0px;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg:first-child{
    border-bottom: none;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg:nth-child(2){
}

.forum-msg > .forum-msg-content > .forum-topics > .msg:nth-child(4){

}

.forum-msg > .forum-msg-content > .forum-topics > .msg:nth-child(5){
    padding-top: -10px !important;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .avatar{
	width: 70px;
	height: 70px;
	overflow: hidden;
	position: relative;
	border-style: solid;
	border-width: 11px 11px 11px 11px;
	border-image: url(../imgs/bg/forum_avatar_border.png) 11 11 11 11 repeat repeat;
	margin-left: -5px;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .avatar > img{
	width: 100%;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo{
	width: calc( 100% - 70px );
	padding-left: 15px;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo > .title{
	width: 100%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo > .title > a{
	color: #ae9f95;
	font-size: 20px;
	font-family: Beaufort;
	transition: all 0.3s ease;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo > .title > a:hover{
	color: #eeae3c;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo > .desc{
	width: 100%;
	margin-top: 3px;
}

.forum-msg > .forum-msg-content > .forum-topics > .msg > .finfo > .desc > span{
	font-family: Roboto Medium;
	color: #353433;
	font-size: 13px;
}

.forum-msg > .forum-msg-content > .avarage-button{
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 29px;
	margin-bottom: 5px;
}

.streamers {
    padding: 12px 0px 12px 0px;
    width: 592px;

}

.streamers-border {
    padding: 4px 8px 0px 4px;
}

/* social */
/* -------------------------------------------------------------------------------------------------------------------- */

.social{
	width: 100%;
}

.social > .social-title{
	margin-top: 55px;
}

.social > .social-content{
	width: 100%;
	margin-top: 36px;
}

.social > .social-content > .block{
	width: calc( 50% - 15px );
	height: 380px;
	background: #171415;
	opacity: 0.4;
	transition: all 0.3s ease;
	border-radius: 5px;
	overflow: hidden;
}

.social > .social-content > .block:hover{
	opacity: 1;
}

.social > .social-content > .block:first-child{
}

.widget-facebook{
	width: 100%;
	height: 100%;
}

.widget-facebook .facebook_iframe {
	border: none;
}

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

.server-info-bg{
	width: 100%;
	background: url(../imgs/bg/info_bg.jpg) top center no-repeat;
	padding-bottom: 50px;
}

.server-info{
	width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

.server-info > .switch{
	width: 100%;
	padding: 25px 0px;
}

.server-info > .switch > .server-info-button{
	position: relative;
	font-family: Beaufort;
	color: #6e6862;
	font-size: 20px;
	margin-right: 92px;
	margin-top: 10px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
	cursor: pointer;
}

.server-info > .switch > .server-info-button:hover{
	color: #ebdcd1;
}

.server-info > .switch > .server-info-button:hover:after{
	opacity: 1;
}

.server-info > .switch > .server-info-button:not(:last-child):before{
	content: '';
	width: 4px;
	height: 4px;
	border: 2px solid #9e9d9c;
	position: absolute;
	right: -51px;
	pointer-events: none;
	opacity: 0.3;
}

.server-info > .switch > .server-info-button:after{
	content: '';
    width: calc( 100% + 20px );
    height: calc( 100% + 10px );
    position: absolute;
    background: rgba(158, 157, 156, 0.03);
    opacity: 0;
    border: 1px solid rgb(43, 40, 39);
    transition: all 0.3s ease;
}

.server-info > .switch > .active{
	color: #ffa800 !important;
}


.server-info > .info-servers{
	width: 100%;
	position: relative;
}

.server-info > .info-servers > .active{
	position: relative !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.server-info > .info-servers > .info-server{
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	padding: 20px;
}

.server-info > .info-servers > .info-server > .images{
	width: 320px;
	height: auto;
}

.server-info > .info-servers > .info-server > .images > .img{
	width: calc( 50% - 8px );
	height: 100px;
	border: 2px solid rgba(255, 255, 255, 0.09);
	overflow: hidden;
	position: relative;
	cursor: pointer;
}

.server-info > .info-servers > .info-server > .images > .img:hover:before{
	opacity: 1;
}

.server-info > .info-servers > .info-server > .images > .img:first-child{
	width: 100%;
	height: 190px;
	margin-bottom: 16px;
}

.server-info > .info-servers > .info-server > .images > .img > img{
	height: 100%;
	position: absolute;
	z-index: 1;
}

.server-info > .info-servers > .info-server > .images > .img:before{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background: url(../imgs/icon/zoom_icon.png) rgba(15, 13, 14, 0.65) center center no-repeat;
	transition: all 0.5s ease;
	opacity: 0;
}

.server-info > .info-servers > .info-server > .info{
	width: calc( 100% - 320px );
	padding-left: 35px;
}

.server-info > .info-servers > .info-server > .info > .name{
	width: 100%;
	font-family: Beaufort;
	color: #dbccbc;
	font-size: 34px;
}

.server-info > .info-servers > .info-server > .info > .name > span{
	font-family: unset;
	color: #d9b45d;
	font-size: unset;
}

.server-info > .info-servers > .info-server > .info > .rates{
	width: 100%;
	margin-top: 10px;
}

.server-info > .info-servers > .info-server > .info > .rates > .rate{
	position: relative;
	font-family: Beaufort;
	color: #baad9f;
	font-size: 16px;
	margin-right: 42px;
	transition: all 0.3s ease;
	margin-top: 5px;
	margin-bottom: 5px;
}

.server-info > .info-servers > .info-server > .info > .rates > .rate:first-child{
	margin-left: 0px;
}

.server-info > .info-servers > .info-server > .info > .rates > .rate:not(:last-child):before{
	content: '';
	width: 2px;
	height: 2px;
	border: 2px solid #9e9d9c;
	position: absolute;
	right: -26px;
	pointer-events: none;
	opacity: 0.3;
	margin-top: 1px;
}

.server-info > .info-servers > .info-server > .info > .desc{
	width: 100%;
	margin-top: 30px;
	margin-bottom: 35px;
	font-family: Roboto Medium;
	color: #716c66;
	font-size: 16px;
	line-height: 22px;
}

.server-info > .info-servers > .info-server > .info > .large-button{
	margin-left: -13px;
}

.server-info > .info-servers > .info-server > .info > .large-button > span{
}

/* reg or login */
/* -------------------------------------------------------------------------------------------------------------------- */

.reg-or-login{
	width: 100%;
	margin-top: 50px;
}

.reg-or-login > .switch{
	width: 560px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.reg-or-login > .switch > .button{
	width: 50%;
	height: 57px;
	background: url(../imgs/bg/switch_btn_tex.png) top left no-repeat;
	background-size: auto 100%;
	font-family: Beaufort Bold;
	font-size: 22px;
	color: #1a1919;
	line-height: 22px;
	cursor: pointer;
	transition: all 0.3s ease;
	filter: grayscale(100%) brightness(100%);
	opacity: 0.4;
	padding-left: 15px;
}

.reg-or-login > .switch > .button:nth-child(2){
	background: url(../imgs/bg/switch_btn_tex2.png) top right no-repeat;
	background-size: auto 100%;
	padding-right: 15px;
	padding-left: 0px;
}

.reg-or-login > .switch > .button:hover{
	filter: grayscale(100%) brightness(130%);
}

.reg-or-login > .switch > .active{
	filter: grayscale(0%) brightness(100%);
	opacity: 1;
}

.reg-or-login > .switch > .active:hover{
	filter: grayscale(0%) brightness(130%);
}

.reg-or-login > .forms{
	width: 780px;
	position: relative;
	margin: 0 auto;
}

.reg-or-login > .rpass{
	width: 400px;
}

.reg-or-login > .forms > .form{
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.reg-or-login > .forms > .active{
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.rol-form{
	width: 100%;
	height: auto;
	padding-top: 20px;
}

.rol-form > .line{
	width: calc( 50% - 10px );
	margin-bottom: 20px;
}

.rol-form > .w100{
	width: 100%;
}

.rol-form > .big-line{
	background: #191818;
	border: 1px solid #1f1e1d;
	padding: 10px;
	align-self: stretch;
}

.rol-form > .big-line > .checkbox-text{
	margin-left: 10px;
	color: #4b4947;
	font-family: Roboto Medium;
}

.rol-form > .big-line > .checkbox-text > a{
	color: #ae9f95;
	font-family: Roboto Medium;
	transition: all 0.3s ease;
}

.rol-form > .big-line > .checkbox-text > a:hover{
	color: #d96a27;
}

.rol-form > .line > .prefix-block{
	width: 130px;
	position: relative;
}

.rol-form > .line > .prefix-block > input{
	padding-right: -12.5px;
}

.rol-form > .line > .prefix-block > .refresh-prefix-btn{
	width: 25px;
	height: 25px;
	border-radius: 25px;
	border: 1px solid #282625;
	background: url(../imgs/icon/refresh_icon.png) center center no-repeat #0c0c0c;
	background-size: 50% 50%;
	position: absolute;
	z-index: 2;
	top: calc( 50% - 12.5px );
	right: -12.5px;
	cursor: pointer;
	transition: all 0.5s ease;
}

.rol-form > .line > .prefix-block > .refresh-prefix-btn:hover{
	transform: rotate(360deg) scale(1.2,1.2);
}

.rol-form > .line > .input-block{
	width: calc( 100% - 130px - 30px );
	position: relative;
}

.rol-form > .form-button{
	width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.rol-form > .form-button > span{
}

.form > .links{
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.form > .links > a{
	font-family: Roboto Medium;
	color: #ada186;
	font-size: 18px;
	line-height: 40px;
	text-decoration: underline;
	transition: all 0.3s ease;
}

.form > .links > a:hover{
	color: #d96a27;
}

.form > .links > .disabled{
	color: #4d4940;
}

.inner-block-title{
	width: 100%;
	margin: 10px 0px;
	font-family: Beaufort;
	color: #d3c9c2;
	font-size: 32px;
	text-align: center;
}

/* downloads */
/* -------------------------------------------------------------------------------------------------------------------- */

.downloads{
	width: 100%;
	margin-top: 50px;
}

.mini-title{
	width: 100%;
	font-family: Beaufort;
	color: #8a827c;
	font-size: 20px;
	text-align: center;
}

.downloads > .switch{
	width: 100%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.downloads > .switch > .large-button{
	width: 300px;
	margin: 10px;
	filter: grayscale(100%);
	opacity: 0.3;
}

.downloads > .switch > .large-button > span{
}

.downloads > .switch > .active{
	filter: grayscale(0%);
	opacity: 1;
}

.downloads > .files-blocks{
	width: 100%;
	position: relative;
	margin: 30px 0px;
}

.downloads > .files-blocks > .block{
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	pointer-events: none;
	opacity: 0;
	transition: all 0.3s ease;
}

.downloads > .files-blocks > .active{
	position: relative;
	pointer-events: auto;
	opacity: 1;
}

.downloads > .info{
	width: 780px;
	margin: 20px auto;
	text-align: center;
	font-family: Roboto Medium;
	color: #433e3b;
	font-size: 14px;
	line-height: 24px;
}

.downloads > .info > .title{
	width: 100%;
	text-align: center;
	font-family: Roboto Medium;
	font-size: 14px;
	margin-bottom: 5px;
}

.download-button{
	width: 330px;
	padding: 10px;
	border: 1px solid #212020;
	position: relative;
	margin: 5px;
}

.download-button:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	transition: all 0.4s ease;
	background: rgba(255,255,255,0.03);
	opacity: 0;
}

.download-button:hover:before{
	width: calc( 100% - 10px );
	height: calc( 100% - 10px );
	opacity: 1;
}

.download-button:hover .icon > .img-icon{
	transform: scale(1.3, 1.3) rotate(-15deg);
}

.download-button:hover .icon > .img-border{
	transform: scale(0.8, 0.8) rotate(-15deg);
}

.download-button:hover .info > .name{
	color: #ce9f4c;
}

.download-button > .icon{
	width: 67px;
	height: 66px;
	position: relative;
}

.download-button > .icon > .img-icon{
	position: absolute;
	z-index: 2;
	transition: all 0.7s ease;
}

.download-button > .icon > .img-border{
	position: absolute;
	z-index: 1;
	transition: all 0.4s ease;
}

.download-button > .info{
	width: calc( 100% - 67px );
	padding-left: 10px;
}

.download-button > .info > .name{
	display: block;
	width: 100%;
	font-family: Beaufort;
	color: #968983;
	font-size: 20px;
	transition: all 0.3s ease;
}

.download-button > .info > .size{
	display: block;
	width: 100%;
	font-family: Beaufort;
	color: #433e3b;
	font-size: 16px;
	margin-top: 5px;
}

.system-recomend{
	width: calc( 100% + 38px );
	margin-left: -19px;
	margin-right: -19px;
	border-top: 1px solid #231e1e;
	margin-top: 10px;
	margin-bottom: 20px;
}

.recomend-title{
	width: 100%;
	font-family: Beaufort;
	color: #8a827c;
	font-size: 24px;
	text-align: center;
	text-transform: uppercase;
	margin-top: 30px;
	margin-bottom: 15px;
}

.recomend-table{
	width: 850px;
	margin: 0 auto;
	opacity: 0.7;
	transition: all 0.3s ease;
}

.recomend-table:hover{
	opacity: 1;
}

.recomend-table > .tr{
	width: 100%;
	background: #1e1d1d;
	margin-bottom: 2px;
}

.recomend-table > .tr:first-child{
	background: #292727;
}

.recomend-table > .tr:nth-child(n+2):nth-child(even){
	background: #1a1919;
}

.recomend-table > .tr:first-child > .td{
	font-size: 14px;
	color: #f4e6db !important;
	text-transform: uppercase;
}

.recomend-table > .tr > .td{
	width: calc( ( 100% - 120px ) / 2 );
	padding: 15px;
	font-size: 14px;
	color: #6e6969;
	font-family: Roboto Medium;
	position: relative;
}

.recomend-table > .tr > .td:not(:first-child):before{
	content: attr(data-label);
	width: calc( 100% + 30px );
	margin-left: -15px;
	margin-right: -15px;
	text-align: center;
	padding: 10px 0px;
	font-size: 12px;
	color: #f4e6db;
	text-transform: uppercase;
	background: #292727;
	margin-bottom: 15px;
	margin-top: -15px;
	display: none;
}

.recomend-table > .tr > .td:first-child{
	width: 120px;
	font-size: 14px;
	color: #a19993;
	text-transform: uppercase;
}

/* rules */
/* -------------------------------------------------------------------------------------------------------------------- */

.rules{
	width: 100%;
	margin-top: 50px;
}

.toggles{
	width: 100%;
	margin-top: 25px;
	margin-bottom: 5px;
}

.toggle{
	width: 100%;
	margin-bottom: 10px;
}

.toggle > .title{
	width: 100%;
	height: 57px;
	border-style: solid;
	border-width: 2px 18px 2px 18px;
	border-image: url(../imgs/bg/toggle_border.png) 2 18 2 18 repeat repeat;
	position: relative;
	z-index: 1;
	background: none;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
}

.toggle > .title:hover{
	filter: brightness(130%);
}

.toggle > .title:before{
	content: '';
	position: absolute;
	width: 100%;
	height: calc( 100% - 6px );
	background: #1c1a1a;
	z-index: 0;
}

.toggle > .title > span{
	font-size: 18px;
	color: #9b9588;
	line-height: 18px;
	position: relative;
	z-index: 1;
	margin-left: 15px;
	margin-top: 2px;
}

.toggle > .toggle-block{
	width: calc( 100% - 26px );
	border-left: 2px solid #282625;
	border-right: 2px solid #282625;
	border-bottom: 2px solid #282625;
	background: #131212;
	margin: 0 auto;
	padding: 18px;
	font-family: Roboto Medium;
	font-size: 14px;
	color: #514d4d;
	line-height: 26px;
	display: none;
}


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

.inner-articles{
	width: 100%;
	margin-top: 40px;
}

.inner-articles-title{
	margin-top: 0px;
	margin-bottom: 30px;
}

.inner-articles-stroke{
	width: 100%;
	margin-top: 25px;
	margin-bottom: 5px;
}

.inner-articles-stroke > article{
	width: 100%;
	padding: 15px;
	border: 2px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 30px;
}

.inner-articles-stroke > article > .img {
    width: 240px;
    height: 240px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 10px solid #0f0d0e;
}

.inner-articles-stroke > article > .img > img {
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

.inner-articles-stroke > article > .img:before {
    content: '';
    width: calc( 100% - 26px );
    height: calc( 100% - 26px );
    border: 2px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0px 0px 20px #000, 0px 0px 20px #000;
    position: absolute;
    z-index: 2;
}

.inner-articles-stroke > article > .article-content{
	width: calc( 100% - 240px );
	padding: 0px 20px;
}

.inner-articles-stroke > article > .article-content > .title{
	width: 100%;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inner-articles-stroke > article > .article-content > .title > a{
	color: #ae9f95;
	font-size: 30px;
	font-family: Beaufort;
	line-height: 24px;
	transition: all 0.3s ease;
}

.inner-articles-stroke > article > .article-content > .title > a:hover{
	color: #d96a27;
}

.inner-articles-stroke > article > .article-content > .text{
	width: 100%;
	height: calc( 28px * 4 );
	font-family: Roboto Medium;
	color: #4d4b49;
	font-size: 16px;
	line-height: 28px;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 4;
    -moz-box-orient: vertical;
    margin-top: 17px;
    margin-bottom: 17px;
}

.inner-articles-stroke > article > .article-content > .info{
	width: 100%;
}

.inner-articles-stroke > article > .article-content > .info > .small-gray-button{
	width: 116px;
	padding-top: 1px;
	margin-left: -8px;
	margin-right: 15px;
}

.inner-articles-stroke > article > .article-content > .info > .small-gray-button > span{
	font-size: 14px;
}

.inner-articles-stroke > article > .article-content > .info > .date{
	font-family: Roboto Medium;
	color: #353433;
	font-size: 14px;
	line-height: 14px;
}

.pagination{
	width: 100%;
}

.pagination > a{
	width: 42px;
	height: 42px;
	background: url(../imgs/bg/pager_btn_bg.png) center center;
	background-size: 100% 100%;
	font-size: 18px;
	font-family: Beaufort;
	color: #c8bfbf;
	margin: 3px 5px;
	opacity: 0.4;
	transition: all 0.3s ease;
}

.pagination > .active{
	opacity: 0.8;
}

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

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

.footer-bg{
	width: 100%;
	background: #080808;
}

footer{
	width: 1240px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding-top: 50px;
	padding-bottom: 30px;
}

footer > .cpr{
	width: 340px;
}

footer > .cpr > .logo{
	width: auto;
}

footer > .cpr > .text{
	width: 100%;
	font-family: Roboto Medium;
	color: #474646;
	font-size: 10px;
	line-height: 18px;
	margin-top: 15px;
	margin-bottom: 13px;
}

footer > .cpr > .banners{
	width: auto;
}

footer > .cpr > .banners > .unsimple{
	opacity: 0.4;
	transition: all 0.3s ease;
}

footer > .cpr > .banners > .unsimple:hover{
	opacity: 0.7;
}

footer > .cpr > .banners > .pay{
	opacity: 0.3;
	transition: all 0.3s ease;
	margin-top: 7px;
	margin-left: 20px;
	cursor: pointer;
}

footer > .cpr > .banners > .pay:hover{
	opacity: 0.7;
}

footer > .links{
	width: 120px;
}

footer > .links > a{
	white-space: nowrap;
	position: relative;
	font-family: Beaufort;
	color: #514f4f;
	font-size: 18px;
	line-height: 18px;
	display: block;
	margin-bottom: 37px;
	margin-top: 13px;
	transition: all 0.3s ease;
	display: block;

}

footer > .links > a:hover{
	color: #9a9593;
}

footer > .links > a:before{
	content: '';
	width: 2px;
	height: 2px;
	border: 2px solid #9e9d9c;
	position: absolute;
	left: -16px;
	top: 5px;
	pointer-events: none;
	opacity: 0.3;
	margin-top: 1px;
}

footer > .links > .active{
	color: #ce9f4c !important;
}

footer > .buttons{
	width: 190px;
}

footer > .buttons > a{
	width: 100%;
	height: 36px;
	background: url(../imgs/bg/f_button.png) center center;
	font-family: Beaufort;
	color: #514f4f;
	font-size: 18px;
	line-height: 18px;
	margin-top: 11px;
	transition: all 0.3s ease;
}

footer > .buttons > a:hover{
	color: #9a9593;
}

.big-gray-button {
    width: 190px;
    height: 36px;
    border-style: solid;
    padding-top: 1px;
    border-width: 2px 11px 2px 11px;
    border-image: url(../imgs/bg/small_gray_button.png) 2 11 2 11 repeat repeat;
    position: relative;
    z-index: 1;
    background: none;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.big-gray-button:before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc( 100% - 3px );
    background: #96847b;
    z-index: 0;
}

.big-gray-button:after {
    content: '';
    width: 100px;
    height: 200px;
    background: #fff;
    z-index: 3;
    position: absolute;
    left: 0px;
    transform: rotate(30deg);
    left: -150px;
    transition: all 0.7s ease;
    opacity: 0.2;
}

.big-gray-button > span {
    font-family: Beaufort Bold;
    color: #1a1919;
    line-height: 18px;
    position: relative;
    z-index: 1;
    font-size: 14px;
}

.big-gray-button:hover{
	filter: brightness(130%);
}

.big-gray-button:hover:after{
	left: calc( 100% + 150px );
}

.forum-msg > .forum-msg-content > .big-gray-button {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 29px;
    margin-bottom: 5px;
}

/* gallery wnd */
/* -------------------------------------------------------------------------------------------------------------------- */

.gallery-wnd{
	background: #141213;
	width: calc( 100% - 600px );
	max-width: 1440px;
	transform: scale(1.5,1.5);
	transition: all 0.6s ease;
}

.gallery-wnd > .gallery-monitor{
	margin: 20px;
	border: 1px solid #282323;
	overflow: hidden;
	transition: all 0.3s ease;
}

.gallery-wnd > .gallery-monitor > img{
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-wnd > .gallery-navigation{
	width: 100%;
}

.gallery-wnd > .gallery-navigation > .arrow-left{
	width: 40px;
	height: 40px;
	background: url(../imgs/icon/arrow-left.png) center center;
	background-size: 100% 100%;
	transition: all 0.3s ease;
	cursor: pointer;
	margin-right: 20px;
	opacity: 0.6;
}

.gallery-wnd > .gallery-navigation > .arrow-right{
	width: 40px;
	height: 40px;
	background: url(../imgs/icon/arrow-right.png) center center;
	background-size: 100% 100%;
	transition: all 0.3s ease;
	cursor: pointer;
	margin-left: 20px;
	opacity: 0.6;
}

.gallery-wnd > .gallery-navigation > .cancel{
	width: 40px;
	height: 40px;
	background: url(../imgs/icon/cancel_icon.png) center center;
	background-size: 100% 100%;
	transition: all 0.3s ease;
	cursor: pointer;
	opacity: 0.6;
}

.gallery-wnd > .gallery-navigation > .arrow-left:hover,
.gallery-wnd > .gallery-navigation > .arrow-right:hover,
.gallery-wnd > .gallery-navigation > .cancel:hover{
	opacity: 1;
	filter: brightness(130%);
}

.gallery-wnd-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	background: rgba(0,0,0,0.8);
	top: 0px;
	right: 0px;
	z-index: 4;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease;
}


/* Tooltip */
.tooltip > .tooltip-inner {
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 15px;
  font-size: 20px;
}

/* Tooltip on top */
.tooltip.top > .tooltip-arrow {
  border-top: 5px solid green;
}

/* Tooltip on bottom */
.tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid blue;
}


.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.dropdown-menu-left {
  right: auto;
  left: 0;
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}


.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropright .dropdown-toggle::after {
  vertical-align: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}

.dropleft .dropdown-toggle::after {
  display: none;
}

.dropleft .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropleft .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
  right: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #f8f9fa;
}

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}



.btn-primary {
    color: #fff;
    background-color: rgba(158, 157, 156, 0.03);
    border: 1px solid rgb(43, 40, 39);
}


.img_title_donate{
	display: block;
	margin: auto;
	margin-top:30px;
}
.title_donate{
	padding-top:50vh;
}
img.img_header_donate{
	position:absolute;
	right:100px;
	z-index:-1;
}
.label_input_donate{
	font-family: Beaufort, serif;
	margin-bottom:15px;
}
.character_name_div{
	margin-top:50px;
	margin-bottom:50px;
	width: 100%;
	display: block;
}
div.label_check{
	width: 100%;
	display: flex;
}
.checkbox-text{
	margin-left:20px;
}
.checkbox-text a{
	color:#d9b45d;
}
.less_width{
	width:70%;
	display: block;
	margin: auto;
}
.less_width2{
	width:80%;
	display: block;
	margin: auto;
}
.margined_big_div{
	margin-bottom:100px;
}

.castled { width: 380px; height: 260px; margin: 0; float: left; }
.castled b { color: #fff; }
.castled .ci .co { color: rgba(255,255,255,0.6); }
.castled, .castled > div { display: table; }
.castled .ct { color: #fff; font-size: 16px; font-weight: bold; padding: 10px 0 10px 30px; }
.castled .imgc { width: 200px; height: 113px; border: 1px solid rgba(0,0,0,0.4); float: left; border-radius: 6px; }
.castled .imgc span { display: block; width: 200px; height: 113px; background: rgba(0,0,0,0.6) url('../imgs/nm/castles.jpg') no-repeat; border-radius: 5px; }
.castled .ci { float: left; width: 160px; padding: 2px 0 0 10px; }
.castled .ci .co { font-weight: bold; }
.castled .ci .cc { margin-bottom: 8px; }
.castled .nwar { padding: 5px 0 10px 0; }
.castled .imgc.aden span { background-position: left top; }
.castled .imgc.goddard span { background-position: -200px top; }
.castled .imgc.giran span { background-position: -400px top; }
.castled .imgc.oren span { background-position: -600px top; }
.castled .imgc.dion span { background-position: -800px top; }
.castled .imgc.gludio span { background-position: -1000px top; }
.castled .imgc.innadril span { background-position: -1200px top; }
.castled .imgc.rune span { background-position: -1400px top; }
.castled .imgc.schuttgart span { background-position: -1600px top; }
}