@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('BlackSingature.css');
      :root {
      --inv-bg: #324a6a;
      --inv-base: #ffffff;
      --inv-accent: #e4c389;
      --inv-border: #e4c389;
      --font-base: 'Marcellus', serif;
      --font-accent: 'BlackSingature';
      --font-latin: 'Marcellus', serif;
      --menu-bg: #324a6a;
      --menu-inactive: #ffffff80;
      --menu-active: #e4c389;
      --btn-color: #324a6a;
      }
      .font-accent {
      font-size: 50px;
      }
      #ajakanMe {
        position: fixed;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        color: var(--inv-base);
        font-family: var(--font-base);
        font-size: 90%;
        }
        .font-accent {
        font-family: var(--font-accent);
        font-weight: normal !important;
        }
        .font-latin {
        font-family: var(--font-latin);
        font-size: 200%;
        }
        .color-accent {
        color: var(--inv-accent);
        }
        /* button */
        .btn-music {
        height: 30px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        border-radius: 10rem;
        background-color: var(--inv-accent);
        border-color: var(--inv-accent);
        color: var(--btn-color);
        position: absolute;
        bottom: 90px;
        right: 30px;
        opacity: 0.5;
        }
        .sc-music {
        height: 0;
        overflow: hidden;
        }
        .sc-music div {
        display: none;
        }
        .btn-primary, .btn-primary.disabled, .btn-primary:disabled {
        background-color: var(--inv-accent);
        border-color: var(--inv-accent);
        color: var(--btn-color);
        border-radius: 50rem;
        }
        .btn-primary:hover,
        .btn-primary:active,
        .btn-primary.active {
        background-color: var(--inv-accent) !important;
        border-color: var(--inv-accent) !important;
        color: var(--btn-color) !important;
        box-shadow: var(--inv-accent) !important;
        }
        .rounded-pill {
        border-radius: 50rem;
        }
        /* slide */
        .invitation__track,
        .invitation__slide,
        .invitation__list {
        height: 100% !important;
        }
        .invitation__slide {
        display: none;
        }
        .invitation__slide.is-active {
        display: block;
        }
        #menuSlider {
        position: fixed;
        bottom: 0;
        width: 100%;
        }
        .menu-track {
        width: 100%;
        max-width: 500px;
        margin-right: auto !important;
        margin-left: auto !important;
        background-color: var(--menu-bg);
        }
        .menu-list {
        justify-content: space-between;
        }
        .menu-item {
        border: none !important;
        color: var(--menu-inactive);
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        }
        .menu-item span {
        font-size: 11px;
        }
        .menu-item.is-active {
        border: none !important;
        color: var(--menu-active);
        }
        .container-mobile {
        background-color: var(--inv-bg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        max-width: 500px;
        width: 100%;
        height: calc(100% - 60px);
        padding-right: 30px;
        padding-left: 30px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        }
        .container-video {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        bottom: 0;
        height: 100vh;
        width: 100%;
        max-width: 500px;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        }
        .container-video #myVideo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }
        .no-menu .container-mobile,
        .not-open .container-mobile {
        height: 100%;
        }
        /* lightbox */
        .lightbox {
        cursor: pointer;
        }
        .lightbox-wrapper {
        max-width: 500px;
        margin: auto;
        }
        .lightbox-wrapper.show {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.801);
        }
        .lightbox-inner,
        .lightbox-list {
        height: 100%;
        width: 100%;
        }
        .lightbox-inner img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        }
        .btn-lightbox {
        text-decoration: none;
        width: 48px;
        height: 48px;
        border-radius: 100%;
        background-color: rgba(255, 0, 0, 0.281);
        color: #ffffff;
        position: fixed;
        bottom: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
        }
        .btn-lightbox:hover {
        background-color: rgba(255, 0, 0, 0.534);
        color: #ffffff;
        }
        .lightbox-navigation {
        position: fixed;
        top: calc(50% - 60px);
        width: 100%;
        max-width: 500px;
        display: flex;
        justify-content: space-between;
        padding: 30px;
        display: none;
        }
        .lightbox-arrow {
        text-decoration: none;
        width: 48px;
        height: 48px;
        border-radius: 100%;
        background-color: rgba(255, 255, 255, 0.281);
        color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        .lightbox-arrow:hover {
        background-color: rgba(255, 255, 255, 0.527);
        color: #000000;
        }
        .show .lightbox-navigation,
        .show .btn-lightbox {
        display: inherit;
        }
        /* modal */
        .modal-dialog {
        max-width: 500px;
        margin: auto;
        padding: 0.5rem;
        height: 100%;
        }
        .modal-content {
        overflow: auto;
        }
        .btn-close {
        text-decoration: none;
        width: 48px;
        height: 48px;
        border-radius: 100%;
        background-color: rgba(255, 0, 0, 0.281);
        color: #ffffff;
        position: fixed;
        bottom: 20px;
        left: calc(50% - 24px);
        display: flex;
        justify-content: center;
        align-items: center;
        }
        /* rsvp */
        .rsvp-placeholder {
        position: relative;
        max-height: calc(100vh - 150px);
        overflow: auto;
        font-family: sans-serif;
        }
        .rsvp-placeholder .rsvp-form {
        padding: 0px 20px !important;
        }
        .rsvp-placeholder .rsvp-form .mb-4 {
        display: none
        }
        /* countdown */
        .no-menu .countdown {
        display: none;
        }
        .countdown {
        display: flex;
        gap: 8px;
        }
        .countdown-item {
        width: 100%;
        background-color: var(--inv-accent);
        color: var(--inv-bg);
        padding: 4px;
        border-radius: 0.4rem;
        }
        .countdown-item .number {
        font-size: 1.35rem;
        line-height: 1.2;
        font-weight: bold;
        }
        /* frame */
        .frame {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        }
        .frame-tl {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        }
        .frame-tr {
        width: 50%;
        position: absolute;
        top: 0;
        right: 0;
        }
        .frame-bl {
        width: 50%;
        position: absolute;
        bottom: 0;
        left: 0;
        }
        .frame-br {
        width: 50%;
        position: absolute;
        bottom: 0;
        right: 0;
        }
        /* video */
        .embed-video iframe {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        }
        /* watermark */
        #waterMark p a {
        color: var(--inv-base);
        }
        #waterMark .list-icon a {
        color: var(--inv-accent);
        }
        /* free trial badge */
        .free-trial-container {
        max-width: 500px;
        width: 100%;
        position: relative;
        margin: auto;
        }
        .free-trial-badge {
        width: 130px;
        height: 130px;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        }
        .free-trial-badge span {
        position: absolute;
        display: block;
        width: 171px;
        line-height: 37px;
        text-align: center;
        background-color: var(--token-color-yellow100);
        top: 26px;
        right: -40px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background: #ffeb00;
        }
        /* btn editor */
        .btn-countdown,
        .btn-maps,
        .btn-video {
        display: none
        }
        /* loader */
        .loader-wrapper,
        .loader-overlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: var(--inv-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: var(--inv-base);
        z-index: 99999;
        }
        .loader {
        display: inline-block;
        width: 30px;
        height: 30px;
        position: relative;
        border: 4px solid var(--inv-accent);
        animation: loader 2s infinite ease;
        }
        .loader-inner {
        vertical-align: top;
        display: inline-block;
        width: 100%;
        background-color: var(--inv-accent);
        animation: loader-inner 2s infinite ease-in;
        }
        @keyframes  loader {
        0% {
        transform: rotate(0deg);
        }
        25% {
        transform: rotate(180deg);
        }
        50% {
        transform: rotate(180deg);
        }
        75% {
        transform: rotate(360deg);
        }
        100% {
        transform: rotate(360deg);
        }
        }
        @keyframes  loader-inner {
        0% {
        height: 0%;
        }
        25% {
        height: 0%;
        }
        50% {
        height: 100%;
        }
        75% {
        height: 100%;
        }
        100% {
        height: 0%;
        }
        }
        /* not supprt */
        #notSupport {
        margin: auto;
        position: fixed;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        }
        .blur{
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          width: 100%;
          height: 100%;
          background-color: #f8f9fa;
          opacity: 1;
          filter: blur(200px);
      }
      .gift-1{
          margin: 0 auto;
          max-width: calc(50% - 7px);
          padding-bottom: 50px;
      }
      .gift-1 button, .gift-1 .btn{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
      }
      .gift-1.splide__slide{
          padding-bottom: 34px;
      }
      .story-list .animate__animated:nth-of-type(odd){
          -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
      }
      .story-list .animate__animated:nth-of-type(even){
          -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
      }
      .story-list .animate__animated:nth-of-type(odd) .image-editable{
          width: 248px;
          height: 195px;
          margin: auto;
          overflow: hidden;
          transform: translate(15px, 24px) rotate(356deg);
          border: 4px solid var(--inv-border);

      }
      .story-list .animate__animated:nth-of-type(even) .image-editable{
          width: 248px;
          height: 195px;
          margin: auto;
          overflow: hidden;
          margin-bottom: -20px;
          transform: translate(-7px, 0px) rotate(2deg);
          border: 4px solid var(--inv-border);
      }
      .story-content{
          position: relative;
          background-color: var(--inv-border);
          padding: 14px;
          border-radius: 20px;
          margin-bottom: 21px;
      }
      #inner-slider .splide__arrow--next {
          right: 0;
      }
      #inner-slider .splide__arrow--prev {
          left: 0;
      }
      .splide__arrow:disabled {
          opacity: 0;
      }


    #qrcode img{
        width:93%;
    }

    @media only screen and (max-width: 768px) {
        #qrcode img{
            width:80%;
        }
    }

      #inner-slider .splide__slide div .image-editable{
          background: white;
          padding: 0 0.5rem !important;
          padding-bottom: 0.5rem !important;
          border-radius: 14px;
          color: black;
      }
      .loader-wrapper .wrapper {
        width: 125px;
        height: 200px;
        text-align: center;
        overflow: hidden;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        filter: url(#love);
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .loader-wrapper .wrapper span {
        width: 25px;
        height: 25px;
        background-color: #fff;
        border-radius: 50%;
        background-color: #e74c3c;
        transform-origin: 50%;
      }

      .loader-wrapper .wrapper span:nth-child(1) {
        animation: left 2s infinite ease-in-out;
      }

      @keyframes left {

        0%,
        100% {
            transform: translateY(0) translateX(20px) scale(2);
            background-color: var(--menu-inactive);
        }

        40% {
            transform: translateY(0) translateX(25px) scale(1.6);
            background-color: var(--menu-active);
        }

        60% {
            transform: translateY(0) translateX(20px) scale(2);
            background-color: var(--menu-inactive);
        }

        80% {
            transform: translateY(0) translateX(25px) scale(1.6);
            background-color: var(--menu-active);
        }
      }

      .loader-wrapper .wrapper span:nth-child(2) {
        animation: center 2s infinite ease-in-out;
      }

      @keyframes center {

        0%,
        100% {
            transform: translateY(20px) translateX(0px) scale(2);
            background-color: var(--menu-inactive);
        }

        40% {
            transform: translateY(25px) translateX(0) scale(1.8);
            background-color: var(--menu-active);
        }

        60% {
            transform: translateY(20px) translateX(0px) scale(2);
            background-color: var(--menu-inactive);
        }

        80% {
            transform: translateY(25px) translateX(0) scale(1.8);
            background-color: var(--menu-active);
        }

      }

      .loader-wrapper .wrapper span:nth-child(3) {
        animation: right 2s infinite ease-in-out;
      }

      @keyframes right {

        0%,
        100% {
            transform: translateY(0) translateX(-20px) scale(2);
            background-color: var(--menu-inactive);
        }

        40% {
            transform: translateY(0) translateX(-25px) scale(1.6);
            background-color: var(--menu-active);
        }

        60% {
            transform: translateY(0) translateX(-20px) scale(2);
            background-color: var(--menu-inactive);
        }

        80% {
            transform: translateY(0) translateX(-25px) scale(1.6);
            background-color: var(--menu-active);
        }

      }

      .loader-wrapper .wrapper span.shadow {
        position: absolute;
        left: 19%;
        background-color: rgba(0, 0, 0, .2);
        top: 180px;
        transform: translateX(-50%);
        height: 3px;
        width: 80px;
        filter: blur(.3px);
        transform-origin: 50%;
        animation: shadow 2s infinite ease-in-out;
      }

      @keyframes shadow {

        0%,
        100% {
            transform: scale(1.1);
            opacity: .7;
        }

        40% {
            transform: scale(.9);
            opacity: .3;
        }

        60% {
            transform: scale(1.1);
            opacity: .7;
        }

        80% {
            transform: scale(.9);
            opacity: .3;
        }
      }


      .loader-wrapper .wrapper span.text {
        position: absolute;
        width: 100%;
        background-color: transparent;
        font-family: 'Lato';
        font-size: 20px;
        letter-spacing: 9px;
        bottom: 0;
        text-align: center;
        color: #c0392b;
      }
      .gallery{
        width: 33.333%;
        overflow: hidden;
        padding: 4px;
    }
    .gallery5, .gallery6{
        width: 66%;
    }
    .gallery .frame-gallery{
        overflow: hidden;
        width: 100%;
        height: 100px;
    }
    .gallery4 .frame-gallery,
    .gallery5 .frame-gallery,
    .gallery6 .frame-gallery,
    .gallery7 .frame-gallery{
        height: 129px;
    }
    .gallery img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


.text-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

#qrcode img{
    padding: 20px;
    background-color:white;
}