
#info-ava {position: absolute;border-radius: 10px;bottom: 28px;right: 32px;z-index: 3;cursor:pointer;display: flex;flex-direction: column-reverse;align-items: center;gap: 10px;}
#info-ava .icon {width: 54px;height: 54px;border-radius: 50%;background-color: #0063af;background-repeat: no-repeat;border: 4px solid transparent;box-sizing: content-box;box-shadow: 0 0 0 1px #ffffff40;background-clip: padding-box;}
#info-ava .icon:hover {box-shadow: 0 0 0 2px #f59c00;}
.touchevents #info-ava .icon:hover {box-shadow: 0 0 0 1px #ffffff40;}
#info-ava .icon.play {box-shadow: 0 0 0 2px #f59c00;}
.touchevents #info-ava .icon.play {box-shadow: 0 0 0 2px #f59c00;}
#info-ava .au_gd {background-image: url(resources/icon/audio/headset.svg);background-size: 30px;background-position: 50% 10px;}
#info-ava .txt_gd {background-image: url(resources/icon/text/book.svg);background-size: 30px;background-position: 50% 11px;}

#audio_guide.play {background-image: url(resources/icon/audio/sound-on.svg);background-size: 30px;background-position: 50% 12px;transform: rotate(180deg);}

.tooltip_ava {position:absolute;background-color:#1b1b1c;height: 56px;display: none;border-radius: 5px;z-index: 9;}
.tooltip_ava div {display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;}
.tooltip_ava span {display:block;font-family: 'VinnytsiaSansReg';font-size: 14px;color: #fff;text-align: center;margin: 0 16px;white-space: nowrap;margin-top: 1px;}
.tooltip_ava:before {content:'';display:block;position:absolute;top: 50%;right: -5px;width: 10px;height: 10px;background-color:#1b1b1c;transform: translateY(-50%) rotate(45deg);}
#tooltip_audio {bottom: 31px;right: 110px;}
#tooltip_tetx {bottom: 105px;right: 110px;}
.touchevents .tooltip_ava {display:none !important;}

#sheet-textbot {position:absolute;bottom: 180px;opacity: 0;right: 23px;z-index: 22;height: 30px;width: 120px;max-height: 65%;border-radius: 10px;padding-right: 4px;padding-top: 22px;padding-bottom: 14px;background-color: #fff;transition: height .4s, opacity .4s, width 0.4s;box-shadow: 0 0 8px 0 #00000059;}
#sheet-textbot:before {content:'';display:block;position:absolute;bottom: -5px;right: 31px;width: 20px;height: 20px;background-color: #fff;transform: rotate(45deg);}
#sheet-textbot.open {height: 520px;width: 440px;transition: height .4s, width 0.4s, opacity 0.8s;opacity: 1;}
#sheet-textbot .wrap {height:100%;overflow-y: auto;opacity: 0;transition: opacity 0.1s;padding-bottom: 22px;}
#sheet-textbot.open .wrap  {opacity: 1;transition: opacity 0.5s .4s;pointer-events: auto;}
#sheet-textbot .wrap::-webkit-scrollbar {width: 3px;}
#sheet-textbot .wrap::-webkit-scrollbar-thumb {background-color: #484848;border-radius: 9em;box-shadow: inset 1px 1px 10px #bdbdbd;}
#sheet-textbot .wrap:hover::-webkit-scrollbar-thumb {display:block;}
#sheet-textbot .title {padding: 0px 24px 0px 24px;margin-top: 8px;}
#sheet-textbot h2 {font-size: 22px;font-family: 'VinnytsiaSerif';font-weight: normal;text-align: left;line-height: 1.2;}
#sheet-textbot p {line-height: 1.4;font-family: 'VinnytsiaSansReg';font-size: 16px;margin: 18px 24px 0;}
#sheet-textbot ul {list-style-type: circle;margin: 14px 44px 0;}
#sheet-textbot li {margin-top: 12px;font-family: 'VinnytsiaSansReg';font-size: 16px;line-height: 1.4;}


/*** 482px (!!!! for 480) *******************/
@media screen and (max-width: 482px) {
#info-ava {bottom: 22px;right: 22px;}
#info-ava .icon {width: 48px;height: 48px;}
#info-ava .au_gd {background-size: 24px; background-position: 50% 10px;}
#info-ava .txt_gd {background-size: 26px;background-position: 50% 10px;}
#sheet-textbot {right: 20px;bottom: 164px;max-height: calc(100% - 190px);}
#sheet-textbot:before {right: 20px;}
#sheet-textbot.open {height: 640px;width: calc(100% - 44px);}
}

/*** 432px *******************/
@media screen and (max-width: 432px) {
#info-ava {bottom: 16px;right: 16px;gap: 8px;}
#info-ava .icon {width: 46px;height: 46px;border: 2px solid transparent;}
#info-ava .txt_gd {background-size: 24px;}
#sheet-textbot {right: 16px;bottom: 148px;max-height: calc(100% - 168px);}
#sheet-textbot:before {right: 18px;}
#sheet-textbot.open {width: calc(100% - 26px);}
}

/*** 380px *******************/
@media screen and (max-width: 380px) {
#info-ava {width: 100%; display: flex; flex-direction: row; right: auto; left: 0; justify-content: space-between; pointer-events: none; gap: 0; padding: 0 16px;}
#info-ava .icon {pointer-events: auto;}
#sheet-textbot {bottom: 84px;max-height: calc(100% - 100px);right: 13px;}
#sheet-textbot:before {right: 19px;}
}

/* - !!!!!!!!!!!! - - - 1920px - - - !!!!!!!!!!!! - */
@media screen and (min-width: 1910px) {
#tooltip-infoava {bottom: 62px;right: 168px;}
#sheet-textbot {bottom: 180px;right: 32px;max-height: 72%;}
#sheet-textbot:before {right: 22px;}
#sheet-textbot.open {height: 680px;width: 520px;}
}

.foto_hs {position:relative;width: 56px;height: 56px;border-radius: 50%;background-color: #00000029;transition:box-shadow 0.2s;transition:all 0.25s;}
.foto_hs .ripple, .foto_hs .ripple:before, .foto_hs .ripple:after {position: absolute;top: 50%;left: 50%;height: 58px;width: 58px;transform: translate(-50%, -50%);border-radius: 50%;box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);-webkit-animation: ripple_hs 4s infinite;animation: ripple_hs 4s infinite;box-shadow: 0 0 0 0 #fff;}
.foto_hs .ripple::before {-webkit-animation-delay: .9s; animation-delay: .9s; content: "";}
.foto_hs .ripple::after {-webkit-animation-delay: .6s; animation-delay: .6s; content: "";}
.foto_hs .pict {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color:#ffffff22;border:3px solid #fff;overflow: hidden;width: 50px;height: 50px;border-radius:50%;}

.foto_hs.paused {box-shadow: 0 0 0 1px #f59c00;transition:all 0.25s;transform:scale(1.75);}
.foto_hs.paused .ripple, .foto_hs.paused .ripple:before, .foto_hs.paused .ripple:after {animation: none !important;}

@-webkit-keyframes ripple_hs {
    70% {box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
@keyframes ripple_hs {
    70% {box-shadow: 0 0 0 16px rgba(255, 255, 255, 0);}
    100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

.ballon-tooltip {position: relative;background:#fff;font-size: 14px;line-height: 1.3em;font-family: 'VinnytsiaSansBold';padding: 8px 10px 8px 10px;border-radius: 0 0 4px 4px;box-shadow: 0px 2px 2px #00000038;text-align:center;border-top: 4px solid #f59c00;}
.ballon-tooltip::before {content: "";position: absolute;border-width: 8px;border-style: solid;border-color: #fff transparent transparent transparent;bottom: -15px;left: 50%;transform: translateX(-50%);z-index:199;}
.ballon-tooltip::after {content: "";position: absolute;width: 0;height: 0;border-style: solid;border-width: 8px 8px 0;border-color: rgba(0, 0, 0, 0.38) transparent transparent transparent;
  bottom: -9px;left: 50%;transform: translateX(-50%);z-index: 198;
}

.mrkr_hs {position:relative;width: 16px;height: 16px;border-radius: 50%;}
.mrkr_hs .point {top: 50%;left: 50%;transform: translate(-50%, -50%);width: 16px;height: 16px;background-color: #137826;background-color: #f59c00;border-radius:16px;position: absolute;border: 2px solid #fff;}
.mrkr_hs.over .point {background-color: #0063af;}
.mrkr_hs .ripple {top: 50%;left: 50%;transform: translate(-50%, -50%);width: 18px;height: 18px;background-color:#fff;border-radius: 18px;position: absolute;top: -1px;left: -1px;animation: move-forever 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;-webkit-animation-duration: 2.5s;animation-duration: 2.5s;-webkit-animation-name: anime_mrkr;animation-name: anime_mrkr;}
@-webkit-keyframes anime_mrkr {
  0% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);}
  60% {opacity: 0;transform-origin: 50% 50%;transform: scale(2.0, 2.0);}
  100% {opacity: 0;}
}
@keyframes anime_mrkr {
  0% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);}
  60% {opacity: 0;transform-origin: 50% 50%;transform: scale(2.0, 2.0);}
  100% {opacity: 0;}
}

/*** 482px (!!!! for 480) *******************/
@media screen and (max-width: 482px) {
.foto_hs .pict img {display:none;}
.foto_hs {width: 42px;height: 42px;}
.foto_hs .ripple, .foto_hs .ripple:before, .foto_hs .ripple:after {height: 44px;width: 44px;}
.foto_hs .pict {width: 36px;height: 36px;}
}
