body, img {
    margin: 0
}

body, html {
    width: 100%;
    height: 100%
}

a, img, legend {
    border: 0
}

html {
    font-family: Arial, Helvetica, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, optgroup, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    padding: 0
}

body.static, svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre, textarea {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    padding: 0
}

@font-face {
    font-family: MyriadPro-Regular;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/MyriadPro-Regular.otf) format('opentype'), url(fonts/MyriadPro-Regular.woff) format('woff'), url(fonts/MyriadPro-Regular.ttf) format('truetype'), url(fonts/MyriadPro-Regular.svg#MyriadPro-Regular) format('svg')
}

@font-face {
    font-family: MyriadPro-bold;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-bold.eot?#iefix) format('eot'), url(fonts/MyriadPro-bold.woff) format('woff'), url(fonts/MyriadPro-bold.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-Cond;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-Cond.eot?#iefix) format('eot'), url(fonts/MyriadPro-Cond.woff) format('woff'), url(fonts/MyriadPro-Cond.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-SemiCn;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-SemiCn.eot?#iefix) format('eot'), url(fonts/MyriadPro-SemiCn.woff) format('woff'), url(fonts/MyriadPro-SemiCn.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-LightSemiCn;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-LightSemiCn.eot?#iefix) format('eot'), url(fonts/MyriadPro-LightSemiCn.woff) format('woff'), url(fonts/MyriadPro-LightSemiCn.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-LightSemiExt;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-LightSemiExt.eot?#iefix) format('eot'), url(fonts/MyriadPro-LightSemiExt.woff) format('woff'), url(fonts/MyriadPro-LightSemiExt.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-LightCond;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-LightCond.eot?#iefix) format('eot'), url(fonts/MyriadPro-LightCond.woff) format('woff'), url(fonts/MyriadPro-LightCond.ttf) format('truetype')
}

@font-face {
    font-family: MyriadPro-Semibold;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyriadPro-Semibold.eot?#iefix) format('eot'), url(fonts/MyriadPro-Semibold.woff) format('woff'), url(fonts/MyriadPro-Semibold.ttf) format('truetype')
}

@font-face {
    font-family: ProximaNovaCond-Bold;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaCond-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaCond-Bold.otf) format('opentype'), url(fonts/ProximaNovaCond-Bold.woff) format('woff'), url(fonts/ProximaNovaCond-Bold.ttf) format('truetype'), url(fonts/ProximaNovaCond-Bold.svg#ProximaNovaCond-Bold) format('svg')
}

@font-face {
    font-family: ProximaNovaCond-Black;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaCond-Black.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaCond-Black.otf) format('opentype'), url(fonts/ProximaNovaCond-Black.woff) format('woff'), url(fonts/ProximaNovaCond-Black.ttf) format('truetype'), url(fonts/ProximaNovaCond-Black.svg#ProximaNovaCond-Black) format('svg')
}

@font-face {
    font-family: ProximaNovaCond-Reg;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaCond-Reg.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaCond-Reg.otf) format('opentype'), url(fonts/ProximaNovaCond-Reg.woff) format('woff'), url(fonts/ProximaNovaCond-Reg.ttf) format('truetype'), url(fonts/ProximaNovaCond-Reg.svg#ProximaNovaCond-Reg) format('svg')
}

@font-face {
    font-family: ProximaNovaExCn-Light;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/ProximaNovaExCn-Light.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaExCn-Light.otf) format('opentype'), url(fonts/ProximaNovaExCn-Light.woff) format('woff'), url(fonts/ProximaNovaExCn-Light.ttf) format('truetype'), url(fonts/ProximaNovaExCn-Light.svg#ProximaNovaExCn-Light) format('svg')
}

@font-face {
    font-family: ProximaNovaExCn-Bold;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaExCn-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaExCn-Bold.otf) format('opentype'), url(fonts/ProximaNovaExCn-Bold.woff) format('woff'), url(fonts/ProximaNovaExCn-Bold.ttf) format('truetype'), url(fonts/ProximaNovaExCn-Bold.svg#ProximaNovaExCn-Bold) format('svg')
}

@font-face {
    font-family: ProximaNovaExCn-Extrabld;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaExCn-Extrabld.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaExCn-Extrabld.otf) format('opentype'), url(fonts/ProximaNovaExCn-Extrabld.woff) format('woff'), url(fonts/ProximaNovaExCn-Extrabld.ttf) format('truetype'), url(fonts/ProximaNovaExCn-Extrabld.svg#ProximaNovaExCn-Extrabld) format('svg')
}

@font-face {
    font-family: ProximaNovaExCn-Regular;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaExCn-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaExCn-Regular.otf) format('opentype'), url(fonts/ProximaNovaExCn-Regular.woff) format('woff'), url(fonts/ProximaNovaExCn-Regular.ttf) format('truetype'), url(fonts/ProximaNovaExCn-Regular.svg#ProximaNovaExCn-Regular) format('svg')
}

@font-face {
    font-family: ProximaNovaExCn-Semibold;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNovaExCn-Semibold.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNovaExCn-Semibold.otf) format('opentype'), url(fonts/ProximaNovaExCn-Semibold.woff) format('woff'), url(fonts/ProximaNovaExCn-Semibold.ttf) format('truetype'), url(fonts/ProximaNovaExCn-Semibold.svg#ProximaNovaExCn-Semibold) format('svg')
}

@font-face {
    font-family: ProximaNova-Extrabld;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-Extrabld.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-Extrabld.otf) format('opentype'), url(fonts/ProximaNova-Extrabld.woff) format('woff'), url(fonts/ProximaNova-Extrabld.ttf) format('truetype'), url(fonts/ProximaNova-Extrabld.svg#ProximaNova-Extrabld) format('svg')
}

@font-face {
    font-family: ProximaNova-Light;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-Light.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-Light.otf) format('opentype'), url(fonts/ProximaNova-Light.woff) format('woff'), url(ProximaNova-Light.ttf) format('truetype'), url(ProximaNova-Light.svg#ProximaNova-Light) format('svg')
}

@font-face {
    font-family: ProximaNova-Black;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-Black.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-Black.otf) format('opentype'), url(fonts/ProximaNova-Black.woff) format('woff'), url(fonts/ProximaNova-Black.ttf) format('truetype'), url(fonts/ProximaNova-Black.svg#ProximaNova-Black) format('svg')
}

@font-face {
    font-family: ProximaNova-Regular;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-Regular.otf) format('opentype'), url(fonts/ProximaNova-Regular.woff) format('woff'), url(fonts/ProximaNova-Regular.ttf) format('truetype'), url(fonts/ProximaNova-Regular.svg#ProximaNova-Regular) format('svg')
}

@font-face {
    font-family: ProximaNova-Bold;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-Bold.otf) format('opentype'), url(fonts/ProximaNova-Bold.woff) format('woff'), url(fonts/ProximaNova-Bold.ttf) format('truetype'), url(fonts/ProximaNova-Bold.svg#ProximaNova-Bold) format('svg')
}

@font-face {
    font-family: ProximaNova-RegularIt;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/ProximaNova-RegularIt.eot?#iefix) format('embedded-opentype'), url(fonts/ProximaNova-RegularIt.otf) format('opentype'), url(fonts/ProximaNova-RegularIt.woff) format('woff'), url(fonts/ProximaNova-RegularIt.ttf) format('truetype'), url(fonts/ProximaNova-RegularIt.svg#ProximaNova-RegularIt) format('svg')
}

@font-face {
    font-family: RistrettoPro-Regular;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/RistrettoPro-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/RistrettoPro-Regular.otf) format('opentype'), url(fonts/RistrettoPro-Regular.woff) format('woff'), url(fonts/RistrettoPro-Regular.ttf) format('truetype'), url(fonts/RistrettoPro-Regular.svg#iefix) format('svg')
}

@font-face {
    font-family: RistrettoPro-Medium;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/RistrettoPro-Medium.eot?#iefix) format('embedded-opentype'), url(fonts/RistrettoPro-Medium.otf) format('opentype'), url(fonts/RistrettoPro-Medium.woff) format('woff'), url(fonts/RistrettoPro-Medium.ttf) format('truetype'), url(fonts/RistrettoPro-Medium.svg#iefix) format('svg')
}

@font-face {
    font-family: HelveticaNeueCyr-Black;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/HelveticaNeueCyr-Black.eot?#iefix) format('embedded-opentype'), url(fonts/HelveticaNeueCyr-Black.otf) format('opentype'), url(fonts/HelveticaNeueCyr-Black.woff) format('woff'), url(fonts/HelveticaNeueCyr-Black.ttf) format('truetype'), url(fonts/HelveticaNeueCyr-Black.svg#iefix) format('svg')
}

@font-face {
    font-family: HelveticaNeueCyr-Bold;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/HelveticaNeueCyr-Bold.eot?#iefix) format('embedded-opentype'), url(fonts/HelveticaNeueCyr-Bold.otf) format('opentype'), url(fonts/HelveticaNeueCyr-Bold.woff) format('woff'), url(fonts/HelveticaNeueCyr-Bold.ttf) format('truetype'), url(fonts/HelveticaNeueCyr-Bold.svg#iefix) format('svg')
}

@font-face {
    font-family: HelveticaNeueCyr-Roman;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/HelveticaNeueCyr-Roman.eot?#iefix) format('embedded-opentype'), url(fonts/HelveticaNeueCyr-Roman.otf) format('opentype'), url(fonts/HelveticaNeueCyr-Roman.woff) format('woff'), url(fonts/HelveticaNeueCyr-Roman.ttf) format('truetype'), url(fonts/HelveticaNeueCyr-Roman.svg#iefix) format('svg')
}

@font-face {
    font-family: Roboto-Regular;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Roboto-Regular.eot?#iefix) format('embedded-opentype'), url(fonts/Roboto-Regular.woff) format('woff'), url(Roboto-Regular.ttf) format('truetype'), url(Roboto-Regular.svg#Roboto-Regular) format('svg')
}

@font-face {
    font-family: Roboto-Italic;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Roboto-Italic.eot?#iefix) format('eot'), url(fonts/Roboto-Italic.woff) format('woff'), url(fonts/Roboto-Italic.ttf) format('truetype')
}

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

#fps, body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #fff
}

body {
    box-sizing: border-box;
    -webkit-transition: background-image .5s;
    transition: background-image .5s;
    font-size: 14px;
    background-color: #151b20;
    font-family: ProximaNova-Bold;
    overflow-y: scroll;
    min-width: 1181px
}

.disable-hover, .disable-hover * {
    pointer-events: none !important
}

a {
    background: 0 0;
    color: #01e7a3;
    text-decoration: none;
    -webkit-transition: color .3s;
    transition: color .3s
}

a:hover {
    -webkit-transition: color .3s;
    transition: color .3s;
    color: #7ff4d2
}

.clear {
    display: block;
    clear: both
}

#fps {
    width: 120px;
    height: auto;
    box-sizing: border-box;
    position: fixed;
    bottom: 150px;
    right: 10px;
    text-align: left;
    padding: 10px;
    background-color: rgba(0, 0, 0, .7);
    font-size: 24px;
    z-index: 100
}

.screen.first {
    overflow: hidden;
    border: 0 solid #f30
}

.screen.first .play_button {
    z-index: 40;
    width: 101px;
    height: 101px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 123px;
    left: 0;
    right: 0;
    margin: 0 auto
}

.screen.first .play_button > span {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 101px;
    -moz-border-radius: 101px;
    border-radius: 101px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    display: block;
    cursor: pointer;
    margin-left: 100px;
    background-color: #01e7a3;
    background-image: url(/web/img/play_triangle.svg);
    background-size: 33px 44px;
    background-position: 40px 29px;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.first .ellipse, .screen.first .ellipse > span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.first .ellipse, .screen.first .txt {
    border: 0 solid #f30;
    left: 0;
    right: 0;
    position: absolute
}

.screen.first .play_button > span:hover {
    -webkit-transition: .3s;
    transition: .3s;
    transform: scale(1.2, 1.2)
}

.screen.first .ellipse {
    z-index: 40;
    width: 948px;
    height: 121px;
    box-sizing: border-box;
    bottom: 103px;
    margin: 0 auto
}

.screen.first .ellipse > span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    margin-left: 100px;
    background-image: url(/web/img/ellipse.png);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat
}

.screen.first .txt, .screen.first .txt > span {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.first video {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0
}

.screen.first .txt {
    width: 500px;
    height: auto;
    z-index: 40;
    box-sizing: border-box;
    top: 50%;
    margin: 0 auto;
    font-family: ProximaNovaExCn-Bold;
    font-size: 45px;
    line-height: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.screen.first .txt > span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 100px;
    text-align: center;
    border: 0 solid #0c0
}

.screen.first .scroll_down {
    z-index: 40;
    width: 100px;
    height: 33px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 0 solid #f30
}

.screen.first .scroll_down > span {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    background-image: url(/web/img/arrow_down.svg);
    background-size: 23px 9px;
    background-position: bottom center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 100px;
    text-align: center;
    font-family: ProximaNovaExCn-Semibold;
    font-size: 18px;
    line-height: 18px;
    color: #01e7a3;
    letter-spacing: .5px;
    text-transform: uppercase;
    border: 0 solid #f30
}

.screen.first .bottom_gradient, .screen.first .top_gradient {
    z-index: 30;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    left: 0;
    border: 0 solid #f30
}

.screen.first .top_gradient {
    height: 216px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    background: -moz-linear-gradient(top, #151b20 0, rgba(21, 27, 32, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #151b20), color-stop(100%, rgba(21, 27, 32, 0)));
    background: -webkit-linear-gradient(top, #151b20 0, rgba(21, 27, 32, 0) 100%);
    background: -o-linear-gradient(top, #151b20 0, rgba(21, 27, 32, 0) 100%);
    background: -ms-linear-gradient(top, #151b20 0, rgba(21, 27, 32, 0) 100%);
    background: linear-gradient(to bottom, #151b20 0, rgba(21, 27, 32, 0) 100%)
}

.screen.first .bottom_gradient {
    height: 360px;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(21, 27, 32, 0)), color-stop(77%, #151b20), color-stop(100%, #151b20));
    background: -webkit-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -o-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -ms-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: linear-gradient(to bottom, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%)
}

.pattern, .screen.gallery .gallery_main .arrow {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute
}

.pattern {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 20;
    background-image: url(/web/img/pattern.png);
    border: 0 solid #f30
}

.screen.footer {
    min-height: 10px;
    font-family: Roboto-Regular;
    font-size: 12px;
    line-height: 18px;
    color: #c5c5c5;
    margin-bottom: 20px
}

.screen.footer .content {
    width: 1181px;
    height: auto;
    margin: 0 auto
}

.screen.footer .content .left_padding {
    margin-left: 241px
}

.screen.footer .items {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 28px;
    border: 0 solid #f30
}

.screen.footer .items a {
    -webkit-transition: .3s;
    transition: .3s;
    margin-right: 40px;
    font-size: 14px;
    color: #01e7a3
}

.screen.footer .items a:hover {
    color: #fff;
    -webkit-transition: .3s;
    transition: .3s
}

.screen.footer .items .logo {
    width: 51px;
    height: 47px;
    background-image: url(/web/img/footer_logo.png);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.screen.gallery {
    border: 0 solid #f30;
    min-height: 649px !important;
    background-image: url(/web/img/gallery_bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto 100%
}

.screen.gallery .caption {
    margin-top: 90px;
    border: 0 solid #0c0
}

.screen.gallery .gallery_main {
    position: absolute;
    width: 940px;
    height: 649px
}

.screen.gallery .gallery_main .title {
    position: absolute;
    top: 60px;
    font-family: ProximaNovaExCn-Light;
    text-transform: uppercase;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: 1.5px
}

.screen.gallery .gallery_main .title.video {
    left: 194px
}

.screen.gallery .gallery_main .title.screenshots {
    left: 583px
}

.screen.gallery .gallery_main .gallery_videos {
    position: absolute;
    width: 479px;
    top: 153px;
    left: 0
}

.screen.gallery .gallery_main .gallery_videos .video.item {
    height: 282px
}

.screen.gallery .gallery_main .gallery_videos .video.item .image {
    width: 100%;
    height: 100%
}

.screen.gallery .gallery_main .gallery_videos .video.item:not(.active) {
    display: none
}

.screen.gallery .gallery_main .gallery_videos .video.item.active {
    display: block
}

.screen.gallery .gallery_main .gallery_videos .video .gallery_play_button {
    position: absolute;
    width: 74px;
    height: 74px;
    -webkit-border-radius: 101px;
    -moz-border-radius: 101px;
    border-radius: 101px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    top: 102px;
    left: 205px;
    background-color: #01e7a3;
    background-image: url(/web/img/play_triangle.svg);
    background-size: 25px 32px;
    background-position: 29px 21px;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.gallery .gallery_main .gallery_videos .video .gallery_play_button:hover {
    -webkit-transition: .3s;
    transition: .3s;
    transform: scale(1.2, 1.2)
}

.screen.gallery .gallery_main .gallery_videos .video .gallery_youtube_video {
    display: none
}

.screen.gallery .gallery_main .gallery_videos .magazine {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 470px;
    position: absolute;
    top: 312px;
    left: 0;
    text-align: center;
    z-index: 30;
    border: 0 solid #f30
}

.screen.gallery .gallery_main .gallery_screenshots > ul > li:nth-child(n+7), .screen.gameFeatures .slider .item:not(:first-child) {
    display: none
}

.screen.gallery .gallery_main .gallery_videos .magazine > div {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 30px;
    cursor: pointer;
    opacity: .8;
    background-image: url(/web/img/cross.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%
}

.screen.gallery .gallery_main .gallery_videos .magazine > div:last-child {
    margin-right: 0
}

.screen.gallery .gallery_main .gallery_videos .magazine > div:hover {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1
}

.screen.gallery .gallery_main .gallery_videos .magazine > div.active {
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #01e7a3;
    background-image: none;
    opacity: 1
}

.screen.auth form input[type=submit], .screen.gameFeatures .slider .magazine > div.active {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-color: #01e7a3
}

.screen.gallery .gallery_main .arrow {
    width: 22px;
    height: 48px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    z-index: 20;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    background-image: url(/web/img/navig_arrow.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 17px 48px;
    top: 232px
}

.screen.gallery .gallery_main .arrow.left:hover, .screen.gallery .gallery_main .arrow.right:hover {
    background-position: 5px 0
}

.screen.gallery .gallery_main .arrow.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.gallery .gallery_main .arrow.right {
    left: 463px
}

.screen.gallery .gallery_main .gallery_screenshots {
    position: absolute;
    top: 162px;
    left: 539px
}

.screen.gallery .gallery_main .gallery_screenshots > ul {
    width: 371px;
    height: 282px;
    list-style: none;
    margin: 0;
    padding: 0
}

.screen.gallery .gallery_main .gallery_screenshots > ul > li {
    cursor: pointer;
    width: 136px;
    float: left;
    margin-bottom: 18px;
    margin-right: 20px;
    position: relative
}

.screen.gallery .gallery_main .gallery_screenshots > ul > li:nth-child(3) {
    margin-left: 40px
}

.screen.gallery .gallery_main .gallery_screenshots > ul > li:before {
    width: 136px;
    height: 90px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    opacity: 0;
    content: "";
    position: absolute;
    top: -7px;
    left: -6px;
    background-image: url(/web/img/screen_hover.svg);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.gallery .gallery_main .gallery_screenshots > ul > li:hover:before {
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1
}

.screen.gameFeatures {
    min-height: 472px !important;
    background-image: url(/web/img/gameFeatures_bg.png);
    background-position: center right;
    background-repeat: no-repeat
}

.screen.gameFeatures .left_padding {
    position: relative;
    border: 0 solid #f30 !important
}

.screen.gameFeatures .yellow_title {
    position: absolute;
    left: 519px;
    top: 190px;
    text-transform: uppercase;
    font-family: ProximaNova-Regular;
    font-size: 18px;
    color: #fce12a;
    letter-spacing: 1.5px
}

.screen.gameFeatures .green_mask, .screen.gameFeatures .mask {
    width: 480px;
    height: 360px;
    -webkit-box-sizing: border-box;
    background-position: 0 0;
    background-size: 100% 100%;
    position: absolute;
    top: 99px;
    border: 0 solid #f30;
    background-repeat: no-repeat
}

.screen.gameFeatures .mask {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/web/img/mask.svg);
    z-index: 10;
    left: 0
}

.screen.gameFeatures .green_mask {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    pointer-events: none;
    background-image: url(/web/img/green_mask.svg);
    z-index: 15;
    left: 20px
}

.screen.gameFeatures .slider .arrow.left:hover, .screen.gameFeatures .slider .arrow.right:hover {
    background-position: 5px 0
}

.screen.gameFeatures .slider {
    width: 940px;
    height: 564px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 0 solid #0c0
}

.screen.gameFeatures .slider .arrow {
    width: 22px;
    height: 48px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    position: absolute;
    cursor: pointer;
    z-index: 20;
    top: 400px;
    background-image: url(/web/img/navig_arrow.svg);
    background-repeat: no-repeat;
    background-size: 17px 48px
}

.screen.gameFeatures .slider .arrow.left {
    left: 50px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.gameFeatures .slider .arrow.right {
    left: 447px
}

.screen.gameFeatures .slider .item {
    width: 100%;
    height: 100%;
    position: absolute
}

.screen.gameFeatures .slider .item .video {
    overflow: hidden;
    position: absolute;
    top: 99px;
    width: 480px;
    height: 360px
}

.screen.gameFeatures .slider .item .video video {
    width: 100%;
    height: 100%
}

.screen.gameFeatures .slider .item .text {
    position: absolute;
    height: 37px;
    left: 519px;
    top: 241px
}

.screen.gameFeatures .slider .item .text .title {
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 55px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px
}

.screen.gameFeatures .slider .item .text .descr {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 24px
}

.screen.gameFeatures .slider .magazine {
    width: 415px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 416px;
    left: 520px;
    z-index: 30;
    border: 0 solid #f30
}

.screen.gameFeatures .slider .magazine > div {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 30px;
    cursor: pointer;
    opacity: .5;
    background-image: url(/web/img/cross.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%
}

.errorMessage, .errorMessage:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 226px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0
}

.screen.gameFeatures .slider .magazine > div:last-child {
    margin-right: 0
}

.screen.gameFeatures .slider .magazine > div:hover {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1
}

.screen.gameFeatures .slider .magazine > div.active {
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    background-clip: padding-box;
    background-image: none;
    opacity: 1
}

.errorMessage {
    box-sizing: border-box;
    height: auto;
    top: 0;
    left: 353px;
    padding: 10px 10px 2px 17px;
    min-height: 47px;
    font-size: 14px;
    line-height: 17px;
    font-family: Roboto-Regular;
    color: #fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: left;
    align-items: center;
    background-image: url(/web/img/error_bg.png);
    border: 0 solid #0c0
}

.screen.auth, .screen.auth.register form {
    border: 0 solid #f30
}

.errorMessage:after {
    box-sizing: border-box;
    height: 8px;
    content: "";
    bottom: -8px;
    left: 0;
    background-image: url(/web/img/error_footer.png)
}

.screen.auth .form, .screen.auth .relative:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.auth, .screen.auth .left_padding, .screen.auth.register form .line {
    position: relative
}

.screen.auth.register form .line input[type=checkbox] {
    outline: 0;
    position: absolute;
    top: 0;
    left: 0
}

.screen.auth .form, .screen.auth .relative {
    height: auto;
    position: relative;
    border: 0 solid #f30
}

.screen.auth.register form .line .agree {
    margin-left: 20px;
    display: block;
    line-height: 20px;
    border: 0 solid #f30
}

.screen.auth .form {
    width: 581px;
    box-sizing: border-box;
    padding-top: 170px;
    margin-bottom: 90px
}

.screen.auth .relative {
    width: 340px;
    z-index: 10
}

.screen.auth .relative:before {
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    z-index: 20;
    content: "";
    position: absolute;
    top: 21px;
    right: 13px;
    background-size: 100% 100%;
    border: 0 solid #f30
}

.screen.auth .green_logo, .screen.auth form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.auth .relative.success:before {
    background-image: url(/web/img/accept.svg)
}

.screen.auth .relative.error:before {
    background-image: url(/web/img/cancel.svg)
}

.screen.auth .green_logo {
    width: 51px;
    height: 47px;
    box-sizing: border-box;
    margin-bottom: 30px;
    background-image: url(/web/img/footer_logo.png);
    background-position: 0 0;
    background-size: 100% 100%
}

.screen.auth .line {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    border: 0 solid #f30
}

.screen.auth .line.remember {
    width: 340px;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: flex-start;
    align-items: top
}

.screen.auth .line.remember input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin-right: 5px
}

.screen.auth .line.remember label {
    font-size: 14px;
    line-height: 17px;
    outline: 0
}

.screen.auth .line.remember:before {
    top: 0;
    right: -28px
}

.screen.auth .line.remember .checkbox {
    display: block;
    border: 0
}

.screen.auth .line.remember .errorMessage {
    top: -18px
}

.screen.auth .line.remember .forgot {
    position: absolute;
    top: 0;
    right: 0
}

.screen.auth .line.fat {
    width: 540px;
    margin-top: 19px
}

.screen.auth .title {
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 43px;
    text-transform: uppercase;
    margin-bottom: 24px;
    letter-spacing: 1.5px
}

.screen.auth .forgot {
    float: right;
    display: inline-block
}

.screen.auth .create {
    margin-left: 20px;
    float: left;
    line-height: 54px;
    font-size: 18px
}

.screen.auth .cancel, .screen.auth .login {
    display: inline-block;
    margin-left: 18px;
    line-height: 57px;
    font-size: 18px
}

.screen.auth .text, .screen.auth form {
    font-family: Roboto-Regular;
    font-size: 14px;
    height: auto
}

.screen.auth .text {
    width: 340px;
    margin-bottom: 19px;
    line-height: 20px
}

.screen.auth form {
    width: 400px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #c1c1c1;
    line-height: 14px
}

.screen.auth form input[type=submit] {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    float: left;
    min-width: 218px;
    border: 0;
    color: #151b20;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    font-family: ProximaNova-Bold;
    outline: 0;
    padding: 18px 23px
}

.screen.auth form input[type=submit]:hover {
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #7ff4d2
}

.screen.auth form input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #000 inset;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid #fff !important;
    outline: 0 !important;
    background-color: rgba(0, 0, 0, .5) !important
}

.screen.auth form input[type=password], .screen.auth form input[type=text] {
    width: 340px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .5);
    background-color: rgba(0, 0, 0, .5);
    margin-bottom: 26px;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px;
    background-position: 300px center;
    background-repeat: no-repeat;
    outline: 0;
    padding: 16px 40px 16px 20px
}

.screen.auth .bottom_gradient, .screen.news .socials {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute
}

.screen.auth form input[type=password]:focus, .screen.auth form input[type=text]:focus {
    -webkit-transition: .3s;
    transition: .3s;
    border: 1px solid #fff;
    color: #fff
}

.screen.auth form input[type=password]::-webkit-input-placeholder, .screen.auth form input[type=text]::-webkit-input-placeholder {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px;
    color: rgba(193, 193, 193, .4)
}

.screen.auth form input[type=password]::-moz-placeholder, .screen.auth form input[type=text]::-moz-placeholder {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px;
    color: rgba(193, 193, 193, .4)
}

.screen.auth form input[type=password]:-moz-placeholder, .screen.auth form input[type=text]:-moz-placeholder {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px;
    color: rgba(193, 193, 193, .4)
}

.screen.auth form input[type=password]:-ms-input-placeholder, .screen.auth form input[type=text]:-ms-input-placeholder {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px;
    color: rgba(193, 193, 193, .4)
}

.screen.auth .bottom_gradient {
    width: 100%;
    height: 360px;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(21, 27, 32, 0)), color-stop(77%, #151b20), color-stop(100%, #151b20));
    background: -webkit-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -o-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -ms-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: linear-gradient(to bottom, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    border: 0 solid #f30
}

.screen.news {
    min-height: 851px !important
}

.screen.news .socials {
    height: auto;
    box-sizing: border-box;
    right: -285px;
    top: 0;
    width: 240px;
    z-index: 50
}

.screen.news .socials .socials-block__social-title {
    font: 16px/24px Roboto-Regular;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 10px
}

.screen.news .socials .xmercs-button-block {
    width: 100%
}

.screen.news .socials .xmercs-button-block .xmercs-button-block__link {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    text-transform: uppercase;
    width: 100%;
    height: 41px;
    background-color: #01e7a3;
    border-radius: 4px;
    color: #000;
    font: 18px/15px ProximaNova-Bold;
    letter-spacing: .5px
}

.screen.news .news_item, .screen.news .news_item .date {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.news .socials .xmercs-button-block .xmercs-button-block__link:hover {
    font-size: 20px;
    cursor: pointer
}

.screen.news .socials .discuss, .screen.news .socials .sharing {
    display: table-cell;
    border: 0 solid #f30;
    vertical-align: middle
}

.screen.news .socials .discuss:first-child, .screen.news .socials .sharing:first-child {
    width: 1px;
    padding-left: 0
}

.screen.news .socials .show_more {
    margin: 0;
    width: 100%
}

.screen.news .w879 {
    width: 879px;
    height: auto
}

.screen.news .left_padding {
    position: relative;
    z-index: 40;
    padding-bottom: 50px;
    border: 0 solid #f30 !important
}

.screen.news .likely {
    width: auto !important;
    margin: 0;
    justify-content: left
}

.screen.news .likely svg {
    width: 24px;
    height: 24px
}

.screen.news .likely .likely__icon {
    height: 24px
}

.screen.news .likely .likely__widget {
    width: 41px;
    height: 41px
}

.screen.news .show_more {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    display: table;
    font-family: ProximaNova-Bold;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 18px;
    color: #151b20;
    margin: 50px auto 0;
    background-color: #01e6a3;
    cursor: pointer;
    padding: 20px
}

.screen.news span.show_more {
    cursor: default;
    background-color: #aeaeae
}

.screen.news a.show_more:hover {
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #0fb
}

.screen.news .news_item {
    width: 581px;
    height: auto;
    box-sizing: border-box;
    padding-top: 200px;
    margin-bottom: 50px;
    font-family: Roboto-Regular
}

.screen.news .news_item .date {
    box-sizing: border-box;
    font-size: 18px;
    line-height: 18px;
    color: silver;
    margin-bottom: 20px
}

.screen.news .news_item .title {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 55px;
    letter-spacing: 5px;
    text-transform: uppercase
}

.screen.news .news_item .image {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 581px;
    height: 290px;
    margin-bottom: 30px;
    margin-top: 35px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover
}

.screen.news .news_item .text {
    font-size: 18px;
    line-height: 26px
}

.screen.news .news_list {
    display: table;
    margin: 30px 61px 0 0;
    padding: 0;
    list-style: none
}

.screen.news .news_list li:before {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    content: "";
    position: absolute;
    opacity: .4;
    background-color: #4c90b0
}

.screen.news .news_list li:hover:before {
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 0
}

.screen.news .news_list.another li:nth-child(7n+1) {
    width: 280px;
    height: 332px
}

.screen.news .news_list.another li:nth-child(7n+2) {
    width: 580px;
    height: 332px;
    margin-right: 0
}

.screen.news .news_list li {
    width: 280px;
    height: 238px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 19px;
    margin-right: 19px;
    float: left;
    position: relative;
    background-size: cover;
    border: 0 solid #f30
}

.screen.news .news_list li:nth-child(7n+1) {
    width: 580px;
    height: 332px
}

.screen.news .news_list li:nth-child(7n+2) {
    width: 280px;
    height: 332px;
    margin-right: 0
}

.screen.news .news_list li:nth-child(7n+5) {
    margin-right: 0
}

.screen.news .news_list li:nth-child(7n+3) .descr, .screen.news .news_list li:nth-child(7n+4) .descr, .screen.news .news_list li:nth-child(7n+5) .descr {
    display: none
}

.screen.news .news_list li:nth-child(7n+6) {
    width: 280px;
    height: 332px
}

.screen.news .news_list li:nth-child(7n+7) {
    width: 580px;
    height: 332px;
    margin-right: 0
}

.screen.news .news_list li a, .screen.news .news_list li span {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background .3s;
    transition: background .3s;
    display: block;
    position: relative;
    border: 0 solid #f30;
    background-color: rgba(0, 0, 0, .4);
    z-index: 30
}

.screen.news .news_list li a:hover, .screen.news .news_list li span:hover {
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-box-shadow: 0 0 0 1px #01e7a3 inset;
    box-shadow: 0 0 0 1px #01e7a3 inset;
    background-color: rgba(0, 0, 0, 0)
}

.screen.news .news_list li .shadow {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(120, 178, 223, 0) 4%, rgba(0, 0, 0, .7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(125, 185, 232, 0)), color-stop(4%, rgba(120, 178, 223, 0)), color-stop(100%, rgba(0, 0, 0, .7)));
    background: -webkit-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(120, 178, 223, 0) 4%, rgba(0, 0, 0, .7) 100%);
    background: -o-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(120, 178, 223, 0) 4%, rgba(0, 0, 0, .7) 100%);
    background: -ms-linear-gradient(top, rgba(125, 185, 232, 0) 0, rgba(120, 178, 223, 0) 4%, rgba(0, 0, 0, .7) 100%);
    background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(120, 178, 223, 0) 4%, rgba(0, 0, 0, .7) 100%)
}

.screen.news .news_list li .contain {
    position: absolute;
    bottom: 0;
    padding: 25px;
    z-index: 10
}

.screen.news .news_list li .date {
    font-family: Roboto-Regular;
    font-size: 16px;
    line-height: 16px;
    color: silver
}

.screen.news .news_list li .title {
    font-family: ProximaNovaExCn-Semibold;
    font-size: 32px;
    line-height: 35px;
    color: #fff;
    margin-top: 15px;
    letter-spacing: 1px
}

.screen.news .news_list li .title *, .screen.news .news_list li .title :hover {
    border: 0 !important;
    box-shadow: 0 0 0 1px transparent inset;
    background-color: rgba(0, 0, 0, 0) !important
}

.screen.news .news_list li .descr {
    font-family: Roboto-Regular;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    margin-top: 15px
}

.screen.news .slider_container {
    position: relative
}

.screen.news .slider_container .news_item_slider {
    margin-top: 25px
}

.screen.news .slider_container .news_item_slider .slick-slide {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.screen.news .slider_container .news_item_slider .slick-slide .image {
    z-index: 10;
    width: 581px;
    height: 326px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    margin: 0 auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.news .news_slider .arrow, .screen.news .slider_container .arrow {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-repeat: no-repeat;
    cursor: pointer
}

.screen.news .slider_container .news_item_slider .slick-slide .txt {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: ProximaNova-Light;
    font-size: 14px;
    color: #c5c5c5;
    letter-spacing: .5px;
    margin-top: 35px;
    padding-bottom: 35px
}

.screen.news .slider_container .arrow {
    width: 35px;
    height: 68px;
    box-sizing: border-box;
    position: absolute;
    top: 125px;
    background-color: rgba(0, 0, 0, .4);
    background-image: url(/web/img/gray_arrow.png);
    background-position: center center;
    background-size: 15px 46px
}

.screen.news .slider_container .arrow.left {
    left: 0
}

.screen.news .slider_container .arrow.right {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    right: 0
}

.screen.news .slider_container .slick-dots {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center
}

.screen.news .slider_container .slick-dots li {
    margin-right: 25px
}

.screen.news .slider_container .slick-dots li:last-child {
    margin-right: 0
}

.screen.news .news_slider {
    width: 940px;
    height: 535px;
    position: relative;
    overflow: hidden;
    border: 0 solid #f30
}

.screen.news .news_slider .arrow {
    width: 22px;
    height: 48px;
    -webkit-transition: .3s;
    transition: .3s;
    box-sizing: border-box;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    position: absolute;
    z-index: 20;
    top: 382px;
    background-image: url(/web/img/navig_arrow.svg);
    background-position: 0 0;
    background-size: 17px 48px
}

.screen.news .news_slider .arrow.left:hover, .screen.news .news_slider .arrow.right:hover {
    background-position: 5px 0
}

.screen.news .news_slider .arrow.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.news .news_slider .arrow.right {
    left: 315px
}

.screen.news .news_slider .green_mask, .screen.news .news_slider .magazine > div {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%
}

.screen.news .news_slider .green_mask {
    pointer-events: none;
    width: 336px;
    height: 336px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/web/img/green_mask.svg);
    z-index: 15;
    position: absolute;
    top: 124px;
    left: 14px;
    border: 0 solid #f30
}

.screen.news .news_slider .item {
    width: 100%;
    height: 100%;
    position: absolute
}

.screen.news .news_slider .item:not(.active) {
    display: none
}

.screen.news .news_slider .item.active {
    display: block
}

.screen.news .news_slider .item .image {
    overflow: hidden;
    position: absolute;
    top: 142px;
    left: 0;
    width: 336px;
    height: 300px;
    background-size: 100% 100%
}

.screen.news .news_slider .item .image video {
    width: 100%;
    height: 100%
}

.screen.news .news_slider .item .text {
    position: absolute;
    height: 37px;
    left: 400px;
    top: 180px;
    color: #fff
}

.screen.news .news_slider .item .text .title:hover, .screen.ratings .pageSelector .commanders:hover, .screen.ratings .pageSelector .syndicates:hover {
    color: #01e7a3
}

.screen.news .news_slider .item .text .title {
    -webkit-transition: .3s;
    transition: .3s;
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 55px;
    margin-bottom: 15px;
    letter-spacing: 5px;
    width: 485px;
    text-transform: uppercase
}

.screen.news .news_slider .item .text .descr {
    width: 485px;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 24px
}

.screen.news .news_slider .magazine {
    width: 470px;
    position: absolute;
    top: 400px;
    left: 400px;
    z-index: 30
}

.screen.news .news_slider .magazine > div {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 30px;
    opacity: .5;
    cursor: pointer;
    background-image: url(/web/img/cross.svg)
}

.screen.news .news_slider .magazine > div:hover {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1
}

.screen.news .news_slider .magazine > div:last-child {
    margin-right: 0
}

.screen.news .news_slider .magazine > div.active {
    -webkit-border-radius: 29px;
    -moz-border-radius: 29px;
    border-radius: 29px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #01e7a3;
    background-image: none;
    opacity: 1
}

.screen.ratings .pageSelector {
    position: absolute;
    top: 204px;
    font: 28px ProximaNovaExCn-Light;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 10
}

.screen.ratings .pageSelector .commanders {
    -webkit-transition: .3s;
    transition: .3s;
    position: relative;
    cursor: pointer
}

.screen.ratings .pageSelector .syndicates {
    -webkit-transition: .3s;
    transition: .3s;
    position: relative;
    margin-left: 50px;
    cursor: pointer
}

.screen.ratings .pageSelector .active {
    color: #01e7a3;
    border-bottom: 2px solid
}

.screen.ratings .page {
    display: none
}

.screen.ratings .page.active {
    display: block
}

.screen.ratings .page .topBlock {
    position: relative;
    margin-top: 173px;
    width: 880px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between
}

.screen.ratings .page .topBlock .leftBlock {
    margin-top: 98px;
    width: 450px
}

.screen.ratings .page .topBlock .leftBlock .title {
    font: 50px/55px ProximaNovaExCn-Light;
    letter-spacing: 5px;
    text-transform: uppercase
}

.screen.ratings .page .topBlock .leftBlock .desc {
    margin-top: 86px;
    font: 18px/26px Roboto-Regular
}

.screen.ratings .page .topBlock .leftBlock .desc:before {
    width: 122px;
    height: 14px;
    position: absolute;
    margin-top: -45px;
    display: block;
    content: "";
    background-color: #01e7a3
}

.screen.ratings .page .topBlock .rightBlock {
    position: relative;
    width: 285px
}

.screen.ratings .page .topBlock .rightBlock .cupBlock {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.screen.ratings .page .topBlock .rightBlock .cupBlock .image {
    width: 43px;
    height: 33px;
    background: url(/web/img/cup.svg) no-repeat;
    background-size: 43px 33px
}

.screen.ratings .page .topBlock .rightBlock .cupBlock .title {
    font: 16px ProximaNova-Bold;
    color: #fce12a;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 13px
}

.screen.ratings .page .topBlock .rightBlock .cupBlock .data {
    font: 16px/26px Roboto-Regular;
    color: silver;
    margin-top: 6px;
    margin-bottom: 12px
}

.screen.ratings .page .topBlock .rightBlock .content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    border: 3px solid #01e7a3;
    min-height: 350px
}

.screen.ratings .page .topBlock .rightBlock .content .slider {
    -webkit-transition: .3s;
    transition: .3s
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item {
    position: relative;
    text-align: center;
    display: none
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item.active {
    display: block
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item .image {
    position: relative;
    width: 100%;
    height: 219px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -15px
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item .reward {
    font: 50px ProximaNovaExCn-Semibold;
    letter-spacing: 2px;
    margin-top: -18px
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item .place {
    font: 16px ProximaNova-Bold;
    color: silver;
    margin-top: -8px
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item .name {
    -webkit-transition: .1s;
    transition: .1s;
    font: 20px/25px ProximaNova-Bold;
    margin-top: 8px;
    letter-spacing: 1px
}

.screen.ratings .page .topBlock .rightBlock .content .slider .item .clan {
    margin-top: 2px;
    font: 16px Roboto-Regular;
    color: silver
}

.screen.ratings .page .topBlock .rightBlock .content .line {
    position: relative;
    margin: 18px auto 0;
    height: 1px;
    width: 240px;
    background-color: #01e7a3
}

.screen.ratings .page .topBlock .rightBlock .content > a {
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 20px
}

.screen.ratings .page .topBlock .rightBlock .content > a .underline {
    display: inline-block;
    border-bottom: 1px solid #01e7a3;
    padding-bottom: 2px
}

.screen.ratings .page .tableHeader .aboveBlock .currentLeadersLink, .screen.ratings .page .tableHeader .aboveBlock .data .date.week {
    display: none
}

.screen.ratings .page .topBlock .rightBlock .content > a .underline .prevLeaders {
    position: relative;
    color: #01e7a3;
    text-align: center;
    font: 18px ProximaNova-Regular
}

.screen.ratings .page .topBlock .rightBlock .content > a:hover .underline {
    border-bottom: 1px solid #90ffdf
}

.screen.ratings .page .topBlock .rightBlock .content > a:hover .underline .prevLeaders {
    color: #90ffdf
}

.screen.ratings .page .topBlock .rightBlock .content > a.active .underline {
    border-bottom: 1px solid #fff
}

.screen.ratings .page .topBlock .rightBlock .content > a.active .underline .prevLeaders {
    color: #fff
}

.screen.ratings .page .topBlock .rightBlock .content .arrow {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 211px;
    width: 17px;
    height: 30px;
    background: url(/web/img/rating_reward_arrow_green.svg) 5px center no-repeat;
    cursor: pointer;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden
}

.screen.ratings .page .topBlock .rightBlock .content .arrow.left {
    left: 40px
}

.screen.ratings .page .topBlock .rightBlock .content .arrow.right {
    right: 40px;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.ratings .page .topBlock .rightBlock .content .arrow:hover.arrow {
    background-position: 0 center
}

.screen.ratings .page .tableHeader {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    color: silver;
    padding-top: 25px;
    font: 16px Roboto-Regular;
    position: relative
}

.screen, .screen.ratings .page .bottomBlock {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.ratings .page .tableHeader .aboveBlock {
    position: absolute;
    top: -10px
}

.screen.ratings .page .tableHeader .aboveBlock .back {
    position: relative;
    color: #01e7a3;
    margin-left: 14px;
    margin-right: 52px
}

.screen.ratings .page .tableHeader .aboveBlock .back:hover {
    color: #90ffdf
}

.screen.ratings .page .tableHeader .aboveBlock .back:hover::before {
    background-image: url(/web/img/rating_arrow_back_hover.svg)
}

.screen.ratings .page .tableHeader .aboveBlock .back::before {
    content: "";
    width: 18px;
    height: 100%;
    position: absolute;
    left: -14px;
    background: url(/web/img/rating_arrow_back.svg) left center no-repeat
}

.screen.ratings .page .tableHeader .aboveBlock .data {
    position: relative;
    font: 16px Roboto-Regular;
    color: silver
}

.screen.ratings .page .tableHeader .aboveBlock.active .data {
    width: 300px;
    position: absolute;
    left: 118px
}

.screen.ratings .page .tableHeader .aboveBlock.active .data .date.week {
    display: inline
}

.screen.ratings .page .tableHeader .aboveBlock.active .data .date.last {
    display: none
}

.screen.ratings .page .tableHeader .aboveBlock.active .currentLeadersLink {
    display: inline
}

.screen.ratings .page .tableHeader .columnNames .number {
    position: absolute;
    left: 39px
}

.screen.ratings .page .tableHeader .columnNames .nick {
    position: absolute;
    left: 118px
}

.screen.ratings .page .tableHeader .columnNames .honorWrapper {
    position: absolute;
    width: 175px;
    left: 465px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center
}

.screen.ratings .page .tableHeader .columnNames .honorWrapper .honor {
    position: relative
}

.screen.ratings .page .tableHeader .columnNames .honorWrapper .honor::before {
    content: "";
    width: 11px;
    height: 18px;
    position: absolute;
    left: -17px;
    background: url(/web/img/rating_honor.svg) center center no-repeat
}

.screen.ratings .page .tableHeader .columnNames .levelWrapper {
    position: absolute;
    width: 70px;
    left: 640px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center
}

.screen.ratings .page .tableHeader .columnNames .levelWrapper .level {
    position: relative
}

.screen.ratings .page .tableHeader .columnNames .levelWrapper .level::before {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    left: -20px;
    background: url(/web/img/rating_level.svg) center center no-repeat
}

.screen.ratings .page .tableHeader .columnNames .rewardWrapper {
    position: absolute;
    width: 100px;
    left: 731px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center
}

.screen.ratings .page .tableHeader .columnNames .rewardWrapper .reward {
    display: none;
    position: relative
}

.screen.ratings .page .tableHeader .columnNames .rewardWrapper .reward::before {
    content: "";
    width: 14px;
    height: 17px;
    position: absolute;
    left: -20px;
    background: url(/web/img/ratings_reward.svg) center center no-repeat
}

.screen.ratings .page .tableHeader.week .reward {
    display: block !important
}

.screen.ratings .page table {
    position: relative;
    width: 880px;
    margin-top: 16px;
    margin-bottom: 50px;
    background-color: rgba(17, 22, 26, .8);
    border-collapse: collapse
}

.screen.ratings .page table tr.item {
    position: relative;
    cursor: pointer;
    height: 85px
}

.screen.ratings .page table tr.item td {
    position: relative;
    padding: 0
}

.screen.ratings .page table tr.item td.number {
    width: 31px;
    padding-left: 31px;
    text-align: center;
    background: right center no-repeat;
    font: 20px ProximaNova-Regular
}

.screen.ratings .page table tr.item td.icon {
    position: relative;
    width: 56px
}

.screen.ratings .page table tr.item td.icon .clan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/web/img/rating_clan.png) center center no-repeat;
    background-size: 40px 40px
}

.screen.ratings .page table tr.item td.icon .player {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(/web/img/rating_player.png) center center no-repeat;
    background-size: 26px 26px
}

.screen.ratings .page table tr.item td.nickBlock {
    width: 405px
}

.screen.ratings .page table tr.item td.nickBlock .nick {
    -webkit-transition: .3s;
    transition: .3s;
    font: 20px/19px ProximaNova-Bold
}

.screen.ratings .page table tr.item td.nickBlock .clan {
    margin-top: 2px;
    color: silver;
    font: 16px Roboto-Regular
}

.screen.ratings .page table tr.item td.honor {
    width: 140px;
    font: 20px ProximaNova-Regular;
    letter-spacing: 1px
}

.screen.ratings .page table tr.item td.level {
    width: 96px;
    font: 20px ProximaNova-Regular;
    letter-spacing: 1px
}

.screen.ratings .page table tr.item td.reward {
    width: 85px;
    font: 20px ProximaNova-Regular;
    letter-spacing: 1px
}

.screen.ratings .page table tr.item td.profile {
    font: 20px ProximaNova-Regular
}

.screen.ratings .page table tr.item td.profileBlock {
    width: 72px
}

.screen.ratings .page table tr.item td.profileBlock .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.screen.ratings .page table.week .profileBlock, .screen.ratings .page.clans table .level {
    display: none
}

.screen.ratings .page table tr.item td.profileBlock .box .profile {
    -webkit-transition: .3s;
    transition: .3s;
    text-align: right;
    margin-right: 5px;
    width: 0;
    opacity: 0;
    overflow: hidden;
    font: 14px Roboto-Regular
}

.screen.ratings .page table tr.item td.arrow {
    background: url(/web/img/rating_arrow_table.svg) left center no-repeat
}

.screen.ratings .page table tr.item:nth-of-type(1) .number {
    background-image: url(/web/img/rating_1.svg)
}

.screen.ratings .page table tr.item:nth-of-type(2) .number {
    background-image: url(/web/img/rating_2.svg)
}

.screen.ratings .page table tr.item:nth-of-type(3) .number {
    background-image: url(/web/img/rating_3.svg)
}

.screen.ratings .page table tr.item:hover {
    background-color: rgba(17, 27, 29, .8)
}

.screen.ratings .page table tr.item:hover .nick {
    color: #01e7a3
}

.screen.ratings .page table tr.item:hover .profile {
    width: 100% !important;
    opacity: 1 !important
}

.screen.ratings .page table tr.item:not(:last-of-type) td {
    border-top: 1px solid #162429
}

.screen.ratings .page table tr.item:not(:last-of-type) td:first-of-type::before {
    width: 6px;
    height: 11px;
    content: "";
    position: absolute;
    bottom: -5.5px;
    left: 0;
    background-image: url(/web/img/rating_angle_delimer.svg);
    z-index: 10
}

.screen.ratings .page table tr.item:not(:last-of-type) td:last-of-type::after {
    width: 6px;
    height: 11px;
    content: "";
    position: absolute;
    bottom: -5.5px;
    right: 0;
    background-image: url(/web/img/rating_angle_delimer.svg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    z-index: 10
}

.screen.ratings .page table tr.item:last-of-type td:first-of-type::before, .screen.ratings .page table tr.item:last-of-type td:last-of-type::after, .screen.ratings .page table::after, .screen.ratings .page table::before {
    width: 6px;
    height: 6px;
    position: absolute;
    background-image: url(/web/img/rating_angle.svg);
    z-index: 10;
    content: ""
}

.screen.ratings .page table tr.item:last-of-type td {
    border-top: 1px solid #162429;
    border-bottom: 1px solid #162429
}

.screen.ratings .page table tr.item:last-of-type td:first-of-type::before {
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.screen.ratings .page table tr.item:last-of-type td:last-of-type::after {
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.ratings .page table::before {
    top: 0;
    left: 0
}

.screen.ratings .page table::after {
    top: 0;
    right: 0;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.screen.ratings .page .bottomBlock {
    box-sizing: border-box;
    position: relative;
    margin-top: 36px;
    margin-bottom: 50px;
    border: 2px solid #01e7a3;
    padding: 20px 35px 35px;
    width: 880px
}

.screen.ratings .page .bottomBlock::after {
    position: absolute;
    width: 500px;
    height: 250px;
    content: "";
    right: 0;
    bottom: 0;
    background: url(/web/img/motivation.png) right bottom no-repeat
}

.screen.last_chance, .screen.planet_bg, .screen.planet_bg .logo, .screen.press_bg {
    background-repeat: no-repeat
}

.screen.ratings .page .bottomBlock .title {
    width: 350px;
    font: 24px/42px ProximaNovaExCn-Semibold;
    letter-spacing: 1px;
    text-transform: uppercase
}

.screen.ratings .page .bottomBlock .text {
    width: 365px;
    font: 18px/26px Roboto-Regular
}

.screen.ratings .page.clans .slider .item:nth-of-type(1) .image {
    background-image: url(/web/img/rating_clan_adv_1.png)
}

.screen.ratings .page.clans .slider .item:nth-of-type(2) .image {
    background-image: url(/web/img/rating_clan_adv_2.png)
}

.screen.ratings .page.clans .slider .item:nth-of-type(3) .image {
    background-image: url(/web/img/rating_clan_adv_3.png)
}

.screen.ratings .page.clans .tableHeader .columnNames .rewardWrapper {
    left: 760px
}

.screen.ratings .page.clans .tableHeader .columnNames .honorWrapper {
    width: auto;
    left: 635px
}

.screen.ratings .page.clans table .nickBlock {
    width: 513px !important
}

.screen.ratings .page.clans table .honor {
    width: 147px !important
}

.screen.ratings .page.clans table .descBlock {
    font: 16px Roboto-Regular;
    color: silver;
    margin-top: 4px
}

.screen.ratings .page.clans table .descBlock .count {
    color: #fff;
    font-family: Roboto-Regular
}

.screen.ratings .page.clans table .descBlock .clanLevel {
    visibility: hidden
}

.screen.ratings .page.clans table .descBlock .clanLevel .title {
    position: relative;
    margin-left: 17px
}

.screen.ratings .page.clans table .descBlock .clanLevel .title::before {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 17px;
    left: -17px;
    content: "";
    background-size: 100% 100%;
    background-image: url(/web/img/rating_level.svg)
}

.screen.ratings .page.clans table .descBlock .clanPlayers {
    position: absolute;
    left: 0
}

.screen.ratings .page.clans table .descBlock .clanPlayers .title {
    position: relative;
    margin-left: 20px
}

.screen.ratings .page.clans table .descBlock .clanPlayers .title::before {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 18px;
    left: -20px;
    content: "";
    background-size: 100% 100%;
    background-image: url(/web/img/rating_units_icon.svg)
}

.screen, .screen.ratings .page.players .bottomBlock {
    display: none
}

.screen.ratings .page.players .slider .item:nth-of-type(1) .image {
    background-image: url(/web/img/rating_player_adv_1.png)
}

.screen.ratings .page.players .slider .item:nth-of-type(2) .image {
    background-image: url(/web/img/rating_player_adv_2.png)
}

.screen.ratings .page.players .slider .item:nth-of-type(3) .image {
    background-image: url(/web/img/rating_player_adv_3.png)
}

.screen {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    min-height: 100%;
    z-index: 10
}

.screen.planet_bg, .screen.user .profile_content .timing {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex
}

.screen.static_text {
    min-height: 100px
}

.screen.static_text .content {
    width: 1181px;
    height: auto;
    margin: 0 auto
}

.screen.static_text .content .left_padding {
    border: 0 solid #f30;
    margin-left: 241px
}

.screen.planet_bg {
    min-height: 732px;
    background-image: url(/web/img/planet_bg.jpg);
    background-position: top center;
    border: 0 solid #f30;
    display: flex;
    justify-content: center;
    align-items: center
}

.screen.planet_bg .logo {
    width: 129px;
    height: 119px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 386px;
    margin-top: 68px;
    margin-bottom: 40px;
    background-image: url(/web/img/logo.png);
    background-position: 0 0;
    background-size: 129px;
}

.screen.planet_bg .logo a {
    width: 100%;
    height: 100%;
    display: block
}

.screen.planet_bg .title, .screen.planet_bg .txt {
    width: 470px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.planet_bg .title {
    box-sizing: border-box;
    font-family: ProximaNovaExCn-Semibold;
    font-size: 45px;
    line-height: 50px;
    text-transform: uppercase;
    margin-left: 219px;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 1.5px
}

.screen.planet_bg .txt {
    box-sizing: border-box;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    margin-left: 227px;
    margin-bottom: 53px
}

.screen.planet_bg .button {
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: inline-block;
    background-color: #01e7a3;
    font-family: ProximaNova-Bold;
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    color: #151b20;
    margin-bottom: 53px;
    padding: 20px 50px
}

.screen.planet_bg .button:hover {
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #7ff4d2
}

.screen.press_bg {
    min-height: 901px;
    background-image: url(/web/img/press_bg.jpg);
    background-position: top right
}

.screen.press_bg .content .left_padding {
    position: relative;
    min-height: 901px;
    border: 0 solid #0c0
}

.screen.press_bg .content .left_padding .merc {
    width: 345px;
    height: 479px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 346px;
    right: 99px;
    background-image: url(/web/img/mercs.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0 solid #0c0
}

.screen.press_bg .content .left_padding ul {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    margin: 67px 0 0;
    padding: 0
}

.screen.press_bg .content .left_padding ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 49%;
    vertical-align: top;
    margin-top: 99px
}

.screen.press_bg .content .left_padding ul li:nth-child(1), .screen.press_bg .content .left_padding ul li:nth-child(2) {
    margin-top: 0
}

.screen.press_bg .content .left_padding ul li:nth-child(3) {
    height: 400px
}

.screen.press_bg .content .left_padding ul li .line {
    width: 122px;
    height: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #01e7a3;
    margin-bottom: 40px
}

.screen.press_bg .content .left_padding ul li .title, .screen.press_bg .content .left_padding ul li .title a {
    font-family: ProximaNovaExCn-Semibold;
    font-size: 45px;
    line-height: 50px;
    margin-bottom: 25px;
    color: #fff
}

.screen.press_bg .content .left_padding ul li .title a:hover, .screen.press_bg .content .left_padding ul li .title:hover {
    color: #01e7a3
}

.screen.press_bg .content .left_padding ul li .by {
    width: 100%;
    height: auto;
    font-family: Roboto-Regular;
    color: #c5c5c5;
    font-size: 18px;
    line-height: 18px;
    display: table
}

.screen.press_bg .content .left_padding ul li .by > span {
    display: table-cell;
    vertical-align: middle
}

.screen.press_bg .content .left_padding ul li .by > span:first-child {
    width: 1px;
    padding-right: 14px
}

.screen.last_chance {
    min-height: 100%;
    background-image: url(/web/img/last_chance_bg.jpg);
    background-position: top right;
    background-size: cover;
    position: relative;
    border: 0 solid #0c0
}

.screen.last_chance .middle {
    width: 725px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    margin-top: -156.5px;
    margin-left: -244px;
    border: 0 solid #f30
}

.screen.last_chance .top_gradient {
    z-index: 30;
    width: 100%;
    height: 280px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    background: -moz-linear-gradient(top, #151b20 0, #151b20 9%, rgba(21, 27, 32, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #151b20), color-stop(9%, #151b20), color-stop(100%, rgba(21, 27, 32, 0)));
    background: -webkit-linear-gradient(top, #151b20 0, #151b20 9%, rgba(21, 27, 32, 0) 100%);
    background: -o-linear-gradient(top, #151b20 0, #151b20 9%, rgba(21, 27, 32, 0) 100%);
    background: -ms-linear-gradient(top, #151b20 0, #151b20 9%, rgba(21, 27, 32, 0) 100%);
    background: linear-gradient(to bottom, #151b20 0, #151b20 9%, rgba(21, 27, 32, 0) 100%)
}

.screen.last_chance .bottom_gradient, .screen.last_chance .in {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    bottom: 0
}

.screen.last_chance .bottom_gradient {
    z-index: 30;
    width: 100%;
    height: 360px;
    box-sizing: border-box;
    left: 0;
    background: -moz-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(21, 27, 32, 0)), color-stop(77%, #151b20), color-stop(100%, #151b20));
    background: -webkit-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -o-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -ms-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: linear-gradient(to bottom, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%)
}

.screen.last_chance .in {
    width: 1181px;
    height: 100%;
    box-sizing: border-box;
    display: table;
    left: 50%;
    margin-left: -590.5px;
    z-index: 40;
    border: 0 solid #f30
}

.screen.giBar, .screen.last_chance .in > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative
}

.screen.last_chance .in > div {
    box-sizing: border-box;
    display: table-cell;
    border: 0 solid #f30
}

.screen.last_chance .in > div:first-child {
    width: 240px
}

.screen.last_chance .title {
    font-family: ProximaNovaExCn-Semibold;
    font-size: 60px;
    line-height: 60px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .5px
}

.screen.last_chance .call_friends {
    display: block;
    font-family: ProximaNovaExCn-Light;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 26px;
    letter-spacing: 1.5px
}

.screen.giBar {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    display: table;
    background-color: #030c11;
    min-height: 40px;
    z-index: 20
}

.screen.giBar .logo {
    width: 20px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 10px;
    left: 40px;
    background-image: url(/web/img/gi_logo.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    backgroun-size: 20px 20px;
    border: 0 solid #f30
}

.screen.giBar .logo a {
    display: block;
    width: 100%;
    height: 100%
}

.screen.giBar .content, .screen.giBar .content .links {
    height: 40px;
    -webkit-box-sizing: border-box;
    border: 0 solid #f30
}

.screen.giBar .logo:hover {
    background-position: 0 -20px
}

.screen.giBar .content {
    width: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
    vertical-align: top
}

.screen.giBar .content .links {
    width: 1071px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: right;
    padding-top: 13px;
    padding-right: 24px;
    font-family: Arial;
    font-size: 13px;
    color: #fff
}

.screen.giBar .content .links .auth {
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
    display: -moz-inline-flex
}

.screen.giBar .content .links .auth .userpic {
    width: 11px;
    height: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 11px;
    background-image: url(/web/img/userpic.png);
    background-position: 0 0;
    background-repeat: no-repeat
}

.screen.giBar .content .links .auth a {
    -webkit-transition: .3s;
    transition: .3s;
    font-style: normal;
    color: #fff
}

.screen.giBar .content .links .auth a:hover {
    -webkit-transition: .3s;
    transition: .3s;
    color: #01e7a3
}

.screen.giBar .content .links .auth .logout {
    position: relative;
    margin-left: 28px
}

.screen.giBar .content .links .auth .logout:after {
    width: 10px;
    height: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
    position: absolute;
    top: 1px;
    right: -18px;
    display: block;
    background-image: url(/web/img/logout.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.giBar .content .links .nonAuth {
    font-style: italic
}

.screen.giBar .content .links .nonAuth .login {
    position: relative
}

.screen.giBar .content .links .nonAuth .login:before {
    width: 11px;
    height: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: -1px;
    left: -21px;
    margin-right: 11px;
    background-image: url(/web/img/userpic.png);
    background-position: 0 0;
    background-repeat: no-repeat
}

.screen.giBar .content .links .nonAuth .or {
    display: inline-block;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px
}

.screen.giBar .content .links .nonAuth a {
    -webkit-transition: .3s;
    transition: .3s;
    font-size: 13px;
    font-style: normal;
    color: #fff;
    border: 0
}

.screen.giBar .content .links .nonAuth a:hover {
    -webkit-transition: .3s;
    transition: .3s;
    color: #01e7a3
}

.screen.user {
    min-height: 100% !important;
    border: 0 solid #0c0
}

.screen.user .profile_content {
    width: 520px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-top: 160px;
    border: 0 solid #f30
}

.screen.user .profile_content .username {
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 50px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 5px
}

.screen.user .profile_content .timing {
    display: flex;
    justify-content: left;
    align-items: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Roboto-Regular;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 10px;
    border: 0 solid #f30
}

.screen.user .profile_content .timing .name {
    width: 160px;
    height: auto;
    opacity: .5
}

.screen.user .profile_content .score {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: left;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 90px 0 0;
    border: 0 solid #f30
}

.screen.user .profile_content .score li {
    position: absolute
}

.screen.user .profile_content .score li:before {
    content: "";
    width: 30px;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: -40px;
    left: 0;
    background-position: left bottom;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.user .profile_content .score li:first-child:before {
    background-image: url(/web/img/profile_icon_doblest.svg)
}

.screen.user .profile_content .score li:nth-child(2) {
    left: 160px
}

.screen.user .profile_content .score li:nth-child(2):before {
    background-image: url(/web/img/profile_icon_level.svg)
}

.screen.user .profile_content .score li:nth-child(3) {
    left: 320px
}

.screen.user .profile_content .score li:nth-child(3):before {
    background-image: url(/web/img/profile_icon_rating.svg)
}

.screen.user .profile_content .score li .digits {
    font-family: Roboto-Regular;
    font-size: 47px;
    line-height: 47px;
    margin-bottom: 10px
}

.screen.user .profile_content .score li .text {
    font-family: ProximaNova-Bold;
    font-size: 20px;
    line-height: 15px;
    color: #fff
}

.screen.user .profile_content .score li span {
    display: block
}

.screen.user .profile_content .avatar {
    width: 270px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 490px;
    background-image: url(/web/img/profile_avatar_bg.png);
    background-repeat: no-repeat
}

.screen.user .profile_content .avatar .clan {
    position: absolute;
    top: -50px;
    width: 270px;
    height: 220px;
    background: center top no-repeat;
    background-size: contain
}

.screen.user .profile_content .avatar .player {
    position: absolute;
    width: 270px;
    height: 114px;
    left: 0;
    right: 0;
    background: url(/web/img/player_avatar.png) center center no-repeat;
    background-size: contain
}

.screen.user .profile_content .avatar .player.big {
    top: -50px;
    height: 220px
}

.screen.user .userData {
    display: none;
    width: 100%;
    height: auto;
    margin-top: 55px
}

.screen.user .userData .line {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: left;
    align-items: bottom;
    position: relative;
    padding-top: 5px;
    padding-bottom: 35px
}

.screen.user .userData .field {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding: 15px;
    margin: 1px
}

.screen.user .userData .field input, .screen.user .userData .field textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Roboto-Regular;
    font-size: 16px;
    width: 265px;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
    outline: 0
}

.screen.user .userData .field input:hover, .screen.user .userData .field textarea:hover {
    transition: .3s;
    color: #01e7a3
}

.screen.user .userData .field.active {
    margin: 0;
    border: 1px solid #01e7a3
}

.screen.user .userData .name {
    width: 240px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Roboto-Regular;
    font-size: 20px;
    margin-top: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 0 solid #f30
}

.screen.user .userData .name:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 7px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #01e7a3
}

.screen.user .userData .edit_btn {
    width: 23px;
    height: 23px;
    background-image: url(/web/img/edit_pen.svg);
    background-repeat: no-repeat;
    position: absolute;
    left: 545px;
    top: 15px;
    display: none;
    cursor: pointer
}

.screen.user .userData .edit_btn.active {
    display: block
}

.screen.static_text.media .fankitGallery .slider .item:not(.active), .screen.static_text.media .screenshotGallery .slider .item:not(.active), .screen.static_text.media .videoGallery .slider .item .gallery_youtube_video, .screen.static_text.media .videoGallery .slider .item:not(.active), .screen.static_text.media .wallpaperGallery .slider .item:not(.active) {
    display: none
}

.screen.user .userData .text_saved {
    position: absolute;
    left: 580px;
    top: 25px;
    font-family: Roboto-Regular;
    font-size: 16px;
    line-height: 14px;
    transition: .3s;
    opacity: 0
}

.screen.user .userData .text_saved.active {
    opacity: 1
}

.screen.user .userData .edit_buttons {
    width: 116px;
    height: 23px;
    position: absolute;
    left: 545px;
    top: 15px;
    display: none;
    cursor: pointer
}

.screen.user .userData .edit_buttons.active {
    display: block
}

.screen.user .userData .edit_buttons .ok {
    width: 23px;
    height: 23px;
    transition: .3s;
    opacity: .7;
    margin-left: 35px;
    float: left;
    background-image: url(/web/img/accept.svg);
    background-repeat: no-repeat
}

.screen.user .userData .edit_buttons .ok:hover {
    opacity: 1
}

.screen.user .userData .edit_buttons .cancel {
    width: 23px;
    height: 23px;
    transition: .3s;
    opacity: .7;
    margin-left: 93px;
    background-image: url(/web/img/cancel.svg);
    background-repeat: no-repeat
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper.active ul, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper.active ul, .screen.user .userData .edit_buttons .cancel:hover {
    opacity: 1
}

.screen.user .userData input[type=date] {
    width: auto
}

.screen.user .userData textarea {
    overflow: hidden;
    resize: none
}

.screen.error {
    min-height: 740px;
    position: relative;
    border: 1px solid transparent
}

.screen.error .width {
    width: 470px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 40;
    border: 0 solid #f30
}

.screen.error .code {
    background: -webkit-linear-gradient(top, #01e7a3 0, #39A2B9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: ProximaNovaExCn-Light;
    font-size: 100px;
    line-height: 75px;
    color: #00ffba;
    text-transform: uppercase;
    letter-spacing: 7px;
    margin: 180px 0 0;
    padding: 0;
    position: relative
}

.screen.error .links .back:before, .screen.error .links .main:before {
    width: 10px;
    height: 19px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    content: "";
    background-position: 0 0;
    background-repeat: no-repeat;
    top: 0
}

.screen.error .title {
    font-family: ProximaNova-Bold;
    font-size: 40px;
    line-height: 45px;
    color: #fff;
    margin-top: 32px;
    letter-spacing: 1.5px
}

.screen.error .text, .screen.error .text h1, .screen.error .text h2, .screen.error .text h3 {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    margin: 15px 0 0;
    padding: 0
}

.screen.error .links {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 30px;
    border: 0 solid #f30
}

.screen.error .links a {
    position: relative;
    display: block;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 18px
}

.screen.error .links .back {
    margin-left: 18px
}

#menu .user a, .screen.error .links .main {
    margin-left: 50px
}

.screen.error .links .back:before {
    box-sizing: border-box;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    left: -18px;
    background-image: url(/web/img/arrow_green.svg)
}

.screen.error .links .main:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    box-sizing: border-box;
    position: absolute;
    right: -18px;
    background-image: url(/web/img/arr_green.png)
}

.background, .screen.error .bottom_gradient {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    left: 0;
    border: 0 solid #f30
}

.screen.error .bottom_gradient {
    z-index: 30;
    height: 360px;
    box-sizing: border-box;
    position: absolute;
    bottom: -1px;
    background: -moz-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(21, 27, 32, 0)), color-stop(77%, #151b20), color-stop(100%, #151b20));
    background: -webkit-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -o-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -ms-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: linear-gradient(to bottom, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%)
}

.background {
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 5;
    background-position: 0 0;
    background-size: cover
}

.background:before, .screen.static_text.media .arrow {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.background.main {
    background-image: url(/web/img/backgrounds/main.jpg)
}

.background.news {
    background-image: url(/web/img/backgrounds/news.jpg)
}

.background.error {
    background-image: url(/web/img/backgrounds/error.jpg)
}

.background.library {
    background-image: url(/web/img/backgrounds/library.jpg)
}

.background.media {
    background-image: url(/web/img/backgrounds/media.jpg)
}

.background.profile {
    background-image: url(/web/img/backgrounds/profile.jpg)
}

.background.raiting {
    background-image: url(/web/img/backgrounds/raiting.jpg)
}

.background.about {
    background-image: url(/web/img/backgrounds/about.jpg)
}

.background.ammunition {
    background-image: url(/web/img/backgrounds/ammunition.jpg)
}

.background.units {
    background-image: url(/web/img/backgrounds/units.jpg)
}

.background.characters {
    background-image: url(/web/img/backgrounds/characters.jpg)
}

.background.fractions {
    background-image: url(/web/img/backgrounds/fractions.jpg)
}

.background.ufo {
    background-image: url(/web/img/backgrounds/ufo.jpg)
}

.background.base {
    background-image: url(/web/img/backgrounds/base.jpg)
}

.background.enemies {
    background-image: url(/web/img/backgrounds/enemies.jpg)
}

.background.ratings {
    background-image: url(/web/img/backgrounds/ratings.jpg)
}

.background:before {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    z-index: 6;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: -moz-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(21, 27, 32, 0)), color-stop(77%, #151b20), color-stop(100%, #151b20));
    background: -webkit-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -o-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: -ms-linear-gradient(top, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    background: linear-gradient(to bottom, rgba(21, 27, 32, 0) 0, #151b20 77%, #151b20 100%);
    border: 0 solid #f30
}

.screen.faq .about .faqSlider .arrow, .screen.static_text.media .arrow {
    z-index: 20;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden
}

.screen.static_text.media {
    position: relative
}

.screen.static_text.media .arrow {
    width: 22px;
    height: 48px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
    background-image: url(/web/img/navig_arrow.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 17px 48px
}

.screen.faq .faq .descr, .screen.faq .faq .theme:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.screen.static_text.media .arrow.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.static_text.media .arrow.left:hover, .screen.static_text.media .arrow.right:hover {
    background-position: 5px 0
}

.screen.static_text.media .greenLine {
    width: 122px;
    height: 14px;
    background-color: #01e7a3
}

.screen.static_text.media .sliderText {
    line-height: 30px;
    font-size: 24px;
    font-family: ProximaNovaExCn-Semibold;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

.screen.static_text.media .text {
    font-size: 20px
}

.screen.static_text.media .count {
    line-height: 20px;
    font-family: ProximaNova-Regular;
    font-size: 18px;
    color: silver;
    position: absolute
}

.screen.static_text.media .videoGallery {
    position: relative;
    width: 881px;
    height: 562px
}

.screen.static_text.media .videoGallery .slider {
    position: absolute;
    top: 172px
}

.screen.static_text.media .videoGallery .slider .item {
    position: absolute;
    width: 479px;
    height: 282px;
    left: 43px
}

.screen.static_text.media .videoGallery .slider .item .sliderText {
    width: 200px;
    position: absolute;
    left: 591px;
    top: 85px
}

.screen.static_text.media .videoGallery .slider .item .video {
    width: 479px;
    height: 282px;
    background: no-repeat;
    background-size: cover
}

.screen.faq .about .youtubePlayButton, .screen.static_text.media .videoGallery .slider .item .galleryPlayButton {
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-position: 29px 21px;
    background-repeat: no-repeat;
    cursor: pointer
}

.screen.static_text.media .videoGallery .slider .item .galleryPlayButton {
    position: absolute;
    width: 74px;
    height: 74px;
    -webkit-border-radius: 101px;
    -moz-border-radius: 101px;
    border-radius: 101px;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    top: 102px;
    left: 205px;
    background-color: #01e7a3;
    background-image: url(/web/img/play_triangle.svg);
    background-size: 25px 32px;
    border: 0 solid #f30
}

.screen.static_text.media .videoGallery .slider .item .galleryPlayButton:hover {
    -webkit-transition: .3s;
    transition: .3s;
    transform: scale(1.2, 1.2)
}

.screen.static_text.media .videoGallery .slider .arrow {
    top: 117px;
    position: absolute
}

.screen.static_text.media .videoGallery .slider .arrow.right {
    left: 547px
}

.screen.static_text.media .videoGallery .slider .textBlockCaption {
    left: 636px;
    position: absolute
}

.screen.static_text.media .videoGallery .slider .textBlockCaption .greenLine {
    left: 3px
}

.screen.static_text.media .videoGallery .slider .textBlockCaption .count {
    top: 53px
}

.screen.static_text.media .screenshotGallery {
    position: relative;
    width: 881px;
    height: 552px
}

.screen.static_text.media .screenshotGallery .slider {
    position: relative;
    top: 72px
}

.screen.static_text.media .screenshotGallery .slider .item {
    position: absolute;
    left: 46px
}

.screen.static_text.media .screenshotGallery .slider .item .screenshot {
    width: 480px;
    height: 360px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%
}

.screen.static_text.media .screenshotGallery .slider .item .screenshot:hover {
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-box-shadow: 0 0 0 1px #01e7a3 inset;
    box-shadow: 0 0 0 1px #01e7a3 inset;
    background-color: rgba(0, 0, 0, 0)
}

.screen.static_text.media .screenshotGallery .slider .item .sliderText {
    position: absolute;
    width: 200px;
    left: 591px;
    top: 85px
}

.screen.static_text.media .screenshotGallery .slider .arrow {
    position: absolute;
    top: 156px
}

.screen.static_text.media .screenshotGallery .slider .arrow.right {
    left: 547px
}

.screen.static_text.media .screenshotGallery .slider .textBlockCaption {
    position: absolute;
    left: 636px
}

.screen.static_text.media .screenshotGallery .slider .textBlockCaption .greenLine {
    left: 3px
}

.screen.static_text.media .screenshotGallery .slider .textBlockCaption .count {
    top: 53px
}

.screen.static_text.media .fankitGallery, .screen.static_text.media .wallpaperGallery {
    position: relative;
    width: 881px;
    height: 496px
}

.screen.static_text.media .fankitGallery .slider, .screen.static_text.media .wallpaperGallery .slider {
    position: relative;
    top: 79px
}

.screen.static_text.media .fankitGallery .slider .item, .screen.static_text.media .wallpaperGallery .slider .item {
    position: absolute;
    left: 46px
}

.screen.static_text.media .fankitGallery .slider .item .wallpaper, .screen.static_text.media .wallpaperGallery .slider .item .wallpaper {
    width: 480px;
    height: 360px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover
}

.screen.static_text.media .fankitGallery .slider .item .wallpaper:hover, .screen.static_text.media .wallpaperGallery .slider .item .wallpaper:hover {
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-box-shadow: 0 0 0 1px #01e7a3 inset;
    box-shadow: 0 0 0 1px #01e7a3 inset;
    background-color: rgba(0, 0, 0, 0)
}

.screen.static_text.media .fankitGallery .slider .item .sliderText, .screen.static_text.media .wallpaperGallery .slider .item .sliderText {
    position: absolute;
    width: 200px;
    left: 591px;
    top: 85px
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper {
    width: 163px;
    height: auto;
    position: absolute;
    top: 180px;
    left: 591px
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper.active .downloadArrow, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper.active .downloadArrow {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper .downloadButton, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper .downloadButton {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 161px;
    height: 57px;
    background-color: #01e7a3;
    border-radius: 3px;
    border: 1px solid #01e7a3;
    cursor: pointer;
    margin-bottom: -16px
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper .downloadButton .title, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper .downloadButton .title {
    position: relative;
    text-align: center;
    color: #000;
    font-family: ProximaNova-Bold;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper .downloadButton .downloadArrow, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper .downloadButton .downloadArrow {
    -webkit-transition: .3s;
    transition: .3s;
    position: relative;
    left: 5px;
    width: 14px;
    height: 7px;
    background-image: url(/web/img/download_arrow.svg)
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper ul, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper ul {
    -webkit-transition: .3s;
    transition: .3s;
    height: auto;
    position: relative;
    list-style-type: none;
    opacity: 0;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #01e7a3;
    border-radius: 3px
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper ul li a, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper ul li a {
    font-family: Roboto-Regular;
    font-size: 14px;
    text-align: left;
    line-height: 28px;
    color: #fff
}

.screen.static_text.media .fankitGallery .slider .item .downloadWallpaper ul li a:hover, .screen.static_text.media .wallpaperGallery .slider .item .downloadWallpaper ul li a:hover {
    -webkit-transition: .3s;
    transition: .3s;
    color: #01e7a3
}

.screen.static_text.media .fankitGallery .slider .arrow, .screen.static_text.media .wallpaperGallery .slider .arrow {
    position: absolute;
    top: 156px
}

.screen.static_text.media .fankitGallery .slider .arrow.right, .screen.static_text.media .wallpaperGallery .slider .arrow.right {
    left: 547px
}

.screen.static_text.media .fankitGallery .slider .textBlockCaption, .screen.static_text.media .wallpaperGallery .slider .textBlockCaption {
    position: absolute;
    left: 636px
}

.screen.static_text.media .fankitGallery .slider .textBlockCaption .greenLine, .screen.static_text.media .wallpaperGallery .slider .textBlockCaption .greenLine {
    left: 3px
}

.screen.static_text.media .fankitGallery .slider .textBlockCaption .count, .screen.static_text.media .wallpaperGallery .slider .textBlockCaption .count {
    top: 53px
}

.screen.faq .faq {
    display: none
}

.screen.faq .faq.active {
    display: block
}

.screen.faq .faq .title {
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 68px;
    margin-bottom: 52px
}

.screen.faq .faq .descr {
    width: 450px;
    height: auto;
    box-sizing: border-box;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px
}

.screen.faq .faq .theme {
    font-family: ProximaNovaExCn-Semibold;
    font-size: 40px;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 95px;
    position: relative;
    margin-top: 70px
}

.screen.faq .faq .theme:last-child {
    margin-top: 50px
}

.screen.faq .faq .theme:after {
    width: 120px;
    height: 14px;
    box-sizing: border-box;
    content: "";
    background-color: #01e7a3;
    position: absolute;
    bottom: -61px;
    left: 0
}

.screen.faq .faq .question {
    -webkit-transition: color .3s;
    transition: color .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    font-family: ProximaNovaCond-Bold;
    cursor: pointer;
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    display: inline-block;
    letter-spacing: .2px;
    margin-bottom: 23px
}

.screen.faq .faq .question:before {
    width: 18px;
    height: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    content: '';
    position: absolute;
    top: 3px;
    right: -25px;
    background-image: url(/web/img/faq_arrow_white.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 0 solid #f30
}

.screen.faq .faq .question.active:before, .screen.faq .faq .question:hover:before {
    background-image: url(/web/img/faq_arrow_green.svg)
}

.screen.faq .faq .question:hover {
    -webkit-transition: color .3s;
    transition: color .3s;
    color: #01e7a3
}

.screen.faq .faq .question.active {
    color: #01e7a3
}

.screen.faq .faq .question.active:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.faq .faq .answer {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    color: #c1c1c1;
    display: none;
    margin-bottom: 35px;
    margin-top: -5px
}

.screen.faq .faq .answer h2, .screen.faq .faq .answer h3, .screen.faq .faq .answer p, .screen.faq .faq .answer span, .screen.faq .faq .answer > h1 {
    margin: 0;
    padding: 0
}

.screen.faq .subMenu {
    position: relative;
    padding-top: 167px;
    height: 34px
}

.screen.faq .subMenu div, .screen.faq .subMenu > a {
    -webkit-transition: .3s color;
    transition: .3s color;
    font-size: 28px;
    font-family: ProximaNovaExCn-light;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff
}

.screen.faq .subMenu div:not(:first-child), .screen.faq .subMenu > a:not(:first-child) {
    margin-left: 51px
}

.screen.faq .subMenu div.active, .screen.faq .subMenu div:hover, .screen.faq .subMenu > a.active, .screen.faq .subMenu > a:hover {
    color: #01e7a3
}

.screen.faq .subMenu div.active, .screen.faq .subMenu > a.active {
    border-bottom: 2px solid
}

.screen.faq .about {
    position: relative;
    display: none
}

.screen.faq .about.active {
    display: block
}

.screen.faq .about .youtubePlayButton {
    position: relative;
    margin-top: 82px;
    width: 74px;
    height: 74px;
    -webkit-border-radius: 101px;
    -moz-border-radius: 101px;
    border-radius: 101px;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #01e7a3;
    background-image: url(/web/img/play_triangle.svg);
    background-size: 25px 32px;
    border: 0 solid #f30;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .4)
}

.screen.faq .about .youtubePlayButton:hover {
    -webkit-transition: .3s;
    transition: .3s;
    transform: scale(1.2, 1.2)
}

.screen.faq .about .youtubePlayButton .just_url {
    display: none
}

.screen.faq .about .infoTitle {
    position: relative;
    width: 600px;
    padding-top: 36px;
    font-size: 50px;
    letter-spacing: 5px;
    font-family: ProximaNovaExCn-light;
    line-height: 55px;
    text-transform: uppercase
}

.screen.faq .about .infoTop {
    position: relative
}

.screen.faq .about .infoTop .text {
    width: 530px;
    position: relative;
    min-height: 579px;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px
}

.screen.faq .about .infoTop .text .greenLine {
    position: relative;
    width: 122px;
    height: 14px;
    top: 57px;
    background-color: #01e7a3
}

.screen.faq .about .infoTop .text .textBlock {
    position: relative;
    margin-top: 95px
}

.screen.faq .about .infoTop .text .textBlock .longText, .screen.faq .about .infoTop .text .textBlock .shortText {
    display: inline
}

.screen.faq .about .infoTop .alarm {
    top: 0
}

.screen.faq .about .infoTop .alarm .descr {
    padding-bottom: 100px
}

.screen.faq .about .infoTop .alarm .descr > h1, .screen.faq .about .infoTop .alarm .descr > h2, .screen.faq .about .infoTop .alarm .descr > h3 {
    letter-spacing: .5px;
    line-height: 26px
}

.screen.faq .about .infoTop .alarm .image {
    position: absolute;
    left: 50px;
    bottom: -125px
}

.screen.faq .about .faqSlider {
    width: 940px;
    height: 336px;
    position: relative;
    overflow: hidden;
    margin-top: 90px;
    border: 0 solid #f30
}

.screen.faq .about .faqSlider .arrow {
    width: 22px;
    height: 48px;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    cursor: pointer;
    top: 254px;
    background-image: url(/web/img/navig_arrow.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 17px 48px
}

.screen.faq .about .faqSlider .arrow.left:hover, .screen.faq .about .faqSlider .arrow.right:hover {
    background-position: 5px 0
}

.screen.faq .about .faqSlider .arrow.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.screen.faq .about .faqSlider .arrow.right {
    left: 324px
}

.screen.faq .about .faqSlider .greenMask, .screen.faq .about .faqSlider .item .image {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0
}

.screen.faq .about .faqSlider .greenMask {
    pointer-events: none;
    margin-left: 10px;
    width: 338px;
    height: 317px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/web/img/green_mask.svg);
    z-index: 15;
    border: 0 solid #f30
}

.screen.faq .about .faqSlider .item {
    width: 100%;
    height: 100%;
    position: absolute
}

.screen.faq .about .faqSlider .item:not(.active) {
    display: none
}

.screen.faq .about .faqSlider .item.active {
    display: block
}

.screen.faq .about .faqSlider .item.active:hover .text .title {
    -webkit-transition: .3s;
    transition: .3s;
    color: #01e7a3
}

.screen.faq .about .faqSlider .item .image {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    left: 0;
    top: 8px;
    width: 335px;
    height: 300px
}

.screen.faq .about .faqSlider .count, .screen.faq .about .faqSlider .item .textBlock {
    top: 43px;
    left: 402px;
    position: absolute
}

.screen.faq .about .faqSlider .item .image video {
    width: 100%;
    height: 100%
}

.screen.faq .about .faqSlider .item .textBlock .yellowTitle {
    display: none;
    font-family: ProximaNova-Regular;
    font-size: 18px;
    line-height: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-top: 30px;
    color: #fce12a
}

.screen.faq .about .faqSlider .item .textBlock .title {
    font-family: ProximaNovaExCn-Semibold;
    font-size: 40px;
    line-height: 46px;
    letter-spacing: 1.5px;
    padding-top: 35px;
    text-transform: uppercase
}

.screen.faq .about .faqSlider .item .textBlock .description {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    padding-top: 8px;
    width: 450px
}

.screen.faq .about .faqSlider .count {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
    color: silver
}

.screen.faq .about .infoBottom {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: calc(100% - 67px);
    margin-top: 130px;
    margin-bottom: 70px;
    border: 3px solid #01e7a3;
    min-height: 500px
}

.screen.faq .about .infoBottom .title {
    padding-top: 44px;
    padding-left: 58px;
    font-family: ProximaNovaExCn-Semibold;
    font-size: 24px;
    line-height: 42px;
    letter-spacing: 2px;
    text-transform: uppercase
}

.screen.faq .about .infoBottom .description {
    width: 460px;
    padding-top: 2px;
    padding-left: 58px;
    padding-bottom: 63px;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px
}

.screen.faq .about .infoBottom .image {
    width: 378px;
    height: 442px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    right: 120px;
    bottom: 111px
}

.screen.faq .page.soon > .title {
    margin-top: 80px;
    font: 50px ProximaNovaExCn-Light;
    letter-spacing: 5px;
    text-transform: uppercase
}

.screen.faq .page.soon .infoBlock {
    position: relative;
    width: 600px;
    margin-top: 40px;
    padding-top: 40px;
    font: 18px/26px Roboto-Regular
}

.screen.faq .page.soon .infoBlock::before {
    position: absolute;
    top: 0;
    content: "";
    display: block;
    width: 120px;
    height: 15px;
    background-color: #01e7a3
}

.screen.library ul li, .screen.library ul li .content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative
}

.screen.faq .page.soon ul.list {
    list-style: none;
    margin: 70px 0 0;
    padding: 0
}

.screen.faq .page.soon ul.list li.item {
    width: 600px;
    margin-bottom: 65px
}

.screen.faq .page.soon ul.list li.item > .label {
    padding: 10px 12px;
    text-transform: uppercase;
    font: 18px ProximaNova-Bold;
    display: inline-block;
    color: #000
}

.screen.faq .page.soon ul.list li.item > img.image {
    fit-object: cover;
    -o-fit-object: cover;
    -moz-fit-object: cover;
    -ms-fit-object: cover;
    max-width: 600px
}

.screen.faq .page.soon ul.list li.item > .title {
    margin-top: 20px;
    margin-bottom: 22px;
    text-transform: uppercase;
    font: 40px/46px ProximaNovaExCn-Semibold;
    letter-spacing: 1px
}

.screen.faq .page.soon ul.list li.item p, .screen.faq .page.soon ul.list li.item span, .screen.faq .page.soon ul.list li.item > .desc {
    margin-top: 22px;
    font: 18px/26px Roboto-Regular
}

.screen.faq .page.soon ul.list li.item.soon .label {
    background-color: #fce12a
}

.screen.faq .page.soon ul.list li.item.new .label {
    background-color: #fff
}

.screen.faq .page.soon .showMore {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 175px;
    display: table;
    font: 18px/18px ProximaNova-Bold;
    text-transform: uppercase;
    padding: 20px;
    color: #151b20;
    background-color: #01e7a3;
    text-align: center;
    cursor: pointer;
    margin-bottom: 100px
}

.screen.faq .page.soon .showMore:hover {
    -webkit-transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    font-size: 20px
}

.screen.library ul {
    display: table;
    list-style: none;
    padding: 0
}

.screen.library ul li {
    width: 280px;
    height: 238px;
    box-sizing: border-box;
    margin-top: 19px;
    margin-right: 19px;
    float: left;
    background-size: cover
}

.screen.library ul li:nth-child(7n+1) {
    width: 580px;
    height: 332px
}

.screen.library ul li:nth-child(7n+2) {
    width: 280px;
    height: 332px;
    margin-right: 0
}

.screen.library ul li:nth-child(7n+5) {
    margin-right: 0
}

.screen.library ul li:nth-child(7n+3) .descr, .screen.library ul li:nth-child(7n+4) .descr, .screen.library ul li:nth-child(7n+5) .descr {
    display: none
}

.screen.library ul li:nth-child(7n+6) {
    width: 280px;
    height: 332px
}

.screen.library ul li:nth-child(7n+7) {
    width: 580px;
    height: 332px;
    margin-right: 0
}

.screen.library ul li .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: block;
    background-blend-mode: overlay
}

.screen.library ul li .content .bullet {
    display: none;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    width: 45px;
    height: 45px;
    left: 28px;
    top: 28px;
    background: url(/web/img/library/circle_icon.png)
}

.screen.library ul li .content .title {
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    bottom: 28px;
    left: 28px;
    font-family: ProximaNovaExCn-Light;
    font-size: 50px;
    line-height: 43px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px
}

.screen.library ul li .content .watchBlock {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 28px;
    left: 28px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.detailedLibrary .arrow.right, .detailedLibrary .navigation .arrow.right {
    left: 104px
}

.screen.library ul li .content .watchBlock .text {
    font: 16px/22px Roboto-Regular
}

.screen.library ul li .content .watchBlock .arrow {
    width: 7px;
    height: 14px;
    margin-left: 5px;
    background: url(/web/img/library/arrow.svg) no-repeat;
    background-size: 7px 14px
}

.screen.library ul li .content:hover .title {
    margin-bottom: 34px
}

.screen.library ul li .content:hover .watchBlock {
    visibility: visible;
    opacity: 1
}

.screen.library ul li .content.fractions {
    background-image: url(/web/img/library/fractions.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.fractions:hover {
    background-image: url(/web/img/library/fractions.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.fractions:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.enemies {
    background-image: url(/web/img/library/enemies.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.enemies:hover {
    background-image: url(/web/img/library/enemies.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.enemies:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.units {
    background-image: url(/web/img/library/units.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.units:hover {
    background-image: url(/web/img/library/units.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.units:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.equipment {
    background-image: url(/web/img/library/equipment.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.equipment:hover {
    background-image: url(/web/img/library/equipment.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.equipment:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.base {
    background-image: url(/web/img/library/base.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.base:hover {
    background-image: url(/web/img/library/base.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.base:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.characters {
    background-image: url(/web/img/library/characters.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.characters:hover {
    background-image: url(/web/img/library/characters.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.characters:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.locations {
    background-image: url(/web/img/library/locations.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.locations:hover {
    background-image: url(/web/img/library/locations.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.locations:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.weapons {
    background-image: url(/web/img/library/weapons.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.weapons:hover {
    background-image: url(/web/img/library/weapons.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.weapons:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.screen.library ul li .content.armor {
    background-image: url(/web/img/library/armor.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.screen.library ul li .content.armor:hover {
    background-image: url(/web/img/library/armor.jpg), linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

.screen.library ul li .content.armor:hover .bullet {
    background-image: url(/web/img/library/base_icon.png)
}

.detailedLibrary .arrow {
    width: 22px;
    height: 48px;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    cursor: pointer;
    background-image: url(/web/img/navig_arrow.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 17px 48px
}

.detailedLibrary .arrow.left:hover, .detailedLibrary .arrow.right:hover {
    background-position: 5px 0
}

.detailedLibrary .arrow.left {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.detailedLibrary .navigation {
    position: absolute;
    top: 140px;
    width: 121px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center
}

.detailedLibrary .navigation .arrow {
    position: absolute
}

.detailedLibrary .navigation .count {
    color: #01e7a3;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 24px;
    position: relative;
    margin: 11px auto
}

.detailedLibrary .textBlock .item {
    margin-top: 92px
}

.detailedLibrary .textBlock .item .greenLine {
    display: none
}

.detailedLibrary .textBlock .item::before {
    width: 122px;
    height: 14px;
    position: absolute;
    margin-top: -48px;
    display: block;
    content: "";
    background-color: #01e7a3
}

.detailedLibrary .textBlock .item:nth-child(2n-1) {
    clear: left
}

.detailedLibrary .textBlock .item:nth-child(2n) {
    margin-left: 110px
}

.detailedLibrary .textBlock .title {
    font: 24px/24px ProximaNovaCond-Bold;
    text-transform: uppercase;
    letter-spacing: 1px
}

.detailedLibrary .textBlock .description {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    width: 410px
}

.detailedLibrary .left_padding > .textBlock .item {
    float: left
}

.detailedLibrary .greenLine {
    width: 122px;
    height: 14px;
    background-color: #01e7a3
}

.detailedLibrary .mainBlock {
    position: relative;
    margin-top: 176px
}

.detailedLibrary .mainBlock > .leftBlock {
    position: relative;
    float: left;
    width: 521px
}

.detailedLibrary .mainBlock > .leftBlock .titleBlock {
    position: relative
}

.detailedLibrary .mainBlock > .leftBlock .titleBlock .title {
    font: 50px/50px ProximaNovaExCn-Light;
    text-transform: uppercase;
    letter-spacing: 5px
}

.detailedLibrary .mainBlock > .leftBlock .titleBlock .yellowTitle {
    position: absolute;
    margin-top: 8px;
    text-transform: uppercase;
    color: #fce12a;
    letter-spacing: 1px;
    font: 18px ProximaNova-Regular
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock {
    position: relative;
    margin-top: 110px
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item {
    display: inline-block;
    min-width: 160px;
    max-width: 170px;
    white-space: nowrap;
    margin-bottom: 25px
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    background: left bottom no-repeat
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.age {
    background-image: url(/web/img/icon_age.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.armor {
    background-image: url(/web/img/icon_armor.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.attack {
    background-image: url(/web/img/icon_attack.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.chance {
    background-image: url(/web/img/icon_chance.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.damage {
    background-image: url(/web/img/icon_damage.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.health {
    background-image: url(/web/img/icon_health.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.height {
    background-image: url(/web/img/icon_height.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .icon.shield {
    background-image: url(/web/img/icon_shield.svg)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 40px;
    width: 40px;
    background: left bottom no-repeat
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-hp {
    background-image: url(/web/img/score_img_2.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-dmg {
    background-image: url(/web/img/score_img_1.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-critical {
    background-image: url(/web/img/score_img_3.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-energy-shield {
    background-image: url(/web/img/attrib_yellow_ellipse.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-armor {
    background-image: url(/web/img/attrib_yellow_shield.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .image.image-ap-attack {
    background-image: url(/web/img/attrib_blue_shield.png)
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .stat {
    font-family: Roboto-Regular;
    font-size: 47px;
    line-height: 59px;
    letter-spacing: 2px
}

.detailedLibrary .mainBlock > .leftBlock .attributeBlock .item .description {
    font-family: ProximaNova-Regular;
    font-size: 20px;
    line-height: 20px;
    margin-top: -2px
}

.detailedLibrary .mainBlock > .leftBlock .textBlock {
    margin-top: 156px
}

.detailedLibrary .mainBlock > .leftBlock .textBlock .title {
    font-family: ProximaNovaCond-Bold;
    font-size: 24px;
    line-height: 24px;
    margin-top: 38px;
    text-transform: uppercase
}

.detailedLibrary .mainBlock > .leftBlock .textBlock .description {
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    width: 410px;
    margin-top: 15px
}

.detailedLibrary .mainBlock > .rightBlock {
    position: relative;
    margin-left: 521px;
    width: 360px
}

.detailedLibrary .mainBlock > .rightBlock .item:not(.active) {
    display: none
}

.detailedLibrary .mainBlock > .rightBlock .backgroundImage {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 267px;
    height: 239px;
    position: relative;
    background: url(/web/img/grid.png) no-repeat;
    background-size: 267px 239px
}

.detailedLibrary .mainBlock > .rightBlock .image {
    position: absolute;
    width: 302px;
    height: 385px;
    left: -18px;
    top: -47px;
    background: no-repeat;
    background-size: 302px 385px
}

.detailedLibrary .mainBlock > .rightBlock .slideTitle {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 267px;
    position: relative;
    font: 25px/25px ProximaNovaExCn-Semibold;
    text-align: center;
    margin-top: 50px;
    letter-spacing: 1px
}

.detailedLibrary .mainBlock > .rightBlock .slideDescription {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    position: relative;
    margin-top: 15px;
    font-family: Roboto-Regular;
    font-size: 16px;
    line-height: 22px
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems {
    position: relative
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems .item {
    position: relative;
    margin-top: 50px;
    width: 360px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: left;
    align-items: top
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems .item::before {
    width: 60px;
    height: 7px;
    position: absolute;
    margin-top: -22px;
    display: block;
    content: "";
    background-color: #01e7a3
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems .greenLine.small {
    display: none
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems .title {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100px;
    display: inline-block;
    letter-spacing: 1px;
    font: 20px/24px ProximaNovaCond-Bold;
    text-transform: uppercase
}

.detailedLibrary .mainBlock > .rightBlock .descriptionItems .description {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 181px;
    margin-left: 75px;
    display: inline-block;
    font: 16px/24px Roboto-Regular
}

.detailedLibrary .mainBlock > .rightBlock .arrow {
    position: absolute;
    top: 190px
}

.detailedLibrary .mainBlock > .rightBlock .arrow.right {
    left: 247px
}

.detailedLibrary .mainBlock > .rightBlock .textBlock .item {
    margin-top: 198px
}

.detailedLibrary .mainBlock > .rightBlock .textBlock .title {
    margin-top: 38px;
    font-family: ProximaNovaCond-Bold;
    font-size: 24px;
    line-height: 24px;
    text-transform: uppercase
}

.detailedLibrary .mainBlock > .rightBlock .textBlock .description {
    margin-top: 15px;
    font-family: Roboto-Regular;
    font-size: 18px;
    line-height: 26px;
    width: 410px
}

.detailedLibrary.withList .mainBlock {
    position: relative
}

.detailedLibrary.withList .mainBlock .titleBlock .title {
    position: relative;
    font: 50px/50px ProximaNovaExCn-Light;
    text-transform: uppercase;
    letter-spacing: 5px
}

.detailedLibrary.withList .mainBlock .titleBlock .yellowTitle {
    position: absolute;
    margin-top: 8px;
    font: 18px ProximaNova-Regular;
    text-transform: uppercase;
    color: #fce12a;
    letter-spacing: 1px
}

.detailedLibrary.withList .mainBlock .textBlock {
    margin-top: 156px;
    width: 275px
}

.detailedLibrary.withList .mainBlock .textBlock .greenLine {
    display: none
}

.detailedLibrary.withList .mainBlock .list.base {
    margin-top: 128px;
    margin-bottom: 50px
}

.detailedLibrary.withList .mainBlock .list.gadgets {
    margin-top: 75px
}

.detailedLibrary.withList .mainBlock .list.base::before {
    width: 122px;
    height: 14px;
    position: absolute;
    margin-top: -43px;
    display: block;
    content: "";
    background-color: #01e7a3
}

.detailedLibrary.withList .mainBlock .list .listTitle {
    margin-top: 41px;
    font: 40px/46px ProximaNovaExCn-Semibold;
    text-transform: uppercase;
    letter-spacing: 1px
}

.detailedLibrary.withList .mainBlock .list ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.detailedLibrary.withList .mainBlock .list ul li {
    width: 240px;
    display: block;
    overflow: hidden;
    float: left
}

.detailedLibrary.withList .mainBlock .list ul li:not(:nth-child(3n)) {
    margin-right: 43px
}

.detailedLibrary.withList .mainBlock .list ul li:nth-child(3n+1) {
    clear: left
}

.detailedLibrary.withList .mainBlock .list ul li:nth-child(n+4) {
    margin-top: 20px
}

.detailedLibrary.withList .mainBlock .list ul li .image {
    background: center no-repeat;
    background-size: contain;
    height: 214px;
    width: 270px
}

.detailedLibrary.withList .mainBlock .list ul li .title {
    font: 25px/25px ProximaNovaExCn-Semibold;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase
}

.detailedLibrary.withList .mainBlock .list ul li .desc {
    margin-top: 18px;
    font: 16px/22px Roboto-Regular;
    word-wrap: break-word
}

.detailedLibrary.locations .locationDesc {
    position: relative;
    margin-top: 176px
}

.detailedLibrary.locations .locationDesc .titleBlock .title {
    text-transform: uppercase;
    letter-spacing: 5px;
    font: 50px/43px ProximaNovaExCn-Light
}

.detailedLibrary.locations .locationDesc .descBlock {
    width: 450px;
    margin-top: 156px
}

.detailedLibrary.locations .locationDesc .descBlock::before {
    width: 122px;
    height: 14px;
    position: absolute;
    margin-top: -43px;
    display: block;
    content: "";
    background-color: #01e7a3
}

.detailedLibrary.locations .locationDesc .descBlock .description {
    margin-top: 42px;
    font: 18px/26px Roboto-Regular
}

.detailedLibrary.locations .locationDesc .locationImage {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 267px;
    height: 239px;
    position: absolute;
    left: 521px;
    top: 0;
    background: no-repeat;
    background-size: 267px 239px
}

.detailedLibrary.locations .locationDesc .gallery {
    position: relative;
    top: 72px;
    width: 881px;
    height: 552px
}

.detailedLibrary.locations .locationDesc .gallery .item {
    position: absolute;
    left: 46px
}

.detailedLibrary.locations .locationDesc .gallery .item:not(.active) {
    display: none
}

.detailedLibrary.locations .locationDesc .gallery .item .screenshot {
    width: 480px;
    height: 360px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 100%
}

.detailedLibrary.locations .locationDesc .gallery .item .screenshot:hover {
    -webkit-transition: background .3s;
    transition: background .3s;
    -webkit-box-shadow: 0 0 0 1px #01e7a3 inset;
    box-shadow: 0 0 0 1px #01e7a3 inset;
    background-color: rgba(0, 0, 0, 0)
}

.detailedLibrary.locations .locationDesc .gallery .item .sliderText {
    position: absolute;
    width: 200px;
    left: 591px;
    top: 85px
}

.detailedLibrary.locations .locationDesc .gallery .arrow {
    position: absolute;
    top: 156px
}

.detailedLibrary.locations .locationDesc .gallery .arrow.right {
    left: 547px
}

.detailedLibrary.locations .locationDesc .gallery .textBlock {
    position: absolute;
    left: 636px
}

.detailedLibrary.locations .locationDesc .gallery .textBlock .greenLine {
    left: 3px
}

.detailedLibrary.locations .locationDesc .gallery .textBlock .count {
    top: 53px
}

.detailedLibrary.characters .textBlock .item {
    margin-top: 110px
}

.detailedLibrary.armor .descriptionItems, .detailedLibrary.enemies .descriptionItems {
    margin-top: 102px
}

.detailedLibrary.units .skillBlock {
    margin-top: 115px
}

.detailedLibrary.units .skillBlock p {
    margin: 0;
    padding: 0
}

.detailedLibrary.units .skillBlock .skill {
    position: relative;
    display: inline-block;
    margin: 15px;
    width: 80px;
    height: 80px
}

.detailedLibrary.units .skillBlock .skill .icon {
    width: 80px;
    height: 80px;
    background: no-repeat;
    background-size: cover
}

.detailedLibrary.units .skillBlock .skill > .title {
    margin-top: 6px;
    font: 14px/17px ProximaNova-Regular;
    text-align: center;
    display: none
}

.detailedLibrary.units .skillBlock .skill .popup {
    position: absolute;
    width: 300px;
    display: none;
    top: 80px;
    left: 80px;
    background: rgba(0, 0, 0, .9);
    z-index: 10;
    padding: 20px
}

.detailedLibrary.units .skillBlock .skill .popup .yellowTitle {
    font: 14px/16px ProximaNova-Regular;
    color: #fce12a;
    text-transform: uppercase
}

.detailedLibrary.units .skillBlock .skill .popup .title {
    margin-top: 3px;
    font: 25px/28px ProximaNovaExCn-Semibold;
    text-transform: uppercase;
    letter-spacing: 1px
}

.detailedLibrary.units .skillBlock .skill .popup .desc {
    margin-top: 3px;
    font: 14px/18px Roboto-Regular
}

.detailedLibrary.units .skillBlock .skill .popup .reqDesc {
    margin-top: 10px;
    font: 14px/18px Roboto-Italic;
    color: #c1c1c1
}

.detailedLibrary.units .skillBlock .skill .popup .leftBlock {
    display: none;
    float: left
}

.detailedLibrary.units .mainBlock .textBlock {
    margin-top: 122px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock {
    width: 246px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill {
    width: 40px;
    height: 40px;
    margin-top: 18px;
    margin-left: 0;
    margin-bottom: 0
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill:not(:nth-child(4n)) {
    margin-right: 18px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill:nth-child(4n-3) .popup {
    left: 0
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill:nth-child(4n-2) .popup {
    left: -64px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill:nth-child(4n-1) .popup {
    left: -127px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill:nth-child(4n) .popup {
    left: -191px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill > .title {
    display: none
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill > .icon {
    width: 40px;
    height: 40px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill .popup {
    position: absolute;
    top: 40px;
    left: 40px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill .popup .leftBlock {
    width: 80px
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill .popup .leftBlock .needRank {
    margin-top: 10px;
    color: #c1c1c1;
    font: 12px/14px Roboto-Italic;
    text-align: center
}

.detailedLibrary.units .mainBlock > .rightBlock .skillBlock .skill .popup .leftBlock .rank {
    color: #c1c1c1;
    margin-top: 2px;
    font: 22px/28px ProximaNova-Bold;
    text-align: center
}

.detailedLibrary.fractions .textBlock .item {
    margin-top: 156px !important
}

.detailedLibrary.weapons .slideDescription {
    margin-top: 35px !important
}

.detailedLibrary .caption.more {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 95px
}

.detailedLibrary .more .item, ul.lang {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.detailedLibrary .caption.all {
    padding-top: 60px
}

.detailedLibrary .more {
    margin-bottom: 30px
}

.detailedLibrary .more .item {
    width: 160px;
    height: 160px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    background: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    margin-right: 16px;
    margin-top: 16px
}

.alarm .icon, .detailedLibrary .more .item .watchBlock {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    justify-content: center
}

.detailedLibrary .more .item .title {
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    width: 127px;
    bottom: 14px;
    left: 14px;
    font: 18px/21px ProximaNovaExCn-Regular;
    word-wrap: break-word;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px
}

.detailedLibrary .more .item .watchBlock {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 14px;
    left: 14px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.detailedLibrary .more .item .watchBlock .text {
    font: 14px/22px Roboto-Regular
}

.alarm .title > span, ul.lang li a, ul.lang li span {
    font-family: ProximaNova-Bold;
    text-transform: uppercase
}

.detailedLibrary .more .item .watchBlock .arrow {
    width: 7px;
    height: 14px;
    margin-left: 5px;
    background: url(/web/img/library/arrow.svg) no-repeat;
    background-size: 7px 14px
}

.detailedLibrary .more .item:not(.active) .mask {
    position: absolute;
    width: inherit;
    height: inherit;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3));
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3));
    background: -o-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3));
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3));
    background: -webkit-gradient(linear, to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3));
    background: -ms-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(77, 156, 193, .3))
}

.detailedLibrary .more .item:not(.active):hover .mask {
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    background: -o-linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    background: -webkit-gradient(linear, to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
    background: -ms-linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0))
}

.detailedLibrary .more .item:not(.active):hover .title {
    margin-bottom: 24px
}

.detailedLibrary .more .item:not(.active):hover .watchBlock {
    visibility: visible;
    opacity: 1;
    color: #01e7a3
}

.detailedLibrary .more .item.active {
    border: 1px solid #01e7a3
}

.detailedLibrary .more .item.active .title {
    width: 129px
}

.detailedLibrary .more .item.active .mask {
    position: absolute;
    width: inherit;
    height: inherit;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    background: -o-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    background: -webkit-gradient(linear, to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    background: -ms-linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0))
}

ul.lang {
    width: 77px;
    height: 40px;
    box-sizing: border-box;
    list-style: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    margin: 0
}

ul.lang li a, ul.lang li span, ul.lang:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

ul.lang:before {
    content: '';
    width: 10px;
    height: 6px;
    box-sizing: border-box;
    position: absolute;
    top: 16px;
    right: 14px;
    background-image: url(/web/img/arrow_menu.svg);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat
}

ul.lang li {
    float: left
}

ul.lang li a, ul.lang li span {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 14px;
    padding-top: 13px;
    padding-left: 17px;
    display: block
}

ul.lang li:first-child, ul.lang li:not(:first-child) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 77px
}

ul.lang li:first-child {
    box-sizing: border-box;
    height: 40px;
    background-color: #01e7a3
}

ul.lang li:first-child a, ul.lang li:first-child span {
    color: #030c11
}

ul.lang li:not(:first-child) {
    box-sizing: border-box;
    overflow: hidden;
    background-color: #030c11
}

.alarm, .call_to_action {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

ul.lang li:not(:first-child) a, ul.lang li:not(:first-child) span {
    color: #fff
}

ul.lang li:not(:first-child) a:hover, ul.lang li:not(:first-child) span:hover {
    color: #01e7a3
}

ul.lang.opened:before {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: .3s;
    transition: .3s
}

ul.lang.opened li:not(:first-child) {
    width: 77px;
    height: 40px;
    -webkit-transition: .3s;
    transition: .3s
}

ul.lang.closed:before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .3s;
    transition: .3s
}

ul.lang.closed li:not(:first-child) {
    width: 77px;
    height: 0;
    -webkit-transition: .3s;
    transition: .3s
}

.alarm {
    width: 280px;
    height: auto;
    box-sizing: border-box;
    position: absolute;
    top: 197px;
    left: 600px
}

.alarm .icon {
    display: flex;
    align-items: center;
    margin-bottom: 14px
}

.alarm .title {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px !important
}

.alarm .title > span {
    color: #fce12a;
    font-size: 15px;
    line-height: 15px;
    display: inline-block;
    background-color: rgba(0, 0, 0, .36);
    border: 0 solid #f30;
    padding: 8px 13px
}

.alarm .descr {
    font-family: Roboto-Regular;
    font-size: 14px;
    line-height: 20px;
    padding: 23px;
    border: 3px solid #01e7a3
}

.alarm .descr > h1, .alarm .descr > h2, .alarm .descr > h3 {
    margin: 0 0 4px;
    font-family: ProximaNovaExCn-Semibold;
    font-size: 24px;
    line-height: 32px;
    text-align: left
}

.call_to_action {
    width: 725px;
    height: 140px;
    box-sizing: border-box;
    margin: 53px auto 0;
    position: relative;
    background-image: url(/web/img/light_appstore.png);
    background-repeat: no-repeat;
    background-size: 725px 140px;
    background-position: top center;
    border: 0 solid #f30
}

.call_to_action .coming_soon, .call_to_action .download {
    width: 231px;
    height: 66px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin: 0 auto;
    background-color: #01e7a3;
    font-family: ProximaNova-Bold;
    font-size: 25px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    text-transform: uppercase
}

.call_to_action .download {
    -webkit-transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55)
}

#menu .link, .call_to_action .download:hover {
    -webkit-transition: .3s cubic-bezier(.68, -.55, .265, 1.55)
}

.call_to_action .download:hover {
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    font-size: 30px
}

.call_to_action a.app_store {
    width: 223px;
    height: 66px;
    margin: 0 auto
}

.call_to_action ul.os {
    width: 100%;
    padding: 0;
    list-style: none;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0 solid #f30
}

.call_to_action ul.os li .mac, .call_to_action ul.os li .win {
    width: 25px;
    height: 30px;
    -moz-box-sizing: border-box;
    display: block;
    background-repeat: no-repeat
}

.call_to_action ul.os li {
    font-family: ProximaNova-Regular;
    font-size: 18px;
    color: silver;
    border: 0 solid #f30
}

.call_to_action ul.os li:first-child {
    padding-right: 19px
}

.call_to_action ul.os li.and {
    font-family: ProximaNova-Light;
    font-style: italic;
    font-size: 14px;
    padding-left: 13px;
    padding-right: 13px
}

.call_to_action ul.os li .win {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-image: url(/web/img/win.png);
    background-position: 0 4px;
    background-size: 25px 25px;
    opacity: .5
}

.call_to_action ul.os li .win:hover {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s
}

.call_to_action ul.os li .mac {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-image: url(/web/img/mac.png);
    background-position: 0 0;
    background-size: 25px 30px;
    opacity: .5
}

.caption, .caption > div {
    -moz-box-sizing: border-box
}

.call_to_action ul.os li .mac:hover {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s
}

.caption {
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: table;
    position: relative;
    z-index: 40;
    min-height: 19px;
    font-family: ProximaNovaExCn-Light;
    font-size: 22px;
    line-height: 22px;
    text-transform: uppercase;
    padding-top: 15px
}

#menu, .caption > div {
    -webkit-box-sizing: border-box
}

.caption > div {
    display: table-cell;
    box-sizing: border-box;
    border: 0 solid #f30
}

.caption > div.text {
    width: 1px;
    height: auto;
    white-space: nowrap;
    padding-right: 19px;
    letter-spacing: 1.5px
}

.caption > div.line {
    background-image: url(/web/img/caption_line.png);
    background-position: left center;
    background-repeat: repeat-x
}

.caption > div.space {
    width: 61px;
    height: auto
}

#menu {
    position: fixed;
    top: 130px;
    left: 20px;
    z-index: 100;
    width: 200px;
    height: auto;
    -webkit-transition: top .5s cubic-bezier(.68, -.55, .265, 1.55);
    transition: top .5s cubic-bezier(.68, -.55, .265, 1.55);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    padding: 18px;
    background-color: rgba(0, 0, 0, .5)
}

#menu .user, #menu a.main {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#menu.min {
    top: 90px;
    -webkit-transition: top .5s cubic-bezier(.68, -.55, .265, 1.55);
    transition: top .5s cubic-bezier(.68, -.55, .265, 1.55)
}

#menu a.main {
    width: 162px;
    height: 70px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: -70px;
    background: url(/web/img/MoB_logo_white.png) no-repeat;
    background-size: 162px;
}

#menu .user {
    box-sizing: border-box;
    position: relative;
    margin-bottom: 18px;
    border: 0 solid #f30
}

#menu .socials, #menu .user .avatar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#menu .user .avatar, #menu .user .avatar .clan, #menu .user .avatar .player {
    position: absolute;
    width: 40px;
    height: 40px
}

#menu .user .avatar {
    box-sizing: border-box;
    top: 5px;
    left: 0
}

#menu .user .avatar .clan {
    background: center center no-repeat;
    background-size: 40px 40px
}

#menu .user .avatar .player {
    background: url(/web/img/player_avatar.png) center center no-repeat;
    background-size: 26px 26px
}

#menu .user .avatar .player.big {
    background-size: 40px 40px
}

#menu .user .name {
    font-family: ProximaNova-Bold;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 18px;
    margin-left: 50px;
    padding-top: 5px;
    word-wrap: break-word
}

#menu .join_us > span, #menu .user a {
    font-family: Roboto-Regular;
    font-size: 14px
}

#menu .user a {
    line-height: 24px;
    color: #c3c3c3
}

#menu .user a:hover {
    color: #01e7a3
}

#menu .join_us > span {
    display: block;
    padding-top: 18px;
    padding-bottom: 12px;
    border: 0
}

#menu .socials {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 0 solid #f30
}

#menu .socials li {
    width: 35px;
    height: 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 4px
}

#menu .socials li a {
    width: 100%;
    height: 100%;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #fff;
    opacity: .5;
    display: block;
    border: 1px solid transparent
}

#menu .coming_soon, #menu .link, #menu nav a.active:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box
}

#menu .socials li a:hover {
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1;
    background-color: #26e6a5
}

#menu .socials li:last-child {
    margin-right: 0
}

#menu .socials li img {
    display: block;
    border: 0 solid #f30
}

#menu .socials li.fb img {
    width: 12px;
    height: 24px;
    margin-top: 6px;
    margin-left: 12px
}

#menu .socials li.vk img {
    width: 12px;
    height: 24px;
    margin-top: 5px;
    margin-left: 12px
}

#menu .socials li.tw img {
    width: 25px;
    height: 18px;
    margin-top: 8.5px;
    margin-left: 6px
}

#menu .socials li.yt img {
    width: 20px;
    height: 25px;
    margin-top: 4.5px;
    margin-left: 8.5px
}

#menu .socials li.ig img {
    width: 22px;
    height: 22px;
    margin-top: 6.5px;
    margin-left: 7px
}

#menu .coming_soon, #menu .link, #menu a.app_store {
    width: 100%;
    height: 41px;
    margin: 0 auto
}

#menu .coming_soon, #menu .link {
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-clip: padding-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #01e7a3;
    font-family: ProximaNova-Bold;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: .5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    border: 0 solid #fff
}

#download .content .block .title, #menu nav a {
    text-transform: uppercase;
    letter-spacing: 1.5px
}

#menu .link {
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    cursor: pointer
}

#menu .link:hover {
    -webkit-transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
    font-size: 18px
}

#menu nav {
    border-top: 1px solid rgba(255, 255, 255, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    margin-top: 18px
}

#menu nav a {
    -webkit-transition: color .3s;
    transition: color .3s;
    position: relative;
    display: block;
    font-family: ProximaNovaExCn-Light;
    font-size: 28px;
    line-height: 28px;
    margin-top: 17px;
    color: #fff
}

#download .flex, #menu ul.os {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    justify-content: center
}

#menu nav a:last-child {
    margin-bottom: 17px
}

#menu nav a:hover {
    -webkit-transition: color .3s;
    transition: color .3s;
    color: #01e7a3
}

#menu nav a:hover:not(.active):after, #menu nav a:hover:not(.active):before {
    font-size: 28px;
    line-height: 28px;
    content: attr(data-text);
    position: absolute;
    top: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    font-family: ProximaNovaExCn-Light
}

#menu nav a:hover:not(.active):after {
    left: 2px;
    text-shadow: -1px 0 red;
    animation: noise-anim 2s infinite linear alternate-reverse
}

#menu nav a:hover:not(.active):before {
    left: -2px;
    text-shadow: 1px 0 #00f;
    animation: noise-anim-2 3s infinite linear alternate-reverse
}

#menu nav a.active:after, #menu nav a.active:before {
    background-color: #01e7a3;
    content: "";
    position: absolute
}

#menu nav a.disabled {
    color: rgba(255, 255, 255, .4)
}

#menu nav a.active, .glitch {
    color: #01e7a3
}

#menu nav a.active:before {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-clip: padding-box;
    top: 9px;
    left: -23px
}

#menu ul.os, #menu ul.os li, #preload, .slick-dots li {
    border: 0 solid #f30
}

#menu nav a.active:after {
    width: 26px;
    height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 13px;
    left: -49px
}

#menu ul.os {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center
}

#menu ul.os li .mac, #menu ul.os li .win {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

#menu ul.os li {
    font-family: Roboto-Regular;
    font-size: 14px;
    line-height: 14px;
    color: silver
}

#menu ul.os li:first-child {
    padding-right: 11px
}

#menu ul.os li .win {
    width: 17px;
    height: 18px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-image: url(/web/img/win.svg);
    opacity: .5
}

#menu ul.os li .win:hover {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s
}

#menu ul.os li.and {
    font-size: 1px;
    padding-right: 13px
}

#menu ul.os li .mac {
    width: 16px;
    height: 20px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    background-image: url(/web/img/mac.svg);
    opacity: .5
}

#preload, .slick-dots {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#menu ul.os li .mac:hover {
    opacity: 1;
    -webkit-transition: .3s;
    transition: .3s
}

.glitch {
    font-size: 24px;
    position: relative;
    width: 400px;
    margin: 0 auto
}

.glitch:after, .glitch:before {
    content: attr(data-text);
    position: absolute;
    color: #01e7a3;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    top: 0
}

.glitch:after {
    left: 2px;
    text-shadow: -1px 0 red;
    animation: noise-anim 2s infinite linear alternate-reverse
}

.glitch:before {
    left: -2px;
    text-shadow: 1px 0 #01e7a3;
    animation: noise-anim-2 3s infinite linear alternate-reverse
}

@keyframes noise-anim {
    0% {
        clip: rect(47px, 9999px, 95px, 0)
    }
    5% {
        clip: rect(37px, 9999px, 17px, 0)
    }
    10% {
        clip: rect(89px, 9999px, 79px, 0)
    }
    15.0% {
        clip: rect(66px, 9999px, 31px, 0)
    }
    20% {
        clip: rect(77px, 9999px, 56px, 0)
    }
    25% {
        clip: rect(51px, 9999px, 6px, 0)
    }
    30.0% {
        clip: rect(63px, 9999px, 72px, 0)
    }
    35% {
        clip: rect(72px, 9999px, 2px, 0)
    }
    40% {
        clip: rect(42px, 9999px, 71px, 0)
    }
    45% {
        clip: rect(44px, 9999px, 74px, 0)
    }
    50% {
        clip: rect(9px, 9999px, 5px, 0)
    }
    55.0% {
        clip: rect(3px, 9999px, 29px, 0)
    }
    60.0% {
        clip: rect(50px, 9999px, 69px, 0)
    }
    65% {
        clip: rect(39px, 9999px, 91px, 0)
    }
    70% {
        clip: rect(87px, 9999px, 96px, 0)
    }
    75% {
        clip: rect(19px, 9999px, 58px, 0)
    }
    80% {
        clip: rect(58px, 9999px, 64px, 0)
    }
    85.0% {
        clip: rect(100px, 9999px, 69px, 0)
    }
    90% {
        clip: rect(7px, 9999px, 20px, 0)
    }
    95% {
        clip: rect(84px, 9999px, 11px, 0)
    }
    100% {
        clip: rect(84px, 9999px, 59px, 0)
    }
}

@keyframes noise-anim-2 {
    0% {
        clip: rect(21px, 9999px, 84px, 0)
    }
    5% {
        clip: rect(13px, 9999px, 26px, 0)
    }
    10% {
        clip: rect(56px, 9999px, 44px, 0)
    }
    15.0% {
        clip: rect(42px, 9999px, 74px, 0)
    }
    20% {
        clip: rect(20px, 9999px, 54px, 0)
    }
    25% {
        clip: rect(22px, 9999px, 51px, 0)
    }
    30.0% {
        clip: rect(79px, 9999px, 45px, 0)
    }
    35% {
        clip: rect(21px, 9999px, 4px, 0)
    }
    40% {
        clip: rect(51px, 9999px, 16px, 0)
    }
    45% {
        clip: rect(30px, 9999px, 44px, 0)
    }
    50% {
        clip: rect(96px, 9999px, 28px, 0)
    }
    55.0% {
        clip: rect(59px, 9999px, 71px, 0)
    }
    60.0% {
        clip: rect(21px, 9999px, 84px, 0)
    }
    65% {
        clip: rect(47px, 9999px, 73px, 0)
    }
    70% {
        clip: rect(49px, 9999px, 31px, 0)
    }
    75% {
        clip: rect(8px, 9999px, 99px, 0)
    }
    80% {
        clip: rect(72px, 9999px, 43px, 0)
    }
    85.0% {
        clip: rect(1px, 9999px, 87px, 0)
    }
    90% {
        clip: rect(91px, 9999px, 30px, 0)
    }
    95% {
        clip: rect(99px, 9999px, 72px, 0)
    }
    100% {
        clip: rect(25px, 9999px, 64px, 0)
    }
}

#preload {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-image: url(/web/img/preload.gif);
    background-position: center center;
    background-size: 150px 115px;
    background-repeat: no-repeat;
    background-color: #000
}

.slick-dots {
    box-sizing: border-box
}

.slick-dots li, .view_video {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-repeat: no-repeat
}

.slick-dots li {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-image: url(/web/img/cross.svg);
    background-position: 0 0;
    background-size: 100% 100%
}

.slick-dots li button, .view_video, .view_video .player, .view_video .player iframe {
    width: 100%;
    height: 100%
}

#download, .youtube_video {
    display: none
}

.slick-dots li:last-child {
    margin-right: 0
}

.slick-dots li.slick-active {
    background-image: none;
    background-color: #01e7a3;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.slick-dots li button {
    opacity: 0
}

.view_video {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
    cursor: default;
    background-color: rgba(0, 0, 0, .5);
    background-image: url(/web/img/loading.gif);
    background-position: center center;
    background-size: 40px 40px;
    border: 0 solid #f30
}

.view_video .close, .view_video .player {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 0 solid #f30
}

.view_video .player {
    box-sizing: border-box;
    position: relative;
    padding: 100px;
    z-index: 300
}

.view_video .close {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    top: 35px;
    right: 35px;
    z-index: 310;
    cursor: pointer;
    opacity: .5;
    background-image: url(/web/img/cross.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

#download, #download .flex {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 100%
}

.view_video .close:hover {
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1
}

#download {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300
}

#download .flex {
    box-sizing: border-box;
    display: flex;
    align-items: center
}

#download .bg, #download .content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#download .bg {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 310;
    background-color: rgba(0, 0, 0, .7)
}

#download .content {
    width: 924px;
    height: 399px;
    box-sizing: border-box;
    -webkit-transition: margin .3s;
    transition: margin .3s;
    z-index: 320;
    position: relative;
    background-color: #151b20;
    background-image: url(/web/img/download_bg.jpg)
}

#download .content .close, #download .content .logo {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#download .content.active {
    -webkit-transition: margin .3s;
    transition: margin .3s;
    margin: 0
}

#download .content .close {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    top: 0;
    right: -51px;
    cursor: pointer;
    z-index: 330;
    background-image: url(/web/img/cross.svg);
    opacity: .5
}

#download .content .close:hover {
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1
}

#download .content .logo {
    width: 161px;
    height: 58px;
    box-sizing: border-box;
    background: url(/web/img/MoB_logo_white.png) no-repeat;
    background-size: 161px;
    position: absolute;
    top: -90px;
    left: 40px
}

#download .content .block .line, #download .content .icon {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#download .content .icon {
    width: 125px;
    height: 125px;
    box-sizing: border-box;
    background-image: url(/web/img/icon.png);
    position: absolute;
    top: -39px;
    left: 60px
}

#download .content .block {
    margin-top: 90px;
    margin-left: 83px;
    margin-right: 83px
}

#download .content .block .title {
    font-family: ProximaNovaExCn-Light;
    font-size: 40px;
    line-height: 40px
}

#download .content .block .txt {
    font-family: ProximaNova-Regular;
    font-size: 20px;
    line-height: 20px;
    margin-top: 10px
}

#download .content .block .line {
    width: 100%;
    height: 1px;
    box-sizing: border-box;
    margin-bottom: 22px;
    background-color: rgba(255, 255, 255, .5)
}

.likebox, a.app_store {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

#download .content .block .copyright {
    font-family: Arial;
    font-size: 12px;
    color: #a8a8a8
}

#download .content .block .flex-line {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 45px
}

#download .content .block .button {
    margin-right: 20px
}

#download a.app_store {
    width: 183px;
    height: 54px
}

#download a.win_store {
    width: 154px;
    height: 54px
}

.likebox {
    width: 200px;
    height: auto;
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 20px);
    left: 0
}

a.app_store {
    box-sizing: border-box;
    display: block;
    background: url(/web/img/appstore_en.svg) center center no-repeat;
    background-size: cover
}

a.app_store.ru {
    background-image: url(/web/img/appstore_ru.svg)
}

a.win_store {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    background: url(/web/img/winstore_en.png) center center no-repeat;
    background-size: cover
}

a.win_store.ru {
    background-image: url(/web/img/winstore_ru.png)
}

#download a.gp_store {
    width: 183px;
    height: 82px;
}

a.gp_store {
    box-sizing: border-box;
    display: block;
    background: url(/web/img/gp_en.png) center center no-repeat;
    background-size: cover;
    margin: -14px 0;
}

a.gp_store.ru {
    box-sizing: border-box;
    display: block;
    background: url(/web/img/gp_ru.png) center center no-repeat;
    background-size: cover;
    margin: -14px 0;
}