body,html{
    margin:0;
    padding:0;
    font-family:'Vazirmatn',sans-serif
}
input,textarea,button{
    font-family:'Vazirmatn',sans-serif
}
body{
    background:#1b1b1b;
    overflow-x:hidden
}
.rtl {
    text-align: right !important;
}
.isModaled,.isSidedMenu{
    overflow:hidden
}
.mainContent{
    overflow:hidden
}
ul{
    list-style:none;
    padding:0;
    margin:0
}
#usedesk-messenger .uw__messenger-layout__buttons{
    right:4.2vw;
    bottom:3.6vw
}
#usedesk-messenger .uw__round-button{
    background-color:transparent;
    width:2.6vw;
    height:2.6vw
}
#usedesk-messenger .uw__round-button__image{
    width:4.6vw;
    height:4.6vw;
    right:0;
    left:auto;
    bottom:0;
    top:auto
}
#usedesk-messenger .uw__messenger-layout__frame{
    z-index:1500
}
input:focus,textarea:focus{
    outline:none
}
.subtitle{
    color:#888;
    font-weight:700;
    font-size:1.25vw;
    letter-spacing:2.4px
}
.title{
    color:#ff3a3a;
    font-weight:700;
    font-size:1.15vw;
    letter-spacing:0.6px
}
.textDescription{
    color:rgba(255,255,255,.9);
    font-size:1.25vw;
    letter-spacing:1.4px;
    line-height:1.75vw
}
.btnStartGame{
    background:#5896fa;
    border-radius:100px;
    color:#fff;
    font-weight:900;
    font-size:1.45vw;
    letter-spacing:2.8px;
    display:inline-block;
    padding:1.35vw 2.2vw;
    cursor:pointer;
    text-decoration:none
}
.btnStartGame img{
    width:1.75vw
}
.btnStartGame-pulse{
    animation:borderPulse 1000ms infinite ease-out
}
.btnStartGame:hover,.btnStartGame:focus{
    animation:borderPulse 1000ms infinite ease-out,hoverShine 200ms
}
.accountStartBtn:hover,.accountStartBtn:focus{
    animation:borderPulseHeader 1000ms infinite ease-out,hoverShine 200ms
}
@keyframes borderPulse{
    0%{
        box-shadow:inset 0 0 0 5px rgba(255,255,255,.4),0 0 0 0 #fff,0 20px 40px #437eef40
    }
    100%{
        box-shadow:inset 0 0 0 3px rgba(117,117,255,.2),0 0 0 10px transparent,0 20px 40px #437eef40
    }
}
@keyframes borderPulseHeader{
    0%{
        box-shadow:inset 0 0 0 5px rgba(255,255,255,.4),0 0 0 0 #fff
    }
    100%{
        box-shadow:inset 0 0 0 3px rgba(117,117,255,.2),0 0 0 10px transparent
    }
}
@keyframes hoverShine{
    0%{
        background-image:linear-gradient(135deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 100%)
    }
    50%{
        background-image:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%)
    }
    100%{
        background-image:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,.4) 100%)
    }
}
.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical{
    background:#111;
    width:12px;
    padding:0
}
.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{
    background:rgba(255,255,255,.07);
    border-radius:0
}
.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle:hover{
    background:rgba(255,255,255,.15)
}
.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{
    background:rgba(255,255,255,.07)
}
.sideMenuFooter .supportBtn{
    display:none
}
.select-hidden{
    display:none;
    visibility:hidden;
    padding-right:.52vw
}
.customSelectContainer{
    height:3.13vw
}
.customSelect option:checked{
    background:#8951c0
}
.select{
    cursor:pointer;
    display:inline-block;
    position:relative;
    font-size:.94vw;
    width:100%;
    height:3.13vw;
    line-height:3.13vw
}
.select-styled{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(255,255,255,.02);
    border:.05vw solid rgba(255,255,255,.25);
    padding:0 3.33vw;
    transition:background-color .2s,border-color .2s
}
.select-styled:hover{
    background-color:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.35)
}
.select-styled:before{
    content:"";
    position:absolute;
    width:.36vw;
    height:.36vw;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../images/serverIcon.svg) left 1.04vw center no-repeat;
    transition:opacity .2s;
    background-size:1.25vw
}
.select-styled:after{
    content:"";
    width:.36vw;
    height:.36vw;
    transform:rotate(-45deg);
    border-left:.16vw solid #fff;
    border-bottom:.16vw solid #fff;
    position:absolute;
    top:50%;
    right:1.04vw;
    margin-top:-.36vw
}
.select-styled.active{
    color:rgba(255,255,255,.5);
    background-color:rgba(35,35,35,.9);
    border-color:rgba(255,255,255,.35);
    border-width:1px 1px 0
}
.select-styled.active:before{
    opacity:.5
}
.select-options{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:999;
    margin:0;
    padding:0;
    list-style:none;
    background-color:#1e1e1e;
    border:1px solid rgba(255,255,255,.35);
    border-width:0 1px 1px;
    max-height:12.5vw;
    overflow:hidden
}
.select-options li{
    position:relative;
    border-top:1px solid rgba(0,0,0,.2);
    color:#fff;
    padding-left:3.33vw;
    transition:background .2s
}
.select-options li:hover{
    background:rgba(255,255,255,.03)
}
.select-options li:before{
    content:"";
    position:absolute;
    width:.36vw;
    height:.36vw;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../images/serverIcon.svg) left 1.04vw center no-repeat;
    background-size:1.25vw
}
.select li[rel=hide]{
    display:none
}
.select .select-options{
    z-index:999!important
}
.select-options .simplebar-scroll-content{
    margin-bottom:0!important
}
.select .simplebar-content{
    margin-right:-.89vw!important;
    padding-bottom:0!important
}
.select .simplebar-track{
    width:.36vw!important
}
.select .simplebar-track.vertical{
    top:.36vw!important;
    bottom:.36vw!important;
    right:.73vw!important
}
.select .simplebar-scrollbar{
    width:.36vw!important
}
.select .os-scrollbar-vertical{
    background:#1a1a1a!important
}
.customSelectContainer .inputFieldResult{
    margin-top:-.52vw;
    right:2.86vw
}
.invalidInput .select-styled{
    border-color:rgba(183,62,62,.45)
}
.mobileActivator{
    display:none
}
.mobileDisactivator{
    display:none
}
.isSidedMenu .contentContainer{
    background:rgba(32,32,32,.97)
}
.sideMenu{
    position:fixed;
    top:0;
    right:-100%;
    height:100%;
    width:384px;
    padding-top:100px;
    background:rgba(255,255,255,.1);
    z-index:50;
    transition:right .2s,top .2s,height .2s,padding-top .2s;
    box-shadow:-20px 0 20px rgba(0,0,0,.1);
    box-sizing:border-box;
    border-left:1px solid rgba(72,72,72,.35)
}
.sideMenuContainer{
    height:100%
}
.isSidedMenu .sideMenu{
    right:0
}
.header_scrolled .sideMenu{
    height:calc(100% - 100px);
    padding-top:0;
    top:100px
}
.sideMenu-navigation{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(calc(100vh - 100px) - 38vh);
    min-height:540px
}
.sideMenu-navigationInner{
    width:100%;
    text-align:center
}
.sideMenu-navigation ul{
    list-style:none;
    margin:0;
    padding:0
}
.sideMenu-navigation li{
    color:#fff;
    font-size:18px;
    letter-spacing:3.6px;
    line-height:64px;
    background:transparent;
    transition:background .2s;
    position:relative;
    cursor:pointer
}
.sideMenu-navigation li:hover{
    background:rgba(255,255,255,.05)
}
.sideMenu-navigation .sideMenu-navActive::after{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    margin-left:-40px;
    width:80px;
    height:6px;
    border-radius:2px;
    background:#e522b1;
    box-shadow:0 10px 20px #e522b1
}
.sideMenu-navigation .contactUs{
    margin-top:30px;
    transition:scale .2s;
    font-weight:700;
    width:210px;
    font-size:18px;
    line-height:64px
}
.sideMenu-navigation .contactUs:active{
    transform:scale(.95)
}
.sideMenu-follow{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(calc(100vh - 100px) - 76vh);
    min-height:125px;
    border-top:1px solid rgba(0,0,0,.1)
}
.sideMenu-follow .footerFollow{
    margin:0
}
.sideMenu-follow .footerFollow .followTitle{
    font-size:125%
}
.sideMenu-follow .footerFollow .followSocials a{
    margin:0 8px;
    font-size:265%
}
.sideMenu-lang{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(calc(100vh - 100px) - 73vh);
    min-height:150px;
    border-top:1px solid rgba(0,0,0,.1);
    text-align:center
}
.sideMenu-langTitle{
    letter-spacing:3.6px;
    font-size:125%;
    line-height:125%;
    color:rgba(255,255,255,.5)
}
.sideMenu-lang .langsContainer{
    background:#ffffff26;
    box-shadow:0 10px 10px rgba(0,0,0,.1);
    border:1px solid #ffffff40;
    list-style:none;
    padding:0;
    display:inline-block;
    transition:opacity .5s,margin-top .5s;
    height:50px;
    box-sizing:border-box;
    margin:0;
    margin-top:20px
}
.sideMenu-lang .langsContainer.langsContainerIsOpen{
    display:block;
    opacity:1
}
.sideMenu-lang .langsContainer .langItem{
    line-height:50px;
    width:50px;
    text-align:center;
    float:left;
    font-weight:700;
    font-size:18px;
    display:none;
    letter-spacing:3.6px;
    display:inline-block;
    box-sizing:border-box;
    border-left:1px solid #00000040
}
.sideMenu-lang .langsContainer .langItem a{
    color:rgba(255,255,255,.35);
    text-decoration:none
}
.sideMenu-lang .langsContainer .langItem:first-child{
    border-left:none
}
.sideMenu-lang .langsContainer .langItem.activeLang a{
    color:#fff
}
.sideMenu .simplebar-scrollbar{
    width:10px!important
}
.sideMenu .simplebar-track{
    width:10px!important;
    right:6px!important;
    opacity:.8!important
}
.header{
    width:100%;
    position:absolute;
    left:0;
    top:1.1vw;
    z-index:200;
    padding:1.3vw 4.2vw;
    box-sizing:border-box;
    border-bottom:1px solid;
    border-color:transparent;
    background:transparent;
    transition:padding .5s,opacity .2s,border-color .2s,background .2s;
    direction: rtl;
}
.headerContainer{
    width:100%;
    height:100%;
    box-sizing:border-box;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
    z-index:102;
    position:relative;
    background:transparent;
    transition:background .5s
}
.logoLinks{
    height:100%;
    display:flex;
    align-items:center
}
.logoLinks .logo{
    display:inline-block;
    vertical-align:top;
    background-size:auto 100px;
    margin-right:6.3vw;
    cursor:pointer;
    width:10.6vw;
    transition:background-size .5s;
    height:2.45vw
}
.logoLinks .logo img{
    height:3vw;
    transition:height .5s,margin-top .5s
}
.header_scrolled .logo img{
    height:2.45vw
}
.isModaled .header{
    opacity:0!important;
    z-index:1
}
.header_scrolled .header{
    border-color:rgba(255,255,255,.05);
    background:rgba(32,32,32,.97);
    padding:1.3vw 4.2vw;
    box-shadow:0 60px 60px rgba(0,0,0,.23);
    top:0;
    position:fixed
}
.accountOptions{
    position:relative;
    display:flex;
    align-items:center
}
.accountBtnContainer{
    position:relative;
    height:3vw;
    margin-right:2.1vw;
    width:10.4vw
}
.header_scrolled .accountBtnContainer{
    height:2.8vw;
    width:10.9vw
}
.accountPayBtn{
    font-weight:700;
    font-size:.75vw;
    letter-spacing:1.4px;
    color:rgba(255,255,255,.75);
    border:2px solid #3a86ef;
    border-radius:100px;
    background:rgba(0,0,0,.1);
    padding:.8vw 0;
    display:inline-block;
    cursor:pointer;
    position:absolute;
    top:0;
    right:0;
    width:10.4vw;
    opacity:1;
    text-align:center;
    transition:color .2s,top .5s,opacity .5s,background .2s;
    -moz-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none
}
.header_scrolled .accountPayBtn{
    top:-250%;
    opacity:0
}
.accountPayBtn:hover{
    color:#fff;
    background:rgba(0,0,0,.25)
}
.accountStartBtn{
    font-weight:700;
    font-size:.9vw;
    letter-spacing:1.8px;
    padding:.8vw 0;
    box-shadow:none;
    position:absolute;
    top:-250%;
    right:0;
    transition:top .5s,opacity .5s;
    width:10.9vw;
    opacity:0;
    box-sizing:border-box;
    text-align:center
}
.header_scrolled .accountStartBtn{
    top:0;
    opacity:1
}
.accountStartBtn:hover{
    box-shadow:none
}
.avatarContainer{
    position:relative;
    cursor:pointer;
    display:inline-block;
    opacity:.75;
    transition:opacity .5s
}
.avatarContainer:hover{
    opacity:1
}
.avatarContainer img{
    vertical-align:middle;
    margin-right:.5vw;
    width:2.1vw
}
.iconArrowFull{
    display:inline-block;
    vertical-align:middle;
    width:0;
    height:0;
    border-style:solid;
    border-width:7px 5px 0;
    border-color:rgba(255,255,255,.5) transparent transparent transparent
}
.accountPopupContainer{
    position:absolute;
    top:calc(100% + 40px);
    right:0;
    width:390px;
    background:rgba(20,20,20,.97);
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    display:none
}
.accountPopupContainerIsVisible{
    display:block
}
.accountPopupContainer:before{
    content:'';
    position:absolute;
    top:-10px;
    right:36px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:10px solid #5a5959
}
.accountPopupContainer:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image:url(../images/modal-bgLight.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
    mix-blend-mode:overlay;
    pointer-events:none
}
.accountPopupUnreg{
    display:none
}
.isUnregUser .accountPopupUnreg{
    display:block
}
.accountPopupReg{
    display:block
}
.isUnregUser .accountPopupReg{
    display:none
}
.accountPopupUnreg{
    padding:30px
}
.accountPopupUnreg_title{
    font-size:18px;
    letter-spacing:1.5px;
    margin-bottom:30px;
    text-align:center;
    color:#fff
}
.accountPopupUnreg .unregForm{
    width:100%
}
.accountPopupUnreg .inputFieldWrapper:before{
    background-size:auto 1.04vw
}
.accountPopupReg_title{
    padding:30px 0;
    text-align:center;
    font-size:18px
}
.accountPopupReg_accInfo{
    padding:20px 30px;
    display:flex;
    align-items:center;
    border-top:1px solid rgba(112,112,112,.35);
    border-bottom:1px solid rgba(112,112,112,.35)
}
.accountPopupReg_accInfo>img{
    margin-right:20px;
    width:50px;
    height:50px
}
.accountPopupReg_accName{
    font-size:16px;
    margin-bottom:4px
}
.accountPopupReg_accName img{
    width:15px;
    height:15px;
    margin-left:4px
}
.accountPopupReg_accEmail{
    font-size:16px;
    opacity:.5
}
.accountPopupReg_menu li{
    padding:0 30px;
    background:transparent;
    cursor:pointer;
    transition:background .2s
}
.accountPopupReg_menu li:hover{
    background:rgba(112,112,112,.05)
}
.accountPopupReg_menu li div{
    border-bottom:1px solid rgba(112,112,112,.15);
    padding:20px 0
}
.accountPopupReg_menu li:last-child div{
    border-bottom:none
}
.accountPopupReg_menuItem{
    font-size:16px;
    display:flex;
    align-items:center
}
.accountPopupReg_menuItem img{
    width:30px;
    height:30px;
    vertical-align:middle;
    margin-bottom:0;
    margin-right:20px
}
.accountPopupReg_menuItem span{
    line-height:30px
}
.header-links{
    display:inline-block;
    height:100%;
    position:relative
}
.headerNavigator{
    display:none;
    position:absolute;
    top:0;
    left:283px;
    width:107px;
    height:4px;
    border-radius:20px;
    background: #861111de;
    box-shadow:0 2px 20px #ff3a3a;
    transition:width .2s,left .2s
}
.header_scrolled .headerNavigator{
    top:0
}
.bar{
    box-sizing:border-box;
    display:flex;
    height:100%;
    left:0;
    width:100%;
    z-index:101
}
.option{
    cursor:pointer;
    line-height:57px;
    text-align:center;
    display:inline-block;
    margin-right:2.1vw;
    color:rgba(255,255,255,.75);
    transition:line-height .5s,color .5s;
    font-size: 1.05vw;
    letter-spacing: 1.6px;
    white-space:nowrap;
    transition:color .5s
}
.option:hover{
    color:#fff
}
.option a{
    color:rgba(255,255,255,.75);
    text-decoration:none;
    transition:color .5s
}
.option a:hover{
    color:#fff
}
.header_scrolled .option{
    line-height:2.45vw
}
.bar-purple{
    background:0 0;
    color:#fff;
    clip-path:polygon( 875px 0,875px 2px,25px 2px,25px 0 );
    transition:clip-path 200ms cubic-bezier(.4,0,.2,1)
}
.bar-outer{
    clip-path:polygon( 25px 0,25px 2px,130px 2px,130px 0 );
    height:100%;
    pointer-events:none;
    transition:clip-path 200ms cubic-bezier(.4,0,.2,1);
    width:100%
}
.contentContainer{
    background:#1b1b1b;
    transition:filter .5s;
    position:relative;
    z-index:5
}
.contentTexture{
    position:absolute;
    background:url(../images/bgTexture.png);
    top:0;
    left:0;
    width:100%;
    height:100%;
    mix-blend-mode:multiply;
    opacity:.7;
    background-size:77px
}
.contentTextureLine{
    position:absolute;
    background:url(../images/bgLines.png);
    top:0;
    left:0;
    width:100%;
    height:100%;
    mix-blend-mode:overlay;
    background-position:center top 307px;
    background-size:100%
}
.welcomeEllipseBg{
    position:absolute;
    background:url(../images/welcomeEllipseBg.png);
    top:-26vw;
    width:100%;
    height:45vw;
    mix-blend-mode:soft-light;
    background-position:center;
    background-size:100% 100%;
    background-repeat:no-repeat
}
.welcomeGradientBg{
    position:absolute;
    top:0;
    right:0;
    height:1430px;
    width:100%;
    background-image:linear-gradient(-150deg,#FF3A3A,#1F1F1F00 40%);
    opacity:.3
}
.topLightLine{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1.1vw;
    background:rgba(255,255,255,.5);
    mix-blend-mode:overlay
}
.topLightLineAfter{
    position:absolute;
    top:1.1vw;
    left:0;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.25);
    mix-blend-mode:soft-light
}
@supports not (mix-blend-mode:multiply){
    .contentTexture{
        display:none
    }
    .contentTexture,.contentTextureLine,.topLightLine,.topLightLineAfter{
        display:none
    }
}
@supports not ((-webkit-backdrop-filter:blur(50px)) or (backdrop-filter:blur(50px))){
    .header_scrolled .header{
        background:rgba(32,32,32,.97)
    }
}
#content{
    background:#1b1b1b;
    position:relative
}
.contentInner{
    position:relative
}
.contentPadded{
    padding:0 12.5vw
}
.sideNavCircles{
    position:fixed;
    top:50%;
    left:4.2vw;
    margin-top:-8.4vw;
    z-index:20
}
.sideNavCircle{
    width:1.05vw;
    height:1.05vw;
    border:2px solid rgba(255,255,255,.35);
    margin-bottom:2.1vw;
    border-radius:50%;
    transition:border-color .5s,background .5s;
    cursor:pointer;
    box-sizing:border-box
}
.sideNavCircle:last-child{
    margin-bottom:0
}
.sideNavCircle-active{
    background:#ff3a3a;
    border-color:#ff3a3a
}
.sideNavCircle:hover{
    border-color:rgba(255,255,255,.75)
}
.sideNavCircle-active:hover{
    border-color:#ff3a3a
}
.socials-welcome{
    position:absolute;
    top: 32.1vh;
    right: 3.1vw;
    margin-top:-5.25vw;
    z-index:20
}
.socialIcon{
    margin-bottom:2.1vw;
    cursor:pointer;
    opacity:.7;
    transition:opacity .1s
}
.socialIcon img{
    width: 3.3vw;
    height: 3.3vw;
}
.socialIcon:last-child{
    margin-bottom:0
}
.socialIcon:hover{
    opacity:.9
}
.supportBtn{
    position:fixed;
    bottom:4vw;
    right:4.2vw;
    background:#545454;
    border-radius:50%;
    width:4.2vw;
    height:4.2vw;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
    transition:background .2s
}
.supportBtn:hover{
    background:#7e7e7e
}
.supportBtn img{
    width:2vw
}
.welcome{
    width:100%;
    height:100vh;
    min-height:auto;
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:center;
    position:relative;
    padding:0 12.5vw;
    box-sizing:border-box
}
.welcomeMoreBelowContainer{
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
    padding:1.65vw 12.5vw
}
.welcomeMoreBelowContainer:before{
    content:'';
    position:absolute;
    top:0;
    left:12.5vw;
    width:calc(100% - 25vw);
    height:2px;
    background:rgba(255,255,255,.1);
    border-radius:60px
}
.welcomeMoreBelowTitle{
    font-weight:700;
    color:#888;
    letter-spacing:2.4px;
    font-size:1.25vw
}
.welcomeMoreBelowMouseContainer{
    opacity:.35;
    color:#fff
}
.welcomeMoreBelowMouseText{
    font-size:.75vw;
    letter-spacing:1.4px
}
.welcomeMoreBelowMouseIcon{
    width:1.1vw;
    margin-left:1.05vw;
    margin-right:.5vw;
    vertical-align:middle
}
.welcomeMoreBelowArrow{
    display:inline-block;
    vertical-align:middle;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    border:solid #fff;
    border-width:0 2px 2px 0;
    padding:3px;
    margin-bottom:4px
}
.welcome-join-server {
    background: linear-gradient(45deg, #ff3a3a0f, #22ba2cc7) !important;
    text-decoration: none;
}
.welcomeInfo{
    width:50%
}
.welcomeBtnsContainer{
    margin-top: 21px;
}
.welcomeInfo-title{
    color: rgba(255,255,255,.95);
    font-size: 2.1vw;
    /* letter-spacing: 3.2px; */
    font-weight: 700;
    margin-bottom: 0.8vw;
}
.welcomeInfo-text{
    color:#fff;
    font-size:1.25vw;
    /* letter-spacing: 1.5px; */
    line-height:2.8vw;
}
.welcome-seeTrailerContainer{
    cursor:pointer;
    margin-top:1vw;
    display:inline-block;
    animation: borderPulse 1000ms infinite ease-out;
    border-radius: 40px;
    padding: 10px;
    background: linear-gradient(45deg, #ff3a3a0f, #3f51b5f0);
}
.welcome-seeTrailerIconContainer{
    border:1px solid rgba(255,255,255,.15);
    padding:.5vw;
    width: 3.6vw;
    height: 3.40vw;
    display:inline-block;
    box-sizing:border-box;
    border-radius:50%;
    vertical-align:middle
}
.welcome-seeTrailerIcon{
    width:100%;
    height:100%;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.75);
    background:rgba(255,255,255,.05);
    box-sizing:border-box;
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
    transition:background .2s
}
.welcome-seeTrailerContainer:hover .welcome-seeTrailerIcon{
    background:rgba(255,255,255,.15)
}
.welcome-seeTrailerIcon .iconPlay{
    color:#fff;
    font-size:.95vw;
    margin-left:.2vw
}
.welcome-seeTrailerText{
    vertical-align: middle;
    font-size: 1.1vw;
    font-weight: 700;
    letter-spacing: 1.0px;
    color: rgba(255,255,255,.8);
    margin-right: 0.8vh;
    margin-left: 0.8vw;
    transition: color .2s;
}
.welcome-seeTrailerContainer:hover .welcome-seeTrailerText{
    color:#fff
}
.btnStartGame-welcomeContainer{
    margin-top:2.1vw
}
.systemRequir{
    font-size:.9vw;
    letter-spacing:1.8px;
    color:rgba(255,255,255,.35);
    text-decoration:underline;
    margin-top:1.6vw;
    cursor:pointer;
    transition:color .2s
}
.systemRequir:hover{
    color:rgba(255,255,255,.55)
}
.welcomeImage{
    width:50%;
    height:69%;
    position:relative
}
.welcomeImage:before{
    content:'';
    position:absolute;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    background-image:url(../images/whiteBrush.png);
    background-position:center center;
    background-size:contain;
    background-repeat:no-repeat;
    opacity:.1;
    pointer-events:none
}
.welcomeImage:after{
    content:'';
    position:absolute;
    top:-40%;
    left:-40%;
    width:180%;
    height:180%;
    mix-blend-mode:screen;
    background-image:url(../images/redBrush.png);
    background-position:center center;
    background-size:contain;
    background-repeat:no-repeat;
    opacity:.7
}
.welcomeImageRectangles{
    position:absolute;
    top:-30px;
    left:0;
    width:150%;
    height:130%;
    background-position:top left;
    background-size:contain;
    background-repeat:no-repeat;
    z-index:20
}
.welcomeImageRectangles-1{
    background-image:url(../images/welcomeRectangles-1.png)
}
.welcomeImageRectangles-2{
    background-image:url(../images/welcomeRectangles-2.png)
}
@keyframes welcomeRectanglesAnim-1{
    0%,to{
        -webkit-transform:translate(0);
        transform:translate(0)
    }
    50%{
        -webkit-transform:translateY(3%);
        transform:translateY(3%)
    }
}
@keyframes welcomeRectanglesAnim-2{
    0%,to{
        -webkit-transform:translate(0);
        transform:translate(0)
    }
    50%{
        -webkit-transform:translateY(-3%);
        transform:translateY(-3%)
    }
}
.welcomeImageInner{
    position:absolute;
    top:0;
    left:0;
    width:113%;
    height:113%;
    background-image:url(../images/welcomeImage.png);
    background-position:center left;
    background-size:contain;
    background-repeat:no-repeat;
    z-index:20
}
.aboutProjectRect{
    position:absolute;
    background-image:url(../images/rectangleMini.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain
}
.aboutProjectRect-1{
    top:10px;
    right:35%;
    width:4.7vw;
    height:4.7vw
}
.aboutProjectRect-2{
    top:5vw;
    left:20vw;
    width:2.2vw;
    height:2.2vw;
    opacity:.35;
    -webkit-filter:blur(5px);
    filter:blur(5px)
}
.aboutProjectRect-3{
    top:3vw;
    right:13vw;
    width:5vw;
    height:5vw;
    opacity:.35;
    -webkit-filter:blur(5px);
    filter:blur(5px)
}
.aboutProjectRect-4{
    top:18vw;
    left:5vw;
    width:3.4vw;
    height:3.4vw;
    opacity:.35;
    -webkit-filter:blur(5px);
    filter:blur(5px)
}
.aboutProjectRect-5{
    top:6vw;
    right:28vw;
    width:3.1vw;
    height:3.1vw;
    opacity:.35;
    -webkit-filter:blur(5px);
    filter:blur(5px)
}
.aboutProjectRect-6{
    bottom:3vw;
    left:12vw;
    width:5.3vw;
    height:5.3vw;
    opacity:.35;
    -webkit-filter:blur(5px);
    filter:blur(5px)
}
.aboutProjectRect-7{
    bottom:12vw;
    left:21vw;
    width:6.1vw;
    height:6.1vw;
    opacity:.15;
    -webkit-filter:blur(9px);
    filter:blur(9px)
}
.aboutProjectRect-8{
    top:6vw;
    right:4vw;
    width:3.6vw;
    height:3.6vw;
    opacity:.2;
    -webkit-filter:blur(3px);
    filter:blur(3px)
}
.aboutProjectRect-9{
    top:13vw;
    left:30vw;
    width:4.2vw;
    height:4.2vw;
    opacity:.35;
    -webkit-filter:blur(3px);
    filter:blur(3px)
}
.aboutProjectRect-10{
    bottom:5vw;
    left:33vw;
    width:1.6vw;
    height:1.6vw;
    opacity:.5;
    -webkit-filter:blur(6px);
    filter:blur(6px)
}
.aboutProjectRect-11{
    top:-4vw;
    right:29vw;
    width:6.3vw;
    height:6.3vw;
    opacity:.75
}
.aboutProjectRect-12{
    top:0;
    left:29vw;
    width:3.9vw;
    height:3.9vw;
    opacity:.75;
    -webkit-filter:blur(4px);
    filter:blur(4px)
}
.aboutProjectRect-13{
    top:7vw;
    left:13vw;
    width:4.2vw;
    height:4.2vw;
    opacity:.55;
    -webkit-filter:blur(6px);
    filter:blur(6px)
}
.aboutProjectRect-14{
    top:14vw;
    left:13vw;
    width:3.4vw;
    height:3.4vw;
    opacity:.55;
    -webkit-filter:blur(3px);
    filter:blur(3px)
}
.aboutProjectRect-15{
    top:8vw;
    left:33vw;
    width:5.2vw;
    height:5.2vw;
    opacity:.75;
    -webkit-filter:blur(8px);
    filter:blur(8px)
}
.aboutProject{
    position:relative;
    padding:0 12.5vw;
    direction: rtl;
}
.aboutProject .aboutProjectItem:nth-child(2n+1){
    flex-direction:row-reverse
}
.aboutProjectItem{
    position:relative;
    padding:4.2vw 0;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.aboutProjectImage{
    position:relative;
    width:49%;
    height:26.05vw;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain
}
.aboutProjectImageInner{
    width:100%;
    height:100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url(../images/aboutProject-1.png);
    position:relative
}
.aboutProjectImage-1:before{
    content:'';
    position:absolute;
    left:-50%;
    top:-50%;
    width:200%;
    height:200%;
    background-image:url(../images/redBrush.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    opacity:.35;
    pointer-events:none
}
.aboutProjectImage-2{
    background-image:url(../images/aboutProject-2.png)
}
.aboutProjectImage-3{
    background-image:url(../images/aboutProject-3.png)
}
.aboutProjectImage-4{
    background-image:url(../images/aboutProject-4.png)
}
.aboutProjectImage-5{
    background-image:url(../images/aboutProject-5.png)
}
.aboutProjectInfo{
    width:49%;
    position:relative;
    display:flex;
    align-items:center
}
.aboutProjectInfo-subtitle{
    margin-bottom:.5vw
}
.aboutProjectInfo-title{
    margin-bottom:1vw
}
.aboutProjectInfo-count{
    position:absolute;
    top:0;
    right:0;
    line-height:3.95vw;
    font-size:5.2vw;
    font-weight:700;
    letter-spacing:5px;
    color:#fff;
    opacity:.07
}
.galleryContainer{
    position:relative;
    background:rgba(39,39,39,.35);
    border-top:1.04vw solid rgba(255,255,255,.01);
    padding:2.1vw 12.5vw 3.1vw;
    box-sizing:border-box
}
.galleryTitles{
    text-align:center
}
.galleryTitle-subtitle{
    margin-bottom:.55vw
}
.galleryTitle-title{
    margin-bottom:2.1vw
}
.galleryFiltersTablet{
    display:none
}
.galleryFilters{
    width:57.7vw;
    margin:0 auto;
    margin-bottom:.8vw
}
.galleryFilter{
    padding:.45vw .95vw;
    color:#fff;
    font-weight:700;
    font-size:.9vw;
    text-transform:uppercase;
    display:inline-block;
    margin-right:.8vw;
    margin-bottom:.8vw;
    letter-spacing:.13vw;
    border:2px solid gray;
    border-radius:100px;
    cursor:pointer;
    transition:border-color .2s,background .2s
}
.galleryFilter:last-child{
    margin-right:0
}
.galleryFilter:hover{
    border-color:#3f82ef
}
.galleryFilter-active{
    background:#3a86ef;
    border-color:#3a86ef
}
.galleryFilter-active:hover{
    border-color:#3a86ef
}
.galleryListWrap{
    width:100%;
    position:relative
}
.galleryList{
    width:57.7vw;
    height:38.55vw;
    position:relative;
    margin:0 auto;
    overflow:hidden
}
.galleryListInner{
    position:absolute;
    top:0;
    left:0
}
.galleryListInnerMain,.galleryListInnerPre,.galleryListInnerPost{
    position:absolute;
    top:0;
    left:0
}
.galleryListInner .galleryImageContainer{
    position:absolute;
    top:0;
    left:0;
    width:17.8vw;
    height:11.45vw;
    background-size:cover;
    background-repeat:no-repeat;
    display:none;
    cursor:pointer
}
.galleryListInner .galleryImageContainer:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.75);
    background-image:url(../images/magnifyingGlass.svg);
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity .2s,background .2s
}
.galleryListInner .galleryImageContainer:hover:before{
    opacity:1
}
.galleryListInner .galleryImageContainer:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:1px solid rgba(255,255,255,.35);
    box-sizing:border-box
}
.galleryImageContainer.galleryImageVideo:before{
    background-color:transparent;
    background-image:url(../images/playIcon.png);
    background-position:center center;
    background-repeat:no-repeat;
    opacity:1
}
.galleryImageContainer.galleryImageVideo:hover:before{
    background-color:rgba(0,0,0,.75)
}
.galleryLeft,.modalImageLeft{
    position:absolute;
    top:50%;
    left:0;
    width:4.2vw;
    height:4.2vw;
    margin-top:-2.1vw;
    background:#2d2d2d;
    border:2px solid #131313;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s
}
.galleryRight,.modalImageRight{
    position:absolute;
    top:50%;
    right:0;
    width:4.2vw;
    height:4.2vw;
    margin-top:-2.1vw;
    background:#2d2d2d;
    border:2px solid #131313;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s
}
.galleryLeft:hover,.galleryRight:hover,.modalImageLeft:hover,.modalImageRight:hover{
    background:#3e3e3e
}
.galleryLeft svg,.galleryRight svg,.modalImageLeft svg,.modalImageRight svg{
    fill:gray;
    width:.9vw;
    transition:fill .2s
}
.galleryLeft:hover svg,.galleryRight:hover svg{
    fill:#8e8e8e
}
.galleryArrowDisabled,.galleryArrowDisabled:hover{
    opacity:.5;
    cursor:default;
    background:#2d2d2d
}
.galleryArrowDisabled svg,.galleryArrowDisabled:hover svg{
    fill:gray
}
.communityContainer{
    direction: rtl;
    padding:6.3vw 12.5vw 5.2vw;
}
.communityGreating{
    position:relative;
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:center;
    margin-bottom:120px
}
.communityGreating-info{
    text-align: center;
    width:49%
}
.communityGreating-btn .btnStartGame{
    box-shadow:0 20px 40px #437eef40
}
.communityGreating-image{
    position:relative;
    width:49%;
    height:26vw;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url(../images/communityGreating.png)
}
/* .communityGreating-image:before{
    content:'';
    position:absolute;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    mix-blend-mode:overlay;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
} */
.communityGreatingImageInner{
    position:relative;
    width:100%;
    height:100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url(../images/communityGreating.png)
}
.communityGreating-text{
    color:#fff;
    font-weight:700;
    font-size:1.3vw;
    line-height:0.6vw;
    letter-spacing:0.25px;
    margin-bottom:2.1vw;
}
.serversContainer{
    position:relative
}
.serversSubtitle{
    margin-bottom:.5vw;
    text-align:center
}
.serversTitle{
    margin-bottom:1vw;
    text-align:center
}
.serversFullOnline{
    text-align:center
}
.serversFullOnline-text{
    color:rgba(255,255,255,.9);
    font-size:1.15vw;
    letter-spacing:2.4px
}
.serversFullOnline-num{
    color:#fff;
    font-weight:700;
    font-size:1.25vw;
    letter-spacing:2.4px;
    margin-left:10px
}
.serversList{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:2.08vw;
    margin-top:2.1vw
}
.serverContainer{
    position:relative;
    background:#303030;
    height:6.8vw;
    border-top:1px solid #424242;
    box-sizing:border-box;
    display:flex;
    align-items:stretch
}
.serverContainer-logo{
    width:6.8vw;
    border-right:1px solid #181818;
    display:flex;
    justify-content:center;
    align-items:center
}
.serverContainer-logo img{
    width:50%
}
.serverContainer-info{
    width:calc(100% - 6.8vw);
    border-left:1px solid #484848;
    display:flex;
    justify-content:center;
    align-items:center
}
.serverInfo-name{
    text-align:center;
    font-size:1.15vw;
    letter-spacing:1.1px;
    margin-bottom:.75vw;
    color:#fff
}
.serverInfo-online{
    text-align:center
}
.serverInfo-onlineText{
    color:#fff;
    font-size:.9vw;
    letter-spacing:.9px
}
.serverInfo-onlineCurrent,.serverInfo-onlineFull{
    color:#fff;
    font-size:1.45vw;
    letter-spacing:1.4px
}
.serverInfo-onlineFull{
    color:#8a8a8a
}
.aboutUs{
    position:relative;
    margin:100px 0 175px;
    padding:0 12.5vw;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.aboutUsImage{
    position:relative;
    width:49%;
    height:26vw;
    background-image:url(../images/bigLogo.png),url(../images/aboutUs.png);
    background-position:center center,center center;
    background-size:63%,contain;
    background-repeat:no-repeat,no-repeat
}
.aboutUsImageInner{
    width:100%;
    height:100%;
    background-image:url(../images/bigLogo.png),url(../images/aboutUs.png);
    background-position:center center,center center;
    background-size:63%,contain;
    background-repeat:no-repeat,no-repeat;
    position:relative
}
.aboutUsImage:before{
    content:'';
    position:absolute;
    left:-40%;
    top:-40%;
    width:180%;
    height:180%;
    background-image:url(../images/redBrush.png);
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    opacity:.25
}
.aboutUsInfo{
    width:49%
}
.aboutUsInfo-subtitle{
    margin-bottom:.5vw
}
.aboutUsInfo-title{
    margin-bottom:1vw
}
.footerImageRectangles{
    background-image:url(../images/rectangleMini.png);
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    z-index:2
}
.footerImageRectangles-1{
    position:absolute;
    top:-5vw;
    right:30vw;
    width:8.9vw;
    height:8.9vw
}
.footerImageRectangles-2{
    position:absolute;
    top:-1.5vw;
    right:24vw;
    width:3.5vw;
    height:3.5vw;
    opacity:.75
}
@keyframes footerRectanglesAnim-1{
    0%,to{
        -webkit-transform:translate(0);
        transform:translate(0)
    }
    50%{
        -webkit-transform:translateY(10%);
        transform:translateY(10%)
    }
}
@keyframes footerRectanglesAnim-2{
    0%,to{
        -webkit-transform:translate(0);
        transform:translate(0)
    }
    50%{
        -webkit-transform:translateY(-10%);
        transform:translateY(-10%)
    }
}
.footer{
    position:relative;
    padding:5.2vw 12.5vw 4.2vw;
    background:rgba(41,41,41,.2)
}
.footer:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:20px;
    background:rgba(255,255,255,.3);
    mix-blend-mode:overlay;
    z-index:1
}
.footer-contacts{
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:2.1vw
}
.footer-socials{
    display:flex;
    justify-content: center;
    align-items: center;
}
.footerContacts-title{
    font-weight:700;
    font-size:1.45vw;
    color:#ff3a3a;
    letter-spacing:2.8px;
    margin-bottom:.85vw
}
.footerContacts-emails{
    display:flex;
    justify-content:start
}
.footerContacts-email{
    margin-right:2.1vw
}
.footerContacts-emailTitle{
    font-size:.9vw;
    letter-spacing:1.8px;
    color:#888;
    margin-bottom:.3vw
}
.footerContacts-emailAddress{
    position:relative;
    font-size:1.15vw;
    letter-spacing:2.2px;
    color:#fff;
    cursor:pointer
}
.footerContacts-emailAddress .bufferTooltip{
    position:absolute;
    bottom:calc(100% - 3px);
    right:0;
    background:rgba(23,23,23,.98);
    color:rgba(255,255,255,.5);
    box-shadow:0 3px 10px rgba(0,0,0,.35);
    padding:5px 10px;
    font-size:14px;
    white-space:nowrap
}
.footerRights div{
    display:inline-block;
    text-decoration:underline;
    font-size:.9vw;
    letter-spacing:1.8px;
    color:#fff;
    opacity:.25;
    margin-right:2.1vw;
    transition:opacity .5s;
    cursor:pointer
}
.footerRights span:hover{
    opacity:.35
}
.footerSocials-title{
    font-size:.9vw;
    letter-spacing:2.8px;
    color:#fff;
    opacity:.5;
    margin-bottom:1.2vw;
    text-align:right
}
.footerSocials-icons a {
    text-decoration: none;
}
.footerSocials-icons img{
    width:3.15vw;
    margin-left:1vw;
    opacity:.5;
    cursor:pointer;
    transition:opacity .5s
}
.footerSocials-icons img:hover{
    opacity:.9
}
.footerCopyright{
    font-size:.8vw;
    letter-spacing:1.6px;
    color:#fff;
    opacity:.75;
    text-align:center;
    direction: rtl;
}
.inputFieldContainer input:-webkit-autofill{
    border:1px solid rgba(255,255,255,.25);
    -webkit-text-fill-color:#fff;
    box-shadow:0 0 0 1000px transparent inset;
    transition:background-color 5000s ease-in-out 0s,border-color .2s,box-shadow .2s
}
.inputFieldContainer input:-webkit-autofill:hover{
    border-color:rgba(255,255,255,.35);
    -webkit-text-fill-color:#fff;
    box-shadow:0 0 0 1000px transparent inset;
    transition:background-color 5000s ease-in-out 0s
}
.inputFieldContainer input:-webkit-autofill:focus{
    border-color:rgba(255,255,255,.35);
    -webkit-text-fill-color:#fff;
    box-shadow:0 0 0 1000px transparent inset;
    transition:background-color 5000s ease-in-out 0s
}
@media(max-height:650px){
    .welcome{
        min-height:950px
    }
}

#usedesk-messenger {
    display: none;
}