#card-banner { aspect-ratio: 420 / 660; background-position: center top; background-size: cover; background-repeat: no-repeat; position: relative; padding: 0px; }

#card-save-the-date { background-color: var(--text-color-primary); color: rgb(255, 255, 255); text-align: center; }

#card-save-the-date.has-img { background-position: center center; background-size: cover; background-repeat: no-repeat; }

#card-save-the-date.has-img > .inner { background-color: rgba(0, 0, 0, 0.5); }

#card-save-the-date > .inner { padding: 50px 0px; }

#card-save-the-date .save { font-size: 80px; line-height: 1; margin-bottom: -5px; font-family: FleurDeLeah, cursive; }

#card-save-the-date .thedate { font-size: 60px; text-transform: uppercase; font-family: Vocago; line-height: 1; }

#card-save-the-date .date-wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; margin-top: 5px; }

#card-save-the-date .date-wrapper .date { font-family: Averta; font-size: 16px; margin: 10px 6px 0px; display: inline-block; font-weight: 400; letter-spacing: 3px; }

#card-save-the-date .date-wrapper img.leaf { width: 70px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7494%) hue-rotate(164deg) brightness(105%) contrast(99%); }

#card-countdown { --signature-circle-width: 210px; --signature-leaf-width: 110px; --signature-and-width: 36px; --signature-name-size: 18px; position: relative; overflow: hidden; background-color: rgb(253, 250, 246); }

#card-countdown .decor-flower { display: block; width: 100%; position: absolute; z-index: 0; }

#card-countdown .decor-flower.decor-flower-top { top: 0px; left: 0px; width: 100%; }

#card-countdown .decor-flower.decor-flower-bottom { bottom: 0px; left: 0px; width: 100%; }

#card-countdown .names .name { font-size: 25px; line-height: 1; }

#card-countdown .names .and-wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; margin-top: -8px; }

#card-countdown .names .and-wrapper .and { font-family: POORICH; font-size: 36px; margin: 10px 20px 0px; display: inline-block; }

#card-countdown .names .and-wrapper img.leaf { width: 90px; }

#card-countdown .card-countdown-inner { position: relative; z-index: 1; text-align: center; color: var(--text-color-primary); padding: 80px 16px; }

#card-countdown .card-countdown-inner h3 { text-transform: uppercase; font-size: 24px; line-height: 1.1; font-weight: 400; margin-top: 35px; margin-bottom: 12px; }

#card-countdown .card-countdown-inner .signature-circle { margin-top: 50px; display: inline-block; }

#card-countdown .card-countdown-inner .signature-circle > img { width: var(--signature-circle-width); }

#card-countdown .card-countdown-inner .signature-circle { position: relative; }

#card-countdown .card-countdown-inner .signature-circle .signature-circle-inner { position: absolute; bottom: 30px; left: 0px; width: 100%; }

#card-countdown .card-countdown-inner .signature-circle .signature-circle-inner > img { width: 45px; }

#card-countdown .card-countdown-inner .signature-circle .names { margin-bottom: 10px; }

#card-countdown .card-countdown-inner .signature-circle .names .name { font-size: var(--signature-name-size); text-transform: uppercase; }

#card-countdown .card-countdown-inner .signature-circle .names .and-wrapper { margin-bottom: 5px; margin-top: -10px; background-color: rgb(254, 251, 246); }

#card-countdown .card-countdown-inner .signature-circle .names .and-wrapper img.leaf { width: var(--signature-leaf-width); }

#card-countdown .card-countdown-inner .signature-circle .names .and-wrapper .and { font-size: 40px; margin: 0px; }

#countdown .countdown-inner { display: flex; align-items: center; justify-content: center; font-family: Ergisa; }

#countdown .box, #countdown .colon { font-size: 28px; color: var(--text-color-primary); }

#countdown .colon { padding: 0px 12px; }

#countdown .box { min-width: 45px; }

#card-gallery { padding: 2px 3px; }

.photo-grid { column-count: 2; column-gap: 5px; }

.photo-grid .photo { width: 100%; display: block; margin-bottom: 5px; }

.photo-grid .photo img { width: 100%; display: block; }

.photo-grid + .view-more { margin-top: 50px; }

.photo-grid[data-masonry] { column-gap: unset; column-count: unset; margin: 0px -3px; }

.photo-grid[data-masonry] .photo { padding: 3px; width: 50%; margin-bottom: 0px; }

.photo-grid[data-masonry] .photo img { height: auto; }

#card-info { background-color: rgb(253, 250, 246); position: relative; overflow: hidden; }

#card-info .decor-flower { display: block; width: 100%; position: absolute; z-index: 0; }

#card-info .decor-flower.decor-flower-top { top: 0px; left: 0px; width: 100%; }

#card-info .decor-flower.decor-flower-bottom { bottom: 0px; left: 0px; width: 100%; }

#card-info .card-info-inner { color: var(--text-color-primary); text-align: center; position: relative; z-index: 1; padding: 0px 12px; }

#card-info .parents { margin-bottom: 24px; display: flex; align-items: center; justify-content: center; font-family: Averta; }

#card-info .parents .parent { text-align: left; font-size: 14px; text-transform: uppercase; }

#card-info .parents .parent .label { text-transform: uppercase; }

#card-info .parents .parent .location { font-family: Vocago; font-size: 13px; }

#card-info .parents .parent:first-child { text-align: right; }

#card-info .parents .dot-divider { font-size: 30px; }

#card-info .greeting-text { text-transform: uppercase; font-size: 20px; }

#card-info .names { margin-top: 24px; margin-bottom: 24px; display: flex; align-items: center; }

#card-info .names .name-wrapper { flex: 1 1 0%; }

#card-info .names .name-wrapper.left { text-align: right; }

#card-info .names .name-wrapper.right { text-align: left; }

#card-info .names .name-wrapper.right > div { text-align: right; }

#card-info .names .name-wrapper > div { text-align: left; display: inline-block; }

#card-info .names .name-wrapper > div > div:first-child { margin-bottom: -5px; }

#card-info .names .name-wrapper > div > div:last-child { text-align: center; }

#card-info .names .name-wrapper div { text-transform: uppercase; font-size: 14px; }

#card-info .names .name-wrapper .name { font-size: 28px; text-transform: none; line-height: 1.5; }

#card-info .names .and { font-family: POORICH; font-size: 36px; margin: 0px 16px; }

#card-info .names.vertical { flex-direction: column; }

#card-info .names.vertical .and { line-height: 1; }

#card-info .names.vertical .name-wrapper .name { font-weight: 700; font-size: 36px; }

#card-info .text { font-size: 16px; }

#card-info .text.lg { font-size: 20px; }

#card-info .location-title { font-size: 32px; margin-bottom: 8px; line-height: 1.2; }

#card-info .location-address { font-size: 16px; }

#card-info .date-and-time { margin: 16px 0px; }

#card-info .date-and-time .date-and-time-inner { display: inline-block; border: 1px solid; padding: 16px 24px; border-radius: 10px; }

#card-info .date-and-time .time { font-size: 18px; line-height: 1; text-transform: uppercase; margin-bottom: 12px; font-family: Averta; }

#card-info .date-and-time .date { font-size: 26px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; font-family: Averta; font-weight: 700; }

#card-info .date-and-time .date._bordered { border-top: 1px solid rgba(146, 131, 98, 0.11); display: inline-block; border-bottom: 1px solid rgba(146, 131, 98, 0.11); padding: 8px; }

#card-info .date-and-time .lunar-date { font-size: 16px; margin-top: 12px; }

#card-love-story { background-color: rgb(253, 250, 246); position: relative; overflow: hidden; border-top: 1px dashed rgba(var(--color-primary-raw),0.5); }

#card-love-story .decor-flower { display: block; width: 100%; position: absolute; z-index: 0; }

#card-love-story .decor-flower.decor-flower-top { top: 0px; left: 0px; width: 100%; }

#card-love-story .decor-flower.decor-flower-bottom { bottom: 0px; left: 0px; width: 100%; }

#card-love-story .card-love-story-inner { position: relative; z-index: 1; padding: 50px 0px 100px; }

#card-love-story .img-title { text-align: center; }

#card-love-story .img-title img { width: 250px; }

#card-love-story h2 { margin-bottom: 50px; font-size: 30px; text-align: center; color: var(--text-color-primary); text-transform: uppercase; }

#card-love-story h2 .font1 { text-transform: none; font-size: 60px; }

#card-love-story .groom-bride { color: var(--text-color-primary); padding: 0px 100px; }

#card-love-story .groom-bride .img { position: relative; flex: 1 1 0%; text-align: center; }

#card-love-story .groom-bride .img .img-inner { text-align: center; position: relative; margin: auto; width: 100%; background: rgb(255, 255, 255); padding: 5px; box-shadow: rgb(182, 182, 182) 1px 3px 1px 0px; border-radius: 2px; }

#card-love-story .groom-bride .img .img-inner img { position: relative; }

#card-love-story .groom-bride .img { z-index: 1; }

#card-love-story .groom-bride .img:last-child { z-index: 1; transform: translateX(25%); }

#card-love-story .groom-bride .img:first-child { transform: rotate(-20deg) translate(-25%, 15%); }

#card-timeline { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 55px 16px; aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--text-color-primary); }

#card-timeline .timeline-title { font-size: 40px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0px; text-align: center; font-weight: 400; margin-bottom: 24px; }

#card-timeline .timeline-inner { position: relative; text-align: center; color: rgb(255, 255, 255); width: 100%; }

#card-timeline .timeline-items { display: flex; justify-content: center; position: relative; color: rgb(255, 255, 255); width: 100%; }

#card-timeline .timeline-items::before { content: ""; position: absolute; display: block; height: 1px; background-color: rgb(255, 255, 255); width: 100%; top: 46px; }

#card-timeline .timeline-items .timeline-item { position: relative; text-align: center; flex: 1 1 0%; }

#card-timeline .timeline-items .timeline-item .timeline-item-icon { position: relative; display: inline-block; height: 36px; margin-bottom: 16px; }

#card-timeline .timeline-items .timeline-item .timeline-item-icon img { max-height: 100%; }

#card-timeline .timeline-items .timeline-item .timeline-item-icon::after { content: ""; display: inline-block; width: 9px; height: 9px; position: absolute; background-color: rgb(255, 255, 255); border-radius: 5px; bottom: -16px; left: 50%; transform: translateX(-50%); }

#card-timeline .timeline-items .timeline-item .timeline-item-content { margin-top: 12px; position: relative; }

#card-timeline .timeline-items .timeline-item .timeline-item-content .time { font-size: 18px; line-height: 1.1; margin-bottom: 4px; }

#card-timeline .timeline-items .timeline-item .timeline-item-content .title { font-size: 13px; line-height: 1.4; text-transform: uppercase; }

#card-timeline.has-img { background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; }

#card-timeline.has-img::before { content: ""; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.5); }

#card-calendar > .inner { position: relative; z-index: 1; padding: 36px 16px; }

#card-calendar .calendar-header { margin-bottom: 12px; }

#card-calendar .calendar-header .year { font-size: 95.22px; line-height: 1; color: var(--text-color-primary); text-align: center; margin-bottom: -45px; }

#card-calendar .calendar-header .month { font-family: "High Spirited"; font-size: 80.69px; line-height: 1; color: var(--text-color-primary); text-align: center; }

#card-calendar .mini_calendar { font-family: Averta; font-weight: 700; --tb-border-color: transparent; --tb-color: var(--text-color-primary); --tb-day-color: var(--text-color-primary); --tb-header-color: var(--text-color-primary); --tb-color-wedding-day: var(--text-color-primary); }

#card-calendar .mini_calendar th { text-transform: uppercase; border-bottom: 1px solid var(--text-color-primary); font-family: Averta; font-weight: 700; }

#card-calendar .mini_calendar table tr td { height: 35px; }

#card-comments { position: relative; overflow: hidden; }

#card-comments .inner { position: relative; padding: 0px 20px; z-index: 1; }

#card-comments .card-section-title { font-size: 60px; margin-bottom: 0px; color: var(--text-color-primary); text-align: center; font-family: FleurDeLeah; }

#card-comments .card-section-subtitle { margin-bottom: 24px; color: var(--text-color-primary); text-align: center; }

#card-comments .comment-form { background-color: rgba(var(--color-primary-raw),0.25); padding: 16px; }

#card-comments .comment-form .btn { background-color: var(--color-primary); }

#card-comments .comment-list .comment-box { padding: 12px 0px; }

#card-comments .comment-list .comment-box .fullname { font-weight: 500; color: var(--text-color-primary); }

#card-comments .thankyou { font-size: 65px; color: var(--text-color-primary); text-align: center; margin-top: 32px; margin-bottom: 0px; font-family: FleurDeLeah; }

@media screen and (min-width: 440px) {
  #card-countdown { --signature-circle-width: 240px; --signature-leaf-width: 140px; --signature-name-size: 20px; --signature-and-width: 44px; }
  #card-countdown .names .name { font-size: 28px; }
  #card-countdown .names .and-wrapper img.leaf { width: 100px; }
  #card-countdown .card-countdown-inner h3 { font-size: 28px; }
  #card-countdown .card-countdown-inner .signature-circle { margin-top: 50px; }
  #card-countdown .card-countdown-inner .signature-circle .signature-circle-inner { bottom: 40px; }
  #card-countdown .card-countdown-inner .signature-circle .signature-circle-inner > img { width: 45px; }
  #card-countdown .card-countdown-inner .signature-circle .names .and-wrapper { margin-top: -20px; }
  #countdown .box, #countdown .colon { font-size: 33px; }
}

@media screen and (min-width: 500px) {
  #card-info .parents .parent { font-size: 18px; }
  #card-info .parents .parent .location { font-size: 14px; }
  #card-info .text { font-size: 16px; }
  #card-info .text.lg { font-size: 20px; }
  #card-info .location-title { font-size: 34px; }
  #card-info .location-address { font-size: 18px; }
  #card-info .names .name-wrapper div { font-size: 14px; }
  #card-info .names .name-wrapper .name { font-size: 34px; }
  #card-info .names .and { font-size: 48px; margin: 0px 12px; }
  #card-info .date-and-time { margin: 16px 0px; }
  #card-info .date-and-time .time { font-size: 20px; }
  #card-info .date-and-time .date { font-size: 30px; }
  #card-info .date-and-time .lunar-date { font-size: 18px; }
}

@font-face { font-family: Ergisa; src: url("../font/ergisa-regular.otf"); font-weight: 400; font-style: normal; }

@font-face { font-family: "High Spirited"; src: url("../font/high-spirited.otf"); }

@font-face { font-family: Vocago; src: url("../font/1FTVVIPVocago-Regular.ttf"); }

@font-face { font-family: Averta; src: url("../font/Averta-Regular.otf"); }

@font-face { font-family: Averta; src: url("../font/Averta-Bold.otf"); font-weight: 700; }

@font-face { font-family: POORICH; src: url("../font/POORICH.TTF"); }

@font-face { font-family: FleurDeLeah; src: url("../font/FleurDeLeah-Regular.ttf"); }

body { background-color: rgb(51, 51, 51); font-family: Vocago; font-size: 16px; }

body a { text-decoration: none; color: inherit; }

body .btn-link { text-decoration: none; color: rgb(63, 81, 181); }

body img { max-width: 100%; }

body { --color-primary: rgb(146, 131, 98); --text-color-primary: rgb(91, 67, 43); --color-primary-raw: 146, 131, 98; }

.card-wrapper { max-width: 480px; margin: auto; background-color: rgb(253, 250, 246); overflow: hidden; }

.card-section { position: relative; padding: 50px 0px; }

#card-info .parents .parent { text-transform: none; }

#card-info .parents .parent .label { text-transform: none; }

#card-info .parents .parent .name { text-transform: uppercase; }

#card-info .event-box .btn { background: var(--text-color-primary); color: rgb(255, 255, 255); font-weight: 600; font-size: 14px; }

#card-love-story { padding-top: 0px; border-top: 0px; }

#card-gallery { background-color: rgb(253, 250, 246); }

#card-info .parents { align-items: flex-start; }

#card-info .parents .parent .name .name-title { text-transform: none; }

#card-timeline .timeline-items .timeline-item .timeline-item-content .time { font-size: 20px; margin-bottom: 8px; }

#card-gift { border-bottom: 1px solid var(--color-primary); border-top: 1px solid var(--color-primary); }

#card-gift .inner { position: relative; padding: 0px 20px; z-index: 1; }

#card-gift .card-section-title { font-size: 60px; margin-bottom: 0px; color: var(--text-color-primary); text-align: center; font-family: FleurDeLeah; }

#card-gift .card-section-subtitle { margin-bottom: 24px; color: var(--text-color-primary); text-align: center; }

#card-gift .present-box { text-align: center; }

#card-gift .present-box .present-box-inner { color: var(--color-primary); border: 2px solid; padding: 16px; border-radius: 8px; display: inline-block; margin: auto; cursor: pointer; }

#card-gift .present-box .present-box-inner img { width: 200px; }

#card-comments .thankyou { font-family: "High Spirited"; }

@media screen and (min-width: 440px) {
  #card-countdown .card-countdown-inner .signature-circle .names .and-wrapper { margin-top: -14px; }
  #card-info .parents .parent .name { font-size: 14px; text-transform: none; }
}

@media screen and (max-width: 430px) {
  #card-info .card-info-inner { padding: 0px 8px; }
  #card-info .parents .parent .name { font-size: 14px; text-transform: none; }
}

@media screen and (max-width: 390px) {
  #card-info .greeting-text { font-size: 18px; }
  #card-info .parents .parent .name { font-size: 13px; }
}

@media screen and (max-width: 390px) {
  #card-info .greeting-text { font-size: 18px; }
  #card-info .card-info-inner { padding: 0px 8px; }
  #card-info .parents .parent .name { font-size: 13px; text-transform: none; }
}

@media screen and (max-width: 390px) {
  #card-info .greeting-text { font-size: 18px; }
  #card-info .card-info-inner { padding: 0px 8px; }
  #card-info .parents .parent .name { font-size: 13px; text-transform: none; }
}

#guest-popup .guest-popup-inner { background-color: rgb(255, 247, 235); border-top: 6px solid rgb(137, 121, 90); border-bottom: 6px solid rgb(137, 121, 90); padding-top: 80px; color: var(--text-color-primary); font-family: Vocago; }

#guest-popup .guest-popup-inner::before { content: ""; display: block; width: 110px; height: 110px; background-image: url("../images/button.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; left: 50%; transform: translateX(-50%); top: -30px; }

#guest-popup .guest-popup-inner .guest-popup-image { display: none; }

#guest-popup .guest-popup-inner .info-wrapper .wedding-name { color: inherit; font-weight: 400; }

#guest-popup .guest-popup-inner .info-wrapper .wedding-date { color: inherit; font-weight: 400; position: relative; font-family: inherit; font-size: 16px; letter-spacing: 3px; display: flex; align-items: center; justify-content: center; }

#guest-popup .guest-popup-inner .info-wrapper .wedding-date > div { border: 0px; padding: 0px; margin-top: 15px; }

#guest-popup .guest-popup-inner .info-wrapper .wedding-date::before { display: inline-block; content: ""; background-image: url("../images/leaf-left.png"); width: 100px; aspect-ratio: 150 / 79; background-position: center center; background-size: contain; background-repeat: no-repeat; }

#guest-popup .guest-popup-inner .info-wrapper .wedding-date::after { display: inline-block; content: ""; background-image: url("../images/leaf-right.png"); width: 100px; aspect-ratio: 150 / 79; background-position: center center; background-size: contain; background-repeat: no-repeat; }

#guest-popup .guest-popup-inner .info-wrapper .guest-name { color: inherit; font-weight: 400; border-bottom: 1px dotted; }

#guest-popup .guest-open-button { color: currentcolor; box-shadow: currentcolor 0px 4px; background-color: transparent; border-radius: 5px; font-weight: 400; font-size: 18px; padding: 5px 16px; }

#card-opening-sides .card-side.left { background-image: url("../images/side-card.png") !important; }