/*#home-3d-room{}*/
.uk-lightbox {
    background: #000000d9;
    }
.unplay * ,.vb-rc .auto-active.unplay h4{
    color: #B2B2B2 !important;
}
.content-bar{position: absolute; bottom: 23%; left: 50%; transform: translateX(-50%);background: #ffffffe6; border-radius: 15px; padding: 15px;max-width: 1540px;}
.auto-active.unplay .progress-bar-loading,.unplay .progress-bar{background:  #B2B2B2 !important;}
.unplay.tooltips:before, .unplay.tooltips:hover:before{-webkit-filter: brightness(1) grayscale(1);filter: brightness(1) grayscale(1);  cursor: auto;}
a.auto-active.unplay.tooltips:before{ -webkit-animation: none; animation: none;-webkit-filter: grayscale(1);filter: grayscale(1);}

section h4 {
    font-size: 24px;
    margin-bottom: 0;
}
.room-cta  {font-size: 16px; font-weight: 600;}

.tooltip-contents {
    opacity: 0;
    pointer-events: none;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.tooltips.auto-active .tooltip-contents {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.uk-border-rounded { border-radius: 15px;}
.btn-white{font-weight: 700;color: #1F1F1F;    padding: 12px 24px;}
.btn-white:hover {
    background-color: #5447F5;
    border-color: #5447F5;
    color: #FFF;
}
.kv a:hover{color: #000;}
p{ font-size: 14px;}

.btn-main-cta{
    background-color: #5447F5; color: #FFF; font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 0;
    padding: 0.5em 2em;
    text-transform: uppercase;
    transition: border 0.5s, color 0.5s, background 0.5s;
    -webkit-transition: border 0.5s, color 0.5s, background 0.5s;
    min-width: 180px;
    padding: 12px 24px;
}

/*
a:active .btn-white ,a:active .btn-main-cta{
    background-color: #2C9799;
    color: #FFF;
    border: 1px solid;
}
*/
.slider-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(15px);
    background-color: #ffffffcf;
    border: none;
}
.btn-main-cta:hover { background-color: #6D6DF3;color: #FFF;}
.kv p {color: #FFF}
.tooltips {
    display: inline;
    position: relative;
    z-index: 90;
}

.tooltip-contents {
    position: absolute;
    background-size: 100% 100%;
    z-index: 999;
    width: 160px;
    top: -140px;
    margin-left: 60px;
    padding: 20px 20px;
    text-align: center;
    color: #1F1F1F;
    font-weight: normal;
    opacity: 1;
    cursor: default;
    font-size: .9em;
    pointer-events: none;
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 1);
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    -webkit-transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: ease, cubic-bezier(0.6, 0, 0.4, 1);
    background: #FFF;
    border-radius: 10px;
    width: 240px;
}

.tooltip-contents p {
    color: #1F1F1F;
}

.tooltips:hover .tooltip-contents,
.tooltips.active .tooltip-contents {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}


#home-3d-room h1 {
    font-size: 52px;
    color: #FFF;
}


.progress-bar {
    height: 4px;
    width: 100%;
    background-color: #000;
    margin-bottom: 14px;

}

.progress-bar-loading {
    height: 4px;
    width: 0%;
    background-color: aqua;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    top: 14px;


}

.auto-active .progress-bar-loading {
    height: 4px;
    width: 100%;
    background-color: #5447F5;
    position: relative;
    z-index: 1;
    top: 14px;

}

.auto-active  .progress-bar {
    height: 4px;
    width: 100%;
    background-color: #000;
    margin-bottom: 14px;

}


.vb-rc a {
    color: #5447F5;
    font-size: 16px;
}

.vb-rc a:hover {
    -webkit-filter: none;
    filter: none;
}

.vb-rc p {
    color: #000;
    font-size: 16px;
}

.vb-rc .active a {
    filter: none;
    -webkit-filter: none;
}

.vb-rc .active a p {
    color: #FFF !important;
}

.vb-rc .active a * {
    color: aqua !important;
}

.vb-rc .active a .progress-bar {
    background-color: aqua;
}
h4, h5 {
    color: #000;
}

.vb-rc .auto-active,
.vb-rc .auto-active h4 {
    color: #000 ;
}
.vb-rc .room-cta {color: #000;}
.vb-rc .auto-active .room-cta {color: #5447F5;}

.vb-rc .auto-active h4 {
    color: #5447F5 !important;
}

.vb-rc:hover .auto-active h4 {
    color: #000;
}
.pulsar a span {
    position: absolute;
    /* background-color: #fff0;
    height: 3em;
    width: 3em;
    border-radius: 100%;*/
    cursor: pointer;
}

.pulsar a:nth-child(1) {
    position: absolute;
    display: block;
    top: 26%;
    left: 68%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #00c3e6;
    width: 0;
    height: 0;
    border-radius: 100%;
   z-index: 99;
    
}

.pulsar a:nth-child(2) {
    position: absolute;
    display: block;
    top: 15.5%;
    left: 49%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #00c3e6;
    width: 0;
    height: 0;
    border-radius: 100%;
}


.pulsar a:nth-child(3) {
    position: absolute;
    display: block;
    top: 48%;
    left: 48%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #00c3e6;
    width: 0;
    height: 0;
    border-radius: 100%;
}

.pulsar a:nth-child(4) {
    position: absolute;
    display: block;
    top: 42%;
    left: 80%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #00c3e6;
    width: 0;
    height: 0;
    border-radius: 100%;
}

.tooltips:before {
    content: "";
    color: #5447F5;
    position: absolute;
    left: -3px;
    top: -5px;
    background: url(/vsAssetFile/global/img/education/3d/map-icon.svg);
    background-size: contain;
    width: 40px;
    height: 48px;
    background-repeat: no-repeat;
    -webkit-filter: brightness(10);
    filter: brightness(10);
}

a.auto-active.tooltips:before {
    content: "";
    color: #5447F5;
    position: absolute;
    left: -3px;
    top: -5px;
    background: url(/vsAssetFile/global/img/education/3d/map-icon.svg);
    background-size: contain;
    width: 40px;
    height: 48px;
    background-repeat: no-repeat;
    -webkit-filter: brightness(1);
    filter: brightness(1);

}

a.auto-active.tooltips:before {
    -webkit-animation-name: updown;
    animation-name: updown;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.more-room::before {
    content: "";
    background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), color-stop(60%, #00000000), to(#ffffff00));
    background: linear-gradient(0deg, #ffffff 0%, #00000000 60%, #ffffff00 100%);
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
}

@keyframes updown {
 0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.pulsar a::after {
    display: none;
}

@media (min-width: 2500px){
    #home-3d-room .lg-content{ max-width: 2000px;}
    #home-3d-room h1 { font-size: 90px; color: #FFF; }
    #home-3d-room .home-title p {font-size: 28px;}
    .vb-rc p {
    font-size: 18px;
    }
    .col-xxxl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 50%;
}

}

@media(max-width: 1600px) {
.content-bar{max-width: 95.5%;}
}

@media(max-width: 1440px) {
    #home-3d-room h1 {
        font-size: 38px;
        color: #FFF;
    }
}
@media(max-width: 1366px) {
.vb-rc p {
    color: #000;
    font-size: 14px;
}
section h4 {
    font-size: 18px;
}
}
@media(max-width: 1280px) {
    .pulsar {
        display: none;
    }
    section h2 {
        font-size: 2rem;}
}

@media(max-width: 1080px) {
    .vb-rc {
        display: none;
    }
}

@media(max-width: 767px) {

    .media-content-block {
    text-align: left;
}
.edu-icon img {
    max-width: 120px;
    margin: auto;
    padding: 0 20px;
}
    .tooltips {
        display: none;
    }
    .btn-main-cta,.btn-white { width: 100%}
}