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

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

.paper-bg { position: relative; }

.paper-bg::before { content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 0; background-image: url("../images/bg-paper.png"); background-repeat: repeat; background-position: left top; background-attachment: scroll; background-origin: content-box; background-size: contain; }

.paper-bg .inner { position: relative; z-index: 1; }

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

#card-banner .card-banner-inner { padding: 5px 12px 50px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; position: relative; color: rgb(255, 255, 255); z-index: 1; }

#card-banner::after { height: 260px; width: 100%; display: block; content: ""; position: absolute; bottom: 0px; left: 0px; background: linear-gradient(rgba(253, 251, 251, 0), rgba(1, 1, 1, 0.5)); }

#card-banner .wedding-text { font-family: flavinda-sfoob; font-size: 65px; line-height: 1.6; color: rgb(255, 255, 255); text-align: center; }

#card-banner .wedding-name { font-family: vip-ergisa; font-size: 48.31px; line-height: 1.3; color: rgb(255, 255, 255); text-transform: uppercase; text-align: center; position: relative; }

#card-banner .wedding-name > div { position: relative; }

#card-banner .wedding-name img { position: absolute; width: 115px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#card-banner .wedding-date { font-size: 25px; line-height: 1.6; color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 2px; text-align: center; margin-top: 32px; }

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

#card-save-the-date .card-save-the-date-inner .signature { text-transform: uppercase; margin-top: 32px; margin-bottom: 45px; line-height: 1; }

#card-save-the-date .card-save-the-date-inner .signature span { display: inline-block; position: relative; margin-left: -10%; font-family: vip-ergisa; font-size: 90px; }

#card-save-the-date .card-save-the-date-inner .signature span span { font-family: flavinda-sfoob; position: absolute; left: 0px; top: 22%; font-size: 75px; }

#card-save-the-date .card-save-the-date-inner .greeting { font-size: 20.65px; line-height: 1.4; color: rgb(134, 92, 36); text-transform: uppercase; text-align: center; }

#card-save-the-date .card-save-the-date-inner .save-the-date { font-size: 39.16px; line-height: 1.4; text-transform: uppercase; }

#card-save-the-date .card-save-the-date-inner .save-the-date > span { display: inline-block; }

#card-save-the-date .card-save-the-date-inner .save-the-date .the { font-family: flavinda-sfoob; font-size: 42.72px; line-height: 1.4; text-transform: none; text-align: center; }

#card-save-the-date .card-save-the-date-inner .wedding-date { font-size: 26px; line-height: 1.6; text-transform: uppercase; letter-spacing: 2px; text-align: center; }

#card-save-the-date .card-save-the-date-inner .vertical-line { position: relative; text-align: center; }

#card-save-the-date .card-save-the-date-inner .vertical-line::before { content: ""; height: 50px; background-color: var(--color-primary); width: 2px; margin: 12px auto; display: inline-block; }

#stack-photos .img-frame { position: relative; display: inline-block; background: rgb(255, 255, 255); padding: 10px 10px 50px; box-shadow: rgba(0, 0, 0, 0.08) -3px 10px 10px -3px; }

#stack-photos .img-frame .img { width: 220px; position: relative; aspect-ratio: 245 / 270; background-size: cover; background-position: center center; background-repeat: no-repeat; }

#stack-photos .stack-photos-wrapper { position: relative; display: inline-block; margin-left: 50px; margin-top: 30px; margin-bottom: 30px; }

#stack-photos .stack-photos-wrapper .back { transform: rotate(-6deg) translate(-60px, 30px); }

#stack-photos .stack-photos-wrapper .back img { position: absolute; height: 100%; left: -15%; top: -10%; }

#stack-photos .stack-photos-wrapper .front { position: absolute; top: 0px; left: 0px; z-index: 1; transform: rotate(6deg); }

#stack-photos .stack-photos-wrapper .front img { position: absolute; width: 100%; bottom: -15%; right: -25%; transform: rotate(6deg); z-index: 2; }

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

#card-info .decor-flower-top { position: absolute; top: 0px; right: 0px; width: 60%; }

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

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

#card-info .parents { margin-top: 50px; margin-bottom: 36px; display: flex; align-items: start; justify-content: center; }

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

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

#card-info .parents .v-divider { height: 100px; background-color: var(--color-primary); width: 2px; margin: 0px 20px; }

#card-info .names { margin-top: 24px; margin-bottom: 24px; }

#card-info .names .name { font-size: 40px; line-height: 1.3; text-transform: uppercase; }

#card-info .names .and { font-family: flavinda-sfoob; font-size: 59px; line-height: 45px; margin-top: -4px; margin-bottom: 4px; display: inline-block; position: relative; }

#card-info .names .and::before { content: ""; background-image: url("../images/flower.png"); display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain; position: absolute; right: -26px; top: 8px; }

#card-info .event-box .event-box-title { line-height: 1.5; text-transform: uppercase; text-align: center; margin-bottom: 20px; }

#card-info .event-box .event-box-date { display: flex; align-items: center; justify-content: center; gap: 8px; }

#card-info .event-box .event-box-date .month { font-weight: 500; font-size: 18px; line-height: 1.6; letter-spacing: 0px; text-align: center; position: relative; }

#card-info .event-box .event-box-date .month::before, #card-info .event-box .event-box-date .month::after { content: ""; position: absolute; left: 0px; width: 100%; }

#card-info .event-box .event-box-date .month::before { bottom: -5px; border-bottom: 1px solid var(--color-primary); }

#card-info .event-box .event-box-date .month::after { top: -5px; border-top: 1px solid var(--color-primary); }

#card-info .event-box .event-box-date .day { font-weight: 500; font-size: 46.54px; letter-spacing: 2px; text-align: center; line-height: 1; }

#card-info .event-box .event-box-date .year { font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: 2px; text-align: center; position: relative; }

#card-info .event-box .event-box-date .year::before, #card-info .event-box .event-box-date .year::after { content: ""; position: absolute; left: 0px; width: 100%; }

#card-info .event-box .event-box-date .year::before { bottom: -5px; border-bottom: 1px solid var(--color-primary); }

#card-info .event-box .event-box-date .year::after { top: -5px; border-top: 1px solid var(--color-primary); }

#card-info .event-box .lunar-date { line-height: 1.6; text-align: center; margin-bottom: 20px; margin-top: 5px; font-style: italic; }

#card-info .event-box .hotel { margin-top: 12px; font-size: 24px; text-transform: uppercase; font-weight: 700; }

#card-info .event-box .address { font-size: 16px; font-style: italic; }

#card-info .event-box .btn { margin: 16px auto auto; display: inline-block; text-transform: uppercase; font-weight: 700; color: var(--color-primary); font-size: 110%; }

#card-info .event-separator { margin: 24px auto; }

#card-info .event-separator img { width: 180px; opacity: 0.5; }

#love-story { position: relative; color: rgb(255, 255, 255); }

#love-story .inner { position: absolute; width: 100%; height: 100%; z-index: 1; top: 0px; left: 0px; display: flex; flex-direction: column; text-align: center; padding: 12px; }

#love-story .love-story-paragraph { flex: 1 1 0%; font-size: 12px; line-height: 1.6; padding: 16px; }

#love-story .love-story-title { font-family: flavinda-sfoob; font-size: 70px; }

#groom-bride { position: relative; }

#groom-bride .decor-flower-top { position: absolute; top: -5%; right: 0px; width: 40%; }

#groom-bride .decor-flower-bottom { position: absolute; bottom: 0px; left: 0px; width: 40%; }

#groom-bride .inner { padding: 80px 24px; }

#groom-bride .info { position: relative; color: var(--text-color-primary); padding-left: 12px; }

#groom-bride .info .label { font-size: 40px; line-height: 1; font-weight: 500; font-family: vip-arcittya-begatri; }

#groom-bride .info .name { font-size: 26px; text-transform: uppercase; }

#groom-bride .info .dob { font-size: 20px; }

#groom-bride .info.right { margin-top: -6px; padding-left: 40%; }

#groom-bride .groom-bride { color: var(--color-primary); margin: 30px 0px; }

#groom-bride .groom-bride .groom { display: flex; }

#groom-bride .groom-bride .groom .img, #groom-bride .groom-bride .groom .info { width: 50%; }

#groom-bride .groom-bride .groom .img .img-inner { width: calc(100% + 12px); transform: rotate(-9deg) translate(-5px, 24px); }

#groom-bride .groom-bride .bride { display: flex; }

#groom-bride .groom-bride .bride .img .button { width: 76px; position: absolute; right: -35px; bottom: -10px; z-index: 1; }

#groom-bride .groom-bride .bride .img, #groom-bride .groom-bride .bride .info { width: 50%; }

#groom-bride .groom-bride .img { position: relative; flex: 1 1 0%; text-align: center; z-index: 1; }

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

#groom-bride .groom-bride .img .img-inner img { position: relative; aspect-ratio: 330 / 400; object-fit: cover; object-position: center center; }

#groom-bride .groom-bride .img:last-child { transform: rotate(20deg) translate(-15%, -15%); z-index: 0; }

#timeline .inner { padding: 50px 0px 16px; }

#timeline .title-wrapper { padding: 0px 16px; text-align: right; color: var(--text-color-primary); margin-bottom: 32px; }

#timeline .title-wrapper .tl { font-size: 40.92px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0px; text-align: left; }

#timeline .title-wrapper .wd { font-family: flavinda-sfoob; font-size: 57.88px; line-height: 1; position: relative; display: inline-block; margin-left: auto; }

#timeline .title-wrapper .wd img { position: absolute; width: 85px; left: -8px; top: -100px; }

#timeline .timelines { margin: auto; max-width: 390px; padding: 16px; }

#timeline .timelines .timeline-box { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

#timeline .timelines .timeline-box .img { width: 60px; text-align: left; }

#timeline .timelines .timeline-box .img img { max-width: 100%; }

#timeline .timelines .timeline-box .horizontal-line { width: 80px; border-top: 2px solid var(--color-primary); display: inline-block; }

#timeline .timelines .timeline-box .content { flex: 1 1 0%; color: var(--color-primary); }

#timeline .timelines .timeline-box .content .time { font-size: 30px; line-height: 1.6; text-align: left; }

#timeline .timelines .timeline-box .content .text { font-size: 14px; line-height: 1.6; text-align: left; }

#card-gallery .inner { padding: 50px 0px; }

#card-gallery .title-wrapper { padding: 0px 16px; text-align: left; color: var(--text-color-primary); line-height: 1; margin-bottom: 32px; }

#card-gallery .title-wrapper .al { font-size: 65px; text-transform: uppercase; letter-spacing: 0px; text-align: left; }

#card-gallery .title-wrapper .al.love { text-align: right; display: block; margin-top: -10px; }

#card-gallery .title-wrapper .of { font-family: silenter; font-size: 77px; transform: translateY(-10px); position: relative; display: inline-block; }

#card-gallery .title-wrapper .of img { position: absolute; width: 40px; top: -10px; right: -20px; }

#card-gallery .love-text { font-size: 50vw; font-weight: 900; font-family: BBHHegarty; line-height: 0.77; background-size: cover; background-position: center center; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-align: center; letter-spacing: 10px; margin-bottom: 50px; }

#card-gallery .love-text > div:first-child { font-size: 52vw; }

.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-thankyou { position: relative; }

#card-thankyou .card-thankyou-inner { background-image: linear-gradient(rgba(253, 251, 251, 0), rgba(0, 0, 0, 0.58)); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 24px 24px 32px; z-index: 1; color: rgb(255, 255, 255); }

#card-thankyou .card-thankyou-inner .thankyou-title { font-family: flavinda-sfoob; font-size: 58px; line-height: 1.6; text-align: center; }

#card-thankyou .card-thankyou-inner .thankyou-text { font-size: 13px; line-height: 1.6; text-align: center; }

#card-comments { position: relative; }

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

#card-comments .card-section-title { font-size: 40px; margin-bottom: 10px; color: var(--color-primary); text-align: center; text-transform: uppercase; }

#card-comments .card-section-subtitle { margin-bottom: 24px; color: var(--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); }

#countdown { margin-top: 50px; }

#countdown .countdown-title { font-family: flavinda-sfoob; font-size: 60px; line-height: 1; color: var(--text-color-primary); text-align: center; margin-bottom: 8px; }

#countdown .countdown-title > div { position: relative; display: inline-block; }

#countdown .countdown-title > div img { width: 70px; position: absolute; right: 0px; top: 0px; }

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

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

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

#countdown .box { font-size: 36px; color: var(--text-color-primary); letter-spacing: 1px; text-align: center; min-width: 48px; }

#card-calendar { text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid rgba(var(--color-primary-raw),0.2); }

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

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

#card-calendar .calendar-header .year { font-family: Ergisa; font-size: 100px; line-height: 1; color: var(--color-primary); text-align: center; letter-spacing: 2px; display: inline-block; position: relative; }

#card-calendar .calendar-header .year img { position: absolute; width: 60px; right: -10px; top: -20px; }

#card-calendar .calendar-header .month { font-family: flavinda-sfoob; font-size: 68px; line-height: 1; color: var(--color-primary); text-align: center; margin-top: -40px; }

#card-calendar .mini_calendar { --tb-border-color: transparent; --tb-color: var(--color-primary); --tb-day-color: var(--color-primary); --tb-header-color: var(--color-primary); --tb-color-wedding-day: var(--color-primary); }

#card-calendar .mini_calendar th { text-transform: uppercase; }

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

@media screen and (min-width: 480px) {
  #stack-photos .img-frame .img { width: 250px; }
  #card-info .names .name { font-size: 46px; }
  #card-info .names .and { font-size: 65px; }
  #card-gallery .love-text { font-size: 250px; }
  #card-gallery .love-text > div:first-child { font-size: 260px; }
}

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

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

@font-face { font-family: lora; src: url("../font/lora.ttf"); font-weight: 400; }

@font-face { font-family: vip-arcittya-begatri; src: url("../font/vip-arcittya-begatri.otf"); }

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

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

body { background-color: rgb(51, 51, 51); font-family: lora; font-size: 16px; --color-primary: rgb(141, 95, 37); --text-color-primary: rgb(141, 95, 37); --color-primary-raw: 141, 95, 37; }

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

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

body img { max-width: 100%; }

#card-info .parents .parent { flex: 1 1 0%; }

#card-info .parents.hide-titles .name-title { display: none; }

#card-info .multiple-events { display: flex; flex-direction: column; }

#card-info .multiple-events hr { margin: 32px 0px; border-style: dashed; opacity: 1; }

#card-info .multiple-events .event-box { position: relative; }

#card-gift { position: relative; overflow: hidden; padding-bottom: 50px; }

#card-gift .inner { position: relative; padding: 50px 20px; z-index: 1; border-bottom: 1px solid var(--color-primary); }

#card-gift .card-section-title { font-size: 40px; margin-bottom: 10px; color: var(--color-primary); text-align: center; text-transform: uppercase; }

#card-gift .card-section-subtitle { margin-bottom: 24px; color: var(--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-banks { position: relative; overflow: hidden; padding-bottom: 50px; }

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

#card-banks .card-section-title { font-size: 40px; margin-bottom: 10px; color: var(--color-primary); text-align: center; text-transform: uppercase; }

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

.bank-list { display: flex; flex-direction: column; gap: 24px; }

.bank-list .bank-box { flex: 1 1 0%; padding: 16px; border: 2px dashed var(--color-primary); border-radius: 12px; text-align: center; color: var(--color-primary); }

.bank-list .bank-box.single { border: 0px; }

.bank-list .bank-box .title { text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }

.bank-list .bank-box .qr-code img { width: 100%; display: block; cursor: zoom-in; margin: auto; max-width: 300px; }

.bank-list .bank-box.single .qr-code img { max-width: 85%; }

.bank-list .bank-box .info > div { margin: 10px 0px; }

.bank-list .bank-box .info > div:last-child { margin-bottom: 0px; }

#card-info .parents .parent { margin-top: 5px; }

#card-info .parents .parent .label { font-weight: 500; margin-bottom: 2px; }

.korean #groom-bride .info .label { font-family: lora; font-size: 20px; opacity: 0.6; }

.korean #timeline .timelines .timeline-box .content .text { font-size: 18px; }

.korean #card-info .parents .parent { font-size: 16px; }

#card-save-the-date .card-save-the-date-inner { padding: 30px 12px; }

#card-save-the-date .card-save-the-date-inner .greeting { font-size: 20px; }