/* Exclusive - 03 (NANDA) */
body.nanda {

    /* Body Height */
    --body-height: 100vh;

    /* Heading Family */
    --heading-family: "Elsie Swash Caps", serif;
    --heading-style: normal;
    --heading-weight: 400;
    --heading-size: calc(10vw + .96px);
    --heading-lettercase: normal;

    /* Body Text */
    --body-text-family: "Crimson Text", serif;
    --body-text-style: normal;
    --body-text-weight: 400;
    --body-text-size: calc(4.1vw - .0064px);
    --body-text-lettercase: none;

    /* Font Size Extra */
    --fs-extra-1: 2px; 
    --fs-extra-2: 4px;
    --fs-extra-3: 5px;
    --fs-extra-4: 6px;
    --fs-extra-5: 10px;
    --fs-extra-6: 12px;
    --fs-extra-7: 15px;
    --fs-extra-8: 20px;
}
body.nanda h1,
body.nanda h2,
body.nanda h3,
body.nanda h4,
body.nanda h5,
body.nanda h6 {
    font-size: var(--heading-size);
    font-family: var(--heading-family);
    font-weight: 400;
    line-height: normal;
    color: var(--text-primary);
    text-transform: var(--heading-lettercase);
}
body.nanda p {
    font-family: var(--body-text-family );
    font-size: var(--body-text-size);
    line-height: normal;
    font-weight: 400;
    color: var(--text-secondary);
    text-transform: var(--body-text-lettercase);
}
body.nanda sup {
    font-family: inherit;
    font-size: 0.7em;
    color: inherit;
}
body.nanda font {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: inherit;
    font-style: inherit;
}

/* img */
body.nanda img {
    max-width: 100%;
}

/* Original */
body.nanda.original {

    /* Hex Color */
    --background-primary: #F4EBDC;
    --background-secondary: #D6A59A;   
    --background-tertiary: #FFFFFF;

    --text-primary: #E2B744;
    --text-secondary : #0D2A30;
    --text-tertiary: #FFFFFF;

    --button-text-primary: #F4EBDC;
    --button-background-primary: #E2B744;
    --button-text-secondary: #0D2A30;
    --button-background-secondary: #D6A59A;

    /* RGB Color */
    --background-primary-rgb: 244, 235, 220;
    --background-secondary-rgb: 214, 165, 154;
    --background-tertiary-rgb: 255, 255, 255;

    --text-primary-rgb: 226, 183, 68;
    --text-secondary-rgb: 13, 42, 48;
    --text-tertiary-rgb: 255, 255, 255;

    --button-text-primary-rgb: 244, 235, 220;
    --button-background-primary-rgb: 226, 183, 68;
    --button-text-secondary-rgb: 13, 42, 48;
    --button-background-secondary-rgb: 214, 165, 154;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-03/01/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-03/01/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-03/01/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-03/01/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-03/01/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-03/01/orn-06.png");
    --orn-07: url("https://katsudoto.id/media/template/exclusive-03/01/orn-07.png");
    --orn-08: url("https://katsudoto.id/media/template/exclusive-03/01/orn-08.png");

    --orn-cover-desktop: url("https://katsudoto.id/media/template/exclusive-03/01/orn-cover-desktop.png");
    --orn-cover-tablet: url("https://katsudoto.id/media/template/exclusive-03/01/orn-cover-tablet.png");
    --orn-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/01/orn-cover-mobile.png");

    /* BACKGROUND IMAGE */
    --bg-cover: url("https://katsudoto.id/media/template/exclusive-03/01/bg-cover.png");
    --bg-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/01/bg-cover-mobile.png");
    --bg-countdown: url("https://katsudoto.id/media/template/exclusive-03/01/bg-savedate-min.png");
    --bg-groom: url("https://katsudoto.id/media/template/exclusive-03/01/bg-groom.png");
    --bg-bride: url("https://katsudoto.id/media/template/exclusive-03/01/bg-bride.png");
    --bg-palace: url("https://katsudoto.id/media/template/exclusive-03/01/bg-palace.png");

}


/* Toska */
body.nanda.toska {

    /* Hex Color */
    --background-secondary: #91b6bb;
    --button-background-primary: #5f8b91;
    --text-tertiary: #e1cbd9;
    --button-background-secondary: #994078;
    --background-tertiary: #e2b744;
    --background-primary: #faf3f7;

    /* RGB Color */
    --background-secondary-rgb: 145, 182, 187;
    --button-background-primary-rgb: 95, 139, 145;
    --text-tertiary-rgb: 225, 203, 217;
    --button-background-secondary-rgb: 153, 64, 120;
    --background-tertiary-rgb: 226, 183, 68;
    --background-primary-rgb: 250, 243, 247;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-03/02/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-03/02/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-03/02/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-03/02/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-03/02/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-03/02/orn-06.png");
    --orn-07: url("https://katsudoto.id/media/template/exclusive-03/02/orn-07.png");
    --orn-08: url("https://katsudoto.id/media/template/exclusive-03/02/orn-08.png");

    --orn-cover-desktop: url("https://katsudoto.id/media/template/exclusive-03/02/orn-cover-desktop.png");
    --orn-cover-tablet: url("https://katsudoto.id/media/template/exclusive-03/02/orn-cover-tablet.png");
    --orn-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/02/orn-cover-mobile.png");

    /* BACKGROUND IMAGE */    
    --bg-cover: url("https://katsudoto.id/media/template/exclusive-03/02/bg-cover.png");
    --bg-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/02/bg-cover-mobile.png");
    --bg-countdown: url("https://katsudoto.id/media/template/exclusive-03/02/bg-countdown.png");    
    --bg-bride: url("https://katsudoto.id/media/template/exclusive-03/02/bg-bride.png");
    --bg-groom: url("https://katsudoto.id/media/template/exclusive-03/02/bg-groom.png");
    --bg-palace: url("https://katsudoto.id/media/template/exclusive-03/02/bg-palace.png");

}


/* Moss */
body.nanda.moss {

    /* Hex Color */

    --bg-light-01: #faf3f7;
    --bg-light-02: #fff9ef;

    --background-secondary: #9d9d7b;
    --button-background-primary: #868658;
    --text-tertiary: #f5ead7;
    --button-background-secondary: #c7b27b;
    --background-tertiary: #e2b744;
    --background-primary: #fff9ef;

    /* RGB Color */
    --background-secondary-rgb: 157, 157, 123;
    --button-background-primary-rgb: 134, 134, 88;
    --text-tertiary-rgb: 245, 234, 215;
    --button-background-secondary-rgb: 199, 178, 123;
    --background-tertiary-rgb: 226, 183, 68;
    --background-primary-rgb: 255, 249, 239;

    /* ORNAMENT */
    --orn-01: url("https://katsudoto.id/media/template/exclusive-03/03/orn-01.png");
    --orn-02: url("https://katsudoto.id/media/template/exclusive-03/03/orn-02.png");
    --orn-03: url("https://katsudoto.id/media/template/exclusive-03/03/orn-03.png");
    --orn-04: url("https://katsudoto.id/media/template/exclusive-03/03/orn-04.png");
    --orn-05: url("https://katsudoto.id/media/template/exclusive-03/03/orn-05.png");
    --orn-06: url("https://katsudoto.id/media/template/exclusive-03/03/orn-06.png");
    --orn-07: url("https://katsudoto.id/media/template/exclusive-03/03/orn-07.png");
    --orn-08: url("https://katsudoto.id/media/template/exclusive-03/03/orn-08.png");

    --orn-cover-desktop: url("https://katsudoto.id/media/template/exclusive-03/03/orn-cover-desktop.png");
    --orn-cover-tablet: url("https://katsudoto.id/media/template/exclusive-03/03/orn-cover-tablet.png");
    --orn-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/03/orn-cover-mobile.png");

    /* BACKGROUND IMAGE */    
    --bg-cover: url("https://katsudoto.id/media/template/exclusive-03/03/bg-cover.png");
    --bg-cover-mobile: url("https://katsudoto.id/media/template/exclusive-03/03/bg-cover-mobile-new.jpg");
    --bg-countdown: url("https://katsudoto.id/media/template/exclusive-03/03/bg-countdown.png");    
    --bg-bride: url("https://katsudoto.id/media/template/exclusive-03/03/bg-bride.png");
    --bg-groom: url("https://katsudoto.id/media/template/exclusive-03/03/bg-groom.png");
    --bg-palace: url("https://katsudoto.id/media/template/exclusive-03/03/bg-palace.png");

}

@media (min-width: 560px) and (max-width: 960px) {
    body.nanda {
        --heading-size: 44px;
        --body-text-size: 20px;
    }
}

@media (min-width: 961px) {
    body.nanda {
        --heading-size: 44px;
        --body-text-size: 22px;
    }
}

body {
    overflow: hidden;
}

html {
    scroll-behavior: smooth;
}

body font {
    font-family: inherit;
}


/* Top Cover */
.top-cover {
    background-color: var(--text-tertiary);
    width: 100%;
    /* height: 100vh; */
    height: var(--body-height);
    /* position: relative; */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    opacity: 1;
    
    transition: all 1.8s;
    transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -webkit-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -moz-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
    -o-transition-timing-function: cubic-bezier(.23,.56,.38,.78);
}
.top-cover.hide {
    top: -120%;
    bottom: 120%;
    pointer-events: none;
}
.top-cover .inner {
    width: 100%;
    height: 100%;    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}

.top-cover .inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}
.top-cover.overlay-2 .inner::before {
    background: rgba(0, 0, 0, 0.05);
}
.top-cover.overlay-1 .inner::before {
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) );
}
.top-cover.no-overlay .inner::before {
    content: none;
}

.top-cover .inner .details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 10px;
    position: relative;
    /* background-color: lightgrey; */
}
.top-cover .inner .details > div {
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px;
}
.top-cover .inner .details .text-01 {
    font-size: var(--heading-size);
    font-family: var(--heading-family);
    font-weight: 400;
    line-height: normal;
    color: var(--text-primary);
    text-transform: var(--heading-lettercase);
}
.top-cover .inner .details .text-02 {
    font-family: var(--body-text-family );
    font-size: var(--body-text-size);
    line-height: normal;
    font-weight: 400;
    color: var(--text-tertiary);
    text-transform: var(--body-text-lettercase);
}

/* Cover free text */
section.top-cover .cover-free-text {
    font-family: var(--body-text-family);   
    font-size: calc(var(--body-text-size));
    text-transform: var(--body-text-lettercase);
    color: var(--text-tertiary);
}

.top-cover .inner .details .link-01 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: normal;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 7px;
    margin: 0;
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    transition: all 0.35s ease-in-out;
}
.top-cover .inner .details .link-01:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
.top-cover > .cover-show {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: #fff;
}
.top-cover > .cover-show .slick-list {
    width: 100%!important;
    height: 100%!important;
}
.top-cover > .cover-show .slick-track {
    width: 100%!important;
    height: 100%!important;
    position: relative!important;
}
.top-cover > .cover-show .picture-outer {
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
}
.top-cover > .cover-show .picture-outer img {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
    /* animation: zoom-out 40s infinite; */
    /* filter: blur(1px);
    -webkit-filter: blur(1px); */
}


@keyframes zoom-out {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}





/* COVER */
.cover {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--text-tertiary);
    background-image: var(--bg-cover);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cover .cover-inner {
    position: relative;
    width: 100%;
    min-height: var(--body-height);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 30px 0;
}
/* Cover Greet */
.cover .cover-inner .cover-greet {
    padding: 10px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: lightskyblue; */
}
.cover .cover-inner .cover-greet .orn.orn-01 {
    /* width: 250px;
    height: 60px; */

    /* width: clamp(200px, 3%, 250px);
    height: clamp(40px, 3%, 55px); */

    width: 50vw;
    /* width: 180px; */
    /* height: min(30vw, 50px); */
    height: 50px;
    /* max-height: 55px; */
    display: block;
    /* margin: 0 auto; */
    background-image: var(--orn-01);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 0.5em;
}
.cover .cover-inner .cover-greet .logo {
    /* width: 60px;
    height: 60px; */
    /* width: clamp(45px, 3%, 80px);
    max-height: 50px; */

    min-width: 60px;
    max-height: 55px;

    object-fit: contain;
    object-position: center;
    /* margin: 0 auto; */
    display: block;
    margin-bottom: 0.5em;
}
.cover .cover-inner .cover-greet .text-01 {
    display: inline-block;
    font-family: var(--body-text-family);   
    font-size: calc(var(--body-text-size)  + var(--fs-extra-4) + var(--fs-extra-1));
    text-transform: var(--body-text-lettercase);
    line-height: normal;
    color: var(--text-secondary);
}

/* Cover Picture */
.cover .cover-inner .cover-picture {
    margin: 20px 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cover .cover-inner .cover-picture .cover-show {
    /* width: 1024px;
    height: 530px; */

    /* max-width: 1024px;
    max-height: calc(1024px / 2); */

    /* max-width: calc((100vh / 2) * 2); */
    max-height: calc(var(--body-height) / 2);

    max-width: min(80vw, calc((var(--body-height) / 2) * 2));
    max-height: min(calc(80vw / 2), calc(var(--body-height) / 2));

    width: calc(((var(--body-height) * 70) / 100) * 2);
    /* height: 70vh; */
    height: calc((var(--body-height) * 70) / 100);
    
    position: relative;
    display: block;
    margin: 0 auto;

    background: #fff;
}
.cover .cover-picture > .cover-show .slick-list {
    width: 100%!important;
    height: 100%!important;
}
.cover .cover-picture > .cover-show .slick-track {
    width: 100%!important;
    height: 100%!important;
    position: relative!important;
}
.cover .cover-inner .cover-picture .cover-show::before {
    content: '';
    /* width: 106%;
    height: 112%; */
    width: 112%;
    height: 112%;
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--orn-cover-desktop);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.cover .cover-inner .cover-picture .cover-show .picture-outer {
    width: 100%!important;
    height: 100%!important;
    overflow: hidden;
    top: 0;
    left: 0;
    position: absolute!important;
}
.cover .cover-inner .cover-picture .cover-show .picture-outer .picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.cover .cover-inner .cover-picture .cover-show .picture-outer .picture[src*=".png"] {
    object-fit: contain;
}

/* Cover BrideGroom */
.cover .cover-inner .cover-bridegroom {
    padding: 10px;
    width: 100%;
    text-align: center;
}
.cover .cover-inner .cover-bridegroom .text-01,
.cover .cover-inner .cover-bridegroom .text-02 {
    font-family: var(--body-text-family);   
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    color: var(--text-secondary);
}
.cover .cover-inner .cover-bridegroom .text-02 sup {
    font-size: calc(var(--body-text-size) - var(--fs-extra-2));
}
.cover .cover-inner .cover-bridegroom .title-01 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    font-weight: 500;
    text-transform: var(--heading-lettercase);

    color: var(--text-primary);
    margin: .05em 0 0.1em 0;
    letter-spacing: 1px;
}
.cover .cover-inner .cover-bridegroom .rsvp-link {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: normal;
    text-decoration: none;
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    display: inline-block;
    padding: 8px 12px;
    border-radius: 7px;
    margin: 0.5em auto;
    transition: all 0.25s ease-in-out;
}
.cover .cover-inner .cover-bridegroom .rsvp-link:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}



@media only screen and (max-width: 1366px) {

    .cover .cover-inner .cover-picture .cover-show {
        /* width: calc(50vh * 2);
        height: 50vh; */
    }

}




/* Greetings */
.greetings {
    background: var(--background-secondary);
    padding: 0;
    position: relative;
    overflow: hidden;
    height: 100px;
}
.greetings .texture-crown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 80px;
    background-image: var(--orn-02);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    display: block;
}

@media only screen and (min-width: 1024px) {
    .greetings {
        height: 120px;
    }
}





/* BRIDEGROOM */
section.bridegroom {
    background: var(--background-tertiary);
    width: 100%;
    padding: 40px 0 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
section.bridegroom .bridegroom-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px 10px;
}
/* HEAD */
section.bridegroom .bridegroom-inner .head {
    width: 960px;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
}
section.bridegroom .bridegroom-inner .head .title-01 {
    font-size: var(--heading-size);

    font-family: var(--heading-family);
    font-weight: 500;
    color: var(--button-background-secondary);
    position: relative;
    margin-bottom: 0.15em;
    letter-spacing: 1px;
}
body.moss section.bridegroom .bridegroom-inner .head .title-01 {
    color: var(--background-tertiary);
}
section.bridegroom .bridegroom-inner .head .text-01 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-style: var(--body-text-style);
    color: var(--text-secondary);
    text-transform: var(--body-text-lettercase);
}
/* BODY */
.bridegroom .bridegroom-inner .body {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-direction: row;
    padding: 10px;

    position: relative;
}
.bridegroom .bridegroom-inner .body.bride-first {
    flex-direction: row-reverse;   
}
.bridegroom .bridegroom-inner .body .groom,
.bridegroom .bridegroom-inner .body .bride {
    /* width: 720px; */
    width: min(40%, 720px);
    overflow: hidden;
    
}
.bridegroom .bridegroom-inner .body .bridegroom-border {
    width: clamp(210px, 18vw, 300px);
    height: clamp(235px, 21vw, 350px);
    margin: 15px auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.bridegroom .bridegroom-inner .body .bridegroom-border::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(3) .bridegroom-border::before,
.bridegroom .bridegroom-inner .body > div:nth-of-type(1) .bridegroom-border::before {
    background-image: var(--bg-bride);
    left: -12%;
    bottom: -4%;
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(1) .bridegroom-border::before,
.bridegroom .bridegroom-inner .body div:nth-of-type(3) .bridegroom-border::before {
    background-image: var(--bg-groom);
    bottom: -4%;
    right: -12%;
    padding: 0;
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(1) .bridegroom-border::before {
    left: auto;
}
.bridegroom .bridegroom-inner .body.bride-first > div:nth-of-type(3) .bridegroom-border::before {
    right: auto;
}
.bridegroom .bridegroom-inner .body .bridegroom-border .bridegroom-picture {
    /* width: 358px;
    height: 464px; */

    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    position: relative;
    z-index: 10;
    background: var(--background-secondary);
}
/* Separator */
.bridegroom .bridegroom-inner .body .bridegroom-separator {
    padding: 5px;
    font-family: var(--heading-family);
    font-size: calc(var(--heading-size) * 2);
    font-weight: 500;
    color: rgba(var(--text-secondary-rgb), 0.7);

    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
}
body.toska .bridegroom .bridegroom-inner .body .bridegroom-separator {
    color: var(--text-tertiary);
}
/* Details */
.bridegroom .bridegroom-inner .body .bridegroom-details {
    padding: 10px;
    text-align: center;
}
.bridegroom .bridegroom-inner .body .bridegroom-details .title-01 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    font-weight: 500;
    margin-bottom: 0.2em;
    color: var(--text-primary);
    text-transform: var(--heading-lettercase);
}
.bridegroom .bridegroom-inner .body .bridegroom-details .text-01,
.bridegroom .bridegroom-inner .body .bridegroom-details .text-02 {
    font-family: var(--body-text-family);    
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    color: var(--text-secondary);
    margin-bottom: .25em;
}
.bridegroom .bridegroom-inner .body .bridegroom-details .text-02 {
    font-style: var(--body-text-style);
}
.bridegroom .bridegroom-inner .body .bridegroom-details .link-01 {
    text-decoration: none;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.bridegroom .bridegroom-inner .body .bridegroom-details .link-01:hover {
    text-decoration: underline;
}
.bridegroom .bridegroom-inner .body .bridegroom-details .link-01 i {
    font-size: calc(var(--body-text-size) - 7px);
    margin-right: 8px;
}




/* SAVE THE DATE */
section.save-date {
    width: 100%;
    background-color: var(--background-primary);
    background-image: var(--bg-countdown);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
section.save-date .inner {
    width: 720px;
    display: block;
    margin: 0 auto;
    padding: 20px 0;
}
/* HEAD */
section.save-date .inner .head {
    padding: 20px;
    text-align: center;
}
section.save-date .inner .head .title-01 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    text-transform: var(--heading-lettercase);
    color: var(--text-secondary);
}
section.save-date .inner .head .text-01 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    color: var(--text-secondary);
}

body.toska section.save-date .inner .head .title-01,
body.toska section.save-date .inner .head .text-01,
body.moss section.save-date .inner .head .title-01,
body.moss section.save-date .inner .head .text-01 {
    color: var(--text-tertiary);
}

section.save-date .inner .head .text-01 sup {
    font-size: 12px;
}
/* BODY */
section.save-date .inner .body {
    background: transparent;
}
/* SCHEDULE */
section.save-date .inner .body .schedule {
    width: 100%;
    padding: 20px 0;
    position: relative;
}
section.save-date .inner .body .schedule::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000%;
    height: 50px;
    background: #E2B744;
}
section.save-date .inner .body .schedule .countdown {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
section.save-date .inner .body .schedule .countdown .countdown-time {
    width: 100px;
    height: 120px;
    background-image: var(--orn-03);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 5px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section.save-date .inner .body .schedule .countdown .countdown-time h1 {
    font-family: var(--heading-family);
    font-size: calc(var(--heading-size) - 5px);

    /* line-height: 50px; */
    color: var(--text-secondary);
    letter-spacing: 1px;
}
section.save-date .inner .body .schedule .countdown .countdown-time small {
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size) - 10px);
    letter-spacing: 1px;
    color: var(--text-secondary);
}
section.save-date .inner .foot {
    padding: 20px 0;
    display: block;
    text-align: center;
}
section.save-date .inner .foot .link-01 {
    background: var(--button-background-secondary);
    color: var(--button-text-secondary);
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: normal;
    border: none;
    outline: none;
    padding: 6px 32px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
    text-decoration: none;
    text-align: center;
    transition: all 0.25s ease-in-out;
}
body.toska section.save-date .inner .foot .link-01 {
    color: var(--button-background-secondary);
}
section.save-date .inner .foot .link-01:hover {
    background: rgba(var(--button-background-secondary-rgb), 0.8);
    color: var(--button-text-secondary);
}
body.toska section.save-date .inner .foot .link-01 {
    color: var(--button-background-secondary);
}
body.toska section.save-date .inner .foot .link-01:hover {
    color: var(--text-tertiary);
}




/* LOVE STORY */
.love-story {
    padding: 30px 0 50px 0;
    background: var(--background-tertiary);
    overflow: hidden;
}
body.toska .love-story {
    background-color: var(--background-primary);
}
body.moss .love-story {
    background-color: var(--bg-light-02);
}
.love-story .inner {
    width: 1399px;
    margin: 0 auto;
    display: block;
}
.love-story .inner .title {
    padding: 10px;
    text-align: center;
    overflow: hidden;
}
.love-story .inner .title h1 {
    font-size: var(--heading-size);
    font-family: var(--heading-family);
    font-weight: 500;
    color: var(--text-secondary);
    display: inline-block;
    position: relative;
    max-width: 70%;
    text-transform: var(--heading-lettercase);
}
body.moss .love-story .inner .title h1 {
    color: var(--background-tertiary);
}
.love-story .inner .title h1::before,
.love-story .inner .title h1::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 170px;
    height: 110%;
    max-height: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.love-story .inner .title h1::before {
    right: calc(100% + 20px);
    background-image: var(--orn-04);
    background-position: right;
}
.love-story .inner .title h1::after {
    left: calc(100% + 20px);
    background-image: var(--orn-05);
    background-position: left;
}
.love-story .inner .timeline {
    position: relative;
    margin: 0 auto;
    padding: 30px 0;
    overflow: hidden;
}
.love-story .inner .timeline .story {
    line-height: normal;
    position: relative;
    padding: 20px 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}
.love-story .inner .timeline .story:nth-child(odd) {
    flex-direction: row;
    text-align: left;
}
.love-story .inner .timeline .story:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}
.love-story .inner .timeline .story .picture {
    height: 320px;
    width: 48%;
    border-radius: 22px;
    overflow: hidden;
}
.love-story .inner .timeline .story .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 22px;
    display: block;
    margin: 0 auto;
    background-color: #ffffff97;
}
.love-story .inner .timeline .story:nth-of-type(1) .picture img {
    object-position: top;
}
.love-story .inner .timeline .story:nth-of-type(2) .picture img {
    object-position: center;
}
.love-story .inner .timeline .story:nth-of-type(3) .picture img {
    object-position: center;
}
.love-story .inner .timeline .story:nth-of-type(4) .picture img {
    object-position: 50% 28%;
}
.love-story .inner .timeline .story .content {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: transparent;
}
.love-story .inner .timeline .story:nth-child(odd) .content .content-inner {
    background-color: var(--background-primary);
    border-top-left-radius: 32px;
    border-top-right-radius: 44px;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 64px;
}
.love-story .inner .timeline .story:nth-child(even) .content .content-inner {
    background-color: var(--background-secondary);
    border-radius: 22px;
}
body.toska .love-story .inner .timeline .story:nth-child(even) .content .content-inner {
    background-color: var(--background-secondary);
}
body.moss .love-story .inner .timeline .story:nth-child(odd) .content .content-inner {
    background-color: var(--background-primary);
    background-color: #f5ead7;
}
.love-story .inner .timeline .story .content .content-inner {
    padding: 40px 30px;
}
.love-story .inner .timeline .story .content .content-inner h2 {
    margin-bottom: .15em;
    font-size: var(--heading-size);
    font-weight: 500;
    font-family: var(--heading-family);
    color: var(--text-secondary);
    text-transform: var(--heading-lettercase);
}
.love-story .inner .timeline .story .content .content-inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    text-transform: var(--heading-lettercase);
}
.love-story .inner .timeline .story:nth-child(even) .content .content-inner h2,
.love-story .inner .timeline .story:nth-child(even) .content .content-inner p {
    color: var(--text-tertiary);
}
body.moss .love-story .inner .timeline .story:nth-child(odd) .content .content-inner h2,
body.moss .love-story .inner .timeline .story:nth-child(odd) .content .content-inner p {
    color: var(--text-secondary);
}



/* GALLERY */
.gallery-wrapper {
    background-color: var(--background-primary);
    padding: 30px 0 50px 0;
    position: relative;
}
.gallery {
    padding: 0px;
    margin-bottom: 40px;
    position: relative;
    z-index: 5;
    background-color: transparent;
}
.video-gallery,
.video-gallery .inner,
.video-gallery .inner .video-outer {
    padding: 0;
    position: relative;
    z-index: 5;
}
.gallery > .title h1,
.video-gallery .inner > .title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-primary);
    text-transform: var(--heading-lettercase);
    font-weight: 500;
}
.gallery > .title p,
.video-gallery .inner > .title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    font-style: var(--body-text-style);
    text-transform: var(--body-text-lettercase);
}
.video-gallery .inner .video-outer .video > .title h2 {
    font-family: var(--body-text-family);
    font-size: calc(var(--heading-size) - var(--fs-extra-7));
    color: var(--text-secondary);
    text-transform: var(--heading-lettercase);
}

body.moss .gallery > .title h1,
body.moss .video-gallery .inner > .title h1 {
    color: var(--background-tertiary);
}

body.toska .gallery > .title p,
body.toska .video-gallery .inner > .title p,
body.toska .video-gallery .inner .video-outer .video > .title h2,
body.moss .gallery > .title p,
body.moss .video-gallery .inner > .title p,
body.moss .video-gallery .inner .video-outer .video > .title h2 {
    color: var(--text-secondary);
}





/* EVENT */
.event-outer {
    width: 100%;
    position: relative;
    background-image: var(--bg-cover);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: visible;
}
.event-outer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: transparent;
    background-image: linear-gradient(
                        to bottom, 
                        rgba(var(--background-primary-rgb), 1), 
                        rgba(var(--background-primary-rgb), 0.8), 
                        rgba(var(--background-primary-rgb), 0)
                    );
    z-index: 1;
}
.event-outer::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 160px;
    background-color: transparent;
    background-image: linear-gradient(
                        to top, 
                        rgba(var(--background-primary-rgb), 1), 
                        rgba(var(--background-primary-rgb), 0.8), 
                        rgba(var(--background-primary-rgb), 0)
                    );
    z-index: 1;
}
.event-outer .event-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 10px 70px 10px;    
    position: relative;
    z-index: 5;
}
.event-outer .event-inner .orn.orn-06 {
    width: 771px;
    height: 70px;
    background-image: var(--orn-06);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto 30px auto;
    display: block;
}
.event-outer .event-inner .orn.orn-07 {
    width: 512px;
    height: 50px;
    background-image: var(--orn-07);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 10px auto;
    display: block;
}
.event-outer .event-inner .head {
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.event-outer .event-inner .head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-event);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.event-outer .event-inner .head > .title {
    width: 960px;
    text-align: center;
    padding: 10px;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 3;
}
.event-outer .event-inner .head > .title h1 {
    font-size: calc(var(--heading-size));
    font-weight: 500;
    margin-bottom: .15em;
    font-family: var(--body-text-family);
    text-transform: var(--heading-lettercase);
    color: var(--text-secondary);
} 
.event-outer .event-inner .head > .title p {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
    color: var(--text-secondary);
    text-transform: var(--body-text-lettercase);
}

body.toska .event-outer .event-inner .head > .title h1 {
    color: var(--button-background-secondary);
}

.event-inner .event {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}
.event-inner .event > .title {
    padding: 10px;
    width: 640px;
    margin: 0 auto;
    position: relative;
    text-align: center;
}



.event-inner .event > .title h1 {
    color: var(--text-secondary);
    font-size: calc(var(--heading-size) - var(--fs-extra-7));
    font-weight: 500;
    font-family: var(--body-text-family);
    margin-bottom: 0.25em;
    color: var(--text-secondary);
    text-transform: var(--heading-lettercase);
}
.event-inner .event > .title h1 > sup {
    font-size: calc(var(--heading-size) - var(--fs-extra-8));
    font-family: var(--body-text-family);
}
.event-inner .event > .title p {
    /* font-size: 34px;
    line-height: 24px; */
    font-size: var(--heading-size);

    font-family: var(--body-text-family);
    font-style: italic;
    color: var(--text-secondary);
}    

.event-inner .event > .title::before,
.event-inner .event > .title::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 80%;
    background: var(--background-secondary);
    left: 50%;
    transform: translateX(-50%);
}
body.toska .event-inner .event > .title::before,
body.toska .event-inner .event > .title::after {
    background: var(--button-background-secondary);   
}
.event-inner .event > .title::before {
    top: 0;
}
.event-inner .event > .title::after {
    bottom: 0;
}
.event-outer .event-inner .body {
    background: transparent;
}
.event-outer .event-inner .body .event > .details {
    /* width: 640px; */
    width: 100%;
    margin-top: 10px;
    text-align: center;
}


.event-inner .event .activities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.event-inner .event .activities .activity {
    border-radius: 7px;
    /* width: 350px; */
    width: clamp(20%, 50%, 350px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 20px;
    padding: 10px;
}
.event-inner .event .activities .activity span {
    font-size: 44px;
    margin-bottom: 0.2em;
    color: var(--background-tertiary);
}
.event-inner .event .activities .activity .title {
    width: 100%;
    padding: 10px;
    text-align: center;
}
.event-inner .event .activities .activity .title .activity-icon,
.event-inner .event .activities .activity .title .activity-icon-image {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
    margin: 0 auto 15px auto;
}
.event-inner .event .activities .activity .title .activity-icon path {
    fill: var(--text-primary);
}
.event-inner .event .activities .activity .title h1 {
    font-size: var(--heading-size);

    /* line-height: 45px; */
    font-weight: 500;
    color: var(--text-secondary);
    font-family: var(--heading-family);
    text-transform: var(--heading-lettercase);
    margin-bottom: 0.1em;
    letter-spacing: 1px;
}
.event-inner .event .activities .activity .title p {
    /* font-size: var(--body-text-size);
    line-height: 28px; */
    font-size: var(--body-text-size);
    text-transform: var(--body-text-size);

    font-family: var(--body-text-family);
    color: var(--text-secondary);
    font-style: var(--body-text-style);
    margin-bottom: 20px;
}

body.moss .event-inner .event .activities .activity .title h1,
body.moss .event-inner .event .activities .activity .title p,
body.toska .event-inner .event .activities .activity .title p {
    color: var(--text-secondary);
}

.event-inner .event .activities .activity .title p.time {
    margin-bottom: 0;
    font-style: normal;
}
.event-inner .event .activities .activity > .details {
    width: 100%;
}
.event-outer .event-inner .body .event > .details > div,
.event-outer .event-inner .body .event .activity > .details > div {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.event-outer .event-inner .body .event > .details p,
.event-outer .event-inner .body .event .activity > .details p {
    /* font-size: var(--body-text-size);
    line-height: 28px; */
    font-size: var(--body-text-size);

    font-family: var(--body-text-family);
    color: var(--text-secondary);
    text-transform: var(--body-text-lettercase);
    letter-spacing: normal;
}

body.toska .event-outer .event-inner .body .event > .details p,
body.toska .event-outer .event-inner .body .event .activity > .details p,
body.moss .event-outer .event-inner .body .event > .details p,
body.moss .event-outer .event-inner .body .event .activity > .details p {
    color: var(--text-secondary);
}

.event-outer .event-inner .body .event > .details p.hall,
.event-outer .event-inner .body .event .activity > .details p.hall {
    font-weight: 600;
}
.event-outer .event-inner .body .event > .details a,
.event-outer .event-inner .body .event .activity > .details a {
    border: 1px solid var(--button-background-secondary); 
    color: var(--button-text-secondary);
    padding: 0.25em 0.5em;
    text-decoration: none;
    display: flex;
    margin: 0 auto;
    border-radius: 7px;
    /* font-size: var(--body-text-size);
    line-height: 28px; */
    font-size: var(--body-text-size);

    font-family: var(--body-text-family);
    display: inline-block;
    transition: all 0.2s ease-in-out;
}
.event-outer .event-inner .body .event > .details a:hover,
.event-outer .event-inner .body .event .activity > .details a:hover,
.event-outer .event-inner .body .event > .details a:focus,
.event-outer .event-inner .body .event .activity > .details a:focus {
    background: var(--button-background-primary);
    border-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

body.toska .event-outer .event-inner .body .event > .details a,
body.toska .event-outer .event-inner .body .event .activity > .details a,
body.moss .event-outer .event-inner .body .event > .details a,
body.moss .event-outer .event-inner .body .event .activity > .details a {
    background: var(--background-secondary);
    color: var(--text-tertiary);
}
body.toska .event-outer .event-inner .body .event > .details a:hover,
body.toska .event-outer .event-inner .body .event .activity > .details a:hover,
body.toska .event-outer .event-inner .body .event > .details a:focus,
body.toska .event-outer .event-inner .body .event .activity > .details a:focus,
body.moss .event-outer .event-inner .body .event > .details a:hover,
body.moss .event-outer .event-inner .body .event .activity > .details a:hover,
body.moss .event-outer .event-inner .body .event > .details a:focus,
body.moss .event-outer .event-inner .body .event .activity > .details a:focus {
    background-color: var(--button-background-primary);
}


/* ==============================
        Rundown
============================== */
.rundown-container {
    background-color: var(--background-primary);
}

/* ==============================
        RSVP
============================== */
.rsvp-wrap {
    position: relative;
    overflow: hidden;
    padding: 50px 20px;

    background-color: var(--background-primary);
}
.rsvp-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* Head */
.rsvp-head {
    padding: 20px;
    text-align: center;
}
.rsvp-head .rsvp-title {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-primary);
    text-transform: var(--heading-lettercase);
    font-weight: 500;
}

/* Body */
.rsvp-body {
    margin-top: 20px;
}

.rsvp-confirm-step {
    display: none;
}

/* RSVP Status */
.rsvp-status-wrap {
    
}
.rsvp-status-head {
    padding: 0px;
    text-align: center;
}
.rsvp-status-head .rsvp-status-caption {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
}

.rsvp-status-wrap input[name="rsvp_status"] {
    display: none;
}

/* RSVP Amount */
.rsvp-amount-wrap {
    margin-bottom: 0px;
}

.rsvp-amount-head {    
    text-align: center;
    padding: 0px;
}
.rsvp-amount-head .rsvp-amount-caption {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
}

.rsvp-amount-body {
    
}

/* Amount Controller */
.rsvp-amount-controller-wrap {
    padding: 20px;
}
.rsvp-amount-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.rsvp-amount-controller .toggle-btn {
    background-color: var(--button-background-secondary);
    border: none;
    outline: none;
    height: 50px;
    width: 50px;
    border-radius: 7px;
    border: none;
    color: var(--button-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.rsvp-amount-controller .toggle-icon {
    width: 15px;
    height: 15px;
    display: block;
}
.rsvp-amount-controller .toggle-icon path {
    stroke-width: 15px!important;
}

.rsvp-amount-controller .toggle-btn.plus {
    background-color: var(--button-background-primary);
}
.rsvp-amount-controller .toggle-btn.plus:hover {
    background-color: var(--background-tertiary);
}
.rsvp-amount-controller .toggle-btn.plus .toggle-icon path {
    stroke: var(--button-text-primary);
}

.rsvp-amount-controller .toggle-btn.minus {
    background-color: var(--button-background-secondary);
}
.rsvp-amount-controller .toggle-btn.minus:hover {
    background-color: rgba(var(--button-background-secondary-rgb), 0.8);
}
.rsvp-amount-controller .toggle-btn.minus .toggle-icon path {
    stroke: var(--button-text-secondary);
}

.rsvp-amount-controller .input-wrap {
    width: 100%;
}
.rsvp-amount-controller .input-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    width: 100%;
    height: 50px;
    margin: 0px auto;
    border-radius: 7px;
    background-color: var(--background-primary);
    text-align: center;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    border: 1px solid var(--background-tertiary);
    pointer-events: none;
}

/* RSVP Confirm */
.rsvp-confirm-wrap {
    padding: 20px;
    text-align: center;
}

.rsvp-confirm-wrap label {
    display: block;
    margin-top: 10px;
}
.rsvp-confirm-btn {
    width: 100%;
    display: block;
    padding: 10px 25px;
    margin: 0px auto;
    border-radius: 7px;
    font-weight: 600;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: normal;
    letter-spacing: 1px;
    background-color: var(--button-background-primary);
    border: none;
    color: var(--button-text-primary);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}


.session-btn-wrap input[name="selected_event[]"]:checked + .rsvp-session-btn, .session-btn-wrap input[name="selected_event_all"]:checked +  .rsvp-session-btn{
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}
.rsvp-session-btn,
.form-check-label{
    font-weight: 300;
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    border-radius: 4px;
    background-color: var(--button-background-secondary);
    color: var(--button-text-secondary);
}

.rsvp-confirm-btn.going {
    background-color: var(--button-background-secondary);
    color: var(--button-text-secondary);
    font-weight: 500;
}
.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.going,
.rsvp-confirm-btn.going:hover {
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.not-going {
    background-color: var(--button-background-secondary);
    color: var(--button-text-secondary);
    font-weight: 500;
}
.rsvp-status-wrap input[name="rsvp_status"]:checked + .rsvp-confirm-btn.not-going,
.rsvp-confirm-btn.not-going:hover,
.form-check-label:has(.form-check-input:checked),
.form-check-label:hover {
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.confirm:hover {    
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn.download {
    width: auto;
    display: inline-block;
    vertical-align: top;
    background-color: transparent;
    color: var(--button-text-primary);
}
.rsvp-confirm-btn.download:hover {    
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}

.rsvp-confirm-btn > i {
    font-size: 0.6em;
    margin-left: 5px;
}


/* QR Card */
.rsvp-qrcard-wrap {
    padding: 20px;
    /* margin-bottom: 40px; */
}
.rsvp-qrcard-img-wrap {
    margin-bottom: 30px;
}
.rsvp-qrcard-img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* RSVP Message */
.rsvp-message-wrap {
    padding: 20px;
}
.rsvp-message-content {
    background-color: transparent;
    text-align: center;
}
.rsvp-message-icon {
    width: 30px;
    height: auto;
    display: none;
    margin: 0 auto 20px;
}
.rsvp-message-wrap .rsvp-message-title {
    font-family: var(--body-text-family);
    font-size: calc(var(--heading-size) - var(--fs-extra-7));
    font-weight: normal;
    margin-bottom: 10px;
    color: var(--text-secondary);
}
.rsvp-message-wrap .rsvp-message-caption {
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size) - var(--fs-extra-1));
    color: var(--text-secondary);
}

.session-caption-wrap .caption{
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}

/* RSVP Change */
.rsvp-change-wrap {
    
}


/* Toska */
body.toska .rsvp-confirm-btn.download:hover {    
    background-color: var(--button-background-primary);
}
body.toska .rsvp-confirm-btn.confirm:hover {    
    background-color: var(--button-background-primary);
}
body.toska .rsvp-amount-controller .toggle-btn.plus:hover {
    background-color: var(--button-background-primary);
}


/* Moss */
body.moss .rsvp-head .rsvp-title {
    color: var(--background-tertiary);
}

body.moss .rsvp-confirm-btn.download:hover {    
    background-color: var(--button-background-primary);
}
body.moss .rsvp-confirm-btn.confirm:hover {    
    background-color: var(--button-background-primary);
}
body.moss .rsvp-amount-controller .toggle-btn.plus:hover {
    background-color: var(--button-background-primary);
}

@media (max-width: 680px) {
    .rsvp-wrap {
        padding: 20px 0px;
    }
}



/* ==============================
        LIVE STREAMING
============================== */
section.live-streaming {
    /* padding: 40px 20px 50px 20px; */
    background-color: var(--background-primary);
}
section.live-streaming > .inner > .head > h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    text-transform: var(--heading-lettercase);
    color: var(--text-primary);
    font-weight: 500;
}
body.moss section.live-streaming > .inner > .head > h1 {
    color: var(--text-primary);
}
section.live-streaming > .inner > .head > p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-style: var(--body-text-style);
    color: var(--text-secondary);
}
body.toska section.live-streaming > .inner > .head > p,
body.moss section.live-streaming > .inner > .head > p,
body.toska .live-streaming .inner .body p,
body.moss .live-streaming .inner .body p {
    color: var(--text-secondary);
}
.live-streaming .inner .body p {
    font-family: var(--body-text-family);   
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}
.live-streaming .inner .body p.meeting-text {
    font-size: calc(var(--body-text-size) + 3px);
}
.live-streaming .inner .body > .streaming-info > div.link > a {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-weight: 700;
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}
.live-streaming .inner .body > .streaming-info > div.link > a:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}
body.toska .live-streaming .inner .body > .streaming-info > div.link > a,
body.moss .live-streaming .inner .body > .streaming-info > div.link > a {
    background-color: var(--background-secondary);
}
body.toska .live-streaming .inner .body > .streaming-info > div.link > a:hover,
body.moss .live-streaming .inner .body > .streaming-info > div.link > a:hover {
    background-color: var(--button-background-primary);
}


/* ======================
    INSTAGRAM FILTER
====================== */
.ig-filter-wrap {
    background-color: var(--background-primary);
}
.ig-filter {
    width: 100%;
    max-width: 640px;
}
.ig-filter .ig-filter-title {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-primary);
    font-weight: 500;
}
body.moss .ig-filter-title {
    color: var(--background-tertiary);
}
.ig-filter .ig-filter-caption {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
    color: var(--text-secondary);
}
body.toska .ig-filter-caption,
body.moss .ig-filter-caption {
    color: var(--text-secondary);
}
.ig-filter-link-wrap .ig-filter-link {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
    font-weight: 600;
}
.ig-filter-link:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}





/* Modal */
.modal * {
    color: var(--button-background-secondary);
    font-family: var(--body-text-family);
    font-size: calc(var(--body-text-size) - 5px);
}




/* Gift */
.gift {
    background-color: var(--background-primary);
}
.gift .gift-inner .gift-title h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--text-primary);
    font-weight: 500;
}
.gift .gift-inner .gift-title p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    line-height: normal;
}

body.moss .gift .gift-inner .gift-title h1 {
    color: var(--background-tertiary);
}
body.moss .gift .gift-inner .gift-title p,
body.toska .gift .gift-inner .gift-title p {
    color: var(--text-secondary);
}
.gift .gift-inner .gift-form .gift-submit,
.gift .gift-inner .gift-form .gift-next {
    background: var(--button-background-secondary);
    color: var(--button-text-secondary);
    font-weight: 600;
}
.gift .gift-inner .gift-form .gift-submit:hover,
.gift .gift-inner .gift-form .gift-next:hover {
    background: rgba(var(--button-background-secondary-rgb), 0.8);
    color: var(--button-text-secondary);
}
.gift .gift-inner .gift-form [name="nominal"]:hover + .nominal,
.gift .gift-inner .gift-form [name="nominal"]:checked + .nominal {
    background: var(--background-secondary);
    border-color: var(--background-secondary);
    color: var(--text-tertiary);
}

#gift-form p,
#gift-form span,
#gift-form label,
#gift-form input,
#gift-form textarea,
#gift-form div,
#gift-form button {
    font-family: var(--body-text-family);   
    font-size: var(--body-text-size);
    color: var(--text-secondary);
    text-transform: var(--body-text-lettercase);
}
#gift-form label.center {
    font-size: calc(var(--body-text-size));
    color: var(--text-secondary);
}
#gift-form button {
    display: flex;
    align-items: center;
    justify-content: center;
}
#gift-form button > i {
    margin-left: 7px;
    font-size: calc(var(--body-text-size) - 10px);
}
.gift .gift-inner .gift-form .gift-picture .picture-detail .head h2 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    line-height: normal;
    color: var(--text-tertiary);
}
.gift .gift-inner .gift-form .gift-picture .picture-detail .head p {
    line-height: normal;
}
.gift .gift-inner .gift-form .gift-picture .picture-detail .body div[data-upload="gift-picture"] > i {
    color: var(--text-tertiary);
}

body.toska #gift-form p,
body.toska #gift-form span,
body.toska #gift-form label,
body.toska #gift-form input,
body.toska #gift-form textarea,
body.toska #gift-form div,
body.toska #gift-form button,
body.moss #gift-form p,
body.moss #gift-form span,
body.moss #gift-form label,
body.moss #gift-form input,
body.moss #gift-form textarea,
body.moss #gift-form div,
body.moss #gift-form button {
    color: var(--text-secondary);
}
body.toska .gift .gift-inner .gift-form [name="nominal"]:hover + .nominal,
body.toska .gift .gift-inner .gift-form [name="nominal"]:checked + .nominal,
body.moss .gift .gift-inner .gift-form [name="nominal"]:hover + .nominal,
body.moss .gift .gift-inner .gift-form [name="nominal"]:checked + .nominal {
    color: var(--white-clr)!important;
}
body.toska .gift-form .gift-submit,
body.toska .gift-form .gift-next,
body.moss .gift-form .gift-submit,
body.moss .gift-form .gift-next {
    background-color: var(--background-secondary)!important;
    color: var(--white-clr)!important;    
}
body.toska .gift-form .gift-submit:hover,
body.toska .gift-form .gift-next:hover,
body.moss .gift-form .gift-submit:hover,
body.moss .gift-form .gift-next:hover {
    background-color: var(--button-background-primary)!important;
}

/* No Form */
.gift.no-form .gift-inner .gift-form {
    overflow: visible;
}

.gift .gift-inner .gift-form .selectize-control .item {
    background-color: var(--background-primary);
}
.gift .gift-inner .gift-form .selectize-control .item:hover {
    background-color: rgba(var(--background-primary-rgb), 0.8);
}

.gift .gift-inner .gift-form .selectize-control .item p strong {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    color: var(--text-secondary);
}

.gift .gift-inner .gift-form .gift-details .bank-detail .saving-books .copy-account {
    border: 1px solid var(--button-background-secondary);
    font-size: calc(var(--body-text-size) - var(--fs-extra-2));
    color: var(--button-text-secondary);
}
.gift .gift-inner .gift-form .gift-details .bank-detail .saving-books .copy-account:hover {
    background-color: var(--button-background-secondary);
    color: var(--button-text-secondary);
}

/* section.gift {
    padding: 20px 20px 70px 20px;
    background-color: var(--background-primary);
}
.gift .gift-inner {
    width: 700px;
}
.gift .gift-inner .gift-form {
    width: 640px;
    display: block;
    margin: 0 auto;
}
.gift-form .bank-detail {
    padding: 10px;
}
section.gift .bank-detail .saving-books {
    margin-bottom: 0;
}
section.gift .bank-detail .saving-books .book {
    padding: 20px;
}
section.gift .gift-inner .gift-title h1 {
    font-family: var(--heading-family);
    font-size: 46px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.25em;
    color: var(--button-background-secondary);
}
section.gift .gift-inner .gift-title p {
    font-size: var(--body-text-size);
    letter-spacing: 1px;
    font-family: var(--body-text-family);
    line-height: 28px;
    color: var(--button-background-secondary);
}
section.gift .gift-inner .gift-form {
    box-shadow: none;
}
section.gift .bank-detail .saving-books .book p,
section.gift .bank-detail .saving-books .book span {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    line-height: 28px;
    letter-spacing: 1px;
    color: var(--button-background-secondary);
}
.bank-detail .saving-books .copy-account {
    border: .5px solid var(--button-background-secondary);
}
.bank-detail .saving-books .copy-account:hover {
    background: var(--button-background-secondary);
    color: var(--text-tertiary);
}

.saving-books .qr-outer {
    width: 180px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 20px;
}
.saving-books .qr-outer img.qr {
    width: 100%;
    object-fit: contain;
    object-position: center;
} */




/* PROTOCOL */
.protocol.protocol-01 .inner .head h1,
.protocol.protocol-03 .inner .head h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    text-transform: capitalize;
}

.protocol.protocol-02 .inner .head .step-outer {
    background-color: var(--background-secondary);
}

.protocol.protocol-01 .inner .head p,
.protocol.protocol-03 .inner .head p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
}
@media only screen and (max-width: 600px) {

    .protocol.protocol-01 .inner .head p > br,
    .protocol.protocol-03 .inner .head p > br {
        display: block;
    }

}

body.toska .protocol.protocol-01 .inner .head,
body.toska .protocol.protocol-02 .inner .head .step-outer,
body.toska .protocol.protocol-03 .inner .head,
body.moss .protocol.protocol-01 .inner .head,
body.moss .protocol.protocol-02 .inner .head .step-outer,
body.moss .protocol.protocol-03 .inner .head {
    background-color: var(--button-background-primary);
}

/* Protocol 03 */
.protocol.protocol-03 .inner .body .slider .content .text-01 {
    font-family: var(--body-text-family);
    font-size: var(--heading-size)!important;
    line-height: calc(var(--heading-size) + 5px)!important;
    color: var(--text-secondary);
}
.protocol.protocol-03 .inner .body .slider .slick-center .content .text-01 {
    color: var(--text-tertiary);
}
.protocol.protocol-03 .inner .body .slider_dots::before {
    /* border: 2px solid var(--text-tertiary); */
    border-color: var(--text-primary)!important;
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator {
    background-color: var(--background-primary);    
}
.protocol.protocol-03 .inner .body .slider_dots .slider_navigator.slick-current.slick-center {
    background-color: var(--background-tertiary);
}

/* Protocol 04 */
section.protocol-04 .inner .head .title { 
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 0;
}

section.protocol-04 + .comment-outer {
    padding-top: 0;
    margin-top: -15px;
}

section.protocol-04 .protocol-item-wrap .protocol-item .text-wrap .text {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    line-height: normal;
    color: var(--text-tertiary);
}




/* COMMENT */
.comment-outer {
    background-color: var(--background-tertiary);
}
.comment-outer .comment-inner .head  {
    margin-bottom: 0;
}
.comment-outer .comment-inner .head h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0;
}
.comment-outer .comment-inner .head p {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    font-style: var(--body-text-style);
    text-transform: var(--body-text-lettercase);
    color: var(--text-tertiary);
}
body.moss .comment-outer .comment-inner .head h1 {
    color: var(--background-tertiary);
}
body.toska .comment-outer .comment-inner .head p,
body.moss .comment-outer .comment-inner .head p {
    color: var(--text-secondary);
}
.comment-outer .comment-inner .head > p,
.comment-outer .comment-inner .send-comment,
.comment-outer .comment-inner .more-comment,
.comment-form button,
.comment-form input,
.comment-form textarea,
.comment .comment-head p,
.comment .comment-head p strong,
.comment .comment-body p {
    font-size: var(--body-text-size);
    font-family: var(--body-text-family);
    color: var(--button-background-secondary);
}
.comment-outer .comment-inner .send-comment:hover,
.comment-outer .comment-inner .more-comment:hover {
    color: var(--text-tertiary);
}
.comment .comment-foot small,
.comment .comment-foot a {
    font-size: calc(var(--body-text-size) - var(--fs-extra-2)) !important;
    font-family: var(--body-text-family);
    color: var(--text-secondary);
}
.comment .comment-head p strong {
    font-weight: 600;
}
.comment .comment-head p > i {
    font-size: 0.6em;
}
.comment-outer .comment-inner .head > p,
.comment-outer .comment-inner .send-comment,
.comment-outer .comment-inner .more-comment,
.comment-form button,
.comment-form input,
.comment-form textarea,
.comment .comment-head p,
.comment .comment-head p strong,
.comment .comment-body p,
.comment .comment-foot small,
.comment .comment-foot a {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    text-transform: var(--body-text-lettercase);
    color: var(--text-secondary);
}
body.toska .comment-outer .comment-inner .send-comment,
body.toska .comment-outer .comment-inner .more-comment,
body.moss .comment-outer .comment-inner .send-comment,
body.moss .comment-outer .comment-inner .more-comment {
    background-color: var(--background-secondary);
    color: var(--text-tertiary);
}
body.toska .comment-outer .comment-inner .send-comment:hover,
body.toska .comment-outer .comment-inner .more-comment:hover,
body.moss .comment-outer .comment-inner .send-comment:hover,
body.moss .comment-outer .comment-inner .more-comment:hover {
    background-color: var(--button-background-primary);
}

.comment-form .send-comment {
    background-color: var(--button-background-primary);
    color: var(--button-text-primary) !important;
}
.comment-form .send-comment:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary) !important;
}
.comment-outer .comment-inner .more-comment {
    background-color: var(--button-background-primary);
    color: var(--button-text-primary);
}
.comment-outer .comment-inner .more-comment:hover {
    background-color: rgba(var(--button-background-primary-rgb), 0.8);
    color: var(--button-text-primary);
}

@media only screen and (max-width: 425px) {

    .comment-outer .comment-inner .comment-form input,
    .comment-outer .comment-inner .comment-form textarea {
        font-size: var(--body-text-size)!important;
        padding: 10px!important;
    }

}




/* FORM CONTROL */
.form-control:focus, .form-control:active {
    background: #fff;
    box-shadow: 0 0 2px var(--button-background-primary);
}


/* Wrapper */
.quote-wrapper {
    position: relative;
    padding-top: 70px;
    padding-bottom: 100px;
    background-color: var(--background-tertiary );
}

.quote-wrapper::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(100% + 0px);
    width: 100%;
    background-image: var(--bg-palace);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
}



/* QUOTE */
section.quote {
    width: 100%;
    padding: 10px;
    position: relative;
    z-index: 1;
}
section.quote .inner {
    width: 720px;
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
}
section.quote .inner p.text-01 {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
    font-style: var(--body-text-style);
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 1em;
}



/* FOOTNOTE */
section.footnote {
    background: transparent;
    padding: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
section.footnote .inner {
    width: 720px;
    padding: 20px;
    text-align: center;
    display: block;
    margin: 0 auto;
}
section.footnote .inner p {
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);

    text-transform: var(--body-text-lettercase);
    color: var(--text-secondary);
}
section.footnote .inner p sup {
    font-size: calc(var(--body-text-size) - var(--fs-extra-2));
}
section.footnote .inner h1 {
    font-family: var(--heading-family);
    font-size: var(--heading-size);

    font-weight: 500;
    /* line-height: 50px; */
    margin: 20px 0;
    color: var(--text-secondary);
    word-wrap: break-word;
}

body.toska section.footnote .inner h1,
body.moss section.footnote .inner h1 {
    color: var(--background-tertiary);
}
body.toska section.footnote .inner p,
body.moss section.footnote .inner p {
    color: var(--text-secondary);
}


/* ========================================
        FOOTER
======================================== */
section.footer {
    background: var(--background-primary);
    padding: 0;
}
section.footer .footer-inner {
    padding: 10px 0;
}
section.footer .footer-inner p {
    font-size: var(--body-text-size);
    font-weight: 400;
    color: var(--text-secondary);
}
.footer .footer-inner .footer-logo {
    width: 55px;
}
section.footer .footer-inner .footer-logo path {
    fill: var(--text-secondary);
}

@media only screen and (max-width: 960px) {
    section.footer .footer-inner.flex-column {
        flex-direction: column;
        padding-top: 80px;
        padding-bottom: 150px;
    }
    section.footer .footer-inner.flex-column p {
        margin-right: 0;
        font-size: calc(var(--body-text-size) + var(--fs-extra-2));
    }
    section.footer .footer-inner.flex-column .footer-logo {
        margin-top: 10px;
        width: 150px;
    }
}

/* =======================
        PERSON
======================= */
section.person p {
    font-family: var(--roboto);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: var(--dark-clr);
}


/* =====================================
    
    RESPONSIVE SCREEN

   =====================================*/

/* =====================================
    1500px
   =====================================*/
@media only screen and (max-width: 1500px) {
    /* LOVE STORY */
    .love-story .inner {
        width: 100%;
    }
    .love-story .inner .title {
        padding: 30px 0px 20px 0;
    }
    .love-story .inner .timeline .story {
        padding: 20px 20px 70px 20px;
    }

}

/* =====================================
    800px
   =====================================*/
@media only screen and (max-width: 800px) {

    /* BrideGroom */
    .bridegroom .bridegroom-inner .body {
        padding: 0;
    }
    /* .bridegroom .bridegroom-inner .body .groom,
    .bridegroom .bridegroom-inner .body .bride {
        width: 100%;
    } */
    .bridegroom .bridegroom-inner .body .bridegroom-separator {
        margin: 0;
    }

    /* Event */
    .event-outer .event-inner .orn.orn-06 {
        width: 80%;
    }
    .event-outer .event-inner .orn.orn-07 {
        width: 70%;
    }
    .event-outer .event-inner .head > .title {
        width: 100%;
    }
    .event-inner .event > .title {
        width: 100%;
    }
    
    /* Save The Date */
    section.save-date .inner {
        width: 100%;
    }

    /* FOOTNOTE & QUOTE */
    section.footnote .inner,
    section.quote .inner {
        width: 100%;
    }

}
/* =====================================
    720px
   =====================================*/
@media only screen and (max-width: 720px) {

    /* Love Story */
    .love-story .inner .title h1::before {
        /* right: 100%; */
    }
    .love-story .inner .title h1::after {
        /* left: 100%; */
    }

    /* Gift */
    .gift .gift-inner,
    .gift .gift-inner .gift-form {
        width: 100%;
    }


    /* LAST ORNAMENT */
    section.last-orn .orn.orn-08 {
        width: 80vw;
    }

}

/* =====================================
    Minimum Desktop Screen
    1024px 768px
   =====================================*/
@media only screen and (max-width: 1024px) {

    /* Cover */
    .cover .cover-inner .cover-picture .cover-show::before {
        /* height: 105%; */
        /* background-image: var(--orn-cover-tablet); */
    }

    /* Greetings */
    .greetings .orn.orn-02 {
        /* width: 275px;
        height: 80px; */
    }


    /* BrideGroom */
    section.bridegroom .bridegroom-inner {
        padding: 0px;
    }
    section.bridegroom .bridegroom-inner .head {
        width: 100%;
    }

    /* LOVE STORY */
    .love-story .inner .timeline .story {
        padding: 20px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .love-story .inner .timeline .story:nth-child(odd) {
        flex-direction: column;
        text-align: left;
    }
    .love-story .inner .timeline .story:nth-child(even) {
        flex-direction: column;
        text-align: right;
    }
    .love-story .inner .timeline .story .picture {
        height: 320px;
        width: 95%;
        margin-bottom: -100px;
        position: relative;
        z-index: 1;
    }
    .love-story .inner .timeline .story .picture img {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    .love-story .inner .timeline .story .content {
        width: 100%;
    }
    .love-story .inner .timeline .story .content .content-inner {
        padding: 130px 40px 40px 40px;
    }


    /* PROTOCOL */
    .protocol .inner .head .picture {
        height: auto;
    }
    .protocol .inner .body .picture {
        height: auto;
    }
    .protocol .inner .body .picture .people {
        width: 80vw;
        top: 55%;
    }


    /* Wrapper */
    .quote-wrapper {
        padding-bottom: 100px;
    }


}



@media only screen and (max-width: 800px) {


    .bridegroom .bridegroom-inner .body {
        align-items: center;
        flex-direction: column;
    }
    .bridegroom .bridegroom-inner .body.bride-first {   
        flex-direction: column-reverse;
    }
    .bridegroom .bridegroom-inner .body .groom,
    .bridegroom .bridegroom-inner .body .bride {
        width: 100%;
    }
    .bridegroom .bridegroom-inner .body .bridegroom-separator {
        position: relative;
        top: 0;
        left: 0;
        transform: translate(0,0);
    }
    

}


@media only screen and (max-width: 768px) {

    .cover .cover-inner .cover-picture .cover-show {
    
        /* max-width: calc((100vh / 2) * 2);
        max-height: calc(100vh / 2);
    
        width: calc(70vh * 2);
        height: 70vh; */

        max-width: 80vw;
        /* max-height: calc((var(--body-height) * 65) / 100); */

        max-height: max(calc(80vw * 2), calc((var(--body-height) * 65) / 100));
        /* max-height: calc(80vh * 2); */

        width: calc( ((var(--body-height) * 65) / 100) / 1.5);
        /* height: 65vh; */
        height: calc((var(--body-height) * 65) / 100);

        /* height: calc(80vw * 2); */

    }
    .cover .cover-inner .cover-picture .cover-show::before {
        /* height: 105%; */
        /* background-image: var(--orn-cover-tablet); */
        width: 110%;
        height: 107%;
        background-image: var(--orn-cover-mobile);
        background-size: 100% 100%;
        /* background-color: lightsalmon; */
    }

}



/* =====================================
    Minimum Tablet Screen
    600px x 960px
   =====================================*/

@media only screen and (max-width: 600px) {

    /* COVER */
    .cover {
        background-image: var(--bg-cover-mobile);
    }
    .cover .cover-inner .cover-picture .cover-show {
        /* height: 540px; */
    }
    .cover .cover-inner .cover-picture .cover-show::before {
        /* height: 105%; */
        background-image: var(--orn-cover-mobile);
    }


    /* Save The Date */
    section.save-date .inner .body .schedule::before {
        height: 30px;
    }
    section.save-date .inner .body .schedule .countdown .countdown-time {
        width: 100px;
        height: 100px;
        margin: 5px 15px;
    }

    /* Love Story */
    .love-story .inner .title h1::before,
    .love-story .inner .title h1::after {
        /* top: 50%;
        width: 80px;
        height: 40px; */
    }
    .love-story .inner .title h1::before {
        right: calc(100% + 15px);
    }
    .love-story .inner .title h1::after {
        left: calc(100% + 15px);
    }
    .love-story .inner .timeline .story {
        padding: 10px;
        margin-bottom: 10px;
    }
    .love-story .inner .timeline .story .picture {
        height: 280px;
        width: 95%;
    }
    .love-story .inner .timeline .story .content .content-inner {
        padding: 130px 20px 30px 20px;
    }    

    /* Gallery Photo */
    .video-gallery .inner .video-outer {
        padding: 20px 10px;
    }
    .video-gallery .inner .video-outer .video {
        width: 100%;
        margin: 15px;
    }
    .video-gallery .inner .video-outer .video .preview {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
    }


    /* Gift */
    section.gift .gift-inner .gift-title h1 {
        /* font-size: 36px;
        line-height: 30px; */
        margin-bottom: 0.5em;
    }
    section.gift .gift-inner .gift-title p {
        /* font-size: 28px;
        line-height: 20px; */
    }
    section.gift .bank-detail .saving-books .book p,
    section.gift .bank-detail .saving-books .book span {
        /* font-size: 28px;
        line-height: 20px; */
    }



    /* Event */
    .event-outer {
        background-image: var(--bg-cover-mobile);
    }
    .event-outer .event-inner {
        padding: 20px 10px 40px 10px;    
    }
    .event-outer .event-inner .orn.orn-06 {
        margin: 10px auto;
    }
    .event-outer .event-inner .head {
        padding: 0;
    }
    .event-inner .event > .title {
        padding-top: 5px;
    }
    .event-inner .event > .title::before,
    .event-inner .event > .title::after {
        width: 80%;
    }
    

    .event-inner .event .activities .activity {
        margin-bottom: 0;
        width: 100%;
    }
    .event-inner .event .activities .activity .title {
        text-align: center;
        margin-bottom: 10px;
    }


    /* QUOTE */
    section.quote {
        padding: 0;
    }
    section.quote .inner {
        padding: 20px;
    }


    /* FOOTER */
    section.footer {
        padding: 5px;
    }



    /* Wrapper */
    .quote-wrapper {
        padding-bottom: 80px;
    }


}



/* =====================================
    Minimum Phone Screen
    360px x 640px
   =====================================*/

@media only screen and (max-width: 360px) {


    /* Cover */
    .cover .cover-inner .cover-picture .cover-show::before {
        /* height: 105%; */
        background-image: var(--orn-cover-mobile);
    }


    /* Greetings */
    .greetings .orn.orn-02 {
        /* width: 80vw;
        height: 60px; */
        height: 50px;
    }


    /* Save The Date */
    section.save-date .inner .body .schedule {
        padding: 0;
    }
    section.save-date .inner .body .schedule::before {
        height: 30px;
    }
    section.save-date .inner .body .schedule .countdown .countdown-time {
        width: 80px;
        height: 80px;
        margin: 5px auto;
    }




    /* Love Story */
    .love-story .inner .title h1::before,
    .love-story .inner .title h1::after {
        /* top: 50%;
        width: 80px;
        height: 40px; */
    }
    .love-story .inner .title h1::before {
        /* right: 110%; */
    }
    .love-story .inner .title h1::after {
        /* left: 110%; */
    }
    .love-story .inner .timeline {
        padding: 0 0 30px 0;
    }
    .love-story .inner .timeline .story {
        padding: 10px;
        margin-bottom: 10px;
    }
    .love-story .inner .timeline .story .picture {
        height: 160px;
        width: 95%;
    }
    .love-story .inner .timeline .story .content .content-inner {
        padding: 130px 20px 30px 20px;
    }    


    /* Event */
    .event-outer .event-inner {
        padding: 20px 10px 40px 10px;    
    }
    .event-outer .event-inner .head {
        padding: 0;
    }
    .event-inner .event > .title {
        padding-top: 5px;
    }
    .event-inner .event > .title::before,
    .event-inner .event > .title::after {
        width: 95%;
    }


    .event-inner .event .activities .activity {
        margin-bottom: 0;
        width: 100%;
    }
    .event-inner .event .activities .activity .title {
        text-align: center;
        margin-bottom: 10px;
    }

    /* QUOTE */
    section.quote {
        padding: 0;
    }
    section.quote .inner {
        padding: 20px;
    }


    /* FOOTER */
    section.footer {
        background: var(--button-background-secondary);
        padding: 5px;
    }


    /* Wrapper */
    .quote-wrapper {
        background-position: 0 0;
        background-size: 120% 100%;
        padding-bottom: 30px;
    }


}



/* =============================
        GENERAL QR CODE
============================= */
.general-qrcode {
    padding: 40px 20px 60px;
}



/* KADO */
.container.wedding-gifts-wrap {
    background: var(--background-primary) !important;
    width: 100%;
    position: relative;
}
.hadiah-card-button,
.buying-kado-btn,
.kado-send-btn {
    background-color: var(--button-background-primary) !important;
    color: var(--button-text-primary) !important;
    cursor: pointer !important;
    border: none !important;
    font-family: var(--body-text-family) !important;
    border-radius: 4px !important;
    font-size: calc(var(--body-text-size) - 6px) !important;
}

.modal-kado-header .title,
.modal-confirm-header .title,
.modal-kado-header .address,
.kado-description .kado-name,
.kado-description .kado-ket,
.modal-kado-note .note-kado,
.img-caption {
    font-family: var(--body-text-family) !important;
    color: var(--text-secondary) !important;
    /* font-size: var(--body-text-size); */
}

.price-wrap .price-cap,
.amount-wrap .amount-cap,
.price-wrap .price-field,
.amount-wrap .amount-field {
    font-size: 18px;
    color: var(--text-secondary);
    font-family: var(--body-text-family) !important;
}

.price-wrap .price-field{
    color: #cb3a31 !important;
}

.modal-kado-note .note-kado {
    font-size: calc(var(--body-text-size) - 4px);
}

.modal-kado-header .title,
.modal-confirm-header .title,
.kado-description .kado-name,
.img-caption {
    font-size: calc(var(--body-text-size) - 4px) !important;
    font-weight: 600 !important;
}

.modal-kado-header .address,
.modal-kado-header .caption,
.kado-description .kado-ket {
    font-size: calc(var(--body-text-size) - 6px) !important;
    font-family: var(--body-text-family) !important;
    color: var(--text-secondary);
}
.confirm-kado-btn {
    border: none !important;
    outline: none !important;
    border: 1px solid var(--button-background-primary) !important;
    color: var(--button-background-primary) !important;
    font-family: var(--body-text-family) !important;
    width: 100%;
    border-radius: 4px !important;
    font-weight: 500 !important;
    font-size: calc(var(--body-text-size) - 6px) !important;
}

.confirm-kado-btn:hover {
    background-color: var(--button-background-primary) !important;
    color: var(--button-text-primary) !important;
}

.hadiah-card-button:hover,
.buying-kado-btn:hover,
.kado-send-btn:hover {
    color: var(--button-text-primary) !important;
    background-color: var(--button-background-primary) !important;
}

.wedding-gift-address-label,
.inner-address-info {
    font-family: var(--body-text-family) !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    font-size: var(--body-text-size) !important;
}

.btn-hadiah-copy {
    color: var(--text-secondary) !important;
    border: 1px solid var(--text-secondary) !important;
/*     font-family: var(--body-text-family) !important; */
}

.kado-form-wrap .input-field,
.kado-input-wrap .input-label {
    font-family: var(--roboto);
    font-size: 18px;
}
.hadiah-card-title {
    font-size: var(--body-text-size) !important;
    font-weight: 600;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: var(--body-text-family) !important;
    overflow: hidden;
}

.hadiah-card-price {
    font-size: calc(var(--body-text-size) - 4px) !important;
    color: #cb3a31 !important;
    padding: 4px !important;
    font-weight: 600 !important;
}

.hadiah-card-amount,
.hadiah-card-amount .total-amount {
    font-weight: 500 !important;
    font-size: calc(var(--body-text-size) - 6px) !important;
    color: #000 !important;
}

.wedding-gifts-title {
    font-family: var(--heading-family);
    font-size: var(--heading-size);
    color: var(--button-background-secondary);
    font-weight: 500;
}

.wedding-gifts-description {
    font-family: var(--body-text-family);
    font-size: var(--heading-size);
    color: var(--button-background-secondary);
}

.wedding-gifts-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}



/* =============================
        DRESSCODE
============================= */
.dress-wrapper .dress-title {
    color: var(--text-secondary);
}

/*========================
    RSVP PLUS
==========================*/

.rsvp-confirm-btn.back, .form-label{
    font-family: var(--body-text-family);
    font-size: var(--body-text-size);
}

.rsvp-plus-wrapper .form-control {
    background: #FFFFFF;
}