/*L2Banners.ru - Верстка сайтов на заказ
Email: l2banners@mail.ru
*/

@import url(reset.css);

body {
    background: rgb(12, 2, 1) url(../images/bg_full_clear.jpg) no-repeat center top;
    height: 2000px;
    color: #f4dbab;
    font-family: "PTSans", sans-serif;
    font-size: 14px;
}

#l2oops {
    position: absolute;
    right: 1px;
    top: 1px;
    display: grid;
}


.bonus-start {
    display: block;
    background: #010A13;
    border: 3px solid #463714;
    border-radius: 0px;
    padding: 0 0px;
    text-align: center;
    color: #fff;
}

.bonus-start h2 {
    font-family: "Philosopher", sans-serif;
    padding: 15px 0;
    font-weight: 500;
    font-size: 25px;
    background: -webkit-linear-gradient(#f0e7a9, #cbab5c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d3c7a9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.bonus-start h3 {
    font-family: "Philosopher", sans-serif;
    padding: 0;
    font-weight: 500;
    margin: -10px 0 -10px 0;
    color: #36D4E7;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 0 30px #36D4E7;
    font-size: 25px;
}

.bonus-start ul {
    list-style-type: none;
    text-align: left;
    margin-left: 40px;
}

.bonus-start ul li {
    font-family: "Philosopher", sans-serif;
    margin: 0 0 5px 0;
    line-height: 32px;
    height: 32px;
    display: block;
    font-size: 15px;
}

.bonus-start ul li:after {
    content: "";
    display: table;
    clear: both;
    width: 100%;
}

.bonus-start ul li img {
    width: 32px;
    height: 32px;
    float: left;
    display: block;
    margin: 0 10px 0 0;
}

.bonus-start a {
    font-family: "Philosopher", sans-serif;
    display: inline-block;
    font-weight: 500;
    text-decoration: underline;
    height: 40px;
    line-height: 40px;
    color: #fff;
    margin: 0 0 10px 0;
    color: #36D4E7;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 0 30px #36D4E7;
    font-size: 15px;
}

.superinfo {
    z-index: 1000;
    transition: 1.5s;
    display: block;
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 346px;
}

.superinfo a {
    display: block;
}

.superinfo img {
    width: 100%;
    height: auto;
    text-align: center;
    object-fit: cover;
    border-radius: 4px;
}

.superinfoclose {
    cursor: pointer;
    position: absolute;
    right: -30px;
    top: -20px;
    line-height: 30px;
    text-align: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #111;
}

.superinfoclose:hover {
    color: #fff;
    background: #000;
}

.superinfoclose:after {
    font-family: 'fontello';
    content: "\2716";
    font-size: 20px;
    font-weight: bold;
}

.superinfo.close {
    transition: 1.5s;
    transform: translatex(-300%);
}

.superinfo a:hover {
    filter: brightness(130%) contrast(130%);
}

.superinfo.close .obtanons {
    animation: none;
}

.obnovi {
    border: 1px solid #faf0a3;
    transition: 1s;
    box-shadow: 0 0 25px rgba(0, 0, 0, .7);
    z-index: 1000;
    position: fixed;
    right: 30px;
    bottom: 30px;
    transform: translatey(0);
    padding: 20px 20px;
    width: 300px;
    border-radius: 4px;
    background: #F83414;
    color: rgba(255, 255, 255, .87);
}

.obnovi h5 {
    color: rgba(255, 255, 255, .99);
    font-size: 19px;
    text-align: center;
    font-weight: bold;
    margin: -20px -20px 20px -20px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, .1);
}

.obnovi p {
    text-align: center;
    font-size: 16px;
}

.obnovi p a {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
}

.obnovi:hover {
    transform: translatey(0);
}

.obnovi .obnovi-buttons {
    display: block;
    text-align: center;
}

.obnovi .obnovi-buttons a {
    font-weight: bold;
    transition: .2s;
    display: inline-block;
    padding: 0 25px;
    margin: 0 5px 0 0;
    height: 35px;
    line-height: 35px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    text-align: center;
}

.obnovi .obnovi-buttons a:hover {
    background: #fff;
    color: #F83414;
}


.main {
    min-width: 950px;
    position: relative;
    z-index: 2;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 2px;
    border-color: #777;
    background-color: #aaa;
}

::-webkit-scrollbar-thumb:hover {
    border-width: 1px 1px 1px 2px;
    border-color: #555;
    background-color: #777;
}

::-webkit-scrollbar-track {
    border-width: 0;
}

::-webkit-scrollbar-track:hover {
    border-left: solid 1px #aaa;
    background-color: #eee;
}

#mycustomscroll {
    overflow-y: scroll;
    height: 620px;
    outline: none;
}

#mycustomscroll {
    position: relative;
    margin: 0.3em auto;
}

.scrollgeneric {
    line-height: 1px;
    font-size: 1px;
    position: absolute;
    top: 0;
    left: 0;
}

.vscrollerbase,
.vscrollerbar {
    width: 24px;
}

.hscrollerbase,
.hscrollerbar {
    height: 24px;
}

.vscrollerbar,
.hscrollerbar {
    padding: 24px 0 17px;
    z-index: 2;
}

.vscrollerbarbeg {
    background: url('../images/scroll.png') no-repeat 0 0;
    height: 25px !important;
    width: 25px;
    padding-left: 19px
}

.vscrollerbase,
.hscrollerbase {
    background: url('../images/s-bg.png') repeat-y 9px 0;
}

.hscrollerbasebeg {}

.hscrollerbaseend {}

.vscrollerbasebeg {}

.vscrollerbaseend {}

.scrollerjogbox {}

#mycustomscroll_vscrollerbar {
    height: 24px !important
}


a {
    color: rgb(234, 202, 180);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity, color, background-color, background;
    transition-property: opacity, color, background-color, background;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
}

input,
select {
    width: 100%;
    max-width: 250px;
    min-height: 20px;
    border: 1px solid rgb(48, 53, 84);
    background-color: rgba(49, 56, 66, 0.39);
    padding: 7px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s all;
    transition: .3s all;
    color: #fff;
}

input:focus {
    -webkit-box-shadow: 0px 0px 4px rgb(74, 144, 224);
    box-shadow: 0px 0px 4px rgb(74, 144, 224);
}

.input_wrapper {
    position: relative;
    min-height: 20px;
    width: 100%;
    max-width: 250px;
    margin-bottom: 20px;
}

.input_wrapper span {
    margin-bottom: 10px;
    display: inline-block;
}


/* Дополнительно */

.hidden {
    opacity: 0;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.visible {
    opacity: 1;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.l2b_animation {
    opacity: 0;
}

.l2b_animation.animated {
    opacity: 1;
}

.title {
    background: url(../images/title.png) no-repeat;
    width: 279px;
    height: 44px;
    text-align: center;
    color: rgb(219, 195, 165);
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    text-transform: uppercase;
    padding-top: 17px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.title_center {
    margin: 0 auto;
}

.title::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 21px;
    text-align: center;
    z-index: -1;
    opacity: 0.15;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

.title::after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    text-align: center;
    z-index: -1;
    opacity: 0.15;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

.static_title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: rgb(246, 255, 0);
}

.static_title:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(15%, rgba(255, 252, 8, 0.3)), color-stop(85%, rgba(255, 252, 8, 0.3)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 252, 8, 0.3) 15%, rgba(255, 252, 8, 0.3) 85%, rgba(0, 0, 0, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.old_ie {
    background-color: #000;
    font-size: 30px;
    padding: 120px 0 20px 0;
    text-align: center;
    z-index: 999999;
    width: 100%;
    color: #fff;
}

.old_ie a {
    color: #D53939;
}


/* header */

.header {
    height: 300px;
    width: 950px;
    margin: 0 auto;
    position: relative;
}

.logo {
    width: 300px;
    height: 118px;
    position: absolute;
    left: 530px;
    top: 150px;
    display: block;
    border-radius: 50px 50px 20px 20px;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.logo:before {
    content: '';
    display: block;
    background: url(../images/logo.png) no-repeat;
    width: 503px;
    height: 293px;
    position: absolute;
    left: -110px;
    top: -86px;
    -webkit-transition: .3s all;
    transition: .3s all;
    pointer-events: none;
}

.logo::after {
    content: '';
    display: block;
    background: url(../images/logo_txt.png) no-repeat;
    width: 330px;
    height: 183px;
    position: absolute;
    left: -14px;
    top: -47px;
    -webkit-transition: .3s all;
    transition: .3s all;
    pointer-events: none;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;
}

.logo:hover::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}


/* nav */

.nav {
    height: 90px;
    width: 950px;
    margin: 0 auto;
}

.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 90px;
    position: relative;
}

.menu__link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s all;
    transition: .3s all;
    color: #f4dbab;
    font-family: "PT Sans", sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 15px 5px 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(31%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(63, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 31%, rgba(63, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0;
    transition-duration: 0;
    position: relative;
}

.menu__link:hover {
    /* background-color: rgba(5, 1, 0, 0.31); */
}

.menu__link:after {
    content: '';
    display: block;
    position: absolute;
    -webkit-transition: .3s all;
    transition: .3s all;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(31%, rgba(0, 0, 0, 0.3)), color-stop(70%, rgba(63, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 31%, rgba(63, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) inset;
    z-index: -1;
    opacity: 0;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.menu__link:hover:after {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
}

.menu__txt {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    text-align: left;
}

.menu__title {
    text-transform: uppercase;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.menu__link:hover .menu__title {
    text-shadow: 0 0 10px #fc5f27, 0 0 10px #fc5f27;
}

.menu__link:hover .menu__title {
    color: rgb(255, 220, 170);
}

.menu_desc {
    color: #ab9f92;
    font-size: 12px;
    white-space: nowrap;
}

.menu__img {
    width: 50px;
    height: 50px;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 0px;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.menu__link:hover .menu__img {
    /* transform: scale(1.1); */
    -webkit-animation: menu__img .3s;
    animation: menu__img .3s;
}

@-webkit-keyframes menu__img {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes menu__img {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.menu__home .menu__img {
    background-image: url(../images/ico__home.png);
}

.menu__reg .menu__img {
    background-image: url(../images/ico__reg.png);
}

.menu__files .menu__img {
    background-image: url(../images/ico__files.png);
}

.menu__about .menu__img {
    background-image: url(../images/ico__about.png);
}

.menu__forum .menu__img {
    background-image: url(../images/ico__forum.png);
}

.menu__donate .menu__img {
    background-image: url(../images/ico__donate.png);
}

.menu_container p {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu_wrp.active_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


/* content-main */

.content-main {
    height: 1250px;
    width: 950px;
    /* outline: 1px solid rgb(53, 255, 211); */
    margin: 0 auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.content-main::after {
    content: '';
    display: block;
    width: 946px;
    height: 1247px;
    position: absolute;
    top: -61px;
    left: 2px;
    -webkit-transition: .3s all;
    transition: .3s all;
    background: url(../images/bg__content_bottom.png) no-repeat center bottom;
    z-index: -2;
}


/* content-wrp */

.content-wrp {
    width: 590px;
    height: 1190px;
    margin: 7px -5px 0px 35px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    line-height: 1.4;
    overflow: auto;
}

.content {
    height: 1107px;
    margin-top: 10px;
}

.news {
    background: url(../images/news__bg.png) repeat-y center top;
    width: 573px;
    padding: 3px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    color: #e3b866;
    font-size: 14px;
    line-height: 20px;
}

.news_center {
    margin: 12px auto 40px auto;
}

.news:before {
    content: '';
    display: block;
    width: 573px;
    height: 33px;
    position: absolute;
    top: -10px;
    -webkit-transition: .3s all;
    transition: .3s all;
    left: 0;
    background: url(../images/news__top.png) no-repeat;
    z-index: 0;
}

.news:after {
    content: '';
    display: block;
    width: 573px;
    height: 25px;
    position: absolute;
    bottom: -10px;
    -webkit-transition: .3s all;
    transition: .3s all;
    left: 0;
    background: url(../images/news__bottom.png) no-repeat;
    z-index: 0;
}

.news__header {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border-bottom: 1px solid rgba(101, 52, 28, 0.65);
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.news__title {
    color: #f4dbab;
    font-family: "PTSans", sans-serif;
    font-size: 24px;
    font-weight: bold;
}

.news__ico-title {
    position: relative;
    top: 2px;
}

.news__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #754d37;
    font-size: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.news__date_top {
    margin-top: 4px;
}

.news__ico-clock {
    margin: 0 5px;
}

.news__img {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: 59px;
    background-image: url(../images/news__img.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.news__img_b {
    margin-bottom: 10px;
}

.news__content {
    position: relative;
    z-index: 2;
}

.news__content_dec {
    border-bottom: 1px solid rgba(101, 52, 28, 0.65);
    padding-bottom: 6px;
    margin-bottom: 4px;
}

.news__info {
    position: relative;
    z-index: 2;
    padding: 10px 0 5px 0
}

.news__more {
    width: 140px;
    height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #190f09;
    font-size: 14px;
    font-weight: bold;
    position: relative;
}

.news__more:before {
    content: '';
    display: block;
    background: url(../images/btn-more.png) no-repeat;
    width: 199px;
    height: 51px;
    position: absolute;
    left: -30px;
    top: -7px;
    -webkit-transition: .3s all;
    transition: .3s all;
    pointer-events: none;
    z-index: -1;
}

.news__more:hover:before {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.news__more_center {
    margin: 0 auto;
}


/* pagination */

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 10px 0;
}

.pagination__link {
    width: 18px;
    height: 18px;
    text-decoration: none;
    background-position: center center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 1px;
}

.pagination__start {
    background-image: url(../images/pagination__left.png);
}

.pagination__end {
    background-image: url(../images/pagination__right.png);
}

.pagination__page {
    background-image: url(../images/pagination__noactive.png);
}

.pagination__page:hover,
.pagination__page_active {
    background-image: url(../images/pagination__active.png);
}


/* sidebar */

.sidebar {
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-left: 27px;
    width: 279px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 7px;
}


/* Сервера */

.status {
    height: 293px;
}

.status-wrp {
    min-height: 200px;
}

.servers {
    height: 155px;
    overflow: hidden;
}

.server_container {
    width: 229px;
    height: 35px;
    position: relative;
    margin: 30px 0 55px 30px;
}

.server_container:before {
    content: '';
    display: block;
    background: url(../images/server__line.png) no-repeat;
    width: 269px;
    height: 2px;
    position: absolute;
    bottom: -25px;
    left: -32px;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.server_container:after {
    content: "";
    display: block;
    background: url(../images/server__dec.png) no-repeat;
    width: 46px;
    height: 46px;
    position: absolute;
    left: -29px;
    top: -24px;
}

.server_bg {
    display: inline-block;
    background: url(../images/server__empty.png) no-repeat;
    width: 229px;
    height: 20px;
    position: relative;
}

.server_load {
    display: block;
    background: url(../images/server__full.png) no-repeat;
    max-width: 226px;
    width: 0%;
    height: 13px;
    position: relative;
    left: 0;
    top: 3px;
    -webkit-transition: 2s all;
    transition: 2s all;
}

.server_name {
    color: #f4dbab;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    left: 40px;
    top: -20px;
    z-index: 10;
}

.server_name:after {
    content: "";
    display: block;
    background: url(../images/server__arrow.png) no-repeat;
    width: 13px;
    height: 14px;
    position: absolute;
    left: -18px;
    top: 3px;
}

.server_name a {
    color: #f4dbab;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
}

.server_name a:hover {
    color: rgb(255, 236, 130);
}

.l2b_server_loader {
    position: absolute;
    right: 22px;
    top: 24px;
    color: #f4dbab;
    font-size: 14px;
}

.stat-btn-wrp {
    padding: 25px 0 0 6px;
}


/* s-btn */

.s-btn {
    width: 178px;
    height: 39px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(254, 233, 182);
    font-size: 17px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    position: relative;
    border-radius: 10px;
}

.s-btn:before {
    content: '';
    display: block;
    background: url(../images/s-btn.png) no-repeat;
    width: 208px;
    height: 71px;
    position: absolute;
    left: -17px;
    top: -16px;
    -webkit-transition: .3s all;
    transition: .3s all;
    pointer-events: none;
    z-index: -1;
}

.s-btn:hover:before {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.s-btn_center {
    margin: 0 auto;
}

.s-btn__img {
    margin: 0 5px 5px 0;
}


/* cp-wrp */

.cp-wrp {
    height: 209px;
}

.cp-enter {
    height: 150px;
    position: relative;
}


/* btn-enter */

.btn-enter {
    width: 178px;
    height: 39px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(254, 233, 182);
    font-size: 17px;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    position: relative;
    border-radius: 10px;
}

.btn-enter:before {
    content: '';
    display: block;
    background: url(../images/enter.png) no-repeat;
    width: 296px;
    height: 104px;
    position: absolute;
    left: -62px;
    top: -30px;
    -webkit-transition: .3s all;
    transition: .3s all;
    pointer-events: none;
    z-index: -1;
}

.btn-enter:hover:before {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.btn-enter_posa {
    position: absolute;
    left: 45px;
    top: 60px;
}


/* tops */

.tops {
    height: 174px;
}


/* top */

.title__top {
    text-align: center;
    margin-bottom: 30px;
}

.top {
    width: 266px;
    height: 240px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
}

.top_pos {
    position: relative;
}

table.top_block {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}

table.top_block tr {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    height: 25px;
    line-height: 25px;
}

table.top_block tr th,
table.top_block tr td {
    position: relative;
    height: 25px;
    line-height: 25px;
}

table.top_block tr td {
    color: #f4daab;
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding: 0;
}

table.top_block tr td.td-header {
    color: #c7a369;
    font-size: 13px;
}

table.top_block tr td:nth-child(1) {
    width: 30px;
    text-align: center;
    color: rgb(107, 61, 35);
    font-family: "PTSans", sans-serif;
    font-size: 14px;
}

table.top_block tr td:nth-child(2) {
    width: 193px;
    text-align: left;
}

table.top_block tr td:nth-last-child(1) {
    width: 40px;
    text-align: right;
}

table.top_block tr td span {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 12px;
    background: #36361f;
    top: 1px;
}

table.top_pvp {
    top: 0px;
    right: 0px;
}

table.top_pk {
    top: 0px;
    right: 0px;
}

#top_player {
    position: relative;
    display: block;
    width: 100%;
    height: 70px;
}

.top_player_block_server_0,
.top_player_block_server_1,
.top_player_block_server_2,
.top_player_block_server_3 {
    position: absolute;
    display: block;
    width: 100%;
    height: 70px;
    top: 12px;
    left: 0px;
    right: 0px;
    margin: auto;
    -webkit-transform: scale(0.0);
    transform: scale(0.0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
}

.top_active_block {
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
    opacity: 1 !important;
}

ul#top_tabs_server0,
ul#top_tabs_server1,
ul#top_tabs_server2,
ul#top_tabs_server3 {
    position: absolute;
    display: block;
    right: 100px;
    list-style: none;
    text-align: center;
    margin: auto;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: -15px;
}

ul#top_tabs_server0:after,
ul#top_tabs_server1:after,
ul#top_tabs_server2:after,
ul#top_tabs_server3:after {
    content: '';
    display: block;
    left: 5px;
    right: 5px;
    height: 1px;
    position: absolute;
    background-color: rgb(118, 77, 55);
    -webkit-transition: .3s all;
    transition: .3s all;
    z-index: -1;
    bottom: 0;
}

ul#top_tabs_server0 li,
ul#top_tabs_server1 li,
ul#top_tabs_server2 li,
ul#top_tabs_server3 li {
    position: relative;
    display: inline-block;
    margin: 0 2px;
    color: #764d37;
    line-height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(118, 77, 55);
}

ul#top_tabs_server0 li.active,
ul#top_tabs_server1 li.active,
ul#top_tabs_server2 li.active,
ul#top_tabs_server3 li.active {
    border-bottom: 1px solid #ffc798;
}

ul#top_tabs_server0 li a,
ul#top_tabs_server1 li a,
ul#top_tabs_server2 li a,
ul#top_tabs_server3 li a {
    position: relative;
    display: block;
    height: 20px;
    line-height: 20px;
    color: #764d37;
    font-size: 12px;
    text-decoration: none;
    margin: 0;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.top_content_server {
    position: absolute;
    display: block;
    width: 100%;
    height: 60px;
    top: 15px;
    left: 0px;
    right: 0px;
    margin: auto;
    -webkit-transform: scale(0.0);
    transform: scale(0.0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 1;
    opacity: 0;
}

ul#top_tabs_server {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    top: 0;
    left: 0;
    height: 20px;
    text-align: center;
    list-style: none;
    z-index: 0;
    line-height: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

ul#top_tabs_server:after {
    content: '';
    display: block;
    left: 5px;
    right: 5px;
    height: 1px;
    position: absolute;
    bottom: -1px;
    background-color: rgb(118, 77, 55);
    -webkit-transition: .3s all;
    transition: .3s all;
    z-index: -1;
}

ul#top_tabs_server li {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 5px;
    border-bottom: 1px solid #764d37;
}

ul#top_tabs_server li.active {
    border-bottom: 1px solid #ffc798;
}

ul#top_tabs_server li a {
    position: relative;
    display: block;
    text-align: center;
    color: #764d37;
    font-size: 12px;
    text-decoration: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    width: 55px;
    height: 20px;
    line-height: 20px;
}

ul#top_tabs_server0 li.active a,
ul#top_tabs_server1 li.active a,
ul#top_tabs_server2 li.active a,
ul#top_tabs_server3 li.active a,
ul#top_tabs_server0 li a:hover,
ul#top_tabs_server1 li a:hover,
ul#top_tabs_server2 li a:hover,
ul#top_tabs_server3 li a:hover {
    color: #ffc798;
}

ul#top_tabs_server li.active a,
ul#top_tabs_server li a:hover {
    color: #ffc798;
}


/* forum */

.forum {
    height: 410px;
    position: relative;
}

.thema {
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    max-width: 100%;
    margin: 10px 0;
    position: relative;
}

.thema:after {
    content: '';
    display: block;
    position: absolute;
    left: -5px;
    right: calc(100% + 5px);
    bottom: 0;
    top: 0;
    /* background-color: rgba(219, 120, 74, 0.13);
    background: linear-gradient(to right, rgba(219, 120, 74, 0) 0%, rgba(219, 120, 74, 0.13) 45%, rgba(219, 120, 74, 0.13) 100%); */
    background: -webkit-gradient(linear, left top, right top, from(rgba(219, 120, 74, 0)), color-stop(45%, rgba(219, 120, 74, 0.13)), color-stop(94%, rgba(219, 120, 74, 0.13)), to(rgba(219, 120, 74, 0)));
    background: linear-gradient(to right, rgba(219, 120, 74, 0) 0%, rgba(219, 120, 74, 0.13) 45%, rgba(219, 120, 74, 0.13) 94%, rgba(219, 120, 74, 0) 100%);
    -webkit-transition: .3s all;
    transition: .3s all;
    z-index: -1;
    border-radius: 5px;
    opacity: 0;
}

.thema:hover:after {
    right: 0;
    opacity: 1;
}

.thema__img {
    width: 40px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: url(../images/theme__ico.png) no-repeat;
    width: 35px;
    height: 42px;
    margin-right: 6px;
}

.thema:hover .thema__img {
    -webkit-animation: thema__img .3s;
    animation: thema__img .3s;
}

@-webkit-keyframes thema__img {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes thema__img {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.thema__content {}

.thema__title {
    color: #f4dbab;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}

.thema__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    /*  justify-content: space-between;*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #794529;
    font-size: 11px;
    margin-top: 2px;
}


.thema__date {
    padding: 0 15px;
}

.forum-btn-wrp {
    padding-left: 6px;
}


/* scl */

.scl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 10px;
}

.scl__link {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: block;
    margin: 3px;
    -webkit-box-shadow: 0 0 10px red inset;
    box-shadow: 0 0 10px red inset;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-box-shadow: 0 0 4px rgba(255, 99, 99, 0) inset, 0 0 7px rgba(255, 22, 22, 0);
    box-shadow: 0 0 4px rgba(255, 99, 99, 0) inset, 0 0 7px rgba(255, 22, 22, 0);
    -webkit-filter: saturate(0);
    filter: saturate(0);
}

.scl__link:hover {
    -webkit-box-shadow: 0 0 4px rgba(255, 99, 99, 0.38) inset, 0 0 7px rgba(255, 22, 22, 0.65);
    box-shadow: 0 0 4px rgba(255, 99, 99, 0.38) inset, 0 0 7px rgba(255, 22, 22, 0.65);
    -webkit-filter: saturate(1);
    filter: saturate(1);
}

.scl__link_vk {
    background: url(../images/scl__vk.png) no-repeat;
}

.scl__link_facebook {
    background: url(../images/scl__facebook.png) no-repeat;
}

.scl__link_instagram {
    background: url(../images/scl__instagram.png) no-repeat;
}

.scl__link_youtube {
    background: url(../images/scl__youtube.png) no-repeat;
}

.scl__link_telegram {
    background: url(../images/scl__telegram.png) no-repeat;
}

.scl__link_skype {
    background: url(../images/scl__skype.png) no-repeat;
}


/* footer */

.footer {
    background: url(../images/footer__bg.png) no-repeat center bottom;
    height: 209px;
}

.footer__container {
    padding-top: 100px;
    height: 209px;
    width: 950px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* logo-min */

.logo-min {
    background: url(../images/logo_min.png) no-repeat;
    width: 177px;
    height: 100px;
}


/* f-nav */

.f-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.f-nav_pos {
    margin: 0 30px;
}

.f-nav__item {
    width: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.f-nav__link {
    color: #f4dbab;
    font-size: 14px;
    display: inline-block;
    text-decoration: none;
    margin: 10px 0;
    position: relative;
}

.f-nav__link:after {
    content: '';
    display: block;
    height: 1px;
    background-color: #f4dbab;
    position: absolute;
    left: 0;
    bottom: -3px;
    right: 100%;
    -webkit-transition: .3s all;
    transition: .3s all
}

.f-nav__link:hover:after {
    right: 0;
}


/* copy */

.copy {
    opacity: .5;
    color: #f4dbab;
    font-size: 14px;
    text-align: center;
    padding-bottom: 10px;
}


/* bnr-wrp */

.bnrs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bnr-wrp {
    margin: 10px;
}

.bnr-wrp a {
    opacity: .5;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.bnr-wrp a:hover {
    opacity: 1;
}


/* srv-btns */

.srv-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.btn-min {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-decoration: none;
    width: 136px;
    height: 35px;
    color: #f4dbab;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 5px;
    margin: 10px;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.btn-min:after {
    content: "";
    display: block;
    background: url(../images/btn-min.png) no-repeat;
    width: 136px;
    height: 35px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.btn-min:hover:after {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

.btn-min__img {
    position: absolute;
    left: 4px;
    top: 6px;
}


/* animation_zone */

.animation_zone {
    position: absolute;
    z-index: 1;
    display: block;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 2000px;
    pointer-events: none;
    min-width: 950px;
}

.animation_container {
    position: absolute;
    width: 1920px;
    left: 50%;
    top: 0;
    margin-left: -960px;
    height: 2000px;
}

.scene__bg {
    background: url(../images/scene__bg.jpg) no-repeat;
    width: 2000px;
    height: 537px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1000px;
    z-index: -1;
    -webkit-animation: l2b_scene_bg 6s linear infinite;
    animation: l2b_scene_bg 6s linear infinite;
    -webkit-transition: .5s all;
    transition: .5s all
}

@-webkit-keyframes l2b_scene_bg {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(180%);
        filter: brightness(180%);
    }

    2% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    50% {}

    95% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    97% {
        -webkit-filter: brightness(140%);
        filter: brightness(140%);
    }

    98% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(180%);
        filter: brightness(180%);
    }
}

@keyframes l2b_scene_bg {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(180%);
        filter: brightness(180%);
    }

    2% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    50% {}

    95% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    97% {
        -webkit-filter: brightness(140%);
        filter: brightness(140%);
    }

    98% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(180%);
        filter: brightness(180%);
    }
}

.orc {
    display: block;
    background: url(../images/scene__orc.png) no-repeat;
    width: 818px;
    height: 764px;
    position: absolute;
    left: 1391px;
    top: 172px;
    z-index: -1;
    pointer-events: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-animation: orc 30s linear infinite;
    animation: orc 30s linear infinite;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-perspective: 700px;
    perspective: 700px;
}

@-webkit-keyframes orc {
    0% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    50% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg);
    }

    53% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes orc {
    0% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    50% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg);
    }

    53% {
        -webkit-transform: scale(1.01) rotate(2deg);
        transform: scale(1.01) rotate(2deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.girl {
    display: block;
    background: url(../images/scene__girl.png) no-repeat;
    width: 501px;
    height: 524px;
    position: absolute;
    left: 552px;
    top: 10px;
    z-index: -1;
    pointer-events: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-animation: girl 24s linear infinite;
    animation: girl 24s linear infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-perspective: 700px;
    perspective: 700px;
}

@-webkit-keyframes girl {
    0% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

@keyframes girl {
    0% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0);
    }
}

.dragon {
    display: block;
    background: url(../images/scene__dragon.png) no-repeat;
    width: 718px;
    height: 276px;
    position: absolute;
    left: 1203px;
    top: 0px;
    z-index: -1;
    pointer-events: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-animation: dragon 30s linear infinite;
    animation: dragon 30s linear infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-perspective: 700px;
    perspective: 700px;
}

@-webkit-keyframes dragon {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    30% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    50% {
        -webkit-transform: scale(1.05) rotate(5deg) translateX(-20px);
        transform: scale(1.05) rotate(5deg) translateX(-20px);
        -webkit-filter: brightness(130%);
        filter: brightness(130%);
    }

    53% {
        -webkit-transform: scale(1.05) rotate(5deg) translateX(-20px);
        transform: scale(1.05) rotate(5deg) translateX(-20px);
    }

    70% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }
}

@keyframes dragon {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    30% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    50% {
        -webkit-transform: scale(1.05) rotate(5deg) translateX(-20px);
        transform: scale(1.05) rotate(5deg) translateX(-20px);
        -webkit-filter: brightness(130%);
        filter: brightness(130%);
    }

    53% {
        -webkit-transform: scale(1.05) rotate(5deg) translateX(-20px);
        transform: scale(1.05) rotate(5deg) translateX(-20px);
    }

    70% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    }
}

.layer {
    width: 100%;
    height: 2000px;
}

.first-plane {
    content: '';
    display: block;
    width: 1920px;
    height: 546px;
    background: url(../images/scene__first-plane.png) no-repeat;
    position: absolute;
    left: -1px;
    top: 44px;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.bottom-plane {
    content: '';
    display: block;
    width: 1920px;
    height: 654px;
    background: url(../images/scene__footer.jpg) no-repeat;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1000px;
    z-index: -1;
    -webkit-transition: .3s all;
    transition: .3s all;
}

.dark-elf {
    display: block;
    background: url(../images/scene__elf_clear.png) no-repeat;
    width: 472px;
    height: 507px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: -1;
    pointer-events: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-animation: elf 27s linear infinite;
    animation: elf 27s linear infinite;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-perspective: 700px;
    perspective: 700px;
}

@-webkit-keyframes elf {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(3deg);
        transform: scale(1.02) rotate(3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(3deg);
        transform: scale(1.02) rotate(3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }
}

@keyframes elf {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(3deg);
        transform: scale(1.02) rotate(3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(3deg);
        transform: scale(1.02) rotate(3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }
}

.dark {
    display: block;
    background: url(../images/scene__dark_clear.png) no-repeat;
    width: 572px;
    height: 527px;
    position: absolute;
    left: 1200px;
    bottom: 0px;
    z-index: -1;
    pointer-events: none;
    -webkit-transition: .3s all;
    transition: .3s all;
    -webkit-animation: dark 27s linear infinite;
    animation: dark 27s linear infinite;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-perspective: 700px;
    perspective: 700px;
}

@-webkit-keyframes dark {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }
}

@keyframes dark {
    0% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    3% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }

    50% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    53% {
        -webkit-transform: scale(1.02) rotate(-3deg);
        transform: scale(1.02) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0) translateX(0);
        transform: scale(1) rotate(0) translateX(0);
    }



}



/* Фиксируем позицию body, которую меняет панель гугла*/

.body_glang-fix {
    top: 0 !important;
    position: static !important;
}

/* Прячем панель гугла */

.skiptranslate {
    display: none !important;
}


/* Убираем подсветку ссылок */

.goog-text-highlight {
    background-color: inherit !important;
    box-shadow: none !important;
    box-sizing: inherit !important;
}

.langs {
    width: 68px;
    height: 30px;
    position: absolute;
    left: 20px;
    top: 10px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 5px;
}

.langs:after {
    content: '';
    display: block;
    background: url(../images/lang/arrow__down.png) no-repeat;
    width: 8px;
    height: 5px;
    position: absolute;
    right: 10px;
    top: calc(50% - 2px);
    transition: .3s all;
    cursor: pointer;
    filter: drop-shadow(0 0 3px rgba(255, 208, 0, 0.9)) drop-shadow(0 0 5px rgba(255, 196, 0, 0.9));
}

.langs:hover:after {
    transform: rotateX(180deg);
    filter: brightness(100%);
}

.lang__link {
    display: block;
    width: 70px;
    height: 27px;
    /* overflow: hidden; */
    cursor: pointer;
    transition: .3s all;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    text-decoration: none;
}

.lang__img {
    width: 22px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 5px;
    font-size: 10px;
}

.lang__name {
    color: rgb(68, 68, 68);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.lang__link_sub {
    width: 124px;
    height: 27px;
    position: relative;
    padding-left: 20px;
}

.lang__link_sub:hover {
    /* filter: brightness(130%); */
    background-color: rgba(0, 0, 0, 0.18);
}

.lang__link_sub:after {
    content: '';
    display: block;
    background: url(../images/lang/arrow__left.png) no-repeat;
    width: 6px;
    height: 7px;
    position: absolute;
    right: 15px;
    top: calc(50% - 3px);
    transition: .3s all;
    cursor: pointer;
    opacity: 0;
    transform: translateX(10px);
}

.lang__link_sub:hover:after {
    opacity: 1;
    transform: translateX(0px);
}

.lang__link_sub:before {
    content: '';
    display: block;
    /* background: linear-gradient(90deg, #ffffff 0%, #e7e7e7 40%, #ffffff 80%); */
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .3s all;
    cursor: pointer;
}

.lang__link_sub:hover .lang__name {
    color: rgb(255, 238, 147);
}

.lang__wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 124px;
    opacity: 0;
    visibility: hidden;
    transition: .3s all;
    transform: translateY(-40px);
    position: absolute;
    left: -9px;
    top: 100%;
    z-index: 10;
    padding-top: 10px;
}

.langs:hover .lang__wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.lang__list {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.31);
    border-radius: 5px;
    overflow: hidden;
}

.lang__link_select {
    width: 70px;
    height: 27px;
    padding-left: 0;
}

.lang__img_select {
    filter: drop-shadow(0 0 3px rgba(255, 208, 0, 0.6));
}

.lang__name_select {
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
}

.bar__box {
    margin-left: 8px;
}


/* modal */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 99;
    display: flex;
    transition: .3s all;
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 10px;
    overflow-x: hidden;
}

.modal_none {
    display: none;
}

.modal_hide {
    opacity: 0;
}

.modal__close {
    background: url(../images/modal/close.png) no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    display: inline-block;
    z-index: 5;
    cursor: pointer;
    transition: .3s all;
    flex-shrink: 0;
}

.modal__close:hover {
    transform: rotate(180deg);
}

.modal__inner {
    flex-basis: 450px;
    box-sizing: border-box;
    height: auto;
    margin: auto;
    background: rgba(43, 20, 9, 0.85);
    box-shadow: 0 0 20px rgba(108, 82, 53, 0.82);
    transition: .5s all;
    transform: scale(1) translateY(0);
    opacity: 1;
    padding: 45px;
    position: relative;
    border-radius: 8px;
}

.modal__head {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 0;
}

.modal__ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
}

.modal__ico_m_r {
    margin-right: 15px;
}

.modal__title {
    text-shadow: 0.7px 0.7px 2px rgba(0, 3, 1, 0.5);
    color: white;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}

.modal__title_warning {
    color: #fc7c56;
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}

.modal__desc {
    color: #5b6787;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
}

.modal__desc_m_t {
    margin-top: 6px;
}

.modal__content {}

.enter__inner {
    padding: 20px;
}

.enter__info {
    background: url(../images/modal/modal__enter-container.png) no-repeat center top;
    background-size: cover;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5) inset, 0 0 15px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    padding: 20px 10px;
}

.enter__title {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0) 100%);
    text-shadow: 0.7px 0.7px 5px rgba(0, 3, 1, 0.4);
    color: white;
    font-size: 32px;
    font-weight: 700;
    line-height: 26px;
    padding: 10px;
    margin: 15px 0 10px 0;
    text-align: center;
}

.enter__desc {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0) 100%);
    text-shadow: 0.7px 0.7px 5px rgba(0, 3, 1, 0.4);
    color: white;
    font-size: 18px;
    line-height: 20px;
    padding: 5px 10px;
    margin: 3px 0 3px 0;
    text-align: center;
}

.enter__btns {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
}

.enter__box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
}

.enter__btn {
    cursor: pointer;
    padding: 5px 10px;
    background-color: rgba(162, 93, 20, 0.28);
    color: rgb(238, 160, 64);
    border-radius: 3px;
    font-size: 15px;
    margin-bottom: 5px;
    transition: .3s all;
}

.enter__btn:hover {
    background-color: rgba(162, 93, 20, 0.6);
}

.enter__link {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 10px;
}

.enter__link:hover {
    text-decoration: none;
}

.lang_row {
    width: 100%;
    padding: 0;
    margin: 0;
}

.lang__desc {
    text-align: center;
    margin: 5px;
}

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

.enter__lang-link {
    width: auto;
    height: auto;
    margin: 5px;
}

.enter__lang-link .lang__img {
    margin: 0;
}

.enter__lang-link:hover .lang__img {
    filter: drop-shadow(0 0 8px #6a5741);
}