@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Regular.eot');
    src: url('../fonts/TTSquaresCondensed-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Regular.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Italic.eot');
    src: url('../fonts/TTSquaresCondensed-Italic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Italic.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Thin.eot');
    src: url('../fonts/TTSquaresCondensed-Thin.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Thin.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-ThinItalic.eot');
    src: url('../fonts/TTSquaresCondensed-ThinItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-ThinItalic.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Light.eot');
    src: url('../fonts/TTSquaresCondensed-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Light.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-LightItalic.eot');
    src: url('../fonts/TTSquaresCondensed-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-LightItalic.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Bold.eot');
    src: url('../fonts/TTSquaresCondensed-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Bold.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-BoldItalic.eot');
    src: url('../fonts/TTSquaresCondensed-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-BoldItalic.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-Black.eot');
    src: url('../fonts/TTSquaresCondensed-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-Black.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    }
@font-face{
    font-family: 'TTSquaresCondensed';
    src: url('../fonts/TTSquaresCondensed-BlackItalic.eot');
    src: url('../fonts/TTSquaresCondensed-BlackItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/TTSquaresCondensed-BlackItalic.woff') format('woff'),
    url('../fonts/TTSquaresCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    }
/*Fontello icons*/
@font-face{
    font-family: 'fontello';
    src: url('../fonts/fontello.eot?60480236');
    src: url('../fonts/fontello.eot?60480236#iefix') format('embedded-opentype'), url('../fonts/fontello.woff2?60480236') format('woff2'), url('../fonts/fontello.woff?60480236') format('woff'), url('../fonts/fontello.ttf?60480236') format('truetype'), url('../fonts/fontello.svg?60480236#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
    }
*[class^="icon-"], [class*="icon-"]{
    position: relative;
    padding-left: 37px;
    }
.icon-location{
    padding-left: 24px;
    }
[class^="icon-"]:before, [class*="icon-"]:before, .social-links a:before, .langs .current:after, .video-box:before, .play-btn:after, .close-popup:after,.share-links .social-likes__button:before{
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    color: #0fa38e;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
strong, b{
    font-weight: 700;
    }
em, i{
    font-style: italic;
    }
sup, sub{
    position: relative;
    top: -0.6em;
    font-size: 75% !important;
    line-height: 1em !important;
    }
sub{
    top: auto;
    bottom: -0.3em;
    }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section, main{
    display: block;
    }
/*_____________________________________________*/
html{
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #081c2d;
    }
body{
    height: 100%;
    font-family: 'TTSquaresCondensed';
    font-weight: 400;
    font-size: 16px;
    line-height: 1.375em;
    letter-spacing: 0.025em;
    color: #fff;
    min-width: 320px;
    }
.hide-scroll{
    overflow: hidden !important;
    }
/*Common styles*/
*, *:before, *:after{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-focus-ring-color: rgba(0, 0, 0, 0);
    outline: none !important;
    }
h1, h2, h3, h4, h5, h6, .h2, .h3, .h4{
    position: relative;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    }
h1{

    }
h1, .h1, h2, .h2{
    font-size: 50px;
    line-height: 1.2em;
    letter-spacing: -.025em;
    margin: 50px 0 20px;
    }
h3, .h3{
    font-size: 30px;
    line-height: 1.4em;
    margin: 50px 0 30px;
    }
h4{
    font-weight: 400;
    font-size: 22px;
    line-height: 1.425em;
    margin: 50px 0 30px;
    }
h5{

    }
h6{

    }
.thin{
    font-weight: 100;
    }
h1 .small, h2 .small{
    display: block;
    font-size: 20px;
    line-height: 1.3em;
    letter-spacing: .32em;
    }
h1 br, h2 br{
    line-height: 0;
    }
ol, ul{
    list-style: none;
    margin: 24px 0;
    }
ul li, ol li{
    position: relative;
    padding: 0 0 0 24px;
    margin-bottom: 24px;
    }
ol{
    counter-reset: list1;
    list-style: none;
    }
ul ul, ol ol{
    margin: 12px 0;
    }
ol > li{
    background: none;
    }
ol > li:before{
    counter-increment: list1;
    content: counter(list1) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #18c2aa;
    }
ol ol{
    counter-reset: list2;
    }
ol ol li{
    padding-left: 40px;
    }
ol ol li:before{
    counter-increment: list2;
    content: counter(list1) "." counter(list2) ". ";
    }
ul li p, ol li p{
    margin-bottom: 0;
    }
/*_______________________________*/
.scroll-tbl{
    margin: 50px 0 40px;
    position: relative;
    width: 100%;
    overflow-x: auto;
    }
.scroll-tbl table{
    margin: 0 auto;
    min-width: 700px;
    }
table{

    }
table th, table td{

    }
table th{

    }
table td{

    }
a{
    color: #0fa38e;
    text-decoration: none;
    outline: none !important;
    }
.no-touchevents a:hover{
    opacity: .7;
    }
.special-link{
    position: relative;
    z-index: 4;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.375em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding: 9px 24px 8px;
    min-width: 184px;
    border: 2px solid #3c759a;
    }
.no-touchevents .special-link:hover{
    opacity: .999;
    }
.no-touchevents.ie .special-link{
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	}
.no-touchevents.ie .special-link:hover{
	opacity: 1;
	color: #ffd500;
	border-color: #ffd500;
	}
@-moz-document url-prefix(){
    .special-link{
        padding: 8px 24px;
        }
    }
p{
    margin: 22px 0;
    }
blockquote{
    position: relative;
    display: block;
    margin: 34px 0 32px;
    }
img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 21px 0 31px;
    }
a img{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    }
img.left{
    margin: 10px 28px 20px 0;
    max-width: 50%;
    }
img.right{
    margin: 10px 0 20px 28px;
    max-width: 50%;
    }
p img.left, p img.right{
    margin-top: 11px;
    margin-bottom: 13px;
    }
small{
    font-size: 0.8em;
    }
hr{
    display: block;
    height: 0;
    padding: 0 0 1px;
    margin: 42px 0;
    border: none;
    background: #ebebeb;
    }
.time{
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 1em;
    color: #78cafe;
    margin: 0 0 7px;
    }
/*___________________________*/
/*Form styles*/
.form{
    position: relative;
    margin: 30px 0;
    font-size: 0;
    line-height: 1em;
    color: #8d9398;
    }
.form p{
    font-size: 14px;
    line-height: 1.33333333em;
    margin: 0 0 19px;
    }
.field{
    line-height: 1em;
    margin: 0 0 14px;
    }
.field-name{
    position: relative;
    z-index: 10;
    display: inline-block;
    vertical-align: top;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2em;
    color: #8d9398;
    margin: 0 0 -4px 26px;
    padding: 0 6px;
    background: #fff;
    }
.required .field-name:after{
    content: '*';
    }
.form-control{
    position: relative;
    z-index: 9;
    display: block;
    font-weight: 700;
    font-family: 'TTSquaresCondensed';
    font-size: 16px;
    color: #ffd500;
    line-height: 57px;
    width: 100%;
    height: 63px;
    margin: 0 0 6px;
    padding: 0 24px 2px;
    border: 2px solid #ffd500;
    background: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    text-overflow: ellipsis;
    }
textarea.form-control{
    display: block;
    line-height: 1.325em;
    padding: 11px 32px;
    width: 100%;
    height: 96px;
    min-height: 96px;
    max-width: 100%;
    min-width: 100%;
    resize: none;
    overflow: hidden;
    }
.form-control:focus, .error-field .form-control:focus{
    color: #ffd500;
    border-color: #ffd500;
    }
.error-field .form-control{
    color: #bd3340;
    border-color: #bd3340;
    }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
    opacity: 1;
    color: #ffd500;
    }
input::-moz-placeholder, textarea::-moz-placeholder{
    opacity: 1;
    color: #ffd500;
    }
input:-ms-input-placeholder, textarea:-ms-input-placeholder{
    opacity: 1;
    color: #ffd500;
    }

.error-field input::-webkit-input-placeholder, .error-field textarea::-webkit-input-placeholder{
    color: #bd3340;
    }
.error-field input::-moz-placeholder, .error-field textarea::-moz-placeholder{
    color: #bd3340;
    }
.error-field input:-ms-input-placeholder, .error-field textarea:-ms-input-placeholder{
    color: #bd3340;
    }


input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{
    opacity: 0 !important;
    }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{
    opacity: 0 !important;
    }
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{
    opacity: 0 !important;
    }
/*Btn*/
button{
    border: none;
    cursor: pointer;
    }
.btn{
    position: relative;
    z-index: 4;
    display: table;
    font-family: 'TTSquaresCondensed';
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3em;
    letter-spacing: .15em;
    color: #29142a;
    text-align: center;
    text-transform: uppercase;
    padding: 13px 20px 10px;
    min-width: 389px;
    max-width: 100%;
    margin: 27px auto;
    border: none !important;
    background: #ffd500;
    -webkit-box-shadow: 0 9px 29px 0 rgba(255, 213, 0, .32);
    box-shadow: 0 9px 29px 0 rgba(255, 213, 0, .32);
    outline: none !important;
    cursor: pointer;
    -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
.btn:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 3px;
    background: #ffd500;
    }
.btn.full-width{
    width: 100%;
    }
.btn.small{
    font-size: 12px;
    line-height: 1.345em;
    letter-spacing: .2em;
    padding: 10px 20px 6px;
    min-width: 185px;
    }
.btn.small:after{
    bottom: -5px;
    height: 2px;
    }
.btn::-moz-focus-inner{
    border: 0;
    }
.no-touchevents .btn:not(:disabled):hover{
    opacity: .999;
    }
.no-touchevents.ie .btn:not(:disabled):hover{
	opacity: 1;
	color: #fff;
	}
.btn:disabled{
    opacity: .6;
    cursor: default;
    }
/*Glitch btn*/
.not-ie .btn-glitch{
    transform: translateZ(0);
    }
.not-ie .btn-glitch.btn-glitch-active{
    -webkit-filter: url("#filter");
    filter: url("#filter");
    }
.not-ie .btn-glitch.btn-glitch-active:after{
    background-color: #ffd500;
    animation: colorshift-red 2.6s infinite;
    animation-timing-function: step-end;
    }
@keyframes colorshift-red{
    0%, 7%{
        background-color: #ffd500;
        }
    8%, 18%{
        background-color: transparent;
        }
    19%{
        background-color: #ffd500;
        }
    23%, 100%{
        background-color: #fad410;
        }
    }
.glitch-sprite{
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    }
/*Appearance*/
.left{
    float: left;
    }
.right{
    float: right;
    }
.center{
    text-align: center;
    }
.uppercase{
    text-transform: uppercase;
    }
.no-indent{
    margin-bottom: 0 !important;
    }
.align-m, .align-b{
    display: table-cell;
    vertical-align: middle;
    }
.align-b{
    vertical-align: bottom;
    }
.no-wrap{
    white-space: nowrap;
    }
/*Independent*/
.container{
    position: relative;
    z-index: 2;
    max-width: 1258px;
    padding: 0 24px;
    margin: 0 auto;
    }
.container:after{
    content: '';
    display: table;
    width: 0;
    height: 0;
    clear: both;
    }
/*================================================================================
								STRUCTURE
================================================================================*/
#all{
    position: relative;
    z-index: 1;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    overflow: hidden;
    background: #002c4a;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    }
#all.bottom-bg-position{
    background-position: 50% 100%;
    }
.index-page #all{
    z-index: 3;
    background: #0c1218;
    }
.page-loaded.index-page #all{
    z-index: 1;
    }
.news-page #all{
    background-color: #002c47;
    background-size: 100% auto;
    }
.error-page #all{
    background-position: 50% 50%;
    }
.index-page #all:after{
    content: '';
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000 url("../i/logo-preloader.gif") no-repeat 50% 50%/500px 500px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.touchevents #all:after{
    display: none;
    }
.page-loaded #all:after{
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    }
#indent{
    clear: both;
    }
/*Scheme*/
.scheme-overlay{
    position: absolute;
    z-index: 1;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    }
.scheme-overlay .scheme-bg{
    position: absolute;
    left: -480px;
    top: 10px;
    width: 1346px;
    height: 749px;
    margin-left: 15%;
    background-position: 0 0;
    background-size: 100% auto;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: .1;
    }
/*================================HEADER====================================*/
#header{
    position: fixed;
    z-index: 800;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    padding: 29px 0 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    }
#header.sticky{
    height: 62px;
    padding: 13px 0 0;
    background: rgba(0, 0, 0, .4);
    }
#logo{
    float: left;
    width: 241px;
    height: 17px;
    margin: 9px 0 0;
    background: url("../i/logo.svg") no-repeat 0 0/100% auto;
    }
#nav-box{
    float: right;
    margin: 10px 0 0;
    }
#nav-box .sub-box{
    float: left;
    }
#nav-box .align-m{
    float: left;
    display: block;
    }
#nav{
    float: left;
    }
#nav ul{
    float: left;
    margin: 0;
    }
#nav li{
    float: left;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.35em;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 0 0 0 84px;
    padding: 0;
    background: none;
    }
#nav li:first-child{
    margin-left: 0;
    }
#nav a{
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    color: #fff;
    }
#nav .active a{
    color: #ffd500;
    }
.no-touchevents #nav a:hover{
    opacity: 1;
    }
.no-touchevents #nav a span{
    display: block;
    }
.no-touchevents #nav a:hover span{
    -webkit-transform: translate3d(0, -110%, 0);
    transform: translate3d(0, -110%, 0);
    }
.no-touchevents #nav a:after{
    content: attr(data-hover);
    position: absolute;
    left: 0;
    top: 0;
    color: #ffd500;
    -webkit-transform: translate3d(0, 110%, 0);
    transform: translate3d(0, 110%, 0);
    }
#nav .active a:after{
    color: #fff;
    }
.no-touchevents #nav a:hover:after{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
#header .btn{
    float: right;
    margin: 0 0 0 78px;
    }
/*Open nav*/
#js-open-nav{
    display: none;
    position: fixed;
    z-index: 1001;
    right: 24px;
    top: 22px;
    width: 40px;
    height: 20px;
    cursor: pointer;
    }
#js-open-nav span{
    display: block;
    position: absolute;
    height: 4px;
    width: 20px;
    background: #fff;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
#js-open-nav span:nth-child(even){
    left: 50%;
    }
#js-open-nav span:nth-child(odd){
    left: 0;
    }
#js-open-nav span:nth-child(1), #js-open-nav span:nth-child(2){
    top: 0;
    }
#js-open-nav span:nth-child(3), #js-open-nav span:nth-child(4){
    top: 7px;
    }
#js-open-nav span:nth-child(5), #js-open-nav span:nth-child(6){
    top: 14px;
    }
#js-open-nav.active span:nth-child(1), #js-open-nav.active span:nth-child(6){
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    }
#js-open-nav.active span:nth-child(2), #js-open-nav.active span:nth-child(5){
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }
#js-open-nav.active span:nth-child(1){
    left: 5px;
    top: 0;
    }
#js-open-nav.active span:nth-child(2){
    left: calc(50% - 5px);
    top: 0;
    }
#js-open-nav.active span:nth-child(3){
    left: -50%;
    opacity: 0;
    }
#js-open-nav.active span:nth-child(4){
    left: 100%;
    opacity: 0;
    }
#js-open-nav.active span:nth-child(5){
    left: 5px;
    top: 10px;
    }
#js-open-nav.active span:nth-child(6){
    left: calc(50% - 5px);
    top: 10px;
    }
#js-open-nav span:nth-child(1):before{
    content: '';
    position: absolute;
    left: -3px;
    top: 0;
    height: 4px;
    width: 10px;
    background: #fff;
    -webkit-transform: skewX(45deg);
    transform: skewX(45deg);
    -webkit-transition: 0s linear .1s;
    transition: 0s linear .1s;
    }
#js-open-nav.active span:nth-child(1):before{
    opacity: 0;
    -webkit-transition: none;
    transition: none;
    }
#header .social-links, #header .langs{
    display: none;
    }
/*Sub nav*/
#sub-nav{
    position: fixed;
    z-index: 9999;
    top: 50%;
    right: 55px;
    text-align: right;
    margin: -197px 0 0;
    opacity: 0;
    }
.touchevents #sub-nav, .page-loaded #sub-nav{
    opacity: 1;
    }
#sub-nav:before, #sub-nav:after{
    content: 'N';
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 1em;
    color: #fff;
    margin: 0 -2px 12px 0;
    }
#sub-nav:after{
    content: 'S';
    margin: 10px -2px 0 0;
    }
#sub-nav ul{
    position: relative;
    margin: 0;
    padding: 5px 0 30px;
    }
#sub-nav ul:before{
    content: '';
    position: absolute;
    top: 0;
    right: 1px;
    bottom: 0;
    width: 2px;
    background: url("../i/sub-nav-dot.gif") repeat 0 100%;
    background-position: 0 0;
    }
#sub-nav li{
    font-weight: 700;
    font-size: 14px;
    line-height: 1em;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 22px;
    background: none;
    border: 1px solid transparent;
    }
#sub-nav li:last-child{
    margin: 0;
    }
#sub-nav a{
    position: relative;
    display: block;
    color: #ffd500;
    opacity: 1 !important;
    height: 18px;
    width: 24px;
    }
#sub-nav li a.current{
    cursor: default;
    }
#sub-nav li a:before{
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    width: 14px;
    height: 2px;
    background: rgba(255, 255, 255, .2);
    }
#sub-nav li a.current:before{
    width: 26px;
    background: #fff;
    }
.no-touchevents #sub-nav li a:not(.current):hover:before{
    background: #fff;
    }
/*========================END OF HEADER========================*/
.combined-section{
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    }
/*Sections*/
.section{
    position: relative;
    z-index: 10;
    overflow: hidden;
    padding: 53px 0;
    }
.section.full-screen{
    padding: 0;
    }
.section .sub-box{
    display: table;
    table-layout: fixed;
    width: 100%;
    }
.section.full-screen .align-t, .section.full-screen .align-m, .section.full-screen .align-b{
    width: 100%;
    height: 100vh;
    padding: 30px 0;
    }
.section.full-screen .align-m{
    padding: 120px 0;
    }
.section.full-screen .align-b{
    padding: 120px 0 111px;
    }
.section .container > *:not(.tabs-nav):last-child{
    margin-bottom: 0 !important;
    }
.section .video-bg, .section .bg, .dots-overlay, .section .touch-bg{
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    }
.section .bg, .section .touch-bg{
    z-index: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    }
.dots-overlay{
    z-index: 2;
    background: url("../i/dots-bg.png") repeat 100% 100%;
    background-position: 0 -2px;
    }
.no-touchevents .section .touch-bg{
    display: none;
    }
.touchevents .section .video-bg{
    display: none;
    }
.section .video-bg .video{
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    }
.no-touchevents .section .hidden{
    opacity: 0;
    -webkit-transition: none  !important;
    transition: none !important;
    }
.section .container{
    z-index: 5;
    }
.section h2{
    margin-top: 0;
    }
.title-bg{
    display: table;
    margin: 0 auto 20px;
    vertical-align: top;
    text-align: center;
    }
.title-bg .sub-box{
    position: relative;
    display: inline-block;
    vertical-align: top;
    }
.title-bg .sub-box:before{
    content: '';
    position: absolute;
    z-index: -1;
    left: -62px;
    top: -17px;
    right: -62px;
    bottom: -11px;
    background: url("../i/title-bg.svg") repeat 100% 100%;
    background-position: 0 0;
    opacity: .2;
    }
.title-bg h1, .title-bg h2{
    margin: 0 !important;
    }
.section p.max-w, #main p.max-w{
    max-width: 542px;
    margin-left: auto;
    margin-right: auto;
    }
.separator{
    display: block;
    width: 253px;
    height: 5px;
    margin: 26px 0 39px;
    background: url("../i/separator.svg") no-repeat 0 0;
    }
/*Main screen*/
/*#main-screen.video-bg:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("../i/full-screen-bg1.png") no-repeat 50% 50%;
    background-size: cover;
    display: none;
    }*/
/*News section*/
#news-section{
    z-index: 11;
    padding: 64px 0;
    overflow: visible;
    }
#news-section .title-box{
    width: 356px;
    float: left;
    }
#news-section .title-box .separator{
    margin-bottom: 32px;
    }
#news-section .news-list-box{
    width: calc(100% - 356px);
    float: right;
    margin-top: -95px;
    }
#news-section .special-link-box{
    display: none;
    }
.news-list.swiper-container{
    padding: 0 40px;
    margin: 0 -40px;
    }
.news-list .swiper-slide{
    text-align: left;
    padding-bottom: 100px;
    }
.news-list .item{
    position: relative;
    display: block;
    width: 257px;
    height: 314px;
    overflow: hidden;
    -webkit-box-shadow: 0 45px 54px 0 rgba(0, 21, 41, .32);
    box-shadow: 0 45px 54px 0 rgba(0, 21, 41, .32);
    }
.no-touchevents.index-page .news-list .item{
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
.index-page .visible .news-list .item{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .5s ease .5s;
    transition: all .5s ease .5s;
    }
.visible .news-list .swiper-slide:nth-child(2) .item{
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
    }
.visible .news-list .swiper-slide:nth-child(3) .item{
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
    }
.visible .news-list .swiper-slide:nth-child(4) .item{
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
    }
.no-touchevents .news-list .item:hover{
    opacity: 1;
    }
.news-list .swiper-pagination{
    margin: -50px 0 0;
    }
.news-list .item img{
    position: relative;
    z-index: -1;
    margin: 0;
    max-height: 314px;
    }
.news-list .item .info{
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    font-weight: 700;
    color: #fff;
    padding: 0 21px 24px;
    }
.no-touchevents .news-list .item:hover .time{
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.news-list .item .info p{
    font-size: 20px;
    line-height: 1.2em;
    margin: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.no-touchevents .news-list .item:hover .info{
    color: #27729a;
    }
.news-list .item .time, .no-touchevents .news-list .item:hover .time{
    color: #9bbacf;
    }
.news-list .item:before, .news-list .item:after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 254px;
    background: url("../i/news-gradient.png") repeat-x top;
    background-position: 0 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.news-list .item:after{
    opacity: 0;
    background-position: 0 100%;
    -webkit-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
    }
.no-touchevents .news-list .item:hover:before{
    opacity: 0;
    -webkit-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
    }
.no-touchevents .news-list .item:hover:after{
    opacity: 1;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.news-list .tags{
    position: absolute;
    z-index: 11;
    top: 13px;
    right: 10px;
    margin: 0;
    }
.news-list .tags .tag{
    color: #fff;
    border-color: #fff;
    }
/*City battle section*/
#city-battle-section{
    overflow: visible;
    padding: 0 0 130px;
    margin: -20px 0 0;
    }
#city-battle-section .video-placeholder{
    float: left;
    width: 45%;
    max-width: 494px;
    margin: 12px 0 0;
    -webkit-box-shadow: 0 45px 54px 0 rgba(0, 21, 41, .32);
    box-shadow: 0 45px 54px 0 rgba(0, 21, 41, .32);
    }
.no-touchevents #city-battle-section .video-placeholder{
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
.no-touchevents #city-battle-section.visible .video-placeholder{
    opacity: 0;
    -webkit-animation: bounceInBattle .7s linear .2s forwards;
    animation: bounceInBattle .7s linear .2s forwards;
    }
#city-battle-section .info{
    float: right;
    padding-left: 40px;
    width: 55%;
    max-width: 630px;
    text-align: left;
    }
#city-battle-section .btn{
    margin: 42px 0 0;
    }
#city-battle-section .character-bg{
    position: absolute;
    margin: 0;
    right: 0;
    bottom: -30px;
    }
.no-touchevents #city-battle-section .character-bg{
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
.no-touchevents #city-battle-section.visible .character-bg{
    opacity: 0;
    -webkit-animation: bounceInBattle .9s linear .2s forwards;
    animation: bounceInBattle .9s linear .2s forwards;
    }
#city-battle-section .character-bg img{
    margin: 0;
    }
@-webkit-keyframes bounceInBattle{
    0%{
        opacity: 0;
        transform: translate3d(0, 70%, 0);
        }
    30%{
        opacity: 1;
        transform: translate3d(0, -20px, 0);
        }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0);
        }
    }
@keyframes bounceInBattle{
    0%{
        opacity: 0;
        transform: translate3d(0, 70%, 0);
        }
    30%{
        opacity: 1;
        transform: translate3d(0, -20px, 0);
        }
    100%{
        opacity: 1;
        transform: translate3d(0, 0, 0);
        }
    }
/*Earth section*/
#earth-section{
    padding: 0;
    z-index: 12;
    background: #00060c;
    }
#earth-section .align-m{
    height: 704px;
    padding: 50px 0;
    }
#earth-section .max-w{
    width: 510px;
    max-width: 50%;
    }
#earth-section .motion-blur > *:last-child{
    margin-bottom: 0;
    }
#earth-points{
    position: absolute;
    z-index: 20;
    width: 50%;
    top: 0;
    right: 0;
    height: 100%;
    }
#earth-points .point{
    position: absolute;
    top: 12.8%;
    left: 38.75%;
    font-weight: 100;
    font-style: italic;
    font-size: 16px;
    line-height: 1em;
    color: #76caff;
    }
.no-touchevents #earth-points .point{
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
    }
#earth-points .point:nth-child(2){
    top: 65.6%;
    left: 11%;
    }
#earth-points .point:nth-child(3){
    top: 67.1%;
    left: 63.9%;
    }
.visible #earth-points .point{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .4s ease .6s;
    transition: all .4s ease .6s;
    }
.no-touchevents .visible #earth-points .point:nth-child(2){
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
    }
.no-touchevents .visible #earth-points .point:nth-child(3){
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
    }
#earth-points .icon{
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: bottom;
    line-height: 0;
    font-size: 0;
    }
#earth-points .icon img{
    margin: 0;
    }
#earth-points .icon:after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -44px;
    width: 42px;
    height: 37px;
    margin: 0 0 0 -21px;
    background: url("../i/eart-point-hexagon.svg") no-repeat 0 0;
    }
#earth-points .info{
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 0 6px;
    }
#earth-points .count{
    display: block;
    font-weight: 700;
    font-size: 30px;
    line-height: 1em;
    margin: 0 0 -2px 0;
    }
#earth-points .city{
    display: block;
    font-weight: 700;
    font-size: 20px;
    line-height: 1em;
    text-transform: uppercase;
    color: #fff;
    margin: 1px 0 0;
    }
/*Choose role section*/
#choose-role-section{
    padding: 62px 0 53px;
    }
#choose-role-section .bg{
    background-position: 50% 100%;
    }
.other-classes .h2{
    margin: 0 0 50px;
    }
.characters-list.swiper-container{
    position: relative;
    z-index: 10 !important;
    font-size: 0;
    margin: -90px -55px 0;
    padding: 0 55px;
    }
.characters-list .swiper-slide{
    width: 257px;
    }
.characters-list .item{
    position: relative;
    z-index: 1;
    display: block;
    width: 257px;
    min-height: 419px;
    margin: 0 auto;
    padding: 120px 0 34px;
    text-align: center;
    color: #76caff;
    background: url("../i/character-bg.png") no-repeat 0 100%;
    }
.no-touchevents.index-page .characters-list .item{
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
.index-page .visible .characters-list .item{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .5s ease .5s;
    transition: all .5s ease .5s;
    }
.index-page .visible .characters-list .swiper-slide:nth-child(2) .item{
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
    }
.index-page .visible .characters-list .swiper-slide:nth-child(3) .item{
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
    }
.index-page .visible .characters-list .swiper-slide:nth-child(4) .item{
    -webkit-transition-delay: .8s;
    transition-delay: .8s;
    }
.no-touchevents .characters-list .item:hover{
    opacity: 1;
    }
.no-touchevents .characters-list .item:hover .h3{
    opacity: 1;
    color: #ffd500;
    }
.characters-list .item:after{
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    bottom: 0;
    height: 254px;
    background: url("../i/character-overlay.png") repeat-x bottom;
    }
.characters-list .character{
    position: relative;
    z-index: -1;
    font-size: 0;
    width: 330px;
    height: 450px;
    margin: 0 0 -80px -36px;
    opacity: .5;
    pointer-events: none;
    }
.touchevents .characters-list .character{
    opacity: 1;
    }
.no-touchevents .characters-list .item:hover .character{
    opacity: 1;
    }
.characters-list .character img{
    position: relative;
    max-width: none;
    margin: 0 auto;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    -webkit-animation: bounceOut .15s linear;
    animation: bounceOut .15s linear;
    }
.no-touchevents .characters-list .item:hover img{
    -webkit-animation: bounceIn .15s linear forwards;
    animation: bounceIn .15s linear forwards;
    }
.characters-list .item .h3{
    z-index: 5;
    }
@-webkit-keyframes bounceIn{
    0%{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        }
    100%{
        -webkit-transform: scale(1.06) translate3d(0, -10px, 0);
        }
    }
@keyframes bounceIn{
    0%{
        transform: scale(1) translate3d(0, 0, 0);
        }
    100%{
        transform: scale(1.06) translate3d(0, -10px, 0);
        }
    }
@-webkit-keyframes bounceOut{
    0%{
        -webkit-transform: scale(1.06) translate3d(0, -10px, 0);
        }
    100%{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        }
    }
@keyframes bounceOut{
    0%{
        transform: scale(1.06) translate3d(0, -10px, 0);
        }
    100%{
        transform: scale(1) translate3d(0, 0, 0);
        }
    }
/*Choose style section*/
#choose-style-section{
    padding: 0 0 38px;
    background: #00162a;
    }
#choose-style-section .over-all{
    position: absolute;
    left: 0;
    top: 51px;
    width: 100%;
    }
.choose-style-slider .swiper-slide{
    position: relative;
    height: 631px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    }
.choose-style-slider .swiper-slide:before{
    content: '';
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 252px;
    background: url("../i/choose-style-slider-gradient.png") repeat-x bottom;
    }
.choose-style-slider .swiper-slide:after{
    content: '';
    position: absolute;
    z-index: 10;
    left: 0;
    top: 72px;
    width: 2px;
    height: 570px;
    background: url("../i/choose-style-slider-separator.png") no-repeat 0 0;
    background-size: 2px 100%;
    }
.choose-style-slider .swiper-slide .scheme{
    position: absolute;
    z-index: 11;
    left: -616px;
    top: -80px;
    width: 1153px;
    height: 508px;
    background: url("../i/scheme-bg.svg") no-repeat 50% 0/100% auto;
    opacity: .2;
    }
.choose-style-slider .swiper-slide .scheme.view2{
    left: -238px;
    top: 95px;
    }
.choose-style-slider .swiper-slide .scheme.view3{
    left: -414px;
    top: -170px;
    }
.choose-style-slider .align-b{
    position: relative;
    z-index: 20;
    display: block;
    font-size: 0;
    text-align: center;
    height: 100%;
    padding: 0 16px 45px;
    }
.choose-style-slider .align-b:before{
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
    width: 0;
    margin: 0 -2px 0 0;
    }
.choose-style-slider .info{
    display: inline-block;
    vertical-align: bottom;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.375em;
    color: #205473;
    text-align: center;
    max-width: 290px;
    margin: 0;
    }
.no-touchevents .choose-style-slider .info{
    opacity: 0;
    -webkit-transform: translate3d(0, 130%, 0);
    transform: translate3d(0, 130%, 0);
    }
.no-touchevents .choose-style-slider .swiper-slide:nth-child(2) .info.visible{
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
    }
.no-touchevents .choose-style-slider .swiper-slide:nth-child(3) .visible.info{
    -webkit-transition-delay: .5s;
    transition-delay: .5s;
    }
.no-touchevents .choose-style-slider .info.visible{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .4s ease .3s;
    transition: all .4s ease .3s;
    }
.choose-style-slider .icon{
    display: block;
    margin: 0 auto 4px;
    max-height: 80px;
    height: 80px;
    }
.choose-style-slider h3{
    margin: 0 0 6px;
    color: #fff;
    }
.choose-style-slider p{
    margin: 0;
    }
#choose-style-section .swiper-pagination{
    margin-top: 13px;
    }
#choose-style-section .slide-btn{
    opacity: .3;
    }
.no-touchevents #choose-style-section .slide-btn:hover{
    opacity: 1;
    }
/*Media section*/
.tabs-box{
    margin: 27px 0;
    }
.tabs-box .tabs-nav{
    position: relative;
    max-width: 1210px;
    margin: 0 auto 58px;
    padding-bottom: 17px;
    border-bottom: 1px solid #76caff;
    }
.tabs-box .tabs-nav.ability-nav{
    margin-bottom: 34px;
    display: flex;
    justify-content: space-between;
    border-bottom-color: #27729a;
    }
.tabs-box .tabs-nav:after{
    content: '';
    display: table;
    width: 0;
    height: 0;
    clear: both;
    }
.tabs-box .tabs-nav.ability-nav:after{
    display: none;
    }
.tabs-box .tabs-nav .item{
    float: left;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    line-height: 1em;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    width: 33.33333333%;
    }
.tabs-box .tabs-nav.ability-nav .item{
    float: none;
    width: 113px;
    }
.tabs-box .tabs-nav a{
    opacity: 1 !important;
    color: #76caff;
    }
.tabs-box .tabs-nav .current a{
    color: #ffd500 !important;
    cursor: default;
    }
.tabs-box .tabs-nav.ability-nav a{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    color: #fff;
    padding-bottom: 22px;
    white-space: nowrap;
    }
.tabs-box .tabs-nav.ability-nav .ability-title{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    }
.no-touchevents .tabs-box .tabs-nav .item:not(.current) a:hover{
    color: #ffd500;
    }
.tabs-nav .current .link-circle{
    cursor: default;
    }
.tabs-box .tabs-nav .line{
    position: absolute;
    height: 4px;
    bottom: -4px;
    left: 0;
    background: #ffd500;
    -webkit-transition: all .65s ease;
    transition: all .65s ease;
    }
.tabs-box .tabs-content{
    position: relative;
    font-size: 16px;
    line-height: 1.375em;
    overflow: hidden;
    }
#media-section .tabs-box .tabs-content{
    max-height: 540px;
    }
.tabs-box .tab{
    position: relative;
    z-index: 10;
    opacity: 0;
    }
.tabs-box.init .tab{
    opacity: 1;
    }
.tabs-box .tab.visible{
    display: block !important;
    }
.animate-tab{
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.visible .animate-tab.hidden{
    opacity: 0;
    }
.visible .animate-tab{
    opacity: 1;
    }
.tabs-box .tab p{
    margin: 0 0 22px;
    }
.tabs-box .tab p:last-child{
    margin: 0;
    }
.media-slider{
    z-index: 10;
    }
.media-slider .swiper-slide{
    position: relative;
    z-index: 1;
    width: 888px;
    max-width: 80%;
    border-bottom: 4px solid #458eba;
    overflow: hidden;
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    }
.media-slider .swiper-slide:not(.swiper-slide-active){
    -webkit-transform: scale(.975);
    transform: scale(.975);
    }
.media-slider .swiper-slide-active{
    border-color: #ffd500;
    opacity: 1;
    }
.media-slider .swiper-slide img{
    margin: 0;
    }
.media-slider .swiper-slide:not(.swiper-slide-active) img{
    opacity: .3;
    -webkit-filter: grayscale(70%);
    filter: grayscale(70%);
    filter: grayscale(.7);
    }
.media-slider .swiper-slide:not(.swiper-slide-active):before{
    content: '';
    position: absolute;
    z-index: 14;
    left: -1px;
    top: -1px;
    right: -1px;
    bottom: -1px;
    background: rgba(0, 98, 132, .58);
    mix-blend-mode: color;
    }
.media-slider .swiper-slide:after{
    content: '';
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -48px;
    width: 96px;
    height: 5px;
    background: url("../i/media-slider-border.png") no-repeat 0 0;
    }
.media-slider .swiper-slide-active:after{
    background-position: 0 100%;
    }
.media-slider .video-box{
    padding-bottom: 52.25%;
    }
/*Defend cities section*/
#defend-cities-section{
    padding: 132px 0 160px;
    }
#defend-cities-section .dots-overlay{
    background: url("../i/defend-dots-bg.png") repeat 100% 100%;
    background-position: 0 -2px;
    }
#defend-cities-section p.max-w{
    max-width: 410px;
    }
#defend-cities-section .btn.btn-glitch{
    margin-top: 73px;
    }
#defend-cities-section .social-links .animate{
    display: inline-block;
    vertical-align: top;
    }
.no-touchevents #defend-cities-section .social-links .animate{
    opacity: 0;
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
    }
.no-touchevents #defend-cities-section.visible .social-links .animate:nth-child(2){
    -webkit-transition-delay: .875s;
    transition-delay: .875s;
    }
.no-touchevents #defend-cities-section.visible .social-links .animate:nth-child(3){
    -webkit-transition-delay: .95s;
    transition-delay: .95s;
    }
.no-touchevents #defend-cities-section.visible .social-links .animate{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: all .45s ease .8s;
    transition: all .45s ease .8s;
    }
#defend-cities-section .character-bg{
    position: absolute;
    z-index: 3;
    margin: 0;
    left: 0;
    bottom: -20px;
    max-width: 50%;
    }
.no-touchevents #defend-cities-section .character-bg{
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
    }
.no-touchevents #defend-cities-section.visible .character-bg{
    -webkit-animation: bounceInDefenCities .9s linear forwards;
    animation: bounceInDefenCities .9s linear forwards;
    }
#defend-cities-section .character-bg img{
    margin: 0;
    }
@-webkit-keyframes bounceInDefenCities{
    0%{
        transform: translate3d(0, 10%, 0);
        }
    30%{
        transform: translate3d(0, -20px, 0);
        }
    100%{
        transform: translate3d(0, 0, 0);
        }
    }
@keyframes bounceInDefenCities{
    0%{
        transform: translate3d(0, 10%, 0);
        }
    30%{
        transform: translate3d(0, -20px, 0);
        }
    100%{
        transform: translate3d(0, 0, 0);
        }
    }
#defend-cities-section .scheme-overlay .scheme-bg{
    left: 47%;
    top: 50%;
    width: 1306px;
    height: 726px;
    margin: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    opacity: .09;
    }
/*Preloader*/
.tabs-content .preloader{
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 65px;
    margin: -70px 0 0 -32px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    }
.tabs-content .preloader.visible{
    opacity: 1;
    visibility: visible;
    }
.preloader .link-circle-inner{
    -webkit-animation: rotate360 1s linear infinite;
    animation: rotate360 1s linear infinite;
    }
.preloader .link-circle-outer{
    -webkit-animation: rotateinvert360 1s linear infinite;
    animation: rotateinvert360 1s linear infinite;
    }
.preloader svg > *{
    fill: #ffd500;
    }
@-webkit-keyframes rotate360{
    from{
        -webkit-transform: rotate(0deg);
        }
    to{
        -webkit-transform: rotate(360deg);
        }
    }
@keyframes rotate360{
    from{
        transform: rotate(0deg);
        }
    to{
        transform: rotate(360deg);
        }
    }
@-webkit-keyframes rotateinvert360{
    from{
        -webkit-transform: rotate(0deg);
        }
    to{
        -webkit-transform: rotate(-360deg);
        }
    }
@keyframes rotateinvert360{
    from{
        transform: rotate(0deg);
        }
    to{
        transform: rotate(-360deg);
        }
    }
.rotating{
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    }
/*============================MAIN============================*/
#main{
    position: relative;
    z-index: 10;
    padding: 137px 0 57px;
    }
#main.has-aside .page-title{
    float: left;
    width: 310px;
    }
#main.full-screen{
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 0;
    }
#main.full-screen .align-m{
    padding: 137px 0 57px;
    }
#main h1{
    margin-top: -13px;
    }
#main.has-aside .content{
    float: right;
    width: calc(100% - 310px);
    max-width: 854px;
    }
/*Content*/
#main h3{
    font-style: normal;
    color: #76caff;
    text-transform: none;
    margin: 0 0 7px;
    }
#main p{
    margin: 0 0 15px;
    }
#main .title-bg + p{
    margin-bottom: 22px;
    }
.article{
    margin: 0 0 20px;
    padding: 0 0 36px;
    border-bottom: 1px solid #205473;
    }
.article > *:last-child{
    margin-bottom: 0 !important;
    }
.article .footer{
    font-size: 0;
    text-align: right;
    margin: 26px 0 0;
    }
.article .footer .share-links{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    }
.article .footer .btn{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    }
/*News in brief*/
.news-in-brief{
    position: relative;
    z-index: 3;
    margin: 0 0 32px;
    }
.news-list + .news-in-brief{
    margin-top: -30px;
    }
.news-in-brief .item{
    color: #27729a;
    overflow: hidden;
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid #205473;
    -webkit-transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    }
.news-in-brief .item.hidden{
    opacity: 0;
    -webkit-transform: translate3d(0, 32px, 0);
    transform: translate3d(0, 32px, 0);
    }
.news-in-brief .img{
    display: block;
    width: 145px;
    overflow: hidden;
    float: left;
    }
.no-touchevents .news-in-brief .img:hover{
    opacity: 1;
    }
.news-in-brief .img img{
    margin: 0;
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    }
.no-touchevents .news-in-brief .img:hover img, .no-touchevents .news-in-brief .on-hover img{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    }
.news-in-brief .info{
    float: left;
    width: calc(100% - 145px);
    padding: 5px 0 0 22px;
    }
.news-in-brief .time{
    display: inline-block;
    vertical-align: top;
    color: #27729a;
    margin: 5px 4px 12px 0;
    }
.news-in-brief .tags{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    }
.news-in-brief .tags .tag{
    margin: 0 8px 8px 0;
    }
#main .news-in-brief .title{
    font-weight: 700;
    font-size: 20px;
    margin: 4px 0;
    }
.news-in-brief .title a{
    color: #fff;
    }
#main .news-in-brief p{
    margin: 0 0 14px;
    }
.no-touchevents .news-in-brief .title a:hover, .no-touchevents .news-in-brief .on-hover .title a{
    color: #ffd500;
    opacity: 1;
    }
#main .news-in-brief .info > *:last-child{
    margin-bottom: 10px;
    }
/*Other news*/
.other-news{
    margin: 28px 0 0;
    }
.other-news .news-list.swiper-container{
    margin-bottom: -66px;
    }
#main .other-news h3, .other-news h3{
    margin: 0 0 20px;
    }
/*Lazy load box*/
.lazy-load-box{
    text-align: center;
    margin: 44px 0 0;
    }
.lazy-load-box .message{
    display: none;
    margin: 0 !important;
    }
.lazy-load-box.finished .message{
    display: block;
    }
/*Main section*/
#main #choose-role-section{
    padding: 0;
    margin: -30px 0 0;
    }
/*Registration box*/
#registration-box{
    float: right;
    max-width: 390px;
    width: 100%;
    margin: 0 auto 30px;
    }
#registration-box .separator{
    margin: 26px 0 34px;
    }
#registration-box .form{
    margin: 30px 0 0;
    }
#registration-box .form .btn{
    margin: 23px 0 0;
    }
#registration-box .social-links{
    margin: 47px 0 0;
    }
#registration-box .submit-text{
    display: none;
    }
#registration-box .submit-text p{
    margin: 0 0 24px;
    }
/*Error page box*/
#error-page-box{
    max-width: 400px;
    text-align: center;
    margin: -32px auto 32px;
    }
#error-page-box .num{
    display: block;
    font-weight: 700;
    font-style: italic;
    font-size: 200px;
    line-height: 1em;
    margin: 0 0 31px;
    }
#error-page-box p{
    margin: 0 0 49px;
    }
#error-page-box .special-link{
    padding: 8px 38px;
    }
#error-page-box .social-links{
    margin: 82px 0 0;
    }
/*========================END OF MAIN=========================*/
/*Figure line*/
.figure-line{
    position: absolute;
    z-index: 20;
    left: 0;
    bottom: 0;
    width: 257px;
    height: 9px;
    }
@-moz-document url-prefix(){
    .characters-list .figure-line{
        height: 10px;
        }
    }
.no-touchevents .item:hover .figure-line > *, .no-touchevents .video-placeholder:hover .figure-line > *{
    fill: #ffd500;
    }
/*Tags*/
.tags{
    font-size: 0;
    margin: 32px 0 24px;
    }
.tags .tag{
    display: inline-block;
    vertical-align: top;
    font-weight: 300;
    font-size: 8px;
    line-height: 1.35em;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #78cafe;
    margin: 0 4px 8px;
    padding: 5px 9px;
    border: 1px solid #78cafe;
    }
.no-touchevents .tags .tag:hover{
    color: #ffd500;
    opacity: 1;
    border-color: #ffd500;
    }
@-moz-document url-prefix(){
    .tags .tag{
        padding-bottom: 4px;
        }
    }
/*Video box*/
.video-box{
    position: relative;
    z-index: 5;
    overflow: hidden;
    padding-bottom: 56.25%;
    margin: 0;
    cursor: pointer;
    }
.video-box .poster{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    -webkit-transition: -webkit-transform .5s ease;
    -ms-transition: -ms-transform .5s ease;
    transition: transform .5s ease;
    }
.no-touchevents .video-box:hover .poster{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    }
.video-box iframe{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    }
.video-box .play-btn, .video-placeholder .play-btn{
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 107px;
    height: 107px;
    margin: -54px 0 0 -54px;
    }
.video-box.hide-controls .play-btn{
    opacity: 0;
    visibility: hidden;
    }
.video-box .play-btn .link-circle-inner > *, .video-placeholder .play-btn .link-circle-inner > *{
    fill: #ffd500;
    }
.video-box .play-btn .link-circle-outer, .video-placeholder .play-btn .link-circle-outer{
    left: -13px;
    top: -13px;
    width: 134px;
    height: 134px;
    }
.video-box .play-btn:after, .video-placeholder .play-btn:after{
    content: '\e800';
    position: relative;
    font-size: 24px;
    line-height: 107px;
    color: #ffd500;
    }
/*Video placeholder*/
.video-placeholder{
    position: relative;
    margin: 32px 0;
    overflow: hidden;
    cursor: pointer;
    background: #0a3b55;
    }
.video-placeholder iframe, .video-placeholder .video{
    position: absolute;
    z-index: 1;
    left: -13%;
    top: -13%;
    width: 126%;
    height: 126%;
    opacity: .65;
    }
.video-placeholder img{
    margin: 0;
    width: 100%;
    opacity: .65;
    }
.no-touchevents .video-placeholder .touch-img-placeholder, .touchevents .fake-size, .touchevents .video-placeholder .video{
    display: none;
    }
.video-placeholder:after{
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }
.video-placeholder .figure-line{
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 0;
    width: 494px;
    margin: 0 0 0 -247px;
    }
/*Link circle*/
.link-circle{
    position: relative;
    z-index: 3;
    width: 65px;
    height: 65px;
    }
.link-circle.no-hover{
    cursor: default !important;
    }
.link-circle-inner, .link-circle-outer{
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.link-circle-outer{
    top: -7px;
    left: -7px;
    width: 79px;
    height: 79px;
    -webkit-transform: rotate(176.43deg);
    transform: rotate(176.43deg);
    }
.link-circle-inner > *, .link-circle-outer > *{
    fill: #fff;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.link-circle-outer{
    opacity: .2;
    }
.no-touchevents .link-circle:not(.no-hover):hover .link-circle-outer, .show-dropdown .ability-wrap .link-circle-outer{
    opacity: 1;
    }
.no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-outer{
    opacity: .2;
    }
.no-touchevents .link-circle:not(.no-hover):hover .link-circle-inner, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-inner, .no-touchevents .video-placeholder:hover .link-circle:not(.no-hover) .link-circle-inner, .show-dropdown .ability-wrap .link-circle-inner{
    -webkit-transform: rotate(-59deg);
    transform: rotate(-59deg);
    }
.no-touchevents .link-circle:not(.no-hover):hover .link-circle-outer, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-outer, .no-touchevents .video-placeholder:hover .link-circle:not(.no-hover) .link-circle-outer, .show-dropdown .ability-wrap .link-circle-outer{
    -webkit-transform: rotate(266deg);
    transform: rotate(266deg);
    }
.no-touchevents .link-circle:not(.no-hover):hover .link-circle-inner > *, .no-touchevents .link-circle:not(.no-hover):hover .link-circle-outer > *, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-inner > *, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-outer > *, .no-touchevents .video-placeholder:hover .link-circle .link-circle-inner > *, .no-touchevents .video-placeholder:hover .link-circle .link-circle-outer > *, .show-dropdown .ability-wrap .link-circle-inner > *, .show-dropdown .ability-wrap .link-circle-outer > *{
    fill: #ffd500;
    }
.link-circle.ability{
    display: block;
    cursor: pointer;
    text-align: center;
    font-size: 0;
    line-height: 0;
    margin: 0 auto 24px;
    }
.link-circle.ability:before{
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
    margin: 0;
    }
.link-circle .ability-icon{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    max-height: 60px;
    }
/*Social links*/
.social-links{
    font-size: 0;
    text-align: center;
    margin: 73px 0 0;
    }
.social-links a{
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 65px;
    text-decoration: none;
    margin: 0 13px;
    width: 65px;
    height: 65px;
    }
.social-links a:before{
    position: relative;
    font-size: 31px;
    line-height: 64px;
    color: #fff;
    }
.social-links .vkontakte:before{
    content: '\f189';
    }
.social-links .youtube:before{
    content: '\f16a';
    }
.social-links .steam:before{
    content: '\e807';
    font-size: 21px;
    line-height: 65px;
    }
.no-touchevents .social-links a:hover{
    opacity: 1;
    }
.no-touchevents .social-links a:hover:before{
    color: #ffd500;
    }
/*Share links*/
.share-links{
    position: relative;
    z-index: 40;
    font-size: 0;
    margin: 32px 0;
    }
.share-links div{
    position: relative;
    display: inline-block;
    vertical-align: top;
    line-height: 1em;
    margin: 0 7px 0 0;
    cursor: pointer;
    text-decoration: none;
    height: 32px;
    }
.share-links .social-likes__button{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 44px;
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    margin: 0;
    background: #76caff;
    }
.no-touchevents .share-links .social-likes__button:hover{
    background: #ffd500;
    }
.share-links .social-likes__button:after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -5px;
    height: 2px;
    background: #76caff;
    }
.no-touchevents .share-links .social-likes__button:hover:after{
    background: #ffd500;
    }
.share-links .social-likes__button:before{
    position: relative;
    left: 0;
    font-size: 19px;
    line-height: 32px;
    color: #002c48;
    }
.share-links .social-likes__button_vkontakte:before{
    content: '\f189';
    }
.share-links .social-likes__button_facebook:before{
    content: '\f09a';
    line-height: 35px;
    }
.no-touchevents .share-links .social-likes__button:hover:before{
    color: #fff;
    }
.share-links .social-likes__counter{
    position: relative;
    font-weight: 500;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    padding: 0 11px;
    margin: 0 0 0 2px;
    background: #76caff;
    }
.share-links .social-likes__counter:before{
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    width: 6px;
    height: 10px;
    margin: -5px 0 0;
    }
.share-links .social-likes__counter.social-likes__counter_empty{
    display: none;
    }
.social-likes__widget_twitter .social-likes__counter{
    display: none !important;
    }
/*Animations*/
.motion-blur{
    position: relative;
    transform: translateZ(0);
    }
.ie .motion-blur{
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.motion-blur-svg{
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    }
@keyframes motion-blur{
    0%{
        filter: url(#blur1);
        }
    10%{
        filter: url(#blur2);
        }
    20%{
        filter: url(#blur3);
        }
    30%{
        filter: url(#blur4);
        }
    40%{
        filter: url(#blur5);
        }
    50%{
        filter: url(#blur6);
        }
    60%{
        filter: url(#blur7);
        }
    70%{
        filter: url(#blur8);
        }
    80%{
        filter: url(#blur9);
        }
    90%{
        filter: url(#blur10);
        }
    100%{
        filter: url(#blur11);
        }
    }
.no-touchevents .get-motion{
    animation: motion-blur 0.6s linear reverse forwards 0.1s;
    }
/*Langs*/
.langs{
    position: relative;
    font-size: 12px;
    line-height: 1em;
    margin: 0;
    }
.langs .current{
    display: block;
    white-space: nowrap;
    cursor: pointer;
    }
.langs .current:after{
    content: '\e802';
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 10px;
    line-height: 1em;
    color: #fff;
    margin: 2px 0 0 6px;
    }
.langs .current.active:after{
    content: '\e801';
    }
.langs ul{
    display: none;
    position: absolute;
    bottom: 22px;
    left: 50%;
    margin: 0;
    padding: 11px 13px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #000;
    }
.langs li{
    font-size: 14px;
    padding: 8px 0 10px;
    margin: 0;
    border-bottom: 1px solid #131111;
    background: none;
    }
.langs li:last-child{
    border-bottom: none;
    }
.langs a{
    color: #fff;
    }
/*===========================FOOTER============================*/
#footer{
    position: relative;
    z-index: 2;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.45em;
    color: #213545;
    background: #081a29;
    }
.index-page #footer{
    color: #2f2929;
    background: #000;
    }
.touchevents.index-page #footer{
    font-weight: 400;
    }
#footer .container{
    padding-top: 18px;
    padding-bottom: 22px;
    }
#footer .sub-box{
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    }
#footer a{
    color: #213545;
    }
.index-page #footer a{
    color: #2f2929;
    }
.no-touchevents #footer a:hover{
    color: #fff;
    opacity: 1;
    }
#copy-box{
    position: relative;
    }
#copy-box:after, #footer .social-links:after, #footer .langs:after{
    content: '';
    position: absolute;
    top: 3px;
    right: -15%;
    width: 1px;
    height: 24px;
    background: #213545;
    }
.index-page #copy-box:after, .index-page #footer .social-links:after, .index-page #footer .langs:after{
    background: #2f2929;
    }
#copy-box p{
    display: inline-block;
    vertical-align: top;
    margin: 6px 44px 6px 0;
    }
#copy-box p:last-child{
    margin: 6px 0 0;
    }
#footer .social-links{
    position: relative;
    margin: 5px 0 0;
    }
#footer .social-links:after{
    top: -6px;
    right: -11.5%;
    }
#footer .social-links a{
    font-size: 12px;
    line-height: 1em;
    width: auto;
    height: auto;
    padding: 0 0 0 34px;
    margin: 0 18px;
    }
#footer .social-links a.steam{
    padding-left: 42px;
    }
#footer .social-links a:before{
    line-height: 1em;
    position: absolute;
    top: 0;
    left: 0;
    color: #213545;
    }
.index-page #footer .social-links a:before{
    color: #2f2929;
    }
#footer .social-links a.vkontakte:before{
    top: -5px;
    font-size: 20px;
    }
#footer .social-links a.youtube:before{
    top: -5px;
    font-size: 22px;
    }
#footer .social-links a.steam:before{
    top: 0;
    font-size: 14px;
    }
.no-touchevents #footer .social-links a:hover:before{
    color: #fff;
    }
#footer .langs{
    position: relative;
    }
#footer .langs:after{
    top: -6px;
    right: -53px;
    }
.langs .current:after{
    color: #213545;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.index-page .langs .current:after{
    color: #2f2929;
    }
.no-touchevents #footer .langs .current:hover, .no-touchevents #footer .langs .current:hover:after, #footer .langs .current.active, #footer .langs .current.active:after{
    color: #fff;
    }
#footer .langs a{
    color: #fff;
    }
.no-touchevents #footer .langs a:hover{
    opacity: .7;
    }
.design-by a{
    display: block;
    width: 38px;
    height: 31px;
    opacity: .15;
    background: url("../i/design-by.svg") no-repeat 0 0;
    }
/*========================END OF FOOTER========================*/
/*Popup*/
.overlay{
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    min-width: 320px;
    visibility: hidden;
    }
.opened-popup .overlay{
    visibility: visible;
    }
.overlay .bg{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(16, 23, 30, .8);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    }
.opened-popup .overlay .bg{
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    }
.popup{
    position: absolute;
    z-index: 15;
    left: 0;
    top: 50%;
    padding: 24px 16px 0;
    max-height: 100%;
    width: 100%;
    min-width: 260px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
    transition: opacity .2s ease, transform .2s ease;
    }
.opened-popup .popup{
    opacity: 1;
    -webkit-transition: opacity .5s ease .3s;
    transition: opacity .5s ease .3s;
    }
.popup .hidden{
    display: none;
    }
.close-popup{
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10000;
    width: 40px;
    height: 40px;
    background: url("../i/close.svg") no-repeat 50% 50%/ 16px 16px;
    }
.no-touchevents .close-popup{
    display: none;
    }
.touchevents .close-popup.flying{
    display: none !important;
    }
.touchevents .close-popup .link-circle-outer{
    width: 50px;
    height: 50px;
    left: -5px;
    top: -5px;
    }
.no-touchevents .close-popup.flying{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 68px;
    height: 68px;
    margin: -48px 0 0 -48px;
    pointer-events: none;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    background: url("../i/close.svg") no-repeat 50% 50%/ 32px 32px;
    }
.no-touchevents .close-popup .link-circle-outer{
    width: 84px;
    height: 84px;
    left: -8px;
    top: -8px;
    }
.no-touchevents .close-popup.flying.hide{
    opacity: 0;
    visibility: hidden;
    }
/*Popup boxes*/
.character-description-slider{
    font-size: 0;
    line-height: 0;
    }
.index-page .character-description-slider{
    opacity: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.index-page .character-description-slider.visible{
    opacity: 1;
    }
.character-description-slider .swiper-slide{
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    overflow: hidden;
    pointer-events: all;
    }
.character-description-slider .swiper-slide:before{
    content: '';
    }
.character-description-slider .swiper-slide-active{
    z-index: 100 !important;
    }
.character-description{
    position: relative;
    width: 1366px;
    font-size: 0;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 100px 0 0;
    border: 1px solid rgba(255, 255, 255, .2);
    overflow: hidden;
    background-repeat: no-repeat;

    background-color: #020d16;
    background-size: 1366px auto;
    }
.character-description.character-inner{
    z-index: 20;
    overflow: visible;
    margin: 0;
    padding: 130px 0 0;
    width: 100%;
    border: none;
    background-color: #020d16;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 1366px auto;
    }
.character-description.character-inner .container{
    z-index: 31;
    }
.character-description.character-inner .dots-overlay{
    z-index: 1;
    max-height: 853px;
    }
.character-description.character-inner .sub-box{
    position: relative;
    margin: 0 0 -40px;
    }
.character-description .character{
    display: inline-block;
    vertical-align: top;
    width: 50.7%;
    padding: 56px 32px 0 0;
    height: 666px;
    overflow: hidden;
    font-size: 0;
    text-align: center;
    }
.character-description.character-inner .character{
    position: relative;
    max-height: 572px;
    padding: 12px 52px 0 0;
    margin: -40px 0 0;
    overflow: visible;
    height: 572px;
    }
.character-description .character:before{
    content: '';
    position: relative;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    margin: 0 -1px 0 0;
    }
.character-description .character img{
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    }
.character-description.character-inner .character img{
    max-height: 580px;
    }
.character-description.character-inner .character .scheme{
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -40px;
    width: 661px;
    height: 489px;
    margin-left: -356px;
    background: url("../i/character-scheme-bg.svg") no-repeat 50% 0/661px 489px;
    overflow: hidden;
    opacity: .2;
    }
.character-description .character-info{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    line-height: 1.375em;
    width: 49.2%;
    margin-bottom: 120px;
    }
.character-description.character-inner .character-info{
    margin: 0 auto;
    }
.character-description .title{
    display: block;
    font-weight: 700;
    font-style: italic;
    font-size: 80px;
    line-height: 1em;
    text-transform: uppercase;
    text-align: center;
    color: #76caff;
    margin: 0 40px 27px 0;
    }
.character-description .character-info .in-brief{
    min-height: 93px;
    margin: 0 0 40px;
    }
.character-description .character-info .in-brief p{
    margin: 0 0 22px;
    }
.character-description .tabs-box{
    margin: 0;
    }
.character-description .tabs-box .tabs-content{
    min-height: 126px;
    }
.ability-nav .current .link-circle-inner > *, .ability-nav .current .link-circle-outer > *{
    fill: #ffd500;
    }
.no-touchevents .ability-nav .current .link-circle:hover .link-circle-inner, .no-touchevents .ability-nav .current a:hover .link-circle .link-circle-inner{
    -webkit-transform: none;
    transform: none;
    }
.no-touchevents .ability-nav .current .link-circle:hover .link-circle-outer, .no-touchevents .ability-nav .current a:hover .link-circle .link-circle-outer{
    -webkit-transform: rotate(176.43deg);
    transform: rotate(176.43deg);
    }
.no-touchevents .link-circle:not(.no-hover):hover .link-circle-inner > *, .no-touchevents .link-circle:not(.no-hover):hover .link-circle-outer > *, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-inner > *, .no-touchevents a:hover .link-circle:not(.no-hover) .link-circle-outer > *{
    fill: #ffd500;
    }
.index-page .character-description-slider.swiper-container .btn-box, .character-description-slider.swiper-container .btn-box{
    left: auto;
    right: 0;
    width: 49.2%;
    top: 41px;
    }
.character-description-slider.swiper-container .btn-box .prev-slide{
    left: -68px;
    }
.character-description-slider.swiper-container .btn-box .next-slide{
    right: 0;
    }
.character-description-slider .btn-box .slide-btn svg > *{
    fill: rgba(118, 202, 255, .3);
    }
.character-description .detailed{
    position: absolute;
    z-index: 2;
    right: 50px;
    bottom: 25px;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    line-height: 1em;
    letter-spacing: -.025em;
    color: #020306;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.no-touchevents .character-description .detailed:hover{
    opacity: 1;
    }
.character-description .detailed:before{
    content: '';
    position: absolute;
    z-index: -1;
    top: -20px;
    right: -96px;
    width: 450px;
    height: 200px;
    background: #76caff;
    -webkit-transform: rotate(-16deg);
    transform: rotate(-16deg);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    }
.no-touchevents .character-description .detailed:hover:before{
    background: #ffd500;
    }
.characters-nav{
    position: absolute;
    top: 42px;
    right: 0;
    width: 49.2%;
    height: 0;
    }
.characters-nav .max-w{
    position: relative;
    margin: 0 -16px 0 -74px;
    }
.characters-nav .link{
    position: absolute;
    left: 16px;
    top: -30px;
    width: 32px;
    height: 60px;
    cursor: pointer;
    opacity: 1 !important;
    }
.characters-nav .link.next{
    left: auto;
    right: 16px;
    }
.characters-nav .link svg{
    width: 100%;
    }
.characters-nav .link, .no-touchevents .characters-nav .link svg *{
    fill: rgba(118, 201, 254, .3);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.no-touchevents .characters-nav .link:hover svg *{
    fill: #ffd500;
    }
/*Abilities list*/
.abilities-box{
    position: relative;
    z-index: 4;
    margin: 0 0 87px;
    }
.abilities-box h2{
    text-align: right;
    letter-spacing: 0;
    }
.character-inner h2, .character-inner .h2{
    color: #205473;
    }
.abilities-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 40px -10px 0;
    }
.abilities-list .item-box{
    padding: 0 10px;
    width: 25%;
    max-width: 273px;
    }
.abilities-list .item{
    font-size: 16px;
    line-height: 1.375em;
    color: rgba(118, 202, 255, .3);
    max-width: 253px;
    margin: 0 auto;
    }
.abilities-list .media-box{
    position: relative;
    max-height: 226px;
    overflow: hidden;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    min-height: 226px;
    background: #020d16;
    }
.abilities-list .media-box.has-video{
    padding-bottom: 89.32806324110672%;
    }
.abilities-list .media-box > *{
    opacity: .3;
    }
.no-touchevents .abilities-list .on-hover .media-box > *, .abilities-list .show-dropdown .media-box > *, .touchevents .abilities-list .media-box.playing-video > *{
    opacity: 1;
    }
.abilities-list .media-box .video{
    position: absolute;
    left: 50%;
    top: 0;
    width: auto;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    }
.abilities-list .ability-img{
    margin: 0;
    }
.ability-wrap{
    position: relative;
    z-index: 30;
    margin: -42px auto 86px;
    height: 0;
    }
.ability-wrap .line{
    content: '';
    position: absolute;
    z-index: -2;
    top: 42px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    }
.no-touchevents .link-circle:hover + .line, .show-dropdown .ability-wrap .line{
    background: #ffd500;
    }
.ability-wrap .ability{
    z-index: 12;
    }
.ability-wrap .ability:after{
    content: '';
    position: absolute;
    z-index: -1;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    background: #0b1219;
    border-radius: 100%;
    }
.ability-dropdown{
    position: absolute;
    z-index: 11;
    left: 0;
    top: 44px;
    font-size: 0;
    padding: 40px 0 6px;
    width: 100%;
    background: #020a11;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 0 2px 161px 0 rgba(114, 195, 248, .1);
    box-shadow: 0 2px 161px 0 rgba(114, 195, 248, .1);
    }
.show-dropdown .ability-dropdown{
    opacity: 1;
    visibility: visible;
    }
.ability-dropdown .item{
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    line-height: 14px;
    color: #76caff;
    width: 49.9%;
    padding: 0 16px;
    margin: 0 0 26px;
    text-align: center;
    }
.ability-dropdown .icon{
    width: 64px;
    height: 64px;
    margin: 0 auto 6px;
    font-size: 0;
    }
.ability-dropdown .icon:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    height: 100%;
    width: 0;
    margin: 0 -1px 0 0;
    }
.ability-dropdown .icon img{
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    }
.ability-dropdown .item p{
    color: #78cafe !important;
    margin: 0 !important;
    }
.ability-dropdown:before{
    content: '';
    position: absolute;
    left: 50%;
    top: 43px;
    bottom: 30px;
    width: 1px;
    background: #020a11;
    }
.abilities-list .ability-title{
    position: relative;
    z-index: 5;
    display: block;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 0 5px;
    }
.no-touchevents .abilities-list .item.on-hover .ability-title{
    color: #ffd500;
    }
.abilities-list p{
    position: relative;
    z-index: 5;
    margin: 0 0 12px;
    }
.no-touchevents .abilities-list .item.on-hover p, .touchevents .abilities-list .item{
    color: #fff;
    }
.abilities-list p:last-child{
    margin: 0;
    }
.abilities-list .link-circle{
    cursor: default;
    }
/*Weapons box*/
.weapons-box.section{
    padding: 0;
    z-index: 30;
    overflow: visible;
    }
.weapons-box h2, .weapons-box .h2{
    margin: 0 0 40px;
    }
.weapon-col{
    float: left;
    padding: 38px 62px 0 0;
    width: calc(100% - 250px);
    }
.weapons-list{
    font-size: 0;
    margin: 0 -32px 122px;
    }
.weapons-list .ability-wrap{
    margin: 0 auto 80px;
    }
.weapons-list .ability{
    margin: 0 auto;
    }
.weapons-list .ability:after{
    background: #10293e;
    }
.weapons-list .show-dropdown .ability:after{
    background: #0c1218;
    }
.weapons-list .item-box{
    display: inline-block;
    vertical-align: top;
    width: 49.9%;
    padding: 0 32px;
    }
.weapons-list .item-box > .item{
    max-width: 411px;
    font-size: 16px;
    line-height: 1.375em;
    margin: 0 auto;
    color: #27729a;
    }
.weapons-list .img{
    position: relative;
    width: 247px;
    height: 215px;
    margin: 0 auto -11px;
    background: url("../i/weapon-img-bg.png") no-repeat 50% 50%;
    }
.weapons-list .img .wrap{
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 0;
    text-align: center;
    width: 450px;
    height: 450px;
    padding: 50px 0 0;
    margin: -225px 0 0 -225px;
    }
.weapons-list .img .wrap:before{
    content: '';
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
    margin: 0 -1px 0 0;
    }
.weapons-list .img .hover{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    }
.weapons-list .img img{
    margin: 0;
    }
.weapons-list .ability-title{
    position: relative;
    z-index: 5;
    display: block;
    font-weight: 700;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 0 5px;
    }
.weapons-list .on-hover .ability-title{
    color: #ffd500;
    }
.weapons-list p{
    margin: 0 0 22px;
    }
.weapons-list .on-hover p, .touchevents .weapons-list p{
    color: #fff;
    }
.weapons-list p:last-child{
    margin: 0;
    }
.weapons-list .ability-dropdown{
    padding: 60px 0 15px;
    -webkit-box-shadow: 0 2px 161px 0 rgba(0, 0, 0, .61);
    box-shadow: 0 2px 161px 0 rgba(0, 0, 0, .61);
    }
.weapons-list .ability-dropdown .item{
    margin: 0 0 40px;
    }
.ability-dropdown:before{
    top: 49px;
    bottom: 38px;
    }
.chip-col{
    position: relative;
    float: right;
    text-align: center;
    padding: 38px 16px 0 70px;
    width: 250px;
    }
.character-inner .chip-col h2, .character-inner .chip-col .h2{
    color: #10445f;
    }
.chip-col:before{
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: -1px;
    width: 12000px;
    bottom: -1px;
    background: rgba(0, 2, 6, .45);
    }
.chip-col:after{
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 50%;
    width: 1px;
    height: 703px;
    margin: -352px 0 0;
    background: url("../i/chip-col-border.png") no-repeat 0 50%;
    }
.chips-list{
    margin: 72px 0 80px;
    }
.chips-list .item{
    font-size: 12px;
    line-height: 14px;
    color: #76caff;
    margin: 0 0 32px;
    }
.chips-list .link-circle{
    margin: 0 auto 22px;
    }
.chip-title{
    display: block;
    }
.weapons-box.section .scheme-overlay .scheme-bg{
    left: 49%;
    top: 33px;
    width: 1535px;
    height: 854px;
    margin: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    }
/*Video iframe popup*/
.video-iframe-popup{
    position: relative;
    z-index: 5;
    max-width: 1000px;
    margin: 0 auto;
    }
.video-iframe-popup .sub-box{
    overflow: hidden;
    }
.video-iframe-popup img{
    margin: 0;
    max-width: 100%;
    }
.video-iframe-popup iframe{
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    }
.touchevents .video-iframe-popup .close-popup{
    top: -18px;
    right: -12px;
    }
.video-iframe-popup .preloader{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 65px;
    height: 65px;
    margin: -70px 0 0 -32px;
    }
/*Audio*/
#audio-effects{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    }
/*=========================TRANSITIONS=========================*/
.no-touchevents #logo, #js-open-nav, .no-touchevents #nav a span, .no-touchevents #nav a:after, .no-touchevents #sub-nav li a:before, .no-touchevents .social-links a, .no-touchevents .social-links a:before, .no-touchevents #footer a, .langs a, .langs .current, .no-touchevents .tabs-box .tabs-nav a, .video-box.hide-controls:before, .no-touchevents .langs a, .play-btn, .no-touchevents .characters-list .item .character, .no-touchevents .figure-line > *, .no-touchevents .characters-list .item .h3, .no-touchevents .news-in-brief .title a, .no-touchevents .share-links .social-likes__button, .no-touchevents .share-links .social-likes__button:after, .no-touchevents .share-links .social-likes__button:before, .no-touchevents .tags .tag, .no-touchevents .link-circle:hover + .line, .ability-wrap .line, .no-touchevents .abilities-list img, .no-touchevents .abilities-list .ability-title, .no-touchevents .abilities-list p, .ability-dropdown, .weapons-list .ability-title, .weapons-list p{
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
/**/
/*Resolutions*/
@media screen and (max-width: 1390px){
    /*Sub nav*/
    #sub-nav{
        right: 16px;
        }
    }
@media screen and (max-width: 1340px){
    /*Choose role section*/
    #choose-role-section{
        padding: 62px 0 40px;
        }
    #choose-role-section .btn-box{
        left: 24px;
        right: 24px;
        width: auto;
        }
    }
@media screen and (max-width: 1310px){
    /*News section*/
    #news-section{
        padding: 53px 0;
        overflow: hidden;
        }
    #news-section .title-box{
        max-width: 854px;
        width: 100%;
        float: none;
        margin: 0 auto;
        }
    #news-section .title-box h2 br{
        display: none;
        }
    #news-section .title-box .special-link{
        display: none;
        }
    #news-section .news-list-box{
        width: 100%;
        max-width: 854px;
        float: none;
        margin: 0 auto;
        text-align: center;
        }
    #news-section .special-link-box{
        position: relative;
        z-index: 40;
        display: block;
        text-align: center;
        }
    .news-list.swiper-container{
        margin: 0 -40px -30px;
        }
    .news-list .swiper-pagination{
        margin: -40px 0 70px;
        }
    /*City battle section*/
    #city-battle-section{
        padding: 0 0 110px;
        margin: 80px 0 0;
        }
    /*Popup boxes*/
    .character-description{
        padding: 50px 0 0;
        }
    .character-description .character{
        padding: 0 24px 0 0;
        }
    .character-description .character-info{
        width: 49.2%;
        }
    .character-description .title{
        font-size: 66px;
        margin: 5px 40px 27px;
        text-align: center;
        }
    .character-description-slider.swiper-container .btn-box{
        top: 41px;
        }
    .character-description-slider.swiper-container .btn-box .prev-slide{
        left: 0;
        }
    .character-description .character-info .in-brief{
        min-height: 67px;
        margin: 0 0 40px;
        }
    .characters-nav .max-w{
        margin: 0 -16px;
        }

    }
@media screen and (max-width: 1270px){
    /*Header*/
    #nav li{
        margin: 0 0 0 54px;
        }
    }
@media screen and (max-width: 1250px){
    /*Footer*/
    #copy-box:after{
        right: -14%;
        }
    #footer .social-links:after{
        right: -10%;
        }
    #footer .langs:after{
        right: -49px;
        }
    }
@media screen and (max-width: 1240px){
    /*Main*/
    #main{
        padding: 150px 0 57px;
        }
    #main.full-screen .align-m{
        padding: 137px 0 50px;
        }
    #main h1{
        margin-top: 0;
        }
    #main.has-aside .page-title{
        float: none;
        width: 100%;
        margin: 0 auto 24px;
        }
    .news-page #main.has-aside .page-title{
        max-width: 854px;
        }
    #main.has-aside .page-title .sub-box{
        display: inline-block;
        vertical-align: top;
        text-align: left;
        }
    #main.has-aside .content{
        float: none;
        width: 100%;
        max-width: 854px;
        margin: 0 auto;
        }
    }
@media screen and (max-width: 1220px){
    /*Weapons box*/
    .weapons-list .img .wrap{
        width: 360px;
        height: 360px;
        margin: -180px 0 0 -180px;
        }
    .weapons-list .img img{
        max-width: 100%;
        }
    /*Footer*/
    #copy-box:after, #footer .social-links:after, #footer .langs:after{
        display: none;
        }
    }
@media screen and (max-width: 1190px){
    /*Popup boxes*/
    .character-description .title{
        font-size: 56px;
        margin: 13px 40px 27px;
        }
    }
@media screen and (max-width: 1160px){
    /*Header*/
    #nav li{
        margin: 0 0 0 40px;
        }
    #header .btn{
        margin: 0 0 0 50px;
        }
    /*Defend cities section*/
    #defend-cities-section{
        padding: 120px 0 140px;
        }
    /*Popup boxes*/
    .character-description .tabs-box .tabs-nav.ability-nav .item{
        font-size: 18px;
        letter-spacing: -.025em;
        }
    .tabs-box .tabs-nav.ability-nav a{
        padding-bottom: 18px;
        }
    }
@media screen and (max-width: 1110px){
    /*Earth section*/
    #earth-points .point:nth-child(3){
        top: 67.1%;
        left: 59%;
        }
    /*Popup boxes*/
    .character-description .title{
        font-size: 50px;
        margin: 15px 40px 27px;
        }
    }
@media screen and (max-width: 1070px){
    /*Header*/
    #nav li{
        margin: 0 0 0 30px;
        }
    #header .btn{
        min-width: 160px;
        margin: 0 0 0 40px;
        }
    /*Weapons box*/
    .weapon-col{
        float: none;
        padding: 38px 0 24px;
        margin: 0 0 38px;
        width: 100%;
        height: auto !important;
        }
    .weapons-list{
        margin: 0 -32px;
        }
    .chip-col{
        text-align: left;
        float: none;
        padding: 38px 0 12px;
        width: 100%;
        height: auto !important;
        }
    .chip-col:before{
        left: -40px;
        }
    .chip-col:after{
        display: none;
        }
    .chips-list{
        font-size: 0;
        margin: 24px -16px 0;
        text-align: center;
        }
    .chips-list .item{
        display: inline-block;
        vertical-align: top;
        margin: 0 0 40px;
        padding: 0 8px;
        width: 24.9%;
        max-width: 210px;
        }
    .weapons-box.section .scheme-overlay .scheme-bg{
        top: 33px;
        width: 1306px;
        height: 726px;
        }
    /*Footer*/
    #copy-box{
        width: 50%;
        }
    #footer .social-links{
        text-align: right;
        width: 50%;
        }
    #footer .langs{
        margin: 24px 0 0 0;
        }
    #footer .design-by{
        margin: 24px 0 0 0;
        }
    /*Popup boxes*/
    .character-description .tabs-box .tabs-nav.ability-nav .item{
        font-size: 15px;
        }
    .tabs-box .tabs-nav.ability-nav a{
        padding-bottom: 14px;
        }
    }
@media screen and (min-width: 1001px){
    /*Header*/
    .index-page #header{
        -webkit-transform: translate3d(0, -102%, 0);
        transform: translate3d(0, -102%, 0);
        }
    .index-page.touchevents #header{
        -webkit-transform: none;
        transform: none;
        }
    .index-page.page-loaded #header{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        }
    }
@media screen and (max-width: 1000px){
    /*Header*/
    #header, #header.sticky{
        padding: 14px 0 0;
        }
    #nav-box{
        position: fixed;
        float: none;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        min-width: 320px;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #001325;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        }
    #nav-box:not(.visible){
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        transform: scale(.9);
        }
    #nav-box.visible{
        z-index: 1000;
        visibility: visible;
        opacity: 1;
        }
    #nav-box:after{
        content: '';
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        bottom: -60px;
        height: 60px;
        background: #001325;
        }
    #nav-box .sub-box{
        position: relative;
        top: 0;
        left: 0;
        font-size: 0;
        padding: 48px 0 0;
        height: 100%;
        width: 100%;
        float: none;
        text-align: center;
        overflow: auto;
        overflow-x: hidden;
        }
    #nav-box .sub-box:before{
        content: '';
        position: relative;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0;
        margin: 0 -2px 0 0;
        }
    #nav-box .align-m{
        float: none;
        width: 480px;
        max-width: 100%;
        display: inline-block;
        vertical-align: middle;
        }
    #js-open-nav, #close-nav{
        display: block;
        }
    #nav{
        float: none;
        }
    #nav ul{
        float: none;
        text-align: left;
        }
    #nav li{
        display: block;
        float: none;
        font-size: 24px;
        margin: 0;
        padding: 16px 38px 17px;
        border-bottom: 1px solid #062035;
        }
    #header .btn{
        display: none;
        }
    #header .social-links, #header .langs{
        display: block;
        }
    #header .social-links{
        font-size: 16px;
        text-align: justify;
        padding: 0 38px 0;
        margin: 40px 0 40px;
        width: 100%;
        }
    #header .social-links:after{
        content: '';
        display: inline-block;
        vertical-align: top;
        height: 0;
        font-size: 0;
        width: 100%;
        }
    #header .social-links a{
        display: inline-block;
        vertical-align: top;
        line-height: 1em;
        padding: 0;
        margin: 0;
        color: #385571;
        width: auto;
        height: auto;
        }
    #header .social-links a:last-child{
        margin-right: 0;
        }
    #header .social-links a:before{
        position: relative;
        top: 0;
        display: block;
        height: 40px;
        line-height: 40px;
        color: #385571;
        margin: 0 0 10px !important;
        }
    #header .social-links a.vkontakte:before{
        font-size: 40px;
        }
    #header .social-links a.youtube:before{
        font-size: 40px;
        }
    #header .social-links a.steam:before{
        font-size: 30px;
        }
    #header .langs{
        float: left;
        font-size: 18px;
        color: #385571;
        margin: 0 0 48px 38px;
        }
    #header .langs .current:after{
        font-size: 13px;
        color: #385571;
        top: 1px;
        }
    .no-touchevents #header .langs:hover, .no-touchevents #header .social-links a:hover:before, .no-touchevents #header .langs .current:hover:after, .no-touchevents #header .social-links a:hover{
        color: #ffd500;
        }
    /*Sub nav*/
    #sub-nav{
        display: none;
        }
    /*Earth section*/
    #earth-section .align-m{
        height: auto;
        padding: 70px 0;
        }
    /*Choose role section*/
    .characters-list.swiper-container{
        margin: -90px -24px 0;
        padding: 0 50px;
        }
    #choose-role-section .btn-box{
        left: 0;
        right: 0;
        }
    .other-classes .h2{
        text-align: center;
        }
    }
@media screen and (max-width: 960px){
    /*Abilities list*/
    .character-description.character-inner .sub-box{
        margin: 0;
        }
    .abilities-box{
        margin: 0 auto;
        }
    .abilities-list{
        margin: 40px -16px 0;
        }
    .abilities-list .item-box{
        padding: 0 16px;
        margin: 0 0 70px;
        width: 50%;
        max-width: none;
        }
    .abilities-list .item{
        max-width: 300px;
        }
    .abilities-list .media-box{
        max-height: 268px;
        }
    .character-description.character-inner .tabs-box .tabs-content{
        min-height: 0;
        }
    /*Popup boxes*/
    .character-description .character{
        max-height: 610px;
        width: 46%;
        }
    .character-description .character img{
        max-height: 100%;
        }
    .character-description .character-info{
        width: 53.9%;
        }
    .index-page .character-description-slider.swiper-container .btn-box, .character-description-slider.swiper-container .btn-box{
        left: auto;
        right: 0;
        width: 53.9%;
        top: 41px;
        }
    .characters-nav{
        top: 41px;
        width: 53.9%;
        }
    }
@media screen and (max-width: 940px){
    /*Earth section*/
    #earth-section .max-w{
        width: 100%;
        max-width: 510px;
        }
    #earth-points{
        display: none;
        }
    /*Footer*/
    #footer .container{
        padding-bottom: 32px !important;
        }
    #copy-box{
        order: 4;
        width: 100%;
        text-align: center;
        margin: 32px 0 0;
        }
    #footer .social-links{
        order: 1;
        text-align: left;
        width: auto;
        margin: 3px 0 0;
        }
    #footer .langs{
        order: 2;
        margin: 0;
        }
    #footer .design-by{
        order: 3;
        margin: 0;
        }
    }
@media screen and (max-width: 904px){
    /*News section*/
    .news-list .swiper-slide{
        width: 257px;
        }
    }
@media screen and (max-width: 880px){
    /*Media slider*/
    .tabs-box{
        margin: 48px 0 24px;
        }
    .media-slider .swiper-slide{
        max-width: 100%;
        }
    .tabs-box .tabs-content{
        padding: 0 24px;
        }
    /*Defend cities section*/
    #defend-cities-section{
        padding: 90px 0 120px;
        }
    /*Popup boxes*/
    .character-description .tabs-box .tabs-content{
        padding: 0;
        }
    .character-description{
        background-size: 800px auto;
        }
    .character-description.character-inner{
        background-size: 1000px auto;
        }
    .character-description .character{
        display: block;
        width: 100%;
        max-height: none;
        height: auto;
        padding: 0;
        margin: 0 0 32px;
        }
    .character-description .character img{
        max-height: 320px;
        margin: 0 auto;
        }
    .character-description.character-inner .character{
        max-height: none;
        padding: 0;
        margin: 0 0 32px;
        height: auto;
        }
    .character-description.character-inner .character:before{
        display: none;
        }
    .character-description.character-inner .character img{
        max-height: 320px;
        display: block;
        }
    .character-description .character-info{
        display: block;
        width: 100%;
        max-width: 620px;
        margin: 0 auto 50px;
        }
    .character-description .character-info .title{
        margin: 0 0 24px;
        }
    .index-page .character-description-slider.swiper-container .btn-box, .character-description-slider.swiper-container .btn-box{
        display: block;
        left: auto;
        right: 0;
        width: 100%;
        top: 200px;
        }
    .character-description-slider.swiper-container .btn-box .sub-box{
        max-width: 620px;
        }
    .character-description.character-inner .character .scheme{
        top: -40px;
        width: 432px;
        height: 320px;
        margin-left: -216px;
        background-size: 432px 320px;
        }
    .characters-nav{
        top: 100px;
        left: 0;
        width: auto;
        }
    .characters-nav .max-w{
        margin: 0 auto;
        max-width: 620px;
        }
    .characters-nav .link{
        left: 0;
        top: -23px;
        width: 24px;
        height: 45px;
        }
    .characters-nav .link.next{
        right: 0;
        }
    /*Abilities list*/
    .character-description.character-inner .sub-box{
        margin: 0 0 70px;
        }
    }
@media screen and (max-width: 780px){
    h1, .h1, h2, .h2{
        font-size: 44px;
        }
    h3, .h3{
        font-size: 26px;
        }
    h1 .small, h2 .small{
        font-size: 18px;
        }
    /*Independent*/
    .container{
        padding: 0 16px;
        }
    /*Scheme*/
    .scheme-overlay .scheme-bg{
        left: 25%;
        top: 50px;
        width: 900px;
        height: 501px;
        margin: 0;
        -webkit-transform: rotate(90deg) translateY(60%);
        transform: rotate(90deg) translateY(60%);
        }
    .weapons-box.section .scheme-overlay .scheme-bg{
        top: 30%;
        opacity: .05;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        }
    /*Open nav*/
    #js-open-nav{
        right: 16px;
        }
    /*Media slider*/
    .tabs-box .tabs-content{
        padding: 0 16px;
        }
    /*Choose role section*/
    .characters-list.swiper-container{
        margin: -90px -16px 0;
        padding: 0 50px;
        }
    /*Defend cities section*/
    #defend-cities-section .character-bg{
        left: -74px;
        max-width: 70%;
        }
    #defend-cities-section .scheme-overlay .scheme-bg{
        left: 53%;
        width: 900px;
        height: 501px;
        }
    /*Main*/
    #main h3{
        margin: 0 0 12px;
        }
    /*Registration box*/
    #registration-box{
        float: none;
        }
    /*Footer*/
    #footer .social-links a{
        margin: 0 18px 0 0;
        }
    }
@media screen and (max-width: 760px){
    /*City battle section*/
    #city-battle-section{
        padding: 0 0 80px;
        margin: 70px 0 0;
        }
    /*Weapons box*/
    .weapons-list .img .wrap{
        width: 320px;
        height: 320px;
        margin: -160px 0 0 -160px;
        }
    }
@media screen and (max-width: 750px){
    /*News section*/
    .combined-section{
        background-color: #003a5d;
        background-position: 50% 0;
        background-size: 100% auto;
        }
    .combined-section .dots-overlay{
        display: none;
        }
    }
@media screen and (max-width: 680px){
    /*Main screen*/
    #main-screen .align-b{
        padding: 100px 0 70px;
        }
    /*Choose role section*/
    .characters-list.swiper-container{
        padding: 0;
        }
    .characters-list.swiper-container .btn-box{
        display: block;
        }
    .characters-list .character{
        height: 410px;
        }
    .characters-list .character img{
        max-height: 90%;
        }
    /*Choose style section*/
    #choose-style-section{
        padding: 0 0 36px;
        }
    .choose-style-slider .swiper-slide{
        height: 536px;
        }
    .choose-style-slider .align-b{
        padding: 0 16px 12px;
        }
    /*Media slider*/
    .tabs-box{
        margin: 48px 0 24px;
        }
    .tabs-box .tabs-nav{
        display: flex;
        flex-flow: row wrap;
        }
    .tabs-box .tabs-nav:after{
        display: none;
        }
    .tabs-box .tabs-nav:not(.ability-nav) .item{
        width: auto;
        flex: 1 auto;
        }
    .tabs-box .tabs-nav:not(.ability-nav) .item:nth-child(1){
        flex: 2 0;
        }
    /*Defend cities section*/
    #defend-cities-section{
        padding: 70px 0 90px;
        }
    /*Error page box*/
    #error-page-box .num{
        font-size: 160px;
        margin: 0 0 24px;
        }
    #error-page-box p{
        margin: 0 0 38px;
        }
    #error-page-box .social-links{
        margin: 56px 0 0;
        }
    }
@media screen and (max-width: 640px){
    /*Header*/
    #header, #header.sticky{
        height: 52px;
        padding: 9px 0 0;
        }
    #logo{
        width: 241px;
        height: 17px;
        }
    #js-open-nav, #header.sticky #js-open-nav{
        top: 18px;
        }
    /*Sections*/
    .section.full-screen .align-m, .section.full-screen .align-b{
        padding: 100px 0;
        }
    /*City battle section*/
    #city-battle-section{
        margin: 40px 0 0;
        }
    #city-battle-section .video-placeholder{
        float: none;
        width: 100%;
        margin: 0 auto 40px;
        }
    #city-battle-section .info{
        float: none;
        padding: 0;
        width: 100%;
        max-width: 494px;
        margin: 0 auto;
        }
    #city-battle-section h2 br{
        display: none;
        }
    #city-battle-section .character-bg{
        display: none;
        }
    /*Main*/
    #main{
        padding: 120px 0 57px;
        }
    /*Weapons box*/
    .weapon-col{
        padding: 38px 0 0;
        }
    .weapons-list{
        margin: 0;
        }
    .weapons-list .item-box{
        display: block;
        width: 100%;
        padding: 0;
        margin: 0 0 50px;
        }
    .weapons-list .img .wrap{
        width: 320px;
        height: 320px;
        margin: -160px 0 0 -160px;
        }
    /*Popup boxes*/
    .character-description{
        background-size: 540px auto;
        padding: 32px 0 0;
        }
    .character-description.character-inner{
        padding: 110px 0 0;
        background-size: 740px auto;
        }
    .character-description .character{
        margin: 0 0 24px;
        }
    .character-description .character img{
        max-height: 220px;
        margin: 0 auto;
        }
    .character-description.character-inner .character img{
        max-height: 220px;
        }
    .character-description .character-info{
        margin: 0 auto 50px;
        }
    .character-description .character-info .title{
        margin: 0 0 20px;
        font-size: 40px;
        }
    .index-page .character-description-slider.swiper-container .btn-box, .character-description-slider.swiper-container .btn-box{
        top: 140px;
        }
    .character-description.character-inner .character .scheme{
        top: -40px;
        width: 378px;
        height: 280px;
        margin-left: -189px;
        background-size: 378px 280px;
        }
    }
@media screen and (max-width: 620px){
    h1, .h1, h2, .h2{
        font-size: 38px;
        }
    h3, .h3{
        font-size: 23px;
        }
    h1 .small, h2 .small{
        font-size: 17px;
        }
    /*Scheme*/
    .scheme-overlay .scheme-bg{
        left: 15%;
        -webkit-transform: rotate(90deg) translateY(67%);
        transform: rotate(90deg) translateY(67%);
        }
    /*Main screen*/
    #main-screen h2{
        font-size: 42px;
        }
    /*Social links*/
    .social-links{
        margin: 50px 0 0;
        }
    /*Defend cities section*/
    #defend-cities-section .btn.btn-glitch{
        margin-top: 50px;
        }
    #defend-cities-section .character-bg{
        max-width: 80%;
        }
    /*section title bg*/
    .title-bg .sub-box:before{
        top: -5px;
        bottom: -5px;
        }
    /*Main*/
    #main.full-screen .align-m{
        padding: 114px 0 40px;
        }
    /*Popup boxes*/
    .character-description .tabs-box .tabs-nav.ability-nav .item{
        font-size: 13px;
        width: 25%;
        }
    }
@media screen and (max-width: 560px){
    /*Header*/
    #nav li{
        font-size: 18px;
        padding: 20px 38px 21px;
        }
    #header .social-links{
        font-size: 14px;
        margin: 44px 0 40px;
        max-width: 440px;
        }
    #header .social-links a:before{
        height: 32px;
        line-height: 32px;
        }
    #header .social-links a.vkontakte:before{
        font-size: 32px;
        }
    #header .social-links a.youtube:before{
        font-size: 32px;
        }
    #header .social-links a.steam:before{
        font-size: 22px;
        }
    #header .langs{
        font-size: 16px;
        }
    #header .langs .current:after{
        font-size: 12px;
        }
    /*Video-box*/
    .video-box:before{
        font-size: 70px;
        margin: -35px 0 0 -35px;
        }
    .video-box .play-btn, .video-placeholder .play-btn{
        width: 70px;
        height: 70px;
        margin: -35px 0 0 -35px;
        }
    .video-box .play-btn .link-circle-outer, .video-placeholder .play-btn .link-circle-outer{
        left: -7px;
        top: -7px;
        width: 84px;
        height: 84px;
        }
    .video-box .play-btn:after, .video-placeholder .play-btn:after{
        line-height: 70px;
        }
    /*Error page box*/
    #error-page-box .num{
        font-size: 150px;
        }
    /*Defend cities section*/
    #defend-cities-section .scheme-overlay .scheme-bg{
        left: 73%;
        }
    /*Footer*/
    #footer .container{
        padding-top: 24px;
        }
    #footer .sub-box{
        max-width: 288px;
        margin: 0 auto;
        }
    #copy-box{
        order: 1;
        margin: 0;
        }
    #copy-box p{
        margin: 0 22px 12px !important;
        }
    #footer .social-links{
        order: 2;
        text-align: center;
        width: 100%;
        margin: 24px 0 40px;
        padding: 0;
        }
    #footer .social-links a{
        padding: 0 !important;
        margin: 0 22px !important;
        }
    #footer .social-links a:before{
        position: relative;
        top: 0 !important;
        display: block;
        height: 26px;
        line-height: 26px;
        margin: 0 0 10px !important;
        }
    #footer .social-links a.vkontakte:before{
        font-size: 30px;
        }
    #footer .social-links a.youtube:before{
        font-size: 30px;
        }
    #footer .social-links a.steam:before{
        font-size: 20px;
        }
    #footer .langs{
        order: 3;
        margin: 12px 0 0 40px;
        }
    #footer .design-by{
        order: 4;
        margin: 0 20px 0 0;
        }
    }
@media screen and (max-width: 520px){
    /*Defend cities section*/
    #defend-cities-section .character-bg{
        max-width: 90%;
        }
    }
@media screen and (max-width: 480px){
    body{
        font-size: 15px;
        line-height: 1.2em;
        }
    h1, .h1, h2, .h2{
        font-size: 32.5px;
        }
    h1 .small, h2 .small{
        font-size: 16px;
        }
    /*Form*/
    .btn{
        font-size: 16px;
        padding: 14px 16px 11px;
        min-width: 320px;
        }
    /**/
    .index-page #all:after{
        background-size: 110% auto;
        }
    /*Sections*/
    .section{
        padding: 40px 0;
        }
    .separator{
        width: 196px;
        background-size: 253px 100%;
        }
    /*Main screen*/
    #main-screen .align-b{
        padding: 100px 0 47px;
        }
    #main-screen h2{
        font-size: 38px;
        }
    /*Choose role section*/
    #choose-role-section{
        padding: 52px 0 40px;
        }
    /*City battle section*/
    #city-battle-section{
        padding-bottom: 56px;
        }
    /*Earth section*/
    #earth-section .align-m{
        padding: 40px 0;
        }
    /*Choose style section*/
    #choose-style-section .over-all{
        top: 40px;
        }
    .choose-style-slider .swiper-slide{
        height: 440px;
        }
    .choose-style-slider .info{
        font-size: 15px;
        line-height: 1.2em;
        }
    .choose-style-slider .swiper-slide:after{
        top: 0;
        background-size: 2px 100%;
        }
    /*Media slider*/
    .tabs-box .tabs-nav .item{
        font-size: 18px;
        }
    .tabs-box .tabs-nav:not(.ability-nav) .item:nth-child(1){
        flex: 2.5 0;
        }
    /*Defend cities section*/
    #defend-cities-section{
        padding: 50px 0 60px;
        }
    #defend-cities-section .scheme-overlay .scheme-bg{
        left: 105%;
        }
    /*Tabs*/
    .tabs-box .tabs-content{
        font-size: 15px;
        line-height: 1.2em;
        }
    /*News in brief*/
    .news-in-brief .img{
        width: 80px;
        }
    .news-in-brief .info{
        width: calc(100% - 80px);
        padding: 5px 0 0 16px;
        }
    #main .news-in-brief .title{
        font-size: 18px;
        line-height: 1.275em;
        margin: 4px 0 8px;
        }
    /*Abilities list*/
    .abilities-box{
        margin: 0 auto 60px;
        }
    .abilities-box h2{
        text-align: center;
        }
    .abilities-list{
        display: block;
        margin: 40px 0 0;
        }
    .abilities-list .item-box{
        display: block;
        padding: 0;
        margin: 0 auto 50px;
        width: 100%;
        max-width: 320px;
        }
    .abilities-list .item{
        max-width: 288px;
        }
    .abilities-list .item-box > .item{
        font-size: 15px;
        line-height: 1.25em;
        }
    /*Weapons list*/
    .weapons-list .item-box > .item{
        font-size: 15px;
        line-height: 1.25em;
        }
    .weapons-list .ability-title{
        margin: 0 0 10px;
        }
    /*Error page box*/
    #error-page-box{
        margin: -32px auto 24px;
        }
    #error-page-box .num{
        font-size: 120px;
        }
    /*Popup*/
    .character-description .character-info{
        font-size: 15px;
        line-height: 1.2em;
        }
    }
@media screen and (max-width: 460px){
    /*Defend cities section*/
    #defend-cities-section .character-bg{
        max-width: 100%;
        }
    /*Popup boxes*/
    .character-description .character-info{
        margin: 0 auto 32px;
        }
    .character-description .detailed{
        position: relative;
        display: block;
        right: 0;
        bottom: auto;
        padding: 16px;
        text-align: center;
        background: #78cafe;
        }
    .no-touchevents .character-description .detailed:hover{
        background: #ffd500;
        }
    .character-description .detailed:before{
        display: none;
        }
    .character-description-slider{
        margin: 0 -16px !important;
        }
    .character-description-slider .swiper-slide{
        padding: 0 16px;
        }
    .character-description .tabs-box .tabs-nav.ability-nav .item{
        font-size: 11px;
        }
    .tabs-box .tabs-nav.ability-nav{
        margin: 0 -16px 34px;
        }
    .tabs-box .tabs-nav.ability-nav a{
        padding-bottom: 6px;
        }
    .index-page .character-description-slider.swiper-container .btn-box, .character-description-slider.swiper-container .btn-box{
        left: 16px;
        right: 16px;
        width: auto;
        }
    .link-circle.ability{
        width: 50px;
        height: 50px;
        }
    .link-circle.ability .link-circle-outer{
        top: -5px;
        left: -5px;
        width: 60px;
        height: 60px;
        }
    .link-circle .ability-icon{
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        max-height: 30px;
        }
    .character-description .tabs-box .tabs-content{
        min-height: 0;
        }
    /*Abilities list*/
    .ability-wrap{
        margin: -42px auto 76px;
        }
    .ability-wrap .link-circle{
        top: 12px;
        }
    /*Weapons box*/
    .weapons-list .img{
        margin: 0 auto -24px;
        }
    }
@media screen and (max-width: 430px){
    /*Weapons box*/
    .chips-list .item{
        width: 49.9%;
        max-width: 210px;
        }
    }
@media screen and (max-width: 420px){
    h3, .h3{
        font-size: 23px;
        }
    img{
        max-width: 112%;
        margin: 21px -6% 31px;
        }
    /*Header*/
    #nav li{
        font-size: 16px;
        padding: 20px 24px 21px;
        }
    #header .social-links{
        padding: 0 24px;
        }
    #header .langs{
        font-size: 15px;
        margin: 0 0 48px 24px;
        }
    #header .langs .current:after{
        font-size: 12px;
        }
    /*Video-box*/
    .video-box:before{
        font-size: 56px;
        margin: -28px 0 0 -28px;
        }
    /*Media slider*/
    .tabs-box .tabs-nav .item{
        font-size: 15px;
        }
    .tabs-box .tabs-nav:not(.ability-nav) .item:nth-child(1){
        flex: 4 0;
        }
    /*Popup*/
    .popup{
        padding: 24px 1px 1px;
        }
    .character-description{
        margin: 0 auto 1px;
        padding-bottom: 1px;
        }
    /*Video iframe popup*/
    .touchevents .video-iframe-popup .close-popup{
        top: -18px;
        right: 0;
        }
    }
@media screen and (max-width: 420px) and (max-height: 580px){
    #nav li{
        font-size: 14px;
        padding: 15px 24px 16px;
        }
    #header .social-links{
        margin: 32px 0;
        }
    }
@media screen and (max-width: 400px){
    /*Form*/
    .btn, .btn.small{
        font-size: 15px;
        line-height: 1.3em;
        padding: 14px 16px 11px;
        min-width: 0;
        width: 100%;
        }
    /*Header*/
    #logo{
        width: 200px;
        height: 14px;
        }
    #js-open-nav, #header.sticky #js-open-nav{
        top: 17px;
        }
    /*Defend cities section*/
    #defend-cities-section .character-bg{
        max-width: 110%;
        }
    /*Main*/
    #main{
        padding: 100px 0 57px;
        }
    #main.full-screen .align-m{
        padding: 100px 0 40px;
        }
    #main.has-aside .page-title{
        margin: 0 0 10px;
        }
    .article .footer .share-links{
        display: block;
        text-align: center;
        margin: 0 0 24px;
        }
    .article .footer .share-links div{
        margin: 0 4px;
        }
    #main #choose-role-section{
        margin: -6px 0 0;
        }
    /*News in brief*/
    .news-in-brief .img{
        width: 70px;
        }
    .news-in-brief .info{
        width: calc(100% - 70px);
        }
    }
/*Custom elements*/
.swiper-container{
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    }
.swiper-container-no-flexbox .swiper-slide{
    float: left;
    }
.swiper-container-vertical > .swiper-wrapper{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }
.swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    }
.swiper-container-android .swiper-slide,
.swiper-wrapper{
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    }
.swiper-container-multirow > .swiper-wrapper{
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }
.swiper-container-free-mode > .swiper-wrapper{
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto;
    }
.swiper-slide{
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    }
.swiper-invisible-blank-slide{
    visibility: hidden;
    }
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide{
    height: auto;
    }
.swiper-container-autoheight .swiper-wrapper{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: height, -webkit-transform;
    -o-transition-property: transform, height;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform;
    }
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    }
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper{
    -ms-touch-action: pan-x;
    touch-action: pan-x;
    }
.swiper-button-prev,
.swiper-button-next{
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
    }
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled{
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
    }
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    left: 10px;
    right: auto;
    }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
    right: 10px;
    left: auto;
    }
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
    }
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    }
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    }
.swiper-button-lock{
    display: none;
    }
.swiper-pagination{
    position: absolute;
    text-align: center;
    -webkit-transition: 300ms opacity;
    -o-transition: 300ms opacity;
    transition: 300ms opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
    }
.swiper-pagination.swiper-pagination-hidden{
    opacity: 0;
    }
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom{
    bottom: 10px;
    left: 0;
    width: 100%;
    }
/* Bullets */
.swiper-pagination-bullets{
    position: relative;
    z-index: 30;
    text-align: center;
    margin: 30px 0 0;
    }
.swiper-pagination-bullet{
    display: inline-block;
    vertical-align: top;
    width: 10px;
    height: 10px;
    margin: 0 9px;
    border-radius: 100%;
    border: 2px solid #438bb7;
    cursor: pointer;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.swiper-pagination-bullet-active{
    border-color: #ffd500;
    background: #ffd500;
    cursor: default;
    }
.no-touchevents .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover{
    border-color: #ffd500;
    }
/*Arrows*/
.swiper-container .btn-box{
    position: absolute;
    z-index: 20;
    left: 0;
    top: 45%;
    height: 0;
    width: 100%;
    }
.swiper-container .btn-box .sub-box{
    position: relative;
    max-width: 1242px;
    margin: 0 auto;
    }
.swiper-container .btn-box .slide-btn{
    position: absolute;
    left: 16px;
    top: -30px;
    width: 32px;
    height: 60px;
    cursor: pointer;
    }
.swiper-container .btn-box .next-slide{
    left: auto;
    right: 16px;
    }
.swiper-container .btn-box .slide-btn svg{
    width: 100%;
    }
.no-touchevents .slide-btn, .no-touchevents .swiper-container .btn-box .slide-btn svg *{
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    }
.no-touchevents .swiper-container .btn-box .slide-btn:hover svg *{
    fill: #ffd500;
    }
.swiper-container .btn-box .swiper-button-disabled{
    display: none;
    }
/* Windows 8 IE 10 fix */
.swiper-container-coverflow .swiper-wrapper{
    -ms-perspective: 1200px;
    }

.swiper-pagination.hidden{
    display: none !important;
    }
@media screen and (max-width: 1340px) and (min-width: 1001px){
	.index-page .swiper-container .btn-box{
		width: auto;
		left: 34px;
		right: 34px;
		}
	.index-page #choose-role-section .swiper-container .btn-box{
		left: 68px;
		right: 68px;
		}
	}
@media screen and (max-width: 880px){
    .swiper-container .btn-box{
        top: 42%;
        }
    .swiper-container .btn-box .slide-btn{
        width: 24px;
        height: 45px;
        top: -23px;
        }
    }
@media screen and (max-width: 680px){
    .swiper-container .btn-box{
        display: none;
        }
    }