/* СТИЛЬ МИГАЮЩЕГО МАРКЕРА ------------------------------ */
.hs_mrkr_anime {position:relative;width: 20px;height: 20px;border-radius: 40px;}
.hs_mrkr_anime .point {display:block;width: 20px;height: 20px;background-color: #42b72a;background-color: #078049;border-radius:16px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;border: 3px solid #fff;transition:all 0.15s;}
.hs_mrkr_anime .point.over {width:22px;height:22px;background-color: #C6B624;top: -1px;left: -1px;transition:all 0.15s;}
.hs_mrkr_anime .bkgrnd-anime {display:block;width: 22px;height: 22px;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;}
.hs_mrkr_anime .animation {-webkit-animation-name: anime_mrkr;animation-name: anime_mrkr;}
@-webkit-keyframes anime_mrkr {
  0% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);}
  50% {opacity: 0;transform-origin: 50% 50%;transform: scale(1.5, 1.5);}
  100% {opacity: 0;}
}
@keyframes anime_mrkr {
  0% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);}
  50% {opacity: 0;transform-origin: 50% 50%;transform: scale(1.5, 1.5);}
  100% {opacity: 0;}
}

/* AIR PHOTO ХОТСПОТ ------------------------------ */
.air_photo_hs {width: 100px;height: 100px;overflow: hidden;background: #fff;border-radius: 80px;border: 4px solid #078049;border: 4px solid #fff;box-shadow: 0 0 0px 0px #078049;}
.air_photo_hs:after {content:'';display:block;position:absolute;top:-5px;left:-5px;width: 106px;height: 106px;border: 2px solid #fff;border-radius: 80px;}
.air_photo_hs img {height: 100%;}

/* тултип для фото хотспота в воздухе ------------------------------ */
.air-tltp {position: relative;border-radius: 20px;padding: 2px;border: 2px solid #fff;}
.air-tltp .title {background-color: #ffffff;position: relative;padding: 12px 14px 12px 14px;font-size: 13px;font-family: 'e-Ukraine-Bold';line-height: 1.4;color: #093227;border-radius: 18px;}


/* LAND POINT ------------------------------ */
.land_point{width: 30px;height: 30px;overflow: hidden;background-color: #00965269;border-radius: 80px;border: 4px solid #fff;
 -webkit-animation: anime_bk 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 animation: anime_bk 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.land_point .cirkle {position:absolute;top: -6px;left: -6px;width: 42px;height: 42px;border: 2px solid #fff;border-radius: 80px;
  -webkit-animation: anime_point 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation: anime_point 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes anime_bk {
  0% {background-color: #00965269;border: 4px solid #fff;}
  30% {background-color: #009652;border: 6px solid #fff;}
  60% {background-color: #00965269;border: 4px solid #fff;}
  100% {background-color: #00965269;border: 4px solid #fff;}
}

@keyframes anime_point {
  0% {transform-origin: 50% 50%;transform: scale(1, 1);}
  30% {transform-origin: 50% 50%;transform: scale(0.7, 0.7);}
  60% {transform-origin: 50% 50%;transform: scale(1, 1);}
  100% {transform-origin: 50% 50%;transform: scale(1, 1);}
}

/* ------------------------------------------------------------------------------------- */
/* GUIDEBOT ----------------------------------------------------------------------- */
#guidebot {position: absolute;right: 36px;bottom: 30px;width: 112px;height: 112px;z-index: 3;transform-origin: left top;transition: opacity 0.5s ease-in, transform 0.5s;}

#guidebot .avatar {position: absolute;box-sizing: border-box;left: 50%;top: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%);border-radius: 100px;}
#guidebot .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;}
#guidebot .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;}

#guidebot.pulse .avatar:before,
#guidebot.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);}
}

#guidebot .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;}
#guidebot .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;}
#guidebot .avatar .icon img {position: absolute;left: -1px;top: 0px;width: 114px;max-width: none;}
#guidebot.sleep {pointer-events: none;opacity:0.5;transition: opacity 0.25s ease-in;}

#guidebot .sound {right: -4px;bottom: 0;width: 36px;height: 36px;background-color: #0e4e3d;border-radius: 30px;background-repeat: no-repeat;position: absolute;box-shadow: 0 0 0 3px #ffffff80;cursor: pointer;}
#guidebot .sound.on {background-image: url(resources/menu-ico/sound-on.svg);background-size: 20px;background-position: 50%;box-shadow: 0 0 0 3px #ffffff;background-color: #009652;}
#guidebot .sound.on:hover{box-shadow: 0 0 0 3px #fff;}
#guidebot .sound.on.hover{box-shadow: 0 0 0 3px #fff;}
#guidebot .sound.off {background-image: url(resources/menu-ico/sound-off.svg);background-size: 20px;background-position: 50% 50%;background-color: #0e4e3d;}
#guidebot .sound.off:hover{box-shadow: 0 0 0 3px #fff;}
#guidebot .sound.off.hover{box-shadow: 0 0 0 3px #fff;}


/* ------------------------------------------------------------------------------------- */
/* ПАНЕЛЬ TEXT BOT ----------------------------------------------------------------------- */
#sheet-textbot {position:absolute;bottom: 88px;opacity: 0;left: calc(50% + 140px);transform: translateX(-50%);z-index: 0;height: 30px;width: 120px;max-height: 60%;border-radius: 10px;padding-right: 4px;padding-top: 22px;padding-bottom: 14px;background-color: #f3f3e8;transition: height .4s 0s, opacity .4s 0s, width 0.4s 0s, left 0.5s ease-out;}
#sheet-textbot.center-position {left: 50%;transform: translateX(-50%);transition: bottom .4s 0s,height .4s 0s, opacity .4s 0s, width 0.4s 0s, left 0.5s ease-out;}
#sheet-textbot:before {content:'';display:block;position:absolute;bottom: -5px;left: 50%;width: 20px;height: 20px;background-color: #f3f3e8;transform: translateX(-50%) rotate(45deg);}

#sheet-textbot.open {height: 460px;width: 380px;transition: height .4s 0s, opacity 0.8s 0s, width 0.4s 0s, left 0.5s ease-out, transform 0.5s ease-out;box-shadow: 0 0 8px 0 #00000059;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: #9e9e9e;border-radius: 9em;box-shadow: inset 1px 1px 10px #eeeeee;display:none;}
#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: 20px;font-family: 'ermilov-bold';text-align: left;line-height: 1.25;}
#sheet-textbot p {line-height: 1.45;font-family: "Roboto", sans-serif;font-weight: 400;font-size: 16px;margin: 18px 24px 0;}
#sheet-textbot ul {list-style-type:none;margin-top: 8px;}
#sheet-textbot li {margin-top: 10px;line-height: 1.4;}


/*** 1010px  (!!!! for 962) *******************/
@media screen and (max-width: 1010px) {
#sheet-textbot {right: auto;left: 24px;bottom: 180px;max-height: 55%;transform: none;width: 150px;z-index: 2;transition: height .4s 0s, opacity .4s 0s, width 0.4s 0s, left 0.5s ease-out, transform 0.5s ease-out;pointer-events: none;}
#sheet-textbot:before {left: 80px;transform: translateX(-50%) rotate(45deg);}
#sheet-textbot.off {transform: translateY(96px);}

#guidebot {right: 24px;bottom: 120px;}
#guidebot.off {transform: translateY(96px);transition: transform 0.5s ease-out;}

#guidebot .sound {cursor: default;right: 82px;width: 40px;height: 40px;}
#guidebot .sound.off:hover {box-shadow: 0 0 0 3px #ffffff80;}
#guidebot .sound.off, #guidebot .sound.on {background-size: 22px;}
#guidebot .sound.off.hover {box-shadow: 0 0 0 3px #ffffff80;}
}

/*** 642px (!!!! for 640) *******************/
@media screen and (max-width: 642px) {
#sheet-textbot {bottom: 146px;padding-bottom: 18px;left: 18px;}
#sheet-textbot:before {left: 68px;}

#guidebot {right: 12px;bottom: 89px;}
#guidebot.off {transform: translateY(74px);}
#sheet-textbot.off {transform: translateY(74px);}
#guidebot .avatar {border-radius: 40px 0 0 40px;background-color: transparent;}
#guidebot .avatar .icon {border-radius: 80px;width: 98px;height: 98px;box-shadow: 0 0 0 3px #ffffff80;}
#guidebot .avatar .icon img {width: 106px;left: -1px;top: -2px;}
#guidebot .avatar:after {display: none;}
#guidebot .avatar:before {display: none;}
#guidebot .sound {right: 77px;bottom: 8px;width: 38px;height: 38px;}
#guidebot .sound.on {box-shadow: 0 0 0 2px #ffffff;}
#guidebot .sound.on.hover {box-shadow: 0 0 0 2px #ffffff;}
#guidebot .sound.on:hover {box-shadow: 0 0 0 2px #ffffff;}
#guidebot .sound.off {box-shadow: 0 0 0 2px #ffffff80;}
#guidebot .sound.off, #guidebot .sound.on {background-size: 20px;}

#guidebot .sound.off:hover {box-shadow: 0 0 0 2px #ffffff80;}
#guidebot .sound.off.hover {box-shadow: 0 0 0 2px #ffffff80;}
}

/*** 432px (!!!! for 424/428/430) *******************/
@media screen and (max-width: 432px) {
#sheet-textbot {max-height: calc(100% - 220px);}
#sheet-textbot.open {width: calc(100% - 36px);}
#sheet-textbot:before {/* left: 68px; */}
#guidebot {right: 0;bottom: 79px;}
#guidebot .sound {width: 36px;height: 36px;}
#guidebot .avatar {width: 92px;height: 92px;}
#guidebot .avatar .icon {width: 88px;height: 88px;}
#guidebot .sound {right: 76px;bottom: 13px;}
#guidebot .avatar .icon img {width: 95px;left: -5px;top: -1px;}
#sheet-textbot h2 {font-size: 20px;}
#sheet-textbot p {font-size: 15px;}
}

/*** 377px (!!!! for 375) ***********************/
@media screen and (max-width: 377px) {
#sheet-textbot {max-height: calc(100% - 200px);}
#sheet-textbot.open {width: calc(100% - 36px);}
}

/*** 324px (!!!! for 320) ***********************/
@media screen and (max-width: 324px) {
#sheet-textbot {left: 10px;}
#sheet-textbot.open {width: calc(100% - 20px);max-height: calc(100% - 162px);}
#sheet-textbot:before {left: 76px;}
#sheet-textbot .title {padding: 0 20px;}
#sheet-textbot p {margin: 18px 20px 0;}
}

@media (hover: hover) and (min-width: 1020px) {
#guidebot.hover .avatar .icon {box-shadow: 0 0 0 4px #fff;}
}