@font-face {
    font-family: 'Kara400';
    src: url('../font/KarasumaGothic-Regular.otf');
}

body {
    position: relative;
    overflow-x: hidden;
    font-family: 'Kara400';
    overflow-x: hidden!important;
}

@media screen and (min-width:431px) and (max-width:575px) {
    body {
        width: 100%;
        max-width: 450px;
        margin: auto;
    }
}

#wrapper img.bar-left {
    width: 100%;
    max-width: 550px;
    height: auto;
    opacity: 0.5;
}

#wrapper img.bar-right {
    width: 100%;
    max-width: 550px;
    height: auto;
    opacity: 0.5;
    position: relative;
    top: -400px;
    right: -900px;
}

@media screen and (max-width:575px) {
    #wrapper {
        flex-direction: column;
    }
    #wrapper img.bar-right {
        top: 0;
        right: 0;
    }
}

@media screen and (min-width:576px) and (max-width:768px) {
    #wrapper img.bar-right {
        top: 0;
        right: -225px;
    }
}

@media screen and (min-width:769px) and (max-width:912px) {
    #wrapper img.bar-right {
        top: 0;
        right: -265px;
    }
}

@media screen and (min-width:913px) and (max-width:1024px) {
    #wrapper img.bar-right {
        right: -500px;
    }
}

@media screen and (min-width:1561px) {
    #wrapper {
        width: 100%;
        max-width: 1440px;
        margin: auto;
    }
}

#sidebar {
    background-color: #af8a4e;
    width: 70px;
    position: fixed;
    height: 100%;
    z-index: 1;
}

#sidebar .navbar-brand {
    display: none;
}

#sidebar .navbar-collapse {
    align-items: flex-start;
}

#sidebar img.no-hover {
    display: block;
    width: 100%;
    max-width: 35px;
    height: 35px;
    margin: 0 10px;
    object-fit: contain;
}

#sidebar img.hover {
    display: block;
    width: 100%;
    max-width: 35px;
    height: 35px;
    margin: 0 10px 0 0;
    object-fit: contain;
}

#sidebar .side {
    position: relative;
    display: inline-block;
    margin: 10px 0;
}

#sidebar .side-mobile {
    display: none;
}

#sidebar .side-drop {
    border: none;
    background: none;
}

#sidebar .side-drop-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

#sidebar .side-drop-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: .7s;
}

#sidebar .side-drop-content a:hover {
    background-color: #162c52;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#sidebar .side:hover .side-drop-content {
    display: block;
    position: absolute;
    top: -10px;
    width: 200px;
}


/* #sidebar .side:hover .side-drop {
    background-color: #3e8e41;
} */

@media screen and (max-width:575px) {
    #sidebar {
        padding: 0 15px;
        width: 100%;
        height: auto;
        position: sticky;
        top: 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    }
    #sidebar .side {
        margin: 0;
    }
    #sidebar .navbar-brand {
        display: block;
        color: #fff;
    }
    #sidebar .navbar-collapse {
        border-radius: 5px;
    }
    #sidebar .navbar-toggler {
        background-color: #efefef;
    }
    #sidebar img.no-hover,
    .side-drop-content a:hover,
    .side:hover .side-drop-content {
        display: none;
    }
    #sidebar img.hover {
        margin: 0;
        padding: 5px;
    }
    #sidebar .side-mobile {
        display: flex;
        border-bottom: 1px solid #fff;
        align-items: center;
        padding: 0 0 10px 0;
    }
    #sidebar .side-mobile a {
        text-decoration: none;
        color: #fff;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #sidebar .side {
        margin: 20px 0;
    }
}

#beranda {
    margin-left: 120px;
    color: #162c52;
}

#beranda img.logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 74px;
    margin: 20px auto 20px 0;
}

#beranda img.img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin-left: auto;
    object-fit: cover;
}

#beranda img.img-2 {
    display: block;
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 20px auto;
    object-fit: cover;
    position: relative;
    top: -150px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
}

#beranda h2 {
    font-size: 18px;
    font-weight: 900;
}

#beranda p {
    font-size: 16px;
    text-align: justify;
}

#beranda a {
    color: #fff;
    text-decoration: none;
}

#beranda .bg-link {
    background-color: #162c52;
    font-weight: 700;
    text-align: center;
    width: 100%;
    max-width: 265px;
    padding: 10px;
    transition: .3s;
}

#beranda .bg-link:hover {
    background-color: #fff;
    color: #162c52;
    border: 1px solid #162c52;
}

@media screen and (max-width:575px) {
    #beranda {
        margin-left: 0;
        padding: 0 15px;
    }
    #beranda img.logo {
        margin: 20px auto;
    }
    #beranda img.img {
        margin: 20px 0 0 auto;
    }
    #beranda img.img-2 {
        top: 0;
    }
    #beranda h2,
    #beranda p {
        text-align: center;
    }
    #beranda .bg-link {
        margin: 20px auto;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #beranda {
        margin-left: 85px;
        padding: 0 30px;
    }
    #beranda img.logo {
        margin: 20px auto;
    }
    #beranda img.img {
        margin: 20px auto;
    }
    #beranda img.img-2 {
        top: 0;
    }
    #beranda h2,
    #beranda p {
        text-align: center;
    }
    #beranda .bg-link {
        margin: 20px auto;
    }
}

#tipe-unit {
    color: #162c52;
    margin-left: 120px;
    margin-top: -100px;
}

#tipe-unit img.img {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    /* margin: 0 auto; */
}

#tipe-unit h2 {
    font-size: 18px;
    font-weight: 900;
    margin-left: 25px;
}

#tipe-unit p {
    font-size: 16px;
    margin-left: 50px;
    padding-right: 15px;
    text-align: justify;
}

#tipe-unit .right {
    width: 100%;
    max-width: 500px;
    margin-right: auto;
}

@media screen and (max-width:575px) {
    #tipe-unit {
        margin: 20px 0
    }
    #tipe-unit img.img {
        margin: 0 auto;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #tipe-unit {
        margin-left: 85px;
        margin-top: 0;
    }
    #tipe-unit img.img {
        margin: 0 auto;
    }
}

#kamar {
    margin-left: 120px
}


/* #main1 {
    background-image: url(../images/kamar/img.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-size: contain;
    display: block;
    width: 100%;
    max-width: 300px;
    height: 400px;
    margin: 20px auto;
    object-fit: cover;
    position: relative;
    top: -500px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
}

#placeholdersoyoucanscroll {
    height: 100vh
} */

#kamar img.img {
    display: block;
    width: 100%;
    max-width: 800px;
    height: 600px;
    margin-left: 50px;
    object-fit: cover;
}

#kamar img.img-2 {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 20px auto;
    object-fit: cover;
    position: relative;
    top: -500px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
    animation: img .8s ease-in-out infinite alternate;
}

#kamar h2 {
    font-size: 18px;
    font-weight: 900;
}

#kamar p {
    font-size: 16px;
}

@media screen and (max-width:575px) {
    #kamar {
        margin-left: 0
    }
    #kamar img.img {
        margin: auto;
    }
    #kamar img.img-2 {
        top: 0;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #kamar {
        margin-left: 85px
    }
    #kamar img.img {
        margin: auto;
    }
    #kamar img.img-2 {
        top: 0;
    }
}

@keyframes img {
    0% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(1px);
    }
}

#studio {
    margin-left: 120px;
    margin-top: -400px;
}

#studio img.img {
    display: block;
    width: 100%;
    max-width: 600px;
    height: 600px;
    margin-left: -75px;
    object-fit: cover;
}

#studio img.img-2 {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 20px auto;
    object-fit: cover;
    position: relative;
    top: -500px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
    animation: img .8s ease-in-out infinite alternate;
}

#studio h2 {
    font-size: 18px;
    font-weight: 900;
}

#studio p {
    font-size: 16px;
}

@media screen and (max-width:575px) {
    #studio {
        margin-left: 0;
        margin-top: 20px;
        padding: 0 15px;
    }
    #studio img.img {
        margin: auto;
    }
    #studio img.img-2 {
        top: 0;
    }
}

@media screen and (min-width:769px) and (max-width:912px) {
    #studio {
        margin-left: 85px;
        margin-top: 20px;
    }
    #studio img.img {
        margin: 20px auto;
    }
    #studio img.img-2 {
        top: 0;
    }
}

#fasilitas {
    margin-top: -350px;
}

#fasilitas a {
    color: #fff;
}

#fasilitas .left {
    background-color: #162c52;
    padding: 50px 15px 15px 15px;
    color: #fff;
    width: 800px;
    height: 450px;
}

#fasilitas h2 {
    font-weight: 900;
    font-size: 18px;
    margin: 10px 0;
}

#fasilitas img.icon {
    display: block;
    height: 35px;
    width: auto;
    margin: auto;
}

#fasilitas span {
    display: block;
    margin: 10px 0;
    text-align: center;
}

#fasilitas img.hotel {
    display: block;
    width: 100%;
    max-width: 350px;
    height: 450px;
}

@media screen and (max-width:575px) {
    #fasilitas {
        margin-top: 0;
        margin-left: 0;
    }
    #fasilitas .left {
        width: 100%;
        max-width: 550px;
        margin: 20px auto;
        height: auto;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #fasilitas {
        margin-top: 20px;
        margin-left: 85px;
    }
    #fasilitas .left {
        width: 100%;
        max-width: 550px;
        margin: auto;
        height: auto;
    }
    #fasilitas img.hotel {
        margin: 20px auto;
    }
}

@media screen and (min-width:913px) and (max-width:1024px) {
    #fasilitas .left {
        width: 100%;
        max-width: 550px;
        margin-left: auto;
    }
}

#lokasi {
    margin: 30px 0;
}

#lokasi img.map {
    display: block;
    width: 100%;
    max-width: 850px;
    height: auto;
    margin: 30px auto;
    position: relative;
    left: 100px;
}

#lokasi h2 {
    font-weight: 900;
    font-size: 18px;
    margin-left: 25px;
}

#lokasi .head-body {
    position: relative;
    left: -50px;
}

#lokasi img.icon-body {
    display: block;
    margin-right: 25px;
    height: 30px;
    width: auto;
}

#lokasi .right {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
}

#lokasi a {
    color: #162c52;
    text-decoration: none;
}

#lokasi p.maps {
    background-color: #162c52;
    text-align: center;
    padding: 5px 0;
    color: #fff;
}

#lokasi p.maps:hover {
    background-color: #162c52;
    text-align: center;
    padding: 5px 0;
    font-weight: 900;
    transition: .7s;
}

#lokasi .bg-link {
    background-color: #fff;
    font-weight: 700;
    text-align: center;
    width: 100%;
    max-width: 300px;
    padding: 10px;
    transition: .7s;
    border: 2px solid #162c52;
}

#lokasi .bg-link:hover {
    background-color: #162c52;
    color: #fff;
}

@media screen and (max-width:575px) {
    #lokasi {
        margin-left: 0;
    }
    #lokasi .right {
        margin-left: 0;
    }
    #lokasi img.map {
        left: 0;
    }
    #lokasi .bg-link {
        margin: 0 auto;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #lokasi {
        margin-left: 85px;
    }
    #lokasi .right {
        margin-left: 15px;
    }
    #lokasi img.map {
        left: 0;
    }
}

@media screen and (min-width:913px) and (max-width:1024px) {
    #lokasi {
        margin-left: 85px;
    }
    #lokasi img.map {
        left: 0;
    }
}

#kenapa-nexcity {
    margin-left: 120px;
    color: #162c52;
}

#kenapa-nexcity .bg-content {
    position: relative;
    left: 29px;
}

#kenapa-nexcity img.icon {
    display: block;
    width: 100%;
    max-width: 25px;
    height: auto;
    margin: 0 20px 0 0;
}

#kenapa-nexcity img.body-icon {
    display: block;
    height: 35px;
    width: auto;
    margin: 20px auto;
}

#kenapa-nexcity img.img {
    display: block;
    width: 100%;
    max-width: 650px;
    height: auto;
    margin-left: auto;
    object-fit: cover;
}

#kenapa-nexcity img.img-2 {
    display: block;
    width: 100%;
    max-width: 350px;
    height: 350px;
    margin: 20px auto;
    object-fit: cover;
    position: relative;
    top: -150px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
}

#kenapa-nexcity h2 {
    font-size: 18px;
    font-weight: 900;
}

#kenapa-nexcity p {
    font-size: 16px;
    text-align: justify;
    margin-left: 45px;
}

#kenapa-nexcity a {
    color: #fff;
    text-decoration: none;
}

#kenapa-nexcity .bg-link {
    background-color: #162c52;
    font-weight: 700;
    text-align: center;
    width: 100%;
    max-width: 265px;
    padding: 10px;
    transition: .7s;
}

#kenapa-nexcity .bg-link:hover {
    background-color: #fff;
    color: #162c52;
}

#kenapa-nexcity span {
    display: block;
    text-align: center;
    font-weight: 700;
    height: 100px;
}

@media screen and (max-width:575px) {
    #kenapa-nexcity {
        margin-left: 0;
        padding: 0 15px;
    }
    #kenapa-nexcity img.img {
        margin: 20px 0 0 auto;
    }
    #kenapa-nexcity img.img-2 {
        top: 0;
    }
    #kenapa-nexcity .bg-content {
        left: 0;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #kenapa-nexcity {
        margin-left: 85px;
    }
    #kenapa-nexcity img.img {
        max-width: 550px;
        margin: auto
    }
    #kenapa-nexcity .bg-content {
        left: 0;
    }
}

@media screen and (max-width:1024px) {
    #kenapa-nexcity .bg-content {
        left: 0;
    }
}

#hubungi {
    margin: 30px 0;
}

#hubungi img.img {
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: auto;
}

#hubungi img.img-2 {
    display: block;
    width: 100%;
    max-width: 34px;
    height: auto;
    margin-right: 20px;
}

#hubungi h2 {
    font-size: 18px;
    font-weight: 900;
}

#hubungi .bg {
    background-color: #162c52;
    color: #fff;
    padding: 15px;
    margin-top: 20px;
}

#hubungi button {
    background-color: #af8a4e;
    color: #fff;
}

#hubungi iframe {
    width: 100%;
    max-width: 600px;
    margin: auto;
}

@media screen and (max-width:575px) {
    #hubungi {
        margin-left: 0;
    }
}

@media screen and (min-width:576px) and (max-width:912px) {
    #hubungi {
        margin-left: 85px;
    }
}

@media screen and (min-width:913px) and (max-width:1024px) {
    #hubungi {
        margin-left: 0;
    }
}

footer .bg {
    background: url('../images/footer/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    min-height: 50vh;
    display: flex;
    align-items: center;
}

footer .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1024px;
    margin: auto;
}

footer img.logo {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 20px auto;
}

footer h2 {
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

footer p {
    margin: 0;
    text-align: center;
}

footer .member {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 20px 0 20px auto;
    filter: brightness(100);
}

footer .bullet {
    width: 45px;
    height: 45px;
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 8px;
    margin: 0 8px;
}

footer .bg-part {
    width: 100%;
    max-width: 970px;
    margin: auto;
}


/* @media screen and (max-width:820px) {
    footer .content {
        display: block;
        padding: 50px 0;
        width: 100%;
        max-width: 5000px;
        margin: 0 auto;
    }
}*/

@media screen and (max-width:767px) {
    footer .bg {
        padding: 50px 0;
    }
    footer .content {
        display: block;
    }
    footer .member {
        margin: 20px auto;
    }
    footer .bg {
        background: url('../images/footer/bg-mobile.png');
    }
}

@media screen and (min-width:768px) and (max-width:912px) {
    footer .bg {
        padding: 50px 0;
        position: relative;
        left: 12px;
    }
    footer .content {
        display: block;
    }
    footer .member {
        margin: 20px auto;
    }
}

@media screen and (min-width:913px) and (max-width:1024px) {
    footer .content {
        display: block;
        padding: 50px 0;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }
    footer .member {
        margin: 20px auto;
    }
}

#wa .fly-wa-bottom {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 8
}

#wa .fly-wa-bottom img {
    height: 70px;
    width: auto
}

@media screen and (max-width:575px) {
    /* #wa .fly-wa-bottom {
        bottom: 0;
    } */
    #wa .fly-wa-bottom img {
        height: 55px;
        width: auto
    }
}