.dialog-content .content-story {
font-family:'montserrat';
}

.dialog-content .galleries-sec p {
font-family:'montserrat';
}/* =========================================================
   NURUL & ANGGA
   KERATON KASEPUHAN CIREBON
   FULL CUSTOM CSS
   ========================================================= */


/* =========================================================
   COLOR
   ========================================================= */

:root {
    --green-dark: #263b24;
    --green: #526b3b;
    --green-light: #789257;

    --brown-dark: #3b281b;
    --brown: #65452d;
    --brown-light: #a47b50;

    --cream: #f7ecd4;
    --cream-dark: #e4cfaa;

    --gold: #b79552;
    --gold-light: #d8bf82;

    --white: #fffaf0;
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

    background: var(--green-dark) !important;
}

body {
    color: var(--brown-dark) !important;
}


/* =========================================================
   MAIN GAME
   ========================================================= */

.cover.isometric-village,
.iso-game,
.game-iso {
    background:
        #263b24 !important;

    overflow: hidden !important;
}


/* =========================================================
   MAP
   ========================================================= */

.iso-viewport {
    background:
        linear-gradient(
            180deg,
            rgba(236,218,178,.08),
            rgba(38,59,36,.25)
        ) !important;

    overflow: hidden !important;
}

.iso-map {
    filter:
        saturate(.82)
        contrast(1.04)
        brightness(.96) !important;

    image-rendering: auto !important;
}


/* =========================================================
   CINEMATIC VIGNETTE
   ========================================================= */

.iso-game::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 8000;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(24,18,10,.28) 100%
        );

    box-shadow:
        inset 0 0 100px rgba(24,18,10,.32);
}


/* =========================================================
   TOP NAME PANEL
   ========================================================= */

.iso-hud-top {
    position: fixed !important;

    top: 20px !important;
    left: 50% !important;

    transform: translateX(-50%);

    z-index: 9000;

    width: auto !important;
    min-width: 260px;

    padding: 11px 25px 12px !important;

    text-align: center;

    background:
        rgba(247,236,212,.94) !important;

    border:
        2px solid var(--brown) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 5px 0 rgba(59,40,27,.35),
        0 12px 30px rgba(0,0,0,.20) !important;

    backdrop-filter:
        blur(5px);
}


/* NURUL ANGGA */

.iso-hud-top__names {
    margin: 0 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 25px !important;

    font-weight: 500 !important;

    line-height: 1.1 !important;

    letter-spacing: 2px;

    color:
        var(--brown-dark) !important;
}


/* & */

.iso-hud-top__names span {
    color:
        var(--gold) !important;

    padding:
        0 4px;
}


/* subtitle */

.iso-hud-top__hint {
    margin:
        5px 0 0 !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        8px !important;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    color:
        #806b4d !important;
}


/* =========================================================
   LOCATION LABEL
   ========================================================= */

.iso-bubble {
    position: relative;

    padding:
        7px 13px !important;

    min-width:
        80px;

    background:
        linear-gradient(
            180deg,
            #fff7e4 0%,
            #e5cca0 100%
        ) !important;

    color:
        #4a321f !important;

    border:
        2px solid #704b2d !important;

    border-radius:
        8px !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .3px;

    text-align:
        center;

    box-shadow:
        0 4px 0 rgba(59,40,27,.35),
        0 8px 15px rgba(0,0,0,.20) !important;

    transition:
        all .25s ease !important;
}


/* active */

.iso-bubble.is-near {
    background:
        linear-gradient(
            180deg,
            #819b5e 0%,
            #4e6c39 100%
        ) !important;

    color:
        #fff8e5 !important;

    border-color:
        #304426 !important;

    box-shadow:
        0 4px 0 #263b24,
        0 8px 18px rgba(0,0,0,.28) !important;

    animation:
        bubbleFloat 2.8s ease-in-out infinite;
}


@keyframes bubbleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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


/* =========================================================
   CHANGE LABEL TEXT
   ========================================================= */


/* Profil & Cerita */

.iso-labels .iso-bubble:nth-child(3) {
    font-size: 0 !important;
}

.iso-labels .iso-bubble:nth-child(3)::after {
    content: "Galeri Foto";

    font-size: 10px;
}


/* Kirim Ucapan */

.iso-labels .iso-bubble:nth-child(5) {
    font-size: 0 !important;
}

.iso-labels .iso-bubble:nth-child(5)::after {
    content: "Ucapan & Doa";

    font-size: 10px;
}


/* =========================================================
   OBJECTS
   ========================================================= */

.iso-obj img {
    filter:
        drop-shadow(
            0 6px 5px rgba(0,0,0,.20)
        );

    transition:
        transform .3s ease,
        filter .3s ease;
}


/* =========================================================
   CHARACTER
   ========================================================= */

.iso-char {
    filter:
        drop-shadow(
            0 8px 5px rgba(0,0,0,.30)
        );
}

.iso-char__shadow {
    background:
        rgba(36,25,16,.35) !important;

    filter:
        blur(4px);
}


/* =========================================================
   DECORATION
   ========================================================= */

.iso-decor img {
    filter:
        drop-shadow(
            0 4px 4px rgba(0,0,0,.15)
        );
}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

.iso-action,
.iso-btn {
    min-width:
        105px;

    padding:
        10px 18px !important;

    background:
        linear-gradient(
            180deg,
            #829e5c 0%,
            #58783f 48%,
            #405f2d 100%
        ) !important;

    color:
        #fff8e5 !important;

    border:
        2px solid #304426 !important;

    border-radius:
        11px !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .7px;

    box-shadow:
        0 4px 0 #263b24,
        0 8px 16px rgba(0,0,0,.25) !important;

    transition:
        all .2s ease !important;
}


.iso-action:hover,
.iso-btn:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 6px 0 #263b24,
        0 11px 20px rgba(0,0,0,.30) !important;
}


.iso-action:active,
.iso-btn:active {
    transform:
        translateY(2px);

    box-shadow:
        0 2px 0 #263b24 !important;
}


/* =========================================================
   MUSIC
   ========================================================= */

.iso-music {
    background:
        linear-gradient(
            180deg,
            #fff4d7,
            #d7bd88
        ) !important;

    border:
        2px solid #704b2d !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.25) !important;
}


/* =========================================================
   CHARACTER SWITCH
   ========================================================= */

.iso-swap {
    background:
        linear-gradient(
            180deg,
            #fff3d5,
            #d5b982
        ) !important;

    border:
        2px solid #704b2d !important;

    border-radius:
        12px !important;

    box-shadow:
        0 4px 0 rgba(59,40,27,.35),
        0 8px 15px rgba(0,0,0,.22) !important;
}


/* =========================================================
   INTERACTION PAD
   ========================================================= */

.iso-pad {
    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle,
            rgba(238,210,137,.45) 0%,
            rgba(238,210,137,.16) 48%,
            transparent 72%
        ) !important;
}

.iso-pad__d {
    border:
        2px solid rgba(255,235,177,.30) !important;

    box-shadow:
        0 0 16px rgba(239,210,134,.20);
}


/* =========================================================
   GENERAL POPUP
   ========================================================= */

.dialog-wrap {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #fff5df 0%,
            #f0dfbc 55%,
            #ddc18d 100%
        ) !important;

    color:
        #4b3524 !important;

    border:
        3px solid #704b2d !important;

    border-radius:
        18px !important;

    box-shadow:
        0 15px 45px rgba(25,17,10,.42),
        inset 0 0 0 2px rgba(255,248,225,.65) !important;
}


/* inner frame */

.dialog-wrap::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(112,75,45,.35);

    border-radius:
        11px;

    pointer-events:
        none;
}


/* content */

.dialog-wrap .dialog-content {
    padding:
        22px 20px !important;
}


/* =========================================================
   CLOSE
   ========================================================= */

.dialog-wrap .close-content {
    width:
        38px !important;

    height:
        38px !important;

    right:
        8px !important;

    top:
        8px !important;

    background:
        #704b2d !important;

    border-radius:
        50% !important;

    box-shadow:
        0 3px 8px rgba(0,0,0,.25);
}


/* =========================================================
   POPUP TITLE
   ========================================================= */

.dialog-wrap h1,
.dialog-wrap h2,
.dialog-wrap h3 {
    color:
        #61452b !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-weight:
        500 !important;

    letter-spacing:
        1px !important;
}


/* =========================================================
   RSVP
   ========================================================= */

.rsvp-wrap {
    color:
        #4b3524 !important;
}


.rsvp-wrap .will-join {
    margin-bottom:
        18px !important;

    color:
        #62472d !important;

    font-size:
        12px !important;

    line-height:
        1.7 !important;

    text-align:
        center !important;

    border:
        0 !important;
}


/* labels */

.rsvp-wrap label,
.rsvp-wrap legend,
.rsvp-wrap .col-form-label {
    color:
        #62472d !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;
}


/* =========================================================
   INPUT
   ========================================================= */

.rsvp-wrap .form-control,
.dialog-wrap .form-control,
.dialog-wrap select,
.dialog-wrap textarea {
    background:
        #fbf4e4 !important;

    color:
        #4a3321 !important;

    border:
        2px solid #b99b68 !important;

    border-radius:
        11px !important;

    padding:
        10px 12px !important;

    box-shadow:
        inset 0 2px 5px rgba(59,40,27,.07) !important;
}


.rsvp-wrap .form-control:focus,
.dialog-wrap .form-control:focus,
.dialog-wrap select:focus,
.dialog-wrap textarea:focus {
    border-color:
        #7d6136 !important;

    box-shadow:
        0 0 0 3px rgba(183,149,82,.20) !important;

    outline:
        none !important;
}


/* =========================================================
   RSVP BUTTON
   ========================================================= */

.rsvp-wrap .btn,
.rsvp-wrap button,
.rsvp-wrap input[type="submit"],
.dialog-wrap .btn {
    width:
        100%;

    min-height:
        43px;

    background:
        linear-gradient(
            180deg,
            #829d5b,
            #55763b
        ) !important;

    color:
        #fff8e5 !important;

    border:
        2px solid #304426 !important;

    border-radius:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .6px;

    box-shadow:
        0 4px 0 #304426 !important;
}


/* =========================================================
   RADIO
   ========================================================= */

.dialog-wrap input[type="radio"] {
    accent-color:
        #58783f !important;
}


/* =========================================================
   UCAPAN / DOA
   ========================================================= */

.crew-dialog .dialog-wrap {
    background:
        linear-gradient(
            180deg,
            #fff5dd,
            #e4cb9d
        ) !important;
}


.crew-dialog p {
    color:
        #523b28 !important;

    line-height:
        1.7 !important;
}


.crew-dialog textarea {
    min-height:
        115px !important;
}


/* =========================================================
   GIFT
   ========================================================= */

.gift-dialog .dialog-wrap {
    background:
        linear-gradient(
            180deg,
            #fff4d8,
            #dfc18c
        ) !important;
}


/* =========================================================
   GALLERY
   ========================================================= */

#galleries,
#gallery {
    background:
        #263b24 !important;

    color:
        #fff3d5 !important;
}


#galleries .gallery-text,
#gallery .title-gallery,
#gallery .word-gallery {
    color:
        #fff3d5 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    text-shadow:
        0 3px 8px rgba(0,0,0,.40);
}


/* gallery image */

#galleries img,
#gallery img {
    filter:
        saturate(.90)
        contrast(1.03);

    transition:
        transform .5s ease;
}


/* =========================================================
   DETAIL EVENT
   ========================================================= */

.detail-wrapper {
    background:
        linear-gradient(
            180deg,
            #f8eed9,
            #e5cda0
        ) !important;

    color:
        #493322 !important;

    border:
        2px solid #80603b;

    border-radius:
        16px;

    padding:
        20px !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);
}


.detail-wrapper legend {
    color:
        #61452b !important;

    font-family:
        Georgia,
        serif !important;
}


/* =========================================================
   MAP
   ========================================================= */

.map-wrapper,
#map {
    border:
        3px solid #704b2d !important;

    border-radius:
        15px !important;

    overflow:
        hidden !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.20) !important;
}


/* =========================================================
   TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color:
        #705331 !important;
}

a:hover {
    color:
        #3e2c1d !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .iso-hud-top {
        top:
            10px !important;

        min-width:
            200px;

        padding:
            8px 15px 9px !important;

        border-radius:
            11px !important;
    }


    .iso-hud-top__names {
        font-size:
            18px !important;

        letter-spacing:
            1px;
    }


    .iso-hud-top__hint {
        font-size:
            6px !important;

        letter-spacing:
            1px;
    }


    .iso-bubble {
        min-width:
            60px;

        padding:
            5px 7px !important;

        font-size:
            8px !important;

        border-width:
            1.5px !important;
    }


    .iso-labels .iso-bubble:nth-child(3)::after,
    .iso-labels .iso-bubble:nth-child(5)::after {
        font-size:
            8px !important;
    }


    .iso-action,
    .iso-btn {
        min-width:
            85px;

        padding:
            8px 12px !important;

        font-size:
            8px !important;

        border-radius:
            9px !important;
    }


    .dialog-wrap {
        margin:
            10px !important;

        border-radius:
            15px !important;
    }


    .dialog-wrap .dialog-content {
        padding:
            18px 14px !important;
    }


    .dialog-wrap h1,
    .dialog-wrap h2,
    .dialog-wrap h3 {
        font-size:
            21px !important;
    }


    .rsvp-wrap .form-control,
    .dialog-wrap .form-control,
    .dialog-wrap select,
    .dialog-wrap textarea {
        font-size:
            12px !important;

        min-height:
            40px;
    }


    .rsvp-wrap .btn,
    .rsvp-wrap button,
    .dialog-wrap .btn {
        min-height:
            40px;

        font-size:
            10px !important;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 380px) {

    .iso-hud-top {
        min-width:
            180px;
    }


    .iso-hud-top__names {
        font-size:
            16px !important;
    }


    .iso-bubble {
        min-width:
            55px;

        font-size:
            7px !important;

        padding:
            4px 5px !important;
    }


    .iso-action,
    .iso-btn {
        min-width:
            78px;

        font-size:
            7px !important;
    }
}


/* =========================================================
   REMOVE DEFAULT BLUE / RED
   ========================================================= */

.btn-primary,
.btn-info,
.btn-danger,
.btn-success {
    color:
        #fff8e5 !important;

    border-color:
        #304426 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width:
        5px;
}

::-webkit-scrollbar-track {
    background:
        #ead7b1;
}

::-webkit-scrollbar-thumb {
    background:
        #876640;

    border-radius:
        10px;
}


/* =========================================================
   FORM FIX
   ========================================================= */

input,
textarea,
select,
button {
    font-family:
        Arial,
        sans-serif !important;
}


/* =========================================================
   PREVENT GAME TEXT SELECTION
   ========================================================= */

.iso-game,
.iso-game * {
    -webkit-user-select:
        none;

    user-select:
        none;
}


/* allow forms */

.dialog-wrap input,
.dialog-wrap textarea,
.dialog-wrap select {
    -webkit-user-select:
        text;

    user-select:
        text;
}