@import url("https://use.typekit.net/mgy3bfe.css");

@font-face {
    font-family: 'Gotham-Medium';
    src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/Gotham-Medium.otf')  format('opentype'),
           url('fonts/Gotham-Medium.woff') format('woff'), url('fonts/Gotham-Medium.ttf')  format('truetype'), url('fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Gotham Light';
    src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/Gotham Light.otf')  format('opentype'),
           url('fonts/Gotham-Medium.woff') format('woff'), url('fonts/Gotham-Medium.ttf')  format('truetype'), url('fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
  }

body {
    font-family: adobe-garamond-pro, serif;
}

.ggskin {
    font-size: 0.4vw;
}

.ggskin_text div{
    color: white!important;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: 2px;
}

.general_txt {
    text-transform: uppercase;
    font-family: adobe-garamond-pro, serif;
    font-style: normal;
    letter-spacing: 2px;
}

.landing_txt {
	font-family: "Gotham Light";
	font-style: normal;
	text-align: center;
	line-height: 50px;
}

.hs_txt div {
    font-size: 10px;
}

.hs_icon, .ggskin, .ggskin_text div,.ggskin_text  {
    cursor: pointer!important;
}


.nav_wrapper {
    left:0px!important;
}

.nav_container {
    border-bottom: 1px solid white;
    position: fixed!important;
}

.icon_arrow {
    animation: doublearrow 2s infinite;
	-webkit-animation: doublearrow 2s infinite;
	-moz-animation:    doublearrow 2s infinite;
}



@keyframes doublearrow {
    0%{
        transform: translate(-5px,0);
        -webkit-transform:  translate(-5px,0);
        -moz-transform:   translate(-5px,0);
    }
    100%{
        opacity: 0;
        transform:translate(15px,0px);
        -webkit-transform: translate(15px,0px);
        -moz-transform:  translate(15px,0px);
    }
}

@-webkit-keyframes doublearrow {
    0%{
        transform: translate(-5px,0);
        -webkit-transform:  translate(-5px,0);
        -moz-transform:   translate(-5px,0);
    }
    100%{
        opacity: 0;
        transform:translate(15px,0px);
        -webkit-transform: translate(15px,0px);
        -moz-transform:  translate(15px,0px);
    }
}


.icon_arrow.left {
    animation: left_doublearrow 2s infinite;
	-webkit-animation: left_doublearrow 2s infinite;
	-moz-animation:    left_doublearrow 2s infinite;
}

@keyframes left_doublearrow {
    0%{
        transform:translate(0px,0px);
        -webkit-transform: translate(15px,0px);
        -moz-transform:  translate(15px,0px);
    }
    100%{
        opacity: 0;
        transform: translate(-15px,0);
        -webkit-transform:  translate(-15px,0);
        -moz-transform:   translate(-15px,0);
    }
}

@-webkit-keyframes left_doublearrow {
    0%{
        transform:translate(0px,0px);
        -webkit-transform: translate(0px,0px);
        -moz-transform:  translate(0px,0px);
    }
    100%{
        opacity: 0;
        transform: translate(-15px,0);
        -webkit-transform:  translate(-15px,0);
        -moz-transform:   translate(-15px,0);
    }
}

.iframe_border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border: 12px solid rgba(255,255,255,0.3);
    pointer-events: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 2;
}

.iframe_obv {
    width: 100%;
    height:101vh
}

.txt_artist {
    z-index: 2;
    position: absolute;
    bottom: 23px;
    left: 23px;
    color: white;
    font-family: adobe-garamond-pro, serif;
    font-weight: 700;
    font-style: normal;
    font-size: 10px;;
}

.landing  {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(167, 169, 172,0.93);
    cursor: pointer;
    z-index: 8;
}

.landing img {
    position: absolute;
    left: 50%;
    top: 40%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%);
    max-width: 21%;
}

.txt_landing {
    position: fixed;
    left: 50%;
    bottom: 4%;
    transform-origin: 0 0;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    color: white;
    font-family: adobe-garamond-pro, serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    text-decoration: underline;
}

.landing.hide {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.btn_hotspot {
    display: block;
    width: 20px!important;
    height: 20px!important;
    font-size: 1.3em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -1px;
    color: #5E7460;
    border: 2px solid rgba(112, 112, 112, 0.8);
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(112, 112, 112, 0.5);
    -webkit-animation: pulse 2s infinite;
    cursor: pointer!important;
}

.btn_hotspot.active {
    background: #B79972;
    -webkit-animation: pulse 2s infinite;
    border: 2px solid rgba(112, 112, 112, 0.6);
}

.fl_9 {
    top: 39.86%!important;
    left: 12%!important;
}

@-webkit-keyframes pulse {
    0% {
      -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      box-shadow: 0 0 0 2px rgba(112, 112, 112, 0.5);
    }
    10% {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 0 0 2px rgba(112, 112, 112, 0.5);
    }
    70% {
      -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      box-shadow: 0 0 0 10px rgba(112, 112, 112, 0);
    }
    100% {
      -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      box-shadow: 0 0 0 2px rgba(112, 112, 112, 0);
    }
}


.ggskin_scrollarea .div {
    height: 10px;
}

.logo_wrapper {
    position: absolute;
    top: 50px;
    left: 40px;
    z-index: 2;
    width: 180px;
}

.logo_wrapper img {
    width: 100%;
}

.floorplan_container {
    background-color: rgba(167,169,172,0.9);
    left: -75%!important;
    top: 0!important;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    z-index: 2;
}

.floorplan_container > .ggskin_image {
    z-index: 2;
}

.floorplan_container.active {
    left: 0!important;
    top: 0!important;
}

.floorplan_title {
    font-size: 1.6vw!important;
}

.txt_room div {
    font-family: "Gotham-Medium"!important;
    font-size: 1.2vw!important;
}

.txt_sq > div,.btn_close > div{
    font-family: "Gotham-Medium"!important;
    font-size: 1vw!important;
}
.btn_close {
    left: 44%!important;
    transform: translate(-50%, -50%)!important;
    z-index: 2!important;
}
.txt_sq {
    pointer-events: none!important;
}

.btn_vr.right {
    right: 22px!important;
}

.btn_vr > div {
    padding-top: 5px!important;
    border: 1px solid white!important;
    border-radius: 5px;
}

.btn_close > div{
    text-transform: uppercase;
    color: white;
    text-decoration: underline;
    z-index: 9;
}

.txt_bedroom2 > div {
    width: 110px!important;
}

.txt_bedroom3 > div {
    width: 110px!important;
}

.arrow_masterbed,.arrow_masterbed_right  {
    top: 59px!important;
}

.icon_arrow {
    height: 12px!important;
    width: 14px!important;
}

.arrow_bedroom3.icon_arrow  {
    top: 40px!important;
}
.arrow_bedroom2.icon_arrow {
    top: 35px!important;
}

.bg_overlay {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute;
    background-color: black!important;
}

.bg_overlay.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hs_bedroom2  > .svg_bedroom {
    left: -22px!important;
}

.hs_bedroom3 > .svg_bedroom {
    left: -22px!important;
}

.floorplan_glow {
    width: 56px;
    position: absolute;
    top: -21px;
    left: -14px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    pointer-events: none;
    opacity: 0;
}

.arrow_bedroom2_left  {
    top: 34px!important;
}

.arrow_wardrobe {
    top: 59px!important;
}

.menubar_glow,.zoomin_glow,.zoomout_glow,.rotation_glow,.fullscreen_glow,.ipmnext_glow,.ipmprev_glow {
    width: 56px;
    position: absolute;
    top: -21px;
    left: -18px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    pointer-events: none;
    opacity: 0;
}

.zoomout_glow,.rotation_glow{
    width: 56px;
    position: absolute;
    top: -21px;
    left: -21px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    pointer-events: none;
    opacity: 0;
}

.floorplan_glow.active
,.menubar_glow.active
,.zoomin_glow.active
,.zoomout_glow.active
,.rotation_glow.active
,.fullscreen_glow.active
,.ipmprev_glow.active
,.ipmnext_glow.active {
    opacity: 1;
}

.floorplan_container  > div:nth-child(1) {
    top: 180px!important;
}

.floorplan_title {
   top: 8%!important;
}

.txt_room {
    top: 70px!important;
}

.txt_room {
    top: 70px!important;
}

.txt_sq > div {
    top: 30px!important;
    font-size: 13px!important;
}

.btn_close > div{
    font-size: 13px!important;
}

.ggskin.ggskin_container.nav_wrapper > div:nth-child(1){
    display: none;
}

.ggskin_rectangle.menu_active {
    height: 52px;
    width: 88px!important;
}

.floorplan_container > .ggskin.ggskin_image > img:nth-child(1) {
    height: auto!important;
}

.fl_1 {
    top: 25.9%!important;
}
.fl_2 {
    left: 35%!important;
    top: 22.49%!important;
}
.fl_3 {
    top: 28.86%!important;
}
.fl_4 {
    left: 16.08%!important;
    top: 48.89%!important;
}
.fl_5 {
    left: 43%!important;
    top: 17%!important;
}
.fl_8 {
    left: 52%!important;
    top: 23%!important;
}
.fl_7 {
    top: 54.29%!important;
}

.svg_icon {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.svg_masterbedroom.svg_icon {
    width: 46px!important;
}
/* 
.floorplan_container {
    width: 1920px!important;
    height: 1080px!important;
    display: revert!important;
    position: absolute!important;
} */

.svg_bedroom {
    height: 29px!important;
    width: 46px!important;
}
.svg_bath {
    height: 38px!important;
    width: 45px!important;
    left: -23px!important;
}
.svg_livingroom {
    height: 26px!important;
    width: 44px!important;
}
.arrow_masterbath.icon_arrow {
    top: 47px!important;
}
.vr_initial {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(167, 169, 172,0.93);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    position: fixed; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
    z-index: 1000000;
}

.vr_wrapper {
    text-align: center;
    position: absolute;
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 80%;
}

.vr_text {
    font-family: adobe-garamond-pro, serif;
    color: white;
    font-size: 20px;
    text-transform: uppercase;
}

.vr_text_1 {
    font-family: adobe-garamond-pro, serif;
    color: white;
    font-size: 16px;
    text-transform: uppercase;
}

.txt_mirror {
    color: white;
    font-family: "Gotham-Medium"!important;
    font-size: 10px;
    position: absolute;
    left: 400px;
}

.txt_info {
	color: white;
	font-family: "Gotham-Medium"!important;
	font-size: 16px;
}

.txt_info > .txt_units {
	
}

.txt_mirror_1 {
    display: none;
}

.floorplan_container  > div:nth-child(1),.floorplan_container  > div:nth-child(2) {
    left: 10%!important;
}

/* media query */

/* aspect ratio */

@media (min-aspect-ratio:1366/1024) and (max-aspect-ratio:1366/1024) {
    .floorplan_container {
       width: 58%!important;
    }
    .floorplan_container > div:nth-child(1) {
       top: 25%!important;
     }
   }
   
   
   @media (min-aspect-ratio:2/1) and (max-aspect-ratio:2/1) {
       .floorplan_container > div:nth-child(1) {
           top: 25%!important;
       }
       .fl_1 {
           top: 25.9%!important;
       }
       .fl_2 {
           left: 35%!important;
           top: 22.49%!important;
       }
       .fl_3 {
           top: 28.86%!important;
       }
       .fl_4 {
           left: 16.08%!important;
           top: 48.89%!important;
       }
       .fl_5 {
           left: 43%!important;
           top: 17%!important;
       }
       .fl_8 {
           left: 52%!important;
           top: 23%!important;
       }
       .fl_7 {
           top: 54.29%!important;
       }
   }
@media (min-aspect-ratio:16/10) {
    .floorplan_container > div:nth-child(1) {
        top: 25%!important;
    }
    .fl_1 {
        top: 19.9%!important;
    }
    .fl_2 {
        top: 17.49%!important;
    }
    .fl_3 {
        top: 22.86%!important;
    }
    .fl_4 {
        top: 39.89%!important;
    }
    .fl_5 {
        left: 44%!important;
        top: 14%!important;
    }
    .fl_7 {
        top: 42.29%!important;
    }
    .fl_8 {
        top: 18%!important;
    }
    .fl_9 {
        top: 32.86%!important;
    }
    
}

@media (min-aspect-ratio:16/9) {
    .floorplan_container > div:nth-child(1) {
        top: 25%!important;
    }
    .fl_1 {
        top: 22.9%!important;
    }
    .fl_2 {
        top: 19.49%!important;
    }
    .fl_3 {
        top: 25.86%!important;
    }
    .fl_4 {
        top: 43.89%!important;
    }
    .fl_5 {
        left: 44%!important;
        top: 15%!important;
    }
    .fl_7 {
        top: 47.29%!important;
    }
    .fl_8 {
        top: 20%!important;
    }
    .fl_9 {
        top: 38.86%!important;
    }
}

@media (min-aspect-ratio:16/7) {
    .floorplan_container > div:nth-child(1) {
        top: 25%!important;
    }
    .fl_1 {
        top: 28.9%!important;
    }
    .fl_2 {
        left: 35%!important;
        top: 26%!important;
    }
    .fl_3 {
        top: 31.86%!important;
    }
    .fl_4 {
        top: 54.89%!important;
    }
    .fl_5 {
        top: 19%!important;
    }
    .fl_8 {
        top: 26%!important;
    }
    .fl_7 {
        top: 60.29%!important;
    }
    .fl_9 {
        top: 44.86%!important;
    }
}

@media (min-aspect-ratio:8/3) {
    .floorplan_container {
        width: 29%!important;
    }
}

@media (min-aspect-ratio:16/5) {
    .floorplan_container {
        width: 25%!important;
    }
}

@media (min-aspect-ratio:4/1) {
    .floorplan_title {
        font-size: 12px!important;
    }
}

@media only screen and (min-width: 1800px) and (min-height: 850px)  and (max-height: 1050px) {
    .floorplan_container {
        width: 38%!important;
    }
    .fl_1 {
        top: 25.9%!important;
    }
    .fl_2 {
        left: 35%!important;
        top: 22.49%!important;
    }
    .fl_3 {
        top: 28.86%!important;
    }
    .fl_4 {
        left: 16.08%!important;
        top: 48.89%!important;
    }
    .fl_5 {
        left: 43%!important;
        top: 17%!important;
    }
    .fl_8 {
        left: 52%!important;
        top: 23%!important;
    }
    .fl_7 {
        top: 54.29%!important;
    }
}
/* 991only */
@media only screen and (max-width: 991px) {
    .svg_wardbore {
        height: 35px!important;
        left: -13px!important;
        top: -13px!important;
        width: 35px!important;
    }

    .arrow_bath2_right,.arrow_bath2  {
        top: 38px!important;
    }
    .arrow_livingroom {
        top: 39px!important;
    }
    .arrow_kitchen  {
        top: 32px!important;
    }
    .icon_arrow {
        height: 7px!important;
        width: 10px!important;
    }
    .arrow_masterbed, .arrow_masterbed_right {
        top: 51px!important;
    }
    .arrow_masterbath.icon_arrow {
        top: 39px!important;
    }
    .arrow_bedroom3.icon_arrow {
        top: 35px!important;
    }
    .arrow_bedroom2.icon_arrow {
        top: 30px!important;
    }
    .floorplan_container {
        left: -120%!important;
    }
    .btn_hotspot {
        width: 14px!important;
        height: 14px!important;
    }
    .txt_room {
        top: 27px!important;
    }
    .floorplan_container > div:nth-child(1) {
        top: 99px!important;
    }
    .txt_sq {
        top: 13px!important;
    }
    .txt_sq > div {
        font-size: 9px!important;
    }
    .btn_close > div {
        font-size: 9px!important;
    }
    .txt_room div {
        font-size: 13px!important;
    }
    .floorplan_title {
        font-size: 15px!important;
    }
    .landing img {
        max-width: 35%;
    }
    .svg_masterbedroom {
        height: 25px!important;
        left: -23px!important;
        top: -2px!important;
    }

    .svg_bedroom {
        height: 25px!important;
    }

    .svg_bath {
        height: 33px!important;
        top: -20px!important;
    }

    .svg_kitchen  {
        height: 22px!important;
        left: -16px!important;
        top: -12px!important;
    }
    .hs_txt div ,.hs_masterbath .ggskin_text div  {
        font-size: 8px;
    }
    .logo_wrapper {
        top: 7%;
        width: 120px;
    }
    
    .btn_vr > div {
        width: 100px!important;
        height: 22px!important;
        font-size: 8px!important;
    }
	.txt_info {
		font-size: 15px;
	}

}

@media screen and (min-width:1500px) and (max-height:750px) {
    .fl_1 {
        top: 25.9%!important;
    }
    .fl_2 {
        left: 35%!important;
        top: 22.49%!important;
    }
    .fl_3 {
        top: 28.86%!important;
    }
    .fl_4 {
        left: 16.08%!important;
        top: 48.89%!important;
    }
    .fl_5 {
        left: 43%!important;
        top: 17%!important;
    }
    .fl_7 {
        top: 54.29%!important;
    }
    .fl_8 {
        left: 52%!important;
        top: 23%!important;
    }
    .fl_9 {
        top: 40.86%!important;
    }
}

/* ipad potrait*/
@media screen and (max-width:991px) and (min-height:991px)  and (max-height:1200px) {
    .floorplan_container {
        width: 60%!important;
    }
    .floorplan_container > div:nth-child(1) {
        top: 25%!important;
    }

    .floorplan_title > div {
        font-size: 22px;
    }
	.txt_info > div {
		font-size: 16px;
	}
    .fl_1 {
        top: 14.9%!important;
    }
    .fl_2 {
        top: 13.49%!important;
    }
    .fl_3 {
        top: 16.86%!important;
    }
    .fl_4 {
        top: 28.89%!important;
    }
    .fl_5 {
        top: 10%!important;
    }
    .fl_7 {
        top: 31.29%!important;
    }
    .fl_8 {
        top: 14%!important;
    }
}   

@media only screen and (max-height: 700px)  and (max-height: 600px) and (min-width:1300px) {
    .floorplan_container  {
        width: 33%!important;
    }
}

@media screen and (max-width : 1150px) and (min-width : 991px) and (min-height: 600px){
    .floorplan_container {
        width: 57%!important;
    }
} 

@media screen and (max-width : 991px) and (max-height: 550px){
    .ggskin_scrollarea > div:nth-child(2) {
        height: 7px!important;
        bottom: 12px!important;
    }
    .ggskin_scrollarea_hscrollfg {
        height: 7px!important;
    }
    .btn_close {
        bottom: 5px!important;
    }
}


@media only screen and (max-width: 550px) {
    .landing img {
        max-width: 50%;
    }
    .arrow_masterbed, .arrow_masterbed_right {
        top: 53px!important;
    }
    .arrow_kitchen.icon_arrow {
        top: 34px!important;
    }
    .arrow_masterbath.icon_arrow {
        top: 40px!important;
    }
	.floorplan_container {
        width: 100%!important;
    }
    .btn_vr > div {
        width: 100px!important;
        height: 22px!important;
        font-size: 8px!important;
    }

    .btn_vr {
        bottom: 80px!important;
        right: 37px!important;
    }
    
    .vr_text {
        font-family: adobe-garamond-pro, serif;
        color: white;
        font-size: 13px;
        text-transform: uppercase;
    }

    .vr_text_1 {
        font-family: adobe-garamond-pro, serif;
        color: white;
        font-size: 10px;
        text-transform: uppercase;
    }


}


@media only screen and (max-width: 370px) {
	.nav_container {
        left: 16.5px!important;
    }
}

/* potrait */
@media only screen and (max-height: 991px)  and (max-width: 450px) {
    .btn_close > div {
        font-size: 12px!important;
    }
    .floorplan_container > div:nth-child(1) {
        top: 25%!important;
    }
    .fl_1 {
         top: 14.9%!important;
    }
    .fl_2 {
        top: 13.49%!important;
    }
    .fl_3 {
        top: 16.86%!important;
    }
    .fl_4 {
        top: 28.89%!important;
    }
    .fl_5 {
        left: 43%!important;
        top: 10%!important;
    }
    .fl_7 {
        top: 31.29%!important;
    }
    .fl_8 {
        left: 52%!important;
        top: 13%!important;
    }
    .fl_9 {
        top: 22.86%!important;
        left: 11%!important;
    }
}

@media only screen and (max-height: 850px) and (min-height: 810px) and (max-width: 450px) {
    .fl_1 {
         top: 15.9%!important;
    }
    .fl_2 {
        top: 14.49%!important;
    }
    .fl_3 {
        top: 17.86%!important;
    }
    .fl_4 {
        top: 32.89%!important;
    }
    .fl_5 {
        left: 44%!important;
        top: 11%!important;
    }
    .fl_7 {
        top: 36.29%!important
    }
    .fl_8 {
        top: 16%!important;
    }
    .fl_9 {
        top: 25.86%!important;
    }
}

@media only screen and (max-height: 850px) and (min-height: 810px) and (max-width: 400px) {
    .fl_9 {
        top: 22.86%!important;
    }
}

@media only screen and (max-height: 750px)  and (max-width: 420px) {
    .fl_1 {
        top: 18.9%!important;
    }
    .fl_2 {
        top: 15.49%!important;
    }
    .fl_3 {
        top: 18.86%!important;
    }
    .fl_4 {
        top: 30.89%!important
    }
    .fl_5 {
        left: 43%!important;
    }
    .fl_7 {
        top: 34.29%!important;
    }
    .fl_8 {
        top: 16%!important;
    }
    .fl_9 {
        top: 23.86%!important;
        left: 11%!important;
    }
}


@media only screen and (max-height: 700px)  and (max-width: 380px) {
    .fl_1 {
        top: 18.9%!important;
    }
    .fl_2 {
        top: 15.49%!important;
    }
    .fl_3 {
        top: 20.86%!important;
    }
    .fl_4 {
        top: 34.89%!important
    }
    .fl_5 {
        left: 43%!important;
        top: 12%!important;
    }
    .fl_7 {
        top: 39.29%!important;
    }
    .fl_8 {
        top: 16%!important;
    }
    .fl_9 {
        top: 26.86%!important;
    }
}

/* iphone 7 plus */
@media only screen and (max-height: 740px)  and (min-height: 710px) and (min-width:410px)  and (max-width:420px) {
    .fl_1 {
        top: 18.9%!important;
    }
    .fl_2 {
        top: 15.49%!important;
    }
    .fl_3 {
        top: 20.86%!important;
    }
    .fl_4 {
        top: 34.89%!important
    }
    .fl_5 {
        left: 43%!important;
        top: 12%!important;
    }
    .fl_7 {
        top: 39.29%!important;
    }
    .fl_8 {
        top: 16%!important;
    }
    .fl_9 {
        top: 27.86%!important
    }
}


/* landscape */
@media only screen and (min-width: 850px) and (max-width: 900px) and (min-height: 400px) and (max-height: 450px) {
    .fl_2 {
        top: 23.49%!important;
    }
    .fl_4 {
        top: 51.89%!important;
    }
    .fl_7 {
        top: 57.29%!important;
    }
    .fl_8 {
        top: 23%!important;
    }
    .fl_9 {
        top: 41.86%!important;
    }
}

@media only screen and (max-height: 420px)  and (min-width:800px)  and (max-width:850px) {
    .fl_4 {
        top: 47.89%!important;
    }
    .fl_7 {
        top: 53.29%!important;
    }
}

@media only screen and (max-height: 420px)  and (min-height: 410px) and (min-width:710px)  and (max-width:740px) {
    .fl_1 {
        top: 18.9%!important;
    }
    .fl_2 {
        top: 18.49%!important;
    }
    .fl_3 {
        top: 23.86%!important
    }
    .fl_4 {
        top: 41.89%!important
    }
    .fl_5 {
        left: 43%!important;
        top: 12%!important;
    }
    .fl_7 {
        top: 46.29%!important
    }
    .fl_8 {
        top: 18%!important;
    }
    .fl_9 {
        top: 32.86%!important
    }
}

@media only screen and (max-height: 400px)  and (min-width:600px)  and (max-width:700px) {
    .fl_9 {
        top: 32.86%!important;
    }
}


@media only screen and (max-width: 900px)  and (max-height: 500px) {
    .floorplan_title {
        top: 4%!important;
    }
    .floorplan_title > div:nth-child(1) {
        font-size: 15px!important;
    }
    .txt_room {
        top: 18px!important;
    }
    .txt_room div {
        font-size: 10px!important;
    }
    .txt_sq {
        top: 0px!important;
    }
    .txt_sq > div {
        font-size: 8px!important;
    }
    .floorplan_container > div:nth-child(1) {
        top: 53px!important;
    }
    .txt_mirror {
        font-size: 6px;
    }
}


@supports (-webkit-overflow-scrolling: touch) {
    /* ios detect */
    @media (max-width : 550px) and (orientation : portrait){
        .vr_initial.orientation {
            display: block;
            opacity: 1;
            background-color: rgb(167, 169, 172,1);
        }
        .vr_initial.active {
            opacity: 1;
        }
    }

    @media (max-width :  991px) and (max-height : 450px){
        /* .nav_container {
            bottom: 65px!important;
        }

        .btn_vr {
            bottom: 65px!important;
        } */
        
    }



}