#main_vid {
    width: 100%;
    height: 100%;
}

.no-margin {
    margin: 0px !important;
}

.no-max-width {
    max-width: none !important;
}

.btn-play {
    width: 70px;
    height: 70px;
    opacity: 0.4;
    transition-property: opacity;
    transition-duration: 0.4s;
    cursor: pointer;
}

.btn-play:hover {
    opacity: 1;
}

#modalYT > div {
    height: 100vh !important;
}

#modalYT .modal-content {
    height: 100vh !important;
    padding: 0;
}

#modalYT .modal-body {
    padding: 0;
}

.dialog-close {
    right: 0;
    top: -20px;
    z-index: 200;
}

.dialog-close {
    background-image: url(/image/playroom2/close-btn.png);
    width: 62px;
    height: 62px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 15px;
    top: 45px;
    z-index: 200;
    cursor: pointer;
}
.btnHome{
    display:none;
}
.btnHome.active{
    display: block;
}

a-scene{
    z-index:999;
}
.settings-wrapper {
    height: 100vh;
    width:100%;
    min-height: unset;
    position: absolute;
    top:0;
    opacity:0;
    visibility: hidden;
    transition: all .1s ease;
}

.settings-wrapper.link-start{
    opacity: 1;
    visibility: visible;
}
.left-top-container{
    position: absolute;
    top:20px;
    left:30px;
    z-index: 1001;
}
.right-top-container{
    position: absolute;
    top:20px;
    right:30px;
    display:flex;
    flex-direction: column;
    z-index: 1001;
}
#landscape_please{
    display:none;
}
.dropdown-menu{
    background:transparent;
    border:none;
    border-left:2px solid grey;
    margin-top:20px;
    padding:0;
    border-radius:0px;
}
.station-item{
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    background:rgba(250,250,250,.4);
    text-decoration: none;
    width:370px;
    height:40px;
    display:flex;
    align-items: center;
    margin-bottom:10px;
}
.station-item.active,.station-item:hover{
    background:var(--gold-gradient);
}
.station-item .station-text{
    font-size: 18px;
    font-family: 'Poppins Bold';
    color:rgba(250,250,250,.4);
    text-transform: capitalize;
    margin-left:20px;
}
.station-item:last-child{
    margin:0;
}
.station-item.active .station-text,
.station-item:hover .station-text{
    color:black;
}
.right-icon{
    margin-bottom:10px;
    width:50px;
}

#station-nav{
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    display:none;
    z-index:1001;
}
.station-nav-wrap{
    background-image:url('../../image/playroom2/bottom-nav-bg.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:170px;
    width:550px;
    position: relative;
}
.station-ball-wrap{
    position: absolute;
    bottom:10px;
    left:50%;
    transform: translateX(-50%);
    display:flex;
    align-items: center;
}
.station-ball{
    position: relative;
    width:50px;
    height:50px;
    border-radius: 50%;
    margin:0 10px;
    opacity: .4;
    transition:all .75s ease;
    z-index:10;
}
.station-ball.active,.station-ball:hover{
    opacity: 1;
}
.station-ball#station1{
    left:30px;
}
.station-ball#station2{
    top:-35px;
    left:12px;
}
.station-ball#station3{
    top:-60px;
    left:5px;
}
.station-ball#station4{
    top:-70px;
}
.station-ball#station5{
    top:-60px;
    right:7px;
}
.station-ball#station6{
    top:-35px;
    right:15px;
}
.station-ball#station7{
    right:30px;
    transform:scale(0.9);
}
.station-shine-wrap{
    position: absolute;
    bottom:20px;
    left:50%;
    width:100%;
    transform: translateX(-50%);
    pointer-events: none;
}
.nav-station{
    position: absolute;
    height: 60px;
    width: 70px;
    opacity:0;
    transition: all .75s ease;
}
.nav-station.active,.station-ball:hover + .nav-station{
    opacity: 1;
}
#nav1{
    bottom: -24px;
    left: 30%;
}
#nav2{
    bottom: -13px;
    left: 31%;
}
#nav3{
    bottom: 2px;
    height: 65px;
    left: 36%;
}
#nav4{
    bottom: 4px;
    height: 54px;
    left: 43%;
}
#nav5{
    bottom: 3px;
    left: 49%;
    height: 50px;
}
#nav6{
    bottom: -6px;
    left: 52%;
    height: 40px;
}
#nav7{
    bottom: -15px;
    left: 55%;
    height: 40px;
}
.station-ball.smaller{
    width:15px;
    height:15px;
    margin:0 auto;
    background:white;
    position: relative;
    bottom:-15px;
    right:3px;
}
#station-nav.active{
    display:block;
}
.btnHome{
    margin-bottom:10px;
}
.mobile-nav-line{
    background-image: url('../../image/playroom2/mobile-nav-line.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width:100%;
    height:4px;
    position: absolute;
    top:3px;
}
/* mobile */
/* @media(max-width:840px){ */
@media(max-width:920px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){
    .station-ball:hover{
        opacity: 0.4;
    }
    .station-ball.active{
        opacity: 1;
    }
    .settings-wrapper {
        height:85vh;
    }
    .left-top-container{
        transform:scale(0.6);
        top:0;
    }
    body.isFullScreen #station-nav{
        bottom:-40px;
    }
    .station-item .station-text {
        font-size:11px;
    }
    .station-item{
        width:230px;
        height:25px;
        margin-bottom:5px;
    }
    .right-top-container{
        transform: scale(0.6);
        top: -14px;
        right: 10px;
    }
    .dropdown-menu{
        margin-top:10px;
        top:auto!important;
        transform: none!important;
    }
    body.isFullScreen .dropdown-menu{
        top:0!important;
    }
    #station-nav{
        bottom:0;
    }
    .station-nav-wrap{
        background:rgba(0,0,0,.8);
        width:400px;
        height:60px;
        border-radius:30px;
    }
    .station-ball{
        width:35px;
        height:35px;
    }
    .station-ball img{
        width:35px;
        height:35px;
    }
    .station-ball#station1, .station-ball#station2,.station-ball#station3,.station-ball#station4,.station-ball#station5,.station-ball#station6{
        top:0;
        left:0;
    }
    .station-ball#station7{
        right:0;
        transform:scale(1);
    }
    .left-top-container{
        left:10px;
    }
    #fullscreen_img{
        display:none;
    }
}
/* laptop */
@media (min-height:600px) and (max-height:960px){
    #station-nav{
        transform: scale(0.65) translateX(-75%);
        bottom: -30px;
    }
    .station-item .station-text{
        font-size:16px;
    }
    .station-item{
        width:325px;
        height:30px;
    }
    .left-top-container, .right-top-container{
        transform: scale(0.7);
    }
    .right-top-container{
        top:0;
    }
    .dropdown-menu{
        margin-top:40px;
    }
    .right-icon{
        margin-bottom:10.5px;
    }
}