:root {
      --inv-bg: #ffffff;
      --inv-base: #2f2f2f;
      --inv-accent: #DAB864;
      --inv-border: #DAB864;
      --font-base: 'Roboto', sans-serif;
      --font-accent: 'Prata', serif;
      --font-latin: 'Great Vibes', cursive;
      --menu-bg: #ffffff;
      --menu-inactive: #676767;
      --menu-active: #DAB864;
      --btn-color: #ffffff;
      }
      .spin {
      -webkit-animation: spin 8s linear infinite;
      animation: spin 8s linear infinite;
      }
      @-webkit-keyframes spin {
      0% {
      -webkit-transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(360deg);
      }
      }
      @keyframes spin {
      0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
      }
      }
      #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;
      }
      .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;
        }