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

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

@font-face {
    font-family: 'e-Ukraine';
    src: url('resources/fonts/e-Ukraine-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

/* ----------------------------------------------------- */
/* e-UkraineHead */
@font-face {
    font-family: 'e-UkraineHead';
    src: url('resources/fonts/e-UkraineHead-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'e-UkraineHead';
    src: url('resources/fonts/e-UkraineHead-UltraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

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

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

@font-face {
    font-family: 'e-UkraineHead';
    src: url('resources/fonts/e-UkraineHead-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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




html {height:100%;overflow: hidden;}
body {height:100%;overflow: hidden;margin:0;padding:0;font-family: Arial, Helvetica, sans-serif;font-size:12px;line-height: 1.2;color: #000000;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
div, p, span, h1, h2, h3, h4, ol {vertical-align: baseline;margin:0;padding:0;box-sizing: border-box;}
*{margin:0; padding:0;}
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;}
.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;}
.no-wrap {white-space: nowrap;}
::-webkit-scrollbar {width: 0;height: 0;}

/* ---------------------------- */
/* ПРОВЕРКА БРАУЗЕРА НА СОВРЕМЕННОСТЬ */
/* ---------------------------- */
#unsupported {position:fixed;top:0;left:0;right:0;bottom:0;background-color: #eceff1;z-index:99999;display: none;align-items: center;justify-content: center;}
#unsupported span {display:block;font-family: 'e-Ukraine', sans-serif;font-weight: 300;font-size: 18px;color: #37474f;width: 70%;text-align: center;line-height: 1.5;}


/* ---------------------------- */
/* ОТСУТСТВИЕ FULLSCREEN */
/* ---------------------------- */
#no-fullscreen {position:fixed;top:0;left:0;right:0;bottom:0;background-color: #00000052;z-index:99999;display: none;}
#no-fullscreen .container {display: flex;align-items: center;justify-content: center;width:100%;height:100%;}
#no-fullscreen .wrap {background-color: #303030;display: flex;flex-direction: column;align-items: center;padding: 30px 32px 26px 32px;border-radius: 14px;}
#no-fullscreen span {display:block;font-family: 'e-Ukraine, sans-serif';font-weight: 300;font-size: 15px;color: #ffffff;text-align: center;line-height: 1.6;}
#no-fullscreen .close {background-image: url(resources/icon/close-white.svg);background-size: 22px;background-position: 50% 50%;background-repeat: no-repeat;width: 36px;height: 36px;border-radius: 40px;margin-top: 26px;background-color: #546e7a73;}
#no-fullscreen .close:hover {cursor:pointer;border: 1px solid #ffffff63;}

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


/* ---------------------------- */
/* INTRO 360*640 (по факту 540) baza ------------- */
/* --------------------------- */
.intro-boss {background-image: url(resources/img/bk-mob.jpg);background-color: #575656;background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;z-index: 9999;overflow: hidden;width:100%;height:100%;position: fixed;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::before {content:'';display:block;background-color: #00000080;overflow: hidden;width:100%;height:100%;position: fixed;top: 0;left: 0;right:0;bottom:0;z-index: 0;}
.intro-boss .wrap {position: relative;display: flex;flex-direction: column;align-items: center;margin-top: -22px;}
.intro-boss .logo {
    width: 50%;
}
.intro-boss .title {
    margin-top: 32px;
}
.intro-boss .title .type {font-family: 'e-Ukraine', sans-serif;font-size: 16px;font-weight: 400;}
.intro-boss .title .name {font-family: 'e-UkraineHead', sans-serif;font-size: 28px;font-weight: 700;margin-top: 12px;}
.intro-button {width: 70%;height: 50px;background-color: #ad7f00;font-size: 18px;font-weight: 300;display: flex;align-items: center;justify-content: center;margin: 42px auto 0;cursor: pointer;transition: 0.4s;border-radius: 142px;font-family: 'e-Ukraine';}
.intro-button:hover {box-shadow: 0 0 0 2px #fff;}
.intro-button span {display: block;}


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

/* - !!!!!!!!!!!! - - - 330 px - - - !!!!!!!!!!!! - */
@media screen and (max-width: 330px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 520px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 520px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 760px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 760px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}


/* - !!!!!!!!!!!! - - - 1020 px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1020px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {
    width: 460px;
}
}

/* - !!!!!!!!!!!! - - - 1270px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1270px) {
.intro-boss {
    background-image: url(resources/img/bk.jpg);
}
.intro-boss .wrap {}
.intro-boss .logo {
    width: 170px;
}
.intro-boss .title {}
.intro-boss .title .type {
    font-size: 22px;
}
.intro-boss .title .name {
    font-size: 48px;
}
.intro-button {
    width: 300px;
    height: 54px;
    font-size: 19px;
}
}

/* - !!!!!!!!!!!! - - - 1360px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1360px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 1420px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1420px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 1530px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1530px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {
    font-size: 64px;
}
.intro-button {
    width: 400px;
    height: 60px;
    font-size: 22px;
}
}

/* - !!!!!!!!!!!! - - - 1680px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1680px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {
    width: 220px;
}
.intro-boss .title {}
.intro-boss .title .type {
    font-size: 26px;
}
.intro-boss .title .name {
    font-size: 72px;
}
.intro-button {
    width: 420px;
    height: 70px;
    font-size: 24px;
}
}

/* - !!!!!!!!!!!! - - - 1900px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1900px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 2200px  - - - !!!!!!!!!!!! - */
@media screen and (min-width: 2200px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {width: 380px;}
.intro-boss .title {margin-top: 62px;}
.intro-boss .title .type {font-size: 44px;}
.intro-boss .title .name {font-size: 102px;}
.intro-button {width: 700px;
    height: 100px;
    font-size: 34px;
    margin-top: 72px;}
}

/* - !!!!!!!!!!!! - - - 2500px  - - - !!!!!!!!!!!! - */
@media screen and (min-width: 2500px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {}
.intro-boss .title {}
.intro-boss .title .type {}
.intro-boss .title .name {}
.intro-button {}
}

/* - !!!!!!!!!!!! - - - 2800px  - - - !!!!!!!!!!!! - */
@media screen and (min-width: 2800px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {    width: 420px;}
.intro-boss .title {}
.intro-boss .title .type {font-size: 52px;}
.intro-boss .title .name {    font-size: 114px;margin-top: 22px;}
.intro-button {    width: 880px;
    height: 120px;
    font-size: 44px;
    margin-top: 82px;}
}

/* - !!!!!!!!!!!! - - - 3600px  - - - !!!!!!!!!!!! - */
@media screen and (min-width: 3600px) {
.intro-boss {}
.intro-boss .wrap {}
.intro-boss .logo {    width: 580px;}
.intro-boss .title {}
.intro-boss .title .type {font-size: 68px;}
.intro-boss .title .name {    font-size: 144px;}
.intro-button {    width: 1200px;
    height: 170px;
    font-size: 68px;
    margin-top: 132px;}
}