#overlay_leftmenu {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: rgb(0 0 0 / 50%);z-index: 4;display:none;}
#overlay {position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color: #000000b8;z-index: 10;display:none;}
.left-menu {position: fixed;top: 0;left: 0;height: 100%;z-index: 5;transition: transform 0.5s ease-out;box-shadow: 1px 0 7px 0 #0000006e;}
.left-menu.close {transform: translateX(-320px);transition: transform 0.5s ease-out;}
.left-menu.open {transform: translateX(0px);}
.left-menu .wrapper {background: #1b1b1c;width: 246px;padding: 0px 2px 4px 0;overflow: hidden;height: 100%;}
.hide-left-menu {transition: opacity 0.5s;position:absolute;top: 50%;left: 246px;transform: translateY(-50%);border-radius: 0 8px 8px 0;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);width: 16px;height: 68px;cursor: pointer;background-color: #1b1b1cdb;}
.hide-left-menu.close {opacity:0;}
.hide-left-menu::before {content:'';position: absolute;width: 2px;height: 60%;background: #ffffff;left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);margin-left: -1px;}
.hide-left-menu .tooltip {position:absolute;top: 50%;left: 32px;background-color: #1b1b1c;min-height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 5px;visibility: hidden;pointer-events: none;width: max-content;padding: 0 12px;transform: translateY(-50%);}
.hide-left-menu .tooltip span {display:block;font-family: 'VinnytsiaSans';font-size: 13px;color: #fff;text-align: center;}
.hide-left-menu .tooltip::before {content:'';display:block;position:absolute;top: 10px;left: -4px;width: 10px;height: 10px;background-color: #1b1b1c;transform: rotate(45deg);}
.hide-left-menu2 {transition: opacity 0.5s;position:absolute;top: 5%;left: 246px;transform: translateY(-50%);border-radius: 0 8px 8px 0;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);width: 16px;height: 54px;cursor: pointer;background-color: #1b1b1cdb;}
.hide-left-menu3 {transition: opacity 0.5s;position:absolute;top: 51%;left: 246px;transform: translateY(-50%);border-radius: 0 8px 8px 0;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%);width: 16px;height: 68px;cursor: pointer;background-color: #1b1b1cdb;}
.hide-left-menu3::before {content:'';position: absolute;width: 2px;height: 60%;background: #ffffff;left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);margin-left: -1px;}
.touchevents .hide-left-menu .tooltip {display:none;}
.hide-left-menu-mobver {display:none;}
.show-left-menu {z-index:2;transform: translateX(-280px);transition: transform 0.5s ease-in;position:absolute;top: 20px;left: 24px;border-radius: 47px;background-color: #0000006e;width: 52px;height: 52px;cursor: pointer;background-image: url(../img/icon/menu/menu-arrow.svg);background-size: 30px;background-position: 12px 50%;background-repeat: no-repeat;}
.show-left-menu:hover {background-color: #1b1b1c;}
.show-left-menu.enabled {transform: translateX(0px);transition: transform 0.5s ease-out;}
.left-menu .logo-head {color: #ffc910;padding: 22px 0 10px 40px;font-size: 30px;line-height: 30px;font-family: 'Lydian', sans-serif;position: relative;}
.left-menu .logo-head span {display:block;}
.left-menu .logo-head img {display: block;position: absolute;width: 24px;top: 14px;left: 9px;}
.left-menu .title-head {font-family: 'Lydian', sans-serif;font-size: 22px;margin-top: 0px;line-height: 23px;color: #ffffffad;padding-bottom: 12px;}
.left-menu .title-head span {display:block;padding-left: 26px;}
.left-menu .scroll-container {overflow-y: auto;height: calc(100% - 56px);padding: 0 12px 20px 16px;}
.left-menu .scroll-container::-webkit-scrollbar {width: 2px;}
.left-menu .scroll-container::-webkit-scrollbar-thumb {background-color: #bfbfbf;border-radius: 9em;box-shadow: inset 1px 1px 10px #bfbfbf;display:none;}
.left-menu .scroll-container:hover::-webkit-scrollbar-thumb {display:block;}
.left-menu .place {margin: 12px 0 24px;position: relative;}
.left-menu .place::before {
  content:'';
  display:block;
  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='80' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6 6'>\
    <path d='M10 0 Q0 20 10 40 Q20 60 10 80'/>\
  </svg>") repeat-y;
  background-size: 14px 72px;
  height: 100%;
  width: 20px;
  position: absolute;
  top: 30px;
  left: -6px;
  opacity: 0.4;
  z-index: 0;
  }
.left-menu .place.fst--pl::before {top: 30px;}
.left-menu .place .header {display: flex;justify-content: space-between;align-items: center;cursor: pointer;user-select: none;position: relative;z-index: 1;}
.left-menu .place .header .title {display: flex;align-items: center;justify-content: flex-start;flex: 1;min-width: 0;}
.left-menu .place .header .title .nmbr {display: block;font-family: 'VinnytsiaSans';font-weight: 700;font-size: 13px;line-height: 16px;background: #bfbfbf;background: #cbcbcb;width: 32px;text-align: right;padding: 6px 10px 3px 0;border-radius: 0 12px 12px 0;margin-left: -16px;flex-shrink: 0;height: 25px;padding: 0 10px 0 0;line-height: 25px;}
.left-menu .place .header .title .nmbr.active {background: #FDC400;}
.left-menu .place .header:hover .nmbr {}
.left-menu .place .header .title .name {font-family: 'Lydian';font-family: 'VinnytsiaSans';color: #fff;font-size: 16px;display: block;margin-left: 10px;position: relative;padding-top: 2px;}
.left-menu .place .header .title .dcr {height: 1px;display: block;background: #ffffff8c;flex: 1;margin-right: 10px;margin-left: 10px;}
.left-menu .place .caret {background-image: url(../img/icon/caret/3.svg);background-size: 12px;background-position: 50% 50%;background-repeat: no-repeat;transition: transform 0.3s;display: block;background-color: #ffffff;width: 22px;height: 22px;border-radius: 50%;transform: rotate(0deg);flex-shrink: 0;margin-right: -4px;}
.left-menu .place.open .caret {transform: rotate(180deg);}
.left-menu .place .header:hover .caret {background-color: #fdc400;}
.touchevents .left-menu .place .header:hover .caret {background-color: #ffffff;}
.left-menu  .collapsible-content {display: block; margin: 0px 0px 0 -16px; padding: 0px 0 22px 42px;}
.left-menu .item_plc {margin-top: 16px;color: #fff;border-radius: 10px;position: relative;}
.left-menu .item_plc.leave {cursor:pointer}
.left-menu .item_plc::before {content:'';display: block;position:absolute;top: 40px;left: -35px;width: 26px;height: 26px;background-color: #4c4c4c;border-radius: 50%;background-image: url(../img/icon/pin/1-wht.svg);background-size: 16px;background-position: 50% 50%;background-repeat: no-repeat;}
.left-menu .item_plc.active::before {background-color: #fdc400;background-image: url(../img/icon/pin/1.svg);width: 24px;height: 24px;}
.left-menu .item_plc::after {content:'';display: block;position:absolute;width: 100%;height:100%;top:0;left:0;right:0;bottom:0;border-radius: 8px;z-index: 2;box-sizing: border-box;border: 2px solid transparent;}
.left-menu .item_plc.active::after{border: 2px solid #fdc400;}
.left-menu .item_plc.leave.item_plc::after {border: 2px solid #ffffff7d;}
.left-menu .item_plc:hover.item_plc.active::after {cursor:default;}
.left-menu .item_plc.active.active::after{border: 2px solid #fdc400;}
.left-menu .item_plc img {width: 100%;display: block;border-radius: 8px;aspect-ratio: 16 / 9;}
.left-menu .item_plc .title {display:block;font-size: 13px;font-family: 'VinnytsiaSans', sans-serif;font-weight: 400;line-height: 1.3;padding: 16px 10px 8px 12px;width: 100%;z-index: 2;position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(#06060600, #06060673, #00000099);background: linear-gradient(#06060600, #0606068f, #000000ba);border-radius: 0 0 8px 8px;}
.left-menu .powered-block {color: #b5b5b5;text-align: left;margin: 12px auto 0 auto;font-family: 'VinnytsiaSans', sans-serif;font-weight: 400;position: relative;}
.left-menu .powered-block .border-top {width: 72%;margin: 22px 0 0 25px;border-top: 2px dotted #9f9f9f;}
.left-menu .powered-block .border-bottom {width: 72%;margin: 22px 0 0 22px;border-top: 2px dotted #9f9f9f;}
.left-menu .powered-block .information {font-size: 12px;padding: 22px 6px 0;line-height: 1.7;}
.left-menu .powered-block .information a{color: #cacaca;}
.left-menu .powered-block .information a:hover{color: #90caf9;}
.left-menu .powered-block .developer {font-size: 12px;padding: 22px 0 0 24px;color: #8b8b8b;}
.left-menu .powered-block .developer a{color: #8b8b8b;display:inline-block;font-size: 16px;margin-top: 4px;text-decoration:none;font-family: 'e-Ukraine-Bold';}
.left-menu .powered-block .developer a:hover {text-decoration:underline;color: #fff;}
.left-menu .powered-block .feedback {font-size: 13px;padding: 22px 2px 0 24px;line-height: 1.5;position: relative;z-index: 2;}
.left-menu .powered-block .feedback a{text-decoration: none;color: #fff;}
.left-menu .powered-block .feedback a:hover {text-decoration: underline;}
.left-menu .powered-block .feedback.bld {font-weight: 700;color: #e9e4e4;}
.left-menu .powered-block .copyright {font-size: 12px;padding: 18px 0 0 24px;line-height: 1.5;}
.left-menu .powered-block .warning {font-size: 12px;padding: 18px 0 0 24px;line-height: 1.5;}
.left-menu .powered-block .warning a{text-decoration: none;color: #fff;}
.left-menu .powered-block .warning a:hover {text-decoration: underline;}
.left-menu .powered-block .feedback.gpg span::before {content:''; display:block;position: absolute;width: 12px;height: 12px;background: #fff;border-radius: 50%;}
.left-menu .powered-block .feedback.gpg span::after {content:''; display:block;position: absolute;width: 12px;height: 12px;background: #fff;border-radius: 50%;}
.left-menu .powered-block::before {content:'';display:block;
  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='80' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6 6'>\
    <path d='M10 0 Q0 20 10 40 Q20 60 10 80'/>\
  </svg>") repeat-y;
  background-size: 14px 72px;height: 100%;width: 20px; position: absolute; top: 30px; left: -6px; opacity: 0.4; z-index: 0;
  }
.left-menu .powered-block::after {content:''; display:block; position: absolute; background-image: url(../img/logo/title-decor.svg); background-color: #1b1b1c; background-repeat: no-repeat; background-position: center; width: 44px; height: 50px; background-size: 22px; top: 6px; left: -17px; z-index: 1;}
.left-menu .powered-block .logo {margin: 16px 0 0 26px;}
.left-menu .powered-block .logo img {display:block;}
.left-menu .powered-block .logo.lg1 {width: 122px;border: 3px solid #fff;}
.left-menu .powered-block .logo.lg2 {width: 122px;}
.slider_wraper::-webkit-scrollbar {width: 0; height: 0;display:none;}
.slider_wraper::-webkit-scrollbar-thumb {display:none;}
.slider {display: none;z-index: 2;position: fixed;left: 0;right: 0;bottom: 0px;background: linear-gradient(180deg,rgb(0 0 0 / 0%),rgb(0 0 0 / 78%));width: 100%;min-width: 100%;padding: 40px 0 14px 0px;transition: all 0.5s ease-out;pointer-events: none;}
.slider_wraper {position: relative; display: flex; width: 100%; overflow-x: scroll; padding: 4px 0; pointer-events: auto; -webkit-overflow-scrolling: touch;}
.slider .container {display: flex; flex-shrink: 0; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-left: 22px; margin-right: 0; gap: 9px; }
.slider .container::after {content: "";flex: 0 0 16px; height: 1px;}
.slider .box_img {box-sizing: content-box;cursor: pointer;position: relative;background: #ffffffde;-webkit-tap-highlight-color: transparent;outline: none;border: none;border-radius: 10px;overflow: visible;}
.slider .box_img img {width: 100px;height: 58px;object-fit: cover;display: block;pointer-events: none;border-radius: 5px;position: relative;z-index: 1;overflow: hidden;box-sizing: border-box;}
.slider .box_img.active img {border-radius: 4px;}
.slider .box_img.active::before {inset: -3px;background: #fdc400;}
.slider .box_img::before {content: ''; position: absolute; inset: -2px; border-radius: 6px; background: rgba(255,255,255,0.75); z-index: -1;}
.slider.off {transform: translateY(150px);transition: transform 0.5s ease-out;}
.slider .distance {width: 17px;height: 38px;border-bottom: 2px dotted #fff;color: #fff;text-align: center;font-size: 12px;}
#count-in-slider {position: absolute;bottom: 5px;left: 6px;color: #303030fc;font-size: 12px;font-family: Arial, Helvetica, sans-serif;font-family: 'e-Ukraine-Bold';background: #fdc400;padding: 2px 5px 4px;border-radius: 4px;z-index: 2;}
#count-in-slider span {}
#count-in-slider .separator {}
#count-in-slider .all-pano {}
#count-in-slider .active-pano {}
.slider .box_img, .slider .distance {flex: 0 0 auto;}
.menu_mobile {display: none;}
@media screen and (max-width: 1030px) {
.show-left-menu {transform: translateX(0px);transition: transform 1s ease;}
.show-left-menu.fadeout-left {transform: translateX(-300px);transition: transform 2s ease;}
.left-menu {transform: translateX(-320px);}
.hide-left-menu {transform: none; top: 18px; width: 40px; height: 40px; left: 266px; border-radius: 50%; background-image: url(../img/icon/close/white.svg); background-size: 24px; background-position: 50% 50%; background-repeat: no-repeat;}
.hide-left-menu::before {display:none;}
}
@media screen and (max-width: 760px) {
.show-left-menu, .hide-left-menu {display:none;}
#overlay_leftmenu {background-color: rgb(0 0 0 / 19%);backdrop-filter: blur(2px);}
.menu_mobile {display: block;position: absolute;background-color: #0a0a0a80;background-image: url(../img/icon/menu/menu-brg.svg);background-size: 20px;background-position: 50% 50%;background-repeat: no-repeat;top: 24px;left: 24px;border-radius: 4px;width: 36px;height: 36px;z-index: 3;backdrop-filter: blur(4px);}
.hide-left-menu-mobver {transition: all 0.5s ease-in-out;display:block;opacity:0;position:fixed;top: 20px;left: 300px;border-radius: 50px;width: 50px;height: 50px;cursor: pointer;background-color: rgb(27 27 28 / 79%);background-image: url(../img/icon/close/white.svg);background-size: 28px;background-position: 50% 50%;background-repeat: no-repeat;z-index: 9;transform: translateX(-360px);}
.hide-left-menu-mobver.open {transform: translateX(0px);opacity:1;}
.left-menu {transform: translateX(-320px);box-shadow: none;}
.left-menu.close {transform: translateX(-320px);}
.left-menu.open {transform: translateX(0px);}
.left-menu .wrapper {width: 282px;}
.left-menu .logo-head {font-size: 34px; line-height: 34px; padding: 28px 0 10px 49px;}
.left-menu .logo-head img {width: 28px;left: 14px;top: 17px;}
.left-menu .scroll-container {padding: 0 12px 20px 22px; height: calc(100% - 72px);}
.left-menu .title-head {font-size: 26px; line-height: 24px;}
.en .left-menu .title-head {font-size: 24px; line-height: 24px;}
.left-menu .title-head span {padding-left: 29px;}
.left-menu .place::before {left: -3px; background-size: 14px 56px;}
.left-menu .place .header .title .nmbr {border-radius: 50%;width: 30px;height: 30px;line-height: 30px;margin-left: -11px;padding: 0;text-align: center;}
.left-menu .place .caret {background-color: transparent; box-shadow: 0 0 0 1px #ffffff38; background-image: url(../img/icon/caret/3-wht.svg);}
.left-menu .collapsible-content {margin: 0px 0px 0 -16px; padding: 0px 0 22px 46px;}
.left-menu .item_plc::before {left: -39px; top: 46px;}
.left-menu .item_plc .title {font-size: 14px;}
.left-menu .powered-block::before {background-size: 14px 56px;}
.slider {display: flex;flex-direction: row;align-items: flex-start;}
}
@media screen and (max-width: 500px) {
.hide-left-menu-mobver {left: auto; right: 22px; width: 40px; height: 40px; background-size: 24px; top: 24px; transform: translateX(90px);}
#overlay_leftmenu {background-color: rgb(179 179 179 / 27%);backdrop-filter: blur(4px);}
}
@media screen and (max-width: 360px) {
.hide-left-menu-mobver {right: 18px;}
.menu_mobile {top: 18px;left: 18px;}
}
@media screen and (max-width: 350px) {
.hide-left-menu-mobver {right: -4px;top: -4px;background-color: #4a4a4a;border-radius: 0px 0 0px 32px;z-index: 6;background-size: 26px;width: 56px;height: 50px;background-position: 16px 50%;}
}
@media screen and (min-width: 1910px) {
.show-left-menu {width: 62px;height: 62px;    background-size: 34px;background-position: 15px 50%;}
.hide-left-menu {left: 282px;}
.left-menu .wrapper {width: 282px;}
.left-menu .logo-head {font-size: 34px; line-height: 34px; padding: 28px 0 10px 49px;}
.left-menu .logo-head img {width: 28px;left: 14px;top: 17px;}
.left-menu .scroll-container {padding: 0 12px 20px 22px; height: calc(100% - 72px);}
.left-menu .title-head {font-size: 26px; line-height: 24px;}
.en .left-menu .title-head {font-size: 24px; line-height: 24px;}
.left-menu .title-head span {padding-left: 29px;}
.left-menu .place::before {left: -3px; background-size: 14px 56px;}
.left-menu .place .header .title .nmbr {width:40px;height: 30px;line-height: 30px;margin-left: -21px;padding: 0;text-align: center;}
.left-menu .place .caret {background-color: transparent; box-shadow: 0 0 0 1px #ffffff38; background-image: url(../img/icon/caret/3-wht.svg);}
.left-menu .place .header:hover .caret {background-color: #fff;background-image: url(../img/icon/caret/3.svg);}
.left-menu .collapsible-content {margin: 0px 0px 0 -16px; padding: 0px 0 22px 46px;}
.left-menu .item_plc::before {left: -39px; top: 46px;}
.left-menu .item_plc .title {font-size: 14px;}
.left-menu .powered-block::before {background-size: 14px 56px;}
.left-menu .item_plc .title {background: linear-gradient(#06060600, #0606068f, #000000db);}
.left-menu .title-head {padding-bottom: 18px;}
}
.down-gradient {overflow: hidden;position: fixed;bottom: 0;left: 0;right: 0;pointer-events: none;z-index: 1;height: 180px;width:100%;max-width: 100vw;background: linear-gradient(to top, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.53) 12%, rgb(0 0 0 / 0.44) 24%, rgb(0 0 0 / 0.34) 36%, rgb(0 0 0 / 0.24) 50%, rgb(0 0 0 / 0.16) 64%, rgb(0 0 0 / 0.09) 76%, rgb(0 0 0 / 0.05) 86%, rgb(0 0 0 / 0.02) 92%, rgb(0 0 0 / 0) 96%, rgb(0 0 0 / 0) 100% );}
.top-gradient {display:none;}
.area {transition: transform 1s ease;position: fixed;z-index: 1;top: 0;left:0;right:0;width: auto;max-width: 100vw;display: flex;justify-content: flex-end;align-items: center;pointer-events: none;}
#about_area.fade-right {transform: translateX(300px);}
.area .wrap {pointer-events: auto;cursor: pointer;margin: 22px 22px 0px 0;color: #fff;display: flex;justify-content: flex-start;align-items: center;border-right: 3px solid #fdc400;box-shadow: 1px 1px 3px 0px #0000002e;}
.area .wrap:hover {}
.area .name {font-size: 18px;font-family: 'Lydian';display:block;text-transform: uppercase;background: #0a0a0a80;padding: 0px 16px 0px 16px;color: #fff;height: 40px;line-height: 40px;border-radius: 0 0px 0px 0;overflow: hidden;}
.area .info {background-color: #0a0a0a80;border-radius: 4px 0 0 4px;width: 40px;height: 40px;margin-right: 2px;background-image: url(../img/icon/book/read-w.svg);background-size: 20px;background-position: 50% 50%;background-repeat: no-repeat;}
.area .wrap:hover .info {background-color: #0a0a0aa6;background-size: 24px;}
.area .wrap:hover .name {background: #0a0a0aa6;}
#location-bar {position: fixed;z-index: 1;width: 100%;bottom: 30px;left: calc(50% + 75px);transform: translateX(-50%);transition: opacity 0.25s ease, left 0.5s ease-out, transform 0.5s ease-out;}
#location-bar.center-position {left: 50%;transform: translateX(-50%);transition: all 0.5s ease-out;}
#location-bar .wrap {display: flex;flex-direction: row;justify-content: center;align-items: center;}
#location-bar .name {color:#fff;font-family: 'VinnytsiaSans';font-weight: 700;font-size: 18px;text-align: center;text-shadow: 0 1px 2px rgb(0 0 0 / 45%);}
#name-location {transition:clip-path 0.35s ease,opacity 0.35s ease;clip-path: inset(0 0 0 0);will-change: clip-path, opacity;}
#name-location.hide-text {clip-path: inset(0 100% 0 0);opacity: 0;}
#location-bar .mobile-conteiner {display:none;}
#point-bar {position: fixed;z-index: 1;bottom: 64px;left: calc(50% + 75px);transform: translateX(-50%);transition: opacity 0.25s ease, left 0.5s ease-out, transform 0.5s ease-out;pointer-events: auto;will-change: opacity, transform;}
#point-bar.fade-out {opacity: 0;pointer-events: none;}
#point-bar.center-position {left: 50%; transform: translateX(-50%);transition: all 0.5s ease-out;}
#point-bar .wrap {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
#point-bar .scroll-scene {border-radius: 50%;width: 34px;height: 34px;background-image: url(../img/icon/arrow/3.svg);background-repeat: no-repeat;background-size: 24px;background-position: 50%;transform: scaleX(-1);}
#point-bar .scroll-scene.disabled  {opacity: 0.35;}
#point-bar .scroll-scene.enabled  {opacity: 1;}
#point-bar .scroll-scene.enabled:hover {background-color: #0000006b;cursor:pointer;}
#point-bar .scroll-scene.enabled:active {box-shadow: 0 0 3px rgba(255,255,255,0.7);}
#point-bar #button_prev {transform: scaleX(1);}
#point-bar .way {display: flex; align-items: center; margin: 0 12px;}
#point-bar .point {width: 16px; height: 16px; border-radius: 50%; background-color: #ffffff5c; border: 2px solid #fff;}
#point-bar .line {width: 20px; height: 1px; background: #ffffffa8;}
#point-bar .point:hover {background-color: #fdc400;cursor:pointer;border: 2px solid #fdc400;box-shadow: 0 0 0 3px #fff;}
#point-bar .point.check {background-color: #ffffff;background-image: url(../img/icon/check/1.svg);background-repeat: no-repeat;background-size: 12px;background-position: 50%;}
#point-bar .point.check:hover {background-color: #fdc400;cursor:pointer;border: 2px solid #fdc400;}
#point-bar .point.active {background-color: #fdc400;border: 2px solid #fdc400;box-shadow: 0 0 0 3px #fff;}
#about_location {opacity:1;cursor: pointer;position: fixed;z-index: 1;bottom: 28px;right: 28px;border-radius: 6px;width: 112px;height: 142px;padding: 2px;background-color: rgb(255 255 255 / 80%);color: #fff;font-family: 'VinnytsiaSans';font-weight: 400;font-size: 12px;display: flex;align-items: center;justify-content: space-between;flex-direction: column;transition: opacity 0.25s ease, transform 0.75s ease;pointer-events: auto;will-change: opacity, transform;}
#about_location.fade-out {opacity:0;transform: translateX(200px);pointer-events: none;transition: opacity 0.25s ease, transform 0.75s;}
#about_location.fade-right {transform: translateX(200px);}
#about_location .title {position: absolute;width: calc(100% - 4px);padding: 14px 10px 8px 1px;bottom: 2px;border-radius: 0 0 4px 4px;background: linear-gradient(#06060600, #0606068f, #000000eb);text-align: right;}
#about_location .icon {width: 28px; height: 28px; border-radius: 18px; flex-shrink: 0; background-color: #ffffff; background-image: url(../img/icon/book/read-b.svg); background-repeat: no-repeat; background-size: 18px; background-position: 50%; position: absolute; left: -13px; top: 102px;}
#about_location .img {border-radius: 4px;overflow: hidden;width: 100%;height: 100%;}
#about_location img {object-fit: cover; width: 100%; height: 100%;}
#about_location:hover {background-color: rgb(253 196 0);background-color: #fff;}
#about_location:hover .icon {background-color: #fdc400;transform: scale(1.2);}
@media screen and (max-width: 1260px) {
#about_location {right: 20px;}
#point-bar {left: calc(50% + 62px);transition:none;}
#point-bar .line {width: 16px;}
#point-bar.left-position {left: 32px;transform: translateX(0%);transition:none;}
#point-bar.left-position #button_prev {order: 1;background-color: #00000047;}
#point-bar.left-position #button_next {order: 2;background-color: #00000047;margin-left: 8px;}
#point-bar.left-position .way {order: 3;margin: 0 0px 0 18px;}
#location-bar {left: calc(50% + 62px);transition:none;}
#location-bar.left-position {left: 32px;transform: translateX(0%);transition:none;}
#location-bar.left-position .wrap {justify-content: flex-start;}
}
@media screen and (max-width: 1030px) {
#location-bar {left: 32px;transform: translateX(0%);}
#location-bar .wrap {justify-content: flex-start;pointer-events: none;}
#point-bar {left: 32px;transform: translateX(0%);}
#point-bar .line {width: 20px;}
#point-bar #button_prev {order: 1;background-color: #00000047;}
#point-bar #button_next {order: 2;background-color: #00000047;margin-left: 8px;}
#point-bar .way {order: 3;margin: 0 0px 0 18px;}
.down-gradient {background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%,  rgb(0 0 0 / 0.4) 30%, rgb(0 0 0 / 0) 100% );height: 190px;}
#point-bar .scroll-scene.enabled:active {box-shadow: 0 0 0 2px #fdc400;}
}
@media screen and (max-width: 860px) {
#about_location {width: 106px;height: 134px;}
#about_location .title {padding: 14px 7px 8px 1px;}
#about_location .icon {top: 95px;}
#location-bar {bottom: 40px;pointer-events: none;}
#point-bar {bottom: 78px;}
}
@media screen and (max-width: 760px) {
#about_location {display: none;}
.down-gradient {height: 250px;}
.top-gradient {opacity: 0.4;background: linear-gradient(to top, rgb(0 0 0 / 0.6) 0%, rgb(0 0 0 / 0.4) 30%, rgb(0 0 0 / 0) 100% );height: 122px;position: fixed;top: 0;left: 0;right: 0;pointer-events: none;z-index: 1;width: auto;max-width: 100vw;transform: scaleY(-1);overflow: hidden;display: block;}
#location-bar {bottom: 98px;z-index: 2;left: 20px;width: calc(100% - 154px);}
#location-bar .wrap {display: flex; flex-direction: column-reverse; align-items: flex-start;}
#location-bar .name {text-align: left; font-size: 16px; line-height: 1.25;}
#location-bar .mobile-conteiner {display:flex;margin-bottom: 14px;gap: 10px;}
#location-bar .button {width: 30px;height: 30px;box-shadow: 0 0 0 1px #fff6;background-repeat: no-repeat;border-radius: 6px;background-color: #7e7e7e47;backdrop-filter: blur(4px);pointer-events: auto;}
#location-bar .about {background-image: url(../img/icon/book/read-w.svg);background-size: 16px;background-position: 50%;}
#location-bar .map {background-image: url(../img/icon/way/man.svg);background-size: 18px;background-position: 50%;}
#point-bar {bottom: 98px;left: auto;right: 18px;}
#point-bar .wrap {}
#point-bar .way {display: none;}
#point-bar #button_next, #point-bar #button_prev {width: 42px;height: 42px;background-color: #0a0a0a80;}
#point-bar #button_next {margin-left: 8px;}
.area {z-index: 2;overflow: hidden;}
.area .wrap {flex-direction: row-reverse;margin: 24px 20px 0px 0;box-shadow: none;border-right: 3px solid #fdc400;}
.area .info {width: 36px;height: 36px;margin-right: 0;margin-left: 2px;border-radius: 0;background-size: 18px;backdrop-filter: blur(4px);}
.area .name {font-size: 20px;height: 36px;line-height: 38px;text-transform: none;backdrop-filter: blur(4px);padding: 0px 12px 0px 12px;border-radius: 4px 0 0 4px;}
}
@media screen and (max-width: 360px) {
.area .wrap {margin: 18px 16px 0px 0;}
}
@media screen and (max-width: 330px) {
.area .name {font-size: 18px;}
}
@media screen and (min-width: 1900px) {
.area .wrap {margin: 32px 32px 0px 0;}
.area .info {background-size: 24px;width: 44px;height: 44px;}
.area .wrap:hover .info {background-size: 26px;}
.area .name {font-size: 20px;padding: 0px 18px 0px 18px;height: 44px;line-height: 44px;}
#about_location {width: 124px;height: 158px;font-size: 13px;bottom: 32px;right: 32px;}
#about_location .title {padding: 14px 12px 10px 1px;}  
#about_location .icon {width: 34px;height: 34px;top: 112px;left: -15px;background-size: 20px;}
#about_location:hover .icon {transform: scale(1.1);}
#location-bar {bottom: 38px;}
#location-bar .name {font-size: 20px;}
#point-bar {bottom: 82px;}
}
#map-route {transition:transform 0.5s ease-out,width 0.5s ease-out,height 0.5s ease-out;opacity:1;z-index: 2;position: fixed;bottom: 30px;left: 273px;cursor: pointer;box-shadow: 1px 1px 3px 0px #00000082;width: 60px;height: 60px;background: #ffffff;border-radius: 4px;background-color: rgb(255 255 255);padding: 2px;}
#map-route .icon {width:100%;height:100%;border-radius: 2px;overflow:hidden;}
#map-route .icon img {width:100%;height:100%;object-fit: cover;transform:scale(2);}
#map-route .tooltip {position:absolute;top: 50%;left: 72px;background-color: #1b1b1c;min-height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 5px;visibility: hidden;pointer-events: none;width: max-content;padding: 0 12px;transform: translateY(-50%);}
#map-route .tooltip span {display:block;font-family: 'VinnytsiaSans';font-size: 13px;color: #fff;text-align: center;}
#map-route .tooltip::before {content:'';display:block;position:absolute;top: 10px;left: -4px;width: 10px;height: 10px;background-color: #1b1b1c;transform: rotate(45deg);}
#map-route:hover {background: #fdc400;}
#map-route.left-position {transform:translateX(-248px);opacity:1;width: 112px;height: 142px;}
#map-route.left-position {transform:translateX(-248px);opacity:1;width: 112px;height: 142px;}
#map-route.left-position .icon img {transform:scale(1);}
#map-route.left-position .tooltip {left: 126px;}
#mapOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity 0.35s ease;}
#mapBaffle{position:fixed;inset:0;z-index:0;}
#mapPopup{width:90dvw;height:90dvh;background:#fff;border-radius:4px;overflow:hidden;position:relative;z-index:2;}
#map{width:100%;height:100%;}
#closeMap{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:3px;background-color:#fff;z-index:99999;cursor:pointer;
 background-image: url(../img/icon/close/black.svg); background-size: 24px; background-position: 50% 50%; background-repeat: no-repeat;
 display:flex;align-items:center;justify-content:center;box-shadow: 0 1px 3px rgb(0 0 0 / 12%);}
#closeMap:hover {background-color:#f5f5f5;box-shadow: 0 2px 3px rgb(0 0 0 / 30%);}
.custom-pin{width:16px;height:16px;border-radius:50%;background:#3873B9;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.35);}
.custom-pin-active{width:22px;height:22px;border-radius:50%;background:#fdc400;border:2px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,0.45);}
.custom-pin-hover{background:#fdc400 !important;}
.mapCard{width: 220px;}
.mapCardImage{width:100%;height: 120px;object-fit:cover;display:block;border-radius: 2px;}
.mapCardName{margin-top: 14px;font-size: 14px;line-height: 1.3;font-family: 'VinnytsiaSans';color: #000000;}
.openPano{margin-top:14px;height: 35px;line-height: 35px;border-radius: 2px;background: #3873b921;color: #173e6c;display:flex;align-items:center;justify-content:center;cursor:pointer;font-family: 'VinnytsiaSans';font-size: 13px;transition:0.2s;}
.openPano:hover{background:#2b5f9b;color: #fff;}
#mapControls{position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 1000; display: flex; gap: 8px;}
#mapControls > div{min-width: 5px; padding: 8px 10px 8px 12px; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); color: #000000; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; transition: background 0.2s ease, opacity 0.2s ease;}
#mapControls > div:hover{box-shadow: 0 2px 3px rgb(0 0 0 / 30%);background: #f5f5f5;}
#mapControls > div:active{box-shadow: 0 1px 3px rgb(0 0 0 / 12%);}
#mapStart, #mapHere, #mapEnd {position:relative;display: flex;align-items: center;justify-content: space-between;}
#mapStart::after, #mapHere::after, #mapEnd::after {content: ''; width: 18px; height: 18px; background-repeat: no-repeat; display: block;margin-left: 6px;}
#mapStart::after {background-image: url(../img/icon/map/flag-start-black.svg);background-size: 18px;background-position: 50%;}
#mapHere::after {background-image: url(../img/icon/way/man-black.svg);background-size: 18px;background-position: 50%;}
#mapEnd::after {background-image: url(../img/icon/map/flag-end-black.svg);background-size: 18px;background-position: 50%;}
.map-bubble-wrapper{width: 44px; height: 52px;}
.map-bubble{width: 44px;height: 44px;border-radius: 50% 50% 50% 0;background: #ffeb3b;box-shadow: 0 4px 14px rgba(0,0,0,0.25);transform: rotate(-45deg);transform-origin: center;}
.map-bubble-icon{width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: 24px 24px; transform: rotate(45deg);}
.map-bubble-start .map-bubble-icon{background-image: url("../img/icon/map/flag-start-black.svg");}
.map-bubble-end .map-bubble-icon{background-image: url("../img/icon/map/flag-end-black.svg");}
.map-bubble-here .map-bubble-icon{background-image: url("../img/icon/way/man-black.svg");}
@media screen and (max-width: 1260px) {
#map-route .tooltip {display:none;}
#map-route {display:none;}
}
@media (max-width: 760px){
#mapPopup {width: 93dvw;height: 95dvh;}
#mapControls{top: auto; bottom: 22px; left: 16px; flex-direction: column;}
#mapControls > div{min-width: auto;}
#mapControls > div:hover{box-shadow: 0 1px 3px rgb(0 0 0 / 12%);;background: #fff;}
#mapControls > div:active{box-shadow: 0 1px 3px rgb(0 0 0 / 12%);}
#mapStart span:last-child, #mapEnd span:last-child {display: none;}
}
@media screen and (min-width: 1900px) {
#map-route {width: 70px;height: 70px;bottom: 38px;left: 316px;}
#map-route.left-position {width: 124px;height: 158px; transform: translateX(-278px);}
#map-route .tooltip {left: 82px;}
#map-route.left-position .tooltip {left: 138px;}
}