body.loadingInit{
  background-color: #003B49;
}
header.main_header.fixed{
  /*position: fixed;
  top: 0;*/
  width: 100%;
  transition: all 0.6s ease-in;
  visibility: hidden;
  opacity: 0;
}

body.rotateComplete header.main_header.fixed{
  visibility: visible;
  opacity: 1;
}

.locaion-title-wrap{
  position: relative;
  height: 100%;
}

.location-title{
  position: absolute;
  font-weight: normal;
  color: #B3C3C8;
  opacity: 0;
}

.lt-1{
  top: 20%;
  left: 20%;
}

.lt-2{
  top: 20%;
  right: 20%;
}

.lt-3{
  bottom: 20%;
  left: 20%;
}

.lt-4{
  bottom: 20%;
  right: 20%;
}

.building-view{
  position: relative;
  height: 100%;
}

body .main{
  margin: 0;
  padding: 0;
  position: relative;
  height: calc(100vh - 100px);
}

.hidden-overflow{overflow: hidden;}

.rotate-img{/*display: none;*/ width: 100%; height: 100%; position: absolute; top: 3%; left: 61%; visibility: hidden; opacity: 0; transition: all 0.6s linear; max-width: 850px; transform: translateX(-50%);}
.rotate-img.active{visibility: visible; opacity: 1;}

.cloudimage-360 .cloudimage-inner-box canvas{cursor: url(../images/rotate-hover-cursor.png), url(../images/rotate-hover-cursor.png), move;}

.left-menu{display: none; position: absolute; top: 192px; left: 200px; width: 400px; max-width: 100%;}

.left-menu .left-menu-heading{font-family: 'quiche-sans', sans-serif; font-weight: 500; color: #ffffff; font-size: 25px; line-height: 34px; margin: 0 0 30px 0; text-transform: uppercase;}
.left-menu .left-menu-heading-text{font-family: 'quiche-sans', sans-serif; font-weight: 500; color: #ffffff; font-size: 22px; line-height: 34px; margin: 0 0 30px 0; text-transform: uppercase;}
.left-menu .left-menu-text{font-family: aktiv-grotesk-extended, sans-serif;  font-weight: 200; color: #ffffff; font-size: 16px; line-height: 28px; margin: 0; width: 305px; max-width: 100%;}
.left-menu span{display: block;}

.load-logo{position: absolute; width: 100%; top: 50%; transform: translateY(-50%); text-align: center;}

.right-menu{position: absolute; top: 50%;  right: 0; transform: translateY(-50%); overflow: hidden; visibility: hidden; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0;}
.right-menu.appear{visibility: visible; opacity: 1;}
.right-menu ul{margin: 30px 0 30px 30px;}
.right-menu ul li{display: flex; justify-content: space-between; position: relative; padding-right: 61px; cursor: pointer; transform: translateX(100%); transition: all 0.5s;}
.right-menu ul li.inactive{pointer-events: none;cursor: default;}
.right-menu ul li + li{margin-top: 150px;}
.right-menu ul li:after{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 1px; background-color: #b7c9d3;}
.right-menu ul li .menu-icon{width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; border-radius: 50%; transition: all 0.1s linear; background-color: #fff; text-align: center; line-height: 50px;}
.right-menu ul li .icon-bg{fill: #ffffff; transition: all 0.1s linear;}
.right-menu ul li svg > * , .right-menu ul li svg > * {fill: #003b49; transition: all 0.1s linear;}
.right-menu ul .icon-live:hover .menu-icon, .right-menu ul .icon-live.active .menu-icon{box-shadow: 0 0 25px #aaefff; background-color: #00afd7;}
.right-menu ul .icon-shop:hover .menu-icon, .right-menu ul .icon-shop.active .menu-icon{box-shadow: 0 0 25px #ffe27e; background-color: #c99f08;}
.right-menu ul .icon-stay:hover .menu-icon, .right-menu ul .icon-stay.active .menu-icon{box-shadow: 0 0 25px #a4dbe8; background-color: #a4dbe8;}
.right-menu ul .icon-play:hover .menu-icon, .right-menu ul .icon-play.active .menu-icon{box-shadow: 0 0 25px #ffbdba; background-color: #d66965;}
.right-menu ul li:hover svg > *, .right-menu ul li.active svg > *{fill: #ffffff;} 
.right-menu ul li .menu-content{width: 170px; color: #ffffff; margin-left: 23px; transition: all 0.5s;}
.right-menu ul .icon-live:hover .menu-content, .right-menu ul .icon-live.active .menu-content{color: #00afd7}
.right-menu ul .icon-shop:hover .menu-content, .right-menu ul .icon-shop.active .menu-content{color: #daa900}
.right-menu ul .icon-stay:hover .menu-content, .right-menu ul .icon-stay.active .menu-content{color: #a4dbe8}
.right-menu ul .icon-play:hover .menu-content, .right-menu ul .icon-play.active .menu-content{color: #d66965}
.right-menu ul li .menu-content .right-menu-title{font-family: aktiv-grotesk, sans-serif; font-size: 28px; line-height: 28px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 2px;}
.right-menu ul li .menu-content p{font-family: aktiv-grotesk-extended, sans-serif; font-size: 12px; line-height: 15px; font-weight: 400; letter-spacing: 0.33px; margin-bottom: 0;text-transform: uppercase;}

/*--------------------------------
  Prev/Next Arrow Of 360 Degree
--------------------------------*/
.cloudimage-inner-box{overflow: hidden;}
.rotateMyImage, .fullrotate{visibility: hidden; position: absolute; left: 0; top: 0;  width: 1px; height: 1px; padding: 0; border: 0;}
.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next{visibility: hidden; width: 1px; height: 1px;padding: 0; border: 0;}
.cloudimage-inner-box .loader-process-360{width: 100px; height: 100px; line-height: 100px;}

/*--------------------------------
  Prev/Next Arrow Of 360 Degree
--------------------------------*/

/*-------------------------------
  Body Loader
-------------------------------*/
.bg-loader{
  position: absolute;
    width: 100%;
    height: 100vh;
    /* background-color: #003B49; */
    /* margin-top: -100px; */
    top: 0;
    z-index: 9;
}

.bg-loader .upper-side{
  position: absolute;
  width: 100%;
  height: 50vh;
  top: 0;
  left: 0;
  border-radius: 0 0 20% 0;
  background-color: #ffffff;
  background-image: url(../images/preload-bg.png);
  background-position: left bottom;

  -webkit-animation-name: shiftTop;
  animation-name: shiftTop;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.bg-loader .lower-side{
  position: absolute;
  width: 100%;
  height: 50vh;
  bottom: 0;
  left: 0;
  border-radius: 0 20% 0 0;
  background-color: #ffffff;
  background-image: url(../images/preload-bg.png);

  -webkit-animation-name: shiftBottom;
  animation-name: shiftBottom;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@keyframes shiftTop {
  0% {
      top: 0;
      left: 0;
      border-radius: 0 0 25% 0;
  }

  10% {
      top: 0;
      left: 0;
      border-radius: 0 0 50% 0;
  }

  20% {
      top: 0;
      left: 0;
      border-radius: 0 0 75% 0;
  }


  30% {
      top: 0;
      left: 0;
      border-radius: 0 0 100% 0;
  }

  40% {
      top: -15%;
      left: -15%;
      border-radius: 0 0 100% 0;
  }

  50% {
      top: -30%;
      left: -30%;
      border-radius: 0 0 100% 0;
  }

  60% {
      top: -45%;
      left: -45%;
      border-radius: 0 0 100% 0;
  }

  70% {
      top: -60%;
      left: -60%;
      border-radius: 0 0 100% 0;
  }

  80% {
      top: -75%;
      left: -75%;
      border-radius: 0 0 100% 0;
  }

  90% {
      top: -90%;
      left: -90%;
      border-radius: 0 0 100% 0;
  }

  100% {
      top: -100%;
      left: -100%;
      border-radius: 0 0 100% 0;
  }
}

@keyframes shiftBottom {
  0% {
      bottom: 0;
      left: 0;
      border-radius: 0 25% 0 0;
  }

  10% {
      bottom: 0;
      left: 0;
      border-radius: 0 50% 0 0;
  }

  20% {
      bottom: 0;
      left: 0;
      border-radius: 0 75% 0 0;
  }

  30% {
      bottom: 0;
      left: 0;
      border-radius: 0 100% 0 0;
  }

  40% {
    bottom: -15%;
    left: -15%;
      border-radius: 0 100% 0 0;
  }

  50% {
      bottom: -30%;
      left: -30%;
      border-radius: 0 100% 0 0;
  }

  60% {
      bottom: -45%;
      left: -45%;
      border-radius: 0 100% 0 0;
  }

  70%   {
      bottom: -60%;
      left: -60%;
      border-radius: 0 100% 0 0;
  }

  80%   {
      bottom: -75%;
      left: -75%;
      border-radius: 0 100% 0 0;
  }

  90%   {
      bottom: -90%;
      left: -90%;
      border-radius: 0 100% 0 0;
  }

  100%   {
    bottom: -100%;
    left: -100%;
    border-radius: 0 100% 0 0;
  }
}

.rotateMyImage{position: absolute; right: 0; visibility: hidden; z-index: -1;}

.svg-layer{display: none;}

.svg-layer svg{width: 100%;}

.svg-inner-layer{
  visibility: hidden;
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transition: all 0.6s linear;
  max-width: 850px;
  transform: translateX(-50%);
  z-index: -1;
  cursor: url(../images/rotate-hover-cursor.png), url(../images/rotate-hover-cursor.png), move;
}

.svg-inner-layer.active{
  z-index: 1;
  -webkit-animation-name: layerFadeIn;
  animation-name: layerFadeIn;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.svg-inner-layer.back-show{visibility: visible; opacity: 1; z-index: -1;}

@-webkit-keyframes layerFadeIn {
  from {visibility: hidden; opacity: 0;}
  to {visibility: visible; opacity: 1;}
}

@keyframes layerFadeIn {
  from {visibility: hidden; opacity: 0;}
  to {visibility: visible; opacity: 1;}
}

/*----------------------------------------
  Responsive
----------------------------------------*/
@media only screen and (max-width: 1920px) and (min-width: 1024px) {
  .right-menu ul li + li{margin-top: calc(10px + (150 - 10) * ((100vw - 1024px) / (1920 - 1024)))}
}
@media only screen and (max-width: 1680px) {
  .rotate-img, .svg-inner-layer{width: 75%; /*top: -30px;*/}

  .left-menu{top: 80px; left: 80px;width: 300px;}

  .left-menu .left-menu-heading{font-size: 18px; line-height: 30px; margin-bottom: 20px;}
  .left-menu .left-menu-heading-text{font-size: 16px; line-height: 26px; margin-bottom: 20px;}
  .left-menu .left-menu-text {font-size: 14px; line-height: 20px;}

  .right-menu ul li .menu-content .right-menu-title{font-size: 22px;}
}

@media only screen and (max-width: 1500px) {
  .rotate-img, .svg-inner-layer{width: 50%;}
}

@media only screen and (max-width: 1366px) and (min-width: 1025px) {
  .rotate-img, .svg-inner-layer{width: 40%; /*top: -30px;*/}
}

@media only screen and (max-width: 1400px) {
  .left-menu{width: 265px;}
    .left-menu .left-menu-text{/*font-size: 18px; line-height: 24px; width: 350px;*/}

  /*.right-menu ul{margin: 50px 0 50px 25px;}
    .right-menu ul li + li{margin-top: 70px;}*/
}

@media only screen and (max-width: 1024px) {
  body .main{margin: 0; height: calc(100vh - 83px);}
  .location-title{font-size: 13px; line-height: 16px;}
  .lt-1{top: 15%; left: 15%;}
  .lt-2{top: 5%; right: 15%;}
  .lt-3{bottom: 40%; left: 10%;}
  .lt-4{bottom: 30%; right: 15%;}

  .rotate-img, .svg-inner-layer{width: 100%;}

  .left-menu {position: fixed; width: 375px; max-width: calc(100% - 20px); top: auto; left: 25px; bottom: 150px; bottom: calc(150px + env(safe-area-inset-bottom));}
    .left-menu .left-menu-heading + .left-menu-heading{margin-bottom: 0;}
      .left-menu .left-menu-text + .left-menu-text{margin-top: 10px;}
      .right-menu{padding: 0; position: fixed; bottom: 0; top: auto; transform: none; width: 100%; background-color: rgba(0,0,0, 0.2);}
        .right-menu ul{margin: 0 0 0 15px; display: flex; justify-content: space-evenly;}

        .right-menu ul li{padding: 0 20px; flex-flow: column; transform: none; border-top: 2px solid transparent;  padding: 10px 20px;}
          .right-menu ul li:after{display: none;}
          .right-menu ul li + li{margin-top: 0;}
          .right-menu ul li .menu-icon{margin: 0 auto;}
        .right-menu ul li .menu-content{margin: 0; width: auto;}
        .right-menu ul li .menu-content p{display: none;}
      .right-menu ul li .menu-content .right-menu-title {margin: 11px 0; text-align: center;}
      .right-menu ul li .menu-icon svg{width: 100%;}

      .right-menu ul li.icon-live .menu-icon{margin-top: -12px;}

      .right-menu ul li .menu-icon,
      .right-menu ul li:hover .menu-icon, .right-menu ul li.active .menu-icon{background-color: transparent !important; box-shadow: none !important;}

      .right-menu ul li svg > *, .right-menu ul li svg > *{fill: #ffffff;}

      .right-menu ul li.icon-live.active{border-color: #00afd7;}
      .right-menu ul li.icon-shop.active{border-color: #daa900;}
      .right-menu ul li.icon-stay.active{border-color: #a4dbe8;}
      .right-menu ul li.icon-play.active{border-color: #d66965;}
      
      .right-menu ul li.icon-live.active .menu-content .right-menu-title{color: #00afd7;}
      .right-menu ul li.icon-shop.active .menu-content .right-menu-title{color: #daa900;}
      .right-menu ul li.icon-stay.active .menu-content .right-menu-title{color: #a4dbe8;}
      .right-menu ul li.icon-play.active .menu-content .right-menu-title{color: #d66965;}

      .right-menu ul .icon-live:hover .icon-bg, .right-menu ul .icon-live.active .icon-bg{fill: transparent;}

      .right-menu ul li.icon-live.active svg > *{fill: #00afd7;}
      .right-menu ul li.icon-shop.active svg > *{fill: #daa900;}
      .right-menu ul li.icon-stay.active svg > *{fill: #a4dbe8;}
      .right-menu ul li.icon-play.active svg > *{fill: #d66965;}
}

@media only screen and (max-width: 991px) {
  .right-menu ul li .menu-content .right-menu-title{font-size: 18px; line-height: 24px; font-weight: 400;}
  .left-menu .left-menu-heading{font-size: 16px; line-height: 22px; margin-bottom: 16px;}
  .left-menu .left-menu-heading-text{font-size: 14px; line-height: 20px; margin-bottom: 14px;}
  .left-menu .left-menu-text{font-size: 12px; line-height: 20px; width: auto;}

  .rotate-img{}
    .right-menu ul li .menu-content .right-menu-title {font-size: 16px; line-height: 20px;}
    .right-menu ul li .menu-content .right-menu-title{margin: 7px 0;}
}

@media only screen and (max-width: 834px) and (min-width: 768px) {
  .left-menu {bottom: 160px;}
  .rotate-img, .svg-inner-layer{width: 80%; margin: 0 auto;}
}

@media only screen and (max-width: 600px) {
      /*.locaion-title-wrap{position: relative; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 293;}

      .location-title {position: relative; margin-bottom: 30px;}
      .lt-1, .lt-2, .lt-3, .lt-4{top: 0; left:0}*/

      .load-logo img{width: 230px;}

      .cloudimage-inner-box .loader-process-360{width: 70px; height: 70px; line-height: 70px;}

      .left-menu{bottom: 105px; width: 100%; max-width: calc(100% - 50px);}
      .left-menu-shop{width: 210px;}
      .left-menu-stay{width: 300px; max-width: 100%;}

      .right-menu ul li{padding: 10px 5px;}

      .right-menu ul li .menu-content .right-menu-title {font-size: 11px; line-height: 1; margin: 2px 0 0;}
      .right-menu ul li .menu-icon{width: 30px; height: 30px; margin: 0 auto;}

      .right-menu ul li.icon-live .menu-icon svg{width: 26px; height: 31px; margin-top: -20px;}
      .right-menu ul li.icon-shop .menu-icon svg{width: 14px; height: 18px; margin-top: -30px;}
      .right-menu ul li.icon-stay .menu-icon svg{width: 22px; height: 18px; margin-top: -30px;}
      .right-menu ul li.icon-play .menu-icon svg{width: 17px; height: 22px; margin-top: -30px;}

      /*.rotate-img{width: 260px; margin: 0 auto}

      .lt-1 {top: 5%; left: 10%;}
      .lt-2 {top: 0; right: 7%;}
      .lt-3 {bottom: 50%; left: 5%;}
      .lt-4 {bottom: 40%; right: 5%;}*/
}

@media only screen and (max-width: 480px){
  .lt-2, .lt-4{right: 25%;}
  .lt-2{top: 0;}
  .lt-3 {bottom: 40%; left: 5%;}
  .lt-4{bottom: 33%;}
  .rotate-img{height: auto;}
  .rotate-img, .svg-inner-layer {width: calc(100% - 25px);}

  .left-menu .left-menu-heading{font-size: 15px; line-height: 18px; margin-bottom: 10px;}
  .left-menu .left-menu-heading-text, .left-menu .left-menu-text{font-size: 12px; line-height: 16px;}

  .left-menu .left-menu-heading-text{margin-bottom: 10px;}
  .left-menu .left-menu-heading-text:last-child{margin-bottom: 0;}
}

@media only screen and (max-width: 412px){
  .left-menu {bottom: 90px;  bottom: calc(90px + env(safe-area-inset-bottom));}
}

@media only screen and (max-width: 375px){
  .lt-1 {top: 15%; left: 10%;}
  .lt-2 {top: 10px;right: 25%;}
  .lt-3 {bottom: 35%; left: 5%;}
  .lt-4 {bottom: 25%; right: 25%;}

  .rotate-img.sm-height, .svg-inner-layer.sm-height {width: calc(100% - 100px);}
}

@media only screen and (max-width: 360px){
  .left-menu {/*bottom: 60px;*/}
}