@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap";#music-onoroff{color:#eaeaea;text-align:center;z-index:100;-webkit-backdrop-filter:blur(2px);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0}#music-onoroff>div{background-color:#2b2b2b;padding:100px 40px;position:relative}#music-onoroff>div:before{content:"";border:1px solid #eaeaea80;width:95%;height:95%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#music-onoroff a:link,#music-onoroff a:visited{color:#eaeaea;border:1px solid #eaeaea;border-radius:20px;margin-bottom:40px;padding:7px 20px 5px 22px;text-decoration:none;transition:all .5s;display:inline-block;position:relative}#music-onoroff a:link:last-of-type{border:none}#music-onoroff a:hover,#music-onoroff a:active{color:#2b2b2b;background-color:#eaeaea}.music-button{color:#2b2b2b;cursor:pointer;z-index:110;mix-blend-mode:difference;border:1px solid #2b2b2bb3;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;animation:1.5s musicbutton;display:flex;position:fixed;bottom:10px;right:20px}@keyframes musicbutton{0%{transform:rotate(-10deg)}20%{transform:rotate(10deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-10deg)}to{transform:rotate(0)}}.music-off-line{transform-origin:0 0;border-top:1px solid #2b2b2be6;width:80%;transition:all .5s;position:absolute;top:20%;left:25%;transform:rotate(45deg)}.music-off-line.playmusic{width:0}header{box-sizing:border-box;color:#eaeaea;border:20px solid #eaeaea;gap:4vw;width:100%;height:100%;display:grid;position:relative;overflow:hidden}.header-title,.header-title-shadow{display:inline-block}.header-title-wrapper{flex-direction:column;width:100%;max-width:89vw;margin:3em auto 0;display:flex}.header-title{word-break:break-word;font-family:Cormorant Garamond,serif;font-size:clamp(1.5rem,5vw,4rem);font-weight:700}.header-title>h1{text-align:right}.header-title-shadow{text-align:left;letter-spacing:.2em;padding:0 0 0 .55em;font-size:3vw}.header-title-shadow>p,.header-caption>p{margin:0}.header-caption{width:86vw;margin:0 auto;font-size:.87rem;line-height:1}.header-caption>p{font-size:1em;line-height:1.5}.header-caption>p:first-child{font-size:4em;font-weight:500;line-height:1}.header-caption>p:nth-child(2){font-size:1em;line-height:1.5}.header-caption>p:nth-child(3){font-family:Cormorant Garamond,serif;font-size:2em;line-height:1}.header-title>h1{letter-spacing:.8vw;margin:0;font-size:14vw;line-height:.75em}.header-invite{text-align:left;position:absolute;bottom:1vw;left:2vw}.header-invite h2{margin:0;font-size:.75em;line-height:1.25em}header button{text-align:center;color:#f4f4f4cc;background:0 0;border:0;width:100%;margin-bottom:10px;text-decoration:none;animation-name:scroll;animation-duration:2s;animation-iteration-count:infinite;display:block;position:absolute;bottom:0}.header-down-arrow{color:#111;text-align:center;width:24px;height:24px;margin:auto;font-size:1em;position:absolute;bottom:0;left:0;right:0}@keyframes scroll{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}@media screen and (width>=375px){.header-caption,.header-invite{font-size:.85rem}.header-invite>h2{font-size:1em}}@media screen and (width>=480px){.attend span{font-size:14px}.header-caption,.header-invite{font-size:.9rem}.header-invite{text-align:right;bottom:3vw;right:4.5vw}}.invite{color:#eaeaea;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:500px;line-height:1.5;display:flex;position:relative;overflow:hidden}.invite:before{content:"";backdrop-filter:grayscale();border:1px solid #eaeaea;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute}.invitebg{opacity:0;background-image:url(invite_compressed.5b559f8b.jpg);background-position:50%;background-size:cover;transition:opacity .28s ease-in-out}.invitebg.in-view{opacity:1}.invite p{letter-spacing:1px;margin:0;font-size:1em;line-height:1}.invite h1{opacity:0;letter-spacing:.25rem;font-family:Cormorant Garamond,serif;position:relative}.invite.active h1{opacity:1;transition:all 2.5s}@media screen and (width>=700px){.invite video{width:100%;height:auto}}.radio-group{flex-direction:column;display:inline-flex}.radio-option{cursor:pointer;flex-wrap:wrap;margin-top:16px;margin-right:16px;display:flex}.radio-option input[type=radio]{appearance:none;cursor:pointer;background-color:#0000;border:1px solid #555;border-radius:50%;width:20px;height:20px;margin-top:.3em;margin-left:0;margin-right:1em;transition:all .2s ease-in-out;position:relative}.label-content{flex-direction:column;flex:1;display:inline-flex}.radio-option input[type=radio]:checked{background-color:#282828;border-color:#111}.radio-option input[type=radio]:after{content:"";display:none;position:absolute}.radio-option input[type=radio]:checked:after{border:1px solid #fff;border-width:0 1px 1px 0;width:5px;height:10px;display:block;top:2px;left:6px;transform:rotate(45deg)}input[type=text],input[type=email],select,textarea{box-sizing:border-box;letter-spacing:.13rem;-ms-overflow-style:none;scrollbar-width:none;background-color:#2b2b2b00;border:1px solid #2b2b2b80;border-radius:20px;width:100%;padding:12px 20px 10px}textarea::-webkit-scrollbar{display:none}input:focus,select:focus,textarea:focus{outline:none}select{text-indent:13px;height:38px;padding:8px 0}textarea{resize:none;font-family:Poppins,sans-serif;display:block}html{scroll-behavior:smooth}body,html{height:100%}.traffic,.schedule,.photo-video,.countdown,.RSVP{background-color:#eaeaea}.bg{z-index:-99;filter:grayscale();background-color:#111;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:fixed}body{color:#2b2b2b;background-color:#eaeaea;margin:0;padding:0;font-family:Poppins,sans-serif;font-size:14px;font-weight:200;line-height:2}.missing-required-field{color:red}h1,h2,h3{text-indent:0;letter-spacing:0;font-weight:100}h1{font-size:18px}.homebg{z-index:-100;opacity:0;background-image:url(city_13_compressed.a9fb68dc.jpg);background-position:1vw 0;transition:opacity .25s ease-in-out}.homebg.in-view{opacity:1}.intro{background-color:#eaeaea;position:relative;overflow:hidden}.intro-content>h1{font-weight:400}.intro>div{align-items:center;display:flex}.bride{text-align:right}.intro-pic{opacity:0;background-repeat:no-repeat;background-size:cover;width:40%;min-width:180px;height:350px;transition:opacity 1s ease-in-out}.groom{margin-top:50px}.bride{margin-bottom:50px}.groom .intro-pic{background-image:url(personal_compressed.127697c4.jpg);background-position:0;background-size:200%}.groom.active .intro-pic{opacity:1}.bride .intro-pic{background-image:url(personal_compressed.127697c4.jpg);background-position:88%;background-size:200%}.bride.active .intro-pic{opacity:1;transition:all 1s}.intro-content{flex-direction:column;gap:1em;width:60%;margin:50px 20px 50px 4%;font-size:.6rem;display:flex;position:relative}.intro-content h1{margin:0;font-family:Cormorant Garamond,serif;font-size:1.5em;font-weight:700;line-height:1}.intro-content p{margin:0;font-size:1.2em}.bride .intro-content{margin:50px 4% 50px 20px}.intro-content:before{content:"";background-color:#eaeaea;width:100%;height:100%;position:absolute;top:0;right:0}.bride>.intro-content:before{left:0}.groom.active .intro-content:before,.bride.active .intro-content:before{width:0;transition:all 1.5s}.schedule-title .countdown{text-align:center;padding:100px 0;line-height:3;position:relative;overflow:hidden}.countdown>h1{font-weight:300}#countdown{margin-bottom:48px}#countdown-content>.counting>h2{opacity:0;margin:0;font-size:16px;transition:all 1s;display:inline-block;transform:translateY(-20px)}.counting{margin:24px 0}.countdown.active #countdown-content>.counting>h2{opacity:1;transform:translateY(0)}.countdown.active #days{transition-delay:.5s}.countdown.active #hours{transition-delay:1s}.countdown.active #mins{transition-delay:1.5s}.countdown.active #secs{transition-delay:2s}.traffic{justify-content:center;align-items:center;padding-top:150px;display:flex;position:relative;overflow:hidden}.traffic>h1{writing-mode:vertical-lr;margin:0}.traffic>h1:first-of-type{transform:rotate(180deg)}.traffic-box{color:#eaeaea;background-color:#2b2b2b;flex-direction:column;align-items:center;max-width:300px;padding:50px 40px;display:flex}a{color:#2d2d2d}@keyframes maphint{0%{opacity:0}to{opacity:1}}.traffic-guide{max-width:250px;margin:auto}.schedule{padding:100px 0;overflow:hidden}.schedule-title{text-align:center;font-weight:300}.timeline-area{grid-template-columns:auto auto;gap:40px 20px;display:grid}.time{text-align:right;opacity:0}.activity{opacity:0}.schedule.active div{opacity:1;transition:all 1s}.schedule.active div:nth-child(3),.schedule.active div:nth-child(4){transition-delay:1s}.schedule.active div:nth-child(5),.schedule.active div:nth-child(6){transition-delay:2s}.schedule.active div:nth-child(7),.schedule.active div:nth-child(8){transition-delay:3s}.schedule.active div:nth-child(9),.schedule.active div:nth-child(10){transition-delay:4s}.dress-code-area{margin-bottom:256px}.dress-code{color:#eaeaea;flex-direction:column;align-items:flex-start;padding:10vw 3vw;display:flex;position:relative;overflow:hidden}.dress-code p{margin:0}.dress-code{background:#000}.dress-code-bg{background-image:url(dress-code_compressed.256cd0f1.jpg);background-position:50% 60%;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute;top:0;right:0}.dress-code-bg:after{content:"";background:linear-gradient(90deg,#000 0% 0%,#000 26%,#fff0 69%);width:100%;height:100%;position:absolute;left:0}.dress-code>h1{text-align:left;width:100%;position:relative}.dress-code>p{position:relative}.dress-code-color{text-align:right;border-top-left-radius:24px;border-top-right-radius:24px;border-bottom-left-radius:24px;width:24vw;margin:50px 0;padding:20px 10px 5px 0;position:relative;overflow:hidden}.dress-code-color>p{margin:0}#color1{color:#2b2b2b;background-color:#f4f4f3}#color2{color:#2b2b2b;background-color:#e2dcd6}#color3{background-color:#1e1e1e}#color4{background-color:#1f1f30}.photo-video{text-align:center;padding:50px 0;position:relative}.photo-video>h1{font-weight:300}.photo-box{-ms-overflow-style:none;scrollbar-width:none;grid-template-columns:auto auto auto;gap:50px 20px;max-width:700px;margin-bottom:50px;margin-left:auto;margin-right:auto;padding-top:50px;padding-left:20px;padding-right:20px;display:grid;overflow-x:auto}.photo{background-size:cover;width:220px;height:300px}#photo1{background-image:url(1.2e3ef055.jpg);background-position:50%}#photo2{background-image:url(2.1a37fca1.jpg);background-position:50%}#photo3{background-image:url(3.39e947a1.jpg);background-position:50%}.photo-area button{cursor:pointer}.photo-area button,.photo-area button:visited{color:#2b2b2b;background-color:#f4f4f400;border:1px solid #2b2b2b;border-radius:50px;padding:15px 25px;text-decoration:none;transition:all .5s}.photo-area button:hover,.photo-area button:active{color:#f4f4f4;background-color:#2b2b2b}#closebutton,#closebutton:visited{cursor:pointer;z-index:101;color:#2d2d2d;aspect-ratio:1;background:#ffffffbf;border:0;border-radius:50%;width:48px;margin:auto;padding:0;font-family:Poppins,sans-serif;font-size:2rem;text-decoration:none;transition:all .5s;display:none;position:fixed;bottom:.65em;left:0;right:0}#closebutton:hover,#closebutton:active{transform:scale(1.2)}#gallery{text-align:center;z-index:100;background-color:#010101f2;width:100%;height:100%;display:none;position:fixed;top:0;overflow-y:scroll}#gallery a:link,#gallery a:visited{color:#2b2b2b;text-decoration:underline;transition:all .5s}#gallery a:hover,#gallery a:active{color:#2b2b2b80}#photo-gallery{flex-direction:column;justify-content:center;max-width:100%;padding:5px 5px 100px;display:none}#photo-gallery>div{padding:5px}#photo-gallery img{width:100%}#video{display:none;position:relative;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}iframe{width:90%;max-width:640px}.RSVP{letter-spacing:1px;padding-top:50px;padding-bottom:50px;overflow:hidden}.RSVP h1{font-weight:300}.RSVP p{box-sizing:border-box;width:100%;max-width:680px;margin-bottom:24px;margin-left:auto;margin-right:auto;padding:0 24px}.formarea{margin-top:0;padding-left:16px;padding-right:16px}.attend{color:#2b2b2b4d;cursor:pointer;letter-spacing:0;display:inline-block;position:relative}.attend input,.hideinput input{opacity:0;position:absolute}.attend span.active{color:#fff;background:#2b2b2b}.attend:hover span{color:#2b2b2b99;transform:translateY(-5px)}.attend input:checked~span{color:#fff;background:#2b2b2b;transform:translateY(0)}.form-grid{text-indent:0;text-align:left;max-width:380px;margin:50px auto}.form-title{margin-top:32px;font-weight:400}.form-email-title{margin-top:14px}::placeholder{color:#2b2b2b80;font-family:Poppins,sans-serif}.hideinput{cursor:pointer;margin-right:10px;padding-left:20px;position:relative}.hideinput span{border:1px solid #2b2b2b;width:10px;height:10px;transition:all .5s;position:absolute;top:1px;left:0}.hideinput:hover span{background-color:#2b2b2b80}.hideinput input:checked~span{background-color:#2b2b2b}.attendees-select select{width:calc(47.5% - 45px);margin-right:5px}#submitbutton{color:#2b2b2b;text-indent:5px;letter-spacing:3px;cursor:pointer;background-color:#2b2b2b00;border:1px solid #2b2b2b;border-radius:20px;width:100%;margin-top:40px;padding:10px 20px;font-family:Poppins,serif;font-weight:400;transition:all 1s}.spinner{content:"";box-sizing:border-box;width:24px;height:24px;inset:0 0 60px;top:unset;pointer-events:none;border:.2em solid #ccc;border-top-color:#efefef;border-radius:50%;margin-left:auto;margin-right:auto;animation:.8s linear infinite spin;display:none;position:absolute}#loading{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#loader{border:8px solid #ffffffbf;border-top-color:#fff0;border-radius:50%;width:70px;height:70px;animation:1s linear infinite spin}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#submit-success,#submit-failed{color:#eaeaea;text-align:center;z-index:100;-webkit-backdrop-filter:blur(2px);letter-spacing:3px;text-indent:3px;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0}#submit-success:after,#submit-failed:after{content:"";backdrop-filter:blur(5px);z-index:-1;width:100%;height:100%;position:fixed;top:0;left:0}#submit-success h1,#submit-failed h1{letter-spacing:5px;text-indent:5px;font-size:20px;position:relative}#submit-success>div,#submit-failed>div{background-color:#2b2b2b;padding:50px 70px;position:relative}#submit-success>div:before,#submit-failed>div:before{content:"";border:1px solid #eaeaea80;width:95%;height:95%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.countdown{text-align:center;color:#fff;background:#2d2d2d;padding:40px 0;position:relative}#submit-success button,#submit-failed button{color:#eaeaea;text-indent:5px;letter-spacing:3px;cursor:pointer;background-color:#0000;border:1px solid #eaeaea;border-radius:24px;margin-top:24px;padding:12px 20px 10px 23px;font-family:Poppins,serif;font-weight:200;text-decoration:none;transition:background-color .5s ease-in-out;display:inline-block;position:relative}#submit-success button:hover,#submit-failed button:hover{color:#2b2b2b;background-color:#eaeaea}.hidden-submit-button{visibility:hidden;pointer-events:none;opacity:0}footer{color:#eaeaea;text-align:center;background-color:#2b2b2b;flex-direction:column;align-items:center;padding:30px 0;font-size:12px;display:flex;position:relative}footer>a{color:#eaeaeab3;text-indent:2px;background-color:#2b2b2b;border-radius:30px 30px 0 0;justify-content:center;align-items:center;padding:15px 15px 0;font-size:10px;text-decoration:none;display:flex;position:absolute;top:-25px}.name-circle{letter-spacing:0;border:1px solid #eaeaea80;border-radius:30px;margin:10px 0}.name-circle>p{margin:3px 20px}footer div a:link,footer div a:visited{color:#eaeaea;text-decoration:underline;transition:all .5s}footer div a:hover,footer div a:active{color:gray}.timeline{white-space:nowrap;grid-template-columns:1fr auto 1fr;grid-auto-rows:60px;justify-content:center;align-items:center;gap:100px 50px;max-width:700px;margin:70px auto 0;font-family:Poppins,sans-serif;font-size:15px;display:grid}.time{text-align:right}.time>span{font-size:12px}.time,.activity{opacity:0;transform:translateY(50px)}.activity{font-weight:400}.timeline.active>.time,.timeline.active>.activity{opacity:1;transition:all 1s;transform:translateY(0)}.timeline.active>div:nth-of-type(4),.timeline.active>div:nth-of-type(6){transition-delay:1s}.timeline.active>div:nth-of-type(7),.timeline.active>div:nth-of-type(9){transition-delay:1.5s}.timeline.active>div:nth-of-type(10),.timeline.active>div:nth-of-type(12){transition-delay:2s}.timeline.active>div:nth-of-type(13),.timeline.active>div:nth-of-type(15){transition-delay:2.5s}.timeline.active>div:nth-of-type(16),.timeline.active>div:nth-of-type(18){transition-delay:3s}.timeline.active>div:nth-of-type(19),.timeline.active>div:nth-of-type(21){transition-delay:3.5s}.timeline.active>div:nth-of-type(22),.timeline.active>div:nth-of-type(24){transition-delay:4s}.dot{background-color:#2d2d2d;border-radius:50%;width:5px;height:5px;position:relative}.dot:before{content:"";border-left:1px solid #2d2d2dcc;height:0;position:absolute;top:0;left:49.5%;transform:translate(-50%)}.timeline.active>.dot:before{height:160px;transition:all 1s}.timeline.active>div:nth-of-type(2):before{transition-delay:.5s}.timeline.active>div:nth-of-type(5):before{transition-delay:1s}.timeline.active>div:nth-of-type(8):before{transition-delay:1.5s}.timeline.active>div:nth-of-type(11):before{transition-delay:2s}.timeline.active>div:nth-of-type(14):before{transition-delay:2.5s}.timeline.active>div:nth-of-type(17):before{transition-delay:3s}.timeline.active>div:nth-of-type(20):before{transition-delay:3.5s}.timeline.active>div:nth-of-type(23):before{transition-delay:4s}.hope{text-align:center;letter-spacing:0;opacity:0;grid-column:1/span 3;padding-top:30px;font-size:13px;position:relative;top:12px}.timeline.active>.hope{opacity:1;transition:all 1s 4s}.title-large{font-size:20px}.attend span{color:#2b2b2b;background-color:#f4f4f400;border:1px solid #2b2b2b;border-radius:50px;padding:8px 25px;font-size:14px;text-decoration:none;transition:all .5s;display:inline-block}.form-name-title,.form-name-email-grid{margin-top:0}.form-button-group{justify-content:center;gap:14px;display:flex}.text-align-left{text-align:left}.margin-top-large{margin-top:48px}.margin-bottom-md{margin-bottom:14px}.center-align{margin:0 auto}.text-align-center{text-align:center}.profile-layout{gap:14px;max-width:600px;margin-left:auto;margin-right:auto;padding-top:50px;padding-left:16px;padding-right:16px;display:grid}.profile-left>img{width:auto;max-width:100%}.profile-left{aspect-ratio:1;max-width:unset;text-align:center;text-align:center;border-radius:50%;max-width:50%;margin:0 auto;overflow:hidden}.profile-left>img{object-fit:cover;width:100%;max-width:100%;height:100%}.profile-right{flex-direction:column;justify-content:center;display:inline-flex}.profile-title{text-align:center;margin:0}.profile-title>span{display:inline-block}.profile-right h2,.profile-right h3,.profile-right h4{margin:0;font-weight:200}.font-size-md{font-size:1rem}.margin-top-md{margin-top:16px}.margin-0{margin:0}.font-weight-h{font-weight:500}.font-weight-md{font-weight:400}.hide-menu{display:none}@media (hover){input[type=submit]:hover,input[type=submit]:active{color:#eaeaea;cursor:pointer;background-color:#2b2b2b}}@media screen and (width>=800px){#photo-gallery>div{width:48%}#photo-gallery{flex-direction:row}.intro{padding-top:150px}.intro>div{padding-bottom:150px}.dress-code-color{width:200px}}@media screen and (width>=700px){header h1{flex:1}.groom.active .intro-content:before,.bride.active .intro-content:before{transition:all 3s}.intro-pic{min-height:90vh}.homebg{background-position:65% 40%}.intro-pic{background-repeat:no-repeat;background-size:cover}.dress-code-bg{background-position:55% 60%}}@media screen and (width>=480px){.attend span{font-size:14px}h1{font-size:25px}.intro-content{font-size:.75rem}}
/*# sourceMappingURL=yunandkeat-web.158f4da3.css.map */