html,
 body {
     height: 100%;
     overflow: hidden;
     margin: 0;
     background-color: #0F1011;
 }

 iframe {
     display: block;
     border: none;
     width: 100%;
     height: 100%;
 }

 #play0 {
     position: fixed;
     top: 0;
     height: 100%;
     width: 100%;
     display: block;
     z-index: 2;
     left: 50%;
     transform: translate(-50%, 0);
     object-fit: cover;
     display: none;
 }

 #stop {
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
     bottom: 10%;
     z-index: 3;
     width: 120px;
     user-select: none;
     cursor: pointer;
     display: none;
 }

 #stop img {
     width: 100%;
     height: auto;
     pointer-events: none;
 }

 * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 #ui {
     position: fixed;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     pointer-events: none;
     transition: all .5s;
 }

 #ui.with-thumbs #menu {
     bottom: 125px;
 }

 #ui.hide {
     top: 50%;
 }

 #menu {
     position: absolute;
     bottom: 15px;
     width: 100%;
     display: flex;
     justify-content: center;
     transition: all .5s;
 }

 #menu-wrapper {
     display: flex;
     text-align: center;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     color: var(--thumb-text-color);
     padding: 10px 30px;
     /* background-color: rgba(26, 109, 168, .9); */
     border-radius: 30px;
 }

 #menu-delimiter {
     width: 2px;
     height: 40%;
     margin: 0 5px;
     background-color: var(--thumb-text-color);
 }

 #menu-wrapper>div {
     pointer-events: all;
     display: flex;
 }

 #menu-wrapper>div>div {
     margin: 0 5px;
 }

 #menu-wrapper img {
     width: 50px;
 }

 #menu-wrapper span {
     display: block;
     white-space: nowrap;
     font-size: 12px;
 }

 #thumbs {
     width: 100%;
     left: 0;
     bottom: 0;
     position: absolute;
     background-color: transparent;
     padding: 10px;
     box-sizing: border-box;
     background-color: var(--thumbs-bg);
     transition: all .3s;
     pointer-events: all;
     user-select: none;

 }

 #thumbs.hide {
     bottom: -500px;
 }

 #thumbs .swiper-slide {
     width: 140px;
     position: relative;
     border-radius: 5px;
     overflow: hidden;
 }

 #thumbs .swiper-slide img {
     width: 100%;
 }

 #thumbs .swiper-slide p {
     text-align: center;
     font-size: 14px;
     position: absolute;
     bottom: 0;
     width: 100%;
     background-color: rgba(0, 0, 0, .6);
     color: var(--thumb-text-color);
 }

 #mp0 {
     position: fixed;
     width: 30%;
     max-width: 220px;
     right: 10px;
     top: 10px;
     pointer-events: all;
     /* transform-origin: right top; */
     cursor: pointer;
     transform: rotate(180deg);
 }

 #mp0 img {
     width: 100%;
     vertical-align: top;
     height: auto;
 }

 #radar {
     transform-origin: center center;
     width: 8px;
     height: 8px;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     overflow: hidden;
     background-color: #F0BD4B;
     box-shadow: 0 0 1px 1px #F0BD4B;
     left: -100px;
     top: -100px;
     /* transition: all .3s; */
 }

 #ui.hide #topmenu {
     display: none;
 }

 #topmenu {
     position: fixed;
     right: 10px;
     top: 30px;
     user-select: none;
     pointer-events: all;
     cursor: pointer;
     text-align: center;
     color: #C4C2AD;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     width: 5em;
     transform-origin: right top;
     transform: scale(0.7);
 }

 #topmenu img {
     width: 100%;
     height: 100%;
 }

 #ui.hide #hotspots {
     right: -120%
 }

 #hotspots {
     position: fixed;
     right: -600px;
     top: 10px;
     width: 300px;
     max-height: calc(100% - 20px);
     background-color: rgba(26, 109, 168, .9);
     color: #F8E1C0;
     pointer-events: all;
     display: flex;
     flex-direction: column;
     transition: all .5s;
     border-radius: 10px;
     z-index: 999;
     padding: 5px 5px 5px 5px;
     box-sizing: border-box;
     text-align: center;
 }

 #hotspots.show {
     right: 10px;

 }

 #hotspots [close] {
     border-bottom: 1px solid #F8E1C0;
     font-size: 24px;
     padding: 5px;
     user-select: none;
     cursor: pointer;
     text-align: center;
 }

 #hotspots [list] {
     flex-grow: 1;
     overflow: hidden;
     padding: 10px;
     position: relative;
 }

 #hotspots [list] li {
     list-style: none;
     line-height: 46px;
     font-size: 16px;
     padding: 5px 5px 0 5px;
     transition: all .5s;
     cursor: pointer;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     transition: all .5s;
 }

 /* #hotspots [list] li:hover{
         overflow: auto;
         white-space:initial;
         text-overflow:initial;
      } */
 #hotspots [list] .swiper-scrollbar-drag {
     background-color: #e5cdb1;
     width: 2px;
     margin-left: 3px;
     border-radius: 5px;
 }

 #hotspots [list] li:hover {
     background-color: rgba(229, 205, 177, 0.2);
 }

 .photo-wrapper {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     box-sizing: border-box;
     padding: 8px;

     display: flex;
     flex-direction: column;
 }

 .photo-wrapper .photo-text {
     padding-top: 10px;
     text-align: center;
     color: white;
 }

 .photo-wrapper .photo-img {
     flex-grow: 1;
     overflow: hidden;
     text-align: center;
     background-color: white;
     border-radius: 10px;
 }

 .photo-wrapper .photo-img img {
     width: 90vmin;
     max-height: calc(100vh - 60px);
     max-width: 600px;
     object-fit: contain;
     object-position: center center;
 }

 #video-wrapper {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     max-width: 800px;
     width: calc(100% - 40px);
 }

 #poster {
     background: url(h.jpg) no-repeat center center;
     background-size: contain;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: #0F1011;
     z-index: 1000;
     cursor: pointer;
 }


 @media only screen and (orientation: portrait) and (max-width: 768px) {

     #poster {
         background: url(v.jpg) no-repeat center center;
         background-size: contain;
     }

 }

 @media screen and (max-width: 740px) {
     /* #mp0 {
        transform: rotate(90deg) translateY(-100%);
     } */

     #hotspots {
         right: -120%;
         border-radius: 0;
         padding: 5px 5px 20px 5px;
     }

     #hotspots.show {
         width: 100vw;
         height: 100vh;
         top: 0;
         right: 0;
     }

     #menu {
         bottom: 0;
     }

     #menu-wrapper {
         width: 100%;
         border-radius: 0;
         background-color: transparent;
         padding: 0 0 15px 0;
         align-items: flex-end
     }

     #menu-wrapper>div {
         flex-direction: column;
     }

     #menu-delimiter {
         display: none !important;
     }
 }

 #_stat {
     color: white;
     padding: 5px;
 }

 #thumbs .swiper-slide {
     border: var(--thumb-border);
     box-sizing: border-box;
 }

 #thumbs .current-thumb {
     border: var(--thumb-border-active);
 }

 #map0-point-wrapper {
     transform: scale(1);
 }

 .map-point {
     transform: translate(-50%, -50%);
     border-radius: 50%;
     display: none;
 }