/* e-Ukraine-regular 400 */
@font-face {
  font-family: 'e-Ukraine-regular';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('resources/fonts/e-Ukraine-Regular.woff2') format('woff2'),
       url('resources/fonts/e-Ukraine-Regular.woff') format('woff');
}

/* e-Ukraine-Bold 700 */
@font-face {
  font-family: 'e-Ukraine-Bold';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('resources/fonts/e-Ukraine-Bold.woff2') format('woff2'),
       url('resources/fonts/e-Ukraine-Bold.woff') format('woff');
}

/* e-Ukraine-Light 300 */
@font-face {
  font-family: 'e-Ukraine-Light';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('resources/fonts/e-Ukraine-Light.woff2') format('woff2'),
       url('resources/fonts/e-Ukraine-Light.woff') format('woff');
}


html {height:100%;}
body {height:100%;overflow:hidden;margin:0;padding:0;font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height: 1.2;color:#494949;user-select: none;background-color:#000000;}
div, p, span, h1, h2, h3, h4, ol {vertical-align: baseline;margin:0;padding:0;box-sizing: border-box;}
img{max-width:100%;vertical-align:middle;}
.blk{display:block;}
.hide{display:none;}
a {color:#3a84df;outline:none;}
a:hover {color:#b22222;}
a:focus {outline:none;}
#get-device {display:none;font-size:10px;}
.nozo {touch-action: pan-x pan-y;-webkit-touch-callout: none; -khtml-user-select: none;}
.unselectable {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }


/* ---------------------------- */
/* SCREENSAVER */
/* ---------------------------- */
#screensaver {position:fixed;top:0;left:0;right:0;bottom:0;background-color:#121212;z-index:99999;min-width:100%;height:100%;}
#screensaver .img {width: 80px;position: absolute;transform: translateX(-50%) translateY(-50%);top: 50%;left: 50%;}
#loading-spinner.spinner {position: absolute;top: 50%;left: 50%;margin-top: -70px;margin-left: -70px;z-index: 19 !important;animation: loading-spinner 1900ms linear infinite;}
#loading-spinner.spinner .spinner-icon {width: 140px;height: 140px;border:  solid 3px transparent;border-top-color: #fed200bf !important;border-left-color: #fed200bf !important;border-radius: 50%;}
@keyframes loading-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/* ---------------------------- */
/* ПОДСКАЗКА УПРАВЛЕНИЯ ------ */
/* --------------------------- */
.podskazka-boss {position:absolute;top:0;left:0;bottom:0;right:0;z-index:42;width:100%;height:100%;background: #0a0a0ae0;}
.podskazka-shef {height:100%;color:#fff;text-align:center;font-size: 16px;line-height: 1.4em;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;-ms-align-items: center;align-items: center;-webkit-justify-content: center;-ms-justify-content: center;justify-content: center;font-family: 'e-Ukraine-regular';}
.podskazka-desktop {display: flex;flex-direction: column;flex-wrap: wrap;align-content: center;align-items: center;}
.podskazka-desktop .move {display: flex;flex-direction: column;align-items: center;}
.podskazka-desktop .move img{display:block;width: 130px;margin-top: 38px;}
.podskazka-desktop .move span {font-family: 'e-Ukraine-Light';display: block;font-size: 15px;margin-top: 14px;}
.podskazka-boss .promt {width: 100%;font-size: 18px;font-family: 'e-Ukraine-Bold';}
.podskazka-boss .promt-ok {color: #ffffff;background: #37474f;/* backdrop-filter: blur(4px); */border-radius: 2px;cursor: pointer;width: 134px;margin-top: 70px;display: flex;flex-direction: column;justify-content: center;align-items: center;/* border: 2px solid #ffffff85; *//* box-shadow: 0 0 2px 0 #ffffff; */}
.podskazka-boss .promt-ok span {display:block;font-family: 'e-Ukraine-Light';line-height: 1;font-size: 15px;padding: 11px 0 13px;}

.podskazka-mobile {width: 320px;display: flex;flex-direction: column;flex-wrap: wrap;align-content: center;align-items: center;}
.podskazka-mobile .move {display: flex;flex-direction: column;align-items: center;}
.podskazka-mobile .move img{display:block;width: 98px;margin-top: 38px;margin-left: -4px;}
.podskazka-mobile .move span {font-family: 'e-Ukraine-Light';display: block;font-size: 15px;margin-top: 14px;}

/* ---------------------------- */
/* БЛОКИРОВКА ГОРИЗОНТАЛЬНОГО ЭКРАНА НА ТЕЛЕФОНАХ ------------- */
/* --------------------------- */
.landscape_mode{width:100%;height:100vh;background: #171717;position:fixed;overflow:hidden;top:0;left:0;bottom:0;right:0;z-index: 9999;display:none;}
.landscape_mode .wrapper {display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;align-content: center;height: 94%;}
.landscape_mode span {font-family: 'e-Ukraine-regular';font-size: 15px;color: #fff;}
.landscape_mode img {width: 90px;margin-top: 38px;}

/* ---------------------------- */
/* КНОПКИ ПЕРЕХОДА ОКУЛУС И КАРДБОРД ------ */
/* --------------------------- */
#oculus-baffle {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;background: #000000;}
#black-div {width:100%;height:100%;background: #171717;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999;}
.vr-help {margin:0 auto;text-align:center;width:100%;height:100%; display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;}
.vr-help img {display:block;width:100px;margin: 0 auto 40px;transform: scaleX(-1) rotate(90deg);}
.vr-help span {display:block;color:#fff;font-family: 'e-Ukraine-Light';font-size:15px;line-height:1.5;}

/* ---------------------------- */
/* INTRO 360*640 baza ------------- */
/* --------------------------- */
.intro-boss-wrapper {background: #575656 url(resources/img/bg-mobile-2.jpg);background-size: cover;background-position: 50% 0%;background-repeat: no-repeat;z-index: 9999;overflow: hidden;width:100%;height:100%;position:absolute;top: 0;left: 0;right:0;bottom:0;text-align:center;color: #fff;display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center;justify-content: center;}
.intro-boss-wrapper:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgb(0 0 0 / 50%);z-index:1;}
.intro-creator {font-family: 'e-Ukraine-Light';font-size: 14px;z-index: 2;position: relative;opacity: 0.8;}
.intro-title-wrapper {z-index:2;position: relative;display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;}
.intro-title {margin: 0 0 0 0;}

.intro-title img {width: 76%;}

.intro-button {background: #fbd133;border-radius: 2px;margin: 32px auto 0;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;width: 200px;height: 46px;font-family: 'e-Ukraine-Bold';cursor: pointer;}
.intro-button span {display: block;color: #000000;font-size: 14px;text-transform: uppercase;line-height: 1;}

.intro-boss-wrapper .filler {margin: 0 auto 0;width: 188px;height: 30px;}
.intro-button-vr {position: absolute;left: 0;right: 0;bottom: 42px;margin: 0 auto 0;width: 188px;display: flex;flex-wrap: nowrap;align-items: center;flex-direction: row;justify-content: center;z-index: 2;}
.intro-button-vr img {display:block;width: 32px;aspect-ratio: 23 / 18;}
.intro-button-vr span {display:block;font-family: 'e-Ukraine-Light';margin-left: 11px;font-size: 12px;color: #dddddd;}

.intro-lng {z-index: 2;margin-top:30px;}
.intro-lng .wrapper {font-family: 'e-Ukraine-Bold';display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;}
.intro-lng .wrapper a{color:#fff;text-decoration:none;}
.intro-lng .wrapper a:hover{/* text-decoration:underline; */color: #fbd133;}
.language-ua, .language-en {/* border-radius: 42px; */border-bottom: 3px solid transparent;display: flex;/* width: 38px; */height: 32px;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;font-size: 18px;line-height: 1;margin: 0 10px;}
.intro-lng .wrapper .active {/* border: 2px solid #fff; */color: #fdd84e;border-bottom: 3px solid #fdd84e;}

#intro_kdlogo {display:flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;z-index: 1;position: absolute;top: 20px;left: 0;right: 0;}
#intro_kdlogo div {border: 2px solid #fbd133;font-family: Verdana;margin-left: 20px;}
#intro_kdlogo img {display: block;height: 20px;}
#intro_kdlogo div span {display: block;font-size: 10px;text-align: center;color: #fbd133;padding: 4px 6px;}

/* ---------------------------- */
/* DOWN ------ */
/* --------------------------- */

/* - !!!!!!!!!!!! - - - 342 px - - - !!!!!!!!!!!! - */
@media screen and (max-width: 342px) {
.intro-button-vr {bottom: 28px;}
.podskazka-description {width: 280px;}
}

/* - !!!!!!!!!!!! - - - 330 px - - - !!!!!!!!!!!! - */
@media screen and (max-width: 330px) {
.podskazka-description {width: 260px;}
.ico-promt .section {width: 250px;}
.ico-promt .section span {width: 170px;}
.podskazka-boss .promt-ok {width: 240px;}
}

/* - !!!!!!!!!!!! - - - 360 px - - - !!!!!!!!!!!! - */
@media screen and (max-width: 360px) {
.language-ua, .language-en {font-size: 16px;}
}


/* ---------------------------- */
/* UP ------ */
/* --------------------------- */
/* - !!!!!!!!!!!! - - - 410 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 410px) {
.podskazka-description {width: 355px;}
}

/* - !!!!!!!!!!!! - - - 480 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 480px) {
.intro-button {width: 220px;height: 52px;}
.intro-button span {font-size: 18px;}
.intro-button-vr {bottom: 42px;}
}

/* - !!!!!!!!!!!! - - - 520 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 520px) {
.intro-button-vr {display:none;}
.intro-lng {position: fixed;bottom: 52px;top: auto;}
}

/* - !!!!!!!!!!!! - - - 600 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 600px) {
.language-ua, .language-en {/* width: 50px; *//* height: 50px; */font-size: 22px;height: 38px;}
.podskazka-description {width: 520px;}
.intro-boss-wrapper .filler {height: 70px;}
}

/* - !!!!!!!!!!!! - - - 768 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 768px) {
.intro-boss-wrapper .filler {height: 60px;}
.intro-button {width: 240px;height: 57px;}
.intro-title img {width: 66%;}
.podskazka-description {width: 650px;}
.ico-promt {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}
.ico-promt .column {width: 300px;}
.promt-close {display:none;}
.section.edit {display: flex;flex-direction: column;align-items: center;text-align: center;border-left: 1px solid #ffffff96;height: 360px;justify-content: center;width: 300px;}
.ico-promt .section div.ico-promt-mobile {width: 100px;height: 100px;margin-left: -15px;}
.ico-promt-mobile img {margin-left: -25px;}
.section.edit span {width: 207px;margin-top: 30px;margin-left: -15px;}
.podskazka-boss .promt-ok {margin: 50px auto 30px;width: 160px;}
#intro_kdlogo {top: 40px;}
#intro_kdlogo div {margin-left: 30px;}
#intro_kdlogo img {height: 22px;}
#intro_kdlogo div span {font-size: 12px;}
}


/* - !!!!!!!!!!!! - - - центрирование подсказки - - - !!!!!!!!!!!! - */
@media screen and (min-width: 768px) and (min-height: 665px) and (orientation: portrait) {
.podskazka-boss {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.podskazka-shef {height: auto;}
.podskazka-description .content {width: 600px;margin: 0 auto;}
.podskazka-description {margin: 40px auto 0;}
.podskazka-boss .promt {font-size: 20px;}
.ico-promt {margin: 40px auto 0;}
.podskazka-boss .promt-ok {margin: 100px auto 0;}
}


/* - !!!!!!!!!!!! - - - 1010 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1010px) {
.intro-boss-wrapper {background: #575656 url(resources/img/1280.jpg);background-size: cover;background-position: 50% 100%;background-repeat: no-repeat;}
.intro-button {margin: 42px auto 0;width: 248px;}
.intro-button:hover {background: #fbc02d;}
.intro-title img {width: 530px;}
#get-device {font-size:20px;}
#promt-mobile {display:none;}
#promt-desktop {display: flex;}
.podskazka-boss .promt-ok:hover {background: #263238;}
}


/* - !!!!!!!!!!!! - - - центрирование подсказки 1010 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1010px) and (min-height: 665px) and (orientation: landscape) {
.podskazka-boss {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.podskazka-shef {height: auto;}
.podskazka-boss .promt-ok:hover {background: #263238;}
.podskazka-description {width: 830px;}
.ico-promt .section div.ico-promt-mobile {width: 120px;height: 100px;}
.ico-promt-mobile img {margin-left: 0;margin-top: 0;}
.section.edit span {margin-top: 40px;}
}

/* - !!!!!!!!!!!! - - - центрирование подсказки  1280 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1280px) and (min-height: 750px) and (orientation: landscape) {
.ico-promt {margin: 30px auto 0;}
.podskazka-boss .promt-ok {margin: 50px auto 20px;}
}

/* - !!!!!!!!!!!! - - - 1280 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1280px) {
.intro-title img {width: 640px;}
}

/* - !!!!!!!!!!!! - - - 1281 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1281px) {
.intro-boss-wrapper {background: #575656 url(resources/img/1440.jpg);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
}

/* - !!!!!!!!!!!! - - - 1441 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1441px) {
.intro-boss-wrapper {background: #575656 url(resources/img/1680.jpg);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
}

/* - !!!!!!!!!!!! - - - 1681 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1681px) {
.intro-boss-wrapper {background: #575656 url(resources/img/1920.jpg);background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
.intro-title img {width: 840px;}
}

/* - !!!!!!!!!!!! - - - 1920 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1920px) {
.intro-button {margin: 72px auto 0;width: 350px;height: 80px;}
.intro-button span {font-size: 25px;}
.intro-lng {bottom: 72px;}
.language-ua, .language-en {width: 70px;height: 70px;font-size: 20px;}
#intro_kdlogo {top: 80px;}
#intro_kdlogo img {height: 32px;}
#intro_kdlogo div span {font-size: 20px;padding: 6px 8px;}
}

/* - !!!!!!!!!!!! - - - 2400 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 2400px) {
}

@media screen and (min-width: 960px) and (max-height: 620px) and (orientation: landscape) {
.intro-lng {bottom: 42px;}
}