* { margin: 0px; padding: 0px; border: 0;}
*,*::before, *::after {box-sizing: border-box;}
table {border-collapse: collapse; border-spacing: 0;}
html,body {height: 100%;}
a > img {border: none;}
input, button, textarea, select, a, img {outline: none;}
body {width: 100%; color: #FFFFFF; background-color: #0F1316; font-size: 20px; overflow-x: hidden; min-width: 320px; position: relative; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;} 
.wrap {min-height: 100%; overflow-x: hidden;}
#main {padding-bottom: 200px;}
footer {min-height: 200px; margin-top: -200px; position: relative; width: 100%; background-color: #0F1316;}
.inline {width: 100%; position: relative; display: inline-block;}
.align_center {position: relative; width: 100%;}
.align_center:after {content: ''; display: block; clear: both;}
.align_center_to_left {position: relative; right: 50%; float: right;}
.align_center_to_right {position: relative; z-index: 1; right: -50%;}
.tbl {display: table; width: 100%;}
.tbl > div {display: table-cell;}
.clearfix:after {content: ''; display: table; clear: both;}
.flex {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} 
.flex > div {display: -webkit-flex; display: -ms-flexbox; display: flex;}
.no_select {-moz-user-select: none; -khtml-user-select: none; user-select: none;}
.bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-size: cover; background-position: 50% 50%;}
.bg > img, .bg video {position: absolute; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; font-family: 'object-fit: cover;';}
.ratio-inner {position: relative; height: 0; border: none;} 
.ratio-content {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.ratio-1-1 {padding-top: 100%;}
.ratio-2-3 {padding-top: 64%;}
.ratio-3-2 {padding-top: 140%;}
.flex2, .flex3 {display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%;}
.flex2 > div, .flex3 > div {display: -webkit-flex; display: -ms-flexbox; display: flex;}
.flex2 > div:first-child, .flex3 > div:last-child {height: auto; align-self: stretch;}
.flex2 > div:last-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-end; -webkit-box-align: end; -ms-flex-align: end;}
.flex3 > div:first-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start;}
img.imgborder {max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.stickySide {position: sticky; top: 0px; min-height: 32px; margin: 0 0 0px;} 
.marginTop-80 {margin-top: 80px;}
.marginTop-88 {margin-top: 88px;}
.marginTop-100 {margin-top: 100px;}
.marginTop-24 {margin-top: 24px;}
.marginTop-16 {margin-top: 16px;}
.marginTop-8 {margin-top: 8px;}
.marginTop-32 {margin-top: 32px;}
.marginTop-40 {margin-top: 40px;}
.marginTop-48 {margin-top: 48px;}
.marginTop-56 {margin-top: 56px;}
.marginTop-64 {margin-top: 64px;}
.marginTop-120 {margin-top: 120px;}

.centered {width: 1640px; margin: 0 auto; position: relative;}
#top {width: 100%; position: relative; z-index: 3; padding: 40px 0 0;}
#topBody > div {align-items: flex-start; position: relative;}
#topBody > div:first-child {width: 370px;}
#topBody > div:last-child {width: calc(100% - 370px); padding-left: 80px;}
#topBody > div:first-child img {display: block; width: auto; height: 100px;}
#topBody > div:last-child {justify-content: flex-end; padding-top: 20px;}
#topBody > div:last-child ul {list-style: none;}
#topBody > div:last-child ul li {float: left; margin-left: 40px;}
#topBody > div:last-child ul li a, #topBody > div:last-child ul li a:visited, #footerTopMenu > li a, #footerTopMenu > li a:visited {font-size: 20px; font-weight: 500; color: #fff; cursor: pointer; transition: all 0.1s linear;}
#topBody > div:last-child ul li a:hover, #footerTopMenu > li a:hover {color: #FFD2F4; transition: all 0.1s linear;}
#mpBlock1 {position: relative; overflow: hidden; z-index: 1; margin-top: -140px;}
#mpBlock1Body {min-height: 100vh; width: 100%; position: relative; z-index: 5;}
#mpBlock1Body > div {align-items: flex-end; padding-bottom: 80px; padding-top: 180px;}
#mpBlock1Body > div:first-child {width: calc(58% - 10px); padding-right: 8%; margin-right: 10px;}
#mpBlock1Body > div:last-child {width: calc(42% - 10px); margin-left: 10px;}
#mpBlock1 > .bg {z-index: 1;}
#mpBlock1:before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); opacity: 0.4;}
#mpBlock1:after {content: ''; display: block; width: 100%; height: 40%; position: absolute; bottom: 0px; left: 0px; z-index: 3; background: linear-gradient(to bottom,  rgba(15,19,22,0) 0%,rgba(15,19,22,1) 100%); opacity: 1;}
.txt h1 {font-size: 56px; font-weight: 400; line-height: 0.95; margin-bottom: 40px;}
.txt p {line-height: 1.2; margin-top: 24px;}
#mpBlock1Body > div:first-child .txt p {font-size: 20px; width: 80%;}
.button {float: left; height: 56px; padding: 0 24px; border-radius: 10px; margin-left: 20px; text-decoration: none; transition: all 0.1s linear; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color: #fff; border: 1px solid #fff; background-color: transparent; cursor: pointer; font-size: 18px;}
.button:first-child {margin-left: 0px;}
.button > div {height: auto; align-items: center; height: 100%;}
.button--two > div:first-child {width: 32px;}
.button--two > div:first-child svg {width: 100%; height: auto; display: block;}
.button--two > div:last-child {padding-left: 16px;}
.button--discord {border-color: #5865F2; background-color: #5865F2;}
.button--discord:hover {background-color: #4150F1; border-color: #4150F1;}
.button--vk {border-color: #0077FF; background-color: #0077FF;}
.button--vk:hover {background-color: #0069E0; border-color: #0069E0;}
.button--discord .fill, .button--vk .fill {fill: #fff; transition: all 0.1s linear;}
/*.button--discord:hover .fill, .button--vk:hover .fill {fill: #0F1316; transition: all 0.1s linear;}*/
.mpBlock1Dayz {height: 56px; border-radius: 10px; padding: 0 24px; background-color: #FFD2F4; float: left;}
.mpBlock1Dayz > div {align-items: center; height: 100%;}
.mpBlock1Dayz img {width: 64px; height: auto; display: block;}
#mpBlock1Dashboard {width: 100%; position: relative;}
#mpBlock1Dashboard > div:first-child {width: calc(38% - 10px); margin-right: 10px;}
#mpBlock1Dashboard > div:last-child {width: calc(62% - 10px); margin-left: 10px;}
#mpBlock1Dashboard > div:first-child .flex {width: 100%; background-color: rgba(15,19,22,0.48); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 10px;}
.mpBlock1DashboardEl {padding: 32px;}
.mpBlock1DashboardEl > p:first-child {line-height: 1; font-size: 78px; font-weight: 300;}
.mpBlock1DashboardEl > p:last-child {line-height: 1.2; margin-top: 8px;}
#mpBlock1Dashboard > div:first-child .flex > div:first-child {border-bottom: 1px solid #323232;}
#mpBlock1DashboardVideo {width: 100%; height: 100%; background-color: #0F1316; border-radius: 10px; cursor: pointer;}
#mpBlock1DashboardVideo > div:first-child {position: relative; overflow: hidden;}
#mpBlock1DashboardVideo > div:first-child .bg {z-index: 1; overflow: hidden; border-radius: 10px 10px 0 0;}
#mpBlock1DashboardVideo > div:first-child .bg img {transition: all 0.1s linear;}
#mpBlock1DashboardVideo:hover > div:first-child .bg img {transform: scale(1.1,1.1); transition: all 0.1s linear;}
#mpBlock1DashboardVideo > div:first-child:after {content: ''; display: block; width: 100%; height: 40%; position: absolute; bottom: 0px; left: 0px; z-index: 3; background: linear-gradient(to bottom,  rgba(15,19,22,0) 0%,rgba(15,19,22,1) 100%); opacity: 1;}
#mpBlock1DashboardVideo > div:last-child {padding: 32px;}
#mpBlock1DashboardVideo > div:last-child > .flex {width: 100%;}
#mpBlock1DashboardVideo > div:last-child > .flex > div:first-child {width: 56px;}
#mpBlock1DashboardVideo > div:last-child > .flex > div:first-child > div {width: 56px; height: 56px; border-radius: 50%; transition: all 0.1s linear;}
#mpBlock1DashboardVideo:hover > div:last-child > .flex > div:first-child > div {background-color: #323232; transition: all 0.1s linear;}
#mpBlock1DashboardVideo > div:last-child > .flex > div:first-child > div > img {display: block; width: 100%; height: 100%;}
#mpBlock1DashboardVideo > div:last-child > .flex > div:last-child {width: calc(100% - 56px); padding-left: 20px; line-height: 1.1; font-size: 24px; font-weight: 400;}
.txt h2 {font-size: 40px; line-height: 0.95; font-weight: 400;}
.blockTop > div {align-items: flex-end;}
.blockTop > div:first-child {width: calc(58% - 10px); margin-right: 10px;}
.blockTop > div:last-child {width: calc(42% - 10px); margin-left: 10px; justify-content: flex-end;}
.slickWrp {overflow: hidden;}
.slickWrpBody {width: calc(100% + 20px); margin-left: -20px; position: relative;}
.slickWrpBody .slick-slide {margin-left: 20px;}
.button--icon {width: 56px; padding: 0 0; align-items: center;}
.button--icon > div {width: 100%; align-items: center; justify-content: center;}
.button--icon svg {display: block; width: 32px; height: auto;}
.button--hollow .fill {fill: #fff;}
.button--hollow:hover {background-color: #fff; color: #0F1316; transition: all 0.1s linear;}
.button--hollow:hover .fill {fill: #0F1316; transition: all 0.1s linear;}
.serversEl {border-radius: 10px; background: linear-gradient(to bottom,  rgba(15,19,22,0) 0%,rgba(50,50,50,1) 100%); border: 1px solid #323232;}
.serversEl > div:first-child {padding: 16px;}
.serversEl > div:first-child > div {width: 100%; position: relative;}
.serversElTop {width: 100%; border-radius: 8px; position: relative; overflow: hidden;}
.serversElTop .bg {z-index: 1;}
.serversElTopBlock {position: absolute; width: 100%; height: 100%; z-index: 2; top: 0px; left: 0px; background: linear-gradient(to bottom,  rgba(255,210,244,0.2) 0%,rgba(15,19,22,0.2) 100%); align-items: flex-end; padding: 16px;}
.serversElTopBlock:before {content: ''; display: block; width: 64px; height: 64px; background: url('../img/icon-logo.svg') no-repeat; top: 16px; left: 16px; position: absolute;}
.serversElInfoBottomDashboardPie {width: 64px; height: 64px; position: relative; z-index: 3; margin-left: calc(100% - (64px + 16px)); margin-top: 16px;}
.serversElInfoBottomDashboardPie:before {content: 'Сервер заполнен на'; position: absolute; left: -150px; border-radius: 12px 0 0 12px; top: 50%; margin-top: -12px; height: 24px; line-height: 24px; background-color: #0F1316; color: #fff; font-size: 12px; text-transform: uppercase; padding: 0 10px; font-weight: 500;}
.progressRing {z-index: 2; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;}
.progressRing .flex {width: 64px; height: 64px; position: absolute; left: 50%; top: 50%; border-radius: 50%; margin-left: -32px; margin-top: -32px; border: 4px solid #0F1316; background-color: #0F1316; border-radius: 50%;}
.progressRing .flex > div {width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 18px; font-weight: 500;}
.pie {
  --p:20;
  --b:4px;
  --c:#FFD2F4;
  --w:64px;
  width:var(--w);
  height: var(--w);
  aspect-ratio:1;
  position:relative;
  display:block;
  margin-top: 0px;
  margin-left: 0px;
  place-content:center;
  font-family:sans-serif;
  z-index: 3;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#0F1316 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#0F1316 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.labels {width: 100%;}
.label {float: left; height: 32px; padding: 0 16px; line-height: 32px; text-transform: uppercase; font-size: 14px; font-weight: 500; background-color: rgba(15,19,22,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; margin-top: 10px; margin-right: 10px;}
.serversElInfo {padding: 32px 16px 0;}
.txt h3 {font-size: 32px; line-height: 0.95; font-weight: 400;}
.serversElInfoEl {margin-top: 20px; font-size: 16px;}
.serversElInfoEl p {line-height: 1.2; margin-top: 4px;}
.serversElInfoEl p:first-child {margin-top: 0px;}
.serversElInfoEl p b, .serversElInfoEl p strong {font-weight: 500;}
.serversEl > div:last-child {padding: 40px 32px 32px;}
.button--steam {border-color: #000000; background-color: #000000;}
.serversEl > div:last-child > .flex {width: 100%;}
.serversEl > div:last-child > .flex > div:last-child {padding-left: 20px; flex: 1 1 0;}
.serversEl > div:last-child > .flex > div:last-child > div {width: 100%;}
.serversEl > div:last-child > .flex > div:last-child > div .button {width: 100%; justify-content: center;}
.button--steam:hover {border-color: #141414; background-color: #141414;}
#mpBlockServers .centered {position: relative; z-index: 2;}
.block {width: 100%; position: relative;}
#mpBlockServers > img {display: block; width: 100%; height: auto; position: absolute; top: -80px; left: 0;}
#mpPromoBlock {border-radius: 10px; overflow: hidden; cursor: pointer;}
#mpPromoBlock > .bg {z-index: 1; overflow: hidden; border-radius: 10px;}
#mpPromoBlock > .flex {z-index: 2; position: relative; padding: 56px 0; justify-content: center;}
.txt b, .txt strong {font-weight: 500;}
#mpPromoBlock > .flex > div {width: 820px; justify-content: center;}
#mpPromoBlock > .flex > div .txt {text-align: center;}
#mpPromoBlock > .flex > div .txt p span {text-decoration: underline; transition: all 0.1s linear;}
#mpPromoBlock:hover > .flex > div .txt p span {color: #FFD2F4; transition: all 0.1s linear;}
#mpPromoArrow {position: absolute; top: 16px; right: 16px; z-index: 2;}
#mpPromoBlock:hover #mpPromoArrow .button {background-color: #fff;}
#mpPromoBlock:hover #mpPromoArrow .fill {fill: #0F1316;}
.width-60 {width: calc(58% - 10px);}
.ratio-16-9 {padding-top: 56.25%;}
.columns > div {align-items: flex-start;}
.columns > div > div {width: 100%;}
.columns-2-68 > div:first-child {width: 68%; padding-right: 20px;}
.columns-2-68 > div:last-child {width: 32%;}
.txt p:first-child {margin-top: 0px;}
.columns-2-68 > div:first-child .txt {width: 60%;}
.columns-2-68 > div:last-child .ratio {overflow: hidden; border-radius: 10px;}
#thesis > div {width: calc((100% - 60px) / 4); margin-left: 20px; margin-top: 20px; position: relative;}
#thesis > div:nth-child(-n+4) {margin-top: 0px;}
#thesis > div:nth-child(4n+1) {margin-left: 0px;}
.thesisEl {border: 1px solid #323232; width: 100%; height: 100%; border-radius: 10px; padding: 32px; background-color: rgba(15,19,22,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.thesisEl img {display: block; width: 32px; height: 32px;}
.txt h4 {font-size: 24px; font-weight: normal; line-height: 1;}
.thesisEl .txt {margin-top: 20px;}
.thesisEl .txt p {margin-top: 16px; font-size: 18px;}
#mpAbout {background: url('../img/fog.png') no-repeat; background-position: 50% 100%; background-size: cover;}
.padding-120 {padding: 120px 0;}
.bg-f5f5f5 {background-color: #F5F5F5; color: #0F1316;}
.block:last-child {padding-bottom: 120px;}
.accordeon {width: 820px; margin: 0 auto; border-bottom: 1px solid #0F1316;}
.accordeonTop {cursor: pointer; padding: 24px 0; width: 100%;}
.accordeon:first-child .accordeonTop {padding-top: 0px;}
.accordeon:last-child {border-bottom: none;}
.accordeon:last-child .accordeonTop {padding-bottom: 0px;}
.accordeonTop > div {align-items: center;}
.accordeonTop > div:first-child {width: calc(100% - 40px); padding-right: 20px;}
.accordeonTop > div:last-child {width: 40px;}
.accordeonTop > div:last-child .flex {width: 40px; height: 40px; border-radius: 10px; border: 1px solid #0F1316; font-size: 24px; font-weight: 400; justify-content: center;}
.accordeonBody {display: none; padding: 8px 0 24px;}
#mpFaqTxt {text-align: center; width: 820px; margin: 0 auto; margin-top: 80px;}
#footerTop {padding: 32px 0;}
#footerTop > div {align-items: center;}
#footerTop > div:first-child {width: 370px;}
#footerTop > div:nth-child(2) {width: calc(100% - (370px + 215px));}
#footerTop > div:last-child {width: 215px;}
#footerTop > div > div {width: 100%;}
#footerTopLogo img {display: block; width: 210px; height: auto;}
#footerTopInfo p {font-size: 16px; margin-top: 8px; line-height: 1;}
#footerTopInfo p:first-child {margin-top: 0px;}
#footerTopMenu {list-style: none;}
#footerTopMenu > li {float: left; margin-right: 40px; margin-top: 8px;}
#footerTopSocial .button {border-color: #323232; width: 40px; height: 40px; margin-right: 10px; margin-left: 0px;}
#footerTopSocial .button img {width: 24px; height: auto; display: block;}
#footerTopSocial .button:hover {background-color: #323232;}
#footerTopDonat {width: 100%; height: auto; display: block; color: #fff; text-decoration: none; padding: 20px; border: 1px solid #323232; border-radius: 10px; background-color: rgba(15,19,22,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: linear-gradient(to bottom,  rgba(15,19,22,0) 0%,rgba(50,50,50,1) 100%);}
#footerTopDonat .txt p {font-size: 18px; margin-top: 12px; font-weight: 500;}
#footerTopDonat img {display: block; width: 40px; height: auto;}
#footerBottom {border-top: 1px solid #323232; padding: 32px 0;}
#footerBottom p {line-height: 0.95; font-size: 16px;}
#footerBottom p a, #footerBottom p a:visited {color: #fff; text-decoration: none;}
#footerBottom p a b {font-weight: 500; text-decoration: underline; transition: all 0.1s linear;}
#footerBottom p a:hover b {color: #FFD2F4; transition: all 0.1s linear;}
#mdl {display: none; padding: 48px; color: #0F1316; background-color: #fff; width: 820px; position: relative;}
#mdl .ratio {width: 100%;}
.ratio-smdl {padding-top: 32%;}
#mdlCover {margin-bottom: 40px; border-radius: 10px; overflow: hidden;}
#menuIconWrp {display: none;}
#panel {display: none;}
.scrollTracking, .scrollTracking3 {opacity: 0;}
.scrollTracking.scrollTracking--active, .scrollTracking3.scrollTracking--active {opacity: 1; -webkit-transition: all 0.6s 0.2s ease; -moz-transition: all 0.6s 0.2s ease; -o-transition: all 0.6s 0.2s ease; transition: all 0.6s 0.2s ease;}
.scrollTracking2 {-moz-transform: translate(0px, 80px); -webkit-transform: translate(0px, 80px); -o-transform: translate(0px, 80px); -ms-transform: translate(0px, 80px); transform: translate(0px, 80px); opacity: 0; -webkit-transition: all 0.3s 0.2s ease; -moz-transition: all 0.3s 0.2s ease; -o-transition: all 0.3s 0.2s ease; transition: all 0.3s 0.2s ease;}
.scrollTracking2.scrollTracking--active {-moz-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}

#mpBlock1BodyBottomL .button {width: 100%; justify-content: center;}
#mpBlock1BodyBottomL .button div:first-child svg {display: block; width: 32px; height: 32px;}
#mpBlock1BodyBottomL .button div:nth-child(2) {padding-left: 16px;}
#mpBlock1BodyBottomS .button {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 20px; justify-content: center;}
#mpBlock1BodyBottomS .button:nth-child(2n+1) {margin-left: 0;}
.button--launcher {border-color: #fff; background-color: #fff; color: #0f1316; transition: all 0.1s linear;}
.button--launcher:hover {border-color: #ffd2f4; background-color: #ffd2f4; transition: all 0.1s linear;}