/* ------------------------------------------------------------------------------------- */
/* ХОТСПОТЫ ПЕРЕХОДОВ В ЗАЛЫ ----------------------------------------------------------------------- */
.door {background-repeat: no-repeat;background-image: url(skin/doors-white.svg);border: 2px solid #fff;box-shadow: 0 0 0 6px #ffffff73;background-color:#7c545e;border-radius: 30px;}
.door.left_view {-webkit-transform: scaleX(-1);transform: scaleX(-1);}
.door.x40 {width: 40px;height: 40px;background-size: 18px;background-position: 8px 50%;}
.door.x50 {width: 50px;height: 50px;background-size: 24px;background-position: 9px 50%;}
.door.x60 {width: 60px;height: 60px;background-size: 30px;background-position: 11px 50%;}

/* ------------------------------------------------------------------------------------- */
/* GUIDEBOT ----------------------------------------------------------------------- */
#guide {position: absolute;right: 30px;bottom: 30px;width: 112px;height: 112px;z-index: 3;transform-origin: left top;transition: opacity 0.5s ease-in, transform 0.5s;}
#guide .avatar {position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%);border-radius: 100px;}
#guide .avatar:before {content: '';position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 108px;height: 108px;transform: translate(-50%,-50%);border: 10px solid #ffffff80;border-radius: 100px;background-position: center;background-size: 120%;background-repeat: no-repeat;transition: transform 0.7s, opacity 0.3s;}
#guide .avatar:after {content: '';position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 120px;height: 120px;transform: translate(-50%,-50%) scale(1);border: 10px solid #ffffff80;border-radius: 100px;transition: transform 0.7s, opacity 0.3s;}
#guide.pulse .avatar:before,
#guide.pulse .avatar:after {
    animation: animate_avatar 2.5s;
    animation-delay: 1s;
}

@keyframes animate_avatar {
    0% { transform: translate(-50%,-50%) scale(1); }
    10% { transform: translate(-50%,-50%) scale(1.2); }
    30% { transform: translate(-50%,-50%) scale(1); }
    40% { transform: translate(-50%,-50%) scale(1.2); }
    60% { transform: translate(-50%,-50%) scale(1); }
    70% { transform: translate(-50%,-50%) scale(1.2); }
    90% { transform: translate(-50%,-50%) scale(1);}
    100% { transform: translate(-50%,-50%) scale(1);}
}

#guide .avatar .icon {position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 112px;height: 112px;transform: translate(-50%,-50%);border-radius: 100px;overflow: hidden;z-index: 100;}
#guide .avatar .button {position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 112px;height: 112px;transform: translate(-50%,-50%);border-radius: 100px;overflow: hidden;z-index: 100;cursor: pointer;}
#guide .avatar .button:hover {box-shadow: 0 0 0 5px #ffffff;}
#guide .avatar .icon img {position: absolute;left: 0;top: 0px;width: 114px;max-width: none;}
#guide.sleep {pointer-events: none;opacity:0.5;transition: opacity 0.25s ease-in;}
#guide #avatar-2 {transform: scaleX(-1);}

/* --------------------- */
/* guidebot окно приветствия */
#hello {z-index: 1;pointer-events:none;position: absolute;right: 70px;bottom: 74px;width: 54px;height: 54px;padding-right: 4px;padding-top: 22px;padding-bottom: 14px;background-color: #fbf7f2;/* background-color: #f3f3e8; */border-radius: 16px;box-shadow: 0 0 16px 0 #0000006e;opacity:0;transition: height .3s ease-out, width .3s ease-out, opacity 0.6s;}
#hello.open {width: 450px;height: 570px;max-height: calc(100% - 140px);opacity:1;transition: height .3s ease-out, width .3s ease-out, opacity 0.6s;}

#hello .close {box-shadow: 0 0 0 1px #6e6e6e;font-family: "Roboto", sans-serif;font-weight: 600;font-size: 15px;color: #000000;width: 190px;height: 34px;display: flex;align-items: center;justify-content: center;border-radius: 5px;cursor: pointer;margin: 22px auto 0;}
#hello .close:hover {box-shadow: 0 0 0 2px #6e6e6e;}

#hello .wrap {height:100%;overflow-y: auto;opacity: 0;transition: opacity 0.1s;padding-bottom: 42px;}
#hello.open .wrap  {opacity: 1;transition: opacity 0.5s .4s;pointer-events: auto;}

#hello .wrap::-webkit-scrollbar {width: 3px;}
#hello .wrap::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #eeeeee;display:none;}
#hello .wrap:hover::-webkit-scrollbar-thumb {display:block;}

#hello .wrap .title {padding: 0px 24px 0px 24px;margin-top: 8px;}
#hello .wrap h2 {font-size: 17px;font-family: "Roboto", sans-serif;text-align: left;line-height: 1.3;font-weight: 400;}
#hello .wrap h2 span {font-family: 'e-UkraineHead-Medium';display: block;font-size: 15px;margin-top: 6px;line-height: 1.45;}
#hello .wrap p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 17px;margin: 18px 24px 0;}
#hello .wrap p.brief-title {font-weight: 600;font-family: "Roboto", sans-serif;margin-bottom: 8px;margin-top: 22px;}
#hello .wrap .brief {display: flex;align-items: center;justify-content: flex-start;margin: 0px 28px 0;min-height: 72px;}

#hello .wrap .brief .wrap-text{line-height: 1.4;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 15px;margin-left: 22px;}

#hello .wrap .brief .icon{border-radius: 72px;border: 3px solid #fff;box-shadow: 1px 1px 2px 0px #00000059;width: 50px;height: 50px;background-color: #7c545e;}
#hello .wrap .brief .icon.floor {background-image: url(resources/icon/floor.svg);background-size: 30px;background-position: 50% 50%;background-repeat: no-repeat;}
#hello .wrap .brief .icon.info {background-image: url(resources/icon/info-italic-white.svg);background-size: 30px;background-position: 50% 50%;background-repeat: no-repeat;}
#hello .wrap .brief .icon.history {background-image: url(skin/movie-white.svg);background-size: 22px;background-position: 50% 50%;background-repeat: no-repeat;}
#hello .wrap .brief .icon.picture {background-image: url(resources/icon/picture-2.jpg);background-size: 52px;background-position: -5px -2px;background-repeat: no-repeat;border-radius: 8px;border: 3px solid #fff;}
#hello .wrap .brief .wrap-img.point {position:relative;}
#hello .wrap .brief .wrap-img.point:after {content:'';display:block;position:absolute;width: 6px;height: 6px;bottom: 7px;right: 7px;background-color: #7c545e;border: 2px solid #fff;border-radius: 20px;}
/* ------------------------------------------------------------------------------------- */
/* ОПИСАНИЕ КАРТИН ----------------------------------------------------------------------- */
#depo-picture {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index: 4;display:flex;align-items: center;justify-content: center;pointer-events: none;}
#depo-picture .baffle {position:absolute;pointer-events: auto;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color: #0a0a0a91;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);display: none;}

.picture-modal{height: calc(100% - 114px);/* max-height: calc(100% - 64px); */max-width: calc(100% - 134px);border-radius: 10px;padding-right: 4px;padding-top: 22px;padding-bottom: 22px;background-color: #f3f3e8;background-color: #ffffff;z-index: 2;display: none;pointer-events: auto;position: relative;}
.picture-modal .close {width: 42px;height: 42px;background-color: #ffffff;border-radius: 40px;background-repeat: no-repeat;background-image: url(resources/icon/close-black.svg);background-size: 22px;background-position: 50% 50%;position: absolute;right: -56px;top: 1px;}
.picture-modal .close:hover {cursor: pointer;box-shadow: 0 0 0 4px #ffffff99;}
.picture-modal .boss {display: flex;align-items: flex-start;justify-content: flex-start;height: 100%;width: 100%;padding-left: 20px;}
.picture-modal .boss.landscape {display: block;overflow-y: auto;padding-right: 14px;}

.picture-modal .boss::-webkit-scrollbar {width: 3px;}
.picture-modal .boss::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;display:none;}
.picture-modal .boss:hover::-webkit-scrollbar-thumb {display:block;}

.picture-modal .boss img {width: auto;height: 100%;max-height: 100%;background-color: #e7e7e7;}
.picture-modal .boss.landscape img {max-height: none;width: 100%;height: auto;}

.picture-modal .boss.landscape .wrap {height: auto;overflow: hidden;margin-top: 22px;width: auto;}

.picture-modal .wrap {height:100%;overflow-y: auto;padding-bottom: 22px;opacity: 1;width: 350px;}
.picture-modal .wrap::-webkit-scrollbar {width: 3px;}
.picture-modal .wrap::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;display:none;}
.picture-modal .wrap:hover::-webkit-scrollbar-thumb {display:block;}

.picture-modal .title {padding: 0px 24px 0px 24px;margin-top: 8px;}
.picture-modal h2 {font-size: 16px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.45;}
.picture-modal p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 16px;margin: 18px 24px 0;}
.picture-modal ul {list-style-type:none;margin-top: 8px;}
.picture-modal li {margin-top: 10px;line-height: 1.4;}

/* ------------------------------------------------------------------------------------- */
/* ОПИСАНИЕ ЗАЛОВ И СТЕН ----------------------------------------------------------------------- */
.text-modal{height: calc(100% - 64px);max-height: calc(100% - 64px);border-radius: 10px;padding-right: 4px;padding-top: 22px;padding-bottom: 22px;background-color: #f3f3e8;background-color: #ffffff;z-index: 2;display: none;pointer-events: auto;position: relative;}
.text-modal .close {width: 42px;height: 42px;background-color: #ffffff;border-radius: 40px;background-repeat: no-repeat;background-image: url(resources/icon/close-black.svg);background-size: 22px;background-position: 50% 50%;position: absolute;right: -56px;top: 1px;}
.text-modal .close:hover {cursor: pointer;box-shadow: 0 0 0 4px #ffffff85;}
.text-modal .boss {display: flex;align-items: flex-start;justify-content: flex-start;height: 100%;width: 100%;}
.text-modal .boss img {width: auto;height: 100%;max-height: 100%;}

.text-modal .wrap {height:100%;overflow-y: auto;padding-bottom: 22px;opacity: 1;width: 600px;}
.text-modal .wrap::-webkit-scrollbar {width: 3px;}
.text-modal .wrap::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;display:none;}
.text-modal .wrap:hover::-webkit-scrollbar-thumb {display:block;}

.text-modal .title {padding: 0px 24px 0px 24px;margin-top: 8px;}
.text-modal h2 {font-size: 19px;font-family: 'e-UkraineHead-Medium';text-align: left;line-height: 1.45;}
.text-modal p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 17px;margin: 18px 24px 0;}
.text-modal ul {list-style-type:none;margin-top: 8px;}
.text-modal li {margin-top: 10px;line-height: 1.4;}



/* ------------------------------------------------------------------------------------- */
/* СТАРЫЕ ФОТО ИКОНКИ ------------------------------ */
.point_photo{pointer-events:auto;border-radius: 22px;border: 2px solid #fff;box-shadow: 1px 1px 4px 0 #00000021;overflow: hidden;width: 33px;height: 33px;background-color: #7c545e;background-image: url(skin/movie-white.svg);background-size: 17px;background-position: 50% 50%;background-repeat: no-repeat;box-sizing: content-box;}
.point_photo:hover {box-shadow: 0 0 0 2px #fff;}

/* ------------------------------------------------------------------------------------- */
/* АУДИО НА СТЕНЕ ------------------------------ */
.sound_point{pointer-events:auto;border-radius: 22px;border: 2px solid #fff;box-shadow: 1px 1px 4px 0 #00000021;overflow: hidden;width: 32px;height: 32px;background-color: #7c545e;background-image: url(resources/icon/headset.svg);background-size: 18px;background-position: 50% 6px;background-repeat: no-repeat;box-sizing: content-box;}
.sound_point:hover {box-shadow: 0 0 0 2px #fff;}


/* ------------------------------------------------------------------------------------- */
/* PLAYER SOUND ------------------------------ */
#audioPlayer {opacity:1;visibility: visible; transition: opacity 0.2s ease-out;display: flex;position: fixed;bottom: 90px;left: 50%;transform: translateX(-50%);background-color: #000000;background-color: #7c545e;padding: 0px 12px 0px 12px;align-items: center;border-radius: 12px;height: 38px;box-shadow: 0 0 3px 0 #fff;width: 320px;}
#audioPlayer.off {visibility: hidden; opacity:0;transition: opacity 0.2s ease-out, visibility 0.2s ease-out;}
#progressContainer {width: 100%;height: 2px;background: #ffffff7a;position: relative;border-radius: 4px;cursor: pointer;margin-left: 0px;margin-right: 0px;}
#progress {width: 0;height: 100%;background: #ffffff;}
#pin {width: 10px;height: 10px;background: #ffffff;position: absolute;top: -4px;transform: translateX(-50%);cursor: pointer;border-radius: 10px;}
#playPause {width: 32px;height: 32px;background-repeat: no-repeat;cursor: pointer;margin-right: 12px;margin-left: 8px;}
#playPause.play {background-image: url(resources/icon/play.svg);background-size: 20px;background-position: 50%;}
#playPause.pause {background-image: url(resources/icon/pause.svg);background-size: 21px;background-position: 50%;}
#closePlayer {width: 32px;height: 32px;background-image: url(resources/icon/close-white.svg);background-repeat: no-repeat;background-size: 22px;background-position: 50%;cursor: pointer;}
#textPopup {width: 42px;height: 32px;background-image: url(resources/icon/book.svg);background-repeat: no-repeat;background-size: 42px;background-position: 50% -6px;cursor: pointer;margin-left: 14px;}


/* SHEET ПАНЕЛЬ ------------------------------ */
#overlay-sheet {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);z-index: 10;display:none;backdrop-filter: blur(2px);-webkit-backdrop-filter:blur(2px);}

.bottom-sheet {position: fixed;z-index: 999;bottom: -30px;left: 50px;right: 50px;height: 70%;max-height: 94%;background-color: white;border-radius: 15px 15px 0 0;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);transition: transform 0.5s ease-in-out, height 0.5s ease-in-out;transform: translateY(100%);padding: 0px 3px 0 3px;}
.bottom-sheet.open {transform: translateY(0);bottom: 0;}
.bottom-sheet.expanded {height: 94%;}
.bottom-sheet .grip {background-color: transparent;border-radius: 3px;overflow: hidden;padding: 18px 0 20px 0;}
.bottom-sheet .grip .body {width: 60px;height: 5px;background-color: #bfbfbf;border-radius: 3px;margin: 0 auto;}
.bottom-sheet .content {padding: 4px 14px 28px 14px;overflow: auto;max-height: 88%;margin: 0;transition: height 0.5s ease-in-out;}
.bottom-sheet.expanded .content {max-height: 90%;}
.bottom-sheet .content .deco {display:block;width:100%;}
.bottom-sheet .content .zoom {width: 36px;height: 36px;background-color: #2671ad;border-radius: 30px;background-repeat: no-repeat;margin: 0 3px;background-image: url(resources/menu-ico/zoom-in.svg);background-size: 20px;background-position: 50% 50%;display:block;position:absolute;top: 14px;right: 12px;pointer-events: none;}
.bottom-sheet .content figure {margin: 40px auto 30px;}
.bottom-sheet .content figure.first {margin: 0 auto 30px;position: relative;}
.bottom-sheet .content figcaption {display:block;font-size: 14px;margin-top: 12px;text-align:center;font-style:italic;line-height: 1.3;font-family:"Roboto", sans-serif;font-weight: 400;color: #787878;padding: 0 12px;}
.bottom-sheet .content img {display:block;width: 100%;border-radius: 6px;background-color: #ddd;}
.bottom-sheet .content h2 {font-size: 20px;font-family: 'e-Ukraine-Bold';font-weight: 400;line-height: 1.1em;padding: 0 4px 0 4px;width: 100%;margin-top: 6px;}
.bottom-sheet .content p {color:#000000;font-family:"Roboto", sans-serif;font-weight: 400;font-size: 17px;line-height: 1.4em;padding: 0 4px;width: 100%;margin-top: 15px;}
.bottom-sheet .content .txt-fbx {color: #2e6fbf;}



/*** 1010px  (!!!! for 962) *******************/
@media screen and (max-width: 1010px) {
}

/*** 770px  (!!!! for 768) *******************/
@media screen and (max-width: 770px) {
.picture-modal {height: auto;max-height: calc(100% - 94px);max-width: calc(100% - 184px);overflow-y: auto;}
.picture-modal .boss {display: block;padding-right: 16px;overflow-y: auto;}
.picture-modal .wrap {overflow: hidden;height: auto;margin-top: 22px;width: auto;}
.picture-modal .boss img {height: auto;width: 100%;max-height: none;}
.picture-modal .boss.landscape img {height: auto;width: 100%;max-height: none;}

.picture-modal .boss::-webkit-scrollbar {width: 3px;}
.picture-modal .boss::-webkit-scrollbar-thumb {background-color: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #9e9e9e;display:block;}
.picture-modal .boss:hover::-webkit-scrollbar-thumb {display:block;}

.picture-modal .close {position: fixed;bottom: 23px;top: auto;right: 50%;transform: translateX(50%);width: 60px;height: 60px;background-size: 32px;box-shadow: 0px 1px 11px 2px #0000006b;}

.text-modal {max-width: calc(100% - 100px);}
.text-modal .close {position: fixed;bottom: 23px;top: auto;right: 50%;transform: translateX(50%);width: 60px;height: 60px;background-size: 32px;box-shadow: 0px 1px 11px 2px #0000006b;}
#hello {right: 70px;bottom: 84px;}
}


/*** 642px (!!!! for 640) *******************/
@media screen and (max-width: 642px) {
.picture-modal {max-width: none;max-height: none;height: 100%;overflow-y: hidden;}
.picture-modal .boss {padding-bottom: 50px;}
.picture-modal .wrap {margin-top: 32px;}
.picture-modal .title {padding: 0px 12px 0px 12px;margin-top: 0;}
.picture-modal h2 {font-size: 18px;}
.picture-modal p {margin: 14px 12px 0;font-size: 17px;}

.text-modal {max-width: calc(100% - 44px);max-height: calc(100% - 44px);}
.text-modal .wrap {width: auto;}

#guide {right: 24px;bottom: 22px;width: 90px;height: 90px;}
#guide .avatar .icon {width: 90px;height: 90px;}
#guide .avatar .button {width: 90px;height: 90px;}
#guide .avatar:before {width: 86px;height: 86px;}
#guide .avatar:after {width: 98px;height: 98px;}
#guide .avatar .icon img {width: 92px;}
}

/*** 542px (!!!! for 540) *******************/
@media screen and (max-width: 542px) {
#guide {right: 24px;bottom: 18px;width: 70px;height: 70px;}
#guide .avatar .icon {width: 70px;height: 70px;}
#guide .avatar .button {width: 70px;height: 70px;}
#guide .avatar:before {width: 66px;height: 66px;}
#guide .avatar:after {width: 78px;height: 78px;}
#guide .avatar .icon img {width: 72px;}
#audioPlayer {bottom: 80px;}
.bottom-sheet {left: 20px;right: 20px;}
#hello {right: 50px;bottom: 74px;}
}

/*** 520px *******************/
@media screen and (max-width: 520px) {
#guide {right: 18px;bottom: 17px;width: 54px;height: 54px;}
#guide .avatar .icon {width: 54px;height: 54px;}
#guide .avatar .button {width: 54px;height: 54px;}
#guide .avatar:before {width: 50px;height: 50px;}
#guide .avatar:after {width: 62px;height: 62px;}
#guide .avatar .icon img {width: 54px;}
#audioPlayer {bottom: 80px;}
#hello {right: 36px;bottom: 44px;}
#hello.open {width: calc(100% - 74px);}
#hello .wrap .brief {min-height: 86px;}
}

/*** 432px (!!!! for 424/428/430) *******************/
@media screen and (max-width: 432px) {
.text-modal {max-width: none;max-height: none;height: calc(100% - 24px);width: calc(100% - 24px);}
#audioPlayer {bottom: 80px;width: calc(100% - 36px);}
.bottom-sheet {left: 0;right: 0;}
#hello {right: 30px;bottom: 26px;}
#hello.open {width: calc(100% - 60px);}
}

/*** 390px *******************/
@media screen and (max-width: 390px) {
#hello .wrap .brief {min-height: 96px;}
}

/*** 377px (!!!! for 375) ***********************/
@media screen and (max-width: 377px) {
.text-modal .title {padding: 0px 16px;}
.text-modal p {margin: 18px 16px 0;font-size: 16px;}
.picture-modal {padding-top: 12px;}
}

/*** 362px (!!!! for 360) ***********************/
@media screen and (max-width: 362px) {
.bottom-sheet .content p {font-size: 16px;}
#hello .wrap .brief {min-height: 110px;}
}

/*** 350px ***********************/
@media screen and (max-width: 350px) {
#hello .wrap .brief {min-height: 114px;}
}

/*** 324px (!!!! for 320) ***********************/
@media screen and (max-width: 324px) {
.picture-modal .boss {padding-right: 10px;padding-left: 14px;}
.picture-modal .title {padding: 0px 6px 0px 6px;}
.picture-modal p {margin: 14px 6px 0;font-size: 16px;}
#hello {right: 10px;bottom: 9px;}
#hello.open {width: calc(100% - 21px);max-height: calc(100% - 26px);}
#hello.open .wrap {padding-bottom: 62px;}
}

@media (hover: hover) and (min-width: 1020px) {

}