.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.jpg"); background-repeat: repeat; background-position: left top; background-attachment: scroll; background-origin: content-box; background-size: contain; filter: brightness(104%); }

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

.card-wrapper.bg-shadow #card-banner::before { height: 60%; }

.card-wrapper.bg-shadow .t-shadow { text-shadow: 1px 1px 2px var(--color-primary),var(--color-primary) 1px 0px 10px; }

.card-wrapper.bg-shadow .bg-shadow::before { content: ""; display: block; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 50%; background-image: linear-gradient(rgba(255,255,255,0),rgb(var(--color-primary-raw))); background-color: initial; background-size: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-attachment: initial; }

#card-banner { aspect-ratio: 420 / 647; background-size: cover; background-position: center top; background-repeat: no-repeat; position: relative; text-align: center; }

#card-banner .decor { position: absolute; }

#card-banner .decor1 { width: 112px; left: -36px; bottom: 25%; }

#card-banner .decor2 { width: 137px; right: -30px; bottom: -20px; }

#card-banner .wedding-name-wrapper { position: absolute; bottom: 14%; text-align: center; width: 100%; }

#card-banner .wedding-name { font-family: "SVN Betalisa"; font-size: 40px; color: rgb(255, 255, 255); text-align: left; display: inline-block; word-break: break-word; line-height: 1.2; }

#card-banner .wedding-name .groom-shadow { opacity: 0; font-size: 55%; }

#card-banner .wedding-name .and { font-size: 60%; margin-right: 10px; }

#card-banner .wedding-date { font-family: Cormorantgaramond; font-size: 18px; line-height: 1.6; color: rgb(255, 255, 255); letter-spacing: 3px; text-align: center; position: absolute; bottom: 15px; width: 100%; }

#card-info { padding-bottom: 50px; }

#card-info .section-title-text { font-family: Montserrat, sans-serif; font-size: 13px; line-height: 2; color: rgb(0, 0, 0); text-align: center; padding: 30px 12px 5px; }

#card-info .groombride { position: relative; }

#card-info .groombride .decor-bird1 { opacity: 0.25; position: absolute; right: -50px; top: -20px; width: 200px; }

#card-info .groombride .decor-bird2 { opacity: 0.25; position: absolute; left: -50px; bottom: -60px; height: 250px; }

#card-info .groombride .decor-flower { position: absolute; top: 50%; transform: translateY(-60%); width: 280px; right: -20px; opacity: 0.25; }

#card-info .gb-box-wrapper .label { font-size: 19px; line-height: 1; color: var(--color-primary); padding: 16px; text-transform: uppercase; }

#card-info .gb-box-wrapper.groom { text-align: right; margin-top: 50px; }

#card-info .gb-box-wrapper.groom .gb-box { margin-left: auto; }

#card-info .gb-box { width: 80%; position: relative; }

#card-info .gb-box img { width: 100%; }

#card-info .gb-box .info { padding: 16px; color: rgb(255, 255, 255); left: 0px; top: 0px; position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; }

#card-info .gb-box .info .fullname { font-family: "SVN Betalisa"; font-size: 32px; line-height: 1.6; }

#card-info .gb-box .info .des { font-family: Montserrat, sans-serif; font-size: 11px; line-height: 2; text-align: justify; }

#card-info .lovestory-wrapper { margin-top: 80px; color: var(--text-color-primary); background-color: rgb(109, 2, 8); border-radius: 24px; padding: 50px 24px; position: relative; }

#card-info .lovestory-wrapper .title { padding-left: 24px; margin-bottom: 15px; }

#card-info .lovestory-wrapper .title span { display: inline-block; }

#card-info .lovestory-wrapper .title span:first-child { font-family: "SVN Betalisa"; font-size: 40px; line-height: 1.6; text-align: left; transform: translate(16px, -20px) rotate(-8deg); }

#card-info .lovestory-wrapper .title span:last-child { font-size: 18px; line-height: 1.6; letter-spacing: 1px; text-align: center; }

#card-info .lovestory-wrapper .content { font-family: Montserrat, sans-serif; font-size: 11px; line-height: 2; text-align: justify; }

#card-info .lovestory-wrapper .extra { position: absolute; height: 135px; width: 55px; text-align: center; padding-bottom: 8px; background-color: rgb(109, 2, 8); bottom: -136px; right: 50px; }

#card-info .lovestory-wrapper .extra img { position: absolute; width: 35px; bottom: 10px; left: 10px; }

#card-info .lovestory-wrapper .decor-bird3 { bottom: -250px; right: 60px; position: absolute; opacity: 0.25; width: 167px; }

#card-info .parents { padding: 0px 24px; }

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

#card-info .parents .title::before { content: ""; display: block; height: 80px; width: 2px; background-color: var(--color-primary); }

#card-info .parents .title > div { display: inline-block; font-size: 19px; line-height: 1.4; color: var(--color-primary); letter-spacing: 1px; text-align: left; text-transform: uppercase; margin: 8px 0px; font-weight: 700; }

#card-info .parents .content { position: relative; padding: 8px 0px 8px 30px; }

#card-info .parents .content::before { position: absolute; left: 0px; top: 0px; height: 100%; content: ""; display: block; width: 2px; background-color: var(--color-primary); }

#card-info .parents .parent-box { font-family: Montserrat, sans-serif; color: rgb(0, 0, 0); font-size: 13px; text-align: left; line-height: 1.8; }

#card-info .parents .parent-box + .parent-box { margin-top: 20px; }

#card-info .parents .parent-box + .parent-message { margin-top: 20px; }

#card-info .parents .parent-box .name { font-weight: bold; }

#card-info .parents .children { font-size: 18.75px; line-height: 1.4; color: var(--color-primary); letter-spacing: 1px; text-align: left; text-transform: uppercase; margin: 12px 0px; font-weight: 700; }

#card-info .divider-img { text-align: center; margin-top: 30px; margin-bottom: 40px; }

#card-info .divider-img img { width: 80px; }

.invitation-details.multiple-events { padding: 0px 10px; }

.invitation-details.multiple-events .invitation-event-box { border: 1px dashed var(--color-primary); border-radius: 30px; padding-bottom: 16px; }

.invitation-details.multiple-events .invitation-event-box + .invitation-event-box { margin-top: 50px; }

.invitation-details.multiple-events .invitation-event-box .event-title { font-size: 22px; margin-top: -20px; }

.invitation-details.multiple-events .invitation-event-box .event-title > div { display: inline-block; background: var(--color-primary); color: var(--text-color-primary); padding: 8px 16px; border-radius: 12px; margin-bottom: 5px; }

.invitation-event-box { color: var(--color-primary); padding: 0px 10px; }

.invitation-event-box .event-title { font-size: 24px; line-height: 1; text-align: center; text-transform: uppercase; }

.invitation-event-box .event-time { font-size: 24px; line-height: 1; text-align: center; text-transform: uppercase; }

.invitation-event-box .event-time span { font-size: 34px; }

.invitation-event-box .event-dayofweek { font-weight: 600; font-size: 20px; letter-spacing: 2px; text-align: center; text-transform: uppercase; margin-top: 20px; }

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

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

.invitation-event-box .event-box-date .month span { font-size: 26px; }

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

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

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

.invitation-event-box .event-box-date .day { font-weight: 600; font-size: 46.54px; letter-spacing: 2px; text-align: center; }

.invitation-event-box .event-box-date .year { font-size: 18px; font-weight: 500; line-height: 1.6; padding: 0px 12px; letter-spacing: 2px; text-align: center; position: relative; }

.invitation-event-box .event-box-date .year span { font-size: 26px; }

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

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

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

.invitation-event-box .event-lunar-date { margin-top: 10px; font-size: 16px; font-style: italic; line-height: 1.6; text-align: center; }

.invitation-event-box .event-location { text-align: center; margin-top: 24px; }

.invitation-event-box .event-location .name { font-size: 19px; line-height: 1.6; font-weight: 700; text-align: center; text-transform: uppercase; }

.invitation-event-box .event-location .address { font-family: Montserrat, sans-serif; font-size: 14px; line-height: 1.6; margin-top: 12px; text-align: center; }

.invitation-event-box .event-location .map-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; font-weight: 700; text-transform: uppercase; font-size: 17px; line-height: 1.6; text-align: center; gap: 3px; }

#card-calendar { text-align: center; position: relative; padding: 50px 8px; background-color: rgb(109, 2, 8); }

#card-calendar .card-section-title { font-size: 60px; color: var(--text-color-primary); text-align: center; font-family: "SVN Betalisa"; margin-bottom: 16px; line-height: 1; }

#card-calendar .calendar-header { font-family: Montserrat; text-transform: uppercase; color: var(--text-color-primary); font-size: 18px; margin-bottom: 0px; }

#card-calendar .mini_calendar { font-family: Montserrat; max-width: 360px; --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); --tb-color-wedding-day-text: var(--color-primary); }

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

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

#card-timeline { padding: 50px 0px; }

#card-timeline .card-section-title { font-size: 60px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: "SVN Betalisa"; }

#card-timeline .timeline { position: relative; }

#card-timeline .timeline::before { content: ""; display: block; width: 1px; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); background-color: var(--color-primary); }

#card-timeline .timeline-line { position: relative; display: flex; align-items: center; gap: 16px; padding: 24px 0px; }

#card-timeline .timeline-line:nth-child(2n) { flex-flow: row-reverse; }

#card-timeline .timeline-line:nth-child(2n) > div:last-child { text-align: right; }

#card-timeline .timeline-line:nth-child(2n+1) > div:first-child { text-align: right; }

#card-timeline .timeline-line .img { flex: 1 1 0%; }

#card-timeline .timeline-line .img img { width: 70px; }

#card-timeline .timeline-line .dot { width: 10px; height: 10px; background: var(--color-primary); border-radius: 10px; }

#card-timeline .timeline-line .content { color: var(--color-primary); flex: 1 1 0%; text-transform: uppercase; font-family: Montserrat; }

#card-timeline .timeline-line .content .time { font-weight: 600; line-height: 1; }

#card-gallery { padding: 0px 8px 50px; color: var(--color-primary); }

#card-gallery .card-section-title-wrapper { padding-top: 5px; }

#card-gallery .card-section-title { padding: 12px 0px; font-size: 42px; line-height: 1; margin-bottom: 0px; text-transform: uppercase; font-weight: 600; color: var(--color-primary); }

#card-gallery .card-section-title > span { text-transform: none; font-family: "SVN Betalisa"; font-weight: 500; line-height: 1; font-size: 70px; }

.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-gift { position: relative; overflow: hidden; padding-bottom: 50px; }

#card-gift .inner { position: relative; padding: 0px 16px 50px; border-bottom: 1px dashed var(--color-primary); }

#card-gift .card-section-title { font-size: 60px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: "SVN Betalisa"; }

#card-gift .card-section-subtitle { margin-bottom: 24px; color: var(--color-primary); text-align: center; font-family: Montserrat, sans-serif; font-size: 14px; margin-top: 10px; }

#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 { position: relative; --text-color-primary: var(--color-primary); }

#card-comments .decor-flower { position: absolute; opacity: 0.2; bottom: 0px; right: 0px; width: 115%; display: block; transform: scale(1.2); }

#card-comments .inner { padding: 0px 16px; }

#card-gift + #card-comments .inner .chuhy { display: none; }

#card-comments .inner .chuhy { text-align: center; margin-bottom: 12px; }

#card-comments .inner .chuhy img { width: 50px; }

#card-comments .card-section-title { font-size: 60px; line-height: 1.6; margin-bottom: 0px; color: var(--color-primary); text-align: center; font-family: "SVN Betalisa"; }

#card-comments .card-section-subtitle { margin-bottom: 24px; color: var(--color-primary); text-align: center; font-family: Montserrat, sans-serif; font-size: 14px; margin-top: 10px; }

#card-comments .comment-form { background-color: rgba(var(--color-primary-raw),0.25); font-family: Montserrat, sans-serif; }

#card-comments .comment-list { font-family: Montserrat, sans-serif; }

#countdown { border: 1px solid var(--color-primary); border-radius: 16px; padding-bottom: 10px; margin-top: 100px; position: relative; margin-bottom: 50px; }

#countdown .countdown-title { font-family: "SVN Betalisa"; position: absolute; top: -30px; left: 16px; z-index: 1; color: var(--color-primary); font-size: 40px; line-height: 1; }

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

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

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

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

#card-thankyou { background-color: var(--color-primary); color: var(--text-color-primary); text-align: center; }

#card-thankyou .thankyou-title { font-family: "SVN Betalisa"; font-size: 40px; }

#card-thankyou .thankyou-text { font-size: 14px; line-height: 1.6; text-align: center; margin-top: 20px; }

#card-thankyou .thankyou-text:empty { display: none; margin-top: 0px; }

#card-thankyou .card-thankyou-inner { padding: 0px 24px; }

@font-face { font-family: Cormorantgaramond; src: url("../font/cormorantgaramond-medium.ttf"); font-weight: 500; }

@font-face { font-family: Cormorantgaramond; src: url("../font/cormorantgaramond-semibold.ttf"); font-weight: 600; }

@font-face { font-family: Cormorantgaramond; src: url("../font/cormorantgaramond-bold.ttf"); font-weight: 700; }

@font-face { font-family: "SVN Betalisa"; src: url("../font/svn-betalisa.otf"); }

@font-face { font-family: "iCiel Novecento"; src: url("../font/icielnovecentosans-normal.ttf"); }

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

body { background-color: rgb(51, 51, 51); font-family: Cormorantgaramond; font-size: 16px; --color-primary: rgb(131, 4, 13); --text-color-primary: rgb(255, 255, 255); --color-primary-raw: 131, 4, 13; }

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

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

body img { max-width: 100%; }

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

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

#card-info .parents .title.has-guest > div { font-size: 14px; text-transform: none; }

#card-info .parents .title.has-guest > div:last-child { margin-top: 0px; }

#card-info .parents .title.has-guest > div.guest-name-wrapper .guest-name { margin-top: 5px; margin-bottom: 0px; }

#card-info .parents .title.has-guest > div.guest-name-wrapper .guest-name-label { text-transform: uppercase; }

#card-info .parents .title.has-guest .guest-name-wrapper .guest-name > div::after { left: 0px; }